diff --git a/contents/MUI.png b/contents/MUI.png new file mode 100644 index 0000000..8cda46f Binary files /dev/null and b/contents/MUI.png differ diff --git "a/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] MUI \354\273\264\355\217\254\353\204\214\355\212\270\353\245\274 \354\235\264\354\232\251\355\225\234 \353\223\234\353\241\255\353\260\225\354\212\244 \352\265\254\355\230\204 \353\260\217 \353\235\274\354\232\260\355\214\205 \354\240\201\354\232\251.md" "b/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] MUI \354\273\264\355\217\254\353\204\214\355\212\270\353\245\274 \354\235\264\354\232\251\355\225\234 \353\223\234\353\241\255\353\260\225\354\212\244 \352\265\254\355\230\204 \353\260\217 \353\235\274\354\232\260\355\214\205 \354\240\201\354\232\251.md" index 4018d5d..f0450bb 100644 --- "a/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] MUI \354\273\264\355\217\254\353\204\214\355\212\270\353\245\274 \354\235\264\354\232\251\355\225\234 \353\223\234\353\241\255\353\260\225\354\212\244 \352\265\254\355\230\204 \353\260\217 \353\235\274\354\232\260\355\214\205 \354\240\201\354\232\251.md" +++ "b/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] MUI \354\273\264\355\217\254\353\204\214\355\212\270\353\245\274 \354\235\264\354\232\251\355\225\234 \353\223\234\353\241\255\353\260\225\354\212\244 \352\265\254\355\230\204 \353\260\217 \353\235\274\354\232\260\355\214\205 \354\240\201\354\232\251.md" @@ -3,7 +3,7 @@ date: "2023-09-02" title: "[Gatsby 블로그 제작일지] MUI 컴포넌트를 이용한 드롭박스 구현 및 라우팅 적용" categories: ["Gatsby", "React", "Routing", "MUI"] summary: " MUI 컴포넌트를 활용해서 HEADER 드롭박스를 구현해봅시다." -thumbnail: "./test.png" +thumbnail: "./MUI.png" --- MUI 컴포넌트를 활용해서 HEADER 드롭박스를 구현해봅시다. diff --git "a/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] \355\216\230\354\235\264\354\247\200 \353\235\274\354\232\260\355\214\205 \353\260\251\353\262\225.md" "b/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] \355\216\230\354\235\264\354\247\200 \353\235\274\354\232\260\355\214\205 \353\260\251\353\262\225.md" index ba6c83b..da07c58 100644 --- "a/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] \355\216\230\354\235\264\354\247\200 \353\235\274\354\232\260\355\214\205 \353\260\251\353\262\225.md" +++ "b/contents/[Gatsby \353\270\224\353\241\234\352\267\270 \354\240\234\354\236\221\354\235\274\354\247\200] \355\216\230\354\235\264\354\247\200 \353\235\274\354\232\260\355\214\205 \353\260\251\353\262\225.md" @@ -3,7 +3,7 @@ date: "2023-09-02" title: "[Gatsby 블로그 제작일지] 페이지 라우팅 방법" categories: ["Gatsby", "React", "Routing"] summary: "Gatsby 페이지 라우팅 기능을 구현하는 과정을 기록해보겠습니다." -thumbnail: "./test.png" +thumbnail: "./개츠비라우팅코드.png" --- Gatsby 페이지 라우팅 기능을 구현하는 과정을 기록해보겠습니다. @@ -36,7 +36,7 @@ Add this component to src/pages/index.js to create a home page for your site. ```js src/pages/index.js -Copysrc/pages/index.js: copy code to clipboard + import * as React from "react" export default function Index() { diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 11\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \354\204\261\353\212\245 \354\265\234\354\240\201\355\231\224.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 11\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \354\204\261\353\212\245 \354\265\234\354\240\201\355\231\224.md" index 52a82c9..77a6e5b 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 11\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \354\204\261\353\212\245 \354\265\234\354\240\201\355\231\224.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 11\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \354\204\261\353\212\245 \354\265\234\354\240\201\355\231\224.md" @@ -3,7 +3,7 @@ date: "2024-02-21" title: "[React Study - 리액트를 다루는 기술] 11장. 컴포넌트 성능 최적화" categories: ["ReactStudy", "React"] summary: "오늘은 React.memo를 사용해 컴포넌트 성능 최적화 방법을 알아보겠습니다." -thumbnail: "./test.png" +thumbnail: "./리액트메모.jpg" --- 오늘은 React.memo를 사용해 컴포넌트 성능 최적화 방법을 알아보겠습니다. diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 12\354\236\245. immer\353\245\274 \354\202\254\354\232\251\355\225\230\354\227\254 \353\215\224 \354\211\275\352\262\214 \353\266\210\353\263\200\354\204\261 \354\234\240\354\247\200\355\225\230\352\270\260.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 12\354\236\245. immer\353\245\274 \354\202\254\354\232\251\355\225\230\354\227\254 \353\215\224 \354\211\275\352\262\214 \353\266\210\353\263\200\354\204\261 \354\234\240\354\247\200\355\225\230\352\270\260.md" index d4c7437..6af81f9 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 12\354\236\245. immer\353\245\274 \354\202\254\354\232\251\355\225\230\354\227\254 \353\215\224 \354\211\275\352\262\214 \353\266\210\353\263\200\354\204\261 \354\234\240\354\247\200\355\225\230\352\270\260.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 12\354\236\245. immer\353\245\274 \354\202\254\354\232\251\355\225\230\354\227\254 \353\215\224 \354\211\275\352\262\214 \353\266\210\353\263\200\354\204\261 \354\234\240\354\247\200\355\225\230\352\270\260.md" @@ -3,7 +3,7 @@ date: "2024-02-21" title: "[React Study - 리액트를 다루는 기술] 12장. immer를 사용하여 더 쉽게 불변성 유지하기" categories: ["ReactStudy", "React"] summary: "이번 내용은 immer를 처음 접해보기 때문에 특정 부분 딥다이브 대신 교재내용에 충실해서 작성해보도록 하겠습니다." -thumbnail: "./test.png" +thumbnail: "./immer.png" --- 이번 내용은 immer를 처음 접해보기 때문에 특정 부분 딥다이브 대신 교재내용에 충실해서 작성해보도록 하겠습니다. diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 13\354\236\245. \353\246\254\354\225\241\355\212\270 \353\235\274\354\232\260\355\204\260\353\241\234 SPA \352\260\234\353\260\234\355\225\230\352\270\260.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 13\354\236\245. \353\246\254\354\225\241\355\212\270 \353\235\274\354\232\260\355\204\260\353\241\234 SPA \352\260\234\353\260\234\355\225\230\352\270\260.md" index b009ca2..e7b2f56 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 13\354\236\245. \353\246\254\354\225\241\355\212\270 \353\235\274\354\232\260\355\204\260\353\241\234 SPA \352\260\234\353\260\234\355\225\230\352\270\260.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 13\354\236\245. \353\246\254\354\225\241\355\212\270 \353\235\274\354\232\260\355\204\260\353\241\234 SPA \352\260\234\353\260\234\355\225\230\352\270\260.md" @@ -3,7 +3,7 @@ date: "2024-02-28" title: "[React Study - 리액트를 다루는 기술] 13장. 리액트 라우터로 SPA 개발하기" categories: ["ReactStudy", "React"] summary: "다들 react router는 한번쯤 사용해보셨을텐데요. 전 주로 BrowserRouter를 사용해왔습니다." -thumbnail: "./test.png" +thumbnail: "./리액트라우터.png" --- 다들 react router는 한번쯤 사용해보셨을텐데요. 전 주로 BrowserRouter를 사용해왔습니다. @@ -63,7 +63,7 @@ const App = () => { - 배열안에 담긴 객체형태로 담아서 export합니다. (가장 상단의 페이지가 부모, children으로 들어오는 페이지가 자식페이지 입니다. 부모 -> 자식은 path가 이어진다고 생각하면 편합니다. ) ex> 부모 /movie, - 자식 /movie/detail, /movie/video ....) + 자식 /movie/detail, /movie/video .... ## router.jsx diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 14\354\236\245. \354\231\270\353\266\200 API\353\245\274 \354\227\260\353\217\231\355\225\230\354\227\254 \353\211\264\354\212\244 \353\267\260\354\226\264 \353\247\214\353\223\244\352\270\260.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 14\354\236\245. \354\231\270\353\266\200 API\353\245\274 \354\227\260\353\217\231\355\225\230\354\227\254 \353\211\264\354\212\244 \353\267\260\354\226\264 \353\247\214\353\223\244\352\270\260.md" index 0160fb3..e8654f2 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 14\354\236\245. \354\231\270\353\266\200 API\353\245\274 \354\227\260\353\217\231\355\225\230\354\227\254 \353\211\264\354\212\244 \353\267\260\354\226\264 \353\247\214\353\223\244\352\270\260.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 14\354\236\245. \354\231\270\353\266\200 API\353\245\274 \354\227\260\353\217\231\355\225\230\354\227\254 \353\211\264\354\212\244 \353\267\260\354\226\264 \353\247\214\353\223\244\352\270\260.md" @@ -3,17 +3,16 @@ date: "2024-02-28" title: "[React Study - 리액트를 다루는 기술] 14장. 외부 API를 연동하여 뉴스 뷰어 만들기" categories: ["ReactStudy", "React"] summary: "api 연동 과정을 학습하다 문득 api연동을 도와주는 도구 Fetch와 Axios의 특징 및 차이점이 궁금해져 조사해봤습니다." -thumbnail: "./test.png" +thumbnail: "./axios.png" --- - api 연동 과정을 학습하다 문득 api연동을 도와주는 도구 Fetch와 Axios의 특징 및 차이점이 궁금해져 조사해봤습니다. - # 1. Fetch + JavaScript의 내장 라이브러리로 promise 기반으로 만들어졌습니다. -```js +````js // fetch const url = 'http://example.com/movies.json' const options = { @@ -47,45 +46,45 @@ GET 요청 axios(url[, config]) // GET 요청 (별도 표시가 없으면 get요청) axios('/user/12345'); -``` +```` POST + ```js // POST 요청 axios({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` ## Fetch vs. Axios -|Fetch|Axios| -|--|--| -|모던 브라우저에 빌트인이라 설치 필요 없음|라이브러리로 설치 필요| -|body 속성을 사용 | data 속성을 사용| -|body는 문자열화 되어있다 |data는 object를 포함한다 | -|응답객체가 ok 속성을 포함하면 성공이다 |status 200이고 statusText가 'OK'이면 성공이다 | -|.json() 메서드를 사용해야 한다 | 자동으로 JSON 데이터 형식으로 변환된다| -| 해당 기능 X | 요청을 취소할 수 있고 타임아웃을 걸 수 있다| -|기본적으로 제공 X | HTTP 요청을 가로챌 수 있음| -| 지원 X| Download 진행에 대해 기본적인 지원을 한다| -|Chrome42+, Firefox39+, Edge14+, Safari10.1+ 이상에 지원 |좀 더 많은 브라우저에 지원됨 | - - +| Fetch | Axios | +| ------------------------------------------------------- | --------------------------------------------- | +| 모던 브라우저에 빌트인이라 설치 필요 없음 | 라이브러리로 설치 필요 | +| body 속성을 사용 | data 속성을 사용 | +| body는 문자열화 되어있다 | data는 object를 포함한다 | +| 응답객체가 ok 속성을 포함하면 성공이다 | status 200이고 statusText가 'OK'이면 성공이다 | +| .json() 메서드를 사용해야 한다 | 자동으로 JSON 데이터 형식으로 변환된다 | +| 해당 기능 X | 요청을 취소할 수 있고 타임아웃을 걸 수 있다 | +| 기본적으로 제공 X | HTTP 요청을 가로챌 수 있음 | +| 지원 X | Download 진행에 대해 기본적인 지원을 한다 | +| Chrome42+, Firefox39+, Edge14+, Safari10.1+ 이상에 지원 | 좀 더 많은 브라우저에 지원됨 | + > XSRF(CSRF) : Cross-Site Request Forgery. -쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격 +> 쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격 ### 결론 -따라서 간단하게 사용할 때는 fetch를 쓰고, 이외의 확장성을 염두해봤을 때는 axios를 쓰면 좋습니다. - +따라서 간단하게 사용할 때는 fetch를 쓰고, 이외의 확장성을 염두해봤을 때는 axios를 쓰면 좋습니다. ### 3줄 요약 + 1. api 연동에 자주쓰이는 도구는 fetch함수, axios가 있다. 2. 사실 axios도 fetch라는 메서드를 제공하는 라이브러리의 일종이다. -3. 간단하게 사용할 때는 fetch, 확장성을 염두해봤을 때는 axios \ No newline at end of file +3. 간단하게 사용할 때는 fetch, 확장성을 염두해봤을 때는 axios diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 15\354\236\245. Context API.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 15\354\236\245. Context API.md" index c679c63..cdc2e72 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 15\354\236\245. Context API.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 15\354\236\245. Context API.md" @@ -3,7 +3,7 @@ date: "2024-03-06" title: "[React Study - 리액트를 다루는 기술] 15장. Context API" categories: ["ReactStudy", "React"] summary: "해당 단원 공부 중 Render Props 라는 생소한 용어를 맞닥뜨려 도대체 뭔지 한번 알아보았습니다." -thumbnail: "./test.png" +thumbnail: "./hello.png" --- diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 16\354\236\245. \353\246\254\353\215\225\354\212\244 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 \354\235\264\355\225\264\355\225\230\352\270\260.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 16\354\236\245. \353\246\254\353\215\225\354\212\244 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 \354\235\264\355\225\264\355\225\230\352\270\260.md" index 350f7d2..c283837 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 16\354\236\245. \353\246\254\353\215\225\354\212\244 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 \354\235\264\355\225\264\355\225\230\352\270\260.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 16\354\236\245. \353\246\254\353\215\225\354\212\244 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 \354\235\264\355\225\264\355\225\230\352\270\260.md" @@ -3,7 +3,7 @@ date: "2024-03-06" title: "[React Study - 리액트를 다루는 기술] 16장. 리덕스 라이브러리 이해하기" categories: ["ReactStudy", "React"] summary: "리액트에는 다양한 상태 관리 라이브러리가 있습니다. 이번에는 상태 관리 도구들의 특징들을 비교하는 시간을 갖도록 하겠습니다. " -thumbnail: "./test.png" +thumbnail: "./상태관리라이브러리.png" --- 리액트에는 다양한 상태 관리 라이브러리가 있습니다. 이번에는 상태 관리 도구들의 특징들을 비교하는 시간을 갖도록 하겠습니다. diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 1\354\236\245. \353\246\254\354\225\241\355\212\270 \354\213\234\354\236\221.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 1\354\236\245. \353\246\254\354\225\241\355\212\270 \354\213\234\354\236\221.md" index 86ced4f..d5c519e 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 1\354\236\245. \353\246\254\354\225\241\355\212\270 \354\213\234\354\236\221.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 1\354\236\245. \353\246\254\354\225\241\355\212\270 \354\213\234\354\236\221.md" @@ -3,13 +3,11 @@ date: "2024-01-17" title: "[React Study - 리액트를 다루는 기술] 1장. 리액트 시작" categories: ["ReactStudy", "React"] summary: "자바스크립트 프레임워크 - Vue.js, electron, React Native, Angular 등" -thumbnail: "./test.png" +thumbnail: "./mvc패턴.png" --- - - - ### 자바스크립트 프레임워크 + - Vue.js, electron, React Native, Angular 등 - 위 프레임워크들은 MVC(Model-View-Controller) 아키텍처, MVVC(Model-View-View-Controller) 아키텍처로 애플리케이션 구조화 ![](https://velog.velcdn.com/images/dogmnil2007/post/6a8d73c5-8976-4af9-80a2-2eec5138c391/image.png) @@ -19,39 +17,43 @@ thumbnail: "./test.png" **하지만** # 리액트는? + 오로지 V(View)만 신경쓰는 **자바스크립트 라이브러리** - +

