네... 그렇습니다... 리액트 너란녀석 또 쉬운척 하고있어서 느슨해지려고 합니다... 이제 막 걸음마를 떼고 슬금 슬금 뛰기 전에 걸음마 연습을 더 탄탄하게 하고 넘어가도록 하겠읍니다.

React 학습 일정

다음주 까지의 학습 일정을... 미리 짜놓고 지키도록 노력해보자!

• 캠프에서 제공 해 주시는 React 강의 듣기 12.05 완료

• 기본 숙제 마무리 12.05 완료
• docs에서 주요 개념 읽기 12.06 완료
• 캠프 심화 강의 듣기 // 12.06 시작
• udemy react 강의 듣기
• 심화 숙제 마무리

이미 어제까지 2개나 했다. 오늘은 docs에서 주요 개념 부분을 읽었고, 이해 되는 부분은 코드에 적용시켜보았다. 이해 안되는 부분은 이런게 있구나~ 하고 넘어갔지만, 앞으로 계속해서 마주치게 되면서 익숙해지고 자연스럽게 알게 되지 않을까 생각한다.

commit 컨벤션 설정

어지럽게 그때그때 멋대로 날리던 커밋을 좀 정해놓고 하고 싶어서, 개인적인 프로젝트에도 적용하기 위한 컨벤션을 노션에 정리했다.

다른분들의 블로그에서 이것 저것 끌어다 써서,,,, 링크는 생략!

내일 할 것

캠프에서 지급해준 리엑트 심화 강의 듣기! !!! !!!!!!

리액트 강의를 막 듣기 시작했다. 사실 요정도까지는 잘 이해가 되긴 하는데 가장 애매한 부분은 도대체 컴포넌트를 어디까지 쪼개야 하는가.... 일단! 투두리스트 만들면서 적용해보고 그 후에 고민하기! 화이팅!

저녁 공부는... 컨디션이 너무 안좋아서 스킵했다. 잠좀 자고 부족한 부분은 주말에 따서 갚는걸로 ㅋ

지난 한주는 JS에 대해서 더 깊게 이해하는 시간이였다. 주중에 코어 자바스크립트 서적에 나와있는 1~5장 내용을 강의로 들었고, 주말에 다시 한번 정리했다. 또, 꾸준히 알고리즘 문제들을 쉬운거라도 풀고자 노력할 수 있어서 좋았고 앞으로도 놓지 않고 열심히 해야겠다는 생각을 했다. 이번주부터는 리엑트 강의가 시작된다. 기초부터 다시 차근차근 제대로된 구조를 짜고자 열심히 배워야 할 듯 하다. 화이팅!

JS 심화 내용 공부

• 데이터 타입
• 실행 컨텍스트
• this
• 클로저

파이썬을 파이썬 답게

파이썬으로 알고리즘 문제들을 공부하고 있는데, 기존 언어들처럼밖에 못쓰는 것 같아서 프로그래머스에 올라온 강의를 봤다. 아래는 새로 배운 메소드들이고, 최대한 활용해 보고자 노력해야겠다.

• divmod
• string.ascii_lowercase
• zip
• Counter
• bisect

클로저란

함수와 그 함수가 선언된 렉시컬 환경의 조합.

왜 사용하는가?

일반적으로 state를 안전하게 은닉 하기 위해 무슨소리냐?

let num = 0;
const increase = function () {
  return ++num;
};
console.log(increase()); // 1
num = 100; // 치명적인 단점이 있다.
console.log(increase()); // 100
console.log(increase()); // 100

이런 불상사가 발생하지 않게 하기 위해서

const counter = (function () {
  //카운트 상태 변수
  let num = 0;
  // 클로저인 메서드(increase, decrease)를 갖는 객체를 반환한다.
  // property는 public -> 은닉되지 않는다.
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return num > 0 ? --num : 0;
    },
  };
})();
console.log(counter.increase()); // 1
console.log(counter.increase()); // 2
console.log(counter.decrease()); // 1
console.log(counter.decrease()); // 0

변수를 함수안에 숨기고, 그 변수를 조작하는 함수를 리턴해서 관리한다. 너무 좋고 안전한 방법. 자주 써먹도록 노력해봐야지

아래는 함수형 프로그래밍에서 클로저를 사용하는 예시

const counter = (function () {
  let counter = 0;
  return function (aux) {
    counter = aux(counter);
    return counter;
  };
})();

function increase(n) {
  return ++n;
}
function decrease(n) {
  return --n;
}
console.log(counter(increase));
console.log(counter(increase));

console.log(counter(decrease));
console.log(counter(decrease));

a ?? b로 사용하는데, a가 null도 아니고 undefined도 아니면 b, 그 외의 경우에는 a로 평가된다.

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

'??'와 '||'의 차이

OR연산자 '||'는, 첫 번째 truthy 값을 반환한다(즉, null, undefined 뿐만아니라 0,"" 등도 반환하지 않게 된다.) nullish 연산자 '??'는 첫 번째 defined된 값을 반환하게 된다. null undefined 뿐만아니라 숫자 0도 함께 들어올 수 있는 변수를 다룰 때 사용하기 좋다.

반복문에서 break/continue와 레이블

