189 - Awaited

// qs
type MyAwaited = any
// answer
type MyAwaited<T extends Promise<any>> = T extends Promise<infer U> ? (U extends Promise<any> ? MyAwaited<U> : U) : never;

268 - If

// qs
type If<C, T, F> = any
// answer
type If<C extends boolean, T, F> = C extends true ? T : F;
// test-case
type A = If<true, 'a', 'b'>  // expected to be 'a'
type B = If<false, 'a', 'b'> // expected to be 'b'

533 - Concat

// qs
type Concat<T, U> = any
// answer
type Concat<T extends any[], U extends any[]> = [...T, ...U]
// test-case
type Result = Concat<[1], [2]> // expected to be [1, 2]

898 - Includes

// qs
type Includes<T extends readonly any[], U> = any;
// answer
type Includes<T extends readonly any[], U> = T extends [infer P, ...infer K] ? (Equal<P, U> extends true ? true : Includes<K, U>) : false;
// test-case
type isPillarMen = Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Dio'> // expected to be `false`
// 요 부분은 Equal 타입이 구현되어 있어야 동작... 애매...

3057 - Push

// qs
type Push<T, U> = any
// answer
type Push<T extends any[], U> = [...T, U]
// test-case
type Result = Push<[1, 2], '3'> // [1, 2, '3']

3060 - Unshift

// qs
type Unshift<T, U> = any
// answer
type Unshift<T extends any[], U> = [U, ...T]
// test-case
type Result = Unshift<[1, 2], 0> // [0, 1, 2,]

3312 - Parameters

// qs
type MyParameters<T extends (...args: any[]) => any> = any
// answer
type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;

타입스크립트 관련 재밌는 Challenge 발견!! 🤔 난이도는 warm-up, easy, medium, hard, extreme 총 5단계로 나뉘어져있고 하나씩 진행하며 글 남겨보려 합니다..!! 참고자료 및 출처 👉 챌린지 사이트

warm-up

13 - Hello World

// qs
type HelloWord = any
// answer
type HelloWord = string

easy

4 - Pick

// qs
type MyPick<T, K> = any
// answer
type MyPick<T, K extends keyof T> = {
  [P in K]: T[P]
}
// test-case
interface Todo {
  title: string
  description: string
  completed: boolean
}
type TodoPreview = MyPick<Todo, 'title' | 'completed'>
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

7 - Readonly

// qs
type MyReadonly<T> = any
// answer
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K]
}
// test-case
interface Todo {
  title: string
  description: string
}
const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}
todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

11 - Tuple to Object

// qs
type TupleToObject<T extends readonly any[]> = any
// answer
type TupleToObject<T extends readonly string[]> = {
  [K in T[number]]: K
}
// test-case
const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const
type result = TupleToObject<typeof tuple> // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

14 - First of Array

// qs
type First<T extends any[]> = any
// answer
type First<T extends any[]> = T extends [] ? never : T[0]
// test-case
type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]
type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

18 - Length of Tuple

// qs
type Length<T extends any> = any
// answer
type Length<T extends readonly string[]> = T['length']
// test-case
type tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const;
type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] as const;
type teslaLength = Length<tesla>  // expected 4
type spaceXLength = Length<spaceX> // expected 5

43 - Exclude

// qs
type MyExclude<T, U> = any
// answer
type MyExclude<T, U> = T extends U ? never : T
// test-case
type T0 = MyExclude<"a" | "b" | "c", "a"> // expected "b" | "c"
type T1 = MyExclude<"a" | "b" | "c", "a" | "b"> // expected "c"
type T2 = MyExclude<string | number | (() => void), Function> // expected string | number

링크

풀이

1. 고양이와 개는 몇 마리 있을까

SELECT ANIMAL_TYPE, COUNT(ANIMAL_TYPE) AS count 
FROM ANIMAL_INS 
GROUP BY ANIMAL_TYPE 
ORDER BY ANIMAL_TYPE;

2. 루시와 엘라 찾기

SELECT ANIMAL_ID, NAME, SEX_UPON_INTAKE 
FROM ANIMAL_INS 
WHERE NAME 
IN ('Lucy', 'Ella', 'Pickle', 'Rogan', 'Sabrina', 'Mitty')
ORDER BY ANIMAL_ID;

3. 최솟값 구하기

SELECT MIN(DATETIME) FROM ANIMAL_INS;

4. 동명 동물 수 찾기

SELECT NAME, COUNT(NAME) AS COUNT 
FROM ANIMAL_INS
GROUP BY NAME
HAVING COUNT(NAME) > 1
ORDER BY NAME;

5. 이름에 el이 들어가는 동물 찾기

SELECT ANIMAL_ID, NAME 
FROM ANIMAL_INS 
WHERE NAME LIKE '%el%' AND ANIMAL_TYPE = 'Dog' 
ORDER BY NAME;

6. 동물 수 구하기

SELECT COUNT(ANIMAL_ID) AS count FROM ANIMAL_INS;

7. 입양 시각 구하기(1)

SELECT date_format(DATETIME, '%k') AS HOUR, COUNT(date_format(DATETIME, '%k')) AS COUNT
FROM ANIMAL_OUTS
GROUP BY HOUR
HAVING(HOUR > 8) AND (HOUR < 20)
ORDER BY HOUR * 1;

8. NULL 처리하기

SELECT ANIMAL_TYPE, IFNULL(NAME, 'No name') AS NAME, SEX_UPON_INTAKE
FROM ANIMAL_INS
ORDER BY ANIMAL_ID;

9. 중성화 여부 파악하기

SELECT ANIMAL_ID, NAME, 
CASE 
    WHEN SEX_UPON_INTAKE LIKE 'Neutered%' THEN 'O'
    WHEN SEX_UPON_INTAKE LIKE 'Spayed%' THEN 'O'
    ELSE 'X'
END AS '중성화'
FROM ANIMAL_INS
ORDER BY ANIMAL_ID;

10. 중복 제거하기

SELECT COUNT(DISTINCT NAME) AS count FROM ANIMAL_INS;

11. DATETIME에서 DATE로 형 변환

SELECT ANIMAL_ID, NAME, date_format(DATETIME, '%Y-%m-%d') AS '날짜'
FROM ANIMAL_INS
ORDER BY ANIMAL_ID;

링크

풀이

1. 모든 레코드 조회하기

SELECT * FROM ANIMAL_INS;

2. 최댓값 구하기

SELECT MAX(DATETIME) FROM ANIMAL_INS;

3. 이름이 없는 동물의 아이디

SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NULL;

4. 역순 정렬하기

SELECT NAME, DATETIME FROM ANIMAL_INS ORDER BY ANIMAL_ID DESC;

5. 이름이 있는 동물의 아이디

SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NOT NULL;

6. 아픈 동물 찾기

SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE INTAKE_CONDITION IN ('Sick');

7. 어린 동물 찾기

SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE INTAKE_CONDITION NOT IN ('Aged');

8. 동물의 아이디와 이름

SELECT ANIMAL_ID, NAME FROM ANIMAL_INS ORDER BY ANIMAL_ID;

9. 여러 기준으로 정렬하기

SELECT ANIMAL_ID, NAME, DATETIME FROM ANIMAL_INS ORDER BY NAME ASC, DATETIME DESC;

10. 상위 n개 레코드

SELECT NAME FROM ANIMAL_INS ORDER BY DATETIME ASC LIMIT 1;

• 신규 아이디 추천

생각한 부분

