Develop12 [React Native] 시작해보기 React Native 공부를 시작해 보자지금까지 웹 개발을 해오다가, 앱 개발에 대한 관심이 생겼다. '센서, 카메라, GPS 등 모바일 기기 하드웨어를 사용한 서비스를 한 번 만들어보고 싶다!', '모바일 시대에 앱개발은 한 번은 해봐야지!' 란 생각이 들었다. 지금부터 당찬 포부를 가지고 시작해보자! React Native 원리를 이해해 보자그럼 왜 React Native를 선택했는가? 를 먼저 이야기해 보자면 우선 React.js로 웹 개발을 해왔기 때문에 앱개발에 대한 장벽이 조금 낮지 않을까란 기대로 선택하게 되었다. 웹의 경우 React.js와 react-dom 패키지와 함께 웹 앱을 구축하게 되는데, 앱은 React.js와 React Native를 이용해서 모바일 앱(iOS, Android.. 2024. 8. 12. '오늘 하루 그만 보기' 정보는 어디에 저장이 될까? 우리는 웹 사이트에 접속했을 때 종종 모달창을 마주한다. 그리고 하단에 '오늘 하루 그만 보기' 란 버튼을 클릭한 경험이 있을 것이다. 나는 오늘 하루 그만 보기를 클릭하면, 브라우저에서는 어떤 일이 일어나는지 정리를 해보려고 한다. '오늘 하루 그만 보기'가 있는 모달에서 예상 되는 유저 플로우는?! 유저 플로우를 생각해 보면 아래와 같다. 다시 동일한 날짜에 새 탭으로 동일한 사이트에 들어갔을 때 우리가 예상하는 플로우는, 아래와 같이 예상 된다. 그렇다면! 브라우저는 어떻게 이 유저가 '오늘 하루 그만 보기'를 클릭한 유저인지 알 수 있을까? 즉, 브라우저에서 데이터를 어떻게 주고 받고 있을까?여기서 우리는 HTTP 프로토콜 개념을 알아야 하는데, HTTP는 서버와 클라이언트가 서로 소통(요청/응답.. 2024. 7. 22. [React + Typescript] SelectBox Component는 어떻게 만드는게 좋을까? 사이드 프로젝트를 시작할 때 당장 정해진 디자인이 없다면 빠르게 시작할 수 있는 MUI와 같은 컴포넌트 라이브러리를 선택하는 것이 좋다. 실무에선 디자인 시스템이 있는 회사라면 딱히 고민 없이 FE 개발을 시작할 것이다. 위와 같은 경우가 아니라면 나와 같이 직접 컴포넌트를 처음부터 만들어야 할 것이다. 그런데 막상 '어떻게 시작하지?', '어떻게 재사용할 수 있는 컴포넌트를 만들지?'와 같은 고민 속에 빠져 쉽사리 코드를 치지 못하고 시간만 보낼 수도 있다. 우선 나는 만들고 고치고 만들고 고쳐보자란 마음으로 시작을 하였고 그 첫 기록을 남겨보려고 한다. 여러 가지 컴포넌트 중 SelectBox를 첫 번째로 만들어보았다. 1. SelectBox 기본 디자인 요소는 뭐가 있을까우선 기본 디자인으로 아래와.. 2024. 6. 16. [React] 나의 프로젝트에 맞는 state 상태관리는? - Context 편 React를 공부하고 스스로 프로젝트를 만들다 보면 점점 규모가 커지고 컴포넌트 구조가 복잡해지면서 관리해야 할 state 값이 많아질 것이다. 이쯤 우리는 상태 관리를 어떻게 해야 할까, 구조에 대해 고민에 빠지게 되는 것 같다. 함수형 컴포넌트 로컬 상태만 관리할 때는 우리는 useState 훅을 사용할 것이다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment );}export default Counter; 다만 프로젝트 규모가 커졌을 때.. 2024. 5. 31. [Tailwind CSS] React+Vite 환경에 설치, 그런데 적용이 안됨. 왜죠? Tailwind CSS 공식문서를 보면 설치 방법이 나와있다.다만 순서대로 진행했는데도 불구하고 스타일이 적용이 안 되는 이슈가 있다.왜 적용이 안 되는 가를 찾아내려면, 동작 방식을 이해해야겠단 생각이 들었고 정리해 보면 아래와 같다. 1. 설정 파일 생성npx tailwindcss init 명령어를 통해 tailwind 설정 파일(tailwind.config.js)을 생성할 수 있다. Tailwind는 설정된 파일들을 스캔하여 클래스 이름을 추출하고, 이를 기반으로 최종 CSS 파일을 생성한다. 설정된 파일의 경로를 제대로 기입하지 않으면 사용한 클래스가 인식되지 않아 스타일이 적용되지 않을 수 있다. 아래와 같이 프로젝트 경로와 맞게 content 배열에 스캔할 파일 경로를 정확히 지정해 주면 된다.. 2024. 5. 22. [공공데이터] API 인증키 오류 _ 'SERVICE KEY IS NOT REGISTERED ERROR' 이전에 공공데이터 API 활용에 대해 글을 썼었다. 공공데이터 API 활용 방법1. 공공데이터 사이트 접속 및 회원가입(로그인) 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민ziyun.tistory.com그 당시 내가 사용했던 공공데이터 API에서 인증키 오류 경험이 없어서 따로 기록하지 못했는데, 이번에 새로운 활용 데이터의 API 호출이 정상적으로 처리가 되지 않았고 시간이 지나도 현상이 지속되어서 민원 서비스를 이용했다. 'SERVICE KEY IS NOT REGISTERED ERROR'공공데이터 활용 상태가 되면 '마이페이지 > 데이터 활용 > Open API > 활용신청 현황' 탭에 들어가 보면 서비스.. 2024. 5. 11. 이전 1 2 다음
