210411 Memoirs 블로그 운영 80일차 회고록

블로그 운영 80일차에 적어보는 회고록

이번에 적어보는 80일차 블로그 운영 회고록은 내가 여지까지 살아오면서 경험했던 것과 지금 현재 내가 나아가고 있는 방향에 대한 이야기로 시작해보려고 한다.
나는 첫 직장을 싱가포르에서 시스템 엔지니어로 시작을 하였다. 대학에서 정보통신공학을 전공하였기 때문에 관련 업무를 할 수 있는 회사로 입사하였다. 군 전역하고 2주뒤에 처음 가보았던 해외경험을 시작으로 해외취업에 대한 열망이 있었기 때문에 첫 직장을 해외에서 시작하게 되었다.
생각해보면 내가 지금 이 개발자라는 직업을 갖고자 하는 동기부여가 바로 첫 직장에서부터 시작되었다.
대학교 1학년 2학년때 C, C++, Java 프로그래밍 언어를 배웠었는데 당시에는 크게 흥미가 생기지 않았다. 단순 학점을 위한 과제 수행정도가 전부였다.

그런데 첫 직장에서 전혀 프로그래밍을 하지 않을 것이라고 생각했던 나의 생각과는 달리 Lua라는 프로그래밍 언어를 접할 계기가 있었다. 사내 하드웨어 장비의 디스플레이 처리를 위해 직접 프로그래밍을 해야되는 경우가 생겼었는데 그때 Lua 프로그래밍 언어를 사용했다.
그리고 당시 회사에 파트너사로 RPA 소프트웨어 솔루션 회사가 있었는데, 종종 이 소프트웨어를 사용해서 Python과 VBScript로 간단한 로직을 작성해서 고객사를 위한 커스텀 소프트웨어를 개발하는 일을 담당했었다.
나는 그냥 네트워크상 문제해결이나 사내 솔루션을 도입할때 통신상에서 발생하는 문제점에 대한 트러블슈팅을 위한 업무를 담당할 줄 알았는데, 업무상에 큰 부분은 아니었지만 소프트웨어 관련 업무를 접할 기회가 생겼다. 내가 소속되었던 부서가 SSD(Software Solution Department)였는데, 내 포지션인 시스템 엔지니어 말고 다수의 소프트웨어 엔지니어들이 소속되어 있었고, 소프트웨어 엔지니어들이 일을 하면서 고객사로부터 피드백을 받고 개선을 하고, 본인이 만들어낸 서비스에 대해 자부심을 갖고 보람을 느끼는 모습을 보면서 나의 한 쪽 가슴에 뭔가 하고 싶다는 열망이 생겨났다.

회사가 끝나고 혼자서 자기계발의 일환으로 한국에서 택배로 받은 프로그래밍 관련 책을 보며 다시 프로그래밍 공부를 시작하였다. 그런데 시간이 지날수록 일과 공부를 병행하기란 쉽지 않았고, 한국으로 돌아가 제대로 마음먹고 프로그래밍 공부를 하기로 결심하였다.

(중간에 또 다른 나의 경험에 대한 이야기를 정리할 필요가 있다. 이하 내용은 정리가 필요)

일식이란 달과 태양이 일치하는 현상을 말한다. 인생을 살면서 누구나 한 번쯤 생각해봤을 것이다. “목숨을 걸고 해봐야지!” 이 목숨을 걸어야 될때에는 인생에 딱 한 번 있는데 인생을 살면서 바로 ‘해야만 하는 것’과 ‘하고 싶은 것’이 일치하는 경우이다.
어차피 해야되는 일인데 내가 하고싶은 일과 일치하는 경우에 이 일에서 내적동기가 자연스럽게 생기게 된다. 그냥 일차원적인 욕구로 하고 싶은 것이 아닌, 자아실현 욕구로써 하고 싶은 일을 말하는 것이다. 단순히 재미로 그냥 좋다는 것이 아닌 정말 경험을 통해 알게 된 정말 내가 자아실현을 할 수 있는 “내가 하고 싶은 것”을 말하는 것이다.

이번에 수업을 듣다가 중간에 나오게 된 계기는 몰입 때문이었다. 지금 현재 내가 알고 있는 것과 과제의 난이도가 어느정도 일치를 해야지 몰입이 되는데 생각보다 난이도가 낮아서 더 이상 몰입을 하기 힘들었다. 물론 내가 완벽히 안다는 것은 아니지만, 그래도 몰입을 위해서는 많이 부족하다는 생각이 들었다.

원대한 꿈을 갖고 내적동기를 갖게 되면 오버랩되는 구간이 생길 확률이 높아진다.

