본문 바로가기

TIL

 (100)
최종 프로젝트 시작 어제 최종 전의 마지막 프로젝트 발표를 끝내고 이제 찐막 프로젝트 팀 편성이 되었다.한번도 같이 해본적 없는 팀원분들이지만 다들 활달하시고 느낌이 좋았다.앞으로 한달동안 진행할 프로젝트이기 때문에 주제 선정과 기획에 있어 이전에 하던 프로젝트 보다 훨씬 열띠게 의견을 공유하고 투표하고,, 반복하다가 스터디 그룹에 특화된 툴을 제공하는 서비스 앱으로 주제가 정해졌다. 주제에 맞춰 어떤 기능들이 들어가야할 지와 기한에 맞춰 구현을 끝낼 수 있는 필수기능, 시간이 된다면 추가적으로 도전해볼만한 기능들을 나누었다. 그리고 각자 맡아서 구현할 기능들을 큼직하게 분배하였는데 이 부분은 좀 더 상세하게 논의해봐야한다.이전에는 디자인 구상까지 직접 진행하였는데 이번 최종에서는 디자이너 두분이 같이 진행하게되었다.확실히..
git stash git stashModified이면서 Tracked 상태인 파일과 Staging Area에 있는 파일들을 보관해두는 장소아직 끝내지 않은 수정사항을 스택에 잠시 저장했다가 나중에 다시 적용할 수 있음(브랜치가 달라져도 가능)  ❓ 사용하는 이유- 작업중 갑작스럽게 다른 작업을 진행해야 할 때- 아직 커밋하기엔 이른 경우- 다른 브랜치로 체크아웃할 때 변경사항을 유지하고 싶은 경우(나는 체크아웃 할 때 이 메세지를 가장 많이 보는 듯하다.)  💻 명령어 사용해보기파일을 하나 추가하고, 수정한 파일들을 git add 로 Staging Area 에 추가하였다.  git stashgit stash 명령어를 입력하니 워킹디렉토리가 깨끗해졌다.이제 원하는 브랜치로 문제없이 이동할 수 있다. git stash li..
Vercel 배포 오류 Error: Command "yarn run build" exited with 1 🚨 프로젝트를 Vercel에 배포하는 과정에서 에러가 발생했다.에러 로그들을 읽어보며 보이는 자잘한 문제들을 하나씩 해결했는데 마지막 로그인 "Error: Command "yarn run build" exited with 1" 는 무슨 오류인지 이해하기 어려웠고,구글링을 해본 결과 종속성, 빌드 스크립트 오류 등 여러가지 이유가 있는 것 같았다.  ✅ 해결방법tsc --noEmit 명령어를 입력하여 타입스크립트 타입을 체크해보았고, 매개변수가 사용되지 않는 빈 함수가 props로 내려지는 것을 발견할 수 있었다.해당 부분을 해결하고 나니 더이상 추가적인 빌드에러는 발생하지 않았고 정상적으로 배포가 완료되는 것을 확인할 수 있었다. npx tsc --noEmit 명령어 실행 테스트handleDelete ..
github 잘못올라간 파일 커밋 히스토리 삭제하기 발생 배경팀 프로젝트에서 사용 중인 supabase key 값이 포함된 파일이 커밋, 푸시가 된 상태에서 pr, merge가 완료 된 불상사가 발생했다.merge가 된 파일을 각자 local 기능브랜치에 pull을 받으면서 각 브랜치에도 merge된 commit 기록이 생겼고,, 뒤늦게 발견했다.  🚨문제PR은 Revert되어 해결했으나 각자 개인브랜치에 로컬에서 머지한 커밋 기록이 생겼고 해당 커밋에서 문제의 파일을 확인할 수 있었다.  ❓원인이번 프로젝트에서는 pr 규칙을 크게 설정하진 않고 화면공유를 해서 개인이 pr을 올리면 직접 merge 승인까지 했었다보니, 서로의 코드를 꼼꼼하게 살펴보지 않았던 것이 원인이었던 것 같다.  ✅ 해결방법모든 커밋에서 특정 파일을 제거하고 커밋을 재작성하는 명..
supabase response data type supabase 테이블의 데이터를 가져오는 로직에서 구조분해할당한 data 의 타입을 지정해주었는데 Postgrest관련 오류가 발생했다. data를 꺼내지 않고 response 로 값을 받아서 콘솔에 출력해보고, 데이터를 가져올 테이블 명을 다르게 적어서 에러가 날 경우의 response 도 받아보았다. ❓ 원인구조분해할당을 해서 data 만 가져올 경우 에러에 대한 처리가 되어있지 않은데다가, 에러에 대한 타입이 선언한 Article(data 형태 타입) 타입에 없어서 오류를 보이고 있었다. ✅ 해결response로 값을 받아서 에러처리를 먼저 해준 뒤 사용할 데이터 값에 Article 타입을 지정해주었다.  response의 타입 PostgrestSingleResponseany[]> response..
TypeError: Cannot read properties of undefined (reading 'Geocoder') nextjs에서 주소를 좌표로 변환하기 위해 지오코더 서비스를 사용하려고 하였고, Geocoder를 찾을 수 없다는 오류가 발생했다.script 에 &libraries=services 는 이미 추가한 상태였고, 어디 부분이 문제인지 찾기 어려웠다.* libraries=services 장소 검색과 주소-좌표 변환을 할수있는 services 라이브러리(src url sdk 뒤에 사용할 라이브러리를 불러 올 수 있음)* strategy : 웹 성능 최적화를 도와줄 Next.js의 strategy 속성, beforeInteractive로 값을 넣어주면 어떠한 코드보다도 먼저 script를 로드하게 도와줌 (기본값은 afterInteractive로 script가 빠르게 로딩 되지만 다른 페이지에 있는 코드가 먼저..
ERD (Entity Relationship Diagram) 이전에는 ERD 를 대충 데이터 구조를 그려놓은 것? 이라고만 이해하고 완성된 것들만 접했었는데 플러스 주차 팀 프로젝트가 시작되고 나서 처음으로 제대로 찾아보고 팀원과 함께 만들며 공부하게 되었다. ERD DIAGRAM : Entity Relationship Diagram의 약자로, Entity (개체)와 Relationship (관계)를 중점적으로 표시하는 데이터베이스 구조를 한 눈에 알아보기 위해 그려놓는 다이어그램이다.  - API 명세로 어떤 기능을 구현해야겠다고 감이 잡히면 이제 유저들의 데이터를 저장할 데이터베이스 스키마를 설계해야하고 이는 ERD로 표현되어야 한다.- ERD를 사용하면 팀원들이 서비스의 데이터베이스의 구조를 쉽게 이해하고 더 효과적인 데이터베이스 설계를 할 수 있다.  ■ ..
type 과 interface 의 차이점 타입과 인터페이스는 매우 유사해서, 둘 중 하나를 자유롭게 선택하여 사용할 수 있다.인터페이스 대부분의 기능은 타입에도 동일하게 사용 가능하다. 가장 큰 차이점으론 타입은 새 property를 추가하기 위해 다시 선언 될 수 없지만, 인터페이스는 가능하다. 확장 방법의 차이 1 인터페이스의 상속Bear 인터페이스를 선언하고, extends Animal 으로 상속받아 확장한다.interface Animal { name: string}interface Bear extends Animal { honey: boolean}const bear = getBear()bear.namebear.honey  타입의 상속Animal 타입 생성 후 새 타입을 만들고 & 연산자로 교집합을 통해 타입을 확장한다.type Ani..

티스토리툴바