하지만 이 모든 기능의 중심에는 queryKey가 있다는 사실, 알고 계셨나요?
이번 글에서는 queryKey가 왜 중요한지, 그리고 실무에서 어떻게 효과적으로 관리하면 좋을지 이야기해보려고 해요.

queryKey가 중요한 이유

React Query는 내부적으로 queryKey를 기준으로 데이터를 구분해요.

• 키가 같으면 같은 데이터를 보고,
• 키가 다르면 완전히 새로운 데이터로 인식합니다.

즉, queryKey는 캐싱, 무효화, refetch의 기준이 됩니다.
그래서 신중하게 설계하는 게 정말 중요해요.

어떤 queryKey가 좋은 key일까?

1. 명확하고 고유하게

어떤 데이터를 가져오는지 한눈에 알 수 있어야 해요.

['todos', userId]
['users', userId]

키만 봐도 "아, 이건 userId로 특정한 todos나 users 데이터를 가져오는구나"라고 알 수 있죠.

2. 객체의 순서를 항상 고정하기

React Query는 내부적으로 JSON.stringify를 이용해서 키를 비교하는데요,
객체 안의 속성 순서가 다르면 다른 키로 인식돼요.

['posts', { authorId: 5, page: 1 }] // ✅ OK
['posts', { page: 1, authorId: 5 }] // ❌ 완전히 다른 키로 처리됨

따라서 queryKey에 객체를 넣을 때는 속성 순서를 일관되게 유지해야 합니다.

3. 계층 구조는 배열로 표현하기

복잡한 데이터는 배열로 표현하는 게 좋아요.
예를 들어, 유저의 게시글을 가져오는 경우에는 다음처럼요:

['users', userId, 'posts']

중첩된 관계를 명확하게 보여줄 수 있어서 나중에 invalidate나 refetch할 때도 유용합니다.

queryKey 팩토리 함수로 관리하기

쿼리가 많아지면 키를 실수하기도 쉽고, 일관성도 깨질 수 있어요.
그래서 저는 보통 queryKey를 함수로 만들어서 관리합니다.

// queryKeys.ts
export const queryKeys = {
  all: ['todos'],
  lists: () => [...queryKeys.all, 'list'],
  list: (filters) => [...queryKeys.lists(), { filters }],
  details: () => [...queryKeys.all, 'detail'],
  detail: (id) => [...queryKeys.details(), id],
};

이런 식으로 팩토리 함수를 만들어두면,

• 오타를 줄일 수 있고
• 자동완성도 되고
• invalidate할 때도 간편해요

invalidateQueries는 정확하게 써주기

예를 들어 어떤 필터로 리스트를 가져오고 있었다면, 해당 필터에 맞는 리스트만 invalidate하는 게 좋겠죠?

queryClient.invalidateQueries(queryKeys.list({ filter: 'active' }));

괜히 ['todos']처럼 뭉뚱그려 invalidate하면 캐시가 다 날아가버릴 수 있어요.
불필요한 리패치 방지를 위해서라도 정확한 queryKey를 사용하는 게 중요합니다.

조건부 쿼리에는 null과 enabled를 같이 쓰자

userId가 있을 때만 유저 정보를 가져오고 싶다면? 아래처럼 처리할 수 있어요.

const queryKey = userId ? ['user', userId] : null;

useQuery({
  queryKey,
  queryFn: fetchUser,
  enabled: !!queryKey,
});

이렇게 하면 userId가 없을 땐 쿼리를 아예 실행하지 않아서,
불필요한 요청이나 ['user', undefined] 같은 애매한 캐시 키도 방지할 수 있습니다.

정리

queryKey 잘 쓰는 법, 요약하면 이렇게 정리할 수 있어요 👇

• 명확하고 구체적인 key를 만든다
• 객체를 쓸 땐 속성 순서를 항상 고정한다
• 계층 구조는 배열로 표현한다
• 반복되는 key는 팩토리 함수로 관리한다
• 조건부 쿼리는 null과 enabled를 활용한다

참고 링크

• 원문: Effective React Query Keys by TkDodo

부트캠프 2차 팀프로젝트로 팀원 6명이 한 팀으로 구성되어 신발 경매 사이트인 KREAM를 클론 코딩 하였다. 이번 2차 프로젝트는 팀원들이 각자 구현해보고 싶은 기능이 명확하여 이에 중점을 두고 진행을 하였다.

KREAM 웹페이지 클론 프로젝트 회고

이번 2차 프로젝트에서는 감사하게도 PM역할을 맡게 되어 팀원들과의 적극적인 소통을 리드하였다. 중간에 blocker로는 백과의 대화시 서로 이해가 어려운 점이였는데, 서로 이해할려고 노력을 하다보니 2주차부터는 원할하게 소통이 되었다.

KREAM 웹페이지 선정이유

• 모던한 디자인
• 2차 프로젝트로서의 적합한 기능
  • 판매&구매 입찰 시스템
  • 필터링 & 소트
  • 페이지 네이션
  • 회원가입 및 로그인/로그아웃

웹페이지 Ideation

• 기존 경매 시스템을 활용할 수 있도록 포스터를 경매하는 사이트로 전환
• GREAM+으로 네이밍 / '그림'단어에서 영감, 실제 영어 단어 '몽환적으로 빛나는..'

작업기간

2021.7.5 - 2021.7.16

기술스택

Front-End : React, Styled Component, Fuctional Component Back-End : Python, Django web framework, PyJWT, MySQL, s3transfer Common : KAKAO social login, AWS(EC2, RDS, S3), RESTful API

Project Tool

• Trello
• Notion
• POSTMAN

주요 구현 사항 _ 내가 맡은 구현사항 = 🎨

Shop 레이아웃🎨 Shop 필터링(중복 필터링)🎨 Shop Sort (가격, 판매순)🎨 Shop Pagination🎨 Detail 체결 거래 그래프 Detail 카러셀 Detail 최근 거래가 Login/Logout 인증/인가 Login/Logout 소셜 로그인(카카오) 입찰페이지 주문

Project Flow

1주차

1주차에는 trello를 사용하여 구현할 기능들에 대해 카트를 세분화 하고 역할을 분담하였다. 1차 프로젝트 때와는 달리 팀원별로 각자 구현하고 싶은 기능을 선택하였고 추가 기능구현보다 제대로 하나를 구현하는 것에 집중하였다.

2주차

2주차 부터는 1주차에 짜여진 틀을 바탕으로 front/Back간의 연결에 집중을 하였다. 서로 주고받는 데이터의 종류와 양이 많아졌다 보니 서로의 대화가 중요했었다. 이를 위해 별도의notion페이지를 생성하여 각각 담당 파트 front/back간의 자료구조에 대해 조율하였다. 또한 POSTMAN을 적극 활용하여 미리 백앤들와 데이터 구조를 맞춰 서버를 통신해 볼때의 오류를 최소화하였다.

OUTPUT👍

front-end repository back-end repository 전체 기능 구현 영상 -Youtube

Detail

1. 중복 필터링, Pagination

1주차 중복 필터링

• 중복 선택을 위한 데이터 컨트롤
• Mock data 연동 및 백앤드 통신 test

2주차 Pagination

