전체 글
[Nextjs] Nextjs 시작하기 - (3) css 스타일링 하는 법, Link 스타일링 하는 법
nextjs에서 css 스타일링을 하는 방법은 크게 3가지가 있다. global css 사용 module.css styled jsx global css는 우리가 일반적으로 import로 css 파일을 가져오는 방식이니 넘어가고, nextjs에서 사용하는 module.css와 styled jsx 방식이 뭔지 알아보겠다. css module 방식 일반 css 파일을 import 해오는 방식의 문제점은, css 스타일이 전역적으로 적용된다는 것이다. 그 문제점을 해결해 줄 수 있는게 바로 css module이다. 이 css module은 Nextjs 뿐만 아니라 React에서도 사용할 수 있는 방법이다. css module을 적용해 스타일링을 하고 화면을 개발자도구로 검사했을 때, 내가 작성한 classNam..
[Nextjs] Nextjs 시작하기 - (2) Link 설정하는 법, Navbar 만들기
1. Link 컴포넌트란 React에서의 Link 컴포넌트나 useNavigate처럼 페이지 간의 이동을 CRA 방식으로 부드럽게 전환할 수 있도록 도와주는 태그이다. 'next/link'로부터 import 해온다. React에서는 react-router-dom 패키지를 따로 설치해야 했지만, nextjs는 편리하게도 자체에 이런 패키지를 내장하고 있다. 💡 내부 라우팅을 부드럽게 해주는 용도이기 때문에, 외부 링크로 이동할 때에는 a 태그를 이용하자! Link 설정하는 법 LInk에 이동할 주소, className 등을 작성하면 된다. target="_blank"와 같이 보통 a 링크에 작성하는 속성이 필요하다면 그대로 Link에 넣으면 된다. import Link from 'next/link'; fu..
[Nextjs] Nextjs 시작하기 - (1) 설치, 디렉토리 구조
1. 설치 npx create-next-app 명령어를 입력해 설치를 하면 prompt에 다음과 같은 질문들이 나온다. 대부분의 질문들은 기본값대로 엔터만 치면 된다. ESLint와 Tailwind는 나중에 따로 설치하려면 귀찮으므로 웬만하면 그냥 Yes를 하는 편이다. 그런데 아래 질문들은 Nextjs의 설정에 큰 영향을 주므로 취향에 따라 잘 선택해야 한다. 일단 나는 튜토리얼을 학습하는 입장에서 다음 같은 선택을 했다. Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias..
[백준] 2178번 - 미로 탐색
문제 https://www.acmicpc.net/problem/2178 // 입력 4 6 101111 101010 101011 111011 // 출력 15 풀이 BFS로 최단거리 찾기 문제. 맨 처음에 풀 때는 백트래킹을 안해줘서 시간제한에 걸렸는데, visitied로 방문했던 곳을 관리해 한번 갔던 곳은 다시 안 가게 했더니 통과했다. const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); const [N, M] = input[0].trim().split(' ').map(Number); const maps = []; for (let i = 1; i < input.length; i..
[백준] 1260번 - DFS와 BFS (js)
문제 https://www.acmicpc.net/problem/1260 풀이 4 5 1 1 2 1 3 1 4 2 4 3 4 이걸 아래와 같이 정리한다. [ [], [ 2, 3, 4 ], [ 1, 4 ], [ 1, 4 ], [ 1, 2, 3 ] ] 1번 인덱스에 [2, 3, 4]가 있다는 것은 1과 2, 3, 4번 노드가 연결되어 있다는 뜻이다. 그리고 visited 배열을 둬서 갔던 곳을 다시 방문하지 않도록 true/false로 관리한다. graph와 visited 배열 모두 0번 인덱스는 비워두고 시작해서 직관적으로 1번 인덱스가 1번 노드라는 것을 알 수 있게 한다. dfs는 깊이 우선 탐색이기 때문에 for문과 재귀호출을 이용해서 구현한다. 아래로 파고들었다가 빠져나오면 for문을 이용해 형제 노..
프로그래머스 Lv.2 | 괄호 회전하기 js
문제 https://school.programmers.co.kr/learn/courses/30/lessons/76502 풀이 x만큼 왼쪽으로 회전한다는 것은 문자열을 0부터 x까지 잘라서, x+1 이후의 문자열의 꽁무니에 붙이는 것과 같다. substring으로 문자열을 양분해서 앞쪽 것을 뒤에 붙여주자. 괄호의 열림, 닫힘 여부는 stack을 사용하고, 괄호의 짝을 확인하기 위해 Map object에 짝을 저장해놓는다. 0부터 x번까지 모든 회전하는 경우의 수를 구해야 하므로 회전은 바깥for문이 담당한다. 본인이 왼쪽 괄호인지는 Map에 key가 존재하는지로 확인하고, 왼쪽 괄호라면 stack에 집어넣는다. 만약 Map에 없다면 오른쪽 괄호이므로 stack에 있던 것을 pop해서 본인의 짝인지 확인해..
프로그래머스 Lv.2 | 피보나치 수 js
문제 https://school.programmers.co.kr/learn/courses/30/lessons/12945 풀이 n은 2 이상이므로 for문은 2부터 시작한다. 그리고 0과 1에 대한 값을 미리 초기화해놔서 F(2)부터 구해나가는데 문제가 없도록 한다. F(n)에 도달하게 되어 다 구하면 for문이 종료되고 맨 마지막 값이 바로 피보나치 수가 된다. 맨 마지막에 1234567로 나누지 않고 중간중간 나누는 이유는 바로 오버플로우의 위험 때문이다. 피보나치 수는 일정 수준이 되면 수가 매우 커지는데 이때 오버플로우가 발생해 -값으로 변해 의도치 않은 값으로 변해버릴 수 있다. 따라서 중간에 틈틈히 1234567의 나머지로 바꿔주는 것이다. function solution(n) { const f..
프로그래머스 Lv.2 | (스택/큐) 기능개발 js
문제 https://school.programmers.co.kr/learn/courses/30/lessons/42586?language=javascript 풀이 큐로 풀었다. 기능개발에 걸리는 기간은 Math.ceil((100 - progresses[0]) / speeds[0]) 맨 앞에 있는게 안 나가면 뒤에는 맨 앞 날짜보다 작거나 같은 날짜가 계속 쌓이게 된다. 날짜 배열의 [0]번보다 큰 날짜가 나온다면 그동안의 기능들을 다 배포하게 되는데, 개발한 기능의 개수를 세주고 날짜 배열을 비우고, 새로운 날짜 기준부터 다시 시작한다. function solution(progresses, speeds) { const answer = []; let dates = [Math.ceil((100 - progre..