23.10.11
📚 오늘 공부한 것
- fetch api를 다뤄보기!
😲 새롭게 알게된 것
innerHTML에 대하여
- innerHTML이 성능이 안좋긴 한데, 성능이 안좋을정도 되려면 수십번 불러야함. 웬만한 규모까지는 이걸로 영향없음.
- 조금 개선하여 사용할 방법은? setState 과정에서 이전 상태랑 지금 상태 같으면 this.render()를 안하는 등 처리
- 최적화 하고 싶으면? insertAdjacentHTML() 있음. 똑같은 돔 노드 만나면 새로 안하고 넘어간다.
insertAdjacentHTML()메서드는 사용되고 있는 요소를 다시 파싱하지 않아서 해당 요소 내의 기존 요소들을 손상시키지 않습니다. 이는 추가적인 직렬화 단계를 피하므로 직접적인 innerHTML 조작보다 훨씬 빠릅니다. - CreateElement로 만들어서 append 하는 방식은? 코드가 눈에 잘 보이지는 않는 방법이다. 선언적과는 거리가 멀지 않을까 “innerHTML에서 HTML형태로 쭉 작성한 것이 어떠한 형태로 렌더링 되는지 더 선언적으로 보인다”
api 주소 예외처리
api 요청 호출단에서
request(`/products/${productId}`)
//혹은
request(`products/${productId}`)이렇게 url을 줄 수 있다. 앞의 ‘/’차이 인데. request() 에서 주소가
export const request = (url) => {
return fetch(`${API_END_POINT}/${url}`)이렇게 쓰이기 때문에 앞의 /가 무시되어야 한다.
다양한 변경방법이 있는데 난 다음과 같이 이용했다.
export const request = (url) => {
if (url.startsWith("/")) {
url = url.replace("/", "");
}
return fetch(`${API_END_POINT}/${url}`)api요청시 url주소로 오류를 종종 만나는데 놀랍게도 이런 슬래시 유무로 인한 에러도 만난다. 매번 보내는 쪽에서 주소를 수정했는데 이렇게 조건 처리로 간단하게 해결가능하다니!
🫨 느낀 점
innerHTML 사용에 대해 의문이 있었는데 오늘 강의에 언급해주셔서 좋았다 !! insertAdjacentHTML()이라는 메소드로 조금 개선하여 사용할 수 있다니!
js에서 HTML을 문자열처럼 적는 느낌이라 돔요소를 그리고 추가하는 createElement와 append를 사용하는 것이 더 나을 것 같다고 느꼈었다. 그래서 과제 리팩토링도 이를 적용했었다. DOM에 계속 접근하는 것이 문제일까 생각했는데, 오늘 강의를 통해서 ‘선언적 프로그래밍’의 차이를 알게 되었다. 그렇게 공부했던 선언적 프로그래밍인데 이렇게 또 한대 맞아요 ..
배운점!
- 명명에 신경쓰자
코드에서 변수명 뿐만 아니라 api에서도 키값들의 이름 설정하는 것의 중요성을 여실히 느꼈다.. api 실제 데이터들의 상태를 완전히 알지 못한 점도 문제가 되었다. 하지만 반복되는 id, options 등 모호한 이름들이 계속 쓰이다보니까 충돌이 일어났고, 매번 콘솔을 찍어보면서 확인해야했다.. 프로젝트로 협업하게 된다면 이점에서도 컨벤션이나 노트를 잘해두어야겠다. - 흐름 먼저!
지난 시간에 말씀해주셨듯이 어떤 순서로 구현할건지 생각을 먼저 하는 연습을 하고 있다. 내가 먼저 생각을 하고 강의를 들었을 때 강사님의 구현 순서와 다르기도 했지만, 내가 생각한 순서가 왜 틀렸는지를 알 수 있었다.
🤔 오늘 회고
2주차 과제 피드백 반영 + 3주차 과제 제출 + 강의 + 강의 내 실습 휘몰아친 하루였다.. 코어타임 내 강의를 못끝낸것도 처음이었다.
한줄 빼먹은 코드 때문에 삽질에 시간을 한참 뺏겨서,, 실습 다시 풀기는 못했다. 오늘 해야하는 일은 꼭 다 끝내되 추가적으로 하려 했지만 못했던 것은 주말로 보내야겠다... 아좌좌
