prev 썸네일형 리스트형 Hoisting 이란? 유례? Hoisting : 끌어올리다. 식별자를 끌어올리다. hoisting은 어디서 나온걸까? 호이스팅을 알려면 먼저 알아야 할 것이 있는데, 실행컨텍스트 이다. Context : 해당 코드의 배경이 되는 조건, 환경정보를 뜻한다. Excution Context? 코드를 실행하는데 필요한 배경이 되는 조건/ 환경 동일한 조건과 환경을 지니고 있는 코드 조각들을 한데 모아 놓은 덩어리가 있다고 했을때, 이 코드뭉치를 실행할 때, 필요한 조건이나 환경정보가 실행컨텍스트라고 명명합니다. Excution Context → Lexical Enviroment 실행컨텍스트안에 있는 Lexical Enviroment를 알아야한다. Lexical Environment는 어휘적 / 사전적 환경 실행컨텍스트를 구성하는 환.. 더보기 브라우저 workflow & virtual DOM - 01 최근에 virtual DOM의 동작과정에 대해 궁금해서 찾아봤다. 근데 virtual DOM을 이해하기 위해서는 순서가 있다... 허허허허허헣헣ㅎ virtual DOM을 이해하기 위해서는 브라우저 workflow를 알고 가면 좋다. 이해가 훨씬더 잘되는 느낌? 그래서 오늘은 브라우저 workflow과정을 적고 가려고한다. 브라우저? 브라우저란 무엇일까? 우리가 인터넷을 접속할 때 사용하는 Chrome, Safari, FireFox, Explorer 등을 말한다. MDN 웹 브라우저(Web browser)혹은 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크 를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다. 브라우저는 사용자 에이전트의 가장 친숙한 유형입니다. 브라우저는 유저가 .. 더보기 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 폴더 : .. 더보기 이전 1 2 3 4 5 6 7 8 다음