1. 단계가 7개나 된다... 하나하나 해결하자...
2. 전체적으로 적용되는 규칙이 3가지 있다! 빠트리지 말고 확인하자!
3. 정규표현식 공부하자...!

내가 쓴 코드

function solution(new_id) {
  let answer = ''
  answer = new_id
    .toLowerCase()
    .replace(/[^a-z0-9-_.]/g, "")
    .replace(/\.{2,}/g, ".")
    .replace(/^\./g, "")
    .replace(/\.$/g, "")
  if (answer.length === 0) answer = "a"
  if (answer.length >= 16) answer = answer.substring(0, 15)
  answer = answer.replace(/\.$/g, "") // 위에서 한 번 처리 했다고 안해주면 규칙에서 어긋난다 !

  while (answer.length <= 2) {
    answer = answer + answer[answer.length - 1]
  }
  return answer
}

0. 제한사항 - 이전 스킬을 스킵하고 다음 스킬을 배울 수 없다. 예를들어 skill "CBD"가 주어졌을 때, C를 배우지 않으면 B, D는 가능하지 않다. BD, B, D => 안되는 경우 CD => 얘도 안됨...왜? B를 배우지 않고 D를 배울 순 없다. CB => 가능한 경우

1. skill_trees에서 skill에 주어진 알파벳을 제외한 나머지 부분을 어떻게 삭제 할 것인가...? => filter와 includes로 새로운 배열을 만들어 해결, 마지막에 join 메써드로 배열을 문자열로...! => 나머지 부분을 왜 삭제해야하나...? 순서를 비교하기 위해서 !

2. skill을 substring 메써드로 앞에서부터 잘라서 새로만든 문자열과 비교...!

내가 쓴 코드

function solution(skill, skill_trees) {
  const toArr = skill.split('')
  let result = 0
  let toStr = ''
  for (let i = 0; i < skill_trees.length; i++) {
    toStr = skill_trees[i].split('').filter(value => toArr.includes(value)).join('')
    if (toStr === skill.substring(0, toStr.length)) {
      result++
    }
  }
  return result
}

1. 주어진 조건 - 다리의 길이, 다리 위에 한 번에 올라갈 수 있는 무게, 트럭의 무게, 트럭은 1초에 1만큼 움직임 (ex. 다리의 길이가 3이면 트럭이 다리를 다 지나가는데 최소 4초가 걸림)
2. return 값은 모든 트럭이 다리를 다 지나가는 최소한의 시간
3. 빈 배열(arr)에 다리의 길이만큼 0을 넣어준다... 왜? 트럭이 다리 위를 지나가는 시간을 체크하기 위해서!
4. 다리 위에 올라 올 트럭이 남지 않은 경우 arrSum이 0이 될 때까지 arr.pop()만 진행(첫 번째 if문 실행 ❌) 시간(answer)을 체크한다 ! (다리에 남은 트럭을 빼주기만 하는 과정)
5. 아직 다리 위에 올라올 트럭이 남은 경우 (truck_weights.length !== 0) 다음 트럭이 다리 위에 올라 올 수 있을지 없을지 체크 ! 5-1. 올라올 수 없는 경우 (arrSum + truck_weights[0] > weight) 다리에 0 하나 unshift로 추가 5-2. 올라올 수 있는 경우 truck_wieghts 배열에 맨 앞에서 하나 뽑아 다리에 올려주고, 다리 무게도 추가해 준다.
6. 반복

내가 쓴 코드

function solution(bridge_length, weight, truck_weights) {
  var answer = 0;
  const arr = [] 
  let arrSum = 0

  for (let i = 0; i < bridge_length; i++) {
    arr.push(0)
  }

  let leftPop = truck_weights.shift() 
  arr.pop()
  arr.unshift(leftPop)
  arrSum += leftPop
  answer++
  // 이 부분에 console.log(arr, arrSum, answer) 찍어보면 순서가 명확히 보입니다!

  while(arrSum) { 
    arrSum -= arr.pop()
    if (truck_weights.length !== 0) {
      if (arrSum + truck_weights[0] > weight) {
      arr.unshift(0)
    } else {
        leftPop = truck_weights.shift()
        arrSum += leftPop
        arr.unshift(leftPop)
      }
    }
    answer++
    // 이 부분에 console.log(arr, arrSum, answer) 찍어보면 순서가 명확히 보입니다!
  }
  return answer;
}

프로젝트 소개 🤔

• NAS 제조사인 Synology 사이트의 community 부분을 클론 코딩 하였습니다.
• Github
• 영상

개발 기간 🤔

• 2021년 1월 11일 ~ 2020년 2월 4일(25일)

팀원 🤔

• 프론트 3명 (김찬영(PM), 조아람, 최용석(나))
• 백엔드 1명 (이수한)

기술 스택 및 구현 기능 🤔

프론트엔드

• React (CRA, Functional Component)
• React Hook
• React Router
• Moment.js
• Styled-components
• Ant Design

구현 기능

제가 구현 한 부분은 ✅, 팀원이 구현 한 부분은 👏🏻

1. 회원가입 / 로그인 유효성검사 👏🏻
2. 메인 페이지 ✅
3. 게시판 CRUD 👏🏻
4. 댓글, 댓글의 댓글 생성 및 삭제 👏🏻
5. 솔루션 채택 기능 👏🏻

담당한 기능

제가 맡은 부분은 메인 페이지(2) 입니다.

• Filtering
• Pagination
• 백엔드에 등록되어 있는 포스팅 시간과 현재 시간의 차이를 통해 몇 분, 몇 시간, 몇 일 전 구현(moment.js)
• 모든 페이지에 공통적으로 사용되는 Nav, Footer 구현
• Categories, Login 되었을 때 모달창 구현

아쉬운 부분

설계를 철저히 할 것인가? VS 많은 페이지를 만들 것인가?

이번 프로젝트에서 기능적으로 어려운 부분은 크게 없었습니다. 다만, 이번 프로젝트는 Atomic Design Pattern을 적용하고, Ant Design을 사용하여 웹페이지를 완성하는 것이 과제였습니다. 처음으로 프로젝트 설계에 대한 고민을 하고, 컴포넌트 하나를 만들어도 어떻게 하면 재사용할 수 있을지 고민하느라 일주일 넘는 시간을 페이지 분석, Atomic Design이 어떤 것인가에 대해 시간을 보냈습니다. 결과적으로 많은 페이지, 기능을 만들진 못했지만 프론트엔드의 설계에 대해 고민해 볼 수 있었던 좋은 기회였습니다. 또한, 이번 프로젝트에서는 UI 컴포넌트를 독립적으로 볼 수 있는 Storybook, 타입을 지정할 수 있는 TypeScript를 사용할 수 없었지만 다음 프로젝트에는 꼭 적용해 보고 싶습니다!

기억하고 싶은 부분

JSX에서는 자바스크립트 조건문처럼 if나 switch문으로 처리가 불가능합니다... 일반적으로는 삼항연산자, &&로 조건을 사용하곤 하는데 저는 3가지 조건으로 구분하여 return 해줬어야 했기 때문에 즉시발동함수(IIFE)를 통해 조건문을 처리 하였습니다. 참고자료

파일 트리 구조