- # 리액트 특징 - - 데이터가 변할 때마다 변화를 주는것이 아닌, 기존 뷰(View)를 날려버리고 처음부터 새로 렌더링하는 방식 채택(Virtual DOM 사용) - - 재사용이 가능한 컴포넌트(Compoenent)라는 선언체 사용 - - Vue.js, Angular 과 같은 프레임워크와 다르게 **라이브러리**기 때문에 데이터모델링, 라우팅과 같은 부가기능 미보유 --> Axiox, React-Router, Redux 와 같은 라이브러리(or 프레임워크) 활용을 통해 보완 +# 리액트 특징 + +- 데이터가 변할 때마다 변화를 주는것이 아닌, 기존 뷰(View)를 날려버리고 처음부터 새로 렌더링하는 방식 채택(Virtual DOM 사용) +- 재사용이 가능한 컴포넌트(Compoenent)라는 선언체 사용 +- Vue.js, Angular 과 같은 프레임워크와 다르게 **라이브러리**기 때문에 데이터모델링, 라우팅과 같은 부가기능 미보유 + -> Axiox, React-Router, Redux 와 같은 라이브러리(or 프레임워크) 활용을 통해 보완

- # React 작업 환경 설정 + ## node.js - - 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임(Javascript Runtime) - - 웹 브라우저 환경이 아닌 곳에서도 자바스크립트 사용 가능 - - 프로젝트 개발에 필요한 도구들(Babel, webpack 등)이 node.js를 사용하기 때문에 설치 필요 - - node.js를 설치하면 npm(Node Package Manage)도 설치된다. - - 참고로 node.js를 설치할 때 LTS 버전, Current 버전을 고를 수 있는데 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전이라는 뜻이다. 보편적으로 LTS 버전을 사용한다. - + +- 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임(Javascript Runtime) +- 웹 브라우저 환경이 아닌 곳에서도 자바스크립트 사용 가능 +- 프로젝트 개발에 필요한 도구들(Babel, webpack 등)이 node.js를 사용하기 때문에 설치 필요 +- node.js를 설치하면 npm(Node Package Manage)도 설치된다. +- 참고로 node.js를 설치할 때 LTS 버전, Current 버전을 고를 수 있는데 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전이라는 뜻이다. 보편적으로 LTS 버전을 사용한다. +
자바스크립트 런타임이란?
- **런타임** - 프로그래밍 언어가 구동되는 환경을 의미 - -### 즉 자바스크립트가 구동되는 환경을 자바스크립트 런타임이라 한다. +**런타임** +프로그래밍 언어가 구동되는 환경을 의미 + +### 즉 자바스크립트가 구동되는 환경을 자바스크립트 런타임이라 한다. + 대표적으로 Browser(크롬, 사파리 등), node.js, react native, electron 등이 있다. 런타임 환경 및 브라우저마다 자바스크립트 엔진이 다른데 node.js, Chrome 브라우저의 경우 구글에서 만든 V8 엔진을 사용. @@ -65,43 +67,41 @@ thumbnail: "./test.png"

