Ideveloper's software blog

css:transition 관련 참고하면 좋을 링크 애니메이션 효과는 부드러운 UX를 제공하는 것이 매우 좋다. 애니메이션이 버벅거리는 효과는 오히려 답답하고 느린 웹사이트로 인식될 수 있다.CSS Transition을 활용하면, 그문제가 대부분 해결된다. CSS Transitions and Transforms for Beginners https://robots.thoughtbot.com/transitions-and-transforms

React:리액트 컴포넌트와 AWS S3연동해 사진 올리고 그 정보 받아오기 https://www.beforecoding.net/nodejs/fileupload 참고 [Back end] | API 서버 초기 설정 쪽 const fileUpload = require('express-fileupload'); app.use(fileUpload()); ​ //추가 | 라우터 쪽 # router.js router.post('/v3/menus/uploadImage', menus.uploadImage); # menus.js var AWS = require('aws-sdk'); ​ async function uploadImage(req, res) { const file = req.files.file; //아마존 S3에..

React:React에서 폼 다루기 아래 내용은 리액트 교과서를 읽고 학습한 내용입니다. | 시작하기에 앞서 폼 요소는 사용자로부터 텍스트 같은 데이터나 클릭같은 조작을 전달받는데 사용하므로 웹 개발에서 중요한 부분이다. | React에서 폼을 다루기 위한 권장 방법 일반적인 html에서 입력 요소를 다룰 때는 페이지의 DOM이 해당 요소의 값을 DOM 노드에서 관리한다. 즉 DOM을 저장소로 관리한다.전통적인 HTML의 폼 요소는 사용자 입력에 의해 상태가 변경된다. 그렇지만, React는 UI를 묘사하기 위해 선언형 스타일을 사용하므로, 상태를 적절히 반영하려면 입력이 동적이여야 한다. 폼 요소를 사용자 입력을 이벤트로 전달받아 상태와 뷰를 동기화 하는 방식으로 사용하는데, 위와 같은 방식을 단방향 ..

React:React에서 이벤트 다루기 정적인 UI를 사용하는 경우는 많지 않다. 사용자 조작에 반응 할 수 있는 영리한 UI를 만들어야 하는 경우가 대부분이다. 이벤트에 대한 지식은 7장에서 살펴볼 폼과 폼 요소를 다루는 데도 필요하다. React는 특정 이벤트만을 지원하므로 리액트가 지원하지 않는 이벤트를 다루는 방법도 살펴보자. | React에서 DOM이벤트 다루기 속성으로 사용하는 이벤트 이름은 표준 W3C DOM 이벤트를 onClick, onMouserOver 처러 카멜 표기법으로 작성한다. 다음 예제 코드에서는 React에서 사용자가 버튼을 클릭했을때 실행할 이벤트 리스너를 정의하고 있다. 이벤트 리스너에서 this를 콘솔에표시하도록 했다. 여기서 event 객체는 내장DOM이벤트객체를 개선한..

React:리액트 컴포넌트 라이프사이클 이벤트 5장 | 시작하기에 앞서 React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 라이프사이클 이벤트는 분류하면 아래와 같다. 마운팅 이벤트 (리액트 엘리먼트를 DOM노드에 추가함)갱신 이벤트 (리액트 엘리먼트를 갱신할 때 발생한다)언마운팅 이벤트 (리액트 엘리먼트를 DOM에서 제거할때 발생한다)모든 리액트 컴포넌트는 라이프사이클 이벤트가 있다. | 이벤트 분류 분류에 따라 실행되는 횟수마운팅 : 리액트가 이벤트를 한번만 실행한다.갱신: 리액트가 이벤트를 여러 번 실행한다.언마운팅: 리액트가 이벤트를 한번만 실행한다. 라이프사이클이벤트와 함께 constructor() 도 포함시킨 컴포넌트의 전체 라이프사이클의 실행 순..

React: React 컴포넌트의 상태 객체 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. | 시작하기에 앞서 리액트에서 컴포넌트의 상태는 매우매우 중요한 개념이다. 리액트의 장점이 되기도 하는 부분이 되기 때문이다. (책에서 한개 장 밖에읽을 수 있다면 이장을 읽기 바란다고 했을 정도이다.) React 컴포넌트의 상태 객체를 이용하면 가치있고 상호작용이 뛰어난 react 애플리케이션을 만들수 있다. 상태는 리액트 컴포넌트에 데이터를 저장하고, 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심개념이다. | 리액트 컴포넌트의 상태란? 리액트의 상태는 컴포넌트의 변경가능한 데이터 저장소다. 리액트팀에서는 컴포넌트는 상태머신입리다 라고 말하고 있다고도 한다. 속성과상태..

Front end:spread operator 웹팩설정에서 사용가능하게 하기 https://www.servicedenuages.fr/en/spread-operator-with-webpack 참고npm install --save-dev babel-loader babel-plugin-transform-object-rest-spread아래와 같이 query 속성에 plugin transform-obejct-rest-spread를 넣어주면 된다. module: { rules: [ { test: /\.(js|jsx)$/, loader: "babel-loader", exclude: /node_modules/, query: { plugins: ["transform-object-rest-spread"] } },

Webpack:웹팩 경로 설정시 src라는 이름으로 alias만들기 | webpack.config.js 설정 아래를 webpack.config에 넣어주면 된다. resolve: { alias: { src: path.resolve(__dirname, "./src") } }, https://webpack.js.org/configuration/resolve/#resolve 참고