Jay

JSX에서 CSS스타일과 class를 사용하는 방법에 대해서 알아보자. 기본에 일반 html을 입력할 때는 문자열로 넣어주게 된다. 밑에는 class를 넣어주고 css를 통해 선언해서 색상은 초록색인 class를 적용해 주었다. BLUE GREEN .green { background: green; padding: 1rem; color: white; } 리액트에서는 어떻게 다를까? 일단은 스타일을 사용할 때 객체형태로 넣어준다. 그리고 Camelcase를 사용한다. 즉 새로운 단어가 시작될 때마다 대문자를 사용하는 것이다. 그리고 자바스크립트 상으로 스타일을 입력하는 거라서 js코드를 입력해도 된다. 아래 코드를 보자. import React, { Component } from 'react'; class ..

JSX에 문법에 대해서 알아보자. JSX는 Html같지만 JavaScript로 변환이 된다. 리액트 컴포넌트를 사용할 때 사용하는 문법이다. Html이랑 비슷하지만 지겨야 할 규칙이 몇 가지가 있다. 살펴보자. 첫번째 태그는 꼭 닫혀 있어야 한다. 즉 div태그 열었으면 /div 닫아줘야 한다는 것이다. 아래와 같이 코드를 작성하면 오류가 난다. import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } 아래와 같이 input text 뒤에 /를 붙엿 작성하게 되면 오류가 나지 않는다. 언제나 꼭 닫아줘야 한다. 즉 self closing tag를 통해서 한번 연 태그를 그자리에서 닫는다..

Webpack은 code들을 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어 낸다. 프로젝트를 만들 때 파일 하나하나 만든 것들을 일일히 html상에서 불러오는 것이 아니라, 예를 들어 js파일에서 png를 사용하겠다 그러면 import라는 구문으로 불러올 수가 있는데, 그렇게 하면 bundling작업을 하게될 때 특정 확장자마다 어떤 처리작업을 하도록 준비를 해주는 것이다. 예를 들어 아래그림 과정에서 이미지들을 압축하고 결과물로는 특정 경로에 특정이름으로 따로 저장해놓게끔 해줄 수가 있다. 아까 js파일에서 import한다고 했는데 js에서 png를 불러올려고 하면 나중에 빌드 되었을 때 사용될 경로가 문자열로 들어오게 된다. 예를 들어서 js의 png를 불러왔다 그러면 불러온 것..

페이스북이 리액트를 만들기 전에도 앵귤러 백본 엠버 등 수 많은 프레임워크들이 존재했고 해당 프레임워크들은 데이터파트를 담당하는 model, 화면을 보여주게 되는 view, 사용자가 발생시키는 이벤트를 관리하는 controller로 이루어진 MVC 패턴, 그리고 거기서 부터 파생된 MVVM, MVW 등이 패턴들로 이루어져 있다. (MVC, MVVM, MVW 등을 사용하던 기존 웹 프레임워크 / 라이브러리) 여기서 공통점은 바로 Model이다. 방금 언급했던 프레임워크들의 모델은 양방향 바인딩이라는 것을 통해서 모델의 있는 값이 변하는 뷰에서도 값을 변화시켜주고 뷰에서 어떤 값을 변화시키려고 하면 모델의 있는 값을 변화시켜주고 이러한 것을 양방향 바인딩이라고 부른다. 변화라는 키워드는(Mutation) 상..

요즘 웹은 웹페이지가 아니라 웹 어플리케이션이다. 브라우저 상으로도 많은 흐름으로 매우 빠르게 많은 것들을 할 수가 있다. 어떠한 유저인터페이스를 동적으로 나타내기 위해서는 수많은 상태들을 관리해줘야 한다. 밑에 코드와 같이 버튼을 눌러서 숫자 0값을 바꿔줄려면 각 DOM Element에 대한 레퍼런스를 찾고 해당 DOM에 접근하여 원하는 작업을 해야한다. Counter 0 이렇게 한다. 아까전에 봤던 id값 number를 찾아와서 가져왔고 button도 increase값 찾아와서 가져왔다. 이벤트설정하고(onclick) 업데이트하고(elNumber.innerText = number) 여기서는 예시로 var를 쓰지만 이제는 머릿속에서 지우자 var number = 0; var elNumber = docu..

