Next 13 서버 컴포넌트와 클라이언트 컴포넌트 SSR 차이점

Next.js 13 버전 이전에는 Page 폴더 내에서 라우팅을 하였습니다. 하지만 13 버전 이후에는 App 폴더 내에서 라우팅을 할 수 있는 새로운 개념이 생겼습니다. Next13에서 앱 라우터는 컴포넌트 단위로 Hydration이 가능할 수 있도록 변경되었습니다. Hydration이란? Next.js에서 미리 렌더링 된 HTML에 이벤트 리스너를 연결하고, 사용자와 상호 작용할 수 있도록 합니다. 서버 컴포넌트 Next13 버전에서는 기본적으로 서버 컴포넌트로 사용됩니다. 장점 데이터 페치 보안 캐시 자바스크립트 번들 감소 서버에서 바로 데이터에 접근하기 때문에 빠르고, 한번 조회한 데이터는 캐시로 가지고 있어서 성능이 우수합니다. 그리고 민감한 정보들을 클라이언트에서 볼 수 없어서 더욱 안전합니다..

• format_list_bulleted Develop/Next.js
• · 2023. 10. 7.
• textsms

jQuery serialize() 이용해서 Form 데이터 ajax POST 전송하기

html의 폼 태그에 입력한 정보들을 POST 요청으로 전달하고 싶을 때가 있습니다. serialize jQuery serialize 메서드를 이용하면 폼 패너 내에 input, selelct, textarea의 value 값을 간단하게 표준 url 인코딩 형태 문자열로 만들 수가 있습니다. 회원가입 var formData = $('form').serialize() // id=1&password=2&username=superman&userEmail=superman@naver.com POST 전송 form Data를 jQuery ajax 옵션의 data 속성에 적용하면 POST로 데이터 전송이 가능합니다. $(document).ready(function() { $("#submitBtn").click(fun..

• format_list_bulleted Develop/JavaScript
• · 2023. 10. 4.
• textsms

Next.js 클릭 이벤트 적용이 안될때 해결 방법

아래와 같이 카운터 컴포넌트를 만들어서 사용하려고 하는데 버튼 클릭 이벤트가 작동하지 않아서, 원인을 찾아보았습니다. import {useState} from "react"; export default function Counter() { const [count, setCount] = useState(0) return ( Counter count: {count} setCount(count + 1)}>+ ) } 1. use client 추가 하기 next13 이후에는 기본적으로 서버 컴포넌트입니다. DOM 이벤트 또는 React 훅을 사용하기 위해서는 컴포넌트 상단에 use client를 붙여 줘야 합니다. use client 2. Node 16.14 버전 이상으로 버전 업데이트 next.js 는 최소 조..

• format_list_bulleted Develop/Next.js
• · 2023. 9. 29.
• textsms

자바스크립트 - fetch 이용해서 Ajax 비동기 통신 하기

