분류 전체보기

16주차 회고 - 길었던 방학. flex & grid 책 출판

자바스크립트 교육과정이 끝이 났다. 아직 객체지향이나 ES6신문법들은 잘 모르지만 기본적으로 자스를 사용해 돔을 조작하는법, ajax를 사용하는법(fetch), localstorage를 사용하는법까지는 열심히 익혔다. 바닐라 자바스크립트를 이용한 프로젝트가 하나 있으면 좋을 것 같은데 간단한 쇼핑몰을 구현해서 포트폴리오에 넣어야겠다. 쇼핑몰홈페이지는 항상 엄마의 비지니스를 위한 웹페이지를 만들고싶어해왔던 내 소망 중 하나였기 때문에 의미 있는 경험이 될 것이다. 이제 2달도 채 남지 않았다. 당장 내일부터 React수업에 들어가고 또 자바스크립트 시험을 통해 팀을 나눠 팀프로젝트를 점점 준비해나가는 단계이다. 방학때 잘 쉬었으니 좀 더 집중력을 높여나가야겠다. 키워드공부법은 아무래도 공부의 양이 방대하다..

JavaScript sort() not working | sort()가 안될 때

sort()를 했는데 맘처럼 안될때가 있다. 왜그럴까? JS는 sort()를 하는순간 정렬하고자 하는 아이템을 모두 문자로 바꾸고 숫자의 크기가 아닌 첫 캐릭터들을 비교하여 줄을 세우기 때문이다. 아래 예시를 보면, 2 다음에 3이 아닌 24가 오는것을 볼 수 있다. let array = [3, 455, 2, 24, 56]; array.sort(); console.log(array); 해결방법 이는 a,b의 값을 비교해주어 negative값이 나오면 a를 왼쪽으로 정렬시키고 positive값이 나오면 a를 오른쪽으로 보내는 일련의 식을 통해 해결해줄 수 있다. function sortNumbers(a, b) { if (a > b) { return 1; } else if (b > a) { return -1..

JS로 생성한 요소 for문으로 HTML에 붙여주기

HTML생성하는법 .createElement() 먼저 태그를 생성해주고, 태그 안에 내용물을 넣어준다. insertAdjacent보다 빠른데 별차이없다 let a = document.createElement('p'); a.textContent = '안녕'; document.querySelector('#test').appendChild(a); .insertAdjacentHTML() / .append() HTML작성하듯이 똑같이 작성하고 HTML의 지정한 요소 근처에 붙여준다. let template = 'hello'; document.querySelector('#test').insertAdjacentHTML('beforeend', template); 반복문 반복문의 용도 코드를 반복하고싶을 때 array,..

15주차 회고 - 키워드 공부법. 적용해보자

1일 1함수 외우기로 setInterval, 캐러셀 만들기, 퀴즈판독기, 소수구하기, 할인가계산기를 외우거나 구현했다. 처음 할 때는 이해가 안되는 것도 그냥 따라치고, 일주일 뒤에 다시보면 조금 더 이해가 되고, 한번 더 보면 더 이해가 된다. 가끔은 이렇게 쉬운걸 괜시리 막막해했었네, 라는 생각도 든다. 특히 돔을 조작하여 구현해보는 연습은 내가 실질적으로 할 수 있는게 하나씩 늘어가는 느낌이라 그냥 함수를 외우는 것 보다 성장한다고 생각이 든다. 내가 만들고싶은걸 위해서 필요한 함수를 배우는 것은 목적이 명확하기 때문에 머리에 더 잘 들어온다. 배운것을 쌓아간다는 느낌보다는 밑빠진 독에 붓는다는 느낌이 나는건 어찌보면 지금 단계에서는 당연하다고 생각하지만, 그래도 더 쌓아간다는 느낌을 받을 순 없을..

for 반복문으로 코드 n배 절약해보기 + 이벤트버블링

버튼을 클릭 할 때마다 버튼의 style과 상세설명이 바뀌어야한다. 각각 버튼에 이벤트리스너를 달아 코딩하면 아래와 같다. const btnAll = document.querySelectorAll('.tab-button'); const boxAll = document.querySelectorAll('.tab-content'); btnAll[0].addEventListener('click', function () { btnAll[0].classList.remove('orange'); btnAll[1].classList.remove('orange'); btnAll[2].classList.remove('orange'); btnAll[0].classList.add('orange'); boxAll[0].class..

(영어로)'퇴사하고 개발자가 되기로 마음먹은 이유' 유투브 영상 업로드

https://youtu.be/_742LPavilE 사실 가볍게 빠르게 끝내자 생각하며 시작했던 영상이 이렇게 시간을 많이 잡아먹을 줄은 몰랐다. 그래도 내가 가는 이 길의 여정을 남기고싶었고 누군가에게 영감과 용기와 좋은 정보를 줄 수 있다면 의미가 있을것이라 판단하여 촬영하게 되었다. 20대의 전반을 자아탐색과 진로고민으로 혼란스럽게 보낸 듯 하다. 가는 회사마다 상도 받고, 칭찬도 받고 잘 하는 듯 했지만 속으로는 썩어가고 있었다. 어느 직업이 좋다 안좋다가 아니라, MBTI 파국의 조합처럼 그냥 그건 나에게 맞지 않는거였다. 하지만 그 때는 내가 할 수 있는게 서비스업 뿐이라고만 생각했었다. 시야가 좁았기에 그게 내 세상의 전부였다. 회사를 옮기거나 시간이 지나면 괜찮아 질 줄 알았건만, 이직과 ..