TIL_2023.02.24

이종현·2023년 2월 24일
0

Today_I_Learned

목록 보기
1/145
post-thumbnail

이제부터 기존에 작성했던 회고는 Today I Learned를 작성하면서 같이 작성하는 걸로 대체하려고 합니다.

1. 프로젝트(ToDoList)

1.1 피드백 다시 상기하고 계획 다시 세우기

ToDoList 프로젝트에 대한 멘토님의 피드백

  1. 비슷한 기능을 가지고 있는 함수와 변수들을 클래스로 관리
  2. 코드의 순서를 가독성있게 작성하기

두 가지 피드백을 반영해서 적절하게 와이어프레임을 진행했다고 보기는 어렵지만 이번에 웹사이트 구조를 생각해볼때는 나중에 어떤 기능들을 묶어서 클래스로 관리하면 좋을지에대해 생각하면서 와이너프레임 과정을 진행해봤다

기존에 작성했던 기능들을 최대한 가져오면서 좀 더 효율적으로 작성하고 가독성있게 작성하려고 노력해보려고 한다.

1.2 README 파일 작성하기

깃허브에 Pull Request 하려고 알아보던 중, iterm2에 등록되어 있는 git user.name의 변경이 원할하게 이루어지지 않아 여러가지를 시도해보았다. 처음에는 원인을 몰라 브랜치를 새로 생성하고 삭제하고를 반복하던 와중에 README 파일이 변경되었고 README에 대해 궁금해져서 알아봤다.

README 파일은 미리보기처럼 프로젝트 전반에 대해 설명하는 파일인 것 같다.

  • 프로젝트 소개 및 목적
  • 설치 및 사용 방법
  • 기술적 요구사항
  • 프로젝트 구조
  • 라이선스 정보

나는 설치 및 사용 방법과 라이선스 정보는 작성할 필요가 없다고 생각하여 나머지부분만 작성해보았다

아래 링크는 내가 나름 작성해본 README 파일이다.

# ToDoList Project

## 프로젝트 소개 및 목적

- To Do List 프로그램을 작성하여 일정 관리를 세 단계로 나누어 진행한다.

1. To do 탭에서는 해야할 일에 대해서 기록하고 관리한다.
2. Doing 탭에서는 진행중인 일에 대해서 기록하고 관리한다.
3. Done 탭에서는 완료된 일에 대해서 관리한다.

## 사용 방법

- nav 부분

1. Search Task에서 컨텐츠를 Title 별로 검색할 수 있다. (Entaer 또는 돋보기 Click!)
2. 페이지 상단에 ToDoList를 클릭하면 메인페이지로 새로고침된다.

- mainBody 부분

1. '+ 버튼' 또는 '+ New 버튼'을 이용해서 컨텐츠 박스를 추가한다.
2. Title 부분에 컨텐츠 제목을 입력한다.
3. text 부분에 컨텐츠를 입력한다.
4. 왼쪽 화살표 버튼으로 Done 에서 Doing으로 Doing 에서 To Do로 이동할 수 있다.
5. 오른쪽 화살표 버튼으로 To Do 에서 Doing으로 Doing 에서 Done으로 이동할 수 있다.
6. 쓰레기통 버튼으로 컨텐츠박스를 삭제할 수 있다.

## 기술적 요구사항

- nav 부분

1. Search Task에서 텍스트를 검색하면 텍스트가 포함되어 있는 컨텐츠 박스의 타이틀 중에서 필터된 것들만 검색된다.
2. Search Task부분을 클릭하게 되면 텍스트는 사라지고 focus만 남는다.

- mainBody 부분

1. '+ 버튼'으로 컨텐츠 박스를 추가하면 처음에는 타이틀만 입력할 수 있는 컨텐츠 박스가 생성되고 컨텐츠 타이틀을
   입력하는 순간 텍스트가 입력될 수 있는 박스가 추가적으로 생성된다. (가장 아래 부터 추가적으로 생성)
