JiSoo's Devlog

백엔드 API 웹 서버 시작npm start  백엔드 데이터 가져오기1. NextJS의 별도 API를 통해 클라이언트 측에서 처리useEffect(() => { async function fetchNews() { const response = await fetch("http://localhos:8080/news"); if (!response.ok) { setError("Failed to fetch news."); setIsLoading(false); } const news = await response.json(); setIsLoading(false); setNews(news); } fetchNews(); }..

병렬 라우트 설정별도의 경로를 가지는 라우트 두 개의 콘텐츠를 동일 페이지에서 렌더링병렬 라우팅 설정하려면 병렬 라우트를 포함하려는 경로에 레이아웃 파일 추가병렬 라우트마다 @로 시작하는 하위 폴더 하나 추가 -> 병렬 라우트가 두 개라면 폴더 두 개 추가app ㄴ archive ㄴ @archive ㄴ page.js ㄴ @latest ㄴ page.js 일반적으로 레이아웃 컴포넌트 함수는 {children} 프로퍼티를 받는다NextJS는 병렬 라우트 폴더와 인접해 있다면 해당 레이아웃 컴포넌트에 프로퍼티를 자동으로 추가한다@archive 라우트 콘텐츠 => archive 프로퍼티@latest 라우트 콘텐츠 => latest 프로퍼티export default fun..

프로젝트 생성npx create-next-app@latest    app 폴더 -> 다양한 페이지 설정                    새로운 폴더를 추가해 라우트로 취급하는 새로운 경로 생성 가능                     /about이라는 라우트 지원하고 싶으면 about 폴더 생성                     이 폴더만으로는 아무것도 할 수 없음! -> page.js 파일 추가 page.js 파일 -> NextJS에게 페이지를 렌더링해야 한다고 알려주는 것서버 컴포넌트 -> 컴포넌트가 서버에 렌더링 되고 컴포넌트 함수가 서버에 실행되는 것 보장                            서버 컴포넌트는 HTML로 렌더링 되고 전환되어 브라우저로 보내진다  페이지 간 이동Nex..

Redux Toolkit간단하게 말하면 많은 지름길들이 있는 Package라고 보면 된다적은 양의 Redux 코드로 같은 기능을 하도록 도와주는 것 ! npm install @reduxjs/toolkitoryarn add @reduxjs/toolkit  createActionconst ADD = "ADD";const DELETE = "DELETE";const addToDo = text => { return { type: ADD, text };};const deleteToDo = id => { return { type: DELETE, id: parseInt(id) };};↓ ↓ ↓ ↓const addToDo = createAction("ADD");const deleteToDo ..

react-router-dom 버전 6부터라면Route를 Routes로 감싸줘야 한다Router > Routes > Route component 속성이 없어졌다대신 element 속성 사용 } /> } />   store은 변경사항을 우리에게 알려줬었다어떤 변화가 일어났을  우리 애플리케이션을 다시 render 하고 싶다면  ProviderReact Redux에는 Provider 컴포넌트를 통해 다른 컴포넌트에서 Redux store를 사용할 수 있다const root = ReactDOM.createRoot(document.getElementById("root"));root.render( );index에 연결  connectconnect는 컴포넌트들을 store에 연결시켜 준..

Vanilla JS로 ToDoList 만들기 To Dos Add const form = document.querySelector("form");const input = document.querySelector("input");const ul = document.querySelector("ul");const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChild(li);};const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; createTo..

ReduxRedux는 기본적으로 JavaScript Application들의 상태를 관리하는 방법Redux가 React와 많이 사용하면서 유명해졌지만 React에 의존하는 라이브러리는 아니다!!Angular, Vue.js, Vanilla JS에서도 모두 쓸 수 있다 Redux 설치npm install reduxoryarn add redux  Vanilla JS로 카운터 만들기const add = document.getElementById("add");const minus = document.getElementById("minus");const number = document.querySelector("span");let count = 0;number.innerText = count;const update..

프론트엔드 앱이 특정 백엔드 리소스에 접근하려 할 때 접근 권한이 주어지기 전에 반드시 인증을 받아야 한다어떻게 클라이언트 쪽 리액트 앱이 서버에서 돌아가는 백엔드 앱에서 허가를 받을까?사용자 자격 증명을 가지고 요청을 보내는 것에서 시작!자격 증명이 유효한 것으로 검증되면 서버는 우리에게 보호된 리소스에 접근을 허가한다는 응답을 보내준다서버에서는 단순한 가부가 아니라 검증한 증거를 보내줘야 한다↓ ↓ ↓서버 측 세션 혹은 인증 토큰 사용하기  서버 측 세션서버 측 세션은 대중적인 솔루션으로 특히 프론트와 백엔드가 분리되지 않은 풀스택 앱에서 자주 사용된다리액트는 분리되어 있기 때문에 이상적이지 않다서버측 세션의 원리는 사용자가 로그인하고 인증된 다음 서버에 고유 식별자를 저장하는 것기본적으로 'yes'..

웹사이트를 방문하면 도메인 이름 뒤에 경로를 첨부할 수 있다 ex) /welcome브라우저 주소창에 다른 URL을 입력하거나 URL을 변경하는 링크를 클릭하면 다른 페이지가 로딩된다이게 바로 라우팅이 하는 일! 다른 경로에 대해 다른 콘텐츠를 로딩하게 되면 항상 새 콘텐츠를 가져와야 하기 때문에 새로운 HTTP 요청을 전송하고 새로운 응답을 받는 과정에서 사용자의 흐름이 중단될 수 있다는 단점이 있다그래서 더 복잡한 사용자 인터페이스를 구축할 때 싱글 페이지 애플리케이션을 원한다 라우팅은 URL을 감시하고 다양한 콘텐츠를 로딩하는 기능을 한다npm install react-router-dom 첫 번째 단계에서 URL과 경로, 다양한 경로에 대해 어떤 컴포넌트가 로딩되어야 하는지 정의해야 한다 두 번째 단..

Prop driling여러 층의 컴포넌트를 거쳐 공유하고자 하는 데이터를 넘겨주는 것다수의 컴포넌트를 거쳐 속성을 전달하는데 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하지는 않는다 prop driling의 해결책 ↓1. Component composition 컴포넌트 합성import { DUMMY_PRODUCTS } from '../dummy-products.js';import Product from './Product.jsx';export default function Shop({ onAddItemToCart }) { return ( Elegant Clothing For Everyone {DUMMY_PRODUCTS.map((product) => ( ..