개발새발 103

앱스토어 등록 일지 03. RN 프로젝트 폴더 구조 정리 & 필수 라이브러리 설치

이제 본격적으로 프로젝트를 진행하여야 한다. 먼저 구조를 살펴보고 개발에 필요한 라이브러리를 프로젝트에 설치하려고 한다. 내 입맛대로 컴포넌트 구조도 미리 잡아둘거다. 기본 구조 내 맘대로 다듬기 일단 react-native init으로 프로젝트를 만들면 다음과 같은 기본 구조를 가지고 있다. 리액트와 흡사한 것 같다. 다른 점으로 android와 ios 폴더가 생성되는데, 이는 각 OS에 맞게 빌드하거나 배포할 때 쓰인다. 나는 가볍게 무시해주고 바깥에서 작업을 할거다. 가장 처음 시작되는 파일은 index.js이다. 여기서 App.tsx 컴포넌트를 렌더링 해준다. App.tsx는 이렇게 생겼다. 실행했을 때 에뮬레이터 첫 화면에 보이는 코드이다. 스타일이 StyleSheet으로 구현되어 있는데, 이건..

개발일기/App 2024.10.04

앱스토어 등록 일지 02. github 저장소에 프로젝트 푸시하기

이번에는 생성했던 프로젝트를 Github 저장소에 올릴 것이다.  저번에 개발에 필요한 프로그램들을 설치하고, React Native 프로젝트를 생성하고 안드로이드 스튜디오의 가상 디바이스에 연결하는 것까지 해보았다. 근데 이 프로젝트를 로컬에 둔다면 다른 곳에서 개발을 이어서 할 수 없기 때문에 어느 곳에서나 같은 환경으로 개발을 할 수 있도록 github 저장소에 프로젝트를 올리려고 한다. 깃 설치 일단 깃을 설치해야 한다. 나는 git bash를 사용한다. 얘도 리눅스 명령어를 윈도우에서 쓸 수 있게 해준다.아래 링크에서 간단하게 windows 버전으로 설치하면 된다. Git git-scm.com설치가 끝나고 cmd에서 git만 쳐서 확인하면 이렇게 설명이 나오는데 그럼 잘 깔린 것이다.  새 저장..

개발일기/App 2024.10.02

앱스토어 등록 일지 01. 안드로이드 개발 환경 구축 & 안드로이드 스튜디오 연동하기 (React Native)

예전에 싸피에서 프로젝트로 했던 안드로이드 애플리케이션을 앱 등록 직전에 싸피를 졸업하면서 흐지부지 된 적이 있었다. 앱스토어에 내 앱을 등록한 경험이 없다는 것이 조금 아쉬워서 오늘부터 아무 앱이나 만들어서 앱 스토어에 심사, 등록을 목표로 달려보려고 한다.  오늘은 그 첫 번째로 개발환경 설정에 대해 끄적여보겠다. 나는 React Native로 개발을 할 것이고 vscode와 android studio를 사용할 것이다. React Native 개발은 expo cli와 react-native-cli 개발로 나뉘는데, 예전에 정리해둔 내용으로 따로 포스팅을 하겠다. 그리고 난 IOS는 잠시 뒤로 미뤄두고 안드로이드 애플리케이션을 개발할 생각이다.일단 개발에 필요한 프로그램들을 모두 설치해주자. 필요한 파..

개발일기/App 2024.09.30

취업 스트레스를 극복하는 방법에 대한 나의 생각

내가 길지 않은 인생을 살면서 가장 스트레스를 받았던 순간은 취업 준비 기간이었다.😭  스트레스는 만병의 근원이라 하던데 이 시기에 정말 그렇다고 느꼈다. 그 시절에 나는 평상시보다 몸은 무기력하지만, 신경은 날카롭게 날이 서 있었다. 믿음에 배신당하는 일들이 생기니 자연스럽게 자신감도 떨어졌다. 물론 취업에 성공하면서 이런 스트레스는 사라졌지만, 꽤 오랜 기간 취업 준비를 했다는 것을 감안하면 내 나름대로 스트레스 관리를 해주었던 게 버티는 데 도움이 되었다고 생각한다.  그래서 오늘은 스트레스의 원인과 증상 극복하는 방법 등에 대해서 내 주관을 담아 끄적이고, 추후에 비슷한 상황에 놓이더라도 슬기롭게 헤쳐 나가기 위해 한 번 생각을 정리하며 글로 남겨보려고 한다.👌  스트레스 원인 다들 알다시피 ..

이모저모/잡담 2024.09.24

티스토리 블로그 방문자 통계 몰아보기