• 들어오는 data의 양에 따라 자동으로 페이지 넘버 증가 및 감소
• 1페이지가 아닌 페이지에서 필터링 선택시 필터링된 카드 수가 1페이지 양을 넘지 않으면 자동으로 1페이지로
  • 초기에 3페이지에서 필터링 선택시 자료수가 1페이지를 넘지 않아 1페지에 자료가 있는데, 사용자는 3페이지에 남는 문제 발생(페이지 버튼도 1페이지만 나와서 1페이지로 이동도 불가능
  • solution / 필터링 체크박스 클릭시 1페이지로 이동하는 함수 추가

    tmi 중복필터링을 처음 구현할때 체크박스를 선택했을때 그 해당 박스가 어느 카테고리의 몇번째인지를 알려주는 과정이 blocker였다. 자료들을 back end에서 어떤 형태로 주든 잘 받아먹는게 실력이라는 것을 다시한번 느꼈다.

2. 중복 필터링, Sort

2주차 Sort

• 중복필터를 만들고 나니 비교적 수월하게 Sort기능을 구현했다.

  tmi 비교적 빠르게 제작하였지만, 쿼리문을 만드는 함수가 너무 많아 리팩토링의 필요성이 느껴졌다.

Project Review

2차 프로젝트를 하며 내가 구현해보고 싶었던 기능들을 구현하여 뜻깊었다. 또한 blocker에 봉착해도 코드카타를 푼다는 마음가짐으로 하나씩 헤쳐나가니 결국에는 만들어낼 수 있었다.

PM역할을 하며 처음에는 부담감도 있었지만 팀원들과의 적극적인 소통을 통해 유쾌한 분위기에서 이번 프로젝트를 마무리할 수 있었다. 2주동안 함께한 팀원들에게 너무 감사하게 생각한다.

남은 기업협업에서도 이런 분위기를 유지해 나가야겠다.

To-do List / refactoring

• query문 함수 리팩토링 Urlsearchparams 사용

• filter사용한 부분 find로 다시 만들어보기

리액트를 사용할수록 자주 발생하는 에러가 Lifecycle 관련이다. 부모 컴포넌트와 자식 컴포넌트의 Lifecycle에 대해 알아보고 관련된 에러를 해결하는 방법을 정리해보고자 한다.

LifeCycle 기본 순서

1. constructor
2. render
3. componentDidMount
4. (fetch 완료)
5. (setState)
6. render
7. componentDidUpdate (5번에서 setState 되었기 때문에 컴포넌트 업데이트 발생)
8. componentWillUnmount

Sibiling Lifecycle 순서

1. 부모 constructor
2. 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
3. 자식 constructor
4. 자식 render
5. 자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
6. 부모 componentDidMount
7. 부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
8. 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
9. 자식 render
10. 자식 componentDidUpdate
    • (componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생. 여기까지 하고 다시 부모로 넘어감.)
11. 부모 componentDidUpdate
    • (componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)

지금까지 git merge 명령어를 사용했지만 2차 프로젝트부터는 git rebase로 대체할 것이다.

Rebase

• 머지커밋이 남지 않고 linear한 이력관리가 가능해진다 = 불필요한 커밋을 하나로 squash (정상적인 경우 PR / 브랜치 당 커밋이 하나여야 한다)

명령어

• git rebase -i main : 명령어를 통해 중간 중간 브랜치에 쌓인 커밋을 하나로 정리

• 해당 브랜치의 base commit을 확인하는 방법 : git merge-base main feature/sign-in (필수 아님)

커밋 합치기

1. 작업브랜치에서 git rebase -i master
2. pick => squash로 커밋 합치기
3. [Add]메세지 정리

rebase Conflict 해결

• rebase 도중 충돌이 일어날 경우 마치 코드가 날아간 것 처럼 보일 수 있다. 코드가 사라진 것이 아니라 코드를 합치던 도중 중단된 것이다. 충돌을 해결하고 남은 과정을 끝까지 진행하면 모든 코드가 다 들어와 있게 된다. 혹 잘못 리베이스를 했다면, git rebase —-abort (리베이스 도중) 혹은 git reflog 로 돌아갈 지점을 찾은 후 git reset --hard 돌아갈지점 (리베이스 완료 후) 명령어로 복구할 수 있다.

1. master 브랜치로 checkout
2. git pull
3. 작업 브랜치로 checkout
4. git rebase -i master
5. conflict 발생/ conflict 해결
6. git add .
7. git rebase --continue

포스푸쉬 (불가피하게 추가 수정하여 push를 다시 할 경우)

이미 올라간 commit이 있기 때문에 push가 불가능하다고 나온다. 그럴때는 이미 작업자가 앞에 commit 내용을 알고 있으므로 force push를 진행한다.

1. 작업한 파일 커밋 합친 후
2. git push origin featre -f
3. squash

Authentication

• 인증은 회원가입과 로그인을 말한다.
  • 인증은 왜 필요할까?
• 해당 서비스를 누가 쓰는지, 어떻게 사용하는지 등 추적이 가능하도록 하기 위해
• 인증에 필요한 것?
  • 아이디, 이메일주소, 비밀번호 등..

비밀번호는 어떻게 관리해야 할까?

• Database에 저장 시 개인정보를 해싱하여 복원할 수 없도록 한다.
  • 해싱 = 난독화
• 통신 시 개인 정보를 주고받을 때 SSL을 적용하여 암호화 (HTTPS)

암호화는 어떻게 할까?

• 단방향 해쉬
• 원래 해쉬(hash)함수는 자료구조에서 빠른 자료의 검색, 데이터 위변조 체크를 위해서 쓴다.
  • 복원이 불가능한 단방향 해쉬함수는 암호학적 용도로도 사용한다.
• 결과만 봐서는 식별 불가

JSON Web Token

• JWT 구조이다.

부트캠프 1차 팀프로젝트로 팀원 6명이 한 팀으로 구성되어 화장품 사이트인 Dr.Jart+를 클론 코딩 하였다. 처음으로 실무처럼 진행한 프로젝트로 프로젝트 시작 전부터 회고에서 말했듯이 걱정만 하고 있었지만, 감사하게도 팀원 모두가 적극적으로 서로 도우며 2주동안 프로젝트를 진행한 덕분에 목표한 바를 이룰 수 있었다.

Dr.Jart+ 웹페이지 클론 프로젝트 회고

처음 프로젝트 시작전 내가 선정한 사이트 2개가 모두 후보에 올라 있어 기분이 좋았다. 그 중에 하나인 Dr.Jart+가 최종 선정이 되었고 조사했던 사이트인 만큼 최선을 다하고자 했다.

Dr.Jart+ 웹페이지 선정이유

• Dr.Jart+ 특유의 모던함으로 구성된 웹페이지가 1차 프로젝트로서 적합
• 다양한 기능(필터링, 카러셀, 장바구니, 인증인가 등..)
• 다양한 카테고리로 백앤드와의 통신에서도 적합하다고 판단

웹페이지 Ideation

• 화장품의 다양한 카테고리를 활용할 수 있는 치즈를 주제로 선정
• 한국사이트의 과한 에니메이션을 배제 미국사이트 레이아웃 채택
• Dr.Mozza+로 네이밍 / 치즈 Mozzarella에서 영감🧀

작업기간

2021.7.5 - 2021.7.16

기술스택

• HTML
• CSS
• JavaScript(ES6+)
• React
• SASS
• Git

  Project Tool

• Trello
• Notion
• POSTMAN

주요 구현 사항

🧀내가 맡은 구현사항 Nav bar 레이아웃 및 기능 구현🧀 메인페이지 슬라이더 기능 구현🧀 메인페이지 기본 레이아웃 구현🧀 공용 컴포넌트 레이아웃 및 기능 구현🧀 상품 카드 컴포넌트 레이아웃 구현🧀 상품 카드 컴포넌트 기능 구현 제품 상세 페이지 레이아웃 및 기능 구현 제품 리스트 페이지 레이아웃 및 기능구현 제품 리스트 페이지 filtering 기능 구현 로그인, 회원가입 레이아웃 및 기능 구현 장바구니 페이지 레이아웃 및 기능 구현

Project Flow

1주차

1주차에는 trello를 사용하여 구현할 기능들에 대해 카트를 세분화 하고 역할을 분담하였다. 하지만 프로젝트를 진행할수록 처음에 카드 세분화 했다고 생각한게 부족하였는지 계속 자가번식하여 관리하기가 어려워지기 시작했다.

2주차

2주차 부터는 notion의 roadmap을 적극 활용하여 회의록도 노션에 적기 시작하였으며 그때부터 뭔가 front/Back간의 명확한 소통과 연결이 이루어지기 시작했다. 또한 POSTMAN을 적극 활용하여 미리 백앤들와 데이터 구조를 맞춰 서버를 통신해 볼때의 오류를 최소화하였다.

OUTPUT👍

front-end repository back-end repository 전체 기능 구현 영상 -Youtube

Detail

1. Carousel

1주차 Carousel

• 카러셀 기능 구현 / Potential blockers: 접근방식의 헷갈림, map, fetch 위치 정리
  • 슬라이드 끝에서 멈추는 기능 구현 필요
  • transition 구현
• Mock data 연동 및 백앤드 통신 test

  tmi 처음 카러셀 기능을 구현할때 검색하지 않고 만들고 싶어 이것저것 시도를 해보았다. 그러다 다른 팀원분의 약간의 팁을 받고 구현해낼 수 있었다. 사실 알고보면 단순한 로직인데 처음에 알아차리는게 어려운 것 같다.

반응형을 고려한 재설계

2주차 Carousel

• 카러셀 기능 구현 / blokers 해결 및 최적화
  • 슬라이드 끝에서 멈춤
  • transition 구현
  • 반응형 구현
  • 카드 컴포넌트를 활용한 카러셀 추가
• 백앤드 통신 및 데이터 추가

2. Nav

2주차 Nav

• 드롭다운 기능구현
• 동적라우팅 연결
• 반응형 구현

  tmi Carousel을 한번 구현하고 나서 감을 잡아서 구현하는데 성공을 하였다. 지금 만들어진 코드로는 단순히 마우스가 hover시 작동하는 조건인데 프로젝트 마지막쯤에 다른분들의 코드를 보며 얻은 팁인 classname을 삼항연산자로 활용하여 조건을 부여하는 방식으로 리팩토링을 해봐야겠다.

Pr 리뷰중 기억남는 사소한 🍯팁!

//ex
handleClickPrev() {            //지양

handleClickPrev = () => {.     //권장

이벤트에 콜백 함수로 넘겼을 때 this가 동적으로 바뀌면서 문제가 될 수 있다.
따라서 class 컴포넌트에서는 가급적 화살표 함수로 써주는걸 권장한다. +@ 바인드와 같은 원리라 .bind()를 써주는 것도 가능하지만 굳이 쓸 이유는 없다.

<i className="fas fa-chevron-left fa-4x" 
        onClick={() => this.handleClickPrev()} />

<i className="fas fa-chevron-left fa-4x"
    onClick={this.handleClickPrev} />

새로 함수 인스턴스를 만들지 않고 함수를 직접 넘겨주는 것이 좋다. why?🧐 해당 부분이 실행될 때마다 기존에 생성해놓은 함수를 호출하는것이 아니라 새로운 함수를 생성해서 실행하는 방식이라서 비효율적이라고 할 수 있다.

Project Review

1차 프로젝트를 하며 지난 한달간 배운 것들을 활용해보며 내게 부족한 부분이 정확히 알게 되었다. 앞서 작성했던 한달 회고록에서 말한 것처럼 내가 모르는 부분을 부끄러워 하기보다 알게된 것을 기뻐하며 해결하는 태도 또한 갖게 되었다.

사실 내가 구현한 기능들은 뭔가 나 스스로 완벽히 마음에 드는 결과물은 아니다. 추가 구현사항들이 남아 있지만 그것은 추후 리펙토링을 위해 따로 리스트를 작성해 두었다.

욕심부리지 않고 내가 소화할 수 있는 기능들을 구현하며, 팀프로젝트에서 맡은 사항을 해결하는데 초점을 두었다. 또한 이번 프로젝트를 통해 가장 중요한 개발자로써의 태도와 자세를 깨닫게 되었으며 가장 중요한 깨달음이라고 생각한다.

팀원들과 함께 프로젝트를 진행하는 2주 매순간마다 소통이 즐거웠으며 다들 유쾌한 분위기에서 프로젝트를 진행해서인지, 중간에 고비가 있어도 팀원들이 있었기에 극복해낼 수 있었다. 이런게 개발자 문화 아닐까? 또한 팀원들처럼 같이 있는게 즐거운 사람들과 일하는게 축복이라는걸 느꼈다. 2주동안 팀원들에게 함께 해줘서 너무 고맙게 생각한다.🙏

앞으로 진행할 프로젝트 또한 이번처럼 다같이 긍정적인 분위기로 진행할 수 있도록 노력해야겠다. 화이링💪

To-do List / refactoring

• carousel 자동 재생 및 드래그 기능

• carousel 페이지 끝에 갔을때 기능이 정지(구현완료) + 버튼 사라짐(추가!)
• 카트 컴포넌트 기능 재구현 (복습)
• 로그인/로그아웃 시 토큰을 인지하여 상태 변경 / 리덕스 학습 후 추가 예정
• classname을 삼항연산자로 활용한 리팩토링

• API 시스템을 구현하기 위한 아키텍처 중에 가장 널리 사용되는 형식

URI / HTTP Method / Payload

• URI (Uniform Resorce Identifier)
• 해당 사이트의 특정 자원의 위치를 나타내는 유일한 주소 - 리소스
• https://finance.naver.com/login
• https://finance.naver.com/main

HTTP Method

• HTTOP request가 의도하는 action을 정의하는 것

Payload

• HTTP request에서 server로 보내는 데이터 (body)

Representational State Transfer

• 리소스(HTTOP URI로 정의된)를 어떻게 한다(HTTP Method + Payload)를 구조적으로 깔끔하게 표현
• Rest 방식이 적용된 RESTful API
  • 삼성전자 주식 정보를 받기 위한 HTTP 요청
    • HTTP GET https://api.treushort.com/stock/005930

Self-descriptiveness

• 여러 장점들이 있지만, 사실 그중 가장 명확한 장점은 self-descriptiveness 이다.
• RESTful API는 그 자체만으로도 API의 목적이 쉽게 이해가 된다.

RESTful API 설계 규칙

• URI 정보를 명확하게 표시한다. resouce는 명사를 사용한다. ex)GET/user/1 -> GET/users/1

• resouce에 대한 행위를 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.

  • URI에 HTTP Method가 포함되서는 안된다. ex)GET delete/user/1 -> DELETE/users/1
  • URI에 동사가 포함되서는 안된다. ex)GET/user/show/1 -> GET/users/1

