본문 바로가기

분류 전체보기

 (351)
런타임과 컴파일의 차이? 런타임(Runtime)과 컴파일타임(Compiletime)의 차이점은 무엇인가? 런타임과 컴파일타임에 대해 가장 쉽게 설명한 글이 있어 번역해 보았습니다. 원문보기 런타임(Runtime)과 컴파일타임(Compiletime)은 소프트웨어 프로그램개발의 서로 다른 두 계층의 차이를 설명하기 위한 용어이다. 프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정을 컴파일타임(Compiletime) 이라고 부른다. 컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때를 런타임(Runtime)이라고 부른다. "런타임"과 "컴파일 타임"이라는 용어는 종종 서로다른 두 가지..
useCallBack 훅 정리 함수 메모이제이션 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. const exCallback = useCallback(함수, 배열); 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때 마다 새로운 함수가 생성됩니다. const add = () => x + y; 하지만 useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉, x 또는 y 값이 바뀌면 새로운 함수가 생..
CSS - "&", ":", cursor은 멀 의미하는 걸까? A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector. e.g. h1 { &.class { } } is equivalent to: h1.class { } cursor 속성 개요 cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다. auto: 자동 default: 기본값 (화살표) pointer: 손가락 모양 (클릭 가능한 버튼) wait: 로딩 등 다양한 종류의 값이 있습니다. 가상 요소(pseudo element) 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타..
HTML id 와 class 차이? 이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 권현성 중복 사용 여부 클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 권현성 손흥민 권현성 손흥민 출처: 디지털 노마드 (heinafantasy.com)
css flex? flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다. display:flex 블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다. 과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern)..
undefined? undeclared? null? 의 차이 + html태그 doc? Undefined (미정의 변수) 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태. var test; console.log(test); //undefined console.log(typeof test); //undefined 타입이 정의되지 않았음을 알 수 있다. => 면접에서 undefined를 undeclared처럼 설명하고 ㅋㅋ Undeclared (미선언 변수) 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태. console.log(test2); // 오류를 뱉어낸다. /* Uncaught ReferenceError: test2 is not defined at :1:13 */ // 이것의 타입을 살펴보면 undefined console.log(typeof te..
버블링과 캡처링이란? EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 해당 코드에서 em을 클릭해도 div에 할당된 핸들러가 동작합니다. 왜그럴까요 버블링이라는 개념을 알면 알기 쉽습니다. 버블링 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 해당 구조는 div > em > code 의 구조를 가지고 있습니다. code에서 이벤트가 발생하면 document객체를 만날때까지 올라갑니다. 그렇기 때문에 div에서 핸들러가 동작했던것이죠. + 거의 모든 태그는 버블링을 가지고 있습니다. 그럼 코드를 짤때 이벤트 발..
자바스크립트 프로토타입이란? 상속(inheritance) 상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다. 상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다. 또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있습니다. 따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다. 하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어입니다. 프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다릅니..
728x90

티스토리툴바