├── Components │   ├── Atoms │   │   ├── CardButton.js │   │   ├── CatListCard.js │   │   ├── CategoryButton.js │   │   ├── CategorySubButton.js │   │   ├── FooterAnchor.js │   │   ├── FormLayout.js │   │   ├── HeaderButton.js │   │   ├── Input.js │   │   ├── MainBannerDescription.js │   │   ├── MainBannerTitle.js │   │   └── SectionTitle.js │   ├── Molecules │   │   ├── CardCollection.js │   │   ├── CatListMain.js │   │   ├── CatListTop.js │   │   ├── CategoriesItemInfo.js │   │   ├── CategoriesItemInfoSub.js │   │   ├── CategoryDropDown.js │   │   ├── HeaderLogo.js │   │   ├── HeaderMenu.js │   │   ├── HeaderSignin.js │   │   ├── LoginLayout.js │   │   ├── MainBannerDescriptions.js │   │   ├── MainCard.js │   │   └── SignUpLayout.js │   └── Organisms │   ├── Categories │   │   └── Categories.js │   ├── CategoryListLayout │   │   └── CategoryListLayout.js │   ├── Discussions │   │   └── Discussions.js │   ├── Footer │   │   └── Footer.js │   ├── Header │   │   └── Header.js │   └── MainBanner │   └── MainBanner.js ├── Define │   ├── Constant.js │   └── Enum.js ├── Enum.js ├── Pages │   ├── CategoryBoard │   │   ├── Board.css │   │   ├── CategoryBoard.js │   │   ├── CategoryForm.js │   │   ├── CategoryHeader.js │   │   └── CategoryPost.js │   ├── CategoryList │   │   └── CategoryList.js │   ├── Login │   │   └── Login.js │   ├── Main │   │   └── Main.js │   ├── MyPage │   │   └── MyPage.js │   ├── Signup │   │   └── Signup.js │   └── Users │   ├── BoardDetail.js │   ├── CommentReply.js │   ├── CommentView.js │   ├── CommentWrite.js │   ├── EditBoard.js │   ├── EditUser.js │   ├── LikeDisLike.js │   ├── SingleComment.js │   └── View.js ├── Routes.js ├── Styles │   ├── GlobalStyles.js │   └── Theme.js ├── index.js └── store ├── actions │   └── index.js └── reducers └── index.js

23 directories, 58 files

느낀점...

• 기업협업 나갔던 에이블스토어에 대해 말씀 드리고 싶습니다. 개인적으로는 앞으로의 제 개발 인생에 정말 큰 도움이 되었다고 생각합니다. 10년차 개발자 분을 직접만나 이야기 나눠볼 수 있는 기회가 흔한 것이 아니었고, 저희의 고민들을 다 들어주시고, 저희의 입장에서 항상 말씀 해 주셨습니다. 기업협업 나간 첫 날 차장님 께서 해주셨던 말씀이 참 기억에 남습니다. "철학, 전략, 툴을 항상 고민해야한다. 툴은 나머지 두 개 보다 중요도가 떨어진다.", "항상 그걸 왜 그렇게 썼는지 고민하는 것이 중요하다." 너무 좋은 말씀들을 25일 동안 들었고 정말 감사하다고 다시 한 번 전하고 싶습니다!

프로젝트 소개 🤔

• Tway 항공 공식홈페이지의 메인, 로그인 & 회원가입, 예매페이지, 탑승자 정보 페이지 등을 학습 목적으로 클론코딩 하였습니다.
• Github
• 영상

개발 기간 🤔

• 2020년 12월 28일 ~ 2021년 01월 08일(12일)

팀원 🤔

• 프론트 4명 (나(PM), 임대호, 김찬영, 강경오)
• 백엔드 2명 (문승희, 최선우)

기술 스택 및 구현 기능 🤔

프론트엔드

• HTML
• JavaScript
• React(CRA, Functional Component)
• hook
• Sass
• Redux
• styled-component

구현 기능

제가 구현 한 부분은 ✅, 팀원이 구현 한 부분은 👏🏻

1. 회원가입(소셜 로그인) / 로그인 페이지 👏🏻
2. 메인 페이지 👏🏻
3. 항공권 예매 페이지 ✅
4. 탑승자 정보 페이지 👏🏻

담당한 기능

제가 맡은 부분은 항공권 예매 페이지(3) 입니다.

• 함수형 컴포넌트, React hooks를 사용하여 state관리
• useEffect, keyframes로 로딩스피너 구현
• 백엔드에서 fetch 함수로 받아온 데이터를 화면 UI에 맞게 가공
• 협업 과정에서 나타날 수 있는 Git conflict 해결, Git squash, rebase 사용요령 습득
• styled-component의 theme, GlobalStyles 관리 및 props 사용을 통한 UI 변화
• 백엔드에 등록되어 있는 출발 시간, 도착 시간 차이를 통한 UI 구성 (moment.js)

아쉬운 부분

전역으로 상태를 관리할 수 있는 방법(Context API, 리덕스)을 알았다면... T'way 홈페이지가 항공 예매 웹사이트인 만큼 예매 플로우를 구현하려 정말 노력을 많이 했습니다. 구현을 하다보니 메인 페이지에 썼던 상태 값들이 백엔드와 통신 없이 예매 페이지에서도 필요한 경우가 많았습니다. 이러한 문제를 해결하기 위해 전역으로 상태를 관리할 수 있는 방법을 찾아야 했습니다. 결국 리덕스를 사용 하였지만 사실 제가 정확하게 알고 썼다고 자부할 수 없었습니다. 이제 필요성을 알았으니 다음 프로젝트에서 만약 상태를 전역으로 관리해야 한다면 Context API, 리덕스 둘의 차이점을 정확하게 알고 목적에 맞게 사용할 수 있도록 하겠습니다.

기억하고 싶은 코드

느낀점...

• 이전 프로젝트에서는 branch만 각각 파서 commit을 여러 번 남기며 Github에 push 하였는데, 이번엔 Git rebase, squash를 통해 commit을 하나만 남겨야 한다는 과제를 받았습니다. 처음엔 어렵고, 잘못하면 commit이 다 날라갈 수도 있고(옆 동기분께서 직접 보여주셨습니다...), 시간여행에 빠질 수 있는(본인이 원하지 않는 commit 상태로 돌아간 경우) rebase, squash를 왜 하나 생각했습니다! 그렇지만, 사실 지금의 프로젝트 크기가 아니라 하나의 repository에 100명, 200명 아니면 그 이상의 개발자들이 commit을 남긴다면 참 관리하기 힘들겠구나... 라는 생각이 들었습니다. Git에 대해 조금 더 공부할 필요성을 느꼈습니다!!

프로젝트 소개 🤔

• 강아지 사료를 전문적으로 제공하는 외국 커머스 사이트 클론 코딩
• Github
• 영상

개발 기간 🤔

• 2020년 12월 14일 ~ 2020년 12월 24일(11일)

팀원 🤔

• 프론트 3명
• 백엔드 2명

기술 스택 및 구현 기능 🤔

프론트엔드

• React.js(class component)
• React Router
• Sass/Scss

구현 기능

제가 구현 한 부분은 ✅, 팀원이 구현 한 부분은 👏🏻

1. 회원가입 / 로그인 페이지 👏🏻
2. 메인 페이지 👏🏻
3. 상품 리스트 페이지 ✅
4. 상품 디테일 페이지 👏🏻
5. 장바구니 👏🏻
6. 전체상품 search 페이지 ✅
7. 리뷰 페이지 👏🏻

