리액트의 대해 알아봅시다. 리액트를 시작 하기 위해선 먼저 프로젝트를 만들어야 합니다. 생성이 완료 되었다면 리액트 실행은 아래와 같이 합니다. http://localhost:3000/ 이 열리고 기본 리엑트 로고가 보입니다. 생성되는 파일에서 index.js

오늘은 express와 리엑트를 함께 연동해서 실행하는 방법의 대해 알아봅시다. 리엑트 설치 2.리엑트를 실행리엑트는 포트 번호를 3000으로 자동 설정이 되고 node.js의 express는 다른 포트 번호를 설정해 주어야 충동이 일어나지 않는다. express 설치

노드는 v8엔진으로 만들어진 자바스트립트 런타임이다. v8 = 자바스크스립트를 기계어로 컴파일 해준다! 런타임 = 프로그래밍 언어가 구동되고 있는 환경 이벤트 기반 및 논블로킹 I/O 이벤트 = 유저의 버튼 클릭이나 네트워크에 리소스를 요청 하는 것 등블로킹 = 다음

앞으로 서버 조작을 위해 용어 정리를 해봅시다. !! BrowserServerAPIHTTPAjaxCORSXSS브라우저는 클라이언트 이며 html, js, css로 작성한 코드를 컴퓨터가 알 수 있게 합니다. 컴퓨터 사용자에게 눈에 보이는 화면을 보여줍니다. 서버는 클라

기본적인 가져오기 요청은 이렇게 이루어 집니다. 여기서는 네트워크를 통해 JSON 파일을 가져 와서 콘솔에 인쇄합니다.fetch()은 하나의 인수 (가져올 리소스에 대한 경로)를 취하고 응답 ( Response객체)을 포함하는 promise를 반환합니다 .예제를 통해

동기와 비동기가 있습니다. 먼저 동기는 순차적으로 일을 처리 하는것입니다. 비동기는 일처리를 하면서 동시다발적으로 각각 일을 처리 하는것입니다. 위에 그림에서 보면 첫번째 그림은 동기적인 처리 입니다. 첫번째 일을 서버에 넘기고 응답이 오면 다음 일을 처리합니다. 반면

흔히 ES6이라 불리는 javaScript언어의 표준이다. 아직도 ES6전 코딩방식을 하고 있다면 지금부터 습관을 바꿔 보도록 해보쟈 !!!🔥🔥🔥🔥구조분해할당이라 불린다. 배열과 객체의 속성을 해체하여 그값을 개별 변수에 담을 수 있게 하는 표현식 입니다.응용해

앞서 객체지향의 전반적인 내용을 알아보고 왔습니다. 객체 지향의 가장 큰 특징중 하나는 상속 기능이 아닐까 생각 합니다. 이번에는 상속의 대해 자세히 알아보고 갑시다. 먼저 .\_ proto \_ 배우고 가봅시다. 위에 클래스를 하나 만들어 보았다. 그리고 steve

클래스,상속,인스턴스,,,캡슐,,, 등 너무 복잡 헷갈린다. 이번 시간 이모든 용어 들과 객체지향의 전반적인 구조 원리를 정리 해보자!! 먼저, 프로그래밍 언어를 3가지로 나눌 수 있다.Machine Languages(기계어) -> 컴퓨터가 이해 하는 언어 0,1로만

트리는 하나의 루트노드를 갖는다.루트 노드는 0개 이상의 자식 노드를 갖고 있다. 그자식 노드 또한 0개 이상의 자식 노드를 갖고 있고, 이를 반복적으로 정의된다. 사이클이 없는 그래프의 한종류 이다. 계층모델이다. 루트 노드(root node): 부모가 없는 노드,

그래프는 노드(Node,vertex) 그리고 노드와 노드를 연결하는 간선(edge)으로 구성 됩니다. 그래프는 무방향 일수 있습니다. 이는 간선에 의해 연결된 2개의 노드가 대칭일 수 있다는 의미 입니다. 한편 방향성을 가질 수도 있는데, 이는 비대칭 관계를 의미 합니

키와 값 쌍을 저장 하고 있는 자료 구조 입니다. 키를 저장 할때에 메모리 공간을 덜 사용할 수 있도록, 키를 해시함수라는 함수를 통해 특정 숫자값 인덱스로 변환후 저장합니다. 그림에서 storege가 저장을 하는 테이블이고 0~7은 해시함수로 변환된 인덱스를 뜻합니다

1. 링크드 리스트 연결리스트는 그 크키가 동적인 자료구조입니다. 자료구조를

1. 스택 스택은 접시를 쌓아 놓았다고 생각하면 이해가 잘 됩니다. 맨위에 접시를 쌓고 접시를 가져갈때도 맨위에 부터 가져 갑니다. stack 주요 연산 top() : 스택의 가장 윗 데이터를 반환한다. pop() : 스택의 가장 윗 데이터를 삭제한다. push()

ESlint를 이용해서 코드의 띄어쓰기나 줄바꿈 등의 규칙들을 맞추는 데에 도움이 되어집니다. 순서대로 코드를 입력해주고 중간에 질문이 나온다면 해당되는 답변을 자신의 맞게 설정해줍니다. ! 위에 3가지 과정을 하고 나면 package.json 파일에 devDepend

프로젝트를 하기전에 개념을 대충 흘러 넘겼더니 ,,, 역시냐 프로젝트 진행중에 헷갈려서 돌아 버리는줄 알았다. 🤬 그러니깐 잘 알고 갑시다. 😭 시작 합니다. 런타임 프로그램밍 언어가 구동되는 환경입니다. 지금까지는 js를 실행시키기 위해 html 에 태그로

this는 함수 실행시 호출 방법에 의해 결정되는 특별한 객체 입니다. 지금부터 this의 4가지 동작 방식에 대해 살펴 보도록 합시다 1. 기본바인딩(전역객체) this를 콘솔에서 console.log(this) 를 치면 이런식으로 보입니다. javascript

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해봅시다. 📍 함수 표현식📍 화살표 함수function을 생략하고 화살표로 표현해줍니다. 함수의 본문에 return 문만 있는 경우 return을 생략가능합니다. return을 생략하

협업으로 프로젝트를 하다가 master의 원본을 건드리지 않고 독립적인 작업공간이 필요할때가 있습니다. 그럴때 사용하는것이 branch입니다. 📍 master는 원본을 뜻합니다. master를 수정하면 전체 공유하고 있는 파일이 수정 됩니다. 브랜치를 먼저 생성해봅시

깃허브에서 folk하여 혼자 코드 수정하고 혼자 커밋해서 혼자 코딩 하는것은 앞전에서 자세한 설명을 하였습니다. ! 그러나 ! 실무에서는 ...!! 혼자 하지 않습니다. 하나의 프로젝트를 위해 여러명이 달려듭니다. 그럼 이번엔 동료와 깃허브를 가지고 놀아 봅시다 !