DDOstory

📓React A JavaScript Library for Building User Interfaces사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것SPASingle Page Application하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션을 의미하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당하는 페이지의 내용을 채워서 보내주는 것React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구📓React 장점빠른 업데이트 & 렌더링 속도우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나Virtual DOM 사용가상의 DOMDOM ..

ALU계산하는 장치레지스터로부터 피연산자를 받아들임제어장치로부터 제어신호를 받아들임계산을 하기 위해서 피연산자와 수행할 연산이 필요결과값을 레지스터에 저장 -> CPU가 레지스터에 접근하는 속도가 CPU가 메모리에 접근하는 속도보다 빠름플래그 => 연산 결과에 대한 부과 정보, 결과값이 양수인지 음수인지를 결과값과 더불어 내보내짐 => 플래그 레지스터라고 하는 특수한 레지스터에 저장CPU마다 다르지만 공통적으로 포함하고 있는 플래그의 종류플래그 종류의미 부호 플래그연산한 결과의 부호를 나타냄부호 플래그가 1일 경우 계산 결과는 음수, 0일 경우 계산 결과는 양수를 의미제로 플래그연산 결과가 0인지 여부를 나타냄제로 플래그가 1일 경우 연산 결과는 0, 0일 경우 연산 결과는 0이 아님을 의미캐리 플래그연..

🧸  속성과 값이 같으면 1개만 기입객체를 정의할 때 속성과 값이 일치하면 축약 가능const language = 'JavaScript';const josh = { language};console.log(josh);🧸  컴포넌트 등록 방식에서의 축약 방법const doComponent = { template: 'Do Component'};new Vue({ components: { doComponent }});🧸  뷰 라우터 등록 방식에서의 축약 방법const router = new VueRouter({ //...});new Vue({ router});🧸  속성에 함수를 정의할 때 function 예약어 생략객체를 정의할 때 객체의 속성에 함수를 연결하여 사용하는 경우 많음const j..

🖼️  @import 규칙CSS 파일에서 다른 CSS 파일을 추가하는 방법CSS파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일 분리link 태그의 숫자를 줄일 수 있는 방법 @import url(StyleSheetA.css);@import url(StyleSheetB.css);🖼️  @font-face 규칙웹 폰트를 생성할 때 사용하는 규칙 font-family폰트 이름을 지정src폰트 파일 지정 font-weight폰트 두께 지정font-style폰트 스타일 지정🖼️  @media규칙다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙   🖼️  반응형 웹 징치를 구분하고 장치의 크기나 비율 구분 가능width..

📲  모듈코드를 모아놓은 하나의 파일을 의미재사용성이나 유지보수성 등을 위해서 사용큰 목적 하나를 달성하기 위해서 관련된 조각 코드들이나 관련된 함수들을 모아서 하나의 모듈로 작성하나의 자바스크립트 파일모듈을 사용하기 위해 imfort 명령어를 사용하여 외부에 있는 모듈을 가지고 올 수 있음export 명령어를 사용하여 현재 모듈을 내보낼 수도 있음📲  모듈 생성 및 내보내기작성한 함수를 밖으로 내보내기 위헤서는 가장 앞에 export라는 키워드를 붙이면 가능내보낼 변수나 함수 키워드 앞에 export만 붙이면 모듈로서 내 보낼 수 있음export function greeting(){ console.log('Hello');}📲  type = "module"내보낸 greeting 함수를 자바스크..

🪁  이벤트어떤 동작이나 상태 등의 사건을 발생하는 것을 의미html dom 요소들은 이벤트가 발생했을 때 웹 브라우저에서 이벤트가 발생한 걸 알아챌 수 있도록 이벤트 신호를 발생자바스크립트는 발생한 이벤트의 반응을 해서 어떤 동작을 수행할 수 있음해당 이벤트를 감지할 수 있는 EventListener를 EventHandler를 지정 = 이벤트 리스너를 등록한다🪁  addEventListener()이벤트 리스너를 등록하기 위해 메소드 사용메소드의 첫 번째 인자에는 이벤트의 종류를 문자열로 지정두 번째 인자에는 이벤트가 발생했을 때 실행시킬 EventHandler 함수를 전달 해주어야 함내부에 직접 작성하여도 됨함수를 작성하여 함수를 인자로 전달하는 방식으로 작성EventHandler함수는 이벤트가 발..

📱  DOM (Document Object Model)html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메..

🛎️  구조분해할당배열 또는객체의 구조를 분해해서 분해된 값을 개별적인 변수에 담는 표현식을 의미각각의 요소를 서로 다른 변수의 값으로 저장을 하려면 각각의 인덱스로 요소에 접근을 해서 변수의 값으로 지정배열 내부의 값을 새로운 변수에 각각 할당하고자 한다면 하나씩 변수를 선언하고  값을 할당하는 과정을 거침const arr = [1, 2, 3, 4, 5];const one = arr[0];const two = arr[1];const three = arr[2];🛎️  배열의 구조분해할당변수를 선언하고 할당하는 과정을 한 번에 해결할 수 있음대열을 옆에다가 우측에다가 작성을 해주면 오른쪽에 주어진 배열을 구조 분해해서 좌변에 위치하고 있는  변수들에 각각 할당하게 됨const arr = [1, 2, 3..

🧱  for in객체에 사용할 수 있는 반복문배열에서 사용하는 for of라는 반복문에 객체 버전객체를 순환객체에 포함되어 있는 모든 키 값을 순화하면서 출🧱  객체 축약 방법 키와 값이 똑갗은 이름을 사용할 때 뒷부분을 지우고 중복되는 이름을 한 번만 명시해서 프로퍼티를 약해서 표현const name = '겨울';const country = 'KR';const user = { name: name, country: country,};console.log(user);🧱  메소드 축약 표현객체의 프로퍼티로 선언이 된 함수를 메소드라고 함함수를 호출할 때는 객체의 프로퍼티로 접근객체 내부의 메소드를 작성을 할 때 평선이라는 키워드를 생략하고 메소드를 축약해서 표현할 수 있음const obj =..

메소드를 외우는게 아니라 이런 것들이 존재한다는 것 정도만 알아두면 됨 💣 toUpperCase(), toLowerCase()대소문자 변환하는 메소드toUpperCase()는 모든 문자를 대문자로 변경toLowerCase()는 모든 문자를 소문자로 변경const str = 'Hello World!';console.log(str.toUpperCase());console.log(str.toLocaleLowerCase());💣 trim(), trimStart(), trimEnd()문자열의 공백을 제거하는 메소드trim()은 문자열의 앞쪽과 뒤쪽에 있는 공백을 제거trimStart()는 문자열의 앞부분의 공백만 제거trimEnd()는 문자열의 뒤부분의 공백만 제거const str = ' hello ..