- - - ## NPM & Yarn - - npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자 - - npm 혹은 yarn을 통해 수 많은 패키지의 설치 및 버전관리가 가능 - - ### NPM & Yarn 차이점 - -| | npm | yarn | -| :---: | :---: | :---: | -| 설치 프로세스 | 한번에 하나 씩 순차적 처리 | 여러 패키지 동시 설치 | -| 속도 | (상대적)느림 | (상대적)빠름 | -| 보안 | 패키지 내 포함된 다른 패키지 코드도 실행하기 때문에 (상대적)덜안전 | yarn.lock 또는 package.json파일에 있는 파일만을 설치하기 때문에 (상대적)안전 | -| 명령어 | ex. 패키지 설치 : npm install [패키지명] | ex. 패키지 설치 : yarn add [패키지명] | - - - + +- npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자 +- npm 혹은 yarn을 통해 수 많은 패키지의 설치 및 버전관리가 가능 + +### NPM & Yarn 차이점 + +| | npm | yarn | +| :-----------: | :----------------------------------------------------------------: | :--------------------------------------------------------------------------: | +| 설치 프로세스 | 한번에 하나 씩 순차적 처리 | 여러 패키지 동시 설치 | +| 속도 | (상대적)느림 | (상대적)빠름 | +| 보안 | 패키지 내 포함된 다른 패키지 코드도 실행하기 때문에 (상대적)덜안전 | yarn.lock 또는 package.json파일에 있는 파일만을 설치하기 때문에 (상대적)안전 | +| 명령어 | ex. 패키지 설치 : npm install [패키지명] | ex. 패키지 설치 : yarn add [패키지명] | +

