미누에요

여전히 프로젝트를 진행하고 있습니다. Flutter는 아무리 사용해도 익숙해지지 않는 거 같아요 ... 아마 너무 React에만 뇌가 익숙해져 있어서 객체 기반의 구조가 너무나 어색한 걸테죠 .. 이번에도 실행 중 발생한 문제에 대한 이야기입니다.랭킹 페이지에서 상세 정보를 조회할 때 발생하는 문제1. 본인 상세 정보 조회 후 타인의 상세 정보를 조회2. 타인의 상세 정보를 조회 후 본인의 상세 정보를 조회이 두 가지 상황에서 이전에 조회했던 사용 시간 그래프 데이터가 캐싱되어 있는지 갱신되지 못하고 이전 내용이 뜨는 문제 발생 위의 사진은 해결된 상태, 즉 상세보기를 클릭한 사용자별로 조회가 정상적으로 되는 상황인데, 이전에는 무언가 문제가 있는듯 해당 사용자의 데이터가 아닌 이전 사용자의 데이..

일주일에 하나씩 꼭 블로그를 포스팅하고자 노력하고 있지만 저번주는 학회 때문에 워낙 정신이 없어서 건너뛰어버렸다.. 이전에도 계속 이야기했지만, 나는 지금 3-2학기를 맞아 프로젝트 과목을 수행 중인데, 그냥 앱을 만드는 과목이다.학교 내에서 공부 시간을 측정하여 경쟁하는 서비스를 만들어보고 있는데, 타이머 측정 중 발생하는 기기 이벤트들을 관리할 필요가 있어서 해결한 문제들에 대해 글을 적어보고자 한다. 우선, 위에 보이는 것이 타이머 화면이다.이 화면에서, 타이머를 누르면 타이머가 실행되고, 종료를 누르면 종료된다.(이까지는 정말 간단하게 구현 가능하다.) 근데 이제 여기서 문제가, 예외적인 상황을 코드로 적용하지 않았다는 것이다.타이머를 실행 중 홈 화면으로 나간다면(앱을 그냥 백그라운드로 둔다..

MVVM이라고 들어봤는가 ?아마 디자인 패턴에 대해 공부했던 사람들은 잘 알고 있을텐데, Model, View, ViewModel의 세 가지로 나누어 역할과 관심을 분리하는 방법이다. 이에 따라 당연히 파일 구조 또한 Model, View, ViewModel 세 가지로 나누어져 개발을 하게 되는데, 보통 백엔드에서 많이 사용한다.쉽게 이야기하면 View에서는 화면을 보여주는 역할만 담당하고, ViewModel에서는 View에 보여주기 위한 데이터 가공 및 전처리를 담당하며, Model에서는 데이터를 받아오는 역할을 담당한다고 봐도 무방하다. 따라서 백엔드에서는 서버에서 Model을 통해 구현해둔 데이터 형식에 따라 데이터를 관리하고, Model 안의 Repository는 데이터베이스(DB)와의 통신을 ..

yolo 를 사용해본 적이 있는가 ?!Yolo는 객체 탐지 분야에서 많이 사용되는 사전 학습된 AI 모델이다. 기본적인 Yolo는...... Yolo 공식 웹페이지를 들어가보면, 아래와 같은 역사를 가지고 있는 것을 확인할 수 있다. 우리는 기본적으로 사전 학습된 모델들을 통해 바로 사용할 수 있다.이 Yolo 모델에는 기본적으로 COCO(Common Objects in Context) 학습 데이터를 사용해 미리 학습된 모델 파일이다.(즉, COCO 데이터셋에 포함된 객체들은 기본적으로 바로 인식하게 된다는 것) 기본적으로 위와 같은 객체들을 학습시켜둔 덕에, 우리는 해당 객체는 Yolo 파일을 다운로드 받아 바로 인식할 수 있다. Yolo 모델을 바로 사용하려면, 위 사진에 있는 Yolo 11 과 같..

Flutter로 앱 개발을 하고 있다는 소식은 이전에 전해드렸었죠 ............(개인적으로 Flutter가 정말 너무 정말 싫습니다......)웹 개발을 먼저 해서 그곳에 익숙해져 있는 탓인지, 이전에 React Native를 했을 때 비약적으로 생산성이 좋았기에 Flutter로 개발할 때의 단점은 더 큰 게 맞지만.. 왜 도대체 Flutter가 크로스플랫폼 중 상위권인지... 의문을 접을 수가 없는 순간이 많습니다........ 그리고 저 만큼이나 플러터를 싫어하는 사람이 있는 거 같더라고요... 아마 제가 웹 개발 베이스라서 그런 거 같아요 ^^ 아무튼 하소연은 이쯤 하고, 오늘 할 이야기는 플러터가 예뻐 보였던(?) 순간인데요, 바로바로 모달입니다. 모달이 뭐냐!! 보통 "팝업" 이랑 "..

학교 프로젝트 과목에서 열품타와 굉장히 비슷한 무언가(?)를 만들어보고 있다 ^^ 디자이너가 디자인을 따 주었고, 그걸 토대로 UI를 개발하는 중인데 처음으로 프론트 개발하며 이거 내가 손으로 다 해야한다고 ... ? 싶은 의문이 들었다. 이런 타이머 위젯을 개발해야 하는데, 조금 찾아본 결과 Flutter에는 이런 위젯 디자인을 가지고 있는 라이브러리가 없는 거 같았다 ....(그말은 즉 직접 만들어야 한다는 뜻..............) 그래서 일단 시간을 입력받아서 원 안의 진행도 원이 표시되게끔 만들어 보았다. 우선 시간은 단순히 시:분:초 같은 시간을 표시하는 용도의 값이기 때문에 Duration을 사용했다. 조금 고민을 해 본 결과, 바깥의 큰 원과, 시간이 나타나는 Text 와, 진행도를..

상태 관리. 프론트엔드 개발에서 꽤나 중요한 것들 중 하나이다. 상태 관리는 크게 서버 상태 관리, 클라이언트 상태 관리가 존재한다.(이전 포스팅에서 두 차이점을 설명했을 것이다.) 간단하게 다시 짚고 넘어가자면, 아래와 같다. 서버 상태원격 서버나 데이터베이스에 저장되거나 관리되는 데이터로, 프론트엔드 측에서 비동기 요청을 통해 가져오거나 업데이트 할 수 있는 데이터를 의미한다.댓글, 좋아요 수, 분석 데이터 등클라이언트 상태UI와 직접적으로 관련되어 있으며, 웹 or 앱 내에서만 관리되는 데이터이다.React에서는 주로 useState로 관리한다.Form 데이터, 다크모드/라이트모트, 모달 열림 상태 등 이 중 우리는 Zustand를 사용하여 클라이언트 상태를 관리하게 된다.그럼 Usestate만으..

나는 프론트엔드를 베이스로 공부하고 있지만, 틈틈히 혼자서 모든 코드를 짜보고 싶다는 야망에 백엔드도 공부를 해가고 있다.(물론 백엔드만 진심으로 하는 사람들에 비해서는 굉장히 미미한 지식임은 분명하다.) 그렇게 서버 세팅도 해보며 docker compose라는 것을 사용해보았는데, 백엔드 친구들이 말하던 Docker와 내가 서버컴퓨터에서 사용한 Docker Compose는 도대체 어떤 차이점이 있는건지 궁금증을 가지게 되었다. Docker 우선, Docker는 컨테이너라는 독립적인 공간을 통해 애플리케이션과 인프라를 분리하여 소프트웨어를 관리하고 실행할 수 있도록 하는 플랫폼을 의미한다. 서버에서는 백엔드 개발을 한다고 했을 때, Spring, Mysql 등 여러가지 소프트웨어가 동작하게 되고, 이를 ..

React로 개발을 하다보면 위 사진처럼 사용자의 입력을 받아야 하는 상황이 등장한다.이럴 때, 우리는 두 가지 방법을 고민해볼 수 있다. 각 입력 요소들을 모두 useState로 관리하여, 각각 input 태그의 속성에 onChange로 값의 변경을 관리하는 방식입력이 모두 끝나고 Submit을 누를 때, input에 있는 값들을 긁어서 가져오는 방식 첫번째 방식은 흔히 제어 컴포넌트 방식(Controlled Component)이라고 하며, 두번째 방식은 비제어 컴포넌트 방식(Uncontrolled Component)이라고 한다. 제어 컴포넌트 방식(Controlled Component) vs 비제어 컴포넌트 방식(UnControlled Component) 제어 컴포넌트 방식은 각 input 요소의..

이번 주는 Zod에 대해서 알아보겠다.한마디로 말하자면, Zod는 Typescript 스키마(scheme)를 사용하여 유효성 검사를 수행하는 라이브러리이다. 유효성 검증(Validation)JavaScript에서는 타입을 명시하여 사용하지 않는다. let 혹은 var, const 같은 스코프만 선언을 하고 변수에 할당될 때 해당 타입을 추론하여 사용하게 된다.이러한 모호한 점을 해결하기 위해 Type을 지정할 수 있도록 커버한 것이 Typescript이며, Typescript는 컴파일 시점에 명시된 타입을 체크한다. 이런 개념이라면 Typescript 만으로도 타입에 대한 안정성이 완벽하게 보장된다고 보아야겠지만, 이는 언제까지나 컴파일 시점에서만 보장된다고 할 수 있다. 타입스크립트는 실제로 런타임에..