2024년 10월 08일
vscode에서 검색 후 방향키를 누르면 검색어에 대한 일괄 변경 기능이 지원된다. 작업 중 .hideOverlay 함수에 대한 일괄 변경을 처리하려는데, a.hideOverlay, b.hideOverlay… 와 같이 앞에 붙어있는 문자가 모두 다른 상황에서는 단순 검색으로는 변경이 불가능하여 정규식 검색 후 그룹화하여 일괄 변경 처리를 진행했다. 우측위에 .* 아이콘을 클릭하여 정규식 검색을 활성화 후 검색어 및 수정단어에 정규식 처리하여 완료 // 검색어 : (this\.[a-zA-Z]*)\.hideOverlay\(\); // this부터 hideOverlay 앞의 값까지 모두 그룹화 지정 this.aaa.hideOverlay(); this.bbb.hideOverlay(); // 수정단어 : if($1) { $1.hideOverlay(); } // 일괄 변경된 결과 if(this.aaa) { this.aaa.hideOverlay(); }; if(this.bbb) { this.bbb.hideOverlay(); };
2024년 03월 09일
lerna를 사용한 간단한 모노레포 설정 1. lerna 환경 구성 npx lerna init 2. lerna.json 수정 yarn workspace 기반으로 작업하기 위해 useWorkspaces 사용 { "version": "independent", "npmClient": "yarn", "useWorkspaces": true, "packages": [ "packages/*" ] } 3. package.json에 workspaces 추가 "workspaces": [ "packages/*" ] 4. 각 패키지 생성 lerna create [PACKAGE_NAME] 5. 공통 패키지 설치 yarn add eslint prettier typescript --dev --ignore-workspace-root-check yarn add dayjs --ignore-workspace-root-check 개별 패키지에 설치방식 yarn workspace frontend add dayjs 6. 각 workspace에 패키지 설치 npx lerna bootstrap 7. workspace 명령어 실행 lerna run dev
2022년 10월 02일
검색에서 사용하기 위한 sitemap을 등록할 때 jekyll-sitemap 플러그인을 사용하여 생성된 xml파일을 연결했었다. ( Jekyll Google Search Console 연동하기 ) 최근 블로그를 다시 정리하면서 Analytics를 보고있는데, 유효하지 않은 페이지들이 잡혀서 sitemap.xml 파일을 확인해보았고 jekyll-sitemap에서 post 뿐만 아닌 layout과 같은 불필요한 디렉토리도 사이트맵에 추가되고 있었다. Sitemap 파일 jekyll-sitemap Path 제외 jekyll-sitemap 문서에서는 특정 path를 제외하고 싶다면 아래와 같이 config의 defaults에 sitemap: false를 추가하라고 안내하고 있다. defaults: - scope: path: "author" values: sitemap: false 다만 내 블로그에서는 글을 분리하기 위해 tag, category와 같은 collections을 추가한게 문제인지 category를 셋팅하면 _categories + category path가 둘다 사라지고 pagination number가 path에 추가되는 등 제대로 동작하지 않아서 직접 제작하기로 했따. Sitemap 파일 만들기 Sitemap을 직접 생성하는건 생각보다 어렵지 않았다. 리스트를 그저 sitemap 형식에 맞게 출력해주면 될 뿐이다. 초기 셋팅 !!모든 코드 설명에서 \는 지워주세요. md 파일에서도 렌더링돼서 어쩔 수 없네요. root에 sitemap 파일, posts를 형식에 맞게 출력할 레이아웃 파일을 만들었다. /sitemap.xml /_includes /sitemap_item.xml sitemap.xml은 아래와 같이 기본 틀을...
2022년 05월 08일
Puppeteer를 사용하는 nodejs를 linux 서버에 띄었는데 작업하니 다음과 같은 오류가 났다. Error: Failed to launch the browser process! /home/ubuntu/slack-bot-groupware/node_modules/puppeteer/.local-chromium/linux-938248/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory 해결방법 아래 명령어를 실행하여 추가 패키지를 설치한다. sudo apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev sudo apt-get install libgconf-2-4 libnss3 libxss1
2022년 05월 07일
REMOTE HOST IDENTIFICATION HAS CHANGED! 인스턴스 사양을 늘리기 위해 스냅샷으로 새로운 서버를 생성, 다시 접근하는데 다음과 같은 오류가 났다. 현재 PC에서 SSH로 접근하는 서버의 인증 정보를 가지고 있는데, 동일한 IP 서버 인증키가 달라졌기 때문에 경고를 주는 것. 해결방법 해당 서버의 키만 제거하려다가 그냥.. 다 지워버렸다. rm -r /var/root/.ssh/known_hos
2022년 05월 07일
출퇴근 페이지를 개선하면서 도메인을 변경했고, 서버를 이전하기로 했다. 프로젝트 사이즈, 서버 비용을 감안하여 EC2보다는 Lightsail으로 작업을 진행했다. Lightsail 설정 Instance 생성 인스턴스 이미지는 OS만 설치하도록 설정했다. ( Ubuntu 20.04 LTS ) nginx가 설치된 형태도 진행해봤는데, 다른 패키지 설치 과정에서 충돌나거나 nginx.conf 파일에서 추가적인 작업을 하는 등의 이슈로 그냥 OS만 설치하는게 마음이 편했다. Static IP / DNS 생성 도메인을 가비아에서 구매했고, Lightsail 서버에 연동이 필요했다. Network 탭에서 Static IP, DNS zone을 클릭하여 IP, DNS를 발급받았다. 발급받은 후 모습이며, Static IP는 생성한 인스턴스에 연결해야하고 DNS에서는 records를 생성하여 도메인을 추가해야한다. 가비아에서 도메인 설정 방법 도메인 정보 변경 -> 네임서버 설정 DNS 정보 -> DNS 관리 -> A 레코드, IP 입력 서버 설정 서버 접근 Lightsail에서 Connect하면 브라우저 콘솔로 서버에 접근할 수 있지만, iterm이 편하다 보니 ssh key 파일을 다운받아 진행했다. ( pem 파일은 계정 Account 또는 인스턴스 Connect 탭에서 설치 가능하다.) sudo ssh -i "key.pem" [StaticIP] -l ubuntu # Warning이 뜨는 경우, 권한...
2021년 03월 10일
작업을 스테이지에 올렸다가 릴리즈 날짜에 배포가 불가능하면 해당 기능을 잠시 스테이지에서 빼둬야한다. 이때 develop 브랜치에서 Revert를 생성하여 Merge 하는 작업을 진행한다. 여기까지는 괜찮았으나 작업중인 브랜치에서 devleop을 Pull 받으니 문제가 나타났다. develop에서는 Merge를 통하여 해당 내용들을 전부 삭제했으니 작업중인 브랜치에 있는 내용들도 전부 삭제 시켜버린다. 동일 파일을 작업하던 부분들까지 날려버리니 멘붕이 나버렸다. 여러번의 검색 끝에 간단한 해결방법을 찾았는데 결국 Revert를 Revert하자! 라는게 편한 방법이다. 해결방법 Merge, Revert한 브랜치명을 develop으로 명칭하고 진행한다. Revert Commit SHA Key를 가져오자. develop에서 git log를 확인하여 revert한 커밋 키 값을 가져온다. git checkout develop git log commit [REVERT_COMMIT_SHA_KEY] (tag: ...) Author: Doriri <public.doriri@gmail.com> Date: ... Revert "커밋 메시지" 여기서 REVERT_COMMIT_SHA_KEY 해당 부분을 복사해준다. New Branch & Revert를 Revert 하자. 새로운 브랜치를 생성하고, Revert 커밋을 Revert 해보자. git checkout -b [new_branch] git revert [REVERT_COMMIT_SHA_KEY] 그리고 마무리로 기존 브랜치를 pull 받으면 끝이다. git pull origin [origin_branch] 커맨드 요약 git checkout develop git checkout -b feature/new-branch git revert [SHA_REVERT_COMMIT] git...
2021년 03월 10일
Disqus 계정에서 이메일을 변경하면서 인증하라는 메시지가 나왔다. 인증받기를 눌러도 메일은 한참 지나서오고 들어가보니 연결을 거부당했다. 사이트에 연결할 수 없음 disq.us에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED 도메인이 disq.us인게 url shoutcut으로 사용한 것 같은데, 내 네트워크 문제인지 쟤네 문제인지.. 아무튼 거부당했다. 혹시나 해서 disq.us 부분만 disqus.com으로 바꿨더니 url이라는 사용자의 프로필로 이동했다. URL을 다시 확인해보니 결국은 disq.us에서 url을 파라미터로 받아서 리다이렉트를 하는 방식이다. 해결방법 disq.us/url?url= 여기서 부터 뒷부분을 전부 복사한다. url을 decode 해주자. urlDecoder에서 붙여넣기 후 decode decode 된 url 경로로 이동하자. Your email has been verified successfully!
2021년 03월 08일
ERROR: Error installing jekyll-sitemap: ERROR: Failed to build gem native extension. gem으로 jekyll 모듈을 설치하는 과정에서 다음과 같은 오류가 나타났다. 검색해보니 xcode 관련 자료만 나오다가 해당 모듈이 사용 중인 jekyll 버전을 미지원하는 내용이 나왔다. 해당 모듈의 버전 리스트를 검색한다. gem list --remote --all jekyll-sitemap *** REMOTE GEMS *** jekyll-sitemap ( [versions] ) 지원하는 버전을 설치해보자. sudo gem install jekyll-sitemap -v [version] Successfully installed jekyll-sitemap-[version] 사용하려는 jekyll-sitemap은 현재 jekyll 버전에서 v1.2.0까지만 지원한다고 한다. 지원 여부를 깃헙에서 확인해 봤으면 됐을 텐데, 오류만 검색하다가 시간을 많이 소모했다. 이렇게 모듈을 설치하고 빌드하니 gem install을 실행하라고 한다. Gemfile.lock 파일을 삭제하지 않아 의존성 체크가 되었는데, 신기하게 gem install 하니 직접 설치할 때 오류 나던 jekyll-sitemap 1.4.0이 설치되었다. lock 파일의 의존성은 알겠으나 yarn.lock 하고 좀 다르게 동작하는 느낌이다. 아직 gem에 대한 이해가 부족해서 나온 이슈인데, 공부가 필요할 듯하다. 참고 자료 understanding-the-gemfile-lock-file https://stackoverflow.com/questions/4907668/removing-all-installed-gems-and-starting-over/49960935
2020년 01월 08일
HTML Event 키보드 관련 이벤트 ( keyup ) document.addEventListener("keyup", (event: KeyboardEvent) => { console.log(event.keyCode); }); React React.cloneElement type ReactText = string | number; type ReactChild = ReactElement<any> | ReactText; return React.cloneElement(child as React.ReactElement<any>, { width: this.props.width, height: this.props.height, }); react-router-dom history import { RouteComponentProps } from 'react-router-dom'; interface Props extends RouteComponentProps<any> {} const Component : React.FC<Props> = ({ history }) => ();
2019년 12월 19일
Google Search Console에서는 Google 검색에 콘텐츠를 표시하기 위한 실행 가능 보고서, 도구, 학습 리소스를 제공합니다. Link Google Search Console에서 봇이 데이터를 가져가기 위해 sitemap과 robots의 설정이 필요하며, 먼저 설명드리겠습니다. 작성 당시 jekyll 버전은 3.8.6 입니다. Jekyll Sitemap 설치 gem jekyll-sitemap 설치 gem install jekyll-sitemap Gemfile 설정 # GemFile group :jekyll_plugins do gem "jekyll-sitemap" _config.yml 수정 # _config.yml plugins: - jekyll-sitemap 이제 도메인 뒤에 /sitemap.xml를 붙여 설정된 것을 확인합니다. ex) https://minhyeong-jang.github.io/sitemap.xml robots.txt 설정 Bot에게 현재 사이트의 sitemap과 권한 설정 등을 제공합니다. User-agent: * Allow: / Sitemap: https://minhyeong-jang.github.io/sitemap.xml Google Search Console 생성 이제 마지막으로 Google Search Console 홈페이지에서 속성을 생성합니다. 도메인 / URL 접두어로 나눠져있는데, 따로 Github Pages에 도메인을 설정하지 않은 경우 URL 접두어를 선택합니다. 선택 후에는 설명에 따라 인증을 진행합니다. ( 이전에 작성한 anlytics를 진행하신 분은 바로 인증이 가능합니다. ) Sitemaps 탭으로 이동하여 새 사이트맵에 생성한 sitemap.xml URL을 입력하여 제출합니다. 제출에 성공한 경우 정상적으로 완료된 것 입니다.
2019년 12월 19일
Google에서 제공하는 Google Analytics라는 툴을 사용하여 웹 로그를 분석할 수 있습니다. Google Analytics는 앱 또는 웹의 이용자를 분석하여 통계로 제공해주고 있으며, 예로들어 방문 페이지, 이탈률, 세션 시간 등이 있습니다. 또한 Google Ads, Google Search Console 등 관련 서비스와 통합하여 확인할 수 있습니다. Google Analytics 설정 우선 Google Analytics에 접속하여서 계정을 생성합니다. 계정은 여러개 생성이 가능하며, ‘속성 및 앱’에 페이지 별로 생성이 가능합니다. 저는 Blog라는 계정 하위에 Tistory, Github Page의 링크를 별도로 등록했습니다. 등록이 완료되면 추적 코드가 나타나게 되며, 해당 페이지에서 추적 ID, 태그(js)를 제공하고 있습니다. 추적 코드 탭이 나타나지 않는다면, 좌측 하단 관리 -> 속성 -> 추적정보 -> 추적코드로 이동합니다. Jekyll 설정 위에서 나온 js를 복붙하셔도 상관 없지만, 저같은 경우에 _config.yml에 추적 ID 값을 넣었습니다. google_analytics_id: 추적 ID 그리고 analytics 파일을 생성하여 Google Analytics에서 제공하는 js를 삽입하고 추적 ID 값을 불러옵니다. 아래 코드는 추적 ID 값을 _config에서 가져오도록 수정한 코드입니다. <!-- analytics.html --> {% if site.google_analytics_id %} <script async src="https://www.googletagmanager.com/gtag/js?id={{...
2019년 12월 12일
Jekyll에서 Disqus를 연동하는 방법을 살펴보도록 하겠습니다. Disqus 설정 Disqus 홈페이지에 접속해서 회원가입을 진행합니다. 로그인 후 상단에 Get Start -> I want to install Disqus on my site를 선택합니다. 정보를 입력 후 확인을 누른 후 플랫폼 선택에서 jekyll를 선택합니다. ( 만약 화면이 나타나지 않는 경우, admin -> Settings -> Installation ) 설명 2번에 있는 Universal Embed Code 링크 클릭 홈페이지 첫 동영상 밑에 있는 1번의 Disqus to load 코드를 post Layout에 추가합니다. 중간 주석 부분에는 Disqus thread가 중복되어 생성되는 것을 방지하기 위해 page_url, identifier를 추가하라고 적혀있습니다. 해당 부분은 아래와 같이 site 정보를 설정해주시면 됩니다. this.page.url = "https://minhyeong-jang.github.io/2019/12/12/jekyll-disqus"; // minhyeong-jang.github.com/2019/12/... this.page.identifier = "/2019/12/12/jekyll-disqus"; // /2019/12/... 홈페이지에서 두번째 동영상 밑에 있는 count.js 스크립트를 body 맨 아래 선언하면 댓글 수가 체크됩니다. 적용 후 새로고침 하시면 로컬에서도 정상적으로 Disqus가 보이게 됩니다.
2019년 12월 11일
typescript 환경에서 console.log를 입력하면 상단에 import console = require('console');가 자동으로 import 생성된다. 해당 문제가 VSCode, Typescript 중 어디서 생성되는지 모르지만 해결방법은 있습니다. 해결방안 구글에서 해결방안 중 node_modules 내 파일을 수정하는 방안도 있었지만, 팀원들도 동일한 증상을 겪을 것 같아 declare 방법으로 진행하였습니다. 프로젝트 root 디렉토리에 console.d.ts를 생성 후 아래 코드를 추가합니다. ( 기존에 사용중이신 d.ts가 있으시다면 그걸 사용하셔도 됩니다. ) declare module 'console' { export = typeof import("console"); } 문제가 해결되지 않으면 command + shift + p 후 TypeScript: Restart to Server를 실행해주세요. tsconfig에서 baseUrl을 추가하신 경우, baseUrl의 경로가 root가 됩니다.
2019년 12월 09일
Jekyll을 사용하며 나타난 오류를 정리합니다. Scss Import Error + Tip Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss': File to import not found or unreadable: filename. on line 1 Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss': Invalid CSS after "": expected selector, was "---" on line 1 Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss': Invalid CSS after "@import "theme"": expected "{", was ";" on line 3 scss 파일은 빌드 후 css + minify 형태로 제공해주기 때문에 head에서는 src=”index.css” 형태로 작성하게 됩니다. 파일 수 만큼 css를 import하면 속도가 느려 index.scss 파일 하나에서 모든 scss 파일을 import 하는 방법으로 bundle 작업을 진행하는게 좋습니다. jekyll은 scss에서 상단에 아래 문구가 적혀있으면 css로 빌드 작업을 진행합니다. --- --- index.scss 파일에서만 위에 문구를 추가한 후 나머지 파일을 import 해줍니다. 만일 index.scss에서 호출하는 scss 파일들은 상단에 --- 문구가 존재하면 에러가 나타납니다. 호출하기 위한 파일을 구분하기 위해 _theme.scss 처럼 파일명 앞에 _를 붙여줍니다....
2019년 05월 27일
fatal: refusing to merge unrelated histories 로컬 저장소에서 Git Repo 생성 후 push 하는 경우, 프로젝트 충돌로 나타나는 오류이다. git pull origin main --allow-unrelated-histories
2019년 05월 24일
1. Sourcemap 이란? 많은 개발 환경은 Webpack 등으로 빌드 과정을 거치고있다. 만일 빌드 후 취합되거나 변환 된 CSS, JavaScript 파일들이 오류가 발생한다면, 개발자 도구에서는 빌드 된 파일에서 오류를 출력하고 있을 것이다. 하지만 우리가 원하는 것은 빌드 전 오류난 파일 및 라인을 알고싶은 것이다. 예를 들면, SCSS에 오류가 있고 Webpack으로 빌드를 진행하면 웹페이지에서 오류를 알려주는 부분은 빌드가 완료된 CSS를 출력한다. JavaScript도 마찬가지로 오류가 나면 취합하고 minify된 JS를 출력하고있다. 이럴때 Soucemap을 설정하면, 코드상의 위치를 기억하고 알려주기 때문에 빌드 전 어떤 파일, 라인에서 오류가 났는지 확인할 수 있다. 2. 설정 2.1 Webpack Dev 환경에서만 작동하도록 설정하였다. { "devtool": env.mode === "development" ? "source-map" : "" } 2.2 Typescript { "compilerOptions": { "sourceMap": true } }
2018년 06월 20일
들어가며 WordPress 란 일반 사용자들도 웹사이트를 구축하고 관리할 수 있도록 도와주는 도구입니다. 워드프레스를 사용하는 경우 두가지로 구분됩니다. 가입형 ( wordpress.com ) 설치형 ( wordpress.org ) 가입형 ( wordpress.com ) 워드프레스가 제공하는 서버 및 DB를 사용하여 웹사이트를 구축합니다. 무료를 포함하여 요금제에 따라 성능이 달라집니다. wordpress 가입형 페이지 - 장점 서버 및 DB 환경이 기본적으로 제공되어 간편하게 사용이 가능합니다. 무료 사용이 가능합니다. 속도가 빠릅니다. 서버관리 및 보안에 신경쓰지 않아도 됩니다. - 단점 워드프레스 규정을 따라야합니다. 플러그인 및 테마에 제약이 있습니다. CSS 수정에 제약이 있습니다. 위 기능을 사용하기위해 요금제를 높이는 경우 많은 요금을 부과해야합니다. wordpress 가입형 요금 설치형 ( wordpress.org ) 사용자가 서버에 직접 워드프레스를 설치하여 웹사이트를 구축합니다. 웹사이트 소유자이기 때문에 제약이 없습니다. wordpress 설치형 페이지 - 장점 테마 및 플러그인을 설치하여 적용이 가능합니다. 모든 기능을 무료로 사용합니다. - 단점 서버 호스팅 및 설치해야하는 불편함이 있습니다. 서버비용이 지출됩니다. 주관적 생각 번거롭더라도 설치형으로 진행하시는 것을 추천합니다. 워드프레스로 블로그 또는 포트폴리오를 제작하는데 있어서, ‘플러그인 및...
2017년 09월 11일
Python 2.x, 3.x # string to int s = "123" n = int(s) # string to float s = "123.456" n = float(s) # string to long s = "1234567890123" n = long(s) 참고사항 위 게시물은 기존에 운영한 Tistory에서 가져온 자료입니다. 시간이 흐름에 따라 오류가 발생하거나 참고사항으로 첨부한 자료가 없을 수 있습니다.
2016년 04월 11일
Python에서 진수 변환을 어떻게 작업하는지를 설명합니다. 10진수 -> 2, 8, 16 진수 변환 2진수 bin( 정수 ) 8진수 oct( 정수 ) 16진수 hex( 정수 ) ex) bin(12345) x진수 -> 10진수 변환 int( 정수, 진수 ) ex) int( 12345, 7 ) -> 7진수 12345를 10진수로 변환 소스코드 if __name__ == "__main__" : num = 12345 print bin(num) # 10진수 -> 2진수 변환 : 0b11000000111001 print oct(num) # 10진수 -> 8진수 변환 : 030071 print hex(num) # 10진수 -> 16진수 변환 : 0x3039 print int(bin(num),2) # 2진수 -> 10진수 변환 : 12345 print int(hex(num),16) # 16진수 -> 10진수 변환 : 12345 참고사항 위 게시물은 기존에 운영한 Tistory에서 가져온 자료입니다. 시간이 흐름에 따라 오류가 발생하거나 참고사항으로 첨부한 자료가 없을 수 있습니다.
2016년 02월 01일
기상청 API를 사용하려면 일반적인 위도, 경도가 아닌 행정구역을 나누는 X, Y (GRID) 좌표를 사용하고 있습니다. 따라서 위도, 경도를 변환해야하는데 기상청에서 제공하는 Open API를 활용하여 변환 작업을 진행합니다. Open API http://www.kma.go.kr/weather/forecast/digital_forecast.jsp ex) http://www.kma.go.kr/weather/forecast/digital_forecast.jsp?x=60&y=127 소스코드 import math def grid(v1, v2) : RE = 6371.00877 # 지구 반경(km) GRID = 5.0 # 격자 간격(km) SLAT1 = 30.0 # 투영 위도1(degree) SLAT2 = 60.0 # 투영 위도2(degree) OLON = 126.0 # 기준점 경도(degree) OLAT = 38.0 # 기준점 위도(degree) XO = 43 # 기준점 X좌표(GRID) YO = 136 # 기1준점 Y좌표(GRID) DEGRAD = math.pi / 180.0 RADDEG = 180.0 / math.pi re = RE / GRID; slat1 = SLAT1 * DEGRAD slat2 = SLAT2 * DEGRAD olon = OLON * DEGRAD olat = OLAT * DEGRAD sn = math.tan(math.pi * 0.25 + slat2 * 0.5) / math.tan(math.pi * 0.25 + slat1 * 0.5) sn = math.log(math.cos(slat1) / math.cos(slat2)) / math.log(sn) sf = math.tan(math.pi *...