{"time":1743519444566,"blocks":[{"id":"AjilprfMB3","type":"warning","data":{"title":"해당 Repository는 '클론 코딩으로 시작하는 Next.js' 의 서적의 BNB 프로젝트를 직접 구현해본 프로젝트입니다.해당 책과 라이브러리 버전명과 다르게 최신버전 위주로 개발하여, 버전에 따른 코드 수정 및 책의 오타, 누락 부분도 같이 수정하였습니다.","message":""}},{"id":"GXT6hzM6wq","type":"image","data":{"caption":"","withBorder":true,"withBackground":false,"stretched":true,"file":{"url":"https://backend.owl-dev.me/images/clon_coding.jpe"}}},{"id":"JuGr5NX_iw","type":"customLink","data":{"url":"https://github.com/jinsujj/next.js-bnb-project","title":"GitHub - jinsujj/next.js-bnb-project","description":"Contribute to jinsujj/next.js-bnb-project development by creating an account on GitHub.","image":"https://opengraph.githubassets.com/0f1f171bc60ed417320bdbd522f45481c0e1833d65a832b822a079bb6f8187bb/jinsujj/next.js-bnb-project"}},{"id":"bJ7j1-bFf7","type":"delimiter","data":{}},{"id":"sBZkObIIft","type":"paragraph","data":{"text":"2021년 사이드 프로젝트로 Bucky 사이트를 개발하고 릴리스하는 경험을 하면서 Backend 뿐만 아니라 Frontend 영역까지 개발 범위를 넓혀 Full Stack 개발자가 되기 위한 발돋움을 했지만, 실제 사이트를 만들면서 아직 Redux, css 에 대한 역량이 부족함을 깨닫고 해당 부분을 보완하기 위해 해당 책을 구매 후 공부한 후기를 기록해 보려 합니다."}},{"id":"yGxxPvDS43","type":"paragraph","data":{"text":"해당 서적은 TypeScript, Redux 를 활용해서, 기본적인 Next.js 이론 설명과 함께 'Todo List 만들기', 'BNB 프로젝트 만들기' 이렇게 2개의 실습으로 진행되었습니다. BNB 프로젝트를 제작하면서, 21년 Bucky 사이트를 구현했던 부분과 차이는 크게 아래와 같았던 것으로 기억합니다."}},{"id":"Mx6kChssrp","type":"delimiter","data":{}},{"id":"fvcI5Fz9C5","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"BNB 사이트는 DB 를 사용하지 않고 json 파일에 데이터를 저장하는 방식을 통해 구현.","meta":{},"items":[]},{"content":"Styled-component 구현 방식이 bucky 사이트 제작과 구조가 다름. (개인적으로 더 좋은 방식이라 생각함)","meta":{},"items":[]},{"content":"BNB 사이트는 redux, redux-wrapper 를 활용한 반면 Bucky 는 React-Query 를 사용.","meta":{},"items":[]}]}},{"id":"_HD8rqfyCs","type":"paragraph","data":{"text":"해당 서적으로 통해서 사용했었던, 혹은 새롭게 배웠던 기법이나 구현에 대해서 정리해보면 아래와 같습니다. "}},{"id":"3ISZG1SHFi","type":"customHeader","data":{"text":"모달 생성 with react-portal"}},{"id":"Uu4unXS0--","type":"code","data":{"code":"리액트 포털\n- https://reactjs.org/docs/portals.html\n부모 컴포넌트의 DOM 계층 외부에 있는 DOM 노드로 자식을 렌더링 하는 방법

\n엘리먼트를 다른 엘리먼트에서 렌더링을 하게 하는 방법\n\n1) React.createPortal(child, container);\n 첫번째 인자(child) : 리액트 컴포넌트\n 두번째 인자(container) : 실제 엘리먼트에 넣어줄 DOM 위치(id)"}},{"id":"guy8RgetAL","type":"delimiter","data":{}},{"id":"3B-3mD5ZkH","type":"customHeader","data":{"text":"회원가입 및 단방향 암호화"}},{"id":"kPdz7S5zJG","type":"code","data":{"code":"비밀번호를 안전하게 저장하기 위해 단방향 암호화를 진행합니다.\n\nbcryptjs 라이브러리를 사용\nyarn add bcryptjs\nyarn addd @types/bcryptjs -D\n\n[Encrypt password]\nvar bcrypt = require('bcrypt');\nvar salt = bcrypt.genSaltSync(10);\nvar hash = bcrypt.hashSync(\"my_password\", salt);\n-- Store hash in your password in DB\n\n[To check a password]\n-- Load hash from your password DB\nbcrypt.compareSync(\"my_password\", hash); //true\nbcrypt.compareSync(\"somone_password, hash); // false\n\n[Auto-gen salt and hash ]\nvar hash = bcrypt.hashSync(\"my_password\", 8)"}},{"id":"gqbocNlwnl","type":"delimiter","data":{}},{"id":"prHfGWuwId","type":"customHeader","data":{"text":"JWT 토큰"}},{"id":"jtbDI-mzbd","type":"code","data":{"code":"JWT 토큰을 사용하여 서버와 클라이언트 간 통신할 수 있는, 사용자 인증 토큰을 만들도록 합니다.\nyarn add jsonwebtoken\nyarn add @types/jsonwebtoken\n\njwt.sign 으로 생성한 토큰은 브라우저의 쿠키에 저장할 수 있도록 res 헤더에 'Set-Cookie' 를 설정합니다.\n\nconst jwt = require('jsonwebtoken');\nvar userInfo = {id: 1, username: 'inyong'};\nvar secretKey = 'SeCrEtKeYfOrHaShInG';\n\n[JWT 토큰 생성]\nconst token = jwt.sign(userInfo, secretKey);\n\n[Cookie 세팅]\nvar expires = new Date();\nconst koreaTimeDiff = 9 * 60 * 60 * 1000; // 한국 시간은 UTC보다 9시간 빠름(9시간의 밀리세컨드 표현)\nexpires.setTime(expires.getTime() + koreaTimeDiff + 30 * 60 * 1000);\nres.setHeader(\"Set-Cookie\",`access_token=${token}; path=/; expires=${expires.toUTCString()}); httponly`);\n\n[JWT 토큰 검증]\nconst userId = jwt.verify(token, screctKey);\n\n[.net core Version 처리]\nhttps://docs.microsoft.com/ko-kr/aspnet/web-api/overview/advanced/http-cookies"}},{"id":"s26hjQUTQv","type":"delimiter","data":{}},{"id":"jXRtiEh0IG","type":"customHeader","data":{"text":"리덕스 - reduxjs/toolkit, react-redux, next-redux-wrapper"}},{"id":"0GR9bNfe9A","type":"header","data":{"text":"- store/common.ts (Common 전역변수(redux) 처리)","level":3}},{"id":"eDVIRPl34m","type":"code","data":{"code":"import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { CommonState } from \"../types/reduxState\";\n// 초기상태\nconst initialState: CommonState = {\n validateMode: false,\n}\nconst common = createSlice({\n name: \"common\",\n initialState,\n reducers: {\n // validateMode 변경하기\n setValidateMode(state, action: PayloadAction) {\n state.validateMode = action.payload;\n },\n },\n});\nexport const commonAction = {...common.actions};\nexport default common; "}},{"id":"UTgWIcFgzb","type":"header","data":{"text":"- store/index.ts (redux 전체 묶음)","level":3}},{"id":"FrXHzOQad9","type":"code","data":{"code":"import { configureStore } from \"@reduxjs/toolkit\";\nimport { HYDRATE, createWrapper, MakeStore } from \"next-redux-wrapper\";\nimport { TypedUseSelectorHook, useSelector as useReduxSelector } from \"react-redux\";\nimport { combineReducers } from \"redux\";\nimport common from \"./common\";\nimport user from \"./user\";\nconst rootRedux = combineReducers({\n user: user.reducer,\n common: common.reducer,\n})\n// 스토어 타입\nexport type RootState = ReturnType;\nlet initialRootState: RootState;\nconst reducer = (state: any, action:any) =>{\n if(action.type === HYDRATE){\n if(state === initialRootState){\n return {\n ...state,\n ...action.payload,\n }\n }\n return state\n };\n return rootRedux(state, action);\n};\n// 타입 지원되는 커스텀 useSelector 만들기\nexport const useSelector: TypedUseSelectorHook = useReduxSelector;\nconst initStore = () => {\n const store = configureStore({\n reducer,\n devTools: true,\n });\n initialRootState = store.getState();\n return store;\n };\n export const wrapper = createWrapper(initStore);"}},{"id":"rE5iE3Cwsh","type":"delimiter","data":{}},{"id":"oVFvr6y9wa","type":"customHeader","data":{"text":"로그인 상태 유지 JWT, Redux, SSR"}},{"id":"ezucXKyyiS","type":"header","data":{"text":"getInitialProps 를 이용해 접속하는 순간에, 쿠키를 읽어와, DB 에서 유저정보 확인.","level":4}},{"id":"q5EiIKl1-C","type":"header","data":{"text":"pages/_app.tsx ","level":4}},{"id":"V65swIAVgb","type":"code","data":{"code":"// 참조\n//https://github.com/kirill-konshin/next-redux-wrapper#app\napp.getInitialProps = wrapper.getInitialAppProps(store => async context => {\n const appInitalProps = await App.getInitialProps(context);\n const cookieObject = cookieStringToObject(context.ctx.req?.headers.cookie);\n console.log(store);\n try{\n if(cookieObject.access_token){\n axios.defaults.headers.common['cookie'] = cookieObject.access_token;\n const {data} = await meAPI();\n console.log(data);\n store.dispatch(userActions.setLoggedUser(data));\n }\n }\n catch(e){\n console.log(e);\n }\n return {...appInitalProps};\n})"}},{"id":"3TzyGgKqbG","type":"header","data":{"text":"Outsider Click Handler ","level":4}},{"id":"aUiwdjNwPB","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"해당 컴포넌트 기준으로 아웃사이더 부분의 클릭여부 체크","meta":{},"items":[]}]}},{"id":"2qGBHWsolf","type":"code","data":{"code":"yarn add react-outside-click-handler\nyarn add @types/react-outside-click-handler\n\nimport OutsideClickHandler from 'react-outside-click-handler';\n\nfunction MyComponent() {\n return (\n {\n alert('You clicked outside of this component!!!');\n }}\n >\n Hello World\n \n );\n}"}},{"id":"zCK5ZO5QfD","type":"header","data":{"text":"Outsider Click Handler","level":4}},{"id":"ujjaAIygjp","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"array, collection date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 하는데 사용하는 라이브러리","meta":{},"items":[]}]}},{"id":"Y9DdaOGAd7","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메소드를 가지고 있음","meta":{},"items":[]}]}},{"id":"2KSWGeea6m","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"퍼포먼스 측면에서 native 보다 더 나은 성능을 가짐","meta":{},"items":[]}]}},{"id":"FAukIL4QoP","type":"code","data":{"code":"yarn add lodash\n \n import isEmpty from \"lodash/isEmpty\";\n \n {isEmpty(photos) && (\n

\n <>\n \n \n \n

\n )}"}},{"id":"WfekuOabAK","type":"header","data":{"text":"aws-sdk 파일 업로드 ","level":4}},{"id":"yNUrluAaTM","type":"code","data":{"code":"yarn add aws-sdk\nyarn add formidable\nyarn add @typeps/formidable\nyarn add uuid\nyarn add @types/uuid\n \nimport formidable from \"formidable\";\nimport formidable, { FileJSON } from \"formidable\";\nimport { NextApiRequest, NextApiResponse } from \"next\";\n\nimport aws from \"aws-sdk\";\nimport { createReadStream } from \"fs\";\nimport { rejects } from \"assert\";\nimport {v4 as uuidv4} from \"uuid\";\n\nexport const config = {\n api: {\n bodyParser: false,\n }\n};\n\n\nexport default async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === \"POST\") {\n try {\n const form = new formidable.IncomingForm();\n form.parse(req, async (err, fields, files) => {\n console.log(files);\n\n const url = await new Promise((resolve, reject) => {\n form.parse(req, async (err, fields, files) => {\n const s3 = new aws.S3({\n accessKeyId: process.env.ACCESSSKEY_ID,\n secretAccessKey: process.env.SECRET_ACCESSKEY_ID,\n });\n var formidableFile:any = files.file;\n const stream = createReadStream(formidableFile.filepath);\n\n // 파일 이름\n const originalFileName = formidableFile.originalFilename.split(\".\").shift();\n // 확장자\n const fileExtension = formidableFile.originalFilename.split(\".\").pop();\n\n await s3.upload({\n Bucket: process.env.S3_BUCKET_NAME!,\n Key: `${originalFileName}__${uuidv4()}.${fileExtension}`,\n ACL: \"public-read\",\n Body: stream,\n })\n .promise()\n .then((res) => resolve(res.Location))\n .catch((e) => rejects(e));\n });\n });\n } catch(e){\n res.statusCode = 201;\n res.send(url);\n } catch (e) {\n console.log(e);\n res.end();\n }\n }\n res.statusCode = 405;\n res.statusCode = 405;\n\n return res.end();\n return res.end();\n }\n} "}}],"version":"2.31.0-rc.7"}

Tag List