1. Closure란 함수가 선언 될 때, 렉시컬 환경을 기억해 함수가 해당 스코프 밖에서 실행되어도 그 환경에 접근할 수 있는 현상이다.2. Closure의 핵심원리는 내부 함수의 생명주기가 끝났음에도 외부 환경의 변수에 대해 참조가 가능하다는 것이며 이를 활용해서 useState를 구현할 수 있다.3. useState를 통해 데이터를 관리하고 유지할 수 있다. 배경이번 면접의 사전 과제에서 Closure에 대한 개념과 어떻게 쓰이는지에 대한 내용을 작성하였다.그리고 사전 과제를 기반으로, 기술 면접 진행 과정에서 useState를 구현하는 시간을 가졌다.Closure을 아는 것에서 나아가 어떻게 활용되는지에 대해 추론해볼 수 있는 기회가 생겨 뜻깊었고,이를 떠올려보면서 최대한 기록해보려고 한다. Ja..

개요현재 진행 중인 개인 기술 블로그 제작 프로젝트를 진행하면서Next.js + Typescript와 tailwindCSS를 사용하게 되었는데,tailwindCSS가 먹히지 않는 문제가 발생했다. 이 문제가 해결되길 바라는 마음으로,또 나랑 똑같은 문제를 겪게될 사람들을 위해 글로 남겨본다. 문제의 발견어쩌다 이 문제에 대해 발견하게 되었냐면,Header와 Footer 컴포넌트 제작 후 레이아웃에 적용을 시켰을 때아무런 변화가 나타나지 않고 그저 이미지만 나타나는 것을 보고 알게 되었다. 정말 ... 놀랍게도 컴포넌트를 만들면서 아무런 의심을 못했다.왜냐하면 전체 레이아웃을 책임질 Theme의 구조를 뒤늦게 잡았기 때문에이 구조가 잡히면 해결 될 거라고 생각했기 때문이었다. 하지만, 구조를 잡았음에도 불..

Linking 그리고 NavigatingNext.js 라우터는 클라이언트 사이드 Navigation을 위한 서버 중심 라우팅을 사용한다.동시에 렌더링을 하거나 즉시 로딩이 가능하다. 이는 Navigation이 클라이언트 사이드 상태를 유지하며 비용이 많이 드는 재랜더링을 피할 수 있고, 중단이 가능하다는 것을 의미한다.  컴포넌트react의 태그를 확장하여 프리패칭과 라우트 간에 클라이언트 사이드 네비게이션을 제공한다.라우트 간에 이동하는 주요 방법이다. next/link로 부터 import해서 사용할 수 있다.import Link from 'next/link' export default function Page() { return Dashboard} a태그와 같이 herf속성을 사용하면 된다. 동적..

개요지난 글에서 Next.js의 대략적인 구조와, CSR과 SSR과 관련해서 이야기해보았다.오늘은 Rendering에 대해서 조금 더 본질적으로 파악해보려고 한다.Next.js 공식문서의 Rendering 파트를 참고하였다.그럼 시~작! Rendering이란?내가 작성한 코드를 사용자에게 보여주는 것.어떻게 렌더링 하느냐에 따라 SSR, CSR 방식이 있다.  우리는 오늘 렌더링 환경과 요청-응답 생명주기그리고 네트워크 바운더리에 대해 이야기해볼 예정이다. Rendering Enviromrnts : Client와 Server우리가 작성한 코드는 서버와 클라이언트에서 실행할 수 있다.Client : 브라우저에 요청한 서버 속 코드를 보여주고 서버에서 받은 응답을 사용자가 볼 수 있도록 전환한다.Server..

개요Vercel에서 만든 React 프레임워크 Next.js는 가면 갈수록 많이 사용되고 있다.지난 몇 년간 꾸준히 발전하며,이 추이가 계속되면 하루 아침에 Next.js가 앞서있을 것 같다고 생각도 했다.필자 또한 프론트엔드 개발자로서 기본적인 이해도를 높이고,제대로 사용해보고 싶어서 Next.js를 나만의 방식으로 파헤쳐보자는 결심을 하게 되었다.이 글은 Next.js가 처음이신 분들께 조금이나마 도움이 될 수 있을 것이라고 생각한다.  사전 지식 정리Next.js에 대해 이야기할 때면 항상 같이 있는 키워드가 있다. 바로, SSR(Server Side Rendering), CSR(Client Side Rendering)이다.이야기 하기전 키워드에 대한 정의를 바로 짚고 넘어가보도록하자.SSR은 초..

