공부하는 비오

터미널에서 AWS 계정 접속 및 여러 계정 관리하기

비오스터딩 — Fri, 6 Sep 2024 02:00:31 +0900

그동안 배포를 AWS로 하기 때문에 직접 AWS 홈페이지에 들어가서 누르기 보다는 터미널에서 명령어를 입력해서 배포를 해왔었다.

S3에 정적으로 배포된거라면 S3 업로드하는 스크립트를 짤 수 있고, Elastic Beanstalk에서 배포 하는 것도 할 수 있다.

이걸 깃액션이랑 연동시켜서 배포 자동화로 사용하고있지만, 그럼에도 가끔 직접 배포하는 일이 있곤 했다.

그동안은 백엔드팀에서 만들어준 S3 배포 스크립트로만 배포하고있었는데,

얼마 전에 다른 AWS 계정으로 접속해서(외주...) EB를 배포해야하는 일이 생겼다.

그래서 터미널에서 AWS 계정 등록 및 진행했던 사항을 정리해보려고 한다.

(터미널에서 ElasticBeanstalk 을 사용하는 방법은 다음 포스팅에서)

1. aws cli 설치

brew를 사용하면 손쉽게 설치가 가능하다.

brew install awscli

설치한 후 제대로 설치가 되었는지는 다음 커맨드로 확인할 수 있다.

2. aws cli 인증 설정

인증 설정은 aws 사용자를 확인하는 과정으로 로그인이라고 생각하면된다.

인증 설정을 하기 위해서는 AWS IAM에서 발급한 AWS Access Key와 AWS Secret Access Key 가 필요하다.

AWS에서 IAM콘솔에서 인증에 사용될 키를 발급 받을 수 있다.

이미 발급 받은 키가 있다면 그걸 사용하면된다. IAM 콘솔에서 Access key는 확인이 가능하지만 시크릿키는 확인이 불가능하다. 그러므로 발급 후 키를 잘 보관해야한다.

만약 기억 나지않는다면 재발급밖에는 방법이 없다. 최대 2개까지 발급이 가능하고, 전부다 기억나지 않는다면 기존 키는 삭제하고 새로운 키를 발급받아야 한다.

다음 명령어를 입력하여 발급받은 키를 입력해주면 된다.

aws configure

Access Key와 Secret Key를 차례로 입력해주고,

기존 region 을 입력해주고, output format을 입력해주면 된다. 이 둘은 옵셔널이어서 입력하지않아도 자동으로 설정된다.

aws configure list 를 입력하면 설정된 정보를 확인할 수 있다.

이렇게 인증 설정을 하면, 해당 AWS 계정의 S3나 EB에 접근이 가능하다.

개인이 사용하는 AWS 계정이라면 본인이 만든 S3와 EB이기 때문에 접근 권한이 당연히 있을 것이고,

팀에서 함께 사용하는 계정이라면 접근권한을 부여해주어야한다.

3. 여러 계정 등록하기

2번까지는 그동안 잘 사용해오고 있던 부분인데 이번에 알게 된 사실

프로필 설정을 통해 여러 계정을 등록 후 쉽게 왔다갔다하면서 사용할 수 있다.

프로필 설정을 하는 방법은 두가지가 있다.

a. 터미널에서 설정하기

aws configure --profile {프로필 이름}

이 명령어를 입력하면 {프로필 이름} 으로 aws 계정이 하나더 등록이 된다.

이 설정은 루트의 .aws/credentials 파일에 저장된다.

~/.aws/credentials

b. 설정 파일 수정하기

두번째 방법은 설정이 저장되는 파일을 직접 수정하는 방법이다.

open ~/.aws/credentials

이 명령어를 입력하는 직접 파일을 열어 볼 수 있다. 아니면 터미널에서 파일을 수정하는 방법도 있는데 난 아직 vim이 익숙하지 않아서 직접 파일 열고 수정하는게 더 편하다.

여기서 [AAA]나 [BBB]가 프로필 이름이다.

aws configure --profile AAA 라고 명령어를 입력하면, 이 파일에 [AAA] 하고 저장이 된다.

