[치트시트] 읽어본 글, 읽을 글, 레퍼런스 문서, 블로그 포스트

telnet turtle·2022년 7월 9일
0
post-thumbnail

image source

https://github.com/telnturtle/cheat-sheet-fe 로 옮겼습니다.

소개

프론트엔드 개발에 광범위하게 관련된 읽을거리 모음입니다. 2018년 부터 작성했으며 80% 정도는 읽어보았고, 20%는 아직 읽지 않은 것도 있습니다. 주로 레퍼런스, 블로그 포스트, Stack Overflow 답변, 특정 기능 구현 가이드들로 이뤄져 있습니다.

개발할 때 사용하는 컨닝페이퍼(치트시트)를 만들어보니 다시 찾아보기가 편리했습니다. 처음엔 구글 독스로 작성했으나, 코드 블록과 인라인 코드를 쓰기 위해 노션으로 재작성하고, 블로그를 만들고 나서 옮겨왔습니다.

컨플루언스는 전체 히스토리가 남지만 수정하기는 번거롭고, 유지비가 들어가므로 블로그 플랫폼을 이용하는 게 좋은 것 같습니다.

치트시트를 이렇게 사용해보세요

자신에게 필요한 것을 찾아보면서 프로그래밍을 하세요. - opentutorials.org



Algorithms

A Short Guide to Hard Problems | Quanta Magazine

Shtetl-Optimized » Blog Archive » Eigenmorality

Animating

Rive - Community Showcase

Bash

고급 Bash 스크립팅 가이드

C

C Algorithms

Clockwise Rule

Clockwise/Spiral Rule

C/C++에서 복잡한 선언문 이해하기 | public static : 한글로 쓰였다.

C언어 복잡한 선언문 해석 방법 : 이것도 한글로 쓰였다.

Career

👨‍💻 [후기] 원티드와 함께하는 개발자 커리어 터치

개발자 취업 준비 가이드

HTML 질문 | Front End Interview Handbook

Computer Architecture

개발자를 위한 SSD (Coding for SSD) – Part 1 : 목차 – tech.kakao.com

CSS Cascading Style Sheets

역사로 알아보는 CSS가 어려워진 이유: ②CSS in JS와 Atomic CSS | 요즘IT

[번역] 확장성 있는 CSS

cursor - CSS | MDN

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블로그

BEM

CSS 방법론 (SMASS, BEM, OOCSS)

CSS 방법론 (1) — BEM (Block Element Modifier) – Witinweb – Medium

Definition List

Formatting a Definition List < CSS | The Art of Web

Flex~

