본문 바로가기

전체 글

webpack 공부하기 - 4 mode 값 넣기 공식 홈페이지에서 확인을 해보면 다음과 같이 3가지 mode를 입력할 수 있고, 원하는 mode를 선택하면된다. const path = require('path'); //node.js에서 파일의 경로를 쉽게 핸들링 할 수 있게 도와주는 부품 module.exports = { mode: 'development', entry: './source/index.js', // 입구에 해당하는 파일 입력 output: { path: path.resolve(__dirname, 'public'), //__dirname : 현재 webpack.config.js 파일이 위치하고 있는 경로를 알려주는 변수 // public 이라는 하위 경로에 최종적인 결과물을 갖다 놓으라는 뜻 filename: 'index.. 더보기
webpack 공부하기 -3 웹팩 config 만들기 npx webpack --entry ./source/index.js --output-filename index_bundle.js -o ./public 이 명령어는 웹 팩을 실행하는 명령어 입니다. 웹 팩을 실행하려면 항상 이코드를 외우거나 다른곳에 저장한 뒤 필요할 때 찾아서 사용해야하는 번거러움이 생긴다. 또한 운영하는 프로젝트가 커질 수 록 명령으로 하는게 대단히 어려워 진다. 그래서 웹 팩에게 좀 더 체계적이고 또 보기 좋게 또 재사용하기 좋게 시키기 위한 방법으로 컨피그레이션 파일을 만드는 방법입니다. 생성하기 webpack.config.js 파일을 생성한다. (자세한 정보는 webpack 공식 홈페이지로 들어가서, Guides → Getting Started 를 참고) .. 더보기
webpack 공부하기 -2 webpack의 도입 webpack을 도입했을 때 우리가 얻을 수 있는 효과는 리팩토링입니다. 구동되는 방법을 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 방법입니다. 설치 현재 디렉토리를 node.js의 프로젝트 폴더로 선언한다. npm init -y webpack을 프로젝트 폴더에 설치 npm install -D webpack webpack-cli package.json 에서 설치 확인 4. index.html안에 있는 javaScipt 코드를 별도의 index.js 파일로 뺀다. index.js라는 파일은 hello.js 파일과 world.js라는 파일을 import를 통해서 사용하고 있는것을 볼 수 있습니다. 즉, 우리가 만들고 있는 애플리케이션의 입구에 해당하는 파일은 index.js .. 더보기
webpack 공부하기 -1 웹팩을 공부하기 위해서는, 정적 페이지를 구성해보자 html 파일과 javaScript를 생성해서 기본 페이지 구성을 갖춘다. 다음과 같이 폴더경로에 파일들을 생성하고, 안에 내용을 채웠다. (와 근데, JavaScript, html로 웹사이트 만드는 거 진짜 오랜만이네 재밌네 ㅋ) 위와 같을때 생기는 문제? hellow.js에도 word 가 있고 world.js에도 word가 있어서 결국 가장 늦게 선언된 script로 덮어쓰기 되면서 word라는 단어는 ‘world’ 가 된다. 지금은 나혼자만들어서 문제를 바로 인지 할 수 있었지만, 여러 개발자들이 작업할 경우 변수의 이름이 중복될 가능성이 생길 수 있다. 그래서 규모있는 애플리케이션에서는 이름의 충돌이 너무나 심각한 문제이기 때문에 그걸 극복하기 .. 더보기
webpack 알아보기 react를 사용하면서 항상 CRA를 사용해서 Webpack이라는 용어는 낯설로 어색했다. 근데 그러면서도 이건 도대체 뭘까? (특히, eslint 다룰때 많이 궁금했음) 이제 부트캠프도 끝이 났고, 시간도 있겠다. 궁금했던 내용에 대해 공부해보려고 찾아봤다. 사전적 내용 웹팩(Webpack)은 현대적인 웹 개발에서 사용되는 정적 모듈 번들러(static module bundler)입니다. 웹팩은 프론트엔드 애플리케이션의 자원(JavaScript, CSS, 이미지 등)을 모듈로 간주하고, 이를 종속성 그래프(dependency graph)로 분석하여 하나 이상의 번들(bundle)로 묶어줍니다. 웹팩은 애플리케이션을 구성하는 모든 자원을 로드하고 의존성을 해결하여 최종 번들을 생성합니다. 이렇게 번들된 .. 더보기
이미지 추가 nextjs 에서 이미지를 추가하는 방법중 최적화를 해서 하는 방법이 있다고 한다. 기존 방식은 import React from 'react' export default function List() { let 상품 = ['Tomatos','Pasta','Coconut']; return ( 상품목록 { 상품.map((value, index)=>{ return ( {value} $40 ) }) } ) } 이런식으로 img 태그를 활용해서 public에 선언한 이미지명을 불러오는 방식이었다. 최적화된 이미지 넣는 방법 성능과 속도가 중요하다고 생각이 될때는, 라는 태그가 있다. 그럼 자동으로 이미지 lazy loading & 사이즈 최적화 & layout shift 방지를 해준다고 한다. 방법은 1. 상단에 .. 더보기
NestJS 해보기 맨날 react 기반 클라이언트 사이드 렌더링을 해보다가 문득 궁금했다. "서버 사이드 랜더링은 뭘까, 뭐가 다를까" 하는 생각이 들었는데, Nestjs를 하면 서버사이드렌더링을 할 수 았다고?!! 바로 시작해보기로했다. 설치 npx create-next-app@latest 설치는 간단했다. 다음과 같이 입력하고 엔터누르면 프로젝트가 생성됬다. 다음 선택은 자기가 원하는대로 하면된다. 남자답게 눌러버려라. 나는 일단 간단한 테스트만 진행할 예정이기 때문에 다음과같이 router 를 제외하고는 다 'NO'를 눌렀다. 다음과같이 프로젝트 파일들이 있고, app폴더 : 내가 코드를 짤 폴더라고 생각하면되고, page.js: 메인페이지 layout.js : 메인페이지 감싸는 용도의 페이지 public 폴더 : .. 더보기
Virtual DOM 알아보기 Virtual DOM 이 무엇일까? “DOM을 추상화한 가상의 객체” regular DOM의 추상화 개념을 활용할 새로운 또 다른 DOM 이다. 이것은 빈번한 repaint와 reflow문제를 보완하였으며, Dynamic UI를 만들기 위해 적합한 기능들이 내장되어 있다. 그러므로 Virtual DOM은 SPA 모델의 웹 어플리케이션 에서는 regular DOM 보다 최적의 성능을 발휘한다. 그래서 왜필요하다고? 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생합니다. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한다는 소리고, 전체적인 프로세스를 비효율적으로 만듭니다. 만약 뷰에 변화가 생기면, 그 변화는 실제 DOM에 적용되기전에 가상의 DOM에 먼저 적용시키고.. 더보기

티스토리툴바