마찬가지로 여기서 프로필이름과 aceess key, secret key를 입력하면 설정이 된다.

4. AWS 계정 변경하기

이렇게 등록한 프로필들은 다음 커맨드 하나로 변경할 수 있다.

export AWS_PROFILE={프로필 이름}

매번 새롭게 설정할 필요없이 설정해뒀던 프로필을 불러와 사용할 수 있다.

React-native :: Font 설정

비오스터딩 — Fri, 5 May 2023 18:25:39 +0900

주로 웹만 만들다보니 가끔 앱만들면 설정이 헷갈린다.

저번에 해결했던건데 또 찾아보고 하기 귀찮아서 정리하는 폰트 설정방법

Android 설정

안드로이드는 쉽다. `/android/app/src/main/assets/fonts` 에 폰트파일을 잘 넣어주면됨!

iOs 설정

여러 설정이 필요함. 보통 ios가 android보다 설정해줘야할게 많다. 보통은.

1. 일단 xcode를 켜고 폴더에 폰트를 추가해준다.

2. `{프로젝트이름}/info`에 들어가서 `Fonts provieded by application`에 폰트를 추가한다.

3. 왼쪽에 프로젝트이름을 누르고, targets를 프로젝트 이름으로 바꿔주기

4. `Build Phases` > `Copy Bundle Resources`에 폰트 추가

아래쪽에 `Copy Bundle Resources` 가 없다면 +를 눌러서 추가해주면된다

폰트 폴더가 아니라 폰트 파일을 추가해주어야함! 난 원래 Fonts 아래에 저 폰트파일 넣어놨었는데 저 폴더는 하위파일들이 추가가 안되서 그냥 폰트파일을 루트에 넣고 추가했다.

사용 방법

그냥 스타일 파일에 `fontFamily`를 내가 추가한 폰트 이름으로 설정하면 끝!

참고로 iOs는 설정이 제대로 안되어있으면 아래와 같은 에러가 난다

Unrecognized font family

z-index가 제대로 작동하지 않는 이유

비오스터딩 — Mon, 20 Mar 2023 00:21:12 +0900

최근 프로젝트를 하면서 아무리 z-index를 입력해도 (심지어 999를 넣어도) 원하는대로 화면위로 올라오지 않았다.
z-index보다 위에있는 element는 심지어 z-index가 없어서 더 환장할 노릇이었다.
그래서 그동안 한번도 고민해보지 않았던 z-index에 대해 찾아보았다.

정말 개발은 하면할수록 내가 모르는게 투성이라는걸 알아가는것 같다.
어쨌든 그렇게 알게된 z-index 작동 원리를 정리해보고자 한다.

1. z-index 도 우선순위가 있다.

이번에 알게된 제일 충격적인 사실... z-index도 우선순위가 있다.

a. 부모요소의 z-index가 자식요소의 z-index보다 우선순위를 가진다.

다른말로 하면, 자식요소의 z-index가 아무리 높아도 부모요소의 z-index에 제한을 받는다.

<div class='parent1' style='zIndex: 1'>
  <div class='parent1__child1' style='zIndex: 3' />
  <div class='parent1__child2' style='zIndex: 2' />
</div>

<div class='parent2' style='zIndex:10'>
  <div class='parent2__child1' style='zIndex: 1' />
  <div class='parent2__child2' style='zIndex: 2' />
</div>

이런 코드가 있다면 parent1__child1은 z-index값이 3이지만, 부모요소인 parent1의 z-index가 1이기 때문에,
부모요소의 z-index가 10인 parent2__child1보다 아래쪽에 있게 된다.

parent1__child1과 parent1__child2를 비교할 경우, 부모요소가 동일하므로 자신이 가진 z-index 값으로만 비교할 수 있다.

모든 요소들이 겹쳐있다고 가정했을때 위에있는 요소들의 순위는
parent2__child2 - parent2__child1 - parent1__child1 - parent1__child2 이다.

즉 먼저 부모요소의 z-index 값 비교 를 한 후, 자식 요소의 z-index 값 비교를 하여 우선순위가 정해진다.

2. z-index는 아니지만 z-index처럼 영향을 미치는 요소들이 있다.

