0%

Next.js에서 body에 height 값을…

이번에 Next.JS로 프로젝트를 진행하다가 footer를 하단에 고정시켜야 했다.
그런데 css를 적용했음에도 안되서 개발자 도구를 키고 화면 컴포넌트를 확인하던 도중 화면 사이즈가 전체 화면이 아닌것을 확인하였다.
그래서 <body style="height=100%"> </body> 형식을 적용하려 했다.
내가 쓰는 Tailwindcss에서 h-full 로 적용하려 했지만 body에 적용이 안되었다.

방법을 찾다 포기하려 했는데 방법을 찾게 되어 공유한다.

1. 공통 레이아웃 또는 _app.tsx 에서 global style 을 적용해준다.

아래의 코드를 적용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
....

{/* Body full height */}
<style global jsx>{`
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100%;
}
`}</style>
....

나는 _app.tsx 에 선언된 공통 레이아웃 코드에서 적용 처리를 해줬다.
이렇게 하면 전체 화면이 적용된다.

VSCode에서 Tailwindcss를 사용하려 보니…

이번에 개발하는 내 서비스의 기술스택을 완전히 바꾸게 되었다.
그 중 프론트엔드 쪽을 React로 잡았다.
그런데 이것저것 찾아보니 next.js를 쓰는게 좋을거 같아서 일단 변경해봤다.
근데 여긴 뭐 Typescript인지 뭔지 해서 이걸 써야 하는거 같다는 생각이 들었다. (안쓰면 나중에 고생할거 같은?)

일단 이것저것 셋팅을 해뒀는데 몇 가지 거슬리는 부분이 생겼다.

그 css에서 @tailwind 를 선언한 부분이 이렇게 경고가 났다.
그냥 무시해도 되는데…
나의 성격상 이게 또 거슬렸다.

그래서 찾아보니 두 가지 방법으로 해결 가능했다.

1번. 아주 심플한데 좀 찜찜한 방법 (미봉책)

말 그대로 간단하다.

  1. VSCode에서 setting 으로 들어간다.
  2. 검색창에서 css.lint.unknownAtRules 을 검색
  3. 값을 ignore로 변경한다.

이렇게 처리하면 된다.
근데 미봉책이자 찜찜한 방법이다.

2번. 정석으로 처리(?)

설정을 추가하여 처리하는 방법인데 다음과 같다.

  1. 다음의 경로에 파일을 하나 생성한다.
    • 자신의 vscode 환경설정 파일이 담기는 곳에 생성한다.
      • Mac의 기준으로 home/.vscode 이다.
    1. 파일명은 원하는 걸로 만들어주는데 여기선 custom_css_config.json 이라 하겠다
    2. 그래서 결국 만들어지는 경로 및 파일명은 /home/.vscode/custom_css_config.json 가 된다.
  2. 1에서 만든 파일에 다음과 같은 json 내용을 채운다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
    "atDirectives": [
    {
    "name": "@tailwind",
    "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
    "references": [
    {
    "name": "Tailwind’s “Functions & Directives” documentation",
    "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
    }
    ]
    }
    ]
    }
  3. VSCode에서 setting를 열고 json이라 검색해서 settings.json 수정(JSON: Schemas 부분) 을 선택해서 수정 값에 아래의 내용을 추가해준다.
    1
    2
    3
    4
    5
    6
    {
    //기타 기존 설정들
    ....
    "css.customData": [".vscode/custom_css_config.json"],
    ...
    }
  4. 이렇게 처리하고 VSCode를 재시작 해준다.

이렇게 하면 된다.
근데 이렇게 해도 안된다면 VSCode의 확장 프로그램을 누락해서 그렇다.
나는 PostCSS Language Support 이걸 안깔아서 안되었다.
검색이 안될경우 링크 를 참고하자.

여기까지 하면 보통은 다 될거로 믿는다.
만약 안된다면…
Next.js 환경설정을 하면서 뭔가 누락을 했거나 핵심 확장 프로그램을 설치하지 않은거다.
근데 보통 여기까지 하면 문제는 사라질듯 하다.

