리액트 재활(?)중... 리액트 기본 개념 정리 JSX, State, Props, Class Component Class Component로 간단한 Habit Tracker 제작해봄 JSX 문법 태그를 열면 닫아야 한다. 최사위 태그는 반드시 하나의 태그로 감싸져 있어야 한다. return 뒤 괄호는 필수가 아니지만 가독성을 위해 작성 JSX 안에서 javascript 사용 하는 방법 : {}로 감싸준다. 스타일과 클래스명 넣는 방법 스타일 : 객체를 만들어서 넣어야 함. (속성은 카멜케이스 방식), style속성 안에 객체를 넣는다. 클래스명 : class가 아닌 className 속성으로 넣는다. 주석 쓰는 방법 : 중괄호로 감싸서 js구문을 쓰게 만든 후 /* */와 같은 식 혹은 태그 사이에 한줄..
예정된 시행착오가 기다리고 있는 토이 프로젝트 개발일지 이번에 2019년도에 제작해서 배포했던 토이프로젝트를 개편하려고 한다. 기존 프로젝트는 무엇인지? TRPG라고 하면 보통은 그게 뭔지 모르므로 보드게임이라고 칭하겠다. 보드게임을 온라인에서 플레이할 때 사용할 수 있는 이미지를 제작해주는 사이트였다. HTML, CSS, JavaScript(JQuery)로만 만들었고, 기능은 썩 대단한 것은 없지만 SNS에서 1000회가량 공유되었다. 해당 프로젝트에는 대략 아래와 같은 기능이 있다. 1단계인 텍스트 정보를 입력한다. 2단계인 이미지 편집 버튼을 누른다. 배경 이미지는 직접 업로드하거나 검색해서 찾을 수 있다. 색상, 폰트를 골라셔 좀 더 이미지를 꾸민다. 다운로드 버튼을 눌러서 이미지 저장! 위 기능..
1. 수강 목적 웹 퍼블리셔로 2년간 근무했었고, 현재 프론트엔드 개발자로 이직 준비중으로 자바스크립트와 리액트를 공부하고 있다. 현재 공부하는 것만으로도 벅차긴 하지만 언제나 파이썬이나 Go와 같은 다른 언어를 배워보고 싶다는 욕심은 있던 차에 이전 회사에서 알게된 동생에게 추석동안 이런 무료강의가 있다는 것을 전해듣고 곧바로 수강신청했다. 수강 목적도 거창한 것 없이, 자바스크립트 외의 다른 언어도 경험해보고 싶다는 것이 전부였다. 2. 배운 점/ 잘한 점 새로운 언어를 배운다는 기대감도 있었지만 부담감도 있었는데, 생각보다 너무 쉽고 재밌었다. 그 이유는 적은 이론 공부를 하고 바로 활용할 수 있는 수업 구성 때문이었다. 스크래핑, 크롤링, 데이터 클렌징 같은 생소한 것들이 어떤식으로 진행되는지 쉽..
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
- 보안
- 타입스크립트
- 네트워크
- 회고록
- storybook
- autoplay
- TIL
- 하우징 도색
- 팁
- 프로젝트
- DevOps
- 웹퍼블리셔
- 삽질방지
- 앨리스배열
- 키보드
- 강의후기
- 취미
- 마크다운
- 개발일지
- 리덕스
- AWS
- 키크론 v10
- 토이프로젝트
- 정규표현식
- 리액트
- 삽질방시
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |