connecting dots

영상공유 SNS 플랫폼 개발 프로젝트 - MAZI

dearsuhyun — Mon, 7 Oct 2024 10:51:42 +0900

1. 개요

패스트캠퍼스 데브캠프: 김민태의 프론트엔드 개발 1기

비기너반 프로젝트로써 진행한 영상공유 SNS 플랫폼 개발 프로젝트 소개 및 회고를 해보겠습니다.

2. 깃허브 주소

https://github.com/Dev-FE-1/Toy_Project_3_BeginAgain

GitHub - Dev-FE-1/Toy_Project_3_BeginAgain

Contribute to Dev-FE-1/Toy_Project_3_BeginAgain development by creating an account on GitHub.

github.com

3. 팀원소개 및 역할분담

처음에는 7명으로 시작했던 비기너반이 최종적으로는 4명이 되어 프로젝트를 진행하였습니다. 특히나 프로젝트가 시작되고 기획 및 디자인 단계에서 두 분이나 개인 사정으로 부트캠프를 하차하게 되면서 충분하지 않은 시간 동안 완성할 수 있을지 걱정이 많이 되었지만 팀원 모두가 추석이나 정규 프로그램을 따라가야하는 우여곡절 속에서도 최선의 노력을 해주셨기에 프로젝트 완성을 할 수 있었습니다.

처음으로 팀장이라는 자리에서 프로젝트를 진행해보았는데 제가 실력이 좋다거나 프로젝트 경험이 많은 상태가 아니었기 때문에 어떻게 하면 역할을 잘 수행할 수 있을지 고민이 많았습니다. 저희는 비기너반으로써 개발 경험이 적은, 또 프론트엔드 개발을 이 부트캠프에서 처음 배워보는 수강생들이 모였던 상황이라 Git 사용이라던지 필수 컨벤션, 프로젝트 초기 세팅과 같은 부분에 익숙하지 않았습니다. 따라서 제가 Git Wiki에 이슈 생성법, PR 생성 및 리뷰법, 팀 컨벤션 등을 정리하여 팀원분들이 Git을 사용할 때 최대한 불편함이 없도록 조치를 해 두었습니다. 회의 전에는 정해야 할 부분 중에 너무 어렵거나 처음 접해보는 내용은 빼고 정말 필수적으로 정해야 하는 rule이나 코드 컨벤션 등을 간결하게 정리해보았고 노션 템플릿 등을 이용하여 기획이나 문서 작성 시 예시를 제시하여 시행착오를 최대한 줄이고자 했습니다.

- Git Wiki에 정리해둔 가이드 일부 발췌

⠀⠀⠀⠀⠀⠀⠀

역할분담의 경우에는 팀원들의 강점을 잘 살릴 수 있는 분야로 분담이 되었습니다. 아무래도 한정된 시간에 개발 시간을 최대한으로 가져가기 위해서는 기획과 디자인 단계에서 시간을 최소화하는 것이 필요했습니다. 기획에 경험이 짙으신 분이 유저플로우 등 전체적인 기획을 주도해주셨고, 디자인 경험이 있으신 분이 디자인과 추후 발표자료까지 맡아주셔서 효율적인 협업이 가능했습니다. 문서 작성 역시 초안을 작성하고 변경된 부분을 수정하는 식으로 진행했고, 다은님께서 노션 템플릿이나 기타 문서 예시를 주셔서 경험이 많지 않은 저희 팀에게 많은 도움이 되었습니다.

- Notion에 정리한 것 일부 발췌

4. 프로젝트 진행 방식

- 프로젝트 일정

2024.09.02 - 2024.09.27

- 온라인 진행

부트캠프 역시 온라인으로 진행되며 각자 거주하는 지역이 상이한 이유로 오프라인으로 모여 프로젝트를 진행하기 힘든 상황이었습니다. 따라서 프로젝트 역시 온라인으로 진행하였습니다. Zoom, Zep을 이용하여 정기 회의와 긴급 회의 등 팀원 모두가 공유해야 할 상황이 생겼고 구두로 설명하는 것이 좋겠다고 판단할 시 즉각적으로 모일 수 있었습니다. 회의록이나 트러블 기록 및 문서화하여 공유하면 좋을 내용은 Notion을 통해 정리했습니다. 수정해야 할 버그 등도 문서화하여 공유하고 해결한 버그는 지워나가는 식으로 진행하였더니 팀원 모두가 진행 상황을 파악하기 쉬웠고 해당 부분을 맡았던 팀원도 한 눈에 문제를 파악할 수 있었습니다. 또한 Slack을 통해 기타 공지나 멘토님과의 소통 등을 진행했습니다.

- 문서화

진행상황 공유와 회의에서 결정된 내용을 명확히 해두기 위해서 매 정기회의마다 회의록을 작성하였습니다.

* 트러블 슈팅

저희 팀이 프로젝트를 진행하면서 가장 힘들었던 부분은 Git 활용이었습니다. 토이프로젝트 1으로 프로젝트 경험이 있는 분과 개인프로젝트 진행으로 협업 프로젝트는 처음인 분이 섞여있었고, 이론 강의를 들었을 때와는 또 다르게 직접 버전관리를 하려니 혼란한 부분이 많았습니다. 예시로 저희는 회의를 통해 개발 기간에는 develop에 merge를 하여 진행하고 마지막에 모든 것이 완성되었을 때 main으로 한번에 merge하기로 규칙을 정했었습니다. 기획 및 디자인을 끝내고 기능 개발에 들어가는 날, 팀원 분이 main으로 병합하는 PR을 올리셨고 승인한 팀원들도 그 부분을 유념히 검토하지 않고 병합이 되는 실수가 발생했습니다. 이를 되돌리려고 저희끼리 노력해보았지만 역부족이라 부트캠프 다른 수강생 분들도 와서 도와주시다가 나중에는 멘토님과 매니저님까지 달려와 장장 8시간의 회의가 되어버린 상황을 겪게 되었습니다. 결국 너무 꼬여버려 본질적인 해결은 하지 못하고 repository를 하나 더 생성하는 걸로 결론을 내렸습니다.

위에 설명한 사건 이후, 저는 어떻게 하면 이러한 상황을 방지할 수 있을까 생각하다가,

첫 번째, GitHub 자체에서 설정할 수 있는 Rulesets를 활용했습니다. 규칙을 설정함에 있어서 서윤님이 많이 기여해주셨는데, 서윤님이 제안해주신 방법은 main에 합병하는 PR의 경우 승인을 받아야 하는 팀원의 수를 3명으로, develop에 합병하는 PR의 경우에는 승인을 받아야 하는 팀원의 수를 2명으로 차이를 두어 혹시나 모를 상황을 미연에 방지하는 방법이었습니다. 실제로 이 규칙을 설정해 놓은 덕분에 한 두번정도 main으로 합병을 시도한 PR이 승인 과정에서 발견되었고 main에 합병되는 상황을 보호할 수 있었습니다.

두 번째, 노션에 트러블 상황을 정리하기 시작했습니다. 하단에 첨부된 사진과 같이 어떤 문제가 발생한 상황을 구체적으로 설명하고 어떻게 해결했는지를 정리해두어 추후 비슷한 상황이 발생했을 때 당황하지 않고 빠른 대응이 가능하도록 해보았습니다. 또한 혜진님께서 도움을 주신 부분인데, Git을 사용하면서 특히 버그가 발생했을 때, 개발 중 develop 브랜치가 업데이트 되었을때, 로컬에서 브랜치 생성하는 방법 등을 명령어와 함께 설명해주셔서 이를 정리하여 팀원들께 공유할 수 있었습니다. 이는 Git을 사용할 때 매우 유용한 참고자료로 사용할 수 있었습니다.

- 팀 컨벤션

git flow

main: 개발 완료 후, 마지막에 사용할 브랜치
develop: 개발 중 사용할 브랜치(프로젝트 기간 중 이 곳에 merge 해 주세요)
feature: 각 기능 개발 시 사용할 브랜치
bugfix: 버그 수정 시 사용할 브랜치
style: 스타일 관련 변경사항이 있을 경우 사용할 브랜치
help: 도움이 필요할 경우 사용할 브랜치
test: 테스트 코드 추가 시 사용할 브랜치

PR규칙

PR을 올린 자신 이외에 2명의 승인이 있어야 merge할 수 있습니다
승인을 한 사람이 머지와 브랜치 삭제까지 함께 진행합니다

commit 규칙

커밋은 다음과 같은 형태로 작성합니다

keyword: 설명

예시

git commit -m "feature: 다크모드 라이트모드 기능 개발"

- 코드 컨벤션

컴포넌트 이름: PascalCase 사용
폴더 이름: 소문자 사용
이벤트 핸들러: 'on'으로 시작
함수 및 변수명: camelCase 사용
상수: 모두 대문자로 작성하고 단어 사이에 _ 사용 ex) API_URL
커스컴 훅(Custom Hook): use로 시작 ex) useInput

- 기술스택

Front : React, Typescript, Vite, emotion, Zustand, TanStack Query, Playwright
Back-end : Firebase
버전 및 이슈관리 : Github, Github Issues
협업 툴 : Slack, Notion, Zoom, ZEP
서비스 배포 환경 : Netlify
디자인 : Figma

5. 주제와 목표

저희가 이번에 진행한 프로젝트는 영상공유 SNS 플랫폼 개발 프로젝트입니다. 사용자들이 만든 자신만의 영상 링크 기반(유튜브, Vimeo, Dailymotion, Twitch 등) 플레이 리스트를 공유하고, 구독하여 자신만의 타임 라인을 만들고 네트워킹 할 수 있는 SNS 서비스 구현을 해보는 것을 프로젝트 목표로 설정했습니다. 저희는 이에 그치지 않고 영상 공유에서 조금 더 주제를 좁혀보자는 의견에 따라 '운동 영상'을 공유하는 SNS 플랫폼으로 최종 결정하였습니다.

필수 구현 사항은 다음과 같았습니다.

영상 링크를 사용자로부터 입력 받아 복수의 플레이리스트 작성 기능 개발
RESTful API를 설계하고 API 상태를 관리하며 다양한 UI 구성
- 아래 두 가지 중 선택
  1. 입력 받은 데이터를 전역 상태에만 추가해 UI 구성
  - 로그인 정보도 JSON 데이터로 관리
  - RESTful API를 설계하여 API 통신으로 데이타를 불러와 다양한 UI를 구성하는 방법
공개된 플레이리스트를 구독하여 자신만의 플레이리스트 타임라인 기능 개발
영상에 좋아요, 댓글 기능 구현

React로 프로젝트 개발
- React를 이용하여 프로젝트 내 모델의 타입 시스템을 설계, 구축하여 개발 생산성 및 안정성향상
컴포넌트 아키텍처 모델 설계 필수
- 폴더 구분, 공통 컴포넌트, 함수 컴포넌트, 컨테이너 컴포넌트 등
- 데이터와 UI(뷰) 역할을 적절히 분리하고 적절히 제어할 수 있는 컴포넌트 기반 프론트앤드 웹앱 아키텍처를 설계 및 구현
전역 상태 관리자를 이용해 상태관리 아키텍처를 설계 구현
- 컴포넌트 기반 웹 앱 개발 구조에서 컴포넌트 상태와 전역 상태에 대한 이해를 바탕으로 적절한 상태 관리 아키텍처 설계 및 구현
playwright, cypress 등 활용한 구축
- 코드 기반 테스트에 대한 기술적 이해를 바탕으로 단위 테스트 및 종단 테스트를 적절히 활용한 구축

저희 팀은 아래 3가지 정도를 목표로 설정하여 프로젝트를 진행하였습니다.

1. 다양한 기능 구현해보며 React + TypeScript에 익숙해지기

2. 개발 전반의 프로세스를 이해해가며 진행해보기

3. 프로젝트를 통해 협업을 경험해보기

6. 내가 맡은 파트 소개

- 프로젝트 초기 세팅

폴더구조 및 라이브러리 세팅과 초반 화면 라우팅 설정을 하여 프로젝트 초기 설정을 해보았습니다.

비기너반에서 박영웅 강사님과 함께 수업 및 실습을 하였고, 중간 점검과 특강도 진행해주셔서 초기세팅의 경우 강사님의 블로그를 참고하여 진행하였습니다. 수정되어야 할 부분은 중간점검 이후 보완하였습니다.

React 프로젝트 시작하기 w. Vite

Vite.js 빌드 도구를 사용해 React 프로젝트를 시작하는 방법을 살펴보며, 자바스크립트와 타입스크립트 프로젝트에서의 구성을 구분해 설명합니다.

www.heropy.dev

- 깃허브 위키 세팅

깃허브로 상태 관리 및 협업을 진행하는 것에 익숙하지 않은 팀원들을 위해 이용 가이드를 업로드 하였습니다. 서윤님이 공유해주신 내용을 기반으로 설명 등을 약간 추가하여 저희 팀에 맞도록 수정하며 진행하였고, PR 생성 및 리뷰 방법, 이슈 및 브랜치 생성법, 기타 팀 규칙을 문서화하여 헷갈릴 때 편하게 확인할 수 있게 해보았습니다.

- 공통 컴포넌트

공통 컴포넌트로는 Header, Navbar, Button, Layout, BottomSheet, EmptyInfo 컴포넌트를 만들어 보았습니다.

Header와 Navbar

LongButton과 ShortButton

EmptyInfo: 데이터가 없을 때 보여줄 문구를 컴포넌트로 제작하여 조건에 부합할 때만 화면에 뜨도록 구현했습니다.

ButtomSheet: framer-motion으로 구현

- 플레이리스트 페이지

이 페이지는 내가 생성한 플레이리스트를 모두 볼 수 있는 페이지입니다. + 버튼을 눌러 플레이리스트를 생성하면 이 곳에서 볼 수 있고 각 플레이리스트를 눌러 상세 페이지로 들어가면 동영상 시청 및 정보 수정과 동영상 삭제가 가능한 페이지로 이동합니다.

