본문 바로가기

All

(36)
choco 설치와 mkcert 설치 후 React 적용(with. React + TypeScript) mkcert를 설치해야 하는 이유? 개인 프로젝트 진행 중에 쿠키를 사용해야 하는데 https만 사용 가능한 옵션을 사용했기 때문에 계속 쿠키가 저장이 안 되고 있다는 생각이 들었다. 그래서 검색의 방향을 바꿔서 https 설정을 먼저 진행하고 다시 쿠키 저장을 테스트해보려고 한다. 이걸로 며칠을 붙잡고 있는지 모르겠다..😅 다만 mkcert를 설치하기 위해서 choco를 설치해야 했기 때문에 한 번에 정리하려고 한다. 다들 brew 맥용으로 설치하는 방법이 많았지만 나는 현재 윈도용이기 때문에 choco를 설치해야 했고 설치는 금방 했던 것 같다. 만약 이 글을 보고 따라 하시려고 하는 분들은 용기를 가지고 그대로 따라 하면 10분 만에 완료할 수 있다! 1. 윈도우 검색창에서 Windows Power..
[React] Unexpected end of JSON input 오류 해결 🏃🏃🏃 회원가입 api 완성시키고 React에 연결시키는데 Unexpected end of JSON input가 발생했다.. JSON으로 파싱 하려고 했지만 해당 문자열이 JSON 형식에 맞지 않는다는 오류였다. 일단 의심가는 부분은 아래 코드 부분이었는데 해당 부분이 서버에서 가져오는 데이터를 반환하는 곳이기 때문이다. .then((res) => res.json()) 근데 프론트에서 문제는 없어 보였고.. 해당 부분을 지우면 제대로 돌아갔지만 그건 아니잖아..! 그래서 검색하다가 회원가입 api의 Service 파일을 다시 보았고 웬걸.. 리턴 값을 넣어주지 않았었다.. 하하.. 회원가입 api를 호출하고리턴해서 받아오는 데이터가 없기 때문에 오류가 나는 거였다. Controller, Service 전부 리턴..
[React] react-hook-form 적용해보자!(with. TypeScript) 사실 난 이번 개인 프로젝트 때문에 React를 처음 써봤다..! 백엔드 작업만 해봤고, 이번 프로젝트 할 때도 프론트는 구현을 어떻게 해야 할까의 고민이 많았지만.. 뭐 어떡해?! 찾아서 만들어봐야지라는 생각으로 시작하게 되었다. 그래서 필요한 부분은 찾아서 이해하려고 하고 부족하면 강의를 찾아서 듣는 방법으로 진행하고 있다. 물론 백엔드보다 시간이 더 걸리는 게 함정..😳 그래도 메인이랑 로그인, 회원가입 폼까진 만들어서 회원가입 폼에서 입력값 받아서 넘기기 위해 구글로 엄청 검색을 해봤다. 기본적으로 useState를 사용해서 값을 저장하고 넘기는 글들이 제일 먼저 눈에 들어와서 적용해보고 있었는데.. 항목이 몇 개 없다고 해도 너무 코드가 길어지는 게 보기 좋지 않아 보였다. 이게 최선인가!라는 ..
[Git] warning: adding embedded git repository: client 오류 해결 🏃🏃🏃 이제 프로젝트를 진행하면서 매일매일 작업한 거를 깃에 푸시하기 위해서 깃과 연결한 다음 git add . 를 했더니 warning: adding embedded git repository: client 라는 오류가 났었다. 항상 잘되던 깃이.. 갑자기 처음 보는 에러가 떠서 너무 당황스러웠다. 구글에는 해결이 있겠지라는 생각으로 검색을 했더니 다른 폴더에 .git 파일이 존재한다는 에러라고 파악이 되었다. 왜냐면 현재 projectA 폴더 > client 폴더와 server 폴더가 존재하는데 projectA , client, server 폴더 전부에 .git 파일이 있는 것 같았다..😅 (+ 깃에 projectA를 연결했고 client, server 폴더 전부 올릴려고 했습니다.) 아래 방법으로 따라한다..
[Development Log] TypeScript에서 http-proxy-middleware 사용법 해당 글은 아래 React + NestJS 연동하는 방법 글에서 발생했던 Proxy 관련 내용 입니다.https://dego.tistory.com/16 React + NestJS 연동하는 방법(with. TypeScript)난 또다시 개인 프로젝트를 만들어 보려고 한다. 개인 프로젝트를 만든 지 1년 반? 이 되었는데 새로운 아이디어로, 새로운 프레임워크 + 언어로 시작해 보자! 실무에서 백엔드 개발자로 api만 만dego.tistory.com 난 이걸로 정말 많은 시간을 보낸 것 같은 느낌이지만 지금은 해결되어서 내적 외침과 함께 글을 작성하고 있다. 😄Proxy를 설정해줘야 했던 이유는 위 글에서 자세히 써놨기 때문에 여기선 생략하겠다. 결론은 Proxy를 사용해야 한다! 1. 터미널에서 아래 미들..
[Development Log] React + NestJS 연동하는 방법(with. TypeScript) 난 또다시 개인 프로젝트를 만들어 보려고 한다. 개인 프로젝트를 만든 지 1년 반? 이 되었는데 새로운 아이디어로, 새로운 프레임워크 + 언어로 시작해 보자!실무에서 백엔드 개발자로 api만 만들어왔었고 프론트, 백 프로젝트가 분리되어 있어서 사실 프론트 코드를 접하기도 어려웠다. 그래서 처음부터 영상과 모든 검색을 총 동원해서 만들어보려고 한다. 사실 걱정 한가득인데 내가 쓸 거를 생각하니까 설레기도 하면서 막막하면서도 얼른 완성하고 싶으면서도 한숨부터 나오지만 시작해 보자! (서론이 너무 길었다..😅) 1. 프로젝트 구조사실 이것부터 어려웠다.. 하나의 프로젝트 안에 NestJS 프레임워크만 설치해서 사용했었는데 프론트 코드는 어디에 배치를 해야 되지?라는 의문점부터 시작해서 모든 구글링과 영상을 ..
[TypeScript] Interface가 런타임에는 없다고? (feat. 꼬리에 꼬리를 무는 궁금증..) 인프런 조현영 님의 NestJS 강의를 듣던 도중.. 해당 강의에 대한 질문들을 둘러보다가 아래 질문과 답변을 보게 되었다. 인프런 수강생 Q. "타입스크립트에서 DTO 생성 시 클래스, 인터페이스 둘 중에 어떤 것으로 만들어야 하나요?" 조현영 님 A. "가장 큰 차이는 interface는 런타임에 없고, class는 런타임에 있는 것입니다. 런타임에 있어서 런타임에도 타입체크를 수행하길 원하면 class로 선언하면 되고, 런타임에는 없길 원하면 interface를 쓰시면 됩니다." 가장 큰 차이는 interface는 런타임에 없고, class는 런타임에 있는 것입니다. 런타임에 있어서 런타임에도 타입체크를 수행하길 원하면 class로 선언하면 되고, 런타임에는 없길 원하면 interface를 쓰시면 ..
[Dego Log] JAVA(SpringBoot) 에서 TypeScript(NestJS)로 살아남기 위한 기록 - 1 처음 개발을 접했을 당시 학원을 다녔기 때문에 기본적으로 배우게 되는 언어인 JAVA로 시작을 하게 되었다.그렇게 첫 회사에 JAVA & Spring Boot 기술 스택인 플랫폼 회사로 입사한 지 이제 6개월 차가 되어간다.난 아직 1개월 차 같은 느낌인데 벌써 6개월이 되어간다니.. 입사하고 1개월 차가 안 되었을 때 새로운 CTO 분이 오시게 되면서 화상으로 인터뷰를 할 때 기존에 운영 중인 플랫폼들을새로운 언어로 전부 개편한다고 전달을 받았고 CTO 분께서 혹시 새로운 언어에 대한 거부감은 없는지에 대해 물어봤었다.그때 당시, 나는 JAVA도 완벽하게 배운 것 같지 않았기 때문에 새로운 언어여도 처음부터 제대로 배우고 싶다는 욕심이 있어서JAVA로 꼭 개발은 하지 않아도 된다고 말했고 걱정은 되지만..