본문 바로가기

전체 글

 (135)
주특기 토이프로젝트 회고 주특기 토이프로젝트 발표가 끝났다. 늘 그렇지만 결과물은 항상 아쉽다. 기획 단계부터 배포까지 되돌아보려고 한다. 기획 단계에 많은 리소스를 투자해야 좋은 프로젝트를 만들 수 있다고 한다. 이번 프로젝트에서는 그 부분이 조금 아쉽다. 1.API 명세 초기에 API명세를 탄탄하게 작성해 놓지 못한 것이 아쉽다. 역할을 나누고 코드를 작성하다보니 변경되는 부분이 있었는데 API 명세서에 업데이트가 되지 않아 중간에 소통 오류가 발생했다. 그것은 곧 리소스 낭비와 직결되기 때문에 초기에 와이어프레임을 최대한 상세하고 정확하게 작성하고 그에 따라 API 명세서를 자세하게 만들어두어야 리소스 낭비를 최소화할 수 있을 것 같다. 그리고 만약 중간에 수정이 필요하다면 동기화를 신속하고 정확하게 해야한다. 2. gro..
npm run build (feat. CORS 에러 패배) 어제 오전부터 이어진 CORS 에러와의 싸움은 결국 패배로 끝이났다..... 11일 목요일 저녁엔 완성된 프로젝트 발표를 해야해서 시간이 충분하지 않은 상황이었다. 그래서 궁여지책으로 나온 방법이 FE 파일과 BE 파일을 합쳐서 로컬 환경에서 테스트하며 작업을 하는 것이다. 그렇게 되면 배포도 FE와 BE를 따로 하지 않고 한꺼번에 해야할 것이다. 아무튼 파일을 효과적으로 결합하기 위해 npm에 있는 리액트 배포 버전을 만드는 명령어를 사용했다. npm run build 터미널에서 위의 명령어를 사용하면 프로젝트 폴더에 build 폴더가 생성되고 그 안에 리액트 배포를 위해 필요한 파일들이 들어가 있는 것이 확인된다. 쉽게말해 배포를 위해 필요한 파일들을 build 폴더에 정리를 해주고 소스코드 공백들을..
CORS를 만나다(feat. 404 NOT FOUND) 지난 주말 WIL 키워드가 CORS였는데 마치 짠 것처럼 오늘 관련 이슈가 터졌다. 에러 메세지 // error access to XMLHttpRequest at 'http://43.201.106.25/api/signup' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS 개념 정리 WIL_CORS CORS가 무엇인가? 이번주 WIL의 키워드가 CORS이다. 처음들어봐서 ..
dotenv (환경변수 관리) 깃허브에 프로젝트를 업로드할 때 .gitignore 파일에 업로드를 제외할 파일 목록을 리스트업하여 관리한다. 하지만 그렇게해도 코드들에 노출되는 개인 정보들이 있을 수 있다. 예를 들면 Token을 검증하는데 사용하는 secret_key라던지 사용중인 DB의 엔드포인트, 유저, 패스워드 같은 정보들 말이다. 지금까지는 아무 생각없이 업로드를 해왔는데 노출이 되면 자칫 치명적인 타격을 입을 수 있다. 그래서 dotenv라는 라이브러리를 사용한다. 오늘은 dotenv 사용법을 정리해보려고 한다. dotenv 설치 npm을 이용하여 dotenv를 설치한다. $ npm i dotenv .env 파일 생성 dotenv 설치 후 별도 설정을 하지 않으면 프로젝트의 루트 디렉토리에 위치한 .env 파일로 부터 환경..
WIL_CORS CORS가 무엇인가? 이번주 WIL의 키워드가 CORS이다. 처음들어봐서 일단 GPT에게 개념을 물어봤더니 아래와 같은 답변을 받았다. CORS는 Cross-Origin Resource Sharing의 약자로 웹 브라우저에서 실행되는 자바스크립트가 다른 도메인에서 호스팅되는 리소스에 접근하는 것을 제한하는 보안 기능이다. 기본적으로 브라우저는 같은 도메인에서 실행되는 자바스크립트 코드만이 다른 도메인에서 호스팅되는 리소스 (예를 들어 이미지, 폰트, 스크립트, API 엔드포인드 등)에 접근할 수 있다. 하지만 CORS를 허용하는 서버는 다른 도메인에서 실행되는 자바스크립트 코드도 해당 리소스에 접근할 수 있도록 허용한다. CORS를 구현하면, 서버는 HTTP 응답 헤더를 사용하여 브라우저가 해당 도메인에..
Access와 Refresh Token 주특기 토이 프로젝트 이틀째다 FE와 BE 첫 협업으로 일주일이라는 시간 동안 하나의 프로젝트를 완성해야하다보니 걱정이 되었는데 BE 개발 스코프를 인원에 비해 작게 잡은 탓인지 생각보다 구현이 빨리 되었다. 물론 FE 구현이 완료되었을 때 함께 테스트를 해보면 어떤 에러들이 발생할지 모르겠지만....ㄷㄷ 아무튼 FE 작업 완료를 기다리는 언어 학습을 해볼까 하다가 프로젝트에 추가할 수 있는 기능이 없을까 고민하다가 주특기 학습 주차에 배웠던 access, refresh 토큰이 떠올랐다. 그때는 그냥 그런 것이 있구나 하고 훑고 지나갔는데 이번 기회에 다시 공부하여 프로젝트에 적용해보면 좋을 것 같다. 그래서 천천히 정리부터 시작해보겠다. 왜 토큰을 둘로 나누었나? 기존에 하나의 토큰을 사용한 인증 방식..
git으로 commit하고 push하자 전에 git 사용법을 세션을 통해 배우긴 했는데 뭔가 복잡해서 vscode에서 github 연동해서 사용하다가 본격적인 협업 프로젝트에 접어들면서 이대론 안되겠다는 생각이 들었다. 그래서 터미널을 통해 git을 조작하는 법을 복습하였다. git 조작 기초 git을 사용해보자 1. github 회원가입 2. repository 생성 3. git 다운로드 4. git bash 실행 5. 사용자 등록 $ git config --global user.name "my name" 6. 사용자 이메일 등록 $ git config --global user.email "my email" 7. 잘 등록되었는지 확인 (use redjun89.tistory.com 이번 토이 프로젝트 repository는 다른 팀원이 생성하여..
git을 사용해보자 1. github 회원가입 2. repository 생성 3. git 다운로드 4. git bash 실행 5. 사용자 등록 $ git config --global user.name "my name" 6. 사용자 이메일 등록 $ git config --global user.email "my email" 7. 잘 등록되었는지 확인 (user.name과 user.email에 입력한 대로 출력되면 성공!) $ git config --list 8. 작업중인 파일 깃 초기화 $ git init 9. 깃허브에 올릴 파일 선택 $ git add . // .은 모든 파일 $ git add index.js // index.js 파일만 선택 10. 커밋하기 $ git commit -m "커밋 메세지" 11. 깃허브와 연결하..

티스토리툴바