VSCode에서 Import에서 모듈이…

다른 블로그나 유튜브 영상에서 보면 VSCode에서 Import 한 모듈이나 라이브러리의 설명이 잘 나오는데 나는 안나왔다.

그래서 소스코드를 보니 아래 사진처럼 떴다.

내가 WebSocket 의 라이브러리인 ws를 추가했더니 저렇게 떴다.
ws 앞에 보면 … 이 보인다.
맨트는..

모듈 wd에 대한 선언 파일을 찾을 수 없습니다
암시적으로 any 형식이 포함됩니다.

그리고 ws 위에 마우스를 올리면..

이렇게 any 가 뜬다.

처음엔 이걸 어떻게 찾아야 하나…
구글링 엄청 했다.
그리고 답을 찾았다.

해결법

너무 간단했다.
저기 나온 설명대로 하면 되는 거였다 -_-;;;
난 yarn을 쓰는데 아래의 명령어를 수행한다.

yarn add –dev @types/ws

npm도 앞에 구문만 바꾸면 된다.

개발용 의존성에 @types/[lib name] 을 설치해주면 끝…
여기서 @types는 타입 선언만 포함하는 모듈이다.
이걸 설치함으로써 Type Definition이 정의되어 이 문제가 해결되는 것이다.

이리 하면 아래와 같이 잘 나오게 된다.

이런 사소한 것이 계속 거슬렸는데 해결되어서 마음이 편안해졌다.

최근 개발을 접고….

주식도 하락장으로 접어들어 재미없어졌고…
넷플릭스도 맨날 보니까 이제 좀 질려졌다.

그래서 개발을 다시 한번 제대로 해볼까? 라는 무시무시한 생각을 해보게 되었다.
몇달 전 전에 같이 일했던 지인으로부터 프로젝트 합류 요청을 받고 진행했었지만…

그 프로젝트에서 해야 할 포지션도 애매했고..
나중에 뭔가 잘 되었을 때 스타트업 창립 맴버로 들어가기에도 좀 애매했다.
그리고 무엇보다 그 팀이 개발하거나 프로젝트를 진행하는 방식이 나랑 안맞았고,
가장 중요한 건…
난 프로젝트를 할 때 진행상황, 무엇을 해야 하는지 목표 등이 좀 명확하게 보여야 하는 문서나 도표?
그런 지표가 있었어야 하는데 약간 중구난방 식이었다.
다들 직업군이 있어서 바쁜거라 이해는 하지만… 그렇게 진행하는 플젝은 나랑 맞지 않았다.

그리고 내 개인적인 사유도 있고 해서 난 나왔다.

그쪽에서 진행하는 프로젝트는 node.js와 react, react-native 등을 썼다.
물론 난 하나도 몰라서 조금씩 배우면서 진행했다.

난 사실 이쪽을 아예 몰랐다.
Only Spring, Java만 고집했으니까…
지금 생각해보면 참 편협적인 사고였다.

무튼 이번에 SML 을 일렉트론으로 개발하면서 JS쪽과 Node를 좀 더 해보고 싶어졌다.
일단 더 큰 이유는 내가 만들고 싶은 웹 서비스가 있는데 이건 Spring boot로 개발하기엔 좀 힘들었다.

그래서 이번 기회를 통해 기술 스택을 완전 바꿔보기로 했다.
이번에 목표 삼은건..

  • Node.js
  • Express
  • React
  • Next.js
  • Tailwindcss
  • React-Native

이렇게?
일단 요새 현대 메타 풀스택으로 넘어가기로 정했다.

사실 취업도 생각해 봤는데…
지금은 아쉬운 것도 없고 내 재산이 일정 수준 이하(2.5 정도?) 떨어지면 그때 쯔음 생각해봐야겠다.
요새 사람을 안만나니까 그냥 작고 러프한 스타트업이나 공유 오피스에 들어가보고 싶어지긴 했었다.

