주제 선정 과정

프로젝트 주제를 선정할 때 우리가 가장 신경썼던 부분은 3가지가 있었다.

1. 적은 인원으로도 서비스의 원활한 이용이 가능한가?

기존에 팀 프로젝트를 진행하게 되면 가장 많이 하는 주제는 중개 플랫폼이나 SNS 관련 관련 주제를 많이 생각하게 된다. 당장 나도 이번 최종 프로젝트에서는 같은 취미를 가진 사람들이 모이는데 도움이 되는 모임 관련 SNS를 주제로 제출하였다. 하지만 이러한 서비스가 원활하게 이용이 가능하려면 많은 사람들의 이용이 필요하다. 이번 팀 프로젝트에서는 팀원들 모두 적은 이용자가 있어도 원활하게 모든 서비스 사용이 가능한 주제를 원했다.

2. 서비스 구현과 사용에 현실성이 있는가?

서비스를 구현하는데 우리의 개발 레벨에서 현실적으로 가능한지, 너무 어렵거나 불가능한건 아닌지를 생각하였다. 구현하기 어렵다고 생각하는 주제를 선택해 새로운 것들을 공부하며 프로젝트를 진행하는 것도 큰 의미가 있겠지만 비교적 짧은 시간안에 결과물을 완성해야하기에 서비스 구현 난이도도 중요한 요소라고 생각했다.

또한, 이용자가 정말 사용할만한 서비스인지도 중요하게 생각한 요소였다. 서비스를 만들었지만 막상 사용하기 불편해서 사용하지 않는 서비스라면 개발에 의미가 없다고 생각하였다.

팀 프로젝트 주제 선정 마지막 과정에서 이용자가 가지고 있는 옷 정보를 모두 등록해 세탁 방법과 날씨에 맞는 추천 의상, 자주 입는 옷과 입지 않는 옷을 알려주는 옷 관리 서비스와 이번 프로젝트 주제 두 가지를 고민하였다. 옷 관리 서비스는 이용자가 옷을 모두 수동으로 등록해야한다는 불편함이 있었고 이를 해결하기 위해 옷 태그를 카메라로 분석해서 등록 과정을 줄이자는 의견도 나왔지만 지금 팀의 지식으로는 개발에 현실성이 없다고 생각되었다. 또한, 입은 옷을 사용자가 계속해서 체크해야한다는 불편함에 서비스 이용이 현실성이 없다고 생각하여 다른 선택지를 고르게 되었다.

3. 구현을 통해 배울 요소들이 있는가?

난이도를 적절히 가져가면서 구현 과정에서 새로운 지식을 얻을 수 있는도 중요한 주제 선정 요소였다. 프론트엔드와 백엔드 모두가 단순 반복 작업이나 이전에 만들어둔 프로젝트 코드를 복붙하는 개발을 벗어나 윈윈할 수 있는 주제를 원했다.

프로젝트 주제

그래서 이번 프로젝트에 우리 팀이 선택한 주제는 위치 기반 다이어리 작성에 중점을 둔 커플 애플리케이션이다. 2명의 사용자만 있으면 모든 서비스를 사용이 가능하고, 두 명을 하나의 그룹으로 묶어 관리하는 과정과 현재 위치를 기반으로 한 다이어리 구현에서 백엔드와 프론트엔드 모두 새로운 경험을 할 것이라고 생각하였다. 기존 커플 앱의 장점과 단점들을 확인해 커플 앱에서 부족했던 부분을 채워 실제 사용해볼만한 서비스를 기획하고자 노력하였다.

프론트엔드 팀원들은 반응형 웹으로 제작을 계획해서 개발 과정에서 CSS에 대한 이해도를 높이고 사용자 경험도 향상 시킬 수 있도록 기획하였다.

협업 방식

협업 방식을 선택할 때 협업 툴의 사용을 최대한 간소화하여 모두가 빠르게 확인이 가능하도록 하는 방향을 선택하였다. 우리 팀의 협업 툴은 크게 Slack, Gather, Notion, GitHub이다. Slack를 통해 비동기 소통을 하며, Gather를 사용해 팀 스크럼 및 동기 소통을 하고있다. Notion은 팀 프로젝트 개발 과정에서 수정할 점들이나 회고에 대한 문서화를 담당하고 있고, GitHub를 사용해 스케줄 관리 및 개발 문서화를 진행하고 있다. 처음에는 Jira와 같은 프로젝트 관리 앱을 사용하지 않는 것에 걱정이 있었지만 팀 규모(프론트 3명, 백엔드 3명)가 크지 않고, 각각의 협업 툴의 목적을 확실하게 정하고, 스크럼과 꾸준한 소통을 적절히 가져가다보니 오히려 또 다른 툴을 관리하는 데 시간을 줄이고 팀원들이 모두 빠르게 현재 상황을 공유할 수 있어서 좋은 선택이였다는 생각이 든다.

프로젝트 기술 스택

프론트엔드의 기술 스택은 아래와 같다.

React, TypeScript, Vite, Storybook, Daisy UI, Tailwind css, Emotion, React-query

기술 스택을 정할 때 프론트엔드 팀원들의 가장 큰 고민은 Next js 적용에 대한 고민이였다. react-query와 tailwind css를 처음 사용하는 팀원도 있고 아직 CSR, SSR, SSG에 대한 이해도가 낮다고 생각되어서 Next js는 과감하게 포기하게 되었다. 프로젝트를 진행하다보니 아직 react에 대해 깊게 배워가야 할 점들이 너무 많고 상태 관리 등 기본적인 부분에서 살짝 부족하다고 생각되는 부분들이 보여서 Next를 선택하지 않은 것은 짧은 프로젝트 기간에 잘했다고 생각되는 선택이다. 하지만 SSG, SSR, server component 등 next js를 공부해보면서 배울 점도 많다고 생각되기 때문에 지금은 틈틈히 next js도 공부하고 있다.

storybook은 이번 중간 팀 회고를 통해 프로젝트에서 삭제하고 더이상 사용하지 않기로 결정하였다. 팀원 모두가 Daisy UI를 적극적으로 사용하려고 노력하면서 공통 컴포넌트가 많이 줄어들기도 했고 3명의 프론트엔드 팀원이 꾸준한 PR 리뷰를 통해 작업 결과물에 대해 잘 이해하고 있기 때문에 필요성을 느끼지 못했다. 필요성을 느끼지 못하는 라이브러리는 과감하게 버리고 불필요한 코드 작성을 줄이면서 빠른 개발 속도를 챙기는 것도 중요하다고 생각되었다.

Tailwind css와 Emotion을 동시에 사용하는 것은 생각하지도 못했지만 멘토님의 피드백과 tailwind로 개발할 수 없는 기능(ex. 변수 값에 따라 색상이 동적으로 변경되어야 할때)등 tailwind만으로는 부족한 부분을 채우기 위해 Emotion을 추가로 사용하였다. Emotion을 사용해 react-calendar와 같은 라이브러리에 스타일을 적용할 때 잘 사용하고 있지만 아직 팀원들간에 Emotion과 Tailwindcss 적용 기준에 대해 명확한 것 같지 않아 중간 데모가 끝난 지금 다시 한번 규칙을 정하고 개발을 시작하려고 한다.

새로운 상태 관리 방법

이번에 프론트엔드 팀원이 가장 신경 쓰고 있는 부분은 로직과 UI 렌더링 코드의 분리이다. 사용자에게 보여줄 UI를 담당하는 컴포넌트는 UI 렌더링만, 로직을 담당하는 파일을 로직만을 담아 사용하여 분리하는 것을 목표로 개발을 진행하고 있고 이 과정에서 react context api를 적극적으로 사용하고 있다. 사실 이전에는 context api를 많이 사용해 본 경험은 없어 어떤 방식으로 사용하면 좋은 사용 방향을 가져갈 수 있을 지 많은 고민을 했지만 React State Hooks - useContext 멘토님의 블로그 글이 정말 큰 도움이 되었다. 아직 컨텍스트 단위로 컴포넌트들을 구조화하고 구현하는게 미흡해서 리팩토링이 필요한 부분들이 많이 보이지만 하나의 모달을 관리하는 과정에서 큰 효과를 얻을 수 있었고 계속해서 context api 사용하여 로직과 렌더링 코드를 분리해나가려고 한다.

앞으로...

이번 중간 팀 회고를 통해 서로가 부족하다고 생각한 점들과 추가가 필요한 부분들이 있다는 것을 확인하였다. 이러한 점들은 자세한 규칙 설정, 코드 리팩토링, 문서화를 통해 해결해나가려고 계획하고 있다.

개인적으로는 반응형 디자인 개발 과정에서 불편함을 느껴 이를 해결하고자 관련 툴을 추가하려고 계획하고 있다. 지금은 반응형 디자인을 개발하고 확인하기 위해 chrome 개발자 모드를 사용하고 있다. 하지만 한눈에 모바일, 태블릿, PC 화면을 모두 확인할 수 없어 계속해서 화면 사이즈를 변경해줘야한다는 번거로움이 있고 PR을 남기거나 확인할 때 모바일 화면 캡처를 까먹는 경우가 있어 직접 확인해서 리뷰를 남겨야한다는 불편함이 있다. 이를 해결하기 위해 도움이 되는 툴을 찾아보았고 responsively라는 툴을 알게되어 이번 쉬어가는 기간에 공부하고 팀원들과 공유해서 적용해볼 예정이다.

백엔드와 프론트엔드 협업이 처음이라 걱정했던 부분이 많았지만, 팀원 모두가 개발 중에 겪는 어려움에 대해 해결하려는 모습과 서로의 피드백을 적극적으로 반영하려는 모습에서 걱정보단 배울 점이 더 많다고 생각되었고 프로젝트 마지막까지 모두가 화이팅해서 좋은 결과물을 만들 수 있으면 좋겠다는 생각과 함께 나도 더 열심히 달려야겠다는 생각이 든다.

협업 툴

협업을 위해 우리 팀은 기획 단계에서는 figjam을 사용하였고 개발 단계에서는 Github를 적극적으로 사용하였다.

Figjam??

이번에 처음 사용해보게 되었던 figma 기반의 툴로 실시간으로 공유되는 노트 앱이다. 주제 선정부터 주제 구체화까지 프레인스토밍 형식으로 진행하였는데 간단하게 글로만 표현하는 것 보다 나의 생각을 시각적으로 보여줄 수 있도록 간단한 그림과 함께하니 내 의견을 더 구체화하기 쉬웠고 다른 팀원의 의견을 이해하기 쉬웠다.

GitHub

맨 처음 Github로만 개발 협업툴을 사용하기로 정했을 때 부족할 것 같기도 하다라는 생각이 들었지만 내가 Github의 기능들에 무지했다는 생각이 든다. issue와 project의 칸반보드를 사용한 일정 관리부터 discussion, 문서화를 위한 wiki, settings를 활용한 규칙 설정까지 소규모 프로젝트를 진행하기에 Github가 제공하는 기능들은 충분하고 유용했다. 진행 예정이나 진행하고 있는 작업에 issue로 등록하고 태그로 진행 상태를 알 수 있어서 서로가 어떤 작업을 하고있는지 한눈에 볼 수 있어서 좋았고 PR에 연결해서 issue가 자동으로 닫히게 하는 과정이 너무 편리했다. 개인적으로는 Action 기능을 추가로 사용하면 더 편리하게 협업할 수 있을 것 같다는 생각이 들어서 공부해볼 예정이다.

팀 문화

• 주체성을 가지고 움직이기

• 회의는 모두가 돌아가면서 진행해요. 🧐
  • 느긋하고 느슨한 것을 지양하기
• 2일 이내 작업과 스프린트 기반으로 일정과 목표를 선정해요. 🏃
  • 다른 사람의 의견에는 최소한의 반응하기
• 침묵보다는 작은 리액션 및 간단한 이모지라도 남겨요. 🙂
• 이야기가 끝날 때 박수로 마무리해요. 👏
  • 특이 사항은 즉각적으로 공유하기
• 일정이 늦어질 것 같으면 바로 이야기해요. 😆

우리 팀의 팀 규칙은 위와 같았다. 팀원간의 소통이 원활하게 되는 것을 중요하게 생각해서 이러한 규칙들을 정했고 모두가 지키기 위해 노력했다. 팀 프로젝트를 마무리한 지금 규칙들이 모두 잘 지켜졌나를 생각해보면 대부분 잘 지켜진 것 같다고 생각된다. 모두가 문서화와 소통을 통해 현재 자신의 작업 진행 상황을 공유하려고 노력했다. 하지만 기획 단계에서 유저스토리 작성을 통한 개발해야할 작업들을 세분화하지 못해 스프린트에 대한 아쉬움이 살짝 남는다.

개발 규칙

혼콕 팀 개발 규칙 우리 팀의 개발 규칙은 변수명과 커밋 컨벤션 등을 제외하면 Github 기능과 Eslint, Prettier를 사용해 자동으로 적용할 수 있게 하였다. 좋은 변수명이 무엇인지 이해하고 쉽고 가독성 좋은 컨벤션이 어떤 것인지 다같이 고민하고 이야기하는 과정을 통해 나쁜 변수명 설정 습관이나 컨벤션 습관을 고치려고 노력했다. 또 Eslint와 Prettier의 중요성에 대해 깨닫게 되는 계기가 되었다. 개인 프로젝트를 진행할 때는 Eslint와 Prettier를 모두 코드 포맷터처럼 사용했었다. Eslint와 Prettier의 차이점을 알고 있었지만 그 필요성을 별로 느끼지 못했다. 하지만 Eslint에 다양한 확장을 붙이고 팀원 간의 상의를 통해 필요하지 않은 규칙들을 제거해서 사용하니 너무 편리하게 느껴졌다. 코드 컨벤션에 위반되는 코드나 안티 패턴을 검사해줘서 일관성있는 코드를 작성하기 쉬웠고 때문에 내가 개발하지 않은 코드에 대해 빠르게 이해할 수 있었다.!

기술스택

StoryBook

우리 팀은 컴포넌트에 대한 문서화를 위해 storybook을 사용하였다. 초반엔 storybook의 사용법에 대해 공부한 상태가 아니여서 많이 헤매고 어려움을 겪었지만 익숙해진 후 다른 팀원이 개발한 컴포넌트에 대해 테스트 코드를 작성하지 않아도 시각적으로 컴포넌트에 props을 변경하며 확인해 볼 수 있어서 컴포넌트에 대한 이해를 쉽게 할 수 있었다. 프로젝트 막바지에는 시간에 쫓겨 storybook을 잘 사용하진 못했지만 프로젝트의 뼈대를 잡는데 큰 역할을 했다고 생각한다.

React Query(Tanstack Query)

이번 프로젝트를 진행하면서 가장 깊게 공부했다고 생각하는 라이브러리는 react query라고 생각한다. 사용자 로그인 상태 관리 부분을 맡았기 때문에 react query를 자세히 공부해야했고 그 결과 로그인 상태 관리 부분을 완성할 수 있었다고 생각한다. react query를 사용하면서 가장 어려움을 겪었던 부분은 staletime과 cachetime에 대한 이해도가 낮아서 발생했는데 문제를 해결하기위해 공부하면서, 또 해결하고 난 후 문서화(staletime과 cachetime 이란?)를 통해 팀원들과 문제와 해결 방법을 공유하면서 이해도를 높이려고 노력했다. react query를 사용해본 결과 react query는 서버 상태 패칭, 캐싱, 동기화 및 업데이트를 하는데 너무나 큰 도움을 주는 라이브러리이기 때문에 다른 프로젝트에서도 적극적으로 사용하고 싶고 더 공부해볼 필요가 있는 라이브러리라는 생각이 들었다.

4L

Liked (좋았던 점)

• 기능 개발 중 공식 docs를 많이 활용하려고 노력했다.
• PR을 통해 다른 팀원의 코드를 보면서 다양한 방법과 구조에 대해 공부할 수 있었다.
• 협업 툴로 Github를 사용하다보니 다양한 Github 기능을 경험할 수 있었다.
• 어려움을 겪었던 문제에 대한 해결방법을 팀원들과 공유하기 위해 노력했다.

Learned (배운 점)

• 사용자 로그인 상태 관리 파트를 맡아 개발하면서 react-query에 대해 이해하고 적절하게 사용하려고 노력을 했었다.
• 리액트에 타입스크립트를 사용하는게 어려웠었는데, 프로젝트를 하면서 학습을 많이 한 것 같다.
• 팀 프로젝트를 위해 개발 규칙이나 팀 문화를 만들어가는 과정을 통해 팀 프로젝트의 흐름에 대해 배울 수 있었다.

Lacked (부족했던 점)

• 추가 요구사항을 포함한 모든 요구사항들을 구현하는 것이 목표였는데 그 중 다크모드를 구현하지 못한 부분이 아쉬웠다. (리팩토링!! 🔥)
• 스스로 팀 규칙에 대해 잘 지켰는지 생각해보면 그렇지 않은 것 같다. 특히 작업 단위를 작게 가져가는 부분을 많이 지키지 못한 것 같다.
• 후반에 맡은 기능 구현을 급하게 하다보니 다른 팀원의 PR에 많은 신경을 쓰지 못한 것 같다.

Longed For (바라는 점)

• 팀 문화에 대해 더 많이 고민하고 다음 프로젝트에서 더 좋은 팀 문화를 만들 수 있도록 노력하기!
• 개인 프로젝트도 한번 진행해보기! ⇒ 새로운 것들을 적극적으로 사용해보자!
• 더 좋은 문서화를 고민하고 작성해보기

Vue를 사용한 영화 검색 서비스

OMDb PEDIA 바로가기 vue, typescript를 사용해서 영화 검색 사이트를 제작했었다. vue는 react보단 쉽게 접근할 수 있는 부분이 많다고 생각했다. 아무래도 vue는 프레임워크이다 보니 어떤 기능 구현을 위한 접근 방법이 거의 정해져 있고 사용법만 익힌다면 금방 적용이 가능했었다. 지금 누가 react와 vue 중 어떤 걸 선택할래 라고 물어본다면 쉽게 대답할 순 없을 것 같다... 그만큼 vue도 흥미로운 기술이라고 생각한다. 이 프로젝트에서는 tailwindcss도 적용해서 왓챠피디아 레이아웃 클론코딩도 같이 진행했었다. tailwindcss 사용이 처음에는 너무 어색하고 scss나 css in js 라이브러리를 사용한 것 보다 어려웠지만 이 프로젝트를 통해 적응할 수 있었고 지금은 tailwindcss가 매력적인 css 라이브러리로 생각된다. 특히 상태에 따른 css 적용이나 peer와 같은 형제 요소 선택자는 개발 속도를 더 높혀준다고 생각한다.

잘한 점 or 배우게 된 점

• tailwindcss 사용이 초반에 비해 능숙해져서 빠른 css 적용이 가능해졌다.
• 그동안 잘 몰랐던 vue에 대해 공부하고 react와 비교해보며 vue만의 장점을 알게 되었다.

  개선해야 할 점

• vue를 vue답게 쓰는 법에 대해 좀더 공부해야할 것 같다.
• 컴포넌트의 역할에 대해 다시 한번 생각해보고 구현을 해야한다.

View 네비게이션 시스템 구현(React)

카드 만들기 바로가기

React를 사용하고 react-router는 사용하지 않는 View 네이게이션 시스템 만들기 과제에서 funnel 구조를 사용해 카드 만들기 서비스를 제작했다. toss의 useFunnel과 비슷한 custom hook을 만들어 구현하려고 했지만 리렌더링 과정에서 문제가 있어서 결국 형식만 비슷하게 구현하였다. 이 과제를 하면서 느낀점은 react에 typescript를 적용을 위해서 더 공부해야겠다는 생각이 들었다. 물론 type을 적용할 순 있지만 더 깔끔한 구조로 개발자에게 적절한 타입을 제공해주는 방법들에 대한 피드백을 받고나서 공부의 필요성을 느꼈다. typescript에 대한 사용은 미흡했지만 그래도 컴포넌트의 분리나 전체적인 구조는 나름대로 잘 구현한 것 같아서 만족스러웠다.

잘한 점 or 배우게 된 점

• 컴포넌트 분리를 잘했다.
• typescript를 최대한으로 사용하려고 노력했다.
• useFunnel에 대해 공부해보며 페이지 전환 구현 방법에 대해 공부할 수 있었다.

  개선해야 할 점

• react에 typescript를 적용하는 부분이 아직 미흡한 것 같다. 더 공부가 필요하다.
• 나만의 useFunnel을 성공시켜보자.
• 외부 라이브러리 도움없이 페이지 전환 애니메이션을 적용해보자.

이펙티브 타입스크립트

이펙티브 타입스크립트를 읽고 있다. 아직 전부 읽은 것은 아니기 때문에 9월에도 이 책을 계속해서 공부할 예정이다. 이제까지 책을 읽으면서 가장 인상 깊었던 점은 타입을 집합이라고 생각하라고 말하는 부분이다. 그동안 typescript의 인터섹션과 유니온을 사용하면서 가끔 이상하다고 생각하는 부분들이 있었는데 타입들을 집합이라고 생각한 순간 궁금증을 해결할 수 있었다.

9월 계획

9월은 팀 프로젝트가 진행되는 달이다. 이번 팀 프로젝트에서 내 개인적인 목표는 요구사항과 보너스 요구사항을 모두 구현하기 위해 열심히 달려보기! 그리고 팀과 소통하고 소통하기! 이다. 9월이 지난 후 나는 typescript를 잘 이해하고 적절하게 적용하는 사람, react 주니어를 벗어난 사람이 되고 싶다!

데브코스 과제들

고양이 갤러리

Vanilla JS를 사용한 고양이 갤러리에 정합성 체크와 최적화를 개선하는 과제를 했다. 각 컴포넌트들의 상태(state)를 비교해서 상태에 변화가 생긴 경우에만 리렌더링을 하도록 하는 로직 추가가 핵심 이였다.

개선해야 할 점

• 고양이 갤러리 API는 API 요청에 고의적으로 1~3초로 랜덤 딜레이가 들어가 있다. 빠른 로딩을 위해 Cache Web API를 사용하면 더 좋을 것 같다.

잘한 점 or 배우게 된 점

• 듣기만 했던 lodash 라이브러리를 조금은 공부할 수 있었다. 컴포넌트의 객체 상태 변화 감지를 lodash를 사용해서 적절하게 구현했다고 생각한다.
• Vanilla JS로 컴포넌트 형식으로 구현과 SPA와 비슷하게 구현하는 것에 대해 많이 공부할 수 있었고 Vanilla JS에 대해 자신감이 많이 생긴 프로젝트였다.

  모바일 네이버 페이지 레이아웃 클론

  네이버 클론 바로가기 SCSS를 사용해서 네이버 모바일 페이지 레이아웃을 클론하는 과제를 했다. 이 과제를 통해 원래도 알고 있었지만 CSS는 항상 꾸준히 공부해야 겠다는 생각이 들었다. 다른 개발자 분들이 구현한 CSS코드를 많이 보며 레이아웃 구현 센스를 많이 키워야 겠다는 생각이 든 과제였다.

  개선해야 할 점

• 시멘틱 태그를 더 적극적으로 사용해야 한다. a, main, header와 같은 기본적이 태그 외에 section, article 태그 등 다른 시멘틱 태그도 더 많이 사용해서 웹 접근성을 향상시킬 필요가 있다.
• BEM 방법에 대해 좀더 공부해보자... BEM 방법론이 생각보다 어렵게 느껴졌고, 잘 적용하지 못한 것 같다.
• &(상위 선택자)를 더 적극적으로 사용하자.

잘한 점 or 배우게 된 점

• 페이지의 크기에 따라 반응형으로 제작하는 과정에 grid 레이아웃을 적용하면서 grid에 대해 많이 공부할 수 있었다.
• 잘 만들어진 웹 사이트 레이아웃을 클론 코딩하면서 사용하기 편한 레이아웃이 뭔지 생각해보는 계기가 되었다.

Vue? Webpack?

프론트엔드를 공부하면서 Vue를 공부하겠다고 생각해본적은 없었다. React 배우기도 바쁘다는 핑계로 Vue는 공부하려고 하지 않았었다. 이번 데브코스 강의를 통해 Vue에 대해 공부할 수 있었고 Vue가 생각보다 흥미롭다는 생각이 들었다. 라이브러리인 React와 프레임워크인 Vue의 차이점에 대해 알 수 있었고 React와는 다른 매력을 Vue가 가지고 있다고 생각한다. Vue 프로젝트를 세팅하는 과정에서 Webpack과 Vite 번들러에 대해서도 공부할 수 있었다. 사실 Vite는 세팅 과정이 쉬워서 공부한 부분이 많다고 말할 순 없지만 너무 어렵다고 느껴졌던 webpack에 대해 제대로 배울 수 있었다. webpack에 대해 어렵다고 느낀 부분은 eslint, prettier, 외부 라이브러리 등을 프로젝트에 추가하면서 계속해서 생기는 컴파일 오류였다. 하지만 강의의 세팅을 따라해보며 여러 속성들을 추가하는 이유와 속성의 사용 방법을 공부할 수 있었고 webpack도 이제 어느정도 사용할 수 있게 되었다.

개선해야 할 점

• 앞에 배웠던 부분을 벌써 조금은 까먹은 것 같다... Vue의 공식 문서를 읽어보며 복습하는 시간을 가져야 한다!

