📝 이번 글에선 브라우저가 렌더링 과정을 거친 후, JS를 해석하는 과정에 대해서 자세하게 살펴보고자 합니다!: 브라우저란 서버에서 받아온 HTML, CSS, JS를 실행시켜주는 프로그램이다. 앞선 글에서 브라우저의 렌더링 원리에 대해 다뤘는데, 렌더링의 과정에서 H

📝 이번 글에선 HTTP 프로토콜에 대한 개념을 확실히 정리해보고자 합니다!: HTTP(Hypertext Transfer Protocol)는 통신 프로토콜입니다. 여기서 프로토콜이란 상호 간에 정의한 규칙을 의미하며, 특정 기기 간에 데이터를 주고받기 위해 정의되었습

📝 이번 글에선 평소 구분이 잘 되지 않았던 URI과 URL의 개념을 확실히 정리하고 학습하고자 합니다!: URI 는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다.: URL은 흔히 웹 주소라고 하며, 컴퓨터

📝 이번 글에선 HTTP와 HTTPS의 차이에 대해서 다뤄보겠습니다!: HTTP는 Hypertext Transfer Protocol의 약자로, 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다. 웹 서핑을 할 때 서버에서 고객의 브라우저로

📝 이전 게시글에서 언급한 constructor를 만드는 ES6 신문법 class에 대해서 다뤄보겠습니다!: construcotr를 만드는 신문법1번 방법: constructor 안에 추가하기자식이 직접 함수를 가짐2번 방법: 아래에 추가하기자식이 직접 갖지 않고,

📝 자바스크립트가 상속을 구현하는 방식에 대해서 설명해보고자 합니다! 상속하는 방법은 constructor로 상속하기/prototype으로 상속하기가 있습니다.: constructor란 쉽게 말해 object 생성 기계이다.비슷한 obejct를 만들고 싶을 때, 자식

📝 SSR의 등장배경을 학습하며 웹 동향 트렌드를 파악하고 Next.js에 대해 간단하게 정리해보고자 합니다! 📌 Static Sites (1990's 중반) : 서버에 이미 잘 만들어진 html 문서들이 있고, 사용자가 브라우저에서 www.hello.com

📝 CORS 및 SOP의 개념을 정리해보려고 합니다!: CORS의 개념을 알아보기 전에 이해해야 하는 Origin에 대해 살펴보자!Origin은 URL에서 프로토콜(Protocol), 도메인(Host), 포트 번호(Port)를 합친 부분을 의미한다.origin 이미지

📝 이번 글에선 브라우저의 렌더링 원리에 대해 정리해보겠습니다!출처: https://www.youtube.com/watch?v=kP-H1GXD_nI: 렌더링 엔진은 html, css, javascript의 내용을 토대로 브라우저 화면에 표시하는 일을 합니다.

📝 React를 사용하는 데 있어 꼭 알아야할 개념인 라이프사이클에 대해서 설명해보려고 한다!mount : 페이지에 장착됨update : 업데이트 됨 = 재렌더링 (ex. state가 변동될 때)unmount : 필요없으면 제거됨 (ex. 페이지를 벗어나면 해당 컴포

📝 JS에도 많이 사용하지만 React에서도 많이 사용하는 배열 내장 함수에 대해 정리해보려고 합니다!: 반환값(return)이 없고, 단순 for문과 같이 작동한다.👉 forEach가 알아서 회전을 하면서 매번 (배열에 있는) 아이템을 하나씩 넘기는 식으로 동작한

📝 이번 글에선 SCSS를 배우며 가장 유용하게 쓰일 핵심 기능들을 정리해보고자 한다.: nesting은 SCSS의 핵심 중의 핵심이지만 가장 기본적인 기능이라고 보면 된다.위 코드에서 시각적으로도 확인할 수 있듯, css에서는 자식 요소 하나하나를 선택하여 속성을

📝 이번 글에선 JavaScript ES6 문법을 공부하며 배운 여러 경우의 this 바인딩에 대해 정리해보려고 한다!: this의 값이 무엇인지 파악하려면 함수가 쓰인 위치가 어디인지만 파악하면 된다 JS의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체

: REST는 Representational State Transfor라는 용어의 약자로 로이 필딩이라는 사람이 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 한다.자원(RESOURCE) : URI행위(Verb) : HTTP METHOD표현(Re

📌 Hoisting(호이스팅)? : 선언하기도 전에 그 값들을 모두 끌어올려 최상단에 선언하는 것을 말함 > " Move declaration from bottom to top " var hoisting = 이 개념은 var 변수 선언/함수 선언문에서만 일어난다

🗒 반응형 웹사이트 제작에 유용한 flex와 grid 중 grid에 대해 간단하게 정리해보겠습니다!: flexible box는 아이템을 배치할 때 가로/세로 둘 중 하나를 주축으로 정해놓고 배치하지만, grid는 가로와 세로를 모두 사용한다. (flex: 1차원, g

: DOM = Document Object Model개념 정리에 앞서, 자바스크립트는 HTML 조작에 특화된 언어이다.그런데 자바스크립트는 어떻게 HTML을 조작할 수 있는 걸까?그 원리는 바로,HTML을 자바스크립트가 해석할 수 있는 문법으로 변환하면 되는 것이다!브

🗒 비슷해보이지만 확실히 다른 animation과 animate의 차이점을 정리해보겠습니다!간단하게,animation은 숨기거나 표시하기, 아래로 펼쳐짐 등등의 효과로 태그를 동작시키는 것이고,animate는 css스타일을 통해 태그를 동작시키는 것입니다.| 중요 명

: mouseenter + mouseleave: 기본기능(default)이 있는 태그에 대해서 기능을 못하게 막는다.예를들어, a태그가 걸려있는 곳에 이벤트를 주면 a태그가 가장 우선순위에 있어서, 이벤트 명령이 작동하지 않는다. 따라서 기본기능을 작동하지 않도록 막는

🗒 jQuery에서 자주 사용하는 선택자 및 메서드들을 간단하게 정리해보겠습니다!: 선택한 요소에 스타일(css) 속성값을 반환 또는 변환함: 선택한 요소 내에 텍스트를 불러오거나 텍스트를 바꿀 떄 사용함: 선택한 요소에 속성값을 반환 또는 변환함: 선택한 요소의 지