a. 뒤에 나온 코드가 앞에나온 코드보다 위에 위치한다.

이건 너무 당연한 말이지만, 같은 위치에 있는 `red`와 `blue` div가 있다면 뒤에 적힌 `blue`가 `red` 위에 위치한다.

`b. position`의 값이 `static`이 아닐 경우, 같은 코드레벨에서 `static`인 요소보다 위에 위치한다.

blue가 red보다 뒤에 나왔지만 red의 position이 absolute이므로 blue보다 위에 위치하게된다.
만약 blue와 red의 position이 둘다 static이 아니라면, 뒤에 나온 요소가 위에 위치한다.

CocoaPods could not find ompatible versions for pod "FirebaseCore"

비오스터딩 — Fri, 30 Dec 2022 08:24:42 +0900

사이드프로젝트로 만들던 앱

한달쯤 손놓고 있다가

그래도 이번년도가 지나기전엔 완성해야지하면서 들어갔다.

파이어베이스 붙이다가 손놓고있었는데

이부분에서 문제가 있어서 다시 파이어베이스를 설치했다.

그랬더니 `pod-install`이 안됐다.

파이어베이스 버전이 달라서 안된다는건 에러로그를 읽어보면 알겠다.

하지만 ... 아무리 지우고 다시깔아도 안된다.

인터넷에 찾아봐도 지우고 다시깔라는 말 밖에 없음

그래서 뭐가 문제인가 예전에 손놓기전엔 괜찮았던거 같은데 하고 `package.json`을 봤더니

버전에 달랐다.

버전문제인가...?

버전 16.5.0 > 버전 15.7.0 으로 낮췄다.

그랬더니 pod 설치가 완료됐다!

CSS 변수 지정 및 CSS에서 HTML 변수 가져오기

비오스터딩 — Sun, 25 Dec 2022 21:13:56 +0900

HTML에서 변수를 CSS로 보내고 싶다면 어떻게해야할까?

제일 쉬운방법은 inline을 사용해서 넣는것이다.

<div style='background: #000' />

하지만 가상선택자(`:hover`나 `:after` 같은거...)에서 HTML변수를 사용해야할 일이 있었다.

HTML에서 인라인으로 설정할 수 있는 방법이 없다.

그럴때 사용할 수 있는 방법!

HTML 인라인으로 변수이름을 정해서 보내주고 CSS에서 그 변수명 그대로 사용하면 된다.

<div style='--bg-color=#ccc' />

// react+typescript를 사용한다면 CSSProperties 타입을 사용해서 변수로 지정할 수 도 있다.
const colorInStyle = { '--bg-color': '#ccc' } as CSSProperties;
<div style={{...colorInStyle}} />

background-color: var(--bg-color);

* 참고: CSS 변수 지정하기

CSS에서도 js처럼 변수를 지정해서 사용할 수가 있다.

:root {
  --main-color: '#E24545';
  --sub-color: '#4597E2';
  --lg-size: '36px';
}

이런식으로 `:root` 에 변수를 지정해주면 된다.

네이밍룰이 있는데 무조건 처음 시작을 `--` 하이픈 두개로 해야한다는것.

불러서 사용할땐 `var(--변수이름)` 이렇게 사용하면 된다.

HTTP 헤더 및 캐시 설정

비오스터딩 — Thu, 3 Nov 2022 08:21:12 +0900

HTTP는 Hyper Text Transfer Protocol의 약자로, 하이퍼텍스트를 전송하는 프로토콜이다.

지금은 하이퍼텍스트(html) 뿐만 아니라 모든 형태의 데이터(이미지, 음성, 영상, 파일, 등등)를 다 전송할 수 있다.

HTTP메시지는 HTTP헤더와 HTTP바디로 이루어진다.

헤더는 HTTP 전송에 필요한 모든 부가 정보를 포함하고 있다.

바디는 요청에 대한 응답 데이터이다. (byte로 표현할 수 있는 모든 데이터)

오늘은 그 중 HTTP 헤더에 대해 알아 볼 것이다.

헤더에 들어가는 정보로는 메시지 바디의 내용, 크기, 압축, 인증정보, 브라우저 정보, 서버 정보, 캐시 정보 등등이 들어간다.

