몽땅뚝딱 개발자

◽ 레이어 생성 // 새 창을 띄워 새 레이어 생성 Ctrl + Shift + N // 새 창 없이 바로 새 레이어 생성 Ctrl + Shift + Alt + N ◽ 레이어 삭제 Delete ◽ 레이어 선택 Alt + [ Alt + ] ◽ 선택된 레이어 옮기기 // 한칸 단위로 옮기기 Ctrl + [ Ctrl + ] // 가장 상단/하단으로 옮기기 Ctrl + Shift + [ Ctrl + Shift + ] ◽ 전경색/배경색 채우기 // 전경색 채우기 Alt + Del // 배경색 채우기 Ctrl + Del

출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽 www.inflearn.com Output | 웹팩 핸드북 Output output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미합니다. 앞에서 배운 entry 속성과는 다르게 객체 형태로 옵션들을 추가해야 합니다. Output 속성 옵션 형태 최소한 filename은 지정해 joshua1988.github.io ◽ 주요 속성 4가지 - entry: 빌드를 할 대상 파일 정의 - output: 빌드를 한 후(=웹팩으로 변환 후)의 결과물에 대한 ..

에러 WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ WARNING in configuration The 'mode' option has not been set, webpack w..

출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽 www.inflearn.com ◽ devtool: 'source-map' // webpack.config.js devtool: 'source-map' ◽ mode: production // webpack.config.js // 코드가 난독화 된다. mode: 'production' ◽ 원본 코드 확인하기 콘솔이나 에러문에서 연결된 소스파일을 클릭하면, 발생한 원본 코드를 확인할 수 있다. (코드를 연결해주는 것, [Source] 탭에서 확인가능)

출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽 www.inflearn.com Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io ◽ Babel이란? ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 하는 일종의 자바스크립트 컴파일러이다. ◽ Impo..

출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽 www.inflearn.com webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org ◽ 웹팩이란? 모듈 번들러(Mo..

출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽 www.inflearn.com ◽ Node.js란? 자바스크립트 실행환경이다. ◽ NPM(Node Package Manager)이란? 자바스크립트 라이브러리를 관리해주는 도구이다. npm을 설치하면 node.js도 함께 설치된다. ◽ NPM의 장점 - 라이브러리 관리가 쉽다. package.json 파일로 관리할 수 있다. - CDN 방식의 경우, 태그를 가져오는 과정이 번거롭다. ◽ NPM 명령어 npm init // npm 설정 npm init -..

에러 tab을 눌러도 들여쓰기가 안되며, 편집기의 파일이나 메뉴의 포커스만 바뀌는 상태. 해결 Ctrl + M : Toggle Use of Tab Key for Setting Focus Tab 키의 들여쓰기 기능을 포커스 설정으로 전환하는 단축키이다. 다시 Ctrl + M을 사용하여 들여쓰기 기능으로 전환하면 된다. 참고 Visual Studio Code의 단축키 모음 문서이다. Visual Studio Code Key Bindings Here you will find the complete list of key bindings for Visual Studio Code and how to change them. code.visualstudio.com 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념..

git log라는 명령어를 좀 더 유용하게 조회하기 위한 명령어를 소개한다. ◽ 가장 최근 이력 2개만 조회하기 // 숫자는 조회하고 싶은 개수를 적으면 된다. git log -2 ◽ 최근 이력의 diff 소스 비교하기 bash에서 최근 커밋 이력의 달라진 점을 이전 소스 코드와 비교할 수 있다. 바로 조회할 수 있기 때문에 편할 듯 하다. // 가장 최근 이력 1개의 diff 보기 git log -p -1 // 가장 최근 이력 1개의 diff 보기 git log -p -2 ◽ 커밋 이력 중 수정된 파일 이름만 조회 // 수정된 파일 이름만보기 git log --name-only -1 ◽ git log 명령어 이후 빠져나오기 키보드의 q를 누른다. 그 외의 기타 명령어 ◽ git log 주요 옵션 -p ..

참고하는 예제의 폴더기본구조는 webContent인데 내 프로젝트는 /src/main/webapp으로 생성되어 차이점이 궁금해 찾아보게 됐다. ◽ 차이점 - WebContent Eclipse 표준 프로젝트 구조로 인식. 이클립스의 상단 메뉴에서 파일 > 새로만들기 > Dinamic Web Project를 선택하여 만든 경우 - /src/main/webapp Maven 프로젝트 구조로 인식. Maven을 사용하여 만든 경우이다. (STS 사용 등) 출처 및 참조 WebContent와 webapp 차이점 Eclipse에 두 개의 Spring MVC 프로젝트가 있지만 웹 콘텐츠는 다른 위치에 있습니다. 한 앱에서 다음 위치에 있습니다. /WebContent 다른 앱에서 다음 위치에 있습니다. /src/main..