FE 개발일지

저번 글에서는 CI / CD 구축을 위한 기본적인 개념과 큰 틀에 대해서 설명했다면 이번 글에서는 git action과 aws에서 설정해줘야 하는 작업들에 대해서 설명을 해볼까 한다. CI / CD를 구축하면서 느낀점은 내가 해오던 프론트 개발과 정말 다른 세계라는 생각을 많이 했던 것 같다. 심지어 딥하게 들어간 것도 아니고 간단하게 맛만 본 것 같은데도 이런 느낌이 들어 새삼 인프라 구성을 하시는 DevOps 포지션이나 백엔드 분들에게 존경심이 느껴졌다. 그러면 이제 CI / CD 구축을 위한 Step을 밟아보자! 1. S3 버킷 만들기 버킷 이름을 설정해주고 AWS 리전을 설정한다. 여기서 객체 소유권 설정을 해주지 않아 "File upload failed : AccessControlListNotS..

이번에 새로운 프로젝트에 투입되면서 초기 단계에서 개발을 진행중이다. 아직 CI CD 구축이 되어 있지 않았는데 항상 백엔드 팀에서 해주셨는데 이번에는 내가 맡게 되었다. 같이 일하시던 백엔드 팀원분이 이직을 하게되었는데, 인수인계 및 잔여 업무들이 많은 것 같아 CI / CD 작업을 가져왔다. 해보고 싶었던 작업이기도 했고 여러모로 좋은 경험이 될 것 같아서 흔쾌히 진행하게 되었다. 현재 프로젝트는 리액트로 진행하고 있고 Git Action과 AWS를 이용해서 CI / CD를 구축할 계획으로 서치를 했다. 위 과정을 간략하게 설명해보자면 코드를 Push 하면 Git Action이 실행되어 CI (빌드) 작업을 수행 빌드 작업을 통해 zip 파일과 사전에 작성한 배포 스크립트 파일을 압축해 AWS S3에..

# 내용추가 WebView vs In-App-Browser vs Embedded Browser의 차이점을 좀 찾아봤습니다! 내용을 요약해 정리하면, WebView 앱 내의 웹 페이지를 표시하는 데 사용하는 기능 (기본적으로 앱 내에 번들로 제공되는 웹 브라우저의 축소판) 일반적으로 앱에 내장되어 앱 외부에서 액세스할 수 없음 기능이 제한적일 수 있음 (동일한 기능을 지원하지 않거나 특정 유형의 웹 콘텐츠를 렌더링하는데 어려움을 겪을 수 있음) In-AppBrowser 사용자를 별도의 웹 브라우저 앱으로 리다이렉트 하지 않고 앱 자체 내에서 웹 페이지를 열 수 있도록 해주는 기능 앱 내에서 액세스 할 수 있는 기능이며, 일반적으로 장치의 기본 웹 브라우저를 기반으로 함 사용자의 기본 웹 브라우저와 동일한..

#1 들어가기 오늘 포스트는 Next JS에서 URL 직접 접근 막기와 관련하여 글을 써보도록 하겠습니다. 항상 기능을 고도화 하는 과정에서 빠질 수 없는 부분인 것 같습니다. 서비스를 출시할 때 내가 아닌 타 사용자들이 쓸 때 어떠한 환경이 좋은 환경인지 어떤 사용자 경험이 좋은 경험인지에 대해 지속적으로 고민을 해야 할 것 같습니다. 그런 부분에 있어 로그인을 해야만 접근할 수 있는 페이지에 URL을 직접 치고 들어갔을 때 접근이 된다면 보안에 큰 타격이 되겠죠? 그 전에 Next Docs를 한번 살펴봅시다 ! #2 NextJS DOCS Next의 구동순서는 _app.js와 _document.js가 제일 처음 실행되며, 두 파일 모두 pages 폴더 안에 있어야 한다. 1. _app.js 최초로 실행..

