0. 내가 무릎을 꿇었던 건 추진력을 얻기 위함이다

저 말을 이번 2주동안의 주제로 삼았다. 내 지금의 상황과 실력적인 부분을 남들과 비교하지 않고 철저하게 나에게만 초점을 맞추기로 했다. 어제의 나보다 오늘의 나, 아까의 나보다 지금의 나가 한 발자국이라도 더 나아가 있다면 아낌 없이 칭찬했다. 봐봐 너도 할 수 있잖아~ 너도 이해할 수 있잖아 그냥 시간이 조금 더 필요했을 뿐이야.

1. 무릎을 꿇고 신발끈을 묶다

CSS, html 관련

• 드림코딩 엘리 - 프론트엔드 입문자를 위한 영상 순서 여기서 필요한 부분들을 뽑아서 봤다

리액트 관련

• 생활코딩 리액트 수업
• 생활코딩 React-Redux
• 코딩앙마 리액트js 강좌
• 코딩애플 리액트 기초
• 스파르타 코딩클럽 리액트 심화

기본적으로 생활코딩 리액트 수업을 다 봤고, classs형으로 되어있어 이해가 가지 않는 부분들은 코딩앙마와 코딩애플의 강의를 보면서 이해했다. redux관련한 부분은 이해되지 않는 부분들만 공부했다.

2. 신발끈을 다 묶었다

이해하지 못하고 복사 붙여넣기만 했다고 생각했던 개념들 특히나 props, State관련한 부분과 State 와 setState에 관한 개념들을 잘 정리했다. 그리고 나서 다시 클론 코딩때 했던 코드들을 보니까 이해가 잘 되었다. 내가 또 짜보는건 별개의 문제이겠지만, 일단은 왜 이런 코드를 썼고, 이런 코드들이 어떤 기능을 구현하기 위해서 존재하는지를 이해하는데는 어려움이 없었다. 리덕스의 액션이 왜 필요하고 어떨 때 필요한지도 알 수 있었다.

질문이 생겨도 두리뭉실 하지 않고 내가 무엇을 모르는지 아는 정도까지 올라왔다고 생각한다.

3. 깨달은 점

막상 혼자 공부하기로 선택하고 또 괜히 조급한 마음이 들었었는데, 매일 매일 조금씩 이해하고 알아가는 나에게 집중하다보니 내가 생각했던 만큼 내가 잘 모르는게 아니었고 단지 정말 이해될, 머릿속에 정리될 시간이 필요했다는 생각이 들어서 이 시간을 갖길 잘했다는 생각이 들었다. 신발끈을 정말 짱짱하게 묶었다는 생각이 들고 어서 다시 조금씩 달려보고 싶다는 생각이 든다.

4. 다음주엔

14일 수요일부터 게시판 만들기를 하고 있다. 느리지만 천천히 하나하나 내 손으로 만들어가고 있다. 안될 때의 막막함보다 해결 했을 때의 짜릿함이 더 커서 다행이다. 천천히 완성해보자!

0. 안녕 Axios

처음으로 백앤드 분들과 다른 프론트앤드 분과 2:2로 만나서 클론코딩 프로젝트를 진행했다. 백앤드 분들도 원래는 각자 html,css를 대략 만들어서 서비스를 만들고 계셨었고, 우리도 파이어베이스라는 서버를 사용하고 있었어서 서로의 데이터들이 오가는(?) ajax를 요청, api연동이 어려웠다.

• Ajax는 GET,POST등을 새로고침 없이 할 수 있게 도와주는 코드이다. 보통 state가 변경되면 새로고침이 되는데 이건 새로고침이 되지 않는다! 좀 더 웹 다울 수 있다.

Ajax를 쓰는 많은 방법 중에서 리액트에서는 axios를 fetch만큼 많이 사용하고, 오히려 더 많은 자료가 있다고 해서 axios를 사용하기로 했다.

1. 안녕 API

파이어 베이스로 공부를 했었어서 백앤드와는 어떤 식으로 소통해서 데이터를 주고 받는지 감이 잡히지 않았었다. 프론트단에서는 단순히 백단에서 데이터를 받아서 붙여주기만 하는게 아니라, 그 정보를 가지고 정보를 추가하거나 수정하거나 삭제하는 일도 해야하고 이외의 기능을 만들어야하기 때문에 많은 소통이 필수적으로 필요했다.

우리 팀에서 진행했던 순서를 기억해보면

1. 구현 해야할 페이지와 기능을 나열한다. (필수적으로 구현 해야하는 기능 우선으로)
2. method와 api url을 정한다
3. 프론트 & 백 각각 request 와 response를 정하고 함께 이야기한다
4. 이때 백앤드에서 최대한 정한 이름대로 개발한다

2. 안녕 mock up 데이터 / 더미 데이터

함께 정한대로 대략적인 mock up 데이터를 만들어서 modules에 저장해주고 그걸 가지고 서버가 만들어지는 동안 개발을 했다. (mock up 데이터로 제대로 잘 개발을 해놓으면 api 연동을 했을 때 문제 없이 잘 받아와지는 게 너무 신기했다)

3. 나는 무엇을 했나?

우리 팀에서는 인스타그램 클론코딩을 했는데, 나는 그 중에서 1. 게시글 작성(글+사진) 2. 프로필 & 친구들 상세페이지 3. 프로필 이미지 변경 이렇게 크게 3가지 구현을 했다.

1. 게시글 작성(글 +사진)
   • 전에 했던 매거진 프로젝트 때 했던 것과 매우 유사하게 진행했다.
     • 달랐던 점은 전에는 혼자 작업하는거라 firebase를 사용해서 이미지를 저장하고 미리보기를 보여줬는데 이번에는 FileReader()를 사용하고 setState를 사용해서 이미지를 갈아끼우면서 미리보기를 보여줬다. 서버에는 일단 post모듈에 인자로 file을 보내고 그 file을 formDate()를 사용해서 넘겼다

2. 프로필 상세페이지 + 친구들 상세페이지

   • 프로필 상세페이지는 말 그대로 인스타그램 프로필에 들어가면 보이는 상세페이지를 만드는 작업이었다. 일단 뷰를 짜는 것도 어려웠다.

   • 프로필 상세페이지에 들어가야 하는 컴포넌트들을 나누고 밑에 정사각형의 이미지들이 붙을 수 있게 했다

   • 해당 아이디의 게시물을 불러오고 그 게시물의 이미지만 보일 수 있게 했다

   • 그리고 그 이미지를 눌렀을 때 해당 포스트로 갈 수 있게 했다 history.push('/postdetail/'+props.post_id)를 사용했다 (이런 식으로도 이동이 가능하다는 걸 알게됨)

   • 조건부 랜더링이 특히 필요하던 부분

     • 로그인 기능이 있기 때문에 자신의 페이지엔 자신이 가야 프로필 헤더에 프로필 변경 버튼이 있을 수 있게 했다
     • 각자의 아이디에 맞는 포스트들이 각자의 페이지에 붙을 수 있게

3. 프로필 이미지 변경

• 프로필 이미지를 눌렀을 때(물론 자기만) 모달 창이 뜨면서 프로필 이미지를 업로드 할 수 있게 했다

