moonscode

[MacOS] 내가 보려고 만든 MacOS 초기설정 (2) - 환경설정

문스코딩 — Mon, 18 Mar 2024 14:25:49 +0900

Dev

git

git config 설정

$ git config --global user.name "mooncoding"
$ git config --global user.email "mooncoding@naver.com"

$ git config user.name
$ git config user.email

brew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 필요하다면 Next steps을 실행하세요
==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
    (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/USER/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh
    
# 이 부분을 실행하세요
(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/USER/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"

nvm (w. brew)

nvm을 설치하고 환경변수를 셋팅합니다.

$ brew install nvm

$ mkdir ~/.nvm

$ vi ~/.bash_profile # 또는 ~/.zshrc

---.bash_profile
# "brew intall nvm" 명령어 결과에 적용할 환경변수 값이 가이드 된다. (아래 경로와 다를 수 있으니 유의 ⚠️)
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
---

$ source ~/.bash_profile

$ nvm -v

node의 기본 버전을 설정합니다.

$ nvm alias default <version> # nvm alias default 18.18.2

$ nvm use default

$ nvm current # node -v

node

$ nvm install <v>
$ nvm use <v>

yarn, wget

$ brew install yarn
$ brew install wget

on-my-zsh > terminal tool

# install
$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# theme
$ vi ~/.zshrc

=== .zshrc ===
$ ZSH_THEME="af-magic"
=== .zshrc ===

Terminal

iOS 시뮬레이터

# appstore > xcode 먼저 다운로드 및 실행
$ open -a simulator

hosts 설정

$ vi /etc/hosts

---hosts
127.0.0.1 	local.moonscode.tistory.com
---

[Browser] CORS

문스코딩 — Thu, 14 Mar 2024 16:56:37 +0900

CORS

- 서버에서 설정이 열여있어야 함 (nginx, service, .. 등등에서 설정되어 있을 수 있음)

- 클라이언트에서 CORS 설정을 header에 포함하여 요청해야 함

[Git] checkout

문스코딩 — Wed, 13 Mar 2024 13:54:45 +0900

원격 브랜치의 상태를 확인

$ git fetch origin <remote-branch-name>

base 브랜치를 원격에서 가져오는 방법

$ git checkout -b <new-branch-name> origin/<remote-branch-name>

[MacOS] Amethyst (2) - Layout

문스코딩 — Mon, 11 Mar 2024 13:40:10 +0900

최근 Amethyst의 Layout 기능을 사용하고 OSX App Window 관리 프로그램을 Amethyst로 정착했다.

기존 Spectacle, Rectangle등의 프로그램은 개별 App Window을 조작했다면, Amethyst Layout 기능은 그것과는 결이 다르다.

전체 화면에서 App들이 배치될 방식의 Layout을 미리 설정하면 App들이 Layout 대로 자리를 채우는 방식이다.

아래 사진을 보면 Layout 개념을 이해하는데 도움이 될 수 있다.

위 레이아웃은 "Tall"이란 형태의 레이아웃이고 Amethyst에서 더 다양한 Layout을 제공하고 있다.

[브라우저] https redirect 해제하기

문스코딩 — Mon, 26 Feb 2024 21:41:09 +0900

chrome

1. chrome://net-internals 접속

2. Domain Security Policy 탭 선택

3. Delete domain security policies 항목에 redirect 해제 필요한 도메인 입력.

[Postman] pre-request script (module import)

문스코딩 — Mon, 19 Feb 2024 22:09:52 +0900

Postman을 사용하다 보면 단순한 request-body가 아닌

비즈니스 로직이 포함되어야 하는 request-body를 전송해야 하는 경우가 있습니다.

이럴 때 pre-request script 기능을 사용하면 javascript를 이용해 request-body를 만들 수 있습니다.

외부 모듈 가져오기

https://blog.postman.com/adding-external-libraries-in-postman/

Adding External Libraries in Postman | Postman Blog

Learn how to use the libraries included in the Postman sandbox, then review some methods for adding your own external libraries.

blog.postman.com

pre-request script는 기본적으로 외부모듈 import를 지원하지 않습니다.

이럴 때 사용할 수 있는 방법 2가지가 있는데요.

첫 번째, 내장 모듈을 사용하는 것

Module을 사용할 수 없는 것에 불편함이 있기 때문에

기본 내장 모듈을 제공합니다. moment, lodash, querystring 같은 script를 작성하는데 기본적으로 필요한 모듈들이 있습니다.

let moment = require('moment');
let jsonResponse = pm.response.json();
console.log("formatted date =", moment(jsonResponse.args.randomDate).format("MMM Do YYYY"));

그 외에도 기본적인 모듈을 제공하고 있어서

사용하려는 모듈이 내장 모듈로 지원하는지 아래 링크를 통해 확인할 수 있습니다.

https://learning.postman.com/docs/writing-scripts/script-references/postman-sandbox-api-reference/#using-external-libraries

Manage API data and workflows using Postman JavaScript objects | Postman Learning Center

Manage API data and workflows using Postman JavaScript objects: documentation for Postman, the collaboration platform for API development. Create better APIs—faster.

learning.postman.com

두 번째, runtime에 모듈을 가져오는 것.

Postman 내장 모듈에 없다면 cdn으로 런타임시에 가져오는 방법이 있습니다.

우선 사용하고자 하는 모듈의 cdn 경로를 준비합니다.

pm.sendRequest("https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.0/dayjs.min.js", (err, res) => {
   //convert the response to text and save it as an environment variable
   pm.collectionVariables.set("dayjs_library", res.text());
 
   // eval will evaluate the JavaScript code and initialize the min.js
   eval(pm.collectionVariables.get("dayjs_library"));
 
   // you can call methods in the cdn file using this keyword
   let today = new Date();
   console.log("today=", today);
   console.log(this.dayjs(today).format())
})

[JavaScript] 그림으로 이해하는 자바스크립트 Array

문스코딩 — Thu, 17 Aug 2023 00:17:24 +0900

Array 선언

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

길이 얻기 (length)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
console.log(animal.length) // 7

Element 얻기 ([idx])

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
console.log(animal[3]) // "dog"

Index 얻기 (indexOf)

만약 배열안에 찾는 값이 없다면 -1을 반환.

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
const index = animal.indexOf(”dog”)
console.log(index) // 3

앞에 Element 추가/제거 (unshift, shift)

const animal = ["beer", "cat", "dog", "eagle", "fox", "giraffe"]
const len = animal.unshift(”ant”)
console.log(len) // 7
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
const element = animal.shift()
console.log(element) // "ant"
console.log(animal) // ["beer", "cat", "dog", "eagle", "fox", "giraffe"]

뒤에 Element 추가/제거 (push, pop)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox"]
animal.push("giraffe")
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

push 함수는 arr[arr.length]='value' 형태로 처리할 수도 있다.
다만, 추가하려는 index값이 전체 배열 길이보다 크다면 index 위치까지 undefined로 채우게 된다.

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox"]
animal[6] = "giraffe"
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox"]
animal[7] = "giraffe"
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", undefined, "giraffe"]

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
animal.pop()
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox"]

N번째에 Element 추가/제거 (splice, delete)

splice(idx, len, ...rest) // return []

idx의 위치부터 len만큼 제거하고 ...rest 요소를 삽입한다. 그리고 제거된 배열을 반환한다.

const animal = ["ant", "beer", "cat", "eagle", "fox", "giraffe"]
animal.splice(3, 0, "dog")
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
const removeAnimal = animal.splice(3, 1)
console.log(removeAnimal) // ["dog"]
console.log(animal) // ["ant", "beer", "cat", "eagle", "fox", "giraffe"]

delete를 통해 N번째 element를 제거할 수도 있다.
하지만 index 위치에서 element 빠지는 게 아닌 element가 undefined로 변경된다는 게 다르다.

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
delete animal[3]
console.log(animal) // ["ant", "beer", "cat", undefined, "eagle", "fox", "giraffe"]

Element 범위 얻기 (slice)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
console.log(animal.slice(3)) // ["dog", "eagle", "fox", "giraffe"]
console.log(animal.slice(0, 4)) // ["ant", "beer", "cat", "dog"] 
console.log(animal.slice(3, 6)) // ["dog", "eagle", "fox"]

Element 변경하기 (1)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
animal[3] = "deer"
console.log(animal) // ["ant", "beer", "cat", "deer", "eagle", "fox", "giraffe"]

Element 변경하기 (2) - 범위 (splice)

const animal = ["ant", "beer", "cat", "apple", "banana", "cherry", "fox"]
const removeAnimal = animal.splice(3, 3, "dog", "eagle")
console.log(removeAnimal) // ["apple", "banana", "cherry"]
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox"]

합치기 ( concat)

const animalGroupA = ["ant", "beer", "cat", "dog"]
const animalGroupB = ["eagle", "fox", "garaffe"]
const animalGroupC = animalGroupA.concat(animalGroupB)
console.log(animalGroupC) // ["ant", "beer", "cat", "dog", "eagle", "fox", "garaffe"]

초기화

JavaScript는 배열을 초기화하는 함수를 지원하지 않지만, 아래와 같이 다양한 방법으로 초기화할 수 있다.

animal = []
animal.length = 0
animal.splice(0, animal.length)

[Python] 그림으로 이해하는 파이썬 List

문스코딩 — Tue, 15 Aug 2023 23:41:50 +0900

List 선언

 animal = [”ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]

길이 얻기 (len)

animal = [”ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
print(len(animal)) // 7

Element 얻기

animal = [”ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
print(animal[3]) # "dog"

Index 얻기 (index)

animal = [”ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
print(animal.index("dog")) # 3

앞에 Element 추가/제거 (insert, del)

animal = [”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
animal.insert(0, "ant")
print(animal) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]

animal = ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
del animal[0]
print(animal) # [”beer”, “cat”, ”deer”, “eagle”, “fox”, “giraffe”]

뒤에 Element 추가/제거 (append, pop)

animal = ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”]
animal.append(0, "giraffe")
print(animal) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]

animal = ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
animal.pop()
print(animal) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”]

N번째에 Element 추가/제거 (insert, remove, pop)

animal = ["ant", ”beer”, “cat”, “eagle”, “fox”, “giraffe”]
animal.insert(3, "dog")
print(animal) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]

animal = ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
animal.pop(3) # animal.remove("dog")
print(animal) # ["ant", ”beer”, “cat”, “eagle”, “fox”, “giraffe”]

Element 범위 얻기 ([n:m])

animal = ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
print(animal[3:]) # [”dog”, “eagle”, “fox”, “giraffe”]
print(animal[:4]) # ["ant", ”beer”, “cat”, "dog"]
print(animal[3:6]) # [”dog”, “eagle”, “fox”]

Element 변경하기 (1)

animal = ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, “giraffe”]
animal[3] = "deer"
print(animal) # ["ant", ”beer”, “cat”, ”deer”, “eagle”, “fox”, “giraffe”]

