목차 HTTP vs HTTPS SSL/TLS SSL 통신 과정 1. HTTP vs HTTPS 1.1. HTTP Hyper Text Transfer Protocol 서로 다른 시스템들 사이에서 통신을 주고 받게 하는 가장 기본적인 프로토콜이다. 서버에서 브라우저로 데이터를 전송하는 용도로 가장 많이 사용한다. 한편, HTTP는 서버에서 브라우저로 전송되는 정보가 암호화되지 않는다는 문제점을 가지고 있다. 그래서 데이터가 쉽게 도난 당할 수 있다. 1.2. HTTPS HTTPS는 HTTP에 SSL을 사용한 프로토콜이다. HTTP는 전송되는 정보가 암호회되지 않는 문제점이 있었는데, HTTPS는 이 문제를 SSL을 활용해서 해결한다. SSL은 서버와 브라우저 사이에서 안전하게 암호화된 연결을 만들 수 있게 도..

React 프로젝트 구조 npm에서는 외부 모듈들을 다운 받을 수 있다. node _modules : 다운받은 모듈들이 들어가 있다. package.json : 이 프로그램이 관련된 설정이 들어가 있다. (ex 버전, 모듈) public 에는 보통 이미지 파일들을 추가한다. 기본 html 파일이 존재한다. src 폴더에서 코드를 짠다. 보통 js와 css를 이용해서 코딩을 하게 된다. 결과적으로 리액트는 Babel 이나 Webpack등의 도구를 이용해서 public 폴더의 index.html에 새로운 html요소들을 추가하게 된다. 리액트가 처음 시작할 때 index.js를 먼저 실행시킨다. 컴포넌트 (Component) 리액트의 핵심개념이 바로 Component 이다. 컴포넌트는 UI를 표현하는 요소로..

var, let, const 차이 https://velog.io/@bathingape/JavaScript-var-let-const-차이점 //1. let은 한번 선언된 변수에 다시 새롭게 선언할 수 없어요. let num2 = 20; num2 = "hello"; let num2 = 'Bob'; // `${name} 입니다` conditional ternary operator(3항 연산자) const language = 'javascript'; if(language === 'javascript'){ console.log('재밌다') }else{ console.log('재미없다') } if 조건문의 단축 형태 language === 'javascript' ? console.log('재밌다') : consol..

index.html Banner Image Sales Product index.css #header { height: 64px; background-color: black; } #body { height: 100%; background-color: blue; width: 1024px; margin: 0 auto; } #footer { height: 200px; background-color: red; } #Banner { height: 300px; background-color: yellow; } 1차 완성 index.html Sales Product html.css body { margin: 0; /*디폴트 마진설정을 0으로*/ padding: 0; } #header { height: 64px; dis..

CSS는 밋밋한 HTML 태그에 디자인을 씌워주는 언어입니다. 보통 웹 개발을 할 때 HTML 태그로 요소들을 구현하고 CSS로 디자인을 입히고 배치를 도와줍니다. 기본 문법 선택자 { 속성1 : 값; 속성2 : 값; } 선택자 선택자는 스타일을 적용할 대상입니다. 태그, id, class 등을 선택할 수 있습니다. /* 태그를 선택자로 했을 때 */ p { color: orange; } /* 태그를 id로 했을 때 */ #title { color: blue; } /* 태그를 class로 했을 때 */ .item { color: red; } id는 딱 한 요소에게만 적용됩니다. 우리의 주민등록번호는 고유한 것처럼 id도 마찬가지로 한 요소에게만 적용됩니다 (태그에 동일한 id를 넣어도 한 개만 적용됨) ..

html : 웹의 구조 CSS : 웹의 디자인 p태그 a태그 : 링크 개발자 도구 키기 : control + option + i html의 구조에는 head와 body가 있고 body에는 실제 컨텐츠 head에는 타이틀, CSS 불러오기, 자바스크립트 불러오기 Hello Pilly Hello Pilly Hello Pilly 기본 태그 Hello world Hello world Hello world Hello world Hello world Hello world Hello~~ Hello~~ Hello~~ Hello~~ Naver ID Password This is cloud h 태그 : 헤드라인 태그, 제목을 쓸 때 사용된다. br 태그 : 줄바꿈 태그 p 태그 : 문단을 나눌때 사용하는 태그 a 태그 :..