개발일지38 [원신 X친소표 사이트 제작기] 5. 다중 체크 리스트픽 만들기 #React 다중 Check List 메뉴미리 체크리스트를 주고, 원하는 만큼 골라서 추가할 수 있는 리스트픽 컴포넌트가 필요합니다.트위터 활동은 동시에 다양하게 할 수 있기 때문에, 하나를 체크했다고 다른 체크가 풀리는 게 아니라, 다중으로 체크가 되어야 합니다. 지금부터 다중 체크리스트 컴포넌트를 제작하겠습니다. CheckList 컴포넌트 setXType(e)} />CheckList 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. CheckList 소스코드import { FormTextContainer, FormText, ChecklistText } from "@/styles/Texts";import { CheckboxInput, CheckboxLabel.. 2024. 12. 9. [원신 X친소표 사이트 제작기] 4. Dropdown 리스트픽 만들기 #React Dropdown 메뉴성별과 연령대 정보, 원신 서버 정보를 입력할 때,사전에 지정된 목록을 사용자가 쉽게 선택할 수 있도록 만들려고 합니다. 이때 유용한 디자인이 '드롭다운 메뉴'입니다.성별의 경우 '남자, 여자, 비공개'를 미리 개발자가 지정한 다음 드롭다운 메뉴로 제공하면, 사용자는 쉽게 목록에서 자신에게 해당되는 걸 선택하면 끝입니다. OneLineDropdown 컴포넌트 setGender(e.target.value)} /> setAge(e.target.value)} />OneLineDropdown 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. OneLineDropdown 소스코드import .. 2024. 12. 4. [원신 X친소표 사이트 제작기] 3. 한 줄/여러 줄 TextInput 만들기 #React 한 줄 TextInput 컴포넌트 만들기X의 닉네임과 ID, 원신의 최애캐와 UID 정보를 받기 위해 입력창이 필요합니다.여러 줄일 필요는 없고, 딱 한 줄의 TextInput 컴포넌트를 만들어보겠습니다. OneLineTextInput 컴포넌트// src/app/pages.js setNick(e.target.value)} /> setXId(e.target.value)} />OneLineTextInput 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. OneLineTextInput 소스코드import { TextInput } from "@/styles/Inputs";import { FormText, FormTex.. 2024. 11. 30. [원신 X친소표 사이트 제작기] 2. 이미지를 불러오기/미리보기 구현 #React 프로필(바이오) 이미지 표시 기능어떤 SNS든지 각 계정마다 프사가 존재하고, X역시 마찬가지입니다.X친소표를 만든다면 프사(바이오)역시 꼭 들어가야 하기에, 이미지를 받아올 수 있는 기능이 필요합니다. Bio 컴포넌트// src/app/page.jsconst [bio, setBio] = useState(null);우선 Home 컴포넌트(Next.js app router 기준)에, 프사 이미지를 담을 bio state를 생성합니다.초기값은 null로 지정합니다. 그리고 Bio 이미지를 받아오고, 미리보기 이미지를 출력할 컴포넌트를 제작합니다.// src/components/Bio.jsimport { FormText } from "@/styles/Texts";import { useState, .. 2024. 11. 28. [원신 X친소표 사이트 제작기] 1. 제작한 이유와 반응 살펴보기 X(트위터)의 트친소/X친소 문화X가 SNS 중 음지 중의 음지로 불리긴 하지만, 그래도 덕질 친구를 사귀기에는 이만한 곳이 별로 없기도 합니다.인스타나 다른 SNS에 비해 익명성이 강해서, 더욱 덕질을 공유하기도 좋고, 자유로운 검색기능을 통해 팔로워도 모으기 쉬운 구조입니다. 이를 이용해서, X친소/트친소 문화가 있습니다.비슷한 장르를 덕질하는 친구들을 모으는 문화로, 미리 'X친소표/트친소표'에 자신의 덕질이나 트위터 성향을 작성한 후, 나랑 친구가 되고 싶은 사람은 이 표를 보고 다가오라는 문화입니다. 원신은 서브컬쳐계의 엄청난 강자인 만큼, X친소표의 종류도 많고, 이용하는 사람도 정말 많습니다. 하지만 이 표의 단점이 있습니다.1. '이미지 파일을 다운받아서 직접 수정해야 한다.'이미지 .. 2024. 11. 27. [굿위시 업데이트] 1. 플러터 앱에 구글 드라이브 백업과 복원 기능 구현하기 출시 이후, 굿위시 데이터를 백업하고 복원하는 기능이 있으면 좋겠다는 판단을 했습니다.원래는 '로컬 스토리지'를 이용해서 구현했는데, 출시과정에서 권한 문제르 반려를 당한 탓에 해결 방법을 다시 고민했습니다.그때 '구글 드라이브'가 떠올랐고, 바로 착수했습니다. 백업과 복원 페이지메인페이지에서 프로필 버튼을 누르면 프로필 페이지로 이동합니다.프로필 페이지에 '백업 & 복원' 버튼이 있습니다. 이걸 클릭하면, 백업과 복원을 지원하는 버튼이 있습니다.구글 드라이브를 통해 진행됩니다. 사전 설치 패키지 google_sign_in: googleapis: googleapis_auth: http: path:pubspec.yaml에 위 패키지들을 입력한 후 설치합니다. 구글 드라이.. 2024. 11. 26. [굿위시 제작기] 19. 구글 플레이스토어 출시과정 - 테스터 20명 모집하고 14일 기다리기 / 최종 스토어 출시 드디어 마지막 과정인 '테스터 모집하고 테스트 진행하기 / 최종 출시하기' 차례입니다. 테스터 모집하는 방법앱 번들 파일을 제출하고 나면, Google Play에서 테스터에게 제공 상태가 됩니다. 테스터를 구하는 방법은 다음과 같습니다.1. 안드로이드 휴대폰과 Google play 계정(구글 이메일)을 소지 중인 사용자를 모집합니다.2. 위 페이지에서 구글 이메일을 등록합니다.3. 테스트 참여 방법 항목의 '링크 복사'를 한 후, 해당 링크를 테스터에게 제공합니다.4. 테스터가 링크를 접속하면, 플레이스토어를 통해서 베타버전 앱을 다운받습니다.5. 앱 다운과 동시에 자동으로 테스터 등록이 완료됩니다. 한 번 등록된 이메일 목록에 계속 새로운 테스터를 추가할 수 있습니다. 테스터 20.. 2024. 11. 17. [굿위시 제작기] 18. 구글 플레이스토어 출시과정 - 본인확인, 비공개 테스트 버전 앱 번들 제작하기 지난 과정에 이어서, 이번엔 '본인 확인, 테스트 버전 앱 번들 빌드'를 등록할 차례입니다. 개발자 본인 확인 인증앱을 출시하기 전까지 꼭 본인확인을 마쳐야 합니다. 그런데 PASS앱을 통하는 본인확인이 아니라, '주소지 증빙 서류'를 필요로 합니다.저는 주민등록등본(초본)을 스캔해서 보냈습니다. 주소 형식이 알맞지 않을 경우, 수정된 주소를 추천합니다.수정한 후 제출하면, 며칠 내로 개발자 인증을 해준다고 합니다. 만약 인증과정에 문제가 생길 경우, 메일로 안내를 해줍니다. 비공개 테스트 플레이스토어는 앱 출시 전에 꼭 '비공개 테스트'를 진행해야 합니다. 알파 테스트 버전을 생성한 후, 앱 번들파일(aab)을 제출해야합니다.지금부터 이 파일을 만들기 위해 필요한 .. 2024. 11. 16. [굿위시 제작기] 17. 구글 플레이스토어 출시과정 - 스토어 기본 정보 등록 지난 과정에 이어서, 이번엔 '스토어 기본 정보'를 등록할 차례입니다. 앱 카테고리와 개발자 연락처우선 앱의 카테고리를 지정해야 합니다. 많은 카테고리가 있습니다. 굿위시는 굿즈 관리앱이다보니 어떤 카테고리에 넣으면 좋을지 고민을 많이 했는데, 그나마 '라이프스타일'에 맞다고 생각해서 해당 카테고리로 지정했습니다. 연락처도 입력하라고 하는데, 사실 이메일만 입력하면 됩니다.여기에 추가로 제 블로그 링크도 등록했습니다. 등록정보 애셋플레이스토어에 출력될 '앱 이름과 설명'을 입력합니다. 여기서 작성한 정보는 위처럼 플레이스토어에서 사용자들이 확인할 수 있습니다.설치 전에 확인하는 부분인 만큼, 이해하기 쉬우면서도 핵심이 되는 내용들로 채웁니다. 앱.. 2024. 11. 15. 이전 1 2 3 4 5 다음