개발새발로그

CVE 와 CWE는 어떻게 다를까? CVE는 Common Vulnerabilities and Exposures의 약자로 취약점 리스트를 뜻한다.CWE는 Common Weakness Enumeration의 약자로 보안약점 리스트를 뜻한다. 언뜻보기엔 둘은 차이점을 갖지 않을 것 같다만 그렇지 않다.취약점은 해커가 시스템이나 네트워크에 액세스하기 위해 직접 사용할 수 있는 소프트웨어의 실수(mistake)이다.보안약점은 소프트웨어 취약점으로 이어질 수 있는 오류(error)이다. 취약점으로 성장할 수 있는 것을 모두 보안약점이라고 일컫는다고 보면 된다. 결론적으로 보안약점은 취약점으로 발전될 수 있기에 보안약점에 대한 피드백이 발생되었을 경우 다른 방법을 모색하는 것이 좋다. https://cwe.mitre..

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 "..

https://school.programmers.co.kr/learn/courses/30/lessons/120818 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 머쓱이네 옷가게는 10만 원 이상 사면 5%, 30만 원 이상 사면 10%, 50만 원 이상 사면 20%를 할인해줍니다. 구매한 옷의 가격 price가 주어질 때, 지불해야 할 금액을 return 하도록 solution 함수를 완성해보세요. 소스코드 class Solution { public int solution(int price) { int answer =price; if(price >..

https://school.programmers.co.kr/learn/courses/30/lessons/181949 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요. 소스코드 class Solution { public int solution(int n) { int answer = n % 7 == 0 ? n / 7 : n / 7 + 1; ..

React.memo는 무엇일까? : 고차 컴포넌트(Higher Order Component)를 말하며 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용하는 작업을 수행하는 것 React.memo는 props의 변화에만 영향을 준다. 페이지의 Header를 components폴더에 분리하여 작성하였는데 의도와는 다르게 page가 서버와의 통신 작업을 수행하는 횟수만큼 Header를 불러오는 것을 발견했다. const Header = props => { const item = props.sharedItem console.log(item) return ( inthyes ) } export default Header 한 페이지에 접근하였는데 5번이나 헤더가 출력을 찍어낸다. 성능을 운운할 개발 단계가..

https://school.programmers.co.kr/learn/courses/30/lessons/181866 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 문자열 myString이 주어집니다. "x"를 기준으로 해당 문자열을 잘라내 배열을 만든 후 사전순으로 정렬한 배열을 return 하는 solution 함수를 완성해 주세요. 단, 빈 문자열은 반환할 배열에 넣지 않습니다. 소스코드 import java.util.Arrays; class Solution { public String[] solution(String myString) { Str..