본문 바로가기

전체 글

 (71)
React/Redux - 실수 모음집 (누적 중) (어떤 글을 보고 영감을 받아서 누적하기로 함) https://www.educative.io/blog/top-react-mistakes Top 10 mistakes to avoid when using React React is the most popular front-end framework in the tech world, used by top companies like Facebook, Netflix, and Airbnb. Learn more about the top mistakes React developers make - and how to fix them. www.educative.io 충분한 컴포넌트를 만들지 않는다. State를 직접 수정한다. number 타입을 string타입으로 Prop..
[HackerRank] Sherlock and the Valid String (Javascript) 답을 찾기 위해서 고려해야 할 점 인자값으로 받은 s의 길이가 1일 경우 YES를 반환한다. (코너 케이스) 인자값으로 받은 s의 모든 알파벳의 갯수가 동일할 경우 YES를 반환한다. (코너 케이스) 예) aaabbb => {3: aaa, bbb} 인자값으로 받은 s의 모든 알파벳의 갯수는 2종류여야한다. 2종류 이상일 경우 무조건 NO이다. 예) aaabbbcc => {2: cc}, {3: aaa, bbb} 예) aaabbbcccceeeee => {3: aaa, bbb}, {4: cccc}, {5: eeeee} {2: cc}, {3: aaa, bbb} (갯수가 적은 그룹이 1개) 예) aaabbcc => {2: bb, cc}, {3: aaa} (갯수가 많은 그룹이 1개) 갯수가 많은 그룹이 1개일 경우..
React.memo 사용 예제 지난 주부터 미친듯이 React.memo, useMemo, useCallback에 대해서 검색했지만 모두 어디서부터인가 흘러들어온 Movie 예제에 대해서 말할 뿐, 명확한 것이 없어서 React.memo를 사용한 썰을 푼다. 물론 내가 남기는 글이 명확하고, 정확하지 않을 수도 있다. 아래는 내가 개발한 대시보드 목록 화면이다. 아래 화면은 각각의 이유로 REST API를 두 번 호출한다. 1. 초기화 후 리스트 출력을 위해 대시보드 목록 조회 --> Rerender 2번 발생 2. 추가하기 버튼을 위해 대시보드 테마 조회 --> Rerender 2번 발생 이차저차해서 전체 페이지(부모 컴포넌트)에서는 총 4번의 Rerender가 발생하고, 부모 컴포넌트의 상태값이 변했으니 자식 컴포넌트도 props가..
grunt-contrib-copy : Copy files from root of project to dist Set cwd to '' instead of '/'. copy: { entry: { expand: true, cwd: '',
PostgreSQL에서 데이터 Insert문으로 백업하기 터미널에서 아래 명령어를 실행하면, Insert 문으로 데이터가 백업된다. $ /postgres/bin/pg_dump -U {계정} -t {테이블명} -a -O --inserts -E UTF8 ${db명} > {dump파일명} 여러개의 테이블일 경우 -t {테이블명} -t {테이블명} -t {테이블명} 이런 식으로 여러개 작성해주면 된다.
맥, 리눅스에서 포트의 PID 확인하기 맥, 리눅스에서 포트의 PID 확인하는 방법 $ lsof -i TCP:8080
React Async 사용하기 - 1. useAsync, Helper components React Async는 promise resolution, data fetching을 위한 유틸리티이다. React Component와 여러 가지 Hook을 제공해주며 fetch api, Axios, GraphQL 등을 지원한다. React Async가 제공하는 3가지의 메인 API hook : useAsync component : Async factory function : createInstance 1. hok - useAsync const state = useAsync(options); state state object options Configurtion options 옵션은 되도록 inline object literal로 작성하고, state의 프로퍼티는 비구조화해서 사용하는 것을 추천한다. i..
VSCode 플러그인 추천 VSCode의 플러그인을 추천합니다. 설치 후, 1개월 이상 꾸준히 사용하는 플러그인만을 대상으로 합니다. 1. Auto Close Tag : HTML, XML 파일에서 입력한 태그를 자동으로 닫아준다. [자세히 보기] Auto Close Tag - Visual Studio Marketplace Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text marketplace.visualstudio.com 2. Auto-Open Markdown Preview : Markdown을 작성하면서, 화면 미리보기를 할 수 있다. [자세히 보기] Auto-Open Mar..

티스토리툴바