정체된 과거 & 나에게 주어진 성장의 기회네이버 부스트캠프 베이직 과정을 마치고 졸업 과제에 치여 바쁘게 살아가던 중 다음과 같은 메일을 받았다.사실 챌린지 과정에 합격할 것이라고 생각하진 않았다. 그 이유는 졸업 과제 마감일자가 임박하여 베이직 과정에 온전히 몰입하지 못했다는 것이다. 더 좋은 설계와 좋은 코드를 작성할 수도 있었음에도 그러지 못했고, 미션을 수행함으로써 더 많은 것을 얻어갈 수 있었을텐데 많은 성장을 이루지 못했다고 생각했다. 지금까지의 내 모습을 돌이켜 보았을 때, 하나만 해도 충분히 바쁜 스케줄을 여러 개 병행하면서 살아왔던게 내가 성장하지 못하고 같은 위치에 머물러 있는 원인이 되었던 것 같다. 그래서 이번에 챌린지 합격 소식은 나에게 주어진 새로운 기회라고 생각하고 챌린지 과정..

면접을 위한 CS 전공지식 노트를 읽고 팩토리 패턴에 대해 정리한 글입니다.팩토리 패턴이란?팩토리 패턴(Factory pattern)은 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다.특징상위 클래스와 하위 클래스가 분리되어 결합도가 느슨하다.인스턴스 생성 방식에 대해 알 필요 없다. -> 유연성객체 생성 로직이 따로 있어서 리팩토링 시 한 곳만 고치면 된다. -> 유지 보수성 증가예시: 라떼 레시피, 아메리카노 레시피, 우유 레시피라는 구체적인 하위 클래스가 상위 클래스인 바리스타 공장으로 전달되고, 바리스타 공장에서 레시피를 토대로 우유등을 생..

면접을 위한 CS 전공지식 노트를 읽고 싱글톤 패턴에 대해 정리한 글입니다.싱글톤 패턴이란?싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 보톤 데이터베이스 연결 모듈에 많이 사용한다.하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용한다.장점인스턴스를 생성할 때 드는 비용이 줄어든다.단점인스턴스에 대한 의존성이 높아진다.TDD를 할 때 단위 테스트를 주로 하는데, 싱글톤은 각 테스트마다 독립적인 인스턴스를 만들기가 어렵다.모듈 간 결합이 강해진다.의존성 주입메인 모듈이 직접 다른 하위 모듈에 대한 의존성을 주기보다는 중간에 의존성 주입자가 이 부분을 가로채 메인 모듈이 간접적으로 의존성을 주입하는 방식이다.이를 통해 메인 ..

에러 발견React와 TypeScript를 활용하여 프로젝트를 진행하던 도중 프로젝트를 빌드하다가 다음과 같은 에러를 발견했다.setData라는 값이 선언되었으나 사용되지 않았다는 이유로 빌드에 실패하였다. 처음에는 그냥 setData만 삭제하면 실패하지 않겠구나 하고 setData를 제거하는 선에서 끝낼려고 했는데, 생각해보니 너무 억울했다. 고작 그런 이유로 에러를 발생시킨다는게 규칙이 너무 엄격한 것 같다고 생각했다. 그래서 이러한 규칙을 완화하기 위해 에러가 발생하는 이유를 찾아보았다.에러 원인빌드를 시도했을 때 에러가 발생하였으니 컴파일 과정에서 실패했을거라 예상하고 tsconfig.json 파일을 열어보았다. TypeScript 공식문서에서 tsconfig.json에 대해서 확인할 수 있다. ..

개요CSS에서 Z축을 표현할 때는 주로 z-index 속성에 정수 값을 입력하여 어떤 요소를 위로 올릴지 결정한다.아래 그림처럼 z-index 값이 클수록 요소가 더 위에 쌓이는 것을 확인할 수 있다.이슈그러나 z-index는 단순히 요소를 위로 올리는 속성이라고 생각했던 찰나, z-index 값을 아무리 높게 설정해도 요소가 위로 올라오지 않는 현상을 발견했다.아래 그림에서는 모달창이 헤더 아래에 가려져 있는 모습을 확인할 수 있으며, 이때 모달의 z-index는 101이고 헤더는 100으로 설정되어 있다.z-index를 높게 설정하면 낮은 값의 요소보다 위에 표시되어야 하는 것이 아닌가? 라는 의문이 들었고, 이 궁금증을 해결하기 위해 z-index와 쌓임 맥락(Stacking Context)에 대해..

