본문 바로가기

전체 글

(JS/JQuery) 전체화면, 특정 요소의 스크롤 위치 퍼센트 계산하기 기본적으로 위치 퍼센트 계산은 { (현재 스크롤 상단 위치좌표) / (스크롤 길이를 제외한 기준 스크롤 높이값) * 100 } %가 됩니다. 예를 들어서 봅시다. 스크롤 길이를 제외한 기준 스크롤 높이값을 100이라고 해봅시다. (편의상 이하 예시에선 기준 스크롤 높이값으로 줄여 말합니다.) 현재 스크롤이 최상단에 있으면 - 상단 위치좌표 = 0 - 기준 스크롤 높이값 = 100 으로 결과값은 0/100*100 = 0%가 됩니다. 좀 더 움직여서 스크롤을 반쯤 움직였습니다. 그러면 - 상단 위치좌표 = 50 - 기준 스크롤 높이값 = 100 으로 결과값은 50/100*100 = 50% 가 됩니다. 그럼 이제 코드를 봅시다. 1. 전체 화면의 스크롤 위치를 계산할 때 기준 스크롤 높이값은 '문서 높이'와 .. 더보기
Git 자주쓰는 명령어 업로드 관련*스테이징git add 파일명git add . //모든 수정파일 스테이징*메모포함 커밋git commit -m "할말"*저장소에 올리기git push origin 브랜치명 다운로드 관련*저장소에서 받아오기 전 변경사항 확인 git fetch 브랜치명*저장소에서 받아오기git pull origin 브랜치명상태, 기록 관련*상태체크git status *로그 한줄로 보기git log --oneline*로그 최근 n개만 보기git log -n변경사항 관리*로컬에서 add 취소 (unstage로) git reset *로컬에서 커밋 취소 (기존 커밋 내역은 stage 상태로)git reset --soft HEAD^*특정 파일만 변경사항 되돌리기$ git checkout -- 파일명 *현재 연결된 저장소.. 더보기
반응형 웹 단계별 해상도(나누는 크기 기준) 1. 모바일: 320~767px 2. 타블렛/랩탑: 768~1199px 3. PC: 1024px~ 또는 1200px~ 각 기기별로 화면 볼 수 있는 사이트 http://responsive.pixeltuner.de/ 모바일 디바이스별 개발 해상도 및 Pixel Ratio 정리글 (2019 기종) https://www.burndogfather.com/185 Pixel Ratio 계산방법 https://feel5ny.github.io/2018/05/13/mediaQuery_01/ +모바일 웹 작업 시, 양손 터치 기능 가능/불가능 여부 신경써야함. +iOS는 숫자 클릭 시 전화걸리는 경우 있음. 더보기
[React] 리액트 Attempted import error: './App' does not contain a default export (imported as 'App') 에러 리액트 연습 프로젝트 중 이런 오류가 발생했는데 검색해보면 왠지 잘 안나오길래 백업 겸 써둔다. 알고보니 기본 생성되는 App.js에서 뒷부분 코드를 지우다가 export default App; 을 삭제해버려서 그런거였다. 문장 그대로 default export가 없을 때 뜨는 에러인 듯 하다. 해당 코드를 다시 추가해주니까 해결되었다. 더보기
JS ES5+ 정리 노트 ✔ 데이터 타입 Data Type 변수 - JS는 Dynamic Typing 언어. 변수 선언 시 타입을 선언하지 않으며, 런타임에 타입이 결정됨. 변수에 넣어진 값에 따라 타입이 중도 변경됨. * var - 선언되지 않아도 에러없이 undefined로 값을 넣어서 나옴 - var hoisting 때문에 값부터 넣고 선언해도 값이 나옴. (어디에 선언했든 상관없이 선언을 끌어올려줌.) - block scope가 없음. * let (ES6에서 추가) - Mutable Datatype (r/w) - block scope가 있음 : block 안에서 선언된 변수는 바깥에서 변수 접근 불가 *const (ES6~) - Immutable Datatype (r) - 값을 할당 후 변경하지 않는 데이터는 여기에 - .. 더보기
VS Code 단축키 / 숏컷 -개인 백업용, 수시 갱신됨 ▶해당 줄 위아래 라인으로 이동 : alt + 방향키(↑또는 ↓) ▶해당 줄 복붙 : Shift + alt + 방향키(↑또는 ↓) ▶여러 라인에 동시 커서 놓기 : Ctrl+ alt + 방향키(↑또는 ↓) 또는 alt+마우스로 원하는 곳 클릭 ▶해당 줄 주석 처리 : Ctrl + / ▶이전 커서 위치로 커서 이동 : Ctrl + U ▶해당 줄 중간에서 끝줄 엔터+아래줄로 넘어가기 : Ctrl + Enter ▶Tab키 반대방향 작용 (=들여쓰기 레벨 낮추기) : Shift+Tab ▶블록한 라인들 끝에 커서 놓기 : Shift+Alt + I 또는 Shift+Alt +마우스 드래그 ▶블록한 요소와 같은 이름의 요소 선택 : (블록잡은 상태에서) Ctrl+D (커맨드 반복입력) ▶C.. 더보기
SQL 주요 개념 정리 -전부 정리된 건 아님. 공부하면서 추가/수정중 - 코드에서 [ ] 표기는 선택적으로 들어가는 부분, | 표기는 OR의 의미로 쓰임. SQL (Structured Query Language) : 관계형 데이터베이스 관리 시스템(RDBMS)의 데이터를 관리하기 위해 만들어진 프로그래밍 언어. 문법 종류와 주요 명령어 데이터 정의어 (DDL, Data Definition Language) : DB의 구조를 정의함. CREATE : 테이블 생성 ALTER : 테이블 수정 DROP : 테이블 삭제 (테이블 구조까지 아예 삭제됨, 롤백 불가) TRUNCATE : 테이블의 모든 행 삭제 (테이블 구조는 그대로, 데이터만 삭제) 데이터 조작어 (DML, Data Manipulation Language) : DB의 레.. 더보기
[자료구조] 재귀 재귀(Recursion) : 자신을 정의할 때 자기 자신을 재참조 하는 것. 즉, 재귀 함수 : 함수 내에서 자기 자신을 다시 호출하는 함수. 어려운 문제를 단순화하는 데에 종종 사용된다. Q. 완료되지 않은 함수를 다시 호출하는 것이 가능한가? A. 함수 실행 중 다시 해당 함수가 호출될 시, 해당 함수의 복사본이 하나 더 만들어져서 복사본이 실행된다. 따라서 가능하다. 재귀 함수가 활용되는 대표적인 예시 - 팩토리얼, 피보나치 수열, 하노이 타워 더보기

티스토리툴바