분류 전체보기

Git의 동작원리

Git의 버전관리 Git은 분산 버전 관리 시스템(이하 DVCS)으로, 각 클라이언트가 전체 저장소의 복사본을 소유한다. 이는 중앙 서버에 대한 의존성을 줄이고, 네트워크 연결이 불안정한 상황에서도 작업을 지속할 수 있게 한다. 모든 커밋은 sha-1을 통한 Hash를 가지며, 저장하기 전 checksum을 통해 검사하므로 데이터의 무결성을 보장한다.DVCS에서는 클라이언트가 단순히 최신 파일을 체크아웃하는 것이 아니라 전체 저장소를 복제한다. 따라서 과거 버전으로 돌아갈 때 Git은 서버할 필요 없이 로컬 데이터베이스에서 직접 읽어온다. 또한 대부분의 Git 작업은 로컬 파일과 리소스만으로도 수행할 수 있어, 네트워크상의 다른 컴퓨터로부터 정보를 받을 필요가 없다. 따라서 깃의 동작은 매우 빠르다. G..

React lifecycle 이해하기

Introduce framework에서의 lifecycle은 component가 DOM에 추가되어 브라우저에 의해 렌더링되는 시점(마운트)부터 DOM에서 제거되는 시점(언마운트)까지 여러 단계를 포함한다. 각 프레임워크마다 다른 lifecycle을 가지며 컴포넌트가 마운트될 때, 렌더링될 때, 언마운트될 때, 그리고 이들 사이의 여러 단계에서 특정 작업을 수행할 수 있다. 이 글에서는 React의 핵심 개념인 Virtual DOM, React Fiber, Reconciliation, Scheduling, Commit Phase, Render Phase 등에 대해 다룰 것이다. 이러한 개념을 이해하여 React 애플리케이션의 성능과 사용자 경험을 최적화하는 데 도움을 받을 수 있길 바란다.Prelimina..

CSS Framework들의 특징과 장단점 비교 (tailwind, styled-componets)

Introduce CSS 프레임워크를 선택하는 것은 웹 개발에서 매우 중요한 결정이다. 왜냐하면 CSS 프레임워크는 개발 속도와 코드 유지 보수성에 큰 영향을 미치기 때문이다. 다양한 CSS 프레임워크가 존재하며 각각의 프레임워크는 고유한 특징과 장단점을 가지고 있다. CSS 프레임워크를 선택할 때는 프로젝트의 요구 사항과 팀의 역량을 고려해야 한다. 따라서 이 글에서는 기업들에서 많이 사용하는 Tailwind, Styled-components, 두 가지 프레임워크를 비교하여 어떤 프레임워크가 적합한지 살펴보고자 한다. TailwindAboutTailwind CSS는 최근 웹 개발 커뮤니티에서 급격히 인기를 얻고 있는 utility-first CSS 프레임워크이다. Tailwind는 빠른 UI 개발을 위..

SPA와 MPA의 차이, 작동 원리에 대해서 (feat CSR, SSR)

서론 모던 웹사이트들은 대부분 라이브러리와 프레임워크를 이용해서 만들어진다. 이는 유저들과 웹사이트와의 상호작용이 늘어남에 따라 UI를 더 쉽게 구성하고 사용자에게 더 나은 경험을 제공하기 위한 웹 애플리케이션을 개발하는 필요성이 증가하고 있기 때문이다. 현재 사용되는 라이브러리와 프레임워크들은 각기 다른 아키텍처와 렌더링 방식을 사용하고 있다. 이러한 방식들의 차이와 장단점을 이해함으로써 적절한 라이브러리와 프레임워크를 선택하는 데 도움을 받을 수 있다. 많은 사람들이 SPA(Single Page Application)와 CSR(Client-Side Rendering)을 동일시하고, SSR(Server-Side Rendering)과 MPA(Multi-Page Application)를 동일시하는 경향이 ..

