[TIL] JS fetch와 DNS, 멘토링과 코드리뷰

오늘의 나는 무엇을 잘했을까?

1. Week2에 대한 코드 리뷰를 받았다!!😆 생각보다 고칠 것이 아주 X 1000 많았다ㅋㅋㅋ 의미를 생각하면서 하나 둘 고치다 보니 하루가 다 갔다. (대신 강의 수강률은 0에 수렴..😱) 특히 62.5% 트릭은 매우 신기방기.. 루크의 리뷰를 보고 다 적용하려고 노력했다!

2. 코드 리뷰를 바탕으로 리팩토링을 하고 멘토링 시간에 루크에게 여쭤보는 시간을 가졌다! 요소를 묶지 않고 형제 요소로 둔 이유에 대해서 설명드리고 적절한 피드백을 받을 수 있었다. 역시 관점의 차이이고 이유가 명확하고 적절하다면 자신의 스타일대로 좋은 코드를 짜는 것이 맞다는 것을 깨달았다. 하지만 여전히 코드 리뷰의 과정은 혼란의 연속이고.. 질의응답을 하면서 받아들일 것과 논의하며 절충하는 방법을 찾아나가야겠다.(즉, 개발자식 소통방법을 익혀 나가자😉)

😆 오늘의 유머! git rebase가 어렵다고 질문 보관함에 남겼을 때의 플린의 답변!ㅋㅋㅋㅋ 우리 팀원 모드 빵터졌다. 멘토링 넘 좋당

오늘의 나는 무엇을 배웠을까?

[1] 코드리뷰

62.5 Font Size Trick

코드리뷰를 통해 알게 된 굉장히 유용한 트릭이다. rem이 어려워서 사용할 생각을 해본 적이 없는데, 디바이스 사이즈에 따라 글자도 반응형으로 개발하기 위해선 필수 요건이었다. 그것을 이렇게 쉽게 사용할 수 있다니!!

id는 유일한 요소에 부여하는 것이 맞지만 유일한 스타일이라는 뜻은 아니다.

미션을 하면서 한번만 사용할 스타일을 부여하기 위해 html 요소에 무분별하게 id를 부여했었다. 하지만 주로 CSS 클래스를 디자인 적용하는데 사용하고 id는 특별한 목적이 있는 것이 아니면 잘 쓰지 않는다고 한다.😅

• 사실 id를 쓰면서도 예전엔 이유도 모른 체 class로만 작성했었는데, 강의를 들으며 "class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 쓰고 id 속성은 전체 페이지에서 단 하나의 요소에만 지정"에 꽂혀 id를 사용했었다.

class명과 이미지 등의 파일 이름은 의미를 포함하도록 명확한 이름으로 짓기

귀찮아서.. 그냥 img1, span1로 했는데ㅋㅋㅋ 알고 있으면서도 미루다가 아니나 다를까..🥹 정말 class명을 짓는 게 가장 힘들다.

그래서 chatGPT한테 원하는 링크를 저장하세요 라는 글 옆에 설명사진으로 넣을 img의 class명을 추천해줘라고 했더니 save-link-img라고 추천해줬다ㅋㅋㅋ 정말 유용하군!

• 이름 지을 때 참고할 자료들
  • 부트스트랩이나 시맨틱 UI 같은 유명한 CSS 라이브러리에서 이름 참고
  • [번역] 디버깅 시간을 절약할 수 있는 CSS 네이밍

[2] 멘토링

보통 개발을 할 때 HTML을 Minify한다.

html에서 img나 a 태그 등을 사용할 때 prettier 같은 포맷팅 도구를 사용하면 줄바꿈이 자동으로 된다. 이때 HTML에서는 줄바꿈이 공백 문자가 되기 때문에 빈공간이 생기는 이슈가 있었다.
이에 대한 해결책을 여쭤봤는데, 보통 개발을 할때는 Minify라는 작업이 빌드할 때 된다고 한다!

미디어쿼리에서는 지정한 html의 폰트 크기를 쓸 수 없다.

