현재 진행중인 Next.js 프로젝트에서 데이터 패칭 연결 중 문제가 발생했다.각 페이지에서 공통적으로 사용해야 하는 데이터가 존재한다는 것!!!!지저분한 코드를 작성하다 상태 관리 라이브러리를 사용하기로 결정했고 이번 기회에 배워보고 싶었던 "zustand"를 선택했다. 🐾 설치하기# NPMnpm install zustand 🐾 스토어 생성하기create 함수를 사용해 스토어를 생성한다.// 공식 문서 예제import { create } from 'zustand'const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBea..
기존 자바스크립트로 작성된 코드를 타입스크립트로 마이그레이션을 진행했다. typescript 환경 eslint를 추가하기 위해 명령어를 입력하자 오류가 발생했다.[eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or nullERROR in [eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null @typescript-eslint..
http 패키지를 사용해 API 호출한다. 🐾 http 패키지 설치하기pub.dev ⇦ Node.js의 npm과 비슷한 Dart, Flutter 공식 패키지 보관소https://pub.dev/ The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.devhttp를 검색한 후 설치한다. 설치 방법 중 pubspec.yaml파일에 코드를 작성하는 방법을 사용했다.pubspec.yaml프로젝트에 대한 설정을 하는..
[Flutter] Pomodoro를 만들다.
나의 첫 앱 Pomodoro에 대한 정리 겸 회고록을 작성하겠다.https://nomadcoders.co/flutter-for-beginners/lobby Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad CodersFlutter for Beginnersnomadcoders.co 1. color theme 설정하기theme에는 color에 대한 세팅을 했다.class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( scaffoldBackgroundColor: const Color(0xffE7626C), ..
ClassDart는 class와 mixin 기반 상속을 지원하는 객체지향언어모든 객체는 class의 인스턴스이고 null을 제외한 class는 모두 Object에서 비롯한다. 🐾 property 선언class에서 property를 선언할 때 타입을 사용한다.class 메소드 안에서는 this를 쓰지 않는 것을 권장하기 때문에 변수를 바로 사용한다.class Player { final String name = 'kiji'; // final을 붙이면 변수 수정 불가능 int xp = 1500; void sayHello() { // print('Hi my name is ${this.name}'); 권장하지❌ print('Hi my name is $name'); }}void main() { ..
Dart의 자료형Dart의 거의 전부가 객체로 이루어져 있기 때문에 진정한 객체 지향 언어로 불린다.따라서 import할 필요 없이 해당 자료형이 가지는 모든 method를 사용할 수 있다. String name = 'kiji';bool alive = true;int age = 10;double money = 10.99;num -> int와 double를 모두 포함num x = 1;x = 10.2; 1. Listlist의 선언 방법대괄호를 사용해 변수에 할당명시적 타입 선언1. 대괄호 사용var numbers = [1, 2, 3, 4];2. 명시적 타입 선언List numbers = [1, 2, 3, 4];이때 배열 안에 선언한 타입 이외의 타입은 추가할 수 없음numbers.add('1'); // ❌..
1. varvar 키워드로 변수명을 선언한 후 값을 할당값을 업데이트할 때는 변수의 본래 타입과 일치해야한다.var name = 'kiji';name = 'jiwon';name = 12; ❌ 2. 명시적 타입 지정명시적으로 변수의 타입을 지정String name = 'kiji'; 📍 var와 명시적 타입 지정은 언제 사용하는지?더보기var → 관습적으로 함수나 메소드 내부에 지역변수를 선언할 때명시적 타입 지정 → class에서 변수나 property를 선언할 때함수 안에서 지역변수를 선언하거나 메소드 안에서 지역변수를 선언하는 상황에서는 var를 사용하는 것을 권장한다! 3. dynamic(사용 추천은 ❌)여러가지 타입을 가질 수 있는 변수에 사용하는 키워드변수의 타입을 알기 어려운 경우 dyn..
🐻 ZustandZustand는 React를 위한 상태 관리 라이브러리이다.Zustand는 상태 관리를 위해 React의 Context API와 함께 사용되며, Redux보다 훨씬 간단하고 직관적이다.Zustand는 상태를 관리하기 위해 React 컴포넌트 트리 내에서 사용되는 상태 컨테이너를 제공하며,useState와 useReducer를 사용하거나 더 간단한 API를 제공해 상태를 업데이트하고 구독하는 방법을 단순화한다. Zustand의 특징1. 간결함과 유연성상태 관리를 위한 간단한 API를 제공하여 복잡한 설정이나 보일러플레이트 코드 없이 쉽게 통합할 수 있다. 2. React Hooks와의 통합React Hooks를 기반으로 한 상태 관리를 제공하여, 상태를 정의하고 사용하는 것이 매우 직..
프로젝트 4개를 하면서 ESLint와 Prettier는 항상 학원에서 하라는 대로만 사용해왔다.별 생각 없이 사용하던 나날이 계속되고 면접을 준비하면서도 이에 대한 내용은 미처 생각하지 못했다. 그래서 반성을 담아 작성하는ESLint와 Prettier에 대해 알아보기!!!!! 🌊 ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구 -> 코드 퀄리티를 보장하도록 도와준다! ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현할 수 있도록 도와준다.ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드를 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수 있다. { "parser": "@typescript-eslint/parser..
🌴 React Query (현 TanStack Query)서버의 데이터 가져오기/업데이트, 캐싱, 에러 처리 등을 쉽게 할 수 있도록 돕는 라이브러리서버에서 가져온 값을 담는 객체, 에러가 발생했을 때 에러 정보를 담는 객체, 데이터 가져오기/업데이트 중임을 나타내는 등 각종 유틸 기능을 제공한다.동일한 요청을 동시에 여러번 해도 한번만 요청을 보내 최적화하기 때문에 비동기 작업을 좀 더 효율적이고 간단하게 처리할 수 있게 한다. cursor에 따라 postId 변경하기http.get("/api/postRecommends", ({ request }) => { const url = new URL(request.url); // cursor의 기본값은 0 const cursor = par..