fetch fetch API를 이용하면 서버와 브라우저를 비동기적으로 통신할 수 있습니다. fetch API 이전에는 XMLHttpRequest를 이용해서 통신을 하였습니다만, 너무 어렵고 복작해서 주로 jQuery 라이브러리를 많이 사용하였습니다. 현재는 fetch로 브라우저 window 객체에 내장 되어 있어서 다른 라이브러리 없이 비동기 통신을 할 수 있습니다. fetch 사용법 fetch(URL, Options); Get 방식 호출 기본적으로 Options 값이 없으면 GET 방식으로 호출됩니다. response는 json()으로 변경하면 요청한 데이터를 가지고 올 수 있습니다. fetch("https://jsonplaceholder.typicode.com/posts").then(function(..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

Request with GET/HEAD method cannot have body 오류 해결 방법

오류 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. fetch("https://jsonplaceholder.typicode.com/posts", { body: JSON.stringify({id: 1}) }).then(function(response) { return response.json(); }) 자바스크립트에서 fetch 호출 시 위와 같은 에러가 발생하였습니다. 원인 GET 방식의 호출인데, body에 값을 넣어서 발생하였습니다. GET 방식은 읽기 전용이기 때문에 body 값을 가질 수가 없습니다. 해결방법 1. 읽기 전용이 아닌 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

자바스크립트 - function vs Arrow 함수 무엇을 사용하는 것이 좋을까?

자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다. function 함수 함수를 만드는 일반적인 방법입니다. function add(a, b) { return a + b; } 생성자, arguments, prototype 기능이 사용 가능합니다. 함수 선언시에 호이스팅 됩니다. 함수에 이름 있어 직관적으로 사용이 가능하고 디버깅등에 편리합니다. Arrow 함수 const add = (num1, num2) => { return num + 1 } 화살표 키워드를 이용해서 간편하게 함수를 표현할 수 있습니다. 더 간단히 return 키워드와 중괄호까지 생략할 수 있습니다. const add = (num1, num2) => num1..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 20.
• textsms

React DOM이란? React 원리

React란? 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리입니다. 리액트는 컴포넌트를 이용하여 사용자 인터페이스를 효과적으로 구축할 수 있습니다. Props를 이용해서 데이터를 전달하고 State를 이용하여 상태 변화를 감지할 수 있습니다. 상태 변화를 감지하게 되면 컴포넌트를 업데이트 합니다. 하지만, React는 웹화면에 직접 렌더링 하지 않습니다. React는 단지 컴포넌트화를 하고, 데이터를 전달하고 상태를 관리하는 라이브러리일뿐입니다. 사용자가 보는 웹 화면은 React DOM을 이용해서 업데이트를 진행합니다. React DOM 이란? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';..

• format_list_bulleted Develop/React
• · 2023. 9. 19.
• textsms

React - 조건부 렌더링 하기 삼항연산자/논리연산자/변수 할당

React에서 조건에 따라서 렌더링 할 수 있는 방법이 3가지 있습니다. 삼항연산자 사용하기 isLogin 값이 true, false 값에 따라서 다른 화면을 렌더링 할 수 있습니다. export default function Dev() { const [isLogin, setIsLogin] = useState(true); return ( {isLogin ? 로그인 되었습니다. : 로그인이 필요합니다.} ); } 논리 연산자 사용하기 && 연산자를 사용합니다. isLogin 값이 true일 경우에만 렌더링 합니다. export default function Dev() { const [isLogin, setIsLogin] = useState(true); return ( {isLogin && 로그인 되었습니다..

• format_list_bulleted Develop/React
• · 2023. 9. 16.
• textsms

React - 데이터 배열 렌더링 하는 방법 key를 입력해야 하는 이유

리액트에서 배열을 렌더링 할 수 있는 방법이 있습니다. Javascript 문법 중 map 함수를 이용해서 데이터 렌더링을 할 수 있습니다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 리액트 배열 렌더링하기 아래와 Array 함수 map을 실행시켜서 배열을 렌더링 할 수 있습니다. map 함수의 첫번째 인자는 배열의 내부의 객체이고 두 번째 인자는 index 순서입니다. 단 key 값을 입력하지 않으면 오류가 발생합니다. const userInfo = [ { id: 1, name: "Superman", }, { id: 2..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms

React - 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

React에서 부모에서 자식으로 자식에서 부모로 데이터 전달할수 있습니다. 부모에서 자식은 Props를 이용해서 데이터를 전달할 수 있고, 자식에서 부모 데이터 전달은 부모 컴포넌트에서 데이터를 변경하는 함수를 Props로 전달하고 자식컴포넌트에서 전달받은 함수를 호출해서 데이터를 변경할 수 있습니다. 아래 예시를 보면서 알아보도록 하겠습니다. 부모➡️자식 데이터 전달하기 부모 컴포넌트 부모 컴포넌트에 name Props를 이용해서 Child 컴포넌트에 전달합니다. import { useState } from "react"; import Child from "../../components/Child"; export default function Dev() { const [name, setName] = u..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms