오늘은 React 상속에 대한 내용을 좀 다뤄보도록 하겠습니다! 크게 3가지 정도의 Component 상속 개념이 있어요! Children, rest, 그리고 props 상속이 있다고 생각하면 될 것 같아요! (rest랑 props는 비슷하다고 생각하면 되겠습니다!) 먼저로는 제일 많이 사용하는 props의 개념으로 보도록 하겠습니다. Nextjs Props 상속 위의 사진은 제가 만들고 있는 소개 페이지의 한 부분이에요! (아직 미완성,,,, 진행중입니다 ㅠㅠ) 이 곳에 우리가 컴포넌트로 만들어야할 부분이 딱 보이는 바로 9개나 반복되는 박스가 되겠죠?! 그래서 그 박스를 아래와 같이 만들었어요! 자 여기서 첫번째 상속 Props의 개념이 나옵니다!! 저는 4가지의 props를 설정했어요 classNa..

이전 시간에 다뤘던 hover, active에 이어 버튼의 se lected 상태 적용할 인터랙션을 알아볼게요! 그전에 간단하게 오늘 다룰 내용을 좀 알아보도록 할텐데 딱 두가지가 중요합니다! 첫번째는 선택한 상태를 나타내도록 useState ReactHook을 알아야하구요! 물론 useState를 안쓰고도 충분히 가능하긴해요~! 두번째는 CSS 지식인, after before를 활용한 가상 요소 선택자를 알아야합니다! 일단 CSS를 알아가는 과정이니 가상 요소 선택자인 after와 before 위주로 알아볼게요! before selector라고 검색을 해보면 이렇게 정의를 하고 있습니다! The ::before selector inserts something before the content of ea..

오늘은! NextJs에서 페이지를 이동하는 방법에 대해서 알아보도록 합시다! NextJs는 pages directory의 .js .ts .jsx .tsx 파일을 기반으로 페이지가 라우팅되는 시스템을 가져요! 예를 들면, React를 한다면 아래처럼 react-router-dom을 사용하여 설정해야 하죠... 사실 저는 위와 같은 페이지 라우팅 방식이 너무 귀찮아서 ,,,,, Next만 사용해요...(못쓴다고 한적은 없슴다!!) Next에선 위의 방식들이 전혀 필요가 없게 되는데요! 처음에 말했듯이 pages directory의 파일을 기반으로 라우팅되기 때문입니다! 예를 들면 메인 페이지같은 경우는 pages/index.tsx 가 되고요! about 페이지는 pages/about/index.tsx 를 만..

오늘은 버튼하나도 좀 더 다양한 모션을 줄 수 있는 방법을 나눠보려해요! 이미지로 아래의 Navbar 버튼 4가지 케이스를 가져와봤는데요! (그냥 만든것이니,,, 디자인 측면의 색상 조절 같은 부분은... 알아서 해주세요ㅠㅠ!) CSS 기술만 참고!!! 기본상태 hover상태 - 마우스 올려놓은 상태 active상태 - 마우스를 클릭하고 있는 상태 selected상태 - 눌러서 선택된 상태 일단 오늘은 hover와 active를 다룬 후, 다음 시간엔 selected 상태의 위의 점 찍은 형태를 만드는 방법에 대해 알아보도록 하겠습니당. 마지막의 selected에 주는 액션은 좀 어려운 기술도 들어가기에 다음 글에 이어서 쓰도록 하지요! ㅎㅎ 영상으로 살짝 공유하자면 이런식으로 작동해요! 먼저 위의 Li..

