프로그래밍 공부 React 배열에 항목 추가하기 스프레드 연산자를 사용하여 배열 복제 concat함수를 사용하여 배열 합치기 배열에 항목 제거하기 filter 함수 사용 배열에 항목 수정하기 map함수 사용 useEffect를 사용하여 마운트, 언마운트 업데이트시 할 작업 설정 useEffect를 불러온다. useEffect 첫번째 파라미터로 함수가 들어가는데, 함수 내에는 컴포넌트가 주로 마운트 될 때 추가하는 작업을 쓰고, return에는 컴포넌트가 변경될 때 추가되는 작업을 작성한다. useEffect 두번째 함수로는 deps (의존되는 값)을 배열로 작성한다. useMemo 사용하여 연산한 값 재사용하기 useMemo를 불러온다. 첫번째 파라미터에는 함수 두번째 파라미터에는 첫번째 함수 안에서 의..
프로그래밍 공부 React useState를 통해 컴포넌트에서 바뀌는 값 관리하기 input상태 관리하기 useState 활용 방법 여러개의 inpt 상태 관리하기 useState 파라미터로 객체를 사용한다. e.target useRef로 특정 DOM 선택하기 해당 태그의 ref 속성 배열 렌더링하기 key 속성을 쓰는 이유 useRef로 컴포넌트 안의 변수 만들기 current 파라미터 사용 html form태그 복습 포트폴리오 기업형 사이트 - 서브페이지(회원가입) html, css작업 기타 메모 글쓰기 2일차
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부터 추..
- Total
- Today
- Yesterday
- 강의후기
- 키크론 v10
- 마크다운
- 리덕스
- 개발일지
- 삽질방지
- 하우징 도색
- 앨리스배열
- 회고록
- TIL
- 리액트
- 프로젝트
- 정규표현식
- DevOps
- 취미
- 키보드
- 타입스크립트
- autoplay
- AWS
- 네트워크
- storybook
- 토이프로젝트
- 보안
- 웹퍼블리셔
- 팁
- 삽질방시
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |