우아한테크코스-6th-FE 7

[트러블슈팅] MSW unhandled request 에러 해결

문제 상황MSW에서 다음과 같은 에러를 주었다.하지만 MSW handler에 분명히 해당 endpoint와 method를 구현해주었는데, 왜 이렇게 나오는지 원인을 찾지 못했다.console.error [MSW] Error: intercepted a request without a matching request handler: • POST /templates If you still wish to intercept this unhandled request, please create a request handler for it. Read more: https://mswjs.io/docs/getting-started/mocks 원인 파악우선 원인을 ..

우아한테크코스 6기 FE 합격후기/지원 팁/졸업 후 취준 vs 우테코

보통 6기 동기 친구들은 합격하자마자 이런 글을 작성하는데, 레벨 4가 지나가는 이 타이밍에 갑자기 우테코 합격후기라니...대신 조금 더 생활을 해본 사람의 관점에서 글을 쓸 수 있다는 장점이 있다고 생각하자.완전 럭키마위잖앙~! 6기 합격하고 처음 페어프로그래밍을 접한게 그저께 같은데, 벌써 7기를 모집한다고 한다.그래서인지 학교 동아리 후배한테 7기를 지원할까 고민중이라며 커피챗 요청이 왔다.1년도 안됐지만 그동안 엄청난 지식 주입의 시간을 보내왔기에 기억을 끄집어내는데 고생을 좀 했다. 기억을 되살린 김에 써보는 우테코 웹 프론트엔드 6기 합격후기/수기, 시작. 우테코 도움이 되었나요?커피챗을 요청해온 친구는 프론트엔드를 독학해서 우테코의 커리큘럼을 알려줬을 때, 이런 개념들을 어느 정도 알고 있는..

[트러블슈팅] 내 작업 브랜치 중간에 Merge된 동료의 작업물을 넣고 싶다면? (pull vs rebase)

상황은 이렇다.우리 팀은 dev/fe 브랜치에서 각자 feature 브랜치 따서 작업을 하고 다시 dev/fe로 합치는 과정으로 진행한다. 즉 dev/fe가 develop 브랜치이다.(Git flow 관점) 나는 로그인 기능을 개발하기 위해 dev/fe 브랜치에서 feat/authentication 브랜치를 따서 작업을 하고 있었다.이후 동료의 디자인 토큰 기능과 헤더 기능이 완료가 되어 동료의 작업 브랜치에서 dev/fe 브랜치로 Merge가 되었다. 이때 나의 feat/authentication 브랜치로 최신의 dev/fe 브랜치의 작업물을 가져오고 싶은 상황이다.Pull을 해야할까? Rebase를 해야할까? Rebase할 때 주의점개념적인 Pull과 Rebase의 차이와 장단점은 다른 글에서 설명을..

[트러블슈팅] 배포 사이트에 대체 도메인 접근 시, InvalidRequest로 접근이 차단되었다

내 사이트인데 왜 나를 막아..S3 + CloudFront로 배포해놓은 사이트에 대체 도메인으로 등록해놓은 사이트로 접근 시 다음과 같은 에러가 났다.또 처음에는 도메인으로 사이트에 접근이 되었는데 새로고침 시에도 같은 에러가 났다.InvalidRequestRequests using x-amz-source-account or x-amz-source-arn must be made over HTTPS and AWS Signature Version 4원인을 파악하다가 http로 요청이 보내지고 있음을 확인했다.하지만 유저가 http로 요청을 보내도 안전하게 우리 서비스에 접근할 수 있는 방법이 없을까 고민하다가.. CloudFront의 뷰어 프로토콜 정책을 알게 되었다.유저에게 https를 요구하는 것으로 H..

[트러블슈팅] 배포한 사이트에서 Unexpected token '<' (at bundle.js:1:1) 에러가 났다

열심히 빌드 후 aws에 배포한 사이트에서 요런 에러가 났다Unexpected token '해결 방법index.html의에 다음 코드를 추가한다. 다음 Webpack의 Issue를 참고해 해결하였다. 다른 방법으로는 Webpack의 output 옵션에 publicPath : '/'로 해결했다는 사람이 있었는데, 이 방법으론 해결 못한 사람들도 있어서 보다 확실한 방법인 base 태그를 넣는 것으로 해결했다. 원인은 빌드시 웹팩이 chunkFile을 JS가 아닌 HTML 구문으로 인식하여 html의 시작인 의  참고 링크https://yoon-dumbo.tistory.com/entry/Error-%EC%A0%95%EB%A6%AC-React-Uncaught-SyntaxError-Unexpected-token

stylelint 적용기(emotion/styled)

# 문제상황팀원간 CSS의 속성 순서를 통일 시키고 싶었다.어느 정도 컨벤션을 정하긴 했지만 이를 의식적으로 맞추기도 힘들고 헷갈려서 lint의 힘을 빌리고 싶었따.현재 팀에서 쓰는 css가 emotion(css-in-js)라 관련 prettier, eslint plugin 설정을 적용하기 쉽지 않았다.stylelint라는 도구를 발견했돠.# 해결방안많은 사람들이 해당 블로그를 보고 따라하다가 실패했던 것 같다.(아마도 v14이거나 이전인듯) 나 역시 관련해서 삽질을 많이 하다가 결국 공식문서 정독을 시작했다. 특히 v16관련 문서를 유의했다.stylelint v16으로 오면서 변화한 부분이 꽤 있었다. (plugin 호환 등)💡 emotion을 styled 방식이 아닌 css props로 쓰면 sty..