개발일기

컴포넌트란? 컴포넌트란, 기능별로 부분부분 잘게 나눠놓은 조각을 뜻한다. 리액트는 컴포넌트 기반의 라이브러리다. 하나의 프로젝트를 구성할 때, 여러개의 컴포넌트들로 화면을 구성한다. 로그인화면을 구성할 때, 아이디 입력칸, 비밀번호 입력칸, 로그인 버튼, 회원가입 버튼 등의 요소가 필요하다. 이러한 각각의 요소가 컴포넌트로써, 여러개의 컴포넌트를 결합하여 하나의 화면을 구성한다. 구성방법 아이디, 비밀번호 입력칸 const AuthBlock = () => ( return ( ); ); export default AuthBlock; 로그인버튼 const AuthButton = () => { return ( ); }; export default AuthButton; 아이디, 비밀번호 입력 컴포넌트와 로그인버..

0. JSX란? JSX란 JavaScript eXtension의 줄임말로써 HTML태그 (div, h1, h2 등)들을 자바스크립트 소스코드 안에 사용하는 것을 뜻한다. JSX로 작성된 코드들은 빌드될 때, Babel이 자바스크립트 코드로 변환시켜준다. 1. 장점 XML형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다. createElement등의 태그들을 만드는 문법을 사용하지 않고 직접 태그들을 선언하기에 코드의 양이 감소한다 2. 특징 및 유의점 리액트와 궁합이 잘맞기에 함께 사용하는 것이 권장된다. 변수 선언 또는 출력시, {}로 변수를 감싸줘야한다. class와 for속성 대신, className, htmlFor라는 속성으로 이름이 바뀐다. 처럼 태그가 닫혀있지 않는 경우에는 오류가 ..

1. 쿠키란?? 사용자에 관한 데이터를 서버에 저장하는 것이 아니라 로컬에 임시적으로 저장하여 데이터를 활용할 수 있는 저장공간을 뜻한다. 쿠키와 비슷한 성격의 로컬 저장소로는 세션 스토리지와 로컬 스토리지가 존재한다. 하지만 이번 게시글에서는 쿠키에 관한 내용을 다뤄보고자 한다. 이전 게시글 처럼 필자는 JWT토큰을 활용하여 사용자 인증을 하는 기능을 구현하였다. 이 기능을 구현하면서 로그인 시 생성되었던 JWT토큰을 저장할 적절할 공간을 찾고 있었다. 여러 가지 경우의 수를 고려해 보았을 때, JWT토큰은 브라우저 창을 닫은 상태여도 세션이 유지되어야 하고, 모든 브라우저에서 활용을 할 수 있는 범용성을 가지고 있으면 좋겠다는 생각이 들었다. 이러한 특징들을 종합했을 때, 저장소로 쿠키를 활용하는 것..