git add, commit

10 Jul 2023 | git

코딩애플 강의를 보며 정리함

git을 사용해보자

git을 사용해 코드를 기록하려면 터미널에 다음과 같이 차례로 입력하면된다.

git init
git add 파일명
git commit -m ‘메시지’

이렇게하면 코드를 ‘기록’ 할 수 있는데, 보통은 버전생성이라고 부르는 경우가 더 많다고 한다.

staging area, repository

여기부터 조금 복잡함 (저는 그렇게 느꼈습니다.)

버전을 만들 땐 git add, git commit를 차례로 하면 된다.
이걸 그림으로 그리면 이런식 이라고하는데..

가운데 부분을 staging area,
파일 버전이 저장되는 곳을 repository(저장소)라고 한다.

staging area

staging area는 commit을 하기 전에 commit할 파일들을 골라놓는 곳이다.
staging area에 파일을 넣는 행위를 staging이라고 한다.
git add 명령어로 staging 할 수 있다.

repository

repository는 commit된 파일의 버전들을 모아놓는 곳이다.
repository의 실체를 보고싶다면, 작업폴더안의 숨겨져있는 .git폴더를 열어보면된다.

명령어

git add 파일명1 파일명2

이렇게 여러 파일을 동시에 스테이징 할 수 있다.

git add .

작업폴더의 모든 파일을 전부 스테이징하고 싶으면 git add . 명령어를 치면된다.

git status

방금 변경된 파일, 스테이징된 파일들을 알려준다.
지금 뭐하는지 까먹을 때도 자주 입력한다고 한다.

git restore --staged 파일명

스테이징된 파일을 취소하고 싶을때 입력하는 명령어.
파일명 대신에 점을 찍으면 모두 취소

git commit -m '메세지'

메세지 부분에 코드에 무슨기능을 추가했는지 적으면 된다.

git log --all --oneline
git log --all --oneline --graph

커밋된 기록을 한 눈에 파악하고 싶으면 git log명령어를 입력하면된다.
–graph 옵션을 넣으면 그래프로 알려준다.

보통 얼마나 commit하는게 좋을까?

습관적으로 할 필요는 없고,간단한 기능을 하나 추가할때 마다 commit 하면된다고 한다.

EX) 회원가입 기능을 만들었다.

회원가입 폼 레이아웃 만들면 커밋.
입력한 이메일이 맞는지 검증하는 기능을 만들면, 커밋.
서버에 전송하는 기능을 만들면 커밋.

등등.. 이렇게 작은 작업 마쳤으면 commit하는게 좋다고한다.
위에 나열한 3개 다 만들고 commit하는 사람도있고, 본인 마음이다.

Comment Read more

전역 스코프에 선언된 변수는..!

22 Jun 2023 | memo

질문

이 코드를 다른 파일에서 export나 import 없이 api.fetchCats 이런식으로 불러올 수 있는 이유가 뭔가요? Ex) api.js

const API_ENDPOINT = 'http://localhost:4001';
// const API_ENDPOINT =
//   'https://rhdd0roxs5.execute-api.ap-northeast-2.amazonaws.com/dev';

const api = {
  fetchCats: (keyword) => {
    return fetch(`${API_ENDPOINT}/api/cats/search?q=${keyword}`).then((res) =>
      res.json()
    );
  },

  fetchRandomCats: () => {
    return fetch(`${API_ENDPOINT}/api/cats/random50`).then((res) => res.json());
  },

  fetchCatDetail: (id) => {
    return fetch(`${API_ENDPOINT}/api/cats/${id}`).then((res) => res.json());
  },
};

답변

프로그래머스 [멘토] Anne의 답변..

전역 스코프에 선언된 변수는 다른 자바스크립트 파일에서도 접근할 수 있다.

<script> 태그로 로딩되는 순서에 따라서 파일 사이에 전역 스코프의 접근이 가능해 지는데, api.js를 정의한 <script> 태그가 App.js를 정의한 <script> 태그보다 먼저 로딩이되므로 App.js에서 api.js에서 정의한 api 변수를 사용할 수 있다.

다만, 전역 스코프에 변수를 선언하게 되면 자바스크립트 파일간에 영향을 미칠 수 있는 가능성이 있기 때문에 신중하게 다뤄야 한다.

부끄

예전에 자바스크립트를 배우면서 다뤘던 기억이난다.

Comment Read more

localStorage 저장

22 Jun 2023 | memo

getHistory() {
    return localStorage.getItem('keywordHistory') === null
      ? []
      : localStorage.getItem('keywordHistory').split(','); // 로컬호스트가  이런구조의 배열로바뀜 Ex)['','','','']
  }

  addKeyWord(keyword) {
    // 최근 키워드 저장
    let keywordHistory = this.getHistory();

    keywordHistory.unshift(keyword); // 배열의 맨앞부터 저장
    keywordHistory = keywordHistory.slice(0, 5); // 최대 5개키워드까지만 저장되고 뒤에서부터 짤림 배열상태임
    localStorage.setItem('keywordHistory', keywordHistory.join(',')); // 로컬호스트에 저장 EX) '','',''  스트링상태로

    // 저장한 데이터 다시 불러오기
    // 이거 없으면 새로고침해야 데이터 불러와짐ㅋ
    this.init();
  }