잘한 점 or 배우게 된 점

• 저번 과제에서 Webpack을 적용하려다가 실패했던 경험을 바탕으로 webpack에 대해 좀더 기억이 남는 공부를 할 수 있었다. 어렵다고 생각되는 부분은 무작정 시도해보고 좌절은 겪은 후 공부하면 더 오래 기억에 남는 걸 이용해야겠다.

  개인 블로그...

  개인 블로그를 만들기 위해 적용하고 싶은 기술을 들을 공부하고 있다. NextJS, Tailwind CSS등을 공부하면서 새로운 기술들에 대해 많이 공부할 수 있었고 이제는 블로그 제작을 이어갈 단계만 남았다!

  개선해야 할 점

• 공부를 하다보니 계속 욕심이 생겨서 다른 것들을 공부하고 정작 시작은 안하고 있다... 항상 MVP(Minimum Valuable Product)를 기억하고 튜토리얼 지옥에 빠지지 말자.

잘한 점 or 배우게 된 점

• NextJS를 공부하면서 React의 server component의 원리 등을 추가로 공부하면서 이해를 높이기 위해 노력했다.

• 그동안 공부해보고 싶었던 tailwind에 대해 공부했다. 이제 적용을 통해 사용법에 익숙해져야 한다.

  8월 계획

  7월달을 돌아보니 정말 많은 것들을 공부했던 것 같다. 7월엔 이론 학습를 많이 했다면 8월은 실습 학습을 많이한 달로 기억하고 싶기에 다음과 같은 계획들을 가지고 있다.

• 개인 블로그 배포하기(14일 전까지)

• 전에 했던 4=10 클론 프로젝트 tailwindCSS로 리팩토링하고 배포하기(9월 전까지)

• 이펙티브 타입스크립트 책 공부 시작하기(8월은 3장까지 읽기)

• 타입스크립트는 동적 타입의 자바스크립트에 정적 타입을 부여한 언어로 자바스크립트의 확장된 언어라고 볼 수 있음

  • JS: 동적 타입 ⇒ 런타임에서 동작할 때 타입 오류 확인
  • TS: 정적 타입 ⇒ 코드 작성 단계에서 타입 오류 확인

• 타입스크립트로 작성된 파일은 실행전 자바스크립트 파일로 컴파일하는 과정이 필요함

  npm i typescript -D // 개발모드에 TS설치

  npx tsc --init // 타입스크립트의 컴파일 옵션을 기본으로 실행함

  npx tsc // 프로젝트 폴더에 안에 있는 모든 TS파일이 tsconfig에 맞춰서 JS로 컴파일됨

TypeScript에서 제공하는 데이터 타입

ECMAScript 표준에 따른 기본 자료형 6가지

• Primitive Type
  • Boolean
  • Number
  • String
  • Null
  • Undefined
  • Symbol
• Array: object형

추가적으로 제공하는 타입

• Any, Void, Never, Unknown
• Enum
• Tuple: object 형(Array와 유사한 형태)

타입 설명

Symbol

• primitive값을 담아서 사용하며 고유하고 수정불가능한 값으로 만들어 줌. (주로 접근을 제어하는데 쓰는 경우가 많음)
• 함수로 사용할때는 대문자로 Symbol, 타입으로 사용할 때는 소문자로 symbol을 사용

null & undefined

• tsconfig(컴파일 옵션)에 설정을 따로 하지 않는 이상 number에 null과 undefined를 할당할 수 있음.
• 이를 막기위해 컴파일 옵션에서 ‘--strictNullChecks’를 사용하면 null과 undefined는 void(undefined만 가능)나 자기 자신들에게만 할당 가능 ⇒ null과 undefined를 할당할 수 있게 하려면, union type을 이용해야 함

let union: string | null = null;

object

• primitive type이 아닌 것을 나타내고 싶을 때 사용하는 타입
• non-primitive type: not number, string, boolean, bigint, symbol, null, undefined

//create by object literal
const person1 = {name: 'gu', age: 24};
//person1은 "object" type이 아님, person1은 "{name: string, age: number}" type

//create by Object.create
const person2 = Object.create({name: 'gu', age: 24});

Array

• Array - 이 방식은 jsx, tsx에서 충돌이 발생할 가능성이 있기 때문에 사용하지 않는 것이 좋음
• type[]

let list: Array<number> = [1, 2, 3];
let list: number[] = [1, 2, 3];

tuple

• 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미
• 즉 순서에 따른 타입이 정확하게 할당되어야 함.
• push, splice 등을 통해 배열의 길이가 변경이 가능하므로 사용에 주의해야함

let x: [string, number];
x = ["hello", 24];
x = [10, "hello"]; //error
x[2] = 'go'; //error

any

• 모든 타입에 대해 허용

• 컴파일 옵션중에 any를 작성하지 않으면 오류를 표시하도록 하는 옵션이 있음 → noImplicitAny

• any는 계속해서 개체를 통해 전파됨 → 타입 안전성은 TS를 사용하는 주요 동기 중 하나이기 때문에 필요하지 않는 경우에는 any를 사용하지 않도록 해야함

• any가 개체를 통해 전파되는 예

    let looselyTyped: any = {};
    let d = looselyTyped.a.b.c.d;
    //위의 코드는 코드 작성 시 오류가 발생하지 않으며 d의 타입은 any로 추론됨.

unknown

• any가 주는 타입의 불안전함을 어느정도 해소하기 위해 나온 대체제
• 컴파일러가 타입을 추론할 수 있게끔 타입의 유형을 좁히거나 타입을 확정해주지 않으면 다른 곳에 할당할 수 없고 사용할 수 없음
• 따라서 any대신 unknown을 사용하는 것이 좋음

declare const maybe: unknown;

const aNumber: number = maybe; //error

if (maybe === true) {
    const aBoolean: boolean =  maybe;
    const aString: string = maybe; //error
}

if(typeof maybe === 'string'){
    const aString:string = maybe;
    const aBoolean: boolean =  maybe; //error
}

unknown 타입은 위와 같이 타입가드를 통해서 타입을 한정시켜야지만 사용할 수 있음

never

• never 타입은 모든 타입의 subtype이며, 모든 타입에 할당 할 수 있음, 하지만 never에는 그 어떤 것도 할당할 수 없음. (any도 never에게 할당할 수 없음)

• 함수의 끝에 절대 도달하지 않는다는 의미 또는 정상적으로 종료되지 않는 함수의 반환 타입으로 사용함

• never 사용 예시

    function error(message: string): never{
        throw new Error(message);
    }
  
    function fail(){
        return error('failed');
    }
  
    function infiniteLoop(): never{
        while(true) {
  
        }
    }

void

함수의 반환 값이 없다고 명시적으로 작성하는 타입

function returnVoid(message: string): void {
    console.log(message);
    return;
}

returnVoid("no return");

enum

• 특정 값(상수)들의 집합을 의미
• 타입 + 값의 집합으로 역방향 매핑 가능

enum Animals { Cat, Dog, Lion }
console.log(Animals[0]); // Cat
console.log(Animals.Cat); // 0

• enum의 인덱스를 사용자 편의로 변경하여 사용 가능

enum Animals { Cat = 1, Dog, Lion }
console.log(Animals[1]); // Cat
console.log(Animals[3]); // Lion

• 문자를 할당하게 되면 역방향 매핑이 불가능함

enum Animals {
  Cat = 'meow',
  Dog = 1,
  Lion = 2,
}

console.log(Animals.Cat); // meow
console.log(Animals[0]); //undefined

union

• 2개 이상의 타입이 허용되는 타입

let uni: string | number = 0;
uni = 'hi';
uni = 123;

intersection

• 2개 이상의 타입이 병합된 타입

type UserA = {
  name: string;
  age: number;
};

type UserB = {
  isValid: boolean;
};

const userA: UserA = {
  name: 'a',
  age: 12,
  isValid: true, // error
};

const userB: UserB = {
  name: 'B', // error
  age: 11,
  isValid: true,
};

const userC: UserA & UserB = {
  name: 'C', age: 40, isValid: false
};

타입 추론(Inference)

• TypeScript가 작성된 코드에서 타입을 알 수 있는 경우
  • 초기화된 변수
  • 기본값이 지정된 매개변수
  • 반환이 있는 함수
• 타입 추론을 통해 모든 곳에 타입을 명시할 필요가 없음

let a = 'Hello'; // string이라는 별도의 타입을 명시할 필요가 없음
a = 123; // error

function join(a: string, b = '') { //b 매개변수에 타입을 명시할 필요가 없음
  return a + b; // 함수의 반환 타입도 작성하지 않아도 됨
}

const a: number = join('hello', 'world'); // error

타입 단언(Assertion)

• 개발자가 typescript에게 타입을 단언해서 명시할 수 있음
• as, ! (Non-null 단언 연산자)

// as 키워드를 통해 btn이 버튼 엘리멘트임을 단언함
const btn = document.querySelector('button') as HTMLButtonElement;
// (btn as HTMLButtonElement).classList.add('btn'); 나중에 단언도 가능

// ! 키워드를 통해 btn 변수가 null이나 undefined가 아님을 단언함
const btn = document.querySelector('button')!;
// btn!.classList.add('btn'); 나중에 단언도 가능

// as 키워드 사용 예
function toTwoDecimals(val: number | string, isNum: boolean) {
  if (isNum) {
    (val as number).toFixed(2);
  } else {
    (val as string).slice(0, 2);
  }
}

toTwoDecimals(3.141592, true);
toTwoDecimals('hi', false);

const json = '{"name": "gugu", age: 22}';
const user = JSON.parse(json);
console.log(user.email); // 에러가 발생하지 않음

// as 키워드 사용 예
const json = '{"name": "gugu", age: 22}';
const user = JSON.parse(json) as { name: string, age: number};
console.log(user.email); // error

let num: number;
console.log(num); // 초기화가 되지 않아 undefined이므로 오류 발생

let num!: number; // 할당 단언
console.log(num); // 초기화가 되어졌다고 typescript가 판단하기 때문에 오류가 발생하지 않음

타입 가드

• 타입 추론이 가능한 특정 범위(scope) 안에서 타입을 보장하도록 하는 방법
• typeof, instanceof, in 등을 통해 타입 가드가 가능

const btn = document.querySelector('button');
if (btn) { // if 조건을 통해 btn이 null이 아님이 보장됨
  btn.classList.add('btn');
  btn.id = 'abc';
}

if (btn instanceof HTMLButtonElement) { // 해당 방법도 가능
  btn.classList.add('btn');
  btn.id = 'abc';
}

function toTwoDecimals(val: number | string) {
  if (typeof val === 'number') { // typeof를 통해 val의 타입 가드를 형성함
    val.toFixed(2);
  } else {
    val.slice(0, 2);
  }
}

toTwoDecimals(3.14);
toTwoDecimals('hi');

type UserA = { name: string; age: number };
type UserB = { id: string; email: string };

// is 키워드를 통해 isUserA라는 함수가 UserA 인것을 확인하는 용도의 함수라는 것을 알림
function isUserA(user: unknown): user is UserA {
  if (user && user.constructor === Object) {
    const u = user as UserA;
    return typeof u.name === 'string' && typeof u.age === 'number';
  }
  return false;
}

fetch('https://test.com')
  .then((res) => res.json())
  .then((user: UserA | UserB) => {
    if (isUserA(user)) {
      console.log(user.name[0]);
      console.log(user.age - 10);
    }
  });

타입 별칭(Type Alias)

• Interface와 비슷하게 보임
  • Interface: 어떤 타입이 타입으로서 목적, 존재 가치가 명확하면 사용
  • Type Alias: 다른 대상을 가리키거나 별명으로서만 존재하면 사용
• Primitive, Union Type, Tuple, Function, 기타 직접 작성해야하는 타입을 다른 이름을 지정할 수 있음
• 만들어진 타입의 refer로 사용하는 것이지 타입을 직접만드는 것이 아님
• type은 파스칼 케이스를 주로 사용함

Aliasing Primitive

type MyStringType = string;

const str = 'world';

let myStr: MyStringType = 'hello';
myStr = str;

Aliasing Union Type

type StringOrNumber = string | number;

let another: StringOrNumber = 0;
another = 'Hi';

Aliasing Tuple

type PersonTuple = [string, number];

let another: PersonTuple = ['gu', 24];

Aliasing Function

type EatType = (food: string) => void;

Interface

개체(객체, 배열, 함수, 클래스 등)를 정의하는 타입

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

optional property

interface 인터페이스_이름 {
  속성?: 타입;
}

위의 코드와 같이 속성뒤에 ?를 붙이게 되면 해당 속성은 옵션으로 변하게 됨 ⇒ type에서도 사용이 가능함

인덱스 시그니처(Index signature)

인덱싱 가능한 타입을 만들 때 인터페이스의 인덱스 시그니처 방식을 이용함

interface Arr {
  [key: number]: string;
}
const arr: Arr = ['A', 'B', 'C'];
console.log(arr[1]); // B

interface ArrLike {
  [key: number]: string;
}
const arrLike: ArrLike = { 0: 'A', 1: 'B', 2: 'C' };
console.log(arrLike[1]); // B

interface Obj {
  [key: string]: string;
}
const obj: Obj = { a: 'A', b: 'B', c: 'C' };
console.log(obj['b']); // B
console.log(obj.b); // B

• 인터페이스에 정의하지 않은 속성들을 추가로 사용하고 싶을 경우는 아래와 같은 방법으로 사용할 수 있음

interface Person3 {
  name: string;
  age: number;
  [index: string]: string | number;
}

const p32: Person3 = {
  name: 'gugu',
  email: 'test@test.com',
  person_id: 1,
  age: 23,
};

타입 인덱싱

인터페이스라는 하나의 타입 안에 들어있는 속성의 또 다른 타입을 타입 인덱싱을 통해 얻어낼 수 있음

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

const a: User['name'] = 'gugu';
const b: User['age'] = 123;

function in interface

interface Person4 {
    name: string;
    age: number;
    hello(): void;
}

const p41: Person4 = {
    name: 'gugu',
    age: 12,
    hello: function(): void {
        console.log(`hi ${this.name}`);
    }
};

const p42: Person4 = {
    name: 'ququ',
    age: 11,
    hello(): void{
        console.log(`hi ${this.name}`);
    }
}

// arrow function에서는 this를 사용할 수 없기 때문에 오류 발생
// const p43: Person4 = {
//     name: 'dudu',
//     age: 11,
//     hello: (): void => {
//         console.log(`hi ${this.name}`);
//     }
// } 

p41.hello();
p42.hello();

class implements interface

인터페이스를 이용해서 클래스(생성(구문) 시그니처(Construct signature))를 만들어내는 방법

interface UserI {
  name: string;
  getName(): string;
}

interface UserC {
  new (n: string): UserI; // 생성 시그니처
}

class User implements UserI {
  public name;
  constructor(name: string) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

const user = new User('Gugu');
user.getName(); // Gugu

// userClass에는 생성 시그니처 타입이 정의되어야 함
function hello(userClass: UserC, msg: string) {
  const user = new userClass('Gugu');
  return `hello ${user.getName()} ${msg}`;
}

hello(User, 'hi');

interface extends interface

인터페이스를 확장하는데 사용함

interface IPerson2{
    name: string;
    age?: number;
}

interface IKorean extends IPerson2{
    city: string;
}

const k: IKorean = {
    name: 'gugu',
    city: 'seoul',
    age: 12,
};

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

interface User { // 첫 부분의 User와 합쳐짐
  isValid: boolean;
}

const user: User = {
  name: 'Gu',
  age: 24,
  isValid: true
}

interface FullName {
  first: string;
  last: string;
}

interface FullName {
  mid: string;
  last: boolean // error
  // 중복해서 인터페이스를 정의할 경우 기존에 존재하는 속성에 다른 타입을 지정할 수 없음
}

function interface

interface HelloPerson {
    (name: string, age?: number): void;
}

const helloPerson: HelloPerson = function(name: string, age?: number) {
    console.log(`hi ${name}`)
}

Readonly Interface Properties

• readonly: 읽기 전용 속성으로 설정하는 키워드 ⇒ type에서도 사용 가능

interface Person8 {
    name: string;
    age?: number;
    readonly gender: string;
}

const p81: Person8 = {
    name: 'gugu',
    gender: 'male',
}

p81.gender = 'female'; //읽기 전용 속성이므로 'gender'에 할당할 수 없음

함수의 명시적 this 타입

interface User {
  name: string
}

// this의 타입을 명시적으로 정의할 수 있음
function greet(this: User, msg: string) {
  return `${msg}, ${this.name}`;
}

const gu = {
  name: 'gu',
  greet
};

gu.greet('Hi'); // Hi, gu

const neo = {
  name: 'Neo',
};

greet.call(neo, 'Bye');

type alias vs interface

type alias: 어떤 타입을 부르는 이름을 말함

interface: 새로운 타입을 만들어 내는 것 ⇒ 객체 타입을 정의할 땐 interface를 주로 사용함

• function에 대한 차이

    //type alias
    type EatType = (food: string) => void;
  
    //interface
    interface IEat {
        (food: string): void;
    }

• array

    //type alias
    type PersonList = string[];
  
    //interface
    interface IPersonList {
        [index: number]: string;
    }

• intersection

    interface ErrorHandling {
      success: boolean;
      error?: { message: string };
    }
  
    interface ArtistsData {
      artists: { name: string }[];
    }
  
    // type alias
    type ArtistsResponseType = ArtistsData & ErrorHandling;
  
    // interface
    interface IArtistsResponse extends ArtistsData, ErrorHandling {}
  
    let art: ArtistsResponseType;
    let iar: IArtistsResponse;

• union types

    interface Bird {
      fly(): void;
      layEggs(): void;
    }
  
    interface Fish {
      swim(): void;
      layEggs(): void;
    }
  
    type PetType = Bird | Fish;
  
    interface IPet extends PetType {} // error
  
    class Pet implements PetType {} // error

Declaration Merging

• interface

    interface Person {
      name: string;
    }
  
    interface Person {
      age: number;
    }
  
    let person: Person = {
      name: 'gugu',
      age: 12
    }
  
    console.log(person)

• type alias는 할 수 없음.

타입스크립트에서 함수 사용

const foo1: (a: string, b: number) => string = (a, b) => {
  return a;
};

const foo2 = (a: string, b: number): string => {
  return a;
};

const foo3: (a: string, b: number) => string = function (a, b) {
  return a;
};

const foo4 = function (a: string, b: number): string {
  return a;
}

function foo5(a: string, b: number): string {
  return a;
}

함수 오버로딩

function addString(x: string, y: string): string {
  console.log(x, y);
  return x + y;
}

function addNumber(x: number, y: number): number {
  console.log(x, y);
  return x + y;
}

function add(x: string, y: string): string; // 구현부
function add(x: number, y: number): number; // 구현부
function add(x: any, y: any): any { // 선언부
  console.log(x, y);
  return x + y;
}

add('Hi', 'World');
add(12, 13);
add('Hi', 13); // error
add(12, 'World'); // error

interface UserBase {
  name: string;
  age: number;
}

interface User extends UserBase {
  updateInfo(newUser: UserBase): User;
  updateInfo(name: string, age: number): User;
}

const user: User = {
  name: 'gu',
  age: 24,
  updateInfo: function (nameOrUser: UserBase | string, age?: number) {
    if (typeof nameOrUser === 'string' && age !== undefined) {
      this.name = nameOrUser;
      this.age = age;
    } else if (typeof nameOrUser === 'object') {
      this.name = nameOrUser.name;
      this.age = nameOrUser.age;
    }
    return this;
  },
};

console.log(user.updateInfo({ name: 'gu', age: 23 })); // { name: 'gu', age: 23, updateInfo: f }
console.log(user.updateInfo('Leon', 51)); // { name: 'Leon', age: 51, updateInfo: f }

Access Modifiers(접근 제어자)

• 접근 제어자에는 public, private, protected가 있음
• 클래스 내부의 모든 곳(생성자, 프로퍼티, 메서드)에 설정 가능
• JS에서는 private를 지원하지 않아 프로퍼티나 메서드 이름 앞에 _를 붙여서 표현했음

Initialization in constructor parameters

class PersonClass {
    public constructor(public name: string, public age: number) {}

//위의 코드는 아래의 코드와 동일한 결과를 보여줌
    public name: string;
    public age: number;
    public constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }
}

const p4 = new PersonClass('Gu', 13);
console.log(p4);

readonly properties

• 접근 제어자와 상관 없이 readonly 키워드가 있는 변수는 초기화 영역에서만 값 설정이 가능하고 나머지 모든 부분(class의 method도 포함)에서는 변경이 불가능함

Index Signatures in class

• 프로퍼티 이름이 동적으로 들어오는 경우에 사용할 수 있다.

// { gu: 'male', mark: 'male, jade: 'male'}
// { gu: 'male', chloe: 'female', alex: 'male', anna: 'female'}

class Students {
    [index: string]: "male" | "female";
    gu: 'male' = 'male';
}

const a = new Students();
a.mark = 'male';
a.jade = 'male';
console.log(a);

const b = new Students();
b.chloe = 'female';
b.alex = 'male';
b.anna = 'female';
console.log(b);

Static Properties & Methods

class PersonClass {
    private static CITY = 'SEOUL';
    public static hello() {
        console.log('hi', PersonClass.CITY);
    }
}

const p = new PersonClass();
// p.hello();

PersonClass.hello(); //hi SEOUL

• 사용 예시

    class PersonClass {
        private static CITY = 'SEOUL';
        public hello() {
            console.log('hi', PersonClass.CITY);
        }
        public change() {
            PersonClass.CITY = 'LA';
        }
    }
  
    const p = new PersonClass();
    p.hello(); // hi SEOUL
    const p12 = new PersonClass();
    p12.hello(); // hi SEOUL
    p.change();
    p12.hello();  // hi LA

Singletons(싱글톤 패턴)

• sigeletons: 애플리케이션이 실행되는 중간에 클래스로부터 단 하나의 오브젝트만 생성해서 사용하는 패턴을 말함

• 사용법

  • private constructor를 사용해 new 키워드로 클래스에 대한 오브젝트 생성을 막는다.

  • 오브젝트를 처음 생성하거나 생성된 오브젝트가 이미 존재한다면 그걸 리턴하는 메서드를 만든다.

    class ClassName {
      private static instance: ClassName | null = null;
      public static getInstance(): ClassName {
          // ClassName으로부터 만든 object가 있으면 그걸 리턴
          // 없으면, 만들어서 리턴
          if (ClassName.instance === null) {
              ClassName.instance =  new ClassName();
          }
          return ClassName.instance;
      }
    
      private constructor() {}
    }
    
    const a = ClassName.getInstance();
    const b = ClassName.getInstance();
    
    console.log(a === b); // true

Abstract Classes

• 완전하지 않은 class를 표현하며 new를 이용해서 객체를 생성할 수 없음

• abstract class를 상속받으면 abstract function을 구현해야함

    abstract class AbstractPerson {
      abstract name: string;
      abstract getName(): string;
    }
  
    // new AbstractPerson(); 에러 발생
  
    class PersonClass extends AbstractPerson {
      constructor(public name: string) {
        super();
      }
      getName(): string {
        return this.name;
      }
    }
  
    const p = new PersonClass('GuGuGu');
    console.log(p.getName());

• interface의 implements와 abstract의 extends를 동시에 사용할 수 있음(extends 키워드가 implements보다 앞으로 와야함)

    class Cat extends CatA implements AnimalI1, AnimalI2 {
        ...
    }

interface와의 차이점

• interface를 implements할 때는 super가 필요없지만 abstract를 extends할 때는 super가 필요함

• type만을 선언하는 interface와는 다르게 abstract는 type 선언과 구현부 코드를 포함할 수 있음

    abstract class AnimalA {
      abstract color: string;
      abstract getColor(): string;
      constructor(public sound: string) {}
      speak() {
        return this.sound;
      }
    }
  
    class Dog extends AnimalA {
      constructor(
        sound: string,
        public color: string,
      ) {
        super(sound);
      }
      getColor() {
        return this.color;
      }
    }

• 추상 클래스는 단일로(Is-A 관계)만 사용할 수 있지만 interface는 여러개(Has-A)를 사용할 수 있음

    class Cat implements Animal1, Animal2 {
        ...
    }

데코레이터

• 클래스에서 사용하는 개념

• 하나의 함수를 클래스, 클래스의 속성, 클래스의 메소드, 메소드의 매개 변수에 연결할 수 있음

    function deco(target: any) {
      console.log(target);
      return class {
        constructor(
          public a: any,
          public b: any,
        ) {
          console.log(this.a, this.b);
        }
      } as any;
    }
  
    @deco // 해당 부분에서 User클래스는 자신의 클래스 구조가 아닌
    // deco 함수가 반환한 클래스의 구조를 가지게됨
    class User {
      constructor(public name: string) {}
  
      hello(msg: string) {
        return `Hello ${this.name}, ${msg}`;
      }
    }
  
    const gu = new User('Gu', 21); // deco 함수의 반환값인 클래스로 객체 생성
    const neo = new User('Neo', 22); // deco 함수의 반환값인 클래스로 객체 생성
    console.log(gu);
    console.log(neo);

