React 6

React 프론트 프로젝트 완. 료.

0. 프로젝트 시작 프로젝트는 4명이 한 팀으로 구성되어 약 4주간 진행됐다. 기획부터 개발, 배포, 발표까지 꽤 많은 범위를 다루었는데, 특히 기획 단계에서 어떤 주제를 가져가야 할지 오랜 고민의 시간을 보냈다. 팀원 모두가 컴퓨터를 전공한 사람들이어서 금융에 대한 깊은 지식이 없었고, 투자도 아주 얕게만 하고 있는 수준이어서 현재 논의 중인 주제가 정말 의미가 있는가- 에 대한 토의가 계속 이루어졌다. 실제로도 여러 번 주제를 엎어서, 다른 팀들이 기능 명세나 ERD 를 작성하기 시작할 때도 우리는 기획에만 매달리고 있었다 .. 으악 1. 아이디어 기획 결국 평일 이틀 내내 아무 결론을 내리지 못하고 주말동안 더 디벨롭 해오자 ! 하고 헤어졌는데, 주말동안 다들 열심히 새로운 기획 + 원래의 기획..

React 미니 프로젝트 완. 료.

회고 작성해야지 생각하고 행동으로는 옮기지 못했던 지난 주 .. 이번 주말에 안 하면 절대 못 하겠다!!! 싶어서 리드미도 우다다 정리해서 커밋하고 이제 정말로 회고다운 회고를 해보고자 작성 창을 열었는데 ! 기억이 잘 나지 않는 이슈가 있지만 ! 노션을 열심히 작성해뒀으니 뒤적뒤적 하면서 써봐야겠다 ! 0. 프로젝트 시작우리 팀은 4명으로 구성되어 있고 개발 기간은 딱 일주일이었다. 기간이 짧았기에 기획 단계에서 어떤 주제를 얼마만큼의 볼륨으로 가져갈지 정하는 게 중요했다.이번 프로젝트의 목표는 지금까지 배웠던 프론트엔드 지식을 바탕으로 작은 서비스를 직접 기획하고 개발하는 것이다. 학습 자체에도 목적이 있었기 때문에 백과 프론트로 역할을 나누기보다는, 한 사람이 전체 개발 과정을 vertical 하..

Next.js App Router, 서버 컴포넌트와 클라이언트 컴포넌트 알아보기

9. Next.js1. Netxt.js 란 1) 전통적인 웹 (요청에 대한 응답이 항상 HTML)전통적인 웹에서는 사용자가 페이지를 요청할 때마다 서버가 전체 HTML 을 새로 생성해서 전달했다.문제점 : 같은 레이아웃을 공유하는 페이지도 전체 HTML 이 다시 생성되므로 불필요한 중복이 많음기존의 페이지를 새로 요청하므로 사용자는 동일한 내용을 다시 받고, 서버는 같은 페이지를 매번 새로 렌더링해서 리소스가 낭비됨 2) SSR(Server Side Rendering) 그래서 SSR 등장!React 를 서버에서 실행해서 HTML 을 렌더링해서 응답한다. 요청마다 HTML 을 새로 생성한다는 점에서는 전통적인 웹과 같지만, 그 HTML 에는 React 앱이 포함되어 있어서 첫 화면 이후에는 클라이언트에서..

React hook 알아보기

지난 시간 복습✨ Props부모 컴포넌트로 전달받는 파라미터컴포넌트가 생성 될 때 부모로부터 받고 컴포넌트에 고정된 상태로 남아있음(변하지 않는 값) State컴포넌트 내에서 저장되고 유저의 이벤트나 시간에 따라 변화시킬 수 있는 값State는 Props와 다르게 자체적으로 가지고 있는 것초기화가 반드시 필요 State 변경 판단은 얕은 비교 - 참조값(주소값) 비교숫자나 문자열은 실제 값 자체를 비교객체는 값과 상관 없이 주소값을 비교but 완전히 같은 객체를 다시 넣을 경우 렌더링 안 함그래서 상태로 객체나 배열을 쓸 때는 항상 새로운 객체로 만들어서 setState 해줘야 함→ state 가 바뀔 때만 새로 그린다(자바스크립트를 다시 실행시킨다) : 이건 얕은 비교이다, 값까지 비교하지는 않는다 =..

React useState, useEffect 파헤쳐보기🪏

저번 시간 내용 복습✨함수형 컴포넌트를 사용하는 데 집중해보자! hook을 사용해서 사이드 이펙트 처리props: 컴포넌트 자체에서 변화시킬 수 없다state: 컴포넌트 내에서 저장되고 변화시킬 수 있는 값react hook: 모든 컴포넌트를 독립적으로 재사용 가능component 가 변경되면 해당 컴포넌트 함수를 다시 실행 = 다시 그린다 useEffect(effectCallback:Fn, deps:Array): state 가 변경되면 전체 컴포넌트가 다시 실행된다 - 인자가 변경되면 첫 번째 인자의 함수를 다시 실행하는 것 실습을 위한 예제 문제)아래와 같이 작성하면, 1초에 한 번씩 깜빡이는 텍스트를 만들 수 있다. 연습문제4)버튼을 클릭할 때마다 "ON"과 "OFF"로 상태가 바뀌는 토글 버튼..

TypeScript 기초 & React 기초

6. TypeScript1. TypeScript 란 1) TypeScriptJavaScript에 Type을 추가한 언어실제 브라우저에서 사용하려면 컴파일이 필요하다: TypeScript → (Compile) → JavaScript TypeScript의 장점타입 안정성(에러 사전 방지): 컴파일 시점에 오류를 발견할 수 있음!개발자 도구의 높은 지원: 자동 완성, Code RefactoringJavascript와의 호환성: 모든 JavaScript 코드는 TypeScript에서도 작동 2. TypeScript 설치 1) TypeScript 설치npm initnpm install -g typescript // 전역 설치tsc --version해도 에러 발생? (Mac 기준) command + shi..