플레이리스트 제목, 설명, 생성 시간, 썸네일이 기본적으로 나오고 공개/비공개 설정에 따라 썸네일 우측 자물쇠 아이콘이 바뀌도록 설정했습니다. 자물쇠 아이콘 옆 삭제 버튼을 누르면 플레이리스트 삭제도 가능한데요, 삭제 버튼을 누르면 '정말 삭제하시겠습니까 ?' 모달이 뜨고 삭제를 누르면 비로소 삭제가 가능합니다.

또한 카테고리에 따라 버튼을 눌러 필터 기능 역시 가능합니다. 해당 카테고리에 맞는 영상만 띄울 수 있습니다.

- 플레이리스트 상세페이지

플레이리스트 상세 페이지는 영상 시청이 가능하며 내가 만든 플레이리스트를 편집할 수 있는 페이지입니다.

영상 재생 부분과 플레이리스트 제목, 설명, 생성시간, 공개 비공개 설정, 재생 목록을 한 눈에 볼 수 있습니다.

맨 위 부분에서 실제로 동영상 재생이 가능하고 재생 목록에 각 영상 썸네일을 클릭하여 재생하고 싶은 영상을 선택할 수 있습니다. 또한 드래그 앤 드롭 기능을 추가하여 영상 재생 순서를 바꿀 수 있고, 동영상 재생 부분은 재생 목록의 제일 첫 영상으로 설정되게끔 구현하였습니다. 재생목록 옆에는 포함된 영상의 개수를 표시하도록 하였고 이는 삭제 시 자동으로 반영됩니다. 4개 이상의 영상이 포함된 경우 스크롤을 통해 동영상을 확인할 수 있습니다. 각 영상의 오른쪽에 마련된 버튼을 클릭하면 동영상 삭제를 위한 바텀시트가 구현되고, 삭제 버튼을 누르면 영상을 삭제할 수 있습니다.

- 플레이리스트 편집페이지

플레이리스트 상세 페이지에 있는 수정 버튼을 누르면 플레이리스트 편집 페이지로 이동하게 됩니다. 이 페이지로 넘어가게 되면 플레이리스트 제목, 설명, 카테고리, 공개 비공개 설정이 처음에 해당 플레이리스트를 생성했던 데이터 그대로 저장이 되어 수정할 수 있도록 구현했습니다. 또한 변경사항은 곧바로 플레이리스트 상세페이지와 플레이리스트 페이지에 반영됩니다.

플레이리스트 페이지에도 바로 반영된 모습

- 테스트 코드

테스트는 playwright를 사용하여 진행하였습니다. 시간이 넉넉하지 않아 로그인 화면 정도 테스트 코드를 구현해보았습니다.

7. 더 많은 페이지들

팀원분들이 개발하신 더 많은 페이지를 소개합니다.

- 로그인 페이지

파이어베이스를 기반으로 로그인을 구현했고 이메일/비밀번호 로그인이 아닌 구글 로그인을 구현해보았습니다. 파이어베이스 초기세팅과 로그인 부분은 난아님이 모두 맡아 구현해주셨습니다.

- 홈페이지

홈페이지에서는 다른 사용자가 올린 플레이리스트와 내가 올린 공개 플레이리스트를 볼 수 있습니다.

좋아요 기능과 북마크 기능이 있고 댓글 버튼을 누르면 상세페이지로 이동하며 북마크 버튼을 누르면 북마크 페이지에 저장됩니다.

해당 플레이리스트를 생성한 유저의 사진과 닉네임이 보이며 이는 네트워킹 페이지에도 반영됩니다. 이 페이지와 무한 스크롤은 난아님이 구현해주셨고 특히 무한 스크롤 부분은 멘토님께서도 고민한 흔적이 보이신다고 하면서 좋은 피드백을 주셨습니다.

무한 스크롤 구현

- 네트워킹 페이지

이 페이지에서는 영상 시청 및 댓글을 통해 다른 유저와 소통하는 것이 중심 역할입니다. 다른 유저의 플레이리스트를 시청하는 것이기 때문에 플레이리스트 상세페이지와 달리 공개 비공개 설정이나 정보 수정 및 삭제 기능은 넣지 않았습니다. 모션 효과 이외의 댓글 섹션은 난아님이 구현해주셨습니다. 댓글 부분을 누르면 바텀시트가 나와 댓글을 작성할 수 있고 댓글 삭제가 가능합니다.

- 플레이리스트 추가 페이지

플레이리스트 추가 페이지는 영은님이 구현해주셨습니다. 글자수 제한이라던지 툴팁과 같은 부분을 통해 페이지의 완성도를 높였습니다.

- 북마크 페이지

북마크 페이지는 연지님이 작업해주셨습니다. 특히 드롭앤 드롭 기능과 북마크 기능, 토스트 기능은 여러 페이지를 연결하는 것이라 까다로운 작업인데 성공적으로 수행해주셨습니다.

- 프로필 페이지

이 페이지에서는 닉네임과 이메일을 확인할 수 있고 수정 페이지에서는 닉네임과 사진을 수정할 수 있습니다. 영은님이 작업해주셨고 정보 수정 시 바로 다른 페이지에 반영됩니다.

- 오류 페이지

난아님이 구현해주신 페이지로, 잘못된 경로로 접근했을 때 뜨는 404 화면입니다.

8. 리팩토링

리팩토링은 프로젝트가 끝난 뒤 '9/30 - 10/4'에 진행하였습니다. 코드리뷰용 PR을 올리고 멘토님이 코드 리뷰를 하는 식으로 진행하였습니다. 추가 설명이 필요한 부분은 Zoom에서 진행한 실시간 멘토링을 통해 해결하였습니다. 이 과정에서 onError를 사용하는 것과 에러를 throw 했을 때의 장단점과 차이점, 옵셔널 체이닝 사용 시 주의점 그리고 유닛 테스트에 대한 중요성을 알게 되었습니다.

9. 회고

Keep: 이번 프로젝트에서 잘 한 점

- 팀원 모두가 파악해야 하는 정보(버그 발생 정보 등)나 팀에게 도움이 되는 부분(트러블 정리, 깃 정리 등)을 문서화하여 빠르게 공유함으로써 팀 프로젝트의 효율성을 높이려 노력한 점

- 동영상 삭제 기능을 구현할 때 버그가 발생했는데 처음으로 콘솔에 로그를 찍어보면서 디버깅을 해보았고, 결국 기능 구현을 완성해 낸 점

Problem: 문제가 있었거나 개선해야 할 점

- 아무래도 시간이 한정되어 있고 구현해야 할 기능은 많다보니 내용을 학습하고 이해하면서 기능 구현을 한다기 보다는 프로젝트 완성에 조금 더 초점이 맞춰진 것 같아서 개인 학습 부분에서는 아쉽다는 생각이 들었습니다. 다음에는 개인 프로젝트를 진행하면서 프로젝트 완성 보다는 학습 측면에 조금 더 초점을 맞춰 진행하여 실력을 쌓은 뒤 협업 프로젝트를 진행해보고 싶다는 마음이 들었습니다.

- 컴포넌트 재사용성이나 코드 퀄리티에 신경을 많이 못 쓰고 작업해서 같은 페이지를 동료와 작업할 때 서로의 코드를 읽는 것이 쉽지 않아 다음에는 그런 부분까지 고려하여 코드를 작성해보고 싶습니다.

Try: 다음 프로젝트에서 시도해볼 점

- 리팩토링 때 E2E 테스트 뿐만 아니라 유닛 테스트의 중요성도 알게되어 다음 프로젝트에서는 유닛 테스트를 진행해보고 싶습니다.

- 프로젝트 초기 세팅을 조금 더 꼼꼼하게 해서 프로젝트 중반에 초기 세팅 부분에는 수정사항이 없도록 진행해보고 싶습니다.

서비스 기획 특강

dearsuhyun — Mon, 30 Sep 2024 16:00:36 +0900

User Story(사용자 스토리)

Team의 컨센서스(합의)를 맞추기 위해서 필요, 모두가 다른 생각을 할 수 있기 때문

하나의 스프린트에 여러 유저 스토리가 있을 수 있음

IPM (iteration/sprint planning meeting) = weekly meeting, 다음주에 뭐 할지에 대한 회의 ?

유저스토리(예: 사용자는 ~~할 수 있다)에 대한 피드백을 잘 주는 것이 필요

2주 단위로 회의를 하는 것은 프로덕트 팀의 생산성을 측정하면서 스토리 포인트라는 것을 준다 !

프로젝트에 적용해보기, 점수가 5,6 넘어간다면 더 작게 쪼개기 !

테스트

스모크 테스트: PM이 진행, 결제나 회원가입 중 중요한 기능 테스트

회의 방식

- daily scrum (stand up)

어제 진행한 업무, 오늘 진행할 업무, 이슈나 도움이 필요한 사항을 공유

매일 진행한다 (회사마다 월수금 등 주기를 정해서 하는 경우도 있음)

여기서 포인트는 avoid big loss --> 사고가 날 것을 빨리 공유 !!

- IPM(Iteration Planning Meeting)

주간 이슈사항 공유

기획 피드백

카드 훑어보기

- weekly retro

주간 회고

* PRD(product requirement Doc)

제품 개선에 필요한 요구사항을 적어놓은 문서

요구사항, 목표(중요)

* 피그마에서 플로우 체크 등

팀 협업 사례

ex. 사용자 리서치: 디자인적인 엣지가 필요한 프로젝트인가 ? 서비스적인 탄탄함이 필요한 프로젝트인가 ?

Retrospective 회고

회고는 서로를 탓하기 위해서 하는 것이 아니라, 앞으로 더 나은 방향으로 나아가기 위한 회의 !

- 지속할 것(keep)

- 해결할 것(problem)

- 시도할 것(try)

- 4Ls

- sail boats (그림 활용)

< 다음 프로젝트에서 해보기 >

1. 작업에 대한 스토리 포인트 매겨보기

2. 회고해보기

https://trello.com/?campaign=18422680943&adgroup=142052238135&targetid=kwd-3609071462&matchtype=p&network=g&device=c&device_model=&creative=672183050151&keyword=trello&placement=&target=&ds_eid=700000001557344&ds_e1=GOOGLE&gad_source=1&gclid=CjwKCAjw9eO3BhBNEiwAoc0-jbH8nzHGgXz1K4zwNO707P9pVXsYLYgCqN1DlxL4SWd_svlymGUxiRoCi4EQAvD_BwE

Manage Your Team’s Projects From Anywhere | Trello

Task management Use Trello to track, manage, complete, and bring tasks together like the pieces of a puzzle, and make your team’s projects a cohesive success every time.

trello.com

https://www.atlassian.com/ko/software/jira?campaign=19324540289&adgroup=143040571645&targetid=kwd-1419570311017&matchtype=e&network=g&device=c&device_model=&creative=642069034929&keyword=%EC%A7%80%EB%9D%BC%20%EC%82%AC%EC%9A%A9%EB%B2%95&placement=&target=&ds_eid=700000001558501&ds_e1=GOOGLE&gad_source=1&gclid=CjwKCAjw9eO3BhBNEiwAoc0-jV6db50068Q52VMdCa88dzG2ltqp7g6pgqxIKuUZHL7sjcYVQTNvPBoCZKAQAvD_BwE

Jira | 이슈 및 프로젝트 추적 소프트웨어 | Atlassian

Jira에서 불가능을 가능으로 바꾸세요. 애자일 팀을 위한 최고의 프로젝트 관리 도구로 세계적인 수준의 소프트웨어를 계획, 추적 및 릴리스하세요.

www.atlassian.com

https://kinghong.notion.site/2dcd479ea6d341fe9ff383f9f4b8fded

프로젝트 매니지먼트 | Notion

Trello board :

kinghong.notion.site

Beginner 17회차 (8/27) | json-server, HMR (Hot Module Replacement), Tanstack Query

dearsuhyun — Wed, 28 Aug 2024 10:03:45 +0900

json-server

npm i -D json-server concurrently

// json-server랑 vite 서버 동시에 켜기 위해서 concurrently

pakage.json

