wecode +18 (9/4)

배운 것/개발한 것/정리한 것

- 오전 : code Kata Day5 (완료)

1. 문제 : 

strs은 단어가 담긴 배열입니다.

공통된 시작 단어(prefix)를 반환해주세요.

 

2. 내 코드

const getPrefix = strs => {
  if (strs.length === 0) return '';
  
  //sort 기능을 사용하여 알파벳 순서로 배열을 정렬하고, 정렬된 배열의 첫 단어와 끝 단어만 비교한다.
  let result ='';
  let newArr = strs.sort();
  
  //정렬된 배열을 돌면서, 첫 단어와 끝 단어의 요소들이 같을 경우 result 변수에 넣어준다.
  for (let i=0; i<newArr[0].length; i++) {
    if (newArr[0][i] === newArr[newArr.length-1][i]) result += newArr[0][i];
    else break;
  }
  return result;
}

 

- 오후

1) 세션 1 : git 시험

 - git init : 해당 디렉토리에 git 초기화

 - git remote add origin "repository 주소" : 리모트 저장소의 주소를 내 로컬과 연결

 - git branch : master 브랜치가 아닌 신규 브랜치 생성

 - git checkout "브랜치명" : master 브랜치가 아닌 다른 브랜치로 이동

 - git add . -> git commit -> git push origin "브랜치명" : 변경 사항을 추적하고 커밋 후 원격 저장소에 푸시

 

2) westagram -> react 구현 (계속)

 - state과 props사용하여 댓글 달기 및 좋아요 기능 완료

 * 내일 짯던 코드 다시 리뷰하면서 복습. 

 ** push와 concat의 차이 항상 기억

내일 할 일

1. westagram -> react 구현 (계속)

 - 댓글 지우기 기능 추가

 * 1) 댓글 li 내의 삭제 아이콘에 함수 부여 (onClick = {this.removeComment})

   2) 컴포넌트 내에 removeComment 함수 선언 

   3) removeComment 함수 실행시 this.state 내의 comments 배열에서 해당 댓글 삭제 (filter 함수, 그리고 사용하려면 각 댓글별로 id를 부여해야할 것 같은데..)

 

2. 블로깅

 - #1. React props & event

 - #2. westagram 코드 리뷰 : props/state 통해서 댓글 및 로그인 활성화 등 기능 어떻게 구현했는지 블로깅

 - #3. 세션들 : HTTP, database

회고

아직 state과 이벤트 기능을 연결하는 것이 미흡함을 느낀다. 아니 좀 더 자세히 짚어보자면 render 되는 JSX 요소에 이벤트를 부여하고, 이를 컴포넌트 내의 함수와 연결하는 것은 괜찮지만, 실제 이벤트가 뿌려지는 부분에서 사용하는 자바스크립트 문법들 (map, filter등)을 잘 사용하지 못하는 것 같다.

 

너무 복잡하게 생각하는 방식을 고쳐야 한다. 결국은 1) 컴포넌트 내에 미리 설정되어야할 state값을 지정하고, 2) 컴포넌트 요소에 이벤트를 부여하고 이를 컴포넌트 내의 함수를 선언하여 서로 연결시켜주고, 3) 해당 함수 내에 setState을 사용하여 새로운 state값을 부여하고, +4) 필요하다면 이를 다시 render()함수의 JSX문에서 보여주는 것 (filter나 map사용해서)을 반복적으로 연습하자. 너무 어렵게 생각하지 말자. 

 

추가로 자바스크립트 문제들을 좀 더 풀어보면서 배열 함수를 연습해야 할 것 같다. 구글링해보는 것도 좋지만 특정 기능을 개발할 때 적어도 30분 정도는 혼자 생각해보는 시간을 가지고자 한다.