공부

HTML : Structure 구조CSS : Presentation 스타일JS : Interaction 상호작용서로의 관심사 분리를 위해 각각 나눠서 코드 작성웹 개발 과정은 하나의 건물을 세우는데 비유할 수 있다.Bluprint === Structure각각의 부분에

CSS (Cascanding Style Sheets)CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어.CSS는 좋은 사용자 경험을 제공하기 위한 도구입니다.CSS는 웹사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 합

CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector전체 셀렉터는 문서의 모든 요소를 선택태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택, 복수로도 선택할 수 있다.ID 셀렉터는 \`\`\`.widget { }.center { }ahref { }pid

Array.isArray() = () 해당 내역이 array 일 경우 true; 반환 console.table(arr) = 표 형식으로 확인 가능뒤에 element + = push뒤에 element - = pop앞에 element + = unshift앞에 element

MMArray.push()Array.pop()Array.shift()Array.unshift()(4형제)Array.splice()IMArray.slice()Array.Concat()Array.join()

객체의 값을 사용하는 방법 2가지Dot ( . ) notation2.Bracket notation Dot vs BracketBracket - key 값이 변수일 때,Dot - 동적인 값일 때는 사용이 어려움\--> dot/bracket notation 을 이용해 값

Primitive data : number, string, boolean 과 같은 고정된 저장공간을 차지하는 데이터 (undefined,null 등도 포함)라고 하더라도 a=1, b=2 식으로 a라는 데이터 값을 복사해서 사용하는 것이므로 b 를 수정하더라도 a의 값에

JavaScript 에서 scope는 무엇일까?컴퓨터 공학, 그리고 JS에서의 스코프는 "변수의 유효범위"로 사용된다.이처럼 변수에 접근할 수 있는 범위가 존재한다. 중괄호(블록) 안쪽에 변수가 선언 되었는가, 바깥쪽에 변수가 선언되었는가가 중요하다. 이 범위를 스코프

JS에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있다. 그 중 종종 사용되는 클로저라는 개념에 대해서 알아보자. MDN의 클로저 정의에 따르면, 다음과 같다."함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된

자바 스크립트에도 일종의 버전이 있다.바로 자바스크립트의 표준인 ECMAScript 이다.현재까지 가장 최신 버전은 2018년에 출시된 ES2019이지만, 2015년에 출시된 ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었다.let 키워

Konans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. JS Koans는 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀수 있다. 하지만 그게 왜 정답인지 깊게 고민 해 보는

DOM은 Document Object Model 의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manupulation)할 수 있는 Model입니다.즉, JS를 사용 할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.HTML을

JS에도 특별한 대우를 받는 일급 객체 first-class citizen이 있다. 대표적인 일급 객체 중 하나가 함수이다.JS에서 함수는 아래와 같이 특별 취급하게 된다.변수에 할당assignment 할 수 있다.다른 함수의 전달인자argument로 전달될 수 있다.

OOPObject - oriented programming 은 사람이 세계를 보고 이해하는 방법과 매우 흡사하다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 이미 오래전부터 프로그래밍 방법론으로 빠르게 적용됐다.객체 지향 프로그래밍을 철저하게 적용한 프로그래

객체 지향 프로그래밍이라는 패러다임이 등장하기 전으로 돌아가보자. 먼저 절차 지향 프로그래밍이 있었다. 우리는 앞서 모든 것을 절차적으로 생각해왔다. 기껏해야 함수로 이동하는 것이 전부였다.초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였다.그러

다음과 같이 Human 이라는 클래스를 구현해 봅시다.다음 그림은 반드시 기억하자.

객체 지향 프로그래밍의 특성 중 상속을 JS에서 구현할 때에는 프로토타입 체인을 사용한다.예시를 위해, 학생과 사람이라는 클래스가 각각 존재한다고 가정. 클래스 Human 의 메서드와 속성을 객체로 구현한다면, 다음과 같다.학생은 학생이기 이전에, 사람이다. 따라서 클

카페에서 커피를 주문하려고 줄을 서는 모습을 상상해 보자.카페의 사정상, 커피를 주문한 먼저 온 김코딩이 주문한 커피를 받을 때까지, 줄 서 있는 박해커가 주문조차 할 수 없다고 하자. 이를 blocking이라고 부른다. 하나의 작업이 끝날 때까지, 이어지는 작업을 막

About Node.jsAs an aynchronous event-driven JS runtime,... Node.js being designed without threadsAsync가 좋은 것은 알겠는데 순서를 제어하고 싶은 경우엔 어떻게?\--->Callback e

Callback 문제fs.readFile()에 관하여,Node.js가 '파일을 읽는' 방법.사용 방법JS에서 함수는 object라고 한다. 함수는 다른 함수의 인자로 쓰일 수도 어떤 함수에 의해 리턴 될 수도 있다. 이런 함수를 고차 함수라고 한다. 결국, 인자로 넘겨

리액트란? 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 리액트의 3가지 특징 리액트는 선언형이고, 컴포턴트 기반이고, 다양한 곳에서 활용할 수 있다는 특징이 있다. 선언형 컴포넌트 기반 범용성 선언형Declarative 리액트는 한 페이지를 보여주기 위해

JavaScript의 map() 메서드는 부모 배열에 있는 각 요소에 대해 특정 함수를 호출하여 배열로 만든다.매개변수 : 이 메소드는 위에서 언급하고 아래에 설명된 대로 두 개의 매개변수를 허용한다.function(currentValue, index, arr) : 필

arr.filter() 메서드는 내장 된 메서드로, 이 메서드는 주어진 기준과 조건을 따르거나 통과하는 요소로 새 배열을 만든다.매개변수 : 이 메서드는 위에서 언급하고 아래에 설명된 대로 5개의 매개변수를 허용한다.callback : 이 매개변수는 배열의 각 요소에

웹 페이지에서는 유저에게 보여줄 때 즉, 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달 받아와서 렌더링을 했다. 하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라, 속도 저하 등의 문제가 발생하게 된다. React에서는 이러한 문제를

Q. 1filter method를 이용하여 username이 kimcoding인 요소만 있는 배열을 filteredTweet에 할당한다.dummyTweets에 filter method를 실행시킨다.\--> tweet 이라는 변수에 tweet.username 이 'kim

쇼핑몰에서 옷을 주문하는 상상을 해보자.원하는 옷을 장바구니에 담고 결제를 하려고 보니 다른 옷이 더 마음에 든다. 장바구니에 담은 옷을 빼고, 새로운 옷을 담아 결제를 한다.이 상황에서 장바구니에 담기는 옷은 바뀌고 내가 결제 해야 할 금액도 즉각적으로 변경된다. 이

state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이라고 했다. 실제 애플리케이션에서는 무엇이 '상태'라고 할 수 있을까?쇼핑몰 장바구니를 예로 들어보면, 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여

Reat의 이벤트 처리방식은 DOM의 처리방식과 유사핟.단, 몇 가지 문법의 차이가 있다.React 에서 이벤트는 소문자 대신 카멜 케이스camelCase를 사용한다.JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달한다.예를 들

React에서는 상태에 해당하는 데이터를 state로 따로 관리하고 싶어한다. 이렇게 React가 state를 통제할 수 있는 컴포넌트를 Controlled Component라고 한다. Hooks로 Controlled Component 구현에 대해 더 자세히 알고싶다면

해당 내용에 관련하여 적기 이전에 한마디만 하고 가고싶다.오늘 그룹 회고를 마치고 나오며 교육 엔지니어가 한마디 한게 떠오른다.오늘이 가장 쉬운 날이다....?솔직한 말로 오늘 이 twittler 하다가 머리 깨지는 줄 알았다.그리고 다시 돌아봐도 쉽지 않았다. 누군가

오늘은 트위틀러 어드벤스드에 관해 풀어보자. 질문은 딱 두가지다. 트윗 필터링 구현하기 `, 으로 트윗 작성한 사용자를 조회할 수 있는 드롭다운(Dropdown) 메뉴를 만듭니다. 사용자를 선택하면 그 사용자가 작성한 트윗만 보이게 트윗 목록을 필터링할 수 있어야 합니다. 초깃값을 선택하면 모든 사용자가 작성한 트윗을 다시 보여줄 수 있어야 합니다. ...