그 이외에도 필요한 임의의 필드를 추가할 수 있다.

헤더 필드는 다음과 같이 지정할 수 있다.

`field-name`: `field-value`

참고로 field-name은 대소문자 구분이 없다.

헤더의 필드 중 표현(Representation) 헤더라고 부르는 부분을 살펴보자.

표현은 리소스를 어떤 형식으로 표현하는지를 나타내는 정보이다. 즉 응답 헤더에서 찾아 볼 수 있다.

예를 들어 회원내역을 조회할 경우, 회원이라는 리소스를 html 혹은 json으로 표현하여 제공할 수 있다.

응답 헤더

- Content-type: 표현 데이터의 형식이다. 미디어타입과 문자 인코딩이 들어간다.

(ex. Content-type: text/html; charset=utf-8)

- Content-Encoding: 표현 데이터의 압축방식

(ex. Content-Encoding: gzip, deflate, br)

- Content-Language: 표현 데이터의 자연 언어

- Content-Length: 표현 데이터의 길이(바이트 단위)

transefer-encoding을 사용하면 한번에 얼마의 데이터를 제공하는지 알지 못하므로 content-length가 없음

전송방식은 단순전송, 압축전송, 분할 전송(Transfer-Encoding: chuncked), 범위전송이 있음

헤더의 필드 중 콘텐츠 협상(Negociation) 헤더라고 부르는 필드들이 있다.

클라이언트가 원하는 표현으로 서버에 달라고 요청하는 부분이다.

요청 헤더

- Accept: 클라이언트가 선호하는 미디어 타입

- Accept-Charset: 클라이언트가 선호하는 문자 인코딩

- Accept-Encoding: 클라이언트가 선호하는 압축 인코딩

- Accept-Language: 클라이언트가 선호하는 자연언어 (q를 사용하여 우선순위를 나타냄)

(ex. Accept-Language: ko-KR; ko;q=0.9, en-US;q=0.8, en;q=0.7)

일반 정보

요청 헤더

- Referer: 이전 웹페이지 주소

유입 경로 분석 할 때 사용됨

- User-Agent: 유저의 애플리케이션 정보

통계정보로 이용가능. 이 헤더를 사용하여 특정 브라우저에서 발생하는 버그 파악 가능

응답 헤더

- Server: 요청을 처리하는 오리진 서버의 소프트웨어 정보

- Date: HTTP 메시지가 발생한 날짜와 시간

특별한 정보

응답 헤더

- Host : 요청한 호스트정보(도메인). 필수값으로 http 2에서는 authority로 대체됨.

- Location: 페이지 리다이렉션 (3xx 응답에 Location 헤더가 있으면, 이 위치로 이동)

인증 헤더

요청 헤더

- Authorization: 클라이언트의 인증 정보를 서버에 전달

쿠키

응답 헤더

- Set-Cookie : 서버에서 클라이언트로 쿠키 전달

요청 헤더

- Cookie: 클라이언트가 HTTP 요청 시 서버에 전달하는 쿠키

- 모든 쿠키는 요청시 항상 서버에 전송됨 => 네트워크 트래픽 추가 유발. 최소한의 정보만 쿠키에 담아 사용

쿠키 생성시,

- domain: 정보를 넣으면 서브도메인까지 쿠키를 전송함. 도메인을 생략한 경우, 서브도메인은 접근 불가.

ex) domain=example.org => example.org, dev.example.org 도 접근 가능

- path : 경로를 포함한 하위 경로 페이지만 쿠키 접근 (보통 루트 경로로 지정. path=/ )

- secure: https인 경우에만 전송

- HttpOnly: 자바스크립트에서는 접근 불가

- SameSite: 요청 도메인과 쿠키에 설정된 도메인이 같은 경우에만 쿠키 전송 가능 (구 브라우저는 지원x)

캐시

캐시는 요청헤더와 응답헤더의 조합에 의해 제어된다. 캐시를 제어하기 위해서 세가지 방법을 사용할 수 있다.

1. Cache-Control

- Cache-Control: 캐시 응답 방법과 시간 설정

