아침 8시에 시작해서 새벽 2시30분에 블로그 포스팅까지 마치고 끝나는 지금 이 하루가 고통스럽게 힘들지 않아서 참 다행이다.
기획자와 개발자 사이에서 고민을 했던 나에게 개발이 힘들기만 한 일이었다면 부트캠프 과정 내내 정말 좌절스러웠을 것이다. 3주정도의 부트캠프 기간 동안 오히려 개발의 찐참맛( 삽질 삽질 삽질 '해결' ㅇ0ㅇ!!!!!!!!!)을 알게된 것 같아 힘들지만 나름 즐기면서, 몰입하면서 이어나갈 수 있는 것 같다.
스스로에게 칭찬이 인색하기에 오늘만든 Twittler는 스스로에게 칭찬글을 올릴 수 있는 PraiseYourself App으로 변경하여 만들고자 한다.
🎄오늘 한 일
✔️ Twittler 완성하기 : 오늘은 기본적인 HTML 과 CSS 로 UI만 만들어져있던 Twittler에 JavaScript로 숨을 불어 넣어주었다.
✔️ 1. HTML로 하드코딩 되어 있던 트윗들을 JS에서 DOM을 조작 하여 만든 트윗들로 대체한다. createElWithClass( tag, ...arg ) tag와 class이름들을 argument로 받아 목적에 맞는 element를 생성 bincEach ( parent, ...childs ) 자식노드(들)을 받아 부모노드에 전부 prepend하여 자식노드로 설정 makeTweetElWithData( tweet ) createElWithClass로 만든 listElement에 tweet인자로 받아온 트윗data의 값들을 넣어 하나의 listElement를 반환 getAllTweet ( tweets ) 여러개의 트윗data로 구성된 tweets 배열을 받아 각각 makeTweetElWithData( )를 실행시켜주고, 생성된 listElement들을 ulElement에 넣어 화면에 렌더링한다. ✔️ 2. 'tweet!' 버튼을 눌러 새로운 tweet을 등록할 수 있다. makeNewTweet( ) UserName, Commnet 인풋 값을 각각 읽어와 해당 값으로 새로운tweet객체를 만들고, 이 tweet를 tweets들이 담겨있는 전체DATA배열에 push 해준다. ulElement에 새로운tweet listElement 추가하고 렌더링하고 이후 Input 값을 초기화 시켜주며 마무리. ✔️ 3. 'check new tweet' 버튼을 눌러 새로운 랜덤 tweet을 하나씩 추가하여 보여준다. renderRandomTweet( ) 랜덤버튼을 누르면 실행되는 함수로 generateNewTweet( ) 함수를 사용하여 랜덤으로 선택된 tweet listElement를 받아 makeNewTweet( )에 인자로 넣어 실행한다. ✔️ 4. tweet 작성자 이름을 누르면, 해당 사용자가 작성한 모든 tweet만을 필터링하여 보여준다. filterByName( event ) ulElement의 자식노드를 모두 비워준 후, DATA.filter( ) 고차함수를 통해 클릭한 사용자(event.target.textContent)를 가지고있는tweets 배열을 생성. getAllTweet( filteredTweets ) 로 필터링된 tweet들을 렌더링해준다.
✔️ 5. 추가 구현 ( 뒤로가기 기능, 트윗작성 이후 경과시간을 표현하는 기능) goBack( ) 작성자 이름을 눌러 필터링하였을 때, 'check new tweet'을 '뒤로가기'버튼으로 바꾸어준다. 각각의 버튼 클릭 시 classList.add('show') 및 classList.remove('show')이용하여 class를 추가 및 제거해주고 css로 display 컨트롤 함. 버튼 클릭 시 renderAllTweet( DATA )로 기존DATA배열에 있는 tweets 들을 렌더링해주는 것으로 구현 getPastTime( ) Data() 객체를 이용하여 현재시간과 트윗이 작성된 시간의 차를 구하여 이를 초, 분, 시간, 일로 분류하고 상황에 맞게 반환시켜준다.
🎄기억할 것
✔️ 부모노드의 첫번째 자식으로 들어가도록 하는 방법 1) prepend : parent.prepend( child ) 2) parent. insertBefore( ) : parent. insertBefore( child , 들어갈 위치(parent.firstChild) )
✔️ 객체의 복사 issue
Problem makeNewTweet( randomTweet ) 으로 랜덤트윗을 만들고자 할 때, argument로 들어오는 tweet객체를 새로운 변수 newTweetData에 할당하려고 했지만 상수에 할당할 수 없다는 에러가 발생하였다.
Solution
객체는 단순 할당을 통해 복사할 수 없고 Object.assign( )을 이용하여 객체 복사를 진행할 수 있다. Object.assign( target , soures)는 target은 soures의 객체속성으로 덮어씌어지면서 직접적으로 target객체의 값을 변경하게 되고 리턴값으로 변경된(복사된) target을 반환한다. 따라서 할당을 해주는 것이 아니라 Object.assign( ) 을 실행하는 것으로 복사가 완료된다.
🎄더 공부할 것
✔️ Dom 을 직접적으로 핸들링하는 과정이 익숙하지 않다고 느껴져서 조금 더 실습을 통해 친숙해지면 좋을 것 같다.
✔️ 함수를 기능단위로 쪼개고, 재사용할 수 있는 부분을 함수로 만들어 주는 과정을 처음부터 설계하는 것이 조금 어려웠다. 함수를 무작정 만들기 전에 재사용가능성, 함수의 용도 , 분리가능성등을 더 고려하면서 코드를 짜면 좋을 것 같다.
댓글