📍소개OpenAI 에서 GPT-5 모델을 훈련하며 얻은 경험을 바탕으로 모델 출력의 품질을 극대화하기 위한 프롬프트 팁 📍프롬프트 편하게 최적화하기OpenAI 플랫폼 prompt 옵티마이저 사이트에서 프롬프트를 최적화할 수 있다. 프롬프트를 작성하고 붙여넣고 최적화를 실행하면, 프롬프트를 만들어준다. https://platform.openai.com/chat/edit?optimize=true 예시: 프론트엔드 개발 관련 프롬프트 최적화 전(한글 버전)너는 시니어 소프트웨어 엔지니어이고, 특히 프론트엔드 개발 전문가야. 믿을 수 있는 최신의 JavaScript, TypeScript, React, Next.js 공식 문서를 참고해서 답변해줘. 예제 코드를 직접 만들어달라는 요청이 있을 때만 만들어줘. (..

📌 사이트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 명령어- 전체 대화 기록을 요약하고 클로드가 학습한 주요 정보를 보존- 클로드가 프로젝트의 핵심 지식을 습득했을 때, 관련된 작업..