글

Welcome to StackEdit

-
이미지
이 문서는 온라인 스택에디트 사이트에 접속하면 나오는 웰컴 문서이자 간단한 스택에디트 활용 방법을 설명한 것 입니다. 저는 영어를 잘 못하기 때문에 좋은 사이트를 활용하기 위해 이 문서를 문명의 도움을 받아 번역하였습니다. StackEdit 바로가기 Welcome to StackEdit! Hi! I’m your first Markdown file in StackEdit . If you want to learn about StackEdit, you can read me. If you want to play with Markdown, you can edit me. Once you have finished with me, you can create new files by opening the file explorer on the left corner of the navigation bar. 안녕하세요! 저는 StackEdit 의 첫 번째 마크다운 파일입니다. StackEdit에 대해 알고 싶으시면 읽어보세요. 마크다운으로 놀려면 저를 편집하세요. 작업을 마치면 탐색 모음의 왼쪽 모서리에 있는 파일 탐색기 를 열어서 새 파일을 만들 수 있습니다. Files StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline! StackEdit은 브라우저에 파일을 저장하므로 모든 파일이 자동으로 로컬로 저장되고 오프라인에 액세스할 수 있습니다! Create files and folders The file explorer is accessible using the button in left corner of the navigation bar. You can create a new file by clicking the New file button in the file explore...
댓글 쓰기
자세한 내용 보기

웹 콘텐츠를 만드는 3단계 (번역)

-
이미지
Great content marketing not only drives new visitors to your site, but also entices previous visitors to come back. A content strategy is key, so take advantage of these tools that can help. 훌륭한 콘텐츠 마케팅은 새로운 방문자를 여러분의 사이트로 유도할 뿐만 아니라 이전 방문자들이 다시 돌아오도록 유도합니다. 콘텐츠 전략이 핵심이므로 도움이 될 수 있는 이러한 툴을 활용하십시오. 1. Identify areas with high potential - 잠재력이 높은 영역을 식별합니다 Before you sit down to create any new website content, understand the interests and content consumption behavior of the users you’re aiming to reach. Find areas that offer the most potential. For instance, niche content ideas—those that have large amounts of interest or queries but few matching sites—are often worth tapping into because they offer a way to make your content stand out. 앉아서 새로운 웹 사이트 콘텐츠를 만들기 전에 도달하려는 사용자의 관심사와 콘텐츠 소비 행동을 이해해야 합니다. 가장 잠재력이 있는 영역을 찾습니다. 예를 들어, 틈새 콘텐츠 아이디어는 많은 양의 관심이나 쿼리를 가지고 있지만 일치하는 사이트들은 종종 여러분의 콘텐츠를 돋보이게 하는 방법을 제공하기 때문에 이용할 가치가 있습니다. Google Trends shows what the world is searching for. It an...
댓글 쓰기
자세한 내용 보기

인텔리제이 IDEA에서 로컬 히스토리 관리하기

