웹 (26) 썸네일형 리스트형 ReadMe 파일 작성 방법 1. 프로젝트 이름 2. 컨트리뷰터 리스트(깃허브 닉네임이 좋음) 3. Tech Requirements(Tech Stack) 4. Docker(도커를 어떤 식으로 쓰고 있는지, 빌드와 관련된 것들) 5. Script(스크립트 정리를 통해 협업하는 동료들끼리 도움이 됨) npm run dev, npm run build 등 react 리액트를 사용하는 이유, 리액트에서 함수형 컴포넌트를 사용하는 이유 강력한 커뮤니티 확장성 - next.js, getsby.js 등 react-native 경쟁상대의 부재 커리어 채용문제 ---- 함수형 컴포넌트의 사용이 주류가 된 이유 원래 함수형 컴포넌트에서는 클래스 컴포넌트 생명주기(componentDidMount 등)를 사용할 수 없어서 컴포넌트가 변화된 후 리렌더링을 할 수가 없었다. 그러나 리액트 훅의 등장으로 함수형 컴포넌트에서도 이것이 가능해졌다. + 지금은 함수형 컴포넌트가 성능 면에서도 더 뛰어나다(실행되는 속도가 조금 더 빠름). hooks란? 쉽게 말하면 A라는 액션이 실행될 때 A라는 액션과 동시에 실행되는 함수를 정의하는 것이다. 또한 hooks는 기본적으로 함수로 뺄 수 있기 때문에 useEffect()에서 실행해야 하는 함수를 별도의 파일로 .. MSA 마이크로 서비스 아키텍처, MFA 마이크로 프론트엔드 아키텍처, 모노레포 하나의 코드 베이스에 모든 것을 때려넣은 모놀리틱 아키텍처와 대비되는 개념. 모놀리틱은 구현 속도는 빠르지만 스파게트 코드가 되기 쉽다. 초기 스타트업에서 빠른 개발을 위해 모놀리틱을 사용하는 경우가 많다. MSA는 서비스를 잘게 쪼갠다. 예를 들어, 상품 서비스, 결제 서비스, 장바구니 서비스 등으로 쪼개서 각자 따로 관리한다. 하나의 서비스가 다른 서비스에 영향을 미치지 않는다는 장점이 있다. MSA를 사용할 때는 프론트와 백 사이에 API 게이트웨이를 두어서 엔드포인트를 하나로 통일할 수 있게 하는 경우가 많다. 이렇게 되면 프론트는 각각의 서버에 대해서 알 필요가 없어지고 API를 찌르기만 하면 된다. API 게이트웨이는 여러 API를 묶어주는 aggregation 역할 이외에도, 스케일링, 인증.. SSR 서버 사이드 렌더링 CSR, SSR 모두 콘텐츠를 컨텐츠를 어디서 만들어내는가에 포커싱이 맞춰져 있다. 콘텐츠를 서버에서 만들면 SSR, 클라이언트에서 만들면 CSR. SSR은 서버에서 html을 미리 만들어서 내려줌. CSR은 클라이언트에서 html을 만든다. SSR의 장점은 빠르다는 것이다. 서버는 클라이언트보다 훨씬 성능이 강력하다. 크로미움이나, 브라우저에 비하면 컴퓨팅 파워가 훨씬 강력하다. SSR을 구현하기 위해서는 Next.js나 Node.js의 템플릿 엔진 등을 사용할 수 있다. 또한 리액트로도 가능한데, React DOM(리액트와 DOM을 연결시키는 역할)의 hydrate라는 메소드를 사용하면 리액트 DOM 내에서 리액트를 랜더링 할 때 SSR 방식으로 렌더링을 시켜준다. 어차피 Next.js도 이것을 사용.. CSR 클라이언트 사이드 렌더링 클라이언트 사이드 렌더링에서 클라이언트는 브라우저를 의미! html을 가장 기본적인 것만 가져온 뒤 자바스크립트를 이용해서 DOM을 생성해서 html에 그려주면 어떨까? 라는 접근이 CSR이다. DOM을 js가 직접 그려주기 때문에 html의 용량은 현저히 낮다. 대신 js의 용량이 커짐. 필요한 DOM만 그때그때 만들어 쓸 수 있다는 장점. html을 매번 불러오는 것이 아니라 js로 필요한 것만 그려낸다. 이때 history API를 통해서 라우팅 처리를 하고 DOM을 이용해서 렌더링을 수행하게 된다. 리액트, 뷰, 앵귤러와 같은 SPA 프레임워크는 기본적으로 브라우저에서 컴포넌트를 만들어서 그 컴포넌트를 렌더링 시키는 것을 최우선 목표로 한다. 즉 리액트에서 컴포넌트를 만드는 행위가 DOM을 만드는.. 브라우저의 원리 브라우저가 이해할 수 있는 언어는 4가지밖에 없다. html, css, js, wasm html 파싱 -> DOM(Document Object Model) - html 요소 데이터 css 파싱 -> CSSOM - css 요소 데이터 이 둘을 결합해서 렌더 트리를 만들게 됨 렌더 트리를 바탕으로 그리는 일을 수행 레이아웃 - 배치 과정(CPU를 많이 먹음) 페인트 - 그리기 - 이때야 비로소 화면에 나타나게 됨(GPU를 많이 먹음) 렌더 - 다 그려진 상태 DOM이 변경 된 경우 다시 렌더 트리를 그린다 -> 레이아웃 변경시에는(width, height 변경 시) 다시 배치 -> 페인트는 무조건 다시 함 -> 렌더 웹에서 렌더링이 되는 건 모두 60fps를 유지해야 한다. 그래야 유저들이 부드럽다고 느낀다.. 웹 애플리케이션 배포 방법 1. 프론트 엔드와 백 엔드의 분리 React, Vue, Angular 등은 JavaScript 라이브러리 혹은 프레임워크이다. 즉, 이것들은 클라이언트의 브라우저 단에서 실행되는 JavaScript를 멋지게 코딩할 수 있도록 도와주는 수단일 뿐이다. 특히 React나 Vue의 경우 JavaScript 코드를 작성할 때 필요한 만큼만 적재적소에 사용할 수 있기 때문에 이것들을 사용한다고 해서 프론트 엔드와 백 엔드가 구분되는 것은 절대 아니다. 다만 이것들을 활용하면 프론트 엔드와 백 엔드를 완전히 구분하여 두 기능을 독립적으로 개발할 수 있게 된다. 그렇다면 그것이 어떻게 가능한 것인지, 그 동작 원리를 한 번 살펴보도록 하자. 개발자가 React 라이브러리를 활용하여 클라이언트에게 제공할 JavaSc.. node.js PM2 모듈 npm install pm2 -g -> PM2 모듈을 사용하면 node.js로 만든 서버를 관리받을 수 있다. 서버가 갑자기 다운되지 않게 해주고, 메인 파일을 수정해도 바로바로 업데이트가 되도록 도와준다. pm2 monit - 상황 모니터링 pm2 stop name - 해당 name의 앱 실행 종료 pm2 start main.js --watch - 변경 사항 바로 반영해줌! - 이러면 코드에 문제가 있는지 모를 수 있음 - pm2 log - 문제점 보여줌. 이전 1 2 3 4 다음
