[개인 프로젝트] IOS 웹뷰 앱 '비가 오기 전에' 회고 - 무식한 자가 용감하다

결과물 앱스토어 URL 14일간의 개인 프로젝트가 드디어 끝이 났습니다. 어쩌다 보니 갑자기 계획에 없던 프로젝트를 진행하게 되었습니다. 하고 싶은 게 생기면 바로 행동부터 하는 편인데 이번엔 그게 이 앱을 만들어내는 것이었습니다. 퇴사 이후 이사 일정이 있었기에 신경 쓸 것이 많아 그전까지는 사부작사부작 진득하니 하고 싶던 공부를 해야겠다 하며 무직 백수의 기간을 보내고 있었습니다. 날이 좀 풀린 어느 날 커피를 사러 가기 위해 대충 후드집업을 입고 나왔는데 세상에 너무 추운 겁니다. '아.. 엄청 춥네.. 몇 도야..' 평소에도 귀찮아서 날씨를 안 보고 다니다 보니 봉변당하는 일이 잦았는데, 문득 비 오기 전에 우산 챙기라고 알려주고, 기온에 맞는 옷차림도 위젯으로 볼 수 있으면 좋겠다는 생각이 들었..

→2024.03.22

Code/TypeScript

[React/typescript] 재사용 가능한 동적 타입 리스트 컴포넌트 만들기 (generic type/ render props pattern)

담당하고 있는 서비스가 만들어진지 곧 1년이 다 되어갑니다.MAU 5천만의 업계 최고 플랫폼을 만들어 내고야 말겠다는 꿈을 꾸며 항상 코드를 작성할 때 먼 미래를 생각해 작성했던 것 같은데 각오가 무색하게 3개월만 지나도 '왜 이렇게 했지'라는 생각이 듭니다.그땐 최선이라 생각했던 것들이 지금 와서는 아쉬운 게 투성이인지라 개발 범위가 겹치는 것이 있다면 본 일정에 무리 없는 선에서, 또는 개선해야만 하는 것들은 공유하며 마감 기한을 늘려보는 식으로 거슬리는 것들을 조금이라도 개선해나가며 작업하는 습관을 가지게 된 것 같습니다. 요즘엔 리액트 디자인 패턴을 공부하며 체화 시키기 위해 노력 중인데 신기한 게 공부하다 보면 '어 이거 DynamicInput 컴포넌트에 쓰면 딱이겠다', '이거 온보딩 컴포넌트..

→2023.12.31

Code/Dev environment

[package] patch-package로 오픈 소스 수정하여 사용하기

상황 현재 서비스의 클라이언트는 Graphql 도입과 동시에 apollo-client 가 적용되어 있는데, 이 환경을 조금 더 생산성 있게 관리하기 위해 graphql-code-generator 와 플러그인을 사용해 gql 쿼리 작성 후 스크립트 실행 시 쿼리에 해당하는 커스텀 훅을 아폴로 훅과 결합하여 별도로 생성해줄 수 있도록 되어있다. 문제는 그동안은 React의 Suspense 기능을 사용하지 않고 있다가, 신규 메인 페이지를 작업하던 중 API 의 응답 속도 지연으로 컴포넌트 별 스켈레톤 UI 를 적용해야만 하는 상황이 왔다. 기존 아폴로 훅을 사용해 Suspense 를 적용하려고 하니 작동이 되지 않아 찾아보니, https://www.apollographql.com/docs/react/data..

→2023.10.01

Code/React - Node

[React] AF 플러그인으로 애니메이션 간단 구현 (lottie / bodymovin / adobe effects)

오늘은 video 태그의 autoplay 가 아이폰 저전력 모드 (iphone low power mode) 에서는 작동하지 않는 문제를 애니메이션을 구현하는 방법으로 해결하며 FE-designer AF 협업 세미나를 진행했던 내용을 포함해 작성하려고 한다. 상황 기존에는 메인에서 adobe-effects 를 사용해 만들어진 gif / video 형식을 가진 에셋들이 여러 개 포함 되어있었다. 다소 복잡한 애니메이션들이 많은 페이지였으나 당시 리소스를 생각해 현련한 애니메이션이 들어가는 부분은 1차로 gif 파일로 받았던 기억이 난다. gif로 받고 나니 용량이 큰 탓에 렌더링 속도에 이슈가 있어 이런 저런 방법을 찾아보다가 파일 형식을 webm 과 mp4로 바꾸고 렌더링 속도에 문제가 없을 정도로 용량도..

