본문 바로가기
자바스크립트 객체 순회 메서드 : for...in / Object.keys() / Object.values() / Object.entries() / Object.getOwnPropertyNames() / Reflect.ownKeys() JavaScript에서 객체를 열거(enumerate)하는 다양한 방법 중 몇 가지 주요 메서드들을 정리하려고 한다. 이 정도 메서드들은 문제없이 바로바로 쓰고 차이점은 알 수 있도록 익숙해져야지 (제발!) 1. for...in 루프 객체의 모든 열거 가능한 속성을 순회 객체 자체의 속성뿐만 아니라 프로토타입 체인을 통해 상속받은 속성도 순회가 가능하다 const object = {a: 1, b: 2, c: 3}; for (const key in object) { console.log(key, object[key]); } 2. Object.keys() 주어진 객체의 자체 열거 가능한 속성의 이름들을 배열로 반환. (상속받은 속성은 제외) const object = {a: 1, b: 2, c: 3}; Ob.. 2024. 3. 28.
리액트 useState 똑똑하게 쓰기 - lazy Initialization (게으른 초기화) 리액트를 사용하는 프론트 개발자라면 수없이 써봤을 useState 훅에 대해 새로운 사실을 하나 알게 되어 포스팅을 해보려한다. useState의 initalState argument useState훅의 initalState argument 즉, 훅을 호출할때 state의 초깃값으로 전달하는 인수로 값 뿐 아니라, 값을 리턴하는 함수를 넣을 수도 있다. //아래와 같이 초깃값으로 값을 넣을 수도 const [ stateValue, setStateValue ] = useState('defaultValue') //아래와 같이 초깃값으로 값을 리턴하는 함수를 넣을 수도 있다 const [ stateValue, setStateValue ] = useState(() => 'defaultValue') 이와 같이 u.. 2024. 3. 27.
자바스크립트 객체 프로퍼티 이해하기 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.
[🌸예쁜 거 좋아하는 👩🏻‍💻개발자가 모아온 ⌨️ 기계식 키보드 5개 모음 / 추천] 나는 미니멀리스트를 지향(만)하는 맥시멀리스트이다. 예쁘고 편한게 있다면 소비를 참지 못하는 편... 2020년 기계식 키보드를 처음으로 구매한 게 시작이 되어 이제 총 다섯 개의 기계식 키보드를 가지고 있다. 소중한 내 키보드들 .. 🥹 나와 함께하게 된 순서대로 간단히 리뷰를 작성해보려고 한다! 1. 콕스 엔데버 무접점 구매 시기: 2020년 가격 : 10만원대 초중반 (당근 시세 8-9만원) 타건 소리/느낌 : 서걱서걱 보글보글 도각도각 소음 : 사무실 사용 쌉 가능 기계식 키보드에 처음 입문하게 해 준 고마운 친구이다. 사실 첫 구매는 화이트 색상이었고, 어느정도 사용하다가 당근에 판매했었다. 노뿌 무접점 특유의 소리와 키감이 너-무 좋아서 결국 다시 당근으로 블랙을 구매하게 되었다. 색은 개인적.. 2023. 9. 17.
반응형

티스토리툴바