C#, WPF로 개인 프로젝트 만들어 보기(1)

우선 필자는 C#과 WPF로 프로젝트를 한번도 만들어 본적인 없는 쌩 초보 입장으로 설명을 할 것입니다. (고수들은 나가주세요🖐️)필자 또한 초보임으로 부족하거나 틀린점이 있다면 피드백 주시면 겸허히 받아드리겠습니다.  프로젝트를 만들면서 기본적인 MVVM 패턴, DI(Dependency Injection) 등 .net framwork를 사용하는데 있어서 필수적인 용어와 개념을 함께 설명 할 예정입니다. 또한 DB연동 부터 간단한 CRUD 작업까지 할 예정임으로 기대해도 좋습니다.  🔳 프로젝트 결과 화면프로젝트 주제는 지역의 인구수를 조회하고 추가 및 삭제할 수 있는 앱입니다.총 2개의 카테고리로 분류해 사용자에게 보여주려고 합니다.사용 도구visual studio 2022, PostgreSQL, ..

• format_list_bulleted 프로젝트
• · 2024. 7. 4.
• textsms

localStorage, sessionStorage vs Cookie 차이점 알아보기

[localStorage, sessionStorage 공통점] 이들의 공통점은 웹 스토리지라는 점이다. 클라이언트 단에서 데이터를 쉽게 관리할 수 있다는 장점이 있다. 따라서 중요한 정보인 경우는 웹 스토리지 사용을 지양한다. 이둘은 key-value의 형식을 사용해 웹 스토리지에 저장할 수 있다. 또한 각각의 브라우저간의 데이터 공유는 불가능하다. 예를 들어 크롬에서 저장한 데이터가 사파리에서 사용될 수는 없다. (당연한 말이다.) 1. key-value 형태로 저장이 된다. 2. 브라우저간의 데이터 공유는 불가능하다. [localStorage 특징] 1. 브라우저가 닫혀도 localStorage에 저장된 값은 지워지지 않는다. (직접 지워야 한다.) [sessionStoarge 특징] 1. 브라우저가..

• format_list_bulleted 프론트엔드 개념
• · 2024. 3. 26.
• textsms

React + TypeScript + StoryBook 스무스하게 사용하기

🤔 넌 왜 쓰니? 내가 처음 storybook을 배워야 겠다고 생각한 것은 공통 컴포넌트를 만들고 싶어서였다. 프로젝트를 만들 때마다 비슷하지만 조금씩 다른 UI요소들을 볼 때마다 새로 만들곤 했다. 뭔가 코드 낭비 같기도 하고 시간도 오래걸려서 이 문제를 해결할만한 도구가 없을까 고민하다가 storybook이란 것을 발견했다. 그래서 꼭 "배워야지.. 배워야지..." 미루다 지금와서야 공부를 시작한다. 🙃 Storybook이란? 사용해보니 storybook은 내가 생각한 장점 말고도 훨씬 더 많은 장점을 가지고 있었다. 컴포넌트를 어디서 부터 만들어야 할지 모르겠다면 storybook을 사용해라! storybook은 자연스럽게 컴포넌트 주도의 개발을 하게 해준다. 예를 들어 TextField를 만든다고..

• format_list_bulleted Stroybook
• · 2024. 3. 22.
• textsms

카카오 맵 API를 활용한 강력한 커스텀 훅 만들기

🤔 커스텀 훅을 사용한 이유? 사실 처음부터 커스텀 훅을 사용해 만들 생각은 없었다. 처음 프로젝트를 만들 당시 카카오 맵 API를 활용한 중복된 코드가 많았고, 이를 불편하게 생각한 나는 리팩토링 과정에서 꼭 수정해야겠다고 다짐했다. 가장 불편했던 점은 지도와 인터랙션을 하기 위해서는 맵 객체를 생성해야 한다는 점이였다. 나는 프로젝트 요구사항을 만족시키기 위해 마커생성, 클릭이벤트, 클러스터러 기능 등 여러 가지를 수행해야 했다. 따라서 그럴 때마다 Map 객체를 만드는 과정을 반복해야 했다. 그래서 나는 Map객체를 공용으로 사용하는 인스턴스를 가진 커스텀 훅을 만들기로 했다. export default function useMap(containerRef: RefObject) { // 클릭한 곳 마..

• format_list_bulleted React
• · 2024. 3. 16.
• textsms

useInfiniteQuery를 활용한 무한 스크롤 구현하기

🤔 useInfiniteQuery를 사용한 이유 무한 스크롤을 적용시키는 방법은 여러가지가 있다. 하지만 구조는 비슷할 것이다. Intersection-observer를 이용해 특정 영역을 감시하고, 감시된 영역이 보이면 데이터 요청을 보내는 방식이 대부분일 것이다. 이를 구현하는 방식의 차이가 있다고 생각한다. useState를 사용해서 observer가 발동되면 page를 1씩 늘려주는 방법, 또는 useInfiniteQuery를 사용해 자동으로 page를 늘려주는 방식이 있다. 하지만 내가 useInfiniteQuery를 사용한 이유는 우선 useState는 간단한 데이터 구조와 UI 상태 변경을 위해 사용되고, 이경우 페이지 번호를 state로 관리하고 무한 스크롤 로직에서 페이지 번호를 직접 증..

• format_list_bulleted React
• · 2024. 2. 25.
• textsms

React-query 사용해서 장바구니 상태 실시간 업데이트 하기

🤔 React-query 사용 이유 오늘 내가 해볼 것은 DB에 있는 장바구니 수량을 실시간으로 반영해주는 아이콘을 만들 것이다. 원래 같았으면 장바구니 버튼 클릭 시 axios 요청을 통해 수량을 setState 함수에 넣고 state값을 렌더링을 시켜줬을 것이다. 하지만 나는 서버 상태를 비동기적으로 처리 해주면서 server state를 따로 관리를 해주는 react-query를 배웠으니 이를 활용해서 구현 할 것이다. 사용 이유 1. 서버 상태와 데이터 동기화 2. server state와 client state 구분 목적 1️⃣ useQuery를 이용한 커스텀 훅 만들기 우선 고려해야 할 점이 있다. 장바구니 수량은 "장바구니 담기" 버튼을 클릭했을 때만 증가한다. 이 말은 쿼리를 계속 관찰하고..

• format_list_bulleted React
• · 2024. 2. 24.
• textsms