본문 바로가기

전체 글

 (77)
1. Introduction - MSW (Mocking Service Worker) 공식문서 따라 읽기 및 사용설명 한글화 문서들이 많이 없는 것 같아서.. 공부하는 겸 한글화를 동시에 진행하도록 하겠습니다. 공식문서 자체 내용은 기본 폰트로, 제가 추가한 내용은 노란폰트로 작성하도록 하겠습니다. 원본은 여기있습니당 https://mswjs.io/docs/ Introduction What is Mock Service Worker? mswjs.io 소개 msw는 실제 request를 가로채기위해서 service worker를 사용하는 api mocking 라이브러리입니다. mock이란 '가짜의' 란 뜻입니다. api를 실제로 작동시키지 않고도 가짜값을 사용할 수 있게 하는 것을 말함. Service Worker Api란 응용프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 하는 api.를 말함. 탐색과 리소스 요..
가운데 정렬의 몇가지 방법 1. Display: flex justify, align 을 center로...! 2. text-align : center 3. margin : auto; auto를 하면 자동으로 정렬한다. 가운데 정렬시키려는 영역의 크기가 설정이 꼭 돼 있어야 함. 4. transform top: 50%; left: 50%; transform: translate(-50%, -50%) top, left 50% 로 contents 박스의 좌상단 꼭지점이 가운데 정렬시키려는 container의 정 중앙에 위치하게 되고 translate해서 contents 박스의 가운데를 가운데 정렬시키려는 container의 정 중앙에 위치하게 만들어준다. https://liis.tistory.com/28
useRoutes() 훅 import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes([ { path: '/', element: }, { path: '/clock', element: }, { path: '/stopwatch', element: }, { path: '/alarm', element: }, ]); return ( {routes} ); }; 와 같은 식으로 사용할 수 있다. path설정같은거 할때 쉽게 정리 가능해서 나름 유용한 것 같다. v6.0 이전에는 react-router-config 였다고 한다. 일반적 Routes와 쓰이는것도 똑같고 무엇을 쓸지는 취향차이라고 합니다.. React Router says, "H..
라우터 기본 사용법과 link와 navLink의 차이 리액트 v6.0이 되면서 navLink가 조금 바뀐 것 같다. 리액트 라우터 사용법 설치 npm install react-router-dom 라우터적용 //index.js import {BrowserRouter} from 'react-router-dom' ReactDOM.render( , document.getElementById('root') ); HTML5의 history API를 제공하는 Router 이다. 속성(props)으로 줄 수 있는 것은 다음과 같다. - basename: base URL을 설정해줄 수 있다. // renders // renders ... 리액트로 배포를 하게 될때 package.json에 "homepage": "http://kangyunho.com/github-io", 처..
Scroll에 관해서 scroll 에 관해서 한번 정리를 해놔야겠다는 1. 스크롤 집어넣기 overflow하는 속성에 대해서 스크롤을 넣어줄 수 있다. auto, scroll, hidden등의 속성이 있다. auto : 컨텐츠가 초과됐을때 scroll 생성 scroll : 무조건 scroll 생성 hidden : 그냥 초과한 컨텐츠 가려버림 2. 스크롤 디자인 webkit을 사용해서 스크롤을해줄 수 있다. {타겟}::-webkit-scrollbar 스크롤바 컨테이너 { 스 커 커스 {타겟}::-webkit-scrollbar-track { 스크롤 바 밑 배경 {타겟}::-webkit-scrollbar-thumb { 스크롤 바 자체 {타겟}::-webkit-scrollbar-thumb:hover { 스크롤 바 위에 마우스를 올려..
calc()로 %, px, rem 등 혼용해서 계산하기 ttps://developer.mozilla.org/ko/docs/Web/CSS/calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org 가끔 100%를 주고 나서 10px정도만 움직이고 싶을 때가 있었다. 그럴때면 직접 픽셀을 계산해 주곤 했었는데.... 역시나 찾아보니까 쉽게 해줄 수 있었다. 바로 calc를 사용하면 된다. width: calc(100% - 80px); 이런식으로 하면 쉽게 가능하다..
리액트와 순수함수 리액트 공식문서를 보면 "모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다." 라는 말이 나온다. (https://ko.reactjs.org/docs/components-and-props.html) 무지성으로 혹은 관습적으로 본능에 맞긴 채 컴포넌트 분리를 하고 왔던 터라, 순수함수가 궁금해졌다. 찾아보니 다들 비슷한 정의이긴 했는데... 믿을만한 소스가 없어서 위키에서 검색해봤다. 1. 함수에 같은 값을 주면 항상 같은 값을 줘야한다. 2. 외부의 상태를 변경하지 않는다. - 그냥 보면 이해가 안 갈 것이기 때문에 예시를 들고 왔다. fucntion add(a, b){ return a+b; } add(3,5) //8 많이들 보여주는 예시이다. 외부 값이 변하지..
Create portal - 간단 요약 모달창같은 경우 리액트에서 제공하는 Create Portal을 이용하면 좋다는 피드백이 있어서 찾아보았다. 사용방법은 매우 쉬웠는데 return 해줄 컴포넌트를 ReactDOM.createPortal() 함수로 감싸주기고 2번째 인자로 document.body 를 넣어주면 된다. ------------------------------------- - DETAILS 리액트 v16에서 도입 됐는데, 사실 그냥 구현해도 되는걸 좀 편리하게 빼놓은 것에 불과하다. 공식문서상 설명은 이렇다. ReactDOM.createPortal(child, container 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째..

티스토리툴바