4. 느낀 점

솔직히 많이 재미있었고 그만큼 많이 힘들었다. 개발도 협업도 만만치 않았다.

• 개발에서 어려웠던 점

  • 기본적인 CSS에서 당황했다. 그대로 똑같이 따라하는 것도 쉽지 않다는 점을 알게 되었음
  • 너무 당연하지만 아직 많은 개념들이 헷갈리고 적용과 응용이 쉽지 않다는 점

• 협업에서 어려웠던 점

  • 다른 팀원들 보이게 제대로 아는 게 없다고 느껴질 만큼 개념정리가 잘 되어있지 않은 내 상태

    • 물론 다들 동일한 상황이지만 함께 협업을 해야하는 상황에 내가 피해가 된다는 (!!아이고!@) 바보 같은 생각에 점점 작아지고 마음이 어려웠다.
      • 항해 99에 참여하면서 처음으로 새롭게 발견했던 내 모습이자 지금까지 고치기가 너무 어려운 내 모습이다 -> 못한다는 생각에 작아지는 것 전혀 팀에 도움이 되는 모습이 아닌데 내 스스로가 답답했다
      • 그러다보니 점점 주신일(?)을 열심히 하는 수동적인 태도를 취했다. 조금 더 욕심내보고 조금 더 해보겠다고 말할 수 있었을텐데 쉽지 않았다.
    • 혼자 공부할 때는 생각도 못했던 내 모습이었다
      • 혼자 공부할 때는 언제까지고 내가 이해할 때까지 ~ 혹은 해결할 때까지 시간을 가질 수 있었지만 이건 내가 기능을 빨리 만들어야 서버에서 확인해 볼 수 있는 부분도 있고, 내가 맡은 부분을 어서 끝내야 다음 기능으로 넘어갈 수 있는 부분이라 충분히 이해하지 못하고 그냥 되는대로 해버리는! 부분이 너무 쉽지 않았다.

• 협업으로 깨달은 점

  • 나의 지금의 태도로는 절대 함께 하고 싶은 개발자가 될 수 없다는 판단이다. 실력 좋은 개발자는 많고, 나는 정말 함께 하고 싶은 개발자가 되고 싶다고 생각했는데 내 실력이 아무리 괜찮아도(?) 내가 나에 대한 자신감이 없으면 나라도 함께하고 싶지 않겠다는 생각이 많이 들었다. 교만하거나 자만해서도 안되지만 내 자신에 대해 너무 자신감이 없어서도 안된다 ! 자신감을 갖자! 자신감이 없는 사람의 말은 아무에게도 들리지 못한다.
  • 소통의 중요성. ㅏ 다르고 ㅓ 다르다.

5. 다음주에 나는

이번 클론 코딩으로 내면의 바닥을 찍어본 (?) 나는 미니프로젝트를 하지 않고 개인 정비 2주를 하기로 했다. 협업할 때 얻을 수 있는 많은 메리트를 가지지 못하겠지만, 지금은 나의 자신감 회복 문제가 더 중요하다고 생각했고, 이 시기에 자신감을 잘 가져야 실전 프로젝트를 안정적으로 할 수 있을거라는 판단이 들었기 때문에 결단했다. 후회 없는 2주를 보내길. 진백아 할 수 있다!!!!!

0. 지난 주

지난 주 캘린더 만들기를 끝내지 못한 굴욕(?)을 씻기 위해서 하루는 리액트 기본을 다시 공부하고 심화 수업으로 넘어갔다. 이번 주의 목표는 반드시 어떻게든 매거진 사이트를 만드는 것이었다.

지난 과제를 완성하지 못했던 이유를 조금 생각해보니

• 일단 기본적인 웹의 동작개념인 요청과 응답을 정확히 이해하지 못해 어려움이 있었다.
• State와 Props의 개념이 확실하게 잡혀 있지 않았다.
• 부트스트랩에 너무 집착했다(부트스트랩을 쓰는 방법도 아직은 어려웠다)
• 너무 강의에만 집착했다 (구글링 절대해!!)

이외에도 많은 이유들이 있겠지만 표면적으로 떠오르는 이유들은 이러했다.

1. 헷갈리지 말자!

<변수 생성의 3단계>

선언 -> 초기화 -> 할당

선언: 이런 변수가 있다! 선언하는 것 초기화: 메모리에는 이 변수는 여기에 값을 넣어놓을 거야~ 라고 공간을 미리 찜하는 것 할당: 찜해놓은 메모리에 실제 값을 넣어주는 것!

2. 매거진 사이트 만들기

• 먼저 주어진 피그마를 통해 전체적인 레이아웃을 살펴봤다.
• 기능은 기본 CRUD로 인스타그램 같은 사진+글이 올라가는 웹을 만들면되는 과제였다.
• 글 작성 페이지에 레이아웃을 선택 버튼으로 선택할 수 있게 하는 기능/좋아요 이외에는 강의에 충실하면 완성할 수 있어서 4일-5일 정도 강의를 보고 완성할 수 있게 여유를 가지고 진행했다.
• 레이아웃과 좋아요 기능이 굉장히 어려웠지만 제때 완성할 수 있었다.
• 파이어베이스를 사용하는게 생각보다 많이 어려웠다. 내가 정한 key값도 계속 틀렸었다..

3. 더 공부해야하는 부분

• 로그인 했을 때 안했을 때 헤더 분기나 해당 글을 쓴 사람에게만 수정이 보이는 등 조건부 랜더링을 많이 써야 했다. 하지만 여전히 잘 이해가 가지 않음. 조건부 랜더링, 조건문 공부를 좀 더 해봐야할 것 같다.

4. 아쉬운 부분

• 완성하긴 했지만 뭔가 내가 해냈다! 라는 느낌보다는 이제 코드를 보고 잘 배낄 수 있다(?)는 생각이 들었다. 물론 이것도 지난주에 비해서 엄청난 발전을 한 것이지만 욕심이 좀 과한 것 같기도 하고, 이쯤되서 다시 동현님의 명언을 기억해보면 욕심을 갖되 좌절하지 말아야겠다!

• 가장 기본적으로 지금 글을 쓰고 있는 일요일인데 바로 몇시간 전에 과제를 완성하고 서비스를 배포하고 vs code 소스를 다 날렸다 ㅜ ㅜ WIL을 작성하면서 깃에 바로 올리려고 했는데 너무 당황스럽다. 하지만 코드에 연연하지 않기로 했다. 앞으로 혼자 프로젝트를 해도 반드시 깃에 올려가면서 해야겠다는 생각을 했다. 그래서 WIL도 더 자세하게 적지 못해서 아쉽다.

5. 깨달은 점

• 내가 작성한 코드로 어떤 기능이 구현될 때 너무 신기하고 희열을 느낀다 물론 지금은 복사붙여넣기 + 아주 작은 a 이지만, 나중에 내가 내 코드를 짜고 그 코드가 돌아갈땐 얼마나 더 기쁠지 기대된다.

• 다음 주부터는 2주동안 처음으로 백앤드 분들과 클론코딩을 진행하는데 긴장되고 떨린다. 열심히해야지.

