counters 사용하기 developer.mozilla.org/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters CSS 카운터 사용하기 CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번 developer.mozilla.org counter-reset 속성을 사용하여 초기화 (none, inherit, initial 과 같은 이름으로는 불가능) counter-increment 에 따라서 증가하거나 감소 content속성에 counter()나 counters()함수를 사용하여 표시한다.
https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us DOM을 직접 건드리면서 작업하면 관리하기가 어려워진다. 업데이트 규칙도 많아지고.. 코드가 꼬이고.... 그래서 프레임워크가 나타났다. 리액트는 상태가 바뀌었을때, 돔을 업데이트 하는게 아니라 돔을 없애고 새로 만들어서 보여줌... 리액트에서는 Virtual DOM으로 성능을 지켜가면서 작업하게 만들었다. 업데이트 -> 업데이트 할 돔을 메모리 돔에 올리고 비교해서 리얼돔과 버츄얼 돔을 비교해서 실..
scope hoisting 현상 비동기 처리의 이해 MEMO 1. scope scope : 변수또는 함수가 유효한 범위 스코프 종류 Global : 전역에서 사용 Function : 특정 함수 내부에서만 Block : 중괄호로 코드를 감싸는 부분 // const 로 선언한 값은 block으로 선언이 된다. // 하지만 var로 선언하는 경우는? // var 변수는 block 단위가 아니라 함수 단위로 선언이 된다. // 때문에 var 보다는 let과 const 를 쓰는 것이 권장된다. 2. hoisting 현상 hoisting 호이스팅 이란? 아직 선언되지 않은 함수, 변수를 끌어올려서 사용하는 자바스크립트의 작동방식을 이야기 한다. (현상이다.) 호이스팅 현상을 피하는 게 좋다. 변수 또한 호이스팅이 ..
spread 와 rest 1. spread 연산자 : spread 연산자로 객체와 배열을 간단하게 복사할 수 있었다. const slime = { name : '슬라임' }; const purpleSlime = { ...slime, color : 'purple' } rest : 스프레드와는 역할이 다르다. 퍼져있는 키를 모으는 역할을 하니까. 단 배열에서의 rest는 제일 마지막에 와야만 한다. const numbers = [0,1,2,3,4,5]; const [one, two, ...rest] = numbers; 함수 파라미터에서의 rest : 파라미터가 몇개가 될 지 모르는 상황에서 사용 할 수 있다. 함수 인자에서의 rest : 인자를 입력할 때, 배열을 이용한다면 인자..
조건문 더 스마트하게 쓰기 비구조화 할당(구조분해) 1. 조건문 더 스마트하게 쓰기 이전에 업무로 해당 상품군이 무엇인지에 따라 다른 배너를 보이게 한 적이 있다. 그 때 코드를 작성하면서 어떻게 하면 좀 더 간결하고 가독성 높게 쓸 수 있을지 고민했었는데, 미리 이 강의를 들었으면 좋았겠다 싶다. 요약하면 아래와 같다. 1. 특정 값이 여러 값중 하나인지 확인해야 할 때, includes 메소드를 활용한다. 2. 값에 따라 다른 결과물을 반환해야 할 때, 객체를 활용한다. 2. 비구조화 할당 1. const {키1, 키2} = 객체 와 같은 식으로.. 2. 비구조화 할당시 기본값 설정 const {키1, 키2='기본값'} = 객체 3. 배열 비구조화 할당도 객체 비구조화 할당과 비슷한 형..
삼항연산자 Truthy and Falsy 단축평가 논리 계산법 함수의 기본 파라미터
프로토타입과 클래스 MEMO 작심삼일이라고 자꾸만 공부를 미루고 있다. 그래서 하루에 공부하는 시간을 조금이라도 가져보고자 같은 팀 동료와 함께 한시간씩 일찍 출근해서 공부하기로 했다. 파이팅. 객체 생성자 비슷한 형식을 사용하는 객체를 만들고 싶을 수가 있다. 그런 경우 객체를 함수를 통해 쉽게 만들게 해주는 도구가 객체 생성자인 걸로 이해했다. 객체 생성자를 사용할 때는 보통 함수 이름을 대문자로 시작한다. new 키워드를 앞에 붙여줘야 한다. 프로토타입은 객체 생성자의 조상으로 공유되는 역할을 설정한다. 프로토타입으로 공통되는 키를 설정해주면 생성자를 만들때마다 새로 생성되는 비용을 줄일 수 있다고 한다. 객체 생성자를 상속방는 방법은 prototype이 같게 대입해주면 된다. 클래스 ES6부터 추..
AWS AWS S3 MEMO DevOps와 Docker강의를 듣다보니 알아듣기 힘든 구역이 많아서 배경 지식을 쌓기 위해 생활코딩에서 먼저 AWS 수업을 차근차근 들어보려 한다. AWS 기본 수업 아마존 웹 서비스의 많은 서비스 중 EC2 인스턴스를 생성, 접속, 수정, 삭제 하는 방법 AWS S3 수업 S3가 무엇인지 S3에서는 파일을 오브젝트라고 한다. 파일 폴더 버킷 생성하고 읽고 수정하고 삭제하고 버킷 생성 S3 버킷 만들기 1. 버킷 이름(전체에서 고유한 이름) 2. 리전 (어느 지역의 컴퓨터에 생성할 것인지) 생성하면 기본값 다음 3. 버전관리 (동일 버킷 내에 한 객체의 모든 버전 보관) 4. 로깅 (일지) 5. 암호화 (자동으로 객체 암호화) 다음 6. 퍼블릭 액세스 설정 퍼블릭 : 누구나..
AWS/Docker 클라우드 서버 구축 MEMO 회사에서 웹 서버를 AWS를 이용해서 구축하고 있다. 내부에서 AWS를 관리할 수 있는 인원은 없으므로 컨설팅 파트너사에 외주를 맡기고 있다. 하지만 그 외주사와 커뮤니케이션을 해야하는 건 나기 때문에 조금이라도 더 알아듣기 위해 AWS를 공부했다. 그러다가 내가 뭘 잘못했는지 과금되어버리는 바람에 프리티어 계정을 삭제하긴 했지만... AWS를 사용하는 것도 문제긴 하지만, 컨설팅 회사에서 개발팀 환경까지 구축해주지 않는다. 그래서 AWS 가 뭔지 이해하고, 버전관리를 하고 서비스를 관리할 수 있도록 공부하려고 한다. 듣다가 도저히 못알아들을 것 같으면 되돌아가서 뭐부터 공부해야하는지 점검해 볼 생각이다. 아래는 강의 들으면서 메모한 내용... 알아들을 수..
UI과정 Edwith 프로젝트 실습 (프로젝트B) 코드는 비공개 MEMO UI 과정 프로젝트 실습하고 있다. 이전에는 그냥 파일 업로드로만 프로젝트를 업로드했었는데 이제는 codLab으로도 제출할 수 있게 되었다. 프로젝트를 제출하며 git 사용도 연습하고 일석이조인 셈이다. 주의할 점은 edwith의 프로젝트 코드가 노출되면 안되기에 프로젝트를 올린 저장소를 비공개로 해둬야 한다는 것. 지난주에 git 강의를 들었지만 여전히 git을 사용하는 것에는 어려움을 겪고 있다. 자주 git을 사용하며 시행착오를 겪으면서 익숙해지는 것이 첫번째 과제다. 그나저나 모니터가 하나다보니 디자인 된 화면과 코드 에디터 화면, 브라우저 세가지 창을 함께 보기 힘들다. 조만간 듀얼모니터로 바꿀 것이다.
- Total
- Today
- Yesterday
- 리덕스
- 삽질방지
- 토이프로젝트
- 삽질방시
- storybook
- 개발일지
- autoplay
- 타입스크립트
- 회고록
- 취미
- 강의후기
- 키크론 v10
- 웹퍼블리셔
- 정규표현식
- TIL
- 리액트
- 팁
- DevOps
- AWS
- 하우징 도색
- 마크다운
- 프로젝트
- 보안
- 앨리스배열
- 네트워크
- 키보드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |