UI 💡UI(User Interface) : 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 화면상의 그래픽 요소만 생각하지만, 키보드, 마우스 등의 물리적 요소로도 컴퓨터와 상호작용하기 위한 시스템으므로 UI라고 볼 수 있다. 터치로 상호 작용할 수 없엇던 과거에는 숫자버튼, 방향버튼 등 다양한 종류의 물리적 UI와 터미널과 같은 CLI와 키보드를 이용해서 텍스트만으로 컴퓨터와 상호작용 할 수 밖에 없었지만, 스마트폰이 대중화되고, 점차 스마트워치, 키오스크 등 화면과이 상호 작용을 통해 사용하는 기기들을 어렵지 않게 찾아볼 수 있게 되며, 현대사회에서는 그래픽 UI, 즉 GUI가 굉장히 중요한 역할을 하게 되었다. 💡CLI(Command Line Interface) : 명령줄 인터페이스 ex) 터미널 💡GUI(Graphical User Int

JavaScript에는 특별한 대우를 받는 일급 객체(first-class citizen)가 있다. 대표적인 것이 바로 함수이다. 아래는 이러한 함수의 3가지 특징이다 일급 객체의 3가지 특징 변수에 할당(assignment) 할 수 있다. 이러한 특징으로 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있으며, 함수를 데이터(string, number, boolean, array, object) 처럼 다룰 수 있다. 변수에 할당 했을 때의 또다른 예제 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수에 인자로 전달되는 함수를 콜백함수라고 하며, 아래의 예시에서 콜백함수는 sayHello 이다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 반환하는 함수를 고차함수라고 한다. 반환된 함수를 그대로 호출했을 때 ![](https://velog.velcdn.com/images/tvfxq0423/post/1

본 포스팅은 도저히 이해가 안가는 로컬스토리지와 세션스토리지에 대해 내가 알아먹기 쉽도록 정리하는 글이다. 이번 정리로 인해 제발 이해하자!! Storage ? 로컬스토리지는 쉽게 말해 브라우저내에 어떠한 데이터를 올려놓을 때 브라우저 세션간에 공유를 위해 저장하는 저장소이다. localStorage 와 sessionStorage로 나뉜다 localStorage 방문기록 삭제하는 것처럼 직접 삭제하기 전까진 기한 만료가 없어 사라지지 않는다. sessionStorage 데이터를 저장한 해당 탭을 닫음과 동시에 데이터가 삭제된다. 간단정리 스토리지에 저장한 자료는 페이지 프로토콜별로 구분된다고 한다. (http로 방문한 페이지에서 저장된 데이터와 https로 방문한 페이지에서 저장된 데이터는 각각 다른 스토리지에 저장된다) 키와 값으로 이루어져있어서 객체형태와 비슷하다. 항상 문자열(string)타입으로 저장된다

PostMan? HTTP API 테스트 도구(GUI) POST 요청하기 POST메서드는 필요한 자료를 리소스에 추가할 때 사용하는 메서드로 추가될 내용이 어떠한지 구체적으로 넣어야되는데 이를 본문(body)에 입력한다. POST를 선택 후 request URL을 입력한다. (예시로 http://3.36.72.17:3000/ 를 사용) 이때 서버만 기입하는 것이 아니라 구체적인 엔드포인트까지 작성한다. 해당 서버는 어떠한 유저 아이디로 작성된 메세지를 확인하는 서버로 작성자의 아이디와 전체메세지

Bare Minimum Requirement 상세 컴포넌트 구현하기 Tweet 컴포넌트 (Tweet.js) // 이미지, 유저 이름, 트윗 생성 일자, 메시지 데이터 연결하기 // 내용이 들어가는 구간에 {tweet.데이터키}로 맞춰서 기입 // 생성일자는 날짜형식이 정해져 있어 상단에 추가된 변수로 대체 // 트윗 생성 날짜 변경 = new Date(tweet.key).toLocaleDateString('ko-kr'); 페이지 컴포넌트 구현하기 MyPage 컴포넌트 (MyPage.js) // parkhacker의 정보만 보이도록 dummyTweets.filter() // 상단에 만든 변수를 이용해서 내용이 들어가는 구간에 {변수[0].key} 기입 // filteredTweets.map() 사용해서 ; props로 각 트윗의 정보전달 // 컴포넌트 하단에 추가

이벤트 핸들링 기본 방식 소문자 대신 카멜 케이스(camelCase) 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수 전달 onChange 입력값이 바뀔 때마다 발생하는 이벤트 폼(Form)엘리먼트 `, , ` 에 입력되는 입력값(변경될 수 있는 입력값)을 state로 관리하고 업데이트한다. 이때 해당 이벤트를 사용하면 그 입력값을 읽어올 수 있다. 예제 onChange 이벤트가 있는 input에 내용이 입력되면 {handleChange}라는 변수에 할당된 setName 함수에 들어간 (e.target.value)로 인해 입력값을 읽을 수 있게 되고, 그러한 입력값은 name이라는 변수에 할당되며 마지막으로 h1태그에 나타난다. onClick 사용자가 클릭이라는 행동을 할때 발생하는 이벤트 `, ` 처럼 링크 이동 등과 같이 사

Props Props ? 컴포넌트의 속성(property)을 의미한다. 외부로부터 전달받은 값 & 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 * 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값* 객체 형태 (어떤 타입의 값도 넣어 전달할수 있도록) class 문법, 함수 문법으로 만들 수 있다. 읽기 전용(read-only)으로 함부로 변경 ❌ > ### JSX 속성 및 값을 할당하는 방법 > 전달방법 1 전달방법 2 State State ? 컴포넌트 내부에서 변할 수 있는 값 (check box, toggle switch, couter 등..) 사용법 useState useState를 호출한다 === "stats"라는 변수를 선언한다 상위의 예시에 있는 state 변수에 저장된 값을 사용하려면, 엘리먼트 안

* SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다. SPA ? 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹사이트를 말한다. SPA의 장점 전체 페이지가 아니라 필요한 부분의 데이터만 받아 업데이트 하면 되기 때문에 사용자와의 인터렉션에 빠르게 반응한다. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다. 전체 페이지를 렌더링할 필요가 없어 더 나은 유저경험을 제공한다. > 유튜브, 페이스북, G메일, 에어비앤비, 넷플릭스 등 SPA의 단점 JavaScript 파일의 크기가 커서 파일을 기다리는 시간으로 인해 첫 화면 로딩 시

학습목표 React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 만들 수 있다. React 3가지 특징 선언형이다. JSX를 활용한 선언형 프로그래밍으로 코드만 보고 어떠한 내용인지 확인하기 쉽다. 컴포넌트 기반이다. 서로 독립적이고 재사용이 가능하기 떄문에 기능 자체에 집중하여 개발할 수 있다. 다양한 곳에서 활용할 수 있다.(범용성) 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있다. 페이스북에서 관리되어 안정적이고, 가장 유명하다. JSX ? JavaScript 를 확장한 문법 실제 브라우저에서는 실행이 불가능하여 Babel 로 컴파일 해야함. 기존에 HTML 파일에서 자바스크립트

REST ? HTTP/1.0과 1.1의 스펙 작성에 참여하고 아파치 HTTP 서버프로젝트의 공동 설립자인 로이 필딩의 논문에 처음 소개되었으며, HTTP의 장점을 최대한 활용할 수 있는 아키텍처 > ### API ? Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말 >>Application : 고유한 기능을 가진 모든 소프트웨어 >>Interface : 두 애플리케이션 간의 서비스 계약 >요청(Request)과 응답(Response)을 사용하여 두 애플리케이션이 서로 통신하는 방법 >* API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다. >구글 REST API 가이드문서 REST API 란? REST를 기반으로 서비스 API를 구현한 것 >**HTTP

객체 지향 프로그래밍 객체 지향 언어 JAVA, C++, C# 등.. (자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있다) OOP의 특징 프로그램 설계 철학 객체로 그룹화된다. ex)클래스와 인스턴스 4가지의 주요 개념을 통해 재사용성을 얻을 수 있다. 캡슐화, 상속, 추상화, 다형성 객체 지향 프로그래밍(Object Oriented Programming) 사람이 세계를 보고 이해하는 방법을 흉내 낸 방법론 단순히 별개의 변수와 함수로 순차적으로 작동하는 절차 지향 프로그래밍을 넘어서 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어내는 방식이다. 데이터의 기능과 별개로 취급되지 않고,

객체 지향 프로그래밍 하나의 모델이 되는 청사진 → class 을 만들고, 그 청사진을 바탕으로 한 객체 → instance 를 만드는 프로그래밍 패턴. 클래스(class) 클래스는 객체 지향 프로그래밍에서 특정 객체(인스턴스)를 생성하기 위해 변수와 메소드를 정의하는 일종의 청사진 인스턴스(instance) 클래스를 바탕으로 한 객체 일반 객체 object 와 구분하기 위하여 instance 라 정의한다. 클래스를 만드는법 생성자 함수(ES5 클래스 작성 문법)사용 class 키워드(ES6 문법) 사용 new 키워드 new 연산자를 이용해 위에서 만든 클래스의 인스턴스를 만들 수 있다. 코드 실행 결과 이 두 코드의 실행을 통해 아래와 같은 결과가 나온다. 코드 실행을 통해 변수에 클래스의 설계를 가진 새로운 객체(인스턴스)가 할당 됨을 알 수 있다. 이렇게 만들어진 각각의 인스턴스는 클래스의

자바스크립트에서 변수를 선언할 때 우리는 var, let, const를 사용합니다. var는 기존 자바스크립트에서 써오던 키워드이며, let과 const는 ES6부터 추가된 키워드입니다. var를 사용하면 hoisting으로 인해 ReferenceError에러가 나지 않고, 변수가 중복선언이 가능하여 예측하기 어려운 코드로 만들어질 가능성이 높습니다. 이에 반해 let과 const는 각각 재할당의 가능여부와 변수를 재선언을 할 수 없다는 점으로 인해 보다 이해하기 쉬운 코드로 제작이 가능합니다. 보다 자세한 내용은 다른 포스팅에서 정리하겠습니다. 본 주제로 넘어와서 const는 상수로 재할당되지 않는 값을 변수로 선언할 때 사용하는 키워드입니다. 하지만, 배열과 객체를 const로 선언할 때는 우리가 알고있는 것과 다르게 요소나 속성을 추가, 수정 그리고 삭제가 가능합니다. WHY? 이는 저번에 정리해보았던 원시자료

JavaScript Koans 과제 내용 중에서 이해를 위해 정리한 내용이다. 04_Scope.js 함수선언식(declaration) => 호이스팅이 된다. 함수 표현식(expression) => 호이스팅이 없다. >## 호이스팅(hoisting)이란? 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장하게 될 경우 자동으로 변수를 정의하는 코드가 최상단으로 올라가는 것 >>#### TMI var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 그러니까 var는 쓰지말자!!! 코드 작성시 선언식으로 할지 표현식으로 할지 하나로 통일하자. 가능하면 호이스팅을 인지하고, 코드를 읽을 필요없이 직관적으로 순서대로 적어야 한다. 변수에 값을 할당할 때, let 이

원시 자료형과 참조 자료형의 특징 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다. 그래서 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용할 수 있으며 그 보관함은 heap이라고도 부른다. 원시 자료형 (primitive data types) Javascript에서 객체가 아니면서 method를 가지지 않는 6가지 타입을 말한다. string, number, bigint, boolean, undefined, symbol, (null) 이 중에서 자주 사용하는 4(+1)가지 원시 자료형은 아래와 같다. >string, number, boolean, undefined, (null) 원시 자료형 특징 과거의 제한된 메모리 용량으로 인해 각각 변수 하나에