• 예: 클래스에서 객체를 생성할 때마다 서버에 데이터를 보내는 코드 작성 ⇒ 생성자 함수를 호출할때마다 데코레이터 함수의 반환문이 실행된됨 즉 데코레이터의 반환문 이외의 코드는 클래스에 연결될때 한 번만 실행됨.

    function deco<T extends { new (...args: any[]): any }>(target: T) {
      if (target.name !== 'User') {
        throw new Error('클래스의 이름이 User가 아님');
      }
      console.log('정상적인 클래스의 이름');
  
      // 반환하는 클래스의 연결된 클래스를 확장해서 복사함
      return class extends target {
        constructor(...args: any[]) {
          super(args);
          fetch('서버 주소', {
            //
          });
          console.log('서버로 데이터를 보냄');
        }
      };
    }
  
    @deco // 해당 부분에서 User클래스는 자신의 클래스 구조가 아닌
    // deco 함수가 반환한 클래스의 구조를 가지게됨
    class User {
      constructor(public name: string) {}
  
      hello(msg: string) {
        return `Hello ${this.name}, ${msg}`;
      }
    }
  
    const gu = new User('Gu'); // deco 함수의 반환값인 클래스로 객체 생성
    const neo = new User('Neo'); // deco 함수의 반환값인 클래스로 객체 생성
    console.log(gu);
    console.log(neo);

  

제네릭(Generics)

Generic과 Any의 차이점

Any는 input에 따라 달라지는 연산이 불가능하지만 Generic은 가능함

function hello(message: any): any {
    return message;
}

console.log(hello('mark').length);
console.log(hello(13).length); //오류가 발생하지 않음

function helloGenric<T>(message: T): T {
    return message;
}

console.log(helloGenric('mark').length);
console.log(helloGenric(13).length); //오류 발생

Generic basic

function helloBasic<T, U>(message: T, commet: U): T {
    return message;
}

helloBasic<string, number>("dd", 12); //way 1 타입 직접 지정
helloBasic(23, 21); //way 2 타입 추론

Generic Interface

interface ToObj<T> {
  a: T;
  b: T;
}

function toObj<T extends string | number>(a: T, b: T): ToObj<T> {
  return { a, b };
}

toObj<string>('A', 'B');
toObj<number>(1, 2);
toObj<boolean>(true, false); // 에러 발생

Generic Array & Tuple

function helloArray<T>(message: T[]): T {
    return message[0];
}

helloArray(['hello', 'world']);
helloArray(["hello", 4]); //string|number union타입으로 추론

function helloTuple<T, K>(message: [T, K]): T {
        return message[0];
}

helloTuple(["hello", "world"]);
helloTuple(["hello", 1]);

Generics Function

type HelloFunctionGeneric = <T>(message: T) => T;
const helloFunction1: HelloFunctionGeneric = <T>(message: T): T => {
    return message;
}

interface HelloFunctionGeneric2 {
    <T>(message: T): T;
}
const helloFunction2: HelloFunctionGeneric2 = <T>(message: T): T => {
    return message;
}

Generic class

class Person<T, K> {
    private _name: T;
    private _age: K;

    constructor(name: T, age: K) { // constructor에서 T, K가 정의됨
        this._name = name;
        this._age = age;
    }
}

new Person("Gu", 12);
new Person<string, number>('gu', 23);

Generics with extends(제약 조건)

generic에서 extends는 extends로 정해준 타입만 가능하다는 뜻

class PersonExtends<T extends string | number> {
    private _name: T;

    constructor(name: T) {
        this._name = name;
    }
}

new PersonExtends('mark');
new PersonExtends(123);
new PersonExtends(true); //오류 발생

조건부 타입(Conditional Types)

• 삼항 연산자를 사용하는 타입 부분을 조건부 타입이라고함

    type MyType<T> = T extends string | number ? boolean : never;
  
    const a: MyType<string> = true; // MyType이 boolean이 됨
    const b: MyType<number> = true; // MyType이 boolean이 됨
    const c: MyType<null> = true; ; // MyType이 never가 되므로 에러 발생

유틸리티 타입(Utility Type)

type MyExclude<T, U> = T extends U ? never : T;
type MyUnion = string | number | boolean | null;

const a: MyExclude<MyUnion, boolean | null> = 123; // a라는 변수는 string이거나 number이여야할 때 사용함
// string, number를 제외한 나머지 타입은 never가 됨

// TS는 이미 내장된 Exclude 타입이 존재함
const a: Exclude<MyUnion, boolean | null> = 123;

keyof & type lookup system

• keyof: 개체의 key 부분만 추출해서 유니온 타입으로 만들어줌

interface IPerson {
    name: string;
    age: number;
}

const person: IPerson = {
    name: 'Gu',
    age: 12,
};

// IPerson[keyof IPerson]
// => IPerson['name' | 'age']
// => IPerson['name'] | IPerson['age']
// => string | number
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

getProp(person, 'name');

function setProp<T, K extends keyof T>(
    obj: T, 
    key: K, 
    value: T[K]
    ): void {
    obj[key] = value;
}

setProp(person, 'name', 'Mark');

infer(추론 키워드)

조건부 타입에서 타입 변수를 추론할 때 사용하는 키워드

type ArrayItemType<T> = T extends (infer I)[] ? I : never;

const numbers = [1, 2, 3];
const a: ArrayItemType<typeof numbers> = 123; // I가 number타입이 됨
const b: ArrayItemType<boolean> = 123; // 에러 발생

const fruits = ['apple', 'banana', 'melon'];
const hello = () => {};
const c: ArrayItemType<typeof fruits> = 'ABC'; // I가 string타입이 됨
const d: ArrayItemType<typeof hello> = 'ABC' // 에러 발생

type SecondArgumentType<T> = T extends (f: any, s: infer S) => any ? S : never;

function hello(a: string, b: number) {}
const a: SecondArgumentType<typeof hello> = 123;

type MyReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : any;

function add(x: string, y: string) {
  return x + y;
}

const a: MyReturnType<typeof add> = 'hello';

// ReturnType이라는 내장 유틸리티 타입이 있음
const a: ReturnType<typeof add> = 'hello';

타입 가져오기와 내보내기

• import type 키워드를 통해 타입이라는 것을 명시함
• namespace를 사용해 type에도 namespace를 적용할 수 있음

export namespace Utils {
  export interface Add {
    // namespace 안에서도 export 키워드가 필요함
    (a: number, b: number): number;
  }

  export interface Subtract {
    (a: number, b: number): number;
  }
}

export const add: Utils.Add = (a, b) => a + b;
export const subtract: Utils.Subtract = (a, b) => a - b;

export default {
  name: 'My utils!',
  add,
  subtract,
};

import utils, { add, subtract } from './myUtils'; // // 데이터로 취급
import type { Utils } from './myUtils'; // 타입으로 취급
// import { add, subtract, Add, Subtract } from './myUtils';
// 데이터와 타입을 섞어서 import하는 것도 가능하지만 직관적으로 구분해서 표현하는 것이 좋음

const a = add(4, 7);
const b = subtract(9, 6);

const c = utils.add(4, 7);
const d = utils.subtract(9, 6);

console.log(utils.name); // 'My utils!'

const newAdd: Utils.Add = (x, y) => x + y;
newAdd(1, 2);

const newSubtract: Utils.Subtract = (x, y) => x - y;
newSubtract(3, 1);

tsconfig.json 옵션

• root 경로에 tsconfig.json 파일을 생성하여 옵션들을 설정할 수 있음

최상위 프로퍼티

• compileOnSave
• compileOptions
• files
• include
• exclude
• extends
• references

compileOnSave

{
  ...,
  "compileOnSaveDefinition": {
    "properties": {
      "compileOnSave": {
                //save하면 컴파일을 활성화함
        "description": "Enable Compile-on-Save for this project.",
        "type": "boolean"
      }
    }
  },
  ...,
}

//따라서 아래와 같이 지정하면 파일을 save하면 자동 컴파일이 됨
{
    "compileOnSave": true,
}

compilerOptions

ts파일을 js파일로 변환할 때 어떤 옵션을 사용해서 해석할 것인지 지정

strict

엄격한 타입 검사를 활성화 하는 옵션, 아래의 옵션들을 자동으로 활성화함(기본 값: false)

• --noImplicitAny
• --noImplicitThis
• --strictNullChecks
• --strictFunctionTypes
• --strictPropertyInitialization
• --strictBindCallApply
• --alwaysStrict

--noImplicitAny

명시적이지 않게 any타입을 사용하여, 표현식과 선어에 사용하면 에러 발생

• 타입스크립트가 추론에 실패한 경우, any가 맞으면 any라고 지정
• 아무것도 쓰지 않으면 오류 발생

--noImplicitThis

명시적이지 않게 any타입을 사용하여 this 표현식에 사용하면 에러를 발생

--strictNullChecks

null 및 undefined 값이 모든 유형의 도메인에 속하지 않으며, 그 자신을 타입으로 가지거나, any일 겨우에만 할당이 가능

• 한 가지 예외로 undefined에 void 할당이 가능

strictNullChecks를 적용하지 않으면 모든 타입은 null, undefined 값을 가질 수 있음. (string으로 타입을 지정해도 null, undefined값을 할당할 수 있음)

--strictFunctionTypes

엄격한 함수의 매개변수 타입 검사

--strictPropertyInitialization

정의되지 않은 클래스의 속성이 생성자에서 초기화되었는지 확인

이 옵션을 사용하려면 --strictNullChecks를 사용하도록 설정해야함

--strictBindCallApply

Function의 내장 함수인 bind/call/apply를 사용할 때, 엄격하게 체크하도록 하는 옵션

• bind는 해당 함수 안에서 사용할 this와 인자를 설정해주는 역할
• call과 apply는 this와 인자를 설정한 후, 실행까지 함
• call vs apply
  • call은 함수의 인자를 여러 인자의 나열로 넣어서 사용하고, apply는 모든 인자를 배열 하나로 넣어서 사용

--alwaysStrict

각 소스파일에 대해 JS의 strict mode로 코드를 분석하고, “엄격하게 사용”을 해제

target & lib

• target
  • 빌드의 결과물을 어떤 버전으로 할 것인지를 정함
  • ESNext: 가장 최신의 JS 버전을 뜻함
• lib
  • 기본 type definition 라이브러리를 어떤 것을 사용할 것이지 정함
  • lib을 지정하지 않으면 target의 버전에 맞는 디폴트 값이 있음
  • lib을 지정하면 lib 배열로만 라이브러리를 사용함

module

• 사용할 모듈 방식을 지정할 수 있는 옵션
• ESM 방식을 사용하기 위해선 ES2015(ES6) 버전 이상을 사용해야함

moduleResolution

• 컴파일러가 사용할 모듈 생성 방식 지정
• node나 bundler 속성을 추천함 ⇒ index.ts 파일을 import 할 때 파일 이름을 생략하고 경로까지만 적어도 import가 가능해짐

paths

• 경로 별칭 지정

• 예시

    // tsconfig.js
    {
      "compilerOptions": {
        "paths": {
          "myUtils": ["./my_module/utils.ts"],
                "~/*": ["./src/*"]
        }
      },
    }

    // main.ts
    import { add } from 'myUtils';
    import { add } from '~/my_modules/utils' // === ./src/my_modules/utils

jsx

• jsx 출력 방식 제어

outDir, outFile, rootDir

• outDir: 컴파일 후 생성되는 js 파일이 저장될 폴더명
• outFile: 복수 파일을 묶어 하나의 파일로 출력 설정
• rootDir: 시작하는 루트 폴더

files, exclude, include

• files: ts를 js로 컴파일할 때 어떤 파일을 사용할 것인지 지정
• exclude: 컴파일에 제외할 폴더들을 지정
• include: 컴파일에 포함할 폼더들을 지정
• 우선순위
  • files, exclude, include 순으로 우선순위가 높음 ⇒ exclude에 포함되는 파일이여도 files에 명시되어 있으면 js파일로 변환됨
  • 셋다 설정이 없으면 전부 다 컴파일함

extends

• 다른 파일에 있는 옵션을 확장할 때 사용하는 키워드
• extends와 중복되는 옵션은 tsconfig.json의 옵션 설정으로 덮어씌어짐

내장 유틸리티 타입

Partial

• 모든 필수 속성들을 선택 속성으로 만들때 사용, ?로 만드는 것과 비슷함

interface User {
  name: string,
  age: number,
}

// error
const userA: User = {
  name: 'A'
}

// 에러가 발생하지 않음
const userB: Partial<User> = {
  name: 'B'
}

Required

• 모든 선택 속성들을 필수 속성으로 변경할 때 사용

interface User {
  name?: string,
  age?: number,
}

// 에러가 발생하지 않음
const userA: User = {
  name: 'A'
}

// error
const userB: Required<User> = {
  name: 'B'
}

Readonly

• 모든 속성을 읽기 전용 속성으로 바꿈

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

const userA: User = {
  name: 'A',
  age: 12,
};

const userB: Readonly<User> = {
  name: 'B',
  age: 12,
};

userA.name = 'AA';
userB.name = 'BB'; // error

Record

• Record<U, T>
  • U: Union 타입
  • T: Union 타입의 속성이 어떤 타입이 될 것인지 명시

type Names = 'neo' | 'gugu';

const developers: Record<Names, number> = {
  neo: 12,
  gugu: 13,
}

// Record<Names, number>를 통해 만들어지는 타입은 RecordNames와 동일함
type RecordNames = {
  neo: number
  gugu: number
}

Pick

• 하나의 객체 타입에서 원하는 속성으로 새로운 객체 타입을 만들 수 있음

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

// Pick<User, 'name' | 'email'>의 결과는 PickUser와 동일함
const user: Pick<User, 'name' | 'email'> = {
  name: 'gugu',
  email: 'gugu@gugu.com',
  age: 11, // error
};

interface PickUser {
  name: string;
  email: string;
}

Omit

• Pick과 반대되는 개념

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

// Omit<User, 'name' | 'email'>의 결과는 OmitUser와 동일함
const user: Omit<User, 'name' | 'email'> = {
  age: 11,
};

interface OmitUser {
  age: number
}

Exclude

• Union 타입에서 특정 타입(Union도 작성 가능)을 제외할 때 사용

type T = string | number | boolean;

const a: Exclude<T, number> = 'string';
const b: Exclude<T, number> = 123; // 에러 발생

Extract

• Extract<T, U>: T라는 Union타입에서 U와 일치하는 타입을 추출하여 새로운 Union타입을 반환함

type T = string | number | boolean;
type U = number | boolean | string[];

const a: Extract<T, U> = 123
// Extract<T, U> === number | boolean

Return

어떤 타입이 반환되는지 알아냄

function hello(msg: string) {
  return msg;
}

const a: ReturnType<typeof hello> = 'string'

Awaited

• await를 사용해서 반환되는 데이터의 타입을 사용할 수 있음

(async () => {
  const promise = Promise.resolve(true);
  console.log(await promise); // true
  const a: Awaited<typeof promise> = false;
})();

• Sass는 Syntactically Awesome StyleSheet의 약자로 기존의 CSS의 단점을 보완하고 코드의 재활용성과 가독성을 올리기 위해 개발된 CSS Preprocessor(전처리기)
• SCSS(Sass)는 전처리기 언어이므로 SCSS 확장자를 가진 파일을 바로 사용할 수는 없고 SCSS파일을 CSS 파일로 컴파일 하는 과정이 필요함.

SCSS와 Sass의 차이

• SCSS는 Sass와 거의 동일하지만 Sass에 비해 좀 더 CSS 코드와 유사한 형태를 가지고 있어 SCSS를 더 많이 사용함

  	구문 스타일	mixin 문법
  SCSS	중괄호와 세미콜론을 사용	선언: @mixin, 적용: @include
  Sass	들여쓰기를 사용하고 세미콜론이 없음	선언: =, 적용: +

주석

• /* */ : CSS의 기본 주석 ⇒ 컴파일 결과로 포함됨
• // : SCSS의 주석 ⇒ 컴파일 결과로 포함되지 않음

중첩(Nesting)

• &: 자신이 포함된 범위에 상위 선택자를 참조하는 키워드

  

• @at-root: 중첩을 벗어나서 선언되게 하는 키워드

  

• 중첩된 속성: 반복되는 키워드가 있다면 범위로 만들어서 키워드를 생략해서 작성할 수 있음

  

• 중첩에서 다중 선택자를 사용하면 여러 선택자의 값들을 한번에 제어가 가능함

  

변수

• SCSS에서 변수를 선언하기 위해선 변수명 앞에 “$”키워드를 붙여야함

  • $variable: {변수 값}

• 재할당이 가능함

• 변수의 유효범위는 변수가 선언된 블럭(중괄호)의 영역임

• !global: 변수의 유효범위를 벗어나서 전역 변수로 사용할 수 있게 하는 키워드 global 키워드는 동일한 변수명을 가지고 있는 전역 변수를 덮어쓸 수 있으므로 주의해서 사용해야함

  

• !default: 유효범위 안에서 변수를 지정을 할 때 동일한 이름을 가진 변수가 값을 가지고 있다면 재할당한 변수값을 사용하지 않고 원래의 값을 사용함

  

• 보간: “#{변수명}”을 통해 문자열 안에서도 변수를 사용할 수 있음(JS의 탬플릿 리터럴과 비슷함) 선택자에도 보간을 사용할 수 있음 ⇒ 선택자 부분에 변수를 사용할 때는 보간을 사용해야함

  

데이터 타입

Number

• 정수, 실수 등의 데이터 타입
• 단위가 붙어있는 숫자도 Number 타입으로 취급함 ⇒ ex. 20px, 2fr

String

• 문자로 되어져있는 값들과 따옴표로 묶어진 값들은 모두 String 타입

Color

• blue, rgba(255, 0, 0), #fff 등 CSS로 표현할 수 있는 색상들을 color 타입

Boolean

• true, false 값

Null

• null 값을 가지고 있는 요소는 컴파일되지 않음

List

• 배열 데이터와 유사함
• 값들이 나열되어 있으면 list 데이터
  • $list: (10px, 15px, 20px);
  • $list: 10px, 15px, 20px;
  • $list: 10px 15px 20px;

Map

• key, value 형태로 값을 작성

• $map: ( key: value ); ⇒ 소괄호 생략 불가능

• map 타입 데이터의 값을 조회하기 위해서는 sass의 map 내장 모듈을 사용해야함

    @use "sass:map";
  
    $mapData: (
        sm: 100px,
        lg: 200px
    );
  
    .container {
        width: map.get($mapData, "sm");
    }

산술 연산자

• +, -, *, /, % 연산자를 사용할 수 있음

• “100% - 50px” 등 단위가 다른 경우 산술연산자를 사용할 수 없음 ⇒ calc함수를 사용해서 해결

• “/”(나누기)연산자는 기존의 CSS 문법과 겹치는 부분이 있기 때문에 별도의 사용하는 방법을 지켜야함

  

  나누기 연산자가 적용되지 않음

  • 적용 방법 1: 괄호로 닫기
    • top: (20px / 2); ⇒ top: 10px;
  • 적용 방법 2: 변수에 저장해서 나누기
    • top: $변수 / 2
  • 다른 산술 연산자와 혼합해서 사용
    • top: 20px / 2 + 1px; ⇒ top: 11px;

재활용(@mixin)

• @mixin을 사용해서 재활용할 스타일들을 정의하고 @include를 통해서 정의한 스타일들을 사용할 수 있음 Sass는 @mixin을 “=”, @include를 “+” 기호로 바꿔서 사용함

  

• js 함수처럼 인자를 넘겨주고 기본 매개변수를 지정해주는 등의 동작이 가능

  

• @content를 통해 mixin에 스타일을 추가할 수 있음

  

삼항 연산자

• if (조건, 참일 경우 반환 값, 거짓일 경우 반환값)

확장(@extend)

• @extend를 중첩해서 사용하는 경우 선택자 폭발이라는 부작용이 생기므로 가급적 @mixin을 사용하는 것을 추천

%(placeholder 선택자)

• extend를 통해서 확장하는 용도로만 사용되는 선택자

함수

• JS의 함수와 비슷한 방법으로 사용 가능
• @ 키워드를 사용해서 문법을 작성
• CSS의 내장 함수와 함수명이 겹치는 문제가 발생할 수 있으므로 두 개 이상의 단어를 사용해서 함수명을 작성하는 것이 좋음

반복

for 문

@for $i from 1 through 3 {
    // 1~3까지 반복 (1 <= $i <= 3)
}

@for $i from 1 to 3 {
    // 1~2까지 반복 (1 <= $i < 3)
}

while 문

$n = 8;
// if문과 동일하게 소괄호는 생략 가능
@while ($n > 0) {
    $n: $n - 1;
}

모듈

@import

• @import {파일 경로} 를 통해 다른 모듈을 import할 수 있음
• scss 파일 이름의 시작이 “_”(under score)로 시작하게 된다면 새로운 CSS 파일을 만들어서 컴파일을 하지 않음
• 확장자 생략이 가능
• SCSS파일에서 url함수를 사용하거나, css인 확장자를 사용한 경우, http를 사용한 url 주소를 사용 경우에는 import 코드가 컴파일이 됨

@use

• 모듈 속 변수들에 namespace를 부여할 수 있음
• 함수나 변수 명의 충돌을 방지할 수 있음
• as키워드를 통해 namespace를 변경할 수 있음
  • @use "./variables" as var;

@forward

• 현재 파일의 바깥쪽으로 사용하는 모듈을 전달 시켜줄 수 있음
• as {namespace}*를 통해 namespace 부여 가능

// /your-style/main.scss
@use "./variables" as var;
@use "./minxins" as mix;
@forward "./variables" as var-*;

div {
    color: var.$primary;
}

// /my-style/main.scss
@use "../your-style/main";

div {
    color: main.$var-primary; // 변수 이름 앞에 namespace를 작성
}

디버그 규칙

• @debug: 콘솔에 메시지가 출력됨

    .box {
      @debug "Hello SCSS!"; // Hello SCSS! 출력
    }

• @warn: 콘솔에 경고 메시지 출력

    .box {
      @debug "Hello SCSS!"; // Hello SCSS! 경고 메시지 출력
    }

• @error: 에러를 발생시켜서 컴파일이 정상적으로 동작하지 않음

    .box {
      @error "Hello SCSS!";
    }
  
    // 컴파일된 css파일에 error 메시지가 포함됨
    /* Error: "Hello SCSS!"
     *   ,
     * 3 |   @error "Hello SCSS!";
     *   |   ^^^^^^^^^^^^^^^^^^^^
     *   '
     *   scss/main.scss 3:3  root stylesheet */

• 요소의 수평정렬을 위해서 많이 사용했지만 요즘은 flex를 더 많이 사용함

• float: left | right | none;

• float를 해제하는 방법

  • float를 사용한 요소의 부모 요소에 overflow: hidden 추가 ⇒ 개연성이 없는 속성이므로 추천하지 않음

  • float를 사용한 요소의 부모 요소에 다음과 같은 css를 추가

      .clearfix::after {
          content: "",
          display: block,
          clear: both /* float: left, right를 모두 닫을 수 있음 */
      }

    • clearfix를 사용한 요소의 안에는 float을 사용하는 자식 요소들만 존재해야함!

• float은 일부 경우에 display의 값을 block으로 변경함!

position

static: html에 정의된 순서대로 브라우저 상에 보여짐 relative: 원래있어야하는 위치에서 상대적으로 이동함 absolute: 아이템과 가장 가까이 있는 컨테이너를 기준으로 위치를 이동함 fixed: 윈도우를 기준으로 위치를 이동 sticky: 원래있어야 하는 자리에 있으면서 스크롤을 해도 사라지지않고 원래 자리에 위치함

• absolute 속성을 사용할 경우 구조적으로 가장 가까운 부모 요소에 relative를 추가하는 방법이 가장 관리하기 좋은 방법
• 자식 요소에 fixed 속성을 사용하고 부모 요소에 transform, perspective와 같은 속성들을 사용할 경우 자식 요소는 뷰포트 대신 transform, perspective 등의 속성을 사용한 부모 요소를 컨테이닝 블록으로 사용함
• position의 absolute, fixed는 요소의 display 값을 block으로 변경함

Stacking Context(쌓임 맥락)

• z축을 사용한 HTML 요소의 3차원 개념화
• transform, opacity와 같은 속성들을 z-index를 사용하지 않고도 요소를 쌓임 맥락을 변경할 수 있음

z-index

• z-index를 사용하기 위해서는 position의 static을 제외한 relative, absolute, fixed, sticky 속성을 사용해야 함. 또는 flex 아이템이나 grid 아이템도 가능

flexbox

• 1차원 레이아웃 구조(수직, 수평)를 작업할 때 사용함
• container에 적용되는 속성값과 container속 item들에 적용되는 속성값이 있음

container 속성값

• display: flex, inline-flex 모두 자식 요소(flex items)는 flex의 특성을 통해 1차원 레이아웃 구조를 가지는 정렬이 이루어지지만 컨테이너는 차이가 발생함

display: flex

• block 요소의 특성과 유사함
• flex가 부여된 container의 가로 넓이가 최대한 늘어나려고 함

display: inline-flex

• inline 요소의 특성과 유사함
• flex가 부여된 container의 가로 넓이가 최소한으로 사용됨

flex-direction

기본값은 row(왼쪽에서 오른쪽으로), main-axis를 정함

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

• row: 요소들을 가로로 정렬
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 아래에서 위로 정렬

