유자맛바나나의 Dev-log

[Front-End Side] Axios POST를 이용해 File 업로드 요청 1. 파일을 주고받을 때는 Multipart/form-data 타입을 이용한다. 1.1. HTTP Headers에 타입 추가 아래와 같이 headers에 'multipart/form-data'를 추가한다. axios({ ... headers: { 'Content-Type': 'multipart/form-data', }, }); 1.2. JavaScript의 FormData 객체를 생성해 데이터로 전달한다. FormData 인터페이스는 Key/Value 쌍으로 데이터를 쉽게 생성/삭제할 수 있는 방법을 제공한다. ★중요★ 하나의 Key에 Value를 'List 형태'로 여러 개를 보내고 싶을땐 동일한 Key에다 계속 appen..

❑ Situation: 최초 Page 랜딩 시 서버로부터 받은 데이터를 state에 초기화하고 싶다 네이버 웹 페이지에 가면 내가 접속한 그 때 웹 페이지에 보여줄 데이터들을 서버로부터 받아 보여준다. 내가 원하는 것도 최초 Page 오픈 시 Axios를 이용해 서버로부터 데이터를 받아 state에 초기화하고, 해당 state를 화면에 보여주는 것이다. 참고로, Problem1에서 살펴 보겠지만 Axios를 이용해 서버로부터 받은 결과는 Promise다. 따라서 본 포스팅은 최초 Page 랜딩 시 Promise의 데이터를 state에 초기화하는 방법(useEffect를 활용)으로 이해해도 좋다. [Basic knowledge] 함수형 컴포넌트의 state의 초기화 방법 기본적으로 함수형 컴포넌트의 sta..

Question1 상황 아래와 같이 React Router를 이용해 "/path"로 이동하도록 작성한 버튼1을 클릭하면 웹브라우저의 URI에 /path가 추가되며 해당 페이지(컴포넌트)로 이동한다. 여기서 궁금한 점, 그림2처럼 동일한 경로(/path)로 웹서버에 요청하는 버튼을 만들면 될까? Path Page로 이동할까? 아니면 웹 서버에 요청하게 될까? 각 버튼에 작성된 코드 버튼1: React Router를 이용해 "/path" 경로의 페이지로 이동 버튼2: 웹서버 Nginx에게 "/path" 경로로 요청 정답 버튼 1을 클릭할 경우: "/path" 경로의 페이지(컴포넌트)로 이동한다 버튼 2를 클릭할 경우: "/path" 경로(URI)로 웹서버(Nginx)에게 요청한다 어떻게 같은 경로(/path..

Reverse-Proxy란? Proxy는 Client를 숨기고, Reverse-Proxy는 Server를 숨기는 것 Proxy란 대리자를 의미한다. 일반적으로 Proxy는 Server로부터 Clinet를 숨겨 정보를 알 수 없도록(그림1) 하는 역할이다. Reverse-Proxy는 그 반대다. Client로부터 Server를 숨겨주는 것(그림2)이다. Nginx 에서 React 배포시 Reverse-Proxy 설정 방법 React는 SPA(Single Page Application)이므로 Build 결과로 생성되는 html은 index.html 하나 뿐이다. 따라서 Nginx는 정적 페이지인 index.html만 응답하고, 그 외 데이터 요청은 API 서버에게 한다. 1) 최초 웹페이지 도메인 진입 (h..

React에서 페이지를 이동할 땐 태그가 아닌 태그를 사용한다 태그의 href 속성을 사용할 경우 href 속성을 사용할 경우 HTML을 새롭게 불러오게 된다. 따라서 React의 state(상태)값과 렌더링 된 컴포넌트가 전부 초기화 된다. 이러한 방식은 서버에 새로운 HTML을 요청해 속도가 느릴 뿐 아니라, 단일 URL로 SPA(Single Page Application)로 사이트를 표현하는 React의 방식과 대치된다. 태그의 to 속성을 사용할 경우 React에서는 태그의 문제점을 보완할 수 있도록 react-router-dom 라이브러리의 컴포넌트를 통해 페이지 이동을 하도록 지원한다. 를 사용할 경우 HTML을 초기화하지 않고 페이지를 이동할 수 있다. 예시 App.js react-route..

1. JSX 내에서 Javascript 사용 하는 방법: { } JSX 내에서 {}를 쓰면 Javascript로 해석한다. 따라서 조건문과 반복문 모두 { } 기호를 이용해야 한다. 2. 조건문(if) JSX에서는 중괄호 안에 if문을 직접적으로 사용할 수 없다. 단, 함수로 작성하여 사용 가능하다. 2.1. 외부 함수를 이용 Example Code import React from "react"; const useIf = (i) => { let result; if(i==1){ result = citron } else { result = banana } return result; } const App = () => { const hello = "Welcome to Citron Banana Blog!" re..

State 1. 정의와 개념 state란 지속적으로 상태를 관리할 수 있는 변수를 의미한다. 기존 JavaScript의 let, const로 선언한 변수는 화면이 Re-rendering 될 때 그 값이 초기화 되었지만, state로 선언된 변수는 React가 관리하기 때문에 화면이 Re-rendering 되어도 값이 계속 유지된다. state는 컴포넌트 안에서 관리되며, 컴포넌트는 state의 값이 바뀔 때 마다 화면을 Re-rendering 한다. 2. state 사용의 차이: 함수형 컴포넌트 vs 클래스 컴포넌트 결론부터 말하자면 React 공식 문서에서 함수형 컴포넌트와 useState(React Hook)을 사용할 것을 권장한다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hoo..

export와 export default의 차이 1. export export만 사용한 컴포넌트의 경우 import 할 때 각 컴포넌트를 직접 명시해줘야 한다. Box.js export default를 사용하지 않고 export로만 세 가지 컴포넌트를 정의함 export const RedBox = () => { return Red Box; }; export const GreenBox = () => { return Green Box; }; export const BlueBox = () => { return Blue Box; }; App.js Box.js의 각 컴포넌트를 import 할 때 컴포넌트 명을 {}안에 정확히 명시해주어야 한다. as를 이용해 alias를 지정할 수 있다. import React ..

사전에 필요한 것 1. node.js 웹사이트에서 다운받아 설치 2. npm node.js 설치시 자동 설치 3. npx npm install npx -g 4. Visual Studio Code 최신 버전 설치하기 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and..

Trouble Could not determine react-native-codegen location Error react-naitve start, react-naitve run-ios 와 같이 react-naitve 프로젝트를 빌드하려고 할 때 react-native-codegen이 없다고 나올 수 있다. (react-native-codegen/package.json 설정이 잘못되었다 등) Shooting 라이브러리에 react-native-codegen가 없거나 global package에 설치되었는데 프로젝트 라이브러리에서 찾을수도 있다. 1) 프로젝트 라이브러리 확인 프로젝트에서 node_modules > react-native-codegen가 있는지 확인한다. @react-native와 같은 ..