철테코

이번 싸피 9기에 합격하여 1월부터 교육을 시작했다. 주변에서 "싸피가 뭐야?", "교육 듣는 거라고?", "삼성에서 교육 시켜주는 거야?" 물어보는 경우가 많다. 그래서 이번 기회를 통해 싸피에 대해서 정확하고 알기 쉽게 전달하려고 한다! 싸피(SSAFY)란 삼성 청년 SW 아카데미의 줄임말로 삼성과 고용노동부의 지원으로 취준생에게 고품질의 SW교육을 제공해주는 프로그램이다. 요즘 네이버 부트캠프, 우테코, 42서울 등등 많은 부스트캠프가 있지만 그 중에서 싸피는 다양한 혜택이 제공된다. 싸피 혜택 1. 월 교육 지원금 100만원 지원 2. 삼성의 SW전문가가 참여한 커리큘럼 제공 3. 전공자, 비전공자 수준에 따른 반 운영 및 맞춤형 교육 제공 4. 실무 프로젝트를 통한 포트폴리오 및 실무 개발 역량..

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..