쿼리파라미터와 패스파라미터?

url 파라미터 사용하기

// 클라이언트 > 패치 url  http://localhost:3030/orange

router.get('/:username', isLogined, async (req, res, next) => {

  console.log(req.params) // { username : orange }

}

• 패스파라미터? url 파라미터 라고 부르는드~읏
• 경로에 :파라미터이름 을 지정해주고, req.params를 확인하면 지정 이름은 key, 클라이언트에서 전달한 이름은 value로 주어진다.

query string 사용하기

// 클라이언트 > 패치 url  http://localhost:3030/?username=orange

router.get('/', isLogined, async (req, res, next) => {

  console.log(req.query) // { username : orange }

}

• 클라이언트에서 api요청을 할때 ?keyName=value 형태로 요청하게 되면 req.query에서 확인할 수 있다.
• 🎈 주의 : query string은 말그대로 문자열이다. DB 조회할때 숫자를 사용한다면 꼭 변환해주고 사용하기

시퀄라이즈 설정

공통 설정 코드예제

const common = {
  charset: 'utf8mb4', // utf8 + 이모티콘 
  collate: 'utf8mb4_general_ci',  // utf8 + 이모티콘 getneral 또는 unicode 적용
  logging: true,
  // query: {
  //   raw: true, // ! 이 옵션 넣으면 result.get에러 발생! 넣지말기^^
  // },
  underscored: true,
  dialectOptions: {
    useUTC: true, // for reading from database
    dateStrings: true, // ! 데이터 로드시 문자열로 가저옴
    typeCast: true, // ! 타임존을 역으로 계산하지 않음
  },
  timezone: '+09:00', //for writing to database
};

1. 타임존 설정하기

참고 사이트 : 시퀄라이즈 타임존 설정하기

• 위 설정에서 dialectOptions, timezone를 보면 된다.
• 타임존 설정 전 : 2018-10-18T06 : 45 : 38.000Z 요런 형태에서
• 타임존 설정 후 : 2018-10-19 01:08:50 요런 형태로
• 한국 시간 설정을위해 : timezone 옵션에 +9 설정
• 참고 : 타임존 설정 이후 gnoring invalid configuration option passed to Connection: useUTC. This is currently a warning, but in future versions of MySQL2, an error will be thrown if you pass an invalid configuration option to a Connection 라고 콘솔에 출력된다.

2. 한글+이모지를 위한 charset 설정

내가 사용한 데이터베이스 MySQL을 기준으로, DB에 한글을 담기 위해서는 utf8 설정이 필요하다. 사용자 이름을 담는 필드라면 utf8 만으로 충분하지만, 본문을 담은 필드라면 이모지를 담을수 있는 utf8mb4 설정을 해주어야 한다. callate옵션 또한 동일한 옵션을 적용하며 general or unicode 중 선택하여 적용한다. unicode 옵션이 더 넓은 범위라고하니 너의 선택!

참고 사이트 : general_ci & unicode_ci의 차이점

3. Query : { raw : true }...

처음 타임존을 설정하면서 포스팅쓴 엉아가 설정한 옵션을 cmd +C & cmd +V 로 고스란히 옴겨서 사용했다. 하하하! 모델링 다 하고 api 만들다 보니 Include에서 문제가 발생한다.

• 문제 1 : result.get is not a function..
  • 문제 1을 해결하기 위해 미친 듯 구글 검색
  • 해결 : 파인더(findAll())옵션에 raw:true, nest:true 추가로 가까스로 해결
  • 하지만 문제 2등장🤧
• 문제 2 : hasMany(1:다 중 다 일때)관계의, 즉 Feed.hasMany(Image) 일 때, Image가 배열에 담겨 반환되야 하는데, raw:true 옵션 덕분에 단일 객체가 되고, 여러장 이미지 결과로 나온다면, 각각 1개씩 여러게에 나뉘어 중복 출력되버림!
  • 문제 해결을 위해 또 미친 듯 구글 검색 : raw:true를 제거해야 한다, id 필드를 새로 만들어라 뭐라.. 말이 많음
  • 해결과정 1 : raw:true 를 제거해라 -> 처음 문제 1로 되 돌아감
  • 해결과정 2 : id 필드를 새로 만들어라 -> 별반응 없음
  • 해결과정 3 : 글로벌설정에 query: {raw:ture} 설정을 추가해라 -> 이미 추가되어 있는데?
  • 울며 겨자 먹기로 모든 설정 다 지우고 시도해봄...
  • 해결 : query: {raw:ture} 글로벌 설정 까지 제거하고 시도했더니 정상 출력되었다.
  • 꺅🤧

느낀 점 : 모르는 코드는 넣는 것이 아니다..! query: {raw:ture} 이 한줄이 하는 기능도 모른체 일딴 넣고 본 내 잘못으로.. 몇 일 날렸네..

파인더 옵션 잠깐 살피기 🤓

findAll, findOne같은 파인더를 사용할 때 반환값 설정을 할 수 있다. 다음과 같은 옵션이 있으니 참고하자! (이번에 내가 사용해보고 문제가 있었던 것들만 정리!)

• plain: true : 결과값의 배열을 단순화 하여 리턴 ex : images : [object,object] => images : Array
• raw: true : 시퀄라이즈 설정에서 query:{raw:true} 했을 경우 이 옵션을 꼭 넣어줘야 result.get 에러가 안난다. 이 옵션은 리턴 값을 단일 객체로 변형하여 보여준다. 문제는 hasMany의 배열값도 객체로 단일화 해버린다는 것!
• nest : true : 객체를 계층화 하여 보여준다. raw 옵션과는 항상 쌍으로 다닌다. 설정안하면... 'Images.Feed.id' : 값이런식으로 문자열로 키가 보여줌.

최종 수정 : 2020.10.07(수)

🥶 Error serialzing ....

SerializableError: Error serializing `.initialState.account.user` returned from `getServerSideProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value all together.
....

한참 잘 하고 있었는데 두둥 에러등장..

프론트에서 타입스크립트 코드 정리한다고 한참 뒤적거리다가, 콘솔을 확인하니 에러가 등장했다. 이게 또 타입스크립트 만지다 잘못했나? 했지만 아니고, 백엔드 서버가 문제였다. 해더-쿠키 읽어서 유저정보 확인하는 과정에서 정리안된 코드(프론트-백엔드 오가며 작업한것이 화근!🥵) 덕분에 서버에러가 난 것! 코드는 마무리 될 때까지... or 뒷정리를 잘하자! 😫

원인

결론은 백엔드서버에서 동일한 상태코드 응답을 2회 작성 했을때 에러발생시킴(다른 상태코드로 응답할 경우 에러 안났음) 여기서 원인 찾는데 고생한 이유 중 하나는 프론트에서 구현한 저 변수명 때문인데, 참 바보같이.. 화면에 ServerError 라고 잘 쓰여있구만 프론트에서 뒤적뒤적 거렸다~

• initialState.account.user : 리덕스 스토어의 상태, 유저데이터를 담는다.
• getServerSideProps : nextjs의 서버사이드랜더링 함수

결국 유저데이터 업데이트 할때 문제가 생긴다는 것을 알았고, 서버를 확인하니, 바로 문제해결 스타또오!

• undefined는 직렬화되지 못하기에 null 로 대체 되도록, 또는 undefined가 발생하지 않도록 해야함.
• 왜 undefined가 발생 되었는지 찾아보잤!

문제의 코드

/** @쿠키유저정보 */
router.get('/match-cookie', async (req, res) => {
  try {
    // console.log('쿠킹?', req.cookies);
    if (req.cookies && req.cookies['egg-sns-token'])
      return res.status(200).json({
        message: 'success',
        user: {
          id: 1,
          userName: 'hwang',
          email: 'hwang@naver.com',
          phoneNumber: '000-0000-0000',
          fullName: 'hwang eunji',
          imageUrl: null,
          content: '안농하세영',
          secretMode: false,
        },
      });

    console.log('쿠키엄떠');
    return res.status(200).json({ message: 'empty-cookie-data' }); // 여기서에러
    // return res.status(400).json({ message: 'empty-cookie-data' }); // 다른 상태코드 보내면 안남 !
  } catch (error) {
    console.log('에러인가?');
    res.status(500).json({ message: 'server-error' });
  }
});

마무리 😇

근대 .. 나만 저 콘솔에러 내용이 어려운가? 직렬화가 뭐야.. 여기서 직렬화만 알았어도 쉽게 해결했을 것 같은데, 직렬화 저 Serializable 만 알았어도! 궁금할때 배워야 더 빨리 배운다. 검색해보자!

위키백과 직렬화 쉽게읽는 프로그래밍 : 직렬화(serialization)란? <- 아주 순한맛 추천 우아한형재-자바직력화 훓어보기 편 브런치 Effective Java - 직렬화(serialization)

직렬화

이해한 것을 정리해보면,

객체(또는 데이터)를 다른 외부 시스템에서 사용하려 할 때, 바이트(byte)형태로 변환하여 보내 사용(=== 직렬화), 사용처에서는 바이트형태의 데이터를 객체 또는 데이터로 복구(=== 역직렬화)시키는 사용한다.

• 직렬화 하는 형태는 바이트/문자열/이진 등
• 클라이언트와 백엔드간 통신에 JSON을 주고받는 것이 문자열 직렬화 방식!

😰 에러발생!

Syntax error 구문/문법 에러가 발생했다. 어딘가에 (, , ;, {},())을 빼먹었겠지? 라고 생각했는데 에러 설명이 장황하다❗️먼저 문제가 발생한 코드를 위치를 확인했다. 하필이면 redux-saga파일에서..? , 이제 막 써보려고 하는데 에러를 마주하니 갑자기 무쓰워 지고.. 나는 왜 점점 작아지는지..

문제발생 위치확인

error - ./store/account/saga.ts:83:1
Syntax error: 'import' and 'export' may only appear at the top level (83:0)

  81 | 
  82 | 
> 83 | export default function* accountSaga(): SagaIterator {
     | ^
  84 |   yield all([fork(watchRequestSignUp), fork(watchReqeustLogIn),fork(watchRequestUserData)]);
  85 | }
  86 | 

• saga.ts 파일에서 모듈내보낼 때 에러가 났다고 표시가 나지만, 해당 위치에는 문제는 없었다.

다시 원점으로.. 🎶🎵

알려주는 단서로는 잘모르겠구만! 🎶 구글검색 스따또 ~ 🎵

const foo = () => {
  return (
    'bar'
  );
}; <== this bracket was missing

export default foo;

또잉 ? 그저 괄호 빼먹었다구? 다시 한번 내 코드를 확인했다. 코드는 빨간줄 없이 깨끗하니. 린트가 안먹는건지 정말 문제가 없는건지? 긴가 민가 하다 깨달아버렸다잉!

이유!

• 최상단 함수에서 괄호하나를 빼먹음

• 중간 괄호가 빼먹었다면 밑줄이 쫙쫙 그어졌겠지만, 최고 밖 }를 빼먹었기에, 이하 함수들이 내부 함수가 되어버림
• 최하단 까지 도달하여 export default 키워드가 등장했는데, 닫침 괄호가 없어, export default가 함수 내부에 위치 함
• 때문에 'import' and 'export' may only appear at the top level'이라고 최고 밖에서 사용하라고 에러출력

// 문제의 코드
import 블라블라 from '블라블라';

function* A () {
  try {
    //...
  } catch (error) {
    //...
  }
// } <- 여기 닫는 중괄호 빼먹고 
// 당연히 이하 B,C.. 코드는  A 내부에 선언되고,
    function* B () {
      try {
        //...
      } catch (error) {
        //...
      }
    }  
    // .. 중략
    // 내부 함수인 accountSaga함수가 export default 될수 없다고 에러가 호출 
    export default function* accountSaga() {
      yield all([
        fork(A),
        fork(B),
        fork(C),
      ]);
    }

😑

결론은 처음 생각한 어딘가에 (, , ;, {},())을 빼먹었겠지?!

• 커링(curring), 커리 함수(curried function)
• 함수 내부에서 변수선언 없이 바로 함수를 리턴
• JS에서는 클로져의 원리로 구현되지만, 이런 패턴의 코드를 커링이라고 구분지어 부름
• 화살표함수가 값을 바로 리턴한다면 중괄호와 return 키워드를 생략하여 작성

  // () 와 {}, return 키워드를 사용한 curring 작성
  const curring = (arg1) => {
  return (arg2) => {
    return arg1 + arg2;
  }
  }
  // 생략할 것 다 생략한 curring 작성
  const curring = arg1 => arg2 => arg1+arg2;

🤔 그래서, 언제 쓰는거니?

함수가 인자를 여러번에 걸쳐 받아 실행해야 하는 상황!

왜 써?

함수의 재사용성을 높일수 있음 라이브러리와 같이 타인이 작성한 함수를 수정하지 않고 사용할 때 유용

• 커리함수가 처음 받는 인자 : 설정 or 옵션 등에 해당하는 값
• 나중에 받는 인자 : 적용대상, 값 등에 해당

배열메서드 커링으로 구현

map(),filter(),reduce(),sort(),reverse(),slice()를 커링으로 구현해보자!

• 원본 배열을 변경하지 않고 새로운 배열 리턴하도록 구현
• map(),filter(),reduce(),sort()는 CB 인자를 받도록
• reverse() : 인자 없음
• slice() : 2개의 숫자 값을 인자로 받음

const mapArray = (func) => (arr) => {
  return arr.map(func);
};

const filterArray = (func) => (arr) => {
  return arr.filter(func);
};

const reduceArray = (func, init) => (arr) => {
  return arr.reduce(func, init);
};

const sortArray = (func) => (arr) => {
  const newArr = [...arr];
  return newArr.sort(func);
};

const reverseArray = () => (arr) => {
  const newArr = [...arr];
  return newArr.reverse();
};

const sliceArray = (start, end) => (arr) => {
  return arr.slice(start, end);
};

const numberNames = mapArray((e, i) => {
  return `${i + 1}. ${e}`;
});

음.. 책에 수록된 내용을 따라해봤지만, 실제로 어떻게 활용되는지 감이 잘 안잡힌다 😱... 실무에 쓰는 날이 오길

클로져는 자바스크립트의 함수가 갖는 특징 중 하나의 함수 형태를 말한다. 자바스크립트에서 함수는 1급, number, string과 같이 값으로 취급하게 된다. 즉, 값이될 수 있는 함수는 함수의 인자로서 받거나 리턴할 수 있게 된다. 이것을 활용하여, 특정 함수로만 접근할수 있는 값을 만드는 것(함수 스코프 활용)이 클로져의 개념!

// 예제코드 1
const func1 = () => {
  const name = 'hwang';
  const closureFunc = () => {
    console.log(name);
  };
  return closureFunc;
};

const result = func1();
result(); // 'hwang'
console.log(name); // 스코프가 때문에 name에 접근 할 수 없음!
            ^
// ReferenceError: name is not defined

응용 1

예제코드 1에서 본것처럼 고정값을 반화하는 클로져는 거의 사용되지 않으며, 보통 첫번째 함수의 인자로 값을 전달하면 인자를 변형하는 값을 출력하는 방식으로 사용된다.

// 예제코드 2
const func2 = (name) => {
  const greeting = name +'님 안농~!'
  const printGreeting = ()=>{
    console.log(greeting)
  }
  return printGreeting
}
const result2 = func2('hwang')
result2() // 'hwang님 안농~!'

그래서, 🤔 클로져는 누구야 ?

최고 밖에 선언된 함수 ? 내부에 선언된 함수? 누가 클로져인데!? 3개의 함수가 등장하는데 결론적으로 클로져는 result2이다!

응용 2

클로저 함수를 통해 내부 값을 수정/로드 할 수 있게 작성 (get(),set()의 방식)

// 예제코드 3
const func3 = (name) => {
  const greeting = () => console.log(name + '님 반갑습니다앗!');
  const getValue = () => {
    return console.log(name);
  };
  const setValue = (newName) => {
    name = newName;
    return console.log(name);
  };
  return {
    print: greeting,
    get: getValue,
    set: setValue,
  };
};

const { print, get, set } = func3('hwang');
print(); // hwang님 반갑습니다앗!
get(); // hwang
set('미미'); // 미미

응용 3

set(value)의 입력검증과 기록처리하기

// 입력검증 & 기록처리 예제
const func4 = (name) => {
  // 기록할 배열 선언
  const historyArray = [];
  const history = () => {
    // 기록 출력용 메서드
    return historyArray;
  };
  const setName = (newName) => {
    // 매개변수 타입 검사
    if (typeof newName === 'string') {
      name = newName;
      // set메서드로 새로운 이름 작성될때마다 기록
      historyArray.push({ code: '이름변경', newName });
      return name;
    } else {
      return '문자열이 아님';
    }
  };
  const getName = () => {
    // get메서드로 새로운 이름 작성될때마다 기록
    historyArray.push({ code: '이름로드', name });
    return name;
  };
  const printGreeting = () => {
    return name + '님, 안녕!';
  };
  return {
    set: setName,
    get: getName,
    history,
    print: printGreeting,
  };
};

const result = func4('황');
console.log(result.get());
console.log(result.set('마마'));
console.log(result.set(88));
console.log(result.history());
// [
//   { code: '이름로드', name: '황' },
//   { code: '이름변경', newName: '마마' },
// ];

응용 4

• 잠금/잠금해제 기능 추가

• validateLocked() 작성하여 잠금상태 확인 코드 분리

  • 암호 추가/변경

• validatePw() 작성하여 비밀번호 확인 코드분리

const func5 = (initPw) =>{
  // 잠금상태와 비밀번호 변수 정의
  let isLock = true;
  let pw = initPw;

  // 비밀번호 확인 함수 작성
  const validatePw = inputPw => {
    if (!pw === inputPw) {
      console.log('암호틀림')
      return false
    }
    return true
  }
  // 잠금상태 확인 함수 작성
  const validateLocked = () => {
    if (isLock) {
      console.log('잠금상태');
      return false;
    }
    return true
  }
  // '잠금상태'로 설정
  const lock = () => {
   isLock = true;
  }
  // '잠금해제'로 설정
  const unlock = (curPw) => {
    if (!validatePw(curPw)) return false;
    isLock = false;
  }
  // 비밀번호 변경 메서드
  const password = (curPw, newPw) => {
    // 현재 비밀번호 맞는지 체크
    if (!validatePw(curPw)) return false;
    // 비번 맞을경우 newPw로 변경
    pw = newPw;
  } 
  const 그밖에_메서드 = () => {
    // 잠금상태확인하고 메서드 실행
    if (!validateLocked()) return false;
    return 반환 값;
  }
}

아래 나열된 7개의 메서드는 원본 배열을 변형시키는데, 이를 side effect(부수효과) 라고 한다. 이런 side effect를 갖는 함수(or 메서드)는 코드의 복잡도와 버그 발생확률을 높이는 원인 중 하나다. 그렇기 때문에 아래 메서드를 사용하기 보다 다음에 2. 변형 배열를 반환하는 메서드에서 소개하는 메서드를 사용을 우선시 하자~!

let arr = [1,2,3,4,5]

arr.push(0) // [1, 2, 3, 4, 5, 0] 변형된 배열의 length 리턴, 맨 뒤에 요소 추가
arr.pop() // [ 1, 2, 3, 4 ] 제거한 요소 리턴, 맨 뒤 요소 제거
arr.shift() // [ 2, 3, 4, 5 ]  제거한 요소 리턴 , 맨 앞 요소 제거 //
arr.unshift(9) // 6 ,[ 9, 1, 2, 3, 4, 5 ] 변형된 배열의 length 리턴, 맨앞에 요소 추가
arr.splice(0); // 변경된 배열 리턴 [ 1, 2, 3, 4, 5 ]
arr.splice(1);
arr.splice(4); // 잘라낸 값 리턴 [ 5 ], 결과는 남은 배열

let arr2 = [22,1,555,11,4,33]
arr2.sort() // 각 값을 문자열로 변형한뒤 사전순으로 정렬, 변형된 배열을 리턴 [ 1, 11, 22, 33, 4, 555 ]
arr2.reverse() // 변형된 배열을 리턴, [ 33, 4, 11, 555, 1, 22 ]

1) push() : 추가

• 리턴 : 변형된 배열의 length 리턴
• 결과 : 배열의 맨 마지막에 요소 추가

2) pop() : 제거

• 리턴 : 제거한 요소 리턴
• 결과 : 배열의 맨 마지막에 요소 제거

3) shift() : 제거

• 리턴 : 제거한 요소 리턴
• 결과 : 배열의 맨 앞 요소 제거

4) unshift() : 추가

• 리턴 : 변형된 배열의 length 리턴
• 결과 : 배열의 맨 앞 요소 추가

5) sort() : 정렬

sort() 메서드의 정렬방식 : mdn

값을 문자열로 변형한뒤 사전순으로 정렬한다. 인자로 compareFunction을 넘기면 해당 함수에 따라 정렬된다.

• 리턴 : 변형된 배열을 리턴
• 결과 : 정렬 적용

오름차순

const orderNum1 = arr => {
  arr.sort((left, right)=>{
  if (left < right) {
    return -1;
  }
  if (left > right) {
    return 1;
  }
  // a must be equal to b
  return 0;
})
}

내림차순

const orderNum1 = arr => {
  arr.sort((left, right)=>{
  if (left < right) {
    return 1;
  }
  if (left > right) {
    return -1;
  }
  // a must be equal to b
  return 0;
})
}

6) reverse() : 뒤집기

• 리턴 : 변형된 배열을 리턴
• 결과 : 정렬 적용

7) splice(start, range) : 잘라내기

잘라낼 배열의 인덱스를 인자로 지정

• 매개변수 갯수에 따른 결과
  • 1개 : 지정 인덱스부터 끝까지
  • 2개 : 시작 인덱스, 지정 길이
• 리턴 : 잘라낸 배열이 리턴
• 결과 : 나머지 배열이 리턴

2. 변형 배열를 반환하는 메서드

원본 배열을 변형하지 않고 새로운 배열을 반환하는 메서드를 배열접근 메서드라 부른다.

1) concat()

원본배열을 복제한뒤 인자로 받은 값을 배열 맨뒤에 추가하여 새로운 결과 리턴, 여러개의 인자를 받을 수 있다.

const originArr = [2,22]

// push() 대체하기
const newArr = originArr.concat(3,[4,44])
console.log({originArr, newArr})
// { originArr: [ 2, 22 ], newArr: [ 2, 22, 3, 4, 44 ] }

// unshift() 대체하기
const newArr2 = (['a']).concat(originArr);
console.log(newArr2) // [ 'a', 2, 22 ]

• 리턴 : 새로운 배열을 리턴
• 인자로 배열([4,44])이 입력되면, 배열에 속한 각각의 값이 1개의 인덱스(newArr: [ 2, 22, 3, 4, 44 ])로 합쳐진다!
• push(), unshift()를 대체할 수 있다

2) slice(start,end)

splice()와 매개변수의 사용이 다름.

• 1번 인자 : 시작 index
• 2번 인자 : 끝 지점, 포함되지 않는 index.
• start-index는 포함되며, end-index -1의 값까지 포함하여 잘라냄... 말보다 코드!

  const arr = ['a','b','c','d']
  const newArr1 = arr.slice(1)
  const newArr2 = arr.slice(1,2)
  const newArr3 = arr.slice(1,3)
  console.log({newArr1,newArr2,newArr3})
  // { 
  //   newArr1: [ 'b', 'c', 'd' ],
  //   newArr2: [ 'b' ],
  //   newArr3: [ 'b', 'c' ]
  // }

3) map(CB)

CB 에는 3개의 매개변수가 오는데 첫번째 매개변수는 배열순회 각 값, 두번째 매개변수는 해당 값의 index, 세번째 매개변수는 원본 배열이 위치함.

const arr = ['apple','banana','citron']
const newArr = arr.map((currentValue, currentIndex, originArray)=>{
  // 여기에 할 것 ~
  console.log(currentValue,currentIndex) 
  // 'apple', 0
  // 'banana', 1
  // 'citron', 2
  return currentValue.length > 5 ? currentValue : false
})

console.log(newArr) // [ false, 'banana', 'citron' ]

4) filter(CB)

CB는 map()메서드와 동일하다. 조건을 걸어 해당 조건이 참일때 값만 모은 배열을 리턴한다.

const arr = ['apple','banana','citron']
const newArr = arr.filter((currentValue, currentIndex)=>{
  // 여기에 할 것 ~
return currentValue.length > 5
})
console.log(newArr) // [ 'banana', 'citron' ]

5) reduce(CB,초기값)

reduce()의 CB는 map(), filter()와는 조금 다르다.

• 누산기 역할의 매개변수가 1번 인자로 위치
• 초기값에 배열순회하며 리턴되는 값을 누적하여 최종 리턴함

arr.reduce((acc,currentValue,currentIndex,originArray)=>{
  console.log('리듀스',{acc,currentValue,currentIndex,originArray})
},'')

// '리듀스' {
//   acc: '',
//   currentValue: 'a',
//   currentIndex: 0,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }
// '리듀스' {
//   acc: undefined,
//   currentValue: 'b',
//   currentIndex: 1,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }
// '리듀스' {
//   acc: undefined,
//   currentValue: 'c',
//   currentIndex: 2,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }
// '리듀스' {
//   acc: undefined,
//   currentValue: 'd',
//   currentIndex: 3,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }

리듀서 구현 예

reduce()를 사용하다보면 누산기 acc의 값을 직접적으로 변형하기도 하고, 객체 불변성을 유지하며 새로운 값을 리턴할수 도 있다. 객체 불변성을 유지하는 방식으로 작성하는 것이 side effect를 만들지 않고, 코드의 복잡도와 버그 발생확률을 낮칠수 있다.

const reducer = arr => arr
.reduce((acc, curr) => {
  const { key, value } = curr;

  // acc를 직접 변형하는 방식
  acc[key] = value;
  return acc

  // acc를 변형하지 않고 새로운 객체 리턴하는 방식
  return {
    ...acc,
    [key]: value,
  }
}, {});

5) 예외 :forEach()

forEach() 메서드는 원본 배열을 수정하지 않고 순회만 하며, 새로운 배열이 아닌 undefined 리턴한다. for문을 간편하게 쓰는 메서드!

• 리턴 : undefined
• 원본 배열 수정 : X

3. 메서드 체이닝(method chaining)

변형 배열를 반환하는 메서드는 메서드 체이닝을 할 수 있다~~

const arr = [1,10,100,200,300]
const result = arr
                .filter(data => data > 100)
                .map(data=>data.toString())
console.log(result) // [ '200', '300' ]

zsh 테마 깃헙 : 다양한 테마 둘러보세! 🤩

부트캠프를 다니면서 첫주에 했던것 중 하나가 터미널 꾸미기 였다. 그 당시엔 뭘 하는지도 모르고 따라하기 바뻤는데, 이제와서 보니 그냥 zsh을 다운로드하고 설정한거였구나..나만 몰랐나? 코딩을 배우기 전에는 기본 터미널이 너무 이뻐서 좋았는데 이제는 알록 달록 색으로 명령어와 git상태 표시등이 있다보니 기능적으로 좋아 기존 터미널 보다 선호하게 됐다. 그리고 .. 개발자같아 멋져!😎

터미널 zsh로 변경

mac 카탈레나 이후 터미널이 zsh이라는데 그런가요?

터미널이 bash로 설정되어 있다면 zsh로 변경해주자. homebrew를 통해 설치하자. (없다면 검색 고고)

1. 설치 전 홈브류 업데이트 진행 : brew update
2. zsh 설치 brew install zsh
3. zsh의 설치 경로 확인 which zsh
4. 기본 shell을 변경 chsh -s $(which zsh)

oh-my-zsh 설치

zsh 을 설치했으니 zsh 테마를 변경해야 겠죠. 테마변경을 위해 oh-my-zsh 설치안내에 방문, 설치 명령어를 복사 혹은 아래 명령어를 터미널에 입력! sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

나는 이미 설치해서.. 더이상 완료 메세지가 뜨지 않는데, 첫 설치라면 멋진 지셸메세지를 볼수 있다.

먼저 적용하고 싶은 테마를 둘러봤다. 기존 사용하던 테마는 'agnoster'였고, 이쁘지만 것두 매일보니 지겨브.. 이번엔 컬러바 없이 깔끔한 문자만 보이도록 설정하려 'cloud' 적용!

구름모양과 번개가 너무 귀엽!!!!!! 너모나 귀엽둥!!

.zshrc ?

.zshrc는 터미널을 열면 위치하게되는 루트경로에 숨김파일로 있다. 파일명 그대로 zsh의 설정파일이다. 에디터를 통해 열어보면 주석처리 잔득과 몇가지 활성화된 코드를 볼수 있다. 설정에 관한 코드고 설명이 잘되어 있어 읽어보고 원하는 부분 주석 on-off하여 설정해보자!

# 빔 으로 파일열기
vi .zshrc

# vscode로 파일열기
code .zshrc

ZSH_THEME

설정중 먼저봐야할 것은 지금이 포스팅을 작성하는 이유인 테마설정! .zshrc 상단에 바로 위치하기에 쉽게 찾을수 있고, zsh 테마를 통해 맘에드는 것을 찾고, 테마명만 입력해주면 된다. 너무 간단해서 포스팅하는 의미...😳

나는 cloud 를 적용! 귀염둥이 구름과 번개가 아주 기대된당!

헌대 이게 무슨일이야. 구름이 업더..저 작은..하늘색이 구름일까.. 어찌되었던, 이렇게 간단하게 맘에드는 테마를 등록할 수 있습니다.

랜덤테마 설정

이쯤되면, -"테마도 다양하니 먼저 써보고 맘에드는 테마에 정착하겠다."- 라는 생각을 하게 됩니다.(제가요..)

위 테마설정 변수에 테마명을 직접 입력하지 않고, random 을 설정하게 되면 터미널을 열때마다 테마가 변경됩니다. 아주 훌륭한 기능이죠 ?

적용테마 확인 $RANDOM_THEME

랜덤 설정을 했다면, 지금 적용된 테마가 뭔지 너무나 궁금하게 되겠죠! 이때는 적용테마를 확인하면 되는데, -그래서 그게 어떻게 하는건데?- 라는 생각을 또 하시겠죠?

• 터미널을 열고
• 랜덤 테마가 너무나 맘에들어 버렸네? '-어맛! 이 테마 뭐야 ? 당장 적용할랫!-'
• 터미널 상단에 [oh-my-zsh] Random theme 'Soliah' loaded 라고 친적히 적혀있다.

랜덤안내글 제거

만약, 나는 깔끔한 터미널이 좋다! 터미널 상단에 뜨는 [oh-my-zsh] Random theme 'Soliah' loaded 이가 싫다면 제거하자!

1. 에디터로 .oh-my-zsh/themes/random.zsh-theme 파일을 열어고 [oh-my-zsh].. 로 시작하는 동일 내을 찾아 해당 코드를 주석처리하자!

# 나는 vscode로 파일을 확인했다
$ code .oh-my-zsh/themes/random.zsh-theme

# ---------------------- random.zsh-theme 최하단  해당코드 주석처리 --------------
# ! 터미널 상단 테마 안내문구 출력
# echo "[oh-my-zsh] Random theme '${RANDOM_THEME}' loaded"

2. 이후 echo $RANDOM_THEME 명령어로 현재 설정된 렌덤테마를 확인한다!

터미널을 깔끔하게 표시하기

만약 나처럼 last login : ....일시 On ttys015 같은 안내문이 최상단에 배치된다면? 깔끔하지 못한 저모습 너무나 지우고 싶고 !!!!! 해서 지워보자 찾아보니 역시나 너무 간단하다. 지금까지 왜 저상태로 써왔는지 허허!🥱

1. 터미널 열고 루트에 위치하기
2. touch .hushlogin 파일 생성
3. 터미널 새로 열기 : 적용된 깔끔한 터미널 확인가능 !

행복하다..

단축키 등록

만약 매일 너무나 자주쓰는 긴 단축키가 있다면 .zshrc에 등록할 수 있다.

1. 에디터를 통해 .zshrc 파일 열기
2. 원하는 위치에 alias 명령어 = "길다란 명령어를 등록하자!" 와 같이 등록
3. 나는 최하단에 주석처리하여 단축키 등록할 곳을 표시했다.

# 여기부터 zsh단축키 등록
# 문법 : alias 단축키="원래 길다란 명령어를 작성"

alias proj="cd project/nodejs"

... 자주쓰는 단축키가 아직 없다. 하하하하하 있다면 등록하세요~

proj 만 입력했더니 지정한 경로로 이동했어요. 호호호

명령어 자동완성 플러그인 설정

깃헙 : zsh-autosuggestions

명령어가 자동완성되는 아주 편리한 플러그인을 설치하자. 훓어보니 oh-my-zsh을 사용중이라면 아래 방식을 따라야 하나보다 ?

1. 플러그인 파일 받기 git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

2. .zshrc 플러그인 설정 code .zshrc 명령으로 .zshrc의 내용중 위처럼 플러그인 내용을 찾고 zsh-autosuggestions을 추가합니다.

3. 터미널 종료후 다시 시작 또는 source ~/.zshrc 를 통해 바로 적용! 아래 사진과 같이 한단어만 작성해도 최근 명령어 or 연관 명령어가 보여진다 !

source 명령어는 스크립트 변경후 바로 적용할때 쓰임

사용자 이름 단순화 >

터미널에 랜덤 테마를 적용하고 나니, 테마마다 내 컴퓨터의 이름 표기법이 다르다. 누구는 없고, 누구는 아주 길게 표기되고.. 어떻게 설정 안될까나 ?

찾아보니 .zshrc 파일을 열고 최하단에 아래 내용을 추가하면 된다는데 나는 테마마다 지멋대로 여전하다!

# 사용자 이름 단순화 적용
prompt_context() { if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then prompt_segment black default "%(!.%{%F{yellow}%}.)$USER" fi }

해서... 테마 마다 다 설정해야 하는가? 일단 테마에서 유저이름이 긴 녀석들 나올때 해당 테마의 설정에 위의 코드를 추가했다.

• *문제의 테마가 나올때 : code .oh-my-zsh/themes/$RANDOM_THEME.zsh-theme 명령어로 테마설정파일 열기 *

# 문제의 테마설정 !!!...

ZSH_THEME_GIT_PROMPT_PREFIX=" %{$fg[green]%}"
ZSH_THEME_GIT_PROMPT_SUFFIX="%{$reset_color%}"
ZSH_THEME_GIT_PROMPT_DIRTY=" %{$fg[red]%}⚡" # 여기에 번개모양이 뜨는게 깃에 내용있을때?? 
ZSH_THEME_GIT_PROMPT_CLEAN=""

function prompt_char {
    if [ $UID -eq 0 ]; then echo "%{$fg[red]%}#%{$reset_color%}"; else echo $; fi
}

PROMPT='%(?,,%{$fg[red]%}FAIL: $?%{$reset_color%}
)%{$fg[magenta]%}%n%{$reset_color%}@%{$fg[yellow]%}%m%{$reset_color%}: %{$fg_bold[blue]%}%~%{$reset_color%}$(git_prompt_info) $(prompt_char) '

RPROMPT='%{$fg[green]%}[%*]%{$reset_color%}'

하하하하하하 녀석 무슨말인지 하나도 모르겠구다 ! 모를때는 저 변수명을 처보자! 열심히 찾은거 같은데? 랜덤설정할때는 추가설정이 안먹히는건가? 결국 cloud 테마의 설정파일에서 구름모양만 잘보이는 이모지로 바꾸고. 저장해서 cloud 테마를 적용했다.

여기까지 디깅한 결과..! 테마설정은 환경변수 설정으로 적용하는 듯 하다? 좀만 더 파면 테마 하나 만들겠구나 ^^

결국 나는.. cloud 테마 이모지만 잘 뜨도록 수정해서 쓰는중!

oh-my-zsh 업데이트

$ upgrade_oh_my_zsh
# 또는 
$ omz update

터미널에 upgrade_oh_my_zsh 입력! 햇더니 더이상 쓰지 않는 명령어라며 omz update명령어를 사용하라고 하네요! 아직까지 upgrade_oh_my_zsh명령어를 사용할 수 있지만, 앞으로는 omz update 사용 합시다!

next로 styled-components로 스타일 적용하고, 개발 서버를 띄워서 확인해보면 첫 페이지 로딩은 문제없이 잘 작동하고, 새로고침 이후 Warning : Props 'className' did not match. Server : "블라블라" Client: :"블라블라" 경고메세지가 출력되고, 화면 스타일이 사라져버린다! 첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다.

이때는 바벨 플러그인 babel-plugin-styled-components를 설치하고 바벨설정을 추가함으로 해결할 수 있다. 이 플러그인은 서버와 클라이언트의 클래스명을 일치 시켜줌으로 문제를 해결!

npm i babel-plugin-styled-components

.babelrc 설정

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

프로젝트 루트에 .babelrc 파일을 추가했고, 위와 같이 작성한다. nextjs에서 바벨 설정을 추가할때는 next/bable 프리셋을 항상 추가해야함을 잊지말자!

이후 서버를 다시 켜보면, 경고창은 사라지고, 스타일도 깨지지 않고 잘나온다! 굳굳

추가옵션

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "fileName": true, "displayName": true, "pure": true }
    ]
  ]
}

styled-components 바벨옵션 설명

바벨 플러그인 설정은 배열로 담아 [0]인덱스에는 플러그인명, [1]인덱스에는 옵션을 위치시킨다.

• fileName: 코드가 포함된 파일명을 알려줌
• displayName : 클래스명에 해당 스타일 정보 추가
• pure : 사용하지 않은 속성 제거

  *옵션적용 전/후 클래스명 비교 *

  • 전 : sc-17fsht8-0 cbfSeC
  • 후: Header__Container-sc-17fsht8-0 kZvURD
  • 개발모드는 자동 true 설정

@svgr/webpack 깃헙

npm i -D @svgr/webpack

• svg파일을 react or next프로젝트에서 사용하자! 먼저 npm에서 svg 로더를 받아야 한다.

설정

next에서 사용

next는 next.config.js를 프로젝트 루트에 작성하여 기존 설정을 수정할 수 있게 함

//  `next.config.js` 작성하기
module.exports = {
  webpack(config) {
    config.module.rules.push({ // 웹팩설정에 로더 추가함
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

react에서 사용

webpack.config.js

module.exports = {
  // ...생략
  module: {
    rules: [
      //... 로더 생략
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
 // ... 생략
};

svgr로더만 설정했을때는 .SVG 파일을 컴포넌트로 가져와서 사용할수 있게된다.

import Star from './star.svg' // 이미지를 불러오면 컴포넌트에 담김!

const App = () => (
  <div>
    <Star /> // 컴포넌트로 사용
  </div>
)

url-loader 와 함께쓰기

url로 설정하고싶다면 url-loader 추가 물론 url-loader 설치할 것! npm i -D url-loader file-loader 공식문서에는 file-loader도 설정하라고 되어 있는데, 🧐 같이 쓰니적용이 안되는 듯허이... url-loader만 적용 file-loader의 확장자 목록에 추가해봐도 적용 안됨

// webpack.confign.js

module.exports = {
  // ...생략
  module: {
    rules: [
      //... 로더 생략
      {
        test: /\.svg$/,
        use: ['@svgr/webpack','url-loader'], // file-loader는 적용안됨..
      },
    ],
  },
 // ... 생략
};

url/파일명.svg 사용하기

import starUrl, { ReactComponent as StarComponent } from './star.svg'

const App = () => (
  <div>
    <StarComponent /> // 기본 svgr-컴포넌트 방식  
    // url-loader & file-loader 동시 적용 후
    <img src={starUrl} alt="star" /> // img파일 불러와서 요소에 url적용
    <StarImage> // style속성에 url적용
  </div>
)
const StarImage = styled.div`
  background-image: url('/svg-file.svg');
`;

svgr-로더만 설정했을때

• style속성 url()경로 설정가능 : 정적파일제공 폴더인 public경로 이하만 작성 /파일명.svg
• 컴포넌트형으로 이미지 삽입가능

url-loader 설정후

• 태그 요소에 src속성에 url 입력가능

file-loader 는 설정 적용이 안되서 확인안됨

오늘은 글로벌 스타일 적용하고, 스타일 컴포넌트에 타입 적용하는 방법을 해보겠돠. 하루에 아조조~금씩🔨 야금야금🔨

styled-components 설치

npm i styled-component

타입스크립트 - 타입정의 받기

npm i -D @types/styled-components

코드 분리

styled-components를 사용할때 보통 테마/전역스타일 코드를 분리하여 사용한다. 추가로 내가 생성할 styled-components의 타입을 지정하기 위한 styled.d.ts 파일을 추가로 생성하자.

• 스타일-테마 모음 : src/styles/theme.ts
• 스타일-타입정의 모음 : src/styles/styled.d.ts
• 전역-스타일 모음 : src/styles/global-style.ts

styled.d.ts

styled-components 공식문서 : typescript 적용하기

styled-components의 타입정의를 불러와 내가 사용할 신규 타입정의 추가 & 확장함

// import original module declarations
import 'styled-components'

// and extend them!
declare module 'styled-components' {
  // 우리가 아는 타입지정을 여기서 다해주고 불러서 쓰기
  // 1. 인터페이스 지정
  export interface 인테페이스명지정 {
    속성1 : 타입지정;
  }
  // 2. 타입속성지정
  export type // 타입~~~지정지정해~

  // ThemeProvider theme에 적용할 타입으로, theme의 속성과 동일하게 작성
  export interface DefaultTheme {
    dark: {
      mainBackground: string;
      // neutral color
      title: string;
      primaryText: string;
      secondaryText: string;
      disable: string;
      border: string;
      divider: string;
      background: string;
      tableHeader: string;
    };
    light: {
      mainBackground: string;
      // neutral color
      title: string;
      primaryText: string;
      secondaryText: string;
      disable: string;
      border: string;
      divider: string;
      background: string;
      tableHeader: string;
      // point-color
      // point-color
    };
    response: {};
  }
}

defaultTheme 인터페이스는 node_modules/@types/styled-components/ts3.7/index.d.ts에 정의되어있다(빈객체 상태). 해당 인터페이스를 확장하는 개념이다!

createGlobalStyle 적용하기

• reset-css를 적용할 것인데 npm을 둘러보니 styled-components용 reset-css인 styled-reset이 있어 받아보았다.
• npm i styled-reset 으로 설치
• 적용방법은 2가지로 1) styled-reset이 제공하는 <Reset />컴포넌트를 불러 최상위에 위치시킴 2) styled-reset이 제공하는 css변수를 createGlobalStyled에 적용
• 나는 2번으로 적용할 예정, 나중에 추가로 전역 스타일 설정할때 추가해 줄수 있기 때문에~

  1) <Reset />으로 전역스타일 설정

  import { Reset } from 'styled-reset';
  

const App = () => ( <> {/* 여기에 리셋-컴포넌트 위치 */}

### 2) `createGlobalStyled`으로 전역스타일 설정
- 먼저 전역스타일 파일을 생성하여 코드를 분리 : `src/styles/global-style.ts`
- 파일 위치는 원하는 곳에 잘 정리해두기

```ts
// global-style.ts
import { createGlobalStyle } from 'styled-components';
import { reset } from 'styled-reset';

// 외부에서 import 할거니까 모듈 내보내자~!
export const GlobalStyle = createGlobalStyle`
  ${reset}
  /* 그밖에 글로벌 스타일 작성하기  */
`;

// 최상위 컴포넌트 : App.js 또는 index.js 등등 원한느 최상위에 코드 추가 
import {GlobalStyle} from '파일경로/global-style.ts'

const App = () => (
  <>
    <GlobalStyle /> {/* 여기에 글로벌-스타일-컴포넌트 위치 */}
    <div>여기는 최상위 컴포넌트</div>
  </>
);

공유스타일 작성 (theme)

// theme.js
import styled, { css } from 'styled-components';

export const theme:defaulTheme = {
  dark: {
    mainBackground: `#333`,
    // neutral color
    title: `rgba(255,255,255,0.85)`,
    primaryText: `rgba(255,255,255,0.65)`,
    secondaryText: `rgba(255,255,255,0.45)`,
    disable: `rgba(255,255,255,0.25)`,
    border: `rgba(255,255,255,0.15)`,
    divider: `rgba(255,255,255,0.06)`,
    background: `rgba(255,255,255,0.04)`,
    tableHeader: `rgba(255,255,255,0.02)`,
    // point-color
  },
  light: {
    mainBackground: `#fff`,
    // neutral color
    title: `rgba(0, 0, 0, 0.85)`,
    primaryText: `rgba(0, 0, 0, 0.75)`,
    secondaryText: `rgba(0, 0, 0, 0.45)`,
    disable: `rgba(0, 0, 0, 0.25)`,
    border: `rgba(0, 0, 0, 0.15)`,
    divider: `rgba(0, 0, 0, 0.06)`,
    background: `rgba(0, 0, 0, 0.04)`,
    tableHeader: `rgba(0, 0, 0, 0.02)`,
    // point-color
  },
  response: {},
};
  response: {},
};

// _app.tsx or App.jsx
// 최상위컴포넌트에서 ThemeProvider 사용하기
import { ThemeProvider } from 'styled-components';
import { theme } from './../src/styles/theme';

// ... 상단 생략
return (// 기본 라이트 모드 지정
  <ThemeProvider theme={theme.light}> 
      <Component />
  </ThemeProvider>
)

// Component.tsx or Component.js : 하위 컴포넌트 전체에서 

// 스타일드-컴포넌트 정의
const Container = styled.div`
  background-color: ${(props) => props.theme.mainBackground};
  color: ${(props) => props.theme.primaryText};
`;

// 컴포넌트 정의
const Component = () => {
  return (
    <Container>
      <h1>테마적용하기🎨</h1>
    </Container>
  );
};

• theme.dark 모드

• theme.light 모드

• 예제와 같이 theme객체에 같은 이름의 key를 갖는 mode객체를 만들어 ThemeProvider 컴포넌트에 props를 넘겨 전체 컴포넌트 모드변경할때 적용색상이 변경하도록 함!

• theme 객체를 작성할때 depth가 깊어지지 않도록 주의! 하위컴포넌트에서 theme속성 적용할 때 이름이 길어진다!

스타일 작성하기

참고 자료 : Styled Components & TypeScript - 😍

1) 단일 props 사용시

