개발하는 리트리버

-맥 터미널 기준으로 작성되었습니다.-

터미널에서 PATH나 여타 설정을 할 필요가 있을 때,

zshrc 나 bashrc 등의 파일을 사용한다.

또, 도커나 여타 설정 파일들을 터미널에서 간단히 확인하고자 할때 

우리는 보통 cat ${원하는 파일}, vim ${원하는 파일}  등의 명령어를 사용해서 파일을 체크한다.

물론 사용할때마다 눈이 아프다...

하얗게만 꾸며져 있는 이 터미널...

이런 삭막한 터미널은 그만.

바~로 프로 출신들의 비기를 사용할 시간.

bat 명령어 하나만 있으면 해결할 수 있다.

일단 기본적으로는 내장되어 있지는 않아서 다운로드 해주어야 한다.

$ brew install bat

// m1등에서 Rosetta2 관련 에러가 발생하면 아래 명령어로 실행 
$ arch -arm64 brew install bar

그러고 나서는 다른 것과 같이 써주면 된다.

   bat ${명령어}   

???

내가 아까 vim 과 cat으로 보던 그 파일 맞나 싶을꺼다.

알록달록 전혀 다른 비주얼이 기다리고 있다.

라인 넘버와 export 등의 색 표시까지....

진짜 깔끔하다. 그저 GOAT...

보기 좋게 코딩하쟈 레쯔고우.

 The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0.

라는 WARN 이 콘솔에서 계속 보여 처리하기로 맘 먹었다.

 이제는 사용되지 않을것이다.. 라고 하니 다르게 수정해줘야 겠다.

아래 코드는 원래 createSlice 안에 있는 extraReducers의 코드이다.

이를 builder와 addCase가 들어간 함수로 수정해주면 된다.

 // 수정 전 코드
 extraReducers: {
     [A.success]: (state, action) => {
       state.A = action.payload;
     },
     [A.failed]: (state, action) => {
       state.A = null;
     },
   },

// 수정 후 코드
extraReducers: (builder) => {
    builder
      .addCase(A.success, (state, action) => {
        state.A = action.payload;
      })
      .addCase(A.failed, (state) => {
        state.A = null;
      });
  },

builder와 addCase를 통해서 기존 함수를 재구성해주면

해당 워닝을 제거할 수 있다! 간단간단

자..이제 재 역할을 잘 하는 지 확인하러.. 총총..

두 함수 모두 객체에서 특정 key 값이 있는지를 확인할 수 있다.

위 처럼 객체가 해당 키 값을 가지고 있으면 true를 반환해 준다.

심지어 null 값이나 객체를 넣어도 오류 없이 false를 반환해 준다. (예외 처리 안해도 된다! 네이스!!)

그러면.. 두 함수 모두 기능이 똑같으니까 입맛대로 쓰면 될까요..?

노오옵!! 앞으로는 hasOwn를 쓰도록!

hasOwn이 hasOwnProperty의 상위호환이기 때문이다.

hasOwnProperty가 문제가 있을 때가 있다. 

1. Object.create(null) 로 생성 시에 접근할 수 없다.

2. 객체 내에 선언 시에 덮어쓸 수 없다.

개인적으로 hasOwnProperty를 사용할 때,

오류가 나는 두 경우를 직접 만나지는 못해서 굳이..? 라는 생각도 있지만,

참고 링크 상단에 보이듯

hasOwn() 은 hasOwnProperty()를 대체하는것을 목표로 했다고 한다.

그렇다면.. 사용해 주는 방향으로 버릇을 바꾸는게 좋을 것 같다.

참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn

.gitignore 는 git 을 관리하면서 올리지 않을 파일들을 관리한다.

해당 파일에 명시된 파일, 폴더들은 git에 올라가지 않는다.

그런데 만약 해당 파일을 만들기 전에

ignore 되어야할 파일들이 이미 push 되서 올라갔다면 어찌해야할까?

