나도 개발자 시켜주세요

더보기 이론으로 처음 들어본 듯한 표현식의 이름이라 생소했다. swap 부분에서는 다른 언어로 코드를 짜는 것보다 훨씬 코드가 짧고 간결해서 보기 좋았다. 그리고 자바에서 하던 get set..을 여기서 또 만났다. 언어를 많이 접한다는 건 좋은 거니까..ㅎㅎ 자바스크립트 es5까지만 해도 자바스크립트에는 클래스가 없었다고 한다. ES6 버전이 되면서 클래스와 비슷한 구조 문법을 추가하였다고 하니, 사용하는 것이 개발자의 숙명이지 않을까 라는 생각이 든다. 구조 분해 할당 구조 분해 할당은 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는다. 구조 분해 할당에는 배열 구조 분해와 객체 구조 분해가 있으며, 할당이라는 말이 익숙하듯 "변수의 값을 할당한다"랑 비슷하다. 배열 구조 분해 const[변수..

동기 처리 vs 비동기 처리 작업을 어떤 흐름으로 처리할거야? 세탁기가 다 돌아가야 설거지를 시작할 수 있어! => 동기 처리 세탁기가 돌아가는 동안 설거지를 하자! => 비동기 처리 동기 처리(Synchronous) : A가 B의 작업 완료 여부를 확인하고 완료를 기다리는 것 비동기 처리(Asynchronous) : A가 B를 부를 때 콜백함수를 같이 보내서 B의 작업이 끝나면 콜백함수를 실행하고, 호출 이후, B가 완료하든 말든 신경쓰지 않는다. setTimeout() setTimeout() 메서드는 시간이 만료되면 지정된 코드를 실행하는 타이머 역할이다. //delay동안 기다리다가 code 함수 실행 setTimeout(code, delay); 기다리지 않고 다음 줄을 실행함 => 비동기 처리 비..

🪙 todays-account-book 프로젝트 소개 1인 가구를 위한 가계부 ✍ 프로젝트에서 담당한 기능 start page 떨어지는 동전 animate.style transform: translate(), rotate(), skew() 사용 animation-duration으로 동전마다 시간 조절 main 사용 설명서 sweetalert2 사용자의 여러 가지 경우 생각 -> then if문 반복 => 피드백 : 이 아니라 함수 사용을 했어야 했다. 다른 팀원께서 강사님께 질문했다가 피드백을 받은 부분이었다. 사용자가 사용 설명서를 읽을 경우 / 읽지 않을 경우 / 읽다가 중간에 닫을 경우를 생각하여 close 버튼과 다음 버튼으로 구성 하였다. 맞춤형 생활 정보 swiper slider 사용 cove..

03/17 팀 배정 강사님께서 배정해 주신 팀으로 팀을 배정받았다. 어색한 공기가 흐르는 정적을 깨고 자기소개를 하고, 팀원 간 간단한 인사를 주고받았다. 이렇게 어색해 죽겠는데 팀이름을 정하라는 말씀에 팀 이름까지 정하고 팀장님을 뽑았다. 깃 레포지토리 깃에서 팀 레포지토리를 만들고 팀원들 각 개인의 브랜치에서 pull/add/commit/push 하는 과정을 익혔다. 25일 (토) 2시 발표 누가 거짓말이라고 좀 해줬으면 좋겠는 심정이었다. 일주일 만에 모든 것을 끝내야 하는 프로젝트라 아무 생각이 들지 않았다. 03/18 계획서 작성 - 기획 시작, 팀 역할 분배, 레이아웃 구성 -> 자세한 구현은 개발하면서 수정 밥 먹기 전까지 계획서 다 제출하는 게 오늘의 반이었다. 팀원 모두 적극적으로 의견을..

DOM HTML 문서는 node와 object의 집합으로 구성된다. dom 으로 각각의 node 또는 object에 접근해 문서 구조 , 스타일, 내용 등을 변경할 수 있다. Document : 웹 페이지에 존재하는 HTML 요소에 접근할 때 .querySelector('선택자')요소 선택자를 사용해 요소를 가져오는 메소드문서에서 만나는 첫번째 요소를 반환console.log(document.querySelector(".pink")); //핑크1 클래스 가져오기 .querySelectorAll('선택자')문서에 존재하는 모든 요소를 배열의 인덱스에 맞게 배열 요소로 반환 1 2 3 console.log(document.querySelectorAll(".box")); //모든 요소를 배열의 인덱스에 맞게 ..

문자열 관련 메소드 .length : 문자열 길이 반환(공백포함) .toUpperCase()&toLowerCase() : 문자열 전체를 대문자&소문자로 변경 .indeexOf(' ') : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환 .slice(starIdx, endIdx) : start부터 end-1까지 슬라이싱 반환, 음수값도 가능 .replace(문자열1, 문자열2) : 1을 2로 변경 .replaceAll(문자열1, 문자열2) : 문자열1을 모두 문자열2로 변경 .repeat(n) : 문자열 n번 반복 .trim() : 문자열의 양끝 공백 없애기 .split() : 매개변수로 들어온 문자열 기준으로 str 쪼개서 배열 저장 배열 관련 메소드 .push() : 배열 끝에 추가 .pop(..

조건문 조건문 if if {} else{} if(조건1){ //조건1이 참이라면 실행할 문 }else{ //조건1이 거짓이라면 실행할 문 } 조건문은 if 옆에 조건을 써주고 대괄호 안에 조건1이 참일 때 실행할 문을 작성해준다. else{} 안에는 조건1이 거짓이라면 실행할 문을 작성하면 된다. if{} else if{} else{} if(조건1){ //조건1이 참이라면 실행할 문 }else if (조건2){ //조건 2가 참이라면 실행 }else { //조건 1, 2가 모두 거짓일 때 실행 } 중첩 if if (조건1) { if (조건2) { //조건1을 만족하면서 조건2도 만족 } else { //조건1은 만족하지만 조건2는 만족하지 않음 } } for (let i = 0; i 조건식 2) 조건식이..

내장 방식 어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등 - 간단하게 생성가능 - 특정 페이지에서만 작동하는 기능일 경우 내장 방식만 따로 구현 가능 링크 방식 java script 파일을 따로 만들어서 링크를 거는 방식 (ex.css) 어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등 - js 코드의 양이 많으면 파일로 따로 관리하는 것이 더 유용 - 같은 기능을 다른 페이지에서 사용하고 싶을 때 링크만 걸어서 간단하게 사용 가능 - 유지 보수 용이성 편 데이터 종류(자료형) String 문자형 데이터 문자와 변수를 동시에 사용할 때 - 메소드의 매개 변수로 넣..

transition : 요소의 값이 변할 때마다 전환되는 모션을 추가하는 속성이다. transition은 속성 자체로 스타일을 주는 속성이 아니라 가상 클래스 (ex. :hover) 나 자바스크립트의 부가적인 액션에 의해 사용된다. transition: 속성명 지속시간 타이밍함수 대기시간; transition-property : 효과를 적용할 속성 이름 지정 all : 모든 속성에 지정 속성 이름 : 전환 효과할 속성 이름 지정 - 여러 개 지정할 시 쉼표(,) 로 구분 transition-duration : 전환 효과의 지속시간 지정 os : 전환효과x 시간 : s 지정 transitio-timing-function : 전환 효과의 타이밍 함수 지정 ease 느리게-빠르게-느리게 cubic-bezier..

flex 구조 flex 구조는 item이 설정된 속성에 따라 container 안에서 배치된다. display: flex; flex컨테이너를 사용하기 위해서는 display: flex; 를 정의한다. 각각의 아이템은 자신의 너비만큼 공간을 차지하고 높이는 컨테이너의 높이만큼 공간을 차지한다. 배치할 축을 main axis를 주축으로, cross axis 를 교차축으로 정렬한다. .container{ /* - main axis : 주축 (주축의 기본방향 좌 -> 우) - across axis : 교차축 */ display: flex; } flex-direction : 주축(main axis) 방향 설정 아이템이 배치되는 축을 좌->우 / 우-> 좌 / 위->아래 / 아래-> 위 로 지정한다. flex-di..