Bleeding edge

수업시간에 배운 내용 : 프론트엔드 개발에 필요한 기술 정리 HTML : tags & attributes, Semantic web CSS : Layout(float, flex, grid) , transition / animation, 반응형 웹, Preprocessor(Sass, Less, Stylus, PostCss), CSS 방법론, CSS 프레임워크 크로스 브라우징 JavaScript : ES5, ES6, ES Next, DOM/Event, Ajax, 동작 원리(브라우저, 자바스크립트 엔진), node.js HTTP Tools, Git, Webpack, Babel, ESLint, npm 등 Library/Framework : SPA(Angular, React, Vue), TypeScript, jQu..

01장 프로그래밍 1.1 프로그래밍이란? 0과 1만 아는 컴퓨터에게 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 문제 해결방안을 제시할 때 컴퓨터의 입장에서 문제를 바라봐야하는데 이때 컴퓨터 사고가 필요하다. 예시) 걷는다 = 왼발(혹은 오른발을 선택한다) + 전방으로 선택한 발을 움직인다. 1.2 프로그래밍언어 프로그래밍언어는 사람이 이해할 수 있는 약속된 구문으로 이를 이용해 프로그램을 작성하고, 기계에게 이를 전달할 때 일종의 번역기(컴파일러, 인터프리터)를 사용한다. 프로그래밍은 구문(syntax)와 의미(semantics)의 조합으로 이루어져 있다 1.3 구문과 의미 프로그래밍 언어는 문법에 부합하는 것은 물론이고, 수행하고자 하는 바를 정확히 수행하여 요구사항이 실현..

1. MVC : Model, View, Controller 3가지로 이루어진 디자인 패턴입니다. MVC 장단점 장점 : 재사용성과 확정성이 용이하다 단점 : 어플리케이션이 복잡해질수록, 모델과 뷰의 관계가 복잡해진다. MVC 용어 모델 : Data 뷰 : UI 컨트롤러 : 하나 이상의 모델과 하나 이상의 뷰를 잇는다. 모델이나 뷰의 변경 통지를 받으면 해당하는 요소에 내용을 알려준다. MVC 패턴의 예시 : 리액트 대표적인 특성 : immutable → state는 setState를 통해서만 수정이 가능하고, props 기반으로 만들어진 컴포넌트인 purComponent가 있습니다. 2. MVP : MVC모델에서 파생되었으며, P는 Presenter입니다. 뷰와 프레젠터는 일대일 관계이기 때문에 MVC패..

오늘 공부한 것 디자인 패턴 : 객체 간의 상호 관계를 이용하여 문제점을 해결하는 하나의 규약을 말한다 1. 싱글톤 패턴 : 오직 하나의 인스턴스만 가지는 패턴으로 보통 데이터 베이스 연결 모듈에 많이 사용한다. 장점 : 인스턴스를 생성할 때 비용이 줄어드는 장점 단점 : 의존성이 높아진다. 의존성이 높기 때문에 단위단위의 테스트를 하기 힘들다. 싱글톤패턴 이용 사례: 데이터베이스 연결 단점 해결 방법 : 의존성 주입 의존성주입 장점 : 모듈들을 쉽게 교체할 수있고 테스팅하기 쉽고 모듈간의 관계를 좀 더 명확하게 합니다. 의존성주입 단점 : 모듈들의 클래스 수가 늘어나서 복잡성이 증가하므로 런타임 패널티가 생깁니다 의존성주입 원칙 : 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야하며, 둘다 추상..

오늘 공부한 것 Branch : 분기점을 생성하여 독립적으로 코드를 변경할 수 있도록 도와주는 모델 git branch git branch -r git branch -a git branch branch-name git branch : 현재 깃 브랜치보기 git branch branch-name : branch-name으로 깃이름 생성하기. 주의 깃이름은 띄어쓰기가 안된다 git checkout branch-name (과거에 사용하던 브랜치 이동방법) git switch branch-name (지금 브랜치 이동하는 방법) git switch branch-name : branch-name을 기준으로 branch를 이동한다 feat : Set doctype html, add html tag feat를 굳이 새..

오늘 공부한 것 1. 브라우저 렌더링 원리 브라우저 렌더링 순서 : DOM, CSSOM 생성 → Render Tree 생성 → Layout → Paint DOM, CSSOM 생성 : HTML, CSS를 다운받고, HTML CSS가 각각 Object Model을 만든다 DOM tree와 CSSOM Tree가 만들어진다음에, 이 둘을 이용하여 Render Tree를 생성한다. Render Tree에는 스타일의 정보가 들어있고, 실제 화면에 표현된 노드들로 구성된다 Layout단계: 브라우저의 뷰포트에서 각 노드들의 위치를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라 어느위치에 어느 크기로 출력될지를 계산한다. (reflow단계) Paint 단계 : Layout 계산이 완..

오늘 공부한 것 git bash는 https://gitforwindows.org/ 에서 설치할 것. (필요한 추가 모듈들이 내장되어있다.) 평소에 영타 단련은 http://www.keybr.com 에서 해둘 것 문자 읽는법 -하이픈 ~틸다(linux에서 root를 의미한다) . 유닉스에서는 숨김파일 앞에 .를 붙인다 *astroid Linux Command code . 현재 디렉토리에서 git bash 실행 pwd print working directory. 최상위 경로부터 내 위치 보기 ls ls -a ls -l ls -a -l ls : 현재 위치에 있는 파일 보기 ls -a : 현재 위치에 있는 숨김파일을 포함한 파일 보기 ls -l line by line으로 자세한 정보를 보기 ls -a -l : ..

2022/07/29 오늘 공부한 내용 CS 1. SSR에 대해 설명 Sever Side Rendering의 약자로 서버에서 렌더링 준비를 마치는 것을 말합니다. 유저가 웹에 요청을 보내면, 서버는 즉시 렌더링이 가능한 HTML을 만들어서 클라이언트로 보낸다. 클라이언트에서 HTML를 받는 순간 렌더링 준비가 되어있기 때문에 즉시 랜더링이 된다. 단, 자바스크립트가 읽히기 전이라 사이트 조작은 불가능하다.(Time To Look과 Time To View가 다르다) 자바스크립트 다운이 시작된다. 클라이언트가 자바스크립트가 다 받아지기 전까지는 동작이 실행이 되지는 않지만, 동작을 저장한다. 자바스크립트가 다 받아지고 나서는, 그동안 저장된 동작을 실행하며 지금부터는 웹페이지 상호작용이 가능해진다 2. CSR..

오늘 공부한 내용 오늘 수업의 요약 : 위기의 협업. 오늘 수업시간에 프로젝트 예행연습을 하였다. 예행 연습중에 사람들끼리 코드에 충돌이 많이 생겼었다. 오늘은 수업시간에 예행연습을 하면서 공부한 git에 대한 CLI에 대해서 메모를 간략하게하면 프로젝트를 생성하고자 하는 페이지에서 Git bash를 이용하여 GIt bash를 실행을 하고, code . 를 사용하여 해당 폴더를 기준으로 Visual Studio를 실행한다. 이후 사용할 CLI같은 경우에는 두가지가 있다. 우선, 시작할 파일이 없는 경우와, 복사할 것이 있는 경우 두가지이다 시작할 파일이 없는경우 git init 복사할 파일이 있는 경우 git clone git-address git-address에는 복사할 깃주소의 링크를 입력하면 된다...