VSCode에서 Tailwindcss를 사용하려 보니… 이번에 개발하는 내 서비스의 기술스택을 완전히 바꾸게 되었다. 그 중 프론트엔드 쪽을 React로 잡았다. 그런데 이것저것 찾아보니 next.js를 쓰는게 좋을거 같아서 일단 변경해봤다. 근데 여긴 뭐 Typescript인지 뭔지 해서 이걸 써야 하는거 같다는 생각이 들었다. (안쓰면 나중에 고생할거 같은?) 일단 이것저것 셋팅을 해뒀는데 몇 가지 거슬리는 부분이 생겼다. 그 css에서 @tailwind 를 선언한 부분이 이렇게 경고가 났다. 그냥 무시해도 되는데… 나의 성격상 이게 또 거슬렸다. 그래서 찾아보니 두 가지 방법으로 해결 가능했다. 1번. 아주 심플한데 좀 찜찜한 방법 (미봉책) 말 그대로 간단하다. VSCode에서 setting 으로 들어간다. 검색창에서 css.lint.unknownAtRules 을 검색 값을 ignore로 변경한다. 이렇게 처리하면 된다. 근데 미봉책이자 찜찜한 방법이다. 2번. 정석으로…

VSCode에서 Import에서 모듈이… 다른 블로그나 유튜브 영상에서 보면 VSCode에서 Import 한 모듈이나 라이브러리의 설명이 잘 나오는데 나는 안나왔다. 그래서 소스코드를 보니 아래 사진처럼 떴다. 내가 WebSocket 의 라이브러리인 ws를 추가했더니 저렇게 떴다. ws 앞에 보면 … 이 보인다. 맨트는.. 모듈 wd에 대한 선언 파일을 찾을 수 없습니다 암시적으로 any 형식이 포함됩니다. 그리고 ws 위에 마우스를 올리면.. 이렇게 any 가 뜬다. 처음엔 이걸 어떻게 찾아야 하나… 구글링 엄청 했다. 그리고 답을 찾았다. 해결법 너무 간단했다. 저기 나온 설명대로 하면 되는 거였다 -_-;;; 난 yarn을 쓰는데 아래의 명령어를 수행한다. yarn add —dev @types/ws npm도 앞에 구문만 바꾸면 된다. 개발용 의존성에 @types/[lib name] 을 설치해주면 끝… 여기서 @types는 타입 선언만 포함하는 모듈이다. 이걸 설치함으로써 …

VSCode에서 Emmet 이 동작하지 않는다. VSCode를 잘 쓰다가 어디서 에밋? (발음이 Emmet 맞나 모르겠다) 이거를 알게 되서 해보려 했는데 안되었다 =.= 이상하게 뭔가 항상 인터넷에서 도는건 내 개발환경에서 안된다. 개발을 하지 말라는 게시인가… 무튼 나와 비슷한 상황의 사람들을 위해 남겨본다. VSCode에서 설정을 연다. (Mac 기준 Cmd + ,) 거기서 왼쪽 메뉴에서 확장(Extensions) 안에서 HTML을 선택하여 HTML › Format: Unformatted 항목의 settings.json에서 편집 항목을 선택한다. 설정 항목이 열리는데 맨 마지막 쯔음 아래 항목을 추가해준다. 다 되면 테스트 해본다. 위 사진처럼 html 파일 하나 만들고 ! 입력 후 tab해보면 위와 같이 뜨면 제대로 동작하는 것이다. 참고 참고 사이트 참고

VSCode에서 한글이 깨질 때… 이번 M1 맥북을 사용하면서 기존에 Jetbrain 제품군을 사용하다가 Node.js 개발에 VSCode를 많이 사용한다 하여 이번에 써보기로 했다. 그런데 한글이 자꾸 한글자 한글자 씩 씹히는 현상이 발생했다. 아마 검색하다 들어온 사람은 무슨 말인지 이해할 듯.. 이걸 해결하는 법은 몇 가지 있는데 내가 적용된 방법을 공유해본다. 1. VSCode에서 모든 명령 표시 창 열기 모든 명령 표시 창을 연다. 단축키는.. CMD+Shift+P 2. 검색 창에 표시 언어 구성을 선택한다. 표시 언어 구성을 입력하면 en만 있을텐데 ko를 선택하고 VSCode를 재시작 해준다. 만약 없다면 설치해주고 재시작 해주면 된다. 나같은 경우 이 방법으로 해결했다. 1. VSCode에서 모든 명령 표시 창 열기 2. 검색 창에 표시 언어 구성을 선택한다.

Hexo 설치 글을 보면… 이게 뭐 도움이 될지 모르겠지만… 나는 hexo 설치할 때 npm 이라는거 대충 알았지 자세히는 몰랐다. 그래서 거기 가이드에서 설치할 때 보면 npm install hexo -g 이렇게 글로벌로 설치하게 하는데 이건 내 생각에 좋은 방법은 아닌 것 같다. (나한테는?) 난 보통 어떤 프로젝트나 모듈이 프로젝트 내에서만 영향을 줘야지 공통으로 사용하는 곳까지 설치되어 거기서 끌어다 쓰는 형식을 안 좋아한다. (정말 싫어한다 -_-;;) 그래서 이번에 노드를 학습하면서 이렇게도 관리할 수 있겠구나 싶어서 공유한다. 뭐 다 아는 사실이겠지만… hexo 사용할 디렉토리에서 아래의 명령어 대로 설치한다 npm install hexo 이렇게 -g 옵션만 빼면 로컬에서 사용할 수 있는데 여기서 한가지 더.. path를 등록해줘야 한다. 난 mac 에서 zsh를 사용하기에.. 자신의 홈 디렉토리에 .zprofile 하나 만들어준다. (만약 있으면 맨 밑에 추가한다) …

