그래서 앞으로는 아래의 기준으로 책을 평가하고자 한다. 더 좋은 책을 만들고, 읽을 수 있는 데 도움이 되기를! 별점은 총 5점이 만점이다. 난이도의 경우, 별점이 높을수록 어렵다.

1. 문맥, 설명이 매끄럽고 읽기 좋은지?
2. 예제 코드가 풍부하고 적당한지?
3. 컨텐츠가 유용한지?
4. 그래프, 이미지가 적절하고 이해를 돕는지?
5. 전체적인 책의 난이도는?

Vue.js 입문

1. 문맥과 설명 ⭐️⭐️⭐️⭐️⭐️
2. 예제 코드 ⭐️⭐️⭐️
3. 컨텐츠의 유용함 정도 ⭐️⭐️⭐️⭐️
4. 그래프나 이미지 ⭐️⭐️⭐️⭐️
5. 책의 난이도 ⭐️⭐️⭐️

이 책의 가장 좋은 점은 설명이 깔끔해서 이해하기가 정말 쉽다는 것. 캡틴 판교 님의 블로그 글 중 JS 관련 개념 글을 자주 봤던 터라 기대했는데, 역시 기대를 충족시켜주었다. 이미지 또한 이지스 퍼블리싱 책답게 보기 편하게 배치되어 있었고, 이미지가 많아서 '입문'이라는 책 이름 그대로 입문자들도 어렵지 않게 책의 흐름을 따라갈 수 있다. 그래프도 많아서 설명보다는 그래프로 이해하는 게 빠른 내가 보기에 너무 속이 편했다. 나 같은 독자들에게 추천.

컨텐츠는 목차를 보면 알 수 있겠지만, vue.js의 기본적인 개념 (인스턴스, 컴포넌트, 컴포넌트 통신...) → 처리 기술 (라우터, 통신, 템플릿, 이벤트처리) → Todo 어플리케이션 만들기 → 중급 지식 (webpack, ES6, npm) 순서로 되어있다. 딱 필요한 것들만 뽑아서 배운다는 느낌이었고, 그래서 양이 부담스럽지는 않았다. 그러나 이 책을 통해 처음으로 웹 프론트엔드 프레임워크를 배우는 사람이라면 초반의 리액트/앵귤러와의 비교가 그렇게 안 와닿을 수도 있다. 비유 자체를 이해하기 어려울 것 같다.

그런데 프론트엔드 쪽에서 널리 쓰이는 VS Code가 아니라 Atom을 IDE로 사용하는 점... 이 조금 아쉽긴 했다. 나는 Atom을 경험해봤던지라 어려움은 없었다. (살짝 어색할 뿐...) 또, 예제 코드의 폰트나 배치가 가독성이 떨어지는 점도 아쉽다. 여러모로 다른 웹 프레임워크, 라이브러리를 알고 있는 사람이 가볍게 vue.js는 어떤지 파악하기 좋은 책이었다.

핵심만 골라 배우는 SwiftUI 기반의 iOS 프로그래밍

1. 문맥과 설명 ⭐️⭐️⭐️⭐️
2. 예제 코드 ⭐️⭐️⭐️
3. 컨텐츠가 유용함 정도 ⭐️⭐️⭐️⭐️⭐️
4. 그래프나 이미지 ⭐️⭐️⭐️
5. 책의 난이도 ⭐️⭐️⭐️

SwiftUI를 처음 접하는 사람도 읽기 쉬울 만큼 단계적으로 구성되어 있는 게 이 책의 장점인 것 같다. 나 또한 이 책으로 처음 iOS 프로그래밍을 접했다. 흑백 책임에도 이미지가 적절하고, 예제 코드의 레이아웃도 가독성이 좋았다. 이 책이 다른 책보다 더 섬세하다고 느꼈던 부분은 Mac OS는 Windows에 비해 메뉴를 찾아가기가 어려운데, 어떤 메뉴를 선택할 때 그 깊이까지 설명해주는 부분이었다. (File → New → Playground… 형식으로 설명이 되어있다.) 그래서 상대적으로 Mac에 익숙하지 않은 사람이 iOS 프로그래밍을 시도해볼 때 더 도움이 될 것 같다.

하지만 번역책이기 때문에 한글 책보다는 문맥이 매끄럽지는 않다는 점이 아쉽고(그러나 다른 번역 책에 비하면 훌륭한 편), 문법 부분은 충분히 컨텐츠가 상세하지만 실습을 해보기는 어려운 짤막한 코드와 설명으로 되어 있다는 점, 예제 코드에 대해 넘버링/참조 등이 되어있지 않다는 점도 아쉬웠다. 여러모로 스위프트 “문법”에 입문하기 좋은 책이었다.

디자인, 이렇게 하면 되나요?

1. 문맥과 설명 ⭐️⭐️⭐️⭐️
2. 컨텐츠가 유용함 정도 ⭐️⭐️⭐️
3. 그래프나 이미지 ⭐️⭐️⭐️⭐️
4. 책의 난이도 ⭐️

디자인 책이기 때문에 별점 주는 기준을 조금 바꿨다. '디자인'에 대해 얕고 넓게 이해할 수 있도록 되어 있는 아주 아주 아주 쉬운 책이다. 디자인의 기본부터 레이아웃, 배색, 사진, 타이포그래피, 인쇄 제작 등 전반적인 지식이 담겨있다. 나는 프론트엔드이다 보니 디자이너인 직군과 대화할 일이 정말 많은데... 커뮤니케이션에 조금 도움이 됐다. 파트 별로 상세히 나누어져 있어 가끔 일하다가 남는 시간에 흥미로운 부분만 찝어 읽기에도 좋았다. 특히 흥미롭게 봤던 부분은 'Chapter 3 배색' 파트인데, 그동안 디자이너 없이 디자인까지 함께 진행했던 프로젝트들이 스쳐지나갔다. 로고나 포인트 컬러 등을 제작하면서 색 조합, 색이 가지는 이미지, 느낌 같은 것들에 대한 고민을 조금 해결할 수 있었다.

다른 책에 대한 회고록과 평점이 궁금하다면 여기나 여기에서 확인할 수 있다. 책을 무상으로 제공해준 UPF 활동에 대해 궁금하다면 여기를 참고하면 된다.

이 글은 2021 UNIT의 UPF에서 이지스 퍼블리싱, 제이펍 출판사의 후원으로 도서를 무상으로 제공 받아 자유롭게 작성한 서평입니다.

운영 방식 및 규칙

