📚금일 학습 내용 KPT
Vue 과제 마감, React 시작, 배포 에러 해결
📌Keep
- 즐겁게 코딩하기
- 문제점 해결 방안 공유하기
❗️Problem
- 유튜브 멈춰!
- 오전시간 낭비하지 않기
📍Try
- 목표 갱신 빠르게하고 달려가기
🚀React!
많고 많은 사람들이 원하던 리액트가 시작되었다.
오늘은 기초적인 것 위주로 배워서 따로 기술은 하지 않겠지만, 현재 많이 쓰이고 있고 앞으로도 높은 점유율이 예상되는 리액트인 만큼 열심히 학습하려고 한다. 학습하면서 설정한 목표는 다음과 같다.
- 리액트는 초기 입문은 쉽지만 깊게 알기 어렵다고 한다. 내부 동작 원리 생각하면서 학습하기
- 리액트 + TS를 같이 적용하기
- 리액트에서 주로 사용되는 라이브러리에 대한 활용법 숙지하기
💡Vue 과제 짧은 소회
이번에 Vue.js를 사용하면서 과제를 진행했을 때 나름 뿌듯한 점이 많았다. 뷰라는 프레임워크를 어느정도 이해하고 사용했다는 느낌이 많이 들었고 특정 로직을 구상하고 코드를 작성할 때 관련된 내용이 빠르게 머리속에서 떠올랐다. 또한 무엇을 검색해야하는지, 어떤 키워드를 검색해야 내가 원하는 정보가 나오는 지에 대해서 명확하게 단어들이 떠올랐고 관련 검색어들을 주로 검색했더니 과제가 예상보다 정말 빠르게 끝났다.
다만 끝나고 난 후 일부 코드를 수정하는데 라우팅 설정이 굉장히 복잡했다. 사실 단순하게 새로고침만 구현해두었는데 새로고침 뿐만 아니라 주소로 직접 접근하는 경우, 앞으로 가기, 뒤로 가기 등등 케이스가 너무나도 많았다. 지금은 99프로 잘 동작하는데 간헐적으로 오류가 생기는 것을 봐서는 뭔가 더 디테일한 설정이 필요한 것 같다. 나름 최선을 다하긴 했는데 아쉽다.
❗배포 에러...
왜 안되는 것이야
일단 어제 새벽부터 오늘 밤까지 경험한 배포 오류 케이스는 다음과 같다.
- vercel 연결이 끊긴 경우
- package.json, tsconfig.json, vite.config.js의 내용이 서로 중복되거나 요구하는 내용이 없어서 정상동작 하지 않는 경우
- 올바르지 않은 깃허브를 연결한 경우
- 배포를 하니까 로컬 개발환경이 정상적이지 않은 경우
- 프로젝트 시작 순서에 따른 배포 오류.. 등등
아니 대체 왜 안되는거야!!!!! 하고 소리를 쳤던 과거 프로젝트들을 배포할 때가 생각나서 해당 문제를 겪는 사람들을 도와주려고 했다. 그러다보니 저런 케이스들을 다 경험할 수 있었는데, 제각기 해결책은 달랐다.
곰곰히 왜 이런 오류들이 발생할까에 대해서 생각해봤는데, 특히 이번에 vercel 배포 후 오류가 많이 났던 이유는 종속성 때문인 것 같았다.
종속성(dependency)은 하나의 시스템이나 소프트웨어 프로젝트가 다른 시스템, 라이브러리, 또는 모듈과 어떻게 상호작용하는지를 나타내는 개념입니다. 일반적으로, 소프트웨어 개발에서 종속성은 한 요소가 다른 요소에게 의존하는 관계를 의미합니다. from chatGPT
이번 프로젝트와 지난 프로젝트들의 차이라고 하면 바로 개발 환경에서의 vercel의 유무이다. 기존 환경에서는 그냥 개발 후 마지막에 vercel을 연결해서 배포했기에 큰 문제가 없었지만 이번에는 serverless API 기능 사용을 위해 vercel cli를 설치해서 사용했는데, 이 친구가 vite의 실행 환경이랑 충돌을 일으키는 것 같았다.
그래서 Vue 마지막 강의에서 해당 해결책이 나오는데 정말 아쉽게도 우리는 강의에 없는 외적인 문제를 항상 접한다는 문제가 있다. 여러 문제를 해결해주면서 경험한 것은 그랬다. 이전에는 잘 됐는데 배포하니까 안돼요 라는 얘기가 가장 많았고, 대부분 모두 package.json, tsconfig.json, vite.config.js 내용 수정 혹은 프로젝트 폴더 위치와 구성 등의 요소를 일일이 확인하고 체크해가며 해결했다.
그럼에도 불구하고 몇 케이스는 정말 신기했는데 로컬에서 vercel 연결을 하려고 하면 queryA econnrefused api.vercel.com 라는 검색해도 나오지 않는 오류도 있었고 내 컴퓨터에서는 잘 동작하는데 다른 컴퓨터에서는 안되는... 어이없는 상황도 있었고 모든 설정과 구성이 다 제대로 설정되었음에도 이상한데서 에러가 나서 파일을 모두 재설치 해서 해결한 사례도 있었다.
시간이 좀 걸리긴 했지만.. 문제 해결을 다 하기는 했는데, 막상 다 해결하고 나니 왜 나에게는 문제가 없었을까? 라는 의문도 들었다. 아마도 개발 환경을 npm run vercel으로 쭉 가져가서 그런 것이 아닐까 하는 생각이 있는데 이게 올바른 방법이라고는 생각하지 않는다. 분명 강사님 방식처럼 concurrently 를 사용해야하는 경우가 많이 생길텐데 안전하려고 너무 쉬운 방식을 택한 감이 없지않아 있다.
🤝돌돌현
돌돌현 누가 지었죠? 정말 잘 지은듯ㅋㅋㅋ
불행인지 다행인지는 모르겠지만 마침 절묘하게 취소된 매니저님과의 면담이 뜻밖의 만담 시간으로 이어졌다. 마지막 배포 문제였던 예진님의 문제를 해결하고 이후 익준님이랑 셋이서 길게 사담을 나누었다. 다들 비슷한 고민을 하고 있어서 공감이 많이 되었고 그런저런 얘기들을 하다보니 서로 많이 웃기도하고 공감도 하는 그런 시간을 가질 수 있었다. 요즘 스트레스가 많았는데 이런 시간을 가지니 뭔가 꽉 눌려있는 머리가 조금은 풀린 것 같아서 기분이 좋았다.
📖소회
오늘 TIL이 통째로 소회인 것 같아서 생략...
아..? 발표 D-4...
내일도 🔥🔥🔥🔥🔥
TIL 작성 소요시간 약 34분
