본문 바로가기

Issues

[vue & python & Mac & axios] ㅎㅏㄴㄱㅡㄹㄲㅐㅈㅣㄹㄸㅐ 한글 이렇게 깨질때 (한글자모분리)
100000202001152366_고객정보.txt api 연동 중에 다른건 다 잘되다가 위 텍스트에서만 백엔드(python) 쪽에서 한글이 자음과 모음이 분리되며 깨진다고 했다. 내가 요청한 api parameter 백엔드에서 디코딩한 문자 100000202001152366_ㄱㅗㄱㅐㄱㅈㅓㅇㅂㅗ.txt 그리고 해당 문자를 복사해서 메모장이나 다른곳에 붙여넣으면 또 정상적으로 나온다 해결방법 & 원인 이런 현상이 나타나는 이유는 Mac OS에서 유니코드를 처리하는 방식 때문이라고 한다. 백엔드 쪽에서 NFD 형식을 NFC(Normalization Form Composition) 로 바꾸면 끝난다. import unicodedata file_name = '100000202001152366_고객정보.txt' f..
[javascript] 페이지 진입 시 새로고침인지 뒤로가기인지 확인하기! (window.performance.navigation.type == 1)
이슈 개발에서 데이터를 6개씩 끊어서 줘야하는데 최대 개수가 12개라서 api에서 페이징 처리없이 한번에 12개 상품을 주고, 더보기 페이징 처리를 display:none/block으로 처리해야했다. 그런데 기본 동작할때는 이슈가 없었는데, history back 할때 스크롤값과 기존에 더보기 했던 상품인데 더보기가 열려있지 않는 등 추가 이슈가 생겼다. 따라서 history관련 추가 작업이 필요했다. ==> history.state / history.replaceState() 그리고 현재 페이지 진입 동작이 새로고침이냐 뒤로가기냐에 따라서 다른 동작을 실행했어야했다. ==> window.performance.navigaion.type === 1 해결 if (window.performance.naviga..
[javascript] overloading 과 overriding
overloading 함수는 같고 매개변수가 다른것 (js에는 없음) function a(매개변수1, 매개변수2) { } function a(매개변수new1, 매개변수new2) { } overriding 이름이 같은 함수가 2개있으면 밑에 함수가 위에 함수를 덮어씌우는 것 function a() { console.log("test") } function a() { console.log("test2222") } a() //test2222
[javascript] es5환경에서 객체 반복 돌리기
webpack 환경에서만 작업하다가 오래된 소스에서 객체 반복을 돌리려는데 Object.entries() Object.keys() Object.value() for in 이런거밖에 생각이 안나서 찾아보았다.. for of for (var key of object) { key, object[key] //이런식으로 접근 가능! } key와 object[key]가 value로 key, value가 접근이 가능하다.
[css] css 가상클래스로 1. 2. 3. 쓰기 (counter)
1. 2. 3. 이렇게 순번을 써야하는데 css로 하는 방법 ! html scss .wrapper { counter-reset:아무이름 0; dl { &:before { counter-increment: 아무이름; content: counter(아무이름); } } }
[html & javascript] 가상요소 이벤트 바인딩 (template 태그)
html
[html] 크롬 input 자동완성 끄기
autocomplete="off" 속성을 넣었는데도 크롬에서 주소가 자동완성 되는 이슈 발생. 해결 autocomplete="no" 로 바꾸니 정상적으로 작동했다.
[javascript & html] 라디오 input 클릭했을때 확인 후 안되게 하기
(in 오렌즈프로젝트) 주문결제에서 배송비 쿠폰을 선택한 상태에서 배송지를 변경하면 confirm 이 뜨는데 "배송비 쿠폰이 리셋됩니다. 계속하시겠습니까?" >> 취소, 확인 중 선택 취소를 선택하면 >> checked 바뀌지 않고 그대로 확인을 선택하면 >> checked 변경 해결 $(document).on("click", "input[type=radio]", function () { if (confirm("배송비 쿠폰이 리셋됩니다. 계속하시겠습니까?")) { return false; //이게 포인트 } }) return false를 추가하면 된다.
[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 세션스토리지는 세션이 끝나면 끝~ 브라우저를 종료하면 사라진다.
[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); }
[Node.js & nvm] nodejs 버전 관리하기 (여러버전 사용하기)
상황 PHP프로젝트는 노드버전 10.15.3을 사용하고 JAVA프로젝트는 노드버전 16.13.0을 사용. 둘 다 동시에 하는 작업은 없지만 가끔 PHP 프로젝트 대응이 필요. 해결방법 1. 터미널 git bash로 열기 2. 아래 명령어로 nvm 설치 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 3. 아래 명령어로 설치된 것 확인 command -v nvm 4. nvm ls하면 현재 설치되어있는 노드버전 나옴 (앞에 * 붙어있는게 현재 쓰고 있는 버전임) nvm ls 5. 필요한 노드버전 다운받기 (ex ) 16.13.0) nvm install v16.13.0 6. 아래 명령어로 원하는 버전으로 변..
[Javascript] 가격 콤마찍기 / 돈 (,) 콤마 단위 붙이기 toLocaleString
const price = 13000; price.toLocaleString("ko-kr"); //'13,000' 참고 1. 혹시라도 13000.toLocaleString() 하게 되면 에러가 나니 꼭 변수에 담아서 사용!!! 2. money가 스트링이라면 Number()로 감싸서 처리하기.
[firebase] vue프로젝트를 SPA 방식으로 이동하는데 새로고침시 404 error 뜰때 (파이어베이스 vue router설정해주기)
상황 vue router 설정도 잘 해줬고, history설정도 해줬음. SPA방식으로 (router-link) 페이지를 이동한 후 새로고침을 하면 로컬에서는 잘 되다가 배포 후에 404 에러가 뜸 해결 firebase.json 파일을 수정해주면된다. rewrites 부분 추가 !! { "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ], "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } } spa방식은 index.html에서 모든 처리를 해주게 되어있는데, router-link로 이동을 하면 url뒤에 붙는 파라미터로 페이..
[IOS & javascript] ios 이모티콘 키패드 height 조정하기 (emoji keypad window resize)
상황 앱에서 키패드를 이모티콘으로 변경했을때 height가 높아져 입력란이 가려짐 이슈 해결 1. window.visualViewport window.resize를 해봤는데 앱이라 그런지 안됨.. 찾아보다가 window.visualViewport로 해결 간단하게 정리한 소스 !! function resizeKeypad = () => { requestAnimationFrame(() => { //필요한 함수 실행 }) } window.visualViewport.addEventListener("resize", resizeKeypad) 전체소스 $(function () { let flag = false; function handler(e) { if (flag) return; flag = true; request..
[kakaoMap & javascript] 카카오 지도 연결했는데 크로스도메인 오류 날때 This request has been blocked; the content must be served over HTTPS.
상황 로컬에서는 잘 됐었는데 firebase로 배포한 후 카카오 developer 페이지에서 사이트 도메인 설정도 해줬는데 갑자기 안나던 크로스 도메인 이슈가 났다. 해결 head태그에 넣는 카카오 맵 url에 잎에 있는 http를 삭제하고 //로 시작하게 만든다. //dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=개인API키 전체코드 지도 페이지 참고 만약 아래와 같은 오류가 난다면 지도를 넣을 요소를 잘 찾는지 확인하면 된다. (ref(null) 로 불러와서는 value를 안쓴다거나 보통 찍어보면 못찾는다고 나온다. ) ’Cannot read property ‘defaultView’ of undefined’
[javascript & Mobile] web에서 focus 이벤트는 유저상호호환에 의해서만 가능하다 !!!
상황 모바일에서 검색페이지 진입과 동시에 검색어 입력 박스에 focus되면서 키패드를 올려달라는 요청 $(document).ready(function () { $("input[type='text']").focus() }) 결론 (웹에서는 컨트롤 불가능!) 웹에서는 유저상호호환이벤트에 의해서만 .focus() 가 가능하다. ex) 클릭 이벤트 등 따라서 검색페이지를 페이지가 아닌 버튼 클릭으로 팝업으로 열리면 유저가 발생시킨 클릭이벤트이기 때문에 focus가 가능하지만 그냥 DOM이 렌더링 된 후 강제 focus를 주는 것은 불가하다. (앱은 키패드를 강제로 만들어서 올리는 등 또 다른 방법이 있다고함~!)
[javascript & Mobile] 주소창 포함한 100vh 구하기 (jquery / javascript height 총 정리)
주소창 포함한 100vh 구하기 (window.outerHeight) 주소창 포함한 전체 높이 window.outerHeight 주소창 포함하지 않은 전체 높이 (safe-area포함) window.innerHeight 주소창 포함하지 않은 전체 높이 (safe-area 포함X) $("body").height() 또는 $("body").outerHeight() 참고 window.innerHeight와 $("body").height() 의 차이 window.innerHeight는 iphone의 safe-area 포함 !!
[CSS] 보더가 겹쳐져 있는 메뉴 ACTIVE 주기
상황 각각의 네모박스는 label 안의 input checkbox로 되어있고 보더를 unchecked는 회색으로, checked는 검정색으로 처리 label에 모두 border: 1px solid #ddd; 를 주었더니 겹치는 부분 발생. 그리고 checked 된 애한테 검정색으로 색상을 바꿔주었더니 마음대로 되지 않았다. 해결 1. 모든 label에 보더를 준다. 2. 모든 label에 겹치는 만큼을 margin으로 빼준다. margin-top: -1px; (이렇게 하면 봤을때 맨 위에 빼고 모두 일정한 보더를 가지게 됨) 3. 첫번째 label에 margin-top: 0; (여기까지 하면 첫번째를 포함해서 모두 일정한 보더를 가지게 됨.) 4. checked 된 애한테 보더 색상 바꿔주면서 posit..
[javascript & 정규식] 특정문자열 제외하고 다 치환하기
소문자 숫자 - _ . 빼고 다 없애기 str.replace(/[^a-z\d\_\-\.]/g, "") 풀이 (*str은 들어올 문자열 임의로 썼습니다.) [^] 대괄호 안에 ^는 "제외"를 뜻한다. a-z는 소문자 \d는 숫자 -_. 는 정규식에서 쓰는거라서 각각 앞에 \를 붙여서 그냥 특수문자라는걸 알려주기 g가 있어야 글로벌이니 여러번 찾음 a-z \d - _ . 가 아닌 문자는 다 "" 공백으로 치환 막상 풀이를 보면 쉬운데 하려고 하니 생각하지 못했던 쉬운 방법
[javascript & Swiper] 슬라이드 가운데 오기 & loop 아닐때
상황 클릭하면 해당 슬라이드로 이동하고, active된 슬라이드가 가운데 위치하게 해야해서 Swiper의 centeredSlides 속성을 사용하여 가운데 오게 했다. loop일때는 이슈가 없었지만 loop가 아닐때 첫번째 슬라이드 옆에 공백이 생기는 상황이 발생하였다. 해결 centeredSlidesBounds new Swiper(".js__main__slider", { loop: false, centeredSlides: true, centeredSlidesBounds: true //이걸 같이 추가해줘야함!! }) centeredSlides와 함께 centeredSlidesBounds 속성을 추가해주었더니 해결이 되었다. 왼쪽에 공간을 채워줄 슬라이드가 없을때에는 가운데 정렬이 되지않는다. (0번째 슬..
[CSS& Mobile] 모바일 브라우저 주소창과 바텀시트 고정시키기
주소창과 바텀시트 고정시키기 body { overflow: hidden; position: fixed; } .wrapper { position: absolute; /*또는 position: fixed도 상관없음. 띄워져만 있으면 됨.*/ } BODY 에 overflow: hidden; position: fixed; 를 주면 모바일에서 브라우저의 주소창과 풋터가 움직이지 않는다. 대신 콘텐츠는 body위에 띄워져 있어야한다.
[CSS & ie] translate 와 calc (같이 사용하지 않기)
ie에서 이슈 transform: translate(0, calc(100% + 25px)) 해결 transform: translateY(100%) translateY(25px);
[javascript] window.location.href 와 document.location.href의 차이
window.location.href 와 document.location.href 의 차이 앱(안드로이드)에서 봤을때 뒤에 흰화면이 보이냐 안보이냐의 차이. document 가 이동되기 때문
[javascript & css] daum zipcode 우편번호 css 컨트롤하기 (iframe 안 css 수정하기)
다음 우편번호 API를 사용하는데 iframe마다 min-width: 300px 이 걸려있어 모바일에서 잘림현상이 발생하는데 iframe 안의 html과 css라서 수정이 안되었다. #document 해결 (소스는 구리지만..) contentWindow로 내부에 접근하여 거기서 다시 document.getElementById로 접근하여 css를 수정하였다. 테스트 하다보니 가끔 못찾는 경우가 있어 setTimeout을 걸어 처리하였다. const zipCodeIframe = document.getElementById("zipcodeWrap").childNodes[0].contentWindow.document.getElementById("daum_zipcode_view"); if (zipCodeIframe..
[VSCode & Eslint] vscode에 노란줄 쳐지면서 안없어질때
해결 1. ctrl + shift + P (안되면 상단메뉴에서 View > Command Palette 열기) 2. Open workspace setting 열기 3. Eslint 검색 4. eslint: enable 체크 해제

티스토리툴바