→2023.09.17

Code/React - Node

[React/node] 하드코딩 방어하기 _ notion 문서 react 렌더링 (html-react-parser)

개발자 스타일마다 다를 순 있지만 개인적으로는 하드코딩을 피하기 위해 정말 노력하는 편이다. 데이터가 변경될 가능성 + 추후 유지보수 + 확장 가능성 등등을 고려하며 추후 데이터의 변경이 있을 때에도 간단하게 변경할 수 있는 구조를 생각하며 구현하는 편인데 처음엔 조금 공수가 드는 것 처럼 보여도 결국 조금만 지나도 큰 효용을 느낄 수 있다고 생각하기 때문이다. 문제 서비스 릴리즈를 앞두고 있던 때에 다양한 이용약관이 추가되어야 하는 상황이었는데 이용약관들은 법적 검토 등의 과정을 통해 다소 여러가지 형태의 각기 다른 레이아웃을 가진 채 노션 (notion)에 정의되어 있었고, 약관을 보여주는 공통 모달 컴포넌트 디자인은 타이틀, 소제목, 본문, bullet, numbering, 여백 등등이 따로 커스텀..

→2023.09.10

Code/React - Node

[React/node] 한글 욕설 필터링 기능 구현하기 (node csv 파일 변환)

결과물 미리보기 자체 로그인 기능을 위한 기획 회의에 참여해 한창 얘기를 나누던 도중 나 : 닉네임에 욕설 필터링이 필요하지 않을까요? PM : 오!!!!!!! 아~~~~~ 예 그래야겠네요 나 : 어느정도까지 커버할 수 있는지 감이 잘 안 와서..리서치 후에 내용 공유 드리겠습니다 여러 정보를 찾아 보았을 때 욕설 필터링은 자체적으로 자연어 처리를 이용해 고도화된 엔진을 사용하여 검수하는 방법과 기타 라이브러리를 사용하는 방법이 있었는데 우선 자연어 처리를 하는 것은 현 상황에 적절하지 않은 방안이었기에, 라이브러리를 찾아보기 시작했다. bad-words (support only english) https://github.com/web-mech/badwords GitHub - web-mech/badwor..

→2023.09.09

Code/React - Node

[React / Typescript] IOS safari 상태바 색상 변경 / 커스텀 훅을 이용한 동적 처리

문제 : 반응형 웹 서비스 구현 중 IOS의 사파리 브라우저 환경에서 상단바가 페이지 배경색과 일치하지 않음을 확인 브라우저의 상단바 색상을 해당 페이지의 배경색과 동일하게 변경을 해야 했고, 페이지 별 상이한 배경을 갖고 있는 경우가 있기에 이를 핸들링할 수 있어야 했다. 1. 상태바 색상 변경 (change safari status bar color) - index.html html 파일 내부에 meta 태그를 위와 같이 작성할 경우 content의 색상을 고정으로 가지고 있을 수 있다. 나는 페이지 별로 다른 색상의 상태바를 보여주길 원했기에 커스텀 훅을 생성했다. 2. Custom hook 커스텀 훅 추후 유지 보수를 생각했을 때, 기본으로 설정된 흰색이 아닌 다른 색상이 필요한 경우만을 예외로 ..

→2022.12.09

Code/React-Native

[React native / 리액트 네이티브] Grid 구현 방법, FlatList, numColumns, nativeEvent

자사 서비스는 웹을 기반으로 작업이 되어있었다. 그 후 어플을 런칭하면서 서비스 확장을 기대했고 1차적으로 webVeiw를 통해 안드로이드, ios 에서 볼 수 있도록 리액트 네이티브를 사용했었는데 webView로는 ux적인 경험이 부드럽지 못하다는 내부 결론이 도출되었고, 리액트 네이티브 (react-native)로 서비스를 모두 옮기는 작업을 진행하고 있는 단계이다. 완전히 몰두해서 일하기까지는 일주일 정도의 적응기를 가졌는데, 네이티브를 셋팅하는 데 너무 많은 변수 + xcode의 버릇없음 + 맥북의 대환장 먹통 파티에 3일정도를 썼고, 나머지 이틀은 ui가 복잡하지않은 페이지들을 작업하면서 공식문서를 계속 읽어가면서 작업했다. 그렇게 간단한 페이지 작업을 끝낸 후 grid 형태의 디자인을 구현했어..

