프론트엔드 개발에 광범위하게 관련된 읽을거리 모음입니다. 2018년 부터 작성했으며 80% 정도는 읽어보았고, 20%는 아직 읽지 않은 것도 있습니다. 주로 레퍼런스, 블로그 포스트, Stack Overflow 답변, 특정 기능 구현 가이드들로 이뤄져 있습니다.
개발할 때 사용하는 컨닝페이퍼(치트시트)를 만들어보니 다시 찾아보기가 편리했습니다. 처음엔 구글 독스로 작성했으나, 코드 블록과 인라인 코드를 쓰기 위해 노션으로 재작성하고, 블로그를 만들고 나서 옮겨왔습니다.
컨플루언스는 전체 히스토리가 남지만 수정하기는 번거롭고, 유지비가 들어가므로 블로그 플랫폼을 이용하는 게 좋은 것 같습니다.
자신에게 필요한 것을 찾아보면서 프로그래밍을 하세요. - opentutorials.org
A Short Guide to Hard Problems | Quanta Magazine
Shtetl-Optimized » Blog Archive » Eigenmorality
C/C++에서 복잡한 선언문 이해하기 | public static : 한글로 쓰였다.
C언어 복잡한 선언문 해석 방법 : 이것도 한글로 쓰였다.
HTML 질문 | Front End Interview Handbook
개발자를 위한 SSD (Coding for SSD) – Part 1 : 목차 – tech.kakao.com
역사로 알아보는 CSS가 어려워진 이유: ②CSS in JS와 Atomic CSS | 요즘IT
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블로그
CSS 방법론 (1) — BEM (Block Element Modifier) – Witinweb – Medium
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)
[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉 :: 잡다한 개발 블로그
Bulma vs Tailwind. 부트스트랩이 CSS 프레임워크계를 평정을 하고나서 2019년 CSS… | by Kiyoung Jung | Medium
CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유 | bono blog
Stitches — CSS-in-JS with near-zero runtime
수직 중앙 정렬
flexbox 만세!
2 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)
flex-grow, flex-shrink, flex-basis를 친절하게 설명해준다.
CSS3 Grid, Flex, Position Layout 정리 – 이봉 – Medium
CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align | WIT블로그
CSS 그리드 레이아웃을 지금 사용해도 정말 괜찮을까 - WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보
css - Apply style ONLY on IE - Stack Overflow
CSS3 - How to target only IE, Firefox, Chrome, Safari
Does repeating a classname in a CSS rule increase its priority? - Stack Overflow
table-layout: auto;
html - Can I use a min-height for table, tr or td? - Stack Overflow
개발자가 처음 Docker 접할때 오는 멘붕 몇가지 | Popit
CRA typescript 프로젝트에서 emotion이 css prop으로 적용이 안될 때 해결 법 — 무던하게 꾸준하게
당신이 보는 게임 화면은 진짜가 아니다...gif-[중세게임] 갤러리 커뮤니티 포털 -디시인사이드
Serverless로 E-Commerce 만들기 / 블랙프라이데이 트래픽 썰 / 스타트업에서 CTO는 뭘 하는 자리인가?
Wonjae Kim | Exploiting Contemporary ML
전역 상태 관리에 대한 단상 (stale-while-revalidate) | JBEE.io
Why Engineers Cannot Estimate Time | by Hesham Meneisi | The Startup | Medium
여러분의 CS 교육에서 누락된 학기 · the missing semester of your cs education
무기력한 도메인 객체 — Anemic Domain Model | by Las | Medium
새로 입사한 개발자가 프로젝트에 기여하는 방법 한 가지 - 컬리 기술 블로그
토스에서의 시간을 돌아보며 | Evans Library
Hard things in Computer Science
Your calendrical fallacy is thinking…
2021년도 개발자 에코시스템 현황 인포그래픽 | JetBrains: Developer Tools for Professionals and Teams
프론트엔드 개발자에게도 알고리즘 공부가 중요할까? | 요즘IT
draw.io → export to xml
Finite State Machine Designer - by Evan Wallace
What is version control | Atlassian Git Tutorial 아틀라시안의 깃 튜토리얼이다. 초심자는 목차에서 Learn Git 부분은 버리고 Beginner 부분부터 Getting Started까지 읽으면 기초적인 부분은 다 배울 수 있을 듯 하다.
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)
How to Write a Git Commit Message (2014) | Hacker News
Commit Message Driven Development | Sven Hofmann
How to Write a Git Commit Message
git은 폴더경로가 변경된 것을 어떻게 알 수 있을까? - Kwoncharles Blog
Git commit 파일명 대소문자 인식. 어젯밤 퇴근하기 직전, 작업한 내용을 bitbucket에 commit… | by Hoyeon Kim | Medium
잘 밤에 쓸데없는 생각하기... / Git flow, GitHub flow, GitLab flow
How to list all commits that changed a specific file?
git log -p filename
[Git] git stash 명령어 사용하기 - Heee's Development Blog
GitHub 접속 용 SSH 키 만드는 방법 - LainyZine
URL: https://github.com/:owner/:repo/commits/:branch
Query Strings:
GitHub Help | GitHub Pages Basics
2016-02-18-Github-page로-블로그-만들기.md
[한국어 번역] 깃허브 페이지(GitHub Pages)에 SPA 배포/호스팅 하기
[하스켈/번역]그림으로 설명하는 펑터, 어플리커티브, 모나드 : 네이버 블로그
Making Elements Focusable with Tabindex - Snook.ca
html - What's the difference between <b> and <strong>, <i> and <em>? - Stack Overflow
HTML Tips - Marko Denic - Web Developer
웹접근성(Web Accessibility) | 웹접근성과 웹표준
터치와 클릭, 우리 깐부잖아. | TOAST UI :: Make Your Web Delicious!
<input type="tel"> - HTML: Hypertext Markup Language
| MDN
<section> 버리고 HTML5 <article> 써야 하는 이유
- WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보
<hr />
html - Changing the color of an hr element - Stack Overflow
내 웹사이트를 슬랙에서 돋보이게 해줄 메타 태그 8가지 | 요즘IT
Annotations “not applicable to type”
[Java] @Override 어노테이션의 사용 – GIS Developer
OKKY - 왜 service 개발시 항상 impl 인터페이스를 만드나요?
Spring OOP - Service, ServiceImpl 구조에 대한 고찰
Beginner Java Question about Integer.parseInt() and casting - Stack Overflow
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).
자바스크립트는 어떻게 작동하는가: 웹소켓 및 HTTP/2 SSE – Huiseoul Engineering
JavaScript for impatient programmers (ES2021 edition)
모던 JavaScript 튜토리얼 : 강추!!
안티 패턴 | TOAST UI :: Make Your Web Delicious!
자바스크립트는 무엇으로 구성되어 있을까? | TOAST UI :: Make Your Web Delicious!
JavaScript 클로저(Closure) | DailyEngineering
[React] 5단계로 보는 리액트 폴더구조 :: Simple is Beautiful.
(번역) 자바스크립트 엔진이 뛰어난 성능을 달성하는 방법
ParkSB/javascript-style-guide: Airbnb JavaScript 스타일 가이드
다음 두 예제는 비구조화(구조 파괴, 패턴 매칭)와 디폴트 파라미터를 섞어서 동시에 사용한다. 그러나 결과는 다르다.
> 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
>
> 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의 심볼, 이터레이터, 제네레이터에 대해 알아보자
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
e.stopPropagation()
Check the value is function (instanceof Function
)
maybeFunction instanceof Function // true or false
javascript - Requesting blob images and transforming to base64 with fetch API - Stack Overflow
링크에서 Type Application, Record 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
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
.}
}
Stop Using Atomic Design Pattern | JBEE.io
[번역] async/await 를 사용하기 전에 promise를 이해하기
encodeURIComponent() - JavaScript | MDN
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
javascript - Convert Array to Object - Stack Overflow
I think React is a big deal because we can finally think of UIs as pure function... | Hacker News
[발표 정리] 복잡한 백오피스에서 Form의 상태 다루기 | rinae's devlog
javascript - Babel es2015 presets doesn't translate Map and Set to es5 - Stack Overflow
Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까?
Adding Sass to Create React App Applications ― Scotch.io
CRA(Create React App)에 tslint, eslint, prettier 적용하기 - 이상한모임
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
트위터의 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! - 도메인 주도 설계 구현과 핵심 개념 익히기
JavaScript SDK 성능개선 방법 - 압축과 최적화로 실행시간 단축하기 - LINE ENGINEERING
고통없는 UI 개발을 위한 Storybook | JBEE.io
요즘 잘나가는 프론트엔드 개발 환경 만들기(2018): Webpack 4 : TOAST Meetup
[JPA] JPA란 - Heee's Development Blog
JPA 일대다 단방향 매핑 잘못 사용하면 벌어지는 일 - 뒤태지존의 끄적거림
Cascadetype.REMOVE vs orphanRemoval = true : 네이버 블로그
라자루스의 개발 이야기 :: 하이버네이트 Hibernate ORM 스프링 Spring JPA 쓸 때 유의할 점
cp 안될때: cp: omitting directory '디렉토리 이름'
다음과 같이 한다: $cp -r [복사 원본] [복사할 위치]
How to transfer files from Windows to Ubuntu on Virtualbox? - Unix & Linux Stack Exchange
sudo mount -t vboxsf vb-ubuntu22s-share /media/vboxshared
Flush bash_history after each command - All things sysadmin
[맥 유틸리티] Brew Cask - 커맨드라인에서 어플을 설치하자!
Deprecated?: Improve Visual Studio Code font aliasing on macOS Mojave : vscode
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/
맥에서 SwitchResX를 이용해 FHD 외장모니터 선명하게 보기 | by 유태건 | Medium
교차 출처 리소스 공유 (CORS) - HTTP | MDN
CORS에서 이기는 방법 | TOAST UI :: Make Your Web Delicious!
c - byte order conversion for signed integer - Stack Overflow
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’
oauth - Do we really need "oauth_nonce"? - Stack Overflow
Notes on the 5-Layer and 7-Layer Models of Interconnection
Intro to WebSockets with Spring
WebSocket을 이용하여 클라이언트 애플리케이션 작성하기
Web on Servlet Stack | WebSocket
Getting Started · Using WebSocket to build an interactive web application
Error: EPERM: operation not permitted on npm 5.4 on windows #18380
Part 1. Project initial setup: Typescript + Node.js
템플릿을 사용하는 쪽
$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"></i><input type="button" name="btn_save" id="btn_save" value="등록" /></span>
{else:template_test_bool}
<span class="btn_confirm"><i class="material-icons"></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 가 동시에 출력된다
Lambda Calculus에 대해 알아보자 - 컬리 기술 블로그
Code Faster with Line-of-Code Completions, Cloudless Processing
A C & Python chained assignment gotcha
5 Different Meanings of Underscore in Python
Skip formatting of a block in a file · Issue #460 · hhatto/autopep8
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 톺아보기 - 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
How to fetch data with React Hooks?
Next.js 무한 스크롤 이슈에 Route as Modal 접목시키기 | by Sh031224 | 원티드랩 기술 블로그 | Medium
[React] 컴포넌트 렌더링 성능 최적화 Tip (Hook을 사용할 때)
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는 쓸모가 없다.
리액트 16.3 에 소개된 새로워진 Context API 파헤치기
다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법
[React] 리액트 훅이 실패한 설계인 이유 네가지 · 천종희 기술 블로그
Use ternaries rather than && in JSX
Stateless Component vs Pure Component
리액트(React) 이해 기초 - Component vs PureComponent vs Functional Component
리액트 성능 향상 시키기 - React.PureComponent
React and Redux: Using state or refs?
https://twitter.com/dan_abramov/status/1011238901254639616
setState
setState() 는 await와 사용이 가능할까?. 클라이언트 측에서 보내는 2가지 요청이 있다. 첫번째는 맥주를 달라는… | by 김토성 | Medium
Don't Use Bind When Passing Props
다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components
리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components
Props of "div": React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
The Rise of Immer in React (번역). (원문… | by Kim Seungha | Front-end 번역 뉴스레터 | Medium
TextField detect enter (or other) key · Issue #5393 · mui-org/material-ui
Style Library Interoperability - Material-UI
MobX with React | DailyEngineering
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} />}
/>
V6: See Server-side Rendering.
V6: 칼럼에 없는 id로 소트할 경우, 소트 id가 칼럼 id이기 때문에, defaulSorted가 동작하지 않음.
Headless User Interface Components - Merrick Christensen - Medium
리덕스 잘 쓰고 계시나요? - 리디주식회사 RIDI Corporation
Redux Toolkit을 사용하여 간단하게 상태 관리하기 | 기억보다 기록을
Could not find "store" in the context of "Connect(LoadStatus)".
<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);
React 상태 관리 라이브러리 Zustand의 코드를 파헤쳐보자 | TOAST UI :: Make Your Web Delicious!
CodePair — Best approach for remote technical interviews
[번역] Sass에서 웬만하면 extend 말고 믹스인을 사용하자
Sass Guidelines — Korean translation
Sass Variable in CSS calc() function
ChromeDriver in WSL2 | Greg Brisebois
카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?
카카오뱅크는 어떻게 MySQL로 데이터 유실을 막았을까 - Byline Network
Spring Transactional 설정 및 주요속성
Spring REST API 문서를 Swagger로 만들자
[Spring] 빈 생성 에러 디버그 Error creating bean with name 'XXX'
Maven- No plugin found for prefix 'spring-boot' in the current project and in the plugin groups
CORS support in Spring Framework
[Spring] Spring Bean의 개념과 Bean Scope 종류 - Heee's Development Blog
[Spring Boot] 스프링 Bean 컨테이너의 역할
누구나 테스트 주도 개발 당장 시작 할 수 있는 방법 - Dev Story of Sungdoo
(TS 2.0) What's new in TypeScript · microsoft/TypeScript Wiki
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
TypeScript 3.4: const assertion - Kim Seungha - Medium
Typescript로 Local Storage 안전하게 사용하기 | 뱅크샐러드
동적 타입 시스템은 더 개방적인 시스템이 아닙니다 | donghwi :: Pizza -> Code (깨짐)
[번역] 두려움, 믿음, 그리고 자바스크립트 - 언제 타입 시스템과 함수형 프로그래밍이 먹히지 않는가 | rinae's devlog
True lies of Optimistic UI - 옵티미스틱 UI의 계산된 거짓말
Visual Center | Find the visual center of your images
node.js - How can I set NODE_ENV=production on Windows? - Stack Overflow
Windows Sandbox - Microsoft Tech Community
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
개발자들을 위한 테크니컬 라이팅 10계명 #기술문서작성법#개발자글쓰기 #테크니컬라이터