전체 글

1. Axios (1) Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있습니다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 됩니다. (2) Axios 설치하기 CRA를 통해서 새로운 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios를 설치합니다. yarn add axios 2. json-server 설정 API 서버는 json-server를 사용하겠습니다. 프로젝트 내에서 3001 포트로 서버를 가동시키겠습니다. (1) 테스트용 db.json 설정 { "todos": [ { "id": "1", "title": "react" } ] } 3. GET (1) Axios ..

1. 리덕스툴킷이란? (1) 리덕스툴킷 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다. (2) 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었습니다. 컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같습니다. 바뀐 부분은 그저 모듈 파일 뿐이죠. 리덕스 툴킷은 리덕스의 구조나 패러다임이 모두 똑같습니다. 2. 일반 리덕스와 ..

1. react-router-dom 사용 방법 1. react-router-dom이란? 페이지를 구현할 수 있게 해주는 패키지 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는 데 사용되는 라이브러리입니다. React 애플리케이션에서 페이지 간의 전환 및 URL에 대한 동적인 라우팅을 처리하는 데 도움이 됩니다. 2. react-router-dom 설치하기 (1) 패키지 설치 vscode 터미널에서 아래 코드를 입력해서 패키지를 설치할 수 있습니다. yarn add react-router-dom 3. react-router-dom 사용하기 (1) 사용방법 순서 아래 순서대로 코드를 작성하여, react-router-dom을 사용해보겠습니다. 페이지 컴포넌트 생성 Router.js 생성 및 r..

1. Redux 란? Redux는 JavaScript 애플리케이션의 상태 관리를 위한 예측 가능한 상태 컨테이너 라이브러리입니다. 특히 React와 함께 사용되어 React 애플리케이션에서 상태를 효과적으로 관리하고 데이터 흐름을 예측 가능하게 만듭니다. Redux가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props로 State를 공유하는 방법에는 불편한 점이 있습니다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하..

React Hooks에는 많은 기능들이 있는데요. 그 중 많이 사용되는 useState, useEffect, useRef, useContext, 최적화 hooks(React.memo, useCallback, useMemo) 등에 대해 알아보겠습니다. 1. useState (1) 정의 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다. useState의 기본적인 형태는 아래 처럼 생겼습니다. const [state, setState] = useState(initialState); 원래는 useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습일 뿐입니다. 2. 함수형 업데이트 (1) 함수형 업데이트란? setState에는 함수형 ..

1. Styled Components 1. CSS-in-Js란? (1) css-in-js란 무엇인가? CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이죠. 이러한 CSS-in-JS 방식으로 styled-components 가 있습니다. (2) styled-components 란 무엇인가? styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 입니다. styled-components외에도 다양한 패키지가 있지만, styled-components 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지입니다. ..

필수 프로그램 설치 (1) 크롬 브라우저 우리가 만드는 웹은 브라우저에서 구동됩니다. 브라우저는 앞으로 우리가 가장 많이 사용하는 프로그램이죠. 많은 브라우저 중에서 저는 구글 사의 크롬을 사용할 것 입니다. 브라우저를 설치해주세요. https://www.google.co.kr/chrome/ (2) VScode 코드를 작성하기 위한 프로그램이 필요한데요. 우리가 가지고 있는 메모장으로도 코딩이 가능하지만, 더 효율적인 코드 작성을 위해 전문 에디터를 사용하겠습니다. 그 중에서도 MS사의 vscode를 사용할 것 입니다. vscode를 설치해주세요. https://code.visualstudio.com/ (3) git 설치하기 우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해 git 이라..

상수와 변수 예전에는 변수! 하면 모두 var 키워드를 이용했죠. 이제는 const(상수)와 let(변수)를 이용해요. ❗ const : 재할당 안돼요. 내부 속성값은 수정 가능. let : 재할당 가능해요. if (true) { var a = 1; // const a = 1; } console.log(a); Object 선언, 단축 속성, 객체 복사 ❗ 가장 중요한 것! object는 key-value pair ! 객체를 선언하는 방법 // 선언방법 const person = { name: '르탄', age: 21, company: 'sparta coding club', doSomething: () => {}, } 생략해서 표현하는 방법 const name = '르탄'; const age = 21; /..

1. DOM (1) DOM의 기본 개념 1. javascript가 왜 생겼는데? 브라우저에서 쓰려고 만들어진 JS에요! 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어에요. 2. 웹 페이지가 뜨는 과정 클라이언트가 브라우저에 ‘www.naver.com’ 주소를 입력 클라이언트가 서버에게 ‘요청(request)’ naver서버는 클라이언트에게 ‘응답(response)’으로 HTML 문서(document) 전달 브라우저가 렌더링 엔진으로 HTML 파일을 해석(parsing 파싱) 랜더링 엔진이 HTML문서에 코드 한줄, 한줄 보면서 ‘해석'해요. javascript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 다음 이미지 처럼 D..

1. 콜백함수 예시 // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number); }); (1) 콜백함수란 다른 코드의 인자로 넘겨주는 함수에요! 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 얘기겠죠. forEach, setTimeout 등이 되겠네요. 콜백 함수를 넘겨받은 위와 같은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 돼요.(제어권이 그들에게 있는거죠) 콜백 함수는 다른 코드..