MongoDB mongoose를 사용하다 보면 $로 시작하는 쿼리문을 마주할 일이 있다. 그리고 이를 사용하면 보다 간편한 코드를 구현할 수 있다. 검색 결과를 나타낼 때, 입력받은 문자열을 포함하는 문자가 있는지 등에 대한 조건을 쉽게 사용이 가능하다. 그냥 몇 가지만 알아보자. 링크 MongoDB // 1. find /...

Next Next Next.js TypeScript redux, recoil 등을 이용하여 전역적으로 상태를 관리할 때도 있지만, 전연적으로 관리하는 상태값을 제외하곤 drilling이 일어나지 않는 선에서 props를 간편하게 사용한다. typescript를 사용할 때는 전달되는 props의 데이터 타입도 올바르게 지정을 해줘야 하는...

Next Next.js 이전 글의 후속 Next.js는 SSR 방식, Redux는 CSR 방식이기 때문에 Redux를 효과적으로 사용하기 위해서는 렌더링 방식의 통합이 필요했다. 이에 next-redux-wrapper, redux-persist의 옵션 추가 등의 방법이 있다고는 알게 되었지만 여러 시도 끝에 잠시 보류를 결정하고 프로젝...

Next Next.js Next.js는 React 라이브러리 프레임워크이다. React가 Client Side Rendering (CSR)을 하기에, 페이지를 그릴 떄 빈 html을 가져와 script를 로딩하기 떄문에 시간이 오래 걸리고 Serch Engine Optimiztion(SEO)에도 취약하다는 단점이 있다. 반면, Next...

Next styled-components 프로젝트를 만들다 보면 css를 컴포넌트화하여 간편하게 쓸 수 있는 styled-components를 많이 사용하게 된다. 그저 const Example = styled.div만 할 줄 알았기에 사용법을 좀 더 익히고자 작성하였다. const Example = styled.div` displ...

Next useQuery 사용한 api요청 나를 너무나도 괴롭혔던 것들 메모하기 const router = useRouter(); const {id} = router.query; function fetchPost(id){ const response = await api.get(`/post/${id}`); return respon...

Next createContext 쿠키를 리코일에 담아 전역적으로 사용하는 방법도 봤지만 createContext를 활용한 방법에 대한 작성이다. 마찬가지로 전역적인 상태나 데이터를 관리하기 위해 사용되는 함수로, 데이터를 공유하거나 프로퍼티를 전달하지 않고 컴포넌트 간에 값을 주고받을 수 있다고 한다. 컴포넌트 트리의 어떤 깊이에서든...

Backend 비밀번호 DB에 저장되는 비밀번호는 평문으로 작성되면 안 된다. 암호화하여 저장해야 되는 것인데, 서버를 공격 시 평문으로 작성된 데이터를 쉽게 추출할 수 있기 때문에 비밀번호를 해싱하여 저장해야 한다. bcrypt라는 라이브러리를 통해 비밀번호를 해싱(암호화) 할 수 있다. 암호화된 비밀번호로 저장되지만, 서버 사이...

Backend JWT JSON WEB TOKEN의 줄임말로, 토큰을 생성하고 검증하는 데 사용되는 라이브러리다. jwt.sign()을 호출하고, sign은 문자열을 반환하며 이 문자열이 token이 된다. 호출된 sign에는 인자와 입력값을 전달하는데, 토큰에 인코딩하려는 데이터를 말하며 문자열, 객체, 버퍼 중 하나가 된다. ...

Next [https://choigirang.github.io/react/01-React-Token/] 로그인 블로그 글이 있지만 기억을 못 하고 이해를 못 하니 다시 적는 로그인 구현하기 로그인이 이루어지는 방식 세션 id 서버에서 특정 유저의 정보를 담은 세션을 생성한다. 유저가 로그인할 때 세션을 생성하고 세션의...