자료 공유

Javascript

TypeScript

TypeScript-Handbook 한글 문서

TypeScript 한글 문서

⚠️ 타입스크립트 공식 웹 사이트 프로젝트인 microsoft/TypeScript-WebSite에서 한글 문서 번역이 진행중 입니다. 핸드북 번역에 참여하실 분은 해당 레포에서 참여해 주세요. 자세한 내용은 한국어 번역 이슈 를 참고해주세요. TypeScript Handbook 을 번역하는 프로젝트입니다. 번역 진행 상황은 이곳 을 통해 확인할 수 있습니다. 누구나 참여 가능하며 참여하는 방법은 CONTRIBUTING.md를 참고해 주세요.

https://typescript-kr.github.io/

React

React 에서 선언적으로 비동기 다루기 (아티클)

React에서 선언적으로 비동기 다루기

에러를 효율적으로 다루기 위해 선언적으로 에러를 정의하고 처리하는 방법을 고민했고 그 결과물을 공유합니다. Suspense와 ErrorBoundary 를 사용하여 비동기 컴포넌트를 보다 효율적으로 처리하는 컴포넌트를 소개합니다. 우리에게 익숙한 명령형으로 비동기 처리와 에러 처리하는 부분에 대해 먼저 살펴보려고 한다. 먼저 일반적인 비동기 처리를 살펴보자. 이런 간단한 호출의 경우에도 비동기 상태에 따른 별도 처리가 필요하다.

https://jbee.io/react/error-declarative-handling-1/

Next.JS

공식 문서

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

https://nextjs.org/

상태관리

SWR 공식문서

데이터 가져오기를 위한 React Hooks - SWR

"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate 에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다. 그리고 UI는 항상 빠르고 반응적 입니다.

https://swr.vercel.app/ko

SWR이 필요한 이유 (아티클)

Redux 를 넘어 SWR 로(1)

이 글에서는 오랫동안 Redux 를 이용한 상태관리를 해오다가 최근 SWR 을 만나고, 프로젝트에서 Redux 의존성 모듈을 완전히 제거하기 까지 이른 과정과 경험을 공유하고자 합니다.

https://min9nim.vercel.app/2020-10-03-swr-intro1/

전역 상태 관리

Recoil 공식문서

Recoil

Brief Introduction into Recoil Recoil은 React처럼 작동하고 생각합니다. 앱에 추가하여 빠르고 유연한 공유되는 상태를 사용해 보세요. 파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리됩니다. 코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소를 구현합니다.

https://recoiljs.org/ko/

컨퍼런스 - 상태관리 Recoil 하세요

[B1] 상태관리, 이제 Recoil 하세요.

상태관리, 이제 Recoil 하세요. - 김현태 | MASS ADOPTION발표자료: https://drive.google.com/file/d/1XzROX52XAeDFDYOfqgKOQ9ypDJkBBzal/view?usp=sharing

https://www.youtube.com/watch?v=0-UaleJZOw8&t=873s

슬랙 질의응답

• SWR: 비동기적

• Recoil: 동기적

Atomic Design 패턴

Effective Atomic Design

Effective Atomic Design

소프트웨어 개발 중 설계에서 가장 중요한 것은 모듈화와 추상화 두 가지라고 할 수 있다. 웹 프론트엔드 업계는 이미 React, Vue.js, Angular와 같은 오픈소스 프레임워크를 통해 끝을 달리는 추상화와 모듈화를 보여주고 있다. 특히 모듈화 측면에서 세 프레임워크는 컴포넌트 인터페이스를 매우 쉽게 제공하기 때문에 프레임워크 사용자는 효율적인 재사용이 가능하고 캡슐화된 컴포넌트를 아주 간단하게 만들 수 있다.

https://kciter.so/posts/effective-atomic-design

컴포넌트 스타일링

CSS-In-JS :

Emotion 공식문서

Introduction

https://emotion.sh/docs/introduction

Emotion 학습 정리 (by 공공)

CSS in JS 라이브러리에서 Typesafe하게 Theme 관리하기

CSS in JS 라이브러리에서 Typesafe하게 Theme 관리하기