Comment Read more

keyup 이벤트 한글입력 문제

22 Jun 2023 | memo

keyup 이벤트는 한글입력할때 두번 입력처리가 된다.

아래와 같이 코드를짜고, 한글을 입력하고 엔터를 누르게되면..

$searchInput.addEventListener('keyup', (e) => {
  console.log(e.key);
  if (e.keyCode === 13) {
    onSearch(e.target.value);
  }
});

Enter가 두번씩 콘솔에 찍힌다.
전체적인 결과에는 문제가 없지만 api요청을 하는 코드였을 경우, 메모리 문제 및 두번씩 api요청하게되서 전체적인 성능 퍼포먼스에 영향을 끼치게된다. 그래서 다음과 같이 코드를 바꾸자.

$searchInput.addEventListener('keypress', (e) => {
  if (e.keyCode === 13) {
    onSearch(e.target.value);
  }
});

Comment Read more

localStorage,cookies

20 May 2023 | memo

로컬스토리지와 쿠키 정리 및 nextjs에서 다크모드 사용사항

1

localStorage

문자나 숫자 데이터 저장 가능
object,array도 JSON으로 변환하면 저장가능하다.
사이트마다 5MB의 저장공간이 있다.
유저가 브라우저 청소를 하지 않는 이상 반영구적으로 데이터를 저장 가능하다.

Ex)

localStorage.setItem('자료이름', '값');
localStorage.getItem('자료이름');
localStorage.removeItem('자료이름');

nextjs에서 로컬스토리지 사용

'use client'

function 컴포넌트(){

  useEffect(()=>{
      if (typeof window != 'undefined') {
        let res = localStorage.setItem('이름', 'kim')
      }
  },[])

  return (...)
}

js문법이기 때문에 client component에서만 사용 가능하다.
typeof window != 'undefined'로 체크하고 사용해줘야 한다.
클라이언트 컴포넌트도 최대한 서버에서 미리 실행할거 실행해주고, html 렌더링해서 보내주려고하는데, 서버측에서 로컬스토리지 문법을 발견하면 실행이 안되고,에러가 나서 방지차원에서 코드를 적어주는것이다.

근데 useEffect는 html을 보여준 다음에 실행된다.
위에 코드처럼 짜게되면, 로컬스토리지에 ‘다크’모드를 저장해놧어도 라이트모드부터 보여주고 1초 후에 다크모드가 되는데, 이러면 깜빡이는 UI가 만들어진다. 그래서 다음 #2의 cookie 방법이있다.

2

nextjs에서 쿠키는 'use client'컴포넌트 안에서만 사용가능하다.

사이트 하나 당 최대50개, 총합 4kb까지의 문자데이터를 저장 할 수 있다.
유효기간을 설정해줄 수 있고, 유효기간이 지나면 자동으로 삭제된다.
서버로 GET,POST 등 요청시 자동으로 서버로 전달된다.

Ex) 사용법: ‘쿠키이름=값’을 적어주면 저장된다.

document.cookie = 'cookieName=value';

Ex)세미콜론후 쿠키킈 유효기간을 초 단위로 설정가능. 이렇게 설정하면 24시간 후 쿠키 삭제됨

document.cookie = 'cookieName=value; max-age=3600';

크롬에서는 쿠키 유효기간으로 최대 400일까지만 넣을 수 있다.
유효기간 안넣으면 브라우저 종료시 쿠키는 자동으로 삭제된다.
값들 사이에 ;기호로 구분함

import { cookies } from 'next/headers';

export default function 서버컴포넌트() {
  let result = cookies().get('쿠키이름');
  console.log(result);
}

쿠키의 가장 유용한 점은 server component나 서버 api에서 쉽게 읽을 수 있다는것이다.
쿠키는 GET,POST 등 요청시마다 서버로 전달되기 때문인데 이러한 점 때문에 브라우저에 저장한 데이터를 DB데이터 처럼 html 렌더링 전에 바로 읽고 싶다면 cookie로 보관해주면 좋다.

하지만 단점도있다.
Cookie의 단점은

단순 문자열만 저장가능하다. 너무 길고 복잡한 데이터는 보관하기 불편하다.
항상 GET,POST 요청마다 전달되니 쓸데없는 네트워크 호스팅 비용이 늘어난다.

하지만 지금처럼 다크모드 구현할때는 문자 몇개 전달하는 수준이라 그런 부담감은 딱히 신경쓸 필요 없다고한다.

Comment Read more

Older Newer

정중식의 개발공부로그

git add, commit

git을 사용해보자

staging area, repository

staging area

repository

명령어

보통 얼마나 commit하는게 좋을까?

전역 스코프에 선언된 변수는..!

질문

답변

부끄

localStorage 저장

keyup 이벤트 한글입력 문제

keyup 이벤트는 한글입력할때 두번 입력처리가 된다.

localStorage,cookies

1

localStorage

nextjs에서 로컬스토리지 사용

2

Cookie