MOLLY

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"를 생성하고 싶다면 '자동차' 클래스를 사용해 이 특정 자동차의 인스턴스를 만들 수 있다. 이 인스턴스는 '자동차' 클래스의 속성..

1. Next.js | npm run dev 실행이 안 될 때 2. Code Splitting (코드 스플리팅) 3. 도메인 4. API (Application Programming Interface) 5. REST API 6. HTML | 자주 사용하는 태그 7. 금일 소감 1. Next.js | npm run dev 실행이 안 될 때 프로그래밍 + 인터넷 창을 많이 띄워두다 보니 노트북이 너무 느려져서 이번에 맥북으로 노트북을 새로 샀다. 도착하기 전에 Next.js npm run dev로 개발자 모드를 실행했을 때, 안 열리는 적이 많았어서 컴퓨터 CPU 이슈로 구동이 안 될 때는 어떻게 해야 하는지에 대한 해결책을 튜터님이 알려주셔서 기록해두려 한다. 그럴 땐 위 사진과 같이 .Ne..

1. Authentication 구현하는 법 - Authentication - Authorization 2. 금일 소감 1. Authentication 구현하는 법 Authentication 웹 애플리케이션에 기본 이메일-비밀번호 인증을 추가하는 프로세스다. 이 방법은 기본적인 수준의 보안을 제공하지만 일반적인 보안 위협에 대한 보호를 강화하려면 OAuth 또는 비밀번호 없는 로그인과 같은 고급 옵션을 고려하는 것이 좋다. 사용자가 로그인 양식을 통해 자격 증명을 제출한다. 이 양식은 서버 작업을 호출한다. 인증에 성공하면 프로세스가 완료되어 사용자가 인증에 성공했음을 나타낸다. 인증에 실패하면 오류 메시지가 표시된다. 사용자가 자격 증명을 입력할 수 있는 로그인 양식 코드 import { ..

1. Data Fetching 2. Caching Data 3. Revalidating Data 4. 금일 소감 1. Data Fetching 1) async와 await를 fetch와 함께 사용하여 데이터를 가져올 수 있다. async function getData() { const res = await fetch('https://api.example.com/...') // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to f..

Next.js 로고부터 해서 공식 사이트, 그리고 서버 실행했을 때 그려지는 UI까지 '멋'이 없는 게 없다.. 에러도 잘 뜨고 끄떡하면 서버 종료 후 다시 켜야 하는 불편함이 있긴 하지만 그마저도 왠지 모를 간지로 인해 모두 상쇄가 된다.... 폴링 인 럽 해버린 Next.js,, 핵심 요약 및 정리, 오늘부터 시작해 보자 1. Next.js란? 2. Next.js 자동 설치 명령 3. 프로젝트 구조 4. Routing 기본 5. 금일 작성한 코드 6. 금일 소감 1. Next.js란? : Full-stack 웹 애플리케이션을 구축하기 위한 React 프레임워크 React 구성 요소를 사용하여 사용자 인터페이스를 구축하고, Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로..

1. 프레임워크와 라이브러리 | 공통점과 차이점 2. TTI (Time to Interactive) 3. TTV (Time to View) 4. Hydration (하이드레이션) 5. Routing (라우팅) 6. 금일 소감 1. 프레임워크와 라이브러리 | 공통점과 차이점 : 둘 다 소프트웨어 개발에서 코드의 재사용성을 높이고 개발 시간을 단축하기 위해 사용됨 이 두 개념을 흔히 집 짓는 과정으로 비유하곤 한다. 예시를 통해 차이점을 쉽게 이해해 보자 위 두 개념의 차이를 '집을 짓기 위한 과정'으로 비유하면, 프레임워크는 모델하우스를 짓는 것으로 볼 수 있고 라이브러리는 구매한 재료로 가구를 조립하는 것으로 볼 수 있다. 따라서, 프레임워크는 통제권을 프레임워크가 가지고 있고, 라이브러리는..