작업하고 있는 사이트에서 개발자도구를 연다. 컴포넌트를 선택한다. 눈모양을 선택하면 다음 해당하는 DOM요소로 이동한다. 대략적으로 확인한 다음에 계획하고 검증단계를 거친 후에 코드로 작성한다. app.module.css에서 코드를 아래와 같이 작성한다. max width를 보통 780으로 잡는 780을 16으로 나누면 48rem이다.(왜 16으로 나누는지 고민) 미디어쿼리일때는 content를 이미 display가 flex로 되어 있으니까 flex-direction을 column으로 주면 된다. @media screen and (max-width: 48rem) { .content { flex-direction: column; } } 참고: https://academy.dream-coding.com/co..

브라우저 상에서 fetch라는 웹 API 중에 하나인 것을 사용하면 간단하게 네트워크 통신을 할 수가 있다. 긴 URL을 query params를 섞어서 하고 또 받은 response를 JSON으로 변환하는 것들을 일일이 했어야 했다. Axios에 대해서 살펴보자. cmder창에서 추가할려고 하는 패키지를 쓴다. 라이브러리를 추가하고 VScode에서 확인하면 package.json파일에 axios 라이브러리가 추가된 것를 볼 수 있다. yarn add axios "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10",..

video_detail.jsx에 가서 iframe을 쓸 때 frameborder가 아니라 frameBorder로 바꿔 써준다. allowFullScreen도 마찬가지로 allowFullScreen으로 바꿔써준다. app에서 작성한다. 컴포넌트가 마운트 되었을 때만 쓰고 싶다하자. props이 바껴도 업데이트 돼야 될 이유가 없는데, 만약에 제공되는 유튜브 클라이언트가 바뀐다면 클라이언트가 바뀐다면 새로운 데이터를 받아 오고 싶을 수도 있다. 그래서 아래와 같이 app.jsx에 youtube를 전달해 줘도 된다. useEffect(() => { youtube .mostPopular() // .then(videos => setVideos(videos)); }, [youtube]); 디테일에서는 유니크한 타이..

비디오를 선택하게 되면 선택되는 비디오를 기억했다가, 선택된 비디오에 관련된 정보를 보여주는 것을 구현한다. 선택된 비디오가 없는 null인 상태이고 이제 detail 컴포넌트를 만들어서 선택된 정보를 넘기는 걸 해본다. app.jsx 코드에서 아래와 같이 추가한다. 선택된 것이 있으면 video 옆에다가 보여주게 해준다. function App({ youtube }) { const [videos, setVideos] = useState([]); const [selectedVideo, setSelectedVideo] = useState(null); const search = query => { youtube .search(query) // .then(videos => setVideos(videos)); ..

MVC(model view control)라는 어플리케이션을 만들 때 쓸 수 있는 디자인 패턴이 있다. 어플리케이션을 모델과 뷰와 컨트롤러로 나누어서 만들 수 있는 것이다. MVVM도 있고 안드로이드에서는 MVVM을 많이 쓰고 있다. MVI도 있고 MVP도 있고 다양한 디자인 패턴이 있다. 리액트는 뷰 레이어를 담당하고 뷰 레이어를 담당하는 것은 단순히 사용자에게 데이터를 보여주고 클릭이 되면 클릭 이벤트 자체를 처리해주는 뷰에 관련된 것만 말하는 것이고, 컴포넌트가 네트워크 통신도 할 수 있고, 비즈니스 로직도 처리할 수 있고, 모든 걸 다할 수 있는 걸로 뷰를 만들면 안된다. 본론으로 들어가서 지금까지 만든 app 컴포넌트의 문제점은 무엇일까? 컴포넌트에는 두 가지 문제를 꼽을 수가 있는데 코드안에 ..