제가 맡은 부분은 상품 리스트 페이지(3), 전체상품 search 페이지(6) 입니다. 특히, 상품 리스트 페이지의 경우 category가 바뀔 때 마다 다른 상품의 데이터를 받아올 수 있도록 코드를 작성 하였고, title 기준 오름 / 내림차순, price 기준 오름 / 내림차순 정렬 할 수 있도록 로직을 구성했습니다.

아쉬운 부분

상품 리스트는 총 3가지 경우로 분리되었습니다. (일반 상품, 세일 하는 상품, 재고가 없는(Sold Out) 상품) 세 가지 컴포넌트를 따로 만들어 조건을 걸어 렌더링 해주었는데, 세 가지 컴포넌트에도 서로서로 겹치는 부분이 많았습니다. 이에, 세 가지 컴포넌트에 공통적인 부분을 하나의 컴포넌트로 만들고, 달라지는 부분만 조건을 다르게 걸어 렌더링 했다면 조금 더 반복되는 코드가 줄어들었을 거라 생각합니다.

기억하고 싶은 부분 1

카테고리를 구성할 때 select, option Tag를 사용하여 하였습니다. 문제는! 제가 페이지를 새로고침 했을 때 제가 선택한 카테고리에 있지 않고, 항상 첫 카테고리로 UI가 바뀌는 것을 확인할 수 있었습니다. 이 부분에서 공식문서의 중요성을 한 번 더 느낄 수 있었습니다. 제가 참고한 부분은 https://ko.reactjs.org/docs/forms.html 의 select 태그 부분입니다. 상품 카테고리가 바뀔 때 마다 option tag의 value부분에 사용 했던 값을 setState 해주고, 그 값을 select tag의 value부분에 할당 했습니다.

기억하고 싶은 부분 2

product.price.toLocaleString('en-US', {
                  style: 'currency',
                  currency: 'EUR',
                })

가격을 받아 원하는 형식으로 처리해주기 위해서 toLocaleString 메서드를 사용하였습니다. mdn 사이트에서 참고 하였습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString

파일 트리 구조

├── Components │   ├── Footer │   │   ├── Footer.jsx │   │   └── Footer.scss │   ├── MainHeader │   │   ├── MainHeader.jsx │   │   ├── MainHeader.scss │   │   └── mainHeader_img.jpg │   ├── Nav │   │   ├── Nav.jsx │   │   └── Nav.scss │   ├── Reviews │   │   ├── Components │   │   │   └── ReviewCard │   │   │   ├── ReviewCard.jsx │   │   │   └── ReviewCard.scss │   │   ├── Reviews.jsx │   │   └── Reviews.scss │   └── Search │   ├── SearchBarModal.jsx │   ├── SearchBarModal.scss │   ├── SearchResults.jsx │   └── SearchResults.scss ├── Pages │   ├── Account │   │   ├── Account.jsx │   │   └── Account.scss │   ├── Cart │   │   ├── Cart.jsx │   │   ├── Cart.scss │   │   └── Components │   │   └── CartList │   │   ├── CartList.jsx │   │   └── CartList.scss │   ├── Login │   │   ├── Components │   │   │   ├── SignIn.jsx │   │   │   ├── SignIn.scss │   │   │   ├── SignUp.jsx │   │   │   └── SignUp.scss │   │   ├── Login.jsx │   │   └── Login.scss │   ├── Main │   │   ├── Components │   │   │   ├── Categories │   │   │   │   ├── Categories.jsx │   │   │   │   └── Categories.scss │   │   │   ├── FeaturedProduct │   │   │   │   ├── FeaturedProduct.jsx │   │   │   │   └── FeaturedProduct.scss │   │   │   ├── Features │   │   │   │   ├── Features.jsx │   │   │   │   ├── Features.scss │   │   │   │   └── features_img.jpg │   │   │   ├── Intro │   │   │   │   ├── Intro.jsx │   │   │   │   └── Intro.scss │   │   │   └── Steps │   │   │   ├── Steps.jsx │   │   │   └── Steps.scss │   │   └── Main.jsx │   ├── ProductDetail │   │   ├── Components │   │   │   ├── ProductSection.jsx │   │   │   ├── ProductSection.scss │   │   │   ├── ReviewCard.jsx │   │   │   ├── ReviewCard.scss │   │   │   ├── Reviews.jsx │   │   │   └── Reviews.scss │   │   ├── ProductDetail.jsx │   │   └── ProductDetail.scss │   └── ProductList │   ├── Components │   │   ├── Option.jsx │   │   ├── Product.jsx │   │   ├── Product.scss │   │   ├── ProductListHeader.jsx │   │   ├── ProductListHeader.scss │   │   ├── ProductSale.jsx │   │   ├── ProductSale.scss │   │   ├── ProductSoldOut.jsx │   │   └── ProductSoldOut.scss │   ├── Data │   │   └── ProudctListData.js │   ├── ProductList.jsx │   └── ProductList.scss ├── Routes.js ├── config.js ├── fonts │   ├── THICCCBOI-Black.woff2 │   ├── THICCCBOI-Bold.woff2 │   ├── THICCCBOI-ExtraBold.woff2 │   ├── THICCCBOI-Light.woff2 │   ├── THICCCBOI-Medium.woff2 │   ├── THICCCBOI-Regular.woff2 │   ├── THICCCBOI-SemiBold.woff2 │   ├── THICCCBOI-ThicccAF.woff2 │   └── THICCCBOI-Thin.woff2 ├── index.js └── styles ├── _color.scss ├── _font.scss ├── common.scss └── reset.scss

29 directories, 75 files

느낀점...

• 백엔드와의 소통이 정말 중요하다는 것을 느낄 수 있었습니다. 일단 제가 맡은 페이지가 백엔드에서 정보를 받아와서 보여줘야하는 부분이였는데 key값은 어떻게 줄 것인지, api 주소는 어떻게 되는지 하나하나 맞춰 가는 과정이 다들 처음이다 보니 순탄치 않았습니다. 다음 프로젝트에서는 이런 부분을 조금 보완해서 프로젝트를 진행해야 할 필요성을 뼈저리게 실감 하였습니다.

westagram에서 js로 기능 구현 했던 것 중 하나만 더 집고 넘어가고자 한다.

아이디 검색 기능을 구현하며...

핵심이라고 생각 했던 부분에서는 그렇게 헤메지 않았던 것 같은데 layout 부분에서 많이 헤맸던 것 같다. 먼저 헤맸던 부분을 살펴 보자면 id search input과 그 모달창의 layout이 지금은 큰 문제 없이 잘 정렬되어 있다. 화면을 줄이거나 늘려도 layout이 무너지지 않는다. 하지만 이렇게 수정하기 전에는 화면을 줄였을 때 모달창의 layout과 id search input의 layout이 맞지 않는 현상을 발견했다. 문제를 해결하기 위하여 먼저 id search input과 모달창을 하나의 박스로 묶어 주었다. 그 후 css에서 모달창의 상위태그인 wrapping 박스를 position: relative로 주고 모달창의 position을 absolute로 줘서 모달창이 warpping 박스를 기준으로 움직일 수있게 하였더니 해결 되었다!

아이디 검색 기능

본론으로 돌아와 아이디 검색은 다음과 같이 하고자 하였다

• search input에 값이 없을 때, focusout 됐을 때, modal창 display: none처리
• search input에 일치하는 id가 있을 때 modal창 display: block 처리
• search input에 일치하는 id가 없을 때 id가 존재하지 않음을 처리
• search input에 다시 focusin 됐을 때, modal창에 현재 input value 값이 나올 수 있도록 구현

