유자맛바나나의 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..

❑ @Component, @Autowired를 이용한 DI 최근에는 Spring Bean Configuration(DI 지시서)를 xml로 작성하는 경우는 거의 없다. 본 포스팅에서는 @Component, @Autowired 등 어노테이션을 각 객체에 직접 이용해 의존성 주입(DI) 하는 방법을 알아본다. 참고로, java class 형식으로 Spring Bean Configuration을 작성해 의존 관계를 정의할 수도 있다. 해당 내용은 추후 포스팅할 예정이다. 1) 어노테이션(Annotation)을 이용할 때의 장점 어노테이션을 사용하면 xml을 변경하지 않고 @Component, @Autowired, @Qualifier 등의 어노테이션만을 추가해서 DI를 바꿔줄 수 있다. 즉, 소스코드도 변경이 ..

❑ 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..

React App Build 1. 개발 PC에서 Build 1.1. React App Build create-react-app으로 생성한 React 프로젝트는 webpack 번들러로 빌드 결과물을 생성한다. 터미널에서 React 프로젝트 디렉토리로 이동 후 아래 명령어를 입력한다 npm run build 1.2. Build 확인 build가 완료되면 프로젝트 디렉토리에 build가 추가된다. index.html을 보면 들여쓰기와 띄어쓰기가 전혀 되어 있지 않은데, 웹 브라우저는 들여쓰기와 띄어쓰기가 없어도 구분할 수 있기 때문에 용량 최소화를 위해 전부 제거된 상태인 것이다. 1.3. Git Push React App을 Build하는 곳을 Server PC에서 할 수 있다. 그렇게 하려면 npm을 설치해..

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..

Nginx EC2 Amazon Linux2 버전 설치, 구동, 종료 설치 1. 설치 버전 확인 ❑ 중요 ❑ Amazon Linux2에선 Amazon Linux1과 달리 yum을 통한 설치(yum install nginx)를 지원하지 않는다. amazon-linux-extras를 통해 설치할 수 있다. amazon-linux-extras 명령어를 통해 설치 가능한 패키지를 확인한다 amazon-linux-extras list | grep nginx 아래와 같이 설치가능한 nginx를 볼 수 있다 2. 설치 sudo amazon-linux-extras install -y nginx1 3. 설치 확인 nginx -v 구동 1. 구동 sudo service nginx start 2. 구동 확인 EC2 인스턴스의..

nginx 환경 설정 상당히 설명이 잘 된 포스팅이 있어 해당 포스팅을 먼저 소개하고, 추가로 남기고 싶은 내용을 적었습니다. https://icarus8050.tistory.com/57 [Nginx] Nginx 이해하기 Nginx? Nginx는 간단하게 말씀드리자면 경량 웹 서버입니다. 클라이언트로부터 요청을 받았을 때 요청에 맞는 정적 파일을 응답해주는 HTTP Web Server로 활용되기도 하고, Reverse Proxy Server로 활용하여 icarus8050.tistory.com index 페이지 설정 (웹 페이지의 시작) root: index 페이지가 위치한 디렉토리를 의미. 즉, /html 에 있다는 뜻 index: index 페이지가 될 html 파일명을 의미 종합하면 http://웹서..

Nginx Mac OS 버전 설치, 구동, 종료 설치 터미널 실행 brew install nginx 입력 (최신 버전 설치) brew info nginx: nginx 설치 유무 및 버전 확인 brew search nginx: 설치 가능한 nginx 버전 확인 ★ 왜인지 nginx는 설치 가능한 버전이 나열되지 않는다. brew search node 와 비교하면 알 수 있다. brew install nginx@버전: 원하는 버전의 nginx 설치 (나온다면) 설치 결과 Docroot is: /usr/local/var/www ★ index.html의 위치 디렉토리 경로(root documnet의 경로) The default port has been set in /usr/local/etc/nginx/nginx..

