모모의 IT성장수첩

Presentational & Container 디자인 패턴은 React 애플리케이션을 구조화하는 데 사용되는 패턴으로, UI와 비즈니스 로직을 분리하여 더 깨끗하고 유지보수하기 쉬운 코드를 작성하는 데 도움을 줍니다. 이 패턴은 Dan Abramov에 의해 널리 알려졌습니다. Presentational Components Presentational 컴포넌트는 UI를 렌더링하는 데 집중하며, 주로 다음과 같은 특징을 가집니다:Stateless (상태 없음):주로 자신의 상태를 가지지 않고, 부모 컴포넌트로부터 props를 받아서 렌더링합니다.UI를 설명하는 데 필요한 모든 데이터를 props를 통해 받습니다.No Side Effects (사이드 이펙트 없음):비즈니스 로직이나 데이터 페칭 등의 부작용이 ..

성장일지 2024. 7. 13. 13:45

CSS-in-JS는 스타일을 JavaScript 코드 내에 작성하는 기법으로, React와 같은 현대적인 프론트엔드 프레임워크에서 많이 사용됩니다. 이 기법은 여러 라이브러리(예: styled-components, Emotion, JSS)를 통해 구현할 수 있습니다. CSS-in-JS의 장점과 단점을 아래에 정리했습니다. 장점Scoped Styling (범위 제한 스타일링):스타일이 컴포넌트에 국한되어 적용되므로 스타일 충돌을 피할 수 있습니다. 각 컴포넌트는 고유한 클래스 이름을 가지게 됩니다.Dynamic Styling (동적 스타일링):JavaScript의 모든 기능을 활용하여 조건부 스타일링 및 동적 스타일링이 가능합니다. 예를 들어, 컴포넌트의 props에 따라 스타일을 변경할 수 있습니다.Co..

성장일지 2024. 7. 13. 13:44

웹 페이지 렌더링 방식은 주로 CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static Site Generation)으로 나뉩니다.  CSR (Client-Side Rendering) 특징:초기 로딩 시 빈 HTML과 최소한의 JavaScript만 전달됨.브라우저가 JavaScript를 실행하여 필요한 데이터를 서버에서 가져와 렌더링.초기 로딩이 느릴 수 있지만, 이후 페이지 전환은 빠름.React, Vue.js 등의 SPA(Single Page Application) 프레임워크에서 주로 사용.사용 상황:인터랙티브 웹 애플리케이션: 사용자와의 상호작용이 많은 애플리케이션에 적합.빠른 페이지 전환: 애플리케이션 상태가 클라이언트에 유지되어 페이..

성장일지 2024. 7. 5. 12:59

