PRDEN

1. useRef https://www.daleseo.com/react-refs/ [React] ref로 HTML 엘리먼트에 접근/제어하기 Engineering Blog by Dale Seo www.daleseo.com 함수 컴포넌트는 인스턴스가 없어서 ref attribute를 사용할 수 없다. forwardRef를 사용하면 부모 컴포넌트로부터 하위 컴포넌트로 ref를 전달할 수 있는데요, 이렇게 전달받은 ref를 HTML 요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다. 2. forwardRef (useRef와 차이 보여줌) https://merrily-code.tistory.com/121 forwardRef로 함수 컴포넌트의 ref 전달하기 토스의 첫 개발 컨퍼런스,..

1.React의 Router 1) useNavigate() 히스토리 남기지 않고 싶으면 replace: true import {useNavigate} from 'react-router-dom'; export default function App() { const navigate = useNavigate(); const handleClick = () => { // 👇️ replace set to true navigate('/about', {replace: true}); }; return ( Navigate to About ); } 2) 특정 페이지 접근 제한 (Vue와 다르게 Navigation guard 없음) https://www.robinwieruch.de/react-router-private-rou..

1. React.Fragment 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. class Columns extends React.Component { render() { return ( Hello World ); } } 1) short syntax ->빈태그 적어준다. class Columns extends React.Component { render() { return ( Hello World ); } } yarn add sass classnames react-icons (sass, 조건부 스타일링 위한 classnames, 아이콘) 2. Re..

1. 네비게이션 가드란? 뷰 라우터로 특정 URL에 접근할 때 해당 URL에 접근을 막는 방법을 말한다. 예를 들어 로그인 인증정보 없을 때 로그인 페이지로 돌아가게 하는 것 2. 네비게이션 가드의 종류 (전역가드, 라우터가드, 컴포넌트 가드) 1) 애플리케이션 전역에서 동작하는 전역 가드 var router = new VueRouter(); router.beforeEach(function (to, from, next) { // to : 이동할 url // from : 현재 url // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수 }); router.beforeEach()를 호출하고 나면 모든 라우팅이 대기상태가 된다. 원래 url이 변하면 해당 url에 따른 화면으로 자연..

1. 인터넷과 웹의 관계 : 파이어폭스, 엣지, 크롬 등 은 문서를 전달하기 위한 프로그램 (http를 통해) Hyperlink , Hybertext Mosaic 브라우져 : 최초의 브라우저이다. -> Mosaic 이용해서 인터넷 익스플로러로 개발했다. 2. MarkUp() DOCTYPE쓰는 이유 : 똑같은 태그를 이용해서 html문서 만들어도 브라우저가 달라지면 결과가 달라지게 되어서 각각의 브라우저들이 공통으로 표준화된 방식 만듬 - 이걸 쓰면 표준화된 방식으로 모든 브라우저에서 렌더링 됨 body와 head의 차이 head와 body 순서 변경되면 안된다. HTML TAG 집합 ####################################################################..

1. BEM 네이밍 : Block(블록), Element(요소), Modifier(수정자)를 기준으로 작성한다. BEM의 가장 큰 특징은 ID를 절대 사용하지 않는다는 것이다. BEM의 장점은 목적과 기능을 명확히 전달하며 요소의 구조를 효율적으로 전달한다. 1) Block (블록) block(블록)은 페이지 전체 Element(요소)를 의미하거나 하위 Element(요소)를 감싸는 컨테이너를 의미한다. 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다. Naming 문자, 숫자, 대시(-)로 구성될 수 있다. ex) ... 2) Element (요소) 블록의 하위 요소이다. 모든 요소는 상위 블록과 연결된다. Naming 문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다. 블록이름__요소..

1. 변수(var, let, const) var 1) 한 번 선언된 변수를 다시 선언할 수 있다. 2) 선언하기 전에 사용할 수 있다.(hoisting, 호이스팅), 선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다. 아래 예시 // 호이스팅 관련해서 - 호이스팅 기능이 있기 때문에 변수를 선언하기 전에 사용해도 오류가 생기지 않는다. undefined만 뜰뿐(let, const는 이렇게 undefined도 안 나오고 오류 뜬다) -------------------------------------------------------------------------------------------------------------------------- console.log(name); //undefined ..

"Reducer를 통해 상태 값 업데이트 && context를 통해 가져오기" 1. Context API 리액트의 Context API 를 사용하면, 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있다. 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다. 2. context 만든는 법 createContext의 파라미터에는 Context의 기본값을 설정할 수 있다. const UserDispatch = React.createContext(null); Context 를 만들면, Context 안에 Provider 라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context 의 값을 정할 수 있다. ... Provider에 의해 감싸진 컴포넌트..

FCM이란? FCM(Firebase Cloud Messaging)이란 메세지를 안정적으로 클라이언트 인스턴스에게 전송할 수 있는 교차 플랫폼 메시징 솔루션이다. 애플리이션 서버에서 직접 전송되는 것이 아닌, FCM backend를 거쳐 클라이언트에 전송됨. 이렇게 FCM backend를 중간에 두는 이유는? 1. 교차 플랫폼 메시징 서비스이기 때문에 메세징을 클라이언트의 플랫폼(Web, IOS, Android) 환경 별로 개발할 필요가 없어지므로 플랫폼에 종속되지 않고 메세지를 전송할 수 있다. 2. 만약 클라우드 메세징 서버가 없이 애플리케이션 서버 -> 클라이언트로 메세지를 전송하는 구현에서 클라이언트가 계속해서 서버에 접속해 있어야 하기 때문에 발생하는 디바이스의 전력 사용과 네트워크 효율 문제를 ..

과정 1. Action (액션) 객체가 dispatch 메소드에 전달 2. dispatch를 통해 Reducer 호출 3. Reducer는 새로운 Store를 생성 (Store는 하나의 리듀서만 관리할 수 있지만 리듀서를 여러개 나눠서 하나로 합칠 수는 있다) // reducers 폴더 안에 reducers.js => 모든 리듀서를 합쳐준다. Cotext API Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 방식이 유사하다. 단순히 글로벌 상태 관리를 위한 것이라면 Context API를 활용하는 것 만으로 충분하다. https://react.vlpt.us/redux/ 6장. 리덕스 · GitBook 이번 챕터에서 알아볼 주제는 리덕스(Re..