[React][개발기] 4. Styled-Component로 Component 만들기
Develop/React2024. 7. 16. 01:41[React][개발기] 4. Styled-Component로 Component 만들기

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

[React][개발기] 3. 우선 기초적인 것들부터 학습2(HTML, CSS, JS)
Develop/React2024. 7. 14. 17:40[React][개발기] 3. 우선 기초적인 것들부터 학습2(HTML, CSS, JS)

깃허브 주소 ▼ 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) 학습을 마쳤다. 완벽하게 공부한 것은 아니지만 '대략 이렇게 접근하..

[React][개발기] 2. 우선 기초적인 것들부터 학습(HTML, CSS)
Develop/React2024. 7. 13. 23:22[React][개발기] 2. 우선 기초적인 것들부터 학습(HTML, CSS)

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

[React][개발기] 1. React! 근데 React를 왜 써?
Develop/React2024. 7. 13. 13:36[React][개발기] 1. React! 근데 React를 왜 써?

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

[Android] Compose BOM
Develop/AndroidOS2024. 6. 25. 20:26[Android] Compose BOM

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

[Android] Dependency Injection (DI)
Develop/AndroidOS2024. 6. 14. 12:38[Android] Dependency Injection (DI)

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

[Android][Compose] State Hoisting
Develop/AndroidOS2024. 6. 13. 19:43[Android][Compose] State Hoisting

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

[Android][Compose] Compose의 레이아웃
Develop/AndroidOS2024. 6. 13. 19:14[Android][Compose] Compose의 레이아웃

개요 레이아웃하나의 컴포저블 요소에 다른 요소들이 들어갈 수 있는 것이고, 그렇게 들어간 요소들은 아무런 규칙없이 들어가는 것이 아니라 레이아웃이라는 규칙을 따라 들어가게 된다. 아래의 화면도 아무런 규칙이 없이 배치가 된 것 처럼 보이지만, 레이아웃 규칙에 따라 배치가 된 것이다. ▼  Compose에서 제공하는 레이아웃Compose의 레이아웃으로는 크게 Column, Row, Box의 3가지가 있다. ▼ 각각 모두 이름 그대로의 기능을 하기에 알아보기가 쉽다.셋 다 컴포저블이기에 내부에 컴포저블 요소들을 배치할 수 있다.그러나 다른 컴포저블들과는 다른 점은 여러 개의 컴포저블들을 배치할 수 있다는 것이다.또한 이들 모두 컴포저블이기에 서로가 서로에 중첩되어 들어갈 수 있다. 이번 포스트에서는 이 3가..

백준 2467번 용액 - SWIFT
Algorithm/PS2024. 6. 12. 12:05백준 2467번 용액 - SWIFT

문제KOI 부설 과학연구소에서는 많은 종류의 산성 용액과 알칼리성 용액을 보유하고 있다. 각 용액에는 그 용액의 특성을 나타내는 하나의 정수가 주어져있다. 산성 용액의 특성값은 1부터 1,000,000,000까지의 양의 정수로 나타내고, 알칼리성 용액의 특성값은 -1부터 -1,000,000,000까지의 음의 정수로 나타낸다.같은 양의 두 용액을 혼합한 용액의 특성값은 혼합에 사용된 각 용액의 특성값의 합으로 정의한다. 이 연구소에서는 같은 양의 두 용액을 혼합하여 특성값이 0에 가장 가까운 용액을 만들려고 한다.예를 들어, 주어진 용액들의 특성값이 [-99, -2, -1, 4, 98]인 경우에는 특성값이 -99인 용액과 특성값이 98인 용액을 혼합하면 특성값이 -1인 용액을 만들 수 있고, 이 용액의 특..

백준 2437번 저울 - SWIFT
Algorithm/PS2024. 6. 12. 11:58백준 2437번 저울 - SWIFT

문제하나의 양팔 저울을 이용하여 물건의 무게를 측정하려고 한다. 이 저울의 양 팔의 끝에는 물건이나 추를 올려놓는 접시가 달려 있고, 양팔의 길이는 같다. 또한, 저울의 한쪽에는 저울추들만 놓을 수 있고, 다른 쪽에는 무게를 측정하려는 물건만 올려놓을 수 있다.  무게가 양의 정수인 N개의 저울추가 주어질 때, 이 추들을 사용하여 측정할 수 없는 양의 정수 무게 중 최솟값을 구하는 프로그램을 작성하시오.예를 들어, 무게가 각각 3, 1, 6, 2, 7, 30, 1인 7개의 저울추가 주어졌을 때, 이 추들로 측정할 수 없는 양의 정수 무게 중 최솟값은 21이다. 입력첫 째 줄에는 저울추의 개수를 나타내는 양의 정수 N이 주어진다. N은 1 이상 1,000 이하이다. 둘째 줄에는 저울추의 무게를 나타내는 N..

image