[JavaScript] 형변환

암시적 형변환문자열로 변환되는 경우문자열과 다른 데이터타입이 + 연산자로 만나면 문자열로 변환된다.let result = 1 + "2"; // "12"let result2 = "1" + true; // "1true" 숫자로 변환되는 경우let result = 1 - "2"; // -1let result = "2" * "3"; // 6  명시적 형변환Boolean 타입으로 변환Boolean() 을 사용한다. 변환할 데이터를 인자로 넣어주면 된다.false로 변환되는 값0, "", null, undefined, NaNtrue로 변환되는 값위의 값들을 제외한 값들, 빈 객체 { } 도 true String, NumberString(), Number() 에 변환할 데이터를 인자로 넣어준다.

• format_list_bulleted JavaScript
• · 2024. 7. 22.
• textsms

[Firebase] firestore 데이터 일부 수정하기 (updateDoc/JavaScript)

팀프로젝트에서 데이터를 관리하기위해 firebase를 사용하였다. 강의에서 데이터를 추가하고 받아오는 것만 배웠지 수정하는 건 처음이어서 혼란이 조금 있었다. 원래 맡은 역할은 데이터와 연관이 없었는데 담당한 구현 사항의 전반적인 틀을 잡아두고 팀원들이 고민하고 계신 데이터 수정 방법을 같이 알아보았다.  Firestore 초기화import { initializeApp } from 'firebase/app';import { getFirestore } from 'firebase/firestore';// firebase configuration 입력const firebaseConfig = { };// firebase 초기화 (initialize)const app = initializeApp(firebaseC..

• format_list_bulleted JavaScript
• · 2024. 7. 19.
• textsms

[jQuery] 페이지 첫 화면에서 메인 콘텐츠 부분으로 자동 스크롤하기

첫 팀 프로젝트로 멤버 소개 페이지를 만들기위해 레퍼런스를 찾아보다가 단색 배경에 크게 이름을 적어둔 포트폴리오를 발견했다.저런 형식으로 접속시 첫 화면에 꽉차게 한 눈에 들어오는 소개를 보여준 뒤 자세한 소개가 보이는 곳으로  자동 스크롤 하고싶다는 생각이 떠올랐다. 최종 결과처음엔 버튼을 눌렀을 때 자동 스크롤되는 기능만 구현했다가, 버튼을 누르지 않고 스크롤 하는 사람들도 자동 스크롤로 넘어가게 하고싶어서 기능을 추가했다.그러다가.. 한참을 여기에 매달리게되고... 괜한 욕심을 부렸나싶어서 조금 후회했다가 그래도 해보고싶어서 열심히 고민에 고민을 거쳐보았다..  해결한 문제들스크롤을 조금 내린 상태에서 버튼 클릭처음 시작할 때 버튼 클릭으로만 내려가는 것을 가정했다보니 위치를 이동시키는 함수에 시작..

• format_list_bulleted JavaScript
• · 2024. 7. 19.
• textsms

CORS 오류와 자바스크립트 모듈화

CORS 오류 해결자바스크립트 파일을 분리하기하던 중 일부 조원들은 분리한 기능이 정상적으로 작동하고 일부 조원들은 작동하지 않는 것을 발견했다. 작동하는 조원들은 공통적으로 라이브서버를 사용하고 있었는데, 알아보니 보안상 이유로 type="module" 속성이 붙은 스크립트는 로컬 환경에서 실행이 되지 않는다고 한다. 배포시에는 서버를 사용하기 때문에 라이브서버 환경에서만 되는 것이 큰 문제는 아니라는 피드백을 받아 우선은 다같이 라이브서버를 사용하기로 했다. 해결 방법1) (경우에 따라) module 속성 제거2) 라이브 서버 등 임시 서버 환경 사용 module이 뭔지 정확히 알아봐야겠다는 생각이 들어 좀 더 찾아보았다.  module분리된 파일 각각을 module이라고 부른다. 모듈은 파일 하나를..

• format_list_bulleted JavaScript
• · 2024. 7. 18.
• textsms

[JavaScript / jQuery] 특정 요소의 상/하단 위치 가져오기

화면을 가득 채운 메인 타이틀에서 컨텐츠가 있는 영역으로 자동스크롤 하는 기능을 구현하기 위해 요소의 하단 위치(스크롤이 이동할 위치)를 가져오는 방법을 알아보았다. JavaScript상단 위치 (top offset)위치를 가져올 요소를 지정한 뒤 offsetTop 프로퍼티로 가져올 수 있다.content 영역이 아닌 padding ~ border까지 포함된 가장자리 위치를 가져온다.const destination = document.querySelector(".dest").offsetTop; 하단 위치상단 위치에서 요소의 높이만큼 더해준다.요소의 높이는 offsetHeight 프로퍼티로 받아올 수 있으며, 마찬가지로 padding, border까지를 포함한다.const el = document.quer..

• format_list_bulleted JavaScript
• · 2024. 7. 16.
• textsms

[JavaScript] 특정 위치로 스크롤 이동시키기 (scrollTo)

본격 팀 프로젝트가 시작됐다!내가 해보고싶다한 기능을 구현하기위해 테스트를 해보다가.. 예상치못하게 참고한 코드들이 하나도 이해가 안돼서 ㅎㅎㅎ ㅠㅠ한참을 고민했다..일단 기반이되는 scrollTo()를 먼저 정리해보자! window.scrollTo()문서 내 특정 좌표로 스크롤을 이동한다!SyntaxscrollTo(x, y);scrollTo(({top: y, left: x, behaviour: option}); x, y값은 이동할 거리(단위: 픽셀), behaviour는 움직임에대한 옵션을 설정할 수 있다. behaviour 옵션smooth: 부드럽게 이동instant: 한번에 이동auto: smooth를 지원하지 않는 경우, 브라우저에서 지원하는 방식으로 스크롤 (대부분 목표 위치로 즉시 이동)beh..

• format_list_bulleted JavaScript
• · 2024. 7. 16.
• textsms