Front-End15 [학습정리] Webpack,Babel babel https://babeljs.io/docs/en/ 정의 공식문서에서는 babel을 다음과 같이 표현한다. Babel is a Javascript compiler. Use next generation JavaScript 바벨은 최신 버전의 자바스크립트 문법(ES6+)을 이전 버전의 자바스크립트 문법으로 변환시켜주는 트랜스 컴파일러다. babel을 사용한다고 해서 모든 자바스크립트 최신 문법을 사용할 수 있는건 아니다. 기존에 문법에 없던 문법은 pollyfill 을 추가하여 지원하게 한다. pollyfill 자바스크립트의 최신기술을 구버전 브라우저에서 사용하기 위해서는 변화와 함께 폴리필도 사용해야 한다. 폴리필은 런타임 기능 주입을 말한다. 런타임 주입 기능은 브라우저에서 코드가 실행될 때 기.. 2023. 2. 17. [학습정리] Storybook Storybook? Storybook은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경이다. 스토리북은 컴포넌트를 목록화하여 보고 싶은 컴포넌트를 언제든 확인 가능하도록 만들어준다. 하나의 디자인 시스템이라고 생각하시면 편할 것 같다. 스토리북 슬로건 간단히 설명하자면 버튼이나 아바타 툴팁 같은 매우 작은 컴포넌트를 독립적으로 만들고 그 조합으로 form, header, list, table 같은 조금 더 복잡한 컴포넌트를 만드는 것. 그리고 그 컴포넌트들로 페이지를 구성하고 로직 붙여서 프로젝트를 완성하는 방식을 말하는 말하는 거야. 스토리북을 왜 사용해야 하는데? 스토리북은 두 가지 특징 이 있다. 독립적인 환경에서 그립니다. 컴포넌트를 재사용하여 다시 그립니다. 결과물을 쉽고 빠르게 확인할 수 .. 2022. 12. 16. [학습정리] Next.js를 프로젝트에서 사용한 이유 학습정리 : Next.js 이 문서는 Next를 처음 공부하면서 작성한 글로 잘못된 정보가 있을 수 있습니다. Next.js란? Next.js는 React로 만드는 서버사이드 렌더링 프레임 워크이다. 서버사이드 렌더링을 하면 뭐가 좋은데? 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게 된다. 이때까지 사용자는 많은 시간을 대기해야한다.(첫 로딩 시간이 오래 걸린다.) seo 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보를 볼 수 없다. 검색엔진의 봇에 아무 페이지도 걸리지 않아, seo에 불리하다. 이런 두가지 문제점을 해결하는 것이 서버 사이드 렌더링이다. 해결 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어든.. 2022. 12. 3. [자바스크립트 DeepDive] let,const 키워드와 블록 레벨 스코프 15장 let, const 키워드와 블록 레벨 스코프 15.1 var 키워드로 선언한 변수의 문제점 변수 중목 선언 허용 함수 레벨 스코프 변수 호이스팅 15.2 let 키워드 변수 중복 선언 금지 블록 레벨 스코프 변수 호이스팅 전역 객체와 let 12.3 const 키워드 let과 대부분 동일하다. 선언과 초기화 const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. 재할당 금지 상수 const 키워드로 선언한 변수에 원시 값을 할당한 경우 원시 값은 변경할 수 없는 값이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없다. const 키워드와 객체 const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다. 15.4 var vs... 2022. 5. 17. 이전 1 2 3 4 다음
