소소해서 소중한 일상

취업을 준비하는 시간이 늘어나면서, 자꾸 이것 저것 하게 된다. 근데 중요한건 끝까지 못 하고 있는 내 모습이 점점 싫어진다. 한 목표를 딱 정해서 달려가고 싶은데, 이게 정말 맞는건지 잘 하고 있는 건지 이리 저리 방황하게 되드라 뭐가 맞는걸까 시간은 자꾸만 흐르고 있는데, 나이는 점점 먹어가고 있는데 누군가 와서 정답을 알려주고 방법을 알려주면 좋겠다.

아침에 나오니까, 많은 사람들이 바쁘게 움직이더라. 출근하는 직장인, 등교하는 학생들 ... 나도 나름 열심히 살았던거 같은데, 나름 치열하게 살았던거 같은데, 왜 나는 여기 있는거지 ? 갑자기 이런 저런 생각이랑 후회랑 불안감들이 파도처럼 밀려들어오드라. 무엇을 잘못했길래, 여기 홀로 서있는건가 불안하지만, 잘하고 있다고 잘 하고 있는거라고 위로하는 혹은 속이고 있는 그렇게 오늘도 스스로 생각하게 되는거 같다.

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