본문 바로가기

프로그래머스 데브코스

 (62)
웹 풀사이클 데브코스 회고록 2월 네번째 회고록 웹 풀사이클 데브코스의 세번째 회고록이다. 국비지원교육이 시작된지 4달이 지났다. 공부했던 것들 타입스크립트 타입스크립트가 생긴 이유와 타입스크립트를 사용하면 좋은 점에 대해서 학습하였다. 타입스크립트를 컴파일 하는 방법과 타입스크립트 코드를 실행하는 방법에 대해 배웠다. 타입스크립트에서 타입을 선언하는 방법과 타입의 종류, 타입 추론에 대해서 배웠다. 인터페이스를 선언하는 방법과 인터페이스를 실제로 어떻게 사용할 수 있는지 배웠다. 객체를 생성하고 객체 안에 메소드를 구현하는 방법에 대해 배웠다. 열거형을 사용하는 방법을 학습하였다. 리터럴 타입, any, 유니온 타입을 사용하는 방법에 대해 배웠다. 배열과 튜플 연산자의 사용에 대해 배웠다. 스프레드 연산자에 대해 학습하였다. 타입스크립..
웹 풀사이클 데브코스 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 문 안에 컴포넌트 방식으로 사용할 수 있다. 예시 코드들도 리액트 부트스트랩 홈페이지에 나와있다. 배경 이미지 설정 ..
웹 풀사이클 데브코스 회고록 1월 세번째 회고록 웹 풀사이클 데브코스의 세번째 회고록이다. 국비지원교육이 시작된지 절반이 지났다. 공부했던 것들 노드 백엔드 Http 상태코드를 숫자가 아니라 문자형식으로 사용할 수 있는 모듈에 대해서 학습하였다. 기존의 express 코드에서 router와 controller를 분리하는 방법에 대해 배웠다. 두 코드를 분리하여 비즈니스 로직과, url 라우팅의 기능을 분리해 단일 책임원칙에 더 가까워질 수 있다. 비밀번호 암호화를 위해 crpto 라이브러리를 사용하는 방법을 배웠다. 비밀번호는 salt 값과 함께 해싱해서 데이터베이스에 저장한다. picsum 이라는 더미 이미지 사이트를 알게 되었다. url을 통해 간단하게 이미지를 가져올 수 있다. jwt 예외처리와 이를 위해 try catch 문에 대..

티스토리툴바