리액트 생명주기(Life Cycle)는 리액트 컴포넌트가 생성되고, 업데이트되며, 삭제되는 일련의 과정을 의미합니다.이 생명주기는 크게 세 가지 단계로 나눌 수 있습니다: 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting).각 단계에는 특정 메서드가 실행되며, 이를 통해 개발자는 컴포넌트의 다양한 시점에 특정 작업을 수행할 수 있습니다.1. 마운트(Mounting) 마운트 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생합니다. 이 과정에서 호출되는 주요 메서드는 다음과 같습니다:constructor(): 컴포넌트가 처음 생성될 때 호출됩니다. 주로 초기 상태(state) 설정 및 인스턴스 변수 초기화에 사용됩니다.static getDerivedStateFromProps(..

성장일지 2024. 7. 5. 12:53

리액트에서 배열을 렌더링할 때 key를 사용하는 이유는 성능 최적화와 올바른 컴포넌트 업데이트를 위해서입니다.구체적으로는 다음과 같은 이유가 있습니다 변경 사항 추적:key는 리액트가 각 컴포넌트를 구분하는 고유한 식별자입니다. 이를 통해 리액트는 어떤 항목이 변경, 추가, 또는 제거되었는지 효율적으로 추적할 수 있습니다.성능 최적화:key를 사용하면 리액트가 기존 요소를 재사용하고 필요할 때만 새 요소를 생성하거나 제거할 수 있습니다. 이는 DOM 조작을 최소화하고 성능을 최적화하는 데 도움이 됩니다.일관된 상태 유지:컴포넌트의 상태나 이벤트 핸들러가 일관되게 유지될 수 있습니다. key가 없으면 리액트는 컴포넌트를 재사용하는 대신 다시 렌더링할 수 있고, 이 경우 컴포넌트의 상태가 초기화될 수 있습니..

성장일지 2024. 6. 29. 11:01

리액트에서 Virtual DOM이란? Virtual DOM은 리액트가 사용하는 가상의 DOM 구조입니다. 실제 DOM과 유사하지만, 메모리에 가상으로 존재하는 가벼운 사본입니다. 리액트는 이 Virtual DOM을 사용하여 UI 변화를 효율적으로 관리하고 렌더링 성능을 최적화합니다.  Virtual DOM을 사용하는 이유성능 최적화:최소화된 DOM 업데이트: 실제 DOM 조작은 성능에 큰 영향을 미칩니다. 리액트는 Virtual DOM을 사용하여 변경 사항을 먼저 가상으로 계산한 후, 필요한 부분만 실제 DOM에 반영합니다. 이를 통해 불필요한 DOM 조작을 줄이고 성능을 최적화합니다.배치 업데이트: 여러 변경 사항을 한 번에 처리하여 최적의 방법으로 DOM을 업데이트합니다.간단한 프로그래밍 모델:명령형..

성장일지 2024. 6. 29. 11:00

HTTP 메소드란HTTP(하이퍼텍스트 전송 프로토콜)는 클라이언트와 서버 간에 데이터를 주고받는 프로토콜입니다.HTTP는 다양한 종류의 요청을 정의하고 있으며, 이 요청들은 HTTP 메소드(HTTP methods)라고 불리는 특정한 명령어로 식별됩니다. 각각의 HTTP 메소드는 서버에서 수행할 동작을 지정하며, 웹 개발에서 클라이언트가 서버로 보내는 요청의 성격을 결정짓는 중요한 요소입니다.많이 사용하는 기본적인 메소드GET: 데이터를 받기 위해 사용하는 메소드입니다.용도: 리소스를 요청하기 위해 사용됩니다.특징: 요청한 URI의 리소스를 서버에서 가져옵니다. 데이터를 조회할 때 주로 사용됩니다. 데이터를 서버로 보내는 것이 아니라, 서버로부터 데이터를 받아오는 목적으로 사용됩니다.부작용: GET 요청은..

성장일지 2024. 6. 21. 11:46

렉시컬 스코프란스코프란 식별자(변수, 함수 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름) 접근 규칙에 따른 유효 범위를 뜻합니다.렉시컬 스코프란 식별자 유효 범위가 함수를 호출할 때 결정되는 것이 아닌, 선언할 때 결정되는 것을 뜻합니다. 정적 스코프(Static scope)라고도 합니다. 자바스크립트는 렉시컬 스코프를 따릅니다. 렉시컬 스코프는 변수의 유효 범위(scope)를 결정하는 방식 중 하나로, 변수가 어디서 정의되었는지에 따라 결정됩니다.이 개념은 프로그래밍 언어에서 매우 중요한 개념 중 하나로 여겨지며, 다양한 언어에서 일관되게 적용됩니다.   1. 렉시컬 스코프의 기본 원리 렉시컬 스코프는 코드가 작성된 위치에 기반하여 변수의 스코프를 정의합니다. 함수를 어디..

성장일지 2024. 6. 21. 11:38

this 란?자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수를 말합니다.자바스크립트에서 this 는 호출방식에 따라서 동적으로 결정됩니다. 바인딩이란?함수 또는 메소드를 호출한 대상에 실제 함수를 연결해주는 것을 말합니다.자바스크립트에서 this 는 어떤 환경에서 사용하는지에 따라 this 에 바인딩되는 객체가 달라집니다.  전역 환경웹 브라우저, 전역 환경에서 this 는 전역 객체인 window 가 바인딩됩니다.console.log(this === window); // true  함수 내부함수 내부에서 this 의 값은 함수를 호출한 방법에 의해 결정됩니다.  단순 호출전역에서 함수를 호출하고 있어 this 는 전역 객체인 window 가 바인딩됩니다.function retu..

성장일지 2024. 6. 14. 21:49

이벤트 버블링자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 합니다.기본적으로 이벤트 버블링이 일어나고, 이를 막으려면 이벤트 객체에서 stopPropagation 메소드로 전파를 막을 수 있습니다.  이벤트 캡쳐링부모 요소에서 자식 요소로 이벤트가 전파되는 것을 이벤트 캡쳐링이라고 합니다.캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener 에 세번째 프로퍼티에 true 또는 { capture: true } 를 전달하면 됩니다. 이벤트 위임자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리하는 방식을 이벤트 위임이라고 합니다.

성장일지 2024. 6. 14. 21:43

Git Flow 브랜치 전략? 각 branch 생성에 규칙을 만들어서 협업을 유연하게 하는 방법론이며,깃에서 제공하는 강력한 브랜칭 기능을 활용한 변경이력 관리 전략이다. Git Branch 전략이 왜 필요해? Git Branch 전략이 무엇인지는 알았는데, 왜 Git Branch 전략이 필요한 걸까?바로 팀원들간의 공통의 Branch 용어를 정하여 Git Branch에 대해 팀원들간의 공통의 이해를 달성하고,더 나아가서 팀의 Git Branch를 효율적으로 관리할 수 있기 때문에 Git Branch 전략이 필요하다고 생각한다. * Git Flow- 브랜치 수가 많고 여러 규칙이 있는 만큼, 규모가 큰 프로젝트에서 적합하다.- 배포 주기가 잦지 않은 프로젝트에서 적합하다.- 다양한 버전 관리가 필요한 모..

성장일지 2024. 6. 7. 06:00

Git merge란? git branch를 다른 branch로 합치는 과정을 merge라 한다.merge의 기본 단위는 브랜치이며, git merge 명령어로는 커밋 단위로 합치기가 불가능하다 git merge    병합하는 브랜치 사이의 관계에 따른 merge 종류 Fast-forward 머지3-way 머지 머지를 하면 새로운 커밋이 생긴다.그리고 머지를 통해서 생겨난 커밋을 머지 커밋(merge commit)이라고 부른다.이 그림을 보면 지금 master 브랜치에서 premium 브랜치를 머지해서 검은색의 머지 커밋이 생긴 것을 알 수 있다.하지만 머지를 한다고 항상 이렇게 새로운 커밋이 생기는 건 아니다. 지금 저는 master 브랜치에 HEAD가 master 브랜치를 가리키고 있다.이 상태에서 ..

성장일지 2024. 6. 7. 05:45