ETC

[이슈노트] iOS 이슈 모음 #8 (14 이하에서 gap 이슈)

최근 iOS 14 이하 버전에서 Gap이 적용되지 않는 문제가 발생했다. 😥 이미 모든 작업은 완료된 상태였고, iOS 14.6에서는 문제가 없다고 판단하여 이슈를 놓쳤다. 다행히, 다른 환경에서는 문제가 없었기 때문에 대규모 수정보다는 부분적인 수정을 선택했다. 이를 위해 @supports를 활용하여 iOS에만 해당되는 CSS를 작성하기로 결정했다. 예를 들어, -webkit-touch-callout은 iOS에서만 적용되며, translate: none은 macOS와 iOS의 Safari 14.1 이후부터 적용된다. 따라서 이 두 가지를 결합하여 다음과 같은 @supports 규칙을 만들 수 있다. @supports (-webkit-touch-callout: none) and (not (translat..

[알고리즘] ChatGPT 와 함께하는 알고리즘 풀기3

배열에서 중복된 요소를 찾아내는 함수를 작성해보세요. 문제) 주어진 배열에서 중복된 요소를 찾아내어 배열로 반환하는 함수를 작성하세요. 함수는 배열을 받아 중복된 요소들로 이루어진 새로운 배열을 반환해야 합니다. 예를 들어, 다음과 같은 배열이 주어졌다고 가정합니다. const numbers = [1,2,3,4,2,7,8,1,9]; 이 배열에서 중복된 요소는 1,2 입니다. 따라서 함수는 [1,2] 배열을 반환해야 합니다. 함수의 시그니처를 다음과 같아야 합니다. function findDuplicates(arr) { } 풀이) function findDuplicated(arr) { // 중복된 요소를 저장할 배열 초기화 const duplicates = []; // 배열을 반복하면서 중복된 요소 찾기 ..

[알고리즘] ChatGPT 와 함께하는 알고리즘 풀기2

배열에서 최대값을 찾는 함수를 작성해보세요. 문제) 주어진 배열에서 최대값을 찾아서 반환하는 함수를 작성하세요. 함수는 배열을 받아서 최대값을 반환해야 합니다. 예를 들어, 다음과 같은 배열이 주어졌다고 가정합니다. const numbers = [3,7,1,9,4,6,8,2,5]; 이 배열에서 최대값은 9입니다. 따라서 함수는 9를 반환해야 합니다. 함수의 시그니처는 다음과 같아야 합니다. function findMax(arr) { } 풀이) function findMax(arr) { // 1. 최대값을 저장할 변수를 초기화 합니다. let max = arr[0]; // 2. 배열을 순회하면서 최대값을 찾습니다. // 시작 인덱스를 1로 설정한 이유는 이미 'max'를 배열의 첫 번째 요소로 초기화했기 ..

[알고리즘] ChatGPT 와 함께하는 알고리즘 풀기1

Q. 자바스크립트 알고리즘 문제 내줘 GPT: 물론이죠! 간단한 자바스크립트 알고리즘 문제를 하나 드리겠습니다. 이 문제는 배열과 반복문을 사용하여 풀 수 있습니다. 문제) 주어진 배열에서 모든 홀수를 찾아서 그 값을 모두 더하는 함수를 작성하세요. 함수는 배열을 받아서 홀수들의 합을 반환해야 합니다. 예를 들어, 다음과 같은 배열이 주어졌다고 가정합니다. const numbers = [1,2,3,4,5,6,7,8,9,10]; 이 배열에서 홀수는 1,3,5,7,9 입니다. 따라서 함수는 이 홀수들의 합인 25를 반환해야 합니다. 함수의 시그니처는 다음과 같아야 합니다. function sumOfOdds(arr){ } 이 문제를 풀어보세요! 풀이) function sumOfOdds(arr) { // 1. ..

[자바스크립트] 원시값과 참조값 이해하기

왜 원시값과 참조값은 볼때마다 초면일까?... 이해할때까지 보고 또 보고 정리할거다. 원시값(Primitive Values) 개념 원시값은 하나의 단순한 값으로, 텍스트, 숫자, 불리언 등이 있다. 이 값들은 하나의 상자에 넣어서 보관할 수 있다. 특징 불변성: 한 번 상자에 넣은 값은 바꿀 수 없다. 새로운 값을 만들려면 새로운 상자를 만들어야 한다. 변수 간 복사: 값을 할당할 때 값 자체가 복사된다. 종류 문자열(String) 비유: 한 개의 단어가 적힌 종이 특징: 종이에 다른 단어를 적으면 새로운 종이가 필요하며, 한번 적힌 단어를 수정할 수 없다. 숫자(Number) 비유: 숫자가 적힌 계산기 디스플레이 특징: 계산기에 다른 숫자를 입력하면 현재 디스플레이에 있는 숫자는 그대로 남아 있고, 새..

[이슈노트] iOS 이슈 모음 #7 (구버전에서 swiper 터치 슬라이드 이슈)

ios 사파리에서 swiper 터치 슬라이드가 작동하지 않음 해결 👉 swiper 다운그레이드 기존: 9.1.0 의 최신 버전 사용 변경: 5.4.3 버전 사용

[이슈노트] iOS 이슈 모음 #6 (letter-spacing, position: sticky, label 텍스트 줄바꿈)

IE가 떠났더니 아이폰 5S 가 기다리고 있는 현실 1. letter-spacing 이슈 텍스트 자간을 letter-spacing으로 조절했는데 아이폰 5S 에서만 안먹는 이슈 발생 text-rendering:optimizeSpeed > 해결 MDN에서는 해당 css를 이렇게 설명한다. optimizeSpeed 브라우저는 텍스트를 그릴 때 가독성과 기하학적 정밀도보다 렌더링 속도를 강조합니다. 커닝과 합자를 비활성화합니다. 왜 letter-spacing 이 안먹었는지 알 수 없으나.. text-rendering:optimizeSpeed 를 넣어주면서 렌더링에 무슨 영향을 끼쳐서... letter-spacing이 먹게 된걸까..? 알 수 없다.. 2. position: sticky 이슈 아이폰5S에서만 안..

[자바스크립트] 객체

4장 객체와 배열, 함수의 기초 자바스크립트는 원시 타입을 제외한 나머지는 참조타입(객체 Object)이다. 배열, 객체, 함수가 대표적이다. Object의 데이터 자체는 별도의 메모리 공간(heap)에 저장되며, 변수에 할당 시 데이터에 대한 주소(힙 Heap 메모리의 주소값)가 저장되기 때문에 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근하게 된다. 객체는 객체 리터럴과 생성자로 생성할 수 있다. 4.1 객체의 기초 ①객체 리터럴 객체는 데이터 여러 개를 하나로 모은 복합 데이터이다. 객체에 포함된 데이터 하나(key, value 쌍)를 가리켜 객체의 프로퍼티라고 부른다. 프로퍼티의 이름 부분을 프로퍼티 이름 또는 키라고 부른다. let card = { suit: "..

[이슈노트] iOS 이슈 모음 #5 (가로모드 여백, 확대)

1. 사파리에서 가로모드일 때, 사이트 양쪽에 여백이 생기는 이슈 이거 뭐람..? 사파리는 왜 자꾸 혼자 놀지..?? 해결 방법은 생각보다 간단하다. 위와 같이 뷰포트에 viewport-fit=cover 를 추가해주면 된다. 참고 : https://webkit.org/blog/7929/designing-websites-for-iphone-x/ Designing Websites for iPhone X The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. webkit.org 2. 사파리에서 확대되는 이슈 ios 에서는 더이상 뷰포트 user-scalable=no 를 ..

[이슈노트] iOS 이슈 모음 #4 (tel)

ios 사파리에서010-1234-5678 걸지 않은 넘버 텍스트에 자동으로 전화 연결이 걸린다.그러면서 내가 적용하지 않은 스타일이 먹히면서 스타일이 어긋날때가 있다. ios 사파리에서는 자기가 봤을 때 전화번호 같으면 바로 스타일과 기능을 강제로 추가하나보다.어쩔때는 좋지만 어쩔때는 필요없는 기능. 그래서 그때는 메타태그에 아래를 추가해주면 된다.