• resource 사이에 연관 관계가 있는 경우

  • /리소스/고유ID/관계 있는 리소스 ex)GET/users/{user_id}/profile

• URI는/ 구분자를 사용하여 자원의 계층 관계를 나타내는데 사용한다.

• URI 마지막 문자로 /를 포함하지 않는다.

• 불가피하게 URI가 길어지는 경우 -를 사용하여 가독성을 높인다.

• _는 사용하지 않는다.

• URI 경로에는 대문자 사용을 피하도록 규정하고 있다.

• 파일의 경우 payload의 호맷을 나타내기 위한 파일 확장자를 URI에 포함시키지 않는다.

RESTful API 설계 예시 -Path parameter

1-1. SPA (Single Page Application)

• SPA (Single Page Application) - 페이지가 한 개인 어플리케이션
• 원래는 제작하고자 하는 페이지 수만큼 .html 파일이 존재한다.
  • 하지만 리액트 프로젝트에서는 .html파일의 개수는 1개다.👍 => SPA (Single Page Application)
• 한 개의 .html에서 여러 개의 페이지를 보여주는 방법? => Routing

2-2. Routing

• 라우팅이란 다른 경로(URL)에 따른 View(화면)을 보여주는 것이다.
• 리엑트 자체 기능이 아니다. 리액트는 프론트엔드 라이브러리인 만큼 UI이외의 라우트, 상태관리 기능이 내장되어 있지 않다.
• 리액트가 프레임워크가 아닌 라이브러리로 분류되는 이유이다.
• React-router 리액트의 라우팅을 기능을 위해 가장 많이 사용하는 라이브러리이다.

2-3. Route 이동하기

1. <Link>

• 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
• ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

2. this.props.history.push()

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 this.props.history.push() 방법으로 구현합니다.
  • ex. 로그인 버튼 클릭 시
    • Backend API로 데이터(User Info) 전송
    • User Data 인증 / 인가
    • response message
    • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
    • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

2. Sass

• .scss => Sass의 모든 기능을 지원하는 CSS의 상위집합이다.
• nesting이라는 멋진 기능이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해야 한다.

참고

• https://velopert.com/3417
• https://heropy.blog/2018/01/31/sass/

Component(컴포넌트) : 재활용 가능할 UI 구성 단위

• 재활용성
• 유지보수 편리
• 해당 페이지 구성은 한눈에 파악하기 용이
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.
  • 부모 컴포넌트 - 자식 컴포넌트

2. Class vs Functional Component

