Daniel-Q.log

Next.js 를 왜 공부해야하니?

Mon, 25 Dec 2023 12:45:40 GMT

목차

1. Next.js란 무엇인가?

2. Next.js가 제공하는 주 기능

3. Next.js를 통해 작업할 프로젝트

1. Next.js란 무엇인가?

1-1. 정의 : React로 만들어진 서버 사이드 렌더링(SSR) 프레임 워크

왜 서버 사이드 렌더링이 중요할까?
1-2. SSR이란 : 서버측에서 브라우저에서 사용될 화면(view)를 제공해주는 것
기존의 CSR의 경우, 서버에서 받은 데이터를 토대로 브라우저가 화면(view)을 제공함
즉, 서버에서는 빈 html을 제공하고, 브라우저는 그에 대한 내용을 렌더링 해야하기에, 로딩 속도가 느려질 수 밖에 없음
또한 별도의 SEO(검색엔진 최적화)작업이 필요함 => 포털 사이트에서 웹사이트에 대한 데이터를 제대로 수집하는데 한계가 있다는 것을 의미
이를 해결하기 위해, SSR을 이용 => 서버가 자바스크립트까지 완성된 html문서파일을 제공하여 로딩 속도가 향상 + 검색엔진최적화 가능
이게 Next.js의 유일한 장점인가?

1-3. 풀스택 기반의 프레임 워크

Next.js는 API 기능과 서버 컴퍼넌트를 통한 서버측 기능 + React 컴퍼넌트를 사용한 클라이언트 기능을 동시에 수행가능
덕분에, 프론트 엔드에서도 백엔드의 역할을 수행할 수 있다는 장점이 있음

2. Next.js가 제공하는 특이점

2-1. pre-rendering

SSR의 최대 장점으로, 미리 데이터가 렌더링된 html 페이지를 가져올 수 있으므로, UX개선에 큰 기여를 하며, 정적 사이트 생성(SSG)도 가능해진다.

2-2. dynamic route ([])

[]문법을 사용하여, 동적인 url 작성이 가능
pages/[값].tsx 면 {router.query.값}으로 편하게 사용가능

2-3. code spliting(코드 분할)

페이지를 렌더링 할 때, 방대한 javascript paylod(전송 데이터)를 보내는 것이 아닌 dynamic import을 통해 필요한 부분만 import하여 자바스크립트 로딩 시간이 개선됨

3. Next.js를 통해 작업할 프로젝트

프로젝트 명 : 고민을 먹는 고래
프로젝트 정의: 각자의 고민들을 작성하면, 이를 깔끔하게 지워주는 효과를 구현하여 잠시나마 고민을 잊게 만들어주는 페이지

