반응형 [React.js] 엘리먼트(Element)와 컴포넌트(Component) 엘리먼트(Element) 전 React 엘리먼트를 영화의 프레임으로 생각합니다. React 엘리먼트는 매 순간 어떻게 보여야 되는지 파악하고 변하지 않습니다. - overreacted React 앱의 화면을 표시하는 가장 작은 구성 요소로써 일반 객체(plain object)이다. 영속성을 가지지 않는다. 즉 매번 새로 만들어지고 버려진다. 불변함을 가지기 때문에 생성한 이후 해당 엘리먼트의 자식이나 props을 변경할 수 없다. 따라서 다른 렌더링을 보여주고 싶다면 새로운 엘리먼트 트리를 생성해야 한다. React 엘리먼트는 화면에 무엇을 그리고 싶은지에 대한 정보가 들어있는 객체와 같다. React.createElement( type, [props], [...children] ) type 인자로는 태.. 2021. 7. 17. [React.js] JSX와 XSS(Cross Site Scripting) 공격 JSX 마크업과 UI 로직을 둘 다 포함하여 개발을 할 수 있다. 익숙한 문법으로 협업에 용이하다. 컴포넌트별로 분류하여 유지보수를 쉽게 할 수 있다. 속성 정의는 따옴표('')를 이용해 문자열 리터럴이나 중괄호({})로 JS 표현식(문법, 변수 등)을 삽입할 수 있다. HTML보다는 JS에 가깝기 때문에, 클래스 명명은 camelCase 명명 규칙을 사용한다. React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프한다. 따라서 앱에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 내용을 렌더링 되기 전에 문자열로 변환한다. 이런 특성들로 인해 XSS(Cross Site Scripting) 공격을 방지할 수 있다. 이스케이프(Escape) 특정 문자를 원래의 기능에서 벗어나게 변.. 2021. 7. 14. [React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver) 프로젝트를 진행하면서 컴포넌트를 이미지로 저장하는 기능을 추가하고 싶어서 관련 자료를 찾기 시작했다. 처음엔 html2canvas와 jspdf로 기능을 구현하려고 구글링을 하다 dom-to-image, FileSaver 라이브러리를 알게 되었고 이 조합 코드가 좀 더 직관적이고 사용법이 좋은 것 같아서 결정하게 되었다.(그리고 좀 더 기능 구현 목적에 알맞다.) dom-to-image와 FileSaver 설치 npm install dom-to-image npm install file-saver --save 또는 yarn add dom-to-image yarn add file-saver 기능 구현 각 컴포넌트에 다운로드 버튼이 있고 버튼을 클릭하면 해당 컴포넌트를 PNG 이미지로 저장하도록 구현한다. im.. 2021. 7. 7. [React.js] 유튜브를 만들어 보자 리액트로 만든 BYTube 🧑🏻💻 👉 BYtube 사용한 기술들 🛠 React.js JavaScript HTML CSS Node.js Yarn PostCSS Postman Netlify BYTube 프로젝트는 💭 함수형 컴포넌트 사용 Hooks를 통해 렌더링 최적화, 동적인 페이지 구현 유튜브의 search, videos, channels API 사용 Postman을 통해 API 통신 테스트 및 fetch 코드 활용 API를 불러오는 통신(service)과 View 컴포넌트 분리 API Key를 숨기기 위해 .env 파일 사용 PostCSS로 CSS 스타일링 모듈화 링크 공유 시 지인을 안심 시키기 위한 썸네일 추가 검색 기능 PC 화면에 최적화 프로젝트를 진행하면서 배운 것들 💡 1. View 컴포넌.. 2021. 4. 30. [React.js] 유튜브 API로 인기 동영상 리스트 뽑기 리액트로 유튜브 클론 프로젝트를 진행 중이다. 유튜브 API는 문서화가 엄청 잘 되어 있어서(테스트도 가능하다) 쉽게 할 수 있을 줄 알았는데 생각보다 안보이는 벽이 많았다. API 사용이 처음은 아니지만 Web API인 Fetch API는 처음 사용해봐서 정말 많이 헤맸다. 결국 강의를 통해 해결했고 이를 정리해봤다. 이번에도 개인 키가 필요하다. API 사용에는 항상 개인 키를 발급해야 되나 보다. 몇몇 보안이 강한 OPEN API는 다이렉트로 받아올 경우 서버 자체에서 거부하기 때문에 나도 겪어본 CORS 에러가 발생하는데 이 경우엔 우회하거나 자체적으로 프론트용 서버를 만들어서 해당 서버에서 받아와야 한다고 한다. 다행히 유튜브 API는 그럴 필요가 없다. 유튜브 API에 들어가서 하라는대로 단계.. 2021. 4. 8. [React.js] 프로젝트를 하며 배운 것들 습관 만들기 😤 결과물을 확인해보세요. 🧑🏻💻 그래서 제가 배운 것은요...🏃🏻♂️ 1. JSX 왜 써? JavaScript와 UI 개발(HTML)을 한 곳(컴포넌트)에서 프로그래밍 할 수 있다. HTML과 비슷한 문법, 협업에 용이 컴포넌트별로 분류하여 유지보수가 쉬움 2. State 컴포넌트 안에서 정의한 state 오브젝트(데이터를 관리하는 저장소라고 생각한다) state는 얕은 비교를 한다. 최상위 오브젝트의 참조값이 변하지 않으면 render 함수를 호출하지 않는다. setState 함수를 이용해서 새로운 상태의 오브젝트(업데이트 하고자 하는 상태 데이터)를 인자로 전달해 주어야 한다. setState 함수는 비동기 API이다. state 안의 데이터를 직접 수정하지 마! setState 함.. 2021. 4. 4. [React.js] PostCSS 기초 PostCSS CSS 전처리기? 전처리기만의 고유한 문법을 통해 작성을 하면 순수 CSS로 변환을 해주는 프로그램이다. 순수 CSS에서 지원하지 않는 특징이 추가된다. 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 기타 등등 이러한 문법은 가독성을 좋게하고 유지보수가 쉬워진다. 대표적인 전처리기 프로그램은 다음과 같다. [PostCSS](https://postcss.org/) [Stylus](https://stylus-lang.com/) [SASS](https://sass-lang.com/) [LESS](http://lesscss.org/) 근데 그중에 왜 PostCSS를 쓸까? SASS나 LESS같은 경우 주어진 문법과 특징에 한.. 2021. 4. 4. 이전 1 2 다음 반응형
