개인 공부용 블로그

a태그에 data-name을 넣어 글씨를 제어하고자 한다면, 아래와 같이 가상클래스를 통해 attr(내가 지어준 data값)에 접근 .downloadBtn a:before { content: attr(data-name); padding-left: 14px; display: flex; height: 100%; color: #fff; align-items: center; pointer-events: none; } search에 아이콘을 background img로 넣어 위치값을 조정하고자 한다면 아래와 같이 단축속성을 적용할 수 있다. .worksheet .search { background: #ae7c65 url() 15px center/22px auto no-repeat; } /* contents색상 |..

See the Pen Untitled by limhaneul2244 (@limhaneul2244) on CodePen. mask-image: radial-gradient(#fff, #000); ios에서 border-radius가 먹지 않으므로 필수로 지정해준다. 기본 56.25%가 iframe 너비이므로 width 값의 100%로 지정해주면 유튜브에 검정색 부분이 같이 보이기 때문에 그 부분까지 없애주려면 width의 비율 값을 177.78%로 지정해준다. 177.78인 이유는? 560 / 315 * 100% = 177.7777777777778 1차방정식으로도 정리 가능 560 : 315 = x : 100 315x = 56000 x = 177.7777777777778

조건에 따라 다른 내용을 rendering(표현) 해야 할때에는 1. JSX밖에서 컴포넌트로 빼서 if문을 사용 2. {}안에서 삼항연산자를 사용해야 한다 조건부랜더링 조건부 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org //짧은 구문의 삼항연산자 {isLoggedIn ? 'currently' : 'not'} //긴 표현의 삼항연산자 {isLoggedIn ? : } 🌟step1. 삼항연산자를 통해 만들어보기 function App() { let [modal, setModal] = useState(false); // 초기값 보이지 않음 설정 return ( { setOpenModal(!modal) }}>{headLi..

반응형에 따라 component를 숨겼다 나타나게 해야할때가 있다. 그때는 responsive를 사용하면 된다. Install $ npm install react-responsive --save import React from 'react' import { useMediaQuery } from 'react-responsive' const Example = () => { const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' }) const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' }) const isTabletOrMobile = useMediaQuery({ query: ..

SPA (Single Page Application) 서버에서부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹애플리케이션이나 웹사이트를 말한다. HTML, Javascript, CSS등 필요한 것들을 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가한다 SPA의 특징 라우팅(Rounting) 라우팅은 출발에서 목적지까지의 경로를 설정하는 기능이다. SPA에서는 브라우저에서 이것을 구현하는것이 핵심이다. 보통은 사용자가 요청한 URL 및 이벤트를 해석해 페이지전환을 하기 위해 페이지 리로딩, 화면 깜빡임, 과부하가 걸릴 수 있는데 SPA의 경우 부드러운 화면 전환, 서버에 필요데이터를 요청하지 않고 페이지 전환이 가능. 컴포넌트..

1. TypeScript + React 설치하기 npx create-react-app 프로젝트명 --template typescript React를 설치하면 jsx파일이 많이 보인다. 근데 jsx 파일이 뭔지? (궁금.) js파일이 아닌 jsx로 사용한다. 이것은 JavaScript 의 기능이 포함되어 있다. 2. React Component function hellow () { return ( ) } 3. jsx 속성 1. 중괄호를 사용해 js 표현식을 삽입할 수 있다. 2. 주의. jsx는 HTML보다 JavaScript에 가까우므로 카멜케이스 프로퍼티 규칙을 사용한다. 3. 태그가 비어있을 경우 XML과 같이 />로 닫아주어야 한다. 예시 4. class가 아닌 className 을 사용한다. 예시..

1. 함수의 기본 선언 방법 function sum(a: number, b: number):number { return a + b; } //함수의 반환 값에 타입을 정하지 않을 때는 void 사용 function sum(a: number, b: number):void { return a + b; } 2. 함수의 인자(Argument) ts는 함수의 인자를 모두 필수 값으로 간주한다. 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야 한다. 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인한다. 정의된 매개변수 값만 받을 수 있고, 추가 인자는 받을 수 없다. function sum(a: number, b: number): number { return a + b; } sum(10,..

1. type 지정하기 //TypeScript let name : string = 'kim'; let age : number = 25; let photos : string[] = ['photo1', 'photo2']; let numbers : number[] = [1,2,3]; let infos : { age : number } = { age : 20 } array의 경우 array에 무엇이 들어가는지 지정해주어야 한다. object의 경우 좌항과 우항을 동일하게 지정해준다. 2. interface로 병합하기 //javaScript 오브젝트 선언 방식은 (변수명 : 값) 형식이므로 아래처럼 지정함 let project: { member : string[], days: number, started: boo..

1. Union Type 유니온 타입은 자바스크립트의 OR연산자( || )와 같이 A이거나 B이다. 라는 의미의 타입이다. function name(text: string | number | boolean ) { // } 2. any Type type을 바꿔도 에러가 나지 않는다. (오류가 났을 경우 버그 추적이 어렵다 사용에 유의해야 한다!!) type을 number로 지정했을때 오류메시지가 나지만, any로 지정했을경우에는 오류메시지가 나오지 않는다. 3. unknown Type (typeScript 3.0에서 도입됨) any와 동일하게 모든 타입을 넣을 수 있다. (단 unknown 으로 지정시 오류를 확인할 수 있음)

1. TypeScript를 사용해야 하는 이유는 무엇인가? //javaScript function sum (a, b) { return a + b; } sum('x', 'y'); //typeScript function sum (a: number, b: number) { return a + b; } sum('x', 'y'); javaScript는 타입에 관대한 편이다. 5 + '3' 이라고 해도 알아서 parseInt라는 기능이 있어서 5+3으로 연산을 해준다. (자바스크립트는 Dynamic typing 을 지원하는 언어라고 한다.) 1-1. TypeScript는 정적타입을 지원한다. (즉, type 지정후에 변경이 불가능하다. )컴파일단계에서 오류를 포착할 수 있다. (또한, ts는 오류를 명확하게 알려줘..