reverse 사용 시 요소들의 start와 end의 순서도 뒤바뀐다.

Flex의 방향이 column일 경우 justify-content의 방향이 세로(y)로, align-items의 방향이 가로(x)로 바뀜

flex-wrap

기본값은 nowrap, 페이지의 크기에 따라 item을 다음줄로 나눔

• nowrap: 모든 요소들을 한 줄에 정렬
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow

direction과 wrap을 합침

• flex-flow: {direction 인자} {wrap 인자}

justify-content

요소들을 가로선 상에서 정렬

• flex-start: 컨테이너의 왼쪽으로 정렬
• flex-end: 컨테이너의 오른쪽으로 정렬
• center: 가운데 정렬
• space-between: 요소들 사이에 동일한 간격을 둠
• space-around: 요소들 주위에 동일한 간격을 둠

align-items

요소들을 세로선 상에서 정렬

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 요소들을 글자의 baseline에 맞춰 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림

align-content

여러 줄 사이의 간격을 지정할 수 있음

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러줄들을 컨테이너에 맞도록 늘림

align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는 지를 지정. 한 줄만 존재할 경우 align-content는 효과를 보이지 않음

item 속성값

order

• 아이템의 표시 순서를 정함
• 기본 값은 0이며, 양수나 음수로 바꿀 수 있음. 따라서 모든 item이 0이 기본 값이므로 하나의 item을 맨 앞으로 이동하려 할 때 음수를 사용해야함.

align-self

• item별로 item을 정렬 가능하며 align-items가 사용하는 값을 인자로 받음.

flex-grow

• flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언
• 만약 형제요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당
• 하지만 flex-grow 값으로 다른 값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됨

flex-shrink

• 컨테이너가 작아졌을때 아이템들의 크기 퍼센트를 정함
• flex-shrink 속성은 플렉스박스에 "flex-wrap: wrap;" 속성을 부여한 경우 적용되지 않음
• 자동으로 아이템 너비가 축소되지 않도록 하려면 반드시 "flex-shrink: 0;"을 아이템에 선언해야함

flex-basis

• 아이템의 크기 퍼센트를 정함(컨테이너가 작아지거나 커질경우 모두 적용)
• flex-basis는 Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이).
• flex-basis로 설정해 준 것과 상관없이 콘텐츠 너비에 따라서 늘어남
• flex-basis와 width를 동시에 적용할 경우 flex-basis가 우선순위를 갖게됨

flex 단축 속성

• flex: grow, shrink, basis를 한번에 설정
• flex: flex-grow flex-shrink flex-basis 순으로 작성함
• flex-grow 기본 속성 = 0, flex-shrink 기본 속성 = 1, flex-basis 기본 속성 = auto
• flex: 1;과 flex: 1 1 auto;는 서로 다름!
  • flex: 1; ⇒ flex: 1 1 0; 과 같음(flex 단축 속성을 사용했을 때 basis 값을 생략하게 된다면 기본 값인 auto가 대입되는 것이 아닌 0이 됨!)
• flex 단축 속성을 사용하기보단 flex-grow, flex-shink, flex-basis 개별 속성을 사용하는 것이 가독성이 좋음!

Grid

• 2차원 레이아웃 구조(row, column)를 작업할 때 사용함

Grid Container

grid-template-columns

colums의 개수와 사이즈 설정

• grid-template-colums: 20% 20% 20%;

grid-template-rows

rows의 개수와 사이즈 설정

• grid-template-rows: 20% 20% 20%;

columns와 rows에 %, 픽셀, em과 같은 길이 단위도 허용됨

grid-auto-rows(columns)

grid-template-rows(columns)로 만든 행과 열에 포함되지 않는 cell들의 행과 열의 크기를 암시적으로 지정할 수 있음

grid-template

• grid-tempate-columns와 grid-template-rows를 조합한 단축 속성
• 행과 열 순으로 입력한다.
  • grid-template: 50% 50% / 200px; → 각각 50%인 두개의 행과 200px인 한개의 열의 그리드 생성

grid-auto-flow

• grid의 기본 축을 정의하는 속성
• 기본 값: row
• dense를 사용해서 빈 공간을 매울 수 있음
  • row dense (row 생략 가능)
  • column dense

justify-content

• row축에 Grid content를 제외한 빈공간이 있는 경우에 사용할 수 있음
• row축을 기준으로 Grid content를 정렬함
• 속성
  • normal: 기본 값으로 행 축을 기준으로 Grid content를 최대한 늘림 ⇒ stretch와 동일
  • start: row축의 시작점에 정렬
  • center: row축의 가운데에 정렬
  • end: row축의 끝점에 정렬
  • space-between: 시작열과 마지막열은 start와 end에 붙고 나머지 열은 여백을 균등하게 분배해서 정렬
  • space-around: 각 열의 왼쪽과 오른쪽의 여백을 균등하게 분배해서 정렬
  • space-evenly: row축의 여백을 모든 열에 균등하게 분배함

align-content

• column축에 Grid content를 제외한 빈공간이 있는 경우에 사용할 수 있음
• column축을 기준으로 Grid content를 정렬함
• 속성은 justify-content와 동일

justify-items / align-items

• 각각의 cell 영역에 빈 공간이 있을 때 사용 가능
• normal(stretch), start, center, end 속성이 존재함

grid-template-areas

• grid-area의 이름은 원하는 이름으로 변경 가능
• 마침표(.) 대신 none도 가능

grid-gap

• grid-column-gap은 열 사이의 간격(Line 또는 Gutter), grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있다.
• 하위 호환성을 원한다면 grid 키워드를 붙이고 통합성을 생각한다면 grid 키워드를 뺄 수 있음(gap, column-gap, row-gap)
  • grid-column-gap
    • grid-column-gap: 20px;
  • grid-row-gap
    • grid-row-gap: 20px;
  • grid-gap: 행, 열 순으로 입력
    • grid-gap: 20px 10px;
    • grid-gap: 10px;

grid cell(items)

grid-column-start / grid-row-start

• 그리드 요소의 시작 열/행 위치를 지정
• 음수로도 지정이 가능하며 음수는 그리드의 오른쪽을 기준으로 사용
  • grid-column-start: ;
• 그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열/행의 넓이를 지정할 수 있음(양수만 가능)
  • grid-column-end: span ;

grid-column-end / grid-row-end

• grid-column-start 단독으로 사용될 때는, 한개의 그리드 열/행을 나타내지만 grid-column-end 속성을 같이 사용하면 여러 열에 걸쳐 확장이 가능
• 음수로도 지정이 가능하며 음수는 그리드의 오른쪽을 기준으로 사용
  • grid-column-end: ;
• 그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열/행의 넓이를 지정할 수 있음.(양수만 가능)
  • grid-column-end: span ;

grid-column / grid-row

• grid-column(row)-start/end를 한 번에 설정가능, /로 구분
  • grid-column(row): / ;
  • grid-column(row): / span ; 도 가능

grid-area

• grid-row-start, grid-column-start, grid-row-end, grid-column-end 순으로 한 번에 입력 가능, /로 구분
• span 사용도 가능
  • grid-area: / / /

justify-self / align-self

• 개별적으로 cell을 정렬할 수 있음

order

• grid-area, grid-column, grid-row 등을 사용하지 않고 표시될 경우 소스코드에 기입된 순서대로 표기하는데 order 속성을 이용하면 재정의가 가능
• 기본은 0이며 양수, 음수 모두 가능
  • order:

Grid Container Functions

grid-template-rows/columns, grid-auto-rows/columns에 사용 가능한 함수

repeat

grid-template-rows: 20% 20% 20%;를 줄여서 표현 가능

• grid-template-rows: repeat(3, 20%);
• 100px, 200px이 반복된다면 ⇒ repeat(2, 100px 200px)

minmax

• 행과 열(명시적, 암시적 모두 가능)의 최소 값과 최대 값을 동시에 정의
• minmax(최소 값, 최대값)

fit-content

• fit-content({최대 넓이})

• grid-template-colums: fit-content(300px) 100px;

  ⇒ 열의 너비가 최대 300px까지 될 수 있지만, fit-content가 된다면 너비가 늘어나지 않음

Grid Units

fr (fractional, 공간 비율)

• 각 fr 단위들은 사용가능한(빈) 공간을 하나로 공유하여 할당
• 예시로 두 개의 element들을 1fr과 3fr로 설정 시, 공간이 4개의 동일한 크기로 공유됨 ⇒ 첫번째 element는 사용가능한 공간의 1/4를 차지하고 두번째 element는 3/4를 차지
  • grid-template-columns: 1fr 3fr;

min-content / max-content

• min-content: content가 가질 수 있는 최소 넓이까지 넓이를 줄여서 표현함

  • 한글은 글자 단위, 영어는 단어 단위 ⇒ word-break: keep-all; 속성을 통해 한글도 단어 단위로 줄바꿈이 일어나게 변경할 수 있음

    

auto-fill / auto-fit

• repeat 함수와 같이 사용함
  • grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
• auto-fit: 지정할 수 있는 최대 넓이를 우선해서 적용
• auto-fill: 지정할 수 있는 최소 넓이를 우선해서 적용

Transform3d

transform-origin

• 요소가 transform하는 기준을 변경할 수 있는 속성
• transform-origin: {x축} {y축};

perspective

• 3차원 변환 함수에서만 적용이 됨 (ex. rotateY)
• perspective({원근의 거리값})
• 원근의 거리값이 클수록 멀리서 보이는 효과를 가짐
• 함수와 속성으로 모두 사용이 가능
  • 속성으로 사용하는 방법이 관리가 유리함
  • 함수: 변환이 되는 아이템에 사용해야함 ⇒ transform: perspective({원근의 거리값})
  • 속성: 변환이 되는 아이템의 부모 요소에 사용해야함 ⇒ perspective: {원근의 거리값}

perspective-origin

• perspective 속성이 적용된 요소의 기준을 변경할 수 있는 속성
• transform-origin과 동일하게 사용
  • perspective-origin: {x축} {y축};

transform-style: perserve-3d;

• 3차원 변환 효과가 추가되어진 요소의 자식 요소에 3차원 변환 효과를 추가하기 위해 부모 요소에 사용해야함
• 자식 요소만 유효한 속성이며 후손 요소에는 영향을 주지 않음

backface-visibility: hidden;

• rotateY(180deg) 등 요소의 뒷면이 보이는 경우에 요소의 뒷면을 보이지 않게 할 수 있음

  

Columns(다단)

• column-count: 단의 개수를 정할 수 있음
• column-width: 단의 최적의 넓이를 지정할 수 있음
• columns: {width} {count} ⇒ 단의 최적 넓이와 개수를 한번에 정의할 수 있는 단축 속성
• column-rule: 단과 단 사이의 구분선을 추가할 수 있음(border 속성과 동일하게 사용, 개별 속성도 동일하게 존재)
• column-gap: 단과 단 사이의 넓이를 지정(gap으로 대체 가능)

getSelection? createRange?

editor에 "# 제목"을 입력하고 enter를 입력하면 notion과 동일하게 <h1>제목</h1>으로 즉각적으로 변경될 수 있는 rich editor를 구현을 하려고 시도했다. 그 과정에서 가장 큰 문제는 editor의 innerHTML을 변경하는 과정에서 현재 사용자가 가지고 있는 커서 위치를 유지하는 부분이였다. 요소가 변경될 경우 editor의 내용이 다시 렌더링되어야 하는데 리렌더링시 커서의 위치가 유지되지 않고 처음으로 돌아가는 현상이 있었고 이를 해결하기위해 열심히 구글링을 하던 중 selection과 range의 개념에 대해 알게되었다. selection과 range를 통해 사용자가 선택한 범위를 알 수 있다. 이를 사용해서 editor가 리렌더링되기 전에 커서의 위치에 보이지 않는 요소를 추가하고 리렌더링 후 추가한 요소의 위치를 가져오는 식으로 커서의 위치를 유지할 수 있었다. 결과적으로 완벽하진 않지만 rich editor의 일부분을 완성할 수 있었고 selection과 range를 더 공부한다면 버그가 없는 rich editor를 만들 수 있을 것같다.

잘한 점

• 클린 코드를 위해 노력했다. 파일 구조와 컴포넌트 구조, 함수의 역할까지 어떻게 하면 재사용성이 높고 가독성이 높은 코드로 작성할 수 있을지 많은 부분은 고민하면서 프로젝트를 완성해갔다. 가장 이상적인 구조라고 말할 순 없지만 컴포넌트 구조에 대해선 가독성을 많이 높였다고 생각되고 api와 router의 구현은 재사용성을 많이 높였다고 생각된다.
• 프로젝트의 기본 요구사항과 보너스 요구사항을 모두 구현하려고 시도했다. 노션 클로닝 프로젝트에서 기본 요구사항과 보너스 요구사항을 모두 구현하려고 시도하였고, 1가지(에디터에 하위 문서 출력) 부분을 제외하고 모두 구현하였다. 이 과정에서 위에 적은 selection, range 개념에 대해 알게 되었다.

  부족한 점

• 함수의 분리가 잘 이루어지지 않고 있다. 아직 함수를 분리하는 부분은 많이 부족한 것 같다. 하나의 역할은 하나의 함수가 담당하게 함수들을 분리하여 재사용성을 높이고 코드의 가독성을 더 높이는 노력이 필요하다.
• rich editor의 버그가 많다. 한글을 입력하고 enter를 입력하면 커서의 위치가 제대로 유지되지 않고, 링크 태그가 다음 줄에도 계속해서 적용되는 등의 버그들이 아직 존재한다. selection, range의 개념을 더 공부해서 버그들을 고칠 필요가 있다.
• editor에 하위 문서 출력 기능 하나의 문서를 클릭했을 때 해당 문서의 하위 문서가 존재한다면 editor에 출력하는 기능을 구현하지 못했다. 문서의 하위에 문서가 존재하는 구조가 아닌 폴더 구조로 변경해서 하위 요소들을 가져오기 어려운 부분 때문에 구현하지 못했는데 더 고민해서 해당 기능도 추가해야한다.

  시도해 볼 것

• rich editor의 버그를 수정하기 위해 selection, range 개념을 좀더 공부하기
• editor에 하위 문서 출력 기능 추가하기
• 여러 역할을 수행하는 하나의 함수를 분리해보기

정보처리기사 취득

2023년에 가장 먼저 했던 일은 정보처리기사 자격증을 취득한 것이였다. 개편 전에는 취득 난이도가 낮기도 했고 인정 받을 수 있는 곳이 많지 않다는 말도 많아서 도전을 할까말까 고민도 많이 했지만 "컴퓨터공학과 학생이라면!" 이라는 생각과 공부하는 과정에서 그동안 배웠던 개발 지식들을 복습하는데에도 도움이 될 것 같아 도전하게 되었다. 개편 후 난이도가 높아졌다고 해서 내용들을 봤는데 생각보다 어려웠다...! 같은 과 선배나 동기들도 쉽게 생각했다가 실기에서 한번씩 좌절을 겪는 경우도 있었다. 개발 방법론, 보안 관련 지식, 기초 프로그래밍 등의 내용들이 출제되어서 컴퓨터공학과 학생은 복습한다는 생각으로 공부하며 취득하는 것을 추천한다. 그래도 컴퓨터공학과 학생인데라는 생각과 알 수 없는 자존심으로 필기, 실기를 책없이 공부했는데 실기 정도는 책을 구매해서 공부했으면 조금 더 체계적으로 공부해서 시간을 아낄 수 있었을 것 같다.

위치기반 아동급식카드 가맹점 조회 서비스 개발

아동급식카드란 국내의 각 지방자치단체는 저소득층의 결식 우려 아동을 대상으로 결식을 예방하고자 매달 일정 금액을 충전해주어 아동이 자유롭게 연계된 가맹점에서 식품을 구매할 수 있는 전자카드를 말한다. 그런데 아동급식카드를 사용이 가능한 가맹점을 조회하는데 어렵다는 문제점이 있어서 이를 해결하고자 프로젝트를 진행했다.

아동급식카드 가맹점 조회 서비스 (현재 구미 지역만 조회 가능)

잘한 점 or 배운 점

• 계획한 기능들을 거의 구현했다(네이버 로그인 API만 빼고...).
• 사용 접근성을 높이기 위해 모바일 웹 페이지에서도 서비스를 이용할 수 있도록 반응형으로 제작했다.

  

• Nelify와 AWS EC2를 사용해 배포하는 방법을 배우게 되었다.

아쉬운 점

• 아동급식카드 가맹점의 정보(대표 메뉴와 가격, 종류)를 크롤링하는 과정이 필요한데 생각보다 시간이 오래걸려서 아직은 구미 지역만 지원하고 있다.
• 후기 정보를 남기는게 과연 로그인이 필요했는가? 익명으로도 작성이 가능해서 더 많은 후기 데이터를 모을 수 있도록 하는 방법이 더 좋을 것 같다.

파이썬 멘토링 활동

학교에서 진행하는 전공 과목 멘토링 프로그램에서 멘토로 뽑히게 되어 파이썬 과목의 멘토로 활동했다. 약 30시간 정도 활동을 했는데 멘티들에게 파이썬의 기초 지식들을 가르쳐주며 1학년 시절 파이썬을 배울 때 객체 지향의 개념에 대해 이해하는데 고생했던 기억이 떠올라 재미있었던 활동이었다.

잘한 점 or 배운 점

• 남들에게 내 지식을 설명하는 것은 힘들다! 내가 알고 있는 지식들을 다른 사람들에게 이해하기 쉽게 설명하는 것은 항상 어렵게 느껴진다. 나름대로 이해하기 쉽게 강의 자료를 정리하고 또 어떻게 하면 쉽게 전달할 수 있을까를 고민하며 예시 코드를 작성하면서 다른 사람에게 설명하는 능력을 기를 수 있었다.

  아쉬운 점

• 학교 강의 시간 외에도 4명의 학생들에게 멘토 활동을 했었다. 더 많은 멘티들과 함께 파이썬 멘토링 활동을 하지 못한 것이 아쉽게 느껴진다.

데브코스 합격 및 활동!!

프론트엔드 개발자를 희망하는 나는 프론트엔드 분야의 인턴 활동이나 부트캠프 활동을 꼭 해보고 싶었다. 그래서 데브코스에 지원하게 되었고 서류 -> 코테 -> 면접 과정을 거쳐서 합격했다!! 학교 생활을 하면서 틈틈히 알고리즘 문제를 풀어가면서 코테를 준비했는데 이 과정이 데브코스 합격에 큰 도움이 되었던 것 같아 뿌듯했다. 6월 1일부터 활동을 시작해서 계속해서 활동을 이어가고 있는데 활동할 때마다 새로운 프론트엔드 지식을 얻어가는 것 같아 2023년 상반기에 가장 잘한 선택이라고 생각된다.

지금까지 활동하면서 후기

• JS는 계속해서 배울게 많다... 이번 활동을 통해 Vanilla JS를 사용한 프로젝트들을 하면서 정말 새롭게 배우는 것들이 많았다. 그동안 React를 공부한다고 소홀히 했던 Vanilla JS를 심도있게 공부하며 JS의 기초, 심화 지식들과 다른 JS 라이브러리를 공부할 수 있는 바탕을 쌓아가고 있다는 생각이 든다.
• 멘토가 있다는 것이 큰 힘이 된다. 나는 주위에 프론트엔드 개발자로 활동하는 사람이 많지 않다. 그래서 프론트엔드 관련 지식이나 프론트엔드 개발자에 대해 궁금한게 생겨도 물어볼 사람이 없었다... 하지만 데브코스 멘토 시스템은 현업 개발자님들과 팀을 만들어줘서 프론트엔드에 대해 궁금한 점을 바로 해결할 수 있다. 이 점이 가장 좋다고 생각된다.
• 프론트엔드 공부에 자극이 된다. 같이 활동하는 멘티들을 보며 다들 너무 잘한다는 생각이 든다. 자만하지 않고 겸손한 자세로 계속해서 프론트엔드를 공부하는 것에 큰 자극이 되고 있는 것 같다.

  아쉬운 점

• 데브코스에는 공부하는데 도움이 될 수 있도록 지원해주는 시스템이 많다. 코어타임 중 실시간으로 질의응답, 도서 지원, 특강, 공부 장소 대여 등 다양한 지원을 아직은 잘 활용하지 못하는 것 같다. 하반기에는 이러한 지원들을 최대한 많이 활용해서 프론트엔드 개발자의 성장에 도움이 될 수 있도록 하고 싶다.
• 스스로가 데브코스 활동을 핑계로 다른 공부를 소홀히 하는 것 같다. 토익, 데브코스 활동 이외의 공부 등 다른 활동도 열심히 해야할 필요가 있다.

  2023 하반기에는 꼭 해야할 것!

• 7월 - 개인 블로그(Github Blog) 만들기 항상 어려워 하던 TypeScript를 사용해서 개인 블로그를 제작할 것이다.
• 8월 - 토익 점수 좀 높이자... 토익 점수 850점 이상으로 높이고 싶다. 일단 800점부터 넘기는 것이 계획이다.
• CS 지식 공부하기 데브코스 면접이나 이미 취직한 선배들의 면접 후기를 통해 깊은 CS 지식이 필요하다는 것을 느꼈다. 틈틈히 CS 지식들을 공부하며 정리하는 것이 계획이다.

• 비동기 작업을 제어하기 위해 나온 개념
• callback hell에서 어느정도 벗어날 수 있게 도와줌
• Promise로 정의된 작업끼리는 연결이 가능하며 이를 사용해 코드의 depth가 크게 증가히지 않는 효과가 있음

기본 사용 방법

const promise = new Promise((resolve, reject) => {
  // promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출
  // promise 내부에서 오류 상황일 때, reject 함수 호출
})

function asyncPromiseWork() {
  // ...
  return new Promise((resolve, reject) => {
    // promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출
    // promise 내부에서 오류 상황일 때, reject 함수 호출
    // ...
    return resolve('completed');
  })
}

// Promise는 then을 이용해 비동기 작업 이후 실행할 작업을 지정함
// then의 result에는 resolve를 호출하며 넘긴 completed가 들어있음
asyncPromiseWork().then(result => console.log(result));

promise chaining

• 순차적으로 처리해야하는 비동기 작업이 여러 개 있을 경우 사용
• promise.then의 결과 값으로 promise가 반환되기 때문에 .then을 체인 형식으로 사용이 가능

new Promise((resolve, reject) => setTimeout(() => resolve(1), 100))
  .then(result => {
    console.log(result); // 1
    return result + 1;
  }).then(result => {
    console.log(result); // 2
    return result + 2;
  }).then(result => {
    console.log(result); // 4
  })

/*
 .then의 return 값으로 promise를 반환하는 경우 이어지는 .then은 반환된 promise가
    처리될 때 까지 기다렸다가 결과 값을 받는다.
*/
new Promise((resolve, reject) => setTimeout(() => resolve(1), 100))
  .then(result => {
    console.log(result); // 1
    return new Promise((resolve, reject) =>
            setTimeout(() => resolve(result + 1), 100)
        );
  }).then(result => {
    console.log(result); // 2
    return result + 2;
  }).then(result => {
    console.log(result); // 4
  })

promise chaining 오류 처리

// Promise의 then내에서 promise를 return하는 경우 또 다른 then으로 연결 가능
fisrtPromiseWork()
  .then(result => {
    return secondPromiseWork(result);
  }).then(result => {
    return thirdPromiseWork(result);
  }).then(result => {
    return finalPromiseWork(result);
  }).catch(e => { // promise chain중 작업이 실패했을 경우 catch로 잡기 가능
    console.log('오류 발생');
  }).finally(() => { // 작업의 성공 여부와 상관 없이 마지막으로 실행
    console.log('작업 끝');
  })

• catch를 넣지 않은 경우 promise chain 중 에러가 발생했을 때 chain이 멈춤 ⇒ catch를 사용하자!
• catch를 중간에 넣고 작업을 연결해도 동작함

callback함수를 promise 형태로 만들기

const delay = (delayTime) => new Promise((resolve) => {
  setTimeout(resolve, delayTime);
})

delay(5000)
  .then(() => {
    return delay(3000);
  }).then(() => {
    console.log('complete');
  })

promise 내장 함수

Promise.all(iterable)

• iterable에 주어진 모든 promise가 동시에 실행된 후 새로운 promise를 반환
• 여러 promise를 동시에 처리할 때 유용함
• 주어진 promise 중 하나라도 reject되는 경우 첫 번째로 reject된 promise를 이유로 자신도 거부함

Promise.all([
  new Promise(resolve => setTimeout(resolve, 3000, 1)), // 1
  new Promise(resolve => setTimeout(resolve, 2000, 2)), // 2
  new Promise(resolve => setTimeout(resolve, 1000, 3))  // 3
]).then(result => console.log(result)); // 프라미스 전체가 처리되면 1, 2, 3이 반환

Promise.race(iterable)

• Promise.all과 비슷하지만 가장 먼저 처리되는 프로미스의 결과(성공, 실패)를 반환
• 많이 사용하진 않음

Promise.race([
  new Promise(resolve => setTimeout(resolve, 3000, 1)), // 1
  new Promise(resolve => setTimeout(resolve, 2000, 2)), // 2
  new Promise(resolve => setTimeout(resolve, 1000, 3))  // 3
]).then(result => console.log(result)); // 3 반환