웹에서 특정 요소에서 이벤트가 발생하면 이벤트가 원하는 요소에 도달하기까지는 다음과 같은 과정을 거친다. 먼저 캡처링 단계에서는 최상위 window 객체에서 문서 트리를 따라 하위 요소로 이벤트가 전파된다. 그리고 타깃 단계에서 이벤트의 발생원을 식별한다. 버블링 단계는 이벤트가 발생원에서 상위 요소로 전파되는 단계다. 최종적으로 최상위 window 객체에 도달하면 이벤트 전파가 종료된다. 정리하자면, 이벤트 처리는 이벤트 발생원에서만 실행되는 것이 아니다.아래 예시 코드를 보면export default function App() { const handleParent = () => alert('부모 요소'); const handleCurrent = () => alert('현재 요소'); const ..

리액트로 프론트엔드 개발을 하다보면 웹 어플리케이션의 크기가 커지게 되는데, 그만큼 번들 크기가 커지고 초기 로딩 시간이 길어져 사용자 경험(UX)가 저해된다. 이런 상황에서 React의 Suspense와 동적 import를 활용하면 사용자에게 필요한 코드만 그때그때 가져와 초기 렌더링 비용을 감소시킬 수 있다. 이번 글에서는 내가 진행했던 프로젝트에서 Suspense와 동적 import를 활용하여 성능을 개선한 과정을 이야기하고자 한다. 성능 최적화 전 코드는 다음과 같다.import { createBrowserRouter, createRoutesFromElements, Route,} from 'react-router-dom';import Layout from './components/layout..

Lighthouse란?구글에서 만든 웹사이트의 성능을 측정하고 개선 방향을 제시해주는 자동화 툴이다.웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 최적화해야 하는지 알 수 있다.Lighthouse 사용법Chrome에서 설치를 클릭하면 설치를 진행하며, 설치가 완료된 경우 F12를 통해 Chrome 개발자 도구를 연다.상단 탭에서 Lighthouse를 클릭하여 성능 측정을 위한 Lighthouse 탭을 열 수 있다. 이미지와 같이 모드, 기기, 카테고리를 선택할 수 있는데 각 메뉴에 대한 설명은 아래와 같다.모드탐색: 여러 페이지 전환이나 사용자 행동을 시뮬레이션 하며 성능 및 기타 지표를 분석하는 모드기간: 일정 기간 동안 모니터링하면서 성능을 측정하는 모드스냅샷: 특..

React로 진행하던 웹 프로젝트에서 외국인을 위해서 여러 언어를 지원하는 기능을 도입하자는 얘기가 나왔다. 서비스 주요 대상이 외국인이었기 때문에 한국어, 영어, 중국어, 일본어, 베트남어 등 많은 언어를 지원해야 한다. 그래서 리액트 프로젝트에 국제화 서비스를 도입하기 위해 react-i18next 라이브러리를 사용하기로 하였다. react-i18next 사용법react-i18next은 번역을 위한 JSON 파일을 언어별로 준비하고 useTranslation Hook에서 반환해서는 t 함수를 통해 key 값을 넘겨주면 value를 반환하는 방식으로 동작한다. 아래는 각각 한국어, 영어에 해당하는 JSON을 작성한 결과이다.한국어// locales/ko/common.json{ "Hello": "안녕하..

다른 폼 요소와 달리 파일 입력 박스는 앱에서 값을 설정하지 않는다(사용자가 지정한 값을 앱이 받을 뿐, 앱이 특정 파일을 지정할 수 없다). 따라서 파일 입력 박스는 항상 비제어 컴포넌트로 구현된다.다음은 선택한 파일 정보를 로그에 출력하는 예시다.export default function FormFile() { // 파일 입력창에 대한 참조 const file = useRef(null); // [보내기] 버튼 클릭 후 파일 정보 로그 출력 function show() { const fs = file.current.files; // 획득한 파일군을 순서대로 스캔 for (const f of fs) { console.log(`파일명: ${f.name}`); con..