📚 Study

[HTML] <img>요소와 JPEG, PNG, GIF의 차이

index.html에 blog.jpeg 이미지를 표시하기 위해서는 이 이미지의 위치를 index.html로부터의 상대경로로 표시해주어야합니다. ​ 만약 해당 이미지가 서버에 올려져있다면 "http://~~~/images/blog.jpeg" 처럼 url로 절대경로를 표시해줘도 됩니다. ​ 상대경로로 표시해보겠습니다. ​ ​ ​ ​ 위의 img 요소를 해석하면 다음과 같습니다. images폴더안에 있는 blog.jpeg 이미지를 보여줘라. ​ ​ 이미지를 표시할때 사용하는 요소는 인라인 요소이기때문에 혼자서 쓰면 안됩니다. 또한 컨텐츠가 필요없는 빈 요소입니다. ​ 다른 소스들까지 함께 입력을 하자면 다음과 같이 입력되어야합니다. 인라인 요소이기때문에 자립할 수 없기때문에 p태그 안으로 들어가 있습니다. 또..

[React JS][니코코딩] Effects

6.0 Introduction React로 작업할 때 마지막으로 가장 중요한 걸 공부할 거다. 문제를 하나 정의 할 거다. 우리는 계속 state를 change해 왔고, 그럴 때 마다 이 모든 것이 다시 실행되는 것에 익숙 했다. 문제 component 처음 render될 때만 코드가 실행되길 원할 수 있다. 지금은 내 state가 변할 때마다 매번 이 console.log가 실행될 거다. 가끔은 첫번째로 render할 때만 코드를 실행하고 싶을 수도 있다. 첫번째 render에만 코드가 실행되고, 다른 state변화에는 실행되지 않도록 하는 거다. 우리는 어떻게 특정 코드들이 첫번째 componet render에서만 실행되게 하는지 배우고 싶다. 처음 한번만 나중에 state가 변화해도, 그 코드는 다..

[React JS][니코코딩] Create react App

# 5.0 Intruduction create-react-app은 리액트 어플리케이션을 만드는 최고의 방식이다. 이전에 만든 리액트 어플리케이션은 스크립트를 import함으로써 만들어 졌다. create-react-app을 사용한다면 , ReactJS 어플리케이션을 만듦에 있어 훨씬 쉬워질 거다. 이유는 create-react-app은 엄청나게 많은 스크립트들과 많은 사전설정들을 우리를 위해서 준비해주기 때문이다. 예를 들면, 우리가 create-react-app을 이용해서 작업을 할 때, 즉 create-react- app을 사용해서 어플리케이션을 만들면 개발 서버에 접근한다든가, 자동으로 새로고침을 시켜준다던든가 즉각적으로 어플리케이션 안에 CSS를 포함시켜 준다든가 하는 기능들이 있다. create..

[React JS][니코 코딩] Props

4.0 Props 무엇이 컴포넌트가 돼야 하는지, header가 컴포넌트가 되어야 하는지 알게 될거다. footer가 컴포넌트가 되어야 하는지, notificaion bar가 컴포넌트가 되어야 하는지 이 각각의 로직들을 각각의 조각들로 분리시켜서, 다른 자식 컴포넌트를 Rendering 하는 큰 부모 컴포넌트를 가질 수 있다. Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 우리가 할 것은, 한 예시를 만들거다. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 거다. Props를 이해하기 위해서, 그리고 진정으로 이게 왜 필요한지를 보기 위해 Props로 해결이 가능하게 될 문제들을 일단 먼저 겪어봐야 한다. 가정(우리가 회사에서 어플리케이션을 만..

[React JS][니코 코딩] STATE

3.0 Understanding State state는 기본적으로 데이터가 저장되는 곳이다. 바닐라 JS로 예제를 완성시키려면 counter를 증가시키고 그걸UI에 디스플레이 하고 있다. 그걸 state로 만들 수 있다. counter말이다. 어떻게 하면 React.js어플에 값이 바뀔 데이터를 담아줄수 있을까. 이제 React.js 코드 내에서 카운트를 셀 수 있게 만들어 보자. 두가지 방식이 있다 좋지않은 방식과 다른하나는 우리가 해야할 최고의 방식이다. 먼저 별로 좋지 않은 방식으로 해보고 우리한테 어떤게 필요하고, 어떤걸 해야되는지 이해하고 나서 프로페셔널한 React.js 방식을 보여준다. 그러면 왜 그런방식으로 하는 건지 이해할 수 있을거다. let counter= 0 ; 이런 변수들을 JSX..

check box setting

Color, select , select option 해석

Color Setting

Font CSS 해석

[React JS][니코 코딩] THE BASICS OF REACT

2.0 Introduction 바닐라 JS 코드와 React JS 코드를 비교해볼 거다. React JS 는 UI를 interactive하게 만들어줌 화면에 버튼 하나와 텍스트 하나만 있을거다. 화면의 텍스트를 업데이트하고 싶다. 클릭할 때마다 화면의 텍스트를 업데이트해서 한번 두번 몇번이든 클릭 되었다고 나온다. 버튼을 만들고(HTML) 이 버튼을 HTML에서 찾아야 하니까 id나 class를 주어야 된다. Javascript에서 그 버튼을 찾아야 한다. 그래서 document.getElementById나 querySelector 등을 사용해야 한다. 그다음으로 button.addEventLister를 하고 function을 실행해야 할거다. React JS 팀은 이걸 안다. 버튼을 생성하는데 무엇이 ..

[React JS]Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이 페이지에서는 컴포넌트의 개념을 소개합니다. 자세한 컴포넌트 API 레퍼런스는 여기에서 확인할 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) ..