profile
반갑습니다람쥐
post-thumbnail

[Express] Puppeteer, React, Express를 활용해 크롤러 만들기 및 Heroku에 배포하기

이번 포스팅에서는 Puppeteer를 활용해 구글의 검색결과를 크롤링 하는 웹페이지를 만들어 보겠다. 클라이언트는 React, 서버는 Express를 사용할것이다. 로컬에서 작업이 끝나면 Heroku에 배포까지 해보자.Puppeteer는 Google Chrome 개발팀

2021년 4월 30일
·
0개의 댓글
post-thumbnail

[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

깂은 복사와 얕은 복사에 대해 알아보겠다. 이 글의 초반 내용은 이전 포스팅의 (원시 타입과 참조 타입의 차이과 맥락이 비슷하며, 위 포스팅은 원시 타입과 참조 타입의 차이점이라면 아래는 참조 타입의 깊은 복사하는 방법에 대해 알아보도록 하겠다.얖은 복사는 참조(주소)

2020년 12월 15일
·
0개의 댓글
post-thumbnail

REST(Representational State Transfer)

REST는 웹에서 데이터를 전송하고 처리하는 방법을 정의한 인터페이스를 말하며, 모든 데이터 구조와 처리 방식은 REST에서 URL을 통해 정의된다. 때문에 매우 직관적이고 이해하기 쉬우며 사용자에게 더 쉽게 서비스를 제공할 수 있다.RESTfull API라고도 하며,

2020년 12월 10일
·
0개의 댓글
post-thumbnail

함수형 프로그래밍의 순수 함수

부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임부수 효과: 외부 상태를 변경하거나 함수로 들어온 인자 상태를 변경하는 것순수 함수동일한 입력에 대해 항상 동일한 출력을 반환하는 함수외부의 상태를 변경하거나 영향을 받지 않는 함수위 fun

2020년 12월 9일
·
0개의 댓글
post-thumbnail

try...catch를 이용한 에러 핸들링

자바스크립트에서 에러가 발생하면 코드는 멈추게 되고, 콘솔에 에러가 출력된다. 하지만 try...catch 문법을 사용하면 스크립트가 죽는 것을 방지하고, 에러 상황을 잡아 예외처리를 할 수 있게 한다. 기본적인 형태는 두 블록으로 구성되며 예시 코드는 아래와 같다.먼

2020년 12월 3일
·
0개의 댓글
post-thumbnail

Async/Await를 이용한 비동기 처리

Async/Await는 ECMAScript8에서 새롭게 추가된 자바스크립트 비동기 처리 패턴이다. 코드의 모습과 동작을 좀 더 동기 코드와 유사하게 작성할수 있어 기존의 콜백 패턴이나 프로미스 패턴보다 가독성이 높다는 장점이 있다. 기본적인 형태는 위와 같으며 아래에서

2020년 11월 26일
·
0개의 댓글
post-thumbnail

Express + React 연동 및 Heroku에 배포하기

헤로쿠(Heroku)는 서버 호스팅을 지원하는 클라우드 플랫폼이며, 무료로 서비스를 이용할 수 있는 장점이 있다. 단 무료버전의 경우 최대 5개의 어플리케이션만 올릴 수 있으며, 30분동안 요청이 없는 경우 사이트는 잠이 든다. 잠이 든 상태에서 다시 요청이 들어오면

2020년 11월 10일
·
5개의 댓글
post-thumbnail

ESLint, Prettier 적용하기

자바스크립트 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 많이 소비한다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이며, VSCode, WebStorm, Atom 등 여러 에디터와 연동해 사용이 가능하다. 이번 포스팅에서는 두가지 도구

2020년 8월 1일
·
2개의 댓글
post-thumbnail

타입스크립트(TypeScript) 타입 선언

타입스크립트는 일반 변수, 매개 변수, 객체 속성 등에: TYPE과 같은 형태로 타입을 지정할 수 있다.만약 아래와 같이 타입을 선언하고 다른 타입의 값을 대입하거나 값이 선언된 후에 다른 타입의 값이 대입되면 에러를 발생한다.출력창에서 TS2322라는 에러 코드를 볼

2020년 7월 4일
·
0개의 댓글
post-thumbnail

비동기 처리를 위한 프로미스(Promise)

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 콜백 패턴은 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 예외처리가 곤란하며, 여러개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른

2020년 6월 10일
·
0개의 댓글
post-thumbnail

깃허브 머그컵을 얻었다..!

생각보다 크다..!

2020년 6월 7일
·
2개의 댓글
post-thumbnail

비동기 처리와 콜백 함수(Callback Function)

비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 자바스크립트의 특성이다. 비동기의 반대로는 동기 처리가 있다.동기: 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행(ex: 은행)비동기: 요청을 보낸

2020년 6월 6일
·
0개의 댓글
post-thumbnail

랜덤 배열(Shuffle)

아래는 배열을 무작위로 섞는 알고리즘이다.arr배열을 선언한 뒤 각 요소를 랜덤으로 추출하여 newArr라는 새로운 배열에 할당하도록 작성되었다.구글링을 하다 더욱 간결한 코드를 발견하였다. 코드는 아래와 같다. shuffle()에 배열을 인자로 넘겨 호출한다. 함수안

2020년 6월 6일
·
0개의 댓글
post-thumbnail

타입스크립트(TypeScript) 시작하기

타입스크립트(TypeScript)는 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. 자바스크립트 엔진을 사용하며, 자바스크립트의 상위 집합으로 ECMA의 최신 표준을 지원한다.C기존의 자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 변수에

2020년 6월 6일
·
0개의 댓글
post-thumbnail

ES6 비구조화 할당(Destructuring Assignment)

ECMAScript6(2015)에서 새로 추가된 비구조화 할당(Destructuring Assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)이다.animalList는 "CAT", "D

2020년 6월 6일
·
2개의 댓글
post-thumbnail

화살표 함수(Arrow Function)

ECMAScript6(2015)에서 새로 추가된 화살표 함수(Arrow Function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 함수를 호출하기 위해서는

2020년 6월 6일
·
0개의 댓글
post-thumbnail

전개 연산자(Spread Operator)

ECMAScript6(2015)에서 새로 추가된 전개 연산자(Spread Operator)란 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있다. 전개 연산자를 사용하는 방법은 점 세개(...)를 붙이면 된다.ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만

2020년 6월 6일
·
0개의 댓글
post-thumbnail

헥소(HEXO)를 이용한 깃허브 블로그 만들기

정적 웹 사이트(DB 통신 등을 해서 서버에서 HTML 페이지를 실시간으로 만들던 동적 사이트 방식이 아닌, 완성된 HTML 파일을 바로 전달) 생성기이며, 대표적으로 지킬(Jekyll)과 헥소(Hexo)가 있다. 지킬은 Ruby기반이며, 헥소는 Node.js기반의 도

2020년 6월 6일
·
0개의 댓글
post-thumbnail

React 전화번호부 만들기

리액트로 간단한 전화번호부를 만들어 보자, 우선 새로운 리액트 프로젝트를 만들고, 로컬 서버를 시작한다. 프로젝트 이름은 phone-book으로 하겠다.App.js 파일을 열어 필요없는 코드를 전부 지워준 뒤 App 컴포넌트만 추가해 본다.http://loca

2020년 6월 6일
·
0개의 댓글
post-thumbnail

React 데이터 관리(Props, State)

리액트에서 다루는 데이터는 두개로 나뉜다. 바로 props와 state인데, 요약하자면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다. 자식 입장에서 읽기 전용인

2020년 6월 6일
·
0개의 댓글