TIL 썸네일형 리스트형 Recoil https://medium.com/geekculture/recoil-efficient-state-management-library-for-react-b9e158b74460 Recoil : Efficient state management library for React How to render components with asynchronous data by Recoil selector and React.suspense medium.com https://recoiljs.org/ko/docs/basic-tutorial/atoms Atoms | Recoil Atoms는 애플리케이션 상태의 source of truth를 갖는다. todo 리스트에서 source of truth는 todo 아이템을 나타내는 객체로.. 더보기 [TIL-189] 모던 자바스크립트 - 46장 제너레이터와 async/await 46장 제너레이터와 async/await 46.1 제너레이터란? 일반 함수 함수 실행 제어권 : 함수 호출 시 제어권이 함수에게 넘어가,(콜스택에 함수 실행 컨텍스트 생성) 코드를 일괄 실행함. 함수 호출자는 함수 실행을 제어할 수 없음. 반환값 : 함수 호출 시 매개변수를 통해 외부 값을 받고, 코드 일괄 실행 후 결과값을 외부로 반환함. 함수 상태 변경 : 함수가 실행되는 동안 외부에서 함수의 상태를 변경할 수 없음. 제너레이터 함수 함수 실행 제어권 : 함수 호출자가 함수 실행을 중지, 재개시키는 등 제어할 수 있음. 반환값 : 제너레이터 함수 호출 시, 함수 코드를 실행하는 게 아니라 제너레이터 객체(이터러블이자 이터레이터)를 반환함. 함수 상태 변경 : 함수 호출자와 양방향으로 함수 상태를 서로.. 더보기 [TIL-188] MyView 프로젝트 - MUI X DateTimePicker 사용하기 MUI X 시작하기 컴포넌트 구조 이런 형태로 날짜와 시간을 선택할 수 있는 input을 만들기 위해 MUI X 공식문서에서 보고 세팅을 해봤다. import * as React from 'react'; import TextField from '@mui/material/TextField'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; export default f.. 더보기 [TIL-187] MyView 프로젝트 - React props로 컴포넌트 전달 & text-transform React props에 컴포넌트 전달할 때 function MyViewModal({breadcrumbs}) { ... return ( {breadcrumbs} ); ... } 이라는 컴포넌트 안에 breadcrumbs라는 props로 다른 컴포넌트를 받아서 렌더링해주고 싶었다. import MyStep from './MyStep'; function AddReview({ open, setOpen }) { ... return ( ); ... 그래서 이렇게 MyStep 컴포넌트를 import해서 의 breadcrumbs props로 전달했는데 렌더링되지 않았다. import MyStep from './MyStep'; function AddReview({ open, setOpen }) { ... return (.. 더보기 [TIL-186] 모던 자바스크립트 - 32~33, 38장 브라우저의 렌더링 과정 32장 String 33장 Symbol 심벌이란? 다른 값과 중복되지 않는 유일무이한 값. → 유일한 프로퍼티 키 만드는 데 사용. ES6에서 도입된 7번째 데이터 타입으로, 원시값. 심벌 값 생성 Symbol 함수를 호출하여 생성하는 방법밖에 없음. new 연산자를 사용하지 않음. String, Number, Boolean 등의 생성자 함수는 new 연산자와 함께 호출하여 인스턴스(객체)를 생성. 하지만 심벌은 객체가 아니라 원시값을 생성하는 거기 때문에 new 연산자와 함께 호출하지 않음. Symbol 함수를 호출할 때 괄호 안에 문자열을 인수로 전달할 수 있지만 값에는 영향이 없고, 생성될 심벌 값에 대한 설명. 특징 생성된 값은 외부로 노출되지 않기 때문에 확인할 수 없음. 객체처럼 접근하면, 래.. 더보기 [TIL-185] MyView 프로젝트 - JSX와 Javascript JSX 문제 상황 삼항조건 연산자를 사용하여 렌더링할 컴포넌트를 다르게 구성하고 싶었다. function MovieCard({ addCard }) { return ( {addCard ? ( ) : ( ... )} ) } 그래서 위와 같이 {} 안에서 props로 받은 addCard를 조건식으로 사용하여 삼항조건 연산자를 사용했는데 에러가 뜨면서 빨간 밑줄이 떴다. addCard부터 쭉 문제가 되는 것 같았다. 그리고 props로 받은 addCard를 사용하고 있는데 사용되고 있지 않다는 의미로 흐린 색깔이 되어있었다. 해결 function MovieCard({ addCard }) { return ( {addCard ? ( ) : ( ... )} ) } 이렇게 어떤 컴포넌트가 감싸고 있는 경우, 그 안에서.. 더보기 노마드코더 유튜브 클론코딩 챌린지(2회차) - 5주차(DAY29~DAY33) 보호되어 있는 글입니다. 더보기 [TIL-184] 모던 자바스크립트 25장 클래스 클래스와 생성자 함수의 차이점 클래스는 strict mode 암묵적 적용 구성 방식 클래스는 constructor 안에서 인스턴스 프로퍼티 생성 클래스는 몸체에서 기본적으로 프로토타입 메서드 클래스는 상속을 통해 확장 가능 더보기 이전 1 2 3 4 5 ··· 26 다음
