letsgojieun

모달 UI 작업하다 발견 한 획기적인 scroll css라 생각하여 정리를 해둬야겠다. 모달 컴포넌트 내부에는 모달 콘텐츠 컴포넌트가 존재한다.모달 콘텐츠 컴포넌트 하위에 존재하는 버튼을 클릭하면 스크롤은 부모인 모달 컴포넌트의 최상단까지 올라가야 했다. 기존의 로직에서 버튼과 같은 클릭 요소에 이벤트를 주어 스크롤을 내가 원하는 곳에 위치 시키려면버튼에는 스크롤 관련 이벤트를, 스크롤을 위치 시키고 싶은 곳에는 특정 Id를 주면 가능했다.  // scroll 아이디가 존재하는 element로 스크롤 위치를 이동시켜준다 const handleClickScroll = () => { const element = document.getElementById('scroll') if (element) {..

A 브랜치에서 작업 후 첫 PR을 날렸고 A 브랜치로 돌아와 재작업을 진행했다. 그러던 중 A 브랜치와 develop 브랜치 merge 후, 원격에선 A 브랜치가 삭제된 상황 원래 pr을 날리면, github 상단에 pr 날리는 배너가 생겨서 클릭만 하면 쉽게 pr을 날릴 수 있는데 이번엔 push를 하여도 배너가 자동으로 생기지 않았다. 삭제된 브랜치를 push 하여도  github에 pr 배너가 뜨지 않는다면   1. New pull request 버튼을 눌러준다  2. develop 브랜치로 pr을 날릴 브랜치를 직접 선택해준다  3. create pull request를 클릭하면 정상적으로 pr을 날릴 수 있다

npm i expo-dev-client위의 명령어를 통해 expo-dev-client 설치 expo development client는기존의 expo go와 동일한 사용 경험을 제공하지만, 각 커스텀 된 런타임 환경 구성이 가능하다.    npx expo start --dev-client 설치 후, expo를 실행한다  It looks like you're trying to use web support but don't have the required dependencies installed.Please install @expo/webpack-config@^0.17.2 by running: 웹에서도 띄우려 했더니 이런 에러가 발생하여 @expo/webpack-config@^0.17.2 을 설치했다 그리고..

나의 기존 커밋 단위는 업무 중 흐름에 따른 커밋이었다. (feat. 의식의 흐름에 내 커밋을 맡긴다)커밋 내역에는 A.파일추가와 B.구조변경, C.새로 추가 한 비즈니스 로직이 뒤엉켜있었다C.새로 추가 한 비즈니스 로직이 완성된 후, 변경사항에는 A,B,C 파일의 변경 사항이 존재하였고A와 B는 고려하지 않고, 현재 커밋을 하는 주 목적은 C라고 생각하였다그래서 대략 '기능 추가'라는 메시지가 담긴 커밋을 하였다. 이때까지만 해도 이것이 문제상황이라는 것을인식하지 못했다고 한다..팀원과 협업 중, 내가 완전히 잘못된 커밋을 하고 있다는 것을 알게 된 계기가 있었다공통 프로젝트에서 하나의 라이브러리를 설치했는데 팀원에게도 이 라이브러리가 필요했던 것.나에게 커밋을 부탁하였고, 나는 별생각 없이 이전 작업..

이전에는 간단한 앱 개발을 react-native cli로만 조금씩 경험을 해봤었다현 회사 앱 개발이 expo-cli로 되어있는데, 예전의 expo-cli의 단점이 많이 사라졌다고 한다.이번 기회에 expo-cli 개발 환경에 익숙해져 보자 (= 아마도 회사 업무 조금 더 수월해지지 않을까 하는 마음)는 기대감을 갖고!  이번 출시를 목표로 두고 있는 사이드 프로젝트 앱 개발을 expo-cli로 도전해보려한다.  01. expo-cli 설치 yarn add expo-cli명령어를 통하여 우선 expo-cli를 설치해 준다.  expo-cli를 설치했다면npx expo init 을 입력하여, expo-cli 프로젝트를 생성해 준다  02. expo 공식 사이트 가입 및 설정  expo 공식 사이트에 들어가..