2. 왼쪽, 오른쪽 화살표 버튼에 따라서 컨텐츠가 자연스럽게 이동할 수 있다.
   (해당 분류의 제일 마지막 컨텐츠로 이동한다.)
3. To Do, Doing, Done 타이틀 옆에 텍스트로 컨텐츠 수량을 카운트 할 수 있다.
4. To Do, Doing, Done 부분을 클릭하면 해당 섹션만 볼 수 있다.
5. 왼쪽, 오른쪽 화살표 버튼과 쓰레기통 버튼은 마우스로 hover시 아이콘이 등장하게 된다.
6. 컨텐츠 박스의 타이틀 부분을 클릭하면 수정할 수 있다.
7. 컨텐츠 박스의 텍스트 부분을 클릭하면 수정할 수 있다.
8. 컨텐츠 박스의 텍스트 부분을 평소에 보여질 때는 일정한 크기로 있다가 컨텐츠 부분을 많아지면 자동적으로 컨텐츠 만큼 늘어난다. 그리고 컨텐츠가 기존 박스보다 커질시 마우스를 hover하게 되면 모든 텍스트를 볼 수 있다.

## 프로젝트 구조

웹사이트의 구조는 이미지 파일로 첨부하도록 하겠습니다.

1.3 HTML

와이어프레임 한 걸로 새롭게 HTML을 작성해봤다. 나중에 CSS랑 JavaScript 구현하면서 HTML 코드를 수정하는 경우가 있지만 처음에 구조 잡는 건 어렵지 않게 하는 것 같다.

최대한 처음에 내가 생각했던 기능들을 모두 담아낼 수 있으면서 조금 더 사이트 구조를 간결하게 만드는 방법으로 생각해봤다. (그렇다고 또 그렇게 깔끔한 것 같지는 않다.)

1.4 깃허브에 Pull Request 날려보기

SSH 키를 생성해서 새로 등록하는 과정에 대해서 잘 몰라서 한참을 헤매다가 결국 해결하고 로컬에 원하는 위치에다 Clone해서 작업하고 push origin 한 다음에 깃허브 사이트에 가서 Pull Request하고 멘토님한테 설명할 부분에 대해서 나름 코멘트도 남겨보았다.

처음부터 연습한다는 생각으로 HTML 부터 하나씩 Pull Request 날려볼 생각이다.

2. 이론공부

2.1 변수 부분 블로그 글쓰기

현재 변수에 대해서 전반적으로 공부하고 정리한 뒤 블로그에 글을 남기려고 일주일 째, 하루에 조금씩 시간 내서 공부하면서 글을 다듬고 있다.

변수에 대한 정의부터 시작해서 코드 상에서 전역 변수와 함수안에 지역변수들이 실행 컨텍스트 스택에 어떻게 생성되고 메모리는 어떻게 할당되어지는지 변수의 간단한 설명으로 끝나지 않고 다른 자바스크립트의 여러가지 개념들(실행 컨텍스트, 스코프, 호이스팅, 메모리관리 등..)과 같이 자세하게 설명하는 글을 작성하고 있다.

하루에 조금씩 시간을 내서 작성하고 있기 때문에 꽤나 오래걸릴 것으로 생각하고 있다.

2.2 HTTP

같이 멘토링을 진행하고 있는 팀원과 인프런의 HTTP 강의를 참고해서 매일 조금씩 시간을 내서 공부하기 했다.

일단 오늘은 간단한 소개 영상과 IP,TCP,UDP,PORT,DNS에 대해 가볍게 강의를 보는 정도로 공부했다.

3. 회고(Retrospective)

3.1 프로젝트 회고

일주일 동안 혼자 스스로 ToDoList 프로그램을 나름 만들어봤다.
일주일 동안 만들어보고 멘토링시간의 피드백과 코칭상담을 통해 프로젝트를 어떻게 진행하면 좋을지에 대해 나름 정해봤다.

