[LG CNS AM INSPIRE CAMP 1기] AMaze 영상 메모 웹앱 구현 - VERSION 2
·
LG CNS AM CAMP 1기
🔑단단한 뿌리는 수많은 가지를 뻗게 한다💡 VERSION 2 업데이트 내용📃 지난 일주일 동안 짬나는 시간을 활용해 간단한 웹앱을 구현하고 Vercel에 배포했습니다.YouTube Data API를 활용할 아이디어를 고민하다가, 매일 아침 동국대로 출근하면서 생산적인 활동을 해보자는 생각이 들었습니다. 그래서 토스 Slash, 우아한 테크, 당근 테크 같은 기술 영상들을 보고 배운 점 딱 3가지만 정리하는 앱을 만들게 되었습니다💻Interface⬆️ 주요 기능은 사용자가 공부하고 싶은 영상을 선택하고, 해당 영상에 대한 배운 점을 작성할 수 있도록 구성되어 있습니다특히 학습 포인트를 3가지로 제한한 이유는, 단순히 "배운 점을 적어보라"는 요청보다는 구체적인 목표를 제시함으로써 사용자의 동기부여를..
[LG CNS AM INSPIRE CAMP 1기] AMaze 간단한 지식 공유 웹 애플리케이션 구현 - 프론트엔드를 마치며
·
LG CNS AM CAMP 1기
🔑 남들보다 10분 더 앉아있기...💡 프로젝트 소개 및 개요📃 프론트엔드 교육을 마치며, 배운 내용을 복습하고 정리하기 위해 간단한 지식 공유 웹 애플리케이션을 구현했습니다. 기존 프로젝트의 코드를 리팩토링하고 개선하여 제작한 이번 프로젝트는 학습 내용을 실전에 적용하고, 개발 프로세스를 다시 점검해볼 좋은 기회였습니다 💡 메인 Home📃 Home 페이지는 Header와 PostList로 나뉩니다 🔍  Header: 커스텀 컴포넌트로 구현되어 다른 페이지에서도 재사용이 가능합니다 🔍  PostList: map 함수를 사용해 데이터를 순회하며 PostItem 컴포넌트를 렌더링합니다 💻CODE// 커스텀 헤더} rightChild={}/>// PostList {sortedDate.map(..
[React] 클래스, 함수, 화살표 함수 컴포넌트와 children 활용법 완벽 정리🚀
·
React
🔑토끼와 거북이에서 "거북이"가 되자💡 클래스 컴포넌트 Class Component📃 클래스형 컴포넌트는 React에서 Component를 상속하여 정의된 컴포넌트입니다. 구조화된 객체 형태로 this를 통해 다양한 속성과 메서드를 사용할 수 있습니다.💻MyComponentClass.jsimport React, { Component } from 'react'class MyComponentClass extends Component { render() { console.log(this) // this는 컴포넌트 인스턴스를 가리킵니다 const { name, age } = this.props return ( 안녕하세요 제 이름은 {name}입니다 나..
[LG CNS AM CAMP 1기]- [React] JSX Deep Dive 쉽게 이해하기
·
LG CNS AM CAMP 1기
🔑일단 의자에 앉아있자... 멍도 의자에서 때리자...💡 JSX에서는 하나의 부모 요소만 반환 가능하다📃 React에서는 다양한 컴포넌트를 조합해서 사용할 때, 각 컴포넌트에서 return하는 요소는 반드시 하나의 부모 요소여야 한다는 점에 유의해야 합니다💻오류 발생// 동일한 레벨에 여러 개의 요소를 반환하면 오류가 발생합니다.function App() { return ( React 요소 알아보기 React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다. );}export default App;⬆️ JSX에서는 하나의 부모 요소만 반환할 수 있습니다. 위 예시처럼 여러 개의 요소가 동일한 레벨에서 반환되면 오류가 발생합니다.💻해결 방법 1 Fragmentfuncti..