반응형 [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. 리액트를 왜 쓰는 걸까? 자바스크립트도 아직 친해지지 못했는데 리액트란 녀석이 눈에 띄기 시작했습니다. 프론트 엔드 3대장 중 가장 인기있고 기업에서 요구하는 스택이기도 합니다. 여러 비교 영상이나 글도 굉장히 많아서 3대장을 쉽게 비교해 볼 수 있었고 결국 리액트로 결정했습니다. 제 개인적인 생각은 무겁고 배우는데 오래걸리는 앵귤러, 배우기는 쉽지만 개인 프로젝트에 적합한 뷰의 절충선이 리액트가 아닌가 싶습니다. 또한 리액트 웹사이트 설명이 굉장히 잘 되어있고 친절합니다. 하지만 결국 이것도 개인적인 생각이고 도구일 뿐입니다. 저희는 사용 방법을 익히고 본인에게 맞는 도구를 사용하면 됩니다. 페이스북은 왜 리액트를 만들었을까? 페이스북은 아마 단일 웹 사이트 중에서 가장 규모가 큰 웹 사이트가 아닐까 싶습니다. 게다가 사용자와.. 2020. 11. 5. 이전 1 2 3 다음 반응형
