FE BE 개발 메모장
브라우저의 동작 원리
브라우저(Browser)? 우리가 흔히 아는 브라우저로는 대표적으로 애플의 Safari, 구글의 Chrome, 마이크로소프트의 IE(지금은 사망), Edge 등 있지만 firefox, Opera, Dolphin 등이 있다. 브라우저의 기본 구조 1. 사용자 인터페이스(User Interface) - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.. - 요청한 페이지를 보여주는 창을 제외한 부분을 보여준다. 2. 브라우저 엔진(Browser Engine) - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 3. 렌더링 엔진(Rendering Engine) - 요청한 컨텐츠를 표시한다. - HTML을 요청할 경우 HTML과 CSS를 파싱(해석)하여 화면에 표시한다. 4-1. 통신(Netwrokin..
HTML 5의 시멘틱 요소
Sementic Tag 시맨틱(Semantic)은 "의미의, 의미론적인" 을 의미하는데 시맨틱 태그는 의믜를 가진 HTML의 태그를 뜻한다. 시맨틱한 태그를 사용하여 자신의 컨텐츠를 명확하게 정의한다. HTML5의 시맨틱 태그가 등장하기 전, 기존에 , 엘리먼트로 레이아웃을 나누고, id나 class 속성 명을 담아주어 구분짓는 방식으로 웹페이지가 개발되었다. 그러나 일관성이 떨어지고 개발자들 간의 혼동으로 , 같은 시멘틱한 엘리먼트들로 설계하도록 약속되었다. 주요 시맨틱 요소들(Sementic Elements) 섹션의 주제를 나타내는 태그이다. h1~h6를 그룹짓는다. , 와 는 전체 웹페이지나 특정영역의 부가정보를 표기하는데 사용한다. 태그에는 제목, 로고, 작성일과 같은 메타 정보를 배치하고, 은 ..
var, let, const 차이점과 TDZ(작성중)
변수 선언 방식 var로 변수를 선언하는 방식에서는 큰 단점을 가지고 있다. var tg1 = '나는 var로 선언된 변수' console.log(tg1) // 나는 var로 선언된 변수 var tg1 = '나는 var로 선언된 변수가 아니다.' console.log(tg1) // 나는 var로 선언된 변수가 아니다. 위의 예제처럼 같은 변수명으로 한번 더 선언을 했음에도 불구하고, 값이 재할당이 되어 출력되는 것을 볼 수 있다. 코드량이 많아지게 된다면 해당 변수가 중복되어 값이 바뀔 우려가 있으며, 어디에 어떻게 쓰이는지 알기 어렵게 된다. 이러한 문제를 보완하기 위해 ES6에서 let과 const를 새로 추가되었다. 이 두 변수 선언방식의 공통점으로는 재선언이 되지 않는 다는 점이다. let or ..
React-Hook의 useState와 useEffect
useState() 이전 React에서 상태를 관리할때는 Class 컴포넌트에서 setState를 통해 상태를 구현했었지만, Hook에서는 useState라는 함수를 사용하여 Function 컴포넌트에서도 사용이 가능하다. 기본 문법 let [number, setNumber] = useState(0); let [breath, setBreath] = useState(true); 기본 문법은 비구조화 할당을 사용하 첫번째 요소는 현재 상태, 두번째 요소는 Setter 함수로 동작한다. const setIncrease = () => { setNumber(number + 1); } const setDecrease = () => { setNumber(number - 1); } return ( {number} ) ..
SPA 웹 구성을 위한 React-router-dom
우선 SPA가 무엇인지 간략하게 알아보고 진행하려고한다. SPA(Single Page Application)란? SPA(Single Page Application) 는 말그대로 페이지가 하나인 애플리케이션을 뜻한다. SPA개념등장 이전까지만 해도 웹애플리케이션은 여러 페이지로 구성되었으며, 요청할 때 마다 새로고침이 발생하고 서버로부터 리소스를 받아 렌더링 하는 방식이었다. 서버가 해당하는 html을 주는 방식을 SSR(Server Side Rendering) 이라고한다. 그러나 웹에서 제공하는 정보가 많아지게 되면서 용량이 커져갔고, 모바일의 등장으로 이런 전통적인 방식은 성능상 한계를 맞이하게 되었다. 그래서 이러한 문제를 해결하기 위해 CSR(Client Side Rendering)이라는 방식이 도..
Date 생성자
Date 생성자는 날짜와 시간을 표현하는 객체를 생성한다. Date객체에 내장된 다양한 메서드를 활용하면 날짜와 시간 처리를 간단하게 할 수 있다. 다음과 같이 Date 객체를 생성한다. let now = new Date(); console.log(now) // Wed Mar 17 2021 21:28:32 GMT+0900 (Korean Standard Time) Date 생성자의 인수로 날짜와 시간을 전달하면 그 날짜와 시간을 가리키는 Date 객체가 생성된다. let setDate = new Date(2022, 3, 3); console.log(setDate) // Sun Apr 03 2022 00:00:00 GMT+0900 (Korean Standard Time) Date 객체가 제공하는 주요 메소드..
HTTP 세션(session)
sessions이란? 서버가 해당 서버(웹)로 요청(request)한 클라이언트(사용자)를 식별하는 방법이다. 서버는 요청한 클라이언트 에게 요청 헤더의 set-cookie 값으로 클라이언트 식별자인 session-id를 응답한다. 서버로부터 응답받은 session-id는 해당 서버와 클라이언트 메모리에 저장된다. 이때 클라이언트 메모리에 사용되는 cookie 타입은 세션 종료 시 같이 소멸되는 Memory cookie가 사용된다. HTTP Session 전달 방법 1. 클라이언트가 서버로 요청을 하면 서버는 DB에 정보를 저장한다. 2. 만약 클라이언트로부터 발송된 session-id가 없다면, 서버는 session-id를 생성해 클라이언트에게 set-cookie값으로 session-id를 발행한다. ..