프로젝트/[개인] 티끌모아태산 검색 결과
14 개의 검색 결과가 있습니다.
프로젝트/[개인] 티끌모아태산

react-query란?

web frontend 애플리케이션은 서버와 데이터 통신을 하면서, 서버에 있는 데이터를 가져와서 보여주는 경우가 대부분일 것이다. 그때 네트워크에서 가져온 데이터를 상태 관리할 수 있게 도와주는 라이브러리 중 가장 많이 쓰여지고 있는 것이 바로 react-query이다. 최근에는 react-query가 tanstack query로 업데이트 됐는데 react가 아닌 vue, svelte, solid에서도 사용이 가능해졌기 때문에 react-query에서 tanstack query로 네이밍이 바뀌었다고 한다. react-query란? 서버로부터 데이터를 받아올때, **fetching, caching, synchronizing and updating server state 를 할 수 있는데 즉, 서버상태를 ..

2023. 1. 22. 22:05
프로젝트/[개인] 티끌모아태산

[알고리즘] 아이슈타인 퍼즐

220322 처음으로 문제 풀어본 알고리즘 알고리즘을 쉽게 다가가기위해 '누워서 읽는 알고리즘' 라는 책을 읽기 시작했다. 그러다가 '어? 이거 재미있겠다 해서 풀어본 문제'이다. 책 저자 임백준님은 이미 엄청난 내공이 있으신 분이셔서 책의 제목이 '누워서 읽는 알고리즘'라고는 하지만, 나에게는 누워서는 읽지 못하고, 앉아서 읽어야 하는 정도의 어려움있는 내용도 많은 것 같다. 그래도 다른 알고리즘 책보다는 조금 더 쉽게, 부담없이 다가올 것 같은 느낌일 것 같아서 읽는중이다. 아래의 책의 내용을 인용하자면 이 문제를 만든 사람은 '상대성 이론'으로 유명한 아이슈타인이라고 알려져 있다고한다. 다만, 확인된 바는 없다고한다. 사물을 기억할 수 있는 두뇌의 메모리 용량이 특별하게 큰 사람이 아니라면 아마 종..

2022. 3. 22. 09:24
프로젝트/[개인] 티끌모아태산

[React] Redux란?

※ 오늘의 포스팅은 생활코딩 강의를 참고했다. Redux를 들어가기에 앞서, 불변성에 대해 공부해야되므로 서론이 많이 길다. 만약 불변성에 대한 이해가 완벽하다면, 바로 Redux로 건너뛰자. 이번 Redux를 제대로 알기위해서 생활코딩 Immutability를 먼저 듣고오자. 얼마전 리액트 프로젝트를 하나 해보고 리액트에서는 항상 객체를 복제를 사용하라고 하는데, 사실 들어도들어도 까먹게 됐었다. 그냥 아.. 코드를 이렇게 작성해야지 이런식으로만 흘러갔는데 이러한 논리를 단번에 이해시켜주는 강의였다. 먼저 Immutabilty는 mutabilty가변성의 반대인, '불변성'이라는 의미이다. 코드 작성할 때 원본을 오염시키지 않고, 복제본을 다루게되면, 원본과 복제본은 서로 독립된 상태이기 때문에 서로에게..

2022. 3. 21. 23:54
프로젝트/[개인] 티끌모아태산

[React 기초문법 ] 배열 랜더링하기

array 랜더링하기. ※잘 이해가 안가는 혹은 헷갈리는 react의 기초문법들만 정리하는 중. 객체 3개가 있는 users라는 배열이 있다. 이 배열을 이용할 것이다. 그리고 이 내용들을 랜더링 해줘야된다는 가정하에 해보겠다. const users = [ { id:1, username:'velopert', email:'public.thxjek@gmail.com' }, { id:2, username:'tester', email:'tester@example.com' }, { id:3, username:'liz', email:'liz@example.com' } ] 비효율적 방법1. import React from 'react'; function UserList(){ const users = [ { id:1,..

2022. 2. 23. 08:34
프로젝트/[개인] 티끌모아태산

[React 기초문법] useRef - 특정 DOM선택하기, 컴포넌트 안의 변수만들기

ref에 대하여. ※잘 이해가 안가는 혹은 헷갈리는 react의 기초문법들만 정리하는 중. 1. useRef 로 특정 DOM선택하기 html 과 JavaScript를 사용할때는 특정 DOM을 선택해야되는 상황에, getElementById또는 querySeletor같은 DOM seletor함수를 사용해서 DOM을 선택한다. 그런데 React를 사용하는 프로젝트에서도 종종 DOM을 직접적으로 선택해야되는 상황이 있을 수 있다. 그건 언제일까? 특정 엘리먼트의 크기나 위치 스크롤바 위치를 가져오거나 설정 focus설정 Video.js 그리고 JWPlayer.js같은 html5 video관련 라이브러리 사용 -> 특정 DOM에 라이브러리 적용 D3.js 그리고 Chart.js 같은 그래프관련 라이프러리 -> ..

2022. 2. 23. 07:48
프로젝트/[개인] 티끌모아태산

[프로토타입&클래스] 더 알아보기

1. 객체 생성자란? 함수를 통해서 새로운 객체를 만들고, 그안에 넣고싶은 값 또는 함수를 구현할 수 있게해준다. 함수 이름은 대문자를 사용하고, new라는 키워드를 사용한다. function Animal(type, name, sound) { //여기서의 this는 8번째 줄의 그 객체를 의미한다. this.type = type; this.name = name; this.sound = sound; this.say = function () { console.log(this.sound); }; } const dog = new Animal("개", "멍멍이", "멍멍"); //이 순간 하나의 객체가 만들어진다. const cat = new Animal("고양이", "야옹이", "야옹"); dog.say(); ..

2022. 1. 24. 19:34