참고 문헌 1.youngDev 블로그 : https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80 2. kyounghwan01 블로그 : https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80![](https://velog.velcdn.com/images/dainel-q/post/7a07a7cb-43bd-4e25-9033-54922610733e/image.png)

Project_Touched_Remaster

Sun, 17 Dec 2023 12:40:33 GMT

목차

1. 프로젝트 기획의도

2. 프로젝트에 사용된 기술스펙

3. 프로젝트 구성

3-1. Common 폴더

Common/Button
Common/Footer
Common/GuideSection
Common/Header
Common/Modal
Common/Wrapper
3-2. Pages 폴더
Pages/FirstPage
Pages/BackgroundPage
Pages/InfoPage
Pages/WritingPage
Pages/ImagePage
Pages/BgmPage
Pages/CheckPage
Pages/TestPage
4. 프로젝트 후기

1. 프로젝트 기획의도

2023년 작업했던 편지작성 페이지인 'Project_Touched'를 Remaster함 Project_Touched 시연 링크 : https://seunggyu-jung.github.io/Project-Touched-Sample/
기존 프로젝트의 경우, 편지의 내용을 직접 코드로 작성해야 작성이 가능
홈페이지 내에서 직접 편지를 작성할 수 있는 SPA 프로젝트로 Remaster를 진행

2. 프로젝트에 사용된 기술스펙

1. 언어 : TypeScript

현재 프론트 엔드 실무에 있어 객체 지향의 장점과 협업을 효율을 향상시켜주는 TypeScript를 주 언어로 사용하여 코드의 가독성및 에러를 최소화 시킴
2. 라이브러리 : React
다양한 라이브러리를 사용하여 보다 페이지를 다체롭게 꾸밀 수 있은 React를 사용
3. 상태관리 : Recoil
React과의 호환성이 좋고 Redux보다 훨씬 가볍고 실용적인 Recoil을 사용하여 전역 상태 관리를 진행함

3. 프로젝트 구조

본 프로젝트는 크게 FirstPage, BackgroundPage, InfoPage, WritingPage, ImagePage, BgmPage, CheckPage, TestPage로 총 8개의 페이지로 구성되어있는 Pages 폴더와 버튼, 헤더, 풋터, 모달, 레이아웃 등 공통적으로 사용할 수 있는 Common 폴더로 구성되어있다.

3-1. Common/Button

편지를 작성하는 순서가 정해져있으며, 순서 이전과 이후로 넘어갈 수 있게 해주는 버튼을 구현
해당 버튼은 작성 페이지들(5개)에서 사용하기에 공용 컴퍼넌트로 제작
몇몇 페이지는 편지를 작성할때 반드시 작성해야 하는 내용(기본정보, 편지내용)들을 넘기는 일이 없도록 제약을 거는 함수가 구현되어 있음
따라서 다음으로 넘어가는 버튼의 경우, 전달값이 함수인지 아닌지를 판별하는 로직을 구현 사진과 같이 필수 조건을 충족하지 못하면 팝업 경고창이 나오고 다음 단계로 넘어가지 못하게 제한함

3-2. Common/Footer

프로젝트에 대한 인적사항이나 개발자에 대한 정보를 더 알아볼 수 있는 풋터 구현
페이지의 height값이 낮은 경우, height값에 맞게 올라오지 않고 항상 하단에 고정 할 수 있도록 공용 레이아웃에 min-height와 padding-bottom으로 값을 조정하고 풋터에 position: relative와 translateY(-100%)을 넣음 공용 레이아웃에 min-height와 padding-bottom으로 값을 조정 풋터에 position: relative와 translateY(-100%)을 넣음 height 공간이 남아도 항상 하단에 고정

3-3. Common/GuideSection

편지 작성 방법을 안내해주는 section은 작성 페이지에 공통적으로 들어가기에 구현
페이지 명과 가이드 내용을 props로 전달받는 구조로 사용하여 코드의 재사용성을 높임
만약 가이드에 설명 내용이 한 줄로 짧은 경우는 어떻게 해야하는가?
2단계부터 인터페이스에 null 값도 포함하여 불필요한 곳에 null을 전달시켜 해결 가이드가 긴 경우에는 상관없지만 이렇게 짧은 경우 문제가 발생한다. 2단계부터 인터페이스에 null 값도 포함

3-4 . Common/Header

작성 페이지가 어떤 페이지인지 명시해주며, 각 페이지를 이동할 수 있도록 리모컨 역할을 하는 버튼을 갖는 헤더 구현
PC 버전의 경우, height값이 충분히 크기 때문에 fixed된 헤더가 불필요하다 느껴 값을 고정
모바일 버전의 경우, heigth값이 기종마다 다르기에, max-width: 500px로 고정하여 스크롤을 따라다니는 헤더를 구현 PC버전 모바일 버전

클릭하면 동적으로 변하는 햄버거 버튼 스타일링 구현
@keyframes를 통해, 자연스럽게 내려오는 ul,li태그 구현
슬라이더의 경우, props를 styled에서 선언하여 tsx로 전달될 수 있도록 구현
ease forwards를 통해 @keyframe에서 변경된 값을 유지하도록 구현

3-5. Common/Modal

웹에서 제공하는 alert를 사용하는 것이 단조롭고, 다양한 기능을 넣을 수 없다고 판단하여 별도의 alert역할을 하는 modal창 구현
dom트리에 직접적으로 접근하여 modal창이 열렸을때, 키보드나 마우스의 스크롤을 이동시킬 수 없도록 구현
모달창이 아닌 곳을 클릭하거나, useEffect를 사용하여 esc키를 눌러 모달창을 끌 수 있도록 구현

3-6. Common/Wrapper

편지 작성을 담당하는 모든 페이지의 레이아웃을 공용 컴퍼넌트로 제작
props로 children을 전달하고 각 페이지에 필요한 태그들을 담는 로직으로 작동

3-7. Pages/FirstPage

사용자가 가장 먼저 접하는 페이지
react-responsive-carousel라이브러리를 사용하여 반응형에 적합한 Carousel로 여타 홈페이지의 WelcomePage와 유사한 UI를 구현함 출처 : https://programmers.co.kr/
Carousel에서 사용한 속성 : showArrows={false} : Carousel 양 옆의 화살표 제거 showStatus={false} : Carousel 상단의 이미지의 번호 제거 autoPlay={true} : 자동으로 이미지들을 순환 infiniteLoop={true} : 순환을 무한히 진행 interval={3000} : 이미지 전환 주기를 3초로 실행 showThumbs={false} : 이미지 미리보기를 보여주지 않음 showIndicators={false} : 이미지 전환을 할 수 있는 리모컨을 숨김 stopOnHover={false} : 호버시 이미지 전환이 멈추는 것을 제거 selectedItem={currentIndex} : currentIndex에 해당하는 화면을 보여줌
이미지를 배열로 전달받아 이를 map을 통해 순환시킴
useState를 이용하여 인덱스의 상태를 관리하고, 해당 인덱스가 곧 Carousel에 보여지는 이미지의 번호

3-8. Pages/BackgroundPage

전송될 편지의 배경화면 색상을 선택하는 페이지
react-colorful라이브러리를 사용하여 색상 팔레트를 사용
2가지 색의 그라데이션으로 구성되어있으며, 원하는 색을 2개 선택하여 조합하는 방식
색상을 선택하면, 기존의 2가지 색 중, 가장 먼저 선택한 색부터 사라지는 방식
색들은 배열 형태로 되어있기에, 이를 반전시킬 수 있는 기능도 구현
이렇게 선택된 색상들은 배열 형태로 Recoil 파일에 저장
배경색은 welcomePage를 제외한 나머지 페이지에 globalStyle의 Before가상요소로 적용

3-9. Pages/InfoPage

발신자와 수신자의 이름을 작성하는 페이지
input태그에 정보를 입력하여 전달하기에 form태그를 사용
프로젝트에서 반드시 필요한 정보이기에 input태그에 p태그를 absolute로 강조
내용을 입력하면 p태그가 민트색의 체크표시로 변경
조건을 충족하지 않을 경우, 그 조건을 충족시키라는 팝업창이 나타나도록 구현
내용을 작성하지 않아도, 헤더의 리모컨 버튼을 통해 다른 페이지로 넘어갈 수 있게 구현하여 사용에 대한 불쾌감 제거
두 p태그의 로직은 같지만, 각자 참조하는 상태가 다르기 때문에 따로 분리하여 구현

3-10. Pages/WritingPage

편지의 내용을 작성하는 페이지
편지에 담길 텍스트의 폰트, 크기, 편지 section의 배경을 선택할 수 있음
선택로직은 select태그와 option태그로 구현
배경이미지는 내장된 이미지를 사용(추후에 변경 예정)
선택로직이 구현된 section은 숨기기 버튼을 통해 사용자에게 보다 쾌적한 UI를 제공
편지내용 또한 필요한 요소이기에 필수적으로 작성하도록 설정

3-11. Pages/ImagePage

편지에 장식할 이미지를 업로드 하는 페이지
업로드 전에는 별도의 section이 생기지 않고, 업로드하면 보이는 로직 적용
이미지의 오른쪽 상단에 삭제버튼 구현
'파일 선택'버튼을 클릭하고, 원하는 이미지를 선택하여 업로드 하는 방식
희망하는 경우, 한 번에 여러 사진을 함께 업로드 가능
react-responsive-carousel라이브러리를 사용하여 반응형에 적합한 Carousel을 사용
이미지는 배열 타입이며, Carousel에 담겨 map으로 조회가능

3-12. Pages/BGM_Page

편지를 열자마자 재생될 BGM을 유튜브에서 가져와 업로드하는 페이지
react-youtube라이브러리를 사용하여 유튜브 url에 해당하는 영상을 상영해주는 기능 구현
처음 저복할때는 설정되어있는 url이 따로 존재하지 않음
사용자가 원하는 유튜브 영상의 url을 input태그에 업로드하면 recoil에서 관리가 됨
이는 모바일 사용자도 함께 사용할 수 있도록 정규표현식으로 나누어 처리함
이 페이지가 편지 구성 작업의 마지막 단계라서, 기존에 작성해야했던 필수 정보들의 작성 유무를 recoil을 조회하여 검토해줌(수신자 정보, 발신자 정보, 편지내용)
조건을 만족하면 수신자용 welcomePage로 이동할 수 있게 해주는 팝업창이 나타남

3-13. Pages/CheckPage

수신자가 처음으로 접하게 될 welcomePage
본인이 수신자가 맞는지에 대한 진위 판단 여부를 알아야하기 때문에 CheckPage로 네이밍함
'맞아'버튼을 클릭하면 커스텀된 편지를 확인할 수 있게 해주는 페이지로 전환
'...아닌데?'버튼을 클릭하면 '맞아'버튼과 기능이 같은 '생각해보니 맞는 것 같아'버튼이 있는 페이지로 전환
결국 본인이 수신자가 아닐 경우, 웹페이지를 종료할 것이라 판단하여, 관심이 있다면 편지내용을 볼 수 있도록 설정함

3-14. Pages/TestPage

수신자가 보게 될 커스텀 된 편지를 미리 확인하고, 이상이 없으면 앞의 checkPage url을 복사해주는 페이지
위에서 아래방향으로 자동으로 글씨가 써지는 이미지를 구현 => keyframes를 통해 스크롤 아래 방향으로 천천히 글씨가 써지는 로직
이미지를 추가하고, BGM을 설정하면 보다 풍성하게 커스터마이징 가능
'url 복사'버튼을 클릭하면 자동으로 클립보드에 checkPage의 url이 복사가 되며, 성공완료 팝업창이 나타남
거의 가능성은 없지만, 복사에 에러가 발생하면 console창에 에러를 출력해주는 로직 구현

4. 프로젝트 후기

4-1. 장점

타인에게 감동을 준다는 취지에 걸맞게 다양하게 커스터마이징 할 수 있는 편지 홈페이지를 만들어 홈페이지의 정체성을 잘 살렸다고 판단
반응형 웹페이지로 제작하여, 모바일 버전에서도 쾌적하게 사용할 수 있음
다양한 React 라이브러리를 활용하여, 기존의 메신지 시스템이 구사하지 못하는 기능들을 넣음(그라데이션 배경, 유튜브 자동재생기능...)
TypeScript와 Recoil을 활용하여 어느정도 상업용 웹페이지의 틀을 갖춘 SPA를 개발했다고 판단
공통으로 사용할 수 있는 코드는 최대한 재사용하는 방향으로 작업 => 불필요한 코드가 거의 없는 클린 코딩을 진행

4-2. 아쉬운 점

별도의 서버를 운영하지 않아, Recoil이 로컬에서만 저장이 됨 => 수신자에게 전송을 하면 Recoil에 담긴 내용 없이 default 값으로 전송됨 => 이는 firebase와 같은 백엔드 서포트 어플을 활용하여 개선할 계획
현제 이 페이지의 오류는 지속되는 새로고침과 리렌더링을 진행하면, recoil에 저장된 이미지가 렌더링 되지 않음 => 이미지 데이터는 존재하지만, 렌더링을 하지 못하는 것 => 예상되는 원인 : 임의로 생성한 이미지 url주소가 렌더링 될때마다 변경되기 때문이라 판단 => 이 부분은 주변 지인들과 상의를 해서 해결해봐야 할 듯 하다.

OG(Open Graph)

Fri, 01 Dec 2023 14:39:56 GMT

1. 정의

정식 명칭은 Open Graph Protocol로 Facebook(현 Meta)에서 발표한 인터넷 프로토콜의 한 종류

2. 목적

일종의 미리보기 기능을 구현해 준다. 즉, 단순 URL만 있는 웹페이지 링크에 보다 다양한 정보들을 입력하여 소비자가 웹 페이지를 쉽게 이해하고 접근할 수 있도록 보조하려는 목적이 있다.

3. 효과

마케팅 효과(SEO) 다양한 웹사이트들이 넘치는 소셜 미디어에서 소비자로 하여금 웹페이지에 대한 다양한 정보들을 직관적이고, 단시간에 전달할 수 있으며, 이는 곧 소비자의 이목을 집중시켜 한 번쯤 이용하고 클릭하고 싶도록 하는 마케팅 효과가 있다. 사실 이걸 직접적인 SEO효과라고 언급하기는 어렵지만, 간접적인 도움을 준다고 할 수 있다고 생각한다.

4. 사용 예시

적용 전 :

적용 후 :

육안으도 확인 할 수 있듯이, 후자의 경우, 좀 더 매력적으로 느껴지고, 해당 페이지가 어떤 페이지인지 정보를 전달한다는 점에서 가장 큰 차이가 있다고 할 수 있다.

5. 사용법

index.html 파일의 head태그 안에 meta태그로 작성을 한다. 위 예시에서 적용한 오픈 그래프 태그는 og:title og:description og:image 이렇게 3개를 사용했다. meta태그의 속성 중 property에 원하는 og태그를 선택하여 작성하고, content 속성에 값을 입력하는 방식으로 사용한다.

og:title 웹 페이지의 제목을 입력하는 구간으로, 프로젝트의 명을 작성하면 된다. 기본적으로 글씨가 bold 처리되기에 그대로 사용해도 괜찮다고 생각한다. 그리고 카카오톡으로 사용할 경우, title이 카카오톡 기준으로 2줄이 넘어가면 description이 사라지기에 되도록 한 줄로 간단하게 입력할 것을 권장한다.
og:description 웹 페이지에 대한 구현 설명을 작성하는 태그로 되도록 간단하고 명료하게 작성하는 것이 중요하다. 너무 길어지는 경우, ...으로 생략이 되는데, 이것이 미관상 좋지 않다고 생각한다.
og:image 웹 페이지를 대표하는 이미지를 입력하는 태그로, 앞서 언급한 마케팅 효과의 핵심이라 할 수 있다. 웹 페이지에 업로드 할 경우, 권장되는 이미지 크기는 1200 x 630 pixel 카카오톡에만 업로드 할 경우, 권장되는 이미지 크기는 300 x 200 pixel이다.

6. 참고

1. Open Graph 시연 사이트

https://developers.facebook.com/tools/debug/

본인이 facebook 계정이 있으면, 일일이 새로 commit할 필요 없이 해당 사이트에서 오픈 그래프 작동을 확인할 수 있다.

2. 카카오톡 캐시 초기화 사이트

https://developers.kakao.com/tool/debugger/sharing 카카오톡의 경우, 한 번 업로드한 오픈 그래트 태그의 정보가 캐시에 저장되어, 수정을 해도 변하지 않기 때문에, 해당 사이트에서 삭제를 하고 진행해야한다.

참고 자료 https://ogp.me/

이미지 저장 창고

Fri, 01 Dec 2023 06:46:24 GMT

1. Project_Touched_Remaster

1-1. Open Graph 용 이미지

1-1. 600*315

1-2. 326*305

2. Interview_Summary

2-1. Open Graph 용 이미지

🔑React의 상태관리란 무엇인가?

Mon, 12 Jun 2023 04:57:07 GMT

1. 주제 선정 이유

React라이브러리를 사용하다보면 상태관리가 필수이며 그에 따른 각종 기능들을 숙지하고 있어야한다. 이에 대해 알지 못하면 React를 사용하지 않는 수준이며, 협업을 하는데 있어 큰 지장이 되기에 이번 기회에 상태관리에 대한 정확한 정의를 학습하고, React의 상태관리 방법에는 어떤 것들이 있는지 살펴보도록 하자.

2. 상태관리란

2-1. 상태관리의 정의

상태(State) : 컴퍼넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 자바스크립트 객체를 의미. 즉, 변화하는 데이터라고 이해하면 된다. (ex, 쇼핑몰 사이트에서 구매할 물건의 수량을 늘리고 줄이는 행위를 상태가 변화한다고 한다.)

상태관리 : 상태는 어는 컴퍼넌트에서나 일관되어야 한다. 이를 데이터의 무결성이라 한다. 왜냐하면, 상태가 컴퍼넌트마다 다르다면, 유저나 관리자가 받아들이는 데이터에 차이가 생겨 소통에 차질이 생기기 때문이다. 따라서 상태를 일관되게 관리해야하며, React의 경우, 신뢰할 수 있는 단일 출처(동일한 데이터는 항상 같은 곳에서 가져온다)라는 방법론으로 상태를 관리하고 있다.

2-2. 상태의 종류

지역상태(localState) : 특정 컴퍼넌트 안에서만 관리되는 상태를 의미한다. 이는 주로 작은 프로젝트처럼 좁은 영역에서만 관리되는 데이터들이다.
컴퍼넌트 간 상태: 다수의 컴퍼넌트에서 사용되고 영향을 주는 데이터들을 의미한다. 대표적인 예시로 여러 컴퍼넌트가 동시에 사용하는 모달창 등이 있다. 2개 이상의 컴퍼넌트간에 상태를 주고 받을 경우, 상위 컴퍼넌트에서 하위 컴퍼넌트로만 상태를 전달하며, 이를 Props Driling이라 한다.
전역 상태(globalState) : 프로젝트 전체에 영향을 끼치는 데이터를 의미한다. 대표적인 예로, 모든 컴퍼넌트에서 사용되는 페이지의 헤더 컴퍼넌트 등이 있다.
상태관리가 필요한 이유: 걱 컴퍼넌트가 부모자식 관계로 되어있지 않은 이상 각 컴퍼넌트간의 직접적인 데이터 전달은 어렵우며, 구조가 복잡하여 Props Driling이 많아지면 Props의 출처를 찾기 어려워기 때문에 이를 관리해줘야 한다.

3. React의 상태관리

3-1. Context API

Context API : React 컴포넌트 트리 안에서 전역 상태를 공유할 수 있도록 만들어진 방법이다. 명칭은 API이기는 하지만, 실질적인 관리는 API가 아니라 useState를 통해 이루어진다.
useState() : cosnt [state, setState] = useState()의 형태로 구성되어 있다. 앞에서서부터 state라는 상태변수와 상태에 변화를 주는 setState라는 함수가 있다. useState()의 파라미터에는 초기 state값이 들어가며, 이후 setState를 통해 state의 값에 변화를 주는 방식으로 상태를 관리한다. useState()는 상태를 새로 추가하거나 삭제하는 것이 아니라 단순 비교를 통해 상태를 업데이트 시키는 원리로 작동한다. 즉, 동일한 데이터의 key값이면 키의 value값의 차이를 비교하여 최신의 value값으로 갱신하며 상태를 관리한다. 이는 중간에 있는 요소들에게 props를 넘기지 않고도 데이터를 가져다 사용할 수 있기에 props Drilling을 피할 수 있으며, 주로 전역적으로 쓰이는 데이터들을 사용할 때 자주 사용된다.
useEffect() :
context API의 구조 : context, provider, comsumer 로 구성 context : 전역상태를 저장하는 곳으로 , 내부에는 provider와 consumer로 구성되어있다. provider : 전역상태를 제공하는 역할을 한다. 주로 Root Component(index.js / app.js)에서 정의된다. consumer 제공받은 전역상태를 받아서 사용하는 역할을 한다.

3-2. Redux

Redux : 공식 문서에 따르면 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 정의한다. 이를 풀어 설명하면, 전역 상태를 관리하는 도구, 즉, 어플리케이션 전체에 대한 중앙 저장소 역할을 한다고 생각하면 된다.
'Store','Action', 'Reducer'로 구성되어 있다. Store는 전역상태를 저장하는 저장소 역할을 하며, 오직 Reducer를 통해서만 접근이 가능하다. 주로 index.js에 정의되며 Store는 오직 1개만 존재할 수 있다. Action은 Store에 저장된 상태의 변화를 Reducer에 명령하는 자바스크립트 객체이다. 변화를 주기 위해 dispatch라는 메서드를 사용하여 Reducer에게 전달된다. Reducer는 변화를 감지하여 상태를 변화시키는 역할을 하는 순수함수로서, 전역 상태를 변경하고 업데이트시킨다. 바닐라 자바스크립트의 '이벤트리스너'와 동일한 역할을 한다고 파악해도 좋다. 다만, Redux의 경우, 상태관리를 할 때, 이전상태를 변경시키는 것이 아닌 새로운 상태의 객체를 생성하여 반환한다는 점을 명시해야한다.
순수함수 : 다른 외부의 상태를 변경하지 않으면서도, 어떤 동일한 인자에 대해 항상 동일한 값을 리턴하는 함수이다.

3-3. Recoil 라이브러리

앞서 언급한 Redux는 단방향의 흐름에서 상태관리가 용이하지만, 이를 위한 action, reducer와 같은 초기 세팅이 상당히 번거롭고 React와 잘 맞지 않는다는 여론이 주를 이루었다.
React의 상태관리를 보다 React스럽게(hook을 전역으로 확장시킴) 하기 위해, 메타(전 페이스북)사에서 제작한 React 상태관리 라이브러리이다.
Recoil은 atom과 selector라는 객체를 사용하여 상태를 관리한다.
atom은 구독, 옵저버와 같은 개념을 생각할 필요없이 hook을 사용하듯이 사용하면 된다. hook를 사용했던 개발자라면 쉽게 사용할 수 있다.
selector를 이용하면 리듀서 없이 복잡한 연산도 간단하게 할 수 있다.

라이브러리란 무엇인가?

Sat, 03 Jun 2023 17:54:59 GMT

1. 주제 선정 이유

각종 프로젝트를 준비하는 과정에서 라이브러리의 중요성을 많이 언급되며, 실제 기업에서도 특정 라이브러리를 사용하여 프로젝트를 진행한 경험을 요구하는 경우가 많다고 느꼈을 것이다. 라이브러리가 정확하게 무엇이며 어떤 종류가 있으며, 왜 사용하는지에 대해 자세히 알아보고자 준비함

2. 라이브러리란

2-1. 라이브러리의 정의

소프트웨어를 개발할 때, 컴퓨터 프로그램이 사용하는 '비휘발성 자원(리소스)'의 집합이다.
사전적 용어인 도서관(library)와 비슷하게, 특정한 코드들(책들)을 모아둔 집합이라 생각하면 된다.
이는 소프트웨어 개발시에 사용되는 프로그램의 구성요소로, 공통으로 사용될 수 있는 특정한 기능들을 모듈(module)화 한 것이다.
API와의 차이점 : API는 프로그래밍 언어에서 라이브러리를 사용할 수 있도록 소스코드 수준에서 인터페이스를 노출 시킨 것이지만, 라이브러리는 실제 실행되어 기능을 수행하는 단편화된 프로그램 이다.
즉, 라이브러리는 완전한 프로램이 아니라 특정한 기능만을 수행하도록 제작된 프로그램이다.

2-2. 라이브러리를 사용하는 이유

모든 기능을 직접 코딩하지 못하며, 시간을 절약하기 위해서이다. 동일한 기능을 간단한 코드로 방법화시키는 라이브러리 코드를 본인이 직접짜기엔 너무 많은 시간을 소요되며, 실제로 정해진 기간내에 처리하기도 어렵기 때문이다.
즉, 라이브러리를 사용할수 있으면, 보다 복잡한 코드를 짜는데 더 빠르고, 더 편리하게 할 수 있기에, 사용이 권장된다.

2-3. 라이브러리의 종류

표준 라이브러리: 특정한 언어의 개발 환경에 기본적으로 포함된 것들로, 언어의 기본 기능을 확장시키는 역할을 담당한다. Python의 표준 라이브러리에는 문자열 처리, 파일 조작, 네트워크 통신 등 다양한 모듈들이 포함되어 있다. 참고문헌 : https://docs.python.org/ko/3/library/index.html
웹 개발 라이브러리 : 웹 개발의 편의성을 제공하는 역할을 한다. 대표적인 예로 JavaScript의 경우, jQuery, React, Angular 등이 있다.
데이터베이스 라이브러리 : 데이터베이스와 상호 작용하는 역할을 수행한다.
그래픽스 및 시각화 라이브러리 : 데이터 시각화나 그래픽스 작업을 위해 사용하는 라이브러리 대표적인 예로 JavaScript의 D3.js가 있다.
상태관리 라이브러리: 애플리케이션의 상태를 보다 효과적으로 관리(상태 업데이트나 추적...)하기 위한 라이브러리 대표적인 예로 Redux와 Recoil이 있다.

3. 라이브러리와 프레임 워크의 차이점

주도권의 차이라고 설명할 수 있다.
라이브러리의 경우, 개발자가 필요에 따라 선택적으로 사용할 수 있다.
프레임 워크의 경우, 애플리케이션의 개발을 위한 일종의 뼈대 역할을 하기에, 개발자 프레임 워크에 맞춰서 개발을 해야한다.

3-1. React는 라이브러리인가 프레임 워크인가?

React는 '프레임 워크같은' 라이브러리라 정의할 수 있다.
React 개발당시, UI개발을 위한 라이브러리로 개발되었으나, React Router를 통한 라우팅 기능이나, Redux와 같은 다양한 상태관리 라이브러리와의 조합으로 점차 '프레임 워크화'되어간 것이다.
즉, React는 프레임워크처럼 동작하는 라이브러리라고 소개하면 된다.

4. 요약 정리 및 면접형 QnA

Q1. 라이브러리에 대해 설명해주세요

라이브러리는 재사용 가능한 코드의 집합을 의미합니다.
해당 코드에는 특정 기능을 수행하는 함수, 클래스, 모듈 등으로 구성되어 있습니다.
개발자가 필요에 따라 선택적으로 사용할 수 있다는 특징이 있습니다.
프런트엔드 개발자인 저희에게 가장 익숙한 라이브러리에는 웹개발 라이브러리인 React와 상태관리 라이브러리인 Recoil과 Redux가 있습니다.

Q2. 혹시 Redux와 Recoil의 차이에 대해 설명가능하실까요?

Redux와 Recoil은 둘 다 상태 관리를 위한 라이브러리이지만, 사용 범위나 상태 업데이트 방식, 성능면에서 차이를 보입니다.
Redux의 경우, JavaScript 기반의 라이브러리(React, Angular, Vue)에서 모두 사용가능합니다. 반면 Recoil의 경우, Meta에서 React만을 위해 개발한 라이브러리여서 오로지 React에서만 작동가능합니다.
Redux는 Reducer를 활용한 일방적인 데이터 흐름으로 상태를 업로드 하지만, Recoil은 React의 useState와 유사하게 Atom이라는 상태 단위를 활용하여 상태를 업로드 합니다.
Recoil은 Redux보다 간단한 API를 제공하고 성능 최적화면에서도 React의 컴포넌트 라이프사이클과 잘 맞기에 우수합니다.

Q3. React는 라이브러리일까요, 아니면 프레임워크일까요?

React의 개념적으로 라이브러리가 맞습니다. 개발 초창기에 웹개발을 용이하게 하기 위해 개발된 웹개발 라이브러리 였으나, 다양한 상태관리 라이브러리를 함께 사용하고, 라우터를 활용한 라우팅이 가능해져서 컴포넌트간 보다 편리한 매핑이 가능해져 더이상 라이브러리가 아닌 프레임워크로 인식되는 경우가 있습니다.
즉, React는 프레임워크처럼 동작하는 라이브러리라고 정의할 수 있습니다.

REST API란 무엇인가?

Sat, 27 May 2023 18:01:16 GMT

1. 주제 선정 이유

지난 IT용어 정리에서 API에 대한 설명을 했으나, 가장 중요한 REST API에 대한 설명을 간략하게 했다고 생각해서 해당 주제에 대해 자세히 설명하고자 선정했다. 프론트 엔드뿐만 아니라 IT업계에서 가장 많이 사용하는 API 방식이기에 이에 대한 정확한 개념은 반드시 숙지해야 할 것이다.

2. API란 무엇인가? === 메뉴판

Application Programming Interface의 앞자리를 조합하여 만든 용어로, 응용 프로그램을 프로그래밍하기 위해 서로 데이터를 주고 받는 상호작용의 방법이라고 정의할 수 있다.
데이터를 요청하는 클라이언트(프론트엔드)에게 서버(백엔드)가 데이터를 제공해주며, 이러한 상호작용을 가능하게 해주는 것이 API이다.

3. REST API란 무엇인가?

3-1. REST의 개념

REpresentational State Transfer의 약자로, 웹 서비스를 위한 아키텍처 스타일이다.
HTTP URI를 통해 자원을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미
HTTP 프로토콜에 따르는 모든 플렛폼에서 사용이 가능

* CRUD란

Create(생성), Read(조회), Update(갱신), Delete(삭제)의 약자로, 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리기능들을 묶어서 일컫는 말이다.
데이터 베이스에서의 기초적인 4가지 쿼리 형식 Create - 생성 - INSERT Read - 조회 - SELECT Update - 갱신 - UPDATE Delete - 삭제 - DELETE
클라이언트 <-> 서버간의 HTTP프로토콜을 이용한 REST API 용어 Create - 생성 - POST Read - 조회 - GET Update - 갱신 - PUT, PATCH Delete - 삭제 - DELETE

3-2. REST의 4가지 원칙

균일한 인터페이스 : URI로 지정한 Resource에 대한 조작을 통일되고 한정적인 인터페이스(HTTP 표준 프로토콜기준)로 수행
무상태 : 서버가 이전의 모든 요청들을 독립적으로 처리하여 응답하는 것을 의미
계층화 시스템 : REST Server가 다중계층으로 이루어 질 수 있다는 것을 의미(API Server, 보안, 로드벨런싱, 암호화, 사용자 인증)
캐시 가능성 : 보다 효율적인 요청 처리를 위해 캐시 사용을 하며, 이를 통해 REST Server의 트랜젝션이 발생하지 않아 전체 응답시간, 성능, 서버의 자원 이용률을 줄일 수 있음

3-3. REST API의 개념

어원적으로 분석하면 '대표적인 상태 전달자'로 API 방식 중 가장 많이 그리고 표준적으로 사용되는 방법론이다.
아키텍처는 시스템을 구성하는 구성요소들의 조합과 그들 간의 상호작용 방식을 설계하는 것을 의미하며, REST API에서 언급하는 웹 서비스를 위한 아키텍처는 클라이언트-서버 아키텍처를 의미한다.
클라이언트-서버 아키텍츠는 클라이언트와 서버가 각자의 역할을 분배하여 시스템을 구성한다. 클라이언트는 사용자 인터페이스나 요청을 처리하고, 서버는 그에 필요한 데이터를 전달 및 처리를 하는 역할을 수행한다.
즉, REST API는 웹 서비스를 위한 클라이언트와 서버의 시스템(아키텍처)적 스타일이라 정리 할 수 있다.
REST API는 HTTP 프로토콜을 기반으로 동작한다.
RESTful == REST API를 사용한 웹 서비스

3-4. REST API를 사용하는 이유

자원(Resource) 중심적: 리소스(데이터)를 중심으로 API를 설계한다. 각 리소스는 고유한 식별자(URI)를 가지기 때문에 가독성이 좋아 수정이나 변경이 용이하다.
표준화된 인터페이스: REST API는 일반적으로 HTTP 메서드(GET, POST, PUT, DELETE)와 HTTP 상태 코드(200 OK, 404 Not Found 등)를 사용하여 일관된 인터페이스를 제공한다. 이는 개발자가 API를 이해하고 사용하기 쉽도록 도와준다.
사내 시스템들도 REST 기반으로 시스템을 분산해서 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 함
REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악
REST는 HTTP 표준을 기반으로 구현하기에, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있음(java,javascript)

* HTTP는 무엇인가?

HyperText Transfer Protocol의 약자로, 인터넷에서 웹페이지를 전송하기 위해 사용하는 프로토콜(규칙)을 의미한다.
HTTP는 클라이언트가 데이터를 '요청'하고 서버가 이에 '응답'하여 데이터를 주고받는 형태로 이루어져 있다.
REST API는 HTTP 프로토콜을 기반으로 동작하기에, 각종 HTTP 메서드를 활용하여 사용자에게 표준화된 인터페이스를 제공한다.

4. HTTP 메서드 정리

GET : 요청받은 URI의 정보를 검색하여 응답한다. 주로 사용자가 클릭하는 대부분의 버튼들이 GET 메서드를 사용한다고 생각해도 무방하다. ex). GET /index.html HTTP/1.1
POST : 요청된 자원을 생성(create)한다. 즉, 서버에 새로운 리소스를 생성하거나, 서버에 데이터를 제출하여 처리하고자 할 때 사용한다. 주로 게시물을 작성하거나, 주문 정보를 생성하거나, 새로운 파일을 업로드 하는 등, 새로운 자원을 생성할 때 사용한다. ex). POST / request-uri/ HTTP/1.1
PUT : 요청된 자원 전체를 수정(update)한다. 기존의 URI에 내용을 수정하는 것이기에 새로운 URI를 생성하는 POST와는 차이를 두어야 한다. 주로 리소스를 업데이트할때 PUT 메서드를 사용한다고 이해하면 된다. ex). PUT / request-uri/ HTTP/1.1
PATCH : 요청된 자원을 수정(update)한다. 다만, 자원 전체를 수정하는 PUT메서드와는 달리, PATCH메서드의 경우 해당자원의 일부만을 교체한다는 차이점이 있다. ex). PATCH / request-uri/ HTTP/1.1
DELETE : 요청된 자원을 삭제할 것을 요청한다. 하지만 안정성의 문제로 대부분의 서버에서는 비활성화 되어있으며, 주로 PATCH를 통해 수정한다고 한다. ex). DELETE / request-uri/ HTTP/1.1