컴포넌트를 선언하는 방식에는 두 가지가 있다. 함수형 컴포넌트를 쓰는게 요즘 추세이긴 하나 나중에 Class형 컴포넌트를 사용한 코드를 만나면 할줄 알아야 하니 둘다 알아야 한다.

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

2-1. Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
            <div>
                <h1>This is Class Component!</h1>
            </div>
        )
  }
}

export default Component

클래스형 컴포넌트는 render함수가 필수로 있어야한다. 이를 통해 안에 보여 주어야 할 JSX를 반환한다.

2-2. Functional Component

import React from 'react'

const Component = () => {
  return (
            <div>
                <h1>This is Functional Component!</h1>
            </div>
        )
};

export default Component

• 클래스 컴포넌트에 비해 간단하고 작성하기 편리하다.

3.JSX

JSX : JavaScript Syntax Extension

• 자바스크립트 표현 : { ... javascript... }
• class를 className이라고 작성한다.
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)

: JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이다. 요소들을 감싸는 `div` 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다.

인증은 무엇이고 왜 해야할까?Authentication

• 인증은 회원가입과 로그인을 말한다.
  • 인증은 왜 필요할까?
• 해당 서비스를 누가 쓰는지, 어떻게 사용하는지 등 추적이 가능하도록 하기 위해
• 인증에 필요한 것?
  • 아이디, 이메일주소, 비밀번호 등..

비밀번호는 어떻게 관리해야 할까?

• Database에 저장 시 개인정보를 해싱하여 복원할 수 없도록 한다.
  • 해싱 = 난독화
• 통신 시 개인 정보를 주고받을 때 SSL을 적용하여 암호화 (HTTPS)

암호화는 어떻게 할까?

• 단방향 해쉬
• 원래 해쉬(hash)함수는 자료구조에서 빠른 자료의 검색, 데이터 위변조 체크를 위해서 쓴다.
  • 복원이 불가능한 단방향 해쉬함수는 암호학적 용도로도 사용한다.
• 결과만 봐서는 식별 불가

JSON Web Token

• JWT 구조이다.

2. 전체 flow 💫

1. 사용자가 이메일을 입력하면 이메일 input의 onchange함수가 실행된다.
2. onchange함수가 실행되면 input의 value를 setState를 통해 statef를 업데이트 한다.
3. 사용자가 비밀번호을 입력하면 이메일 input의 onchange함수가 실행된다.
4. onchange함수가 실행되면 input의 value를 setState를 통해 statef를 업데이트 한다.
5. 버튼을 클릭하면 onClick함수가 실행된다.
6. onClick함수 안에서 fetch함수가 실행면서 서버를 통해 request를 보낸다.
7. 서버에서 사용자가 보낸 정보를 가지고 인증/인가 과정을 거친 후 response를 보내준다.
8. response에 따라 이동을 하던가 에러 메세지를 보여준다.

fetch 함수 설명

fetch("api주소", {
  method: "POST",
  body: JSON.stringify({
    email: this.state.id,
    password: this.state.pw,
  }),
})

    .then((request) => response.json()
        .then((result) => console.log("결과: ", result)); // 콘솔 위치가 로직 위치 
                    //button onclik 시 Fetch 함수 실행

첫 번째 인자는 api 주소, 두 번째 인자는 http 통신에 관한 내용이다.두 번째 인자는

• method는 GET, POST, PATCH 등 http method를 입력한다.
• get vs post
  • get 정보를 얻는 것, post 백앤드에도 전달해줘야 할 정보가 있을 때🧐
• JSON 형태로 데이터를 주고 받는데 이 데이터를 body에 넣는다.
  • 통신을 할 때는 string 형태의 JSON으로 보내야 하기 때문에 JSON.stringify()라는 메서드를 활용해서 포맷을 기존의 Object에서 String으로 변환해준다.
• 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기 처리돼서 then 메서드를 사용한다.

.then((response) => response.json())

첫 번째 then에서는 server에서 보내준 response를 Object 형태로 변환한다.

.then((result) => console.log("결과: ", result));

두 번째 then에서는 object로 변환한 response를 console.log로 확인합니다. 여기서 원하는 로직을 구현한다. 예를 들어

• 로그인 성공하면 main 페이지로 이동
• 로그인 실패하면 alert 창에 "아이디나 비밀번호를 확인해주세요." 띄우기
  
  
  

실제구현🎉

코딩을 시작한뒤 처음으로 백앤드와 합치는 작업을 해봤다. 물론 아직 실무에 비해서는 미미한 부분이지만 뭔가 작게나마 성취감을 느낄 수 있는 기회였다. mockdata를 만들어서 API연결전에 혼자서 작업해보는 것과는 달랐다.👏 앞으로 할 프로젝트를 생각하니 가슴이 웅장해진다🔥

Code Kata - Quiz 6

문제 숫자로 이루어진 배열인 nums를 인자로 전달합니다. 숫자중에서 과반수(majority, more than a half)가 넘은 숫자를 반환해주세요.

예를 들어,
nums = [3,2,3]
return 3
nums = [2,2,1,1,1,2,2]
return 2
nums = [3,2,3]
return 3
nums = [2,2,1,1,1,2,2]
return 2
가정
nums 배열의 길이는 무조건 2개 이상

내 솔루션🧐

function moreThanHalf(nums) {
  // 여기에 코드를 작성해주세요.
  let newArray = [];
  let a = 0; //최대값을 담는 변수
  let result; //최대값을 가지고 있는 변수의 length가 아닌 실제 요소

  for(let i = 0; i < nums.length; i++){
    let newLength = nums.filter(element => nums[i] === element).length;
    if (newLength > a) {
      a = newLength;
      result = nums[i];
    }
  } return result
}

생각한 순서

1. 숫자중에서 과반수가 넘는 숫자를 어떤 방식으로 구할 것인가?
2. 숫자가 과반수가 넘는다면 들어온 nums 배열에서 각각 해당 index값을 추출해서 비교해본다.
3. filter를 비교해서 nums의 index를 다 비교해본다.
4. let newLength = nums.filter(element => nums[i] === element).length;여기 아래에 콘솔을 찍어보면 각각 index값이 중복되는 길이가 나온다. ex) nums[3,1,4,3] => 2,1,1,2
5. i번째 인덱스가 a보다 크면 a에 그 값을 넣어준다. => 최대값을 구하는 중
6. 그렇게 나온 최대값의 실제 요소를 (result)를 반환한다.

지수님 솔루션👏

function moreThanHalf(nums) {
  if (nums.length >= 2) {
    const major = {}
    nums.filter((el, index) => {
      major[el] = (major[el])? (major[el]+1) : 1;
    });
    const keys = Object.keys(major);
    const values = Object.values(major);
    const maxValues = Math.max(...values);
    for (let i in keys) {
      if (major[keys[i]] === maxValues) {
      return keys[i];
     }
    }
  }else{
    return 0;
  }
}

배운점

• 이번 코드카타를 filter를 최대한 사용할려고 해보았다. 그러나 아직 filter에 들어가는 키값을 활용한 자유로운 로직을 짜는데 버퍼링이 있다. 좀더 친해져야겠다.
• 다른분들이 적은 코드가 정말 다 제각각이지만 filter를 기준으로 로직을 맥락은 같았다.

String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요.

str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환)
예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길기 때문
str = "aaaaa" return 은 1 => 'a' 가 제일 길기 때문
str = "sttrg" return 은 3 => 'trg' 가 제일 길기 때문

내 솔루션

const getLengthOfStr = str => {
  let arr = []; // filter 메서드 대단하다, includes 메서드

  str.split('').filter(word => {
    //console.log(word);
    if(arr.length === 0){
      arr.push(word)
      //console.log()
    }else if(arr.includes(word)){

    }
  })
}

1. split('')으로 배열로 변환
2. let contiuntiyWord = {} 하나 만들기
3. for문으로 돌다가 같은거 나오면 그
4. 그 후에 join('')으로 리턴

이런식으로 계속 접근하면 메소드를 달리 해볼까 고민하다가 결국에는 해결을 하지 못했다.🥲 그 후 계속 고민하다가 다음날 다른 분들의 풀이를 참고를 했는데 그중 재상님의 솔루션을 소개하고자 한다.

재상님 솔루션 👀

