개발

[회고] 종이의 집: 공동경제구역 등장인물 성격테스트 개인회고

종이의 집: 공동경제구역의 공개일에 맞추어 프로젝트를 진행했다. 스페인 드라마 종이의 집을 한국 버전으로 리메이크 한 넷플릭스 드라마이다. 개성있는 캐릭터들이 등장하고, 공개 전부터 반응이 뜨거웠기 때문에 캐릭터 성격을 분석하고 자신과 맞는 캐릭터를 보여주는 사이트를 만들게 되었다. 해당 사이트는 아래 링크를 통해 살펴볼 수 있다. 종이의 집 (moneyheist.co.kr) 종이의 집 moneyheist.co.kr No-Je/Money-Heist: “통일을 앞둔 미래의 한반도. '교수'라 불리는 수수께끼의 인물이 남과 북의 노련한 도둑들을 모아 희대의 인질극을 꾸민다. 이 작전의 목표는 갓 찍어낸 지폐를 훔쳐 탈출하는 것.” (github.com) GitHub - No-Je/Money-Heist: “통..

React에 TypeScript 사용하는 방법

리액트와 TS를 함께 사용하는 방법을 소개한다. 방법에는 새롭게 프로젝트를 시작하는 방법과 기존 프로젝트에 TS를 적용하는 방법이 있다. 1. React + TypeScript로 새로운 프로젝트 시작하기 우선, 프로젝트를 만들고 싶은 디렉토리에서 터미널을 연다. 이후 npx create-react-app 프로젝트이름 --template typescript을 입력하면 된다. 이 방법을 이용하면 기본적으로 React에 TS를 이용할 수 있으며 주의할 점은 TS의 보호를 받기 때문에 Type에 신경써야 한다는 것이다. 또한, TS의 보호를 받고 싶다면 새로운 파일을 만들 때 확장자를 .tsx로 설정해야 한다. 2. 기존 프로젝트에 TypeScript 적용하기 기존 프로젝트에 TS를 적용하고 싶다면 npm in..

npm을 이용해서 gh-pages 배포하기

gh-pages로 호스팅을 하는 방법에는 여러가지가 있다. GitHub Desktop을 사용해도 되고 직접 gh-pages 브랜치를 만들어도 된다. 물론, 모듈을 이용해 VSCode에서 직접 올리는 방법도 있다. npm i gh-pages 우선 위의 명령어를 통해 배포하고자 하는 프로젝트에 gh-pages 모듈을 설치한다. 설치된 후 npm run build 명령어를 입력하면 작성한 코드들이 build라는 폴더 안에 압축되어 빌드되는 것을 확인할 수 있다. 추가적으로 package.json의 하단에 아래 코드를 추가한다 "homepage": "https://사용자이름.github.io/레포지토리이름" 예시는 아래와 같다. { "name": "어쩌구", "version": "0.1.0", "private"..

깃허브(GitHub) 로컬 폴더 레포지토리 올리기

개발을 하다보면 로컬에서 작업한 결과물을 깃허브에 올리고 싶은 경우가 있다. 1️⃣ 새로운 레포지토리를 하나 만든다 2️⃣ 생성한 레포지토리의 주소를 복사한다 3️⃣ 로컬에서 작업하던 폴더에서 git init을 입력한다 git init 4️⃣ git add . 을 통해 올리고 싶은 코드들을 스테이징 한다 git add . // .은 모든 파일을 의미. 특정 파일을 원한다면 특정 파일의 이름을 작성 (4.1. git status 명령어를 통해 변경 사항들에 대한 내용을 확인해본다) 생략해도 문제는 없지만 git add .가 작동했는지 확인 및 현재 브랜치 이름을 확인하기 위한 단계 git status 5️⃣ git commit -m "커밋 메시지"를 작성해서 커밋한다 Gitmoji를 사용하는 경우에는 gi..