PRDEN

1. 초기 렌더링 속도 개선하기 ( Webpack 번들 크기 줄이기, 코드 스플리팅) https://suspicious-pare-a66702.netlify.app/develop/initialRenderingOnVue/ https://suspicious-pare-a66702.netlify.app/develop/initialrenderingonvue/ 최근 회사의 모바일 어플리케이션을 개발하고 있는 중에 초기 렌더링 속도의 개선에 대해 큰 필요성을 느꼈다. 우리 회사는 Native에서 프론트에 Webview를 요청하면 webpack으로 빌드되어 있는 파일 suspicious-pare-a66702.netlify.app 2. 웹팩 용량 최적화 https://romeoh.tistory.com/367 [Vue + ..

1. Background #product-overview { background: url("freedom.jpg"); // bacgroung-image("freedom.jpg"); 도 똑같다 background-image: url("freedom.jpg"); background-size: 100px; // 반복되게 된다. // background-size:cover 는 100%랑 같다. // 다른 요소 : contain background-position: 20px; // 왼쪽에서 얼마나 떨어지는지 backgroud-repeat: norepeat; background-origin: border-box // 이미지가 border라인에 겹치게// content-box, padding-box backgroun..

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에 의해 감싸진 컴포넌트..