- max-age=초단위 (캐시 유효시간)

- no-cache: 데이터는 캐시해도 되지만, 항상 원서버에 검증받아 사용

- no-store: 저장하지 않음(캐시사용x). 메모리에서만 사용하고 최대한 빨리 삭제.

- Expires: 캐시만료일 지정 (1.1버전에서 사용되었음. cache-control과 함께 있으면 expires는 무시됨)

=> 캐시 유효시간이 초과하여 서버에 다시 요청할 때, 서버에서 기존 데이터가 그대로인 경우가 있음

이때 사용하는 것이 검증 헤더

검증 헤더

2. Last-Modified

- Last-Modified: 시간 (UTC 표기법)

응답 결과를 캐시에 저장하면서, 데이터 최종 수정일도 함께 저장

- if-modified-since: last-modified값

브라우저가 요청헤더에 조건부 요청을 넣어 요청. 서버에서 데이터 최종 수정일을 보고 검증할 수 있음

수정이 안되었다면, `304 Not Modified` 를 함께 보내어, 캐시에 저장된 데이터 활용(body없음)

3. ETag

- ETag: 캐시용 데이터를 위한 해쉬값. 서버에서 부여. 데이터가 변경되면 값이 변경됨.

캐시 제어 로직을 완전히 서버에서 캐시를 관리하는 방법 (클라이언트에서는 캐시 메커니즘을 알 수 없음)

- if-None-Match: etag 값

요청헤더에 넣어서 보냄. 서버에서 etag가 똑같으면 304, 아니면 200.

캐시 무효화

돈과 관련된 데이터의 경우, 항상 최신 데이터를 유지할 필요가 있다. 웹브라우저들이 캐시를 설정하지 않아도 임의로 캐시를 적용시키기도 하므로, 최신데이터가 필요한 경우 다음과 같은 설정을 넣어주어야 한다.

- Cache-Control: no-cache, no-store, must-revalidate

- must-revalidate: 캐시 만료 후 최초 조회 시 원서버에 검증해야함. 원서버 접근 실패시 504 에러 발생

- Pragma: no-cache (HTTP 1.0 하위 호환)

터미널(zsh)에서 깃허브 명령어 쉽게 입력하기(github alias)

비오스터딩 — Sat, 17 Sep 2022 11:35:58 +0900

터미널에서 거의 매일 사용하는 깃허브 커맨드

물론 소스코드 같은 GUI를 사용하긴 하지만 터미널에서 하는게 더 편할때가 있다.

나 같은 경우 항상 터미널에서 사용하는 정형화된 커맨드가 있다.

깃허브 레파지토리의 상태를 로컬에서 최신화시켜주기 위해서

branch를 develop으로 이동(`git checkout develop`)한 후 `git pull origin develop` 을 자주 쓴다.

그리고 깃허브로 branch를 push 할때도, 다른 branch를 베이스로 두지 않는 이상

develop에서 먼저 최신화시켜주고 rebase 한다음 push 해준다.

그러다 어제 문득 이런생각이 들었다. branch 왔다갔다하면서 적는거 너무 비효율적이지 않은가...

그냥 alias 설정해서 커멘드 한번에 다 처리하게 만들 수 있지 않을까?

그래서 zsh에서 alias를 설정해봤다!

0. alias 설정 방법

우선 터미널에서 zsh 설정파일을 열어보자.

oepn ~/.zshrc

기존 설정파일의 내용을 삭제하거나 수정하지 않았다면, 친절하게 alias 설정방법을 알려주는 글을 볼 수 있다.

# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"

`alias {커멘드별칭}="{실행되어야 할 커맨드}"`

이렇게 설정해놓으면, 터미널에서 커맨드별칭(alias)만 입력해도 뒤에있는 커맨드들이 실행이 된다.

1. 여러 커맨드 한번에 alias 설정 하기

그럼 develop branch 최신화를 위한 alias 를 먼저 설정해보자.

커맨드라인이 여러줄 들어갈땐 커맨드라인 사이에 `&&` 을 넣어주면 된다.

alias gpull='git checkout develop && git pull origin develop'