"scripts": {
    "watch:json-server": "json-server db.json --port 1234",
    // db.json 파일을 실행
    "watch:vite": "vite",
    "dev": "concurrently npm:watch:*",

db.json

데이터 베이스 직접 만들기

{
  "todos": [
    {
      "id": "abc",
      "title": "hello world",
      "done": false
    }
  ],
  "users": [],
  "posts": []
}

main.tsx

// 즉시 실행 함수
(async () => {
  // 기본값 = GET
  const res = await fetch("http://localhost:1234/todos");
  const data = await res.json();
  console.log(data);
})();

npm run dev 하면 콘솔에 이렇게 내가 만든 데이터가 뜬다

요청 메소드

GET 조회 (read) default, body 부분을 첨부할 수 없음 (안하는게 아니라 못함)

POST 생성 (create)
PUT 전체 수정 (update)
PATCH 일부 수정 (json-server에서는 일부 수정으로 사용 ! api 마다 다름)
DELETE 삭제 (delete)

RESTful 하다 --> CRUD의 쓰임에 맞게 api를 사용한다

json-server 사용 실습

POST

// 즉시 실행 함수
(async () => {
  // 기본값 = GET
  const res = await fetch("http://localhost:1234/todos", {
    method: "POST",
    body: JSON.stringify({
      title: "아침 먹기",
      done: true,
    }),
  });
  const data = await res.json();
  console.log(data);
})();

PATCH

GET

// 즉시 실행 함수
(async () => {
  // 기본값 = GET
  const res = await fetch("http://localhost:1234/users", {
    method: "GET",
  });
  const data = await res.json();
  console.log(data);
})();

60세 이하만 가져오고 싶다면 ?

쿼리스트링 사용

range

2~3번째 데이터만 가지고 오고 싶으면 ?

쿼리스트링 사용, start/end

zerobased numbering 사용 (slice method랑 같음)

가져올 데이터의 갯수를 제한하고 싶으면 ?

쿼리스트링 사용, start/limit

pagination

"posts": [
    { "id": "a", "title": "A" },
    { "id": "b", "title": "B" },
    { "id": "c", "title": "C" },
    { "id": "d", "title": "D" },
    { "id": "e", "title": "E" },
    { "id": "f", "title": "F" },
    { "id": "g", "title": "G" },
    { "id": "h", "title": "H" },
    { "id": "i", "title": "I" },
    { "id": "j", "title": "J" },
    { "id": "k", "title": "K" },
    { "id": "l", "title": "L" },
    { "id": "m", "title": "M" },
    { "id": "n", "title": "N" },
    { "id": "o", "title": "O" },
    { "id": "p", "title": "P" },
    { "id": "q", "title": "Q" },
    { "id": "r", "title": "R" },
    { "id": "s", "title": "S" },
    { "id": "t", "title": "T" },
    { "id": "u", "title": "U" },
    { "id": "v", "title": "V" },
    { "id": "w", "title": "W" },
    { "id": "x", "title": "X" },
    { "id": "y", "title": "Y" },
    { "id": "z", "title": "Z" }
  ]

sort

나이순으로 정렬을 하고 싶다면 ?

나이가 어린 순서대로 정렬되어서 출력되는 모습

DELETE

NoSQL

데이터 베이스: {todos, users}
collection: todos, users 각각
document: {id, title, done}
field: todos안에 id, title, done 속성
todos의 스키마: id, title, done

users의 스키마(Schema) = id, name, age !

마지막 배열은 users의 스키마에 맞지 않기 때문에 사용 불가 (NoSQL은 물리적으로는 넣을 수 있지만 넣으면 안됨 !)

특히 POST로 생성할 때 잘 생성해야 함 !

age속성 없는 것은 가능하지만 웬만하면 null로 넣어주기

json에는 undefined랑 함수 못 씀 !

"age": null

// null: 아무것도 아니야, 명시적
// undefined: 아무것도 아니야, 암시적(자동으로 들어가짐)

HMR (Hot Module Replacement)

코드 작성한 것을 저장하면 바로바로 화면에 반영해주는 것

JSON.stringify

문자화 !

zustand 적용

import { create } from "zustand";
import { combine } from "zustand/middleware";

interface User {
  name: string;
  age: number;
  id: string;
}

export const useUsersStore = create(
  combine(
    {
      users: [],
    },
    (set) => {
      return {
        fetchUsers: async () => {
          const res = await fetch("http://localhost:1234/users");
          const users = await res.json();
          set({
            users, // users:users
          });
        },
        // Omit<User, 'id'>: User에서 id를 제외한 타입
        addUser: async (user: Omit<User, "id">) => {
          await fetch("http://localhost:1234/users", {
            method: "POST",
            body: JSON.stringify(user),
          });
          fetchUsers();
        },
        updateUser: async (user: User) => {
          await fetch(`http://localhost:1234/users/${user.id}`, {
            method: "PUT",
            body: JSON.stringify(user),
          })
          // 목록 갱신
          1. fetchUsers();
          2. set(state => ({
            users: state.users.map(u => u.id === updatedUser.id ? updatedUser : u) // OK!
            // users: state.users.map(u => u.id === user.id ? user : u) // OK!
          }))
        },
        deleteUser: async (user: User) => {
          await fetch(`http://localhost:1234/users/${user.id}`, {
            method: "DELETE",
            // 삭제하는거니까 body 필요 없음
          });
          set((state) => ({
            users: state.users.filter(
              (userItem: User) => userItem.id !== user.id
            ),
            // userItem = state.users 배열 내의 각 사용자 객체
            // userItem의 id가 삭제하려는 user의 id와 다른지를 확인
            // 다르면 남겨두고, 같으면 삭제됨
          }));
        },
      };
    }
  )
);
function fetchUsers() {
  throw new Error("Function not implemented.");
}

문자 데이터

""와 ''중 하나만 사용하기

// 데이터 보간
const fruit = '사과'
const paragraph = `나는 ${fruit}를 좋아해요`

Tanstack Query

@tanstack/react-query는 React Query의 최신 버전으로, 비동기 데이터 관리를 효율적으로 할 수 있게 도와주는 라이브러리입니다. React Query는 서버 상태를 관리하는 데 특화된 도구로, 특히 API 요청을 다루는 데 강력한 기능을 제공합니다.

npm i @tanstack/react-query

App.tsx

주요 부분 설명
1. useQuery 훅:
useQuery는 @tanstack/react-query에서 제공하는 훅으로, 서버에서 데이터를 가져오고, 이를 상태로 관리하는 기능을 제공합니다.
훅은 API 요청, 데이터 캐싱, 로딩 및 에러 상태 관리 등 복잡한 비동기 작업을 간편하게 처리할 수 있게 해줍니다.

2. queryKey:
queryKey: ["users", "get"]는 이 쿼리를 고유하게 식별하는 키입니다.
이 키를 통해 React Query는 이 쿼리를 캐싱하고, 상태를 관리하며, 필요시 데이터를 새로 가져옵니다.
복합적인 배열 형태로 사용하여, 특정 리소스와 관련된 여러 쿼리를 명확하게 구분할 수 있습니다.

3. queryFn:
queryFn은 데이터를 가져오는 비동기 함수입니다. 이 함수는 실제로 서버에 요청을 보내고, 결과를 JSON 형태로 변환하여 반환합니다.
여기서는 fetch API를 사용해 GET 요청을 보내고, 사용자 데이터를 받아옵니다.

4. staleTime:
staleTime: 1000 * 10은 데이터가 신선한 상태로 간주되는 시간을 정의합니다. 이 경우 10초(1000ms * 10) 동안은 데이터를 다시 가져오지 않고 캐시된 데이터를 사용합니다.
이 시간 동안 동일한 쿼리가 다시 호출되면, 네트워크 요청 없이 캐시된 데이터를 바로 사용할 수 있습니다.

main.tsx

* 화상 회의 자주하는 게 좋음

* 스크럼 회의
목표 설정 --> 문서화 (기본적으로 지켜줘야 함, 일정 관리를 위해)

* 프로젝트에서 zustand 사용법
강의 3번째 시간에 설명해주시니 그거 보고 설정하기

code . -r
// Visual Studio Code를 현재 디렉토리에서 실행하는 명령어
code .
// 현재 경로 폴더를 새로운 vs 코드 창으로 열어주세요

mkdir vite-project2
// vite-project2라는 이름의 새 디렉토리를 만듭니다

cd vite-project2
//vite-project2 디렉토리로 이동합니다.

npm create vite@latest .
// 현재 디렉토리에 최신 버전의 Vite 프로젝트를 생성합니다.

https://github.com/typicode/json-server

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Get a full fake REST API with zero coding in less than 30 seconds (seriously) - typicode/json-server

github.com

Beginner 16회차 (8/26) | 개발 요구사항 정리, 렉시컬 스코프

dearsuhyun — Tue, 27 Aug 2024 23:39:17 +0900

개발 요구사항 정리

무작정 시작하는 게 아니라 요구사항 정리를 먼저 !

요구사항 정리: 프로젝트가 완성되기 위해서, 개발자가 구현해야 하는 기능을 정리한 것

1. 프로젝트(서비스) 기획

어떤 기능부터 개발할지는 상황별로 너무 달라서 딱 뭐 부터 ! 할 수는 없음

- 할 일 목록을 출력하는 서비스

- 할 일을 추가하는 기능

버튼을 클릭했을 때 추가되는 기능
엔터키를 눌렀을 때 추가되는 기능

- 할 일 목록을 출력하는 기능

- 할 일 항목을 수정하는 기능

- 할 일 항목을 삭제하는 기능

- 할 일 목록을 재정렬하는 기능

2. 핵심 기술

(main 기술, 모르면 프로젝트 투입이 불가능)

- Next.js(SSR)

- SPA(CSR)

- RESTful API

- Vite.js

npm create vite@latest

ESLint, Prettier 설정

- Typescript

- React

- vercel

- Vercel Serverless Functions

- Supabase(PostgreSQL)

- SEO

3. 세부 기술

(sub 기술, 몰라도 바로 배워서 프로젝트 투입 가능)

- ESLint, Prettier

- SCSS

- Tailwind CSS

- Axios

- React Router

- Framer Motion

- React Query

- Zustand

- Day.js

- Sortable.js

4. 개발 기간(마일스톤)

2024.09.01 - 2024.12.31

5. 와이어프레임

https://www.google.com/url?sa=i&url=https%3A%2F%2Fmiro.com%2Fko%2Ftemplates%2Flow-fidelity-wireframes%2F&psig=AOvVaw1flFzkVJ03O8-CysDtUlHb&ust=1724726065720000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCOC1y73PkYgDFQAAAAAdAAAAABAg

* 개발자 입장에서

1) 요구사항 정의서 작성

2) 기능 개발

3) 테스트(단위, E2E, QA)

4) 배포

5) 리팩토링 (성능 최적화, 유지보수)

+ 기획 문서 작성

+ 시안 디자인

+ 기타 잡무

렉시컬 스코프

- 스코프 = 범위, context

함수의 렉시컬 스코프(Lexical Scope)란, 정적 스코프(Static Scope)라고도 하며, 함수를 선언한 위치에서 유효하게 접근 가능한 범위(유효범위)를 말합니다.
간단하게는 전역(Global)을 포함한 선언된 함수의 상위 함수 범위로 이해할 수 있습니다.

다음 예제에서, fnC 함수는 렉시컬 스코프의 window, a, b, c 객체를 모두 참조할 수 있습니다.
fnX 함수는 fnC 함수의 상위 함수가 아니므로, 접근 가능하지 않습니다.

const a = {
  name: 'A',
  fnA() {
    const b = {
      name: 'B',
      fnB() {
        const c = {
          name: 'C',
          fnC() {
            console.log(window) // window 객체
            console.log(a) // a 객체
            console.log(b) // b 객체
            console.log(c) // c 객체
            console.log(d) // Error: d is not defined
          }
        }
        return c
      }
    }
    return b
  },
  fnX() {
    const d = {
      name: 'D'
    }
  }
}
a.fnA().fnB().fnC()

* 쿼리(검색)
프론트엔드 --> 네트워크 기준에서 데이터를 요청하는 것
react qury: 요청과 응답, 네트워크 통신을 어떻게 다룰것인가 ? FE --> BE
백엔드 --> 데이터베이스(DB)에서 검색하는 것(특정 항목)
BE -----(query)-----> DB

* 문서를 읽을 때 모르는 단어, 구절, 문장이 나오면 그것에 대해서 파고들어야 함
ex) 조직 ? 완벽하게는 아니지만 적어도 조직이 무엇을 의미하는지는 알고 다음으로 넘어가야 함

* SEO 적용 --> 검색하면 나올 페이지, 누구나 다 쓰는 페이지
(<-> 보안이 필요한 페이지(ex. setting의 my page 등))

https://www.heropy.dev/p/N6phSt

JS 함수 핵심 패턴

자바스크립트 함수에 대한 기본적인 사용 방법부터 관련 용어, 고급 기법 등의 관련된 다양한 함수 패턴과 여러 개념을 살펴봅니다.

www.heropy.dev

Beginner 15회차 (8/21) | todo 리스트에 필터 기능 추가 실습, clsx 라이브러리로 버튼에 여러 스타일을 동시에 적용해보기, subscribeWithSelector 미들웨어 사용, if와 switch 조건문, 불변성과 가변성, React-Query 소개

dearsuhyun — Fri, 23 Aug 2024 10:59:34 +0900

todo 리스트에 필터 기능 추가 실습

전체 원본 todo 리스트는 가지고 있고, 필터링을 할 때 완료 전/완료 후 배열을 다시 만들어서 띄워줘야 됨

<store>

버튼을 누르면 value 바뀌도록 액션 설정

버튼을 누르면 각 버튼에 따라 active가 붙는 화면

clsx 라이브러리

클래스를 여러 개 적용하고 싶을 때 !

npm i clsx

기존 코드

<button
  className={filterStatus === filter.value ? styles.active : ''}
  key={filter.value}
  onClick={() => setFilterStatus(filter.value)}>
  {filter.text}
</button>

clsx 적용 코드

<button
  className={clsx(
    styles.btn,
    filterStatus === filter.value && styles.active
  )}

.btn {
  border: none;
  padding: 10px;
}
.active {
  background-color: royalblue;
  color: white;
}

subscribeWithSelector 미들웨어 사용

subscribeWithSelector는 zustand에서 상태의 특정 부분에 대해서만 구독(subscribe)할 수 있게 해주는 미들웨어입니다.

즉, 상태 객체의 전체 변경을 감지하는 대신, 상태의 특정 부분이 변경될 때만 반응할 수 있습니다. 이는 성능 최적화에 도움이 됩니다.

import { combine, subscribeWithSelector } from 'zustand/middleware'

예제

count가 늘어나면 double도 늘어나도록 만들기 위해서
밑의 예제처럼 직접 지정하는 것이 아니라 subscribeWithSelector 이용 !
특정한 상태를 구독해서 count가 늘어나면 double도 늘어나도록 만들기

useABCStore.subscribe

count 바뀌면 double 처리 됨 !

// useABCStore.subscribe(선택자, 콜백)
useABCStore.subscribe(
  (state) => state.count, // 선택자
  (count) => useABCStore.setState(() => ({ double: count * 2 }))
);

zustand 이해

기본 사용법

combine 사용

프로젝트에 적용하기

if와 switch 조건문
if 조건문 >= switch 조건문
switch -> if 무조건 가능 but if -> switch에는 불가능한 경우가 있음
// if문
if (filterStatus === 'all') return true // 필터링 안함
if (filterStatus === 'todo') return !todo.done
if (filterStatus === 'done') return todo.done

