전체 글

웹 애플리케이션을 구현하다 보면 사용자의 권한 등에 따라 접근 제한을 두어야 하는 페이지가 있습니다. 우리는 여러 서비스를 비회원으로 사용하면서 로그인이 필요한 기능 페이지에 진입 시에는 로그인, 회원가입 페이지로 이동한 경험을 모두 가지고 있을 것입니다. 그렇다면 이러한 페이지 별 접근 제한을 React에서는 어떻게 구현할 수 있을까요? 오늘은 제가 이전에 useEffect hook을 이용하여 페이지 별 접근 제한을 구현한 방법 그리고 이를 개선한 1가지 방법을 더 알아보려고 합니다. 1. useEffect를 사용한 페이지 접근 제한 구현 // login 상태가 아닌 경우에 Keyword 페이지로 접근하면 Login으로 redirect useEffect(() => { if (!isLoggined) { ..

Invalid Hook Warning은 react hook을 이용하다 보면 자주 발생하는 문제로 React 공식 문제에서도 해당 문제에 대한 해결법을 정리해두었습니다. 필요하신 분은 아래 공식 사이트를 이용하셔도 됩니다. React 공식 문서 - Invalid Hook Warning https://ko.legacy.reactjs.org/warnings/invalid-hook-call-warning.html Invalid Hook Call Warning – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 1. Invalid Hook Call Warning은 언제 발생할까? Hooks can only be called..

현재 많은 개발자, 개발팀들이 GitHub Flow나 Git Flow와 같은 워크 플로우를 채택하여 개발 프로세스를 관리하고 있습니다. 이러한 워크 플로우들은 프로젝트의 진행 상황을 한 눈에 볼 수 있도록 도와주고 각 작업들을 효율적으로 관리할 수 있습니다. 이러한 워크 플로우를 적용할 때는 이슈(Issue)를 정확하게 관리하는 것이 중요합니다. GitHub에서 제공하는 Issue Template(이슈 템플릿)으로 개발자가 새로운 이슈를 생성할 때 필요한 정보를 담은 가이드라인을 제공할 수 있기 때문에 이슈 생성 및 관리에 드는 시간과 비용을 절약할 수 있습니다. 이번 포스팅에서는 GitHub Issue Template을 각 저장소에 적용하는 방법에 대하여 소개하도록 하겠습니다. GitHub Issue ..

https://school.programmers.co.kr/learn/courses/30/lessons/70129 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 본 포스팅에서 다루는 문제는 위 프로그래머스 링크를 통하여 문제 확인 및 풀이가 가능합니다! 1. 문제 풀이 이 문제에서는 '문제에서 정의한 이진 변환'이 무엇이고 이를 구현하기 위하여 어떤 메서드들이 필요한 지를 아는 것이 중요한 문제입니다. 본 문제에서의 문자열 x에 대한 이진 변환은 아래와 같이 정의합니다. x의 모든 0을 제거 x의 길이를 c라고 할때, c를 이진법으로 표현한 문자열로 변환..

https://school.programmers.co.kr/learn/courses/30/lessons/12941 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 본 포스팅에서 다루는 문제는 위 프로그래머스 링크를 통하여 문제 확인 및 풀이가 가능합니다! 1. 문제 풀이 문제 설명 자체는 쉬운 문제입니다. 길이가 같은 두 배열이 주어지고 배열에서 각각 하나의 원소를 뽑아 곱한 뒤 더한 값이 최소가 되도록 하는 것이 목표이며 이 최솟값을 반환하는 것이 문제의 전부입니다. 곱 연산의 성질을 제대로 이해하고 있다면 각 원소에서 뽑아야 하는 값은 쉽게 알 수 있습..

https://school.programmers.co.kr/learn/courses/30/lessons/178871 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 본 포스팅에서 다루는 문제는 위 프로그래머스 링크를 통하여 문제 확인 및 풀이가 가능합니다! 1. 문제 풀이 문제 설명 자체는 쉬운 문제입니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어집니다. 즉 우리는 배열 players의 원소들의 위치를 swap하여 관리하는 것이 전부라고 볼 수 있..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 07장 연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만듭니다. 이때 연산의 대상을 피연산자라고 합니다. 이떄 피연산자는 값으로 평가될 수 있어야 한다는 조건이 있어야 하며, 피연산자와 연산자의 조합으로 만들어진 표현식도 값으로 평가될 수 있어야 합니다. 피연산자가 '값'이라는 명사의 역할을 한다면 연산자는 '피연산자를 연산하여 새로운 값을 만든다'라는 동사의 역할을 수행합니다. 7.1 산술 연산자 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행하여 새로운 숫자 값을 만듭니다. 연산이 불가능한 경우에는 NaN(no..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 06장 데이터 타입 데이터 타입은 값의 종류를 의미합니다. JS의 모든 값은 데이터 타입을 가지고 있으며 JS(ES6)는 총 7개의 데이터 타입을 제공합니다. 또 이 7개의 데이터 타입은 크게 원시 타입, 객체 타입 2가지로 분류할 수 있습니다. 구분 데이터 타입 설명 원시 타입 숫자 타입 number 숫자, 정수와 실수 구분 없이 하나의 숫자 타입 number만이 존재 문자열 타입 string 문자열 불리언 타입 boolean 논리적 참과 거짓(true, false) undefined 타입 var 키워드로 선언된 값에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할..