## create-reat-app (CRA) + - 리액트 프로젝트 생성시 필요한 웹팩, 바벨의 설치 및 설치과정을 생략하고 간편하게 작업환경을 구축해 주는 도구 - 추후 커스터마이징 가능 + ### 사용법 + NPM 사용시 + ``` npm init react-app <프로젝트 이름> ``` + yarn 사용시 + ``` yarn init react-app <프로젝트 이름> ``` - - - -
참고. npx란? @@ -109,11 +109,13 @@ yarn init react-app <프로젝트 이름>
참고로 본인은 + ``` npx create-react-app <프로젝트 이름> ``` - 이라는 명령어를 사용하는데 - npx(node.js package eXecute)는 자바스크립트 패키지 관리 모듈로 node.js package를 실행할 때 사용하는 모듈이다. + +이라는 명령어를 사용하는데 +npx(node.js package eXecute)는 자바스크립트 패키지 관리 모듈로 node.js package를 실행할 때 사용하는 모듈이다. 명령줄에서 직접 로컬로 설치된 명령줄 도구를 실행할 수 있도록 npm에서 제공하는 명령어/툴이다. @@ -127,9 +129,8 @@ Node.js 도구를 전역에 설치하지 않고도 실행할 수 있게 해준
- - +


@@ -143,8 +144,7 @@ Node.js 도구를 전역에 설치하지 않고도 실행할 수 있게 해준 https://www.codeit.kr/tutorials/15/LTS%EC%9D%98-%EC%9D%98%EB%AF%B8 https://joshua1988.github.io/vue-camp/package-manager/npm-vs-yarn.html#yarn +
- - \ No newline at end of file diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 2\354\236\245. JSX.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 2\354\236\245. JSX.md" index 57b9d54..2819c7d 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 2\354\236\245. JSX.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 2\354\236\245. JSX.md" @@ -3,7 +3,7 @@ date: "2024-01-17" title: "[React Study - 리액트를 다루는 기술] 2장. JSX" categories: ["ReactStudy", "React"] summary: "JSX란? 자바스크립트 확장 문법(공식적인 자바스크립트 문법은 아니다.)" -thumbnail: "./test.png" +thumbnail: "./프리티어코드.png" --- diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 3\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 3\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270.md" index fb4ab67..0f83636 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 3\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 3\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270.md" @@ -3,7 +3,7 @@ date: "2024-01-24" title: "[React Study - 리액트를 다루는 기술] 3장. 컴포넌트" categories: ["ReactStudy", "React"] summary: "React Component란? 리액트로 만들어진 앱을 이루는 최소한의 단위" -thumbnail: "./test.png" +thumbnail: "./네이버컴포넌트.png" --- diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 4\354\236\245. \354\235\264\353\262\244\355\212\270 \355\225\270\353\223\244\353\247\201.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 4\354\236\245. \354\235\264\353\262\244\355\212\270 \355\225\270\353\223\244\353\247\201.md" index 9aedadc..7c160b3 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 4\354\236\245. \354\235\264\353\262\244\355\212\270 \355\225\270\353\223\244\353\247\201.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 4\354\236\245. \354\235\264\353\262\244\355\212\270 \355\225\270\353\223\244\353\247\201.md" @@ -3,7 +3,7 @@ date: "2024-01-24" title: "[React Study - 리액트를 다루는 기술] 4장. 이벤트 핸들링" categories: ["ReactStudy", "React"] summary: "4장은 리액트 이벤트 설정인데 다들 아실거라 생각되어 이벤트 핸들링의 원리를 딥다이브 해보았습니다." -thumbnail: "./test.png" +thumbnail: "./리액트구조.png" --- diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 5\354\236\245. ref.DOM\354\227\220 \354\235\264\353\246\204\353\213\254\352\270\260.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 5\354\236\245. ref.DOM\354\227\220 \354\235\264\353\246\204\353\213\254\352\270\260.md" index 33a3503..3f58b1f 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 5\354\236\245. ref.DOM\354\227\220 \354\235\264\353\246\204\353\213\254\352\270\260.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 5\354\236\245. ref.DOM\354\227\220 \354\235\264\353\246\204\353\213\254\352\270\260.md" @@ -3,7 +3,7 @@ date: "2024-01-31" title: "[React Study - 리액트를 다루는 기술] 5장. ref:DOM에 이름달기" categories: ["ReactStudy", "React"] summary: "비록 리액트 관련된 내용은 아니지만 문득 console의 정확한 뜻이 무엇인지 궁금해서 조사해봤습니다." -thumbnail: "./test.png" +thumbnail: "./콘솔로표시각화.png" --- diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 6\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \353\260\230\353\263\265.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 6\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \353\260\230\353\263\265.md" index b921361..dc09666 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 6\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \353\260\230\353\263\265.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 6\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270 \353\260\230\353\263\265.md" @@ -3,7 +3,7 @@ date: "2024-01-31" title: "[React Study - 리액트를 다루는 기술] 6장. 컴포넌트 반복" categories: ["ReactStudy", "React"] summary: "자바스크립트 forEach과 map 메서드를 딥다이브 해보았습니다." -thumbnail: "./test.png" +thumbnail: "./map함수예시.png" --- diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 7\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270\354\235\230 \353\235\274\354\235\264\355\224\204\354\202\254\354\235\264\355\201\264 \353\251\224\354\204\234\353\223\234.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 7\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270\354\235\230 \353\235\274\354\235\264\355\224\204\354\202\254\354\235\264\355\201\264 \353\251\224\354\204\234\353\223\234.md" index 494a484..1410836 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 7\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270\354\235\230 \353\235\274\354\235\264\355\224\204\354\202\254\354\235\264\355\201\264 \353\251\224\354\204\234\353\223\234.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 7\354\236\245. \354\273\264\355\217\254\353\204\214\355\212\270\354\235\230 \353\235\274\354\235\264\355\224\204\354\202\254\354\235\264\355\201\264 \353\251\224\354\204\234\353\223\234.md" @@ -3,7 +3,7 @@ date: "2024-02-07" title: "[React Study - 리액트를 다루는 기술] 7장. 컴포넌트의 라이프사이클 메서드" categories: ["ReactStudy", "React"] summary: "대표적인 리액트 스타터 툴인 CRA(Create React App)과 Vite에 대해서 알아보았습니다. " -thumbnail: "./test.png" +thumbnail: "./cra와vite.png" --- 대표적인 리액트 스타터 툴인 CRA(Create React App)과 Vite에 대해서 알아보았습니다. diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 8\354\236\245. hooks.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 8\354\236\245. hooks.md" index 6787ee1..2851e2d 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 8\354\236\245. hooks.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 8\354\236\245. hooks.md" @@ -3,7 +3,7 @@ date: "2024-02-07" title: "[React Study - 리액트를 다루는 기술] 8장. hooks" categories: ["ReactStudy", "React"] summary: "훅을 도대체 왜 쓰는걸까??" -thumbnail: "./test.png" +thumbnail: "./리액트훅.png" --- # 훅을 도대체 왜 쓰는걸까?? diff --git "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 9. \354\273\264\355\217\254\353\204\214\355\212\270 \354\212\244\355\203\200\354\235\274\353\247\201.md" "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 9. \354\273\264\355\217\254\353\204\214\355\212\270 \354\212\244\355\203\200\354\235\274\353\247\201.md" index 343a5c0..d2d2dc3 100644 --- "a/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 9. \354\273\264\355\217\254\353\204\214\355\212\270 \354\212\244\355\203\200\354\235\274\353\247\201.md" +++ "b/contents/[React Study - \353\246\254\354\225\241\355\212\270\353\245\274 \353\213\244\353\243\250\353\212\224 \352\270\260\354\210\240] 9. \354\273\264\355\217\254\353\204\214\355\212\270 \354\212\244\355\203\200\354\235\274\353\247\201.md" @@ -3,7 +3,7 @@ date: "2024-02-14" title: "[React Study - 리액트를 다루는 기술] 9. 컴포넌트 스타일링" categories: ["ReactStudy", "React"] summary: "우리가 자주 쓰는 css 프레임워크 종류 및 장단점을 조사해봤습니다." -thumbnail: "./test.png" +thumbnail: "./css프레임워크순위.png" --- 우리가 자주 쓰는 css 프레임워크 종류 및 장단점을 조사해봤습니다. diff --git a/contents/axios.png b/contents/axios.png new file mode 100644 index 0000000..5c64b80 Binary files /dev/null and b/contents/axios.png differ diff --git "a/contents/cra\354\231\200vite.png" "b/contents/cra\354\231\200vite.png" new file mode 100644 index 0000000..ef6e0e2 Binary files /dev/null and "b/contents/cra\354\231\200vite.png" differ diff --git "a/contents/css\355\224\204\353\240\210\354\236\204\354\233\214\355\201\254\354\210\234\354\234\204.png" "b/contents/css\355\224\204\353\240\210\354\236\204\354\233\214\355\201\254\354\210\234\354\234\204.png" new file mode 100644 index 0000000..cc027b9 Binary files /dev/null and "b/contents/css\355\224\204\353\240\210\354\236\204\354\233\214\355\201\254\354\210\234\354\234\204.png" differ diff --git a/contents/hello.png b/contents/hello.png new file mode 100644 index 0000000..4581646 Binary files /dev/null and b/contents/hello.png differ diff --git a/contents/immer.png b/contents/immer.png new file mode 100644 index 0000000..9172df5 Binary files /dev/null and b/contents/immer.png differ diff --git "a/contents/map\355\225\250\354\210\230\354\230\210\354\213\234.png" "b/contents/map\355\225\250\354\210\230\354\230\210\354\213\234.png" new file mode 100644 index 0000000..b587d99 Binary files /dev/null and "b/contents/map\355\225\250\354\210\230\354\230\210\354\213\234.png" differ diff --git "a/contents/mvc\355\214\250\355\204\264.png" "b/contents/mvc\355\214\250\355\204\264.png" new file mode 100644 index 0000000..a6f3afc Binary files /dev/null and "b/contents/mvc\355\214\250\355\204\264.png" differ diff --git a/contents/test.png b/contents/test.png deleted file mode 100644 index c6acb74..0000000 Binary files a/contents/test.png and /dev/null differ diff --git "a/contents/\352\260\234\354\270\240\353\271\204\353\235\274\354\232\260\355\214\205\354\275\224\353\223\234.png" "b/contents/\352\260\234\354\270\240\353\271\204\353\235\274\354\232\260\355\214\205\354\275\224\353\223\234.png" new file mode 100644 index 0000000..9b31c72 Binary files /dev/null and "b/contents/\352\260\234\354\270\240\353\271\204\353\235\274\354\232\260\355\214\205\354\275\224\353\223\234.png" differ diff --git "a/contents/\353\204\244\354\235\264\353\262\204\354\273\264\355\217\254\353\204\214\355\212\270.png" "b/contents/\353\204\244\354\235\264\353\262\204\354\273\264\355\217\254\353\204\214\355\212\270.png" new file mode 100644 index 0000000..083cff6 Binary files /dev/null and "b/contents/\353\204\244\354\235\264\353\262\204\354\273\264\355\217\254\353\204\214\355\212\270.png" differ diff --git "a/contents/\353\246\254\354\225\241\355\212\270\352\265\254\354\241\260.png" "b/contents/\353\246\254\354\225\241\355\212\270\352\265\254\354\241\260.png" new file mode 100644 index 0000000..a8340f8 Binary files /dev/null and "b/contents/\353\246\254\354\225\241\355\212\270\352\265\254\354\241\260.png" differ diff --git "a/contents/\353\246\254\354\225\241\355\212\270\353\235\274\354\232\260\355\204\260.png" "b/contents/\353\246\254\354\225\241\355\212\270\353\235\274\354\232\260\355\204\260.png" new file mode 100644 index 0000000..d69ce17 Binary files /dev/null and "b/contents/\353\246\254\354\225\241\355\212\270\353\235\274\354\232\260\355\204\260.png" differ diff --git "a/contents/\353\246\254\354\225\241\355\212\270\353\251\224\353\252\250.jpg" "b/contents/\353\246\254\354\225\241\355\212\270\353\251\224\353\252\250.jpg" new file mode 100644 index 0000000..920b149 Binary files /dev/null and "b/contents/\353\246\254\354\225\241\355\212\270\353\251\224\353\252\250.jpg" differ diff --git "a/contents/\353\246\254\354\225\241\355\212\270\355\233\205.png" "b/contents/\353\246\254\354\225\241\355\212\270\355\233\205.png" new file mode 100644 index 0000000..e60f2a3 Binary files /dev/null and "b/contents/\353\246\254\354\225\241\355\212\270\355\233\205.png" differ diff --git "a/contents/\354\203\201\355\203\234\352\264\200\353\246\254\353\235\274\354\235\264\353\270\214\353\237\254\353\246\254.png" "b/contents/\354\203\201\355\203\234\352\264\200\353\246\254\353\235\274\354\235\264\353\270\214\353\237\254\353\246\254.png" new file mode 100644 index 0000000..4fd53da Binary files /dev/null and "b/contents/\354\203\201\355\203\234\352\264\200\353\246\254\353\235\274\354\235\264\353\270\214\353\237\254\353\246\254.png" differ diff --git "a/contents/\354\275\230\354\206\224\353\241\234\355\221\234\354\213\234\352\260\201\355\231\224.png" "b/contents/\354\275\230\354\206\224\353\241\234\355\221\234\354\213\234\352\260\201\355\231\224.png" new file mode 100644 index 0000000..79a4a87 Binary files /dev/null and "b/contents/\354\275\230\354\206\224\353\241\234\355\221\234\354\213\234\352\260\201\355\231\224.png" differ diff --git "a/contents/\355\224\204\353\246\254\355\213\260\354\226\264\354\275\224\353\223\234.png" "b/contents/\355\224\204\353\246\254\355\213\260\354\226\264\354\275\224\353\223\234.png" new file mode 100644 index 0000000..c70e54c Binary files /dev/null and "b/contents/\355\224\204\353\246\254\355\213\260\354\226\264\354\275\224\353\223\234.png" differ