프론트엔드 개발
Apollo graphql 스키마와 리졸버에 대해 알아보자. 사용법
GraphQL API용 쿼리 언어이며 데이터에 대해 정의한 유형 시스템을 사용하여 쿼리를 실행하기 위한 서버 측 런타임입니다. 특정 데이터베이스 또는 스토리지 엔진에 연결되지 않으며 대신 기존 코드 및 데이터로 지원됩니다. 필요한 것을 요청하고 정확히 가져옵니다. 단일 요청으로 많은 리소스 가져올 수 있습니다. 구조 (Apollo 사용) 일단 자세한 설명에 앞서서 전체 구조가 이런 식으로 돌아간다는 이해하시고 읽으면 이해가 더 잘 될 겁니다. 프론트엔드 : Apollo Client 를 통해 스키마의 앤드포인트에서 필요한 데이터를 GraphQL 쿼리문으로 요청 백엔드 : Apollo Server 에 스키마, 리졸버, 데이터소스 를 구성 리졸버 : 데이터소스에서 데이터 가져와서 스키마 필드를 채워서 응답을 ..
Apollo 오디세이(ODYSSEY) graphql 강의
Apollo 오디세이 (ODYSSEY) 회사에서 다음 프로젝트 준비하면서 끝없는 수련을 하고 있습니다. 특히 다음 프로젝트에는 graphql 기술을 사용하기 때문에 서둘러서 공부해야 하는 상황입니다! 찾다보니 Apllo 형님들이 자체적으로 무료 강의를 제공해주시더군요. 그저 빛 ... 바로 Apollo 사 에서 제공하는 오디세이 (ODYSSEY) 라는 교육 플랫폼 입니다. https://www.apollographql.com/tutorials/browse GraphQL tutorials and resources - GraphQL Tutorials Side Quest: Intermediate Schema Design Enums, inputs, interfaces, and query fragments www..
Next.js 13 버전에서 ReactQuery 사용시 서버 컴포넌트에서 클라이언트 컴포넌트로 pre-fetch 데이터 전달하는 방법
Next.js 13 의 클라이언트 컴포넌트에서 react-query 를 사용하는 경우 서버 컴포넌트에서 데이터를 미리 가져온 뒤 클라이언트 컴포넌트에 전달하는 것에 대한 게시물 입니다. 코드 예시의 라이브러리 버전은 아래와 같습니다. "@tanstack/react-query": "^4.24.4" "@tanstack/react-query-devtools": "^4.24.4", "next": "13.1.3", "react": "18.2.0", App 디렉토리의 서버컴포넌트에서 데이터를 미리 가져온 뒤 클라이언트 컴포넌트에 전달하는 방법이 2가지가 있습니다. 각각 차례대로 살펴보겠습니다. props drilling 방식으로 pre-fetch hydrate 방식으로 pre-fetch react-query Pro..
웹 프레임워크 Next.js 는 무엇인가요? (프론트 면접 질문)
웹 프레임워크 Next.js 는 무엇인가요? 글 우측 하단에 다음버튼 눌러서 계속 진행하며 읽어보는걸 추천합니다. 실제로 면접에서 지원자에게 물어볼 만한 질문 들임. 읽는 것 만으로도 대단히 도움이 됩니다. 글 읽기전에 하나씩 답변 달아본 후에 읽어보면 뭘 알고 뭘 모르는지 알 수 있을 것 같네요. 자바스크립트에서 리액트로 React.js 는 무엇인가요? Dom은 무엇인가요? JSX란 무엇입니까? State란 무엇입니까? 언제 사용해야 합니까? 이벤트 등록 및 처리 방법은? hook 이란 무엇인가요? 사용방법은? React에서 props는 어떤 용도로 사용되나요? props와 state의 차이점은 무엇입니까? React에서 Next.js로 Next.js 작동 방식 컴파일이란 무엇입니까? Minifying..
서버사이드 렌더링를 사용하더라도 결국 다운받는 HTML 파일 크기를 줄여야 사용자에게도 구글봇에게도 유리하다.
서버사이드 렌더링를 사용하더라도 결국 다운받는 HTML 파일 크기를 줄여야 사용자에게도 구글봇에게도 유리하다. GitHub - yeonjuan/dev-blog: 개발 블로그, 공부한거 정리 개발 블로그, 공부한거 정리. Contribute to yeonjuan/dev-blog development by creating an account on GitHub. github.com 사이트 접속시 리액트 자바스크립트 파일을 다운로드 받는동안 서버에서 미리 렌더링해둔 HTML 파일을 먼저 다운받아서 화면에 보여주는 서버사이드 렌더링을 사용하더라도 결국 다운로드 받는 HTML 파일의 크기를 줄이는것이 사용자에게도 구글봇에게도 유리하다는 내용입니다. 해결책은 애초에 graphql를 사용하여 DB에서 필요한 필드만 가..
Jotai 와 Zustand 는 무엇이 다른가요?
Jotai 와 Zustand 창시자 dai-shi 의 글 How is jotai different from zustand? · Issue #13 · pmndrs/jotai Name Jotai means "state" in Japanese. Zustand means "state" in German. Analogy Jotai is close to Recoil. Zustand is close to Redux. Where state resides Jotai state is within Rea... github.com 요약 Zustand는 기본적으로 단일 Store입니다. (여러 Store을 만들 수 있지만 분리되어 있습니다). Zustand는 외부 저장소이며 후크는 외부 세계를 React 세계에 연결하는 것입니..
웹 프론트엔드 유용한 링크 모음
트렌드 ONEONEONE - 데일리 개발 트렌드 codenary - 기업별 스택 (무슨 기술 사용하는지) 네이버 fe-news (구독) Korean FE article (구독) GeekNews - 여러 IT 분야 기술들 책 모던 JavaScript 튜토리얼 실용주의 프런트 엔드 개발 도구 피그마 - 디자인 협업 툴 caniuse - 브라우저 버전별 지원 가능 여부 확인 browsertack - 장치/브라우저 버전별 테스트 필수 공부 라이브러리 Typescript - JS 에 타입채크가 추가된 JS의 슈퍼셋 tailwind css - utility-first CSS framework emotion StyledComponent - CSS In JS ReactQuery - 데이터 패칭, 캐싱 Zustand J..
Next 13 버전에서 App 디렉토리 사용방법 및 소개
Next.js 13 버전에 App 디렉토리가 신규로 추가되었습니다. 🚧 아직 실험적인 기능이며, 안정적이지 않기 때문에 프로덕션 환경에서 되도록 사용하지 않는 것을 권장합니다. App 디렉토리 소개 App 디렉토리 사용시 폴더 구조와 Data Fetch 방법들이 완전히 다르게 변경되는데요. 기존에는 index 파일안에 레이아웃을 짜고 알아서 파일을 분리해서 레이아웃 구성해야 했다면, 이제는 각 레이아웃을 파일로 분리시킵니다. 즉, App 디렉토리의 폴더 구조 자체가 App의 명세서가 됩니다. 또한 App 디렉토리 아래에 작성된 모든 컴포넌트는 Server Component 가 됩니다. 기존에 저희가 사용해왔던 컴포넌트들은 모두 Client Component 입니다. 즉, Client 측에서 상태를 변경하..
자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Webpack, Rollup, Parcel, esbuild, swc, vite, turbopack)
모듈 시스템 최초의 모듈 시스템 최초에는 script 테그로 자바스크립트 파일을 삽입하면 브라우저에서 순서대로 로드 하는 방식 이었습니다. 문제점 모듈 간 스코프 구분이 되지 않습니다. 즉, foo 에 있는 변수명과 bar에 있는 변수명이 겹치면 잘못 동작하게 됩니다. 모듈 순서를 신경쓰면서 개발해야 합니다. 해결책 자바스크립트를 모듈화 하여 서로 간섭하지 않게 만들자 이에 따라 자바스크립트를 모듈화 하기 위한 새로운 기술 등장 했습니다. CommonJS module.exports = foo; // 모듈 export const foo = require("./foo"); // 모듈 import 특징 CommonJS 는 브라우저 외에도 사용가능한 범용적인 JS Module System 입니다. 즉, 브라우저..
Vite 아직 사용하지 마세요!!!
차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev https://11001.tistory.com/211 CRA를 Vite로 마이그레이션 하기 차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재 11001.tistory.com 대단한 도구라고 여기저기서 홍보하고 좋다고 띄워줘서 신나게 마이그레이션을 준비했었습니다. 그런데 실제로 사용해보니 개발 환경과 프로덕션 환경이 너무 달라서 뒷통수를 당했습니다. 😢 결론 부터..