블로그 이름을 입력해주세요

들어가면서코드를 설명하기 전  SSR(Server-Side Rendering)이 중요한 이유를 알아야 한다리액트는 CSR방식을 채택함으로써 웹을 앱처럼 별도의 새로고침 과정이 없이 데이터를 동적으로 핸들링할 수 있게 하여 사용자는 깜빡이는 현상을 느끼지 않고 웹을 경험할 수 있게 만들었다하지만 시간이 지날수록 다시 SEO가 중요해졌고 CSR은 페이지에서 보이는 데이터의 양이 많을수록 느리다는 단점이 있어 이를 보완하고자 나온 게 Next.js라고 할 수 있다리액트로 개발을 즐겨했던 개발자라면 대부분 알고 있는 리액트와 리액트 쿼리(구)를 사용 했을텐데 Next.js에서 리액트 쿼리를 쓸 필요가 있나 하는 의견들도 간혹 있었지만 현재 Tanstack Query (구) react-query는 Next.js에..

리액트 네이티브 Skia에 대해서 스터디할 필요가 생겼다 내가 그리고 싶은 2d 애니메이션을 직접 그리고 수정할 수 있다 Install(인스톨) https://shopify.github.io/react-native-skia/docs/getting-started/installation Installation | React Native Skia React Native Skia brings the Skia Graphics Library to React Native. shopify.github.io Canvers import React from 'react'; import { StyleSheet } from 'react-native'; import { Canvas } from '@shopify/react-nat..

https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 프론트엔드에서 자주사용 하는 전역상태를 관리하는 라이브러리가 몇 개 있다 대표적으로 Redux, recoil, zustand 세 가지가 있는데 그중 현재 내가 자주 사용하고 있는 zustand의 사용법이다 먼저 zustand는 store란 개념이 있는데 쉽게말해 store에 내가 사용하는 상태와 상태를 조작할 수 있는 함수를 넣고 필요한 컴포넌트에서 사용하는 방식이다 zustand의 장점을 말해보자면 1. 불필요한 상태변화에 따른 렌더링을 최소화 한다 (속도 개선) 2. 쉽다!! root 경로여도 되고 next.js라면 page경로여도 상관없다 Store set을 관리할 store 폴더를 만들어주고 ..

react-hook-form 활용해보기 2 전 글에 이어 이번에는 react-hook-form의 useForm을 사용하여 email과 password에 값을 넣을 수 있는 방법을 보도록 하겠습니다 useState를 통해 사용하였던 로그인을 그대로 이용하겠습니다 export default function UseForm() { return ( Login 아이디 비밀번호 ); } react-hook-form에 주요 기능인 useForm을 사용하겠습니다 useForm의 주요기능을 하나씩 봅니다 useForm의 세팅 import { useForm } from "react-hook-form"; export default function useForm() { const {} = useForm(); return( ....

react-hook-form 최근 회원가입을 구현 하면서 효율적으로 사용하고 있는 react의 라이브러리 react-hook-form을 복습 합니다 사용해보고 느낀 react-hook-form의 장점 비제어 컴포넌트로 폼을 관리할 수 있습니다 에러를 효율적으로 관리 할 수 있습니다(실시간 유효성검사) input마다 값을 받는 state를 만들지 않아도 됩니다 (객체로 관리하는 state도) 지속적으로 업데이트를 꾸준히 해주는거 같습니다 공식문서가 친절합니다 바로 사용해보기 최소단위의 로그인 폼을 구현 해봅니다 next.js로 프로젝트 시작하기 npx create-next-app@latest --typescript next.js 프로젝트의 설정을 물어보는데 프로젝트 이름, 테일윈드css(no), app 디..

일본에서는 우리나라처럼 주소를 도로명처럼 작성하는 게 아닌 우편번호를 통해 주소를 입력한다고 합니다 그렇게 숫자정도를 가지고 일본 주소를 찾을 수 있습니다 바로 사용하기 전 블록단위로 기능을 만든 후 제가 필요한 곳에 가져다 쓰려고 합니다 먼저 일본 우편번호를 찾을 수 있는 api의 참고 사이트 입니다 여기서 api를 가져오시면 됩니다 https://zipaddress.net/ 郵便番号-住所検索API 郵便番号-住所対応表は、日本郵便サイトで配布されているKEN_ALL.CSVのデータを解析して生成しています。毎月の1日の深夜に対応表を生成しなおしますので、比較的新しいデータで検索が可能 zipaddress.net 번역에 어려움이 있지만 코드만 보고 어느정도 ajax를 통해 호출해 올 수 있다는 것을 알 수 있기에 사용 방법..

AJAX를 통해 데이터를 통신하고 이를 통해 화면의 UI를 구현할 경우 데이터가 들어갈 템플릿을 만들고 데이터를 뿌려주게 됩니다 백엔드에서 페이징된 api를 구성하여 준다고 가정하였을경우 페이징을 하는 코드를 구현하였습니다 AJAX GET통신을 하기 위한 코드 예시를 보겠습니다 HTML 페이지 더보기 제목이 들어갑니다 본문이 들어갑니다 먼저 데이터가 들어오게될 HTML 코드를 작성했습니다 HTML 태그의 클래스를 부여하여 스크립트가 동작할 수 있는 준비를 해주어야 합니다 페이지 더보기 제목이 들어갑니다 본문이 들어갑니다 다음 AJAX를 사용하는 코드를 예시로 보겠습니다 Script cosnt city = [ { title : "서울", contents : "연남동", }, { title : "부산", c..

오랜만에 제이쿼리를 조금 사용해 보면서 ajax를 사용할 일이 생겼습니다 간단하게 ajax 비동기통신을 통해 데이터를 바인딩할 수 있는 방법을 알아보겠습니다 ajax란? AJAX란, JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다 전체 페이지를 새로 고침 하지 않아도 페이지 일부만을 로드하는 기법이며 javascript를 이용한 비동기 통신, 클라이언트와 서버 간의 XML데이터를 주고받습니다쉽게 말하자면 ajax는 서버에 데이터를 요청하는 것입니다. $.ajax({ type : 'post', // 타입 (get, post, put 등등) url : '/test', // 요청할 서버url async : tru..