Skip to content

Commit

Permalink
Refactor 썸네일 이미지 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoubleJ
BoubleJ committed Mar 17, 2024
1 parent eaf651b commit a892970
Show file tree
Hide file tree
Showing 35 changed files with 90 additions and 91 deletions.
Binary file added contents/MUI.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion contents/[Gatsby 블로그 제작일지] MUI 컴포넌트를 이용한 드롭박스 구현 및 라우팅 적용.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 드롭박스를 구현해봅시다.
Expand Down
4 changes: 2 additions & 2 deletions contents/[Gatsby 블로그 제작일지] 페이지 라우팅 방법.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2023-09-02"
title: "[Gatsby 블로그 제작일지] 페이지 라우팅 방법"
categories: ["Gatsby", "React", "Routing"]
summary: "Gatsby 페이지 라우팅 기능을 구현하는 과정을 기록해보겠습니다."
thumbnail: "./test.png"
thumbnail: "./개츠비라우팅코드.png"
---

Gatsby 페이지 라우팅 기능을 구현하는 과정을 기록해보겠습니다.
Expand Down Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 11장. 컴포넌트 성능 최적화.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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를 사용해 컴포넌트 성능 최적화 방법을 알아보겠습니다.
Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 12장. immer를 사용하여 더 쉽게 불변성 유지하기.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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를 처음 접해보기 때문에 특정 부분 딥다이브 대신 교재내용에 충실해서 작성해보도록 하겠습니다.
Expand Down
4 changes: 2 additions & 2 deletions contents/[React Study - 리액트를 다루는 기술] 13장. 리액트 라우터로 SPA 개발하기.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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를 사용해왔습니다.
Expand Down Expand Up @@ -63,7 +63,7 @@ const App = () => {
- 배열안에 담긴 객체형태로 담아서 export합니다.
(가장 상단의 페이지가 부모, children으로 들어오는 페이지가 자식페이지 입니다. 부모 -> 자식은 path가 이어진다고 생각하면 편합니다. )
ex> 부모 /movie,
자식 /movie/detail, /movie/video ....)
자식 /movie/detail, /movie/video ....

## router.jsx

Expand Down
51 changes: 25 additions & 26 deletions contents/[React Study - 리액트를 다루는 기술] 14장. 외부 API를 연동하여 뉴스 뷰어 만들기.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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
3. 간단하게 사용할 때는 fetch, 확장성을 염두해봤을 때는 axios
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 15장. Context API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
---


Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 16장. 리덕스 라이브러리 이해하기.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2024-03-06"
title: "[React Study - 리액트를 다루는 기술] 16장. 리덕스 라이브러리 이해하기"
categories: ["ReactStudy", "React"]
summary: "리액트에는 다양한 상태 관리 라이브러리가 있습니다. 이번에는 상태 관리 도구들의 특징들을 비교하는 시간을 갖도록 하겠습니다. "
thumbnail: "./test.png"
thumbnail: "./상태관리라이브러리.png"
---

리액트에는 다양한 상태 관리 라이브러리가 있습니다. 이번에는 상태 관리 도구들의 특징들을 비교하는 시간을 갖도록 하겠습니다.
Expand Down
96 changes: 48 additions & 48 deletions contents/[React Study - 리액트를 다루는 기술] 1장. 리액트 시작.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -19,39 +17,43 @@ thumbnail: "./test.png"
**하지만**

# 리액트는?

오로지 V(View)만 신경쓰는 **자바스크립트 라이브러리**

<BR>
<BR>

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

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

<BR>
<BR>


# 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 버전을 사용한다.

<details>

<summary>자바스크립트 런타임이란?</summary>

<div markdown="1">

**런타임**
프로그래밍 언어가 구동되는 환경을 의미

### 즉 자바스크립트가 구동되는 환경을 자바스크립트 런타임이라 한다.
**런타임**
프로그래밍 언어가 구동되는 환경을 의미

### 즉 자바스크립트가 구동되는 환경을 자바스크립트 런타임이라 한다.

