Jaypedia

오늘부터 새로운 챌린지를 해 보려고 한다. 30일간 프레임워크, 라이브러리 등이 없이 오로지 순수한 자바스크립트만으로 작은 프로젝트들을 완성시키는 것이다. 챌린지를 하며 기대되는 효과 자바스크립트를 매일 공부하는 꾸준함 어떤 기능을 구현할 때 로직을 짜는 것에 익숙해지는 것 자바스크립트 문법에 익숙해지기 공부 방법 강의 제작자 Web Bose가 Github에 코드를 공유해 놓았다. 코드를 다운로드하면 각 프로젝트마다 index-START.html 파일과 index-FINISHED.html 파일이 있다. START로 스스로 문제를 풀어 본 후, FINISHED를 확인해 답안을 체크하면 된다. 사실 JavaScript30을 안 지는 꽤나 되었지만 시작을 미뤄 오고 있다가, 더 이상 미루다가는 내년이 되겠다 ..

Description 함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. Constraints x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 나의 풀이 function solution(x, n) { let answer = []; for(let i = 1; i

Crash Course Computer Science 3번째 시간! NOT, OR, AND가 프로그래밍 언어에서 무슨 일을 하는지는 대략적으로나마 알고 있어서 수월하게 들을 수 있을 줄 알았지만, 이것을 전기적/하드웨어적으로 본다는 것은 또 다른 것이었다. Binary : of two states 2가지 전기적인 상태만으로도 중요한 정보를 표현할 수 있다. On : 전류 흐름(electricity is flowing), true Off : 전류 흐르지 않음(no electricity is flowing), false Why Computers use binary? 1. 2진법으로는 상태를 명확하게 나타낼 수 있다. 중간 상태가 없어서 애매함이 없다. 예전에는 3진법이나 5진법도 초기 전자 컴퓨터에 사용했지..

지난 시간, Early Computing에서는 20세기 초반까지의 컴퓨터 역사를 알아보았다. Tabulating machine과 같은 특수 목적 장치는 수동으로 이루어졌던 작업들을 자동화하여 정부와 사업에 많은 이익을 가져다주었다. 하지만 사회 시스템 규모는 예측 불가능할 정도로 커져갔고, 인구도 급격히 늘었으며, 인간의 지적 수준도 매우 높아졌다. 곧 작은 사이즈의 기계적인 컴퓨터가 방 하나 크기의 거대한 기계로 변화하였는데, 이것은 미래의 혁신을 위한 무대가 되었다. Harvard Mark I 가장 크기가 큰 전기식 기계 컴퓨터(electro-mechanical computer)중 하나 2차 세계대전 중 IBM이 동맹군을 위해 1944년 개발 765,000개의 부품, 3백만개의 연결, 500마일의 전..

Codepen에서 CSS로 만든 작품들을 보던 중, 우연히 내 눈을 사로잡은 것이 있었다. 스크롤링을 할 때 일반적으로 되는 게 아니라, 마치 입체감이 있게 보이는 것이었다. 그것을 "Parallax Scrolling"라고 하는 것을 처음 알게 되었다. Parallax란? 두산백과에 따르면 "관측자가 어떤 천체를 동시에 두 지점에서 보았을 때 생기는 방향의 차"라고 요약해서 설명하고 있다. 원래는 과학, 특히 천문학에서 쓰이는 말이다. 멀리 있는 물체와 가까이 있는 물체가 있고, 그것을 나란히 포개서 보았을 때, 시선을 움직이게 되면 가까이 있는 물체는 빠르게 움직이는 것처럼 보이고, 멀리 있는 물체는 천천히 움직이는 것처럼 보인다. 그러면서 공간감을 느끼게 되는 것이다. 이것을 스크롤링에서도 활용한 것..

유용한 팁을 많이 알려주는 Nomad Coders를 구독하고 있는데, 바로 어제 단 50초 만에 유용한 크롬 익스텐션을 알려주는 영상이 업로드되었다. 영상은 여길 클릭! 내가 이미 쓰고 있는 것도 있었고, 처음 알게 된 것도 있었다. 클론 코딩을 하면서 배울 수 있는 게 정말 많은데, 이런 것들을 알고 잘 사용한다면 코딩의 질이 매우 상승할 것 같다. 1. ColorZilla 웹 페이지에서 똑같은 색의 RGB 코드를 뽑아내고 싶을 때 사용한다. 나는 크롬 익스텐션은 아니고 그냥 프로그램인 Color Cop이라는 것을 몇 달째 사용중인데 이것도 나름 편하다. 상태 표시줄에 등록해 놓고 필요할 때마다 쓰고 있다. 2. CSS Viewer 마우스로 element에 갖다 대기만 하면 적용된 CSS를 편하게 볼 ..

Description 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. Constraints arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 My Solution function solution(arr) { let sum = 0; for (let i = 0; i < arr.length; i++) { sum += arr[i]; } let avg = sum / arr.length; return avg; } for문을 돌려서 배열의 각 인덱스에 해당하는 원소들을 모두 합해 sum에 할당한다. 그 후 배열의 길이로 나눠줘 평균을 구한다. Other's solution function ..

오늘, 아주 유용하게 잘 쓰고 있던 Prettier가 특정 파일에서 갑자기 적용되지 않았다. 원래 저장을 하면 Prettier가 적용되어야 하는데, VS Code의 하단에 있는 Prettier 버튼을 클릭하고 터미널을 보니 "Require config set to true and no config present. Skipping file." 이런 문구만 뜨는 것이었다. 그래서 이것을 토대로 구글링을 했더니, 나와 같은 것을 겪은 사람이 질문을 올려놓았다. Require config set to true and no config present. Skipping file. · Issue #1257 · prettier/prettier-vscode · GitHub Require config set to true..

Crash Course의 첫 번째 수업! 바로 "초기 컴퓨팅"에 관한 이야기를 하고 있다. 우리 삶에서 없어서는 안 될 필수적인 존재로 자리잡은 컴퓨터는, 어디서부터 시작되었고 어떻게 발전되었을까? 주판에서 시작된 연산의 역사가 어떻게 첨단 기계까지 올 수 있었는지 살펴보자. 현재 컴퓨터는 세상에서 Life Blood(생명선)과 같은 존재. 모든 컴퓨터가 만약 한 번에 꺼진다면 어떤 일이 생길까? power grid(전력망)는 꺼질 것이다. 차량들이 충돌하고, 비행기들은 추락한다. 정수처리장은 정지한다. 증권 거래소도 멈춰버린다. 음식을 실은 트럭들은 배달 목적지를 모르게 된다. 일하는 사람들은 월급을 받지 못한다. 컴퓨터와 연관이 없어 보이는 물건들도 만들어질 수 없게 된다. 예를 들면 의자, 티셔츠 ..

자바스크립트로 계산기를 만들 때, 가장 먼저 생각해 볼 것은 입력된 숫자와 연산자들을 저장하는 방법이다. 이것을 쉽게 구현할 수 있도록 하는 것이 Class이다. 클래스 안의 다양한 함수들을 통해 계산기의 각 기능을 세분화하여 동작하도록 하였다. 1. 자바스크립트로 조작해 줄 HTML 요소들을 가져오기 const numberButtons = document.querySelectorAll('[data-number]'); const operationButtons = document.querySelectorAll('[data-operation]'); const equalsButton = document.querySelector('[data-equals]'); const deleteButton = documen..