본문 바로가기

모두 보기

 (96)
(사족) PR에 변경사항 쉽게 알아보게 쓰기 2021. 8. 16. 17:44 동아리 활동한다고 딱히 올릴만한 글이 없어서 😥 사족이라도 써봐야겠다 정신 없이 개발하다보면 변경 사항이 밑도 끝도 없이 많아지는 경우가 많다. 아무리 코드 리팩터링을 해도 File Changed가 20개, 30개가 넘어가면 그때부터는 PR을 올리는 것 조차 죄송스러웠던 적이 많았다.. 따라서 코드 변경 사항을 PR로 올릴 때 같이 개발하는 팀원들이 쉽게 파악할 수 있도록 안내하는 것이 중요하다. 어떤 점이 변경사항을 쉽게 알아보는데 도움이 되었는지 주변에서 말씀주셨던 것과 다른 개발자분들이 올리신 PR에서 좋았다고 생각한 점들을 토대로 정리하였다. 내가 PR을 올리는 입장일 떄에도 해당하지만 반대로 내가 다른 분들의 PR을 리뷰할 때에도 활용하면 좋았다. TL;DR 이슈 Tracking 과정을 기록한다..
[Nextjs] 맨날 햇갈리는 Data Fetching 정리 2021. 8. 7. 01:16 Nextjs를 하면서 맨날 햇갈리는 ㅠㅠ Data Fetching 부분을 정리하였다. (번역투 다수) Prerequisite 정리 전에 Nextjs의 pre-rendering을 알고 가야한다. Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.) 생성된 각 HTML은 최소한의 자바스크립트 코드와 함께 생성되고, 그 js코드는 페이지가 완전히 인터렉티브하도록 한다..
7/31 넥스터즈 5주차 : 단위테스트, 디자인 시스템 2021. 8. 1. 15:28 4주차는 회사일이 급해서 회사일을 더 많이 했으므로 스킵 2주차에서 jest를 설치하고 jest.config.js 설정을 마쳤다면 이번주에는 jest로 단위테스트를 작성할 수 있는 Mocking을 준비하였다. 2주전에 구현한 Oauth2.0 로그인 단위테스트를 작성하면서 진행하였다. Mocking이 끝나면 앞으로의 기능은 회사에서 그랬던 것처럼 TDD로 구현할 생각이다. (TDD에 대해서 썼던 글) 8/26 추가 TDD로 하겠다고 호언장담했었으나 안했었다...😭 1. Axios Mocking 먼저 Axios Mocking이다. jest Mocking Modules 가이드에서 소개하듯이 jest.mock 으로 mocking하는 방법이 있다. // users.test.js import axios from '..
[Nextjs] 리액트에서 Nextjs로 이전하던 중 생긴 이슈들 2021. 7. 28. 00:38 현재 사내 모든 서비스는 단 하나의 저장소에 모두 몰려있다. 따라서 내가 맡은 서비스만 배포할 수 없는 불편함+코드가 너무 방대해져서 유지보수의 어려움 등등의 이유로 각 서비스 별로 저장소를 분리하는 과정에 있다. 내가 맡은 서비스 또한 저번 주 신규 서비스 런칭이 끝났으므로 저번주부터 저장소 분리에 착수했다. 이전 저장소는 CRA 기반 React js 환경이었다면 새로 분리하는 저장소에서는 Nextjs + Typescript를 도입하였다. Nextjs 기본 Setup을 끝내고 나서부터는 코드를 옮기는 작업을 진행하였는데, 역시 그대로 옮겨질리가 없다. (ㅋ) 1. Link 이전 cra 기반 reactjs 환경에서는 react-router-dom 의 Link 컴포넌트를 사용하였다. Next js에서는 n..
7/16 넥스터즈 3주차 (2) : 에러 처리 설계와 SWR 2021. 7. 16. 19:15 개발순서는 이게 먼저인데 작성하다보니 인증 구현을 먼저 작성했다 🙄 저번주에 Setup한 개발환경에서 본격적으로 구조 설계에 들어갔다. 이번에도 사심을 담아 사내에서 미리 사용할 구조를 설계한다는 기분으로 구현했다. 😏 사내에 이미 nextjs로 구현중인 프로젝트가 있는데 해당 코드를 많이 참고했다. 에러 처리 클라이언트 에러처리는 크게 세 부분으로 구분하였다. 1. 모든 페이지에 공통적으로 처리할 에러 2. 페이지 혹은 관심사별로 처리할 에러 3. 단일 컴포넌트 내 이벤트 핸들러 등에서 처리할 에러 들어가기 전에 httpRequest에서 발생하는 에러는 Axios Interceptor에서 처리하였다. 에러 클래스를 정의하고 http응답에서 내려주는 에러에 따라 다른 에러 인스턴스를 throw한다. 1...
7/16 넥스터즈 3주차 (1) : 인증 구현 2021. 7. 16. 16:06 3주차때에는 소셜 로그인 구현 중 네이버 로그인을 구현하였다. Next.js의 API 서버를 마치 Api Gateway처럼 생각하고 BE와 Server to Server로 구현할 계획이다. 네이버 아이디로 로그인 구현(이하 네아로)의 OAuth2.0 구현은 Gateway에서 할 수있을듯 해서 Gateway에서 구현하였다. 개요 위 다이어그램에서 볼 수 있듯이 로그인 시에만 인증서버(여기서는 네이버)를 거치고, 그 이후에는 BE에서 생성한 자체 토큰(jwt)으로 검증한다. 시나리오 시나리오 1. 최초 로그인 (a.k.a 회원가입) 1. 사용자가 '네이버 로그인'을 클릭 2. 정보제공 동의를 받는 인증 화면으로 이동하여 정보 제공에 동의한다. 3. redirectURL인 /bridge/naver 로(이하 브..
cypress를 써보자! (3) 2021. 7. 11. 16:55 < cypress를 써보자! (2) < cypress를 써보자! (1) E2E 테스트를 계속 작성하다보니 사소하지만 고치고 나면 편한 불편한 점들을 개선하였다. 1. supports/setup.js 테스트들마다 공통으로 intercept해야 하는 api들은 supports/setup.js 로 이동하였다. 2. fixture path 명명 mock 데이터인 fixture 경로에서 데이터를 가져올 때 파일명만으로는 명확하지 않다고 느껴졌다. 동료 개발자분이 api 경로와 똑같이 구조를 설정하는 아이디어를 제안주셨는데 좋은거 같다. 예를 들어, api 경로가 /api/login/user 라면 처럼 구성한다. cy.intercept('POST', '/api/login/user', { fixture: `fixtu..
7/10 2주차 세션 : 해커톤 2021. 7. 11. 16:19 넥스터즈 19기 활동이 본격적으로 시작되었다. 2주차부터 해커톤을 시작하는데 밤을 새는 일정(!)이었다. 그렇지만 어디까지나 자유라서 우리 팀은 밤을 새진 않았다. (하루만 새도 다음주 평일이 힘들기 때문에 😢) 금요일에 아이스 브레이킹+아이디어에 관한 생각을 공유하면서 모두 같은 방향을 바라볼 수 있도록 의견을 맞추었다. 따라서 해커톤동안 아이디어를 구체화하면서 와이어 프레임이 나올 수 있었다. (다하고 나니 밤 12시가 되었다 😳) 우리는 밤을 새지는 않기 때문에 1차 목표를 '개발 환경 구축'으로 소신 정의하였다. 본격적인 개발에 착수하기 전, 기술 스택 확정 및 형상 관리 Setup을 진행하였다. 기술스택 (Frontend) Nextjs 11 + Typescript Data Fetching: Sw..
[React] render() 내에서 history.push(replace)를 하면 안되는 이유 2021. 7. 8. 19:27 스토어의 상태값 여부를 검사하여 상태값이 없으면 다른 라우터로 이동하는 로직을 상위 컴포넌트에 추가하였다. const InfoChecker = ({children}) => { const {info} = useExampleStore() const history = useHistory() if (!info) { history.replace('/') return null } return children } const Info = () => { const {info, clearInfo} = useExampleStore() useEffect(() => { return () => { clearInfo() } }, []) return ( {info.name} ) } const Routes = () => { const..
[React] history.block으로 뒤로가기 막기 (blocking-transition) 2021. 7. 8. 14:51 만약에 A 컴포넌트에 name 상태값이 있다고 가정하자 사용자가 A 컴포넌트의 name 상태값을 수정하였으나 실수로 브라우저 뒤로가기를 누르면 A 컴포넌트는 언마운트되고 수정했던 name 상태값은 유실된다. 이런 경우를 방지하기 위해 브라우저 뒤로가기 발생 시 '정말 뒤로 가겠습니까?'와 같이 사용자에게 한 번 더 확인을 요구하는 confirm 창을 띄울 수 있다. history에서는 block으로 push/pop을 제어하여 이를 처리할 수 있도록 한다. 다음은 상태값이 변경되어 isBlocking이 true, action이 'POP'일 때 confirm창을 띄우는 예시이다. 참고 React Router v5.2 - Blocking route change with createBrowserHistory a..
React Native 초기 설정 2021. 7. 4. 16:05 3월부터 착수했는데 이래저래 바빠서 정리하고 있지 못했던 React Native 맨땅에 헤딩한 경험을 기록한다. * 기억하면 좋을 설정들만을 기록하여 아예 처음부터 설정하는 건 아님 목차 1. 디버깅 Setup 2. styled-components 설정 3. react-navigation 설정 (4.x) 4. Root import 설정 개발 환경 1. 디버깅 Setup 참고 URL. React Native Docs feat. 안드로이드 개발자 고수 친구👍 1. Jdk 설치 2. 환경 변수에 맞게 설정 (나는 zsh를 쓰고 있어서 ~/.zshrc) export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator ex..
[NGINX] Basic Authentication와 IP Address 2021. 7. 1. 22:12 Nginx 단에서 HTTP 인증을 사용할 수 있는 설정이다. HTTP 인증과 더불어 IP 접근 제한 등 다른 제한 수단과 함께 사용가능하다. 문법 location /api { auth_basic “접근을 위해 인증이 필요합니다.”; auth_basic_user_file ${PATH_NAME}/.htpasswd; } .htpasswd 파일은 md5로 암호화되어있는 id:password의 쌍으로 이루어진 파일이다. 파일 생성 방법으로 Docs에서는 apache2-utils (Debian, Ubuntu) 혹은 httpd-tools (RHEL/CentOS/Oracle Linux) 등 비밀번호 파일 생성 툴을 사용할 수 있다. 웹 서버의 경우 openssl로 암호화된 비밀번호를 얻을 수 있다. (출처) > ope..

티스토리툴바