내가 어떤 branch에 있든지 터미널에서 `gpull` 을 입력하기만 하면, develop branch로 이동해서 origin의 상태를 가져온다!

2. 커맨드에 변수 넣기

두번째로 하고싶은 alias 설정은 `gpull` 보다는 복잡하다.

1. 우선 develop으로 branch를 이동시켜서 (`git checkout develop`)

2. develop을 최신화 시켜야하고 (`git pull origin develop`)

3. 다시 원래 branch로 돌아가서 (`git checkout ${branch}`)

4. 깃레파지토리에 그 branch이름으로 push해야한다. (`git push origin ${branch}`)

그러기 위해서 이 branch를 따로 설정을 해줘야한다.

찾아보니 변수를 따로 설정할 수 있는 방법이 있었다!

스니펫설정할때처럼 $1, $2 이런식으로 설정할 수 있다.

alias gpush='git checkout develop && git pull origin develop && git checkout $1 && git rebase develop && git push origin $1'

`gpush feature/issue#25` 이런식으로 명령어를 입력하면,

develop 최신화하고, 그 develop rebase하고, origin/feature/issue#25에 push 하는것까지 한번에 처리해준다.

rebase에서 충돌나면 직접 충돌해결하고 push는 다시해줘야하지만...

그래도 develop으로 왔다갔다안해도 된다는점에서 편하다

자주 쓰던 명령어들을 한줄로 해결해서 너무 좋다

SyntaxError: Invaild regular expression: invalid group specifier name (정규식 사파리 호환성 문제)

비오스터딩 — Mon, 12 Sep 2022 16:54:55 +0900

크롬에서 아무 문제 없었는데,

아이폰으로 열어보니 흰 화면이 떴다.

개발자도구를 열어보니 발견한 에러

Invalid regular expression

... 정규식.....?

찾아보니 사파리에서는 후방탐색 정규식을 지원하지 않는다고했다.

사파리는 지원하지 않는 후방탐색 정규식

허헣

후방탐색을 사용하지 않고 정규식으로 바꿔주기로했다.

url에서 search의 key로 value를 찾는 코드였다.

// before
const regExp = new RegExp(`(?<=${key}=)[^&]*`);
const queryValue: string = url.match(regExp)?.[0] || '';

// after
const regExp = new RegExp(`(`${key}`=)(.*?)[^&]*`);
const query: string = url.match(regExp)?.[0] || '';
const queryValue = query.replace(`${key}=`, '');

그냥 후방탐색하려는 문자열까지 포함해서 값을 얻은다음

replace해서 그 문자열은 빈스트링으로 만들어버렸다.

(.*?) : 앞의 패턴(문자열) 일치 후, 뒤에 오는 문자열을 만날때까지 포함되는 모든값

url을 파싱하기위해 필요했던 정규식이었는데,

URLSearchParams라는 내장메서드를 발견해서 그걸 사용했다.

React-Native:: 아이콘 사용하기 (react-native-vector-icons)

비오스터딩 — Mon, 25 Jul 2022 22:20:30 +0900

GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling.

Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source a...

github.com

토이 프로젝트는 나 혼자 뽀작뽀작 만들어보는거라

아이콘 만들어줄 디자이너 없음 ^^

즉 아이콘이랑 모든걸 혼자 해결해야한다.

별 생각없이 웹만들때처럼 그런 아이콘 가져다 쓰면되지 했는데

아니 이건 뭐 이렇게 설치하고나서 설정해야할게 많냐...

그래서 쓰지말까하다가 매번 이런 한계에 부딪칠것같아서

리드미를 읽어가며 설정해보기로했다.

설치

yarn add react-native-vector-icons
yarn add -D @types/react-native-vector-icons // for typescript

ios 설정

1. ttf 파일 가져오기

Xcode에서 `Fonts` 라는 새 폴더를 만든다.

`node_modules/react-native-vector-icons/Fonts` 폴더에서

필요한 ttf 파일을 가져와 붙여넣기한다.

난 `Material icons` 만 사용할거라 이것만 가져왔다.

뭘 사용할지 잘 모르겠다면 폴더 통채로 가져와도 된다.

