본문 바로가기

전체 글

 (147)
[Zeros] location.state를 사용하면 안되는 경우 언제 location.state를 사용할까? react router에서 useNavigate와 useLocation을 사용하면, 서로 다른 컴포넌트에서 data를 공유할 수 있다. // card component navigate(`${id}`, { state: { ...data }, }); // detail page const { data } = location.state; Zeros에서는 카드 컴포넌트를 클릭했을 때, 그 카드에 대한 디테일 정보를 확인할 수 있는 페이지로 넘어가게 되어있다. 특히 카드 컴포넌트와 디테일 페이지에 겹치는 데이터가 많기 때문에 useNaviga + useLocation을 이용해서 data를 공유하기로 결정했다(안돼). 굳이 한번 더 http 요청을 보낼 필요가 없다고 느꼈..
[Zeros] 로그인 상태 유지하기 localStorage.setItem firebase를 통해 소셜 로그인을 구현하기는 했는데, 로그인 상태를 유지하는 로직을 어떻게 짜야 좋을지 고민이 많았다. 페이지를 재방문했을 때에도 로그인 상태를 유지하도록 만드는 기능을 구현해 본 적이 있긴 하다. 이전에는 아래와 같은 방식으로 로그인 상태를 유지했다. localStorage에 로그인 여부를 boolean으로 저장하고, 어플리케이션이 실행될 때 마다 이 값을 읽어온다. 값이 true일 때에는 login state를 true로 업데이트 한다. 그러나 이 방법은 사용자가 로그인 상태를 조작하기 쉬워진다는 단점이 있다. 로컬 스토리지에 직접 값을 true로 입력해 두면, 실제로 로그인하지 않더라도 로그인 한 상태로 업데이트 되기 때문이다. firebas..
[Zeros] creat react app & postcss why postcss? | styled component와 tailwind를 쓰면서 불편했던 점 프리온보딩을 진행하면서 styled component와 tailwind css를 써봤다. 결론적으로는 둘 다 마음에 들지 않았다! 먼저 스타일드 컴포넌트는, 동적으로 className을 지정하는 것으로 스타일링이 업데이트 되지 않는 점이, 테일윈드는 className이 한없이 길어질 수 있다는 점이 별로였다. 하지만 styled component에서 사용되는 nesting 이나, tailwind에서 필요한 css 모듈을 설치해서 쓸 수 있다는 점은 편리했다(hide-scroll-bar와 관련된 모듈이었다). 이런 편리함에도 불구하고, 스타일드 컴포넌트와 테일윈드가 마음에 들지 않아서 이것 저것 찾아보다가 po..
[Zeros] stopPropagation vs. event.target !== event.currentTarget 자식 요소와 부모 요소에 동일한 이벤트의 리스너가 등록되어 있으면, 이벤트 버블링이 발생한다. 예를 들어 카드 컴포넌트(부모)와 삭제하기 버튼(자식)에 모두 클릭 리스너가 등록되어 있고, 삭제 버튼을 클릭하면 다음과 같은 일이 발생한다. 삭제하기 버튼에 등록된 리스너 함수가 실행된다. 문제는, 버튼이 카드의 자식 요소이기 때문에 발생한다. => 버튼이 클릭되었다는 것은, 카드가 클릭되었다는 것이기도 하기 때문이다. 카드가 클릭되기도 했으므로, 카드에 등록된 리스너 함수가 실행된다. 나의 경우 카드를 클릭했을 때, 해당 카드의 정보를 더 자세히 볼 수 있는 페이지로 이동하도록 만들어두었다. 그랬더니 삭제하기를 클릭했을 때 페이지 이동이 발생해서, 삭제 기능을 사용할 수가 없는 문제가 생겼다. 뿐만 아니라,..
[Zeros] event delegation이 예상한 대로 동작하지 않는 문제 이벤트 버블링으로 생길 수 있는 문제를 막기 위해, 항상 부모 요소에 이벤트를 위임하는 방식으로 코드를 작성하고 있었다. {!isSelectBoxClicked && ()} {!isSelectBoxClicked && ()} {isSelectBoxClicked && ( /*...*/ )} 부모 컴포넌트인 label에 이벤트를 위임하면, input이나 Icon에 클릭 이벤트가 발생했을 때에도 label에 등록된 toggleSelectBox가 실행된다. 그래야 하는데 icon을 클릭했을 때 예상한 대로 동작하지 않는 것을 확인할 수 있었다. 그 이유는 다음과 같았다. 사실 icon을 클릭했을 때, label에 등록된 toggleSelectBox 함수가 잘 실행되었다. 문제는 그 다음 단계에서 일어났는데, ico..
react-firebase | authentication +) authentication concepts | 인증에 대한 기본 개념 firebase authentication | youtube | react firebase authentication tutorial 1. connecting firebase to our projects $ npm install firebase $ yarn add firebase 프로젝트 폴더에서 firebase 패키지를 설치한다. firebase console > 새로운 프로젝트 만들기 해당 프로젝트 설정(setting) 페이지 > 그림의 버튼을 클릭하면, console의 프로젝트와 실제 프로젝트 폴더(1번에서 패키지를 설치한 폴더)를 연결할 수 있도록 가이드를 제공한다. 가이드에서 아래와 같은 형식의 코드를 제공한다. // s..
Authentication why we use Authentication? 모든 방문자에게 보여지는 게 아닌 컨텐츠가 있을 때, 즉 보호해야할 컨텐츠(protected contents)가 있을 때 authentication이 필요하다. 이 때 컨텐츠란 페이지의 특정 요소라기 보다는, 특정 api의 end point(= 특정 request를 보내고, 그 response를 보여주는 페이지)를 의미하는 경우가 많다. ex) 로그인하지 않은 사용자는 비밀번호를 바꾸는 페이지에 접근할 수 없다. how Authentication works? Authentication Steps get permission 사용자가 로그인을 시도하면, 관련 데이터가 서버에 제출된다. 서버는 DB에 접근해서 id/pw 조합을 확인하고, 그 결과를 respons..
Webpack what is webpack? ESmodule(import/export) 구문은 최신 브라우저에게 어떤 파일을 다운로드하고 실행할지 명시해 준다. 즉 import 구문이 많아질수록 더 많은 파일을 다운로드 해야 하고, 이는 더 많은 http request가 필요하다는 것을 의미한다. 물론 import 파일을 다운로드 하는 데에도 시간이 소요되지만, 파일을 다운로드 하기 위해 보내는 request 자체를 준비(set up)를 하는데에도 시간(base overhead)이 소요된다. 이는 dev tool > network > waterfall 그래프에서 확인할 수 있다. 실제 웹에서 다수의 http 요청을 보내는 것은 어플리케이션의 속도를 느리게 만든다. 따라서 request의 빈도를 줄이는 것이 좋고, we..

티스토리툴바