전체 글 50

toValue()와 toRaw() (feat. MaybeRefOrGetter<T>, Proxy)

Vue는 진짜 웬만하면 다 적응한 것 같은데 이 vue-query쪽이랑 관련된것들은 아직도 너무 어려움...정리하기 전에 MaybeRefOrGetter와 Proxy가 뭔지를 알아야 한다. + MaybeRefOrGetterref든 값이든 함수든 알아서 꺼내쓸 수 있도록 해주는 유틸 타입type MaybeRefOrGetter = T | Ref | (() => T)이런 느낌인데, 1️⃣ 그냥 값(T)일수도 있고, 2️⃣ Ref(T)일수도 있고, 3️⃣ getter함수(T)일수도 있는데, 그 값이 무엇이든 이 세가지를 전부 받을 수 있다. + Proxy넓은 의미로 클라이언트 - 서버 사이에서 요청과 응답을 대신 처리하고 전달하는 "대리인" 역할➡️ 일반적인 네트워크(인터넷) : 클라이언트의 웹 브라우저 요청을 ..

[JavaScript, TypeScript] 유사 배열, 이터러블 객체, Array.from()

갠프하면서 Array.from()을 쓸일이 꽤 많이 생겼는데, 이거 설명을 듣자니 진짜 무슨소린지 모르겠어서 정리한다. 1. 정의Array.from()은 '이터러블 객체나 유사 배열 객체를 새로운 배열로 변환하여 반환하는 함수'라고 하는데, 그럼 여기서 이터러블 객체와 유사 배열 객체가 무엇인지 알아야 한다. (1) 이터러블 객체'차례대로 하나씩 꺼낼 수 있는 것'을 이터러블 객체라고 한다.🍬 지피티의 예시 👽네가 사탕이 5개 들어 있는 봉지를 들고 있어.봉지를 뜯어서 하나씩 꺼낼 수 있지?이 봉지 = 이터러블 객체사탕 하나씩 꺼내는 과정 = 반복(iteration)즉, 이터러블 객체는 ‘반복할 수 있는 자료’ 라는 뜻이야.그러므로 자바스크립트에서 이터러블 객체라 하면문자열(String) : "hel..

Framework와 Library차이

프레임워크와 라이브러리의 가장 큰 차이는 제어권에 있다. 프레임워크(Framework)'틀'이나 '뼈대'를 의미하며, 건축 설계도와 비슷하다.개발자는 그 설계도 안에서 작업해야하며, 프레임워크의 정해진 규칙에 따라야 한다. 따라서 주도권이 개발자가 아닌 프레임워크에게 있어 제어의 역전(Inversion of Control)이 발생한다.제어권 : 프레임워크구조 : 애플리케이션의 뼈대와 구조를 제공ex : Spring, Vue, Next.js, Angular, etc... 라이브러리(Library)'도서관'과 같이 개발에 필요한 기능들의 모음이다. 건축으로 비유하자면 벽돌, 시멘트, 창문 등...개발자가 필요할 때 가져다 쓰는 건축 자재와 같다. 개발자가 자유롭게 원하는 위치와 방식으로 자재를 사용한다.제어..

Etc🏄‍♀️ 2025.09.10

[Intellij] 단축키 에러날 때 - Invalidate Caches

개발하고 있다가 내가 뭘 잘못 눌렀는지 새로운 파일은 단축키가 정상적으로 적용되는데, 기존의 파일은backspace 안됨delete키 안됨입력시 overwrite됨제대로 입력된다면 오른쪽 -> 왼쪽으로 써짐(아랍어마냥)한글 입력 시 Cannot Undo... 와 같은 에러창 뜸과 같은 에러로 내가 작성한 소중한 쿼리들이 박살나기 시작했다. Fn+A, Fn+delete, Fn+E 싹 다 안되서 최후의 방법으로 해결했다. 1. File > Invalidate Caches 2. Invalid and Restart 클릭참고로 난 저기서 아무것도 선택 안하고 클릭했다. 이건 Intellij IDEA가 가장 핵심적인 캐시와 인덱스 파일만 재구축하기 때문에 추가 옵션은 특수한 상황에서만 클릭한다. Clear fil..

Errors❗ 2025.09.01

프로젝트 Dalmuri 기획 및 설계

사실 이걸 이 카테고리에서 제일 처음 먼저 써야하는거 아닌가? 라고 말한다면쉿조용히 해라..개발자로서 회사를 다닌지 겨우 10개월 정도 지났지만 그동안 가장 크게 느낀 것은"개발도 중요하지만 기획, 설계도 매우매우 중요!!!!!!"라는 것이다.상급자에게 기획서를 받아서 그걸 그대로 개발하는 입장에선, 상급자의 기획작성 능력에 따라 개발 인생이 편해지거나 헬게이트가 열리거나 둘 중 하난데, 현재의 상급자가 준 화면정의서는 1. 피그마로 그린 화면 보여줌.2. 끝! 이다. ㄹㅇ로 이게 다다. 화면에 보이지 않는 백엔드 설계서는 아예 없다! 내가 다 계획해서 작성해야 한다!!!!!! 이걸 내가 외부 사람들에게 보여줄 수 없는게 통탄하지 그지없다. 지피티 왈, 일반적인 회사에선 프론트엔드와 백엔드가 따로 노는 ..

CLI, GUI란