function getLengthOfStr(s){
  let strArr = [];
  let strArr2 = [];

  for(let i = 0; i < s.length; i++){
    let ss = s.slice(i, i+1);
    for(let j = 0; j<strArr.length; j++){
      if(ss === strArr[j]){
        if(strArr2.length < strArr.length){
           strArr2 = strArr.slice();
        }
        strArr = strArr.slice();
        break;
      }
    }
    strArr.push(ss)
  }
  return Math.max(strArr.elngth, strArr2.length;)
}

사실 아직 완벽하게 나만의 코드로 작성을 못해 리팩토링한 내 코드를 적지는 않았다. 현재로서는 재상님의 친절한 설명으로 따라치기에 불과해서..다시 하나하나 구현해야 할 기능을 나눠서 작성해보는 시간을 갖도록 해야겠다.

Code Kata - Quiz 4

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부)

예를 들어, 
num = 123 return false => 뒤집은 모양이 321 이기 때문
num = 1221 return true => 뒤집은 모양이 1221 이기 때문
num = -121 return false => 뒤집은 모양이 121- 이기 때문
num = 10 return false => 뒤집은 모양이 01 이기 때문

내 솔루션

const sameReverse = num => {

  let numToString = num.toString();
  let reverseToString = numToString.split('').reverse().join('');

  if(numToString === reverseToString){
    return true;
  }else {
    return false;
  }
}

생각한 순서🧐

• 숫자가 인자로 들어와 비교를 할려면 우선 배열로 바꿔야겠다.
  • .toString()로 문자열로 -> .split('')으로 배열로
• arrayToString : 배열로 바꾸는 변수를 미리 선언
• numToArray : 배열을 다시 문자열로 by.join('')
• reverseToString : 배열을 뒤집은 것을 문자열로 by.join(''),reverse()
• if문으로 모양이 똑같은면 true, 다르면 false

지수님 솔루션👀

  let a = num.toString().split('').reverse().join('');
  let result = (num.toString() === a ? true : false);
  return result;

종민님 솔루션👀

return num.toString() === num.toString().split('').reverse().join('')

다시 정리한 솔루션👏

let numToString = num.toString();
let reverseToString = numToString.split('').reverse().join('');
return numToString === reverseToString;

배운점

• 이번 코드카타는 코드카타2에서 고칠점을 반영했지만 리팩토링 관점에서 접근하는 것이 부족했다.
• 지수님이 사용하신 삼항연산자를 사용하는 습관을 들여야겠다.
  • if문의 조건이 길지 않다면 삼항연산자를 사용해야겠다.
