본문 바로가기

Front-end

 (97)
React - Fragment란? Fragment Fragment는 React v16에 추가된 기능 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. class Table extends React.Component { render() { return ( ); } } 렌더링 된 Table 컴포넌트가 유효하려면 가 여러 엘리먼트를 반환해야 한다. div 사용 시 class Columns extends React.Component { render() { return ( Hello World ); } } 그런데 위와 같이 가 를 로 감싸서 반환한다면 실제 dom tree는 아래와 같이 구성..
React - Children 사용하기 React에서 Children은 재사용을 위해서 사용된다 function BookList() { return ( Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nulla quasi obcaecati aperiam quidem molestias ipsum nisi, sunt quia porro. ); } 위 코드에서 사이에 children으로 전달할 입력값이 들어간다 const Book = (props) => { return ( {props.title} {props.author} {props.children} ) } 그리고 Book변수에서 {props.children} 으로 호출하여 사용한다.
npx, npm차이점 설명 최근에 리액트를 배우기 시작했을 때, 나는 많은 사람들이 (나를 포함해서) 잘 알려진 npm대신 npx를 보고 헷갈려하는 것을 보았습니다. 우리중에 몇몇은 이상하다고 느꼈지만 별로 깊게 생각하지 않았고, 나머지는 그것은 오타라고 생각하고 npx대신 npm으로 "고쳐서" 애를 먹었습니다. 이러한 일이 몇 번 일어나고 나서 이 문제를 설명할 필요가 있다고 느꼈습니다. 그것이 바로 나와 같은 오해를 가진 이들을 위해 이 글을 쓴 이유입니다. 오타가 아니고, npx! npm말고.😃 NPM 우리가 매우 잘 알고 있듯이, npm은 Node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다. 우리의 프로젝트에 누군가 패키지 의존성을 설치할 때 짠! 하고npm install을 실행함으로써 package.json파..
React - VScode and Chrome Settings https://github.com/john-smilga/VS-CODE-SETUP john-smilga/VS-CODE-SETUP Contribute to john-smilga/VS-CODE-SETUP development by creating an account on GitHub. github.com settings.json 추가하기 "emmet.includeLanguages": { "javascript": "javascriptreact" },
Udemy강좌 시작 ( React Tutorial and Projects Course ) React Tutorial and Projects Course React에 대한 이해를 높이기 위해 Udemy강좌수강을 시작했다 강의 50시간이라는 것이 압박이긴하지만 가장 높은 평점과 이미 검증된 강의기 때문에 React의 이해도를 높이고 자유자재로 사용하기 위해서는 꼭 수강해야해한다고 생각했다
React Movie App Preview : 사이트 방문 : https://serene-kepler-b3e343.netlify.app/ 개발목표 : 영화 API를 호출해 가장 인기있는 영화를 보여주는 웹사이트를 구현하는것을 목표로 하였습니다. 영화 포스터에 hover하여 간략한 Overview를 볼 수 있습니다. 그리고 평점도 확인할 수 있도록 구현하는것을 목표로 하였습니다. 구현기간 : 2021-06-01 ~ 2021-06-11 Skills : React, HTML, CSS , JavaScript 배포 : Netlify 시연영상 : https://youtu.be/Tn7PxQ3aTns Code : https://github.com/bellcastle88/ReactMoviesApp.git 프로젝트 소감 : 영화 API (https:..
fetch 란? fetch 란? fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다. 기본 구조 fetch(url) .then(res => { console.log(res) }) .catch(error => { console.log(error) }) 기본적인 구조와 동작은 Promise 객체와 동일하다. 파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다. then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 때, 에러를 받는다. 요청 정보 파라미터 fetch..
props란? props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다. 예제를 통하여 이에 대하여 알아보겠습니다. props 추가하기 컴포넌트에서 immutable (변하지 않는) 데이터가 필요 할 땐, render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고, 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" 를 넣어 값을 설정합니다. Header 컴포넌트와 Content 컴포넌트가 props를 사용하도록 업데이트 해보겠습니다. Header.js import React from 'react'; class Header extend..

티스토리툴바