뭐 일단 지금 생각한 아이디어 2개랑 흑집사를 완성 시켜보고 다 꼬이면 와인쪽 창업 해보고…
와인 리셀러쪽 창업해보고 싶어서 이것저것 알아봤는데 내가 원하는 상권에 열고, 이것저것 다 합치면 4억인가?
그냥 열고 망하더라고 함 해볼까 싶었지만…
그렇다고 교육비로 모은 자산의 1/3을 내는건 좀 아닌거 같아서 일단 보류하기로…
그리고 이쪽 업계도 공부가 필요하고, 인플루언서 성향도 필요해서 일단….

그냥 내가 생각한 아이디어를 구현하는데 집중해볼까 한다.
이번에 기술스택을 바꾸는데 도움이 많이 되었던 사이트는 노마드코더 이다.
여기서 일단 맛보기로 무료 강의를 들어봤는데 무료만 들어도 어느 정도 베이스 지식은 쉽게 깔수 있었다.

나머진 내가 찾아보면서 구현하면 되서..
무튼 이번에 한번 3월 안으로 웹 서비스를 구현해 보는 것을 목표로 했다.

그런데….
이 귀찮음은 언제쯤 해결할 수 있을까?

React에서 Cors 문제가…

최근 내 개인 프로젝트를 위해서 React와 node, next.js, typescript, tailwindcss 가 필요했다.
개발을 한창 내려놨던 나이기에 다시 새로운 것을 하려니 귀찮아졌다.
하지만 기존의 jQuery로 진행한 프로젝트를 모바일용으로 개발하는 것과 서버 기능 분담 등은 불가능 했다.
그래서 노마드코더 에서 강의를 들으며, 외국 성님들의 유튭 강의를 들으며 공부를 시작했다.

강의는 다 들었고, 샘플 프로젝트로 한번 개발을 시작해봤다.
그런데 fetch를 사용해서 JSON을 가져오는 부분에서 Cors 문제가 발생했다.
에러 내용은 다음과 같았다

1
2
3
4
5
6
7
8
9
[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Fetch API cannot load https://xxx.com due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (common.do, line 0)
[Error] Unhandled Promise Rejection: TypeError: Load failed
(익명 함수) (bundle.js:202)
asyncFunctionResume
(익명 함수)
promiseReactionJobWithoutPromise
promiseReactionJob

저 위에 xxx.com은 내가 임의로 설정한 사이트다.
(정보 조회 사이트 공개가 불가해서 임의로 설정했다.)

이걸 해결하는 법은 총 2개가 있다.

  1. xxx.com 의 서버 사이드에서 처리해주기.
  2. React의 package에서 proxy 처리 해주기.

1번 방법의 경우 나에겐 선택할 수 없는 옵션이었다.
그래서 2번을 선택했다.

처리 방법은 간단했다.

  1. 자신의 프로젝트의 package.jsonproxy 항목을 추가한다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    ....
    },
    "proxy":"https://xxx.com",
    }

    proxy가 들어가는 자리는 아무데나 상관 없다. (상위 값에 가능 (dependencies 이런데는 불가))

  2. 호출하는 부분에서 전체 url이 아닌 도메인을 제외한 형태로 호출한다.

예를 들어 풀 도메인이 다음과 같다면 두 번째 줄 처럼 처리하는 이야기다.

https://www.xxx.com/test/data?no=10
/test/data?no=10

그래서 호출하는 형태는 아래와 같이 될 것이다.

