열이의 개발블로그

✅ 타입스크립트의 타입 체커(Type Checker)와 소통하는 방법 let a = "hello" let b: boolean = false; let c: number[] = [] a는 string이라고 추론할 수 있도록 하는 방법입니다. b는 boolean이라고 명시적으로 알려주는 방법입니다. c는 숫자만 들어갈 수 있는 array라고 명시적으로 선언하는 방법입니다. const player: object = { name: "nico", }; player.name; 객체의 경우도 object라고 명시적으로 선언할 수 있지만 이 때는 오류가 발생합니다. object라는 타입에 name이라는 속성이 없기 때문입니다. const player: { name: string } = { name: "nico" }; p..

✏️ 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..

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

Vue3에서 등장한 composition api에서 사용하는 데이터를 반응형으로 만드는 방법 ✏️ composition api가 등장한 배경 Vue2에서는 options api를 사용하고 있었음 객체 내에 다양한 속성을 사용하고 있는 형태 라이프 사이클을 제어하기 위해 사용하는 created, mounted, updated 그리고 컴포넌트 내에서 여러 메서드(methods)들을 정의하고 데이터(data)들을 참조할 때 정해진 속성에 정의해 사용 ✏️ options api 사용 예시 // 태그 안 export default { components: { // 컴포넌트 정의 }, data() { return { // 데이터 정의 } }, created() { // created 시점 정의 }, methods(..

Do it! Vue.js 뷰 템플릿 뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 ✏️ 템플릿 속성 사용 방법 1. ES5에서 뷰 인스턴스의 template 속성을 활용 template: 'Hello {{ message }}' 템플릿 속성의 특징 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 하고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해줌 1. {{ message ]} ... ..

Do it! Vue.js 뷰 HTTP 통신 ✏️ 웹 앱의 HTTP 통신 방법 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해줘야 하기 때문 HTTP란? 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식 서버에 '해당 데이터를 보내주세요.'라는 메시지를 보내는 것이 'HTTP 요청을 보낸다.'와 같은 의미 웹 앱 HTTP 통신의 대표적인 사례로 제이쿼리(jQuery)의 ajax ajax는 서버에서 받아온 데이터를 표시할 때 화면 전..