김도리의 개발자로서 성장기

전역 상태값을 관리하기 위해 기존에는 Redux를 사용하고 있었다. 처음 동작 원리에 대해 이해하는것도 매우 힘들었고, 사용하면 할수록 써야할 코드 양도 많고, 매번 비슷한 코드를 여러군데에서 계속 써야하는게 너무 귀찮았다. 이게 진짜 최선일까? 너무 비효율적인데 하는 생각을 하던 와중에 Recoil이라는 것을 발견했다. React에서 상태값을 관리하기 위해서 사용되는 기술은 여러개인데 Redux 같은 상태관리 라이브러리를 사용하는 방법뿐만 아니라 Context API를 사용하는 방법, 라이브러리 없이 직접 state를 사용하는 방법이 있다. 직접 state를 사용하는 방법 작은 프로젝트에서는 괜찮겠지만 어느정도 규모가 있는 프로젝트에서는 Prop Drilling이 과도하게 발생할 수 있다. Prop D..

env 개발할 때 개발팀만 알아야하는 프라이빗한 값들(git에 올라가면 안되는 값)이 있다. 예시) 라이브러리 API KEY, 포트, DB관련 정보 등,, 환경변수 파일을 외부에 만들어 API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용하는 방법이다. 설치 npm install --save dotenv .env 프로젝트 루트 경로에 .env 파일을 생성하고 작성한다. REACT_APP_API_KEY=MY_API_KEY REACT_APP_SERVER_PORT=3030 REACT_APP_DB_HOST=localhost REACT_APP_DB_USER=root REACT_APP_DB_PASSWORD=MY_DB_PASSWORD React에서 .env를 사용하려면 변수명이 REACT_APP으로 시작..

JWT JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰이다. 로그인 이후 서버가 만들어주는 문자열이다. 이 문자열에는 사용자의 로그인 정보가 들어있고, 해당 정보가 서버에서 발급되었음을 증명하는 서명이 들어있다. 사용자가 로그인을 하면 서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해주고, 추후 사용자가 다른 API를 요청할 때 발급받은 토큰과 함께 요청하게 된다. 그럼 서버는 해당 토큰이 유효한지 검사하고, 결과에 따라 작업을 처리하고 응답한다. 모든 API에 토큰을 넣는다는 것이 아니라 본인임을 증명해야하는 API들에 토큰을 넣어 통신해야 한다. 예시) 내 정보 수정, 장바구니 조회 등 const headers = { accept: 'applicatio..

localStorage 브라우저가 가지고 있는 임시 저장 공간 새로고침을 하면 JS 파일들은 모두 처음부터 다시 읽어들이기 때문에 당연하게 모든 state의 데이터는 초기화 됨 state에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB에 저장하면 되는데 별도의 서버나 DB가 없다면 localStorage에 저장하는 방법이 있다. localStorage는 브라우저에 몰래 정보를 저장할 때 사용할 수 있는 공간이다. localStorage 확인 크롬에서 개발자도구를 켜서 Application 탭에 들어가면 좌측 Storage 하위 목록인 Local Storage를 확인할 수 있다. 문법 // 데이터 추가 localStorage.setItem('키값', '데이터'); // 데이터 조회 localStorag..

리액트는 AJAX를 구현하려면 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야 한다. HTTP Client를 내장하고 있는 Angular와 다르게 따로 내장 클래스가 존재하지 않기 때문이다. AJAX (Asynchronous Javascript And XML) 비동기식 자바스크립트와 xml 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 비동기 통신, 클라이언트와 서버간 XML 데이터를 주고받는 기술 비동기 방식 웹페이지를 리로드하지 않고 데이터를 불러오는 방식 서버에 요청한 후 멈추어 있는 것이 아닌 그 프로그램은 계속 돌아감 필요한 부분만 불러와 사용할 수 있다는 장점이 있다. ax..

redux 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 컴포넌트간 공동의 상태에 접근해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 접근할 수 있다. Context API를 통해서도 동일한 작업을 할 수 있다. 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기에 대규모의 프로젝트에서는 리덕스를 사용하는 편이 더 좋다. 코드의 유지 보수성을 높여주고, 작업 효율도 극대화해준다. 1. 액션 (Action) 상태에 어떠한 변화가 필요하면 발생하는 것 { type: 'ADD_TODO', data: { id: 1, text: 리덕스 배우기' } } type에 액션의 이름을 넣고, 그 외의 값들은 마음대로 넣을 수 있다. 2. 액션..

일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방식으로, 특별한 규칙을 사용하여 클래스 이름을 짓는 방식과 CSS Selector를 활용하는 방식이 있다. 1. 이름 짓는 규칙 (컴포넌트 이름)-(클래스 형태) 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지한다. 예시) App-header, App-logo,,, 2. CSS Selector CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 예시) // App 클래스 안의 logo 클래스 .App .logo { ... } // App 클래스 안의 header 태그 .App header { ... } Sass 자주 사용하는 CSS 전처리기 중 하나로, 확장된 CSS 문법을 사..

useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. (클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합쳤다고 봐도 무방하다.) import { useEffect } from 'react'; useEffect(() => { ... }); 이렇게 사용하면 렌더링 될 때마다 ... 코드가 실행된다. 화면에 맨 처음 렌더링될 때(마운트)만 실행하고 싶을 때 useEffect(() => { ... }, []); 함수의 두번째 파라미터로 빈 배열을 넣어주면 된다. (단, 개발 환경에서만 useEffect가 두번 호출 될 수 있다.) 특정 값이 업데이트될 때만 실행하고 싶을 때 특정 값이 바뀔때마다 특정 작업을 수행해야 ..