[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에서의 DOM 비교 최적화: Virtual DOM과 휴리스틱 알고리즘
·
React
🔑Writing Key Point in Posting💡 알고리즘 시간 복잡도: 왜 중요할까?📃 우리는 소프트웨어를 만들 때 속도가 중요한데, 그때 사용하는 개념이 바로 시간 복잡도입니다. 시간 복잡도는 프로그램이 얼마나 빨리 작동하는지, 즉 입력 데이터가 커지면 프로그램이 얼마나 오래 걸릴지를 알려주는 척도입니다💻O(n) & O( n² )// O(n)for(let i=0; i⬆️ 예를 들어, 우리가 처리해야 하는 데이터가 $ n $ 개라면, 시간 복잡도가 $$ O(n) $$  데이터가 두 배가 되면 처리 시간이 두 배로 늘어나고, $$ O(n^2) $$  데이터가 두 배가 되면 처리 시간이 네 배로 늘어납니다. 이처럼 알고리즘의 시간 복잡도는 우리가 다루는 데이터가 커질수록 얼마나 빨리 프로그램이..
[LG CNS AM INSPIRE CAMP 1기] React의 주요 Hook들의 이해와 활용 useState, useReducer, useMemo, useCallback, useContext
·
LG CNS AM CAMP 1기
🔑한번 보고 모르겠으면, 두번 보고, 세번 보고, 누가 이기나 해보자💡  useState로 Counter 구현하기📃 useState를 사용하여 간단한 Counter 기능을 구현한 후, 이를 기반으로 useReducer와의 차이점을 이해해 보겠습니다💻useState를 활용한 Counter 구현 import React, { useState } from 'react'const Counter = () => { const [count, setCount] = useState(0); const changeCount = e => setCount(count + Number(e.target.innerText)); return ( 현재 카운터 값은 {count} 입니다 +..
[LG CNS AM CAMP 1기] 12/23~01/03 2주간의 학습 내용 정리
·
LG CNS AM CAMP 1기
🔑아는 내용도 다시 한번💡 호이스팅과 다양한 함수 선언, ES6+ 문법 및 React 기본 개념📃 2주 동안 자바스크립트의 기본 문법과 동작 방식인 호이스팅, 다양한 함수 선언 방법, ES6+의 문법 요소(단축 속성명, 계산된 속성명, 전개 연산자, 비구조화), 그리고 React의 핵심 개념인 JSX 구조, 특수 Props(children), 이벤트 객체 활용, 컴포넌트 생명주기를 학습했습니다. 언급된 이 모든 내용은 실무에서 정말 많이 사용되기 때문에, 깊이 있게 알고 있는 것은 중요한 것 같네요.💻호이스팅과 함수 선언 방법// 함수 선언식 - 호이스팅 가능console.log(sayHello()); // 'Hello'function sayHello() { return 'Hello';}// 함..