분류 전체보기154

• 

  리액트 + MSW 리액트에서 개발을 할 때 실제 백엔드 개발자가 없다면 api를 호출하고 받아오는 과정을 테스트하기가 어렵다. 또한 여러 open api 들은 자신이 개발하고자 하는 데이터 구조가 아닐 가능성이 크다. 따라서 우리는 msw mocking service worker 라이브러리를 이용해서 mock data들을 만들고 서비스에서의 요청을 msw가 가로채서 실제 서버와 통신하는 것처럼 진행해 볼 것이다. 우선 msw를 이용하려면 package를 설치해 주어야한다. yarn이나 npm을 통해 설치할 수 있고 msw는 실제 서비스에서는 이용하지 않고 dev환경에서만 이용하므로 옵션을 준다. $ npm install msw --save-dev 2# or 3$ yarn add msw --dev 위의 명령을 통해 패키지를.. front-end/react 2022. 2. 15.

• 

  React+Redux(2) 1. Store의 값 가져오기 react는 redux의 store에서 관리되고 있는 state 값을 가져오는 hook을 제공한다. 이는 useSelector()라는 hook이다. 2. useSelector()의 사용법 store의 상태를 반환하려면 redux에서 제공하는 store안에 들어있는 (configureStore함수로 정의되어 있는 store 객체 안에 들어있는) getState함수가 필요하다. 또한 우리는 typescript환경에서 getState를 사용할 것이므로 store.getState()함수로 반환되는 type을 지정해주어야한다. 따라서 RootState를 다음과 같이 store.getState()함수의 ReturnType으로 지정한다. 그 후 useSelector()hook에서 사용할.. front-end/react 2022. 2. 10.

• 

  CRA + typescript 절대 경로 셋팅 1. CRA와 타입스크립트로 프로젝트를 셋팅 npx create-react-app my-app --template typescript 다음과 같은 명령어로 만들 수 있다. 만일 이미 만들어 둔 프로젝트에 타입스크립트를 추가하는 것이라면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 다음과 같은 명령어를 입력해주면 된다. 그 후 절대 경로를 설정해주기 위해서는 세 가지 과정이 필요하다. 1. craco 설정 2. root 경로에 tsconfig.json파일 생성 및 설정 3. root 경로에 tsconfig.paths.json 파일 생성 및 설정 craco란 CRA로 만들어진 프로젝트를 쉽게 설정하기 위.. front-end/react 2022. 2. 10.

• 

  리액트 프로젝트 폴더 구조 react를 사용하여 front-end 작업을 할 때 수 많은 파일들과 기능 또 component를 관리하는 것은 정말 복잡한 일이다. 코드의 유지 및 보수 또는 refactoring을 할 때 어느 폴더에 내가 수정하고자 하는 기능이 있는 지를 찾는 것 또한 어려운 일이다. 그래서 폴더 구조를 미리 정해두고 숙지하는 것은 코드의 유지 및 refactoring에 큰 도움이 되는데 보편적으로 다음과 같은 구조를 많이 사용한다. 여기서는 tsconfig.json이나 .gitignore와 같이 전역으로 설정하는 파일은 배제한 채 component들을 이루는 src폴더와 public폴더의 구조에 대해 살펴보겠다. 이것은 현재 진행하고 있는 프로젝트의 src내부의 폴더 구조이다. 살펴보면 src폴더 안에는 apis.. front-end/react 2022. 2. 10.

• 

  리액트 프로젝트에 타입스크립트 추가 처음부터 typescript를 사용하려면 create-react-app에서 npx create-react-app my-app --template typescript # yarn create react-app my-app --template typescript 이미 만들어 놓은 React 프로젝트에 typescript를 추가하고 싶다면 npm의 경우 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # yarn의 경우 or yarn add typescript @types/node @types/react @types/react-dom @types/jest 그 후 tsc --init 명령어를 통해 typescr.. front-end/react 2022. 1. 28.

• 안드로이드 개발 일지 (21.11.01) - 1 저번 주 금요일 미션을 받았다.... 근로 인생 통틀어서 가장 어려운 미션이었던 거 같은데 보안 진단을 맡겼는데 자그마치 안드로이드 어플리케이션에 보안 문제가 3개나 나왔다는 것이다. 1. 역분석 방지 코드를 디컴파일링 하면 소스 코드의 원본이 보여 안 좋은 의도를 가진 사람들이 쉽게 공격을 할 수 있다는 것이다. 역 분석을 하면 소스코드 난독화가 되어 있지 않아 분석이 용이하다. 이는 앱의 구조와 사용 함수 등을 쉽게 알 수 있어 공격자가 취약점을 쉽게 찾을 수 있다는 단점이 있다. 하지만 이 경우는 쉽게 해결 할 수 있었는데 안드로이드 스튜디오에서 기본적으로 제공하는 proguard라는 툴을 설정하는 것으로 해결할 수 있었다. 먼저 현재 사용하고 있는 ADT를 최신 버전(8.0.1 이 후 버전)을 설.. 안드로이드 스튜디오 2021. 11. 2.