-
Local History 로컬 히스토리를 사용 하면 버전 제어와 상관없이 프로젝트 파일 및 해당 구조에 대한 모든 변경 사항을 지속적으로 추적 할 수 있습니다. 특정 커밋 간 차이를 표시하는 버전 제어 시스템과 달리 로컬 히스토리는 IDE 및 외부 변경에서 의미있는 모든 변경에 대한 개정을 자동으로 유지합니다. 이를 통해 프로젝트 구조 및 소스 코드 변경에 대한 자세한 타임 라인을 생성하고 필요한 경우 언제라도 롤백 할 수 있습니다. 로컬 히스토리는 장기 버전 관리를위한 적절한 버전 관리를 대체하지 않습니다. 새 버전의 IntelliJ IDEA를 설치하거나 캐시를 무효화 하면 로컬 히스토리가 지워집니다 . 또한 보존 기간 과 최대 크기가 있으므로 개정이 지속되지는 않습니다. 로컬 히스토리 보기 파일의 로컬 히스토리보기 보고 싶은 파일 을 찾아 편집기에서 엽니다. 주 메뉴에서 VCS | Local history | Show history 선택하여 내역을 표시 하거나 파일의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 Local history | Show history . 그러면 왼쪽에있는 파일의 변경 사항 목록과 오른쪽에서 선택한 변경 사항에 대한 diff 뷰어가있는 대화 상자가 나타납니다. 프로젝트 노드의 로컬 히스토리보기 프로젝트 도구 창 에서 프로젝트 노드를 선택하십시오 . 기본 메뉴에서 VCS | Local history | Show history 또는 노드를 마우스 오른쪽 클릭하고 Show local history 를 선택하십시오. 왼쪽의 선택된 노드에 대한 변경 목록과 오른쪽의 변경, 제거 또는 추가 된 파일 목록이있는 대화 상자가 나타납니다. 특정 파일의 변경 사항을 연구하려면 해당 파일을 선택하고 N/A 마우스 오른쪽 버튼으로 클릭하고 차이 표시를 선택하십시오. 경우에 따라 전체 파일에 대해 로컬 기록을 보지 않고 클래스, 해당 멤버 (필드 및 메소드) 또는 선택한 ...
댓글 쓰기
자세한 내용 보기

Spring-boot + maven + @vue/cli 으로 웹 서비스 구성

-
이미지
Spring-boot + Maven + @vue/cli 서버는 spring-boot를 사용하고 웹은 vue를 이용하기 위해 다음과 같은 몇가지 과정을 거쳐야 합니다. 스프링부트 프로젝트 구성 Controller 매핑 설정 vue 프로젝트 구성 vue config 설정 frontend 메이븐 플러그인 추가 이 과정을 풀어서 이 글을 읽으시는 분들 누구나 따라할 수 있도록 남겨 보려고 합니다. 스프링 프로젝트 구성 우선 사용하시는 IDE에는 기본적으로 spring-initializer 가 탑재 되어 있을 것입니다. 지금 이 글을 찾아 들어오시는 분들이라면 기본적으로 spring-boot 프로젝트 생성에는 문제가 없을 것으로 생각 되므로 이 부분은 그냥 넘어 가도록 하겠습니다. 단! vue 실행시 spring 기본 웹 포트와 같은 포트로 실행되기 때문에 스프링 프로젝트를 만드신 후에는 반드시 개발용 포트를 따로 지정하시거나 vue 에서 웹 서비스 포트를 변경하셔야 합니다. 저는 보통 application.properties 를 개발용과 배포용을 따로 만들어 사용하는데 따로 구분해서 사용하는 방법은 따로 포스팅 하도록 하겠습니다. 여기서는 application.properties 파일에 server.port=33080 으로 설정하고 진행 하도록 하겠습니다. Controller 매핑 설정 웹페이지 연결을 vue를 이용할 것이기 때문에 서버 api로 사용되지 않는 모든 url에 대해서 /index.html 페이지로 연결 되도록 설정해야 합니다. 그러기 위해서는 spring-boot 프로젝트 안에 컨트롤러를 만들어 url 매핑을 해 주어야 합니다. 기본 패키지 혹은 web controller를 모아 사용할 패키지에 DefaultController.java 파일을 생성하여 아래와 같이 모든 URL에 대하여 Get 방식의 요청은 index.html 페이지로 연결되도록 합니다. @Controller public class Default...
댓글 쓰기
자세한 내용 보기

Node Version Manager on Mac

