TIL

JWT을 이용하여 로그인, 회원 인증과 백엔드 개발자님과 협업하는 과정에서 발생한 CORS 이슈 해결 과정을 정리했습니다.서버에 email, password 전송, 맞다면 서버는 클라이언트에 jwt 토큰 전달클라이언트는 토큰 저장 후, 서버에 전송, 유효성 체크기본적으

header나 navbar와 같이 모든 페이지에 있어야 하는 컴포넌트가 특정 페이지 (로그인, 회원가입)에는 보여지지 않아야 할 때도 있습니다.props를 이용해 isVisible값과 같은 변수를 이용해 처리할 수 도 있지만, react-rotuer를 이용해서 처리해봤

로그인, 회원가입 처럼 한 페이지, 컴포넌트 안에서 네트워크 통신을 할 때, 비동기 통신이 하나밖에 없을 경우 굳이 Redux와 미들웨어들을 사용해 코드가 복잡해질 필요는 없습니다.이 때 전역 상태 관리를 위해 ContextAPI와 같이 간단하게 사용할 수 있는 SWR

Lodable 라이브러리를 이용해 쉽게 스플리팅 할 수 있습니다.npm i @loadable/componentnpm i --save-dev @types/loadable\_\_component : TS 사용 시위에 설명한 것 처럼 페이지 단위로 코드 스플리팅할 수 있습니

CRA로 만든 React 프로젝트에 TypeScript 적용 방법과 적용 과정에서 알아두면 좋은 타입들을 정리했습니다.해결하기 힘든 오류로 프로젝트가 엉망이될까봐 새 브랜치에 나누고 merge 하면서 진행했습니다.프로젝트를 처음 만든다면,기존 CRA로 만든 React

Redux에 Type 적용 과정data 타입 정의액션 리턴 타입 정의초기값 타입 정의리듀서 타입 정의rootReducer RootState 타입 정의초기값이 객체면서 객체 안의 타입이 많다면 미리 정의 해두는 게 편합니다. 또 전역 상태로 자주 쓰이기 때문에 언제든지

평소 scss를 그냥 css 쓰듯 써서(..) 프로젝트 무게도 낮출 겸 TS 적용 겸 styled-components로 교체해봤습니다.글로벌 스타일, 초기값들을 정의합니다. css 파일이 아닌 JS 안에서 스타일을 정의하기 때문에 별도의 방법으로 적용합니다.styled

React에서 Chartjs 적용, 오류 해결과 타입 지정에 대한 정리글 입니다.chartjs와 react chartjs를 같이 설치합니다.yarn add react-chartjs-2 chart.jsChartjs에서 공식문서에서 원하는 도형 선택, 차트 데이터와 옵션을

EC2, Nginx를 이용해 React 앱을 배포하는 방법은 검색해보면 많이 나오니깐 보고 하시면 될 것 같습니다.적용하는 과정에서 헤맸던 부분, 오류 해결하는 과정을 정리한 글입니다.참고 글AWS EC2에서 Nginx로 React 앱 직접 배포하기운영체제는 Amazo

React에서 체크 박스에 관련된 기능 구현을 정리한 글입니다.전체 체크 기능개별 체크 기능개별 체크 모두 체크 시 자동으로 전체 체크 ( 반대 상황 포함 )checkedList 배열개별 체크 박스들을 저장할 배열입니다.onCheckedAll 함수onChange 이벤트

select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다.드롭다운 기본 기능.드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, 미는지 )드롭다운 상태를 저장합니다.

React Slice를 이용해 캐로셀을 구현해봤습니다.yarn add react-slickreact-slick의 기본 클래스인 slick-slide을 지정해 줍니다. styled-components를 사용하면 임의로 클래스 이름을 정의하기 때문에 지정된 이름으로 스타일

매번 필요할 때마다, 궁금할 때마다 설정들을 가져와 사용만 하다 이번 기회에 저만의 프로젝트 webpack, babel 설정을 정리했습니다.webpack, babel 공식 문서를 참고해 작성했습니다.개발, 배포용에서 함께 사용할 수 있는 webpack 설정입니다.첫 시

애플리케이션이 요구 사항에 맞게 동작하는지 검증하는 행위기능 명세서를 봤을 때 이 기능 명세서대로 어떻게 작동하는지 알 수 있다. 수동으로도 가능하지만 기능 명세서가 많아지면 시간이 오래 걸리게 되는데, 이때 테스트 코드가 있다면 빠르고 짧게 자동으로 검증할 수 있고

이메일 템플릿은 G-mail, naver, daum과 같은 플랫폼에서 이메일을 통해 보이는 웹 구조입니다.아래와 같은 것이 이메일 템플릿입니다. 저는 이미지처럼 저장해서 보내는 줄 알았는데 HTML 구조로 이루어져 있었네요.HTML 구조로 되어있지만 일반적인 마크업과

큰 흐름과 관계가 적은 하위문제들을 추출하자1\. 주어진 함수나 코드를 보고 질문해라. 상위수준에서 본 이 코드의 목적은?2\. 코드의 모든 줄에 질문해라. 이 코드는 직접적으로 목적을 위해 존재하나? 혹은 하위문제를 해결하는 목적인가?3\. 만약 원래의 목적과 직접적

브랜치를 다른 브랜치와 합치는 방법인 merge와 rebase에 대해 정리했습니다.먼저 스터디 시나리오를 준비했습니다. 스터디장이 레파지토리를 만들고 (첫 번째 커밋), 1주차 정리 글을 올리기 위해 week1 폴더를 생성하고(두 번째 커밋) push 한다. -main