code

란 데이터(data)를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간말그대로 데이터를 저장하기위해 이름을 할당받은메모리 공간이라고 부르면된다.우린 두상자를 구별하기위해 변수명을 사용해줘야한다.메모리는 연속된 데이터 바이트의 모임.데이터의 종류에따라 메모리를

변수는 상황에따라 변할수 있는 값선언하고 할당하고!변수는 이름이 붙은 값이라고 할수있다!

e가 출력되는 것을 볼수있다. index가 hello h-0 e-1 l-2 l-3 o-4 인데 1째인것을 출력하기를 원하니깐 e가 출력되는것 만약 o를 출력하기를 원하면 4를 입력하면된다. o가 출력되는것을 볼수 있다.

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.고양이cat.name = "나비"cat.family = "코리안 숏 헤어"cat.age = 0.1cat.weight = 300cat.mew()cat.eat()cat.sleep()cat.p

원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다.원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.원시 자료형이 할당될 때는

타입연산자 ! const Scope ArrowFunction Types 확인 배열 객체(object)

❗️함수는 일급 객체이다.자바스크립트에는 특별한 대우를 받는 일급 객체가 있다.대표적인 일급 객체 중 하나가 바로 함수이다.👉 다음 조건을 만족하는 객체를 일급 객체라고 한다.1.무명의 리터럴로 생성할 수 있다. (런타임 생성이 가능하다.)2.변수나 자료구조(배열의

수를 입력받아 2의 거듭제곱인지 여부를 리턴해야 합니다.number타입의 정수 (num>=1)boolean 타입을 리턴해야 합니다.반복문(while)문을 사용해야 합니다.2의 0승은 1입니다.Number.isInteger, Math.log2, Math.log 사용은 금

문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자로 이루어진 문자열을 리턴해야 합니다.string 타입의 공백이 있는 알파벳 문자열string 타입을 리턴해야 합니다.단어는 공백 한 칸으로 구분합니다.연속된 공백은 없다고 가정합니다.빈 문자열을 입력받은 경우, 빈

✌Split ()문자열을 일정한 구분자로 잘라서 배열로 저장✌join (): 배열의 모든 요소를 연결해 하나의 문자열로 만든다.💡 substr() 문자열에서 특정 부분만 골라낼 때 사용하는 메소드.substr(start, length) -> 여기서 length 를 입

비동기 - fs 모듈을 사용한 파일 읽기이번 Sprint에서 사용 할 Node.js 모듈인 fs.readFile에 대해 간단히 정리해보자.fs.readFilefs.readFile(path, options, callback)파일을 options의 방식으로 읽은 후 cal

substr() 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.추출하고자 하는 문자들의 시작위치입니다. 만약 음수가 주어진다면, 문자열총길이 + start의 값으로 취급합니다. 예를 들면, start에 -3을 설정하면, 자동적으로

/ 빈 객체를 갖는 변수를 하나 선언한다.// 빈 배열을 입력 받는 경우 빈 객체를 리턴// 반복문을 돌며 arr 배열을 순회하고// 조건 : 중복 되는 키가 없고 arri의 길이가 0이 아닌경우에// arri의 첫번째 요소를 키로 두번째 요소를 값으로 넣어준다.

jsx를 활용한 선언형 프로그래밍하나의 파일에 명시적리액트는 하나의 기능 구현을 위해 여러종류의 코드를 묶어둔 컴포넌트를 기반으로 개발컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발

이렇게 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부릅니다.리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버"라고 부릅니다.클라이언트(client

에서 REST는 “Representational State Transfer”의 약자로, 의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었습니다. REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP U

REST API에 대해 이해할 수 있다.REST API 문서를 읽을 수 있다.REST API에 맞춰 디자인할 수 있다.Open API와 API Key에 대해 이해할 수 있다.Postman이 무엇인지 이해하고 사용할 수 있다.HTTP API 테스팅이 무엇인지 알 수 있다

프로토타입에서 그림과 같이 컴포넌트를 찾아냈습니다. 이렇게 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나갑니다. 즉, 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다. 그래서 여러분이 기획자나 PM, 또는 UX

pages/Main.jspages/component/Serch.js부모컴포넌트인 Main에서 onSearch로 search함수를 전달했다.(내려줬다)이 search함수는 주어진 검색 키워드에 따라 condition 상태를 변경한다.자식컴포넌트인 Search에서 onSe

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 말합

혹시 콘솔창에서 다음과 같은 에러를 보신 적 있으신가요? 웹 개발을 하다 보면, 이 에러를 적어도 한 번 쯤은 겪게 되고, 그리고 높은 확률로 이 에러 때문에 골머리를 앓는 경험을 하게 되실텐데요. 바로 CORS 에러 입니다.SOP은 Same-Origin Policy의

HTTP 트랜잭션 해부node.js HTTP 처리 과정을 를 통해 이해해보자.모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. 이 때 createServer를 이용한다.const http = require('http');const server = h

자동차 공장에서는 컨베이어 벨트 위에 올려진 자동차의 뼈대에, 각 공정마다 부품을 추가합니다. 모든 부품이 추가되면 완성된 자동차가, 어딘가 문제가 있다면 불량품이 결과물로 나오게 됩니다. 미들웨어(Middleware)는 자동차 공장의 공정과 비슷합니다. 컨베이어 벨트

statesairline/app.js: 서비스에 필요한 미들웨어와 웹 서버를 실행statesairline/router/ 안에 있는 파일: 작성된 라우터 내용을 통해 API 요청을 받을 수 있음. 구체적인 요청 수행 내용은 controller에서 받아옴statesairl

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만듭니다.와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨이 나눕니다.1\.

기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었습니다.페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했습니다.어? 그런데 기획자가 요청한 사항에서 버튼에 대한 기획이 이전에 요청받

먼저 상태가 무엇인지 다시 점검해 봅시다. 상태는 변하는 데이터입니다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"입니다.여기에 쇼핑몰에서 흔하게 볼 수 있는 장바구니 화면이 있습니다. 여기에는 몇 개의 상태가 있을까요? 다음 슬라이드를 바로 넘기지

웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고

크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다. 여기에서 중요한 포인트는 ‘동일한’이 아니라 ’동등한’이라는 표현을 쓴다는 것입니다. 크로스 브라우징은

이번 유닛에서는 컴퓨터를 이용하다 보면 흔히 접할 수 있는 IP, 캐시가 무엇을 뜻하는지 살펴보고, 이를 네트워크 통신과 관련하여 더욱 깊이 탐구합니다. 더불어 네트워크 흐름을 이해하기 위해서는 웹 통신을 가능하게 한 HTTP 통신의 흐름을 파악하는 것이 중요합니다.

HTTP 메시지는 헤더와 바디로 구분할 수 있습니다. HTTP 바디에서는 데이터 메시지 본문(Message body)을 통해서 표현(Representation) 데이터를 전달합니다. 여기서 데이터를 실어 나르는 부분을 페이로드(Payload)라 합니다.HTTP 헤더는

여러분이 Naver에 로그인하는 것은 본질적으로 “나는 Naver에게 내 정보를 줄 수 있을 정도로 믿고있다.” 와 같습니다. 내 아이디, 비밀번호뿐만 아니라 심지어는 나의 주소, 카드번호, 계좌의 비밀번호 등을 알려주기도 합니다.우리는 어떻게 이런 특정 웹사이트들을

Stack은 쌓다, 쌓이다, 포개지다 와 같은 뜻을 가지고 있습니다. 마치 접시를 쌓아 놓은 형태와 비슷한 이 자료구조는 직역 그대로, 데이터(data)를 순서대로 쌓는 자료구조입니다. 일상생활에서 Stack과 비슷한 예를 찾아볼 수 있습니다:다섯 대의 자동차가 순서대

이런 브라우저 상에서 제공되는 웹(Web)은 월드 와이드 웹(World Wide Web)이 풀 네임이며, 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공합니다. HTML 언어를 사용하여 작성된

CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용시키는 게 가능해졌습니다. 그러나 기기의 특성을 정확히 판단하기 어렵다는 단점 때문에 널리 사용되지 않았으나, CSS3부터는 이 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을

위의 사진은 애플에서 생산한 개인용 컴퓨터의 3번째 모델을 사용하는 방법을 소개하고 있습니다. 이 모델로 프로그램을 사용하려면 반드시 드라이브에 프로그램이 담긴 디스크를 넣어야만 했습니다. 그리고 다른 프로그램을 사용하고 싶다면 디스크를 빼고 새로운 디스크를 넣어야만

React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었습니다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작

만약 자식 노드들이 이 key를 갖고 있다면, React는 그 key를 이용해 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 아닌지 확인할 수 있습니다.React는 key 속성을 통해 ‘2014’라는 자식 엘리먼트가 새롭게 생겼고, ‘2015’, ‘2016’ 키를

useMemo은 특정 값(value)를 재사용하고자 할 때 사용하는 Hook입니다.아래 코드를 보면서 useMemo에 대해 좀 더 알아봅시다.해당 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리

컴퓨터는 단순하게 말하자면 하드웨어와 소프트웨어가 합쳐진 형태입니다. 하드웨어란 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있습니다. 소프트웨어는 그 하드웨어 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램입

운영체제의 목적은 처리능력 향상, 사용 가능도 향상, 신뢰도 향상, 반환 시간 단축 등에 있으며, 이런 운영체제의 기능은 여러 가지가 있습니다.프로세서, 기억장치, 입출력장치, 파일 및 정보 등의 자원을 관리합니다.자원을 효율적으로 관리하기 위해 자원의 스케줄링 기능을

2010년도 이후, 우리는 유니코드라고 불리는 인코딩 방식이 통일된 시대를 살아가고 있습니다. 문자열을 다루는 디테일한 방식에 대해 전부 알 필요는 없지만, 프로그래밍 언어마다 문자열을 다루는 자료형의 차이를 이해하기 위해 문자열을 다루는 기본적인 방식은 알고 있어야

GraphQL은 Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어입니다. Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를