IAM 사용자를 생성한뒤 IAM사용자로 로그인해서 시작함. 가비아에서 아무 도메인이나 하나 구매한 상태에서 시작함. 0. Route53 호스팅영역 생성 DNS관리 밑에 작은 호스팅영역 생성 클릭. 가비아에서 구매한 도메인을 입력하고 바로 생성. Route53은 후반부에 마저 설정해줄 예정이다. 1. S3 버킷 만들기 원하는 버킷 이름을 설정해준다. aws리전은 서울로 설정. ACL설정은 여기 올린 객체의 소유권을 지금 생성한 이용자로 할지, 아니면 다른 계정에서 업로드한 사람이 소유할지 옵션인데, 추후에 필요시 활성화해서 사용하자. 우린 정적 사이트를 호스팅하지만, CloudFront를 이용해서 호스팅하므로 아래와 같이 체크한다. 참고로 만들어진 버킷 속성에 있는 아래 옵션도, 우리는 cloudFront..
1. 기본 설정, Devtools, Options React Query의 설치 및 초기 설정 $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query const queryClient = new QueryClient() function App() { return ( // Provide the client to your App ) ========== function Todos() { // Access the client const queryClient = useQueryClient() ... React Query Devtools의 설치 및 활용 방법 $ npm i @tansta..
https://flatland.shop/ https://github.com/taehyunkim3/hhblog-team9-Front GitHub - taehyunkim3/hhblog-team9-Front Contribute to taehyunkim3/hhblog-team9-Front development by creating an account on GitHub. github.com React App flatland.shop trouble shooting [로그인, 회원가입 먹통] : 아이디 중복등으로 오류가 있는 경우, alert창으로 알려주고 새로고침하여 데이터를 reset시킴. [회원가입 어려움] : 회원가입에 필요한 폼을 줄이는 대신, 그 폼을 수월하게 작성하기 위해 최대한 많은 정보를 실시간으로 ..
악수(Handshake): 이는 클라이언트(예: 웹 브라우저)와 서버가 처음 만나 서로 인사를 나누는 과정을 의미합니다. 이 단계에서 양측은 서로 데이터를 주고받을 수 있는지, 어떤 방법으로 데이터를 주고받을 것인지를 확인합니다. 공개키와 대칭키: 여기에서 공개키 방식은 각 키가 다른 암호화 방식입니다. 공개키로 데이터를 암호화하면 비공개키(혹은 개인키)로만 복호화가 가능합니다. 그러나 이 방식은 컴퓨터 자원을 많이 사용합니다. 대신 대칭키 방식은 암호화와 복호화에 같은 키를 사용하므로 효율적이지만, 키를 안전하게 공유해야하는 문제가 있습니다. SSL의 방식: SSL은 이 두 방식의 장점을 결합합니다. 클라이언트와 서버는 처음에는 공개키 방식을 사용하여 안전하게 대칭키를 공유하고, 이후에는 대칭키를 사용..
window.location 객체는 브라우저 창의 현재 URL을 표현하며, 다양한 방법으로 사용자가 페이지를 이동하거나 URL 정보를 다루는 데 사용될 수 있습니다. window.location 객체는 주요한 여러 속성과 메서드를 가지고 있습니다. window.location.href : 전체 URL을 얻거나 설정하는 데 사용됩니다. 아래는 그 예시 ``` console.log(window.location.href); // 현재 페이지 URL을 출력 window.location.href = 'http://www.example.com'; // 페이지를 www.example.com으로 이동 ``` window.location.replace(URL) : 지정한 URL로 이동하되 브라우저의 히스토..
.env 파일은 환경 변수를 저장하는 데 사용되는 파일입니다. 여기에는 데이터베이스 연결 문자열, API 키, 암호 등과 같은 민감한 정보를 저장할 수 있습니다. 이 파일은 저장소에 커밋되지 않아야 하며, 각 개발자나 환경에 따라 달라질 수 있는 설정을 관리하는 데 유용합니다. .env 파일을 사용하면 코드가 서로 다른 환경에서 실행될 수 있게 되며, 그로 인해 개발, 테스트, 프로덕션 등에서 약간씩 다른 설정을 적용하는 것이 가능해집니다. CRA(Create React App)와 Vite에서 .env 파일을 사용하는 방법에는 약간의 차이가 있습니다. CRA(Create React App) CRA에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 이러한 변수는 REACT_APP_ 접두사로 ..
https://codesandbox.io/s/wonderful-feather-hlqvxt?file=/src/pages/Todos.jsx 1. 페어리뷰(level3) : select map으로 뿌려줬어야함 쿠산님과 페어프로그래밍: redux 10번은 더 써봐야함. 안보고 쓸 수 있도록. ->codesandbox 2. 공부 열심히 하되, 실제 코드를 안보고 쓰는 습관을 들여볼것(아주 기본적인 것은 그렇게 해야 손에 익힐 수 있음) 코드컨벤션 만들기. 설계 이후 코딩 시작할것. 깨끗하게 작성하는 습관 들일 것. codesandbox에서 해보면 바로바로 적용이 되어서 좋음. (하드용량 차지 걱정도 없음) 3. 내일 소셜로그인 미리 준비하고 읽어갈것. 너무 어렵다. 목요일 테스트 있음.
1. 블로그 제작 with 민승님 redux복습 infinity scroll + 스켈레톤 UI 제작. 2. figma 기본적인것 다루어보기. 첫번째 조별 과제 -> 같이 기획하고, 같이 api명세서 작성하고, 같이 와이어프레임을 상세하게 그릴 것. 구글등에 클래스, 변수명 규칙을 찾아보고, 일관적이고 세련된 변수명 규칙을 지어놓을것. react query+recoil이 대세라고 함. 큰 노트에 전체 그림을 그림그리며 파악하는거 좋음. github project->issue 자동연결 해보기. git-> pullrequest redux로 input상태관리하는것 익숙해질것. redux처럼 middleware 표로 만들어보기. 디버깅, 공식문서. 함께 협업한 민승님의 TIL 오늘은 태현님과 함께 블로그 프로젝트..
리엑트의 라이프사이클 매서드, react hook 모든 리엑트 컴포넌트는 아래와 같은 라이프사이클이 존재한다. 저, 리액트의 라이프사이클 메서드는 컴포넌트가 생성되고, 업데이트되고, 사라질 때 동작하는 코드를 넣을 수 있게 도와준다고 보면 된다. 그 중에서도 대표적으로는 constructor, componentDidMount, componentDidUpdate, componentWillUnmount 가 있다. 처음에는 클래스형 컴포넌트가 주로 사용되었는데, 이 친구들은 라이프사이클 메서드를 이용해서 상태 관리나 라이프사이클 이벤트를 처리했다. 그런데 리액트 v16.8부터 Hook이라는 걸 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. useState는 컴포넌트의 상태를 관리하고, us..
redux의 기본버전의 데이터 흐름을 이해해야 toolkit을 쓰던 미들웨어를 쓰던 이해가 갈것 같아서 클론을 해봐도 머리에 안들어와서 표로 만들어 보았다. 여기서 todosContainer.js는 connect함수가 아닌 useDispatch, useSelector를 사용하면 없어도 되고 한단계 단순해지지만, 그럴경우 dispatch를 사용하는 함수를 useCallback으로 감싸주고, 해당 부모 컨테이너가 리랜더링될 경우, props가 바뀌지 않아도 리렌더링이 되므로, 해당 컴포넌트를 React.memo로 감싸주어야 한다. 작성중..
1. 오늘 한것 react level3 과제 - 버튼, 모달만들기 (민승님 -> 포탈 사용) - input, select 만들기 postman설치, api키 저장 youtube 클론코딩 시작 tailwind css 기본셋팅(reset.css가 tailwindcss보다 하위에 있으면 안됨!!) 기본 tailwind 시작. react-router-dom 6.4버전 사용법 2. 궁금한것 styled-components 이름짓는 방법 (Modal컴포넌트를 분리할때, 파일명도 모달이고 내부 컴포넌트 최상위도 모달인데 뭘 바꿔야하지?) 3. 어제한것 자바스크립트 복습: promise, async, await
1. 오늘 한일 리엑트 강의 정리중. redux정리 2. 하고싶어진 일 tailwind 오늘중으로 리엑트 강의 완강후 복습.(리엑트개념정리강의. 클론코딩부분 제외) react query까지. 용어정리(개념보다 용어가 어려움. 그 단어에 익숙해져야, 그 단어로 파생되는 개념을 빠르게 이해할 수 있음) 커스텀훅 사용해보기. (값이 아닌 로직을 재사용. use어쩌구 이렇게 이름지으면 너무 근사할것 같음.) 3. 해야했었는데 어제 til 빼먹음. 4. 참고 자료 https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/ FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블 이혁원(..
기억해야 할 것 패키지 설치 yarn add redux react-redux 폴더구조 생성 src > redux > config > configStore.js src > redux > modules > todos.js users.js... configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; import todos from '../modules/todos'; const rootReducer = combineReducers({ todos, }); const store = createStore(rootReducer); export default store; index.js impor..
https://leehwarang.github.io/2020/07/28/setState.html React의 setState가 어떻게 동작하는지에 대해 설명하고 있습니다. 여기서 설명하는 주요 개념은 setState가 비동기적으로 동작한다는 것입니다. JavaScript에서 비동기적(asynchronous)이라는 말은 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행한다는 의미입니다. React의 setState 메소드 역시 비동기적으로 동작합니다. 다시 말해, setState를 호출하면, React는 이를 '예약'하고, 모든 JavaScript 실행이 끝난 후에 일괄적으로 상태를 업데이트합니다. 이것이 setState의 비동기적인 특성입니다. 예를 들어, 아래의 코드를 보겠습니다...
1. 오늘 한 일 알고리즘스터디 - 귤고르기 https://school.programmers.co.kr/learn/courses/30/lessons/138476 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 구현코드 로직 // 1. key, value 자료구조를 사용 => key 값에 귤의 크기, value값에 개수로 정리 // 2. 정리한 값을 value가 큰 순서대로 정렬 가능한가? // 3. 개수가 큰 값부터 빼낼 때, value값과 k값을 비교해서 k가 더 크다면 k - value => //answer + 1, k가 더 작다면 answer에 +1 ..
1. 오늘 한 일 kakao 검색 API 미니프로젝트 https://github.com/taehyunkim3/study-react-search GitHub - taehyunkim3/study-react-search: 리엑트 스터디 2-search 리엑트 스터디 2-search. Contribute to taehyunkim3/study-react-search development by creating an account on GitHub. github.com 스파르타코딩 react 심화 redux 2. 배운것 axios, REST API 이용해서 데이터 받아오기.->API 명세서 읽고 반영하기. rafce useSelector redux .env VITE .env 3. 리팩토링시 반영할 것 + 이해해야 하..
.env파일을 가지고 작업을 하는데 분명 .gitignore에 선언을 해뒀음에도 불구하고 자꾸 git status를 하면 눈에 보이는 현상이 발생하는 경우가 있다. 이는 .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이라서 그렇다. 해결방법은 간단하다 원격 저장소의 .env파일을 지우면 되는것이다 git rm .env --cached git commit -m "remove .env file from git repo" git push 보통 원격 저장소에는 .env파일을 직접 올리지 않고 .env.example 같은 형식으로 다르게 올려서 공유한다. (key값만 빼놓음) 위에 명령어로는 로컬 파일은 지워지지 않으니 걱정 말것. .gitignore에 .env 관련 파일들이 제대로 적혀있나 확인 한번 하..
1. 오늘 한 일 특강(김태선 튜터님) 클론코딩(진행중. search) 깃헙 정리 리엑트 심화주차 수강 2. 오늘 삽질 뭘 해야할지 애매해서 이것하다가 저것하다가 결국 아무것도 끝내지 못함. 기록은 하지만 정리를 하지 않아서 결국 똑같이 증발되어 같은걸 계속 찾고있음. 블로그 정리의 필요성. 시간이 어느정도 걸리더라도 할애해야함. 코딩 전체 시간의 50%이상, 코딩테스트 하루 한시간, CS스터디 하루 1.5시간+ 3. 오늘 배운것 Redux. git, gh axios vite 배운건 반드시 새롭게 글로 정리할것.
1. 오늘 한 일 페어 나영님과 todolist 제작 리덕스 공부. 2. 요즘 며칠 한일 정리를 못함. git commandline으로 사용하는 방법 익힐것. rebase? usememo, useCallback, React.memo -> 사용 용도 익힐것. onSubmit, onChange, onClick-> useCallback 거의 붙여야 함 contextAPI CSS빠르게 하는것 익힐것.
Todo import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO" const addToDo = (text) => { return { type: ADD_TODO, text } } const deleteToDo = (id) => { return { type: DELETE_TODO, id } } const reducer = (state = [], actio..
1. 한일 페어프로그래밍 리뷰 기술멘토님 면담 2. 느낀점 기초의 중요성. 기초부터 탄탄하게 다져진 페어분의 코드를 보며 많은 생각을 함. 3. 삽질 내가 짠 코드 설명을 못함 ->완전한 이해를 하지 못함 + 변수명이 직관적이지 않음 + 폴더구조가 복잡함. 4. 내일 리엑트 숙련과정 수강 (수요일 저녁까지 완료)
virtual DOM, props, state 리엑트는 가상돔이라는 개념을 가지고 있음. 가상돔은, 브라우저가 랜더링하기 위해 생성하는 DOM을 매번 전부다 새로 생성하는게 아니라, 매번 DOM의 사본을 가상돔이라는 이름으로 생성해서, 기존 DOM과의 차이점만 비교해서 랜더링 함. 이로써 랜더링 해야하는 DOM의 범위를 제한해서 브라우저 랜더링 속도를 향상시킴. state는 이런 DOM을 업데이트 할때, 재랜더링의 기준이 되는 데이터임. 가상dom은 state의 메모리변화값을 감지하여, 변화유무를 판단함. 이 과정의 특성상, 메모리 값이 변하지 않고 데이터가 변하는 경우 데이터 변화를 시스템이 감지할 수가 없어 여러 문제가 발생. 따라서 리엑트에서 배열, 객체등의 자료를 다룰때 불변성을 유지하는것이 매우..
