개발일지

return ( 🔥Working {/* isDone의 상태에 따라 todo가 반환된다. */} {list .filter((item) => !item.isDone) .map((item) => { return ( // 필터링된 div 컴포넌트와 연결 ); })} 🌈Done! {list .filter(function (item) { return item.isDone; }) .map(function (item) {..

TodoList 과제 필수 구현 기능제목, 내용을 입력하여 Working에 추가, 삭제 완료 버튼을 누르면 이벤트를 받은 todo가 Done로 내려가고 취소를 누르면 다시 Working로 돌아올 것초기값 설정const [list, setList] = useState([ { id: 1, title: "todoList", content: "과제를 해봅시다", isDone: false, regDate: (() => { const now = new Date(); const today = now.getFullYear() + "년" + (now.getMonth() + 1) + ..

컴포넌트에 클릭 이벤트 적용방법컴포넌트에 버튼을 만든다onclick={(e) =>{ alert('이벤트'); }} 인라인으로 직접 이벤트를 작성해줘도 되지만, 함수를 작성하여 컴포넌트에 함수를 연결해주었다주의 * onclick 안에 함수를 연결해줄때 함수명(); 이런식으로 소괄호를 할 경우, 연결이 아닌 해당 함수의 호출이되어버린다    부모 자식 컴포넌트 연결하기값을 보낼 부모 컴포넌트의 return에 자식 컴포넌트를 입력하면 부모, 자식 컴포넌트가 서로 연결되어 "나는 아들입니다" 메세지가 화면에 나온다  컴포넌트에 props 전달하기props란 컴포넌트끼리의 정보 교환 방식이다부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 컴포넌트 간의 정보 교류방법이다props는 반드시 위에서 아래 방향으로 흘..

npm | Yarn  JavaScript 언어를 위한 패키지 매니저로, 프로젝트에서 필요한 패키지들을 관리하고 설치하는 데 사용된다. 이전에는 둘이 속도 부분에서도 차이가 있었다고 하지만, 이제는 거의 차이가 없다고 한다 npm은 의존관계를 (한 요소가 다른 요소에게서 필요한 것을 얻거나, 다른 요소에 영향을 받아 기능을 수행하는 상태) 가지는 다른 패키지들도 자동으로 설치됨으로 보안 문제가 발생할 수 있다 Yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 하기 때문에 보안이 더 안전하다.Yarn이 npm보다 용량이 더 큰 편이다. 리액트 첫 프로젝트  꼭 Node.js는 LTS 버전으로 설치할 것 프로젝트 폴더를 미리 만들어 준 후 폴더 내에서 Shift + 마우스 오른..

// 댓글 입력 폼 const commentForm = document.querySelector('.commentForm');// 댓글 목록 ulconst commentBox = document.querySelector('.commentBox');// 폼 submit 이벤트commentForm.addEventListener("submit", (e) => { // 폼은 기본적으로 새로고침을한다. 이벤트의 기본 동작을 취소시킴(새로고침 막기) e.preventDefault(); // 인풋 가져오기 const userName = document.querySelector('.userName') const comment = document.querySelector('.comment') const pw ..

Timestamp 타임스탬프현재 시간 또는 특정 시간을 가져온다일반적으로 1970년 1월 1일 00:00:00 (UTC)로부터 경과한 밀리초(milliseconds) 또는 초 단위로 시간을 나타낸다 팀과제 중 로컬스토리지를 이용한 댓글 구현 항목 중 삭제 기능을 구현하려면 로컬스토리지에 삭제 '기준'을 만들어서 삭제해줘야 했는데 작성자, 비밀번호는 중복이 허용되기 때문에 적합하지 않았다.대신 타임스탬프를 이용하여 id대신 고유의 값으로 사용하기로 했다 댓글 생성 시 new Date를 id변수에 담아 생성된 댓글마다 타임스탬프를 넣어준다. // 댓글 객체 생성(작성자, 댓글 내용, 비밀번호) const id = Date.now(); // 댓글 삭제를 위한 id값 const makeComment = {..

Github에 리포지토리 생성 로컬에 생성된 리포지토리 가져오기리포지토리를 넣을 폴더 생성  폴더 내에서 마우스 오른쪽 버튼 클릭  >  Open Git Bash here 클릭   git clone 리포지토리 url (shift + insert 주소 붙여 넣기 하는 방법)   code 리포지토리 이름 (ex Fi  입력 후 Tab 누르면 자동완성) 입력하면 VS코드가 실행된다  파일 수정 후 커밋하기변경 사항이 생길 경우 소스제어 버튼 클릭 변경 사항에 마우스 올리면 + 버튼이 보인다, + 버튼 누르고 커밋할 파일 선택 후 변경 내용 동기화 클릭우측 상단 ... 을 보면 브랜치 변경 또는 생성 풀, 푸시도 가능하다※ Git 명령어도 알아야 하니까 명령어에 익숙해지기 전까진 되도록 사용하지 말자

객체를 변수에 그대로 복사하여 값을 변경할 경우// user 객체 생성let user = { name: "wonjang", gender: "male"};// 이름을 변경하는 함수 , 'changeName'을 정의// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름// 출력값 : 새로운 user 객체// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경했네요! > 가변let changeName = function (user, newName) { let newName = user; newName.name = newName; return newName;};// 변경한 user정보를 user2 변수에 할당// 가변이기때문에 user1도 영향을 받는다let user2 = changeName..

async / await await비동기 작업이 완료될 때까지 코드의 실행을 일시 중지하며, 해당 작업이 완료되면 그 결과를 반환한다.await는 반드시 async 함수(비동기 함수) 내에서만 사용 가능하며, 비동기 작업을 수행하는 함수 내부에서만 사용 가능하다. (예: Promise를 반환하는 함수)   async 항상 Promise(함수의 성공 또는 실패를 반환하는 객체) 를 반환한다.함수 안에서 return 키워드를 사용하여 값을 반환하면, 해당 값은 Promise.resolve()에 의해 감싸져서 Promise로 처리된다 Promise비동기 작업의 완료 또는 실패를 나타내는 객체비동기 작업이 시작되면 Promise 객체가 만들어지고, 작업이 완료되면 해당 Promise 객체는 함수의 성공 또는 실..

이벤트 핸들러Element.addEventListner('click', function (event) {console.log(event);})이벤트 핸들러란 이벤트가 발생했을 때 실행되는 함수매개변수로 event 객체를 받을 수 있음event.target: 이벤트가 발생한 element 이벤트 위임event.target : 이벤트 발생한 요소event.currentTarget: 이벤트 핸들러가 등록되어 있는 요소 제목 내용 Rating: 평점  부모 요소인 ul 태그 이벤트핸들러가 등록되어 있으면 자식 요소인 li, img, h3, p 태그 중 어떤 것을 클릭해도 부모 요소의 이벤트 핸들러가 실행된다.이벤트 위임을 잘 다루려면 event.target, event.curre..