codepen⚡ !codepen[editor/na-hyeong9/embed/019fd9fb-50f4-73b8-b9ce-06e0a3ce98ee?default-tab=html%2Cresult] Day 5 · 모달 팝업 (바닐라 + jQuery) > 버튼을 누르면 뜨고, 바깥/X/ESC로 닫히는 창. > 핵심은 오버레이 클릭 판별(이벤트 버블링)과 ESC 키...

지난 편에서 this를 다뤘다. 이번엔 자바스크립트의 상속 방식 프로토타입을 짧게 정리한다. class 문법 뒤에 숨은 구조다.ES6 전까지 class 문법이 없었다. 대신 프로토타입(Prototype) 으로 상속을 구현했다. 지금 쓰는 class도 사실 프로토타입을

본인은 탭 전환을 제이쿼리로 만든 기억이 많다.그래서! 이번엔 JS랑 jQuery 비교 버전을 만들어 볼 것이다.(갑자기 든 생각인데 둘의 비교 버전 시리즈도 만들어봐야겠다. 나란 사람 성인 ADHD의 표본...ㅎㅎㅎ)잡담은 이만하고 복기 시리즈 레쓰고탭을 누르면 해당

먼저 말씀 드릴 건 이 글은 쌩기초, 쌩초보 를 위한 글인 점을 유의해주세요. ( \_ \_ )제목을 클릭하면 내용이 펼쳐지는 FAQ 형태.이번엔 CSS만으로 안 되는 벽을 만난다. 높이 애니메이션의 함정을 직접 겪어보는 게 목적이다.!codepeneditor/na-h

토글스위치 냠냠 하세요,,, 한 입 하세요,,버튼 다음으로 어디서든 쓰이는 토글 모음집을 만들어보았다.!codepeneditor/na-hyeong9/embed/019f6b85-9b25-7e63-afcc-fa7b8f8fa61f?default-tab=html%2Cresul

다양한 버튼이 필요한 당신 나는 이제 퍼블리셔가 사용할 수 있는 모든 컴포넌트를 제작하기로 마음 먹었다. 진짜다. 진짜... 할거다~ 이것은 버튼 시리즈다. 일단 처음 작업은 가장 친숙한 HTML과 CSS, JS로 시작하겠다. 코드펜 작업물 !codepen[ed

맞다. 나는 2년 7개월치 퍼블리셔다. 회사가 망해버려 만 7개월째 백수가 되어버린 개백수다.6년 전 회사를 퇴사하고 나서 내가 무얼 좋아하는지 고민 끝에 개발에 뛰어들었다.바로 학원을 등록해서 풀스택 과정을 들었다. 파이썬과 mongo DB를 이용한 과정이었다. 내가

지난 편에서 프로토타입을 다뤘다. 이번엔 코드를 여러 파일로 나눠 쓰는 방법 — 모듈 시스템이다. import/export를 매일 쓰면서도 정확히 뭘 하는 건지 넘어갔던 개념을 정리해본다.처음 자바스크립트를 배울 때는 파일 하나에 코드를 다 넣는다. 근데 프로젝트가 커

지난 편에서 this를 다뤘다. 이번엔 자바스크립트의 상속 구조 — 프로토타입을 파본다. class 문법 뒤에 실제로 뭐가 숨어있는지 알게 되면 JS가 좀 다르게 보인다.다른 언어는 클래스로 객체를 찍어낸다. 자바스크립트는 ES6 전까지 class 문법이 아예 없었다.

지난 편에서 실행 컨텍스트를 다뤘다. this는 그것과 떼어놓을 수 없는 개념이다. 실행 컨텍스트가 만들어질 때 this가 결정되기 때문이다.대부분의 언어에서 this는 "나 자신"이다. 클래스 안에서 쓰면 항상 그 인스턴스를 가리킨다.자바스크립트는 다르다. this는

지난 편에서 콜백, Promise, async/await의 흐름을 짚었다. 이번엔 그게 실제로 어떻게 돌아가는지 — 브라우저 안을 들여다본다.async/await로 비동기 코드를 동기처럼 쓸 수 있게 됐다. 근데 한 가지 의문이 생긴다.결과가 뭘까? 1 → 2 → 3이

또다. 또. 에러가 나왔다! next.js를 제대로 학습하지 못한 탓일까.개인적으론 직접 개발해가면서 공부하는 게 도움이 된다고 생각했는데...주니어는 역시 기본기가 탄탄해야한다.문제를 풀어가는 과정이 321654987시간 소요되기 때문이다.그래도..... AI와 선생

RESENDING 완전 정복!

프로젝트 목록에서 카드를 클릭해 디테일 페이지로 이동한 뒤, 브라우저 뒤로가기를 누르면 이전에 보던 위치가 아니라 맨 위로 튀어 올라가는 현상이 있었다.사용자 입장에서는 스크롤을 내려서 프로젝트 카드를 클릭했는데, 돌아오면 처음부터 다시 스크롤해야 하는 불편함이 생긴다

포트폴리오 프로젝트를 개발하던 중 이상한 현상을 발견했다.Projects 섹션에서 탭을 All → Work → Project 순으로 전환하면, 아이템 수가 줄어들면서 페이지 전체 높이가 짧아진다. 그런데 Project 탭이 활성화 된 채로 스크롤을 내리면 Contact

지난 편에서 비동기가 뭔지 개념을 잡았다. 이번엔 비동기를 실제 코드로 다루는 방법을 알아본다.비동기는 "기다리지 않고 다음 작업을 먼저 처리하는 방식"이었다.근데 문제가 있었다.비동기라서 순서 보장이 안 된다. 그래서 "데이터 받은 다음에 이걸 실행해줘"라고 명시해야

노션을 이용하여 '이력서' 폼과 '경력기술서' 폼을 만들다가 내가 만든 것과 클로드 AI를 이용하여 만드는 것이 어느 정도의 차이를 보이는지 궁금해서 겸사겸사 MCP를 사용해 보았다. ✔️mcp란 뭘까? MCP는 Model Context Protocol의 약어로,

이번엔 코드보다 개념을 먼저 잡아본다. 동기(Sync)부터 이해하자 비동기를 알려면 동기를 먼저 알아야 한다. 동기(Synchronous) 는 말 그대로 순서대로, 하나가 끝나야 다음이 시작되는 방식이다. 카페에 비유하면 이렇다. A 커피가 다 나올 때까지 B

1편에서 변수 선언이랑 함수를 정리했는데, 사실 그것만으로는 반쪽짜리다.var가 왜 블록을 무시하는지, 클로저에 대해 알아보자.JS 엔진이 코드를 실행할 때, 코드가 동작하는 환경 정보를 담은 객체를 만든다. 이게 실행 컨텍스트다.코드가 실행되면 콜 스택(Call St

오늘의 정리기초를 다 까먹었다. 이러다 면접에서 죽 쑬까 봐 다시 복기한다..추후 계속 수정될 수 있다...자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다.자바스크립트는 브라우저의 '자바스크립트 가상 머신'이라고 불리는 자바스크립트 엔진