react컴포넌트에 스타일을 적용하는 방법으로 styles jsx를 사용하는 방법도 있다. styles jsx는 nextJS에만 있는 고유의 방법이다. styles jsx를 사용하면 이점 별도의 파일이 필요없다는 점 styles jsx를 적용했을때도 module.css를 적용했을때와 동일하게 클래스명이 난수로 표현된다. 중복우려 없음! 컴포넌트안에 html style태그를 넣어주고 jsx props를 입력해준다. 그리고 그 안에 스타일을 작성한다. 이슈! a태그에 스타일을 적용하는데 적용이 안될때 해결법 1. 글로벌로 선언한다 2. legacyBehavior 사용하여 이전버전 link를 커버한다. Home 3. link > span태그를 넣어서 클래스를 span태그에 적용한다. Home 컴포넌트 안에서 ..

컴포넌트 스타일을 적용시키는 방법 중 제일 기본적인 방법 Nav.js 컴포넌트가 있다면 Nav.module.css 파일을 만들어서 import해준다. import Link from "next/link" import styles from './Navbar.module.css'; import { useRouter } from "next/router" export default function NavBar() { const router = useRouter(); return( home about ) } className에 적용하는 방법 다중 클래스 적용하는 방법 1. 백틱 이용하기 home 2. join을 이용하기 className={[styles.link, router.pathname === '/about'..

HTTP 란? 요청, 응답 메시지에서 부가적인 정보들을 전송하기 위해 사용된다. HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다 HTTP 헤더 http 전송에 필요한 모든 부가정보 본문 데이터 관련 정보 인증정보 브라우저 정보 서버 애플리케이션 정보 캐시 관련 정보 HTTP 헤더의 구조 Field-Name + : + OWS + Field-Value + OWS Ows = 띄어쓰기 허용 Field-Name = 대소문자 구문 x HTTP 헤더의 분류 General Header : 메시지 전체에 적용되는 정보 Request Header : 요청 정보 Response Header : 응답 정보 Entity Header : 엔티티 정보(body컨텐츠 정보) General Heade..

클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx(informational): 요청이 수신되어 처리중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동이 필요 4xx(Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx(Server Error): 서버오류, 서버가 정상 요청을 처리하지 못함 2xx 클라이언트의 요청을 성공적으로 처리 200 OK 201 Created post 요청을 해서 서버에서 자원을 새로 생성하는 경우 응답헤더에 Location정보가 들어있을 수 있다. 202 Accepted 요청 접수가 되었으나 처리가 완료되지 않았다. 배치 처리 같은 곳에서 사용한다. 204 N..

노마드코더 NextJS 를 보고 정리한 내용입니다. NEXTJS 설치 npx create-next-app@latest 라이브러리와 프레임워크의 차이 라이브러리 원할때 사용할 수있다. 앱을 만드는데 자유도가 있다. 프레임워크 프레임워크가 정한 규칙을 지켜야한다. 다른설정없이도 규칙만 지키면 동작한다. 커스텀이 제한된다. pages nextjs 프로젝트 내 pages폴더에 파일을 넣으면 파일이름이 url로 들어간다. localhost:3000/aboout CSR, SSR CSR - Client Side Rendering 브라우저가 자바스크립트를 가져와서 UI를 만든다. 네트워크가 느리면 화면이 늦게 노출 될 수있어서 로딩처리를 해야한다. 소스보기를 하면 root dom을 확인할 수 있다. SSR - Serv..

useState 컴포넌트에서 동적인 값을 상태(state)라고 합니다. useState를 사용해서 컴포넌트 내부에서 상태관리를 할 수 있습니다. 배열 비구조화 할당문법을 사용한 형태입니다. 첫번째 원소는 현재상태, 두번째 원소는 setter 입니다. setter를 사용하면 데이터도 변경할 수있고, 컴포넌트도 리렌더링 할 수있습니다. const [number, setNumber] = useState(0) setState()에 callback 함수 setState에 콜백함수를 넣으면 콜백함수의 인자값으로 이전state값을 가져올 수 있다. return을 하면 새로운 state를 지정할 수 있다. setState((prev) => { return !prev }) useState 초기값으로 callback 함수..

리액트 배경 자바스크립트로 UI를 제어하는 경우 간단하게 counter를 만든다고 가정했을 때 제어 원하는 dom select -> 이벤트 핸들러 -> dom 업데이트 라는 과정을 거칩니다. 규모가 커지는경우 많은 DOM을 직접 건드리면서 작업을하면 코드가 난잡해집니다. 리액트는 상태가 변경되었을 때 기존 dom을 날리고 새로운 dom을 보여준다는 개념에서 시작되었습니다. 매번 상태가 변경될 때마다 새롭게 만들게 되면 속도가 엄청나게 느려집니다. 리액트는 상태가 변경되면 Virtual DOM을 사용해서 업데이트가 필요한 곳의 UI를 렌더링 합니다. 그리고 실제 DOM과 비교하여 다른부분에 대해서만 실제 DOM에 패치시켜줍니다. Virtual DOM 개념 메모리 상에 가상으로 존재하는 dom 왜 필요할까 ..

애니메이션 라이브러리 Framer Motion demo api 설치 npm i framer-motion div에 animation을 적용하고 싶을 때 motion에 있는 html태그를 사용해줘야한다. import { motion } from "framer-motion"; export default function App() { return ( ); } styled-components에서 motion을 사용해야하는 경우 // 타입선언은 괄호 뒤에 한다. const Box = styled(motion.div)` .... `; background-color를 변경해야하는 경우 red, blue가 아닌 rgba 컬러를 사용해야한다. 기본 props initial - 애니메이션 적용하기 전 초기스타일 animat..

Routing 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 React Router 링크를 눌러서 다른페이지로 이동하게 될 때 서버에 다른페이지의 Html을 새로 요청하는 것이 아니라 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존페이지에 웹 애플리케이션을 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여준다. 설치 npm i react-router-dom BrowserRouter BrowserRouter컴포넌트로 최상위 컴포넌트를 감싸준다. //src/index.js import App from "./App"; import { BrowserRouter } from "react-router-dom"; import React from "react"; imp..

react state management를 위한 라이브러리 state management 라이브러리가 필요한 이유 - 하위 컴포넌트가 state를 받기위해 여러 하위 컴포넌트를 거쳐가야하는 번거로움을 줄이기 위해 Atom recoil에서 redux store 역활을 하는 값을 저장하고 있는 장소 Atom값을 관찰하면 수정되는경우 리렌더링 된다. 설치 npm install recoil 최상위 컴포넌트(index.tsx)에서 RecoilRoot로 감싸준다. // index.tsx import App from "./App"; import React from "react"; import ReactDOM from "react-dom/client"; import { RecoilRoot } from "recoil";..