Front-End18 NPX npx 명령어 : npm을 전역으로 설치하지 않아도 바로 쓸수있음. npx 는 npm 에 새로 추가된 도구로, npm을 더 편하게 쓰기 위함. (npm 5.2.0 이상 버전이면 사용가능) npx는 npm 레지스트리에 올라가 있는 패키지를 쉽게 설치하고 관리하는 CLI 도구. npx는 npm을 통해 설치하는 모든 종류의 Node.js 기반 파일들을 간단하게 설치하도록 도와줌. npm = Package Manager(관리) npx = Package Runner(실행) [ ref. 왜쓰는지 :: https://webruden.tistory.com/275 ] 2022. 5. 1. API, UI, UX API (Application Progamming Interface) 응용프로그램 인터페이스 프로그램과 다른 프로그램을 연결해주는 역할이다. -> 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스다. -> 만약 내가 daum지도를 사용해서 웹을 만들때 그냥 daum이 지도에 대한 데이트를 공개만 한다면 양이 방대하고 호환성 문제도 있어서 유용하게 사용하기 어려울 것이다. 하지만 daum지도API를 제공한다면, 데이터를 활용할 수 있도록 인터페이스를 제공하기 때문에 유용하게 쓸 수 있다. UI (User Interface)와 UX (User Experience) UI -> 사용자가 마주하는디자인(폰트 칼라), 레이아웃 기술적인 부분(반응성, 입출력단계, 애니메이션효과) UX ->.. 2022. 5. 1. webpack이란? react를 가지고 무언가를 개발을 하려면 webpack이 기본옵션이다. react로 개발을 한다는 말은 다양한 컴퍼넌트를 모듈화 시켜서 여기저기서 export-import 하기 때문에 서로간의 의존성을 관리하는 것이 매우 중요하기에 매우 권장되는 옵션이다. webpack이 중간에서 조합해 하나의 파일로 만들어 준다. 이를 구현하기 위해서는 몇몇 설정사항이 있다. [webpack에게 알려줘야 할 설정사항] 어플리케이션의 시작 포인트, 또는 root 역할을 하는 자바스크립트 파일 어떤 방법으로 코드를 변경할것인가 어떤 위치로 변경된 코드를 위치시킬것인가 2022. 5. 1. Axios 연결 Axios 연결 axios 연결 lib 에 index.js에 axios 정의 axios가 필요한 컴포넌트에 import를 시킨다. 방식은 POST, GET이 있다. //POST방식 //예)로그인: axios 가 필요한 부분 -> handleSubmit에서 try { const response= await Axios.post("/artSharing/sign",{ id, //똑같아서 생략 가능 pw:password }) this.handleClose(); handleLogin(true); console.log(response); history.push("/"); }catch(error){ alert(error); console.log(error); }; //try catch 문에서 사용해야함 await Ax.. 2022. 5. 1. React를 위해 사용하는 라이브러리들 React 는 프레임워크가 아니라 뷰에만 신경쓰는 라이브러리다. 그래서 기타 기능을 다른 라이브러리들을 가져와 구현해야 함 ! ESLint 란? 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 도구 (사용방법 -> Editor에 ESLint 프러그인을 설치하기, webpack 번들링시 eslint-loader 를 추가하기) Ajax 란? Asynchronous Javascript and xml 비동기적인 웹 제작을 위해 HTML/CSS (표현정보), DOM,Javsscript (동적인 화면 출력), XML,XMLHttpRequest (웹서버와 *비동기적으로 데이터를 교환하고 조직) 의 조합을 이용하는 웹 개발 기법. 비동기(Asyn): 하나가 끝나기전에 제어권을 다음으로 넘겨서 .. 2022. 5. 1. Flux 패턴 MVC 패턴과 한계 MVC 패턴은 데이터를 다루는 로직 ( Controller ), 데이터 ( Model ), 사용자 인터페이스 ( View )로 나누어 애플리케이션을 구현하는 하나의 개발 모델이다. Controller는 Model의 데이터를 조회하거나 업데이트 하는 역할을 하며, Model의 변화는 View에 반영된다. 그리고 사용자가 뷰를 통해 데이터를 입력하면, 모델에 영향을 주면서, 데이터를 관리하게 된다. 로직과 데이터, 뷰를 나누어 관리하기 때문에 효율적이지만, FaceBook 웹앱 에서의 MVC 구조는 앱이 커지면서 굉장히 복잡해졌고, View가 다양한 상호 작용을 위해 여러 개의 Model을 동시에 업데이트 하는 상황이 발생했고, 이렇게 많은 의존성을 가지면서 예측 불가능한 상황이 많이 나.. 2022. 5. 1. 이전 1 2 3 다음