본문 바로가기

코딩 공부204

[JS] async와 await async와 await ES2017에 도입된 문법으로서, Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해줍니다. 유의해야 할 점이 async/await가 Promise를 대체하기 위한 기능이 아니라는 것입니다. 내부적으로는 여전히 Promise를 사용해서 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만 다르게 해줄 뿐이라는 것입니다. 🏷️ async와 await 기본 사용법 async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽습니다. function 키워드 앞에 async 만 붙여주면 되고, 비동기로 처리되는 부분 앞에 await 만 붙여주면 됩니다. // 기존 Promise.then() 형식 function.. 2023. 12. 9.
[Web] JWT JWT(Json Web Token) Json객체를 이용하여 정보를 비밀리에 전달하거나 인증할 때 주로 사용하는 토큰입니다. 일반적으로 클라이언트와 서버 사이에서 통신할 때 권한을 위해 사용하는 토큰입니다. 웹 상에서 정보를 Json형태로 주고받기 위해 표준규약에 따라 생성한 암호화된 토큰으로 복잡하고 읽을 수 없는 string 형태로 저장되어 있습니다. 🏷️ JWT 로직 🏷️ JWT 구조 하나의 JWT 토큰은 헤더(header)와 페이로드(payload), 서명(signature) 이렇게 세 부분으로 이루어지며 각 구역이 기호로 구분됩니다. ✅ 헤더(header) // header { "alg": "HS256", "typ": "JWT" } 어떠한 알고리즘으로 암호화할 것인지, 어떠한 토큰을 사용할 것 인.. 2023. 12. 8.
[Spring/Web] CSRF CSRF( Cross Site Request Forgery ) 사용자가 자신의 의지와 무관하게 공격자가 의도한 행동을 하여 특정 웹페이지를 보안에 취약하게 한다거나 수정, 삭제 등의 작업을 하게 만드는 공격 방법을 의미합니다. 위와 같이 A라는 도메인에서, 희생자가 조작된 요청정보를 포함한 게시물을 사용하였을 경우, 공격자도 권한을 가지게 되어서 A 도메인에서는 이 사용자가 일반 유저인지, 공격자의 악용된 공격인지 구분할 수가 없게 됩니다. 🏷️ CSRF의 특징 ▪️ XSS와 함께 웹에서 가장 효과적인 공격방법 ▪️ 스크립트가 없어도 공격이 가능한 방법 ▪️ 정상 사용자를 통해 공격이 진행되므로 공격자의 정보(IP 등)를 추적하는 것이 불가능 ▪️ Session Hijacking과 비슷한 권한을 도용한 .. 2023. 12. 4.
[React] Formik Formik Formik은 React의 장황한 form을 3가지 측면에서 도와주는 작은 라이브러리입니다. ▪️ form state 안팎에서 값 가져오기 ▪️ 유효성 검사 및 오류 메시지 ▪️ form submit 처리 현재 시점에 비슷한 라이브러리들과의 다운로드 수를 비교해보면 1위를 달리고 있고 formik이 다른 라이브러리들에 비해 성능 측면이나 추론, 리펙토링에서 우위를 점하고 있습니다. 🏷️ 설치 npm install formik 🏷️ 예시 코드 import { Formik, Form, Field, ErrorMessage } from "formik"; export default function TestComponent() { // 코드 생략 function onSubmit(values) { // .. 2023. 12. 3.
[React] useEffect useEffect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook입니다. 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다. 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때 , 그리고 업데이트 될 때 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.(라이프사이클 훅을 대체할 수 있게 되었습니다) ex) componentDidMount, componentDidUpdate, componentWillUnmount mount란? 리액트에서 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 말 그대로 브.. 2023. 12. 2.
[Spring / Web] CORS CORS(Cross-Origin-Resource Sharing) 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 직역하면, 교차되는 출처 자원들의 공유입니다. 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부릅니다. 🏷️ 출처(Origin) 위의 구성요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 합니다. 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수 있다. ✅ 동일 출처 예시 URL 설명 http://example.com:80 http://example.com HTTP 기본 Port인 80번이 생략되어있으므로 동일 .. 2023. 12. 1.

티스토리툴바