모모의 IT성장수첩

1. 정적 타입 검사 (Static Type Checking)TypeScript의 주요 장점 중 하나는 정적 타입 검사 기능입니다. TypeScript는 코드가 실행되기 전에 타입 오류를 발견할 수 있게 해줍니다. 이는 개발자가 실수를 줄이고 코드의 신뢰성을 높이는 데 크게 기여합니다.function add(a: number, b: number): number { return a + b;}add(5, '10'); // 컴파일 타임에 오류 발생  2. 향상된 코드 품질 및 유지보수성타입을 명시함으로써 코드의 의도가 더 명확해지고, 코드의 가독성이 높아집니다. 이는 팀 협업 시 코드 이해도를 높이고, 유지보수를 용이하게 합니다.interface User { name: string; age: number..

성장일지 2024. 8. 3. 02:08

첫 프로젝트를 회고해보려한다.기간 2주였고 멤버는 총 5명이 진행한 프로젝트이다. 중간에 1명이 부트캠프를 포기해서 결국 4명으로 프로젝트를 진행했다.그 부분이 참 마음을 힘들게 했지만,남은 4명은 사이가 좋아진 계기가 되었다. 그럼 우리의 첫프로젝트를 소개해볼까 한다. fandom-k 시현영상 서비스 소개 및 선정 이유 우리는 총 4개 의 프로젝트 중 난이도가 상인 프로젝트를 선정하였다.아이돌이라는 주제가 시각적으로 눈에 확들었고 다른 프로젝트와 차별성이 있어 보였기 때문이다.어렵더라도 실력으로 남을꺼라 생각 했기 때문에 그렇게 우리 팀은 도전을 해보기로했다.  서비스 소개 'Fandom K'는 아이돌 조공 플랫폼이다.사용자가 보유한 크레딧을 통해 원하는 아이돌에게 후원을 하여 광고를 걸거나,이달의 차..

성장일지 2024. 7. 31. 03:55

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

스프린트 일곱번째 미션이다.점점 컴포넌트에 대한 이해도가 올라간다.useHookuseMemouseCallback을 통한 최적화를 계속 연습해야지. 근데 갈수록 의욕이 상실된다... 이유는..분위가 다들 열심히 하는 분위기 되면나도 따라가는데뭔가 다들 하기 싫어하는 분위기?같아서솔직히 하기 싫다. 나는 주부에 솔직히 제일 당장 취업이 아쉬운 것도 아닌데나만 용쓰는 느낌인 것 같아서 ... 힘이 안난다. 내가 힘이 너무 들어갔나???? 취업해도 사람들과 관계가 좋을까...전에도 개발직군 사람들과 종종 트러블이 있었기 때문에일 자체에 근본적인 생각이 자꾸 나를 힘들게 한다. 일반 회사는 솔직히 나이가 걸림돌이 될 것 같고상주 단기 프리랜서를 목표로 공부하긴 하지만의욕이 많이 도태되어 있다.그래도 이렇게 코드 ..

성장일지 2024. 7. 9. 00:18

웹 페이지 렌더링 방식은 주로 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

어언 두달이 다 되가는 부트캠프 과정리액트를 들어오면서점점 알아야하는 개념이 넘쳐나는데이해도 (살짝?) 안되는 상태에서그냥 무작정 만들면서 깨우쳐보자 싶어열심히 따라가는 중이다.  요구 사항페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.상품 이미지는 최대 한개 업로드가 가능합니다.이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.API를 통한 상품 등록은 추후 미션에서 적용합니다.각 input의 placeholder 값을 정확히 입력해주세요.상품 등록 페이지 주소는 “/additem” 입니다.추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.  1. 컴포넌..

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

리액트에서 배열을 렌더링할 때 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

useEffect / useState 사용하면서 점점 어려워지는 리액트허심탄회한 코드 리뷰 남겨보면서 리마인드 해봅니다.   이번 미션은 페이지에 api 가져오고 페이지 네이션까지 해야 했다.점점 하기 싫어지는 공부단계하지만 꼭 알아야는 개념이기 때문에꾸역꾸역 해봅니다.  1. 스위치문 변경const getPageSize = () => { const width = window.innerWidth; if (width  if문을 활용해서 사이즈 변경 시 상품을 보여주는 값을 다르게 지정했다.const getPageSize = () => { const width = window.innerWidth; switch (true) { case (width  멘토님께서 이렇게 해야 깔끔하고 ..

성장일지 2024. 6. 25. 13:58

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

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