2. `Info.plist` 설정

`Info.plist` 에 들어가서

`Fonts provided by application` (혹은 `UIAppFonts`) 라는 속성을 추가한다.

하위 항목에 내가 추가한 ttf 파일을 적어준다.

[cmd] + [shift] + [k] 를 눌러서 clean build 해주고,

[cmd] + [R] 눌러서 다시 빌드해준다.

3. pod install

처음에 빌드실패 떠서 왜 그러지 했더니 에러로그를 살펴봤더니

`pod install` 을 안했다.

잊지말고 pod install 하자.

cd ./ios
pod install

android 설정

1. `/android/app/build.gradle` 설정

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

`android/build.gradle` 이 아니라

`android/app/build.gradle` 에 추가해줘야한다!

난 특정 폰트만 사용할거여서 project.ext.vectoricons 를 더 적어줬다.

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

안드로이드 설정은 이걸로 끝!

사용하기

react-native-vector-icons directory

oblador.github.io

여기서 필요한 아이콘 찾아서 `name`에 잘 넣어주면된다.

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

<Icon name='chervon-right' size={16} color='#000' />

라이브러리 설치한게 뭐가 대수라고 이게 이렇게 감격스러울수가 ㅠㅠ

곧 폰트도 넣을텐데 ttf파일이니 아마 이런과정을 거치지 않을까 싶다.

폰트 넣는것도 어려우면 또 글쓸예정...

그냥 손쉽게 되면 좋겠다.

나중엔 이렇게 설정하는것도 익숙해지겠지?

VsCode에서 ESLint 적용 안됨

비오스터딩 — Sun, 26 Jun 2022 21:49:49 +0900

EsLint랑 Prettier 설정을 다 해놨는데,

VsCode 에서 적용이 안된다 ㅠㅠㅠ

아니 왜죠... 이거 안되면 너무 불편한데...

근데 설정파일 건드리기 전에는 됐었다.

하지만 이 설정 다른 프로젝트에서도 사용하는건데??

하면서 적용 안되는 채로 코딩하다가 안되겠다 싶어서 원인을 찾아나섰다.

그리고 발견한 허망한 실수

VsCode에서 터미널 켜면

Extensions들을 볼 수가 있는데...

거기서 ESlint 를 눌러보니 에러메시지가 보였다.

플러그인 넣었는데 설치안해서 생긴 오류였다.

설치안했던 라이브러리들 설치하고났더니 잘 적용된다.

공부하는 비오

터미널에서 AWS 계정 접속 및 여러 계정 관리하기

1. aws cli 설치

2. aws cli 인증 설정

3. 여러 계정 등록하기

a. 터미널에서 설정하기

b. 설정 파일 수정하기

4. AWS 계정 변경하기

React-native :: Font 설정

Android 설정

iOs 설정

사용 방법

z-index가 제대로 작동하지 않는 이유

1. z-index 도 우선순위가 있다.

a. 부모요소의 z-index가 자식요소의 z-index보다 우선순위를 가진다.

2. z-index는 아니지만 z-index처럼 영향을 미치는 요소들이 있다.

a. 뒤에 나온 코드가 앞에나온 코드보다 위에 위치한다.

b. position의 값이 static이 아닐 경우, 같은 코드레벨에서 static인 요소보다 위에 위치한다.

CocoaPods could not find ompatible versions for pod "FirebaseCore"

CSS 변수 지정 및 CSS에서 HTML 변수 가져오기

* 참고: CSS 변수 지정하기

HTTP 헤더 및 캐시 설정

터미널(zsh)에서 깃허브 명령어 쉽게 입력하기(github alias)

0. alias 설정 방법

1. 여러 커맨드 한번에 alias 설정 하기

2. 커맨드에 변수 넣기

SyntaxError: Invaild regular expression: invalid group specifier name (정규식 사파리 호환성 문제)

React-Native:: 아이콘 사용하기 (react-native-vector-icons)

설치

ios 설정

android 설정

사용하기

VsCode에서 ESLint 적용 안됨

`b. position`의 값이 `static`이 아닐 경우, 같은 코드레벨에서 `static`인 요소보다 위에 위치한다.