Node.js:로컬에서 서버 띄우기,node.js와 package.json | 시작하기에 앞서노드는 엔진엑스 없이도 배포, 웹서버 역할을 함 다른건(php) 포팅해줄 다른것이 필요함. | 로컬에서 서버를 돌리는 방법 https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server 참고1. python 이용 (폴더 자체를 서버로 돌림) SPA가 등장하면서 folder를 serving 하는게 뜸# If Python version returned above is 3.X python -m http.server # If Python version returned above is 2.X python -m Simp..
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이벤트객체를 개선한..
WEB:DOM APIs | 시작하기에 앞서,Dom api는 라이브러리를 쓰는것보다 대체로더 빠르다.라이브러리보다 불편하고 어렵지만, low-level의 dom api를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그동작을 이해하고 유추하기 쉽고, 문제해결에도 유리하다. 개인적인 생각으로 이러한 dom과 관련한 개념들을 탄탄히 학습해 놓는다면, 프레임워크에 의존하는 개발자가 아닌, 유연하게 새로운기술도 쉽게쉽게 습득하는 유연한 개발자가 될것이라 판단된다.| DOM api 관련 링크document. 으로 사용할 수 있는 API들 -> 링크 element. 으로 사용할 수 있는 AP들 -> 링크 | DOM 탐색 APIsDOM 탐색에 몇 가지 유용한 속성들이다.tagNametextContentnodeTyp..
React:리액트 컴포넌트 라이프사이클 이벤트 5장 | 시작하기에 앞서 React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 라이프사이클 이벤트는 분류하면 아래와 같다. 마운팅 이벤트 (리액트 엘리먼트를 DOM노드에 추가함)갱신 이벤트 (리액트 엘리먼트를 갱신할 때 발생한다)언마운팅 이벤트 (리액트 엘리먼트를 DOM에서 제거할때 발생한다)모든 리액트 컴포넌트는 라이프사이클 이벤트가 있다. | 이벤트 분류 분류에 따라 실행되는 횟수마운팅 : 리액트가 이벤트를 한번만 실행한다.갱신: 리액트가 이벤트를 여러 번 실행한다.언마운팅: 리액트가 이벤트를 한번만 실행한다. 라이프사이클이벤트와 함께 constructor() 도 포함시킨 컴포넌트의 전체 라이프사이클의 실행 순..
Web:DOM 과 querySelector | DOM이란? https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/%EC%86%8C%EA%B0%9C 공식문서 참고 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또..