0. 리액트

리액트는 페이스북에서 만든 자바스크립트 UI 라이브러이고, 컴포넌트라는 작은 레고들로 페이지를 구성하는 라이브러리이다. 정도의 수준으로 리액트를 들어보고 리액트 공부를 시작하게 되었다. 리액트는 자유도도 높고, 생태계도 넓고 계속해서 끊임없이 새로운 것들이 쏟아지는 라이브러리라고 해서 매우 기대가 되었다.

0.1. 준비과정

정말 기초적인 HTML, CSS, Javascript의 모양(?)정도만 알고있는 나라서, 기본적인 리액트 강의를 듣기전에 사전 공부가 필수적이었다. 민영튜터님의 강의를 보다가 기본적인 단어들조차 모르는 것들이 많아서 따라갈 수 없었다. 그래서 바로 생활코딩의 React 수업을 들었고, Javascript의 객체 지향에 대해서 모르면 리액트를 알기 어렵겠다는 생각이 들어서 Javascript 객체 지향을 따로 또 공부했다. 그리고 나서 민영튜터님의 강의를 듣기 시작했다.

1. 캘린더 만들기 프로젝트

결과적으로 시간이 부족해서 모든 기능을 만들지 못했고, 파이어베이스를 사용해서 배포하는 것도 하지 못했다.
앞에 도 말했듯 홀로 사전강의 공부를 하고 강의를 듣느라 시간을 좀 많이 쓰기도 했다. 기능이야 더 추가하면 되고 배포야 나중에 하면 되니까 그 전에 준비과정을 탄탄히 해놓는게 맞았다! 라는 생각을 하려고 한다.ㅋㅋ..._

**완성한 기능들 ~ ** 캘린더 1. 이전 월, 다음 월 보기 버튼이 있고 해당 버튼 클릭 시 월 이동 가능하게 하기 -> fullcalendar 라이브러리를 써서 해결했다

2. 일정 하나를 클릭할 시 팝업 띄우기 - 팝업 내용: 일정 내용 및 일시 텍스트, 일정 삭제 및 일정 완료 버튼 2개

    → 각 버튼을 누르면 일정 삭제 혹은 일정 완료 되게 하기

-> 팝업은 띄웠지만 팝업 내용을 불러오지 못했다 ㅜ ㅜ

3. 일정 추가하기 버튼 (페이지 우측 아래에 플로팅 버튼으로 처리) 클릭 시 일정 추가하기 페이지로 이동하기 -> 플로팅 버튼도 material ui를 사용했다

4. 캘린더 내 일정은 시간 순으로 정렬하기 5. 우측 아래의 추가하기 버튼 위에 [완료된 일정 보기] 만들기 - 클릭 시, 완료된 일정만 캘린더에 표시 되고 버튼 텍스트가 [모든 일정 보기]로 바뀌도록 하기 - [모든 일정 보기] 버튼 클릭 시, 모든 일정 캘린더에 표시하기

일정 추가 페이지

1. 일시, 일정 내용을 기입하지 않으면 팝업으로 경고하기
   • 실제로 파이어스토어에 들어가지 못하게 막기
2. 일정 추가 시 캘린더 페이지로 이동하기

=> 결론적으로 보면 뷰랑 페이지간의 이동같은 간단한 기능들과 리덕스를 사용해서 입력 데이터를 캘린더에 붙여주는 정도의 기능을 완성했다.

2. 값진 삽질

왜 데이터를 불러오지 못했냐고 물으신다면 데이터를 불러오지 못했기 때문이라고,,, 말할 수 밖에 없는데

정작 중요한 데이터를 처리하는 일정 페이지 기능들을 만들 때가 되니 시간이 없었다. 정말 튜터님이 말씀하신대로 빠르게 라이브러리를 썼어야 했는데 초반에 라이브러리를 쓰지 않고 한땀한땀 자바스크립트로 캘린더 뷰를 짰었다. 그러다가 moment()라는 자바스크립트 라이브러리를 알게 되었고 공식 문서를 보면서 참고해 만들었다.

import './App.css';
import {useState} from 'react';
import moment from 'moment';

const App =()=>{

//getMoment에는 state 값이 들어가고, setMoment는 getMoment 값을 수정하는 함수가 된다
// useState는 초기값을 설정하는 함수이고, 초기값을 moment()로 잡았다. 
//여기서 moment는 선언할때 현재의 날짜로 초기화 된다-> 오늘로 설정된다.
//그래서 today = getMoment 즉 today == moment() 오늘로 설정함

  const [getMoment, setMoment]=useState(moment());     
  const today = getMoment;    

  return(
    <div className="App">

        <div className="control">
          <button>이전달</button>
          <span>{today.format('YYYY 년 MM 월')}</span>   //YYYY는 년도 MM 은 달 입니다.
          <button>다음달</button>
        </div>
        <table>
          <tbody>
          </tbody>
        </table>
    </div>
  );
}
export default App;

• 이전달/ 다음달 버튼을 누르면 해당하는 달로 옮겨지게 하기

return(
    <div className="App">

        <div className="control">
         <button
          onClick={() => {
            setMoment(getMoment.clone().subtract(1, "month"));
          }}
        >이전달</button>
          <span>{today.format('YYYY 년 MM 월')}</span>   //YYYY는 년도 MM 은 달 입니다.
          <button
          onClick={() => {
            setMoment(getMoment.clone().add(1, "month"));
          }}
        >다음달</button>
        </div>
        <table>
          <tbody>

          </tbody>
        </table>
    </div>
  );
