Front-End Developer

flex & grid 책을 출간하기까지(총괄은 쉽지 않다! 하지만 많이 배웠다.)

소스코드:https://github.com/flexandgrid/flexandgrid URL:https://flexngrid.com/ 리디북스 바로가기: https://ridibooks.com/books/2773000058 알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나 ※ 해당 책은 22년 진행한 flex & grid 오픈소스 프로젝트 그룹의 결과물입니다. 사용자에게 컨텐츠를 잘 전달하는 일은 좋은 컨텐츠를 만드는 것만큼이나 중요한 일입니다. 이를 위해 CSS 레이아웃 ridibooks.com 드디어, 책 출간! 드디어 책이 출간되었다. 마지막 퇴고를 제외하고는 처음부터 끝까지 동료들과 힘을 합쳐 직접 만들었다. 항상 책을 쓰고싶다곤 생각했는데 난 그게 에..

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,..

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..

(JS기초)변수의 할당, 선언, 범위

변수만드는걸 선언 변수에 뭐 집어넣는걸 할당이라고 한다. 변수의 선언 let myName; 변수를 선언하면서 할당까지 하기 let myName = 'Jihyun' 할당 연산자 = 의 뜻은 → '오른쪽에 있는걸 왼쪽에 넣겠다' 라고 생각하면 쉽낟. 함수 안에서 변수를 만들면 그건 그 함수 안에서만 사용가능하다 function 함수(){ let myName = 'Jihyun'; } console.log(myName) 오류남 함수 바깥에서 만든 변수는 어디서든지 사용가능 let myName = 'kim'; function 함수() { console.log(myName); } let, var, const 차이점 var 재선언이 가능하다 = 원래 말이 안되는것임. 왜냐? 까먹고 또 만들면 버그의 온상이기 때문. ..

event listener사용해서 로그인창 구현해보기

자바스크립트만 집중적으로 연습해보고 싶을 때에는 부트스트랩같은 라이브러리를 적극적으로 사용해야겠다. HTML과 CSS에 소모되는 시간을 없애준다. 다음에는 좀 더 복잡한 유효성 검사식을 추가해봐야지.