김태곤
FE로 취업하기 전에
알았으면 좋았을 것들
Hard Skills and Soft Skills

...누구세요?
2002년부터 개발자, 2006년부터 프론
트엔드 개발 / 네이버 다니면서 에디터
와 프레임워크도 만들고 XE라는 오픈
소스도 하고 / Fancy와 Automattic이
라는 기업에서 10년째 리모트로 일하
고 있고 / 강연과 번역도 틈틈이 하며
프론트엔드 업계를 오랫동안 떠돌고
있는 개발자입니다.

능력 = Hard Skills + Soft Skills

시간 위를 걷는 프로그래밍
Programming over time

좋은 코드의 조건1:
테스트가 용이할 것

1 const button = document.getElementById( 'button' );
2 button.addEventListener(
3 'click',
4 () => {
5 fetch( '/api/user-info' )
6 .then( ( response ) => response.json() )
7 .then( ( json ) => {
8 const panel = document.getElementById( 'panel' );
9 panel.innerText = `User: ${ json.userName }`;
10 } );
11 },
12 false
13 );

1 const button = document.getElementById( 'button' );
2 button.addEventListener(
3 'click',
4 () => {
5 fetch( '/api/user-info' )
6 .then( ( response ) => response.json() )
7 .then( ( json ) => {
8 const panel = document.getElementById( 'panel' );
9 panel.innerText = `User: ${ json.userName }`;
10 } );
11 },
12 false
13 );

() => {
fetch( '/api/user-info' )
.then( ( response ) => response.json() )
.then( ( json ) => {
const panel = document.getElementById( 'panel' );
panel.innerText = `User: ${ json.userName }`;
} );
},
const button = document.getElementById( 'button' );
button.addEventListener(
'click',
false
);

const button = document.getElementById( 'button' );
button.addEventListener('click', () => fetchUserInfo(displayUserInfo), false);
function fetchUserInfo(callback) {
fetch( '/api/user-info' )
.then( ( response ) => response.json() )
.then( callback );
}
function displayUserInfo(json) {
const panel = document.getElementById( 'panel' );
panel.innerText = `User: ${ json.userName }`;
}

좋은 코드의 조건2:
읽기 쉬울 것

안 좋은 함수 이름: processData, clear, reset
추천하는 이름: normalizeResponseData, splitBookDataByCategory
(단, form.reset과 같이 컨텍스트가 주어진 형태라면 괜찮음)

window.addEventListener('DOMContentLoaded', () => {
const 버튼 = document.getElementById( 'button' );
버튼.addEventListener('click', () => 사용자정보_가져오기(사용자정보표시), false);
function 사용자정보_가져오기(콜백함수) {
fetch( '/api/user-info' )
.then( ( response ) => response.json() )
.then( 콜백함수 );
}
function 사용자정보표시(json) {
const 패널 = document.getElementById( 'panel' );
패널.innerText = `User: ${ json.userName }`;
}
});
window.addEventListener("DOMContentLoaded",(()=>{function e(e)
{document.getElementById("panel").innerText=`User: ${e.userName}`}
document.getElementById("button").addEventListener("click",(()=>{return

window.addEventListener('DOMContentLoaded', () => {
const 버튼 = document.getElementById( 'button' );
버튼.addEventListener('click', () => 사용자정보_가져오기(사용자정보표시), false);
function 사용자정보_가져오기(콜백함수) {
fetch( '/api/user-info' )
.then( ( response ) => response.json() )
.then( 콜백함수 );
}
function 사용자정보표시(json) {
const 패널 = document.getElementById( 'panel' );
패널.innerText = `User: ${ json.userName }`;
}
});
window.addEventListener("DOMContentLoaded",(()=>{function e(e)
{document.getElementById("panel").innerText=`User: ${e.userName}`}
document.getElementById("button").addEventListener("click",(()=>{return
n=e,void fetch("/api/user-info").then((e=>e.json())).then(n);var n}),!
1)}));

테스트 코드는
가능한 부분부터 작성하자.

한 커밋에는 한 가지 문제만.
추적 가능하게 유지해주세요

실험은 한 번에 하나씩만.
고생 = (학습+프로젝트) x 2

나만의 학습 루틴을 만들어두자.
어차피 평생 공부해야 합니다.

대체로, 옳은 기술은 없다.
상황에 따른 선택이 있을 뿐.

프론트엔드 개발자는
절반쯤은 UX 전문가가 되어야 한다.
코드 너머에 사용자 있어요

풀스택 엔지니어링 지식은 익히되
풀스택 엔지니어를 지향하지는 말자.
하나 잘하기도 점점 더 어려워지고 있다.
전문 분야를 가지자.

'안 된다'는 말은 그만.
시간과 돈을 앞세우자

거절의 3단계
숙고 / 대안 제시 / 이득

이직은 늘 준비하는 것

이직할 때 볼 것: 커리어, 연봉, 워라벨

커리어 = 시간 + 스토리

성과급/복지보다는 연봉

가능하다면, 자신의 기술이
메인으로 사용되는 회사로 가는 게 좋다.

뱀의 머리보다는 용의 꼬리가 낫다.
하드캐리할 자신 있으면 예외

호인과 호구는 다르다
니 컴퓨터 안 고쳐줘요

독서하듯 코드를 읽자
많이 읽어야 잘 쓸 수 있다

문제는 시스템으로 예방하자
Linter, Formatter, TypeScript, SCM...

Repeat Yourself
좋은 반복도 있다

Divide and Conquer
작게 나누어 정복하라

질문에도 기술이 있다
구글의 15분 규칙

출처: Reddit r/MachineLearning

시간은 금이다.
시간은 돈 주고 사라는 뜻

너무 열심히 안 살아도 된다.

전문가 얘기 너무 많이 듣지 말자.
내 문제는 내가 제일 잘 안다

감사합니다.
더 궁금한 부분이 있다면 아래로!
taegon.kim / @taggon