본문 바로가기

IT관련/NextJS

IT관련/NextJS 2022. 5. 19.
Next js에서는 a태그대신에 Link태그를 사용하자 ! 안녕하세요 ! 이번에는 Next JS에서는 Link태그에 대해서 ! 또한 단순히 a태그를 이용하면 안되는 이유에 대해서 알아보겠습니다 ! 먼저 바로 단순히 a태그만 이용해서 구현해보겠습니다 a태그 이용하기 일단 간단히 a태그만 이용하면 저런식으로 경고문자가 나와줍니다!!! / 이거말고 /about 이런식으로 이용하면 없어지긴하는데 next js에서 제공해주는 Link 태그를 사용합시다 !!! Link태그 이용하기 저런식으로 위에처럼 간단히 할 수 있습니다 !!! 하지만 여기서 a태그를 왜 써야하지? 라는 의문이 있을 수 있습니다 !! 그럼 한번 a태그를 빼볼까요??? 이런식으로 잘 들어오는것을 확인 할 수 있습니다 !!! 하지만 ! 저희가 저기 Link태그에 클래스명을 줘서 스타일을 적용하고 싶다면 ??..
IT관련/NextJS 2022. 4. 12.
document is not defined 에러가 뭐야? 해결법 !! (feat. window is not defined) 안녕하세요 !! Next JS를 쓰다보면 「document is not defined」나「window is not defined」를 볼 수 있습니다 ! javascript 문법을 쓰는건데 왜 일어나는거지라고 저도 엄청 생각했습니다 ! 이 에러가 일어나는 원인과 해결법을 알아보겠습니다 !!! document is not defined window is not defined 자 먼저 밑에와 같이 써봅시다 ! 이러고 나서 ! 자신의 웹 화면을 봐주세요 ! 그럼 오류가 !!! window도 한번 써볼까요??? window도 마찬가지입니다 !!! 왜 이런 현상이 발생할까요?? 단순히 javascript문법을 쓰는건데 ;;; 이유는 아래와 같습니다 ! 원인은?? Next JS는 서버쪽과 클라이언트 측에서 모두 움직..
IT관련/NextJS 2022. 3. 30.
Next JS의 기본!! _app.js, _document.js에 대해서 알아보자 ! 안녕하세요 !! 이번엔 Next JS의 _app.js, _document.js이 뭔지 !! 어떻게 사용하면 좋은지에 대해서 설명하려고 합니다 !! Next JS 를 사용함에 있어서 엄청 중요한 부분이니 꼭 이해해봅시다 ! _app.js란? Next.js에서는 App구성 요소를 사용하여 모든 페이지를 초기화합니다. 따라서 !! _app.js(tsx)을 만들어 기본 App 구성 요소를 덮어 쓸 수 있습니다 !! 즉, 모든 페이지에서 필요한 처리를 여기에 쓸 수 있습니다 !! ( 핵심은 모든 페이지에서 공통으로 사용함 ) 그 밖에도 App 컴포넌트에서는 다음과 같은 것을 할 수 있습니다 페이지 간의 공통 레이아웃을 가질 수 있습니다. 공통 상태를 가질 수 있음(Store를 설정해두면 좋습니다) 글로벌 CSS ..
IT관련/NextJS 2022. 3. 29.
Next JS가 풀스택이 가능한이유 ! (feat. api, prisma, planetscale) 안녕하세요 !!! 리액트를 꾸준히 사용하다가 전직을 하게 되면서 Next JS를 쓴지 6개월정도 되는데요 ! 그동안은 빨리빨리 개발만하다가 ㅜㅜ 이제와서 깊게 들여다보면서 Next JS에 대단한 점들을 소개하려고 합니다 ^^ 왜 ! Next JS가 풀스택이 가능한가 ! 에 대해서 써보겠습니다 ^^ 잘 읽어봐주세요 !!! 아 ! 이 전에 먼저 prisma와 planetscale가 설치 및 회원가입을 했다는 전제하로 하겠습니다 !!! 못보신분들은 밑에 URL참고 !! ㅎㅎㅎ Prisma 설치 : https://heokknkn.tistory.com/24 planetscale 설치 : https://heokknkn.tistory.com/25 자 ! 먼저 prisma client를 설치를 안해주신분들은 설치 해줍..
IT관련/NextJS 2022. 3. 16.
Next JS의 기본과 디렉토리의 구조에 대해서 알아보자 ! (feat. pages folder, public folder) 안녕하세요 !!! 가장먼저 Next JS에 대해서 소개를 해야했는데 이제와서 하네요 ㅜㅜ 늦었지만 !!! 간단하고도 쉽게 또 어떻게 쓰면 더 좋은지에 대해서 소개하려고 합니당 !!!! Next JS란? Next.js는 React 기반 프런트 엔드 프레임 워크입니다. 성능, SEO 및 애플리케이션 개발의 효율적이며 ! 또한 Routing, Server Side Rendering(SSR), Static Site Generator(SSG), Image에 관한 기능이 미리 내장되어 있으므로 React와 같이 이러한 기능을 개별적으로 설치, 설정할 필요없이 설치 직후부터 사용할 수 있습니다!! 현재도 진화를 계속하고 있어 버전을 올릴 때마다 기능이 확장되고 있습니다. 이렇습니다 !!! 이번엔 그래서 !! Next..
728x90

티스토리툴바