728x90 반응형 TIL149 Create-React-App 에서의 npm run eject CRA 개인 프로젝트를 구현하면서 CRA는 쓰지 않을 이유가 없었다 중요한 라이브러리나 웹팩 설정 없이 명령어 하나로 간편하게 프로젝트를 실행할 수 있기 때문 CRA를 사용하면 필요한 웹팩 / 바벨 / eslint 등 연결에 대해서 신경쓰지 않아도 된다 autoprefixer 를 지원해주어 자동으로 -webkit-, -ms- 를 적용해주기도 한다 (이건 웹팩 설정, 크로스 브라우징 용도) => emotion styled 를 사용하면 알아서 붙기도 함 styled-components는 보통 styled-reset method 로 브라우저의 초기값을 초기화 시킨다. npm run eject 주의할 점 : 한번 eject를 하게 되면 이전 상태로 되돌릴 수 없다 eject는 숨겨져 있던 모든 설정을 모두 볼 .. 2023. 3. 20. react) inline style 단점 react 는 jsx 문법을 사용한다. jsx 는 react.createElement 를 통하여 변환이 되고 모든 속성이 props 객체의 부분이 된다 inline style 카멜케이스로 작성한다. inline style의 단점으론 html 파일 사이즈를 크게 만들어 화면에 웹페이지가 로딩 되는 시간이 따로 걸리고 html, css 코드가 섞이게 되어 유지 보수가 힘들기도 하다(가독성) 하지만 가장 큰 단점은 inline style에서 사용한 {}는 이전 값과 비교했을 때 다른 객체로 인식하기 때문에 (참조하는 주소값이 달라짐) 리렌더링을 일으키게 되는 것이다. 그러니까 한번 돔을 만들어 놓고 또다시 돔을 그린다 => 비효율적 이를 memo를 통하여 메모이제이션 한다는 해결방안도 있지만 css-in-js.. 2023. 3. 20. css-in-js 와 css-in-css html을 꾸며주기 위해 등장한 css 하지만 웹이 복잡해지고 동적 기능 요구가 증가하며 html 과 css 로는 모든 스타일링을 제어하기 어렵게 되었다. 이를 해결하기위해 css-in-css 가 등장했다 css-in-css css 모듈은 css를 모듈화하여 사용하는 방식이다. 고유한 클래스네임을 만들어서 scope를 지역적으로 제한한다 클래스 이름이 중복되어도 새로운 이름이 입혀지기 때문에 중복 위험성이 적다. css 전처리기 자신만의 특별한 구문을 가지고 css를 생성하는 프로그램 공통 요소 또는 반복적인 항목을 함수로 대체할 수 있는 재사용성, 중첩-상속과 같은 요소로 구조화 된 코드를 유지할 수 있다는 장점이 있다. 다만 전처리기를 위한 도구가 필요하고 웹에서 동작 가능한 표준의 css로 다시 컴.. 2023. 3. 20. react 왜 쓰나요 사실 단순 웹사이트를 만드려면 html 과 css js 만으로도 가능하다. 그렇다면 왜 react를 사용할까? 현대 웹은 단순한 페이지가 아닌 웹 애플리케이션이다. 수 많은 상태관리와 DOM요소를 직접 관리하고 코드를 정리하는 일은 매우 번거로운 일이다. 웹 개발을 할 때 DOM(Document Object Modal, html, head, body 같은 태그들을 js가 사용할 수 있는 객체) 관리 상태값 업데이트를 최소화 하며 기능 개발과 사용자 인터페이스를 구현하는 데 집중할 필요가 있었고 이에 react Angular Vue 가 등장하게 되었다 REACT 1. Virtual Dom 의 사용 SPA는 dom의 변경이 있을 때마다 렌더트리를 재생성하고 레이아웃을 만들고 페인팅하는 과정을 반복해야하는데 .. 2023. 3. 16. react) public 폴더 src 폴더 🗂 public 컴파일시 필요하지 않은 것들 절대경로 사용 가능 (import 시 "./파일명" 이렇게 가져올 수 있음) 사용자가 웹브라우저상에서 볼 수 있는 정적파일들 (image) 이 담김 🗂 src 개발하면서 컴포넌트 안에서 쓰이는 파일을 넣음 public 파일 가져올 때 단점 웹팩으로 처리되지 않고 원본이 빌드됨 -> 파일이 경량화 되지 않음 -> 파일 경로 잘못 입력시 컴파일 단계가 아니라 사용자가 접근할 때 404 오류를 받음 const url = process.env.NODE_ENV === 'development' ? `./${domain}/image/img` : 'image/img'; // 보통 이렇게 처리하는 듯 경량화를 위해서라도 src에 이미지 파일 넣는게 맞겠네! ☺️ 판단 후 여러.. 2023. 3. 10. 상태관리 useReducer 간단한 상태일 경우엔 useState만을 쓰는게 간편하지만 관리할 상태가 많고 서로 의존하고 있고 조작할 동작이 여러 개일시 useReducer를 쓴다 상태가 변하는 로직을 reducer에 몰아넣고 상태 간의 관계를 case로 보여주기 때문에 한번에 파악하기 용이하다 예시 기존 코드 import { useState } from 'react'; const Reducer = () => { const [num, setNum] = useState(0); const plus = () => { setNum(prev => prev + 1); }; const minus = () => { setNum(prev => prev - 1); }; return ( {num} 더하기 빼기 ); }; export.. 2023. 3. 6. Node.js ) import/export 사용 기존 commonJs 문법은 require을 사용해 전체 모듈을 불러오고 module.exports 객체에 모듈 전체를 치환하여 내보낸다. 불필요한 모듈이 로드되기도 하고 모듈에서 어떤 부분을 사용했는지도 확인할 수 없다는 단점 그래서 Es6 문법에서는 import / export 방식으로 모듈을 불러오고 내보내는데 userRouter.js import { Router } from 'express'; 요렇게 express 모듈에서 router만 가져오는 형식이다 하지만 node.js 가 모듈 시스템으로 commonJs 를 채택했기 때문에 그냥 사용시 syntax 에러와 함께 import를 읽지 못한다는 문구를 볼 수 있다. import/export 사용시 따로 설정이 필요함! package.json "t.. 2023. 3. 4. 인증 인가 Session vs Token Based Authentication 인증 자격 증명 정보 데이터를 사용하여 누군가 또는 시스템이 실제로 그 누구인지 또는 시스템인지 확인하는 과정 인가 인증 과정을 통해 자격이 증명된 사용자에게 특정 리소스 또는 기능에 대한 액세스 권한을 부여하는 과정 인증의 유형 SFA (단일 요소 인증) -> id, qw 를 요구하는 방식 -> 비밀번호, 아이디만 알아도 보안에 쉽게 문제가 생김 2FA -> SFA에서 로그인 시도시 모바일 기기를 통해 사용자에게 부여하는 고유 코드, 지문 같은 추가적인 인증 요소를 요구해 인증을 강화함 MFA -> 2FA 유형에서 보안을 강화하기 위해 사용자가 직접 답변헤야하는 질문을 자격증명 정보에 추가하여 3개 이상의 요소를 인증에 사용하는 것 웹 환경에서 사용자와 시스템 간에 데이터를 교환하게 위해 http 방식.. 2023. 3. 2. promise - catch / async await (try-catch) ⚠️ 콘솔은 리액트로 찍음..! 동기 function test(value: number) { if (!value) throw new Error('someError'); return value; } const caller = () => { const func = test(1); console.log('func', func); const func2 = test(); console.log('func2', func2); }; caller(); func2는 인자를 아예 넣어주지 않았더니 fun2 밑으론 실행이 안되어서 콘솔이 찍히지 않는다 try-catch 사용시 function test(value: number) { if (!value) throw new Error('someError'); return valu.. 2023. 2. 28. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음 728x90 반응형