본문 바로가기

Development(Web, Server, Cloud)/22) React.js & Node.js22

React.js 정리(1-12) JS es6 문법 - let, const (var X) : 블록레벨 스코프 - 화살표함수 const func = (a) => { return a } - 비구조화 할당 - const { a, b } = abc - default parameter - 템플릿 리터럴 ${foo} "스트링" + abc + "입니다" `스트링${abc}입니다` - import from , export default - 펼침연산자 : [...arr], {...object} ) - Promise , async&await REACT 기본 개념 - static page : html css js 파일만으로 이미 페이지가 완성된 웹페이지 - dynamic page : html 렌더링 후 서버와의 통신을 통해 내용이 변하면서 작용 - CSR(.. 2022. 1. 10.
React.js & Node.js 9일차 JS는 싱글 스레드라서 콜스택식 밑에서부터 쌓아서 처리하는 방식이다. ??? 스택 ??? callBack 함수는 비동기함수 ??? --- axios promise기반 http 통신할 수 있는 API 이다. Promise 객체를 반환하기 때문에 async와 await를 쓸 수 있다. Context API 전역 상태를 관리하기 위해 Context API가 필요하다. props는 직접적인 자식에게만 보낼 수 있다.그래서 A에서 G로 넘기기 위해서는 계속 컴포넌트를 타야한다. 성능상에 있어서 Redux가 Context에 비해 유리하다고 한다. 왜냐하면 Context는 전체를 다 처리하기 때문에 그렇다고 한다. React Bootstrap을 구현해보자 만들기위해서 우선은 components > bootstrap .. 2022. 1. 4.
react.js & node.js 8일차 - todo list 완성, 자바스크립트 싱글 쓰레드/비동기 todo list 만들기 만들기는 했는데 Enter을 해도 데이터가 넘겨지지 않는다 그래서 이걸 form으로 감싸주자. form만 넣었는데 Enter에 반응한다. form을 넣었으면 onClick을 안넣어도 된다. 왜냐하면 form 안에서는 onSubmit이 이미 등록되어 있어서 그렇다. 단 버튼에 type="button"을 넣으면 Enter가 안된다. handleAddTodo 대신에 form을 이용한 onSubmit을 처리했다. 그리고 현재는 브라우저에서 빈 입력을 받아들이지 않지만 이걸 개발자가 처리하기 위해서는 InputText에 required를 넣어주었다. 이런식으로 간단하게 처리해주었다. 보면알겠지만 리스트, 객체 리스트의 성분을 접근하기 위해서는 map 사용이 절대적이다. 이때 체크된 경우의.. 2022. 1. 3.
react.js & node.js 7일차 styled-components는 scss 처럼 쓸 수 있기 때문에 속성안에 다른 속성을 또 적어줄 수 있다. 또한 내부에서 상속받아서 css를 적어줄 수도 있다. 위와같이 위쪽에 선언된 속성을 긁어와 상속받은 다음 추가 속성을 붙일 수 있다. --- flex 이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com) 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com display:flex flex-direction:column align-items: center 이.. 2022. 1. 1.

티스토리툴바