Programming27 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. 사이드 프로젝트 톺아보기[1] - 나만의 만다라트 만들기 들어가기 오랜만에 예전에 했던 사이드 프로젝트들을 살펴보기로 했다. 리액트로 만든 나의 첫 사이드 프로젝트! 만다라트부터 이야기를 해보려고 한다. tmi가 정말 많을 예정이다. 그냥 tmi 그자체 . 케케케 대학시절 친구의 추천으로 알게 된 만다라트 기법! 하나의 큰 목표를 가지고 그를 실행하기 위한 목표를 9x9 Table에 차근차근 세워나가는 기법이다. 일본의 야구선수 오타니 쇼헤이가 작성했다고 해 한 때 인기를 끌었다고 한다. 나도 한 때 열심히 만들긴 했었지 ^^;;; 당시에 반짝 재밌게 목표를 세웠었지만 세월이 지남에 따라 기억 속에서 잊혀져 있었는데, 우아한 테크코스를 하면서 한 코치분께서 만다라트를 소개해주시면서 다시 생각이 났다. 추억,,,,, (포코 감사해요 푸힝) 웹 개발자라는 새로운 .. 2021. 9. 18. Input을 구현하는 다양한 방법(Input, Textarea, ContentEditable) (프로젝트 앞광고) https://mandalart.ddongule.com/ 이번에 만다라트라는 작은 프로젝트를 사브작 사브작 만들면서 사용자 입력을 받는 Input에 대한 고민을 하게 되었다. 내가 원래 만들고자 한 내용은 아래와 같은 모양이었다. 1. 정사각형 모양 (contentEditable, Textarea, Input) 2. 글씨가 vertically, horizontally centered (contentEditable, Input) / Textarea도 가능하긴 한 것 같은데 아직 답을 찾지 못했다ㅠ 3. multi line이 가능 (contentEditable, Textarea) 처음에는 단순히 Input으로 구현했지만, 내가 원하는 multi line을 만드려면 textarea로 바꾸어.. 2021. 5. 10. CSS Animation - Rotate(빙글빙글 돌기) 한 자리에서 infinite하게 도는 animation을 만들고 싶어서 찾아봤다. 애니메이션은 아래와 같이 사용할 수 있는데, 보통 두번째나 세번째처럼 많이 사용하는 것 같다. 일단 keyframes에 대해 알아보자면, 어떤 모양에서 어떤 모양으로, 혹은 어디에서 어디로 이동할 지에 대해 정해줄 수 있는 메소드(?)다. 나는 360도 도는 동작을 원해서 아래와 같이 적어주었다. from-to 말고도 0% - 100% 이렇게 작성할 수 있다. @keyframes rotate { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360.. 2021. 4. 6. 이전 1 2 3 다음