Element 변경하기 (2) - 범위

animal = ["ant", ”beer”, “cat”, ”apple”, “banana”, “cherry”, “fox”]
animal[3:6] = ["dog", "eagle"]
print(animal) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”]

합치기 (extend, +)

animalGroupA = ["ant", ”beer”, “cat”, ”dog”]
animalGroupB = ["eagle", ”fox”, “giraffe”]
animalGroupA.extend(animalGroupB)
print(animalGroupA) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, "giraffe"]

animalGroupA = ["ant", ”beer”, “cat”, ”dog”]
animalGroupB = ["eagle", ”fox”, “giraffe”]
animalGroupC = animalGroupA + animalGroupB
print(animalGroupC) # ["ant", ”beer”, “cat”, ”dog”, “eagle”, “fox”, "giraffe"]

초기화 (clear)

animal = ["ant", ”beer”, “cat”, ”dog”, "eagle", ”fox”, “giraffe”]
animal.clear()
print(animal) # []

[Redux] redux-thunk

문스코딩 — Mon, 14 Aug 2023 17:50:07 +0900

Thunk란?
먼저 thunk를 이해해야 redux가 비동기를 어떻게 처리하는지 이해할 수 있다.
https://ko.wikipedia.org/wiki/%EC%8D%BD%ED%81%AC