• 주 2회 (화, 목)에 약 한 시간 반 동안 진행
• HTML, CSS는 그때그때 필요한 지식을 학습 (멘티들의 의견대로 수업 내용이 진행됨)
• JS는 Try! HelloWorld JavaScript 책을 양을 정해서 학습
• 스터디 참여는 항상 자유
• 서스럼 없이 질문하고 자신이 모르는 것에 대해 부끄러워하지 않을 것

PPT 링크

• 05.25 - 스터디 시작에 앞서 몇 가지 조언과 DOM
• 05.27 - 좋은 마크업이란 무엇인지와 JS 문제 풀이
• 06.08 - 웹 브라우저 동작 방식과 W3Schools SlideShow 예제 풀이

useState

useState는 state를 추가해주는 Hook입니다. state는 화면 렌더링과 관련된 (변경되는) 데이터를 다룰 때 쓰입니다. 이는 곧 state를 바꾸면 컴포넌트가 리렌더링된다는 것을 의미합니다.

• 상태 변경 함수를 이용해서 state 값을 변경
• 하나의 useState Hook은 하나의 상태 값만 관리 가능

// 기본 형태
const [상태, 상태변경함수] = useState(초깃값);
const [hidden, setHidden] = useState(false);

useCallback

useCallback은 함수를 캐싱(또는 메모이제이션)할 때 사용하는 Hook입니다. 컴포넌트의 렌더링 성능을 최적화할 때 활용합니다. 두 번째 파라미터 값으로 들어가는 deps_(dependencylist)_ 배열이 비어있으면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속 재사용합니다. deps에 특정한 값이 있으면 그 값이 바뀔 때마다 함수를 새로 만들어 캐싱합니다. deps는 여러 개의 값을 가질 수 있고 useCallback은 이 값들을 계속 추적하면서 값이 바뀌는지 확인합니다.

• deps 값이 있으면 값이 바뀔 때만 함수를 새로 만들어서 캐싱
• deps 값이 비어있으면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속해서 재사용

메모이제이션이란?
메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다

const onClickButton = useCallback(() => {
  setHidden(true);
}, []);

useMemo

useMemo는 컴포넌트 내부에서 발생하는 연산을 최적화할 때 사용되는 Hook입니다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용합니다. useCallback과 마찬가지로 deps 배열이 존재하며 deps 배열 내부의 값이 달라지면 기존 캐싱된 것을 버리고 새로 값을 구하는 방식으로 실행됩니다.

const Basic = () => {
  const cachedNumbers = useMemo(() => getWinNumbers(), []);
  const [lottoNumbers, setLottoNumbers] = useState(cachedNumbers);
  return <div>{lottoNumbers.join(',')}</div>;
};

위의 코드의 경우 Basic 컴포넌트가 리렌더링되더라도 getWinNumbers가 다시 호출되지 않아 렌더링 성능을 최적화할 수 있습니다.

useMemo와 useCallback

useCallback(() => {}, []);
useMemo(() => 값, []);

• useCallback은 함수 자체를 캐싱하고, useMemo는 값을 캐싱 (값이 함수일 수도 있음)
• useMemo와 useCallback 형식이 유사

useRef

ref는 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 Hook입니다. (HTML의 id와 유사한 기능) 화면 리렌더링과 관련이 없는 컴포넌트 로컬 변수를 사용해야 할 때도 활용할 수 있습니다.

useEffect

useEffect는 클래스형 컴포넌트의 라이프사이클을 대체하는 Hook으로 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 설정할 수 있습니다. 뒷정리(cleanup) 함수를 return하면 컴포넌트가 언마운트되기 전에 지정한 작업을 수행할 수도 있습니다. (class형 컴포넌트에서 componentWillUnmount의 역할) 클래스형 컴포넌트의 라이프사이클과 다르게 컴포넌트 중심이 아닌 데이터 중심으로 실행됩니다.

1. deps 값이 있으면 그 값을 추적해서 값이 변경될 때 실행 (componentDidMount + componentDidUpdate)
2. 빈 배열을 넣으면 마운트 될 때 처음 한 번만 실행됨 (componentDidMount)
3. deps 값을 아예 넣지 않으면 리렌더링 될 때마다 실행 (componentDidUpdate)

useEffect(() => {
  console.log('hidden changed');
}, [hidden]);

(1) 위 코드는 컴포넌트가 첫 렌더링될 때 한 번 실행되고 hidden이라는 값이 바뀔 때마다 실행됩니다. (class형 컴포넌트에서 componentDidMount와 componentDidUpdate가 합쳐진 형태)

useEffect(() => {
  console.log('mounted');
  return () => {
    console.log('unmount');
  }
}, []); 

(2) 마운트 될 때 처음 한 번만 실행하는 코드입니다.

useEffect(() => {
  console.log('rerendered!');
});

(3) deps가 아예 주어지지 않은 상황으로 컴포넌트가 리렌더링 될 때마다 실행합니다.

useEffect(() => {
  console.log('hidden changed');
  return () => {
    console.log('hidden이 바뀔 예정입니다.');
  };
}, [hidden]); 

(4) 클린업 함수를 작성하면 componentWillUnmount의 역할도 담당할 수 있습니다.

useEffect가 클래스형 컴포넌트의 라이프사이클 메소드들과 연관되지 않아서 가장 이해하기 힘들고 헷갈렸는데 천천히 정리하고 나니 많이 도움이 됐다... 아직 활용 쪽에서는 실력이 부족하지만 계속해서 공부하면 언젠간 마스터할 수 있을 거라고 믿는다. 😼

Github를 돌아보다가 TDD에 관한 좋은 글을 발견했는데, 영어로 적혀있어 영어 reading 공부도 할겸, TDD에 대해 공부도 할겸 번역하기로 마음 먹었다! 🥳 한 번에 다 해석하기엔 글이 너무 길어서 조금씩 잘라 해석하기로 했다. 해석이 애매한 단어의 경우 괄호로 영어 원문을 달고, 문장을 의역한 경우 의역이라고 표기하도록 하겠다. 영어 번역 실력이 좋지 못해 매끄럽지 않아도 양해해주었으면 한다... 원글은 여기에서 볼 수 있다.

Learn Test Driven Development (TDD)

더 좋은 코드 (reliable code)를 작성하길 원하는 사람들을 위해 TDD in Javascript에 대한 짧은 소개를 하고자 한다.

Why?

_테스트 없이 만들어진 프로젝트_는 덕트 테이프로 묶은 것처럼 서로 엉켜 꼼짝할 수 없는 모습으로 끝나고는 한다.

한 파트를 바꾸면 다른 파트가 더 이상 작동하지 않을 때, 버그 하나를 "잡으면" 해결되는 문제일까? (의역)