Promise.any(iterable)

• Promise.all과 비슷하지만 가장 먼저 성공(resolve)한 promsie가 존재하면 종료

Promise.any([
  new Promise(resolve => setTimeout(resolve, 3000, 1)), // 1
  new Promise(resolve => setTimeout(resolve, 2000, 2)), // 2
  new Promise(resolve => setTimeout(resolve, 1000, 3))  // 3
]).then(result => console.log(result)); // 3 반환

Promise.allSettled()

• 주어진 모든 프로미스를 수행한 후 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환
• 각 promise의 실행 결과를 알고 싶을 때 사용

Promise.allSettled([
  new Promise(resolve => setTimeout(resolve, 3000, 1)), // 1
  new Promise(resolve => setTimeout(resolve, 2000, 2)), // 2
  new Promise(resolve => setTimeout(resolve, 1000, 3))  // 3
]).then(result => console.log(result));
// [
//   { status: 'fulfilled', value: 1 }, 
//   { status: 'fulfilled', value: 2 },
//   { status: 'fulfilled', value: 3 }
// ]
// reject된 경우 status 값이 rejected로 반환됨

Promise.resolve

• 주어진 값으로 이행하는 Promise.then 객체를 만듬
• 주어진 값이 promise인 경우 promise가 반환됨
• return type을 promise로 맞춰줄 때 종종 사용함

const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value); // 123
});

async, await

• Promise가 callback depth를 1단계로 줄여주지만 아직 불편한 점이 있음
  • .then() 체이닝을 통해 비동기 작업을 하므로 코드가 복잡함
  • .catch()를 통해 오류를 처리하므로 오류 처리 로직이 분리되어 가독성이 떨어짐 ⇒ async, await는 try, catch, finally를 사용!
• async, await를 사용하면 Promise를 비동기 작업이 수행되지만 동기 코드처럼 보이게 코드 작성이 가능

const delay = (delayTime) => new Promise((resolve) => {
  setTimeout(resolve, delayTime);
})

// Promise를 사용
const work = () => {
  delay(100)
    .then(() => {
      console.log('work 1 complete');
      return delay(100);
    }).then(() => {
      console.log('work 2 complete');
      return delay(100);
    }).then(() => {
      console.log('work 3 complete');
      return delay(100);
    }).then(() => {
      console.log('all complete');
    })
}

work();

// async, await를 사용 => 코드 가독성이 좋음!
const work2 = async () => {
  await delay(100);
  console.log('work 1 complete');
  await delay(100);
  console.log('work 2 complete');
  await delay(100);
  console.log('work 3 complete');
  await delay(100);
  console.log('all complete');
}
work2();

async 함수 정의 방법

• async 키워드가 붙은 함수는 실행 결과를 Promise로 감싸게됨

async function asyncFunc () {
  const res = await request(...);
}

const asyncFunc = async () {
  const res = await request(...);
}

fetch api

• 비동기 https 요청을 좀 더 편하게 사용할 수 있는 API
• XMLHTTPRequest를 대체
• Promise 기반으로 동작 ⇒ promise chaining 응용 가능!
• fetch의 기본 응답 결과는 Response 객체!
  • Response 객체를 얻은 뒤엔 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리를 해줘야함
• fetch는 HTTP error가 발생해도 reject되지 않음(네트워크 에러나 요청이 완료되지 않은 경우만 reject 됨) ⇒ fetch가 성공했는지 확인하는 과정이 필요함(response의 status code나 ok를 확인)

사용 방법

fetch('https://dummyjson.com/products/1')
  .then(res => res.json())
  .then(json => console.log(json))

// 오류 처리
fetch('https://dummyjson.com/products/undefined') // 존재하지 않는 url
  .then(res => {
    if (res.ok){
      return res.json();
    }
    throw new Error('요청 중 오류 발생');
  })
  .then(json => console.log(json))
  .catch(e => console.log(e.message));

Cookie

• 브라우저에서 저장되는 작은 문자열
• 다른 저장 방식에 비해 가장 오래된 방식
• HTTP 요청 시 헤더에 쿠키가 포함되어있어 쿠키 사이즈가 커지면 HTTP 요청 크기도 커짐
• 사이즈에 제한이 있음
• 여러가지 보안 취약점이 존재하기 때문에 사용에 주의

Cookie 추가

• key, value 값의 관계를 “=”(equal)로 표현

document.cookie = 'name=gugugu'

• 쿠기에 유효기간을 설정하지 않은 상태면 브라우저를 닫는 순간 쿠키가 사라짐

// 쿠키에 유효기간 추가
// expries의 경우 GMT String을 넣어야하며 한국 시간과 다르다는 것을 알아야함
new Data().toGMTString() //현재 GMT 시간을 읽어올 수 있음
document.cookie = 'name=gugugu; expires=Mon, 2 Aug 2023 12:12:11 GMT'

// max-age를 통해 생성시점 기준으로 유효기간 설정가능 단위는 1초
document.cookie = 'name=gugugu; max-age=3600'

Cookie 읽기

• 각 쿠키는 ‘;’로 구분되어 있어 split으로 쪼개서 사용해야함

