업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다. 객체의 getter, setterconst person = { firstName: 'Olivia', lastName: 'Kim', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }};console.log(person.fullName); // Olivia Kimperson.fullNam..
객체의 프로퍼티에 접근하는 두 가지 방법 객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다. const name = { firstName: 'olivia', lastName: 'kim'} 위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.점 표기법: name.firstName대괄호 표기법: name['firstName'] 점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기 대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다. 프로퍼티의 키가 숫자인 경우 다만, 프로퍼티 키가 숫자일 ..
요소가 한국어인 배열을 sort()로 정렬하기 설정한 조건에 따라 배열 안의 요소를 정렬해주는 sort() 메서드는 배열 안의 모든 요소를 '문자형'으로 변환한 후, 유니코드 단위의 값을 비교한 뒤 재정렬한다. 이때 배열 안의 요소 값이 '한국어'일 때 sort()를 사용하게 되면 설정한대로 오름차순, 내림차순으로 정렬이 이루어질까? const kors = ['대한민국', '호주', '독일', '가나'];const nums = ['100', '1', '3', '0', '000', '99'];// 일반적인 sortconsole.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]console.log(nums.sort((a, b) => a -..
JSON(JavaScript Object Notation)이란? 경량의 데이터 교환 형식이다. 텍스트 기반의 형식으로, 인터넷에서 데이터를 주고받을 때 많이 사용된다. JSON은 JavaScript에서 객체를 만들 때 사용하는 문법을 기반으로 만들어졌다. 👉🏼 즉, 자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교환 형식이다. JSON 구조 { "name": "Alice", "age": 25, "isStudent": true, "courses": ["Math", "Science", "History"], "address": { "city": "New York", "state": "NY" } } 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. (key-value 쌍의 집합) 자바..
모던 자바스크립트란? 모던 자바스크립트 딥 다이브, 모던 자바스크립트 입문.. 모던 자바스크립트라는 말을 많이 접하게 되는데, 모던 자바스크립트가 의미하는 게 대체 뭔지? 가 궁금해져서 이번 주차 스터디 주제를 정하게 되었다. 모던 자바스크립트에서 언제를 기준으로 모던으로 봐야 하는 지에 대한 정확한 기준은 없으나, 일반적으로 모던 자바스크립트라고 말할 때는 다음과 같은 특징을 꼽는다. 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리나 프레임워크를 사용한다. npm이나 yarn 등 패키지 관리자를 사용한다. 주로 ES6 이후의 표기법을 사용한다. 웹팩 등 모듈 핸들러를 사용한다. 바벨 등 트랜스 파일러를 사용한다. SPA(Single Page Application)으로 작성되어 있다. 그렇다면..
문제 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수입니다. 예를 들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요. 제한사항 n은 2 이상 100,000 이하인 자연수입니다. 입출력 예 n return 3 2 5 5 입출력 예 피보나치수는 0번째부터 0, 1, 1, 2, 3, 5, ... 와..
📚 코어자바스크립트 (정재남, 2022) 책과 인프런의 코어자바스크립트 강의를 보고 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 객체 지향 언어에서의 this 이번주 면접 스터디 발표 주제는 this! 기술매니저님들 말씀에 따르면 현업에서는 잘 쓰지 않지만 면접에서는 꼭 나온다는 this를 그렇다면 왜 중요하게 생각하고 왜 쓰는 것일까? 부터 찾아보았다. 객체 지향 언어에서 클래스는 하나의 큰 모듈이라고 할 수 있다. 위와 같이 이름, 체력, 마력이 지정되어있고 스킬 사용 시 이 캐릭터의 마력을 50만큼 깎는다고 지정할 때 this를 사용해 이 클래스 내부의 변수를 지칭할 수 있다. 조사해 본 자료에 따르면 자바스크립트는 맨 처음 개발할 때 이러한 객체 지향 개념 없이 만들고 싶었는데, 당시 객..
구현하려고 하는 동적 테이블 리액트 주차를 시작하기 전에 바닐라 자바스크립트로 간단한 1/N 계산기를 만들어보고 싶었다. 사용자가 데이터를 편하게 입력할 수 있도록 행은 메뉴를, 열은 인원을 동적으로 입력할 수 있도록 table로 만들었다. HTML 구성 메뉴추가 인원추가 🍞 메뉴명 금액 - - 메뉴 삭제 식사비용 1/N 계산의 경우 메뉴 한 개, 사람 두 명 이상은 필수값이므로 HTML에 하드코딩했다. 두 번째 메뉴, 세 번째 사람부터는 버튼을 클릭해 동적으로 추가 및 삭제가 가능하도록 HTML을 구성했다. 버튼 클릭 시 행 추가하기 전체 코드 document.getElementById('add_menu').addEventListener('click', () => { // table 변수는 다른 함수에..
프론트엔드 기술 면접에서 중요하게 나오는 주제 중 하나가 브라우저 렌더링 원리이다. 그렇다면 왜 브라우저 렌더링 원리를 중요하게 여기고, 우리는 그에 대해 알아야 할까? 브라우저 렌더링 과정(원리)을 알아야 하는 이유 C나 JAVA와 같은 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행된다. 자바스크립트도 런타임 환경에서 사용한다면(node.js) 이야기가 다르겠지만, 프론트엔드 개발자가 개발할 클라이언트 사이드에서의 자바스크립트는 어떻게 실행될까? 웹 브라우저에서는 뼈대를 그리는 HTML, 살을 붙여 꾸며주는 CSS와 그것의 동작을 수행하고 제어하는 자바스크립트가 함께 실행된다. 따라서 내가 의도한대로 코드를 실행시키려면 브라우저가 우리가 작성한 코드를 어떤 순서대로 어떻게 읽어주는지, 즉 ..
문제 컴퓨터는 0과 9 사이의 서로 다른 숫자 3개를 무작위로 뽑습니다. ex. 123, 579 사용자는 컴퓨터가 뽑은 숫자를 맞추기 위해 시도합니다. 컴퓨터는 사용자가 입력한 세 자리 숫자에 대해서, 아래의 규칙대로 스트라이크(S)와 볼(B)을 알려줍니다. - 숫자의 값과 위치가 모두 일치하면 S - 숫자의 값은 일치하지만 위치가 틀렸으면 B 기회는 무제한이며, 몇 번의 시도 후에 맞췄는지 기록됩니다. 숫자 3개를 모두 맞춘 경우 게임을 종료합니다. 조건문, 반복문을 활용하여 해결합니다. 진행 방식 컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요! 1번째 시도 : 134 0B0S 2번째 시도 : 238 1B1S 3번째 시도 : 820 2B1S 4번째 시도 : 028 3B 5번째 시도 : 280 3S 4..
