본문 바로가기
Programming Step20
DOM Document object model ⇒ HTML 을 파싱하여 사용 가능한 model Create const tweet= document.createElement('div') Append document.body.append(tweet) QuerySelector // 한개만 const oneTweet = document.querySelector('.tweet') // 여러개 const tweets = document.querySelectorAll('.tweet') // 밑에 두개는 같음 (#이 붙지 않음) const getOneTweet = document.getElementById('container') const queryOneTweet = document.querySelector('#contain.. 2022. 8. 23.
element 와 node 의 차이 DOM TREE는 Node들로 구성된다. Node는 Element의 상위 개념이다. Element는 node의 특정 타입 즉, Node.ELEMENT_NODE 이다. element는 HTML에서 태그로 적은 노드들을 지칭한다. , , 과 같이 태그로 표현한 것들은 전부 element이다 주석이나 text node와 같은 것들은 HTML 태그로 표현된 것이 아니므로 element가 아니다. DOM에서Node는 node의 constructor이고, HTMLElement는 element의 constructor이다. HTML 태그들로 나타내면 Node이자 element 주석, text처럼 태그가 없다면 Node 아래는 관련 예시이다. let div = document.createElement("div") div.. 2022. 8. 23.
Index Signature, 제네릭 keyof 제네릭과 keyof 를 사용한 경우 function test(a:T,b:U){ return "aaaa "+a[b] } test({name:"test"},'name') Index Signature를 사용한 경우 Index Signature는 객체가 형식이며, 객체의 타입을 명시해야 하는 경우 사용할 수 있습니다. interface testType { [key: string]: string } function test2(a:testType,b:string){ return "aaaa "+a[b]; } test2({name:"test"},'name') 2022. 6. 29.
typescript string literal 과 string enums의 차이 literal 과 enum의 차이는 javascript로 변환했을 때 코드의 유무 입니다. Typescripts Transpiler는 코드를 변환하는 동안 type 확인을 위해서만 사용하기 때문입니다. 다만 대용으로 const를 enum 앞에 붙여 const enum 형식으로 사용하면 타입 확인에만 사용할 수 있습니다. typescript 예제 코드 // 리터럴 타입 type MyKeyType1 = 'foo' | 'bar' | 'baz'; // enum 타입 enum MyKeyType2 { FOO = 'foo', BAR = 'bar', BAZ = 'baz' } // const를 사용한 enum 타입 const enum MyKeyType3 { FOO = 'foo', BAR = 'bar', BAZ = 'ba.. 2022. 6. 29.
커링 (Currying) 이란? 커링이란? 커링은 함수화 함께 사용할 수 있는 기술입니다. 자바스크립트 뿐만 아니라 다른 언어에서도 사용되고 있습니다. ex) 파이썬 Currying Function in Python - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. www.geeksforgeeks.org 커링 함수 예제 예를들어 함수 큰 함수 안에 작은함수 여러개를 넣었다고 생각해보겠.. 2022. 1. 9.
typescript express --files 옵션 tsconfig.json 에서 설정한 typeRoots 설정이 tsc를 통한 실행은 동작하지만, ts-node 에서 동작하지 않았다. TS2339: Property 'user' does not exist on type 'Request' · Issue #46861 · DefinitelyType When trying to extend the Request interface from the package express to add some custom properties, I'm getting the following typescript error on my routers: ..\node_modules\ts-node\src\index.t... github.com 위 글을 보고 오류를 .. 2021. 12. 17.
CSS - 3D 윷 제작 css로 3D 윷 제작 시작은 이러하다. 윷 이미지를 가져와야 하는데 맘에드는 이미지가 없었다. css로 만든 건 있을 까 하고 찾다가 비슷한 주사위를 3D로 만드는 내용을 찾았다.(3d 주사위) 주사위를 위아래로 늘이고, 점 대신에 X를 그리니 직육면체의 윷 모양이 완성되었다. 코드를 살펴보니 transform과 rotate 를 사용하여 구현하였으며, 관련 css태그를 좀 더 공부해 보고자 한다. 트랜스폼 translate : 이동효과 scale : 확대/축소 효과 rotate : 회전 효과 skew : 비틀기(기울임) 효과 transform 효과는 translate 과 같이 사용해야 효과가 잘 느껴진다. translateX() translateY() 이동 translate 효과는 원래의 위치를 기반으.. 2021. 6. 21.
React Hook react hook의 지원은 클래스보다 함수를 선호하는 사람에게 좋은 일이다. 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 훅을 사용할 수 있다. 그렇기에 훅이 당장 필요하지 않다면 사용할 필요는 없다. 이전 버전과 100퍼센트 호환성을 가지고 있다. useState useState는 state를 함수 컴포넌트 안에서 사용하게 해준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } import React, { useState } from 'react'; function Example() { // .. 2021. 6. 20.
CSS Flexbox 정리 1. Flex가 필요한 이유 일반적으로 웹페이지의 레이아웃은 display, float 등과 같은 속성을 사용해 구현한다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는데 한계가 있었다. css3에 추가된 레이아웃인 flexbox를 이용하면 가로 및 세로의 사이즈를 따로 계산하지 않고도 간결하게 레이아웃을 표현할 수 있다. 2. flex 기본 요소 2.1 Container와 Items flex는 크게 Container와 Items로 나뉜다. 2.2 주축(main-axis)과 교차축(cross-axis) 주축과 교차 축으로 설명하는 요소들이 많으므로 알아두는것이 좋다. 2.3 flex-start 와 flex-end 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다. 3. F.. 2021. 6. 20.
브라우저 기초 지식 [2021-03-18] 브라우저 기초 지식 추가 공부해야할 것react를 렌더링 부분을 보고 있으니 브라우저 기초지식이 부족하다고 느꼈습니다. 각 브라우저의 구조와 브라우저 렌더링 엔진이 어떻게 작동하는지, 각 브라우저의 호환성에 관해 설명하였습니다. 1. 브라우저 기본 구조 사용자 인터페이스 : 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 : 요청한 콘텐츠를 표시. 예시) HTML과 CSS를 파싱하여 화면에 표시함. 통신 : 네트워크 호출에 사용됨, 플랫폼과 독립적인 인터페이스며 하부에서 실행됨. UI백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. OS 사용자 인터페이스 체계를 사용. 플랫폼에서 명시하.. 2021. 6. 20.
REACT 공식 문서 정리 - 9. 리스트와 Key 9. 리스트와 Key 9.1 map()의 정의 먼저 Javascript에서 리스트를 어떻게 변환 하는지 살펴보자. 아래는 map() 함수를 이용하여 numbers 배열의 값을 두 배로 만든 후 map()에서 반환하는 새 배열 doubled 변수에 할당하고 로그를 확인하는 코드이다. 1 2 3 4 const numbers = [1, 2, 3, 4, 5]; // 배열 생성 const doubled = numbers.map((number) => number * 2); // 배열 횟수만큼 콜백 함수를 호출해서 돌리고 결과를 배열로 반환함. console.log(doubled); // 출력 결과는 [2, 4, 6, 8, 10] cs map()은 배열의 각 요소에 대해 제공된 callback 함수를 순서대로 호출하.. 2021. 6. 20.
REACT 공식 문서 정리 - 8. 조건부 렌더링 8. 조건부 렌더링 8.1 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 어플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있다. 예시는 아래와 같다. props.isLoggedIn 에 따라서 다른 인사말을 렌더링 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function UserGreeting(props) { // 사용자에게 인사 return Welcome back!; } function GuestGreeting(props) { // 게스트에게 인사 return Please sign up.; } function Greeting(props) { const isLoggedIn .. 2021. 6. 20.

티스토리툴바