철테코

Pub - Sub 구조Pub/Sub 이란Pub/Sub은 publisher/subscribe의 줄임말로, 비동기식 메시징 패턴입니다. Publisher가 Message를 발행하면 해당 Message를 구독하고 있는 Subscriber가 해당 Message를 읽을 수 있고, 작업을 하게 됩니다. 이러한 구조에 의해 Publisher와 Subscriber는 서로 알 필요가 없습니다. Publisher는 중간 컴포넌트(버스, 브로커)에게 메시지를 전달하면 중간 컴포넌트는 해당 Topic을 구독 중인 Subscriber에게 전달해줍니다. 즉, 발신자의 메시지는 특별한 수신자가 정해져 있지 않습니다. 비동기 메세징 패턴동기 - 어떤 일의 수행과 동시에 결과가 나오는 것.비동기 - 어떤 일의 수행 즉시 결과가 나오는..

들어가며 "마음속 하나씩 있는 여행하고 싶은 마음을 계획하면서 키워보아요" - Trip Seed - SSAFY 입과한지 벌써 5개월이 지난 지금 1학기를 마치며 4주 동안 몰입하여 프로젝트를 진행했습니다. "여행 계획 및 정보 공유 커뮤니티 플랫폼 Trip Seed"를 개발하며 1학기 간 배웠던 스프링, Vue, DB, 알고리즘 모든 기술을 적용하며 서비스를 개발했습니다. 페어와 둘이서 기획부터 아키텍처 설계, 구현까지 모든 일을 해야해서 시간이 부족한 감도 없지 않아 있었지만 집중력 있게 프로젝트를 진행할 수 있었습니다. SSAFY에 입과할 당시 부족한 백엔드 지식과 역량을 채우고자 하여 지원했었습니다. 실제로 지난 1학기간 서블릿, JSP 기반의 MVC 구조의 게시판 구현과 Spring 기반 Rest..

Next.js란 리액트 프레임워크로 서버사이드 렌더링을 가능하게 하는 프레임워크입니다. 기존 리액트는 라우팅 등 개발에 필요한 수많은 라이브러리를 각각 추가해줘야 하는 번거로움이 있었는데 Next.js는 이러한 프론트엔드 개발에 필요한 다양한 기능을 내장 라이브러리로 제공합니다. 또한 추가적으로 서버 사이드 렌더링이 가능하여 SEO에 유리한 웹을 개발할 수 있습니다. 1. _app.js // _app.js import React from 'react'; import '../styles/globals.css' import { wrapper } from "../store/store"; import { Hydrate, QueryClient, QueryClientProvider } from 'react-quer..

기존에 프로젝트를 진행할 때 상태관리에 있어서 리덕스 구조를 사용해 왔습니다. 그런데 최근 리덕스 Tool-kit이 나오고 공식 홈페이지에서도 이를 적극 활용할 것을 추천하고 있습니다. 이번 글에서는 React-Redux 프로젝트의 생성 과 생성하면 기본적으로 세팅되는 Redux 구조와 State 관리에 대해서 알아보려고 합니다. 설치 리액트 + 리덕스 프로젝트 생성 프로젝트를 만들 폴더에서 VSCode에서 터미널을 열고, 다음과 같은 명령어를 입력합니다. npx create-react-app [프로젝트 명] --template redux 기존 프로젝트 + 리덕스 만약 기존 프로젝트에 리덕스를 추가하고 싶다면 다음과 같은 명령어를 통해 리덕스를 추가할 수 있습니다. redux, react-redux np..

팀원들과 함께 이번 프로젝트를 시작하기에 앞서 팀원들과 협업을 위해서 npm이랑 node.js의 버전을 같이 맞추는 것이 좋을 것 같아 정리하여 공유하려고 한다. 우선 현재 버전을 확인해 보자. node -v npm -v node.js 사이트에서 최신 버전을 확인할 수 있다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 최신 버전이 되게 금방금방 바뀌는 것을 볼 수 있다. 학기 중에는 업데이트를 지속적으로 확인하고 업데이트 하기는 어려우니까 새 프로젝트를 시작할 때 만큼은 해주어야 할 것 같다. 우리 팀은 나를 포함하여 거의 Window를 사용하..

1. 폴더 생성 프로젝트를 생성할 폴더를 하나 만든다. 2. VSCode Terminal에서 명령어 입력 VSCode에서 Terminal을 열고 npm install -g create-react-app npm 모듈인 'create-react-app'을 설치한다. 그 다음 아까 만들어진 폴더에서 다음과 같이 프로젝트를 생성한다. npx create-react-app my-app 명령어를 입력한다. "my-app"부분에 만들 프로젝트 명을 사용하면 된다. 다음과 같이 리액트를 실행할 준비가 되었다. 3. 실행하기 npm start 다음과 같은 명령어를 터미널에서 해당 폴더에서 실행하면 우리가 만든 리액트 앱을 실행할 수 있다. http://localhost:3000/ 인터넷 주소에 위의 주소를 입력하면 실행..

CSS는 Cascading Style Sheets의 약자로 콘텐츠의 글꼴, 색상, 크기 및 간격을 조정하거나 여러 열로 분할하거나 애니메이션 및 기타 기능을 추가하는 웹 페이지 스타일과 레이아웃에 사용된다. # CSS 적용 방법 1. 외부 CSS 파일 적용 방법 CSS 파일의 적용은 .css 파일을 별도로 작성하고, HTML의 에 참조한다. 이러한 방식을 가장 많이 사용한다. 구조와 스타일의 분리를 통해 유지보수성을 높여주기 때문이다. 헬로우 월드! 이것은 나의 첫 번째 CSS 예제입니다 2. 내부 CSS 적용 방법 외부 CSS 파일 대신, HTML의 헬로우 월드 이것은 나의 첫 번째 CSS 예제입니다 3. 인라인 스타일 인라인 스타일은 style 속성을 두어 한 요소(태그)에만 영향을 주는 CSS 선언..

프론트 엔드 공부를 시작했다면 HTML, CSS, Javascript는 필수적으로 배워야 한다. 또한 이들을 자유자재로 사용할 줄 알아야 한다. https://www.advancedwebranking.com/seo/html-study/ HTML Study Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The w..