그 파일들은 그냥 나두면 없어지지 않고 유지된 채로 존재한다.

일일이 하나씩 지워야 할까?

아래 명령어를 사용하면 gitignore가 반영시켜서 push를 할 수 있다.

git rm -r --cached
git add .
git commit -m "yout commit message"
git push

위 과정을 통해서 .gitignore 파일을 push된 브랜치에 적용시켜 버릴 수 있다!

이렇게 하면 일일이 지우는 과정을 생략할 수 있다.

이 세팅s 파일에 무슨 내용들이 있는지 체크 해보려고 한다.

BASE_DIR

루트 디렉토리 설정입니다! 

아래와 같이 기본적으로 설정되어 있는데, 

Path() : 파일 시스템에서 파일경로를 관리하는 함수입니다.

__file__ : 현재 파일, 여기서는 settins.py

resolve() : 절대 경로를 뽑아줍니다.

parent : 부모 폴더를 의미합니다.

BASE_DIR = Path(__file__).resolve().parent.parent

SECRET_KEY

암호화 인증에 사용되는 비밀키이다. 일반적으로 프로젝트 생성시에 settings.py에 생성된다. 하지만 해당 비밀키는 공개되면 안되기에

코드단에서 관리해주면 안된다. (개인 프로젝트라면 문제없겠지만) 후에는 json이나 environ등의 방식으로 외부에 따로 저장해야한다.

DEBUG

개발시에는 True, 프러덕션일때는 False 로 설정해주면 된다.

에러 발생시에 전자는 디테일한 정보를 주고 후자는 Not Fount 등의 표시만 보이고 아무런 표시가 보이지 않는다.

ALLOWED_HOSTS

운영 서비스시 호스트로 가능한 목록이다. 

INSTALLED_APPS

현재 장고 프로젝트에서 사용되는 어플리케이션 목록입니다. 단어 하나가 폴더 경로라고 생각하면 쉽습니다.

issue/qwe/user 라고 한다면 issue 폴더 안에 qwe 폴더 안에 user 관련된 내용의 어플리케이션입니다.

MIDDLEWARE

장고에서 발생하는 요청과 응답 처리에 연결되는 프레임 워크입니다. 

DATABASES

디비와 관련된 세팅을 하는 부분입니다. 기본적으로 sqlite3로 설정되어있습니다. 

LANGUAGE_CODE, TIME_ZONE

시간 지역 설정과  언어 설정입니다. 'ko-KR', 'Asia/Seoul' 을 하용합니다.

USE_IN18N, USE_L10N, USE_TZ

각각 번역 시스템 활성화 여부, 현지화된 데이터 형식 사용여부, 시간대 인식여부를 설정하는 변수입니다.

꾸준하게 의지를 가지고 무언가를 계속하는건 쉽지 않습니다.

충분히 하다가 여러 상황에 의해서 목표를 잃고 쓰러지기도 하죠.

그럴때 다시금 일어나서 달려나가는데에 있어서

'동기'의 존재는 참 중요합니다.

운동을 하는대에도 동기를 만들어야 합니다.

aka 눈바디를 확인할 것이냐, 아니면 일주일에 몇번이상 헬스장가는 목표를 채우것이냐.

개인의 동기는 조금씩 다를 수 있지만 가장 효과적인 동기는 수치라고 생각합니다.

시간의 지남에 따라 달라지는 수치를 보면서 더욱 자극을 받고 달려나갈 수 있기 때문입니다.

그리고 그런 수치를 잘 확인할 수 있는게

바로 인바디라고 생각합니다.

서울복합문화센터 헬스장에 들어가면 딱 보이는 인바디와 체중계!

정기적으로 측정하면서 자신의 성장과정을 체크한다면 더욱 좋겠죠?

추가로 인바디 앱도 있습니다. 이 앱과 함께라면 측정한 값들을 잘 정리해 둘 수 있기에