4-1. POST와 PUT의 차이는 무엇인가?

POST 메서드는 INSERT이며 PUT 메서드는 UPDATE이다.
POST메서드의 경우, 멱등하지 않아 동일한 자원을 여러번 POST하면 서버자원에 변화가 생긴다.
PUT메서드의 경우, 멱등하여 동일한 자원을 여러번 PUT하면 서버자원이 변화하지 않고 동일한 리소스로 응답한다.
즉, POST메서드는 새로운 자원을 생성하기에 여러번 요청하면 서버 리소스에 변화가 생기지만, PUT의 경우, 생성이 아닌 수정을 하며, 여러번 요청해도 서버 리소스에 변화가 없다.

4-2. PUT과 PATCH의 차이는 무엇인가?

PUT은 해당 자원의 전체를 교체하지만, PATCH는 일부만 변경한다.
PUT은 덮어쓰기, PATCH는 업데이트.

5. HTTP 메서드 속성

1. 안전(Safe Methods)

호출을 해도 리소스가 변경하지 않는다.(GET만 계속 호출해도 안전, 나머지는 불안전)

2. 멱등(Idempotent Methods)

몇번 호출해도 결과가 똑같은가? (POST만 멱등이 아니다, 호출 결과가 늘 새롭기 때문)
활용 -> 자동 복구 메커니즘 (delete 같은 경우, 서버 이슈로 정상 응답을 주지 못했다면, 멱등하기 때문에 다시해도 괜찮음)
멱등은 외부요인으로 중간에 리소스가 변경되는 것까진 고려하지 않는다.

3. 캐시가능(Cacheable Methods)

*캐시 : 기록
응답 결과 리소스를 캐시해서 사용해도 되는가?
스팩상 GET,HEAD,POST,PATCH는 캐시 가능 -> 하지만 실제로는 GET,HEAD 정도만 캐시로 사용

6. 요약 정리 및 면접형 QnA

6-1. Q. REST API가 무엇인가요?

REST API는 HTTP 프로토콜을 기반으로 동작하는, 웹 서비스를 위한 클라이언트와 서버의 시스템(아키텍처)적 스타일입니다.
REST API가 각광받는 이유는 각 리소스는 고유한 식별자(URI)를 가지기 때문에 가독성이 좋아 수정이나 변경이 용이하고, 일관된 HTTP 프로토콜을 따르기에 개발자로 하여금 친숙하고 편리하기에 자주 사용됩니다.

6-2. Q. POST와 PUT의 차이는 무엇인가?

POST 메서드는 INSERT이며 PUT 메서드는 UPDATE입니다.
POST메서드의 경우, 멱등하지 않아 동일한 자원을 여러번 POST하면 서버자원에 변화가 생깁니다.
PUT메서드의 경우, 멱등하여 동일한 자원을 여러번 PUT하면 서버자원이 변화하지 않고 동일한 리소스로 응답합니다.
즉, POST메서드는 새로운 자원을 생성하기에 여러번 요청하면 서버 리소스에 변화가 생기지만, PUT의 경우, 생성이 아닌 수정을 하며, 여러번 요청해도 서버 리소스에 변화가 없습니다.

6-3. Q. PUT과 PATCH의 차이는 무엇인가?

PUT은 해당 자원의 전체를 교체하지만, PATCH는 일부만 변경합니다.

6-4. Q. 멱등(Idempotent)은 무엇인가?

동일한 작업을 여러 번 실행하더라도 결과가 동일하게 유지되는 성질을 의미합니다.
즉, 동일한 요청을 여러 번 실행하더라도 처음 요청과 같은 상태와 결과를 얻을 수 있다는 것을 의미합니다.
이는 요청의 반복 실행이나 중복 전송이 발생해도 시스템의 상태가 변하지 않는 것을 의미합니다.

📋API란 무엇인가?

Sat, 20 May 2023 13:05:22 GMT

목차

1. 주제 선정 이유

2. API

API의 개념
API의 기능
API의 형태
REST API
API의 종류
3. 요약 정리 및 면접형 QnA

번외. 별도의 IT용어

1. 주제 선정 이유

IT업계에서 API라는 용어를 상당히 많이 사용하는 것을 목격할 수 있다. 물론 이러한 문화에 친화적인 개발자라면 당연히 이해하고 넘어갔을 것이지만, 업계에 처음 진입한 사람에게는 너무나도 낯설은 용어라고 생각한다. 특히, 필자인 내가 그랬다. 그래서 이번 기회에 API에 대한 기초적인 개념을 쉬운 비유에 빗대어 설명하고자 한다.

2. API

2-1. API의 개념

API는 Application Programming Interface의 앞자리를 조합하여 만든 용어이다.
Application은 기능이나 응용 프로그램을 의미하며, Interface는 상호작용을 의미한다.
즉, API는 응용 프로그램을 프로그래밍하기 위해 서로 데이터를 주고 받는 상호작용의 방법이라고 정의할 수 있다.

2-2. API의 기능

API를 실상의 예로 설명한다면, 식당의 메뉴가 적힌 메뉴판이라고 빗대어 표현할 수 있다.
여기서 메뉴는 API가 제공하는 데이터 형식의 정보라고 생각하면 된다.
식당에 들어온 손님은 메뉴판을 보고 주방장에게 메뉴를 요청하고, 주방장은 그 메뉴에 맞는 음식을 손님에게 제공한다.
데이터를 요청하는 클라이언트(프론트엔드)에게 서버(백엔드)가 데이터를 제공해주며, 이러한 상호작용을 가능하게 해주는 것이 API이다.

