전체 글 검색 결과
157 개의 검색 결과가 있습니다.
Self-Study/React

[React] Next.js의 기본 개념

References https://nextjs.org/ https://kyounghwan01.github.io/blog/React/next/basic/ Next.js의 정의 React를 이용한 SSR(Server Side Rendering) 프레임워크로 클라이언트 리소스 부담 절감 및 SEO(검색 엔진 최적화)를 목적으로 개발되었다. Next.js의 장점 hot reloading 별도의 새로 고침 기능 없이 소스 코드 저장시 자동 반영된다. 단, Async/Await 같은 비동기 함수의 경우에는 별도로 새로고침이 필요하다. automatic routing 기존 React의 라우팅의 경우 별도로 경로 지정 및 명칭을 지정해야했다. 반면, Next.js의 경우 이러한 과정 없이 프로젝트 폴더 내 /pages..

2022. 10. 6. 17:24
Self-Study/React

[React] Redux의 기본 개념

References https://ko.redux.js.org/ https://hanamon.kr/redux란-리덕스-상태-관리-라이브러리/ Redux의 정의 Redux는 React에서 사용되는 상태 관리 라이브러리이다. Vuex(Vue) 처럼 전역적인 상태 관리 기능을 제공한다. Redux의 상태 관리 구조 Redux를 통한 상태 관리의 흐름은 Action, Reducer, Store로 이루어지는데 세부 사항은 다음과 같다. Action 상태 관리에 필요한 데이터들을 운반 한다. const actionSample = (newData) => { return { type: 'ACTION_CHANGE', payload: newData } } Reducer Action에 의해 운반하는 데이터 상태를 업데이트 ..

2022. 10. 6. 17:22
Self-Study/기타

[GraphQL] GraphQL의 기본 개념

References https://graphql.org/ https://tech.kakao.com/2019/08/01/graphql-basic/ http://www.incodom.kr/REST https://www.apollographql.com/blog/graphql/basics/graphql-vs-rest/ GraphQL 이란? 메타(meta)에서 개발된 쿼리 언어로 줄여서 GQL이라고도 한다. 기존 SQL과 달리 GrapQL의 경우 클라이언트 시스템에서 쿼리를 작성하고 데이터를 호출하는 특징이 있다. GraphQL이 가진 특성 SQL - Backend - Frontend의 경우 REST API와 같은 네트워크를 통해 데이터를 요청 및 응답하는 과정이 일반적이다. 다만, 해당 구조의 특성 상 서버에서..

2022. 9. 27. 16:38
Self-Study/기타

[Gulp] Gulp의 기본 개념

References https://gulpjs.com/ https://valuefactory.tistory.com/314 Gulp란? Node.js 기반 Task Runner*로 구현 과정 중 반복적인 작업 및 프론트엔드 빌드시 필요한 과정들을 자동화 하는 플러그인이다. Task Runner : 프로그램 개발 과정에서 생기는 반복 작업들을 스크립트로 자동화 하는 도구 Gulp의 특징 Gulp가 가진 특징은 크게 3가지 이다. Flexible Gulp 또한 Javascript로 구현 되었기에 호환성이 큰 점이 장점이다. 또한 gulpfile를 이용해 ****코드 및 플러그인들을 파이프 라인의 형태로 구조화 할 수 있다. import { src, dest } from 'gulp' import babel fr..

2022. 9. 27. 16:36
Self-Study/Vue

[Vue] Pinia

References https://pinia.vuejs.org/introduction.html#why-should-i-use-pinia https://eggplantiny.github.io/blog/articles/pinia-a-new-statement-manage-plugin/ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment https://dev.to/carlomigueldy/getting-started-with-vue-3-pinia-store-typescript-by-building-a-grocery-list-app-19km Pinia의 정의 VueConf Toronto 20..

2022. 9. 13. 16:21