Homile

스택(Stack)

데이터를 차곡차곡 쌓아 먼저 들어간 데이터가 나중에 나가는 후입선출(Last In First Out, LIFO) 방식을 사용하는 자료구조이다.

JavaScript Code 및 사용 메서드

• push(): 삽입
• pop(): 삭제

let stack = [];

stack.push('data 1');	
console.log(stack);			// ['data 1']	
stack.push('data 2');
console.log(stack);			// ['data 1', 'data 2']
stack.push('data 3');
console.log(stack);			// ['data 1', 'data 2', 'data 3']

stack.pop()
console.log(stack);			// ['data 1', 'data 2']

큐( Queue)

먼저 들어온 데이터가 먼저 나가는 선입선출(First In First Out, FIFO)방식을 사용하는 자료구조이다.

현실에서 줄을 설때 앞사람부터 나가는 형식이라고 생각하면 된다.

JavaScript Code 및 사용 메서드

• push(): 삽입
• shift(): 삭제

let queue = [];

queue.push('data 1');			
console.log(queue);			// ['data 1']
queue.push('data 2');
console.log(queue);			// ['data 1', 'data 2']
queue.push('data 3');
console.log(queue);			// ['data 1', 'data 2', 'data 3']

queue.shift();
console.log(queue);			// ['data 2', 'data 3']

덱(Deque)

스택과 큐의 결합형 자료구조이며, 어디서든 데이터가 나가고 들어올 수 있다.

JavaScript Code 및 사용 메서드

• push(): 삽입
• unshift(): 삽입
• pop(): 삭제
• shift(): 삭제

let deque = [];

deque.push('data 1');		
console.log(deque);				// ['data 1']
deque.unshift('data 2');
console.log(deque);				// ['data 2', 'data 1']
deque.push('data 3');
console.log(deque);				// ['data 2', 'data 1', 'data 3']

deque.shift();
console.log(deque);				// ['data 1', 'data 3']
deque.pop();
console.log(deque);				// ['data 1']

객체(Object)

원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이며, JavaScript의 객체는 key와 value로 구성된 property들의 집합이다.

객체의 구조

• key와 value가 존재
• key: 빈 문자열을 포함하는 모든 문자열
• value: 모든 데이터 값

let obj = {};
  // 'key'     'value'
obj['name'] = 'cho';
console.log(obj);		// {name: 'cho'}

객체 생성

• {} 객체 리터럴 방식으로 생성할 수 있다.
• new Object 함수로 생성할 수 있다.

// 객체 리터럴 방식
let obj1 = {};

// Object 생성자 함수
let obj2 = new Object();

객체 key, value 할당

• 객체 생성과 동시에 key와 value가 할당이 가능하다.
• key값을 사용하여 값을 재할당 할 수 있다.

// 선언과 동시에 할당
let obj = {
   name: 'cho',
   age: 20
};

// 객체 key 생성 및 value 할당
obj['year'] = 2022;		// {name: 'cho', age: 20, year: 2022}

// 값 재할당
obj['year'] = 2021;		// {name: 'cho', age: 20, year: 2021}

객체 key, value 출력

• 객체[key]: key값은 항상 문자열로 작성해야 한다.
• 객체.key: 객체의 key를 사용하여 출력한다.
• 변수 사용: 변수에 해당 객체의 속성을 문자열로 할당시켜 객체[key] 방식으로 출력한다.

let obj = {
   name: 'cho',
   age: 20
};

// []안에 문자열로 출력
obj['name'];		// 'cho'

// 객체.객체속성으로 출력
obj.name;		// 'cho'

// 변수를 이용한 출력
let str = 'name';
obj[str];		// 'cho'

참고자료

https://poiemaweb.com/js-object

배열(Array)

순서가 있는 값을 저장할 때 사용하는 자료구조이며 배열을 사용하는 자료구조의 대표적인 예로 스택, 큐, 덱이 있다.

배열의 구조

• 요소가 들어있는 방의 번호를 인덱스라고 하며, 정수형만 입력이 가능하고 0부터 시작한다.
• 배열에 값을 삽입하는 js 메서드는 push(), unshift()가 있으며, 삭제하는 메서드는 pop(), shift()가 있다. 
  자세한 내용은 자료구조 스택에서 다룬다.

배열생성 및 출력

• []을 사용하여 빈 배열을 생성할 수 있다.
• new Array()를 사용하여 빈배열을 생성할 수 있다.
• [](배열리터럴)을 사용하여 '배열[인덱스]'형식으로 요소를 출력 할 수 있다.

let num = [32, 43, 54];
let name = new Array('cho', 'kim', 'park');

console.log(num);		// [32, 43, 54]
console.log(name);		// ['cho', 'kim', 'park']

// num의 1번째 인덱스의 요소 출력
console.log(num[1]);	// 43

// name의 0번째 인덱스의 요소 출력
console.log(name[0]);	// 'cho'

// name의 마지막번째 인덱스 요소 출력
console.log(name[name.length-1]);	// 'park'

배열의 요소 재할당

let num = [32, 43, 54];

console.log(num);		// [32, 43, 54]

num[2] = 79;			// 54에서 79로 요소를 재할당
console.log(num);		// [32, 43, 79]

2차원 배열

let num = [[32, 43], [54, 65], [24, 89]];

console.log(num[1]);		// [54, 65]
console.log(num[1][0]); 	// 54

📌 날씨가 쌀쌀해서 공부하기 정말 좋다!!

📗 오늘 학습한 내용

JavaScript

• 배열
• 객체
• 스택, 덱, 데큐 자료구조
• [baekjoon]문제풀이