2-3. API의 형태

웹에서 사용하는 API를 '웹 API'라고 부르며, 모바일에서 사용하는 API를 '모바일 API'라고 부르며, 프론트엔드 개발자가 주로 접하는 API는 HTTP API이다.
HTTP는 HyperText Transfer Protocol의 약자로, 인터넷에서 웹페이지를 전송하기 위해 사용하는 프로토콜(규칙)을 의미한다. HTTP는 클라이언트와 서버 간에 데이터를 주고받는 방식을 정의하고 있으며, 웹 브라우저와 웹 서버 간의 통신에 주로 사용한다 ex).네이버 URL : https://www.naver.com/
API는 요청방식, 요청자료내용, 자료요청에 필요한 추가정보 순으로 구성되어있다. ex). 클라이언트가 서버에 영화정보를 요청하는 HTTP API: GET /movies/123456789 서버가 갖고있는 영화정보:
```
HTTP/1.1 200 OK
Content-Type: application/json
```

{ "id": 123456789, "title": "The Shawshank Redemption", "year": 1994, "director": "Frank Darabont", "genres": ["Drama", "Crime"], "rating": 9.3 }

```

GET /movies/123456789 : 요청방식 / 요청자료내용 / 추가정보

2-4. REST API

Representational State Transfer의 약자로, 웹 서비스를 위한 아키텍처 스타일, 일종의 방법론이라 이해하면 편하다.
REST API는 HTTP 프로토콜을 기반으로 동작하며, 클라이언트와 서버 간의 통신을 위해 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용한다.
REST API의 특징:

자원(Resource) 중심적: 리소스(데이터)를 중심으로 API를 설계한다. 각 리소스는 고유한 식별자(URI)를 가지기 때문에 가독성이 좋아 수정이나 변경이 용이하다.
상태를 전달(Stateless): 서버는 클라이언트의 상태를 관리하지 않는다. 요청은 필요한 모든 정보를 포함하고, 서버는 각 요청을 독립적으로 처리한다. 클라이언트의 세션 상태는 서버에 저장되지 않으며, 클라이언트는 필요한 경우 인증 토큰 등을 요청에 포함시켜 식별할 수 있다.
표준화된 인터페이스: REST API는 일반적으로 HTTP 메서드(GET, POST, PUT, DELETE)와 HTTP 상태 코드(200 OK, 404 Not Found 등)를 사용하여 일관된 인터페이스를 제공한다. 이는 개발자가 API를 이해하고 사용하기 쉽도록 도와준다.
계층 구조(Layered System): RESTful 서비스는 다중 계층으로 구성될 수 있다. 중간 서버, 로드 밸런서, 캐싱 서버 등을 통해 보안, 로드 분산, 성능 향상 등을 달성할 수 있다.

정리하면, REST API는 HTTP API기반으로 개발자들이 보다 쉽게 서버와 상호작용할 수 있도록 하는 표준화된 방법으로, 단순하고 가독성이 좋다는 장점이 있다.

REST API에 대한 자세한 설명자료영상 : https://www.youtube.com/watch?v=lsMQRaeKNDk

2-5. API의 종류

API의 종류에는 크게 3가지가 있다.

public API(open API) : 누구나 사용가능한 공개 API (ex. 기상청 : https://www.data.go.kr/data/15095109/openapi.do#tab_layer_detail_function)
private API : 사내에서만 사용하는 API
partner API : 미리 정해준 사용자끼리 사용하는 API

3. 요약 정리 및 면접형 QnA

QnA : API는 무엇인가요?

API는 Application Programming Interface의 약자로, 응용 프로그램을 프로그래밍하기 위해 클라이언트와 서버가 서로 데이터를 주고 받는 상호작용의 방법입니다.

QnA : 혹시 REST API가 무엇인지 알고 계신가요?

REST API는 Representational State Transfer의 약자로, HTTP API기반하여 개발자들이 보다 쉽게 서버와 상호작용할 수 있도록 하는 표준화된 API 스타일입니다. 특히 자원중심적인 스타일이기에, 각 리소스가 고유한 URI를 가져 가독성이 좋으며, 표준화된 HTTP 메서드를 사용하기에 단순하다는 장점이 있기 때문에, 현업에서 거의 REST 방식을 사용합니다.

Reference:

코딩애플 유튜브:https://www.youtube.com/watch?v=ckSdPNKM2pY
얄팍한 코딩사전 유튜브:https://www.youtube.com/watch?v=iOueE9AXDQQ
노마드 코더 유튜브 : https://www.youtube.com/watch?v=iyFHfzCRHA8

💰상속이란 무엇인가

Sat, 06 May 2023 08:22:52 GMT

1. 주제 선정 이유

코딩을 하다보면, 종종 상속이라는 용어를 많이 들어봤을 것이다. 물론, 상속의 사전적인 개념인 '하위존재가 상위존재로부터 무언가를 물림받는다.' 는 것 정도는 유추할 수 있을 것이다. 하지만, 코딩이나 IT업계에서 언급하는 상속에 대해 제대로 알고 넘어가는 것이 실제로 프로젝트에 적용할 때, 보다 수월하고 익숙하게 사용할 수 있을 것이기에 선정했다.

2. 상속

2-1. 상속의 정의 및 종류

자바스크립트에서 사용되는 상속은 프로토타입 상속과 클래스 상속 크게 두 가지로 나뉜다.
프로토타입 상속 : 상속을 받든 객체가 상속을 해주는 객체의 프로퍼티나 메서드를 추가로 사용할 수 있게 해주는 체계를 의미한다.
클래스 상속 : 기존의 클래스를 확장시키는 개념으로 이해하면 좋다. 상속받은 기존의 클래스를 토대로 새로운 기능을 추가하는 시스템을 의미한다.

2-2. 프로토타입과 상속의 관계

프로토타입 (객체) : 다른 객체에 대한 참조 하는 대상을 의미한다. 모든 객체는 [[prototype]]이라는 내부 프로퍼티를 갖는다.
[[prototype]]를 저장창고라고 이해면 좋다. 예를 들어, 아래의 경우, 전부 객체로 이루어져있기에 객체의 프로토타입은, [[prototype]] : Object 즉, Object.prototype이다.그리고 상속받는 객체들이 [[prototype]]안으로 들어간다.
__proto__ : 객체가 자신의 프로토타입에 접근하도록 해주는 접근자 프로퍼티이다. 일종의 다리(bridge)라고 이해하면 좋을 듯하다. 해당 프로퍼티를 사용하여 상속받을 객체가 자신의 프로토타입에 들어갈 수 있도록 연결해준다.
즉, __proto__ 를 사용하여 상위(부모) 객체가 하위(자식) 객체의 프로토타입에 추가되는 과정을 상속이라고 한다.

Q. 그런데 왜 프로토타입 상속을 하는 것인가요??

우선은 한 사례를 통해 살펴보자
위 예시의 경우, food를 상속받은 pasta 객체가 cook이라는 메서드를 자유롭게 사용할 수 있는 사례이다. 즉, pasta 객체에서 cook메서드를 더 만들지 않고 상속받아 편하게 사용할 수 있다는 것을 의미한다. 이는 곧, 코드의 재사용성을 높이고 , 관리를 용이하게 해준다는 장점을 갖고 있다.

2-3. 클래스와 상속의 관계

클래스(class) : 하나의 생성자 함수를 여러개 찍어낼 수 있게 해주는 문법으로 흔히 붕어빵 틀에 비유한다.

먼저 상속을 할 부모 클래스를 생성한다.

class Food {
  constructor (name) {
      this.name = name;
      this.won = 0;
  }

  price(won) {
      this.won = won;
      console.log(`${this.name}의 가격은 ${this.won}원 입니다.`)
  }

  pay(){
      console.log(`${this.won}원을 지불하셨습니다.`)
  }
}

const food = new Food("음식");


- extends : 이를 상속받을 자식 클래스를 생성할 때, 자식 클래스명 옆에 작성한다.
```js
class Pasta extends Food {
    tasty(){
        console.log(`${this.name} 맛있네요!`)
    }
}

const pasta = new Pasta("아라비따 파스타");

위 예시를 합치면

class Food {
  constructor (name) {
      this.name = name;
      this.won = 0;
  }

  price(won) {
      this.won = won;
      console.log(`${this.name}의 가격은 ${this.won}원 입니다.`)
  }

  pay(){
      console.log(`${this.won}원을 지불하셨습니다.`)
  }
}

const food = new Food("음식");

class Pasta extends Food { tasty(){ console.log(${this.name} 맛있네요!) } }

const pasta = new Pasta("아라비따 파스타");

