[TIL] Dart 기본 문법 _ 함수, Class

해당 포스팅은 다양한 자료를 통해 학습한 내용을 바탕으로 정리한 글입니다 함수void main () { }일반적으로 Dart에서 함수는 위와 같은 형태를 가지고 있다.javascript에서 function main () { } 과 비슷한 형태 구조를 가지고 있는데함수 앞에 있는 void는 해당 함수가 아무것도 반환하지 않는다는 것을 의미한다.만약 해당 함수가 어떤 반환값을 가지고 있다면 해당 데이터의 타입에 맞게 작성해주어야 한다. int num (int a, int b) { return a+b;}함수의 파라미터 자리에는 위와 같은 방식으로 입력할 수 있는데,이 때도 각 파라미터에는 해당 파라미터의 타입을 입력해주어야 한다. positional parameterString introduce (Strin..

• format_list_bulleted Stack/Dart & Flutter
• · 2025. 5. 10.
• textsms

[TIL] Dart 기본 문법 _ 변수, 타입, 연산자

해당 포스팅은 다양한 자료를 통해 학습한 내용을 바탕으로 정리한 글입니다. 변수변수 선언하기var name = "우믑";Dart 언어는 위와 같이 변수를 생성하고 초기화한다.Dart 언어에서는 변수의 타입을 지정해줘야 하는데,var로 선언한 변수의 경우 해당 변수의 타입을 미리 지정하지 않고 값이 할당 될 때해당 값의 타입으로 변수의 타입이 추론된다. String name = "우믑";변수를 선언할 당시 해당 변수의 타입을 지정하고 싶을 때는var 대신 해당 변수의 타입을 지정해서 선언할 수 있다. var name;String title; print(name); // nullprint(title); // error변수를 선언할 때 곧바로 값을 할당하지 않아도 되는데,var로 선언한 변수..

• format_list_bulleted Stack/Dart & Flutter
• · 2025. 5. 9.
• textsms

[React_Library] 간편하게 적용하는 drag & drop (hello-pangea/dnd)

이미 다양한 웹에서 너무나도 익숙하게 사용하고 있는 기능이 있다.순서가 있는 여러 리스트에서 마우스로 특정 요소를 끌어서 순서를 원하는대로 변경하는 기능이다. 사실 굳이 마우스를 이용해서 끌고 놓고 하지 않고 버튼을 이용해서 순서를 바꾸는 방식으로 간단히 구현할 수 있다.리스트 순서 변경하기 (기본편)구현 환경 : React, Typescript, MUI, emotion (css) 우선 내가 해당 기능을 구현할 때 고려했던 환경에 대해서 그림과 함께 알아보자 화면에 보여지는 리스트가 있고, 해당 리스트의 순서를 변경할 때는 모달을 띄워서 순서를 변경하도록 했다.그래서 보여지는 리스트는 그대로 있고, 모달 안에서만 순서 변경이 이루어져야 했다.그 이후 '저장' 버튼을 누르면 변경된 순서가 리스트에 반영이 ..

• format_list_bulleted Stack/REACT
• · 2025. 4. 4.
• textsms

[React_Library] 휠 스크롤 날짜 선택 라이브러리, 하지만 직접 구현하는 방법을 곁들인 (react-simple-wheel-picker)

아이폰에서 볼 수 있는 기본 UI 중에 스크롤로 날짜를 선택하는 UI가 있다.앱 환경에서는 기본 UI로 불러올 수 있어서 이런거에 대해 UI 생각을 크게 하지 않겠지만이걸 웹에서 구현하려고 하라는 미션을 받아 옙!을 외치고 바로 라이브러리를 찾아봤다.  사막에서 오아시스를 발견했지만 신기루였다 npm에는 달력과 연관된 라이브러리는 상당히 많이 있다.react-date-picker / react-day-picker 등 여러 라이브러리가 있는데 내가 세운 조건에는 부합하지 않았다. - 스크롤을 통한 연 / 월 선택- 스크롤이 멈춘 위치의 값을 자동으로 선택- 해당 컴포넌트를 열었을 경우 선택했던 값이 컴포넌트 중앙으로 위치하기 위와 같은 조건들이 충족되는 라이브러리를 찾기 쉽지 않았었는데그러던 중 발견한 라..

• format_list_bulleted Stack/REACT
• · 2025. 3. 31.
• textsms

특정 텍스트 clipboard에 복사하기 : 사파리 환경은 또 다르다고

게임 이벤트 쿠폰을 입력하거나, 어떤 이벤트의 추천인을 입력하는 등의 다양한 이벤트가 있다.이때, 쿠폰 번호나 추천인 아이디 같은 특정 텍스를 버튼 하나만 눌러서 복사가 되도록 하는 기능이 있다.보기엔 간단해 보이는 이 기능을 실제로 어떻게 구현하는지 알아보자.  라떼는 execCommand였다 이거야기존에는 document.execCommand('copy')를 이용해서 특정 텍스트를 클립보드에 복사했다.여기서 볼 수 있는 execCommand 메서드는 선택된 요소에 대한 다양한 행동을 할 수 있게 해주는 메서드다.그래서 해당 메서드는 웹 에디터를 구현할 때 많이 쓰였다.해당 메서드에서 사용할 수 있는 여러 옵션 중 copy라는 옵션은 선택한 텍스트를 클립보드로 복사하게 해주는 옵션이다. function..

• format_list_bulleted Stack/JS
• · 2024. 12. 2.
• textsms

input 태그의 inputmode 속성 : 가상 키보드 타입 지정하기

모바일 환경에서 특정 값을 입력해야 하는 상황이 있다고 하자. 예를 들어 회원가입을 한다고 가정했을 때, 각 input 별로 작성해야 하는 데이터가 차이가 있을 것이다.아이디나 비밀번호의 경우 문자 형식의 데이터가 입력되어야 하고,전화번호를 입력하거나 생년월일을 입력하는 경우 숫자 형식의 데이터가 입력되어야 한다. 이런 상황에서 해당 input을 누르면 가상 키보드가 등장하게 되는데,문자 입력이 필요한 상황이라면 글자 입력 자판을,숫자 입력이 필요한 상황이라면 숫자 입력 자판을 띄워서사용자가 조금 더 편하게 사용할 수 있도록 설정할 수 있게 해주는 것이 오늘 알아볼 inputmode 속성이다.  inputmodeinput 태그에는 여러가지 속성이 있다.대표적으로 type이라던지 placeholder라던지..

• format_list_bulleted Stack/HTML
• · 2024. 12. 2.
• textsms

데이터 타입 | null과 undefined : 코어 자바스크립트 씹뜯맛즐 하기

지난 데이터 타입 포스팅에서 모든 것을 끝내려고 했지만 분량 조절 실패로두 번에 나눠서 데이터 타입을 맛보고 있다.과식하지 않고 적당히 나눠서 배부르게 맛보자.  null과 undefined지난 포스팅에서 null과 undefined도 기본형 데이터에 포함되는 것을 봤다.그렇다면 변하지 않는 값을 가지고 있다는 건 알겠는데,null과 undefined는 자바스크립트에서 '없다'라는 의미를 갖는다.둘 다 없는데 뭐가 차이가 있다는 걸까? 그걸 한번 알아보자. 아기들은 숨바꼭질 할 때 자신의 눈만 가리면 숨었다고 생각한다.부모의 입장에서 바라보면 분명 있는데 없다고 여긴다.부모가 우리 개발자라고 하면 아기가 변수라고 하면없다고 여기는 건 null, 정말 없는 건 undefined라고 할 수 있겠다. 조금 더..

• format_list_bulleted Stack/JS
• · 2024. 11. 21.
• textsms

데이터 타입 | 기본형과 참조형 : 코어 자바스크립트 씹뜯맛즐 하기

코어 자바스크립트를 씹뜯맛즐해 보는 시간이다.이미 널리고 널린 게 해당 책에 대한 정리 글이지만, 그걸 읽는다고 내 것이 되는 게 아니니나는 나만의 언어로, 방식으로 이해하며 정리하는 방법을 택했다.  데이터 타입의 종류기본형 : 숫자 (number), 문자 (string), 불리언 (boolean), null, undefined 등참조형 : 객체 (+ Map, WeakMap, Set, WeakSet), 배열, 함수, 날짜, 정규 표현식 등 자바스크립트의 데이터 타입은 위와 같이 분류할 수 있다.여기서 기본형과 참조형은 할당이나 연산 시 복제되는지, 아니면 참조되는지를 가지고 나누게 된다.엄밀하게 따지면 기본형과 참조형 모두 복제를 하지만, 복제하는 대상이 다르다. 위의 기준이 무슨 말인지 명확하게 이해..

• format_list_bulleted Stack/JS
• · 2024. 11. 20.
• textsms

This : 이거라며.. 왜 다르냐고

이번에 다뤄볼 주제는 악명 높은 This다.실제로도 자바스크립트 관련 면접 질문에서 This와 관련해 문제 형식으로 종종 나왔던 것을 볼 수 있는데,이게 대충 생각하면 딱 틀리기 좋은 주제라서 한번 정리해 보고자 한다.  초면은 아닌 거 같고, 누구시더라?This는 사실 내 글에서 처음 등장한 개념은 아니다.실행 컨텍스트에서 실행 컨텍스트의 구조를 설명할 때 잠깐 등장했다. (실행 컨텍스트 읽고 오기) 위의 사진은 내 글에서 발췌한 내용인데, 여기 실행컨텍스트의 구조 중3번째에 있는 ThisBinding이 this 식별자가 바라보고 있는 대상 객체를 의미한다고 적혀있다.여기서 바인딩은 식별자와 값을 연결하는 과정을 뜻하는데,ThisBinding을 좀 더 쉽게 설명하면,this라는 친구한테 '너가 가리켜야..

• format_list_bulleted Stack/JS
• · 2024. 11. 15.
• textsms

클로저 (Closure) : 자바스크립트의 네크로멘서

자바스크립트의 함수는 호출 이후 내부 로직을 다 실행하고 나면 다시 호출되기 전까지 작동하지 않는다.실행 컨텍스트 편에서도 봤듯, 콜 스택에 쌓이고 실행되면 제거되기에 다시 호출한다고 해도함수 내부의 로직을 동일하게 실행하고 다시 사라지게 된다. function sum (addNum) { let result = 0; result = result + addNum; console.log(result);}sum(5) // 5sum(7) // 7sum(10) // 10예를 들어 위와 같은 코드에서, sum이라는 함수를 3번 호출하면 그대로 5,7,10이 반환된다.왜냐하면 sum 함수 내부에..

• format_list_bulleted Stack/JS
• · 2024. 11. 11.
• textsms