개발캡슐

목록 태그(Lists) 목록 태그(Lists) - 다양한 유형의 목록을 사용해서 특성에 따라 정보를 그룹화해서 사용자에게 방향을 제시하는 태그. 목록 태그의 종류 - ul , ol, li, dl 4가지가 존재해. 1. ul - unordered-list(비정렬 목록, 정렬되지 않은 목록) 의 약자 - ol과 반대로 순서가 중요하지 않은(또는 없는) 목록에 사용해. - 일반적인 메뉴, 카테고리, 비슷한 구조의 반복 등에 사용하면 돼. - 자식으로 반드시 li만 가질 수 있어. Corn Tomatoes Beans Onions Garlic 2. ol - ordered-list(정렬된 목록)의 약자야. - 순서가 중요한 목록은 ol태그로 감싸서 나타내야 해. - 자식으로 반드시 li만 가질 수 있어. Cook ..

순수함수 순수함수(pure function) - 어떤 외부 상태에 의존하지않고 변경하지도 않는, 부수 효과가 없는 함수야. 즉, 동일한 인수가 전달되면 언제나 동일한 값을 반환하고 전달된 인수에게만 의존해 반환값을 만들어. - 부작용(side-effect)이 없는 함수, 즉 함수의 실행이 외부에 영향을 끼치지 않는 함수야. 그래서 순수 함수는 스레드 안전하고, 병렬적인 계산이 가능해. 외부 상태 : 전역 변수, 서버 데이터, 파일, Console, DOM 등이 있어. 스레드 안전 - "하나의 함수"가 한 스레드로부터 "호출"되어 실행 중일 때, "다른 스레드가 그 함수를 호출"하여 "동시에 함께 실행"되더라도 각 스레드에서의 함수의 "수행 결과가 올바로 나오는" 것. - return 값으로만 소통해. -..

useRef useRef - 리액트에선 render() 메서드에 의해 만들어지는 DOM에 접근하는 방식 으로 HTML 의 DOM노드와 React Element에 접근할 수 있도록 ref를 제공해. - javascript에서 특정 Dom을 선택하는 역할이 getElementById, querySelector 등이 있다면, 리액트에선 useRef를 사용해서 특정 Dom에 접근해. - 특정 DOM에 접근할 때 사용하고, - 외부 라이브러리 사용할때 유용해. useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르킬 수 있게 되지. useRef가 필요한 상황들 - ref로 값을..