같이 활용하는 것을 권장드립니다. 

물론 매일 매일 인바디를 측정할 필요는 없습니다.

그 당일날 마신 물이나 음식에 따라서 수치가 달라질 수 있기 때문입니다.

어제 열심히 했는데 왜 오늘 수치가 이러지? 라는 걱정에 빠지는 것을 원천 봉쇄!

하루 이틀 수치는 충분히 그럴 수 있고, 여러번 측정시에도 값이 조금씩 바뀔수 있다는거~

그래서 한달에 한번정도 날을 정해놓고 측정하는 것을 권합니다.

요즘 월초에 측정하고 관리하자는 케치프레이즈도 강조하고있으니 말이에요~! 놓치지 말고 해봅시다.

개인 적으로 저는 빈속인 주말 오전에 가서 측정하고 있습니다.

서울복합문화 헬스장에서 인바디와 함께

올 여름 핫바디(?)를 위해 다같이 달려가 봅시다!

프로젝트 생성을 원하는 폴더로 이동 후에 아래 명령어를 순차적으로 입력해준다.

$ python3 -m venv venv # 가상환경 생성
$ source venv/bin/activate # 가상환경 실행

$ pip install django # 장고 설치
$ pip install djangorestframework 

$ django-admin startproject issuelist .  # 현재 폴더에 장고프로젝트 생성 'issuelist'

여기서 마지막 명령어에  . 이 빠지지 않도록 유의!! 지금 현재 있는 디렉토리를 뜻한다.

그러고 나면 가상환경 상태애서 issueList 라는 프로젝트와 manage.py 파일이 생성된 것을 확인할 수 있다.

구체적인 구조는 아래와 같다.

__init__.py : 해당 폴더가 파이썬 패키지라는 것을 알려줍니다. (내용 X)

manage.py : settings.py 에 설정된 부분을 가지고 오는 등의 사이트 관리를 하는 파일입니다.

settings.py : 설정 추가해주는곳 입니다.

urls.py : url 패턴 목록을 관리합니다.

asgi.py, wsgi.py : 장고 프레임워크가 작동하기 위한 웹서버 인터페이스 

정도로만 체크체크!

그리고 나서 해당 명령어로 마이그레이션을 진행한다.

마이그레이션이란, 장고에서 변경사항을 데이터베이스 스키마에 반영하는 과정입니다!

$ python3 manage.py migrate

db.sqlite3 이라는 파일도 추가되었습니다. 

그러고 나면 이제 실행할 일만 남았습니다.

$ python3 manage.py runserver

딱 보니 127.0.0.1:8000으로 접속하면 될것 같군요.  이는 localhost:8000 과도 같습니다.

해당 페이지에 접속하면 장고 웹 페이지가 실행된것을 확인할 수 있습니다.

가상환경이 어떤 것인지, 어떻게 실행하는지에 대해서 간략히 알아보고자 한다.

가상환경은 프로젝트 마다 다른 버전, 패키지 등을 관리하기 위해서 사용한다.

모든 프로젝트가 같은 버전을 바라보지는 않는다. 예전에 만든 프로젝트들은 이전 버전들을 참조하고 있을 것이고,

최근에 생성한 프로젝트들은 최신 버전들을 바라보고 있을 것이다. 

이때 동일한 환경에서 두 프로젝트를 돌리면 버전 문제로 제대로 된 실행이 되지 않을 확률이 높다. 

아래 그림에서 왼쪽은 가상환경을 사용하지 않았을 때의 환경이다. 같은 파이썬 환경을 공유하고, 두 프로젝트는 같은 버전의 C를 바라본다. 중간에 B프로젝트에서 C버전을 바꾼다면 A가 바라보는 C의 버전도 같이 변화한다. 얼마나 무서운 일인가!! 쵸비비이이이사아앙

