꾸준히 성장하는 개발자

로그인이 되어 있지 않은 상태이면 페이지에 따라 접근을 막아야 하는데 메뉴탭은 로그인 상태에 따라 나타나지 않게 했지만 url로 들어가게 되면 막을 수가 없기 때문에 이에 따른 페이지 접근을 막아야 한다. React-Router v6로 진행한 방법 redux로 현재 로그인 상태 확인하기 그래서 현재 로그인한 사용자의 권한을 access에 할당해준다 난 authority 값으로 확인을 하였는데 이 페이지들을 관리하는 master 이 페이지를 이용하는 vendor 그리고 로그인을 하지 않으면 ' '이나 undefined로 나타난다. App.js // 로그인 여부 확인하기 const loginInfo = useSelector((state) => state.loginInfo); const access = log..

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/react.html React component - CKEditor 5 Documentation Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included. cked..

Login 페이지에서 CapsLock이 켜져 있는지 꺼져 있는지 확인해주는 기능을 구현해보자 state로 capsLockFlag의 boolean 값을 관리해준다. const [capsLockFlag, setCapsLockFlag] = useState(false); input에 포커스가 되고 어떤 키든 눌렀다가 떼는 순간 이벤트가 실행되면서 capslock이 켜져 있는지에 대한 여부를 확인하게 된다 // password입력칸에서 키보드의 키를 눌렀다가 떼는순간 이벤트는 실행이 된다 checkCapsLock(e)} /> // 위의 이벤트가 실행이 되고 capsLockFlag의 boolean값에 따라 출력값이 달라진다 {capsLockFlag ? "Caps Lock이 켜져 있습니다" : ""} getModif..

React로 로그인 기능을 만들면서 패스워드를 입력하고 보여주길 원할 때 버튼을 누르면 패스워드가 보이고 다시 누르면 보이지 않게 하는 기능을 만들어보자 // useState로 type과 visible로 나눠 state를 관리해준다 const [pwType, setpwType] = useState({ type: "password", visible: false, }); 위에서 state에서 type은 password로 되어 있기 때문에 input에서의 값들은 보이지 않을 것이다. // input 의 타입을 바꿔준다 // 이 태그를 클릭할 때 비밀번호가 보여지고 숨겨지는 기능이 실행된다. {pwType.visible ? "비밀번호 숨기기" : "비밀번호 보기"} 위의 span 태그를 클릭하면 아래의 이벤트가..

경로 다룰 때 사용되는 라이브러리 터미널을 열고 아래처럼 입력 후 설치를 해준다. npm i path --save 설정하는 방법 vite.config.js 파일로 가서 위에 아래처럼 입력하여 path import 해주고 import path from "path"; resolve: { alias: { "@component": path.resolve(__dirname, "./src/component"), }, }, alias :{ 이 안에 작성!!! } "경로약칭" : "경로" 이렇게 작성을 하는데 '@component' : path.resolve(__dirname, '경로' ) 위에서 이렇게 작성이 되어있는데 '@component' : 경로 약칭 path: path라이브러리 resolve( __dirnam..

이번에 NewYorkTimes의 api를 활용하여 newpage 만드는 미니 프로젝트를 진행하는데 API 토큰 키를 git에 포함시키지 않고 쉽게 교체할 수 있게 하라는 요구사항이 있었다. 앱과 서버 간의 통신 또는 자바 스크립트 웹 클라이언트와 서버 간 대부분의 통신이 이 API들을 이용해서, 이루어지기 때문에 한번 보안이 뚫리면 개인 정보가 탈취되는 것뿐만 아니라, 더 많은 문제를 일으킬 수 있다. 그렇기 때문에 api 토큰에 관해 보안에 대해 신경을 꼭 잘 써야 한다. API 토큰을 관리하는 방법을 알아보자 dotenv 라이브러리를 활용 아래처럼 설치를 해주면 되는데 $ npm i dotenv 만약 react프로젝트로 create-react-app으로 설치를 했다면 이미 함께 설치가 되어있기 때문에..

https://vitejs.dev/guide/ Getting Started | Vite Getting Started Overview Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: Vite is opinionated and comes wi vitejs.dev npm create vite@latest 터미널을 열고 위처럼 작성해주면 프로젝트의 이름을 무엇으로 할 건지 정하라고 나온다 그럼 프로젝트의 이름..

React에서 router 사용 시 parameter 정보를 가져와 활용하길 원한다면 useParams을 이용하면 된다. useParams를 import 하기 위해서 react-router가 인스톨되어 있어야 한다. import {useParams} from 'react-router' Route.tsx Route path에 parameter로 coinId를 넣어주었다. Coin.tsx useParams를 불러와 현재 파라미터가 무엇인지 콘솔에 찍어본다 현재 url 에서 root 경로의 뒤에 파라미터가 console에 찍히는 것을 확인할 수 있다.