일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- nodejs
- scss
- express
- vuex
- 자료구조
- TypeScript
- mapGetters
- storybook
- Wecode
- Vue.js
- react
- MySQL
- App.vue
- HOC
- Vue transition
- State
- input
- ES6
- sass
- webpack
- 자바스크립트
- CSS
- 쉬운설명
- JavaScript
- jsx
- Vue
- v-html
- 리액트
- event
- 댓글달기
- Today
- Total
목록프로그래밍 (76)
익명의 개발노트
위 글씨처럼 웹폰트를 적용하는 방법. 1. 구글 폰트 검색 2. 원하는 폰트 옆에 + 버튼을 누른다. 3. +버튼을 누르면 밑에 그림처럼 밑에 검정색으로 bula bula~ Selected 표시가 있다. 그걸 클릭. 4. 클릭하면 아래 그림과 같이 나타난다. 5. 여기서 CUSTOM에서 원하는 항목을 체크하고 EMBED 항목으로 와서 STANDARD, @IMPORT 중 하나를 적용하면 된다. 6. 원하는 글씨 필요한 곳에 맨 아래 부분 붙여넣기하면 반영완료.
selector 표현할때 주의사항. 표현은 한번에 하나씩만 해주어야한다. input 창과 textarea 창이 있으면, 각각 input : hover { } , textarea:hover { } 로 줘야함. input, textarea:hover { } 로 주면 input은 그냥 첨부터 먹혀버림. 효과는 textarea만 받게 된다. 주의 할 것!!
block 요소는 한 줄을 다 차지하는 요소로써 옆에 다른 태그들이 올 수 없다. 종류 : , , , , , , 등 block요소도 css에서 스타일을 주면 inline 요소처럼 사용할 수 있다.( display, float 등이 있다) inline 요소는 block요소와 반대되는 요소로, 같은 inline 요소들끼리는 옆에 올 수 있다. 종류 : , , 등
#title { font-family: Georgia, "Times New Roman", Times, serif; } => font-family 는 폰트 글씨형태를 지정해줄 수 있으며, 3개를 쓰면 앞에서부터 해당 브라우져에서 폰트를 지원하지 않으면 다음 폰트, 이런식으로 넘어가게 사용함. 폰트에 ""(따옴표)를 붙이는 이유는 폰트가 띄어쓰기가 있을 경우에 따옴표를 사용한다 indent : css로 들여쓰기 할 수 있게 해준다. .js-description { text-indent: 50px; } blockquote : html 태그로 긴 인용문 같은 것을 사용할 때 쓸 수 있음, 기본적으로 들여쓰기가 된 상태로 랜더링된다. : 기본적으로 이코드는 스페이스를 의미함. 사이사이에 글자를 띄우고 싶은 경우 ..
구분 자바스크립트 파이썬 기본 환경 {} 블록단위 블록단위가 없이, 들여쓰기로 판단 용어 배열 리스트 용어 객체 딕셔너리 변수타입 var, let, const ex) var a = "aaa" 없음 a = "aaa" 함수선언 function sexy(){} def sexy: join join은 배열문법 a=[1,2,3] a.join(",") // "1,2,3" join은 문자열 문법 a="123" ",".join(a) // '1,2,3' 배열의 덧셈(두개배열 합치기) a=[1,2,3], b=[4,5,6] a+b // [1,2,34,5,6] a=[1,2,3], b=[4,5,6] a+b // [1,2,3,4,5,6] 배열(문자열) 의 반복 a = [1,2,3] a*3 // NaN a = [1,2,3] a*3 ..
웹팩 자동빌드 설정하기. npm i react-hot-loader npm i webpack-dev-server 위 명령어로 설정한 다음에 webpack.config.js파일에 가서 1. module 안에있는 plugins에 'react-hot-loader/babel' 추가해준다. 2. output 안에 publicPath : '/dist/' 를 추가해준다. 웹팩 데브서버 설치시 설정해줘야함. package.json 에 들어가서 3. script > build 부분을 "webpack-dev-server --hot" 으로 변경해준다. 그 후 client.jsx 파일로 가서 const React =require('react'); const ReactDom = require('react-dom'); const ..
1. 등장배경 리액트에서 클래스나 함수형 컴포넌트가 하나의 컴포넌트를 의미한다. 페이스북같은경우는 2만개정도의 컴포넌트가 있다고 한다. 컴포넌트 이거 관리하려면 너무 많아서 유지보수또한 어렵다. 이런식이면 중복이 발생할 수 있다. 그래서 중복제거하기 위해 웹팩이라는 것이 나왔다. 자바스크립트 파일을 번들(합쳐줌)해준다. 웹펙을 하려면 노드를 알아야한다. 노드는 서버보다 자바스크립트 실행기로 알면 좋다. 리액트에서 노드알아야한다라는 뜻은 "서버를 알아야한다 가 아니고 웹팩을 하기위한 자바스크립트 실행기를 알아야한다. "로 이해하면 좋다. 2. 웹팩을 알아야하는 이유 CRA(이하 "create-react-app"의 줄임말)로 하면 웹팩부터 바벨, 빌드까지 다 리액트에서 되기때문에, 처음부터 웹팩설정하는 방법..
Hook 간다는 의미인가? 리액트 안에서 기본적으로 사용했던 클래스, state가 없을때 사용했던 함수형으로 했었는데. 리액트 훅은 함수형에 ref와 state를 사용할 수 있게 해준 거다. 실제로 써보면 클래스형 컴포넌트보다 훨씬 간결해짐을 볼 수 있다. 클래스형 함수형 훅 사용 왠만한건 변수로 선언해서 빼버림. 편리해보인다. 참고자료 : 제로초님 유튜브 강좌(웹게임) https://www.youtube.com/watch?v=EUQnxfZgFJU&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=11 1. useEffect : 라이프싸이클을 대신해준다. 2. useMemo : 메모이즈 기능으로 값을 저장해준다. 3. useCallback : 함수를 저장해준다. 클래스 사..
개인적으로 노드js, 리액트 보기전에 알고가면 좋다. 나는 반대로 해서 고생을 했다. -_- 1. Scope 1) let, const의 등장 2) immutable array var a =[1,3,4] var b = [].concat(a); 2. String 메서드 추가 1) startstartsWith 2) endsWith 3) includes 3. Array 관련 내용 추가 1) for in, for of 2) spread operator ( ... ) : ...배열명 하면 복사됨. 3) from : arguments나 HTML의 nodeList 타입같은 유사배열을 진짜 배열로 만들어줌. ex) Array.from(arguments) let arr = [100,200,300]; functioin su..
1. RDBMS RDBMS (relational database management system, RDBMS) 라고 하며, 관계형 데이터 베이스 관리시스템이라고 한다. 흔히들 많이 들어본 오라클, MySQL, IBM DB2, PostgreSQL 등등이 있다. 특징은 모든 데이터를 2차원 테이블로 표현 가능하고, 데이터를 넣을때 정해진 양식에 맞춰서 넣어야하며(기본 데이터 저장단위가 row, column으로 이루어져있음), 각 데이터간(테이블)의 관계가 설정되어있어, 테이블 여러개를 조인해서 데이터를 추출할 수 있다. 데이터 베이스의 설계도를 ER(Entity Relationship) 모델이라고 한다. 2. NoSQL Not only SQL의 약자이며, 기존의 RDBMS는 저장하고 처리해야할 데이터가 늘어..