- pasta클래스는 food 클래스를 상속받고 있다는 것을 의미한다. 그렇기에 food클래스의 메서드를 사용할 수 있다.
```js
pasta.price(12000; // 아라비따 파스타의 가격은 12000원 입니다.
pasta.pay(12000);  // 12000원을 지불하셨습니다.
pasta.tasty();  // 아라비따 파스타 맛있네요!

Q. 그런데 왜 클래스 상속을 하는 것인가요??

프로토타입의 상속을 하는 이유와 유사하게, 상속을 주고 받기에, 작성해야할 코드의 양이 줄어든다. 특히, 클래스의 경우, 생성자 메서드등 작성해야할 내용이 많기에, 상속의 장점이 더욱 부각된다.
코드의 재사용성을 높이고 , 관리를 용이하게 해준다는 장점이 있기 때문에 사용한다.

3. 요약 정리 및 면접형 QnA

QnA : 자바스크립트에서 사용하는 상속은 무엇이고, 그 기능이 무엇인가요??

상속은 상속받는 자식요소가 상속해주는 부모요소의 프로퍼티나 메서드를 추가로 사용할 수 있도록 확장해주는 기능입니다.
자바스크립트의 경우, 프로토타입 상속, 클래스 상속, 이렇게 두 가지 유형의 상속이 있습니다.
프로토타입의 상속은, 객체 안의 [[prototype]]라는 내부 프로퍼티안에 __proto__라는 접근자 프로퍼티로 객체들을 상속받아 저장하여 사용합니다.
클래스 상속은, 부모 클래스를 extends라는 키워드를 사용하여 자식 클래스가 상속받아 사용합니다.
상속을 사용하는 이유는 코드의 재사용성을 높이고, 유지보수가 필요한 경우, 특정 부분만 수정해도 되기에 관리를 용이하다는 장점이 있기 때문입니다.

Diary-Project Self Cord Review

Thu, 04 May 2023 08:57:07 GMT

1. 프로젝트의 목표

수업에서 실습한 일일 기록 형식의 토이프로젝트를 재구현하는 것을 목표
재구현 이후, 별도의 추가기능들을 추가하여 다이어리가 아닌 다른 용도로 사용할 수 있도록 커스터마이징 진행할 것을 목표

2. 프로젝트 1차 완성 및 코드 리뷰

2-1). 1차 프로젝트 분석

1). 공용 CSS

프로젝트는 한개의 공용 CSS파일과 3쌍의 HTML/CSS 파일로 구성되어 있다.
프로젝트를 시작함에 있어, 구현할 3개의 페이지의 reset.css나 전체적인 layout, 그리고 header영역의 반응형을 공용 CSS로 구현했다.
공용CSS에서 header영역의 자식요소들을 top-wrap으로 감싸 max-width로 반응형을 구현했다.

2). 로그인 및 회원가입 페이지

로그인 페이지와 회원가입 페이지는 폼 태그를 이용한다는 점에서 상당히 유사하여 HTML은 거의 일치하게 작성했다.
폼태그 안의 자식요소들은 flex를 활용하여 구성했다.
가운데 로고 하단의 글자의 shadow는 box-shadow로 구성했다. 글자의 반만 하이라이트 처리할 때 종종 사용하기에 익혀두는 것을 권장한다.

box-shadow : inset /그림자를 밖으로 내보냄/ 0 /그림자 위치/ 0 /흐림 정도/ -0.6 /그림자의 확산 정도(크기)/

3). 메인 페이지

다른 페이지와 달리 상단의 우측에 가입자 이름과 로그아웃 버튼이 함께 붙어있어, 이를 float : right로 처리했다. float의 경우, 반응형 처리를 할 때, 별도의 작업없이 부드럽게 하단으로 이동한다는 장점이 있어서, 반응형 작업시 종종 사용하길 권장한다.
수업에서는 메인 페이지 가운데에 그려진 선을 form태그의 border-right로 처리했으나, 필자는 임의의 div태그로 처리했다. 회고를 해보니, 전자의 경우가 코드 사용량도 적어 훨씬 효율적일 것이라 생각된다. 아마도, 메인 태그를 flex 및 justify-contents: space-between을 사용하려 그랬던것 같은데, 따로 div태그 없이도 충분히 구현 가능하다.
폼태그의 width 값은 이를 감싼 wrapper에 flex-basis 값을 부여하여 틀을 잡았다. 그 외의 자식요소들에는 width : 100%를 부여했으며, 없으면 안된다. 이와 함께, flex-shrink : 0을 사용하여 크기가 변하지 않게 고정했다.
아티클의 쉼표는 가상요소를 만들고, background 속성으로 처리했다. 여기서 핵심은 백그라운드의 배경색을 초반에 작성하면 url속성값과 함께 사용할 수 있다. 다만, url이미지의 배경색이 없어야 하며, 이미지가 들어갈 가상요소의 배경색과 같아야한다. 위치는 position : absolute를 사용하여 지정해줬다.
아티클의 테두리의 두 줄 처리는 각각 아티클 자체의 border와 아티클의 가상요소의 border를 함께 사용하여 구현했다.

border-width : border의 두께 값을 나타냄

반응형 작업

max-width: 1024px를 기준으로 메인 태그는 max-width: calc(100% - 60px); 으로 양 옆에 30px씩 여유를 갖도록 작성했다.
가운데 줄은 숨김처리로 깔끔하게 정리했다.
아티클 태그는 flex-direction: column;으로 방향을 바꿨다.

2-2). 난감하거나 어려웠던 부분

1. 메인 태그 가운데의 직선

당연히 빈 div 태그를 사용하려 했으나, 코드 자체도 복잡하지고, 반응형과 같은 사후 작업시에 불편을 주기에 수업에서 사용한 border-right를 사용하여 해결 할 것을 적극 권장한다.

2. 메인 태그의 양식부분의 width값 지정

form태그의 자식요소에 특정한 width값을 주기 싫었으나, 주지 않으면 모양이 틀어져서 원본가 전혀 다른 형태가 되었다.
또한 추후에 반응형을 넣어야 했기에 보다 유동적인 width 값을 부여해야 하는 것이 난감했다.
수업에서 이를 해결하기 위해, form태그에 flex-basis과 flex-shrink : 0을 함께 이용했다. 이는 form태그의 모양도 잡아주고, 자식요소에 width:100%을 부여하여 보다 유동적인 형태로 만들어줘서 유용하다.

2-3). 2차 작업시 개선하거나 추가했으면 하는 부분

1. Main 페이지 : form태그의 날짜를 현재 날짜로 반영하기

Problom: 현재 기록된 날짜는 임의로 지정한 날짜이기에 정적인 것이 문제라고 생각한다.
Solution: 이를 개선하기 위해서는 자바스크립트의 new Date()생성자 함수를 적용할 계획이다.

2. Main 페이지 : localStorage를 활용한 실시간 컨텐츠 반영

Problom: 현재 기록된 내용은 임의로 작성된 내용이라 정적인 것이 문제라고 생각한다.
Solution: 이를 개선하기 위해서는 JQuary의 localStorage를 활용할 계획이다.

Problom: 현재 header태그만 반응형이 구현된 상태인 것이 문제다.
Solution: 남은 부분도 반응형 처리하면 된다.

💽객체란 무엇인가?

Tue, 02 May 2023 13:58:51 GMT

1. 주제 선정 이유:

자바스크립트가 객체 지향 언어라는 것은 다들 알고 있을 것이다. 그럼 여기서 말하는 객체란 과연 무엇인가? 우리가 알고 있는 객체는 키와 값으로 이루어진 중괄호 라고 알고있는데, 이에 대해 자세히 파악하여 수업을 하거나 협업을 할 때, 보다 더 원활하게 소통할 수 있도록 돕고자 조사해봤다.

2. 객체

2-1). 객체의 정의 및 구조

객체 : 프로그래밍 언어에서 데이터나 함수를 담아내는 참조 자료형으로, 프로퍼티와 메서드로 이루어져 있다.
프로퍼티 : 객체의 상태 데이터를 나타내는 값으로, 키(key)와 값(value)로 이루어져 있다. 프로퍼티와 유사한 용어로, 속성(attribute)이 있다.
메서드 : 프로퍼티 중, 값이 함수인 경우, 다른 함수와 구분하기 위해 해당 프로퍼티를 메서드라고 부른다.

2-2). 참조의 정의 및 예시

참조 : 값이 담긴 메모리 주소를 가져온다는 것을 의미, 결국 객체는 식별자(변수)에게 값이 아닌 메모리 주소만 알려주기에 참조 자료형 이라고 한다. ※객체의 주소를 비교하면 다르지만, 객체의 속성(프로퍼티)에 접근하여 값을 비교하면 같다!

// 예시 1. 객체의 주소 비교와 속성 값 비교
let person1 = { age: 27,
          name : Daniel};

let person2 = { age: 27,
          name : Daniel};


person1 === person2 // 객체 person1과 person2의 주소는 다르기에 false

person1.age === person2.age // 객체 person1과 person2의 age는 27로 같기에 true

3. 객체 지향 프로그래밍

객체 지향 프로그래밍 : 데이터나 함수를 하나의 객체 단위로 묶은 독립된 객체간의 상호작용을 하는 프로그래밍 방식
객체 지향 프로그램 언어 : C++, Java, JavaScript...

Q. 도대체 왜 객체 지향 프로그래밍 언어를 사용하는 것인가?

3-1). 객체 지향 프로그래밍 언어의 특징

1). 상속

어떤 객체의 프로퍼티나 메서드를 다른 객체가 그대로 사용할 수 있게 해주는 것
상속을 통해 코드의 재사용성이 높아지며, 클래스 간의 계층구조를 만들어 관리하기 쉬워짐
2). 캡슐화
중괄호 라는 범위 안에, 객체의 키와 값을 짝지어서 타인이 함부로 객체의 값을 수정하거나 삭제하는 것을 방지한다.
3). 다형화
여러 객체가 하나의 메서드를 호출해도, 실행 결과가 객체마다 다르게 나타나는 특징이 있다.
하나의 메서드를 메서드 오버라이딩을 통해 다양한 결과를 만들 수 있어, 코드의 재사용률을 높인다.

※ 메서드 오버라이딩 : 상속 관계에서 부모 클래스의 메소드를 자식 클래스에서 재정의하여 사용하는 것

class Animal {  // 부모 클래스
  constructor(name) {
    this.name = name;
  }

  speak() {  // 처음 선언한 메서드
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {  // 자식 클래스
  speak() {  // 같은 명의 클래스를 재정의 -> 다형화
    console.log(`${this.name} barks.`);
  }
}

class Cat extends Animal {
  speak() { // 같은 명의 클래스를 재정의 -> 다형화
    console.log(`${this.name} meows.`);
  }
}

const animals = [new Dog('Rufus'), new Cat('Mittens')];

animals.forEach(animal => {
  animal.speak();
});

4). 추상화

객체의 핵심적인 특징을 강조하고, 불필요한 부분을 생략하는 것
객체를 단순화시키고, 객체가 내부적으로 어떻게 구현되었는지 숨기기 때문에 코드의 가독성과 안정성이 향상

3-2). 객체 지향 프로그래밍 언어의 장점

1). 재사용성

객체간에 계층이 부여되면 상속을 할 수 있고, 그 과정에서 공통된 코드는 다시 작성할 필요가 없어 구동 시간이나 로딩 시간이 상당히 절약됨

2). 가독성

객체지향 프로그래밍에서는 객체의 속성과 메서드를 명확하게 정의하고, 객체 간의 상호작용을 명확하게 표현 가능
이를 통해 코드의 가독성이 높아지며, 코드의 이해 및 유지보수가 용이해짐

3). 유지보수성

객체지향 프로그래밍에서는 코드를 객체 단위로 모듈화하여 작성하기 때문에, 수정이나 추가를 할 때 해당 객체만 수정하면 되기에 관리에 용이

※ 모듈화 : 코드를 하나의 파일에 작성하는 것이 아니라, 나누어 마치 조립하듯이 구조화시키는 것을 의미

자바스크립트의 경우, ES6(ES2015)의 모듈 방식을 주로 사용하는데, 이는 import와 export를 사용하는 방식이며, 이를 위해 babel과 같은 도구를 사용하여 코드를 컴파일해야 함

// myModule.js // 보내는 모듈
export const foo = function() {
  console.log("Hello, World!");
};
export const bar = function() {
  console.log("Bye, World!");
};

// app.js  // 받는 모듈
import { foo, bar } from './myModule';
foo(); // "Hello, World!" 출력
bar(); // "Bye, World!" 출력

번외). 함께 알아두면 좋은 용어

1. Babel

자바스크립트 코드를 컴파일러로 변환해주는 오픈소스 도구
주로 최신 버전의 자바스크립트 코드를 예전 버전으로 변환하여, 구형 브라우저에서도 실행 가능한 코드로 변환하는데 사용

2. 컴파일러(Compiler)

프로그래밍 언어로 작성된 소스 코드를 기계어로 변환해주는 소프트웨어
자바스크립트의 경우, 인터프리터 언어라서 별도의 컴파일러가 필요

3. 인터프리터 언어

프로그램의 소스 코드를 직접 실행하는 언어로, 컴파일러와는 달리 컴파일 과정 없이 소스 코드를 바로 실행
대표적인 인터프리터 언어 : JavaScript, Ruby, PHP...
코드를 한 줄 한 줄씩 읽어 들이며 실행하기에 명령 자체의 속도는 컴파일러 언어에 비해 느리다는 단점이 있음
오류 발견 즉시 해결할 수 있다는 장점이 있음

프로그래머스 레벨 0 Day 16

Thu, 27 Apr 2023 08:59:59 GMT

1. Day 16-1. 편지

Q. 할머니가 보시기 편하도록 글자 한 자 한 자를 가로 2cm 크기로 적으려고 하며, 편지를 가로로만 적을 때, 축하 문구 message를 적기 위해 필요한 편지지의 최소 가로길이를 return 하도록 solution 함수를 완성해주세요.

1-1. 내 풀이

function solution(message) {
    return message.split("").length*2;
}

1-2. 해설

문제에서 주어진 파라미터의 값은 문자열이기에 split("")으로 문자 1개씩으로 이루어진 배열을 만든다.
새로 생성된 배열의 길이는 곧 문자의 개수와 같고, 글자의 크기가 2cm이므로 배열의 길이에 2를 곱하여 반환한다.

2. Day 16-2. 가장 큰 수 찾기

Q. 정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요.

2-1. 내 풀이

function solution(array) {
    return [Math.max(...array), array.indexOf(Math.max(...array))];
}

2-2. 해설

파라미터의 배열 안의 요소 중, 가장 큰 수를 찾기 위해 해당 배열을 전개구문과 Math.max()를 사용한다.
정답 배열의 두번째 요소에는 가장 큰 수의 인덱스가 와야하기에, indexOf()메서드로 인덱스를 찾는다.

3. Day 16-3. 문자열 계산하기

Q. my_string은 "3 + 5"처럼 문자열로 된 수식입니다. 문자열 my_string이 매개변수로 주어질 때, 수식을 계산한 값을 return 하는 solution 함수를 완성해주세요.

3-1. 내 풀이

function solution(my_string) {
    my_string = my_string.split(" ")
    let answer = parseInt(my_string[0]);
    for (let i = 0; i < my_string.length; i++){
        if (my_string[i] === "+") {
            answer += parseInt(my_string[i+1]);
        } else if (my_string[i] === "-"){
            answer -= parseInt(my_string[i+1]);
        }
    }
    return  answer;
}

3-2. 해설

파라미터의 식이 한 칸씩 띄어져 있는 다항식이므로, split(" ") 즉, 공백을 기준으로 나뉘어진 배열을 만든다.
반복문을 사용하기 전에, 정답 변수에 배열의 첫번째 요소를 사전에 넣는다.
연산자(+,-)를 찾는 반복문을 작성한다. 만약 요소가 "+"인 경우, 그 다음 요소를 정답 변수에 더하고, 반대의 경우, 그 다음 요소를 뺀다.

4. 배열의 유사도

Q. 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요.

4-1. 내 풀이

function solution(s1, s2) {
    return s1.filter((el) => s2.includes(el)).length;
}

4-2. 해설

파라미터 중 한 개를 기준으로 삼아 filter와 includes를 사용하여 같은 요소가 있는지 확인한다.
이후, 길이로 반환한다.

멋사 4-11 TIL (DOM)

Tue, 11 Apr 2023 15:30:57 GMT

1. 요소 제어

1-1. parentElement.insertBefore(target, location); : 위치 이동

target요소를 parentElement의 자식인 location 위치 앞으로 이동 -> 단, after은 없다

2. innerHTML/innerText/textContent

JavaScript문자열로 element, text 노드를 생성하거나 추가하는 방법

innerHTML는 텍스트안에 html요소가 있으면 마크업 요소로 가져온다.
textContnet가 innerText, innerHTML 보다 처리되는 속도가 더 최적화 되어 있다.(마크업 요소를 전혀 고려하지 않기때문)
innerText은 HTML은 인식하진 못한다. -> 그래도 문법적인 부분을 읽어서 출력.(텍스트의 '형태'(텍스트 줄바꿈...)는 인식하지만, 정보(색상, 굵기)는 인식하지 못한다는 의미) -> 브라우저에서는 HTML요소를 해석해주지 않는다.
innerText 속성은 요소의 렌더링된 텍스트 콘텐츠를 나타냅니다. (렌더링된에 주목하세요. innerText는 텍스트 내에 문법적으로 처리가 가능한 텍스트가 있으면 "처리가 끝난 결과물"을 텍스트로 전달합니다.)

3. 속성 제어하기

3-1. style 객체

요소의 스타일을 제어 : target.style.property = "속성값" 으로 제어, 하지만 이는 인라인 스타일을 수정하는 것이기에 가중치 점수가 높다. 이로인해 추후에 스타일을 변경이 어려울 수 있음
이럴 경우, classList를 통한 클래스 제어가 더 유리하다.

3-2. Attribute 메서드

노드 객체에서 호출하여 속성을 제어 : target.getAttribute(속성) : 메소드 요소의 특정 속성 값에 접근할 수 있도록 함 target.setAttribute(속성,속성값) : 메소드 요소의 특정 속성 위치의 속성 값에 접근하여 값을 수정함

3-3. data 속성

요소에 데이터를 저장하도록 도와줌

const target = document.querySelector('img')
    console.log(target.dataset);  // data를 가져오는 프로퍼티
    console.log(target.dataset.shipId);  // dataset으로 data를 가져온 이후에 세부 속성들을 가져온다.

3-4. insertAdjacentHTML

요소 노드를 대상의 인접한 주변에 배치

target.insertAdjacentHTML('beforebegin', '안녕하세요');  // 의 < 앞에
        target.insertAdjacentHTML('afterbegin', 'W입니다'); // 의 > 뒤에
        target.insertAdjacentHTML('beforeend', '면접오시면'); // 의 < 앞에
        target.insertAdjacentHTML('afterend', '집에 가세요'); // 의 > 뒤에

4. 이벤트 객체

이벤트는 객체이다.

btnFirst.addEventListener('click', (event) => {
      console.log(event);
      });  => 이벤트 객체의 정보들을 가져온다.

4-1. target과 currentTarget

찾으려는 요소를 직접 찾지 않고, 부모요소를 통해 찾는 방법

const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event) {
        console.log(event.target); //  이벤트가 발생한 진원지의 정보가 담겨 있습니다. // 그게 버튼1 // 이벤트를 버튼의 부모에게 줘도 target은 진원지를 찾는다. 
        console.log(event.currentTarget); // 이벤트 리스너가 연결된 요소를 전부 다 가져온다.
        })

4-2. 이벤트 전파

이벤트가 발생하면, 브라우저(윈도우)부터 도큐먼트 -> 부모요소 -> 요소 순으로(노드 트리순)으로 이벤트가 실행될 대상(캡처링 이벤트)을 찾는다.(캡처링 단계)
```
window.addEventListener('click', () => {  // 캡처링 단계 예시
         console.log("window capture!");
     }, true); // 3번째 인자에 true가 들어옴
