본문 바로가기
반응형

프론트엔드164

리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) ⭕ 리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform)리액트 네이티브(React Native)는 페이스북에 의해 2015년에 발표된 혁신적인 크로스플랫폼 모바일 앱 개발 프레임워크입니다. 이 기술은 모바일 앱 개발의 패러다임을 전환시키며, 개발자들에게 안드로이드와 iOS 운영체제를 위한 앱을 단일 코드베이스로 개발할 수 있는 능력을 부여합니다. 리액트 네이티브의 등장으로 인해, 웹 개발자들은 별도의 네이티브 언어 학습 없이도 효율적으로 모바일 앱을 개발할 수 있게 되었습니다. ➡️ 네이티브 앱 (Native App)네이티브 앱 개발은 각 운영체제별로 최적화된 성능과 사용자 경험을 제공하지만, 이는 개별 플랫폼마다 별도의 앱 개발을 필요로 합니다. 안드로이드 앱 개발에는 .. 2024. 3. 19.
리액트 네이티브 React Native | 리액트 기반 프레임 워크 ⭕ 리액트 네이티브 React Native | 리액트 기반 프레임 워크리액트 네이티브(React Native)는 페이스북이 개발한 크로스플랫폼 모바일 앱 개발 프레임워크로, 널리 사용되는 웹 개발 언어인 자바스크립트를 기반으로 합니다. 리액트 네이티브는 리액트와 기술적으로 약 10%만 공유하며, 주로 웹 브라우저 대상으로 동작하는 리액트와는 달리, HTML과 CSS를 사용하지 않고도 실행 가능한 앱을 만들 수 있다는 점에서 큰 차이를 보입니다. 이는 기존에 안드로이드 앱 개발에 사용되는 자바나 코틀린, iOS 앱 개발에 필요한 오브젝트C나 스위프트와 같은 언어에 비해 훨씬 접근성이 좋다고 할 수 있습니다. 그 결과, 리액트 네이티브는 개발자들에게 자바스크립트를 이용하여 네이티브 수준의 성능을 내는 모바일.. 2024. 3. 19.
자바스크립트 JavaScript | 비동기 처리 ⭕ 자바스크립트 JavaScript | 비동기 처리비동기 처리는 코드가 순차적으로 실행되는 대신, 특정 작업이 백그라운드에서 실행되도록 하고, 그 작업의 완료 여부와 상관없이 다음 코드로 진행할 수 있게 해주는 프로그래밍 방식입니다. JavaScript에서는 이러한 비동기 처리가 매우 중요한데, 예를 들어 웹 애플리케이션에서 서버로부터 데이터를 요청하고 그 데이터가 도착할 때까지 기다리는 경우, 사용자 인터페이스(UI)가 멈추지 않고 다른 작업을 계속할 수 있게 해 줍니다. ➡️ PromisePromise는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 이 객체는 세 가지 상태를 가지게 됩니다.pending: 아직 결과가 정해지지 않은 초기 상태입니다.fulfilled: 비동기 작업이 성공적.. 2024. 3. 9.
자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) ⭕ 자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment)➡️ 전개 구문 (Spread Syntax)전개 구문은 배열이나 객체의 요소를 여러 개의 개별 요소로 "전개"하는 데 사용됩니다. 이 구문은 함수 호출에 인수를 전달하거나, 배열을 다른 배열에 병합하거나, 객체를 다른 객체와 병합할 때 유용하게 사용할 수 있습니다.// 배열 전개let numbers = [1, 2, 3];let moreNumbers = [...numbers, 4, 5];console.log(moreNumbers); // [1, 2, 3, 4, 5]// 객체 전개let person = { name: "Alice".. 2024. 3. 9.
자바스크립트 JavaScript | 함수 및 반환 방법 ⭕ 자바스크립트 JavaScript | 함수 및 반환 방법➡️ 묵시적 반환묵시적 반환은 화살표 함수(=>)를 사용할 때, 함수 본문을 중괄호({})로 감싸지 않고 직접 결과 값을 반환할 수 있는 간결한 문법을 의미합니다. 이 방법을 사용하면 return 키워드 없이도 함수에서 값을 반환할 수 있습니다. 묵시적 반환은 함수의 본문이 단일 표현식으로 구성되어 있을 때 유용하게 사용할 수 있으며, 코드를 더 간결하고 읽기 쉽게 만들어 줍니다. 특히 배열 메서드의 콜백 함수나 간단한 연산을 수행하는 함수를 작성할 때 유용합니다. 첫 번째 함수 square는 묵시적 반환을 사용하여 x * x의 결과를 바로 반환합니다.두 번째 함수 squareWithReturn는 동일한 계산을 수행하지만, 중괄호({})와 retu.. 2024. 3. 9.
자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 ⭕ 자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문예외 처리는 프로그램 실행 중 발생할 수 있는 예외 또는 오류를 처리하기 위한 메커니즘입니다. 자바스크립트에서는 try-catch-finally 구문을 사용하여 예외 처리를 할 수 있습니다. 이 구조를 사용하면 오류가 발생했을 때 프로그램이 갑자기 중단되지 않고, 개발자가 제공한 방식으로 예외를 처리할 수 있습니다. ➡️ try-catch-finally 구문try 블록: 실행할 코드를 포함하며, 여기서 발생하는 모든 예외는 catch 블록으로 전달됩니다.catch 블록: try 블록 내에서 예외가 발생했을 때 실행됩니다. 예외 객체를 받아 처리할 수 있습니다.finally 블록: 예외 발생 여부와 상관없이 실행되는 코.. 2024. 3. 9.
자바스크립트 JavaScript | 객체(Object) 및 접근 방법 ⭕ 자바스크립트 JavaScript | 객체(Object) 및 접근 방법➡️ 객체(Object)객체(Object)는 키와 값을 한 쌍으로 갖는 컬렉션입니다. 자바스크립트에서 객체는 매우 중요한 데이터 타입 중 하나로, 다양한 방법으로 속성에 접근할 수 있습니다.let person = { name: "Alice", age: 30}; ➡️ Dot Notation (점 표기법): object.key가장 일반적인 방법으로, 점(.)을 사용하여 객체의 속성에 접근합니다.키가 유효한 식별자일 경우(공백이나 특수 문자가 없는 경우) 사용할 수 있습니다.직관적이고 간결하여 가독성이 좋습니다.console.log(person.name); // Alice ➡️ Bracket Notation (대괄호 표기법): obje.. 2024. 3. 9.
자바스크자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal) ⭕ 자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal)➡️ 템플릿 리터럴(Template Literal)ES6에서 등장한 내장된 문자열 표현식입니다. 템플릿 리터럴은 큰따옴표나 작은따옴표 대신 백틱(`)을 사용하여 문자열을 정의합니다. 이 방법을 통해 문자열 내에서 변수나 표현식을 ${}로 감싸 직접 삽입할 수 있습니다. 이는 코드의 가독성을 높이고, 문자열을 더욱 쉽게 조작할 수 있게 해 줍니다.템플릿 리터럴을 사용하면 변수나 심지어는 함수의 결괏값을 문자열 안에 직접 삽입할 수 있어, 동적인 문자열 생성이 매우 간편해집니다. 이러한 특성은 HTML 요소를 동적으로 생성하는 등 웹 개발에서 자주 활용됩니다.let name = "Jane";let age = 2.. 2024. 3. 9.
자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열 ⭕ 자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열React 프로젝트 진행을 위한 자바스크립트 기본 구성 요소를 정리합니다. ➡️ 변수데이터를 저장하는 데 사용되는 이름이 붙은 저장소let, const, var 키워드를 사용하여 변수를 선언함let name = "John";const age = 30; ➡️ 함수즉시실행함수정의되자마자 즉시 실행되는 함수주로 초기화 코드에 사용함(function() { console.log("즉시 실행!");})();파라미터 기본값 설정함수에 파라미터를 전달하지 않았을 경우 기본값을 설정할 수 있음function greet(name = "Guest") { console.log(`Hello, ${name}!`);}gr.. 2024. 3. 9.
파이썬 Python | 알고리즘 | Greedy algorithm(그리디 알고리즘, 탐욕법) ⭕ 파이썬 Python | 알고리즘 | Greedy algorithm(그리디 알고리즘, 탐욕법) 현재 상황에서 가장 좋아 보이는 선택을 연속적으로 하여 최종적인 해결책에 도달하는 방식 문제를 해결하기 위해 순간마다 가장 최선의 선택을 해나가며, 각 단계에서의 선택이 그 이후의 선택들에게 제약을 주지 않는 방향으로 진행되어야 함 정당성 분석: 반드시 그 선택이 실제로 최적해에 도달할 수 있다는 것을 증명하는 정당성 분석이 필요함 ➡️ 조건 탐욕스러운 선택 조건(Greedy Choice Property): 우리가 한 선택이 다음 선택과 나머지 문제 해결에 영향을 주지 않고, 그 선택이 최종적으로 최적의 해결책을 가져다 줄 수 있다는 것 최적 부분 구조 조건(Optimal Substructure): 큰 문제를.. 2024. 3. 9.
파이썬 Python | 알고리즘 | Coding Test 준비 ⭕ 파이썬 Python | 알고리즘 | Coding Test 준비 문제 해결 역량(알고리즘 및 자료구조)에 관한 학습 기록 레퍼지토리 자주 사용하는 알고리즘 코드를 라이브러리화 ➡️ 사용 언어 변경: Java에서 Python으로 2024년 03월 06일부터 Python을 주 사용 언어로 전환함 다양한 프로그래밍 언어에 대한 학습 욕구 특히, Python은 풍부한 라이브러리 지원으로 알고리즘 학습에 집중하기 용이(예시, 문자열 처리가 다른 언어에 비해 간결하고 쉬움) 따라서, 다양한 상황에 능동적이고 쉽게 대응 가능 ⭕ 학습 계획 ➡️ 알고리즘 개념 학습 학습 내용: 그리디, 구현, DFS, BFS, 정렬, 이진 탐색, 다이나믹 프로그래밍, 최단 경로, 그래프 이론 등 학습 자료: 나동빈님의 YouTube.. 2024. 3. 9.
리액트 React | React: Props 및 State ⭕ 리액트 React | React: Props 및 State 프런트엔드 개발을 위한 JavaScript 라이브러리 ➡️ Virtual DOM 자바스크립트 객체 복제본: DOM 노드 트리의 경량화된 복사본, 실제 DOM보다 빠른 연산 가능 diffing 알고리즘: 이전과 현재의 Virtual DOM을 비교하여 실제 DOM에 반영해야 할 변경사항을 파악 배치 업데이트 기능: 변경사항을 모아두었다가 한 번에 실제 DOM에 적용하여 성능 최적화 ➡️ render() 컴포넌트의 렌더링: 컴포넌트가 호출될 때 실행되며, Virtual DOM을 생성하고 업데이트 결정 순수 함수: props나 state의 변경에 따라 결과가 결정됨 렌더링 단계: 'render phase'에서 Virtual DOM 생성 및 비교, '.. 2024. 3. 9.
리액트 React | DOM(Document Object Model) ⭕ 리액트 React | DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하고 제어할 수 있는 API, 프로퍼티, 메서드를 제공하는 트리 자료구조 구성 요소: 노드(Node), 객체(Object) ➡️ 프레임워크 및 라이브러리 발전 동기: 애플리케이션 규모 확장에 따라 API 통신 데이터 업데이트, 이벤트 및 상태(state) 조작 필요성 증가 기존 방식의 한계: document.getElementById() 같은 DOM API로 HTML을 직접 조작하는 방식은 불편하고 비효율적 예시: Angular, React, Vue, Svelte 역할: 브라우저 DOM 조작을 프레임워크 및 라이브러리에 위임 ➡️ DOM 등장 배경 서버에서 HTML 동적 생성을 가능하게 하는.. 2024. 3. 9.
리액트 React | 웹의 역사: AJAX (Asynchronous JavaScript and XML), Node.js, jQuery ⭕ 리액트 React | 웹의 역사: AJAX (Asynchronous JavaScript and XML), Node.js, jQuery ➡️ AJAX (Asynchronous JavaScript and XML) 문제점: 전통적인 웹 페이지 방식은 페이지 전환 시 전체 HTML 페이지를 서버로부터 받아오기 때문에 화면 깜빡임이 발생함 기능: JavaScript를 통해 서버와 비동기 방식으로 데이터 교환 및 조작 가능 구현: XHR (XMLHttpRequest) 객체 사용하여 데이터 요청 및 수신 장점: 페이지 전체 새로고침 없이 페이지 일부만 업데이트 가능 ➡️ Node.js 확장성: JavaScript를 서버 사이드에서 사용 가능, JavaScript의 범용성 증가 기술 도입: CommonJS 모듈 시.. 2024. 3. 9.
리액트 React | Redux-Toolkit ⭕ 리액트 React | Redux-Toolkit Redux를 사용하여 애플리케이션의 상태를 관리할 때 발생할 수 있는 복잡성과 반복적인 코드를 줄이기 위해 고안된 공식 도구 ➡️ useDispatch() dispatch: Redux store에 action을 보내는 함수 useDispatch(): React 컴포넌트 내부에서 dispatch 함수를 쉽게 사용할 수 있게 해주는 React hook ➡️ useSelector() Redux store의 state에서 필요한 부분만을 선택(select)하여 가져올 수 있게 해주는 함수 컴포넌트가 useSelector를 사용하여 store의 state 일부를 선택하면, 해당 state 부분이 변경될 때마다 컴포넌트가 리렌더링됨 ➡️ crateSlice() sl.. 2024. 3. 8.
리액트 React | Redux ⭕ 리액트 React | Redux JavaScript 앱을 위한 예측 가능한 상태 컨테이너 애플리케이션의 상태 관리를 효율적이고 일관된 방식으로 수행할 수 있음 상태 관리의 복잡성을 줄이고, 애플리케이션의 동작을 더 예측 가능하도록 함 ➡️ Redux 3가지 원칙 단일 진실의 원천(Single Source of Truth): 애플리케이션의 전체 상태는 하나의 객체 트리 스토어(store)로 저장됨, 애플리케이션 내 어디서든 같은 상태에 접근할 수 있음 상태는 읽기 전용(States Are Read-Only): 상태를 변경할 수 있는 유일한 방법은 액션(action)을 발생하는 것 변화는 순수 함수에 의해 이루어진다(Changes Are Made with Pure Functions): 상태 변화는 리듀서.. 2024. 3. 8.
리액트 React | 상태관리: MVC/Flux ⭕ 리액트 React | 상태관리: MVC/Flux 상태 관리: 애플리케이션 내에서 데이터(상태)의 생성, 업데이트, 조회 및 삭제 등의 생명주기를 관리하는 전략 상태 변화가 발생할 때 해당 변화가 데이터를 필요로 하는 모든 컴포넌트에 자동으로 반영되도록 보장해야 함 props drilling: 상태를 컴포넌트 계층구조를 통해 전달하는 방법으로, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 직접 전달함 ➡️ MVC 아키텍처: 모델(Model), 컨트롤러(Controller), 뷰(View) 모델(Model): 데이터를 처리함 컨트롤러(Controller): 인터페이스 뷰(View): 데이터를 사용자에게 보여주는 UI 다방향 데이터 흐름 ➡️ Flux 아키텍처 액션(Action): 상태 변화를 일으키는 정보.. 2024. 3. 8.
리액트 React | React에서 Ajax(비동기 통신) 사용하기: Axios 방식 ⭕ 리액트 React | React에서 Ajax(비동기 통신) 사용하기 Ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드입니다. React에서는 Ajax(Asynchronous JavaScript and XML)를 사용하여 서버와의 비동기 통신을 처리할 수 있습니다. 이를 통해 웹 애플리케이션에서 데이터를 동적으로 로드하거나 업데이트할 수 있습니다. 라이브러리로는 Axios, jQuery AJAX, 그리고 브라우저에 내장된 window.fetch 등이 있습니다. 주로 Axios와 window.fetch를 많이 사용합니다. ⭕ Axios 방식 ➡️ Axios 라이브러리 설치 가장 일반적으로 사용되는 Ajax 라이브러리 중 하나인 Axios를 사용하여 Ajax 요청.. 2024. 3. 8.
자바 Java | 알고리즘 | 배열 ⭕ 자바 Java | 알고리즘 | 배열 배열은 동일한 자료형의 데이터를 일렬로 나열한 자료구조입니다. 각 요소는 인덱스를 통해 접근할 수 있습니다. 배열은 프로그래밍에서 매우 일반적으로 사용되며, 메모리 상에서 연속된 공간에 요소를 저장합니다. ➡️ 배열의 특징 인덱스를 사용하여 값에 바로 접근할 수 있다: 배열은 각 요소마다 고유한 인덱스가 있으므로, 해당 인덱스를 사용하여 배열 내의 요소에 직접 접근할 수 있습니다. 새로운 값을 삽입하거나 특정 인덱스에 있는 값을 삭제하기 어렵다: 배열의 특정 위치에 새로운 값을 삽입하거나 삭제하려면, 해당 위치 이후의 모든 요소를 이동시켜야 합니다. 이는 성능상의 문제를 유발할 수 있습니다. 배열의 크기는 선언할 때 지정할 수 있으며, 변경할 수 없다: 배열을 선언.. 2024. 3. 6.
자바 Java | 알고리즘 | 자료구조(Data Structure) - 배열(Array) 리스트(List) ⭕ 자바 Java | 알고리즘 | 자료구조(Data Structure) - 배열(Array) 리스(List) 두 가지 주요 자료구조인 배열과 리스트는 각각의 특징에 따라 적절한 상황에서 선택되어 사용됩니다. ➡️ 배열(Array) 배열은 연속된 메모리 공간에 값을 저장하는 자료구조입니다. 각 원소는 고유한 인덱스를 가지고 있어 해당 인덱스를 통해 직접 참조할 수 있습니다. int[] numbers = {1, 3, 5, 7, 9}; 배열의 특징 인덱스를 통한 직접 접근: 배열은 각 원소가 고유한 인덱스를 가지므로, 해당 인덱스를 사용하여 빠르게 값을 접근할 수 있습니다. 값의 삽입 및 삭제 어려움: 새로운 값을 삽입하거나 삭제할 때 주변의 값을 이동시켜야 하므로 연산이 복잡합니다. 예를 들어, 두 번째 값.. 2024. 1. 10.
자바 Java | 알고리즘 | 디버깅 ⭕ 자바 Java | 알고리즘 | 디버깅 디버깅은 프로그래밍 과정에서 코드의 논리 오류를 찾아내고 수정하는 중요한 단계입니다. 모든 프로그래머는 실수를 할 수 있으며, 이러한 실수는 코드의 논리 오류로 나타날 수 있습니다. 특히 자바와 같은 언어에서는 디버깅이 더욱 중요한데, 여기에는 몇 가지 핵심적인 이유가 있습니다. 첫째로, 코드 작성 시 실수는 불가피합니다. 논리적인 오류는 문법적인 오류와 달리 컴파일러가 감지하지 못하므로 실행 중에 발견되어야 합니다. 그리고 디버깅을 통해 이러한 오류를 찾아내고 수정할 수 있습니다. 둘째로, 많은 프로그래머들은 문법을 배우는 과정에서 디버깅을 가볍게 여기곤 합니다. 그러나 실제로는 디버깅이 코드 작성 과정에서 필수적인 스킬이며, 특히 코딩테스트를 응시할 때 디버깅.. 2024. 1. 9.
자바 Java | 알고리즘 | 시간복잡도 ⭕ 시간복잡도 시간 복잡도는 알고리즘 선택의 주된 기준 중 하나로, 주어진 문제를 해결하는 데 필요한 연산 횟수를 나타냅니다. 코딩테스트에서는 1억 번의 연산을 1초로 가정하며, 주어진 시간제한 내에 문제를 해결할 수 있어야 합니다. 시간제한이 2초인 경우 최대 2억 번의 연산 안에 답을 도출해야 합니다. ➡️ 시간 복잡도 유형 시간 복잡도는 주로 빅오(O), 빅세타(Θ), 빅오메가(Ω) 세 가지 유형으로 나뉩니다. 빅오(O): 알고리즘의 최악의 경우 시간 복잡도를 나타냅니다. 이는 주어진 입력 데이터에 대해 알고리즘이 최대로 소요될 수 있는 시간을 표현합니다. 코딩테스트에서는 주로 빅오를 고려하여야 합니다. 특히 TEST SET이 복잡하게 나오는 상황에서는 항상 최악의 경우를 염두에 두고 알고리즘을 선.. 2024. 1. 8.
HTML 태그: 웹 개발의 기본, 태그의 중요성과 활용법 ✅ HTML 태그HTML 문서는 웹 페이지를 작성하기 위한 기본적인 구성 요소인 "태그"를 사용합니다. 태그는 주로 열리는 태그(opening tag)와 닫히는 태그(closing tag)로 구성되며, 닫히는 태그에는 슬래시("/")가 붙어 구분됩니다. 태그는 요소들을 정의하고 웹 페이지의 구조를 형성하며, 중첩하여 사용하여 여러 요소를 묶을 수 있습니다. 💡 W3C(The World Wide Web Consortium): 웹 기술 표준의 중심W3C는 국제적으로 웹 기술을 표준화하는 단체로, HTML 태그의 예제와 정의를 제공하는 공식 홈페이지를 운영합니다. 이 사이트에서는 예제를 통해 태그의 사용법을 시각적으로 이해할 수 있으며, 이론적인 내용을 학습하는 데 도움이 됩니다. 두 가지 학습 방법 모두 .. 2023. 11. 7.
HTML 코딩을 위한 환경 설정: 에디터 선택과 비주얼 스튜디오 코드 소개 ✅ HTML 코딩 실습 환경 준비HTML을 배우고 웹 개발 실습을 시작하려면 먼저 적절한 코딩 환경을 설정해야 합니다. 이를 위해 다양한 에디터(Editor)를 사용할 수 있으며, 각 운영체제에 따라 사용할 수 있는 텍스트 편집기(Editor) 목록이 있습니다.  💡 에디터(Editor)HTML 코드를 작성하려면 텍스트 편집기(Editor)가 필요합니다.윈도우: 기본적으로 포함된 "메모장"을 사용할 수 있습니다. 메모장은 가벼우며 HTML 코드를 작성하는 데 필요한 기능을 제공합니다.맥(macOS): macOS에는 "텍스트 편집기(TextEdit)"가 기본적으로 포함되어 있습니다. TextEdit은 HTML 코드 작성에 유용하며, "포맷" 메뉴에서 "순수 텍스트" 모드를 선택하면 HTML 코드를 작성할.. 2023. 11. 7.
HTML과 퍼블릭 도메인: 웹의 언어 ✅ HTML: HyperText Markup LanguageHTML은 웹페이지를 생성하는 언어로, 웹의 기본 구조를 정의하는 중요한 역할을 합니다. HTM은 "HyperText"와 "Markup Language"의 약자로, 하이퍼텍스트를 생성하고 구조화하는 데 사용됩니다. 하이퍼텍스트는 텍스트, 이미지, 링크 등 다양한 미디어 요소를 포함할 수 있는데, 이를 웹페이지 내에서 연결하고 표현하기 위해 HTML을 사용합니다.HTML 문서는 태그(tag)로 이루어져 있으며, 이 태그들은 컴퓨터와 브라우저에게 웹페이지의 구조와 내용을 설명합니다. 예를 들어, , , ,  등의 태그를 사용하여 웹페이지의 제목, 본문, 이미지, 스타일 시트 등을 정의할 수 있습니다. HTML은 웹 개발에서의 기초 중 하나이며, 웹사.. 2023. 11. 7.
웹 기획: 프로젝트를 체계적으로 구상하는 핵심적인 과정 ✅ 웹 기획웹 기획은 어떤 프로젝트를 현실로 구현하기에 앞서, 그 프로젝트를 체계적으로 정의하고 계획하는 핵심적인 단계입니다. 웹 기획은 웹 개발 프로세스의 초기 단계로서, 웹 사이트나 웹 애플리케이션을 설계하고 구조화하는 과정을 의미합니다. 이 과정에서 다양한 측면을 고려하여 웹 사이트의 목표와 사용자 경험을 최적화하기 위한 전략을 개발합니다. 페이지 왼쪽에는 수업 목차를 나열하고, 목차 항목에는 링크가 포함되어 있습니다. 이 링크를 클릭하면 해당 항목의 내용이 오른쪽에 나타납니다.오른쪽 상단에는 현재 페이지의 제목이 표시되고, 본문에는 해당 제목에 대한 자세한 설명이 제공됩니다. 💡인간의 역할인간은 웹 페이지나 앱을 개발하는 과정에서 중요한 역할을 합니다. 인간은 "코드"를 작성하고 이를 통해 부호.. 2023. 11. 7.
리액트 React | 리스트 ✅ 리스트 💡 JavaScript 리스트 JavaScript에서 배열을 다루는 기능 중 map() 함수를 활용하여 리스트를 변환할 수 있습니다. map() 함수는 각 배열 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다. map() 함수는 배열의 각 요소를 인자로 받아 해당 요소를 가공한 후 새로운 배열을 반환합니다. 예를 들어, 주어진 배열의 각 요소를 두 배로 만들고 싶다면 다음과 같이 작성할 수 있습니다. numbers 배열의 각 요소를 두 배로 만들어 새로운 배열을 생성하고, 그 결과를 doubled 변수에 할당하여 출력하였습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number.. 2023. 7. 7.
리액트 React | 조건부 렌더링(Conditional Rendering) ✅ 조건부 렌더링(Conditional Rendering) React에서는 상태(State)에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다. 이를 통해 애플리케이션의 상황에 맞게 필요한 컴포넌트만 보여주거나 숨길 수 있습니다. 조건부 렌더링은 JavaScript의 조건 처리와 유사하게 동작합니다. 조건부 연산자나 if 문을 사용하여 현재 상태에 따라 UI를 업데이트할 수 있습니다. 💡 사용자 로그인 상태에 따른 조건부 렌더링 사용자의 로그인 상태에 따라 다른 인사말을 보여주는 컴포넌트입니다. 다음은 로그인된 사용자에게는 "Welcome back!"을, 로그인되지 않은 사용자에게는 "Please sign up."을 보여주는 두 개의 컴포넌트입니다. function UserGreeting(props) {.. 2023. 7. 6.
리액트 React | 상태(State) ✅ 상태(State) React에서 상태(State)는 컴포넌트 내에서 관리되는 비공개적인 데이터로, 컴포넌트 내부에서 값을 변경하고 화면에 반영하는 데 사용됩니다. State는 컴포넌트의 동적인 데이터를 저장하고 업데이트하는 데 주로 활용됩니다. State는 일반 JavaScript 객체이므로 여러 가지 데이터 유형을 저장할 수 있습니다. 💡 상태(State)와 속성(Props) 차이점 React에서는 상태(State)와 속성(Props)이라는 두 가지 주요 개념을 사용하여 컴포넌트의 데이터를 관리합니다. Props는 읽기 전용 데이터로, 컴포넌트 외부에서 설정되고 컴포넌트 내부에서는 변경할 수 없습니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 반면에 State.. 2023. 7. 4.
리액트 React | 컴포넌트 설계 패턴 ✅ 컴포넌트 설계 패턴 컴포넌트를 역할과 관심사에 따라 분리 시키기 위해서는 코드 내부의 로직을 쪼개고 다른 코드로 위임을 해야된다. 제어를 위임하는 것의 문제는 쪼개고 위임 할수록 사용 코드에 대한 이해 난이도가 높아 가고, 가독성이 떨어진다 또, 커스텀 설정이 요구되는 경우가 많다. 이 역시 절대적인 것은 없고 개발자의 재량에 따라 최적을 찾아야 한다. 유지보수와 확장이 불가능한 스파게티 코드로 끝나버리지 않으려면, 리액트 개발자로서 더 경험이 많아질수록 다양한 컴포넌트 패턴에 대해 학습하는 것이 필요하다. 이것이 끝은 아닌 것이, 여러 가지 패턴을 알아가는 것 자체가 좋은 기초가 된다. 이것의 가장 중요한 면은 어떤 문제에 대해 어떤 패턴을 적용할지 그때를 알게 된다는 점이다. 5 Advanced .. 2023. 7. 4.
반응형