열이의 개발블로그

✏️ React에는 controlled component와 uncontrolled component가 있습니다. 쉽게 설명하면 uncontrolled component(비제어 컴포넌트)는 ref를 통해 값을 가져올 수 있고 특정 행동이 있어야 값이 기록됩니다. 즉, 비동기적으로 값의 변화를 확인할 수 없다는 뜻 controlled component(제어 컴포넌트)는 state로 값을 기록하여 setState()를 통해 값을 업데이트합니다. 제어 컴포넌트는 비동기적으로 값이 변하는 것을 확인할 수 있습니다. function App() { const [minutes, setMinutes] = React.useState(); const onChange = (event) => { console.log(event..

✅ JSX는 HTML과 매우 유사합니다. 하지만 다른 점이 몇가지 존재하는데 이는 꼭 알아두어야 하니 알아보도록 합시다! ✏️ label, input 태그 연결 만약 HTML에서 label과 input을 연결하여 label을 클릭했을 때 input에 커서가 가도록 하고 싶다면 label엔 for 속성을 input엔 id 속성을 주어 연결하면 됩니다. Super Converter Minutes Hours 하지만 위의 문법은 JSX에서는 틀린 문법입니다. ✅ JSX에서 틀린 문법 위와 같이 코드를 작성했을 경우 틀린 문법이 됩니다. 하지만 아무런 오류를 확인할 수 없는데 이는 react를 production 버전으로 사용하고 있기 때문입니다. 버전을 development 버전을 사용한다면 콘솔에 오류가 발생..

리액트를 사용하여 버튼을 클릭하면 숫자가 증가하는 웹 페이지를 만들어보자. ✅ counter 변수와 render 함수 사용 위의 코드를 통해 Container라는 컴포넌트를 만들고 render 함수를 통해 Container를 root 안에 그린다. Container 안에는 button이 존재하고 이 button을 클릭했을 때 countUp이라는 함수가 실행된다. countUp은 let으로 선언된 counter를 하나 증가시키고 다시 render 함수를 불러 화면을 다시 그린다. 🚨 문제 여기서 문제는 변하는 무언가가 있을 때마다 render라는 함수를 호출해줘야 변화된 것이 새로 화면에 그려진다. 즉, 모든 변화 끝에는 render 함수를 호출해야 하는 안좋은 코드인 것이다. ✅ React.useStat..

React를 사용하기 전에 Vanilla JS(바닐라 자바스크립트)와 비교를 해봅시다. ✅ Vanilla JS Total clicks: 0 Click me 위의 HTML 코드는 "Click me"라는 버튼을 클릭하면 "Total clicks"의 숫자가 올라가는 코드입니다. 이러한 프로그램을 만들기 위해서 Javascript를 활용하여 counter라는 변수를 만들고 button과 span을 선택한 뒤 함수를 만들어 버튼을 클릭할 때 발생하는 이벤트리스너를 설정하여 counter의 숫자를 하나 늘리고 span 안의 텍스트에 counter를 다시 넣어줍니다. ✅ React CDN https://ko.legacy.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaS..

프론트엔드 개발자를 희망하는 사람이라면 누구나 들어봤을 법한 기술 스택인 React.js 프론트엔드 라이브러리, 프레임워크로 주로 사용되는 React.js와 Vue.js를 비교해보는 글입니다. ✅ React.js란? React.js는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리입니다. React.js는 사용자 인터페이스를 구축하기 위해 사용되며, 웹 애플리케이션에서 동적이고 반응형 UI를 만드는데 매우 유용합니다. ✅ React.js의 특징 컴포넌트 기반(Component Based) 아키텍처를 기반으로 하며, 이는 UI를 작은 조각으로 분할하고 각 조각을 독립적으로 관리할 수 있게 합니다. 다른 프레임워크와 다르게 MVC(Model - View - Controller) 아키텍처가 아닌 V..

알고리즘 문제를 풀거나, 혹은 할인된 가격 등을 계산할 때 정수가 아닌 실수 형태로 나타나는 경우가 있다. 이럴 때 가끔 자릿수를 제한하여 소수점 이하 첫째 자리, 둘째 자리 등등 조건이 붙게 된다. 이를 위해 Python에서 소수점 자릿수를 제한하여 출력하는 방법에 대해 알아봅시다. ✅ round 함수 사용 round 함수는 round(x)와 같은 형태로 x의 값을 반올림하는데 사용합니다. 추가로 round 함수는 두 번째 인자를 갖을 수 있고 round(x, 3)이라는 형태를 가질 경우 넷째 자리에서 반올림하여 소수점 이하 셋째 자리까지 출력하게 됩니다. a = 1.23456 print(round(a, 0)) # 1.0 print(round(a, 1)) # 1.2 print(round(a, 2)) #..

✅ Flux 패턴이란? Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. https://haruair.github.io/flux/docs/overview.html Flux | 사용자 인터페이스를 만들기 위한 어플리케이션 아키텍쳐 사용자 인터페이스를 만들기 위한 어플리케이션 아키텍쳐 (한국어 번역) haruair.github.io Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처입니다. ✏️ Action Action이란 데이터를 변경하는 행위로서 Dispatcher에게 전달되는 객체..

Vuex란? Vue.js용 상태 관리 라이브러리 Vuex는 Vue.js 애플리케이션의 상태(데이터)를 관리하기 위한 중앙 저장소 역할을 합니다. Flux 아키텍처 패턴을 따르며 상태는 저장소라는 단일 정보 소스에 저장되고 컴포넌트는 actions 및 mutations을 통해 상태를 업데이트하고 접근할 수 있습니다. ✅ Vuex를 사용해야 하는 이유 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. Vue를 기준으로 컴포넌트끼리 데이터를 주고 받기 위해서는 부모 컴포넌트가 자식 컴포넌트로 데이터를 넘겨주어 처리합니다. 하지만 중간에 거쳐야할 컴포넌트가 많아지거나 같은 레벨 간에 데이터의 이동이 필요할 경우 데이터 흐름이 복잡해집니다. 이를 더 효율적으로 해결하기 위..

✅ 패킹 여러 개의 데이터를 하나로 묶어 변수에 대입하는 것 nums = (1, 2, 3, 4, 5) ✅ 언패킹 여러 개의 데이터를 하나로 묶은 컬렉션을 여러 개의 변수로 나누어 담는 것 (a, b, c, d, e) = nums print(a, b, c, d, e) # 1 2 3 4 5 ✅ 남은 요소 대입받기 좌변의 변수 중 하나의 변수에 별 기호( * : Asterisk)를 붙이면 남은 요소 전체를 리스트에 담아 대입한다. ✏️ 슬라이싱으로 분리 a = nums[0] b = nums[1] arr = nums[2:] print(a, b, arr) # 1 2 (3, 4, 5) ✏️ 별 기호( * : Asterisk) a, b, *arr = nums print(a, b, arr) # 1 2 [3, 4, 5]..

https://www.acmicpc.net/problem/1629 1629번: 곱셈 첫째 줄에 A, B, C가 빈 칸을 사이에 두고 순서대로 주어진다. A, B, C는 모두 2,147,483,647 이하의 자연수이다. www.acmicpc.net 문제 분석 문제는 A를 B번 곱한 수를 C로 나눈 나머지를 구하는 것이다. 하지만 10의 11 제곱만 하더라도 수가 엄청 커지고 A, B, C의 범위가 상당히 큰 수이므로 직접 제곱수를 구해서 계산할 수 없다. 이 때는 분할 정복을 통한 제곱수를 구하는 방식을 사용한다. 위와 같은 식으로 제곱수를 쪼갤 수 있다. 이를 재귀 함수로 작성하여 B가 1이 될 때까지 계산하여 제곱수를 분할해 계산한다. 제곱수를 분할했다면 나머지를 구해야 한다. 나머지의 경우는 모듈러 ..