학습일지
학습 필기, 결과물, 피드백 등에 대한 일지, 시간 순으로 정리
프로젝트 저작 구분자 : [self] , [course]
프로젝트 클론 구분자 : [self] , [clone]
완성형 프로젝트 구분자 : [project]
2021.07
- [✅] 카카오톡 클론코딩 [course][clone]
- [✅] 모멘텀 클론코딩 [course][clone]
- [✅] 13 Site 클론코딩 [self][clone]
2021.08
- [✅] 11 Layout 클론코딩 [Slef][clone]
- [✅] 유투브 클론코딩 [course][clone]
2021.09
- [❌] Portfolio 사이트 프로토 타입 [self][self] [project]
- [✅] Lifefolio 사이트 런칭 타입 [self][self] [project]
2021.10
- [✅] Movie App 클론코딩 [course][clone]
- [✅] Popcorn Time(adv.Movie App) 클론코딩 [cousre][clone]
2021.11
- [⚡] Weather App 클론코딩 [course][clone]
- [⚡] Algorithm 학습 [self]
학습피드백
카카오톡 클론코딩
아래 설정을 하지 않아서 각 컴포넌트들의 margin 과 padding이 뒤섞여서 최종 결과물이 엉망진창이 되어버렸다. Git Hub Repository 참고
box-sizing: border-box;
가장 흔하고 대중적인 flex 콤보로 스타일을 완성했다. 하지만 이 콤보가 많은 계산량을 요구하고 나아가서 복잡한 구조에는 적합하지 않음을 프로젝트가 끝나고 알아버렸다.
display: flex;
align-items: center;
justify-content: space-between;
Grid 콤보를 이용해서 레이아웃을 짜고 해당 레이아웃 안에서의 간단한 설정만을 Flex 콤보를 사용하는 것이 깔끔하다.
display: grid;
grid-template: repeat(2, 1fr)/repeat(2,1fr);
모멘텀 클론코딩
Vanilla JS를 통해서 어떻게 html 문서의 element 를 선택하고 제어할 수 있는지에 대한 학습을 한다. Git Hub Repository 참고
13 사이트 클론코딩
스스로 13 개의 기본 로직의 스타일을 따라해보는 과정에서 css syntax 를 익히고 서로 충돌을 일으키기 때문에 조심해야하는 부분에 대해서 배울 수 있었다. Git Hub Repository 참고
11 레이아웃 클론코딩
SCSS 를 사용하기 위해서 프로젝트를 셋팅하고 SCSS syntax 를 학습할 수 있었다. Git Hub Repository 참고
유투브 클론코딩
npm(node.js project manager)
npx(node.js pacakage execute)
express, express-session, morgan
mongoDB,mongoose
html(pug), css(scss), js
webpack.config.js
웹 사이트가 어떻게 구동되고 어떤 이슈가 있는지 학습하였다. Git Hub Repository 참고
하지만 프로젝트 중간마다 redirect 시 properties 를 어떻게 전달해야 하는 지에 대한 답을 내릴 수 없어서 곤란한 것 같다. 이 프로젝트를 진행하면서 배운 점을 자체 서비스 개발 과정을 통해 녹아들이게 해보도록 하고 있다.
Life Folio 개발
첫 파일을 프로토타입으로 잡고 중도 폐기할 것을 목적으로 코드를 짜내려 갔다. 그리고 BEM 을 사용해서 최대한 직관적인 코드를 작성하고 있었다. 하지만 결과적으로 BEM의 고질적인 문제인 길다란 className 때문에 코드가 지저분해지게 되었다.
Popcorn Time 클론코딩
학습이론
html
html 을 작성할 때, 중요한 요소들은 아래와 같다.
- id 와 class 는 최대한 절제하여 메모리를 절약한다.
- !important 를 남발하여 메모리를 누수시키지 않는다.
- 적절한 html tags를 사용하여 html 문서의 질을 높이자. (div X / main, nav, footer O)
- html tags 의 attributes 를 활용하여 1차적으로 유효성 검사 및 데이터 보호에 힘쓰자.
css
css 파일을 작성할 때, 중요한 원칙은 아래와 같다.
- 코드의 재사용성을 높이자
- 코드의 유지보수성을 높이자
- 코드의 확장가능성을 지키자
- 클래스 만으로 예측 가능하게 작명하자
- id 와 class 를 남발하지 않는다
- 몇몇 tags ('a','select', etc..)는 initial design 을 선언해두자
- 상황에 따라 여러 스타일 가이드를 활용하자. (SMACSS / BEM / OOCSS)
Vanilla JS
프론트엔드/백엔드에서 JS를 사용할 때, 너무 node_module 에만 의존하지 않도록 한다.
Vanilla JS 로도 많은 기능을 구현할 수 있고 당신도 이를 할 수 있어야만 한다.
이러한 Vanilla JS 파일 작성의 원칙은 아래와 같다.
- 코드의 재사용성을 높이자.
- 코드의 유지보수성을 높이자
- 코드의 확장가능성을 지키자
- 코드는 간결하고 깔끔하게 작성하자
- function 혹은 class 등의 작명규칙을 준수하자
Mordern JS
Vanilla JS 로 어떠한 기능을 구현할 때에는 ES6, ES7, ES8 등의 최신 문법을 활용하면 매우 효율적인 코딩이 가능하다.
아래는 그러한 Modern JS에서도 매우 생산성있는 부분들이다.
알고 있는 부분은 적극적으로 활용하고 그렇지 않다면 필요에 따라 학습하라.
- [✅] 변수 : const, let
- [✅] 변수 : 구조분해할당(Object Destructuring)
- [✅] 함수 : 익명함수
- [] 문자열 : HTML fragments
- [] 행렬 : Array.from() Array.of() Array.find() Array.findIndex() Array/fill()
- [] 레스트 : Rest
- [] 스프레드 : Spread
- [] 반복문 : For of Loop
- [] 비동기 : Promises
- [✅] 비동기 : Async Await
- [] 클래스 : class extends super this
- [] 심볼 : Symbol and Map
- [] 생성자 : Generator and Map
- [] ES2020 : idk... anymore
scss
Scss 는 css 확장 어플리케이션이다.
scss 특유의 다양한 문법이 존재하며, 이는 매우 효율적이다.
그러나 브라우저는 index.scss 파일을 랜더링 하지 못한다.
이러한 경우 아래와 같은 해결 방법이 있을 수 있다.
- [✅] index.scss 를 index.css 로 컴파일한다.
위 방법은 webpack.config.js 에 sass-loader 와 같은 모듈들을 셋팅하여 index.scss 파일을 추적, 변환해주는 방법이다. 하지만 매우 번거롭다.
- [✅] index.scss 를 그대로 컴파일 한다.
아래 방법은 node_sass 를 사용하여 index.js 에 바로 styles sheets 를 임포트하는 방법이다.
매우 간단하지만 node_sass 는 너무나 무거운 모듈이며 성능 이슈가 존재한다.
webpack.config.js
실제로 이 파일을 수정하거나 확인하게될 경우는 거의 없을 것이다.
하지만 노마드코더의 유투브 클론코딩 수업을 들었다면 이 파일에 대해서 배워볼 일이 있었을 것이다. 웹팩은 모든 파일을 모듈로 관리한다라는 관점에서 만들어진 특별한 파일이다. 이에 대해서는 구글링을 하여 전문 문서를 참고하도록 하자.
npm(node.js project manager)
npm 혹은 npx 등을 사용하여 프로젝트를 설치할 때, 이슈사항이 있다.
그러한 이슈사항 발생 시에 아래에 해당하는 경우라면 참고하도록 하자.
framework :: express
npm i express
npm : 익스프레스 npm
velog : 익스프레스 Documentation 작성필요
익스프레스는 다음과 같은 특징이 있습니다.
- [] Middleware -before render, test some things-
- [] Routing -determine and administration of Url-
- [] Controller -in router, determin CRUID and render-
리엑트의 Controller CRUID 모델은 라우터에 연결되어 다음과 같이 정의 되어 있습니다.
- [] get --Create-
- [] post -Update-
- [] delete -Delete-
express-session
npm i express-session
npm : 익스프레스 세션 npm
velog : 익스프레스 세션 Documentation 작성필요
velog : 쿠키, 세션 무엇인가? 작성필요
framework :: react
npx create-react-app projectName
npm : 리액트 npm
velog : 리액트 Documentation
리액트는 다음과 같은 특징이 있습니다.
- [] SPA -Single Page Application-
- [] CSR -Client Side Rendering-
리액트의 Component CRUID 모델은 아래와 같이 정의되어 있습니다.
- [] create -Create-
- [] update -Update-
- [] unmount -Delete-
react-router-dom
npm i react-router-dom
node_module :: bcrypt
npm i bcrypt
node_module :: node-fetch
npm i node-fetch
node_module :: axios
npm i axios
node_module :: PropTypes
npm install --save prop-types
node_module :: styled-components
npm i styled-components