210410 React TIL - import와 require 비교, React component의 key 속성, React component의 props, Top-Down & Bottom-Top, Redux와 Context, Class내에서 화살표 함수가 아닌 일반함수의 형태로 메서드를 정의하는 경우

React

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

import와 require 비교

간단하게 설명하면 import 구문은 리액트 코드 작성시에 사용하고 require는 Node 관련 코드를 작성시에 사용한다.

첫 번째, import 구문은 ES2015 module 문법이다. export 구문은 아래와 같이 두 가지 형태로 export를 해줄 수 있는데, 각 각 다른 형태로 import해야한다.
export default 구문은 파일에서 한 번만 쓸 수 있고, export const 구문은 제한 없이 여러번 쓸 수 있다.

Read More

210409 Webpack에 대해서 이해하기

웹팩(Webpack)

웹팩은 왜 사용하는 걸까?

실무에서 개발을 할때에는 여러개의 컴포넌트들을 복합적으로 사용한다. 만약에 이러한 컴포넌트들을 하나의 자바스크립트 파일에 작성을 해준다면 어떻게 될까?
아마 1000줄 10000줄? 그 이상이 될 것이다. 페이스북의 컴포넌트가 대략 2만개라고 하니 그 줄 수는 어마무시할 것이다.
이렇듯 한 개의 자바스크립트 파일에 모든 컴포넌트들을 일괄작성하게 되면 나중에 유지보수도 어려워지기 때문에 각 각의 컴포넌트들은 개별 자바스크립트 파일로써 작성되어야 한다.

이렇게 개별로 작성된 자바스크립트 파일들은 HTML파일에 의해 읽혀질때에는 하나의 자바스크립트 파일로 합쳐져서 읽혀지게 되는데, 이러한 여러개의 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 기술이 바로 웹팩(Webpack)이다.

Read More

210409 JavaScript의 this binding에 대한 이야기

자바스크립트에서의 this

이번 포스팅에서는 JavaScript에서의 this binding에 대해서 정리를 해보려고 한다.
이는 중요한 개념이기 때문에 나의 말로써 다른 사람에게 설명할 수 있을 정도로 연습을 해둬야 한다.

그럼 JavaScript에서 this란 무엇일까?

갑자기 누군가 JavaScript에서 this가 무엇이냐고 물어본다면 간단하게 현재 실행되는 코드의 실행 컨텍스트를 가르킨다라고 대답할 수 있다.
JavaScript는 Script 언어로, interpreter가 코드를 라인단위로 읽고 해석한 뒤에 실행을 시킨다.
이때 interpreter에 의해 현시점에서 실행되는 JavaScript 코드의 환경(스코프)를 실행 컨텍스트(execution context)라고 정의한다.
JavaScript에서는 내부에서 이런 실행 컨텍스트를 Call stack에서 관리를 하고 실행되는 시점에 자주 변경되는 실행 컨텍스트를 이 this라는 녀석이 가르키고 있다.

Read More

210408 React 상태관리 (작성중...)

Redux/Mobx/Recoil

React를 하면서 상태관리라는 말을 자주 접하게 된다.
이번 포스팅에서는 상태란 무엇이고 그 상태를 관리한다는 것은 무엇을 의미하는지, 그리고 React에서 상태관리를 하는 다양한 방법들을 직접 사용해보고 그 특징들을 비교해서 정리해보려고 한다.

우선 상태과 상태관리에 대한 개념부터 이해해보자.

상태(Status)?

간단히 말하자면 상태란 데이터로써 이해할 수 있는 것 같다.
객체지향 프로그래밍에서 프로그램의 기본 단위는 객체이고 객체간의 상호작용을 통해서 프로그램이 구현된다. 이때 각 객체들의 상호작용에 있어, 각 객체들이 가지고 있는 데이터가 전달되는데, 여기서 말하는 전달되는 데이터들을 상태로써 이해를 하면 좋을 것 같다.

상태관리(Status management)?

앞서 정리해 본 상태(Status)의 개념에서 비춰볼때 상태관리란 객체들간에 전달되는 데이터에 맞게 적절하게 UI를 설계하고 구현하는 것이 상태관리라고 볼 수 있을 것 같다.
예를들어 하나의 웹 어플리케이션의 페이지에는 로그인 상태, 사용자 이름, 콘텐츠 정보 등 다양한 데이터들이 존재한다고 가정한다면, 이러한 다양한 데이터들을 UI에 따라 적절하게 배치하고 표시하는 것이 상태관리가 아닐까 생각된다.

