사각기억

사건 개요오늘도 즐겁게 스크림도르 코딩을 하던 중에 동료의 작업을 수정하다가 이상한 일이 발생했다. 코드로 함께 보자.기본적으로 나는 page에다가 BaseTemplate을 두어서 여기에서 header 밑의 main container의 구조를 잡고 작업한다. 해석해보자면 이러하다, Base template…

1. 개요라매개발자님이 주최하신 팀 프로젝트 그룹에서 만난 팀원분들과 한 달여에 걸쳐 만든 여행지 소개 페이지 (instagram…

React에서 TDD의 필요성과 JEST & RTLTDD의 필요성JEST의 기본적인 사용법RTL의 기본적인 사용법1. TDD…

redux-saga의 필요성과 그에 대한 생각 정리1. redux-saga의 용도react : UI를 컴포넌트 기반으로 제작하고 애플리케이션의 상태를 화면으로 랜더링할 수 있게 해줌redux : 애플리케이션의 전역 상태를 효과적으로 공유하고 관리 / UI -> Action -> Reducer -> State문제 발생 !! "클릭 하면 api…

로그인 프로세스를 이해하는데에 필요한 개념 정리1. 쿠키, 세션, 캐시, 스토리지쿠키 : 컴퓨터에 저장되는 작은 기록, 정보 파일 (개인 소장용 방문일지)세션 : 서버쪽에 저장되는 정보 파일웹 캐시 : 이미지 같은 용량이 큰 파일을 그때그때 서버에서 가져오면 부하가 심하니 따로 공간을 마련해서 컴퓨터에 저장로컬 스토리지, 세션 스토리지 : 둘 다 HTML…

Redux의 작동 구조해당 글은 redux를 사용하려면 어떤 식으로 파일을 구성해야하는 지에 대해 기억하기 위해 쓰인 글인 만큼 구체적인 작동 방식은 다음의 포스트를 확인하는 것을 추천한다.redux 적용하기1. redux의 핵심 A.R.Sredux…

useReducer Hook에 대한 이해어떠한 것에 대해 이해하기 위해 가장 중요한 것은 탄생한 목적과 목표에 대해 이해하는 것이다. 그러한 사실에 입각하여 react의 useReducer Hook에 대해 이해해보고자 한다.useReducer의 목표useReducer는 무엇을 이루고자 할까?useState와 비교했을 때, useReducer…

useContext 사용법STEP 1. createContext, useContext를 가져온다.STEP 2. 새로운 변수에 createContext를 담고 인자로 기본값을 준다.STEP 3. 최종 전달하여 사용하고픈 컴포넌트에서 useContext로 newContext를 가져온다.STEP 4. context.Provider…

리액트 컴포넌트 구조를 정석대로 디자인해보자이번에 react를 사용해서 to-do-list를 구현하려다 막상 트라이해보려고 하니 어디서부터 시작할지 막막했다. 그래서 컴포넌트 구조를 어떻게 짤 지를 설명해주는 기초적인 기사를 하나 정리해보려고 한다. 어찌보면 당연한 이야기이지만 정리해서 기억해두려는 것을 목표로 글을 써본다. 기사에서 소개하는 react…

Styled-Components를 이해한대로 정리해보기이번에 css in js를 한 번 공부해보자는 생각을 가지고, 가장 많이 쓰이는 라이브러리인 styled-components를 공부해보았다. 그렇게 내가 이해한 바를 최대한 글로 남겨보려고 한다. 조금은 두서가 없어도 이해 바란다.styled-components의 결과물styled-components…