프론트엔드 로드맵
1.Internet) 인터넷은 어떻게 작동하는가?
인터넷은 웹의 핵심적인 기술이다. 인터넷의 가장 근본적인 것은, 컴퓨터들이 서로 통신 가능한 거대한 네트워크라는 것이다.두 개의 컴퓨터가 통신이 필요할 때, 우리는 다른 컴퓨터와 물리적으로 (보통 인터넷 선 (사진 첨부)) 또는 무선으로 (Wifi, Bluetooth)
2.Internet) HTTP란?
HTTP란 HyperText Transfer Protocol의 약자이다.텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다.(프로토콜 이란? : 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계, 기기건 통신은
3.Internet) 웹 브라우저 작동 원리
주소창에 https://www.naver.com 과 같은 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 것이다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹페이지로 접속이 가능한걸까?웹 브라우저는 동기적으로 HTML+CSS+Javascript
4.Internet) Domain Name과 Host Name 은 무엇인가?
넒은 의미로는 네트워크 상에서 컴퓨터를 식별하는 호스트명을 가리키며, 좁은 의미에서는 도메인 레지스토리에게서 등록된 이름을 의미한다.쉽게말해 우리가 네트워크상에서 원하는 호스트를 가리키는 이름이라고 생각하면 된다.예를들면 네이버는 naver.com이라는 도메인 주소를
5.Internet) DNS와 작동원리
DNS란? 도메인 네임 시스템(Domain Name System)의 약자다. DNS는 호스트의 도메인 이름을 호스트의 네트워크 주수로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발되었다. 우리가 자주 접하는 naver.com, google.com 모두
6.Internet) 호스팅은 무엇인가?
호스팅이란 말의 뜻은 어떤 서비스를 빌려서 사용한다는 말이다. 그럼 웹 호스팅은 뭘까? 말 그대로 외부의 서버를 빌려서 기능을 사용한다는 말을 의미한다. 호스팅은 웹호스팅, 서버호스팅, 클라우드호스팅과 같은 종류가 있다.웹 호스팅의 설명은 위와 같이 나와있는데 쉽게 말
7.CSS) 기초 다시 잡기
로드맵을 따라서 CSS를 다시 배워볼려고 한다. 물론 웬만한건 이미 다 알고 있기 때문에 하나부터 열까지 다시 배울려면 시간이 너무 오래 걸리기 때문에 CSS를 쓰면서 잘 이해가 안되거나, 별로 중요하지 않게 생각했던 CSS의 역사, 문법 등을 적어볼거다. CSS는 C
8.CSS) 레이아웃 속성 총 정리(display, float, clear, position, flex, grid) (잠시 미루는 중...)
display란 간단하게 말해 각 요소를 어떻게 표시할지 정해주는 속성이다.display 종류는 여러가지가 있다. inline, block, inline-block, flex, list-item, none 등등 많은 속성을 줄 수 있지만 이 글에서는 기본적으로 알아야
9.JS) 처음부터 다시 배우기
JavaScript는 문법의 대부분을 Java, C, C++로부터 차용하고 있으며, Awk, Perl, Python의 영향도 받았다고 한다.그리고 제목이 처음부터 다시 배우기지만 일일이 다 다시 적을수는 없으니, 이 글은 중요한 것만 다시 배우는고 호이스팅이나 클로저
10.JS) 객체지향 및 ES6 정리(추가중)
this는 사용하는 환경에 따라 총 4가지의 뜻이 있다. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다.strict mode에서 함수에this를 사용하면 undefined 값이 나온다. 메소드안에서 this를 쓰시면 his 메소드를 가지고
11.Vue 0) Vue3 개발 환경 세팅
Vue를 사용하려면 기본적인 세팅이 필요하다. 코드 작성을 위한 도구 설치https://code.visualstudio.com/
12.Vue 1) 데이터바인딩 문법
Vue 개발은 평소 HTML, CSS로 웹페이지 개발하던 대로 쭉 하다가 필요한 순간마다 Vue 문법을 넣어주면 된다. 기본적으로 HTML 코드는 <template> 안에 넣으면 된다. JS기능은 <script> 안에, CSS는 <style> 안에 넣으
13.Vue 2) Vue에서 for, if, @click 사용법
Vue에서 for문을 쓰려면 을 적으면 된다. 예를들어 이렇게 쓰면 Hello라는 p태그가 3번 반복이 된다.또한, v-for을 사용해 array, objet같은 데이터들을 넣을 수도 있다.그리고 v-for안에 변수는 2개까지 작명이 가능하다.소괄호를 열면 변수를 2개
14.Vue 3) import / export, 다른 데이터로 상세페이지 만들기, v-else, v-else-if
import / export default 어떤 js파일에서 만든 변수나 자료를 다른 js파일에서 사용하고 싶은 경우 export, import 문법을 쓴다. 다른 js 파일에서 export를 해야 다른 js 파일에서 import해서 가져올 수 있다.
15.Vue 4) Component , porps, custom event
HTML을 짜다보면 길거나 복잡한 코드를 많이 본다. ``만 수십개가 나오는게 일상인데 이게 싫으면 컴포넌트를 만들어서 사용하면 된다. 컴포넌트 만드는 법 만드는 법은 간단하다 아무이름.vue 파일을 아무데나 만드신 후 그 안에 축약할 HTML을 붙여넣어준다. 주