React.js21 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. FontAwesome 아이콘 색깔 지정 FontAwesome에서 이전에는 i 태그로 아이콘을 삽입했었는데 svg도 지원하게 되면서 이번에 svg 아이콘을 사용했습니다. FontAwesome에서 svg로 아이콘을 불러와서 svg에 color 를 지정해줬는데 동작하지 않아서 저와 같은 사람이 있을까봐 작성합니다. 색깔이 적용되지 않은 모습을 볼 수 있습니다. 검색을 해보니까 svg 안에 있는 path의 색상을 지정해줘야 바꿔지더라고요! 저는 props로 iconColor를 지정받아서 적용시켜주었습니다~ 2021. 9. 19. 리액트에서 tailwindcss 사용하기. 그런데 styled-components를 곁들인. 저는 리액트에서 주로 styled-components를 이용해서 스타일링을 하고 있습니다. 스타일링에 항상 자신이 없어서 이번에 tailwindcss를 써봤는데, 반응형도 처리하기 쉽고 생각보다 편리하더군요. 그래서 styled-components + tailwindcss 를 사용한 세팅 방법을 기록하기 위해 작성합니다. 저 두가지에 추가적으로 twin.macro 라는 라이브러리를 사용했는데요. 이 라이브러리는 styled-components 안에서 tailwindcss를 작성할 수 있게 도와줍니다. 짱짱 설치 tailwindcss 설치 yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 craco 설치 y.. 2021. 8. 20. 리액트에서 .env 사용하기 리액트에서 .env 사용하기 DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 환경 변수 파일을 외부에 만들어 소스코드 내에 하드코딩 하지 않고 사용하는 방법으로 .env 파일을 생성하는 것이다. ( 터미널로 직접 환경변수를 설정해줘도 된다. ) 리액트에서는 특이하게도 REACT_APP 으로 시작되어야 인식을 한다. # .env REACT_APP_FIREBASE_API_KEY = key REACT_APP_FIREBASE_AUTH_DOMAIN = auth_domain해당 환경변수를 사용하는 방법은 아래와 같다. console.log(process.env.REACT_APP_FIREBASE_API_KEY) 2021. 8. 20. 이전 1 2 3 다음