```해석
{today.format('YYYY 년 MM 월')}
// 이 함수를 쓰면 오늘로 날짜를 포멧해준다


<button onClick={() => {
            setMoment(getMoment.clone().subtract(1, "month"));
// 버튼을 눌렀을 때 이동할 수 있도록 onClick 사용
// 위에서 봤듯 setMoment는 getMoment로 받은 값을 수정해줄 수 있음
// clone()은 기존의 moment()가 아닌 새로운 객체를 반환했다는 의미임
// subtract(1, "month") 하면 해당 month에서 1을 빼줌 - subtract 은 빼기의 의미임
// 반대로 add(1, 'month')하면 해당 month에서 1을 더해줌 - add는 더하기의 의미임
          }}
        >
- 다음으로 달력 날짜 찍히게 만들기

1. 첫 주와 마지막 주에 대한 설정 

    `startOf('month').week() 사용` 

```jsx
const Calendar = () => {
  const [getMoment, setMoment] = useState(moment());

  const today = getMoment;
  const firstWeek = today.clone().startOf("month").week();
  const lastWeek =
    today.clone().endOf("month").week() === 1
      ? 53
      : today.clone().endOf("month").week();


// startOf('month').week()는 그 달의 시작하는 week()
// endOf('month').week()는 그 달의 끝나는 week()임

 const firstWeek = today.clone().startOf("month").week();
 const lastWeek =
    today.clone().endOf("month").week() === 1
      ? 53
      : today.clone().endOf("month").week();

// lastweek에서 쓰인 조건문을 보면 1년은 52주 존재하고 몇일이 더 있어서
// 달력은 53주로 표현해야 한다. 
//하지만 moment()는 내년의 첫주인 1로 표시하기 때문에 마지막 주가 1이 되면 53이라고 표시하라고 조건문 달아줌

2. 날짜 배열 보여주기

const arr = [1, 2, 3, 4, 5];

  return (
    <div className="App">
        <table>
          <tbody>
            {arr}  // 웹에 12345 가 표시됩니다.
          </tbody>
        </table>
    </div>
  );

--> 이런 리액트의 특징(배열을 표시하면 배열 내의 요소를 전부 보여줌)을 이용함 

• 최종

  import "./App.css";
  import React, { Component } from "react";
  import Calendar from "./Calendar";
  import { useState } from "react";
  import moment from "moment";
  import calendarArr from "./Calendar";
  

const App = () => { const [getMoment, setMoment] = useState(moment());

const today = getMoment; const firstWeek = today.clone().startOf("month").week(); const lastWeek = today.clone().endOf("month").week() === 1 ? 53 : today.clone().endOf("month").week();

const calendarArr = () => { let result = []; let week = firstWeek; for (week; week <= lastWeek; week++) { result = result.concat( {Array(7) .fill(0) .map((data, index) => { let days = today .clone() .startOf("year") .week(week) .startOf("week") .add(index, "day"); //d로해도되지만 직관성

          if (moment().format("YYYYMMDD") === days.format("YYYYMMDD")) {
            return (
              <td key={index} style={{ backgroundColor: "red" }}>
                <span>{days.format("D")}</span>
              </td>
            );
          } else if (days.format("MM") !== today.format("MM")) {
            return (
              <td key={index} style={{ backgroundColor: "gray" }}>
                <span>{days.format("D")}</span>
              </td>
            );
          } else {
            return (
              <td key={index}>
                <span>{days.format("D")}</span>
              </td>
            );
          }
        })}
    </tr>
  );
}
return result;

};

return (

이런식으로 다 만들어놓고! 중간에 튜터님과의 면담 시간에 다른 사람들의 이야기를 듣고 fullcalendar로 노선을 갈아타게 되었다.
물론 fullcalendar로는 캘린더 뷰를 그리기 굉장히 쉬웠다. 
그리고 순조롭게(?) 리덕스 훅으로 잘 가져오고 콘솔로도 잘 찍어줬지만 리듀서와 액션 생성자를 만들때 그만 CREATE를 CRAETE로 적는 실수를 하게 되고 거짓말 안하고 쟤 때문에 하루를 날렸다 ㅜ ㅜ 오타일거라는 생각은 못하고 action, initialState, Action Creator, Reducer, Store를 모두 다 쪼객고 분해하고 컴포넌트와 데이터 연결이 잘못되었는지 다시 찍어보고 ,,,
차라리 파이어베이스를 연결해보면서 오타를 찾을 수 있었을텐데 하는 아쉬움이 남는다. 

그렇지만 그때 제대로 리덕스와 다른 기초개념들을 공부해둔 덕에 2주차를 오히려 수월하게 (?) 보내고 있다.

### 3. 깨달은 점
- 코드를 아끼지 말자 이때까지 해놓은거 날라갈까봐 야금야금 손 보느라 오히려 더 큰 시간을 허비했다

- 나를 믿자. 
자신이 없어서 다른 사람들이 하는 방식대로 하는 건 하지 말자 (다른 사람들을 무조건 따라하지 말자는 의미가 아니라 '나에게 자신이 없어서'가 이유가 되게하진 말자

- 더 적극적으로 질문하자. 
물론 해보지도 않고 질문하는건 너무 나에게 치사한 방법이지만, 해도해도 안되는걸 계속 붙잡고 있는 것도 미련한 짓이다. 어려움을 겪고 있는 내용, 시도해본 방법등을 잘 정리해서 공손하게 물어보자.

- 어쩔 땐 move on이 도움이 된다
안되면 되게하라! 가 나의 신념은 아니지만 해결되지 않은 찝찝함을 가지고 뒤로 넘어가고 싶지 않았다. 하지만 그게 결국 정도는 아니더라. 정말 크리티컬한 오류가 아니라면 일단 체크해두고 살짝 넘어가보면 내가 이해하지 못했던 개념을 이해해서 해결될 수도 있고, 오타^^를 확인해서 해결할 수도 있고, 그래도 결국에 해결되지 못하면 그때가서 제대로 파보는 편이 좋을 것 같다. 

### 4. 이번 한 주는
강의에 집착하지 않고

개념을 더욱 단단히 잡고

완성한다 ! 

        @       굉장히 굉장했던 한 주였다!      @

1. 팀이란

알고리즘 2주차로 넘어와서 새로운 팀을 만나게 되었는데 원님,도님과 함께하였다. Week 3의 WIL을 작성하는 지금 Week 3를 원님, 도님과 함께할 수 있어서 얼마나 다행이었나 ~ 라는 생각이 든다.

문제 푸는 것에 '만' 집착하고, 못하는 것만 눈에 보이던 나에게 문제 푸는 것만 중요한게 아니고! 개념에 집중해봐요! 라는 분위기를 함께 만들어주셨다. 힘이 들땐 서로가 힘이 되어주고, 끌어줄 때는 또 확실하게 서로 끌어주는 경험을 하면서 이게 팀이구나! 느낄 수 있었다.

대학에서 전공 공부를 할 때 생각이 많이 났다. 공부라는게 혼자 책만 주구장창 판다고 다 알 수도, 이해할 수도 없다. 오히려 과방에서 친구들이랑 이야기하다가 번뜩 이해가 될 수도 있고 오히려 잘못 잡고 있던 방향이 수정될 수도 있다. 이번 팀에서 그런 경험을 참 많이 했다. 서로 잘 모르는 상황이지만, 서로가 아는 것을 공유하고 나누면서 정말 우린 각자 가진게 10씩인데 함께 모이니 30이 된 경험을 했다. 힘들고 어렵다고 우리가 그동안 해온 공부가 다시 0이 되지 않았다. 서로가 서로에게 그 점을 상기시켜줄 수 있었다. 문제를 푸는 걸 어떻게 팀으로 함께할 수 있고, 팀으로 해서 어떤 효과가 있는걸지 의문이었던 나에게 팀이란 이런거다! 라고 알 수 있게 해준 감사한 팀이었다.

2. 자료구조, 알고리즘

16일에 TIL 1을 올릴만큼 자료구조, 알고리즘을 더 깊이 팔 수 있었다. 그럴 수 있었던 배경은 알고리즘 1주차에 했던 고민 덕이었다는 생각이 들어서 앞으로도 어려운 점을 무시하지 않고 계속 고민하고 해결할 수 있는 방향을 적극적으로 찾아야겠다는 생각이 들었다. 그렇다고 자료구조, 알고리즘에 통달한 것은 아니나 적어도 전처럼 겁먹지는 않을 수 있게 되었다. 이 정도면 잘싸웠고 계속 싸워 볼만하다!

3. 깨달은 점

알고리즘 2주차때는 내게 부족한 것이 수학적 개념인지 사고인지 구분할 수 있게 되었다. 나는 내게 수학적 사고가 아예 존재하지 않는다고 생각했는데, 수학적 사고가 아니라 그 수학적 사고를 도와줄 실제적인 수학적 개념(공식 등등)이 부족한 것임을 알게 되었고, 부족한 수학적 개념을 채워주니까 알고리즘이 그렇게 어렵지 않았다! 이 사실이 나에게 큰 희망과 자신감으로 다가왔다.

물론 수학적 사고도 많이 부족하다. 그런데 내게 부족한 부분보다 내가 할 수 있는 부분에 초점을 맞추니까 힘이 났고 해결할 수 있는 문제라고 생각이 들었고 해결할 수 있었다. 이래서 동일한 상황에서도 어떻게 생각하느냐에 따라 행동이? 결과가? 다를 수 있구나! 생각의 힘! 을 알게 되었고 어려운 상황을 마주했을 때 어떻게 해결할 것이냐~ 보다 어떤 태도로 마주할 것이냐!가 먼저 되어야 한다는 걸 깨달았다.

4. Week 4 나아가야 할 방향과 태도

Week 1에서 깨달았던 도둑놈 심보를 버리자! 는 태도를 잠시 잊었던게 분명하다.

알고리즘 팀장님이 당신도 처음에 공부했을 때 문제를 풀기 위해서 몇시간, 몇일씩 걸렸다고 이야기를 해주시는데 많이 도움이 되었다. 팀장님도 팀장님의 쌓아온 시간이 있었기 때문에 지금의 팀장님이 있는건데, 내가 고작 이틀 해놓고 다 알게 해달라는건 완전 도둑놈의 심보라는 걸 깨달았다.

정말 간사하게 몇일 더 문제 풀었다고 첫주의 깨달음을 잊다니! 다시 처음의 마음으로 돌아가자. 겸손하게 주특기 주차를 맞이하자. 배우지 않았으니까 모르고 어려운게 너무 당연해 ! 하지만 배우면 할 수 있어 ! 사람마다 공부의 습관도 받아들이는 시간도 태도도 다 천차만별이니까, 다른 사람과 나를 비교하지 말고 Week 1, Week 2, Week 3 시간을 보내오면서 느꼈던 것처럼 어제의 나보다 조금 더 알게 된 지금의 나에 초점을 맞추자 !

오늘 풀어본 문제

_자료구조, 알고리즘 공부는 백준 알고리즘에 올라온 문제들을 풀어보며 새로운 개념들을 공부하고 있다. _

• 동전
• ATM
• 약수
• 최대공약수와 최소공배수
• 이향 계수 1
• 다리놓기

새롭게 배운 내용

• 그리디 알고리즘 (탐욕 알고리즘)
  • '가장 큰 순서대로' or '가장 작은 순서대로' 같이 기준 제시함
  • 현재 상황에서 당장! 좋은 것만을 고르는 방법
    • 그래서 항상 최적을 해를 구하는 것은 아님 → 정당성 분석 중요함
    • 동적 계획법과 차이점: 그리디 알고리즘은 각 단계마다 지금 당장 최고의 방법을 선택하여 전체 문제의 답을 구한다

참고1. https://velog.io/@jiffydev/이론파이썬-알고리즘-그리디-알고리즘 참고 2. https://m.blog.naver.com/PostView.nhn?blogId=qpghnv&logNo=221597913108&proxyReferer=https:%2F%2Fwww.google.com%2F 참고3. https://gomguard.tistory.com/119

• 리스트 정렬

  • *reversed 함수 * for i in reversed(range(N)) 큰 숫자들이 앞으로 오게 할 수 있다

  • sort 함수 리스트로 정수들이 섞여서 입력받아질 때 최소값을 알기 위해 sort로 정렬!

    • sort의 key 옵션, key 옵션에 지정된 함수의 결과에 따라 정렬, 원소의 길이에 따라 정렬될 수 있음

      ```python
      >>> m = '나는 파이썬을 잘하고 싶다'
      >>> m = m.split()
      >>> m
      ['나는', '파이썬을', '잘하고', '싶다']
      >>> m.sort(key=len)
      >>> m
      ['나는', '싶다', '잘하고', '파이썬을']

      > 자료구조와 순차 자료형 정리가 잘되어있는 곳 [https://github.com/psygrammer/psytracker/blob/master/psytracker_2.md](https://github.com/psygrammer/psytracker/blob/master/psytracker_2.md)

• 유클리드 호제법 "정수 X 와 Y(X ≥ Y)가 주어졌을 때 X를 Y로 나눈 나머지를 R이라고 하면, X와 Y의 최대공약수는 Y와 R의 최대공약수와 같다. 그러나 X와 0이 남았을 경우 최대공약수는 X 로 한다"

• 유클리드 호제법을 이용한 최대공약수 최소공배수

    ```python
    x, y = map(int, input().split())
  
    def gcd(x, y):
        if y == 0:
            return x
        else:
            return gcd(y, x % y)
  
    def lcm(x, y):
        return x*y // gcd(x,y)
  
    print(gcd(x, y))
    print(lcm(x, y))
    ```

• 이항 계수

  • 이항계수(Binomial Coefficient)는 조합론에서 등장하는 개념으로 주어진 크기 집합에서 원하는 개수만큼 순서없이 뽑는 조합의 가짓수를 일컫는다.

  • ‘이항’이라는 말이 붙은 이유는 하나의 아이템에 대해서는 ‘뽑거나, 안 뽑거나’ 두 가지의 선택만이 있기 때문이다.

  • n개 중에서 k개를 간택하는 것은 선택받지 못할 나머지 (n-k)개를 선택하는 것과 같다.

    $$\binom{n}{k} = n C k = \frac{n!}{(n-k)!k!} (단, 0 \le k \le n) \quad \cdots 1$$

    from math import factorial
    factorial(n) // (factorial(n - k) * factorial(k))

    이항 계수 출처 https://shoark7.github.io/programming/algorithm/3-ways-to-get-binomial-coefficients

• sys.stdin.readline() 한 라인 입력 받을 떄

• sys.stdin() 여러 줄 입력 받을 때

고민한 내용

부족한 수학 개념에 관하여... 오늘 공부한 유클리드 호제법 같은 경우 최대공약수와 최소공배수를 구하는데 '더 쉬운' 방법을 알려줘서 아주 좋았다. 사실 유클리드 호제법은 몰라도 최대공약수와 최소공배수를 구할 수 있다. 하지만 문제 이항 계수 1은 어떠한 설명없이 이항 계수를 구하는 프로그램을 작성하는 것이 문제였다. ㅜ ㅜ 고등수학을 거의 몰라서 이렇게 한번씩 철저히 수학 공식에 의존한 문제가 나오면 잠시 아찔해지는 것은 사실이다. 만약 미국에 가지 않았다면? 돌아와서 검정고시를 보지 않고 한국에서 고등학교를 다니며 수학을 공부했으면 달랐을까? 라는 생각까지 했다. 하지만 분명한 것은 이번 알고리즘 주차를 지내면서 수학공식, 혹은 수학적 사고는 공부하면 알 수 있다는 자신감이 붙었다. 이항 계수 말도 어렵고 공식도 어려운 것 같았는데 알고보니 선택하거나 선택하지 않거나에 관한 공식이었다. 단지 지금껏 필요하지 않아서 알지 못했을 뿐이고, 이제 필요함을 느끼니 공부하면 되는 것이다!

오늘 하루 회고

어제까지 문제가 잘 풀리지 않아서 심적으로 힘들었었는데, 오늘은 그래도 수학 개념을 알면 풀어갈 수 있는 문제들 + 전날에 비해 비교적 난이도가 낮은 문제들이 모여있어서 쑥쑥 풀 수 있었다.

지난주 WIL 정리하면서 자료구조, 알고리즘, 파이썬 개념이 혼잡해서 어려웠어서 문제를 볼 때

1. 문제의 데이터들이 어떤 자료구조의 형식인지
2. 어떠한 알고리즘으로 풀어가야하는지
3. 필요한 파이썬 문법/함수는 무엇일지 계속 생각하면서 보자! 했었는데 확실히 문제를 다방면에서 보니 힌트를 얻거나, 해결방향을 정확하게 설정한 문제들이 많아졌고, 적어도 문제를 잘못이해하는 일들은 없어졌다.

진짜 문제는 아직 잘 못풀지만 알고리즘 정말 재미있다... 모르겠다...잘 못 풀면서 왜 재미있는지... 더 잘 풀고 싶다 !

더 공부해야할 것

• 링크드 리스트
• 클래스
• 한줄짜리 반복문

사실상 03/05부터 자료구조,알고리즘 주차로 넘어왔고, 현재 WIL을 작성하는 03/14일 기준으로 자료구조, 알고리즘과 만난지 10일째 되는 날이다. 아직 많이 어색하지만 하루 하루, 매 시간 마다 새롭게 배우는 즐거움으로 공부하고 있다.

1. 자료구조와 알고리즘?

자료구조, 알고리즘 1주차에 들어와서 초반에는 자료구조가 무엇인지, 알고리즘이 무엇인지, 왜 필요한지를 알아보기 보다 당장 주어지는 문제를 풀기 위해 파이썬 문법만 들여다 봤다. 자료구조와 알고리즘의 관계 + 파이썬 문법의 관계에 대해 생각해보고 공부해보지 않았더니 몇일 지나지 않아서 과부화가 걸렸다.

1주차에 주어진 문제들 중 초반에는 자료구조나 알고리즘을 공부하지 않아도 사칙 연산과 조금의 파이썬 문법으로 해결할 수 있는 문제들이 대부분이었다. 하지만 중반으로 지나가면서는 자료구조, 알고리즘을 먼저 생각해보고 공부하지 않으면 풀 수 없는 문제들이었고 자료구조와 알고리즘의 관계와 필요성에 대해서 생각해보게 되었다.

알고리즘

• 컴퓨터를 이용해 주어진 과제를 해결하기 위한 처리 절차
• 문제를 해결하기 위한 것으로, 명확하게 정의되고 순서가 있는 유한 개의 규칙으로 이루어진 집합

자료구조

• 컴퓨터에 정보를 효율적으로 저장하고 관리하는 방법
• 데이터 단위와 데이터 자체 사이의 물리적 또는 논리적인 관계

사진 출처: https://wayhome25.github.io/cs/2017/04/17/cs-18/

자료구조와 알고리즘의 차이

• 자료구조를 도서관의 책장에 책을 꼽는 것으로 가정을 할 수 있다면 도서관에 존재하는 많은 책장은 모두 규칙적으로 책이 진열이 되어있습니다. 그 규칙은 도서관마다 다르며 다양한 방법이 존재합니다. 예를 들어 ABC 알파벳 순서, 연도 순서, 책을 세로로 또는 가로로 진열을 합니다. 이렇게 데이터가 저장되는 형태 즉 데이터 표현 및 저장 방식을 자료구조라고 의미할 수 있습니다.

• 반면에 알고리즘은 앞에 예시를 들었던 도서관에 책이 순서되로 모두 진열이 되었다면 그 책을 찾는 것에 비교할 수 있습니다. 자신이 원하는 책을 찾을 때 책장의 왼쪽, 오른쪽, 위쪽, 아래쪽으로 책을 찾을 수 있으며 큰 책, 작은 책으로도 검색이 가능하며 심지어 무작위로도 책을 찾을 수 있습니다. 이러한 것과 같이 저장된 데이터를 명령 처리 및 제어 방법을 알고리즘이라고 의미할 수 있습니다.

  자료구조와 알고리즘의 차이 예시 출처: https://juyeop.tistory.com/9

*자료구조와 알고리즘의 관계 *

• 자료구조를 구현하기 위해서 알고리즘이 필요하다. (상호보완적이다)

• 자료구조의 알고리즘 : 데이터를 저장하고 탐색하는 방법에 대한 고민들

• 자료구조를 이용한 알고리즘 : 자료구조를 활용하여 어떤 문제를 해결하는 것

  https://wayhome25.github.io/cs/2017/04/17/cs-18/

따라서 각 자료구조들의 장단점을 숙지하면, 상황별로 적합한 자료구조를 선택할 수 있게 되어

1. 문제에 어떤 방향으로 접근하면 될지 생각하게 되고
2. 그에 필요한 해결 방법인 알고리즘을 통해 문제를 해결할 수 있게 된다

2. 무엇을 배웠는가

• 알고리즘

  • 기술계산

    • 유클리드 호제법(최대공약수)
      • 에라토스테네스의 체(소수)

  • 정렬(Sort)

    • 단순 선택 정렬
      • 단순 삽입 정렬

  • 검색(Search): 많은 양의 데이터 중에서 원하는 데이터 찾을 때

    • 선형 검색(리니어 서치)
      • 이진 검색(바이너리 서치)

  • 문자열 패턴 매칭

    • 단순 문자열 일치

• 자료구조

  • 배열
    • 1차원 배열
      • 2차원 배열
      • 3차원 배열
  • 리스트
  • 스택 (책 처럼 쌓이는 구조)
  • 큐 (줄을 서는 것 같은 구조)

• 파이썬 함수&문법

- 기본 연산자 
- 문자열
- 리스트 : 순서가 중요한 값 담기
- 딕셔너리: key:value로 값을 담는 자료형 
- 조건문
- 반복문
  for 문 : 몇번 돌지 알 때
  while문: 모를 때
- 집합 set()
    - 반복요소 제거
    - 차집합/교집합/합집합
- .count() 중복요소카운팅
- .upper() 대문자
- .replace() 대체
- math.ceil() : 소수점 올림
  math.floor() : #내림 
  math.trunc() : #버림
- f-string 함수 
- 재귀 함수 : 자기 자신 호출 

위의 내용들은 내 머릿속 + 책 + 강의의 짜집기로 틀릴 수 있다

결과적으로 큰 틀에서 어떤 자료구조의 형식을 가지고 있는지를 파악하고 접근해서 알고리즘을 통해 (+기본적인 파이썬 함수와 문법과) 문제를 풀어나간다는 점을 다시 머릿속에 저장해본다.

3. 어떤 알고리즘 문제들을 어떤식으로 접했는가

백준 알고리즘준 알고리즘 문제들을 난이도 하 ~ 중상 사이의 문제들을 접하면서 필요한 개념들을 익혔다.

백준 알고리즘 10250번 ACM호텔 문제를 예로 들어보면

1. 이 문제의 자료구조는 데이터들은 행과 열로 이루어진 2차원 배열의 모양을 하고 있다는 것을 확인하고
2. 테스트 케이스가 주어진 만큼 반복하면 되니까 반복문을 사용해서 문제를 해결하면 되겠다
3. 기본적인 수학개념으로 풀어야 하니까 파이썬의 기본 연산자 개념을 알아야겠다 이런 생각을 가지고 문제에 접근하고 풀이했다

t = int(input())

for i in range(t):  #테스트 케이스로 입력받은 수만큼 for문 반복
    h, w, n = map(int, input().split())

    num = n//h + 1 #호수:n에서 건물층수를 나눈 정수 부분의 몫 +1
    floor = n % h  #층수:n에서 건물층수를 나눈 몫의 나머지
    if n % h == 0:  # h의 배수이면,
        num = n//h #가장 꼭대기 층에 머물게된다 
        floor = h
    print(f'{floor*100+num}') #floor가 ***호가 되려면  *100해야함

4. 어려웠던 점

3번의 예시처럼 기본수학을 가지고 풀이할 수 있는 문제들은 쉽게 접근할 수 있었지만, 조금 높은 난이도의 수학을 요구하는 문제들은 꽤나 어려웠다. (해당 수학 공식을 이해하는데만 시간이 오래 걸렸다)

또 처음에는 알고리즘 문제에 대해서 자료구조, 알고리즘, 파이썬 함수 문법등을 배워가고 필요한 개념들을 익히는 수단으로 사용했었는데 뒤로 가면 갈 수록 문제를 푸는 것에'만' 집중하게 되고 고민을 짧게하고 바로 검색해서 정리된 다른 사람의 코드를 보려고 하는 나쁜 습관이 생겼다.

알고리즘 2주차에 접어든 지금 시점 생각해보면, 1주차에는 긴시간 혼자 풀어보고 저녁에 한 번 팀원과 문제를 풀었던 방식으로 생긴 나쁜 습관 같다. 나 혼자 해결이 되어야 했기 때문에 (다음 문제를 풀어야 하니까) 어느정도 되면 넘기고 했었는데,

이제는 다시 처음으로 돌아가 개념을 쌓는데 도움이 되는 수단으로 알고리즘 문제를 생각해야겠다. 필요한 개념들이 쌓이면 문제는 절대 풀 수 있다! 문제는 절대로 풀린다!

5. 깨달은 점 + 도움이 되었던 글/생각

• 배우면 배울 수록 문제 푸는데 더 어려움을 느끼고, 그 이유가 개념들이 정확하게 머릿속에서 정리되지 않았고 그런 상황에서 문제 풀이에만 달려들었기 때문이라는 것을 알게된데는 함께 항해하는 크루원분의 블로그를 우연히 보게 된 이후였다. 그분의 기록이 나에게 큰 도움이 되어서 너무 감사했다. 다양한 사람들의 이야기를 들을 수 있는 것이 함께 모여 공부할 때 얻을 수 있는 최대 이점인 것 같다. 그날 이후로 문제에 대해 조급한 마음을 갖지 않고, 개념을 쌓으면 문제는 풀린다! 는 마음으로 임하게 되었다.

• 하나의 문제를 풀고 해당하는 자료구조, 알고리즘, 파이썬 개념들을 안다고 자만했던 나. 동일한 유형의 문제가 나왔는데도 못 알아봤다. 답답한 마음에 유튜브에 '코드를 한줄도 못쓰겠다'는 찡찡거림을 검색했는데(?) 많은 학생들이 겪고 있는 '개념-문제 괴리 현상'에 대해. [개념 공부법] 고3공부 영상이 나왔고 혼났다... "개념과 그 개념의 용도까지 알아야 개념을 안다고 할 수 있다." 문제를 이해하지 못하고, 개념을 이해하지 못했는데 어떻게 코드가 나올 수 있나!

• 개발일지를 적어보려고 이것저것 서핑하다가 outsider님의 블로그 글에서 Don't learn to code. Learn to think.라는 제목의 글을 읽게 되었다. 프로그래밍은 문제를 해결하는 일이고 이를 위해서 생각하는 방법을 배우는 것은 중요하다. 문제를 풀때 아직 코드를 한 줄 더 쓰지 못한다고 괴로워하지 말고, 생각을 한 줄 더 쓸 수 있어진 것에 더 초점을 두자!

6. 다가오는 한주에는

• 최소한의 파이썬 문법들과 더 친해지기
• 자료구조, 알고리즘 개념들 대충 넘어가지 말고 내껄로 만들기
• 매일 접하게 되는 방대한 지식과 개념에 압도되지 않고 찐-항해하기

막연히 철학 공부를 더해야하나 싶었는데 어쩌다 정신을 차려보니 주니어 개발자로의 항해에 승선해있었다.

마지막 전공 프로젝트(철학자 유형 테스트)때 유형 테스트로 만들지 못해서 알아보던 웹 개발에 관련된 정보들과 작은 프로젝트가 나를 이곳까지 이끌었다니 정말 어떻게 될지 모르는게 인생이라더니! !

1. [Chapter1] 웹개발 미니 프로젝트

시작하자마자 미니 프로젝트가 주어졌다. 팀원들과 만나서 인사하고 다른 이야기를 나누지도 못하고 바로 어떤 사이트를 만들지에 대해서 아이디어 회의를 했다. 생각보다 빠르게 주제가 잡혔고 어떤 기능들을 구현해야할지 이야기해보고 대략 롤을 나누고 개발을 시작했다.

나는 웹 스크랩핑을 맡았고 Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링의 장점에 대해서 알아오기로 했다.

먼저 Jinja2 템플릿 엔진을 알아보기 시작했는데 이 한 문장의 모든 단어가 생소했다. 그래서 차근 차근 템플릿 엔진이 무엇인지/ Jinja2는 뭐고/ 서버사이드 렌더링은 무엇인지 알아봤다.

1-1. 템플릿 시스템(Template System)의 종류 : 템플릿(Template)와 결합되는 위치에 따라 종류를 나눌 수 있다.

서버 쪽(Server Side) : 웹 서버(Web Server) 클라이언트 쪽(Client Side) : 웹 브라우저(Web Browser) Edge-Side : 프록시 서버(Proxy Server) 분산(Distributed) : 다수의 서버(Multiple Server) 서버 밖(OutSider Server) : 정적 웹 페이지(Static Web Page)는 Offline에서 제작되고 웹 서버에 업로드 된다.

출처 gmlwjd9405.github.io/2018/12/21/template-engine.html 템플릿 엔진을 사용했을 때의 장점

Html 코드 안에서 연산작업 수행 가능, Html 안에서 파이썬 코드 작성할 수 있음 중복된 코드를 줄일 수 있음

출처 m.blog.naver.com/PostView.nhn?blogId=mksun8472&logNo=221552606651&proxyReferer=https:%2F%2Fwww.google.com%2F

*1-2. 사이드 렌더링 *

Client-side rendering(CSR): 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법 Server-side rendering(SSR): 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법

*1-3. Jinja2 템플릿 엔진 *

Flask 프레임워크에서 사용하는 템플릿 언어

'템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할을 한다.

Jinja2 기초적 문법

{{ 변수명 }}

{% 파이썬 소스코드 %}

변수를 사용해서 웹페이지를 즉각적으로 수정하고, 입력에 따라 웹페에지의 표시 내용을 변화시킬 수 있다 상속이라는 개념을 통해 중복된 코드를 줄이고 논리적으로 코드를 짤 수 있다

출처 www.youtube.com/watch?v=pb-DDSdqD-I

*2. 본격적인 개발 시작 *

웹 스크랩핑을 이용해 원하는 정보를 가져와서 mongodb에 넣어 ajax를 이용해 페이지에 붙여넣는 작업을 했다.

이후에 강의를 참고하면서 jinja2 템플릿을 이용해서 정보를 가져와 붙이게 수정했다.

개념들을 공부하는데 너무 많은 시간을 할애했고 주어진 강의를 먼저 쭉 훑어라도 봤으면 시간을 좀 단축할 수 있었을텐데 (ㅠㅠ) 무대뽀로 구글! 도와줘! 해버린 바람에 오히려 시간이 너무 많이 걸렸고 걸린 시간에 비해 이해도는 낮았다.

조급함에 막 검색할 시간에 차분히 강의 자료라도 볼걸. 이렇게 삽질을 한 후에야 어떻게 주어진 자료들을 활용해야할지 감이 좀 잡혔다.

그나마 뭐라도 적어볼 정신이라도 있었던 2일 3일

*3. 결과 *

결국 jinja2 템플릿에 대한 이해가 주어진 시간의 끝까지 이루어지지 못해서 검색 기능/마이페이지 찜하기 기능 등 다른 서비스들을 만들지 못했다.

하지만 이건 전적으로 시간의 부족 문제이기 때문에 다음에 꼭 해보려고 한다.

팀장님의 날카로운 판단과 팀원님의 하드캐리로 멋진 사이트가 완성되었다.

뿌듯함과 동시에 아쉬움이 크게 남았다. (이미지를 데려올 때 조금 더 고화질의 이미지를 데려올 수 있었을텐데 - 페이지 우회했던 것처럼)

그래도 어쨌든 완성이 되는구나! 어떻게든 할 수 있었다는 좋은 기억으로 남을 것 같고, 앞으로의 여정에서도 막막할때마다 이 때의 시간을 기억해보면 좋을 것 같다는 생각을 했다.

*4. [Chapter1] 웹개발 미니 프로젝트 성찰 *

내 자신에 대해 돌아보고, 나의 악순환을 발견할 수 있었다.

아는 것이 없다는 생각이 뇌를 지배해서 쓸데 없이 조급한 마음을 가진다 -> 그런 조급한 마음이 프로젝트를 수행할 때 긍정적인 도움이 전혀 되지 않음 -> 그래서 결국 발 동동 구른 시간에 비해 알아낸 결과가 적음 -> 난 아무것도 몰라 라는 부정적인 생각이 들어서 조급해짐 ---> 무한반복

• 팀원분들에게 도움이 되지 않는다는 생각에 죄송해 죽을 것 같은 마음을 가짐 -> 뭐라도 해야할 것 같아 조급해짐 ->실수/아무것도 못함의 반복

이런 나의 악순환이 팀에게도 안좋은 영향을 끼친다는걸 알았다. 물론 나에게는 더.

5. [Chapter2-1] 자료구조, 알고리즘

우리 팀은 먼저 각자 문제를 풀어보고, 함께 모여서 각자 쓴 코드를 리뷰하고 문제를 함께 풀이해보는 방식으로 진행하고 있다.

각자 문제를 풀어보는 시간에는

1. 문제를 최대한 이해한다

2. 문제를 푸는데 필요한 방법들에 대해서 생각해본다. (한국말로)

3. 내가 아는 파이썬 문법들을 생각해보며 이 문제를 어떤 방식으로 풀지 생각해본다. (파이썬)

4. 파이썬 문법 강의 + 강의 자료들을 참고하면서 생각해본다.

5. (잘 정리된) 다른 사람의 코드만 보고 이해해보려고 한다.

6. 최대한 혼자 이해해보고 그 사람의 설명을 본다.

7. 내가 한번 풀어본다.

8. 내가 한 풀이와 참고한 코드를 비교한다.

9. 새로 알게된 문법을 공부한다

이런 흐름을 계속 돌리고 돌려가며 공부한다.

그리고 만나서 같이 코드 리뷰 해보는 시간을 갖는다.

나는 내가 쓴 코드라고 하기엔 다 가져와서 최대한 이해해본 코드임을 이야기하고 설명해보는데,

내가 이해했다고 생각하지만 막상 설명을 하려니 아무말도 나오지 않았다. (제대로 이해하지 못했다는 의미)

그래서 또 좌절하고 ㅜ ㅜ ,,

6. 느낀점

알고리즘 주차로 들어온 5일 6일에도 챕터1때의 악순환의 생각의 꼬리를 끊어내기가 너무 어려웠다.

혼자 공부하면서 절대 갖지 않았던 생각이었는데 팀으로 함께하다보니 지나치게 남을 의식하고, 폐끼치는걸 제일 싫어하는 나에게 너무 힘든 시간이었다.

인생을 살면서 이렇게 팀플에서 버스를 탔다고 생각한 것도 처음이었기 때문에 더 그랬던 것 같다.

알고리즘 팀장님이 당신도 처음에 공부했을 때 문제를 풀기 위해서 몇시간, 몇일씩 걸렸다고 이야기를 해주시는데 많이 도움이 되었다. 팀장님도 팀장님의 쌓아온 시간이 있었기 때문에 지금의 팀장님이 있는건데, 내가 고작 이틀 해놓고 다 알게 해달라는건 완전 도둑놈의 심보라는 걸 깨달았다.

모르는건 죄송하고 미안할일이 아니다.

모른다고 계속 죄송해하고 미안해하면,

나에게도 상대방에게도 나는 몰라서 죄송하고 미안한 애에요! 라는 생각만 심어줄 뿐이다.

알아가려고 하지 않고 모른다고 엉엉 울고있는건 잘못하고 있는거다.

아직은 모르지만 공부하면 곧 알아가게 될 거다. 늘 그래왔으니까 ! 나에게 시간을 주자.

도둑놈 심보 내려놓고 내 위치를 알고 겸손하게 공부하자.

*7. 다가오는 한 주는 *

모르는 것에 대해서 팀원분께 죄송하고 미안한 마음 갖지 말기

열심히 공부하고 있는 나 칭찬해주기

알고리즘이랑 친해지기

하루하루 최선을 다해서 주어진 문제랑 씨름해보기