의미 있는 삶을 위하여 :) 의미 있는 삶을 위하여 :)

전체 글

• [REACT_MEMO] 파워노트4

  IT/REACT 2024. 5. 21. 00:16

  # Rendering Elements리액트의 엘리먼트 = 리액트를 구성하는 요소 엘리먼트는 요소, 성분을 의미즉 어떤 물체를 구성하는 성분 Elements are the smallest building blocks of React apps.= 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라 한다. 기존에 엘리먼트라고 하면돔 엘리먼트를 지칭했다. # 리액트 엘리먼트와 돔엘리먼트의 차이리액트가 개발되던 아주 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했다.처음에는 Descriptor로 불렸지만, 최종적으로 나타나는 형태는 돔엘리먼트 였기 때문에 돔과의 통일성을 위해서 엘리먼트로 부르는 것으로 변경되었다. 즉 리액트 엘리먼트는 돔 엘리먼트의 가상표현이라 볼 수 있다.그리..

  Read More
• [REACT_MEMO] 파워노트3

  IT/REACT 2024. 5. 18. 01:45

  # JSX리액트를 사용하고 개발할 때 필수로 사용하는 것 # JSX의 개념리액트의 공식명칭은 리액트 JSJSX는 A syntax extension to Java Script(JavaScript의 확장 문법)JSX는 JS와 연관 있음JSX는 Java Script + XML/HTML 합친 것 // JSX 코드 const element = h1>Hello, worldh1>;  # JSX의 역할내부적으로 XML/ HTML 코드를 JavaScript로 변환하는 과정을 거친다.최종적으로는 자바스크립트 코드로 나오는 것. // JSX를 사용한 코드 class Hello extends React.Component{    render(){          return div>Hello {this.props.toWhat}..

  Read More
• [REACT_MEMO] 파워노트2

  IT/REACT 2024. 5. 17. 00:15

  # 실습해 보기1. html로 작업하는 방법html, css, js 파일을 각각 생성하고 내용을 채워준다.리액트는 html파일에서 가져올 수 있도록 작성해준다.  최초의 랜더링된 모습!여기서 버튼(Click here!)를 클릭하면 버튼의 텍스트가 변환한다. 오올   2. create-react-app(cra)Node.js v14.0.0 이상npm v6.14.0 이상VS Code npx-execute npm package binariescreate-react-app은 npx명령어로 실행 가능하다.npx는 npm package를 설치한 이후에 곧바로 실행(execute)까지 해주는 명령어이다. 패키지를 정해진 위치에 설치하고 찾아서 실행하면 번거롭기 때문에 간편하게 만든 것새로운 애플리케이션을 만들기 위해선..

  Read More
• [REACT_MEMO] 파워노트1

  IT/REACT 2024. 5. 12. 23:04

  정의에 대해서 잘 알고 배우는 것이 매우 중요. # 리액트?리액트 공식 웹사이트에서는사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 소개함 # 라이브러리?- 자주 사용되는 기능을 모아 준 것 # 사용자 인터페이스(User Interface, UI)- 웹을 예로 들면 웹사이트에서 버튼을 누름으로써 반응하고, 웹사이트에서 특정한 페이지를 보여주며 사용자가 반응하는 것을 일이 키는 걸 말함 # UI라이브러리- 화면을 만들기 위한 기능 모음집 # 대표적인 UI 라이브러리[프레임워크] ANGULAR JS - 자바스크립트 기반 웹개발 프레임워크- 구글에서 제작한 오픈소스 프로젝트- 2010년에 첫 출시,   2018년 롱텀 서포트 라 불리는 단기간에 버전 업데이트를 하지 않고 안정적인 버전을 장기간 유지..

  Read More
• [HTML] Tag : img, figure, picture

  IT/HTML 2024. 4. 19. 16:32

  문득, 내가 태그를 잘 사용하고 있는가 라는 생각이 자주 든다. 처음 일을 시작할 때는 일단 만들기 급급해서 의미가 무엇인지, 왜 써야 하는지도 모르고 정말 주먹구구식으로 태그를 썼고, 이제야 반성한다.(사실 반성은 맨날 함) # 목차 오늘의 태그 그리고 회고(?) 태그별 구성 a. 'img' 태그 b. 'figure' 태그 c. 'picture' 태그 태그별 차이 태그의 사용 a. 'img' 태그 b. 'figure' 태그 c. 'picture' 태그 마무리 # 오늘의 태그 그리고 회고(?) 언제 써야 하지 하고 자주 고민하는 태그로 이미지의 관련된 태그가 있다. , , 태그별 한 줄 회고(?)를 해보자면 - 주로 'img' 태그를 단독으로 사용했고, - 간혹 'figure' 태그도 사용했지만, 시멘틱..

  Read More