// switch문
switch (filterStatus) {
   case 'todo':
     return !todo.done
   case 'done':
     return todo.done
   default:
    return true
}

목록 가지고 올 때 원본 todos 대신 filteredTodos 사용 !

<Main>

const todos = useTodosStore(state => state.filteredTodos)

<store>

불변성과 가변성

원시형 데이터

생긴게 같으면 같은 데이터 !

'===' 일치연산자는 양 옆 피연산자의 메모리 주소를 비교하는 것 !

a ---> M1
b ---> M1
==> 서로 같은 메모리 주소를 바라보고 있으므로 true !

참조형 데이터: 객체, 배열, 함수

생긴게 같아도 다른 데이터일 수 있음 !

생성할 때 마다 새로운 메모리에 할당
a ---> M1
B ---> M2
==> 서로 다른 메모리를 바라보고 있으므로 false !

데이터를 만드는 방법

1. 생성자 함수(Constructor) 방식

2. 리터럴(Literal) 방식

{} [] '' --> 기호를 ~~ 리터럴이라고 부름

프로젝트 예제

todos에 todos를 그대로 넣으면 바라보는 메모리 주소가 같아서 todos가 변경되었다고 인식하지 않음

...todos를 쓰면 todos가 바라보는 배열(m1)과 [...todos]가 바라보는 배열(m9)이 다르기 때문에 todos가 변경되었다고 인식한다.

배열 리터럴 방식을 사용해서 [...todos]를 쓰면 ! 메모리 주소 달라짐

--> 안 쪽의 아이템의 메모리 주소는 같지만 겉 껍데기 메모리 주소만 다르게 할당해줌으로써 바뀌었다고 인식시켜주는 것 !

useTodosStore.subscribe(
  state => state.filterStatus,
  () => {
    const todos = useTodosStore.getState().todos
    useTodosStore.setState(() => ({ todos: [...todos] }))
  }
)

// [...todos]라는 배열 데이터가 새로 만들어지는 것임
// ...todos를 쓰면 todos가 바라보는 배열(m1)과 [...todos]가 바라보는 배열(m9)이 다르기 때문에 todos가 변경되었다고 인식한다.
// 얕은 복사

React-Query (--> TanStack Query)

기능

1. 캐싱(caching) - 데이터 저장

2. 낙관적 업데이트

3. 로딩 처리

4. 패칭(fetching)

npm i @tanstack/react-query

리액트 이외의 라이브러리(Vue, Svelte 등)도 지원하겠다 ! (React-Query --> Tanstack Query 이름 변경)

데이터 캐싱

Tanstack Query를 사용해서 데이터를 가져올 때는 항상 쿼리 키(Query Key)를 지정한다

쿼리 키는 캐시된 데이터와 비교해서 그 데이터를 가져올지 새로운 데이터를 가져올지 결정하는 기준이 된다.

캐시된 데이터가 없을 때

- miss: 캐시된 데이터가 없다는 의미

- cached: 캐시에 저장하는 행위

출처: 박영웅 강사님 블로그 https://www.heropy.dev/p/HZaKIE

캐시된 데이터가 있을 때

- hit: 캐시 데이터가 있을 때

출처: 박영웅 강사님 블로그 https://www.heropy.dev/p/HZaKIE

데이터의 신선도(유통기한)

TanStack Query는 캐시한 데이터를 신선(Fresh)하거나 상한(Stale) 상태로 구분해 관리함

캐시된 데이터가 신선하다면 캐시된 데이터를 사용하고, 만약 데이터가 상했다면 서버에 다시 요청해 신선한(새로운) 데이터를 가져온다 !

시간 표기법
1s = 1000
10s = 1000 * 10
24h = 1000 * 60 * 60 * 24
30d = 1000 * 60 * 60 * 24 * 30

* 데이터를 기준으로 사고해야 함 (화면의 UI를 데이터로 구현하기)

* 기술을 배우기 전에 공식문서를 먼저 훑어보고 !! (예습 개념) 그 다음 강의, 블로그 보기
강의부터 보면 이해도가 떨어질 수 밖에 없음

* 프로젝트를 복습하는 방법 = 프로젝트 처음부터 다시 만들어보는 것 (복습 개념)

* 코드를 작성할 때는 누군가가 읽었을 때 문제가 없도록 ! 독자를 고려하기 (hack 사용 금지 ,,)

https://tanstack.com/query/latest

TanStack Query

Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much

tanstack.com

https://www.heropy.dev/p/HZaKIE

TanStack Query(React Query) 핵심 정리

TanStack Query는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리로, React Query라는 이름으로 시작했지만, v4부터 Vue나 Svelte 등의 다른

www.heropy.dev

https://www.heropy.dev/p/n74Tgc

Zustand 핵심 정리

Zustand(주스탠드)는 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리입니다.

www.heropy.dev

https://reactrouter.com/en/main

Home v6.26.1 | React Router

reactrouter.com

Recap | Beginner Live Class Recap 4회차

dearsuhyun — Thu, 22 Aug 2024 19:28:16 +0900

4-1. async와 await

callback hell & Promise hell을 개선하기 위해 사용

/* Callback Hell */
getData (function (x) {
  getMoreData (x, function (y) {
    getMoreData (y, function (z) {
      ...
    });
  });
});

/* Promise Hell */
fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => fetch(`https://example.com/api/${data.id}`))
  .then(response => response.json())
  .then(data => fetch(`https://example.com/api/${data.id}/details`))
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

async

function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환한다

함수를 정의할 때 async를 함수 앞에 붙이면, “이 함수는 비동기적인 함수이고 Promise를 반환한다”라고 선언하는 것 !

반환 값이 Promise 생성 함수가 아니어도 반환되는 값을 Promise 객체에 넣어주는 것이다.

await란 ?

--> promise가 처리될 때 까지 함수 실행을 기다린다(promise가 처리되면 그 결과와 함께 실행이 재개됨)

프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다 !

--> await는 async 함수 안에서만 동작한다 (일반 함수에는 사용 불가)

Promise를 반환하는 함수 앞에 await를 붙이면, 해당 Promise의 상태가 바뀔 때까지 코드가 기다린다.

즉 Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는 것이다.

예제

함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개된다.

이때 프라미스 객체의 result 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력된다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f()

await는 최상위 레벨 코드에서 작동하지 않는다

최상위 코드: 함수나 블록 내부에 포함되지 않은, 스크립트의 가장 바깥쪽에 있는 코드들

// 최상위 레벨 코드에선 문법 에러가 발생함
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

하지만 async 함수로 코드를 감싸면 최상위 레벨 코드에도 await를 사용할 수 있다

(async function func1() {
    const res = await fetch(url); // 요청을 기다림
    const data = await res.json(); // 응답을 JSON으로 파싱
    console.log(data);
})();

기본적으로 await는 async 함수 내에서 작동하지만,

자바스크립트의 ES2022(ECMAScript 2022) 버전부터는 모듈에서 최상위 await를 사용할 수 있다.

즉, import 또는 export 키워드를 사용하여 정의된 모듈 파일에서는 async 함수 없이도 최상위에서 await를 사용할 수 있다.

// Top Level에선 async funciton 정의없이 곧바로 await 키워드 사용이 가능하다
const res = await fetch(url); // 요청을 기다림
const data = await res.json(); // 응답을 JSON으로 파싱
console.log(data);
출처: https://inpa.tistory.com/entry/JS- -비동기처리-async-await [Inpa Dev  ‍ :티스토리]

주의 !
거의 대부분의 프로젝트에서 번들과 기타 빌드 과정을 거치기 때문에 await만 사용하는 경우,
해당 코드가 온전한 자바스크립트 모듈로 동작하지 않을 수 있다 !
그래서 대부분은 async 함수 안에서 사용하도록 명시하는 것이 안전하다 !
그럼에도 유용할 수 있다고 볼 수 있는 경우는 HTML에 자바스크립트 모듈을 직접 연결해서 사용하는 경우가 있다.
<script type="module" src="..." defer>

4-2. URL 구성 요소

출처 : 박영웅 강사님 블로그 https://www.heropy.dev/p/QOWqjV

1. https://

• 프로토콜(Protocol):

https://는 웹 브라우저와 서버가 서로 데이터를 주고받을 때 사용하는 방법을 나타낸다.

여기서 https는 보안이 강화된 프로토콜로, 데이터를 암호화해서 안전하게 전송한다. http://는 보안이 없는 일반적인 프로토콜이다.

2. www.heropy.dev

• 도메인 이름(Domain Name):

www: 웹 사이트의 서브도메인(subdomain)입니다. 일반적으로 웹사이트의 기본 주소를 가리킨다.

heropy: 이 부분은 웹사이트의 이름. 사람들이 쉽게 기억할 수 있는 주소로, heropy는 이 웹사이트의 이름.

.dev: 최상위 도메인(TLD)이라고 하며, .com, .org, .net처럼 도메인 이름의 마지막 부분이다.

.dev는 개발자나 개발 관련 사이트에서 많이 사용한다.

전체 호스트 이름: www.heropy.dev는 이 웹사이트가 어디에 있는지를 나타내는 주소.

웹 브라우저가 이 주소를 보고 해당 사이트에 접속하게 됩니다.

3. /p/QOWqjV/

• 경로(Path):

이 부분은 웹 서버에서 특정 페이지나 파일의 위치를 나타낸다.

/p/QOWqjV/는 서버 내에서 특정 페이지나 자원을 찾기 위한 경로. 폴더나 파일의 위치를 지정한다고 생각하면 된다.

4. ?key=value&a=12&b=34

• 쿼리 문자열(Query String):

? 다음에 오는 부분이 쿼리 문자열입니다.

여기에는 서버에 추가적으로 전달하고 싶은 데이터를 담을 수 있습니다.

예를 들어, key=value, a=12, b=34와 같이 key=value 형식으로 데이터가 전달됩니다.

여러 개의 데이터는 &로 구분됩니다.

5. #h1-title

• 프래그먼트(또는 해시, Fragment/Hash):

# 뒤에 오는 부분은 웹 페이지 내의 특정 위치로 이동하게 해줍니다.

예를 들어, #h1-title은 페이지 내에서 id가 h1-title인 위치로 스크롤을 이동하게 합니다.

4-3. 메소드 체이닝(Method Chaining)

객체지향 프로그래밍에서 객체의 메소드를 연속적으로 호출할 수 있는 패턴

하나의 메소드가 호출된 후, 그 결과로 반환된 객체에 다시 메소드를 호출하는 방식으로 동작한다.

가능 예시

const number = [1, 2, 3]
number.forEach()
// number는 변수가 참조하는 이름일 뿐 
// [1, 2, 3].forEach()와 같음

function number() {
  return [1, 2, 3]
}
number().forEach()
// number 함수가 호출되면 그 자리에 [1, 2, 3]이 남음
// 항상 함수 호출되는 자리에는 어떠한 데이터가 남아있을까를 생각해야 함

const number = [1, 2, 3]
number().map(n => n).forEach()

// 1. number().map(n => n).forEach()
// 2. [1, 2, 3].map(n=>n).forEach()
// 3. [1, 2, 3].forEach()

불가능 예시

[1, 2, 3].forEach().map(n=>n)

// undefined.map(n => n)
// forEach()는 undefined를 반환하므로 undefined에 대해 map 메소드를 호출하려고 하면 오류 발생
// undefined는 map 메소드를 가지지 않기 때문에 뒤에 map 체이닝될 수 없음

cf.

forEach()

• 역할: 배열의 각 요소에 대해 주어진 함수를 실행합니다.
• 반환값: undefined

map()
• 역할: 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
• 반환값: 변형된 새로운 배열

4-4. instanceof 연산자

자바스크립트에서 객체가 특정 클래스나 생성자 함수에 의해 생성된 인스턴스인지 확인할 때 사용하는 연산자

왼쪽에 있는 객체가 오른쪽에 있는 클래스나 생성자 함수의 인스턴스인지 여부를 true 또는 false로 반환한다.

object instanceof Constructor(생성자함수 또는 클래스)

예제

class Car {
  constructor(model) {
    this.model = model;
  }
}

let myCar = new Car("Toyota");

console.log(myCar instanceof Car); // true

instanceof의 동작 방식

instanceof는 객체의 프로토타입 체인을 따라가면서, 해당 객체가 특정 생성자 함수 또는 클래스의 인스턴스인지 확인합니다. 즉, 객체의 프로토타입 체인이 생성자 함수의 prototype 속성을 포함하고 있는지를 확인하는 것입니다.

function Animal() {}
function Dog() {}

Dog.prototype = Object.create(Animal.prototype);

let myDog = new Dog();

console.log(myDog instanceof Dog);    // true
console.log(myDog instanceof Animal); // true

1. 객체와 프로토타입

객체(Object): 자바스크립트에서 모든 것은 객체로 이루어져 있습니다. 객체는 여러 속성(프로퍼티)과 메서드(함수)를 가질 수 있습니다.
프로토타입(Prototype): 자바스크립트의 모든 객체는 또 다른 객체인 “프로토타입”을 가지고 있습니다. 이 프로토타입 객체는 해당 객체가 사용할 수 있는 속성이나 메서드를 상속(물려받음)하는 역할을 합니다.

2. 프로토타입 체인이란?

프로토타입 체인은 여러 객체들이 서로 연결된 “연쇄 구조”를 의미합니다. 특정 객체에서 속성이나 메서드를 찾을 때, 자바스크립트는 그 객체에 해당 속성이 있는지 먼저 찾습니다. 만약 해당 속성이 없다면, 그 객체의 프로토타입에서 다시 찾아보는 과정을 거칩니다. 이 과정을 계속 반복해, 최상위 프로토타입 객체인 Object.prototype에 도달할 때까지 찾습니다.

이 과정에서 연결된 객체들의 연쇄 구조가 바로 프로토타입 체인입니다.
let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello!");
  }
};

let student = {
  study: function() {
    console.log("Studying...");
  }
};

