오늘 수업 내용 정리 글자색은 기본 검정색으로 하지 말자. 촌스럽다. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/ https://color.adobe.com/ HTML 데이터세트(dataset) 사용하기 (+React) 데이터세트는 HTML 표준에 정의된 기능이다. DOM 요소에 값을 저장하고 JS 코드로 값을 읽어들일 수 있다. html 태그 내에 `data-속성-이름`을 추가하면 된다. 만약 `data-user-name`이라는 데이터세트를 추가했다고 했을 때, js에서 읽어들일 때 `data-`는 제거되고, userName과 같이 카멜케이스로 변경하여 읽는다. 각 태그마다 1개의 데이터셋 속..

Squash and Merge feature 브랜치의 commit history를 합쳐 깔끔하게 만들기 위해서 사용한다. commit a+b+c를 합쳐 commit abc를 만들어지고 master에 추가된다. abc는 하나의 parent를 가진다. git checkout master git merge --squash my-branch git commit -m "commit message" pr한 후 머지할 경우에는 squash and merge를 선택해주면 된다. 이번 과제할 때 squash and merge를 한 후 새로운 pr을 만들면 그 전의 커밋까지 계속 같이 보이는 현상이 있었다. squash and merge를 한 후에는 브랜치를 삭제해줘야 하는데, 이전의 브랜치와 같은 브랜치에서 계속 작업하..

오늘 수업 내용 정리 사이드 바 같은 건 aside 태그를 이용하고 나머지 내용 부분은 main 태그를 이용하자. dl, dt, dd 태그 쓸 때, 각 dt, dd마다 따로 작업해주고 싶다면 div로 감싸주자. map함수로 돌릴 경우 꼭 li태그로 써주기 클릭이벤트가 있는 건 무조건 button으로! 괜히 li에 onClick을 넣지 말자. 숫자에 언더바를 써주면 보기 더 좋다. (1000000은 1_000_000 처럼 쓸 수 있다.) code climate -> 코드를 분석해 줌. storybook js로 컴포넌트를 관리할 수 있다. Chromatic을 이용해 storybook js로 만든 컴포넌트를 공유할 수 있다. 성능 확인을 위해서는 개발자도구의 performance, lighthouse 탭을 이..

