분류 전체보기88 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. video태그의 playsInline 속성 - 모바일 기기 전체화면 재생을 방지하기 위한 속성 playsinline A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. (boolean 타입의 속성으로, 영상이 해당 요소가 재생되는 영역 내에서 'inline'으로 재생되게 한다. 이 요소가 없다고 언제나 꼭 항상 전체화면으로 재생된다는 의미는 아니다!) / MDN(https://developer.mozilla.org/en-US/docs/Web/HTML/Ele.. 2023. 8. 28. [🫧CleanCode] 2. 의미 있는 이름(2/3) - 발음하기 쉬운 이름 / 검색하기 쉬운 이름 / 인코딩 피하기 / 기억력 자랑 피하기 / 클래스/객체명과 메서드/함수 명 변수명, 함수명, 메서드명, 클래스명 등 - 프로그래밍에서 naming 중요하다는 것은 늘 알고 있었지만, 어떤 이름이 좋은 이름인지, 안 좋은 이름은 왜 안 좋은 이름인지, 좋은 이름을 짓기 위한 어떤 방법이 존재하는 지에 대해서는 잘 알지 못했다. 클린코드 2장을 읽으며 알게 된 내용에 대해 잘 정리해보고, 내가 매일 쓰는 코드들에 적용해보려 한다! 어떤 이름이 좋은 이름인지에 대한 이전 포스팅은 여기! 2023.08.07 - [분류 전체보기] - [🫧CleanCode] 2. 의미 있는 이름 - 분명한 의도 / 그릇된 정보 피하기 / 의미있는 구분 4. 발음하기 쉬운 이름 코드에 쓰이는 이름들은 발음하기 쉬운 이름인 것이 좋다. 단어의 발음이 쉬운 것을 선택하라는 의미보다는 과도한 약어를 사용해서 해.. 2023. 8. 10. 이전 1 2 3 4 5 6 ··· 15 다음 반응형