• styled-components를 작성할 때 여러개 props를 사용하여 컴포넌트를 정의한다면 인터페이스를 사용하여 분리하여 사용할 수 있다.
• 컴포넌트에 타입지정할때는 styled.div<인터페이스명> 와 같이 사용한다.

// styled-components에 1개 props 타입지정
// const Container = styled.div< {프롭스명 : 타입지정} >`
const Container = styled.div< { age : number } >`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;

2) 다수 props 사용시: interface 작성

• 인터페이스로 분리하여 타입지정하는 것 이외에 사용법은 동일!

// Container styled-components에 적용할 interfacer를 작성
interface Container extends 상속타입 {
  isActive: boolean;
  age: number;
  프롭스명: 타입지정;
}
// styled-components에 interface 타입 지정하기
const Container = styled.div<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

3) 상속 컴포넌트에 타입지정

interface 상속받기

// 상속컴포넌트의 타입 상속받기
interface Container {
  isActive: boolean;
  age: number;
  프롭스명: 타입지정;
}

// 상속받은 컴포넌트에 타입 추가하기
const Container = styled(상속받을 컴포넌트명)<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

단일 props 타입지정하기

// 기존 방식과 동일하게 사용
const Container = styled(상속받을 컴포넌트명)< { age : number } >`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;

