Study/Frontend 9

개념 정리: CSR, SSR, 돔트리, HOC, Hook

CSR: Client Side Rendering- 렌더링이 클라이언트 쪽에서 일어난다.- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. - 클라이언트는 그것을 받아 렌더링을 시작한다. SSR- SEO 최적화- SSR이 서버 자원을 더 많이 사용한다.  돔트리- 왜 hook이 바뀔 때 돔트리가 바뀌는건지 HOC: High Order Component- 컴포넌트 로직 재사용을 위한 패턴- HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.- 함수형 컴포넌트가 등장하고 나서는 거의 사용되지 않는다. 고차 컴포넌트 지옥에 빠질 수도 있기 때문.- 고차 컴포넌트는 사이드 이펙트가 전혀 없는 ..

Study/Frontend 2023.07.25

[React] 실전형 React Hooks 10개

https://academy.nomadcoders.co/courses/enrolled/546456 실전형 리액트 Hooks[중급] JavaScript, ReactJSacademy.nomadcoders.co  useState, useEffect  npm에는 자신의 use~ 라이브러리를 많이 배포하고수많은 사람들이 자신의 hooks을 공유한다. useTitle: react document의 title을 몇개의 hooks와 함께 바꾸는 것useInput: 그냥 input 역할usePageLeave: 유저가 page를 벗어나는 시점을 발견하고 함수를 실행함useClick: 누군가 element 클릭하는 시점을 발견해useFadeIn: 어떤 element든 상관없이 애니메이션을 element 안으로 서서히 사라..

Study/Frontend 2020.02.05

React Apollo

DaheeSpace - movieql 서버 돌려야 해!    https://academy.nomadcoders.co/courses/enrolled/364948 1. 언제나처럼 깃헙 프로젝트 만들기!https://github.com/daheeahn/apollo-2020 daheeahn/apollo-2020Movie App build with React, Apollo and GraphQL 노마드 코더 아폴로 강의 - daheeahn/apollo-2020github.com2. npm install -g create-react-app // React 위해서 필수인가? react-native 처럼?3. npx create-react-app apollo-20204. src 폴더 안에 있는 것들 중, App.js /..

Study/Frontend 2020.02.05

TDD 개발 방법론

github : https://github.com/daheeahn/TDDRN Test Driven Development불확실성이 높을 때 진행 https://gmlwjd9405.github.io/2018/06/03/agile-tdd.html [Agile] TDD(테스트 주도 개발)란 - Heee's Development BlogStep by step goes a long way.gmlwjd9405.github.io테스트를 많이 하는 개발방법? 그정도의 개념이 아니다.말그대로 테스트가 주도하는 개발.테스트를 먼저 작성하고 테스트가 요구하는 만큼의 개발을 진행. 테스트를 작성하지 않은 부분은 구현하지 않는다! Describe it. = RDD Readme Driven DevMake it fail *** (테..

Study/Frontend 2019.09.14

[React/Inflearn] 리액트 처음이시라구요? React JS로 웹 서비스 만들기!

Introduction to ReactReact는 단방향 데이터플로우를 가지고 있음데이터 -> UI (항상 이 방향)데이터가 변하면 UI가 변함UI에서 데이터를 바꿀 순 없음 리액트 : UI 라이브러리 (프레임워크 X)리액트는 VIEW이기 때문에 파이썬, 루비 등등과 같이 쓸 수 있다 리액트는 view이기 때문에model과 controller랑 섞어 쓸 수 있다 리액트를 장고 루비 노드.js랑 섞어쓸 수 있다 https://yts.lt/api API Documentation - YTS YIFYOfficial YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details.yts.lt에서 영화 api..

Study/Frontend 2019.06.24

[React Native/Inflearn] React Native로 ToDo 앱 만들기

강의마다 commit 해놓음! README.md를 포함한 git repository를 만들고 프로젝트 폴더에서git remote add origin https://github.com/daheeahn/190623_KawaiToDo.git를 해준 후 git pull origin mastergit add .git commit -m "msg"git push origin master 이렇게 하더라! READMD를 프로젝트 폴더에 가져오기 위함!  Coding the UI part 1Android에서는 fontWeight가 안먹는다https://github.com/react-native-training/react-native-fonts react-native-training/react-native-fontsFont..

Study/Frontend 2019.06.24

[React/Inflearn] 생활코딩 React

React : Facebook에서 만든 Javascript UI Library Component : 사용자 정의 태그 1. 가독성2. 재사용성3. 유지보수  https://reactjs.org/docs/create-a-new-react-app.html#create-react-app Create a New React App – ReactA JavaScript library for building user interfacesreactjs.org> npm install -g create-react-app@2.1.8-g : 터미널 어디에서나 사용 가능!맥 : sudo 추가 C:\Users\user\Desktop\dev\expo\myNewProject>create-react-appPlease specify the..

Study/Frontend 2019.06.22
출처: https://mingos-habitat.tistory.com/34 [밍고의서식지:티스토리]