만약 모든 코드가 일관적이고 아름답게 통합되어 있다면 좋지 않을까? 만약 당신의 팀에 속한 모두가 마치 시계 속 부품처럼 (clock-work) 잘 통솔된 명령에 의해 순서대로 일한다면... 마치 F1 엔지니어 크루처럼...

Test Driven Development (TDD)는 당신의 팀을 오일이 잘 발라진 머신처럼 만들어주며 이는 (목표를 향해) 더 빠르게 갈 수 있다는 것을 의미한다.

한 번 모든 변동 사항에 대해 실행되는 일련의 테스트를 거치면, 당신은 당신의 codebase에 대해 완전히 다른 수준의 자신감을 키울 수 있을 것이며 예측되지 않았던 어떤 것(오류)에 대해 “파괴”할 두려움 없이 창의적일 수 있는 새로운 자유를 발견하게 될 것이다; 진정한 _game-changing_이라고 할 수 있다.

game-changing : 전반적인 결과를 바꿀 수 있는 결정적인, 잠재력이 있는 것. (sports or figuratively) Critical and having the potential to alter the overall outcome.

What?

이 튜토리얼은 당신이 Test Driven Development (TDD)를 오늘 시작할 수 있도록 도와줄 것이다. 앞으로 30분 안에 당신의 웹 프로젝트를 위한 테스트를 작성하는 데 필요한 모든 것들을 배우게 될 것이다.

시작하기 전에 필요한 것들

• 웹 브라우저가 있는 컴퓨터
• 스타터 파일(starter files)을 다운받기 위한 인터넷 연결
• 당신의 소중한 30분
• 기본적인 프로그래밍 스킬 (HTML & JS)
• (Optional) 보너스 레벨을 수행하려면 Node.js도 설치되어 있어야 함

Software Testing이란 무엇인가?

소프트웨어 테스트는 소프트웨어 항목을 평가하여 예상 출력과 실제 출력 간의 차이를 탐지하는 프로세스입니다. 테스트는 제품의 품질을 평가합니다. 소프트웨어 테스트는 개발 프로세스 중에 수행해야 하는 프로세스입니다. 다시 말해 소프트웨어 테스트는 검증 및 검증 프로세스입니다.

원문을 번역하였으며 참고 자료를 첨부한다. (참고 자료 : IT 위키 정의, 소프트웨어 테스트 실무에 필요한 개념과 이해)

TDD란 무엇인가?

테스트 주도 개발(Test-driven development TDD)은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 개발자는 먼저 요구사항을 검증하는 자동화된 테스트 케이스를 작성한다. 그런 후에, 그 테스트 케이스를 통과하기 위한 최소한의 코드를 생성한다. 마지막으로 작성한 코드를 표준에 맞도록 리팩토링한다.

원문을 번역하지 않고 위키백과에 있는 한국어 정의를 가져왔다.

더 참고할 수 있는 자료들

• Software Testing - http://en.wikipedia.org/wiki/Software_testing
• "What is Software Testing" video (from 5:56 onwards) - https://youtu.be/UZy1Dj9JIg4?t=356
• Video intro to Software Development Lifecycle (from 0:52 onwards): https://youtu.be/qMkV_TDdDeA?t=52
• How to Write Clean, Testable Code - http://youtu.be/XcT4yYu_TTs (ignore the Java code focus on the general principles)
• What is software testing? by Rehman Zafar

다음 2편은 How? 파트와 Try It Yourself 파트로 돌아오겠다....... 😇

책의 내용과 구성에 대해

목차만 봐도 알 수 있겠지만 초반은 문법 위주, 후반은 함수형 프로그래밍 위주로 구성되어있다. 아직 책을 다 읽어보진 못했으나... 😹 어떤 개념에 대해 설명할 때 우선 코드부터 보여주는 방식으로 되어 있어서 그 부분이 가장 좋았다. 모든 설명에 타입스크립트 코드가 짤막하게라도 들어 있어서 코드가 좀 더 빨리 눈에 익는 느낌이다.

또 (나한테만) 좋았던 점은 번역체가 아니라는 점... 그래서 전반적으로 설명이 정말 군더더기 없이 깔끔하다. 타입스크립트는 특히 번역책이 많아서 얼마나 소중한지...

그리고 타입스크립트를 잘 사용하기 위해 꼭 필요한 문법과 라이브러리만 골라서 설명되어 있어서 좋았다. 이렇게 깔끔하게 나와 있는 입문 책은 쉽게 찾아보기가 힘들다.

난이도에 대해

그러나 기존에 자바스크립트만! 공부한 사람은 이 책으로 타입스크립트를 공부하기엔 조금 무리가 있을 것 같다. 나 같은 경우 자바, 파이썬, C++ 같은 객체지향 언어가 익숙해서 인터페이스, 제네릭 등 책에 나오는 개념들이 어렵지 않았지만 기존 지식이 없다면 책의 설명만으로는 완벽히 이해하기 어려울 듯하다. 특히 객체지향 언어의 경우 입문이 제일 어렵기 때문에... (아니 그래서 왜 객체로 표현하는데???? 를 30번 반복해야 객체지향에 대해 이해할 수 있음 😹😹)

그러므로 객체지향 언어에 대해서도 알고 있고, 자바스크립트 또한 ES6 문법이나 개념 등에 대해 알고 있는 사람들에게 추천한다. 애초에 타입스크립트 자체가 진입 장벽이 있는 것 같긴 하지만... 💦 선수 지식이 충분하다면 이 책의 깔끔한 설명이 아주 마음에 쏙 들 듯!

개인적인 평점은 ⭐️⭐️⭐️⭐️

드림 코더 '엘리'님의 JS ES6 강의를 들으면서 타입스크립트에 대해 호기심이 생겨 이 책으로 처음 타입스크립트를 접하게 되었는데... JS를 처음 배울 때는 "뭐양 파이썬 같네 😸" 했었고 그래서 쉽게 배울 수 있었다면 타입스크립트는 "뭐야 자바잖아...?" 로 요약할 수 있을 듯하다. 그만큼 JS의 유연함을 보완하고 있는 언어 같달까? 기존의 다른 언어를 배운 프로그래머들에게 딱!! 익숙한 만큼의 strict가 있는 것 같다.

다른 책에 대한 회고록과 평점이 궁금하다면 여기에서 확인할 수 있다. 책을 무상으로 제공해준 UPF 활동에 대해 궁금하다면 여기를 참고하면 된다.

이 글은 2021 UNIT의 UPF Project에서 이지스 퍼블리싱 출판사의 후원으로 도서를 무상으로 제공 받아 자유롭게 작성한 서평입니다.

