비교연산자는 주로 조건문에서 많이 사용하는데 비교연산자에 대해서 처음 공부하는 것이라면 헷갈릴 수 있는 부분도 존재하니 반드시 체크해두어야 나중에 문제가 생길일이 없을 것 같다. 비교연산자 식은 true, false 값을 반환 기본적으로 console에 비교연산자를 활용한 식을 적어보면 true 또는 false 값을 반환한다. console.log(8 > 4) // true console.log(8 == 4) // false console.log(8 != 4) // true 여기서 한가지 주의해야할 것 중 하나는 == 연산자인데 기본적을 =은 할당을 의미하기에 우리가 평소 알고 있는 것처럼 같다를 의미하지 않는다. 그래서 같다를 의미하는 연산자로 ==를 사용하는데 ==과 ===의 차이를 알아두는 것이 좋..
자바스크립트 기본연산자에 대해 다시한번 알아보고 추가적으로 비교연산자, 논리연산자 등에 대해서 알아보려고 한다. 기본 연산자 자바스크립트 기본 연산자에는 +, -, *, /, % 등이 있는데, %는 나머지 연산자이다. 이 연산자는 주로 홀수, 짝수를 구분하는데 사용하며 나머지 값이 1인지 0인지에 따라 홀수와 짝수로 구분할 수 있다. 홀수 : X % 2 = 1 짝수 : Y % 2 = 0 또한 거듭제곱의 경우에는 * 연산자를 두번 사용하면 된다. const result = 2**4; console.log(result) // 16 기본 연산자의 경우 우선순위를 갖는데 우리가 알고 있는 것처럼 더하기, 빼기 보다 곱하기, 나누기가 우선순위가 되는 것이다. 기본 연산자 줄여쓰기 연산자의 경우에는 줄여서 쓰는 것..
자바스크립트에서의 형변환은 두가지로 나뉠 수 있다고 한다. 자동 형변환과 명시적 형변환이 있는데 자동 형변환의 경우 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것이고, 명시적 형변환은 개발자가 의도를 가지고 데이터타입을 변환시키는 것이라고 할 수 있다. 그래서 이를 좀 더 자세히 살펴보고자 한다. 자동 형변환(암시적 형변환) 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것. 즉, 필요에 따라 알아서 변환되는 것을 의미한다. 예시를 하나 살펴보면 앞서 공부한 prompt를 통해 수학점수와 영어점수를 입력받아 합산한 결과에서 /2를 해줄 것이다. const mathScore = prompt('수학 점수를 입력해주세요'); // 100 const englishScore = prompt('영..
프로젝트를 진행하다보면 여러 페이지가 나오는데 페이지 간 이동시 가장 최근 스크롤 위치에서 벗어나지 않는 경우를 흔하게 만나게 될 것이다. 그래서 페이지 이동 시 화면 최상단으로 올라갈 수 있도록 스크롤 이벤트를 구현했다. ScrollToTop 컴포넌트 만들기 // ScrollToTop.js import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } 이렇게..
메인 화면에서 아래로 스크롤이 길어졌을 때는 Top 버튼이 꼭 필요한 것 같다. 그래서 함수형 컴포넌트로 top 버튼을 만들어주어 화면 최상단으로 이동시키는 방법을 구현했다. 가장 먼저 버튼 만들기 버튼 컴포넌트를 만들어주는데 화면이 아래로 스크롤 되었을 때 showButton 값이 true로 바뀌며 버튼이 나타나는 구조이다. 버튼 스타일링은 원하는대로 하면되고, css position은 당연히 fixed! 이렇게 만들어놓은 컴포넌트를 공용 컴포넌트에 넣어두고 필요한 페이지에서 가져다쓰는 방식 또는 app.js에 import 하여 어떤 페이지에서든 적용되도록 할 수 있다. import React, { useState, useEffect } from 'react' const TopButton = () =>..
카카오톡 소셜로그인에 이어 구글 로그인까지 시도해봤다. 구글로그인의 경우에는 리액트에서 사용할 수 있는 라이브러리를 활용해 구현했다. 가장 먼저 사용했던 라이브러리는 react-google-login이라는 라이브러리 사용!! 구글 로그인 시작 전 준비 먼저 구글 로그인을 구현하기 전에도 이전 카카오로그인을 구현했던 것처럼 미리 준비하는 과정이 필요하다. 구글 클라우드 플랫폼에 접속하여 Oauth2.0 클라이언트 ID를 발급받아야 그 다음 단계로 넘어갈 수 있다. 구글 클라우드 플랫폼에서 Oauth2.0 클라이언트 ID 발급 프로젝트가 없다면 새 프로젝트 만들기 Oauth 동의 화면에서 외부 -> 앱이름, 사용자 지원 이메일 -> 개발자 연락처 정보 값을 필수로 입력하고 나머지 칸은 채우지 않아도 된다. ..
요즘은 일반 사용자 로그인뿐만 아니라 이렇게 소셜로그인으로 편하게 로그인을 할 수 있는 방법이 있어 좋은 것 같다. 개발을 하기 전에는 그냥 너무 당연한거라고 생각했던 것 같은데 소셜 로그인을 구현하는 것 자체도 프론트엔드와 백엔드가 서로의 데이터를 주고받아야한다는 것을 알게 되면서 신기했던 것 같다. 그래서 오늘은 리액트를 이용하여 카카오톡 소셜로그인을 구현하는 방법을 설명해보겠다. 카카오톡 소셜로그인을 처음 구현하려면 Kakao developer 공식문서를 확인한 후 애플리케이션을 등록해야한다. 애플리케이션 추가하기 애플리케이션 추가하기를 통해 내 서비스를 등록한다. 등록 후 내 애플리케이션 -> 만든 애플리케이션 클릭 -> 플랫폼 설정하기 -> web 플랫폼 등록하기에서 도메인 주소를 localho..
윈도우에서 리눅스를 사용할 수 있게 만들었더니 이제는 도커다...! 실전 프로젝트를 진행하면서 백엔드 분들이 도커 때문에 엄청 고생하시는걸 봤었는데 그 문제의 도커가 등장했다. 설치부터 해보자! Docker 설치를 알아보기 전에 도커에 대해 간단하게 알아보면 도커는 컨테이너 기반의 오픈소스 가상화 플랫폼이라고 한다. 말이 어렵다..! 여기서 컨테이너라는 것은 다양한 OS에 여러가지 어플리케이션이 올려져 있는 것이라고 볼 수 있다고 하는데 각각의 독립된 컨테이너를 가지게 된다. 그래서 하나의 컨테이너에 문제가 생기더라도 다른 컨테이너에는 영향을 끼치지 않는다고 한다. 많은 사람들이 도커를 쓰는데는 그만한 이유가 있기 때문인데 앞서 말한 것처럼 해킹이나 공격 등에 대해서도 각각의 독립된 컨테이너 형식으로 되..
mac은 한번도 써보지 않았고, window로만 개발을 했었는데 window 환경에서 리눅스를 구동하려면 이를 도와주는 WSL을 사용하면 된다고 한다. WSL를 시작하기에 앞서 윈도우에는 터미널이 존재하지 않기 때문에 window 터미널을 다운 받는다. 1. window 터미널 설치 마이크로소프트 스토어 앱에서 Terminal을 검색하고, 그 중 Window Terminal을 선택해 다운받는다. 다운이 완료되면 작업표시줄에서 terminal을 검색하여 윈도우 터미널을 관리자 권한으로 실행한다.(우클릭 후 관리자 권한 실행) 2. WSL 관련 기능 활성화 및 WSL 설치 터미널(PowerShell)을 연 후, 다음 두개의 명령어를 차례대로 입력한다. dism.exe /online /enable-featur..
오늘 2차 기술면접을 본 후 내가 부족한 부분을 바로 알고 설명해주신 점을 참고하여 기록해보겠다. 면접을 보는 과정에서 DOM에 대해 물으셨는데 추상적으로만 알고 정확히 어떻게 설명해야할지 잘 모르겠었다. 그래서 먼저 DOM에 대해 다시한번 짚고 본격적인 HOC, 상속과 합성에 대한 부분을 공부해보겠다. DOM DOM(돔)이란 Document Object Model의 약자로 문서 객체 모델이라고 직역할 수 있다. 문서 객체라는 것은 html이나 body같은 html 문서 태그들을 자바스크립트가 이용할 수 있는 객체로 만드는 것을 문서 객체라고 하는데, 이 문서 객체와 관련된 객체의 집합을 의미한다. 즉 한마디로 정의하면 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체 모델..
