전체 글787

• 

  [React]React에서 Sass 사용 이번 포스팅에서는 React 프로젝트에서 Sass를 사용하는 방법에 대해 설명합니다. 목차 Sass 개념 React 프로젝트에서 Sass 사용하는 방법 Sass 개념 Sass는 Syntactically Awesome Stylesheet의 약자로 아래 특징을 가지는 CSS 전처리기입니다. 중첩 규칙 변수 정의 인라인 mixins 함수 사용 간단하게 작성된 CSS는 문제가 없지만, 방대하고 복잡하게 구현된 CSS는 한눈에 이해하기 어려우며 가독성이 저하되기 때문에 유지보수가 어렵습니다. 하지만, Sass를 사용하면 복잡한 코드를 재사용 가능하고 좀 더 심플하게 작성할 수 있습니다. Sass는 전처리기이기 때문에 직접 동작시킬 수 없으며, 웹에서 실행되지 않습니다. Sass가 웹에서 동작하는 원리는 node-.. React/유용한 NPM 2021. 11. 2.

• 

  [React]조건문 작성 방법 이번 포스팅에서는 JSX에서 조건문을 좀 더 깔끔하게 작성할 수 있도록 지원하는 패키지를 소개합니다. 목차 지저분한 JSX의 조건문 jsx-control-statements 사용 지저분한 JSX의 조건문 많은 개발자들은 조건문을 작성하기 위해 if~else문 또는 switch문에 익숙하며, 조건문이 시작되고 있음을 한눈에 파악할 수 있습니다. 하지만, JSX에서 조건문을 작성하기 위해 사용되는 삼항 연산자는 코드를 지저분하게 만들며 가독성이 떨어지는 단점이 존재합니다. 다음과 같이 간단한 로직이 존재합니다. if (isLoading) { // loading... } else { if (isMain) { // title, category 처리... } // main... } isLoading이 true이면.. React/유용한 NPM 2021. 11. 2.

• 

  [JavaScript]숫자 포맷 설정 JavaScript에서 숫자에 콤마 또는 포맷을 설정하는 방법을 소개합니다. 목차 Intl.NumberFormat 함수 toLocaleString 함수 참고 Intl.NumberFormat 함수 Intl.NumberFormat 함수는 숫자의 형식을 설정하는 함수로 지정된 지역의 통화 또는 백분율을 표시하는데 사용할 수 있습니다. Intl.NumberFormat 함수의 형식은 다음과 같으며, 지역을 설정하는 첫 번째 매개변수(locales)와 숫자를 다양하게 표현할 수 있는 두 번째 매개변수(options)가 존재합니다. new Intl.NumberFormat([locales[, options]]); locales(생략 가능) - 지역을 설정할 수 있습니다. - 'en-IN', 'ja-JP', 'en-US.. JavaScript/JavaScript 문법 2021. 11. 1.

• 

  [React]TypeScript기반 Type Alias vs interface 이번 포스팅에서는 TypeScript 기반의 React 애플리케이션을 개발할 때, Type을 정의하는 방법을 설명합니다. JavaScript는 다른 프로그래밍 언어와는 다르게 변수 또는 객체를 생성할 때, 타입을 정의하지 않습니다. var arr = {}; // 타입 변환 전 console.log(typeof arr); // object arr = 5; // 객체를 number타입으로 변환 // 타입 변환 후 console.log(typeof arr); // number var, let, const 키워드를 사용하여 변수 또는 객체를 생성하므로 타입 변환이 자유롭다는 장점이 있지만, 다음과 같은 단점도 존재합니다. [JavaScript의 단점] - 타입을 유추하기 어렵습니다. - 애플리케이션이 동작할 때.. React/React 문법 2021. 10. 22.

• 

  [React]props.children에 props 전달 이번 포스팅에서는 props.children에 데이터를 전달하는 방법을 소개합니다. React에서 props는 읽기 전용이므로 수정이 불가능하며, 마찬가지로 props.children도 수정할 수 없습니다. 만약, props.children을 수정하고 싶다면, Reac.cloneElement 함수를 사용하여 자식 컴포넌트를 복제 후 수정하거나 React.Children.toArray 또는 React.Children.map 함수를 사용하여 새로운 배열을 생성 후 수정할 수 있습니다. 그럼 하나씩 살펴보도록 하겠습니다. 목차 React 엘리먼트를 복제하는 React.cloneElement 함수 props.children복제 props.children 조작 React 엘리먼트를 복제하는 React.clone.. React/React 문법 2021. 10. 20.

• 

  [React]children 함수(map, forEach, toArray, count, only) React에서 props.children을 다양하게 조작할 수 있는 함수들을 소개합니다. 목차 props.children을 순회하는 map, forEach 함수 개수와 관련 있는 count, only 함수 배열을 반환하는 toArray 함수 props.children을 순회하는 map, forEach 함수 React.Children.map은 자바스크립트 Array.prototype.map과 유사하지만, 동일하지는 않습니다. React.Children.map은 React에서 props.children을 다루기 위한 독자적인 API이며, React.Children.forEach 또한 마찬가지입니다. React.Children.map은 각 자식을 순회하여 함수를 호출하며, 함수가 반환하는 값들을 배열로 생성합.. React/React 문법 2021. 10. 19.

• 

  [React]setState Callback 함수 사용 이번 포스팅에서는 React에서 setState의 Callback 함수를 사용하는 경우를 소개합니다. 목차 setState의 Callback 함수를 사용하는 경우 Class 컴포넌트의 setState Callback Function 컴포넌트의 setState Callback setState의 Callback 함수를 사용하는 경우 react에서 setState의 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우입니다. 우선, Callback 함수를 사용하지 않은 경우 어떠한 문제가 발생하는지 알아봅시다. 다음은 [* 2] 버튼을 클릭하면 this.state.num의 값을 2배로 변경 후 콘솔에 this.state.num의 값을 출력하는 함수입니다. twiceBu.. React/React 문법 2021. 10. 18.

• 

  [React]함수형 컴포넌트에 props 전달 이번 포스팅에서는 React에서 함수형 컴포넌트에 props를 전달하는 방법과 props의 개념에 대해 소개합니다. 목차 props 개념 부모 컴포넌트가 자식 컴포넌트에 props 전달 자식 컴포넌트가 부모 컴포넌트에 props 전달 정리 props 개념 React에서 애플리케이션을 설계할 때 컴포넌트 간 데이터의 흐름을 구조하는 것이 중요합니다. 여기서 말하는 컴포넌트 간 데이터의 흐름은 한 컴포넌트에서 다른 컴포넌트로 데이터 전달(props의 전달)을 의미합니다. props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 것이며, 자식 컴포넌트는 한 개가 될 수 있고 두 개 이상이 될 수 있습니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 과정을 React와 프로그래밍 개념을 .. React/React 문법 2021. 10. 15.

• 

  [Java]생성자 체인(Constructor Chaining) 이번 포스팅에서는 Java에서 객체를 생성할 때, 생성자에서 다른 생성자를 호출하는 생성자 체인(Constructor Chaining)에 대해 설명합니다. 생성자 체인(Constructor Chaining) 생성자 체인은 this 또는 super 키워드를 사용해서 생성자에서 다른 생성자를 호출하는 기술입니다. Java에서 생성자의 이름을 직접 호출할 수 없으므로 this와 super 키워드를 사용합니다. this는 동일한 클래스의 생성자에서 다른 생성자를 호출할 때 사용합니다. super는 자식 클래스 생성자에서 부모 클래스 생성자를 호출할 때 사용합니다. this 키워드를 사용한 생성자 체인 다음은 this 키워드를 사용하여 생성자 체인 기술을 사용한 코드입니다. public class Person {.. Java 2021. 10. 13.

• 

  [React]props.children 사용 이번 포스팅에서 컴포넌트 간 합성(Composition)과 props.children을 소개합니다. 목차 합성(Composition)과 props.children props.children 필요성 props.children 메서드 자식과 자손 합성(Composition)과 props.children children이란? 공식 문서에는 props.children에 대해 아래와 같이 설명하고 있습니다. 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 저는 공식 문서에서 설명하고 있는 내용이 이해가 되지 않아서 props.children을 다음과 같이 해석하고 .. React/React 문법 2021. 10. 6.

• 

  [React]Hook에서 prevState 구현 이번 포스팅에서는 React Hook에서 prevState를 구현하는 방법을 설명합니다. 미리 말씀드리자면, React Hook에서는 클래스 컴포넌트처럼 생명주기 메서드에서 prevState를 사용할 수 없습니다. React Hook에서 사용 가능한 useEffect를 활용한다면, 이전 state 값과 현재 state 값을 비교할 필요가 없기 때문입니다. 그럼에도 불구하고 이전 state 값과 현재 state 값을 비교해야 한다면, 커스텀 훅과 useRef를 활용하여 prevState처럼 사용할 수 있습니다. 목차 React 클래스 컴포넌트에서 prevState React Hook에서 componentDidMount 커스텀 훅과 useRef를 활용하여 prevState처럼 사용 React 클래스 컴포넌트.. React/React 문법 2021. 10. 5.

• 

  [C#]문자열 비교 방법 이번 포스팅에서는 C#에서 두 문자열을 비교하는 방법을 소개합니다. 목차 Equals() 함수 == 연산자 Compare() 함수 CompareTo() 함수 대소문자를 무시하여 비교 Equals() 함수 Equlas() 함수는 두 개의 문자열 객체가 동일한지 확인하는데 사용됩니다. 불리언 값을 반환하며 두 문자열이 같으면 True를 반환하며 그렇지 않으면 False를 반환합니다. 다음은 Equals() 함수 사용 예제입니다. class Program { static void Main(string[] args) { Console.WriteLine("string.Equals(\"ABCDEE\", \"ABCDDE\"): " + string.Equals("ABCDEE", "ABCDDE")); Console.Wr.. C#/문자열 2021. 10. 4.