NOW OR NEVER

CSS CSS 꽃 : Flex box 참고 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것이다. 박스가 커졌을 때 각각의 item들이 어떤식으로 커지면서 박스의 공간을 메꾸어야 할지, 박스가 작아졌을 때 item들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 되는지를 자유롭게 정의할 수 있고 쉽게 가능하게 해준다. 웹사이트 레이아웃을 쉽게 제어할 수 있게 된다. container level : 박스에 적용되는 속성들, container를 꾸며주는 속성들 display flex flex-direction flex-wrap flex-flow : flex-direct..

CSS(Cascading Style Sheet) 의미, 정의 cascading : 정의된 세부적인 정의가 있다면 그것을 쓰고 정의된 게 없다면 다음 기본적으로 정의된 것으로 넘어가는 것을 의미 웹사이트 스타일링 : author style(css) > user style(사용자가 지정한 스타일) > Browser 상에서 기본적으로 정의된 스타일 순으로 적용 !important 쓸 경우 위에서 말한 적용 순서를 무시하고 제일 먼저 적용됨, 나쁜 architecture가 될 수 있으므로 쓰지 않는 것이 좋다 선택자 selectors html의 어떤 태그들을 고를 것인지 규정하는 문법 구체적으로 태그 가까이 설정할 수록 우선순위가 높아짐 종류 * = universal tag이름 = 해당하는 태그만 골라냄 #id..

태그 의미가 있는 symantic 태그 사용하기 element(node): contents Box item들을 sectioning 쉽게 도와주는 태그들 안에 contents가 없으면 사용자에게 보여지지 않음 ex) header, footer, aside, main, section, article, nav, div, span, form div 태그가 아닌 section 태그(header,nav, asiede, main, footer 등)로 구역을 나누는 것이 좋다 article 태그 : 여러가지 item들을 그룹화해서 재사용 가능한 아이들이 모아져 있는 것을 말함, 반복되는 아이들을 묶어준 것 div 태그 : 묶어서 스타일링 할 경우, 혹은 그냥 묶고 싶을 때 아무때나 잘 쓰임 h1태그는 contents를..

html 웹을 이루는 가장 기본적인 블록(파일) Html 없이는 웹사이트 못 만듦 Hyper text markup Language Markup 언어 : 어느정도 태그를 이용해서 구조적으로 보여지는 것 Docktype>html>head>body head : ui 적인 요소가 없음, css 불러오는 역할도 함, meta data만 존재, 상세 설명 body : user에게 보여지는 파일들로 이루어져 있다. heading h1~ w3c 웹의 표준화를 추진하는 단체 여기서 정한 표준에 맞게 브라우저를 구현해야 한다. 브라우저는 유효한 태그를 쓰지 않아 어느정도의 에러가 발생하면 똑똑히 회복해서 유저가 html을 보는데 지장이 없도록 할 수 있다. mdn 지원 가능한 태그들 확인은 mdn에서 확인 할 수 있다. ..

프레임 워크를 위한 기본언어 html,css,js를 잘 배워야지 프레임워크를 바꿔도 금방 이해하고 적용할 수 있음 html,css,js -> typescript(type 때문에 유저 사용시 충돌 일어나는 것 방지, 불린 타입은 불린에만 할당되게 하는 것) html : 구조, css : 디자인 js : 다양한 동작 덧붙여서 구현(basics of js = banilla js) 기본 언어 외 부가적인 것 백엔드 커뮤니케이션을 위해 필요 : fetch api bootstrap은 react 나오고 나서 잘 사용되지 않음 BEM 관련 architect 훑어보기 module bundler - 코드 배포시 간편하게 압축하고 minify해서 최대한 사이즈 줄게 해줌 react-mobx combination 추천 로드맵..

https://sigcho.tistory.com/20 프론트엔드 독학 스터디 계획 (by. 식초) -기초: HTML, CSS, JavaScript, Git/Github -기본: React(JS기반 프레임워크) -심화: SCSS, BootStrap,TypeScript, Webpack (필요할 때 함께 공부하기, 어쩌면 취업 후 개인공부).. sigcho.tistory.com 프론트엔드 영어로 된 로드맵도 보고 구글로 어떻게 공부해야 하는지 싹 다 찾아 봤는데 이보다 자세한 것은 없었다..! 식초님의 블로그는 주기적으로 정독해야 할 정도로 정보가 아주 많다. 그래서 식초님 로드맵에 따라 공부해보기로 결심 했다. 일단 기초 지식을 다지는 구간만 엑셀로 정리해놨다. 이런 식으로 하하,,, HTML, CSS, J..

Vue.js 작은 화면당 라이브러리 역할부터 큰규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크 특징 컴포넌트 기반 개발 방식 : 화면(웹페이지)을 여러 개의 작은 단위로 쪼개어 개발, 리액트와 같은 방식 MVVM 패턴 : 화면 UI 코드와 백엔드 데이터 처리 코드 분리 리액트와 앵귤러의 장점을 흡수 설치 파일 vue.js devtools 개발자 모드로 할 경우 개발자 도구에서 vue 패널이 보임 vs code 확장 프로그램 : vetur node-v , npm-v 설치 , nvm html body 태그 내에서 - https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0에서 개발자 모드랑..

Webpack Chunk bundle 파일이 특정 기준을 통하여 몇 개의 파일로 나뉘어진 형태 webpack.config.js에서 optimization{}으로 설정 후 yarn build runtime chunk {} 모듈들에 대한 내용만 남고 분리 vendor chunk {} vendor : 외부 패키지 모듈 ex) jQuery 외부 모듈만 분리하여 관리 hash 값이 바뀌지 않아 hash 값을 통해 효율 관리 가능 chunkhash 나눠진 파일 별로 hash 값 부여 모듈을 제외한 chunk에는 영향을 주지 않음 소스 코드 최적화 최종적으로 사용자에게 전달하는 리소스는 최적화 하여 전달해야 함 모듈을 사용하지 않고 직접 소스 코드 최적화 방법 사용자를 위해 최적화 하는 것이므로 production ..

Webpack web application을 위해 사용하는 bundler(도구) 모듈 해석 -> 의존성 그래프 생성 -> 번들 생성 웹팩 설치 명령어 : yarn add webpack webpack-cli --dev 실행 명령어 : npx webpack npx webpack --target=node Module 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태 한 파일에 쓰여진 큰 코딩 덩어리를 여러 개로 쪼개 사용 할 수 있음 어떤 기준을 통해 코드가 파일 단위로 분리되어있는 형태에서 서로를 참조 js, sass, css, jpg, png 등 module을 사용하기 위해서는 module을 인식하는 module system과 module을 다루는 키워드가 제공되어야 한다.(module이 어떤..