티스토리

궁금한게 많은 열아홉

검색하기

블로그 홈

궁금한게 많은 열아홉

goodgirlgonebad.tistory.com/m

끈기와 효율

구독자: 2

방명록 방문하기

주요 글 목록

[글또] Closure의 원리를 이용해서 useState 구현하기(1) 1. Closure란 함수가 선언 될 때, 렉시컬 환경을 기억해 함수가 해당 스코프 밖에서 실행되어도 그 환경에 접근할 수 있는 현상이다.2. Closure의 핵심원리는 내부 함수의 생명주기가 끝났음에도 외부 환경의 변수에 대해 참조가 가능하다는 것이며 이를 활용해서 useState를 구현할 수 있다.3. useState를 통해 데이터를 관리하고 유지할 수 있다. 배경이번 면접의 사전 과제에서 Closure에 대한 개념과 어떻게 쓰이는지에 대한 내용을 작성하였다.그리고 사전 과제를 기반으로, 기술 면접 진행 과정에서 useState를 구현하는 시간을 가졌다.Closure을 아는 것에서 나아가 어떻게 활용되는지에 대해 추론해볼 수 있는 기회가 생겨 뜻깊었고,이를 떠올려보면서 최대한 기록해보려고 한다. Ja.. 공감수 1 댓글수 0 2024. 10. 27.
[Next.js] 프로젝트에 tailwindCSS가 안 먹히는 문제가 발생하다 .. 😢 개요현재 진행 중인 개인 기술 블로그 제작 프로젝트를 진행하면서Next.js + Typescript와 tailwindCSS를 사용하게 되었는데,tailwindCSS가 먹히지 않는 문제가 발생했다. 이 문제가 해결되길 바라는 마음으로,또 나랑 똑같은 문제를 겪게될 사람들을 위해 글로 남겨본다. 문제의 발견어쩌다 이 문제에 대해 발견하게 되었냐면,Header와 Footer 컴포넌트 제작 후 레이아웃에 적용을 시켰을 때아무런 변화가 나타나지 않고 그저 이미지만 나타나는 것을 보고 알게 되었다. 정말 ... 놀랍게도 컴포넌트를 만들면서 아무런 의심을 못했다.왜냐하면 전체 레이아웃을 책임질 Theme의 구조를 뒤늦게 잡았기 때문에이 구조가 잡히면 해결 될 거라고 생각했기 때문이었다. 하지만, 구조를 잡았음에도 불.. 공감수 0 댓글수 0 2024. 7. 11.
[Next.js] Linking과 Navigating 알아보기 Linking 그리고 NavigatingNext.js 라우터는 클라이언트 사이드 Navigation을 위한 서버 중심 라우팅을 사용한다.동시에 렌더링을 하거나 즉시 로딩이 가능하다. 이는 Navigation이 클라이언트 사이드 상태를 유지하며 비용이 많이 드는 재랜더링을 피할 수 있고, 중단이 가능하다는 것을 의미한다. 컴포넌트react의 태그를 확장하여 프리패칭과 라우트 간에 클라이언트 사이드 네비게이션을 제공한다.라우트 간에 이동하는 주요 방법이다. next/link로 부터 import해서 사용할 수 있다.import Link from 'next/link' export default function Page() { return Dashboard} a태그와 같이 herf속성을 사용하면 된다. 동적.. 공감수 0 댓글수 0 2024. 7. 4.
[Next.js] Next.js를 조금 더 파헤쳐 보았다. - (2) 개요지난 글에서 Next.js의 대략적인 구조와, CSR과 SSR과 관련해서 이야기해보았다.오늘은 Rendering에 대해서 조금 더 본질적으로 파악해보려고 한다.Next.js 공식문서의 Rendering 파트를 참고하였다.그럼 시~작! Rendering이란?내가 작성한 코드를 사용자에게 보여주는 것.어떻게 렌더링 하느냐에 따라 SSR, CSR 방식이 있다. 우리는 오늘 렌더링 환경과 요청-응답 생명주기그리고 네트워크 바운더리에 대해 이야기해볼 예정이다. Rendering Enviromrnts : Client와 Server우리가 작성한 코드는 서버와 클라이언트에서 실행할 수 있다.Client : 브라우저에 요청한 서버 속 코드를 보여주고 서버에서 받은 응답을 사용자가 볼 수 있도록 전환한다.Server.. 공감수 0 댓글수 0 2024. 6. 19.
[Next.js] Next.js 구조를 (약간) 파헤쳐 보았다. - (1) 개요Vercel에서 만든 React 프레임워크 Next.js는 가면 갈수록 많이 사용되고 있다.지난 몇 년간 꾸준히 발전하며,이 추이가 계속되면 하루 아침에 Next.js가 앞서있을 것 같다고 생각도 했다.필자 또한 프론트엔드 개발자로서 기본적인 이해도를 높이고,제대로 사용해보고 싶어서 Next.js를 나만의 방식으로 파헤쳐보자는 결심을 하게 되었다.이 글은 Next.js가 처음이신 분들께 조금이나마 도움이 될 수 있을 것이라고 생각한다. 사전 지식 정리Next.js에 대해 이야기할 때면 항상 같이 있는 키워드가 있다. 바로, SSR(Server Side Rendering), CSR(Client Side Rendering)이다.이야기 하기전 키워드에 대한 정의를 바로 짚고 넘어가보도록하자.SSR은 초.. 공감수 0 댓글수 0 2024. 6. 13.
[React] 파일 업로드 & 다운로드 기능 구현하기 개요현재 사내에서 진행 중인 프로젝트 CSVtoHex를 개발중이다. 해당 프로젝트는 회사 자제 솔루션 제품에 들어가는 CSV 파일을 Hex로 읽을 수 있는 프로그램을 만드는 것이 목적이다. 프로젝트 기능 명세는 아래와 같으며 오늘 구현했던 것은 CSV 파일 업로드 기능 그리고 변환 없이 다운로드 되는 과정을 구현해보려고 한다. 기능 세부 사항으로 쪼개기우선 이 기능의 목적을 기억하자. 파일을 업로드하는 기능이라는 것. 여러 방법이 있겠지만, 나는 크게 두 가지로 분류했다.파일 업로드 기능 구현하기"업로드" 버튼 혹은 이 기능을 하는 요소를 통해 파일 업로드하기drag&drop을 통해 파일 끌어와서 업로드하기업로드 한 파일 값 보여주기그리고 기본적인 UI를 만들어주었다. .. 공감수 0 댓글수 0 2023. 11. 16.
[React+Typescript] 카카오맵 API를 활용하여 덕질지도 완성하기 개요지난 9월 UNITHON 10회차가 끝나고,회고록은 작성했지만 사용했던 기술에 대한 설명이 부족하다고 느껴져 작성하게 되었다.기획서는 여기를 참고하면 될 것 같고,지금부터는 내가 맡은 부분인 지도 부분을 어떻게 활용했는지 작성해보려고 한다. 기능 쪼개기우선 내가 하고자 하는 기능을 하나의 퀘스트를 깬다 생각하고 작성해보았다.그랬더니 아래와 같이 정리할 수 있었다.우리의 주 목적은 지도를 활용해 내 최애가 다녀간 장소,최애의 맛집 혹은 최애의 생일을 축하 할 수 있는 생일 카페에 대한 정보를 제공하는 것이다.나는 이 지도를 활용해 사용자에게 정보를 제공해야한다. 지도를 화면에 띄웁시다!첫 번째, 지도를 화면에 띄우기 위해 지도 API를 활용해야했다.네이버 지도, 구글 지도.. 등 다양한 지도 API가 .. 공감수 0 댓글수 0 2023. 10. 4.
[Next.js] react-qr-reader를 활용해 입소 인증 기능 구현하기 개요지난 포스팅에서 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 라이브러.. 공감수 0 댓글수 0 2023. 7. 16.
[React] Custom hook으로 포인트 충전과 차감 관리하기 개요현재 개발중인 서비스 ARIPAY는 교내 매점 상품권을 온라인으로 관리할 수 있는 플랫폼이다.지난번에 현재 잔액 조회 및 사용자 조회에 대한 개발을 마무리했고, 이제 포인트 충전 및 차감 기능을 구현해보려고 한다. 포인트 차감 & 충전흐름 쪼개기우선 포인트 차감은 사용자 및 관리자가, 포인트 충전은 관리자가 할 수 있어야한다. 사용자 학생증 바코드 찍기해당 하는 학생 정보를 포함해 충전 화면 이동금액 입력충전 버튼 클릭충전 완료그리고 차감은 아래와 같이 정리할 수 있었다.사용자 학생증 바코드 찍기해당 하는 학생 정보를 포함해 충전 화면 이동금액 입력결제 버튼 클릭충전 완료여기에 더해, 우리가 알아야할 데이터 정보를 정리할 수 있다.학생증 바코드포인트 내역충전/결제 여부금액고려해야할 부분여러 곳에서 상.. 공감수 0 댓글수 0 2023. 6. 13.
[React] DOM과 재조정(Reconciliation) 이해하기(관계성) 재조정이란? 리액트에서 재조정은 VDOM에서 발생하는 변경 사항을 반영하는 과정입니다. VDOM은 메모리 상에 존재하는 가상의 DOM으로, 리액트에서 컴포넌트를 업데이트할 때 변경된 부분만 실제 DOM에 반영하려고 사용됩니다. 이 과정은 리액트의 성능과 효율성을 결정하는 중요한 요소 중 하나입니다. *재조정 알고리즘 리액트는 재조정 알고리즘을 사용하여 최소한의 업데이트만 수행합니다. 이는 성능을 향상시키는데 중요한 역할을 합니다. 재조정 알고리즘은 다양한 최적화 기술을 사용하여 성능을 향상시킵니다. 예를 들어, 컴포넌트의 props나 state가 변경되었을 때, 해당 컴포넌트와 그 자식 컴포넌트만 다시 렌더링하고 나머지는 그대로 유지합니다. Diffing 알고리즘 리액트의 재조정 알고리즘에서 핵심적인 역.. 공감수 0 댓글수 0 2023. 4. 19.
[Next.js + Node.js] 로컬에서 API 연결하기 - Proxy 설정! 🚨 본 글에서 프론트엔드는 Nex.js + Typescript, 백엔드는 Node.js + Express를 나타냅니다. 해결 방법은 맨 아래 '내가 해결한 과정' 부분 부터 봐주세요. :) 사용자 API를 구축한 후 테스트를 하기 위해 임시로 코드를 작성하고 로그인이 되는 지 확인하기 위해 API 연결을 해줬다. 하지만 에러가 발생하는데 ... Uncaught (in promise) SyntaxError: Unexpected token ' 공감수 0 댓글수 0 2023. 4. 13.
비동기 처리의 꽃, Axios 🌸 계절에 맞춰 적는 글 🚨 본 글은 Promise를 알고있다는 전제하에 작성한 글입니다. :) 1. 등장 배경 우리는 동적 웹 사이트를 만들기 위해 서버로 부터 데이터를 받아온다. Javascript에서 HTTP 통신을 위해 *XMLHttpRequest 객체를 사용하는 등의 방식이 일반적이었다. Json이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다는 장점이 있었지만, 반대로 사용자에게 아무런 진행정보를 주지 않기 때문에 사용자가 요청이 완료가 안되었는데 페이지를 떠날 수도 있다는 점과 복잡한 구조를 제공한다는 단점이 있다. * XMLHttpRequest에 대해 더 알고 싶다면 아래 링크를 참고하길 바란다. [JavaScript] Ajax 정리 - Azderic.. 공감수 0 댓글수 0 2023. 4. 12.
로그인 & 회원가입 기능에 JWT 도입하기 도입 배경 현재 진행하기로 한 프로젝트는 STAY MATE라는 프로젝트로, 기숙사 입소 인증을 돕기 위한 플랫폼이다. 해당 프로젝트에서 학생들의 정보를 관리하기 위해 로그인 및 회원가입 기능이 필요하다. 그래서 정보를 관리하고 저장할 브라우저 저장소가 필요했고, 쿠키와 세션 그리고 토큰(JWT) 중 이번에 토큰(JWT)을 활용하기로 하였다. 왜 JWT 여야만 할까? 이전에 쿠키를 사용해서 로그인과 회원가입 기능을 개발한 적 있다. 그 경험을 토대로 이번에도 똑같이 적용하려고 했으나, 쿠키를 사용하기엔 큰 문제점이 있었다. 바로, 정보 탈취의 위험성 이 있다는 것이다. 쿠키에 대해 공부하던 중 아래와 같은 단점에 대해 알게 되었다. 보안에 취약하다. (요청 시 쿠키의 값을 그대로 보내어, 유출 및 조작당할.. 공감수 0 댓글수 0 2023. 3. 17.
[Typescript] 당신이 당장 타입스크립트를 써야하는 이유 자바스크립트는 웹 개발 분야에서 가장 인기 있는 프로그래밍 언어 중 하나로, 기술적 진보와 개발 생태계의 확장으로 인해 매우 강력한 도구로 자리 잡았다. 하지만 프로젝트의 규모가 커지고 복잡해지면서 기존 자바스크립트의 문제점들이 두드러지기 시작했다. 이로 인해 많은 개발자들이 타입스크립트를 채택하고 있다. 먼저 아래에는 스택오버플로우에서 조사한 가장 사랑하는 언어 순위를 매긴건데, 보면 타입스크립트가 자바스크립트를 한참 제치고 4위에 올랐다.(자바스크립트는 15위쯤...) Typescript란 타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 기존 자바스크립트의 문제점을 보완하기 위해 만들어졌다. 타입스크립트는 자바스크립트에 아주 강력한 타입을 부여한 언어라는건데, 그냥 쉽게 얘기.. 공감수 0 댓글수 0 2022. 8. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.