배꼽파지 않도록 잘 개발해요

fetch 함수와 비동기 실행 • 동기 실행 : 코드를 순차적으로 한 줄씩 실행하는 방식 • 비동기 실행 : 코드를 순차적으로 진행하지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 시작하는 방식 console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 여기서 then 메소드는 콜백을 등록만 함. then 메소드가 콜백을 등록하면 바로 console.log('End')가 실행됨. 서버에 response가 도착하게 되면 등록해두었던 콜백..

◆ 움직이는 웹사이트 제작 ◆ 반응형 웹사이트 제작 ◆ 움직이는 웹사이트 제작 CSS3에 등장한 속성 = Transform, Transition, Animation Transform 특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용 transform 속성은 순서대로 적용되는 것이 아니라, 가장 마지막에 적용된 속성만 적용되는 특성임. → 만약 모든 transform 속성을 적용하려면 여러 개의 transform 속성을 한 줄에 모두 적기 • rotate(45deg); 평면회전, 입력한 각도만큼 회전, 음수도 입력 가능 (-45deg) • scale(2, 3); 비율만큼 확대, 숫자는 비율을 의미, width를 2배, height를 3배 확대..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 fetch 함수 구글 홈페이지를 볼 수 있는 이유 웹 브라우저가 구글 홈페이지를 제공하는 서버에 어떤 요청을 보냄 → 서버가 보내 준 응답(코드 덩어리)을 받아서 해석해줌 fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); 구글 화면을 구성하는데 필요한 HTML과 자바스크립트 코드들 • Request : 웹 브라우저가 서버로 보내는 요청 • Response : 서버가 다시 보내지는 응답 fetch · 서버로 리퀘스트를 보내고 리스폰스를 받는 함수 .then((response) ..

◆ 웹사이트의 정보와 디자인 ◆ 웹사이트 레이아웃에 영향을 미치는 요소 ◆ 웹사이트의 정보와 디자인 웹을 구성하는 요소 · HTML : 정보 or 설계도 · CSS : 디자인 or 스타일링 · JavaScript : 기능과 효과 웹사이트 제작시 고려 사항 · 웹 표준 : 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격, 강제성은 없으나 검색엔진 최적화에 도움됨. · 웹 접근성 : 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식 · 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 HTML 기본 태그 HTML · Hyper Text Markup Language · 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 · 버전..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 이벤트 핸들러 등록하기 이벤트 핸들러를 등록할 때 가장 권장되는 방법 : addEventListener 하나의 요소에 여러 개의 독립적인 이벤트 핸들러를 등록할 수 있음. Element.addEventListener('type', 'handler') Element.removeEventListner('type', 'handler') removeEventListener 메소드는 파라미터로 전달하는 타입과 이벤트 핸들러가 addEventListener 메소드로 등록할 때와 동일할 때만 이벤트 핸들러를 삭제할 수 있음. // 이벤트 등록하기 let btn = document.querySelector('#myBtn'); // btn.o..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 id로 태그 선택하기 document.getElementsById('id') → id에 해당하는 태그 하나 const myTag = document.getElementById('id'); 존재하지 않는 id 넣으면 null이 리턴됨. const myTag2 = document.getElementById('no_id'); consoel.log(myTag2) // null class로 태그 선택하기 document.getElementsByClassName('class') → class에 해당하는 태그 모음(HTMLCollection) 유사배열 형태로 출력됨. 배열의 형태이지만 완벽한 배열은 아님. · splice, push같은 배..

◆ 시험 정보 (사견 X) ◆ 시험 후기 (사견 O) ◆ 공부 방법 ◆ 도움되는 사이트 ◆ 요약 자료 SQL 개발자 시험 정보 • SQL 개발자 = SQL Developer = SQLD • 국가공인자격 / 한국데이터산업진흥원 주관 • 필기 시험 합격 후 자격증 취득 가능 (실기 없음) • 개설 횟수 : 1년에 4회차씩 • 자격증 유효기간 : 2년 (취득일 1년 6개월 이후부터 보수교육 시 연장 가능) • 입실 : 9시 40분까지 입실 / 20분 안내 후 10시부터 시험 시작 • 퇴실 : 시험 시작 30분 후 퇴실 가능 • 준비물 : 신분증, 필기도구(없으면 빌려줌) • 합격기준 : 총점 60점 이상, 과목별 40% 미만 취득 • 응시료 : 50,000원 • 유형 : 시험 후기 보통 데이터분석에 관심이 많..

◆ 시험 정보 (사견 X) ◆ 시험 개요 및 팁 (사견 O) ◆ 공부 방법 • 필기 • 실기 ◆ 도움되는 사이트 ◆ 하이퍼리얼리즘 고사장 시험 후기 ◆ 요약 자료 네트워크관리사 2급 시험 정보 • 공인민간자격 - 2002년 1월 10일 국가공인 자격획득 • 필기 합격 후 2년 이내 실기 응시 가능 • 개설 횟수 : 1년에 필기/실기 4회차씩 • 자격증 유효기간 : 5년 (만료 전에 안내대로 보수교육 시 연장 가능) • 입실 : 9시 20분까지 입실 / 10분 안내 후 9시 30분부터 시험 시작 • 퇴실 : 시험 시작 20분 후 퇴실 가능 • 준비물 : 랜툴 (시험장에서 빌려주는 것은 성능이 좋지 않아 개인 지참이 권장됨), 가위, 피복기 • 필기 : 50문제 / 50분 / 각 과목별로 5~18문항씩 출제..

자바스크립트에서 실행 시간을 측정하는 것은 코드의 성능을 평가하고 최적화하는 데 도움이 된다. 이를 통해 어떤 부분이 느린지 파악하고, 개선이 필요한 부분을 찾아낼 수 있다. 프로그래머스로 문제를 풀다보니 실행 시간을 측정하고 싶어서 방법이 없을까 생각하다보니 몇 가지 방법을 알게 되었다. 크게 Date console.time()과 console.timeEnd() performance.now() 를 활용하는 세 가지 방법이 있다. Date Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담고 있다. 이를 활용하여 시작 시각과 종료 시각의 차를 계산할 수 있다. const start = new Date(); // 시작 function soluti..

주사위의 개수 문제 설명 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. 제한사항 box의 길이는 3입니다. box[0] = 상자의 가로 길이 box[1] = 상자의 세로 길이 box[2] = 상자의 높이 길이 1 ≤ box의 원소 ≤ 100 1 ≤ n ≤ 50 n ≤ box의 원소 주사위는 상자와 평행하게 넣습니다. 입출력 예 box n result [1, 1, 1] 1 1 [10, 8, 6] 3 12 풀이 1 상자의 각 ..