2중 3중으로 작성 된 반복문에서, 가장 하위의 반복문의 일정 조건이 맞으면 반복문을 빠져나와야 하는 경우가 종종 생길 수 있다. 그 때 사용할 수 있는 레이블.

outer: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)

    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

함수를 표현하는 두가지 방법 함수 표현식, 함수 선언식

함수 표현식은 함수를 변수 안에 담는 방식, 함수 선언식은 변수에 담지 않고 선언하는 방식이다.

let foo = function() { // 함수 표현식
  ...
};
function bar() { // 함수 선언식

};

두가지 방식의 차이중 가장 큰 것은, 호이스팅에 관한 내용이 될 것 같다. 호이스팅은 좀 더 나중에 다시 정리하도록 하자.

12월이다. 12월이라는게 실감이 안날뻔했는데 날씨가 엄청나게 추워지면서 12월임을 상기시켜줬다. 캠프 종료까지 3개월 남았다. 3개월동안 더 노력하자. 지금까지보다 조금씩만 더 하루하루 어제보다 조금만 더 노력하는걸 목표로 하자.

JS에서의 실행 컨텍스트

실행 컨텍스트(Execution Context)

실행 컨텍스트라는 말조차 몰라서 찾아보았다.

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념

결론적으로 실행 가능한 코드가 실행되기 위해 필요한 환경. 실행 컨텍스트는 객체형태로 콜 스택에 저장된다.

JS는 실행 컨텍스트가 활성화될 때

1. hoisting이 진행된다.
   2. 환경변수가 구성된다.
   3. this 바인딩이 일어난다.

실행 컨텍스트 객체 내에 담기는 정보는 다음과 같다

1. VariableEnvironment a. Environment Record ( 현재 컨텍스트 내의 식별자 정보 ) b. Outer Environment Reference ( 외부 환경 정보 ) c. 선언 시점 LexicalEnvironment의 스냅샷
   2. LexicalEnvironment a. VariableEnvironment와 동일하지만, 실시간으로 반영된다.
   3. ThisBinding a. this 식별자가 바라볼 객체

용어가 어렵다. 용어 정리하고 넘어가자.

Variable Environment

VariableEnvironment: Identifies the Lexical Environment whose environment record holds bindings created by VariableStatements and FunctionDeclarations within this execution context.

ECMAScript 스팩에 있다. 꼬부랑글 너무 어렵다. 번역기의 도움을 받아보자.

실행 컨택스트 내부에서 외부환경이 반영된 변수 정보와 함수의 정의를 포함한 Environment Record를 가지고있는 LexicalEnvironment의 스냅샷

아래부터는 VE로 표기하자. 이정도로 이해하고 넘어가자.

Lexical Environment

VE와 동일하지만, 스냅샷이 유지되지 않고 계속해서 활용된다.

아래부터는 LE로 표기하자.

Lexical Environment

LE는 아래와 같이 구성된다

1. Environment Record ( 현재 컨텍스트 내의 식별자 정보 )
2. Outer Environment Reference ( 외부 환경 정보, Outer )

Environment Record

현재 context와 관련된 코드의 식별자 정보들을 context 내부의 처음부터 끝까지 순서대로 훑어가며 수집

Environment Record가 수집하는 대상

1. 함수에 지정된 parameter

1. 함수 자체
2. var로 선언된 변수 식별자

여기서 hoisting이 발생되는데, Environment Record가 수집하는 대상들은, 실행 컨텍스트가 활성화되면서 해당 코드블럭의 최상단에서 실행된다 라는 개념이다(실재로 동작한다기 보다는, 개발자들의 이해를 돕기 위해 설정된 가상의 개념)

Outer Environment Reference

var a = 1;
var outer = function () {
  var inner = function () {
    console.log(a); // undefined
    var a = 3;
  };
  inner();
  console.log(a); // 1
};
outer();
console.log(a); // 1

위 코드와 같을 때 inner()이 실행되면, inner scope 내부에 a라는 변수 식별자가 선언되었기 때문에 Outer까지 나가지 않고 undefined를 내뿜는다. outer()가 실행되면, outer scope 내부에 a라는 변수 식별자가 선언되어 있지 않기 때문에, 전역 컨텍스트에서 선언된 a를 outer로 참조하게 된다. 따라서 1을 실행. 즉 scope chain상 가장 먼저 발견된 식별자에게만 접근이 가능하다.

this

this는 실행 컨텍스트가 생성될 때 this binding이 실행되며 결정된다.

전역공간에서의 this는 window(전역 객체)를 가리킨다. method에서 this는 호출의 주체가 된다. ( document.append()의 this는 document, document.querySelector("button").addEventListener()의 this는 button ) 함수에서의 this는 binding하지 않으면 window가 된다.

왜 함수에서 this는 window가 될까?

함수가 실행 될 때 실행 컨텍스트가 생성되면서 this가 바인딩되면서 초기화되는 과정을 거치기 때문에... ES6에서 나온 Arrow Function은 this binding 과정을 생략하기 때문에 this가 유지된다.