// 위 방식에 문제가 있을경우 아래와 같이 사용.. 하나 복잡!
const Container = styled(({ age, ...parentProps }) => (
  <상속받을컴포명 {...parentProps} />
))<{
  age: number;
}>`
  color: ${(props) => (props.active ? 'red' : 'blue')};
`;

• 상속컴포넌트명을 콜백 함수(callback function)으로 전달
• 매개변수는 신규 타입:age과, 부모의 타입:parentProps을 전개연산자(...parentProps)로 지정
• 신규타입은 제네릭으로 기존과 동일하게 전달!

미디어 템플릿 적용

• 타입스크립트와 크게 관련없지만, 미디어쿼리 구성 참고~ (나중에 필요할 때 보기위한 기록)
• 보통 디바이스의 폭을 기준으로 나누어작업 (상황에 따라 높이도 적용)

const customMediaQuery = (maxWidth: number):string => {
  // 최대폭을 입력하면. 문자열을 밷는다!
  return `@media (max-width: ${maxWidth}px)`;
}
// 각 디바이스에 따라 최대폭 값을 변수화
const media = {
  custom: customMediaQuery,
  desktop: customMediaQuery(922),
  tablet: customMediaQuery(768),
  phone: customMediaQuery(576),
};

const Content = styled.div`
  height: 3em;
  width: 3em;
  background: papayawhip;

  ${media.desktop} { 
    background: dodgerblue;
  }
  ${media.tablet} {
    background: mediumseagreen;
  }
  ${media.phone} {
    background: palevioletred;
  }
`;