썽크 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 컴퓨터 프로그래밍에서 썽크(Thunk)는 기존의 서브루틴에 추가적인 연산을 삽입할 때 사용되는 서브루틴이다. 썽크는 주로 연산 결과가 필요할 때까지 연산을

ko.wikipedia.org

thunk는 "생각된(think의 과거분사, 실제로 없는 말)" 후 무엇인가를 실행하겠다. 라는 뜻으로,
redux에서는 "무엇인가 로직을 처리하고 dispatch를 실행하겠다." 라고 생각하면 된다.
즉, dispatch전 실행될 코드를 thunk로 이해하면 되겠다.

redux-thunk

기본적으로 redux는 비동기처리가 불가능하다.

Action을 통한 Reducer 처리는 오직 동기로만 이루어진다.

그럼 Redux에서 1초후에 계산하는 비동기처리는 아예 불가능한 걸까?

이는 redux-thunk라는 미들웨어로 해결할 수 있다.

redux-thunk는 redux의 미들웨어로 action 대신 function을 반환하는 action creater를 사용할 수 있게 한다.

redux	redux-thunk
dispatch(action)	dispatch((dispatch) => { dispatch(action) })

Action에 1초후에 계산하는 비동기처리가 함수로 들어간다.

Action에 함수가 들어간다니... 객체가 아니기 때문에 Redux는 에러를 반환한다.