• 

  안드로이드 개발 일지 (21.10.17) 오늘은 갑자기 코로나 동선 알림이 어플과 연동을 해야 한다는 미션이 떨어졌다.... 앱과 앱 사이의 통신은 암시적 인텐트를 통해 소통한다는 것만 알고 있었으나 실제로 해보는 것은 처음이었다. 학교 어플의 경우 webview를 통해 웹 백엔드에서 정보를 받아와서 custom schema가 따로 존재했다. 따라서 일반적인 경우 intent를 통해 불러오고 싶은 어플리케이션의 패키지 네임이나 패키지 네임 + 액티비티 이름을 불러주면 되지만 나는 웹 백엔드에서 설정한 schema에 따라서 parsing하는 작업을 통해 어플리케이션을 호출해야 했다. public boolean shouldOverrideUrlLoading(WebView view, String url) { Log.i("test", url); view.. 안드로이드 스튜디오 2021. 11. 2.

• 

  git -fork 협업 flow 현재 프로젝트를 진행하면서 원본 repository(upstream이라고 하겠다.)를 fork해서 사용하고 있다. fork한 repository는 나의 계정 remote repository(origin)로 복사가 되는데 이 때 나의 remote repository(origin)로 복사된 repository는 fork해온 원본 repository(upstream)의 변경 사항을 반영하는데 이 때 반영하기 위해 수행하는 작업이 fetch이다. fetch를 하면 나의 개인 repository(origin)에 원본 repository(upstream)변경 사항들이 반영되고 그 후 pull을 통해 나의 로컬 저장소에 불러올 수 있다. 만약 내가 로컬 저장소에서 작업한 내용을 원본(upstream)레포지토리에 반영.. 협업 툴(git, source tree) 2021. 10. 11.

• 

  SSH 키 소스트리를 통해 생성하고 등록하기 우선 깃허브에 등록하는 과정은 다음 과정과 같다. cmd 창에서 ssh-keygen명령어를 통해서 만들수도 있지만 더 쉬운 방법인 협업 툴 sourceTree를 사용해서 만들어보겠다. 다음과 같은 과정을 진행하면 된다. 이 때 마우스를 계속 움직여줘야한다. 마우스 커서의 위치를 seed로 쓰는 듯 하다. 위는 ssh 키를 소스트리를 통해 생성하고 깃허브에 등록하는 방식이다. 요즘은 ssh키가 없다면 private repositoty는 clone해오지 못한다. 따라서 ssh키 하나 정도는 만들어서 깃허브에 등록하도록 하자! 협업 툴(git, source tree) 2021. 9. 9.

• 

  안드로이드 개발일지 (apk파일 추출) 안드로이드 푸쉬 메시지 관련 서비스를 개선한 후 베타 서비스를 진행하기 위해 처음에는 구글 플레이스토어에서 제공하는 베타 서비스를 이용할까 했었지만 그냥 apk파일을 추출해서 학교 서비스팀 팀원들이 직접 깔아서 사용해보기로 하였다! apk파일을 추출하는 것은 생각보다 간단한데 1. build -> Generate Signed Bundle APk 탭을 들어간다. 2. APK탭을 선택하고 next를 누른다. 3. key가 없다면 Create new key를 선택한 후 네모로 선택한 곳을 입력한 후 ok를 눌러준다. 4. 아까 새로 만든 key의 password를 넣어주고 next를 입력한다. release를 선택하고 finish를 선택한다. 그러면 자동적으로 Destination Folder에 apk-rel.. 안드로이드 스튜디오 2021. 9. 9.

• 

  안드로이드 개발 유지 일지 09.09(FCM 푸쉬메시지 관련) 오랜만에 할 일이 생겼다. 안드로이드 푸쉬 메시지를 bigText형식으로 바꾸어 알림을 보내는 것이었는데 학교 어플리케이션 자체를 내가 만든 것이 아니라 구조를 파악하는 것이 제 1할일 이었다. 그러다 src 폴더에 java로 쓰여져 있는 파일을 발견했다. 이 곳이 Fmc 기반 푸쉬 알림을 컨트롤하는 페이지인 것을 파악했고 FMC 기반 메시지에 대해서 공부를 시작했다. 이 코드에선는 파이어베이스에서 보내는 메시지를 getdata() 함수를 통해서 받고 있었는데 찾아보니 파이어베이스 기반 푸쉬 메시지를 보내는 방법에는 총 3가지 방법이 있었다. 1. notification 방식 notification 방식의 가장 큰 특징은 메시지를 보낼 때 키 값을 자신이 설정할 수 없다는 것이었다. 파이어베이스에서 정해.. 안드로이드 스튜디오 2021. 9. 9.

• 팀플 -react 1 오늘부터 본격적인 react 팀플에 들어가게 된다. 처음 소스트리 ssh를 설정하고 깃허브에 존재하는 코드를 클론하는 것 부터 쉽지 않았지만 레이아웃을 잡는 건 또 어떻게 하냐... 일단 해봐야겠다. 카테고리 없음 2021. 9. 8.