What I studied

평소 가볍게 개발을 공부하거나 무언가를 만들어볼 때는 빠르게 시작하기 위해서 React CRA를 이용해 개발환경을 구축하곤 했었다. CRA(Create React App) 역시 내부적으로 webpack과 babel을 사용하기는 하지만 이러한 설정이 숨겨져있기 때문에 초기 설정에 대한 고민 없이 편하게 시작할 수 있다. 하지만 확장성이 떨어지기 때문에 복잡한 프로젝트에는 부적합할 수 있으며, 내부적으로 관리하는 설정때문에 세부적인 조정이 필요한 경우, 제한이 있을 수 있어 webpack과 babel을 사용하여 개발환경을 구축하는 것이 훨씬 유리하다. 보통 회사에서는 CRA를 사용하기 보단 리액트, 뷰 등의 개발환경을 개발자가 직접 구축하는 경우가 많은데 나 역시도 웹팩과 바벨로 직접 구축한 프로젝트를 맡고..

package.json에 작성해 둔 명령어로 환경변수를 관리할 수 있도록 빌드 구성을 통합하는 작업을 진행했는데 거의 2일 동안은 삽질의 연속이었던 것 같다. 여러 가지 방법을 시도하다가 내가 원하는 대로 환경변수를 활용할 수 있게 되었다. 1. html-webpack-plugin (templateParameters 사용) 가장 먼저 시도했던 방법이었는데, 뭐 때문이었는지는 모르겠지만 제대로 적용이 되지 않았었다. 그래서 다른 방법을 사용했다가 다시 돌아와서 처음부터 차근차근 적용해 보니 가장 쉽게 적용되었던 것 같다. 플러그인을 사용하기 전 환경변수와 명령어를 먼저 세팅해 줬는데, package.json 파일에서 아래와 같이 설정하면 된다. set HELLO=helloworld라는 환경변수를 세팅해 주..

내가 원하는 파일, 원하는 설정대로 빌드하기 위해서 웹팩을 사용하는데 빌드 날짜와 시간을 추가해두면 어떤 파일이 가장 최근에 빌드된 것인지 확인하는데 유용하다. 그래서 자주 사용하는 플러그인을 통해 빌드된 파일 상단에 날짜와 시간을 추가해보려고한다. 1. BannerPlugin (js, css 파일 상단) BannerPlugin은 webpack에 내장되어있는 플러그인으로 webpack을 설치했다면 따로 설치할 필요가 없다. 주로 javascript 번들 파일 맨 위에 주석을 추가하는 용도로 사용되는데 webpack.config.js 내의 plugins에 banner를 추가하여 원하는 날짜와 시간 형식을 추가해주면 된다. const webpack = require('webpack'); module.expo..

프론트엔드와 백엔드가 협업을 하다보면 CORS 에러를 정말 많이 만나게 되는 것 같다.프론트엔드에서 백엔드 서버로 api 요청을 보낼 때 흔히 볼 수 있는 에러이다. CORS는 Cross Origin Resource Sharing의 약자로 한국어로 직역하면 교차 출처 리소스 공유라고 할 수 있는데 CORS가 무엇인지부터 다시 리마인드해보려고 한다. 1. Origin 이란? 보통 우리가 사용하는 주소와 같은 URL은 마치 하나의 문자열같이 보여도, 여러개의 구성요소로 구성되어있다는게 사실이다. 아래의 그림과 같은 주소가 있다고 가정해보면 5가지 정도의 구성요소가 모여있다는 것을 확인해볼 수 있다. CORS에서의 Origin, 즉 출처라는 것은 Protocol과 Host + 포트번호를 합친 것을 의미하는데,..

프로젝트를 서버에 올리고, 수정하고, 내리고 하는 등의 과정을 반복하게 되면서 서버에 접속하는 방법에 대해서 정리해보려고 한다. 간단하지만 내가 까먹지 않기 위해 정리하는 것. 1) Ubuntu 터미널에서 접속하는 방법 터미널에서 접속하는 방법도 간단하다. 우분투 터미널에 접속하여 아래와 같이 입력하면 된다. $ ssh -p 포트번호 계정@ip주소 $ ssh -p 22 hello@111.1.1.11 포트번호와 계정, ip주소를 입력하고 나면 아래와 같이 비밀번호를 입력하라고 뜬다. hello@111.11.1.111's password: -> 해당 부분에 비밀번호를 입력해주면 되는데, 비밀번호는 입력해도 보이지 않는게 정상이다. 비밀번호까지 입력이 완료되면 서버에 접속된다. $ ssh -p 22 hello..

