Javascript Event loop
·
JavaScript
자바스크립트는 싱글 쓰레드를 기반으로 한다 따라서 원래라면 하나의 일을 처리한 후 다음 일을 처리할 수 있다 하지만 브라우저가 제공하는 WebAPI를 통해 자바스크립크에 효과적으로 스레드를 지원한다 console.log( ' hi ' ); setTimeout ( function cd( ) {console.log( ' there ' );} , 5000 ); console.log( ' JS ' ) //consolehiJSthere console.log( ' hi ' ); 와 console.log( ' JS ' ) 는 stack에 쌓이고 바로 실행이 되지만 setTimeout 은 WebAPI에 넘겨진다그 후 5초가 흐른 후 task queue로 넘어간다이 때 stack이 비어 있으면 event loop는 qu..
react props, state Bloging
·
React
1. props function Welcome(props) { return Hello {props.name}; } props : props를 받는다props.name : 받은 props의 name(키값)의 value값을 넣음 const element = ; name="Sara" : 개념적으로 볼때 props : {name : "Sara"}props 오브젝트가 생성되어 전달 된다고 생각하면 된다. 2. defaultProps class Welcome extends React.Component { render() { return Hello {this.props.name}; } } Welcome.defaultProps = { name: "world", }; defaliutProps 메소드를 사용하여 넘겨받은 ..
GET / POST 의 차이
·
Tech Memo
HTTP - 웹상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜(규약, 약속) - 클라이언트가 HTTP 프로토콜을 통해 서버에 요청을 보내면 서버는 요청에 맞는 응답을 클라이언트에 전송- GET과 POST는 HTTP 메소드 중 비슷하지만 다른 역할이기에 GET / POST 의 차이점을 알아보자 'GET은 가져오는 것이고 POST는 수행하는 것' GET- Select적인 성향을 가지고 있다- 데이터를 가져와서 보여주는 용도일 뿐 서버의 값이나 상태 등을 바꾸지 않는다- 입력한 query의 이름과 값이 URL에 결합되어 서버에 전달 된다- 따라서 전송 데이터 양에 제한이 있다 - ex) 게시판의 리스트나 글보기 같은 기능 POST- 서버의 값이나 상태를 바꾸기 위해서 사용- ..
JS prototype /create
·
JavaScript
quiz1 1234var obj1 = { x: 10 };var obj2 = Object.create(obj1); //obj1을 상속 받음, x값이 prototype에 위치 var result = obj2.x; // proro에 위치한 x값 10을 가져옴cs quiz2 123456var obj1 = { x: 10 }; var obj2 = Object.create(obj1); // obj1을 상속받음 obj2.x = 20; // obj2에 x를 정의하고 20의 값을 넣음 var result = obj2.x; // 상속을 받았지만 x가 생성되면서 더 가까운 20의 값을 가져옴cs quiz3 123456var obj1 = { x: 10 };var obj2 = Object.create(obj1); //obj1 상..
자료구조 tree, graph, hash table, binary search tree
·
Tech Memo
1. graph- 노드들이 선으로 연결되어 삼각형의 형태를 띄고 있는 자료구조- tree 구조와는 다르게 노드가 하나 이상의 in-degree, out-degree를 가질 수 있다.- directed graph: deree가 방향성을 가지고 있다: E노드의 경우 in-degree 2개, out-degree 2개 로 표현한다 - undirected graph: 방형성이 없어 E노드는 degree가 4개라고 표현한다 2. tree - 구조가 나무의 뿌리 같이 생겨 트리 구조라고 불리운다- 부모노드에서 자식노드로 갈 수 있지만 자식 노드는 부모노드로 갈 수 없다.- 작은 graph구조라고 할 수 있다 3. binary search tree- 정렬 알고리즘 이다- 어떠한 기준(사진에서는 자신보다 크면 오른쪽 작..
자료구조 stack, queue, linked list
·
Tech Memo
1. stack- FILO(first in last out), LIFO(last in first out)- psedo code: 필요한 매소드자료를 넣는 매소드 ->넣은 순서대로 쌓일 것넣은 자료를 뒤에서 부터 빼는 매소드 2. queue- FIFO(first in first out) - psedo code: 필요한 매소드자료를 넣는 매소드 ->넣은 순서대로 쌓일 것넣은 자료를 앞에서 부터 빼는 매소드 3. linked list - 배열과의 차이점: 만약 중간에 자료를 넣어야 할때 배열의 경우 중간 이후의 모든 자료들이 방을 이동해야 하지만 linked list의 경우 앞의 메모리 영역과 뒤의 메모리 영역 사이에 연결만 잘 해주면 된다.- psedo code: 필요한 매소드노드와 노드를 이어주는 매소드노..
VScode에서 리눅스 Bash 연동 하기
·
Dev Tools
참고 사이트 : https://daverupert.com/2018/04/developing-on-windows-with-wsl-and-visual-studio-code/ 1. file - preferences -settings에서 사진과 같이 검색 후 경로 변경 2. ctrl + ` 로 터미널 창을 연 후 Jest/ESlint 설정 https://jcon.tistory.com/49?category=771213
Linting & Testing / Jest, ESlint 설치
·
Dev Tools
code quality란?1. 코드가 해야 할 일을합니다.2. 코드에 결함이나 문제점이 없어야 합니다3. 코드가 읽기 쉽고, 유지와 확장성이 좋아야 합니다. code quality를 향상 시키기 위해선?1. Test- 1번과 2번을 향상- Testing Tool: Unit Test - Jest: Integration Test: End to End Test (front end to back end) 2. Linter- 2번과 3번을 향상- Airbnb Style Guide : https://github.com/airbnb/javascript- Logical Lint: 코드에 오류가 있는지 확인: 잠재적으로 의도하지 않은 결과가 있는 코드 확인: 위험한 코드 패턴이 있는지 확인- When: IDE 용 코드 ..
pair git push/pull
·
Git
1. github repo를 각각 fork하고 clone 한다 git clone/push 방법 2. pair의 github를 remote한다 명령어 : git remote add pair https://상대방 clone 주소 3. 작업이 완료 되면 내 repo에 commit 후 push 한다 명령어 : git commit -m '내용' : git push origin master 4. 상대방의 repo에 push한다 명령어 : git push pair master 5-1. 상대방이 작업하여 나의 repo에 push한 파일을 가져올 때 명령어 : git pull origin master 5-2. 상대방의 repo의 파일을 가져올 때 명령어 : git pull pair master