Coding Story

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 동시에 2개 이상의 함수를 실행 할 수 없다는 것을 의미한다. 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 동기 처리 현재 실행 중인 테스크가 종료될 때까지 다음에 실행될 테스크가 대기하는 방식을 동기(synchronous)처리라고 한다. 장점: 실행 순서가 보장..

REST API란? API(애플리케이션 프로그래밍 인터페이스)는 애플리케이션이나 디바이스가 서로 간에 연결하여 통신할 수 있는 방법을 정의하는 규칙 세트이다. REST (Representational State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. RESTful API라고도 한다. REST API의 작동 방식 HTTP 요청 메서드 종류 목적 페이로드 GET index/retrieve 모든/특정 리소스를 조회 x POST create 리소스를 생성 ○ PUT replace 리소스의 전체를 교체 ○ PATCH modify 리소스의 일부를 수정 ○ DELETE del..

div{ overflow:hidden; height:auto; } 이미지와 같이 안의 컨텐츠가 div 박스의 height 범위를 넘어설 때가 있다. 그럴 때 위와 같이 해주면 자동으로 div크기가 조절되어 늘어난다.

import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setValue(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log("hello", value); }; return ( Log in ); } export default App;

TypeScript 자바스크립트를 기반으로한 프로그래밍 언어. strongly-typed 언어로, 프로그래밍 언어가 작동하기전에 type을 확인한다. 브라우저는 TypeScript를 이해하지 못한다. 사용자에게 publish할 때, TypeScript가 컴파일해서 평범한 JavaScript로 만들어준다. Typescript 테스트 할 수 있는 곳 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www...

노마드코더 리액트 마스터 클래스 #2 STYLED COMPONENT index.js import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; ReactDOM.render( , document.getElementById("root") ); App.js import..

import styled from "styled-components"; const Father = styled.div` display: flex; `; const Input = styled.input.attrs({ required: true })` background-color: tomato; `; function App() { return ( ); } export default App; As as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다. Father 컴포넌트는 header가 된다. Attrs attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다. 모든 input 에 required: true가 적용된다.

노마드코더 React JS 마스터 클래스 #2 .2 컴포넌트 확장이란, 기존 컴포넌트의 모든 속성을 가지고 오면서 새로운 속성까지 더해주는 것이다. props를 통해 컴포넌트 style을 설정한다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100..

노마드코더 React JS 마스터 클래스 #2 STYLED COMPONENTS npm i styled-components 로 styled-components를 설치해준다. import styled from "styled-components"; function App() { return ( ); } export default App; 기존의 코드는 태그 안에 일일히 style을 지정해주는 것이였다. styled component 사용하면 className이나 style을 사용할 필요가 없다. styled component에서 import한 styled를 이용한다. div를 사용해 닫아줄 필요가 없다. 모든 style은 컴포넌트를 사용하기 전에 미리 컴포넌트에 포함된다. css코드를 css 방식 그대로 쓸 ..

async / wait를 사용하면 비동기 처리를 할 수 있다. 이전엔 promise 를 사용하였는데, 비동기 처리에서 사용되는 객체로 axios가 이를 기반으로 만들어졌다. promise의 단점을 해결하기 위해 async/await 키워드가 추가되었다. const getMovies = async () => { const response = await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ); const json = await response.json(); 이렇게도 사용할 수 있다. const getMovies = async () => { const json = await ( await fetch( `ht..