취준 기간 동안 만들었던 웹 프로젝트의 모든 AWS 세팅을 삭제했었다이후에 확인해 보니 AWS에서 매달 내 만원이 줄줄이 세어 나가고 있는 것을 발견하였다 (...)인스턴스를 삭제했기 때문에, 가장 유력한 건 EC2 탄력적 IP였다   [AWS] -> [EC2] -> [탄력적 IP 주소]아무것도 없다고 생각했는데, 내 현주소가 '미국 동부'로 되어 있어서 보이지 않았던 것이다 흑흑다시 서울로 선택하니 그제야 탄력적 IP 주소가 보였다      오른쪽 상단의 작업 버튼을 클릭하여 '탄력적 IP 주소 릴리스'를 선택하면 탄력적 IP가 완전히 삭제된다이제 내 만원을 지킬 수 있다 🥲  ⚠️ 탄력적 IP 사용은 비용이 따로 들지 않지만,연결 한 인스턴스를 사용하지 않을 때(인스턴스 중지/삭제) 요금이 청구된다..

localStorage는 저장, 변경, 삭제 등 모든 동작이 동기적으로 실행된다.URL의 쿼리스트링으로 존재하는 code를 nextjs의 router.query 를 객체구조분해를 이용하여 가져왔다이후 useEffect가 실행될 때 쿼리스트링의 code 키,값을 가져와서 localStorage에 저장하려는 의도였다 예상과 달리, localStorage에 값이 들어가지 않아 useEffect안에 router.query를 콘솔로 찍어보니빈 객체 { } 가 출력되었다 이는 nextjs에서 정적으로 최적화된 페이지는 루트 매개 변수가 제공되지 않아 query값을 콘솔에 찍어도빈 객체로 나오기 때문이었다 (= 정적 파일 최적화)   Next.js@10.0.5 이후 버전router.isReady라우터 필드가 클라이언..

01 기술 블로그를 쉽게 쓰는 방법 3가지 개발자가 기술 블로그를 잘 못 쓰는 이유 '주제 우선, 독자 중심, 주장하는 글쓰기'가 학교를 벗어난 개발자의 글쓰기 방식을 지배해왔다. 그래서 주제가 불분명하고, 독자 수준은 천차만별이며 딱히 주장할 것이 없는 기술 블로그를 써야 할 때는 생각이 정리되지 않고 목차를 잡기 어려워진다. 기술 블로그를 읽는 독자의 수준도 일정치않으며 개발자의 블로그는 딱히 주장도 없다. 단지 개발자가 했던 선택과 몇몇 상황에서 더 좋은 방법을 제시할 수 있을 뿐이다. 그래서 개발자에게 적합한 방법 세 가지를 제시한다. 소재 우선 글쓰기, 자기 수준 글쓰기, 재미있는 글쓰기다. 첫째, 주제 의식을 버리고 '소재 의식'으로 쓰자 주제 의식이 민족이나 권선징악, 자존감 자본주의 같은 ..

01 체인지 로그를 분류, 요약, 종합하는 법 체인지 로그의 양과 만족도의 관계 간단히 쓰면 한 일이 없어 보이고 자세히 쓰면 아무도 읽지 않아 쓸모가 없다. 애플리케이션의 새 버전을 릴리스할 때 변경사항에 다음과 같이 썼다면? ‘사소한 오류 수정’ 일을 열심히 하고도 체인지 로그를 제대로 작성하지 않으면 인정도 못 받고 보람도 없다. 그렇다면 일주일 동안 한 일을 모두 다 적으면? ‘고해상도 폰에서 아이콘이 찌그러지는 오류를 수정했습니다.’ ‘가로/세로 화면 전환 시 하단 메뉴가 사라지는 오류를 수정했습니다.’ ‘애니메이션 스티커가 갑자기 멈추는 오류를 수정했습니다.’ …. 잘못하다간 버그 많은 걸 자랑하는 꼴이 되어버린다. 체인지 로그를 잘 작성하려면 밑의 순서를 기억하자. 선정하기 분류하기 요약하기..

01 에러 메시지를 쓰기 전에 에러부터 없애자 친절한 404, 불친절한 404 사용자가 404 에러 페이지를 만나게 되는 이유는 사용자가 URL을 잘못 입력한 경우 사용자가 링크를 클릭했으나 해당 페이지가 없는 경우 첫 번째 경우는 죄송할 이유가 없다. 문제는 두 번째 경우다. 클릭 시 해당 페이지가 없는 경우, 이를 깨진 링크 또는 죽은 링크라고 한다. 깨진 링크는 개발자의 책임이다 사이트 안에서 링크로 연결되다 깨진 것은 브로큰링크체크닷컴에 들어가서 확인이 가능하다. 또는, 다른 사이트에서 연결된 링크가 깨진 경우가 있다. 특히 검색 엔진이 페이지를 수집했는데, 이후에 페이지 URL이 바뀌거나 페이지를 삭제했는데도 검색 엔진에 원래 페이지를 그대로 갖고 있다가 링크로 연결하는 경우가 있다. 예를 들어..