분류 전체보기149 [WEB] React, SPA Website장단점 ,SEO(Search Engine Optimization) 반갑습니다. 지난번에 SPA에 대해서 글을 쓴 적이 있었는데요. 그 부분에 대해서 좀 더 이어쓰고자 합니다. SPA Website는 MPA에 비해서 부분 렌더링을 통해, 동적 페이지를 구성할때 유리하다고 했습니다. 아! 그리고 Papago 또한 react로 되어있었습니다. 집에 가면서 왜 다른거 말고, 파파고는 React일까 생각해봤습니다. 이곳은 한글 -> 영어 번역을 해줍니다. 이 과정을 할때마다 페이지를 다시 새로고침하면 어떻겠나요? 으악!! 보기도싫어.. 하지만 수정이 일어나는 부분만 렌더링을 해준다면? 굉장히 깔끔하겠죠? 이것이야 말로 동적인 페이지라서 SPA컨셉이 잘 어울리는 것 같습니다. 또한 인공지능 처리도 서버에서 할텐데, 서버가 바빠 죽겠는데 client에서 대부분을 처리.. 2021. 7. 20. [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. [Git] git pull을 안하고 commit한 경우 merge conflict 해결방법 상황 블로그에 게시할 내용 작성 후 commit을 했습니다. 그 이후 push를 하려고 하니 pull이 필요하다고 합니다. 생각해보니 집에서 Repository에 push를 이미 했는데, 노트북에서 작업시에 pull을 하지 않았습니다. 하나의 브랜치에서 작업한 내용인데.. 겹쳤습니다. 해결방법 1. git reset + stash # 가장 최근작업을 취소한다. $ git reset HEAD^ # 수정된 내용들을 잠시 stack에 저장해둔다. $ git stash # pull을 통해서 최신 내용을 다시 받아온다 $ git pull origin my_repo # stack에 담았던 수정사항을 다시 가져온다. $ git stash pop # Merge Conflict 해결 이후 다시 커밋한다. $ git co.. 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. 이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음 728x90
