'분류 전체보기' 카테고리의 글 목록

2024.12.18· 개발/📝 TIL

마침내 앱 스토어에 앱 'T.o.T'가 출시되었다. expo를 사용해서 빌드한 app이 앱스토어에 릴리즈 된 과정을 상세히 기록해두고 싶다는 욕심이 들었지만 한 단계씩 밟아갈수록 터지는 분노에 머리가 하얗게 변해서 기록을 많이 못 남긴 것 같다. 우선 앱을 제작하고 출시하면서 느낀 것들을 적어보려고 한다. 앱 제작하게 된 계기T.o.T의 시작은 단순하게 '하루에 30분은 집중해서 책을 읽어야겠다' 라는 다짐이었다. 스톱워치로 하루 동안하는 다양한 활동에 대한 시간을 기록해 보자는 취지였고 그 첫 스텝은 nextjs로 제작한 웹 플랫폼이었다. 어차피 내가 쓸 거니깐 필요한 기능을 더해서 빠르게 제작했고 계속 브레인스토밍을 하면서 목표를 잡아갔다. 어느 정도 내가 원하는 기능을 더한 결과물이 나왔고 처음..

(ios) EAS로 expo 빌드하고 testFlight에 등록하기 (feat.오류)

2024.11.22· 개발/React-Native

내가 쓰고 싶은 서비스를 만들고자 하는 마음에 시작한 거였는데 너무 많은 시간이 걸렸던 것 같다. 1. 필요한 것들 - Apple Developer 멤버십 가입 - Expo 계정 및 프로젝트 2. Expo로 빌드하기Apple developer에 identifiers를 등록하고 App Store Connect에도 앱 정보를 등록하기 위해서는 bundler ID 가 필욯다 번들ID를 어디서 찾는건지 몰라서 고민하다가 그냥 바로 EAS 로 배포를 시도하니 배포를 하면서 생성할 수가 있었다. EAS라는 클라우드 빌드 서비스인데, Expo Application Service의 준말입니다. EAS build는 기기에 설치하는 앱 바이너리를 구축하기 위한 호스팅 서비스로 직접 복잡한 작업을 거치지 않아도 앱..

앱스토어 싸우자!

2024.11.08· 개발/Etc...

Next.js를 사용해서 웹앱으로 제작했던 앱을 React-native를 사용해서 새로운 디자인을 적용해서 빌드했다. 정식으로 앱스토어에 올리고 싶어서 apple developer 사이트에 등록을 하려고하는데 젠장, 내가 쓰는 계정이 미국계정이라서 1차적으로 실패, 한국 계정으로 로그인해서 진행하려는데 이번엔 카드가 안되네,그래서 쓰지도 않는 카카오페이를 등록해서 연결했는데 이것도 안된다. 반나절 이상을 붙잡고 있는데 아무것도 진전된게 없다. 진짜 환장할 노릇... apple developer 등록이 이렇게 어려울 일인가... 이후의 일을 써보자면 ... 이전에는 계속 모바일에서 시도를 했었는데 이번에는 맥북에서 결제를 시도했더니 성공했다. 그런데 24-48시간내에 등록이 완료되었다는 알림 이메일이 ..

[react-native] weekly calendar 넣어보기

2024.10.31· 개발/React-Native

웹으로 쓰고 있던 ToT를 app으로 옮기기로 결정하면서 UI부분도 많이 변경되었다. 그 과정에서 home에 weekly 캘린더를 넣게 되었는데 React-Native는 처음이기도하고 감이 잘 안 잡혀서 캘린더 라이브러리를 찾아보다가 사용하게 된 calendar-strip 구현이 필요한 기능weekly로 보여야함요일별로 클릭이 가능해야함요일이 클릭되면 해당 요일의 데이터들이 보여야함화살표를 클릭하면 주별로 이동이 되어야함데이터가 있는 요일은 요일에 표시가 되어있어야함 사용한 라이브러리 내가 필요했던 모든 기능이 손쉽게 구현이 가능하고 다양한 demo 버젼이 만들어져있어서 사용 방법이 상세히 설명되어있답니다 https://www.npmjs.com/package/react-native-calendar..

