목록개발 공부 (70)
Just Do IT!
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..