일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- git
- 향해99
- react
- 인풋태그 엔터
- Til
- 원티드인턴십
- NextJs
- 원티드프리온보딩
- react portal
- NVM
- CPU와 GPU의 차이점
- Passed by Value
- 알고리즘
- 회고록
- next/link
- 원티트 프리온보딩인턴십 1주차
- CloudFront 무효화
- JavaScript
- 유령 의존성
- 광고지구
- Mac OS NVM
- 식별자란
- 프로젝트
- JS
- Node
- toast err
- jsEvent Loop
- input error
- Client-Side Navigation
- Redux
- Today
- Total
목록TIL (31)
SUIN
지난번 CD 연결이 성공한 줄 알고 방치시켜놨던 action에서 알고 보니 CloudFront 무효화 처리가 안되고 있었던 것이었다.. 기존 코드 - name: Deploy env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} run: | aws s3 cp --recursive --region ap-northeast-2 build s3://${{secrets.S3_BUCKET_NAME}} - name: Invalidate CloudFront Cache uses: chetan/invalidate-cloudfront-action@master env: AW..
themoviedb API를 사용해서 왓 차피 디아 클론 코딩을 하며 react query, slick 를 처음 사용해보면서 아직까지 생소한 부분들이 많아 천천히 공부 중이다 API Docs developers.themoviedb.org react- slick 패키지를 적용하며 슬라이드를 구현하는중 slider의 style 부분을 carousel slick-theme을 import 해주어야 하는데 왜 슬라이드가 되지 않냐며 오늘도 나는 삽질을 했다... themoviedb API 에서 poster img url 이 자꾸 null 로만 내려와서 너무 당황스러운 일들만 가득했다.. 아마 최근 포스터여서인지 대부분의 poster_path 경로의 이미지 url이 null로 내려오나 보다.. null로 데이터가 ..
왓차 피디아 클론 코딩 강의를 공부하며 emotion css 적용 중 first-child를 사용해서 첫 번째 항목을 제외한 스타일 효과를 적용을 하던 중 first-child가 실제 화면에서는 적용이 되지만 개발자 모드에서 콘솔 에러가 확인이 되는 것을 알 수 있었다. ...component... /* 1번째 메뉴*/ ...로고 /* 2번째 메뉴 */ 영화 TV 프로그램 ...style... const Menu = styled.li` display: flex; align-items: center; height: 62px; flex-shrink: 0; &:not(:first-child){ //첫번째 항목이 아닐 경우 margin-left: 24px; } `; ":first-child"는 서버 측 렌더링을..
통상적으로 data fetch를 해야 하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가 필요하므로 MSW를 사용하여 모의 데이터를 만들어보는 공부를 했다. MSW - 데이터 목킹을 하는 라이브러리 - 리액트는 REST API & GraphQL support 한다. - 실제 서버와 동일한 주소여도 서로 올라가지 않고 Interceptor 해서 msw를 통해 데이터 처리가 가능하다 - 브라우저 내에 서비스워커를 띄운후 핸들러에 특정 api 설정을 하게되면 요청에 맞는 데이터를 받을 수 있다 - Browser 응답 요청 -> 서비스 봉사자가 상태 -> res clone -> msw 전송 -> 모킹 ..
리액트에서 가장 중요한 건 상태 관리이다. 나는 아직 많은 프로젝트에 적용하기에는 좋은 사례라던가 레퍼런스들 이 많은 Rudux로만 상태 관리를 했었다. 많은 회사들에서는 Redux, Recoil, Mobx 등 다양한 상태 관리 라이브러리들을 사용한다. 웬만한 프로젝트는 리코일로도 충분히 작업이 가능하다는 이야기와 주변 현직 개발자 분들이 Recoil을 많이 사용하는 것을 듣고 Recoil이 어떻게 상태 관리를 할 수 있나 궁금증으로 시작해서 강의나 공식문서를 많이 찾아봤다. 각 라이브러리마다 장단점이 있으므로 프로젝트의 성향에 따라 적합한 라이브러리를 사용한다. 어떤 걸 사용하든 정답은 없다. redux - Flux 아키텍처 기반 [Redux] 리덕스란? Redux 리덕스는 리액트에서 가장 많이 사용되..
저번 주에 백신 접종으로 몸살을 심하게 앓고 오늘부터 다시 작업을 시작했다 오늘부터 하나투어 클론코딩을 시작하게 되었는데 항해 때는 3주 안에 모든 구현과 배포를 해야 했었는데 이번에는 코드를 조금씩 이해하며 작성해보려고 한다. 실전 프로젝트때는 react-router v5 버전을 사용하다가 이번엔 업그레이드된 v6를 사용하는데 생각보다 많은 내용이 업데이트된 걸 알 수 있었다. 1. 작아진 번들 사이즈 - 이전 버전 대비 약 70% 정도의 크기가 줄어든 것, 버전만 업데이트 하더라도 번들 크기에 대한 최적화가 가능하다는 이점이 존재 2.switch >> routes (네이밍 변경 ) 3. exact 옵션 삭제 4. componen >> element (네이밍 변경 ) 5. path="/Web/:id" ..
드디어 항해 마지막 수료식! 팀원들과 모여서 지금까지 서로 고생했다며 3 시간 넘게 수다타임.. 사실 TIL 적는 지금도 수다 중이다.. ㅎㅎ 너무 감사하게도 운영부문과 상생부문에서 상을 받게 되었다. 1주 차 때 프로젝트를 함께 했던 팀원들에게 "우리 한번 해봅시다! 포기하지 말자! "라고 했던 말들이 실제로 100일 동안 모두가 함께했다 힘든 일도 있었지만 마치 자기 최면 걸듯 "수인아 할 수 있어!"라는 최면을 다른 팀원분들에게도 걸어준 효과가 아닌가... 항해 대표님께서 가다가 포기하면 절대 못 간다. 늘 우리는 부족하니까 열심히 해야 해라는 게 꾸준히 하다 보면 결국 성장하게 된다. 여러분들이 코딩 실력이 완벽하게 올라갔다기보다는 앞으로 계속 성장을 해나갔으면 좋겠다 "제일 중요한 건 내가 나를..
내일 드디어 항해 99 수료를 한다. 오늘내일은 함께 실전 프로젝트를 함께했던 팀원들과 모의면접을 진행하는데 다들 면접 일정과 겹쳐서 다른 조 분들과 함께 면접을 진행했다 1인당 30분의 시간을 주고 여러 팀원들이 질문을 하고 답변하는 형식이었다 이력서를 바탕으로한 질문은 대부분 대답했지만 CS질문에 대해서 답변을 잘하지 못한 것 같다 GitHub - whl5105/tech-interview-for-developer: 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖. Contribute to whl5105/tech-interview-for-developer development by creating an account on GitHub. gi..