-
이미지
노드를 사용하다 보면 버전 관련한 문제를 자주 만나게 됩니다. 그때문에 우리는 노드의 버전을 때때로 바꾸면서 사용할 필요가 있죠. 그럴때를 위해 좀더 편리하게 사용할 수 있도록 노드 버전관리 매니저 프로그램을 사용할 수 있습니다. ▲노드 JS 로고(출처 : https://nodejs.org/en/about/resources/ ) 1단계: NVM (Node Version Manager) 설치 NVM에 관한 더 자세한 설명은 NVM 웹사이트 에서 확인하실 수 있습니다. sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash 2단계: NVM 환경 변수 설정 vi ~/.bash_profile export NVM_DIR = " $HOME /.nvm" [ -s " $NVM_DIR /nvm.sh" ] && . " $NVM_DIR /nvm.sh" # This loads nvm 위와 같이 입력하고 누르고 <:wq> 눌러 저장 합니다. (.bash_profile 파일이 설치전에 미리 존재한다면 설치중 자동 입력 되는 것 같습니다. 업데이트 할 때 보니 프로파일이 업데이트 되어 있더군요.) 3단계: 환경변수 설정후 터미널 프로파일 적용 source ~/.bash_profile 적용 되었는지 확인 nvm ls -> system node -> stable (-> N/A) (default) iojs -> N/A (default) 4단계: NodeJS 최신 안정화 버전 설치 nvm install stable 5단계: NVM 활용 NodeJS 특정 버전 설치 nvm install 13.10.1 NodeJS 사용 버전 변경 nvm use 13.10.1 이제 노드와의 싸움은 멈추시고 개발에 좀 더 집중하실 수 있...
댓글 쓰기
자세한 내용 보기

Hello VuePress in Mac OS

-
이미지
vuepress on the mac Hello VuePress in Mac OS Install Yarn 우선 Yarn을 이용하는 것이 요즘 대세이더군요. 그래서 Yarn을 설치해 주도록 합니다. # npm 없을 때 curl -o- -L https://yarnpkg.com/install.sh | bash # npm 있을 때 npm install -g yarn 이제 설치가 되어서 지금 사용하고 있는 콘솔에서는 yarn 명령이 듣지 않을 테니 콘솔을 끄고 다시 새로 열어서 작업해 주도록 해야 합니다. 이때 yarn 명령이 제대로 동장하는지 확인 하기 위해 which yarn 명령을 사용해 yarn의 설치 경로가 나타나면 정상 작동 하는 것입니다. 정상적으로 설치가 되었다면, 자신이 사용할 디렉토리를 정하고 해당 디렉토리로 이동( cd {project_root} ) 합니다. 이제 본격적으로 vuepress를 설치하고 정상설치 되었는지 확인하는 작업을 합니다. Install VuePress Preject # 뷰프레스를 어디서든 접근 가능하게 global 옵션으로 설치합니다. yarn global add vuepress # OR npm install -g vuepress # README.md 파일을 작성한다. echo '# Hello VuePress' > README.md # 개발용 서버를 시작합니다. vuepress dev 정상 실행이 되었다면 아래와 같은 문구가 나옵니다. success [ 20:41:23 ] Build 8b6f7a finished in 108 ms ! ( http://localhost:8080/ ) 이는 서버가 실행되고 있다는 것이고 이 상태에서 Ctrl + C 를 눌러 종료 할 수 있습니다. 종료 시키기 전에는 http://localhost:8080 주소로 접속해 정상적으로 웹이 나타나는지 확인하실 수 있습니다. 그럼 이제 종...
댓글 쓰기
자세한 내용 보기

Spring + StompWebsocket

-
이미지
Maven dependences < dependency > < groupId > org.springframework.boot </ groupId > < artifactId > spring-boot-starter-websocket </ artifactId > </ dependency > < dependency > < groupId > org.webjars </ groupId > < artifactId > sockjs-client </ artifactId > < version > 1.1.2 </ version > </ dependency > < dependency > < groupId > org.webjars </ groupId > < artifactId > stomp-websocket </ artifactId > < version > 2.3.3-1 </ version > </ dependency > HTML < script src = "/webjars/sockjs-client/1.1.2/sockjs.min.js" > </ script > < script src = "/webjars/stomp-websocket/2.3.3-1/stomp.min.js" > </ script > Java config @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override publ...
댓글 쓰기
자세한 내용 보기