전체 글

Modern Javascript Deep Dive 8~9장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자. 1. 표현식과 문 표현식과 문은 어떻게 구분할 수 있을까? 가장 간단한 방법은 변수에 할당해보는 것이다. 문은 값이 아니기 때문에 변수에 할당할 수 없다. const foo = const bar const foo = true ? 'hi' : 'hello' 변수 선언 문 -> 값 x 삼항 조건 연산자 표현식 -> 값 o 조건 문 -> 값 x 2. Number()와 parseInt()의 차이 Number()와 parseInt() 둘 다 숫자 타입이 아닌 값을 숫자 타입으로 변환해 줄 수 있는 함수다. 하지만 아래와 같은 차이가 존재한다. 숫자와 다른 문자가 섞였을 때 Number()의 경우 변..

문제 상황 현재 진행하고 있는 프로젝트가 배포 마무리 단계에 이르렀는데, 한 가지 문제점이 존재했다. 메인 페이지의 초기 렌더링 시간이 너~무 느리다는 것이었다. 페이지에 접속해 전체 콘텐츠가 로드되기까지 거의 7초 이상이 소요됐었다. 웹에서는 next/image Image 컴포넌트를 사용해 최적화를 진행하고 있었다. Image 컴포넌트를 사용하면, 기본적으로 이미지를 자동으로 최적화하고 크기를 조절해 더 작은 파일 크기로 로드하게끔 도와준다. 진행 프로젝트의 메인페이지를 불러오는 리소스만 36.7MB가 사용되었다. 반면 네이버의 경우 전체 메인 페이지를 불러오는 리소스는 8.9MB 정도였다. 개발사이트의 메인페이지에서는 불러오는 이미지만 12.6MB였는데, 네이버의 경우 4.1MB 정도였다. 제공하는 ..

loading loading = 'lazy' // {lazy} | {eager} 기본값은 lazy로 사용 된다. lazy일 경우, viewport에서 계산 된 거리에 도달할 때까지 이미지 로드를 연기해준다. 만약 eager일 경우 이미지를 즉시 로드해준다. Recommendation: This property is only meant for advanced use cases. Switching an image to load with eager will normally hurt performance. We recommend using the priority property instead, which will eagerly preload the image. 하지만, eager로 이미지를 긴급 로드 해버리면 ..

UTC (협정 세계시) UTC는 협정 세계시를 나타내는 국제 표준 시간이다. UTC는 그리니치 평균 시간 (GMT)과 동일한 값을 나타낸다. UTC는 고정된 시간대로, 시간대 변환 또는 일광 절약 시간(DST) 적용이 없으므로 시간 관리와 데이터 동기화를 훨씬 더 쉽게 만들어 준다. 서버에서 UTC 시간 사용 국제적인 일치성: UTC는 국제적인 시간 표준으로 사용되며, 서버에서 UTC 시간을 사용하면 모든 지역의 사용자에게 일관된 시간을 제공할 수 있다. 데이터 분리: 서버에서 UTC 시간을 사용하면 데이터를 지역 또는 시간대에 따라 구분하기가 더 쉽다. 서버 측에서는 위와 같은 이유로, UTC 시간을 기본으로 사용한다. 내가 진행하고 있는 프로젝트의 경우 다국어를 지원하는 웹사이트로, 숙박 예약 시설이..

