코드에 빠지다

공유 검색 결과

해당 글 131건

[React] 컴포넌트에 데이터 숨기는 방법

React 컴포넌트에 데이터 숨기는 방법웹 개발을 하다보면 특정 element에 데이터를 저장하고 싶을 때가 있습니다. 이 경우 HTML5 에서 제공해주는 data-* 를 사용하면 됩니다.데이터 저장하기user 정보를 div에 저장하는 방법을 알아보겠습니다.const userInfo = { id: 1, name: "John", age: 17}const User = () => { return User}위처럼 data-user 에 정보를 저장할 수 있습니다.이름은 data-* 로 *에 원하는 문자열을 입력해주면 됩니다.데이터 가져오기데이터를 저장했으면 가져와야 합니다.가져오는 방법도 간단합니다.const User = () => { return { const data..

공유/React, Next 2024. 6. 24. 20:06

[React] children 개수 확인하는 방법

React에서 ui 컴포넌트를 구현할 때 children의 개수가 필요한 경우가 있습니다.예를들어 Tree 컴포넌트를 구현한다고 해봅시다.1번 2-1번 2-2번위 코드를 실행하였을 때 원하는 결과는 아래와 같습니다.1번2번ㄴ 2-1번ㄴ 2-2번즉 자식이 React children인 경우는 폴더로 구현해야합니다.자식이 React children이 아닌 경우는 파일로 구현해야합니다.위 코드에서 children 개수를 확인하는 간단한 방법은 React.Children.count 함수를 사용하는 것입니다.해당 함수를 사용하면 간단하게 자식 개수를 파악할 수 있습니다.그러나 위 같은 경우 1번도 자식이기 때문에 결과 값이 1이 나오게 됩니다.이때는 추가적으로 React Element인지 확인하는 함수 Reac..

공유/React, Next 2024. 6. 24. 20:04

[JavaScript] 이중 for문 종료, 중첩 반복문 종료하기, label

JavaScript 이중 for문 종료, 중첩 반복문 종료하기, label반복문은 어떠한 언어로 개발하던지 많이 사용합니다.JavaScript로 개발할 때는 개인적으로 for문 보다는 배열 내장함수를 사용하여 반복을 수행합니다.그러나 경우에 따라 배열 내장함수가 아닌 for문을 사용해야 하는 경우도 있습니다.중첩 for문을 종료하는 방법은 여러가지가 있습니다.그 중 제가 생각할 때 간단한 방법인 label을 이용하는 방식을 작성해보려고 합니다.labeli, j, k를 순서대로 10번 반복시키면서 k의 값이 3인 경우 반복문을 종료하도록 해보겠습니다.최종적으로 출력되어야 하는 값은 아래와 같습니다.i: 0j: 0k: 3중첩반복문 종료 실패 1let i = 0;let j = 0;let k = 0;for (i..

공유/JavaScript, TypeScript 2024. 6. 24. 20:00

[JavaScript] Array.isArray 함수 사용

Array.isArray 함수 사용JavaScript Array에는 isArray 함수가 있습니다.해당 함수의 인자로 넘어온 변수가 배열인지 확인하는 함수입니다.이 함수는 왜 사용하는지 예시를 보아도 너무 뻔한 예시 밖에 없습니다.즉, 예시를 만들기 위해 억지로 만든 예시만 있었습니다.왜 이 함수를 잘 사용하지 않는 지? 사용한다면 어디에 사용하는 지 제 경험을 바탕으로 작성하였습니다.isArray를 함수를 사용하지 않는 이유JavaScript로 개발하면서 배열을 다룰 때 중요한 것은 배열의 크기인 경우가 대부분입니다.따라서 코드도 아래와 같은 방식이 많이 있습니다.const arr = [];if(arr.length) {}else {}대부분의 경우 해당 변수가 배열인 것을 알고 있기 때문에 isArray..

공유/JavaScript, TypeScript 2024. 6. 24. 19:55

Visual Studio Code 단축키 (macOs)

Visual Studio Code 단축키 (macOs)개발할 때 어떤 IDE를 사용하더라도 단축키를 아는 것은 좋습니다.많이 알고 있을 필요도 없습니다.4-5개정도 본인이 자주 사용하는 단축키만 알아도 개발 삶의 질이 달라집니다.저는 Visual Studio Code를 사용하고 있습니다.여러 단축키가 있겠지만 제가 많이 사용하는 단축키 몇 개를 정리해봅니다.Visual Studio Code 단축키option + shift + ↓/↑ (윗, 아래 줄로 복사)option + command + ↓/↑ (여러 줄 선택하기)option + shift + 마우스 drag (여러 줄 선택하기)command + D (같은 단어 찾기) command + L (한 블록 전체 선택)command + shift + L (같은..

공유/기타 2024. 6. 24. 19:51

[React] React 컴포넌트에서 Generic 사용하기

React 컴포넌트에서 Generic 사용하기 만약 컴포넌트 개발이나 공용 유틸 함수를 개발하지 않는다면, 타입스크립트의 제네릭을 사용하지 않을 수도 있습니다. 이 글을 읽고 있다면 컴포넌트 개발에 어려움을 겪고 있을 가능성이 높습니다. 이제 리액트 컴포넌트에서 제네릭을 어떻게 활용할 수 있는지 간단히 살펴보겠습니다. 리액트 컴포넌트에서 제네릭 사용하는 방법 사용방법 1 const Component = (props:Props) => { return } 위처럼 아주 간단하게 사용할 수 있습니다. 그러나 타입스크립트에게 T의 값에 대한 정보를 조금 더 제공해줄 수도 있습니다. 사용방법 2 const Component = (props: Props) => { return ; }; 위처럼 작성하면 T의 값은 st..

공유/React, Next 2024. 3. 19. 19:22

[JavaScript] DayJS Timezone 다루는 방법

[JavaScript] DayJS Timezone 다루는 방법 dayjs 라이브러리에서 타임존 다루기 dayjs를 사용하여 날짜 관련 작업을 하고 있습니다. 타임존 작업을 하는 방법과 제가 실수하거나 헷갈렸던 부분을 정리하여 공유하려고 합니다. 공통 dayjs.extend(utc) dayjs.extend(timezone) 위 코드는 기본적으로 작성해주시면 됩니다. dayjs.tz.setDefault 주의점 dayjs.tz.setDefault 함수는 타임존을 변경할 때 사용합니다. 타임존이 변경된 객체는 dayjs 객체가 아닌 dayjs.tz의 객체입니다. dayjs로 생성하는 것과 dayjs.tz를 이용하여 생성하는 것의 차이를 확인해보겠습니다. const utc = require("dayjs/plugi..

공유/JavaScript, TypeScript 2024. 3. 17. 17:51

[TypeScript] type guard 만드는 방법

[TypeScript] type guard 만드는 방법 type guard 타입스크립트에서 변수의 타입을 판단할 때, 주로 타입 가드(Type Guard)를 활용합니다. 원시 값, 배열, 날짜 객체 등을 판단하는 경우, 다음과 같은 타입 가드를 사용할 수 있습니다. 원시 값, 배열, 날짜 객체 판단하는 방법 function isNumber(value: any): value is number { return typeof value === "number"; } function isString(value: any): value is string { return typeof value === "string"; } function isBoolean(value: any): value is boolean { retu..

공유/JavaScript, TypeScript 2024. 3. 17. 16:43

[다국어 처리] 다국어 처리, 관리방법 시행착오 및 개선

[다국어 처리] 다국어 처리, 관리방법 시행착오 및 개선 배경 회사에서 운영하는 서비스는 여러 국가에서 이용되고 있습니다. 각 국가별 사용성을 향상시키기 위해 다국어 처리를 진행하고 있습니다. 주요 시행 착오와 개선 사항은 다음과 같습니다. 시행 착오 1 여러 단어를 결합한 경우, 해당 로케일을 결합하여 사용하는 과정에서 문제가 발생했습니다. 예를 들어, 사용자와 정보를 합쳐서 사용자 정보로 표현할 때, 존재하지 않는 단어가 생성되는 경우가 발생했습니다. 코드로 표현하자면 아래와 같습니다. 사용자 : user 정보 : information 사용자 정보 : `${user}${information}` 국가별로 단어 사용자 정보가 사용자 + 정보 단어의 합이 아닌 경우가 있습니다. 이를 해결하기 위해 단어를 ..

공유/기타 2024. 3. 17. 16:07

yarn vs yarn tsc 차이점

yarn vs yarn tsc 회사에서 개발자마다 tsc에 대한 결과가 다르게 나타나 문제가 발생하였습니다. 조금 더 상황을 파악해보니 commit 시 husky에 작성해둔 tsc 검사 결과가 다른 것이었습니다. 원인을 알고보면 너무 당연한 결과인데 한번 알아보도록 하겠습니다. yarn, yarn tsc 원인은 husky에 작성되어 있는 tsc 명령어였습니다. yarn, yarn tsc 2개의 명령어의 차이를 이해하시면 바로 이해 가능합니다. 명령어 yarn tsc : 프로젝트(package.json)에 설치되어 있는 typescript version으로 tsc 실행 명령어 tsc : global로 설치되어 있는 typescript version으로 tsc 실행 위 2개의 차이가 있습니다. tsc 명령어..

공유/기타 2024. 3. 11. 19:20