🍓𝗪𝗲𝗯
-
[React] create-react-app으로 리액트 프로젝트 생성하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 2. 11:23
1. node.js 최신 설치 2. npx create-react-app blog 터미널에 npx create-react-app blog하여 blog라는 이름의 리액트 프로젝트를 생성한다. create-react-app은 리액트가 셋팅이 완료된 환경이다. npx 명령은 node.js가 설치되어 있으면 할 수 있는 명령이다. 3. npm start || yarn start 미리보기 띄워보고 싶으면 npm start를 입력한다. yarn은 1.xx버전을 설치하는 것이 좋다. (인터넷에 yarn1로 검색하면 됨!) yarn이 npm이나 npx보다 더 빠르게 설치해주는 고마운 툴이다! 설치 후에 yarn --version으로 잘 설치되었는지 확인하면 된다. 👍🏻 4. App.js 메인페이지에 들어갈 HTML을 ..
-
SPA란?🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 8. 20. 16:28
2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 다시 그리는 방식이었다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script 태그에 넣는 것만으로도 충분했다. ajax가 유행했을 때는 자바스크립트의 비중이 조금 더 커졌지만, 페이지 당 자바스크립트 파일 몇 개면 충분했다. SPA(Single Page App)는 하나의 html에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않는다. html에 script 태그를 여러개 추가하여 작업하다면, 계속해서 늘어나는 자바스크립트 파일을 관리하기 힘들다. 또한, 선언되는 순서도 신경써야하고, 기존에 생성된 전역 변수를 덮어쓰는 위험도 존재한다. webpack은 여러 개의 자바..
-
[CSS3] nth-child(), nth-of-type()🍓𝗪𝗲𝗯/𝖢𝖲𝖲 2021. 7. 15. 12:52
nth-child() E:nth-child(n) 부모의 n번째 자식인, E요소 nth-of-type() E:nth-of-type(n) 같은 유형의 n번째 형제인, E요소 n값에는 키워드, 정수, 공식이 들어갈 수 있다. 키워드 : even(짝수), odd(홀수) 정수 : 양수, 음수, 또는 0 공식 : an+b 1. 나는 p 2. 나는 span 3. 나는 p 4. 나는 span 5. 나는 p 위의 상태에서 아래와 같은 css를 적용하면?! p:nth-child(3) { color: red; } p:nth-of-type(3) { color: blue; } span:nth-child(1) { color: green; } 2번째 경우에서 p:nth-of-type(3)이기 때문에, p의 형제 중 3번째이므로 5..
-
JavaScript padStart() padEnd()로 채우기🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 14. 11:31
padStart() padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다. str.padStart(targetLength [, padString]) 으로 사용한다. padString을 입력하지 않으면 공백으로 채워진다. padEnd() padEnd() 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 끝(우측)부터 적용된다. 예제 (출처: 제코베 자바스크립트 59번) 총 문자열의 길이는 50으로 제한하고 사용자가 문자열을 입력하면 그 문자열을 가운데 정렬을 해주고, 나머지 빈 부분에는 '='을 채워 넣어주세요. // 1..
-
JavaScript 정규식 활용 이메일 체크🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 13. 22:01
function isValidEmail(email) { // js email regex const re = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다. // Check email is valid function checkEmail(input) { // js email regex con..
-
JavaScript preventDefault()란?🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 13. 15:09
a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나, 창이 새로고침하여 실행된다. preventDefault 를 통해 이러한 동작을 막아줄 수 있다. 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 예제 const form = document.getElementById('form'); form.addEventListener('submit', function (e) { e.preventDefault(); console.log('submit'); }); preventDefault()를 하지 않을 경우, submit버튼을 누르면 submit이 consol..
-
[제코베/JavaScript] 42번. 2020년. 요일구하기, Date 객체🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 11. 14:22
1. 문제 2020년 1월 1일은 수요일입니다. 2020년 a월 b일은 무슨 요일일까요? 두 수 a, b를 입력받아 2020년 a월 b일이 무슨 요일인지 리턴하는 함수 solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN, MON, TUE, WED, THU, FRI, SAT 입니다. 예를 들어 a = 5, b = 24라면 5월 24일은 일요일이므로 문자열 "SUN"를 반환하세요. 제한 조건 2020년은 윤년입니다. 2020년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일 같은 날짜는 주어지지 않습니다.) 2. 나의 풀이 const day = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; const month = [..
-
JavaScript 특정 문자 치환 방법: replaceAll 함수사용과 정규식을 사용한 replace()🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 10. 11:35
1. replaceAll() 함수 사용 replace는 첫번째 문자만 바꿔주기 때문에, 문자열에 있는 모든 특정문자를 치환하기 위해서는 replaceAll을 사용해야 한다. function replaceAll(str, searchStr, replaceStr) { return str.split(searchStr).join(replaceStr); } 2. 정규식 사용 replace(/o/g, "*") : o를 *로 전체 치환한다. replace(/o/gi, "*") : o를 *로 대/소문자 구분 없이 전체 치환한다. g: 발생할 모든 pattern에 대한 전역 검색 i: 대/소문자 구분 안함 특수문자 치환 시 \를 붙여주어야 한다. 관련문제 : 제코베 자바스크립트 39번. 오타 수정하기 혜원이는 평소 영타가..