리액트바오

useForm이라는것은 회사에 들어와서 알게 된 React hook이다. 입사후 첫 프로젝트에서 맡은 첫 개발 기능이 로그인이었는데, 난 부트캠프에서 파이널 프로젝트때 했던것 처럼 정규식도 추가하고 이렇게 저렇게 나름 열심히 로그인기능(프론트)을 코드로 짰는데, 며칠뒤 보니 useForm으로 내 코드가 대체 되어있었다. 알고 보니 말이 거의 없으신 부장님이 제 코드를 지우고 다시 짜두신것이었다. 마음속으로 왜 설명도 안해주시고 코드만 교체되어있지.. 조금 기분이 상한것도 사실이었지만 useForm으로 짜여진 코드를 보니 내가 짠 코드와는 다르게 심플하고 뭔가 깔끔한 느낌이 들었다. 그게 내가 useForm을 처음접한 계기이다. 두번째 프로젝트를 진행하면서는 좀 더 자세히 useForm을 보게 되었는데, ..

React Native 2023. 8. 10. 16:19

package.json과 package-lock.json은 Node.js 프로젝트에서 사용하는 두 가지의 파일이다. 이 파일들은 프로젝트의 종속성(dependencies)과 관련된 정보를 저장하는데, npm(Node Package Manager)이나 Yarn 등의 패키지 매니저를 사용하여 종속성을 관리하는 데 도움을 준다. 여기서 잠깐! 1. 지금껏 npm install을 하면서 npm이 그냥 이름인줄 알았다. 아니 ‘이름인줄 알았다’ 고 생각 했다기보단 별 생각 없이 썼던것 같다.ㅋㅋㅋㅋ Node Package Manager의 약자였다니! 새롭게 알게 되니 반갑구만! 2. 종속성(dependencies)디펜던씨 어쩌고도 개발을 하면서 참 많이 듣는데, 데이터의 종속성이라는것은 프로그램의 구조가 데이터의..

react 2023. 6. 30. 16:22

회사에서 새로 만들고 있는 서비스는 리덕스를 사용한다. 지금까지 UI만 개발 했다면, 다음주 정도 부턴 실제 데이터를 가져오게 될텐데 그때 본격적으로 사용해야하기에 미리 집에서 한번 공부를 해보는것이다. 리덕스를 처음 접해보는것은 아니다. 이전에 코드스테이츠에서 학습한 경험이 있고 팀 프로젝트에서도 리덕스로 상태관리를 했다. 하지만 파일을 나누거나 코드를 분류하는 방식이 제 각각이기 때문에 다시 한번 공부해보며 적응해야할 필요가 있다. 리덕스란 무엇일까? Redux(리덕스)란 자바스트립트 상태관리 라이브러리이다. 상태관리의 문제 예를들어 온라인 쇼핑몰 사이트가 있을때 그 사이트에는 여러가지 상태가 있을것이다. 장바구니에 물건을 담거나 뺄때 물건의 가격 상태가 변하며 장바구니에 담긴 물건 수가 증감 하는 ..

React Native 2023. 5. 25. 22:47

프롤로그 채널을 이름 변경 및 삭제하는 시스템 관리자에 의한 특별한 권한은 시스템 구성에 따라 채널 관리자에게 부여됩니다. 라고 공식문서에 적혀 있는데 무슨말인지 대체 알 수 가 없어서 기능을 하나씩 파악해보며 정리해 본 글 메타모스트 기능 정리를 블로깅 하게 된 계기 우리 회사는 새로 개발하려는 서비스에 Mattermost API를 사용하려고 한다. 나는 기획단계부터 맡게 되었고 기획과 디자인을 정해진 기한내에 혼자서 해야했기에 눈에 불을 켜고 빠른속도로 기획을 해나갔다. 서비스의 모든 부분을 다 기획해두고 개발을 하려면 시간이 끝없이 길어질테니 메인 기능인 채팅 기능 먼저 기획과 개발을 완료하기로 했다. 현재 개발단계인데, Mattermost는 생각보다 훨씬 많은 기능이 있었고, 또 복잡했다. 채팅방..

