소소해서 소중한 일상

JavaScript Function 화살표 함수 () => {} vs function () {} const double = function (x) { return x * 2; }; console.log('double: ', double(7)); // 14 const doubleArrow = (x) => x * 2; //const doubleArrow = x => x * 2; () 매개변수가 1개면 생략 가능 console.log('double: ', doubleArrow(7)); // 14 객체를 반환 할 시, ({name: huisu}) IIFE 즉시실행함수 Immdiately-Invoked Function Expression const a = 7; function double() { console.l..

Destructuring Assigment MDN 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해주는 것 데이터 뭉치 (그룹화)를 쉽게 만들 수 있다. const fruits = ['🍌','🍓','🍏','🍆'] const banana = fruits[0]; // 🍌 const strawberry = fruits[1]; // 🍓 const apple = fruits[2]; // 🍏 const eggplant = fruits[3]; // 🍆 너무 비효율적 😖 간단하게 만들어보자!! 😁 const fruits = ['🍌','🍓','🍏','🍆']; const [ banana, strawberry, ...others] = fruits; console.log(banana) // 🍌 consol..

React Props 복습 // App.jsx import React, { useState } from "react"; import Home from "./component/Home"; import Clip from "./component/Clip"; function App() { const [news, setNews] = useState([]); //{"status":"OK", console.log("handler up news:", news); const fecthNewsHandler = async () => { const response = await fetch( `https://api.nytimes.com/svc/search/v2/articlesearch.json?q=election&api-key..

Adding Type Safety To React Apps What ? & Way? TypeScript is a superset to JavaScript 뿌리는 여전히 자바스크립트 이다. 자바스크립트의 기본적인 문법들과 자바스크립트 코드 작성법, if 문, for 반복문, 객체 사용법등을 그대로 사용한다. 타입스크립트는 자바스크립트에 몇가지 기능을 추가한 것이다. Statically Typed의 특징을 가진다. function add(a: number, b: number) { return a + b; } add("2", "5"); // 숫자로 타입이 지정되어있기 때문에, 코드 작성시 오류 발생 add(2, 5); // 7 npm install typescript 설치하기 npx tsc 파일명.ts 컴파일..

nextJS 는 를 to 가 아니라 href 로 받는다 고정 된 스타일을 사용하기 위해서는 Layout component 를 따로 만들어서 app.js 에 적용한다. 최상위 컴포넌트에 적용 import Layout from "../components/layout/Layout"; import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; 백엔드 데이터와 연결되었을 때? 페이지가 렌더링 될 때, HTTP 요청을 보내려면, 이를 처리하기 위해 일반적으로 usrEffect 훅을 사용한다. function HomePage() { const [loadedMeetups, setL..

React Styling 삼항 연산자를 이용해서 조건에 맞게 스타일링을 줄 수 있다. 조건부 스타일링 inline 은 우선순위가 높기 때문에 선호하지 않는다. Course Goal Add Goal 동적으로 CSS 클래스 설정하기 CSS 에 필요한 스타일을 만들고 .form-control.invalid input { border-color: red; background-color: rgb(212, 174, 174); } .form-control.invalid label { color: red; } 조건식을 이용해서, 조건에 맞는 className 을 추가하는 형식으로 동적인 스타일링으로 한다 정적인 Styled Components 스타일이 적용된 컴포넌트에만 스타일이 적용된다. 다른 컴포넌트에는 영향을 끼..

What is NextJS? React 기반의 프레임워크 The React Framework for Production NextJS NextJS-Key Features & Benefits Server-side Rendering 페이지 콘텐츠를 클라이언트가 아니라 전적으로 서버에서 준비하는 것 File-based Routing Routing: 사용자에게 여러 페이지가 있는 것처럼 착각하게 하는 것 파일과 폴도를 이용해서 페이지와 라우트를 정의한다 추가 코드를 작성 할 필요가 없으며, 코드를 적게 작성하면서 작업량을 줄일 수 있다. Fullstack Capabilities Next / React 애플리케이션에 쉽게 백엔드 코드를 추가 할 수 있다. 이런 방식으로 코드를 추가해서 데이터베이스나 파일에 데이터를..

스타일링 라이브러리 CSS in JS CSS의 문제점 Global Namespace: 글로벌 변수를 지양해하는 JS와 대치 Dependencies: CSS간의 의존관리 Dead Code Elimination: 안쓰는 CSS 인지 어려움 Minification: 클래스 이름 최소화 Sharing Constants: JS의 코드와 값을 공유하고 싶음 Non-deterministic Resolution: CSS 파일 로드 타이밍 이슈 Isolation: 격리 스타일 컴포넌트 Styled-components https://styled-components.com https://styled-components.com/docs/basics 설치하기 npm install --save styled-components y..

스타일링 라이브러리 정리 Styled-components styled-components CSS in JS CSS의 문제점을 해소하기 위함 해결책 스타일을 style태그로 분리 사용법(template literals) styled.{element} styled(스타일드 컴포넌트) 상속 & 가상 엘리먼트 / 가상 선택자 Global Style 전역스타일 attrs props addition keyframes / ThemeProvider Animation / Theme Emotion emotion react 특화된 @emotion/react css props jsx를 대체함 styled components styled-component + @ composition css 안에서 css 사용(자기복제, 확장 ..

Memoization 메모이제이션 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동인한 계산의 반복 수행의 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98 // App.js import "./App.css"; import Memo from "./components/3-8.Memoization/Memo"; function App() { return ( ); } export default App; // Memo.jsx import React, { useState } from "react"; im..