개발 공부 기록

모노레포(mono-repo)란? - 모노(mono)는 단일을 의미한다. 멀티레포(multi-repo)에 반대되는 개념으로 하나의 저장소에 두 개 이상의 프로젝트를 가진 레포를 의미한다. 장점 - 여러 패키지에서 하나의 설정을 공유 가능(ESLint, Prettier 등) - 여러 패키지의 변경사항을 하나의 commit 과 PR로 업로드 가능 - 모든 구성원이 모든 코드에 접근할 수 있기 때문에 협업이 용이하다. 단점 - Repository의 규모가 커진다. 문제 발생 시 여러 나비효과가 발생할 수도 있다. - 패키지의 규모가 커짐에 따라 CI Bulid가 느려진다. - 패키지간 의존성 관리가 쉽다는 장점이 있지만, 이로 인해 과도한 의존 관계가 발생할 수도 있다. 러나(lerna)란? - 모노레포의 패키..

emmet이란 html, css를 작성할 때 빠르게 작성할 수 있도록 도와주는 기능이다. atom에 Install Packages에 emmet을 검색해 쉽게 설치할 수 있다. 사용 예시)

React 개발시 컴파일을 쉽게 도와주는 Chrome extension이다. 설치링크 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 75726fadfd on 10/19/2020. chrome.google.com 위 링크에서 Chrome 에 설치해준다. 설치후, React 프로젝트를 실행하고 개발자 도구를 열면 끝에 React를 컴파일을 도와주는 탭 두개가 추가된 것을 확인할 수 있다. (적용이 안되어 있다면 모든 Chrome 탭을 껐다가 키면 된다.)

1. 설치하기 pip install libsass django-compressor django-sass-processor 2. settings.py 변경 INSTALLED_APPS = [ ... 'sass_processor', ... ] SASS_PROCESSOR_ENABLED = True SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 폴더명(있을 경우), 'static') SASS_OUTPUT_STYLE = 'compact' 3. 프로젝트에서 호출 {% load sass_tags %} 참고: blog.jaeyoon.io/2017/10/django-sass.html

Sass(syntactically awesome stylesheets) 는 CSS로 해석 및 컴파일되는 스크립트 언어이다. SASS 변수 정의 변수는 $ 로 시작하며 4가지 자료형을 지원한다. - 수(단위 포함) - 문자열(인용 부호가 있거나 없이) - 컬러 (하나 이상의 이름) - 불리언 변수는 매개변수로 사용하거나 결과물이 될 수 있다. 예시 $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color 루프 Sass..

개발을 할 때는 브라우저 하위 호환성을 고려하면서 개발을 진행해야 한다. caniuse.com/를 통해 브라우저에서 내가 원하는 기능이 얼만큼 지원되는지 확인할 수 있다. 예로 array.prototype.includes는 94.85%의 브라우저에서 지원이 됨을 확인할 수 있다. kangax.github.io/compat-table/es6/를 통해 각 브라우저에서 지원하는 기능을 한 눈에 확인 할 수 있다. 우리는 transpiling을 통해 하위 브라우저에서도 동작하게 문법을 바꾸고, polyfill을 통해서 지원하지 않는 native API를 다른 코드로 동작하게 할 수 있다. Transpiling 트랜스파일링(transpiling)이란 무엇일까? 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 ..

getElementById querySelector 해당 선택자에 맞는 element가 없다면 null을 반환 선택자에 맞는 element들 중 첫번째 것을 반환 querySlectorAll은 모든 element를 반환 해당 선택자에 맞는 것이 없다면 null을 반환 - 인접한 태그들끼리의 상대적인 위치를 비교하여 가져올 수 있음 처리 속도가 더 빠름 처리 속도가 더 느림 리턴값은 HTMLCollection name, id, index number로 HTMLCollection의 항목(itmes)들에 접근할 수 있음 리턴값은 NodeList index Number로만 NodeList의 항목(items)들에 접근할 수 있음 참고 whatabouthtml.com/difference-between-getelem..

PR을 Merge하는 방법에는 3가지 존재한다. Create a merge commit git merge 명령이랑 똑같다. PR의 commit들이 merge message와 함께 master의 Head commit으로 들어간다. Squash and merge PR의 commit log들을 한개로 추려서 master에 병합하는 방법이다. PR의 제목으로 된 1개의 커밋로그가 master에 병합된다. (master의 commit log가 깔끔해진다.) Rebase and merge PR의 commit log들이 master에 재정렬돼서 병합된다. 로컬에서 작성된 모든 commit log들까지 추적할 수 있다는 장점이 있다.