MOLLY

1. Describing the UI  |  Your first component2. Describing the UI  |  Importing and exporting components3. 금일 소감  1. Describing the UI  |  Your first component0. TL;DR컴포넌트: UI를 구성하는 코드 단위, 노드: DOM의 기본 구성 요소[React Component vs. DOM Node] Component: ‘재사용 가능’한 UI 조각(’함수’ or 클래스 형태), Node: ‘HTML’ 요소(HTML 덩어리 정도로 이해해도 좋을 듯)즉, 컴포넌트와 노드의 차이는 태그명 맨 앞 글자의 대소문자 차이! 컴포넌트는 대문자, 노드는 소문자로 시작한다. 1. React Compo..

1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')2. This3. Binding(바인딩)4. 고차함수(Higher-Order Function)5. Map과 Set  개념과 차이6. API와 메서드의 차이7. Data Type | 기본형, 참조형8. 얕은 복사(Shallow Copy)9. 유사배열객체(Array-like Object)  1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')  위와 같은 에러가 뜨길래 '엥? 토글 세팅이 뭐가 문제지?' 싶어서 토글 관련 코드를 모두 알아봤다.    위처럼 정말 샅샅이 찾아봤는데..

1. [회고] 4개월 부트캠프, 어떤 일이 있었나?2. [계획] 앞으로는 어떻게 할 것인가3. User Test 전, SPL4. 댓글 작성 시, 실시간 반영 안 됨5. 헷갈리거나 몰랐던 내용 정리(1) 스키마(schema)(2) 클래스와 인스턴스(3) JWT (JSON Web Token)  1. [회고] 4개월 부트캠프, 어떤 일이 있었나?  오늘은 내 얘기를 좀 해볼까 한다. 만으로 4개월 동안 진행된 부트캠프가 종료되며 드디어 끝마쳤다는 시원함과 함께 내가 원하는, 진정 목표로 하는 회사에 입사하기 위해 어떻게 해야 하는가? 에 대한 약간의 불안감이 급습했다. 이미 부트캠프 1개월차부터 지금의 상황을 예상하였고 이를 위해 최종 때 혼자서 개인 프로젝트를 선택한 이유도 있다(최종 프로젝트로 개인 프로젝..

1. 우수 TIL로 선정되었다! 2. 네이버 Map API 사용하다가 카카오 Map API로 전향하여 공부 장소에 따른 Marker 구현 3. POST https://njltrjqccgmfpfdlyldi.supabase.co/rest/v1/user_profiles?on_conflict=email 409 (Conflict) ➡️ if문으로 프로필이 존재하지 않을 경우도 추가해 해결 4. 카테고리 클릭 시, URL에 장소 데이터 저장 (동적 Routing 없이 구현) 5. 카테고리를 클릭했을 때, 바로 장소 정보가 나타나지 않음 ➡️ Loading State를 만들어, 동기적으로 작동하게 해서 해결 6. 카테고리 클릭 시, 깜빡이며 정보 불러옴 & 모든 데이터 불러올 때도 있음 ➡️ 코드를 동기..

1. Warning: Each child in a list should have a unique "key" prop. ➡️ 부모 컴포넌트의 map 돌리는 곳 최상위 태그에서 key prop 전달해 해결 2. [다크모드 Error] Warning: Extra attributes from the server: class,style ➡️ 현재 마운트 상태를 확인하는 State 추가해 해결 3. Encountered two children with the same key, `faded`. ➡️ `faded` key 속성을 제거해 해결 4. commentsData 객체를 Comment[] 타입으로 강제 변환하려 발생한 Error ➡️ runtime에 데이터를 검증하는 코드 추가해 해결 5. GET h..

1. pathname과 split을 이용해 URL의 UUID 추출해 상세정보 가져옴 2. 작성된 댓글 데이터가 안 가져와짐 ➡️ 장소 정보를 가져오는 useEffect 안에 댓글 정보 받아오는 코드 넣음 3. 프로필 이미지와 닉네임만 수정이 안 됨 ➡️ Supabase 테이블 외래 key 참조 해제해 해결 4. Error: Hydration failed because the initial UI does not match what was rendered on the server. 5. 금일 소감 1. pathname과 split을 이용해 URL의 UUID 추출해 상세정보 가져옴 와 대체 이것 때문에 몇 시간을 삽질한 건지... 메인 페이지에서 공부 장소를 눌렀을 때, 동적 Routing을 통해..

1."The data that you are trying to import is incompatible with your table structure" 2. PR 템플릿 생성 및 첫 PR 등록 3. Next-UI Select: onChange가 안 돼서 Next-UI 공식 문서 참고해 해결 4. string Type에 배열 할당하면 Error 뜸 5. 로컬 브랜치명 변경 6. 데이터 필터 처리가 안 됨 ➡️ Supabase에서 Filter 처리해서 해결! 7. '매핑(mapping)'이란? 8. 금일 소감 1."The data that you are trying to import is incompatible with your table structure" "The data that you..

오랜만의 블로그 포스팅이다. 이번 주까지 너무 많은 일이 있어서 블로그 쓸 여력이 안 됐다. 이제부터 다시 꾸준하게 작성해야겠다. 오늘은 직전 심화 프로젝트 관련 내용과 배우긴 하였으나 정확히 무슨 의미인지 뇌에 남지 않은 내용 위주로 담으려고 한다. 1.로그인, 회원가입 페이지 | 비밀번호 입력할 때마다 UI 크기 변경됨 2. 이메일, 비밀번호 | 입력 필드 초기화, 텍스트 토글 기능 3. Git Pull 안 됨 | git pull --rebase로 해결 4. BaaS (Backend as a Service) 5. CI/CD 6. MVP (Minimum Viable Product) 7. 금일 소감 1.로그인, 회원가입 페이지 | 비밀번호 입력할 때마다 UI 크기 변경됨 기능 구현을 완료..

며칠 전에 이런 글을 봤다. 어떤 게 재밌어지는 순간은 '내가 그것을 잘하게 되기 시작했을 때'라는 글이다. 얼마 전까지만 해도 나는 코딩이 어려운 걸 넘어서 '내가 정말 재밌게 이걸 하는 게 맞나' 싶은 생각이 계속 들었다. 그러던 와중에 본 글이 바로 저 글이다. 생각해 보니 내가 그간에 해온 것들과 내 경쟁력이 된, 잘하는 것들이 처음부터 재밌지는 않았다. 보통은 어려웠고 또 재미가 없었다. 특히 내가 재작년에 시작했던 운동은 심각했다. 너무 어렵고, 재미도 없고, 열심히 하고는 있는데 잘하고 있는 건지 정말 전혀 모르겠었다. 하루에 3시간 ~ 3시간 30분씩 운동하고 끝나서 집에 가면 곧장 잠들기 일쑤였다. 운동 이후엔 아무것도 못할 정도여서 정말 잠만 잤다. 첫 3개월까지는 헬스장 직원분들께 들..

1.인스턴스(instance) 2. Pull Request (PR) 3. REST API 4. 금일 소감 1.인스턴스(instance) : 객체 지향 프로그래밍(OOP)에서 클래스(class)에 소속된 개별적인 객체 자바스크립트에서 클래스는 특정한 타입의 객체를 생성하기 위한 일종의 템플릿이라고 할 수 있다. 예를 들어, 만약 '자동차'라는 클래스가 있다면, 이 클래스는 자동차가 가져야 할 기본적인 속성(색상, 모델, 브랜드 등)과 기능(운전하기, 정지하기 등)을 정의한다. 이제 여러분이 특정 자동차를 만들고 싶다고 할 때, 예를 들어 "빨간색 테슬라 모델 S"를 생성하고 싶다면 '자동차' 클래스를 사용해 이 특정 자동차의 인스턴스를 만들 수 있다. 이 인스턴스는 '자동차' 클래스의 속성..