나는 요즘 코테를 준비하면서 머리가 매우 어지러운 상태다 .. 프로그래머스 레벨 0 문제는 모두 마스터 했고 레벨 1 ,2 단계 문제들을 풀어보고 있는 상태다. 완전 탐색 ,dfs , 스택 ,큐 ,,, 등 다양한 유형의 문제들을 접하게 되면서 일단 제로 베이스에서 시작하는 건 도저히 진전이 되지 않아 다른 사람들이 푼 코드들을 많이 뜯어보고 손으로 작성해보며 공부하는 중이다. 다양한 코드들을 보고 공부 하던 중 Array.from 이 매우 눈에 띄었다. 이상하게 낯선 느낌을 주는 문법이었다.. 코드의 상단에서 선언하면서 쓰이는데 왜이렇게 안외워지던지 이건 내가 블로그로 작성을 해야 완벽하게 이해하고 넘어 갈 수 있을 것 같아서 Array.from 에 대해 포스팅을 쓰게 되었다 . (개념에 대한 이해는 M..
HTML-CSS-JavaScript/JavaScript
JSON이란? JavaScript Object Notaion의 줄임말로 데이터 교환을 위해 만들어진 객체 형태의 포맷 메세지 객체를 전송할 수 있게 하려면 , 메세지를 보내는 발신자와 메세지를 받는 수신자가 같은 프로그램을 사용하거나 문자열 처럼 범용적으로 읽을 수 있는 형태여야함 객체는 타입 변환을 이용해 String으로 변환 할 경우 객체 내용을 포함하지 않음. 자바스크립트에서 객체를 문자열로 변환하기 위해 메서드 toString() 이나 형 변환 String() 을 하게 된다면 [object Object] 라는 결과를 리턴함 그럼 객체는 어떻게 문자열로 변환해야 할까 ? 이 때 사용하는 것이 객체를 JSON 형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법임 JSON.stringify : 객..
재귀란 ? 원래의 자리로 되돌아가거나 되돌아옴 아래의 코드 처럼 선언한 함수내의 같은 함수를 호출함으로서 재귀를 구현할 수 있음 아래의 코드처럼 recusion 함수는 재귀함수라고 함 재귀 함수를 잘 활용하면 반복적인 작업을 하는 문제를 좀 더 간결한 코드로 풀어낼 수 있음 언제 사용하는게 좋을까 ? 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는경우 2. 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운경우 function recursion() { console.log("hi") console.log("manchoon") recursion() } 재귀로 문제 해결하기 재귀로 문제를 풀기에 앞서 이론적으로 재귀로 문제를 해결하는 단계는 아래와 같음 1. 문제를 좀 더 작게 쪼갬..
지난 포스트까지 콜백함수를 통해 비동기를 처리하는 것을 알아보았다. 오늘은 비동기로 작동하는 코드를 제어할 수 있는 방법 중 Promise 를 활용하는 방법에 대해 정리해보겠다 ! 또한 프로미스 사용을 간결하게 하기 위한 Async/Await 에 대해서도 정리해보겠다 ! Promise 를 공부하면서 헷갈리는 부분이 정말 많았다 . 헷갈렸던 부분, 새롭게 알게된 사실과 개념을 중심으로 글을 작성해갈 예정이다. Promise Promise 는 클래스이므로 new 키워드를 통해 Promise 객체를 생성할 수 있다 . 인자로는 비동기 처리를 수행할 콜백 함수 ( executor) 를 전달 받는데 이 콜백 함수는 resolve, reject 함수를 인자로 전달받는다. Promise 객체가 생성된 후 -> exe..
저번 포스트에서 공부하면서 비동기의 문제점에 대해 알게되었다. 비동기적으로 실행하는데 실행할 때마다 실행되는 순서가 달랐다. 이렇듯 예측 불가능한 코드는 작성하고자 하는 의도와 다르게 동작할 수 있다. 따라서 이를 제어하기 위한 여러 방법중 Callback 함수를 통해 순서를 제어하는 방법에 대해 알아볼것이다 ! 사실 비동기 코드를 작성해 사용해본적이 없었다. 그래서 처음 공부할 때 비동기적 코드는 실행 순서가 멋대로인데 다시 실행순서를 제어해줄거면 동기적 코드를 사용하면 되지 않나 ? 라는 생각을 했던 거같다. 그런데 어쨌든 !! 5개의 일이 있다고 가정하면 1-2-3-4-5 순으로 일이 진행되어야 한다고 가정할 때 동기적인 것은 1이 끝나고 2 ..3 ..4 ..5 이런식으로 진행되는데 비동기는 1,..
비동기 중 타이머 API 에 대해 공부했다. 비동기라는게 실감이 잘 안났었는데 여러가지 예제 코드를 보며 이해 할 수 있었다 ! 자바스크립트에서 비동기는 타이머 관련 API 를 통해 구현할 수 있다 . 해당 API 는 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있다. 그럼 예제 코드를 살펴보면서 타이머 API 를 공부해보자 ! setTimeout( callback , millisecond) 일정 시간 후에 함수를 실행한다. 매개변수로는 실행할 콜백함수 , 콜백함수 실행 전 기다려야 할 시간 ( 밀리초) 을 받으며 리턴값은 임의의 타이머 ID이다. setTimeout(function () { console.log('2초 후 실행'); }, 2000); clearTimeout(tim..
거북이 커피숍 방문한 A와 B씨 .사장님은 한사람씩 주문을 받는다고 했고 먼저 주문한 손님의 커피가 나올 때 까지 나머지 손님들은 기다려야 한다고 했다..... 사장님은 블로킹을 선언하셨다. (블로킹 : 하나의 작업이 끝날 때까지 이어지는 작업을 막는것 ) 거북이 커피숍의 경우 앞 손님의 커피 주문 완료시점과 뒷 손님의 커피 주문 시작 시점이 같습니다 .하나의 커피를 만들 때까지 다른 손님의 주문은 받지 않습니다. 이때를 우리는 동기적이다 라고 합니다! 토끼 커피숍에 방문한 A와 B씨 .사장님은 언제든 주문을 받고 커피가 완성되는 즉시 커피를 제공해준다고 선언하셨다. 토끼 커피숍의 경우는 손님의 커피 주문 완료시점과 뒷 손님의 커피 주문 시작 시점이 같을 필요가 없습니다! 이때를 우리는 비동기적이다 라고..
오늘은 DOM의 기초와 DOM을 한번 다뤄볼 것이다!! ( 중간에 날라가서 2번째 쓰는 중... ㅜㅜ ) DOM ? Document Object Model의 약자, HTML 요소를 Object처럼 조작할 수 있는 모델로 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다. DOM은 document 객체에 구현되어 있다. 만약 body에 접근하고 싶으면 document.body를 통해 접근할 수 있다. TIP! DOM 구조를 조회할 때에는 console.dir 이 유용하다. DOM을 객체 모습으로 출력해준다 ! 아래의 코드에서 body의 자식요소를 찾아보자 ! body의 자식요소를 찾으려면 먼저 body에 접근해야 한다. 앞서 말했듯 document.body를 통해 객체를 조회해 보면 다양한 속..
자바스크립트는 상황에 따라 데이터가 인식한 문자 또는 숫자의 데이터형을 변경해야 할 경우 데이터 형변환을 시켜줘야 합니다. 이러한 데이터 형변환의 종류로는 명시적 변환, 암시적 변환이 있습니다. 명시적 형변환은 개발자가 직접 어떤 형으로 바꿀지 명시해주는 것입니다. 예를들면 문자열 "123" 이라는 문자를 숫자로 바꾸고 싶을때 Number("123") 으로 쓰는것 처럼 말이죠 . 명시적 형변환은 개발자가 직접 바꾸고 싶은 타입으로 바꾸기 때문에 우리의 의도대로 데이터의 타입을 결정할 수 있습니다. 하지만 자바스크립트에서는 이렇게 개발자가 직접 타입을 바꾸는 것이 아닌 자동으로 데이터의 형태를 바꿀수도 있습니다. 이를 암묵적 형변환 이라고 합니다. 내가 깜빡하고 데이터를 변환하지 않은 것을 자동으로 인식해..
