[Day 18] 2022-0718 : solo 프로젝트 -1

오늘 배운 것

• git 활용을 위한 기본 명령어 정리

[GIT] GIT 활용을 위한 명령어 정리

• 소수 판별 알고리즘 - 에라토스테네스의 체 풀이 정리

[알고리즘 JS] 프로그래머스 LV.1 소수 찾기

• 코드스테이츠 Section01 솔로 프로젝트 절반(??) 진행 

새롭게 알게 된 것

• 컴포넌트 단위 : 하나의 역할 (예를 들면 하나의 기능)을 하기 위한 작은 것들의 집합 
  질문들이 모인 디스커션 파트가 하나의 컴포넌트 > 내부에 각각의 질문들 또한 하나의 컴포넌트
• Date 객체로 현재 날짜와 시간 구하기

const date = new Date();

{ createdAt: 
`${date.getFullYear()}년 
${date.getMonth() + 1}월 
${date.getDate()}일 
${date.getHours()}시 
${date.getMinutes()}분`,
}

• DOM 생성 후 배열 내의 데이터 활용하기

// li 엘리먼트 생성 함수
const convertToDiscussion = obj => {
  // Wrapper 엘리먼트 생성
  const avatarWrapper = document.createElement('div');
  avatarWrapper.className = 'discussion__avatar--wrapper';

  // Wrapper 엘리먼트 내에 들어갈 img 요소 생성
  // attribute (클래스 이름, src 속성) 변경
  const avatarImg = document.createElement('img');
  avatarImg.className = 'discussion__avatar--image';
  avatarImg.src = obj.avatarUrl;

  // 해당 내용을 Wrapper 엘리먼트에 append
  avatarWrapper.append(avatarImg);
}

// 작성한 엘리먼트 생성함수에 객체를 넣어 만든 li 를 ul 내부 최상단에 추가.
let li = convertToDiscussion(obj);
ul.prepend(li);

• 배열의 여러 데이터를 활용해 렌더링 할 때에는 반복문을 활용한다.

const render = element => {
  for (let i = 0; i < obj.length; i += 1) {
    element.append(convertToDiscussion(obj[i]));
  }
  return;
};

• 이렇게 해서 탄생한 오늘까지의 결과물

solo project : 아고라 스테이츠 디스커션 구현하기

• 보통 개발 프로세스가 기획 -> 디자인 -> 퍼블리싱 -> 기능 구현 이라고 생각해서, 먼저 모든 디자인과 퍼블리싱을 다 끝내는 것에 주력했다. 편안한 간격과 쾌적한 디자인을 추구하고 싶어서 1px과의 싸움을 많이 했다. 그래도 여전히 불편한 점이 많지만 기한 내에 기능을 완성하는 것 또한 미덕이니 이쯤 하고 넘어가야겠다.
• 현재 페이지네이션과 로컬 스토리지 저장까지는 구현이 안되어있어서 내일은 그 부분에만 집중해서 작업하려고 한다.

SUMMARY

잘 한 것

• 코드스테이츠 정규 시간 동안에는 최대한 집중해서 한 것.
• 오늘 까지의 목표를 잡고 진행한 것.
• 강의, 알고리즘 미루지 않고 진행한 것.

보완할 점

• 집중력이 낮은 것 같다. 집중력 올리기
• TIL 쓰고 운동하러 갈 것임. 
• 밥을 잘 안 먹는다. 오늘 먹은 것
  : 아몬드 조금/ 커피/ 계란 2개/ 삼김 1/ 아몬드브리즈 1/ 저녁 불닭 1 ... 밥 다운 것이 없다.
• 공부는 어찌 저찌 하는데 시간표 계획되로 되지는 않음. 보완할 것. 

느낀 점

• 과제 난이도가 생각보다 높았다. 처음에 어떻게 접근해야할지 감이 하나도 안왔는데 어찌저찌 하다보니 되긴 되었다. 이런 html 컴포넌트를 쉽게 만들기 위해 리액트 라이브러리를 쓴다고 알고 있는데, 오늘 직접 해보니 리액트를 빨리 배우고 싶다. ㅋㅋ
• 오늘 하루 열심히 한 나.. 칭찬해~