언제나노마드

프론트엔드에서의 접근 권한 체크! <비회원만>, <회원만>, <특정롤만>

안녕하세요 하늘은맑고 입니다. 오늘은 정말 간단하게 "프론트엔드"에서 접근권한을 기능을 구현하는지 적어보러합니다. 예시 조건을 설정해 보겠습니다. 1. 요구사항 - 회원과 비회원을 구분해주세요 - 회원이여도 보통회원과 관리자를 구분해주세요 - 아참, 관리자도 직책이나 팀에 따라 구분이 필요해요. 특정 기능이나 웹페이지는 못들어가게요. - 그리고 직책이나 권한이 추가될 수 있습니다. - 그리고 백엔드에서 토큰은 구현됬다고 합니다. 토큰방식으로 해주세요. - 마지막으로 이 모든건 수정될 수 있습니다 :) 2. 분석 카테고리 분류를 해보면 "회원" 과 "비회원"으로 나눌 수가 있습니다. 그리고 회원은 "보통회원", "관리자"로 구분되고 관리자는 "직책" 과 "팀" 정보로 분류됩니다. 어떤 직책과 팀인지는 아직..

QRCode 관련 기능개발 요구사항을 받았을때

안녕하세요. 하늘은맑고 입니다. 주문의 QR코드를 이용한 기능개발 요구사항을 받았습니다. 개발을 진행해보며 알았던 사실과 개발 플로우를 좀 적어보려합니다. 1. 요구사항 - 주문의 QRCODE 생성해 다양한 서비스를 제공하자. - QRCODE로 주문정보 조회가 가능하도록하자. 추가로 기능을 더 붙일 수 있다. - 라벨지에 QR프린트가 가능하도록 해보자. 2. 분석 일단, QRCode를 생성하는 기능이 있어야겠고 이는 라이브러리도 구현이 가능합니다. - qrcode.react 라이브러리를 선택했습니다. 프린트도 라이브를 통해 가능해보이구요. - react-to-print를 선택했습니다. 저의 라이브러리르 선택은 많은 사람들이 사용하고, 지속적으로 관리가 되는지(업데이트) 입니다. 많은 사람이 쓴느 것은 기..

[React] State 총 정리 /상태관리/useState/produce/context/커스텀훅

안녕하세요 하늘은맑고 입니다 오늘은 React에서 state를 총 정리를 했습니다. 최대한 간결하게 설명하고 코드로 표현했습니다. State? React에서는 변수 값을 관리하는 기능이 있습니다. 값이 변함에 따라 렌더링을 다시해준다고 생각하면 됩니다. input, file 등 거의 모든종류의 데이터를 관리합니다. useState? react에서 제공하는 기본 hook 입니다. 컴포넌트 내부에서 선언이 가능하고, 변경시에 컴포넌트가 다시 렌더링됩니다. 변하기 전 데이터와 변한 후 데이터를 비교해서 변경을 확인하고 렌더링이 되는데요. 그렇기에 불변성 유지가 중요합니다. useState가 선언된 컴포넌트에서 하위 컴포넌트로 Props(파라미터로 이해) 전달하면 하위 컴포넌트도 데이터를 사용할 수 있습니다. ..

VSCODE Snippet 설정/활용

안녕하세요 하늘은맑고 입니다. VSCODE의 Snippet을 활용하면 자주쓰는 함수나 코드 규격을 일일이 타이핑 하지 않고 빠르게 작성할 수 있습니다. File > Preferences > Configure user snippets 파일의 확장자별로 Snippet설정이 가능합니다. 저는 주로 JavaScript JSX를 사용하기에 여기에 설정했습니다. { // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the bod..

[React] useInput

안녕하세요 하늘은맑고 입니다. 오늘은 React에서 Input 값을받는 상태를 관리하는 useInput 커스텀훅을 만들어봤습니다. 이제껏 각 컴포넌트별로 useState로 상태관리를 하다가 문제점이 보여 만들게되었습니다. 문제점은 시큐어코딩도 고려하고, 계속 작성되어야하는 useStage, change 함수, change할될때 정규식체크 하는부분 등 을 코드로 짜는게 번거롭고, 코드가 길어지고, 수정시 할게 많아집니다. 놓치기도 하구요. 그래서 커스텀 훅을 만들게 되었습니다. 먼저 코드를 보시죠 본 포스팅은 React의 기본(useState, useReducer, customHook)의 이해와 javaScript(정규식, 시큐어코딩)의 이해를 바탕으로 합니다. import { useCallback, us..

[React] 순수 React 프로젝트 라이브러리 추천(여러문제 해결 keyword)

안녕하세요 하늘은맑고 입니다. 순수 React 프로젝트(create-react-app)를 하다보니 막힐때마다 찾아보면서 맨땅헤딩을 많이 하는데요 여러 책들과 선배님들의 헤딩경험이 많이 도움됬습니다 (..이 내용이 정말일까 하고 다시 멘땅에 헤딩 많이했습니다) 그러다 보니 때에 맞는 라이브러리가 짠 하고 나타나서 도움이 많이 됬습니다. 꼭 필요한것도 쓰다보니 아닌것들도 있는데 저의 다음 프젝때 참고하기위해 기록합니다 그리고 처음 프젝하시는 분들은 참고하시면 좋습니다. 참고) create-react-app으로 순수 react로 시작했습니다, 타입스크립트, 리덕스를 쓰지 않았습니다 1. Node.js 설치(필수) - https://nodejs.org/en - 2023-03-25 기준 18.14.1 LTS 버전..

[React] React의 이해

안녕하세요. 하늘은맑고 입니다. 본 포스팅은 React의 구동을 이해해 보는 글입니다 :) JavaScript의 역할 흐름 과거부터 현재까지의 자바스크립트의 역할을 이해 하다보면 어떻게 리액트가 나오게 되었는지, 그리고 어떤 기능을 주요로 하게 되는지 알 수 있습니다. 자바스크립트는 단순 웹 브라우저 연산이나 시각적인 효과를 주는 단순한 스크립트 언어를 벗어나 웹앱(애플리케이션) 의 핵심 역할을 하게 됬습니다. 최근 몇 년은 웹 브라우저 영역에서 더 확장되어 서버 사이드, 모바일, 데스크톱 에서도 많이 쓰이고 있습니다. 예를 들면 슬랙, 아톰, VS Code 등 데스크톱 앱도 일렉트론(자바스크립로 데스크톱 앱을 만들 수 있는 프레임워크)로 개발되었습니다. 모바일도 페이스북, 디스코드, 페이팔, 이베이등 ..

[React] React 설치 및 환경설정

1. 사전 설치 node.js가 설치되어있어야 합니다. 공식홈피(https://nodejs.org/ko)에서 Node.js 설치 ( + npm(node package manager) 같이 설치됨) node.js는 웹브라우저 바깥에서 js를 사용하게 만들어줍니다. 그러나 웹 개발 프론트엔드에서는 보조 역할만 합니다. 2. React 프로젝트 생성 React 공식사이트에서 제안하는 React 프로젝트 생성방법 입니다. 2-1. 프로젝트를 설치할 일반 폴더 생성하기. 어느 디렉토리 위치든 상관없습니다. 보통 바탕화면 혹은 별도 프로젝트모아두는 폴더에 만듭니다. 2-2. vscode를 실행해서 실행 폴더 열기 (만들어놓은 폴더) 2-3. 프로젝트 생성 npm init react-app . 터미널에 위 명령어를 ..