Redux->Mobx 전환 처음에 typescript를 사용하지 않고 개인 프로젝트를 진행했었는데, typescript를 적용하면서 기존에 store로 이용한 redux를 배제하고 mobx를 사용하기로 했다. 여러 이유가 있긴 한데, 가장 적합한 이유는 redux보다 사용하기가 편하다는 것. 코드량도 확실히 줄어듬을 느꼈다. 또한, 기존에 작업해둔 결과물에서는 store에 통신부분이 같히 엮여있었는데, useQuery를 사용함으로서 store 부분의 통신부분을 배제 할 겸 mobx로 전환하여 다시 개발 하기로 했다. 둘의 차이와 mobx의 장점은 배달의민족으로 유명한 우아한형제들 블로그에 자세히 기재되어 있었다. React에서 Mobx 경험기 (Redux와 비교기) | 우아한형제들 기술블로그 {{item..
Next.js 는 client-side를 렌더링 하기 전에 SSR을 수행한는데, 이 때 window 전역객체가 로드 되지 않아서 localStorage is not defined 오류가 발생한다. 해결 방법들은 아래와 같다고 나오는데.. if (typeof window !== 'undefined') { // Perform localStorage action const item = localStorage.getItem('key'); } useEffect(() => { // Perform localStorage action const item = localStorage.getItem('key') }, []) axiosInstance를 설정 할 때에는 두가지 방법 다 사용하기 어렵다. 이 땐 아래와 같이 작성..
서론 간단하게 구현하려면 한없이 간단하게 구현 할 수 있지만.. 실제 서버 올라가서 비용문제도 생각해야 하고, 리소스 문제 등등 실제 프로젝트 처럼 짜려다 보니 react는 처음 해보는데 되게 생각해야 하는 기능들이 많이 있었다. 일단 구현 자체는 되었지만 삽질 시간이 5~6시간은 되는 것 같아 조금 힘들다 ㅠ_ㅠ 풀스크린샷으로 찍어서 그런지 아직 화면에 그려지지 않은 얘들은 이미지가 노출이 안된다. 굉장히 좋군.. 일단, 무한 스크롤로 화면 구현을 했고 검색창은 헤더에 달려있고 필터 목록은 검색 페이지 내에 달려있다. 실제로 디자이너들은 더 빡센 구조도 요청하는 경우가 많으니.. 또 다른 페이지에 갔다 왔을 때 현재 검색 내용을 초기화 해서는 안된다.. 무한 스크롤 특성상 상세 페이지 들어갔다가 뒤로 ..
개인 프로젝트 진행 중에, Infinite scroll을 구현하고 싶어서.. 디자인 열심히 짜고 퍼블리싱 열심히 하고 첫 페이지 로드를 한 다음에 중간에 깨달은게, 상세 페이지 갔다가 뒤로 가기 누르면 이전 데이터가 infinite scroll에 존재 해야 한다는 점 이었다. 프론트쪽이 너무 오랜만이라.. Vue쪽에서는 Store를 이용해서 처리했던 기억이 있어서, 찾아보니 Next.js 에서는 redux 라는 라이브러리를 사용하여 stroe를 구성한다는걸 알았다. 스토어 구성부터 차근차근 구현 해 보자..! install redux package npm install @reduxjs/toolkit npm install react-redux npm install next-redux-wrapper 설치 이..
메모용이긴 한데.. Next.js 에서 외부 이미지 사용시 뜨는 오류이다. Next.js 버전이 올라가면서 해결 방법이 바뀌어서 메모메모.. next.config.js 아래에 아래 내용을 적어주면 됩니다~ images:{ remotePatterns: [ { protocol: 'https', hostname: '~~.cloudfront.net', port: '', pathname: '/**', }, ], } hostname 정도만 이미지의 hostname으로 변경해 주시면 됩니다!
태그 정보, Operator 정보 API 연동 먼저, 태그 정보와 Operator 정보를 API를 통해서 받아와야 했다. export default function RecruimentPage({results}) { const tagList = results.tagList const opList = results.opList // ... } export async function getServerSideProps() { const tagList = await (await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/recruitment/tag/list`)).json() const opList = await (await fetch(`${process.env.NEXT_PUB..
퍼블리싱 사실 퍼블리싱은.. 지루해서 적을게 없긴 하다 디자인 자체를 못하기도 하고.. arknights tool box쪽 디자인과 인게임 디자인을 참조해서 만들었다. 색감도 인게임 디자인과 명일방주 공식사이트를 참조하였다. 인게임 형태의 카드모양을 퍼블하는쪽이 조금 힘들었다. 상단 이미지는 랜덤한 몇개의 이미지에서 변경 되도록 처리 해 두었다. Layout / Component / styles 처리 루트 아래에 components, layout 을 따로 두어 처리 했다. 각 컴포넌트/ 페이지별로 사용하는 스타일은 module로 처리 했다. import pageLayoutCss from "@/styles/layout/page.module.scss" export default function PageLay..
서론 일단, Next.js로 클라이언트를 개발해 보기로 마음 먹긴 했는데.. 나는 사실 React도, Next.js도 사용해 본적이 없다.. ㅎㅎ.. Vue.js를 사용해 본 적이 있어서 대충 개념을 하루정도 익힌 뒤, 일단 세팅.. 퍼블리싱은 SCSS를 사용하기로 했다. Next.js에 SCSS 세팅 일단 프로젝트를 만들자. npx create-next-app 얼추 세팅을 진행하고 npm i sass sass 모듈을 추가해 주었다. 이후 해당 부분 세팅이 제대로 진행 되었는지, 기존에 있는 global.css, Home.module.css를 global.scss, Home.module.scss로 이름 변경 하였다. 또, 전역 스타일링을 위해서 _mixins.scss, _variable.scss를 추가 ..
- Total
- Today
- Yesterday
- laravel passport
- 서울 맛집
- 성안길 맛집
- 성수동 맛집
- 공도 맛집
- laravel
- next.js
- Google App Script
- 안성 맛집
- 칠곡 카페
- 개발일지
- 성수 맛집
- AWS
- Vue.js
- 안성 카페
- PHP AWS S3
- hasura
- php
- GitAction
- S3
- 안성 공도 맛집
- webGPU
- Google App Script API
- ckeditor
- CKEditor5 Image Upload
- CKEditor Image Upload
- Web Editor Image Uplaod
- ansible
- 명일방주
- 원곡 카페
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |