프로그래밍

프론트엔드는 왜 갈수록 이거 저거 싹다 가져다 붙이는 이유를 알것다

뇌는 놔두면 썩으므로
10년전의 나를 돌아보는 마음으로
남이 볼때는 보잘것 없어도 나름 삽질해서 배운 지식들 안 잃어버리게 간단한 웹사이트를 만들고 있다.


기왕 만드는거 순수 js로만 만들어 보자 싶었음.

react? vue? 그런건 계집이나 어린아이가 쓰는 것.
상남자라면 바닐라지.
"프레임워크 쓰면 게이"라는 오만한 생각으로 시작함.

그리고 만들다가 뭔 시발 라디오 버튼 토글 기능 하나 순수 js로 구현하는데 개좆토나오는줄 알았다. 

 

이게 무슨 쌉소리인가 할텐데


내가 구현 하려고 했던 기능은 아주 간단하다.

<input type="radio" name="group_btn" id="sex1"><label for="sex1">섹</label>
<input type="radio" name="group_btn" id="sex2"><label for="sex2">스</label>
<input type="radio" name="group_btn" id="sex3"><label for="sex3">킹</label>

 

섹 스 킹

 

대충 이런 라디오 버튼들이 있다 치면 

라디오 버튼 눌렀던거(checked) 다시 클릭하면 체크 해제 되는 아주아주 기본적이고 간단한 기능임

아 그럼 대충 아래와 같이 간단하게 짜면 되겠구나.

document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
  radio.addEventListener('click', function() {
    if (this.checked) {

      console.log('체크해제');
      this.checked = false;
    } else {
      console.log('체크');
      this.checked = true;
    }
  });
});

ㅇㅇ 안되

이게 뭔 시벌 개소리냐 이게 왜 안되냐.
시발 나도 모름 안됨.


콘솔 로그 찍어보면 무조건 버튼 클릭시 라디오버튼.checked의 값이 true만 나온다 
chatgpt 깡통대가리년은 헛소리만 하고 왜 안되는지 모름

결국 스택오버플로우에서 답을 찾아냄

https://stackoverflow.com/a/54382781


라디오 토글 구현한 js 코드 : https://codepen.io/RiverRockMedical/pen/VgvdrY

소스를 보자마자 랄부가 탁 처지면서 이마가 지끈거리더라.

이런 예 말고도 커밍아웃 마려운 별 병신같은 문제 많더라.

역시 사람은 주제를 알아야된다고
만약 다음에 사이트 만들일이 있으면 
분수에 맞게 온갖 라이브러리와 프레임워크 떡칠해서 퀴어축제를 열어야 겠다.

9개의 댓글

그럴땐 체크박스와 라벨을 쓰고 체크박스 디자인을 라디오버튼 모양으로 바꾸는 트릭을 쓰기도함

0
@저소음흑축써주세요제발

근데 라디오 버튼은 선택지 중 하나는 무조건 필수일 경우에 쓰는 느낌으로 접근해야함 해제가 필요한 경우엔 체크박스를 쓰는게 의미적으로 맞는걸로앎

0
2024.01.07

니가 원하는건 체크박스인데 왜 라디오를 쓰니

알맞은 ui ux를 쓰자

1
2024.01.07

역사는 반복된다

 

바닐라씀 - 어 이거 너무 반복되고 불편한데? - 라이브러리 완성 - 이 라이브러리도 너무 중구난방으로 사용하니 틀을 만들어보자 - 프레임워크 완성 - 프레임워크에 기능이 부실해서 다른 라이브러리랑 섞어서 씀 - 모든 기능을 프레임워크에 넣어보자 - 혼종완성 - 이럴바엔 그냥 순수한 api쓰고말지 - 바닐라씀 - 반복

3
2024.01.07

씹게이 ㅋㅋㅋㅋㅋㅋ

0
2024.01.07

체크박스 모르니

0
2024.01.07

저정도는 react 나 vue 에서도 쓰이고, 작동안할코드이긴해..

0
2024.01.07

그거랑 바닐라랑은 상관없어보임

0
2024.01.07

솔직히뭔소린지모르겠는데 백엔드가 이것저것 더 많이붙임

0
무분별한 사용은 차단될 수 있습니다.
번호 제목 글쓴이 추천 수 날짜 조회 수
5719 [프로그래밍] 하이브리드 웹뷰기반 앱은 rn이 정석이야? 3 잠적자 0 18 시간 전 158
5718 [프로그래밍] c# webview2 도움요청함.. 7 carpediem 0 23 시간 전 114
5717 [프로그래밍] 현업 개발자형들 맥씀? 9 이또히로부미 0 1 일 전 206
5716 [프로그래밍] libtorch에서 cuda 안불러와지는거 도움! 2 Hakat 0 2 일 전 123
5715 [프로그래밍] 뭔가 게시판이 애매해서 그런데 gis 잘아는 사람? 1 하늘늑대 0 3 일 전 163
5714 [프로그래밍] 컴포즈가 프리뷰랑 폰에서 다르게 동작해요 1 집에가게해줘 0 3 일 전 118
5713 [프로그래밍] 난바보다) 크로미움 램사용량 문제 일단 해결 2 ye 0 4 일 전 282
5712 [프로그래밍] k8s DNS 이슈는 해결이 안되나보다. 잉텔 0 5 일 전 171
5711 [프로그래밍] 분노) 진짜 유튜브 구글 패악질 토나오네 씨발 17 ye 0 6 일 전 769
5710 [프로그래밍] 프론트엔드 공부하려는데 언어 추천좀 7 스트리플 0 7 일 전 350
5709 [프로그래밍] 객체지향 뽕에 취하지마라 8 69746974 2 8 일 전 407
5708 [프로그래밍] 요즘 앱개발 인력시장 어떰..3년차 2 센치해요 0 11 일 전 387
5707 [프로그래밍] 컴포즈 Box 컴포넌트가 안 나와... 1 집에가게해줘 0 13 일 전 148
5706 [프로그래밍] 아 ssl 적용햇는데 개정신없네 9 넌또화나있네 0 13 일 전 305
5705 [프로그래밍] 패스트 캠퍼스 <---- 얘내는 가격 인상 원툴임? 5 조강현 0 16 일 전 398
5704 [프로그래밍] 클라가 파이썬 셀레니움같은거 써서 클릭하고 그러는걸 감지 ... 5 리옴므 0 17 일 전 265
5703 [프로그래밍] leetcode 50일 달성 1 JimmyMcGill 1 17 일 전 237
5702 [프로그래밍] 그냥 개인공부용 git 만들건데 5 년째재수강 0 17 일 전 336
5701 [프로그래밍] html 자바스크립트 질문 19 책걸이 0 18 일 전 370
5700 [프로그래밍] 아니 시바 이게 무슨일이야 4 인간지표 0 18 일 전 380