${media.desktop} { color: red;} === @media (max-width: 922px) {color:red}

정적 사이트 생성을 위해 next를 사용하기로 했고, CNA로 next 프로젝트 생성했다.

nextjs 공식문서 typescript 사용하기 nextjs+typescript 예제 깃헙

npx create-next-app --example with-typescript with-typescript-app 명령을 통해 타입스트립트가 적용된 next를 받는다.

기존 next 모습과 다른것은

• tsconfig.jon 파일 추가
• next-env.d.ts 파일 추가
• devDependencies : @types/node @types/react @types/react-dom typescript 추가
  • node_modules/@types/에 위치하게 된다. 각 패키지의 타입정의 파일이 있다!
• script :{ "type-check" : tsc } 타입스크립트 실행명령 추가
• 그 밖에 js, jsx 파일 ts, tsx로 변경

npm run dev : 개발 서버 실행해보자, 아래 사진과 같은 못난이 페이지가 뜨면.. 본격 시작 ㅋ

styled-components

npm i styled-components @types/styled-components

• 스타일드 컴포넌트, @타입스 설치

커스텀 _app.tsx

전체페이지 레이아웃과 스타일 적용을 위해 _app.tsx를 커스텀하자! nextjs 공식문서 타입스크립트 커스텀 app 참고

