본문 바로가기

전체 글101

[ReactNative] 공식 문서 보기 (1) - 기초 ReactNative를 배우며, 기존 React와 사용방법이 약간 동일한 것 같지만, Html 요소가 아닌 나 와 같은 ReactNative만의 독자적인 태그를 사용하는 것을 보았다. 그래서 다시 처음으로 돌아가, 공식문서의 내용을 간단히 정리해 볼 것이다. ReactNative 공식문서는 다음과 같은 링크에서 볼 수 있다. 나는 간단히 내가 기억해야 될 부분만 순차적으로 정리해 보고자 한다. https://reactnative.dev/docs/getting-started Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting .. 2022. 10. 24. 01:12
[ReactNative] expo 메모장 앱 만들기 (3) 이전 포스팅 2022.10.21 - [개발/ReactNative] - [ReactNative] expo 메모장 앱만들기 (1) 2022.10.23 - [개발/ReactNative] - [ReactNative] expo 메모장 앱만들기 (2) 이전에는 데이터 저장 / 불러오기, useEffect를 활용하여 데이터 불러오기까지 구현하였다. 이번 시간은 메모장을 리스트 형태로 제작하는 방법을 배워보겠다. 기존에 있던 코드에서 추가해주며 진행 해주겠다. 1. 리스트 뷰와 작성글 뷰 분리하기 App.js useState로 writeMode 의 여부를 표시할 state를 선언해 주었고 return 문을 두 가지로 나누어서 분기시켜주었다. writeMode가 true 이면 글쓰기 화면이 보이고, false 이면 리스.. 2022. 10. 23. 01:53
[ReactNative] expo 메모장 앱만들기 (2) 지난 포스팅 2022.10.21 - [개발/ReactNative] - [ReactNative] expo 메모장 앱만들기 (1) [ReactNative] expo 메모장 앱만들기 (1) 메모장 앱 만들기 (1) ReactNative와 expo를 이용하여 메모장 앱을 만들어보겠다. 기본적인 설치와 설정은 이전 포스팅을 참고하면된다. 2022.10.20 - [개발/ReactNative] - [ReactNative] expo 설치하기 [ReactN.. ijw9209.tistory.com 저번 포스팅에 이어 메모장 앱 만들기를 이어가도록 하겠다. 저번 포스팅에서는 메모장 앱을 실행하는 방법과, 엔터효과를 구현하는 것까지 구현하였다. 1. 저장, 불러오기 기능 만들기 앱 내 저장기능을 만드는 건 AsyncStora.. 2022. 10. 23. 00:12
[NetWork] DNS Recode type 최근 서브 도메인을 설정하는 도중에 매번 DNS RECODE TYPE을 "A"로 설정하였는데 문득 이게 무엇인지 궁금해져서 포스팅을 남긴다. DNS(도메인 네임 시스템) DNS(도메인 네임 시스템)은 사람이 읽을 수 있는 주소 www.naver.com와 와 같은 주소를 IP(인터넷 넷 프로토콜) 주소에 매핑하는 글로벌 시스템이다. 네이버의 주소도 도메인 이름이 유효한 IP주소를 가리키고 있어야 한다. DNS Recode type? DNS 레코드 타입은 호스트네임 또는 도메인에 대해 중요한 정보를 제공해주는 기록이다. 이러한 레코드에는 도메인의 현재 IP주소가 포함된다. DNS 레코드는 권한이 있는 DNS 서버에 텍스트 파일(영역)에 저장된다. DNS레코드 파일은 서버가 이해하는 특수한 문자로 저장된다. .. 2022. 10. 21. 11:58
[ReactNative] expo 메모장 앱만들기 (1) 메모장 앱 만들기 (1) ReactNative와 expo를 이용하여 메모장 앱을 만들어보겠다. 기본적인 설치와 설정은 이전 포스팅을 참고하면된다. 2022.10.20 - [개발/ReactNative] - [ReactNative] expo 설치하기 [ReactNative] expo 설치하기 Expo란? expo는 React 애플리케이션의 플랫폼이자 프레임워크이다. ReactNative의 크로스 플랫폼(IOS, Android)을 개발하기 위한 빌드 도구이자, 네이티브 모듈을 보다 더 쉽게 사용하도록 도와준다. ReactNat ijw9209.tistory.com 1. app.js 수정하기 app.js를 다음과 같이 수정한다. app.js import React , { useState, } from 'react.. 2022. 10. 21. 01:33
[ReactNative] expo 설치하기 Expo란? expo는 React 애플리케이션의 플랫폼이자 프레임워크이다. ReactNative의 크로스 플랫폼(IOS, Android)을 개발하기 위한 빌드 도구이자, 네이티브 모듈을 보다 더 쉽게 사용하도록 도와준다. ReactNative를 사용하면 두 가지의 개발 방법이 존재한다. - Expo CLI - React Native CLI expo를 사용하면 ReactNative의 개발을 안드로이드 스튜디오나 Xcode 없이 쉽게 개발할 수 있다. 또한 윈도우에서도 IOS의 앱을 빌드할 수 있다는 장점이 있다. expo 설치하기 1. expo를 설치하려면 Node가 설치되어야 한다. 2022.10.13 - [개발/개발지식] - [환경설정] Node.js, npm 설치하기 [환경설정] Node.js, np.. 2022. 10. 20. 23:23
[Typescirpt] Typescirpt + react + webpack 설정하기 Typescirpt + react + webpack 설정하기 타입스크립트에 + React + Webpack까지 프로젝트를 생성하고 빌드되는 환경을 설정하는 것을 공부하며 포스팅해보도록 하겠다. TypeScript(타입스크립트) 자바스크립트는 동적 타입 var, let, const의 타입을 사용하여 자동으로 타입을 변환해준다. 타입스크립트는 정적 타입의 컴파일 언어이며 바벨을 통해 자바스크립트 코드로 변환된다. 이번 포스팅은 React 환경에 typescript 환경을 세팅하는 것을 포스팅하겠다. CRA(Create-React-App)을 사용하지 않고 구성할 것이다. 1. 프로젝트를 사용할 디렉터리를 생성해 준다. mkdir react-ts 2. vsCode를 열고 기본 프로젝트 뼈대를 구성해 준다. di.. 2022. 10. 20. 17:24
[React] Redux-Toolkit TypeScript Quick Start . Redux-Toolkit TypeScript Quick Start https://ko.redux.js.org/tutorials/typescript-quick-start TypeScript Quick Start | Redux - How to set up and use Redux Toolkit and React-Redux with TypeScript ko.redux.js.org 이번 포스팅에서는 Redux-Toolkit TypeScript Quick Start 공식문서를 보며 공부해 보겠다. 리덕스 툴킷에서 타입 스크립트를 간결하게 사용하는 예제를 따라 하면서 구현할 것이다. Redux-Toolkit 설치 방법을 이전 포스팅에서 정리해놓았다. 2022.10.03 - [개발 공부 시리즈/Redux-Tool.. 2022. 10. 20. 15:43
[인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션 [인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션 이번 포스팅은 코드 스플리팅과 이모션에 대해 포스팅하겠다. 기존 코드에서 한가지를 더 설정해야 하는데, SPA에서 하나의 자바스크립트 파일로 내보내게되면 그 모든 자바스크립트 파일을 첫 페이지에 한 번에 로딩하기 때문에 사용자 경험(UX)이 좋지 않다. 이럴 떄 코드 스플리팅을 통해 보이는 페이지는 먼저 불러오게 되고, 보이지 않는 컴포넌트들은 불러오지 않도록 설정할 수 있다. 코드 스플리팅 설정하기 1. 코드 스플리팅을 위한 패키지들을 설치한다. Loadable Component 를 설치해준다. npm install @loadable/component npm install --save-dev @types/loadabl.. 2022. 10. 20. 13:19
728x90

티스토리툴바