var obj1 = {
  outer: function () {
    console.log(this);
    var innerFunc = function () {
      console.log(this);
    };
    innerFunc(); // this -> window ( 함수로써 call되었기 때문 )
    var obj2 = {
      innerMethod: innerFunc,
    };
    obj2.innerMethod(); // this -> obj2 ( method로써 call되었기 때문 )
  },
};
obj1.outer(); // this -> obj1 ( method로써 call되었기 때문 )

method 내부 함수에서의 this

var obj1 = {
  outer: function () {
    var self = this; // self에 this를 할당해준다... 정말 간단하게 우회가능
    var innerFunc = function () {
      console.log(self);
    };
    innerFunc();
  },
};

Arrow Function

ES6에서 도입된 Arrow Function은 실행 컨텍스트를 생성할 때 this binding과정 자체가 없기 때문에 this가 초기화되지 않는다.

var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc = () => {
      console.log(this); // obj
    };
    innerFunc();
  },
};
obj.outer();

this의 명시적 binding

• 호출 주체인 함수를 즉시 실행하며 binding 하는 method

1. call method

var func = function (a,b,c){
  console.log(this,a,b,c);
};
func(1,2,3) // window{ ... } 1 2 3
func.call({ x: 1 }, 4,5,6) // { x: 1 } 4 5 6

2. apply method call method와 동일하지만, 나머지 args를 쉼표로 구분하는것이 아닌 배열로 받는다는 차이점이 있다.

   var func = function (a, b, c) {
   console.log(this, a, b, c);
   };
   func.apply({ x: 1 }, [4, 5, 6]); // { x: 1 } 4 5 6
   var obj = {
   a: 1,
   method: function (x, y) {
    console.log(this.a, x, y);
   },
   };
   obj.method.apply({ a: 4 }, [5, 6]); // 4 5 6

3. bind method bind를 통해 호출 방법과 관계없이 특정 this값으로 호출되는 함수를 만들 수 있다.

