y.developer

2023.11.06 월 ver1, ver 4 리액트를 활용하여 Todo List 기능을 구현했다. input 값을 추가하고, 불러와서 사용할 때 이용하는 useState를 처음 다뤄봐서 어려웠지만, 하나하나 뜯어가며 다시 분석해 보자 초기 화면 구성하기 title 값 저장하기 content 값 저장하기 todos 값 저장하기 초기 화면 구성하기 최종적으로 구축하려고 하는 디자인을 잡아놓고 들어가는 것이 훨씬 작업에 수월했다. 기능이 작동할 것도 예상해서 미리 구성해 놓는다면 기능을 완성시켰을 때 바로 확인을 할 수 있고, 기능 구현에 실패하더라도 바로 시각적으로 확인 가능하고 다음 스텝의 그림을 그려볼 수 있다. App.jsx import './App.css'; import React from "reac..

2023.11.03 금 메서드를 더 추가하여 배열 API 사이트를 완성했다. IndexOf Includes Find Some Every Sort Join IndexOf "배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다." 배열 요소를 돌며 해당하는 값과 일치하는 요소의 index를 반환한다. const handleIndexOf = () => { const IndexOf = newArr.indexOf(query); return (IndexOf === -1) ? alert("확인하려는 값을 정확히 입력해주세요.") : setResult(IndexOf); } 원본 배열 ▶ apple, banana, cherry, date, elderberry 입력 값 ▶..

2023.11.02 목 메서드를 활용한 배열 API 사이트를 만들어 보았다. Today 배열 API 사이트 만들기 학습내용 배열 API 사이트 만들기 ForEach Filter Map Reduce Push Pop Slice Splice 초기 세팅 // useState를 사용하기 위해서 import 필요 import { useState } from "react"; // 메인 함수 function App() { const initialState = ["apple", "banana", "cherry", "date", "elderberry"]; const [array, setArray] = useState(initialState); // 배열 값 const [result, setResult] = useState..

2023.11.01 수 리액트 입문 강의와 스탠다드 강의를 들었다. 실제로 React을 다뤄보며 어떤 매커니즘으로 작동하는지 알게 되었다. Today 리액트 입문 강의 스탠다드 강의 스탠다드 과제 학습내용 리액트 입문 강의 Props Filter & Map Slice & Splice Reduce State Hook 불변성&순수함수 명령형 vs 선언형 프로그래밍 렌더링 & 리렌더링 Props prop drilling 어플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미한다. 이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만, 해당 값을 직접 사용하지 ..

2023.10.31 화 영화 검색 사이트 제작을 마치고 팀이 재편성되었다. 그리고 본격적인 React 공부가 시작되었다. Today Chapter 3-1 주특기 입문 (React) 자바스크립트 SPA 특강 리액트 입문 강의 학습내용 자바스크립트 SPA 특강 MPA vs SPA CSR vs SSR 랜딩 hash 모듈번들러 MPA vs SPA MPA(Multi-Page App) & SSR(Server Side Rendering) 2개 이상의 페이지(html)로 구성된 애플리케이션 SPA(Single-Page App) & CSR(Client Side Rendering) 1개 페이지(html)로 구성된 애플리케이션 SPA 장점 자연스러운 사용자 경험 / 깜빡임 현상 X, 네이티브 앱에 가까운 자연스러운 페이지 ..

영화 검색 사이트제작 ( 2023.10.24 ~ 10.30 ) B반 8조 - Code8 KPT 회고 프로젝트를 마치고 회고하는 과정으로 Keep, Problem, Try 부분으로 나누어 진행한다. Keep : 잘하고 있는 점, 계속 이어갔으면 하는 부분 Problem : 개선이 필요하다고 생각되는 부분, 아쉬웠던 부분 Try : 앞으로 시도해보면 좋을 방법 및 문제 해결책 KPT 회고 진행 팀 프로젝트를 제출하고 바로 회고를 진행했다. Figjam을 활용해서 실시간으로 의견을 작성하고, 이야기를 나누며 지난 프로젝트를 되돌아보았다. 회고는 1시간 가량 진행되었고, 다양한 의견과 함께 그동안 있었던 일들을 팀원들 각자의 시각으로 들여다 볼 수 있었다. Keep 잘하고 있는 점, 계속 이어갔으면 하는 부분 ..

2023.10.27 금 CSS 주소 . 생략했을 때 로컬에선 작동을 하지만, 원격에선 작동을 안 할 수도 있다. import export 로직 구현 for, forEach, map, filter + find forEach : undefind = 값을 추출하지 않는다 map : 1:1 맵핑 / 가지고 있는 요수의 수만큼 결과 추출 filter : 조건문, return true or false 부여 / 해당되는 요소만 추출 find : 조건문, return true or false 부여 / 해당되는 요소 첫번째 요소만 추출 / filter와 구조 동일 동기, 비동기?? 뜻의 의미가 뭐지? 순서대로 처리하는게 동기?비동기? 비동기 : 순서대로? / 시작되고 결과가 나오기까지 기다리지 않음. 그냥 묻지마 실행 ..

2023.10.26 목 ★★★회의할 내용★★★ javascript 버튼클릭 시 슬라이드 / relative absolute 로고통일 / 영상 가져오는 방법 / 영화 상세 정보 API 가져오기 / text크기 설정 - API 2개 이상 사용법 - 페이지 사이 이동 방법 - id 값 활용한 개별 페이지 구성 폰트 : CSS 상단 세팅부분에 있는 DNFForgedBlade width : 1100px border : border-top으로 구역 구분 (border-top: 2px solid #eee;) fetch 중첩 사용 / Promise.all() 사용 유튜브 API 주소 찾기 영상 API 활용 방법 영화 세부정보 구현 방법 youtube iframe 다루는법 확인 import export 함수 안에 있는 ..