sharingStorage

이 글은 한 초보 개발자의 간단한 질문에서 부터 시작되었다.  헤더헤더 123123123 위 코드는 header의 fixed를 통해 상단에 고정시키고 main에 컨텐츠를 담기 위해 간단한 작업을 할 때 사용하는 코드인데 위 코드를 실행하면 우리가 의도한 바대로 작동하지 않는다. 위 코드를 실행해본 결과이다 body의 위치를 이해하기 쉽도록 green을 주었다. 분명 main에 margin-top을 주었는데 왜 형제 요소인 fixed 헤더까지 내려올까?? 문제점 1 fixed에 offset값을 넣지 않았다.너무나 당연한 답입니다.fixed는 뷰포트 기준으로 top, left, rigth, bottom에 의해 결정되는데 이를 적용하지 않았을 때 초기위치에 absolute값과 동일하게 적용..

들어가며이전 시간엔 web성능에서 중요한 지표인 core web vitals와 성능을 확인할 수 있는 도구인 Lighthouse를 알아보았으니 이를 통해 현재 서비스중인 mile의 성능을 확인하고 개선해보려고 합니다.가장 먼저 Lighthouse로 현재 mile의 성능을 측정해본 결과 main페이지부터 아래와 같은 엄청나게 성능이 좋지 않다는 것을 확인했고 vite-bundle-visualizer 와 같은 도구로 번들사이즈를 확인하며 데모데이를 향해 달려가면서 놓친 부분과 크고 작은 실수들을 바로 잡으면서 성능을 개선해보겠습니다.성능 확인과 번들사이즈 확인아래와 같이 Lighthouse로 엄청나게 좋지 않은 메인페이지의 성능을 확인하였고 이와 관련해서 vite-bundle-visualizer를 사용하여 ..

이번엔 웹서비스의 성능지표 core web vitals를 공부해보고 lighthouse의 성능지표에는 무엇이 있는지 알아보겠습니다.웹 성능 개선을 고려해야하는 이유웹 성능은 객관적인 측정치(로딩 시간, 초당 프레임 수, 상호작용에 반응할 수 있게 되는 시간)와 유저의 주관적인 경험(콘텐츠의 로딩 시간이 얼마나 길게 느껴지는지)이 포함됩니다. 우리는 웹 성능 개선을 왜 고려해야할까요?웹성능 지표는 비지니스에도 많은 영향을 주기 때문입니다. 일반적으로 빠른 로딩은 좋은 사용자경험(UX)을 제공하고 반대로 사용자가 웹사이트에 들어갔을 때 하얀 화면을 노출시키거나 로딩이나 지연이 길게 발생하면 사용자는 자연스럽게 이탈하게 됩니다.아래는 2017년 Google 모바일 부문 글로벌 제품 리드인 Daniel An이 ..

원래의 mile 서비스는 다음과 같이 각 페이지 폴더 내에 커스텀훅을 모아두는 페이지 상단에 객체로 키를 정의해두었습니다.“커스텀훅을 사용해서 관심사를 분리하고, 객체 키를 사용해서 오타나 중복 등의 휴먼에러를 줄인다.” 라는 접근으로 키를 구성하였지만 이런 과정에서 두가지 놓친 부분은 쿼리키의 hierarchy 구조를 잘 활용하지 못하는 방향으로 구성되어있고, 다른 페이지에서의 쿼리키는 여전히 중복 가능성이 존재한다는 것입니다. 이로인해 쿼리키를 invalidate할때 관련된 여러 쿼리를 invalidate하는데에 어려움과 키가 고유해야한다는 가장 중요한 부분을 놓칠 수도 있다는 문제점이 발생하였고 이제는 MVP를 구성하고 데모데이에 우리의 서비스를 보여주는 것에 집중하는 것에 넘어서 이제는 우리서비스..

