yeeed_log

[ 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) Output 웹팩이 빌드되고 난 후 결과물의 파일 경로. // webpack.config.js module.exports = { output: { filename: 'bundle.js' } } 객체형태로 옵션을 추가할 수 있다. 최소한의 옵션으로 filename을 지정해줘야 한다. Output 옵션 속성 // webpack.config.js module.exp..

[ 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) Entry 웹팩에서 웹 자원(HTML, CSS, JavaScript, Image, Font...)을 변환하기 위해 필요한 최초 진입점 자바스크립트 파일 경로 웹팩이 빌드를 수행하는 곳 // webpack.config.js module.exports = { entry: './src/index.js' } 어떤 내용이 담겨야 하는가? 웹 어플리케이션의 전반적인 구조..

[ 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..