const const const는 constant의 줄임말이자 "상수"라는 뜻이야. 상수란 변하지 않는 값을 의미하지. 재할당 되지않는 값인 상수를 변수로 선언하기 위한 키워드고. 하지만 상수의 값을 바꾸는 코드인, 배열 혹은 객체를 조작해도 에러가 나지 않아. 배열과 객체를 const 선언할 때는 요소나 속성을 추가, 수정, 삭제가 가능해. 왜일까? 배열, 객체를 const로 선언했는데 요소나 속성 등의 값이나 데이터를 추가(&수정, 삭제)할 수 있는 이유? 상수는 재할당에 의해 변경될 수 없고, 상수는 재선언 될 수 없어. 따라서 const로 선언한 배열 또한 재할당과 재선언이 될 수 없어. 하지만 - const 변수에 할당된 값은 바뀌진 않지만, 배열/객체가 변수에 할당될 때는 배열/객체의 요소(값..

require, import require, import require, import 두 개의 키워드는 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있어. 기본적으로 MomentJS라는 라이브러리를 불러오는 동일한 작업을 수행하지. 동일한 목적이지만 다른 문법을 가지고 있어. require - NodeJS에서 사용되고 있는 CommonJS키워드야. - CommonJS방식을 따른 첫번째 코드는 require키워드를 사용해서 다른 변수를 할당하듯이 모듈을 불러와. - 주의사항으로, CommonJS방식으로 모듈을 내보낼 때는 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 해. (ES6처럼 명시적으로 선언하는 게 아니야.) 1. 여러 개의 객체를 내보낼 경우, export..

매개변수(Parameter)와 인자(Argument) 그림을 보자면, x 와 y는 매개변수(Parameter, 인자)에 해당하고 함수를 정의할 때 사용되는 변수야. 그리고 add(2, 5)에서 2와 5를 전달인자(argument, 인수)라고 부르고 파라미터(매개변수)에 할당되는 값을 말해. 정리 매개변수 - 함수를 정의할 때 사용되는 변수 - 함수의 특별한 성질을 나타내는 변수. 인수 - 실제로 함수가 호출될 때, 넘기는 변수값 - 함수에 인풋으로 들어온 데이터 function plus(num1, num2){ return num1 + num2; } //num1과 num2는 parameter(매개변수) plus(10, 20); // 10, 20은 argument(인자) - 매개변수와 인수가 일치하지 않느 ..

Hoisting(호이스팅)? TDZ? Hoisting(호이스팅) 호이스팅은 함수 안에 정의된 변수의 선언문을 해당 함수 유효 범위(scope)의 최상단으로 끌어올려서 선언하는 것처럼 보이는 현상이야. *인터프리터(interpreter)가 선언을 하기 전에 "변수와 함수의 메모리 공간"을 "미리 할당"하는 걸 의미해. 변수나 함수를 선언하기 이전에 사용할 수 있기 때문에 가능한 거지. 그래서 끌어 올려지는 것처럼 보이는 거고. '선언과 할당의 분리'라고 생각하면 기억하기 편해. 즉, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 거야. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있단 얘기지. -> 다만, 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야..

Typescript Typescript javascript를 기반으로 하는 프로그래밍 언어야. 새로 만들어진 언어가 아닌 javascript언어를 사용해 새로운 기능, 장점이 추가된 언어. javascript 코드를 더 쉽고 잘 작성하게 해줘. - 브라우저와 같은 javascript 환경에서 Typescript는 실행할 수 없어. 즉, javascript를 실행할 수 있는 환경에선 Typescript가 지원되지 않아. ex) node.js도 typescript를 실행할 수 없어. - 하지만 javascript 환경에서 Typescript를 사용할 수 없지만은 않아. - Typescript는 프로그래밍 언어이면서 도구야. 즉, 코드를 실행해서 Typescript코드를 javascript로 컴파일(해석)하는..

Semantic HTML 시맨틱 HTML(Semantic HTML) - Semantic HTML은 웹 페이지의 콘텐츠를 의미론적으로 정의하는 HTML 마크업 방식이야. - 웹 페이지의 구조를 이해하기 쉽고 검색 엔진 최적화(SEO)에도 도움이 되는 장점이 있어. - 예를 들어, - 웹 페이지에서 특정 부분이 제목인지, 메인 콘텐츠인지, 사이드바인지 등을 명시적으로 정의하지 않고 div 태그만을 사용하는 경우, 이걸 이해하려는 사람이나 검색 엔진은 페이지의 내용을 이해하는 데 불편함을 겪을 수 있어. 시멘틱 HTML의 사용시 장점 Semantic HTML을 사용하여 적절한 태그를 사용하면, - 페이지 내용의 구조를 명확히 할 수 있어. - 이해하기 쉽고 검색 엔진이 페이지를 쉽게 인덱싱할 수 있어. 예를 ..

this this 키워드 - this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referenceing variable)이야. - 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경 할 수 있어야 해. 이때, 자신이 속한 객체를 가리키는 식별자를 참조할 때 자기 참조 변수로 this를 사용해. 객체 리터럴에서 this를 사용하는 예제 //객체 리터럴 const circle = { radius: 5, getDiameter() { //this는 메서드를 호출한 *객체를 가리켜. // this => circle (radius를 가진 circle이란 객체) return 2 * this.radius; } }; console.log(circle.ge..