본문 바로가기

Today I Learn

 (60)
keepalive 설정 2021. 11. 23. 21:23 KeepAlive 설정을 nginx에서 하는것과 Http에서 하는것이 어떤 차이가 있는지 궁금해서 찾아보았다. Nginx keepalive - 어플리케이션 레벨에서의 keepalive - 클라이언트가 먼저 종료되지 않는이상 keepalive_timeout 시간 동안 연결을 유지함 - 클라이언트가 브라우저라면, 브라우저는 http 1.1 사용 시 기본적으로 keepalive가 활성화되어있음. (해제 가능) - nginx 입장에서는 클라이언트와의 연결을 유지할지를 결정하는 것. (호스트 입장에서 keepalive를 설정하는 것) Http keepalive - NodeJS의 http 모듈의 keepalive 설정 (http.Agent({keepAlive: true})) - Default로 NodeJS는 kee..
Jenkins, Github Action으로 CI 환경 구축 경험기 2021. 11. 13. 20:15 공교롭게도 금주에 젠킨스와 Github Action으로 동시에 CI 환경을 구축할 일이 있었다. 사내 Github Enterprise에서는 아직 Github Action이 미지원이라 Jenkins를 사용했다. 기존에 사용하던 젠킨스가 있었지만 메모리 이슈가 잦아져, 우리 파트만 사용하는 Jenkins를 새롭게 구축하기로 했다. (겸사겸사 물리 서버가 아닌 Docker 컨테이너 환경으로 이전도 포함) Github Action은 사이드 프로젝트에서 새로 CI 설정을 위해 Github Action을 사용하기로 했다. 결론부터 말하면 젠킨스는 구축까지 대략 하루 걸리고, Github Action으로는 공부시간 포함 1시간 정도 걸렸다. 이건 젠킨스보다 Github Action이 쉽고 빠른 점도 있었지만 사내 망..
정규표현식 일치탐색 수행 시 놓치기 쉬운 이슈 2021. 11. 2. 16:04 사내 앱 환경은 UserAgent 문자열을 보고 앱에서 접근했는지 여부를 알 수 있다. const UA_SAMPLE = 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/605.1 APP_NAME(inapp; search; 1000; 11.5.5.2; 11)' 따라서 정규표현식으로 UserAgent를 분해해서 디바이스 환경 및 앱 환경 여부를 검사하는 parseDeviceInfo 함수를 선언했다. const appUserAgentRegEx = /APP_NAME\([inapp]+;[^0-9]*(search);[^0-9]*..
react 16.8 -> 16.9 업그레이드로 인한 react-testing-library 실패 해결 2021. 10. 5. 16:36 팀 내 react 16.8 버전을 이번에 npm7로 버전 업하면서 함께 16.9로 올렸다. 그런데 올리고 보니 기작성되었던 일부 테스트 케이스들이 실패했다. 실패하는 원인을 보니 비동기 실행으로 인해 HTMLElement를 찾기 전에 fireEvent 나 userEvent를 실행해버려서 실패되었다. 따라서 아래처럼 HTMLElement도 비동기로 찾게끔 수정하였다. test('', async () => { const container = render() // ... 중략 ... const button await waitFor(() => { button = findButton(container) expect(button).not.toBeUndefined() }) fireEvent.click(button) ..
[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코드는 페이지가 완전히 인터렉티브하도록 한다..
[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..
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..
[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..
[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..
react-spring으로 구현해본 애니메이션 정리 2021. 6. 29. 00:26 리액트에서 웹 UI 애니메이션을 구현하는데 유명한 라이브러리인 react-spring으로 구현해본 기능들을 정리한다. 1. Page Transition 참고 예시 SIMPLE TRANSITION peaceful-almeida-t7puq - CodeSandbox peaceful-almeida-t7puq by yujeongJeon using lodash, react, react-dom, react-router-dom, react-scripts, react-spring codesandbox.io history.location이 바뀔때마다 슬라이딩되어 넘어가는 애니메이션을 useTransition을 사용하여 구현하였다. 예시와 다른 점은 1 -> 2로 갈 때는 오른쪽으로, 2 -> 1로 backward될 때에는..
getEventListeners로 등록된 이벤트리스너 확인하기 2021. 6. 14. 18:23 웹 개발에서 이벤트 리스너가 잘 해제되고 있는지 확인해야 하는 경우가 있다. 그럴 때 getEventListener를 사용하여 확인할 수 있다. getEventListeners(window) getEventListeners(document) 결과 { error: Array(1), unhandledrejection: Array(1), pagehide: Array(1), popstate: Array(1) } 결과에서 볼 수 있듯이 [Event 종류]: Array으로 결과를 볼 수 있다. 예를 들어, React에서 visibilitychange 이벤트 리스너를 등록 후 지우지 않았다면 const Comp = ({children}) => { const onVisibilityChange = () => { /** ..

티스토리툴바