소소해서 소중한 일상

1번째 참가자 제시어: 입력 버튼2 버튼3 이벤트 버블링과 캡처링 1 2 3

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..

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..

내일 부터 시작하는 "노마드 클론코딩 컨테스트" 오랜만에 다시 HCJ 할 생각에 조금 걱정이 된다. 중간에 포기하지말고 완주를 목표로 ! https://nomadcoders.co/c/melon-contest/lobby Watch Now – 노마드 코더 Nomad Coders nomadcoders.co 관심있고, 같이 코딩 공부하고 싶은 사람들이 많이 많이 참가했으면 좋겠다! 내일부터 시작이니! 얼른 참가하세요!!

sass 전에 css를 사용할 때 불편했던 점들을 확장기능을 이용해 해결하고 효율적으로 작성할 수 있도록 도와주는 프로그래밍 언어 css 전처리기(preprocessing) Variables body { font: 100% Helvetica, sans-serif; color: #333; } .inverse { background-color: #333; color: white; } // _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } scss는 css와 sass를 합쳐놓은것. 앞에 $표시를 줘서 변수처럼 사용. 계속 확장 되더라도 코..