요즘 회사 코드에 있는 웹팩 동작 방식이 궁금해 웹팩을 공부하고 있다. 자주 사용하는 loader를 먼저 하나씩 공부해보고 있었는데 css-loader, style-loader를 실행하는데까지는 문제가 없었다. 강의에서는 웹팩 4를 사용하고 있는데 나는 그래도 최근에 나온 것으로 해보고 싶어 5를 사용하며, 하나씩 맞춰나가는 중이다. 역시 강의대로 따라하니 file-loader와 url-loader가 적용이 안된다 ㅎ css 파일에 있는 백그라운드 이미지를 웹팩으로 빌드해서 index.html에 보여주는 구조였다. (app.css, app.js, index.html) 결과적으로 index.html에서 번들링 된 자바스크립트 파일을 불러오는데 그 안에 css가 포함되어있는 구조인 것이다. // app.cs..

윈도우에서 개발한 파일을 리눅스 서버에 올려야했는데, 문제는 윈도우에서 리눅스 서버로 파일을 어떻게 전송하는가... 처음에는 막막해서 파일전송 명령어 등 이것저것 엄청 많이 검색해봤다. 그러다가 단순하게 생각해보니 예전에 스파르타코딩클럽 웹개발 종합반 강의에서 aws 서버에 파일을 올리게 도와주었던 파일질라가 생각났다. 그래서 오늘은 파일질라 대신 WinSCP라는 오픈소스 프로그램을 사용해봤다. 이 프로그램은 로컬 컴퓨터와 원격 컴퓨터 간에 파일을 안전하게 공유할 수 있도록 해주는 것 같다. 오픈소스 기반이라 통신에 대한 보안에 믿음이 가고 사용자가 사용하기 쉽도록 직관적이어서 파일 관리를 손쉽게 할 수 있다는 장점이 있다. 실제로 사용해보니 진짜 편했다. 1. WinSCP 설치하기 설치도 어렵지 않다...

보통 jsp 작업은 eclipse로 많이 한다고 하는데, 나는 이클립스를 써보지 않았고 평소 vscode를 사용하기에 vscode로 작업환경을 구성했다. 먼저 jsp를 띄워줄 WAS서버가 필요하기에 java와 Tomcat 설치를 마쳐야한다. 해당 내용은 곧 추가할 예정. VSCODE 확장 프로그램 설치 톰캣까지 설치를 마친 후, vscode에서 필요한 확장 프로그램 두가지를 설치해줘야하는데 찾아본 바로는 Debugger for Java, Tomcat for Java를 설치하라고 한다. 그래서 vscode에 검색을 해봤더니 Tomcat for Java는 서비스가 종료된 듯 하다. 그래서 어떻게 해야하는지 찾아보다가 Community Server Connectors를 사용하게 되었다. Tomcat for J..

윈도우에서 리눅스를 사용할 수 있게 만들었더니 이제는 도커다...! 실전 프로젝트를 진행하면서 백엔드 분들이 도커 때문에 엄청 고생하시는걸 봤었는데 그 문제의 도커가 등장했다. 설치부터 해보자! Docker 설치를 알아보기 전에 도커에 대해 간단하게 알아보면 도커는 컨테이너 기반의 오픈소스 가상화 플랫폼이라고 한다. 말이 어렵다..! 여기서 컨테이너라는 것은 다양한 OS에 여러가지 어플리케이션이 올려져 있는 것이라고 볼 수 있다고 하는데 각각의 독립된 컨테이너를 가지게 된다. 그래서 하나의 컨테이너에 문제가 생기더라도 다른 컨테이너에는 영향을 끼치지 않는다고 한다. 많은 사람들이 도커를 쓰는데는 그만한 이유가 있기 때문인데 앞서 말한 것처럼 해킹이나 공격 등에 대해서도 각각의 독립된 컨테이너 형식으로 되..