한번이라도 써볼껄... 하는 후회에서의 시작 최근 사이드 프로젝트를 진행하며 프론트엔드 개발자 4인이 협업을 하게 되었다. 그때 나온 질문이 공통으로 사용하는 UI 컴포넌트의 관리 방법이었다. 그러고보니 프론트엔드 개발자로 일하면서 대부분의 프로젝트를 1인으로 개발해왔기에 스타일 가이드의 문서화에 신경쓴 적이 없었다. 무슨 컴포넌트가 있는지, 어떻게 사용하는지 기억하고 있었으니까... 그나마 웹 퍼블리셔로 일할 때 스타일 가이드 페이지를 제작해서 퍼블리셔 여럿이 함께 작업을 하긴 했는데, 스타일 가이드용 페이지를 따로 파는 것 보다 스토리북으로 컴포넌트를 관리하고 문서화하면 좋을 것 같다는 생각이 들었다. 그래서 스토리북을 써보자고 제안해봤는데, 문제는 내가 스토리북을 써본 적이 없어 스토리북으로 컴포넌..
리액트 재활(?)중... 리액트 기본 개념 정리 JSX, State, Props, Class Component Class Component로 간단한 Habit Tracker 제작해봄 JSX 문법 태그를 열면 닫아야 한다. 최사위 태그는 반드시 하나의 태그로 감싸져 있어야 한다. return 뒤 괄호는 필수가 아니지만 가독성을 위해 작성 JSX 안에서 javascript 사용 하는 방법 : {}로 감싸준다. 스타일과 클래스명 넣는 방법 스타일 : 객체를 만들어서 넣어야 함. (속성은 카멜케이스 방식), style속성 안에 객체를 넣는다. 클래스명 : class가 아닌 className 속성으로 넣는다. 주석 쓰는 방법 : 중괄호로 감싸서 js구문을 쓰게 만든 후 /* */와 같은 식 혹은 태그 사이에 한줄..
DOM 기본 파악하기 DOM이란 id, 요소, 네임 으로 요소 취득하기 HTMLCollection, NodeList
2개월 2주차 예습 1. hasClass, 조건식 class가 안에 있는지 식별하기 jQeury $('ul').eq(0).hasClass('on'); 자바스크립트 (추가 공부) var test = document.querySelector('ul').firstElementChild.classList; Array.prototype.indexOf.call(test,'on'); https://codepen.io/danbi-lee/full/yLYVxzX class여부 테스트 ... codepen.io 3d 복습 https://codepen.io/danbi-lee/pen/zYvomBb?editors=0110 주사위 굴리기 응용 ... codepen.io
리액트 복습 userEffect useMemo useCallback React.memo
프로그래밍 공부 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일차
- Total
- Today
- Yesterday
- 취미
- 팁
- 앨리스배열
- 타입스크립트
- 삽질방지
- TIL
- 정규표현식
- 리액트
- 키보드
- autoplay
- 하우징 도색
- 네트워크
- 개발일지
- 마크다운
- AWS
- 회고록
- 프로젝트
- 토이프로젝트
- 키크론 v10
- 웹퍼블리셔
- 리덕스
- storybook
- DevOps
- 삽질방시
- 보안
- 강의후기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |