콘요맘떼 개발일지

https://www.rallit.com/resumes/99722@dongdhy/%EC%9C%A0%EB%8F%99%ED%99%98 2024 인프런이 어느덧 한 달 정도 남았다. 원래 개발 컨퍼런스 등에 그렇게 관심이 많은 편도 아니었고 소셜 네트워킹에도 그렇게 관심이 많은 편이 아니었는데 작년에 회사 대표로 AWE에 다녀온 이후부터 다양한 사람들과 견해를 나누는 것이 생각보다 매력적이라는 생각을 가지게 되었다. 강연 세션을 듣는 것도 재밌었고 사람들과 고민을 나누는 부분도 재밌었다. 기술적인 고민도 사실 빅테크 기업들은 겹치는 요소들이 많아서 서로 배우는 점이 많을 것 같고 아직 만 2년정도의 경력밖에 안 되는 나이지만 꾸준하게 고민하는 이상적인 개발 조직에 대해서도 많은 이야기를 들어보고 싶다.경쟁률이..

[1장 - 아이템 3] - 타입 관련 코드는 런타임과 무관하다 → 따라서 런타임 중에는 타입 체크가 이루어지지 않으며 런타임 성능에 타입이 영향을 주지도 않는다. (대신 빌드 타임에 대한 오버헤드는 있을 수 있다) - 런타임 중에도 타입 검사하는 방법은 다음과 같다: (1) 속성 검사: 타입의 내부 속성을 통해 타입을 검사함 (eg. 'name' in person) (2) 태그된 유니온: 타입의 속성에 타입의 정보를 표기하는 태그를 추가 (eg. 'type', 'kind') (3) 클래스 사용: 클래스는 타입과 값 모두로 사용 가능 [1장 - 아이템 4] - 자바스크립트는 덕 타이핑을 기반으로 한다. 덕 타이핑(Duck typing)은 객체가 특정 타입에 해당하는 변수 및 메소드를 포함하고 있으면 해당 ..