(Mac) localhost 웹 모바일에서 확인하기

2024.09.29· 개발/Etc...

작업하는 프로젝트가 당연하게 반응형을 지향하기 때문에 작업하는 틈틈히 chrome에서 개발자모드 모바일 사이즈로 체킹하면서 작업하는데 dropdown이 안 된다는 피드백을 받아서 작업을 진행중인 서버를 모바일에서 열어서 체킹하는 작업을 진행했다.localhost를 사파리에서 열어볼 수 있는 방법에는 두가지 정도가 있는데, 네트워크 IP 주소로 모바일에서 띄우기터미널에서 맥은 ifconfig, 윈도우는 ipconfig를 검색해서 ip 주소 찾아서 port와 붙여서 모바일 사파리에서 띄우기 예를 들어 xxx.xx.x.xx:3000(port) 시스템 환경설정에서 IP 주소 확인하기mac 기준 시스템설정 > wifi > 세부사항 을 클릭해보면 ip주소를 확인할 수 있다. 간단하쥬? 틈틈히 수정작업하면서 ..

type vs interface 는 뭐가 다르지?

2024.09.18· 개발/JavaScript

예전에 언젠가 면접을 보면서 들었던 질문 중에 하나이다. "typescript에서 type과 interface의 차이점을 아시나요?" 공통점type타입에 대한 이름을 지어주기 위해 사용한다. type Home { living : string; bed : string;} interfacetype과 동일하게 타입에 대한 이름을 지어주기 위해 사용한다. interface Home{ living: string; bed: string;} 둘 다 타입을 지정하는 방법 중에 하나로 굉장히 유사하다. 둘 중에 하나만 선택해서 사용해도 되지만 차이점도 존재한다. 차이점 1. 확장 방식 비교 interface 는 extends라는 것을 사용해서 확장할 수 있다. 기존의 interface에 추가해서 확장된다. i..

upwork를 통해서 개발 프로젝트 해 본 후기

2024.09.02· 개발/Etc...

구직의 기간이 점점 길어지면서 이러저러한 이유로 upwork라는 프리랜서 플랫폼을 통해서 개발 프로젝트를 진행했다. 이전에 upwork라는 플랫폼을 알게 되면서 '한국어'가 필요한 간단한 오디오 녹음과 같은 파트타임 일을 한 적이 있었는데 개발 프로젝트에 도전해 보는 건 처음이었다. 작업 후기 react 혹은 Next.js를 쓰는 프로젝트를 찾았고 프로젝트 액수가 좀 큰 것 위주로 보았다. 왜냐면 이전에 했던 파트타임 일이 일정 금액이 되지 않아서 출금을 할 수가 없었기 때문이었다. 그 일정금액을 만들기 위해서 조금 큰 금액의 프로젝트가 필요했다. (upwork는 일정 금액이 넘어야 수입을 출금할 수 있다). 운이 좋게 인도네시아 클라이언트에게 고용이 되어서 간단한 웹 사이트를 프로트엔드 파트 작업을 ..

컴포넌트 성능 최적화를 위한 useMemo 사용법

2024.08.13· 개발/React

현재 작업 중인 프로젝트에서 받은 코드 피드백을 정리하다가 useMemo를 처음으로 사용해봤다. 리액트를 주로 사용하는 프론트엔드로 일하면서 면접때나 마주하던 useMemo라는 리액트 훅. useMemo ? 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 리액트 훅이다. 어떻게 컴포넌트의 성능을 최적화해주는냐하면은 보통 예시로 연산작업을 많이 든다. 계속해서 동일한 연산이 일어나는 작업에는 새로 처음부터 연산할 필요없이 디펜던시가 있으면 먼저 현재 의존값과 이전의 외존값을 비교하여 변경되었는지 확인합니다. 새로운 동작이 일어났을 때 기존의 값을 기억하고 있다가 거기서 부터 연산을 시작한다. 메모된 값을 저장하기 위해 메모이제이션 캐시를 사용합니다.캐시는 메모된 값을 나타내는 키와 종속성을 나타내는 값..

