본문 바로가기

전체 글

 (364)
10장 - 2. 객체 리터럴 (프로퍼티 / 메서드) 10.3 프로퍼티 var person = { name: 'Lee', //프로퍼티 키:name, 프로퍼티 값: 'Lee', age: 20 //프로퍼티 키:age, 프로퍼티 값: 20 } - 프로퍼티를 나열할 때는 쉼표(,)로 구분 - 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않지만, 사용해도 괜찮다. - 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 (**심벌 값 : ES6에 추가된 7번째 타입. 변경 불가능한 원시 타입의 값. 다른 값과 중복되지 않는 유일무이한 값. Symbol함수를 호출해 생성.) 1) 프로퍼티 값에 접근할 수 있는 이름으로서 '식별자 역할'을 한다. 하지만 반드시 식별자 네이밍 규칙을 따라야 하는것은 아니지만, 식별자 네이밍규칙을 준수하는 프로퍼티 키와 그..
[4주 프로젝트] 4. 프로토타입 작성 이번에는 와이어프레임을 바탕으로 프로토타입을 작성하였다. 우리 팀은 시중에 나와있는 여러 툴 중, miro를 사용하였다. 좋은 프로토타입 작성 무료 툴들이 많지만, 그 중 miro는 2주 프로젝트를 할때 사용하여 손에 익었기도 하고, 매우 조작하기 편해서 이번에도 그대로 사용하였다. 프로토타입은 와이어프레임과 다르게 디자인적 요소도 들어가고 실제 웹사이트와 흡사하게 만들어야하므로 더 디테일한 부분들을 팀원들과 정하였다. 1/ 로고 와이어프레임을 짜면서 서비스 이름도 같이 정하였는데, 팀원들이 낸 여러 후보들 중 '아팡'이 제일 눈에띄고 입에 잘 붙어 '아팡'으로 정하였다. (정말 아이디어는 자유로운 분위기에서 툭툭 던지는 것들 중 괜찮은 것이 많이 나온다..) 우리 서비스 이름인 '아팡'로고를 한글로 하..
01_transformFirstAndLast [ 문제 ] 입출력 예시로 문제를 설명하자면, 입력받은 배열 중 0번째 요소가 객체의 key, 마지막 요소가 객체의 value로 만들어 그 객체를 반환해야한다. 그리고 빈 배열을 입력받은 경우, 빈 객체를 반환해야한다. [ 풀이 ] 내가 작성한 로직은 아래와 같다. 1/ 먼저 빈 객체를 변수에 할당한다. 2/ 만약 배열의 길이가 0이라면(즉, 빈 배열이라면) 빈 객체를 그대로 반환한다. 3/ 빈 배열이 아니라면, 대괄호 표기법(bracket notation)을 사용하여 동적으로 생성시킨다. 4/ 객체를 할당한 변수를 반환한다. function transformFirstAndLast(arr) { let obj = {}; //변수를 선언하고, 빈 객체를 할당한다. if(arr.length === 0){ //..
[4주 프로젝트] 3. DB Schema 작성 와이어프레임을 작성하면서 웹 서비스에 넣을 기능들을 생각했고, 그걸 바탕으로 팀원들과 DB 스키마를 작성하였다. 2주 프로젝트에서도 DB스키마를 작성할 때 참여는 하였지만, 어떻게 DB스키마를 작성하는지 감이 잘 오지 않아 적극적으로 의견을 내기보다는 팀원들이 하는걸 보고 이해하는 정도였다. 2주 프로젝트때 이해한 걸 바탕으로 이번 4주프로젝트에서는 DB스키마를 작성하는데 적극적으로 의견을 내고 툴을 사용하여 직접 작성하였다. 참고로, 사용한 툴은 dbdiagram.io이다. (정말 편하고, 이런 툴을 무료로 사용할 수 있음에 너무나도 감사하다!) https://dbdiagram.io/home dbdiagram.io - Database Relationship Diagrams Design Tool dbdi..
10장 - 1. 객체 리터럴 (객체 / 객체 리터럴) 10.1 객체란? - 객체 : 0개 이상의 프로퍼티로 구성된 집합. 키(key)와 값(value)으로 구성된다. - 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값 가능. 심지어 자바스크립트의 함수도 일급 객체이므로 프로퍼티 값으로 가능. 프로퍼티 값이 함수일 경우, 일반함수와의 구분을 위해 메서드(method)라고 부른다. 즉, 객체는 프로퍼티와 메서드로 구성된 집합체. * 프로퍼티 : 객체의 '상태'를 나타내는 값(data) * 메서드 : 프로퍼티(상태데이터)를 참조하고 조작할 수 있는 '동작'(behavior) 10.2 객체 리터럴에 의한 객체 생성 * 클래스 기반 객체지향 언어(ex: C++, Java) : 클래스를 사전 정의하고, 필요한 시점에 new 연산자와 함께 생성자(constru..
[4주 프로젝트] 2. 와이어프레임 작성 프로젝트 아이디어를 선정한 후, 웹어플리케이션의 전체적인 레이아웃과 기능들을 팀원들과 논의하기위해 와이어프레임을 작성하였다. 와이어프레임 작성 툴 중, 우리팀은 figma를 이용하였다. https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 처음에는 와이어프레임 / 프로토타입 개념을 혼동하였다. 실제 실무에서는 두 개념을 같이 사용한다고 하지만, 그래도 정확하게 아는게 좋을 것 같아 찾아보았다. 나같은 사람이 있을 수도 있으니 간단..
[4주 프로젝트] 1. 프로젝트 아이디어 기획 프로젝트를 진행함에 있어 가장 먼저 해야 하면서도 가장 힘든 건 프로젝트 주제를 선정하는 것이었다. 우리팀은 아이디어 회의를 하는데만 2일 이상이 걸렸고, 중간에 한번 주제를 변경하기도 했다. 팀원들과 아이디어 회의 전날, 각자 간단하게라도 몇개 생각해오기로 하였다. 어떤 걸로 웹사이트를 만들면 좋을까, 고민하다가 내가 경험한 것 중에 평소 있었으면 좋겠다고 생각한 서비스, 일상생활에서 불편함을 느꼈던 부분 등을 먼저 생각해보았다. 아무래도 실제 내가 불편함을 느꼈던 걸 주제로 프로젝트를 진행하면 훨씬 열정적으로, 재미있게 할 수 있을것 같았다. 최근 내가 겪었던 문제들, 불편한점들을 쭉 나열해보았다. 내가 생각해낸 아이디어들은 다음과 같다. 1. 아파트 혹은 오피스텔 입주민간의 커뮤니티 서비스 : 최근..
[프로그래머스] 소수 만들기 [ 문제 ] 이 문제를 설명하자면, 배열인 nums에 들어있는 숫자 중, 서로 다른 3개를 골라 더하여 소수가 되는 경우의 개수를 return하는 것이다. - 입출력 예시로 설명을 하면, nums가 [1,2,3,4]이면 서로다른 3개를 골라 소수가 되는 경우는 [1,2,4] === 7, 하나의 경우밖에 없기때문에 1이 return 됩니다. [ 풀이 ] 1/ 먼저 소수인지를 판별하는 함수를 하나 만든다. 2/ 반복문을 이용하여 nums의 서로 다른 3개의 수를 더한다. 3/ 1번에서 만든 소수판별함수에 넣어 소수인지 확인한다. 1/ 먼저 소수인지를 판별하는 함수를 하나 만든다. function isPrime(num){ for(let i = 2; i

티스토리툴바