본문 바로가기

전체 글169

[리액트] firebase로 로그인 기능 구현하기 현재 나는 로그인 기능을 구현하고 있다. 이메일로 회원가입과 로그인 기능, 그리고 깃허브, 구글로 로그인 기능. ​ ​ firebase를 이용하여 apiKey를 비롯한 항목들을 불러왔다. ​ const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; 그리고 루트 디렉토리에 .env 파일을 생성하여 값들을 붙여 넣었다. REACT_APP_API_KEY="", REACT_APP_AUTH_DOMAIN="", REACT_APP_DATABASE_URL="", REACT_APP_PROJECT_ID="", REACT_APP_ST.. 2021. 1. 14.
[리액트] VSCode 익스텐션/컴포넌트 import 간단하게 하기 (Auto Import) 리액트를 사용하며 직접 만든 component를 직접 import 하기가 상당히 귀찮다 (특히 속한 폴더가 다르다면 더더욱..) ​ 이럴 때 Auto Import를 사용하면 간단히 해결할 수 있다. 비주얼 스튜디오 코드에서 Extensions 탭을 들어가서 검색창에 Auto Import를 검색하면 바로 나온다! 사용 방법 ​ 예시 폴더 - src - components - Router.js가 있고 예시 폴더 - src - routes - Auth.js가 있다. Router.js에서 Auth 컴포넌트를 불러오고 싶을 때 Auth를 입력하면 자동으로 import가 생성된다!! ​ ​ 생성된 경로인데.. 이 익스텐션은 정말 유용한 것 같다. ​ 2021. 1. 13.
[리액트] Font Awesome(폰트 어썸) 사용 방법 나는 페이스북 로고가 필요했다. 그래서 font awesome을 사용하려 했는데 리액트로는 어떻게 해야할지 몰랐지만 구글링하면 역시 다 나온다. (완벽하게 이해하고 적은게 아니라 적으면서 정리한 글이기에 정확한 정보는 공식 페이지를 참고 바람) @fortawesome/react-fontawesome Official React component for Font Awesome 5 www.npmjs.com 1. 우선 npm Installation에 따라 설치를 진행한다. $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fon.. 2021. 1. 13.
[자바스크립트/알고리즘] 오름차순 정렬 후 추가한 값의 인덱스 찾기(sort 함수) (입력: 배열 하나와 추가할 숫자 하나 (예시: [2, 20, 10], 19) 출력: 2 ([2, 10, 19, 20]에서 새로 추가된 19의 인덱스 번호 2) function getIndex(arr, num) { arr.push(num); arr.sort((a,b)=>a-b); return arr.indexOf(num); } console.log(getIndex([2, 20, 10], 19)); 1. num을 배열 arr에 push한다. 2. 오름차순 정렬한다. 3. num의 인덱스 번호를 리턴한다. 또 다른 방법) 솔루션을 참고하였다. 정말 간단하다! function getIndexToIns(arr, num) { return arr.filter(val => num > val).length; } 난 생.. 2021. 1. 12.
[자바스크립트/알고리즘] Falsy 값 판별 (filter 함수) * 자바스크립트 Falsy 값 : Boolean이 False가 뜨는 값들이다. (예: false, 0, "", null, undefined, NaN 등) 입력: [false, null, 0, NaN, undefined, ""] 출력: [] (모두 다 falsy values이기 때문) function WhoIsFalsy(arr) { return arr.filter(Boolean); } WhoIsFalsy([false, null, 0, NaN, undefined, ""]); * filter() 메소드 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 정말 단어 '필터'의 뜻 그 자체. 문제 출처: FreeCodeCamp(www.freecodecamp.org/) 2021. 1. 12.
[자바스크립트/알고리즘] 단어 첫 글자만 대문자로 바꾸기(정규식) 입력: hElLo i'M nO onE 출력: Hello I'm No One function changeCase(str) { return str.toLowerCase().replace(/(^|\s)\S/g, L => L.toUpperCase()); } changeCase("hElLo i'M nO onE"); [특수문자] ^ : 문자열의 시작 \s : 스페이스, 탭, 줄 바꿈 등을 포함한 하나의 공백 문자 \S : 공백이 아닌 하나의 문자 [플래그] g : 전역 검색 [replace() 함수] str.replace("찾을 문자열", "변경할 문자열"); 문제 출처: FreeCodeCamp(www.freecodecamp.org/) 2021. 1. 12.

티스토리툴바