Just Do IT!

암호화란? 어떤 평문을 암호문으로 바꾸는 것이다. 반대로, 암호문을 평문으로 바꾸는 것은 복호화라고 한다. 암호화는 아주 기본적인 정보 보안 방법이다. 데이터 유출 자체를 막지는 못하지만, 어떤 정보를 담고 있는지 알지 못하게 하는 것이다. 암호화의 필요성 유저의 비밀번호는 절대 비밀번호 그대로 DB에 저장 하지 않는다. DB가 해킹을 당하면 유저의 비밀번호도 그대로 노출 된다. 외부 해킹이 아니더라도 내부 개발자나 인력이 유저들의 비밀번호를 볼 수 있다. 유저의 비밀번호는 꼭 암호화 해서 저장 해야 한다. Bycript란 무엇인가 단방향 암호화를 위해 만들어진 해시 함수 (복호화 불가능) 비밀번호 자체를 검증할 때 입력받은 값을 암호화해서 저장된 암호화된 값과 비교해서 검증할 수 있다 Hash 임의의 ..

.env 파일이란? 유닉스 및 유닉스 계열 운영 체제용 셸 명령어 환경변수 파일을 외부에 만들어 URL,포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. 환경 변수 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 dotenv 환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈 .env 파일 생성하기 최상위 경로(root)에서 파일 생성 환경 변수로 지정할 값 작성 리액트인 경우 REACT_APP_로 시작 NextJS의 경우 NEXT_PUBLIC_으로 시작 .gitignore에 .env 파일 추가 위의 캡처본들 처럼..

mongoose란? Mongoose 모듈은 MongoDB 라는 NoSQL 데이터베이스를 Node.js로 사용할 수 있도록 하는 확장 모듈 데이터를 만들고 관리하기 위해 스키마(schema)를 만들고, 그 스키마로 모델을 만들어 데이터 관리 가능 mongoDB에는 스키마가 없지만 mongoose를 통해 생성 가능 스키마와 모델을 통하여 data를 불러온 후 객체화 시켜 빠르게 수정함으로써 데이터에 접근 가능하게 만들어줍니다. 모델링 된 문서(document)가 모여있는 Collection을 관리하는 것을 수월하게 만들어 줍니다. https://www.npmjs.com/package/mongoose mongoose Mongoose MongoDB ODM. Latest version: 8.0.3, last pu..

Node.js란? 공식 홈페이지에 따르면, Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. JavaScript? 정적 언어인 HTML을 조작해서 웹페이지를 다이나믹하게 바꿔주는 기능을 한다. JavaScript를 해석하는건 바로 브라우저이다. 브라우저에는 자바스크립트 해석 엔진이 있다. 따라서 기존에는 자바스크립트를 인터넷 브라우저 위에서만 실행할 수 있었는데, 2008년 구글이 V8 엔진을 사용하여 크롬을 출시했다. V8 엔진 기반한 노드 프로젝트가 등장하면서 Node.js(V8)이 등장했다. 이는 브라우저 내에서 말고도 다른 환경에서도 사용할 수 있게 했다. 즉, Node.js는 JavaScript 실행환경인 것이다. 브라우저를 키지 않아도 자바스..

자료형 문자 자료형 print('hello world') print('안녕하세요') print('10') 숫자 자료형 print(10.0) print(3.1872) 불리언 자료형 print(True) print(False) 변수 어떤 값을 저장하는 공간 (예) 봉투 - 변수 / 세뱃돈 - 값 변수 선언 : 변수 이름 = 값 envelop1 = 1000 print(envelop1) #1000 변수 이름 규칙 문자 또는 _로 시작 문자, 숫자, _로 구성 공백 X, 특수문자 X 대소문자 구분 키워드 (예약어) X 소문자 단어, _로 구분된 단어들 (권장) #True = '1분' 불가능 name = 'seoyeon' my_name = 'jung' 형 변환 int() : 정수로 float() : 실수로 str(..

Jest란? 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 현재 대세라고 말할 수 있다. ☞ all-in-one 테스팅 라이브러리 아래 링크에서 더 자세한 설명과 설치법을 볼 수 있다. https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 설치 npm install -D jest //개발 의존성으로 설치 test 스크립트 수정하..

프로젝트에서 로그인 페이지에서 '로그인 유지하기' 버튼 UI를 구현 중이었다. 체크하는 아이콘이 png 파일이어서 버튼 클릭했을 때 스타일을 어떤 식으로 변경해야 하나 고민하다가 구글링해서 찾아냈다! 나중에도 써먹을 수 있을 것 같아서 블로그로 남긴다. filter 기능 활용하기 filter 속성으로 이미지 색상을 자유자재로 변경할 수 있다. 이미지를 필터링을 주는 효과이지만, 아이콘 이미지(png/svg) 원하는 색상으로 변경용으로 사용하면 된다. 좀 더 자세히 알고 싶으면 아래 링크로! https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert invert() - CSS: Cascading Style Sheets | MDN The ..

Pagination(페이지네이션)이란? 여러개의 컨텐츠를 여러 페이지로 나누고 페이지 번호 버튼, 이전 버튼, 다음 버튼을 눌러서 페이지를 이동하는 기능이다. 이전 버튼 페이지 번호 버튼 다음 버트 총 3가지 버튼을 필수라고 생각하고 기능을 구현했다. 이전 글처럼 반복되는 컴포넌트이기도 하고, 이왕 custom hook을 사용하기로 마음 먹은거, 저번 닐리리 프로젝트에서 구현했던 걸 조금 더 보완해보고자 구글링을 해보고 직접 테스트 해보면서 페이지네이션을 구현해봤다. 결과는 성공. 아직 기능이 구현된 것이 아니라서 더미 데이터로 페이지네이션을 확인했는데, 생각보다 이런 걸 구현할 수록 더욱 뿌듯해지는 것 같다 ㅋㅋㅋㅋ usePagination.js 파일 만들기 import { useState } from..

사이드 프로젝트를 하면서, 본격적으로 custom hook을 써보기로 했다. (나혼자 결정한거임) 아직 UI 구현 단계지만, 이렇게 페이지가 많은 프로젝트를 한 적도 처음이고 플로우 차트를 통해 페이지를 파악하는 것도 처음이다! 그래서 재밌기는 하지만, 시작하기 전에 구조를 생각해야 하는 시간이 좀 길어졌다. 캠프에서는 그냥저냥 구조 그려보고 그대로 기능 구현해봤는데, 사이드 프로젝트는 다르다. 일단 디자이너님이 그려주신 화면을 구현하기 위해서 필요한 단계들을 생각해보고, 피그마를 꼼꼼히 보고 있다. 아무튼! 그래서 반복되는 컴포넌트들은 따로 custom hook을 이용해서 만들어보기로 하고 가장 첫 번째로 모달창을 구현했다. custom hook? https://react.vlpt.us/basic/21..

Reset CSS? 브라우저마다의 기본 default 스타일이 아니라 동일한 css 스타일을 보여주기 위해 default 값을 초기화해주어야 한다. 즉, 브라우저의 기본요소의 다지안을 모두 없애는 것이다. 3대 브라우저 별 UserAgent Style Chromium(Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css blink/renderer/core/html/resources/html.css - chromium/src/third_party - Git at Google chromium.googlesource.com Gecko (Firefox..