odada

조건부 렌더링 (Conditional Rendering)조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것을 말합니다.React에서는 삼항 연산자나 && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.1. 삼항 연산자삼항 연산자는 조건에 따라 다른 값을 반환하는 연산자입니다.import React from 'react';function App() { const isLogin = true; return {isLogin ? 로그인 중 : 로그인 해주세요};}export default App;2. && 연산자&& 연산자는 조건이 참일 때만 결과를 반환하는 연산자입니다.import React from 'react';function App() { const isLogin = true; retur..

React의 핵심 개념React를 시작하는 개발자들을 위한 핵심 개념들을 정리해보았습니다. react의 핵심 개념을 이해하고, 실제 프로젝트에 적용해보면서 경험을 쌓는 것이 중요합니다.리액트 홈1. React란?https://odada.me/250React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.리액트는 하나의 html 페이지만 존재하는 웹사이트(웹애플리케이션)으로 다른 컨텐츠 페이지를 불러들어오는 구조입니다.이미지출처: 소플의 리액트- 설치node.js 설치 후, 터미널에서 아래 명령어로 설치합니다.npx create-react-app@latest ./- 실행npm start1. 컴포넌트 (Components)https://odada..

https://devfancy.github.io/Technology-GitHub-Branch-Protection-Rule/ GitHub에 올라간 Branch에 Protection Rule 적용하기Indexdevfancy.github.io 작성중...

웹사이트 제작 기본 프로세스https://odada.me/291퍼블리싱 기초https://odada.me/290부트스트랩으로 빠르게 포폴 만들기https://odada.me/350 https://www.w3schools.com/ W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com https://developer.mozilla.org/ko/docs/Web ..

부트스트랩으로 빠르게 포트폴리오 만들기1. 포트폴리오란?포트폴리오는 자신의 업무 능력과 경험을 보여주는 문서입니다. 개인의 업무 능력과 경험을 보여주기 위해 만들어지는 것이기 때문에 자신의 업무 능력과 경험을 잘 보여줄 수 있어야 합니다.2. 부트스트랩이란?https://getbootstrap.kr/부트스트랩은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JavaScript를 사용하여 웹 페이지를 만들 때 사용할 수 있는 여러 가지 디자인 요소와 기능을 제공합니다.부트스트랩을 사용하면 웹 페이지를 쉽고 빠르게 만들 수 있습니다. 부트스트랩은 반응형 웹 디자인을 지원하기 때문에 모바일 환경에서도 웹 페이지가 잘 보이도록 만들 수 있습니다.

ts 가져오기, 내보내기타입스크립트에서는 import와 export 키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다.// export.tsinterface User { name: string; age: number; role: boolean;}export function introduce(user: User) { return `${user.name}는 ${user.age}살이며, 관리자인가요? ${user.role ? '네' : '아니요'}`;}// import.tsimport { introduce } from './export';const userA = { name: '김가을', age: 2, role: false,};const userB = { name..

제너릭 (Generics)제너릭은 타입을 파라미터로 전달하여 타입 안정성을 확보하는 방법입니다.함수interface Obj { x: number;}type Arr = [number, number];function toArray(a: string, b: string): string[];function toArray(a: number, b: number): number[];function toArray(a: boolean, b: boolean): boolean[];function toArray(a: Obj, b: Obj): Obj[];function toArray(a: Arr, b: Arr): Arr[];function toArray(a: any, b: any) { return [a, b];}co..

타입 별칭 (Type Aliases)타입 별칭은 새로운 타입을 정의하는 용도로 사용됩니다. 타입 별칭은 기존 타입을 참조하여 새로운 타입을 정의할 수 있습니다.type User = | { name: string; age: number; role: boolean; } | [string, number, boolean];const user1: User = { name: '김가을', age: 2, role: false,};const user2: User = ['김겨울', 22, true];명시적 this인터페이스를 사용하여 클래스의 메서드 체이닝을 구현할 수 있습니다. 이때 인터페이스에 명시적 this를 사용하여 메서드 체이닝을..

인터페이스 (Interface)인터페이스란 객체 데이터의 타입을 지정하는 용도로 사용되는 문법입니다. 인터페이스는 객체의 구조를 정의하는 형태로 사용되며, 객체의 타입을 지정하는 역할을 합니다.// 인터페이스 정의 (대문자로 시작)interface User { name: string; age: number; isAdult: boolean;}const user1: User = { name: '김겨울', age: 22, isAdult: true,};const user2: User = { name: '김가을', age: 2, // `isAdult` 프로퍼티가 누락되어 타입 오류가 발생합니다. // isAdult: false,};위 코드에서 user2 객체는..

타입 추론 (Type Inference)최대한 타입을 적게 명시하여 코드를 간결하게 작성하는 것이 좋음타입 추론이란 TypeScript가 자동으로 타입을 추론하는 것변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론str = 123; // Error: Type '123' is not assignable to type 'string'01. 변수 추론초기화된 변수let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론let num = 123;let bool = true;기본값이 설정된 매개변수// a와 b의 타입을 명시하지 않아도 타입스크립트가 number 타입으로 추론function add(a: n..