All

[이슈노트] 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..

[git hub] 브랜치 관리

git 브랜치 관리를 생각하면 머리가 지끈하다. 그래서 GPT에게 물어봤다.. Git에서는 여러 종류의 브랜치가 있을 수 있습니다. 이들은 주로 개발 및 협업 목적에 따라 구분됩니다. 가장 일반적인 종류는 다음과 같습니다 Main Branch (주 브랜치): master: 과거에는 Git의 기본 주 브랜치였지만, 현재는 대부분의 프로젝트에서 main으로 이름을 변경하여 사용합니다. main: 최근에는 main으로 브랜치 이름을 사용하는 추세가 높아지고 있습니다. 이는 다양한 이유로, 주로 인종적이거나 문화적인 이유로 인해 master 용어가 변경되었습니다. Feature Branches (기능 브랜치): 새로운 기능을 개발하는 데 사용되는 브랜치입니다. 각 기능은 개별적인 브랜치에서 작업되며, 완료 후에..

[피그마] 퍼블리셔가 피그마 사용하기

작업환경: 윈도우 기존의 글 퍼블리셔가 제플린 사용하기에 이어 피그마 사용하기를 정리했다. 사실 피그마는 제플린보다 더 간단하다! 디자이너가 작업해 놓은 피그마 대지를 열어서 원하는 이미지를 자르고, 추출하고,dev 환경에서 스타일을 보면 끝이다. 자주쓰는 단축키 ctrl + shift + \ : 왼쪽 사이드 네비 on/off ctrl + \ : 왼쪽,오른쪽 사이드 네비 on/off shift + D : 개발자 모드 shift + 0 : 100% 화면 보기 alt + shift + A : 오토 레이아웃 해제 이미지 슬라이스 보통 이미지 추출할 때 Export로 하지만, 내가 원하는 스타일을 입히기 위해 디자인 되어져 있는 이미지 이상의 것이 필요할 때가 있다. 제플린에서는 해당 기능이 없어서 매번 디자이..

[알고리즘] 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) 비유: 숫자가 적힌 계산기 디스플레이 특징: 계산기에 다른 숫자를 입력하면 현재 디스플레이에 있는 숫자는 그대로 남아 있고, 새..

[gulp] include + sass + watch 초간단 셋팅하기

node -v v18.12.0 gulp -v CLI version: 2.3.0 Local version: 4.0.2 1. 터미널을 연다. 2. 경로는 작업할 폴더를 향하게 한다. 3. html, scss 환경이다. 🤗 gulp 환경 셋팅 //package.json 생성 배포할 때 반드시 필요한 파일이다. //별다른 값이 없으면 계속 엔터친다. npm init //gulp를 전역적으로 설치한다. 최초 1회만 하면 된다. npm i gulp -g //해당 폴더에서 gulp를 로컬 설치한다. npm i gulp --save-dev //또는 npm i gulp -D //gulp가 잘 설치되었는지 버전 확인한다. gulp -v 🤗 필요한 패키지 설치 //인클루드 설치 npm i gulp-file-include -..

[자바스크립트] filter

자바스크립트의 'filter()' 함수는 배열을 순회하면서 주어진 조건에 따라 요소를 걸러내는 메서드이다. 이 함수를 사용하면 배열을 필터링하여 새로운 배열을 만들 수 있다. Array. 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. - mdn 👉 얕은 복사 생성? 인스턴스의 filter() 메서드는 배열에서 특정한 조건을 만족하는 요소들을 선택하여 그 요소들로 이루어진 새로운 배열을 반환한다. 여기서 얕은 복사(shallow copy)한 개념이 사용된다. 얕은 복사는 원본 배열의 요소들을 복사하여 새로운 배열을 생성하지만, 그 요소들은 참조만을 복사한다는 뜻이다. 이 말은, 만약..

CSR과 SSR이란? 둘 의 장단점 비교

CSR과 SSR은 웹 개발에서 사용되는 두 가지 다른 방법으로 웹 페이지를 렌더링하는 방식을 말한다. 이 두 방식은 각각 클라이언트 측 렌더링(Client-Side Rendering, CSR)과 서버 측 렌더링(Server-Side Rendering, SSR)로 알려져있다. 각각의 방식은 그 동작 방식과 장단점이 다르며 특정한 사용 사례와 요구 사항에 따라 선택된다. 클라이언트 측 렌더링(CSR) CSR은 주로 싱글 페이지 애플리케이션(SPA)에서 사용되는 접근 방식이다. CSR은 웹 애플리케이션을 브라우저에서 렌더링하는 방식이다. 주로 JavaScript와 프론트엔드 프레임워크 또는 라이브러리(예: React, Vue, Angular)를 사용하여 구현된다. 클라이언트 측에서 모든 렌더링을 처리한다. 즉..