대표적으로 Browser(크롬, 사파리 등), node.js, react native, electron 등이 있다.

런타임 환경 및 브라우저마다 자바스크립트 엔진이 다른데 node.js, Chrome 브라우저의 경우 구글에서 만든 V8 엔진을 사용.
Expand All @@ -65,55 +67,55 @@ thumbnail: "./test.png"

<BR><BR>

## 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 [패키지명] |

<BR><BR>

## create-reat-app (CRA)

- 리액트 프로젝트 생성시 필요한 웹팩, 바벨의 설치 및 설치과정을 생략하고 간편하게 작업환경을 구축해 주는 도구
- 추후 커스터마이징 가능

### 사용법

NPM 사용시

```
npm init react-app <프로젝트 이름>
```

yarn 사용시

```
yarn init react-app <프로젝트 이름>
```





<details>

<summary>참고. npx란?</summary>

<div markdown="1">

참고로 본인은

```
npx create-react-app <프로젝트 이름>
```
이라는 명령어를 사용하는데
npx(node.js package eXecute)는 자바스크립트 패키지 관리 모듈로 node.js package를 실행할 때 사용하는 모듈이다.

이라는 명령어를 사용하는데
npx(node.js package eXecute)는 자바스크립트 패키지 관리 모듈로 node.js package를 실행할 때 사용하는 모듈이다.

명령줄에서 직접 로컬로 설치된 명령줄 도구를 실행할 수 있도록 npm에서 제공하는 명령어/툴이다.

Expand All @@ -127,9 +129,8 @@ Node.js 도구를 전역에 설치하지 않고도 실행할 수 있게 해준

</details>




<BR>
<BR>
<BR>
Expand All @@ -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

</div>

</details>


2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 2장. JSX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2024-01-17"
title: "[React Study - 리액트를 다루는 기술] 2장. JSX"
categories: ["ReactStudy", "React"]
summary: "JSX란? 자바스크립트 확장 문법(공식적인 자바스크립트 문법은 아니다.)"
thumbnail: "./test.png"
thumbnail: "./프리티어코드.png"
---


Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 3장. 컴포넌트.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2024-01-24"
title: "[React Study - 리액트를 다루는 기술] 3장. 컴포넌트"
categories: ["ReactStudy", "React"]
summary: "React Component란? 리액트로 만들어진 앱을 이루는 최소한의 단위"
thumbnail: "./test.png"
thumbnail: "./네이버컴포넌트.png"
---


Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 4장. 이벤트 핸들링.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2024-01-24"
title: "[React Study - 리액트를 다루는 기술] 4장. 이벤트 핸들링"
categories: ["ReactStudy", "React"]
summary: "4장은 리액트 이벤트 설정인데 다들 아실거라 생각되어 이벤트 핸들링의 원리를 딥다이브 해보았습니다."
thumbnail: "./test.png"
thumbnail: "./리액트구조.png"
---


Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 5장. ref.DOM에 이름달기.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2024-01-31"
title: "[React Study - 리액트를 다루는 기술] 5장. ref:DOM에 이름달기"
categories: ["ReactStudy", "React"]
summary: "비록 리액트 관련된 내용은 아니지만 문득 console의 정확한 뜻이 무엇인지 궁금해서 조사해봤습니다."
thumbnail: "./test.png"
thumbnail: "./콘솔로표시각화.png"
---


Expand Down
2 changes: 1 addition & 1 deletion contents/[React Study - 리액트를 다루는 기술] 6장. 컴포넌트 반복.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ date: "2024-01-31"
title: "[React Study - 리액트를 다루는 기술] 6장. 컴포넌트 반복"
categories: ["ReactStudy", "React"]
summary: "자바스크립트 forEach과 map 메서드를 딥다이브 해보았습니다."
thumbnail: "./test.png"
thumbnail: "./map함수예시.png"
---


Expand Down
Loading

0 comments on commit a892970

Please sign in to comment.