[1장 - 아이템 2] - 타입스크립트 컴파일러 설정은 command line argument와 tsconfig.json을 통해 설정할 수 있다. - 타입스크립트 컴파일러 설정은 주로 입출력과 관련된 내용을 다루지만 핵심적인 기능에 대한 설정도 존재한다. (1) noImplicitAny: enable시 암시적인 any를 사용할 수 없게 된다. 따라서 명시적인 any 혹은 분명한 타입을 제시해줘야 한다. 일반적인 경우에서는 해당 옵션을 enable하는 것이 좋다. 다만, javascript 코드를 typescript 코드로 전환하는 과정에서는 (migration) 제외한다. (2) strictNullChecks: 기본적으로 null과 undefined는 모든 타입의 변수에 할당될 수 있다. (예를 들어서 ..

React의 className 리액트는 JSX문법에 따라 class가 아닌 className을 통해 element의 클래스를 지정해준다. 그런데 클래스명을 지정해주다 보면 불필요하게 코드가 길어지거나 일관성이 떨어지는 등의 문제가 발생하기도 한다. 첫 번째 예시를 보자. 여러 클래스명이 존재할 때 클래스명은 서로 공백을 통해 구분된다. 만약 경우에 따라 클래스명이 추가될 수도 추가되지 않을 수도 있을 때 이것은 매우 귀찮은 문제를 만든다. 클래스명이 추가될지 여부도 모르는 채 공백을 추가해줘야 하며 어떠한 방식으로 표현해도 관련 코드가 보기 안 좋아진다. (공백 처리 관련하여 join을 활용한 classNameGenerator 함수를 만들어줘도 되지만 그 역시 효율적이라고 볼 수는 없다.) 두 번째 예시..

react-query는 onError 옵션을 통해 에러 처리 메소드를 지정할 수 있도록 해준다. 그런데 매 쿼리마다 onError 메소드를 지정해주는 것은 비효율적이다. 예를 들어서 서버 점검으로 인해 503번 HTTP 상태 코드가 반환되었을 때 우리는 공통적으로 서버 점검 관련 안내 메시지 혹은 화면을 보여줄 것이다. 그런데 매 쿼리가 생성될 때마다 503번 코드를 받았을 때 해당 작업을 수행하는 메소드를 지정해주는 것은 비효율적이다. 다행히 react-query는 QueryClient를 생성할 때 default option들을 지정하게 해 준다. 그 중 onError 옵션에 에러 처리 함수를 지정해주면 해당 QueryClient 내부에서 사용하는 모든 useQuery와 useMutation hook에..

웹 사이트 혹은 애플리케이션에서 가장 코스트가 높은 것은 물론 서버와 요청을 주고 받을 때이다. 무엇을 하던 내부에서 처리하는 작업보다는 외부와 통신하는 작업이 비용이 높다. 서버에 대한 리소스 요청을 최적화하는 작업은 프론트엔드 성능 측면에서도 중요하지만 서버 측의 부담을 감소시켜줄 수 있다는 점에서도 신경써줘야 하는 부분이다. 리소스 요청을 최적화하는 방법에는 두 가지가 있다. 하나는 요청하는 리소스의 크기를 줄이는 것이고 하나는 리소스 요청 횟수 자체를 줄이는 것이다. 1. 리소스 용량 줄이기 (1) 트리 쉐이킹 : 트리 쉐이킹은 외부 모듈을 import할 때 필요한 기능만을 가져오는 것을 의미한다. (2) 불필요한 코드 제거하기 (ex. 주석) (3) Minify, Uglify 등을 통해 번들링 ..

웹 캐시 (Web Cache) 웹 캐시(Web Cache) 혹은 HTTP 캐시는 클라이언트가 웹 사이트 혹은 애플리케이션에 접속할 때 정적 자산을 캐싱함으로써 사이트에 접속할 때마다 해당 리소스들을 반복적으로 다시 요청하는 것이 아니라 저장된 사본을 사용하게 해준다. 그를 통해 웹 사이트를 접속할 때 페이지 로딩 시간을 감소시킬 수 있을 뿐만 아니라 서버 측에 가해지는 트래픽 부담 역시 경감시킬 수 있다. 리소스는 캐싱하는 장소는 브라우저일 수도 네트워크 상(ex. 프록시 서버)일 수도 있다. (만약 Cache-Control 헤더 값을 public으로 지정하는 경우 모든 장소에 캐싱이 가능하며 private으로 설정하는 경우 사용자의 브라우저에만 캐싱이 가능하다.) 웹 캐시를 통해 캐싱되는 리소스는 정적..

React Hook Form 리액트에서 폼을 관리하는 것은 생각보다 귀찮은 작업이다. Input Validation, Form Submit 등의 작업을 수행하다보면 별 거 아닌 기능에도 코드가 매우 길어지는 것을 볼 수 있을 것이다. 다행히 React-Hook-Form이라는 라이브러리를 사용하면 ReactJS와 React Native 애플리케이션을 구현할 때 매우 적은 양의 코드로도 손쉽게 폼을 관리할 수 있다. 장점 (사실 React Hook Form은 공식 사이트에서 워낙 장점을 잘 표현해놔서 직접 확인하는 것을 추천한다. 공식 사이트 링크는 위에 있다.) (1) 코드를 적게 작성해도 된다. (2) 렌더링 관점에서 효율적이다. (폼 내에서 리렌더링이 발생할 때 최소한의 리렌더링만을 수행한다. 예를 들..

pkg 기본적으로 Node.js 애플리케이션을 실행하기 위해서는 적절한 버전의 Node.js가 설치되어 있고 필요한 npm 모듈들이 설치되어 있어야 하며 적절한 스크립트를 통해 애플리케이션을 실행해줘야 한다. Node.js 개발을 해 본 사람이라면 무슨 이야기인지 바로 이해가 되겠지만 아쉽게도 세상 모든 사람들이 Node.js 개발을 해 본 것은 아니다. 다행히 pkg라는 라이브러리를 사용하면 Node.js 애플리케이션을 컴파일할 수 있다. pkg는 컴파일 과정에서 Node.js와 필요 모듈들을 모두 포함해서 하나의 바이너리 실행 파일을 생성해준다. Node.js가 포함되기 때문에 실행 파일의 용량이 적지 않다는 것이 단점일 수 있지만 서버에서 구동되는 것이 아니라 사용자에게 배포함으로써 사용자가 직접 ..

PWA (Progressive Web APP) 웹 앱과 네이티브 앱은 각자의 장점을 가진다. 웹 앱은 사용자에게 노출의 측면에서 접근성이 좋다는 장점을 가진다. 반면 네이티브 앱은 해당 OS에 최적화된 부드러운 사용자 경험을 제공해줄 수 있다. 또한 설치된 이후에는 오프라인에서도 동작할 수 있다. 2016년 구글이 새롭게 소개한 기술인 PWA는 두 가지 장점이 동시에 결합된 웹 앱을 구현할 수 있게 해 준다. 보다 정확히 표현하자면 PWA는 새로운 기술이라기 보다는 기존 시스템들의 장점이 결합된 새로운 형태의 애플리케이션을 구축하는 하나의 철학이라고 표현할 수 있다. PWA의 조건 및 기능 어떠한 웹 앱이 PWA인지 판단하는 데 절대적인 지표는 존재하지 않는다. 그러나 다음과 같은 핵심적인 조건들이 충족..