TIL

오늘은 Git과 Github 사용법에 대해 학습했다.이전에 Github을 사용해 본 적은 있지만, commit과 push만 사용하고 있었다.Github을 통해 프로젝트 협업을 진행해야 하므로 이번 기회에 더 제대로 알아보자.Git : Distributed Version

하드 리셋리셋하는 파일들을 완전히 삭제하는 것.완전히 과거로 돌아가는 것이다.이전 커밋으로 돌아가고, 파일 변경 내역을 유지하지 않는다.복합 리셋파일의 상태가 다시 untracked로 바뀌게 된다.방금 커밋한 변경사항을 다시 unstaged area 즉, working

substring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환한다.slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.replace() 메소드는 문자열을 대체한다.split() 메서드는 S

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.구조분해할당에서 d를 "val4"로 초기화 했더라도, arr 배열에서 arr3을 "val5"로 할당했다면, "val5"가 우선이다.할당되지 않

기본형과 참조형의 구분 기준복제의 방식기본형 : 값이 담긴 주소값을 바로 복제참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제불변성의 여부기본형 : 불변성을 띔참조형 : 불변성을 띄지 않음cf) 불변하다는 것은 데이터 영역 메모리를 변경할 수 없음

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다.자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉

call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.호출 주체인 함수를 즉시 실행한다.첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 바인딩할 수 있다.apply() 메서드는 주어진 this 값과 배열 (또는

다른 코드의 인자(매개변수)로 넘겨주는 함수!콜백 함수를 넘겨받은 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다. -> 제어권이 이들에게 있다는 것!즉, 콜백 함수는 다른 함수(or메서드)에게 인자로 넘겨줌으로써 그

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다.전통적인 콜백 패턴은 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개 비동기 처리를 한 번에 처리하는 데도 한계가 있다.콜백 함수를 익명 함수로 전달하는

📌 자바스크립트 개인 과제 영화정보 Open API 인 THDM(The Movie DB)를 사용하여 영화 검색 사이트 만들기!

'클래스' 란? : 객체를 생성하기 위한 일종의 템플릿!책상을 만들기 위한 설계도LIKE 붕어빵을 만들기 위한 붕어빵 틀 '인스턴스' 란? : 클래스를 통해 만들어진 실제 객채들!설계도를 보고 만들어진 실제 책상LIKE 붕어빵 틀로 만들어진 붕어빵들 🥐클래스를 생성하

클로저 > 💡 [MDN] 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 대체 무슨 말이람? 코드를 보면서 함수가 선언된 렉시컬 환경이 무슨 말인지 알아보자. 이 코드를 보면 먼저 outerFunc()가 실행되고 이 함수에 의해 innerFunc() 가

개인프로젝트가 끝나고, 팀프로젝트가 다시 시작되었다.팀프로젝트는 지난번에 했던 인기 영화 API를 불러와서 검색하는 사이트를 조금 더 발전시킨 버전인데, 아.. 갈길이 구만리 같아 보인다. 😇자바스크립트 팀과제1 TMDB 또는 영화진흥위원회 오픈 API 이용2 영화

어제 각 카드를 클릭했을 때 movieid값을 url을 통해 전달받아 페이지를 이동하는 것 까지는 성공했다. 이제 저 URL에 있는 id 값을 어떻게 가져와서 이용할까?URL에 포함된 파라미터(쿼리스트링) 값을 읽어오는 방법을 알아보자.그 전에, 쿼리스트링이 뭔지부터

어제 상세페이지로 이동해서 포스터이미지 불러오는 것 까지는 완성했고, 나머지는 다른 조원들이. 나는 localStorage를 활용한 리뷰 작성 기능을 담당했다. 예전에 localStorage를 활용하여 to-do list를 만들어 본 경험이 있어서 코드를 작성하는데 도

각 리뷰에 있는 모달 버튼 클릭 시 모달 창 생성모달창에 있는 닫기 버튼 클릭 시 모달 창 닫히기모달창에 있는 삭제 버튼 클릭 시 input 태그에 입력한 비밀번호 값과 해당 리뷰의 비밀번호 값과 비교 후 일치하면 삭제, 일치하지 않으면 alert 창 띄우기한마디로 리

오늘 한 일 review.js refactoring (closest 메서드 활용) 모달창에 입력 값 없을 때 "비밀번호를 입력해주세요" alert 뜨도록 변경 credit api 추가 (배우 이미지, 이름, 캐릭터 이름) css 전체 수정 모달창 바깥부분 클릭해도 닫히

review count 기능 추가정렬버튼 클릭 후 검색하면 searchMovie 함수가 여러번 호출되어 결과 값 없을 때 alert 여러번 뜨는 에러 해결video api 가져와서 영화에 해당하는 예고편, 티저로 이동할 수 있는 아이콘 추가 드디어 팀과제가 끝이 났다!

컴포넌트를 통해 UI를 독립적이고 재사용 가능한 부분으로 분리하고 각 부분을 독립적으로 생각할 수 있습니다.개념적으로 컴포넌트는 JavaScript 함수와 유사합니다."props"라고 하는 임의의 임력을 받은 후, 어떤게 화면에 나타나야 하는지를 설명하는 React 요

이 문법은 문자열도 HTML도 아니다.이 문법은 JSX 라고 부르며 자바스크립트의 문법 확장이다.(JavaScript + XML)JSX 를 리액트와 함께 사용하여 UI가 실제로 어떻게 보일지 설명하는 것을 권장한다.JSX 안에 자바스크립트 표현식을 중괄호 {} 로 묶어

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. (데이터가 저장되는 곳)왜 바뀌어야 할까? -> UI 로의 반영을 위해서!React에서 값이 바뀔 데이터를 담는 두가지 방법을 비교하며 왜 State를 써야하는지 알아보자.이렇게 하면 버튼 클릭시 count

일반적으로 데이터 변경에는 두 가지 방법이 있다.데이터의 값을 직접 변경하는 것이다. (BAD)변경 값을 가진 새로운 사본으로 데이터를 교체하는 것이다. (GOOD)최종 결과는 동일하지만, 직접적인 객체 변경이나 기본 데이터의 변경을 하지 않는다면 (불변성을 유지한다면

React로 My To Do List 만들기!구현해야 할 기능Todo 추가하기Todo 삭제하기Todo 완료상태 변경하기 (완료 <-> 진행중)요구사항제목과 내용을 입력하고 추가하기 버튼 클릭하면 Working에 새로운 Todo가 추가되고 제목, 내용 input은

[React에서 rendering이 발생하는 경우] 첫 리액트 앱을 실행했을 때 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때. 컴포넌트 내부 state가 변경되었을 때 컴포넌트에 새로운 props가 들어올 때, Effect란? 여기서 E

👉 styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지!(1) VSCode Extension 설치이 익스텐션을 설치하면 styled-components안에서 스타일 코드를 편하게 작성할 수 있다!(2)

👉 useContext는 구성 요소의 컨텍스트를 읽고 구독할 수 있게 해주는 React Hook입니다 .일반적으로 부모 컴포넌트에서 자식 컴포넌트로 value를 전달할 때 props를 사용한다. 그러나 부모 → 자식 → 자식의 자식 이렇게 너무 깊어지게 되면 pro

Rerendering이 발생하는 조건1\. 컴포넌트에서 state가 바뀌었을 때2\. 컴포넌트가 내려받은 props가 변경되었을 때3\. 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두리액트에서 리렌더링이 빈번하게, 자주 일어난다는 것은 비용이 발생한다는 것이

Document Object Model웹에서 가장 많이 사용하는 언어 중 하나인 HTML 등으로 작성된 문서를 계층으로 표현하여 문서 내의 헤드(Head), 폼(Form)과 같은 객체를 변형, 제어할 수 있도록 하는 인터페이스👉 Virtual DOM (VDOM)은 U

👉 Javascript application들의 state(상태)를 관리하는 라이브러리.👉 React와 많이 사용하면서 유명해졌으나, React에 의존하는 라이브러리는 아님.👉 Angular, Vue.js, VanillaJS 등 JavaScript 언어 내 여러

또는여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(

👉 우리가 살펴볼 첫 번째 React-Redux Hook인 useSelector 는 React 구성 요소가 Redux 저장소에서 데이터를 읽을 수 있게 해주는 Hook 이다.👉 useSelector 는 매개변수로 selector 함수 라고 하는 단일 함수를 허용한다

Action Values : action 객체에서 type의 value를 상수로 만든 것Action Creators : action 객체를 생성하는 함수의도치 않은 휴먼 에러 방지action 객체 type의 value를 상수로 만들어 놓았기 때문에 자동완성 등의 보조

👉 라우팅을 구현할 수 있게 해주는 패키지https://reactrouter.com/en/6.18.0route에는 react-router-dom에서 지원하는 props들이 있다.path에는 우리가 이동하고 싶은 주소를 넣는다.element에는 해당 주소로 이

필수 구현 사항팬레터 CRUD 구현 (작성, 조회, 수정, 삭제)아티스트별 게시물 조회 기능 구현 (Home - Read)원하는 아티스트에게 팬레터 등록 구현 (Home - Create)팬레터 상세 화면 구현 (Detail - Read)상세화면에서 팬레터 내용 수정 구

오늘 한 일알고리즘 5문제 풀기context 브랜치 완성Home page에서 코멘트 hover시 스케일 커지도록 수정Detail page에서 수정버튼 클릭 시 수정취소를 할 수 있는 "취소"버튼 추가Context.js 파일을 만들고, 기존에 data state를 App

오늘 한 일알고리즘 3문제 풀기redux 브랜치 완성context 브랜치에서 localStorage 사용하도록 수정수정기능 mutable -> imutable 하게 변경formatDate 함수 변경background-img 고정되도록 수정어제 context 브랜치가 생

오늘 한 일알고리즘 5문제 풀기React.memo, useCallback, useMemo -> memoization 복습useEffect 사용하여 API 호출 방법 학습 (axios ~ then / async await)숙련주차 개인과제 제출이후에 배우게 될 redux

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인

오늘 한 일알고리즘 1문제 풀이회원가입 기능 구현로그인 기능 구현게시물 업로드 -> 홈 화면에 뿌리기firebase를 이용하여 쉽게 구현할 수 있었다.uid도 생성해주어서 그 id를 userId로 사용할 수 있어서 편리한 것 같다.그러나 Authentication 에는

오늘 한 일알고리즘 3 문제 풀이스탠다드반 타임어택 (todo-list redux로 구현하기)firebase와 연동하여 회원 가입할 때 users collection에 추가firebase와 연동하여 피드 업로드 할 때 feeds collection에 추가 헤더에 현재

오늘 한 일알고리즘 2문제 풀이피드 삭제 기능 구현피드 수정 기능 구현 (+모달)수정을 어떻게 해야 할지 난감했는데 모달 창을 띄워서 수정할 값들을 받고,수정하는 방식을 선택했다. updateDoc을 쓰면 된다.약간 더 어려운 수정 기능을 완성하고 나니, 삭제 기능은

팀 프로젝트 발표일!오늘 드디어 팀프로젝트 발표일이었다.토, 일요일 주말 밤낮 없이 열심히 했다..마지막까지 고생에 고생을 했다.useEffect를 통해 파이어베이스에 접근하는 부분이 무한루프를 돌고 있는 코드가 있어서 파이어베이스가 금방 차버리는 문제 때문에.. 일일

리덕스 툴킷은 우리가 이전에 배운 리덕스를 더 편하게 쓰기 위해 만든 것이다.초기 세팅을 위해 쳐야 할 코드의 양이 많았던 개발자들의 불만을 수용해서 리덕스팀이 만들게 되었다.리덕스 툴킷은 우리가 배운 리덕스의 구조나 패러다임이 모두 똑같다!일일이 만들어주어야 했던 D

👉 node.js와 브라우저를 위한 Proisme 기반 http 클라이언트즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지📌 API 서버는 우리가 만든 json-server를 사용한다. 한 프로젝트 내에서 4000 번 포트로 서버를 가동시켜 사용한다.g

앞선 과정에서 get, post, delete, patch 등을 활용하여 HTTP 통신을 하는 방법을 배웠다.이렇게 호출하는 부분이 우리 앱에 300개 정도 존재 한다고 가정했을 떼,매번 요청을 할 때마다 console.log를 통해 어떤 로깅을 하려 한다.그러면 우리

업로드중..미들웨어는 action이 dispatch 되어서 reducer에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 미들웨어를 action과 reducer 사이의 중간자 라고 이해하면 된다.만약 counter 프로그램에서 + 버튼을 클릭했을 때 바로 +1

.

이번 심화주차 개인과제는 지난 번 숙련주차 개인과제를 발전시켜 홈 화면과 상세화면에 인증시스템을 적용한 서비스로 발전시키는 것이었다. 과제를 통해 배울 수 있는 것redux-toolkit을 이용한 전역 상태 관리redux-toolkit의 thunk 기능을 이용한 서버

React-Query 란? 우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-saga 등의 미들웨어를 채택해서 사용했다. 그러나 다음과 같은 문제가 있다. 코드량이 너무 많다. Redux가 비동기 데이터 관리를 위한 전문

필수 요구사항아래 세 가지 중에 한 가지를 반드시 활용해서 만들어 주세요지도 APIYouTube API설문조사상태관리 라이브러리는 RTK를 사용하고, React-query 또는 Redux Thunk 사용은 택1 진행firebase 또는 json-server 택1 진행어

오늘 한 일알고리즘 1문제 풀기회원가입 기능 구현회원가입 시 input value 실시간 유효성 검사현재 로그인한 user 정보 react-query의 user 라는 쿼리키로 만들기마이페이지에 user 정보 뿌려주기마이페이지에 user가 등록한 설문 뿌려주기헤더 아바타

이번 프로젝트도 무사히 끝이 났다!다들 맡은 역할을 충실하게 수행해 주어서 결과물도 좋게 잘 나온 것 같다!🥰프로젝트 명 : Poll In Love설문조사를 통해 세상을 더 나은 곳으로 만들어요! 설문조사로 의견을 공유하고, 포인트를 통해 이득을 얻을 수 있는 웹 서

Poll In Love 프로젝트 KPT 회고💌 Poll In Love 방문하기React Query (TanStack Query) 최신 버전 (v5) 를 사용했다.인원 수가 적음에도 불구하고 완성도 높은 프로젝트를 구현했다.GitHub Issue, Project 기능을

React-Query 란 ? 리액트 쿼리는 서버 상태 관리를 쉽게 하도록 도와주는 라이브러리 이다. > "서버 상태 관리를 쉽게 한다" 란? fetching : 서버에서 데이터 받아오기 caching : 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간

Throttling & Debouncing이란? 디바운싱과 쓰로틀링 모두 UI에서 발생하는 이벤트를 제어하는 방법이다. 과도하게 이벤트 처리 함수(콜백함수)가 호출되지 않도록 하여 부하를 방지하기 위해 쓰이는 방법이다. > 👉 둘 다 짧은 시간 간격으로 연속해서 이벤

함수의 파라미터와 리턴값이 있다면 그에 대한 타입을 지정해줘야한다.객체를 파라미터로 받는 함수라면 객체 내 속성들에 대한 타입도 지정해줘야한다.12<span style='color: 화살표 함수 표현식간결한 본문 구문을 사용하여 return을 명시하지 않고 값을

📌 주제 : Todolist를 Typescript로 만들어 봅시다. 레벨1 : React 이용 Todolist 레벨2 : RTK 이용 Todolist 레벨3 : RTK + json-server 이용 Todolist 레벨4 : RTK + redux thunk 이용 To

오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다.정답은 아무에게도 말하지 마세요.콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?단, 보유 중인 빈 병이 2개 미만이면, 콜라를

Type > [Type 의 용도] 특정 값이나 객체에 대한 타입을 지정할 수 있다. (interface는 객체에 대한 모양만 지정 가능) Type alias 를 만들 수 있다. 타입을 특정한 값을 갖도록 제한할 수 있다. interface 인터페이스 선언은 객체

클라이언트 사이드 상태 vs 서버 사이드 상태 클라이언트 사이드 상태 (Client-Side State) 정의 : 클라이언트 사이드 상태는 사용자의 브라우저 내에서 관리되는 상태이다. 이는 리액트 컴포넌트의 useState 또는 전역 상태 관리 라이브러리 (Redux,

다운로드 UI가 있을 때, 또는 UX를 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용된다.대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을줄일 수 있다.queryFn

React는 UI를 편리하게 만들어주는 라이브러리 Next.js는 React를 사용하여 Web을 만드는 프레임워크 >📌 참고 라이브러리 : 개발자가 필요할 때마다 설치, 혹은 호출함으로써 능동적으로 사용하게 되는 코드의 집합 프레임워크 : 개발을 단순화하기 위한 뼈

프로젝트 명 : Where2Go (어디가지🍆)소개한 줄 정리 : 자랑하고 싶은 숨은 명소들, 함께 즐기고 싶은 특별한 장소들을 공유하는 지도 기반의 소셜 플랫폼 입니다내용 : ‘어디가지?’ 는 지도 기반의 소셜 플랫폼으로, 여러 사용자들이 자신만의 특별한 스팟을 공

파일 드래그 앤 드롭을 구현하기 위해 react-dropzone이라는 라이브러리를 사용했다.<ImageUploader onUpload={handleUpload} /> 이렇게 사용한다.supabase 연결하고 테이블에 값을 넣는데 오래걸렸다.. 갈길이 구만리..🌋

심화 프로젝트도 끝이 났다.좋은 팀원들 덕분에 완성할 수 있었다.발표 당일까지.. 수정에 수정을 거듭했지만 여전히 자잘한 오류들이 남아있다.ㅠ.그래도 처음에 기획했던 것을 거의 구혔했다는 것에 만족하는 바이다.메인페이지는 서버사이드렌더링 으로 구현했다..!카테고리별로

드디어 마지막 프로젝트가 시작되었다.늘 느끼는 거지만.. 기획 단계가 제일 어렵다.😂개발자는 단순히 테크니션이 아니라, 서비스를 만들고 제공하는 사람으로서내가 만드는 서비스가 사용자에게 어떤 이로움을 가져다 줄 지 늘 생각해야 한다고 생각한다. 그런 면에서 이번 프로

지난 심화 프로젝트에 이어서 이번에도 firebase가 아닌 supabase 를 이용하게 되었다. 우선 docs 가 상당히 잘 정리되어 있다고 느꼈고, 관계형 데이터베이스를 사용할 수 있다는 점이 매력적으로 느껴졌다.firebase의 경우 회원 가입이 완료된 후 use

오늘까지 구체적인 기획 회의를 마무리하고, 프로젝트 초기 세팅을 하고 본격적인 개발에 막 착수했다!개발 환경next.js (page router)typescripttailwind CSSrtkreact-query우리는 웹 사이트가 노출되는 것이 중요하기 때문에 검색 엔진

이번 프로젝트에서 내가 맡은 부분 중에 로그인, 회원가입 기능이 있다.이를 구현하기 위해서 email, password, confirmPassword, nickname 많은 state를 만들어야 할 뿐만 아니라, 실시간 유효성 검사를 구현하고 싶기에, emailErro

오늘은 회원가입, 로그인 기능 구현 마무리 하고, 현재 로그인한 유저의 정보를 rtk로 전역 상태 관리를 할 수 있게끔 했다. 그리고 /user/userId 페이지 (유저페이지) 로 현재로그인 한 유저의 id 값으로 동적라우팅 하게끔 해두었는데, 유저페이지에서 해당 U

고통의 연속회원정보 수정 기능을 구현하는데, 금방 될 줄 알았는데, 고려해야 할 게 많아서 생각보다 오래걸렸다ㅠ.ㅠsupabase auth로 회원가입을 하면 Authentication에서 제공하는 정보를 담기 위해 users 라는 public 테이블에 자동으로 저장이

우리는 소셜 로그인 중에 카카오 로그인을 구현하기로 했다.공식문서가 잘 나와있어서 보고 천천히 따라했다.아래 문서를 보고 따라하면 된다.👉 https://supabase.com/docs/guides/auth/social-login/auth-kakao그런데 공

오늘 한 일마이 페이지 탭으로 전환되도록 UI 틀 잡기 (내가 북마크한 장소, 내가 좋아요한 리뷰, 내가 작성한 리뷰)리뷰 카드 컴포넌트 만들기내가 좋아요한 리뷰 보여주기.. 아직 갈길이 멀다..흙

nextJs 13 버전 부터는 구글 폰트의 경우 next/font/google 을 활용하여 추가적인 패키지 설치 없이 사용 가능하다.공식문서👉 https://nextjs.org/docs/pages/building-your-application/optimizi

일단 무한스크롤을 구현하려면 스크롤이 특정 부분에 닿았을 때 특정 함수를 실행하기 위해react-intersection-observer 와 같은 라이브러리를 설치하자.장소 검색 페이지 부분을 무한스크롤로 구현해야 하는데,,처음에 리액트 쿼리의 useInfiniteQue

오늘은..... 고통만 받으며 삽질하다가 하루가 다 갔다.ㅠ.ㅠ 이렇게 아무것도 구현 못한 날은 처음인데... 의미 있는 뻘짓이었길..😇 지금 placeCard 에서 리뷰수, 북마크 수를 보여주기 위해 reviews 테이블과 bookmarks 테이블에 또 접근하고

최종 프로젝트 중간 발표자로 내가 뽑히게 되었다..😇중간 발표를 준비하며 정리한 내용을 적어보려 한다.supabase강력한 데이터 베이스와 인증 기능을 제공하여 데이터를 손쉽게 관리할 수 있다.(firebase와 달리) 관계형 데이터베이스 이므로 초기 세팅 시 잘 설

Virtual DOM(가상 DOM)은 React와 같은 일부 프론트엔드 라이브러리 및 프레임워크에서 사용되는 개념입니다. 가상 DOM은 실제 DOM에 대한 가벼운 복제본이며, 이를 통해 성능을 향상시킬 수 있습니다.<Virtual DOM의 동작 방식>가상 DOM

CSR만 가능한 리액트와 달리, SSR 및 SSG를 지원하여 초기 로딩 속도를 향상시킬 수 있다. 라우팅을 위해 별도의 라이브러리(react-router-dom)을 설치하고 관리해야 하는 리액트와 달리, 파일 시스템 기반의 간단한 라우팅을 제공한다. 코드스플리팅, 검색

오늘부터 유저 테스트를 받기 시작했다.아직 부족한 부분이 많지만... 더 이상 미룰 수 없어서 올렸다.!아직 메인 페이지 캐러셀에 들어갈 이미지는 완성되지 않은 상태.우선 기존에 이미지가 있는 리뷰를 삭제할 경우, 테이블에서는 삭제가 되는데 스토리지에 있는 이미지 파일

오늘 한 일places 테이블에 홈페이지 추가 -> 장소 상세에서 대표 홈페이지 링크 뿌려주기비밀번호 재설정 기능 추가유저 피드백 중에 장소 상세 페이지에 들어갔을 때, 장소의 대표 홈페이지로 연결될 수 있도록 링크를 달아주었으면 좋겠다는 피드백이 있었다.우리가 사용하

기존에 장소 검색 페이지에서 무한 스크롤을 구현 했었으나,react-query의 useInfiniteQuery를 사용하지 않고, 조잡한(?) 방식으로 처리하고 있었다.그러다 보니 코드 가독성도 매우 떨어지고, 중간 중간 오작동 하는 경우에도 원인을 찾기가 쉽지 않았다.

오늘 한 일메인 페이지에서도 필터링 적용해서 검색 가능하도록 구현장소 검색 페이지 필터링 버튼들 fixed 해놓음searchValue 뿐만 아니라 selectedBtns 들도 전역 상태 관리를 하게 되었다.버튼을 클릭해서 필터링을 적용한 채로 검색어를 입력 후 검색 버

useInfiniteQuery 를 사용하여 멋지게 무한스크롤을 완성하였지만, 무한스크롤에서 챙겨야 할 디테일은 끝나지 않았다.!무한스크롤은 단순히 스크롤이 바닥에 닿았을 때 데이터를 불러오는 것에서 끝나는 것이 아니었다.!<유저가 무한스크롤이 적용된 페이지에서 겪

우리 프로젝트의 주요 서비스는, 장소 정보 공유 서비스 이다. 그래서 공공데이터포털에서 배리어프리 시설에 대한 정보를 가져오고 있지만, 이 API에는 장소 이미지에 대한 정보는 없다. 프로젝트 기획 단계에서 장소 이미지에 대한 정보를 어떻게 처리할 것인가에 대한 의견