2023-09-25 사전캠프 16일차 TIL

2023-09-25 사전캠프 16일차 TIL

 

- 책 독해

모던 자바스크립트 Deep Dive (320p ~ 358p) : 빌트인 객체, this

요약 :

- 자바스크립트의 객체는 표준빌트인 객체(ECMAScript 사양에 정의된 객체), 호스트 객체(ECMAScript 사양에 정의는 되지 않았지만 자바스크립트 실행환경에서 추가 제공하는 객체), 사용자 정의 객체로 나누어지며 그중 표준빌트인 객체와 호스트 객체는 전역 객체의 프로퍼티/메서드이기 때문에 전역에서 사용가능하다. 이때 별도의 선언없이 단독으로 사용가능하다.

- 자바스크립트의 this는 생성자 함수 내에서 생성된 인스턴스를 가리키거나 객체 내에서 자신이 속한 객체를 가리킬 때 사용하며, 그 밖에 일반함수 등에서 사용되면 전역객체를 나타낸다. Function.prototype.apply/call/bind를 사용하여 직접 바인딩 시킬 수도 있다.

---

- 팀 프로젝트 발제 

 

오늘 부터 본캠프 1주차 까지 진행되는 프로젝트가 발제되었다.

첫 프로젝트로 사전캠프 조를 기반으로 진행된다.

 

주제 : 팀 소개 페이지 제작

 

금일 진행된 내용은 다음과 같다.

 

1. 팀프로젝트 노션 만들기

진행되는 사항을 정리하기 위하여 노션을 제작하였으며, 발제 노션페이지를 기본틀로 하여 내용을 채워나갈 예정이다.

2. 와이어프레임 작업 피그마 팀 구성

와이어프레임을 제작하기 위하여 공유 피그마 팀을 만들었으며, 팀원들과 직접적인 소통을 하며 우선적으로 페이지 디자인과 이벤트 등을 구성 할 예정이다. (해당 디자인은 내배캠이 끝나고 개인적으로 만들어본 디자인으로 변동될 디자인이다.) 

4. 프로젝트 기능 토의 

간단하게 프로젝트에 추가할 기능들에 대하여 이야기하였으며, 나온 항목은 다음과 같다.

- 다크모드 구현

- 버튼 (부트스트랩)

- 날씨 API 이용 날씨정보 띄우기

- 멤버 카드 구현 (뒤집기 이벤트)

- 반응형 디자인 구현

 

반응형 디자인은 부가적인 부분으로 우선적이지 않다.

 

3. 팀 역할 분담 및 이름 

팀이름은 내가 의견을 낸 '불 4 조'가 채택이 되었다.

다른 이유 없이 4조로 만들 수 있는 이름 중 고민을 했다. (추후 동적으로 변동될 수 도있음..!)

 

그리고 내가 팀장으로 지원하여 프로젝트 동안 팀장을 맡게 되었다.

내가 분명 다른 팀원분들 보다 나이가 많고 뛰어난 것은 아니지만 팀장이라는 부담감 속에 배울 수 있는 점도 많다고 생각한다.

 

프로젝트 기능 토의를 토대로 역할을 분담하였다.

- 다크모드 구현 (민규님)

- 버튼 (부트스트랩) (병택님)

- 날씨 API 이용 날씨정보 띄우기 (진현님)

- 멤버 카드 구현 (뒤집기 이벤트) (명섭님)

 

4. 숙제(?)

주제가 팀 소개이다.

팀 소개를 하기 전 팀원분들과 서로를 알아가는 시간도 필요하다!

[자신]에 대한 설명 (거주지, 직무 턴 계기, 취업목표, 첫월급받으면 하고싶은거) 및 MBTI를 다음날까지 생각해오기로 하였다. 물론 서로 공부하고 취업을 위해 모였지만, 소중한 인연이 될 듯 하다.

---

- 알고리즘 문제풀이

1. 내배캠 일일 알고리즘 풀이 (프로그래머스)

- 문자열 정렬하기

문자열이 주어졌을 때, 문자열의 숫자만 추출하여 정렬하는 문제이다.

파이썬에는 re 라는 정규 표현식 사용을 위한 모듈이 존재한다.

정규 표현식이란 일정한 규칙을 가진 문자열의 집합을 표현하는 것이다.

re 모듈을 사용하기 위해서는 import re를 해주어야한다.

입력 받은 string 속 int 타입의 규칙을 가진 값을 구하기 위해 \d를 사용하였다. 각 패턴에 따른 메타문자는 다음 페이지에서 확인 가능하다.

정규 표현식 - 위키백과, 우리 모두의 백과사전

이 때 사용한 re 모듈의 메서드는 findall() 이다.

findall(r'패턴', 문자열)의 형식으로 사용하며, 문자열 내에서 해당 패던을 가진 모든 문자열을 리스트로 반환한다.

반환된 숫자 리스트를 sort 함수를 통해서 오름차순 정렬하여 마무리하였다.

 

- 문자열 정렬하기

입력받은 문자열을 반복문을 통해 순회하고 크기가 0인 새로운 문자열 변수에 각 문자 항목을 다시 저장하는데 이때 in 키워드를 통해 새로운 문자열 변수 내에 해당 항목이 없을 시에만 추가하도록 조건을 주었다.

 

2. 백준 문제풀이 (단계별 문제풀이 5문제)

학습 내용 

- string.replace(변경 전, 변경 후) : 문자열의 일정 문자를 다른 문자로 변경

- 백준 2563 색종이 문제

2563번: 색종이

1) list A는 전체 도화지의 크기인 100X100의 형태, 0으로 초기화된 이중배열로 표현

* 이때 주의할 점은 내부 배열을 초기화 할 때 0으로 초기화 된 변수 자체를 반복하여 넣게된다면, 모두 같은 참조를 하게된다. 따라서 변수를 반복하지 않고 모두 다른 값을 넣어주어야한다.

2) 색종이의 좌표를 입력받아 해당 좌표로 부터 색종이의 크기만큼 모두 +1을 시켜준다.

3) 결론적으로 0이 아닌 부분은 색종이가 위치한 부분으로 0이 아닌 부분의 합을 구하면 넓이가 구해진다.