본문 바로가기

전체 글145

VanillaJS로 웹서비스 만들기 - 중간 검토1 HTML, CSS3, Javascript ES6까지 기본적인 개념을 배우고, 토이프로젝트까지 진행하였지만 구글링 그리고 여러 자료를 통해서 CSS  JS의 탄탄한 기본 개념이 신입을 뽑을 때 보는 중요한 요소라고 하여 이제까지 배운 바닐라JS으로만 하나의 괜찮은 서비스를 만들어보기로 하였다. 막상 프로젝트를 하다 보니 구현하고 싶은 기능들도 많고 해서 제작 기간이 점점 늘어나고 있지만 그만큼 많이 배우고 완성도 있는 프로젝트를 만들 수 있다고 생각이 든다. 주제 일단 이번 프로젝트의 주제는 축구 퀴즈 사이트이다. 지난 1년동안 재미있는 퀴즈 사이트가 많이 생겼다고 생각이 든다. 평소에 유튜브를 보면 재미있는 퀴즈 사이트를 통해 방송을 하는 유튜버들도 많았고 실제로 플레이해봤을 때 재미있는 경험을 했다... 2024. 3. 3.
CSS 전체 선택자에 color: white를 추가하고 구체적인 선택자에 다른 color로 바꿨을 때 "컴퓨터는 바보가 아니다. 에러를 해결했을 때 바보는 나였다는 것을 깨닳을 수 있을 것이다." - 지친케찹 CSS를 다루다보면 답답한 상황이 많이 일어난다. 이전 프로젝트를 진행하면서 전체 선택자 때문에 문제가 생겼다. 일단 전체 선택자는 항상 전체 페이지의 쓸모없는 여백을 비울때 사용하므로 밑의 코드를 거의 default로 적용한다. * { margin: 0; padding: 0; box-sizing: border-box; } 저번에 했던 실수가 전체 셀렉터에 color: white를 추가해주었다. 나는 더 작은 범위의 선택자에 갈 수록 똑같이 color설정을 바꾸면 더 구체적인 속성으로 바뀔줄 알고 코딩했는데 바뀌지 않아서 고생을 했다. 예를 들자면 body태그 안에 h1의 폰트 색깔만 yellow으.. 2024. 2. 28.
flex 개념, 특징 정리 flex는 페이지의 element들을 다양하게 배치할때 사용하기 좋은 속성이다. 일단 flex에 대해서 알아야할 2가지 중요한 특징이 존재한다. 1. flex container와 flex element flex를 사용하기 위해서는 2요소에 flex관련 특성을 설정하여야 한다. 첫번째는 element들이 정렬될 범위를 지정하는 flex container. 그리고 정렬될 element인 flex element이다. html으로 보면 아래와 같은 코드의 상황에서 flex를 사용한다. 1 2 3 4 5 이럴때 .container에 display:flex를 통해서 flex를 적용할 수 있다. .container { display: flex; } 2. main axis와 cross axis flex element들.. 2024. 2. 27.
[HTML/CSS/JS] to do list 만들어보기 회고 https://main--transcendent-bunny-41a741.netlify.app/ 노마드 코더의 바닐라JS 크롬 앱 만들기 수업을 듣고 복습 그리고 지금까지 배웠던 HTML, CSS, Javascript를 연습할 겸 수업에서 다루었던 프로젝트를 다시 한번 직접 제작해보았다. 사실 강의에서 기능들의 구현을 이미 상세하게 설명해주었기 때문에 대부분의 javascript에서 마주친 문제가 그렇게 크지는 않았다. 다만 강의에서 설명하지 않았던 기능 그리고 강의에서 설명해주었지만 다시 직접 구현할때 떠올리기 어려웠던 인사이트는 다시 한번 적어 남겨보도록 하겠다. 어려웠덤 점들 - Javascript 1. 정해진 날짜와 현재 시간과의 날짜 계산 해당 앱을 만들면서 오른쪽 상단에 내가 언제부터 프론트 기.. 2024. 2. 27.
ES6 Promise 연습문제 브금온! Q1. 태그의 이미지 로딩 성공시 특정 코드를 실행하고 싶다! Promise문법의 then, catch 함수를 사용해 싶습니다, 어떻게 코드를 짜면 될까요? 답: 더보기 resolve는 조건을 만족했을 때 사용되는 함수, reject는 반대이다. resolve를 부르면 .then()을 쓰고, reject이면 catch()를 사용한다. Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다. https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 하면 인삿말이 하나 딸려옵니다. 여기로 GET 요청을 해서 성공하면 Promise의 then함수를 이용해서 Ajax로 받아온 인사말을 콘솔창에 출력해주고 싶습니다. 어떻게 하면 될까요? 답: 더보기 .. 2024. 2. 25.
constructor, prototype 연습문제 Q1. 다음 코드의 출력 결과는? function Parent() { this.name = 'Kim'; } var a = new Parent(); a.__proto__.name = 'Park'; console.log(a.name); 답: 더보기 Kim Q2. 모든 array에 적용할 수 있는 함수를 직접 새로 만들려면 어떻게 해야할까요? var arr = [1,2,3]; arr.remove3(); console.log(arr); //[1,2] 답: var arr = [1, 2, 3]; Array.prototype.remove3 = function (element) { for (var i = 0; i < this.length; i++) { if (this[i] === 3) { this.splice(i, 1.. 2024. 2. 24.
Spread, rest 파라미터 연습문제 Q1. 아래 코드의 출력 결과는? var a = [1,2,3]; var b = '김밥'; var c = [...b, ...a]; console.log(c); 답: 더보기 ['김', '밥', 1, 2, 3] Q2. 대괄호가 가득한 아래 코드의 결과는? var a = [1,2,3]; var b = ['you', 'are']; var c = function(a,b){ console.log( [[...a], ...[...b]][1] ) } c(a,b); 답: 더보기 you Q3. 아래 코드의 출력 결과는? function 함수(a = 5, b = a * 2 ){ console.log(a + b); return 10 } 함수(3); 답: 더보기 9 Q4. 아래 코드의 출력 결과는? function 함수(a = 5.. 2024. 2. 24.
변수 퀴즈 JS의 호이스팅이 뭔지 알고 있나? 더보기 호이스팅 같은 경우는 아래와 같이 코드가 있을 때 코드를 해석하는 순간, var 이름을 먼저 초기화하고 그 다음에 값을 입력하는 것. function 함수(){ console.log('hello'); var 이름 = 'Kim'; } (아래와 같이 해석) function 함수(){ var 이름; // 2024. 2. 23.
this & arrow function 퀴즈 해당 퀴즈의 중점은 function의 사용방법으로 인해서 변하게 되는 this의 의미를 잘 구분하는 것이 포인트이다. 해당 개념을 잘 구분할 수 있다면 아래 문제를 풀수 있을 것! Q. 이 this는 출력하면 뭐가 나올까요? var 오브젝트2 = { data : { 간지함수 : function(){ console.log(this) } } } 오브젝트2.data.간지함수(); 답은 console창에 쳐보는 걸로. 더보기 window Q.이벤트리스너 안에서 콜백함수를 쓴다면 this는? document.getElementById('버튼').addEventListener('click', function(e){ var 어레이 = [1,2,3]; 어레이.forEach(function(){ console.log(t.. 2024. 2. 21.

티스토리툴바