profile
개발 공부 :D

React LifeCycle API 생명주기

LifeCycle API 생명주기 출처-LifeCycle >## Mounting component가 브라우저에 나타날 때 constrctor : component가 만들어지는 과정에서 가장 먼저 실행되는 함수로 초기 state를 설정한다. getDerivedStat

어제
·
0개의 댓글

[JS] 반복문 Promise / async & await 활용

배열은 순차적으로 비동기 처리를 하려고 할 때, promise 사용법을 블로깅 하려고 한다. 반복문이 있을 경우 promise를 사용하기 어려웠다. 예를 들어, i를 순차적으로 콘솔에 찍은후 then을 실행하여 ''Done''를 찍으려고 작성했던 코드이다. 하지만 아래와 같이 실행된다. image.png 위와 같이 실행되는 이유는 처음 i를 찍은 후 ...

2020년 1월 27일
·
0개의 댓글

[JS Sorting Algorithms] Bubble Sort / insertion Sort / Merge Sort / Quick Sort

섞여있는 데이터들을 어떤 기준에 맞춰 정렬하는 여러종류의 정렬 알고리즘이 있다. 기본적으로 자바스크립트에는 데이터를 정렬해주는 sort()라는 메소드가 존재한다. 하지만 정렬 알고리즘을 공부하는 이유는 데이터의 양이나 상황에 따라 적합하지 않을 수도 있기 때문에 여러 정렬 알고리즘을 상황에 맞게 잘 선택해서 사용해야 하기 때문이다. 대표적인 Bubble ...

2020년 1월 26일
·
0개의 댓글

[JS] Promise

Asynchronus > 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용한다. 콜백 함수는 순차적인 처리가 많을 경우 가독성이 나쁘다. 또, 비동기 처리를 한꺼번에 처리하는 것도 한계가 있으며 에러 예외 처리에 대한 곤란한 부분이 있다. >> ## Promise? promise는 자바스크립트 비동기 처리에 사용되는 비동기 흐름을 제어해 주는 객체이다....

2020년 1월 25일
·
0개의 댓글

[JS] design-patterns

디자인 패턴이란? 프로그램을 개발하는 과정에서 발생하는 다양한 문제점들을 해결하기 위해 많은 개발자들이 빈번하게 발생하는 문제들을 상황에 따라 적용해서 쓸 수 있는 패턴 형태로 만든 증명된 기술들이다. 어떠한 상황에서 정확한 해결책을 제시해 주는 것은 아니지만 일종의 방향성(솔루션)을 제시해준다. 1. Modules 모듈 패턴 모듈(module)은 일...

2020년 1월 20일
·
0개의 댓글

[data structure] hash table / javascript hash table 구현

hash table > 어떠한 데이터를 받아 저장하려고 할 때, 저장할 데이터의 키를 받아 해시 코드로 변환해서 데이터 구조에 저장한다. 해시 코드를 만드는 것을 hashing이라고 하는데 hashing 이란 암호화하는 것이다. 해시 함수는 암호를 일정한 길이로 반환해준다. 대표적으로 ex) MD5, SHA .. 등 이 있다. 해시 함수는 연산을 여러 번...

2020년 1월 18일
·
0개의 댓글

[data structure] Tree vs Binary Search Tree / javascript 구현

Tree > 나무를 뒤집어 놓은 것처럼 하나의 시작 노드(root)로부터 시작되어 자식 노들(child node)들이 가지를 치듯 뻗어 나가는 구조이다. 아래 그림과 같이 HTML이 좋은 예이다. root(뿌리)부터 시작해서 아래로 자식 노드들이 뻗어나가는 구조이다. 가장 위는 root이고 제일 아래를 leaf라고 한다. leaf는 자식이 없는 노드이다....

2020년 1월 18일
·
0개의 댓글

[data structure] Linked List / javascript 구현

Linked List / 연결리스트 linkedlist.gif > 여러 노드들이 위 그림과 같이 한 방향을 가리키는 연결 구조이다. 가장 처음 시작하는 노드를 head라고 하며, 가장 마지막 노드를 tail이라고 한다. 노드 들은 본인의 이전 노드와 다음 노드를 기억한다. >> 예를 들어, 어떠한 작업을 했을 때, 이전 단계로 작업을 되돌리기 위해 단축키...

2020년 1월 17일
·
0개의 댓글

[JS] Big-O 시간복잡도

Big-O 란? > big-O는 알고리즘의 효율성을 나타내는 지표이다. big-O를 이용하여 알고리즘의 성능을 판단한다. big-O표기법은 보통 알고리즘의 시간 복잡도와 공간 복잡도를 나타내는데 주로 사용된다. >> 시간 복잡도는 알고리즘의 시간 효율성을 의미한다. 시간 복잡도란 시간 개념으로 알고리즘의 수행 시간패턴이 얼마인지를 나타낸다. 시간이 늘어...

2020년 1월 16일
·
0개의 댓글

[JS] OOP / 객체 지향 프로그래밍 / prototype

