WEB/기초19 [WEB] React,Presentational Component vs Container Component (stateless,stateful), shallow ,deep copy 관심사 분리(separating concerns)를 위해서 React Component Pattern이란것이 존재합니다. 물론 공식적인 react의 용어는 아니지만, 개발자들이 만든 단어입니다. https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82 React Component Patterns Stateful x Stateless, Container x Presentational, HOCs, Render Callbacks and more levelup.gitconnected.com Presentational Component Stateless component ( 항상 그런것은 아니다) 특징 : 1. 주로 view를 Renderi.. 2021. 7. 15. [Web] React lifecycle method,props, super(props) vs super() 반갑습니다. 슬슬 길게쓰기 힘들어지네요.. 지난번에 만든 MyComponent를 약간 수정해보겠습니다. 원하는 결과물 : 1번을 클릭하면 2번처럼 새로운 설명이 나오게 해보겠습니다. 일단 위의 결과물을 만들기에 앞서, React의 component life cycle method에 대해서 알아보겠습니다. 이걸 왜 알아야 하냐구요? 원하는 순서대로 실행을 하기 위해서는 필수랍니다. 물론 이 life cycle은 class style react에서만 유효합니다. function style은 hook을 이용한답니다. 리액트 어플리케이션에서는 컴포넌트가 만들어지고 DOM에 삽입될 때 다음과 같은 method들이 호출됩니다. 1. constructor() 2. getDerivedStateFrom.. 2021. 7. 10. [Web]React Component, ReactStrap(react용 bootstrap),export {괄호} 차이, curly braces 보통 웹페이지의 스타일을 만들때 bootstrap을 많이 가져와서 썼죠?? React에서는 부트스트랩을 쓸 수 없습니다. Why? HTML코드에 클래스를 입혀서 만들었는데, 리액트는 html 기반이 아닌 컴포넌트 기반이기 때문이죠 따라서 리액트의 규칙에 맞춰서 부트스트랩을 re-implementation 해야합니다. 하지만!! 이걸 이미 해줬답니다. reactstrap을 설치하시면 됩니다!!! 포스팅 하면서 찾아보니 react-bootstrap 도 있군요.. 아 이게 더 진짜같은데;; 쩝 .. 여기서 리액트 스트랩 쓰니까 저도 씁니다.. npm install bootstrap npm install reactstrap npm install react-popper 위의 3가지를 다운로드 받아주세요.. 2021. 7. 9. [Web] React 설치 및 내부 구조 확인하기(진입점 등등..) ** 2023.11.4에 다시 작성됐습니다. 반갑습니다! 이 글에서는 React 설치, 실행 하는 방법, React가 어떻게 화면을 그리고 있는지 확인하겠습니다. Node 설치하기 React는 library 입니다. 설치하기 위해서 npm을 이용해야 하는데요. npm을 이용하려면 일단 Node를 설치해야 합니다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트로 이동해서 가장 최신버전인 LTS로 받아주세요. 2023년 11월 기준으로 20.9 버전까지 나왔네요 ㅎㅎ React 시작하기 React를 사용하는 방법은 간단합니다. 직접 ind.. 2021. 7. 8. [WEB] React, Framework or Library? , SPA(Single Page Application) 오늘은 Framework와 Library의 차이에 대해서 알아보고, React는 어떤것일까? 에 대해서 알아보겠습니다. 그냥 리액트나 하지 뭐이리 서론이 기냐구요? 이 수업 들어보시면 진도 굉장히 빠릅니다.. 1주일치를 하루에 걸쳐서 하고 있기때문에 양이 꽤나 많답니다. 이 부분이 지루하다면 ... 안됩니다!! 굉장히 재밌답니다!! 아님말고요 ㅎ;; 왜 js library나 Framework가 필요할까? 두개의 차이를 보기에 앞서 왜 library나 framework가 필요할까? 에 대해서 먼저 알아봅시다. 어? 나는 웹 페이지 만들때 html,css, vanilla js로 잘만 만들었는데? 할 수 있습니다. 맞습니다. 없어도 충분히 웹 페이지는 만들 수 있습니다. 하지만 user와 interaction.. 2021. 7. 7. [WEB] Node.js , NPM 오랜만입니다. 앞으로 당분간은 아래 코세라 강의를 기반으로 하여 작성이 될 것입니다. Coursera Front-End Web Development with React 홍콩과학기술대학 React를 시작하기에 앞서, Git과 Node.js에 대해서 간략하게 설명을 합니다. 하지만 Git은 넘어가고, 자바스크립트를 실행시켜주는 플랫폼인 Node, 여러 모듈들의 의존성을 자동으로 관리해주는 NPM(Node Package manager)에 대해서 알아보도록 하겠습니다. Node.js 자바스크립트 런타임 > Node.js란 뭘까요? JavaScript runtime built on Chrome V8 JavaScript Engine 라고 설명이 되어있는데, Chrome V8 자바스크립트 엔진이 탑재된 자바스크립트 .. 2021. 7. 6. [WEB] Express- client 에서 REST API로 Server에 Data 전송(POST method) POST방식으로 출력시에 req.body에 {}가 나오는 사람들이 확인하면 좋을것이다. 오늘은 실수한 내용에 대해서 정리하려고 한다. 팀 프로젝트인데 괜히 Express를 쓰겠다고 한 것 같다. 시간이 너무 촉박하다.. 선 실행 후 이해로 하고있다. ======= Client side============== signup.ejs에서 onclick 이벤트를 등록한다. javascript의 function checkValid(){} 를 보자 JSON.stringfy를 이용하여 object 를 JSON형태로 바꾸어서 뿌려준다. 그냥 req와 stringfy를 거친 req의 차이는 무엇인가.. json을 거치고 나면 key값이 " "로 감싸져서 key : value의 형태로 매핑된다. fe.. 2021. 5. 17. [WEB] Express DB연결시 'Client does not support authentication protocol' 에러 해결 방법 순서가 뒤죽박죽이라서 미안합니다.. 하루빨리 해야하는 상황이라 DB연결부터 어떻게든 일단 해야해서.. 이렇게 올바르게 썼음에도 불구하고 DB의 연결이 안되는 경우가 있습니다. 이건 Mysql 8.0 version에서 나는 버그라고 합니다. 저는 이렇게 써서 해결을 하였고, ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY '내 비번'; flush privileges; 출처는 https://stackoverflow.com/questions/50093144/mysql-8-0-client-does-not-support-authentication-protocol-requested-by-server MySQL 8.0 - Cli.. 2021. 5. 14. [Web] Express 해보기 자~ 오늘은 Express를 해보겠습니다. 왜 하냐고요? 팀플에서 한번 써보기 위함입니다. 그럼 시작!! Express란? http://expressjs.com/ Fast, unopinionated, minimalist web framework for Node.js 노드 JS를 위한 web framework라고 써 있습니다. 그런데 그냥 node.js의 웹 서버 프레임워크라고 생각하면 됩니다. React랑 vuejs는 Frontend용 프레임워크라고 생각하시면 됩니다. 사실 라이브러리라고도 하는데.. 일단 공식홈페이지는 라이브러리라고 하니까 라이브러리로 합시다. React(or Vue) + Express + DB 조합으로 나중에 한번 뭐 해봐야겠습니다. 어떻게 사용하나요? http://.. 2021. 5. 13. 이전 1 2 다음 728x90
