Suno

Next.js란 Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. 리액트 문서는 Next.js를 ‘권고하는 툴 체인들’ 중 하나로 언급하며 개발자들이 Node.js로 서버 렌더링되는 웹사이트를 빌드할 때의 해결책의 하나로 충고하고 있다. Next.js를 통해 얻는 가장 장점 많은 블로그 포스트들을 읽어보면 Next.js를 사용하는 가장 큰 이유로 SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 하기 때문에라고 말하고 있다. 왜냐하면, 기본적으로 React는 Client Side Rendering(CSR)을..

React를 사용하면서 SPA 에 대한 개념과 어떤식으로 렌더링 과정을 거치고 어떤 장단점이 있는지 정확히 알지 못했다. SPA 와 MPA를 비교하면서 그안에서 렌더링방식이 SSR 과 CSR 로 나뉜다는 것도 알 수 있었고 CSR의 단점을 보완하고자 React에서는 Next.js를 활용하는 방법도 있다는것을 추가로 알게 되었다. Next.js 에 대한 것도 추후에 공부를 해야겠다. SPA vs MPA SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로..

Redux 리덕스란, 프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리 라고 많이 표현합니다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문입니다. 리덕스가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 우리는 어떻게 했었나요? Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었습니다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있습니다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모..

State란 무엇인가? State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 1. State 만들기 State를 만들 때는 useState()를 사용한다. 먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 state의 이름, 그리고 두번째 자리에는 set 을 붙이고 state의 이름을 붙입니다. 그리고 useState( ) 의 인자에는 이 state의 원하는 처음값 을 넣어줍니다. const [name, setName] = useState("김할아"); 저는 name 이라는 state를 만들었고, name state의 처음값은 “김할아”로 정했습니다. 어떤가요? 우리는 처음값을 initial state 라고 부릅니다. state의 정의처럼, 언제든지 변할 ..

시맨틱 태그 (Semantic Tag)란? Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다. div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다. 그렇다면 의미있는 태그를 사용함으로써 얻는 장점은 무엇일까?? 시맨틱 태그 사용의 장점 검색엔진최적화(SEO) 🔍 : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그르 사용하는 것이 중요하다. 시각장애가 있는 사용자가 스크린 ..

함수형 프로그래밍 [ 함수형 프로그래밍 ] 전달받은 인자값을 중심으로 결과값을 반환하는 간결한 방식의 프로그래밍으로 데이터를 함수 내부에서 따로 저장하거나 하지 않는다. 한 번에 하나의 작업만 수행하는 함수들의 조합으로 로직을 처리한다. 예) func(obj) : 함수 인자값으로 객체, 함수 등을 넘겨 작업을 수행. 특징 : 함수안에 함수, 여러 함수로 구성된 고차함수, *순수함수 *참고로 순수함수란 ? 다음과 같은 조건을 충족하는 함수를 순수함수라고 부른다. 1. 함수 밖같 환경을 조작해선 안됨 = side effect 를 만들지 않는다. (side effect란 부수효과 라는 뜻으로, 지금 수행중인 작업으로 인해 외부의 데이터가 바뀌게 되는것을 말한다.) 2. 같은 입력값에 대해 항상 같은 값을 리턴..

Cookie 쿠키 클라이언트 로컬에 저장되는 데이터 파일 (key-value 구조) 브라우저가 종료되어도 명시한 유효 시간이 지나지 않았다면 인증 유지 하나의 쿠키 값은 최대 4KB까지 저장 가능 Response 헤더에 Set-Cookie 속성을 사용하여 쿠키 생성 사용자가 요청하지 않아도 자동으로 브라우저가 Request Header에 넣어서 서버에 전송 example : 아이디, 비밀번호 저장, 장바구니 기능, 자동로그인, 팝업 ‘오늘 더 이상 이 창을 보지 않음’ Cookie 는 MaxAge 를 통해 유효시간을 지정 할 수 있다. Expires는 구버전에서 쓰인 방법 Expires쿠키가 삭제되는 만료 날짜를 설정합니다. Max-age쿠키가 삭제될 시간을 초 단위로 설정합니다 (이것을 사용하십시오. ..

1. useRef 가 무엇인가요? useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. 2. useRef 를 언제 사용하나요? 2-1. 특정 DOM 선택하기 리액트에서는 DOM 을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용합니다. 2-2. 컴포넌트 안의 변수 만들기 useRef 로 관리하는 변수는 값이 바뀐다고..

const는 변하지 않는 상수이다. 하지만 배열 객체로 const를 선언시 요소를 추가/삭제 변경이 가능하다. 왜그런것일까?? 이유 배열, 객체는 참조값, 참조값은 변수에 주소를 할당한다. 따라서 const 변수에는 주소만 할당 되어 있다. stack에는 주소만 저장이 되고, heap 에 실제 요소들이 저장되어 있다. 실제 배열 요소들은 push나 pop 으로 변경이 가능하고 참조된 주소는 변경 되지 않으므로 배열, 객체를 const로 선언시 요소 변경이 가능하다. let으로 배열과 객체를 선언할 경우, 값이 아닌 주소변경(재할당)이 가능하므로 적절하지 않다. 참고블로그 TIL - const로 배열/객체를 선언하여 요소를 변경할 수 있는 이유는? const는 변하지 않는 상수다.그런데 배열과 객체는 요소..

require vs import 기본적으로 require와 import는 모듈 키워드입니다. 외부 파일이나 라이브러리를 불러올 때 사용합니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES2015에서 새롭게 도입된 키워드입니다. 둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고 있지만, 다른 문법 구조 지니고 있습니다. require()는 프로그램의 어느 지점에서나 호출 할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 있습니다. 최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만, 아직까지는 import 키워드가 100% 대체되어 사용될 수 없습니다. 태그를 사용하는 브라우저 환경이거나, NodeJS에서도 C..