본문 바로가기

분류 전체보기168

Data Structure(1) Stack (스택), Queue (큐) 스택(Stack), 그리고 큐(Queue)는 모두 '자료구조'의 한 종류이다. 처리해야할 데이터가 많아졌을 때, 어떤 순서로 저장하고 처리해야할 지를 정해둔 방식이라고 할 수 있다. 간단히 말하면 스택은 가장 마지막에 쌓인 데이터를 먼저 처리하고, 큐는 가장 먼저 쌓인 데이터를 먼저 처리한다는 점에서 차이가 있다. 이렇게 데이터들을 임시 저장하는 가장 기본적인 자료구조인 스택(Stack), 큐(Queue)에 대해 좀 더 알아보자! 스택(Stack) 스택(stack)은 제한적으로 접근할 수 있는 나열 구조이다. 그 접근 방법은 언제나 목록의 끝에서만 일어난다. 스택은 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형 구조(LIFO — Last In First Out)으로 되어 있다. 스택(Stack)은 번역.. 2021. 1. 19.
210118_TIL (포켓몬게임 Javascript 완성) 🍎 오늘 한 일 ✔️ 포켓몬 게임 - Javascript 마무리 오전부터 오후까지 시간이 있어서, 페어분과 어제 못다한 기능들을 구현하기로 했다. 오전에는 캐릭터들에 애니메이션들을 추가하는 작업에 중점을 두기로 했고, 오후에는 localStorage에 정보를 저장하고 불러오는 작업에 중점을 두기로 했다. 사실 둘 다 잠을 별로 못자서 굉장히 멍한 상태였는데, 그 상태로 포켓볼이 벽에 닿으면 방향을 바꿔 튕겨나가는 애니메이션을 추가하는 작업을 하다가 약간 멘탈이 나갈뻔하기도 했다. transform이나 transition은 직관적으로 어떤 애니메이션이 적용되는지 바로 알 수 있는데, 포켓볼 작업은 직접 수식을 적용해야했기 때문이었다.. 페어분의 제안으로 아예 잠시 리프레시를 했더니 오히려 머리가 맑아져서 .. 2021. 1. 19.
210117_TIL (포켓몬게임 HTML, CSS) 🍎 오늘 한 일 ✔️ 게임 디자인, 기능 구현 어제 기획, 설계 해두었던 게임을 본격적으로 만들기 시작했다. 정말 하루종일 페어분과 줌을 켜고 컴퓨터 앞에만 있던 하루였던 것 같다,, HTML으로 전체적인 구조를 잡아두고 세부적인 부분들을 CSS로 디자인했다. 저번에 와이어프레임을 자세히 짜두어야 나중에 편해진다는걸 많이 느껴서 이번에도 자세히 짜고 시작해보려고 노력했다. 두 명이서 짜니까 아이디어도 다양하게 나올 수 있던 것 같다. 그리고 Javascript로 기획했던 기능들을 하나씩 구현해봤다. 뭔가를 만드는 스프린트에서 기획부터 구현까지 페어분과 전부 같이 진행해본건 처음이었는데, 고민되는 부분이 있으면 바로바로 공유해 도움을 얻을 수도 있고 서로 git을 통해서 협업을 해보기도 해서 여러 방면에서.. 2021. 1. 18.
210116_TIL (포켓몬게임 기획) 🍎 오늘 한 일 ✔️ 지난 주에 배운 것 복습 지 난 주동안 배운 내용들을 한 번씩 다시보면서 복습하는 시간을 가졌다. 헷갈렸던 개념들도 있고 계속 뭔가 꾸역꾸역 이해하고 넘어갔던..? 그런 느낌이었는데 처음부터 한번에 다시 보니까 따로 생각하고 있던 개념들이 이어지는 느낌이 들었다. 그 중 시간이 없어 알아보지 못했던 궁금했던 것들도 찾아보고, 기억할 만한 부분들만 따로 적어두었다. ✔️ 게임 기획 & HTML, CSS 기본적인 클래스 간 상속, 다형성만 구현해 둔 상태여서 본격적으로 게임 기능을 추가하고 디자인을 하고자 계획을 세웠다. 이번에는 페어분과 함께 진행하기로 해서 어떤 식으로 게임을 구성하면 좋을 지 이야기 하고, 전반적인 구조를 먼저 잡기 위해 와이어 프레임을 만들었다. 기능은 아이디어가.. 2021. 1. 17.
유용하지만 위험한 화살표함수(=>) ES6 문법 중 개인적으로 가장 흥미로웠던 화살표 함수의 활용 방안에 대해 좀 더 알아보았다. 코드가 훨씬 간결해지고 읽기도 편하다는 큰 장점이 있어서 요새 많이 사용해보고 있는데, 보통 함수와는 다르게 조심해서 부분이 있어서 아무 때나 사용하기 보다는 용도에 맞춰 사용해야 할 것 같다. 먼저 화살표 함수를 활용하는 다양한 방법을 소개하고, 마지막에는 화살표 함수를 사용하지 말아야 하는 경우에 대해서도 이야기 해보려 한다. 화살표 함수 => 기호로 함수를 축약해서 표현하는 방식이다. 아래 예시를 보면, 전 ⇒ 후 형태로 표시되기 때문에 훨씬 직관적으로 내용을 파악할 수 있다는 걸 알 수 있을 것이다. ✔️ 자신의 this, arguments을 바인딩 하지 않음 // 기본 구조 (param1, param2.. 2021. 1. 16.
210115_TIL (OOP 써먹기, 간단한 게임 구현해보기) 🍎 오늘 한 일 ✔️ 객체 지향 프로그래밍 사용해보기 (pseudoclassical, class ver.) 프로토타입기반 언어인 Javascript에서 Prototype을 통해 객체를 생성을 할 수 있는 방법들 중 Pseudoclassial한 방법과 class 표현식을 이용하는 방식 두 가지를 이용해 직접 구현해 보았다. class를 사용하는 것이 훨씬 편하기는 하지만, 전반적인 과정을 이해하는 데 Pseudoclassical 한 방법을 먼저 공부한게 도움이 되었던 것 같다. ✔️ 상속, 다형성을 기반으로한 게임 만들기 어제 배운 객체지향 방식을 사용해 간단한 게임을 만들어봤다. prototype을 글로만 공부하기보다는 직접 코드로 쳐보니 좀 더 개념이 잡히는 느낌이었다. 우선은 페어분과 게임 캐릭터(?.. 2021. 1. 16.
OOP (3) Javascript에서의 객체지향 프로그래밍 (ES6 이전의 Pseudoclassical한 방법) ES6 이전에는 프로토타입기반 언어인 Javascript에서 Prototype을 통해 객체를 생성하고자 했던 다양한 시도와 방법들이 있었다. 먼저 대표적인 방식인 pseudoclassical한 방식에 대해 살펴보며 클래스 없는 객체 지향을 위해 어떤 방식으로 시도를 했는지 알아보려고 한다. 그리고 나서 ES6 이후 등장한 class 키워드를 이용해 보다 쉽게 객체 지향을 구현하는 방법에 대해 이야기해보려 한다. before 이 글을 보기 전 알아야 하는 개념들이다. 모두 안다면 바로 글을 봐도되고 모르는 개념이 있다면 이전 글들을 보고 오는 것을 추천한다. prototype = 원형이 되는 객체 (속성 및 메서드 정의 가능) constructor : 인스턴스 초기화 시 실행되는 생성자 함수 this : .. 2021. 1. 16.
210114_TIL (OOP와 함께한 하루..) 🍎 오늘 한 일 ✔️ 객체 지향 프로그래밍(OOP) 관련 개념 블로깅 객체가 무엇인지부터 객체지향 프로그래밍의 네가지 특징(캡상다추), 클래스가 무엇인지까지 먼저 정리를 했다. 그런데 Javascript는 클래스라는 개념이 없는 '프로토타입 기반'언어라 객체지향 프로그래밍을 위해서는 프로토타입이라는 객체를 가지고 클래스의 작동 방식을 흉내내야 했다. 지금까지 어떻게 흉내내왔는지 다양한 시도들이 있었는데, 이를 나도 구현해보기 위해서는 이와 관련된 prototype, __proto__, constructor 속성들의 역할들을 이해하는 것이 필요해 자세히 공부하는 시간을 가졌다. 그리고 이를 바탕으로 Object.create 메서드를 이용해 새로운 프로토타입 객체를 만들어 보기도 했다. + 노션 공유 페이지.. 2021. 1. 15.
[개발자 도구] enumerable 여부에 따른 속성 색상 표시 enumerable 여부에 따른 속성 색상 표시 개발자 도구의 콘솔 창에서 이것저것 테스트를 해보다가 알게되었다. 미세한 차이라 지금까지 의식하지 못했지만.. [[FunctionLocatoiin]]처럼 좀 더 짙은 보라색으로 표현된 속성이 있고, arguments, caller,... 처럼 좀 더 옅은 보라색으로 표시된 속성들이 있다. 이런 색상 차이는 { enumerable : false } 속성이 부여되었는지 여부 때문이라고 한다. 이 속성은 열거 가능한지를 알려주는 속성이다. 짙게 표시된 부분은 enumarable하고, 옅게 표시된 부분은 inenumerable하다는 것을 의미한다. 나중에 이런 객체 속성들에 접근하고자 할때, 색상 구분을 통해 for in, for of 같은 순회 메서드를 사용할 .. 2021. 1. 15.
OOP (2) Javascript의 Prototype 기반 객체지향 지난 글에서 객체지향언어에서 핵심이 되는 개념인 클래스(Class)에 대해 소개했다. Javascript도 객체지향언어이다. 하지만 클래스라는 개념이 없을뿐.. 대신 Javascript에는 프로토타입(Prototype)이라는 개념이 존재한다! 객체 지향 프로그래밍의 네 가지 특징 중 '상속성' 이라는 게 있다는 것도 기억할 것이다. 상속성은 부모클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게하고, 기능의 일부분을 변경해야 할 경우 상속받은 자식클래스에서 해당 기능만 재정의할 수 있게 하는 객체 지향 프로그래밍의 특성이다. 클래스라는 개념이 존재하는 Class 기반 언어들은 이러한 상속을 사용한다. 하지만 Javascript는 이와 달리 Prototype 기반 언어이다. 클래스가 없기 때문에 상속같.. 2021. 1. 15.
OOP (1) 객체지향 프로그래밍, 클래스 객체지향 프로그래밍은 '사람이 세계를 보고 이해하는 방법을 흉내낸 방법론'이다. 사람들이 세계를 어떻게 보고, 어떻게 이해한다는 것일까? 간단히 우리가 출근하는 상황을 생각해보자. 일단 일어나서 씻고, 밥을 먹고, 지하철을 타고 회사에 도착한다. 별거 아닌 과정처럼 보이지만 하나하나 살펴보면 '샤워기'의 물을 트는 것, '숟가락'을 드는 것, '지하철'을 타는 것.. 모두 '어떤 대상'과 상호작용을 함으로써 한 행동들이다. 이렇게 사람이 세상을 살아가며 하는 행동들, 즉 '어떤 대상'(객체)들과 서로 영향을 주고 받는 행동을 흉내낸 것이 바로 객체지향 프로그래밍이다. 일단은 객체가 무엇인지부터 알아보며 객체지향 프로그래밍의 전반적인 그림을 완성해보도록 하자. 객체(Object) 객체는 말 그대로 어떤 대.. 2021. 1. 14.
210113_TIL (ESLint로 리팩토링하기, Node.js로 알람봇 만들기) 🍎 오늘 한 일 ✔️ ESLint 어떤 규칙을 정해서 그 부분에 수정할 사항이 생기면 도와주는 ESlint를 설치하고, 공식 문서를 참고해 다양한 옵션을 줘보면서 어떤게 나에게 맞는지 확인했다. 빨간줄이 많은게 보기 좋지 않은 것 같아 검사 조건을 최대한 완화시켰다. ✔️ HA 리팩토링 지난 주에 풀었던 HA 문제들을 페어분과 함께 리팩토링하는 시간을 가졌다. 서로 코드를 비교해보면서 비교해 볼 수 있었는데, 페어분과 다른 방식으로 접근한 문제가 많아서 재밌게 진행했던 것 같다. 구조 분해 할당, Spread Operator, 화살표 함수, for of 문 등 ES6문법을 최대한 적용해보려고 했다. 다른 것들은 그래도 (ES6 문법인줄도 모르고) 많이 사용해 비교적 익숙했는데, 구조 분해 할당은 이번에 .. 2021. 1. 14.
반응형

티스토리툴바