본문 바로가기

분류 전체보기

 (219)
(TS) 부모와 자식 컴포넌트 / styled-component props 전달 부모 컴포넌트 Header.tsx 상담 신청하기 자식 컴포넌트 RequestConsultringButton.tsx interface invertedProps { inverted: boolean } const RequestConsultingButton = ({ props, children, }: { props: invertedProps children: string }) => { return ( {children} ) } 일반적인 방법으로 코드 작성. interface (혹은 타입 지정) 지정하여 처리 부모 컴포넌트에서 IntrinsicAttributes 오류 발생 오류 발생 원인을 정확하게 모르겠다. 이리 저리 찾아 봤으나 이유는 모르나 다른 형태로 코드를 작성하여서 해결하였다. 새롭게 작성된 자식 컴포..
(CSS) 모바일 기기에서 hover 제거 웹사이트에서 scrollTop button을 제작하였고 hover 효과를 주었다. 문제는 모바일 기기에서 해당 버튼을 클릭하면 hover 효과가 계속 남아 있다는 것이다. hover 효과를 모바일 기기에서 제거하고 싶을 때 CSS 방법이다. .scrollTopBtn { position: fixed; top: 85%; left: 75%; cursor: pointer; opacity: 0.2; @media (hover: hover) { &:hover { opacity: 1; } } @media의 hover: hover를 사용하여 hover 효과를 모바일이 아닌 full screen에서만 적용하였다.
(Typescript) 함수 표현식과 일등 함수 개념 자바스크립트는 함수형 언어 '스킴'과 프로토타입 기반 객체지향 언어 '셀프'를 모델로 만들었다. 타입스크립트도 또한 자바스크립트의 이러한 특징을 모두 가지고 있다. 함수 표현식은 함수형 언어의 핵심 기능이다. 프로그래밍 언어가 일등 함수 기능을 제공하면 '함수형 프로그래밍 언어'라고 한다. 일등함수 일등함수란, 함수와 변수를 구분하지 않는다는 의미이다. let f = function(a, b) {return a + b} f = function(a, b) {return a -b} 심벌 f가 변수인지 함수인지 사실상 구분할 수 없다. 이것이 변수와 함수를 구분하지 않는다 의미이다. 표현식 프로그래밍 언어에서 '표현식'이라는 용어는 리터럴, 연산자, 변수, 함수 호출 등이 복합적으로 구성된 코드 형태를 의미한..
(HTML) <meta name="viewport" content= 1. 개념 정의 meta viewport 태그는 애플이 아이폰, 아이패드에서 브라우저의 뷰포트 크기 조절을 위해 제작하였다. meta viewport는 W3C 명세에는 없어서 표준은 아니지만 safari가 널리 사용되면서 다른 브라우저들도 이 태그를 채택하게 된다. IE10은 viewport의 크기 조절을 위해 표준으로 제안된 @viewport rule을 사용한다. 따라서 아이폰과 IE10 브라우저 모두에서 작동하는 웹페이지를 제작하려면 2가지 방식으로 viewport 크기를 조절하는 것이 필요하다. @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } 2. ..
(CSS) table header 고정과 스크롤에 의해 border 투명화 현상 해결 1. table header 고정 방법 th가 한 줄일 경우 position : sticky 로 고정을 하면 된다. th가 아래 이미지 처럼 두 줄일 경우 position : sticky과 top : ?px 로 상단에서 영역을 고정값을 준다. 이때 top의 크기는 해당 th의 height 만큼 주면 된다. .result-table > thead > tr:first-child > th { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #d1d1d1; } .result-table > thead > tr:nth-child(2) > th { position: sticky; top: 40px; z-index: 1; border-bottom: 1px..
(Node.js) 명령줄 인수, process 내장객체 > ts-node src/processArgs-test.ts data/fake.csv 10000 node.js 를 실행하면서 위처럼 실행 명령 뒤에 여러 개의 매개변수를 입력할 수 있습니다. Node.js는 process 내장객체를 제공하는데 프로그램의 명령 줄 인수는 이 객체의 argv 배열 속성에서 얻을 수 있다.
(Typescript) type 키워드로 별칭 만들기 TS는 type이라는 키워드를 제공한다. type 키워드는 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있게 해준다. 이러한 기능을 '타입 별칭'(type alias)라고 한다. type stringNumberFunc = (string, number) => void let f: stringNumberFunc = function(a: string, b: number): void {} 별칭 덕분에 변수 f에 타입 주석을 수월하게 붙였다. 이렇게 type 키워드로 함수의 시그니처를 명시하면 매개 변수의 개수나 타입, 반환 타입이 다른 함수를 선언하는 잘못을 방지한다.
(Typescript) 타입스크립트 프로젝트 만들기 타입스크립트 프로젝트 개발은 Node.js 프로젝트를 만든 다음에 개발 언어를 TS로 설정한다. 1. package.json 파일 생성 Node.js 프로젝트를 만들면 package.json 파일이 생성되는데 npm init 명령을 실행해서 생성한다. package.json은 Node.js가 관리하는 패키지 관리 파일로 프로젝트 정보와 관련 패키지가 기록되어 있다. package.json으로 프로젝트를 개발하고 실행하는데 필요한 패키지를 관리할 수 있다. 2. typescript와 ts-node 설치 npm i -D typescript ts-node JS로 개발된 chance, ramda 라이브러리를 TS에서 사용하려면 추가로 @types/chance, @types/ramda와 같은 타입 라이브러리를 제..

티스토리툴바