모모의 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

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

시맨틱 태그란의미론적 태그를 뜻합니다. 시맨틱 태그는 태그가 가진 목적이나 역할을 나타내기 때문에, 태그 사용만으로도 의미를 쉽게 파악할 수 있습니다. 사용 시 이점검색 엔진 최적화(Search Engine Optimization = SEO)웹 접근성(Web Accessibility = A11y)동료 개발자가 코드를 읽고 의도 파악하는데 도움이 됩니다. 주의할 점시맨틱 태그에 너무 집착하면 개발 생산성이 떨어집니다. 따라서, div 태그로 개발하고 필요할 때 시맨틱 태그로 바꿔 나가는 것이 효율적일 수 있습니다.  참고 자료https://www.semrush.com/blog/semantic-html5-guide/

성장일지 2024. 5. 31. 23:19

cascade란?일반적으로 cascade란 계단 형식의 폭포의 형태 일컫는다고 한다.지금 배우고 있는 css에서는 규칙을 순서에 따라서 합치는 걸 cascade라고 한다.  위 내용처럼 여러 css규칙이 적용될 때 순서에 따라 합쳐지는 형태이다.취소선 있는 속성은 위에 속성이 우선되기 때문에 적용되지 않고 정의되지 않은 영역만이 그대로 적용이 된 걸 볼 수 있다.   cascade 순서 1. 똑같은 클래스라면 맨 아래 코드 줄에 적인 스타일이 우선 적용된다.2. 선택자에 대한 명시도에 따라 우선 적용된다. 명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.    요약 (+추가 정보) CSS는 "Cascading Style Sheets"의 약자라고 한다.캐스케이드는 ..

성장일지 2024. 5. 20. 22:28