Front-End/JavaScript

Front-End/JavaScript

[프로그래머스 / JavaScript] Lv.2 피보나치 수

문제 피보나치 수는 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, ... 와..

Front-End/JavaScript

[JavaScript] 자바스크립트의 this

📚 코어자바스크립트 (정재남, 2022) 책과 인프런의 코어자바스크립트 강의를 보고 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 객체 지향 언어에서의 this 이번주 면접 스터디 발표 주제는 this! 기술매니저님들 말씀에 따르면 현업에서는 잘 쓰지 않지만 면접에서는 꼭 나온다는 this를 그렇다면 왜 중요하게 생각하고 왜 쓰는 것일까? 부터 찾아보았다. 객체 지향 언어에서 클래스는 하나의 큰 모듈이라고 할 수 있다. 위와 같이 이름, 체력, 마력이 지정되어있고 스킬 사용 시 이 캐릭터의 마력을 50만큼 깎는다고 지정할 때 this를 사용해 이 클래스 내부의 변수를 지칭할 수 있다. 조사해 본 자료에 따르면 자바스크립트는 맨 처음 개발할 때 이러한 객체 지향 개념 없이 만들고 싶었는데, 당시 객..

Front-End/JavaScript

[JavaScript] 자바스크립트로 동적 테이블 만들기 (ft. 버튼 클릭)

구현하려고 하는 동적 테이블리액트 주차를 시작하기 전에 바닐라 자바스크립트로 간단한 1/N 계산기를 만들어보고 싶었다. 사용자가 데이터를 편하게 입력할 수 있도록 행은 메뉴를, 열은 인원을 동적으로 입력할 수 있도록 table로 만들었다.   HTML 구성 메뉴추가 인원추가 🍞 메뉴명 금액 - - ..

Front-End/JavaScript

[JavaScript] 브라우저 렌더링 과정(원리)

프론트엔드 기술 면접에서 중요하게 나오는 주제 중 하나가 브라우저 렌더링 원리이다. 그렇다면 왜 브라우저 렌더링 원리를 중요하게 여기고, 우리는 그에 대해 알아야 할까?   브라우저 렌더링 과정(원리)을 알아야 하는 이유 C나 JAVA와 같은 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행된다. 자바스크립트도 런타임 환경에서 사용한다면(node.js) 이야기가 다르겠지만, 프론트엔드 개발자가 개발할 클라이언트 사이드에서의 자바스크립트는 어떻게 실행될까?    웹 브라우저에서는 뼈대를 그리는 HTML, 살을 붙여 꾸며주는 CSS와 그것의 동작을 수행하고 제어하는 자바스크립트가 함께 실행된다.    따라서 내가 의도한대로 코드를 실행시키려면 브라우저가 우리가 작성한 코드를 어떤 순서대로 어떻게 읽..

Front-End/JavaScript

[JavaScript] 자바스크립트로 숫자야구 프로그램 만들기

문제 컴퓨터는 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..

Front-End/JavaScript

[JavaScript] 자바스크립트 변수 여러 개 한 줄에 선언하기

간단한 코드를 작성하던 중, 변수 x와 y를 선언 시 동일한 값을 할당할 것이기 때문에 한 줄에 짧게 작성할 수 있는지 궁금해졌다.   1) let p, y = 0 ❌function solution(s){ const str = s.toLowerCase(); let p, y = 0; for(let i of str) { if(i === 'p') p++; if(i === 'y') y++; } return p === y ? true : false;}  위의 코드를 실행했을 때 p값이 제대로 담기지 않아 for문 안에 console.log을 넣어 확인해 보았다.  function solution(s){ const str = s.toLowerCase(); ..

Front-End/JavaScript

[JavaScript] Uncaught ReferenceError: Cannot access 'X' before initialization

오류 발생 경로// 입력값 받기let value = prompt('답을 맞춰보세요!');if(value === '' || value === null) alert('입력된 값이 없습니다.');else numberBaseball(value);// 입력값 콘솔에 찍기const numberBaseball = value => { console.log(value)}; 위와 같이 코드를 작성한 후 prompt에 값을 입력했을 때, numberBaseball 함수에서 value값이 콘솔에 찍히지 않고 아래와 같은 오류가 발생했다.   오류 내역Uncaught ReferenceError: Cannot access 'numberBaseball' before initialization   오류 원인let 또는 const로..

Front-End/JavaScript

[노마드코더 / 바닐라JS] momentum 클론 코딩(4)_To do and Weather

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. To do Set up input에 to do를 입력하고 버튼 또는 엔터를 눌렀을 때 해당 to do 데이터를 변수에 보관하고, 사용자가 input에 입력한 값은 지워 화면에서 보이지 않도록 설정한다. // HTML Log In 00:00:00 // JavaScript const toDoForm = document.querySelector('#todo-form'); const toDoInput = toDoForm.querySelector('#todo-form input'); const toDoList = document.querySelector('#todo-list'); function ha..

Front-End/JavaScript

[freeCodeCamp / 바닐라JS] 초보자를 위한 바닐라JS 프로젝트(1)_Color Flipper

온라인 학습 플랫폼인 프리 코드 캠프(free code camp)에서는 초보자를 위한 40가지의 자바스크립트 프로젝트를 안내하고 있다. 항해99 온보딩주차 팀원분들이 자바스크립트 연습을 위해 해당 프로젝트를 만들어보는 스터디를 제안해 주셔서 기쁘게 참여했다. 오늘의 구현 프로젝트는 Color Flipper!   기능 분석 해당 프로젝트는 다음과 같은 기능을 가지고 있다. CLICK ME 버튼은 클릭할 수 있다.버튼 클릭 시 랜덤한 색상값을 가져와 HTML의 배경에 해당 색상값을 적용시킨다.랜덤한 색상값은 헥스 코드(HEX CODE)를 이용해 표현한다. 헥스 코드란 특정한 색을 표현하기 위한 색상 표현법으로, HEX라는 이름처럼 색상을 6자리의 16진수로 표현한다. 16진수는 0, 1, 2, 3, 4, 5..

Front-End/JavaScript

[노마드코더 / 바닐라JS] momentum 클론 코딩(3)_Clock, Quetes and Background

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Clock Interval interval이란, '매번' 일어나야 하는 무언가를 말한다. (ex. 매 2초) 서버를 주기적으로 확인한다거나, 매 시간마다 주식시장 API를 확인한다거나 해야 할 때 주로 사용한다. 이러한 기능을 제공하는 것이 setInterval()이다. ✨ setInterval(code | func[, delay]) - 첫번째 매개변수: 내가 실행하고자 하는 code 또는 function (단, code는 보안 상의 이유로 사용을 권장하지 않음) - 두번째 매개변수: 호출되는 code 또는 function의 간격을 몇 ms로 할 것인지 설정 Timeout timeout은 '..

Olivia Kim
'Front-End/JavaScript' 카테고리의 글 목록 (2 Page)