시작하기… 지난 시간에 indexedDB에 샘플 데이터가 저장되는 것 까지 세팅을 했다. 오늘은 indexedDB에서 데이터를 가져오는 get API와 데이터를 추가하는 post API 두 개를 만들어 실제로 데이터가 추가되는 것을 해볼 예정이다. indexedDB 데이터를 가져와보자 먼저, useQuery를 통해 todoList 데이터를 가져오...
시작하기… Trello 클론 코딩의 가장 메인 기능이라고 할 수 있는 드래그앤드롭 기능을 구현할 차례다. 라이브러리를 사용하는 방법도 있지만, 사용하지 않고 개발을 해볼 예정이다. 그냥 Drag and Drop은 간단하지만, Trello에서 제공하는 Drag and Drop 기능은 생각보다 복잡하다. 각각의 카드별로 드래그앤드롭이 가능한 것 뿐만 ...
AWS, 아는 만큼 보인다 전 직장에서는 클라우드 서비스를 사용하지 않았다. 언제 샀는지 알 수 없고, 더 이상 부품조차 구할 수 없는 오래된 물리 서버로 모든 것을 해결했다. 하지만 이제 AWS를 사용하는 곳으로 왔으니, 다시 클라우드 서비스의 대표 AWS의 개념을 오랜 기억속에서 꺼낼 때가 되었다. ECS, EC2 뭐가 다른가? 최근 일을 하...
React Query를 더 관리하기 좋게 만드는 법은 없을까? 코드를 쪼갤 수 있을 만큼 쪼개고 관리하기 좋은 형태로 리팩토링하는 것은 어쩔 수 없는 프론트엔드 개발자의 고민이다. React-Query는 정말 좋은 기능들을 제공하지만, 많은 기능이 있는 만큼 코드가 굉장히 길어질 수도 있다. 어떻게 보면 React Query 또한 API 호출 함수와...
React-Query 사용하기 지금부터 간단한 Login api를 React-query를 사용하여 구현해볼 예정이다. 앞서 언급했듯이, React-Query는 프론트엔드 api 사용에 있어 다양한 편의기능을 제공해 준다. 대표적으로 data가 갱신되면 useState를 사용할 필요 없이, 해당 data의 상태 변화를 확인하고 랜더링이 되는 기능부터,...
라이브러리와 프레임워크의 차이 라이브러리는 개발 주도권이 개발자에게 있고, 프레임워크는 개발 주도권이 프레임워크에 있다. 리액트를 선언형 프로그래밍이라 하는 이유는? 선언형 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려질 수 있는지에 대하여 생각하기 보다, 컴포넌트나 데이터의 배치를 통해 무엇이 렌더링될지에 대해 고려하는 것이 선언형 UI의 특...
다형성 다형성이란 제네릭과 같이 특정 객체가 하나의 타입이 아닌 여러 가지 타입으로 표현될 수 있어서 재사용 가능한 형태로 구현될 수 있는 것을 말한다. 타입 시그니쳐 function functionName (parameter1: type, parameter2: type): returnType { return value; } 함수, 서브루...
HTML, CSS !Doctype의 역할 메타 태그 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="페이지에 대한 요약 설명"> <...
HTTP란? 텍스트 기반 통신 규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. HTML, text, 이미지, 음성, 영상, 파일, JSON, XML 등 다양한 종류의 데이터를 전송할 수 있다. Stateless 서버에서 상태를 관리하지 않는 것을 뜻한다. 각 요청이 독립적으로 실행되고, 이전 요청에 대한 정보를 알지 못한다. 장점은 ...
자바스크립트란? 자바스크립트는 클라이언트 사이드에서 동작하는 싱글스레드 프로그래밍 언어이며 인터프리터 방식으로 동작한다. 싱글 스레드이지만 오래 걸리는 작업들은 브라우저 내부의 Web APIs에서 비동기+논블로킹으로 처리할 수 있다. 이벤트 루프 이벤트 루프는 call stack, callback queue, Web APIs 등을 모니터링하며 ...