[TIL] 20210907

🎯 오늘 공부한 것

• [배포] EC2, AWS s3 + cloudfront, github pages, Firebase, Netlify, Vercel
  • SPA인 경우, root url 이외의 모든 url에서 새로고침을 했을 때 해당 url에서 index.html을 찾을 수 없어 404 오류가 뜬다. 배포할 때는 이를 방지하기 위해서 모든 url에서 index.html로 경로를 돌려주는 처리를 해줘야 한다.
  • github pages의 경우, '유저네임.github.io/레포이름' 식으로 배포할 수 있으나 소스 파일 내 모든 경로를 '/레포이름/src/main.js'과 같은 형식으로 잡아줘야 정상 실행되는 문제가 있다.
  • Netlify와 Vercel은 비슷하지만 Netlify는 한국 서버가 없어서 좀 느리다는 단점이 있다.

 

• [JavaScript] 버튼으로 랜덤 배경색 지정하는 UI 제작
  • Hex Color Code는 16진수로 이뤄져 있고 최대값은 ffffff이다. 이를 10진수로 바꾸면 16777215이 된다. Math.random() API로 최대값이 16777215인 난수를 생성한 뒤 16진수로 바꿔주면 랜덤 Hex Color Code를 만들 수 있다.
  • 이 때, Hex Color Code는 무조건 6자리로 이뤄져 있어야 색상 값으로 변환되기 때문에 랜덤으로 생성된 16진수가 6자리가 되지 않는 경우에 대한 방어코드를 작성해줘야 한다. 랜덤 생성된 코드의 length가 6보다 작은 경우, "0".repeat(6 - randomCode.length)로 0을 채워 넣었다.
  • 애초에 6자리보다 작은 수가 만들어지지 않도록 16진수에 들어갈 수 있는 digit 중 랜덤으로 하나를 골라 6자리에 차곡 차곡 넣는 방식으로 랜덤 Hex Color Code를 구현할 수도 있다.

 

• [코딩 테스트] 문자열
  • 인프런 JavaScript 코딩테스트 강의 중 문자열 문제를 풀었다.
  • indexOf(), 정규표현식, replace(), reduce(), flatMap()을 이용했다.

 

---

📚 더 공부해야 할 것

• 프로젝트 리팩토링 후에 직접 배포해보기
• 프로그래머스 문자열 압축 문제 풀기 [링크]

 

---

🎇 Reflection

• 배포 강의를 보긴 봤는데 직접 해봐야 감을 잡을 수 있을 것 같다. 추석 때 노션 클론코딩 페이지를 제대로 구현해서 배포를 시도해봐야겠다. 무료로 배포할 수 있는 서비스가 많아서 마음만 먹으면 배포하기 어렵지 않다는 걸 알게 됐다. 배포 친화적 인간이 되어야지... AWS도 궁금하긴 한데 과금이 너무 무섭다. 
• 팀원들과 코딩 테스트 스터디를 하기로 했다. 매일 한 문제씩 풀고 풀이 방법을 공유하는 시간을 갖기로 했는데... 안 그래도 할 게 많은데 이래도 되나 하는 생각이 들지만 그래도 언젠가는 해야 하는 거니까 도전해보려구 한다.
• 코딩 테스트 공부하는 김에 거의 두 달만에 인프런 자스 코테 강의 문자열 문제를 풀어 봤다. 자료구조를 배워도 자료구조를 이용할 줄 모르는 사람... 나야나... 강의에서 선생님은 어떻게 푸는지 내일 볼 건데, 내 코드 너무 더러운 느낌이다. 그래도 함수형을 배우고 나니까 괜히 공유 상태 변수 사용을 지양하고 싶고... reduce 함수로 구현해보고 싶고 그랬다.
• 유튜브 우아한테크?인가 암튼 그 계정을 구독하고 있는데, 우테코 프로젝트 발표 영상을 올려뒀길래 한번 봐봤다. 정말 인상적이었던 게 그냥 우리 이런 프로젝트 만들었어요, 하고 끝나는 게 아니라 이후에 어떻게 프로젝트 성능을 개선해나가고 있는지도 계속 발표 영상을 올리더라. 현재 4차까지 올라왔는데, 나도 프로젝트할 때 성능 개선 고민해봐야겠다는 생각이 들었다. 10분 테코톡 영상 중에서도 좋은 발표들이 꽤 있어 보인다. 발표 스터디 준비할 때 참고해야겠다.