전체태그 보기

#javascript (200개의 포스트)

stampid
프로젝트 개요** 4주 프로젝트를 진행 했을 때 서버에서 가장 메인이 되었던 기술은 GraphQL입니다. 나머지 프로젝트 개요를 작성한다.(노션 링크까지 같이) GraphQL을 선택한 이유* 코드스테이츠에서 이머시브 코스를 수강하는 중에는 REST API를 학습했었습니다. 그러나 우연하게 GraphQL에 대해서 알 수 있는 기회가 있었고 궁금증을...
ki_blank

JavaScript - 비동기 1.

3일 전1개의 댓글
JavaScript는 비동기로 작동합니다. 비동기와 대조되는 것이 동기입니다. 동기는 어떻게 동작하는 걸까요? 동기의 동작을 먼저 살펴보겠습니다. 지금부터 상상력이 필요합니다. 우리는 지금 커피숍에 있습니다. 커피를 주문해야하는데 앞에 손님들이 대기하고 있네요. 근데 점원이 손님이 주문을 하면 바로 다음 손님에게 주문을 받는게 아니라 주문을 받고 손님이 ...
자바스크립트 Factory 패턴 구현하기
ashnamuh
팩토리 패턴은 객체 지향 프로그래밍에서 유래된 디자인 패턴입니다. 객체 생성을 단순하게 추상화해서 반복적인 객체들을 생성할 때 사용합니다. 이 글에서는 제가 ES5, ES6+로 팩토리 패턴을 구현하는 몇가지 방법을 짧게 공유하겠습니다. 객체 생성자 함수 ES6에 클래스가 생기기 전에는 다음과 같은 객체 생성자 함수를 만들어서 클래스의 역할을 대...
haileyself
자바스크립트의 데이터타입에 대해 구분하고 정리해보았습니다. Data Type of Javascript 1. typeof 연산자 typeof 연산자를 사용하면 해당 값/ 변수가 무슨 데이터 타입인지 알 수 있다. * 참고! 다른 데이터 타입이 boolean 으로 변환되는 경우가 여러 개 있음 1) true로 변환되는 값 - 문자열...
cyranocoding
React Life Cycle React는 Component는 상위 component에서 받은 props 를 input으로 하고 React를 구성하는 가장 작은 단위인 Element 를 output으로 하는 함수!!이다. React를 사용하면 각 component 단위로 UI를 화면에 보이게 하고, 다른 UI로 바꾸고, 현재 보이는 UI를 화면에서 없...
lesh
styled-component scss도, less도 스타일 파일이 분리되어 있는게 난잡하고 불편하다고 느껴질 시점에 styled-component를 접하게 되었다. styled-component는 클래스에 비해서 작명하기도 간단했고, 한 파일안에서 전부 처리할 수 있다는 장점이 너무 마음에 들어 진행하던 리액트 프로젝트에 바로 styled-componen...
ki_blank

JavaScript - Hoisting

2019년 8월 14일0개의 댓글
사전에서 찾아보면 hoisting이란 말은 "끌어올리기" 입니다. 그렇다면 javascript에서 hoisting은 어떤걸 말하는 걸까요? 변수 Hoisting 변수를 선언과 할당으로 나눌 수 있습니다.
ki_blank

JavaScript - this

2019년 8월 14일0개의 댓글
this의 값은 함수를 호출한 방법이 결정합니다. 함수를 호출하는 방법에는 어떻게 있을까요? - 전역에서의 this - 함수에서의 this - call, apply - 메소드에서의 this - 내부함수, 콜백함수에서의 this - 전역에서의 this bind는 call, apply와 차이점은 call과 apply는 this는 결정는 동시에 실...
ki_blank
화살표 함수는 ES6문법입니다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다. 이게 가능한 이유는 클로저 함수처럼 바깥의 함수에 접근해서 this를 사용합니다. 댓글은 언제나 환영입니다. 참고 https://poiemaweb.com/es6-arrow-function https:/...
[JavaScript] EventLoop와 비동기 동작
wan088

[JavaScript] EventLoop와 비동기 동작

2019년 8월 12일0개의 댓글
자바스크립트는 기본적으로 단일쓰레드에서 동작한다. 하지만 주로 웹에 쓰이는 언어다보니, 단일쓰레드에서 동기적으로만 동작한다면 이런저런 문제가 발생할 수 있다. 외부에서 용량이 큰 데이터를 받아서 띄워주는 경우를 예로 들어보자. 만약 데이터를 받는 시간이 밀리세컨드 단위라면 동기적으로 실행되어도 큰 문제는 없을 것이다. 하지만 받는 시간이, 1, 2초...
ki_blank

JavaScript - prototype

2019년 8월 12일0개의 댓글
개발을 하면서 코드를 체계화하고 구조화해서 데이터를 다룰 필요성과 현실 세계를 흉내낼려고 객체지향언어가 생겨났습니다. 이 객체지향언어적인 코드를 작성할려면 객체를 생성하는 클래스가 필요합니다. 이 클래스를 이용해서 필요로하는 데이터의 속성, 메소드의 기본이 되는 틀을 만듭니다. 그리고 클래스를 이용해서 클래스의 형태를 가진 객체를 생성합니다. 이 과정을 인...
lesh

