ALL

[Day 12] 객체

오늘 배운 것 자바스크립트 객체에 대한 내용을 공부했다. for in문과 for of 문을 막연하게 비슷한 반복문이라고 생각했는데, 큰 차이점이 있다는 것을 알게되었다. 또 다양한 객체 메서드를 이해하고 활용할 수 있었다. [JavaScript] 객체 Object 객체란 무엇인가? 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 원시 타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 객체에 속한다. 객체에서 각 요소는 프로퍼티 (key : value 쌍 friedegg556.tistory.com 배열이 빈 배열인지 확인하는 방법 라이브 세션 시간에 추가적으로 빈 배열인지 여부를 확인할 때 if (!arr.length) 를 활용하는 방법도 있다는 것을 알게 되었다. 처음에 빈 배열인지 확인하기..

[JavaScript] 객체 Object

객체란 무엇인가? 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 원시 타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 객체에 속한다. 객체에서 각 요소는 프로퍼티 (key : value 쌍)으로 구성되어 있다. key는 속성 이름, value는 속성 값이 된다. value는 어떤 값이든 될 수 있고, key는 문자열이다. 함수 역시 값을 반환하므로 객체 내에 프로퍼티로 존재할 수 있다. 이를 객체의 메서드(method)라고 한다. 이 프로퍼티(key:value)의 key는 메서드의 이름, value는 함수가 반환하는 결과 값이 된다. 객체 vs 배열 배열에서는 각 요소에 접근하기 위해, 이름 없이 순서(index)로 접근한다. 객체에서는 각 요소의 key값으로 value값에 접근할 수 있..

[Day 11] 배열 + 2주차 까지의 소감

오늘 배운 것 배열과 객체 자료형을 사용하는 이유 : 대량의 데이터를 쉽게 다루기 위해서. 배열 값의 추가 삭제 기본 메서드 arr.pop() : 마지막 요소 삭제 arr.push(el) : 마지막에 요소 추가 arr.unshift(el) : 첫번째에 요소 추가 arr.shift() : 0번째 요소 삭제 arr.slice() : 얕은 복사 1 레벨(1차원 배열)까지는 복사가 되지만 2 레벨부터는 요소의 참조 값을 공유한다. 그 외 배열 메서드 정리 [JavaScript] 배열 메서드 정리 Array.prototype.slice() start ~ end 직전까지에 대한 얕은 복사본으로 새로운 배열을 리턴한다. 원본 배열을 변경하지 않는다. const arr = ['a', 'b', 'c', 'd', 'e']..

[알고리즘 JS]백준 17478번: 재귀함수가 뭔가요?

문제 https://www.acmicpc.net/problem/17478 17478번: 재귀함수가 뭔가요? 평소에 질문을 잘 받아주기로 유명한 중앙대학교의 JH 교수님은 학생들로부터 재귀함수가 무엇인지에 대하여 많은 질문을 받아왔다. 매번 질문을 잘 받아주셨던 JH 교수님이지만 그는 중앙대 www.acmicpc.net 풀이 const readFileSyncAddress = '/dev/stdin'; const fs = require('fs'); let n = fs.readFileSync(readFileSyncAddress).toString(); n = Number(n); // 문장 앞에 들어갈 언더바 변수 let underbar = ''; const solution = function (n) { // 업데..

[JavaScript] 배열 메서드 정리

Array.prototype.slice() start ~ end 직전까지에 대한 얕은 복사본으로 새로운 배열을 리턴한다. 원본 배열을 변경하지 않는다. const arr = ['a', 'b', 'c', 'd', 'e']; // slice(startIdx, endIdx) console.log(arr.slice(2,4)); // ['c', 'd'] Array.prototype.splice() 시작 인덱스부터 입력된 갯수만큼 배열에서 추출한 후 원본 배열을 변경한다. const arr = ['a', 'b', 'c', 'd', 'e']; // splice(startIdx, deleteCount) console.log(arr.splice(2,3)); // 이 때의 리턴 값은 ['c', 'd', 'e']; cons..

[Day 10] 리눅스, nvm, npm, Git

터미널을 사용하다..! 오늘은 리눅스 CLI 명령어를 사용한 기본적인 조작방법 및 Node.js 런타임에 대한 기본 지식을 학습했다. mac OS 혹은 ubuntu를 사용해서 학습해야 하는데, 나는 윈도우11 유저이고 우분투 듀얼부팅이 싫어서 wsl2를 설치하여 진행했다. wsl2 세팅은 여기과 여기 를 참조했다. 어려웠던 부분은 우분투에서 gui 앱을 실행하기 위해서 X11이라는 것을 활성화 시켜야 한다는 오류가 있었다. 구글링을 통해 VcXsrv라는 것을 받아 세팅을 진행했고 (참고링크 : WSL2 GUI 사용하기), 우분투에서 nautilus(윈도우의 파일탐색기처럼 파일을 볼 수 있는 파일 관리자) 를 실행시킬 수 있었다. wsl2를 사용하면서 윈도우 터미널 미리보기 라는 앱을 설치하여 사용중이다...

[Day 9] 계산기 구현

꽤 힘든 하루 오늘은 계산기에 실제 기능을 구현하는 작업을 페어와 같이 진행했다. 초반부는 괜찮았는데, 요구사항이 복잡해지니까 코드도 스파게티 코드가 되는 것 같고 헷갈려서 힘들었다. 머리에서는 이해했다고 하는데 말로 설명하려는 순간 말문이 턱 막히는 현상을 경험했다. ㅋㅋ 오늘 벌써 저녁먹고 과제 마무리하니까 이 시간이 되었는데, 앞으로는 시간이 훨!씬! 더 부족해질거라는 생각이 팍팍 든다. 주말을 정말 잘 활용해야지. 오늘은 라이브세션 이후에 그룹회고를 진행했다. 나름 용기내서 모더레이터에 도전했는데 이런 진행은 처음이라 엄청 버벅댄 것 같다. 그래도 참여하신 다른 분들이 맞장구도 잘 쳐주시고 답변도 잘 하셔서 그나마 덜 어색하지 않았나 싶다. 기억에 남는 것을 꼽자면, 어떤 분이 나에게 잘하는 것이..

[Day 8] 계산기 목업 만들기 -2

코드를 설명하는 것이 어렵다. 매번 페어프로그래밍을 할 때 느끼는 것이지만, 내가 작성한 코드를 정확한 용어로 조리있게 설명하는게 많이 어렵다. 페어를 통해 연습하지 않았으면 계속 잘하지 못했을 것 같다. 오늘은 지난주 금요일에 작업하던 계산기 목업을 다시 제작하고, 추가적으로 동기분들의 결과물을 보면서 여러가지 새로운 것들을 배울 수 있었다. 이번 페어프로그래밍에서는 와이어프레임도 새로 작성하고 코드도 더 가독성있고 깔끔하게 작동하도록 나름의 리팩토링을 했다. 우리는 피그마를 이용해서 아주아주 간단하게 구조를 작성해보았는데, 이전보다 훨씬 더 구조를 파악하기 좋다고 생각한다. 레퍼런스를 찾아보니 실제로 이렇게 작성된 사례는 없는 것 같지만 말이다. 라이브세션에서 나도 용기를 내어서 결과물을 간단하게 발..

[Day 7] CSS Flex 활용 :: 계산기 Mock-up 제작

Html, Css 활용하기 오늘은 Css flex box를 활용해 계산기 목업을 제작했다. 계산기 목업은 피그마에서 와이어 프레임을 간단하게 제작하고, 레이아웃 작성 후 css 수정의 순서로 만들었다. 피그마 툴을 거의 처음 써보는데, 어떤 기능이 있는지 제대로 파악을 못해서 약간 주먹구구식으로 제작했다. 주말동안 피그마의 활용법에 대해서 조금 더 공부해보아야겠다. 오늘 다룬 개념 중 어려웠던 부분은 flex-item 의 grow shrink basis 속성이었다. grid 에서 비율을 설정할 수 있는 것과 비슷한 느낌인 것 같았다. 개념 정리하고, 앞으로 많이 써보면 익숙해지겠지! 그리고 css의 네이밍 컨벤션에 대해서 검색해보았는데, css가 왜 쓰면 쓸수록 어렵다고 하는지 조금은 알 것 같았다. c..

[JavaScript] net::ERR_ABORTED 404 (NOT FOUND) 에러

자바스크립트 파일 경로 에러 // 찾을 수 있는 경로 // 찾을 수 없었던 경로 같은 폴더 내에 위치하다가 분기되는 지점부터 경로를 작성해주어야 오류가 발생하지 않는다 .. 허무 또 까먹을까봐 써둔다.