소소해서 소중한 일상

라이브러리란 라이브러리 프레임워크 개발 편의를 위한 도구의 모음 기반 구조까지 잡혀있음 공구 공장 리액트는 도구 모음 JSX, 컴포넌트의 상태관리, 렌더링 최정화, 성능확인 그 외에도 필요한 것들이 많음 이미 잘 만들어둔 도구들을 가져다가 쓰면서 리액트 생태계의 이점을 누리자 라이브러리 적용과정 필요 > 검색 > 사용법 파악 > 적용 필요 특정 기능이 필요해짐 (직접 구현하기에는 조금 벅참) 더 나은 도구가 필요해짐 트렌드에 따른 새로운 기술에 대한 호기심 검색 필요 그대로 검색 github, npm trends, 프론트엔드 커뮤니티, 기술 블로그 유사한 라이브러리들을 후보로 비교 (기능, 성능, 사이즈, 인기, 최신, 등...) 사용법파악 공식 문서 github 코드 검색 (실제 용례) 기술 블로그의 ..

Hook Side Effect Side Effect 는 리액트 컴포넌트가 화면에 1차로 렌더링 된 이후에 비동기로 처리되어야 하는 부수적 효과들을 뜻한다. 예를 들어 데이터를 가져오려고 외부 API를 호출 할 때 일단 화면에 렌더링 할수 있는 것은 1차로 먼저 렌더링 하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 그 이유는 연동된 API가 응답이 없거나 늦어질 상황이 발생할 수 있기 때문이다. 이때 Hook이 Side Effect 를 수행하는 역할을 한다. Hook 은 무엇인가? hook은 리액트 16.8 버전부터 새로 추가된 요소이다. 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할수 있도록 해주는 몇가지 기술을 Hook 이라고 한다. Hook의 종류 State Hook 상태관리를 할수 있는..

Mutation 뮤테이션 REST에서 모든 요청은 결국 서버에 일부 부작용을 일으킬 수 있지만 규칙에 따라 GET데이터 수정 요청을 사용하지 않는 것이 좋다. GraphQL도 유사하다. 기술적으로 모든 쿼리를 구현하여 데이터 쓰기를 유발할 수 있다. 그러나 쓰기를 유발하는 모든 작업은 돌연변이를 통해 명시적으로 보내야 한다는 규칙을 설정하는 것이 유용하다. 쿼리와 마찬가지로 변형 필드가 객체 유형을 반환하면 중첩 필드를 요청할 수 있다. 이것은 업데이트 후 개체의 새 상태를 가져오는 데 유용할 수 있다.Apollo garphql studio 좀 더 편리한 기능들을 줌. schema query 등 mutation CreateReviewForEpisode($ep: Episode!, $review: Revie..

GraphQL 이란 무엇인가? Facebook 이 만든 쿼리언어 GraphQL을 사용하는 앱은 서버가 아닌 데이터를 제어하기 때문에 빠르며 안정적이다. 하나의 리소스 속성에 액세스 할 뿐만 아니라 리소스 간의 참조를 자연스럽게 이해한다. GraphQL API는 엔드포인트가 아닌 타입과 필드로 구성된다. 강력한 개발자 도구 제공한다. 요청의 주체가 웹 클라이언트 이다. 쿼리 언어란 무엇인가? SQL : 구조화된 질의어 RDBMS 의 데이터 관리를 위해 설계된 언어 DB로부터 데이터를 효율적으로 가져오기 위해 사용한다. REST API vs GraphQL 리소스 REST API : 리소스 모양과 크기는 서버에 의해 결정된다. REST API 가 어떤 데이터를 내려줄지 프론트단에서는 알 수 없음. GraphQ..

Memoization 메모이제이션 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동인한 계산의 반복 수행의 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. // 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"; import Comments from "./Comments"; const commentList = [ { title: "comment1", content: ..

JS 데이터 MDN 문자 String: 전역 객체는 문자열(문자의 나열)의 생성자입니다. 자주 사용되는 Methods String.prototype.indexOf() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 - 1을 반환합니다. const result = "Hello world!".indexOf("world"); const result2 = "Hello world!".indexOf("huisu"); console.log(result); // 6 console.log(result2); // -1 length() 메소드는 문자열의 길이를 측정하여 숫자로 반환한다 const str = "01 23"; console.log(..

데이터 타입 확인 // getType.js export default function getType(data) { return Object.prototype.toString.call(data).slice(8, -1); } // main.js import getType from './getType'; console.log(getType(123)); console.log(getType(false)); console.log(getType(null)); console.log(getType({})); console.log(getType([])); 산술, 할당 연산자 arithmetic operator console.log(1 + 2); console.log(5 - 8); console.log(3 *..

개요 표기법 dash-case(kabab-case): HTML, CSS snake_case: HTML, CSS camelCase: Javascript ParcelCase: Javascript Zero-based Numbering 0 기반 번호 매기기! 특수한 경우를 제외하고 0부터 숫자를 시작합니다 주석 Comments // 한 줄 메모 /* 한 줄 메모 */ /** * 여러 줄 * 메모1 * 메모2 * / 데이터 종류 (자료형) String (문자 데이터) 따옴표를 사용합니다. let myName = 'huisu'; let email = 'my email'; let hello = `Hello ${myName}`; console.log(myName); // huisu cons..

전환 transition: 속성명 지속시간 타이밍함수 대기시간; 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 지속시간: 단축형으로 작성할 때, 필수 포함 속성! transition-property 전환 효과를 사용할 속성 이름을 지정 all: 기본값 모든 속성에 적용 속성이름: 전환 효과를 사용할 속석 이름 명시 transition-duration 전환 효과의 지속시간을 지정 0s: 기본값 전환 효과 없음 시간: 지속시간(s)을 지정 transition-timing-functoin 전환 효과의 타이밍(Easing) 함수를 지정 ease: 기본값 느리게 빠르게 느리게 = cubic-bezier(0.25, 0.1, 0.25, 0.1) linear: 일정하게 = cubic-bezier(0, 0, 1, 1..