this.x = 9;
var module = {
  x: 81,
  getX: function () {
    return this.x;
  },
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 9 반환 - 함수가 전역 스코프에서 호출됐음

// module과 바인딩된 'this'가 있는 새로운 함수 생성
// 신입 프로그래머는 전역 변수 x와
// module의 속성 x를 혼동할 수 있음
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

4. 내장 method 중 this를 argument로 받는 method forEach, map, filter, some, every, find, findIndex, flatMap, from, forEach(Set, Map)

깊이있는 공부가 중요한것인가 빠르게 개념만 훑고 넘어간 다음에 나중에 천천히 이해하는게 중요한것인가 라는 고민을 최근에 자주하기 시작했다. 원래는 빠르고 넓고 얕게 이해하는게 목표였는데, 최근 그 한계지점에 닿은 듯한 느낌이 들었다. 프론트엔드 공부를 하다보니 새로운 라이브러리, 새로운 프레임워크 모두 다 결국 JS를 기반으로 사용하게 되어있다. 결국엔 JS의 깊이가 중요하다는 생각에 도달했고, 기존에 안다고 착각했던 것들을 다시 정리하고 갈 타이밍이라는 생각을 했다. 어찌되었든, 결론은 열심히 하자 그거밖에 떠오르지 않는다. 오늘 코피 났으니 열심히 하고 있는걸지도?

어제 대충 정리했던 JS에서 변수의 메모리 할당

JS에서 원시형의 메모리 할당은 다음 과정을 거친다.

let str1 = "string"
let str2 = str1

str1 = "string2"

console.log(str1,str2) // string2 string

• 변수 str1에 대한 메모리 할당

• 데이터 "string"에 대한 메모리 할당
• str1이 "string" 메모리를 참조
• 변수 str2에 대한 메모리 할당
• str2가 str1와 같은 "string" 메모리를 참조
• 새로운 데이터 "string2"에 대한 메모리 할당
• str1이 "string"에 대한 참조를 멈추고, "string2"에대한 메모리를 참조
• str2는 여전히 "string"에대한 메모리를 참조

하지만 Object형의 메모리 할당은 조금 다르다

let arr1 = [0,1,2,3,4]
let arr2 = arr1

arr1[0] = 34

console.log(arr1, arr2) // [34,1,2,3,4] [34,1,2,3,4]

• 변수 arr1에 대한 메모리 할당

• 인덱스 arr[0],arr[1] ... arr[4]에 대한 메모리 할당
• 변수 arr1이 인덱스 arr[0]~arr[4]까지의 메모리를 참조
• 데이터 0,1, ... 4에 대한 메모리 할당
• arr1[0]이 데이터 0에 대한 메모리 참조 ... arr[4]가 데이터 4에 대한 메모리 참조
• 변수 arr2에 대한 메모리 할당
• 변수 arr2가 arr1과 같은 인덱스 arr[0]~arr[4]까지의 메모리를 참조
• 데이터 34에 대한 메모리 할당
• arr[0]이 데이터 0에대한 참조를 그만하고, 데이터 34의 메모리를 참조
• arr2는 arr[0]을 참조하고 있으므로, arr1 === arr2

내일 할 것

• 실행 컨텍스트와 환경변수
• this
• 클로저

변수의 할당에 대해서 궁금해졌다. 여기저기 찾아보다가 오늘아침에 시간을 많이 사용했는데, 마침 캠프에서 진행 해 주시는 JS 심화 강의가 오늘 지급되었고, 첫번째 주제가 내가 딱 궁금해하던 주제였다.

let a = [0,1,2,3,4,5]
let b = a

a = [5,4,3,2,1,0]
a === b // false b = [0,1,2,3,4,5]

왜 얕은복사를 했음에도, b는 변하지 않았는가 에 대해 궁금했었는데,

쉽게 그림을 그려보면 아래와 같다

코드 1번라인에서 분홍색처럼 실행되고, 2번라인에서 파랑색이 실행이 된다, 그 후 4번라인에서 녹색처럼.... 말로 풀어 쓰려니 어렵다. 아직 정확하게 이해되지 않았다는 뜻이겠지? 좀 더 깊게 공부를 해야한다고 생각한다. 화이팅!!!!

오늘 프로젝트 발표회를 진행했다. 간단하고 담백한 피드백을 받았고, 회고도 간단하게 진행했다.

모던 자바스크립트 튜토리얼(3)

프로젝트를 진행한다고 미뤄두었던 자바스크립트 공부 다시 시작했다. 중요한건 꺾이지 않는 마음

모던 JavaScript 튜토리얼 스터디 - 3

내일부터 할 것

꾸준히 JS 스터디를 친구와 함께 진행하기 리엑트 수업 듣기(udemy 강의 들을 예정, 12월 12일 완강 목표!)

4 ** (1/2) // 2
8 ** (1/3) // 2

연산의 순서

JS에서의 연산은 왼쪽에서 오른쪽으로 순차적으로 진행된다.

2 + 2 + '1' // '41'

증감연산자(++,--)에서의 전위형, 후위형

후위형 연산자 i++은 i의 연산이 끝난 후 +1을 해준다. 전위형 연산자인 ++i는 +1을 해준 후 연산을 진행한다.

let i = 0;
1 + i++ // 1

let j = 0;
1 + ++j // 2

String에서의 비교

기존에는 String에서의 비교를 아스키코드를 통해 한다고 생각하고 있었으나, 잘못된 생각이다. String을 비교할 때는 유니코드를 기준으로 비교해준다!

"가" > "나" // false
"A" < "B" // true

또, 긴 문자열을 비교할 때 앞에서부터 하나씩 비교해 나간다.

"가나다" == "가다나" // 가를 비교하고, 같기때문에 2번째를 비교, 다르기때문에 false를 반환

OR 연산자 (||)

OR연산자를 여러 개 체이닝 하면, 첫 번째 truthy를 반환한다. 만약 truthy가 없다면 마지막 피연산자를 반환한다.

alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

아래와 같이 활용할 수 있다.

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

지난주에 진행하였던 프로젝트에도 적용했던 구절이 있었다. 단순히 앞의 변수가 null이면 뒤의 변수를 지정해주는 역할이였는데, 원리를 알고 나니 이렇게 동작하는구나! 반가웠다.

`${postUserEmailId || '@익명사용자'}`
`${userImage || './assets/imgs/nullimage.png'}`

+와 !!

자료를 숫자형으로 바꾸거나, 불리언형으로 바꿀 때 사용할수 있는 트릭이다.

+"5" // 5
!!null // false
!!"string" // true

이번주 내내 프로젝트 열심히 달렸다. 평소에 늦게까지 안하고 컨디션 관리를 위해 왠만하면 11시정도에는 취침하려 노력했는데, 이번주는 계속 컴퓨터앞에 앉아있다가 자정을 넘겨 취침했다. 덕분에 피로가 엄청나게 쌓인 기분이다. 그래도 다행히 마감기한을 잘 지켜서 프로젝트가 끝났다.

TMIDOL

시작은 거창했다... 지도 서비스도 넣어보고싶었고, 태그를 2가지로 분류하고 싶기도 했고... 열심히 구상했지만, 혼자 할수있는건 없다. 팀원들과 상의하고 지금 당장 구현하기 어려워 보이는 기능들 걷어내고.. 그러다보니 좀 단촐해지긴 했지만, CRUD + like + 검색기능 등... 그래도 좀 이것 저것 많이 구현했다. 제일 뿌듯했던 점은 토요일 코딩하며 중복되는 코드를 함수화시켜 리팩토링을 진행했다. firestore에 요청해 필요한 자료만 골라 썼던 before 코드를, 애초에 요청할 때 부터 query화 시켰고, 받은 데이터를 가공해서 뿌려주는 부분을 함수화시켜 3곳에 중복되었던 코드가 없어졌다. 그래도 아쉽고 또 아쉽다 항상 프로젝트를 마무리 할 때마다 느끼는 감정인 것 같다. 하지만 마감기한을 잘 지켜 요구사항만큼을 만들어내는 능력도 중요하다 생각한다.

또, 이번 프로젝트 기간동안 팀원들과의 격차가 많이 줄어들었다고 팀원들이 생각했으면 좋겠다. 최대한 많이 알려주고 내가 생각하는법, 코드 작성하는법을 알려주려 노력했는데, 이번에 코딩이 처음인 팀원들이 많이 습득하고 뺏어갔다고 느꼈으면 좋겠다. 화이팅 우리 팀원들 너무 고생 많았다. 3개월 뒤에는 모두 비슷한 실력으로 주니어로써 첫 발걸음을 내딛었으면 한다. 다 할수있다. 중요한건 꺾이지 않는 마음.

프로젝트 마감기한을 지키기 위해 매일같이 12시까지 코딩하고 새벽에 일어나서 산책가고....
코딩한다는 핑계로 학습을 정리하지 못했다. 지금이라도 해본다.

좋아요 구현하기

좋아요를 구현할 때 이벤트리스너를 SVG 객체에 담았다. 그러다 보니 그 안에 PATH 객체에도 함께 적용이 되었는데, 클릭하는 미묘한 지점에 따라서 event의 target이 바뀌어버려서 DOM 객체 선택에 애를 먹었다. BEFORE)

