사고의 축 사고의 축

디자이너 및 기획자의 화면기획, 디자인 시안 등을 보면서 작업하다 보면 흔히 생기는 고충 중에 하나가 바로 Asset관리이다.특히 아이콘들이 심한데, 오래된 프로젝트일수록 아이콘이나 이미지가 중복적으로 프로젝트에 포함되곤 한다.혹은 유사한 아이콘이지만 색상만 다르거나, 아주 미세하게 모양이 다른 경우도 많다.Figma나 Zeplin에서 이런 아이콘들을 생각없이 export하여 프로젝트 폴더에 집어넣다 보면 아래와 같이 웃지 못할 상황이 발생하곤 한다.이러한 상황을 벗어나기 위해 이번에 진행하는 프로젝트에서는 아이콘 라이브러리를 설치하여 사용해보기로 결정했다.아이콘 라이브러리는 디자이너가 직접 디자인한 아이콘은 아니지만 간단하고 통용적으로 사용되는 아이콘들이 많이 있고,해당 아이콘의 색상이나 사이즈 등을 ..

React혹은 React-Native 프로젝트를 진행하면서 무심코 사용해왔던 React-Query에 대해 한번 정리하고자 한다. 유튜브 채널 "우아한 테크"의 2022년 2월에 올라온 영상, React-Query와 상태관리 편을 시청하면서 정리했다. 서론 상태란 무엇인가? 상태(State)는 주어진 시간에 대해 시스템을 나타내는 것. 언제든지 변경될 수 있다. UI/UX의 중요성이 부각되면서 관리해야되는 상태가 많아졌다. Props Drilling 이슈로 인해 Redux, Mobx 같은 라이브러리를 활용하기도 한다. 상태관리 영역의 확장 서버값을 저장하는 것까지 개념이 확장됨 기존 redux와 같은 전역상태관리 라이브러리의 store에 API 통신 관련 코드가 포함되기 시작 isError, isFetch..

프로젝트를 진행하다보면, 이미 서비스 중인 Live 환경과 개발을 진행 중인 Develop 환경이 분리되어야 하는 상황이 필연적으로 생긴다. 거기다 QA 환경, 내부 교육용 환경 등 프로젝트의 성격이나 회사의 업무진행 방식에 따라 더 많은 환경 분리가 필요하기도 하다. 따라서 이러한 환경에 맞춰 앱 자체를 각각 빌드하는 방법에 대해 알아보고 정리해두고자 한다. 시작하기에 앞서, 해당 글은 Appcenter CodePush를 적용 한 프로젝트에서 시작하였다. [ReactNative] Appcenter Codepush 연동하기 [ReactNative] Appcenter Codepush 연동하기 리액트 네이티브로 제작한 프로젝트는 심사없이 간단한 업데이트를 진행할 수 있다. 이는 네이티브 단의 코드를 변경하지..

네이티브 개발을 진행하다가 오랜만에 ReactNative로 프로젝트를 하게되었다. 일반적으로 숫자 3자리마다 콤마를 삽입하는 가장 편한 방법은 toLocaleString() 메소드를 사용하는 방법이다. 하지만 이는 iOS환경에서는 문제없이 동작하지만, Android 환경에서는 정상적으로 콤마가 출력되지 않는 문제가 있었다. 분명 예전에 ReactNative 프로젝트를 진행할 때 겪었던 문제였음에도 불구하고, 제대로 기록해두지 않으면 이렇게 또다시 반복적인 삽질을 하게 된다... 그래서 이번엔 아예 커스텀 메소드를 구현하면서 이 문제를 정확히 기록해두고자 한다. Android 환경에서 toLocaleString() 메소드가 제대로 동작하지 않는 이유에 대해서 아주 간략히 설명하자면, ReactNative는..

리액트 네이티브로 제작한 프로젝트는 심사없이 간단한 업데이트를 진행할 수 있다. 이는 네이티브 단의 코드를 변경하지 않는 이상 실질적으로 JS번들 내의 내용을 변경하는 것이고, 스토어에 새로운 빌드를 업로드 하지 않고 JS번들만 Appcenter 에서 등록/관리 하여 변경하면 되기 때문이다. 다음은 실제 작업한 프로젝트 ‘Walky’에 Appcenter CLI를 적용하는 과정을 기록한 것이다. 1. 설치하기 npm install -g appcenter-cli 2. 시작하기 Appcenter CLI를 사용하기 위해선 Appcenter에 가입을 해야 한다. 구글 계정 등을 사용할 수 있으니 간단히 가입할 수 있다. appcenter login 해당 명령어를 통해 로그인이 가능하다. 명령어를 실행하면 브라우저..

제목은 거창하지만 사실 아는 만큼 보인다고, 눈 가린채 코끼리 뒷다리 더듬는 느낌으로 끄적여보려 한다. ChatGPT... 정말 엄청나다. 요즘은 거짓말 조금 보태서 실무 중에 ChatGPT랑 페어 코딩하는 사람도 있을 정도다. 나의 경우엔, 대략적으로나마 감을 잡고 있던 개념도 ChatGPT와 대화를 주고 받으면서 명확하게 이해하는 부분도 있었다. 왠만한 강의나 서적보다 응답성도 빠르고 명쾌하다. 심지어 프레임워크 내에서 내가 몰랐던 내장함수를 사용하여 코드마저 더 깔끔하게 다듬어 주기까지 한다. 어찌보면 개발자의 비전이 어둡진 않을까 고민조차 될 정도다. 알파고가 어쩌구 하던 시절은 벌써 호랑이 담배피던 시절처럼 느껴지고, AI의 분야는 내가 모르는 만큼 내 상상을 아득히 넘어선 수준으로 발전하고 있..

부트캠프에서 처음 프론트엔드 개발에 대해 배울때 가장 많이 접하는 라이브러리가 React일 것이다. React로 개발을 하다보면 함수형 컴포넌트에서 사용하는 리액트 훅(ReactHook), 특히 useEffect를 자주 사용하게 된다. 안드로이드 앱 개발 프로젝트를 진행하면서, 리액트로 개발을 시작한 나에게 있어 객체지향형 프로그래밍이랑 너무나도 어려운 개념이었다. 그러다 선언형 프로그래밍이 가능한Jectpack Compose을 사용하게 되었고, 자연히 React의 useEffect와 비슷한 역할을 하는 함수에 대해 알아보았다. - React, useEffect React의 useEffect는 컴포넌트가 렌더링될 때마다 실행되는 함수다. useEffect를 사용하여 비동기 작업을 수행하거나, 외부 리소스..

부트캠프를 수료하고 구직활동에 전념하면서 어느덧 TIL이니 WIL이니 전부 내팽개쳐 버렸었다. 처음 이력서를 수십군데, 아니 백군데가 넘는 곳에 들이 밀었지만 면접을 보자는 곳 조차 드물었다. 처음에는 아무리 이 바닥(?)이 나이나 학력을 크게 보지 않는다고는 하나, 고졸 출신에 삼십대 중반에 들어선 신입을 받아줄 곳이 그리 많지는 않겠다 싶었다. 그래서일까, 부트캠프에서 강조하던 루틴들이 내게는 공염불같이 느껴졌고 블로그에 글을 작성하는 것 또한 부질없는 노력이 아닐까 했던 것이 사실이다. 하지만 그런 내 생각과는 무관하게도 구직 활동을 시작한지 두어달이 채 되기전에 입사를 할 수 있게 되었다. 너무나도 바랬던 개발자로서의 커리어 전환과 서울로 상경하여 직장생활을 할 수 있음에 감사했다. 이후에는 인턴..