amind

객체 - 원시형과 달리 데이터를 담을 수 있습니다. - 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있습니다. - 중괄호{ } 를 이용해 만들수 있으며, 중괄호 안에는 '키' 와 '값' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있습니다. - '키':문자형 , '값':자료형 이 허용됩니다 객체의 생성 방법 let obj = new Object(); // '객체 생성자' 문법 let obj = {}; // '객체 리터럴' 문법, {} 방식으로 생성하는것이 더 좋습니다. 리터럴과 프로퍼티 - 프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자' 라고 부릅니다. let obj = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30..

디버깅 - 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다. - 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓습니다. - 디버깅 툴을 사용시 디버깅이 훨씬 쉬워지고, 실행 단계마다 발생하는 이슈를 코드 단위로 추적이 가능합니다. 사용방법 1. F12 또는 마우스 우측 버튼을 클릭하여 '검사' 클릭합니다. - mac OS: cmd + option + i 2. 개발자 도구를 열어서 Sources 클릭합니다. 3. Sources에서 navigator를 클릭합니다. - 버튼을 누르면 현재 사이트의 파일들이 나열됩니다. 4. Sources 패널은 크게 세 개의 영역으로 구성됩니다. ㄴ 파일 탐색 영역 ㄴ 코드 에디터 영역 ㄴ 자바스크립트 디버깅 영역 콘솔 ..

Modern JavaScript 카테고리의 글 입니다. - 최신 JavaScript의 기술을 지향하고 글을 작성하지만 시간이 지나면 Modern 하지 않을수 있습니다. 1. JavaScript - JS로 작성한 프로그램을 script라고 부릅니다. - 웹페이지 HTML안에 작성할 수 있으며, 웹페이지가 불러올 때 스크립트가 실행이 됩니다. - JS는 서버에서도 실행이 가능합니다. 2. 엄격모드 - use strict 라는 지시자를 사용해서 엄격모드를 활성화 시키도록 하였습니다. - ES5에서 새롭게 기능이 추가, 기존 기능의 일부가 변경되어서 하위 호환성 문제가 발생합니다.이때 엄격모드를 활성화 시킬때만 이 변경사항이 활성화 되도록 하였습니다. - 스크립트 최상단이 아닌 함수 본문 앞에서도 사용이 가능..

* useRef로 특정 DOM 선택하기 - 특정 엘리먼트의 크기를 가져오든지, 스크롤바 위치 설정, 포커스 설정 등의 다양한 상황에서 DOM을 직접 선택해야하는 상황이 발생합니다. - 이때 필요한것이 ref를 사용합니다. - 함수형 컴포넌트에서 ref 사용시 useRef HOOK 함수를 사용 - reset 버튼을 클릭할 경우 input 에 focus가 맞춰지도록 ref를 사용하였습니다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); const { name..

* useState - React 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. - React 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. - 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); }..

* react의 전 개념이 아니라 작성자가 필요한 부분만 정리를 하였습니다. * React Virtual DOM - 기존의 프레임워크에서는 JS의 특정 값이 바뀌면 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트 하는 작업을 간소화 하는 방식이었습니다. - React의 경우에는 업데이트가 아니라 전부 날리고 새로 보여준다는 아이디어에서 개발이 시작되었습니다. 하지만 전부 날리고 새로 보여줄 경우에는 속도가 굉장히 느릴 것 입니다. 그렇기 때문에 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로서 그냥 JS객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠릅니다. * defaultProps 로 기본값 설정 - 컴포넌트에 props를 ..

* JavaScript 비동기 처리 - 동기적 작업: 하나의 작업이 끝날 때까지 기다리는 동안 다른 작업은 중지상태가 되므로 다른 작업을 진행할 수 없습니다. 먼저 진행된 작업이 끝난 후 다음 예정된 작업이 진행가능합니다. - 비동기적 작업: 하나의 작업이 먼저 진행된다 하더라도 동시에 여러 가지 작업을 처리가 가능하므로 대기상태에서 다른 함수도 호출이 가능합니다. function work() { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); }, 0); } console.log('작업 시작!'); ..

* 기본 파라미터 사용법 function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); // NaN - 이렇게 사용을 하면 Not a Number, undefined 가 나와버립니다. // function 사용 function calculateCircleArea(r = 1) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); // 3.141592653589793 // arrow function 사용 const calculateCircleArea = (r=1) => Ma..

* 변수 사용 - 기존 JS qustnsms var, let, const 를 사용하였습니다. - 모던 JS에서는 let, const를 사용하는것을 권장하며, var 사용은 지양하는것을 권장한다고 합니다. * JS 객체 비구조화 할당 - 객체 비구조화 할당 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성 할 수 있습니다. const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero) { const { alias, name, actor } = hero; cons..

4-1. 스프링 시큐리티 활성화하기 - 가장 먼저 스프링 부트 보안 스타터 의존성을 빌드 명세에 추가하는 것(pom.xml추가) org.springframework.boot spring-boot-starter-security org.springframework.security spring-security-test test - 서버를 실행하고 접속을 하면 로그인 화면이 나옴 ID: user - 보안 스타터 프로젝트 빌드 파일에 추가했을시 보안구성 - 모든 HTTP 요청 경로는 인증되어야 한다. - 어떤 특정 역할이나 권한이 없다 - 로그인 페이지가 따로 없다 - 스프링 시큐리티의 HTTP 기본인증을 사용해서 인증된다 - 사용자는 하나만 있으며, 이름은 user다. 비밀번호는 암호화 해준다. 4-2. 스프링..