앞으로 3개월 동안 오프라인에서 만나 JS, React를 공부하여 프로젝트를 하는 것을 목표로 세 명이서 노력하기로 했다. 😼 서로 다른 분야의 세 명의 개발자(라고 부르기엔 나만 초짜...)가 모여 시작해 앞으로 재미있는 시간이 될 것 같다.

JS 공부 방법

JS는 우선 드림 코딩 자바스크립트 기초 (ES5+) by 엘리 라는 유튜브 무료 강의를 수강하고, 코딩 테스트를 대비하기 위해 알고리즘 문제를 2~3문제씩 풀면서 서로 공유하기로 했다.

드림 코딩 자바스크립트 기초 (ES5+) by 엘리 강의가 너무 좋아서 개인적으로 혼자 JS를 공부하고 싶은 사람에게도 추천한다. 그런데, JS 문법을 자세히하기 보다는 예제 코드 조금과 이론 설명 위주로 되어 있으므로 기초 문법을 잘 모르는 사람들은 기초 문법을 먼저 공부하고 수강하면 좋을 것 같다.

공부한 코드는 github에 주석과 함께 정리를 해놓고 있다. 링크

앞으로의 계획

강의를 수강하면서 배운 내용은 velog에 각자 정리하기로 했다. 한 달 단위로 쪼개 계획을 정리해보았는데... 우선은 JS를 이번 달 안에 정리하고, React를 다음 달에 같이 공부해보기로 했다. 계획이 꼭 성공하길... 😺

Block scope? Global scope? Lexical scoping...

scope는 "범위"라는 뜻을 가진 단어이다. 다른 언어와 마찬가지로 JS에도 local과 global 개념이 있는데, 강의에서는 local을 block이라고 설명했다. JS에서는 local보다는 block이란 단어를 더 많이 쓰는 것 같았다. (아마도)

block scope와 global scope는 서로 반대되는 개념이다. 이 두 가지의 scope는 아주 간단한 이론 하나로 정리할 수 있는데, 바로 "밖에서는 안을 볼 수 없지만 안에서는 밖을 볼 수 있다!" 는 것이다.

block scope는 블록 안에서 선언된 변수를 블록 안에서만 접근할 수 있다는 뜻이고, global scope는 블록 밖에서 선언된 변수는 어디에서든 접근할 수 있다는 뜻이다. 변수가 아닌 함수로 생각해보면, 함수가 생성될 때마다 새로운 scope가 생긴다고 하니... 함수 또한 block이라고 생각하면 쉬운 것 같다.

참고로, scope는 함수를 호출한 시기가 아니라 "어디에 함수를 선언했는지"에 따라 결정된다. 이를 렉시컬 스코핑(Lexical Scoping)이라고 한다.

Hoisting

강의 안에서는 hoisting을 "어디에 선언했든 가장 위에 선언한 것처럼 끌어올리는 현상" 이라고 설명했다. (내가 이해한대로) 쉽게 말하면, 변수나 함수가 global해지는 것이다.

자바스크립트 함수는 실행되기 전에 Parser가 함수 실행 전 해당 함수를 한 번 훑은 다음, 함수 안에 필요한 변수값들을 모아서 유효 범위(scope)의 최상단에 선언한다. 즉, 함수 내에서 필요한 것들을 골라 최상단에 선언한 것처럼 끌어올리는 것이다. 그러나, 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 그래서 실제 메모리에서는 변화가 없다. 🔼 위의 설명은 링크를 참고하여 작성했다.

hoisting은 var 변수와 함수 선언식(function declarations)에 적용된다.

var, let, const

var은 ES6 이전의 변수 선언형으로 block scope가 불가능한, 호이스팅의 대상이었다. 그래서 아래 같은 말도 안 되는 코드가 말이 된다... (2017년도에 학교 수업에서 배웠을 때 아주 화가 났던 부분... 이래서 그때는 프론트에 관심이 그닥 없었다. 만약 그때 ES6를 알았다면...?)

{
    age = 4; // 변수 선언 전에도 사용 가능
    var age;
}
console.log(age); // 블럭 밖임에도 접근 가능

위의 코드는 호이스팅에 의해서,

var age;
{
    age = 4; // 변수 선언 전에도 사용 가능
}
console.log(age); // 블럭 밖임에도 접근 가능

처럼 해석된다. 그래서 아주 다양한 혼란을 야기하고 아주 작은 실수로 인한 에러를 강령술마냥 불러 일으키기 때문에~ ES6에서는 let과 const가 추가되었다.

let은 block scope가 가능한 변수 선언형으로 위와 같은 문제가 일절! 차단된다. const는 마찬가지로 block scope 변수 선언형이지만, 상수이다. 이 const를 잘 활용하면 보안성과 thread safety를 지키고, 실수를 줄일 수 있는 좋은 코드가 될 수 있다. const는 반드시! 초기값이 필요하다.

함수 선언식? 함수 표현식?

이 둘은 예제로 비교하는 게 빠르다.

function 함수 이름() {
    함수 로직;
}

🔼 위는 함수 선언식(function declarations)이다. 함수 선언식은 전술했듯, 호이스팅의 대상이다. 오류를 부르지 않기 위해서는 의무적으로 코드의 맨 위쪽에 함수를 선언하는 게 좋다.

let 함수 이름 = function() {
    함수 로직;
}

🔼 위는 함수 표현식(function expressions)이다. 함수 표현식은 호이스팅에 영향을 받지 않는다. 그러나, 변수가 let이 아닌 var이라면 호이스팅의 대상이 된다. 함수 표현식의 장점은 1. 클로저(Closer)로 사용이 가능하다는 것이며, 2. callback으로도 활용할 수 있다는 것이다.

참고로, JS에서 함수는 object형으로 분리된다. (=first-class function) 그러므로, 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있다. (재귀적 프로그래밍 또한 가능) MDN 참조

Closer

클로저는 JS 뿐만 아니라 함수를 일급 객체(전술한 first-class function)로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(Lisp)…) 에서도 사용되는 특성이다. 클로저는 이해하기가 쉽지 않은 개념인데... 내가 봤던 책에서는 "클로저는 함수와 그 함수가 선언될 때의 환경으로 이뤄진다" 라고 한다.

MDN에서는 "클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다." 라고 정의하는데, 이 렉시컬 환경이라는 말마저 난해하다... 그래서 자료를 좀 더 찾아보았다. 참고

function outerFunc() {
    let x = 10;
    let innerFunc = function () { console.log(x); };
    innerFunc();
}

outerFunc(); // 10

