gaki gaki

원글: https://kentcdodds.com/blog/how-to-optimize-your-context-value — Kent C. Dodds 주의: 시작하기 전 알아둘것. 아래 조건에 해당하는 사항이 여러 개 있는 경우 컨텍스트 값 최적화를 효과적으로 도입 할 수 있습니다. 1. 컨텍스트 값이 자주 바뀔 경우 2. 컨텍스트 값을 사용하는 소비자 컴포넌트가 많을 경우 3. `React.memo` 의 느린 성능에 지친 경우 4. 당신이 프로그램을 실행 했을때 느리다고 생각하여, 최적화가 필요한 경우 만약 위 설명 중 해당사항이 있으면, 계속 읽으세요 (끝까지 읽고 더 나은 대안을 놓치지 마세요!). 정말로 대안은 확실히 좋을 겁니다. 심지어 나는 원래 작성했던 블로그 포스트를 삭제하고 다른 더 나은 ..

React Fragments 사용법 import {Fragments} from 'react'; use 사용 이유 하나의 컴포넌트에서 여러개의 엘리먼드를 렌더링 할때, 리액트에서는 하나의 부모로 묶어줘야한다. 이때 를 사용해 묶으면, 의도와는 다르게 ui 가 보여질 수 있다. 따라서 아무 역할 없이 단지 Fragment 를 만드는 react.Fragments 혹은 를 사용하면 원하는 대로 ui 를 만들 수 있다. 코드 import { Fragment } from "react"; export default function Row({ content, fee, content2, fee2 }) { return ( {content} {fee} {content2} {fee2} ); }

Forward Ref useRef 를 사용해 엘리먼트를 참조할 때, ref 를 자식 컴포넌트에게 props 로 전달 할 수 없다. export default function Children(props) { const ref = props.ref; // 에러발생 console.log(ref); // 에러발생 return 클릭; }이때 forward ref 를 사용하면, 부모에서 정의한 ref 로 자식의 엘리먼트를 참조 할 수 있다!! (참고로 forwarding 은 전송이라는 뜻이며 즉, ref 를 자식 컴포에게 전송한다 라는 의미이다.) 코드 부모컴포넌트 import { ConstTypeChild } from "./ConstTypeChild"; import FunctionTypeChild from "./..

오늘의 코딩 목표 현재 목록 페이지에서 을 눌렀을 때, 내가 가입된 팀 목록을 보여주는 페이지를 만들고 팀목록 페이지에서 팀만들기도 진행 할 수 있게 만들예정이다. 결과 TeamList 를 불러오는 api 가 아직 구현되지 않아서 팀 목록을 보여주는 페이지를 100% 구현하지는 못했지만, 로직은 다 짜둔상태이다. 그 외 app.js 에서 getUserInfo axios 의 결괏값이 올바르게 처리되지 않는 에러를 수정했다. 감상 useDispatch 는 리액트 컴포넌트에서만 사용할 수 있다. 즉, 리덕스의 상태를 바꾸는건 리액트 컴포넌트에서만 가능한 일이다. 백앤드 개발자, 프론트 개발자의 편의를 위해서는 콘솔 에러를 구체적으로 출력해주는게 디버깅에 도움이 된다. ex) console.log("로그인 에러..

오늘은 새로 만든 랜딩페이지에 맞춰 기존의 로그인,회원가입 페이지의 css 를 수정했고 myprofile 이라는 새로운 페이지를 만들었다.

미디어쿼리 미디어 쿼리는 웹사이트의 화면 넓이에 따라 view 를 다르게 보여줄 수 있는 css 코드이다. @media screen and (max-width: 768px) { span { width: 20px; } } 위의 코드와 같이 사용할 수 있으며, 특정한 넓이에서 css 스타일링을 재정의 할 수 있다. 미디어 쿼리를 사용하면 반응형 웹사이트를 만들 수 있다.

async 와 await 의 개념 서버로 비동기 요청을 보낼 때 코드가 예상과는 다르게 작동할 때가 있다. import axios from "axios"; function getRequest() { return axios({ method: "get", url: "https://jsonplaceholder.typicode.com/todos/1", }); } function getInfo() { const data = getRequest().then((res) => res.data); console.log(data); // Promise { } } getInfo(); 위의 코드에서 서버로 요청을 보내 값을 data 라는 변수에 저장한 뒤, 해당 값을 사용하려고 한다. 하지만, 위의 경우에 콘솔에 찍히는 da..

자바스크립트 클로저란 무엇인가? 요약 클로저란, 함수의 컨택스트가 사라져도 해당 컨택스트에 존재하던 변수에 접근할 수 있는 함수를 말한다. 예시 코드 function first() { let count = 0; return function second() { console.log(count); count += 1; } } const closer = first(); closer(); // 0 closer(); // 1 closer(); // 2 설명 위의 코드에서 closer 라는 상수에 의해 first 라는 함수가 실행되면 second 라는 함수를 리턴하고 가비지 컬렉터에 의해 제거된다. 그 말은 즉슨 first 라는 함수 스코프에 존재하던 count 라는 변수 또한, 제거되었음을 나타낸다. 하지만, c..