// student의 프로토타입을 person으로 설정
student.__proto__ = person;

console.log(student.name); // "Alice"
student.greet();           // "Hello!"
student.study();           // "Studying..."
student 객체는 study라는 메서드만 가지고 있지만 student.__proto__를 person 객체로 설정했기 때문에, student는 이제 person의 속성(name)과 메서드(greet)를 사용할 수 있습니다.

3. 프로토타입 체인의 끝

모든 객체의 프로토타입 체인은 최종적으로 Object.prototype 객체에서 끝납니다. Object.prototype은 모든 객체의 최상위 프로토타입이므로, 이 객체에서 찾을 수 없는 속성이나 메서드는 정의되어 있지 않은 것으로 간주됩니다.
console.log(student.toString()); // "[object Object]"
여기서 toString() 메서드는 student 객체나 person 객체에 정의되어 있지 않지만, 자바스크립트는 계속 프로토타입 체인을 따라 올라가 Object.prototype.toString 메서드를 찾아서 실행합니다.

- Array와 instanceof

arr는 배열(Array)이므로 arr instanceof Array는 true를 반환합니다.

arr는 자바스크립트의 모든 배열이 사실 객체(Object)이기도 하기 때문에 arr instanceof Object도 true를 반환합니다.

let arr = [];

console.log(arr instanceof Array);    // true
console.log(arr instanceof Object);   // true

배열이 객체라는 의미

자바스크립트에서 배열도 사실 객체입니다. 배열은 객체처럼 키-값 쌍을 사용해 데이터를 저장하지만, 특별히 인덱스(숫자 키)를 사용해 데이터를 관리합니다.
let fruits = ["Apple", "Banana", "Cherry"];
let fruits = {
  0: "Apple",
  1: "Banana",
  2: "Cherry"
};
배열의 각 요소는 숫자(0, 1, 2…)를 키로 가지는 객체의 속성으로 저장됩니다. 그래서 자바스크립트에서는 배열도 객체의 일종이라고 할 수 있는 것입니다.

주의) 다른 스코프 (예: iframe 등에서)에서 생성된 객체에 대해 instanceof를 사용할 때는 예상치 못한 결과가 나올 수 있습니다. 이는 자바스크립트의 각 실행 환경(스코프)이 자체적인 내장 객체(예: Array, Object 등)를 가지고 있기 때문입니다.

let iframe = document.createElement('iframe');
document.body.appendChild(iframe);

let arr = new iframe.contentWindow.Array();

console.log(arr instanceof Array); // false
console.log(arr instanceof iframe.contentWindow.Array); // true

• arr1은 메인 페이지의 Array 생성자로부터 생성된 배열입니다.

• arr2는 iframe 내부의 Array 생성자로부터 생성된 배열입니다.

• arr1 instanceof Array는 true를 반환합니다. 이는 arr1이 메인 페이지의 Array 생성자로부터 생성되었기 때문입니다.

• 그러나 arr2 instanceof Array는 false를 반환합니다. 이는 arr2가 iframe 내부의 Array 생성자로부터 생성되었기 때문에, 메인 페이지의 Array와는 다른 생성자이기 때문입니다.

다른 스코프란 자바스크립트에서 실행 환경이나 컨텍스트가 서로 다른 경우를 의미합니다. 예를 들어, 웹 페이지에서 실행되는 자바스크립트 코드와 그 안에 삽입된 iframe 내부에서 실행되는 자바스크립트 코드는 서로 다른 스코프에서 실행됩니다. 각 스코프는 자바스크립트의 내장 객체(예: Array, Object, Function 등)를 자체적으로 관리합니다.

스코프란?
스코프는 변수가 정의되고 접근할 수 있는 범위를 의미합니다. 예를 들어, 함수 안에서 선언된 변수는 그 함수 내에서만 접근할 수 있는 것처럼, 특정 실행 환경에서 실행되는 코드들은 그 환경의 스코프를 따릅니다.

iframe과 다른 스코프
iframe은 HTML 문서 안에 또 다른 HTML 문서를 삽입할 수 있는 요소입니다. iframe은 독립적인 문서로 취급되며, 해당 iframe 내부에서 실행되는 자바스크립트 코드도 메인 페이지와는 독립적인 스코프를 가집니다.

예를 들어, 메인 페이지에서 사용하는 Array 객체와 iframe 내부에서 사용하는 Array 객체는 서로 다른 Array 생성자를 참조할 수 있습니다. 이는 각각의 스코프가 자체적으로 내장 객체를 관리하기 때문입니다.

https://ko.javascript.info/async-await

async와 await

ko.javascript.info

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await

자바스크립트 Async/Await 개념 & 문법 정복

자바스크립트 비동기 처리 3가지 방식 자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티 작업을 하기 위해선 비동기 처리 방식이 자주 쓰인다. 비동기 처리는 백그라운드로 동작되기

inpa.tistory.com

Recap | Beginner Live Class Recap 2,3회차

dearsuhyun — Thu, 22 Aug 2024 13:53:43 +0900

2-1. 리액트에서는 단일요소가 return 되어야 한다

'단일 요소여야 한다'

return 문에서 JSX를 반환할 때, 반드시 하나의 최상위 요소로 감싸야 한다

리액트 컴포넌트는 JSX를 반환할 때, 여러 요소를 반환할 수 있지만, 이 요소들을 하나의 부모 요소로 감싸야 한다.

그렇지 않으면 위와 같은 에러가 발생한다.

해결 방법

1) 단일 부모 요소로 감싸기

function MyComponent() {
  return (
    <div>
      <h1>Hello</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

2) React Fragement 사용

부모 요소가 필요 없지만 여전히 다수의 요소를 반환해야 한다면, React.Fragment 또는 빈 태그(<>...</>)를 사용할 수 있다.

function MyComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

2-2. 구조분해할당 이해하기

구조 분해 할당(Destructuring Assignment)

자바스크립트에서 배열이나 객체의 값을 간편하게 변수에 할당하는 방법

1) 배열 구조분해할당

[b, c, d] = numbers는 numbers 배열의 첫 번째, 두 번째, 세 번째 값을 각각 b, c, d에 할당

--> 인덱스를 일일이 지정할 필요 없이, 배열의 값을 간편하게 꺼내어 사용할 수 있음

const numbers = [1, 2, 3, 4];

// 기존 방식
const b = numbers[0];
const c = numbers[1];
const d = numbers[2];

// 구조 분해 할당 방식
const [b, c, d] = numbers;

console.log(b); // 1
console.log(c); // 2
console.log(d); // 3

2) 객체 구조분해할당

{ name } = users는 users 객체에서 name 속성의 값을 변수 name에 할당

--> 객체에서 원하는 속성을 간편하게 꺼내어 사용할 수 있음

const users = {
  name: "Mike",
  age: 30
};

// 기존 방식
// const name = users.name;

// 구조 분해 할당 방식
const { name } = users;

console.log(name); // "Mike"

3) 구조분해할당 기능

- 기본값 할당 지정

이 코드는 users 객체에서 email 속성을 찾는다.

만약 users 객체에 email 속성이 없거나 undefined일 경우, "suhyun8667@naver.com"이라는 기본값이 대신 사용된다.

이 기본값은 email이라는 속성이 없거나 정의되지 않았을 때 안전하게 사용할 값을 미리 지정하는 데 유용하다.

만약 users 객체에 email 속성이 있다면, 그 값이 email 변수에 할당된다.

const { email = "suhyun8667@naver.com" } = users;
console.log(email);

• 만약 users = {}라면:
email 변수는 "suhyun8667@naver.com" 값을 가 지고

• 만약 users = { email: "anotheremail@example.com" }라면:
email 변수는 "anotheremail@example.com" 값을 가진다

- 변수 이름 변경

이 코드는 users 객체에서 age 속성을 찾아서 그 값을 userAge라는 새로운 변수에 할당한다.

즉, age라는 속성을 userAge라는 이름으로 바꾸어서 사용할 수 있게 해주는 것 !

변수 이름이 이미 다른 부분에서 사용되고 있거나, 더 의미 있는 이름으로 바꿔서 사용하고 싶을 때 유용하다.

const { age: userAge } = users;
console.log(userAge);

3-1. Typescript에서 type과 interface의 차이점

1. 기본적인 차이점

• interface: 주로 객체의 구조를 정의하는 데 사용됩니다. 객체가 가져야 할 속성의 이름과 타입을 명확히 정의합니다.

• type: 더 일반적인 타입을 정의할 때 사용됩니다. 객체뿐만 아니라 기본 타입(예: 문자열, 숫자)이나 유니언 타입, 튜플 등을 정의할 수 있습니다.

2. 코드 분석

export interface ICountValue {
  a: number;
  b: string;
}

ICountValue라는 인터페이스를 정의하여, a라는 숫자 속성과 b라는 문자열 속성을 가진 객체 타입을 만들었다

이 인터페이스는 주로 객체의 구조를 정의할 때 사용되며, 객체의 필수 속성과 타입을 명확하게 지정한다.

export type CountValue = number;

CountValue라는 타입을 정의하여, 숫자 타입의 별칭을 만들었다. 즉, CountValue는 number와 같은 의미 !

type은 인터페이스처럼 객체의 구조뿐만 아니라, 기본 타입(number, string 등), 유니언 타입, 교차 타입 등을 정의할 수 있다

3. 구체적인 차이점

확장성

• 인터페이스는 확장이 가능하다. 즉, 다른 인터페이스를 상속받아 확장 가능 !

interface IBase {
  a: number;
}

interface IExtended extends IBase {
  b: string;
}

• 타입은 교차 타입(Intersection Types)을 통해 확장 가능

type Base = {
  a: number;
};

type Extended = Base & {
  b: string;
};

유니언 타입 정의

• type을 사용하면 유니언 타입을 정의할 수 있습니다. 인터페이스는 유니언 타입 직접적으로 표현하지 못함

type StringOrNumber = string | number;
// string or number

중복 선언 가능성

• 인터페이스는 같은 이름으로 여러 번 선언할 수 있으며, 선언된 내용은 자동으로 병합된다.

--> “선언 병합(Declaration Merging)”

타입은 같은 이름으로 중복 선언할 수 없으며, 중복 선언 시 오류가 발생한다.

interface IUser {
  name: string;
}

interface IUser {
  age: number;
}

const user: IUser = {
  name: "Alice",
  age: 30,
};

4. 언제 무엇을 사용할까?

interface: 객체의 구조를 정의하고, 이 구조를 상속받거나 확장할 필요가 있는 경우 인터페이스를 사용하는 것이 좋습니다. 특히 클래스 기반의 구조에서 사용하기 적합합니다.

type: 기본 타입의 별칭을 만들거나, 유니언 타입, 교차 타입, 튜플 등을 정의할 때 사용합니다. 복잡한 타입 조합이 필요한 경우 유용합니다.

3-2. 비동기적으로 데이터 요청하기

async function fetchData() {
  const responseObject = await fetch('https://api.heropy.dev/v0/users');
  const data = await responseObject.json(); 

  console.log(data);
}

fetchData(); // 함수 호출

1. fetchData 함수가 호출된다.

• async 키워드로 정의된 이 함수는 내부에서 await 키워드를 사용하여 비동기 작업을 처리한다.

비동기 함수는 기본적으로 Promise를 반환한다.

2. API 요청을 보낸다 (fetch).

• fetch('https://api.heropy.dev/v0/users')는 API로 HTTP 요청을 보내는 비동기 작업이다. 이 작업은 사용자 데이터를 가져오기 위한 요청을 수행한다.

• 이 요청은 비동기적으로 수행되며, 네트워크 요청이 완료될 때까지 코드가 멈추지 않고 다른 작업을 수행할 수 있다.

3. await로 응답을 기다린다.

• await 키워드를 사용하면, fetch 요청이 완료될 때까지 코드 실행이 일시 정지된다.

• fetch가 완료되면 서버에서 응답이 도착하고, 이 응답은 responseObject 변수에 저장된다.

4. JSON 데이터로 변환한다 (responseObject.json()).

• responseObject.json()은 응답 본문을 JSON 형태로 변환하는 또 다른 비동기 작업이다.

• await 키워드를 사용하여 JSON 변환이 완료될 때까지 기다리고, 변환된 데이터는 data 변수에 저장된다.

5. 콘솔에 데이터를 출력한다.

• 변환된 JSON 데이터가 data 변수에 저장된 후, 이 데이터를 console.log(data)를 통해 콘솔에 출력한다.

6. 함수를 호출하여 실행한다.

• 마지막으로 fetchData();를 호출하여 이 비동기 함수가 실행된다.

3-3. 화면에 user 목록 띄우기 예제

const [users, setUsers] = useState([])
  // 여기에서 빈 배열에는 무엇이 들어가 있을지 알 수가 없음
  // 즉 이 배열데이터가 어떤 타입인지 모르는 상태
  // ts는 쌩으로 빈 배열이라고 판단하고 이 안에는 아무것도 들어갈 수 없다고 판단함
  // never[]
  // 이렇게만 해주면 밑에 jsx 문법 부분에서 {user.name}에 오류 발생
  // user는 never이기 때문에 name이라는 속성이 존재 하지 않아서 오류가 발생함
  
  const [users, setUsers] = useState<User[]>([])
  // 따라서 Users의 배열이라고 type을 직접 명시해줘야 함

const [count, setCount] = useState(31)
  // 이 부분의 경우는 초기 값이 이미 number이기 때문에 type 추론 가능, 따로 명시 안해줘도 됨

3-4. 함수 호이스팅

함수 호이스팅은 함수 선언식일 때만 가능 !

// 함수 표현식 (할당 연산자가 있는 것)
// 호이스팅 되지 않음.
const getUsers = async () => {}

// 함수 선언식
// 호이스팅 가능. 위로 올라가서 정의되기 때문에 정상적으로 동작
async function getUsers() {}

3-5. promise 객체

promise 객체란 ?