// import App from 'next/app';
import { AppProps /*, AppContext */ } from 'next/app'; // 타입 임포트
import Layout from '../components/Layout'; // 레이아웃 컴포넌트 가저오기

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps };
// };

export default MyApp;

• SSR을 한다면 주석 처리 된 타입 AppContext도 import하여 사용

동적라우팅

nextjs 동적라우팅

• pages 폴더에 post/[id]폴더에 /[id].tsx를 위치하는 식으로 동적라우팅 구현

  예

  • 파일경로 : /pages/post/create.tsx , URL : 도메인/post/create
  • 파일경로 : /pages/post/[pid].tsx , URL : 도메인/post/1,도메인/post/abc
  • 파일경로 : /pages/post/[categori]/[id].tsx , URL : 도메인/post/맛집/1
  • 파일경로 : /pages/post/[...slug].tsx , URL : 도메인/post/1/2,도메인/post/a/b/c

Data fetching

이전에는 getInitialProps()만으로 데이터를 가져왔는데, 몇 가지가 더 늘었다.

상황에 따라 맞는 api를 사용하자. nextjs 공식문서 : 데이터 가저오기 API설명에서 더 정확하게 알수 있다.

• 정적생성 : 사전 렌더링/정적페이지에 사용

• getStaticProps() : 빌드할 때 데이터를 가져옴
• getStaticPaths() : 데이터를 기반으로 사전 렌더링(pre-render) 할 동적 경로를 지정
• getStaticProps()와 getStaticPaths() 는 항상 짝으로 사용하자
  • SSR
• getServerSideProps() :

getStatcProps()

// 예제코드

import { GetStaticProps } from 'next'; // 타입스트립트 사용시 getStatcProps의 타입임포트

