왜 사람들을 Next.js를 사용하는 걸까? google에 입력해보면 대부분 SSR하려고 쓴다라는 포스팅 뿐이다. (물론 이 외 이점들이 있다.) 애초에 Next.js 는 React 프레임워크인데 그냥 Next.js 없이 React만으로 SSR을 하면 되는게 아닐까? 오히려 Next.js를 쓰는게 추후 기술적 부채가 될수도 있지 않을까? 라는 생각에 React만으로 SSR을 하는 법을 파헤쳐본다. SSR SSR(Server Side Rendering)은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client Side Rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사..
로컬에 폰트파일을 두고 사용하는 경우로 글을 작성합니다. 제가 예시로 사용할 폰트는 Tenada 입니다. 다운로드는 https://blog.naver.com/tenada/222849825644 에서 할 수 있습니다. font-face 적용. css파일에 font-face를 적용시켜주면 되는데, 저는 tailwind 지시문이 있는 css파일에 넣어주었습니다. 어느 css파일이든 상관은 없으나 css파일을 import해서 넣어주는 부분이 앱 구조상 윗단에 있으면 상관 없습니다. 이미 이렇게 넣어줌으로써, className에 tailwind 식으로 넣을 수 있습니다. 안녕하세요 여기서, 나는 theme으로 정의하고 싶다면 아래의 방법을 따라합니다. tailwind.config.js에서 theme을 정의합니다...
https://www.react-hook-form.com/ Home React hook for form validation without the hassle www.react-hook-form.com React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다. 아래는 공식홈에 있는 예제코드이다. 예제코드 import React from "react"; import { useForm } from "react-hook-form"; const Example = () => { const { handleSubmit, register, formState: { errors } } = useForm(); const on..
아래의 디자인처럼 모든 input의 스타일은 같으니 똑같은 컴포넌트로 재사용하되, 제목이나 소개처럼 Label 부분 옆에 필수로 입력해야할 데이터에는 * 표기를 하기로 했다. 디자인 예시 물론 의미없는 요소이니 before 가상선택자를 사용하기로 했고, props로 important라는 속성을 넘겨주면 *을 렌더링 하기로 했다. (생략) return ( {label} ); 근데, 여기서 css스타일링이 문제였다. 기존 props으로 넘겼을 때, 내가 알고있는 방법은 아래처럼 하나의 조건으로 JSX로 몽땅 넘겨버리는 방법이였다. 이렇게 되었을때, 코드의 가독성을 해치고, 오류가 생기기 쉽다고 생각했다. const Label = styled.span` display: inline-block; color: #..
문제 발견 상황 검색창에서 입력 후 스페이스바를 누르면 태그를 추가할 수 있는 기능을 만들고자 했다. 아래처럼 onChange 이벤트로 input의 value를 저장하고 있었고, onKeyPress 이벤트를 통하여 value를 tagList 배열에 등록하고, input value값을 리셋시켰다. 문제가 없을 것이라 예상했다. 그런데, 이상하게 스페이스바를 누르고 난 뒤, term의 값이 지워져있을 것이라 예상하였지만, 완전히 지워지지않고 스페이스바를 한번 누른 여백이 input에 남아있었다. 왜 이런 현상이 생긴걸까? 이벤트가 발생순서가 다르기 때문이다. 값이 입력되는 순간이 키를 누르는 순간이 아니고, 키보드의 키를 뗀 순간인 것이다. onKeyPress vs onKeyDown vs onKeyUp vs..
총 네가지의 방법이있다. 1. Link 아래처럼 href에 이동하고자 하는 경로를 입력하면 클릭시 라우터로 이동한다. import Link from 'next/link' export default function MyApp() { return ( 마이페이지 ) } 또한 객체를 실어보낼 수 있다. import Link from 'next/link' export default function MyApp() { return ( 마이페이지 ) } 2. useRouter next.js에서 제공하는 useRouter 훅을 이용하면 라우터객체를 사용할 수 있다. import {useRouter} from 'next/router' export default function myApp(){ const router = u..
제목 그대로 storybook을 만져보다가 프로젝트 실행을 하였는데, 아래와 같이 오류를 만나게 되었다. 스토리북 도입하면서 프로젝트 실행할 일이 없어서 계속 모르고 있었다. 커밋로그 상으로 언제부터 에러가 난 건지 한참 찾아봤었고, Storybook CLI인 npx sb init를 하고 난 이후로 프로젝트 실행이 되지 않는 것을 확인했다. 이슈 찾기 아래의 링크는 Storybook에서 나와 같은 문제를 겪고있는 이슈이다. https://github.com/storybookjs/storybook/issues/5183
이 때까지 함수 안에서 setState를 두 번이나 쓴 적이 없어서, 따로 처리를 해주지 않으면 안된다는 것을 모르고 지내왔다. 참고링크는 아래를 보면 된다. https://kmhan.tistory.com/314 [React] this.setState를 두번 호출할때 첫번째 호출이 무시되는 경우와 해결방법 this.setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트됩니다. 문제 : 첫번째 this.setState가 무시되는 경우 (number 초기 값은 0입니다.) onClick={() => { // this.setState를.. kmhan.tistory.com 아래처럼 이렇게 같은 함수 내에서 setState를 두번 활용하고 있었다. 불변성 유지도 잘 시켜주었고, 문..
기존 input 창에는 날짜와 시간을 합친 형태가 없어서, 우리가 기존에 다운로드 했던 머테리얼 ui에서 Date Time Picker찾았고, 사용하기로 했다. 문제는, 사용자가 시간을 클릭했을 때, 2021-08-11T10:33 이러한 형태로 값을 보내주고 있었다. 이미 우리는 Moment.js를 이용하고 있었고, 우리가 필요한 형식으로 변환하였다. 그러나 여기서 더 추가적인 문제를 발견했다. 아래의 영상처럼 오전과 오후가 변해도 시간이 바뀌지 않는 것이다. (다시 생각해보면 12시간 체제의 문제) 변환해야 할 값에서 T를 빼줘도, 여전히 24시간 체제로 바뀌지 않는다. moment("2021-08-12 17:30").format("YYYY-MM-DD hh:mm")//실패 수 많은 삽질 속에서 스택오버..
//Login.js { console.log("아이디 입력했어!"); }} /> Login 컴포넌트가 부모컴포넌트, Input 컴포넌트가 자식컴포넌트인 상황입니다. 이럴때에 부모컴포넌트에서는 prop(예시에는 _onChange)로 사용할 함수를 입력하고, 자식컴포넌트에서 부모로부터 props 받아서 이벤트함수에 props를 적용시킵니다. 아래처럼 말이죠! defaultProps로 콜백을 넘겨주는 이유는, 컴포넌트 내에서 쓰고 있는 무언가를 props로 넘겨받지 못했을 경우 오류나는 걸 방지하기 위함입니다 //Input.js import React from "react"; import styled from "styled-components"; import { Text, Grid } from "./index..
아래와 같이 defaultProps를 지정하고 부모속성에서 사용해보자! props에서 받아온 값을 활용하여, css 속성을 건드려보았다. import React from "react"; import styled from "styled-components"; const Text = ({ bold, color, size, children }) => { const styles = { bold, color, size }; return ( {children} ); }; Text.defaultProps = { children: null, bold: false, color: "#222831", size: "14px", }; const P = styled.p` color: ${props => props.color}; ..
https://ko.reactjs.org/docs/fragments.html Fragments – React A JavaScript library for building user interfaces ko.reactjs.org 위의 공식문서를 확인해보면, 와 는 별도의 노드를 추가하지 않고 컴포넌트를 생성하는방법 입니다. 는 s의 단축문법이라고 보면 되는데요! 차이점이 하나 있습니다! 는 props를 완전히 사용할 수 없지만, React.Fragments는 key를 넣어줄 수 있습니다! 따라서, map함수로 컴포넌트들을 돌릴 때에는 React.Fragments를, 나머지는 를 사용하면 되겠습니다.
