WEB64 [WEB] reactstrap, Breadcrumb 다르게 나오는 이유(version 차이) bootstrap version 극대노의 상황이지만.. 현자의 마음으로 화를 가라앉히고 포스팅 합니다. 하.. 강의 복습을 하는데 몇시간동안 아무리 코드를 고쳐도, UI가 다르길래 원인을 못찾았는데.. bootstrap의 버전이 문제였습니다. reactstrap의 버전이 같더라도 bootstrap의 버전이 다르면 생긴게 다르게 나옵니다.. v 4.0.0 이상 이렇게 나와야 정상인데 V.5.0.0이상 자꾸 이렇게 어디 하자가 있는애처럼 나왔습니다. 원인은 package.json에 있는 bootstrap 버전 차이였습니다. 설마설마 했는데, 이 차이때문에 다르게 나왔습니다. 5.0 이상부터 이런 모양 4.0이상은 이런모양.. 결론 : 패키지의 버전에따른 css 모양도 확인해보자. 몇시간이면 싸게 먹힌걸지도.. .. 2021. 7. 19. [Web] React, React Router, navigation, react-router-dom 오늘은 React Router에 대해서 알아보겠습니다. 이건 강의를 들은지 한참 지났는데, 자꾸 뭘 찾고 하다보니까 포스팅이 너무 늦었습니다. 빨리 진도를 나가야 하는데요. 산더미 같은데 할게.. Navbar에서 메뉴를 눌렀을때 다른 페이지로 이동을 해야하는데요. 이 navigate 기능을 react-router-dom package를 통해서 할 수 있답니다. npm install react-router-dom 을 이용하셔야 합니다. React Router 1. navigational Component의 집합입니다. -> view들간의 navigation을 가능하게 해줍니다. 2. Router Component, route matching Component, navigation Component로.. 2021. 7. 18. [Web] React, Virtual DOM, Diffing algorithm, react fiber, 반복 element에 key가 필요한 이유 지난번에 React는 Virtual DOM을 이용해서 실제 DOM을 사용하는것보다 좀 효율적으로 렌더링 할 수 있다고 했습니다. Browser DOM은 browser의 object 입니다. Virtual DOM은 뭘까요? Virtual DOM 특징 : 1. RVM은 Real DOM의 가벼운 표현이라고 보시면 됩니다(lightweight) 2. js object로 메모리 내에 트리구조의 자료구조로 저장되어 있습니다. react app 메모리 내에서 계속 유지되고 있으므로, 필요할 때 언제든 쉽게 수정이 가능합니다. Browser DOM은 새로고침을 해야해서 속도 차이가 굉장히 심하게 납니다. 모~든 React의 수정사항은 가상 DOM에 먼저 반영 됩니다. 그 이후에 Virtual DOM은.. 2021. 7. 17. [WEB] js docs에 기여를 했습니다. 캬캬캬!!! 행복한 추억 요즘은 DOCS를 시간날때 읽고 있습니다. 다른 글들을 찾아보면 대부분 docs에서 번역해서 올려준 정도더라구요. 가끔 예제를 볼 떄 말고는 docs가 정확한것 같습니다. 또한 자신감이 생기고요. 내 말에 믿음이 생기잖아요? 저번에 포스팅을 하면서, 구조분해 할당에 대해서 찾아봤습니다. 여기가 한국이라 그런지, 한국어로 먼저 나와서 한국어로 읽었습니다. 근데 예제를 아무리 봐도 잘 와닿지가 않아서, 영어로 봤습니다. 그랬더니 아니 !!! 오타가!!! 외국어 example이 훨씬 와닿게 되어있던것입니다!!!!! 그래서 바로 신고를 했습니다. pr이 accept이 되고, merge가 되었습니다 짞짞짞!!!! 최초로 좀 큰 오픈소스에 기여를 했습니다!! js mdn에 기여를 했어요!!!! 이전에 이렇게 되.. 2021. 7. 17. [Web] Class Component vs Functional Component, 구조분해할당(Destructuring Assignment) 드디어 쓰네요... 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해서 쓰겠습니다. 결론부터 말씀드리겠습니다. 함수형 컴포넌트가 더 좋습니다. (간결성, 속도,Class component의 lifecylce methods를 거의 전부 다 사용 가능) 저 class 열심히 해보려고 했는데, 오늘부터 손절 합니다. 제길슨... 혼자 차이점들을 조사하면서, 아 지금까지 클래스형 배웠는데 .. 제발 클래스형의 독특한 장점 있어라!! 했지만.. 쩝... 여기까지 1. Class Component 특징 : 1.Constructor가 있다. 여기서 state를 선언할 수 있다. 2. render() 함수가 필요하다. extends 3. Component를 해야한다. 장점 : lifecycle method를 통해서 좀.. 2021. 7. 16. [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. 이전 1 ··· 3 4 5 6 7 다음 728x90