사이드 프로젝트에서 타이머 기능을 구현했다. setInterval 함수를 사용해 1초마다 타이머를 갱신해주도록 설계했는데 몇가지 문제점이 존재했다. 문제점 예상했던 1초보다 더 느리게 갱신된다. ms 단위로 측정이 불가능하다. 먼저 이전 코드를 살펴보자. export interface Time { hour: number; min: number; sec: number; } function Timer() { const [isRunning, setIsRunning] = useState(false); const [isPaused, setIsPaused] = useState(false); const [time, setTime] = useState({ hour: 0, min: 0, sec: 0, }); useEff..

TCP, UDP는 TCP/IP 4계층 Transport Layer(전송계층)에서 사용되는 프로토콜이다. 전송계층은 프로토콜 내에서 송신자와 수신자를 연결하는 통신 서비스를 제공하는 계층으로, 송신 호스트와 수신 호스트 간의 연결을 제공하고, 데이터 전송을 관리하는 계층이다. (TCP/IP계층과 관련해서는 아래 블로그 참고) [CS] OSI7 Layer, TCP/IP Updated OSI7 Layer → TCP/IP 5 Layer OSI (Open Systems Interconnection) 7 계층은 네트워크에서 데이터 통신을 할 때, 각 계층이 어떤 역할을 하는지 정의한 모델이다. 7개의 계층은 각각의 역할에 맞게 데이터를 처리 kimyk60.tistory.com 그리고 여기서 사용되는 프로토콜이 바로..

프로젝트에서 견적 요청 값에 따른 자동 계산식을 보여줘야 되는 기능을 만들게 되었다. 사용자가 선택한 여러 옵션값들을 종합하여, 자동으로 계산된 값을 보여줘야 했다. input으로 값을 받을 때, onChange 값이 바뀔 때마다 api를 전송한다면(위 사진 참고) 쓸모없는 api 요청이 발생하여, 웹 성능이 저하될 것이다. 예를 들어 유저가 수량 input에 숫자 100을 입력하려고 할 때, 디바운싱을 적용하지 않는다면 1 10 100 api가 3번이나 호출되고 나서야 원하는 값을 줄 수 있을 것이다. 디바운싱은 연이어 호출되는 함수들 중 마지막 함수만 호출하는 것을 말한다. 나는 특정 서비스 상에 구현되어 자동 계산식이라는 한정된 용어를 사용했지만, 기본적으로 검색 기능을 구현할 때 사용한다고 보면 ..

OSI7 Layer → TCP/IP 5 Layer OSI (Open Systems Interconnection) 7 계층은 네트워크에서 데이터 통신을 할 때, 각 계층이 어떤 역할을 하는지 정의한 모델이다. 7개의 계층은 각각의 역할에 맞게 데이터를 처리하며, 이를 통해 복잡한 네트워크 구성을 신속하게 구축하고 관리할 수 있다. 하지만, 현대의 인터넷은 OSI 모델이 아니라 TCP/IP모델을 따르고 있다. 현대의 인터넷이 TCP/IP 모델을 따르는 이유는 단지, OSI 모델이 TCP/IP 모델과의 시장 점유 싸움에서 졌기 때문이다. 따라서 OSI 7 Layer의 업데이트 버전인, TCP/IP Updated Layer에 대해 공부해 보자. 1. Physical Layer (물리 계층) 두대의 컴퓨터가 어떻..

Class class는 객체를 생성하기 위한 템플릿이다. class Car { // 맴버변수 speed fuel door // 메서드 drive() { this.speed++ this.fuel-- } } 예시를 들어보자. 나는 방금 Car class를 선언하여 Car설계도(템플릿)를 만들었다. 이 class 안에서 쓰이는 변수를 멤버변수, 함수를 메서드라고 부른다. instance const k3 = new Car() const sclass = new Car() new 연산자 사용하여 Car의 인스턴스를 생성할 수 있다. 일일이 k3에 speed, fuel..., sclass에 speed, fuel... 중복적으로 선언해주지 않아도, class에 정의된 멤버변수와 메서드를 사용해 줄 수 있다. 객체 지향..

프로젝트 내에 한 리스트 페이지를 구현하면서 무한 스크롤 페이징 기능을 만들었다. react-query의 useInfiniteQuery와 IntersectionObserver를 사용하여 구현해 보았는데, 다른 페이지에서 반복적으로 사용될 수 있는 로직이 있어 custom hooks으로 분리하여 리팩토링을 해주었다. 이를 블로그로 정리해보고자 한다. 무한 스크롤 페이징의 구현 무한 스크롤 페이징의 구현방식은 다음과 같다. useInfiniteQuery를 통해 리스트 데이터를 일부 호출하여 보여준다. IntersectionObserver를 통해 view에서 지금까지 호출된 데이터의 리스트가 다 보였을 때를 target으로 인지하고 target이 보였을 때 && list에 다음 페이지 데이터가 있을 때 다음 ..