1.웹개발 (27) 썸네일형 리스트형 Vue 프로젝트 만들기 환경 운영체제 : window 10 RAM : 8.00 GB 프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60 GHz 1.80 GHz 설치 npm i -g @vue/cli vue --version boilerplate 설치 vue create 프로젝트명 Linter는 제거 (경고 & 에러때문에 프로젝트 진행에 시간 많이 소요) + Router, Vuex 추가 2.x 버전선택 나머지 default cd 프로젝트명 npm run serve for문의 동작순서 목적 : for문의 동작 순서 이해 및 자바스크립트에서 키워드 스코프 이해 다양한 프로그래밍 언어에서 반복 문의 종류에 for 문이 있습니다. 아래와 같은 코드가 존재한다고 가정하면, 동작 순서는 for(let i = 0; i ㄷ -> ㄴ -> ㄹ -> ㄷ -> ㄴ -> (종료) i는 3전까지만 된다고 생각할 수 있는데, i가 3까지 증가하나, 조건문에서 false가 되어 실행 문의 실행되.. [CSS] Float 정의 & Float 부작용 제거방법 CSS에서 Float 속성은 뜨다, 띄우다 라는 뜻이며, 출현은 이미지를 띄어서 텍스트와 보기 좋게 배치하기 위함이었습니다.였습니다. 면접 질문에서 Float 속성을 해제하는 방법에 대해서 질문받았는데요. 왜 물어보았을까요? 여러 가지 이유가 있다고 생각합니다. 주관적으로 우리 회사에는 float로 레이아웃을 배치한 코드가 있는데, 유지 보수할 수 있겠어요?로 해석하였습니다. float에 대한 이해도가 부족하면 유지 보수하는데 어려움을 겪거나 해결할 수 없겠죠? 원래 Float는 이미지를 띄우기 위함이었으나, 레이아웃을 잡는 데 사용으로 변화되었다고 합니다. 이로 인해 nomarl flow(마크업 흐름에 따라 위에서 아래로)에 변화가 생기게 되고 부모의 공간 등이 무시되는 현상 등이 발생하게 됩니다. 그.. [CSS] BOX-MODEL CSS는 HTML elements에 '디자인'을 입혀 화면에 display 하는 방법을 정의합니다. CSS 목적은 HTML을 디자인하기 위함입니다. CSS가 출몰하게 된 이유는 : 기존의 HTML 딱딱한 문서에서 줄 간격, 폰트 사이즈 등을 조절하여 가독성을 높이기, 태그들 사이에 차이를 부여해서 콘텐츠 간의 분별력을 높여 웹페이지의 가치를 높이는 역할을 합니다. 요약하자면 '구조'와 '표현'의 분리라고 생각합니다. CSS에 학습하면서 중요하다고 생각되는 부분은 크게 BOX-MODELING / POSITION + float에 대한 이해라고 생각합니다. (다른 내용들은 필요할 때 검색해서 사용하더라도 위에 2가지 + @는 이해가 필요) BOX-MODEING에 대해서 설명해보겠습니다. CSS는 HTML을 디.. [HTML] index.html 파일 생성 및 ! emmet 명령어 분석 HTML은 문서이며, 기본 양식이 존재합니다. Hello Wolrd 메모장에 최소한의 코딩만으로도 브라우저에 원하는 내용을 출력 가능합니다. 최소한의 문서 구조를 위해 IDE에 EMMET 명령어를 사용하겠습니다 ! 또는 html:5를 사용해 주세요 아래와 같은 기본서식이 나타나는데요. 한줄씩 설명하겠습니다. 해당 코드는 첫 번째 코드로 모든 HTML 문서의 가장 최상단에 위치해 있어야 합니다. 예전에는 주석만 DOCTYPE 위에 존재해도 에러가 발생했다고 합니다. 역할은, 이 문서가 어떤 버전의 HTML로 만들어졌는지 브라우저에게 선언하는 역할을 합니다. 작성하는 시점은 HTML5 버전이며, 브라우저는 아래 코드들을 HTML5 버전에 따라 해석합니다. DOCTYPE은 HTML 태그가 아니며, 문서의 정보.. HTML block element & inline element element를 이해하기 위해선 태그를 이해해야 합니다. 태그란 Left Angle Braket(또는 Less than) 과 Right Angle Braket (Greater than)으로 이루어진 쌍을 말하며, 한국어로는 여는꺽쇠, 닫는 꺾쇠로 정해진 문자들을 감싼 것을 말합니다. 종류는 1. 시작 태그 2. 종료 태그 3. 빈 태그 등이 있습니다 시작 태그 ex) 종료 태그 ex) 빈 태그 ex) 시작 태그부터 종료 태그 까지를 element(요소)라고 하며, 빈 태그도 요소에 포함됩니다. HTML은 문서를 작성하는 마크업 언어이며, element들의 모음이라고 볼 수 있기 때문에 중요합니다. semantic markup 이란 element를 의미 없게 사용하지 말고, 브라우저와 개발자 모두 의미 있.. var와 let/const의 차이 핵심은 "var의 단점을 알고 있는가?"라고 생각합니다. 나아가, 호이스팅에서의 차이를 알고 있느냐를 묻는다고 생각합니다. var, let , const는 '변수'를 선언하기 위한 키워드입니다 변수에 대한 필요성 등은 프로그래밍 공부 시 처음 배우는 내용입니다.(중요) var키워드의 단점은 1. 암묵적 결합(중복 선언 가능) 2. 생략 가능 3. 변수 호이스팅 4. 함수 레벨 스코프 등 단점들이 있습니다. let은 이러한 단점을 해결해서 es6에서 출시된 키워드라고 이해하면 됩니다. 하나씩 보겠습니다. 1. 암묵적 결합(중복 선언 가능) (function() { var variable = 'hi i am var keyword'; var variable = 'Redundancy declaration'; c.. [JS] 자바스크립트 ES5 ES6 차이 질문 의도 : ES5와 ES6의 차이를 알고 있는가, 과거 버전은 왜 알아야 하는가?라고 판단 글의 목적 : ES5와 ES6의 차이 이해 및 과거 버전에 이해 필요성 납득 취업시장에서 ES6+를 요구하고 있습니다. 그럼에도, 과거 버전을 알아야 하는 이유는 1. 레거시 코드(누군가 남기고 간 기존 코드)를 최신 문법으로 리팩토링 할 수 있는가? 2. 구글링한 코드의 동작을 해석해서 유지 보수할 수 있는가? 모든 회사가 최신 문법을 사용하진 않기 때문이며, 최신 문법을 사용하더라도 시간이 지나면 레거시 코드가 되기 때문입니다. ES5, ES6 구분이 필요한 이유는, 버전 차이에 따른 기능 추가가 뚜렷했기 때문입니다. ES란, ECMASCRIPT의 약어 뜻하며 자바스크립트의 표준, 규격을 나타내는 용어입니다.. 이전 1 2 3 4 다음
