728x90 반응형 전체 글136 [next.js] useRouter hook 쿼리스트링 가져오기 & 페이지 이동하기 쿼리스트링이란 키=값 형태, URL에서 ? 다음에 오는 내용이고 데이터 전달 방법입니다. 이동 버튼과 input 칸에 글 입력하고 엔터누르고 url 확인 const router = useRouter(); const { s } = router.query; //쿼리스트링 가져오기 router.push(`/test?s=${value}`); //페이지 이동 콘솔에 router.query 찍어보면 객체로 나온다. 2023. 12. 1. [next.js]Link 컴포넌트 Link 컴포넌트 리액트의 Link와 비슷하지만 몇가지 차이점이 있다 1. 라이브러리차이 React Router의 Link: React Router 라이브러리에 속함. Next.js의 Link: Next.js 프레임워크에 포함됨. 2. 경로 설정 React Router의 Link: to 속성으로 URL을 설정. ex) Next.js의 Link: href 속성으로 URL을 설정함. ex) About 3. 페이지 로드 방식 React Router의 Link: 페이지 전체를 다시 로드하지 않고 내부적으로 페이지를 바꿈. Next.js의 Link: 페이지 전환 시 자동으로 해당 페이지를 미리 로드하는 '프리패칭' 기능이 있어 더 빠른 로드가 가능. Link 와 a태그 차이 1. a 태그를 사용하면 페이지를 이동.. 2023. 11. 30. [next.js]라우팅(Routing) 라우팅 어떤 주소에 어떤 페이지를 보여줄지 정하는 것 Next.js는!!!! 파일시스템 기반 라우팅 파일의 경로가 주소에 매칭되는 라우팅 방식 page폴더에 index.js가 최상위 경로 ' / ' page폴더에 setting.js 와 search.js 파일 만들고 웹사이트 경로 확인해본다 page/products/1 다이나믹 라우팅 여러주소를 하나의 컴포넌트에서 처리하는 방법 next.js에서는 param 이라고 부른다 param을 사용하여 여러 페이지 랜더링 폴더명을 [id] 로 바꾸고 폴더안에 index.js로 바꿔도 똑같이 적용됨 2023. 11. 30. [next.js]Next.js 시작(설치, css 적용 방법, _app과 _document) Next.js를 사용하는 이유 빠른 로딩: 서버 사이드 렌더링과 정적 사이트 생성을 통해 페이지 로딩 속도를 개선합니다. 쉬운 페이지 라우팅: 파일 기반 라우팅으로 페이지를 쉽게 추가할 수 있습니다. 자동 코드 분할: 필요한 코드만 로드하여 성능을 향상시킵니다. API 라우트: 별도의 백엔드 없이 API를 쉽게 구축할 수 있습니다. 개발자 친화적: 개발 중에 빠른 피드백을 제공합니다. 강력한 커뮤니티 지원: 많은 개발자와 리소스가 있어 문제 해결이 쉽습니다. Next.js의 장점 프리렌더링 vercel로 서버 호스팅 파일 시스템 기반 라우팅 Next.js 셋팅 1. vscode 설치(Lts 적힌거 설치) https://code.visualstudio.com/ 2. node.js 설치 https://nod.. 2023. 11. 30. 유닉스 커맨드(참고용) 유닉스 커맨드 commend -명령어 Command Line Interface(CLI) 리눅스와 같이 키보드를 통해 커맨드 입력하는 방식 Graphical User Interface(GUI) 화면과 마우스를 사용하는 방식 리눅스(Linux): 무료 GNU/linux 운영체제 유닉스(unix): 유료 1970년대 초반에 개발된 윤영체제 소프트웨어를 개발하고 실행할 수 있는 편리한 플랫폼 쉽게 수정해서 다른 컴퓨터에 적용가능 유닉스를 기반으로 하는 다양한 운영체제 유닉스 운영체제(유닉스커맨드) ex) macOS , Linux, 우분투(Ubuntu) 윈도우 운영체제 윈도우 커맨드 웹사이트 배포과정에서 유닉스커맨드 사용 서버 컴퓨터를 사용하는데 유닉스 커맨드 사용 ● 커널 CPU에 명령을 내리는 소프트웨어 OS.. 2023. 9. 12. Git(참고용) Git 코드 버전관리 프로그램 git 기능 1. 버전관리 - 지난과정 확인 가능 - 이전 버전으로 돌아갈 수 있음 2. 동시 협업 github 다른컴퓨터에 작업물 보내기 깃으로 버젼관리하는것을 올리는곳이 깃허브 git 1. 레포지토리(repository) 커밋이 저장되는 곳 (프로젝트 디렉토리의 각 버전이 담기는 저장소) .git 2. 커밋(commit) 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 행위 & 결과물 ex) 프로젝트 작업할 폴더 만들고 git init - 비어있는 레포지토리 생성 커밋하기전 깃에게 커밋한 사람 알려줘야함 git config user.name "nammini" ---이름 설정 git config user.email "tbvhdaos@naver.com" ---이메일 .. 2023. 9. 12. Github 보호되어 있는 글 입니다. 2023. 9. 12. [css]display: grid 플렉스박스는 한 방향으로 배치되지만 그리드는 여러 방향(바둑판처럼)으로 배치가 가능함 원하는 위치에 자유롭게 배치 가능함 한칸을 그리드 셀이라함 grid-template-rows & columnns 격자 나누기 gap 간격 grid-auto-rows & columns 크기 미리정하기 grid-row & column, span 원하는 위치에, 여러칸에 걸쳐서 배치 grid-area, grid-template-areas 이름으로 배치 ex) 3 x 3 그리드 형태 display: grid grid-template-rows: 200px 200px 200px; grid-template-columnns : 200px 200px 200px; 또는 grid-template: 200px 200px 200px / 200.. 2023. 9. 11. [css]display: flex flex-box 유연한 박스 1. container 박스에 주는 속성 *display: flex; ->block에서 flex로 변경 *flex-direction -> 아이템의 배치방향(주축)을 지정 속성 값: row/column / row-reverse/ column-reverse default(기본값) => row *flex-wrap -> 아이템의 배치를 1줄 또는 여러줄 지정 속성 값: wrap/no-wrap/wrap-reverse 여러줄/1줄/줄 반대로 default(기본값) => nowrap *justify-content -> 주축 방향 정렬 속성 값: flex-start/ flex-end/ center/ space-between/space-around (space-between : 아.. 2023. 9. 11. [css]position html요소의 위치를 결정하는 방식을 설정 위치를 결정하는방식 static 정적 위치 - default (기본값) relative 상대위치 (상대 box 기준) absolute 절대위치 (윈도우 기준) fixed 고정 위치 위치 변경 속성 top, left, right, bottom position: static; position: relative; top: 30px; left: 30px; position: absolute; top: 30px; left: 30px; position: fixed; position: sticky; static 처럼 원래위치에 있다가 브라우저 스크롤이 내려가면 fixed 처럼 고정됨 반응 범위는 부모 요소안까지만 반응함 추가 right: 0; left: 0; 를 주게 되면 w.. 2023. 9. 8. [css]크기(size) width, height, font-size, padding, margin 등 css 크기(size)에는 절대적 크기 단위 픽셀(px) - 절대적인 단위. - 화면을 표시하는 기준이 되는 크기 ex) 10px = 정사각형 10개의 길이 상대적인 크기 단위 퍼센트(%) - 부모태그에 대해서 상대적인 크기 - 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면됨 ex) 부모가 200px X 100px 일때 자식이 50% X 50% 면 자식은 100px X 50px em, rem -글자 크기를 기준으로 상대적인 크기를 정함 1. em - css에서 1em = 부모태그의 font-size임 ex) 부모가 16px 이고 자식이 2em이면 16x2 = 32px임 2. rem - css에서 1rem = 최상위 태그(html.. 2023. 9. 5. open graph 사용하여 소셜 공유 미리보기 만들기(메타태그) 카카오톡, 페이스북 등등 sns에 링크를 공유하게 되면 미리보기가 가능하게 함 메타데이터 - 미리 배포해놓은 웹 사이트 주소를 활용함 ex) 나만의 블로그 하하하하하하하 소셜공유 미리보기 확인 사이트(페이스북 로그인해야함) 공유 디버거 페이스북 https://developers.facebook.com/tools/debug/ 공유 디버거 - Meta for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com 페이스북 디버거 로그인 후 입력창에 배포한 주소 입력하고 디버그 클릭 짜잔~!!!! 카카오.. 2023. 9. 5. 이전 1 2 3 4 5 ··· 12 다음 728x90 반응형