이 코드 안에서 innerFunc는 outerFunc 내부에 선언된 x를 참조할 수 있다. 또, innerFunc는 함수 outerFunc의 내부에서 선언되었기 때문에 함수 innerFunc의 상위 스코프는 함수 outerFunc이다. 따라서, innerFunc는 자신이 속한 렉시컬 스코프(함수 outerFunc, 자신의 스코프)를 참조할 수 있다. 설명이 더 남아있지만 나머지는 링크를 통해 확인하는 게 좋을 것 같다. 다른 책에서 봤던 예제를 보면,

function makeCounterFunction(initVal) {
    let count = initVal;
    function Increase() {
        count++;
        console.log(count);
    }
    return Increase;
}

let counter1 = makeCounterFunction(0); // 1
let counter2 = makeCounterFunction(10); // 11

counter1();
counter2();

counter1이 호출될 때와 counter2가 호출될 때의 count 변수는 같은 count 변수이지만 값이 다르다. 즉, counter1과 counter2의 클로저가 다르기 때문이다.

클로저를 이용하면 다른 객체 지향 언어(Object-Oriented Programming, OOP)에 있는 private나 public 같은 개념을 구현할 수 있다.

쓰면서도 내가 맞게 잘 썼나 의심된다... 다음은... 변수 타입과 함수 어쩌고로 돌아오겠다... 아자아자! 😇

코드 번들링

리액트를 불러와서 사용하려면 리액트 모듈을 설치하고, import React from 'react'; 구문을 이용해서 리액트를 불러와야 한다. 이렇게 모듈을 불러와서 사용하는 것은 기존 브라우저에 있는 기능이 아니므로 브라우저에서도 이 기능을 사용할 수 있도록 "번들러(bundler)"를 이용한다. 위 그림처럼 여러가지 모듈과 파일들을 묶듯이 하나로 연결하는 것이 번들러이다. 대표적인 번들러로는 웹팩(webpack), Parcel 등이 있는데... 리액트 프로젝트는 주로 웹팩을 사용한다.

로더(loader)

웹팩을 사용하면 SVG, CSS 파일도 불러와서 사용할 수 있다. 이때, 파일들을 불러오는 것은 "로더(loader)"라는 기능이 담당한다. 로더는 여러 가지 종류가 있다. 예를 들어, css 파일을 불러올 수 있게 해주는 css-loader, 웹 폰트/미디어 파일을 불러올 수 있게 해주는 file-loader, JSX, Typescript 등 다른 자바스크립트 문법으로 작성한 자바스크립트 파일들을 불러와 ES5 문법으로 코드를 변환해주는 babel-loader가 있다.

바벨 로더(babel-loader)

바벨 로더는 크로스 브라우징을 지원하기 위한 기능이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX등 다른 언어로 분류되는 언어들에 대해서 모든 브라우저에서 동작할 수 있도록 호환성을 지켜주는 역할을 한다.

JSX란?

리액트에서 사용되는 문법인 JSX는 자바스크립트의 확장 문법이며 XML과 유사하다. JSX의 장점은 총 세 가지라고 할 수 있다.

• 보기 쉽고 익숙하다.
• div,span 같은 HTML 태그를 사용할 수 있다.
• 컴포넌트를 작성할 수 있다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• ReactDOM.render() 컴포넌트를 페이지에 렌더링하는 역할을 한다. 첫 번째 파라미터에는 JSX 문법으로 작성된 페이지에 렌더링할 내용이 들어가고, 두 번째 파라미터에는 첫 번째 파라미터의 JSX를 렌더링할 document의 내부 요소를 설정한다. 위의 코드에서는 id가 root인 요소 안에 렌더링하도록 설정했다. (index.html 파일에 존재)

• React.StrictMode 리액트 프로젝트에서 레거시 기능(사라지게 될 예정이라 더 이상 쓰기 어려운 기능)을 사용하지 못하게 하는 기능이다. (2018년 이후로 기본 적용)

JSX 문법

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

아래의 코드는 제대로 작동하지 않는다. h1, h2 요소가 있는 밖을 div 하나로 더 감싸주어야 한다. (div가 싫을 땐 Fragment를 사용) Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리로 이루어져야 한다는 규칙이 존재하기 때문이다.

import React from "react";

function App() {
 return (
   <h1>리액트 안녕!</h1>
   <h2>잘 작동하니?</h2>
  );
}

2. JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.

자바스크립트 표현식을 쓰려면 { }로 감싸면 된다.

import React from "react";

function App() {
 const name = "리액트";
 return (
  <div>
   <h1>{name} 안녕!</h1>
   <h2>잘 작동하니?</h2>
 </div>
  );
}

3. JSX 안에서는 if문을 사용할 수 없다.

대안 방법으로 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하면 된다. AND (&&) 연산자는 사용할 수 있다. 그러나, falsy한 값은 예외적으로 화면에 나타나므로 주의해야 한다.

4. undefined는 렌더링하면 안 된다.

JSX 내부는 괜찮지만 컴포넌트 함수에서 undefined만 반환하여 렌더링하면 오류가 발생한다. 아래와 같은 코드는 오류.

import React from "react";

function App() {
 const name = undefined;
 return name;
}

5. 태그에 클래스를 적용시킬 때는 class 대신 className을 사용해야 한다.

6. self-closing 포함, 태그는 꼭 닫혀야 한다.

self-closing 태그는 선언하면서 동시에 닫을 수 있는 태그로, <input />, <br /> 등이 있다.

7. 주석은 {/* */} 형식으로 작성하거나 태그 안에서 // 형식으로 작성한다.

요약

1. 브라우저에서 모듈을 불러와 사용하려면 번들러를 이용해야 한다. (리액트는 웹팩을 주로 이용한다.)
2. 웹팩을 사용하면 로더(loader)가 파일들을 불러와 여러 파일을 사용할 수 있게 해준다.
3. 로더 중 하나인 바벨(로더)은 크로스 브라우징을 지원하기 위한 기능으로 ES5 문법으로 코드를 변환시켜준다.
4. JSX는 자바스크립트의 확장 문법으로 리액트에서 이용된다.

리액트의 이해

기존의 MVC, MVVM 아키텍처를 사용하는 프레임워크들이 'View의 수정된 부분을 어떻게 반영시킬지'_를 고민했다면 리액트는 그냥 _'기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식으로 뷰를 변형하자' 라는 생각에서 시작했다.

리액트는 오직 V(View)만 신경쓰는 라이브러리이다.

리액트의 초기 렌더링과 리렌더링

초기 렌더링

리액트는 render() 함수를 이용하여 '화면에 맨 처음 어떻게 보일 것인지'를 정하는 초기 렌더링을 실행한다. render() 함수는 뷰가 어떻게 생겼고, 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.

그림 출처 https://ljtaek2.tistory.com/132

