Frontend/React

[React, next-auth] DefaultSession - session에 넣을 정보 변경하기

next-auth를 사용해서 useSsession으로 session에 올라간 정보를 받아오는 과정에서 token에는 다른 정보들이 다 저장되어있는데 defaultsession이라는 만들지도 않은 게 지정되어있었다 아무리 파일내에서 찾아도 안 나왔다... 그래서 이름처럼 기본적으로 설정된거라고 짐작해서 공식문서를 찾아보았고 역시 공식문서가 최고다 https://next-auth.js.org/getting-started/typescript#module-augmentation TypeScript | NextAuth.js NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use T..

[React] fetch 와 axios 어떤 차이가 있을까? + axios 설치하지 않을 경우 에러

리액트 프로젝트를 진행하면서 fetch와 axios 둘 중 어떤 걸 사용할지 논의를 했었는데 둘 다 큰 차이가 없고 비동기 통신할 때 사용하는 걸로만 알고 있었지만 내가 이걸 왜 사용하는지 알고 쓰고 싶어서 정리해 보았다. fetch와 axios 둘 다 js의 비동기 통신을 할 때 사용하는 방법이다. fetch는 전역 fetch()를 통해 비동기적으로 가져올 수 있고 자바스크립트에서 기본적으로 제공해주는 것이기때문에 별도의 설치가 필요없지만 사용하기 위해서는 .json()을 사용해 JSON데이터 형식으로 변환해서 사용해야한다. axios는 node.js에서 사용할 수 있는 promise 기반 라이브러리로 npm, yarn 같은 패키지 매니저를 통해 설치할 수 있다. 자동으로 JSON데이터 형식이 된다. ..

[React] 단축키

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

[React] Hook에 대해 알아보자. 그런데 useState 등을 곁들인

다들 Hook부터는 어려워진다. 인강을 들어도 이해하는게 힘들다고하는데 역시나 쉽지 않다. 그래서 나름 시리즈(?)에 걸쳐 Hook과 useState, useRef, useMemo에 대해 포스팅 하려고한다. Hook이란 뭘까? "기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다" 특징 - 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 이러한 훅은 함수의 최상위 레벨에서만 정의한다. 조건으로 훅을 할당하지 않는다. 렌더링 될 때 항상 같은 순서로 렌더링이 되야 한다 공식문서의 글을 읽어보면 간결하게 사용할 수 있게 한다고 이해할 수 있다. 📌 useState 변수의 변화를 감지하여 재렌더링하게 해주는 훅으로 ..

[React] 조각조각 땃따따 컴포넌트 만들어보기

앞서 리액트의 장점이 컴포넌트화라는 포스팅을 했다. 재사용 하기위해 컴포넌트가 중요하다고하는데 그래서 그 컴포넌트화가 대체 무엇인지 어떻게 하는지 정리해보려고 한다. 리액트에서 컴포넌트로 만들 때 이 3가지 방법을 사용한다. 본인이 마음에 드는걸 써도 되고 회사 컨벤션을 따라가면된다. const Section =()=>{} const Section = function(){} function Section(){} 컴포넌트를 어디까지 해야할까?? import './App.css' function Menu () { return ( menu ) } function Header(){ return ( header ) } function Main(){ return ( section ) } function Footer..

리액트 스터디 시작하기

혼자서 하는것보다 스터디로 하면 좋겠다고 생각하던 때 운 좋게 스터디에 들어가게 되었다. (전부 초면인 분들) 팀장님이 만들어준 스케쥴을 따라가는식인데 그 따라가는 과정부터 전에 못해본 것들을 해보고있다. 스터디하면서 공부 외에 알게 된 것 1. 개인 Repository 올리고 fork하기 2. 공부내용은 ReadMe에 정리하기 3. Github에서 Projects와 Discussions 사용 Projects : 일정 공유하기에 좋다. Discussions : 공부관련으로 질문을 주고받기 유용하다. 앞으로 공부계획 책과 노마드코더의 React 강의로 학원 진도 전에 리액트 해보기!