JavaScript 썸네일형 리스트형 setTimeout과 setInterval UI를 제작하는 중에 잘못된 양식을 입력한 후 submit 버튼을 클릭한 경우 에러메시지를 보여주는 popper를 띄우고 다시 없애는 UX를 개발하고 싶었다. 그래서 setTimeout을 사용하면 되겠구나 생각이 들었지만 문법이 기억나지 않아서 다시 문서를 찾았다. setTimeout은 자주 사용하는 JS메소드라 기억하면 좋을 거 같아 이번에는 이렇게 정리한다. 일정 시간이 지난 후 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 호출 스케줄링이라고 한다. JS에서 사용하는 대표적인 두 가지 호출 스케줄링에 setTimeout과 setInterval이 있다. 먼저, setTimeout은 일정시간이 지난 후에 함수를 실행하는 방법이다. let timer = setTimeout( func | code,.. 더보기 JavaScript 비동기(asynchronous) 학습 내용 이번 시간은 자바스크립트의 큰 강점이라고 할 수 있는 비동기(aynchronous)에 대하서 학습하고자 한다. 비동기를 이해하기 위해선 먼저 동기적(synchronous) 작업을 이해해야 하는데, 동기적 작업은 클라이언트가 특정 요청을 보내서 서버가 요청을 받아서 일처리를 위해 데이터를 꺼내고 가공할 때, 그 과정 중에 클라이언트는 아무 작업도 하지 않고 멈추게 된다. 그리고 서버에서 응답이 오면 그때 하려던 일을 처리하는 식으로 작업을 진행하는 방식을 말한다. 즉, 순차적으로 작업을 진행하는 것이다. 이와 달리 비동기 작업은 클라이언트에서 요청을 하면 서버에서 데이터를 꺼내고 가공하여 반응을 줄 준비를 한다. 그러나 이때 동기적 작업과 달리 클라이언트가 쉬지 않는다. 계속해서 작업을 하고 응.. 더보기 JS/알고리즘 자료구조 기초 학습 내용 저번 시간에 학습했던 재귀에 이어 자료구조의 아주 기본적이고 기초적인 자료구조의 정의와 Stack, Queue 그리고 그래프와 트리에 대해서 간단히 학습했다. 물론 앞으로 해야 할 알고리즘 학습에 아주 일부분인 내용이다. 그러나 이 내용들을 잘 알아둬야 앞으로 꾸준히 진행해야 할 학습에 기반이 될 것이라 생각한다. 자료구조 자료구조란 여러 데이터들의 묶음을 저장하고 사용하는 방법을 정의한 것이다. 문자, 숫자, 그림, 영상 등 실생활을 구성하고 있는 모든 값을 우리는 데이터라고 한다. 그런데 이 데이터란 분석과 정리의 과정을 거쳐야 활용하는 데 있어 의미와 가치가 생긴다. 특히 이것은 필요와 특성에 따라 잘 분석하고 정리할수록 더욱 활용가치가 올라간다고 할 수 있다. 이로 인해 많은 개발자들은.. 더보기 JS/알고리즘 재귀 알고리즘(recursive algorithms) 학습 내용 이번 학습할 내용은 알고리즘의 기초 첫 번째 재귀이다. 재귀란 어떤 문제에 있어서 그 문제를 동일한 구조의 더 작은 문제로 나눌 수 있고 이 작은 문제를 해결하여 전체 문제를 푸는 방법이다. 알고리즘을 해결하는 것에 있어 재귀가 매우 많이 사용된다. 이번부터 학습할 알고리즘은 자바스크립트의 문법적인 요소보다는 문제를 해결하는 방법이라고 할 수 있다. 그렇기에 아주 폭넓고 쉽지 않은 개념이다. 지금부터 시작해서 천천히 조금씩 하나하나 학습해보고자 한다. 그래서 이번 시간에 재귀적으로 사고하는 법과 재귀 함수의 활용 방법에 대해 간단히 살펴볼 것이다. 문제를 쪼개어 생각하는 방법 재귀로 문제를 해결할 때는 먼저 기존의 문제에서 출발하여 더 작은 경우를 생각해야 한다. 예를 들면 이렇다. arrSu.. 더보기 JS/Node 객체 지향 JavaScript 학습 내용 지금까지 프로그래밍을 공부하고 작성했던 방법은 대부분 절차 지향 프로그래밍을 패러다임으로 한 것들이었다. 절차 지형 프로그래밍이란 말 그대로 코드를 절차대로 나열하듯이 작성하는 방법이다. 처음 프로그래밍을 할 때는 이런 절차 지향 프로그래밍적 학습이 중요하다고 한다. 왜냐하면 코드의 흐름들 파악하는 공부로 썩 괜찮기 때문이다. 그러나 이런 방법의 코드들은 가독성이나 효율성에 대한 부분에서 분명 부족한 게 사실이다. 이로 인해 자연스럽게 추구하게 된 방법이 객체 지향 프로그래밍(OPP, Object-oriented programmin)이다. 이것은 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한 곳에 묶어서 처리하는 방식이다. 이런 데이터와 기능인 속성과 메소드를 하나의 "객체"라는 개념으로.. 더보기 JavaScript 중급1 고차함수(higher order function) 학습 내용 자바스크립트에는 특별한 대우를 받는 일급 객체들이 있다. 오늘 학습할 함수 역시 대표적인 일급 객체이다. 그들이 받는 대우는 이러하다. '변수에 할당할 수 있음', '다른 함수의 인자로 전달할 수 있음', '다른 함수의 결과로 리턴될 수 있음', 특히 이 중에서 다른 함수의 인자로 전달하거나 다른 함수의 결과로 리턴하는 함수를 '고차함수'(higher order function)이라고 한다. 추상화라는 개념이 있는데, 추상화란 복잡한 것을 압축해서 핵심만 추출한 상태로 만드는 것이다. 가장 대표적인 추상화 중 하나가 숫자이다. 하나라는 개념을 1로 추상화한 것이다. 우리가 사용하는 컴퓨터 역시 추상화의 집약체라고 할 수 있다. 이런 추상화를 프로그래밍적 관점에서는 함수로 할 수 있다. 어떤 복.. 더보기 JavaScript 기초9 클로저(closure)와 Spread/Rest문법 학습 내용 이번 시간에는 저번 시간에 클로저(closure)와 spread/rest문법에 대하여 학습할 것이다. 클로저(closure) 클로저란 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 여기서 키워드는 "함수가 선언"된 "어휘적 환경"이다. 자바스크립트는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경 '어휘적 환경'을 기준으로 변수를 조회하려고 한다. 외부함수의 변수에 접근할 수 있는 내부함수를 클로저 함수라고 부르는 이유가 이 때문이다. 그래서 외부함수의 실행이 종료된 후에도 클로저 함수는 외부함수의 스코프 즉, 함수가 선언된 어휘적 환경에 접근할 수 있다. 이러한 것들로 클로저 커.. 더보기 JavaScript 기초8 자료형(type)과 스코프(scope) 학습 내용 이번 시간 살펴볼 내용은 두 자료형의 차이와 스코프와 그 범위 그리고 자바스크립트에서 사용하는 변수 키워드들의 차이, 그리고 변수 선언할 때의 주의할 점에 무엇이 있는지이다. 원시 자료형(primitive type)과 참조 자료형(reference type) 자바스크립트의 자료형은 크게 원시 자료형(primitive type)과 참조 자료형(reference type)으로 구분된다. 먼저 원시자료형에 대해 살펴보면 원시자료형이 원시자료형으로 불리는 이유는 옛날에 사용하던 코드 작성 방법과 유사하기 때문이다. 원시자료형의 경우 메모리의 한 공간에 하나의 데이터만 담는다. 예를 들어 변수 a를 선언하면 stack이라는 공간에 a라는 이름표를 붙이고 a에 값을 할당하면 그 값이 a라는 이름표가 붙은.. 더보기 이전 1 2 다음 목록 더보기