• 아이디 검색 코드 위에서 설명한 대로 input에 addEventListener를 등록하여 keyup이 되고 input.value에 값이 있을 경우 findSearchid라는 함수를 동작하게 하였다. findSearchId 함수에서는 obj에 dummyDate의 데이터를 하나씩 가져와 filter 함수를 통해 문자열에 navInput.value 값이 있는지 없는지를 비교하였다. indexOf 함수를 사용하여 매치되는 문자열이 없다면 -1을 리턴할 것이기 때문에 -1이 아닌 모든 값을 배열로 만들어 showSearchValue함수로 전달해 주었다. showSearchValue 함수에서는 findSearchId함수의 리턴 값을 받아 화면에 layout 해주는 역할을 하였다.

한동안 블로그를 소홀히 했다... 사실이다... 변명을 조금 해보자면 이번에 부트캠프에서 코딩을 공부하게 되었는데 내가 소화할 수 있는 양보다 더 많은 것들을 소화해 내야 했다... 또 조금이라도 이해가 안가거나 이상하면 완전히 이해가 될 때 까지 파고 드는 성격 탓에 남들보다 시간이 더 많이 걸리는 것 같기도 하다... 컨디션도 정상이 아니였다... 부트캠프에 조금은 적응 한 것 같으니 일단 욕심을 조금 버리고(안버려진다...ㅜㅜ) westagram clone 코딩 한 부분 중 정리하고 싶은 부분을 블로그 한다!

먼저! 레이아웃 입니다!

이런식으로 만들어 보았습니다.

js 구현 사항

• ID, PW 입력 시 로그인 버튼 활성화 기능
• 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
• ID, PW validation
• 댓글 좋아요 / 삭제 기능
• 아이디 검색 기능
• nav 프로필 사진 클릭 시 메뉴 박스 생성

정리하고 싶은 부분

• 기능 구현에 앞서 ... 필요한 개념은 event.target, 고유한 id, capturing/bubbling, 좋아요를 불리언 값으로 생각 했을 때 그에 대한 정보는 어떻게 처리할 것인가 입니다! 먼저 댓글을 생성할 때 고유한 id를 부여합니다. new Date().getTime() 은 현재시간을 ms단위로 바꿔주는 함순인데 완전히 고유한 id는 아니지만, 기계로 누르지 않는 이상 고유한 id로 사용할 수 있을 것 같아 댓글 생성의 id로 사용하게 되었습니다.
  
• 댓글 삭제 기능 코드 댓글삭제 버튼을 눌렀을 때 그와 일치하는 id를 가진 상위 태그를 가져와 지워버리는 흐름으로 진행 했습니다. 그와 동시에 obj에 담겨져 있던 댓글 좋아요의 정보도 같이 삭제(deleteObjCommentLike()) 하고 다시 받아 올 수 있도록(refreshLikeNumber()) 함수를 구성 하였습니다.
  
• 이벤트는 버블링으로 인해 자식 요소에서 이벤트가 발생해도 부모 요소가 그 이벤트를 들을 수 있습니다. 그렇기 때문에 addEventListener 함수를 상위 태그에 걸어 주었습니다

• 댓글 좋아요 제가 고민한 부분은 좋아요 버튼을 누르면 누른 그 버튼은 빨간색으로 바뀌고 좋아요 숫자도 변경 가능하게 구현 하였습니다. 만약 여기서 좋아요 누른 버튼을 삭제 한다면 그에 따라 값이 변경 될 수 있도록 구현 하였습니다. 좋아요를 취소한다면 그에 맞게 좋아요 숫자가 변화 할 수 있게 구현 하였습니다.
  
• 좋아요 버튼 코드 클릭 되었을 때 그 버튼의 고유한 id를 obj에 저장 된 각 item의 id와 비교합니다. 이때, map 함수를 사용하여 지금 클릭한 id와 obj에 저장 된 item의 id가 같은 경우 좋아요 버튼의 불리언 값을 비교 합니다. 만약 그 값이 true 였다면 false로 바꿔주고, false 였다면 true로 바꿔 obj 값을 update해 줍니다. 그 이후 refreshLikeNumber 함수를 호출 하여 filter 함수로 obj의 item 중 좋아요 버튼이 true 값들만 다시 만들어줍니다. 그 값의 길이를 innerText로 업데이트 하는 방식을 구현했습니다.

정리를 마치며...

항상 코드를 짜거나 뭔가를 할 때 남에게 충분히 설명할 수 있게 하려 합니다. 설명이 가능하다는 것은 제가 100% 이해 했기 때문에 저한테도 좋고, 상대방도 뭔가를 배울 수 있어 서로 Win-Win 할 수 있습니다. 아직 많이 아쉬운 코드들이긴 하지만 조금씩 조금씩 고쳐 나가겠습니다! 2탄에 계속됩니다 !

• 61: 문자열 압축하기

  data = list(input())
  s = ''
  count = 0
  s += data[0]
  for i in range(0, len(data) -1):
    count += 1
    if data[i] != data[i+1]: # 문자열이 바뀔 때 처리 !
        s += str(count)
        s += data[i+1]
        count = 0
    if len(data)-2 == i: # 문자열의 마지막 문자 처리 !
        count += 1
        s += str(count) 
  print(s)

62: 20190923 출력하기

data = "aacdddddddddeee"
a = str(data.count("a"))
b = str(data.count("b"))
c = str(data.count("c"))
d = str(data.count("d"))
e = str(data.count("e"))
print(a+b+c+d+b+d+a+e)

63: 친해지고 싶어

data = list(map(str, input().split()))
for sentence in data:
    print(sentence[0], end = "")

64: 이상한 엘레베이터