• 종민님은 한줄로 바로 적으셨다.(이게 니꼴라스가 말하는 자바스크립트의 sexy🔥라는 것인가..
• 다시 정리한 솔루션은 유지보수도 고려하여 적절히 혼합했다!
• 앞으로 플로우를 생각하면 적는 것을 계속하고 작성하고 다시 보며 리팩토링을 해봐야겠다.🤸‍♀️

reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 예들 들어,

x: 1234 return: 4321
x: -1234 return: -4321
x: 1230 return: 321

내 솔루션

const reverse = x => {

  let reverseArray; //또 빼먹었었다..

  if(x>0){  // x가 양수일 때
    reverseArray = x.toString().split('').reverse().join('');
    return Number(reverseArray);
  } else if(x<0){ // x가 음수일 때
    reverseX = x * -1
    reverseArrayX = reverseX.toString().split('').reverse().join('');
    return Number(reverseArrayX)*-1;
  } else{ // x가 0일 때
    return x;
  }
}

생각한 순서

• 숫자를 뒤집어서 return
• (숫자 -> 배열)로 만들어 뒤집어서 반환 후 다시(배열 -> 숫자)
• (숫자 -> string -> 배열)로 정리 // split,reverse 를 사용하기 위해
• x가 음수, 양수, 0일 경우를 생각하지 않고 테스트를 돌려보니 error가 나왔다.
• x의 조건들을 if문을 활용하여 작성하니 통과!

고칠점

오늘도 변수를 미리 선언하는 습관을 지키지 못했다. 앞으로 더욱 복잡한 코드를 작성하게 될텐데 미리미리 이러한 습관을 들여야 겠다. 이렇게 미리 쓰일 변수들을 선언하고 진행하는 방식이 어찌보면 React의 component를 구성하는데에도 나중에 도움이 될 것 같다.

수종님 솔루션👍

const reverse = x => {
  let reverseString = String(x).split('').reverse().join('');
  return parseInt(reverseString) * Math.sign(x);
}

Math.sign메서드를 사용한 풀이 방식이다. 아는 메서드만 사용하는 것이 아닌 검색을 잘해서 적절한 메서드를 찾아보는 접근도 해봐야겠다.

Mathi.sign() : 어떤 수가 양수, 음수, 0인지를 반환한다.

• 음수 = -1
• 양수 = 1
• 0 = 0

코트카타를 진행함에 있어 목표는 다음과 같다.

✔️ 대화를 통한 문제 해결 능력을 기릅니다. ✔️ 컴퓨터 공학의 기본 자료구조 및 알고리즘을 익힙니다. ✔️ 자바스크립트에 대한 이해도를 높입니다. ✔️ 수료 후 취업 준비 기간 중 있을 실제 코딩테스트의 수준을 체험한다.

알고리즘을 보고 무조건 코드를 치는데에만 몰두하지 말고, 하나 하나 구현해야 하는 ToDoList를 작성 해야겠다. 이를 바탕으로 팀원과 어떠한 방식으로 접근할지 대화를 해야겠다.

1. 풀지 못하겠다고 조급하지 않기
2. 문제를 받았을때 구현해야 할 조건들을 리스트로 작성할 것
3. 다른 동기들의 코드를 보며 부족한 점이 있다면 refactoring!

Code Kata - Quiz 1

twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.

nums: 숫자 배열
target: 두 수를 더해서 나올 수 있는 합계
return: 두 수의 index를 가진 숫자 배열

예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다.

#가정 target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다.

Soluntion🐳

내 솔루션

const twoSum = (nums, target) => {
  let newArr = [];
  for (let i = 0; i < nums.length; i++) {
    for (let j = i+1; j < nums.length; j++) {
      if (nums[i] + nums[j] === target) {
        newArr.push(i);
        newArr.push(j);
      }
    }
  }

  return newArr;
}

재현님 솔루션!

const twoSum = (nums, target) => {
  for (i = 0; i < nums.length; i++) {
    if(nums.indexOf(target-nums[i]) != -1) {
      return [i, nums.indexOf(target-nums[i])];
    }
  }
}

배운점🤸

처음에 내가 접근했던 방식은 빈배열에 push하는 것이 아닌 단순히 for문을 돌면서 풀려고 했었다. 하지만 너무 코드가 길어지고 해결하지 못하다가 지수님의 팁으로 빈 배열에 push하는 방식으로 진행하여 해결하였다. 처음 사고방식의 스타트가 중요하다는 것을 느겼다.

재현님 코드는 처음 봤을때 감탄만 했다. indexOf를 활용한 접근을 생각도 못했는데 정말 적절한 메서드를 활용한 풀이였다.

indexOf stringValue에서 특정한 문자열의 위치(index)를 반환한다. 탐색하려는 문자열이 존재하지 않는다면 -1을 반환한다.

React ** = *JavaScript 라이브러리 *for 사용자 인터페이스(UI)+ **가상돔(불필요한 랜더링 없에고 성능 향상)

리액트는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유는 UI를 자동으로 업데이트 해준다는 점이다. 리액트는 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다. 또한 리액트는 프레임워크가 아닌 라이브러리이기 때문에 다른 프레임워크와 함께 사용할 수 있다.

현실적인? 이유로는 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, react native의 사용으로 인해 사용자가 꾸준히 증가이다. 즉, 지속적인 관리가 되며 많은 사람들이 사용하기 때문에 방대한 자료들에 쉽게 접근할 수 있다.

또한 리액트의 컴포넌트는 가독성, 재사용성을 높여 유지보수를 쉽게 만들어 준다. 효과적으로 웹 어플리케이션을 제작할 수 있고, 개인 컴포넌트를 만드는 것 뿐만이 아닌 타인이 만든 수많은 컴포넌트도 사용할 수 있다.

2. JSX(JavaScript XML)

const hi = <p>Hi</p>;

위의 문법은 자바스크립트의 확장버전인 JSX(syntax extension for JavaScript)이다. HTML과 유사하게 생겼으며 자바스크립트 파일 내에서 작성할 수 있다. 하지만 자바스크립트 문법과는 다르기 때문에 .js파일내에 JSX문법이 있으면 브라우저가 해석하지 못해 오류가 난다. React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다.

2-1. JSX element

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

위에 보이는 코드처럼 자바스크립트 코드 내부에 HTML문법을 써주면 그것이 JSX다. .js파일 어디서나 필요한 곳에 작성할 수 있다. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수 도 있다.

2-2. JSX attribute

태그에 attribute(속성)을 주고 싶을 때는 항상 ""쌍따옴표로 감싸줘야 한다. attribute를 추가하고 싶을때는 HTML에서 쓰는 attribute name(속성명)과 다를 수있어 react 공식문서를 참고해야 한다.

가장 대표적인 예로 class를 주고 싶을 때는 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.

2-3. Self-Closing Tag

JSX에서는 어떤 태그라도 self closing tag가 가능하다. input과 같이 하나의 태그가 요소인 경우에는 <input />과 같이 항상 /로 끝내줘야 한다.

div /와 <div>``</div>는 같은 표현이다.

JSX 특징

• 모든 요소를 감싸는 최상위 요소가 있어야 한다. => 항상 하나의 태그로 시작 (cf. React Fragments : <> ... </>)
• 자바스크립트로 표현한다. : { ... javascript... }
• class가 아닌 className이라 적는다.
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> = <div />

2-4. Nexted JSX

1. (필수!)중첩된 요소를 만들려면 무조건 ()소괄호로 감싸야 한다.

   const good = (
   <div>
    <p>hi</p>
   </div>
   );

2. (필수!)항상 하나의 태그로 시작한다.

   const wrong = (
   <p>list1</p>
   <p>list2</p>
   );//eror

   위에 코드처럼 처음 요소가 sibling이면 안되고, 무조건 하나의 태그로 감싸야 한다.

   const right = (
   <div>
    <p>list1</p>
    <p>list2</p>
   </div> //good!
   );

   2-5. Rendering

   사전적 의미 : rendering = 구현

html요소(element), 또는 React요소 등의 코드가 눈으로 볼 수 있도록 그려지는, 구현되는 것을 렌더링이라고 한다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용해야 한다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.

작성 필수 요소

• 소괄호 감싸기
• 항상 하나의 태그로 시작
• 랜더링 = ReactDOM.render

  componet = 재사용 가능한 UI단위

  컴포넌트는 독립적으로, 재사용가능한 코드로 관리할 수 있습니다. 하나의 컴포넌트에 필요한 html, css, js(validation check)를 모두 합쳐서 만들 수 있습니다.

React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return됩니다.

함수로 컴포넌트 만들기

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class로 컴포넌트 만들기

class로 컴포넌트를 만드려면 React.Component 를 extend해서 생성합니다. 컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야하고, return도 해주어야 합니다. render() 메서드는 무조건 정의해야한다는 말은, component를 만들 때 필요한 메서드가 원래 더 있다는 말입니다. 그런데 그 중에서 render() 만 필수입니다.

class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

오늘의 한줄 ✏️

리액트를 시작하는데 처음에 지레 겁먹었던 것보다 흥미로운 부분이 많았다. 앞으로 컴포넌트를 활용하여 더욱 가독성, 재사용성을 보완해야겠다. 물론 틈틈이 Js공부도 유지하면서...React.js 즉, js기반이니까!

참고

리액트를 공부하며 객체지향 프로그래밍의 핵심 공부를 다시하고자 자바스크립트의 Object와 Class를 정리해보고자 한다. 이번 TIL은 그 중에서 Class를 적고자 한다! 📝

1. Object(객체)

위와 같은 데이터를 자바스크립트로 구현을 할려면 아래와 같이 데이터를 저장해야한다.

let plan1Name = "Basic";
let plan1Price = 3.99;
let plan1Space = 100;
let plan1Data = 1000;
let plan1Pages = 10;
let plan2Name = "Professional";
let plan2Price = 5.99;
let plan2Space = 500;
let plan2Data = 5000;
let plan2Pages = 50;
let plan3Name = "Ultimate";
let plan3Price = 9.99;
let plan3Space = 2000;
let plan3Data = 20000;
let plan3Pages = 500;

이 중에서 하나의 plan을 선택하면 아래와 같이 alert를 띄워주게 하였다.

alert(plan2Name + "플랜 가격은 한 달에 " + plan2Price + "달러입니다.")

//만약에 자세하게 설명까지 할려면..
alert("용량은 " + plan2Space + "GB이고, ...");

이런식으로 해당 플랜에 대한 변수 나열이 필요하다. 데이터가 늘어나면 늘어날수록 유지보수 및 가시성 관점에서 비효율적이다. 이럴때 Object(객체)로 표현하는 것이다!

위의 내용을 object에 맞게 다시 표현해보면.. 이렇게 object를 사용한 데이터는 아래와 같이 alert 메세지를 바꿀 수 있다.

alert(plan2.name + "플랜 가격은 한 달에 " + plan2.price + "달러입니다.")

2. 객체 선언

var 지양 let 지향! 객체를 만들때 규칙

• 객체는 {}(중괄호)로 감싸져 있다.
• property이름/property값 사이를 :(콜론)으로 구분한다.
• property를 추가할 때는 ,쉼표를 붙여준다.
• property 이름은 중복되면 안된다.
• property 값에는 어느 type이나 가능하다.
  • type((string, number, array, object, function..)/

즉 객체는 이름과 값으로 구성된 프로퍼티들의 집합이다. plan1의 객체를 만들면 다음과 같다.

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

3. Property 접근

해당 객체의 property 값을 접근하고 싶을때는 다음과 같다.

let plan1 = {   
  name: "Basic"
};

console.log(plan1.name);
console.log(plan1["name"]);

단순히 생각하먼 마침표(.)로 접근하는 것이 편할 것 같은데, 대괄호 표현은 언제 쓰는지 알아보자🧐

대괄호에는 변수가 들어갈 수 있다. 예를 들어 plan1 객체의 name이라는 프로퍼티에 접근하고 싶을 때, 아래와 같이 활용한다.

let plan1 = {   
  name: "Basic"
};

let propertyName = "name";

console.log(plan1[propertyName]);

객체를 정의한 후에도 property 값을 수정할 수 있습니다.

let name = "property1";

myObj[name] = ["hi", "hello"];

console.log(myObj);

4. 객체의 객체의 배열의 객체.....?🤷

let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};

objData라는 객체안에 name, address, books라는 프로퍼티가 있다. 그리고 books에 객체가 또 할당 되었다.

위의 데이터에서 "HTML Guide"에 접근하고 싶다면 아래와 같이 접근하면 된다.

let bookName = objData.books.info[1].name;

오늘의 한줄 ✏️

리액트를 하나씩 진도를 나가며 복습하고 있는데 왜 이러한 객체 구조를 필요한지를 이해할 수 있었다. 또한 컴포넌트의 개념을 이해하는데에도 객체 = 이름과 값으로 구성된 프로퍼티의 집합이라는 플로우가 도움이 되었다. 역시 복습 쵝오 👍👍👍

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

리액트를 공부하며 객체지향 프로그래밍의 핵심 공부를 다시하고자 자바스크립트의 Object와 Class를 정리해보고자 한다. 이번 TIL은 그 중에서 Class를 적고자 한다! 📝

1. Class

클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, *객체들 간에 서로 상호 작용 *하도록 작성하는 방법이다.

클래스는 { num: 1}처럼 생긴 객체(Objcet)를 잘 설계하기 위한 틀이다. 이 때의 객체는 특정 로직을 갖고 있는 method(행동)와 멤버 변수(변경 가능한 상태)를 가진다. 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다.

객체를 매번 만들어서 사용해도 좋지면, 큰 규모의 객체이거나 비슷한 모양의 객체를 단순반복적으로 계속 만들어야 한다면, class라는 설계도를 통해 만들 수 있다.

CSS의 class와는 전혀 다른 개념이니 헷갈리지 말자!!!

2. Construcror(생성자)

객체(object)의 설계도인 클래스는 문법이 서로 비슷하다. 하지만 둘의 가장 큰 차이는 constructor라는 생성자 함수이다.

const morning = new Car('Morning', 2000000);

위와 같이 class로 객체를 생성하는 과정을 '인스턴스화'라고 부른다.class를 통해 생성된 객체를 인스턴스(instance) 라고 부른다. class는 새로운 인스턴스를 생성할때마다 constructor() 매서드를 호출한다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  };
}

