게으른개발너D

1. Server Side Rendering next.js 의 한 기능에 대해 공부할 것이다. 이건 우리가 페이지가 오직 server side render만 할지 선택할 수 있게 한다. 우리가 reload 할 때 next.js가 해당 page를 html 형태로 export 하던지 pre render 하는 걸 알고 있다. 우리는 html이 우리 app 의 initial state(초기 상태)라는 것도 안다. 그래서 html에서 loading화면 같은 걸 기대할 수도 있다. 그래서 페이지를 inspect (개발자 도구)하면 어딘가에 loading같은 게 있을 것이다. 하지만 어떤 회사나 개발자들은 pre-rendering 된 이 loading을 유저에게 보여주기 싫을 수도 있다. fetch라던지 server..

1. Patterns 1.1 Layout 이제 많은 사람들이 next.js를 이용할 때 따르는 아주 흔한 패턴에 대해 공부할 것이다. 바로, custom app component를 사용할 때 쓰는 layout 패턴이다. 먼저, components 디렉토리 안에 Layout.js라는 component를 만들자. // Layout.js import NavBar from "./NavBar"; function Layout({children}) { return {children} } export default Layout; div 안에 children을 넣어주었는데, children은 react에서 기본적으로 제공하는 prop이다. 하나의 component를 또 다른 component 안에 넣을 때 쓸 수 있다...

1. CSS Modules next.js 앱에 CSS를 추가하는 방법은 아주 많다. 한가지 방법은 이전 게시글에서 사용해봤던 방법이다. 태그에 직접적으로 style property를 넣는것. 이것 말고도 modules라고 불리는 걸 사용해보자. NavBar.js와 같은 위치에 NavBar.modules.css라는 파일을 만들자. /* NavBar.modules.css */ .nav { display: flex; justify-content: space-between; background-color: tomato; } NavBar.js에 해당 모듈 파일을 자바스크립트 오브젝트로서 import한다. // NavBar.js import styles from './NavBar.modules.css'; 그리고나서..

1. Static Pre Rendering next.js의 가장 좋은 기능 중 하나는, 앱에 있는 페이지들이 미리 렌더링 (Pre-Rendering)된다는 점이다. 이것들은 정적 (static)으로 생성된다. 1.1 create-react-app과 next.js의 차이점 create-react-app create-react-app은 client-side render를 하는 앱을 만든다. client-side render는 우리 브라우저가 유저가 보는 UI를 만드는 모든 것을 한다는 것을 의미한다. 예를들어 create-react-app으로 만든 우리 프로젝트를 살펴보면 header, menu, card 등 다양한 것들이 많은데, 걔네들은 유저가 보는 HTML 소스코드 안에 들어있지 않다. 소스 코드를 살..

2023.11.04 - [프로젝트/Side Project] - [React] Handsontable 1 - 설치 및 데이터 추가 [React] Handsontable 1 - 설치 및 데이터 추가 Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Hand lazyhysong.tistory.com 2023.11.05 - [프로젝트/Side Project] - [React] Handsontable 2 - headers..

2023.11.04 - [프로젝트/Side Project] - [React] Handsontable 1 - 설치 및 데이터 추가 [React] Handsontable을 이용한 스프레드시트 구현 Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Hand lazyhysong.tistory.com 이전 글에서 기본적으로 구현한 스프레드시트이다. 이제부터 시작이다. ㅠㅠ 무언가를 구현할 때마다 고민거리가 생겼는데 그것들..

Handsontable을 이용하여 간단한 기능을 구현하려다 의외로 개고생을 하여 기록한다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Handsontable (pronounced "hands-on-table") is a JavaScript data grid component that brings the well-known look and feel of spreadsheets to your application. Thousands of business apps depend on Handsontab..

웹 개발을 하다보면 svg를 사용할 때가 많다. 리액트는 컴포넌트 단위로 개발하다보니 svg element tag를 복사해서 붙여넣기 하기엔 코드가 너무 복잡해 보인다. 이를 해결하기 위해 각각의 svg 파일을 만들어 컴포넌트로 만들어 쓰는 방법이 있다. svg 파일들은 src 폴더 안에 assets 폴더를 만들어서 그 안에 모두 넣어두었다. 컴포넌트로 만들어 사용하기 위해서 이렇게 작성하면 된다. // App.tsx import { ReactComponent as AddIcon } from './assets/add.svg'; export default App() { return ( ); } 이렇게만 사용한다면 타입스크립트에서 해당 모듈을 찾지 못하는 오류가 발생한다. typescript 컴파일러에세 변..

1. useEffect useEffect는 많은 사용성을 가지고 있다. class component를 사용할 때는 component의 생명주기에따라 prop의 변경 사항을 모두 생각하고 구현해 주어야했다. useEffect는 생명주기 메소드 중 componentDidMount, componentWillUpdate, componentWillUnmount와 비슷하다. componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기전 호출 componentDidMount: 첫 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용가능할 시 호출 componentWillReceiveProps: props가 업데이트 될 때 호출 shouldComponentUpdate: 새로운 props를 받았을 때 호출되..

1. custom hooks Hooks는 react의 state machine에 연결하는 기본적인 방법이다. hooks들을 code sandbox에서 구현 한 후 작동하는 걸 확인하면, 내 폴더 안에 넣고 그 다음 NPM directory에 등록시킬 것이다. useTitle: react document의 title을 몇 개의 hooks와 함께 바꾸는 것 useInput: input 역할 usePageLeave: 유저가 page를 벗어나는 시점을 발견하고 함수를 실행 useClick: 누군가 element를 클릭하는 시점을 감지 useFadeIn: 어떤 element든 상관없이 애니메이션을 element 안으로 서서히 사라지게 만듦 useFullscreen: 어떤 element든 풀스크린으로 만들거나 일반..