본문 바로가기

전체 글

[javascript & vue & scss ] 파일경로 ~ 와 @
언젠가부터 ~와 @가 나오는데 뭔지 몰라서 찾아보았다. 그리고 나서 vue 프로젝트를 하는데 @가 계속 나와서 확인해보니 vue에서는 src폴더를 바라보도록 설정되어있었다. 참고!! ~ 루트폴더 @ 현재폴더 vue에서의 @ src 폴더
[javascript & 비동기통신] new Promise() / fetch / try catch
상황 공통으로 비동기 통신하는 함수를 만들고 싶어서 common.js에 함수를 만듬. function requestApi(request) { if(!request) return ; $.ajax({ url: request.url, type: request.method ? request.method : "GET" dataType:"text", success(result){ return result; //하면 result 를 리턴해줄 것이라 생각 }, error(err){ console.error(err); } }) } 그리고 이걸 필요한 페이지에서 async await을 사용하여 썼지만 response가 undefined가 나옴!!! const requestWeather = async() => { try {..
[javascript] input에 숫자만 입력하게 하기 (keyup 이벤트와 input이벤트의 차이 !)
type이 text인 input박스에 숫자만 입력되도록 하는데 이벤트를 keyup으로 했더니 찰나의 순간이지만 문자가 보이고나서 지워지는 것을 볼 수 있었다. keyup대신에 input으로 바꾸니 아예 숫자를 제외한 건 입력이 안되는 것을 확인 할 수 있었다. keyup이벤트 개발자도구를 열어 콘솔에 아래 스크립트를 복사 붙여넣기 한 후 문자를 입력해보세요. $(".keyupTest").on("keyup", function () { const _value = $(this).val(); const regex = /[^\d]/ig; $(this).val(_value.replace(regex, "")) }) input이벤트 개발자도구를 열어 콘솔에 아래 스크립트를 복사 붙여넣기 한 후 문자를 입력해보세요. $..
[javascript] localStorage와 sessionStorage 차이점 정리
localStorage 로컬스토리지는 도메인별로 저장! 브라우저를 꺼서 새탭으로 켜도 강제로 지우지 않는한 무조건 남아있다. (=> 개발자도구에서 확인가능) * 시크릿모드에서는 탭을 끄면 사라지니 참고!! sessionStorage 세션스토리지는 세션이 끝나면 끝~ 브라우저를 종료하면 사라진다.
[typescript 기본] enum과 enum 활용법
ENUM 이란? 특정 값들의 집합을 의미하는 자료형 숫자형 ENUM enum Shoesnum { Nike, Adidas } var myShoes1 = Shoesnum.Nike; console.log(myShoes1); // 0 숫자형 enum은 default가 0이고 그 다음은 1씩 증가함. enum Shoesnum2 { Nike = 5, Adidas } var myShoes2 = Shoesnum2.Nike; var myShoes3 = Shoesnum2.Adidas; console.log(myShoes2, myShoes3); // 5, 6 default를 변경할 수 있음. 초기값을 5로 설정하면 5부터 시작. 문자형 ENUM enum ShoesString { Nike = "나이키", Adidas = "아..
[html & ios] 전화번호가 들어있는 span태그로 감싼 텍스트인데 전화가 되고 css가 이상할때
상황 safari에서만 그냥 123-456-789 span 태그로 감싼 텍스트인데 누르면 전화기능이 되면서 컬러가 검정색으로 고정되어서 아무리 important를 줘도 안먹을때 원인 mac으로 연결해서 확인해보니 ios에서는 태그안에 전화번호가 있으면 전화로 인식하고 태그 자체를 a태그로 바꿔버림. 123-456-789 그리고 해당 페이지에 a태그 색상이 #000으로 고정이었음. 해결 태그로 변경하거나 a 태그라고 생각하고 줘야함. 단 안드로이드에서는 span 태그로 그대로 나오니 참고!
[css] ::after ::before 개발자도구에서 확인하는데 확인조차 안될때
상황 가상클래스로 ::after 를 주고 안에 content랑 다 정상적으로 적용했는데 화면에 안나와서 개발자도구에서 확인하는데도 ::after 자체가 아예 보이지 않음 .test::after { content: ""; display: block; width: 20px; height: 20px; background: red; } 해결 다른 파일에서 display: none!important; 가 되어있었음.......... 같은 파일 위치가 아니라 찾는데 애먹음 ^^ 혹시 안나온다면 어딘가에서 display: none 시키고 있는지 확인해보기..!
[IOS & CSS] 아이폰 하단 여백 safe area 만큼 css주기
상황 아이폰에서 독바와 하단 겹치는 현상 발생. 해결 calc(constant(safe-area-inset-bottom) + 더할값) calc(env(safe-area-inset-bottom) + 더할값) //원래 소스 .btn { padding: vw(10px 40px); } //적용한 소스 .btn { padding: vw(10px 40px calc(constant(safe-area-inset-bottom) + 10px)); padding: vw(10px 40px env(constant(safe-area-inset-bottom) + 10px)); padding: vw(10px 40px); }
[typescript 기본] Union type 과 Intersection type 차이 ( | 와 &)
1. any console.log를 찍는 함수를 만들고 싶은데 매개변수로 찍을 값이 string일수도 있고 number일수도 있을때 any로 사용가능. function logMessage(value: any) { console.log(value); } 하지만 typescript의 장점이 사라지는 것이기 때문에 any는 지양하는 것이 좋음! 따라서 타입을 여러개 지정해야하는 경우에는 아래 union type 또는 intersection type을 통해서 타입을 정의하는 것이 좋다. 2. Union type ( | 연산자를 이용한 타입 정의 ) function logMessage(value: string | number) { console.log(value); } 위 방식처럼 | 연산자로 string과 nu..
[typescript 기본] type과 interface
type type은 type을 하나 생성하는 것이 아니라 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. type PersonType = { name: string; age: number; } let sehoStu: PersonType = { name: "세호", age: 20 } type과 interface의 차이 1. 커서를 대고 있을때 나오는 모습이 다르다. type은 안에 내용까지 나오지만 interface는 그렇지 않다. 2. "interface"만 확장이 가능하다. interface는 extends가 가능하지만 type은 그렇지 않다. 따라서 typescript공식문서에도 type보다는 interface를 사용할 것을 권장하고 있다.

티스토리툴바