hyesungoh

Learning every moment

TypeScript, 항상 같은 길이인 두 배열 Type 정의하기

typescript logo TypeScript 환경에서 같은 길이의 배열을 사용해야했던 환경에서, TypeSafe하게 작성하고자 공부한 내용을 공유해보겠습니다. 주어진 상황 TypeScript 기반 React 환경에서 custom hook을 개발할 때 맞이한 상황이였습니다. 위 코드와 같이 두 배열을 입력받아야했으며, 항상 두 배열의 길이가 같아야했죠.…

bundle-analyzer, gzip으로 Next.js 최적화하기

Next.js를 사용해 개발한 교내 동아리 랜딩 페이지를 최적화한 경험을 공유합니다. 해당 랜딩 페이지는 다음 링크를 통해 확인하실 수 있습니다! 들어가기 앞서 Lighthouse 지표와 추천 사항을 기준으로 최적화 작업을 진행하였습니다. 저는 최적화 작업이 익숙하지 않지만, 제가 검색한 결과 최신의, 깔끔하게 정리된 내용이 없어 공유하기로 생각했다는 점…

'FECONF 2021 왜 나는 React를 사랑하는가' 정리

본 게시물은 안희종 님이 발표하신 FE CONF 2021의 ‘왜 나는 React를 사랑하는가’를 듣고 정리한 내용입니다. feconf 2021 이미지 출처 : FEConf 페이스북 클리어한 멘탈 모델, 작고 단단한 코어 리액트는 프로그래밍 언어와 닮은 점이 많다. Reconciler는 리액트 코드를 해석하고 실행하는 역할, 즉 엔진(컴파일러)의 역할을 한…

Toss SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code 정리

toss slash 21 토스 SLASH 21의 라는 주제로 진유림님이 발표하신 내용을 정리한 내용입니다. 토스 SLASH 21 주소 실무에서 클린 코드의 의의 코드 리뷰, 디버깅 시 소모되는 시간이 적어 유지보수가 용이하다. 안일한 코드 추가의 함정 만약 위 상태에서 연결 전문가에 대한 팝업을 추가하는 기능을 개발하게 될 시 이는 타당하다고 생각되지만…

프로그래머스-여행경로 - Javascript

항공권 정보가 담긴 2차원 배열을 이용해 모든 공항을 방문하면서 알파벳 순서가 앞서는 경로를 출력하는 문제. 재귀적으로 현재 위치, 남은 티켓들, 현재까지 온 경로들을 이용해 출발할 수 있는 경로들로부터 호출하여 풀었다.

'FECONF 2021 컴포넌트, 다시 생각하기' 정리

본 게시물은 원지혁 님이 발표하신 FE CONF 2021의 ‘컴포넌트, 다시 생각하기’를 듣고 정리한 내용입니다. feconf 2021 이미지 출처 : FEConf 페이스북 의존성 를 만드려면 이 필요하다 -> 의 의존성 : 의 의존성: 스타일, 로직, 전역 상태, 리모트 데이터 스키마 리모트 데이터 스키마 : API 서버에서 내려주는 데이터의 모양 숨…

프로그래머스-완주하지-못한-선수 - Javascript

참가 선수 배열과 완주한 선수 배열이 주어졌을 때 완주하지 못한 선수 문자열을 반환하는 문제. 첫 번째 풀이는 한 사람만이 완주하지 못한 조건을 이용해 정렬하여 같은 인덱스 값으로 비교하였을 때 다른 것을 정답으로써 풀었으나 파이썬과는 달리 효율성 테스트에서 통과하지 못하였다. 다음 풀이는 오브젝트를 이용해 완주하지 못한 선수를 확인하여 풀었다.

'코딩을 지탱하는 기술'을 읽고

니시오 히로카즈 저의 ‘코딩을 지탱하는 기술’을 읽고 느낀점을 공유합니다. 책에 대헤 기억하고 싶었던 내용들은 제 깃허브에 정리해두었습니다. 읽게된 계기 프로젝트를 진행하면서 프로덕트를 개발하면서 공부하는 내용들은 프레임워크 사용법, 라이브러리 사용법 등 개인적으로 low-level 기술이라고 생각되지 않았습니다. 현재 프론트엔드 개발자로써 개발을 진행하…

i18next를 사용해 React 다국어 지원하게 만들기 w/ TypeScript

i18next React 공식문서나 Apple 등의 다양한 웹 서비스에서 다국어를 지원하고 있습니다. React 환경에서 다국어를 지원하는 서비스를 개발하며, TypeScript로 TypeSafe하게 개발하고자 노력한 경험을 공유하고자 합니다. 설치 React 생태계에서 다국어를 지원을 위한 라이브러리는 크게 와, 로 나누어지는 것으로 확인하였습니다. 스…

프로그래머스-네트워크 - Javascript

컴퓨터의 수와 컴퓨터들이 연결되어 있는 지 여부를 나타내는 배열이 주어질 때 연결된 그룹 (네트워크)기 몇 개인지 반환하는 문제. 방문했던 컴퓨터들을 확인하기 위한 isVisit 배열을 만들어 관리하였으며, 전체 네트워크의 수를 확인해야하기 때문에 n까지 반복문을 돌고 방문하지 않은 컴퓨터들에 대해 bfs 연산을 통해 방문처리를 하여 풀었다.