진주의 개발괴발

📌 배열 : 순서가 있는 값 [] 로 감싸져 있음 index가 존재함, length 속성이 있음 typeof array // object 배열 메서드 array.push : 배열의 맨 뒤에 요소를 추가 array.pop : 배열의 맨 뒷 요소를 삭제 array.unshift : 배열의 맨 앞에 요소를 추가 array.shift : 배열의 맨 앞 요소를 삭제추가하는 메서드(push, unshift)는 추가된 length를 리턴하고 삭제하는 메서드(pop, shift)는 제거된 요소를 리턴한다. Array.isArray(attribute) : attribute가 배열인지 아닌지 boolean 값을 리턴 array.slice(start, end) : start에서부터 end 전까지 복사한 배열을 리턴 let ..

📌position: static : 요소를 일반적인 문서의 흐름에 따라 배치 relative : 요소를 일반적인 문서의 흐름에 따라 배치하고 자기 자신을 중심으로 top, right, bottom, left 값에 따라 배치 absolute : 요소가 일반적인 문서의 흐름에서 제거하고 조상 요소에 대해 상대적으로 top, right, bottom, left 값에 따라 배치 ,단 조상요소 중 위치 배치 요소가 없다면 초기 컨테이너 블록이 기준 sticky :요소를 일반적인 문서의 흐름에 따라 배치하고 조상 요소에 대해 상대적으로 top, right, bottom, left 값에 따라 배치 가장 가까운 조상 요소에 대해 끈끈한 움직임을 보임 그 조상 요소는 스크롤이 불가, 스크롤 가능한 조상 요소일 경우는 끈..

2022.11.02 수요일 오늘은 엄청 일찍 일어났다. 잠을 제대로 못 잔 것 같은데 이상하게 몸은 개운해서 아침부터 맛있는 밥을 해서 먹었다. 밥도 영양제도 다 챙겨서 먹고 나니까 기분이 좋다. 하루의 시작이 뭔가 좋은 느낌? 사실 해야할 건 많지만... 오늘부터는 복습을 조금 열심히 해야겠다고 생각했다. 복습할 게 너무 많아서 주말에 예습을 할 수 있을지 모르겠다. 2022.11.06 일요일 금요일엔 아침부터 수업이 있어서 열공했다. 새로운 페어님과도 또 다시 작별인사를 하게 되었다. 페어가 너무 금방 바뀌어서 아쉽다...😢 이제 정들었는데... ㅠㅠ 그래도 열정적으로 공부해서 후회는 없다! 아 아니다... 후회가 있다. 페어로 내가 열심히 알려드려서 결국 이해하셨는데 깜빡하고 이 결정적인 순간을 녹..

📌 node.js javascript의 런타임 중 하나 원래 자바스크립트의 런타임은 웹브라우저가 유일했지만 지금은 node.js도 있다. 런타임 : 프로그램 동작 시, 프로그램을 동작시키는 곳 📌 nvm : node version manager node.js의 버전을 관리하는 프로그램( like 패키지매니저 ) nvm으로 node.js 설치 wget으로 nvm 설치 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash nvm 버전 확인 nvm --version node.js 설치 nvm install --lts node.js 버전 확인 node -v nvm use 버전 넘버 : nvm으로 node.js의 버전 바꾸..

💡 CLI : command-line interface prompt : CLI의 명령 대기줄 I/O : input/output 컴퓨터 조작위한 입출력 📌 CLI 명령어 pwd : print working directory 현재 위치 출력 cd : change directory 위치 이동 mkdir : make directory 폴더 생성 ls : list 현재 디렉토리에 있는 폴더, 파일 보여줌 [ -a : 숨겨진 모든 파일, 폴더 포함 , -l : 상세정보 ]' touch : 파일 생성 rm : remove 파일 삭제, 삭제된 파일이나 폴더는 휴지통에 가지 않고 즉시 삭제된다. [ -rf : 폴더 삭제 ] cp : copy 파일 복제 [-r : 폴더 복제 ] (ex) cp A.txt B.txt : A...

