+ 생활 컴퓨터 노트북 절전 [윈도우11 Ver.] 노트북 덮개 닫아도 절전모드로 전환되지 않도록 설정하는 방법노트북 덮개를 닫아도 노트북이 절전모드로 전환되지 않도록 설정하는 방법에 대해 알아보겠습니다. 우리가 사용하는 노트북 대부분 덮개를 덮거나 또는 사용하지 않는 상태에서 시간이 지나면 절전모드로 전환되도록 설정되어 있습니다. 에너지 절약 차원에서 사용하지 않는 PC라고 인식하면 절전모드로 전환되도록 기본적인 세팅이 되어 있는데요. 긴 작업을 해야 되는 상황이거나 회사 PC의 경우 노트북을 켜놓은 상태로 퇴근해야 하는 경우가 있습니다. 이러한 분들을 위해 노트북 덮개를 닫아도 노트북이 켜진 상태 그대로 유지될 수 있는 방법을 알아보겠습니다. 1. 제어판에서 절전모드 설정하는 방법 1) [제어판 > 전원옵션 > 덮개를 닫으면 수행되는 작업] 선택 2) [덮개를 닫을 때] 설정을 '아무 것도 안 함'으로 설정 .. wono | discuss | tweet + it blog typescript I've been writing TypeScript without understanding itI admit, I don’t really understand TypeScript The other day, I was stuck with a bug in... Tagged with typescript, javascript, tutorial, learning. wono | discuss | tweet + it dev react [React] 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)React에서는 Form을 다루는 2가지 방법이 있는데, 바로 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)이다. 과연 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 무엇인지 지금부터 알아보도록 하자. 1. 제어 컴포넌트(Controlled Component) 💡 React 공식 문서에서 제어 컴포넌트(Controlled Component)에 대한 설명은 다음과 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의.. wono | discuss | tweet + it dev react form hook resolvers [React] react-hook-form으로 폼 관리하기React Hook Form은 사용자 입력을 받고 검증하는 것을 도와 주는 라이브러리로, React에서 폼을 관리하는 가장 유명한 라이브러리 중 하나입니다. React Hook Form을 사용하면 사용자에게 입력을 받고 검증하는데 드는 시간을 줄일 뿐만 아니라 더불어 성능까지 두 마리 토끼를 모두 잡을 수 있습니다. wono | discuss | tweet + it dev shadcnui dialog [shadcn/ui] Dialog, Alert Dialog Component 구현기🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고 개요 Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이.. wono | discuss | tweet + it dev tailwindcss prettier Automatic Class Sorting with Prettier - Tailwind CSSPeople have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS. wono | discuss | tweet + it dev zustand typescript TypeScript Guide - Zustand wono | discuss | tweet + it tip javascript Rename object keys of return object wono | discuss | tweet + 컴퓨터 모니터 생활 잡기 정보 화면색 물빠진 느낌있으면 이설정 건들여 보세요 > 팁 강좌 | 쿨엔조이미세먼지 팁 하나 날립니다. 약간 화면이 물빠진색? 느낌이 드시는분 있을탠데 패널자체 문제일수도 있지만 "출력 동적 범위" 가 "제한"으로 되있면 일반적은 컴퓨터 모니터는 물빠진 느낌이 듭니다. 원인은 일반컴퓨터 모니터는 색표현은 0~255 단위(전체)로 표현하지만, … wono | discuss | tweet + 생활 잡기 개발 생산성 코드 작성 시간 절반으로 줄여줄 5가지 개발 툴 | 요즘IT여러분은 매일 코드 작성과 디버깅에 얼마나 많은 시간을 소비하나요? 지금부터 소개해 드릴 AI와 자동화 툴 5가지만 제대로 활용해도 그 시간을 절반으로 줄일 수 있습니다. 개발자의 하루는 해결해야 할 문제로 가득하니까요. 코드 작성을 도와주는 GitHub Copilot부터 코드 품질을 한눈에 개선해 주는 SonarQube까지. 이 툴들은 어떻게 여러분의 개발 생산성과 코드 품질을 끌어올려 줄까요? wono | discuss | tweet + it dev typescript useRef, useImperativeHandle, forwardRefuseRef와 useImperativeHandle은 ref라는 속성에 적용하는 값을 만들어 주는 훅이다. 리액트와 리액트 네이티브가 제공하는 컴포넌트는 모두 ref라는 이름의 속성을 가지고 있다.ref 속성이란?Ref는 참조를 의미한다.ref 속성값은 사용자 코드에서 설정하는 것이 아니라, 특정 시점에 React 프레임워크 내부에서 설정해 준다. ref 속성은 초기에는 null이지만, 컴포넌트가 마운트 되는 시점에서 실제 DOM 객체의 값이 된다.HTML 요소들은 자바스크립트에서 DOM 타입 객체이다. 모든 요소는 HTMLElement 타입이며, click(), blur(), focus() 메서드를 제공한다. 이 메서드들은 가상 DOM 상태에서는 호출할 수 없고, 실제 DOM 상태에서만 호출할 수 있다... wono | discuss | tweet + it dev react forwardref Using forwardRef in other component got type error wono | discuss | tweet + it dev typescript htmlinputelement Property 'value' does not exist on type 'never'. when use useRef hook in mui wono | discuss | tweet + it dev react strict useEffect 잘못 쓰고 계신겁니다.https://nextjs.org/docs/14/app/api-reference/next-config-js/reactStrictMode wono | discuss | tweet + it dev typescript unknown [101] 타입스크립트의 unknown 타입TypeScript에서 unknown 타입은 any와 혼동될 수 있지만, 코드 안전성에 있어 결정적인 차이를 만듭니다. unknown을 효과적으로 사용하면 React 애플리케이션의 안정성과 오류 방지를 크게 향상시킬 수 있습니다. 이 글에서는 unknown 타입을 활용한 안전한 타입 검사 기법을 React 애플리케이션을 중심으로 자세히 살펴봅니다.1. unknown 타입의 기본 개념unknown 타입은 말 그대로 "알 수 없는" 타입을 나타냅니다. 어떤 값이 올지 확실하지 않을 때 unknown을 사용할 수 있으며, 이는 값을 사용하기 전에 반드시 그 타입을 확인해야 한다는 특징이 있습니다.let unknownValue: unknown;unknownValue = 100; // 숫자 할당 가능unknow.. wono | discuss | tweet + it dev nextjs redis [REDIS] 📚 Node.js 에서 redis 모듈 사용법 (캐싱 & 세션 스토어)Node 프로젝트에서 pm2로 다중 클러스터 인프라를 구축했다면 세션 불일치 문제가 생기게 마련이다. 만일 서버가 종료되어 메모리가 날라가면 접속자들의 로그인이 모두 풀려버리게 된다. 따라서 이를 방지하기 위해 세션 아이디와 실제 사용자 정보를 외부 데이터베이스에 저장하는 편이다. 이때 개발자들이 많이 사용하는 것이 Redis db이다. 다른 데이터베이스를 사용해도 되지만, 세션은 빠릿빠릿하게 응답을 해야되기 떄문에 메모리 기반의 데이터베이스인 레디스를 사용한다. 지금부터 Node 프로젝트에서 Redis와 연결하고 사용하는 법을 알아보자. Redis Database 설치 레디스를 로컬에 설치해도 되고, 클라우드로도 사용할 수가 있다. 마음에 드는 것을 골라 설치하자. 개인적으로 로컬 보다는 클라우드로 하.. wono | discuss | tweet + it blog cloud (정리) 7개사 클라우드 빠르게 배워보자-2024클라우드는 우선 하나만 잘하면 된다. 모든 것을 할 순 없다. 계속 새로운 서비스가 나오기 때문이다. CSP (클라우드 서비스 제공업체) ? 글로벌 클라우드 CSP - 아마존, MS, Google, Oracle 국내 클라우드 CSP- 네이버 클라우드, Kakao Cloud , 가비아 클라우드 <1> 아마존 AWS <2> 네이버 클라우드 <3> wono | discuss | tweet + 산업 클라우드 [공간차트] 한국 클라우드 플랫폼 TOP10…아마존·MS·구글·네이버·KT 順[뉴스스페이스=김정영 기자] 한국에서 클라우드서비스(CSP) 이용 플랫폼은 아마존 AWS가 60.2%로 가장 높은 것으로 나타났다. 2위는 MS 애저(Azure)로 이용 비중은 24.0%였다. 과학기술정보통신부가 19일 발표한 ‘2023년 부가통신사업 실태조사 결과’에 따르면 클라우드서비스(CSP) 이용 플랫폼은 ▲아마존 AWS, ▲MS 애저(Azure)에 wono | discuss | tweet + it ops rdbms Aurora MySQL vs Aurora PostgreSQL wono | discuss | tweet + it ops nextjs ec2 AWS EC2로 Next.js 배포하기Next.js는 Vercel이 개발하고 있고, 당연히 Vercel에 배포하는 것이 가장 효율적이라 믿어 의심치 않으며 다른 배포 방식은 생각치도 않았다.그런 오만한 생각을 '효율' 또는 '선택과 집중' 이라는 키워드로 합리화 해왔을지도 모르겠다. 결국 Next.js 배 wono | discuss | tweetNext
+ 생활 컴퓨터 노트북 절전 [윈도우11 Ver.] 노트북 덮개 닫아도 절전모드로 전환되지 않도록 설정하는 방법노트북 덮개를 닫아도 노트북이 절전모드로 전환되지 않도록 설정하는 방법에 대해 알아보겠습니다. 우리가 사용하는 노트북 대부분 덮개를 덮거나 또는 사용하지 않는 상태에서 시간이 지나면 절전모드로 전환되도록 설정되어 있습니다. 에너지 절약 차원에서 사용하지 않는 PC라고 인식하면 절전모드로 전환되도록 기본적인 세팅이 되어 있는데요. 긴 작업을 해야 되는 상황이거나 회사 PC의 경우 노트북을 켜놓은 상태로 퇴근해야 하는 경우가 있습니다. 이러한 분들을 위해 노트북 덮개를 닫아도 노트북이 켜진 상태 그대로 유지될 수 있는 방법을 알아보겠습니다. 1. 제어판에서 절전모드 설정하는 방법 1) [제어판 > 전원옵션 > 덮개를 닫으면 수행되는 작업] 선택 2) [덮개를 닫을 때] 설정을 '아무 것도 안 함'으로 설정 .. wono | discuss | tweet
+ it blog typescript I've been writing TypeScript without understanding itI admit, I don’t really understand TypeScript The other day, I was stuck with a bug in... Tagged with typescript, javascript, tutorial, learning. wono | discuss | tweet
+ it dev react [React] 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)React에서는 Form을 다루는 2가지 방법이 있는데, 바로 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)이다. 과연 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 무엇인지 지금부터 알아보도록 하자. 1. 제어 컴포넌트(Controlled Component) 💡 React 공식 문서에서 제어 컴포넌트(Controlled Component)에 대한 설명은 다음과 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의.. wono | discuss | tweet
+ it dev react form hook resolvers [React] react-hook-form으로 폼 관리하기React Hook Form은 사용자 입력을 받고 검증하는 것을 도와 주는 라이브러리로, React에서 폼을 관리하는 가장 유명한 라이브러리 중 하나입니다. React Hook Form을 사용하면 사용자에게 입력을 받고 검증하는데 드는 시간을 줄일 뿐만 아니라 더불어 성능까지 두 마리 토끼를 모두 잡을 수 있습니다. wono | discuss | tweet
+ it dev shadcnui dialog [shadcn/ui] Dialog, Alert Dialog Component 구현기🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고 개요 Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이.. wono | discuss | tweet
+ it dev tailwindcss prettier Automatic Class Sorting with Prettier - Tailwind CSSPeople have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS. wono | discuss | tweet
+ 컴퓨터 모니터 생활 잡기 정보 화면색 물빠진 느낌있으면 이설정 건들여 보세요 > 팁 강좌 | 쿨엔조이미세먼지 팁 하나 날립니다. 약간 화면이 물빠진색? 느낌이 드시는분 있을탠데 패널자체 문제일수도 있지만 "출력 동적 범위" 가 "제한"으로 되있면 일반적은 컴퓨터 모니터는 물빠진 느낌이 듭니다. 원인은 일반컴퓨터 모니터는 색표현은 0~255 단위(전체)로 표현하지만, … wono | discuss | tweet
+ 생활 잡기 개발 생산성 코드 작성 시간 절반으로 줄여줄 5가지 개발 툴 | 요즘IT여러분은 매일 코드 작성과 디버깅에 얼마나 많은 시간을 소비하나요? 지금부터 소개해 드릴 AI와 자동화 툴 5가지만 제대로 활용해도 그 시간을 절반으로 줄일 수 있습니다. 개발자의 하루는 해결해야 할 문제로 가득하니까요. 코드 작성을 도와주는 GitHub Copilot부터 코드 품질을 한눈에 개선해 주는 SonarQube까지. 이 툴들은 어떻게 여러분의 개발 생산성과 코드 품질을 끌어올려 줄까요? wono | discuss | tweet
+ it dev typescript useRef, useImperativeHandle, forwardRefuseRef와 useImperativeHandle은 ref라는 속성에 적용하는 값을 만들어 주는 훅이다. 리액트와 리액트 네이티브가 제공하는 컴포넌트는 모두 ref라는 이름의 속성을 가지고 있다.ref 속성이란?Ref는 참조를 의미한다.ref 속성값은 사용자 코드에서 설정하는 것이 아니라, 특정 시점에 React 프레임워크 내부에서 설정해 준다. ref 속성은 초기에는 null이지만, 컴포넌트가 마운트 되는 시점에서 실제 DOM 객체의 값이 된다.HTML 요소들은 자바스크립트에서 DOM 타입 객체이다. 모든 요소는 HTMLElement 타입이며, click(), blur(), focus() 메서드를 제공한다. 이 메서드들은 가상 DOM 상태에서는 호출할 수 없고, 실제 DOM 상태에서만 호출할 수 있다... wono | discuss | tweet
+ it dev typescript htmlinputelement Property 'value' does not exist on type 'never'. when use useRef hook in mui wono | discuss | tweet
+ it dev react strict useEffect 잘못 쓰고 계신겁니다.https://nextjs.org/docs/14/app/api-reference/next-config-js/reactStrictMode wono | discuss | tweet
+ it dev typescript unknown [101] 타입스크립트의 unknown 타입TypeScript에서 unknown 타입은 any와 혼동될 수 있지만, 코드 안전성에 있어 결정적인 차이를 만듭니다. unknown을 효과적으로 사용하면 React 애플리케이션의 안정성과 오류 방지를 크게 향상시킬 수 있습니다. 이 글에서는 unknown 타입을 활용한 안전한 타입 검사 기법을 React 애플리케이션을 중심으로 자세히 살펴봅니다.1. unknown 타입의 기본 개념unknown 타입은 말 그대로 "알 수 없는" 타입을 나타냅니다. 어떤 값이 올지 확실하지 않을 때 unknown을 사용할 수 있으며, 이는 값을 사용하기 전에 반드시 그 타입을 확인해야 한다는 특징이 있습니다.let unknownValue: unknown;unknownValue = 100; // 숫자 할당 가능unknow.. wono | discuss | tweet
+ it dev nextjs redis [REDIS] 📚 Node.js 에서 redis 모듈 사용법 (캐싱 & 세션 스토어)Node 프로젝트에서 pm2로 다중 클러스터 인프라를 구축했다면 세션 불일치 문제가 생기게 마련이다. 만일 서버가 종료되어 메모리가 날라가면 접속자들의 로그인이 모두 풀려버리게 된다. 따라서 이를 방지하기 위해 세션 아이디와 실제 사용자 정보를 외부 데이터베이스에 저장하는 편이다. 이때 개발자들이 많이 사용하는 것이 Redis db이다. 다른 데이터베이스를 사용해도 되지만, 세션은 빠릿빠릿하게 응답을 해야되기 떄문에 메모리 기반의 데이터베이스인 레디스를 사용한다. 지금부터 Node 프로젝트에서 Redis와 연결하고 사용하는 법을 알아보자. Redis Database 설치 레디스를 로컬에 설치해도 되고, 클라우드로도 사용할 수가 있다. 마음에 드는 것을 골라 설치하자. 개인적으로 로컬 보다는 클라우드로 하.. wono | discuss | tweet
+ it blog cloud (정리) 7개사 클라우드 빠르게 배워보자-2024클라우드는 우선 하나만 잘하면 된다. 모든 것을 할 순 없다. 계속 새로운 서비스가 나오기 때문이다. CSP (클라우드 서비스 제공업체) ? 글로벌 클라우드 CSP - 아마존, MS, Google, Oracle 국내 클라우드 CSP- 네이버 클라우드, Kakao Cloud , 가비아 클라우드 <1> 아마존 AWS <2> 네이버 클라우드 <3> wono | discuss | tweet
+ 산업 클라우드 [공간차트] 한국 클라우드 플랫폼 TOP10…아마존·MS·구글·네이버·KT 順[뉴스스페이스=김정영 기자] 한국에서 클라우드서비스(CSP) 이용 플랫폼은 아마존 AWS가 60.2%로 가장 높은 것으로 나타났다. 2위는 MS 애저(Azure)로 이용 비중은 24.0%였다. 과학기술정보통신부가 19일 발표한 ‘2023년 부가통신사업 실태조사 결과’에 따르면 클라우드서비스(CSP) 이용 플랫폼은 ▲아마존 AWS, ▲MS 애저(Azure)에 wono | discuss | tweet
+ it ops nextjs ec2 AWS EC2로 Next.js 배포하기Next.js는 Vercel이 개발하고 있고, 당연히 Vercel에 배포하는 것이 가장 효율적이라 믿어 의심치 않으며 다른 배포 방식은 생각치도 않았다.그런 오만한 생각을 '효율' 또는 '선택과 집중' 이라는 키워드로 합리화 해왔을지도 모르겠다. 결국 Next.js 배 wono | discuss | tweet