Nochi's Identity

글또 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을 추가하고 에는 지금까지 있었던 모든 게임을 보여주세요.” ..

: 클라우드를 효율적으로 쓰기 위한 방안 폭발적인 데이터의 증가와 도전 과제들 전 세계적으로 101 ZB(제타 바이트)의 데이터가 생성된다. 머신러닝의 데이터 활용으로 인한 데이터의 증가 추세이다. 과제: 다양한 유형의 데이터, 확장성의 한계, 높아지는 비용 위험: 데이터 보호와 연속성 보장이 복잡해짐에 따라 위험 증가 기회: 데이터의 수집 단계에서 가치 창출의 단계로 이동하며 혁신 주도 [워크로드를 위한 AWS 스토리지 서비스] 서비스: 데이터 보호, 데이터 스토리지, 데이터 활용, 데이터 이동 스토리지 비용 최적화 기술 스토리지는 오브젝트와 블록 스토리지가 있다. 오브젝트 스토리지: 비정형 형식(객체)으로 데이터를 저장하고 관리하는 기술. 스토리지 분석 스토리지 클래스 데이터 수명 주기 인텔리전트 티..

박진우 - AWS Agenda 모던 데이터 환경에서의 데이터 분석 및 도전 과제 왜 서버리스 데이터 분석인가 목적에 맞는 서버리스 분석 서비스 살펴보기 서버리스 선택 가이드 마무리 모던 데이터 환경에서의 데이터 분석 및 도전 과제 모던 앱은 엄청난 양의 데이터를 가지고 있다. 2023년에는 123ZB가 발생할 것으로 예상한다. 고객은 데이터로 다양한 가치를 만들길 원한다. ex) 데이터 레이크에 쌓고 분석된 데이터를 활용하여 인사이트, 추천 등에 활용한다. 데이터 레이크: 구조화되거나 반구조화되거나 구조화되지 않은 대량의 데이터를 저장, 처리, 보호하기 위한 중앙 집중식 저장소 AWS의 데이터분석 도전 과제 더 복잡해지는 데이터 환경 폭발적인 데이터 증가 새로운 데이터 소스 더욱더 다양한 포맷 다양해진 ..