[모던 Javascript DeepDive] 4. 변수 본 포스팅은 아주 오랜만에 AI를 쓰지 않고 필자의 뇌와 손으로만 쓴 글입니다 😁 처음 자바스크립트를 공부할때 본 책과 내용인데, 삼년만에 다시 보니 기초적인 것도 많이 잊고 있었다는 생각이 든다. 초심으로 돌아가 자바스크립트의 변수에 대해 공부한 내용을 정리해보자. 변수는 왜 필요할까? 컴퓨터가 연산을 하기 위해서는 연산의 대상이 되는 값들을 어딘가에 저장하고 있어야 한다. var total = 1 + 2 컴퓨터는 위의 코드를 실행할 때 메모리에 1과 2를 저장해놓고, CPU를 사용해서 1과 2라는 값을 더하는 연산을 실행한 후 그 결과값인 3을 메모리에 저장한다. 그런데 수많은 메모리 중 결과값 3이 저장되어있는 메모리를 찾으려면 해당 메모리의 주소를 알아야 한다. 자바스크립트는 개발자의 .. 2026. 3. 4. 팀의 Claude Code 환경을 통일하는 법: Private Plugin 설계부터 배포까지 "우리 팀 Claude 설정, 어떻게 관리하고 있나요?" Claude Code를 팀 단위로 도입하면 곧 이 문제를 만나게 된다. 누군가는 auto-formatter Hook을 쓰고, 누군가는 안 쓴다. 커밋 메시지 스타일은 사람마다 다르다. 새로 합류한 팀원은 어떤 설정을 해야 하는지 아무도 알려주지 않는다.이 글은 테크 리드와 팀 리더를 위한 실전 가이드다. Private Plugin을 설계하고 MCP 서버까지 포함시켜, 팀원 누구나 한 번의 명령으로 동일한 환경을 갖출 수 있는 시스템을 만드는 방법을 다룬다.왜 Plugin으로 관리해야 하는가팀 설정을 공유하는 방법은 여러 가지지만, 대부분 결국 이렇게 되는 듯 하다.방법문제Slack으로 파일 공유버전 관리 불가, 업데이트 전달 어려움위키에 설정 문.. 2026. 3. 3. Claude Code 확장 개념 : Hooks, Skills, SubAgents, Plugin, Marketplace 이해하기 전체 그림Claude Code를 스마트한 IDE 플러그인 생태계라고 생각해보면 이해가 빠르다.┌──────────────────────────────────────────────────┐│ Claude Code ││ ││ Hooks → 항상 자동 실행되는 트리거 ││ Skills → 나만의 커스텀 명령어 ││ SubAgents → 전문 분야별 보조 에이전트 ││ Plugins → 위 셋을 묶어 팀과 공유 │.. 2026. 3. 3. 이왜진... 제가 프론트엔드 리드라고요...? 다음주부터 개발팀 프론트엔드 리드가 된다 (이왜진) 팀장님께서는 작년 즈음부터 이따금씩 리더 역할을 은근히 암시하셨고, 그때마다 개발팀 프론트엔드 리드의 역할과 나 자신에 대해서 여러차례 고민해보곤 했었다. 내가 프론트엔드 리더가 될 만큼...개발 실력이 뛰어난가? 개발 지식이 충분한가? 좋은 의사결정을 내릴 수 있는가? 모범이 될 수 있는가? ... 그리고 이번주 수요일, 팀장님께서 프론트엔드 리드 직책에 대한 나의 의사를 물어보셨다. 긴 고민 끝에, 해보겠다고 말씀 드렸다. 내가 뛰어난지, 지식이 충분한지 등 그간 내가 해온 고민들에 yes라고 대답할 수 있어서는 아니었다. 오히려, no라는 대답이 더 가까웠다. 대신에 스스로에게 묻는 질문이 바뀌었다. 내가 얼마나 똑똑하고 훌륭한 사람인지 묻.. 2026. 1. 16. React 상태 관리 최적화: useState에서 useReducer로 전환하기 useState에서 useReducer로의 전환: 복잡한 상태 관리 최적화React 애플리케이션에서 상태를 관리하는 방법은 다양하다. 가장 기본적인 상태 관리 방법으로는 useState가 있지만, 상태 로직이 복잡해지거나 관련된 액션이 많아질 경우 useReducer를 활용하는 것이 더 효율적이다. 이 글에서는 useState와 useReducer의 차이점과 useReducer를 적용하는 방법에 대해 살펴본다.1. useState vs useReduceruseStateuseState는 React 컴포넌트 내부에서 상태를 관리하는 가장 간단한 방법이다.그러나 상태 로직이 복잡해질수록 useState를 여러 개 사용하는 경우가 늘어나며, 상태 업데이트 로직이 분산될 가능성이 있다.useState 예제impo.. 2025. 2. 3. 브라우저의 렌더링 과정과 React의 최적화 기법 브라우저의 렌더링 과정과 React의 최적화 기법웹 애플리케이션이 사용자에게 화면을 제공하는 과정은 여러 단계로 이루어진다. 특히 브라우저가 HTML, CSS, JavaScript를 처리하여 화면을 그리는 과정은 성능 최적화와 직결되며, React와 같은 라이브러리는 이러한 과정을 최적화하는 다양한 기법을 제공한다.1. 브라우저의 렌더링 과정웹페이지를 불러오는 과정에서 브라우저는 다음과 같은 순서로 리소스를 처리한다.HTTP(S) 요청 및 리소스 다운로드사용자가 특정 URL을 입력하면, 브라우저는 해당 서버와 HTTP(S) 프로토콜을 통해 통신하고 필요한 HTML, CSS, JavaScript, 이미지 등의 리소스를 다운로드한다.HTML 파싱 및 DOM(Document Object Model) 생성브라우.. 2025. 1. 31. [TIL] npx, next lint 명령어, package.json과 package-lock.json의 차이 npxnpx create-next-app@latest 로 next application 을 생성할 수 있다. 문득 npx 는 무엇인지 궁금해서 간단히 찾아보았다. npx는 Node.js와 함께 제공되는 패키지 실행 도구로, npm v5.2.0 이상에서 기본적으로 포함되어 있다. Node 패키지 관리자인 npm과 함께 사용되며, 로컬에 설치되지 않은 패키지나 CLI(Command Line Interface) 명령어를 별도 설치 없이 실행할 수 있다. 그래서 어떤 프로젝트에서 next가 설치되지 않은 상황에서도 npx create-next-app@latest 를 실행하여 next js 어플리케이션이 실행될 수 있는 것이다. npx create-next-app@latest 가 실행되면 npx는 create.. 2025. 1. 15. [iframe 사용법 및 속성값 가이드] MDN 문서를 기반으로 작성한 가이드 문서 iframe 태그: 인라인 프레임 요소에 대한 가이드HTML의 요소는 현재 문서 내에 다른 HTML 페이지를 중첩하여 임베딩할 수 있도록 하는 강력한 도구입니다. 이 가이드는 iframe 사용법을 단계별로 설명하며, 각 속성과 기능을 상세히 다룹니다.1. iframe의 기본 개념iframe은 중첩된 브라우징 컨텍스트(browsing context)를 제공하여 별도의 HTML 페이지를 현재 페이지 안에 임베딩합니다. 각 iframe은 독립적인 문서 환경을 가지며, 자체 URL 내비게이션을 지원합니다.최상위 브라우징 컨텍스트: 부모가 없는 브라우징 컨텍스트(일반적으로 브라우저 창).부모 브라우징 컨텍스트: iframe을 포함하고 있는 브라우징 컨텍스트.⚠️ 주의: iframe은 추가적인 메모리와 컴퓨팅 리.. 2024. 11. 19. webStorm에서 계속 github Token 인증을 다시 하라고 할때... 잘쓰고 있던 webstorm에서 갑자기 github과의 인터랙션이 있을 때마다 (pull 받거나, push 하거나 등) 다시 github 연동을 하라고 시킨다. 토큰을 입력해서 로그인을 시켜놔도 다음 액션에서 또 다시 연동요청을 한다 ...! 찾아봤는데 원격 저장소를 끊었다가 다시 add 하면 된다고해서 해봤는데 여전히 동일하다 뒤져본 결과.... webStorm 설정 > Git 에서 가장 하단의 ☑️ 자격 증명 헬퍼 사용 체크가 해제되어있었고, 요 놈을 체크하고 적용 - 확인한 뒤에 깃헙 로그인을 하면 다시는 뜨지 않는다!! 삽질하고 계신 분들께 도움이 되기 바라며..! ㅎㅎ 2024. 7. 24. 이전 1 2 3 4 ··· 11 다음
