왕가's history

에러 발생 코드 type ? (ref.current.style.marginTop = '0vh') : (ref.current.style.marginTop = '4vh'); type 따라서 marginTop을 컨트롤하게 했는데, ESLint: Expected an assignment or function call and instead saw an expression 해당 에러가 발생하였습니다. 해결 코드 if (type) ref.current.style.marginTop = '0vh'; else ref.current.style.marginTop = '4vh'; 삼항연산자가 아닌 if문으로 해결하였습니다. 원래 위에 if문으로 조건이 추가로 있었는데, 아마 그거 때문에 발생한 에러이지 않을까 싶습니다.

명령어를 통해 프로젝트 생성하게 되면 사진과 같은 구조를 가지게 될 것입니다. 추가 옵션으로 사진과 같이 설정해 주었습니다. Next 13 버전부터 생긴 app router를 사용해보려고 합니다. (이전 버전 까지는 보통 pages를 활용하여 라우팅을 했습니다.) npx create-next-app@latest 이렇게 생성된 폴더 구조에서 생성된 파일을 보겠습니다. Layout.tsx 타입스크립트로 설치했기 때문에 tsx파일입니다. 해당 파일은 기본적이 프로젝트, 웹페이지의 골격이라고 보시면 됩니다. _app이랑 비슷한가? 싶습니다. import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/goo..

공홈을 보면서 하나씩 정리해 나가보려 합니다. 그 시작인 Next.js 설치부터 시작해 보겠습니다. https://nextjs.org/ 일단 제일 먼저 Node.js가 설치 되어있어야 합니다. React개발자면 당연히 설치 돼있을 것으로 생각 듭니다.(16.8 버전 이상이라고 안내되어 있네요) 자동설치 npx create-next-app@latest 위 명령어를 입력하면 제일 최신 버전의 Next.js가 설치됩니다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes W..

next.js는 React 개발자라면 반드시 알아야 하는 프레임 워크입니다. 순수 React는 오히려 안 쓰고, React에 Next.js를 얹어서 주로 개발환경을 구성한다고 보시면 됩니다. 그러면 Next.js란 무엇인지부터 해서 같이 공부를 하려고 합니다. 이미 프로젝트 진행할 때 계속해서 사용하고는 있지만, 딱히 공부를 해서 알고서 사용하기보다는 그때그때 맞춰서 찾아보고 했던 터라 이번기회에 정리할 겸 공부할 겸 겸사겸사 하고 싶었습니다. Next.js란? React로 만든 서버 사이드 렌더링(SSR) 프레임 워크입니다. 정확히는 SSG에 구분될 것입니다. CSR인 React환경에서 SSR기능을 구사할 수 있게 해 줍니다. SSR의 특색을 구현할 수 있기 때문에, 만약 리소스가 큰 페이지가 있거나,..

CSR (Client Side Rendering) 말 그래도 클라이언트에서 렌더링이 일어나는 것을 의미합니다. 클라이언트가 서버에 요청을 하고, 서버가 응답을 HTML과 JS를 보내게 되면 클라이언트는 이제 렌더링을 하게 됩니다. dev-tool에서 네트워크를 보면 사진과 같이 HTML이나 JS 이미지 등을 받아오는 것을 볼 수 있습니다. SSR (Sever Side Rendering) CSR과 마찬가지로 이름에서 유추할 수 있듯이 서버에서 렌더링 해주는 방식을 말합니다. 클라이언트가 서버에 요청을 하고, CSR과 다르게 서버 쪽에서 이미 HTML, JS 등을 만들게 됩니다. 완료하게 되면 클라이언트에 전달하게 되고, 클라이언트는 화면을 그릴 필요 없이 바로 뿌려주게 됩니다. 렌더링을 서버에서 한다기보다..