주의 이 문건은 과거 Hexo 블로그 (2021-10-04) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. iTerm2 에서 경로가 깨저서 나오는 경우 위와 같이 깨질 경우 설정에서 폰트를 바꿔주면 된다. Preferences(command + ,) -> Profiles 탭 -> Text 항목 -> Font를 변경 위와 같이 변경한 경우 깨지는것은 사라진다.

주의 이 문건은 과거 Hexo 블로그 (2019-01-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Postman을 사용하다가… 최근 개발을 하면서 Rest api를 개발하다 보니 개발된 api를 테스트하기 위해 Postman을 사용한다. 그런데 기능을 개발하던 중 첨부파일 기능을 개발하게 되었는데 첨부를 어떻게 해야 하는지 몰라서 찾아보았다. (매번 파라메터만 주는 것만 하다보니…) 파일 첨부 먼저 url과 http protocal을 적당하게 작성 후 하단의 Body 항목을 클릭하면 몇 가지 옵션이 나온다. 여기서 form-data 항목을 선택하면 key 부분에 항목을 file로 변경하고, 파라메버 이름을 적어준다. 그리고 Value에서 원하는 파일을 첨부하면 된다. 자세한 것은 아래 사진을 참고하자. 이 문건은 과거 Hexo 블로그 (2019-01-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니…

주의 이 문건은 과거 Hexo 블로그 (2019-01-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 만약 1부를 안 보신 분이 있다면 이곳 1부 포스팅을 참고하자. 실제 구현 전 설치하거나 구성해야 할 것들이 있는데 이는 1부 포스팅의 참고 링크를 확인하자. 1부에 이어서.. 이번엔 바로 적용한 코드를 확인해보자. 1. Hwp to XHtml 아래의 메서드로 구현을 하였다. 위의 메서드는 hwp를 xhtml로 변환 후 변환된 경로를 반환하는 메서드이다. 자세한 것은 코드를 참고하자. 2. Xhtml to Pdf 이것도 아래의 메서드를 참고하면… 이 메서드도 변환 후 경로를 반환하는 메서드이다. 여기서 사용된 Pdf의 경우 WKHtmlToPdf 설치하기 포스팅의 번외 1편을 참고하자. 3. Pdf to Image 바로 코드를 보자면… 이곳에서는 PDF를 이미지로 변환하기 위해 PDFbox 를 사용하였다. 이것과 관련해서는 Java에서…

주의 이 문건은 과거 Hexo 블로그 (2019-01-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. WKhtmlToPdf? 회사에서 진행하는 프로젝트에서 Hwp -> Image를 만드는 과정을 진행하며 찾게된 툴이다. WKHtmlToPdf는 Html을 Pdf로 변환해주는 툴이다. 이번 포스팅에서는 이것을 AMI에 설치하고, 사용하는 방법을 소개한다. 설치하기 전… 일단 진행하는 환경은 Amazon의 AMI에서 진행하였다. (CentOS-6 64bit) 다른 OS환경은 공식 홈페이지를 참고하도록 하자. 1. 의존성 설치 및 Wget 가져오기 설치 전 필요한 의존성을 설치해준다. (명령어는 가급적 Control C + Control V 조합으로..) 그리고 wget으로 다운을 받는다. bin으로 이동 처리를 해준다. 2. 실행 특별히 환경변수를 안잡아도 터미널에서 아래와 같이 명령어를 수행하면 실행이 될 것이다. 이를 통해서 아래와 같…

주의 이 문건은 과거 Hexo 블로그 (2019-01-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 추가 내용 by 19.07.29 포스팅 하단에 pyhwp의 버전 추가 관련 내용을 추가하였습니다. Install Pyhwp! Pyhwp를 찾게 된 것은 이곳 포스팅과 연결된다. Java에서 hwp를 이미지로 변환하다 보니 이것 저것 찾게 되었고, 결국 종착지는 Pyhwp였다. 일단 Pyhwp에 대해 자세한 것은 공식문서를 참고하고… 이번 포스팅에서는 설치하는 과정에 대해 다루려 한다. (중요) Pyhwp는 Python 2.7에서 동작한다! => 최신버전에서는 Python 3.x를 지원하게 되었다. 그래서 먼저 별도로 실행할 환경은 Python 2.7을 구축해두고 진행하자. 최신 버전인 0.1b12 를 사용할 경우 가상환경에서 python3.x 버전을 구축해두고 진행하자. 아래는 설치 진행 과정이다. 1. lxml 설치 pyhwp는 공…

주의 이 문건은 과거 Hexo 블로그 (2019-01-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Hwp 파일을 이미지로 변환? 회사를 이직한 뒤에 언어가 Python-Django에서 다시 Java-Spring으로 변하였다. 사실 다시 Java측으로 와도 가끔 집에서 토이 프로젝트나 그런 것을 할 때 Python을 애용한다. 무튼 이번 회사에서는 기존의 레거시 프로젝트의 기능 중 일부를 신규 서버에서 구현하기로 하고, 신규 서버를 개발하게 되었다. 그 레거시의 기능 중 일부를 구현하게 되었는데, 제목에도 나와있는 것처럼 **hwp(한글)**을 이미지로 변환하는 기능이 있었다. 기존에는 윈도우 프로그램에서 변환 처리를 진행하였는데 이제 이 기능을 서버단에서 처리하게 되었다. 혹시 결론을 좀 급하게 원하는 분들도 있을 거 같아서 미리 요약을 드리자면.. Java에서 바로 Hwp to Image를 처리하는 것은 불가능 하지만 몇 가지 …