iOS에서 팝업 클릭 시 body {overflow:hidden;} 을 해도 전체 콘텐츠가 움직이는 문제를 볼 수 있었다.또한 gnb 아코디언에서 스크롤 할 시 콘텐츠화면의 스크롤이 움직인다는 문제를 통해 내가 찾은 해결방법을 적어 본다.🤔 왜 body에 overflow:hidden 을 해도 적용이 안될까?터치 제스처 우선순위iOS는 사용자의 터치 스크롤 제스처를 "최우선"으로 처리한다. 사용자가 손가락으로 화면을 밀면 브라우저는 스크롤이 하고 싶다고 판단하여 배경을 밀어버린다.(이걸 탄성 스크롤/Elastic Scrolling 이라고 부른다)문서 높이 인식iOS Sfari는 body의 높이를 고정하더라도 뷰포트(화면창) 밖으로 나가는 콘텐츠가 있다면 터치로 끝까지 보여주려고 한다.body에 posi..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. 표현식 본문(Expression Body)중괄호 없이 한 줄로 함수 본문을 작성하는 형태함수를 호출하면 해당 표현식의 결과가 자동으로 반환(`return`)된다.const add = (a, b) => a + b;console.log(add(2,3)); // 52. 블록 본문(Block Body)중괄호 `{}`로 함수 본문을 감싼 형태여러 줄의 코드를 작성 가능, 반드시 무엇을 반환할지는 블록 내의 `return`문으로 직접 지정해야 한다.const add = (a, b) => { const sum = a + b; return sum;}console.log(add(2,3)); // 5위 코드에서 중괄호가 있으므로 `return`을 안 쓰면 자동 반환이 되지 않는다.

1. 타입스크립트 소개와 개념 이해타입스크립트란? (JS의 슈퍼셋)타입스크립트의 장점과 필요성1-1. 타입스크립트란?자바스크립트의 슈퍼세(상위 호환)언어로, 자바스크립트에 정적 타입 검사 기능을 추가한 언어기존 자바스크립트 문법을 거의 그대로 사용하면서 타입을 명시할 수 있고, 컴파일 시 타입 오류를 사전에 잡을 수 있다.타입스크립트 코드(`.ts`) 는 자바스크립트 코드(`.js`)로 변환(트랜스파일)되어 실행된다. 1-2. 왜 타입스크립트를 사용할까자바스크립트는 동적 타입 언어라 변수에 어떤 타입이든 할당 가능하며 런타임에서 타입 에러가 발생할 위험이 높다.타입스크립트는 컴파일 단계에서 타입 오류를 미리 검사해, 코드의 안정성과 품질을 높여준다. 1-3. 타입스크립트 주요 특징정적 타입 언어 : 변수..

타입스크립트 소개와 개념 이해타입스크립트란? (JS의 슈퍼셋)타입스크립트의 장점과 필요성기초 타임(Primitive Types)string, number, booleannull, undefined, any, unknow변수 선언과 타입 주석(Type Annotations)let, const 와 타입 명시하기타입 추론 이해배열과 튜플(Tuple)배열 선언과 타입 지정튜플로 고정 길이 배열 다루기함수의 타입 지정매개변수와 반환값 타입 선언선택적 매개변수, 기본값, 나머지 매개변수객체 타입과 인터페이스(Interface)객체의 타입 구조 정의인터페이스 사용법과 확장성유니온(Union)과 교차(Intersection) 타입여러 타입 중 하나타입 합성하기타입 별칭(Type Alias)type 키워드로 타입 재사용..

폴더 안에 많은 파일명들을 가져오고 싶을 때 찾는 방법이다. 1. 터미널로 들어가 해당 폴더로 들어가기cd 폴더경로 2. 파일 리스트 저장ls > 파일목록.txt`ls`로 현재 폴더의 파일명을 '파일목록.txt'에 저장해준다. 2-1. 하위 폴더까지 모두 포함하고 싶으면find . -type f > 파일목록.txt

1. state를 *불변(immutable)으로 다루길 원한다.react 내부는 state가 바뀌었는지 알아내기 위해 이전 상태와 새로운 상태의 참조(주소비교)만 확인한다.만약 객체나 배열을 직접 수정(또는 변경)했다면 기존과 같은 참조를 유지해 react가 상태변화 감지를 못한다. 2. 직접 변경하지 말고 새로운 상태 객체로 교체해야 하는 이유상태가 바뀌면 react는 리렌더링(재렌더링)해야 한다.하지만 react는 이전 상태와 새 상태가 같은 객체면 "변경 없음"으로 간주하여 리렌더링하지 않는다.상태를 직접 변경하지 않고, 기존 상태를 복사해서(...spread 연산자 등 사용) 새 객체로 만들어 변경사항 반영해야 한다. 3. 불변으로 유지하는 것의 장점이유설명상태 불변성 유지기존 객체 변경 대신 ..