프론트엔드10 jQuery Mobile 사용 시, <a> 태그 href 속성이 안 될때 고객사로부터 기존의 서비스 중인, 모바일 웹 페이지에서 Swipe 기능을 넣어달라는 요청사항이 있었다. jQuery Mobile을 이용하여, 'swipeleft, swiperight' 속성값을 사용하여 이벤트를 처리했다. 그런데.. 그 전에는 잘되면 태그 내 href 속성이 먹통이 되는 현상이 발생했다. 클릭하더라도, 크롬 내 console 창에서는 아무런 이슈가 확인되지 않았다. "jquery mobile href not working" 으로 구글링해보니, 이미 과거에 이런 이슈로 문의한 글이 있어서 다른 개발자 분들에게 혹여나 도움이 될까 싶어 남겨본다. 해결법은 기존의 태그 내에 rel = "external" 속성값을 추가해주면 된다. onclick 속성을 별도로 추가하고, 자바스크립 함수를 실행하.. 2021. 10. 26. [ReactNative] Could not find "Podfile.lock" 에러 메세지 오랜만에 리액트 공부를 다시 시작하려고 맥북을 켰다. 간단한 프로젝트부터 차근 공부하려고, 샘플 프로젝트를 생성하여 ios 시뮬레이터 실행을 시도.. 그런데.. 오류 메세지가 발생.. Could not find "Podfile.lock" at ~~ 해결책은 프로젝트 폴더 내, ios 폴더로 이동하여 아래 명령어를 단계적으로 실행 후 npm run ios 를 재시도하면 정상적으로 실행된다. $ cd ios $ pod repo update $ pod install 그런데, 왜 이전에는 정상적으로 실행되던 프로젝트에서 문제가 발생했을까? 원인은 Xcode 12.4로 업데이트 한 이후에 발생한 것이다. error Failed to build iOS project. We ran "xcodebuild" comman.. 2021. 9. 26. HTML 태그 정리 (시맨틱 태그, 중요한 태그모음) 웹 개발을 진행하다보면 다양한 HTML 태그를 만날 수 있다. 그 중에서도 시멘틱(Semantic Tags) 태그에 대해서 알아볼 필요가 있다. 글에도 '제목', '부제목', '본문' 내용이 나뉘어 있는 것처럼 HTML 태그에서도 각 사용목적에 따라 의미가 있는 HTML 태그를 종류별로 사용해야 한다는 것이다. 일반적으로 웹브라우저에서는 태그로 감싸져 있는 것을 '제목'이라고 인식해서 별도로 표현해준다. 사용자 화면에 보았을 때는 단순히 글자크기가 크게만 보이겠지만, 검색이나 웹 페이지 유지관리의 용이성에 있어서는 적절한 시멘틱 태그를 사용하는 것이 좋다. ① SEO : 검색에 최적화 되기 위해서, 적절한 HTML 태그를 사용 ② Accessibility : 웹 접근성이 좋아진다. (시각 장애인들이 키보.. 2021. 8. 14. $(document).ready()와 window.onload() 차이점 웹 개발을 진행하다보면, 최초 웹 페이지를 불러오는 과정에서 선행되어야 하는 함수가 있기 마련이다. 예를 들어, 회원 목록 페이지를 구현한다고 했을 때 HTML이 모두 불러온 이후 최신 회원목록을 DB에서 불러와서 화면에 보여주어야 한다. jQuery를 이용하는 사람들은 주로 $(document).ready()를 이용한다. 해당 함수는 DOM데이터만 로드가 완료되면 ready() 내 함수가 바로 실행된다. 예시로 '회원 목록 페이지 -> 회원정보 상세보기 페이지 -> [뒤로가기]' 로 이전 '회원 목록 페이지' 로 이동하는 이벤트를 발생시켰다. 그런데 '회원 목록 페이지'에서 검색한 키워드와 페이지 번호가 초기화 되어버리는 문제가 발생했다. 문제 발생의 원인은, 뒤로 가기 실행 시 '키워드, 페이지 번호.. 2021. 8. 11. [DI] 의존성 주입이란? 웹/모바일 서비스를 장기적으로 운영하다보면, 기능이 하나둘씩 추가되는 경우가 빈번히 발생한다. 때로는 고도화 과정에서 기획이 완전히 바뀌어, 새로운 화면으로 탈바꿈이 되기도 한다. 그래서 개발자는 항상, 수정이 자유롭게 구성될 수 있는 코드를 작성해야 한다. 이번 시간에는 '의존성 주입(DI)'에 대해서 정리해보고자 한다. * DI (Dependency Injection) : 의존성 주입 DI(의존성 주입)은 프로그래밍에서 구성요소간의 의존 관계가 소스코드 내부가 아닌 외부의 설정파일 등을 통해 정의되게 하는 디자인 패턴 중의 하나이다. (사전적 정의 : 위키백과) 한마디로 요약하자면, 클래스 A에서 직접 객체를 내부에서 직접 생성하는 것이 아니라 외부에서 생성된 객체를 getter()로 사용하거나 se.. 2021. 7. 16. 포워딩과 리다이렉트 차이점 정리 고객사로부터 웹 페이지(도메인) 개편으로 인해, '구 도메인 → 신규 도메인'으로 리다이렉트를 요청했다. 서버단에서 리다이렉트를 처리하면 되겠다고 생각했다. 하지만 문제점이 있었다. (구) 도메인을 이용한 REST api (로그인, 회원정보, 계약여부) 서비스를 이용중이었기 때문이다. 리다이렉트를 진행하게 되면, GET/POST 모두 전달하는 파라미터가 유지되지 않기 때문이다. 한마디로 서비스중인 REST api에 따른 결과값이 먹통이 된다는 말.. 반드시, 서비스 도메인을 리다이렉트 시키는 것은 영향을 받는 부분이 없는지 신중히 파악한 후에 진행해야 한다. ▶ Forwarding (동일한 웹 컨테이너 내에서 이동) - 요청을 구분하여 처리할 서블릿을 결정 - 요청 시 생성된 request, respon.. 2021. 7. 8. [자바스크립트] 함수의 파라미터 사용시 필수 주의사항! 만약에 파라미터 3개를 가지는 함수가 존재한다고 가정해보자. function pay_check(member_num, mediaName, mediaCode) { // 사용자별로 결제 매체정보를 확인 } 그런데, html 코드 내에서는 파라미터 2개를 가지는 함수를 호출한다. 과연 결과는 어떻게 될까? 일반적으로 많이 사용하는 Java 언어에서는 함수를 정의할 때, 파라미터의 갯수에 따라 함수가 다르게 호출된다. 그러나 JavaScript에서는 예외이다. 자바스크립트에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다. 함수를 호출할 때에도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다. 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는.. 2021. 7. 2. 크롬 80 버전 - SameSite CORS 이슈 PHP 최근에 고객으로부터 회원가입 과정에서 이메일 인증에 오류가 발생하여, 정상적으로 회원가입이 어렵다는 문의를 받았다. 재현을 위해서 다양한 브라우저에서 시도해보았다. Explorer, Edge 환경에서는 회원가입이 정상적이었으나, Chrome 환경에서는 세션값이 제대로 전달되지 않는 문제가 발생했다. 특정 브라우저에서만 안되는 문제를 찾기 위해 구글링 하던중, SameSite CORS 라는 키워드를 발견. 여기서 CORS는 Cross-Origin Resource Sharing의 줄임말이다. 리소스 공유를 서로 다른 도메인간에는 금지. 한마디로 도메인이 서로 다른 사이트간에 통신은 보안상의 이슈로 제한한다는 내용이다. 나의 경우는, 도메인은 동일했지만 서브 도메인이 약간 달랐다. ex) https://pg... 2021. 5. 8. 메일 수신확인은 어떻게 이루어질까? 회사 업무, 거래처와의 계약서 전달과 같은 업무를 진행할 때 메일을 주로 이용한다. 메일 기능 중에서 '수신확인' 을 한번쯤은 이용해보았을 것이다. 말 그대로 상대방에게 메일을 전송한 이후에, 상대방이 언제 읽었는지 확인하는 용도로 사용하는 기능이다. [이슈사항] 회사 업무 중, 특정시간에 '뉴스레터'를 전송하는 서비스가 있다. 한번에 다량의 이메일로 전송하여 담당자가 열람정도를 파악하려는 목적을 가지고 있었다. 특정한 사용자 이외에는 '수신확인'이 되지 않는다는 이슈가 발생했다. '수신확인' 기능은 사용만 해봤었지, 어떻게 수신확인이 처리되는지 알지 못했다. 이번 기회에 어떤 원리로 수신확인이 처리되는지 알아보고자 한다. ▶ 수신확인 원리 일반적으로 이용하는 '수신확인' 기능은 메일 본문내용에 보이지 .. 2021. 4. 26. 이전 1 2 다음
