JiSoo's Devlog

CSS ModulesNext.js에서는 어떤 설정을 따로 하지 않아도 바로 CSS 모듈을 사용할 수 있다styled components, tailwind, chakra 등.module.css 확장자를 사용해 CSS 모듈을 기본적으로 지원한다CSS 모듈은 고유한 클래스 이름을 자동 생성해 CSS범위를 로컬로 지정하기 때문에 다른 파일에서 동일한 클래스 이름 사용 가능 global CSS 파일 → 애플리케이션 전체에 적용 import styles from "../styles/navigation.module.css";export default function Navigation() { const path = usePathname(); console.log(path); return (  .nav { ..

client에서 모든 것을 fetch 하려면 보안을 위해 항상 API를 중간에 만들어 요청하고 API가 안전한 환경에 있다면 그 뒤에 데이터베이스에 요청을 보낸다useState를 사용하면 metadata도 사용하지 못한다  Server Side어떤 일이 발생하기를 기다리려고 await를 사용할 때 async를 무조건 써야 한다!useEffect, useState를 쓰지 않아도 되고 로딩 상태를 구현하지 않아도 된다export const metadata = { title: "Home",};const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";async function getMovies() { const response = await fet..

Next.js는 app 폴더 안의 page라는 파일을 참조한다컴포넌트 이름은 중요하지 않지만 그 컴포넌트가 default 컴포넌트로 export 되어야 한다는 게 중요!React를 따로 import 하지 않아도 된다  Defining Routesreact-router는 기본적인 리액트 애플리케이션에서 라우팅 하는 방법url을 지정하고 컴포넌트 render를 요청 Next.js는 폴더를 사용해 경로를 정의하는 파일 시스템 기반 라우터를 사용한다중첩된 경로를 만들려면 폴더를 중첩하면 된다 1. 파일 시스템을 통해 경로를 표시2. page파일을 해당 디렉토리 안에 생성 실제로 보여지는 페이지를 만들려면 page.tsx나 page.jsx 파일을 폴더 내부에 생성해야 한다직접적인 page파일이 없는 폴더는 실제 ..

☆ React는 라이브러리 Next.js는 프레임워크 라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용의 주체는 우리우리가 모든 결정을 내리고 필요할 때 사용할 수 있다React는 UI 인터페이스를 빌드하는 데 사용하는 라이브러리  프레임워크에서는 우리의 주도권이 없다프레임워크는 여러 결정을 우리 대신 해주고 자동화하도록 할 수 있다Next.js에서 뭔가를 export하면 Next.js가 그걸 받아와서 모양, 이름이 맞다면 페이지의 title을 바꿔준다  설치 방법수동설치방법npm init -ypackage.json 파일 생성 npm install react@latest next@latest react-dom@latest  app 폴더 안에 page 파일 생성page.tsx 혹은 page.jsx..

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과 경로, 다양한 경로에 대해 어떤 컴포넌트가 로딩되어야 하는지 정의해야 한다 두 번째 단..