1
2
3
4
...
const getLottoData = async() => {
const json = await(await fetch("/test/data?no=10")).json();
...

근데 급 궁금해지는 것은…만약 2개 이상의 cors 사이트를 처리해야 한다면 어떻게 해야 하나?
이 부분은 직접 처리해야 할 때 다시 다뤄볼 예정이다.

VSCode에서 Emmet 이 동작하지 않는다.

VSCode를 잘 쓰다가 어디서 에밋? (발음이 Emmet 맞나 모르겠다) 이거를 알게 되서 해보려 했는데 안되었다 =.=
이상하게 뭔가 항상 인터넷에서 도는건 내 개발환경에서 안된다.

개발을 하지 말라는 게시인가….
무튼 나와 비슷한 상황의 사람들을 위해 남겨본다.

  1. VSCode에서 설정을 연다. (Mac 기준 Cmd + ,)
  2. 거기서 왼쪽 메뉴에서 확장(Extensions) 안에서 HTML을 선택하여 HTML › Format: Unformatted 항목의 settings.json에서 편집 항목을 선택한다.
  3. 설정 항목이 열리는데 맨 마지막 쯔음 아래 항목을 추가해준다.
1
2
3
4
5
{
....
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html": "html"}
}
  1. 다 되면 테스트 해본다.

위 사진처럼 html 파일 하나 만들고 ! 입력 후 tab해보면 위와 같이 뜨면 제대로 동작하는 것이다.



참고

참고 사이트

세션을 사용하려다가…

Node.JS에서 세션을 사용하려 했고, 저장소로 레디스(Redis) 를 사용하기로 했다.
설정법은 다음 포스팅에서 다루기로 하고…
일단 내가 쓰려 했던 패키지는 아래와 같다.

1
2
3
"redis": "^4.0.3",
"express-session": "^1.17.2",
"connect-redis": "^6.0.0",

이렇게 설정하고 redis 설정을 해줬다.
참고로 설정 파일을 외부로 빼고 app.use() 에서 넣어서 쓰는 방식으로 개발했다.
이 부분을 참고하면 될 것 같다.
그리고 설정파일의 경우 전체 정보를 공개하기 어렵기에 공통적인 부분만 남긴다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
* Redis 설정
*/

import connectRedis from "connect-redis";
import redis from "redis";

export function getSession(session) {
const RedisStore = connectRedis(session);
const redisClient = redis.createClient({
// url: "redis://127.0.0.1:10",
host: "127.0.0.1",
port: 10,
password: "0000",
});

redisClient.unref();
redisClient.on("error", console.log);

const sessionInfo = {
resave: false,
saveUninitialized: false,
secret: "sessionSecret",
name: "sessionId",
cookie: {
httpOnly: true,
secure: true,
},
store: new RedisStore({ client: redisClient }),
};
return session(sessionInfo);
}

위와 같이 설정된 상태에서 node.js를 실행할 경우 아래와 같은 에러가 발생했다.

1
2
3
[app] [2022-01-27T15:49:44.924Z] Server running to http://localhost:11 in dev
(node:45453) UnhandledPromiseRejectionWarning: Error: The client is closed
....

이런 문제가 발생하는 원인은 버전 문제다.
바로 connect-redis 패키지 문제이다.

NPM 사이트 에서도 확인 가능하지만 일부 내용을 발췌하면 다음과 같다.

1
2
3
4
5
6
7
8
9
10
RedisStore(options)
The RedisStore requires an existing Redis client. Any clients compatible with the redis API will work. See client option for more details.

Options
client
An instance of redis or a redis compatible client.

Known compatible and tested clients:

redis (v3, v4 with legacyMode: true)

요기서 보면 redis를 사용할 때 v4를 사용할 경우 legacyMode를 사용해서 쓰라 되어 있다.
난 redis 버전을 낮췄다.

“redis”: “v3”

무튼 해결법은…

  1. redis 버전을 낮춘다.
  2. legacyMode를 활성화 한다.

이 두가지를 조취한 다음 실행하면 아주 잘 된다.

별거 아닌걸로 시간을 좀 많이 쓰니 답이 안보인다….-_-;;

최근에 Node.JS 쪽으로 개발을 진행해보고 있다.
Spring boot만 쓰다가 새롭게 해보니까 신기한게 많았다.
그리고 jQuery만 쓰고 수준 낮은 형태의 JS 개발을 했었던 내 개발 방법이 싫어서 이번에 JS도 다시 제대로 배워보고 있다.

근데 Node에서 아주 답답한게 있었다….
난 ES6 형식으로 개발하는데 모듈을 임포트할 때 아래와 같은 문제가 있었다.

1
2
import * as init from "../../config/main_init.js"
import * as auth from "../../middleware/auth.js";

저 경로 보이는가?
처음에 몇개 간단하게 쓸 때는 안거슬렸는데 점점 코드가 늘어나면서 상당히 귀찮게 되었다.
게다가 해당 파일의 위치가 변경될 경우 이 부분도 문제가 되었다.
그래서 구글에 이것저것 찾아보는데 이쪽으론 어떤 식으로 키워드를 넣어야 할지 몰라서 좀 삽질했다.
사실 간단한 패키지 하나 설치하면 끝났을 문제기도 한데…난 뭔가 더 설치하기가 좀 불편했다.
덕지덕지 쌓이기만 할 뿐더러 보안 문제가 생길수도 있을거 같아서 사람이 많이 받아서 쓰거나 가급적 안쓰는 방식으로 진행했다.


해결법 (Node 14.6.0 이상 또는 12.19.0)

위에서 나온 버전에 해당되는 경우 아주 간단하게 그리고 다른 패키지를 설치하지 않고 해결할 수 있다.
먼저 package.json에서 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
...
"license": "None",
"type": "module",
"imports": {
...
"#middleware/*": "./some_path/src/middleware/*",
"#config/*": "./some_path/src/config/*",
"#route/*": "./some_path/src/route/*",
"#entity/*": "./some_path/src/entity/*",
"#util/*": "./some_path/src/utils/*"
...
},
"scripts": {
"dev": " nodemon ./start.js",
}
....
}

