공부기록용

JSON(JavaScript Object Notation) 자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다. 📌비슷한 것 뿐, 작은 따옴포(’’)가 아닌 끝 따옴표(””)만이 허용된다 { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity..

🔴REST API(REpresentational State Transfer) 🔴Path Variable vs Query Parameter REST API(REpresentational State Transfer) 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP Method(GET, POST, PUT, DELETE)를 사용하여 요청을 보내는 것. 이 때, 요청을 위한 자원은 특정한 형태로 표현된다. 자원(Resource) : URI 행위(Verb) : HTTP Method 표현(Representations) 💫규칙 http://example.com/posts (O) http://example.com/posts/ (X) http://example.com/post (X) http://example.com..

🔴비동기 프로그래밍 🔴Promise 객체 비동기 프로그래밍 동기(synchronous)적 방식이란 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식(앞선 코드가 끝나야만 그 다음 코드가 수행) 비동기(asynchronous)적 방식이란 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 1. setTimeout, addEventListner 등 2. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 3. 대표적으로 서버 통신과 관련된 로직들 포함 콜백지옥 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생 뭐가문제? 가독성, 수정도 어려움 이를 해결하..

🔴Dynamic Route 🔴useParams Dynamic Route Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법 📌예를 들어, works 페이지에 여러개의 work가 보이고 우리가 work마다 독립적인 페이지를 가지도록 구현하려면 어떻게 할까 우선 /works 만들기 // works.jsx import React from 'react' const data = [ { id: 1, todo: "노드 배우기" }, { id: 2, todo: "리엑트 배우기" }, { id: 3, todo: "넥스트js 배우기" }, ] function Works() { return ( 할일목록 {data.map(function(item){..

🔴react-router-dom 🔴react-router-dom Hooks 🔻useNavigate 🔻useLocation 🔻Link 🔴children 용도 1. 페이지 컴포넌트 생성 2. `Router.js` 생성 및 router를 구성하는 설정 코드 작성 3. `App.jsx`에 import 및 적용(2번을) 4. 페이지 이동 테스트 각 페이지 컴포넌트 별 주소 Home.jsx -> localhost:3000/home About.jsx -> localhost:3000/about Contact.jsx -> localhost:3000/contact Works.jsx -> localhost:3000/works shared/Router.js : router의 설정 파일 pages : 페이지 컴포넌트 react..

💡action객체💡 액션 객체는 상태 변경을 나타내는 일종의 "이벤트"이다. Redux에서는 상태 변경을 위해 액션 객체를 생성하고, 이를 Redux 스토어로 보내서 상태를 업데이트한다. { type: "ACTION_TYPE", payload: { /* 데이터 */ } } type: 액션의 종류를 식별하는 문자열. 주로 대문자와 스네이크 케이스(ACTION_TYPE)로 작성된다. 이를 통해 리듀서(Reducer)에서 어떤 상태 변경이 발생해야 하는지 식별할 수 있다. payload (선택적): 액션과 관련된 데이터를 포함하는 객체. 필요에 따라 액션과 함께 전달되어야 하는 추가 데이터가 있다면 payload 속성을 사용하여 해당 데이터를 포함시킬 수 있다. 액션 객체는 주로 "액션 생성자(Action C..