Nochi's Identity

최근에 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 또한 너무 거..

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

" 프론트엔드 개발자 로드맵을 통해 공부해보고자 만들었다. " 인터넷은 어떻게 동작하는가? : 개발자로써 인터넷은 무엇이며 어떻게 동작하는지 확실히 이해하는 것이 중요하다. 인터넷 소개 인터넷을 배우기 전에 네트워크가 무엇인지 이해가 필요하다. | 네트워크 | : 서로 연결된 컴퓨터 또는 기타 장치 그룹 예를 들면, 나의 집에 네트워크가 있고 있을 수 있고, 옆집에도 비슷한 네트워크를 가지고 있을 수 있다. 모든 네트워크가 함께 연결되면서 인터넷을 형성한다. | 인터넷 | : 네트워크의 네트워크 인터넷은 1960년대 후반 미국 국방부에서 핵 공격을 견딜 수 있는 분산형 통신 네트워크를 만드는 수단으로 개발되었다. 수년에 걸쳐 전 세계를 아우르는 복잡하고 정교한 네트워크로 발전했다. 인터넷 작동 방식: 개..