본문 바로가기

전체 글

 (138)
DeepDive - 43장. Ajax 43.1 Ajax란? - Ajax : 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작함. - 전통방식의 문제점 - 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함한 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. - 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. - 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처..
Keep-Alive 헤더 - Keep-Alive 헤더 : 송신자가 연결에 대한 타임아웃과 요청 최대 개수를 어떻게 정했는지에 대해 나타낸다. - Keep-Alive 헤더를 위해서는 Connection 헤더는 keep-alive로 설정되어야 한다. - parameters - timeout : 유효 연결이 계속 열려 있어야 하는 최소한의 시간(초 단위)을 가리킨다. - max : 연결이 닫히기 이전에 전송될 수 있는 최대 요청 수를 가리킨다. - HTTP는 TCP 위에서 동작을 하는데, TCP 전송이 끝나면 연결이 끊어지듯이 HTTP도 서로 전송이 끝나면 연결이 끊어진다. 그렇다면 매번 똑같은 주소로 요청을 할 때마다 새로운 연결을 설정해야 한다면 자원이 낭비된다. 이런 문제를 막고자 Keep-Alive가 생겼다. Keep-Aliv..
중고 거래(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)이 동일하면 완전히 동..

티스토리툴바