기술 블로그

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

최근 면접에서 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..

과정 1. css폴더 안에 style.css 파일 생성하고 코드 작성하기 .index { color: red; } 2. index.js 수정하기 - 3번째 줄의 import css를 추가했다. - 일반적으로는 html파일에서 6. npm run build 입력 후 index.html에서 live server로 확인 결론 생각보다 간단하게 설정을 완료했다. 이어서 바벨 로더도 설정해봐야겠다!.!

서론 로딩 속도는 사용자 경험에서 중요한 역할을 한다! 그래서 웹팩의 장점 중 하나인 빠른 로딩 속도를 알아보고 싶어서 진행했다. 웹팩을 사용하지 않았을 때의 로딩 속도와 웹팩을 사용했을 때의 로딩 속도를 비교했다. 이 때 더 확실한 차이를 위해 개발자 도구에서 네트워크 속도를 느리게 낮춰서 진행했다. 본론 1. 웹팩을 사용하지 않을 때 1-1. 파일 생성 및 코드 작성하기 - index.html - src/index.js const Index = () => { const element = document.createElement("div"); element.innerHTML = "Index 컴포넌트"; return element; }; document.body.appendChild(Index()); -..