노마드코더에서 진행하는 트위터 클론코딩 챌랜지에 참여했습니다.첫번째 과제는 와이어프레임 제작하기.이전에 했던 프로젝트들은 대부분 피그마로 제작을 했습니다. 그렇기에 이번에도 피그마로 끄적끄적...대충 완성은 시켰는데목표는 모던한 커뮤니티 만들기.이전에 해보지 않았던 다른 기능들을 찾아서 추가해보려고 합니다.완주를 위해서 화이팅!
Front-end
JavaScript [9] - DOMDOM문서 객체 모델(Document Object Model)문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공문서 구조, 스타일, 내용 등을 쉽게 변경할 수 있게 도움HTML 콘첸트를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등HTML/CSS를 조작 가능HTML 문서를 구조화하여 각 요소를 객체(object)로 취급단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작이 가능DOM TreeDOM은 문서를 논리 트리로 표현DOM에서 모든 것은 Node즉, HTML요소, 속성, 텍스트 모든 것이 노드각 노드는 부모 자식 관계를 형성하고 이에 따라 상속 개념도 동일하게 적용됨NodeDOM..
JavaScript [8] - 객체 객체객체는 속성(property)의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현key문자열 타입만 가능key이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현value모든 타입(함수포함) 가능객체 요소 접근점(.) 또는 대괄호([])로 가능key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능// 객체 리터럴 방식으로 객체 생성const person = { name : 'Viktor', age : 30, greeting: function() { console.log(`Hello, my name is ${this.name}`) }}// 객체의 메서드 호출person.greeting() // Hello, my name is Vik..
JavaScript [7] - 배열 메서드 심화 Array Helper Methods배열을 순회하며 특정 로직을 수행하는 메서드메서드 호출 시 인자로 callback 함수를 받는 것이 특징 (callback 함수 : 다른 함수의 인자로 전달되는 함수)// 콜백 함수 예시const numbers = [1, 2, 3]numbers.forEach(function (num) { console.log(num**2)})// 1// 4// 9const callBackFunction = function (num) { console.log(num**2)}numbers.forEach(callBackFunction)// 1// 4// 9forEacharray.forEach(callback(element [, in..
JavaScript [6] - this와 배열 메서드 기초this어떠한 object를 가리키는 키워드JavaScript의 함수는 호출될 때 this를 암묵적으로 전달받음JavaScript에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작JavaScript는 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라짐즉, 함수를 선언할 때 this에 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨전역 문맥에서의 this브라우저의 전역 객체인 window를 가리킴전역객체는 모든 객체의 유일한 최상위 객체를 의미console.log(this) // window함수 문맥에서의 this함수의 this 키워드는 다른 언어와 조금 다르게 ..
JavaScript [5] - 함수와 Arrow Function함수의 정의함수 선언식 (function declaration)function add(num1+num2) { return num1 + num2}add(2, 7) // 9함수 표현식 (function expression)표현식에서 함수 이름을 명시하는 것도 가능다만 이 경우 함수 이름은 호출에 사용되지 못하고 디버깅 용도로 사용됨const sub = function (num1, num2) { return num1 - num2}sub(7, 2) // 5const mySub = function nameSub(num1, num2) { return num1 - num2}mySub(1, 2) // -1nameSub(1, 2) // Reference..
JavaScript [4] - 조건문과 반복문조건문if statement조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단if, else if, else조건은 소괄호(condition) 안에 작성실행할 코드는 중괄호 {} 안에 작성블록 스코프 생성const name = 'manager'if (name === 'admin') { console.log('관리자님 환영합니다.')} else if (name === 'manager') { console.log('매니저님 환영합니다.')} else { console.log(`${name}님 환영합니다.`) // Backtick에 주의해줍시다.} 반복문whileforfor ...infor ...ofArray.forEach while조건문이 ..
JavaScript[3] - 데이터 타입과 연산자 데이터타입데이터 타입에는 크게 원시 타입(Primitive type)과 참조 타입(Reference type)이 있습니다.원시 타입(Primitive type)숫자(Number) : 정수 및 실수형 숫자를 표현하는 자료형문자열(String) : 문자열을 표현하는 자료형Template Literal(템플릿 리터럴) => Backtick(' ')을 사용하고 $와 중괄호 { }로 표기합니다.불리언(Boolean) : 참(true) 또는 거짓(false) 값null : 값이 없거나 비어 있음을 나타내는 특수한 값 ( object )변수의 값이 없음을 의도적으로 표현할 때 사용undefined : 값이 정의(할당)되지 않음을 나타내는 특수한 값 ( undefine..