과제 이름부터가 nightmare 라니ㅋㅋㅋ 일부러 '못해도 괜찮아' 라고 안심시켜 주시는 것 같았다 ㅎㅎ 그래도 난 꼭 풀고 말거야! 결국 풀고야 말았지만 엄청 지저분? 하게 풀어버렸다. 이번에는 내가 푼 코드와 운도님 설명을 듣고 다시 푼 코드를 비교도 해가면서 적어보겠다! (1) 3,*,3,Enter,Enter,Enter,Enter를 연속으로 누르면 243이(가) 화면에 표시되어야 합니다. (2) 3,-,3,Enter,Enter,Enter,Enter를 연속으로 누르면 -9이(가) 화면에 표시되어야 합니다. (3) 3,+,3,Enter,Enter,Enter,Enter를 연속으로 누르면 15이(가) 화면에 표시되어야 합니다. (4) 3,/,3,Enter,Enter,Enter,Enter를 연속으로 누르면..

📌advanced 계산기 advanced는 오히려 bare minimum을 하면서 감을 잡아서 나쁘지 않았다. 막혀도 금방 풀리는 느낌이었다. 먼저, advanced는 계산기 화면이 따로 되어있지 않고 하나로 이어져 있다. 물론 bare minimum 처럼 한자리수 숫자를 넣는 게 아니다. const display = document.querySelector('.calculator__display--for-advanced'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다. let firstNum, operatorForAdvanced, previousKey, previousNum; buttons.addEventListener('click', funct..

🤔모르는 게 뭔지 인식하자 unit7은 그동안 배웠던 지식을 총집합시키는 기분이었다. 강의를 보면서 문제를 푸는데 전혀 알 수가 없었다. 설명이 의도적으로 많이 빠져있어서 혼자서 낑낑대면서 알아내야 했다. 이것저것 건드려보기도 하고 이건가 하고 적었다가 이해를 하기도 했다. 딱 파일을 열었을 땐 너무 막막했다. 이게 내가 배웠던 게 맞나...? querySelector 는 뭐고 event는 뭐고... 😵 Document.querySelector(selector) : 문서에서 ()안의 선택자와 일치하는 첫번째 요소를 반환한다. 알고보니까 운도님께서 한번 보여주신 적 있던 녀석이었다. 이게 복습의 중요성이군아 ㅠㅠ😥 우선 모르는 게 뭔지 알기 위해 천천히 코드를 읽어내려갔다. 위에 선언문은 복잡하니까 패스하..

Number : 문자열 숫자로 강제 변환 형변환 되지 않으면 NaN 반환 Number('123') // 123 Number('+456') // 456 Number('-1.1') // -1.1 Number('08') //8 Number('1e10') //10000000000 (16진법) Number(null) // 0 Number('') // 0 Number('1000won') // NaN Number('happy') // NaN 숫자가 아닌 문자가 들어가면 인식하지 못하고 NaN을 반환한다. parseFloat : 문자열을 숫자로 파싱하는 것 : 부동 소수점 숫자 반환 :공백이 아닌 첫 문자를 숫자로 변환할 수 없는 경우 NaN 반환 parseFloat('+421') // 421 parseFloat('-..

🤡첫 목업 2022.10.26 수요일 예습을 하다가 처음으로 목업을 만들게 되었다. 우선 와이어프레임부터 Figma를 이용해서 그려보았다. 와이어프레임이라고 하기엔 전부 면이긴 하지만... 어쨌던 각 요소의 이름을 적어두었다. 나중에 만들면서 추가된 부분도 있지만 확실히 와이어프레임이 있는게 더 편리하고 정돈되는 느낌이다. 그렇게 만들어진 요상한 목업 만들면서 너무 신기했었다. 내가 색을 넣는대로 바뀌어서 기분이 좋았던 😁 👻그림자 목업 2022.10.28 금요일 이전 목업은 과제로 제출하기에 모자라다는 생각이 들어서 다시 만들었다. 이번에는 전에 만든 계산기와 거의 모양이 흡사하여 같은 와이어프레임을 사용했다. 그림자로 3D효과를 내고 싶었는데 실패했다. CSS 그림자 예시 사이트 이 사이트로 공부를 ..