Development Log (12) 썸네일형 리스트형 [Development Log] JWT...왜 써야 하는데? JWT... 분명 프로젝트에서 기본적으로 많이 사용했고, 과제들에서 요구사항들도 필수 요구사항이라고 할 수 있을 정도로 실무에서 JWT를 많이 사용하고 있다는 것을 알 수 있었다. 이 글을 쓰는 이유는 아래 블로그를 작성했던 것처럼 JWT에 대해서 왜 써야 하고 어디에 저장을 해야 하고 어떻게 개발을 해야 하는지에 대하여 고민했던 시절이 있었다. https://dego.tistory.com/22 [React/NestJS/TypeScript] 로그인 시 JWT Token 발급 및 인증(Token sessionStorage 저장)일단 만들고 나중에 정리하자.. 고 했지만 결국 정리가 되지 않다 보니까 흐름을 이해하지 못하는 것 같아서 정리하면서 마무리를 해보려고 한다. 회사 다닐 때는 이미 로그인, 회원가입.. [TypeScript/NestJS/TypeORM 0.3] Service와 Repository는 분리하는 것이 맞을까? 팀프로젝트로 진행했던 1차 기업과제 초기 회의에서 Service와 Repository를 분리하는 것이 깔끔하다는 의견이 다수였기 때문에 스켈레톤 프로젝트를 만들 때 의견을 반영하여 분리하여 기본 구조를 만들었었다. 여기서 문제점이 발생했고.. 팀원들의 PR을 확인하는데 DB에 연결하기 위한 Repository 주입 방식이 다양하게 4가지 정도 나왔다.. 그래서 이걸 발견하고 '아.. 어떡하지.. 하나의 프로젝트인데 이건 통일성을 맞춰야될 것 같은데?'라고 생각해서 팀 미팅을 진행하는 시간에 얘기를 해봐야겠다고 생각했다. 팀 미팅 때 얘기 하기 위해서 관련 내용을 총 4가지 방법으로 검색하여 회의록에 작성해 놨다. 말로 설명하는 것보단 글과 참고 사이트를 팀원들이 직접 확인하는 것이 이해가 빠를 것이라고 .. 💎 원티드 프리 온보딩 백엔드 인턴십 💎 - [1차 기업과제] 게시물 공유 API 요구사항 분석(feat.NestJS HttpModule) 원티드 프리 온보딩 백엔드 인턴십의 첫 기업과제는 팀플로 진행이 되었고 소셜 미디어 통합 피드를 만드는 것이었다. 다만, 여기서 아쉬웠던 점은 요구사항에 있던 외부 SNS API URL은 실제 존재하지 않는 가상의 URL이었고 인스타그램에 찾아보니 없긴 했었다.. 하지만! 이후 기술과제에서 외부 API를 사용해 볼 수 있는 경험을 할 수 있다는 말에 위안을 삼았다..😅 우선 멘토님께서 과제가 정리된 노션 안에는 아래의 내용이 있었고 외부 API를 한 번도 사용해보지 못해서 총 4개의 URL을 보고 POST 함수를 4개 만들라는 것인가?로 생각을 해서 멘토님께 여쭤봤었다. 개발 전에 이해가 안 되는 부분이 있다면 작은 것이라도 확실하게 짚고 넘어가야 한다고 생각하기 때문이다. 아래 답변을 받게 되었고 일단.. Delete `␍`eslintprettier/prettier 오류 해결(feat. VSCODE) 🏃🏃🏃 갑자기 VSCODE에서 파일을 클릭했더니 코드 끝쪽에만 전부 빨간 밑줄이 생기면서 Delete `␍`eslintprettier/prettier 오류가 발생하고 있었다. 아니 도대체 왜! 이게 뭔데! Ctrl+A+K로 정렬을 했지만 사라지지 않았다. 그리고 이 글을 쓰는건 첫번째가 아니라 두번째 발생하고 '아.. 이거 저번이랑 똑같은 오류잖아!?' 라고 생각했지만 뭐였는지 또 기억을 하지 못했다. 그래서 정리를 해두려고 한다! 위 이미지처럼 똑같이 발생한다면 당황하지 말고 VSCODE 창의 맨 오른쪽 끝의 아래 부분에 파랑색 부분을 확인하면 된다. 아래 이미지랑 똑같은 부분을 확인해보면 CRLF라고 되어있는데 LF로 되어있어야 저 오류가 나지 않는다! CRLF를 클릭하면 CRLF랑 LF를 선택할 수 있게 .. ERD 생성 및 dbdiagram.io(ERD 생성 사이트) 사용법 과제를 진행하던 중 생성한 테이블을 한눈에 보이게 정리를 하고 싶었고 테이블을 ERD로 만들어서 보여주는 게 깔끔하다고 생각했다. 하지만 직접 그리기에는 손이 안 따라줄 것 같아서 사이트를 찾았고 여러 가지 사이트들 중에 아래 사이트가 디자인적이나 사용 방법이 제일 깔끔했던 것 같다. 다음에 한번 직접 그려보는 것도 해봐야겠다! + ERD 생성 사이트 https://dbdiagram.io/home dbdiagram.io - Database Relationship Diagrams Design Tool dbdiagram.io 사용방법은 위 사이트에 접속하면 바로 보이는 Create your diagram 버튼을 클릭하면 된다. 그리고 나오는 화면이 아래 화면인데 여기서 주황색 박스로 표시한 부분을 클릭하면 .. 변수명과 함수명에 대한 고민(아직도 ing...) 개인 프로젝트를 진행하면서 기능을 일단 구현해 놓고 항상 다시 한번 읽어보고 '과연 이 함수만으로 어떤 것을 요구하는지를 파악할 수 있을까?', '과연 내가 아닌 다른 사람들이 이 함수를 보고 어떤 걸 의미하는지를 알 수 있을까?'에 대한 질문을 했던 것 같다. 그 질문에 대한 답은 항상 '아.. 뭔가 아쉬운데..'였고 하나의 함수명을 여러 번 변경한 적도 있다. 이럴 때마다 정답이 있을까에 대한 생각이 들면서 결국 이것에 대한 해답은 내릴 수 없었고 만약 회사의 팀원으로써 일을 하게 된다면 팀의 규칙이 있을 것이라고 생각을 했다. 나 또한 예전에 회사를 다닐 때 팀 내의 일관되는 규칙이 있었기 때문에 그대로 따라갔기 때문이다. 하지만 현재는 혼자 프로젝트를 하다 보니 변수명 또는 함수명에 대한 고민.. [React/NestJS/TypeScript] 로그인 시 JWT Token 발급 및 인증(Token sessionStorage 저장) 일단 만들고 나중에 정리하자.. 고 했지만 결국 정리가 되지 않다 보니까 흐름을 이해하지 못하는 것 같아서 정리하면서 마무리를 해보려고 한다. 회사 다닐 때는 이미 로그인, 회원가입은 전부 구현되어 있었다.. 그렇다.. 그래서 JWT? 토큰? 몰라도 API를 구현할 수 있고 로그인이 되어있는 상태에서 포스트맨을 사용하려면 Header에 Authorization를 추가해서 로그인 시 받은 토큰을 넣어주면서 사용했었다! 개인 프로젝트에서 사용하면서 좀 오랜 시간 막혔던 부분은 토큰 발급 완료! 그럼 이 토큰을 어디에 넣어서 전달해 주고 인증하지? 였던 것 같다. 먼저 궁금증이 생겼던 부분들을 정리하고 사용하는 방법을 정리할 예정이다. JWT란?처음에는 JWT가 뭔지도 몰랐었는데 당연히 약자가 뭔지는 알아야 .. choco 설치와 mkcert 설치 후 React 적용(with. React + TypeScript) mkcert를 설치해야 하는 이유? 개인 프로젝트 진행 중에 쿠키를 사용해야 하는데 https만 사용 가능한 옵션을 사용했기 때문에 계속 쿠키가 저장이 안 되고 있다는 생각이 들었다. 그래서 검색의 방향을 바꿔서 https 설정을 먼저 진행하고 다시 쿠키 저장을 테스트해보려고 한다. 이걸로 며칠을 붙잡고 있는지 모르겠다..😅 다만 mkcert를 설치하기 위해서 choco를 설치해야 했기 때문에 한 번에 정리하려고 한다. 다들 brew 맥용으로 설치하는 방법이 많았지만 나는 현재 윈도용이기 때문에 choco를 설치해야 했고 설치는 금방 했던 것 같다. 만약 이 글을 보고 따라 하시려고 하는 분들은 용기를 가지고 그대로 따라 하면 10분 만에 완료할 수 있다! 1. 윈도우 검색창에서 Windows Power.. 이전 1 2 다음
