프론트엔드 개발을 할 때 TypeScript는 이제 선택이 아닌 필수로 자리 잡고 있다. 코드의 안전성과 가독성을 높여줄 뿐만 아니라, 협업 시 발생할 수 있는 오류를 줄여주는 강력한 도구이기 때문이다.  또한 협업 환경에서는 EsLint를 사용하여 코드 규칙을 강제하는 경우가 많다. 물론, 개인 프로젝트에서도 코드의 일관성을 유지하기 위해서 EsLint를 사용하는 경우도 많다.  이러한 환경에서 개발 도중에는 EsLint와 TypeScript가 오류를 알려주기 때문에 바로 문제를 인지하고 수정할 수 있다. 하지만 코드가 GitHub과 같은 저장소에 올라가는 단계에서는 검사 과정을 거치지 않고 코드가 반영될 위험이 있다. 이렇게 되면 문제가 있는 코드가 저장소에 포함될 가능성이 생기며, 이는 협업 시 큰..

Mafia Game - 역대글▶ Node.js Docker로 배포하기▶ Next.js Docker로 배포하기▶ Github Actions으로 배포 자동화 ▶ 첫 번째 토이 프로젝트를 완료하고 지금까지 Nginx와 Next.js, Node.js 서버를 Docker를 통해서 배포하는 방법을 알아봤다. 이번에는 Github Actions를 사용해서 main 브랜치에 머지 되면 Docker를 통해 자동으로 배포되도록 설정하는 작업을 진행하려고 한다.  이 글에서는 Dockjer에 대한 설정을 추가로 다루지 않고, GitHub Actions와 Linux 환경 설정에 초점을 맞추고 있습니다. Docker 설정이 필요하다면, Node.js, Next.js 배포하기를 먼저 참고해 주시길 바랍니다.  Linux 설정Gi..

1. 초코렛티 설치 윈도우에서 초코렛티는 패키지를 설치하고 관리할 수 있는 패키지 매니저다. Install을 클릭해 설치 페이지로 이동한다. 초코렛티는 powershell, 즉 powershell의 관리자 권한으로 설치를 해야 한다. 명령어를 복사하고 powershell를 관리자 모드로 킨다. 설치를 하고 cmd에서 choco -v 명령어를 실행했을 때 버전이 나오면 정상적으로 설치가 완료된 것이다. 2. node 설치 node 설치 부분은 이미 React 개발 환경에서 진행 하였기 때문에 참고하세요. https://bum-developer.tistory.com/entry/%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%..

1. Nodejs와 VScode 에디터를 설치한다. 해당 과정은 React 세팅을 통해서 이미 진행한 과정이기 때문에 패스 2. VScode 에디터에서 패키지를 설치한다. npm install -g typescript 3. 작업할 폴더를 만들고 tsconfig.json 파일을 만들어준다. { "compilerOptions": { "target": "es5", "module": "commonjs" } } 4. js 파일로 변환 터미널창에서 tsc -w를 입력하면 ts 파일을 js 파일로 변환해준다.

1. 도커 설치 구글에서 docker를 검색하고, Get Started with Docker를 클릭! 그 후, Docker Desktop에서 Windows를 다운로드! Ok를 눌러 설치를 완료하면 끝!

0. 시작하면서 컴퓨터를 포맷하고 기존에 사용하던 프로그램들을 새롭게 설치하는 작업을 하면서, 이번에 React 개발환경을 구성하는 디테일한 방법을 정리하고자 한다! 설치하는 파일은 VS Code, Node.js, yarn, Git 을 설치할 것이다. Mac과 Window가 조금씩은 다를 수 있는데, 이번엔 Window 컴퓨터를 포맷했으니 Window용 세팅이다! 다음에 사용하는 Mac을 포맷할 경우가 있다면, 그때 또 Mac용을 작성하겠다! 1. VS Code 설치 구글에 VS Code를 검색하면 위와 같이 나올것이며, Download를 클릭하자! 우린 Window 컴퓨터를 사용하니깐 Window 용을 다운받자! 설치가 완료되고 실행하면 위와같은 화면이 나온다. 당연히 동의하고 다음을 쭉 누른다! 위 ..