개발해보개

React _ State 공부하기. state란, 컴포넌트 내에서 동적으로 변경되는 값. React Hooks 가 나오기 전, class형 컴포넌트의 상태관리를 위해 this.state를 사용. *props와 state 비교 props는 함수 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내 선언된 변수처럼 컴포넌트 안에서 관리가 된다. 공부내용. https://codesandbox.io/s/clever-waterfall-ulfmc?file=/src/App.js

React 2021. 10. 3. 15:27

React _ Props 공부하기. Props (Properties) : 어떠한 값을 다른 컴포넌트에게 전달해줘야 할 때 사용. 부모컴포넌트 -> 자식컴포넌트 (defaultProps. 컴포넌트에 props를 지정하지 않았을 경우, 기본적으로 사용할 값을 정할 수 있다. ) 공부내용. 1.벨로퍼트의 누구든지 하는 리액트 https://codesandbox.io/s/props-forked-ro67h?file=/src/MyName.js Props (forked) - CodeSandbox Props (forked) by hyonaLee using react, react-dom, react-scripts codesandbox.io 2.벨로퍼트와 함께하는 모던 리액트 App 컴포넌트에서 Hello 컴포넌트를 사용..

React 2021. 10. 3. 14:26

리액트란? '컴포넌트' 기반의 프론트엔드 라이브러리이다. (Component의 이름은 항상 대문자로 시작) JSX라는 문법을 사용한다. Virtual DOM사용 (가상돔) JSX문법이란? (자바스크립트 안에서 HTML문법을 사용하여 View를 구성 할 수 있게 도와주는 자바스크립트 문법) return시 하나의 DOM만 리턴함. (이때 의미없는 div의 남용을 보완하여 Fragment가 나옴.) If문 사용 불가. (삼항연산자로 대체하여 사용 가능) 가상돔이란? (브라우저에 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면, ..

React 2021. 10. 3. 14:22

CSS란? Cascading Style Sheets의 약자로, HTML요소들을 꾸며주는 역할을 하는 스타일 시트 언어이다. 선택자란? CSS를 통하여 HTML요소를 지정하여 꾸밀 수 있는데, HTML요소를 지정하기 위해 우선적으로 선택자에 대한 이해가 필요하다. 전체 선택자 (Universal Selector) :body를 포함한 모든 html요소를 선택합니다. * 로 표시 타입 선택자 (Type Selector) :h1 ,div ,span, p등 html의 일부 요소의 전체를 선택합니다. 태그명으로 표시 아이디 선택자 (ID Selector) : 특정 ID값을 갖은 요소를 선택합니다. #아이디값 으로 표시 클래스 선택자 (Class Selector) : 특정 Class값을 갖은 요소를 선택합니다. .클..

HTML CSS 2021. 7. 18. 11:24

HTML 태그를 알아보자. form요소를 이용하여 데이터 입력받고 전송하기. 사용자로부터 데이터를 입력받고, 서버로 전송할 때 사용하는 태그. form element를 그룹화하는 태그. 그룹화한 form element의 이름을 지정하는 태그. input 양식에 이름 붙이기 * label의 for값과 input의 id값을 통일시키면, 두개가 연계되어 label부분을 클릭해도 input부분이 작동됨. 다양한 input 요소의 type을 알아보자. 텍스트 입력 = text 문장 입력 = textarea 비밀번호 입력 = password 라디오 버튼 = radio 체크박스 = checkbox 파일 선택 = file 버튼 입력 = button 전송 버튼 = submit 이메일 입력 = email 검색어 입력 = ..

HTML CSS 2021. 7. 18. 10:21

HTML 태그를 알아보자. 표만들기. 표 지정 태그 *border을 지정해야 표의 테두리가 보이므로 임의로 지정. 이에 관련해서는 나중에 css에서 공부. 표 제목 태그 표의 머리 태그 열의 제목 태그 행 태그 셀 태그 표의 본문 태그 표의 꼬리 태그 예시 결과 셀을 병합해보자. 세로 병합

HTML CSS 2021. 7. 5. 21:45

HTML 태그를 알아보자. 인용문삽입. 링크걸기. 이미지삽입. 동영상삽입. 인용문 삽입 태그를 사용하여 짧은 인용문(quotation)을 삽입 할 수 있다. 태그는 큰따옴표로 구분되어 나타난다. 태그를 사용하여 긴 인용문(block quatation)을 삽입 할 수 있다. 태그는 별도의 단락으로 구분되어 나타난다. 이미지 삽입 이미지의 크기를 지정하지 않은 경우, 이미지 원본의 크기대로 출력된다. 지정한 경로에서 이미지를 찾을 수 없는 경우 alt에 작성한 내용이 출력된다. 사용방법 링크 걸기 태그에는 target 속성이 있는데, 링크로 연결된 문서를 어디에서 열지 결정한다. 따로 명시하지 않는 경우 기본값으로 설정된다. target 속성 _blank : 링크로 연결된 문서를 새 창으로 열기 (기본값) ..

HTML CSS 2021. 7. 5. 20:52

HTML 태그를 알아보자. 태그를 활용하여 리스트를 만들어보자. 순서가 없는 리스트 (unordered list) 태그를 사용 하여 순서가 없는 리스트를 작성 할 수 있다. 각각의 리스트 요소는 태그를 사용 한다. 과 는 엄마와 자식처럼 따라다닌다. 태그에서는 다음과 같은 CSS 속성을 사용 할 수 있다. -disc : 작은 검정색 원 (기본값) -circle : 작은 흰색 원 -square : 작은 검정색 사각형 순서가 있는 리스트 (ordered list) 태그를 사용 하여 순서가 없는 리스트를 작성 할 수 있다. 각각의 리스트 요소는 태그를 사용 한다. 과 는 엄마와 자식처럼 따라다닌다. 태그에서는 다음과 같은 CSS 속성을 사용 할 수 있다. -decimal : 숫자 (기본값) -upper-alp..

HTML CSS 2021. 7. 4. 22:05