차근차근 배움터

[JS] null과 undefined 차이 소개 JavaScript에서 null과 undefined는 매우 흔한 용어입니다. 이 둘은 모두 "값이 없음"을 나타내지만, 그 차이점은 무엇일까요? null null은 원시 데이터 유형으로, 값이 없음을 나타내는 데 사용됩니다. 변수를 선언하고 값을 할당하지 않았거나, 변수에 null을 할당하여 값이 없음을 나타낼 수 있습니다. 예를 들어: let foo = null; console.log(foo); // null undefined undefined는 변수가 선언되었지만, 값을 할당하지 않은 경우에 발생합니다. 함수에 매개변수를 전달하지 않은 경우나, 객체의 속성에 값이 없는 경우도 undefined가 반환됩니다. 예를 들어: let bar; console.l..

아주 복잡해 보이는 정규표현식을 간단하게 쉬운 것 위주로 정리해 보았다 정규 표현식 (RegExp) 정규식, Regular Expression 역할 문자 검색(search) 문자 대체(replace) 문자 추출(extract) 테스트 사이트 regex101: build, test, and debug regex Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET. regex101.com RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & te..

간단하게 MBTI 테스트를 만들어 봤는데 공유하기 기능을 안 만들어서 만들어 보았다 먼저 아래 웹사이트 KAKAO Developers에 가입해야 한다 카카오 계정으로 가입할 수 있으니 어렵지 않은 과정이고, Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 문서보고 가볍게 만들 수 있는 분들은 문서를 참고하면 되겠지만 나는 여러 블로그를 보고 완성할 수 있었다 아주 간결한 설명과 함께 코드를 올려줬던 블로그는 여기다 Cybersecurity Guide: How to send a link message using javascript in KAKAO ..

Flutter에서 ElevatedButton에 색상 좀 넣으려 했더니 마냥 간단하지가 않다 보다시피 Button 위젯 아래 style: ButtonStyle() 로 시작해 그 안에 backgroundColor: 속성을 준 후에 MaterialStateProperty.all(Colors.원하는색상) 이렇게 이어주어야 한다... import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: Home(), )); class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title..

css에서 수식을 사용하고 싶을 때 아주 유용한 calc() 사용법이다 CSS calc() 사용법 CSS calc() 함수는 CSS에서 수학적 계산을 할 때 사용다. 이 함수는 두 개 이상의 값과 사칙 연산자 (+, -, *, /)를 조합하여 사용할 수 있다. calc() 함수의 문법 calc() 함수는 다음과 같은 문법을 가진다 width: calc(100% - 50px); 위 예시에서는 width 속성 값이 100%에서 50px을 뺀 값이 된다 calc() 함수 사용 예시 두 요소의 너비 조정 .container { width: 80%; padding: 20px; } .item { width: calc(50% - 20px); /* 50%는 항상 item 요소의 부모 요소인 container의 50%를..

not 선택자를 사용하여 특정 자식 요소를 제외하고 선택할 수 있다. 예를 들어, .inner:not(:first-child)를 사용하면 .inner 클래스를 가진 요소 중 첫 번째 자식 요소를 제외한 모든 요소를 선택할 수 있다. 이 경우 display: none 속성을 사용하여 선택된 요소를 숨길 수 있다. 아주 유용하게 이렇게 사용할 수 있다! .inner:not(:first-child) { display: none; }

자바스크립트 메서드 이름 짓기 규칙 자바스크립트에서 메서드 이름을 지을 때는 다음과 같은 규칙을 따르는 것이 좋습니다. 1. 동사로 시작하기 메서드 이름은 보통 동사로 시작합니다. 메서드가 어떤 동작을 수행하는지 잘 나타내야 합니다. 2. 카멜 케이스 사용하기 두 개 이상의 단어를 이어서 메서드 이름을 지을 때는 카멜 케이스(camel case)를 사용합니다. 즉, 두 번째 단어부터 첫 글자를 대문자로 적습니다. // Good function calculateTotalPrice() { // ... } // Bad function calculatetotalprice() { // ... } 3. get, set 접두어 사용하기 객체의 속성을 가져오거나 설정하는 메서드의 경우, get과 set 접두어를 사용하..

em과 rem 차이 em과 rem은 CSS에서 길이를 나타내는 단위입니다. 하지만 둘은 서로 다른 방식으로 동작합니다. em은 부모 요소의 폰트 크기를 기준으로 크기가 결정됩니다. 따라서 부모 요소의 폰트 크기가 변경되면 해당 요소의 크기도 변경됩니다. 이는 상속 관계에서 유용하게 사용될 수 있지만, 복잡한 구조에서는 예상치 못한 크기 변화를 초래할 수 있습니다. 반면, rem은 루트 요소의 폰트 크기를 기준으로 크기가 결정됩니다. 루트 요소는 보통 HTML 문서의 'html' 요소를 의미합니다. 이는 페이지 전체에서 일관된 크기를 유지할 수 있도록 도와줍니다. 따라서 em은 부모 요소의 폰트 크기에, rem은 루트 요소의 폰트 크기에 영향을 받는다는 것이 가장 큰 차이점입니다. 예를 들어, 다음과 같은..

플러텅에서 FontFamily를 변경하는 한 가지 방법을 알아본다 1. Google fonts에서 먼저 원하는 폰트 다운로드 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. fonts라는 디렉토리를 생성한 후에 다운 받은 폰트 파일의 압축을 해제한 후에 fonts 하위 폴더에 넣는다 3. pubspec.yaml 파일에서 family에 간단하게 폰트 이름을 적고 (나중에 해당 이름을 적용해야 함) asset: 에는 폰트가 존재하는 파일의 경로를 아래와 같이 작성한다 그리고 아래와 같이 TextStyle( 속성으로 fontFamily: '폰트family설정한이름')을 작성..

전개연산자 예시와 정의 전개 연산자(Spread) 전개 연산자(Spread)는 배열이나 객체 같은 iterable(반복 가능한) 객체의 요소를 하나씩 분리하여 전개한다. 배열의 내용을 첫번째부터 끝까지 나열하고 싶을 때 일일이 작성하는 것 대신 전개 연산자를 사용하여 간단하게 작성할 수 있다. 예시: const fruits = ['apple', 'banana', 'kiwi']; console.log(...fruits); 결과: apple banana kiwi rest parameter 함수의 매개변수에도 이와 같은 전개 연산자를 이용할 수 있는데, 나머지의 모든 인수를 받아내는 역할을 하기 때문에 ‘나머지 매개변수’라고 한다. 또한 속성의 이름과 변수의 이름이 같으면 축약할 수 있다 하나만 남겨도 가능하..