📌 사이트https://cssbattle.dev/ 📌 이미지 구현- .container > .col:first-child 선택자를 통해 container 내부의 첫번째 col 만 특정하기,- .col > .block:not(:last-child) 선택자를 통해 col 내부의 block 중에서 마지막이 아닌 block 만 특정하기 코드

JSON.stringify() 가 직렬화할 수 없는 경우 (예: Date 객체){ firstName: "Magic", lastName: "Kim", lastUpdated: new Date(),}; // JSON.stringify를 거치면... { "firstName": "Magic", "lastName": "Kim", "lastUpdated": "2025-09-08T02:38:18.000Z" // Date 객체가 iso 문자열로 변경됨} Date 객체를 직렬화하면 iso 문자열로 변환되고, 이를 다시 JSON.parse()로 역직렬화해도 그대로 문자열로 남아 있게 된다.이때, replacer 함수를 JSON.stringify()의 2번째 인수로 전달하여 특정 프로퍼티를 처리하여 직렬화할 수..

📌 사이트https://cssbattle.dev/ 📌이미지구현- 원 3개를 겹쳐서 상단, 하단 물결 무늬를 구현- 양측 사이드 배경색과 같은 div를 absolute로 z-index 높여서 배치하여 brown 몸통 측면 가리기 코드

📌목표1. 낙관적 UI 업데이트 알아보기2. React19 useOptimistic 훅 작동 원리 이해하기3. 간단한 카운터 만들고 낙관적 업데이트 적용하기 📌낙관적 UI 업데이트- 예를 들어, 인스타그램 앱에서 게시물의 좋아요 버튼을 클릭하는 행동은 서버로 요청을 보내고, 요청이 성공했을 때 UI를 업데이트 한다. 하지만, 사용자 디바이스가 느린 네트워크 환경에 있거나, 서버의 응답이 오래 걸려서 UI 업데이트가 늦어지면 UX에 악영향을 줄 수 있다.- 사용자가 좋아요 버튼을 클릭함과 동시에 좋아요 UI를 업데이트하여 (서버 응답을 받기 전) 사용자의 행동이 원활하게 처리되고 있음을 보여주면 UX를 개선할 수 있다. 만약 서버 응답이 실패하면, UI를 롤백하면 된다.- 이러한 패턴을 서버 응답이 성..

📌컨텍스트 컨트롤- 클로드가 도움이 되도록 대화를 끌고가기 클로드의 첫 답변부터 잘못됐을 때- Esc 키를 눌러 플로우 중단- 복잡한 작업을 더 세세하게 나눠서 클로드가 한가지 주제에 집중하게 하기- 잘못된 방향으로 흘러갈 때, Esc 키 누르고 # 눌러 메모리에 클로드에게 알려줄 내용 추가하기 이전 대화 지점으로 되돌리기- Esc 키 2번 누르기- 예) 테스트 코드 작성 -> 설치 필요한 패키지 확인 -> 설치 -> Esc 키 2번 클릭하여 테스트 코드 작성 지점으로 돌아가기=> 불필요한 컨텍스트 제거하여 테스트 코드 작성에만 클로드가 집중할 수 있게 해줌 /compact 명령어- 전체 대화 기록을 요약하고 클로드가 학습한 주요 정보를 보존- 클로드가 프로젝트의 핵심 지식을 습득했을 때, 관련된 작업..

📌 Claude Code의 도구- Agent: 작업 처리를 위해 subagent를 시작- Bash: shell 명령어 실행- Read: 파일 읽기- Write: 파일 쓰기- Edit: 파일 수정- Glob: 패턴으로 파일들을 찾기- Grep: 파일 내용을 검색- LS: 파일과 디렉토리들을 리스팅- MultiEdit: 동시에 여러 수정을 진행- TodoRead: 만들어진 to-do 하나 읽기- TodoWrite: to-do 리스트 업데이트- WebFetch: URL에서 페칭- WebSearch: 웹 검색- NotebookEdit: Jupyter notebook cell 에 쓰기- NotebookRead: Jupyter notebook cell 읽기 📌 Claude Code 작업 예시1. 최적화: npm..