video태그 // 소스 2개이상 // 소스 한개 태그 안의 순서대로 우선순위로 보여준다 src: 여러개면 태그로, 한 개면 그냥 속성으로 autoplay: 자동재생 controls: 비디오 제어 컨트롤 제공 loop: 반복 재생 muted: 음소거 설정 webkit-mask-image .camera .stage video { position: absolute; top: 36px; left: 76px; /* 비디오 기울어짐 표현을 위해 가려지는 부분적용 호환성을 위해 webkit도 작성 */ -webkit-mask-image: url('../images/camera_video_mask.png'); mask-image: url('../images/camera_video_mask.png..
개행 문자(Newline) 설정 macOS, Linux $ git config --global core.autocrlf input Windows $ git config --global core.autocrlf true 사용자 정보 등록 $ git config --global user.name 'YOUR_NAME' $ git config --global user.email 'YOUR_EMAIL' 사용자 정보 확인 (Q키를 눌러서 종료) $ git config --global --list Netilify 배포해주고 수정시 자동으로 수정한 버전 배포해줌 브랜치 이름 변경 netilify에서도 설정 수정해 줘야함 clone $ git clone 원격저장소주소 vscode 새창에서 열기 code . , 현재창에서..
1. Stack Overflow 클론 코딩하기 프리프로젝트는 2주간 스택오버 플로우를 클론 코딩하기가 과제였다. 짧은 기간이라 모든 기능을 다 구현할 수는 없었다. 그래서 가장 핵심 기능인 질문하고 질문에 대해 답하는 기능을 중점으로 구현하였다. 최종 구현한 기능 및 페이지 - 로그인 및 회원가입 페이지 - 전체 질문을 볼 수 있는 메인 페이지 - 질문의 상세내용을 볼 수 있는 페이지 - 질문을 작성하는 페이지 - 질문을 수정하는 페이지 - 댓글을 수정하는 페이지 - 답변을 수정하는 페이지 나의 담당 - 답변 CRUD - 사이드바 - 사이드에 붙어 있는 메모 사용한 기술 - React - Zustand - CSS Module - React Quill 2. 어려웠던 점 2-1. 기본 세팅 및 담당 나누기 ..
1. 브랜치 1-1. Git flow main: 사용자에게 언저든지 제품으로 출시할 수 있는 브랜치 dev(elopment): 다음 버전 배포를 위한 "가발 중" 브랜치 feat(ure)/작업이름: 기능 개발, 리펙토링, 문서 작성 등을 위한 브랜치 feat(ure)/작업이름에서 개인 작업을 하고 기능을 완성 했다면 dev(elopment)에 Pull requests 요청을 해서 코드리뷰 후에 merge 해야한다. squash & merge를 하면 이전 브랜치에서 작성한 커밋을 하나합칠 수 있다. 이건 선택사항으로 같이 작업하는 사람들에 맞춘다. 혹시 PR요청 전에 다른 사람이 머지했다면 로컬로 pull 받아온후 머지하고 다시 PR한다. 2-1. 브랜치 생성하기 / 변경하기 (git switch) # 새..
1. Thunk란? 리덕스의 액션에서 비동기 처리를 할 수 있게 해준다. 2. 사용법 리덕스 설치 및 thuck 설치 npm install @reduxjs/toolkit react-redux npm install redux-thunk store에 추가 해주기 import { applyMiddleware, legacy_createStore as createStore } from 'redux'; import { reducer } from '../Reducers'; import ReduxThunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(ReduxThunk)); export default store; thunk를 사용하면 액..
1. 최종 완성 모습 2. 어려웠던 점 2-1. json server와 연결하기 위한 수정 데이터를 state에만 관리 했는데 json server를 사용해 목업서버에 데이터를 저장하게 수정을 하게 되었다. 근데 패치를 리덕스의 과정 중 어디에 넣어야할지 잘 모르겠어서 어려웠다. 해결방안 fetch 함수-> 응답 -> 데이터 가공 -> dispatch-> action-> reducer 순으로 작성했다. 좀 더 알아 보니깐 일반적으로 미들웨어, redux-thunk를 사용해서 비동기 작업을 하는 것 같다.. 나중에 시간되면 다시 수정해야할 것 같다ㅜ 2-2. josn server의 patch ptach 메서드로 데이터를 보내니깐 응답이 `{}`으로 왔다. 해결방안 바디에 데이터를 잘 못 보내서 발생한 문제..