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

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

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

깊이 우선 탐색(DFS, Depth First Search)은 그래프나 트리 같은 자료 구조에서 한 경로를 끝까지 탐색한 후, 다른 경로를 탐색하는 방식의 탐색 기법입니다. 한 번에 한 방향으로 깊이 탐색을 계속하다가 더 이상 탐색할 수 없을 때 이전 경로로 돌아가 다른 경로를 탐색합니다. 이는 재귀적 호출이나 스택을 사용하여 구현할 수 있습니다.DFS의 특징한 경로를 끝까지 탐색하고 나서 다른 경로를 탐색.순환 구조를 가진 그래프에서 무한 루프에 빠질 수 있기 때문에 방문한 노드를 체크해야 함.재귀적 호출이나 스택을 통해 구현 가능.깊은 노드까지 빠르게 탐색할 수 있으나 최적의 해를 보장하지 않음.DFS는 모든 가능한 경로 탐색, 백트래킹, 경로 찾기 문제에 자주 사용됩니다.  스택을 활용하는 DFSf..

안녕하세요 참말로 오랜만에 돌아왔어용 신용카드 입력 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을 통한 ..

/** @param content : 들어갈내용 * @param number : 자를 글자수 */ export function truncateString(content: string, number: number) { // 문자열 길이가 16 초과일 경우 if (content?.length > number) { // 처음 16글자를 가져오고 말줄임표(...)를 추가 return content.substring(0, number) + "..."; } // 길이가 16 미만이면 원본 문자열 반환 return content; } 활용 팁 반응형 처리와 함께 유용하게 사용할 수 있음. // React ... const isTablet = useMediaQuery({ query: "(max-width:1023px)..

제 세 명의 구독자분들을 위해 오랜만에 일기로 돌아왔어여 ^^.. 개발일지는 왜 안쓰냐고요? 3월 둘쨋 주 부터는 1주 1개발일지 하려구용 진짜루 지난주까지 정처기 필기시험 준비 + 이사로 바빴거든요 그래서 일도 많이 밀려서 아주 정신없이 일하는 중입니당 어제 2주 만에 회사 갔다가 제니쿠키를 받아왔어용 뭔가 할머니 집 감성이죠? 이사에 지친 흑돼지인형이예요 포장이사하면 그대로 ctrl+x ctrl+v 해주는줄 알았는데 정리는 제가 다 하는거였더라고요.. 듸지는줄알았어요 이사한 날 후리스를 세탁기에 돌렸는데 지갑도 같이 돌렸어요 🙂🔫 아주 말랑말랑한 지갑이 완성됐어요 그리고 꽁이가 놀러와서 같이 짜장면도 먹고 이삿짐 정리도 도와주고 책상도 조립해주고갔어요 패트와 매트같았는데 생각보다 조립 잘해서 놀랬음 ..

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를 다양하..