본문 바로가기

Frontend Study - 2

 (94)
AWS : EC2 프론트 배포 따라하기 1. AWS 로그인 / 서비스 - EC2 클릭 2. 인스턴스 시작 / Quick Start - Ubuntu, 프리티어 사용 가능. 3. 인스턴스 유형 : t2.micro (프리티어) 4. 키페어 : 키페어 생성 (ex) turtlehome) , 다운로드 되는 파일 따로 저장해두기 한번만 다운로드 가능. 5. 네트워크 설정 : 기본값으로 설정 / 보안그룹 생성 : 보안그룹규칙 추가 - 포트범위 8,000 / 소스유형 위치 무관 6. 스토리지 구성 : 8gb / gp2, 8gb 넘어갈 시에 비용이 발생된다. 7. 고급 세부 정보 - 종료방식 중지 / 종료방지 활성화 8. 4번에서 다운로드 된 파일 터미널로 접근해서 권한 수정 chmod 400 turtlehome.pem 9. 그 다음 접속하기 ssh -i t..
React : useNavigate안에 값 넣어서 다음페이지로 전달하기. (feat. useLocation) 1. A페이지에서 fetch를 통해 백엔드에서 데이터를 받아옴. 2. 그 중에서 클라이언트가 클릭해서 선택한 값들을 3. 다음페이지인 B페이지로 보내야 하는 상황. 클라이언트가 값을 선택하고 다음페이지로 넘어갈 때 해당 값을 백엔드에 보내주고, 다음 페이지들에서 fetch를 통해 받아오면 수월했겠지만 그렇게 구현이 어려운 상황이었다. redux를 활용하는 방법과, Router단에서 state를 만들어서 props로 전달해 주는 방법 두가지 정도가 생각이 났었는데 다른 좋은 방법이 있었다. useNavigate 를 이용하는 것. 보통 useNavigate를 사용 할 때는 아래 처럼 하나의 인자를 이용해서 가고 싶은 곳을 지정하는 정도로 사용해왔다. import {useNavigate} from 'react..
Git : Rebase 활용법 & fast-forward / three-way merge & cherrypick 1. Fast-foward merge master 브랜치에서 다른 branch를 생성하는 순간, 그 생성 시점의 기준이 됐던 commit 지점을 base라고 한다. 즉 base란 master브랜치와 새로 생성된 branch 두 브랜치가 공통으로 가지고 있는 commit 상태이다. 아래 흐름을 보면 master 브랜치와 dev1 브랜치가 공통으로 참조하는 commit은 (base) 동일 선상에 위치하고 있는 상황이다. (이 후에 나오는 three-way merge를 보면 다른 선상에 위치하고 있는 상황이 어떤 것인지 확인할 수 있다. ) 이 때 두 브랜치를 Fast-foward 상태에 있다고 한다. fast-forward 관계에 있는 브랜치에서 git merge 명령을 입력하면 새로운 commit이 생기지..
React : 컴포넌트에 전달할 props & 속성값을 객체안에 넣어서 활용하기. 달력 라이브러리를 활용하는데, 조건에 따라 다른 값이 컴포넌트에 전달되어야 했다. 편도냐 왕복이냐 조건에 따라서 달력에서는 편도일 경우 -> 출발일 날짜만 선택할 수 있게 하거나 / 왕복일 경우 -> 출발일, 도착일 두 날짜를 선택할 수 있게 해야 했다. 기본적으로 이런식으로 전달해주는 값 안에서 삼항연산자를 활용해서 구현했었다. 그런데 이번 경우에는 워낙에 조건에 따라 전달해 주어야 하는 값이 많았다. 예를들어 편도냐 왕복이냐에 따라 다르게 들어가야 하는 속성 값이 10개라면, 그 10개의 속성에 대해 일일히 조건을 주어야 하는 것이다. props 하나 마다 일일이 onewayOrRound? 를 물어가며 값을 정해주는게 비효율적이라는 생각이 들어서 객체 안에 담아서 한번에 조건을 주면 좋겠다는 생각을..
React : React Datepicker 달력 라이브러리 캘린더 만들기 https://reactdatepicker.com/ https://github.com/Hacker0x01/react-datepicker 여러 달력을 찾아보고 수소문 했지만 활용에 있어서는 이것 만한게 없었다. 라이브러리를 그대로 가져다 쓸 경우에는 느낌있게 생긴 다른 달력 라이브러리들도 좋겠지만, 달력 안의 기능들부터 스타일까지 수정해야 할 것들이 많은 경우에는 datepicker를 추천하고 싶다. 대표사이트에 들어가보면 여러 기능들이 친절하게 설명되어 있고, 나름 찾기도 쉽다. 이용하는 사람들도 많았었기 때문에 문제가 생겨서 구글링 했을 때에 정보들도 잘 나오는 편이다. reactdatepicker 사이트의 왼쪽 리스트를 클릭하면 선택한 기능에 대한 코드를과 예시를 볼 수 있다. 자체적으로 많은 속성..
22.07 week 4 - 구조분해할당, 프롭스의 활용, 컴포넌트 관리, useState 최소화, mouse over / enter차이 1. 프롭스의 활용 단순히 컴포넌트에 state를 넘겨주거나, 함수를 넘겨줄 때 위주로 사용했는데 다양하고 영리하게 사용이 가능했다. 컴포넌트 자체에 데이터를 넘겨줄 때 도 데이터를 넘겨줄 수 있다. 1) 2) data.map((list) => return ()); 2. mapping시 key 속성은 제일 바깥의 요소에 부여한다. Array.map(el => { return ( {el.content} ) }) 3. input 구조분해 할당 예시 // Before if (event.target.value.includes("@") && event.target.value.length >= 5) { setIsIdValid(true); } else { setIsIdValid(false); } // After co..
CSS : Styled-Components 활용법 + typescript 기존 css의 경우 scss와 같은 전처리기가 있었음에도 동적으로 사용하기에는 불편함이 있었습니다. 인라인 스타일을 사용하거나, 클래스명을 이용해야 했습니다. 인라인 스타일의 경우 적용 순위가 높아지고, 클래스명의 경우 작명과 같은 불편함이 있었습니다. 이러한 점을 CSS in JS를 통해 해결할 수 있었습니다. CSS in JS는 css의 변수와 함수를 js파일 안에서 사용할 수 있게 합니다. Styled-Components는 현재 가장 많이 쓰이고 있는 CSS in JS 중 하나입니다. 1. 설치 와 실행 $ npm install styled-components import React from 'react'; import styled from 'styled-components'; 기존 css의 경우 ..
React : useRef. 값이 변경되어도 렌더링 되지 않는 변수 만들기. 1) 다시 렌더링이 되어도 동일한 참조값 유지. React 컴포넌트는 State가 변할 때마다 다시 렌더링이 되고 내부의 변수들이 초기화 됩니다. 이것을 원하지 않을 때 useRef 를 사용할 수 있습니다. Ref 안의 값이 변경 되어도 컴포넌트는 다시 렌더링 되지 않습니다. 불필요한 렌더링이라면 State대신 Ref를 사용해서 막을 수 있습니다. mport React, { useState, useEffect } from "react"; function ManualCounter() { const [count, setCount] = useState(0); let intervalId; const startCounter = () => { // 💥 매번 새로운 값 할당 intervalId = setInterva..

티스토리툴바