document.querySelector('.redHeart').classList.remove('hidden')

5시간 넘게 고민하다, 결국 GG 튜터님께 찾아갔고, 3분만에 해결되었다. closest라는 선택자를 사용해서 DOM을 선택하였다.

After

    event.target
      .closest('.likes')
      .querySelector('.redHeart')
      .classList.remove('hidden');

하나 또 배웠다. 자바스크립트는 배울게 천지다 정말

오늘 꺾일뻔 했다 너무 잠이와서 안쓰고 자고싶었지만 그럼 안된다 저런사람도 열심히 하는데

오늘 한 일은 무엇인가

오늘은 라이브 코딩을 진행했다. 팀원분들이 구현하기 힘들어 하셨던 부분들을 하나하나 콘솔을 찍어가면서 같이 문제를 해결 하기로 했다. 우여곡절 끝에 CRUD의 기본은 구현 완료. 이제 나머지 기능 구현을 구현하면 되겠다.

내일 할 일

1. 로그인/회원가입 모달 스타일링
2. 깃헙, 구글 소셜 로그인 기능
3. 수정,삭제 버튼 및 인풋 스타일링
4. 좋아요 기능 제작 및 인기글 리스트 보여주기
5. 내가쓴 글 모아보기
6. 예외처리들 진행하기(이게 제일 시간 많이 잡아 먹을 것 같긴 하다...)

중요한 것은 꺾이지 않는 마음

정말로. 중요하다. 화이팅.

(before)

export const onFileChange = (event) => {
  const theFile = event.target.files[0]; // file 객체
  const reader = new FileReader();
  reader.readAsDataURL(theFile); // file 객체를 브라우저가 읽을 수 있는 data URL로 읽음.
  reader.onloadend = (finishedEvent) => {
    // 파일리더가 파일객체를 data URL로 변환 작업을 끝났을 때
    const imgDataUrl = finishedEvent.currentTarget.result;
    localStorage.setItem("imgDataUrl", imgDataUrl);
  };
};

1) 어디서 에러가 발생했는가?

• 로컬스토리지에 이미지를 임시 저장하는 과정에서 에러가 발생하였다.
• 간단하게 핸들링할 수 있을것이라 생각했는데, 내가 생각한 방법에 확신이 없어 여러번 시행착오를 겪었다.

2) 왜 발생했는가?

• 크롬에서 로컬스토리지는 기본적으로 String을 저장하는 공간으로 활용되기 때문에 5Mb의 용량제한이 있다.
• 이미지를 Data 객체로 변환해 로컬스토리지에 저장해버리면 5Mb 이상의 String으로 변해버려 발생한 오류였다.

3) 문제 해결 접근 방법

• 첫번째, try-catch 문으로 로컬스토리지에 저장을 시도한 뒤 로컬스토리지에 저장이 불가능하면 catch로 오류 핸들링
  • 이 방법으로 처음 대응을 하였지만, 뭔가 맘에 들지 않았다. 좀 더 근원적인 방법을 찾기로 했다.
• 두번째, input type file에 이미지가 등록되는 순간, 이미지 파일의 용량을 if문으로 검사하여, 용량이 초과되면 오류메시지와 함께 retrun처리
  • 결국 이 방법이 조금 더 앞쪽에서 미리 오류를 핸들링 할 수 있는 방법이라 판단되어서 이 방법으로 처리하게 되었다.

(after)

export const onFileChange = async (event) => {
  localStorage.removeItem('imgDataUrl');
  const theFile = event.target.files[0]; // file 객체

  if (theFile.size > 3900000) {
    alert('사진 용량이 너무 큽니다! 다른 사진을 첨부해주세요!');
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(theFile); // file 객체를 브라우저가 읽을 수 있는 data URL로 읽음.
    reader.onloadend = (finishedEvent) => {
      // 파일리더가 파일객체를 data URL로 변환 작업을 끝났을 때
      const imgDataUrl = finishedEvent.currentTarget.result;
      localStorage.setItem('imgDataUrl', imgDataUrl);
    };
  }
};

4) 아쉬운점

• 사실 이미지를 로컬스토리지에 저장하는것이 아닌 다른 방법으로 이미지 처리를 하는 것이 더 좋은 방법이라는 생각이 든다. 하지만 지금 프로젝트의 기한이 많지 않기 때문에, 일단 임시방편으로 저렇게 구현 해 놓고 프로젝트 제출 전 더 구현할 시간이 남는다면 다른 방법을 도입 해 보는것으로 생각하였다.

