기술 블로그

ChatGpt는 인공지능 챗봇입니다. 뛰어난 성능 때문에 전세계적으로 사용자 수가 급증하고 있습니다. 출시 두 달 만에 사용자 수 1억 명에 도달했으며, 이는 틱톡, 인스타그램보다 성장 속도가 훨씬 빠르다고 합니다. 그래서 현재 프로젝트에서 작업 중인 리액트 코드를 가져와 리팩터링을 시도했습니다. 아래의 코드는 브라우저의 넓이가 특정 넓이 이하인지 확인하여 boolean값을 반환해주는 커스텀 훅입니다. import { useEffect, useState } from 'react'; export const useMobileView = (width: number) => { const [isCurrentMobileWidth, setIsCurrentMobileWidth] = useState( window.inn..

1) 필드의 수를 줄이고 private 필드로 구현하기 이번 다리 건너기 미션에서 class 필드를 이용했다. 하지만 단순히 이용하는 것이 아니라 필드의 수를 최대한 줄이고 private 필드를 이용했다. 필드의 수가 많은 것은 객체의 복잡도를 높이고, 버그 발생 가능성을 높일 수 있다. 또한 public 필드는 class 외부에서 읽히고 수정될 수 있기 때문에 외부에서 적절치 못한 접근으로부터 객체의 상태가 변경되어 버그가 발생할 확률을 높일 수 있다. 하지만 private 필드는 소속된 class에 고유한 스코프를 갖으며 '정보 은닉'을 한다. 정보 은닉의 장점은 외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를..

1) 객체 지향 프로그래밍에 대해 배웠다. 그 동안 단순히 함수로 문제를 해결해왔다. 하지만 class의 constructor, 메서드 등을 정의하고 사용해보며 객체 지향 프로그래밍에 대해 배울 수 있었고 장점을 느낄 수 있었다. 특히 하나의 class 내에 비슷한 역할을 하는 메서드들을 한 곳에 모을 수 있기 때문에 구조화된 것을 볼 수 있어서 좋았다. 그러나 class의 장점 중 하나인 재사용성을 제대로 활용해보지 못한 부분이 아쉬웠다. 2) MVC패턴을 적용함으로써 구조화된 프로젝트를 경험했다. 파일의 구조를 model, view, controller로 분리했다. model은 상태를 관리, view는 렌더링(출력)을 관리, controller는 사용자의 동작을 처리하고 view와 model 사이에서..

최근 면접에서 useState 일괄처리에 대한 질문을 받았습니다. 그 동안 많이 사용해본 useState 였지만 일괄처리에 대해 들어본적이 없어서 대답을 못했습니다. 그래서 이번 기회에 useState 일괄처리에 대해 알아보려고 합니다. useState 먼저 기본적으로 useState는 상태 관리 기능을 하며 리액트에 내장되어 있는 Hook입니다. 아래의 코드는 이 Hook을 활용하여 버튼을 클릭했을 때 value값이 1씩 증가하는 간단한 예시입니다. const Example = () => { const [value, setValue] = useState(0); return setValue(value+1)}>1더하기 } 먼저, useState(0)를 호출하여 초기 상태 값을 0으로 설정한 value 상태..

현재 프로젝트에서 달력을 만들고, 해당 날짜에 할 일을 보여주는 작업을 맡았습니다. 달력 라이브러리를 사용할까 고민했었지만, 추후 커스터마이징하기 편하고 라이브러리의 업데이트로 인해 버전 호환성 문제를 피하기 위해 직접 구현하기로 결심했습니다. 먼저, 아래는 작업한 최종 결과물입니다. 달력을 만들기 위해 필요한 요구사항을 정리하자면 다음과 같습니다. 1. 매달 42개의 날짜를 보여주기 (이전달의 후반날짜 + 현재달의 전체날짜 + 다음달의 초반날짜) 2. 1주의 시작은 일요일로 설정하기 3. 매주 일요일의 날짜는 빨간색으로 지정하기 4. 이전달과 다음달의 날짜는 투명도 지정하기 5. 포커싱된 날짜 배경색 지정하기 (처음에는 오늘 날짜를 자동으로 포커싱 및 배경색 지정) 6. 달력의 날짜를 완성했다면, AP..

State와 Props 리액트에서 상태관리를 위해 기본적으로 지원해주는 state와 props를 사용할 수 있지만 문제점이 있습니다. state와 props는 기본적으로 단방향 하향식으로 데이터를 전달한다. (부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다) 특징으로는 구조가 단순하여 유지보수하기 쉬우며, 단방향 하향식으로 데이터 전달되기 때문에 보통 최상위 컴포넌트 App컴포넌트에서 상태 관리를 한다. 이것은 전역적으로 상태 관리를 할 때는 비효율적이다. 아래의 그림과 같이 App컴포넌트에서 상태관리를 한다고 가정했을 때, App컴포넌트에서 관리하는 value값을 G컴포넌트로 전달하려면 복잡하게 (App -> A -> B -> E -> G)까지 여러 과정을 거쳐야한다. (이런 문제를 Prop Dr..

웹팩 데브 서버가 필요한 이유 개발할 때 파일 수정 후 매번 빌드 명령어(npm run build)을 입력하여 빌드를 해서, 빌드 결과를 확인한다. 하지만 웹팩 데브 서버를 이용할 경우, 파일 수정하면 자동으로 빌드한 후 브라우저를 새로고침 해준 결과물을 즉시 볼 수 있다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다. 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할..

과정 자바스크립트 파일만 있을 때는 빌드할 때 문제가 없지만, CSS, 타입스크립트 등이 있다면 반드시 loader를 사용해야 한다. babel-loader는 트랜스파일러로써 코드 변환을 해준다. 최신 자바스크립트 문법(es6)이나 JSX문법으로 작성된 코드를 ES5문법으로 변환해준다.(구버전 웹 브라우저와 호환하기 위해서) 1. JS파일 변환할 때 1-1. npm install -D babel-loader @babel/core @babel/preset-env 입력 1-2. webpack.config.js 설정하기 (module의 rules안에 코드를 추가했다) var path = require("path"); module.exports = { mode: "none", entry: "./src/index..