const cookies = doument.cookie;
console.log(cookies.split(';');

Local Storage

• key, value 기반으로 Local에 데이터 저장 가능 ⇒ string만 넣을 수 있으므로 JSON.stringify와 JSON.parse를 사용하는 것을 추천
• 도메인 기반으로 Storage가 생성됨 ⇒ 도메인만 같다면, 도메인이 같은 다른 탭에서도 같은 Storage 공유 가능
• 삭제하거나 Storage를 날리지 않는 한 삭제되지 않음

Local Storage 사용 방법

• localStrage에 저장하는 3가지 방법

    window.localStorage.name = 'gugu' // 방법1
    window.localStorage['name'] = 'roto' // 방법2
    window.localStorage.setItem('name', 'roto') // 방법3
    // 방법 3 - setItem을 사용하는 것을 권장함
    // 방법 1, 2는 localStorage의 내장 함수들을 덮어 씌울 수 있어서 권장하지 않음

• Local Storage의 전체적인 사용 방법

    // 저장
    localStorage.setItem('name', 'gugu');
  
    // 값 가져오기
    const storedName = localStorage.getItem('name');
  
    // 삭제
    localStorage.removeItem('name');
  
    // 전체 삭제
    localStorage.clear();

• JSON.stringify와 JSON.parse로 값을 한 번에 저장하고 읽어오기

    const user = {
        id: 'gugu',
        name: 'gugugu',
    }
  
    localStorage.setItem('user', JSON.stringify(user))
  
    const storedUser = JSON.parse(localStorage.getItem('user'))

Session Strorage

• Local Storage와 비슷하지만 브라우저를 닫으면 저장된 내용이 초기화된다는 차이점이 있음

    const user = {
        id: 'gugu',
        name: 'gugugu',
    };
  
    sessionStorage.setItem('user', JSON.stringify(user));
    const storedUser = JSON.parse(sessionStorage.getItem('user'));

ES6 Module

import

• export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드
• 스크립트 의존성을 훨씬 간편하게 관리할 수 있음 ⇒ 각 JS 별로 사용되는 모듈을 명시적으로 import 해오기 때문에 사용되지 않는 스크립트 추적이 가능!
• script src로 불러오는 것과 달리 전역오염이 발생하지 않음

// moduleName 내에 export default로 내보내진 것을 가져옴
import defaultExport from "moduleName";

// moduleName 내에서 export 된 모든 것을 가져옴, as 이후 이름은 자유롭게 정할 수 있음(중복 불가능)
// 사용하지 않은 모듈까지 가져올 가능성이 있음!!!
import * as allExport from "moduleName";

// moduleName 내에서 export 된 것 중 특정 값만 가져옴
import { someExport } from "moduleName";

// moduleName 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴
import { someExport as myExport } from "moudleName";

// export default 된 것과 개별 export 된 것을 한번에 가져옴
import defaultExport, { someExport } from "moduleName";

// 별도의 모듈 바인딩 없이 불러오기만 함, 불러오는 것 만으로 효과가 있는 스크립트의 경우 사용
import "moduleName"

<HTML>
.
.
.
        <!-- module 사용 시 type="module"을 잊지 말자! -->
        <script src="index.js" type="module"></script> 
    </body>
</html>

export

• export 한 모듈은 무조건 ‘use strict’가 적용됨
• 자바스크립트 스타일 가이드는 함수나 클래스 선언 끝에 세미콜론을 붙이지 않는 것을 권유함 → 같은 이유로 export class나 export function 끝에 세미콜론을 붙이지 않음!
• “export default” 키워드를 통해 해당 모듈엔 하나의 개체만 있다는 사실을 명확히 나타낼 수 있음 → 하나의 파일엔 대개 하나의 “export default”만 있음

// 유명 내보내기
// import 할 경우 export 한 이름과 동일한 이름을 사용해야함
// import 시 중괄호 필요!
export let variable = 1;
export function myFunc() {}

// 기본 내보내기
// import 할 경우 어떤 이름으로도 import 가능
// import 시 중괄호 필요 없음!
export default function myFunc() {}
export default function () {}

// export as
export { myFunc as exportFunc, varibale, as exportVal };

// import한 객체를 다시 내보내기
export { myFunc } from './my.js'
export { default as User } from './user.js' // default export를 다시 내보내기함

callback - 비동기 다루기

• 비동기 처리란 ⇒ 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JS의 특성
• JS는 싱글 스레드이기 때문에 sync(동기) 방식을 사용하게 되면 요청 후 응답이 오기 전까지 브라우저가 다른 함수나 스크립트를 실행 할 수 없는 상태가 됨… → async(비동기)를 사용하는 이유
• 비동기 처리를 하는 함수(ex. api 요청)들은 하나의 담당 파일에 빼두고 중복을 최소화하는 것이 좋음

• 아래의 코드에서 에러가 발생하는 이유는 Cat 함수 실행 시 this는 window를 가리키게 되고 const cat에서 name은 undefined가 발생하게 된다.

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

const cat = Cat('gugu', 9);
console.log(cat.name) // error!

• new를 붙여주면 this는 window가 아닌 새로 생긴 객체를 가리킴

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

const cat = new Cat('gugu', 9);
console.log(cat.name) // gugu 출력

new 키워드의 동작 순서

1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행하며 this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환

function Person(name) {
    // this = {}; 빈 객체를 임시로 만듬
    this.name = name; // 새로운 프로퍼티를 this에 추가
    // return this; this가 암시적으로 반환
}

let person = new Person('Gugu');
// 즉 위의 new Person 코드는 아래와 같다.
let person = {
    name: 'Gugu',
};

arrow function의 this

• 화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않음
• 화살표 함수에서 this는 외부 함수의 this를 말함

let person = {
  title: "구구구",
  students: ["치킨", "회", "피자"],

  showLikes() {
    this.students.forEach(
            // forEacth에서 화살표 함수를 사용했으므로 화살표 함수 본문의 this.title은
            // 함수 밖같의 showLikes가 가리키는 대상과 동일해 짐 this.title = person.title
      student => console.log(this.title + '의 최애 음식' + student)
    );
  }
};

person.showLikes();

즉시 실행 함수(IIFE)

• IIFE를 사용하지 않고 여러개의 JS파일을 모듈화 한다면 서로 다른 JS 파일에서 동일한 이름을 가진 변수나 함수가 오염될 수 있음 ⇒ IIFE를 사용하여 전역 오염을 최소화 시킬 수 있음
• 활용 방법

  const counter = (function() {
  // 외부에서는 count 변수에 직접적으로 접근할 수 없음 => private 효과
  let count = 0;
  function log(message) {
    console.log(message);
    count += 1;
  }
  function getCount() {
    return count;
  }
  return {
    log: log,
    getCount: getCount
  }
  })()
  

console.log(counter.getCount()); // 2 console.log(counter.count); // undefined

# 명령형(imperative) 프로그래밍

- 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것
- “어떻게 구현하는가?”(How)에 관점을 둠

# 선언형(declarative) 프로그래밍

- 프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 ”무엇과 같은지”(What)를 설명하는 경우
- 목표를 명시하고 알고리즘을 명시하지 않는 것 ⇒ HTML이 대표적인 선언형 프로그래밍 언어
- 코드가 간결하고 확정성도 좋아져서 명령형보다는 선언형 사용을 지향함

# 명령형과 선언형의 차이

```jsx
// 명령형
function imperativeDouble(arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    results.push(arr[i] * 2);
  }
  return results;
}

// 선언형
function declarativeDouble(arr) {
  return arr.map((num) => num * 2);
}

파일의 마지막에 공백을 추가??

• 줄바꿈을 하므로서 개행 문자를 추가함
• 파일 마지막 줄 바꿈은 유닉스에서 관용적으로 사용되던 것
• 줄 바꿈이 없으면 파일을 올바르게 처리하지 못하는 프로그램들이 존재함 ⇒ GitHub에서는 마지막 줄바꿈이 추가되지 않으면 경고 메시지를 띄워줌
• 손상된 파일을 쉽게 찾을 수 있음
• JS, HTML, CSS 파일에는 줄 바꿈을 하지 않아도 문제가 발생하지는 않음 ⇒ 그래도 만약을 위해 사용하자

• 모든 경우의 수를 탐색하는 알고리즘
• DFS나 BFS를 이용할 수 있음
• 가지치기(Pruning): 효율을 위해 탐색하지 않아도 되는 곳을 미리 막는 것 ⇒ 백트래킹의 핵심!
  • 효율성을 결정하는 부분
• JS는 재귀 효율이 좋지 않기 때문에 DFS를 구현할 경우 스택을 이용하는 것이 좋음
• 탐색에서 순환(Cycle)이 발생할 가능성이 있다면 BFS를 이용하는 것이 좋음

구현 과정

• 먼저 모든 경우의 수를 찾을 수 있도록 코딩
• 문제에서 특정한 조건을 만족하는 것만 탐색하고 나머지는 탐색하지 않도록 조건문을 작성 ⇒ 절대로 답이 될 수 없는 것은 탐색을 종료

동적계획법(Dynamic Programming, DP)

• ** 작은 문제부터 해결하면서 점점 범위를 넓혀가 큰 문제를 해결하는 방식 **
• 특정 알고리즘이 아닌 문제 해결 방식을 의미함
• Dynamic Programming이지만 Dynamic하지 않고 Programming과도 관련이 없음 ⇒ 단지 멋있어 보여서 지은 이름이다…
• 메모리를 많이 사용하는 대신 빠른 성능
• 두 가지 방법론이 있음
  • 메모이제이션(Memoization)
  • 타뷸레이션(Tabulation)

메모이제이션

• 하향식 접근법
• 작은 문제들의 결과를 저장해두었다가 필요할 때 꺼내쓰는 방식(동적 계획법에서 작은 문제들의 결과는 항상 같음)

타뷸레이션

• 상향식 접근법
• 필요한 값들을 미리 계산해두는 것
  • 메모이제이션은 필요할 때 계산한다면 타뷸레이션은 미리 계산해둔 값을 꺼내쓰는 방식
• 실제 업무에서는 타뷸레이션을 많이 사용하지만 코딩 테스트에서는 메모이제이션을 많이 사용함

동적 계획법 문제 접근법

• 동적 계획법 유형은 키워드만으로 동적 계획법 문제임을 알기 어려움
• 문제 유형을 알 수 없으면 다음을 확인해야함
  • 가장 작은 문제로 정의할 수 있는가?
  • 작은 문제를 통해 큰 문제를 해결할 수 있는 규칙이 있는가?
  • 위의 두가지가 가능하다면 동적 계획법 문제로 볼 수 있음

간결하고 가독성 좋은 코드 작성법

• 변수, 함수의 이름을 적절하게 선언
• 중복 코드 제거
• 함수형 프로그래밍을 이용하기 → map, filter, reduce와 같은 고차함수 이용
• 일관성을 잘 유지하기 → 조금 더러워도 일관성있는 코드가 좋음
  • var과 let 혼용하지 않기
  • snake_case와 camelCase를 혼용하지 않기
  • 변수명, 함수명을 줄임말과 전체 작성을 혼용하지 않기

코딩테스트 입출력 제한

• 입력이 100 이하인 경우
  • 완전 탐색
  • 백트래킹
• 입력이 10,000 이하인 경우
  • 최대 O(n^2) 이내로 끝내야함
  • 문제에 따라 O(n^2 log n)까지 가능
  • n*n 2차원 리스트를 모두 순회해야하는 문제가 많음
• 입력이 최대 1,000,000 이하인 경우
  • 최대 O(n log n)으로 끝내야하는 문제
  • 힙, 우선순위 큐
  • 정렬
  • 동적 계획법(DP)
  • 위상 정렬
  • 다익스트라 알고리즘
• 입력이 100,000,000 이하인 경우
  • 최대 O(n)으로 끝내야하는 문제
  • 동적 계획법
  • 그리디
• 그 이상인 경우 → 거의 출제되지 않음
  • 최대 O(log n)으로 끝내야하는 경우가 많음
  • 이진탐색

문제 유형

• 입력 값이 작은 문제 → 높은 확률로 완전 탐색 혹은 백트래킹 문제
• 지도가 주어지고 채워진 영역을 찾아야하는 경우 → 높은 확률로 BFS, DFS 문제
• 그래프 그림이 있는 경우
  • 최단 거리 찾기, 최소 신장 트리, 위상 정렬 중 한 가지를 사용해야할 확률이 높음
  • 최단 거리 찾기: 문제에 “가장 빠른 길”, “최단 거리”, “x비용 내로 갈 수 잇는 길” 같은 키워드
  • 최소 신장 트리: “가장 저렴한 방법으로 모든 경로 연결”, “가장 저렴하게 연결” 같은 키워드 ⇒ 크루스칼, 프림 알고리즘 사용
  • 위상 정렬: “순서”, “차례” 같은 키워드
• X라는 조건을 만족하는 가장 최대/최소값을 찾아라 → 높은 확률로 결정 문제, 파라메트릭 서치 이용
• 실시간으로 정렬이 이루어져야 하는 경우 - 높은 확률로 우선순위 큐 혹은 힙을 사용하는 문제
• DP 문제
  • 완전 탐색처럼 시간이 오래걸리면 안되는데 특별한 알고리즘을 사용하는 문제가 아닐 경우 높은 확률로 DP 문제
  • 유형을 판단하기 힘든 경우 DP처럼 풀 수 있는지 생각해봐야함
    1. 문제를 따라 초기값을 작성
    2. 초기값을 포함해 모든 상태값을 작성
    3. 현재 상태를 통해 다음 값을 구할 수 있는지 판단
    4. 혹은 이전 상태들을 통해 현재 값을 구할 수 있는지 판단
    5. 식을 만들 수 있다면 DP 문제임
• 문자열이 주어지는 경우 → 구현력 문제인 경우가 많음
• 현재 상황에서 가장 최적인 선택을 해야하는 경우 → “가장 많은 선택을 할 수 있는”, “가장 작은/큰” 등의 키워드가 들어가면 그리디 문제일 확률이 높음

엣지케이스 찾는 법

• 엣지케이스: 일반적인 테스트 케이스와는 다른, 주로 특수한 상황이나 극단적인 입력값을 가지는 테스트 케이스를 말함
• 엣지케이스의 종류
  • 입력 값의 크기가 굉장히 작은 케이스
  • 입력 값의 크기가 굉장히 큰 케이스
  • 입력 값의 범위가 넓은 케이스
  • 음수 입력이 허용된 경우 음수만 입력받는 케이스
  • 리스트를 입력 받을 때 값이 없거나 하나만 있는 케이스
  • 그래프에서 사이클이 발생하는 경우
  • 길찾기 문제에서 지그재그로 움직일 경우
  • 부동소수점 오차

JS 코드 트릭

배열 생성으로 루프 제거

• 일반적인 범위 루프 방법

let sum = 0;
for (let i = 1; i < 5; i += 1) {
    sum += i;
}
// sum = 15

• 함수형 프로그래밍 방식으로 범위 루프 작성

const sum = Array
  .from(new Array(5), (_, k) => k+1)
  .reduce((acc, cur) => acc + cur, 0);
// sum = 15

배열 내 같은 요소 제거

• Set을 사용

const fruits = ['apple', 'banana', 'apple', 'banana', 'melon'];
const uniqueFruitsWithArrayFrom = Array.from(new Set(fruits));
const uniqueFruitsWithSpread = [...new Set(fruits)];

console.log(uniqueFruitsWithArrayFrom); // [ 'apple', 'banana', 'melon' ]
console.log(uniqueFruitsWithSpread); // [ 'apple', 'banana', 'melon' ]

객체 생성시 키 생략하기

• 객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략할 수 있음

const name = 'GunWoo';
const FullName = 'HongGunWoo';
const person = {
  name,
  FullName
}
console.log(person); // { name: 'GunWoo', FullName: 'HongGunWoo' }

동적 속성 이름

• ES6에 추가된 기능으로 객체의 키를 동적으로 생성 가능

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'GunWoo',
  [emailKey]: 'test@test.com'
};
console.log(person); // { name: 'GunWoo', email: 'test@test.com' }

!! 연산자를 사용하여 Boolean 값을 바꾸기

• !! 연산자를 통해 0, null, 빈 문자열, ndefined, NaN을 false로 그 외에는 true로 변경할 수 있음

function check(variable) {
  if (!!variable) {
    console.log(variable);
  } else {
    console.log('false');
  }
}
check(0); // false
check(null); // false
check(''); // false
check(undefined); // false
check(NaN); // false

check('Good'); // Good
check(5); // 5
check(3.1); // 3.1

CSS란?

• css : Cascading Style Sheets

  cascading: ‘위에서 아래로 흐르는’, 선택자에 적용된 많은 스타일 중에 어떤 스타일로 브로우저에 표현할지 결정해주는 원리를 의미한다.

CSS 선택자 종류

• *: 전체 선택
• type(태그 이름): 태그 선택
• id( # ): id 선택
• class( . ): 클래스 선택
• state( : ): 상태에 따라 변경 가능
• attribute( [ ] ): 해당 속성값 선택
• 자식( > ): 특정 요소의 자식요소를 선택(ex. ul > li ⇒ ul 요소의 자식인 모든 li를 선택)
• 후손(공백): 특정 요소의 모든 하위 요소를 선택(ex. div p ⇒ div 요소의 모든 p를 선택

id와 class의 차이점

• 유일성(Uniqueness)
  • id는 문서 내에서 유일한 식별자로 사용되어야함 → 동일한 id를 여러 요소에 할당할 수 없음
  • class는 여러 요소에 동일한 class를 할당할 수 있음 → 여러 요소를 그룹화하고 스타일을 일괄적으로 적용하는 데 유용함
• 우선순위(Priority)
  • id 선택자의 우선순위는 class 선택자보다 높음 →id는 class보다 더 특정하고 구체적인 스타일을 적용하고자 할 때 유용함
• 재사용성(Reusablility)
  • id는 고유성을 가져야 하므로 특정 요소에 한 번만 사용함 → 해당 요소에 대한 스타일을 재사용할 수 없음
  • class는 여러 요소에 동일한 class를 할당할 수 있으므로 스타일의 재사용성이 높음
• JavaScript 접근성
  • id는 JS에서 요소를 식별하고 조작하는 데 사용
  • class도 JS에서 사용할 수 있지만, id보다는 한정적인 용도로 사용됨
    • JS에서 class를 선택하여 해당 클래스를 가진 모든 요소에 스타일을 적용하거나 조작하는 경우
    • 이벤트 핸들러를 일괄적으로 적용하는 경우
    • 그룹화된 동작을 수행하는 경우

동일한 id가 여러개 있다면?

• 동일한 id를 가진 여러 요소에 대해 어떤 요소의 스타일이 적용될지 예측할 수 없음
• CSS는 id 선택자에 매칭되는 첫 번째 요소에 스타일을 적용하고 나머지 동일한 id를 가진 요소는 무시함

DOM(Document Object Model)

• 브라우저가 웹 문서를 이해할 수 있도록 구성한 것으로 html 모든 요소들과의 관계를 부자관계로 표현된 트리 구조로 구성한 것
• 트리 구성 노드
  • 문서 노드: 최상위 노드로 DOM 트리의 시작점
  • 요소 노드: HTML태그 그 자체를 나타냄, HTML 문서 구조를 그대로 표현함
  • 속성 노드: 요소 노드에 붙어있는 노드(자식 노드 X)로 태그에 정의되어있는 속성을 말함
  • 텍스트 노드: 요소의 텍스트를 표현하며 자식 노드를 가질 수 없어 DOM 트리의 단말 노드가 됨
• DOM의 각 요소는 프로토타입 객체로 정의되어 있음

JS로 DOM 선택하기

• getElementById: DOM Tree에서 요소 노드를 id로 찾음, 제일 먼저 찾은 요소 하나를 반환
• getElementByClassName: DOM Tree에서 요소 노드를 class로 찾음, 일치하는 모든 요소를 반환
• getElementByTagName: DOM Tree에서 요소 노드를 태그 이름으로 찾음, 일치하는 모든 요소를 반환
• querySelector: DOM Tree에서 요소 노드를 CSS Selector 문법으로 찾음. 제일 먼저 찾은 요소 하나를 반환
• querySelectorAll: DOM Tree에서 요소 노드를 CSS Selector 문법으로 찾음. 일치하는 모든 요소를 반환
• window.[id]: id가 있는 요소는 window 객체를 통해 찾을 수 있음, 여러 개라면 리스트로 반환

DOM 탐색 방법

• parentNode: 선택한 요소 노드의 부모 노드를 불러옴
• firstElementNode: 선택한 요소 노드의 자식 요소 노드 중 첫 번째를 불러옴, 없을 경우 null 반환
• chilren: 선택한 요소 노드의 자식 요소 노드를 불러옴, 없을 경우 빈 배열 반환
• nextElementSibiling: 선택한 요소 노드의 다음 형제 요소 노드를 불러옴, 없을 경우 null 반환
• previousElementSibiling: 선택한 요소 노드의 이전 형제 요소 노드를 불러옴, 없을 경우 null 반환

DOM 조작 방법

• class 접근: 선택한 요소 노드에서 className과 classList로 요소의 class 속성을 불러오고 변경할 수 있음
• hasAttribute: 선택한 요소 노드에서 속성을 가지고 있는지 확인
• getAttribute: 선택한 요소 노드에서 속성의 값을 반환, 없을 경우 null 반환
• setAttribute: 선택한 요소 노드에서 속성을 정의
• removeAttribute: 선택한 요소 노드에서 속성을 제거
• textContent: 선택한 요소 노드에서 텍스트 노드에 접근, 변경 가능
• innerHTML: 선택한 요소 노드 내부 HTML을 수정 → XSS 위험이 있음
• createElement: 요소 노드를 태그 이름으로 생성할 수 있음
• appendChild: 선택한 요소 노드 마지막 자식 요소로 추가
• removeChild: 선택한 요소 노드 자식 노드 중 해당하는 요소를 제거

document.createDocumentFragment

• 비어있는 DocumentFragment 객체를 생성하는 메서드

• DocumentFragment는 메모리에 존재하는 가상의 문서 조각으로 실제 DOM에 직접 추가되지 않고 메모리 상에서 조작할 수 있음

• DocumentFragment를 사용하면 여러 DOM 요소를 생성하고 조작하는 작업을 효율적으로 수행할 수 있음

• DOM 요소를 동적으로 생성하여 DocumentFragment에 추가하고 나중에 한 번에 실제 DOM에 추가할 수 있음 → DocumentFragment를 사용하여 여러 요소를 조작하는 동안 불필요한 리플로우나 리레이아웃 계산이 발생하지 않아 성능 향상에 도움이 됨

• 예시 코드

    const fragment = document.createDocumentFragment();
  
    for (let i = 0; i < 5; i++) {
      const div = document.createElement('div');
      div.textContent = `div ${i}`;
      fragment.appendChild(div);
    }
  
    // 실제 DOM에 추가
    document.body.appendChild(fragment);

Virtual DOM

• 실제 DOM Tree를 JS 객체로 만든 것으로 필요한 정보만을 담아 만들어짐
• 이벤트나 DOM이 수정되는 한 틱 내에 Virtual DOM에서 바뀌는 부분만 수정한 후 렌더링하면 브라우저 렌더링 프로세스 과정이 줄어들게 됨
• Virtual DOM는 유지보수가 용이한 애플리케이션을 만들도록 도와주고 대부분의 유스케이스에서 DOM보다 충분히 빠를 뿐이지 Virtual DOM이 DOM보다 빠른 것은 아니다.

• 같은 깊이에 해당하는 노드부터 탐색하는 알고리즘
• Queue를 이용하여 구현
• 시작 지점에서 가까운 노드부터 탐색
• V가 노드의 수 , E가 간선의 수일 때, 시간 복잡도는 O(V+E)

구현

function bfs(graph, start, visitied) {
  let queue = [start];
  visitied[start] = true;
  while (queue.length) {
    v = queue.shift();
    console.log(v);
    for(i of graph[v]) {
      if (!visitied[i]) {
        queue.push(i)
        visitied[i] = true;
      }
    }
  }
}

graph = [
  [],
  [2, 3, 8],
  [1, 7],
  [1, 4, 5],
  [3, 5],
  [3, 4],
  [7],
  [2, 6, 8],
  [1, 7]
]

visitied = Array.from({length: 9}, () => false);

bfs(graph, 1, visitied);

DFS(Depth-First Search, 깊이 우선 탐색)

• 그래프에서 최대한 깊은 노드부터 우선적으로 탐색하는 알고리즘
• stack을 이용하여 구현
• 시작 노드에서 깊은 것 부터 찾음
• V가 노드의 수 , E가 간선의 수일 때, 시간 복잡도는 O(V+E)

구현

function dfs(graph, v, visitied) {
  visitied[v] = true;
  console.log(v);

  for(i of graph[v]) {
    if (!visitied[i]) {
      dfs(graph, i, visitied);
    }
  }
}

graph = [
  [],
  [2, 3, 8],
  [1, 7],
  [1, 4, 5],
  [3, 5],
  [3, 4],
  [7],
  [2, 6, 8],
  [1, 7]
]

visitied = Array.from({length: 9}, () => false);

dfs(graph, 1, visitied);

BFS, DFS 그림설명

[Python, JS] DFS/BFS 알고리즘

그리디(Greedy)

• 매 선택에서 지금 이 순간 가장 최적인 답을 선택하는 알고리즘 ⇒ 최적해를 보장하지 않음

• 최적해를 구하는 알고리즘보다 빠른 경우가 많음

• 크루스칼, 다익스트라 알고리즘에 활용

  Git의 목적

• Git: 분산 버전 관리 시스템

  • 원하는 시점마다 버전을 만들고 버전 사이를 자유롭게 돌아다니는 것이 가능
  • 내가 만든 버전 뿐 아니라 동료가 만든 버전으로 이동이 가능하고 동료와 내 버전을 비교해서 최신 코드로 업데이트가 가능
  • 즉 버전 관리, 백업, 협업이 가능하게 하는 도구

Git의 기본 개념

• Working tree
  • 현재 내가 작업하고 있는 공간, 수정한 내용이 들어있음
• Staging Area
  • git repository에 저장하기 전 단계에 있는 공간, working tree에서 수정한 내용들중 commit하고 싶은(버전을 만들고 싶은) 파일들을 선택해서 repository에 올림
• Repository
  • git repository, staging area에서 commit을 한 내용들이 저장됨

Git 초기 설정

• git config --global user.name “your name”
• git config --global user.email youremail@example.com
• git config --list → 설정한 config 목록을 확인
• git init .
  • 현재 디렉터리를 git 버전 관리를 시작함. 생성되는 .git 파일은 git repository(저장소)이다.
  • 내가 만든 버전 정보, 원격 저장소 주소 등이 저장됨
  • 원격 저장소에서 내 컴퓨터로 코드를 받아오면 자동으로 생성됨

1. 버전(version) 관리

• git status
  • working tree의 status를 알 수 있음
• git add
  • staging area에 추가하고 싶은 파일들을 선택
• git commit -m "~"
  • version 생성
• git commit -am “~”
  • 최초 한 번은 add 되어있는 파일들에 대해 add를 하지 않아도 자동으로 add가 실행됨 즉 add와 commit을 한번에 실행함
• git log
  • 버전 확인(생성한 커밋 확인)
• git log --stat
  • commit에 연루되어있는 파일 출력
• git diff id1 id2
  • 파일의 차이점 출력
• git log -p
  • 각 commit간 diff한 결과를 나타냄
• git checkout (commit id or ‘main’)
  • 현재 working tree를 특정 버전(commit)으로 변경할 수 있음, branch도 변경할 수 있음

2. 백업(backup)

• git push
  • local repository(지역 저장소)에 있는 파일들을 remote repository(원격 저장소에 복사)
• git clone
  • remote repository에 있는 파일들을 새로운 컴퓨터 즉 작업을 새로이 연결해서 시작하고자 하는 local repository에 복사하는 과정
• git pull
  • remote repository에 있는 파일들을 local repository에 가져옴(clone은 전체 복사이고 pull은 다른점을 가져온다)
• git remote add origin ‘remote repository 주소’ → origin은 원격 저장소 별명이다.
• git remote -v → 연결되어있는 원격 저장소의 주소 확인
• git push --set-upstream origin main
  • 지역 저장소는 여러개의 원격 저장소에 연결될 수 있는데 그 중에 어떤 원격 저장소에 기본적으로 연결할지 세팅하는 과정
• git push -u origin main 으로 줄일 수 있음

3. 협업(collaborate)

• 항상 git pull, git push를 자주 해야한다. 작업을 시작하기 전에 git pull은 필수!
• git pull = git fetch + git merge FETCH_HEAD
  • git fetch → 원격 저장소의 내용만 업데이트
  • git merge FETCH_HEAD → 가장 최근에 fetch했던 branch를 merge해준다.

Git branch

• 브랜치(Branch): 나뭇가지, 분기된 흐름 = 특정 커밋을 가리키는 포인터
• git branch → 현재 생성된 branch 목록 출력
• git branch ‘만들 branch 이름’ → 새로운 branch 생성
• git checkout ‘branch 이름’ → 해당 branch로 전환
• git log --all --graph --oneline → 아래의 그림과 같이 출력

merge(병합)

base: merge하려는 branch들의 공통의 부모(조상)을 말함

git merge ‘merge할 branch 이름’ → 현재 가리키고 있는 branch에서 입력한 branch를 merge한다.

conflict(충돌)

같은 파일의 같은 부분을 수정한 경우 위와 같이 conflict가 발생하게 된다.

======= → 구분자를 뜻하며 구분자 위쪽은 현재 branch의 내용이 master이고 구분자 아래쪽은 o2 branch의 내용은 o2임을 나타낸다.

이런 경우 파일을 수동으로 수정한 후 git add ‘해당 파일 이름’ → git commit을 입력하면 merge를 계속 진행할 수 있다.

fork

• 저장소를 통째로 복제하는 것
  • 다른 사람의 저장소를 통째로 자기의 계정으로 복제해와서 커밋, 푸시를 하고 내 저장소와 포크 해온 저장소의 브랜치를 머지해달라고 요청하면 됨

brach vs fork

⇒ 주로 소규모 팀 등 팀 단위일 때는 branch, 오픈 소스 등 대규모 팀 단위일 때는 fork를 사용함

pull request(merge request, PR)

main branch에 merge하기전 팀원들과 코드 리뷰를 통해 merge를 할지 말지를 결정하는 것 → 통합 branch의 안정성을 높일 수 있다.

assignees: 이 작업에 참여한 사람을 지정

reviewers: 이 코드에 리뷰를 줬으면 하는 사람을 지정

amend

• 가장 마지막에 commit한 내용을 수정할 때 사용
• git commit --amend
• 이력을 변경하기 때문에 주의해서 사용해야함(ex 다른 사람이 커밋을 pull해서 수정 중 내가 amend 해버렸다면 히스토리가 꼬이게됨 ⇒ 혼자 사용하는 브랜치에서 사용하자!)

stash

• 변경사항을 커밋하지 않고 기억만 해두고 싶을 경우 사용(ex 다른 브랜치로 급하게 옮겨야하는 경우가 있을 때 현재 브랜치에서 작업한 내용들을 기억해두고 싶다!)

reset

• 옛날 커밋으로 브랜치를 되돌리고 싶을 때 사용
• amend와 마찬가지로 혼자 사용하는 브랜치에서만 사용하는 것을 권장함
• git reset --hard (바꿀commit id)
  • 입력한 commit id의 버전으로 리셋함
  • --hard: 버전뿐만 아니라 수정본까지 삭제
  • --soft: 수정본은 남겨두고 버전만 삭제
  • --mixed: 변경 사항이 있는 파일들은 Working directory에 보존하고 HEAD와 branch만 이동하게 됨

checkout과 reset의 차이점

https://opentutorials.org/module/3927/23693

checkout은 HEAD를 바꾸기 때문에 change의 의미가 있고

reset는 branch를 바꾸기 때문에 delete의 의미가 있다.

• 만약 HEAD가 google을 가리키고 있는 생태에서 reset 1을 한다면 google은 1번 버전을 가리키게 된다.

revert

• git revert (revert할 commit id)
• 기존의 커밋(입력한 id)는 그대로 두고 해당 커밋에서의 수정사항을 취소함(여러 단계 전의 commit으로 돌아가고 싶다면 한번에 revert할게 아니라 역순으로 한 단계씩(한 개의 commit씩 revert를 해야 충돌을 피할 수 있다.)
• reset은 히스토리를 완전히 삭제시키지만 revert는 히스토리를 새로 쌓아가면서 변경함 ⇒ 다른사람과 같이 사용하는 브랜치에서 사용하면 좋음

cherry-pick

• 여러가지 커밋 중 원하는 커밋만 선택해서 지금 브랜치에 붙이고 싶은 경우 사용
• ex) 버그 수정이 된 커밋만 현재 커밋에 가져오고 싶은 경우

git flow model

https://www.youtube.com/watch?v=EzcF6RX8RrQ

branch를 어떻게 운영할 것인가에 대한 좋은 모델(사례)

main 브렌치의 최신 버전은 언제나 실행 가능한 상태여야한다!

• develop: 개발할 때 사용하는 브렌치
  • feature branches: 신규 기능 개발 브렌치
• release branches: 출시 준비 시 사용하는 브렌치
• hotfixes: 긴급한 수정사항 반영

• shift의 시간복잡도는 O(N)이지만 N의 수가 적은 경우 JS엔진에서 최적화를 시켜주기 때문에 큐에 들어갈 데이터가 적은 경우 사용해도 좋음(N이 적은 경우직접 구현한 Queue보다 빠르게 동작할 수도 있음)
• 요소가 많아질 경우 직접 구현한 Queue가 shift 함수보다 빠르게 동작함

트리

• 방향 그래프의 일종으로 노드을 가리키는 간선이 하나 밖에 없는 구조를 가짐

특징

• 루트 노드를 제외한 모든 노드는 반드시 하나의 부모 노드를 가짐
• 노드가 N개인 트리의 간선의 개수 = N - 1
• 루트에서 특정 노드로 가는 경로는 유일함

이진 트리

• 각 노드가 최대 2개의 자식 노드를 가지는 트리
• 완전 이진 트리: 마지막 레벨을 제외하고 모든 노드가 채워진 상태
• 포화 이진 트리: 모든 정점이 채워진 상태
• 편향 트리: 한 방향으로만 노드가 이어진 상태
• 이진 탐색 트리, 힙, AVL 트리, 레드 블랙 트리 등에 사용함

이진 트리의 특징

• 노드가 N개일 때 이진 트리는 최약의 경우 높이가 N이 될 수 있음
• 노드가 N개인 포화 또는 완전 이진트리의 높이는 logN
• 높이가 h인 포화 이진트리는 (2^h) - 1개의 노드을 가짐

트리의 구현 방법

• 인접 행렬, 인접 리스트 방식, 연결 리스트 방식으로 구현할 수 있다.

• JS로 이진 트리 구현

    // 0번 indx는 편의를 위해 사용하지 않음
    // left = index * 2
    // right = index * 2 + 1
    // parent = floor(index / 2)
    const binaryTree = [
      undefined,
      9,
      1, 2,
      3, 4, undefined, 5,
      undefined, undefined, undefined, 6,
    ]

힙(Heap)

• 이전 트리 형태를 가지며 우선순위가 높은 요소가 먼저 나가기 위해 요소 삽입, 삭제 시 바로 정렬됨
• 힙은 우선 순위 큐를 구현할 때 가장 적합한 방법이다.
  • 우선 순위 큐: 일반적인 큐와 다르게 우선 순위가 높은 요소가 먼저 나가는 큐 ⇒ 자료구조가 아닌 개념

힙의 특징

• 우선 순위가 높은 요소를 루트 노드로 배치함
• 루트가 가장 큰 값 = Max Heap, 루트가 가장 작은 값 = Min Heap

힙 요소 추가 알고리즘

1. 추가할 요소를 트리의 가장 마지막 노드로 위치
2. 추가 후 부모 노드보다 우선 순위가 높다면 부모 노드와 순서를 바꿈
3. 위의 과정을 반복하여 루트 노드에 우선 순위가 높은 노드가 위치하도록 함
4. 완전 이진 트리의 높이는 logN 이므로 힙의 요소 추가 알고리즘은 O(logN)의 시간복잡도를 가짐

힙 요소 제거 알고리즘

1. 루트 노드에서 요소를 제거
2. 루트 노드가 제거된 후 가장 마지막 노드가 루트에 위치
3. 루트 노드의 두 자식 노드 중 더 우선순위가 높은 노드와 바꿈
4. 두 자식 노드가 우선순위가 더 낮을 때 까지 반복
5. 힙 요소 추가 알고리즘과 동일하게 O(logN)의 시간복잡도를 가짐

힙의 구현 방법

// Max Heap으로 구현
class Heap {
  constructor() {
    this.heap = [null];
  }

  push(value) {
    this.heap.push(value);
    let curIdx = this.heap.length - 1;
    let parentIdx = Math.floor(curIdx / 2);

    while (parentIdx !== 0 && this.heap[parentIdx] < value) {
      const temp = this.heap[parentIdx];
      this.heap[parentIdx] = value;
      this.heap[curIdx] = temp;

      curIdx = parentIdx;
      parentIdx = Math.floor(curIdx / 2);
    }
  }

  pop() {
    const returnVal = this.heap[1];
    this.heap[1] = this.heap.pop();

    let curIdx = 1;
    let leftIdx = 2;
    let rightIdx = 3;
    while (
      this.heap[curIdx] < this.heap[leftIdx] ||
      this.heap[curIdx] < this.heap[rightIdx]
    ) {
      const temp = this.heap[curIdx];
      if (this.heap[leftIdx] < this.heap[rightIdx]) {
        this.heap[curIdx] = this.heap[rightIdx];
        this.heap[rightIdx] = temp;
        curIdx = rightIdx;
      } else {
        this.heap[curIdx] = this.heap[leftIdx];
        this.heap[leftIdx] = temp;
        curIdx = leftIdx;
      }
      leftIdx = curIdx * 2;
      rightIdx = curIdx * 2 + 1;
    }
    return returnVal;
  }
}

트라이

• 문자열을 효율적으로 저장하고 탐색하기 위한 트리 형태의 자료구조
• 검색어 자동완성, 사전 찾기 등에 응용 가능
• 문자열 탐색에 단순 비교보다 효율적임
• 문자열을 길이를 L이라고 할때 탐색, 삽입이 O(L)만큼 걸림
• 각 노드에 자식에 대한 링크를 전부 가지고 있기에 많은 저장 공간을 사용

트라이 구조

• 루트는 공백
• 각 간선(링크)은 추가될 문자를 키로 가짐
• 각 노드는 이전 노드의 값 + 간선의 키를 값으로 가짐
• 해시 테이블과 연결 리스트를 이용하여 구현

트라이 구현

[JS] Trie 자료구조 구현

정렬 알고리즘

• 정렬은 크게 비교식 정렬과 분산식 정렬로 나눌 수 있음
• 정렬 알고리즘 비교 사이트 => Sorting Algorithms Animations

비교식 정렬

• 다른 요소와 비교를 통해 정렬하는 방식
• 버블, 선택, 삽입 정렬이 있다.

분산식 정렬

• 요소를 분산하여 정렬하는 방식
• 분할 정복: 문제를 작은 2개의 문제로 분리하고 더 이상 분리가 불가능 할 때 처리 후 합치는 전략
• 합병, 퀵 정렬이 있다.

[JS] 정렬 알고리즘 정리 및 구현

JS의 sort()

const arr = [5, 9, 3, 10, 1, 2];

// JS의 sort는 default로 ASCII 문자 순서로 정렬하기 때문에 주의
arr.sort()
console.log(arr); // [ 1, 10, 2, 3, 5, 9 ]
// ASCII 문자 순서로 정렬하기 때문에 10이 앞에 위치하게 됨

// 오름차순 정렬
arr.sort((a, b) => a - b);
console.log(arr); // [ 1, 2, 3, 5, 9, 10 ]

// 내림차순 정렬
arr.sort((a, b) => b - a);
console.log(arr); // [ 10, 9, 5, 3, 2, 1 ]

이진 탐색

• 정렬 되어있는 요소들을 반씩 제외하며 찾는 알고리즘
• 시간복잡도는 O(log n)

이진 탐색 특징

• 반드시 정렬 상태에서 사용해야함
• 배열 또는 이진 트리를 이용하여 구현

이진 탐색 트리의 문제점

• 최악의 경우 한쪽으로 편향된 트리가 생성됨 ⇒ 순차 탐색과 동일한 시간복잡도를 가짐
• 위의 문제를 해결하기 위해 AVL 트리, 레드-블랙 트리를 사용할 수 있다.

• 정수, 실수, 문자열, 논리

선형 구조

한 원소 뒤에 하나의 원소 만이 존재하는 형태로 자료들이 선형으로 나열되어 있는 구조

• 배열: 추가와 삭제가 반복되는 로직이면 권장하지 않음, 탐색이 많은 경우에 유리한 자료구조
• 연결 리스트: 추가와 삭제가 반복되는 로직에 권장됨
• 스택: LIFO(Last In First Out)
• 큐: FIFO(First In First Out)

큐(Queue)

• JS에서 shift 함수로 큐를 구현하지 말자! ⇒ shift는 선형 시간이 걸리기 때문에 효율이 좋지 않다!

• JS에서의 큐 구현

    class Queue {
      constructor() {
        this.queue = [];
        this.front = 0;
        this.rear = 0;
      }
  
      enqueue(inputValue) {
        this.queue[this.rear++] = inputValue;
      }
  
      dequeue() {
        const returnValue = this.queue[this.front];
        delete this.queue[this.front++];
        return returnValue;
      }
  
      peek() {
        return this.queue[this.front];
      }
  
      size() {
        return this.rear - this.front
      }
    }

해시 테이블(Hash Table)

• 키와 값을 받아 키를 해싱(Hashing)하여 나온 index에 값을 저장하는 선형 자료구조
• 삽입, 삭제, 탐색의 시간복잡도가 모두 O(1)
• Bucket: 각 테이블에 해당 하는 index를 말함
• 사용자 정보 관리 등에 유용함

해시 함수

• 입력 받은 값을 특정 범위 내 수로 변경하는 함수
• 해시 함수 결과가 동일한 경우 ⇒ 해시 충돌(Hash Collision) 발생

해시 충돌 해결 방법

1. 선형 탐사법: 충돌이 발생하면 한 칸 옆으로 이동
   • 단점: 특정 영역에 데이터가 몰릴 수 있음, 최악의 경우 탐색에 선형 시간이 걸릴 가능성이 있음
2. 제곱 탐사법: 충돌이 발생하면 충돌이 발생한 횟수의 제곱만큼 옆으로 이동
3. 이중 해싱: 충돌이 발생하면 다른 해시 함수를 이용, 충돌이 발생하지 않을 때 까지 두번째 해시로 index를 계속 생성
4. 분리 연결법: 충돌이 발생한 버킷(인덱스)에 버킷의 값을 연결 리스트로 사용하여 값을 추가
   • 단점: 하나의 버킷에 값들이 무한정 늘어날 수 있는 가능성

JS에서 해시 테이블 구현

• Object로 구현

// Object를 이용
const hashTable = {};
hashTable['key'] = 10;
hashTable['key2'] = 'hi';
console.log(hashTable['key']); // 10
delete hashTable['key'];
console.log(hashTable['key']); // undefined

• Map으로 구현

// Map을 사용, Object도 Key로 사용 가능
const hashTable = new Map();
hashTable.set('key', 10);

//object를 key로 사용
const obj = { a: 2 };
hashTable.set(obj, 'aa');
console.log(hashTable.get(obj)); // a

hashTable.delete(obj);

console.log(hashTable.keys()); // { 'key' }
console.log(hashTable.values()); // { 10 }
hashTable.clear();
console.log(hashTable.keys()); // { }
console.log(hashTable.values()); // { }

• Set으로 구현

// key와 Value가 동일함
const hashTable = new Set();
hashTable.add('key');
hashTable.add('key2');
console.log(hashTable.has('key')); // true
hashTable.delete('key2');
console.log(hashTable.has('key2')); // false

비선형 구조

원소 간 다대다 관계를 가지는 구조로 계층적 구조나 망형 구조를 표현하기에 적합

• 트리
• 그래프

그래프

• 정점과 정점 사이를 연결하는 간선으로 이루어진 비선형 자료구조
• 정점(Node) 집합과 간선(Edge) 집합으로 표현할 수 있음
• 특징
  • 정점은 여래 개의 간선을 가질 수 있음
  • 크게 방향 그래프와 무방향 그래프로 나눌 수 있음
    • 무방향 그래프: 정점이 간선으로 이어진 경우 양방향으로 이동 가능( A→B와 B→A는 같은 간선으로 취급)
    • 방향 그래프: 간선에 바향성이 존재하는 그래프
  • 간선은 가중치를 가질 수 있음
  • 사이클이 발생할 수 있음 ⇒ 탐색 시 무한루프에 빠지지 않도록 사이클을 찾아야함
    • 사이클: 그래프의 정점과 간선이 부분 집합에서 순환되는 부분을 말함
• 연결 그래프: 모든 정점이 서로 이동 가능한 상태인 그래프
• 비연결 그래프: 정점에 연결된 간선이 0개인 정점이 존재하는 그래프
• 완전 그래프: 모든 정점끼리 연결된 상태인 그래프

JS 인접 행렬로 구현

• 행렬의 열 부분 ⇒ 시작 정점
• 행렬의 행 부분 ⇒ 도착 정점
• true로 간선이 연결된 것으로 설정
• 무방향 그래프의 경우 모든 값을 대칭으로 대입

const graph = Array.from(Array(5), () => Array.fill(false));
graph[0][1] = true; // 0에서 1로 가는 간선이 존재하는 경우

JS 인접 리스트로 구현

• 정점의 수 만큼 배열을 만든 후 연결할 정점을 배열에 추가

const graph = Array.from(Array(5), () => []);
graph[0].push(1) // 0에서 1로 가는 간선이 존재하는 경우

some()

• array 타입에서 사용 가능한 함수로 주어진 판별 함수를 실행하여 배열 안의 요소들 중 참이 되는 결과가 있는지 테스트한다.

• 판별 함수가 true를 반환하면 some은 true를 반환한다.

• 예시

    arr = [1, 2, 3, 4, 5, 6];
  
    console.log(arr.some((num) => num > 5)); // true
    console.log(arr.some((num) => num > 7)); // false

• 메모리를 효율적으로 사용하면서 데이터를 빠르고 안정적으로 처리하는 것이 목표
• 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있음 ⇒ 상황에 맞는 올바른 자료구조를 선택해야함
• 즉, 자료구조는 일차원인 컴퓨터 메모리를 현실에 대응되도록 만든 구조

자료구조의 종류

단순 구조

• 정수
• 실수
• 문자열
• 논리

  선형 구조

  선형 구조: 한 원소 뒤에 하나의 원소 만이 존재하는 형태로 자료들이 선형으로 나열되어 있는 구조
• 배열: 추가와 삭제가 반복되는 로직이면 권장하지 않음, 탐색이 많은 경우에 유리한 자료구조
• 연결 리스트: 추가와 삭제가 반복되는 로직에 권장됨
• 스택: LIFO(Last In First Out)
• 큐

비선형 구조

비선형 구조: 원소 간 다대다 관계를 가지는 구조로 계층적 구조나 망형 구조를 표현하기에 적합

• 트리
• 그래프

알고리즘

• 특정 문제를 효율적이고 빠르게 하는 것이 목표
• 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것

자료구조 + 알고리즘 = 프로그램!

시간 복잡도

• 특정한 크기의 입력에 대하여 알고리즘이 얼마나 오래 걸리는지를 의미함
• 프로그램의 성능을 정확히 파악하는 것은 불가능 ⇒ 대략적인 성능을 비교하기 위한 상대적인 표기법을 사용함

문제의 크기

• 문제의 크기란? 예) 쇼핑몰 장바구니 물건의 개수, 게임 동시 접속자의 수 등 이러한 문제의 크기를 보통 N이라고 하고, 문제의 크기 N에 따라 걸리는 시간이 다르다.
• 문제를 해결할 때 문제의 크기에 따라 알맞는 방법을 선택하는 것이 중요

빅오표기법(Big O notation)

빅오표기법 4가지 법칙

1. 계수 법칙: 이 무한에 가까울 수록 k의 크기는 의미가 없음
2. 합의 법칙: 빅오는 더해질 수 있음
3. 곱의 법칙: 빅오는 곱해질 수 있음
4. 다항 법칙: f(n)이 k차 다항식이면 f(n)은 O(n^k)

시간 복잡도 계산하기

• 상수는 버림 ex) O(5) = O(1), O(3N^2) = O(N^2)
• 두가지 항이 있을 때, 변수가 같으면 큰것만 빼고 다 버림 ex) O(N^2 + N) = O(N^2), O(N^2 + NlgN) = O(N^2)
• 두가지 항이 있는데 변수가 다르면 놔둠 ex) O(N^2 + M)

공간 복잡도

• 알고리즘의 실행 중에 사용되는 메모리 공간의 양을 나타내는 것
• 보통 가장 많은 공간을 사용하는 것은 배열(배열이 사용한 공간: 배열의 크기 X 자료형의 크기)
• 일반적으로 공간 복잡도는 추가적인 입력 데이터를 저장하는 데 필요한 공간과 알고리즘이 실행되는 동안 생성되는 임시 데이터를 저장하는 데 필요한 공간으로 구성됨

  JS의 Date 객체로 성능 측정

  const start = new Date().getTime();
  const N = 1000000000;
  

let total = 0; for (let i = 0; i < N; i += 1) { total += 1; }

const end = new Date().getTime(); console.log(end - start); ```

브라우저에 URL을 입력하면 발생하는 일

1. URL 해석

   • URL의 구조: scheme://:@:/
     • //은 생략 가능

2. DNS(Domain Name System) 조회

   • DNS는 도메인과 IP 주소를 서로 변환

   • DNS로 요청을 보내기 전에 브라우저 캐시와 로컬 컴퓨터의 hosts파일을 참조

     • 브라우저 캐시나 hosts에 이미 정의가 되있다면 내부적으로 IP를 반환
     • 정의가 되어있지 않다면 DNS 호출

   • DNS를 운영하는 서버를 Name Server라고 함

   • presnet.do, www.present.do, gateway.dev.present.do 전부 도메인은 present.do, 나머지 서브 도메인이 붙는 경우는 host라고 함

     

3. 해당 IP가 존재하는 서버로 이동

   • 네트워크 장비 라우터를 통해 이동하며 동적 라우팅을 통해 이동한다.

4. ARP(Address Resolution Protocol)를 이용하여 MAC 주소 변환

   • 논리 주소인 IP 주소를 물리주소인 MAC 주소로 변환하는 프로토콜
   • 실제 통신을 위해 고유한 MAC 주소가 필요(MAC 주소를 통해 기계의 실제 위치를 알 수 있다.)
   • 네트워크 내에 ARP를 Broadcasting하면 해당 IP 주소를 가지고 있는 기기가 MAC주소를 반환
   • 논리적인 주소와 물리적인 주소를 나눈 이유
     • 논리적 주소 = 도로명 주소, 물리적 주소 = GPS 좌표로 생각하자
     • IP는 대역을 통해 범위를 좁혀나가는 용도로 사용
     • MAC은 실제 위치를 알아내는데 사용

5. TCP 통신을 통해 Socket을 연다.

   • 네트워크를 통해 해당 기기로 패킷을 전달
   • 3 way handshake 연결 요청
   • 요청이 수락되면 기기는 패킷을 받아 처리

6. 서버가 응답을 반환

   • HTTP 프로토콜로 들어온 패킷을 읽고 처리
   • 요청에 따른 적절한 응답 값 반환

7. 브라우저가 렌더링함

   • HTML을 읽어 DOM Tree를 구축
   • 만들어진 DOM Tree를 이용하여 화면에 그림
   • 스크립트 실행

HTTP와 HTTPS의 차이

• HTTP(HyperText Tranfer Protocol)
• HTTPS(Hypertext Transfer Protocol Secure)

이름에서 알 수 있듯이 HTTP는 암호화되지 않은 통신을 사용하고 HTTPS는 암호화된 통신을 사용한다.

HTTPS

• SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화 ⇒ 데이터의 기밀성과 무결성을 보호하고 제3자가 데이터를 엿보는 것을 방지
• 443번 포트를 사용(HTTP는 80번 포트 사용)
• 암호화된 연결을 설정하기 위해 인증서를 사용
  • 인증서를 통해 웹 사이트의 신원을 확인하고, 클라이언트와 서버 간의 통신에 대한 암호화를 제공한다.
  • 인증서는 신뢰할 수 있는 인증 기관(Certificate Authority)에 의해 발급됨
• SEO(Search Engine Optimization, 검색 엔진 최적화)
  • HTTPS를 사용하는 웹 페이지는 검색 엔진에 의해 보다 긍정적으로 평가됨

HTTPS의 통신 과정

HTTPS는 기존의 HTTP 통신 위에 SSL/TLS 프로토콜을 추가하여 암호화와 인증을 제공함

• 클라이언트와 서버 간에 SSL/TLS handshake가 이루어짐 ⇒ 이 과정에서 서버의 인증서 확인, 클라이언트와 서버 간의 암호화 알고리즘 및 암호 키 교환 등이 이루어짐

컴퓨터 시간 동작 원리

시간이 결정되는 기준

물리 법칙에 따른 표현

• 물리량: 시간은 물리학 관점에서 봤을 때 시간과 시각 사이 간격을 표현하는 단위를 뜻함
• 위치: 시간은 위치에 따라 다르게 표현될 수 있음(나라, 지역마다 시간이 다름)
• 천문 현상: 지구 자전 속도의 불규칙성, 자전주기와 공전주기 등 천문 현상으로 인한 시간 보정이 필요

협의에 따른 표현

• 문화: 문화에 따라 시간 표현이 달라짐(태양력, 태음력 등)
• 역사: 역사적 사건에 의해 시간은 다르게 표현될 수 있음
• 사회: 사회적 제도에 의해 시간이 변할 수 있음(Summer Time)

협정 세계시(UTC)

• 원자 시계와 윤초 보정을 기반으로 표준화한 시각
• 모든 시간대는 UTC+0을 기준으로 환산
• 표기법은 ISO 8601을 따름

컴퓨터가 시간을 표현하는 방법

• 하드웨어의 시스템 클럭을 이용
• 시스템 시간: 특정 시간(Epoch)를 기준으로 시스템 클럭의 틱을 세는 것으로 구현
• 타임스탬프(Timestamp): 시스템 시간을 값으로 표현한 것

시스템 클럭

• RTC(Real Time Clock)라는 모듈을 사용함
• RTC는 메인보드에 붙어있어 전원을 끄더라고 계속 작동
• RTC는 카운터 회로를 통해 클럭을 발생시킴

컴퓨터가 시간을 알아내는 법

• 시스템 시간을 네트워크 타임 프로토콜(NTP)를 통해 동기화 할 수 있음
• NTP 서버에 네트워크 요청을 하여 현재 시간을 받을 수 있음
• NTP 서버는 계층으로 이루어져 있으며 그 계층을 Stratum이라고 함
• 최상위 계층을 PRC(Primary Reference Clock)이라고 함

컴퓨터가 시간대를 고려하는 방법

• Time Zone 데이터를 이용
• 현실 세계에 이벤트가 발생되면 업데이트 됨
• 표기법
  • 대륙/도시 형태를 따른다. ex) Asia/Seoul
  • 하나의 값을 ZoneId라고 한다.

