프도

SPA는 하나의 웹 브라우저 와 하나의 도큐먼트만 로드하는 싱글 웹페이지, 웹사이트 또는 웹 어플리케이션입니다. SPA는 유저가 사용하는 동안 페이지의 리로딩reloading이 필요없고, 컨텐츠의 변경, 변화가 필요할 때만 그 부분만 업데이트가 됩니다. 이는 자바스크립트의 API를 통해 구현할 수 있습니다. 리액트는 SPA를 구현하는 자바스크립트 라이브러리 중 하나로 현재 가장 많이 사용되고 있습니다. SPA의 장점으로는 빠른 속도, 향상된 유저 경험, 효율적인 캐싱, 더 적은 서버 리소스(자원)사용, 간소화된 개발 프로세스 등의 장점이 있습니다. 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다. 새롭게 갱신되는 부분만..

NextJs + Typescript 를 gh-pages를 통해 배포 진행 중에 생긴 이미지 로더 에러 next/Image에서 임포트하는 컴포넌트의 default loader가 next export에서는 지원되지 않기 때문에 발생하는 에러다. 그래서 next.congif.js에 images 안에 loader: "akamai", path:"/" 이런식으로 설정을 해주면 이미지의 기본 주소값이 설정이 되어 이미지가 잘 로딩이 된다.

Next.js 로 미니프로젝트를 만드는데 Error: invalid src prop next image .... 라는 에러가 떠 버렸다 그래서 해결방법은 위에 에러 부분 hostname "firebasestorage.gooleapis.com" 이있다 next.comfig.js 로 가서 이렇게 하시면 에러가 뜨지 않습니다.

GraphQL 쿼리 종류 간단하게 쿼리의 종류를 알아보려고 한다. 자세한 내용은 실제 채팅 서비스를 구현하면서 학습하는게 좋을 것 같아 간단한 설명만 적어놓았다. REST API와 GraphQL 역할을 잠깐 비교하자면 Query REST API의 GET메서드라고 생각하면 된다. 보통 데이터를 조회할 때 많이 사용한다. Mutation REST API의 POST, PUT, DELETE 등의 메서드라고 생각하면 된다. 보통 데이터를 조작할 때 많이 사용한다. Subscription 실시간 통신을 할때 사용하는 쿼리이다. 이름 그대로 구독하는 기능을 가지고 있으며 Mutation쿼리에서 데이터를 조작할 때 그 값을 구독해 변경사항을 실시간으로 가져올 수 있다. query와 mutation은 전통적인 서버/클라..

1) Apollo 소개 Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vue를 동시 지원한다는 점에서 인기가 높은 것 같습니다. 특히, 뷰에서 React를 쓸 경우 조합이 금상첨화가 되는데, 그 악명 높은 Redux를 Apollo로 대체가 가능해집니다. (GraphQL과 Apollo를 쓰면, REST API와 Redux를 없애버릴 수 있..

요즘회사에서 GraphQL을 많이 사용하고 현재 project에서 저도 사용해서 찾아봤습니다. 1) GraphQL 소개 GraphQL이란 페이스북이 모바일 앱을 재구성하기 위해 노력하던 2012년 개발되어 2015년 오픈소스로 공개된 데이터 쿼리 언어입니다. 자체적으로 서버와 클라이언트를 구축해 애플리케이션 서버 및 데이터베이스와 클라이언트 사이에서 Operation과 Resolve의 과정을 통해 서로 간의 데이터 상호작용을 도와줍니다. 특징으로는 어떤 종류의 Back-End(데이터베이스 및 다른 API 등)에도 연동이 가능하며, 강타입 및 단일 Endpoint를 지향합니다. 특히, REST API가 가진 구조적 문제인 Over-fetching과 Under-fetching을 해결할 수 있다는 큰 장점으로..

Prop Drilling (면접대답) 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function SecondComponent({ content }) { return ( I am the second component; ); } function ThirdCompo..

virtual 돔은 Dom에 접근하여 조작하는 대신에 이를 추상화 시킨 JS객체를 구성하여 사용합니다. 그래서 좋은점은 DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영해서 성능 향상에 도움이 됩니다 예를 들어 특정 페이지에 데이터가 변했다면 전체UI에서 가상돔을 리렌더링합니다 이전에 있던 Dom내용과 현재 내용을 비교합니다 그래서 바뀐 부분만 실제 DOM에 적용됩니다. https://dev-cini.tistory.com/11

브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로 쿠키(cookie)와 비슷한 기능이다. 쿠키(Cookie) 개발자가 아니어도 브라우저를 사용하다보면 쿠키라는 용어에 대해 쉽게 목격한 적이 있을 것이다. 쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간을 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4kb 데이터 저장 제한으로 사이즈가 매우작고 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 팝업창 다시 보지 않음 기능에 사용된다. 로컬 스토리지(Local Storage) 가볍지만 기능이 많지 않고 단순히 key(키):value(값..

누군가 나에게 Next.js를 쓰는 이유를 물어본다면, 가장 먼저 SSR 때문이라고 대답할 것 같다. Next.js 공식 홈페이지에서도 가장 먼저 강조하고 있는 것이 'hybrid static & server rendering'인 것처럼 말이다. 하지만 정확히 어떠한 과정을 거쳐 렌더링이 되는지 몰라서 찾아보았다. Next.js의 Pre-rendering React는 CSR(Client-side Rendering)로, 처음에 브라우저가 빈 HTML을 파일을 받아 아무것도 보여주지 않다가, 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여준다. https://nextjs.org/learn/foundations/how-nextjs-works/rendering 반면, Next.js는 모든 페이지를 미리..