개발 🐾

일반적인 비동기 함수 처리에서 API 요청을 하면 await가 있던 없던 모두 요청으로 받아들여진다.await가 없는 비동기 함수 요청 로직을 콘솔에 찍으면 Promise{} 으로 나오며객체 내부에는 'fulfilled'로 데이터 페칭이 진행된 것을 확인할 수 있다.혹시 몰라 데이터 링크 부분에 오타를 내어 일부러 오류를 내었더니 콘솔에 오류가 찍히며 잘 실행되었다. let query = supabase.from(HOTPLACE).select('*'); if (area) query.eq('area', area); console.log('query', query); const getHotplaces = async () => { // let query = await supabase.from(HOTP..

2025.02.16 (일) Works 1. 검색어 필터링   1-1. 엔터 검색   1-2. join 해서 데이터 가져오기   1-3. 검색 value 필터링2. 장소 필터링 (전체 / 국내 / 국외)   2-1. onClick 이벤트 주기   2-2. 필터링 함수 만들기   검색어 필터링 엔터 검색검색 함수 내부에 엔터로 검색하는 기능을 추가했다.검색 후에는 검색창이 빈 값으로 설정된다.// SearchInput.jsxconst handleSearch = e => { if (e.key === "Enter") return; setSearchInput("");};  join 해서 데이터 가져오기 & 검색 value 필터링검색이 되는 값들을글 제목, 닉네임, MBTI, 글 내용으로 정했다.따라서 네 개..

2025.02.15 (토) Works 1. HomeContext 전역관리2. Modal 관리    2-1. 선택 카드 state 관리    2-2. 닫기 버튼   HomeContext 전역관리 이전에는 HomeContext에서 posts의 값만 전역으로 관리, HomePostCard에서는 post의 값을 props로 받고 users와 comments를 state로 관리했다. 오늘은 게시글을 클릭하여 모달창을 띄우고자 했다.그러기 위해서 이제는 Home, HomePostCard, PostingModal를 함께 연결하여 관리해야 한다. 따라서 Context에서 posts, users, comments를 함께 묶어두었다. 아래는 supabase에서 Promise.all을 통해 posts, users, comm..

2025.02.14 (금) Works 1. DB 데이터 동기화 & Home 게시글 불러오기 (props 전달)2. 게시글 추가 버튼3. Layout 수정 및 페이지 연결(Link)  DB 데이터 동기화    📍작업 내용 1HomeContext 작성하여 App 최상위에 적용supabase에서 posts 테이블의 값을 가져옴posts 배열을 state로 관리함value로 posts 배열 내려줌HomePostCard 컴포넌트 분리users, comments 테이블의 값을 가져옴users, comments 배열을 state로 관리함card 상단 user profile 값을 출력함 (setUserProfile 함수)card 하단 comments 값을 출력함 (setComment 함수)posts, users, c..

2025.02.13 (목) Works 1. supabase 특강2. git conflict & issue 컨퍼런스3. Prettier 파일 관리4. Home 페이지 UI 구현5. supabase에서 데이터 가져오기  Home 페이지 UI 구현 간단히 만들어 본 Home UIindex.css에 body 스타일을 유지 중이라 헤더가 짧게 나온다.지금은 div로 주었지만 추후에 프로필 사진과 post 사진으로 대체할 예정이다.  Supabase DOM을 통해 화면 컴포넌트에 접근하고,React를 통해 상태 관리를 하고,Redux, Context를 통해 props를 전역적으로 관리하고,RRD를 통해 페이지를 이동하고,RTK를 통해 store를 생성하여 간편하게 데이터를 관리하였다. 이번 프로젝트에서는 이전 내용..

이전에 JS 문법으로 구조분해할당을 배웠다.[🍦] JS 문법 - Destructuring (구조 분해 할당) (클릭) 당시에는 단순한 예제로만 익혔는데 다양한 곳에서 많이 사용하고 있어서 점점 헷갈리던 와중에Context -> RTK 를 진행하며 실제 사용 예시와 함께 추가로 정리해보고자 한다. 기본적으로 구조분해할당은 (객체나 배열에서) 많은 값들 중 내가 필요한 값만 뽑아야 할 때 사용한다.  📍객체 사용객체 내의 key 값에 집중하기!다양한 key : value pair가 있는 객체에서 필요한 값의 key와 동일하게 변수를 지정한다.그 변수를 { } 내에 입력하여 "구조분해할당 입니다~" 라고 알려준다고 생각하면 쉽다 ! 예제1: "멋진셔츠"는 '상품명'이라는 변수에, 10000은 '가격'이라는..

[본캠프 10일차 / 개인과제 1일차] 25.01.08 Today I Learned💡1. 개인 과제 파악2. 걷기반 교육 및 실습 👩🏻‍💻: "저.. 잘하고 있나요?" 🧑🏻‍🏫: "꼼꼼히 읽어보세요" 두근두근 개인과제 1일차입니다 -지난주부터 안내받았던 개인과제는 바로 '영화 페이지 만들기'텅 빈 vscode에서 완성된 페이지를 만들기까지..험난한 과정이 되겠지만 천천히 하다보면 완주할 수 있을 거라 믿고!!그 과정을 낱낱이 기록해보겠다.배밀이에서 한 발자국 떼었다..!?👣 두 번째 걷기반 수업 및 실습을 통해 총 8개의 응용 문제를 풀어보았다.비슷한 내용을 반복해서 내 손으로 직접 쳐보니 확실히 금방 익는 느낌!!2번 문제 해결 방법 - typeof8번 문제 해결 방법 - includes..

교육기간이 짧은만큼 휘몰아치는 일정에 12시 이전에 자본지도 일주일이 넘은 것 같다..매일 있는 강의, 특강, 그리고 개인과제까지..이 모든 것을 노베이스인 내가 짧은 시간 안에 해내기에는 하루가 너무 짧다.오늘 양치하다가 그런 생각을 했다."하루가 48시간이었다면..!" 이런 일상이 반복되니 나의 집중과 목표가 흔들렸다.한 두 줄 되는 코드를 하루종일 짜는 나와 달리, 하루만에 과제를 다 해내는 주변 사람들을 보며쏟아지는 정보를 다 안고 싶은 욕심이 생겼다.결국 이도저도 완성하지 못한 상태로 하루가 마무리 되었고 그럴 때마다 자괴감이 스멀스멀 올라왔다. '내가 못 하는 걸 다른 사람들이 잘 하는 것처럼, 다른 사람들이 못하지만 나는 잘하는 다른 것도 있잖아!'라는 생각으로 하루하루 힘내봤지만.. 하루 ..

[본캠프 8일차] 25.01.03 Today I Learned💡1. JavaScript 문법 종합반 2주차 프로그래머스에서 원하는 것 JavaScript 문법 종합반 2주차 과제를 풀며 1주차 과제를 참고했다. 🧐의문점프로그래머스에 문제 당 입출력 예를 대입해보며 함수를 체크하는 과정에서 console.log 와 solution의 위치가 헷갈렸다.  📍예시1주차 과제 풀이 정답👇🏻 를 보면 함수 외부에 var로 지정한 예시 값 & console.log로 감싼 solution을 확인할 수 있다. 값을 찍어보면 정상 출력 된다.  2주차 과제 풀이 정답👇🏻 를 보면 주석 처리 된 '정답 확인용(1)' 두 줄이 함수 내 외로 있는 것을 확인 할 수 있다.함수 내에 있는 console.log는 풀이..

[본캠프 7일차] 25.01.02 Today I Learned💡1. JS 문법 종합반 1주차 강의2. 1주차 과제 그래서 Node.js가 뭔데? JavaScript 종합 문법 강의를 수강하면서 Node.js 설치가 필수라고 하셨다.자세한 설명 없이 설치했고,vscode에 작성하는 코드를 터미널에서 'node 01.js' (01.js는 문서 이름) 를 통해 바로바로 결과 확인할 수 있었다.대체로 이런 식이며console.log의 값을 웹 개발자모드에서 확인했던 것과 같았다. 그러다가 아침에 문득 "Node.js 가 뭔데? 이렇게 결과 보여주고 끝이야?" 하는 생각이 들어 찾아보니 📍Node.js 란JavaScript는 웹 브라우저에서만 동작하는 프로그래밍 언어지만, 
node.js를 통해 독립적으로 서..