[TIL] #15. 나만의 아고라 스테이츠 만들기

2022.4.26. (화)

1. 오늘의 소감

• ‘나만의 아고라스테이츠 만들기' 과제는 정말 어려웠다. 딱 Bare Minimum 까지만 완료했는데도 진이 빠졌다. 실제로 화면에 구현되는 코드를 작성하는 건 재밌었지만, 막히고 찾고, 막히고 찾고, 하는 부분이 많아서 진행 속도가 더뎠다. 그러면서 직접 부딪히면서 새로 알게 된 내용들도 꽤 되는 건 좋지만… 아직 더 공부해야될 게 많다는 걸 절실히 느낀 과제였다. 어드밴스드 단계까지 진행하지 못한 건 많이 아쉽다…
• 저녁에 갑자기 이전 페어분께 연락이 왔다. ‘디스커션 추가’ 파트를 알려줄 수 있냐고 내게 여쭤보셨는데, 사실 나도 어떻게든 머리를 쥐어짜내 굴러가게 만든거라 깔끔하게 설명할 자신이 없었다. 하지만 남에게 알려줘야되니 한 번 더 구조를 눈에 익히고 의사코드를 작성해 코드를 리팩토링하였고, 그러고 나니 코드 이해가 잘 이해돼 나름대로(?) 열심히 설명해드릴 수 있었다. 역시 다른 사람에게 가르쳐보는게 제일 좋은 공부인 거구나… 오늘 한 코딩 중 가장 까다로운 부분에 속했던 ‘디스커션 추가' 기능은 확실하게 이해할 수 있어서 뿌듯했다.
• 페이지네이션과 LocalStorage 파트는 아직 진행하지 못했다. 제대로 공부 후 다시 적용해볼 예정이다.😇

2. 학습한 키워드

• element.prepend(), 이벤트 - change, blur, 마크다운 체크박스, element.setAttribute(’disabled’, true)
• 맥에서 gif 파일 보는 법
• 무료로 이미지 서버 링크 생성하는 법

3. 키워드를 바탕으로 학습 내용 설명해보기

• 자식 요소를 추가하는 메서드는 element.append(), element.appendChild() 외에도 element.prepend() 가 있다. append 는 자식요소를 마지막 자식으로 추가한다면, prepend 는 단어에서 알 수 있듯이 첫번째 자식으로 추가한다.
• focus 이벤트는 요소를 클릭하거나 또는 탭키를 눌러 해당 요소가 포커징이 되었을 때 작동하는 이벤트이다. 반대로 focus 가 해제될 때 이벤트는 ‘blur’라고 한다.
• 폼 요소에서 입력값이 바뀌는 것을 인지할 수 있을까? change 이벤트를 사용하면 된다.
• 나의 경우, 입력폼을 다 채워야 submit 버튼이 활성화 되는 기능을 구현했는데 이 때 change 이벤트를 사용했다. change 를 적용하면 썼던 입력값을 지워도 ‘변화'로 인식해서 작동한다. 다만 change 만 적용할 경우, 이미 작성한 입력폼을 작성후 포커즈 아웃을 시켜야만 기능이 적용되었기 때문에 이를 보완하기 위해, 추가로 keyup 이벤트를 통해 키보드 입력을 하자마자 활성화가 적용되게 만들었다.
• 풀리퀘스트 템플릿에서 마크다운 체크박스 문법을 알게 되었다. - [ ] 이렇게 작성하면 빈 체크박스가 생성된다. - [x] 이렇게 안에 x(대소문자 상관없음)를 채우면 체크된 체크박스가 생성된다.
• element.setAttribute() 메서드는 (”속성명", “속성값”) 을 전달인자로 넣어줘야하는데, 만약 disabled 같은 boolean 속성인 경우 속성값에 꼭 true 나 “”를 넣어줘야한다. 이렇게 .setAttribute(”disabled”, “”) 작성
• 맥에서 gif 이미지 재생 방법풀 리퀘스트 템플릿을 채울 때, 내 사이트 실행 gif를 만들어야했는데 만든 gif를 클릭했는데 재생이 안되고, 여러장의 이미지 파일로 뜨더라… mac 유저 1개월차는 어리둥절. 윈도우에서는 당연히 재생 먼저 되는데…
  → 파일을 클릭 > space 누른다 > gif 가 실행된다.
• 풀 리퀘스트 창에서 그냥 이미지 복사 후 붙여넣기 하면 자동으로 깃헙 서버에 올라가서 링크가 생성된다!→ 내 아무 리포지토리에 들어가서 이슈탭에서 New issue 클릭한다. > 입력창에 이미지를 복사해서 붙여넣기 한다. > 조금만 기다려주면 자동으로 이미지 링크가 생성된다. 이 링크를 슥- 복사해 사용하면 된다.
• (이미지에 따라 마크다운 링크나, img 요소로 생성된다.)
• → 이건 사실 약간 악용(?ㅋㅋ) 할 수 있는데, 만약 내가 md 파일에 이미지를 올리고 싶다, 하지만 따로 내 리포지토리에 이미지 파일 넣어주기 싫다! 라면 다음 방법으로 공짜 깃헙 서버 링크를 사용할 수 있다. 꿀팁👏

 

추가공부할 것...

• 유용한 이벤트 정리 사이트 에서 몰랐던 이벤트 알아두기