📌 사이트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..

133. 동기, 비동기 실행순서const myPromise = Promise.resolve(Promise.resolve('Promise'));function funcOne() { setTimeout(() => console.log('Timeout 1!'), 0); // 5번째 myPromise.then(res => res).then(res => console.log(`${res} 1!`)); // 4번째 console.log('Last line 1!'); // 1번째}async function funcTwo() { const res = await myPromise; console.log(`${res} 2!`); // 2번째 setTimeout(() => console.log('Timeout 2..

📌102. promise와 async await 차이const myPromise = () => Promise.resolve('I have resolved!');function firstFunction() { myPromise().then(res => console.log(res)); console.log('second');}async function secondFunction() { console.log(await myPromise()); console.log('second');}firstFunction();// second// I have resolved!secondFunction();// I have resolved!// second - firstFunction에서 promise는 call ..