시간을 어떤 기준으로 사용해야 할까?

글로벌 서비스 같은 경우 시간이 매우 중요해짐 ⇒ 서비스에서 사용되는 시간을 용도에 맞춰서 기록할 필요가 있음

• 순수한 시간: 시간대와 지역, 문화, 사회를 고려하지 않고 순수하게 시간을 기록하는 경우(ex 생일, 기념일 등)
• UTC: 역사, 사회, 문화에 대한 맥락 없이 사건이 발생한 시각만을 고려할 때 사용(ex 로깅, 감사, 시계열 데이터)
• Time Zone이 적용된 시간: 역사, 사회, 문화를 고려하여 사용자가 이용한 시각을 정확히 알아햐할 때 사용(UI에 표시되는 시간을 사용자 기준으로 보여줄 때 사용, ex 결제 시각, 푸시 알림 시간, 캘린더)

JS에서는 Date 객체나 date-fns, luxon 라이브러리를 사용할 수 있음

암호화

• 암호화: 평문을 해독할 수 없는 암호문으로 변환하는 것을 말함
  • 단방향(해싱)과 양방향이 존재함

단방향 암호화

• 한 방향으로만 이루어지는 암호화 알고리즘
• 해시 알고리즘을 이용함(MD5, SHA)
• 사용자 비밀번호 등을 저장할 때 자주 사용함
• MD5, SHA-0, SHA-1은 해시 충돌 가능성이 있어 사용을 권하지 않음

고려할 점

• 복호화가 불가능하지만 Rainbow Table을 통해 원문을 알아낼 가능성이 있음 ⇒ 불의의 사고로 암호화된 데이터를 탈취당하더라도 원문을 알아 낼 수 없도록 조치를 해야함
  • Rainbow Table: 평문과 해시 함수로 만든 문자열을 모두 저장시켜 놓은 표
• Salt, Key stretching를 이용하여 해결함
  • Salt: 평문에 임의의 문자열을 추가하여 암호하 하는 방법, 128bit 이상으로 만드는 것이 좋고 사용자마다 다른 Salt를 사용하면 보안성이 높아짐
  • Key stretching: 해시를 여러번 반복하여 원문을 알기 힘들게 만드는 방법, 일반적인 시스템에서 0.2초이상 반복되면 안전함

양방향 암호화

• 평문을 복호화 할 수 있는 형태로 암호화하는 방법
• 대칭키와 비대칭키 알고리즘으로 나뉨
  • 대칭키 암호 알고리즘: 대표적으로 AES가 있음, 같은 키를 이용하여 암호화, 복호화가 가능
  • 비대칭키 알고리즘: 대표적으로 RSA가 있음, 공개키와 개인키 두 가지 키가 존재, 소인수 분해를 기반으로 만들어진 알고리즘

함수형 프로그래밍의 특징

장점

• 상태가 없기 때문에 사이드 이펙트가 없음
• 높은 재사용성
• 코드가 짧고 간결함

단점

• 상태가 없기 때문에 상태 조작이 쉽지 않음
• 재사용을 위해 함수를 나눠야하고 많은 함수들이 생길 수 있음

객체지향의 오해

• 객체지향은 패러다임일 뿐 언어와는 관계가 없음 → 언어는 지향하는 것을 조금 더 편하게 구현할 수 있도록 도와줄 뿐, 따라서 클래스가 없는 언어로도 객체지향 프로그래밍을 할 수 있음
• JS는 프로토타입을 통해 객체지향을 표현함
• 절차지향, 객체지향 중 우위가 없는 것은 없음
  • 간단한 프로그램일 수록 절차지향이 더 쉽고 직관적임
  • 객체지향은 객체간 통신하기 때문에 흐름이 더 직관적이어서 더 복잡한 프로그램에 적합함

JS의 객체 생성 방법

1. 객체 리터럴

    const Person = {
      name: 'GunWoo',
      move: function() {
        console.log("이동합니다.");
      },
    }

2. Object

    const person = new Object();
    person.name = "GunWoo";
    person.move = function () {
      console.log("이동합니다.");
    };

3. 생성자 함수

    function Person(name) {
      this.name = name;
      this.move = function () {
        console.log("이동합니다.");
      }
    }

프로토타입

• 객체 지향 프로그래밍에서 객체 간의 상속과 프로퍼티 공유를 구현하는 메커니즘
• JavaScript 객체는 내부적으로 prototype이라는 프로퍼티를 가지고 있는데 prototype은 해당 객체의 프로토타입 객체를 가리킴
• 프로토타입 객체 역시 자체적으로 prototype을 가지며, 이를 통해 다른 프로토타입과 연결되는 프로토타입 체인을 형성함
• 프로토타입 체인은 객체가 특정 프로퍼티나 메소드를 찾을 때, 해당 객체의 프로토타입에도 없으면 상위 프로토타입으로 이동하여 계속해서 찾는 동작을 수행
• 함수 객체가 생성자 함수로 사용될 때, 해당 함수의 prototype 프로퍼티에 정의된 프로퍼티와 메소드는 생성된 객체들이 상속받게 됨. 즉, prototype은 객체 생성자 함수의 프로토타입 객체를 가리킴

프로토타입이 필요한 이유

• prototype을 사용하지 않은 경우 ⇒ move함수가 중복되어 메모리가 낭비된다.

function Person(name) {
  this.name = name;
  this.move = function () {
    console.log("이동합니다.");
  }
}

const p1 = new Person('gun');
const p2 = new Person('woo');
console.log(p1); // Person { name: 'gun', move: [Function (anonymous)] }
console.log(p2); // Person { name: 'woo', move: [Function (anonymous)] }

• prototype을 사용한 경우 ⇒ 하위 객체의 proto가 상위 객체를 링크하기 때문에 객체를 효율적으로 사용할 수 있다.

function Person(name) {
  this.name = name;
  Person.prototype.move = function () {
    console.log("이동합니다.");
  }
}

const p1 = new Person('gun');
const p2 = new Person('woo');
console.log(p1); // Person { name: 'gun' }
console.log(p2); // Person { name: 'woo' }
console.log(p1.__proto__); //{ move: [Function (anonymous)] }

Effective Prototype

상속을 흉내내기 - 1

부모 객체를 이용하여 프로토타입 함수 정의하기

function Person (name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name || "건우";
}

function Korean (name) {}

// 상위 객체의 함수가 링크됨 하지만 내부적으로 생성된 프로토타입 변수는 사용 불가
Korean.prototype = new Person(); 

const gun = new Person('gun');
const woo = new Korean('woo');

console.log(gun.getName()); // gun
console.log(woo.getName()); // 건우

상속을 흉내내기 - 2

부모 생성자를 빌려 쓰기

function Person (name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name || "건우";
}

function Korean (name) {
    // apply함수를 통해 Korean 생성자 함수에 전달된 인자들을 Person 생성자 함수에 적용시키는 역할을 함
  Person.apply(this, arguments);
}
Korean.prototype = new Person();

const gun = new Person('gun');
const woo = new Korean('woo');

console.log(gun.getName()); // gun
console.log(woo.getName()); // woo

Object.create

기존 객체를 재활용함

const woo = {
  name: 'woo',
  getName: function () {
    return this.name;
  },
};

const gun = Object.create(woo);
gun.name = "gun"

console.log(woo.getName()); // woo
console.log(gun.getName()); // gun
console.log(woo.__proto__); // [Object: null prototype] {}
console.log(gun.__proto__); // { name: 'woo', getName: [Function: getName] }

이벤트 루프

• JS는 싱글 스레드로 call stack이 하나만 존재함 ⇒ 브라우저는 어떻게 비동기적으로 동작할까?
  • 브라우저에는 Multi Threaded로 event loop가 존재하여 비동기적으로 동작할 수 있음

브라우저의 비동기적 동작

• JavaScript Runtime Environment에는 WebAPIs, Render, Microtask Queue, Task Queue
• 브라우저는 Multi Threaded
• Event Loop: Event Loop가 콜 스택과 테스크 큐를 반복해서 관찰하여 일을 처리하는데 콜 스택이 모두 비었을때 테스크 큐에 있는 함수 한 개를 콜 스택으로 옮김

JavaScript Runtime Environment

• JS의 Runtime 환경은 WebAPIs, Render, Microtask Queue, Task Queue가 존재
• WebAPIs
  • 브라우저에서 제공하는 API로 브라우저의 멀티쓰레딩을 이용할 수 있음 (ex setTimeout)
  • 사용자가 등록한 콜백함수를 원하는때 task Queue에 삽입
• Task Queue
  • Web APIs에서 사용자가 등록한 콜백 함수를 특정한 이벤트가 발생했을때 테스크 큐에 삽입
• Microtack Queue
  • 프로미스와 Mutation Observer API가 마이크로태스크 큐를 사용해 콜백을 호출
  • Event Loop는 task queue의 콜백 함수를 한 개씩만 콜 스택으로 이동시키지만 microtask queue에서는 큐가 모두 비어있는 상태가 될때까지 콜 스택으로 콜백함수를 이동시킴
• Render: 주기적으로 브라우저에서 사용자가 요소들을 움직이거나 애니메이션 할때 화면에 업데이트를 함
  • Request Animation Frame이라는 API를 사용한 콜백은 Render의 가장 앞부분에 등록된다.
  • Requset Animation Frame은 브라우저에서 다음 랜더링이 발생하기 전에 해당 콜백이 수행되는 것을 보장

Microtask Queue와 Task Queue 차이점

• Task Queue

    <body>
      <button>Click</button>
      <script>
        function handleClick(){
          console.log('handleClick');
          setTimeout(() => {
            console.log('setTimeout');
            handleClick();
          }, 0);
        }
        const button = document.querySelector('button');
        button.addEventListener('click', handleClick)
      </script>
    </body>
  
    //handleClick과 setTimeout이 계속해서 출력되고 버튼 클릭등이 계속 가능하다.

  setTimeout 호출 → 콜백함수 호출 → 태스크 큐에 삽입 → 콜 스택 이동 → 콜백 함수 수행 → setTimeout 호출 ..... 반복

• Microtask Queue

    <body>
      <button>Click</button>
      <script>
        function handleClick(){
          console.log('handleClick');
          Promise.resolve(0)
            .then(() => {
              console.log('then');
              handleClick();
            })
        }
        const button = document.querySelector('button');
        button.addEventListener('click', handleClick)
      </script>
    </body>
  
    //handleClick과 setTimeout이 계속해서 출력되지만 버튼 클릭 등이 작동하지 않는다.

  버튼 클릭 → 콜백함수가 테스크 큐에 삽입 → 콜 스택으로 콜백 함수 이동 → 프로미스 생성 및 프로미스가 완료되었을때 프로미스 then이 마이크로 테스크 큐에 삽입 → 마이크로 테스크 큐에 있는 then을 콜스택으로 이동 → then 수행 및 또 다른 then을 마이크로 테스크 큐에 삽입 → 마이크로 테스크 큐에 들어온 새로운 then을 다시 콜 스택에 삽입(마이크로 테스크 큐가 모두 비어있는 상태가 될때까지 반복)

모듈

모듈을 사용할 시 스크립트간 의존도 파악이 가능하고 실행 순서를 쉽게 제어할 수 있다.

모듈과 컴포넌트의 차이

• 모듈: 설계 시점에 의미있는 요소
• 컴포넌트: 런타임 시점에 의미있는 요소

JS의 모듈

• JS의 모듈은 직접적으로 런타임에 실행이 됨

  • 제대로된 모듈 역할을 하기 위해 디렉토리 단위를 모듈 개념에 가깝게 사용함

• JS 모듈의 특징

  • 항상 use strict로 실행된다.

  • 모듈 레벨 스코프가 있음

      <body>
        <script type="module">
          let a = 5;
          let b = 10;
          const c = a+b;
        </script>
        <script type="moudle">
          alert(c); //오류 발생
        </script>
      </body>

  • 단 한번만 평가됨

      <body>
        <script type="module">
          import './hello.js'; // Hello, World 출력
        </script>
        <script type="moudle">
          import './hello.js'; // 한 번만 평가되기 때문에 출력되지 않음
        </script>
      </body>

  • 지연이 됨(defer를 적용한 것과 같다.)

      <body>
        <script type="module">
          console.log(text); // DOM 생성이 안된 상태, 아직 text가 정의되지 않음
        </script>
        <script type="moudle"> 
          console.log(text); // text 출력됨
        </script>
          <p id="text">Hello, World</p>
      </body>

유니코드

CCS (Coded Caracter Set)

• 문자들을 Code Point(정의해둔 정수값)에 대응시켜 만든 코드화된 문자들의 집합 ⇒ Code Point가 Character의 식별자 역할을 함

CES (Caracter Encoding Scheme)

• CCS를 8bit 집합에 대응시키는 것
• CES와 CCS는 1:1로 대응됨
• 인코딩에 해당됨(UTF-8, euc-kr 등)

TES (Tranfer Encoding Syntax)

• 인코딩된 문자가 특정 프로토콜을 타고 전송되도록 변환하는 것 ⇒ 통신 프로토콜에 제약이 있을 수 있어 사용함(ex. URL에서 공백은 사용할 수 없어 변환이 필요함)

유니코드

• 전 세계 문자(이모티콘 포함)를 컴퓨터로 다룰 수 있도록 만든 표준 시스템
• 다양한 나라가 서로 다른 인코딩 방식을 사용해서 호환성 및 확장성 문제를 해결하기 위해 탄생함
• 유니코드에서 영어, 한글 모두 2바이트로 읽힘 ⇒ 한글은 한 글자당 길이 1을 차지함
• 유니코드의 CCS: Code Point 범위(0x0 ~ 0x10FFFF, 1114112개 문자)
• 유니코드의 CES: Code Point가 어떤 단위로 조합되어 인코딩되는 지 정의한 것

정규표현식

• 정규표현식의 목적: 패턴을 이용하여 문자열에서 원하는 문자를 검색, 대체, 추출이 가능하다.

• 성능은 느리지만 매우 편해서 짧은 문자열의 경우엔 많이 사용한다.

• 정규표현식 테스트 페이지

  Rubular

정규표현식 표현

/regexr/i ⇒ /: 시작, 종료 기호, regexr: 패턴, i: 플래그

예시1

1. 휴대폰 번호 패턴 ⇒ 세 자리 숫자 + 하이픈, 셋 또는 네 자리 숫자 + 하이픈, 네 자리 숫자 패턴으로 이루어져 있음
2. \d{3} = 세 자리 아무 숫자 \d{3, 4} = 세, 네 자리 아무 숫자 위의 패턴을 조합
3. \d{3}-\d{3, 4}-\d{4}

예시2

1. 이메일 주소 패턴 ⇒ 문자열, @, 문자열, ., 문자열 패턴으로 이루어져 있음
2. .+ = 한개 이상의 문자열 (…) = 캡처(그룹으로 묶어주기 때문에 중복 사용이 가능) 이메일 패턴 = .+@.+..+
3. 중간 문자열만 추출하려면? 패턴 = .+@(.+)..+ ⇒ 캡처를 사용하자

정규표현식 연습 페이지

RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs

Regex Golf