7월달에 어드민 개선하기 글을 쓰고나서 이제야 어드민 프로젝트 재구축을 완료하였습니다. 중간에 다른 업무와 병행하느라 예상했던 것보다 좀 더 걸렸네요. 많은 문제가 있던 어드민을 완료하고 이제 QA 진행에 들어갔습니다. 기존에 제기 되었던 문제(Recompiling 시간, 타입추론, 버그 양산 코드 제거, API 문제 등)들은 당연히 다 해결되었습니다. 항상 어드민 작업을 맡게 되면 그리 규모가 크지도 않은 프로젝트의 Recompiling 시간 때문에 한숨을 쉬었던 기억이 많았는데 되게 뿌듯하면서도 문제가 생기지 않을까 염려되기도 하네요. 오늘은 어드민 프로젝트를 다시 작업하면서 느꼈던 많은 부분들 중 제 스스로의 피드백과 함께 회고글을 작성해볼까 합니다. - 사용기술 React, React-router..

글을 쓰기에 앞서 어떤 문제가 있다고 해서 무조건적으로 프로젝트를 재구축하거나, 리팩터링을 거쳐서 개선하자는 위험할 수 있다고 생각합니다. 개발자 이외의 사람들이 보기에는 문제없이 잘 진행되어 있는 프로젝트일 수 있고 재구축을 진행하면서 어떤 변수가 일어날지 알 수 없기 때문에 정말 많이 고민하고 신중해야 할 것 같습니다. 1년 전 어드민의 대한 문제가 제기되어 다른 사람 주도하에 어드민이 재구축 되었고 현재 재구축된 프로젝트에 대해 다시 문제가 제기되고 있는 상황입니다. 주도 했던 분의 개발 방식이 저희(현재 프론트 동료분과 저)와 맞지 않았고, 더 이상 이 프로젝트에 관여를 하지 않기 때문에 앞으로 어드민을 개발해 나가야 하는 저희의 개선 의견을 대표님께서 받아들여주셨던 것 같습니다. 문제점 파악하기..

오늘은 react-query에 있는 infinitiQueries와 IntersectionObserverAPI로 무한 스크롤로 작업을 하였는데요. 기존에는 window 객체에 scroll 이벤트로 무한스크롤을 구현했다가 사용자 입장에서 좀 더 원활한 스크롤 이벤트를 할 수 있게끔 개선작업을 진행하였습니다. 여기서 기존 scroll과 intersectionOnbserverAPI를 간단하게 개념정도만 짚고 넘어가봅시다. 기존 scroll 이벤트는 스크롤 발생 시 많은 이벤트가 동기적으로 실행될 수 있으며, 무한 스크롤의 경우에는 scroll 이벤트가 계속 발생되기에 정말 많은 콜백들이 실행될 수 있습니다. 이는 성능에 악영향을 끼치고 큰 부하를 줄 수 있게 됩니다. 이러한 부분을 개선한 API인 Interse..

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications Single Page Application Measurement | Analytics for Web (analytics.js) | Google Developers Single Page Application Measurement This guide describes how to use analytics.js to measure page activity on sites whose content is loaded dynamically without traditional full page loads. Overview A Single Pag..

오늘은 Next.js에 채널톡 달기에 대해서 포스트 해보도록 하겠습니다. 채널톡 설치는 생각보다 간단합니다. https://developers.channel.io/docs/web-installation Installation General case To use Channel Plugin SDK in javascript, insert below script into tag in your html. It will first load up Channel Plugin SDK, then process all necessary steps in order to get Channel ready to use. The only required field to use our SDK developers.channel.io 여..

어떻게 보면 저번 FE에서 OOP의 대한 고민 포스트의 대한 연장선일 것 같네요! API를 클래스로 바꾸어 react-query를 같이 쓰면서 한번 더 깨닫게 된 내용이니까요. 다들 Arrow Function 많이 쓰시나요? function과 Arrow function의 차이점은 저도 직접 경험했다기보다는 어떤 차이점이 있지?라고 찾아보고 이론적으로 접한적이 더 많은 것 같습니다. 간단하게 function VS arrow function의 차이점을 짚고 넘어가봅시다. 일반 함수의 this - 함수를 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩 할 객체가 동적으로 결정된다. 화살표 함수의 this - 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되고, 상위 스코프의 this를 가리킨..