하지만 이 때 redux-thunk 미들웨어가 적용되어 있다면, thunk 함수 형태의 Action을 미들웨어가 처리해준다.

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment())
    }, 1000)
  }
}

dispatch(incrementAsync()) // 실행

dispatch 안에 Action으로 1초후에 계산하는 비동기 thunk 함수를 전달한다.

redux-thunk가 적용되어 있다면 thunk 함수의 로직(1초 지연)이 먼저 실행되고 의도한 dispatch가 실행된다.

redux-thunk 구성.

yarn add redux-thunk

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(rootReducer, applyMiddleware(thunk))

[ReduxToolkit] createAsyncThunk

문스코딩 — Mon, 14 Aug 2023 14:38:24 +0900

redux에서 비동기함수 처리는 [redux-thunk](https://github.com/reduxjs/redux-thunk)라는 별도의 미들웨어를 통해야 한다.

반면 rtk은 비동기함수 처리를 위해 createAsyncThunk 함수를 내장하고 있다.

Thunk란?

https://moonscode.tistory.com/249

Redux redux-thunk

Thunk란? 먼저 thunk를 이해해야 redux가 비동기를 어떻게 처리하는지 이해할 수 있다. https://ko.wikipedia.org/wiki/%EC%8D%BD%ED%81%AC [썽크 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전.

moonscode.tistory.com

createAsyncThunk란?

redux-thunk는 단순히 내 코드블럭을 wrapping하여 실행을 지연시키는 함수이다.

createAsyncThunk는 이 redux-thunk 기능을 구조화한 API이다.

지연단계를 pending, fulfilled, rejected 3단계로 구조화하여 제공하고 다양한 옵션으로 그 과정을 세밀히 조정할 수 있다.

pending	thunk 실행중
fulfilled	thunk 완료
rejected	thunk 실패

일차적으로 반환받는 결과는 thunk의 단계이다.

thunk의 단계가 fulfilled이 되면 비로소 thunk의 결과값을 받을 수 있다.

createAsyncThunk 선언.

createAsyncThunk는 createAction을 통해서 pending, fulfilled 그리고 rejected 세 가지 상태를 반환.

(createAsyncThunk에서 반환하는 단계도 redux에서는 action으로 정의)

// fetchUserById.pending
// fetchUserById.fulfilled
// fetchUserById.rejected
const fetchUserById = createAsyncThunk(
  // param1. type - thunk를 식별하기 위한 action type
  // 'users/fetchByIdStatus/pending'
  // 'users/fetchByIdStatus/fulfilled'
  // 'users/fetchByIdStatus/rejected'
  'users/fetchByIdStatus',
  // param2. payloadCreator - (비동기) 로직을 반환하는 함수
  // (arg, thunkAPI) => {}
  // arg - dispatch할 때 전달된 매개변수
  // thunkAPI = { dispatch, getState, extra, requestId, signal, rejectWithValue, fulfillWithValue } - redux에서 thunk 함수로 전달하는 매개변수와 옵션
  async (userId: number, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
  // param3. options
  // { condition, dispatchConditionRejection, idGenerator, serializeError, getPendingMeta }
)


// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    })
  },
})

createAsyncThunk Result.

createAsyncThunk는 Promise를 반환.

비동기의 결과값(Thunk 선언. 예제에서 response.data 값)에 접근하고 싶다면?

extraReducers에서 fulfilled 단계를 정의하면 되지만, 클릭이벤트와 같이 redux의 context 밖에서 처리하려면 unwrap 속성이 필요

without unwrap	unwrap
반환된 Promise를 직접 사용하여 비동기 작업을 처리.	반환된 Promise에서 비동기 작업의 결과값을 추출.

// thunk는 기본적으로 promise(함수의 단계를 반환하는 promise)를 반환
const onClick = () => {
  dispatch(fetchUserById(userId)).then(() => {
    // do additional work
  })
}

// unwrap
// createAsyncThunk가 반환한 Promise에는 fulfilled, rejected 상태를 처리할 수 있는 unwrap 속성을 가진다.
const onClick = () => {
  dispatch(fetchUserById(userId))
    .unwrap()
    .then((originalPromiseResult) => {
      // handle result here
    })
    .catch((rejectedValueOrSerializedError) => {
      // handle error here
    })
}

// unwrapResult
const onClick = () => {
  dispatch(fetchUserById(userId))
    .then(unwrapResult)
    .then((originalPromiseResult) => {
      // handle result here
    })
    .catch((rejectedValueOrSerializedError) => {
      // handle result here
    })
}