react에서 로그인 여부 확인하는 간단한 예제를 만들어 봤다. (react v6 이상) App.js import React from 'react'; import './App.css'; import { BrowserRouter} from 'react-router-dom' import RouterList from './RouterList.js'; function App() { return ( ); } export default App; RouterList.js sessionStorage에서 인증 여부 변수를 가져와서 인증이 안 된 경우에, /login 링크로 redirect 한다.
FE
안녕하세요. 이번 포스팅에서는 HTML 요소 중 하나인 textarea를 개행할 때 사용되는 CRLF를 치환하는 방법에 대해서 적어보겠습니다. 1. HTML vs HTML_textarea - HTML 내에서의 개행 : - HTML 요소인 textarea에서의 개행 : CRLF(\r\n) 2. 문제 배경 - JS에서 CRLF가 오류를 일으킬 때가 있다. → ex) textarea(개행(CRLF)이 포함된 값이 있음)가 포함된 HTML 문자열을 innerHTML에 넣으니 오류 발생. 3. 해결 방법 1) innerHTML에 넣기 전에 로 치환하여 사용(innerHTML이 아니더라도, 오류가 나는 함수에서 사용 가능) 2) textarea에서 개행은 안이루어지고, 로 보인다. 3) 그럼 다시, javascri..
안녕하세요. 이번 포스팅에서는 Javascript의 변수 선언 방식인 var, let, const에 대해서 알아보겠습니다. 1. var 기존에 사용하던 변수 선언 방식 같은 이름으로 변수를 다시 선언할 수 있음(수정도 가능하다.) 간단한 소스에서는 편리하지만, 복잡한 코드에서는 유지보수가 힘들어질 가능성이 높음 Scope 전역 변수로 선언된 경우 : 모든 곳에서 사용할 수 있음 함수 내에서 선언된 경우 : 함수 내에서만 사용됨 변수 선언 전에도 사용 가능 // ======= 같은 이름으로 변수를 다시 선언 및 수정 가능 ========= var name = "멍목"; var name = "김멍목"; // 정상 작동 // ===============================================..
안녕하세요. 이번 포스팅에서는 React의 Ajax 기술인 axios를 이용하여 API와 통신하는 방법을 알아보겠습니다. 1. axios 간단 설명 method : axios 통신 방식 설정 POST : 데이터를 보낼 때 주로 사용 GET : 데이터를 받아올 때 주로 사용 이 외에 PUT / DELETE 존재(이번 포스팅에서는 다루지 않습니다) url : 통신할 URL 설정 data : axios 통신 시, 함께 보낼 데이터 기입 params : axios 통신 시, url 뒤의 파라미터 설정 headers : 데이터 형식 정의 .then((res)=>{ ... } : 성공 시 작동하는 코드 .catch(error)=>{ ... } : 실패 시 작동하는 코드 // method : POST(데이터를 보낼 ..
- 주석 처리 방법 {/* 주석 내용 */} - 데이터 바인딩 { } 로 감싸서 변수 넣기 var data = '안녕'; {data} - JSX에서 class 선언 class가 아닌 className으로 선언 class = "blue-div" (X) className = "blue-div" (O) - Inline Style 주는 방법 ex) style = { {fontSize : "10px", align:"center"} } - State 사용 방법 변수가 변경될 때 자동으로 HTML을 재렌더링하기 위함. useState() : state를 하나 만들어주는 함수 import React, { useState } from 'react'; let [state_title, state_title_change] =..
이번 포스팅에서는 vscode를 이용하여 리액트 프로젝트 설정하는 방법을 알아볼 것이다. 참고로 React를 설치하기위해 npx를 사용해야 하며, npx는 node.js 설치 시에 같이 딸려오는 기능이다. (별 거 없으니 따라오기만 하면 된다.) 설치 방법은 아래를 참고하자. 1. node.js 설치 https://nodejs.org/ko/ (node.js) 공식 홈페이지에 가서 node.js를 설치한다. 필자는 2021년 12월 12일 기준으로 16.13.1 버전을 설치하였다. 참고로 17버전은 npm start 시, 이슈가 있는 듯하다. (https://ajdahrdl.tistory.com/84) 2. visual studio code 설치 https://code.visualstudio.com/ (v..
회사에서 근무 중에 javascript가 정상적으로 작동하지 않는 현상을 발견했다. 해당 현상은 chrome과 Edge에서 발생하였으며, 개발자도구를 켰을 땐 정상작동하고 껏을 땐 제대로 작동하지 않았다. 그리고 오류가 아닌 경고가 콘솔로그에 아래와 같이 나타났다. A window.confirm() dialog generated by this page was suppressed because this page is not the active tab of the front window. Please make sure your dialogs are triggered by user interactions to avoid this situation. 페이지 구조는 부모페이지, 부모페이지로부터 호출한 팝업으로 구..
안녕하세요 이번엔 알게 된 element 요소가 있는 지 검사하는 방법을 알려드리겠습니다. 위 소스와 같이 document.getElementById() 앞에 !!(느낌표 2개)를 붙여주면 해당 요소가 있을 경우 true 반환, 없을 경우 false를 반환합니다. 출력결과 txt1Check : true txt2Check : false
