내가해냄

인트로 함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 클래스 컴포넌트의 생명주기 클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다. 📌 생명주기 순서 컴포넌트 실행 constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드 render() 실행 : 미리 구현한 HTML을 화면상에 보여줌 componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨 컴포넌트에 변화가 있을 때 componentDidUpdate() 실행 update가 발생하는 경우 props가 변경된 경우 state가 변경된 경우 부모 컴포넌트의 리렌더링 foreUpdate 강제로 변경하는 경우 컴포넌트가 제거될 때 componentWillUnmount() 실행 클래스형과 함..

인트로 부트캠프 advanced 과제 진행 중 advanced에서도 또다시 도전하기 과제가 있더라고요. 키보드 방향으로 자동검색(drop down) 항목을 선택할 수 있도록 하는 거였습니다. 과제가 생각보다 빨리 끝났기 때문에 도전해 봤습니다. 키보드로 드롭다운 선택할 수 있게 해주는 라이브러리가 있었지만 직접 ref를 사용해서 해보기로 했습니다. 결과 어떻게든 구현은 할 수 있었습니다. 컴포넌트에 ref를 넘겨야 해서 forwardRef를 써야 하더라고요. 고정된 틀에서 구현을 해야 해서 그런지 더 헷갈리고 복잡했습니다. 코드 자동검색 목록의 경우 객체를 사용하여 임시로 완성되어 있습니다. css의 경우 styled-Component로 적용하였습니다. //자동검색을 위한 임시 목록들 const dese..

인트로 오늘은 portal에 대해서 알아보겠습니다. 너무 힘들어서 별 말없이 바로 시작하겠습니다.. 나 파이팅.. 왜 사용하나요? createPortal을 사용하면 자식을 원하는 위치에 렌더링 시킬 수 있습니다. 여기서 자식은 react로 렌더링 할 수 있는 모든 것을 말합니다. createPortal을 사용하면 어떤 컨테이너에 있든 'escape'가 가능합니다. 또한 이벤트 버블링 문제를 해결할 수 있으며 Z-index 관리가 편하다 등의 장점이 있습니다. createPortal(children, domNode) createProtal을 사용해서 portal을 만들 수 있습니다. import ReactDOM from 'react-dom'; //컴포넌트 // return 내부 { ReactDOM.crea..

인트로 각자 포트폴리오 사이트를 만드는 스터디를 진행하면서 개인적으로 사이트를 만들어보고 있는데 nav에서 살짝 멈칫했습니다. nav 목록을 클릭했을 때 현재 페이지에 해당하는 목록만 스타일을 다르게 적용하고 싶은데 이걸 어떻게 쉽게 해결할 수 있을까... 고민했습니다. 고민을 하던 중 페이지마다 /path에 차이가 있으니까 이걸 이용하면 쉽지 않을까라는 생각이 들게 되었고 useLocation이라는 훅을 발견했습니다. useLocation 사용법 npm install react-router-dom import { useLocation } from "react-router-dom"; //컴포넌트 const location = useLocation(); useLocation이란? 이 훅은 현재 경로에 대한..

인트로 오늘은 react로 만든 프로젝트를 Github page에 배포하는 방법을 정리해 보겠습니다. ph-pages 패키지를 설치해서 배포하려고 합니다. 딱히 배포할 프로젝트는 없는데 나중에 배포할 때 이 포스팅을 보는 걸로 하고 오늘은 아무거나 배포해 보죠. 1. ph-pages install npm i gh-pages 2. package.json 수정 "homepage" create-react-app이 사이트를 빌드할 때 URL을 알아야 하기 때문에 필요합니다. "homepage" : "https://{username}.github.io/{저장소 이름}" "scripts" 안에 내용 추가 "scripts": { "start": "react-scripts start", "build": "react-s..

인트로 오늘은 리액트에서 SCSS 사용하는 방법에 대해 알아보려고 합니다. SCSS를 알고만 있고 사용하지 않았는데 CSS 코드가 길어질 때마다 파일 보는 게 너무 괴롭더라고요.. 이참에 SCSS에 익숙해지려고 합니다. 일단 오늘은 리액트에서 SCSS 사용하려면 어떻게 해야하는 지만 알아보겠습니다. Sass Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor 즉 css 전처리기입니다. 가독성이 높고 코드 재사용에 유리한 CSS를 생성할 수 있습니다. 변수, 조건문과 반복문 등 추가기능을 사용할 수 있습니다. 더 자세한 내용은 문법 포스팅에서 알아보도록 하죠. 어쨌든 순수 CSS보다 지원하는 기능도 많고 짧은 코드로 원하는 스타일을 적용할 수 있습니다...

인트로커스텀 훅 찐막차입니다. axios에 대해서도 알아야 하기 때문에 아예 따로 빼버렸습니다. 이전까지 훅들과 달리 코드가 조금 더 복잡하기도 하고요. Before start...axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입니다. 사용하기 위해서는 라이브러리 설치를 해줘야합니다.npm install axiosuseAxios결과물부터 확인해 봅시다. api로부터 데이터를 받아올 때 status를 보여줍니다. refetch 버튼을 클릭하면 다시 정보를 요청합니다. 그럼 이제 코드를 살펴보겠습니다.useAxios.jsimport axios from "axios"; import { useState, useEffect } from "react"; const us..

인트로유용한 기능 2탄입니다. 이 친구들은 만들면서 재밌었어요. 간단한데 눈에 확확보여 최고야..useNotification이벤트를 발생시켰을 때 브라우저에 notification을 띄워줍니다. 콘솔창에서도 확인할 수 있습니다. 만약에 알림이 안 뜬다? 크롬 > 설정 > 개인 정보 보호 및 보안 > 사이트 설정 > 알림 을 확인하세요. notification에 대한 자세한 내용은 아래 문서에서 확인하세요. Notification - Web APIs | MDNThe Notification interface of the Notifications API is used to configure and display desktop notifications to the user.developer.mozilla.or..