TIL

내 코드를 포함한 다양한 사람들의 코드 리뷰를 통해...👉 e.target 말고 e.currentTarget👉 이메일 정규식은 w3c 표준에서 긁어오기👉 css선택자 id사용 금지👉 onChange 등 안에다가 함수 길게 쓰지 말고 밖에다가따로 정의하기👉 

협업 걸음마이기에 git에 익숙하지 않아 난항을 겪었다.확실히 숙지하고 가야할 부분이라 생각해 다시 공부하게 되었다.새로운 브랜치를 생성하고 변경 커밋들에 대한 PR을 열고 최종적으로 merge한다.$ git clone <https:.. URL> 기존 소

eslint로 인해 prop types오류가 나게 되어 타입 지정을 해주는 라이브러리가 있어 이용하였다.propTypes를 이용해 속성값의 타입 정보를 정의해 props의 타입 정보를 한눈에 파악할 수 있는데 typescript와 같은 이유에서 그 필요성이 있다.원래

true일 때 class추가해주는 것은 classnames라이브러리를 이용하여 가독성을 높인다.Objects / Functions함수 정의시 syntax차이가 있다.Other Typestype alias는 원시타입, 유니온, 튜플 사용이 가능ExtendBoth can

👉 로컬스토리지보다 store js를 추천 ⇒ json stringify 사용 안 해도 됨 👉  slick.js👉  useMemo는 값을 저장 useCallback은 함수를 저장해서불필요한 생성을 방지한다(연산량이 많은가? 를 확인하고 감싸줘야한다. 과도한 사용은

Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기

👉  scss모듈은 소문자를 권장하셨다👉  components → common 폴더를 생성하여 빼줄 수 있는부분은 빼준다.👉  try catch finally 까지 추천👉  axios안에 url 넣는건 권장되지 않음 따로 빼서 관리하기👉  import 절대경로

예전에 타입스크립트를 배웠는데 많이 까먹어서 개인 과제 도중 자꾸 막히는 부분이 생겨 요번 기회에 다시 공부하게 되었다지정하지 않아도 타입 추론 기능에 의거하여 알아서 하긴 한다.or연산자 같은 것이 필요한 타입일 때는 제네릭이 필요해진다함수에 마우스를 올리면 자동으로

‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule props받아올때 props.으로 받지말고 비구조 할당으로 풀어서 받아오기 What is the right way

기본 설명간단한 예제intersection observer를 거는 과정에서 오류가 나서 한참을 해매었다observation = 감시는 1번만 이루어지면 되는데 api콜이 필요할 때마다 매번 호출해야하는 방식으로 착각해서 미친듯이 api콜을 해버리게 되었다.조건문을 추가

ts/eslint관련 에러를 결국 다 해결하지 못한채 제출시간이 되어 제출하였다. 코드가 막힐 때 함수를 여기저기 옮겨보고 이것저것 깔다가 충돌이 일어나고 코드가 난잡하게 되어 결국 프로젝트를 2번이나 갈아엎었다..recoil 사용할 때 관련 기능별로 묶어 객체 안에

react-query 설치하기 UseQuery 기본적으로 쿼리는 고유한 key값을 가져오고 subscribing해서 불러올 때 키값이 이용된다. unique Key는 string과 배열을 받습니다. 배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를

알아볼 것들👉  react-loaderble👉  webstorm👉  linter에서 프로미스 함수에 then 안 쓰면 노란줄 걸림👉  usequery에 페이지네이션 기능이있음👉  랜더단에 맵 넣지 말자가독성 떨어짐 랜더단에서는 최대한의 가독성이 필요함👉  삼

REDUX 리덕스는 Flux 아키텍처의 구현체 ==> 데이터의 흐름을 예측할 수 없게 만들었던 문제를 해결하기 위해서 고안되었다. 흥미로웠던 등장 배경에 대해: > 잘 알려진 사례 중 하나는 2014년 컨퍼런스에서 소개된 페이스북의 채팅 버그입니다. 읽지 않은 메

REDUX에 값을 저장하기 위해 input 값이 바뀔때마다 useQuery로 들고온 값을 data를 넣어주려고 했는데 네트워크로 데이터는 불러져 오는데 redux에 값이 안 담기는 문제가 있었다.setState 시점에 대해 까먹고 그냥 코드를 짜버린 잘못인데state

공공데이터 open api를 이용하던 중에 cors오류가 났다.cors??교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근

react-responsive 적용범위의 device prop을 받아와 상황에 맞게 컴포넌트를 화면에 뿌려줄 수 있게 해주는 라이브러리입니다. 사용은 hook, component 방식 2종류가 있습니다. With Hooks with components widt

기존에 chartjs를 이용해서 그래프 구현을 했었는데 요번에는 victory를 이용해서 구현중에 있다. 개인적으로 chartjs가 배우기에는 더 쉬웠던 것 같다.설치하기차트에 넣을 데이터는 기본적으로 x축, y축을 2개의 데이터 값을 key,value로 가지는 객체

dl은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.데이터 별로 구분선등 표현할 때 dt, dd 쌍을 div로 감싸준다.fieldset 태그HTML요소를 박스로 묶어주는 태그주로 form 내부에 사용함legend 태그필드셋에 제목을 달아주는 태그예시코드의 질을 더

매드업 기업과제 회고 마지막의 마지막까지 코드를 붙잡고 있을 정도로 나에게는 난이도가 있는 과제였고 특히 victory를 이용한 차트 구현이 정말 어려웠다. 단순히 라인이 2개가 있는 차트를 그리는 것도 어려웠는데 거기에 들어

개인적으로 꽤 어려운 내용이지만 알아두면 리액트를 이해하는데 도움을 줄 만한 글들이 많아 천천히 공부해보고자 한다. 내용이 어려운만큼 초회차에는 가볍게 이해만 하고 넘어가고자 한다.https://goidle.github.io/react/in-depth-reac

객체에 값을 저장하면 메모리 주소가 객체에 담긴다.원시 타입인 변수끼리 비교한다면, 값 자체를 비교하고,객체 타입인 변수끼리 비교한다면, 참조 값을 비교한다.기본적으로 복사는 주소값을 복사해 오는 것이기 때문에 원치 않은 결과를 야기할 수 있다.따라서 얇은 복사와 깊은

컬러 스키마→ 쓸 색깔들을 정해놓고 쓰자 (일관적인 색깔 사용)변수화 해 놓고 쓰기adobe color 어울리는 색깔 추천 받을 수 있다.글자 색깔 완전 검은색 쓰지 않기 (액셀같이 촌스러워짐)→ 배경색깔 완전 진한 회색 같은거 쓰지 않기 react helmet으로 j

모아데이터 기업 과제 모아데이터에서 어드민 화면과 회원별로

어제에 이어서 차트를 팀원분이 만드신 레이아웃 안에 집어넣고 데이트 피커와 연결하는 작업을 진행하였습니다.레이아웃에 의해 추가할 기능들이 있어 코드를 더 작성하게 되었습니다.차트 오른쪽 평균 bpm 표시를 위해 데이터값에 따라 평균 bpm을 구해주는 함수를 구현했다.값

지금껏 혼자서 공부하다가 처음으로 현업에 종사하시는 분들과 면접도 보고 프론트엔드를 준비하는 동료들도 만나서 한 달간 여러 과제들을 수행하면서 가장 크게 남는 감정은 감사함이다.운 좋게 좋은 멘토님 그리고 동료들을 만나 덕분에 1달간 성장도 성장이지만 많이 돌아보고 반

최근에 어쩌다보니 다양한 곳에서 차트를 그릴 일들이 빈번하게 발생해 다양한 차트 라이브러리를 사용하게 되었습니다.본 글은 이 라이브러리는 내부적으로 구조가 이래서\~~ 이게 좋아! 가 아닌 한 명의 평범한 유저 입장에서(소비자에 가까운 느낌으로) 이런 경험들을 했고 어