nika-blog

이 포스팅은 프론트엔드 면접 파트 중 React 대비를 위한 것이며, 아래 내용에 대해 다루고 있습니다. - react 개념, 장점, 컴포넌트 - 리액트의 내부 작동 원리 - 리액트에 있는 라이프사이클 - 리액터 라우터같은 Client Side Routing이란? - setState를 사용하는 이유 - props Drilling - react Hooks 장점 - Class Component와 Function Component의 차이점 - virtual dom 개념과 장점 - JSX - 웹 성능 향상을 위해 최적화를 해 본 경험 - react에서 상태 변화가 생겼을 때, 변화를 알아채는 방법? - 여러가지 상태 관리 라이브러리 차이점 - useEffect 메소드로 componentWillUnmount 동작..

이번 포스팅에서는 리액트 라이프 사이클에 대해서 공부하고, 함수형 프로그래밍과 클래스형 프로그래밍에서 각각 어떻게 사용하는지 익혀보겠습니다. 리액트 라이프사이클 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클의 분류 생성될 때 = 마운트 업데이트할 때 = 업데이트 1. props 가 바뀔 때 2. state 가 바뀔 때 3. 부모 컴포넌트가 리랜더링 될 때 4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 제거할 때 = 언마운트 함수형 라이프 사이클 구현 useEffect ..

개념 React는 UI를 구축하기 위한 JavaScript 프론트엔드 라이브러리. 주로 SPA 만들 때 사용 장점 virtual DOM을 사용해서 어플리케이션의 성능을 향상 시킵니다. 서버, 클라이언트 사이드 렌더링 지원이 가능합니다. 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다. 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란? 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법입니다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. **컴포넌트 이름은 항상 대문자로 시작하도록 한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이..

createDocumentFragment template tag element 와 node 의 차이점 children과 childrenNodes의 차이점 offsetTop offsetWidth HTML과 DOM 차이 효율적 DOM 제어 : createDocumentFragment 개념 : DocumentFragment는 기본적으로 DOM과 동일하게 동작하지만, HTML의 DOM 트리에는 영향을 주지 않으며, 메모리에서만 정의됩니다. 왜 필요한가? 예를 들어, 여러개의 li 태그를 가지고 있는 ul 태그를 조건에 따라 추가해야 한다면 기존에는 div 태그등을 만들어서 그 안에 ul 및 li 태그들을 생성, 추가 한두에 조건에 따라 추가해 주었습니다. 이 경우 브라우저에는 보이지 않지만 DOM 트리에 연결되..

클린코드란? 읽기 쉬운 코드 고려사항 단일 책임 원칙 : 하나의 인터페이스가 하나의 역할 수행 컴포넌트 분리할 때 디자인보다 시나리오를 중점적으로 바라보기 변수명 의도를 분명하게 검색하게 쉽게 명료한 이름 함수 동사사용 함수가 하는 일을 서술적으로 표현할 수 있는 이름 사용 인자 개수 0개가 가장 좋으나 3개 이상은 피하기 부수 효과 최소화 명령과 조회를 분리 수행하거나 답하거나 둘 중 하나만 예: 객체 상태 변경 또는 객체 정보 반환 좋은 주석 법적(저작권 정보 및 소유권 정보) // Copyright (C) 2003,2004,2005 by Object Mentor, Inc. All rights reserved. // GNU General Public License 버전 2 이상을 따르는 조건으로 배포..

Git: PR + 이슈 작성하기(Pull Request)협업 중심의 개발 환경에서는 코드 작성뿐 아니라 PR(Pull Request)와 이슈 관리를 어떻게 하느냐도 굉장히 중요합니다. PR과 이슈는 단순한 기록이 아니라, 코드 리뷰와 소통을 돕는 중요한 도구이기 때문입니다.이 포스트에서는 효율적인 PR + 이슈 작성법을 함께 정리해볼게요.1. 이슈(Issue) 작성하기이슈는 버그 제보, 기능 제안, 개선 아이디어 등 작업의 출발점이 됩니다. 깃헙(GitHub)을 기준으로 설명할게요.✏️ 좋은 이슈 작성 가이드제목은 명확하게: 간결하면서도 작업 내용을 알 수 있도록예: [버그] 로그인 시 500 에러 발생본문에는 다음을 포함해요### 설명- 어떤 문제가 발생했는지 또는 어떤 기능을 제안하는지 작성### 재..

이번 포스팅에서는 좋은 커밋 메세지를 작성하는 법, 대표적 lint 규칙, 브랜치 이름 규칙 등에 대해서 공부하겠습니다. 커밋 메세지 규칙 제목 + 본문으로 작성, 제목만 작성해도 된다. 제목 작성하기 제목 태그 : 본문 영문 기준 50자 이내 제목 추천 영문 기준 동사(원형) 가장 앞, 과거 시제 x 제목 첫글자 대문자 제목 끝 . 금지 명령어, 개조식으로 작성 제목 태그 종류 제목 태그 이름 설명 Feat 새로운 기능 추가 Fix 버그 수정 Design CSS 등 UI 디자인 변경 !BREAKING CHANGE 커다란 API 변경 !HOTFIX 긴급 오류 수정 Style 코드 포맷 변경, 세미콜론 누락 Refactor 코드 리팩토링 Comment 필요한 주석 추가 Docs 문서 수정 Test 테스트 ..

이번 포스팅에서는 CSS 애니메이션을 공부하면서, keyframe 사용 법 및 다양한 애니메이션 속성에 대해 공부하겠습니다. CSS 애니메이션이란? 여러 개의 CSS 스타일을 부드럽게 전환해준다. @keyframes 키워드 활용 시 시간 순서대로 정밀하게 짜여진 애니메이션 만들기 가능 @keyFrames 활용 1. CSS로 키프레임 블록 만들기 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% ..

이번 포스팅에서는 Canvas에 대해서 대략적인 내용을 공부하고 이를 통해 사각형을 만들어 볼 예정입니다. canvas란? HTML 의 태그로, JS를 이용해서 다양한 그래픽 요소를 만들 수 있다. 사용법? 1. DOM 조작이 필요함으로 id 작성이 필요하다. 2. 크기와 높이 설정 -> 설정하지 않으면 기본 300px*150px 태그 속성 이용 (픽셀만 가능) DOM 설정 (유동적 값 가능) canvas.width = 50vw; canvas.height = 40vh; // 50vw * 40vh 로 설정됩니다. canvas.width = innerWidth; canvas.height = innerHeight; // 화면 크기에 맞춰서 설정해줄 수도 있습니다. 3. 캔버스에 그래픽 작업을 할 수 있는 속성..

이번 포스팅은 번들링의 개념과 장점, 번들러의 개념과 구성요소 등에 대해 공부해보겠습니다. CRA란? npx create react app myProject. 리액트를 시작할 때 개발 환경 구축을 위한 지식이 없이 빠르게 코드 작성을 할 수 있는 빌드 자동화 문장 번들링이란? 파일을 묶는 작업을 일컫는다. 여기서의 파일은 의존적 관계(import/export)에 있는 파일 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미하며, 모듈 간의 의존성 관계를 파악하여 그룹화하는 작업이 번들링이다. 번들링 장점 웹 서비스에서 랜더링 시 소요시간 감소 웹페이지 요청에 필요한 정적자산(JS, CSS 등)의 크기를 줄일 수 있어 최초 화면 랜더링 시 HTTP 통신 소요시간 줄일 수 있음 (단, 동일한 자산을 요구하는..