프론트엔드 가보자GO 프론트엔드 가보자GO

🤓오늘 공부한 내용 📌Todo 추가하기 1. 추가하기 버튼 const clickAddButtonHandler = () => { const newTodo = { id: todo.length + 1, title, content, }; setTodo([...todo, newTodo]); //다시 빈 값으로 바뀌도록 구성 setTitle(""); setContent(""); }; event를 인자로 받는다 이벤트핸들러를 따로 변수로 할당해주기 리스트 추가하는 방법 title state와 content state를 엮어서 state를 하나 더 추가해주기 새로운 형태의 변수를 만들어서 (todo state)배열에 더한다 id: todo.length + 1 ⇒ todo가 원래 갖고있던 length에 +1 state에..

💻구현해야 할 기능 UI 구현하기 Todo 추가 하기 Todo 삭제 하기 Todo 완료 상태 변경하기 (완료 ↔ 진행중) 🤓오늘 공부한 내용 react파일을 설치하는 방법이 두가지가 있는데 git bash에서 yarn을 설치하는 방법도 있지만 이번에는 터미널에서 설치하는 방법을 사용해보고자 'npx create-react-app (파일이름)' 명령어를 이용해서 설치했다. 파일을 설치해주고 난 후 App.js에서 기존에 있던 컴포넌트 부분을 지워서 준비해준다. 📌Todo List페이지의 기본 뼈대 먼저 세팅 const App = () => { return ( My Todo List React 제목 내용 추가하기 📌Working ✅Done ); }; 페이지의 타이틀 todo 리스트를 추가하기 위한 입력창 생..

💡 State란? 일반 JavaScript 객체 컴포넌트 내부에서 바뀔 수 있는 값을 의미 => 지속적으로 변경이 일어나는 값을 관리 렌더링 결과물에 영향을 주는 정보를 갖고 있다 => 변경될 때마다 구성 요소가 다시 렌더링 State를 만들 때는 useState()를 사용 useState 는 state를 만들어주는 리액트에서만 제공하는 기능(=Hook) State의 값을 변경하기 위해서는 반드시 setState 함수를 이용 💡 setState 란? setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행 state가 변경되면, 컴포넌트는 리렌더링된다 💡 State와 props의 차이점 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리 props는 (함수 매개변수처럼) 컴포넌트..

💡 React.js 란? 규모가 큰 자바스크립트 라이브러리로 사용자 인터페이스(UI)를 쉽게 구성하도록 도와줌 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로 AngularJS, VueJS보다 월등히 인기가 많음. SPA (Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션 2023 Best Javascript https://kinsta.com/blog/javascript-libraries/#the-most-popular-javascript-libraries Facebook에서 소프트웨어 엔지니어로 일하는 Jordan Walke가 2013년에 만들었음 막강한 커뮤니티와 자료를 보유하고 있음 💻 개발환경 필수조건 node.js 설치 (노드 플랫폼에 의해 실행됨) 패키..

📆팀 프로젝트 기간 6/5 ~ 6/9 ✍회고 첫주에는 자바스크립트 강의듣고 2주차에는 개인프로젝트, 3주차에는 팀프로젝트까지 총 3주의 시간동안 바닐라 자바스크립트를 공부하면서 짧은 시간동안 방대한 양의 정보를 공부하려다보니 많이 어렵기도 했고 부담이 조금 있었다. 이미 코딩공부를 선행학습 하신분들에 비해 나는 이번 첫 주에 자바스크립트에 대해 처음 공부를 하게 되어서 많이 어렵기도 했고 이해가 잘 가지 않아서 답답했다. 강의를 들으면 이해는 가는데 내가 직접 코드를 짤 때는 막막하고 강의 내용을 활용을 제대로 하지 못해서 힘들었다. 그래도 개인 프로젝트를 시작하고나서 듣기만 했던 강의가 아니라 내가 직접 코딩을 하면서 조금씩 강의에서 들었던 문법들을 사용하게 되고 아직도 계속 공부중이고 완벽하게 다 알..

❤️Keep (프로젝트를 진행과정 중 다음 프로젝트에서도 유지했으면 하는 부분) 팀 프로젝트의 원활한 진행을 위해 소통을 활발히 하는 부분 공평한 분업을 진행하고 맡은 파트에 대해 각자 책임의식을 가지고 협력하는 부분 자신이 만든 코드에 대해서 상세하게 코드리뷰 하는 부분 모르는 부분을 서로 공유하며 같이 공부할 수 있는 점 서로에게 이쁜 말로 의견을 제시하며 조율하는 부분 ❓Problem 문제점 1. 상세페이지 댓글 기능 부분에서 댓글 삭제시에 비밀번호를 입력하는 창을 prompt()함수를 사용해서 비밀번호 내용이 그대로 노출됨 2. 깃 허브에서 메인 브랜치와 머지하는 부분에서 충돌이 일어남 해결 1. 댓글 삭제시 비밀번호 입력 창을 모달창으로 추가해 비밀번호 내용 노출을 막음 2. 개인브랜치의 푸시가..

🤓오늘 공부한 내용 💡 JSON 정의 JSON은 JavaScript Object Notation의 약자: 대부분의 프로그래밍 언어는 JSON형식의 문자열을 읽어들이는 기능이 있는데, 네트워크를 통해서 각각의 프로그래밍 언어로 만든 데이터를 교환할 때 사용한다. 1. Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷 (=자바스크립트의 객체처럼 자료를 표현) 2. 데이터 유형은 문자열, 숫자, 불, Null, 객체, 배열이 있다 3. 문자열과 프로퍼티의 이름 작성시 반드시 큰따옴표로 만들어야 한다. (key에도 큰따옴표 사용) 4. JSON 데이터는 쉼표(,)로 나열 5. JSON 데이터는 이름과 값의 쌍, key : value 형식으로 구성, 중괄호({})로 둘러쌓아 표현 📌JSON 데이터형..

🤓오늘 공부한 내용 📌추가로 구현한 기능 1 (댓글창 숨기기) 팀원분이 만드신 디테일 페이지에 댓글창 파일을 병합 한 후에 css를 수정하다가 처음부터 댓글창이 보이는것보다 댓글 버튼을 누르면 그 이후에 댓글입력할 수 있는 창이 보이도록 수정했다. 먼저 html에서 기존 댓글창을 container 클래스로 감싸주고 Review //댓글입력창 Review 버튼으로 감싸기 let count = true; makeTemp().then(() => { const $writeReviewBtn = document.querySelector(".writeReviewBtn"); const $commentInputContainer = document.querySelector(".comment_input_container")..