분류 전체보기

[TIL] 리액트에서 FontAwesome 사용하기

1. npm 사용하여 패키지 설치 $ npm i @fortawesome/fontawesome-svg-core // 무료아이콘만 설치 (solid, regular, brands) $ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons // 리액트 컴포넌트 형태로 사용할 수 있게 변경 $ npm i @fortawesome/react-fontawesome2. 쓰고 싶은 js에서 임포트하기 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@..

리액트 리코일

recoil recoil 리액트를 위한 상태 관리 라이브러리. 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있도록 페이스북에서 오픈소스로 공개한 라이브러리이다 Atom Atom은 상태이다. 리액트의 state,props 와 비슷하지만 리덕스의 store의 상태들처럼 구독할 수 있고 Atom의 상태가 변경되면 구독하고 있는 컴포너트들의 다시 랜더링되면서 변경된 Atom의 상태를 공유한다. Selector Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다 쉽게 생각하면 컴포넌트에서 일일이 상태 값들을 컴포넌트끼리 전달하고 관련된 컴포넌트가 렌더링 되는 것이 아니라 한곳에 모아두고 렌더링할 때마다 그 ..

[TIL] HTML 신기한 태그

HTML 신박한 태그!! 1. 1줄로 진행률 표시줄을 제공 max,value 속성이 있다 두개만 지정해주면 나머지 작업은 브라우저가 알아서 해준다. css로 추가 커스터 마이징이 가능하다. 자바스크립트로 동적 값 설정해서 다양하게 쓸 수 있다. progress[value] ::-webkit-progress-bar{ background-color: whitesmoke; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } #progress[value]{ appearance: none; border-radius: 15px; overflow: hidden; position : relative; display: flex; align-items: center; } #progr..

[TIL] 인증 & 인가

인증, 인가 인증(Authentication) 인증은 왜 필요한가? 우리 서비스를 누가 쓰는지, 어떻게 사용하는지, 추적이 가능하도록 인증에 필요한 것은 아이디, 이메일주소, 비밀번호 등 -> 가장 중요한 것은 비밀번호(개인 정보로써 다른 사람이 알 수 없도록 관리) 비밀번호를 어떻게 관리해야하는가 법규상의 강제 - 법으로 비밀번호, 바이오정보, 주민등록번호 등과 같은 주요 개인정보는 암호화되도록 조치를 취해야한다. 데이터베이스에 저장 시 개인 정보를 해싱하여 복원할 수 없도록 함. 통신 시 개인 정보를 주고받을 때 SSL을 적용하여 암호화(HTTPS) 암호화는 어떻게 하나? 단방향 해쉬(one-way hash function) 단방향 해쉬함수는 암호학적 용도로 사용 원본 메시지를 변환하여 암호화된 메시..

[TIL] 자바스크립트 개념 정리 ver1

자바스크립트 deep dive 간단 요약 ver1 변수 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 -> 값의 위치를 가리키는 상징적인 이름(메모리에 값을 저장할 때는 값 자제를 저장하는 것이 아니라 이진수로 저장) 메모리 - 데이터를 저장할 수 있는 메모리 셀의 집합체 식별자 - 어떤 값을 구별해서 식별할 수 있는 고유한 이름(변수 이름) 변수 선언 - 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것 변수의 초기화 - 변수가 선언된 이후 최초로 값을 할당하는 것(변수 선언후 값을 할당하지 않으면 undefined라는 값이 암묵적으로 할당되어 초기화됨) 변수 호이..

[TIL] 깃허브 프로젝트 초기 세팅

팀 프로젝트 순서 프로젝트 초기 생성 한명이 프로젝트 생성 npx create-react-app 프로젝트명 필요한 라이브러리 설치 (dom, sass, router 등) git add . git commit -m ‘메시지’ 깃허브에서 레파지토리 만들기 -> 원격 레파지토리(비어있음)는 만들어진 상태 -> 원격 저장소와 로컬을 연결해야 함 git remote add origin 레파지토리주소 git push origin master gitignore 사용해서 node.modules는 올리지 않는다 원격저장소 로컬과 연결하기 git clone 레파지토리 주소 필요한 패키지를 다운 받아야 하므로(package.json에 설정되어있는 패키지) git install 나의 브랜치 생성후 작업 하기(마스터 브랜치에서..

[TIL] 리액트 컴포넌트의 key

리액트 컴포넌트에서의 Key 📌 Key란? 리액트에서 key는 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별(어떤 컴포넌트인지)하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.(배열 내부! / 배열이 아닌 항목에 대해서는 지정할 필요가 없다) key는 리스트의 다른 항목들 사이 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 좋으며 인덱스를 사용하는 것은 권장하지 않는다. const manList = [ { id: 1, name: 'gil-dong' }, { id: 2, name: 'gang-dong' }, { id: 3, name: 'steve' }, { id: 4, name: &#3..

[TIL] HTTP ver.1

📌 HTTP란? 하이퍼 텍스트를 빠르게 교환하기 위한 프로토콜의 일종으로, 서버와 클라이언트 사이에서 어떻게 메시지를 교환할지를 정해놓은 규칙 HyperText - 문서와 문서가 링크로 연결되어 있음을 뜻함 Transfer - HTML로 만든 웹페이지 문서(파일)을 보낸다 Protocol - 컴퓨터끼리 어떻게 HTML 파일을 주고 받을 지에 대한 소통 방식 또는 약속 쉽게 생각하면 웹에서 통신을 할 때 어떤 형식으로 통신을 하자고 정해놓은 약속 📌 HTTP 특징 connectionless - http 통신은 리소스 낭비를 피하기 위해 연결을 유지하지 않는 것을 기본 동작으로 가진다. stateless - Http 개별 통신은 모두 독립적이어서, 과거의 HTTP 통신의 결과(상태)를 보존하지 않는다. 매 ..

[TIL] Git 기초

📌 깃이란? git - 로컬에서 관리되는 분산 버전 관리 시스템(VSC), 소스코드 수정에 따른 버전을 관리해주는 시스템 github - 클라우드 방식으로 관리되는 분산 버전 관리 시스템(VSC), 소스코드 수정에 따른 버전을 관리해주는 시스템 간단히 보자면 git은 로컬(본인 컴퓨터)에서 버전 관리 시스템을 운영하는 방식이고 github는 깃허브에서 제공하는 클라우드 서버에서 버전관리리를 하는 방식이다. 📌 깃의 주요 개념 커밋(commit) : git에 파일을 추가하거나 변경 내용을 저장하는 작업 푸쉬(push) : github(원격저장소)에 파일을 추가하거나 변경 내용을 저장하는 작업 풀(pull) : github(원격저장소)에서 파일을 다운로드하는 작업 머지(merge) : 한 branch에서 완..