// 데이터 받을 컴포넌트 작성
const ContentList = ({ contentList }) => {
  // getStatcProps에서 패치받은 데이터 contentList가 props로 전달됨
  return (
    <ul>
      {contentList.map((content) => (
        <li>{content.title}</li>
      ))}
    </ul>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  // context의 구성내용
  const { params, preview, previewData } = context;

  // data fetch
  const res = await fetch('url');
  const contentLists = await res.json();
  return {
    // 리턴은 객체 props키에 담아 보낸다!
    props: {
      contentList,
    }, // will be passed to the page component as props
    // revalidate 옵션 사용시 1초에 한번 데이터 패치 발생한다! 계속 업뎃~
    revalidate:1, // In seconds
  };
};

export default ContentList;

• 서버-사이드-렌더링(SSR: server-side-render)에서만 사용되는 api, 즉, js번들에 포함하지 않음
• pages 폴더에서만 사용
• 페이지를 사전 렌더링(SEO 적용) & 캐시 될 수 있음
• 페이지의 데이터가 빌드시 구성됨, (사용자의 요청X)
• 예: 블로그 페이지가 컨텐츠 관리 시스템(CMS)에서 블로그 게시물 목록을 가져와야 할 때
• 타입스크립트 타입 : GetStaticProps을 사용하며

만약, 패치데이터의 타입을 유추하길 원한다면 InferGetStaticPropsType로 컴포넌트의 해당 props의 타입을 지정

import { InferGetStaticPropsType } from 'next';
  const ContentList = ({ contentList }: InferGetStaticPropsType<typeof getStaticProps>)=> {
    // will resolve posts to type Post[]
   }
> type Content = {
  author: string;
  content: string;
};
export const getStaticProps = async () => {
  const res = await fetch('https://.../posts');
  // contentList는 Content 타입으로 구성된 배열 타입 이라고 지정
  const contentList: Content[] = await res.json();
  return {
    props: {
      contentList,
    },
  };
   export default ContentList;

getStatcPaths()

nextjs 공식문서 : 정적 페이지의 데이터쓰기

• pages폴더에 동적라우팅이 구현되 있을때, getStatcProps를 쓴다면 렌더링할 경로목록을 정의

• getStatcPaths 에 지정된 경로를 정적으로 사전 렌더링 함

  import { GetStaticPaths } from 'next'
  export async function getStaticPaths() {
  return {
    paths: [
      // { params: { ... } }, // See the "paths" section below
      { params: { id: '1' } }, // pages/post/[id].tsx
      { params: { categori: '맛집',id :'1' } }, // pages/post/[categori]/[id].tsx
      { params: { slug: ['a','b','c'] } }, // pages/post/[...slug].tsx => /post/a/b/c
      { params: { slug: false }} // pages/[[...slug]] 폴더일때, 사이트 루트 페이지로 설정,  
    ],
    fallback: true or false // See the "fallback" section below
  };
  }

• pages 폴더에서만 사용

• getStaticProps와 함께사용하며, getServerSisdeProps와 함께 사용할 수 없음!

paths 키

• 위 예제 코드 & 동적라우팅 참고하기
• 키 paths : 필수 키, 미리 렌더링 되는 키를 결정
• 지정한 경로 이외 루트경로로 이동시키기 : catch-all-routes 검색

fallback 키

• 기본 false
• false 설정 시, 경로 지정 페이지만 사전-렌더링, 없는 경로 접근시 404페이지 렌더링
• true 설정 시,
  • fallback 페이지 렌더링하여 로딩페이지 렌더링
  • 다음, getStaticProps를 실행하여 필요데이터를 가저옴
  • 다음, 가져온 데이터를 미리렌더링 된 정적페이지 보여줌.. 서버에서만 실행된다며, 어떻게되지?...

// pages/posts/[id].js
import { useRouter } from 'next/router'

const Compo ({ data }) {
  const router = useRouter()

  // 만약 정적생성되지 않은 페이지가 있다면, getStaticProps()가 실행이 끝날때 까지 'Loading' 요소를 반환한다.
  if (router.isFallback) {
    return <div>Loading...</div>
  }
  return (
    // 여기에, 사전-렌더링-페이지 
  )
}

// 빌드시 동작
export async function getStaticPaths() {
  // 데이터 목록을 받아와 아래와 같이 경로를 추가 할수 있돰
  const response = await fetch(".../posts")
  const data = await response.json()

  const paths = data.map(({ id }) => ({ // [...slug] 형태는 reduce()를 활용하자
    params: { id: String(id) }, // 값은 모두 string 타입으로 넣어야 함
  }))
// paths = [
//   {params : {id:'1'} },
//   {params : {id:'2'} },
//   {params : {id:'3'} },
//   {params : {id:'4'} },
// ]
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`...url/${params.id}`)
  const data = await res.json()
// 데이터를 props로 전달 하며, 요청 시 1초에 한번 다시 패칭
  return {
    props: { data },
    revalidate: 1,
  }
}

export default Post

getServerSideProps()

• pages폴더에만 사용가능
• 서버사이드에서만 실행, getInitialProps()는 양쪽 다 실행되지만, getServerSideProps()는 무조건 서버에서만
• 페이지 렌더링 전 꼭 필요한 data-fetch!, 매 페이지 요청시마다 호출
• context객체는 params, req, res, query, preview, previewData 키를 포함. nextjs 공식문서 확인

  import { GetServerSideProps } from 'next' // 타입스 임포트
  

const Page= ({ data })=> { // Render data... }

// This gets called on every request export const getServerSideProps:GetServerSideProps = async()=> { // Fetch data from external API const res = await fetch(https://.../data) const data = await res.json()

// 객체형태로 전달 return { props: { data } } }

export default Page

- getServerSideProps로 부터 전달받은 props를 통해 데이터타입을 유추하려면 `InferGetServerSidePropsType<typeof getServerSideProps>`를 컴포넌트 Props의 타입으로 지정

### `useSWR` hooks
next팀에서 제공하는 hooks로 클라이언트 측에서 데이터를 가져오는 경우 사용하기 권장
[swr 공식문서](https://swr.vercel.app/)
[swr - data-fetching](https://swr.vercel.app/docs/data-fetching) : axios, fetch, graphQl 방식설명
[swr - nextjs : client-side-Data-fetching](https://swr.vercel.app/docs/with-nextjs#client-side-data-fetching)

`const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)`

```js
import useSWR from 'swr'

const Profile =()=>{
  const {data, error} = useSWR('api-url',fetch)

  if (error) return <div>에러다~</div>
  if (!data) return <div>loading</div>
  return <div>{data}</div>
}

정적 파일 제공

next의 정적 파일 폴더는 public으로 설정되어 있다.

• 원본 이미지 경로 : public/image.png
• 정적파일 사용하기 : /image.png만 입력, public을 생략하고 작성하면 원하는 이미지가 엑세스 됨

타입스크립트 types

정적 생성 및 서버측렌더링 api

import { GetStaticProps, GetStaticPaths, GetServerSideProps} from 'next'

• getStaticProps() : types name =GetStaticProps
• getStaticPaths() :types name = GetStaticPaths
• getServerSideProps() : types name = GetServerSideProps

라우팅 api

import { NextApiRequest, NextApiResponse } from 'next'
type Data = {
  name: string
}

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

커스텀 _App

상단 설명참고

만약, 하나의 컴퓨터에서 깃헙 계정 2개를 나누어 사용하고 싶다면? ssh-key 설정한 뒤, remote 주소를 ssh방식을 사용

참고 한 & 더 잘 설명된 포스팅들~

• Tonic's lesson learned
• 갓대희의 작은공간
• 마이구미의 Helloworld

시작에 앞서

• 갑자기 깃헙 계정을 새로 만들고 싶어짐, 그리하여 야심차게 계정 하나 추가요😎
• New계정의 레포를 사용하려니 기존 계정과 겹치면서 퍼미션-둥-둥!😨
• 글로벌 ~/.gitcongig 과 로컬 프로젝트루트/.git/config에 설정된 계정 정보를 바꿔도 안됨! 멘-붕😱
  • 글로벌 < 로컬 설정 우선시 한다하여.. 수정했지마눙 안됨😂
• 그리하여 ssh를 찾아보게 되었고, 핳 새로운 영역..😃

SSH(시큐어 셸, Secure Shell)

네트워크로 다른 컴퓨터에 로그인/원격시스템에 명령을 실행, 파일복사를 할 수있게 하는 응용프로그램 또는 프로토콜 SSH는 암호화 기법을 사용하기 때문에, 통신이 노출된다고 하더라도 이해할 수 없는 암호화된 문자로 보인다. 위키 : SSH 참조

진행 순서

1. ssh-key 파일 생성
2. ssh-key 등록
3. ssh config 파일 작성
4. github 사이트 계정 설정
5. ssh 연결테스트
6. 프로젝트의 git remote 설정

1) ssh-key 생성

cd ~/.ssh

• 터미널을 열고 루트에서 ssh 숨김폴더로 이동, 없으면 생성(mkdir ~/.ssh)

ssh-keygen -t <암호화방식> -b <key크기 기본3072> -C '깃헙등록메일@메일.com' ssh-keygen -t rsa -b 4096 -C 'my-mail@email.com' : 실제 작성

• 위 와 같은 구조의 명령으로 key파일 생성
• 2개 계정을 사용할 것이기에 2번 진행
• -t 암호화 방식 지정 : rsa 지정
• -b key의 byte-size 설정 : 지정 안하면 3072 기본값으로 설정 (최대 4096)
• -C github에 등록한 email 작성 : my-mail@email.com
• 명령 입력뒤 파일명/비밀번호 설정에 대한 input 등장하니 아래내용 참고하여 설정

Enter file in which to save the key (/Users/hwang/.ssh/id_rsa): <id_rsa_이름지정>

• 터미널에 Enter 머시기 내용이 등장하면 파일명 지정 : id_rsa_work와 id_rsa_study으로 설정(각자 자유롭게~)
• Enter를 누르고 넘긴다면 기본값 id_rsa로 설정됨

Enter passphrase (empty for no passphrase): <엔터누르고 다음>

• 암호(비밀번호) 설정할꺼야? 입력안하면 암호 설정 안할께!

Enter same passphrase again: <엔터누르고 다음>

• 위 암호와 동일하게 입력하여 진행

~    $ cd ~/.ssh
.ssh $ ssh-keygen -t rsa -C 'my-mail@mail.com'
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/hwang/.ssh/id_rsa): <id_rsa_이름지정>
Enter passphrase (empty for no passphrase): <엔터누르고 다음>
Enter same passphrase again: <엔터누르고 다음>
... <뭔가 진행 함>
+---[RSA 3072]----+
|             ..oB|
|             . .o|
... <이런박스 나옴됨>
|          .  .+%#|
|           . e&E/|
|            .=+%%|
+----[SHA256]-----+

2개의 key를 생성하고 파일 목록을 확인해보자. 아래와 같이 총 4개 파일이 생성되었다면 완료

• id_rsa_study : 기존계정-비공개-ssh
• id_rsa_study.pub : 기존계정-공개-ssh
• id_rsa_work : New계정-비공개-ssh
• id_rsa_work.pub : New계정-공계-ssh

.pub 확장자가 붙은 파일만 공개하며, 이 파일 내용을 github계정 SSH설정에 등록하게 된다. github 계정 설정은 마지막에 살펴보자.

2) ssh-key 등록

생성한 key를 등록해보자!

eval "$(ssh-agent -s)"

• 생성한 키를 ssh-agent에 등록(.. ssh-agent를 실행시키고.. 이후에 ssh-add로 등록을........ 정확히 모.름. 😇 )
• Tonic's lesson learned 포스팅 중 ssh-agent에 대한 설명을 읽어보니,
  • ssh-agent 에 등록하지 않고 ssh등록과 사용을 할 수 있지만, github에 연결 할때 비번입력하지 않고 쓰기위해서 설정한다함. 즉, 로그인 매번 하기 싫으면 ssh-agent 등록을 하세요!

ssh-add <key파일경로>

• 명령을 통해 key 등록을 한다.

ssh-add -l : 등록된 key 목록을 확인

$ ssh-add ~/.ssh/id_rsa_study
Identity added: id_rsa_study (등록한메일1@gmail.com)

$ ssh-add ~/.ssh/id_rsa_work
Identity added: id_rsa_work (등록한메일2@gmail.com)

3) .ssh/config 생성

SSH 설정파일을 작성해야 한다. 숨김폴더에 들어가 생성해도 or 터미널에서 작성 or 에디터를 사용해 작성하도록 한다. 나는 터미널 + vim을 사용하도록 하겠다.

touch ~/.ssh/config

• .ssh폴더에 config파일 생성

vi ~/.ssh/config

• vim 에디터로 config 파일을 열고 아래와 같이 작성한다.

  #  깃헙계정 work
  #  -------------------
  Host github.com-work
  HostName github.com
  IdentityFile ~/.ssh/id_rsa_work
  User eungeegee 
  

깃헙계정 study

-------------------

Host github.com-study HostName github.com IdentityFile ~/.ssh/id_rsa_study User zu-hwang

- `Host : github.com-<이름지정>` : 하이픈(`-`)다음에는 원하는 이름을 지정, 앞으로 계속 써야하기 때문에 짧은 문자 추천
- `HostName` : github.com
- `IdentityFile : ~/.ssh/ssh파일경로작성` : 각각의 ssh-key파일 경로를 작성
- `User` : 나의 깃헙 계정지정~

## 4) github SSH 설정
위 과정까지 모두 마쳤다면, github에 로그인 하여 설정페이지를 찾자.

- github.com > 로그인 > 오른쪽 상단 프로필사진 클릭 > settings > SSH and GPG keys > New SSH key 
   - title : 아무거나 내가 보기 좋은 것으로 지정
   - key : 각 계정에 맞는 ssh-key `_.pub` 파일의 내용을 기입한다. **꼭 확장지 `.pub` 가 붙은 파일의 내용!**
      - 편하게 하기 : 터미널에서 `pbcopy > 파일경로`를 통해 파일 내용을 클립보드에 복사해 붙여넣기
- 2개의 계정 모두 ssh-key를 등록

## 5) SSH 연결테스트
SSH 설정에서 등록한 Host 값을 사용하여 연결테스트를 하자.

`ssh -T git@github.com-지정값`

`ssh -T git@github.com-work`

 - `github.com-work` Host 값 작성
    - 출력 : `Hi eungeegee! You've successfully ....` 
 - `github.com-study` Host 값 작성
    - 출력 : `Hi zu-hwang! You've successfully ....` 

## 6) 프로젝트 git remote 설정

### 신규 프로젝트 설정
이전까지 git 레포에 연결할때 `https://github....` https 주소로 remote 했다면,
이제 그 옆에있는 `use SSH` 누르고 `git@github.com:userid/reponame.git` 방식을 사용
![](https://images.velog.io/images/hwang-eunji/post/cba3ecb9-005a-4062-a3e5-c6de1025dd43/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-07-27%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%202.28.30.png)![](https://images.velog.io/images/hwang-eunji/post/72aa3078-781c-4eed-89cb-288c042fb271/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-07-27%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%202.30.27.png)

`git remote add origin git@github.com-지정이름:깃헙계정/레포지토리명.git`
- **여기서 중요**! 그냥 SSH-key 복사하기후 사용한다면 오류가 남, 우리는 계정이 2개이기 때문에 어떤 계정을 쓸지 지정해주는것이 **뽀-인트**! `github.com-지정이름`에 주의하자, 나는 지정이름을 `work`로 등록했기에 아래와 같이 입력하였다.

`git remote add origin git@github.com-work:eungeegee/my-repo.git`


### 기존 프로젝트 설정

위와 동일한 내용으로, 기족 프로젝트는 이미 설정되어 있는 주소를 변경하는 명령을 하면 된다.
`git remote set-url origin git@github.com-지정이름:깃헙계정/레포지토리명.git`으로 설정하도록 한다!



## 마치며

이게 뭐라고..
굳이 계정 만들어야 했냐며, 하루 반나절 내내 찾아보고, 까먹는다고 내용 정리하고..
...

하지만! 
두개 설정되니 너무 만족,
얼마나 잘 쓸지는 모르겠지만 모쪼록.. 저와 같은 분들 화이팅!

기본 설치

homebrew 공식 문서 방문하여 명령어 확인 & 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

패키지 검색

brew search [패키지명]

• nodejs 패키지 검색 : brew search node

패키지 설치

brew install [패키지명]

• nodejs 패키지 설치 : brew install node

패키지 관리 & 업그레이드

패키지 관리

• brew outdated : 버전업 된 패키지 확인
• brew list : 설치된 패키지 목록보기
• brew info [패키지명] : 지정 패키지의 정보를 본다
• brew uninstall [패키지명] : 지정 패키지 삭제

홈브류 업데이트

brew update : 홈브루 자체 버전 업데이트. 앞으로 설치되는 버전에 영향을 줌. 이미 설치된 패키지는 기존 버전을 유지함

패키지 업그레이드

brew upgrade : 설치된 모든 패키지 업그레이드 brew upgrade [패키지명] : 지정 패키지 만 업그레이드

패키지 최신버전 만 유지

brew cleanup : 최신버전 이외의 패키지 모두 삭제

패키지 업데이트는 최신버전을 추가 설치함/기존 버전 따로 존재&유지

그밖에

• brew doctor : 홈브루 오류 확인& 수정?

플로그인을 제작하기 위해선 AST 구조를 알아야 한다.

AST Explorer 에서 AST가 뭔지 알아보자.

에디터에 const myNamy= hwang + 'eunji';를 입력했을때 AST Explorer에 출력된 json의 모습이다.

• type : 각 노드의 타입을 나타낸다
  • Program : 루트의 타입
  • VariableDeclaration : 변수 타입
  • FunctionDeclaration : 함수 타입
  • Identifier : 개발자가 만든 값(변수, 함수 등)
  • BinaryExpression : 사칙연산
  • Literal : 문자열
  • 등...
• declarations : 선언부, 변수명, 초기값 등이 위치

👻

보기는 했으나 이걸 어떻게 활용하는지..하핳

babel plugin의 기본구조

module.exports = function ({ types: t }) {
  const node = t.BinaryExpression('+', t.Identifier('a'), t.Indentifier('b'));
  console.log('isBinaryEspression:', t.inBinaryExpression(node));
  return {};
};

• a+b를 하는 코드 작성
• types를 매겨변수로 하는 함수를 내보냄
• types 매개변수를 이용해 AST 노드를 생성할 수 있다.
• inBinaryExpression()을 통해 타입검사를 진행했다.
• return 값이 없기때문에 아무일도 일어나지 않는다.

반환 값 넣기

module.exports = function ({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        console.log('Identifier name:', path.node.name);
      },
      BinaryExpression(path) {
        console.log('BinaryExpression operator: ', path.node.operator);
      },
    },
  };
};

• visitor 객체 내부에서 노트의 타입명으로 함수를 작성한다.(예 :Identifier())
• 변수가 작성되면 Identifier()-개발자가 만든 값(변수, 함수 등)- 함수가 호출되며, 변수가 쓰인 만큼 호출
• path.node.name 변수명을 나타내며, const myName= hwang + 'eunji에서 myName, hwang에 해당
• 연산자를 작성하면 BinaryExpression()함수가 실행
• path.node.operator는 const myName= hwang + 'eunji에서+연산자에 해당
• const myName= hwang + 'eunji' 가 입력됬을 때
  • Identifier() 는 2번 호출
  • BinaryExpression() 1번 호출

콘솔로그 제거 plugin

콘솔로그를 제거하는 플러그인을 제작 하기 위해서는 먼저 콘솔로그의 AST를 이해해야 한다.

AST Explorer 사이트에 방문하여 console.log()의 AST를 확인하자

// console.log('hi') 의 JSON 데이터
// 필요없는 옵션 제거함 : start, end)
{
  "type": "Program",
  "body": [
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          },
          "computed": false
        },
        "arguments": [
          {
            "type": "Literal",
            "value": "hi",
            "raw": "'hi'"
          }]}}
  ],
  "sourceType": "module"
}

