개발은 4개 화이팅

.env

chulchul — Thu, 14 Sep 2023 21:50:40 +0900

1. install

npm i react-native-dotenv

2.babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

3. .env

API_KEY= "asdasdasd"

4. import

import { API_KEY } from "@env"

5. 예시

import { API_KEY } from "@env"

// 날씨 API

const { list } = await (

await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`)

).json();

6. 안될시

yarn start --reset-cache

를 해보고 안되면 vscode를 껐다 켜보던가 컴터를 껐다키던가

저는 컴터를 껐다 키니까 됐습니다.

출처

https://yong-nyong.tistory.com/46

[React Native] 타입스크립트 환경에서 환경 변수(.env) 적용하기

들어가며 최근 React Native + TypeScript 로 간단한 어플을 만들면서 공부하던 도중에 환경 변수 (env)를 적용이 필요했는데, 그냥 React에서 사용하던 방법과 조금 다른 것 같아서 생소했습니다. 1. re

yong-nyong.tistory.com

https://velog.io/@devstefancho/React-Native-environment-varible-%ED%8C%8C%EC%9D%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-.env

[React-Native] environment varible 파일 만들기 (.env)

다음 내용은 Using environment variables in a React Native App.을 일부 번역한 내용입니다.ios 디렉토리내에서 명령 실행babel.config.js파일에 아래와 같이 세팅root directory(package.json과 같은레벨

velog.io

로컬스트로지, 세션스토리지

chulchul — Thu, 14 Sep 2023 18:39:42 +0900

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소

간단한 키와 값을 저장할 수 있다. 키-밸류 스토리지의 형태
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성
로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있음
하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거
지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장
잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장!
하지만 비밀번호같은 중요한 정보는 절대 저장 금지! 클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있음

로컬 스토리지(localStorage)

로컬 스토리지는 window.localStorage에 위치합니다. 키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 됩니다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환됩니다. 키도 문자열로 변환됩니다.

localStorage.setItem('name', 'zerocho');
localStorage.setItem('birth', 1994);
localStorage.getItem('name'); // zerocho
localStorage.getItem('birth'); // 1994 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

메소드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 됩니다. localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워집니다.

localStorage.setItem('object', { a: 'b' });
localStorage.getItem('object'); // [object Object]

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장됩니다. [object 생성자]형으로 저장되는 거죠. 객체를 저장하려면 두 가지 방법이 있습니다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있습니다.

한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해야됩니다.
객체 형식 그대로 문자열로 변환하는 거죠. 받을 때는 JSON.parse하면 됩니다.

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }

이렇게 데이터가 지우기 전까지는 계속 저장되어 있기 때문에 유저 커스터마이제이션에 좋을 것 같습니다. 사용자의 설정(보안에 민감하지 않은)이나 데이터들을 넣어두면 됩니다.

세션 스토리지(sessionStorage)

세션 스토리지는 window.sessionStorage에 위치합니다. clear, getItem, setItem, removeItem, key 등 모든 메소드가 같습니다. 단지 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다.

출처

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키

안녕하세요. 이번 시간에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보겠습니다. 이름만 봐도 각각의 기능이 뭔지 대충 알겠죠? 영어에 약하신 분들을 위해 간단히 설

www.zerocho.com

https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지

쿠키 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일. document.cookie하면 현재 쿠키 정보가 나옴. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간

racoonlotty.tistory.com

쿠키, 세션

chulchul — Thu, 14 Sep 2023 18:37:59 +0900

HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 쿠키 또는 세션을 사용

기본적으로 HTTP 프로토콜 환경은 "connectionless, stateless"한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야합니다. 이 특성을 보완하기 위해서 쿠키와 세션을 사용하게됩니다.

connectionless

클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징
HTTP는 먼저 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response를 보내고 접속을 끊는 특성
헤더에 keep-alive라는 값을 줘서 커넥션을 재활용하는데 HTTP1.1에서는 이것이 디폴트다.
HTTP가 tcp위에서 구현되었기 때문에 (tcp는 연결지향,udp는 비연결지향) 네트워크 관점에서 keep-alive는 옵션으로 connectionless의 연결비용을 줄이는 것을 장점으로 비연결지향이라 한다.

stateless

통신이 끝나면 상태를 유지하지 않는 특징
연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

쿠키와 세션은 위의 두 가지 특징을 해결하기 위해 사용

예를 들어, 쿠키와 세션을 사용하지 않으면 쇼핑몰에서 옷을 구매하려고 로그인을 했음에도, 페이지를 이동할 때 마다 계속 로그인을 해야 합니다.

쿠키와 세션을 사용했을 경우, 한 번 로그인을 하면 어떠한 방식에 의해서 그 사용자에 대한 인증을 유지하게 됩니다.

쿠키 (Cookie)

쿠키란?

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다.
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있습니다.
쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장합니다.
Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.

쿠키의 구성 요소

이름(Name) : 각각의 쿠키를 구별하는 데 사용되는 이름
값(Value) : 쿠키의 이름과 관련된 값
유효시간(Expires) : 쿠키의 유지시간
도메인(Domain): 쿠키를 전송할 도메인
경로(Path): 쿠키를 전송할 요청 경로

쿠키의 동작 방식

클라이언트가 페이지를 요청
서버에서 쿠키를 생성
HTTP 헤더에 쿠키를 포함 시켜 응답
브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키의 사용 예

방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
쇼핑몰의 장바구니 기능
자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니

세션 ( Session )

세션이란?

세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.
서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다.
물론 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능 합니다.
사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다.
즉 동접자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 됩니다.
클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션 ID입니다.

세션의 동작 방식

클라이언트가 서버에 접속 시 세션 ID를 발급 받음
클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용
클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

세션의 특징

각 클라이언트에게 고유 ID를 부여
세션 ID로 클라이언트를 구분해서 클라이언트의 요구에 맞는 서비스를 제공
보안 면에서 쿠키보다 우수
사용자가 많아질수록 서버 메모리를 많이 차지하게 됨

세션의 사용 예

로그인 같이 보안상 중요한 작업을 수행할 때 사용

쿠키와 세션의 차이

쿠키와 세션은 비슷한 역할을 하며, 동작원리도 비슷합니다. 그 이유는 세션도 결국 쿠키를 사용하기 때문입니다.
가장 큰 차이점은 사용자의 정보가 저장되는 위치입니다. 때문에 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용합니다.
보안 면에서 세션이 더 우수하며, 요청 속도는 쿠키가 세션보다 더 빠릅니다. 그 이유는 세션은 서버의 처리가 필요하기 때문입니다.
보안, 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid 만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋습니다.
라이프 사이클, 쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다. 또한 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때 까지 유지될 수도 있습니다.
반면에 세션도 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제됩니다. 예를 들어, 크롬에서 다른 탭을 사용해도 세션을 공유됩니다. 다른 브라우저를 사용하게 되면 다른 세션을 사용할 수 있습니다.
속도, 쿠키에 정보가 있기 때문에 서버에 요청시 속도가 빠르고 세션은 정보가 서버에 있기 때문에 처리가 요구되어 비교적 느린 속도를 가집니다.

세션을 사용하면 좋은데 왜 쿠키를 사용할까?

세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어질 수가 있고 속도가 느려질 수 있기 때문에 쿠키가 유리한 경우가 있습니다.

쿠키/세션은 캐시와 엄연히 다르다!

캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것입니다.
한번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있는데 이런 부분을 캐시를 지워주거나 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시하는 방법등을 이용할 수 있습니다.
보통 쿠키와 세션의 차이를 물어볼 때 저장위치와 보안에 대해서는 잘 말하는데 사실 중요한 것은 라이프사이클을 얘기하는 것입니다.

출처

https://interconnection.tistory.com/74

날씨(Weather),위치(Location) api 연습

chulchul — Thu, 14 Sep 2023 02:47:10 +0900

1. npx expo install expo-location

2. import * as Location from 'expo-location';

3. 위치 코드

const [city, setCity] = useState("Loding...")

const [ok, setOk] = useState(true);

// 위치 API => Location

const getWeather = async() =>{

const {granted}= await Location.requestForegroundPermissionsAsync();

if(!granted){

setOk(false);

}

const {coords:{latitude,longitude}} = await Location.getCurrentPositionAsync({accuracy:5})

const location = await Location.reverseGeocodeAsync({latitude,longitude},{useGoogleMaps:false})

setCity(location[0].city)

};

useEffect(()=>{

getWeather();

},[])

4. 날씨까지 완성 코드

import * as Location from 'expo-location';

import { useEffect, useState } from 'react';

import { StyleSheet, Text, View, ScrollView, Dimensions, ActivityIndicator } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get("window")

const API_KEY = "ㅁㄴㅇ"

export default function App() {

const [city, setCity] = useState("Loding...")

const [days, setDays] = useState([]);

const [ok, setOk] = useState(true);

// 위치 API => Location

const getWeather = async () => {

const { granted } = await Location.requestForegroundPermissionsAsync();

if (!granted) {

setOk(false);

}

const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync({ accuracy: 5 })

const location = await Location.reverseGeocodeAsync({ latitude, longitude }, { useGoogleMaps: false })

setCity(location[0].city)

// const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`);

