이번에 next.js를 이용하여 개인 프로젝트를 시작하였습니다. 처음 사용기술들을 선택할 때 많은 고민을 하여 대부분 결정되었지만 orm과 css가 고민이였습니다. orm에 대한 고민은 다른 글에서 작성해보고, 이번 글에서는 css 선택시에 제가 고려한 점에 대해서 작성해보겠습니다. 1. 내 프로젝트의 CSS 방식을 결정하기 위한 고민 CSS방식을 결정하기 위해 제가 고민한 것들입니다. 프로젝트 규모 프로젝트가 작고 간단하다면 CSS Modules 같은 내장된 CSS 방식을 사용하는 것이 편리하다고 생각하였습니다. 반면 프로젝트가 크고 복잡하다면 Styled-Components 같은 라이브러리 방식을 사용하는 것 더 효율적이라고 생각하였습니다 프로젝트 팀 구성 이는 개인 프로젝트이기 떄문에 고려하지 않았..
최근 개발에는 테스팅이 매우 중요하다고 다들 말합니다. 하지만 보통 말로만 들어서는 쉽게 지나치기 마련입니다. 저또한 테스팅에 중요성에 대해서는 너무 많이 들어왔지만 "나중에, 언젠가, 필요하면, 해야지~"라며 미뤄왔습니다. 하지만, 요즘 여러 웹 애플리케이션 프로젝트를 진행하면서 수많은 오류를 만났고 그때마다 해결하기 위해 노력하였습니다. 이 과정을 통해 많은 것을 배웠고 의미있는 과정이였지만, 하나의 불안감이 생겼습니다 "만약 이게 실제로 수많은 유저들이 사용하는 애플리케이션이였다면, 이래도 괜찮은걸까?" 이처럼 실제로 체감하게되니 누가 옆에서 말해주지 않아도 테스팅에 대해서 관심이 가고, 찾아보게되었습니다. 그래서 이 글과 앞으로의 글에서는 제가 느낀 테스팅에 대해서 간략하게 정리해보려합니다. 1...
[기존 프로젝트 링크] 깃허브: https://github.com/joseph0926/project_02-MoneyNote GitHub - joseph0926/project_02-MoneyNote Contribute to joseph0926/project_02-MoneyNote development by creating an account on GitHub. github.com 배포링크: https://project02expensenote-deploy-production.up.railway.app/land 전체적인 문제점 및 개선 방향 처음 이 웹 애플리케이션을 만들 때는 단순히 풀스택 앱을 만들어보고 싶고, 또한 연습해보고 싶었기 때문이였습니다. 때문에 기능은 단순히 CURD와 필터 기능 정도만 존재하..
하나의 프로젝트를 만들어 놓고 어느정도 완성되면, 방치하는 문제를 개선하기 위해서 시작했습니다. [수정사항] 2023.05.10 - 반응형으로 수정 2023.05.12 - 문제점 및 개선점 분석 2023.05.14 - 필터 추가 [프로젝트 정보] - 깃허브: https://github.com/joseph0926/project_02-MoneyNote - 배포링크: https://project02expensenote-deploy-production.up.railway.app/ 1. 이 프로젝트를 시작한 이유 프론트에 대한 공부는 어느정도 일단락되었기때문에, 개인 프로젝트를 진행하고 싶었습니다. 그래서 프로젝트에 활용할 API를 찾아보던중, 이왕 백엔드 공부 했던것도 있고 해서 직접 REST-API를 구축해보..
타입스크립트에서는 함수를 어떻게 다루는지 알아보자 이 글에서 알아볼 것 함수에 타입 선언하기 (파라미터) 함수에 타입 선언하기 (return) void 타입, never 타입 1. 함수에 타입 선언하기 (파라미터) 함수의 파라미터에 타입 애너테이션을 해주지 않는다면, any타입으로 기본설정된다 즉, 파라미터에 원하지 않은 타입의 값을 받을수도있다 이를 타입 애너테이션을 활용해 막아야한다 const add2 = (num1: number, num2: number) => { // num1.toUpperCase(); 타입이 선언되었기때문에 에러가 발생한다 return num1 + num2; }; add(3, 5); // add(3, "asdf"); // add("qwer", true); // 타입이 선언되었기때..
타입스크립트에는 여러 장점들이 존재하지만, 최고의 장점은 type을 선언하여 에러등을 미리 잡을수있다는 점이다. 이러한 타입 선언 방식에 대해서 살펴보고, 타입스크립트가 어떻게 타입을 활용하는지 알아보자 이 글에서 알아볼 것 타입 애너테이션 타입 추론 자바스크립트 type vs 타입스크립트 type 1. 타입 애너테이션 타입스크립트에게 해당 변수등의 타입이 뭔지 알려주는 구문이다 const myVal: type = value; 이런 구조로 사용할수있다. 단, 타입 애너테이션에서의 원시 타입은 모두 소문자여야한다 2. 타입 추론 위에서 알아본 타입 애너테이션이 대부분의 경우에는 직접 명시할 필요가없다,, 왜냐하면 타입스크립트 자체가 타입을 추론하기 떄문이다 특정 변수나 상수에 어떤 타입을 사용했는지를 타입..
리덕스의 리듀서 함수에는 중요한 규칙이 하나 존재한다. 반드시 순수함수이며, 사이드이펙트가 없고, 동기식이어야한다. 하지만 웹 애플리케이션을 구축하다보면, 필수적으로 사이드이펙트 & 비동기 코드가 들어가야할때까 존재한다. 이럴때는 어떻게 처리해야할까? 이 글에서 알아볼 것 Redux에서 SideEffect & Async 사용 방법 Redux에서 SideEffect & Async - 컴포넌트 Redux에서 SideEffect & Async - 액션 생성자 1. Redux에서 SideEffect & Async 사용 방법 리덕스에서 사이드이펙트 & 비동기 코드를 사용하는 방법은 2가지이다. 컴포넌트에서 처리 컴포넌트에서 사이드이펙트등이 처리된 후에만, 리덕스에게 액션을 보낸다 따라서, 리덕스는 사이드이펙트등의..
앞의 글에서 리덕스에 대해서 자세히 살펴봤고, 이해했었다. 하지만, 마지막에 말했듯이 굳이 Context 대신 Redux를 사용해야할 이유를 찾지 못했었다. 이러한 고민을 한번에 해결해주는 것이 Redux Toolkit이다. 이 글에서 알아볼 것 Redux Toolkit 이란? Redux Toolkit 사용법 1. Redux Toolkit 이란? Redux를 도와주는 써드파티 패키지이다. 뭘 도와준다는 것일까? 상태 변경 불가성 문제를 해결해준다 복잡한 상태 관리를 도와준다 몇몇 기능들을 더 직관적이고, 쉽게 사용하도록 도롸준다 2. Redux Toolkit 사용법 1. 기존에 설치되어있는 redux를 삭제 왜냐하면 리덕스 툴킷에 리덕스가 포함되어있다. 2. npm install @reduxjs/tool..
