React Documents

리스트와 Key

WCAGWeb Content Accessibility Guidelines는 접근성을 갖춘 웹사이트를 만드는 데 필요한 지침을 제공한다.WAI-ARIAWeb Accessibility Initiative - Accessible Rich Internet Application

form, state, Composition vs Inheritance

화면에 Hello, world 표시하기html root라는 ID를 갖는 Element를 react Dom 이 렌더링할 root로 변수 선언!그리고 root에 render!html를 js 문법을 활용하여 정의하고 render 하는 문법js 로 elements 를 생성하자

취향? 이라기엔 충격적인 이야기.react component 렌더 단에 map 과 삼항 연산자를 쓰지 말자는 멋진 선배 개발자의 코드리뷰를 보았다.물론 다른 훌륭한 개발자들은 동의 하지 않을 수 있다.그래도"프론트엔드는 가독성이죠.""코드를 수정하기에 용이한게 짱입니다

React-query? > 데이터 가져오기 라이브러리 기술적인 용어로 말하면 React 애플리케이션에서 서버 상태 가져오기_, 캐싱, _동기화 및 업데이트 를 쉽게 만듭니다. 참조 React-Query Docs how to use 사용할 컴포넌트 상단에서 준비

local, session storage 중 local을 활용해 보자!local 은 브라우저가 닫히면 살아지는 session과는 다르게 다시 해당 주소로 접속하면 기록을 갖고 있다.이를 활용해서 장바구니 혹은 보관, 즐겨찾기 기능을 구현해 보자!!저장하기배열 저장 (저

API key 값 등 보안 혹은 결제 문제로 중요한 key 값을 저장하고 환경적으로 필요한 부분을 저장하고 사용하기 위해 .env 를 활용한다..env 파일사용 파일처럼 사용하면 된다..env 는 github 등에 올리지 않도록 .gitignore에 설정한다.하지만 g

린트 켜고!콘솔에 경고 없이150줄을 넘기지 않는 코드 짜기광클 방지로 쓰로틀링, 디바운스 걸기 (300ms 정도)observer 사용하면 꼭 언마운트 클린 해주기역시나 광클시 api 를 불러오고 state에 저장되는 과정을 고려하여 코드 짜기key 값은 노출되지 않도

npm 으로만 사용해 오다가 yarn 을 써보자고 하셔서 도..전...brew install yarn시작하자마자 오류..error https://registry.yarnpkg.com/grip_assn: Not found이러지마..지금 부터 시작.registry

로딩시 용량이 큰 이미지는 엄청나게 로딩 속도를 저하 시킨다.어차피 화면 꽉차게 띄우는 이미지가 아니라면 크기에 맞는 이미지를 업로드하고 크기에 맞는 해상도로 최적화시켜서 업로드하면 쾌적한 로딩속도를 만들어준다.https://squoosh.app/이미지에 사용

놀라운건 넘쳐난다.모달을 구현하기 위해 강사님께 추천받은 React Portal을 알아보자.https://ko.reactjs.org/docs/portals.html공식 문서 읽어주고!portal은 DOM 트리의 어디에나 존재할 수 있고 일반적인 React 자식

코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구.vscode extension installvscode settings 옵션 설정settings 에서 eslint, stylelint 검색해서사용하고자 하는 validate 설정해주기!프로젝트에 eslint

email 표준 정규식id 는 js 특정 동작 할때만 사용.import CheckActive from “images/check_active.svg”;svg 파일은 index.jsx 에 넣고 export 해서 사용하기cx (classnames)react-use이벤트 막기

json 데이터를 정리하여 excel 로 내려받기npm install write-excel-file활용만들어진 함수를 실행시키면 data를 갖는 지정된 파일명으로 excel 파일을 다운로드 하게 된다!!

☝🏽 원티드 프리온보딩 코스에서는 수강료 무료, 참가비 50만원을 받습니다. 이후 코스 완주(1.참가기업 70% 이상 지원 2.과제 제출 3.동료피드백 4.출결)시 취업활동 지원금 50만원(제세공과 후)을 지급합니다. 이러한 1) 정책을 도입한 이유와 2) 지원을 희

공백기 이유개발자가된 이유프론트엔드 선택이유react 선택이유웹페이지에 도형을 원하는 위치에 위치 시킬 수 있는가margin & paddingfloorflexstyled-components 를 설명해주세요.비동기restfulhttp 메소드 설명get post 장단hoo

패스트캠퍼스 프론트엔드 스타트업트랙 과정 수료

주제선정 => 시장 조사 => 기획 => 디자인 => 개발단순하게 프로젝트 순서를 나열하면 이렇다.시장 조사와 기획을 하여 사용하고자 하는 웹페이지에 들어갈 기능들을 작성한다.그리고 디자인을 통해 기능들을 배치한다.기획 단계에서 사용자의 사용순서등을 고려하고예비 시안을