→2021.07.17

Today I Learned

TIL 2021.03.29 ~ 04.02

TIL이라 쓰고 일기라 읽는다. 사진은 오늘 타코집에서 먹은 비프 치아 어쩌고 블로그는 나한테 일기또는 지식 메모장 같은 느낌이라 그냥 주절주절 의식의 흐름대로 글을 써놓곤 하는데 이상하게 방문자가 많다. 누구세요? 😂😂😂 Code 작성글보다 주절주절 TIL이 더 조회수가 높을 때가 있어서 매우 민망하다. 뭐 하여튼 이번 일주일이 어떻게 지나갔는 지 잘 기억이 안난다. 특정 키워드로 인스타 정보를 크롤링하여 렌더링하는 패이지를 제작했고, 블로그 검색 결과를 react-slick 라이브러리를 사용하여 슬라이드 형태로 렌더링 될 수 있는 코드를 구현했다. 슬라이더 구현을 했던 게 제일 기억에 남는데.. react-slick 은 api 문서를 확인해보면 간단하게 사용할 수 있다. 기본으론 div로 감싸진 엘리..

→2021.04.03

Code/TypeScript

[TypeScript] 타입스크립트의 기본 / 타입(type), 옵셔널 파라미터(optional parameter), 디폴트 파라미터 (default parameter)

타입스크립트의 몇 가지 타입과 특징을 설명하려고 한다. 타입 숫자형 (number type) 문자형 (string type) 비교형 (boolean type) undefined type null type unknown type any type void type object type never type 함수 타입 (function type) 배열 타입 (array type) 이외 타입스크립트, type 연산자를 통한 객체 타입 구체화 타입 추론 옵셔널 파라미터 디폴트 파라미터 | 특수문자를 사용한 or 타입 지정 숫자형 (number type) / 문자형 (string type) let num1: number = 1; let num2: string = 'hello'; num1 = 5 num2 = 'hi' ..

→2021.03.15

Code/Nestjs

[Nestjs] NestJS가 각광받고 있는 이유? / 파일 트리 구조 / 실제코드

파이널 프로젝트에서 백엔드를 맡으면서 nestJS를 사용했는데, 골치아팠던 nestJS를 이해하게 되면서 핫할 수 밖에 없는 스택임을 느꼈고, 이를 토대로 기술 발표를 진행했던 적이 있다. 오늘은 nestJS가 핫한 이유, nestjs의 활용과 유용성에 대해 포스팅을 하려고 한다. 포스팅에 앞서 ppt 자료가 포함되었던 발표이기에 간단한 ppt와 함께 nestJS에 대한 설명을 진행할 예정이다. nestjs에 대한 소개와, 사용한 기능 및 느낀 점 총 2가지 포인트로 설명을 할 것이다. NestJS의 특징 첫 번째, 안정성 NestJS는 물론 자바스크립트 js에서도 작동이 가능하지만, nestJS 개발 당시 타입스크립트를 고려하여 제작되었기 때문에 타입스크립트를 적극적으로 지원한다. 타입스크립트를 지원한..

→2021.03.06

Project

[퍼스트 프로젝트 / 리팩토링] weSeason v2.0.0 배포 완료, 리팩토링 회고록

weSeason 소개 시시각각 변화하는 기온과 내 위치! 오늘은 뭘 입을까? 기온에 맞는 옷차림을 추천해드립니다!! 접속 위치와 기온을 확인하고 옷차림을 추천합니다! 현재 기온을 포함한 9시간의 데이터를 미리 확인할 수 있습니다! 원하는 기온 데이터를 클릭하여 옷차림을 확인할 수 있습니다! 다른 곳으로 이동을 해야 한다면? 동네 검색을 이용하여 해당 지역 정보를 확인할 수 있습니다! 구글, 깃허브로 편리한 로그인이 가능합니다! 1. 기획 퍼스트 프로젝트는 2주 정도의 상당히 짧은 기간이었다. 그 중 1주일은 sr을 계획하고, 피그마로 UI, UX를 모두 실사화로 만들어 계획하는 데에 사용했다. 그 후 1주일은 코딩을 진행했다. 첫 번째 프로젝트이고, 내 아이디어가 직접 구체화 되어 구현되는 것만큼 재밌는..

→2021.02.26

티스토리툴바