자바스크립트 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 Array나 Object 처럼 독자적인 객체라고 보면 된다.

비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라 지어졌다고 한다.

promise 객체 생성

Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다.

이때 Promise 생성자 안에 두개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫 번째 인수는 작업이 성공했을 때 성공(resolve)임을 알려주는 객체이며, 두 번째 인수는 작업이 실패했을 때 실패(reject)임을 알려주는 오류 객체이다.

const myPromise = new Promise((resolve, reject) => {
	// 비동기 작업 수행
    const data = fetch('서버로부터 요청할 URL');
    
    if(data)
    	resolve(data); // 만일 요청이 성공하여 데이터가 있다면
    else
    	reject("Error"); // 만일 요청이 실패하여 데이터가 없다면
})

propmise 객체의 3가지 상태

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

1) pending

이행하지도, 거부하지도 않은 초기 상태

작업이 진행 중임을 의미

2) resolved

프로미스의 상태가 확정되었음을 의미

이 확정된 상태는 fulfilled(성공)일 수도 있고, rejected(실패)일 수도 있음

3-1) fulfilled

작업이 성공적으로 완료됨을 의미

3-2) rejected

작업이 실패했음을 의미

promise의 메서드

1) .then()

promise 객체가 fulfilled 상태가 되면 실행할 콜백함수를 등록하는 메서드

2) .catch()

promise 객체가 rejected 상태가 되면 실행할 콜백함수를 등록하는 메서드

3) .finally()

어떤 작업의 성공, 실패 여부와 상관없이 항상 실행하고 싶은 콜백함수를 등록하는 메서드

myPromise
    .then((value) => { // 성공적으로 수행했을 때 실행될 코드
    	console.log("Data: ", value); // 위에서 return resolve(data)의 data값이 출력된다
    })
    .catch((error) => { // 실패했을 때 실행될 코드
     	console.error(error); // 위에서 return reject("Error")의 "Error"가 출력된다
    })
    .finally(() => { // 성공하든 실패하든 무조건 실행될 코드
    	
    })

프로미스 동시성(Promise concurrency)를 지원하는 메소드

Promise.all()
Promise.allSettled()
Promise.any()
Promise.race()

1) Promise.all()

Promise.all()은 주어진 모든 프로미스가 모두 이행(fulfilled)될 때까지 기다립니다.

모든 프로미스가 성공적으로 완료되면 결과들을 배열로 반환합니다. 만약 하나라도 거부(rejected)되면, 전체가 거부 상태로 바뀝니다.

사용 예: 여러 비동기 작업(예: 여러 개의 API 호출)이 모두 성공해야 할 때.

let promise1 = Promise.resolve('작업 1 완료');
let promise2 = Promise.resolve('작업 2 완료');
let promise3 = Promise.resolve('작업 3 완료');

Promise.all([promise1, promise2, promise3]).then((results) => {
  console.log(results); // ['작업 1 완료', '작업 2 완료', '작업 3 완료']
});

2) Promise.allSettled()

Promise.allSettled()은 주어진 모든 프로미스가 완료(settled)될 때까지 기다립니다. 이때 완료된 프로미스는 성공이든 실패든 상관없이 결과를 반환합니다. 결과는 각 프로미스의 상태(fulfilled 또는 rejected)와 함께 배열로 반환됩니다.

사용 예: 성공과 실패 여부에 관계없이 모든 비동기 작업이 끝난 후 결과를 처리하고자 할 때.

let promise1 = Promise.resolve('작업 1 완료');
let promise2 = Promise.reject('작업 2 실패');
let promise3 = Promise.resolve('작업 3 완료');

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  console.log(results);
  // [{status: 'fulfilled', value: '작업 1 완료'},
  //  {status: 'rejected', reason: '작업 2 실패'},
  //  {status: 'fulfilled', value: '작업 3 완료'}]
});

3) Promise.any()

Promise.any()는 주어진 프로미스 중 가장 먼저 성공한(fulfilled) 프로미스의 결과를 반환합니다.

모든 프로미스가 거부(rejected)되면 AggregateError가 발생합니다.

사용 예: 여러 비동기 작업 중에서 하나라도 성공하면 그 결과를 사용하고, 모두 실패했을 때만 에러를 처리하고자 할 때.

let promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, '실패'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 200, '성공!'));
let promise3 = new Promise((resolve) => setTimeout(resolve, 300, '또 다른 성공!'));

Promise.any([promise1, promise2, promise3]).then((result) => {
  console.log(result); // '성공!'이 출력됩니다.
});

4) Promise.race()

Promise.race()는 주어진 프로미스 중 가장 먼저 완료된 프로미스의 결과를 반환합니다.

첫 번째로 완료된 프로미스가 성공이든 실패든 관계없이 그 결과가 반환됩니다.

사용 예: 여러 비동기 작업 중에서 가장 빨리 완료된 작업의 결과만 필요할 때.

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, '500ms'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, '100ms'));

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // '100ms'가 출력됩니다.
});

cf. 이터러블(Iterable)
자바스크립트에서 반복 가능한 객체(여러 개의 값을 하나씩 순서대로 접근할 수 있는 객체)를 의미

예시
1. 배열(Array):
예를 들어, 사과, 바나나, 오렌지가 들어 있는 과일 바구니가 있다고 해보세요. 이 바구니에서 하나씩 과일을 꺼낼 수 있다면, 이 바구니는 이터러블입니다. 자바스크립트에서 배열은 대표적인 이터러블입니다. [사과, 바나나, 오렌지]처럼 배열에 여러 개의 요소가 들어 있고, 이걸 하나씩 꺼내볼 수 있는 거죠.

2. 문자열(String):
“hello”라는 단어를 생각해봅시다. 이 단어에서 ‘h’, ‘e’, ‘l’, ‘l’, ‘o’를 하나씩 꺼낼 수 있다면, 이 문자열도 이터러블입니다.
자바스크립트에서 문자열도 하나씩 문자를 꺼낼 수 있기 때문에 이터러블입니다.

Promise.any()와 연결하기
Promise.any()는 여러 개의 프로미스(Promise) 중에서 가장 먼저 성공한(이행된) 결과를 얻고 싶을 때 사용합니다. 이때 여러 개의 프로미스를 배열 같은 이터러블에 넣어서 Promise.any()에 전달할 수 있습니다.
let promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, '실패'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 200, '성공!'));
let promise3 = new Promise((resolve) => setTimeout(resolve, 300, '또 다른 성공!'));

Promise.any([promise1, promise2, promise3]).then((result) => {
  console.log(result); // '성공!'이 출력됩니다.
});
여기서 [promise1, promise2, promise3]는 이터러블(하나씩 꺼내볼 수 있는 배열)입니다. Promise.any()는 이 배열에서 가장 먼저 성공한 promise2의 결과인 '성공!'을 반환합니다.

Promise() 생성자

new Promise(executor);

Promise 객체는 new 키워드와 생성자를 사용해 만듭니다.

생성자는 매개변수로 "실행 함수"를 받습니다.

이 함수는 매개 변수로 두 가지 함수를 받아야 하는데, 첫 번째 함수(resolve)는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수(reject)는 작업이 실패하여 오류의 원인을 반환할 때 호출하면 됩니다.

두 번째 함수는 주로 오류 객체를 받습니다.

let promise = new Promise(function(resolve, reject) {
  // 비동기 작업을 실행하는 코드가 여기에 들어갑니다.

  if (/* 작업이 성공하면 */) {
    resolve('성공 결과'); // 성공 시 호출
  } else {
    reject('실패 이유'); // 실패 시 호출
  }
});

cf. promise instance

new Promise()를 호출하여 생성된 개별적인 프로미스 객체

(위 예제에서 promise라는 변수에 할당된 값을 프로미스 인스턴스라고 함)

인스턴스는 특정 비동기 작업을 추적하며, 그 작업이 성공했는지, 실패했는지, 또는 아직 진행 중인지 상태를 관리합니다.

매개변수:

- executor 함수: new Promise()는 두 개의 매개변수, resolve와 reject를 받는 콜백 함수를 인자로 받습니다. 이 콜백 함수는 프로미스가 생성될 때 자동으로 실행됩니다.

- resolve: 비동기 작업이 성공했을 때 호출합니다. 이때 인자로 전달된 값은 프로미스의 결과로 사용됩니다.

- reject: 비동기 작업이 실패했을 때 호출합니다. 이때 인자로 전달된 값은 에러 정보로 사용됩니다.

예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("1초 후에 작업이 완료되었습니다.");
  }, 1000);
});

promise.then((result) => {
  console.log(result); // "1초 후에 작업이 완료되었습니다." 출력
}).catch((error) => {
  console.error(error); // 만약 reject()가 호출되었다면 이 블록이 실행됩니다.
});

https://www.freecodecamp.org/korean/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/

자바스크립트 프로미스 튜토리얼 - 자바스크립트의 프로미스를 이행하거나 거부하는 방법

프로미스는 자바스크립트에서 비동기 처리를 위한 중요한 요소이지만 프로미스를 이해하고 적용하는 것은 그렇게 쉽지 않다고 생각하셨을 수도 있습니다. 하지만 절 따라오세요, 여러분은 혼

www.freecodecamp.org

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-Promise#%EC%BD%9C%EB%B0%B1_%ED%95%A8%EC%88%98%EC%9D%98_%EB%B9%84%EB%8F%99%EA%B8%B0_%EC%B2%98%EB%A6%AC_%EB%AC%B8%EB%B2%95

자바스크립트 Promise 개념 & 문법 정복하기

콜백 지옥을 탈출하는 새로운 문법 자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다. 예를 들어 서버에서 데이터를 받아오는 작업은 시간

inpa.tistory.com

JS | 직렬화와 역직렬화, JSON.stringify()와 JSON.parse()

dearsuhyun — Wed, 21 Aug 2024 23:43:20 +0900

출처 : https://velog.io/@leesfact/%EB%8D%B0%EC%9D%B4%ED%84%B0%EA%B5%90%ED%99%98-%ED%98%95%EC%8B%9D-JSON%EA%B3%BC-%EC%A7%81%EB%A0%AC%ED%99%94%EC%99%80-%EC%97%AD%EC%A7%81%EB%A0%AC%ED%99%94

1. 직렬화(Serialization)란?

직렬화(Serialization)는 데이터를 전송하거나 저장하기 위해, 객체나 데이터 구조를 일련의 문자열로 변환하는 과정을 말합니다. 예를 들어, 자바스크립트의 객체를 네트워크를 통해 전송하거나 파일에 저장하고 싶을 때, 이 객체를 텍스트 형태로 변환하는 것이 바로 직렬화입니다.

2. JSON.stringify()란?

JSON.stringify()는 자바스크립트에서 객체를 JSON 형식의 문자열로 직렬화하는 방법입니다.

• JSON(JavaScript Object Notation)은 데이터 교환 형식으로 널리 사용되는 텍스트 기반의 형식입니다.

• JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 변환해 줍니다.

const user = {
  name: "Alice",
  age: 25,
  isStudent: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name":"Alice","age":25,"isStudent":true}

3. 역직렬화(Deserialization)란?

역직렬화(Deserialization)는 직렬화된 데이터를 다시 원래의 객체나 데이터 구조로 복원하는 과정입니다. 직렬화된 문자열을 받아서, 다시 자바스크립트 객체로 변환할 때 사용됩니다.

직렬화된 데이터를 다시 컴퓨터가 이해할 수 있는 복잡한 데이터(객체)로 되돌리는 과정이라고 생각하면 됩니다.

4. JSON.parse()와 역직렬화

JSON.parse()는 JSON 문자열을 받아서 자바스크립트 객체로 역직렬화해 줍니다.

const jsonString = '{"name":"Alice","age":25,"isStudent":true}';
const user = JSON.parse(jsonString);

console.log(user.name); // "Alice"
console.log(user.age); // 25

자바스크립트의 실행 컨텍스트(Execution Context)와 this 키워드, ES6 모듈 특징

dearsuhyun — Wed, 21 Aug 2024 18:56:19 +0900

실행 컨텍스트 (Execution Context) - Record와 Outer를 중심으로

record/outer는 실행컨텍스트와 크게 관련 없음

lexical 은 실행 컨텍스트보다 상위개념이라고 볼 수 있음

설명이 어렵게 되어 있음 - 전반적으로 더 읽기 좋게 풀어서 설명해보기 (어렵게 썼는데 틀리면 ? 신뢰도 하락)

독자 입장에서 글의 흐름이 뭉쳐있다, 쉽게 풀고 더 흐름을 자연스럽게 고쳐보기

실행 컨텍스트는 실행 가능한 코드에 제공할 환경(코드 실행에 영향을 주는 조건이나 상태) 정보를 모아놓은 객체입니다.
해당 객체에는 변수 객체, 스코프 체인, this 정보가 담겨있습니다.
자동으로 전역 컨텍스트가 생성된 후 함수 호출시마다 함수 컨텍스트가 생성되고, 컨텍스트 생성이 완료된 후에 함수가 실행됩니다.
함수 실행 중에 사용 되는 변수들을 변수 객체 안에서 값을 찾고 값이 존재하지 않는다면 Lexical 환경의 outerEnvironmentReference를 통해 Scope 체인을 따라 올라가면서 탐색합니다. 함수 실행이 마무리가 되면 해당 컨텍스트는 사라지고, 페이지가 종료되면 전역 컨텍스트도 사라집니다.

1. 전역 실행 컨텍스트 (Global Execution Context):

• 자바스크립트 프로그램이 시작될 때 생성됩니다.

• 전역 컨텍스트에서 this는 전역 객체(window 객체 또는 Node.js 환경에서는 global 객체)를 참조합니다.

2. 함수 실행 컨텍스트 (Function Execution Context):

• 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성됩니다.

• 함수 내부에서의 this는 함수가 어떻게 호출되었는지에 따라 달라집니다.

3가지 주요 구성 요소

1) 변수 객체(Variable Object): 현재 실행 중인 함수의 매개변수, 변수, 함수 선언 등을 포함합니다.