EC2에 Java8 설치 Java 8설치 설치 가능한 openjdk 버전 확인 sudo yum list | grep jdk 여러 가지가 나오는데, Java8을 사용할 것이므로 java-1.8.0-openjdk-devel.x86_64 버전을 설치한다 sudo yum install -y java-1.8.0-openjdk-devel.x86_64 java, javac 버전 확인 java -version javac -version [참고] 주요 설치 버전인 아래 세 가지에 대한 설명 java-1.8.0-openjdk.x86_64 is the package containing the JRE java-1.8.0-openjdk-devel contains the development stuff (basically th..

Windows 버전은 불완전 버전이다(2022.1.1 기준) Version of nginx for Windows uses the native Win32 API (not the Cygwin emulation layer). Only the select() and poll() (1.15.9) connection processing methods are currently used, so high performance and scalability should not be expected. Due to this and some other known issues version of nginx for Windows is considered to be a beta version. At this time, it provi..

모든 기술 Roadmap https://github.com/kamranahmedse/developer-roadmap Backend Roadmap https://roadmap.sh/backend 우아한 형제들 로드맵 2020 https://github.com/woowacourse/back-end-roadmap

[도커 기초 시리즈 포스팅] [Docker] 기초 시리즈 (1) 도커의 개념과 사용이유 [Docker] 기초 시리즈 (2) Ubuntu에 도커 엔진 설치 [Docker] 기초 시리즈 (3) 이미지와 컨테이너 관계, 도커 아키텍처 (Now) [Docker] 기초 시리즈 (4) 도커 이미지의 구조 [Docker] 기초 시리즈 (5) 도커 이미지 다루기 - Docker Hub(Registry) [Docker] 기초 시리즈 (6) 도커 이미지 다루기 - 이미지 직접 생성 [Docker] 기초 시리즈 (7) 자주 사용하는 Dockerfile 명령어 [Docker] 기초 시리즈 (8) 자주 사용하는 도커 명령어 모음 [Docker] 기초 시리즈 (9) 도커 컨테이너 - 개념, 기본 사용법 [Docker] 기초 시리..

❑ 가상화의 등장 배경 새로운 운영체제의 테스트 환경을 구축하기 위해, 하나의 서버에서 여러 개의 애플리케이션 서버를 구동하는 등 서버 리소스를 탄력적으로 사용하고자 하는 요구사항이 생겼다. 하지만 하나의 서버에 설치된 각 애플리케이션 서버마다 요구하는 환경(Java, DB 버전 등)이 달라 충돌이 일어나기 쉬웠다. 이러한 문제를 해결하고자 서버 PC의 성능을 나눠서 사용하는 방법인 가상화에 대한 연구가 시작되었다. ❑ VM: Virtual Machine 가상화의 한 가지 방법으로 하이퍼바이저(Hypervisor)를 이용해 하드웨어 자원을 가상화하는 방식인 VM(Virtual Machine)이 사용되었다. # 하이퍼바이저(Hypervisor) 하이퍼바이저는 Host OS에서 하드웨어를 여러 개의 Virt..

❑ SSH란 시큐어 셸(Secure SHell, SSH)은 네트워크 상의 다른 컴퓨터에 로그인하거나 원격 시스템에서 명령을 실행하고 다른 시스템으로 파일을 복사할 수 있도록 해 주는 응용 프로그램 또는 그 프로토콜을 가리킨다. 강력한 인증 방법 및 안전하지 못한 네트워크에서 안전하게 통신을 할 수 있는 기능을 제공한다. 기본적으로는 22번 포트를 사용한다. SSH는 암호화 기법을 사용하기 때문에, 통신이 노출된다고 하더라도 이해할 수 없는 암호화된 문자로 보인다. *출처: 위키피디아 물리적으로 다른 PC에 인터넷으로 접속해 원격으로 제어하는 원격제어를 할 때(=원격 제어 프로그램) SSH를 사용한다. Server PC에 접속하는 것도 원격제어이고, 팀뷰어 같은 소프트웨어도 원격제어 프로그램이다. 유닉스 ..