React를 사용해서 프론트엔드 개발을 할때 기본 단위는 재사용성 있는 컴포넌트인데, 이 컴포넌트 간의 상태 공유의 형태에 따라 local state와 global state를 적절하게 구분해서 설계해야 한다.
설계를 할때에는 상태를 일관적인 형태로 유지해서 무결성을 지켜야 한다. 즉, 공유되는 특정 데이터가 업데이트된다면 해당 데이터를 참조하고 있는 다른 화면에서도 업데이트된 데이터를 표시해야 된다는 말이다.

상태의 저장과 사용

앞서 상태를 관리한다는 것의 의미가 각 객체들간에 전달되는 데이터에 맞게 적절하게 UI를 설계하고 구현하는 것이라고 했는데, UI에서 전달되는 데이터에 맞게 설계를 하고 구현하기 위해서는 상태를 어떻게 저장하고 사용할 것인지에 대한 판단도 중요하다.

  • 전역적으로 redux와 같은 store에 저장
  • 웹 소켓으로 관리 (Backend와의 실시간 소통이 중요한 경우)
  • Cookie나 LocalStorage에 저장 (브라우저가 종료된 후에도 상태유지)

이후의 내용부터는 각 상태관리 방법을 다양하게 사용해보면서 구체적으로 어떤 차이점과 특징이 있는지 정리를 할 예정이다. 단순히 익숙함에 의해 특정 상태관리 방법을 고수한다면 프로젝트에 따라 적절한 상태관리 방법을 사용할 수 없다고 생각한다.
구체적으로 어떤 상태관리 방법은 어떤 특징이 있으며 어떤 상황에서 사용하면 좋은지 구체적인 예시를 들어서 한 번 작성해보려고 한다.

Read More

210408 Self Development TIL

Thought of the day

게으른 행동에 대해 하늘이 주는 벌은 두가지다.
하나는 자신의 실패이고 또 다른 하나는 내가 하지 않은 일을 해낸 옆사람의 성공이다.


TO DO LIST

  • Slack clone

    • Repository 생성하기 (예정)


  • TDD Practice with VanillaJS

    • ~#Issue ~ (예정)


  • 블로그 포스팅

    • React 상태관리에 대해서 블로그 포스팅하기 (작성중...)
    • React project의 개괄적인 내용에 대해서 블로그 포스팅하기 (작성중...)
    • CRA없이 React 프로젝트 시작하기 블로그 포스팅하기 (작성중...)
    • Vanilla JavaScript TDD Practice 관련 블로그 포스팅하기 (작성중...)
    • 동기/비동기에 대해서 블로그 포스팅하기 (예정)
    • Closure 에 대해서 공부하고 블로그 포스팅하기 (예정)

  • 백준 알고리즘 문제풀기

    • 기본 알고리즘 문제 10문제 풀이 (/10 완료)

  • TDD Practice with NodeJS

    • #Issue 10 ~ (진행중...)

    Read More

210408 React project (작성중...)

React project

React를 사용하는 이유?

  • 사용자 경험(UX)
    웹 페이지에서 모바일 앱과 같은 사용자 경험을 준다.

  • 재사용 컴포넌트
    웹 사이트의 내부를 보면 구조상 중복되는 부분이 많다.
    이러한 중복된 구조를 코드로 공통화를 시켜서 내부 표시되는 콘텐츠만 바꿔주는 방식으로 처리한다. (유지보수의 측면에서도 좋다)

  • 데이터 - 화면 일치
    데이터와 화면 페이지의 싱크를 맞추는 것이 어렵다. 페이스북과 같은 웹 서비스에서 좋아요 버튼을 클릭하는 경우, 해당 게시글을 전부 업데이트하지 않고, 좋아요 부분만 업데이트해야 퍼포먼스상 문제가 없다. 데이터를 화면에 반영을 할때 데이터와 화면의 데이터 Sync를 맞출때 좋다.

Webpack
우선 자바스크립트 파일에 대한 이해가 없기 때문에 Webpack이 마법을 부린다는 소리를 하는데 마법을 부리는 것이 아니라 단지 React를 자바스크립트 파일로 만들어주는 것이다.
웹팩은 쪼개진 자바스크립트 파일을 HTML이 실행할 수 있는 자바스크립트 파일로 합쳐준다는 개념이다.
이 Webpack이라는 것의 필요성에 대해서 이해하기 위해 CRA없이 React프로젝트를 구성해봐야 한다.

프로젝트 기본 폴더구조

210408 CRA없이 React 프로젝트 시작하기