2) 스코프 체인(Scope Chain): 현재 컨텍스트에서 접근할 수 있는 변수들을 결정합니다.

3) this 바인딩: this가 가리키는 객체를 결정합니다.

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  
  bar();
}

foo();

자바스크립트 코드를 실행 --> 콜스택에 전역 실행 컨텍스트를 담음 --> 전역에서 함수 foo를 호출하면 --> foo의 실행 컨텍스트를 만들어서 콜스택에 담음 (콜스택에서는 가장 최근에 추가된 콜스택만 활성화됨) -> 함수 bar를 호출하면 --> bar의 실행 컨텍스트를 만들어서 콜 스택에 담음 --> 가장 최근에 추가된 bar 부터 실행 --> bar 콜스택에서 삭제 --> foo 실행 --> foo 콜스택에서 삭제 --> 전역 실행

출처: https://velog.io/@ggong/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-execution-context

1. Record로 호이스팅 이해하기

틀렸다고 볼 수 없지만 어렵게 설명되어 있음

환경 레코드(Environment Record)란?

환경 레코드(Environment Record)는 자바스크립트에서 변수와 함수가 어디에 저장되고 어떻게 관리되는지를 담당하는 구조입니다. 쉽게 말하면, 코드에서 사용하는 변수와 함수들을 저장하는 “메모장” 같은 역할을 한다고 생각하면 됩니다. --> 메모리

이 메모장에는 각 변수나 함수의 이름(식별자)과 그에 연결된 값이 기록됩니다.

환경 레코드의 역할

- 변수와 함수의 저장소:

자바스크립트에서 변수를 선언하거나 함수를 정의할 때, 그것들은 바로 환경 레코드에 저장됩니다.

예를 들어, let x = 5; 라는 코드를 실행하면, 환경 레코드에 x라는 이름과 5라는 값이 저장됩니다.

- 식별자와 바인딩된 값:

식별자는 변수나 함수의 이름을 의미합니다. 이 식별자에 연결된 값(바인딩된 값)이 무엇인지 환경 레코드가 기억합니다.

예를 들어, function sayHello() {} 라는 코드를 실행하면, 환경 레코드는 sayHello라는 식별자와 이 함수가 가리키는 코드를 기억합니다.

- 코드 실행 중 값 조회:

코드가 실행될 때, 자바스크립트 엔진은 변수나 함수의 값을 필요로 하면 환경 레코드를 참조합니다.

예를 들어, console.log(x); 라는 코드가 실행될 때, 환경 레코드는 x가 어떤 값(이 경우 5)을 가지고 있는지 알려줍니다.

환경 레코드와 호이스팅의 관계

환경 레코드의 생성

자바스크립트가 코드를 실행할 때, 먼저 실행 컨텍스트를 생성합니다. 그리고 이 실행 컨텍스트 내에서 환경 레코드가 만들어집니다. 이 과정은 두 단계로 이루어집니다:

• 1단계: 생성 단계 - 변수와 함수의 선언이 환경 레코드에 기록됩니다.

• 2단계: 실행 단계 - 실제 코드가 실행되고, 변수와 함수에 값이 할당됩니다.

호이스팅의 실제 동작

호이스팅은 생성 단계에서 일어납니다. 자바스크립트는 코드를 읽으면서 변수와 함수 선언을 발견하면, 그것들을 환경 레코드에 미리 기록해 둡니다. 그래서 실제 코드가 실행될 때, 선언 전에 변수나 함수를 참조해도 오류가 발생하지 않는 것입니다.

1) var 키워드와 변수 호이스팅

var로 선언된 변수는 코드의 최상위로 호이스팅되며, 초기화와 선언이 동시에 이루어집니다. 하지만 중요한 점은, 호이스팅될 때 변수가 undefined로 초기화된다는 것입니다. 즉, 변수를 실제로 할당하기 전에 접근해도 오류가 발생하지 않고 undefined를 반환합니다.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

실행 과정
1. 생성 단계:
자바스크립트 엔진은 var a를 발견하고, 이를 환경 레코드에 undefined 값과 함께 등록합니다.

2. 실행 단계:
console.log(a);를 실행할 때, a는 이미 환경 레코드에 존재하며 undefined로 초기화되어 있습니다. 따라서 undefined가 출력됩니다.
이후 a = 10;이 실행되면, a의 값이 10으로 바뀝니다.

2) let과 const 키워드와 변수 호이스팅

let과 const로 선언된 변수도 호이스팅됩니다. 하지만 중요한 차이점은, 이들 변수는 호이스팅되지만 초기화되지 않습니다.

호이스팅 (끌어올려지는 것 + 초기화되는것) --> 자바스크립트의 개발용어로 이해하면

let, const는 호이스팅된다고 말할 수 없음 !

이 변수들은 **“Temporal Dead Zone (TDZ)”**에 놓이게 됩니다. 이 때문에, 선언되기 전에 해당 변수에 접근하면 ReferenceError가 발생합니다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;
console.log(c); // 30

실행 과정
1. 생성 단계:
자바스크립트 엔진은 let과 const로 선언된 변수들을 환경 레코드에 등록하지만, 초기화는 하지 않습니다. 이때 이 변수들은 TDZ에 놓여 있습니다.
TDZ란 변수가 초기화되기 전까지 해당 변수를 참조할 수 없는 기간을 의미합니다.

2. 실행 단계:
console.log(b); 또는 console.log(c);가 실행될 때, 변수 b와 c는 TDZ에 있기 때문에 ReferenceError가 발생합니다.
이후 변수들이 선언되면서 TDZ가 종료되고, 변수들이 초기화됩니다. b = 20;, c = 30;이 실행되면, 이제 b와 c는 정상적으로 값을 가집니다.

2. Outer로 스코프체이닝 이해하기

1. 스코프 체이닝(Scope Chaining)

스코프 체이닝은 현재 스코프에서 변수를 찾지 못하면, 외부(상위) 스코프에서 계속해서 변수를 찾는 과정입니다. 자바스크립트는 변수를 사용할 때, 먼저 현재 스코프에서 그 변수를 찾습니다. 만약 찾지 못하면, 바로 외부 스코프(상위 스코프)로 이동해 다시 찾습니다. 이 과정을 스코프 체인이라고 합니다.

2. Lexical Environment (렉시컬 환경)

Lexical Environment는 자바스크립트에서 변수와 함수 선언을 기록하고 관리하는 구조를 말합니다. 쉽게 말하면, 변수와 함수들이 어디에 저장되고, 어떻게 접근되는지를 결정하는 “상자” 같은 역할을 합니다.

3. Outer Environment Reference

Outer Environment Reference는 현재 함수(또는 블록)가 자신을 둘러싼 외부 스코프를 참조할 수 있도록 만들어진 연결 고리입니다.

(현재 Lexical Environment에서 바깥쪽(외부)의 Lexical Environment를 참조할 수 있는 링크)

즉, 현재 코드가 바깥에서 선언된 변수나 함수에 접근할 수 있도록 해주는 “다리”라고 생각하면 됩니다.

4. Lexical Environment와 Outer Environment Reference의 관계

Lexical Environment는 각 실행 컨텍스트(예: 전역, 함수)에서 사용되는 변수와 함수들을 저장하고 관리합니다.

각 Lexical Environment는 Outer Environment Reference를 통해 바로 바깥쪽의 Lexical Environment와 연결됩니다. 이 연결을 통해 자바스크립트는 변수를 현재 스코프에서 찾지 못하면, 바깥쪽 스코프에서 찾을 수 있게 됩니다.

스코프 체인

Lexical Environment들은 서로 Outer Environment Reference로 연결되어 스코프 체인을 형성합니다.

자바스크립트는 변수를 사용할 때, 먼저 현재 Lexical Environment에서 찾고, 없으면 Outer Environment Reference를 따라 바깥쪽 스코프에서 변수를 찾습니다.

쉽게 비유
Lexical Environment: 각 방 안에 있는 “변수와 함수들이 기록된 상자”
Outer Environment Reference: 각 방을 연결하는 “복도”
이 복도를 따라가면서 다른 방의 상자(즉, 외부 스코프에 있는 변수들)에 접근할 수 있습니다.

3. 스코프 체이닝과 Outer Environment Reference의 연결

let globalVar = "I'm a global variable";

function outerFunction() {
  let outerVar = "I'm in outerFunction";

  function innerFunction() {
    let innerVar = "I'm in innerFunction";

    console.log(globalVar); // 스코프 체인을 따라 전역 스코프에서 찾음
    console.log(outerVar);  // 스코프 체인을 따라 outerFunction 스코프에서 찾음
    console.log(innerVar);  // 현재 스코프에서 찾음
  }

  innerFunction();
}

outerFunction();

스코프 체이닝의 동작:

• innerFunction 내부에서 globalVar, outerVar, innerVar를 출력하려고 할 때:

globalVar는 innerFunction 스코프에서 찾을 수 없으므로, Outer Environment Reference를 통해 상위 스코프인 outerFunction으로 이동합니다. 거기서도 찾을 수 없으므로 다시 전역 스코프로 이동해 찾습니다.

outerVar는 innerFunction 스코프에 없지만, 바로 외부 스코프인 outerFunction 스코프에 존재합니다. 그래서 여기서 변수를 찾습니다.

innerVar는 innerFunction 스코프에 바로 존재하므로, 스코프 체인을 따라 올라가지 않고 현재 스코프에서 찾습니다.

this 키워드란?

this는 자바스크립트에서 현재 실행 중인 코드의 실행 컨텍스트에 따라 참조하는 객체를 의미합니다. this는 코드가 실행되는 방식에 따라 달라집니다.

1. 전역 컨텍스트에서의 this:

• 전역 컨텍스트에서 this는 전역 객체를 참조합니다.

• 브라우저 환경에서는 this === window가 참입니다.

console.log(this); // window 객체를 출력 (브라우저에서)

2. 일반함수에서의 this

호출 위치에서 this가 정의 !

const person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

person.sayHello(); // "Hello, Alice"

** 추가 예제

// numbers1, numbers2는 같은 배열 데이터 생성 방식
const numbers1 = [5, 6, 7, 8] // 리터럴 방식
const numbers2 = new Array(5, 6, 7, 8) // 생성자 방식

Array.prototype.hello = function() {
  return this.join(' / ')
}
// [1, 2, 3].map()
// Array.prototype.map = function() {}
// join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듦

// 배열 데이터에서 커스텀 메서드 사용
const res = numbers1.hello()
console.log(res) // 5 / 6 / 7 / 8

2) 객체의 메서드에서의 this:

• 객체의 메서드에서 this는 그 메서드가 속한 객체를 참조합니다. --> 알 수 없다

밑의 예제를 보면 객체의 메서드에서 this는 그 메서드가 속한 객체를 참조합니다.

--> 참조한다는 것을 확신할 수 없음

--> 이 예제를 설명할 때는 맞지만, 일반화된 this 키워드 설명할 때에는 틀렸음

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name); // this는 obj를 참조
  }
};
obj.greet(); // "Alice" 출력

3) 생성자 함수에서의 this:

• 함수가 new 키워드와 함께 호출될 때(생성자 함수 호출), 새로 생성된 객체(인스턴스)를 가리킵니다.

this는 그 인스턴스를 참조합니다.

• 생성자 함수의 역할은 새 인스턴스를 생성하고, ~~이 새 객체에 속성을 추가하는 것입니다.~~

자바스크립트의 모든 데이터는 인스턴스 !

객체(데이터) vs 개체(물체, 모든 데이터)

Object

object

대문자 소문자 다름 ( 찾아보기 )

• 일반함수로 만들어진 생성자 함수에서 this는 새로 생성된 인스턴스를 참조할 수 있다 !!!

function Person(name) {
  this.name = name;
}
const person1 = new Person('Bob');
console.log(person1.name); // "Bob" 출력

** 추가 예제

// numbers1, numbers2는 같은 배열 데이터 생성 방식
const numbers1 = [5, 6, 7, 8] // 리터럴 방식
const numbers2 = new Array(5, 6, 7, 8) // 생성자 방식, numbers2는 인스턴스

Array.prototype.hello = function() {
  return this.join(' / ')
}
// [1, 2, 3].map()
// Array.prototype.map = function() {}
// join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듦

// 배열 데이터에서 커스텀 메서드 사용
const res = numbers2.hello()
console.log(res) // 5 / 6 / 7 / 8

2. 명시적인 this 바인딩 (call, apply, bind)

• call, apply, bind 메서드를 사용하여 함수 호출 시 this를 특정 객체로 명시적으로 설정할 수 있습니다.

1) call 메서드

call은 함수를 즉시 실행하면서 this를 내가 원하는 값으로 설정해주는 역할을 합니다

원래 sayHello함수는 this가 가리키고 있는 것이 무엇인지 알지 못하지만

call 메서드를 사용함으로써 이 this가 person을 가리키고 있다고 설정해 주는 것 !

function sayHello(greeting) {
  console.log(greeting + ", my name is " + this.name);
}

const person = { name: "Alice" };

sayHello.call(person, "Hi");
// "Hi, my name is Alice"

2) apply 메서드

call과 거의 일치하지만, 함수에 전달하는 인수들을 배열로 전달해줍니다.

apply도 call처럼 this를 person으로 설정해주지만, 다른 점은 apply에서는 인수들을 배열로 줘야 합니다.

--> sayHello 함수에서 greeting과 punctuation을 배열로 넘겨주면 되는 것 !

function sayHello(greeting, punctuation) {
  console.log(greeting + ", my name is " + this.name + punctuation);
}

const person = { name: "Bob" };

sayHello.apply(person, ["Hello", "!"]);
// "Hello, my name is Bob!"

3) bind 메서드

bind는 call이나 apply와 달리 즉시 함수를 호출하지 않고, this가 고정된 새로운 함수를 반환합니다. 이후 이 새로운 함수를 호출할 때마다 this가 항상 고정된 객체를 참조합니다.

