너와 나의 프로그래밍

Next.js를 공부하면서 Styled Component의 대해서 알게 되었다. Styled Component는 React.js의 컴포넌트의 CSS 적용에 굉장히 많은 도움이 되는 CSS-in-JS의 대표적인 라이브러리다. 기본적으로 Next.js에서 제공하는 Styled-jsx도 그렇지만 Styled Component도 컴포넌트별로 scope를 주면서 독립적으로 css를 관리하는 방식인 것 같다. Vue.js를 해본 사람들이라면 .vue 파일에 style을 scope 속성을 주면서 css를 적용했던 방식과 너무 비슷하다. 먼저 Styled Component를 설치하기 위해서는 node가 기본적으로 설치가 되어있어야하고 npm 명령어로 모듈을 받을 수 있다. # npm npm install --save ..

[Development Etc.] RunKit + NPM...? 필요한 서드파티 라이브러리가 있어 조사하던 중 잘 모르고 있었던 NPM + RunKit의 대해 알게 되었다. 항상 npm 모듈을 사용함에 있어 설치 후 마음에 안들면 다시 모듈을 지우고 package.json에서 삭제하고 번거롭게 작업을 했던 안타까운 기억이 있었는데, 이제는 RunKit 하나로 상당한 작업 시간을 단축시키고 업무의 효율을 낼 수 있다는 생각에 글을 쓰게 되었다. What is RunKit?🤔 RunKit은 설치할 필요 없이 npm 포듈을 사용하고 결과를 시각화 할 수 있는 Javascript 환경을 갖게 된다. 즉, 내가 필요한 npm 모듈을 이제는 굳이 여러번 설치할 필요 없이 RunKit 하나로 npm 모듈을 사용할 수..

[Git] 자주 사용하는 Git 명령어 모음 # git 최신 소스 업데이트 1. git stash (현재 로컬의 변경 된 소스가 있으면 pull 되지 않으므로 임시 저장) 2. git checkout master (master branch 이동) 3. git pull (소스 내려받기) 4. git checkout [localbranch] (자신의 branch 이동) 5. git rebase master (master 소스를 자신의 branch와 병합) 6. git stash list (임시 저장소 목록) 7. git stash apply (임시 저장소에 있는 소스 현재 브랜치에 적용) 8. git branch -v (branch 버전 보기, 이때 마스터의 브랜치 버전과 내 브런치 버전이 동일 해야함) #..

[Java Etc.] .jar 파일을 이용한 Electron Build Electron을 사용하면서 Server와 Client를 함께 사용할 수 있는 방법이 없을지 고민을 많이 했다. Cloud Server를 사용하면 가장 쉽지만 그러한 환경이 되지 않는다면 로컬에서 사용할 서버를 생각해야 했다. 서버를 따로 띄우고 클라이언트 환경만 Electron 빌드를 하여 사용할 수 있어도 그 마저 불편함을 느껴 Server + Client를 묶은 jar나 war 파일 하나로 Electron 빌드를 하여 실행파일을 실행해서 바로 Server가 실행되고 그 후 Client 화면이 나오도록 구현하였다. Electron의 가장 큰 장점인 Backend를 Node.js 기반이라는 점에서 운영체제와의 상호간의 소통이 자유롭..

[JavaScript] Electron의 관하여 What is Electron? 웹사이트를 만드실 수 있다면 데스크톱 앱도 만드실 수 있습니다. Electron은 JavaScript, HTML, CSS 같은 웹 기술로 네이티브 애플리케이션을 만들 수 있는 프레임워크입니다. 간단히 말하면, ‘웹 애플리케이션을 .exe 파일로 사용할 수 있다.' 입니다. 지금은 Github에서 개발을 하고 있으며 GUI(그래픽 인터페이스 애플리케이션) 기반 개발을 할 수 있습니다. 동작에 있어 Backend는 Node.js Runtime을 사용하여 운영체제와의 상호작용을 하는것이 간편하며, Frontend는 구글 Chromium 기술을 사용해 Chrome의 멀티 프로세스 아키텍쳐가 사용 가능합니다. 이미 세계적인 몇몇 기업..

1. 포커스 F2 다음 오류, 경고, 제안으로 점프함 Alt + 1 프로젝트 창이 열리고 포커스가 위치함 트리 탐색 및 검색에 유용 Esc를 누르면 포커스가 다시 에디터로 복귀됨 Ctrl + W / Ctrl + Shift + W 선택 영역 확장 / 축소 Ctrl + Shift + ←→ 영역 선택(단어 단위) 2. 검색 Ctrl + E 최근 실행했던 파일 목록을 보여준다. Ctrl + B 코드 안에서 다른 코드로 이동 Ctrl + left Click 과 같은 기능 Shift + Shift 프로젝트내 모든 내용 검색 3. 라인 수정 Alt + Shift + ↑↓ 라인 단위로 옮기기 Ctrl + D 라인 복제 Shift + Ctrl + Enter 구문 자동 완성 Ctrl + Delete 단어 삭제 (커서 시작..