본문 바로가기

programming study

 (889)
Webpack - 로더 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 로더의 역할 Webpack은 모든 파일을 모듈로 취급한다. JavaScript 뿐만 아니라, 스타일 시트, 이미지, 폰트까지 모두 모듈로 봄 import(ES6) 구문을 사용하면 JavaScript 코드 안으로 가져올 수 있다. 로더가 모든파일을 JavaScript의 모듈처럼 만들어준다. 이미지 파일 -> data URL 형식의 문자열 CSS -> JavaScript에서 직접 로딩할 수 있도록 함 2. 커스텀 로더 만들기 로더 파일 정의 // my-webpack-loader.js module.exports = function myWebpackLoader(con..
Webpack - 엔트리와 아웃풋 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. Webpack의 역할 모듈로 연결된 여러개의 JavaScript 파일을 묶어준다. 이를 번들이라고 한다. 즉, Webpack은 번들을 만드는 번들러라고 할 수 있다. 2. Webpack 설치 npm install -D webpack webpack-cli -D 옵션: devDependencies에 추가된다. 개발용 패키지 3. Webpack 명령어 명령어 조회 node_modules/.bin/webpack --help --mode 아래의 세가지 값이 올 수 있다. development 개발환경 production 운영환경 배포하기위한 최적화 설정 none --e..
Webpack - 웹팩이 필요한 이유와 모듈 시스템 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 웹팩이 필요한 이유 전역 스코프의 오염 위험 예) 전역 스코프에 함수나 변수를 선언하면 다른 파일에서도 접근이 가능 애플리케이션이 예측할 수 없게 되고 런타임 에러가 발생 2. IIFE 방식의 모듈 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) 전역 스코프 오염 문제를 예방하기 위해 사용 함수 외부에서 함수 내부를 접근할 수 없음 외부로부터 독립적 var math = math || {}; (function() { // 함수 안에 넣음으로써 독립적 function sum(a, b) { return a +..
NPM 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. Node.js 최신스펙으로 개발할 수 있다. 웹팩, 바벨, TypeScript, SASS를 실행할 수 있는 환경이 되어준다. 빌드 자동화 파일 압축, 코드 난독화, 폴리필 추가의 작업을 거친후 배포 라이브러리 의존성 해결 각종 테스트 자동화 개발 환경 커스터마이징 node REPL Node.js 설치 후 터미널에서 node를 입력 자바스크립트 코드를 입력하고 즉시 결과를 확인 가능 .exit: 종료 NPM node package manager 2. NPM으로 프로젝트 생성하기 프로젝트 생성 npm init 프로젝트를 생성하고 메타정보를 입력 모든 메타정보가 입..
[드림코딩 by 엘리] HTML 태그 정리 본 내용은 드림코딩 by 엘리님의 강의를 토대로 작성하였습니다. 1. Semantic Tags(Semantic Markup) Semantic: 의미의, 의미가 있는 의미가 있는 Semantic 태그를 적절한 곳에 사용하는 것이 권장된다. 예시) 웹 페이지의 제목을 강조하기 위해서 span 태그를 사용하여 글자 크기를 키우는 것보다, h1태그를 사용 Semantic Tag를 사용하면 좋은 점 SEO: 검색 최적화 Accessibility: 웹 접근성 Maintainability: 유지보수성 2. 웹사이트 구조를 이루는 태그들(박스 태그) div태그를 남발하는 것은 자제 header 태그 웹 사이트 로고 사용자 중요 정보 nav 태그 하위에 여러가지 메뉴가 모여있을 때 footer 태그 웹사이트 하단에 사이..
프론트엔드 성능 측정 본 내용은 10분 테코톡 서니님의 강의를 토대로 작성하였습니다. 1. 성능측정의 의의 서비스의 지연 속도가 늘어날수록 이탈률이 급격하게 증가 구매 전환률 역시 감소 기업의 이익에 영향을 끼치게 됨 프론트엔드에서의 성능 측정이 필요한 이유는 사용성 개선을 통한 이익 증대를 이끌어내기 위함 2. 측정할 성능 로딩 속도 렌더링 시간 메모리 누수 확인 로딩 속도 FCP(First Contentful Paint) 첫 요소가 로드 될 때까지 걸리는 시간 FMP(First Meaningful Pain) 사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간 LCP(Largest Contentful Paint) 주요 콘텐츠가 로드 될 때까지 걸리는 시간 FMP의 경우 약 20%의 항목에서 정확하지 않아, 현재는 L..
[노마드코더] 모두를 위한 깃 & 깃허브 - CLI(2) 본 내용은 10분 노마드코더 모두를 위한 깃 & 깃허브 강의를 토대로 작성하였습니다. CLI 명령어 정리 브랜치 생성 후 이동 git checkout -b 생성 후 바로 생성 브랜치로 이동 생성 후 push를 해야 Github에 올라간다. 과거 커밋 이동 후 브랜치 생성, 이동 git checkout -b 과거 시점의 커밋에서 branch를 생성하는 것도 가능 브랜치 목록 조회 git branch 브랜치 삭제 git branch -d 마지막 커밋 수정 git commit --amend --no-edit 커밋 메시지는 수정하지 않고 커밋 수정(추가) 파일 상태 조회 git status stage에서 제거하기 git rm 해당 파일을 stage에서 제거 디렉토리인 경우 -r 옵션 사용 캐시가 된 경우 --c..
[노마드코더] 모두를 위한 깃 & 깃허브 - CLI(1) 본 내용은 10분 노마드코더 모두를 위한 깃 & 깃허브 강의를 토대로 작성하였습니다. CLI 명령어 정리 커밋 내역 확인 git log 커밋 이력을 확인 가능 HEAD: 마지막 커밋 이전 커밋의 내용들이 다 합쳐진 것 파일 정보가 어디에 있는지 HEAD, Branch 이동 git checkout [HEAD 커밋 주소 또는 Branch 명] master를 입력하여 이동시 현재 상태로 돌아감 커밋 삭제(reset) git reset --hard HEAD^ --hard: 삭제 옵션 완전히 과거로 돌아감 ^: 한 커밋 이전 커밋 삭제 이후 origin(원격 저장소)에 삭제된 커밋이 아직 존재 origin 강제 push git push origin master --force git reset 커밋 삭제 이후 or..

티스토리툴바