프로그래머스: 불량 사용자(JS, backtracking) feat. 현대캐피탈 2024 상반기 공개채용

알고리즘을 하도 오랜만에 풀었더니 백트래킹이라는 알고리즘을 까먹었어서 되새길겸 쓰는 글이다.문제는 간단하다. 불량 사용자 배열의 원소들이 각각 가능한 경우의 수를 구하고 이 중 중복이 존재할 수 있고, 불량 사용자 배열의 길이 및 사용자 아이디 배열의 길이가 8이하로 매우 작으니 백트래킹을 이용해 가능한 모든 경우의 수를 구하면 된다. 백트래킹을 사용하는 이유는 매번 빈 배열을 dfs에 넣어야하기 때문이다. 현대 캐피탈 2024 상반기 공채 3번이 딱 이런 문제였는데 난 그때 백트래킹을 생각을 못해서 재귀함수의 depth가 0일때 재귀함수 안에서 빈 배열을 생성하여 그 배열에 원소를 넣고 재귀함수에 다시 prop으로 넣는 방식으로 풀었었다. 참고로 1번은 구현, 2번은 그래프탐색(BFS사용), 3번은 백..

프로그래머스: 단속카메라(javascript, greedy)

문제는 쉬우나 처음 접근을 잘못해 헤맨 문제이다. 이전에 호텔방 예약하는 문제와 비슷하여 시작 시간과 끝시간만 비교했으나 다음 차의 범위가 이전 차의 범위안에 들더라도 비교가 계속 되면 과거 차들의 정보가 반영이 안되는 문제를 고려 안했다. 그 부분을 수정하기 위해 시작 시간과 끝 시간을 계속 변경 시키는 알고리즘을 추가하여 문제풀이에 성공하였다. greedy algorithm은 떠올리기는 쉬우나 그것이 절대해인지 증명하는 것이 매우 어려워 사실상 운에 맡기거나 반례를 열심히 생각해내야 한다.. function solution(routes) { let answer = 0; routes.sort((a,b)=>a[0]-b[0]) let start = 30001 let end = -30001 routes.fo..

[JS] Javascript의 프로토타입과 상속: 개념과 동작 이해

서론 Javascript에서 객체 상속은 prototype을 이용해 이루어진다. prototype은 엄밀히 말하면 전통적인 상속이 아닌 참조 메커니즘으로 작동한다. prototype 언어의 특성상, 대부분의 구성요소가 객체로 취급되며, 이는 함수, 배열, 심지어 기본 자료형까지 포함한다. ES6에서 도입된 클래스 문법은 prototype 기반의 동작을 더욱 쉽게 만드는 문법적인 설탕이다. 따라서, prototype을 이해하는 것은 자바스크립트를 효과적으로 다루는 데 중요하다. 본 글에서는 prototype과 prototype 체인의 개념 그리고 생성자 함수에 대해 설명하고자 한다. 이를 통해 자바스크립트의 객체 지향적 접근 방식을 더 깊이 이해할 수 있길 바란다.프로토타입과 프로토타입 체인 prototy..

[JS] Javascript에서의 Closures

클로저란 클로저는 외부 함수에서 선언된 변수를 참조하는 내부 함수에서만 발생하는 현상이다. MDN에선 클로저를 "함수와 그 함수가 선언된 Lexical Environment의 조합"라 정의한다. Lexical Environment는 함수가 선언될 당시의 모든 지역 변수를 포함한다. 선언된 당시의 Lexical Environment이란 실행 컨텍스트의 구성 요소 중 하나인 outerEnvironmentReference를 포함하여 변수의 유효 범위(스코프)를 결정하고 스코프 체인을 형성하는 데 영향을 끼친다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성된다. 클로저의 범위 클로저는 어휘적 범위 지정, 즉 함수가 선언될 때의 변수 범위에 바인딩되는 특성을 가지고 있다. 예를 들어,..