// const json = await response.json();

// console.log(json.daliy)

const { list } = await (

await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`)

).json();

const filteredList = list.filter(({ dt_txt }) => dt_txt.endsWith("00:00:00"));

setDays(filteredList);

};

useEffect(() => {

getWeather();

}, [])

return (

</View>

<ScrollView

showsHorizontalScrollIndicator={false}

pagingEnabled

horizontal

contentContainerStyle={styles.weather}>

{days.length === 0 ? (

<ActivityIndicator

style={{ marginTop: 10 }}

color="white"

size="large"

</View>

) : (

days.map((day, index) => (

<Text style={styles.temp}>{parseFloat(day.main.temp).toFixed(1)}</Text>

<Text style={styles.description}>{day.weather[0].main}</Text>

<Text style={styles.tinyText}>{day.weather[0].description}</Text>

</View>

))

)}

</ScrollView>

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: "teal",

city: {

flex: 1,

justifyContent: "center",

alignItems: "center",

cityName: {

fontSize: 68,

fontWeight: "500",

weather: {

day: {

width: SCREEN_WIDTH,

alignItems: "center",

temp: {

marginTop: 50,

fontSize: 178,

description: {

marginTop: -30,

fontSize: 50

tinyText: {

fontSize: 20

}

})

리액트 네이티브 규칙

chulchul — Wed, 13 Sep 2023 19:54:48 +0900

1. HTML이 아니기에 div 사용 못함 => 대신에 View를 사용 View는 container 항상 import 해야함

import { StyleSheet, Text, View } from "react-native"

2. text는 text component에 들어가야함 => p, span, div,h1,h2,h3 사용X

3. View에는 style이 있음. // StyleSheet.create << 자동완성을 제공함. 유용해서 선호함
4. 일부 component는 IOS 및 Android 운영 체제와 소통하기 위함 // StatusBar

<View style={styles.container}>
<Text>Hello</Text>
<StatusBar style="auto"/>
</View>

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
text:{
fontSize:28,
}
})

5. 리액트 css 기본설정은 row(가로), 네이티브는 Column(세로)
6. 기존 display:flex;하고 flex-direction 넘어가야 함 , 네이티브 Container View 는 이미 Flex Container 그러므로 가로 설정은 flexDirection: "row"
7. 핸드폰 기종마다 크기가 다 다르기에 반응형으로 만듬 => width, height 는 거의 사용하지 않음
8. 가운데 정렬 justifyContent: "center", alignItems: "center",

9. 스크롤은 View이기에 자동적으로 안됨 import
import { ScrollView } from 'react-native';
horizontal << 가로 스크롤
contentContainerStyle << 스크롤하면 스타일은 이걸로 변경
10. 핸드폰 width, height 알고싶으면 import => 이걸 활용해서 문구를 가운데 둘 수 있음 ( 가로 스크롤시)
import { Dimensions,} from 'react-native';

const {width: SCREEN_WIDTH} = Dimensions.get("window")

day: {

width:SCREEN_WIDTH,

alignItems: "center",

11. (가로)페이지 넘김 자연스럽게 => pagingEnabled

12. (가로)스크롤바 숨김 => showsHorizontalScrollIndicator={"flase"}

13. (가로)스크롤바 색 변경(아이폰) => indicatorStyle="white"

14. 터치이벤트 => TouchableOpacity

15. 비밀번호 텍스트입력 => secureTextEntry

16. 멀티라인( default값=싱글라인) => multLine

17. onChange => onChangeText

18. 인풋값이 뭔지 => onSubmitEditing

RESTful API

chulchul — Wed, 13 Sep 2023 15:13:12 +0900

REST ?

- REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다.

HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해
해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

REST API ?

- REST API란 REST의 원리를 따르는 API를 의미한다

URL은 동사보다 명사를, 대문자보단 소문자를 사용한다
마지막에 슬래시는 포함하지 않는다.
언더바X 하이폰
파일 확장자는 URL에 포함하지 않는다. (ex// photo.jpg =>photo )
행위를 포함하지 않는다. (ex// delete-post => post)

RESTful ?

REST의 원리를 따르는 시스템을 의미한다. 하지만 REST를 사용했다하여 모두가 RESTful 한 것은 아니다 REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful 하다 말할 수 있으며 모든 CRUD 기능을 POST로 처리 하는 API 또는 URL 규칙을 올바르게 지키지 않은 API처럼 REST API의 설계 규칙을 올바르게 지키지 못한 시스템은 REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있다.

RESTful API ?

간결하고 직관적인 디자인으로 애플리케이션 간 상호 작용을 쉽게 할 수 있도록 도와주며, 웹 서비스를 만들고 통합하는데 널리 사용된다. RESTful 아키텍쳐 스타일은 HTTP의 강력한 기능을 활욜하여 자원을 다루는 방법을 정의하며, 웹 및 모바일 애플리케이션에서 많이 사용된다.

References

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

HTTP, HTTPS 차이

chulchul — Wed, 13 Sep 2023 14:36:26 +0900

프로토콜?

- 컴퓨터 네트워크와 통신 시스템에서 데이터를 교환하는 데 사용되는 규칙과 규정의 체계이다

- 프로토콜은 데이터를 보내고 받는 디바이스나 시스템 간에 상호 작용을 조정하고 통신을 원활하게 하기 위한 약속된 규칙의 집합이다.

주요 목적

1. 데이터 전송

2. 오류 처리

3. 보안

4. 세션 및 연결 관리

HTTP (Hypertext Transfer Protocol)와 HTTPS (Hypertext Transfer Protocol Secure)은 웹에서 정보를 전송하는 데 사용되는 프로토콜이다. 이 두 프로토콜은 웹 브라우징과 웹 서버 간의 통신을 안전하게 관리하기 위한 목적으로 사용된다.

	HTTP(Hyper Text Transfer Protocol)	HTTPS(Hyper Text Transfer Protocol Secure)
기본 프로토콜	HTTP/1과 HTTP/2는 TCP/IP를 사용. HTTP/3은 QUIC 프로토콜을 사용.	HTTP 요청 및 응답을 추가로 암호화하기 위해 SSL/TLS와 함께 HTTP/2 사용
포트	기본 포트 80	기본 포트 443
보안	추가 보안 기능 없음	퍼블릭 키 암호화에 SSL(Secure Sockets Layer) 인증서 또는 TLS(Transport Layer Security) 사용

HTTPS는 민감한 정보를 전송하는 데 필수이며, 웹 보안과 개인 정보 보호를 강화하는데 중요한 역할

단순 정보조회 또는 노출이 되어도 괜찮은 데이터면 HTTP 사용 가능

리액트 네이티브 expo go (아이폰)

chulchul — Wed, 13 Sep 2023 00:40:19 +0900

1. cmd => npx create-expo-app 앱이름

2. 핸드폰에서 어플 설치 후 회원가입 ,로그인

3. vscode 터미널 => npx expo login => 핸드폰 어플에서 입력했던 이메일또는 이름과 패스워드

4. expo start --tunnel

5. QR코드 또는 어플로 들어가서 제대로 나오나 확인

우선 어플 설치후 회원가입 후 로그인 했고 vscode에서 expo login 후에 npm run start를 하니 되지 않았다.

"There was a problem loading the requested app"

이 문구가 나왔고 찾아보니

npm start 말고 expo start --tunnel로 했을때 해결!!

[TypeScript] Eslint, Prettier 설정

chulchul — Sat, 2 Sep 2023 22:02:23 +0900

ChatGPT: 일반적으로 개발자는 ESLint와 Prettier를 함께 사용하여 코드 스타일을 관리하고 오류를 최소하하며 프로젝트의 코드 일관성을 유지합니다. 둘을 통합하여 사용하면 코드 형식과 품질을 향상시키는 데 도움이 됩니다. 예를 들어, 코드를 저장할 때 자동으로 Prettier를 실행하고 ESLint를 사용하여 코드 스타일 검사를 수행할 수 있습니다.

Eslint

* 목적 : 코드 스타일 및 오류를 찾고 신속하게 수정할 수 있도록 도와주는 정적 코드 분석 도구

* 기능:

1. 코드 스타일 검사 - 들여쓰기, 따옴표 사용, 세미콜론 등 과 같은 코드 스타일 규칙을 정의하고 이를 코드에 적용

2. 잠재적인 오류 식별 - 코드에서 잠재적인 버그나 오류를 식별하고 경고를 발생

3. 사용자 정의 규칠 - 프로젝트에 맞게 사용자 정의 규칙을 추가하고 활성화할 수 있음.

* 설정 :

'.eslintrc' 파일을 사용하여 규칙을 정의하고 프로젝트에 적용

Prettier

* 목적: 코드 형식을 자동으로 정리하고 일관된 코드스타일을 적용하는 도구, // 코드 형식을 일치시키고 더 읽기 쉽게 만듬

* 기능:

1. 코드 자동 형식 지원- 들여쓰기, 줄 바꿈, 공백 등과 같은 코드형식을 자동으로 조정

2. 일관된 코드 스타일 적용- 프로젝트에 지정된 코드 스타일을 일관되게 적용

3. 코드 포맷팅 - 코드를 자동으로 정리하여 가독성을 높임

* 설정:

'.prettierrc' 파일을 사용하여 Prettier의 동작을 사용자 정의하고 프로젝트에 적용

1. VScode에서 eslint, prettier 설치

2.설정을 위해서 eslint와 prettier를 설치하고, 타입스크립트 환경이므로 typescript도 설치해준다.

npm install --save-dev eslint prettier typescript //

yarn add --dev eslint prettier typescript

3. eslint에서 타입스크립트를 활용하기 위한 플러그인을 설치해준다.

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser //

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

4. eslint와 prettier를 함께 사용하기 위해서 플러그인을 설치한다.

npm install --save-dev eslint-config-prettier eslint-plugin-prettier //

yarn add --dev eslint-config-prettier eslint-plugin-prettier

5.airbnb의 스타일 가이드를 통해서 eslint를 설정하는데, base의 경우 리액트와 관련된 규칙이 있는

가이드이고 base가 없는 라이브러리는 리액트 관련 규칙을 포함한다.

npm install --save-dev eslint-config-airbnb //

yarn add --dev eslint-config-airbnb

6.만약 리액트를 사용하는 프로젝트인 경우에는 다음과 같은 플러그인을 추가적으로 설치해야한다.

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import //

yarn add --dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

eslint-plugin-react : React 규칙이 들어있는 플러그인

eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인

eslint-plugin-jsx-a11y : JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인

eslint-plugin-import : ES6의 import, export 구문을 지원하는 필수 플러그인

7. 설정

// .prettierrc

{

"singleQuote": true,

"parser": "typescript",

"semi": true,

"useTabs": false,

"tabWidth": 2,

"printWidth": 120,

"arrowParens": "always"

}

singleQuote : quote를 single로 사용할지, double로 사용할지 결정하는데, single로 사용한다.

semi : 명령문 마지막에 semiclons를 붙일지 말지의 여부

quoteProps : 객체 안에 key의 따옴표를 quote를 감싸지 않으면 안되는 문자가 있을때만 사용

useTabs : 공백 대신 탭으로 줄을 들여 쓸지에 대한 여부를 물어본다.

printWidth : 라인의 최대 길이 설정으로 120으로 설정했다.

tabWidth : 들여쓰기의 칸 수를 말하며 2칸으로 설정했다.

arrowParens : 화살표 함수에서 매개변수를 항상 괄호로 감싸도록 설정했다.

// .eslintrc.js

module.exports = {

parser: '@typescript-eslint/parser',

plugins: [

'@typescript-eslint',

// 'react-hooks' // eslint-plugin-react-hooks 설치한 경우

extends: [

'airbnb-base', // or airbnb

// 'plugin:react/recommended', // eslint-plugin-react 설치한 경우

// 'plugin:jsx-a11y/recommended', // eslint-plugin-jsx-a11y 설치한 경우

// 'plugin:import/errors', // eslint-plugin-import 설치한 경우

// 'plugin:import/warnings', // eslint-plugin-import 설치한 경우

'plugin:@typescript-eslint/recommended',

'plugin:prettier/recommended',

rules: {

'prettier/prettier': 0,

settings: {

'import/resolver': {

node: {

extensions: [

'.js',

// '.jsx',

'.ts',

// '.tsx',

};

참고

https://bum-developer.tistory.com/entry/TypeScript-Eslint%EC%99%80-Prettier-%EC%84%A4%EC%A0%95

테일윈드 사용법

chulchul — Fri, 1 Sep 2023 19:34:58 +0900

npm install -D tailwindcss 또는
yarn add -D tailwindcss postcss autoprefixer

yarn tailwind init -p

3. tailwind.config.js 설정 // src 하위 파일 중 확장자가 .js, .jsx, .ts, .tsx 파일을 대상으로 함

// src/index.css
module.exports = {
  content: [
  	"./src/**/*.{js,jsx,ts,tsx}",  
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// index.js

import './index.css'