```
이벤트 대상을 찾아 캡처링이 끝나면, 반대로, DOM트리를 요소 -> 부모요소 -> 도큐먼트 -> 브라우저(윈도우) 역순으로 올라가며 만나는 버블링 이벤트 리스너들을 실행 시킨다.(버블링 단계)

window.addEventListener('click', () => {  // 버블링 단계 예시
            console.log("window bubble!");
        }); // 3번째 인자에 true가 없음

5. 그 외 자투리

5-1. CSS

// 태그 => 폼 안에서 구획을 나누어 준다.
// JS 스터디 모집 설문조사 => 필드셋의 제목
//  => 작업의 완료 정도를 나타내는 요소입니다.

5-2. DOM

api : 앱 프로그래밍 인터페이스
DOM : 브라우저 객체
개행 하나도 노드라고 여긴다(#text)
노드가 요소보다 큰 개념인것인가?? -> 노드가 가장 넓은 개념이고 그 안에 요소도 포함되어 있는 것
validity -> 유효한지 확인하는 프로퍼티 키
'keyup' -> 입력되면 이라는 이벤트
객체 안에있는 함수가 메서드
속성 이름이 대쉬(-) 를 통해 여러 단어로 나눠져있는 경우는 카멜케이스로 사용합니다. (background-image ⇒ backgroundImage)

멋사 4-6 TIL(JavaScript)

Sun, 09 Apr 2023 11:35:03 GMT

1. 반복문

1-1. for in

배열의 인덱스나 객체의 key값을 변수 i에 부여하는 반복문
IE에서도 사용가능하다는 장점이 있다.

// 배열의 인덱스를 가져오는 경우
let arr1 = [10, 20, 30, 40, 50]
for (const i in arr1) {  // i가 arr의 인덱스를 가져온다
    console.log(arr1[i])
}
// 객체의 key값을 가져오는 경우
let obj1 = {'one' : 10, 'two':20}
for (const i in obj1) {  // i가 obj의 key를 가져온다
    console.log(obj1[i])
}

1-2. for of

배열의 값이나 객체의 iterable(반복가능, ex 배열, 문자열...)한 값을 반환하는 반복문.
IE에서 사용이 불가능하다.

let arr2 = [10, 20, 30, 40, 50]
let obj2 = {'one' : 10, 'two':20}
for (const item of arr2) {
    console.log(item)   // i가 arr의 값을 가져온다.
}
for (const item of obj2) {
    console.log(item)   // error //of 뒤에 iterable한 값이 나와야 한다.
}

1-3. for문의 객체 활용법(보충)

배열이 객체로 이루어진 경우, 특정 key의 value를 얻고자 할 때: for in문은 arr[i]["key"]로 구한다. for of문은 i.key로 구한다.

일정하지 않는 객체에 반복문을 사용할때, nullish연산자나 조건문을 사용하여 undefined를 넘어갈 수 있다.

// 본 배열의 마지막 객체요소 안에는 age가 없어서 나이의 평균을 구하는데 어려움이 있다.
let user = [
    {
        "_id": "642e3071c61a23c70ae6076b",
        "index": 0,
        "age": 31,
        "name": "Hicks Garza",
        "gender": "male",
    },
    {
        "_id": "642e3071ecd6f90a87d64731",
        "index": 1,
        "age": 32,
        "name": "Ayers Harrington",
        "gender": "male",
    },
    {
        "_id": "642e3071cef9ddc131f047fb",
        "index": 2,
        "age": 39,
        "name": "Lamb Adams",
        "gender": "male",
    },
    {
        "_id": "642e3071cef9ddc131f047fb",
        "index": 2,
        "name": "Lamb Adams",
        "gender": "male",
    }
]
// solution 1 : nullish연산자
let s = 0
for (const i of user) {
    s += i.age ?? 0 // 마지막 객체요소는  undefinded이지만,  nullish 연산자로 0이된다.
}
console.log((s / user.length).toFixed(2))
// solution 2 : 조건문
let s = 0;
for (const i of user.map(v => v.age)) {
    if(!!i) {  // 조건문에 의해 마지막 객체요소는  undefinded 즉, false로 출력되어 무시된다.
        s += i 
    }
}
console.log((s/ user.length).toFixed(2))
// 모범 답안(실무용)
user
    .map(v => v.age)
    .filter(v => !!v)  // 값이 있는 경우, 즉 true인 경우만 걸러낸다.
    .reduce((a,b) => a + b, 0)

2. continue와 break문

2-1. break문

조건이 충족되면,자신을 감싼 반복만을 탈출함. 그 상위 반복문까지 탈출하지 않음 // 중단시킴

// break문 예시(구구단, 3까지만 곱해짐)
for (let i = 2; i < 10; i++) {
    for(let j = 1; j <10; j++){
        console.log(`${i} X  ${j} = ${i*j}`)
        if (j === 3) {
            break  // j가 3이면 for(let j = 1; j <10; j++)를 탈출함
        }
    }
}

2-2. continue문

조건이 충족되면, 아래 구문을 실행시키지 않고 다음 루프로 넘어가서 다시 구문을 실행시킴. // 중단시키진 않음

// continue문 예시(구구단, 3배고 다 곱함)
for (let i = 2; i < 10; i++) {
    for(let j = 1; j <10; j++){
        if (j === 3) {
            continue  // j가 3이면, 아래 console.log(`${i} X  ${j} = ${i*j}`)실행 시키지 않고 j가 4로 넘어감
        }  
        console.log(`${i} X  ${j} = ${i*j}`)
    }
}

3. 전개구문과 구조분해할당

3-1. 전개구문

배열이나 객체로 묶여있던 요소들을 다시 풀거나, 나뉘어진 요소들을 하나의 배열이나 객체로 모아주는 역할을 수행

배열의 전개구문 : 주로 서로 다른 배열을 하나로 합칠때 사용한다.

const 과일들 = ['사과', '파인애플', '수박'];
const 생선들 = ['조기', '갈치', '다금바리'];
const 합치면 = [...과일들, ...생선들];
const 합치면2 = [과일들, 생선들];
console.log(합치면);  // ['사과', '파인애플', '수박', '조기', '갈치', '다금바리']
console.log(합치면2);  // [Array(3), Array(3)]

객체의 전개구문 : 주로 요소에 변경사항을 줄 때 사용한다.

const A = {ein: '재직중', zwei: '재직중', drei: '재직중', vier : '재직중', funf : '재직중'};
const A2 = {
    ...A,
    drei: '휴가',  // 객체 요소 변경
       vier: '퇴사'
}
A2 //  {ein: '재직중', zwei: '재직중', drei: '휴가', vier: '퇴사', funf: '재직중'}

3-2. 구조분해할당

for (const [i,j] of [[1,2], [3,4], [5,6]]) {
    console.log(i,j)
} // 1 2
     3 4
     5 6

Object.entries(): 객체의 프로퍼티들을 [key ,value] 쌍의 배열로 반환해주는 메소드

const A = {ein: '재직중', zwei: '재직중', drei: '재직중', vier : '재직중', funf : '재직중'};
Object.entries(A)
// 0
: 
(2) ['ein', '재직중']
1
: 
(2) ['zwei', '재직중']
2
: 
(2) ['drei', '재직중']
3
: 
(2) ['vier', '재직중']
4
: 
(2) ['funf', '재직중']
for (const [i,j] of Object.entries(A)) {
    console.log(i,j)
}
// ein 재직중
   zwei 재직중
   drei 재직중
   vier 재직중
   funf 재직중

구조분해할당 예시

const test2 = [
    [1, 2, [10, 20]], 
    [3, 4, [30, 40]], 
    [5, 6, [50, 60]]
]
for (const [i, j] of test2) {
    console.log(i, j);
} 
const test3 = [
    [1, 2, [10, 20]], 
    [3, 4, [30, 40]], 
    [5, 6, [50, 60]]
]
for (const [i, j, k] of test3) {
    console.log(i, j, k);
}
const test4 = [
    [1, 2, [10, 20]], 
    [3, 4, [30, 40]], 
    [5, 6, [50, 60]]
]
// 모든 요소로 나누어준다
for (const [i, j, [k, l]] of test4) {
    console.log(i, j, k, l);
}
// 중요!!
const test5 = [
    [1, 2, 10, 20], 
    [3, 4, 30, 40], 
    [5, 6, 50, 60]
]
for (const [i, j, ...k] of test5) {  // j이후의 요소들을 전부 구조분해한 배열로 묶음
    console.log(i, j, k);
}

4. 암기코드

4-1. 구구단

// for문
for (let i = 2; i < 10; i++) {
    for (let j = 1; j < 10; j++) {
        console.log(`${i} X  ${j} = ${i*j}`)
    }
}
// while문
let i = 2
while (i < 10) {
    let j = 1;  // 왜 여기서 선언하는 것인가?? -> 초기화를 안했기 때문  // 위에 쓰면 j는 영원히 10이 된다 -> 9까지 출력하고 탈출하기 때문
    while (j < 10) {
        console.log(`${i} X  ${j} = ${i*j}`)
        j++
    }
    i++
}
// 오답
// let i = 2
// let j = 1;
// while (i < 10) {
//     while (j < 10) {
//         console.log(`${i} X  ${j} = ${i*j}`)
//         j++
//     }
//     i++
// }

4-2. 문자열 뒤집기

//for문
let s1 = 'hello world'
let result = '';
for (let i = 0; i < s1.length; i++) {
    console.log(i)
    result = s1[i] + result
}
console.log(result)
// s1[0] + result => 'h' + '' => 'h'
// s1[1] + result => 'e' + 'h' => 'eh'
// s1[2] + result => 'l' + 'eh' => 'leh'
// while문
let s2 = 'hello world'
let result2 = '';
let count = 0
while (count < s2.length) {
    result2 = s2[count] + result2
    count++
}
console.log(result2)

4-3 팩토리얼

//for문
let s3 = 1;
for (let i = 1; i < 6; i++) {
    s3 *= i;
}
console.log(s3)
// while문
let s = 1;
count = 1;
while (count < 6) {
    s *= count;
    count++
}
console.log(s)

프로그래머스 4-8 TIL

Sat, 08 Apr 2023 13:11:19 GMT

1. Day 15 3/4 : 영어가 싫어요

Q. 영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요.

1-1. 내 풀이 및 해설

function solution(numbers) {
    let Num = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
    let Eng = "";
    let answer = "";
    numbers = numbers.split("");
    for (let i = 0; i < numbers.length; i++){
        Eng += numbers[i]
        if (Num.includes(Eng)){
            answer += Num.indexOf(Eng);
            Eng = "";
        }
    }
    return parseInt(answer);
}

1단계. 파라미터는 숫자가 영어로 쓰여진 파라미터로 나오기에, split("")으로 하나씩 나뉘어진 배열로 만든다.
2단계. 영문으로 작성된 숫자로 만들어진 배열을 만들고, 인덱스를 이용하기로 판단한다.
3단계. 파라미터 배열에서 조합된 단어를 숫자배열과 비교하여 아라비아 숫자를 정답에 누적시켜야하기에 빈 문자열을 만든다.
4단계. 파라미터 배열을 순회하면서, 숫자열의 숫자와 일치하면 그 숫자열의 인덱스를 정답 배열에 누적하도록 조건문을 작성한다.

2. Day 15 4/4 : 약수 구하기

Q. 정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요.

2-1. 내 풀이 및 해설

function solution(n) {
    let answer = [];
    for (let i = 1; i <= n; i++){
        if (n % i === 0){
            answer.push(i)
        }
    }
    return answer;
}

1단계. n이하의 자연수를 순회해야하기에, for문으로 1부터 n까지 순회하는 반복문을 작성한다.
2단계. n의 약수는 n에 나누었을때, 나머지가 0이라는 메커니즘을 이용한 조건문을 작성하여, 약수만 정답 배열에 추가하는 코드를 작성한다.

2-2. 다른 내 풀이 및 해설

function solution(n) {
    return Array(n).fill(0)
                   .map((v,i) => i+1)
                   .filter((el) => n % (el) === 0);
}

1단계. 인덱스가 n이고 0으로만 구성된 배열을 만든다.
2단계. map메서드로, 0이 인덱스에 1씩 더한 요소들로 바뀌도록 한다.
3단계. filter메서드로 각 요소를 n에 나누어 나머지가 0인 요소만 남도록 한다.

3. 마무리

다른 풀이들을 살펴보니, 확실히 정규식을 알면 보다 효율적으로 풀 수 있기 때문에 부진런히 공부해야겠다.

프로그래머스 4-7 TIL

Sat, 08 Apr 2023 04:35:53 GMT

1. Day15 1/4 : 인덱스 바꾸기

Q. 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.

1-1. 내 풀이

function solution(my_string, num1, num2) {
    let answer = '';
    let Dex = [...my_string]
    for (let i in Dex) {
        if( i == num1) {
            answer += Dex[num2]
        } else if (i == num2) {
            answer += Dex[num1]
        } else {
            answer += Dex[i]
        }
    }
    return answer;
}

1-2. 해설

1단계. 파라미터가 문자열이라는 것을 감안해서 전개구문으로 전개하여 새로운 변수에 선언한다.
2단계. 본 문제의 핵심은 인덱스를 바꾸는 것이기에, for in 문을 사용하여 순환시킨다.
3단계. for in문 안에 조건문으로 인덱스 num1과 num2를 바꾸면서 정답에 요소들이 누적되도록 코드를 작성한다.

1-3. 다른 풀이 및 해설(구조분해할당)

function solution(my_string, num1, num2) {
    my_string = my_string.split("");
    [my_string[num1],my_string[num2]] = [my_string[num2],my_string[num1]]
    return my_string.join("");
}

이 풀이가 문제의 취지를 가장 잘 파악한 문제라고 생각한다.(물론 내가 푼 것은 아님)
1단계. 본 문제는 요소의 인덱스를 바꾸는 것이지만, 결국 요소끼리 자리를 바꾸면 되기에, 구조분해할당을 이용하여 구조를 재설정하면 된다.
2단계. 파라미터가 문자열로 되어있기에 이를 split("")으로 요소들이 나뉘어진 배열로 바꾼다
3단계. 구조분해할당을 이용하여, 배열의 요소들의 위치를 바꾼다.
4단계. 파라미터가 배열이 되었기에 정답에는 join("")을 사용하여 문자열로 바꾸어 반환한다.

1-4. 다른 풀이 및 해설(map 메서드)

function solution(my_string, num1, num2) {
    my_string = my_string.split("")
    return my_string.map((v,i) => i === num1 ? my_string[num2] : i === num2 ? my_string[num1] : v).join("");
}

1단계. 파라미터가 문자열로 되어있기에 이를 split("")으로 요소들이 나뉘어진 배열로 바꾼다
2단계. 배열 내 요소들에 변화를 주는 것이기에, map메서드를 사용하며, 주어진 인덱스 간에 요소들을 바꿀 수 있는 조건 코드를 삼항 연산자로 작성한다.
3단계. 파라미터가 배열이 되었기에 정답에는 join("")을 사용하여 문자열로 바꾸어 반환한다.

2. Day15 2/4 : 한 번만 등장한 문자

Q. 문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다.

2-1. 내 풀이 및 해설

function solution(s) {
    let answer = '';
    let STR = [...s].sort()
    if(STR[0] != STR[1]){
        answer += STR[0];
    }
    for (let i = 1; i < STR.length ; i++){
        if (STR[i-1] != STR[i]) {
            if(STR[i] != STR[i+1]){
                answer += STR[i];
            }
        }
    }
    return answer;
}

1단계. 정답이 사전 순으로 나와야 하기 때문에, 파라미터에 전개구문과 sort()를 사용하여 알파벳 순으로 정렬된 배열로 만든다.
2단계. 사전 순으로 정렬된 배열에서 한 번만 나오는 문자는 자신의 앞뒤의 문자와 다르다는 조건을 갖고 있다는 것을 파악한다.
3단계. for문으로 반복문을 작성하되, 인덱스의 변수가 0부터 시작하면 자신 앞의 문자가 없기때문에 시작은 1로 진행한다.
4단계. 0번째 요소를 판별하지 못했기 때문에, 이를 판별하는 조건문을 for문 앞에 작성한다.

2-2. 다른 풀이 및 해설

function solution(s) {
    s = s.split("").sort()
    return s.filter((v,i) => s[i-1] != s[i] && s[i] != s[i+1])
            .join("");
}

1단계. 정답이 사전 순으로 나와야 하기 때문에, 파라미터에 split("")과 sort()를 사용하여 알파벳 순으로 정렬된 배열로 만든다.
2단계. 자신의 앞뒤의 문자와 비교하는 조건을 비교연산자와 논리연산자로 작성한 filter()를 사용하여 한 번만 나온 문자를 걸러낸다.

3. 마무리

배열이나 객체 요소의 순서를 바꿔야할 때, 구조분해할당이 상당히 유용하기에 정리하여 익혀둘 것
한 번에 모범적인 풀이법이 나올 필요는 없으니, 다양한 풀이법을 적용해볼 것을 추천한다.

프로그래머스 4-6 TIL

Thu, 06 Apr 2023 14:38:42 GMT

1. Day 14 3/4 : 암호 해독

Q. 암호화된 문자열 cipher를 주고받습니다. 그 문자열에서 code의 배수 번째 글자만 진짜 암호입니다. 문자열 cipher와 정수 code가 매개변수로 주어질 때 해독된 암호 문자열을 return하도록 solution 함수를 완성해주세요.

1-1. 내 풀이

function solution(cipher, code) {
    let answer = '';
    for (let i = code - 1; i < cipher.length; i += code){
        answer += cipher[i]
    }
    return answer;
}

1-2. 해설

1단계. 문제에서 code의 배수 번째 글자라고 했으나, 자바스크립트의 순서는 0부터 시작하기에 사실상 code -1 번째부터 시작한다는 것을 파악한다.
2단계. 첫번째 인덱스는 1을 차감했으나, 순서는 code만큼 커지기에 증감식에 code를 더한다.

1-3. 다른 풀이 및 해설 -> 정답참조

function solution(cipher, code) {
    return [...cipher].filter((_,i) => (i + 1) % code === 0).join("");
}

1단계. code의 배수번째인 인덱스는 code의 배수보다 1이 작기 때문에, 인덱스의 입장에서 1을 더하여 code의 배수가 되는 방법으로 인덱스를 찾는다.

2. Day 14 4/4 : 대문자와 소문자

Q . 문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요.

2-1. 나의 풀이

function solution(my_string) {
    let answer = ''
    for (const i of [...my_string]) {
        if (i === i.toUpperCase()) {
            answer += i.toLowerCase()
        } else {
            answer += i.toUpperCase()
        }
    }
    return answer;
}

2-2. 해설

1단계. 파라미터의 타입은 문자열이기에 이를 전개구문으로 전개한다.
2단계. 전개된 파라미터를 for of문으로 순환하며, 각 요소가 대문자인지, 아니면 소문자인지 if else문을 사용하여 구분하고, 대소문자를 바꿔준다.

2-3 다른 풀이 및 해설

function solution(my_string) {
    return [...my_string].map((el) => (el) === (el).toUpperCase() ? (el).toLowerCase() : (el).toUpperCase()).join("");
}

1단계. 파라미터의 타입은 문자열이기에 이를 전개구문으로 전개한다.
2단계. 배열의 요소에 변화를 주어야 하기 때문에 map메서드를 사용한다.
3단계. map으로 순환을 할 때, 삼항연산자를 이용하여, 요소의 대소문자를 판가름한 뒤, 대소문자를 바꿔준다.

3. 마무리

반복문을 사용하지 않는 코드가 더 가독성이 좋기 때문에 2가지 방식으로 다 풀어보며 학습하도록 하자!!
반복문이 아닌 코드를 단 번에 이해하는 것은 무리가 있으니, 답을 보더라도 천천히 그 원리를 익히고, 주말에 직접 그 방식을 적용하여 풀 수 있도록 하자.

프로그래머스 4-5 TIL

Wed, 05 Apr 2023 07:40:17 GMT

Day 14 1/4: 가까운 수

Q. 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요.

내 풀이

function solution(array, n) {
    array.sort((a,b) => a - b);
    let Sm  = array.map((el) => Math.abs((el) - n));
    return array[Sm.indexOf(Math.min(...Sm))];
}

해설

1단계. 파라미터로 주어진 n을 array의 전 요소들에 빼준 값의 절대값이 제일 작은 것이 n과 가장 가까운 수가 된다는 메커니즘을 파악한다.
2단계. 그 전에, 조건으로 가까운 수가 2개 이상일 경우, 더 작은 값을 반환하라는 조건이 있음을 파악한다.
3단계. 배열의 초기 요소들은 순서대로 있지 않기 때문에 sort를 사용하여 오름차순으로 바꿔주면, 가까운 수가 아무리 많아도 가장 작은 값을 반환한다는 것을 파악한다.
4단계. map을 이용하여 배열의 모든 요소에 n을 빼고 절대값을 씌우며, 이를 새로운 변수 Sm에 부여한다.
5단계. 배열인 Sm에 전개구문과 min을 사용하여 가장 가까운 값을 찾고, indexOf를 활용하여 그 수의 인덱스를 파악한다.
6단계. 파라미터 배열의 해당 인덱스가 n과 가장 가까운 작은 수이다.

Day 14 2/4: 369게임

Q. 머쓱이는 친구들과 369게임을 하고 있습니다. 369게임은 1부터 숫자를 하나씩 대며 3, 6, 9가 들어가는 숫자는 숫자 대신 3, 6, 9의 개수만큼 박수를 치는 게임입니다. 머쓱이가 말해야하는 숫자 order가 매개변수로 주어질 때, 머쓱이가 쳐야할 박수 횟수를 return 하도록 solution 함수를 완성해보세요.

내 풀이

function solution(order) {
    let answer = 0;
    let Turn = [...order + ""];
    for (let i =0 ; i <= Turn.length - 1; i++) {
        if (Turn[i] === "3" || Turn[i] === "6" || Turn[i] === "9"){
            answer += 1;
        }
    }
    return answer;
}

해설

1단계. 본 문제는 3,6,9를 찾는 3개의 조건식으로 풀어야 한다는 것을 파악한다.
2단계. 여러 방법이 있지만, 우선 풀 수 있는 반복문과 조건문을 사용하기로 결정했다.
3단계. 파라미터의 매개 변수는 숫자열이기에 다양한 메서드를 사용하는데 제약이 있어, 이를 문자열로 만들고 전개구문으로 낱개의 문자열로 전개한다.
4단계. 해당 문자열을 새로운 변수에 선언하고, 3,6,9인 요소를 찾는 반복문을 작성한다.

마무리

금일 풀었던 문제들은 정규식으로 상당히 간단하게 풀 수 있지만 아직 주인장이 정규식에 익숙치 않기에, 정규 수업시간에 제대로 배운 후, 3회독때 적용하여 풀어 보기로 하자.
초판에 어지럽게 풀어고 추후에 리팩토링 하는 것도 괜찮지만, 처음에 설계를 세밀하게 하고 바로 코드 작성에 들어가는 것이 학습에 더 도움이 될 것이라 생각된다.

프로그래머스 4-4 TIL

Wed, 05 Apr 2023 07:16:54 GMT

Day 13 3/4 : 중복된 문자 제거

Q. 문자열 my_string이 매개변수로 주어집니다. my_string에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 solution 함수를 완성해주세요.

내 풀이:

function solution(my_string) {
    return [...new Set(my_string)].join("");
}

해설:

new Set(arr)은 중복된 요소가 없는 객체를 반환해준다. 이를 전개구문과 새로운 배열로 감싸 배열의 형태로 만들어주며, 마지막에 join메서드로 하나의 문자열로 만들어준다. 참고로, 중복은 대소문자를 가리지 않고 동일하게 취급하여 처리한다.

Day 13 4/4 : 삼각형의 완성조건

Q. 삼각형의 세 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 세 변으로 삼각형을 만들 수 있다면 1, 만들 수 없다면 2를 return하도록 solution 함수를 완성해주세요.

내 풀이

function solution(sides) {
    sides.sort((a,b) => b - a)
    return sides[0] < sides[1] + sides[2] ? 1 : 2;
}

해설

1단계. 파라미터의 배열에 들어가있는 요소는 무조건 3개이며, 순서대로 정렬되어 있지 않다는 것을 파악한다.
2단계. 이 배열을 sort메서드를 이용하여 내림차순으로 정리하면, 가장 큰 변의 길이가 0번째 인덱스로 오게 된다.
3단계. 0번째 인덱스의 변과 다른 두 변의 합을 비교하는 삼항 연산자를 작성하여 마무리한다.

마무리

Set에 대해 자세히 알지 못해서 푸는데 상당히 고민했다. 본 내용은 정규수업에서 제대로 배운 뒤에 다시 한 번 풀어볼 것!!
화살표 함수를 자주 사용하여 익히도록 하자!!

멋사 4-4 TIL (JavaScript)

Tue, 04 Apr 2023 15:49:10 GMT

1. 템플릿 리터럴

1-1. 정의

내장된 표현식을 허용하는 문자열 리터럴이다. 쉽게 설명해서, 문자열 내에 이전에 선언된 변수를 그자체로 사용할 수 있게 해주는 리터럴 체계라고 생각하면 편하다.

1-2. 표현식

``안에 문자열을 작성하고, 변수는 ${}안에 작성하면 된다.

const x =10;
const y = 20;
const result = x * y;
console.log(`x값은 ${x}이고, y값은 ${y}이고 두개의 곱은 ${result}입니다.`);

1-3. 특징

기존에 이스케이프 코드인 \n을 사용하지 않고도 행간 줄바꿈 처리가 가능하다는 특징이 있다.

다만, 가독성이 떨어진다는 단점이 있다.

if (true) {
  if (true) {
      if (true) {
          console.log(`h