블로그를 만든지 벌써 3년이 지나가고 있다.심심해서 방문 통계를 살펴봤다.   예전에 한창 포스팅을 할 때는 자주 들어가봤는데 관리를 안하면서 안 들어오다보니 아주 오랜만에 들어왔다.생각보다 조회수가 나오고 있어서 조금 놀랐다. (대체 뭘 검색해서 들어오시는 걸까...?)  유입 경로도 들어가봤다. 최근 3일 밖에 제공을 안해준다ㅜㅜ그래도 어제와 그제 방문자가 꽤 있는 상황이라 어느정도 데이터가 있어서 다행이다ㅎ  로그를 쭉 살펴보니 구글에서 가장 많이 유입되고 빙, 다음, 네이버에서 가끔 들어오는 걸로 추측된다.  조금 신기했던 게 이렇게 네이버에서 검색을 해서 내 블로그가 나온다는 점이었다. 실제로 유입경로를 따라 들어가보면 SWEA 집합과 조합론을 검색하면 최상단에 내 블로그가 노출된다. (왠지 뿌..

이모저모/잡담 2024.09.13

입사한 지 1년이 조금 넘은 시점에 드는 생각

그냥 이런저런 얘기나 해볼까하고 잡담 카테고리를 추가했다.  요즘 프로젝트 기능 구현하고 이슈 해결을 하느라 블로그 포스팅을 못하고 있다. 그렇다고 일한 만큼 개발 실력이 일취월장 하는 것도 아닌 것 같아 약간의 현타를 느끼고 있다. 멍 때리면서 능숙하게 타이핑하는 날 보면 전문가(?)가 된 것도 같지만 결국은 기본 틀에서 벗어나지 못한 채 매번 같은 코드를 복붙하듯이 익숙한 반복 업무를 하고 있다는 생각이 들었다. 디자인 된 UI를 적당히 퍼블리싱하고 적당히 반복문 돌리고 적당히 조건 걸어서 기획에 맞는 화면과 동작을 구현해내는데 약간은 지루해지기 시작했다.  작년 6월에 입사해서 이제 만 1년이 조금 넘은 주니어 개발자인데 벌써부터 이런 생각이 드는 게 정상인가..? 딱히 글로 쓸 만한 주제도 없고 ..

이모저모/잡담 2024.09.13

[React] react-beautiful-dnd로 컴포넌트 drag&drop 구현하기

프로젝트 과정 중 어드민 페이지를 담당하여 홈에 들어갈 배너를 업로드 하는 기능을 구현하였습니다. 기존에는 PC, Mobile 각 각 한 개의 배너만 업로드 가능하게 구현해두었는데, 운영사의 요청에 따라 많은 배너를 배치할 수 있도록 수정하는 과정에서 배너의 순서를 커스텀 할 수 있도록 했습니다. ux를 고려하여 드래그 앤 드랍 방식으로 편하게 배너의 순서를 바꿀 수 있도록 react-beautiful-dnd 라이브러리를 활용하였습니다. 기존 배너 업로드 방식 기존에는 사진 영역 클릭 or 이미지 드래그 방식으로 배너 업로드가 구현되어 있었고, pc, mobile 각각 한 개의 이미지만 업로드 할 수 있었습니다. 각 배너를 최대 10개까지 업로드 할 수 있도록 요청받아 새로 구현하게 되었습니다. 수정된 ..

개발일기/Web 2023.11.13

[Git config] 깃헙 잔디 살리기 /local user.email 적용하기

저는 깃랩과 깃헙을 각각 다른 계정으로 사용했는데, 서로 다른 컴퓨터로 작업을 했기 때문에 문제가 없었습니다. 하지만 이번에 깃랩에서 작업하던 컴퓨터로 깃헙에 푸시를 하니 잔디가 안 쌓이는 문제가 생겼습니다. 깃 초기 설정과 관련된 이전 글 Git 기초 배우기 Git 기초 Git 초기 설정 최초 한 번만 설정합니다. 매번 git을 사용할 때마다 설정할 필요가 없습니다. 커밋 작성자 정보 등록 $ git config --global user.email $ git config --global user.name 커밋 작성자 정보 확 dongkeun2.tistory.com 문제점 깃헙에 잔디가 누락되었습니다... 3개의 커밋을 했지만 잔디는 2개만 쌓인 것을 볼 수 있습니다. 처음엔 무엇이 문제인지 몰랐지만, ..

개발일기/Git 2023.09.26

[React] 함수형 컴포넌트에서 componentDidUpdate() 구현하기

함수형 컴포넌트는 클래스형 컴포넌트와 다르게 라이프 사이클 메서드가 없습니다. 그렇기 때문에 라이프 사이클 관리를 Hooks을 사용하여 하게 됩니다. 저번 포스팅을 통해 useEffect로 mount, unmount, update를 다루는 방법들을 배워봤는데, deps를 활용해 componentDidMount와 componentDidUpdate를 동시에 다루는 방법은 있지만 componentDidUpdate만을 다루는 방법은 소개하지 않았습니다. 2023.06.20 - [개발일기/Web] - [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle) [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle) 리액트 생명주기를 LifeCycle Method와 함께..

개발일기/Web 2023.08.28

[React] 검색 요청 최적화하기 with Debounce

검색 기능을 구현하다보면 다양한 검색 방식을 사용할 수 있습니다. 그 중 검색 버튼, 엔터 키 등 트리거가 명확한 경우도 있지만, 입력을 마친 시점에 자동으로 검색이 진행되는 경우를 원할 수도 있습니다. 이때 입력할 때마다 검색이 된다면 원치 않는 검색어로 검색을 시도하기 때문에 쿼리 낭비가 심해질 수 있습니다. 이를 개선하기 위해 Debounce를 활용합니다. Input 입력 여기 단순한 Input이 있습니다. 해당 컴포넌트는 다음과 같이 Input 값이 변경될 때마다 onChange함수를 실행합니다. onChange함수는 상위 컴포넌트에서 검색을 요청할 때 사용합니다. 이렇게 구현한다면 입력할 때마다 검색을 실행할 수는 있습니다. 만약 토피넛라떼를 검색하고 싶어 입력을 했다 생각해보겠습니다. 이 경우..

개발일기/Web 2023.08.25