유령이 나오는 젤리하우스

웹/React

[Next.js] Data Fetching의 방법들

한 줄 요약 Next.js는 4가지의 Data Fetching을 제공한다. 1. SSR 2. CSR 3. SSG 4. ISR 1. SSR SSR. (Server Side Render)는 말 그대로 서버에서 데이터를 패칭하여 화면을 그린다는 뜻이다. 서버 측에서 화면을 준비할 수 있다는 것은 React와 차별되는 Next만의 큰 장점인 만큼, 공식화된 방법을 통하여서만 수행할 수 있다. 이때 사용하는 함수가 getServerSideProps이다. export async function getServerSideProps() { return { props: { randoms: Math.round(Math.random() * 100) }, }; } export default function Home({ rand..

웹/React

JSX에서 list를 랜더링 하는 방식

한 줄 요약 🦄React는 Array와 같이 이더너블 한 객체 안에 있는 태그들을 인덱스 순서대로 차례차례 랜더링한다🦄 🦄이때, Virtual DOM에서 어떤 요소에 변화가 있는지 감지하기 위해 부여하는 안정적인 고유값이다🦄 빌드업 리액트를 사용하다보면, 동일한 타입을 가진 데이터들을 비슷한 모습의 컴포넌트로 랜더링 해야할 경우가 많다. 여러개의 컴포넌트를 렌더링 하기 위해서 리액트는 엘리먼트의 모음을 { } 사이로 낑겨넣어서 JSX에 포함시킬 수도록 해줍니다. 쇼핑몰 홈페이지에 보여질 품목 리스트를 화면에 그린다고 간주해봅시다. const items = [ {title:'노트북',price:'1000000',stock:12}, {title:'커피콩', price:'5000', stock:100}, {t..

TIL

(21.11.16) Antd Input value를 mobx store로 관리하기

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄antd의 Input 컴포넌트가 깊게 nest된 mobx observable 값을 감지 못할 수 도 있다.🦄 🦄Input 컴포넌트와 mobx를 동시에 사용한다면, React.state를 사용하거나, Form 컴포넌트에 Input의 관리를 위임하는 것이 낫다.🦄 본문 목표: 회원 정보 테이블에 등록지를 수기로 입력하고, 입력 결과를 저장할 수 있게 하는 Input 요소 넣기 엊그제 회사에서 개발 요청이 들어왔다. 내용은 다른게아니라, 관리자 계정이 열람할 수 있는 테이블에 회원들의 등록지를 수기로 입력할 수 있는 column을 만들어 달라는 것이였는데, 나름 antd 짬바가 생겼다고 생각해서 금방 끝날 것이라 생각했는데, 예상 외로 훨씬 복잡하고 어려운 점이..

TIL

(21.09.07)React fast-reload

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄React Fast-reload는 cra4 버전부터 hot-reload를 대체한, 페이지 새로고침 없이 바뀐 부분만 교체해주는 라이브러리이다. 🦄 🦄cra로 프로젝트를 만들면 기본적으로 셋팅이 되어있는데, fast-reload가 동작하지 않는다면 아래 조건에 걸리는 부분이 있는지 살펴보자🦄 본문 간혹, 그러나 있으면 매우매우매우 빡치는 일이다. 아니 코드를 바꿨는데 왜 업데이트가 안돼?? 구글에다가 react fast-reload, react hot-reloader not working...등등의 키워드로 열라게 구글링해도 다른 사람들은 이런 일 없는건지 참 아무런 검색 결과가 없다. 일단 개발이 급하니까 새로고침하면서 코딩을 하는데...이거 생각하면 할 ..

웹/일반

[Jest 입문] Jest를 왜 사용할까?? && Jest의 Matcher

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Jest는 페이스 북에서 관리하는 JavaScript 테스트 프레임워크이다.🦄 🦄Jest를 통해 개발자가 작성한 코드가 그 의도대로 동작하는지, 돌발상황에도 대처가 가능한지 확인할 수 있다.🦄 개요 앞서 말했듯, Jest는 페이스북이 만든 프론트엔드 테스트 프레임워크다. 테스트 프레임워크라고 하니 참 감이 안오는데, 말 그대로 코드가 제대로 동작하는 test를 위한 프레임워크라는 뜻이다. 사실 이전부터 Jest가 뭐하는 친구인지는 알고 있었고, 앞으로의 내 개발 커리어에 꼭 필요하다는 사실도 알고 있었지만 막상 별로 배우고 싶지는 않았다. 왜냐하면, 아직까지 이 친구의 필요성을 느끼지 못했기 때문이다. 비록 console.log 하나 하나 찍어가며 낑낑거리..

TIL

(21.08.02) Typescript에서 React Props를 받기 / React에서 배열 랜더링

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄하위 컴포넌트로 Props를 내려 줄 때, Props를 받는 곳에서 타입을 지정해줘야 한다.🦄 🦄React에서 배열을 랜더링 하려면 map 함수를 사용한다는 것, 잊지 말자.🦄 하위 컴포넌트로 Props를 줘보자. // interface.ts //프로필에 띄울 개별 Article들의 type입니다. export interface ArticleProps { title: string; description: string; imagePaths: any; ingredients: string; createDate: string; } 자주 사용될 타입을 먼저 작성하여 export 하여, 타입을 여러번 타이핑 하는 수고를 덜기 위해 작성했다. 인터페이스를 export ..

TIL

(21.07.27) material-ui 스타일 && react-router-dom with TS

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서 react-router를 사용할때, match / history / location 객체를 사용하기 위해서는 RouteComponentProps를 import 해야한다.🦄 🦄만약, match의 params에 넣어서 전달해줄 props가 있다면, 그 props의 interface도 설정해줘야한다 🦄 🦄material-ui 적용환경에서 css를 먹이는 방법은 1.inline style 적용 2. makeStyles hook 사용, 3.styled component 라이브러리 사용🦄 RouteComponentProps React를 TS로 짜면서 제일 거지 같은 점은 역시 타입 지정을 안해주면 에러를 가차없이 뱉는다는 점이다. 타입체크를 통..

토이 프로젝트/With React

[토이 프로젝트] 셜록 : 보드게임 탐정 -完-

앱 이름을 솔로몬에서 셜록으로 바꿨습니다. 솔로몬이라는 이름은 찾아준다는 느낌보다는 판결하고 결론 내리는 느낌이 강해 앱 목적을 잘 전달하지 못했습니다. 최적의 보드게임을 "찾아"준다는 느낌을 더 살리고 싶었기에, 탐정 "셜록 홈즈"의 이름을 따와, 현 상황에 딱 맞는 보드게임을 "찾아준다" 라는 느낌이 사용자에게 전달되도록 하였습니다. 시험해보기 : https://seongnam-citizen-developers.github.io/scaling-journey/ 셜록 : 보드게임 탐정 seongnam-citizen-developers.github.io 깃허브: https://github.com/Seongnam-Citizen-Developers/scaling-journey 후기 계속 미루고 미루고 미루고 ..