개발 창고

[React] 리액트의 생명주기 메서드와 Hook

리액트 컴포넌트는 기본적으로 브라우저 상에서 나타되고, 업데이트되며, 사라지는 과정을 거치게 됩니다. 이러한 과정을 생명주기라 하며, 리액트의 모든 컴포넌트에는 생명주기가 존재합니다. 생명주기 내에서는 여러 메서드가 호출되며 이를 사용할 수 있는데 클래스형 컴포넌트에서는 생명주기 메서드를 사용하고, 함수형 컴포넌트에서는 Hook을 사용할 수 있는 점에서 서로 차이가 있습니다. 우선 리액트의 클래스형 컴포넌트의 생명주기 메서드를 알아본 다음, 함수형 컴포넌트의 Hook중 하나인 useEffect 함수를 통해 차이점을 더 자세히 알아보겠습니다. 메서드란? : 클래스 내부에서 정의한 함수를 메서드라 부릅니다. 생명주기 메서드 클래스형 컴포넌트를 작성할 때는 아래와 같이 render() 메서드를 호출하고 JSX..

[Firebase] Firebase hosting으로 next.js 배포 자동화하기

시작하며 firebase는 웹 앱을 빠르게 배포 해주는 hosting기능을 제공합니다. 이번 글은 next.js 프로젝트를 firebase hosting을 이용하여 사이트에 배포하는 법에 대해 작성하였습니다. 또 github와 연결하여 pr을 날리고 병합할 때 자동으로 배포하는 방법에 대해서도 알아보겠습니다. 로컬 환경에서 firebase deploy 적용하기 Firebase CLI 설정하기 firebase cli 설치하기 npm i firebase-tools -D 우선 firebase cli를 npm install을 통해 설치해줍니다. 로컬환경에 firebase cli를 설치하게 되면 sudo 권한 문제와 피할 수 있습니다. node_modules/.bin/firebase login 그리고 위 명령어를..

[React] recoil로 주문내역 관리하기

학교 수업의 팀 프로젝트인 음식 주문 서비스를 구현하는 과정에서 음식 주문 내역을 추가하거나 수정, 삭제하는 기능을 구현하는 과정을 정리하였다. recoil을 사용하는 이유는 여러 컴포넌트에서 주문 정보를 사용해야하기 때문이다. recoil의 중첩객체(nested object)를 함수형 업데이트하기 주문 내역을 추가, 삭제하기 이전에 중첩 객체를 함수형 업데이트하는 방법을 알아보자. 보통 useState안의 배열을 수정하기 위해서 아래와 같은 방법으로 함수형 업데이트를 사용해야한다. setOrderInfo((prev) => ([...prev, newList])); import { atom } from "recoil" export const orderInfoState = atom({ key: "orderI..

[자료구조] c언어로 큐, 원형 큐 구현하기

큐(Queue)란? 큐(Queue)는 먼저 들어온 데이터가 먼저 나가는 자료구조이다. 선입선출(FIFO: First-In First-Out)한다는 특징이 있고, 매표소나 계산대의 대기열을 생각해보면 이해하기 쉬울 것이다. 이번 글에서는 큐와 큐의 더 발전된 형태인 원형 큐도 구현해 보겠다. 큐 타입 구조체 정의 및 초기화 함수 #include #include #define SIZE 100 typedef char element; typedef struct { element data[SIZE]; int rear, front; } QueueType; void init(QueueType *Q) { Q->rear = Q->front = -1; } 큐의 요소에 해당하는 data 배열과, 큐의 가장 앞과 뒤에 해당하..

[티스토리 스킨 만들기] 2. 개발 환경 세팅하기(Typescript, TailwindCSS, Webpack)

시작하며 티스토리 스킨 적용에 필요한 파일에는 index.xml, skin.html, style.css, script.js가 있습니다. 이 파일들을 빌드하기 위해 개발 환경을 세팅해보겠습니다. 이 글은 타입스크립트와 tailwind css의 사용 설정과 webpack을 이용해 이들을 한번에 빌드하는 과정에 대해서 작성하였습니다. 티스토리 스킨 개발을 위한 파일 디렉토리는 다음과 같습니다. tistory_skin |- index.xml |- skin.html |- style.css |- /images |- script.js Typescript로 개발하기 우선 개발을 진행할 src폴더를 만들어 script.ts파일을 생성합니다. 이 파일에서 스킨에 적용할(사이드바 동작, TOC 등) 기능을 개발하면 됩니다...