서론 지금까지의 짧은 경험으로는 익숙해지는 데에는, 직접 해보는 게 가장 효과적이라고 생각해서 무작정 내가 사용할만한 ToDoList 어플을 만들어볼 계획이다. 프로젝트 계획 만들고 싶은 것 ToDoList와 Timer, 날짜별로 내가 했던 일들, 하는대에 걸린 시간을 저장하는 어플을 만들 계획이다. 사용 할 기술 - React-Native - Expo 구현 할 기능 - 날짜별로 저장할 수 있는 DB 기능 - ToDoList 기능 - 계획 진행 시간 체크 기능 (= 타이머) - 고정적으로 하는 일정 따로 지정해 놓는 기능 (ex, 운동) 일정 계획 10월 17일까지 구현 13일 : 시작 및 ToDoList 기능 구현 14일 : 타이머 기능과 시간 저장 기능 구현 15일 : 시간 저장, 타이틀 설정과 To..

서론 React를 사용하면서 페이지 이동에 가 아닌 Router를 사용해야하는 이유가 궁금해졌다. SPA란? React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고 SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다. SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. 를 통한 이동이 가능하다. 하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다. 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 ..

서론 React Native를 알아가는중에 초기 구성이 복잡하다는 이유로 우선 Expo를 통해서 접해보는것이 좋다는 의견이 많아서 Expo CLI를 사용하고 있습니다. Expo는 무엇인지 어떤 장단점이 있는지 궁금하여 정리를 하게 되었습니다. React Native 개발 방법 리액트 네이티브(React Native) 개발 방법에는 아래와 같이 2가지 개발 방법이 있다. 1. Expo CLI 2. React Native CLI ≒ 바닐라 React Native Expo란 무엇인가? Expo는 애플리케이션을 위한 프레임워크 및 플랫폼입니다. 자바스크립트/타입스크립트를 통해 iOS, 안드로이드 및 웹 앱을 개발, 구축, 배포 및 신속하게 반복할 수 있도록 지원합니다. [ 공식 문서 ] 아래의 그림과 같이 앱을..

서론 React를 배우다 보면 React Native에 대해 한번쯤 들어 봤을 것이라고 생각한다. React Native가 무엇인지 알기 전까지는 '앱(app)을 만들 때 사용한다' 정도만 알고 있었는데, 문뜩 조금 더 자세히 알고 싶어져 React Native에 대해 공부하고 정리해보기로 결정했다. React Native란 무엇인가? React Native란 리액트(Web)의 접근방법을 모바일(App)로 확장한 Facebook의 오픈소스 프로젝트이다. Javascript로 코딩한 React의 컴포넌트는 React Native의 플랫폼을 통해 iOS, 안드로이드 개발이 가능하다. Swift, Objective-c, java, Kotlin이 아닌 Javascript와 React Library만으로 앱(Ap..

서론 이미지는 항상 HTML 태그를 사용하여 나타냈었는데, Scflix 프로젝트를 진행하면서 background-image를 사용하게 되었다. 둘 다 이미지를 나타낸다는 공통점이있는데, 두 방식의 차이점을 알아보고 어떤 방식이 더 나은지 정리를 해보려고 한다. 사용 방법 // HTML img tag // CSS background-image HTML HTML 에서 사용 가능 background-image 보다 SEO에 효과적 background-image 보다 성능에 효과적 default 이미지 포함 가능 이미지 불러오지 못했을경우 default 값으로 Broken image와 alt 텍스트가 보인다. background-image CSS에서 사용 가능 순수하게 디자인에 사용 이미지가 콘텐츠의 일부가 아..

결과물 https://loving-einstein-68589f.netlify.app/ React App loving-einstein-68589f.netlify.app 결과 슬라이더 포함하여 모든 페이지를 반응형으로 변경하였다. netlify를 사용하여 배포를 완료하였다. [ 상세 페이지 ] 회고 프로젝트를 계획하고 만드는 기간 중 이런저런 일들이 있었지만, 무사히 마무리한 것 같아서 다행이라고 생각한다. 프로젝트는 목표했던 기간보다 늦어졌다. 어디서 본 내용중에 프로젝트를 2일 안에 완료할 거 같으면 2~2.5배를 늘린 4~5일로 기간을 정하라는 글이 뒤늦게 생각났다. 그만큼 알지 못하는 오류와 변수들이 숨어있다는 뜻이라고 생각했었는데 직접 느껴본 것 같다. 저번 프로젝트를 마무리하고 회고 할 당시에도 ..