• Car는 class의 이름이다. 항상 대문자로 시작해야 하며, CamelCase로 작성해야 한다.
• Car class의 istance를 생성할때마다 constructor() 매서드가 호출된다.
• constructor() 메서드는 name, price 2개의 argument(인자)를 받는다.
• constructor()에 this를 사용했는데, class의 실행범위(context)안에서 this는 해당 instance를 의미한다.
• constructor()에서 인자로 넘어오는 name과 price를 사용해 Car라는 class의 instace안에 있는 name, price 프로퍼티에 값을 할당했다.
• 이처럼 class 내에서 name, price와 같이 변경 가능한 상태값이자 class 내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 한다.
• 멤버 변수는** this** 키워드로 접근하다.

3. Instance(인스턴스)

const intance = new Word("사례, 경우", "~을 예로 들다"); 인스턴스의 사전적 의미를 새로운 인스턴스에 담아 보았다. 사전적 의미에서 보듯이 instance는 새로운 case(경우)가 생겨난 것이다. 개인적으로 사전의 의미를 보면 이해하기 쉬워 적어 보았다. 이번에도 역시 이해하는데 도움이 되었다.

위에서 class instance를 생성했다. Instace(인스턴스) == class를 통해 생성된 객체 인스턴스는 class의 property 이름과 method를 갖는 객체이다. 각각의 인스턴스마다 모두 다른 프로퍼티 값을 갖고 있다.

const morning = new Car('Morning', 20000000);

• 인스턴스는 Class 이름에 new를 붙여서 생성한다.
• 클래스 이름 우측에 ()괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.
• Car라는 클래스의 새로운 instance를 morning이라는 변수에 저장했다.
• morining이라는 String과 20000000이라는 Number를 Car 생성자에게 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었다.

즉, Car라는 클래스에 새로운 인스턴스를 생성하려면 new키워드가 필요하다. new키워드는 constructor() 메서드를 호출하고 새로운 인스터스를 return 해준다.

4. Methods(메서드)

메서드는 함수다. 그런데 객체가 프로퍼티 값을 갖고 있는 것을 메서드라고 부른다. Class의 method는 Object(객체)의 문법과 똑같다. 다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 하지만, 클래서는 그렇지 않다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }


  applyDiscount(discount) {  
    return this.price * discount;   
  }


  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}

위는 Car 객체에 changeDepartment 메서드를 추가한 것이다.

Assignment

• MyMath 라는 class를 생성해주세요.
• constructor 에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
• 총 4개의 메서드를 구현해주세요.
  • getNumber : 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 → ex) [1, 2]
  • add : 두 개의 숫자를 더하는 메서드
  • substract : 두 개의 숫자를 빼는 메서드
  • multiply : 두 개의 숫자를 곱하는 메서드

Answer

class MyMath { constructor(number1, number2) {
  this.number1 = number1;
  this.number2 = number2;
}
  getNumber(){
  let arr = [];
  arr.push(this.number1);
  arr.push(this.number2);
    return arr;
}
  add(){
    return this.number1 + this.number2;
}
  substract() {
    return this.number1 - this.number2;
}
  multiply(){
    return this.number1 * this.number2;
 }
}

Model Soulution

class MyMath { 
  constructor(a, b) {
      this.num1 = a;
      this.num2 = b;
}
  getNumber(){
      return [this.num1, this.num2];  
}
  add(){
    return this.num1 + this.num2;
}
  substract() {
    return this.num1 - this.num2;
}
  multiply(){
    return this.num1 * this.num2;
 }
}

내가 작성한 코드와 비교해보면 간단한 변수명과 배열로 반환하는 메서드를 굳이 빈배열을 만들어서 push로 넣는 것이 아닌 배열로 바로 리턴하는 것이다. 줄일 수 있는 코드는 줄이고 변수명도 적합하게 바꾸는 refactoring 습관을 가져야 겠다.

오늘의 한줄 ✏️

리액트를 처음 배우면서 솔직히 말하면 멘붕이였다. 🤦‍♂️ 뭔가 머릿속이 뒤죽박죽이랄까, "이게 뭐지"라는 생각과 함께 억지로 이해하는 나의 모습을 보고 객체지향 파트를 다시 복습하기로 마음을 먹었다.

어차피 리액트 또한 하나의 자바스크립트 라이브러리이니까 실습을 하면서 틈틈이 이해를 해야겠다.

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

HTTP(HyperText Transfer Protocol)

HyperText

문서와 문서가 링크로 연결되어 있음을 뜻함

Transfer

HTML로 만든 웹페이지 문서(파일)을 보낸다

Protocol

컴퓨터끼리 어떻게 HTML 파일을 주고 받을 지에 대한 소통 방식 또는 약속

1. Request(client, front-end)/Response(server, back-end) (요청/응답) 인간이 서로 소통하듯이 말이 아닌 메세지의 형식으로 서버와 요청하고 응답한다.

2. Stateless HTTP 개별 통신은 모두 독립이어서, 과거의 HTTP 통신 결과(상태)를 보존하지 않는다. State(상태) + less(없음) 매 통신마다 사전에 필요한 모든 정보를 담아서 요청을 보내야 한다.

HTTP request method

Get

데이터를 받아오기만 할 때 사용 웹페이제 접속해서 필요한 데이터를 불러올 때 사용

Post

데이터를 생성/수정할 때 사용 Body에 담는 내용이 핵심

Delete

서버에 저장된 특정 데이터를 삭제할 때 사용 Body에 값을 담지 않는다.

Success 200:ok 201:created

error(front-end) 400:bad request 401:unauthorized 403:forbidden 404:not found

server error(back-end) 500:internal server error

Git은 프로젝트 파일의 변경 사항을 추적하는 시스템입니다. 이를 통해 개발자들은 프로젝트 변경 사항 기록 및 특정 시점의 버전으로 돌아갈 수 있습니다.

Git을 통해 여러 사람들이 효율적으로 작업하고, 프로젝트를 중심으로 협업할 수 있다.

쉽게 말해, 프로젝트 파일의 변경 사항을 추적하는 시스템입니다. 이를 통해 개발자들은 프로젝트의 변경 사항을 기록하고, 특정 시점의 버전으로 언제든 돌아갈 수 있습니다. 이런 버전 관리 시스템은 많은 사람들이 효율적으로 함께 작업하고, 프로젝트를 중심으로 협업할 때 사용할 수 있습니다. 어느 환경에서도 개발을 하게 해줄 수 있는 도구이기도 합니다.

각 개발자가 자신만의 프로젝트 버전을 본인 컴퓨터에 갖게됩니다. 나중에 이러한 개별 버전의 프로젝트를 병합하여 기준이 되는 버전의 프로젝트에 적용 할 수 있게 됩니다.

Git은 개인 혹은 팀 간의 프로젝트를 관리하는 데 가장 널리 사용되고 있는 툴입니다. 따라서 Git을 다룰 줄 아는 것은 요즘 모든 개발자들에게 가장 중요한 기술 중 하나입니다.

Git 공식 홈페이지: https://git-scm.com/

Git 코드 버전 관리를 하는 이유

1. 수정할 때 마다 파일을 새로 만들면 관리가 어렵기 때문
2. 언제든 이전 버전의 코드로 돌아갈 수 있기 때문
3. 이력을 남기기 위해
4. 하나의 프로젝트를 두고 여러 개발자가 협업할 수 있기 때문

2. GitHub 🗂

GitHub

1. Git을 사용한 프로젝트들의 저장소
2. 개발자들의 Social Network

2-1. 기본 명령어

