본문 바로가기

분류 전체보기

 (25)
자바스크립트 실행 컨텍스트란? (Javascript Execution Context) 자바스크립트의 실행 컨텍스트(Execution Context)는 자바스크립트의 동작 원리와 관련된 핵심 개념입니다. 실행 컨텍스트가 어떻게 동작하는지 이해하면 호이스팅의 발생 이유, this 값의 설정 방식, 클로저의 동작 원리 등을 이해할 수 있습니다.  실행 컨텍스트란?실행 컨텍스트란 코드가 실행될 때 접근 가능한 식별자에 바인딩된 변수/함수 값, this 객체, 상위 스코프에 대한 참조 등의 정보를 의미합니다. 예를 들어 어떤 함수 내에서 변수 a를 접근할 때 이 a라는 식별자에 어떤 값이 바인딩 되었는지를 어디에다가 저장해두고 필요할 때 접근이 가능해야 할텐데, 이를 가능하게 하는 것이 바로 실행 컨텍스트 객체인 것입니다. 그럼 이 저장하는 행위는 언제 하게 되는걸까요? 코드의 실행 단계에 대해..
Vue3 Composition API에 대해 알아보기 Vue2와 Vue3의 가장 큰 차이점은 Composition API가 추가되었다는 것입니다. Composition API는 기존의 Options API의 단점들을 보완하였으며, Vue 컴포넌트를 작성하는 방식을 완전히 뒤바꾸었습니다. 오늘은 Composition API에 대해 알아보겠습니다.Composition API란?Composition API는 Vue 컴포넌트 작성시 사용하는 여러 API들의 모음입니다. Composition API는 크게 3가지로 나눌 수 있습니다.Reactivity API: 기존 Options API의 data, computed, watch에 해당하는 상태들을 생성하도록 도와주는 APILifecycle Hooks: 기존 Options API의 mounted, destroyed 등..
Node.js (1) 핵심 개념 이해하기 Node.js란 Node.js는 간단히 말해 '자바스크립트 런타임' 입니다. 즉, 자바스크립트를 실행할 수 있도록 해주는 환경이라고 볼 수 있습니다. Node.js 덕분에 우리는 브라우저에서만 실행가능했던 자바스크립트라는 언어를 컴퓨터에서 실행할 수 있게 되었고, 서버, 웹, 모바일, 데스크톱 애플리케이션 개발을 위해서 사용할 수 있게 되었습니다. Node.js의 특징 Node.js를 설명하는 특징은 크게 3가지가 있는데, 이 3가지 특징들은 서로 연관되어 있습니다. 이번 글에서는 이 특징들에 대해 알아보겠습니다. 1. 싱글 스레드 흔히 Node.js는 싱글 스레드로 작동한다는 것을 많이 들어보셨을 겁니다. 싱글 스레드란 말 그대로 스레드가 하나뿐이며, 따라서 실행 흐름이 오직 하나만 있다는 것입니다. ..
Gitflow란? GItflow란? Gitflow는 Git workflow 전략으로 가장 대중적이고 인기 있는 방식입니다. Gitflow는 두 개의 메인 브랜치(Main, Develop)와 그 외 명확한 용도의 브랜치들(feature, hotfix, release)을 정의하고 그들이 어떻게 상호작용해야 하는지를 정해두어 소프트웨어 개발 사이클을 효율적으로 관리할 수 있도록 해줍니다. gitflow는 relase-based(릴리즈 일정이 정해져 있는) 소프트웨어 개발에 용이하지만, CI/CD에서는 다소 사용하기 어려울 수 있습니다. (최근에는 이러한 문제점을 해결한 trunk-based workflow 가 인기를 끌고 있다고 합니다.) Develop과 Main 브랜치 Gitflow에서는 크게 두가지 기본이 되는 브랜치를 가..
Recoil 기본 정리 최근에 진행하게된 사이드 프로젝트에서 Recoil을 사용하게 되어서 학습하고자 기본에 대해 정리하려고 합니다. 이번 글에서는 Recoil의 핵심 컨셉과 atom, selector 등 주요 개념들에 대해서 알아보도록 하겠습니다. Recoil 우선 Recoil은 페이스북에서 Redux 이후에 새롭게 발표한 상태 관리 라이브러리로, 오직 리액트와 사용가능합니다. Recoil은 atom에서 selector, 그리고 selector에서 React component로 데이터가 흐르는 데이터 흐름 크래프(data-flow graph)을 통해 상태 관리 기능을 제공합니다. Atom Atom은 상태 유닛입니다. Atom은 업데이트 가능하며, 구독가능합니다. Atom이 업데이트되면 해당 atom에 구독한 컴포넌트는 새로운..
TailwindCSS란? 핵심(Core Concept) 정리 - 1 이번에 사이드 프로젝트에서 TailwindCSS를 사용하게 되었습니다. 그래서 학습할겸 TailwindCSS의 Core Concepts에 대해 정리해보고자 합니다. TailwindCSS란? TailwindCSS란 최근에 각광받고 있는 CSS 라이브러리입니다. TailwindCSS는 미리 정의된 여러가지 유틸성 클래스들을 결합하여 스타일을 정의하는데요, 이 때문에 TailwindCSS는 스스로를 utility-first CSS Framework라고 지칭합니다. 이러한 방식은 각 엘리멘트에 적합한 의미론적인 클래스 명을 부여하는 기존 CSS의 Semantic class names의 스타일과는 사뭇 다릅니다. 그럼 이러한 방식이 어떠한 장점이 있는지에 대해서 알아보겠습니다. Utility First Funda..
HTTP Cache Control HTTP 캐시는 리소스를 디스크 혹은 메모리에 저장하여 서버에 요청을 보내지 않고 사용할 수 있도록 재는 기능입니다. 덕분에 사용자 경험을 향상시켜주는 아주 좋은 기능이지만, 때로는 원하지 않는 오래된 리소스를 사용하게 될 수 있기 때문에 유효 기간을 잘 설정해야합니다. 이 유효 기간을 설정할 수 있는 방법이 바로 HTTP의 Cache-Control 헤더입니다. 이번 글에서 HTTP의 Cache-Control을 통해 캐시의 유효 기간을 설정하는 방법에 대해서 알아보겠습니다. max-age 서버의 Cache-Control 헤더 값으로 `max-age=`를 설정하면, 해당 리소스의 캐시 유효 기간을 해당 초로 설정하게 됩니다. 유효 기간이 지나기 전까지는 브라우저는 서버에 요청을 보내지 않고, 캐시를 읽어와..
CSS 특정성 (Specificity) 들어가며 지난 글에서 알아본 Cascade의 가장 중요한 부분중 하나인 특정성에 대해 더 자세히 알아보도록 하겠습니다. 특정성에 대해서 이해를 하게 되면 CSS 우선순위에 대해서 확실하게 파악할 수 있을 것입니다. 특정성 점수 각각의 CSS rule의 선택자는 특정성 점수를 가지게 되며, 점수가 가장 높은 CSS rule이 요소에 적요됩니다. 특정성 점수는 선택자의 종류에 따라 점수가 부여되며, 여러 선택자가 중첩되어 있는 경우, 모든 점수를 합한 총합이 최종 점수가 됩니다. 각 선택자의 점수 Universal selector(*): 0점 * { color: red; } element, pseudo-element selector: 1점 div { color: red; } ::selection { colo..
CSS 적용 규칙(Cascade)에 대해서 Cascade CSS는 알다시피 Cascading Stylesheets의 약자입니다. 여기서 Cascading이란 폭포처럼 아래로 흐르는 것을 의미합니다. 즉, CSS 스타일은 하위의 요소에 스타일이 상속되거나, 이를 덮어씌울 수 있다는 것을 의미합니다. 그렇다면 어느 경우에 덮어씌워지는지, 혹은 어떤 스타일이 우선순위를 가지는지는 어떻게 결정할까요? 이러한 문제를 해결하는 알고리즘이 바로 Cascade입니다. Cascade 알고리즘은 4가지 단계로 나눌 수 있습니다. 위치 및 표시 순서 특정성(Specificity) 출처(Origin) 중요도(Importance) 위치 및 표시 순서 우선 CSS를 HTML 페이지에 적용하는 방법은 3가지가 있다는 사실을 짚고 넘어가도록 하겠습니다. 첫 번째로는 tag로..
컴포넌트 주도 개발(Component-Driven Development)이란? 최근 Storybook에 대해서 학습을 하고 있습니다. Storybook에 대한 기본 개념을 파악하기 위해 Storybook 공식 페이지의 Why Storybook? 부분을 읽던 중 컴포넌트 주도 개발이란 개념에 대해 알게되었습니다. 이번 글에서는 컴포넌트 주도 개발이 무엇이고, 왜 나왔으며, 어떻게 컴포넌트 주도로 개발을 진행할 수 있는 지에 대해서 학습한 내용을 공유하고자 합니다. Storybook 우선 컴포넌트 주도 개발에 자세히 알아보기 전에 Storybook에 대해 알아보겠습니다. Storybook이란 UI 개발을 위한 툴로, 컴포넌트를 테스트하고, 문서화하여 더 안정적이고 효율적으로 웹 개발을 할 수 있도록 도와줍니다. Storybook은 React, Vue.js 등 많은 자바스크립트 UI 프..

티스토리툴바