[html - Creating a Definition LIst with Variable-Width

<dt> and <dd> (Includes JSFiddle) - Stack Overflow](https://stackoverflow.com/a/15450468)

Email

[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉 :: 잡다한 개발 블로그

Frameworks

Bulma vs Tailwind. 부트스트랩이 CSS 프레임워크계를 평정을 하고나서 2019년 CSS… | by Kiyoung Jung | Medium

Primitives — Radix UI

Reach UI

CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유 | bono blog

Stitches — CSS-in-JS with near-zero runtime

Flex

수직 중앙 정렬
flexbox 만세!

flex | MDN

2 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)
flex-grow, flex-shrink, flex-basis를 친절하게 설명해준다.

flexbox로 만들 수 있는 10가지 레이아웃

CSS3 Grid, Flex, Position Layout 정리 – 이봉 – Medium

Font

CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align | WIT블로그

Grid

CSS 그리드 레이아웃을 지금 사용해도 정말 괜찮을까 - WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보

List Item

li태그로 메뉴등을 가로로 배열하기

No More Internet Explorer

css - Apply style ONLY on IE - Stack Overflow

CSS3 - How to target only IE, Firefox, Chrome, Safari

Specificity

Does repeating a classname in a CSS rule increase its priority? - Stack Overflow

Table

table-layout: auto;

html - Can I use a min-height for table, tr or td? - Stack Overflow

Docker

개발자가 처음 Docker 접할때 오는 멘붕 몇가지 | Popit

Emotion

CRA typescript 프로젝트에서 emotion이 css prop으로 적용이 안될 때 해결 법 — 무던하게 꾸준하게

Etc.

외부 툴 변경에 휘둘리지 않는 서버 코드 작성기

기술 스택 전면 교체와 고려해야 할 사항

당신이 보는 게임 화면은 진짜가 아니다...gif-[중세게임] 갤러리 커뮤니티 포털 -디시인사이드

라인 증권 프로젝트 회고 - Tacogrammer

Serverless로 E-Commerce 만들기 / 블랙프라이데이 트래픽 썰 / 스타트업에서 CTO는 뭘 하는 자리인가?

Wonjae Kim | Exploiting Contemporary ML

Computer Science Notes

반응형 프로그래밍이란 무엇인가?

2019년도 개발자 에코시스템의 현황 인포그래픽

전역 상태 관리에 대한 단상 (stale-while-revalidate) | JBEE.io

Why Engineers Cannot Estimate Time | by Hesham Meneisi | The Startup | Medium

여러분의 CS 교육에서 누락된 학기 · the missing semester of your cs education

Floating Point Math

10. 스타트업 MVP 사례

2020년 내가 생각한 좋은코드

혹독한 조언이 나를 살릴까?

pow(x, y)와 x의 y승의 차이

무기력한 도메인 객체 — Anemic Domain Model | by Las | Medium

새로 입사한 개발자가 프로젝트에 기여하는 방법 한 가지 - 컬리 기술 블로그

16. 과장도 팀장도 아닌 엔지니어입니다.

Why OO Sucks

토스에서의 시간을 돌아보며 | Evans Library

웹 부트캠퍼 개발자를 위한 컴퓨터 과학

Hard things in Computer Science

Your calendrical fallacy is thinking…

알면서도 모르는 피드백 정의

2022년 웹 개발에서 고려해야 할 환경

2021년도 개발자 에코시스템 현황 인포그래픽 | JetBrains: Developer Tools for Professionals and Teams

아주 조그마한 컴파일러 만들기 | 보통의 비망록

What's up with monomorphism?

프론트엔드 개발자에게도 알고리즘 공부가 중요할까? | 요즘IT

검증하지 말고 파싱하라 · 잇창명 개발 블로그

Draw a State Machine Graph

draw.io → export to xml

Finite State Machine Designer - by Evan Wallace

Font

S U N N – SUIT

Pretendard

Sometype Mono | Dharma Type

S U N N – SUITE

Git

Book

Learn Git Branching

What is version control | Atlassian Git Tutorial 아틀라시안의 깃 튜토리얼이다. 초심자는 목차에서 Learn Git 부분은 버리고 Beginner 부분부터 Getting Started까지 읽으면 기초적인 부분은 다 배울 수 있을 듯 하다.

Branching

Git: Fast-forwarding a branch without checking it out

git fetch FROM_WHICH_REMOTE FROM_BRANCH:TO_BRANCH

로컬에서 원격 브랜치 삭제하기

# Delete local branch.
git branch -D <BranchName>
# Delete remote branch.
git push origin --delete <BranchName>

git - Push commits to another branch - Stack Overflow

git push <remote> <branch with new changes>:<branch you are pushing to>

트렁크 기반 개발(Trunk-Based Development)

Commit Message

How to Write a Git Commit Message (2014) | Hacker News

joelparkerhenderson/git_commit_message: Git commit message: how to write a great git commit message and commit template for version control

Commit Message Driven Development | Sven Hofmann

How to Write a Git Commit Message

Core

git은 폴더경로가 변경된 것을 어떻게 알 수 있을까? - Kwoncharles Blog

File Case Sensitive

Git commit 파일명 대소문자 인식. 어젯밤 퇴근하기 직전, 작업한 내용을 bitbucket에 commit… | by Hoyeon Kim | Medium

GitHub Flow

잘 밤에 쓸데없는 생각하기... / Git flow, GitHub flow, GitLab flow

Logging

How to list all commits that changed a specific file?

git log -p filename

Stashing

[Git] git stash 명령어 사용하기 - Heee's Development Blog

SSH

GitHub 접속 용 SSH 키 만드는 방법 - LainyZine

GitHub

GitHub Skills

Commit Listing

E.g. https://github.com/OpenSourceConsulting/playce-wasup/commits/dev?author=telnturtle&since=2019-10-02&until=2019-10-16

URL: https://github.com/:owner/:repo/commits/:branch

Query Strings:

  1. author
    1. 깃헙 아이디
  2. since
    1. "언제부터" 커밋한 날짜
    2. YYYY-MM-DD
  3. until
    1. "언제까지" 커밋한 날짜
    2. YYYY-MM-DD

GitHub Pages

GitHub Help | GitHub Pages Basics

2016-02-18-Github-page로-블로그-만들기.md

[한국어 번역] 깃허브 페이지(GitHub Pages)에 SPA 배포/호스팅 하기

gh-pages - npm

Haskell

하스켈, 왜 이렇게 어려운거야?

[하스켈/번역]그림으로 설명하는 펑터, 어플리커티브, 모나드 : 네이버 블로그

WikibooksHaskell - WikiDocs

HTML

Accessibility

Making Elements Focusable with Tabindex - Snook.ca

html - What's the difference between <b> and <strong>, <i> and <em>? - Stack Overflow

Book

#HTML tip of the year:If you want to open all links in the document in a new tab, you can use element:#100DaysOfCode #developers

WEB1 - HTML & Internet - 생활코딩

Explore DOM Events

HTML Tips - Marko Denic - Web Developer

웹접근성(Web Accessibility) | 웹접근성과 웹표준

Event

터치와 클릭, 우리 깐부잖아. | TOAST UI :: Make Your Web Delicious!

Input

<input type="tel"> - HTML: Hypertext Markup Language | MDN

<section> 버리고 HTML5 <article> 써야 하는 이유 - WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보

<hr />

html - Changing the color of an hr element - Stack Overflow

Meta Tag

내 웹사이트를 슬랙에서 돋보이게 해줄 메타 태그 8가지 | 요즘IT

Java

Annotations

Annotations “not applicable to type”

[Java] @Override 어노테이션의 사용 – GIS Developer

Bean

Java Bean이란?

Impl

OKKY - 왜 service 개발시 항상 impl 인터페이스를 만드나요?

MVC 구조에서 service와 serviceImpl

IMPL CLASSES ARE EVIL

Spring OOP - Service, ServiceImpl 구조에 대한 고찰

첫 Java 프로젝트의 생생한 후기

Type

Beginner Java Question about Integer.parseInt() and casting - Stack Overflow

[성능튜닝] 가비지 컬렉터(GC) 이해하기

JavaScript

Array

Array.prototype.splice() - JavaScript | MDN

splice가 replace까지 가능하니까 활용가능성이 있다

javascript - How to check if an object is an array? - Stack Overflow

v instanceof Array

밑에 댓글 무서운데

v instanceof Array will return false if v was created in another frame (v is instance of thatFrame.contentWindow.Array class).

BigInt

BigInt - JavaScript | MDN

Book

자바스크립트는 어떻게 작동하는가: 웹소켓 및 HTTP/2 SSE – Huiseoul Engineering

JavaScript for impatient programmers (ES2021 edition)

짧게 써보는 웹 프론트엔드의 역사

모던 JavaScript 튜토리얼 : 강추!!

안티 패턴 | TOAST UI :: Make Your Web Delicious!

자바스크립트는 무엇으로 구성되어 있을까? | TOAST UI :: Make Your Web Delicious!

Closure

JavaScript 클로저(Closure) | DailyEngineering

Core

Execution Context | PoiemaWeb

자바스크립트는 왜 프로토타입을 선택했을까

프로토타입 언어라고 부르는 이유 with JS

[React] 5단계로 보는 리액트 폴더구조 :: Simple is Beautiful.

JS의 객체는 hash table이 아닙니다!

(번역) 자바스크립트 엔진이 뛰어난 성능을 달성하는 방법

Convention

ParkSB/javascript-style-guide: Airbnb JavaScript 스타일 가이드

Destructuring

다음 두 예제는 비구조화(구조 파괴, 패턴 매칭)와 디폴트 파라미터를 섞어서 동시에 사용한다. 그러나 결과는 다르다.

  1. 좀 더 방어적인 디폴트 파라미터 (이 방법은 에러가 나지 않아):
> let f = null;
undefined
> f = ({ test, value } = { test: true, value: 1 }) => { console.log('test ', test, ' value ', value); }
[Function: f]
> f()
test  true  value  1
undefined
>
  1. 이 방식은 에러가 날 수 있다:
> let f = null;
undefined
> f = ({ test=true, value=1 }) => { console.log('test ', test, ' value ', value); }
[Function: f]
> f()
TypeError: Cannot destructure property `test` of 'undefined' or 'null'.
    at f (repl:1:5)
> f({})
test  true  value  1
undefined
>

Named and Optional Arguments in JavaScript – DailyJS – Medium

이렇게까지 가능해

ES6

ES6의 심볼, 이터레이터, 제네레이터에 대해 알아보자

let과 const는 호이스팅 될까? – Korbit Engineering – Medium

javascript - What do the curly braces do in switch statement after case in es6? - Stack Overflow

javascript - Why Is Export Default Const invalid? - Stack Overflow

The Ultimate Guide to the ES2020 Nullish Coalescing Operator | by Faraz Kelhini | Bits and Pieces

Mastering Async/Await - Mastering Async/Await

ES6 — Map vs Object — What and when? | by Maya Shavin | Frontend Weekly | Medium

Event

e.stopPropagation()

External Packages

query-string - npm

Function

Check the value is function (instanceof Function)

maybeFunction instanceof Function // true or false

Image

javascript - Requesting blob images and transforming to base64 with fetch API - Stack Overflow

JSDoc

링크에서 Type ApplicationRecord Type을 보고 적용했다.

@type Object

state = {
  isFiltered: false,
  /**
   * @type {{onPath: Set.<string>, onTarget: Set.<string>}} idSet
   */
  idSet: { onPath: new Set(), onTarget: new Set() },
};

결과:

(property) idSet: {
    onPath: Set<string>;
    onTarget: Set<string>;
}

@param

Optional parameters and default values

Use JSDoc: @param

JSON

JSON.stringify

> let o = { a: 10, b: 11, c: { 0 : 10, 1: 11, 2: 12 } };
> let s1 = JSON.stringify(o, null, 1);
console.log(s1);
{
 "a": 10,
 "b": 11,
 "c": {
  "0": 10,
  "1": 11,
  "2": 12
 }
}
> let s2 = JSON.stringify(o, null, 2);
> console.log(s2);
{
  "a": 10,
  "b": 11,
  "c": {
    "0": 10,
    "1": 11,
    "2": 12
  }
}
> let sdot = JSON.stringify(o, null, '.');
undefined
> console.log(sdot)
{
."a": 10,
."b": 11,
."c": {
.."0": 10,
.."1": 11,
.."2": 12
.}
}

Patterns

자바스크립트 디자인 패턴: RORO - 코드쓰는사람

Stop Using Atomic Design Pattern | JBEE.io

Promise

[번역] async/await 를 사용하기 전에 promise를 이해하기

Query String

encodeURIComponent() - JavaScript | MDN

String

Javascript Thousand Separator / string format - Stack Overflow

(1234567.89).toLocaleString('en')              // for numeric input
parseFloat("1234567.89").toLocaleString('en')  // for string input

javascript - What's the difference between String(value) vs value.toString() - Stack Overflow

Typing

javascript - Convert Array to Object - Stack Overflow

JavaScript Application Architecture

I think React is a big deal because we can finally think of UIs as pure function... | Hacker News

[발표 정리] 복잡한 백오피스에서 Form의 상태 다루기 | rinae's devlog

Token Storage

Atomic Design

리액트 어플리케이션 구조 - 아토믹 디자인

Atomic Design

Babel

javascript - Babel es2015 presets doesn't translate Map and Set to es5 - Stack Overflow

Create React App

React 적용 가이드 - React 작동 방법

Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까?

Adding Sass to Create React App Applications ― Scotch.io

CRA(Create React App)에 tslint, eslint, prettier 적용하기 - 이상한모임

ESLint 와 TSLint

ESLint 설정 살펴보기

Importing with Absolute Path

VS code 설정까지 안내, .env, jsconfig.json: https://engineering.huiseoul.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EB%B3%80%EA%B2%BD-1485babb5198

이것까지 해도 안됨: .env NODE_PATH is not working in v1.1.0 #3939

Layer

[번역] UI는 좀 이따 생각해봅시다

트위터의 David K. 🎹 님: "Relevant: this HN thread, in response to "React as a UI Runtime" 👉 https://t.co/Jd2et4OU7c (It mentions XState! But that's besides the point.)"

DDD START! - 도메인 주도 설계 구현과 핵심 개념 익히기

Optimizing

JavaScript SDK 성능개선 방법 - 압축과 최적화로 실행시간 단축하기 - LINE ENGINEERING

Redux

리덕스(Redux) 애플리케이션 설계에 대한 생각

리듀서 구조화하기 · Redux

리듀서 로직 분리하기 · Redux

Storybook

고통없는 UI 개발을 위한 Storybook | JBEE.io

Webpack

웹팩의 기본 개념

요즘 잘나가는 프론트엔드 개발 환경 만들기(2018): Webpack 4 : TOAST Meetup

JPA Java Persistence API

[JPA] JPA란 - Heee's Development Blog

Mapping

JPA 고급매핑 (4) – 머루의개발블로그

JPA 일대다 단방향 매핑 잘못 사용하면 벌어지는 일 - 뒤태지존의 끄적거림

영속성 전이 CASCADE – 머루의개발블로그

Cascadetype.REMOVE vs orphanRemoval = true : 네이버 블로그

라자루스의 개발 이야기 :: 하이버네이트 Hibernate ORM 스프링 Spring JPA 쓸 때 유의할 점

Linux

cp

cp 안될때: cp: omitting directory '디렉토리 이름'

다음과 같이 한다: $cp -r [복사 원본] [복사할 위치]

htop

Mount

How to transfer files from Windows to Ubuntu on Virtualbox? - Unix & Linux Stack Exchange

sudo mount -t vboxsf vb-ubuntu22s-share /media/vboxshared

Profiles

Flush bash_history after each command - All things sysadmin

Mac

Brew

[맥 유틸리티] Brew Cask - 커맨드라인에서 어플을 설치하자!

Font

Deprecated?: Improve Visual Studio Code font aliasing on macOS Mojave : vscode

Installations

Nodejs (pkg 파일) https://nodejs.org/ko/download/releases/

Python 3 https://www.python.org/downloads/

HomeBrew 로 OpenJDK 깔기 https://findstar.pe.kr/2019/01/20/install-openjdk-by-homebrew/

iTerm2 https://www.iterm2.com/

Oh My Zsh https://medium.com/harrythegreat/oh-my-zsh-iterm2로-터미널을-더-강력하게-a105f2c01bec

3024 Night Color Scheme https://jojoldu.tistory.com/428 wget https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/3024%20Night.itermcolors

Slack https://slack.com/intl/en-kr/downloads/instructions/mac

Git brew install git

Visual Studio Code https://code.visualstudio.com/

Keybindings

mac에서 backtick을 편하게 칩시다.

본격 macOS에 개발 환경 구축하기

M1 Mac에서 우분투 가상머신 설치 - 이불색 하늘

맥에서 SwitchResX를 이용해 FHD 외장모니터 선명하게 보기 | by 유태건 | Medium

Network

네트워크는 왜 이렇게 생긴걸까? 기본편 : 클리앙

CORS Cross-Origin Resource Sharing

교차 출처 리소스 공유 (CORS) - HTTP | MDN

CORS에서 이기는 방법 | TOAST UI :: Make Your Web Delicious!

Endianness

c - byte order conversion for signed integer - Stack Overflow

Hypertext Transfer Protocol

Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’

웹을 지탱하는 기술

OAuth 1.0

oauth - Do we really need "oauth_nonce"? - Stack Overflow

OSI 7 Layer and TCP 5 Layer

Notes on the 5-Layer and 7-Layer Models of Interconnection

OSI model on wikipedia

WebSocket

on Wikipedia

Intro to WebSockets with Spring

WebSocket을 이용하여 클라이언트 애플리케이션 작성하기

Spring WebSocket 소개

Web on Servlet Stack | WebSocket

Getting Started · Using WebSocket to build an interactive web application

websocket.org | Echo Test

Node.js

npm Node package manager

Error: EPERM: operation not permitted on npm 5.4 on windows #18380

npx

[npm] 🤔npx란 무엇인가?

with TypeScript

Part 1. Project initial setup: Typescript + Node.js

Application Architecture

견고한 node.js 프로젝트 설계하기

PHP

템플릿에서 if else 사용하기

템플릿을 사용하는 쪽

$tpl = new Template($config[full_path] . "training/template/request_form.html");
// $tpl = new Template("./template/request_form.html");
$tpl->set_item("name", $name);
$tpl->set_item("email", "eomhy@osci.kr");
$tpl->set_item("flag", true);

템플릿

{if:template_test_bool(true)}
<span class="btn_confirm"><i class="material-icons">&#xE150;</i><input type="button" name="btn_save" id="btn_save" value="등록" /></span>
{else:template_test_bool}
<span class="btn_confirm"><i class="material-icons">&#xE150;</i><input type="button" name="btn_save" id="btn_save" value="결제" /></span>
{/if:template_test_bool}
{if:flag(true)}True
{else:flag}False
{/if:flag}

// {if:flag} 식으로는 사용 불가! if-else가 작동하지 않고 if 와 else 가 동시에 출력된다

Programming Languages

함수형 프로그래밍 언어 3대장

Lambda Calculus에 대해 알아보자 - 컬리 기술 블로그

Python

Code Faster with Line-of-Code Completions, Cloudless Processing

A C & Python chained assignment gotcha

5 Different Meanings of Underscore in Python

python:memento [L.Pointal]

autopep8

Skip formatting of a block in a file · Issue #460 · hhatto/autopep8

Visual Studio Code

Using Python Environments in Visual Studio Code

[Python] VS Code에서 Python lint 적용하기 결론 : autopep8 + pycodestyle

How to enable Python type checking in VSCode 결론 : "python.analysis.typeCheckingMode": "basic"

Advanced Visual Studio Code for Python Developers – Real Python

React

Book

React 톺아보기 - 01. Preview | Deep Dive Magic Code

Your Guide to React.useCallback()

react/README.md at main · typescript-cheatsheets/react

Why Do React Elements Have a $$typeof Property? — Overreacted

The Perils of Rehydration: Understanding how Gatsby/Next manage server-side rendering and rehydration

How to fetch data with React Hooks?

Next.js 무한 스크롤 이슈에 Route as Modal 접목시키기 | by Sh031224 | 원티드랩 기술 블로그 | Medium

[React] 컴포넌트 렌더링 성능 최적화 Tip (Hook을 사용할 때)

Component

getDerivedStateFromProps: This method exists for rare use cases where the state depends on changes in props over time.

You Probably Don't Need Derived State

React - changing an uncontrolled input

[React] 4. Component Life Cycle | FELog: 코멘트: componentWillMount는 쓸모가 없다.

What will happen if I use setState() function in constructor of a Class in ReactJS or React Native? - Stack Overflow

javascript - ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled - Stack Overflow

Context

Context - React

리액트 16.3 에 소개된 새로워진 Context API 파헤치기

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

Hooks

핀다에서 쓰는 React Custom Hooks. + Custom Hooks로 적합한 것과 그렇지 않은 것 | by Kwoncheol Shin | FINDA 기술블로그 | Medium

[React] 리액트 훅이 실패한 설계인 이유 네가지 · 천종희 기술 블로그

JSX

Use ternaries rather than && in JSX

PureComponent

Stateless Component vs Pure Component

리액트(React) 이해 기초 - Component vs PureComponent vs Functional Component

리액트 성능 향상 시키기 - React.PureComponent

Refs

Refs and the DOM – React

Lifting State Up – React

React and Redux: Using state or refs?

https://twitter.com/dan_abramov/status/1011238901254639616

Server-side Rendering

Next.js - 서버 사이드 렌더링 프레임워크

카카오페이지 웹 React 포팅 후기

react-router :: 3장. 서버사이드 렌더링

setState

setState() 는 await와 사용이 가능할까?. 클라이언트 측에서 보내는 2가지 요청이 있다. 첫번째는 맥주를 달라는… | by 김토성 | Medium

Style Guide

Don't Use Bind When Passing Props

Styling

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components

SyntheticEvent

SyntheticEvent

Top-Level API

React Top-Level API – React

TypeScript

Props of "div": React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

React Libraries

Immer

The Rise of Immer in React (번역). (원문… | by Kim Seungha | Front-end 번역 뉴스레터 | Medium

Material-UI

TextField detect enter (or other) key · Issue #5393 · mui-org/material-ui

Style Library Interoperability - Material-UI

MobX

MobX with React | DailyEngineering

rc-progress

React Router

reactjs - How to push to History in React Router v4? - Stack Overflow

react-router/history.md at master · ReactTraining/react-router

react-router/withRouter.md at master · ReactTraining/react-router

reactjs - Detect Route Change with react-router - Stack Overflow

Pass props to a component rendered by React Router

render accepts a functional component and that function won’t get unnecessarily remounted like with component.

<Route
  path='/dashboard'
  render={(props) => <Dashboard {...props} isAuthed={true} />}
/>

React Table

V6: See Server-side Rendering.

V6: 칼럼에 없는 id로 소트할 경우, 소트 id가 칼럼 id이기 때문에, defaulSorted가 동작하지 않음.

Headless User Interface Components - Merrick Christensen - Medium

Redux

Alternatives

리덕스 잘 쓰고 계시나요? - 리디주식회사 RIDI Corporation

redux-toolkit

Redux Toolkit을 사용하여 간단하게 상태 관리하기 | 기억보다 기록을

Troubleshooting

Could not find "store" in the context of "Connect(LoadStatus)".

Provider · React Redux

<ReactReduxContext.Consumer>
  {({ store }) => { // do something with the store here }}
</ReactReduxContext.Consumer>

reactjs - ReactReduxContextValue while trying to access dispatch type error - Stack Overflow

onClick={() => {
  store.dispatch(
    toggleTheme({
      payload: store.getState().themeState.darkMode,
      type: EThemeActionTypes.TOGGLE
    })
  )
	}}

node.js - Passing Redux store in props - Stack Overflow

Don't pass the store instance to <App>. That does nothing, and React-Redux v6 is warning you about that.

Connect로 감쌌을 때 ref가 작동하지 않음!

해결:

Step5 = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  { forwardRef: true }
)(Step5);

Zustand

React 상태 관리 라이브러리 Zustand의 코드를 파헤쳐보자 | TOAST UI :: Make Your Web Delicious!

Regular Expression

정규표현식 | 프로그래머스

Remote

CodePair — Best approach for remote technical interviews

VS Code를 웹 상에 띄워놓고 어디서든 코딩하기

Sass

[번역] Sass에서 웬만하면 extend 말고 믹스인을 사용하자

Sass Guidelines — Korean translation

Interpolation

Sass Variable in CSS calc() function

Selenium

ChromeDriver in WSL2 | Greg Brisebois

Service Architectures

BFF Backend for Frontend

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

BFF(Backend for Frontend) 란?

카카오뱅크는 어떻게 MySQL로 데이터 유실을 막았을까 - Byline Network

Spring

Annotation

Spring Transactional 설정 및 주요속성

Spring Data JPA

Spring REST API 문서를 Swagger로 만들자

[Spring] 빈 생성 에러 디버그 Error creating bean with name 'XXX'

No plugin found for prefix ''spring-root' in the current project error after I install two updates in STS

Maven- No plugin found for prefix 'spring-boot' in the current project and in the plugin groups

Etc

CORS support in Spring Framework

Spring Boot Bean

[Spring] Spring Bean의 개념과 Bean Scope 종류 - Heee's Development Blog

[Spring Boot] 스프링 Bean 컨테이너의 역할

Testing

누구나 테스트 주도 개발 당장 시작 할 수 있는 방법 - Dev Story of Sungdoo

TypeScript

What's New in TypeScript

(TS 2.0) What's new in TypeScript · microsoft/TypeScript Wiki

With Redux

Typing Action

TypeScript 최신 기능을 활용한 Redux 액션 타이핑 - Kim Seungha - Medium
vs
aikoven/typescript-fsa: Type-safe action creator utilities
vs
mgerasika/typescript-actions: Typescript actions/reducers based on classes

Typing

TypeScript 3.4: const assertion - Kim Seungha - Medium

Utility Types · TypeScript

안전한 any 타입 만들기 | overcurried

Typescript로 Local Storage 안전하게 사용하기 | 뱅크샐러드

Type System

공변성이란 무엇인가 / seob.dev

동적 타입 시스템은 더 개방적인 시스템이 아닙니다 | donghwi :: Pizza -> Code (깨짐)

타입스크립트의 타입가변성

[번역] 두려움, 믿음, 그리고 자바스크립트 - 언제 타입 시스템과 함수형 프로그래밍이 먹히지 않는가 | rinae's devlog

3분 모나드 | overcurried

User Interface

Building a Settings component

인필드 상단 정렬 라벨이 플로팅 라벨보다 좋은 이유

True lies of Optimistic UI - 옵티미스틱 UI의 계산된 거짓말

Visual Center | Find the visual center of your images

Windows

Powershell

node.js - How can I set NODE_ENV=production on Windows? - Stack Overflow

Windows Sandbox

Windows Sandbox - Microsoft Tech Community

WSL, Windows Subsystem for Linux

ubuntu - apt-get install is not working in WSL - Super User

VSCode Remote Slow Ring ECONNREFUSED

WSL2(Windows Subsystem For Linux 2)으로 윈도우에 우분투 설치하기 | by Dookyoon Han | networkdefines | Medium

WSL2: Process cannot access the file because it is being used by another process · Issue #6415 · microsoft/WSL

Writing

개발자들을 위한 테크니컬 라이팅 10계명 #기술문서작성법#개발자글쓰기 #테크니컬라이터

기술문에서 우리말 숫자 쓰기

글쓰기 온라인 콘텐츠 - 서울대학교 교수학습개발센터

엔지니어를 위한 글쓰기 · GitHub


profile
프론트엔드 엔지니어

0개의 댓글