본문 바로가기

HTML14

URL에 물음표가 왜 붙어요? <form>의 기본 1. 문제 : 동료에게 "이 url에 물음표가 왜 붙어요?"라는 질문을 받았다# 예시http://localhost:3000/login? 해당 결과에 따로 router.push('?')나 query string 처리를 두지 않았기 때문에 ?가 붙는 이유를 알 수 없었다. 예시 { handleLogin() }}> LOGIN const handleLogin = async () => { const data: any = await fetchLogin({ userId, email }); if (data?.status === 200) { localStorage.setItem("accessToken", data?.data?.accessToken); window.location.reload(); //.. 2025. 6. 28.
[1] HTML의 렌더링에 대해 궁금했던 것들 - stream 서버에 요청 후 데이터를 수신(HTTP Response)받으면 HTML문서가 전달된다.HTML문서는 텍스트(string)형태헤더의 Content-Type: text/html 를 만나면브라우저 : "아, 이건 HTML이구나!"하고 인식 이때 HTML은 네트워크를 통해 stream(스트림) 형식으로 조금씩 도착된다. 완전히 다 받은 다음 처리❌도착하는 대로 조금씩 읽고 파싱을 시작⭕️ ※ 스트림(stream) : 조각조각 나누어 실시간으로 받아오는 데이터 흐름1. 스트림은 어떤 기준으로 쪼개지는가?복합적인 요인.서버 전송 방식네트워크가 전달할 수 있는 패킷 단위브라우저의 버퍼에 얼마가 쌓이면 읽을래?즉, 문서 용량이 크면 더 많이 쪼개지고, 네트워크 품질도 영향 준다. 1) 서버 전송 방식서버가 HTML을 .. 2025. 4. 26.
[HTML]오디오 재생 시 재생 중인 다른 오디오 정지 (HTML Audio DOM) 🔊 오디오 재생 let track = new Audio(); let flag = 0; // flag를 사용하여 재생 중인 오디오 있으면 정지 const playVoice = (audioSrc) =>{ track.src = audioSrc; console.log(track.paused) if(flag === 0){ flag = 1; playAudio(); }else{ flag = 0; stopAudio() } } const playAudio = () => { track.play(); track.paused = false iconAnimation("play"); } const stopAudio = () => { track.pause(); track.currentTime = 0; iconAnimation("s.. 2023. 12. 1.
[HTML]canvas 사용법 - 기본 (rect, path, arc) 1. html에 canvas 요소 작성 2. js로 canvas를 세팅 function drawMyCanvas(){ let canvas = document.getElementById("myCanvas"); // 어떤 콘텐츠를 그릴 것인가 let ctx = canvas.getContext("2d"); // 캔버스 사이즈, 배경색 등 설정 canvas.width = 500; canvas.height = 500; canvas.style.backgroundColor = "lightyellow" } 1. 사각형 메서드 ctx.strokeRect(x, y, w, h); ctx.fillRect(x, y, w, h); ctx.clearRect(x, y, w, h); See the Pen canvas - basic re.. 2023. 5. 27.
[NextJS] input type="date"을 활용한 기간 선택 NextJS와 NextUI를 사용하여 구현한 프로젝트. 실질적으로는 React(JS), HTML가 뒤섞인 코드입니다. ❗날것의 코드 주의 📆구현 기능날짜선택을 통한 기간 지정 조회 옵션 : 최근 1개월, 최근 3개월, 최근 6개월 선택가능하게 🧶고려할 점. 1. 기본값 시작일은 프로젝트 생성한 1월 1일로 가정. 종료일은 오늘(가장 최근) 날짜. 그 이후 날짜는 disable. 2. 날짜 변경 시 - 시작일은 종료일보다 전이어야함 (시작일 { setDate({ startDate: '2023-01-01', endDate: today, }); }, []); const [limitDate, setLimitDate] = useState({ minStartDate: '2023-01-01', maxStartDate.. 2023. 4. 5.
#TIL #230329 요즘 쪽대본(?)같은 업무들이 밀려들고 있습니다. (수정 된 기획을 몇 시간안에 디자인, 개발, QA까지 끝내야하는...) 급하게 하는 일 중에서도 '미쳐 생각지 못한, 그동안 사용해보지 못했던, 몰랐던 또는 변화한 코드'들이 찰나로만 스쳐가는게 아까워 메모 수준으로라도 끄적여 둬야겠다고 다짐하는 요즘입니다. 2023.03.29 (화) 1. 기본(?)을 포기하고 디자인을 잡은 사례😅 [기획, 디자인 등 요청 사항] ✅ input 숫자만 입력 가능하게 this.value = this.value.replace(/[^0-9.]/g, '') .replace(/(\..*)\./g, '$1'); // 숫자만 입력가능한 정규식 .replace(/[^0-9.]/g, '') 숫자 (0-9)과 수수점 값이 아니면 '공백'.. 2023. 3. 30.
[HTML] redirect <meta http-equiv="refresh"/>로 해결한 사례 일하면서 알게된 것들을 기록합니다. 📝 언젠간 퍼즐이 맞춰지겠죠. [HTML] a태그 link와 onclick을 통한 링크 이동 이렇게 1차 조건을 해결했지만 ✅ 또 다른 이슈가 있었으니. https://kangdanne.tistory.com?post=10101010 위와 같은 query string 형식의 url이 전달 될 때 오류가 나는 현상. 인코딩의 문제인가 싶어, 인코딩/디코딩 등 어떤 방식으로 변환하여 전달해도 소용이 없었다. Cefsharp를 통하면 query string 형식의 url은 동작되지 않는 이슈가 있다고 한다. 그래서 무엇을 전달되게 할까? 가 아닌, 어떻게 실행되게 할까?로 초점을 옮겼다. 📍과장님의 아이디어 1. C#에서 '브라우저 실행("explorer.exe") > 해당 .. 2022. 6. 15.
[HTML] a태그 link와 onclick을 통한 링크 이동 (with C#) 일하면서 알게된 것들을 기록합니다. 📝 언젠간 퍼즐이 맞춰지겠죠. ✅ 이슈 사항 유저의 로컬 PC에 설치될 런처에서 연결될 메뉴 링크들이 모두 외부 브라우저를 사용해 열려야했다. go blog 쉽지 뭐. 하고 슥슥 작업을 했으나 생각치도 못한 이슈발생🥲 우리의 런처는 PC에서 하나의 App 상태로 열리게 되는 C#으로 만들어진 프로그램이었다. 고로 이곳에서의 새 창은 "윈도우 창"이 되었다. (CefSharp) 해서 팀장님께 보고를 드리고 업무를 배정 받게 되었다. 유저의 브라우저가 열리고 해당 링크로 연결되는 것이 목표! 👇 요건 백엔드 개발자분이 작업한 것 (예시) ... 중략 ... public void OpenLink(string link) { System.Diagnostics.Process.St.. 2022. 6. 15.