본문 바로가기
반응형

개발노트58

[해결]moment.js deprecated이슈로 인해 datetime 라이브러리 교체 (feat. day.js) moment.js의 deprecated소식을 접하고 나서 이걸 이제야 알았다니 자존심이 상했다. 그렇지만 그럴 시간이 없어 빠르게 프로젝트가 완성되기 전 교체작업을 진행하려 한다. 원인 느린속도 무거운 용량 가변성 예측이 어려운 디버깅 여러 Datetime 라이브러리들과 비교해보았을때 크게는 3배까지 차이가 날정도로 느린경우도 발생한다. 용량 또한 2배~5배정도는 차이가 있는 것으로 보인다. 사실 가장 큰문제는 mutable이라는 점과 디버깅이 어렵다는 점이다. const now = moment(); console.log('변경 전 now : ',now.toLocaleString()); const targetDay = now.add(10, "day"); console.log('변경 후 now : ',no.. 2023. 8. 29.
[해결] Invalid date cross-browsing 날짜객체 에러(크로스 브라우징) 실시간 시계를 표시하는 컴포넌트가 있는 프로젝트를 배포하고 나서 테스트과정에 문제를 발견했다. 프로젝트 특성상 크로스 브라우저를 체크할 필요는 없지만 IOS환경인 safari 브라우저에서 date객체를 사용한 시계, 날짜들이 표시되지 않고 Invalid date가 발생하는 것이다. 발생하는 문제를 파악하기위해 찾아보니 의외로 간단한 문제였고 이는 cross browsing 개발을 할때에 고려해야하는 사항이다. 문제점 chrome에서는 정상작동이며 safari에서만 날짜가 표기되지 않는다. 원인 safari에서는 YYYY.MM.DD형식의 DateFormat을 지원하지 않는다. 즉 date객체에서 포맷을 변경할때 주의해야하는 건데, 기존에는 moment를 사용하여 현재 시각을 받아서 포맷을 바꾸어주는 간단한.. 2023. 8. 24.
Docker_1탄 DockerFile Example with Next.js 도커파일 작성방법! 개발을 하다보면 운영체제에 따라서 오류가 발생하거나 실해이 안되는 경우가 발생할 수 있다. 그래서 가상의 PC환경을 셋팅하고 해당 환경에 작업중인 프로젝트를 이용해서 개발하는 도구를 사용한다. 오늘 알아볼 이 도구가 바로 Docker 도커를 사용하는 이유는 여러가지가 있는데 대표적으로 꼽자면 다음과 같다. 개발환경과 배포 환경을 동일하게 맞추어 개발 시 발생하지 않았던 문제를 마주하지 않기 위해서 배포하는 과정자체가 단순화되고 도커로 개발하다가 해당 도커를 활용해 배포까지 이어질 수 있어서 하나 더 Docker Compose를 이용할때 진정 편리함이 두드러진다는 것이다. 본 글은 Next.js를 기반으로 하기때문에 파일예시는 다른 프레임워크와 다를 수 있다. 그럼 본격적으로 Docker를 설치하고 셋팅해.. 2023. 8. 23.
React,Next.JS에서 Table Element를 Excel파일로 다운로드하기 (feat. XLSX) 회사업무를 하다보니 엑셀파일과 연동하는 기능이 필요했다. 객체를 단순히 엑셀화하기보다 화면에 렌더링 된 table을 읽어 엑셀로 뽑을 수 있다면 좋겠다는 생각을 했다. 관련 라이브러리를 찾다보니 가장 많은 사용자를 가지고 있으며 자유도가 높은 SheetJS의 xlsx 라이브러리를 채택했다. 관련 문서는 https://www.npmjs.com/package/xlsx를 참고하여 진행했다. 1. 설치 "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz" 설치법이 조금 다른것같다. 원래라면 npm install xlsx와 같은 명령어를 했겠지만 package.json에서 위 url을 dependencies에 넣고 npm install을 해준다. 다음으로는.. 2023. 8. 21.
[Google Cloud Platform] Next.js App Engine 자동배포하기 (feat. Cloud Build) 지난 번 매우 힘들었던 배포 환경변수설정을 해결하고 CICD를 완성하기 위해 CD = Continuous Delivery (or Deploy)를 시도해 본다. 예외적으로 AWS가 아닌 Google Cloud Platform (이하 GCP) AppEngine(이하 GAE)를 사용하기에 다른 배포과정과는 다를 수 있다. 혹시 수동으로 배포를 해보지 않았거나 App Engine 서비스를 만들지 않았다면 먼저 선행해야하고 [해결] Next.js GCP AppEngine 배포 환경변수 분기 Next.js 프로젝트를 완료한 후 배포환경을 설정하던 도중 예상치 못한 난관에 마주했다. Google Cloud Platform의 App Engine을 사용해 배포하는데 문제는 project-dev서비스와 project-pr.. 2023. 8. 17.
[해결] Next.js GCP AppEngine 배포 환경변수 분기 Next.js 프로젝트를 완료한 후 배포환경을 설정하던 도중 예상치 못한 난관에 마주했다. Google Cloud Platform의 App Engine을 사용해 배포하는데 문제는 project-dev서비스와 project-prd서비스로 나누어 각각 환경변수를 다르게 사용하려했다. dev서비스에는 .env.development 파일을, prd서비스에는 .env.production파일을 사용하도록 하려는데 지금까지 시도해본 모든 방법, 설정은 모두 한쪽만 다르게 설정해내지 못했다. 내가 생각한 순서도에 따르면 다음과 같다. "scripts": { "dev": "next dev", "lint": "next lint", "start:dev": "APP_ENV=development next start", "sta.. 2023. 8. 11.
[해결] 데이터 column-key가 다르다?? (data mapper module) 기존 직장 폐업으로 인한 이직 후 프론트엔드를 전담하게 되었다. 기존 VueJS를 사용하던 프로젝트를 인계받고 소스를 한참 들여다 보던 도중 등골이 오싹하기 시작했다. 같은 의미와 목적을 가진 데이터의 컬럼명 (key)가 다르게 response되는 것이다. 예시 ) response 1 { name : "장준수", age : 29, address : "서울시 강서구 ..." } response 2 { UserName : "장준수", Old : 29, Place : "서울시 강서구 ..." } 맙소사 카멜, 스네이크케이스와 같은 표기법도 다르고 키값이 다른경우가 종종 보이는 것이다. 이유를 살펴보니 현 직장 특성상 기계의 데이터를 실시간으로 받는 서버가 따로 존재해 발생하는 것으로 추정된다. 또 개발초기 코.. 2023. 8. 7.
[미해결] React Infinite UpScrolling 웹, 앱에서 무한스크롤이 많이 사용된다. 작업난이도도 쉬운편이고 여러가지 라이브러리나 예재가 많아 구현하는데 문제가 거의 없는편이다. 하지만 이번에 마주친 버그는 스크롤을 위로 올렸을때 과거, 이전목록을 불러오는 UpScrolling이다. 실시간채팅에서 과거 채팅을 불러올때 많이 사용되는데 과거 데이터를 불러오게 되면 위쪽에 추가되고 사용자 화면에 표현되는 데이터는 바뀌면 안된다. 그런데 immutability (불변성)에 의해 문제가 발생하는 것같다. 동작방식 1. UpScroll을 통해서 사용자가 상단근처 또는 상단에 도달했을때 과거 데이터를 불러온다. 2. 다음과같이 채팅메시지리스트를 바꾼다. ...code const [messages,setMessages] = useState([]); ...get.. 2023. 5. 30.
디자인패턴 M-V-VM에 대한 고민 MVVM디자인 패턴으로 개발한지 8개월이 넘어간다. Model - View - View Model로 분기하여 작업해 재사용성을 극대화 할 수 있다. View는 렌더링 Model은 비즈니스 데이터 형식 정의 ViewModel은 View에서 사용되는 데이터들을 관리하게 된다. 그런데 여기서 의문점이 있다. 1. View에서는 State사용을 피해야하는 건지?React Next.js는 아주 간편한 변수관리 State라는게 있다. 예를들면 이런것이다. function Input():ReactElement { const [value, setValue] = useState(''); const handleChangeValue = (e:ChangeEvent) => { const { value } = e.target; .. 2023. 5. 16.
[해결] Socket.io 웹뷰 접속지연 재직중인 회사에서 개발중인 프로젝트에 Socket.io를 도입하기로 했다. 서버개발자와 협업하여 크게 어려움 없이 개발하며 Socket.io를 활용한 실시간채팅을 구현해냈다. 그런데 이게 왠걸 Local환경에서 잘만되던게 웹뷰 (하이브리드앱)에서만 접속이 지연되는 것이 아닌가... 원인을 파악해보자. 접속순서는 이렇다. connect -> connection -> joinRoom 먼저 connect는 소켓 서버와 연결을 요청한다. connection은 서버에서 room을 줄 준비가 되었음을 의미한다. connection을 수신하면 joinRoom요청으로 입장과 동시에 메시지, 상대방, 나의정보를 받는다. 발견사항 1 매번 접속지연이 발생하는 것이 아니라 약 3회에 1번꼴로 종종 발생한다. 이것은 사용자에.. 2023. 5. 16.
Library React Swiper 응용하기 (module, props...) 기본편 보러가기 Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm 3pdev.tistory.com 기본편에서 말했듯 React Swiper는 여러가지 모듈, props, style등을 활용해 자유도를 높였다. 먼저 모듈부터 살펴보자. Navigation 모듈은 슬라이더에 이전/다음 버튼을 추가한다. 클릭하면 슬라이더가 넘어간다. import SwiperCore, { Navigation } from 'swiper'; import 'swiper/css/.. 2023. 3. 29.
Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm install swiper or yarn add swiper 2. 기본 문법 import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { IListItem } from 'src/common/view-model/list.view-model'; interface IProps{ list : IListItem[]; } /** * 스와이퍼 슬라이드 이미지 * @param props.list i.. 2023. 3. 27.
반응형

티스토리툴바