인트로평소에 flex만 쓰다 보니 grid 쓰는 방법을 아예 모르겠더라고요... 그래서 이번에 grid를 좀 써보려고 합니다.일단 이 포스팅에서는 기본적인 내용만 다룰 예정입니다. 앞으로 grid쓰는 연습을 좀 해야겠어요...gridflex는 1차원 즉 한 방향 레이아웃 시스템이며그리드는 2차원 두 방향 레이아웃 시스템입니다.gird와 flex를 적절히 사용하면 레이아웃 마스터 가능이겠죠?특히 계산기 버튼 배치 같은 격자무늬 배치는 grid 사용하면 뚝딱입니다.저는 grid 쓸 줄 몰라서 flex로 했습니다만 grid 쓴 사람보면 너무 부럽더라고요.. grid를 사용하려면 기본적으로 flex처럼 부모 요소인 Container와 자식 요소인 Item이 있으면 됩니다. 1 2 3 4..

인트로커스텀 훅 찐막차입니다. axios에 대해서도 알아야 하기 때문에 아예 따로 빼버렸습니다.이전까지 훅들과 달리 코드가 조금 더 복잡하기도 하고요. Before start...axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입니다. 사용하기 위해서는 라이브러리 설치를 해줘야합니다.npm install axiosuseAxios결과물부터 확인해 봅시다.api로부터 데이터를 받아올 때 status를 보여줍니다. refetch 버튼을 클릭하면 다시 정보를 요청합니다. 그럼 이제 코드를 살펴보겠습니다.useAxios.jsimport axios from "axios";import { useState, useEffect } from "react";const useAxi..

인트로유용한 기능 2탄입니다. 이 친구들은 만들면서 재밌었어요. 간단한데 눈에 확확보여 최고야..useNotification이벤트를 발생시켰을 때 브라우저에 notification을 띄워줍니다.콘솔창에서도 확인할 수 있습니다. 만약에 알림이 안 뜬다? 크롬 > 설정 > 개인 정보 보호 및 보안 > 사이트 설정 > 알림 을 확인하세요.notification에 대한 자세한 내용은 아래 문서에서 확인하세요. Notification - Web APIs | MDNThe Notification interface of the Notifications API is used to configure and display desktop notifications to the user.developer.mozilla.org그..

인트로useState는 어제로 맛 잘 봤고 이제 useEffect에 대해 알아보려고 합니다.아직 모든 강의를 다 보지는 못했지만 벌써부터 새로운 지식들이 추가되고 좋네요useEffectEffect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다고 합니다.근데 side effect가 정확히 뭐죠..? React 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과를 Side Effect라고 합니다. 리액트에서는 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것 등이 side effect에 해당된다고 하네요. (익숙하지 않을 수 있다고 공감까지,.. 감동입니다.) React 컴포넌트에는 일반적으로 두 종류의 side eff..

오늘 배운 것react 기초JSXuseEffect기억할 것리액트 3가지 특징 : 선언형, 컴포넌트기반, 범용성JSX(javascript xml) javascript를 확장한 문법으로 브라우저가 이해할 수 있도록 javascript 코드로 변환해주어야한다.이때 "Babel" 이용JSX 규칙 :1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되야함2. 클래스 사용 시, className으로 표기3. javascript를 쓰려면 중괄호 이용하기4. 사용자 정의 컴포넌트 대문자로 시작5. 조건부 렌더링에 삼항연산자 사용6. 여러 개의 html 엘리먼트 표시 시 map() 함수 이용, 이때 key 속성을 넣어야함 내일 공부할 것grid왜 아직 수요일인거지..?

인트로react custom hook 관련 강의를 듣다가 훅을 사용하여 만들지는 않았지만 되게 유용하다라는 생각이 드는 함수들이있어 정리해보려고 합니다.어떻게 구현하는지 궁금해하던 기능들이었는데 강의에서 만나게 되니 매우 반갑네요useConfirm사용자가 뭔가를 하기 전에 확인하는 함수입니다.예를 들어 뭔가를 삭제할 때 정말 삭제하시겠습니까?라는 창이 뜨는 경우가 있잖아요. 그런 기능입니다. 버튼 클릭 시 comfirmDelete 함수가 호출됩니다. Delete the worldComfirmDelete 변수에는 useConfirm이 반환하는 함수가 저장됩니다. const deleteWorld = () => console.log("Deleting the world"); const abort =..

오늘 배운 것fetch, axios디스트럭처링 할당 (블로깅 완료)useEffect 기억할 것axios는 자동으로 JSON 데이터 형식으로 변환된다중첩 객체에서 디스트럭처링 할당하는 방식 useEffect 의존성배열 내일 공부할 것useEffect 추가 custom hook비동기/동기 리액트오늘 정말 졸리네요.. 정리만 끝내고 이제 그만해야겠습네다..

인트로리액트 코드를 보는데 디스트럭처링 할당이 빗발치더라고요.빠르게 이해하려면 디스트럭처링 할당에 대해서도 조금 더 살펴볼 필요가 있겠다는 생각이 들었습니다. 바로 시작하겠습니다.디스트럭처링 할당이란?디스트럭처링 할당 즉 구조 분해 할당은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.배열 디스트럭처링배열 디스트럭처링 할당의 경우 할당문의 우변이 이터러블이어야 하며 인덱스 순서대로 할당됩니다.const arr =['a', 'b', 2, 1];const [ one, two, ,numberOne] = arr;console.log(one); //aconsole.log(two); //bconsole.log(numberOne); //1심플한 코드로 변수에 배열 요소를 할당할 수 있습니..