bind는 “나중에 쓸 때 이 함수에서 this는 무조건 person이야!” 라고 말해주는 역할을 합니다.

그러면 boundSayHello라는 새로운 함수가 만들어지고, 이 함수는 this가 항상 person이 되는 것 !

--> 언제 boundSayHello를 호출하든, this는 person이고, name은 "Charlie"가 된다고 해석합니다.

function sayHello(greeting) {
  console.log(greeting + ", my name is " + this.name);
}

const person = { name: "Charlie" };

const boundSayHello = sayHello.bind(person);

boundSayHello("Hi");
// "Hi, my name is Charlie"

3. 화살표함수에서의 this

선언 위치에서 this가 정의 !

화살표 함수에서는 this가 항상 함수를 감싸고 있는 외부 환경에 의해 결정됩니다.

즉, 화살표 함수는 자기만의 this를 가지지 않고, 자신이 속한 바깥 함수나 전역 컨텍스트의 this를 그대로 사용 !

function abc() {
  this.a = 10;
  const obj2 = {
    a: 1,
    b: 2,
    getB() => {
      console.log(this.a); // 10
    }
  }
}

const obj3 = {
  a: 1,
  b: 2,
  getC() => {
    console.log(this.a); // undefined

const person = {
  name: "Charlie",
  sayHello: function() {
    const innerFunction = () => {
      console.log("Hello from innerFunction, " + this.name);
    };
    innerFunction();
  }
};

person.sayHello(); // "Hello from innerFunction, Charlie"

• call: 함수를 호출할 때 this를 특정 객체로 설정하며, 추가적인 인수들을 개별적으로 전달합니다.
함수.call(특정객체, 인수1, 인수2, ...)
즉시 호출됨.

• apply: call과 거의 동일하지만, 인수들을 배열 형태로 전달합니다.
함수.apply(특정객체, [인수1, 인수2, ...])
즉시 호출됨.

• bind: this가 고정된 새로운 함수를 반환합니다. 이 함수는 이후 호출할 때마다 this가 고정된 객체를 참조합니다.
const 새로운함수 = 함수.bind(특정객체)
즉시 호출되지 않고, 반환된 함수를 나중에 호출.

cf. 엄격모드와 비엄격모드

자바스크립트에서 모듈 구조와 모듈 구조가 아닌 경우(즉, 전통적인 스크립트 방식) 사이에는 중요한 차이점이 있습니다. 특히 엄격 모드의 적용 여부와 스코프 관리 방식에서 차이가 두드러집니다. 아래에서 두 가지를 비교해보겠습니다.

1. 모듈 구조가 아닌 경우 (전통적인 스크립트 방식)

// traditional.js - 전통적인 스크립트 방식

x = 10; // 전역 변수로 암묵적 선언 (비엄격 모드에서는 허용됨)
console.log(x); // 10

function nonStrictFunction() {
    y = 20; // 암묵적 전역 변수 선언 (비엄격 모드에서는 허용됨)
    console.log(y); // 20
}

nonStrictFunction();

console.log(this); // 전역 객체 (window, Node.js에서는 global)

특징:

• 엄격 모드가 기본적으로 비활성화: 전통적인 스크립트에서는 엄격 모드가 기본적으로 비활성화되어 있습니다. 따라서 "use strict";를 명시적으로 선언해야 엄격 모드가 적용됩니다.

• 암묵적 전역 변수 생성 허용: x = 10;과 같은 암묵적 전역 변수 선언이 허용됩니다. 선언되지 않은 변수를 할당할 경우 자동으로 전역 변수가 됩니다.

• 전역 스코프 사용: 모든 코드는 전역 스코프에서 실행되며, this는 전역 객체(window 또는 global)를 가리킵니다.

2. 모듈 구조 (ES6 모듈)

// module.js - ES6 모듈 구조

let x = 10; // 모듈 스코프 내에서 변수 선언
console.log(x); // 10

function strictFunction() {
    y = 20; // ReferenceError: y is not defined (엄격 모드에서는 오류)
    console.log(y);
}

strictFunction();

console.log(this); // undefined (모듈에서는 this가 전역 객체를 가리키지 않음)

특징:

• 엄격 모드가 자동 적용: ES6 모듈에서는 "use strict";를 명시하지 않아도 엄격 모드가 자동으로 적용됩니다. 이로 인해 더 안전한 코드 작성이 가능합니다.

• 암묵적 전역 변수 생성 금지: 엄격 모드에서는 암묵적 전역 변수 생성이 금지됩니다. 위 예제에서 y = 20;은 선언되지 않은 변수에 값을 할당하려고 하므로 오류가 발생합니다.

• 모듈 스코프 사용: ES6 모듈의 모든 코드는 고유한 모듈 스코프 내에서 실행됩니다. 이 때문에 모듈 간의 전역 변수 충돌이 발생하지 않습니다. 또한, 모듈 내에서 this는 undefined가 됩니다.

결론

• 전통적인 스크립트 방식에서는 엄격 모드가 자동으로 적용되지 않으므로, 안전한 코드를 작성하기 위해서는 "use strict";를 명시적으로 선언해야 합니다. 또한, 전역 스코프에서 모든 코드가 실행되며, 암묵적인 전역 변수 생성이 허용됩니다.

• ES6 모듈 방식에서는 엄격 모드가 자동으로 적용되어, 더 안전한 코드 작성을 보장합니다. 모듈 스코프 내에서 코드가 실행되며, this는 전역 객체를 가리키지 않고 undefined가 됩니다.

https://youtu.be/EWfujNzSUmw?si=NR1VHFLZJprG3Sbt

https://velog.io/@kados22/FE-%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

[FE 기술 면접] 실행 컨텍스트가 무엇인가요?

1️⃣ 실행 컨텍스트(Execution Context)에 대해서 설명해주세요.실행 컨텍스트는 실행 가능한 코드에 제공할 환경 정보를 모아놓은 객체입니다. 해당 객체에는 변수 객체, 스코프 체인, this 정보가

velog.io

Beginner 14회차 (8/20) | TS 유틸리티 타입, React-Router의 페이지 지정 방법, 모달 애니메이션 적용 실습, todo 순서 바꾸기 실습(sortablejs), useRef와 current 속성

dearsuhyun — Wed, 21 Aug 2024 14:02:30 +0900

TS 유틸리티 타입

객체 데이터에 있는 모든 내용을 선택적으로 만듬

interface User {
    name: string
    age: number
}

const user: User {
    name: 'suhyun'
}
// 오류 발생
// 'age: 85' 없으면 필수인데 없기 때문에 오류 !

Partial을 붙여주면 interface 내용이 필수적이 아니라 선택적으로 설정된 것과 같이 작동 !

user에서 name, age를 사용하지 않아도 오류가 발생하지 않음

'처음부터 선택적으로 만들면 안되는가 ?'
--> 모든 것에 필수여야 하는 경우에 대응하기 힘듬
만들 때는 필수 --> 선택적으로 ? 붙여서 사용하는 것이 일반적 !

interface PartialUser {
    name?: string
    age?: number
}

// utility type (TS에 이미 내장된 타입)
const user: Partial<User> {
    name: 'suhyun'
}

코드 적용

api > todos.ts

- record

key를 속성(key)로, type을 그 속성값의 type으로 지정하는 새로운 타입

Record<KEY, TYPE>

type TName = 'neo' | 'lewis'

const developers: Record<TName, number> = {
  neo: 12,
  lewis: 13
}

이렇게 이해할 수 있음

interface INewType {
  neo: number
  lewis: number
}

- omit

TYPE에서 KEY로 속성을 생략하고 나머지를 선택한 새로운 타입을 반환
TYPE은 속성을 가지는 인터페이스나 객체 타입이어야 함

Omit<TYPE, KEY>

interface IUser {
  name: string
  age: number
  email: string
  isValid: boolean
}
type TKey = 'name' | 'email'

const user: Omit<IUser, TKey> = {
  age: 22,
  isValid: true,
  name: 'Neo' // TS2322: Type '{ age: number; isValid: true; name: string; }' is not assignable to type 'Pick<IUser, "age" | "isValid">'.
}

이렇게 이해할 수 있음 !

interface INewType {
  // name: string
  age: number
  // email: string
  isValid: boolean
}

- exclude

유니언 TYPE1에서 유니언 TYPE2를 제외한 새로운 타입을 반환

Exclude<TYPE1, TYPE2>

type T = string | number

const a: Exclude<T, number> = 'Only string'
const b: Exclude<T, number> = 1234 // TS2322: Type '123' is not assignable to type 'string'.
const c: T = 'String'
const d: T = 1234

todo 추가 기능이 구현되지 않는 문제

기존 코드

async function createTodo() {
    await axios.post('/api/todos'), {
      method: 'POST',
      data: {
        title
      }
    }
    getTodos()
  }

수정 코드

method, data 부분을 axios의 두번째 인수로 줘야 하는데 그렇지 못해서 발생한 오류 수정

async function createTodo() {
    await axios.post('/api/todos', {
      method: 'POST',
      data: {
        title
      }
    })
    getTodos()
  }

수정 후 main에 푸시하면 vercel에서 자동으로 배포 !

React-Router의 페이지 지정 방법

1. 객체 형식으로 페이지(라우트) 지정

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Main />,
    // 메인 페이지가 보이는 상태에서 모달을 보여줄거니까 children으로 설정
    children: [
      {
        path: ':todoId',
        element: <TodoItemDetails />
      }
    ]
  }
])

2. 컴포넌트 방식으로 페이지(라우트) 지정

export default function Index() {
  // location 객체는 현재 URL에 대한 정보를 가지고 있음
  const location = useLocation()
  return (
    <AnimatePresence mode="wait">
      <Routes
        location={location}
        key={location.pathname}>
        <Route
          path="/"
          element={<Main />}>
          <Route
            path={'/:todoId'}
            element={<TodoItemDetails />}
          />
        </Route>
      </Routes>
    </AnimatePresence>
  )
}

모달 애니메이션 적용 실습

routes > index.tsx

<AnimatePresence> 전체 주소의 사라지는 애니매이션 까지 담당하겠다 !

페이지를 바꾸는 방법으로 모달을 사용하고 있기 때문에 페이지 사라질 때 부분도 설정해주어야 함

모달 사라지게 할 때 주소가 바로 사라지니까 당연히 모달도 바로 사라지는 것 --> AnimatePresence 사용

todoItemDetails.tsx

나타날 때는 자연스럽게 나타나지만, 끌 때는 바로 꺼짐 (페이지를 바꿔서 모달을 띄우는 것이기 때문)

exit={{ opacity: 0}}을 추가해서 사라질 때도 자연스럽게 사라지도록 만들어주기 !

구현 화면

todoList에서 item 순서 바꾸기 실습

import Sortable from 'sortablejs'
npm i -D @types/sortablejs

useRef과 current 속성

Main.tsx

Sortable의 필수 속성 4가지

new Sortable(listRef.current, {
      handle: '',
      animation: 0,
      forceFallback: true,
      onEnd: () => {}
}

new Sortable(todoListEl.current, {
    handle: '.drag-handle', // 드래그 핸들이 될 요소의 선택자를 입력
    animation: 0, // 정렬할 때 애니메이션 속도(ms)를 지정, default: 150
    forceFallback: true, // 크로스 브라우징, 다양한 환경의 일관된 Drag&Drop(DnD)을 위해 HTML5 기본 DnD 동작을 무시하고 내장 기능을 사용, default: false
    // 요소의 DnD가 종료되면 실행할 핸들러(함수)를 지정
    onEnd: event => {
      const { oldIndex, newIndex } = event
      if (oldIndex === undefined || newIndex === undefined) return
      console.log('oldIndex:', oldIndex, 'newIndex:', newIndex)
      mutate({
        oldIndex,
        newIndex
      })
    }

sortablejs는 화면만 바꿔주기 때문에 새로고침하면 순서 바꾼 것이 그대로 돌아옴

서버에 전송해줘서 새로고침해줘도 유지하도록 ! api 사용해주어야 함

oldIndex, newIndex가 console에 찍히는 화면

API 명세서 확인

store에 reordertodos 생성

* TS 유틸리티 타입 자주 쓰이는 4가지는 꼭 알아두기 (다른 것도 읽어보기)
partial, record, omit, exclude

* Pakage.json
Sem Ver: ^35.2.4
--> major 버전은 바뀌지 않지만, 버셀 패키지를 설치하면 마이너와 패치 버전을 가장 최신으로 유지한다

"vercel": "^35.2.4",
// latest(최신버전) 
npm i -D vercel@latest 

// canary(배타버전) 
npm i -D vercel@canary
* transition: 전 상태 --> 후 상태를 자연스럽게 전환해준다

* 처음부터 react-** 라고 만들어진 라이브러리는 대안이 없음
sortablejs 의 경우 react-sortablejs라는 대안이 있는 것임
순수 js(ts)로 만들어진 라이브러리가 있다면 react-**잘 사용하지 않는 이유 ?
--> react, vue, svelte같은 프레임워크는 계속 변화함 ==> react-**도 업데이트 되지 않으면 사용 불가
라이브러리에 의존해서 만들어진 추가적인 라이브러리는, 라이브러리가 망가지면 쓸 수 없음
순수 js, ts로 만들어진 라이브러리를 사용하는 것을 추천함 !

https://www.heropy.dev/p/WhqSC8

한눈에 보는 타입스크립트

타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안

www.heropy.dev

https://github.com/ParkYoungWoong/todo_vite-react-ts

GitHub - ParkYoungWoong/todo_vite-react-ts

Contribute to ParkYoungWoong/todo_vite-react-ts development by creating an account on GitHub.

github.com

https://sortablejs.github.io/Sortable/#frameworks

SortableJS

Thresholds Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.  new Sortable(example7, { swapThre

sortablejs.github.io