전체 글

더 나은 Git 커밋 메시지 작성하기(커밋 옵션, 컨벤션, 템플릿)

무조건 git commit -m으로만 커밋 메시지를 작성했던 지난 날.. 이걸로만은 한계를 느껴 커밋 메시지에 대해 좀 더 알아보았다. Commit Options 커밋 메시지 작성 -m: 인라인 형식으로 바로 커밋 메시지 작성 git commit -m "커밋 메시지" -a 또는 --all: 별도의 add 명령어를 사용하지 않고, 수정된 모든 파일에 대해 add, commit을 한번에 수행(단, 한번도 add되지 않은 파일은 add를 따로 해주어야 함) git commit -a -m "커밋 메시지" -am: a, m 옵션을 합친 형태(파일을 스테이지에 올리고 커밋) git commit -am "커밋 메시지" 커밋 메시지 수정 1. 커밋을 push하기 전인 경우 --amend 옵션으로 가장 최근에 만든 커밋..

yarn unknown workspace 오류 해결

프로젝트에 모노레포를 적용해보는 중에 한 워크스페이스에만 패키지를 추가하기 위해 커맨드를 입력했다. // yarn workspace [워크스페이스 이름] add [패키지 이름] yarn workspace admin-front add @mui/material @emotion/react @emotion/styled 하지만 Unknown workspace 라는 오류가 발생했다. 해결 방법 1. 루트 package.json의 workspaces의 값들이 배열로 되어있는지 확인 { // ... "workspaces": [ "common/*", "apps/*" ] } 루트 디렉토리에 있는 package.json의 workspaces가 배열로 되어있는지 확인한다. 2. workspace 이름과 package.json..

Delete `␍`eslint(prettier/prettier) 해결하기

새로 프로젝트를 생성했는데 위와 같은 오류가 발생했다. (전에도 비슷한 오류가 발생했었는데 어떻게 해결했는지 기억이 나지 않아서 정리해보려 한다.) VSCode의 Change End of Line Sequence를 통해 바꿔줄 수도 있다. 하지만 이는 근본적인 해결방법이 아니며, 모든 파일마다 바꿔주기에는 너무 번거롭다. 해결방법 ESLint 설정 부분에서 rules 옵션에 아래 내용을 추가해주면 된다. .eslintrc.json { "rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" } ] } } 이는 prettier 2.0 버전 이상에서 endOfLine 옵션의 default 값이 auto에서 lf로 바뀌었기 때문이라고 한다. auto로..

[JS] 스크롤 프로그레스 바 만들기

완성본 HTML CSS body { margin: 0; padding: 0; height: 1000px; /* 스크롤을 위해 임시로 추가 */ } .progressWrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #fff; } .bar { width: 0%; height: inherit; position: absolute; z-index: 100; background-color: #a9c4ff; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: width 300ms; } JS const progressBar = docum..

[JS] 클로저 - 클로저와 렉시컬 환경

클로저에 대해 알아보기 전에! 실행 컨텍스트를 잘 모르신다면 아래의 글들을 먼저 읽어보시는 것을 추천드립니다 :) 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 클로저(Closure) 클로저는 자바스크립트의 고유의 개념이 아닌(ECMAScript 사양에도 등장하지 않는다) 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 '함수와 그 함수가 선언된 렉시컬 환경과의 조합'으로 정의하고 있다. const x = 1 function outerFunc() { const x = 10 function innerFunc() { console.log(x) } innerFun..

[JS] 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정

시리즈 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 실행 컨텍스트의 생성과 식별자 검색 과정 아래 예시를 통해 실행 컨텍스트의 생성과 식별자 검색 과정에 대해 알아보자. var x = 1 const y = 2 function foo (a) { var x = 3 const y = 4 function bar (b) { const z = 5 console.log(a + b + x + y + z) } bar(10) } foo(20) // 42 1. 전역 객체 생성 전역 객체는 전역 코드가 평가되기 이전에 생성된다. 전역 객체에 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체가 추가되며 동작 환경에 따라 클라이언..

[JS] 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택

시리즈 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드: 전역에 존재하는 소스코드(전역에 정의된 함수, 클래스 등의 내부 코드는 포함 x) 함수 코드: 함수 내부에 존재하는 소스코드(중첩된 함수, 클래스 등의 내부 코드는 포함 x) eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드: 모듈 내부에 존재하는 소스코드(모듈 내부의 함수, 클래스 등의 내부 코드는 포함 x) 4가지 타입으로 분류하는 이유는 소스코드의 타입에 따라 실행 컨텍스..

[VanillaJS, React] 마우스 따라다니는 원 만들기(feat. requestAnimationFrame)

잘 만들어진 인터랙티브 웹들을 보며 저건 어떻게 만드는걸까 항상 궁금했었다. 인프런을 둘러보다가 몇 줄로 끝내는 인터랙티브 웹 개발 노하우라는 강의를 발견했고, 기초적인 것들을 만들어봐야겠다고 생각했다. 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] - 인프런 | 강의 짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다., - 강의 소개 | 인프런 www.inflearn.com 가장 첫 실습인 마우스를 따라다니는 원 만들기를 해보려고 한다. VanillaJS로 구현해보기 HTML 먼저 box라는 클래스명을 가진 div를 하나 만들어준다. CSS .box { background-color: lightgray; border-radius: 50%; width: 80px; height..