- 전체보기(72)
- next.js(13)
- React(10)
- typescript(6)
- 10MM(5)
- framer-motion(4)
- 디프만(4)
- DND(3)
- github issue(3)
- Numble(3)
- NA LAB(3)
- i18n(3)
- svg(3)
- sprite svg(3)
- Portal(2)
- 회고(2)
- useLocalStorage(2)
- hydration(2)
- i18next(2)
- 드림캐쳐(2)
- Emotion.js(2)
- SSR(2)
- GitAnimals(2)
- js(2)
- 기록해드림(2)
- 십분만(2)
- next export(2)
- preat(2)
- zustand(2)
- 트러블슈팅(2)
- depromeet(2)
- 테오의 스프린트 14기(2)
- STRICT_MODE(2)
- 뒤로가기 동작 커스텀(2)
- 자바스크립트(2)
- NAVER MAP(1)
- agent(1)
- setIntervel(1)
- 해커톤(1)
- marker clustering(1)
- yarn(1)
- 웹 성능 최적화(1)
- XMLHTTPRequest(1)
- keepalive(1)
- pointer-event(1)
- 면접(1)
- 별점 평가(1)
- 프론트엔드(1)
- chatGPT(1)
- getServerSideProps(1)
- 동기적 언어(1)
- unload(1)
- persist middleware(1)
- next-i18next(1)
- storybook(1)
- useEffect(1)
- 스톱워치(1)
- visibilitychange(1)
- 비동기(1)
- StoryFn(1)
- .html(1)
- 뒤로가기 커스텀(1)
- ESLint(1)
- app Directory(1)
- php(1)
- env(1)
- stylelint(1)
- svgo(1)
- next13(1)
- next/router(1)
- AbortController(1)
- safari(1)
- custom marker(1)
- Jira Issue(1)
- 원티드 프리온보딩(1)
- i18next-http-backend(1)
- Cloudflare(1)
- interface(1)
- github actions(1)
- CriOS(1)
- NextRouter was not mounted.(1)
- react-naver-maps(1)
- Google Analytics(1)
- Satori(1)
- gtag(1)
- html to svg(1)
- vite(1)
- 마커 클러스터링(1)
- pointer(1)
- body(1)
- history(1)
- html2canvas(1)
- Enum(1)
- CSS(1)
- ios Chrome(1)
- Hydration failed(1)
- 코드 저장소(1)
- postcss(1)
- stopwatch(1)
- react 18(1)
- script(1)
- touchAction(1)
- CSR(1)
- pakage version(1)
- junction asia 2023(1)
- localstorage(1)
- 다이나믹프로그래밍(1)
- yarn start(1)
- 별점 평가 기능 구현(1)
- metamon(1)
- 인가코드(1)
- 301 status(1)
- custom hook(1)
- svg 최적화(1)
- spa(1)
- pushState(1)
- next/navigation(1)
- 면접 질문(1)
- dangerouslysetinnerhtml(1)
- Feedback(1)
- icon(1)
- 네카라쿠배 개발자와 함께 VanillaJS 활용하기(1)
- redirect(1)
- seo(1)
- 네이머 맵(1)
- ssg(1)
- CLIENT_FETCH_ERROR(1)
- JAKA(1)
- GA(1)
- 전역상태라이브러리(1)
- 페이지 이탈(1)
- AWS Amplify(1)
- mobile(1)
- 디자인 패턴(1)
- react/no-unknown-property(1)
- SPARCS(1)
- 이벤트 루프(1)
- 테오의 스프린트(1)
- react-beautiful-dnd(1)
- createPortal(1)
- vscode(1)
- Web API(1)
- 카카오 로그인(1)
- github api(1)
- react-dom-router v5(1)
- History Stack(1)
- 자바스크립트 엔진(1)
- Client Side Rendering(1)
- Image Optimization Loader(1)
- @emotion/react/types/css-prop(1)
- formData(1)
- 나랩(1)
- react-naver-map(1)
- VanillaJS 로 신년메시지 주고받는 사이트를 SPA 로 만들기(1)
- 구글스프린트(1)
- AI 단톡방 만들기(1)
- popstate(1)
- http(1)
- 브라우저 뒤로가기(1)
- no-unused-vars(1)
- 브라우저 뒤로가기 동작(1)
- AWS S3(1)
- next-auth(1)
- browser(1)
- DOM 이미지 다운(1)
GitHub Issue 기반 피드백 시스템 개선기
GitHub Issue를 활용한 피드백 시스템을 운영하면서 예상치 못한 문제가 발생했습니다. 처음에는 모든 게 잘 돌아가는 것처럼 보였는데, 어느 날 로그를 확인하다가 이상한 점을 발견했죠.
브라우저 종료 시 안정적으로 API 요청하기: keepalive 옵션 활용기 🚀
다른 서비스간 로그인 연동 기능에서 특별한 요구사항이 있었습니다. 서비스를 이탈하면, 실패 상태를 다른 서비스에 API로 알려줘야 했죠. 단순히 생각했을 때는 `unload` 이벤트에 API를 호출하면 될 것 같았지만... 실제로는 그렇게 간단하지 않았습니다 🤔
react 18 + react-dom-router v5 호환 문제 해결 - url은 변경되는데 페이지는 새로 그리지 않는 문제
React 17에서 18로 버전을 업그레이드하면서 예상치 못한 라우팅 문제가 발생했습니다.
스크립트로 Sprite SVG 자동 생성하기
제가 만든 스크립트의 전체적인 흐름은 이래요: 어떤 sprite SVG를 만들지 선택해요. 선택한 키에 따라 sprite map 정보를 가져와요. SVG 리스트 데이터로 sprite SVG를 생성해요. 생성된 sprite SVG를 파일로 저장해요. 스크립트 사용 예시는 아래와 같아요: 이 명령어를 실행하면 스크립트가 동작하여 countryCode....
GitHub Issue로 사용자 피드백 받기
"이 버그 좀 고쳐주세요!", "이런 기능이 있으면 좋겠어요!" GitAnimals 서비스를 운영하다 보니 이런 피드백들이 종종 들어오곤 했어요.
useEffect가 두 번 실행되는 현상을 어떻게 막을 수 있을까요 🤔
코드를 실행하면 useEffect가 한 번만 실행될 것으로 예상하게 됩니다. 하지만 실제로 콘솔을 확인해보면, useEffect 실행이 두 번 출력되는 것을 볼 수 있습니다. 왜 이런 일이 발생하는 걸까요?
뒤로가기시, 모달 띄우기
요구사항 : 뒤로가기 버튼 클릭, 또는 뒤로가기 동작 (브라우저 동작)이 일어나면, 정말 끝내시겠습니다?라는 모달이 뜨게 됩니다.
[10MM] 스톱워치 요구사항
10MM 서비스는 "하루 10분으로 시작하는 습관 만들기"입니다.이 "하루 10분"을 측정하기 위해 스톱워치 기능이 필요했습니다.
React에서 웹브라우저 뒤로가기 동작 커스텀 하기
시간을 기록하는 페이지를 만들며, 해당 페이지에 이탈하는 경우 사용자에게 특정 모달을 보여주어야하는 요구사항이 있었습니다 👀
[i18next] i18next::translator: key "xxx" for namespace "translation" won't get resolved as namespace was not yet loaded 에러 해결
Error: i18next::translator: key "xxx" for namespace "translation" won't get resolved as namespace was not yet loaded
[i18next] Error: You are passing a wrong module! Please check the object you are passing to i18next.use()
Error: You are passing a wrong module! Please check the object you are passing to i18next.use()
[next-i18next] Error: appWithTranslation was called without a next-i18next config
Error: appWithTranslation was called without a next-i18next config 해결
(번역) React.js에서 아이콘을 관리하는 "가장 좋은" 방법
원문 : The "best" way to manage icons in React.js
junction asia 2023 수상 후기
junction asia 2023 팀빌딩 junction asia 2023에서 참가자 모집을 할 당시 나는 IT 연함 동아리를 끝마치고 쉬는 중이였다. 어느날 같이 동아리했던 백엔드 분 한분이 같이 해커톤을 나가자고 연락이 왔다. 이전부터 해커톤같은 경험을 하는