인증토큰의 대표인 JWT에 대해 공부하려고 합니다. (다른 토큰이 있는지 모르겠지만...) JWT(JSON Web Token)는 인증에 필요한 정보를 암호화시킨 JSON형태의 서명된 토큰입니다. 저번 글에서 배웠던 토큰인증을 할 때 사용되는 방식?입니다. https://jwt.io/ 특징 JWT토큰은 발급하면 별도로 삭제가 불가능하며 유효시간을 통해 관리하게 됩니다. JWT토큰을 사용하면 DB조회를 하지 않고, 인증을 확인할 수 있습니다. 데이터의 변조를 막을 수 있습니다. 서버 측에서 별도의 저장소가 필요 없습니다. (클라이언트에서 주로 쿠키나 웹스토리지에 저장해서 관리) 유효기간으로 Auth를 관리하기 때문에 기간을 짧게 하면 자주 로그인 해야 되고, 길게 하면 보안에 취약하게 됩니다. 토큰의 길이가..

ESLint에 의해 발생한 에러입니다. 문제 useEffect(() => { if (!response) { return setLoading(false); } api(); ... } useEffect 훅에서 return setState를 줬더니 함수 자체에서 에러가 발생합니다. 공식 문서 찾아보니, 해당 문제의 발생원인은 아래와 같습니다 return 문은 종료하기 전에 실행되지 않습니다. (it does not execute a return statement before it exits) 값을 명시적으로 지정하지 않은 return문을 실행합니다. (it executes return which does not specify a value explicitly) 정의되지 않은 return을 실행합니다. (it ..

타입스크립트 사용하면서 발생한 에러입니다. 문제 {(response === 'A' && response !== 'B' ? !show : loading) && ( Thinking )} &&연사자를 사용해서 두 개의 조건을 걸었는데 제목과 같은 타입에러가 발생했습니다. 해결방안 {(response !== 'B' && response === 'A' ? !show : loading) && ( Thinking )} 단순히 순서의 차이로 보입니다. 저는 웹스톰을 사용하고 있는데, 거기서 나오는 해결방안으로 위와 같이 순서를 바꾸니깐 에러가 사라졌습니다. (vscode도 똑같을 꺼라고 생각합니다.) TypeScript에러라 사실 동작하는 데는 상관없지만, build 할 때 에러도 날 테고, TS사용하는데 규칙을 지키..

Cookie, Session에 이어 토큰과 관련된 Token에 대해서 알아보고자 합니다. 토큰(Token)은 클라이언트가 서버에 접속하면 서버에서 해당 클라이언트에게 인증되었다는 유일한 값으로 보시면 됩니다. 이 값을 이제 토큰이라고 칭합니다. 인증하는 토큰이기 때문에 클라이언트에서 서버로 요청을 보낼 때, 헤더에 토큰을 심어서 보내게 되는 것입니다. 이제 토큰 값을 기반으로 서버가 해당하는 권한에 맞춰 동작하게 되는 것입니다. 헤더에 토큰을 함께 보내 인증받은 사용자인지 확인하게 됩니다. (Cookie와 Session에서 설명했던 것들과 동일합니다.) 토큰에는 요청한 사람의 정보가 담겨 있기 때문에 DB를 조회하지 않아도 되는 큰 장점이 있습니다. 동작 사용자가 로그인을 합니다. 서버에서는 클라이언트에..

Cookie에 이어 Session에 대해 알아보고자 합니다. 세션(Session)은 간단하게 브라우저라고 보면 될 것 같습니다. 정의를 좀 찾아보니, 일정 시간 동안 같은 사용자로부터 들어오는 요구를 하나의 상태로 보고 상태를 유지하는 기술이라고 합니다. 즉, 브라우저를 켰다가 끄는 동안 유효합니다. 브라우저에서 특정 도메인에 접속을 하게 되면 서버에서 사용자가 접속한 것을 알 수 있을 겁니다. 그러면 사용자에게 session-id라는 것을 부여하게 됩니다. 이 session-id를 기준으로 사용자를 구분하여 각각 사용자를 관리하게 되는 구조입니다. 동작순서 클라이언트(브라우저)에서 서버에 요청을 보내게 됩니다. 서버에서는 응답에 session-id로 사용할 값을 만듭니다. 만든 값을 cookie에 담아..