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

클로저(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를 다양하..

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을 확인하여 넣으..

25일날 출근해서 메일 확인하는데 두둥..... ACTION REQUIRED를 보고 왕쫄아버린것이다. 그래도 예전에 항해에서 하도 조심하라고 많이 들었어서 alert를 받는 limit를 5달러 ?? (쫄보에용) 로 설정했기때문에 과금이 크게 되지는 않은 상태였다 현재 8달러.. next.js를 공부하며 S3로 이미지 업로드하는걸 연습하면서 IAM도 새로 만들고 버킷도 새로만들다가 세상에 .env 파일이 깃헙에 그대로 올라가버린 것이었다~~ 내 AWS key가 온 세상에 공개된 순간.. 아무도 내 레포지토리에 관심없을거라 생각했는데 어떻게 하루만에 그걸 알고 해킹을 당한건지 근데 정말 AWS support 팀의 대응이 인상적이었다. 왕빠르고 왕친절하당~ 1. 최초로 받은 연락 요약: 안녕하세요 님의 A..

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

헤더정보, 헤더이미지 메뉴 1 메뉴 2 메뉴 3 메뉴 4 로그인 섹션1 아티클1 아티클2 섹션2 푸터 header, nav, aside, section, article, footer 는 일반 div태그와 같은 속성을 갖지만 알아보기 쉽게 하기 위해 이용된다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com WD - working draft (초안단계, W3C가 검토받기 위해 공개한 문서. 초안단계) CR - candidate recommendation (후보권고안, 충분히 검토받고 테스트를 거쳐 기술적 요구사항이 충족된 단계) PR - proposed recommendation (제안권고안, 이미 광법위한 ..

https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net