앨리스가 질문한 내용! 몰랐던 내용이라 신기했다. 62.5% 트릭을 사용한 뒤 media query에도 max나 min width를 rem으로 지정하고 싶은데 적용이 안됐다.

html{
	font-size : 62.5%
}
@media (max-width: 119.9rem)

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.
출처

결론은 미디어 쿼리에서는 우리가 지정한 html 의 폰트 크기를 쓸 수 없다!

[3] 웹기초 다지기 1

✋ 잠깐!
개발자 도구의 Console 탭은 해당 코드에서 최종적으로 리턴하는 값을 출력한다. 만약 아무런 값도 리턴하지 않는 경우에는 undefined를 리턴한 것으로 간주한다.

웹 - World Wide Web의 줄임말로 가상의 연결망 세계이다.

URL

Uniform Resource Locator, 웹에 존재하는 특정 데이터를 나타내는 문자열

• ex) https://**www.example.com**/men/shirts?color=blue$size=m
  • Host : 전세계의 서버 중 하나의 서버를 특정. 도메인네임으로 되어있다.(원래는 숫자로 된 IP주소)
  • Path : 서버에 있는 데이터 중 원하는 데이터를 특정
  • Query : 데이터에 관한 세부적인 요구사항 (옵션임)

Domain Name Resolution

• 하나의 도메인 네임은 여러개의 도메인으로 구성된다.
• 더 상위의 도메인일수록 도메인 네임 중에서 오른쪽에 있다.
  • root domain은 빈 문자열로 나타내고, 보통은 표시하지 않는다.
    • 만약 나타내고 싶으면 도메인의 가장 오른쪽에 .을 찍으면 된다. ex) google.com. (이론적으로 더 완벽한 도메인 네임 😆ㅋㅋ)
  • root doamin 바로 하위에 Top-Level Domain(TLD) - kr, jp, net 등등
  • Second-Level Domain (SLD) - naver, codeit
  • Third-Level Domain(Third) - www

fetch 함수

• server에 request를 보내서 원하는 가져오는 함수.
• 파라미터로 전달한 주소로 request를 보낸 후 response를 받는다.
• fetch함수는 Promise 객체를 return한다.

Callback : 어떤 조건이 만족되었을 때 실행되는 함수

.then : Callback을 등록해주는 메소드. fetch함수가 리턴하는 Promise 객체의 메소드이다.

fetch('https://www.google.com')
	.then((response) => response.text()) // 1 
	.then((result) => { console.log(result); }); // 2

// 1.response객체가 넘어오고 response객체의 text메소드를 호출해
		// 그 리턴값(promise객체)를 result라는 이름의 파라미터로 넘겨준다.
// 2. 받은 result 라는 이름의 promise 객체를 출력하는 함수

• (response) => response.text()는 response가 있어야만 실행되는 callback이다.
• fetch함수가 리턴한 Promise 객체의 then메소드로 response가 왔을 때 실행할 콜백을 등록할 수 있다.
• 등록된 콜백들은 then메소드로 등록한 순서대로 실행되고, 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있다.

오늘의 나는 어떤 어려움이 있었을까?

1. Week2 미션 리팩토링 과정에 외않되;;를 경험했다. margin을 주면 요소들의 배치가 깨지는 것..ㅠㅠ
   
   이유는 내가 image에만 저~~기 밑에서 margin: 0 32px을 줬더라구.. 이것 때문에 2시간 날렸다. (앨리스랑 백분토론.. 내시간..😱 앨리스 sorry)

2. 생각보다 리팩토링에 너무 많은 시간을 쏟았다. 물론 의미있는 시간이긴하지만! 강의가 본의아니게 밀렸다. 앞으로는 시간을 딱 정해서 그 시간 내에 해결 못하면 다음 시간으로 넘기는 걸로..

내일의 나는 무엇을 해야할까?

• Week2 리팩토링 완료
• 자바스크립트 웹개발 기초 완강
• 알고리즘 2문제