2. 모던 자바스크립트 튜토리얼 스터디

친구와 함께 진행하고 있는데, 서로 너무 바빠서 근 일주일만에 다시 스터디를 진행하였다. 모던 자바스크립트 튜토리얼-2

자바스크립트에서는 타입을 8가지로 정의한다.

• Number
  • 일반적인 숫자 외에, Infinity, NaN등이 포함된다.
• BigInt
  • 자바스크립트에서는 2^53-1보다 큰값 또는 -2^53-1보다 작은 정수는 Number로 표현할 수 없다.
  • 그 때 사용하는 type
  • int에 n을 붙혀 사용한다.
  • const bigInt = 1234567890123456789012345678901234567890n;
• String
  • 자바스크립트에서는 String과 Char을 따로 구분하지 않는다.
  • 백틱(``)을 사용하면 문자열 내에서 변수나 표현식을 사용할 수 있다.
• Boolean
• null
  • 다른 언어들과 다르게 자바스크립트에서는 null을 존재하지 않는 값(nothing), 비어있는 값(empty), 알 수 없는 값(unknown)을 나타낸다.
• undefined
  • 값이 할당되지 않은 상태를 나타낼 때 사용한다.
• Object
• Symbol

또, 자바스크립트에서 type을 구분하기 위해 typeof 연산자를 사용하는데, 예외사항이 몇가지 있다.

typeof null // "object"
typeof alert // "function"

위 두 예시 모두 하위호환을 위해 잘못된 언어의 오류를 유지하고 있는 형태이다.

• null의 type은 null이지만, 하위호환을 위해 object로 표현된다.
• alert의 type은 object지만, 함수는 function으로 표현된다.

프로젝트를 진행하면서, 구현 => 어찌어찌 된다. 하지만 많은 부분에서 부족함을 느끼고 있다. 특히 기초! 기초에 대한 부족함이 절실하게 느껴진다. JS뿐만 아니라, HTML CSS도 부족하다. 더 연습해야겠다는 생각을 했다. 모양을 만들고 구현할 수 있지만, 더 유연하게 할 수 있는 부분이 충분히 있을 것 이라 생각한다. 잘 찾아보고 정리해 두려 한다.

1. Semantic Markup

• 시멘틱 마크업을 사용해야 하는 이유?
  1. SEO 최적화
     • 각 사이트들의 검색엔진의 알고리즘이 다르긴 하지만, 결국 태그와 내용을 읽어 중요한 부분을 추출한다는 공통점이 있다. 크롤링을 진행하는 알고리즘이 좀 더 중요한 부분을 잘 캐치하고, 보여줄 수 있다.
  2. 가독성
     • div와 span으로 잔뜩 그려진 HTML 문서를 읽으면, 그 문서를 해석하는데 많은 시간이 소요된다. 또 다른 사람이 작업한 태그들을 수정해야하는 경우 그 구조를 파악하기 어렵다. 반면 시멘틱 마크업을 준수한 HTML 문서는 한결 수월하게 읽히는 장점이 있다.
  3. 웹 접근성
     • 국내에서는 웹 접근성을 지원하기 위해 디테일하게 HTML을 작성하는 곳은 많이 없다곤 한다. 하지만 스크린리더 또는 키보드로만 웹을 이용할 수 있게 해주는 등 도움이 필요한 사용자들이 웹을 이용하는 어플리케이션은 대부분 HTML태그를 기반으로 작동된다.

• 시멘틱 마크업의 종류

  • 시멘틱 마크업의 종류는 100여개정도가 존재한다고 한다. (MDN 문서) 그중 자주 사용되는 시멘틱 마크업들을 정리해 보고자 한다.

  • header

    • 일반적으로 소개, 탐색 등을 나타낸다.
    • mdn에서는 문서 중간중간 사용하는 법을 소개 해 주는데, 일반적으로 HTML의 상단에 HTML의 소개와 탐색을 위해 사용되는 것 같다.
    • 주로 h1~h6 태그를 담는데 사용되지만, 검색 등의 요소를 담기도 한다.

  • nav

    • HTML 문서 중 현재 페이지 내부 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다.
    • 주로 메뉴, 목차, 인덱스 등을 담는데 사용된다.

  • aside

    • 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. ( HTML 문서에서 사라져도 주요 내용의 의미가 변하지 않는 부분 )
    • 주로 사이드바 또는 콜아웃으로 표현된다.

  • main

    • body 내부의 주요 콘텐츠를 나타낸다.
    • HTML의 핵심 주제나 기능에 직접적으로 연결 또는 확장되는 콘텐츠로 이루어진다.

  • article

    • HTML에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
    • 게시판, 블로그 포스트, 뉴스 기사등이 여기 해당된다.

  • section

    • 문서의 독립적인 구획을 나타내고, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
    • 주로 h1~h6 태그를 포함하는데, 항상 그렇진 않다.
    • div와 사용법이 비슷하지만, 그저 스타일을 위한 박스인 경우 section이 아닌 div를 사용해야한다.

  • footer

    • 일반적으로 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
    • herader 태그와 마찬가지로 mdn에서는 문서 중간중간 사용하는 법을 소개 해 주는데, 일반적으로 HTML 하단에 HTML의 정보를 담는데 사용되는 것 같다.

