Nochi's Identity

아래 코드 블럭은 이해를 돕기 위해 AI로 만든 예시 코드입니다. 최근 진행한 쿠폰 프로젝트에서 Safari 브라우저의 팝업 차단 이슈를 경험했습니다.크롬에서는 정상적으로 동작하던 기능이었기 때문에 QA 과정에서 발견되었고, 원인을 파악해보니 브라우저의 사용자 이벤트 정책과 관련된 문제였습니다.🧩 문제 상황쿠폰 발급 여부를 확인하는 API를 호출한 뒤 조건이 충족되면 외부 웹사이트로 이동시키는 로직이 있었습니다.초기 구현 코드는 다음과 같았습니다.const handleClick = async () => { const isEligible = await checkCouponEligibility(); // 비동기 호출 if (isEligible) { window.open('https://other-..

최근 Node 버전을 업데이트하다가 @types/node 버전이 어떻게 관리되는지 궁금해져서 찾아보게 되었습니다.핵심 내용은 DefinitelyTyped 저장소의 문서에 정리되어 있습니다.👉https://github.com/DefinitelyTyped/DefinitelyTyped?tab=readme-ov-file#how-do-definitely-typed-package-versions-relate-to-versions-of-the-corresponding-library해당 내용을 정리하고 번역해 보았습니다.1. 기본 전제: Semantic Versioning문서에서는 다음 내용을 전제로 설명합니다.NOTE: The discussion in this section assumes familiarity wi..

글또 9기를 하던 중 좋은 기회로 유데미에서 2개의 강의를 들을 수 있는 쿠폰을 주셨습니다. 매번 프런트엔드의 틀에만 갇혀 있다는 생각이 들어 "NodeJS 완벽 가이드"를 수강하게 되었습니다. 저는 앞으로 개발자로 살아가기 위해서라면 언어 또는 프레임워크를 아는 것이 아니라 매커니즘을 이해해야 한다고 생각했기에 해당 강의에 궁금함이 많았습니다. 유튜브에서 조금 공부한 적이 있지만, 내용의 깊이가 상대적으로 얕거나 2차 강의를 팔기 위해 빌드업으로 낸 강의들이 대부분이었기에 동영상 강의에서 만족할 수 없었습니다. 그러나 유데미 강의를 듣게 되면서 생각이 바뀌었습니다. NodeJS 코드 작성하는 법만 알려주는 줄 알았는데 NodeJS가 컴퓨터에서 어떻게 동작하는지컴퓨터 구조까지 상세하게 알려주어서 감명 깊..

최근에 React-Native로 프로젝트를 하면서 공식문서를 제대로 읽어보지 못한 것이 아쉬워서 이번에 공식문서를 천천히 살펴보려합니다. Core Components and Native Components React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 안드로이드 및 iOS 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. React Native를 사용하면 JavaScript를 사용하여 플랫폼의 API에 액세스할 뿐만 아니라 재사용 가능하고 중첩 가능한 코드 묶음인 React 컴포넌트를 사용하여 UI의 모양과 동작을 설명할 수 있습니다. Views and mobile development Android 및 iOS 개발에서 뷰는 UI의 기본 구성 요소로, 텍스트, 이미지를 표..

출처: https://www.youtube.com/watch?v=-IqIqJxC-wo Mistake : Separating related state Solution : Unify related state 코드를 분리할 때 가장 일반적으로 볼 수 있는 것 중 하나인 관심사를 분리하는 것부터 시작합니다. 해답은 매우 간단하며, 즉 관련된 상태에 대해 이야기 할 때 관심사가 같은 상태를 통합하는 것입니다. 여기서 개념은 속성이 서로 관련되어 서로 적용되는 상태에 대해 생각하는 것 입니다. function App() { const [address, setAddress] = useState(""); const [city, setCity] = useState(""); const [country, setCountry..

참고: Do it! 리액트 프로그래밍 요즘 리액트 네이티브에 빠져 있어서 리액트 네이티브로 앱을 만들어보고 있습니다. 모바일에서 보여지는 UI를 보면서 신기하기도 하고, 내가 표현할 수 있는 범위가 확장함에 따라서 재미가 많이 컸던 것 같습니다. 기본적으로 셋팅하면서 스트레스를 많이 받았지만 공기계도 꺼내보고 이것저것 코드를 치면서 핸드폰에서 나오는 결과물이 신기하여서 너무 좋았습니다. 그러나 앱을 만들고 싶어서 시작한거라 리액트 네이티브가 어떻게 동작하는지 알아보지 않고 사용하였습니다. 그러다보니 이게 어떻게 동작하는지 알아보고자 글을 정리하게 되었습니다. React Native 모바일 앱 개발에서 ‘네이티브’라는 단어는 ‘운영체제를 만들 때 사용하는 프로그래밍 언어와 똑같은 언어로 만든’이라는 의미입..

Next.js 구조에 대해서 제대로 모르고 사용하다보니 쉽게 해결할 일도 어렵게 만드는 것을 가끔 겪는 것 같습니다. 오늘은 Next.js에서 제공해주는 프로젝트 구조에 대해서 간단하게 살펴볼 예정입니다. 공부하게 되면서 새롭게 알게 되는 것들을 적용할 수 있으니 한번 블로그를 적으면 알아보겠습니다. Top-level folder 최상위 폴더에는 app, pages, public, src가 있습니다. app app : App Router를 사용하기 위한 폴더입니다. Next.js에서 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components를 기반으로 구축된 새로운 매커니즘입니다. page : Page Router를 사용하기 위한 폴더입니다. 페이지 개..

얼마 전, [모던 리액트 Deep Dive] 책을 읽고 회사에서 1월 사용하는 상태 관리 라이브러리를 zustand로 변경하였습니다. 왜 zustand를 선택하였고, 그 이야기를 해보려고 합니다. 여러분들은 redux, mobx, recoil, jotai, zustand, valtio 이들 중 어떤 것을 쓰시나요?혹시 valtio를 쓰시는 분이 있다면 굉장히 힙하다는 생각이 드네요. 회사에서 zustand 를 쓰기 전인 2022~2023년 약 2년 동안 recoil 을 사용하였습니다. 2021년에 입사했을 땐 redux를 쓰고 있었구요. redux 로 짜여진 프로덕트에서 거의 대부분의 상태가 redux 와 결합되어 매우 거대한 스토어를 이루고 있었습니다. 그것을 사용하기 위해 action 또한 너무 거대..

무엇부터 써내려가야 할지 모르겠다.“쓰다 보면 완성되겠지. 2023년 처음으로 기억을 되돌려서 시작할까? 어디서부터 시작할까..”# 서비스 종료작년에 B2B 위주의 회사에서 데카킬이라는 서비스를 기획하였다. 트위치 플랫폼에서 제 3자가 실시간으로 퀴즈를 내고 문제를 맞히면 포인트를 받고, 그 포인트를 통해서 상품을 살 수 있는 그러한 플랫폼이었다. 데카킬을 만드는 중간에 팀에 합류되었다. 데카킬 팀에는 10년 차 이상의 수준급 디자이너, PM이 있었지만 나는 프론트엔드로서 React도 제대로 모르고 JS도 잘 몰랐기 때문에 신입이 만든 Vue.js를 이해하지도 못하였다. 나는 문제를 출제하는 페이지를 React로 만들었고 신입은 트위치 서드파티 플랫폼을 Vue.js로 만들었다.와이리 통일성이 없너! 프..

글또 9기로써 첫 글이다. 저번 달부터 갑작스럽게 살고 있는 집이 경매로 넘어가버려서 시작부터 1회차를 패스하였는데, 이제 글을 제대로 써보려고 한다. 올해 5월 회사에서 LCK Korea에서 사용할 웹 사이트를 제작할 때의 일이다. 그 당시 제품의 필터 구조에서 (list)와 (list)가 있었다. 리그(예시: 2023 LCK Summer)를 선택하면 해당 리그의 모든 경기를 의 으로 보여주는 방식이었다. 한 리그를 onClick하면 에서 약 90개 정도의 을 보여주었다. 그때까진 웹에서 크게 부담이 없었고, 무사히 넘어갈 수 있다고 생각했다. 그러나 쉽게 넘어가는 날이 없었다. 고객사 측에서 연락이 왔다. “에 [전체]라는 list item을 추가하고 에는 지금까지 있었던 모든 게임을 보여주세요.” ..