혼자 고민하는 시간도 중요하지만 다른 사람들의 코드를 기능별로 참고해서 이해하고 사용하는 것도 중요하다는 것이다.

고민은 1시간을 넘기지 말고 다른 사람들의 코드도 최대한 많이 참고해보자.

KPT

  • Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
    • README 파일을 처음으로 작성해봤고, 나름 만족한다. (피드백을 받고 수정할 부분은 수정하자.)
    • HTML도 나름 내가 가지고 있는 지식 안에서 최대한 Semantic Tag를 활용하고 id와 class의 차이점을 고려해서 작성해보려고 해봤다.
  • Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
    • 깃허브 관련해서 명확하게 이해하고 있지 못하고 있는 것 같아 무엇인가 새로운 걸 해야할 때 항상 시간을 오래 잡아먹는 것 같다.
  • Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)
    • 내가 먼저 작성해보고 다른 사람들의 코드도 참고해보는 습관을 들여보자.

3.2 이론공부 회고

4L

  • Liked (좋았던 점)
    • HTTP - 집중력이 떨어질 때 인강을 들으면 유튜브로 쓸데 없는 영상을 보는 행동을 차단할 수 있다.
    • 변수공부 - 글을 자세하게 작성하려고 노력하는 것 자체가 어려운 과정에 속한다. 어렵게 공부한다는 것은 나중에 장기 기억으로 남아있을 수 있는 확률이 높기 때문에 이렇게 공부하는 방식을 유지하려고 한다.
  • Lacked (아쉬웠던 점)
    • HTTP - 강의를 듣고 아주 간단하게라도 좋으니까 강의를 듣고 난 뒤 글로 정리를 해보자.
    • 변수 공부 - 어떻게 글을 쓸까 고민하다가 다른 쓸데없는 생각으로 빠지는 경우가 많았다.
  • Learned (배운 점)
    • HTTP - 이론을 내 언어로 자꾸 바꿔서 표현해보는 걸 연습하는 것이 그 무엇보다 중요하다는 생각이 들었다. 지금 듣고 있는 강의는 최대한 듣는 사람을 위해서 쉽게 전달하려고 만든 강의라고 생각한다.
    • 변수공부 - 깊게 공부하는 것도 중요하지만 이 또한 너무 오래 붙잡고 있지는 말자.
  • Longed for (앞으로 바라는 점)
    • HTTP - 처음부터 세세하게 공부하지 말고 큼지막하게 이해하고 점점 살을 붙혀나가는 방식으로 공부하자. (멘토링 때 배웠던 걸 참고하자.)
    • 변수공부 - 이론을 이론에서 끝내지 말고 코드 안에서 활용할 수 있는 방법은 없을지 항상 고민하면서 공부하도록 하자.

3.3 전체회고

5F

  • Fact (사실: 무슨 일이 있었나?)
    • 오늘 하루 7시간 정도 공부했지만 실제 코어시간은 4시간 정도 밖에 안되는 것 같다.
  • Feeling (느낌: 무슨 느낌이 들었나?)
    • 좀 더 집중력을 올리는 방법을 찾아보자.
  • Finding (배운 점: 어떤 인사이트를 얻었나?)
    • 지금 나에게 가장 필요한 공부가 무엇인지를 고민하고 왜 지금 이 공부를 하고 있는 것인지 나에게 항상 되물어보자.
  • Future action (향후 행동: 앞으로 무엇을 해야 할까?)
    • 내가 가지고 있는 고민에 대해 주변사람들과 멘토님에게 알리고 조언을 받으면서 내 생각에만 너무 갖혀있지 말고 나를 최대한 객관적으로 바라볼 수 있는 상황을 많이 만들자.
  • Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?)
    • 피드백은 아직.. 이 부분은 나중에 피드백을 받은 뒤 한 번에 정리해서 작성해보자.
profile
데이터리터러시를 중요하게 생각하는 프론트엔드 개발자

0개의 댓글