Loading...

[React, NextJS] Module parse failed: Unexpected character '' (1:0) 에러 수정 및 Next에서 이미지 import 되도록 설정

Posted by 해랑쓰 블로그 (Haerang's blog)

오늘 기능 좀 만들어볼까 했더니 Module parse failed: Unexpected character '' (1:0) 에러가 떠서 몇 시간 동안 헤맸다. 기본적으로 nextjs의 최근 버전에서 import/export로 이미지를 불러오는 것을 지원하지 않는 것 같고 next-image라는 것을 따로 설치하여 설정을 해준다. 이에 따라 next-image 밑 next.config.js 설정을 해줘도 위의 에러는 사라지지 않았다. stackoverflow에서는 webpack 얘기가 등장하는데 다른 사람들은 안해줘도 되던데 나는 해줘야되나? 싶어서 다른 해결방법을 찾아봤는데 결론은.. 결국 webpack.config.js에서 file-loader 설정을 해줘야된다. (이 에러가 난 사람이라면 필수) 왜 ..

[React, Nextjs] nextjs 에 emotion 설치 (react cra 동일)

Posted by 해랑쓰 블로그 (Haerang's blog)

설치 설치 yarn add @emotion/react @emotion/styled yarn add --dev @emotion/babel-plugin .babelrc 파일 생성 및 내용 추가 { "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"] } 글로벌 스타일 적용 및 스타일 적용 예제 style.js 파일 생성 (이름은 상관없음) import { css, Global, keyframes } from '@emotion/react' import styled from '@emotion/st..

[React, Nextjs] Next typescript 인텔리센스 안보이는 문제 해결

Posted by 해랑쓰 블로그 (Haerang's blog)

타입스크립트가 잘 작동하나 보려고 일부러 타입 에러를 일으켜봤는데 작동하지가 않아서 검색해서 여러 설정도 건드려보고 지인한테 물어봤는데 vscode extension 문제일수도 있다고 했다. extension을 이것저것 삭제해봤지만 되지 않아서 vscode를 지웠다 깔았는데 그냥 지우면 설정은 그대로 남아 관련 폴더를 모두 지워줘야 한다. [정리] ① c\사용자(혹은 user, 나는 user/내 사용자 이름이였다.)\Administrator(혹은 사용자 이름)\.vscode 폴더 삭제 ② c\사용자(혹은 user)\Administrator(혹은 사용자 이름)\AppData\Roaming\code 폴더 삭제 ③ 제어판 – 프로그램 추가/제거 – visual studio code 삭제 ④ vs code 재설..

2021. 2. 19. 16:20

[React, NextJS] tsconfig.json 절대경로 설정과 폴더구조 고찰

Posted by 해랑쓰 블로그 (Haerang's blog)

1. NEXTJS에 타입스크립트 설정방법 ** new 여러 글과 영상을 보고 next에 typescirpt를 적용하는 것을 따라했는데 이상하게 tsc로 ts파일을 변환하는 것은 되는데 next의 컴포넌트 타입체크를 안하는 문제가 있었다. vscode 에디터 save 속성과 관련되어 있는 문제 같은데 수정이 힘들어서 그냥 새로 폴더를 다시 생성했고 더 간단한 방법을 찾았다. 1. 루트 프로젝트에 touch tsconfig.json 파일 생성 (빈페이지로) touch tsconfig.json 2. yarn add --dev typescript @types/react @types/node 설치 3. npm run dev 혹은 yarn dev 실행 이렇게만 하면 알아서 typescirpt 설정을 해준다 bb 완..

[swexpert] 3234. 준환이의 양팔 저울 (java, 완전탐색)

Posted by 해랑쓰 블로그 (Haerang's blog)

nPr을 먼저해서 n개의 무게추를 순서를 모두 다르게 정렬한 다음 subset으로 왼쪽 혹은 오른쪽(왼쪽의 무게가 더 높도록 제한)으로 넘겨주면서 무게를 계산한다. 가능한 경우의 수를 리턴한다. import java.util.ArrayList; import java.util.Scanner; public class Solution { static int n,t; static int weight[]; static int sum; static int answer; static ArrayList arr=new ArrayList(); public static void main(String[] args) { Scanner sc=new Scanner(System.in); t=sc.nextInt(); for (int ..

[swexpert] 4012. 요리사 (java)

Posted by 해랑쓰 블로그 (Haerang's blog)

import java.util.ArrayList; import java.util.Scanner; public class Solution { static int t,n; static int[][] table; static int answer; public static void main(String[] args) { Scanner sc=new Scanner(System.in); t=sc.nextInt(); for (int tc = 1; tc

[Next.js 설정] Next에 Typescript 도입하기

Posted by 해랑쓰 블로그 (Haerang's blog)

1. yarn create next-app 프로젝트이름 => next 프로젝트 생성 2. 아래 글을 참고해서 typescript 관련 파일 설정한다. 아래 글에 나온 것 외에 아래 명령어로 두 개를 추가로 설치해줘야 동작한다. '@zeit/next-typescript' 의 경우 타입스크립트가 이제 내장되어 필요없다는 문구가 터미널에 나오길래 없앴는데 babelrc등을 설정하려면 결국 설치해줘야했다. 추가로 webpack을 설정할 경우에도 필요한 것 같다. 나는 아래 글을 보고 .prettier.js (탭 띄어쓰기, ''로 따옴표 통일, ',' 자동 붙여주기 기능 제공) 등도 같이 설정해줬다. yarn add --dev @zeit/next-typescript @babel/core tlog.tammolo.c..

[백준] 1987번 알파벳 (java, dfs)

Posted by 해랑쓰 블로그 (Haerang's blog)

www.acmicpc.net/problem/1987 1987번: 알파벳 세로 R칸, 가로 C칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1행 1열) 에는 말이 놓여 있다. 말은 상하좌우로 인접한 네 칸 중의 한 칸으 www.acmicpc.net 알파벳을 0~25의 숫자로 바꿔서 boolean체크를 해준다 import java.util.Scanner; public class Main { static int r,c; static String map[]; static int[] xpos= {0,0,1,-1}; static int[] ypos= {1,-1,0,0}; static int ans=Integer.MIN_VALUE; static boolean..

[swexpert] 1247. 최적 경로 (TSP, 외판원순환 문제, JAVA)

Posted by 해랑쓰 블로그 (Haerang's blog)

swexpertacademy.com/main/solvingProblem/solvingProblem.do SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com 모든 곳을 방문하는 여러 경로 중 가장 짧은 거리를 구하는 문제 이 문제는 시간 초과를 내지는 않는 문제 같아서 그냥 DFS 돌리면 되는데 visit배열 대신 비트마스크를 썼다. import java.util.ArrayList; import java.util.Scanner; public class Solution { static int n,t; static ArrayList pos; static Integer[] home; static int dis=Intege..

[백준] 3109번 빵집 (JAVA, 백트래킹)

Posted by 해랑쓰 블로그 (Haerang's blog)

www.acmicpc.net/problem/3109 3109번: 빵집 유명한 제빵사 김원웅은 빵집을 운영하고 있다. 원웅이의 빵집은 글로벌 재정 위기를 피해가지 못했고, 결국 심각한 재정 위기에 빠졌다. 원웅이는 지출을 줄이고자 여기저기 지출을 살펴보던 www.acmicpc.net 중간에 아니면 다른 경우를 탐색한다. 혹은 그만둔다. (백트래킹) 파이프를 가장 많이 연결하려면 최대한 위쪽으로 연결한다. 연결이 하나라도 되면 다른 경우는 생각하지 않고 다음 열에서 파이프라인을 연결을 시작한다. import java.util.Scanner; public class Main { static int r,c; static int map[][]; static boolean vis[][]; static int xpo..

티스토리툴바