공부 기록용 공부 기록용

Function일반적인 함수int add(int a, int b) { return a + b;}매개변수를 순서대로 넣는 방식으로 왼쪽 위에서부터 반환 형태, 매개 변수, 반환할 값을 정의하는 구조를 가진다.  선택적 이름 있는 인수 함수 (Optional Named Arguments)   // sayHello 함수 정의String sayHello( {String name = 'anon', int age = 99, String country = 'wakanda'}) { return "Hello $name, you are $age years old, and you come from $country.";}void main() { // 예제 1: 모든 매개변수를 전달하지 않고 기본값만 사용 // n..

String Interpolation(문자열 보간, 문자열 삽입)void main() { var name = 'jeongwon'; var age = 22; var greeting = "hello everyone, my name is $name, and I'm ${age + 2}"; // ""(더블 쿼터)를 사용해도 되고, $ 뒤에 변수명을 붙이면 포맷팅이 가능하다. // {} 대괄호 안에 간단한 계산을 할 수도 있다. print(greeting);} $와 변수 삽입문자열 내에 $ 뒤에 변수명을 붙이면 해당 변수가 문자열에 삽입됩니다.예: $name은 'jeongwon'으로 대체됩니다.{} 내부 계산중괄호 {}를 사용해 문자열 내에서 연산을 포함할 수 있습니다.예: ${age + 2}은 ..

Hello world예시 코드: void main() { print('hello world');} 결론모든 Dart 프로그램은 main 함수에서 시작한다.명령문 끝에는 세미콜론을 붙여야 하지만, 경우에 따라 Dart가 생략을 허용하기도 한다.  Variadbles예시 코드:void main() { var name = 'Alice'; // 타입 추론: String int age = 25; // 명시적으로 타입 지정 print('$name, $age');}class Person { String name; // 타입 명시 int age; // 타입 명시 Person(this.name, this.age);}  결론Dart는 변수의 타입을 자동으로 추론하지만, 선언 후 초기화 시 타입 일관성을 지켜야..

Dart 언어 소개Dart는 구글(Google)에서 개발한 오픈소스 프로그래밍 언어로, 주로 웹, 모바일, 데스크톱 애플리케이션 개발에 사용된다. 특히 Flutter 프레임워크의 기본 언어로 활용되며, 크로스플랫폼 개발에 강점을 가진다. 정적 타입과 동적 타입을 모두 지원하며, 빠른 컴파일과 간결한 문법을 제공한다.Dart의 주요 특징크로스플랫폼 개발하나의 코드로 iOS, Android, 웹, 데스크톱 애플리케이션을 동시에 개발할 수 있다.Flutter와 함께 사용하면 네이티브 성능을 제공하며, 일관된 사용자 경험을 구현한다.AOT와 JIT 컴파일AOT(Ahead Of Time)는 앱을 미리 컴파일해 빠른 실행 속도를 제공한다.JIT(Just In Time)는 개발 중 실시간 컴파일로 빠르게 결과를 확인..

[React] GitHub Pages에 배포하기 (velog.io) [React] GitHub Pages에 배포하기오늘은 간단한 리액트 페이지를 GitHub Pages에 배포하는 방법에 대해 알아보겠습니다. 당연하겠지만, 서버가 필요한 페이지는 따로 서버를 연결해주어야하니 여기선 다루지않겠습니다.혹시 몰라velog.io

채찍피티 왈`react-router-dom`은 React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있게 도와주는 라이브러리입니다. 페이지 간 이동이나 URL 변화를 관리할 수 있게 해주며, 이를 통해 SPA(Single Page Application)에서도 페이지 전환과 같은 사용자 경험을 제공할 수 있습니다. 예를 들어, 사용자가 특정 경로로 이동하면 해당 경로에 맞는 컴포넌트를 렌더링하고, 뒤로 가기나 앞으로 가기와 같은 브라우저의 내비게이션 기능도 지원합니다. 이 라이브러리를 사용하면, 브라우저의 주소창에 있는 URL에 따라 서로 다른 화면을 렌더링하거나, `Link` 컴포넌트를 이용해 화면 간의 이동을 구현할 수 있습니다. 따라서 `react-router-dom`은 SPA를 만들..

나의 할일을 입력 태그에 작성하고 Add To Do 버튼을 누르면 할일 리스트에 추가되면서 리 랜더링되는 간단한 투두리스트이다. 중요한 부분은 Submit 이벤트를 form 태그에 걸어두고 제출 이벤트가 감지되면 서버로 보내지 않고 왜냐하면 보낼 서버가 없음. 할일 목록을 저정하는 toDos 에 추가하고 li 태그로 리 랜더링한다.  Add To Do# 제출 이벤트를 감지해서 const onSubmit = (event) => { # 고유 동작을 중지시킨다.(submit 을 중지) event.preventDefault(); if (toDo === "") { return; } # [1, ...] -> [1,2,3,4] 으로 리스트가 반환된다. 유용함! ..

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 UI 를 변경했었다. 하지만 이는 불필요한 부분까지 다시 실행시켜 자원을 낭비하기 때문에 useEffect 를 사용하여 이를 줄여볼 것이다.import Button from "./Button";import styles from "./App.module.css";import { useState, useEffect } from "react";function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); co..