type="nal"

App.tsx 파일에서BrowserRouter, Routes, Route 세가지 모듈을 import해주고App() 함수의 return에 있던 div를 지우고 라우터를 리턴해준다.그리고 가장 기본이 되는 페이지는 index라고 표시해주고 경로를 입력해준다.여기서 경로는 해당 URL. 그냥 "/"는 최초로 해당 URL 자체만 있는 것베이스 URL이 이렇게 있으니까 슬래시 하나면 그냥 이 URL로 접속했을때를 의미함 React Router에서 사용하는 주요 컴포넌트들의 차이는 아래와 같다컴포넌트역할특징라우터 전체를 감싸며, 브라우저의 History API를 사용해 URL 관리애플리케이션 전체를 감싸며, 반드시 필요.들을 감싸며, 현재 URL과 일치하는 하나의 만 렌더링의 대체이며, v6부터 도입됨특정 경로(p..

우선 node.js는 지난번에 설치해놓음. https://nodejs.org/ennpm 명령어로 vite를 사용할 것임. https://ko.vite.dev/guide/ 홈페이지에서 시작하기 문서를 읽어보자. node.js와 vite의 간략한 설명은 아래와 같다.Node.jsJavaScript를 브라우저 환경이 아닌 서버 환경에서도 실행할 수 있도록 해주는 런타임 환경. 일반적으로 서버 개발, 명령줄 도구 제작, 파일 시스템 작업 등에 사용됨Vite웹 개발을 위한 차세대 프론트엔드 빌드 도구, 빠른 개발 환경 설정과 빌드를 제공함. 특히 개발 서버의 속도가 빠르고, 최신 브라우저를 지원함. Node.js와 Vite의 관계Vite는 Node.js 환경에서 실행되며, Vite의 설치와 실행을 위해 Node...

제목을 클리하면 상세페이지가 보이도록 -> 모달 창으로 띄울 거임(제대로 된 페이지 전환은 리액트 라우터 배우기..) 글 목록 아래에 이렇게 모달 창을 만들어주는데,HTML을 작성하다보면 div가 너무 많아져서 점점 가독성이 나빠진다.그래서 리액트에서는 이렇게 원하는 블럭을 컴포넌트로 만들 수 있다. 바로 이렇게 컴포넌트 문법 컴포넌트를 만드는 방법은1. function을 만든다.function은 다른 함수 바깥에 만들어야 함. (function App 바깥)그리고 이름 첫글자는 영어 대문자로  2. 함수의 return () 소괄호 안에 축약할 html을 넣어줌이때도 마찬가지로 하나의 태그로 시작하고 끝나야 하며, 병렬로 태그를 작성할 순 없다. 3. 한단어로 축약한 컴포넌트를 사용할 때는 으로   ..

지난 글의 배열 복사의 추가 셜명.,, JS의 array, object 데이터의 특징 let arr = [1, 2, 3]; 이런 배열이 있으면1, 2, 3 데이터가 저장되어있고(RAM에), arr에는 이 데이터가 저장된 주소 정보가 저장되어 있음(어디있는지 가리키는 화살표) 1. 원본 배열 수정 lkes[i]++; setLikes(likes);그래서 그냥 이렇게 배열을 변경하려 한다면likes[i] 안에 있는 내용은 바뀌더라도 likes라는 변수에는 여전히 같은 주소(화살표)가 저장되어 있음따라서 기존 state와 수정된 state는 여전히 같기 때문에 state가 변경되지 않는다. 그렇기 때문에 기존 배열의 복사본을 만들어서 수정해주어야 하는데 2. 참조변수를 복사해 수정const newLi..

안 쓰는 변수들이 있을 경우 이렇게 경고 메세지가 뜨는데, 이걸 무시할 수도 있지만제일 상단에 /*eslint-disable*/ 해당 코드를 적어주면 경고가 다 무시된다. 글 제목 옆에 좋아요 버튼을 만들어줄건데button 태그로 만들면 너무 안예쁨.span태그로 만들어준다.이때 숫자가 변하는 좋아요 갯수는 state로 만들어준다. state를 변경하는 함수명은 setLikes로 지었는데, 보통 set접두어를 붙이는 것이 관례이다.그리고 span 태그에 onClick 이벤트핸들러를 적어준다.onClick 안에는 실행할 함수를 외부에 적거나 화살표 함수로 적어줌 위처럼 기존 state에 + 1을 해주면 숫자가 잘 증가하지만, 게시글들이 모두 같은 변수를 공유하게 된다.현재 글 3개만 임시로 관리하고 있기 ..

우선 블로그 메인 화면에 아래처럼 글 목록을 띄워주기 위한 html, css 코드를 작성해준다.let post = '대전 찐 맛집';return ( nalmi's blog 글 제목 1월 3일 발행 );div { box-sizing: border-box;}.list { text-align: left; padding-left: 20px; border-bottom: 1px solid gray;} return() 안에는 병렬로 태그 2개 이상 기입 금지React의 return() 문에서는 최상위 태그가 반드시 하나만 있어야 한다는 규칙.❌ 잘못된 예시 (병렬로 2개의 태그)return ( 첫 번째 div ..