전체 글
[회고] 알고리즘 공부 방법 (프론트엔드와 파이썬)
알고리즘 스터디를 병행하며 백준 플래티넘을 찍게 되었습니다. 이를 계기로 알고리즘 공부 방법, 느낀 점, 후회한 점 등에 대해 정리하고자 합니다. 그리고 프론트엔드가 파이썬으로 코테를 보는 것에 대한 제 생각을 작게나마 남깁니다. (개인적인 생각이기 때문에 충분히 의견이 다를 수 있음을 이해해주셨으면 합니다.) 알고리즘 사이트 알고리즘 사이트는 백준, SWEA, 프로그래머스, 코드포스 등 많은 선택지가 존재합니다. 저희 알고리즘 스터디는 초반엔 백준(solved.ac), 이후엔 프로그래머스를 병행했습니다. 💡 백준 (solved.ac) 백준은 입문 단계, 특정 유형 연습 단계에 적합합니다. 특히 solved.ac는 백준의 문제가 단계별, 유형별로 잘 정리되어 있어 스터디에 활용하기 좋습니다. 많은 문제를..
[JavaScript] 이벤트 루프 (Event Loop)
JavaScript는 싱글 스레드 언어로써 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 실제 웹을 보면 여러 작업들이 동시에 처리되는 것을 볼 수 있습니다. JavaScript는 어떻게 여러 작업을 처리할 수 있었을까요? 답은 이벤트 루프(Event Loop)에 있습니다. 이 글을 통해 이벤트 루프의 개념과 JavaScript의 비동기 처리 과정을 알아보겠습니다. 이벤트 루프 (Event Loop) JavaScript는 이벤트 루프를 통한 비동기 처리로 동시성(Concurrency)을 지원합니다. 다만 그림을 보면 알듯이 JavaScript 엔진 내부에서 비동기 요청을 처리하지는 않습니다. 엔진은 그저 호출 스택(Call Stack)에 들어오는 요청을 순차적으로 처리하는 역할만 합니다. 비동기 요..
[JavaScript] getElementById와 querySelector 차이점
querySelector와 getElementById 모두 엘리먼트를 반환하는 메서드입니다. 하지만 각각은 사용 방법, 반환 객체, 성능 등에서 차이가 납니다. 이 글을 통해 querySelector와 getElementById를 자세히 비교해보겠습니다. 🎯 getElementById vs querySelector 다음은 id="username"인 input 엘리먼트를 반환하는 예제입니다. // getElemenyById const username = document.getElementById("username"); // querySelector const username = document.querySelector("#userForm #username"); getElementById element = ..
[SCSS] SCSS 문법 정리
프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보겠습니다. (티스토리 코드 블록이 SCSS 언어를 제공하지 않아 코드 가독성이 떨어집니다.) Sass (Synthetically Awesome StyleSheets) Sass를 먼저 알아보는 이유는 SCSS가 Sass로부터 등장했기 때문입니다. Sass는 CSS 전처리기로써, 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공합니다. 다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있습니다. CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생..
[JavaScript] JavaScript 엔진 구조 (Call Stack, Memory Heap)
JavaScript 엔진은 Call Stack과 Memory Heap으로 구성되어 있습니다. 각각은 Stack, Heap 자료구조와 관련된 특징들을 보이고 있습니다. 그래서 저장하는 데이터나 동작하는 방식 등에서 차이가 나타납니다. 먼저 이 글을 통해 JavaScript의 엔진 구조에 대해 알아보겠습니다. 궁극적으로는 JavaScript의 Event Loop 방식을 이해하는 것을 목표로 합니다. JavaScript 엔진 구조 JavaScript 엔진은 Call Stack과 Memory Heap으로 구성되어 있습니다. 대표적인 JavaScript 엔진의 예시로 구글의 V8 엔진이 있습니다. 또한 JavaScript는 한 번에 하나의 작업만 처리하는 싱글 스레드 언어입니다. 이는 하나의 Call Stack을..
[JavaScript] 실행 컨텍스트 (Execution Context)
실행 컨텍스트는 실행할 코드에 관한 환경 정보들을 모아놓은 객체입니다. 실행 컨텍스트는 scope, hoisting, this, closure 등의 많은 개념을 포함하고 있습니다. 그래서 동적 언어인 JavaScript를 이해하는 핵심 개념이기도 합니다. 이 글을 통해 실행 컨텍스트의 구조 및 동작 방식에 대해 알아보겠습니다. 먼저 실행 컨텍스트가 구성되는 코드들은 다음과 같습니다. 전역 코드 eval 코드 함수 코드 모듈 코드 1. 실행 컨텍스트의 구조 JavaScript 엔진은 실행 컨텍스트의 추상화된 정보들을 물리적 객체 형태로 관리합니다. 1.1 변수 객체 (VO, Variable Object) 변수 객체가 담고 있는 정보들은 다음과 같습니다. 변수 매개변수(parameter)와 인수 정보(arg..
[JavaScript] 자료형 (Data Type)
데이터 타입은 프로그래밍 언어가 사용할 수 있는 데이터의 종류를 의미합니다. 이 글을 통해 먼저 원시 타입의 종류에 대해 알아보고자 합니다. 또 불변성의 관점에서 원시 타입과 참조 타입을 알아볼 예정입니다. 그러면 왜 타입마다의 데이터 전달 방식이 다른 지도 함께 이해될 것입니다. 1. 원시 타입 (Primitive Type) 원시 타입은 immutable합니다. 즉 값이 생성된 후에 그 값을 변경할 수 없습니다. 원시 타입은 값을 복사하여 전달(pass by value)합니다. 각 타입마다 할당받는 메모리 크기가 다릅니다. 이를 통해 한정된 메모리 공간을 효율적으로 사용할 수 있습니다. 그리고 할당 가능한 값의 유효 범위를 한정할 수도 있습니다. 1.1 number C 등 대부분 언어는 다양한 숫자 타..
[CSS] position 속성 (static, relative, absolute, fixed, sticky)
이전 게시글에서 display 속성에 대해 알아봤습니다. display는 요소가 차지할 영역에 관한 정보들을 가집니다. 오늘 다룰 position은 요소가 배치될 위치에 관한 정보들을 가집니다. 즉, position이 요소의 위치를 결정하고, display가 그 요소가 차지할 영역을 결정하는 것입니다. 1. static (default) position 속성을 별도로 지정하지 않는다면 기본값으로 static이 적용됩니다. static일 때 요소들은 일반적인 문서 흐름에 따라 화면에 배치됩니다. static에서는 좌표 값(top, bottom, left, right) 및 z-index 설정이 무시됩니다. 2. relative relative는 요소의 원래 위치(static일 때 위치)를 기준으로 좌표 값만..
[CSS] display 속성 (block, inline, inline-block)
display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다. 이 글을 통해 각 속성의 특징과 대표적인 태그 예시들을 알아봅니다. 또한 inline-block이 inline과 block의 어떤 특징을 갖고 있는지도 알아봅니다. 이를 토대로 요소들을 원하는 모습으로 배치할 수 있는 것을 목표로 합니다. 1. block 특징 항상 줄바꿈이 발생합니다. 가로폭(width)은 화면 전체를 차지합니다. → width: 100% width, height, margin, padding 속성을 지정할 수 있습니다. block 요소 안에는 inline 요소를 포함할 수 있습니다. 대표적인 block 요소 → , , , 2. inline 특징 줄바꿈 ..