Next.js 로 프로젝트를 셋업하고, 이제 작업을 시작하려고 yarn dev 를 기계처럼 입력하는데, 문득 yarn build 와 yarn start 와 yarn dev 의 차이가 궁금해졌다.개발 중에 사용변경사항은 저장을 하면 자동으로 반영됨빠르게 테스트하고 수정할

Next.js 성능 (Performance) 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 제공하여 초기 로드 시간을 단축한다. 코드 스플리팅 및 이미지 최적화와 같은 기능으로 런타임 성능을 향상시킨다. 📌 잠깐! Next.js 가 제공하는 렌더링 방식에는 어떤 것들이 있을까? 1. SSR (Server Side Renderin...

Users Table 에서 column 이름을 변경하려다가 그만,, | policyname | tablename | cmd | roles | qual | with_check | | :--: | :--: | :--: | :--: | :--: | :--: | | Enab

[React] [Vite] [Vercel] vite 환경에서 배포 시 로컬 이미지 / 비디오 소스 출력하는 방법 src > assets > videos 폴더에 이미지 삽입. 로컬 환경에서는 출력되던 비디오가 나오지 않음. vite에서 영상 같은 정적 파일은 publi

웹 개발에서 '서버'의 개념과 활용 개인 프로젝트를 진행해야 하는데, 갑자기 JSON 서버가 등장하면서 혼란에 빠졌다. 알고 나면 그렇게 어렵지 않은 개념인데도, 늘 개념을 받아들이는 태도가 너무 시리어스하다,,;; 서버(Server)란? ✔ 사용자의 브라우저로부

JSON Server 실행 실행이 잘 되고 있는지 확인 각 서버가 정상적으로 실행되었는지 확인하려면: Vite 확인: 브라우저에서 http://localhost:5173 (기본 Vite 포트)로 접속 JSON Server 확인: 브라우저에서 http://local

✅ TanStack Query란? TanStack Query 는 데이터 패칭 (API 요청)과 캐싱을 간편하게 관리할 수 있는 라이브러리이다. Redux 의 경우 비동기 처리를 하려면 redux-thunk 또는 redux-saga 같은 추가 라이브러리가 필요하지만,

Redux 는 리액트 어플리케이션에서 전역 상태 관리를 위해 사용되는 라이브러리이다. 기본적인 개념은 어플리케이션의 모든 상태를 하나의 중앙 저장소에서 관리 하는 것이고, 상태를 변경할 때에는 Reducer 를 통해 Action 을 처리하는 방식으로 동작한다.setSt

동기 : 순차적 처리일의 순서가 중요할 경우, 동기 처리!데이터를 받아온 후에, 해당 내용을 브라우저에 띄우는 경우 => 데이터 받아오는 과정이 먼저!단점 : 응답을 기다리는 동안 대기해야 한다.비동기 : 동시다발적 처리요청과 응답이 비순차적일의 순서가 중요하지 않은

🔥 PokemonDetail이 화면에 뜨지 않는 이유 분석 및 해결 방법 📌 1. 문제의 원인 PokemonDetail이 렌더링되지 않는 이유는 Dex.jsx에서 PokemonDetail을 항상 렌더링하고 있기 때문이야. 하지만 PokemonDetail은 특정

도메인 단위로 정보를 저장해주는 랜선 저장소오직 문자열의 형태로만 저장할 수 있습니다.브라우저를 닫아도 데이터가 유지된다. (같은 도메인에 한해)key - value 페어로 데이터를 저장한다.삭제 로직이나 호출 로직은 key 값만 가지고 핸들링할 수 있다!객체나 배열을

useState 상태를 관리하는 훅 클래스형 컴포넌트에서 this.state 와 setState 를 대체하는 역할

박스 삼형제의 border 스타일을 지정해보자. 먼저 styled-components 익스텐션을 설치해 줘야 한다. 그리고 나서 yarn add styled-components 명령어를 입력해주면 준비 갈 완료!기본적인 구조는 이렇다. 백틱으로 감싸주면 끝!나머지 코드

만능템Index 는 조작을 가할 첫 번째 요소deleteCount 제거하고자 하는 요소의 개수elem1, ..., elemN 배열에 추가할 요소삭제한 요소들로만 배열을 만들 수도 있다.deleteCount 를 0 으로 설정하면 요소를 제거하지 않고 새로운 요소를 추가할

처음 리액트 프로젝트를 생성하면 나오는 바로 이 파일. main.jsx 이다.이외에도 수많은 파일이 초기값으로 세팅되는데, 뭔지 몰라서 정리를 못 한 상태로 시작.일단 import App from "./App.jsx"; 부분이 App.jsx 와 App.css 를 불러오

평소에는 flex를 애용하는 사람으로서, 그리드를 사용하는 연습을 해보려고 이번에는 그리드를 써 보았다.그런데 괜히 했다아니 fraction 주면 된다고 했자나요,,, 검색 기능 구현 부분 코드를 지저분하게 짜서 style 속성을 적용하기가 기본적으로 쉽지 않았지만,

1. 페이지를 reload해도 스크롤의 위치가 그대로! (1) localStorage를 이용한 방법 localStorage.setItem("scrollPosition", window.scrollY); : 현재 스크롤 위치를 저장 localStorage.getIte

대괄호 [ ] |&nbsp 사용사례 |&nbsp 설명 |&nbsp 예제 | | :--- | :--- | :--- | |&nbsp 배열 |&nbsp 여러 개의 값을 담을 경우 &nbsp|&nbsp&nbspconst arr = [1, 2, 3, 4]; &nbsp| |&nbsp 배열 인덱싱(Indexing) &nbsp|&nbsp 배열 요소를 접근할 때 사용 &...

영화 사이트를 만들어 볼 것이다. 이거 짜는 데 하루 하고 6시간 걸림. 내가 개발자를 해도 되는걸까? ㅎㅎ 다른 방법도 하나 알아냈다. 아예 API부터 싹 getMovies 변수 안에 넣어 async await 까지 처리해버리기. 그리고 HTML 파일 안의 요소들도 그냥 백틱으로 묶어서 생성과 동시에 데이터를 불러와버리기. 스타일은 똑같이 클래스...

calculate(매개변수, 매개변수, 매개변수) 함수: 세 개의 매개변수와 if if else 문으로 사칙연산 코드 완성 : )switch 문은 하나 이상의 case 문으로 구성. 대개 default 문도 있지만, 필수는 아니다!가독성이 좋고 쓰기도 간단하다 : )