프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

클로저(Closure)란 무엇인가?자바스크립트에서 클로저는 함수가 자신이 선언된 환경(렉시컬 스코프)의 변수를 기억하고 참조할 수 있는 기능을 의미합니다. 클로저를 이해하면 함수형 프로그래밍, 비동기 처리, 메모리 관리 등에 대한 깊은 이해를 가질 수 있습니다. 이번 글에서는 클로저에 대한 주요 개념과 활용 방법을 Q&A 형식으로 살펴보겠습니다.클로저의 생성과 실행 컨텍스트 유지클로저가 생성될 때 어떤 방식으로 실행 컨텍스트가 유지되나요?자바스크립트의 실행 컨텍스트는 함수가 호출될 때 생성됩니다. 일반적으로 함수가 종료되면 실행 컨텍스트는 사라지지만, 내부 함수가 외부 함수의 변수를 참조하면 해당 실행 컨텍스트가 GC(가비지 컬렉션)에 의해 제거되지 않고 유지됩니다. 이 때문에 내부 함수는 외부 함수의 ..

함수가 정의될 때, 그 함수는 해당 시점의 user 상태 값을 "캡처"합니다. 이후에 user 상태가 업데이트되더라도, 함수 내부에서 사용되는 user는 함수가 정의된 시점의 값을 참조하기 때문에 최신 값이 반영되지 않는 것입니다.  2024년 12월 26일.. 웹소켓 통신으로 받아오는 다량의 실시간 데이터 중 꽤나 중요한 파트인 블랙리스트 강퇴를 정상적으로 수행하지 못한 나의 함수에 대해 Chat GPT는 React의 클로저의 작동과 관계된 문제라고했다,,, 블랙리스트가 추가됐다는 이벤트를 해당 블랙리스트 유저의 이메일과 함께 받으면 바로 접속된 유저 중 해당 이메일을 가진 유저 (블랙리스트 당사자)를 퇴장시켜야했다. 아래 함수는 블랙리스트 이벤트를 받으면 실행되는 함수이다. const handleBl..