서론오랜만에 asap서비스를 리팩토링하고 3차릴리즈를 시도하려고 하고있는 와중에 CI/CD를 적용하고 배포를 했더니 아래와 같은 에러가 우르르 나왔습니다. 흠... 이거보니 Router에서 경로대로 폴더를 못불러오는 것 같네요. 왜 그런가 하면... 이번 리팩토링 기간엔 변수명이나 코드 가독성등을 생각하며 개발을 진행해서 유지보수를 용이하고 싶었고 그러면서 폴더명과 파일명을 모두 컨벤션을 재정비했습니다. 카멜케이스인 컨벤션이 지켜지지 않은 것들을 수정했던 기억이 있는데 그게 git에서 인식이 안되었고 한두개가 아닌 수십개의 이런 오류를 분명 원래의 방법으로가 아닌 더 쉽게 해결할 수 있는 방법이 있을 것 같아 시도해보았고 성공하여 이것을 공유하려고 합니다. git mv 명령어git이 폴더명과 파일명 대소..

여러분은 막차가 끊긴줄 알고 터벅터벅 택시정류장으로 가는길에 버스가 오는 경험을 하신적이 있으신가요?전 오늘 했습니다!! 인프콘을 2연속 떨어지며 낙담하고 있는 찰나에 사실은 막차가 남아있더군요 (인프랩 만세!! 꿈의 기업 인프랩 만만세)항상 역대급 신청인원을 갱신하며 IT 컨퍼런스 씬에서 엄청난 영향력을 행사하고 있는 인프런이 랠릿 허브 프로필을 등록하면 10명에게 인프콘 참여 티켓을 준다고 합니다!!! 이 소중한 기회를 놓칠 수 없어 방법을 보고자 하니.. [ STEP 1 ]전 이미 인프랩과 랠릿을 사랑하고 있어서 프로필은 전부 써져있고 허브 등록 토글만 꾸욱 눌러주면 되더라고요  [ STEP 2 ]이 포스트를 적음으로써 STEP 2까지 완료!!   마지막으로 이 링크를 댓글로 남기면 끝!   글을 ..

null과 undefined의 차이는 이미 알고있었지만 현재 진행하고있는 ASAP(최적의 회의시간 도출 서비스)에 대한 코드리뷰를 진행하던 중 팀원이 string타입인 시작시간을 undefined로 초기화하면 안되는 이유에 대해 물어보았을 때 설명하면서 내 지식에 공백이 있음을 느꼈다.그래서 undefined와 null을 deep dive해보고 그 두개를 정확히 구분하지 않았을 때 발생하는 side Effect에 대해서 고민해보는 시간을 가져보려고 한다. null과 undefined를 한줄 요약하면개발자가 의도적으로 "값이 없음"을 나타내기 위해 할당하는 값은 null값이 초기화되지 않음을 자바스크립트 엔진이 표현한 값은 undefined이다. MDN이 말하는 null과 undefined일단 본인이 자명..

useId 접근성 속성에 전달되는 특별한 ID를 만드는 hooks import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); Usage 접근성 attributes 를 위한 특별한 ID를 만들기 위해 몇개의 관련된 elements 에 대한 ID를 만들기 위해 모든 생성된 ID들에 대한 접두사를 지정하기 위해 클라이언트와 서버가 같은 접두사 ID를 사용하기 위해 Parameters useId는 어떠한 parameter도 존재하지 않습니다. Returns useId는 컴포넌트 내에 useId 호출과 관련된 특별한 ID string을 반환합니다. 주의 사항 useIdHook이므로 컴포넌트의 최상위 수준 이나 자..

들어가기전에.. nextjs는 13버전 이전과 13버전 이후가 완전히 다른 프레임워크라고 해도 무방할 정도로 큰 차이가 있습니다. 일반적으로 나와있는 아티클들은 구버전일 가능성이 높아서 공부하실 때 nextjs 공식문서 - Using App Router부분을 참고해서 크로스체크하시는걸 추천드립니다! 또한 제가 작성한 아티클이 틀린 부분이 없는지, 버전이 맞는지 잘 검수하려고 노력했지만 혹시 구버전에 대한 설명이 있다면 피드백주시면 감사하겠습니다. What? Next.js란 풀 스택 어플리케이션을 개발하기 위한 리액트 프레임워크입니다. Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하고 이는 곧 개발자에게 애플리케이션 개발에 집중하도록 도와줍니다. How? A..

React 커스텀훅 what ? 컴포넌트간의 hook 로직을 공유하기 위해 사용하는 사용자가 커스텀한 hook입니다. 다음은 공식문서에서 발췌한 예시 코드입니다. import { useState, useEffect } from 'react'; export default function StatusBar() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEve..