데모데이 2023/05/31 팀 명 : SIDE QUEST 프로젝트 명 : SIDE QUEST FE 팀원 : 신동민(팀장), 이혜나, 최기랑, 전준형 BE 팀원 : 이정철(팀장), 윤승현, 이동엽 배포 링크 : SIDE QUEST About SIDE QUEST :

9일차

8일차

7일차

5일차 오전 10시 : FE 회의 오후 2시 : 통합 회의 오후 5시: 통합 회의 팀원 회의록 멘토피드백 사용자 요구 정의서 다시 상중하 배분 채팅기능 대신 쪽지 기능으로 대체 id || 전화번호 인증 방식 => 이메일 인증 방식 🌈 회고 어제 만든 헤더를 팀원들과 화면공유하면서 픽셀 조정 및 픽스하자고 조정하고 로고 이미지 사이즈 및 파비콘 사이즈...

3일차 gitflow (commit message, milestone, issue etc..) main color, theme, fontSize 회의 백앤드 : 내일 중으로 api 받을 수 있다는 점. 프론트 : 내일 중으로 코드 개발 통합 : 로고, 색깔, 요소 등

2일차 디자인 구성 피그마 역할분담 홈 : 이혜나 회원가입/로그인/마이페이지 : 전준형 글 관련 : 최기랑 프로젝트 관련 : 신동민 와이어프레임 회의 사용자 요구 정의서 (오늘 저녁까지 백엔드께 전달) 깃플로우/ 이슈 / 브랜지 / Milestone (내일) 🌈 회고 전체 팀중 제일 빠르게 진행되고 있을 것이다. 하루만에 기획을 이어 오늘 하루만에...

1일차 팀확정 팀명 : 사이트 퀘스트 프론트 4 : 백엔드 3 (예상치 못한 프론트 인원추가!!! 뚜둥!!!) 기술스택 typescript style components react query recoil next.js 구성 메인 : 홈 페이지 회원 회원가입 페이지

🐬2주간의 pre-project 12 일차!! ✅ 로그인페이지 - 유효성검사 완료/ 페이지 접근제한 ✅ 회원가입페이지 - 유효성검사 ✅ 푸터 - 프론트/백엔드 깃헙 연동 ✅ 홈 - 이미지 로더 🚫 소셜회원가입 ⛔️ 에러 23/04/23 - 백엔드1 : 프론트1

🐬2주간의 pre-project 6 일차!! 로그인 페이지 헤더 회원가입 페이지 소셜회원 푸터 ⛔️ 에러 1) 깃 에러 => 협업이 처음이다보니 하루에 풀만 3-4번 받는다. 그래서인가 매일 에러 고치기.. 2)깃 에러 => 재사용하기 위해 인풋창와 버튼을 따로 빼놓은 폴더를 소통 오류로 삭제를 해서 브랜치 잃고 방법은 다시 클론해서 다시 커밋하...

🐬2주간의 pre-project 시작!! ####1. 프론트엔드 개발자의 개발과정 사용자 요구사항 정의서 ![](https://velog.ve

2.1 변수 선언하기 2.1.1 const 키워드 상수는 값을 변경할 수 없는 변수이다. 상수에는 값을 재설정하는 것은 불가능하다. 상수 값을 변경하려면 에러 발생 2.1.2let 키워드 구문적인 변수 영역 규칙을 지원한다. 자바스크립트에서는 중괄호{} 를 사용해 코

React.lazy() -React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링할 수 있습니다. React는 SPA(Single-Page-Application)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다고 앞의 챕터에서 학습했습니다. React는 React.lazy를 통해 컴포넌트를 동적으로 import...

React의 주목해야 할 기능 React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리입니다. 이번에 React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다는 점입니다. [그림] React 18로 업데이트 된 뒤 보이게 된 경고문 해당 경고문은 이...

Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을

Hook은 함수 컴포넌트에서 사용하는 메소드입니다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었습니다. 많은 React 개발자들이 이 클래스 컴포넌트를 사용하여 React 앱을 개발해왔습니다. 이런 클래스 컴포넌트는 복잡해질수록 이해하기 어려워졌고, 컴포

Virtual Dom React는 UI 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM 이라는 가상의 DOM 객체를 활용한다. 이는 실제 DOM 의 사본의 개념이고, React의 실제 DOM 객체에 접근하여 변환 전과 변화 후를 비교하고 바뀐 부분을 적용한다. Virtual DOM 이 나오게 된 배경 Virtual...

번들링의 필요성 내가 작성한 HTML, CSS, JavaScript 파일을 그대로 전송하는 것이 무슨 문제가 있을까요? 큰 문제가 없을 수 있습니다. 하지만 아래와 같은 상황들이 일어난다면, 어려움에 처할 수 있습니다. 두 개의 .js 파일에서 같은 변수를 사용하고

타입별칭 vs. 인터페이스 debut: number와 namae: string을 가진 객체를 타입 별칭으로 구현하는 간락한 구문 인터페이스로 구현한 동일한 구문 => 위의 두 구분은 거의 같다. tip) 세미콜론(;)을 선호하는 타입스클비트 개발자는 대부분 인터페이스 뒤가 아닌 타입별창 뒤에 세미콜론을 넣는다. 이 기본 설정은 세미콜론을 사용해 변수를...

타입스크립트는 초기 배열에 데이터 타입이 있는지 기억하고, 배열이 해당 데이터 타입에서만 작동하도록 제한한다. (배열이 데이터 타입을 하나로 유지) 아래의 예제를 보면 string 타입 값 추가는 하용되지만 다른 데이터 타입 추가는 혀용되지 않는다. 배열 타입 배열을