위에서 잘 봐야 할 부분은 import 부분이다.
여기서 양식은 아래와 같다.

1
[#지정 경로명/*] :  [실제 경로명]

앞은 **#*을 붙이고 원하는 경로명을 적고 **/  로 마무리를 적고, 뒤는 실제 경로면을 적으면 끝.
그럼 코드에서 아래와 같이 import 할 수 있다.

1
2
import * as init from "#config/main_init.js"
import * as auth from "#middleware/auth.js";

이렇게 사용이 가능하다.


해결법 (위 버전이 아닌 경우…)

이 경우에는 패키지를 설치하는게 좋다…
module-alias 라는 패키지인데 이걸로 해결하는게 깔끔할듯..

여담인데 난 이 방법은 안써봤다.

참고 링크

https://stackoverflow.com/questions/33214780/how-to-have-path-alias-in-nodejs

VSCode에서 한글이 깨질 때…

이번 M1 맥북을 사용하면서 기존에 Jetbrain 제품군을 사용하다가 Node.js 개발에 VSCode를 많이 사용한다 하여 이번에 써보기로 했다.

그런데 한글이 자꾸 한글자 한글자 씩 씹히는 현상이 발생했다.
아마 검색하다 들어온 사람은 무슨 말인지 이해할 듯..
이걸 해결하는 법은 몇 가지 있는데 내가 적용된 방법을 공유해본다.

1. VSCode에서 모든 명령 표시 창 열기

모든 명령 표시 창을 연다.
단축키는..

CMD+Shift+P

2. 검색 창에 표시 언어 구성을 선택한다.

표시 언어 구성을 입력하면 en만 있을텐데 ko를 선택하고 VSCode를 재시작 해준다.
만약 없다면 설치해주고 재시작 해주면 된다.

나같은 경우 이 방법으로 해결했다.

크론탭을 수정하려 할 때..

요새 잠시 개발을 손 놓았다가 다시 하게 되었는데 크론탭을 어떻게 수정해야 할지 막막했다 =.=;;
그래서 기억해둘 겸 간단 포스팅을 해두려 한다.

이 글은 우분투(Ubuntu) 20.04 인가 무튼 우분투 기준으로 작성되었다.
아래의 명령어를 입력한다.

sudo vim /etc/crontab

그럼 현재 등록된 크론탭이 보이는데 해당 내용에서 수정하거나 추가 후 저장하고 나와서 아래의 명령어를 입력한다.

sudo crontab -e

위와 같이 입력하면 크론탭이 수정되었다는 메시지가 나오고 처리는 끝난다.