목록Computer Science/React (12)
on my way
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/SVQTl/btsHuRHO6S4/UlTWqQDkoEwSIBEfWQTze1/img.png)
]CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근할 수 있도록 허용하는 보안 기능입니다. 기본적으로 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 따르며, 이 정책은 다른 출처에서 리소스를 요청하는 것을 제한합니다. CORS는 이러한 제한을 완화하여 특정 조건 하에 다른 출처의 리소스에 접근할 수 있도록 합니다.CORS의 필요성웹 애플리케이션은 종종 다른 도메인의 리소스에 접근해야 하는 경우가 있습니다. 예를 들어, example.com 도메인에서 실행되는 웹 애플리케이션이 api.example.com 도메인에 있는 API에 요청을 보내는 경우입니다. 동일 출처 정책에 따르면, 이..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bwUvoz/btsIz8CbbJx/wR0eMwIL7j6JkiiZfXdEbK/img.png)
API 테스트API란?API는 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)의 약자로, 프로그램이나 애플리케이션 간에 데이터를 주고받는 방법을 말해요.쉽게 말하면, API는 두 프로그램이 서로 대화할 수 있게 해주는 통로라고 할 수 있어요. 예를 들어, 당신이 좋아하는 앱에서 날씨 정보를 보여준다고 생각해보세요.그 앱이 직접 날씨 데이터를 수집하지 않고, 다른 날씨 서비스에서 데이터를 가져온다고 할 때, 이때 API를 통해 데이터를 가져옵니다. 라이브러리는 코드의 모음으로, 프로그램에서 특정 기능을 쉽게 사용할 수 있게 도와줘요.예를 들어, 어떤 수학 문제를 풀어야 하는 프로그램을 만든다면, 복잡한 수학 계산을 미리 정의해둔 라이브러리를 가져와서 사용할 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/czataO/btsIBf1keEU/bMAfimKT6OmIl5vP1wk1e0/img.png)
9장: 컴포넌트 트리에 데이터 공급하기이 장에서 주목할 키워드ContextProps DrillingContext.Provider리팩터링useContext구조 재설계와 Context 분리이 장의 학습 목표Context가 무엇인지 알아봅니다.Context로 [할 일 관리] 앱을 리팩토링합니다. Context란 무엇인가요?Context는 리액트 컴포넌트 트리 전체에 데이터를 공급하는 기능입니다.이를 통해 Props Drilling 문제를 해결할 수 있습니다. Props Drilling 문제란?Props Drilling은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 중간에 위치한 모든 컴포넌트에 일일이 Props를 전달해야 하는 문제를 말합니다.ㄴ이렇게 되면 코드가 복잡해지고 유지보수가 어려워집니다...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ecQBjy/btsIAs7yl6V/I0yrVYMztBwkv6plvzuJW0/img.png)
메모이제이션과 useMemo최적화란?최적화는 웹 서비스의 성능을 개선하는 기술을 의미합니다. 최적화는 사용자가 웹 서비스를 사용할 때 불필요하게 기다리지 않도록 하여 사용자 경험을 개선하는 데 중요한 역할을 합니다. 최적화는 웹 애플리케이션의 성능을 개선하기 위해 중요하지만, 모든 것을 최적화하는 것은 반드시 좋은 것만은 아닙니다. 최적화를 다 하는 것에 대해 고려할 몇 가지 중요한 점들을 알아봅시다.최적화의 이점성능 향상:불필요한 연산과 리렌더링을 줄여 애플리케이션의 반응성을 높입니다.사용자 경험을 향상시켜 애플리케이션이 더 빠르고 부드럽게 동작하게 만듭니다.리소스 절약:서버와 클라이언트의 리소스를 절약할 수 있습니다.배터리 수명, 데이터 사용량 등의 측면에서 모바일 사용자를 위한 최적화도 가능합니다...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cnFY9q/btsIBls3HDU/ZH1kUxD7vu3sVHmzIMXAV0/img.png)
roject 2: [할 일 관리] 앱 만들기이번 프로젝트에서는 간단한 [할 일 관리] 앱을 만들어 보겠습니다.이 앱은 오늘의 날짜를 표시하고, 할 일을 작성하고, 할 일 리스트를 관리할 수 있는 기능을 포함하고 있습니다.프로젝트는 크게 준비, UI 구현, 기능 구현의 단계로 나누어 진행합니다.목차프로젝트 준비하기UI 구현하기기능 구현하기CRUD 구현1. 프로젝트 준비하기요구사항 분석하기먼저 앱의 요구사항을 분석합니다.다음은 [할 일 관리] 앱의 최종 구현 모습입니다. 기능 목록:오늘의 날짜를 요일, 월, 일, 연도순으로 표시할 일(Todo) 작성 입력 폼 및 추가 버튼할 일 리스트 및 검색 기능할 일 아이템 체크박스, 등록 날짜, 삭제 버튼컴포넌트 구조앱의 UI 요소를 컴포넌트 단위로 나눕니다.컴포넌트를..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bdslZq/btsIzdcmsnG/vCX0nMXKJFkVKvbm45RYeK/img.png)
Project 1: [카운터 앱 만들기]목차프로젝트 준비하기요구사항 분석하기리액트 앱 만들기UI 구현하기Viewer 컴포넌트 만들기Controller 컴포넌트 만들기컴포넌트 스타일링하기기능 구현하기State를 이용해 카운터 기능 구현하기State는 어떤 컴포넌트에 만들까?리액트답게 설계하기1. 프로젝트 준비하기요구사항 분석하기지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행했다. [카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱이다.첫 리액트 프로젝트인 만큼 간단한 기능만 포함하고 있어서 누구나 어렵지 않게 구현할 수 있다.프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있다.이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 것이다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다...