배운 내용
리액트 기초에 대해 학습했다. 싱글 페이지 어플리케이션에 대한 개념을 배우고 리액트의 route, state, props에 대해 배운 후 실습해보았다.
느낀 점
리액트 기초에서 3개의 스프린트를 진행했고 모두 어렵지 않게 원하는 동작을 수행할 수가 있었다. 테스트케이스를 보면서 요구하는 것만을 코딩하는 것은 어렵지가 않았으나 그 동작이 왜 그렇게 동작하는지에 대해 고민해보고 동작 과정을 파헤쳐 생각해보면 내가 잘 이해하고 있는 것인지 모르겠다는 생각이 들어서 스프린트 과제를 제출해놓고 오랜 시간 혼자 고민하고 생각해보았다. 리액트라는 것이 웹 어플리케이션 개발에 있어서 굉장히 유용하게 쓰일 수 있겠다는 것을 깨달았다.
ASCII Code
c언어에서 아스키 코드는 쓰임새가 어렵지가 않았다. javascript에서도 메서드를 알고 있다면 어렵진 않지만 사용법이 조금 다르고 번거롭다고 생각이 들었다. 하지만 조금 더 생각해본다면 c언어에서는 자료형의 타입을 구분하여 선언하고 javascript에서는 let이나 const라는 하나의 키워드로 통용되기 때문에 어쩔 수 없는 절차라는 것을 알 수가 있다. c언어에서는 문자 자체가 아스키코드의 값을 갖고 있다. 가령 'a'라는 문자가 담긴 x라는 변수를 %c 로써 문자로 출력을 한다면 'a'가 그대로 출력되지만, %d 로써 숫자로 출력을 한다면 97이라는 숫자가 출력이 된다. 하지만 javascript에서는 charCodeAt이나 fromCharCode라는 메서드를 사용하여 아스키코드로 변환을 해주고 다시 돌려놓는 과정이 필요하다. 'a'.charCodeAt(); 이 97이라는 값을 갖게 되고 이 값을 다시 문자로 바꾸기 위해서는 String.fromCharcode('a'); 를 입력하면 된다.
React
컴포넌트를 생성하고 다루는 과정이 굉장히 복잡하였다. 가장 의문이 들고 해결하기까지 오래 걸렸던 것은 Tweet 컴포넌트를 생성하고, 태그의 속성명으로 tweet이라는 것이 들어가있던 것이다. 아무리 생각을 하고 검색해보아도 tweet이란 이름의 속성은 존재하지가 않는데 이렇게 해야 동작이 수행되니 난감할 따름이었다. 이 문제를 해결할 실마리를 찾을 수 있는 곳은 Tweet 컴포넌트를 만든 파일 뿐이었기에 그 파일로 가서 확인해보았을 때, 함수선언식의 인자로 준 tweet이라는 변수밖에 그 공간을 채울 수가 없었고 그 부분을 임의의 이름으로 수정하고 동작했을 때는 더미데이터에서 정의된 속성이 정의되지 않았다는 메시지와 함께 동작이 되지 않아서 애를 먹었다. 알고보니 Tweet 컴포넌트에서만 수정이 되어있었고 컴포넌트를 생성하는 곳의 태그도 함께 수정시켜줬어야하는데 그 부분 때문에 이러한 상황이 일어났던 것이었다.
알고리즘 스터디
이번 주 스터디에서 해결해보기로 한 과제는 Stack과 Queue이다. 때문에 이와 관련된 내용을 간략하게나마 나의 말로 정리해보고자 블로그에 적어본다.
Stack
스택은 한 쪽 끝에서만 자료를 넣어나 뺄 수 있는 선형의 자료구조이다. LIFO (Last In First Out) 형태로 되어있어 급식실의 식판을 꺼내가는 순서를 생각해보면 이해가 빠르다. 가장 먼저 쌓인 식판은 가장 늦게 가져가게 되고 가장 늦게 쌓인 식판은 가장 먼저 가져가게 되어있다.
Queue
큐는 스택과는 반대되는 개념으로 FIFO (First In First Out) 형태로 된 선형 자료구조이다. 큐는 흔히 줄을 서서 입장을 기다리거나 할 때 가장 먼저 온 사람이 가장 먼저 들어갈 수 있다는 것을 생각하면 된다.
Stack
class Stack {
constructor () {
this.stack = [];
}
push(num) {
if (num === undefined){
return false;
}
this.stack[this.stack.length] = num;
}
pop() {
if (this.stack.length === 0) {
return -1;
}
let popedNum = this.stack[this.stack.length-1];
this.stack.splice(this.stack.length-1, 1);
return popedNum;
}
size() {
return this.stack.length;
}
empty() {
return this.stack.length ? 0 : 1;
}
top() {
if (this.stack.length <= 0) {
return -1;
}
let topNum = this.stack[this.stack.length-1];
return topNum;
}
}Queue
class Queue {
constructor () {
this.queue = [];
}
push(num) {
if (num === undefined){
return false;
}
this.queue[this.queue.length] = num;
}
pop() {
if (this.queue.length === 0) {
return -1;
}
let popedNum = this.queue[0];
this.queue.splice(0, 1);
return popedNum;
}
size() {
return this.queue.length;
}
empty() {
return this.queue.length ? 0 : 1;
}
front() {
if (this.queue.length <= 0) {
return -1;
}
let frontNum = this.queue[this.queue.length-1];
return frontNum;
}
back() {
if (this.queue.length <=0) {
return -1;
}
let backNum = this.queue[0];
return backNum;
}