[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) 웹팩이란? 자바스크립트 모듈 번들러중 가장 인기있는 모듈 번들러로 사용된다. 여러개로 나누어져있는 파일들을 각각의 모듈로 보고 이를 조합하고 압축해 최적화해주는 도구. 최종 배포용 파일을 만들어 준다. 웹팩에서 모듈이란? 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원(HTML, CSS, JavaScript, Images, Font 등..
개발자 분들이라면 git에 관련된 키워드는 익숙하실 수밖에 없는데요. 문서화 또한 익숙하시겠죠? 많은 개발자분들은 개발하며 겪은 에러나, 최신 기술 트렌드등 기타 다양한 것들을 공유하고 있습니다. 이렇게 정보들을 공유하기 위해 다양한 플랫폼을 이용하고 있는데요, 대표적으로 벨로그, 티스토리, 직접 제작한 웹사이트 등이 있습니다. 저 또한 벨로그와 티스토리를 사용해 봤고 현재는 티스토리를 사용하고 있습니다. 그러다가 GitBook이라는 것을 발견하고 사용해보면서 소개해드리고자 글을 적게 되었습니다. 저처럼 다양한 정보들을 좀 더 체계적으로 문서화하고 싶고 마크다운 언어도 사용하고 싶고(티스토리는 마크다운 언어가 잘 안 되어있어요ㅠㅠ) GitHub 잔디도 심고 싶으시다면 바로 이 글을 참고해주시면 되겠습니다..
브라우저 브라우저가 웹페이지를 렌더링하는 과정을 알아보기전에 브라우저가 무엇인지 간단히 짚고 넘어가도록 하겠습니다. 우선 브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox 등을 말합니다. MDN에서는 이렇게 설명하고 있습니다. 웹 브라우저 또는 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램입니다. 브라우저는 가장 익숙한 타입의 사용자 에이전트입니다. 브라우저는 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여줍니다. 자원은 페이지 외에도 이미지, 비디오 등의 콘텐츠들도 포함됩니다. 브라우저 렌더링 과정 렌더링의 기본 동작 과정은 크게 다섯단계로 나눌 수 있습니다. HTML과 CSS파일..
들어가기 전에 프로그래머스 코딩 테스트 0 레벨이 생겼다. 1 레벨을 풀고 있었지만 아무래도 기초가 부족하다 느껴져 0 레벨을 다 풀어보고자 차근차근 풀고 있다. 0 레벨 문제는 총 100개로 구성되어있고 생각보다 간단한 문제들이 많아서 기초를 다지기에 제격이라고 느껴진다. 그렇게 한 문제씩 풀어나가던 도중 내 답안에서 궁금점이 생겨 글을 남긴다. 궁금증이 생긴 문제 자릿수 더하기 정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 retrun 하도록 solution 함수를 완성해주세요. 첫 번째로 시도한 방법 function solution(n) { return n .toString() .split('') .reduce((a, b) => Number(a) + Number(b)) } 이렇게 하니 ..
올해 두 번째 컨퍼런스를 가다 FE Conf 2022 는 올해 들어 두 번째로 경험한 컨퍼런스다. 첫 번째 컨퍼런스는 위니브에서 주최해주신 제주 웹 컨퍼런스였고 FE Conf는 오랜만에 오프라인으로 개최되는 거라고 해서 상당히 들떴었다. 운 좋게도 티켓팅에 성공해 지난 10월 8일 FE Conf에 다녀온 것을 작성해보려 한다. 행사는 잠실 롯데월드타워 31층에서 진행됐다. 1층에서 이름과 본인 확인을 한 후 주최 측에서 나눠주는 이름표를 들고 가면 입장을 할 수 있다. 31층에서는 웰컴 키트(?)처럼 FEConf에서 준비해준 행사 기념품을 시작으로 각 기업이 준비한 설문조사 및 퀴즈를 맞히면 상품을 받아갈 수 있었는데 사람들이 생각보다 많아서 어수선한 분위기였다. 나중엔 사람들이 더 많아져서 미리 와 상..
로그인 창을 구현할 때 우리는 input을 이용하여 사용자의 정보를 입력받습니다. 이 과정에서 사용자의 입력정보가 유효한 정보인지 확인하기 위해 상태 값(state)을 만들어 일일이 체크를 해줘야만 했습니다. input이 몇 개 없다면 이러한 방법으로 유효성검사를 하는 것이 나쁘지 않아 보일 수도 있습니다. 하지만 검사해야하는 input이 여러 개라면 어떨까요? 회원가입과 같은 확인해야 하는 사용자의 정보가 많아짐에 따라 각 input을 관리하는 상태 값들 또한 많아지게 됩니다. form validation까지 한다면 더욱더 관리해야 하는 상태 값은 늘어나게 될 것입니다. 이러한 문제를 해결하기 위해 react-hook-form 이라는 라이브러리를 사용해 볼 수 있습니다. 이 글은 react-hook-f..
리액트에서 조건문 사용하는 방법 알아보기. 개발을 하다 보면 조건문을 사용하는 경우가 아주 많은데 나의 경우 JSX에서 if문, switch문으로 조건문을 사용하려 하니 오류가 났다. JSX에서 조건문 사용하기 상황 발생 - map메서드를 사용해서 li 컴포넌트를 렌더링 해주고 있었는데 button 안에 name이라는 props를 받는 아이콘을 상황에 맞춰 렌더링 해주고 싶었다. Object.values(Categories).map((item, idx) => { return ( ) } 첫 번째 시도: if문 사용하기 {Object.values(Categories).map((item, idx) => { return ( if(true) aaa ) } 우선 if문이 잘 나오는지 확인하기 위해 true 값을 주..
이전에 만들었던 리액트 프로젝트 파일을 재사용하려고 봤더니 콘솔에 이런 오류가 떴다. 리액트 18에서는 더 이상 ReactDOM.render을 사용하지 않으니 createRoot를 사용하라는 말 공식문서에도 아주 잘 나와있다. 공식문서 예제를 살펴보면 // Before import { render } from 'react-dom'; const container = document.getElementById('app'); render(, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container)..
회원가입 폼을 react-hook-form을 이용하여 개발하던 도중 만난 에러 일전에 validation을 직접 useState로 상태 관리를 하며 개발한 적이 있었는데 코드도 너무 길어지고 복잡해 보여서 간편한게 없나 찾다 리액트 훅 폼을 발견하고 적용해봤지만 적용이 되지 않았다... 정확히는 register를 사용하려했는데 register로 전달된 data값이 콘솔에 찍히지 않았다 ㅜ const Input = ({ id, type, ...props }: InputProps) => { return ; }; 내가 작성했던 Input 컴포넌트. 알고보니 register에는 onChange, onBlur, ref, name 을 props로 전달하고 있었는데 일반적인 사용법처럼 props로 register을 ..
타입스크립트를 갓 배우고있는 요즘. tsconfig.json 설정을 하면서 잊지않기 위해 or 다시보기위해 정리하는 글 compilerOtions 컴파일 속성을 설정 target - 어떤 버전의 자바스크립트로 컴파일할건지 지정 lib - 어떤 환경에서 동작할건지 지정 allowJs - js 파일을 허용할지 결정 - 타입스크립트는 .js 파일을 허용하지 않는데 이걸 예외처리해줌 module - 모듈 내보내기, 불러오기 코드가 어떤 방식의 코드로 컴파일 될지 결정 moduleResolution - 모듈 해석 전략지정 - Node.js 방식으로 해석하려면 node를, 1.6버전 이전의 타입스크립트에서 사용했던 방식으로 해석하려면 classic을 입력 baseUrl - import형식의 모듈을 가져올때 경로 지..