지난 포스팅에서 이어집니다. [Javascript] 클래스와 객체지향 프로그래밍 1. 객체 공장 만들기 청소부들의 정보가 담겨 있는 객체를 만들어 데이터를 관리한다고 생각해 보자. 두 명의 청소부가 있을 때 다음과 같이 객체를 만들 수 있을 것이다. let cleaner1 = { name: 'Jin', d sulki.tistory.com 지난 포스팅에서 다음과 같이 클래스 Cleaner와 그 클래스를 상속받는 서브클래스 CleanerPlus를 생성했다. class Cleaner { constructor(name, department) { this.name = name; this.department = department; } clean() { return `${this.name} has cleaned t..
1. 객체 공장 만들기 청소부들의 정보가 담겨 있는 객체를 만들어 데이터를 관리한다고 생각해 보자. 두 명의 청소부가 있을 때 다음과 같이 객체를 만들 수 있을 것이다. let cleaner1 = { name: 'Jin', department: 'lobby', clean: function() { return `Jin has cleaned the lobby.` } } let cleaner2 = { name: 'Kim', department: 'bedroom', clean: function() { return `Kim has cleaned the bedroom.` } } 그렇지만 청소부가 수십 명, 수백 명이 된다면 어떨까? 담아야 할 정보의 개수(프로퍼티의 개수)가 수십개로 늘어난다면 어떨까? 매번 객체들..
함수들을 입력받아 입력받은 함수들을 연달아 결합하는 함수 'pipe'를 만들어 보자. //출력 예시 function square(num) { return num * num; } function add5(num) { return num + 5; } function mul3(num) { return num * 3; } function isOdd(num) { return num % 2 !== 0; } let output = pipe(add5, square); console.log(output(4)); // --> 81 output = pipe(square, add5, mul3); console.log(output(4)); // --> 63 output = pipe(square, mul3, add5, add5,..
부트캠프에서 학습을 시작한 지 벌써 한 달이 지나 Section 1이 마무리되었습니다. 새로운 환경에서 새로운 사람들과 새로운 공부를 하느라 많은 어려움도 있었고 배운 것도 많았는데요. 회고를 작성하면서 돌아볼 점과 앞으로의 다짐을 남겨 두려 합니다. 부트캠프 시작할 때 나의 목표는 무엇이었을까? 부트캠프를 시작하며 작성한 '나의 다짐' 페이지에 들어가 보았습니다. 연봉 3600만원 이상으로 개발자 커리어 시작하기. 나쁘지는 않습니다. 지금 제 수준에서는 엄청난 노력을 해야 하는 도전적인 목표이기도 합니다. 그렇지만 지금 와서 다시 이 목표를 보니, 좀 무미건조하게 느껴지기도 합니다. 일년 동안 벌 돈, 그것만이 나의 목표인가 하는 생각도 하게 됩니다. 연봉 3600만원 이상으로 개발자 커리어를 시작하게..
나만의 아고라스테이츠 만들기 미니 프로젝트 📌보러가기 코드스테이츠 부트캠프 section1을 마무리하며 작은 솔로 프로젝트를 진행했다. '아고라스테이츠'는 코드스테이츠 수강생들을 위한 일종의 질문 게시판인데 이것을 나만의 스타일로 다시 구성해보는 것이 과제였다. 아주 기본적인 틀과 힌트만 주어지고 나머지는 전부 스스로 알아내고 만들어 내야 해서 지금까지의 과제와는 달리 난이도가 있었지만 도전의식에 불타서 advanced 과제까지 잘 달성했다! 그 과정에서 배운 것이 아주아주 많았기에 잊기 전에 잘 정리해둬야겠다고 생각했다. 1. Bare minimum 과제 목표 • 디스커션 나열 기능 • CSS로 꾸미기 • 디스커션 추가 • Github page 배포 📌 디스커션 나열 기능 게시물 정보가 들어 있는 객체..
DOM 연습과제로 회원가입 폼 유효성 검사를 하고 에러 메시지를 띄우는 과제를 수행했다. 과제 목표 • 아이디에 4글자 이상 입력되지 않으면 에러 메시지 띄우기 • 비밀번호 확인이 비밀번호와 일치하지 않으면 에러 메시지 띄우기 • 아이디에 영숫자 외 다른 문자가 입력되면 에러 메시지 띄우기 • 비밀번호가 8자리 이상, 영숫자 및 특수문자가 하나 이상 포함되지 않으면 에러 메시지 띄우기 처음 화면을 띄웠을 때는 에러 메시지가 보이지 않다가 사용자가 input에 글자를 입력하기 시작하면 유효성 조건에 관한 에러 메시지를 띄우고, 조건이 잘 맞으면 에러 메시지를 없애거나 적절한 내용을 입력했다는 메시지를 띄우도록 하는 것이 과제 목표였다. 📌 초기 에러 메시지 숨기기 처음에는 에러 메시지가 보이지 않아야 하기..
1. DOM(Document Object Model) 2. CRUD(Create-Read-Update-Delete) Create: 요소 추가하기 Append: 요소를 부모와 연결하기 Read: 요소를 조회하기 Update: 요소를 갱신하기 Delete: 요소를 삭제하기 1. DOM(Document Object Model) DOM은 html 요소를 객체(object)처럼 조작할 수 있는 모델이다. HTML은 한번 작성되면 페이지를 옮겨 가지 않는 한 바뀌지 않지만, DOM을 이용하면 사용자의 행동에 따라 html 요소를 동적으로 조작할 수 있게 된다. 2. CRUD(Create-Read-Update-Delete) DOM을 이용할 때 가장 기본이 되는 것은 html 엘리먼트를 만들고, 조회하고, 갱신하고, ..
Koans: 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미 오늘은 koans 과제를 통해 지금까지 배운 것들을 정리하고 되새기는 시간을 가졌다. 풀면서 헷갈리거나 다시 한번 짚고 넘어갈 필요가 있는 것들을 정리해 본다. 1. 암묵적 타입 변환 expect(123 - "1").to.equal(122); 산술 연산자는 피연산자 중 숫자 타입이 아닌 것을 숫자 타입으로 암묵적 타입 변환한다. expect("1" + true).to.equal(Fill_Me_In); //"1true" 그러나 + 연산자는 산술 연산자로도 쓰이지만 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로도 쓰인다. 위 경우 "1"이 문자열이므로 불리언 true가 문자열로 암묵적 타입 변환돼 "..