시멘틱 마크업 예시 사진

내일 정리할 것

• CSS display

오늘 하루종일 프로젝트 진행을 했다. 오전에 파이어베이스 세팅진행, db에 더미 데이터를 넣는 것 까지 해봤다. 오후에 포스트를 작성하는 UI를 만들었는데, addEventListener가 하루종일 나를 괴롭혔다.

1. 최초 init html을 DOM을 통해 뿌려준 후 이벤트리스너를 추가하는게 목표였는데, 이벤트리스너가 먼저 추가되고, init html이 추가되어 null을 리턴해버렸다.

-> 아직 해결못함. 다시 해결 도전하기.

2. createElement로 만든 DOM 노드에 addEventListener를 적용했을 때, 상위 객체까지 이벤트가 적용되는 현상이 있었다. 껐다 켰더니 해결됬다. 재부팅 만능.

내일 할 것

• 내일 팀원들의 진행사항을 확인하고 다음 목표 실행
• 팀원들이 잘 모르거나 막히는부분 있으면 적극적으로 도와주기.
• 깃허브에서 코드리뷰 받기.

알고리즘의 베이스에 대해 노력했던 한주. 지금 당장 알고리즘을 공부하는 이유는 코딩테스트를 위해. 알고리즘을 위한 문제해결법, 접근법

2. 자료구조

코딩테스트 공부를 위해 꼭 거쳐가야하는 나에게는 정복해야하는 산 같은 것. 열심히 개념부터 이해하려 노력했다.

해시테이블, 이진검색트리 트리 탐색, 힙 우선순위 큐

3. 특강

진행중인 캠프에서 특강들을 들었다. 바닐라 JS로 SPA 구현하기 DB란? Firebase 프로세스와 스레드

4. 자바스크립트

결국 프론트엔드 개발자를 꿈꾸는 나로서는 가장 친숙해져야하고, 능숙해져야하는 언어. 지금까지 구현에 급급한 코드를 짜왔다면, 조금 더 깊은 이해를 위해 스터디에 참여하기로 하였다. 자바스크립트 튜토리얼 -1

5. 새로운 프로젝트 시작

새로운 팀 프로젝트가 시작되었다. 구현 목표는 바닐라JS를 베이스로 뉴스피드, 로그인, 회원가입을 포함한 CRUD. 백엔드단은 Firebase를 이용한다. 설계단계가 끝이나고 에자일 목표 설정과 스플린트가 남았다. 다음 한주 화이팅해서 목표치보다 더 멋진 결과물을 내는게 목표 프로젝트 청사진 프로젝트 S.A.

6. 사이드 프로젝트

이번 주에 크게 진전시키지 못한것이 너무 아쉽다. 이번 주 진행 한 사항

• 로그인 암호화 - bcrypt을 사용하였다.
• 로그인 상태 전역 관리 - 로컬 스토리지를 이용하기로 했다. (추후 토큰을 이용한 쿠키 or 세션으로 리팩토링할 것)
• fetch -> axios 리팩토링 - 완료. 문법이 엄청 가벼워졌다. 몹시 마음에 든다.

다음 주 진행 할 사항

• Github.io 블로그 만들기 -> zommkoding님의 Gatsby 테마 사용해 볼 예정. 난관이 많을 것 같은데 화이팅...! Gatsby 테마로 GitHub Blog 만들기 posted by 줌코딩
• 사이드 프로젝트 index 페이지 구성 -> 디자인은 완성되었으니 컴포넌트 구성만 잘 하면 될 것 같다.
• 하루 한문제 이상 코딩테스트 문제 풀기 -> 낮은 난이도의 문제이더라도 분명히 배울점이 있다. 아직 파이썬이랑 친해지는 과정 잊지말기.

7. 다음 한주를 위한 계획

1. 최대한 프로젝트를 완성도 있게 진행하는것이 목표.
2. 완성도 있는 프로젝트를 위한 세밀한 계획 설정.
3. 전체적인 코드 품질을 위한 코딩,커밋 컨벤션과 짜임새있는 브렌치 전략 세우기.
4. 안되도 포기하지말고 끝까지 물고 늘어지기.

CPU - RAM - HDD

CPU는 요리사 RAM은 요리테이블 HDD는 요리재료... 너무 좋은 비유라 잘 이해되었다.

1) 프로세스

• 메모리(RAM)에 적재되어 실행되고 있는 프로그램의 인스턴스
• OS로부터 시스템 자원을 할당받은 작업의 단위(CPU시간, 메모리 영역)
• 프로세스는 독립된 메모리를 할당 받는데, 이 공간을 프로세스 주소 공간으로 만든다.
• 프로세스 주소 공간은 Code, Data, Stack, Heap으로 구성된다.
• 프로세스는 최소 1개의 스레드를 갖는다

2) 스레드

• 스레드는 프로세스 자원을 이용하는 여러 실행 흐름의 단위다.
• 스레드는 프로세스 주소 공간 중 Stack영역을 할당받는다.