오늘은 정말 간단하게 절대경로를 뚝딱 설정하는 법을 알아보도록 하자! 기억상으로...는 React에서 절대경로를 사용하려면 좀 복잡하게 설정해야했던 기억이 있다...?! 물론 내가 엄청 돌아갔을지도 모르겠지만 react-app-rewired와 customize-cra를 설치해서 config 파일도 만들고해서 귀찮았던 기억이 있지만, Next에선 정말 간편하게 할 수 있다! 후후 저번 시간에 만들어졌던 tsconfig.json 파일에서만 수정하면 되는데요! 아래처럼 기존에 있던 compilerOptions 에다가 추가로 baseUrl을 "."으로 현재경로로 설정한 후! paths를 통해 설정해주면 끝~!!! { "compilerOptions": { "baseUrl": ".", "paths": { "@lib..

최근 회사 업무 중 하나인 회사 소개 홈페이지의 리뉴얼!!! 소개 페이지이다보니 데이터를 다루며 표출하는 기술보다는 CSS와 자바스크립트를 이용한 인터랙션 디자인이 주된 업무가 됐어요..! (물론, 이것뿐 아니라 커머스 백오피스 개발도 있기에 극과 극의 업무를 ,,,,, 해요,,, 갈리는 소리가 들리시나요......) 적당한 CSS는 할 줄 알았지만 이정도로 CSS를 통해 다양한 애니메이션, 시각적 효과를 줄 수 있다는게 너무 신기해서 여러가지 CSS 기술을 포스팅하려 해요!!ㅎㅎㅎㅎ 첫번째로 다룰 내용은, 디자인 시안을 받은 후 우리가 해야할 작업에 가까워요! 모든 디자인엔 메인 컬러들이 있습니다. 메인컬러는 정말 많이 쓰이는 컬러니깐 자주 쓰이겠죠?? 여기서 잠깐, 만약에 메인컬러를 20군데에 사용했..

초기 환경설정을 마쳤다면 페이지의 구성을 만들어야 한다! _app.tsx와 _document.tsx에서 우리는 전체 프로젝트 페이지의 공통 역할을 다루게 된다. _app.tsx 에서는 다음과 같은 일을 한다고 한다. 1. Persisting layout between page changes 2. Keeping state when navigating pages 3. Custom error handling using componentDidCatch 4. Inject additional data into pages 5. add global CSS 페이지간의 이동에서 공통된 layout을 유지시켜 주며(1), 상태 또한 유지 시켜준다(2). 또한 위의 중간의 MyApp.getInitialProps 를 통해서 앱..

이 내용의 collection 조회 기능은 아래 링크의 mongoose connect 과정을 통한 조회 방법이니 mongodb와 다릅니다! https://blog.naver.com/glory4god/222533893848 이번엔 mongoose 를 이용한 조회 방법을 알아보려한다! 일단 mongoose를 사용하기 위한 스키마를 만들어야한다. 일단 위는 팔로우관계를 저장하기위한 follows 라는 collection 이다. follower => follow 라고 하여 follower 가 1이고 follow 가 2라면 1이 2를 팔로우하는 관계라고 생각하면 된다. 그러면 다음과같이 mongoose 커넥터인 dbConnect() 함수를 통해 연결한 후 Follow라는 설정한 스키마를 import해서 사용할 수..

이 내용의 collection 조회 기능은 아래 링크의 mongodb connect 과정을 통한 조회 방법이니 mongoose와 다릅니다! https://blog.naver.com/glory4god/222533893848 오늘 살펴볼 내용은 mongodb에서 collection을 조회하는 경우를 살펴보도록 함!! 먼저 서버는 nextjs 서버를 통해 작성된 내용임을 참고하도록 ...! import { connectToDatabase } from 'lib/mongoDB/mongodb'; import { NextApiRequest, NextApiResponse } from 'next'; export default async function handler( req: NextApiRequest, res: Nex..

오늘은 noSQL중 하나인 mongoDB를 Nextjs server와 연동해보려 합니다! 한 번은 mongoDB도 사용해봐야겠죠?! 아래의 방법으로 mongoDB를 nodejs를 connect 할 수 있습니다. 이것을 통해 조회하는 방법은 앞으로 차차 적어보도록 하고 연결 스크립트만 알아보도록 할게요! // mongoose dbConnect import mongoose from 'mongoose'; const MONGODB_URI = process.env.MONGODB_URI; if (!MONGODB_URI) { throw new Error( 'Please define the MONGODB_URI environment variable inside .env.local', ); } let cached = g..