콘솔로그의 AST

- [root]:[type]: Program // 최상위
  - [body]
    - [첫 요소 : `console.log('hi)'`]
      - [type] : ExpressionStatement // 1
      - [expression] : CallExpression // 2
        - [callee]
          - [type] : MemberExpression // 3
          - [object] // 객체 타입과 이름
            - [type] : Identifier  // 4
            - [name] : console
          - [property] // 메서드 or 속성이 위치
            - [type] : Identifier
            - [name] : log
         - [args]
           - [1st args : `('hi')`] // 첫번째 인자에 대한 객체
             - [type] : Literal // 5
             - [value] : 'hi'// 입력값이 표시됨
             - [raw] : 'hi'

콘솔로그의 Types

1. ExpressionStatement : 콘솔로그의 최상위 노드
2. CallExpression : 함수 또는 메서드를 호출하는 코드의 type
3. MemberExpression : 메서드 호출 시 type
4. Identifier : 변수명과 같이 선언되기에 Identifier type
5. Literal : 문자열이 주어졌음으로 literal type

콘솔로그 제거 플로그인 코드작성

module.exports = function ({ types: t }) {
  return {
    visitor: {
      ExpressionStatement(path) {
        // ExpressionStatement type을 갖을때 호출
        if (t.isCallExpression(path.node.expression)) {
          if (t.isMemberExpression(path.node.expression.callee)) {
            // 노드체이닝이 넘 길어서 변수에 넣고 다시 체이닝
            const calleeNode = path.node.expression.callee;
            if (
              calleeNode.object.name === 'console' &&
              calleeNode.property.name === 'log'
            ) {
              path.remove(); // 조건에 맞으면 코드 최상위 제거! === console.log() 제거하게됨
}}}},},};};

• ExpressionStatement(path) 콘솔로그 최상위 Types를 함수화 하여 작성, 매개변수를 지정해 노드에 접근하도록 한다.
• isCallExpression(node) : is타입명(노드)을 통해 인자로 지정한 node가 해당 type을 인지 확인!
• isMemberEspression(node) : 맞찬가지로 인자로 넣은 노드가 해당 type인지 확인
• 최하위 노드까지 접근했을때 console 객체에 log 메서드가 쓰였다면 해당 요소의 최상위 노드 제거

👻

여기까지 실습하면서 AST 구조 들여다 보다보니 조금, 아주 쪼오오오오오오금 이해가 된다.

직접 만든 플러그인 사용하기

직접 만들 플러그인을 사용하기 위해서는 바벨 설정이 필요하다. 전역 설정파일(babel.confil.js)을 만들고 다음 코드를 작성하자.

// babel.config.js

// plugins 변수에 [플러그인1, 플러그인2, ... 그리고 내가만든 플러그인]
// 여러게 플러그인을 배열로 담기
const plugins = ['./plugins/consolelog-remover.js']
module.exports = { plugins }

콘솔로그가 있는 코드를 작성하고 바벨을 사용해 컴파일하여 보자~~아!

// sample-consolelog-remove.js

console.log('콘솔로그를 지워볼깨');
const text = 'run console.log() remove-plugin';
console.log(text);

npx babel 경로/파일명.js 명령 실행 후 콘솔출력

const text = 'run console.log() remove-plugin';

책보고 따라한 실습이지만, 감격....멋지당!!! 분명 잘 작성했는데 에러가나거나 한다면. 노드 체이닝에 문제가 없는지 다시한번 확인하자. 나는 if (t.isMemberExpression(path.node.expression.callee)){} 에서 인자로 넣은 노드에서 expression을 빼먹어서 한참을 다시 봤다! 노드를 잘 보기!

콘솔로그 추가 plugin

콘솔로그 제거를 해봤으니 콘솔로그 추가하는 플러그인을 작성해보자.

규칙 : 'on'으로 시작하는 함수에 콘솔로그를 추가

먼저 AST Explorer 사이트에 방문하여 onFunctionName() 로직을 작성해 노드를 확인해보자.

