y.developer

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.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 함수 안에 있는 ..

2023.10.25 수 보충반 강의 듣는중... 조금 이따가 정리 지금 듣는 실시간 강의 내용 forEach(value, index) : return X filter(value, index) : return O (배열 아웃풋) value : 값 index : 순서 작동 방식은 똑.같.다 const arr01 = ["홍길동", "홍길순", "옹길순"]; const result = arr01.filter(function(val) { if (val.includes("홍길")) { return true; } else { return false; } }) const arr01 = ["홍길동", "홍길순", "옹길순"]; const result = arr01.filter((val) => val.includes("홍..

2023.10.24 화 팀 과제가 시작되었다. 오전 발제를 통해서 무엇을 만들어야할 지 듣게 되었다. 이번 프로젝트는 개인 과제의 연장선 느낌이다. 만들었던 '영화 검색 사이트'를 활용해서 추가 기능을 만드는 것이다. 영화 카드를 선택하면 해당 영화의 상세페이지로 이동하고, 리뷰를 작성할 수 있는 기능을 구현해야 한다. Today 팀 과제 브리핑 보충반 OT 팀 노션 작성 및 팀장 직책 개인과제 해설영상 및 리팩토링 git 특강 팀 과제 브리핑 발제를 마치고 과제를 시작하기 앞서 브리핑을 진행했다. 전체적인 팀의 목표를 세우고, 일정을 확인하기 위해서 진행되었다. 팀장으로서 프로젝트의 전체적인 흐름을 파악하기 위해서 해당 브리핑은 매우 중요하다고 생각했다. 목표 팀과제 요구하는 필수 기능을 우선적으로 구..

2023.10.23 월 오늘부터는 TIL의 구성을 바꿔보았다. 기존에는 시간순으로 진행했지만, 이제는 핵심 내용을 중심으로 정리해보려고 한다. 조금 더 눈에 잘 들어오고, 정리도 잘 되는 방법이라고 생각한다. Today 개인 과제 최종 수정 및 제출 팀원 최종 코드 리뷰 개인 과제 해설 영상 개인 과제 최종 수정 및 제출 주말 동안 계속해서 코드를 손봤지만, 아직 구현하진 못한 추가 기능들이 너무 많았다. 그리고 그려놓은 와이어프레임에 할당될 요소들도 아직 많이 남아있었다. =====수정 필요===== 추가 구현한 기능 언어변경 구현 실패 CSS] 보이는 순서 설정 : 포지션을 먹이도 z축 변경 가능. position: absolute; z-index (top: 250px;) 위에서부터 위치 고장 ele..

2023.10.20 금 영화 검색 사이트를 만들고 있다. 이름하여 Rotten Orange 핵심 기능인 API, Search 기능은 구현을 해냈다. 어제 하다가 못한 디버깅도 끝냈다! 영화 검색 후 무비카드 클릭 이벤트가 활성화 안 되는 버그. 해결은 간단했다. 해당 함수를 새로 검색한 카드 정보가 불러와지는 로직 안에 추가해 주는 것이다. 이후에 더 추가할 기능들이 머릿속에서 맴돌지만, 일단 CSS를 먼저 만져야 한다. 팀원들의 진행 상황과 일정을 공유했다. 나는 기능을 먼저 만들었지만, CSS를 먼저 만든 팀원도 있었고, 아직 코드에 대한 이해를 하기 위해서 공부 중인 팀원도 있었다. 따라서 서로 필요한 부분에 대해서 마무리 회의 시간에 코드리뷰를 하기로 했다. 본격적인 CSS 시간이다. 들어가기에 ..