![]()
서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하게 서버를 구성하고 싶을 때 이용하기 좋다. 🔥 파이어베이스 시작하기 1.1 파이어베이스 프로젝트 시작하기 파이어베이스 콘솔 로 들어가 프로젝트를 만들어줍시다. 1.2 앱 만들기 앱을 만들면 파이어베이스 SDK 가 나오는데 그 값을 저장해둡시다. 🌩 Next.js 프로젝트에 파이어베이스 세팅 1. firebasedb.ts 파일 생성 파일 키들은 노출되면 안되므로, 환경변수로 보호해줍니다. Next.js 에서의 환경변수는 프로젝트 root에 .env.local 이름으로 파일을 생성하고, NEXT_PUBLIC_키이름 = valu..
![]()
💄 CSS in JS CSS in JS 는 컴포넌트 스타일링 방식 중 하나 이다. (번외로, CSS in CSS 도 있다.) 쉽게 설명하자면, 자바스크립트 코드에서 CSS 를 작성하는 방식이다. `.css` 파일을 별도로 생성해 스타일을 주는 방법이 아니라, jsx, tsx 코드 내에서 스타일링이 가능하다. CSS in JS의 대표적인 라이브러리는 styled-component인데, CSS 스타일링을 .css 파일 레벨에서 작성하는 것이 아니라, 컴포넌트 레벨에서 작성이 가능하다 ! 🤔 그런데 말이죠. styled-component 는 치명적인 단점이 있다. 바로 SSR,SSG 환경과, 서버컴포넌트에서는 스타일링이 어렵다는 점이다. SSR을 지원하는 Next.js 의 공식문서에서는 이러한 경고문구가 있다..
![]()
백준에서 자바스크립트 환경에서 문제를 풀고 싶다면, 언어를 `node.js` 로 설정하면 된다. 백준 문제 제출 언어를 `node.js` 로 설정하면 됩니다. 만약, node.js 를 기본값으로 설정하고 싶다면, 언어설정 으로 들어가, node.js 를 드래그해서 맨 상단으로 옮긴 뒤 저장하면 된다. 백준 - Javascript Node.js 입출력 받기 보통 백준문제는 입출력을 받는 경우가 많은데, 아래와 같이 처리하면 된다. 한 폴더에 백준의 예시를 담을 `example.txt` 파일과, 실행할 `index.js` 파일을 만들어준다. 백준은 보통 아래처럼 예제 입력과 예제 출력을 보여주는데, 앞서 만든 `example.txt` 에 예제입력을 넣어주고 `index.js` 에서는 `fs 모듈` 로 `ex..
![]()
Next.js에서 페이지 이동은 useRouter 를 이용하거나, next/link의 Link 컴포넌트를 이용한다. 이 두가지 방식의 차이점은 무엇일까? const router = useRouter() const onClick = () => { router.push('...') // router.push } return ( {/* Link 이용 */} ) next/link 의 Link는 내부적으로 `` 태그를 생성한다. 따라서 useRouter push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있다. 여기서 말하는 직관적인 동작은 무엇일까? 위의 내 프로필을 클릭하면 나의 프로필 페이지로 이동은 하지만, 우 클릭시 이동과 관련된 액션을 찾아볼 수 없다. 하지만, 클릭하면 index페이지로 이동..