// AST 구조 확인하기 : JSON
// 너무 길어서 필요없는 옵션은 제거
{
  "type": "Program",
  "body": [
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "onFunc"
      },
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "VariableDeclaration", // const 변수 노드
            "kind": "const"
          },
          {
            "type": "ExpressionStatement",  // console.log 노드
            "expression": {
              "type": "CallExpression",
              "callee": {
                "type": "MemberExpression",
                "object": {
                  "type": "Identifier",
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "name": "log"
           // .. 이하 닫기
          {
            "type": "ReturnStatement", // return 노드
          } 
            // .. 이하 닫기

콘솔로그 플러그인 추가 작성

module.exports = function ({ types: t }) {
  return {
    visitor: {
      FunctionDeclaration(path) {
        if (path.node.id.name.substr(0, 2) === 'on') {
          path
            .get('body')
            .unshiftContainer(
              'body',
              t.expressionStatement(
                t.callExpression(
                  t.memberExpression(
                    t.identifier('console'),
                    t.identifier('log')
                  ),
                  [t.stringLiteral(`call ${path.node.id.name}`)]
                )));}},},};};

실행결과

바벨적용 전

function onFunc1() {
  return '일반함수 타입: FunctionDeclaration';
}

const onFunc3 = function () {
  return '익명함수 변수지정: VariableDeclaration';
};

const onFunc4 = () => {
  return '화살표함수 타입: VariableDeclaration';
};

바벨 적용 후

function onFunc1() {
  console.log("call onFunc1");
  return '일반함수 타입: FunctionDeclaration';
}

const onFunc3 = function () {
  return '익명함수 변수지정: VariableDeclaration';
};

const onFunc4 = function () {
  return '화살표함수 타입: VariableDeclaration';
};

AST Explorer에서 확인해보면 알겠지만, 함수 선언 방식마다 타입종류가 다르다 변수형으로 function 함수명 방식 이외의 함수 선언방식은 변수선언 타입 VariableDeclaration 로 적용된다.

• 일반 함수 선언방식 : function 함수명(){} FunctionDevlaration type
• 화살표함수, 익명함수 : ()=>{}, function(){} VariableDeclaration type

참고자료

실전 리액트 프로그래밍/이재승 저 자바스크립트 개발자를 위한 AST(번역) 바벨-핸드북 깃헙 : 한국어버전 있음 바벨-핸드북 깃헙 : 플러그인 만들기 : 한국어버전 있음

babel 공식문서 @babe/polyfill babel 공식문서 @babe/preset-env core-js github 문서 실전 리액트 프로그래밍/이재승 저 browserslist 패키지 문법

폴리필(polyfill)

자바스크립트의 최신기술을 구버전 브라우저에서 사용하기 위해서는 변화과 함께 폴리필도 사용해야 한다. 폴리필은 런타임 기능 주입을 말한다. 런타임 기능 주입이 뭐야? 한다면, 브라우저에서 코드가 실행될 때 기능이 있는지 없는지 확인한 뒤 없을 경우에만 코드 변환을 하는 기능을 말한다.

Q. 바벨을 쓰면 최신 문법 전부 적용 되는거 아니였나요? A. 네, 아니에요. 바벨 써도 폴리필 설정 해줘야 해요

// 폴리필 코드 예
// ES8의 String.padStart()가 있는지 확인하고 없으면 폴리필 함수를 대입하게 된다.
if(!String.prototype.padStart) {
  String.prototype.padStart = 폴리필 함수 대입;
}

@babel/polyfill

@babel/polyfill 는 바벨 공식 폴리필 지원 패키지다. 모든 폴리필을 포함시키기고 있기 때문에 별다른 설정없이 패키지를 import 하여 사용한다. 단순한 사용법이 가장 큰 장점이라면, 파일이 크기가 크다는 것이 단점이다.

파일 크기에 너그러운 프로젝트에 추천, 가장 쉽게 폴리필을 적용할 수 있는 방법!

import '@babel/polyfill'
// 이하 코드 작성하기

@babel/polyfill with Webpack

// @babel/polyfill을 사용하기 위한 설정

module.exports = {
  entry: ['@babel/polyfill', './src/index.js'],
  // 이하 설정 생략
};

• entry에 폴리필 패키지를 추가시켰다.

core-js의 polyfill

core-js란? - 심재철님 블로그

@babel/polyfill 도 내부적으로는 core-js패키지를 사용한다. 즉, @babel/polyfill를 사용하지 않고 core-js 패키지로 부터 필요한 폴리필만 가져와 사용하면 파일 크기를 줄일 수 있다. 파일 크기에 민감한 프로젝트에 추천

@babel/preset-env

실행 환경에 대한 정보를 설정해주면 자동으로 필요한 기능을 주입해준다. 적당한 번들 파일 크기 유지하면서 폴리필 빼먹는 실수를 막기위해 @babel/preset-env 사용이 가정 합리적인 선택이 될 수 있다

babel.config.js에 실행환경 정보작성

// babel.config.js 

const presets = [['@babel/preset-env', { targets: '>0.25%, not dead' }]];
// ... 설정 등등등

module.exports = { presets };

• targets 속성으로 지원하는 브라우저 정보를 입력한다. (시장점유율 0.25퍼센트 이상, 업데이트가 죽지 않은 브라우저)
• targets에 사용된 속성은 browserslist 패키지 문법을 확인하고 사용하자.

// @babel/preset-env 프리셋으로 폴리필 설정하는 방식

const presets = [['@babel/preset-env', { targets: '>0.25%, not dead' }]];
const presets = [
  [
    '@babel/preset-env',
    {
      targets: {
        chrome: '40',
        ie :'버전',
        // ... 브라우저 정보
      },
      useBuiltIns: 'entry', // 폴리필 관련 설정 : 지원하는 브라우저에 필요한 폴리필만 포함
    },
  ],
];

module.exports = { presets };

• targets : 크롬 40버전 이상을 설정
• useBuiltIns : 폴리필 관련 설정
  • entry 옵션 : 지원 브라우저에 필요한 폴리필만 골라가져온다(core-js폴리필 중 브라우저에 없는 기능 모두)
  • usage 옵션 : entry옵션시 폴리필에서 내가 작성한코드에 필요한 폴리필 만 골라서 (폴리필이 최적화 된다)

• extends : 다른 설정파일을 가저와 확장하여 사용가능(상속)
• env : 환경설정
• overrides : 파일별 다른설정 적용

실습을 위해 아래 패키지 설치 npm i @babel/core @babel/cli @babel/preset-react @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals babel-preset-minify

• @babel/core : 필수 바벨 설정
• @babel/cli : 바벨 실행
• @babel/preset-react : 리액트 프리셋
• @babel/plugin-transform-arrow-functions : 화살표 함수 플러그인
• @babel/plugin-transform-template-literals : 템플릿 문자열 플러그인
• babel-preset-minify : 프로덕션 모드일때 코드 압축 적용

extends 속성

공용 .babelrc 작성

프로젝트 루트에 /common/.babelrc 파일을 작성하여 모든 설정파일에서 상속받을 파일을 작성한다.

{
  "presets": ["@babel/preset-react"],
  "plugins": [["@babel/plugin-transform-template-literals", { "loose": true }]]
}

• 공통으로 적용될 presets, plugins 작성
• plugins에 옵션을 적용할경우 [[플러그인1,{설정:값}],[플러그인2,{설정:값}]] 와 같이 작성
• loose 옵션은 템플릿 문자열을 변환할때 .concat()을 사용하는 대신 + 연산자를 사용한다.

공용 .babelrc 상속받기

{
  "extends": "../../common/.babelrc", // 상속받을 바벨설정파일 지정
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

• extends 속성으로 상속받을 파일을 지정
• 필요한 plugins 추가
• 중복의 경우 현재 파일로 덮어쓰기. 즉, plugin-transform-template-literals의 loose 옵션은 제거된다.

env 속성

env 속성은 환경별 다른 설정을 할수 있게 돕는다.

바벨의 현재환경 적용 우선순위

babel의 현재환경은 process.env.BABEL_ENV || process.env.NODE_ENV || 'development' 로 적용된다.

• 즉, 'development' > process.env.NODE_ENV > process.env.BABEL_ENV 순으로 적용

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-arrow-functions"
  ],
  "env": {
    "production": { "presets": ["babel-preset-minify"] }
  }
}

이제 환경변수에 따른 설정적용이 잘 되는지 보자!

• 개발모드 : npx babel ./src/example-env/code.js
• 프로덕션 모드 : NODE_ENV=production npx babel ./src/example-env/code.js

  파일생성을 하려면 --out-file src/example-env/dist-모드명.js 옵션을 추가 하도록

overrides 속성

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-template-literals",
  ],
  "overrides": [
    {
      "includ": "./inc", 
      "exclude": "./inc/exc.js",
      "plugins": ["@babel/plugin-transform-arrow-functions"]
    }
  ]
}

overrides 속성의 모습을 보자. include/exclude 파일 지정한 것이 보인다. 옵션명으로 알수 있듯 포함/제외 항목이다. include 항목은 모두 포함시키며, exclude 항목은 제외시킨뒤 overrides 속성의 plugins, presets등 옵션등을 적용하게 된다. exclude된 항목은 상위 적용값에 영향을 받게 된다.

• include(포함) : 지정된 폴더, 파일을 overrides속성 적용 템플릿 문자열 + 화살표 함수 변환
• exclude(제외) : 지정된 폴더, 파일은 상위 속성에 영향을 받음 템플릿 문자열 만 변환

babel 공식 문서 - @babel/core

@babel/core로 실행 & 설정

앞서 살펴본 @babel/cli, babel-loader는 @babel/core를 통해 실행된다. 다른 파일을 통하지 않고 직접 @babel/core를 통해 실행하는 방법을 알아보자.

실행파일 작성

프로젝트 루트에 바벨 실행파일을 작성해보자. 이전까지는 콘솔을 통해 babel명령어를 작성하여 실행했지만, 이제 runBabel.js을 작성하고 바벨을 실행하게 된다.

코드예졔 : 실전 리액트 프로그래밍/이재승 저

const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8');
const presets = ['@babel/preset-react'];
const plugins = [
  '@babel/plugin-transform-arrow-functions',
  '@babel/plugin-transform-template-literals',
];

const { code } = babel.transformSync(source, {
  filename,
  presets,
  plugins,
  configFile: false,
});

console.log(code);

• @babel/core 불러오기
• file-system(fs) 불러오기 : /src.core.js를 불러오기 위해 사용
• presets, plugins : 사용한 플로그인/프리셋 배열에 담아 작성
• @babel/core의 transformSync() 메서드를 통해 코드 변환
• 변환파일은 저장하지 않고 콘솔에 출력

위 코드예제를 보고 느끼는 점은 이전 webpack/babel-loader나 @babel/cli 설정과 딱히 다르지 않고 더 복잡한 느낌적 느낌이 드는데 왜 이 방식을 쓸까 라는 것. 하지만 코드가 복잡해지고 여러 설정에 따라 바벨적용을 달리해야 한다면 여러번 바벨 컴파일 하지 않고, @babel/core를 통해 직접 작성한 코드가 훨씬 간결하고, 1회 실행으로 결과물이 나온다고한다. (나는 아직 경험해 보지 못해.. 중요성은 모르겠다)

@babel/core의 컴파일 단계

• 파싱(parse) : 입력된 코드 부터 AST(abstract sytax tree)를 생성
• 변환(transform): AST를 원하는 형태로 변환
• 생성(generate): AST를 코드로 출력

추상 구문 트리 : AST(abstract syntax tree) 위키참조 추상 구문 트리는 컴파일러에 널리 사용되는 자료 구조인데, 이는 프로그램 코드의 구조를 표현하는 프로퍼티이기 때문이다. AST는 일반적으로 컴파일러의 구문 분석 단계의 결과물이다. 컴파일러가 요구하는 여러 단계를 통해 프로그램의 중간 표현의 역할을 하며 컴파일러의 최종 결과물에 대해 강력한 영향을 준다.

• AST = 코드가 분석된 결과를 담는 트리 구조체

AST 활용 효율적 babel 실행법

// AST 활용하여 효율적인 바벨실행파일을 작성해보자

const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8');
const presets = ['@babel/preset-react'];

// 코드 생성하지 않고 AST만 생성 : 동일한 옵션 적용
const { ast } = babel.transformSync(source, {
  filename,
  presets,
  configFile,
  ast: true,
  code: false,
});

// ast 설정과 + code.js + 개별설정 에 따라 컴파일된 code1 반환 : 화살표 함수 적용
const { code: code1 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ['@babel/plugin-transform-arrow-functions'],
  configFile: false,
});

// ast 설정과 + code.js + 개별설정 에 따라 컴파일된 code2 반환 : 템플릿 문자열적용
const { code: code2 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ['@babel/plugin-transform-template-literals'],
  configFile: false,
});

console.log(code1);
console.log(code2);

webpack 공식 문서

webpack package install

webapck babel-loder를 사용하기 위해서 먼저 관련 패키지를 설치하자.

npm i webpack webpack-cli babel-loader

• webpack
• webpack-cli
• babel-loader

설정파일

babel.config.js와 같이 webpack도 설정파일을 만들어보자. webpack.config.js로 프로젝트 루트에 저장!

// webpack.config.js 웹팩 설정파일을 작성하자. 리액트를 하면서 여기저기서 자주 봤던 모습

const path = require('path'); // path 모듈 임포트

module.exports = {
  mode: 'development',
  entry: './src/code.js', // 웹팩 적용할 시작점 파일
  output: {
    // 웹팩 적용후 output 경로와 파일명
    path: path.resolve(__dirname, 'dist'),
    filename: 'code.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
  // 웹팩의 압축기능을 잠시 꺼두기 위한 옵션
  optimization: { minimizer: [] },
};

스크립트 작성

  "scripts": {
    "webpack": "npx webpack",
  }

yarn webpack 또는 npm run webpack을 통해 스크립트를 실행시켜보자. webpack이 프로젝트 루트에서 webpack.config.js있는지 먼저 확인 후, 있다면 설정파일을 읽어 실행하게 된다.

설정파일

@babel/cli에 대부분의 설정 담겨있지만, 실행환경에 따라 설정이 다른 경우에는 설정파일을 따로 만들어 관리하는 것이 좋다. 설정파일은 프로젝트 루트에 위치한다.

• .bebelrc : 지역 설정파일(local config), 바벨6 이전 버전까지 추천 설정파일 형태
• babel.config.js : 전체 설정파일(global config), 바벨7 이후 추천 설정파일 형태
• .babelrc,package.json babel 설정 > bebel.config.js : 지역 설정파일의 우선순위가 높다.

설정 값

presets & plugins

/*
 * npx babel src/code.js
 * --presets=@babel/preset-react
 * --plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-arrow-functions",
 * 
 * const 옵션명 = [설치파일명, 설치파일명...];
 *
 */


// --presets=프리셋1,프리셋2 동일
const presets = ['@babel/preset-react']; 

// --plugins=플러그인1,플러그인2  동일
const plugins = [ 
  '@babel/plugin-transform-arrow-functions',
  '@babel/plugin-transform-template-literals',
];

module.exports = { presets, plugins }; 

설정파일을 만들어 주었으니 package.json의 스크립트에서 프리셋&플러그인 관련 명령어를 제거하여준다.

"scripts": {
    "babel": "npx babel src/code.js",
}

output

지금까지 진행한 방식으로는 바벨을 통해 컴파일하여 콘솔에 출력할 수 있으나 새로운 파일로 저장하지는 못하는 상태다. 만약 새 파일에 컴파일 내용을 작성하고 싶다면 스크립트에 --out-file,--out-dir 옵션을 사용하자.

 "scripts": {
    "babel": "npx babel src/code.js --out-file dist/dist.js", // 루트 dist폴더에 dist.js로 저장
    "save-codejs" :"npx babel src --out-dir dist", // 루트 dist폴더에 cods.js로 저장
 }

--out-file, --out-dir 를 같이 사용하면 콘솔에 --out-file and --out-dir cannot be used together에러를 출력한다. 이는 기능이 겹침으로 같이 사용할 필요가 없기 때문인데,

• --out-file : 파일만 생성할 수도 있고, 폴더경로/파일명 과같이 경로설정도 가능. 즉 --out-dir 기능이 포함되어 있다,
• --out-dir : 폴더생성