데브시스터즈에서는 React 기반의 GatsbyJS와 Typescript를 이용해 웹 사이트를 관리하고 있으며 프로젝트의 스타일링 방법론으로는 방식을 사용하고 있습니다. Typescript 기반의 React 어플리케이션에서 CSS in JS 를 사용하는 방식과 React의 Context API를 사용해 효과적으로의 Theme를 관리하는 방법을 소개합니다. CSS in JS는 Javascript 코드에서 CSS를 작성하는 방법을 말합니다.

https://tech.devsisters.com/posts/react-extend-theme/

반응형

[반응형 웹] 반응형 폰트 적용하기 (em/rem)

[반응형 웹] 반응형 폰트 적용하기(em/rem)

지난번 포스팅에서는 미디어 쿼리(Media Query)를 적용하여 화면 크기에 따라 화면 요소를 보이거나 가리는 작업을 진행하였다. 원하는 기준점에 맞는지 미디어 쿼리를 통해 확인을 하고 해당 조건이 맞을 경우 작성한 css 스타일을 적용하였다. 이번 포스팅에서는 ` em`과 ` rem`을 사용해서 반응형 폰트 크기 적용기를 기록하려고 한다. em / rem em과 rem은 둘 다 기본 개념은 %와 유사하다.

https://firsteast.tistory.com/123

MicroSoft - 화면 크기 및 중단점

반응형 디자인에 대한 화면 크기 및 중단점 - Windows apps

Windows 앱은 태블릿, 데스크톱, TV 등을 포함하는 Windows 실행하는 모든 디바이스에서 실행할 수 있습니다. 각 디바이스에 대해 UI를 최적화하는 대신 Windows 에코시스템에서 많은 수의 디바이스 대상 및 화면 크기를 사용하여 몇 가지 주요 너비 범주("중단점"이라고도 함)를 디자인하는 것이 좋습니다. 팁 특정 중단점에 맞게 디자인할 때는 화면 크기가 아닌 앱에서 사용할 수 있는 화면 공간(앱의 창) 크기를 고려해서 디자인하세요.

https://docs.microsoft.com/ko-kr/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design

종합 안내: Rem 그리고 Em, 언제 써야할까

종합 안내: Rem 그리고 Em, 언제 써야 할까

여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다! em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환됩니다....

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

[번역] REM vs EM

[번역] REM vs EM

원문 : REM vs EM - The Great Debate EM은 타이포그래피의 단위로서 `font-size`와 동일하다. 선택자의 font-size가 20px이라면 1em은 20px이다. 그럼 아래와 같은 경우 h1의 font-size는 얼마일까? html { font-size: 100% } /* This means 16px by default*/ h1 { font-size: 2em } /* 16px * 2 = 32px */ h1의 font-size를 알기위해서는 상위 요소의 font-size를 알아야 한다.

https://blog.jeongwoo.in/%EB%B2%88%EC%97%AD-rem-vs-em-5eac6122b8ea

[HTML] H태그별 폰트사이즈.

[HTML] H태그별 폰트사이즈.

IE7 IE8 FF2 FF3 Opera Safari3.1 H1 24pt 2em 32px 32px 32px 32px H2 18pt 1.5em 24px 24px 24px 24px H3 13.55pt 1.17em 18.7333px 18.7167px 18px 19px H4 1em H5 10pt 0.83em 13.2667px 13.2833px 13px 13px..

https://gemma2ee.tistory.com/25

반응형 웹 사이트 제작 — margin, padding을 rem이나 em단위로 설정하지 마라!

크리스마스에 코딩하고 있는 내 인생이 레전드 같지만 오늘도 달린다..

블로그를 만들면서 포스팅 목록을 보여주는 부분을 작업하고 있는데, 만들면서 보니 내가 반응형 처리에 미숙한 부분이 많다는걸 알게 되어서 다시 처음부터 공부하기 시작했다. 오늘 공부하면서 알게된것들을 정리한다. 😄 🙂 rem단위는 루트엘리먼트의 폰트 사이즈를 기준으로 동작한다. 그렇다고해서 내가 루트엘리먼트인 html태그에 폰트사이즈를 데스크탑에서는...