num = int(input())
def check(num):
    if num % 7 == 0:
        return num // 7
    elif (num % 7) % 3 == 0:
        return (num // 7) + ((num % 7) // 3)
    elif num % 3 == 0:
        return num // 3
    else:
        return -1 
print(check(num))

• 이렇게 처리할 수 도 있음!(답안)

  # 답안
  N = int(input())
  result = 0
  while True:
    if N%7 ==0:
        result += N//7
        print(result)
        break
    N -= 3
    result += 1
    if N < 0:
        print(-1)
        break

65: 변형된 리스트

a = [1, 2, 3, 4]
b = ['a','b','c','d']
l = []
for i in range(0, len(a)):
    if i % 2 == 0:
        l.append([a[i],b[i]])
    else:
        l.append([b[i],a[i]])
print(l)

• 답안이 조금 더 깔끔 (zip함수)

  # 답안
  a = input().split(' ')
  b = input().split(' ')
  c = []
  count = 0
  for i, j in zip(a, b):
    if count % 2 == 0:
        c.append([i, j])
    else:
        c.append([j, i])
    count += 1
  print(c)

66: 블럭탑쌓기

예를 들면 정해진 순서가 BAC 라면 A 다음 C가 쌓아져야 합니다. 선행으로 쌓아야 하는 블럭이 만족된 경우라면 탑이 무너지지 않습니다.

1. B를 쌓지 않아도 A와 C를 쌓을 수 있습니다.
2. B 다음 블럭이 C가 될 수 있습니다.
3. 블럭은 알파벳 대문자로 표기합니다.
4. 규칙에 없는 블럭이 사용될 수 있습니다.
5. 중복된 블럭은 존재하지 않습니다.

   탑 = ["ABCDEF", "BCAD", "ADEFQRX", "BEDFG", "EFGHZ"]
   규칙 = "ABD"
   result = []
   def solution(top, rule):
    l = []
    for e in rule:
        if e in top:
            l.append(top.index(e))
    if l == sorted(l):
        result.append("가능")
    else:
        result.append("불가능")
   for i in range(0, len(탑)):
    solution(탑[i], 규칙)            
   print(result)

• 답안

  # 답안
  탑 = ["ABCDEF", "BCAD", "ADEFQRX", "BEDFG", "EFGHZ"]
  규칙 = "ABD"
  result = []
  def solution(top, rule):
    st = rule.index(rule[0]) # 기준점을 잡는다...
    for e in top:
        if e in rule:
            if st > rule.index(e):
                return "불가능"
            st = rule.index(e) # 기준점을 바꾸면서 규칙을 다시 확인한다... index를 비교한다 !
    return "가능"
  for i in range(0, len(탑)):
    result.append(solution(탑[i], 규칙))           
  print(result)

• 내가 푼 것과 답안의 차이 ! 나는 rule을 for문으로 돌리고 탑의 index 값을 가져와서 sorted로 비교 ! 답안은 rule값 하나를 기준으로 잡고, 탑을 for문으로 돌리며 기준으로 잡은 값과 index 비교

67: 민규의 악수

1. 악수는 모두 1대 1로 진행이 된다.
2. 민규를 제외한 모든 참가자는 자신을 제외한 참가자와 모두 한번씩 악수를 한다.
3. 같은 상대와 중복된 악수는 카운트 하지 않는다.
4. 민규를 제외한 참가자는 행사를 모두 마쳤다.

   def solution(n):
    a = 1
    while (a * (a - 1)) / 2 < n:
        a += 1
    t = int(n - ((a - 1) * (a - 2) / 2))
    print([t, a]) 
   solution(int(input()))

• a는 행사 참가자
• t는 중간에 나간 사람(민규)의 악수 횟수

68: 버스 시간표

data = ["12:30", "13:20", "14:13"]
time = list(map(int, input().split(':')))
time = time[0] * 60 + time[1]
time_change = []
result = []
for i in range(0, len(data)):
    e = list(map(int, data[i].split(':')))
    minute_convert = e[0] * 60 + e[1]
    time_change.append(minute_convert) 
for i in range(0, len(time_change)):
    change = time_change[i] - time
    if change < 0:
        result.append('지나갔습니다')
    elif change > 0:
        hour = change // 60
        if hour < 10:
            hour = '0'+ str(hour)
        minute = change % 60
        if minute < 10:
            minute = '0' + str(minute)
        result.append(f'{hour}시간 {minute}분')        
print(result)

• zfill 사용할 수 있다 !
• 파이썬 문자열 앞 0으로 채우기 !
• "3".zfill(3) -> 003

69: 골드바흐의 추측

골드바흐의 추측(Goldbach's sonjecture)은 오래전부터 알려진 정수론의 미해결 문제로, 2보다 큰 모든 짝수는 두 개의 소수(Prime number)의 합으로 표시할 수 있다는 것이다. 이때 하나의 소수를 두 번 사용하는 것은 허용한다. -위키백과
위 설명에서 2보다 큰 모든 짝수를 두 소수의 합으로 나타낸 것을 골드바흐 파티션이라고 합니다.
예) 100 == 47 + 53 56 == 19 + 37
2보다 큰 짝수 n이 주어졌을 때, 골드바흐 파티션을 출력하는 코드를 작성하세요.

# 소수 구하기
def prime_list(n):
    # 에라토스테네스의 체 초기화: n개 요소에 True 설정(소수로 간주)
    sieve = [True] * n
    # n의 최대 약수가 sqrt(n) 이하이므로 i=sqrt(n)까지 검사
    m = int(n ** 0.5)
    for i in range(2, m + 1):
        if sieve[i] == True:           # i가 소수인 경우
            for j in range(i+i, n, i): # i이후 i의 배수들을 False 판정
                sieve[j] = False
    # 소수 목록 산출
    return [i for i in range(2, n) if sieve[i] == True]
#골드바흐 파티션
prime_numbers = prime_list(10000) # 10000까지의 수에서 소수를 다 구해 놓는다 !
number = int(input())
one_prime = 2
l = []
while True:
    if one_prime == 2:
        if one_prime in prime_numbers:
            two_prime = number - one_prime
            if two_prime in prime_numbers:
                l.append((one_prime, two_prime))
        one_prime += 1
    else:    
        if one_prime in prime_numbers:
            two_prime = number - one_prime
            if two_prime in prime_numbers:
                l.append((one_prime, two_prime))
        one_prime += 2
    if one_prime > number:
        break
print(l)

• 에라토스테네스의 체를 통해서 일정 수준 이상의 소수를 전부 구해 놓고,
• number를 받았을 때 구해 놓은 소수를 하나하나 비교하는 방식으로 풀이
• 소수 2부터 시작해서 홀수 값만 비교 ! 왜...? -> 짝수값은 소수가 될 수 없음
• 소수 값 하나와 그 소수 값을 number에서 뺏을 때 소수 값이 나오면 출력

70: 행렬 곱하기

a = ([1, 2],
     [2, 4])
b = ([1, 0],
     [0, 3])
def check(a, b):
    if len(a[0]) != len(b):
        print(-1) 
    else:
        result_1 = (a[0][0] * b[0][0] + a[0][1] * b[1][0])
        result_2 = (a[0][0] * b[0][1] + a[0][1] * b[1][1])
        result_3 = (a[1][0] * b[0][0] + a[1][1] * b[1][0])
        result_4 = (a[1][0] * b[0][1] + a[1][1] * b[1][1])
        print(f"([{result_1}, {result_2}], [{result_3}, {result_4}])")    
check(a, b)

• 답안

  a = ([1, 2],
     [2, 4])
  b = ([1, 0],
     [0, 3])
  def sol(a, b):
    c = []
    if len(a[0]) == len(b):
        for i in range(len(a)):
            c.append([0]*len(b[0])) # 값이 들어갈 자리를 셋팅 0으로 !
            print(c)
        for i in range(len(c)): # (0, 0) -> (1, 0)
            for j in range(len(c[i])): # (0, 0) -> (0, 1)
                for k in range(len(a[i])): # A[0][0] * B[0][0] -> A[0][1] * B[1][0] 
                    c[i][j] += a[i][k] * b[k][j] # for문 3개 돌리기...아...
        return c
    else:
        return -1
  sol(a, b)

• list comprehension + zip함수로 문제를 푼 경우

  a = ([1, 2],
     [2, 4])
  b = ([1, 0],
     [0, 3])
  def productMatrix(A, B):
    return [[sum(a*b for a, b in zip(A_row,B_col)) for B_col in zip(*B)] for A_row in A] # zip(*) -> 열(column)으로 묶어준다...
  productMatrix(a, b)

• 출처: https://geonlee.tistory.com/110 [빠리의 택시 운전사]
• 마지막 방법이 정말 깔끔하다고 느꼈는데... 저렇게 생각하기가 쉽지 않았다..

개인적으로 너무 어려웠고...한 문제 푸는데 시간도 오래걸린다... 자료구조&알고리즘 처음 공부하는 거니 욕심버리고 꾸준히 할 것 !

51: merge sort를 만들어보자

병합정렬(merge sort)은 대표적인 정렬 알고리즘 중 하나로 다음과 같이 동작합니다.

1. 리스트의 길이가 0또는 1이면 이미 정렬된 것으로 본다. 그렇지 않은 경우에는
2. 정렬되지 않은 리스트를 절반으로 잘라 비슷한 크기의 두 부분 리스트로 나눈다.
3. 각 부분 리스트를 재귀적으로 합병 정렬을 이용해 정렬한다.
4. 두 부분 리스트를 다시 하나의 정렬된 리스트로 합병한다. (출처: 위키피디아)

   def 병합정렬(입력리스트):
    입력리스트길이 = len(입력리스트)
    if 입력리스트길이 <= 1:
        return 입력리스트
    중간값 = 입력리스트길이 // 2
    그룹_하나 = 병합정렬(입력리스트[:중간값])
    그룹_둘 = 병합정렬(입력리스트[중간값:])
    결과값 = []
    while (그룹_하나) and (그룹_둘):
        if (그룹_하나 < 그룹_둘):
            결과값.append(그룹_하나.pop(0))
        else:
            결과값.append(그룹_둘.pop(0))
    while 그룹_하나:
        결과값.append(그룹_하나.pop(0))
    while 그룹_둘:
        결과값.append(그룹_둘.pop(0))
    return 결과값
   주어진리스트 = [180, 145, 165, 45, 170, 175, 173, 171]
   print(병합정렬(주어진리스트))

52: quick sort

def 퀵정렬(입력리스트):
    입력리스트의길이 = len(입력리스트)
    if 입력리스트의길이 <= 1:
        return 입력리스트
    기준값 = 입력리스트.pop(입력리스트의길이//2)
    그룹_하나 = []
    그룹_둘 = []
    for i in range(입력리스트의길이-1):
        if 기준값 > 입력리스트[i]:
            그룹_하나.append(입력리스트[i])
        else:
            그룹_둘.append(입력리스트[i])
    return 퀵정렬(그룹_하나) + [기준값] + 퀵정렬(그룹_둘)
주어진리스트 = input().split(' ')
주어진리스트 = [int(i) for i in 주어진리스트]
print(퀵정렬(주어진리스트))

53: 괄호 문자열

def math(e):
    if e.count('(') != e.count(')'):
        return False
    괄호 = []
    for i in e:
        if i == '(':
            괄호.append('(')
        if i == ')':
            if len(괄호) == 0:
                return False
            괄호.pop()
    return True
n = input()
if math(n) == True:
    print("YES")
else:
    print("NO")

• 일단 '('와 ')'의 갯수가 맞아야한다
• ')'가 먼저 나오는 순간 잘못된 문자열
• '('가 나오는 순간 ')'도 언젠간 나와야한다
• '('와 ')'을 짝지어 준다고 생각하자...! 짝이 맞는 순간 pop 해버리자

54: 연속되는 수

data = list(map(int, input().split()))
data.sort()
def check():
    for i in range(0, len(data) - 1):
        if data[i] + 1 != data[i+1]:
            return print("NO")
    return print("YES")
check()

55: 하노이의 탑

하노이의 탑은 프랑스 수학자 에두아르드가 처음으로 발표한 게임입니다. 하노이의 탑은 A, B, C 3대의 기둥과 기둥에 꽂을 수 있는 N개의 원판으로 이루어져 있습니다. 이 게임에서 다음의 규칙을 만족해야 합니다.

1. 처음에 모든 원판은 A기둥에 꽂혀 있다.
2. 모든 원판의 지름은 다르다.
3. 이 원반은 세 개의 기둥 중 하나에 반드시 꽂혀야 한다.
4. 작은 원반 위에 큰 원반을 놓을 수 없다.
5. 한 번에 하나의 원판(가장 위에 있는 원판) 만을 옮길 수 있다.

   원판의이동경로 = []
   def 하노이(원반의수, 시작기둥, 목표기둥, 보조기둥):
    #원판이 한개일 때에는 옮기면 됩니다.
    if 원반의수 == 1:
        원판의이동경로.append([시작기둥, 목표기둥]) 
        return None
    #원반의 n-1개를 보조기둥으로 옮기고
    하노이(원반의수-1, 시작기둥, 보조기둥, 목표기둥)
    #가장 큰 원반은 목표기둥으로
    원판의이동경로.append([시작기둥, 목표기둥]) 
    #보조기둥과 시작기둥을 바꿉니다!
    하노이(원반의수-1, 보조기둥, 목표기둥, 시작기둥)
   하노이(3,'A','C','B')
   print(원판의이동경로)
   print(len(원판의이동경로))

• 재귀함수...하노이탑 뭘 하고싶은가..(A출발, C끝, B임시)

1. A에 있는걸, C로 옮기고 싶다
2. 3개의 원판이 있다면 2개를 B로 보내야한다.
3. A에 남은 원판 하나 C에 넣는다
4. B에 있는 원판 2개를 C에 넣는다... 탈출조건은 재귀함수에서 원판이 하나인 경우 C로 가면 함수 return 한다... 3개일 때는 2개 2개일 때는 1개...n개일 때는 n-1개 나눠서 생각할 것 !

• 진짜 쉽게 다시 한번 더! 나는 원판 3개 가지고 있다... 2개는 B로 보내야한다. ->(A출발, B끝, C임시) 나머지 남은 하나는 C로 보낸다 B로 보낸 원판 2개를 C로 보낸다 -> (B출발, C끝, A임시)
• n개도 마찬가지 원리 적용!
• 추상화 -> 구체화

56: 리스트의 함수 응용

nationWidth = {
    'korea': 220877,
    'Rusia': 17098242,
    'China': 9596961,
    'France': 543965,
    'Japan': 377915,
    'England': 242900
}
nationWidth_list = list(nationWidth.values())
nationWidth_list.sort()
for i in nationWidth.keys():
    if nationWidth[i] == nationWidth_list[1]:
        print(i, nationWidth_list[1] - nationWidth_list[0])

57: 내장함수 응용하기

s = []
count = 0
for i in range(0, 1001):
    s.append(str(i))
s = "".join(s)
for i in s:
    if i == "1":
        count += 1
print(count)

58: 콤마 찍기

num = int(input())
print(format(num, ","))

59: 빈칸채우기

data = input()
data = data.center(50,"=")
print(data)

• 이렇게도 가능

  user_input = input()
  print("{0:=^50}".format(user_input))

60: enumerate

student = ['강은지', '김유정', '박현서', '최성훈', '홍유진', '박지호', '권윤일', '김채리', '한지호', '김진이', '김민호', '강채연']
student.sort()
for i, name in enumerate(student):
    print(f"번호: {i+1}, 이름: {name}")

개인적으로 공부하면서 조금 어려웠다! 기억하고 싶다! 생각되는 부분을 남깁니다.

8: 딕셔너리 키 이름 중복

d = {'height': 100, 'weight':78, 'weight': 84, 'temparture': 36, 'eyesight':1 }
print(d['weight'])

- 키 값 중복 될 경우 마지막 값 출력(오른쪽 값이 덮어 씌여졌다고 생각)

### 10: 별 찍기
>```
n = int(input())
for i in range(1, n+1):
        print(" "*(n-i), "*" * (2*i-1))

* 뿐만 아니라 공백을 어떻게 처리해야할지 살짝 고민이 필요했던 문제

12: 게임 캐릭터 클래스 만들기

class Wizard:
    def __init__(self, health, mana, armor):
        self.health = health
        self.mana = mana
        self.armor = armor
    def attack(self):
        print("파이어볼")
x = Wizard(health = 545, mana = 210, armor = 10)
print(x.health, x.mana, x.armor)
x.attack()

- 간단한 클래스 작성이었지만 클래스 공부가 더 필요하다고 느꼈던 부분!

### 27: 딕셔너리 만들기
>```
keys = input().split()
values = map(int, input().split()
result = dict(zip(keys, values))
print(result)

• zip함수 zip(*iterable)은 동일한 개수로 이루어진 자료형을 묶어 주는 역할을 하는 함수이다. ※ 여기서 사용한 *iterable은 반복 가능(iterable)한 자료형 여러 개를 입력할 수 있다는 의미이다. 참고: https://wikidocs.net/32#zip -점프 투 파이썬

30: 문자열 속 문자 찾기

a = input()
b = input()
result = a.index(b)
print(result)

- index와 find의 차이는 find는 존재하지 않는 문자나 문자열을 찾을 경우 -1 반환, index는 존재하지 않는 문자나 문자열을 찾을 경우 오류 발생 !

### 33: 거꾸로 출력하기
>```
n = input().split()
n.reverse()
print(' '.join(n))

• reverse 와 reversed 차이
• reverse는 list타입에서 제공하는 함수
• reverse는 값을 반환하지 않는다. 단순히 해당 list를 뒤섞어준다
• reversed는 내장함수로 list에서 제공하는 함수가 아니다.
• reversed는 객체를 반환한다.
• 사용하고 싶다면 list(반환객체) or join문을 통해 문자열로 만들도록 하자 !

34: sort 구현하기

data = list(map(int, input().split()))
data_d = data.copy()
data.sort()
if data_d == data:
    print("YES")
else:
    print("NO")

- data_d = data 이런식으로 복제하면 안됨
- 왜...? -> 같은 객체를 참고해서 data 값을 바꾸면 data_d 값도 같이 바뀜
- sort() 와 sorted() 의 차이
- a는 어떤 리스트 라고 가정
- print(a.sort()) -> None 출력
- a.sort() -> print(a) -> 정상적으로 sort값 출력
- sorted(a) -> 정상적으로 sort값 출력

### 41: 소수판별
>- 소수: 1과 자기자신만 나머지가 0
- 소수(素數, 발음: [소쑤], 문화어: 씨수, 영어: prime number)는 자신보다 작은 두 개의 자연수를 곱하여 만들 수 없는 1보다 큰 자연수이다. - 위키백과

import math def prime_number(n): i = 3 if n == 2: return print("YES") if n == 1: return print("NO") if n % 2 == 0: return print("NO") n_sqrt = math.sqrt(n) while i <= n_sqrt: if n % i == 0: return print("NO") else: i = i + 2 return print("YES") return print("YES") prime_number(int(input()))

- 나누어보는 숫자 범위를 줄인다...왜? -> 시간 복잡도를 n에서 sqrt(n)으로 만들기 위해서 !
- N = A * B
- 어떤 수 n이 소수가 아닌 경우 n = a * b 관계이다. a < b 라고 가정
- 루트n 을 기준으로 루트n 보다 작은 a가 적어도 하나 존재한다.
- 결론적으로 루트 n 보다 작은 수(a) 가 n에 나눠 0이 나오면 소수가 아니다. 1, 2제외

### 41(번외편): 에라토스네테스의 체
>- 2부터 소수를 구하고자 하는 구간의 모든 수를 나열한다. 그림에서 회색 사각형으로 두른 수들이 여기에 해당한다.
- 2는 소수이므로 오른쪽에 2를 쓴다.
- 자기 자신을 제외한 2의 배수를 모두 지운다.
- 남아있는 수 가운데 3은 소수이므로 오른쪽에 3을 쓴다.
- 자기 자신을 제외한 3의 배수를 모두 지운다.
- 남아있는 수 가운데 5는 소수이므로 오른쪽에 5를 쓴다.
- 자기 자신을 제외한 5의 배수를 모두 지운다.
- 남아있는 수 가운데 7은 소수이므로 오른쪽에 7을 쓴다. 
- 자기 자신을 제외한 7의 배수를 모두 지운다.
- 위의 과정을 반복하면 구하는 구간의 모든 소수가 남는다.

def prime_list(n): # 에라토스테네스의 체 초기화: n개 요소에 True 설정(소수로 간주) sieve = [True] * n # n의 최대 약수가 sqrt(n) 이하이므로 i=sqrt(n)까지 검사 m = int(n ** 0.5) for i in range(2, m + 1): if sieve[i] == True: # i가 소수인 경우 for j in range(i+i, n, i): # i이후 i의 배수들을 False 판정 sieve[j] = False # 소수 목록 산출 return print([i for i in range(2, n) if sieve[i] == True]) prime_list(int(input()))

- 참고자료: 위키백과(에라토스테네스의 체)

### 42: 2020년
>- datetime 모듈 사용

import datetime a = int(input()) b = int(input()) data = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'] d = datetime.date(2020, a, b) print(data[d.weekday()])

- time 모듈 없이 구현
##### https://zetawiki.com/wiki/Zeller%EC%9D%98_%EA%B3%B5%EC%8B%9D (Zeller의 공식 참고...ㅜ)

### 50: 버블정렬 구현하기
>```
def bubble(n, data):
    for i in range(n-1):
        for j in range(len(data)-1):
            if data[j] > data[j+1]:
                temp = data[j+1]
                data[j+1] = data[j]
                data[j] = temp
    for i in range(n):
        print(data[i], end=" ")
n = int(input())
data = list(map(int, input().split()))
bubble(n, data)

• 최소 하나는 자기 자리를 찾아간다...
• for문 한번 돌리면 맨 마지막에 올 숫자가 정해진다...!
• temp 쓰지말고 data[j], data[j+1] = data[j+1], data[j] 이렇게 쓸 것! 파이썬은 가능 !

• http://paullab.co.kr/codefestival.html?ckattempt=1 파이썬 부분 100제 혼자 힘으로 완성 후 리뷰
• 파이썬 알고리즘 인터뷰(책) 조금씩 진도 나가기

• 예전에 만들다 포기 한 적 있지만, 이번 부트캠프에서 JS 과제로 꼭 완성 시켜보고 싶었습니다...
• 평소에 쉽게쉽게 쓰던 걸 직접 만들어 보려 했는데... 쉽지는 않았습니다...
• 로직을 잘 구성해서 작은 부분부터 하나하나 분할정복 해야 한다는 것을 알았습니다 !

HTML

기본적으로 button 으로 숫자패드, 연산자 등을 구현 했고,

onlick 으로 js에서 숫자를 받아올 수 있게 구성했습니다.

JS

문자로 받아와서 계산 할때 parseInt로 변환하는 방식을 거쳤습니다. 왜..? -> 예를들어 77 이라는 숫자를 만들고 싶으면 숫자패드에서 7을 두번 눌러야 하는데, 이때 문자가 아닌 number로 받을 경우 7이 2번 더해져 14가 되었습니다. 이런 경우를 피하기 위해 문자로 받아와서 원하는 숫자가 만들어지면 미리 만들어 놓은 변수에 전달 하는 형식으로 진행했습니다. 그 구분은 boolean으로 하였습니다.

&& -> AND 연산자 return 값은 '=' 버튼을 눌렀을 때 switch문을 통해 필요한 로직을 수행할 수 있게 구성했습니다.

링크: https://zoo0190.github.io/we_calculator/

아쉬웠던 점

• 중복되는 코드가 많았음