20.06.22-27 코딩 공부

[이번주 공부한 것]

1. twittler 함수형 프로그래밍으로 다시 작성하기
2. 타임 스탬프 형식 수정
3. filtering 기능 구현

[세부 내용]

1. twittler 함수형 프로그래밍으로 다시 작성하기

 : 해커톤 때 배운 방식대로 다시 코드를 리팩토링하였다.

https://s-realstory.tistory.com/38

 

 

 

2. 타임 스탬프 형식 수정

1) Date.now()

  구현해야 하는 기능 중, 새로운 메세지를 입력할 때 입력했던 실제 시간을 출력할 수 있는 기능을 만들어야 했다. 

  기본적으로 실제 시간을 구현하는 메소드는 Date.now()가 있다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

 

2) .toLocalString()

  문제는 Date.now()는 1970.01.01 00시(UTC)이후의 '초'를 표시해주는 것이기 때문에 일반적으로 읽기에는 어려움이 많다는 것. 그렇기 때문에 1) 사람이 읽을 수 있고, 2) 현지 시간으로 출력할 수 있는 방법을 찾아야 했는데

 그 메소드는 .toLocalString이었다. 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

 

.toLocalString()의 대략적인 사용법은 아래와 같다.

const event = new Date; //현재시간을 1970년 1월 1일 이후로 '초'단위로 표현

const date = event.toLoclaString();

console.log(date); //현지 시간으로, 현재시간을 표현
//한국의 경우 2012. 12. 20. 오전 3:00:00 형식으로 표현

 

※ 참고 : 날짜+시간이 아닌 '시간'만 표현하는 메소드는 .toLocalTimeString이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

 

 

---

 

사용법 연습을 할 때는 변수명을 굳이 event로 하지 않아도 괜찮지만,

event 객체를 이용할 때나 특별한 상황(event를 줘야 하거나 다른 기능을 연결해야할 때)를 대비해서 변수를 event로 선언하는 것이 안전한 부분도 있는 것 같다. 이부분은 많은 경우를 연습해보진 않아서 확신은 없음.

 

일단 내 코드에는 아래와 같이 함수를 만들어 보았다.

//로컬 시간 표시 함수

function localTime(){

    const event = new Date();
    
    const date = event.format() 
    //format()은 주어진 파일에 기본적으로 제시된 함수였음.
    //시간 표시 형식을 맞춰주는 함수
    
    return date.toLocaleString()
    
}

 

 

 

3. filtering 기능 구현

  요구하는 기능 구현 중 가장 오랜시간을 투자해야만 했던 기능이다. 

  username을 클릭했을 때 해당 username이 같은 message들만 보여줄 수 있는 타임라인 구현 기능이었다. 

 

이를 위해서는 

1. username(div)에 클릭 이벤트 주기 

  1-1. 주의할 점은 기존에 출력되는 DATA message 외에 새롭게 출력되는 message에도 적용되어야 함.

2. 클릭 이벤트를 받은 username의 li 외에 다른 li는 지우기

(3. 가능하다면 GoBack 버튼을 만들어 filtering전의 모습으로 복구)

 

이렇게 진행이 되어야 했다. 당연히 모든 순서에서 한번 이상 에러를 먹음... 

이에 대해서는 글이 길어지니 다음 글에서 더 작성해보고자 한다.