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

💡 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 설치 (노드 플랫폼에 의해 실행됨) 패키..

❤️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")..

💻코드 리뷰하기 🔻JS - 각 댓글마다 요소를 생성하고, 그 안에 요소를 추가하여 댓글 내용을 표시하는 부분 // 댓글을 HTML에 추가 comments.forEach(function (comment, index) { let commentElement = document.createElement("div"); // 각 댓글 요소를 생성 commentElement.classList.add("comment"); // "comment" 클래스 추가(css 추가용) let commentText = document.createElement("span"); // 요소에 댓글내용 요소를 자식으로 추가) commentText.innerHTML = "" + comment.name + " : " + comment.comm..

👉과제의 방향성 지난 개인과제(영화 검색 사이트)를 이어서 디벨롭하는게 이번 팀협업 프로젝트이다. JS 문법의 핵심을 적용해서 기존에 개인 과제에서 TMDB를 이용하여 수행했던 과제의 심화 버전인듯. 사이트에서 원하는 영화를 클릭하면 상세페이지로 넘어가 영화에 대한 자세한 정보와 해당 영화에 대한 리뷰를 남길 수 있도록 하는것이 목표다. 똑같이 순수자바스크립트만 이용해서 데이터를 저장해야하기 때문에 별도의 서버 또는 DB, flask 사용없이 서버의 LocalStorage를 이용해서 데이터를 저장하는 방법으로 진행할 것이다. 내가 맡은 부분이 바로 로컬스토리지를 이용한 CRUD구현을 하는것이기 때문에 이번 프로젝트를 통해 한번 도전해보기로 했다. 🧐CRUD란 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 ..

🤓오늘 공부한 내용 📌콜백함수 (1) 자바스크립트의 함수도 하나의 자료형이기 때문에 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 '콜백함수'라 한다. (2) 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. (3) 콜백함수는 때로는 가독성이나 코드 재사용 면에서도 사용 된다. (4) 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요 하다. - 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름 - 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식 (동시 효율적 처리 가능, 즉시 응답X 때문에 예상 밖 결과 나올수도 있다) 기본 예시) 1. a라는 매개변수를 가진 te..