아임파인땡큐 아임파인땡큐

const fs = require("fs"); // let stdin = fs.readFileSync("./input.txt").toString(); let stdin = fs.readFileSync("/dev/stdin").toString(); // const input = stdin.split("\n").map((v) => v.split(" ").map(Number)); const [a, ...b] = input; // const [N, A, operators] = input; const [n, m, v] = [...a]; class Graph { constructor() { this.adjacentList = {}; } addEdge(v1, v2) { if (!this.adjacentList[v1]..

Redux 리액트의 데이터 흐름에 따르면, 컴포넌트2에 있는 데이터를 컴포넌트 6에 전달하려면 위의 과정을 거쳐야한다. 상태끌어올리기, Props내려주기를 여러번거쳐야하고, 해당상태를 사용하지 않는 최상위 컴포넌트, 컴포넌트1,컴포넌트2도 상태데이터를 가지게 된다. 애플리케이션이 복잡해질수록 데이터흐름도 복잡해지고, 컴포넌트 구조가 바뀐다면 데이터의 흐름을 완전히 바꿔야 할 수도 있다. Redux는 전역상태를 관리할 수 있는 저장소인 Store을 제공한다. Redux구조 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다. Dispatch 함수는 Action 객체를 Reducer 함수로..

상태관리 UI,프론트엔드 개발에서 상태란 동적으로 표현되는 데이터이다. side Effect란 함수의 입력외에도 함수의 결과에 영향을 미치는 요인이다. 대표적으로 네트워크 요청, API호출이 사이드이펙트이다. UI를 페이지단위가 아닌 컴포넌트 단위로 보는 것은 리액트의 주요 개발원칙이다. (fetch와 같은 API요청이 없이도 표현에 집중하는 컴포넌트?) 로컬상태는 특정컴포넌트 안에서만 관리되는 상태이고, 전역상태는 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태이다. 서로 다른컴포넌트가 사용하는 상태의 종류가 다르면, 전역상태일 필요가 없다. 출처가 달라도 됨. 하지만 서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 한 곳이어야한다, 만일 사본이 있을 경우 두 데이터를 동기화 하는 과정이 필요한..

... 합이 한개인경우 전부 구하고, 두개인경우 전부 구하고 이런식으로 구했는데 그냥 배열을 돌면서 한개더하고 두개더하고 세개 더하고 이런식으로 해도 된다 중복되는거 삭제해주면 되니까...

React-custom-component과제 modal import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` display: flex; justify-content: center; align-items: center; height: 100%; // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다. background-color: rgba(0, 0, 0, 0.5); posit..

Storybook UI개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한번에 하나의 컴포넌트를 작업할 수 있다. 전체 UI를 한눈에 보고 개발이 가능하다!(복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요가 없다. UseRef 리액트컴포넌트는 내부상태(state)이 변할때마다 다시 렌더링 된다. 그러면 다시 렌더링이 되더라도, 기존에 참조하던 컴포넌트 함수 값이 그대로 보존되어야 하는 경우가 있을것이다. 이럴때 사용하는것이 useRef이다. useRef는 돔요소 혹은 저장공간에 접근하기 위해 사용되는 React Hook이다. import,export는 또 뭔데? r..

function solution(str1, str2) { //자카드유사도: 두집합의 교집합 크기를 합집합크기로 나눈 값 //모두 공집합인 경우에는 1. //65536을 곱해서 floor. let newStr1={}; let newStr2={}; let alphabet = 'abcdefghijklmnopqrstuvwxyz' let answer = 0; let union=[]; let intersection=[]; alphabet = alphabet.split('') if(str1.length===0&&str2.length===0) return 1 str1=str1.toLowerCase(); str2=str2.toLowerCase(); for(let i=0;i0&&newStr2[key]>0){ interse..

CCD(Component Driven Development) -디자인과 개발단계에서부터 재사용할 수 있는 UI컴포넌트를 미리 디자인하고 개발하는것 CSS작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었다. 위의 CSS방법론은 각각의 장단점이 있으나, 세 방법론 모두 같은 지향점을 가지고 있다. 코드의 재사용 코드의 간결화 코드의 확장성 코드의 예측성(클래스 명으로 의미예측) Styled Component:React로 Coponent Driven Development를 할 수 잇는 대표적인 도구 리액트환경에서 CSS를 컴포넌트화 시킨다. CSS in JS라는 개념이 대두되면서 나온 라이브러리이다. 이를 이용하여 CSS로 Javascript에 넣어줄 수 있으므로 HTML,JS,CSS 를 하나로..