on my way

Project 1: [카운터 앱 만들기]목차프로젝트 준비하기요구사항 분석하기리액트 앱 만들기UI 구현하기Viewer 컴포넌트 만들기Controller 컴포넌트 만들기컴포넌트 스타일링하기기능 구현하기State를 이용해 카운터 기능 구현하기State는 어떤 컴포넌트에 만들까?리액트답게 설계하기1. 프로젝트 준비하기요구사항 분석하기지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행했다. [카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱이다.첫 리액트 프로젝트인 만큼 간단한 기능만 포함하고 있어서 누구나 어렵지 않게 구현할 수 있다.프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있다.이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 것이다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다...

리액트 상태 관리의 진화 - useReducer와 상태 관리리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나이고, 컴포넌트 기반의 구조로, UI를 효율적으로 관리하고 업데이트할 수 있게 해준다.리액트의 핵심 기능 중 하나인 상태 관리(State Management)는 앱의 복잡성을 줄이고, 사용자 인터페이스(UI)의 일관성을 유지하는 데 중요한 역할을 한다. 리액트 상태 관리란?리액트에서 상태(State)는 컴포넌트의 렌더링 결과에 영향을 미치는 데이터이다.이 데이터는 사용자 입력, 네트워크 요청의 결과 등 다양한 소스에서 올 수 있다.리액트는 상태가 변경될 때마다 UI를 다시 렌더링하여 사용자에게 최신 정보를 보여준다.useState와 useReducer리액트에서 상태를 관..

파이썬에서 딕셔너리는 매우 유용한 데이터 구조 중 하나로, 키-값 쌍을 저장합니다.이는 해시 테이블을 기반으로 하여 매우 빠른 검색 속도를 제공합니다.코딩테스트에서 딕셔너리를 잘 활용하면 문제를 효율적으로 해결할 수 있습니다. 지금부터 파이썬 딕셔너리의 문법과 유용한 기능을 정리하겠습니다. 1. 딕셔너리 생성딕셔너리는 중괄호 {}를 사용하여 생성합니다. 다음은 몇 가지 생성 방법입니다.# 빈 딕셔너리 생성dict1 = {}# 초기 값으로 딕셔너리 생성dict2 = {'a': 1, 'b': 2, 'c': 3}# dict() 함수로 생성dict3 = dict(a=1, b=2, c=3)# 리스트를 이용하여 생성dict4 = dict([('a', 1), ('b', 2), ('c', 3)]) 2. 요소 접근 및 ..

1. 리액트 컴포넌트와 라이프 사이클리액트 컴포넌트의 라이프 사이클 3단계리액트 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉩니다: 마운트(Mount), 업데이트(Update), 언마운트(Unmount).1. 마운트 (Mount, 탄생)마운트는 컴포넌트가 처음으로 페이지에 렌더링될 때 발생합니다. 이 단계에서 컴포넌트는 초기 설정을 수행하고, 필요한 초기 데이터를 가져오는 등의 작업을 할 수 있습니다.constructor: 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정하거나 인스턴스 변수들을 초기화할 수 있습니다.componentDidMount: 컴포넌트가 첫 번째 렌더링을 마친 후 호출됩니다. 이 시점에서 DOM 요소들이 모두 준비되어 있기 때문에, 초기화 작업이나 외부 데이터 가져오기 등을 수..

1. 컴포넌트 리액트는 컴포넌트 기반의 UI 라이브러리이다.이는 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 레고 조립하듯 하나로 합쳐 페이지를 구성하는 방식이다. 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다.현재는 함수로 컴포넌트를 만드는 방식이 선호된다. 함수 컴포넌트 만들기:App.js에서 첫 번째 리액트 컴포넌트를 만들었다.import "./App.css";function Header() { return ( header );}function App() { return ;}export default App;함수를 이용해 Header라는 이름의 컴포넌트를 만들었다.Header 컴포넌트는 HTML을 반환하..

Nginx를 이용한 배포 설정Nginx는 웹 서버 및 리버스 프록시 서버로 널리 사용되는 소프트웨어로, 특히 고성능 웹 서버로서 많은 인기를 끌고 있습니다.Nginx를 사용하여 웹 애플리케이션을 배포할 때, 몇 가지 중요한 설정과 에러 페이지 구성에 대해 알아보겠습니다. 프록시(Proxy)란?프록시는 '대리인'이라는 뜻입니다. 컴퓨터 네트워크에서 프록시는 사용자의 요청을 받아 대신 처리해주는 서버를 의미합니다. 쉽게 말해,  어떤 웹사이트에 접속하고 싶을 때 프록시 서버가 그 웹사이트에 접속한 후, 그 내용을 전달해주는 역할을 합니다. 이렇게 하면 직접 웹사이트에 접속하지 않더라도 웹사이트의 정보를 볼 수 있습니다. 1. Nginx 설정 파일 (nginx.conf)Nginx 설정 파일인 nginx.con..