Bin's Blog

💻 개인 과제 👉 React를 이용하여 할 일 목록 만들기(소스코드) GitHub - hobin49/react-assignment Contribute to hobin49/react-assignment development by creating an account on GitHub. github.com 👉 결과물 💻 팀 과제 👉 Movie web 만들기 (소스코드) GitHub - UdemyFrontendBootCamp/2023-06-26-React-Movie-App: 2023-06-26 리액트 무비앱 만들기 실습입니다. 2023-06-26 리액트 무비앱 만들기 실습입니다. Contribute to UdemyFrontendBootCamp/2023-06-26-React-Movie-App development..

1️⃣ useParams 👉 React Router의 useParams는 현재 URL의 파라미터를 가져올 수 있는 React Hook입니다. 👉 예시 import React from 'react'; import { useParams } from 'react-router-dom'; function User() { let { id } = useParams(); return User ID: {id}; } 👉 /user/:id와 같은 경로가 있을 때, :id는 URL에서 동적으로 변경되는 값으로 취급된다. 이 :id를 쉽게 가져오기 위해 useParams를 사용할 수 있다. 👉 User 컴포넌트가 /user/123라는 경로에서 렌더링될 경우, useParams를 통해 { id: "123}라는 객체를 얻게 된다...

💻 과제 👉 React.js로 배경이미지 랜덤 변경, 실시간 시계, 인사 만들기 👉 소스코드 GitHub - hobin49/react-assignment Contribute to hobin49/react-assignment development by creating an account on GitHub. github.com 👉 결과물 👉 과제 후기 및 느낀점 컴포넌트 3개를 따로 만들어서 하다보니 배경화면 위에 시계와 인풋 박스를 올려 놓는 부분 때문에 고민을 했다. Vue.js와 비슷한 면도 있지만 다른면도 있어서 그런지 아직은 낯설다. 저번에 useState()함수와 useEffect()함수를 배웠던 것을 적용해봤다.

🤔 리액트 훅(Hook)이란? 👉 리액트 훅은 함수형 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있게 해주는 도구이다. 👉 이전에는 이러한 기능을 사용하기 위해서 클래스형 컴포넌트를 사용해야 했다. 🤔 왜 생명주기가 필요할까? 👉 생명주기 메서드는 컴포넌트가 페이지에 처음 렌더링될 때, 컴포넌트의 상태나 속성이 변경될 때, 컴포넌트가 페이지에서 제거될 때에 실행된다. 👉 다양한 활용사례가 있다. 1️⃣ 메서드에서 API를 호출해서 초기 데이터를 가져오는 작업을 수행한다. 2️⃣ 이벤트 리스너, 타이머, 등록된 구동 등을 설정한 후에 컴포넌트가 사라질 때 이들을 정리해야 한다. 이는 메모리 누수를 방지하고, 성능을 유지한다. 3️⃣ 컴포넌트의 상태나 속성이 변경되면 특정 작업을 수행할 때 사용한다...

💻 과제 👉 vanilla js로 실시간 날씨, To-do list 만들기 👉 소스코드 GitHub - hobin49/assignment Contribute to hobin49/assignment development by creating an account on GitHub. github.com 👉 결과물 👉 과제 후기 및 느낀점 섭씨 온도로 변환, 날씨에 맞게 날씨 기호 표시를 해봤다. 조금씩 더 바닐라 자바스크립트에 가까워지고 있다.

🤔 리액트는 뭐지? 👉 사용자의 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. 👉 페이스북이 개발하고 유지 관리하며 개발자들이 웹 페이지 혹은 앱의 복잡한 사용자 인터페이스를 구성할 수 있도록 지원한다. 👉 Vue와 비교했을 때 라이브러리로 분류되는 이유는 프레임워크가 제공하는 전체적인 기능 집합을 제공하지 않기 때문이다. 예를 들어, React는 라우팅, HTTP 요청, form validation 등의 기능을 직접 제공하지 않는다. 📖 리액트 특징 👉 컴포넌트 기반: 컴포넌트라는 개념을 사용한다. 컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 각 컴포넌트는 자체 로직을 가지며, 그 로직은 JavaScript 함수를 통해 작성된다. 이로 인해 UI를 재사용 가능한 개별적인 조각으로..

📚 새로 알게 된 부분 👉 document.write(값): 화면에 텍스트를 쓸 때 사용된다. 👉 switch문 switch (new Date().getDay()) { // Day가 0이면 일요일 출력 case 0: document.write("일요일"); break // Day가 1이면 일요일 출력 case 1: document.write("월요일"); break // Day가 2이면 일요일 출력 case 2: document.write("화요일"); break // Day가 3이면 일요일 출력 case 3: document.write("수요일"); break // Day가 4이면 일요일 출력 case 4: document.write("목요일"); break } 👉 생성자함수 function Perso..

💻 과제 👉 vanilla js로 배경이미지 랜덤 변경, 인사 만들기, 시계 만들기 👉 소스코드 GitHub - hobin49/assignment Contribute to hobin49/assignment development by creating an account on GitHub. github.com 👉 결과물 👉 과제 후기 및 느낀점 하면 할수록, 조금씩 느는 거 같다. 이전까지는 바닐라 자바스크립트에 대한 자신감이 많이 사라졌는데 계속 하려고 시도하다보니 흐름을 이해하는데 큰 도움이 됐다.

🤔 DOM(Document Object Model)이란? 👉 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 👉 정적으로 문서 객체를 생성: 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것 👉 동적으로 문서 객체를 생성: 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성 1️⃣ 외부 자바스크립트 장점 👉 HTML과 코드를 분리 👉 HTML 및 JavaScript를 더 쉽게 읽고 유지 관리할 수 있다. 👉 캐시된 JavsScript 파일은 페이지 로드 속도를 높일 수 있다. 📚 캐시란? 👉 컴퓨터에서 데이터나 값을 빠르게 가져오기 위해 사용되는 임시 저장소를 일컫는데 웹페이지를 방문하면 그 웹페이지의 정보들이 컴퓨터의 하드 드라이브에 임..

🤔 CSS란? 👉 CSS는 Cascading Style Sheets의 약자이다. 👉 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있다. 👉 외부 스타일시트는 CSS 파일에 저장된다. 👉 Cascading: 연속화 => CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용된다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙는다. 1️⃣ CSS Selector 👉 css 선택기는 스타일을 지정할 HTML 요소를 "찾는"(또는 선택하는)데 사용된다. p { text-align: center; color: red; } #para1 { text-align: center; color: red; } .center { text-align: cen..