전체 글 50

handleClick vs handleClick() 정리 — React, Vue, JS onclick 이벤트 차이

click 이벤트들에게 다양한 형태가 있는데 헷갈려서 정리하는 포스트당.... 1. onclick = "handleClick" (괄호 x) 👉 "함수 그 자체(참조)를 전달function handleClick() { console.log('click!')}버튼"클릭되면 handleClick()을 실행해라"= 렌더링시 실행 x, 클릭할 때 실행됨 ✅HTML, Vanilla JS클릭 이벤트가 발생 할 때 실행할 코드로 저장 태그를 통해 전역으로 정의되어 있을 때 '클릭 시 실행'. 반드시 전역으로 선언되어야 함 = Window 객체에서 접근 가능해야 함!window 객체 : 자바스크립트의 내부 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소들의 최상위 객체..

Frontend🎨 2025.11.03

Socket.IO에 대해서

공식 웹사이트 : https://socket.io/ Socket.IO는 서버와 클라이언트(브라우저)가 실시간으로 데이터를 주고받을 수 있게 해주는 통신 라이브러리이다. 보통 Http요청은 한번 보내면 끝이지만, socket.io는 연결을 계속 유지해서 서버가 먼저 말을 걸 수도 있다. 이 연결을 소켓(Socket)이라 부르고, 이 소켓이 연결되고 끊기고 메시지를 받을 때 마다 이벤트(event)가 발생된다. Http는 질문-답변의 구조,Socket은 계속 대화하는 **채팅방**의 구조 1. Socket.IO란웹 클라이언트와 서버 간에 실시간(Real-time), 양방향(Bidirectional), 이벤트 기반(Event-based) 통신을 가능하게 해주는 라이브러리이다.웹에서 채팅, 알림, 실시간 협업 ..

[IntelliJ] 자동 빌드 끄기

엄연히 오류는 아니고 설정 변경이긴 한데, 나한테 오류처럼 느껴져서 해당 카테고리로 옮겼다.회사 프로젝트에선 Run을 실행한 채로 WAS단을 수정해도 build output이 에러가 안떠서 귀찮게 안하는데, 내 프로젝트에선 이런식으로 코드를 작성하고 있으면, 이런식으로 빌드에러가 난다. 그렇다고 코드 고칠때 마다 실행을 멈출 수 있나? 그것도 그거대로 말이 안된다앵간하면 무시하고 그냥 살려고 했는데 너무 귀찮다...성공/실패한 방법이 있었는데 둘 다 기록할 가치가 있어서 일단 기록해본다 첫번째 방법 - 실패!File > Settings 선택ctrl+ alt + s를 눌러도 창은 켜진다. 근데 개인적으론 단축키가 너무 불편한 위치라 생각함Compiler > 'Build project automaticall..

Errors❗ 2025.10.21

[Spring] Spring Security - application.yml로 URL권한을 동적으로 관리하기