첫번째 코드에서는 React 관련된 라이브러리 두 개를 script로 포함시켜주었다.
첫 번째로 import해 준 라이브러리는 React의 핵심부분과 관련된 라이브러리이며, 두 번째로 import해 준 라이브러리는 React 코드를 웹에 표시해주는 역할을 해주는 라이브러리이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- React 관련 라이브러리 -->
<!-- React의 핵심적인 코드 -->
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<!-- React 코드를 웹에 붙여주는 역할 -->
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- 결과 -->
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: false
};
}
// 버튼을 만들겠다.
render() {
// type, property, textNode
return e(
'button',
{
onClick: () => {
this.setState({
liked: true
});
console.log('clicked');
},
type: 'submit'
},
this.state.liked === true ? 'Liked' : 'Like'
); // <button type="submit" onclick="onclick">Like</button>
}
}
</script>
<script>
// 만든 버튼을 그린다.
// 실제 화면에 렌더링을 해주는 역할(DOM)
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</body>
</html>

하지만 위의 코드에서 React.createElement로 버튼 요소를 만드는 부분은 가독성이 좋지 않다. 따라서 React 팀에서는 JavaScript에서 JSX를 사용할 수 있도록 개선을 하였다.
JSX를 사용할 수 있게 되면서 아래의 코드와 같이 React.createElement를 사용해서 버튼을 생성하지 않고, 바로 <button>과 같은 HTML 태그를 사용하여 가독성 좋은 코드를 작성할 수 있게 되었다.

이러한 JavaScript 내에서 JSX문법을 사용하기 위해서는 선행되어야 하는 작업이 있는데 바로 Babel을 import시켜줘야 한다.
원래 JavaScript에서 HTML태그를 쓰는 것은 문법상 맞지 않지만 Babel이 작성한 JSX문법의 코드를 createElement로 convert해준다.
import한 babel을 사용하기 위해서는 script 태그의 type의 속성으로 text/babel을 넣어줘야 한다.

간단하게 JavaScript상에서 최신 문법을 사용하고 싶을 때에는 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>를 넣어주면 된다. 이렇게 되면 JavaScript ES6 문법의 코드가 각 브라우저에서 동작할 수 있도록 코드 변환을 해준다.

다만, babel에 대한 세부설정을 하기 위해서는 별도의 Webpack이나 Babel 툴이 필요하다.
그리고 부가적으로 최신 메서드나 객체를 사용하고 싶은 경우에는 babel polyfill을 추가해줘야 한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js" integrity="sha512-uzOpZ74myvXTYZ+mXUsPhDF+/iL/n32GDxdryI2SJronkEyKC8FBFRLiBQ7l7U/PTYebDbgTtbqTa6/vGtU23A==" crossorigin="anonymous"></script>

Read More

210406 Self Development TIL

Thought of the day

게으른 행동에 대해 하늘이 주는 벌은 두가지다.
하나는 자신의 실패이고 또 다른 하나는 내가 하지 않은 일을 해낸 옆사람의 성공이다.


210405
오늘은 06시 39분에 공부를 시작했다. 오늘은 TDD방식으로 Vanilla JavaScript개발을 하는 것에 대한 공부를 시작으로 하루를 시작해보려고 한다.:)

210406
오늘은 07시 정각에 공부를 시작했다. 오늘은 09시까지 알고리즘 문제풀이를 하고, 팀 프로젝트 진행을 위한 회의를 10시에 진행할 예정이기 때문에 1시간 동안(09시 ~ 10시) 기본 설계서를 바탕으로 미리 프로젝트에 대해 파악을 해둘 것이다.

TO DO LIST

  • TDD Practice with VanillaJS

    • #Issue 2 (완료) (210405)


  • 블로그 포스팅

    • Vanilla JavaScript TDD Practice 관련 블로그 포스팅하기 (작성중...)
    • 동기/비동기에 대해서 블로그 포스팅하기 (예정)
    • Closure 에 대해서 공부하고 블로그 포스팅하기 (예정)

  • 팀 프로젝트 준비(내일(화요일) 회의 예정 - 04/06(화))

    • Front-end (3명 - 실제 참여인원 2명) / Back-end (2명)
    • 설계서 확인 후에 구체적으로 어떤 식으로 진행할지 구상하기 (예정)
    • Vanilla JS로 개발시에 필요한 Test code 작성 패턴 익히기 (Front-end) (진행중)

  • 백준 알고리즘 문제풀기

    • 기본 알고리즘 문제 10문제 풀이 (4/10 완료)210405
    • 기본 알고리즘 문제 10문제 풀이 (/10 완료)210406

  • TDD Practice with NodeJS

    • #Issue 10 ~ (부분 완료 - 진행중...)

    Read More