Object Oriented Programming / 객체 지향 프로그래밍 ? > 객체지향은 동작하는 부분을 캡슐화해서 이해할 수 있게 하고, 함수형 프로그래밍은 동작하는 부분을 최소화해서 코드 이해를 돕는다. -마이클 페더스‘레거시 코드 활용 전략' 저자 >> 객체지향의 경우 객체 안에 상태를 저장한다. 각 객체는 메시지를 받을 수도 있고, 데이터를...

2020년 1월 13일
·
0개의 댓글

[JS] asynchronous / 비동기 프로그래밍

자바스크립트에서 비동기가 왜 중요할까? > ## 자바스크립트는 single-threaded 이기 때문이다. > > ### single threaded / single callstack란? 쓰레드가 하나라는 말이다. 쓰레드 하나에 하나의 callstack이 존재한다. 하나의 callstack은 한 번에 하나의 작업만을 실행한다. >>> 실행해야 하는 작...

2020년 1월 11일
·
0개의 댓글

[자바스크립트 알고리즘] - 완주하지 못한 선수

프로그래머스 lev1. 완주하지 못한 선수 출처 - https://programmers.co.kr/learn/courses/30/lessons/42576 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 ...

2019년 12월 16일
·
0개의 댓글

underscore

_.identity _.identity는 인자를 그대로 반환 한다. _.first _.first는 배열의 처음 n개의 element를 담은 배열을 반환한다. 만일 n이 undefined일 경우, 단순히 첫번째 element를 반환한다. _.last _.last는 마지막 n개의 element를 담은 배열을 반환한다. 만일 n이 undefined일 경...

2019년 12월 16일
·
0개의 댓글

[자바스크립트 알고리즘] - 서울에서 김서방 찾기

프로그래머스 lev1. 서울에서 김서방 찾기 출처 - https://programmers.co.kr/learn/courses/30/lessons/12919 문제 설명 String형 배열 seoul의 element중 Kim의 위치 x를 찾아, 김서방은 x에 있다는 String을 반환하는 함수, solution을 완성하세요. seoul에 Kim은 오직 한 ...

2019년 12월 5일
·
0개의 댓글

Arrow Function 화살표 함수

화살표 함수에는 없는 것: 함수 이름, this, arguments 생성자로서 사용할 수 없다. 화살표 함수는 항상 익명이다. this가 없다. arguments가 없다. 화살표 함수에서는 arguments가 없다. 위와 같이 outter 함수를 감싸주면 화살표 함수는 outter의 scope를 참조한다. 파라미터 부분에 ...args를 사용하면...

2019년 11월 28일
·
0개의 댓글

let, var, const

let과 var의 차이점 let: block scope 안에서 유효한 스코프를 가지고 있으며, 지역변수를 선언한다. var: function scope 안에서 유효한 스코프를 가지고 있으며, 전역변수를 선언할 수 있다. let은 전역 객체를 통해 접근할 수 없지만 var는 접근이 가능하다. let은 재선언 할 수 없지만, var는 재선언 할 수 있다....

2019년 11월 27일
·
0개의 댓글

CSS layout

block vs inline block element 화면 전체를 사용하는 태그 inline element 화면의 일부를 차지하는 태그 block vs inline image.png display >display 속성을 사용해서 block element 를 inline element 로 바꿀수 있고, inline element를 block el...

2019년 11월 19일
·
0개의 댓글

재귀 함수 Recursion

Recursion 자기 자신을 호출하는 함수 재귀 함수를 사용할 때 탈출 조건을 꼭 만들어 주어야 한다.그렇지 않으면 무한 루프를 돌다가 결국 콜스텍 오버 에러를 낸다. 트리구조를 표현, 탐색하기에 재귀함수가 유용하다 장점: 알고리즘이 재귀로 표현했을 때 가독성이 좋다 . 단점: 값이 리턴되기 전까지 호출마다 call stack을 새로 생성하므로, 메...

2019년 11월 15일
·
0개의 댓글

[JS] Scope

Scope란? 변수가 접근가능한 범위이다. 내부와 외부를 판별하는 기준은 함수이다. var 키워드는 함수 단위함수가 하나의 범위. let 키워드는 '{}' 중괄호가 하나의 범위. 내부에서 외부는 접근 가능하지만, 외부에서 내부는 접근 불가능 하다. scope.gif 함수가 범위의 기준이 된다. 내부에서 외부는 접근 가능하지만, 외부에서 내부는 접근...

2019년 11월 13일
·
0개의 댓글

DOM

Document Object Model HTML 은 구성을 짜는 설계도 같은 역할을 하고, CSS 로 디자인을 했다면, DOM을 이용해서 화면을 만들어 준다. document html 문서의 구조와 관계를 객체로 표현한 모델. html 문서도 javascript 객체도 부모와 자식이 있는 트리구조 이다. document라는 전역 변수로 접근이 가능하다...

2019년 11월 12일
·
0개의 댓글