초기 렌더링 과정은 위의 그림처럼,

1. 최상위 컴포넌트를 렌더링하면서 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다.

2. 컴포넌트들이 지니고 있는 정보들을 사용하여 HTML 마크업을 만든다.

3. 2에서 만들어진 HTML 마크업을 실제 페이지의 DOM 요소 안에 주입한다.

리렌더링

리액트에서 뷰를 업데이트할 때는 리렌더링 과정을 거치게 된다. 이 때 '업데이트 과정을 거친다'라는 표현보다는 '조화 과정(reconcilation)을 거친다.' 라는 표현이 더 정확하다. 변화에 따라 뷰가 변형되는 것 같지만, 전술한 것처럼 새로운 요소로 갈아 끼우기 때문이다. 리렌더링 또한 render() 함수를 이용한다.

이전에 render() 함수가 만들었던 DOM 트리와 현재 render() 함수가 만든 새로운 Virtual DOM 트리를 최소한의 연산으로 비교하여 둘의 차이를 알아내 바뀐 부분의 DOM 노드만 업데이트하는 것이 리렌더링이다.

DOM 자체가 동적 UI에 최적화되어 있지 않아 DOM에 직접 접근하여 DOM을 조작하면, 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 성능 저하가 크다. 리액트는 이를 해결하고자 Virtual DOM을 도입하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하였다.

따라서!! 리액트는 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축할 때 진가가 드러난다.

리액트의 특징

위에 Virtual DOM을 이용하여 리렌더링하는 과정을 거친다는 특징은 이미 적어놓았다. 다른 특징은 리액트는 프레임워크가 아닌 라이브러리라는 것이다.

요약

1. 리액트는 View만 신경쓰는 라이브러리이며 지속적으로 데이터가 변화하는 (업데이트가 많은) 대규모 애플리케이션 구축에 유용하다.
2. 리액트에는 초기 렌더링과 리렌더링이 있다.
3. 리액트는 Virtual DOM을 통해 기존의 DOM 트리와 비교하여 변화한 노드만 업데이트하는 리렌더링을 한다.

나는 인터넷 동영상 강의보다는 책을 선호하는 편이다. 이유는... 가만히 화면을 보고 있으면 졸립고 (실습을 하더라도 이상하게 졸림) 강의 해주시는 선생님의 스타일에 따라 흥미가 롤러코스터를 타기 때문이다. 목소리가 너무 안정적이시면 무조건!! 잠이 온다. 그러나, 책은 내가 눈으로 읽어야 하고 중요한 부분을 체크하면서 기록하기도 쉽고... 그래서 잠이 덜 온다.

무료 강의를 몇 번 봤는데 실패한 경험이 있는 사람들은 책을 사서 공부하는 것을 추천한다. (e-book을 구매하는 것도 한 가지 방법!)

1. Try! helloworld 자바스크립트 (김용록, 길벗 출판사) ⭐️⭐️⭐️⭐️ 하루 15분 누구나 프로그래밍을 할 수 있다! 라고는 하지만... 아예 비전공자가 처음부터 이 책으로 시작하기에는 조금 무리가 있을 것 같다. 그러나, 핵심만 짚어주는 짧은 예제와 계속되는 실습으로 JS 기초를 단단히 하기엔 아주 좋은 구성이다. 전체적으로 내용이 가벼워서 이미 다른 프로그래밍 언어를 알고 있는데, JS를 배워볼까~ 하는 사람에게 추천. 동영상 강의도 프로그래머스에 있다고 하는데 보지 않았다. 책 속의 설명이 너무 깔끔해서 굳이 동영상 강의를 볼 필요가 없었다.

하루에 2-4챕터씩 보면 일주일 정도면 끝난다.

2. Do it! 웹 사이트 따라 만들기 (김윤미, 이지스퍼블리싱) ⭐️⭐️⭐️⭐️⭐️ 웹 퍼블리셔 쪽 개발자를 꿈꾸는 사람들이라면 너무 너무 도움이 될만한 책이다. (이 책의 기술 스택은 HTML, CSS, JQuery이다.)

HTML, CSS의 경우 어떻게 작성해야 "좋은" 코드일까? 라는 고민이 항상 있었는데... (나 같은 경우, 다른 객체지향, 함수형 언어들과는 너무 달라서 지금까지 배워온 좋은 코드의 기준이 사실상 통하지 않아 고민이었다.) 그런 고민을 마구마구 뿌셔준다. 정말 실무에 가까운 팁과 프론트엔드에게 꼭 필요한 지식, 그리고 깔끔한 코드를 참고해서 "좋은" 코드를 향한 방향성을 잡을 수 있었다. 좋은 웹 사이트, 좋은 웹 퍼블리셔란 무엇인지 끊임없이 알려주고 어떤 웹 개발자 되어야 하는지 자세까지 알려주는 친절하고 따스한 책. 내용이 꽤 많아서 (HTML, CSS 특성상 코드도 굉장히 길다...) 완독하는 건 꽤 시간이 걸렸다. 팁까지 열심히 보고 공부하려니 더 걸렸다...... 개정판(2020년 출간)이긴 하지만 초판(2019년 출간)이 3년 전이기 때문에 클론코딩으로 완성되는 사이트의 디자인이 좀 올드한 게 유일한 단점이다. 그러나, HTML/CSS 개발 지식을 배우는 데에는 아주 좋다! 이 책을 완독하면서, 책 속의 실무 꿀팁이나 개발 지식을 나의 깃헙 레포에 정리해놓았다. 책을 구매하기 전에 참고하시길. 참고용 레포 링크

3. Do it! 클론 코딩 영화 평점 웹 서비스 (노마드 코더, 이지스퍼블리싱) ⭐️⭐️⭐️ 리액트를 처음 접하기에 나쁘지 않은 클론 코딩 책. 그러나, HTML/CSS/JS를 어느 정도 알고 있어야 한다. 클론 코딩을 통해서 하나의 번듯한 결과물이 나오는 점, JSON 데이터를 이용해볼 수 있다는 점, async/await 개념을 배울 수 있다는 점은 장점이지만... 완성된 페이지의 깊이감과 디테일하지 않은 개념 설명들이 아쉬웠다. 리액트는 어떤 걸까~ 막연하게 생각하던 사람들에게 가볍게 익혀볼 만한 입문서로 추천. (Hooks 같은 요소는 없고 클래스형 컴포넌트로 제작하는 게 조금 마이너스...... 😢)

3일 정도면 완독할 수 있다.

4. 리액트를 다루는 기술 (김민준, 길벗 출판사) ⭐️⭐️⭐️⭐️⭐️

