profile
안녕하세요 신입 웹개발자입니다.

IOS safari touch이벤트시 window.open 실행 안 됨

IOS safari에서어떤 버튼에 touchstart로 이벤트를 넣을 시 window.open 메서드가 작동 안하는 현상을 발견알아보니 IOS >= 9.0부터 touch이벤트 내에서 window.open을 사용할 수 없게 해놓았다는것을 발견앞으로 window.open을

2020년 3월 6일
·
0개의 댓글

IOS 모바일 기기에서 click event 사용시 문제점[JS]

다들 웹개발을 하실 때 click event를 많이 사용하실 겁니다. 아마 이런 식으로 이벤트를 추가하실텐데 pc에선 문제가 없습니다. 하지만 IOS 모바일 기기에서 확인해보면 약간 반응이 느린걸 알 수 있습니다. 무엇이 문제일까요?? 이는 IOS가 의도적으로 클릭이벤트를 지연시키기 때문입니다. 일부러 클릭이벤트를 지연시켜 제스쳐/스와이프가 올바르...

2020년 2월 7일
·
0개의 댓글

HTTP(HyperText Transfer Protocol)

HTTP란? 클라이언트와 웹 서버간에 데이터를 주고 받는 것을 텍스트 기반으로 하겠다는 약속이다. 이렇게 약속했기 때문에 모든 프로그램이 이에 맞춰 개발하고 정보를 교환한다. 웹에서만 사용하는 것으로 TCP/IP기반으로 한 지점에서 다른 지점으로 요청과 응답을 전송. 웹서버란? 웹서버는 하드웨어, 소프트웨어 혹은 두 개 모두를 의미할 수 있다. -하...

2020년 1월 30일
·
0개의 댓글

emoji 문자 표현하는 방법[MySQL]

문제 기존 MySQL에 한글 및 다른 언어가 깨지는 것을 처리하려면 character set을 utf8로 설정해야 했었다. 그렇다면 emoji같은 글자들은 어떨까? character set이 utf8인 게시판에 emoji로 된 글을 남겨 보았다. 글자가 깨져 보일 것이다. 문제 발생 이유 UTF-8 은 1~4 Byte까지 저장이 가능하게 설계되어있다....

2020년 1월 20일
·
0개의 댓글

배열에서 중복값 제거하는 방법[JS]

일을 하다보면 배열에 유니크한 값만 남기고 싶을 때가 있다. 그 때 제가 쓰는 방법을 알려드리겠습니다.

2020년 1월 10일
·
0개의 댓글

간단하게 난수화 문자열 생성하기[JS]

javascript의 Number 객체는 Object 객체의 toString()메소드를 오버라이딩하며, Object.prototype.toString()를 상속받지 않습니다. Number 객체에서 toString() 메소드는 특정 진수로 객체를 표현한 문자열을 환원합니다. 그렇다면 Math.random() 으로 랜덤한 숫자를 생성하고 거기에 .toStr...

2020년 1월 9일
·
0개의 댓글
post-thumbnail

parcel 기초 세팅

오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn:...

2019년 12월 26일
·
0개의 댓글

image 높이 값 불러올 때 주의점[JS]

만약 프론트엔드 개발자라면 이미지를 불러와 높이 값에 따라 레이아웃을 변경할 때가 있을 것이다. 예를 들어 이런 코드가 있다고 가정해보자 결론만 말하자면 위의 코드는 작동하지 않는다. 왜 그럴까? 그 이유는 test.png가 로딩되기 전 clientHeight를 구했기 때문이다. 위 코드가 작동되게 하려면 이렇게 해야한다. 결론 이미지는 로드되고...

2019년 12월 13일
·
1개의 댓글

실용주의 프로그래머를 읽고

실용주의 프로그래머를 읽고 나서 공감갔던 내용을 요약해보았다. 어설픈 변명을 만들지 말고 대안을 제시하라. `변명하는 대신 대안을 제시하라. 그 일은 할 수 없다고 말하지 말고, 무엇을 할 수 있는지에 대해 설명하라.` 깨진 창문을 내버려두지 말라. 눈에 뜨일 때마다 나쁜 설계, 잘못된 결정, 좋지 않은 코드를 고쳐라. 변화의 촉매가 되라. ...