알고리즘 풀이에서 가장 많이 쓰이는 배열과 객체에 대해서 학습을 진행하였다. 값을 할당하는 방법, 재할당, 사용법에 대해서 다시 짚고 넘어갈 수 있는 계기가 되었다.

배열과 객체를 배우게 된다면 당연히 알게되는 스택, 덱, 데큐 자료구조가 있는 데 이것은 이미 Python 알고리즘 스터디를 통해 알고 있는 내용이었다. 이것을 JS형식으로 고쳐서 블로그에 게시하면 나와 동기들에게 도움을 줄 수 있지 않을까 하는 마음으로 정리를 하고 있지만 제대로된 내용을 전달하기 위해 공식문서와 다양한 논문들을 찾아보고 내 글에서 잘 못된 점을 찾으면서 블로그에 게시해봐야겠다.

또한, 다른 알고리즘들도 빠르고 정확하게 JS형식으로 바꿔서 정리해봐야 겠다는 것을 느끼게 되었다.

프론트엔드 개발자로 취직하기 위해서는 사실 구현과제가 가장 중요하다고 생각했지만 결국 알고리즘 테스트를 보는 회사들이 점점 많아지고 있다. 아마 문명의 발달에 따라 다양한 개발 강의 콘텐츠가 쏟아져 나오고 있으니 판별해 내는데 가장 적합한 시스템이지 않나라고 나 자신도 생각하고 있다. 그렇기 때문에 구현도 중요하지만 알고리즘도 꼭 빼두지 않고 열심히 공부해 나가야겠다!!!

📘 추가로 공부할 내용

JavaScript

• 원시자료형
• 스코프
• 클로저

이제 JavaScript의 심화과정을 학습하게 되니 뒤쳐지지 않도록 복습과 예습을 꾸준히 하자!!!

📝 오늘 느낀점 & 마음 가짐

• 복습!! 예습!!!
• 자존감이 떨어지면 오래가지 못한다. 나는 잘 하고 있다!!!

📌 이제 뭐라고 처음에 시작해야 될지 고민하게 된다...

📗 오늘 학습한 내용

Git 명렁어

• add
• commit
• push
• clone

Node.js 설치 및 사용법

Terminal을 사용해  git&github 권한을 부여하고 명령어를 사용할 수 있다.

📘 추가로 공부할 내용

Github

• SSH

JavaScript

• 배열
  • 스택, 덱, 데큐 자료구조
  • Array.isArray
  • push
  • pop
  • shift
  • unshift
  • console.table
• 객체
  • 객체 속성(property)의 추가, 조회, 변경, 삭제
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation

JS의 배열과 객체는 사용하기에 따라 메모리의 할당이나 속도 등이 차이가 많이 나게 되고 가장 기초(?)라고 생각되어 화요일 전까지 조금 더 공부해 볼 것이다.

📝 오늘 느낀점 & 마음 가짐

• Terminal을 조금 더 자유자재로 사용해 보자!!
• 배열과 객체 뿌셔!
• 알고리즘 뿌셔!

📌 원래는 일요일에도 쉬지 않고 학습하는 것이 목표였지만 지금 4달째 하루도 빠짐없이 학습을 해왔던것 같은데 점점 힘들어지는 것을 느끼게 되어 앞으로 나아갈 5달동안 힘낼 수 있도록 일요일은 하루 쉬어가며 일주일을 돌아보고 앞으로 어떤 내용을 하는지 분석하는 날로 지정했다!

📗 일주일간 학습한 내용

CSS

• 선택자 (id, class, ...)
• 애니메이션
• flexbox

Python

• Python Study
  • 알고리즘 문제 풀이 및 문제 선정

계산기 목업 디자인 및 구현하기

한주동안 계산기 목업 디자인과 구현하기를 진행했다. 진행하는 과정에서 flexbox의 basis속성을 사용하지 않고 크기를 직접 지정하는 하드 코딩 방식으로 진행을 했었는데 라이브세션을 보고 basis를 사용했으면 좋았을 것이라는 생각이 많이 들었고, 다른 사람들은 자신의 능력에 맞게 더욱 많이 구현해 왔지만 나는 내 능력을 전부 사용하지 않고 정해진 것만 하는 것이 너무 틀에 꽉 막혀있지 않았나 라는 생각이 들었고, 이를 깰 수 있는 동기부여가 된 일주일인것 같아 좋았던 시간이 되었습니다.

📘 다음주간 공부할 내용

MacOs Terminal

• Text Editor

Git & Github

• 개발환경과 연동
• pull
• push
• add
• remote
• clone

JavaScript

• 배열
• 객체
• 원시자료형
• 스코프
• 클로저
• ES6 신규문법

Node.js

• 설치 방법
• nvm: node version manager
• npm: node package manager

본격적으로 JS의 심화과정과 git을 이용한 테스트방법 및 코드 버전관리에 대해서 학습하게 되는 주이다. 배열과 객체에 코플릿(알고리즘?)문제가 존재하기 때문에 시간이 조금 빡빡하게 느껴질 수 도 있으니 예습과 복습을 꼼꼼히 해야겠다.

📝 일주일 간 느낀 점 & 마음 가짐

• 이번주도 다양한 사람들을 만났으며 같이 얘기를 나누어 보며 사람들에 대해 알아갈 수 있었던 것 같다.
• 아직은 초반이라 내가 만났던 분들에게 알려줄 수 있는 시간이 있지만 결국 나도 후반에 가게 되면 알려줄 수 있을까(?)에 대한 생각이 들어 프론트엔드 학습을 멈출 수 없다고 생각했다.
• 멈추지 말고 게을러지지 말고 나아가자!!!