진행 방식 1주차는 온보딩 기간이었다. 7 문제가 github에 주어지고 git을 통해 fork를 받은 후 pr을 날리는 방식으로 진행이 되었다. 각 항목마다 요구사항은 기능목록을 만들어서 진행을 했다. 또한, 소통은 슬랙을 통해 진행했다. 슬랙이 모집되고 문제가 공개되자 여러 채널들이 활성화 되었다! (하지만 문제를 스스로 생각하고 해결하는 힘을 길렀으면 좋겠다는 교육 목적으로 인해 이젠 숨김,,!..🫥) 배운점 기능 목록 작성 이전에는 머리속으로만 생각을 하고 풀면서 막히면 구조를 생각했다. 하지만 기능 목록을 작성하라는 요구사항을 통해 문제를 풀기 전 문제를 분석하고 필요한 기능목록을 세워 해당 기능목록을 하나의 단계로 보고 풀이를 진행했다. 먼저, 문제의 요구사항을 정확히 파악할 수 있었다. 문제..
겪은 상황 node를 14 버전에서 실행이 가능해야 한다는 요구사항이 있어 nvm을 사용해 node 버전을 변경해봤다 nvm으로 변경하기 오류 계속해서 경로에 문제가 있다는 오류가 나왔다. 모자이크로 처리된 부분이 한글인코딩 과정에서 깨진 듯 해 찾아보았더니 한글의 문제가 맞았다.(다음에 노트북 사면…username 영어로 해야지…) $ nvm root "C:\Users\사용자이름\AppData\Roaming\NVM" 다음 명령어로 root를 옮겨주었더니 제대로 다운이 잘 된 것을 확인할 수 있다 🚩참고한 곳 버전 다운로드 및버전 사용 nvm install 버전을 통해 해당 버전을 다운받아준다 nvm ls 또는 nvm list 로 다운로드 된 목록을 확인한다 nvm use 버전 으로 사용하고 싶은 노드 ..
문제 유형 동적 계획법 문제 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = {10, 20, 10, 30, 20, 50} 이고, 길이는 4이다. 입력 첫째 줄에 수열 A의 크기 N (1 ≤ N ≤ 1,000)이 주어진다. 둘째 줄에는 수열 A를 이루고 있는 Ai가 주어진다. (1 ≤ Ai ≤ 1,000) 출력 첫째 줄에 수열 A의 가장 긴 증가하는 부분 수열의 길이를 출력한다. 예제 입력 1 6 10 20 10 30 20 50 예제 출력 1 4 풀이 기준 인덱스를 설정하고 for문을 도는 방식이다. 기준 인덱스인 i를 두고 기준 인덱스보다 이전 인덱스..
객체 란? 🌈 자바스크립트는 객체 기반의 프로그래밍 언어 ⚠ 원시 값을 제외한 나머지 값( 배열, 함수, 정규 표현식 등)은 모두 객체다 원시 타입은 단 하나의 값만 나타냄 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 즉, 원시 타입 = 변경 불가능 한 값, 객체 타입 = 변경 가능한 값 📚 객체는 0 개이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성됨 ❗ 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음 ❗ 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있음 ⇒ 함수도 프로퍼티 값으로 사용할 수 있음 🔥 이때 프로퍼티의 값이 함수면 함수를 메서드라고 부른다. (일반함수와 비교하기 위해서) ✔ 프로퍼티 : 객체의 상태를 나타내는 값(..
타입 변환이란? 명시적 타입 변환( 타입 캐스팅 ) 자바스크립트의 모든 값에는 타입이 있음 📚타입은 개발자가 의도적으로 다른 타입으로 변환할 수 있음 암묵적 타입 변환 ( 타입 강제 변환 ) 📚 개발자의 의도와 관련 없이 타입이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 특징 기존 변수 값을 재할당하여 변경하는 것이 아님 피연산자의 값을 암묵적 타입 변환해서 새로운 타입으로 만들어내고 단 한 번 사용하고 버린다. 공통 특징 기존 원시값을 직접 변경하지 않음 🔥 원시 값은 변경 불가능한 값이므로 변경할 수 없음. 따라서, 타입 변환은 기존 원시값을 사용해 다른 타입의 새로운 원시값을 생성하는 것 그래서 어떻게 코딩을 하라고? 자신이 작성한 코드에서 암묵적 타입 변환이 발생하는지, 발생한다..
strict mode란? ES5부터 strict mode(엄격 모드)가 추가되었습니다. strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킵니다. ES6에 도입된 클래스와 모듈은 기본적으로 strict mode가 적용됩니다. ESLint 같은 린트 도구를 사용해서 strict mode와 유사한 효과를 얻을 수 있습니다. 린트 도구는 정적 분석(Static Analysis) 기능을 통해 소스코드를 실행하기 전에 소스코드를 스캔하여 문법적 오류만이 아니라 잠재적 오류까지 찾아내고 오류의 원인을 리포팅해주는 유용한 도구입니다. 린트 도구는 strict mode가 제..
객체는 상태(State)를 나타내는 프로퍼티와 동작(Behvior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조입니다. 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 합니다. 생성자 함수를 정의하는 시점에서 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없습니다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요합니다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공합니다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(Self-Referencing Variable)입니다. ..
문제 유형 배열, 해쉬 테이블 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. 배열의 숫자 값을 2개 더했을 때 target값과 같다면 각 인덱스를 아무 순서에 따라 배열로 반환해라. 반드시 해답은 1개 있으며 배열의 숫자를 반복해서 사용하며 안된다. 예시 Input: n..
이미지 스프라이트? 여러 개의 이미지를 하나의 이미지로 관리하는 이미지를 말한다. 웹 페이지를 로드하면 수 많은 이미지들을 다운받기 위해 웹 브라우저는 서버에 이미지 요청을 하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 페이지의 로딩 시간은 오래 걸리게 됩니다. 이미지 스프라이트를 사용하게 되면 이미지를 다운받기 위해 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에선 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 관리에도 용이합니다. 예 위와 같은 아이콘들을 통째로 가지고 있는 이미지가 있다고 치자. 이 이미지의 원하는 부분을 잘라 사용하면 불러오는 이미지의 수는 줄어들 것이다. 네이버에서는 많은 카드들이 좌측으로 가는 버튼, 우측으로..
a태그 내부에 블록 요소를 넣어도 되는가? 정답은 O이다. HTML 유효성 검사 페이지를 통해 아래 코드를 검사해보자. 궁금하다! 결과는 에러가 없다고 뜬다! 원래라면 인라인 요소인 a태그 내부에 블록 요소인 div를 넣는 것이 불가능하다. HTML 4.01표준만 보더라도 인라인 요소인 a태그는 인라인 요소만 감쌀 수 있다고 규정되어 있다. 하지만 HTML5 표준에서는 가능하다고 명시되어 있다. 왜? HTML5에서는 태그 분류를 단순히 인라인, 블록으로 나눈 것이 아니라 태그와 성격와 특성에 따라 나누었다. 이는 HTML 콘텐츠 모델에서 확인할 수 있다. 이 HTML 콘텐츠 모델에 의해 a태그가 flow content(플로우 콘텐츠)를 품을 수 있다. 따라서 a태그는 인라인 속성만이 아닌 블록 요소도 담..