말이 필요 없는 리액트 입문-중급-고급-어쩌고-마제스틱-판타스틱서. 리액트를 제대로 배우고자 한다면 이 책을 무조건 추천한다. 법전 못지 않게 두꺼운 책이지만 내용이 알차고 설명이 쉬워서 읽기 좋다. 우선 번역본이 아니라는 것부터가 너무 큰 장점... 리액트 문법과 바닐라 JS를 비교해주는 구성으로 되어 있는 게 너무 너무 좋다. (잘 모르는 독자를 위해 ES6 문법 소개도 함께 해준다.) 그냥... 사야 한다. 사서 정독해야 한다. 아직 읽는 중이라 완독에 얼마나 걸리는지는 추후 추가하도록 하겠다. 그러나, 책의 난이도가 좀 있는 편이라 아는 언어가 좀 있어서 새로운 언어를 빨리 흡수할 수 있는 사람이나, JS 중급 정도는 할 수 있는 사람이 봐야 좋을 듯 하다.

강의

전술했다시피 강의보다 책을 선호해서... 강의는 몇 개 없다... 🥲 2020년에는 멋쟁이사자처럼 활동을 했었는데, 멋쟁이사자처럼에서 제공해주는 동영상 강의를 제일 많이 봤다... 그래도 개인적으로 프론트엔드 관련 강의는 구름 EDU가 많은 것 같다고 느꼈다.

1. 제주코딩베이스캠프 Code Festival: JavaScript 100제 (인프런) ⭐️⭐️⭐️⭐️ 초급(30)-중급(50)-고급(20)으로 이루어져 있는 100제를 풀어가면서 알고리즘 테스트에 강해질 수 있다. 50번 이후로 갑자기 난이도가 뛴다. (그전까지는 자료구조에 대한 기본적 지식이 없어도 되는 문제들인데, 이후에는 기본적 지식이 있어야만 쉽게 풀 수 있다. 그런데, 강의에서 자료구조에 대해 자세히 설명해주진 않는다.) 강의 속 문제 풀이가 막 명쾌하진 않지만 푸는 방식, 문제를 푸는 절차 위주로 설명해줘 방향을 잡기에 좋다. notion/PDF 파일로 제공되는 문제들의 퀄리티나 구성이 나쁘지 않아 들을 가치가 있다.

2. 스파르타 코딩 클럽 신년운세 패키지 ⭐️ 긁적........ (강의를 너무 안 봐서 끼워넣어봤는데... 그냥 캐릭터 디자인만 얻은 정도의 강의였다... 배포까지 가르쳐준다고 해서 혹했는데 그냥... 자체 시스템에서 주는 주소로 배포되는 거였다.) 배포된 결과물이 궁금하다면 바로가기.

3. 생활코딩 시리즈 (WEB1:HTML & Internet, WEB2:PHP) (구름 EDU) ⭐️⭐️⭐️ (사실 2020년에 안 보고 2018년에 봤다... ㅎㅎ) HTML 복기용으로 가볍게 봤던 WEB1 강의와 PHP는 뭘까? 싶은 궁금증에 봤던 WEB2 강의. 정말 기초 중의 기초로 유명한 생활 코딩답게 흥미 위주로 개념을 설명해준다. 전공자가 아니거나 웹 프론트엔드를 배워본 적이 없는 사람에게 아~주 가볍게 볼 강의로 추천.

마무리

책에 비해 강의가 아주 빈약... ^^ 한 느낌이지만 어쨌든 아직도 갈 길이 멀다는 건 알겠다. 사실 2020년 상-중반기는 대외활동에서 배운 게 훨씬 많았고, 하반기는 왼쪽 손목에 건초염이 생겨 많이 공부를 못했다...

앞으로는 UX/UI, 디자인 관련 책과 Vue.js 책을 찾아볼까 한다. 강의는 들으려고 찾아놓은 게 많은데 잘 들을 수 있을지는... 이 글의 목적은 정보글이므로 지금 들으려고 찾아놓은 강의 목록으로 마무리하겠다.

무료 강의

구름 EDU
웹 게임을 만들며 배우는 React(리액트) 
프레임워크를 위한 JavaScript ES6 
실전! 웹사이트 제작 Step by Step - ‘돕다’ 웹사이트 Basic
실전! 웹사이트 제작 Step by Step - ‘한국소비자원’ 웹사이트 Basic
[웹퍼블리싱 실습] 반응형 사이트 만들기
생활코딩 - 네트워크 개념 잡기 (도메인, 네임서버, HTTPS)

인프런
생활코딩 - React class vs function style coding
스케치 뚝딱 끝내기! 입문자용 무료 강좌

유료 강의

인프런
인터랙티브 웹 개발 제대로 시작하기
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
프론트엔드 개발자를 위한, 웹 성능 최적화 꿀팁키트(feat. React) - Part. 1

'나'라는 단어로 나를 표현하기엔, '나'는 너무 평범한 것 같다. 나는 어떤 운명을 타고난 것처럼 평범함을 싫어했다. 남들과 똑같은 거 입고 똑같은 거 쓰는 게 너무 싫었다. 나는 항상 선구자를 꿈꾸었다. 그래서 남들과 다르고자 했다. 그게 늘 뜻대로 되지 않았지만 적어도 신념은 있었다.

아무튼 이 복잡하고 특이한 나와 나의 인생을 한 마디로 정리하고 싶다. 하지만 영 좋은 단어가 떠오르지 않아 내가 좋아하는 것들로 나를 소개해보려고 한다.

나는 글을 좋아한다. 한국 나이 17살, 나는 글쓰기에 미쳐있었다. 학교를 안 가도 되는 주말이면 글을 썼다. 나름대로 쓴 소설을 연재하기도 했다. 스무 살, 문득 떠오른 단편 영화 시나리오를 영화과인 친구에게 넘겼다. 친구에게 꽤 좋은 평판을 받았다.

나는 그림을 좋아한다. 가장 좋아하는 화가는 클로드 모네, 산드로 보티첼리이다. 인상파를 좋아하는 엄마를 닮아 고흐도 좋아한다. 예전에 '반 고흐 인사이드: 빛과 음악의 축제' 전시회를 관람했던 이후, 기술과 예술의 융합에 대해서 생각하게 됐다.

그리고 나는 자연과 동물, 영화, 음악, 뮤지컬, 철학, 순수과학, 나의 무수한 취미들을 좋아한다. 그리고, 코딩도 당연히 좋아한다.

내가 좋아하는 이 범상치 않은 많은 것들을 담기에, '나'라는 단어는 너무나 작고 평범하다. 나는 앞으로 velog를 통해 '나'를 잘 표현할 수 있는 방법을 찾아보려고 한다.