3) 멀티 프로세스

• 하나의 프로그램을 여러 개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하도록 하는 것.
• 여러 프로세스 중 하나에 문제가 발생하면, 그 프로세스만 죽는 것 이상으로 다른 영향이 확산되지 않음.
• 하지만 문맥 교환과정에서 캐쉬 메모리 초기화 등 무거운 작업이 진행되고 많은 시간이 소모되는 등의 오버헤드가 발생하게 된다.
  • 문맥 교환은 여러 프로세스를 처리해야 하는 상황에서는 돌아가면서 여러 프로세스 작업을 처리하는데 이 과정을 의미한다.

4) 멀티 스레드

• 하나의 프로그램을 여러 개의 스레드로 구성하고 각 스레드가 하나의 작업을 처리하도록 하는 것.
• 프로세스에 비해 메모리 공간과 시스템 자원 소모가 줄어들게 된다.
• 통신방법이 간단하고, 비용이 적고 빠르다.
• 하지만, 다른 스레드에서 사용중인 변수나 자료구조에 접근하여 엉뚱한 값을 읽어오거나 수정해 싱크가 안맞게 될 수 있다.

5) 비동기

• 블로킹, 논블로킹(제어권의 관점)

  • 블로킹
    • 함수 A가 함수 B를 호출한 뒤, 함수 B의 리턴값이 올 때까지 기다린 후 진행되는 것.
    • 제어권을 넘겨주는 것.
  • 논블로킹
    • 함수 B의 작업 완료 여부와 상관 없이 진행되는 것.
    • 제어권을 넘겨주지 않는 것.

• 동기, 비동기 (호출되는 함수의 작업 완료 여부를 신경 쓰는가?)

  • 동기
    • 함수 A,B를 호출할 때, A가 B의 리턴값을 계속 확인하면서 신경 쓰는 것.
  • 비동기
    • A가 B의 작업 완료 여부는 신경 쓰지 않는 것.

2. 프로젝트 시작

오늘 오전부터 저녁식사 전까지 프로젝트 기획 -> 와이어프레임 제작 -> 설계의 단계를 모두 해냈다... 칭찬해 나자신... 피그잼을 처음 사용해 보았다. 재밌었.....는데 어렵다... 더 열심히 공부 해야지...

다음주 한주동안 프로젝트 열심히 달리자,,, 화이팅!

HTML상에서 자바스크립트 프로그램을 삽입하기 위해 사용.

script 태그의 attribute

• src : 외부 스크립트 불러오기 ( 파일과 URL을 불러올 수 있다. )

  <script src="/path/to/script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

• 스크립트가 길어진다면 별도의 분리된 파일로 만들어 저장하는 것이 유리하다.

  • 브라우저의 작동방식과 관련이 있는데, HTML에 스크립트 파일을 삽입했을 시 다운받아 캐시에 저장한다. 여러 페이지에서 동일한 스크립트를 사용하는 경우, 캐시에서 바로 가져와 사용할 수 있기 때문에 때문에 HTML 내부에서 작성했을 시보다 유리하다.

• src attribute가 있으면, script 태그 내부의 코드는 실행되지 않는다.

  <script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
  </script>

2. 엄격 모드

ES5 배포 당시 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능이 변경됨에 따라 하위 호환성 문제가 생길수 있기 때문에, 변경사항이 대부분 ES5에서 기본적으로 실행되지 않게 설계되었다. 대신 use strict라는 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화 되게 설계하였다.

use strict

"use strict"는 문자열처럼 생겼지만, 자바스크립트 최상단에 오면 전체가 모던한 방식으로 동작한다. 하지만 ES6의 배포 이후 class와 import 등의 구조를 사용하게 되면, 자동적으로 엄격 모드가 적용되기 때문에 이 둘의 구조를 사용하게 된다면 스크립트에 "use strict"를 삽입할 필요가 없다.

3. 변수

변수의 명명 규칙

• 관습적으로 camelCase가 사용된다.
• '$'와 '_'는 변수명에 사용할 수 있다.
• 변수명은 숫자로 시작될 수 없다.
• 변수명에 하이픈 '-'은 사용될 수 없다.
• 변수명에 예약어(let, return등)는 사용할 수 없다.
• const를 사용할 때 대문자로 작성하는 경우가 있는데, 색의 Hex코드 등 일반적으로 '하드코딩'한 값으 별칭을 만들 때 사용한다.

  const COLOR_RED = "#F00";
  const COLOR_GREEN = "#0F0";
  const COLOR_BLUE = "#00F";
  const COLOR_ORANGE = "#FF7F00";
  

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다. let color = COLOR_ORANGE; alert(color); // #FF7F00

### 바람직한 변수명
* 변수명은 항상 간결하고, 명확해야 한다.
* `userName`, `shoppingCart`등 사람이 읽을 수 있는 이름을 사용한다.
* 줄임말이나, `a`,`b`,`c`등의 짧은 이름은 피한다.
* 최대한 서술적이고 간결하게 명명한다. `data`,`value`같은 추상적인 이름은 최대한 피한다. 다만, 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때 이런 이름을 사용하기도 한다.