사이드 프로젝트를 하기로 결심했다면 각자 어떤 라이브러리를 사용할지 또는 어떤 프레임워크를 사용할지 결정했을 것이다. 그런데 만약에 그 프로젝트가 완성이 되었다고 가정하고, 누군가 그 프로젝트에 대해서 구체적으로 왜 그 라이브러리(혹은 프레임워크)를 사용했나요? 라고 묻는다면 뭐라고 대답할지 생각해본 적이 있는가?
나 역시도 이전에는 그냥 요즘 많이 언급되고 실무에서 많이 쓰인다는 이유로 학습을 한 경우가 많았다. 물론 뭔가가 이전에 이미 존재했던 것들에 비해 나은 점이 있으니 각광을 받고 있는 것이다.

하지만 지금 이 시점 이후에 하려는 사이드 프로젝트는 사용하려는 기술에 대해 제대로 이해하고 누군가가 물어봐도 확실하게 대답할 수 있을 정도로 알고 있다는 전제하에 시작하려고 한다.

2021-03-19

JavaScript

210319 JavaScript와 친해지기 - 조금은 낯설은 스코프에 대한 이야기

이번 포스팅에서는 아직은 조금 낯설은 스코프(Scope)에 대해서 정리를 해보려고 한다.

ECMAScript의 자바스크립트 명세를 보면 자료형, 문법, 연산자, 실행코드와 실행컨텍스트 등 다양한 명세로 구분이 되어있는데 그 중에서 살펴 볼 파트는 9장 실행코드와 실행 컨텍스트(Executable Code and Execution Contexts)이다.

ft ECMA-262/March 18, 2021

ECMAScript 2022 Language Specification(Chapter.9)
https://tc39.es/ecma262/#sec-executable-code-and-execution-contexts

스코프(Scope)

2021-03-19

TIL:Self-Development

210319 Self Development TIL

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

블로그 포스팅
- 기본기가 있는 개발자가 되기 위한 준비 (작성중...)

2021-03-19

To-Be-Good-Front-end-Developer

210319 기본기가 있는 개발자가 되기 위한 준비

기본기가 있는 개발자가 되기 위한 준비

요즘과 같이 IT 변화의 흐름이 빠른 상황에서 새로운 기술이 나왔을때 빠르게 적응하기 위해서는 특정 프레임워크를 잘 쓰는 개발자가 아닌 근간이 되는 기술들의 기본기가 잘 다져진 개발자가 되어야 한다고 생각한다.
또한 개발이란 혼자서 하는 것이 아닌 여러 사람들과 하는 것이기 때문에 커뮤니케이션에서 기본이 되는 정확한 용어와 명확한 근거를 가진 개발자가 되어야 한다.

3주전부터 읽고 있는 타입스크립트 책(o’reilly typescript)를 읽으면서 책의 중간 부분에 책의 저자가 개발자들 사이에서 통용되는 용어를 사용하여 책의 내용을 작성하였다 라고 명시하는 부분이 있다. 이 부분을 읽고나서 느낀점은 실무에서 여러 사람들과 특정 문제에 대해서 해결점을 찾아가는 과정에서 여러 대화가 오가는데 그 과정에서 개발자들 사이에서 암묵적으로 약속된 용어를 사용해서 대화를 한다면 좀 더 원활한 커뮤니케이션이 될 것 같다고 생각했다.
무언가가 안되는 상황에서 구체적인 상황을 설명할때에도 정확한 용어와 명확한 근거를 기반으로 설명을 한다면 다른 개발자분들에게 협업을 잘하는 개발자라는 이미지를 줄 수 있을 것이라고 생각한다.

이러한 정확한 용어를 익히기 위해서는 우선 영어 원문과 발음을 틈틈이 찾아보고, 처음부터 공부할때 확실하게 용어와 개념을 공부하는 습관을 들여야 겠다고 느꼈다.

그 다음으로 이 명확한 근거는 어떤 기술 스택을 선택할때에는 명확하게 어떠한 이유로 해당 기술 스택을 선택했는지에 대해 설명할 수 있어야 한다.

2021-03-18

TIL:Self-Development

210318 Self Development TIL

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

JavaScript 메인 수업
- 자바스크립트 6일차 예습 (완료)
  → ~~28.Number ~ 32.String 예습하기 (31.RegExp(정규표현식)은 난이도가 있는 내용이기 때문에 세심하게 읽기)~~ (완료)
  → 33.7번째 데이터 타입 Symbol ~ 34.이터러블 추가로 예습하기 (예정)
Read More

2021-03-18

ReactJS

210318 React TIL - React hook / useEffect, useMemo, useCallback, React.memo, useReducer

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

useEffect를 사용하여 mount/unmount시 작업설정

useEffect를 사용하여 생성한 컴포넌트가 처음 화면에 나타났을때와 화면에서 사라지게 될 때 특정 작업을 수행하도록 만들 수 있다. 그리고 추가적으로 컴포넌트의 특정 props나 상태가 업데이트 될 때 마다 전/후에 특정 작업을 하게 만들 수도 있다.
우선 컴포넌트가 mount될 때 실행하는 callback 함수의 경우에는 useEffect의 첫 번째 인자로는 실행할 callback 함수를 넣어주고, 두 번째 인자로는 deps(dependency)로 의존되는 값을 넣어준다. deps에 빈 배열을 넣어주는 경우, 컴포넌트가 처음 화면에 나타날때만 해당 callback 함수가 실행된다.
컴포넌트가 unmount될 때 실행하는 callback함수는 useEffect의 callback함수 내부에서 반환문(return)으로 작성을 해준다.

UserList.js

function User({ user, onRemove, active, onToggle }){
    const {username, email, id} = user;
    useEffect(() => {
        console.log('컴포넌트가 화면에 나타남');
        return () => {
            console.log('컴포넌트가 화면에서 사라짐');
        }
    },[]);

    ......

2021-03-17

TIL:Self-Development

210317 Self Development TIL

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

JavaScript 메인 수업
- 자바스크립트 5일차 예습
  → 28.Number ~ 32.String 예습하기 (31.RegExp(정규표현식)은 난이도가 있는 내용이기 때문에 세심하게 읽기)
  → 33.7번째 데이터 타입 Symbol ~ 34.이터러블 추가로 예습하기
Read More

2021-03-16

JavaScript

210316 JavaScript TIL 5일차/6일차 - ES6 함수의 추가 기능과 배열

Preview

이번 예습 범위는 26장 ES6 함수의 추가 기능과 27장 배열이었다. 이전 예습범위를 공부하면서 자바스크립트가 프로토 타입 기반의 언어라는 부분과 함수형 객체 인스턴스가 어떻게 생성이 되는지에 대해 좀 자세히 공부를 했었는데, 그 덕분에 여러가지로 수월하게 26장의 내용을 이해할 수 있었던 것 같다. 이번 기회로 프로토 타입과 관련한 내용을 개인적으로 찾아가며 학습할 수 있었던 좋은 기회였던 것 같다.
콜백함수와 고차 함수의 개념, 프로토 타입 메서드, 정적 메서드 등의 개념을 이해하고 27장을 보니 이전에는 단편적으로만 보였던 메서드들이 다양하게 구분되어 보이기 시작했다. 역시 아는만큼 보이는 것 같다.
아직 개념적으로 공부해야 될 부분이 많기 때문에 지금 느끼는 재미로 좀 더 확장성 있게 공부하도록 해야겠다.

정적 메서드, 프로토타입 메서드, 인스턴스 메서드