안녕하세요 참말로 오랜만에 돌아왔어용 신용카드 입력 UI를 만들어봤어요 카드번호, 유효기간, 생년월일 유효성검사식 그리고 UI 입니다유효한 카드번호 입력시 master, visa, bc 등 메이저 카드사가 string으로 return되는 유틸함수도 아래에 있으니 참고해주세요. 제 UI에는 카드사가 나오진 않습니다. (다만 국내 카드 매입사 롯데, 신한,,, 등은 못가져옵니다 ㅜ_ㅜ 방법 아시는 분은 댓글주세요)   const [cardInfo, setCardInfo] = React.useState({ cardNumber: "", cardCompany: "", cardExpiration: "", cardPW: "", isCorporate: false, dateOfBirth:..

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ Storybook TutorialsLearn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community.storybook.js.org 안녕하세요. 사내 디자인시스템을 만들며 스토리북을 배포할 일이 생겼는데요,공식문서에서도 배포 튜토리얼이 chromatic으로만 소개되어있고, 스토리북배포를 구글링해봐도 대부분의 글이 chromatic을 통한 ..

App Router라우트를 표현하는 폴더를 '라우트 세그먼트 (Route Segment)' 라고 하는데요, Next.js 13버전부터 Root Route Segment의 이름이 app인 App Router가 추가되었습니다. Next.js의 가장 큰 특징은 파일시스템 기반의 라우팅입니다. 기존의 Pages Router에서 존재하던 문제점을 보완하여 출시된 것이 바로 App Router입니다. 그래서 라우팅에 새로운 기능이 여러가지 추가되었고, Next 13버전 출시 이후 많은 Next 유저들이 App Router로 갈아타고있습니다.  App router가 추가되며 가장 큰 달라진 점은, 1. 각종 폴더 유형 추가로 인해 디렉토리 라우팅이 편해졌습니다. 2. 레이아웃 기능이 추가되었습니다. 3. 페이지별로..

안녕하세요 :) 앞으로 진행될 프로젝트들의 기반이 될 템플릿을 만드는 작업을 하며, 어떤 디자인패턴을 사용하는게 가장 우리 팀에게 맞을지 고민하는 시간이 일주일 정도 있었습니다. 가장 유명한 디자인 패턴 중 제가 템플릿을 만들며 적용시킨 Atomic + Custom hook 패턴에 대해 소개하겠습니다. Component & Custom hook Pattern 1. 모든 함수와 state를 custom hook으로만들어 return시킵니다. 2. UI 컴포넌트내에서 해당 custom hook을 호출해 state와 함수를 씁니다. 이 패턴이 제게 가장 매력적이었던 이유는, 로직을 담당하는 컴포넌트를 만들지 않기 때문에 Props drilling 없이 UI를 분리시킬 수 있다는 것이었고, 해당 Custom h..

https://storybook.js.org/docs/get-started/install#run-the-setup-wizard Install Storybook • Storybook docs Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 스토리북을 도입하는 이유는 다양하지만 제게 가장 큰 이유는 이렇게 두가지였습니다. 1. 컴포넌트의 문서화를 통한 재사용성 증대 2. 컴포넌트에 props를 다양하..

React query를 도입하며 느낀 가장 큰 장점은 물론 서버요청의 캐싱였고, 두번째로는 useState를 이용할 필요도, useEffect를 이용해 렌더링되자마자 함수를 호출할 필요없게해주기 때문에 리소스를 줄일 수 있다는 점이었습니다. 저는 컴포넌트의 생명주기와 관련된 사이드이펙트를 처리하는 useEffect 훅을 통해 state간의 유기적인 연결을 하는 것을 좋아하는데요, 오랜만에 useQuery를 사용하려다보니 useEffect의 의존성배열을 직접 관리하지 않고 state가 변할 때 마다 refetch를 어떻게 할 수 있는지 단번에 떠오르지가 않았어요. 찾아보니 useQuery내에서 refetch하는 기능을 다양하게 제공하고있었습니다. 1. useQuery의 enabled 옵션 특정 조건에 따라..

이상하게 제 노트북은 새로운 프로젝트를 만들 때 마다 권한에러가 나더라고요 폴더 편집권한을 줘도 해결안되는 이상한 이 문제! 아래의 방법으로 깔끔하게 해결됩니다. 1. 아래와 같은 명령어를 입력합니다 sudo mkdir -p node_modules/.cache 2. 그리고 아래의 명령어를 입력하면 ls -ld node_modules/.cache 아래와 같은답변이 올겁니다. drwxr-xr-x 3 username staff 96 Jun 22 10:25 node_modules/.cache 저 username이 root인 경우가 있는데, 그런 경우 읽기의 권한만 있는거라 EACCES 에러가 계속 납니당..! 아래의 명령어를 입력해 권한을 변경 '내이름'의 위치에 자신의 컴퓨터의 username을 확인하여 넣으..

우리회사 개발팀분들과 일주일에 한번씩 클린코드를 읽고 관련해서 아이디어와 코드를 공유하는 스터디를 하고있다. 클린코드의 예시코드는 모두 자바라서 (자알못) 따로 검색해보고 자바스크립트코드를 쳐보지 않으면 이해가 어렵다 ㅠㅠ!! 이 챕터는 "시스템" 챕터! 추상화 컴퓨터 과학에서 추상화는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. 복잡하고 불필요한 세부 사항을 숨겨 코드를 더 간단하고 읽기 쉽고 유지 관리하기 쉽게 만드는 프로세스 추상화는 구체적인 사물들간의 공통점을 취하고 차이점을 버리는 일반화를 사용하거나, 중요한 부분을 강조하기 위해 불필요한 세부 사항을 제거함으로써 단순하게 만듭니다. 결국 핵심은 불필요한 코드를 제거하고 중요한 부분을 살리는 것. ..

(1) Map key, value를 저장 (key에 어떤 데이터타입도 다 들어올 수 있다는 점이 객체와의 차이점 ) Map 은 키가 정렬된 순서로 저장됨 기능: 검색 및 추가(Set) , 삭제(delete), 제거(clear) , 존재여부확인(size) const myMap = new Map(); myMap.set("key","value")

ES6의 큰 특징으로 유명한 것들 말고, 찐으로 내가 몰랐던 문법들이다. 나머지 매개변수 function func(a,b,c, ...args){ console.log(...args) } func(1,2,3) func(1,2,3,4,5,6,7) /// 매개변수로 더 많은 파라미터들이 들어올 수 있다는 의미 일급객체로서의 함수 // 1. 변수에 함수를 할당할 수 있다. -> 함수가 마치 값으로 취급, 함수가 나중에 사용될 수 있도록 조치가 되었다. const sayHello = function () { console.log("hello") } // 2. 함수를 인자로 다른 함수에 전달할 수 있다. function callFunction(func) { func() // 매개변수로 전달받은 변수가 사실 함수다...

e.key 가 "Enter" 일 때 실행 할 함수를 넣을 수 있다. const enterPressHandler = (e: any) => { if (e.key === "Enter") { searchHandler(); // 이게 실행할 함수 } }; ... setSearchKey(e.target.value)} value={searchKey} onKeyDown={enterPressHandler} /> + 23/12/24 추가 export const enterToProcess=( e : any, func: ()=>void )=>{ if (e.key === "Enter") { func(); } }; 내 생각엔, 이렇게 util 함수로 빼놓고 파일 전체에서 불러서 써도 될 것 같다. 다져다 쓸 땐 이런식으로!! e..

이건 녹음 중에 사용자가 말을 멈춘 것이 감지되면 녹음을 자동으로 종료하는 기능이다. 하루하고 반나절을 걸려서 만들었다😭 분명 더 효율적인 방법이 있을 것 같은데 다른 사람들이 올려놓은 코드 이해도 못하고 갖다 쓰기 싫어서 그냥 만들었다. 1. 가장 먼저, 처음엔 컴포넌트로 recordWithDecibel을 만들어 데시벨이 잘 측정되는지를 확인했다. 신기한 것은? 여기서 mediaRecorder를 쓰지 않음 리액트의 기능만으로 구현됨 2. 녹음시작 후 데시벨이 잘 측정되는것이 확인된 후, return아래 jsx를 다 떼고 컴포넌트에서 커스텀 훅으로 만들었다. 이것이 바로 그 커스텀 훅. // useRecordWithDecibel.ts import React, { useEffect, useRef, useS..

자동로그인기능을 넣어달라는 요청을 받았다. 어떻게 구현할 수 있을지 고민하다가 네이버를 뜯어보기로 했다. 네이버 로그인시에 auth라는 요청이 생긴다. 페이로드는 이렇게 생겼다. revalidateOnReconnect 이걸로 자동로그인을 결정하는가했더니 아니었음 자동로그인 체크 한거랑 안한거 둘 다 false로 보내주고있음. 네이버도 쿠키로 로그인JWT토큰을 저장하는데 Max-age를 컨트롤해서 자동로그인 or 일회성 로그인을 하고있었던 것을 발견했다 자동로그인을 안하면 NID-JKL, NID_SES, NID_AUT 이 세개가 "세션"이고 자동로그인 하면 NID-JKL, NID_SES, NID_AUT 이 세개가 max-age가 생기는걸 알 수 있다. 했을 때 , 안했을 때 토큰을 뜯어보니 똑같았다. 하나..

이번 프로젝트에서 react-slick을 이용해 캐러셀을 구현하였고, apex-charts를 이용해 그래프를 그렸다. react-slick import import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 세팅을 만들어준 다음, 태그에 세팅을 넣어준다. const StoryPageFinder: Settings = { slidesToShow: 5, arrows: true, nextArrow: , prevArrow: , infinite: false, vertical: true, slidesToScroll: 3, speed: 600, }; ... styled components에서도 이게 지원됨 Styled..