본문 바로가기

분류 전체보기

 (80)
웹 풀사이클 데브코스 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..
spread와 rest Spread와 Rest 문법 Spread와 Rest 문법은 둘다 자바스크립트 ES6에서 도입되었다. 비슷하게 생겼지만 실제로는 완전히 다른 문법이다. Spread 스프레드 문법은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set 등과 같이 순회할 수 있는 이터러블로 한정된다. console.log(...[1,2,3]) // 1 2 3 console.log(...'Hello') // H e l l o console.log(...{a:1, b:2}) // 에러 spread 문법의 결과물은 특정한 값이 아니라 값들의 목록이다. 따라서 var result = ...[1,2,3] //Unex..
웹 풀사이클 데브코스 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 문에 대..
웹 풀사이클 데브코스 TIL 52일차 오늘은 특강 수업과 LMS 수업이 동시에 있는 날이다. 옛날 개발자 전망 vs 요즘 개발자 전망 잘못된 개발자 진화 모델 초보-중급-고급-팀장-상위 관리자 이렇게 이어지는 개발자 진화 모델은 옛날 방식이다. 요즘은 나이가 많다고 개발자를 못하진 않는다. 옛날 개발자는 나이 차면 회사 나와서 치킨집을 차려야한다는 말도 농담반 진담반으로 있었다. 요즘 개발자 전망 나이 제한없이 개발가능(개발 프리랜서 급증) 다양한 IT 사업 아이텝으로 창업 가능 야근 거의 없음 연봉이 많이 향상되었음 프로그래밍 제대로 학습법 개발이란 새롭게 만드는 과정 자기주도학습에 익숙해져야한다. 기초를 제대로 배우자 새로운 언어와 도구는 계속 나온다. 유행따라가는데 집착할 필요가 없다. 신 기술이 나온다고 무조건 유행을 좆을 필요는 없..
웹 풀사이클 데브코스 TIL 51일차 State 리액트에서는 변수 말고 state를 만들어서 데이터를 저장한다. 맨 윗줄에 import React, {FC, useState} from 'react'; 추가 원하는 곳에 useState('보관할 자료')를 사용하면 state에 자료를 잠깐 저장할 수 있다. let [post, setPost] = useState('미움받을용기'); 배열 비구조화를 통해 값을 변수에 저장할 수 있다. 이때 변수 post에는 데이터, setPost에는 변경함수가 들어간다. State 를 사용하는 이유 일반변수와 달리 State 변수의 데이터가 변경이 되면 자동으로 재 렌더링이 된다. 즉, 재렌더링 때문에 사용하는 것이다. 물론 개발모드에서는 일반 변수도 재 렌더링이 되지만..
웹 풀사이클 데브코스 TIL 50일차 리액트 리액트는 싱글페이지 어플리케이션 기반이다. 따라서 화면 이동을 할때 더 부드럽게 동작한다. 리액트의 동작원리 리액트는 더블 버퍼링 기법을 사용한다. 더블 버퍼링은 실시간으로 화면에 렌더링을 하면 그래픽 부하가 심해지니 똑같은 데이터를 메모리에 복사해서 연산을 한후 카피하는 방식으로 동작한다. 초기 랜더링: 컴포넌트를 생성하고 가상 DOM을 생성 가상 DOM 변경 재조정 실제 DOM 업데이트 가상 DOM(메모리 영역)에 상태 변경된 부분을 이전 상태와 비교해서 확인하고 재 렌더링 한다. 리액트 프로젝트 생성 리액트 공식 홈페이지에서 리액트를 어떻게 사용하는지에 대해 알려주고 있다. 우리는 Create React App 이라는 방식으로 프로젝트를 만들어 볼 것이다. https://ko.legacy.r..

티스토리툴바