1seul357

Viewportviewport는 현재 보고 있는 컴퓨터 그래픽의 영역을 나타낸다. 즉 사용자가 웹 페이지를 볼 수 있는 실제 화면 영역을 의미하는 것이다. Viewport 단위vw : 뷰포트 높이를 기준으로 한다. 1vh은 뷰포트 높이의 1%와 같다. 100vh는 뷰포트 높이의 100%이다.vh : 뷰포트 넓이를 기준으로 한다. 1vw는 뷰포트 넓이의 1%와 같다. 100vw는 뷰포트 높이의 100%이다.그런데 이러한 뷰포트 단위를 사용했을 때, 모바일에서 예상치 못하게 화면이 짤리는 경우가 있다. 이는 모바일의 주소창의 유무에 따라 뷰포트의 값이 달라지기 때문이다. 이러한 문제를 해결하기 위해 주소창을 고려하여 뷰포트 단위를 설정할 수 있는데 크게 3가지의 단위가 있다.  dvh (Dynamic Vie..

Mock Datamock은 "모의, 가짜의” 라는 뜻으로 mock data는 실제 API 데이터가 아닌 프론트엔드 개발자에 의해 만들어진 테스트용 데이터이다.백엔드 API 완성 전에 API 응답 데이터를 테스트하고 싶을 경우에 mock data를 만들어서 사용할 수 있다. mock data를 사용하면 API 완성을 기다리지 않아도 되고, 미리 만들어놓은 UI에 내려올 데이터를 예상해서 만들어 테스트해볼 수 있다. Mock Service WorkerMSW (Mock Service Worker)는 서비스 워커를 사용하여 API를 가로채는 모킹 라이브러리이다. 실제 API가 아닌 프론트엔드 개발자가 만들어놓은 mock data를 사용하여 API 완성 전에도 로직을 테스트할 수 있게 한다. 설치npm insta..

css를 구현할 때는 항상 px을 썼었는데, em과 rem에 대해서도 공부를 해봐야겠다는 생각이 들었다. px과 em, rem은 절대 단위와 상대 단위의 차이가 있다는 점은 알고 있었지만 em과 rem의 차이는 잘 모르고 있어서 이번주 포스팅 주제로 정했다. 절대 단위절대 단위는 고정된 길이를 의미하는 단위이다. CSS에서의 px는 절대 단위이다. 고정형 웹이나 컨텐츠의 크기가 변경되어서는 안되는 경우, 주로 px를 사용한다. 상대 단위상대 단위란 고정되지 않은 길이를 의미하는 단위이다. 화면의 크기 혹은 부모 요소의 폰트 크기를 기준으로 계산된다. 예를 들어서 부모 요소의 폰트 사이즈가 8px이라면 1em은 8px, 2em은 16px, 3em은 24px이 된다. 만약 부모 요소의 폰트 사이즈가 지정되지..

컴포넌트를 개발하면서 보통 , 등의 태그를 많이 사용했는데, 코드만 보고 어떤 콘텐츠인지 이해하기 힘들었다. 개발자도구로 Dom의 요소를 확인할 때도 태그가 많아서 파악하는데 시간이 오래 걸렸다. 의미를 담고 있는 태그를 사용하면 명시적이고 직관적인 컴포넌트 설계가 가능할 것 같았다. 그래서 시맨틱 태그를 사용해보기로 했다. Semantics시맨틱은 코드 조각의 ‘의미’를 나타낸다. 즉 시맨틱 태그는 의미가 있는 태그이다. 시맨틱 태그의 요소로는 header, nav, form, article 등이 있으며 태그를 통해 이름만 보고도 어떤 내용인지 유추할 수 있다.  시맨틱 태그 요소header : 로고나 제목 등이 포함된 페이지 상단footer : 저작권, 연락처, 작성자 정보 등이 포함된 페이지 하..

package.json을 보다가 dependencies와 devDependencies를 보고 무슨 차이가 있는지 궁금했다. 한번 정리를 해봐야 할 것 같아서 알아보았다! dependencies애플리케이션 동작에 필요한 라이브러리를 dependencies에 설치한다. dependencies에 설치된 라이브러리는 배포에 포함된다. 주로 react, react-router-dom, react-query 등이 dependencies에 들어간다. dependencies 설치 방법npm i devDependencies애플리케이션 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치한다. devDependencies에 설치된 라이브러리는 배포에 포함되지 않는다. 주로 어플의 로직과 필요하지 않은 라이브..

Query KeysReact Query는 queryKey에 따라 캐싱을 관리한다. queryKey는 문자열, 배열 등으로 구성될 수 있는데, 이때 주의할 점은 queryKey는 중복되지 않게 작성되어야 한다는 것이다. 문자열 queryKey문자열 queryKey가 전달되면 내부적으로 배열로 변환된다.const { data } = useQuery({ queryKey: 'todos', // queryKey === [’todos’] queryFn: () => getTodoList()}) 배열 queryKeyqueryKey는 배열의 형태로 작성될 수 있다. 또한 query 함수가 변수에 의존할 수도 있는데, 이때는 queryKey에 변수를 포함하면 된다.const { data } = useQue..

startTransitionstartTransition(scope)은 긴급하지 않은 업데이트를 래핑하여 긴급한 이벤트를 먼저 처리하도록 한다. startTransition으로 래핑된 이벤트들은 UI를 Blocking 하지 않고, 상태를 업데이트하기 때문에 업데이트하는 과정에서도 사용자가 UI와 상호작용이 가능하다.주로 상태 업데이트, API 통신 등 네트워크 환경에 의해 영향을 받거나, 업데이트되는 중에도 사용자가 UI와 상호작용해야 할 때 사용한다.import { startTransition } from 'react';function TabContainer() { const [tab, setTab] = useState('about'); function selectTab(nextTab) { st..

쿼리 스트링쿼리 스트링은 물음표 뒤에 오는 모든 문자열을 의미한다. key와 value로 이루어지며 = 를 기준으로 앞에 있는 데이터가 key, 뒤에 있는 데이터가 value이다. & 로 구분하여 여러 개의 key와 value를 만들 수 있다.  💡데이터 리스트의 필터링 기능을 구현하면서 쿼리 스트링을 사용했다. 쿼리 스트링을 선택한 이유는 새로고침 시에도 필터링된 데이터가 유지되었으면 했고, 상세 페이지를 이동하고 다시 리스트 페이지로 되돌아왔을 때에도 필터링 상태를 유지하고 싶었기 때문이다.searchParamsimport { useSearchParams } from 'react-router-dom';const [searchParams, setSearchParams] = useSearchParams..