본문 바로가기

프로그래머스 풀스택 데브코스/데브코스 TIL

 (59)
웹 풀사이클 데브코스 TIL 81일차 웹 기반 문서 편집기 제작 프로젝트 React와 Express를 이용한 통합 프로젝트 수행 실제 사용을 염두에 둔 서비스를 개발 및 통합, 자동화 파이프라인으로 구축 웹 개발 프로세스르 개발자 관점에서 이해 타 팀(DevOPs) 에서 수행하는 코드 개발 이외 업무에 대한 이해 프로덕션 환경을 고려한 응용 소프트웨어의 설계와 구현에서 염두에 두어야 할 점 React 및 Express를 활용한 응용 프로그래밍은 중점이 아님 개발환경과 프로덕션 환경의 차이를 염두에 둔 프로그래밍은 중점에 해당 CI/CD 파이프라인 구축 기법은 중점이 아님 CI/CD 관련으로 새로 도입되는 내용들이 있음 프로젝트 개요 웹 기반 문서편집기를 만드는 프로젝트. 이 프로젝트에는 결과물에 대한 예상이 이미 구현되어 있는 샘플을 통하여..
웹 풀사이클 데브코스 TIL 59일차 깃허브 Discussions 토론 게시판. 디스코드나 슬랙 처럼 커뮤니티 역할을 해준다. 토론에서 의논후 이슈로 전환하기도 하고, 따로 토론 없이 바로 이슈를 만들기도 한다. 깃허브 토론은 꼭 프로젝트에 기여한 사람만이 사용할 수 있는 공간은 아니고, 마치 스택 오버플로우 처럼 누구나 질문 답변을 할 수 있다. 토론 창을 보면 사람 마다 개개인의 역할이 있는것을 알 수 있다. Maintainer는 유지하는 사람. 아무 라벨이 없으면 일반 기여자이다. 오픈소스 구성원의 역할 저작자 : 오픈 소스 프로젝트를 만든 사람 또는 조직 사용자 : 오픈 소스 프로젝트를 사용하는 사람 메인테이너 : 프로젝트의 방향을 알고 있는/직접 설정한 프로젝트를 관리하는 컨트리뷰터 커미터 : 컨트리뷰터가 기여를 하면 리뷰를 하는 ..
웹 풀사이클 데브코스 TIL 57일차 참여형 지식 공유 플랫폼 스택 오버플로우 등등. 개발자들은 서로 도와주면서 성장한다. 깃허브도 마찬가지다. 깃허브에서 다른 사람의 코드를 보는것도 가능하다. 이 깃허브를 사용해서 오픈소스에 참여할 수 있다. 오픈소스 누구나 특별한 제한 없이 공개되어 있는 소스 코드. 리뷰어 입장에서 코드를 검사(리뷰), 코드 수정 등 개선사항을 마음껏 펼칠 수 있는 코드. != 무료 대부분의 오픈소스는 무료지만 유료도 존재한다. 그렇다면 왜 오픈소스를 사용할까? 답은 개발자 문화와 연결된다. 코드로 서로의 지식을 공유하는 것이다. 다른 사람의 코드에 도움을 받고 다시 도움을 주는 것이 개발자 문화에는 익숙하다. 다른 개발자의 시선으로 코드를 보면 새로운 아이디어가 생길 수도 있고 생각지 못한 버그를 찾아낼 수 있다. 선..
웹 풀사이클 데브코스 TIL 56일차 리덕스 수정함수 매개변수 전달하기 리덕스에서도 수정함수에 매개변수를 전달할 수 있다. //store.tsx increaseAge(state, action){ state.age += action.payload; } //Cart.tsx { dispatch(increaseAge(10)); }}>이름변경 {cartState.user.age} 이제 매개변수를 입력할 수 있는 형식으로 함수가 바뀌었다. 이때 매개변수 위치의 변수명은 관례적으로 action 이라고 한다. 장바구니 페이지 완성하기 장바구니의 수량을 변경할 수 있도록 기능을 추가하였다. increaseCount(state, action){ state.cart[action.payload].count += 1; } 인덱스를 매개변수로 받아 그에 해당하는 객..
웹 풀사이클 데브코스 TIL 55일차 Cart 컴포넌트 생성 부트스트랩의 Table을 이용해서 간단한 장바구니 컴포넌트를 생성해보자. //App.ts function Cart(){ return( # 상품명 수량 변경하기 1 아메리카노 1 변경 2 카페라떼 1 변경 ) } Redux를 사용하는 이유 커피 상태는 App Detail Cart 모두에서 사용된다. 이를 프롭스로 전달하는 것도 가능하지만 컴포넌트가 중첩되어있어서 불편하다. 이를 위해 Context Api 방법을 배웠지만 더 좋은 라이브러리인 Redux가 있다. Redux를 사용하면 state가 저장되어있는 파일을 만들고 그곳에 상태들을 저장한다. 그렇게 하면 모든 컴포넌트에서 접근하여 사용할 수 있다. Redux 설치 npm install @reduxjs/toolkit react-r..
웹 풀사이클 데브코스 TIL 54일차 컴포넌트 파일 분리, 폴더 구조 변경 상세 페이지 컴포넌트를 생성해보려하는데 App.tsx 가 파일이 너무 길어진다. 따라서 컴포넌트를 별도의 파일로 분리해보자 // Detail.tsx import React, { useState, FC } from 'react'; import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap' const Detail : React.FC = () => { return( 커피이름 커피상세설명 커피가격 캐러어에 담기 ) } export default Detail; 똑같이 컴포넌트를 만든다. 단, export 를 해주어야 다른 파일에서 사용할 수 있다. Import 해주기 전에 한가..
웹 풀사이클 데브코스 TIL 53일차 프론트트엔드 심화 커피 주문 사이트를 제작해 보도록 하겠다. Bootstrap Bootstrap은 웹 페이지에서 많이 쓰이는 요소드릉ㄹ 미리 구현해 두고 이를 불러와서 사용하는 방식으로 사용할 수 있는 프레임워크이다. bootstrap의 사용법은 다음과 같다. 먼저 npm으로 부트스트랩을 설치해준다. 그 후 index.html 파일에 다음 코드를 추가해준다. app.tsx 파일에서는 import를 해주어야한다. import {Button, Navbar, Container, Nav} from 'react-bootstrap' 사용할 요소들을 import 해주고 이를 return 문 안에 컴포넌트 방식으로 사용할 수 있다. 예시 코드들도 리액트 부트스트랩 홈페이지에 나와있다. 배경 이미지 설정 ..
웹 풀사이클 데브코스 TIL 52일차 오늘은 특강 수업과 LMS 수업이 동시에 있는 날이다. 옛날 개발자 전망 vs 요즘 개발자 전망 잘못된 개발자 진화 모델 초보-중급-고급-팀장-상위 관리자 이렇게 이어지는 개발자 진화 모델은 옛날 방식이다. 요즘은 나이가 많다고 개발자를 못하진 않는다. 옛날 개발자는 나이 차면 회사 나와서 치킨집을 차려야한다는 말도 농담반 진담반으로 있었다. 요즘 개발자 전망 나이 제한없이 개발가능(개발 프리랜서 급증) 다양한 IT 사업 아이텝으로 창업 가능 야근 거의 없음 연봉이 많이 향상되었음 프로그래밍 제대로 학습법 개발이란 새롭게 만드는 과정 자기주도학습에 익숙해져야한다. 기초를 제대로 배우자 새로운 언어와 도구는 계속 나온다. 유행따라가는데 집착할 필요가 없다. 신 기술이 나온다고 무조건 유행을 좆을 필요는 없..

티스토리툴바