e
l
l
o
`)
      }
  }
}

2. Array

2-1. array의 특징

거의 const를 사용하여 표현한다. 여기서 변수가 가리키는 것은 배열 내부의 요소가 아닌, 배열의 틀 그 자체를 가리키기에, 내부 요소에 변화를 줄 수 있다. 이를 mutable(변형가능) 이라 한다.

문자열 또한 배열의 일부로 배열처럼 표현할 수는 있으나, 배열처럼 인덱스로 호출하는 것은 불가능하다. 이는 문자열이 immutable(불변함) 이기 때문이다.
```
const s ='hello world'
console.log(s[0])
s[0] = 'i' // error
```

배열의 프로퍼티가 숫자인 경우에는 오직 대괄호만으로 호출 할 수 있지만, 그 외에는 대괄호나 .을 찍어서 호출 할 수 있다.
```
arr[1] // O
arr.1 // X
arr.length // O
arr['length'] // O
```
배열은 순서가 있다. 배열의 순서를 index라고 하며, 이 순서로 호출하는 것을 indexing이라 한다. 그리고 배열안에 있는 값을 원소(element)라고 한다.
배열에 다른 원시타입과 객체타입을 포함할 수 있다. 즉, 배열안에 또다른 배열이 들어가 2차원 그 이상으로도 표현이 가능하다는 것이다.
```
const arr = [
 [1,2,3],
 [4,5,6],
 [7,8,9]
]
// arr[2][1]
// 8
```

2-2. pop(), push(), shift(), unshift()

해당 메서드들은 배열의 요소들을 빼거나 더하여 배열 원형을 바꾸는 메서드로, 기능이 겹칠 수 있으나, 추가적인 기능의 유무로 용도가 나뉜다.

pop() : 배열의 맨 마지막 요소를 추출하고, 추출한 값을 반환(return) 한다.

const arr = [1, 2, 3, 4, 5]
let lastValue = arr.pop()
arr // (4) [1, 2, 3, 4]
lastValue // 5

shift() : 배열의 맨 앞 요소를 추출하고, 추출한 값을 반환(return) 한다.

const arr = ["사과", "바나나", "수박"];
let firstValue = arr.shift();
arr // (2) ['바나나', '수박']
firstValue // '사과'

push() : 배열의 맨 마지막에 요소를 추가한다.

const arr = [1, 2, 3, 4, 5]
arr.push(6)
arr  // (6) [1, 2, 3, 4, 5, 6]

unshift() : 배열의 맨 앞에 요소를 추가한다.

const arr = ["사과", "바나나", "수박"];
arr.unshift("딸기","참외")
arr // (5) ['딸기', '참외', '사과', '바나나', '수박']

2-3. splice & slice

두 메서드 모두 배열의 범위를 정하여 그 범위의 요소들이 담긴 배열을 반환한다는 공통점인 기능을 하지만, splice의 경우, 원본에 영향을 주면서 작동 한다는 차이점이 있다.

arr.splice(start, deleteCount, items) : 인덱스 start 번째에서 부터 deleteCount개의 요소를 지우고, 그 자리에 items들을 넣는다.

const arr = [10, 20, 30, 40, 50]
const x = [1, 2, 3]
arr.splice(2, 2, ...x); // (2) [30, 40] // 잘려나간 것
arr // (6) [10, 20, 1, 2, 3, 50] // 배열이 바뀜
arr.splice(2, 2); // 2번째 인덱스에서 값 2개를 삭제. 삽입되는 값은 없음. //  [1, 2]
arr // [10, 20, 3, 50]

예외 : splice의 파라미터에 값이 1개만 들어갈 경우, start -1 번째 빼고 다 잘려나간다는 특이점이 있다.
```
const arr = [10, 20, 3, 50]
arr.splice(1);  // 0번째까지 남기고 뒤에는 다 날림  // [20, 3, 50]
arr // [10]
```

arr.slice(start, end) : 인덱스 start 번째에서 end - 1번째 까지의 요소들을 추출한다. 단, 원본은 바뀌지 않았다.

const arr = ["apple", "banana", "cherry", "durian", "elderberry"];
console.log(arr.slice(1, 4)); // (3) ['banana', 'cherry', 'durian']
console.log(arr)  // (5) ['apple', 'banana', 'cherry', 'durian', 'elderberry']
console.log(arr.slice(0)) // 전부 출력 // (5) ['apple', 'banana', 'cherry', 'durian', 'elderberry']

2-4. forEach & map

두 메서드 모두 배열의 요소들을 순환하는 기능을 하지만, map은 새로운 배열을 생성한다는 차이점이 있다.

arr.forEach((item, index) => ) : 콜백함수에 들어가는 파라미터가 item과 index이다.

// 배열안에 1~100까지 forEach로 넣는 방법
const arr1 = Array(100).fill(0)
const arr2 = []
arr1.forEach((item,index) => arr2.push(index + 1))

arr.map((v,i) => ) : 콜백함수에 들어가는 파라미터가 value와 index이다.

// map으로 1~100까지인 배열 만들기
const arr = Array(100).fill(0)
arr.map((v,i) => i +1)

2-5. filter()

filter((v,i) => v)는 value 값에 원하는 조건을 입력하여, 해당 요소만 추출한 새로운 배열을 만들어준다. 원본 배열은 그대로 유지된다.

// 짝수 찾는 방법
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.filter(function(el){
  return el % 2 === 0
}) // (5) [2, 4, 6, 8, 10]
arr // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2-6. reduce((a,c) => a + c, 0)

reduce()는 보통 배열의 요소들을 더할 때 사용되는 메서드로, a는 누적된 값(accumulator), c는 현재값(currentValue)을 의미하며, 맨 뒤에 inital value 0이 반드시 들어가야한다.
```
const arr = [1, 2, 3, 4, 5]
arr.reduce((a,c) => a + c, 0)  // 15 // 0은 반드시 넣어라
```

2-7. includes()

arr.includes(n)은 arr 배열의 요소에 n이 포함되어 있는지를 boolean 값으로 반환해주는 메서드로, 요소의 타입과 컨텐츠가 정확하게 n과 일치해야 true를 반환한다.
```
const arr = ['hello' , 'world', 10 , 'seunggyu']
arr.includes('hello') // true
arr.includes('h3l') // false
arr.includes('10')  // false
```

2-8. join()

arr.join('n')은 배열 arr의 문자열 요소들을 'n'으로 이어 하나의 문자열로 반환해준다.
```
const arr = ['hello' , 'world', 'seunggyu']
arr.join("!")  // 'hello!world!seunggyu'
```

2-9. sort()

arr.sort()는 배열 arr을 오름차순 또는 내림차순으로 정리하여 원본을 변형시키는 메서드로, 주로 sort안에 다음과 같은 화살표 함수와 함께 쓰기에 암기해주는 것이 좋다. 참고로, sort((a,b) => a - b)메서드의 작동 원리는 a,b 두 요소의 차를 구해 0보다 작거나 같으면 그대로 유지하며 양수인 경우 b가 앞으로 가면서 순서를 잡는다. 물론, 내림차순은 이의 반대원리로 작동된다. + 폴더에 실무사용코드가 있으므로 참고!!
```
// 오름차순
const nums = [3, 1, 11, 8, 10];
console.log(nums.sort((a, b) => a - b));
nums // (5) [1, 3, 8, 10, 11]
// 내림차순
const nums = [3, 1, 11, 8, 6];
console.log(nums.sort((a, b) => b - a));
nums // (5) [11, 8, 6, 3, 1]
```

3. object(객체)

유사배열객체로, 중괄호 안에 key : value의 형태로 요소들을 정렬하는 참조 타입이다. 이는 재할당으로만 변경이 가능한 원시타입과 달리, 변수가 참조를 하는 타입이기에 동적으로 프로퍼티를 생성 및 갱신을 할 수 있어 유지보수에 상당히 유용하다. 참고로 프로퍼티는 key : value를 의미한다.

// 객체 사용 예시
const test = {
  group : ['ein', 'zwei', 'drei', 'vier' ,'funf'],
  duty : "Go Home and GEt Rest",
  trouble : function (){
      return "After School Class"
  }
}
// value가 함수인 경우는 key도 함수의 형태로 작성해야 호출이 가능하다.
test.trouble() // After School Class
// 1. 동적 추가
test.solution = "pass_exam"
test //  {group: Array(5), duty: 'Go Home and GEt Rest', solution: 'pass_exam', trouble: ƒ}
// 2. 동적 갱신
test.duty = "work_hard"
test.duty // "work_hard"
// 3. 동적 삭제
delete test.trouble;
test //  {group: Array(5), duty: 'work_hard', solution: 'pass_exam'}

3-1. hasOwnProperty

객체를 돌며 해당 프로퍼티 키의 존재 유무를 boolean값으로 반환한다. 여기서 유의할 점은 객체의 프로퍼티 키는 문자열 형태로 작성하도록 한다. 단어끼리 합쳐서 사용하는 메서드는 대부분 앞글자를 대문자로 작성하여 구별한다.(has'O'wn'P'roperty)
```
console.log(test.hasOwnProperty('lunch')); // false
console.log(test.hasOwnProperty('trouble')); // true
```

3-2. 프로퍼티 호출방식

aespa.keys() 와 같은 다른언어의 사용 방식이 아닌 Object를 붙여 사용한다는 것이 중요하다.

console.log(Object.keys(test))  // (3) ['group', 'duty', 'trouble']
console.log(Object.values(test))  // (3) [Array(5), 'Go Home and GEt Rest', ƒ]

4. 함수 function()

4-1. 함수의 특징 : 왜 함수를 사용하는가?

1. 재사용성이 높아짐

코드를 작성하다보면 같은 명령 코드를 여러 곳에서 사용해야하는 경우가 생긴다. 그때마다 장황하게 명령코드들을 작성하면, 가독성이 현저하게 떨어지며, 부팅속도 또한 늦어질 수 밖에 없다. 함수는 반복되는 코드들을 간결하게 정리하여 재사용성을 높인다.
```
function Hock(){
  console.log('hello')
  console.log('hello')
  console.log('hello')
  console.log('hello')
  console.log('hello')
  console.log('hello')
  console.log('hello')
}
Hock()  // Hock()하나만 있으면 위의 7줄의 코드가 실행된다.
Hock()
Hock()
```

2. 유지보수가 용이함

함수는 처음 선언할 때만 자세하게 기술하고, 나머지 함수들은 콜백 함수들이기에, 유지보수가 필요하면 최상단의 첫번째 함수만 수정하면 된다.
```
function 밥짓기() {
  코드...  // 여기만 수정하면 유지보수가 끝난다.
}
밥짓기()
밥짓기()
밥짓기()
밥짓기() * 100
```

3. 구조 파악이 용이함

함수의 이름을 정할 때, 그 함수의 역할을 유추할 수 있는 이름을 지어주면, 협업이나 유지보수를 할 때, 해당 함수의 역할이나 전체적인 코드의 구조를 파악을 보다 수월하게 할 수 있다.
```
밥짓기() // 해당 함수가 밥을 짓기 위한 함수라는 것을 파악할 수 있음
국끓이기()
테이블 셋팅하기()
반찬덜기()
// 해당 코드는 식사준비를 위한 코드라는 것을 알 수 있음
```

4-2. 함수의 구조 및 종류

1. 함수 선언문(일반적인 함수형태)

가장 보편적인 함수의 형태로, 함수의 이름과 파라미터로 구성이 된다.
파라미터(parameter)는 함수를 선언할때 사용하는 매개변수를 의미하며, 아규먼트(argument)는 함수에 입력받는 실제 값을 의미한다.
```
function ein(a,b) {  // a와 b가 본 함수의 파라미터
  let z = a + b;
  return Z ** 2
}
console.log(ein(1,2)) // 1, 2가 해당 함수의 아규먼트
```

2. 화살표 함수(주로 실무에서 사용!!)

표현방식이 간단하여 실무의 거의 모든 함수들이 화살표함수를 사용한다.

함수의 내부에서 한 줄 표현식만 반환하면, return 키워드 없이 한 줄로도 표현이 가능하다.

const zwei = (a,b) => (a + b) ** 2
// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략가능
const drei = a => a ** 2

3. 익명 함수(이름 없이 선언하는 함수)

함수를 선언할 때, 따로 이름을 선언하지 않는 것을 의미한다.

이 경우, 변수명을 선언하여 사용한다.

cosnt vier = function (a,b) {
  let z = a + b;
  return Z ** 2
}
console.log(vier(1,2))  // 변수로 선언하여 다양하게 사용함

4. 콜백함수

외부에서 선언된 함수를 아규먼트에 작성하여 끌어오는 함수
함수의 순수성을 유지시키고, 코드 간결화에 큰 기여를 한다.

함수의 순수성은 하나의 함수에 하나의 함수만 작성되어 있는 것을 의미한다.

function funf(a,b,c) {
  let z = c(a,b) + c(a,b) // 여기서 ein(a,b)를 쓰면 함수의 순수성이 깨지는 것
  return z * 2
}
funf(7, 3, ein) // ein은 외부에서 선언된 함수명이다.

4-3. return과 console.log의 차이

1. return

return은 지시자라고 불리며, return을 만나면, 함수는 즉시 실행을 멈추고 함수를 호출하는 곳에 반환 값을 할당한다.
return이 선언되지 않는 빈 함수는 undefined를 반환한다.
return만 선언되고 반환값이 없는 함수도 undefined를 반환한다.

return undefined도 undefined를 반환한다.

function hello1(){
  //빈 코드
}
function hello2(){
  return
}
function hello3(){
  return undefined
}
hello1() // undefined
hello2() // undefined
hello3() // undefined

2. console.log

console은 웹 브라우저의 디버깅 콘솔에 접근 할 수 있게 하는 메서드들 제공하는 객체로, 아무전역객체에서 접근이 가능하다.
log는 웹 콘솔에 메시지를 출력해주는 메서드이다.

이 둘을 종합하면, console.log는 작성된 컨텐츠를 웹 콘솔에 출력해주는 메서드이기에, 함수내의 return과 같은 역할을 하지 못한다.

function hello4(){
  console.log('hello')
  console.log('hello')
  console.log('hello')
  return    // undefined 반환
  console.log('hello')
  console.log('hello')
  console.log('hello')
}
hello4()  // hello * 3

4-4. JavaScript 함수의 결점

아규먼트가 파라미터보다 적거나 많아도 오류를 출력하지 않는다는 단점이 있다.

function 함수1(a, b, c){
  return a + b + c
}
함수1(10, 20, 30, 40) // 60 // error가 발생하지 않는다. 
함수1(10, 20)  // 30 // error가 발생하지 않는다.

4-5. 함수의 특이점

파라미터에 값을 미리 선언할 수 있다.

단, 아규먼트에서 값을 고정하더라도, 반환값 변수의 순서대로 고정된다.

function 함수1(a=10, b=20, c=30){
  return a + b + c
}
함수1(1, 1) // 32
// a와 c에 들어갈 것이라 생각했지만, a와 b에 들어감
function 함수1(a=10, b=20, c=30){
  return a + b + c
}
함수1(a=1, c=1) // 32

4-6. 즉시 실행 함수

(function() {
    console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
  })();

function 함수(){

}

함수()

Daniel-Q.log

Next.js 를 왜 공부해야하니?

목차

1. Next.js란 무엇인가?

2. Next.js가 제공하는 주 기능

3. Next.js를 통해 작업할 프로젝트

1. Next.js란 무엇인가?

1-1. 정의 : React로 만들어진 서버 사이드 렌더링(SSR) 프레임 워크

1-2. SSR이란 : 서버측에서 브라우저에서 사용될 화면(view)를 제공해주는 것

1-3. 풀스택 기반의 프레임 워크

2. Next.js가 제공하는 특이점

2-1. pre-rendering

2-2. dynamic route ([])

2-3. code spliting(코드 분할)

3. Next.js를 통해 작업할 프로젝트

Project_Touched_Remaster

목차

1. 프로젝트 기획의도

2. 프로젝트에 사용된 기술스펙

3. 프로젝트 구성

3-1. Common 폴더

3-2. Pages 폴더

4. 프로젝트 후기

1. 프로젝트 기획의도

2. 프로젝트에 사용된 기술스펙

1. 언어 : TypeScript

2. 라이브러리 : React

3. 상태관리 : Recoil

3. 프로젝트 구조

3-1. Common/Button

3-2. Common/Footer

3-3. Common/GuideSection

3-4 . Common/Header

3-5. Common/Modal

3-6. Common/Wrapper

3-7. Pages/FirstPage

3-8. Pages/BackgroundPage

3-9. Pages/InfoPage

3-10. Pages/WritingPage

3-11. Pages/ImagePage

3-12. Pages/BGM_Page

3-13. Pages/CheckPage

3-14. Pages/TestPage

4. 프로젝트 후기

4-1. 장점

4-2. 아쉬운 점

OG(Open Graph)

1. 정의

2. 목적

3. 효과

4. 사용 예시

5. 사용법

6. 참고

1. Open Graph 시연 사이트

2. 카카오톡 캐시 초기화 사이트

이미지 저장 창고

1. Project_Touched_Remaster

1-1. Open Graph 용 이미지

1-1. 600*315

1-2. 326*305

2. Interview_Summary

2-1. Open Graph 용 이미지

🔑React의 상태관리란 무엇인가?

목차

1. 주제 선정 이유

2. 상태관리란

3. React의 상태관리

1. 주제 선정 이유

2. 상태관리란

2-1. 상태관리의 정의

2-2. 상태의 종류

3. React의 상태관리

3-1. Context API

3-2. Redux

3-3. Recoil 라이브러리

라이브러리란 무엇인가?

목차

1. 주제 선정 이유

2. 라이브러리란

3. 라이브러리와 프레임 워크의 차이점