FE

[Next.js] 프로젝트 생성

Next.js는 서버사이드렌더링을 지원해주는 프레임워크이다.서버사이드 렌더링의 장점은 아래 포스팅에 정리해놓았다. SSR의 경험을 쌓고 싶어서 Next.js를 사용해보려고 한다.2024.05.30 - [Front-end/React] - [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리 [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPAworld-developer.tistory.com프로젝트 생성하기npx create-next-app@latest 만약 typescript를 사용하고..

[React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리

1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 말 그대로 하나의 페이지로 구현되며 새로운 페이지를 받아오지 않는다. 최초에 첫 페이지에서 데이터를 모두 불러온 이후에 페이지 전환 단계에서는 자바스크립트와 브러우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. SPA는 최초 첫 페이지를 받을 때는 SSR을 사용할 수 있으며 이후에는 CSR을 이용하여 렌더링을 진행해야 한다. 1.1 SPA에서 페이지 전환이 일어나는 과정을 설명하시오페이지 전환 시..

[React] SPA, CSR은 같을까 다를까

답부터 이야기 하자면 SPA, CSR은 같지 않다. 애초에 비교 대상이 아니다. CSR(Client Side Rendering)사용자가 웹 브라우저에 주소를 입력하면 데이터가 없는 빈 HTML만 받아오고, 데이터는 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식으로 진행됨SSR(Server Side Rendering)CSR과 반대로 데이터까지 모두 삽입하여 완성된 HTML을 받아오는 방식으로 진행됨SPA(Single Page Application)서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하여 새로운 페이지를 받아오지 않는 웹 어플리케이션을 말함데이터를 수정하거나 조회할 때 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않음MPA(Multiple Page Appl..

[JavaScript] 자바스크립트 문자열 반복 메소드 repeat()

✔️ repeat() 요약특정 문자열을 원하는만큼 반복한 문자열을 얻고싶을 때 사용.✔️ repeat() 기본형string.repeat(count);string : 문자열이 저장된 string 변수count : 반복할 횟수✔️ repeat() 사용법str = 'abc';console.log(str.repeat(3)); // abcabcabc 출력

[JavaScript] 자바스크립트 최대/최소 정수값 MAX_SAFE_INTEGER/MIN_SAFE_INTEGER

✔️ Number.MAX_SAFE_INTEGER() / Number.MIN_SAFE_INTEGER() 요약Number.MAX_SAFE_INTEGER() : 자바스크립트에서 안전한 최대 정수 값Number.MIN_SAFE_INTEGER() : 자바스크립트에서 안전한 최소 정수 값✔️ Number.MAX_SAFE_INTEGER() / Number.MIN_SAFE_INTEGER() 사용법// 최댓값 설정const max = Number.MAX_SAFE_INTEGER;// 최솟값 설정const min = Number.MIN_SAFE_INTEGER;

[JavaScript] 자바스크립트 정수인지 확인하는 Number.isInteger() 메소드

✔️ Number.isInteger() 요약인수가 정수인지 아닌지 판단하여 정수이면 true를, 정수가 아니면 false를 반환하는 메소드✔️ Number.isInteger() 기본형Number.isInteger(value);Value : 정수인지 확인하려는 값반환값 : 주어진 값의 정수 여부를 나타내는 Boolean값✔️ Number.isInteger() 사용법Number.isInteger(0); // trueNumber.isInteger(-100); // trueNumber.isInteger(0.25); // falseNumber.isInteger("문자열"); // falseNumber.isInteger(true); // falseNumber.isInteger(Infinity); // false

[JavaScript] 자바스크립트 대소문자 변경하기 toUpperCase(), toLowerCase()

✔️ toUpperCase(), toLowerCase() 요약영어로 이루어진 문자열에서 대문자를 소문자로, 소문자를 대문자로 바꾸고 싶을 때 사용함.✔️ toUpperCase(), toLowerCase() 사용법const str = "AbCdE";// 소문자를 대문자로 바꿀 때const upperStr = str.toUpperCase(); // "ABCDE"// 대문자를 소문자로 바꿀 때const lowerStr = str.toLowerCase(); // "abcde"

[JavaScript] 자바스크립트 String includes 메소드

✔️ includes() 요약 문자열에 특정 문자열이 포함되어 있는지 확인하는 메소드 포함되어 있을 때 ➡️ true 반환 포함되어 있지 않을 때 ➡️ false 반환 ✔️ includes() 기본형 확인 문자열.includes(특정 문자열, 찾을 시작 위치) 확인 문자열(String) : String 자료형의 문자열의 변수명이 들어감 특정 문자열(String) : 포함되어있는지 확인하고 싶은 문자열을 넣어줌 찾을 시작 위치(Number) : 확인 문자열에서 어느 위치에서부터 특정 문자열이 있는 지 확인하고 싶을 때 사용, 기본값은 0 ✔️ includes() 사용예시 str = "abcde"; str.includes("a"); // 결과값 : true str.includes("f"); // 결과값 : ..

[JavaScript] 최댓값, 최솟값 구하기 (Math.max / Math.min)

✔️ Math.max(), Math.min() 요약 Math.min([숫자집합]); // 가장 작은 값 반환 Math.max([숫자집합]); // 가장 큰 값 반환 Math.min()은 숫자 집합 중 가장 작은 수를 반환. Math.max()는 숫자 집합 중 가장 큰 수를 반환. ✔️ Math.max(), Math.min() 예제 Math.min(0, 2, 1, 5); // 0 반환 Math.max(0, 2, 1, 5); // 5 반환 🤔 숫자 집합이 Array에 들어있다면 어떻게 해야할까? const nums = [0, 1, 2, 5]; const num1 = Math.min(...nums); const num2 = Math.max(...nums); 스프레드 문법을 사용하여 요소를 분리해준다!