본문 바로가기

전체 글

 (136)
중고 거래(Second-Hand) 회고 코드스쿼드 마스터즈 두 번째 팀프로젝트 중고거래(Second-Hand) 📚 두 번째 팀프로젝트이자 코드스쿼드 마스터즈 마지막 과정이 끝났다. 코드스쿼드 과정에 대한 회고는 별도로 작성했지만, 과정이 끝나고 중고거래 프로젝트에 대한 마지막 회고글을 작성해보려고 한다. 프로젝트 시작 첫 번째 팀 프로젝트에서의 아쉬움을 뒤로한 채, 새로운 팀 프로젝트를 진행했다. 처음 프로젝트 기획서를 보았을 때, 앞선 프로젝트들보다 다양한 기능을 구현해야했고 타입스크립트도 처음 사용해야 했기에 걱정도 많았지만, 결국은 해낼 것이라는 자신감을 가지고 프로젝트를 진행했다. 배운 점 이번 프로젝트에서 가장 많이 배운 점은 빠른 개발과 구현 속도였다. 주변 코드스쿼드 동료들에 비하면 나는 항상 고민이 많았고 개발 및 구현 속도가..
[Trouble Shooting] 상품 수정시 이미지 파일 처리 문제정의 - 프로젝트에서 상품을 최초 등록할 시에는 상품의 이미지 파일의 처리를 위해 상품의 정보(제목, 가격, 이미지 등)를 formData 객체로 만들어 전송했고, 해당 상품의 조회(상세페이지), 수정(작성페이지)에서는 DB에서 상품의 이미지 url을 받아 화면에 표시했다. - 문제가 발생한 부분은 상품의 수정(작성페이지)에서 상품의 정보를 수정한 후 수정 완료를 했을 때, 프론트에서 가지고 있는 정보는 상품 이미지의 url 뿐이었기 때문에 비동기 통신 오류가 발생했다. - 오류의 이유는, 상품의 작성 및 수정은 상품의 정보를 모두 formData로 만들어서 전송을 해야했고, url만 가지고 있는 상품의 이미지를 다시 formData 객체로 만드는 작업이 필요했다. - 오류 해결을 위해 백엔드 동료와..
[Trouble Shooting] 지역 설정 기능 구현 과정에서 겪은 문제 - 중고거래 프로젝트에서 선택된 지역을 기반으로 해당 지역에 등록된 상품을 보여주거나 사용자가 상품을 등록할 때 지역을 선택하는 기능의 구현이 필요했고, 사용자의 위치를 기반으로 주변 법정동을 검색하는 로직을 작성했다. - 최초에는 지역을 6개만 DB에 저장하고 진행했지만, 사용자의 위치기반으로 지역을 설정하고 검색하는 방법에 대해서 시도해보고 싶다는 생각이 들었다. 시도한 방법 1. 사용자의 위치(위도, 경도)를 기준으로 외부 지도 API를 통해 사용자 근방의 행정기관(각 행정구역마다 동사무소, 읍사무소 등은 꼭 한개씩 있을 것이라고 판단)을 찾고 해당 행정기관의 주소를 찾는다. 2. 행정기관의 주소들을 이용해 중복이 없는 법정동 주소를 찾는다. 3. 사용자 주변의 법정동 주소들을 API 요청을 통해 ..
React 공식문서 -startTransition - startTransition은 UI를 차단하지 않고 state를 업데이트할 수 있다. - 즉, startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다. import { startTransition } from 'react'; function TabContainer() { const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ... } - startTransition은 트랜지션이 진행 중인지 여부를 추적하기 위한 isPending 플래그를 제공하지 않는다는 점을 제외하면 useTransition과 매우 ..
React 공식문서 -forwardRef - forwardRef를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있다. - 즉, 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하도록 하려면 forwardRef를 사용할 수 있다. - forwardRef는 렌더링 함수를 인자로 받고, React는 props 및 ref와 함께 이 함수를 호출한다. const MyInput = forwardRef(function MyInput(props, ref) { return ( {props.label} ); }); Exposing an imperative handle instead of a DOM node(DOM 노드 대신 명령형 핸들 노출하기) - React에서 DOM 요소를 직접 노출하는 대신, 더 안전하고 추상화된 방식으로 상..
React 공식문서 -useRef - useRef : 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅 - useRef의 매개변수에는 초기값(initialValue)을 지정할 수 있는데, 이는 ref 객체의 current 프로퍼티 초기 설정값이며 어떤 유형의 값이든 지정할 수 있다. - useRef는 단일 프로퍼티를 가진 객체를 반환한다. - ref 객체를 JSX 노드의 ref 속성으로 React에 전달하면 React는 current 프로퍼티를 설정한다. - ref는 state와 달리 변경하더라도 리렌더링을 촉발하지 않는다. * 렌더링 중에는 ref.current를 쓰거나 읽지 마세요. - React는 컴포넌트의 본문이 순수 함수처럼 동작하기를 기대한다. - 입력값들(props, state, context)이 동일하면 완전히 동..
DeepDive - 42장. 비동기 프로그래밍 42.1 동기 처리와 비동기 처리 - 자바스크립트에서 함수가 실행되려면 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에, 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. - 자바스크립트 엔진은 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작하는데, 싱글 스레드 방식은 한 번에 하나의 테스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 테스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. - 현재 실행 중인 테스크가 종료할 때까지 다음에 실행될 테스크가 대기하는 방식을 동기 처리라고 한다. // sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다...
DeepDive - 41장. 타이머 41.1 호출 스케줄링 - 호출 스케줄링 : 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 타이머 함수를 사용하여 함수 호출을 예약하는 것. - 자바스크립트는 setTimeout과 setInterval 타이머 함수와 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공. - 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아닌, 브라우저와 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공. - 즉, 타이머 함수는 호스트 객체이다. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다.(싱글 스레드) - 즉, 타이머 함수 setTimeout과 s..

티스토리툴바