[TIL] form태그와 location, short circuit, 웹 컴포넌트

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

1. Week2 리팩토링을 완료했다.

   • 삼항 연산자를 사용하지 않고 if-else문을 사용했는데 코드가 불필요하게 길어져 수정했다.
   • **Function Declaration 방식에서 Arrow Function 방식으로 변경하였다.**

2. 데일리미션 리뷰 시간 변경

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

[1] location.href 사용

form태그의 submit 버튼을 클릭했을 때 조건이 충족한다면 /my-link 이동하는 요구조건이 있었다. 로그인 기능이었지만 더 깊게 생각하지 않고 location.href 사용해서 이동되도록 하였다.

기본적으로 <form>태그는 제출하면 값을 쿼리 스트링으로 가지고 페이지를 이동한다. 따라서 원하는 페이지로 이동하게 하기 위해서 e.preventDefault()는 폼 태그의 기본 제출 동작을 막아줘야했다. 하지만 실제 서비스일 때는 이렇게 하면 로그인 시도 정보가 서버에 제출되지 않아서 reponse를 받지 못한다. form의 action을 사용하는 것으로 바꿀지, 놔둘지 고민중이다!

location.href 와 location.replace 차이점

• location.href
  • 새로운 페이지로 이동되며 주소 히스토리가 기록된다
  • property이다. location.href='abc.html' 처럼 사용한다.
• location.replace
  • 기존페이지를 새로운 페이지로 변경시키며 주소 히스토리에 기록되지 않는다.
  • method이며 local.replace('abc.html') 처럼 사용한다.

href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른경우 이전 페이지로 이동이 가능하지만, replace는 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다.

href는 일반적인 페이지 이동시 이용을 하면 되고, replace의 경우는 이전페이지로 접근이 필요없는경우 보안상 덮어씌우는 것도 괜찮을듯 하다.

[2] Short-circuit Evaluation - 단축평가값

Week3 회원가입 validation 구현의 코드를 짤 당시, 각 valid 메소드안에서 if else로 alert 분기했다. 그런데, js &&연산자 특성상 email에 대한 valid가 false면 아예 isValidPassword랑 isValidPasswordCheck를 수행조차 안하는 이슈가 있었다.

이는 논리연산자의 Short-circuit Evaluation 때문이다.

• 논리 연산자들은 왼쪽 → 오른쪽 순으로 실행됨. 이 연산자들은 결과를 얻게 되는 순간 단축 평가(즉, 평가의 중단)를 시행.
  • false && 표현식 → 이미 false발견
  • true || 표현식 -> 이미 true 그러나 그 결과값은 (반드시 true 또는 false가 아니라) 평가를 중단하게 된 계기가 된 값을 리턴한다.

따라서 세 메소드 모두 실행하게 하고 싶다면 if문을 쓸 것..

[3] 웹 컴포넌트 찍먹

컴포넌트의 기능을 다른 코드로부터 캡슐화해 재사용 가능한 custom element를 생성하고 웹앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음

• 프론트엔드 프레임워크와 웹 컴포넌트를 사용해야하는 이유
• 웹 컴포넌트 익히기 자료

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

1. rebase —interactive 옵션 어려움

   이미 push한 commit에서 잘못 작성한 메시지가 있어서 커밋 메시지를 바꾸고자 rebase --i를 사용했다. 그리고 squash 및 reword 등을 하고 원격에 강제 push를 했더니 commit 시간이 “방금” 으로 초기화되었다^^.. 신중하게 사용하자….

2. main과의 충돌

push를 하려하니 충돌이 났다. 사실 원인은 commit을 commot으로 잘못 적고 commit이 생성되었다고 착각한 채 push를 해서 그런거였는데, 그것도 모른체 reset으로 이전 커밋으로 간 뒤 해결하고자했다. (왜냐면 merge 커밋이 싫었기 때문) 하지만 그 과정에서 storage가 날아갔다. 왜냐 hard로 reset했기 때문 ..😭😭😭그

복구 시키려고 많은 노력을 했지만.. 되찾을 수 없었고 reset을 반복하다 보니 내가 뭘 하고 있는지도 모르겠어서 다시 가장 최신 커밋으로 돌아왔다. 그리고 pull을 그냥 진행해줬는데 쓸때없는 merge 커밋이 생겼다😭 또 pull 과정에서 충돌이 났다. 아마도 1번에서 억지로 rebase를 하고 squash로 커밋 2개를 합친 뒤에 강제 push를 하지않고 다른 commit들을 쌓아서 그런듯..?

여튼 결론은.. git pull --rebase 명령어를 사용해서 원격 저장소의 Commit 이력이 로컬 저장소로 합쳐지고, 로컬 저장소의 변경 사항은 재 반영되도록 하기!

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

• Week4 웹 컴포넌트 제작