도찐개찐

1. 변수(Variable) 데이터를 저장하고 참조(사용)하는 데이터의 이름 var: 재선언 가능 let: 재선언 불가, 재할당 가능 const: 재선언 불가, 재할당 불가 따라서, 주로 const 를 사용하여 변수를 선언하되 재할당이 필요한 경우에만 let 을 사용하도록 한다 2. var : 재선언 가능 3. let : 재선언 불가, 재할당 가능 let letStr = 'let'; console.log(letStr); // 재선언 불가 에러 : Uncaught SyntaxError: Identifier 'letStr' has already been declared // let letStr = 'let__'; // 재할당 가능 letStr = 'let__'; console.log(letStr); 4. c..

var str1 = '스크립트'; var str2 = '입니다.'; var str3 = '줄바꿈 테스트'; var STRING_SEARCH = '자바 스크립트 세계에 오신걸 환영 합니다.'; function js_Test () { console.log('js Test ---------------------'); console.log(str1 + ' ' + str2 + '\n' + str3); console.log('문자열 검색 : ' + STRING_SEARCH.indexOf("세계1")); console.log('문자열 검색 : ' + STRING_SEARCH.indexOf("세계에")); } const es6_Test = () => { console.log('es6 Test --------------..

컴포넌트 생명주기(lifecycle)란 컴포넌트가 페이지에 렌더링 되기 위해 준비하는 과정에서부터 제거될 때까지의 기간을 말하며, 클래스형 컴포넌트는 이러한 생명주기 중 특정 시점에 대하여 원하는 구문을 실행할 수 있도록 생명주기 메소드를 지원합니다. 생명주기와 생명주기 메소드는 위 도표와 같은 타임라인을 가지며, 크게 세 가지 경우로 나누어 볼 수 있습니다. 참고로 각 메소드에서 Did는 해당 시점이 끝난 후 메소드 내용을 실행하겠다는 것을 뜻하며, Will은 해당 시점 직전에 메소드 내용을 실행하겠다는 것을 뜻합니다. 이제 세 가지 경우 각각에 실행되는 생명주기 메소드에 대해 살펴보고 각 메소드의 역할에 대해 알아보겠습니다. 첫 번째, 컴포넌트 인스턴스가 생성(마운트)되고 DOM에 삽입될 때는 아래와..

위와 같이 console.log() 로 값을 찍어보면 두번씩 출력 되는 현상이 나타났습니다. 렌더링 두번 발생 됬는지 추측해 볼 수 있습니다. 결론은 때문 입니다. index.js 소스를 확인해 보면 해당 태그로 둘러 쌓여 있는 것을 확인 할 수 있습니다. root.render( ); Strict 모드는 Fragment와 같이 동작하며 (단순히 감싸는 것), child까지 모두 엄격하게 검사 한다고 생각 하면 됩니다. Strict 모드가 자동으로 부작용을 찾아 주는 것은 불가능 합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와 줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다. 클래스 컴포넌트의 constructor , render 그..

스프링 시큐리티에 대해 간단하게 개념 정리를 하고 단순 시큐리티를 적용해봅니다. 스프링 시큐리티 대략적인 기능 사용자 권한에 따른 URI 접근 제어 DB와 연동 하는 Local strategy 로그인 쿠키를 이용한 자동 로그인 패스워드 암호화 이외에 여러 기능들이 존재합니다. 개념 시큐리티 사용을 앞서 인증(Authentication)과 인가(Authorization)이라는 개념을 알아야 합니다. 인증은 '증명하다'라는 의미로 예를 들어, 유저 아이디와 비밀번호를 이용하여 로그인 하는 과정 을 말합니다. 인가는 '권한부여'나 '허가'와 같은 의미로 사용됩니다. 즉, 어떤 대상이 특정 목적을 실현하도록 허용(Access) 하는 것을 의미합니다. Web에서 인증은 해당 URL은 보안 절차를 거친 사용자들만 ..

Spring Security Spring Security 스프링 시큐리티 스프링 시큐리티에 대해 간단하게 개념 정리를 하고 단순 시큐리티를 적용해봅니다. 스프링 시큐리티 대략적인 기능 사용자 권한에 따른 URI 접근 제어 DB와 연동 하는 Local strategy 로그인 쿠키를 dev-truly.tistory.com 세 가지를 만들어야 합니다. 보유할 토큰 "principal", "credentials" 요청에서 앞서 언급한 Token을 생성하기 위한 Filter를 사용하여 인증 "AuthenticationManager"하고 "AuthenticationSecurityContextHolder" "AuthenticationManager"토큰을 인증하는 데 사용할 인증 공급자 입니다. Spring Initi..

1. 사전 준비 [MacOS] React 설치 하기 1. 사전 준비 본 글에서는 Homebrew를 이용하여 node, yarn를 설치하고 실행하는것을 다루겠습니다. Homebrew 설치 MacOS Homebrew 설치 개요 MacOS 재설정 혹은 신규 설정시 github활용을 하시기 위해 초기 환 dev-truly.tistory.com 1.1. docker 설치 homebrew 최신버전에서는 brew cask install 대신에 brew --cask install 을 사용한다. $ brew --cask install docker 2. build 하기 yarn start 로 실행 하는 기본 포트와 충돌을 피하기 위해 package.json 파일에서 scripts 부분의 start에 PORT 환경변수 설정..

1. curl 패키지 설치 npm 설치전 시스템 패키지를 업데이트 해줍니다. $ apt-get update -y 패키지 업데이트가 완료되면 npm 저장소 추가를 위한 curl 패키지를 설치해 줍니다. $ apt-get install curl -y 2. Node.js 설치 그런 다음 서버에 Node.js를 설치해야합니다. 기본적으로 최신 버전의 Node.js는 표준 Ubuntu 20.04 저장소에서 사용할 수 없습니다. 따라서 Node.js 공식 저장소에서 Node.js를 설치해야합니다. 먼저 다음 명령을 사용하여 Node.js 저장소를 추가하십시오. $ curl -sL https://deb.nodesource.com/setup_14.x | bash - 그런 다음 다음 명령을 실행하여 시스템에 Node.j..