JavaScript 컬렉션 - Object
·
FrontEnd/JavaScript
Object 한 줄 요약Object는 "이름 붙은 값(키-값)"을 묶어 두는 기본 데이터 구조다.서버 응답/설정값/유저 정보처럼 "데이터 레코드"를 표현할 때 제일 많이 쓴다. 처음 보면 Map이랑 뭐가 다르지? 싶을 수 있다.하지만 Object는 아래 같은 데이터를 표현할 때 거의 기본으로 등장한다.서버 응답 데이터(JSON)설정값(config)유저 정보그런데 막상 정리해서 설명하려고 하면“프로퍼티? 키? 필드? 뭐가 뭔데?”“for...in이랑 for...of는 또 뭐가 다른데?”“Map이랑은 언제 뭐 써야 돼?”여기서 헷갈리기 쉽다.이번 글은 Object 리터럴({}) 기준으로 기본기를 정리하고, 중간에 Map과도 가볍게 비교하는 흐름으로 간다.먼저 감 잡기 (Map과 차이)Object: 데이터 레..
lottie-react로 LottieFiles 애니메이션 붙이기 (Next.js 15 기록)
·
FrontEnd/Third Party
Next.js 15로 개인 프로젝트를 만들다가, 메인 화면에 가벼운 애니메이션 하나 넣고 싶어서 LottieFiles + lottie-react 조합을 써봤다.처음에는 "json 파일 하나 내려받아서 컴포넌트에 박으면 되겠지" 하고 가볍게 시작했는데, 막상 TypeScript랑 같이 쓰다 보니 타입 에러 한 번 제대로 맞고 정리하게 됐다.이 글은LottieFiles에서 애니메이션 고르는 과정Next.js에서 lottie-react 설치하고 붙인 방법내가 당했던 JSON 타입 관련 에러와 해결 방법1. LottieFiles에서 애니메이션 고르기나는 LottieFiles에서 무료 애니메이션을 하나 골라서 가져왔다.1-1. LottieFiles 접속사이트에 접속하면 이런 메인 화면이 나온다.회원 가입 후 로그..