본문 바로가기

분류 전체보기

 (231)
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} 으로 호출하여 사용한다.
boilerplate code 란? boilerplate code github에 오픈소스를 검색하다보면 boilerplate라는 용어를 많이 접할 수 있다. boilerplate란 표준 문안이라는 뜻의 단어로 프로그래밍에서의 boilerplate code는 위키피디아의 설명을 보면 - 최소한의 변경으로 재사용할 수 있는 것 - 적은 수정만으로 여러 곳에 활용 가능한 코드, 문구 - 각종 문서에서 반복적으로 인용되는 문서의 한 부분 라고 설명되어있다. javaScript나 html에서의 보일러플레이트라고 하면 보통 크로스 브라우징과 호환성을 위한 Modernizr, polyfill, Normalize 등이 적용되어 있는 템플릿 같은 형태로 많이 사용된다.(어떻게보면 seed project와 비슷하다.) 반복되지만 자주쓰이는 형태를 자동화한다..
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:..
Why Don't We - Hooked https://youtu.be/JAkdInRrJo8

티스토리툴바