Happy coding

👉 React Hook React의 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능(state, Lifecycle)을 사용할 수 해주는 함수이다. 즉, React state와 Lifecycle 기능을 연동(hook into) 할 수 있게 해주는 함수이다. React에서 Hook을 도입하게 된 목적은 여러가지가 있지만 핵심만 정리해 보았다. 🌈 문제점 1 클래스 컴포넌트 기반의 React 코드 작성 시 컴포넌트 재사용성을 위해 Render props, Higher-Order Component와 같은 패턴을 사용해 문제를 해결하였다. 하지만 이 두 가지 패턴을 사용하기 위해 엄청난 양의 감싸는 컴포넌트들이 생겨 Wrapper Hell을 만들며, 구조적 제약 및 코드 추적을 어렵게 만든다. 🖐 잠깐 그럼..

React에는 컴포넌트를 선언하는 방식이 클래스형, 함수형 두 가지가 있습니다. 과거 React는 함수형 컴포넌트는 사용할 수 없었던 state와 Life Cycle을 사용할 수 있어 클래스형 컴포넌트를 주로 사용하였지만, React 16.8 버전 이후 'Hook' 이 도입되면서 함수형 컴포넌트도 state와 Life Cycle을 사용할 수 있게 됨과 동시에 클래스형 컴포넌트보다 더 편해진 방법으로 사용할 수 있게 되었습니다. React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있다. 👉 클래스형 컴포넌트 1. class를 선언해야한다. 2. Component를 상속 받아야한다. 3. render() 메소드가 반드시 존재해야한다. 4. state, Life Cycle 사용 가..

React JSX 특징 중 하나로, 아래와 같은 특징이 있습니다. React 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문에 반드시 부모 요소 하나가 감싸는 형태여야 한다. 리액트 JSX 기반으로 개발된 프로젝트들을 보면 위 내용으로 인해, 아무런 의미 없이 태그를 남발하는 상황이 나타나게 된다. 이러한 경우 아래와 같은 단점들이 생기게 된다. 1. 불필요한 DOM node 생성으로 불필요한 메모리를 잡아먹는다 2. CSS Flexbox 및 Grid로 작업할 때 레이아웃이 깨질 수 있다 3. HTML 특정 구조(ul > li, table > tr > td)에 잘못된 HTML 구조가 발생할 수 있다 이러한 이유들로 우리는 React의 Fragments를 적극적으로 활용해야 합니다. 👉 F..

👉 React 클래스형 컴포넌트 생명주기 Angular, Vue, React 컴포넌트에는 프로세스가 진행되는 시점에 따라 Lifecycle 이벤트로 불리는 특별한 함수가 실행됩니다. 리엑트 생명주기에 따라 아래와 같은 시점과 같이 필요할 때 사용할 수 있다. Mounting(생성) Updating(업데이트) Unmounting(제거) 설명 페이지에 컴포넌트를 나타내는 이벤트 컴포넌트 정보를 업데이트 하는 이벤트 페이지에서 컴포넌트가 사라지는 이벤트 실행 시점 컴포넌트 클래스의 인스턴스를 DOM 노드에 추가하는 시점 속성 또는 상태가 변경되어 컴포넌트 클래스의 인스턴스를 갱신하는 시점 컴포넌트 클래스의 인스턴스를 DOM에서 제거하는 시점 실행 횟수 1회 실행 변경에 따른 여러번 실행 1회 실행 위의 내용과..

React에 대해 전체적으로 공부하면서 내 나름대로의 정의들을 정리해 보려고 한다. 배우면서도 까도까도 색다른 매력을 느낀 React에 대해서 알아보자. 👉 React 란? 리엑트는 페이스북에서 제공해 주는 JavaScript 라이브러리(프레임워크 X)이며, 작은 UI 컴포넌트 퍼즐들을 구성 및 조합하여 복잡한 UI를 구성할 수 있도록 도와줍니다. 여기서 잠깐! ✋ 라이브러리와 프레임워크의 간단한 설명 -> 프로그램을 쉽게 만들 수 있게 하는 공통 목적이 있으며, 중요 차이점으로는 코드 흐름의 제어권이 누구에게 있느냐로 볼 수 있다. 라이브러리 프레임워크 흐름 내가 만든 코드를 내가 컨트롤 할 수 있음 누군가가 만들어 놓은 규칙에 따라 만들어야함 코드 활용 가능한 특정 기능에 대한 코드(스티커처럼 붙였다..

아이오닉에서 카카오 플러그인을 설치 후 Android 실행 시 아래와 같은 에러들이 나온다. 에러의 내용들을 상세히 보면 아래와 같다. TextView textView = convertView.findViewById(KakaoResources.login_method_text); // View cannot be converted ImageView imageView = convertView.findViewById(KakaoResources.login_method_icon); // View cannot be converted ListView listView = dialog.findViewById(KakaoResources.login_list_view); // View cannot be converted But..

검색 노출을 위해 sitemap.xml, robots.txt를 사이트에 노출시켜야 합니다.Angular에서도 당연히 노출을 시켜줘야겠죠 ?방법 절대 어렵지 않습니다 :)시작해보겠습니다. 1. src 폴더 안에 sitemap.xml, robots.txt 파일을 넣습니다.2. angular.json 파일에 robots.txt와 sitemap.xml을 추가합니다. 이상 sitemap, robots.txt 등록하는 모든 세팅은 끝났습니다.오늘도 해피 코딩하세요 :)감사합니다 !

이번 시간에는 NestJS 프로젝트를 생성하고 로컬 환경에 띄어봅시다.1. NestJS CLI를 통한 간편한 설치합니다. (저는 예시로 프로젝트 이름을 happycoding 으로 하였습니다.)$ npm i -g @nestjs/cli $ nest new (프로젝트 이름) CLI 실행 시 description(설명), version(버전), author(저자)를 물어보는데 원하는 답변을 해주면 됩니다.저는 아래와 같이 설정하였습니다. description: 해피코딩version: 0.0.1author: 박진우 그 후 package manager를 어떤 것(npm, yarn)으로 사용할 건지 물어보는데 저는 npm을 사용하기 때문에 npm을 적었습니다. 2. CLI를 사용하지 않고 프로젝트 설치첫 번째는 Gi..