분류 전체보기91 자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ] 내부 슬롯과 내부 메서드 ECMA Script 사양에서는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 내부 슬롯(internal slot)과 내부 메서드(internal method)라는 개념을 사용한다. 이 두 개념은 실제로 자바스크립트 엔진에서 동작하는 개념이지만, 직접 접근할 수 있도록 공개되어있지는 않다. 하지만 내부 슬롯과 내부 메서드 중 일부에 대해서는 간접적으로 접근할 수 있는 수단이 제공된다. 예를 들어, 객체의 내부 슬롯 [[Prototype]]은 직접 접근할 수는 없지만, __proto__ 를 통해 간접적으로 접근할 수 있다. const javascriptObject= {}; //모든 자바스크립트 객체는 [[Prototype]] 내부 슬롯을 가지고 있다. o.[[Prototype].. 2024. 3. 24. [프론트 성능 최적화] 1. Lighthouse 검사 결과 및 웹 바이탈 지표(FCP, LCP, TBT, CLS, SI) 이해하기 올해 첫 챕터 (1-2월) 나의 one goal은 내가 개발하고 있는 웹사이트 성능을 개선하는 것인데 google pageSpeed Insight와 lighthouse로 성능을 측정하고, 개선한 후 다시 비교해보기로 했다. 프론트엔드 성능 최적화 가이드 책(우측)과 구글링한 자료를 통해서 lightHouse의 지표들을 이해하고 개선해보는 작업을 진행하려고 한다! lighthouse 에서 검사를 할 때 총 세 가지 모드를 선택할 수 있는데, Navigation 모드는 초기 페이지 로딩 시 발생하는 성능 문제를 분석하는 모드이고, Timespan 모드는 사용자가 정의한 시간동안 발생한 성능 문제를 분석하는 모드이고, Snapshot은 현재 상태의 성능 문제를 분석하는 모드이다. 내가 해결하고 싶은 문제는 웹.. 2024. 2. 12. mongoDB의 id를 통해 데이터가 생성된 시간을 알아내기! MongoDB의 ObjectID를 통해 데이터가 생성된 시간을 알 수 있다. MongoDB에서 각 문서에는 기본적으로 _id 필드가 있으며, 이는 주로 ObjectId 타입을 사용하는데 ObjectId는 12바이트의 길이를 가지며, 이 중 첫 4바이트는 타임스탬프이다. 타임스탬프는 유닉스 타임(1970년 1월 1일부터 경과된 초 수)을 기준으로 하며, 따라서 이를 통해 문서가 생성된 시간을 알 수 있다. 예를 들어, ObjectId가 "507f191e810c19729de860ea"라면, 이 중 처음 8자리인 507f191e가 타임스탬프에 해당하는 것. 이 값을 16진수에서 10진수로 변환한 다음, 유닉스 타임스탬프로 변환하면 해당 문서의 생성 시간을 알 수 있다. 즉, ObjectId의 처음 8자리를 1.. 2024. 1. 12. width: calc(50%- 164px); 무엇이 잘못된 건데 // css 에서 calc 이 안될 때 랜딩 디자인을 개편하는 일이 있어서 오랜만에 신나게 css 작업을 진행하는데 width: calc(50%- 164px); 가 제대로 작동을 안 한다. width가 안 먹혀서 브라우저 검사창에서 style을 보니 ⚠️width: calc(50%- 164px); 이렇게 스타일이 취소되어있다. 잘못된 속성값이라고 한다. 아니 그동안 잘 사용해왔던 문법인데 갑자기 왜???? width: calc(50%- 164px); 정답은 바로... 아래 코드였다. 이렇게 수정하고 나니 정상 작동함 (ㅠㅠ) width: calc(50% - 164px); CSS에서 calc() 함수를 사용할 때, 연산자 전후에는 반드시 공백이 있어야 한다. 기존 코드는 50%- 164px 로 사용해서 연산자(-) 앞에 공백이 없어서 제대로 연.. 2023. 11. 19. next/link 사용 시 href 속성과 onClick 속성을 함께 사용해도 될까? 회사 코드 중 next/link를 사용하면서 href와 onClick를 함께 사용하는 코드가 있었다. onClick 콜백함수 내부에서는 조건에 따라 redirect 시키는 코들들도 있었는데 그런 경우 href 로 이동하는 것은 어떻게 취소되는 것인가 싶어서 정확한 동작 순서를 찾아보았다. [ 결론 ] next/link를 사용할 때 href 속성과 onClick 이벤트 핸들러를 함께 사용하면, 기본적으로 onClick 이벤트가 먼저 발생하고, 그 이벤트 핸들러에서 호출된 함수가 완료된 후 페이지 전환(navigation)이 일어난다. 단, onClick 콜백함수 내에서 event.preventDefault()가 호출되면 href 값으로 페이지 전환이 이루어지지 않는다! 이에 따라 순서를 정리해보면 아래와 .. 2023. 11. 8. [Error] `NextRouter` was not mounted 에러 해결하기 / jest와 next router 사용 시 next-router-mock 를 사용해보자! 프론트엔드에서 처음으로 돌려보는 테스트 코드..! 테스트 코드를 쓰고 실행해보니 `NextRouter` was not mounted 에러와 함께 바로 에러가 남. Next 공식 문서에서는 아래와 같이 해당 에러를 소개하고 있었다. Why This Error Occurred A component used useRouter outside a Next.js application, or was rendered outside a Next.js application. This can happen when doing unit testing on components that use the useRouter hook as they are not configured with Next.js' contexts. This ca.. 2023. 9. 22. 이전 1 2 3 4 5 6 ··· 16 다음 반응형
