開發時習之

Comment tagged templates 문자타입으로 CSS, HTML 코드를 변수에 선언해도 코드하이라이트가 생겨서 가독성에 도움이 된다. 사용법은 한줄 주석을 따옴표 앞에 넣고 해당 언어로 선언하면 된다. Auto Rename Tag 태그 수정시 앞에만 수정해도 뒤에 닫히는 태그가 알아서 변경된다. vscode-styled-components styled-components의 경우 백틱 안에 문법을 작성하기 때문에 자동 완성이 안되는 단점이 있는데 이를 해결해준다.

git 협업 팀장역할 organization 생성 plan 선택 (무료) organization account name 설정 팀원 추가 (invite member/ role은 Member로 선택) Repository 생성 (팀장) public add README file MIT License 추가 remote에 develop 브랜치 생성 환경설정(.gitignore) 개발환경설정 (팀장) $ git clone 주소 $ git branch # main 위치인지 확인 # git flow 시작 $ git flow init # develop 브랜치 생성 확인 # feature 시작: 이름은 임의로(proj-init) $ git flow feature start proj-init # .gitignore 설정 (참..

Git 기본용어 blob: 소스나 파일등의 수정사항 tree: 수정사항에 대한 부가정보(누가, 언제, 무엇을 수정했는지) / 수정일시를 조작가능함 commit: 일종의 스냅샷 remote: 원격저장소(ex, github, bitbucket, gitlab 등) local: 본인 컴퓨터 저장소 head: 마지막 작업했던 커밋 fetch: 참고하여 받는 주소 push: 내가 업로드하는 주소 git과 github는 동일의미가 아님 git방식을 사용하여 소스관리를 하고 소스를 저장하는 저장소 중 하나가 github임 본인 플로우따라 일을 할 수 있도록 localrepo가 존재함 (add, commit, push 순으로 진행하면 문제없음) git설치확인 $ git -v git환경설정 리스트 $ git config ..

메가바이트 스쿨 FE4기 2차 과제 수행 기록 🎬 영화검색 OPEN MOVIE DATABASE (OMDB) API를 활용한 검색기능 구현 참고: https://omdbapi.com/ 기본 10건씩 검색결과만 조회되는 API이기 때문에 저장, 삭제기능은 없음 ❗ 필수 영화 제목으로 검색 가능하고 검색된 결과의 영화 목록이 출력돼야 합니다. jQuery, React, Vue 등 JS 라이브러리와 프레임워크는 사용하지 않아야 합니다. 스타일(CSS) 라이브러리나 프레임워크 사용은 자유입니다. ❔ 선택 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보세요. 영화 개봉연도로 검색할 수 있도록 만들어보세요. 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요. 무한 스크롤 기능을 추가해서..

Date 개요 new Date()를 통해 반환되는 인스턴스를 '타임스탬프'(Timestamp)라고 합니다. 날짜,시간까지 표시함 const date = new Date() console.log(date) // 'Sat Jan 14 2023 22:49:02 GMT+0900 (Korean Standard Time)' console.log(typeof date) // 'object' 문자데이터처럼 생겼지만 오브젝트타입임 console.log(typeof 'Sat Jan 14 2023 22:49:02 GMT+0900 (Korean Standard Time)') // 'string' Date() 생성시 타임스탬프 형식으로 값을 넣어 타임스탬프를 초기화할 수 있음 const d1 = new Date(2022, 11..

Math Math.abs() 절대값(absolute)를 의미 주어진 숫자의 절댓값을 반환합니다. console.log(Math.abs(2)) // 2 console.log(Math.abs(-2)) // 2 Math.ceil() 주어진 숫자를 올림해 정수를 반환합니다. console.log(Math.ceil(3.1415926535)) // 4 const lastPageNum = Math.ceil(totalPage/10) Math.floor() 주어진 숫자를 내림해 정수를 반환합니다. console.log(Math.floor(3.1415926535)) // 3 Math.round() 주어진 숫자를 반올림해 정수를 반환합니다. const num1 = 3.141 const num2 = 3.768 console...

Number .toFixed() 숫자를 지정된 고정 소수점 표기(자릿수)까지만 표현하는 문자로 반환합니다. 문자타입으로 반환하기에 숫자타입으로 변경시 parseFloat() 사용해야 함 const num = 3.1415926535 console.log(num.toFixed(2)) // '3.14' console.log(parseFloat(num.toFixed(2))) // 3.14 .toLocaleString() 숫자를 현지 언어 형식의 문자로 반환합니다. 숫자데이터에 붙여서 사용한다 const num = 1000000 console.log(num.toLocaleString()) // '1,000,000' console.log(`${num.toLocaleString()}원`) // '1,000,000원'..

String .length 문자의 길이(숫자)를 반환합니다. const str = 'Hello world!' //모노스페이스(고정너비 글꼴) // 012345678901 console.log(str.length) // 12 .includes() 대상 문자에 주어진 문자가 포함되어 있는지(불린) 확인합니다. const str = 'Hello world!' console.log(str.includes('Hello')) // true console.log(str.includes('Hello', 0)) // true 위에 내용과 동일 찾기 시작할 위치를 두 번째 인수로 추가할 수 있습니다. 기본값은 0입니다. 입력받은 인수의 시작위치로부터 문자를 찾음 const str = 'Hello world!' // 012..