Frontend/문제 해결기

기존에 웹서버를 직접 구현해봤었는데, 이제는 그 원리를 알았으니, 이미 만들어진 좋은 도구를 사용해야할 때라고 생각해서 번들러를 도입하고자 했다. 그러던 중, 어떻게 번들링이 일어나는지 의문이 생겼고, 번들링 과정에 대해 찾아보게됐다. 번들러를 왜쓰고, 기능은 무엇이 있으며, 어떻게 번들링이 일어나는지 알아보자. 번들러 왜쓰는데 React, Angular, Vue 등 프레임워크가 등장하고, 점점 js파일이 많아지면서 하나의 페이지에서 사용되는 js파일들이 엄청나게 많아지기 시작했다.이러면 한 페이지가 로드될때 모든 js파일을 네트워크를 통해 받아와야 한다. 번들링 없이 ESM만을 사용해 만든 프로젝트의 경우, 이런식으로 모든 js파일을 http요청을 통해 받아오는 것을 확인할 수 있다. 이 모든 파일을 ..

이전 게시글 (https://0422.tistory.com/312) 을 통해 나름대로 웹서버를 구현해보았다. 그렇다면 진짜 사용되는 모듈들은 어떻게 구현되어있는지 확인해보자. webpack-dev-server 이녀석은 서버를 어떻게 띄우고 있을까? 이건 examples에 있는 코드인데, 확인해보면 lib/Server에서 Server Class를 가져와서 server인스턴스를 만든 후 server.start()를 통해 시작시키고 있는 것을 확인할 수 었다. 그럼 Server Class를 뜯어보자. https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js 여기서 확인해보자. 확인해볼만한 부분은 1번과 2번일 것이다. 일단 initiali..

프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static 설정만 하면 전부 설정이 완료된다. 그런게 나는 지금까지 이런 도구를 사용하면서 과연 이게 어떻게 동작하는가?에 대해서는 한번도 생각해본 적이 없었다. 이번 기회를 통해 제대로 파악해보자. createServer https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 J..

지금까지 테스트를 작성하려고 노력은 했지만 돌이켜보니 클라이언트 코드에서는 한번도 테스트코드를 작성한 적이 없었다. 유지보수하기 좋은 코드를 쓰려면 테스트코드는 필수라고 생각한다. 문제점 내가 사용하는 jest는 node환경에서 돌아간다. 브라우저와 node환경은 다르다. 여기서 문제가 되는 부분은 node에는 DOM객체와 API가 없다는 것이다. 이걸 어떻게 사용해볼까? 고민을 했다. 서치 결과가 대부분 리액트에서 테스트하는 방법이라는 문제가 있어서 좀 더 오래 걸린 것 같다. jsdom jsdom은 이전 RSS파싱을 통한 블로그 피드 제작에 썼던 라이브러리라 사용방법을 알고있었다. nodejs환경에서 DOM요소를 건드릴 수 있게 해준다. https://www.npmjs.com/package/jsdom..

https://blog.cau-likelion.org/ CAU-Likelion Blog 멋쟁이 사자들을 위한 블로그 피드 blog.cau-likelion.org 멋사 중앙대만을 위한 블로그 피드를 제작해보았다. nextjs와 typescipt를 사용해서 간단하게 rss를 파싱하는 방식으로 진행했다. RSS란 Rich Site Summary또는 Really Simple Syndication의 약자로, 어떤 사이트에 새로운 컨텐츠가 올라왔을때, 해당 사이트를 방문하지 않고 컨텐츠를 이용하기 위한 방법이다. 블로그별 RSS주소 tistory : [blogName].tistory.com/rss velog : v2.velog.io/rss@[velogID] naver : rss.blog.naver.com/[nave..

https://blog.cau-likelion.org/ LikeLionCAU Blog this This 키워드동작은 나타내는 메서드는 자신이 속한 객체의 상태, 프로퍼티를 참조하고 변경이 가능해야 한다.그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. blog.cau-likelion.org tistory, velog, 네이버 블로그등 동아리원들의 블로그를 모아 우리 동아리만의 피드를 제공하는 서비스를 제작했다. Next13으로 진행한 첫 프로젝트다. 배포는 vercel로 진행했다. 로직 1. rss를 받아온다. 2. 해당 rss를 rss-parser를 통해 파싱한다. 3. 불필요한 광고 태그를 제거한다. 4. content에서 제일 처음 만나는 img태그를 끌고와서 썸네일로 ..

https://www.youtube.com/watch?v=KMJE9FIDZl8&t=27s 멋쟁이사자처럼 11기에서 진행한 세션 실습내용입니다. 노션 https://energetic-palm-634.notion.site/JWT-da4634014dab4eb58445bf3bf1ed94c1?pvs=4

프로젝트에 소셜로그인을 구현했다. 로컬에서 테스트를 하고, 배포에서 실제 사용해야하니 로컬환경과 배포환경에서 동일한 작동을 구현하는데 문제가 생겼었다. 별거 아닌 문제였지만 이거 하는데 정말 하루는 온전히 갈아넣었던 것 같다. 배포된 백엔드에서 로그를 확인하며 진행해야했기 때문이다. (처음엔 심지어 이 생각도 하지 못했다.) 우리 문제는 redirect_uri였다. 그전에 우리 로그인 로직에 대해 설명하자면 우리 로그인 로직 로컬환경 구성 구글 client id와 redirect_uri, google_scope를 env형태로 관리해주었다. client_id와 google_scope는 변하지 않는 값이므로 따로 github에서 분기처리를 해주지 않았다. 배포환경 구성(Github action) .githu..

소셜로그인을 통해 토큰을 관리해야되는데, 어지러운 경우가 많다. access_token을 보냈는데 만료된 경우라면? => refresh_token을 통해 access_token을 갱신해야한다. 이를 위해 axios에서는 인스턴스 커스텀 방법을 제시한다. https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1 API | Axios 러닝 가이드 API 구성(configuration) 설정을axios()에 전달하여 요청할 수 있습니다. axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred',..

두가지 페이지에서 효과는 다르지만, 동일한 로직으로 슬라이더를 구현할 일이 생겼다. 원래는 하나의 페이지마다 코드를 작성했지만, 반복되는 영역이므로 이를 Hook으로 처리해 주자. const useSlider = ( data: T[], duration?: number, moveScale?: number, opacity?: boolean, type?: 'spring' | 'linear' | 'tween' | 'inertia', ): [index: number, direction: number, increase: () => void, decrease: () => void, animationVariant: Variants]=>{ ... } 나중에 슬라이더의 애니메이션을 커스텀 할수 있도록, duration(지..