그래서 2020년을 돌아보며...

2020년, 한 해 동안 나는 협업을 정말 많이 했다. 동아리 내에서 작은 프로젝트를 몇 시간 동안 진행한 적도 있었고, 하루 동안 진행하는 해커톤을 참가한 적도 있었고, 한 달 동안 진행하는 해커톤을 참가하기도 했다. 협업을 하면서 정말 많은 사람들과 만났다. 대학교 4년 다니면서 본 것보다 더 많은 유형의 개발자들을 봤다. 개인 프로젝트가 어색할 정도로 팀 프로젝트만 주구장창했다.

스스로 (아직 나에게 이런 단어를 붙여도 되는지 모르겠지만) 개발자로서 많이 성장한 한 해였다고 생각한다. 나의 코딩 능력이 성장한 것과 별개로 개발자에게는 협력이 꼭 필요한 역량이라는 것을 깨닫게 됐다.

그래서 이렇게 생각하게 됐다. 협업은 단순히 소통만 해서 되는 게 아니구나. 말을 한다고, 말을 듣는다고 모든 게 다 전해지는 게 아니었다. 때로는 나의 고집을 꺾을 줄 알아야 했고, 때로는 나의 작업 스타일을 포기할 줄도 알아야 했다. 다른 사람들에게 나를 맞춰가는 과정, 그런게 진짜 협업이었다.

그리고 나는 사람들 사이에서 너무나 즐거웠다. 한창 고생할 때는 인류애가 좀 사라질 뻔하기도 했지만... 그래도 나는 여전히 '사람' 자체가 좋다. 아주 아주 지독한 인류애다.

그러므로 2020년을 겪은 나의 결론은 "내가 되고 싶은 인간상을 정하자." 그리고, 그 인간상에 가까워지도록 노력하자. 왜냐하면, 개발도 결국 사람간의 일이니까.

나는 이런 사람이 되기 싫다

3분 전에 "내가 되고 싶은 인간상을 정하자"라고 말했는데, 가만 생각해보니 되기 싫은 인간상이 더 중요하더라. 2020년 동안 "나는 저렇게 하지 말아야지!" 라고 생각하며 쌓은 나름의 빅데이터를 통해 도출해낸 나의 되기 싫은 인간상을 먼저 말하도록 하겠다.

1. 창의적인 생각을 멈추는 사람이 되지 말자. 빅데이터와는 별개로, 나는 나태한 나보다 창의적이지 못한 내가 더 밉다. 내가 생각하는 개발의 재미는 '항상 더 나은 길을 찾는 것'이다. 이 더 나은 길을 찾기 위해서는 첫 번째로, 창의적이어야 하고 (남들이 생각하지 못한 걸 해야 하니까.) 두 번째로, 도전적이어야 한다. (새로운 길을 두려워하면 절대 탐험하지 못하니까!) 내 생각에... 창의적인 생각을 멈추는 건 곧 도전을 멈추는 것과 같다. 그래서 첫 번째로 적어보았다.

2. 우물 안의 "오만한" 개구리가 되지 말자. 우물 안의 개구리도 최악인데 "오만한" 개구리는 더 최악이다. '에이, 진짜 이런 사람이 있나?' 싶지만 진짜 있었다. 심지어... 꽤 많다. 이 오만한 개구리들은 남을 자꾸 무시한다. 자기자신에 취해 다른 사람을 돌아볼 여유나 생각 자체가 없기 때문인 것 같다. 그러니까, 팀원을 무시하거나 빼지 말고 챙길 줄 아는 오만한 개구리가 아닌 겸손한 사람이 되자.

3. 열정이 식어도 티는 내지 말자. 프로젝트를 진행하다 보면 마음이 식을 수도 있다. 내 생각대로 진행이 안 될 수도 있다. 그래서 프로젝트에 대한 애정도, 열정도 수그러들 수도 있다. 그런데, 이런 걸 다른 팀원한테 티를 내면 안 된다고 생각한다. 팀 전체의 사기를 깎아먹는 일이니까. 분위기메이커는 못 되어도 팀원들의 정색을 이끌어내는... 그런 사람이 되지는 말자.

나는 꼭 이런 사람이 되고 싶다

이제 진짜로 되고 싶은, 나의 이상향을 말해보도록 하겠다. 이 또한 빅데이터를 통해 도출해낸 결과이고... 굉장히 뻔하다.

1. 남의 마음을 더 배려하는 더 상냥한 사람이 되자. 이게 정말 내가 생각하는 좋은 인간상의 표본이다. 그런데... 마음대로 잘 안 된다. 나는 타고 태어난 것 자체가 조금 분석적이고 평가에 냉정하다. 그리고 너무 솔직하다. 팀장으로서 팀원들의 결과물을 평가할 때 이런 점이 조금은 단점인 것 같다. 그래서, 제대로 칭찬하는 걸 연습하려고 한다. 좋은 점은 확실하게, 고쳐야 할 점은 부드럽게, 평가는 그래도 냉철하게 하는 그런 사람이 되자.

2. 내가 한 일에 대한 프라이드와 똥고집을 헷갈리는 사람이 되지 말자. 내가 한 일에 대해 자긍심이 있을 수 있다. 그리고 그런 자긍심은 노력한 것에 대한 당연한 결과라고 생각한다. 그런데, 이 자긍심이 가끔은 독이 되기도 한다. 내가 만든 게 다른 사람에게는 별로일 수도 있다. 이런 평가에 대해서... 내 결과물을 더 어필할 수도 있다. 하지만 그게 똥고집은 아닌지 다시 생각해봐야 한다. 그래서, '다시 생각해봐도 내 거가 더 낫다'라고 어필할 때는 충분한 근거를 같이 피력하기로 했다.

3. 사람간의 관계와 일 사이에서 중심을 잘 지키는 사람이 되자. 이건 지금까지의 협업을 친한 친구들과 자주 했기 때문에 생각했던 점이다. 협업할 때, 나와 친분이 있는 사람이 나의 작업물에 대해 평가한다고 해서 그걸 개인적으로 받아들이면 안 된다. 나도 가끔 이렇게 받아들이는 나 자신에 대해서 좀 놀란 때가 있었다. 그런 평가를 감정적으로 받아들이는 이상 좋은 결과가 나올 리가 없다. 그래서, 일은 일대로... 아주 어른스럽게 생각하는 연습을 좀 더 하려고 한다.

여기까지... 2020년을 돌아보며 2021년에 더 좋은 사람이 되기로, 새로운 다짐을 담아 velog 첫 글을 완성했다. 올해는 용두사미가 되지 않도록 노력하기로 했다. ^_^ 파이팅...!