2019년 12월 8일
·
0개의 댓글

Swiper.js 슬라이더 안에 youtube 영상 넣기[JS]

오늘은 swiper.js로 만든 슬라이더들안에 youtube영상을 넣어보는 것을 알아보고자 한다. 기본적인 swiper를 생성하는 방법은 이 링크로 들어가면 자세히 알 수 있다. index.html youtube.js 기본적인 yotube 동영상을 생성하는 방법은 이 링크로 들어가면 자세히 알 수 있다. 이것으로 swiper안에 youtube넣기를 ...

2019년 12월 6일
·
0개의 댓글

$(this).index()를 javascript로 만들기[JS]

jquery를 쓰다보면 현재 클릭한 요소의 인덱스 값을 구하는 것을 많이 쓰는데 코드로 보면 다음과 같다. 어떻게 구현하는 걸까? 생각해보자. 우선 현재 클릭한 요소의 부모 요소부터 찾아야 할 듯하다. 함수로 만들어 보겠다 이런식으로하면 element의 부모 요소를 찾을 것이다. 그리고 부모 요소 중 element는 몇 번째 자식인지 찾아야 한다. ...

2019년 12월 6일
·
0개의 댓글

프로그래머스 알고리즘문제(두 정수 사이의 합)[JS]

본 문제는 프로그래머스 코딩테스트 연습에서 따온 문제이다. 두 정수 사이의 합 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한 조건 a와 b가 같은 경우는 둘 중 아무...

2019년 12월 6일
·
0개의 댓글

IE에서 ajax요청시 cache문제 처리하기[JS]

문제 IE에서의 ajax 요청이 캐싱되는 문제 정확히는 GET방식으로 요청할 때 캐싱되는 문제이다. jQuery에서는 아래의 방식으로 이 문제를 해결한다. jQuery공식 홈페이지를 가보니 이렇게 적혀있다. `cache (default: true, false for dataType 'script' and 'jsonp') Type: Boolean If ...

2019년 12월 6일
·
0개의 댓글

<img> 태그에 css translate 적용 시 주의할 점

초 간단 팁 img 태그에 css translate를 줄 때 img의 가로,세로 중 하나라도 홀수면 이미지가 흐릿해진다. 만약 translateX 를 준다면 가로는 무조건 짝수여야하고 반대로 translateY면 세로는 무조건 짝수여야한다. 간단하게 해결하려면 image를 background로 넣어주면 된다.

2019년 12월 6일
·
0개의 댓글

문자열 중간 글자만 *표시 만들기[JS]

웹 개발을 하다보면 특정 문자열을 *로 처리해야할 때가 있다. 처음과 마지막 글자만 보여주고 중간 글자들은 다 *로 만드는 함수이다. 우선 문자열이 2글자인지 아니면 그보다 더 많은지 검색한다. 문자가 2글자 이하면 사이 글자가 없으므로 마지막 글자만 \*로 만든다. 입력 받은 문자열을 배열로 만든 다음 처음과 마지막 글자 말고 나머지 값을 *로 바꾼...

2019년 12월 6일
·
0개의 댓글

input 입력 시 한글만 입력하게 하고 싶을 때[JS]

입력 폼 개발 시 사용자가 input에 한글만 적게 하고 싶을 때가 있다. 처음엔 이런식으로 하면 될 줄 알았지만 크롬에선 정상 작동되는데 IE에서는 정상적으로 작동하지 않았다 (망할 IE 망했으면...); 그때 여러 구글링을 통해 알아본 결과 숫자나 영어는 123, abc 이렇게 적히는 반면 한글은 ㄱ ㅏ ㅁ 을 합쳐서 감으로 만들어야 하기 때문...

2019년 12월 6일
·
0개의 댓글