에이미의 성장기록

📚📚리다기 한달만에 독파하기 스타뜨!!!!! 1. 리액트 시작 - 리액트는 V(view)만 신경 쓰는 라이브러리 - render() 함수는 뷰가 어떻게 생겼는지, 작동하는지에 대한 객체를 반환한다. 렌더링 작업이 끝나면 가지고 있는 정보로 HTML 마크업을 만들어서 DOM 요소에 주입한다. - DOM은 Document Object Model의 약어이다. 객체로 문서 구조를 표현하는 방법으로 XML과 HTML로 작성한다. Tree 형태라 특정 노드를 찾고, 수정하고, 제거, 추가 할 수 있다. - DOM 자체는 빠르지만 매 업데이트마다 돔에 접근하여 변화를 주면 성능이슈 발생. 리액트는 가상돔을 두고 변화된 것만 감지하여 실제 돔을 변경하여 성능을 개선했다. 즉 리액트는 페이스북이 리액트를 만든 이유인 "..

나는... 나는 말미잘이다.. 대답을 못한 나는 해삼이다...나는 생각을 멈춘 돌멩이다.... 😰😰😰😱😭 ㅇ늘은.. 떡볶이를 먹어야겠다... 꺼흐그흑 따흐흐흑 그리고 앞으로 공부좀 더 열심히 해야겠다... 비가 온다... 내 눈물 가려줘 비야... 1) 웹팩, 바벨? ◼ 웹팩 - 모듈(module) 번들러(bundler). - 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는, 웹팩 실행 후에 나오는 결과 파일)시켜주는 역할. 빌드(build)라는 과정을 통해 하나의 파일로 만들어 준다. - 웹팩을 이용하면 여러가지 리소스를 사용자에게 전달하기 좋은 형태로 만들 수 있다. ◼ 바벨 - 입력과 출력이 모두 자바스크립트 코드인 컴파일러 - 구형 브라우저들이 ES6 를 제대로 호환하지 못해, 오래된 브라..

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것 ◼ DOM이란? Document Object Model의 약어로, 객체로 문서 구조를 표현하는 방법. XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용함. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. ◼ DOM의 단점 동적 UI에 최적화되어 있지 않음! DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리페인트 하는 시간이 허비됨 돔트리가 수정될때 마다 렌더트리가 실시간으로 갱신됨 SPA(Single Page Application)가 대세인 웹앱 같은 경우, 단일 페이..

◼ 리덕스란? 가장 많이 사용하는 리액트 상태 관리 라이브러리로 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. ◼ 리덕스를 왜 쓸까? - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. - 컴포넌트끼리 똑같은 상태를 공유해야할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다. - 규모가 큰 경우에는 리덕스를 사용하여 작업하는것이 상태를 체계적으로 관리할 수 있고, 코드의 유지 보수성을 높여주고, 작업 효율을 극대화해준다. - 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리해줌 ◼ 기본 개념정리 1) 액션 - state를 어떻게 바꿀지 적어놓은 행동 2) 액션 생성 함수 - ..

* 리액트란? 페이스북에서 제공해주는 프론트엔드 라이브러리, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다. * 리액트의 특징? - 단일방향의 데이터 흐름, 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줌 * 리액트의 장점? 1) 헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다. 2) 매번 DOM 전체를 직접 접근하여 변화를 주면 HTML, CSS, JS파일 전체를 다시 리랜더링..

- 기간: 4/12~4/22 (14일) - 팀원 구성: 스프링 3명 + 리액트 2명 - 프로젝트명:Coffzag 커프재그 -> 커피 + 지그재그(의류쇼핑몰)의 합성어 - 목적: 커피를 좋아하는 사람들을 위해 커피캡슐에 대한 리뷰들을 모아서 보여주고, 구매로 바로 연계하고자 함 - 설명: 일리, 스타벅스, 네스프레소 공식몰을 크롤링 후 진행하였습니다. 각 브랜드 캡슐커피를 한번에 모아서 구매하고, 캡슐마다 리뷰를 달 수 있습니다. 각 캡슐의 최근 리뷰를 메인 화면 캡슐 카드에 보여지게 했습니다. - 개발언어/라이브러리: JavaScript / React - 협업툴: git, slack, notion, figma - 구현 기능: 로그인(JWT)/회원가입 Product Main(페이지네이션, GET) 리뷰(C..