깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요목표 로그인 페이지를 만들기 전, `RoutePaths`의 구조와 `NavBarData`를 보다 효율적으로 사용할 수 있게 구조를 바꾸기로 했다. 기존에 사용하던 `navBarData`를 매번 정의해놓고 사용할 수 없기에 이를 보다 효율적으로 작성하고 이용하려고 한다.  RoutePaths와 NavBarData목표 이전 포스트에서 `RoutePaths`를 만들고 `NavigationBar` 컴포넌트도 Stateless하게 만들어 두었다. 하지만 RoutePaths..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com  개요목표 메인 화면의 컴포넌트는 어느정도 다 만들었다고 생각이 들어 약간의 수정을 한 뒤, 라우팅을 넣기로 했다. 또한 현재 매직넘버와 반복되는 세세한 코드들이 너무 많다고 생각되어 전역 스타일과 자주 사용되는 값들을 관리하는 객체를 만들기로 했다. 또한 이제와서 코드를 다시 훑어보니 Stateless하지 않은 컴포넌트가 몇 보여 이 역시도 수정하기로 했다. 그래서 이번 목표는 전역 스타일 수정, Stateless하게 수정, 라우팅이다.  전역 스타일 수정 기존에 ..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 글의 SquareButton과 SquareButtonContainer의 구조에 대한 고민 참고 ▼ [React][개발기] Styled-Component로 Component 만들기개요 대략적인 학습이 끝났으니 이제 본격적으로 개발에 들어가려고 한다. 시행착오를 겪으면서 배우면 더 기억에 잘 남아서 무작정 만들기로 했다. 이번 목표는 네비게이션 바, 메인 버튼 2개noguen.com  목표 전에 Styled-Component로 메인 버튼 컴포넌트를 만들던 도중 ..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com  개요 대략적인 학습이 끝났으니 이제 본격적으로 개발에 들어가려고 한다. 시행착오를 겪으면서 배우면 더 기억에 잘 남아서 무작정 만들기로 했다. 이번 목표는 네비게이션 바, 메인 버튼 2개을를 만드는 것이다. 메인 화면의 요소부터 만들고, 이후에 리스트 셀을 만든 후, 페이징, 그리고 네비게이팅에 대해 알아보려고 한다. Flutter나 기존에 잘 아는 프레임워크 혹은 라이브러리를 사용했다면 아마 폴더 구조, 디자인 패턴, 네트워킹 방식, 데이터 처리 방식 등등 기본적..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 포스트 참고 ▼ [React][개발기] 우선 기초적인 것들 부터 학습(HTML, CSS)개요이전 글 참고 ▼ [React][개발기] React! 근데 React를 왜 써?개요 웹을 시작하게 된 이유 기존에 모바일로 개발하던 서비스에 배포 문제가 발생하면서 다 완성을 해도 배포에 시간이 걸리게 됐noguen.com 학습 현황과 방향 이전 포스트에 이어서 기초적인 것들(HTML, CSS, JS) 학습을 마쳤다. 완벽하게 공부한 것은 아니지만 '대략 이렇게 접근하..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 글 참고 ▼ [React][개발기] React! 근데 React를 왜 써?개요 웹을 시작하게 된 이유 기존에 모바일로 개발하던 서비스에 배포 문제가 발생하면서 다 완성을 해도 배포에 시간이 걸리게 됐다. 그래서 그 동안에 배포가 빠르고 모바일 웹, 혹은 데스크noguen.com 본격적으로 앱으로 만들어져있던 기본 서비스를 웹 버전으로 만들려고 했으나, 문제가 있었으니... 바로 필자가 웹 개발을 한 번도 안해봤다는 것이다. 이전 글은 웹 개발을 공부하기 위한..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com  개요 웹을 시작하게 된 이유 기존에 모바일로 개발하던 서비스에 배포 문제가 발생하면서 다 완성을 해도 배포에 시간이 걸리게 됐다. 그래서 그 동안에 배포가 빠르고 모바일 웹, 혹은 데스크톱 웹에서도 쉽게 접근할 수 있게 웹으로 배포하고자 했다. 요즘 세대는 모바일로 접근이 빠르지만, 나를 비롯해 나보다 나이가 조금 있는 윗세대는 아직은 컴퓨터로의 접근이 조금 더 편한것 같았다. 모두가 즐길 수 있는 컨텐츠인데 특정 연령층만 접근이 빠른 것은 서비스의 목적과 맞지 않..

개요Compose로 안드로이드 앱 개발을 할 때 한 가지 불편한 점이 있었다.바로 아래와 같이 앱 모듈 `build.gradle.kts`에 라이브러리를 추가할 때, 버전을 따로 입력해줘야한다는 것이었다. ▼ 매번 버전을 입력해서 추가를 하니까 최신 버전이 나올 때 마다 버전을 입력해줘야하고, 내가 현재 최신버전을 사용하고 있는건지 의문이 들기도 했다.물론 항상 최신버전을 유지하는 것이 좋지 않을 수도 있지만, 웬만하면 이전 버전의 버그가 고쳐진 버전이 배포되기 때문에 특별한 이유나 해당 라이브러리의 세세한 부분까지 알고 있는게 아니라면 최신버전을 사용하는게 좋지 않나 싶다. '자동으로 업데이트가 될 법 한데...' 라는 생각을 하던 도중 Compose BOM이라는 것이 있다길래 이에 대해 알아보게 됐다...

개요안드로이드에서 너무나도 많이 보이는 DI안드로이드 개발 공부를 하다보면 DI라는 용어는 빈번하게 등장한다.소프트웨어 공학에서 나온 용어라서 안드로이드 외의 다른 개발 프레임워크들에서도 많이 사용하기에 엄청나게 생소한 용어는 아니지만, 안드로이드에서는 이를 관리해주는 Hilt라는 라이브러리가 있어 굉장히 많이 거론되는 듯 하다. ▼ StateHoisting을 배우고, State를 Hoisting해줄 ViewModel을 인식하고, ViewModel을 UI의 어느 부분에 저장을 할 지 알아보던 중 DI와 Hilt에 대한 선행 지식이 없으면 안되었기에 더 자세하게 알아보게 되었다.   Dependency InjectionDependency Injection이란Dependency Injection, 줄여서 D..

개요Compose의 Stateless선언형 UI인 Compose의 장점은 Stateless함에 있다.UI와 State의 상호 의존성을 끊을 수 있다면, UI요소를 재사용하여 더 효율적으로 코드를 작성할 수 있다.또한 UI를 개별적으로 테스트 할 수 있어, 유닛 테스트에 용이하다. 요약하자면 Compose Stateless의 장점은 아래의 두 개가 된다.UI 재사용성UI 테스트로 Unit Test 하지만 State와 종속되는 요소도 있다그러나 Stateless를 유지하고 싶지만, State를 UI에 저장을 해야만 할 때가 있다.Compose 요소 자체에 State가 저장되게 설계가 되어 나온 것으로 `TextField`가 있다. 아래와 같은 식으로 `remember` 키워드를 이용하여 상태를 저장해줘야한다..