전체 글
-
TIL_200529 (what is Redux)Today I Learned 2020. 5. 29. 18:00
Redux가 무엇인가? Redix is a predictable state container for Javascript applications. It helps you write applications that behave consistently, run in different environments( client, server, and native), and are easy to test. -> state container for Javascript 왜 state container가 필요한가? 컴포넌트간에 데이터를 주고 받을 때, 공통 부모 컴포넌트를 통해 주고받습니다. 만약에 공통 부모를 찾기위해 수많은 부모를 거쳐올라가야 한다면 공통 부모에서 데이터를 내려줄때 수많은 부모들의 손을 거쳐서 내려오게 ..
-
TIL_200528Today I Learned 2020. 5. 29. 01:21
Composition vs Inheritance React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트간에 코드를 재사용하는 것이 좋습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떠한 컴포넌트에는 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 이러한 경우에 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달 할 수 있습니다. function FancyBorder(props) { return ( {props.children} ); } function WelcomeDialog() { return ( Welcome Thank you for visiting our spacecraft! ); } 태그안에 들어간 태그들이 FancyBord..
-
TIL_200526 (What is React)Today I Learned 2020. 5. 27. 00:25
React 공식문서 정리 Handling Events React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. React의 이벤트는 소문자 대신 camelCase를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. - HTML Activate Lasers - React Activate Lasers React에서는 기본 동작을 방지하기 위해서 반드시 preventDefault를 명시적으로 호출해야 합니다. - HTML Click me - React function ActionLink() { function handleClick(event) { event.preventDefault(); console.log('The link..
-
TIL_200525 (What is React)Today I Learned 2020. 5. 25. 20:41
왜 React를 사용하는가? 웹 페이지는 유저와 수많은 인터렉션이 일어납니다. 그로 인해 많은 상태변화에 대한 관리가 필요합니다. 하나의 의미를 가진 독입적인 단위 모듈인 Coponent를 사용하여 직관적이며 재사용성이 높아진 코드를 작성할 수 있습니다. ES6의 개념 destructuring, spread operator, rest parameters, default parameters, template literals, arrow function, for-of loop JSX (자바스크립트의 확장 문법) 자바 스크립트에서 HTML의 태그를 입력하여 반환한다면 바벨이 태그로 구성된 코드를 변환하여 자바스크립트 문법으로 바꾸어 줍니다. 그로 인해 사용하고 읽기 쉬워집니다. 규칙 1. 반드시 하나의 엘리먼..
-
인터넷 (The Internet)web 2020. 5. 24. 21:17
인터넷은 무엇인가? 데이터를 주고받을 수 있는 컴퓨터의 네트워크입니다. 데이터를 구조화하여 저장, 수정, 삭제, 정의, 관리하는 데이터베이스 서버(DBMS)에 접속하여 서비스를 요청하고, 서버로부터 받는 응답을 사용자에게 클라이언트가 보여줍니다. 데이터를 어디에서 어떻게 주고받는가? 간단히 웹(Web)이라고 불리는 월드 와이드 웹(World Wide Web, WWW)에서 인터넷상의 정보를 HTTP, 하이퍼텍스트, HTML형식 등을 사용하여 교환할 수 있습니다. 규칙과 형식 HTTP (Hyper Text Transfer Protocol) 클라이언트와 서버가 통신하기 위해 정해놓은 신호 체계로써 요청과 응답 메시지의 형식이 정해져 있습니다. 요청과 응답으로 이루어지며 서버는 클라이언트의 요청에 데이터를 전달..
-
TIL_200520Today I Learned 2020. 5. 20. 15:54
node.js는 무엇인가? V8엔진으로 만들어진 자바스크립트 런타임이다. 자바스크립트를 기계어로 컴파일 해주는 V8엔진 런타임은 프로그래밍 언어가 구동되고 있는 환경 이벤트 기반의 논블로킹 I/O 모델이다. 이벤트는 유저가 버튼을 클릭하거나 네트워크에 리소스를 요청하는 것 논블로킹과 블로킹의 차이는? (블로킹) 동기호출 (논블로킹) 비동기호출 I/O 모델은 Input을 주면 Output을 받는 모델 자바스크립트를 컴파일하여 구동하고 이벤트기반의 논블로킹모델로 속도가 빠르다. node와 함께 번들링 되어있는 모듈 fs http url path Node Package Manager 세계에서 가장 큰 오픈소스 라이브러리 생태계 중 하나 package.json에 프로젝트의 셋업이 기록되어 효율적으로 사용가능하다..
-
Ajax (Asynchronous JavaScript and XML)web 2020. 5. 18. 12:05
왜 사용하는가? 통신 과정에서 HTTP의 속성으로 인해 서버에서 응답을 한다면 연결이 끊깁니다. 이때 데이터를 요청할때마다 데이터를 보여주는 전체 페이지를 리로드해야 한다면 매우 비효율적입니다. 그러므로 필요한 데이터만 받아서 부분적으로 리로드하여 빠르게 원하는 데이터를 보여주는 효율적인 Ajax를 도입합니다. Ajax 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식입니다. 비동기식으로써 여러 가지 일이 동시적으로 발생하기 때문에 서버와 통신하는 동안 다른 작업을 할 수 있습니다. 덕분에 서버와 자유롭게 통신하며, 페이지를 새로고침하지 않고 부분적으로 작동되는 효율적인 웹페이지가 생성됩니다. Ajax 구현방법 통신을 하기 위해서 사용하는 여러가지 API가 있습니다. 그 중에서 XMLHttpReq..
-
값과 참조 (Value & Reference)Javascript 2020. 5. 16. 23:18
자바스크립트는 데이터 타입에 따라서 전달되는 방식이 다릅니다. 값에 의한 전달 (passed by value) Boolean, Null, Undefined, String, Number (원시 타입) - 데이터 타입이란 참조에 의한 전달 (passed by reference) Array, Function, Object (사실 전부 객체라고 할 수 있습니다) - 배열 (array) 함수(function) 객체(object) 원시 타입의 전달 (복사) 변수들을 등호(=)를 사용하여 다른 변수에 할당할 때 새로운 변수에 값을 복사(copy)합니다. let x = 7; let y = 'seven'; let number = x; let movie = y; console.log(x, y, number, movie);..