반응형 전체 글99 (진행 중)_스노우_팀장님 프로젝트_FE 프로젝트 명가계부 프로젝트프로젝트 설명자신이 소비한 항목들을 리스트로 볼 수 있는 가계부 웹 어플리케이션을 만들어 봅시다.요구사항create-react-app 으로 프로젝트를 세팅합니다.다음과 같은 항목들을 form input을 통해 입력을 받습니다.이름 : string가격 : number유형 : string구입 날짜 : date메모 : string체크박스로 체크가 된 경우만 메모 input을 보여주고 값을 받습니다.재구매 의사 : boolean라디오 버튼을 통해 구현입력받은 소비 항목들은 최신 순서대로 리스트로 보여집니다.유형별 필터를 통해 유형에 맞춰 필터링된 리스트를 볼 수 있습니다.정렬 기준을 다음과 같이 가지고 정렬해 줄 수 있습니다.가격 높은 순가격 낮은 순최신 순오래된 순기간을 정해서 해당 .. 2024. 6. 14. 2024. 06. 13 (목) 7주차 - Daily Coding - Day04 // 주말 복습 필수! 44강 데이터 정렬- Number 정렬- String 정렬- Object 정렬 Number 정렬javascript의 .sort() 메서드=> string 기준으로 정렬이 이루어진다 .sort() 메서드 안에서 정렬 기준을 comparator 함수로 설정=> 내부에서 .sort 정렬할 때 일단 스트링으로 변환하고 정렬하기 때문에 .sort() 안에서 정렬 기준을 comparator 함수로 설정 필요. string 정렬- localeCompare() 메서드를 통해 문자의 순서를 정렬할 수 있다. 45강 - 리액트 심화- 사이트 이펙트 처리- 최적화 기법- HTTP 요청 리액트 심화JSX를 조금 더 깊게 다뤄보기- Fragment- Portals- Refs 사이트 이펙트Eff.. 2024. 6. 14. 2024. 06. 12 (수) 7주차 - Daily Coding - Day03 // 주말 복습 필수!! 42강이벤트 버블링이벤트 캡처링 브라우저의 이벤트 순서이벤트(예시 - 클릭) -> 이벤트 리스너(감지) -> 이벤트 핸들러(로직 실행) 1. 이벤트 캡처링 - 이벤트 실행이 어디서 일어나는지 찾아가는 거 2. 이벤트 타겟팅- 발생 이벤트에 가서 이벤트 핸들러 확인 3. 이벤트 버블링- 타겟한 이벤트가 실행되고 다시 위로 올라가서 확인한다 function App() { if(!document.getElementById("eventCapture")) return null; document.getElementById("eventCapture").addEventListener("click"), () => console.log('div event capture'),.. 2024. 6. 12. 2024. 06. 11 (화) 7주차 - Daily Coding - Day02 39강디버깅 Part 1.- 에러 메시지 확인하기- 컴파일 에러와 런타임 에러의 차이점- 중단점 찍기 디버깅이란- 버그를 잡는 과정을 말한다- 1940년 당시 엄청 큰 컴퓨터에서 벌레 한 마리가 들어가서 실행이 멈춰버리는 사건이 발생했고, 그 벌레를 컴퓨터에서 빼니깐 이슈없이 컴퓨터가 다시 작동하게 되었다 그래서 오류를 해결하는 과정을 '디버깅' 이라 말한다. 디버깅 - 에러 메시지 확인하기- 터미널, 콘솔, 리액트 자체의 에러 메시지를 통해 확인한다 컴파일 에러 VS 런타임 에러컴파일 에러 (Compiled with problems) 런타임 에러( 컴파일 과정을 마친 후에 사용자에 의해 실행 시 에러)- Syntax Error- Type Error- Refernece Error=> 전적으로 개발자.. 2024. 6. 12. 7주차 스노우 DAY01 팀장님 문제 - 20240617 완성 Q. 해당 상품 상세 페이지를 styled-components와 tailwindcss 를 가지고 각각 구현해보기. 문제를 푼 순서 (아직 Styled-components와 tailwindcss 적용 전!)1. 터미널을 켠다2. npx create-react-app [원하는 프로젝트 이름] ex) npx creat-react-app first-project3. 만든 프로젝트 경로로 이동한다 cd [원하는 프로젝트 이름] ex) cd first-project4. npm start 구문 터미널에 입력(4-1. visual studio에서 src 폴더 내 'components' 폴더를 생성한다)5. App.css / App.js 안의 내용을 전부 지운다=> 실행 된 리액트 app 화면은 흰색 화.. 2024. 6. 10. 이전 1 ··· 8 9 10 11 12 13 14 ··· 20 다음 반응형
