개발블로그

안녕하세요! 이번 포스트에서는 웹 페이지 렌더링 방식인 CSR, SSR, SSG에 대해 공부한 내용을 정리해보려고 합니다. 저도 이번에 찾아보면서 공부한 내용이라, 완벽하진 않지만 이해한 대로 최대한 풀어썼습니다! 😊CSR, SSR, SSG란 무엇일까?웹 페이지가 사용자에게 어떻게 보여지는지에 따라 렌더링 방식이 나뉘는데, 크게 세 가지가 있습니다. CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static-Site Generation). 사실 이 개념들을 이번에 처음 접했습니다..ㅎCSR(Client-Side Rendering)CSR은 브라우저(클라이언트)에서 웹 페이지를 렌더링하는 방식입니다. 서버에서는 기본 HTML만 전달하고, 나머지는..

안녕하세요! 이번 포스트에서는 리액트에서 자주 사용되는 useMemo, useCallback Hook과 리액트의 생명주기(lifecycle), 그리고 배열을 렌더링할 때 꼭 알아야 하는 key 설정에 대해 알아볼게요. 리액트 예습 차원에서 검색하고 공부한 내용이라서 많이 부족합니다😊 목차1. useMemo와 useCallback이란?2. React에서의 생명주기3. 배열을 렌더링할 때 key를 왜 설정해야하나?useMemo와 useCallback이란?리액트에서 useMemo와 useCallback은 성능 최적화를 위한 Hook입니다. 두 Hook 모두 불필요한 연산이나 함수 재생성을 방지하기 위해 사용됩니다. 말만 봐도 효율적일 것 같은데, 각각의 기능이 무엇인지 알아봅시다. useMemo: 어떤 계산..

안녕하세요! 오늘은 리액트의 핵심 개념에 대해 알아보려고 해요. 리액트를 아직 배운 건 아니지만, 미리 예습하는 마음으로 중요한 주제들을 정리해보았습니다.  목차1. React 렌더링 하는 방식2. React의 Virtual DOM3. React의 컴포넌트(component) React 렌더링 하는 방식리액트는 사용자 인터페이스(User Interface: UI)를 효율적으로 업데이트하고 관리하기 위해 설계된 라이브러리라고 합니다. 전통적인 웹 개발 방식에서는 HTML 요소들이 변경될 때마다 전체적인 DOM(Document Object Model)을 업데이트해야 했는데, 이 과정에서 성능이 저하되는 문제로 인해 리액트는 리액트만의 새로운 렌더링 방식을 사용합니다!리액트의 렌더링 과정컴포넌트 기반 렌더링:..

포스팅을 통해 렉시컬 스코프에 대해서 알아봅시다! [목차]1. 렉시컬 스코프란?2. 렉시컬 스코프의 작동 방식3. 렉시컬 스코프의 작동 예시 렉시컬 스코프란?렉시컬 스코프를 알기 전에 스코프(scope)에 대해서 말하자면, 스코프는 변수가 어디에서 사용할 수 있는 지 결정하는 범위를 의미합니다.그럼 Lexical 스코프는? 직역하면 어휘 범위...? 라고 말할 수 있습니다.다시 말하면, 코드가 작성된 위치에 따라 변수의 유효 범위가 결정되는 방식입니다.코드를 작성할 때 변수가 어디에서 선언되었는 지에 따라서 그 변수를 어디에서 접근할 수 있는지가 결정됩니다. 렉시컬 스코프의 작동 방식위에서 말했다시피 함수가 어디에서 선언되었는 지에 따라 그 함수 내부에서 어떤 변수에 접근할 수 있는지가 결정되기 때문에 ..

요즘 JS를 배우고 있는데 변수를 선언할 때 let, const로 배우고 있지만, 예전 코드들을 찾아보면 심심찮게 var로 변수를 선언하는 것을 볼 수 있습니다. 근데 왜 var는 이제 쓰지 않는 추세입니다! 그 이유는 무엇일까요?  그리고 this 키워드를 도대체 어떤 걸 가리키고 있는 지 헷갈리는 데 정확하게 알아보고 공부하려 합니다![목차]1. var, let, const의 차이점 및 예시2. 다양한 상황 속에서 this가 향한 곳은?var, let, const의 차이점 및 예시1. 선언 var는 중복 선언이 가능해요.var x = 10;var x = 20;console.log(x); 같은 x가 쓰였지만 덮여씌워져서 console에는 20으로 출력이 됩니다. let x = 10;let x = 20;..

[ 목차 ]1. 브라우저 정의2. 브라우저의 주요 구성 요소 및 동작 과정3. 브라우저의 장점4. 결론브라우저란?먼저 무엇인지 사전적인 의미를 알아볼게요!browser: 정보를 찾아다니는 사람이나 물건, 또는 웹 페이지를 탐색하는 소프트웨어. 즉, 브라우저는 웹 페이지를 탐색하고 보여주는 역할을 하는 소프트웨어라고 할 수 있습니다. 우리가 자주 사용하는 Chrome, Microsoft Edge, Firefox, Safari 등이 브라우저의 대표적인 예입니다. 브라우저는 사용자가 웹 페이지를 요청하면, 그 페이지를 구성하는 HTML, CSS, JavaScript 등을 해석해서 화면에 보여주는 역할을 합니다. 브라우저의 주요 구성 요소 및 동작 과정구성 요소아래 그림을 참고하여 보세요! 1. 사용자 인터페이..

CSS의 Cascading(계단식)에 대해서 알려드리겠습니다! [ 목차 ] 1. Cascading 스타일 시트 정의2. Cascading 원리 및 예시3. Cascading 스타일 시트 장점4. 결론  CSS의 Cascading이란?CSS는 Cascading Style Sheets의 약자입니다. 이때, cascading의 사전적 의미는 아래와 같습니다. Cascading: 계단식의 ; 단계적으로  따라서 Cascading Style Sheet는 단계적으로 적용되는 스타일 시트라고 생각하시면 됩니다~  CSS(Cascading Style Sheets)는 HTML 요소들의 스타일을 정의하는 언어입니다.하지만 CSS의 주된 기능 중 하나는 바로 'Cascading'입니다.이는 여러 스타일 규칙이 중첩될 때 어..

웹 개발을 하다보면 자주 보이는 시맨틱 태그에 대해서 알아볼게요! [ 목차 ]1. 시맨틱 태그 정의2. 시맨틱 태그 종류 및 그림3. 시맨틱 태그 장점4. 결론 시맨틱 태그란?일단 사전적인 의미를 파악해봐요 semantic: 의미의 ; 의미론의tag: 어떠한 항목을 보충 설명하는 낱말 따라서 semantic tag는 의미가 있는 꼬리표라고 생각하시면 됩니다.시맨틱 태그는 HTML5에 추가된 특별한 태그들로, 웹 페이지의 콘텐츠에 의미와 구조를 부여하는 역할을 합니다.전통적인 HTML에서는 태그를 주로 사용해 다양한 요소를 묶었지만, 이러한 태그는 그 자체로는 의미를 전달하지 못했죠. 그래서 등장한 것이 바로 시맨틱 태그입니다! 시맨틱 태그는 이름 자체로 해당 요소의 역할과 의미를 직관적으로 알려줍니다...