[CODESTATES]Immersive Flex

1. 수업 정보 수요일 ➡ 19:00 ~ 22:00 토요일 ➡ 14:00 ~ 21:00 2. 다음 수업까지 해야할 일 Flex 02 Students -> codestates immersive Course 영상 보기 Immersive Sprint 둘러보기 Reference & Special Session 비전공자 개발...

Git Workflow sprint Repo Fork 자신의 로컬로 가져오기 pair의 Repo와 나의 로컬을 연결 코드 작성 후 커밋 자신의 github Repo에 push pair의 Repo 내 로컬로 당겨오기 ! 주의 ! push는 내 Repo pull은 pair의 Repo

stringifyJSON 먼저 JSON.stringify에 넣고 실행하면 어떤 결과값이 나오는지 파악을 해보았다. number, boolean, null => 문자열로 변환된다 string => 'string' array => '['value']' : 배열 안에 요소도 문자열로 변환된다. object => '{'key':'value'}' : 객체 안에 ...

jest 테스트 코드의 describe, test, expect에서 'no-undef'라는 오류가 발생해서 'jest eslint no-undef'라는 키워드로 구글링시도 위의 코드를 추가하니 해결되었다 ➡ 참고링크

jest 테스트 코드 toEqual(value), toBe(value) toEqual : 원본배열이 아니어도 속성 값이 같으면 테스트 통과 toBe : 원본배열과 같은 주소를 참조하여야 테스트 통과 toBeTruthy(), toBeFalsy() toBeTruthy() ➡ 검증 대상이 true인 경우 테스트 통과 toBeFalsy() ➡ 검증 대상이 fal...

tree Tree의 예시로 컴퓨터의 directory 구조를 생각해 볼 수 있다. 어떠한 프로그램, 사진, 영상 등을 찾을 때 우리는 폴더에서 폴더로 들어가 찾는다. 이렇게 계층적인 구조를 갖는 것이 트리라 할 수 있다. property image.png 출처 : https://monsieursongsong.tistory.com/6 Root Node ...

Hash Table 해시 테이블은 연관배열 구조를 이용하여 키(key)에 결과 값(value)을 저장하는 자료구조이다. 연관배열 구조 : 키 1개와 값 1개가 1:1로 연관되어 있는 자료구조이다. Hash Table 구조 image.png 키는 해시함수를 통해 해시로 변경되고 해시는 값과 매칭되어 저장소에 저장된다. 키(key) 고유한 값으로 해시 함...

이진탐색트리(Binary Search Tree) 이진탐색트리란 이진탐색과 연결리스트(Linked list)를 결합한 자료구조의 일종이다. 이진탐색의 효율적인 탐색 능력 + 연결리스트의 효율적인 자료 입력과 삭제 기능 이진탐색과 연결리스트가 서로의 단점을 보완해준다. image.png 💁‍♀️ 참고블로그 이진탐색트리 동작 원리 왼쪽 서브트리는 루트노드...

Graph 노드(N, node)와 그 노드를 연결하는 간선(E, edge)을 하나로 모아 놓은 자료 구조 연결되어 있는 객체 간의 관계를 표현할 수 있는 자료구조이다. 예시) 지도, 지하철 노선도의 최단 경로 Graph 종류 1. 방향 그래프 image.png In-degree : 다른 버텍스에서부터 오는 아크의 개수 Out-degree : 다른 버텍...

Queue Queue는 편의점이나 마트에서 물건을 팔때 먼저 들어온 물건을 앞에 진열하여 팔리게하는 것과 비슷하다 image.png FIFO(First In First Out), 먼저 집어넣은 데이터가 먼저 나온다. 🏃🏻‍♂️ method enqueue 데이터를 집어넣는 메소드(맨 앞 요소) dequeue 데이터를 추출하는 메소드 ✍ pse...

