Nginx와 apache가 무엇인지
2022. 7. 21. 19:42
TIL/개념정리
Nginx, Apache의 개념 클라이언트의 HTTP(HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜) 요청을 받아 정적인 컨텐츠를 제공하는 서버 혹은 프로그램 정적인 컨텐츠 = html, css, js, 이미지 html, JS 같은 정적인 프론트엔드 컨텐츠들은 웹서버를 구축한다면 웹서버 선에서 요청을 정리할 수 있습니다. 하지만 정적인 컨텐츠말고도 당연히 동적인 컨텐츠를 처리하기 위한 구조가 항상 웹서버를 공부할 때 따라다니는데, 이것을 WAS(Web Application Server)라고 합니다. 웹서버는 정적인 컨텐츠를 제공하는 것 외에도 WAS구조에서 동적인 처리를 하는 컨테이너에게 요청을 넘겨주게 되며 처리가 끝나면 응답을 받아 다시 클라이언트로 전송하는 역할을 합니다 이때 대..
swagger가 필요한 이유와 정리
2022. 7. 19. 21:44
TIL/개념정리
개요 API를 문서화 시키는 것은 상당히 중요한 작업입니다. 여러 API들을 개발했다 하더라도 문서화가 되어있지 않거나 제대로 작성되지 않았더라면 API를 사용하는 이점이 줄어들 뿐만 아니라 제대로 사용하기 불가능하기 때문에 이러한 API들을 잘 작성하는 것에도 꽤 시간을 투자해야 합니다. 이러한 불편함과 어려움들을 많이 줄여주는 API 문서자동화 도구(프로젝트 파일에 형식을 지켜 작성해놓으면 이를 바탕으로 자동생성함) 시키면 자동으로 가 있는데 그것을 swagger라고 합니다 간단한 설정으로 프로젝트에서 지정한 URL들을 HTML 화면으로 확인할 수 있게 해주는 프로젝트입니다. Swagger를 활용해서 API 명세를 작성한다면, 보다 쉽게 API 명세를 작성할 수 있습니다. https://overcom..
API 쉽게 이해하기
2022. 7. 19. 21:41
TIL/개념정리
API란? API(Application Programming Interface) 이론적인 정의 : 프로그램들이 서로 상호작용하는 것을 도와주는 매개체 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다. 💡 예시로써 일상생활에 대입했을 때 모든 서비스와 편의시설 등이 API에 예시로써 설명할 수 있다고 생각합니다. 정말 단순하게 이해하고자 한다면.. 이러한 서비스와 편의 시설이 컴퓨터에서(프로그래밍) 구현된다고 생각했을 때, 그걸 API로 이해가 가능하기 때문입니다 ( API가 상당히 포괄적인 개념이기 때문입니다 ) 사용되는 곳 여러 문서나 자료들을 읽어보면 API가 상당히 자주 사용됩니다. 예를..
Framer-motion 간단한 사용법 정리
2022. 7. 16. 09:47
TIL/개념정리
AnimateSharedLayout | Framer for Developers AnimateSharedLayout | Framer for Developers Animate layout changes across, and between, multiple components. www.framer.com https://github.com/framer/motion GitHub - framer/motion: Open source, production-ready animation and gesture library for React Open source, production-ready animation and gesture library for React - GitHub - framer/motion: Open so..
@keyframes - animation 사용법
2022. 7. 14. 23:26
TIL/개념정리
@keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법 @-moz-keyframes @-webkit-keyframes @keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } 크로스 브라우징 이슈를 해결하기 위해 접두사를 붙여줍니다. 크롬&사파리 : -webkit- 파이어폭스 : -moz- 오페라 : -o- 인터넷 익스플로러 : -ms- 참고 https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068 https://pro-se..
styled-components 문법 정리
2022. 7. 13. 21:38
TIL/개념정리
https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com npm install --save styled-components 기본적인 문법들 import styled from "styled-components"; const Father = styled.div` display: flex; justify-content: center; align-items: center; `; return ( ); 기본적인 styled-components의 사용법..
File upload 취약점
2022. 7. 12. 22:29
TIL/개념정리
개요 파일 업로드 취약점이란 웹에서 서버로 파일을 업로드할 때 시스템 명령어를 실행할 수 있는 악성 스크립트를 업로드 하는 것으로 성공하게 된다면 시스템 권한을 획득하거나 정보 탈취 등의 문제가 발생할 수 있습니다. 악성 스크립트 파일들을 주로 웹쉘이라고도 하며 주로 웹서버에서 명령을 수행하도록 만들어진 스크립트 파일입니다. 그렇다보니 웹서버의 피해 공격 중 상당수에서 웹쉘들이 사용되었다고 하며 이후 클라이언트 공격에도 취약해지는 등 다양한 문제가 야기될 수 있습니다. https://www.dailysecu.com/news/articleView.html?idxno=126259 비정상 광고 삽입, 그냥 넘어가다간 대형 보안사고로 이어져 - 데일리시큐 웹서버 관리자가 퇴근하면 발생하는 무단광고노출 사고가 빈..
CSRF와 방어 방법이 무엇인지
2022. 7. 9. 19:41
TIL/개념정리
개요 CSRF란 사이트 간 요청 위조 (Cross-site request forgery)의 줄임말로 사용자가 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하는 공격을 의미합니다. CSRF란? 쉽게 이해하자면 하나의 피싱 방식이라고 이해할 수도 있습니다. 대표적으로 옥션에서 발생한 하나의 CSRF 사건이 있습니다. 공격 단계를 살펴보면 관리자가 사이트에 로그인 되어있을 때 관리자에게 악성 링크를 누르게하고 링크를 클릭했을 때 관리자의 비밀번호가 변경되는 URL, 예를 들어 url 파라미터로 서버에 비밀번호 변경 api로 요청하게 만들어 비밀번호가 변경된다면 이후 해커가 관리자의 변경된 비밀번호로 접속 한 후 정보를 빼간 사건이 있었습니다. 비밀번호가 변경되는 것은 하나의 대표적인 예시일 뿐..
SSG 도입하기 / getStaticPaths, getStaticProps
2022. 7. 7. 19:17
TIL/트러블슈팅
요약 Error : getstaticpaths is required for dynamic ssg pages and is missing for... 를 만나서 정리하였습니다 getStaticPaths와 getStaticProps은 동적라우팅할 때 getStaticProps를 통해 불러올 데이터들을 getStaticPaths로 정해준다고 생각하면 됩니다. 우선 동적인 페이지를 SSG로 빌드시키기 위해선 빌드할 때 페이지를 만들어야 합니다. 하지만 SPA, SSR 방식으로 구현했을 때를 생각해보면 페이지 요청시마다 데이터를 받아오고 보여주면 되지만 SSG로 구현하는 경우 요청이 없더라도 미리 만들기 위해 데이터를 받아와야합니다 이 때 만약 동적인 페이지라면 해당 URL의 모든 경우에 따라 데이터를 요청해서 받..
XSS - 크로스 사이트 스크립팅
2022. 7. 5. 15:27
TIL/개념정리
개요 가장 기초적인 취약점 공격방식이지만 OWASP Top 10에서 중요하게 여기던 취약점 중 하나로 공격자의 Javascript 코드를 입력해놓으면 실제 사용자가 동적인 웹 페이지를 클릭하거나 열람할 때 페이지에 의도하지 않은 악성 스크립트가 실행되는 공격 방식 중 하나입니다. 일반적으로 의도하지 않은 행동을 수행시키거나 쿠키, 세션, 토큰같이 민감한 정보 혹은 악성코드를 다운로드하게 됩니다. https://www.riskbasedsecurity.com/2014/06/11/cross-site-scripting-xss-found-in-tweetdeck/ Cross-site Scripting (XSS) Found in Tweetdeck Tweetdeck tab. It turns out that someon..