Web Developer - Nextjs/SEO

오늘은 저의 개발속도를 향상 시켜줄 tailwindcss를 프로젝트에 install하는 방법을 알아볼까 해요! tailwindCSS를 한 번도 안써본 사람은 있어도 한 번만 쓴 사람은 아마 없을거라고 생각해욯ㅎㅎ 그렇다면 왜 제가 이걸 계속 쓰는지 한 번 볼까요?! 일단 제가 생각하는 장점을 말해보자면 1. 조금만 익숙해진다면 css 개발 속도가 훨씬 증가! (코드량 감소) 2. 자주 필요한 css가 미리 만들어져 있어서 손쉽게 구현 가능! 하지만 그럼에도 단점이 있긴하죠,, 제가 생각하는 단점을 말해보면 1. 익숙하지 않다면 지저분하게 생각들수도 있다! 태그의 className에 연달아 쓰기때문에 지저분하대요.... (하지만 저는 css 파일에 tailwind를 적용하여 사용하기에 지저분하다고는 생각안..

이번 시간에는 box-shadow를 통해 정말 간단하지만 버튼 active 상태를 유저에게 확실하게 제공할 수 있는 효과에 대해서 알아보도록 할게요! 요새 CSS 관련 글을 작성할 때 마다 내가 고민하며 구현했던 것들을 나눌 수 있다는게 즐거워요ㅠㅠㅠ CSS 너무 재밌는 것,,,,,,,, 이제 본론으로 가보도록 하겠습니다! 오늘도 결과를 먼저 보여드리자면 메뉴 1 버튼을 보시면 왼쪽부터 기본 / hover / active 상태입니다! 확실히 hover일 때는 올려놓은 듯하게, active 상태일 때는 마우스로 누르고 있는 것 처럼 느껴지죠?? 이런게 UI/UX이지 않을까 싶습니닿ㅎㅎㅎㅎ 먼저 box-shadow를 통해 얻을 수 있는 효과를 살짝 설명하자면, 태그의 영역에 그림자효과를 주어 박스 형태가 있..

드디어! 마무리 할 시간이 왔습니다! 오늘은 마지막으로 selected 상태를 다루는 과정을 알아보려해요! selected상태일 땐, 아래 사진과 같이 글씨 상단에 노란 점을 찍어보려하는데요! 지난 시간에 after before를 사용해봤는데 이거.. 안해봤겠죠?? ​ 그래서! 오늘은 '어떤식으로 만들기 위해 접근할까'라는 생각을 갖고, 접근 방식을 보려해요! ​ 글씨위에 점이 생기네?? (새로운 tag를 만들고, selected일 때만 tag를 보이게 해야하나..?) 이렇게 생각할 수 있지만 오늘은 가상 요소 선택자의 before 사용하여 다뤄보려해요! ​ 1. before를 만들어, absolute로 top:0에 left : 50% 를 주면 가운데에 생기겠지??? 먼저 위와 같이 만약 selected..

오늘은 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..

오늘은 CORS 관련 오류 해결을 하나 스윽 적고 가려고 해요! 일단 마주한 에러는 제목과 같은 내용이며 프론트에서 fetch를 통해 rest api를 호출하는 과정에서 아래 사진과 같은 에러를 접했을 경우에 해결하는 방법에 대해 알아보도록 하자! 에러 내용은 아래 사진처럼 access to fetch at 'api 주소' from origin has been blocked by CORS policy 인데 개발을 시작했다면 볼 수 밖에 없는 에러이니 확실히 알고갑시다! 먼저 CORS 이슈가 뭔지 간단하게 알아보도록 할까요?!! 1. SOP (same-origin policy) 이란 ? 같은 Origin 으로만 요청을 보낼 수 있도록 제한되어 있는 보안 정책! Origin의 구성은 URI Schema / ..

이전에 javaspring을 실행 중 만난 오류에 대한 해결 방법을 빠르게 보도록 할께요~! 일단 오류의 내용은 이러합니다! Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled. The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured. Verify the connector's configuration, identify and stop any process that..

프로젝트를 시작하기위해선 어떤 환경에서 개발을 할지 생각을 해봐야한다! ​ 그 중에 NextJs로 개발환경을 구축하는 과정에 대해 알아보고자 한다. ​ 일단 한가지는 보안 전문회사라 개발pc의 보호를 위해 외부망도 쓰지 않고 인터넷도 차단된 공간에서의 오프라인 설치..... 과정이다 ​ 아 물론! 패키지설치를 위한 npm은 작동된다! ​ 일단, 확실한건 create-next-app이 불가능하기에 다음과 과정으로 next를 수동설치하게 되었다. ** 수동설치 필요없는 분은 npx create-next-app 한 방이면 끝!!!!!! ​ 1. Next / React 설치! ​ 먼저 아래와 같이 터미널에 입력하여 package.json과 react next typescript 기반으로 설치를 할 수 있다! 사..