vh란 viewport height로 브라우저의 높이에 따라 상대적으로 적용되는 단위이다. 예를들어서 화면의 높이가 100px이라면 1vh는 1px이다. 하지만 사파리에서는 상단의 url바와 하단에 있는 네비게이션바로 인해서 100vh를 설정해도 화면이 잘려버리는 문제, 혹은 스크롤리 생겨버리는 문제가 발생한다. 해결 방법 -webkit-fill-available 프로퍼티로 해결할 수 있다. body { min-height: 100vh; } /* iOS only */ @supports (-webkit-touch-callout: none) { height: -webkit-fill-available; }

React를 사용하다보면 높은 확률로 ( 거의 무조건 ) Hooks를 마주하게 될 것이다. 당연하게 본인도 React를 사용하면서 Hooks를 아주 애용하면서 잘 사용하고 있다. 이런 Hooks의 핵심? 장점?이 바로 Custom Hook를 만들어서 사용할 수 있다는 것이다. 이미 사용하고 있는 useState, useEffect ... 등은 Rules of Hooks ( 훅의 규칙 ㅋ )만 지켜주면 문제없이 사용할 수 있습니다. 그렇다면 Custom Hook도 마찬가지로 해당 규칙만 지키면 될까요? 또 어떤 경우에 Custom Hook을 만들면 좋을까요? useInput function useInput () { const [state, setState] = useState(""); const onCha..

React 하면 많은 것이 떠오르겠지만 컴포넌트, 재사용성 등의 키워드가 가장 먼저 떠오른다. 리액트에서는 props를 통해서 컴포넌트에 새로운 엘리먼트나 컴포넌트를 추가하는 것이 가능하다. 이것을 컴포넌트 합성이라고 부른다. 그러면 내부의 디자인이 다른 UI에서도 쉽게 재사용할 수 있는 컴포넌트를 만들 수 있다. 다음과 같은 디자인이 있다고 생각해보자 노란색 박스 영역이 조금 형식이 다른데, 위에는 보라색 버튼과, 녹색 내용이 있으며, 아래는 버튼은 없고, 갈색 내용이 있다. 이것을 위해서 모든 내용을 매개변수로 받기에는 노란색 박스가 관리해야할 매개변수가 너무 많아진다. ( 위 레이아웃까지야 괜찮다고 하더라도 더 큰 형식이면?! ) 이걸 이제 React로 한번 만들어보자 interface Props ..

지금까지 리액트 환경을 구성하는 부분은 많이 작성했기 때문에 리액트 환경 구성을 모두 다 했다는 조건으로 글을 작성합니다. Canvas 만들기 //GlobalStyle.tsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; } `; export default GlobalStyle; 우선 거슬리는 body의 margin을 styled-components의 createGlobalStyle을 사용해서 없애준다. import GlobalStyle from './GlobalStyle'; import Home from './pages/Home'; interface ..

써야지 생각만 계속 하다가 이번에 작성하게 되었다. Eslint ? 자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해주는 좋은 친구이다. Prettier ? 코드의 스타일만 정리해준다. 미리 규칙을 정하면 자동으로 규칙에 맞게 코드를 정리해주는 도구이다. 미리 정해둔 규칙에 따라 정렬해주기 때문에 가독성을 높혀주고 코드의 스타일을 통일시켜준다. 설치 VScode의 extensions에서 eslint와 prettier를 설치해준다. npm install --save-dev eslint prettier typescript 설정을 위해서 eslint와 prettier를 설치하고, 타입스크립트 환경이므로 typescript도 설치해준다. ..

이번에는 타입스크립트와 Express를 함께 세팅하는 방법을 정리하고자 한다. Express 프로젝트 생성 npm install -g express-generator 직접 Express를 구성해도 상관없지만, express-generator를 사용하면 간단하게 환경 구성이 가능하기 때문에 사용한다! 패키지 설치 npm install --save-dev nodemon 코드를 작성하면 바로바로 변경사항을 적용하기 위해서 nodemon을 사용한다. npm install --save-dev @types/node @types/express @types/morgan @types/debug @types/cookie-parser @types/http-errors ts-node typescript @types/node ..

React를 사용하다보면 자연스럽게 마주하는 부분이 상태 관리일 것이다. Hooks를 사용하는 useState만으로는 프로젝트의 크기가 커진다면 불편함을 느낄 것이고, 그러면 자연스럽게 전역 상태 관리에 눈이 가게 될 것이다. React는 Redux, MobX, Recoil 과 같은 전역 상태 관리가 있다. 그런데 어느날 React Query 라는 것을 알게 되었는데, 이것도 상태 관리를 도와주는 라이브러리라고 한다. hmm... 솔직히 들어보지 못했다. 이런 것이 있는줄은.... 그래서 한번 찾아보니 일반적으로 상태 관리는 Client의 상태와 Server의 상태가 있다. 그동안의 나는 당연하다듯이 Redux를 사용해서 두가지 상태를 모두 관리하게 되었다. Redux를 사용해서 서버와 통신을 하기 위해..

시퀄라이즈를 사용하고 있는 어느날,,,, join을 위해서 include 옵션을 findAll에 주었다. 하지만! product와 product_img가 서로 모르는 친구들이라고 한다... 분명 나는 squelize auto를 사용해서 init-models.js가 자동으로 만들어지고 그곳에서 잘 설정이 되어있다... 구글에 검색을 해봐도 외국인형들도 답을 주지 않은 상황!! 과감한 결단을 하였다. fs.readdirSync(__dirname) .filter((file) => { return ( file.indexOf(".") !== 0 && file !== basename && file.slice(-3) === ".js" ); }) .forEach((file) => { const model = requi..