라즈베리파이 세팅을 하면서 알게된게 있어서 작성한다.원래 학원에서도 한번만 듣고 읭? 했던건데 이번에 확실하게 이해함! CLI (Command Line Interface, 명령줄 인터페이스)명령어를 통해 컴퓨터와 소통하는 방식. "cmd같이 까만바탕의 하얀 글씨 - 재미없는 화면"위와같이 재미없게 생간 화면에 여러 명령어를 작성하는 것이 CLI방식이다. 대표적인 CLI환경은 유닉스(Unix), 리눅스(Linux)가 있다. 유닉스(Unix)1970년대에 만들어진 운영체제(OS), 주로 회사(기업), 서버, 연구소 시스템에서 많이 쓴다.터미널기반(CLI)로 작업하는게 기본이었고, 지금 CLI명령어들의 원조는 대부분 유닉스이다.대부분 유료예시로 Solaris, HP-UXcd, ls, pwd, mkdir, rm..

Etc🏄‍♀️ 2025.07.24

라즈베리파이4 서버 구축기 - (1) OS설치, 와이파이 접속하기

OS설치는 어찌저찌 잘 됬는데 라즈버리파이가 지금 와이파이랑 연결이 안되서 별 개지랄 다떠는 중욕 한마디 못하는 내 순딩이 컴공 친구가 왜 라즈베리파이 설치하다 개극대노를 했는지 알겠다 ㅇㅇ내가 라즈베리파이로 만들거라 하니까 몸사리치면서 PTSD 보이던데 진짜 왜그랬는지 너무 이해가 감진짜 블로그 글 쓰고 정리하는거 너무 좋아하는데 작성하면서도 손이 부들부들 떨리고 혈압이 올라감 1. OS 설치하기이부분은 잘 된거 같으니까 나중에 사진까지 잘 첨부해서 작성하겠음그대신 OS커스터마이징 부분이 좀 중요하므로(제대로 안하면 나처럼 3번 구워야함ㅋ) 커스터마이징쪽 설정 잘해주기라즈베이파이4 기준 가장 도움이 됬던 유튜브 영상도 올리겠다.https://youtu.be/tenLLerqop8?si=CW6K5ZaUSG..

라즈베리파이4 서버 구축기 - (2) PuTTY가 뭐에요 + 내부 IP 고정하기

PuTTY(퍼티)란? 간단하게 말해서 Window에서 SSH 등을 통해 다른 컴퓨터에 접속할 수 있도록 도와주는 프로그램이다. 다양한 프로토콜(SSH, Telnet 등..)을 이용해 원격 서버에 접속할 수 있게 해주는 터미널 에뮬레이터이자 클라이언트 프로그램.Window에서 리눅스 서버에 접근할 때, 라즈베리파이와 같은 리눅스기반 장비를 원격으로 제어할 때, GUI없는 서버를 CLI로 다뤄야 할 때 사용한다. 1️⃣ 무엇을 위한 도구인가?PuTTY는 원격 컴퓨터에 접속해서 명령어를 입력하고 결과를 받아보는 도구특히 Windows에서는 기본적으로 SSH 클라이언트가 없었기 때문에, 리눅스 서버 관리할 때 필수처럼 쓰임2️⃣ 주요 프로토콜SSH (Secure Shell): 리눅스 서버에 보안 접속할 때 주..

라즈베리파이4 서버 구축기 - 총정리

처음부터 뭔소린지 1도 몰라서 질질 짜면서 웹 서버 구축방법을 찾고 서핑하고 지피티랑 잼민이 주리를 틀어서 과정을 정리했다... 서버 구축하면서 오류나거나 핀트 나가는것들은 다시 정리해서 올릴 예정이다정확하게 2024년 5월 6일 컴퓨터학원에 처음 개강하고 정확하게 1년 두달 후 내가 홈서버 구축에 손을 대는데 이렇게 어려울줄이야 내가 이짓거리를 하게 될거라는걸 22년 12월의 나는 알고 있었을까(국시 3교시까지 와놓고 1교시 법규에서 떨어질꺼라고 30분 문제풀고 50분 질질 짜던 그 날)작업치료 진작에 때려치고 졸업 좀 늦어져도 컴공을 할걸 그랬나보다 아무리 생각해도 비전공자가 개발자 한다는건 기초지식없이 수술들어가는 의사가 되는 심정이다 이건 미친짓임교양 알고리즘 D맞은 뇌 이끌고 바다가 아닌 인터넷..

터미널에 Gemini - CLI 설치하고 사용하기

자주보는 유튜버 '코딩애플'에서 최근에 이런 영상을 올린걸 확인했다...https://youtu.be/f-Izv0ZIeQs?si=hll1MobOm3Ssa80D헐미친바로 따라해본다!!!!!!!!!!!!!!! 1. Window Powershell에 명령어 작성작성할 명령어는 다음과 같다.npm install -g @google/gemini-cli 참고로 난 처음에 npm install -g/gemini-cli라고 쳤다가 헐 왜 설치 안되지?ㅠㅠㅠ 이랬으니 꼭 제대로 명령어 읽고 치시라.... 2. 다시 Powershell에 'gemini'라 작성설치 후 다시 gemini를 작성하면 우리 잼민쿤이 켜진다.... 위와 같은 화면이 뜨면 정상적으로 설치하고 실행된거다! 3. 테마 선택 + 구글 계정에 로그인하기테..

Etc🏄‍♀️ 2025.07.13