TIL

오늘부터 드디어 React Native에 대해서 배우는 날이다 웹개발 경험만 있었기 때문에 이번 앱 강의를 통해 앱개발 역량을 기르는 것이 목표이다 RN 공부도 화이팅! # React Native History # 모바일 앱 개발의 초기 역사 1. PDA의 등장 Personal Digital Assistant 팜톱(Palm Top) 1990년대 후반, 모바일 기기가 처음으로 등장했다 태초의 모바일 앱들은 주로 간단한 기능만 제공했다 여러 기능을 제공하는 것보다는 기기간 호환성과 효율적인 성능을 제공하는 것에 초점이 맞춰져 있던 시기였다 2. 피처폰 각종 피처폰의 유행(2G폰)의 시작! 우리나라는 정부 주도로 만들어진 폐쇄된 플랫폼 WIPI가 존재했다 WIPI란? 하나의 콘텐츠를 여러 통신사에 서비스 하기..

이번 시간에는 다양한 CSS 라이브러리를 적용해보면서 가져다가 사용하는 연습을 해보자 # Ant Design Ant Design에 대해서 알아보자 아래는 Ant Design 공식 사이트이다 https://ant.design/ Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises ant.design Ant Design 깃허브에 들어가서 확인해보면 굉장히 많은 사람들이 사용 중임을 알..

# 들어가며 지난번까지 React.js를 학습하며 간단한 일기장 프로젝트를 만들어보았다 이제 React와 연계해서 배우면 좋을 것들에 대해서 알아보자 구현을 편하게 만들어 서비스 기능을 개발하는 데 집중할 수 있도록 Styling, state management, API Calls, Froms 등의 여러 라이브러리가 존재한다 따라서 이번 시간부터는 스타일링에 집중하여 현업에서 쓰이는 CSS 라이브러리로 어떻게 화면을 빠르게 만드는가에 대해 학습해보겠다 즉, 이미 구현되어 있는 것을 잘 활용하는 방법을 배워볼 것이다 # CSS 라이브러리 1. matrial ui (mui) - 구글 개발 - 문서화가 잘 작성되어있음잘 작성되어 있는 문서 - 가장 많이 쓰이는 라이브러리 2. antDesign - 알리바바 개..

# 배포 준비하기 우선 서비스 실행 시 브라우저 상단의 이름부터 바꿔보자 1. 타이틀 변경 프로그램 실행 시 React App 으로 뜬다 이걸 변경해보자 public 디렉토리의 index.html 에서 진행한다 React App 이 부분을 수정하자 감정 일기장 추가적으로 사이트 설명 부분도 수정해보자 이 부분도 아래와 같이 수정하고 마지막으로 lang 도 ko로 변경하면 끝 2. pages 컴포넌트마다 타이틀 변경 pages에 위치한 컴포넌트마다 타이틀을 정해주자 우선 Diary 컴포넌트 먼저 바꿔주자 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정 일기장..

# LocalStorage를 일기 데이터베이스로 사용하기 새로운 일기를 추가한 다음 새로고침 하면 기존의 dummuData 말고 새로 작성한 일기들은 사라진다 왜 그럴까? 자바스크립트는 Client Side이기 때문에 웹 브라우저에서만 동작한다 자바스크립트의 state 는 휘발성 메모리라서 새로고침 시 모두 사라지게 된다 원래는 Date Base에 값을 저장하고 꺼내오고 해야하지만 이번 강의에는 DB 를 대신해서 LocalStorage 를 사용해보도록 하자 # Web Storage API key-value 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공하는 기능이다 # Storage 종류 session storage : 출처에 대해 독립적인 저장 공간을 제공하는데 페이지 세션이 유지되는 동안만..

# Diary 컴포넌트 구현 Diary 컴포넌트 즉, 일기 상세 페이지를 구현해보자 우선 상세 내용을 보여줄 일기 데이터의 id 값을 받아와서 해당 id 값으로 일기 데이터를 가져와야 한다 useContext 를 사용해서 App 컴포넌트에 위치한 DiaryStateContext 가져오자 diaryList 라는 변수를 생성해서 해당 변수에 일기 데이터들을 담아주자 수정 구현과 마찬가지로 useEffect 를 사용해서 id 일치 여부를 확인한다 useEffect(() => { if (diaryList.length >= 1) { const targetDiary = diaryList.find( (it) => parseInt(it.id) === parseInt(id) ); if (targetDiary) { set..

# NEW 컴포넌트 구현 # Header 기존에 만들어놨던 MyHeader 컴포넌트와 MyButton 컴포넌트를 가져와서 필요한 부분을 바꾸면 헤더를 쉽고 빠르게 구현할 수 있다 } /> 뒤로 가는 방법은 navigate 에 -1을 넣어주면 된다 # 날짜 입력받기 input 태그의 type을 date로 지정해서 일기 작성 날짜를 입력 받을 수 있도록 구현해보자 new 컴포넌트 화면이 렌더링되자마자 오늘의 날짜를 받아와서 input 태그에 띄워주어야 한다 현재 날짜가 어떨게 들어오고 있는지 확인해보니 2024-02-27 과 같은 형식으로 들어오고 있다 그렇다면 해당 형식에 맞춰서 날짜를 받아오자! 날짜 형식을 맞춰주는 getStringDate 함수를 생성하자 const getStringDate = (dat..

# 프로젝트 기초 공사 2 전체 프로젝트 구조를 살펴보자 각각의 컴포넌트는 다른 state가 필요하다 우선 App 컴포넌트에서 일기 데이터를 관리할 수 있는 state 를 만들어보자 # 상태 관리 세팅하기 useReducer 를 사용해서 App 컴포넌트에서 상태 관리를 세팅하자 const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "REMOVE": { newState = sta..