기타 2023. 5. 11. 22:58

아침에 문자를 하나 받았습니다. 원래 결제를 하고 일일히 문자를 확인 하진 않지만, 이른 아침부터 왠 결제인지 자세히 들여다보니 Amazon_AWS에서 5만원가까이 결제가 되었더군요. 까마득하게 잊고 있었습니다. 코드스테이츠 할때 Amazon_AWS를 사용해본다고 테스트용으로 가입해둔것이었는데 말이죠. 비밀번호도 아닌 아이디를 찾느라 고생했습니다. 아마존은 아이디 찾기도 따로 없더군요? 아마존으로부터 메일을 받은 그 계정이 아마존 계정이라기에 구글부터 네이버, 다음까지 다 로그인해서 메일함을 뒤적뒤적 해야했습니다. -_-;; 예전에 코드스테이츠 하던 시절, 하루인가 이틀? 학습을 하고는 완전 잊고 살아서 기억이 가물가물했습니다. 이것저것 클릭해보다가 인스턴스(실행 중)이 뭔가 쎄해서 들어가보았습니다. 아..

기타 2023. 5. 8. 09:18

결론부터 말하자면, key를 사용합니다. 아래쪽에 key의 역할과 사용방법을 적어두었습니다. 내부 프로젝트 진행중, 이번에 제가 맡은 부분은 공지사항목록과 공지사항 상세 페이지 입니다. 공지사항 목록에서 게시글 클릭시, 해당 게시글 상세페이지로 이동을 시켜야하는 상황입니다. key값을 줄지 id값으로 매칭 시킬지 순간 고민하다가 그동안 리액트를 공부하면서 'key와 id를 사용하면서도 제대로 구분 하지 못했구나' 느꼈습니다. key와 id의 역할이 비슷해 보이는데 어떤 차이점이 있을까요? 저는 제대로 쓰기위해 알아보기로 했습니다. 용도 key : 동적인 리스트에서 각 요소를 고유하게 식별하여 변경을 최소화하는 데 사용됩니다. id : HTML에서 요소를 식별하는 데 사용되는 고유한 식별자이며, React..

react 2023. 4. 25. 17:30

NativeBase란? NativeBase는 React Native를 위한 오픈소스 UI 컴포넌트 라이브러리 입니다. 이번 프로젝트때 NativeBase를 사용하게 되었는데 공식문서에 어떤 UI라이브러리가 있는지 미리 알아본 후 개발시 빠르게 찾을 수 있도록 정리해보았습니다. Utility Props UI 컴포넌트에 쉽게 스타일을 적용하거나 속성을 설정할 수 있게 해주는 Props입니다. Color mode (Dark Mode) 사용자가 앱을 사용하는 동안 다크 모드(Dark Mode) 또는 라이트 모드(Light Mode)와 같은 테마 모드를 선택할 수 있도록 합니다. NativeBase Factory Factory는 컴포넌트를 만드는 함수입니다. 이 함수는 컴포넌트를 생성하고 초기화하는데 사용됩니다...

React Native 2023. 4. 11. 09:33

회사에서 새롭게 만드는 서비스가 있는데 나는 이 서비스에서 나는 기획, 디자인, 개발의 일부분을 맡게 되었다. 저번주 금요일까지 화면기획과 디자인을 마쳤고 이제 개발을 할 차례다. 이번 프로젝트는 리액트네이티브를 이용하여 개발한다고 하셨다. 내가 리액트는 공부해본적이 있는데 리액트네이티브는 어떤것인지 잘 모르겠어서 본격적으로 개발에 들어가기에 앞서 알아보고자 한다. 리액트 네이티브란 무엇일까? 🧐 리액트 네이티브란? iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크다. 리액트 네이티브 프로젝트는 iOS와 안드로이드에서 모두 동작하는 모바일 앱을 작성할 수 있게 해주는데 커뮤니티 프로젝트를 이용하면 리액트 네이티브로 윈도우, 우분투, 웹 등 다른 플랫폼에서 동작하는 앱을 ..

React Native 2023. 4. 3. 16:12