Client Server Architecture클라이언트 서버 아키텍쳐, 다른말로는2 TierArchitecture2티어 아키텍처라고 불리는 설계 방식에 대해 알아보자Case Study: 쇼핑몰 앱스마트폰에서 쇼핑몰 앱을 사용해 본 경험이 있을 것이다. 그렇다면 혹시

개념학습브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다. 예를 들어 https://codestates.com:443/ 사이트에 접속하게 되면, codestates.com 주소가 가리키는 서버의 기본 폴더를 뜻한다.

HTTP는 HyperText Transfer Protocol 의 줄임말로, HTML가 같은 문서를 전송하기 위한 프로토콜이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인 되었다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages양식에

브라우저의 작동 원리 (보이는 곳) SPA를 만드는 기술: AJAX 1.AJAX란? AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML

클라이언트와 서버의 통신을 담당하는 API는 어떻게 작성해야 할까?구글이나 Microsoft 같은 대형 IT 기업은 API를 어떻게 작성하고 있을까? 만약 혼자서 웹사이트를 만들고 관리한다면, API를 어떻게 설계하고 구현하든 상관이 없다. 그러나 일반적인 회사에서 진

React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 상향식 (bottom-up)으로 앱을 만든다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 그래서 기획자나 PM 또는

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

SOP는 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다.한 마디로 같은 출처의 리소스만 공유가 가능하다 라는 정책을 뜻한다.여기서 말하는 출처Origin는 다음과 같다.출처는 프로토콜, 호스트, 포트의 조합으로 되어있다. 이 중 하나라도 다르면

MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB,Express,React,Node.js를 지칭하는 말이다. 이 중에서 Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 잇는 프레임

재귀란 무엇일까? 표준국어대사전에서는 다음과 같이 정의하고 있다.재귀再歸 : 원래의 자리로 되돌아가거나 되돌아 옴.재귀의 시각적 예시를 든다면 계속해서 원래의 상태로 돌아오는 아래 이미지와 같을 것이다.재귀 함수란, 자기 자신을 호출하는 함수를 재귀 함수라고 한다. 재

JSON은 JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가정하자. 이 객체의 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메

UI User Interface 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.Graphical User Interface 그래픽 사용자 인터페이스는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다.프론트엔드 개발자로서의 UI

프로잭트 중 이전에 요청 받았던 버튼을 똑같이 사용하도록 요청받았다.여러 프로젝트 혹은 여러 팀 간에 같은 UI 컴포넌트를 공유한다면,디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있다.이 고민을 해결하기

프론트엔드 개발에서의 상태 관리.React가 상태 관리를 위한 라이브러리는 아니다.그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된loose coupled, 구조적으로 아름다운 코드를 작성할 수 있다.상태란 무엇인가? UI에 동

웹이란 무엇인가?인터넷은 웹 기반으로 작동한다 O or X ?정답은 X, 인터넷이 웹보다 좀 더 포괄적인 개념이기 때문.인터넷은 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망을 의미하며, 웹 뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다

개발자가 아무리 열심히 웹페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다.이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업, SEOSearch Engine

서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법영속성 : 데이터를 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성을 의미.서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.쿠키를 이용하는 것은 단순히 서버에서 클라이언