📙 자바스크립트 공부19 파일선택을 클릭하면 파일창이 2번 실행됐던 이유? / 이벤트 버블링 "파일 선택" 기능을 커스텀된 UI로 사용하고 싶어 아래와 같이 코드를 작성했는데 .... { console.log('파일선택 클릭 '); fileInputRef.current?.click(); }} > 파일 선택 왠걸 "파일선택"을 클릭하면 파일 탐색기(?) 파일 선택하는 창이 처음 실행이 되고 사진을 선택하니 한번 더 파일선택 창이 열리는게 아닌가 진짜 감이 안와서 (순간 리액트 strict모드인가 했는데 그건 아니었음) 원인을 찾아보니 바로바로 이론적으로(?)만 듣고 체감한적은 없던 "이벤트 버블링"에 따라 발생한 현상이었다. 클릭 이벤트가 onClick 핸들러를 통해 실행되는동안 해당 요소의 부모 요소들한테도 전달이 되어갔던 것!!! 따라서 이벤트 버블링을 막기 위해 stopPropagation(.. 2023. 7. 7. [ Blob ] formData를 보내는데, 왜 blob으로 감싸니 정상적으로 전송이 되었을까? 내가 서버로 post를 날려야했던건 이미지 파일과 json형식의 데이터였는데 그 중 json형식 데이터를 아래처럼 보내고 있었다. formData.append("postDto", JSON.stringify(postDto)); 그러나 계속 발생했던 500 에러!!! json형식으로 만들어 보내는 걸 처음하다보니 어느 부분이 문제인지(받는 쪽 설정 문제인지 내쪽 문제인지조차 헷갈렸다) 하지만 백엔드분께서 금방 시원하게도 해결을 해주셨다 ㅎㅎ (최고>_ 따라서 서버가 JSON 형식의 데이터를 예상하고 있다면, JSON 형식의 데이터를 명시적으로 전달해야 했던 것 [수정 코드] const blob = new Blob([JSON.stringify(postDto)], { type: 'application/json'.. 2023. 6. 6. 문득 궁금해진 Promise와 콜백지옥(Promise 객체 안쓸때)의 차이 처음 자쓰를 배울때부터, 콜백 지옥을 피하기 위해 Promise 객체를 사용하는 것이 코드 가독성이 좋다는 것을 알았지만 기술면접 질문에 대해 준비를 하던 중 근본적인 궁금증이 생겼다. Promise 객체를 사용하면 코드 가독성이 좋아진다는거 말고 코드 실행 속도나 성능면에서는 차이점이 없는건가? 찾아본 결과)) 일반적으로 Promise를 사용하면 코드 가독성이 향상되며 에러 처리가 용이해지는 장점이 있지만, 그러나 코드 실행 속도나 성능면에서는 차이점이 있을 수 있다. Promise는 비동기 처리를 위해 콜백 함수를 사용하지 않기 때문에, 콜백 지옥을 방지하고 가독성을 향상시키는 장점이 있지만, Promise 객체 자체를 생성하고 처리하는데 일정한 시간이 소요된다. 이는 콜백 함수를 사용하는 것보다 약.. 2023. 4. 17. && 연산자로 undefined/null 걸러내기 (타입스크립트에서 응용) && 연산자의 다른 기능 원래 && 는 조건식 2개가 참이면 전부 참으로 판정하라는 논리연산자이다. 자료형에선? && 기호로 비교할 때 true와 false를 넣는게 아니라 '자료형'을 넣으면 && 사이에서 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막 값을 남겨준다. falsy 값은 false와 유사한 기능을 하는 null, undefined, NaN 이런 값들을 의미!! 1 && null && 3// null이 남음 undefined && '안녕' && 100// undefined 남음 이걸 exploit(이용,착취) 하면 if문을 조금 더 간략하게 쓸 수 있다고 한다. 그래서 && 기호를 이용해서 if (변수 && typeof strs === "string") {} 이렇게 사용하면 변수.. 2023. 1. 18. [js] 프로토타입이란? / 프로토타입 체인 프로토타입이란? prototype은 '유전자'라고 생각하면 됌 (코딩애플 쌤이 말해주신 설명 ㅎㅅㅎ) function 기계(x = "x기본값", y = "y기본값") { this.q = x; this.w = y; } // 콘솔창에 기계.prototype이라고 찍어보면 // 우리도 모르게 비밀공간이 생겨있음 // prototype은 '유전자'라고 생각하면 됌 기계.prototype.name = "kim"; //이 유전자에 먼가를 추가하면, 그 아래 자식들도 다 갖고있음 var nunu = new 기계("달리기", "말하기"); console.log("nunu", nunu); // 실제로 nunu를 찍어보면 결과값은 // { q: '달리기', w: '말하기' } 이렇게 뜨지만 console.log("nunu.. 2023. 1. 15. [js] 클래스 개념 이해하기 var nunu = { q: "consume", w: "snowball", }; var garen = { q: "strike", w: "courage", }; // class는 object 찍어내는 기계 그 이상 그 이하도 아님 // 비슷한 object 뽑아내는 기계일뿐 //옛날엔 class라는 개념이 없어서 function으로 씀 //this가 나온 이상 그냥 함수가 아니라 class가 됌 function 기계() { // 새로 생성된 인스턴스의 q에 consume을 추가해주시요 this.q = "consume"; // 새로 생성된 인스턴스의 w에 snowball을 추가해주시요 this.w = "snowball"; } //this는 기계로부터 생성되는 오브젝트들을 뜻한다 => 인스턴스 //기계에서 ob.. 2023. 1. 15. 이전 1 2 3 4 다음
