일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- node
- 5기
- 개발자
- 자바스크립트
- Mac
- CSS
- python
- 삼각형
- 코딩테스트
- 런타임에러
- 지속가능한개발자
- boostcamp
- 네이버커넥트재단
- Git
- 정보처리기사
- Express
- 알고리즘
- 사이트
- react
- 백준
- 실기
- 코테
- array
- vscode
- 배포
- js
- 부스트캠프
- Object
- javascript
- Django
- Today
- Total
목록분류 전체보기 (78)
개발 공부 기록
부스트 캠프 멤버십의 주 활동 과정은 아래 세 가지와 같았다. 주된 활동을 기준으로 느낀 점을 간략하게 기록해보려고 한다. 1. 학습 스프린트 6주 6주 동안 총 3가지의 프로젝트를 진행했다. 각 프로젝트 당 1주일 백엔드 개발, 1주일 프론트엔드 개발을 진행하였다. 챌린지 과정에서 배우지 않았던 Express - Node.js 에 대한 학습을 진행하였다. 이외에도 OAuth, Webpack, Babel, pug ... 등 개발과 협업을 본격적으로 시작하기 전 웹 개발에 대한 기초를 다지는 시간을 가졌다. Express에 대한 경험과 지식이 없던 상태였기 때문에 Express을 익히는 것에 많은 비중을 두고 과정에 임하였다. 이전까지의 나는 웹 개발을 할 때 필요한 것이 생기면 그때그때 그 부분만 찾아보..
www.bestcssbuttongenerator.com/ A useful tool for designing css buttons Button generator is a free online tool that allows you to create cross browser css button styles. www.bestcssbuttongenerator.com
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
dbdiagram.io/home dbdiagram.io - Database Relationship Diagrams Design Tool dbdiagram.io
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)이란 무엇일까? 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 ..