Victory.js 사용하기 victory js를 사용해보았다. 워낙 문서가 잘 되어있어서 기본적인 차트 그리기에는 어려움이 없었지만 과제의 요구사항에 따라서 추가적으로 구현하려니 어려움을 겪었다. 여러 번의 삽질을 통해 일단 기본적인 레이아웃까지는 완성했다. 과제의 요구사항에서 첫 번째 그래프의 y축은 왼쪽에, 두 번째 그래프의 y축은 오른쪽에 표시하라고 되어 있었다. 둘의 단위가 비슷하다면 쉽게 구현했겠지만 하나는 백 단위고, 하나는 십 단위라서 한 그래프에 비슷하게 보여주는 것이 어려웠다. 😥 바로 코드 고고 일단 샘플로 사용할 데이터는 아래와 같다. Chart.tsx const data = [ { click: 559, conv: 37, date: '2022-02-01', }, { click: 69..

오늘 기업 과제를 하나 더 끝냈고 또 다시 새로운 과제가 시작되었다. 이번 과제에서는 개인적으로 아쉬웠던 점도 있었기 때문에 다음 과제 때는 더 열심히 참여하면서 해야겠다. 오늘 수업 내용 useQuery의 key값에는 함수 이름같은 건 쓰지말고 문자열 또는 배열로 넣자. // 문자열 useQuery('todos', ...) // 배열 useQuery(['todos'], ...) mark 태그를 span으로 감싸는 건 html을 잘 모르는 것이다. (문서를 보니 보통 p태그나 blockquote 안에서 쓰는 듯.) span으로 무언가를 감싸는 것 자체가 좋지 않음. 리덕스 툴킷 상태 리셋해줄 때 reset용 값을 따로 만들지 말고 INITIAL_STATE를 그대로 넣어주면 편함. 차트 그리는 라이브러리는..

Redux Toolkit 리덕스를 사용하는 구조에서는 전역 상태를 전부 하나의 저장소(store) 안에 있는 객체 트리에 저장하며, 상태를 변경하는 것은 어떤 일이 일어날 지를 서술하는 객체인 액션(action)을 내보내는(dispatch) 것이 유일한 방법이다. 그리고 액션이 전체 애플리케이션의 상태를 어떻게 변경할 지 명시하기 위해서는 리듀서(reducer)의 작성이 필요하다. 리듀서는 변화를 일으키는 함수로써, 전달받은 액션을 가지고 새로운 상태를 만들어 스토어에 전달한다. 이 모든 설계는 데이터가 단방향으로 흐른다는 전제 하에 데이터의 일관성을 향상시키고 버그 발생 원인을 더 쉽게 파악하려는 의도에서 출발했다. 대표적으로 언급되는 리덕스의 문제는 1. 스토어 환경 설정이 복잡하다. 2. 유용하게 ..

React Query server state를 관리하는 라이브러리로, 리액트 프로젝트에서 서버와 클라이언트 사이 비동기 로직들을 손쉽게 다루게 해주는 도구이다. 데이터 fetching, 백그라운드에서 데이터 업데이트, Optimistic Updates, 캐싱과 key를 통한 전역 상태와 같은 사용 등 많은 유용한 기능을 제공한다. 리액트 쿼리에서는 API 통신을 위한 여러 함수를 useQuery와 같은 Hook 인터페이스로 제공한다. import React from "react"; import ReactDOM from "react-dom"; import { QueryClient, QueryClientProvider, useQuery } from "react-query"; import { ReactQuer..

개인 과제 끝나고 컨디션 바닥 찍었다가 다시 돌아온 사람의 TIL... 오늘 수업에는 게스트가 와주셔서 코드리뷰를 해주셨다! 런캣: cpu 사용량 알려주는 프로그램. 맥에만 있는 줄 알았는데 윈도우에도 있어서 한 마리 들여놨다. 디자인 사이트: pinterest, dribble, behance return 하는 부분은 최대한 로직없이 깔끔하게 짜는 것이 좋다. 구글 폰트 noto sans -> 다른 건 깔끔한데 숫자가 못생겼다. lato -> 숫자가 깔끔. open sans 폰트를 다 다운받으면 용량이 커지기 때문에 서브셋만 받는 식으로 용량을 줄일 수 있다. IE 사용자 쫓아내기 index.html에 if IE 넣어주기. 포트폴리오 사이트에 누구 들어오는지 궁금할 때 구글 analytics 적용해보기...

드디어.. 무한 스크롤을 완성했다. 사실 깔끔하게 짜진 못한 것 같은데 그래도 기능은 잘 동작하는 중이다! 무한 스크롤 구현에는 intersection-observer을 이용했다. 영화 정보는 한 번에 10개씩 받아오고 맨 아래로 내리면 추가적으로 10개씩 받아온다. const [movieList, setMovieList, resetMovieList] = useRecoil(movieListState) // 영화 api로 받아온 영화 정보 const [currPage, setCurrPage] = useState(1) // 현재 페이지 번호 const [isLoading, setIsLoading] = useState(false) // 로딩 중 여부 const [totalResults, setTotalResu..

🎊 3주동안 진행했던 데이터 분석 웹 프로젝트가 저번 주에 드디어 끝이 났다! About Project 이번 프로젝트는 그동안 배운 numpy, pandas를 이용해서 데이터 분석을 하고, 그와 관련된 웹사이트를 만들어야 했다. 시간 관계상 kaggle에 있는 데이터셋만 사용해야해서 주제를 정하기 어려웠지만 그래도 2~3일만에 대략적인 기획은 완료할 수 있었다. 우리 팀이 찾았던 데이터셋은 바로 kaggle에 있는 Wine reviews라는 데이터였다. ( https://www.kaggle.com/datasets/zynicide/wine-reviews ) 와인에 대한 평점과 특징, 생산되는 나라 등 여러 정보가 복합적으로 있어서 활용하기에 좋다고 생각해서 선택했다. 기본 기능으로 와인 검색(와인 태그별,..