1. git 시작 : git inint (안쪽에서 init해야함/해당 폴도 내부안에서/녹화 개념과 비슷하다)
2. git 상태 확인 : git status (어떤 변경사항들이 있는지-임시 상태)
3. 파일 수정 이력 기록 준비 : git add (쇼핑몰 장바구니?같은 느낌적인 느낌🤷)
4. 파일 수정 이력 기록 : git commit (commit 하나 하나가 버전이라 생각하면 됨/구매확정같은 느낌적인 느낌🤷)
5. commit 이력 보기 : git log (coommit들의 이력들을 모아 봄/구매 이력같은 느낌적인 느낌🤷)

2-2. git Push 순서

1. 파일이 있는 폴더로 이동 cd Desktop/파일명

2. 폴더안에 git_pratice폴더 생성

3. Git 시작 git init

   • git_pratice폴더 진입 후 (cd git_pratice)
     • .git폴더 확인 (ls -al)

4. 작업.md 파일 생성

5. 해당 파일에서 본인 이름 작성 후 저장

   • vi junghoon.md
   • insert 모드 전환 후 내용 작성 및 저장
   • 선택사항) git 상태 확인 : `git status``

6. Staging(중간 저장) : git add .

   • Optional) git 상태 확인 : git status

7. Commit : git commit -m "메세지"

   • Optional) git 상태 확인 : git status

8. Commit history 확인 : git log

9. Github repo 생성

   • github 사이트 → New repository

10. git_practice 폴더와 github repository 연동 : git remote add origin repository주소

11. git push : git push origin main

나중에 이미 md 파일 지정되어 있을때 순서 1 -> 3 -> 7 -> 8 -> 9 -> 10(이미 있으면 스킵) -> 11 > 12

브랜치는 feature(기능)별로 딴다. ex)git branch feature/login

처음 브랜치를 만들기 전에 최신화된 코드에서 브랜치를 만드는 것이 맞다. 즉, 먼저 (처음 작업을 시작할때) main에서 최신화된 코드를 clone 하고 브랜치를 만드는 습관.

Branch 생성 순서

1. git branch
2. git branch feature/README
3. git checkout feature/README
4. git add .
5. git commit -m “Add: 메시지”
6. git push origin feature/이름

Conflict 해결 과정

1. git checkout master
2. git pull origin master
3. git checkout feature/branch
4. git merge master
5. 충돌 해결
6. git add .
7. git commit
8. git push

오늘의 한줄 ✏️

사실 Git에 대해 세션을 듣고 공부를 하면서 너무 어려운 것 같이 느껴지기도 했다. 뭔가 굳이 저렇게 관리를 해야하나? 아마 이러한 생각이 과거에 나의 다음에 써야지라는 습관에서 비롯된 것이다. 앞으로 개발자로써 일을 하기 위해 이런 습관과 이별하고 Git과 친해져야겠다. 그럼 이만 github에 push해서 나도 잔디밭을 가꾸러🌳

참고

• https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/GitHub

MDN에서 말하는 DOM(Document Object Model)의 정의는 다음과 같다.

The Document Object Model (DOM) is a programming interface for HTML. DOM은 HTML 문서를 위한 프로그래밍 인터페이스이다.

쉽게 말하면 여러 소프트웨어 간의 교류를 가능하게 해주는 표면 같은 존재이다.

예시를 들면 이해하기가 쉽다.

TV를 보고 있을때 리모콘의 다양한 종류의 버튼들을 통해 TV와 교류(채녈 이동) 한다. 이러한 상황에서 리모콘의 버튼들이 프로그래밍 인터페이스와 같은 역할이고, 이러한 인터페이스를 이용하여 TV를 컨트롤 할 수 있다.

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

위와 같이 .blue라는 클래스를 가진 요소를 선택하여 해당 요소의 스타일을 수정하였다. 즉, DOM이라는 프로그래밍 인터페이스를 사용하여 자바스크립트가 HTML 문서를 조정하는 것이다.

여기서 주의해야 할 사항은 자바스크립트로 화면을 수정한다고 해서 내가 작업하는 HTML 문서(ex.index.html) 자체가 수정되는 것은 아니다.

1. 요소 선택하는 방법 🤏

1. 아이디 이름을 이용하여 선택 by.document.getElementById - document.getElementById를 이용하여 요소를 선택할 경우 주어지는 값은 하나이다. - tip.여기서 Id는 페이지당 1개만 존재하므로 element

// start-button 아이디를 가진 요소를 선택하여 `$sb` 변수에 대입
const $sb = document.getElementById("start-button");

// special-button 아이디를 가진 요소의 텍스트 변경
$sb.textContent = "Engine Start";

2. 클래스 이름을 이용하여 선택 by.getElementsByClassName - getElementsByClassName의 결과값은 배열과 유사한 형태(유사 배열)이다. 그렇기 때문에 대부분의 상황에서 배열의 index위치를 사용해야 한다. - HTML 상에서 해당 클래스를 가진 요소가 하나 뿐이라도, getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스를 사용하여 접근한다. - tip.class는 한페이지에 여러개가 존재할 수 있으므로 elements => 배열 or 유사 배열

// letItGo 클래스를 가진 "모든 요소들"을 선택하여 `$container` 변수에 대입
const $letItGo = document.getElementsByClassName("letItGo");

// HTML 상에서 해당 클래스를 가진 요소가 단 하나 뿐이더라도,
// getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$letItGo[0].style.backgroundColor = "green";

3. 태그 이름을 이용하여 선택 by.getElementsByTagName - 특정 태그를 사용한 요소들을 선택 - getElementsByClassName과 getElementsByTagName는 결과값이 대부분 동일한 형태(HTML Element가 담긴 유사 배열)이다.

4. CSS선택자를 이용하여 선택 by.querySelector - CSS 선택자 문법을 이용해야한다. (실수 조심!) - querySelector라는 함수는 모든 경우에 "하나의 요소"를 반환한다. - querySelector 함수의 CSS 선택자와 일치하는 요소가 여러 개일 경우, 가장 첫번째 요소를 반환한다. - querySelectorAll함수의 CSS 선택자와 일치하는 "모든 요소들"을 유사 배열의 형태로 반환한다.(getElementsByClassName처럼 요소를 제어하고 싶다면 index위치를 사용해야 한다.)

const $container = document.querySelector("#container");
const $listName = document.querySelector(".name");
const $paragraphs = document.querySelectorAll("p");

2. 요소 다루기

DOM을 이용하면 선택한 요소들을 수정하거나 삭제할 수 있다.

const $article = document.querySelector(".meet");
$article.textContent = "Hello!";

HTML요소를 모두다 암기할려고 하지 말고 정확한 검색을 해서 이용하자! 검색어 : 자바스크립트 HTML 요소 텍스트 수정등의 키워드

자주 사용하는 속성

• Element.children
• Element.classList
• Element.innerHTML
• Element.style
• Element.remove
• Element.appendChild

3. 요소 만들기

const secondHead = document.createElement("h2"); // h2 요소를 만들어서 "scondHead"라는 변수에 할당
secondHead.textContent = "소제목"; // h2 요소 텍스트 설정
secondHead.fontSize = "45px";     // h2 요소 스타일 설정
document.body.appendChild(secondHead); // h2 요소 body 태그의 자식으로 추가

수정과 삭제가 가능하듯, 만들기도 가능하다.

4. event

"event"란 웹에서 발생하는 사건들을 일컫는 단어이다. ex)화면 클릭, 마우스 드래그, 윈도우 사이즈 조절.. 이벤트의 종류는 굉장히 많다. 암기보다 많이 사용하면서 익숙해지자!

• Event reference

  <div>
  <p>퀴즈를 다시 풀고 싶으시면 아래 버튼을 누르세요!</p>
  <button>시작!</button>
  </div>

  const reStartBtn = document.querySelector("button");
  

reStartBtm.addEventListener("click", function onButtonClick () { alert("퀴즈 시작합니다!"); }

```

오늘의 한줄 ✏️

로그인 페이지 구현을 하다가 DOM과 event가 동작으로는 이해를 하는데 개념적으로는 두루뭉실하여 부족하지만 복습용으로 정리를 해봤다. 뭔가 앞으로 벨로그 손님이 될것만 같다.🤷 단순히 빨리 진도를 나가는 것보다 내가 설명할 수 있도록 이해를 해야겠다.

참고

• https://developer.mozilla.org/ko/