JS에서 정규표현식 사용하기

• JS는 RegExp 객체로 정규표현식 기능을 제공함 (Array, Object 처럼 Literal로 생성 가능함)

    // 생성자 함수 방식
    const regExp1 = new RegExp("^\d+");
    const regExp2 = new RegExp("^\d+", "gi");
  
    // 리터럴 방식
    const regExp3 = /^\d+/;
    const regExp4 = /^\d+/gi;

정규표현식 객체 함수

• test 함수: 입력받은 문자열에 찾는 패턴이 있는지 찾은 후 있다면 true 반환

    const msg1 = "안녕하세요 제 전화번호는 010-8741-4496입니다.";
    const msg2 = "아직 전화번호가 없어요..."
  
    const regExp1 = /\d{3}-\d{3,4}-\d{4}/;
    const regExp2 = new RegExp("\\d{3}-\\d{3,4}-\\d{4}");
  
    console.log(regExp1.test(msg1)); // true
    console.log(regExp1.test(msg2)); // false
  
    console.log(regExp2.test(msg1)); // true
    console.log(regExp2.test(msg2)); // false

• exec: 입력받은 문자열에 찾는 패턴이 있는지 찾은 후 일치한 패턴 정보를 반환하고 없으면 null을 반환(문자 추출)

    const msg1 = "안녕하세요 제 전화번호는 010-8741-4496입니다.";
    const msg2 = "아직 전화번호가 없어요..."
  
    const regExp1 = /\d{3}-\d{3,4}-\d{4}/;
    const regExp2 = new RegExp("\\d{3}-\\d{3,4}-\\d{4}");
  
    console.log(regExp1.exec(msg1));
    console.log(regExp1.exec(msg2));
  
    console.log(regExp2.exec(msg1));
    console.log(regExp2.exec(msg2));
  
    // 패턴이 존재하는 경우
    // [
    //   '010-8741-4496',
    //   index: 14,
    //   input: '안녕하세요 제 전화번호는 010-8741-4496입니다.',
    //   groups: undefined
    // ]
  
    // 패턴이 존재하지 않는 경우
    // null 반환

String 객체 함수

• match: String 객체에서 사용할 수 있는 함수로 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후 일치하는 패턴 정보를 반환(정규표현식 객체의 exec 함수와 같음)

    const msg1 = "안녕하세요 제 전화번호는 010-8741-4496입니다.";
    const msg2 = "아직 전화번호가 없어요..."
  
    const regExp1 = /\d{3}-\d{3,4}-\d{4}/;
    const regExp2 = new RegExp("\\d{3}-\\d{3,4}-\\d{4}");
  
    console.log(msg1.match(regExp2));
    console.log(msg2.match(regExp1));
    // 출력결과는 exec 함수와 동일

  • 캡처가 적용된 정규표현식을 이용하면 match 반환값의 1번 인덱스부터 순차적으로 캡처 결과가 들어간다.

      const msg2 = "010-1234-5677말고 010-2222-2222로 전환주세요."
    
      const regExp1 = /(\d{3})-(\d{3,4})-(\d{4})/; 
    
      console.log(msg2.match(regExp1));
      // [
      //   '010-1234-5677',
      //   '010',
      //   '1234',
      //   '5677',
      //   index: 0,
      //   input: '010-1234-5677말고 010-2222-2222로 전환주세요.',
      //   groups: undefined
      // ]

• replace: 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후 일치한 패턴 정보를 원하는 문자열로 바꿈(문자열 대체)

    const msg1 = "안녕하세요 제 전화번호는 010-8741-4496입니다.";
    const msg2 = "010-1234-5677말고 010-2222-2222로 전환주세요."
  
    const regExp1 = /\d{3}-\d{3,4}-\d{4}/g; // 옵션으로 g를 붙이면 패턴에 맞는 모든 문자열이 변경됨
    const regExp2 = new RegExp("\\d{3}-\\d{3,4}-\\d{4}");
  
    console.log(msg1.replace(regExp2, "전화번호")); // 안녕하세요 제 전화번호는 전화번호입니다.
    console.log(msg2.replace(regExp2, "전화번호")); // 전화번호말고 010-2222-2222로 전환주세요.
    console.log(msg2.replace(regExp1, "전화번호")); // 전화번호말고 전화번호로 전환주세요.

• search: 정규표현식 객체를 파라미터로 받아 패턴이 있는지 확인 후, 일치한 패턴 정보의 위치를 반환(문자 검색)

    const msg1 = "안녕하세요 제 전화번호는 010-8741-4496입니다.";
    const msg2 = "010-1234-5677말고 010-2222-2222로 전환주세요."
  
    const regExp1 = /\d{3}-\d{3,4}-\d{4}/g; // 옵션으로 g를 붙이면 패턴에 맞는 모든 문자열이 변경됨
    const regExp2 = new RegExp("\\d{3}-\\d{3,4}-\\d{4}");
  
    console.log(msg1.search(regExp2)); // 14
    console.log(msg2.search(regExp1)); // 0, 옵션에 상관 없이 처음 매칭된 값을 반환함

• 개미 수열

  • 수학적인 수열 중 하나로, 이전 항에서 반복되는 숫자들의 개수를 나타내는 수열

  • 개미 수열의 시작은 항상 1 이고 다음 항부터는 이전 항에서 반복되는 숫자들의 개수를 순서대로 기록함, 각 숫자의 개수는 해당 숫자를 연속해서 나타내는 횟수를 의미

    • 예시
    1. 1 ⇒ 시작은 1
    2. 11 ⇒ 첫 번째 항의 수 1은, 1개의 1
    3. 21 ⇒ 두 번째 항의 수 11은, 2개의 1
    4. 1211 ⇒ 세 번째 항의 수 21은, 1개의 2, 1개의 1
    5. 111221 ⇒ 네 번째 항의 수 1211은, 2개의 1, 1개의 2, 1개의 1

  • 정규표현식으로 풀어보기

      function getAntSeq(n) {
        let seq = '1';
    
        for (let i = 1; i < n; i++) {
          // \1*은 캡처된 문자와 동일한 문자들의 반복을 의미
          seq = seq.replace(/(.)\1*/g, match => match.length + match[0]);
        }
    
        return seq;
      }
    
      console.log(getAntSeq(5)); // 출력: 111221

쿠키와 세션, 웹 스토리지

HTTP 통신

• HTTP Request는 기본적으로 상태가 존재하지 않음
• 서버는 어떤 브라우저에서 요청이 온 것인지 알 수 없는데 이를 해결하기위해 헤더에 쿠키를 담아서 요청하면 서버가 어디서 요청이 온 것인지 알 수 있음

Cookie(쿠키)

• 클라이언트에서 저장, 관리하는 데이터로 브라우저를 닫아도 데이터 유지가 가능함
• 서버가 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 받아서 저장
• 클라리언트에서 자체적으로 조작 가능
• 각 상태에 수명 설정 가능

Set-Cookie

• 키와 값, 옵션을 가지고 있음
• 응답 헤더에 담으면 브라우저가 알아서 저장
• 옵션
  • Expires: 쿠키 만료 날짜 지정
  • Secure: HTTPS에서만 쿠기 전송
  • HttpOnly: JS에서 쿠키 접근을 막음 ⇒ XSS 공격을 막을 수 있음
  • Max-Age: 쿠키 수명을 설정(Expires 설정은 무시됨)
  • Domain: 도메인이 일치하는 요청만 쿠키를 전송
  • Path: 패스와 일치하는 요청만 쿠기를 전송

쿠키의 취약점

• XSS(Cross-Site Script, JS를 사용해 다른 사용자의 쿠키 값을 탈취하는 것)공격을 당할 수 있음
  • HttpOnly로 막을 수 있지만 최근 SPA로 웹페이지를 제작하기 때문에 사용이 어려움
  • 쿠키를 암호화하지 않고 보낼 경우 쿠키값을 중간에 탈취 당할 수 있음 ⇒ HTTPS를 이용하여 해결함

Session(세션)

• 쿠기에 HTTP Session ID를 식별자로 담아 보내면 해당 식별자로 서버는 사용자를 구분한
• 클라리언트는 HTTP Session ID를 쿠키 형태로 저장
• 서버 자체적으로 기록하고 관리

세션의 문제점

• 세션은 서버에 파일로 저장되기 때문에 사용자가 많은 경우 저장 공간에 한계가 생긴다
• 서버가 2대일 경우 세션 관리가 어려움

⇒ 이러한 문제를 해결하기위해 서버와 클라이언트 간의 인증은 JWT같은 별도 토큰을 이용하고 쿠키관리 는 클라이언트 자체적으로 지속적인 데이터 관리 용도로 많이 사용함

웹 스토리지

• 클라이언트에 데이터를 저장하기 위해 쿠키 대신 등장한 새로운 방법
• HTML5부터 등장
• 쿠키에서 하기 힘든 것들을 지원함
• 로컬 스토리지와 세션 스토리지가 있음
  • 로컬 스토리지
    • 로컬 스토리지에 저장된 데이터는 반영구적으로 데이터가 저장됨
    • 브라우저를 종료해도 데이터가 남음
    • 저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없음
    • Key와 Value 형태로 저장
  • 세션 스토리지
    • 새 창을 생성할 때마다 개별적으로 저장되는 데이터
    • 브라우저를 닫는 순간 사라짐
    • 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없음
    • Key와 Value 형태로 저장

Indexed DB

• Transactional한 로컬 데이터베이스로 새로운 웹 브라우저 표준 인터페이스
• 브라우저에서 데이터를 영구적으로 저장하고 검색하기 위한 웹 스토리지 기술 ⇒ 클라이언트 측에 대량의 구조화된 데이터를 저장할 수 있는 고급 웹 스토리지 솔루션
• RDB와 유사한 개념을 가지고 있으며 Key와 Value 형태로 저장
• JS API를 통해 사용되며 웹 애플리케이션에서 데이터를 영구적으로 저장하고 쿼리가 가능
• 객체 스토어(Object Store)라는 개념을 사용하여 데이터를 저장, 객체 스토어는 테이블과 비슷한 개념으로 이해으로 각 객체 스토어에는 Key-Value 쌍이 저장
• 데이터 검색을 위한 인덱스를 지원
• 비동기 작업이 가능

프론트엔드 개발자의 핵심 역량

• 커뮤니케이션: 프론트엔드 개발자는 다른 직군과 협업을 위한 소통 능력이 상당히 중요하다.
• UI
• 네트워크
• 보안
• 브라우저
• 디자인

프론트엔드 개발자가 주의할 점

• 컴퓨터 과학 파트를 무시하는 것: 알고리즘, 설계 패턴, 메모리와 같은 부분은 어떤 개발자도 꼭 필요함
• CSS를 안하는 것: CSS를 대충 공부하는 것
• 코더가 되는 것: 오로지 프레임워크나 라이브러리의 기능을 가져다 쓰기만 하는 것(복잡한 제품을 만들 수 없게 된다.)

변수

var

• 변수를 선언하기도 전에 값 할당이 가능하다. (var hoisting: 선언의 위치와 상관 없이 제일 위로 선언을 끌어올림) hoisting: 인터프리터가 코드를 로드할때 변수의 선언을 항상 코드 내의 최상위로 끌어올리는 것을 의미함. 선언과 동시에 대입하는 코드는 호이스팅하지 않는다.(선언부는 호이스팅하지만 대입부는 호이스팅하지 않는다.)

• 중복 선언이 가능하다.

    var name = 'Hong';
    console.log(name); //Hong
  
    var name = 'GunWoo';
    console.log(name); //GunWoo

• 함수 레벨 스코프를 가진다.

    function func() {
        if (true) {
            var a = 5;
            console.log(a); //5
        }
        console.log(a); //5
    }
  
    func()
    console.log(a); //Uncaught ReferenceError: a is not defined

let

• 호이스팅이 발생하지만 JS내부에서 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행 → 변수 선언 전에 값 할당이 불가능하다.(변수 선언문을 만나기 전까지는 변수 값을 참조할 수 없다.)

• 중복 선언이 불가능하다.

• 블록 레벨 스코프를 가진다.

    function func() {
        if (true) {
            let a = 5;
            console.log(a); // 5
        }
        console.log(a); //Uncaught ReferenceError: a is not defined
    }
  
    func();
    console.log(a); //Uncaught ReferenceError: a is not defined

var과 let의 블록 스코프 차이

{
    var a = 3;
    console.log(a); //3
}

console.log(a); //3

{
    let a = 3;
    console.log(a); //3
}

console.log(a); //Uncaught ReferenceError: a is not defined

var과 let의 차이점

• var은 변수를 선언하기도 전에 값 할당이 가능하다. (var hoisting: 선언의 위치와 상관 없이 제일 위로 선언을 끌어올림)
• var은 block scope가 없다.

scope란 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있는 것을 말한다.

상수

• security (보안성이 좋다.)
• thread safety (쓰레드들에서 동시에 값 변경이 불가능하다)
• reduce human mistake (실수를 막을 수 있다.)
• const문으로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체이거나 배열일 경우에는 프로퍼티 또는 프로퍼티 값을 수정할 수 있다.

자료형

• Number
  • 정수, 실수 등 수를 의미함
  • NaN, Infinity도 Number타입이다
• String: 문자열을 의미
• Boolean: true, false
• Object: 여러 값을 키-값 형태로 결합시킨 복합 타입
• Array: 연관된 데이터를 연속적인 형태로 저장하는 복합 타입
• Function
• Undefined
  • 변수, 상수가 선언되었지만 값이 대입되지 않은 경우
  • 값이 정의되지 않은 상태를 의미
• Null
  • null을 직접 지정한 경우
  • 해당 변수가 비어있음을 사용자가 의도적으로 나타낼 때 사용

false로 판정되는 값들: false, undefined, null, 0, NaN, ‘’(빈 문자열)

메모리

• 할당 → 사용 → 해제 3가지 과정을 거침

• JS 엔진은 Garbage Collector를 통해 메모리를 정리한다.

• Gabage Collector

  • Gabage Collection이라는 자동 메모리 관리 알고리즘을 통해 만들어진 객체

  • 사용하지 않는 메모리를 해제하는 역할을 한다.

    • Mark and Sweep Algorithm을 사용

      • 닿을 수 없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘

      • 예시

        let a = 126
          let b = a
          a = a + 1
          b = a + 1
          // 위의 경우 126을 참조하는 변수가 없기 때문에 GC가 126이 할당된 메모리를 정리한다.

• JS에서 원시타입은 변경이 불가능하다. → 원시 타입의 값이 변경될 때는 새로운 메모리가 할당된다.

    let variable = 126 // 주소: 111
    let variable2 = variable //variable2는 variable의 주소를 가리키고 있는 상태(주소: 111)
    variable = variable + 1 // 주소:111의 값이 변경되지 않고 variable은 주소: 112를 가리킴(값은 127)

• JS의Virtual Machine(가상 머신)의 메모리 모델

  • Heap: 참조타입이 들어감, 동적으로 크기 변경이 가능함

  • Call Stack: 원시타입이 들어감

  • 예시

      let a = 10; // call stack
      let b = 20; // call stack
      const arr = []; // Heap (call stack에서 생성된 배열 변수 arr이 Heap의 배열 영역을 메모리 주소를 참조)
      arr.push(5); // Heap 메모리를 변경하는 것이기 때문에 상수여도 push가 동작함
      arr.push(3);
      arr.push(1);

배열과 객체

배열

배열 생성

const arr1 = new Array();
const arr2 = [];
const arr3 = [1, 2, 3, 4, 5];
const arr4 = new Array(5);
const arr5 = new Array(5).fill(5); // [5, 5, 5, 5, 5]
const arr6 = Array.from(Array(5), function(v, idx) {
  return idx + 1;
}) // [1, 2, 3, 4, 5]

배열 요소 추가, 삭제

const arr = [1, 2, 3];
// push 배열 끝에 새로운 요소 추가
arr.push(4); // [1, 2, 3, 4]

// pop 배열 끝의 요소 삭제
arr.pop(); // [1, 2, 3]

// shift 배열 맨 앞의 요소 삭제
arr.shift(); // [2, 3]

// unshift 배열 맨 앞에 요소 추가
arr.unshift(1); // [1, 2, 3]

배열 관련 함수

const joinArr = [1, 2, 3, 4, 5, 6];
// join
console.log(joinArr.join(", ")); // 1, 2, 3, 4, 5, 6

// reverse
console.log(joinArr.reverse()); // [ 6, 5, 4, 3, 2, 1 ]
console.log(joinArr); // [ 6, 5, 4, 3, 2, 1 ] => 원본 배열에도 영향을 준다.

// concat
const a = [1, 2, 3];
const b = [4, 5, 6];
console.log(a.concat(b)); // [ 1, 2, 3, 4, 5, 6 ]

// slice
const arr = [1, 2, 3, 4, 5, 6];
// 첫 번째 인자: 시작점, 두 번째 인자: 끝나는 점
console.log(arr.slice(2, 4)); // [ 3, 4 ]
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] => 원본 배열이 변하지 않음

// splice: 중간의 요소 삭제
arr.splice(2, 2); // 첫 번째 인자: 시작점, 두 번째 인자: 삭제할 개수
console.log(arr); // [ 1, 2, 5, 6 ]

배열 순회

for (let i = 0; i < 5; i += 1) {
  console.log(arr[i]);
}

// 추천하는 방식
for (const item of arr) {
  console.log(item);
}

배열을 객체처럼 사용한다?

const arr = [1, 2, 3, 4, 5];
console.log(typeof arr); //object 출력 => 배열은 객체 타입이다.
arr['key'] = 'value';
console.log(arr); // [ 1, 2, 3, 4, 5, key: 'value' ]
console.log(arr.length); // 5 => key가 추가되었지만 배열의 길이는 변하지 않는다.

객체

여러 값을 키-값 형태로 결합시킨 복합 타입

객체 생성

const obj1 = new Object();
const obj2 = {};
const obj3 = {name: 'Gun', company: 'dev'};

객체 요소 추가, 삭제

const obj = {};
obj["email"] = "foxrain.gg@gmail.com"; // 요소 추가 방법1
obj.phone = '01012345678'; // 요소 추가 방법2
console.log(obj); // { email: 'foxrain.gg@gmail.com', phone: '01012345678' }

delete obj.phone;
console.log(obj); // { email: 'foxrain.gg@gmail.com' }

// 객체 요소 유무 확인 방법
console.log('email' in obj); // true
console.log('phone' in obj); // false

객체의 키, 값의 집합 구하기

const obj = {
  email: "foxrain.gg@gmail.com",
  phone: "01012345678",
};

// 키의 집합
console.log(Object.keys(obj)); // [ 'email', 'phone' ]
// 값의 집합
console.log(Object.values(obj)); // [ 'foxrain.gg@gmail.com', '01012345678' ]

객체 순회

const obj = {
  email: "foxrain.gg@gmail.com",
  phone: "01012345678",
};

// for in은 객체의 키 값을 순회함
for (const key in obj) {
  console.log(key, obj[key]);
    // 1번째 실행: email foxrain.gg@gmail.com
    // 2번째 실행: phone 01012345678
}

스코프와 클로저

스코프(유효 범위)

변수가 어느 범위까지 참조되는 지를 뜻함

const a = 5; // Global Scope
{
    const b = 3; // Local Scope
    console.log(a, b); // 5 3
}
console.log(a, b); // Error

클로저

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법

function makeGreeting(name) {
  const greeting = "Hello, ";

  return function() {
    console.log(greeting + name);
  };
}

const world = makeGreeting("World!");
const gunwoo = makeGreeting("GunWoo");

world();
gunwoo();

• greeting 변수는 지역 스코프라서 함수가 종료되면 메모리에서 사라지지만 word(), gunwoo()에서 사용할 수 있다.

은닉화

클로저를 사용하여 내부 변수와 함수를 숨길 수 있다.

function Counter() {
  let privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    getValue: function() {
      return privateCounter;
    },
  }
}

const counter = Counter();
const counter2 = Counter();

console.log(counter.getValue()); // 0
counter.increment();
counter.increment();
console.log(counter.getValue()); // 2
counter.decrement();
console.log(counter.getValue()); // 1

console.log(counter2.getValue()); // 0 => 별개의 클로저

클로저 관련 오류

function counting() {
  let i = 0;
  for (i = 0; i < 5; i += 1) {
    setTimeout(function () {
      console.log(i);
    }, i * 100);
  }
}

counting(); // 5가 다섯번 출력됨
// setTimeout의 대기시간이 끝나 callback fuction이 실행되는 시점에는 루프가 종료되어
// i가 5인 상태이기 때문이다.

해결방법 1

IIFE(Immediately Invoked Function Expression, 즉시 실행 함수)를 사용한다.

function counting() {
  let i = 0;
  for (i = 0; i < 5; i += 1) {
    (function (number) {
      setTimeout(function () {
        console.log(number);
      }, number * 100);
    })(i);
  }
}

counting(); //0 1 2 3 4 출력

해결방법 2

let을 사용한다. ⇒ let은 블록 수준 스코프이기 때문에 매 루프마다 클로저가 생성된다.

function counting() {
  for (let i = 0; i < 5; i += 1) {
    setTimeout(function () {
      console.log(i);
    }, i * 100);
  }
}

counting(); //0 1 2 3 4 출력

PWA

PWA는 프로그레시브 웹 앱(progressive web app)의 준말로, 웹 기술(HTML, CSS, Javascript)을 가지고 모바일 네이티브 앱과 비슷하게 만들 수 있는 기술을 말한다.(Apple은 PWA를 웹 응용 프로그램이라고 부르기도한다.) 모바일 웹 사이트와 네이티브 앱의 중간 형태로, 모바일 앱과 웹 사이트의 장점을 결합하여 사용자 친화적인 앱 경험을 제공할 수 있다고 한다.

즉 PWA은 HTML, CSS, JavaScript를 포함한 일반적인 웹 기술을 사용하여 개발된 응용 프로그램 소프트웨어이며 표준적인 웹 브라우저를 포함한 모든 플랫폼에서 작동한다.

사용자의 관점에서 PWA는 App Store나 Play store에서 다운로드하지 않고도 장치의 홈 화면에 추가할 수 있는 웹 사이트에 비유할 수 있다.

사실 iOS는 PWA의 아이디어를 지원하는 최초의 플랫폼이었다. iPhone이 처음 소개되었을 때 App Store가 아직 존재하지 않았고 초기 앱은 HTML5를 사용하여 제작되었다. 하지만 App Store가 도입된 후 PWA에 대한 Apple의 지원이 줄어들기 시작했고 최근에서야 다시 PWA에 대한 지원이 추가된 것이다.

장점

• 빠른 성능을 제공한다.
• 앱 스토어를 거치지 않아도 웹 브라우저에서 바로 앱을 사용할 수 있다.
• 앱 스토어를 거치지 않아도 앱 업데이트가 자동으로 이루어진다.
• 오프라인에서도 작동이 가능하다.
• 검색 엔진 최적화(SEO)에 유리하다.
• 모바일 앱과 웹의 장점을 모두 활용할 수 있다.

단점

• 아직 모든 기능이 네이티브 앱과 같지는 않다. OS에서 지원하지 않는 경우 하드웨어 접근이나 네이티브 기능에 대한 제한이 있을 수 있다. 따라서 사용자 경험이 모든 디바이스에서 동일하지 않을 수 있다.
• 브라우저에서 실행되기 때문에 네이티브 앱에 비해서 지연 속도가 크고 배터리 소모량이 더 많을 수 있다.

PWA 도입 사례

출처: https://noogoonaa.tistory.com/108

출처: https://www.joinc.co.kr/w/man/12/pwa

Pinterest : 전체 모바일 사이트를 PWA로 재구성했다. 핵심 참여자가 60% 증가했으며, 사용자 광고수익도 44% 증가했다. Tinder : 로딩시간을 11.91초에서 4.69초로 줄였다. PWA는 안드로이드앱보다 90% 작은 크기를 유지한다. Uber : 2G에서도 빠르게 작동하도록 설계했다. 기본앱은 50k이며, 2G 네트워크에서도 3초이내에 로드 할 수 있다.

PWA의 미래

PWA는 현재 구글과 함께 마이크로소프트, 모질라 등 많은 기업들이 참여하고 있다. 구글은 PWA기술을 통해 크롬 OS를 성장시키고 발전 시킬 가능성이 있으며, 마이크로소프트는 부진했던 모바일 시장에 진입할 수 있는 통로가 될 수 있기 때문이다.

출처: https://www.donga.com/news/Economy/article/all/20220705/114307914/1 [구글 “카톡, 인앱결제 위반” 업데이트 거부… “소비자 볼모 기싸움”]

또한 요즘 많은 기업들이 App store, Play store의 인앱결제 수수료에 불만을 가지고 있어 법적 싸움까지 가는 경우가 많아지고 있다. PWA는 앱 스토어를 거치지 않고 사용자에게 바로 브라우저를 통해 앱을 제공할 수 있기 때문에 인앱결제 수수료에 대해 고민하고 있는 많은 기업들의 대안이 될 수 있다. 물론 OS에서 지원해주지 않는 이상 PWA는 힘을 쓸 수 없지만 기업과 사용자의 지속적인 요구에 PWA에 대한 OS의 지원은 지속적으로 이루어질 것이라 예상되고 PWA의 미래는 밝다고 개인적으로 생각한다.