개발새발로그

vue프로젝트에서 vue파일에 글자색이 모두 하얀색일 땐 어떻게 해야할까? 위 캡처본의 우측 하단에 보면 Vue Language Features를 install하라는 알람이 뜬다. install해주면 추가 설정 없이도 아래와 같이 기존에 우리가 아는 컬러 있는 코드로 바뀐다.

Could not resolve org.springframework.boot:spring-boot-gradle-plugin:3.0.2. Required by: project : > org.springframework.boot:org.springframework.boot.gradle.plugin:3.0.2 No matching variant of org.springframework.boot:spring-boot-gradle-plugin:3.0.2 was found. The consumer was configured to find a runtime of a library compatible with Java 11, packaged as a jar, and its dependencies declared ext..

Setting > Build, Execution, Deployment > Gradle로 이동 Gradle JVM을 컴퓨터에서 사용하는 SDK로 설정

NVM은 Node Version Manager의 약자이다. 노드 버전에 의존적인 패키지들이 존재하기 때문에 프로젝트별로 요구되는 노드의 버전이 다를 수 있다. NVM을 사용하여 버전을 관리할 수 있고 아래의 방법으로 NVM을 사용할 수 있다.https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 이 중 nvm-setup.exe을 다운로드한다. nvm이 잘 설치되었는지 확인하기 위해 nvm의 버전을 확인한다...

스왑 메모리(swap memory) : 메모리가 부족할 때 메모리 대신 디스크를 사용하는 기능 스왑 메모리는 디스크를 사용하기 때문에 램 메모리보다 속도가 훨씬 느리다. 실제 메모리만 사용했을 경우와 비교했을 때 처리 속도는 느려진다. 그럼에도 불구하고 사용하는 이유는 메모리 부족으로 인한 시스템 중단 등의 심각한 문제를 막을 수 있기 때문이다. 메모리 추가 $ sudo dd if=/dev/zero of=/swapfile bs=128M count=8 (bs : 블록의 크기, count: 블록의 개수를 의미한다.) 권한 업데이트 $ sudo chmod 600 /swapfile 스왑 영역 설정 $ sudo mkswap /swapfile 스왑 활성화 $ sudo swapon /swapfile 스왑 적용 확인 ..

gatsby를 설치 후에 'gatsby develop'으로 실행시키려고 했던 적이 있었다. 실행이 안되고 오류가 뜨길래 'npm gatsby develop'으로 수행을 했고 계속해서 오류가 났다. 프로젝트 내에서 npm 명령어 자체가 오류로 수행이 안됐다. 이 때 npx를 사용해보라는 블로그를 통해 npx명령어를 사용했는데 ! 됐다 .. ?, ,.. (이게 되네) 왜 될까? npm : node package manager npx : execute npm package binaries npx는 패키지를 실행시키는 역할을 한다. npm으로 실행이 안되었던 이유는 버전이 꼬였거나, 모듈들이 꼬였기 때문일것이다. npx는 이런 npm의 오류로부터 자유롭다. 최신 버전 파일을 불러와 설치하고, 실행시키며 실행된 ..

git remote ? 외부의 깃헙 저장소가 있는 url에 대한 alias을 만들어서 관리하기 위한 명령어 C:\...\coronaboard>git remote -v origin https://github.com/inthyes/coronaboard.git (fetch) origin https://github.com/inthyes/coronaboard.git (push) git remote -v 명령어를 입력하면 origin이라는 alias를 가진 외부 저장소가 출력된다. 별도로 설정하지 않으면 origin으로 지정되며 이후 fork하는 저장소는 upstream으로 지정된다. remote 명령어는 알아두면 유용하게 쓰인다. 원격 저장소를 삭제하고 새로운 저장소 clone을 원할 때에는 git remote ..

컴포넌트란 무엇일까? 컴포넌트 : 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위 하나의 페이지를 구현할 때 여러개의 컴포넌트를 활용하여 만들면 재사용이 가능하다는 장점을 갖는다. 여러 페이지에 필요한 헤더를 컴포넌트 폴더에 생성했다. import React from "react" import { Row, Col } from "reactstrap" import { css } from "@emotion/react" const HeaderCss = css` text-align: center; div { background-color: rgba(116, 172, 62, 0.12); border: 1px solid rgba(30, 20, 13, 0.2); } `..

__dirname : directory + name으로 현재 파일이 위치한 폴더의 절대 경로를 알려주는 역할을 한다. 특정 파일 내에서 console을 출력하면 아래와 같이 출력된다. console.log("__dirname", __dirname); 출력 내용 __dirname C:\ ... \excel-convert-project\server\routes 왜 사용해야할까? javascript파일에 따라 상대경로가 달라지고 이로 인해 파일을 불러오지 못하는 경우가 발생된다. 절대 경로를 사용함으로서 이러한 일을 방지할 수 있다. 파일 상단에 아래와 같이 선언한 후 여러 함수에서 사용할 수 있도록 한다. const fileDirectory = path.join(__dirname, "../downloaded..

React 개발 시 bootstrap과 같은 오픈 소스 프레임워크와 함께 많이 사용되는 것이 'Material UI'이다. 기본적인 컴포넌트를 쉽게 사용할 수 있다는 장점을 갖는다. 오늘은 여러 컴포넌트 중 버튼에 대해 작성하려고 한다. Material UI 의 Button을 사용하기 위해서는 아래의 단계를 거쳐야 한다. 1. 터미널에서 아래와 같은 명령어를 통해 material-ui를 install한다. npm install @material-ui/core 2. Button을 사용할 페이지에 임포트한다. import React from "react"; import Button from "@material-ui/core/Button"; 3. Button을 사용하여 retrun을 구현한다. import "..