분류 전체보기

14주차 회고 - 하루에 함수하나 냅다외우기 스터디 개설

자바스크립트 개념정리를 하다가 왜이렇게 머리에 안들어오는거지? 생각했다. 생각하고 하다가.. 역시 '익숙치 않아서'라는 답이 나왔고, 주변을 돌아보니 혼돈에 휩싸인 동료들이 여럿 보였다. 그래서 '하루에 하나 함수 외우기' 스터디를 개설했다. 이해가 안되면 그냥 계속 반복해서 써보는거고 냅다 외우는거다. 참여하는 사람이 없으면 다른 동료 한명과 둘이서 하려고 했는데 무려 23명의 참여...! 물론 이 멤버가 모두 끝까지 가지는 않겠지만 이렇게 많이 모인 이상 안전하고 지속가능하고 효과적인 스터디를 만들기 위해 몇가지 장치를 구상했다. 다행이도 열정적으로 참여해준 팀원덕분에 한 주는 순조롭게 진행되었다. 자바스크립트 개념은 한 두 번 본다고 이해되는 건 아니고 계속 거기 얽매여있지 말고 실무적인 연습을 해..

다크모드 버튼에게 일을 시켜보자

버튼을 1번 클릭하면 버튼내부 글자를 Light로, 버튼을 2번 클릭하면 버튼내부 글자를 Dark로, 버튼을 3번 클릭하면 버튼내부 글자를 Light로, 버튼을 4번 클릭하면 버튼내부 글자를 Dark로, … 이렇게 만들고 싶습니다. 근데 이걸 천 번, 만 번 할 수 있는건 아니잖아요? 이걸 수학적으로 만들어보면, 버튼을 홀수번 클릭하면 버튼내부 글자를 Light로, 버튼을 짝수번 클릭하면 버튼내부 글자를 Dark로 라고 할 수 있겠죠. 그걸 코드로 풀어보면 let count = 0; //버튼이 클릭된 횟수를 담을 변수를 선언 $('.badge').on('click', function(){ count += 1; if (count가 홀수면) { 내부글자를 Light로 변경 } else { 내부글자를 Dark..

(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에 소모되는 시간을 없애준다. 다음에는 좀 더 복잡한 유효성 검사식을 추가해봐야지.

누구나 애니메이션 만드는 공식

애니메이션 만드는 공식 one-way 애니메이션을 만드는 공식을 알아보자. one-way 애니메이션이란? A→B처럼 한방향으로 흘러가는 애니메이션 예를들어 아래와 같은 경우가 있겠다. 투명도를 0 → 1 로 만들고싶을 때 margin left 10px → 300px font size가 15px → 30px 모든것은 세가지 기본단계의 원리만 알면 된다. 첫번째 시작스타일 최종스타일 을 CSS로 만들어놓는다. 두번째 자스로 내가 원할 때 최종스타일로 변하라고 코드를 짠다 세번째 시작스타일에 transition을 추가한다. 예제 1 모달창이 toggle 될 때 transition 주기 첫번째 단계 시작스타일 만들기 .black-bg { visibility: hidden; opacity: 0; } 최종스타일 만..

함수: 기본중의 기본 정리하기

함수의 기본 함수는 사용을 위해 만들어놓는 것이고, 누군가 호출하지 않으면 아무일도 일어나지 않는다. function add(a,b){ return a + b ; } const result = add(1,2) console.log(result); >3 함수의 이름을 함수를 잘 나타내줘야하고, 인자값은 무슨 타입인지 잘 나타내줘야 한다.(숫자인지? 스트링인지? 배열인지?) 함수와 이름과 인자값은 다 내가 지금 입력하는거다!! 숫자를 인자값으로 받아올때는 보통 a,b라고 쓴다. function myName(firstName, lastName) { return `제 이름은 ${firstName}${lastName} 입니다.`; } let yourName = myName('허', '지현'); console.lo..