언제나노마드

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

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

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

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

[정보처리기사] 필기 시험 준비와 과정

안녕하세요 하늘은맑고입니다. 오늘은 정보처리기사 필기 시험 회고를 적어보려 합니다. 1. 시험을 준비한 이유저는 일하면서 방송통신대학교 컴퓨터과학과를 편입해서 다니고 있습니다. 일해보니 이 일이 재미있고 좀 더 공부하자는 생각에서 왔는데 졸업시 논문을 자격증으로 대체할 수 있더군요. 그래서 준비하게 됬습니다. 학위랑 별개로 자격증 하나 있으면 좋으니까요. 그리고 자격증을 따면 4년 뒤 정보관리기술사 시험을 응시할 자격이 생깁니다.(기술사 자격증은 안딸것같지만..) 2. 시험 응시사실 작년 2023년에는 시험접수만 했지 공부도 안하고 시험장도 안갔습니다. 당시 경력 1년차라 업무하느라 스킬업하느라 바쁘다는 핑계.. 가 있었지만 의욕이 잘 안나더라구요 올해는 반드시 따기로 마음먹고 회사 동료분과 같이 응시해..

[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..