전체 글48 아직 API가 안나왔어? 나는 전혀 신경안써 - 번역 오늘도 어김없이 Zenn을 눈팅하다가 도움이 됐던 글을 번역해봤습니다. 어떤 프론트엔드의 고민 프로젝트 종료 날짜는 정해져 바로 착수하지 않으면 안된다. 하.지.만. API가 아직 나오지 않았다... 얼른 하고 싶은데 후우.... 프론트엔드가 백엔드의 업무를 기다리지 않고, 애자일하게 개발할 수 있도록 도와주는 툴인 msw.js 를 소개하겠습니다. msw ? msw는 mock service worker의 줄임말로, 간단하게 목업 API를 만들 수 있는 라이브러리입니다. 비슷한 라이브러리로는 JSON Server도 있지만 msw에는 아래와 같은 장점이 있습니다. 단순히 JSON을 전달하는 게 아닌, 로직도 작성할 수가 있다. Express처럼 Mock API를 깔끔하게 작성할 수 있습니다. REST API.. 2021. 11. 20. CSS를 완전히 이해했다 - 번역 Jotai를 알게되고 일본의 테크 블로그 플랫폼인 Zenn을 간간히 보고있는데 오늘 본 해당 글이 흥미로워서 번역해봤습니다. 어느날 봤던 CSS를 완전히 이해했다를 우리는 아직 모른다. 일본 엔지니어세계에서의 「〇〇 완전히 이해했다」 라는 말은 실제로 이해했다는 의미가 아닌 경우가 많습니다. 일본어 어렵네요... (*실제로 블로그에 있는 말.) 「〇〇 완전히 이해했다」 의 가장 유명하다고 해도 과언이 아닌 것으로선 「CSS를 완전히 이해했다」가 있습니다. 이건 아래 사진처럼 T셔츠도 팔고 있습니다. 이걸 본 저는 몇개의 의문이 생겼습니다. CSS를 완전히 이해하지 않아서, 이런 모양이 되었는가? CSS를 아는 사람이라도 이런 모양을 만드는게 역으로 어려울까? 의도적으로 이런 모양을 만드는 것은 매우 어려.. 2021. 10. 25. react-spring 공식문서 겉핥기 react-spring react-spring 은 애니메이션 라이브러리이고, 대부분의 UI 애니메이션을 지원합니다. 해당 라이브러리는 animated 와 react-motion 라이브러리에 영감을 받아 제작되었다고 합니다. animated의 강력한 퍼포먼스라는 장점과 react-motion의 간단한 사용법의 장점이 합쳐져 제작되었습니다. 왜 duration이 아니라 spring인지? 스프링(용수철)은 정의된 곡선이나 지정된 지속시간으로 설정되지 않는다. 우리는 애니메이션이 곡선과 시간으로 이루어진다고 생각하지만, 현실에서 그렇게 움직이는 것은 없다. 화면상의 요소들을 자연스럽게 움직이려고 할 때 우리가 직면하게 되는 대부분을 Struggle 하게 될 것이다. 우리는 시간 기반 애니메이션에 너무 익숙해서,.. 2021. 10. 25. React SSR 저는 React를 입문했을 때부터, Next.js가 존재했고 Next.js가 SSR 방식을 지원한다는 걸 들어서 SSR를 쓰려면 Next.js를 써야겠다고만 생각했습니다. 하지만 얼마 전에 한 블로그에서 직접 express.js를 활용하여 WAS를 만들어 SSR 방식을 적용한 글을 봤습니다. 그 글을 읽고, SSR에 대해 좀 더 자세하게 알아보고 싶었고, Next.js는 어떻게 SSR을 구현했는지 찾아보았습니다. SSR (Server Side Rendering) 먼저 SSR의 개념에 대해 다시 상기시키고 글을 작성하고자 합니다. SSR은 서버에서 페이지를 구성한 다음 사용자에게 보여주는 방식입니다. 서버에서 구성하기 때문에 CSR보다 페이지 전환 시, UX 측면에서 단점이 있지만 콘텐츠 구성이 완료되는 .. 2021. 10. 23. Jotai - 7GUIs 튜토리얼 - 3 Task 6 : Circle Drawer 정해진 곳을 마우스로 클릭하면 원이 생기고, 원을 다시 누르면 크기를 조절 할 수 있습니다. Atom 정의 import { atom } from "jotai"; import { nanoid } from "nanoid"; export type Circle = { id: string; radius: number; cx: number; cy: number }; const baseCircleListAtom = atom([]); // 원 리스트 반환하는 Atom export const circleListAtom = atom((get) => get(baseCircleListAtom)); // 생성된 원의 순서를 기록하는 Atom const historyAtom = atom(.. 2021. 10. 20. Jotai - 7GUIs 튜토리얼 - 2 Task 4: Timer Atom 정의 //atoms.ts import { atom } from "jotai"; const baseDurationAtom = atom(15); const elapsedTimeAtom = atom(0); const timerAtom = atom(null); // 이전 예제와의 다른 점은 action을 파마리터로 받습니다. // action에 따라 분기처리를 한 모습입니다. const startTimerAtom = atom(null, (get, set, action: "start" | "stop") => { if (action === "start") { if (get(timerAtom) !== null) { // 타이머가 이미 시작 되었을 경우 return return; } .. 2021. 10. 16. Jotai - 7GUIS 튜토리얼 - 1 Jotai를 만든 다이시 카토상의 블로그에서 튜토리얼을 보고, 실습해볼 겸 작성하는 회고입니다. 다이시상은 Xstate(유한상태기계)의 7GUIS Tasks 튜토리얼을 보고 Jotai로도 7GUIS Task 튜토리얼을 만들어야겠다고 생각했다고 합니다. Jotai를 배울 때 좋은 자료가 될 것이며 7가지 튜토리얼을 진행하면 기본은 물론 응용까지 가능 할 것이라고 생각됩니다. 7GUIS Tasks에 대한 설명 : https://eugenkiss.github.io/7guis/tasks 이번 글에선 튜토리얼 1, 2, 3에 대한 글을 작성했습니다. Task1 : Counter 아마 상태관리 라이브러리를 접하신 분이라면 공식문서에서 봤을 카운터 입니다. Atom 정의 count 정보를 담을 baseCountAto.. 2021. 10. 11. Jotai - 리액트 상태 관리 라이브러리 jotai는 re-render를 최소화하기를 원해서 나오게 된 라이브러리고, Recoil의 아토믹 모델에 영감을 받아 나타났습니다. 아톰 의존성에 기반하여 렌더가 최적화 되고 이것은 리렌더 이슈를 해결할 수 있게 도와줍니다. Jotai는 미니멀 API를 지향하고, TypeScript 기반입니다. React의 useState처럼 간편한 Hook으로 사용할 수 있습니다. 모든 상태는 전역적으로 접근가능하고, 쓸모 없는 리렌더는 일어나지 않습니다. 기본 사용 방법 const countAtom = atom(0) const countryAtom = atom('Japan') Recoil에서는 아래와 같이 문자열 key가 존재해야하지만, jotai는 key가 따로 존재하지 않습니다. const countAtom = .. 2021. 10. 11. Recoil + Firebase Auth 리코일 , 파이어베이스 Auth 전역 상태관리 라이브러리인 Recoil을 연습해보려고 파이어베이스를 이용해서 로그인 및 회원가입 기능을 구현해봤습니다. firebase 설정 firebase를 설치하니까 v9가 되면서, import 하는 방법이 약간 달라졌습니다. 이전에는 아래와 같이 불러 왔다면, import firebase from 'firebase/app';이제는 compat이 추가되었습니다. import firebase from 'firebase/compat/app';그리고 공식 라이브러리를 보면 v9은 필요한 함수를 하나하나 불러와서 사용하는 것을 권장하고 있습니다. 하지만 저는 이전 버전에서의 방식이 좀 더 관리하기에 수월하다고 판단하여 v8 기준으로 코드를 작성했습.. 2021. 10. 4. 이전 1 2 3 4 5 6 다음
