MDN에 따르면 Math.max() 함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환한다. 인수 중 하나라도 숫자로 변환하지 못한다면 NaN을 반환한다. 아무 요소도 주어지지 않았다면 -Infinity를 반환한다. 문법 형태는 이러하다. Math.max([value1[, value2[, ...]]]) [예시] 다섯 개의 수 중에 최댓값을 구하는 예시이다. Math.max(1, 2, 3, 4, 5); 결과는 5가 나온다. 이번에는 배열을 하나 선언하고 이 배열의 원소들 중 최댓값을 구하려 한다. const numbers = [1,2,3,4,5]; Math.max(numbers); 결과는 NaN이 뜬다. [해결방법] apply() 메서드를 사용하면 된다. const numbers = [1,2..

현재 나는 로그인 기능을 구현하고 있다. 이메일로 회원가입과 로그인 기능, 그리고 깃허브, 구글로 로그인 기능. ​ ​ 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..

리액트를 사용하며 직접 만든 component를 직접 import 하기가 상당히 귀찮다 (특히 속한 폴더가 다르다면 더더욱..) ​ 이럴 때 Auto Import를 사용하면 간단히 해결할 수 있다. 비주얼 스튜디오 코드에서 Extensions 탭을 들어가서 검색창에 Auto Import를 검색하면 바로 나온다! 사용 방법 ​ 예시 폴더 - src - components - Router.js가 있고 예시 폴더 - src - routes - Auth.js가 있다. Router.js에서 Auth 컴포넌트를 불러오고 싶을 때 Auth를 입력하면 자동으로 import가 생성된다!! ​ ​ 생성된 경로인데.. 이 익스텐션은 정말 유용한 것 같다. ​

나는 페이스북 로고가 필요했다. 그래서 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..

구글 로그인 기능을 만들고 싶어서 구글링을 열심히 했다.. 하지만 최신 자료는 없었고 리액트 구글 API 연동은 더욱 찾기 힘들었다. 그러다 발견한 영상. React로 하니까 정말 간단하게 되는 것 같다. npm 구글 로그인 설치하고, 컴포넌트 만들고, 생성해둔 client id 값 넣으니 끝이다. 잘 동작한다! 물론 css로 조금 더 다듬어야겠지만 작동하는 게 어디야..ㅠㅠ

OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다 OAuth - 위키백과 ​ 프로젝트를 하다가 로그인 기능을 수행하는 페이지를 만들어야 한다. 실제로 사용자에게서 정보를 받고.. 관리하는 것이 꽤나 번거로울 거라는 생각이 들었고, 아직 어떻게 구현하는지 또한 정확히 알지 못한다. 또한, 나도 이곳저곳 가입할 때 구글, 페이스북을 통한 로그인을 항상 사용하기에 이 기능은 꼭 필요하다는 생각이 들었다. OAuth는 핵심 용어 세개가 있다. 어느 페이지를 가입할 때 그 서비스 내에 구축되어있는 회원가입이 아닌 ~를 통한 로그인 기능(SNS, 구글 ..

참고) 한국어 버전 공식 문서이다. Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이는 단순히 리액트 hook을 공부한 지 얼마 안 된 나의 생각을 정리하고자 쓴 글이다. 틀린 부분이 있을 수도 있으니 항상 공부는 공식 문서로! React hook은 16.8 버전에 새로 추가되었다. 콘퍼런스 영상을 보니 한 2년 전이다. ​ 우선 리액트 훅을 배운지 정말 얼마 안 되었지만 벌써 이렇게 좋아진 이유는 코드가 간단하다. (아주아주 심플해짐) ​ class App extends React.Component에서 드디어 탈출이 가능하다. state는 간단히 useState를 사용하여 나타낼 수 있게 되었다. ​ 말..

html의 input이나 textarea 와 같은 인풋에 와 같이 정보를 입력한다면, 텍스트가 아닌 스크립트로 받아들인다. 즉, 누군가가 악용하여 악성스크립트를 넣을 수 있다는 것이다. ​ sanitize-html은 이런 기법을 막기 위해 나온 모듈이다. 정말 html을 sanitize하는 기술이구나! ​ 설치는 npm install -S sanitize-html ​ 불러오는 방법은 var sanitizeHtml = require("sanitize-html"); 참고: sanitize Input sanitizing library for node.js www.npmjs.com 사용방법이 조금 바뀐건가..?

For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' }. Keep this in mind, since it's used in several future challenges. 출처: freecodecamp.org ​ JSX는 JavaScript + HTML이다. JSX에서 자바스크립트 코드는 {} (cu..

리액트 컴포넌트를 만드는 두가지 방식이 있다. - 클래스 컴포넌트와 함수 컴포넌트. 생김새 - 클래스 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } - 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 함수형 컴포넌트가 클래스형보다 더 간단하다. 하지만 함수형이 클래스형보다 뒤늦게 나온거라 클래스형으로 작성 된 프로젝트가 많이 존재한다. -> 유지보수를 위해서 클래스 컴포넌트를 알아둬야 한다. 특징 - 클래스 컴포넌트 Component로부터 상속을 받아야한다. class 키워드가 필요하다. render()가 필수적이다. s..