백고등어 개발 블로그

오늘 한 일 자료구조 종류중 스택과 큐에 관해서 학습했다. 스택은 LIFO 동작을 가지는 후입선출 구조이며 배열에서 요소를 push 하고 pop 하는 형태와 비슷하다(스택을 실생활에서 예를 들면 곽티슈, 접시를 쌓는 행동 등) 큐는 FIFO 동작을 가지는 선입선출 구조이며 배열에서 요소를 push 하고 shift 하는 형태와 비슷하다(큐를 실생활에서 예를 들면 식당 대기줄, 고속도로 톨게이트 등) 기존의 배열을 사용하지 않고 객체만 이용해서 스택과 큐를 구현하면서 유사 배열 객체를 직접만드는 느낌을 받았다. 데이터를 저장하는 방식에 대해서 다루고있는 자료구조의 중요성을 시간복잡도와 연관시켜서 좀더 자세히 알아봐야할 것 같다.

오늘 한 일 프리코스에서 진행한 HA 를 리팩토링 했다 ESlint 를 실제로 적용해서 사용해보았다. (잘 알아두면 매우 유용하게 쓰일 것 같다) 새롭게 배운 ES6 문법을 통해 HA 코드 리팩토링을 진행했다. (ES6 문법에 좀더 익숙해져야겠다)

오늘 한 일 call, apply, bind 함수 메서드를 복습과 ES6 문법인 화살표 함수와 구조 분해 할당을 학습했다. 화살표 함수와 구조 분해 할당을 사용해서 코드를 좀더 간결하게 작성할 수 있는 방법을 알게 됐다. 주의할 점은 화살표 함수안에서의 this 동작은 일반 함수안에서의 this 동작과 다르게 동작한다 화살표 함수와 구조 분해 할당 등과 같은 자바스크립트의 최신 문법에 많이 익숙해져야겠다.

오늘 한 일 Node.JS 의 간단한 개념과 Node.JS 와 관련된 도구들에 대해서 학습했다. Node.JS 란? Node.js는 구글 크롬의 JavaScript 엔진(V8 Engine)으로 빌드 된 JavaScript 런타임이다. Node.js 는 자바스크립트를 크롬같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어졌다. 런타임이란? "어떤 프로그래밍 언어가 동작할 수 있는 프로그램"을 뜻한다. NPM 이란? 자바스크립트 패키지 관리자를 뜻하며, 프로젝트에서 필요한 모듈을 다운로드할 수 있는 모듈 모음집이다. npm 에 업로드된 모듈을 패키지라고 한다. NVM 이란? node 버전 관리자를 뜻하며, 주로 협업할 때 또는 다양한 프로젝트를 동시에 진..

splice 메소드를 사용하여 배열의 요소를 제거할 때 아래와 같은 문제점을 보셨을 거에요 let arr = [1,2,3,4,5]; for(let i = 0; i < arr.length; i++) { arr.splice(i, 1); // 배열의 요소를 하나씩 제거 } // 결과 : [2,4]; 모든 요소가 제거 된 빈배열이 나올 것 같았지만 위와 같이 한 칸씩 건너뛰어서 요소를 제거한 배열이 결과로 나왔습니다 위의 코드에선 어떤일이 일어나길래 모든 요소가 제거되지 않았을까요?? 아래의 과정을 살펴보겠습니다 let arr = [1,2,3,4,5]; for(let i = 0; i < arr.length; i++) { arr.splice(i, 1); /* i = 0 일 때 arr.splice(0, 1) // ..

한 달이라는 시간을 나름 바쁘게 보냈던 것 같다 처음 과정을 시작했을 땐 우선 분위기에 적응하자라고 생각했지만 분위기에 적응하고나니 이제는 여러가지 문제와 과제들에 적응하느라 바쁘게 지냈다 프리코스 과정이 거의다 끝나갈 무렵엔 프로그래밍의 기본기를 어느정도 알게 되었고, 여러 사람들과 문제를 풀어 보며 소통하는 과정에서 프로그래밍에 대한 다양한 생각을 들을 수 있었고 협업하는 방법에 대해서도 알게 되었다 비록 비대면 온라인이지만 많은 사람들을 만날 수 있었고 함께 소통하면서 혼자가 아닌 함께 문제를 해결해 나간다는 것이 어떤 느낌인지 알게 되었다 - 이머시브 과정 시작전 생각 그동안의 기초과정동안 가장 부족했던 점이 있다면 여러가지가 있지만 그중에서 모르는 것과 아는 것을 제대로 구분하지 못해서 시간을 ..

오늘 한 일 자바스크립트의 고차함수에 관해서 학습했다. 고차함수란? 한개 이상의 함수가 인자로 전달되거나 함수를 리턴시키는 함수를 의미한다. 즉, 세 가지로 방식이 있다 함수를 리턴하는 함수 함수를 인자로 받아 대신 실행하는 함수 함수를 대신 실행하는 함수를 리턴하는 함수 자바스크립트에서 함수는 일급 객체로 취급한다. return 을 통해 숫자, 문자열 뿐만아니라 함수도 반환할 수 있다. 고차함수를 사용하면 함수를 인자로 받는 함수를 만들 수 있다.

오늘 한 일 코드 스테이츠 twittler 스프린트 관제를 진행했다. JS를 통해 DOM 조작과 로컬 스토리지를 다루었다 추가로 moment.js 라이브러리를 사용하여 comment 작성 시간을 표현하였다

이벤트 : 웹 브라우저에서 웹 문서에 특별한 일이 있을 때 발생하는 신호 이벤트 핸들러 : DOM 객체에 할당되어 해당 객체의 이벤트 반응에 호출되어 처리되는 프로퍼티 이벤트 핸들러 역할 : 이벤트 발생 감지 -> 이벤트 감지 -> 지정된 자바스크립트 코드 또는 함수 호출 이벤트 종류 1. 마우스 관련 onclick // 마우스 클릭 감지 onmousedown // 마우스 단추 눌렸는지 감지 onmouseup // 눌려젔던 마우스 단추가 올려졌는지 감지 onmouseover // 커서가 특정 객체 위에 있는지 감지 onmouseout // 커서가 특정 객체에서 벗어났는지 감지 onmousemove // 마우스 커서 이동 감지 2. 로딩 관련 onload // 이미지 또는 화면 로딩이 완료됬는지 감지 on..

자바스크립트를 사용하면 DOM 의 모든 노드들을 생성, 수정, 삭제, 복사, 이동 할 수 있습니다. DOM 노드를 제어하는데 필요한 모든 속성과 메서드를 제공하기 때문에 메서드와 속성의 갯수가 많기 때문에, DOM 을 제어할 때 적절한 메서드를 사용해야 원하는 결과를 얻을 수 있습니다. 자바스크립트의 노드 제어를 위한 속성과 메서드들을 알아보겠습니다. 메서드, 속성 타입 설명 appendChild() DOM 메서드 선택한 엘리먼트의 자식 엘리먼트 중 마지막 엘리먼트 뒤에 추가함. DOM 메서드로 엘리먼트(노드) 객체만 사용 가능 붙인 노드 오브젝트가 반환됨. 노드 1개만 추가 수 있음. remove() DOM 메서드 현재 엘리먼트를 삭제. 삭제할 엘리먼트의 참조만 있으면 됨. 인터넷 익스플로러 미지원 r..