TiL33 11. 04. 20일차 TIL - useState, useEffect, useRef, useContext 오늘부터 React 숙련 주차 시작이다. 오늘은 제공된 강의를 통해 React에서 많이 사용하는 Hook에 대해 공부하였다.# 훅 (Hooks)React Hook은 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리로 React 16.8v에서 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. Hook을 사용하는 데에는 몇 가지의 규칙이 있다.최상위에서만 Hook을 호출해야한다.반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.React Hook은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도.. 2024. 11. 4. 11. 01. 19일차 TIL - React 개인과제_03 마무리 오늘은 그동안 못다한 기능구현과 함께 코드 리펙토링, 컴포넌트 분리를 하여 과제를 마무리하였다. 과제 제출 이후에는 튜터님의 해설영상을 보며 과제 진행과정에서 고전했던 부분에 대해 다시 한번 복습하였다. 어제 하지 못했던 목록은 아래와 같다.메달 집계 기능 중 정렬 방법 선택하기 기능Create 기능 - 중복 국가 처리컴포넌트 분리github ReadMe 작성1. 메달 집계 기능 - 정렬 방법 선택기능 추가어제 금메달 수에 따른 내림차순 정렬 로직과 총 메달 수에 따른 내림차순 정리에 대한 로직을 작성하였다.오늘은 이 두 가지의 정렬 방법을 사용자가 직접 선택할 수 있도록 하는 기능을 추가하였다. 먼저 사용자와 상호작용할 방법에 대해 생각하였다. 버튼이 편할까, 선택창이 편할까? 사용성을 고려하였을 때에.. 2024. 11. 1. 10. 31. 18일차 TIL - React 개인과제_02 기능구현 오늘은 React 개인과제에서 어제 구현하지 못했던 기능들을 하나씩 추가하였다. 과제 구현 리스트필수사항CURD 기능 구현하기Delete기능Update기능메달 집계 정렬금메달 수가 높은 국가를 리스트의 상위에 표시하기국가 추가, 수정, 삭제 시 리스트가 자동으로 재정렬되도록하기 선택사항Create 시 중복 국가 처리하기Update 시 존재하지 않는 국가 알림총 메달 수가 높은 국가를 리스트 상위에 표시하기1. CURD 기능 구현하기 - Delete삭제하기를 구현하기 위한 로직을 다음과 같이 구상해보았다. 1. 삭제 버튼을 클릭하면 table에서 등록되어 있는 해당 국가의 정보를 삭제하고자 한다.2. filter함수를 사용하여 countryList를 순회하고 선택한 나라와 이름이 같을 경우는 제외한다.3... 2024. 10. 31. 10. 30. 17일차 - TIL React 개인과제_01 시작 오늘은 React 입문 주차에서 제시된 과제를 진행하였다. 이번 과제는 올림픽 메달 트래커 만들기이다. 필수 구현 사항은 5가지이다.제출 폼 UI 구현메달 집계 CRUD 기능메달 집계 정렬레이아웃 설정컴포넌트 구조 분리나는 2주차로 제공된 강의를 모두 수강한 이후 과제를 진행하였고 기본구조작성과, 전체 레이아웃 css, 제출 폼 ui구현, 메달 집계 Create, Read 기능까지 구현하였다.1. 기본 구조 및 전체적인 레이아웃색상은 오륜기의 색상코드를 참고하여 사용하였다.2. 제출 폼 UI 구현1) Input위의 사진처럼 국가명을 입력하여 값을 얻을 수 있는 input과 각종 메달의 데이터를 얻을 수 있는 input을 구현하였다.input태그가 같은 구조로 반복되고 있는 것을 볼 수 있다. 나중에 i.. 2024. 10. 30. 10.29. 16일차 TIL - JSX, Components, Props React에서는 이전과는 다르게 JSX라는 형식의 파일에 코드를 작성한다.1. JSXJSX란 JS를 확장한 문법으로 JS의 모든 기능이 포함되어 있으며 React를 생성하기 위한 새로운 문법이다.→ JS + XML(HTML) 이라고 생각하면 이해하기 쉽다. 파일의 구조는 아래와 같다.외부 파일 Import 영역컴포넌트_01JS코드 작성 영역JSX 작성 영역컴포넌트_02JS코드 작성 영역JSX 작성 영역...Export 영역 2. Components1) 개념공식문서에서 컴포넌트를 JS 함수와 유사하다고 소개하고 있다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴 볼 수 있다. 이 때 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되.. 2024. 10. 29. 10. 28. 15일차 TIL - React, SPA 오늘은 React를 본격적으로 학습하기 전에 지금까지 배웠던 JS문법을 복습한 이후, React와 관련된 간단한 개념 및 개발환경에 대해 학습하였다. 프론트엔드 개발자를 채용할 때 React는 절대 빠지지 않는다. 그만큼 프론트엔드라면 꼭 알아야하는 필수 소양이라는 뜻이다. 내배캠을 신청하여 공부를 하는 이유 또한 React에 대해서 공부하고 싶었기 때문이었다.1. React란 무엇일까?공식 홈페이지에서는 React.js를 UI를 만들기 위한 라이브러리라고 소개하고 있다. 나는 이전까지 워크프레임으로 알고 있었다. 그럼 UI 라이브러리와 프레임워크의 차이는 무엇일까?1) 프레임워크개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합Spring Framework :.. 2024. 10. 28. 이전 1 2 3 4 5 6 다음
