ES6에서 도입된 화살표함수. 일명 array function이라고도 불린다.항상 익명 함수로 정의한다.생성자 함수로 사용 할 수 없다.기존 함수와 this 바인딩 방식이 다르다.prototype 프로퍼티가 없고, arguments 객체를 생성하지 않는다.// 추후 업

함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라고한다.위 예제처럼 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출 할 수 있다.하지만, 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.이것을

Next.js 옛날 버전에서는 SSG,ISR 이라 불렸다.Next.js에서 페이지를 하나 만들면 기본적으로 스태틱 랜더링식으로 페이지를 보여준다.페이지안에 fetch나, 이런 비슷한 함수가 없는 일반페이지들은 기본적으로 스태틱 랜더링으로 동작하게 되어있다.페이지 안에

Next.js에서 검색노출이 중요한 페이지를 만들때, 클라이언트 컴포넌트에서 서버데이터를 가져오는거는 피하는게 좋다.클라이언트 컴포넌트에서 서버데이터 가져올때 다음과 같은데,이렇게 작성할 시, 페이지가 로드되면 유저는 텅 빈 html을 먼저 보게 된다.후에, html내

client compoent안에서만 쓸 수 있다. 다음 경로로 이동가능뒤로가기앞으로가기새로고침페이지를 처음부터 다시 로드하는게 아니라, 이전과 바뀐점을 분석해서 바뀐부분만 새로고침해준다.Next.js 공식문서 명칭으로는 soft refresh 라고함해당 경로의 내용을

page.js, layout.js에 만드는 컴포넌트들은 전부 server component이다.장점: 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠르다.단점: html안에 자바스크립트를 못 넣는다. Ex)useState, useEffect, onClick 사용 불

이미지 최적화 방식에는 세가지가 있다.lazy loading사이즈 최적화layout shift방지(이미지 로딩이느리면 레이아웃이 밀리는 현상 방지)리액트 넥스트에서 import Image from 'next/image'; 를 사용하면 이 세가지를 자동으로 해줌다만 이

모던자바스크립트를 보며 정리했습니다. 메서드 객체 프로퍼티에 할당된 함수를 메서드(method)라고 부르는데, 아래 코드에서 user에 할당된 sayHi가 메서드이다. 메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있다.

참고자료(https://www.w3schools.com/w3css/tryw3css_templates_dark_portfolio.htmhtml,css 그리고 약간의 javascript

모던자바스크립트를 보면서 정리한 내용입니다.const로 선언된 객체를 말한다.여기서 중요한점은, (\*) 로 표시한 줄에서 오류를 일으키지 않는다는거다.const는 user의 값을 고정하지만, 그 내용은 고정하지 않는다고 한다.const는 user=...를 전체적으로

참고자료 W3schools업로드중..코드

페이지를 만들었으나 마음에 안들어서 버리기로함코드 기록도안하고 그냥 버리기엔 아까워서 사진으로 남김pc형테블릿모바일pc형 디자인은 웹을 돌아다니면서 떠돌던거를 카피해서 만들었으나,테블릿, 모바일형 디자인은 없어서 혼자 머리를 싸맸다.반응형 가이드가없고 디자인 또한 정해

사용법?. 왼쪽 값이 null 혹은 undefined인 경우 마침표를 찍지말고 undefined를 남겨달라는 뜻이다.주로 에러없이 안전하게 데이터를 꺼낼 때 사용한다.사용법?? 왼쪽 값이 null,undefined일 경우 오른쪽을 보여달라는 뜻이다.한마디로 user ?

Ctrl(Command)+D: 같은 문자열 선택Shift+Alt(Option)+i: 선택한 모든 문자열에 가장 우측 끝으로 포커싱Ctrl(Command)+Shift+오른쪽 화살표: 현재 선택한 문자열을 기준으로 우측 끝까지 문자열 선택

리액트의 Link 태그로 state를 페이지끼리 전달받을 수 있다.버전 "react": "^18.2.0"타입스크립트를 사용할때,<> 대신에 as 를 사용해준 이유는 react-router-dom v6부터 제네릭을 지원하지 않기 때문이다.

함수를 바로 실행시킬 수 있는 작은 마법이렇게하면 useEffect에서 따로 함수 선언 할 필요없이 async를 사용 할 수 있다.

object shape(객체모양)을 타입스크립트에게 설명해주는 타입스크립트의 개념이다.props 타입 명시하기Ex)styled-components 타입 명시하기이런식으로 optional로 만들어줄 수 있다.타입스크립트는 리액트의 state의 타입을 추측해서 그 타입과

타입스크립트는 strongly-typed 언어이다.strongly-typed란, 프로그래밍 언어가 작동하기 전에 type을 확인하는 것이다.왜 타입스크립트를 써야할까?자바스크립트는 정적 타입을 지원하지 않으므로 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않고, 이는

리액트에서 스타일드 컴포넌트로 css를 입힐때 사용할 수 있는 테크니션(?)같은거라고 생각하면 되겠다.코드를 보는게 백번 설명하는것보다 나을것같아 코드를 봐보자이런식으로 바뀐다.태그의 속성을 설정할 수 있다.만약 수많은 input 태그가 있는데, 모든 input에 re

반복문은 용도가 2개라고 보면 된다고한다.코드 단순 반복자료형에 담긴 자료들을 하나씩 꺼내고 싶을 때for in 반복문은 Object 자료형에 저장된 자료들을 하나씩 꺼내고 싶을 때 사용한다.참고로 key는 변수명이고, 사용자가 마음대로 작명하면된다.for in 반복문