하지만 오른쪽의 이미지 처럼 가상환경속에서는 자유로운 세팅이 가능하다. A와 B는 각각 원하는 패키지와 버전을 따로 참조할 수 있고 심지어 다른 파이썬 버전을 사용할 수도 있다. 

그럼 가상환경 세팅은 어찌 할까?

일단 세팅하기를 원하는 프로젝트 루트로 이동한다. 그리고 아래 명령어를 실행.

실행해주면 해당 이름의 폴더가 추가된다. 저 경우 가상환경의 이름을 'venv' 로 지었다.

$ python -m venv ${가상환경 이름}

폴더가 생성된것을 확인했으면 이제 실행을 시켜준다!

$ source ${가상환경 이름}/bin/activate       // Mac 실행 명령어
$ source ${가상환경 이름}/Scripts/activate   // Window 실행 명령어

종료할때는 간단히 단어 하나를 입력해주면 가상환경이 종료가 된다.

$ deactivate    // 가상환경 종료 명령어

위 그림은 네이버 홈페이지의 한 부분이다. class 뒤에 tL023, wLQj 등의 문자가 들어있는 것을 확인할 수 있다. 직접 넣어준 건가?

리엑트 프로젝트를 만들어서 요소를 분석해 보면 위 그림과 같이 랜덤성의 문자들이 class 이름 뒤에 붙어 있는 것을 확인할 수 있다.

이 문자들은 CSS 모듈과 연관이 있다.

CSS 모듈은 커지는 프로젝트에서 원하는 곳에 원하는 css를 혼동 없이 지정하기 위한 방법이다.

보통 우리는 .IUclass { ... }   처럼 css 파일을 작성한다.

그런데 프로젝트가 점점 커짐에 따라 class 명이 겹칠 수 있는 가능성이 커지기 마련이다. 모든 클래스명을 기억하면서 지을 수 없기 때문이다. 이런 포인트에서 CSS 모듈은 힘을 발휘한다. 필요한 곳에서만 모듈을 불러와서 디자인을 적용하면 된다. 그러면 혹시나 같은 이름의 class가 다른 곳에 있더라도 전혀 영향을 받지 않는다.

CSS모듈 파일작성은 아래와 같다.

[모둘명].module.scss

그러고 해당 파일을 import 해주면 준비는 끝난다. 그리고 나서 원하는 태그에 className에 추가해 주면 된다.

import Styles from '경로';

<div className={Styles.[클래스명]} />

이 과정에서 선언된 클래스명이 모두 고유의 이름으로 자동 변환된다고 한다. 위에 서 봤던 tL023, wLQj 등의 텍스트가 추가되는 것이다. 따로 설정해 줄 필요도 없기 때문에 완전 분리를 보장받는다. 

이런 이유로 Reat 프로젝트에서 html를 까보면 알 수 없는 값들이 요소마다 붙어있던 것이다. 고로 무시해도 된다ㅓ 

참조 : https://www.tcpschool.com/react/react_styling_cssmodule

 [코드리뷰 메모]

const array = [];

array
   .filter(v => v.category === 'toy')
   .some(v => v.flag === true);

특정한 배열에서 category가 toy인 아이템들을 필터로 걸러내고

그 중에서 flag 값이 true인 아이템이 있는가?! 라는 함수를 만들고 싶었다.

순차적으로 배열을 필터링하고나서 해당 값을 가지는 아이템이 존재하는지 체크까지

순차적으로 원하는 목표들을 해낸다.

위의 함수를 한번 더 쉽게, 짧게 혹은 효율적으로 다시 작성해보자!

기본적으로 순차적으로 원하는 바를 위해서 위의 함수는 배열을  두 번을 돈다.

만약 필터까지된 배열과 원본의 배열이 같다면 똑같이 두 번을 도는 꼴이다.

const array = [];

array
   .some(v => v.flag === true && v.category === 'toy');

고로 위 처럼 한번돌면서 해결하게 끔
some 함수에 조건을 몰아주는것으로 수정!!