2024년 상반기 회고 - 취준라이프 | 프리랜서

2024.07.14· 개발/Etc...

벌써 2024년의 반년이 지나갔다. 연초부터 이런저런 한 일들이 많았고 그게 계기가 돼서 스스로 개발자로서의 커리어와 자아성찰을 많이 했다. 취준 라이프 1월에 실직을 하고 현재 7월까지 6개월째 계속 되고 있는 취준생활은 개발자로서 현실을 살아가는 현대인으로써 자신감, 자존감 모두 박살이 나고 있다. 이력서를 제출한 건 셀 수 없을 정도인 것 같고 그래도 매달 면접을 최소 한 번은 본 것 같다. 내정자가 정해져 있던 건지 나에게 아무것도 안 물어보던 면접부터 면접관분들이 엄청 철저하게 준비해 오신 힘든 면접까지 정말 다양한 면접을 경험했고, 면접 전의 커피챗도 몇 차례 진행했었다. 면접은 잘 봐도 떨어질 수 있고, 못 해도 떨어질 수 있는 것이라고 생각하지만 나는 그냥 잘 모르는 사람 같다는 생각..

nextjs shadcn/ui Drawer 방향 전환하기

2024.06.13· 개발/Next.js

shadcn ui 에서 제공하는 Drawer DrawerA drawer component for React.ui.shadcn.com shadcn ui 에서 제공하는 Drawer 의 방향은 아래에서 위로 올라온다. 팝업 형태로 띄우는 것도 예시로 보여주기는 하지만 나는 커스텀해서 오른쪽에 스무스~ 하게 나오게 구현해야하는 상황이였다. 그리고 현재 상황에서는 오른쪽에서 나오는거지만 디자인이 바뀌면 또 어떻게 될지 모르는 상황이기 때문에 direction을 변수로 넣어서변경할 수 있는 방향을 찾았다. shadcn/ui는 번들되지 않은 컴포넌트 소스 코드를 프로젝트에 의존성으로 추가하지 않고, 말 그대로 복붙해서 컴포넌트 코드를 온전히 사용할 수 있다. 이 포인트가 중요하다. 디펜던시에 들어가는게 아니..

nextjs shadcn/ui 에서 미디어쿼리 작업하기

2024.06.10· 개발/Next.js

반응형 웹사이트 제작은 이제 그냥 필수이다. 미디어쿼리 작업을 할 때 항상 브레이크 포인트를 잡는 것이 애매하다라고 생각하는데우선은 768px 최소로 했을 경우를 두고 작업에 들어갔다. shadcn/ui 이란?Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트. 컴포넌트 라이브러리가 아닌 앱에 copy and paste 하여 재사용 가능한 구성요소 모음이다. npm install 을 하여 종속성 설치를 하지 않는다는 이야기다. tailwind css를 기반으로 하고 있다. 커스텀을 할 땐 tailwind css 법칙을 따르면 된다. 사용하기 위해서는 Nextjs , tailwind css 가 설치되어있어야한다. 다 각설하고 shadcn/ui를 쓰면서 미디어쿼리 작업을 ..

Nextjs14 + nextui를 사용해서 progress bar 만들기

2024.06.05· 개발/Next.js

개인적인 필요로 인해서 만들기 시작했던 타임 트래킹 웹. 독서하는 시간을 만들어보고 측정해보겠다고 시작한 것이였는데 지난 달 기록과 현재의 기록 비교 / 또는 목표 시간을 정해두고 현재 얼마나 이뤘는지 체크하는 부분까지 더 해보고 싶어졌다. 그 표현을 progressbar로 하면 직관적일 것 같다고 생각했고, nextui를 사용해서 간단하게 적용해보기로 했다. 👇🏻 NextUI 공식문서 https://nextui.org/ NextUI - Beautiful, fast and modern React UI LibraryBeautiful, fast and modern React UI Librarynextui.org nextui를 적용하기 위해서는 공식문서를 보면 굉장히 빠르게 해결할 수 있다. 굉장히 ..

티스토리툴바