로그인을 구현 안하고 바로 Spring security로 클라이언트 - 서버간 통신시키려 하니 당연히 403에러가 자꾸 나서 열받는다.빨리 로그인을 먼저 구현해야 할 것 같은데... 원하는 기능을 다 만든 후 최후에 로그인을 만들고 싶어서 미뤄놨던 이리 귀찮은 댓가를 받게 되었다.그래도 공부한다 생각해야지.... 1. 원래는 어떻게 관리했었는가SecurityConfig는 프로젝트에 적용할 보안 정책을 설정하고 적용을 하는 클래스이다. 아무 설정 없이 클라이언트와 통신하려면 403 forbidden에러를 만나게 될 것이다.그래서 클라이언트로부터 오는 url을 허용시키기 위해 requestMatchers에 다음과 같이 작성했었다.@Beanpublic SecurityFilterChain filterChain(..

[Git] .gitignore에 이미 올라간 파일 삭제하기

git에 application.yml과 application.properties가 안올라간줄 알았는데 버젓이 올라가 있어서 당황스러웠다;알고보니 기존 캐시가 안지워진채로 올라간거라... 지우고 다시 gitignore에 반영하도록 한다. 1. gitignore에 파일명 작성### Application config ###**/application.yml**/application.properties파일명 앞에 **/을 작성하면 규칙 무시되는 파일 경로 예시 **/application.ymlapplication.yml (최상위 루트) src/application.yml api/src/main/resources/application.yml dir1/dir2/dir3/application.yml과 같이 경로에 상..

[Dalmuri] Java로 Google Cloud Nature Language API 호출해서 감정 다이어리 만들기

🥵API 연결 후기 : 코드 짜는것보다 초기 세팅이 훨씬 더 어렵다.. 여럽다기보단 방법도 많고 읽어야 하는 공식 문서도 많아서, 정작 내가 원하거나 필요한 정보를 찾는데 더 시간이 오래 걸린 것 같다. 난 그저 사용자 정보를 인증하고 싶을 뿐인데... 갑자기 냅다 파이썬을 설치하라.... 어쩌구..... 근데 뭘 또 더 설치하기엔 컴퓨터 용량이 너무 제한적이니까 설치하는것도 껄그러운 심정이다.결국 공식 문서 찾는건 Gemini에게 물어봐서 찾았다. 출처까지 표기해주니까 너무 편하더라. ai 사용 안하고도 혼자서 공식문서 찾을 줄 알아야 할텐데... 구글 공식문서는 찾아서 읽고 실행하는 과정보다 필요한걸 찾는 과정이 정글같아서 더 힘들다. ❓왜 Google Cloud Nature Language API..

Node.js, Next.js, NestJS, Nuxt.js

네이밍 센스 황당하다... 거 안헷갈리게 지아줘야 하는게 예의 아닌지;이름들이 거기서 거기라 헷갈려서 정리한다Node.js: JavaScript 런타임 환경V8엔진을 기반으로 만들어진 JavaScript 런타임 환경으로, ⭐웹 브라우저 밖에서도 JavaScript 코드를 실행할 수 있도록 해준다. (V8이란 구글이 개발한 JavaScript 엔진으로 C++로 작성되었다고 한다.)Node.js가 개발된 덕에 개발자들은 JavaScript를 통해서 백엔드 개발이 가능해진 것이다. JavaScript로 서버를 구축하거나, 데스크톱 애플리케이션이나, 모바일 앱도 개발할 수 있게된 것이다.또한 Node.js는 다른 언어(C, Java)처럼 컴퓨터에서 직접 코드를 실행할 수 있는 런타임 환경을 제공한다. npm(N..

Etc🏄‍♀️ 2025.10.14

[Node.js] 프로젝트 캐시 삭제하기

컴포넌트를 만들 때 처음에 example.tsx로 했다가 Example.tsx로 변경했다. 다른 컴포넌트에 import 할려고 작성하다가... Already included file name 'C:/Dalmuri/src/Example.tsx' differs from file name 'C:/Dalmuri/src/Example.tsx' only in casing. The file is in the program because: ... etc이런식으로 뜨더라확인해보니 운영체제와 TypeScript가 파일 이름 대소문자를 다르게 인식해서 생기는 충돌 오류라고....Window는 파일 이름의 대소문자를 구분하지 않으므로 example.tsx와 Example.tsx를 구분하지 않는데. 그러나 내가 파일 이름을 바..

Errors❗ 2025.10.14

미니맥스 알고리즘, 알파-베타 가지치기

작고 귀여운 머리로 오목 규칙이랑 로직 생각하다가... 1차로 위와 같이 여러 조건을 생각해서 만들었다. 이것이 단일 단계 평가(1-Ply Evaluation)라고 한다.이것도 재밌긴 했는데, 문제는 컴퓨터가 다채로운 방식으로 게임을 하진 못했다. 무슨 문제가 있었냐면..공격과 방어를 적절히 섞어서 수를 둬야 하는데 그렇지 못함(공격만, 방어만 주구장창 한다던가)상대의 대응(즉, 나의 대응)에 예측하지 못함대각선에 약함이렇듯 단순하게 로직을 작성한다면 상대가 둘 미래의 수를 보지 못하고, 함정에 속수무책이라고 한다. 그래서 이를 보완하기 위해 2-ply 이상 탐색, 즉 미니맥스 알고리즘으로 확장해서 작성했다.로직을 작성하기 위해선 우선 미니맥스 알고리즘을 알아야 했다..미니맥스 알고리즘(Minimax A..

라즈베리파이4 서버 구축기 - (3) PostgreSQL 설치하기(+DB 용어 기본정리)

라즈베리파이를 산지 몇달만에 이제 겨우 DB구축을 시작했다 ㅇㅅㅇㅋㅋㅋㅋㅋㅋㅋ근데 공식 웹사이트를 접속하면 라즈베리파이 OS를 위한 다운로드 패키지가 없다.그래서 라즈베리파이에 직접 sudo ~ 명령어를 쳐셔 설치를 해야 한다.. 즉슨 리눅스 방식으로 설치해야 한다(예상은 했음..) 1. 라즈베리파이 업데이트솔직히 굳이 해야하나 싶은데, 최신 목록으로 업데이터 하지 않으면 오류가 발생할 위험이 있다 한다.무서우니까 업데이트 해야지...sudo apt update2. PostgreSQL 설치sudo apt install postgresql이렇게만 입력해도 자기가 알아서 설치가 된다는게 좀 신기하다. 무조건 공식 웹사이트에 들어가서 설치해야 하는 줄 알았는데...3. 설치가 제대로 됬는지 확인sudo sys..