prototype 자바스크립트에는 Prototype Link 와 Prototype Object라는 것이 존재한다. 그리고 이 둘을 통틀어 Prototype이라고 부른다. 1. Prototype Object 객체는 언제나 함수(Function)로 생성된다 위와 같이 함수가 정의될 때 2가지 일이 동시에 일어난다..! 해당 함수에 Constructor(...

JavaScript에서 Object를 생성하는 여러가지 방법들(Instantiation Patterns) 1. Functional position 초기값을 정해줄 수도 있다 Functional 방식은 인스턴스를 생성할 때마다 모든 메소드를 someInstance에 할당해서 각각의 인스턴스들에 해당하는 메소드의수 만큼의 메모리를 더 차지하게 된다. ...

1. OOP(Object Oriented Programming) 01. OOP의 의미 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 코드의 재사용성과 중복제거가 가장 큰 목적 02. OOP 키워드 4가지 추상화 불필요한 정보는 숨기고 중요한 정보만을 표...

해당 포스트에 쓰인 모든 이미지의 출처는 코드스테이츠입니다. 주제 시간복잡도가 무엇이고 왜 사용되는지? 각 자료구조별 시간복잡도 분석 1. Complexity Analysis - 복잡도 분석 input n 에 대하여 알고리즘이 문제를 해결하는 데에 얼마나 오랜 시간이 걸리는 지를 분석하는 것 Big-O 표기를 이용하여 정의할 수 있다. O(1)...

Subclassing 객체 지향 프로그래밍(OOP)의 Polymorphism과, Inheritance의 개념을 이해하는 것이 중요 Prototype Chain Student에서 Human의 Prototype에 있는 sleep 메소드를 사용하려면? 잘못된 방법 - 1 ✍ john.proto = Human.prototype; proto는 참조하는 용도로만...

오늘 6번째 checkpoint를 풀다가 결과값이 왜 이렇게 나오는지 아무리봐도 이해가 안가는 문제가 있어 구글링을 해보았다. 일단, 내가 이해 안갔던 문제 내가 잘못 알았던 사실 callback(20)이 0.5초 후에 실행되고 callback 실행이 끝나면 return data를 실행한다 구글링 후 알게된 사실 return data를 먼저 실행하고...

1. 일반 함수에서 this 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. (B)에서 this가 window를 가르키는 이유? 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역...

인스턴스화 패턴은 JavaScript로 무언가를 만드는 방법이다. JavaScript는 객체를 생성하는 4가지 방법을 제공하는데 어떤 방법을 사용하든 모든 방법은 다음과 같은 기능을 제공한다. object 생성 object에 methods 및 properties 생성 JavaScript에는 아래와 같이 네가지 instantiation pattern이 있다...

증감 연산자(++)의 특징 접미사로 사용되면 증가하기 전에 값을 반환한다. 접두사로 사용되면 증분 후 값을 반환한다. 예시1) b에 a의 value인 5가 할당되고 그 후에 a가 증가(++) 된다. a가 증가(++)된 후에 b에 a가 증가(++)된 값인 6이 할당된다. 예시2) 접미사로 사용되었을때, obj[count] = val를 실행한다. cou...

new가 하는 일 새로운 빈 객체를 만들어낸다. this를 새로 만들어진 객체에 bind한다. 새로 만들어진 객체에 "proto"라 불리는 property를 더한다. 이것은 constructor 함수의 prototype 객체를 의미한다. return this를 함수의 끝에 추가한다. 때문에 객체는 함수로부터 return되어 만들어진 것이다. 예시) 새로...

브라우저의 핵심 기능 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Reponse)을 받아 브라우저에 표시하는 것이다. 01. HTML, CSS 처리 과정 HTML, CSS는 렌더링 엔진이 처리한다. 브라우저는 서버로부터 HTML, CSS, JavaScript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더...

server 작동 원리? server는 리소스 요청과 응답에 대한 처리를 한다. 클라이언트 : 웹브라우저가 설치된 컴퓨터 서버 : 웹서버가 설치된 컴퓨터 클라이언트에서 서버에 원하는 리소스를 요청한다. 서버는 데이터베이스에 저장된 리소스를 찾아서 클라이언트에 응답한다. image.png [이미지 출처 : 생활코딩]

HTTP란? 클라이언트와 서버가 통신하기 위해서 HTTP라고 하는 규약 혹은 규칙을 지켜서 통신을 한다. HTTP(Hypertext Transfer Protocol) Protocol ? 상호 간에 정의한 규칙을 의미한다.(규약, 규칙) 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 이다. 프런트엔드 개발자라면 필...

공통헤더 요청과 응답에 모두 사용되는 헤더이다. Date HTTP 메시지가 만들어진 시각. 자동으로 만들어진다. image.png Content-Length 요청과 응답 메시지의 본문 크기를 바이트 단위로 표시해준다. 메시지 크기에 따라 자동으로 만들어진다. image.png Content-Type Content-Type: text/html; char...

API > API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 "응용 프로그램에서" 사용할 수 있도록, "운영 체제나 프로그래밍 언어가 제공하는 기능""을 제어할 수 있게 만든 인터페이스를 뜻한다. [출처 : 위키피디아] 운영체제나 프로그래밍 언어가 제공하는 기능 SK의 날씨정보, Daum의 지도정...

브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 이것은 브라우저와 서버와의 통신에 의한 것이다. image.png 이미지 출처 : [poiemaweb] 01. 웹페이지 렌더링 image.png 이미지 출처 : [poiemaweb] 서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML에서 로드하는 CSS나 JavaScri...

Promise를 사용하면 resolve 시점에서 객체를 직접 리턴할 수 없다. 그래서 비동기 처리를 할 때 액션 객체를 반환하는 대신 dispatch를 인자로 하는 함수를 리턴해 이 함수안에서 데이터펫칭을 비롯한 네트워킹, 다수의 디스패치 등을 할 수 있게 해주는 미들

https://www.it-swarm.dev/ko/javascript/reactrouter-props%EB%A5%BC-%EC%B2%98%EB%A6%AC%EA%B8%B0-%EA%B5%AC%EC%84%B1-%EC%9A%94%EC%86%8C%EC%97%90-%EC%