https://simsimjae.medium.com/%ED%81%AC%EB%A6%AC%EC%8A%A4%EB%A7%88%EC%8A%A4%EC%97%90-%EC%BD%94%EB%94%A9%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94-%EB%82%B4-%EC%9D%B8%EC%83%9D%EC%9D%B4-%EB%A0%88%EC%A0%84%EB%93%9C-%EA%B0%99%EC%A7%80%EB%A7%8C-%EC%98%A4%EB%8A%98%EB%8F%84-%EB%8B%AC%EB%A6%B0%EB%8B%A4-96f79ee41464

CSS 속성으로 줄바꿈 적용하기

How to replace /n to linebreaks in react.js?

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

https://stackoverflow.com/questions/40418024/how-to-replace-n-to-linebreaks-in-react-js

Make line breaks work when you render text in a React or Vue component

Sometimes you will get a string that you can't control in your React components (like from a CMS or API). It might look something like this: "Wow I am so cool \n I'm a JavaScript haiku \n render my newlines" But, those little \n characters aren't respected if you were to put it into a React (or Vue) component, like this: If you want to change this behavior and get the newlines you want, you have a couple solid options.

https://dev.to/cassidoo/make-line-breaks-work-when-you-render-text-in-a-react-or-vue-component-4m0n

코드 리뷰

코드 리뷰의 목적은 성장이어야 한다 (아티클)

코드 리뷰의 목적은 성장이어야 한다

TL;DR 조직 내 코드 리뷰는 리뷰하고자 하는 관점을 코드가 아닌, 코드를 작성한 엔지니어에게, 제품을 만드는 메이커에게 옮겨보면 어떨까. 사실 코드 리뷰 문화보다 중요한 것은 테스트 문화이다. 코드 리뷰? 코드 리뷰(Code Review)란 말 그대로 코드를 리뷰하는 행위를 말한다. 코드 리뷰는 좋은 개발 문화 중 하나로 인식 되고 있는데, 그저 코드를 리뷰한다고 해서 좋은 개발 문화일지, 리뷰를 어떻게 잘 할 수 있을지 이야기해보려고 한다.

https://jbee.io/essay/code-review-goal/

MSW

MSW로 API 모킹하기

MSW로 API 모킹하기

중복 코드를 작성하는 건 언제나 힘든 일이죠. 그런데! MSW 가 프론트엔드 개발에서 가장 번거로웠던 작업 하나를 말끔하게 해결해준다는 사실을 아셨나요? 만약 매스프레소 프론트엔드 팀과 같이 Jest와 Storybook 을 모두 사용하신다면, MSW를 통해 테스트 코드의 약 20% 만큼을 제거하실 수 있을 겁니다. 같은 API를 두번 모킹하는 일을 방지해주기 때문이죠.

https://blog.mathpresso.com/msw%EB%A1%9C-api-%EB%AA%A8%ED%82%B9%ED%95%98%EA%B8%B0-2d8a803c3d5c

[env-cmd] next.js에서 각 환경에 맞는 환경변수 설정하기

[env-cmd] next.js에서 각 환경에 맞는 환경변수 설정하기

개인 프로젝트를 개발할 때는 딱히 신경쓰지 않아도 될 수도 있지만, 실무에서는 개발 환경, QA 환경, 운영 환경등 각 환경마다 서버 주소나 변수들이 다른 경우가 많습니다. 그래서 각각 환경에 맞게 변수들을 등록해두고 환경에 맞게 변수가 자동적으로 적용되도록 해야합니다. 오늘은 env-cmd 패키지를 이용하여 환경변수를 설정해보겠습니다. 먼저, env-cmd를 설치합니다.

https://jayprogram.tistory.com/89

MSW로 mock 서버 사용해보기 (Next.js/TypeScript)

MSW로 mock 서버 사용해보기 (Next.js/TypeScript) | DevelopersIO

API가 준비되기 전에 클라이언트에서 mock 서버를 만들면 개발 명세로도 작업이 가능 MSW라는 라이브러리로 mock 서버를 만들어서 진행해 봄 브라우저의 경우 네트워크 단에서 (서비스 워커) 프로그램에서 외부로 향하는 API를 감지하여 mock 서버를 대신 사용해줌 노드의 경우 아래의 라이브러리를 통해 인터셉팅하고 있음 Since Service Worker API cannot run in a non-browser environment, the NodeJS support of request interception is done via a designated [node-request-interceptor](https://github.com/mswjs/node-request-interceptor) library.

https://dev.classmethod.jp/articles/msw-nextjs-typescript/