React (6) 썸네일형 리스트형 <FE> React-Query 의 필요성 1. 소개 * 기존의 상태관리 - 모던한 FE에서 상태를 관리하는 것은 필수이다. 단순한 체크여부 뿐만 아니라 다크모드, 인풋 값, 로딩상태, 에러상태, 눈에 보이는 리스트 데이터부터 눈에 보이지 않는 비동기적인 상태들 까지 상태 관리의 대상은 점점 커지고 있다. - 데이터의 관리가 점점 프론트로 넘어오고 있으며 실시간에 가까워진다는 얘기를 심심치않게 들을 수 있다. 만일 이러한 상태관리의 대한 내용과 역사가 궁금하다면 필자의 이전 글을 참고하길 바란다. 어쨌든 이런 상태들 중 오늘 할 내용은 주로 비동기 상태와 관련된 내용이다. - 예를 들어 SNS의 게시글이나 할일 목록을 생각해보자. 이들은 처음에 서버에서 받아와 관리되며, 주로 전역 store에 담기곤 한다. 이 상태들을 관리하기 위해 redux,.. <FE> 프론트 관점에서 맛보는 GraphQL 1. 소개 * GraphQL이란? - 최근 GraphQL을 아냐는 질문을 받은 적이 있다. 프론트엔드에서 백엔드와의 api 소통에 대해 얘기하다가 나왔던 것 같다. 그 때는 정말 아무것도 몰라서 대답하지 못했지만 이후로 관심이 생겨서 이렇게 맛만 보게 되었다. - GraphQL은 페이스북에서 2015년 공개한 "쿼리 언어"이다. gql이라고도 불리는 이 언어는 api를 위해 만들어졌다. 공부를 하면서 계속 sql과 혼동이와서 db에서 이게 어떻게 되지? 하는 의문을 계속 가졌는데, sql은 DB에서 데이터를 효율적으로 가져오는 언어이고 gql은 "클라이언트"가 서버로부터 데이터를 효율적으로 가져오는 언어임을 명심하자. - api하면 떠오르는 단어가 있다. "REST API". REST API가 있는데 g.. <React> React Router Dom V6 도입기 1. 배경 최근 리액트라우터의 메이저 버전이 5에서 6으로 올랐다는 소식을 접했다. 바뀌어봤자 얼마나 바뀌었을까 싶었는데 생각보다 많은 것이 바뀌었고, 기존 프로젝트의 리액트라우터 버전을 올려보는 것도 재밌을 것 같아서 시도해보았다. 이번 포스팅에서는 기존 필자의 프로젝트에 도입하는 과정을 서술할 예정이다. 혹시라도 react-router-dom v6를 공부하고 싶어서 들어왔다면 빈약한 내용에 조금 실망할 수는 있지만 그래도 읽어본다면 도움은 되지 않을까. 흥미 외에도 도입하고 싶었던 이유는 번들 사이즈이다. 리액트라우터 v6로 올라가면서 번들사이즈가 현저하게 줄어들었다. minified 기준으로 28kB 에서 17kB 까지 줄어들었다. 프로젝트에서 수많은 리액트 라우터 기능을 쓰는 것이 아니므로 들이는.. <FE> Recoil로의 마이그레이션 배경 HyupUp 프로젝트는 다양한 상태를 관리합니다. 그래서 저희는 처음 개발을 시작했을 때부터 상태관리에 관심을 가졌으며, 라이브러리의 유무에 따른 차이를 체감해보고자 하였습니다. HyupUp은 프로젝트 관리 및 협업 툴로써, 크게 유저 상태인 UserState 와 조직 내 프로젝트 상태인 EpicState, StoryState 를 가집니다. 이 글에서는 다음과 같은 UserState를 다룹니다. UserState = { id?: number; name?: string; job?: string; email?: string; imageURL?: string; admin?: boolean; organization?: number; currentProjectName?: string; currentProje.. <FE프레임워크> 리액트 vs 뷰 vs 앵귤러 vs 스벨트 1. 소개 * 소개 - 최근 웹 프론트엔드는 CSR(Client-side Rendering)이 일반화 되었다. 이는 SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링 하는데, 이러한 것을 지원해주는 것 중 하나가 리액트이다. - 그러나 SPA를 지원해주는 것이 리액트만은 아니다. 그 외에 가장 대표적인 툴이 뷰(Vue), 앵귤러(Angular), 스벨트(Svlete) 이다. - 필자의 경우 단순히 리액트 수요가 많아 사용하고있지만, 단순히 그런 이유를 넘어 더 자세히 알아보고자 조사하였다. * SPA - 먼저 간단하게 SPA(Single Page Application)에 대해서 짚어보자. - SPA는 기본적으로 단일 페이지이다. 따라서 기존의 서버 사이드 렌더링에 비해 .. <리액트 기초> 리액트 컴포넌트 이번 장에서는 리액트를 통해 간단한 컴포넌트를 만들어 보았다. 리액트는 컴포넌트라는 객체를 통해 비슷한 형식을 매우 간단하게 불러와서 보여줄 수 있다. 게다가 변화가 있더라도 페이지의 새로고침없이 원하는 부분만 변화시키며 사용자의 경험을 더 좋게 만들 수 있다. 먼저 헤드부분에 리액트와 리액트 돔을 불러왔다. 바벨은 후에 있을 JSX문법때문에 불러왔다. 참고로 개발환경에서는 .development.js를 사용하지만 배포후에는 production.js로 변경한다. body에는 리액트돔으로 넣어줄 태그들이 들어갈 root div를 만들어 둔다. 먼저 컴포넌트가 들어가는 스크립트를 만들었다. 아래에 html태그와 비슷한 구문이 있는데 이것은 javascript와 xml을 합친 JSX이다. 이것을 사용하기 위해.. 이전 1 다음