개요현재 사내에서 진행 중인 프로젝트 CSVtoHex를 개발중이다. 해당 프로젝트는 회사 자제 솔루션 제품에 들어가는 CSV 파일을 Hex로 읽을 수 있는 프로그램을 만드는 것이 목적이다. 프로젝트 기능 명세는 아래와 같으며 오늘 구현했던 것은 CSV 파일 업로드 기능 그리고 변환 없이 다운로드 되는 과정을 구현해보려고 한다.  기능 세부 사항으로 쪼개기우선 이 기능의 목적을 기억하자. 파일을 업로드하는 기능이라는 것. 여러 방법이 있겠지만, 나는 크게 두 가지로 분류했다.파일 업로드 기능 구현하기"업로드" 버튼 혹은 이 기능을 하는 요소를 통해 파일 업로드하기drag&drop을 통해 파일 끌어와서 업로드하기업로드 한 파일 값 보여주기그리고 기본적인 UI를 만들어주었다. ..

개요지난 9월 UNITHON 10회차가 끝나고,회고록은 작성했지만 사용했던 기술에 대한 설명이 부족하다고 느껴져 작성하게 되었다.기획서는 여기를 참고하면 될 것 같고,지금부터는 내가 맡은 부분인 지도 부분을 어떻게 활용했는지 작성해보려고 한다. 기능 쪼개기우선 내가 하고자 하는 기능을 하나의 퀘스트를 깬다 생각하고 작성해보았다.그랬더니 아래와 같이 정리할 수 있었다.우리의 주 목적은 지도를 활용해 내 최애가 다녀간 장소,최애의 맛집 혹은 최애의 생일을 축하 할 수 있는 생일 카페에 대한 정보를 제공하는 것이다.나는 이 지도를 활용해 사용자에게 정보를 제공해야한다. 지도를 화면에 띄웁시다!첫 번째, 지도를 화면에 띄우기 위해 지도 API를 활용해야했다.네이버 지도, 구글 지도.. 등 다양한 지도 API가 ..

개요지난 포스팅에서 QR코드를 생성하고, 이를 이미지화 하는 작업까지 마쳤다. 그래서 오늘은 이를 활용해 입소 인증기능을 구현해볼 예정이다. 필자는 현재 프로젝트에서 Next.js와 Typescript를 활용해서 진행하고 있다.기능사항 쪼개기우선 내가 구현하고자 하는 기능을 세부사항으로 쪼갰다. 그랬더니, 아래와 같이 4가지 사항들로 정리할 수 있었다. react-qr-reader라이브러리 설치하기qr을 스캔하는 컴포넌트 생성하고, 설정해주기카메라를 통해 QR코드 인식하기결과를 확인하고 통과시키기그럼 이제 시작해보도록하자.react-qr-reader 설치하기npm i react-qr-readeryarn add react-qr-reader npm 혹은 yarn을 활용해 react-qr-reader 라이브러..

개요현재 개발중인 서비스 ARIPAY는 교내 매점 상품권을 온라인으로 관리할 수 있는 플랫폼이다.지난번에 현재 잔액 조회 및 사용자 조회에 대한 개발을 마무리했고, 이제 포인트 충전 및 차감 기능을 구현해보려고 한다. 포인트 차감 & 충전흐름 쪼개기우선 포인트 차감은 사용자 및 관리자가, 포인트 충전은 관리자가 할 수 있어야한다. 사용자 학생증 바코드 찍기해당 하는 학생 정보를 포함해 충전 화면 이동금액 입력충전 버튼 클릭충전 완료그리고 차감은 아래와 같이 정리할 수 있었다.사용자 학생증 바코드 찍기해당 하는 학생 정보를 포함해 충전 화면 이동금액 입력결제 버튼 클릭충전 완료여기에 더해, 우리가 알아야할 데이터 정보를 정리할 수 있다.학생증 바코드포인트 내역충전/결제 여부금액고려해야할 부분여러 곳에서 상..

재조정이란? 리액트에서 재조정은 VDOM에서 발생하는 변경 사항을 반영하는 과정입니다. VDOM은 메모리 상에 존재하는 가상의 DOM으로, 리액트에서 컴포넌트를 업데이트할 때 변경된 부분만 실제 DOM에 반영하려고 사용됩니다. 이 과정은 리액트의 성능과 효율성을 결정하는 중요한 요소 중 하나입니다. *재조정 알고리즘 리액트는 재조정 알고리즘을 사용하여 최소한의 업데이트만 수행합니다. 이는 성능을 향상시키는데 중요한 역할을 합니다. 재조정 알고리즘은 다양한 최적화 기술을 사용하여 성능을 향상시킵니다. 예를 들어, 컴포넌트의 props나 state가 변경되었을 때, 해당 컴포넌트와 그 자식 컴포넌트만 다시 렌더링하고 나머지는 그대로 유지합니다. Diffing 알고리즘 리액트의 재조정 알고리즘에서 핵심적인 역..