PureComponent와 shouldComponentUpdate

2019년 8월 9일0개의 댓글
리액트로 첫 프로젝트를 하면서 학교 선배에게 코드 리뷰를 부탁드렸는데, 선배가 코드를 보더니 한숨을 쉬시면서 내게 질문 한가지를 하셨다. "너 컴포넌트와 퓨어컴포넌트의 차이가 뭔지 알아?" "...몰라욘" "...공부해" 퓨어컴포넌트가 뭘까? 순수한 컴포넌트인가? 순수하면 뭐가 좋은거지? 조금 더 빠르다고 들은 것 같긴한데... 이 때까지는 정확한 정의를 ...
JavaScript - 클로저(Closure)
ki_blank

JavaScript - 클로저(Closure)

2019년 8월 9일0개의 댓글
우선 예제 코드의 실행 순서부터 보겠습니다. 그 이유는 outer함수에서 선언된 익명함수는 "내부함수" 고 선언 됐을 때 "lexical Scope" 가 결정이 된 상태입니다. "lexical Scope" 는 익명함수 자신의 scope, outer함수의 scope, global의 scope 까지 입니다. 익명함수가 선언됐을 때 lexical scope가 ...
ki_blank

JavaScript - var 와 let, const

2019년 8월 8일0개의 댓글
(초등학생도 알아들을 수 있도록 설명을 하자.) ES6문법이 사용되기 전에는 "var"을 사용했습니다. ES6문법이 사용되면서 변수를 선언할 때 var, let, const를 사용합니다.var를 사용했을 때와 let, const를 사용했을 때 차이가 있습니다. 1. 변수선언, 할당 - - var는 변수 선언할 때 사용한 이름으로 다시 선언할 수 ...
lesh

Javascript에서의 Proxy Pattern

2019년 8월 8일0개의 댓글
"형, 리액트에서는 input 태그를 쓸 때 onChange 파라미터로 event라는 놈을 받잖아요. 이 놈 정체가 뭐에요?" "그거? 프록시 객체라고 찾아봐" ~"프록시 그거 야동볼 때 쓰는거 아니.."~ 자주 들어왔던 용어기는 한데... 프록시가 대체 뭘까?! 프록시 객체는 또 무엇일까? "혼란하다" 프록시(Proxy) 물론 대부분의 사람들은...
alchemist718
어제까지 ES6를 이용한 클래스를 생성하여 정리를 하였다면, 이제는 배운 클래스를 조잡하지만 적용 해 보는 단계를 가지려고 한다. 그리하여 Enemy Rain이라는 간단한 게임(게임이라고 하기엔 너무 구현이 허접하긴 하다.)을 만들어 보기로 하였다. 조건은 아래와 같다. 1. 히어로를 가운데에서 시작하도록. 2. 히어로에 좌우로 key event 3. 바...
위코드 2주차-1일 TIL  : 게임만들기 - Image 불러오기
dooreplay
방금 전에 게임 배경화면 띄우기 성공해서 기분 좋아져서 쓰는 블로그~ 하면서 중간중간 정리를 해줘야 나중에 고생을 안 할거 같아서 미리미리 써봅니다 룰루~♬ 게임만들기 미션 목록 두둥! 1. 바탕화면 깔기 2. 히어로를 가운데서시작하도록 3. 키이벤트 - 좌우 누를때 히어로 움직이게 4. 바탕화면 끝 도달하면 더이상 움직이지 않도록 + 아래는 ...
위코드 5-6일차 TIL - js : Promise와 fetch(feat. json 데이터 불러오기)
dooreplay
썸네일은 열심히 하다가 산지 일주일도 안되서 끊어져버린 저의 슬리퍼쓰...☆★ 세상 어려웠던 부분...☆ 고통의 연속이였지만.. 주위 분들의 따뜻한 도움과 구글링을 통해 해결해나갔다..! Json 데이터를 자바스크립트로 불러오는 부분은 특히나 어려웠다. 노마드코더 니꼬의 무비앱 만들기 react강의에서 fetch를 통해 API를 가져오는 부분이 그당시엔 ...
dooreplay
image.png 화살표 함수만은 피하고 싶었는데.. 위코드 2일차에 마주쳤다...☆ 어차피 나중엔 계속 쓰게 될텐데 지금 정리해야 마음이 편해질것 같아서 정리해봅니다 고통을 즐기는 개발자가 되자! - 화살표함수 그냥 함수 있는거 쓰면 되는데.. 화살표 함수. 대체 왜 쓸까? * ES6 문법이라서 -js를 표준화하는 ECMA Scrip...
alchemist718

TIL - Day6: ES6-Class

2019년 8월 3일0개의 댓글
오늘부터 class에 대해서 복습을 하게 되었다. 정확히는 간단한 게임을 구현하기 위해서 class 생성자를 적극 활용해야 한다는 미션을 받았다. 이전에 알고리즘 문제나 간단한 웹 작동을 위한 DOM 조작 정도만 구현 했기 때문에, 클래스에 대해서는 사실 기본적인 개념 외에는 전무 하다고 보아도 무방했다. 그래서 이번 과제는 시작하기 이전에 개념부터 차근차...