본문 바로가기

전체 글58

숨돌리기 상반기에 틈날때마다 2022년 회고를 쬐끔씩 작성하고 있었는데 오랜만에 로그인하니 다 날아갔다. 조금씩 작성해뒀던 기술 글들도 다 날아갔다. 임시저장이 0이라니!!!!!! 말도안돼 다시 돌려내~~~!!!!!! 다시 써야지 뭐 어쩌겄수. 엉엉. 상반기에 너무 정신이 없어서 블로그에 1도 신경을 못썼다. 사실 1도 못쓴건 아니고 그래도 계속 기웃거리긴 했다. 맨날 써야지 하고 들어와서 괜히 한번 임시저장도 해두고 가고 댓글도 확인하고 가고 했었는데 으앙. 벌써 6월이라니 시간 참 빠르다. 나이먹으면 시간이 점점 빨라진다는게 이런건가! 악! 올초에 뜻맞는 친구들과 작년에 함께 열심히 만들던 프로덕트를 내려놓게 됐다. 할말은 많지만 여기에 쓰긴 어려울 것 같다. 처음에는 동료로 시작해서 마지막에는 거짓으로 점.. 2023. 6. 10.
React에서 Modal을 만드는 다양한 방법(feat. Promise) 서비스를 만들다보면 다양한 상황에서 모달(Modal/Dialog)을 활용하게 된다. 단순한 UI이지만, 구현 방법은 꽤나 다양하다. 나는 원래 provider를 이용해 open/close만을 담당하는 모달을 많이 만들고 사용해왔다. (사실 대부분의 경우, 이런 단순한 모달이 가장 많이 사용되는 것 같다. 아마두?!) 그런데 최근, 모달이 열릴 때 작업을 잠시 stop했다가 모달이 닫히면 이후의 작업을 이어서 진행해야 하는 flow가 생겼다. (우리 서비스의 경우는 아니지만 모달에서 Form을 사용해서 API를 통해 검증하고, 검증이 안되면 모달이 닫히지 않도록 해야하는 등의 작업이 예시가 될 수 있을 것 같다!) 물론 다른 방법으로도 이런 flow를 구현할 수 있기는 했지만, 어차피 모달이 열리면 사용.. 2022. 8. 16.
[ReactJS] Google Translate 서비스 사용 불가 오류 해결하기 이번에 실리콘밸리에서 우리 서비스를 이야기 할 수 있는 자리가 생겼따. 너무나도 갑작스럽게 생긴 자리여서 영어 버전을 개발해서 대응하기는 어려웠고, 따라서 (구리긴하지만) Chrome에 내재된 Google Translate를 사용해서 서비스를 소개하기로 했다. (흑흑) 그런데 잘 동작할 것만 같던 이 Google Translate가 제대로 동작하지 않았다. 🥲 이상하게 저 번역 버튼을 누르고 나면 몇 초 뒤 혹은 다른 페이지로 이동했을 때 DOM Exception이 뜨면서 페이지가 마비됐다. 콘솔에 찍힌 오류는 아래와 같았다. (2번은 다른 사람들이 요 오류도 많이 난다길래 ^^.. 가져와봤읍니다.. 저는 1번 오류만 났어요..) // 1. removeChild() 문제 DOMException: Fa.. 2022. 7. 25.
AWS Lambda@edge 사용해서 ".html" 지워버리기 (feat. NextJS) NextJS를 사용해서 배포하면, 뒤에 www.test-url.com/home.html (가칭) 이런 형태로 뒤에 html이 붙는 걸 확인할 수 있다. 그냥 React.js를 활용할 때와는 달리, NextJS는 SSR을 활용하기 때문에, 이런 현상이 있는 것 같다. 이런 형태의 URL은 도저히 용납할 수 없는(?) 형태였기 때문에, 최우선순위를 두고 찾아봤다. 어떻게 검색해야 할 지도 약간 가늠이 안가서, 초반엔 좀 고생을 했다. dynamic routes 하면 /post/[id] 형태로 나오는 친구들을 라우팅해주는 이야기만 나오고.. 흑흑.. 하지만 해결했다. 기분니가 좋다. 후후 해결한 방법에 대해 간략하게 정리해보겠다. 아래 해결방법은 Next.js + S3 + Cloudfront로 이미 프로젝트가.. 2022. 4. 30.
Monaco Editor를 활용해서 React 기반 프로젝트에 코드 에디터 적용하기! 최근 개발하면서 웹상에 SQL 쿼리를 작성하는 에디터를 넣어야하는 일이 생겼다! 빠르게 만들어야하는 MVP개발이었기때문에, 에디터를 직접 만들기보다는 이미 잘 만들어져있는 에디터들을 골라 그 중 하나를 사용하기로 했다.(뭔가 아쉽.. 호호) 그래서 아래의 내용을 포함한 에디터를 찾아 비교해보고, 가장 나은 에디터가 아니라 내 입맛에 맞추어 쉽고 빠르게 개발할 수 있는 에디터를 찾아 사용하기로 했다! 하핬핬! 1. 라이선스가 무료 2. 키워드 하이라이터 기능 3. 들여쓰기 지원 4. 라인넘버 지원 5. SQL 언어 지원 (+ 자동완성 기능 등) 다양한 에디터들을 찾을 수 있었는데, 아무래도 많은 사람들이 사용하고 있어 활발하게 커뮤니티가 유지되면서, 쉽고 빠르게 개발할 수 있는 라이브러리들에 우선순위를 두.. 2022. 3. 18.
React에서 상태관리하기 (feat. Context API, Redux, React Query) 최근에 프론트엔드 상태관리에 대해 같이 일하는 인턴분들과 잠깐 이야기 할 일이 생겼다! 요즘 정말 많은 상태관리 도구들이 있는데, 이 중에서 무얼 어떻게 선택해야할 지 잘 모르겠다는 말에 정말 공감하기도 했고, 또 막연하게 알고있던 내용들이 말하면서 제대로 정리가 되지 않는다는 느낌을 받아서 한번 조금 정리해보면 좋을 것 같다는 생각에 글을 쓰게 되었다. 그리고 요즘 본딩 개발을 하면서 빠른 개발을 위해 내가 가장 잘 사용하는 Context API를 택해서 개발을 하고 있는데, 추후에 Recoil이나 Redux 등의 상태관리 툴을 도입해보려고 한다.(언제가 될지는 모름^^...) 뭐.. 그래도 미리 한 번 정리해 둘 겸 해서 오랜만에 글 남겨본당. 호홋 맨날 글써야지 써야지 하고 끄적끄적 제목만 적어두고.. 2022. 2. 27.
.env를 사용하기 위한 webpack 설정 내가 까먹지 않기 위한 webpack 파일 설정 CRA 없이 Webpack 설정하다보면 process.env가 마음대로 안불러와지는데, dotenv, webpack에서 제공하는 defineplugin 사용하면 쉽게 해결된다. $ npm install -D dotenv // webpack.config.ts import dotenv from 'dotenv' // 안되면 const dotenv = require('dotenv') ... plugins: [ ... new DefinePlugin({ 'process.env': JSON.stringify(dotenv.config().parsed), }), ], ... 2022. 1. 14.
React 앱에 Next.js 끼얹기 + EC2 배포하기 들어가기 전에.. 이번 접근성 미션을 하면서 React로 구현해놓은 페이지를 Next.js를 이용해 Migrate하고, EC2로 배포하라는 미션을 받았다! 본격적으로 들어가기 전에, Next.js와 우리가 배포할 AWS EC2가 도데체 뭔지 한 번 짚고 넘어가보자. ✔️ Next.js가 뭘까? The React Framework for Production Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No .. 2021. 10. 6.
정적인 페이지를 AWS S3 + Cloudfront로 배포하기 들어가기 전에.. ✔️ 정적인 웹 페이지(Static Web Page)가 뭘까? 언제 접속해도 같은 응답을 보내주는 페이지라고 생각하면 쉽다. 말 그대로 정적! 움직이지 않는! 클라이언트가 요청을 보내면, 웹 서버에 업로드된 파일이 추가적인 처리과정 없이 그대로 전달(응답)되는 페이지를 정적인 웹 페이지라고 한다. 예를 들면, 개인이나 회사의 소개 페이지 정도가 있겠다. 앞으로 진행될 내용은 이런 정적인 웹 페이지를 배포할 때 사용할 수 있다. 우리는 제목에 나와있듯이 AWS S3을 통해 배포할 것이다. 사실 정적인 웹 페이지를 배포하는 방법은 굉장히 다양하다. Github 유저라면 한번 쯤 시도해봤을 Github pages, 혁신적인 Netlify와 Vercel, 지금 소개할 AWS S3 .. 등등 ... 2021. 10. 5.

티스토리툴바