본문 바로가기

자바스크립트28

Lv.2 - 다리를 지나는 트럭 (스택/큐) 안녕하세요. 좋아요요정입니다! 프로그래머스 다리를 지나는 트럭 문제를 풀었습니다 :) 예! Lv.2 - 다리를 지나는 트럭 링크 문제 설명 - 트럭 여러대가 일차선 다리를 정해진 순으로 건넙니다. 모든 트럭이 건너는 최소 시간을 알아내보세요. - 다리는 한방향으로 이동가능하고 먼저 들어온 트럭이 먼저 나갑니다. - 다리는 정해진 무게와 길이가 있습니다. 무게=총 올라갈 수 있는 트럭의 무게이고, 길이는 총 올라갈 수 있는 트럭의 수입니다. 입력값 - bridge_length : 다리의 이동거리(and 최대 올러갈 수 있는 트럭의 수) - weight : 다리가 견딜 수 있는 총 무게 - truck_weights : 다리를 건너려는 트럭 무게의 배열 제한 조건 bridge_length, weight, tr.. Study-Note/프로그래머스 2022. 3. 13.
프론트엔드 면접을 대비하여 지식 요약3 (Network 관련) 안녕하세요. 좋아요요정입니다. 프론트엔드 면접을 준비하며 Network에 대해 조금이라도 이해하고자 정리한 개념입니다. :) 어렵네요 화이팅! [목차] 네트워크 기본 지식 CORS HTTP TCP/UDP, IP 네트워크(network) 네트워크란 컴퓨터들이 통신망을 통해 서로 그물처럼 연결된 체계를 말합니다. 클라이언트와 서버간의 정보가 오고가는 역할을 하는 기술의 총칭을 의미하며, 데이터를 케이블에 실어 나르는 것을 의미합니다. 컴퓨터와 프린터, 컴퓨터와 운영체제, 서버와 클라이언트 등 네트워크를 이용하는 관계들이 서로의 네트워크의 종류와 상관 없이 누구나 정보를 주고받을 수 있습니다. 네트워크의 종류 LAN : 비교적 가까운 거리의 컾뮤터와 주변기기들을 연결하는 네트워크 MAN : 도시등과 같이 지리.. Journal/개발일기 2022. 3. 10.
프론트엔드 면접을 대비하여 지식 요약2(JavaScript 관련) 안녕하세요. 좋아요요정입니다. 오늘은 JavaScript의 요약을 정리해봅니다. 면접 전 준비기간에 보고, 헷깔리는 개념에 대해서는 한번 더 공부하기 위해서 만든 게시글입니다. :) [Javascript 관련 목차] - 함수 - 스코프 - let, const - 객체 - 원시값&참조타입 - 실행 컨텍스트 - 프로토타입 - this - 클래스 - DOM - Map/Set - 브라우저 랜더링 - 이벤트 - AJAX - 비동기프로그래밍 - Async/await - Promise - REST API 함수 프로그래밍에서 함수란? 입력되는 값으로 특정 로직을 실행하고, 그에 대한 값, 결과물을 출력하는 코드 블록 선언 : function add(x, y) { return x + y; } 호출 : add(2,5) 함.. Journal/개발일기 2022. 3. 10.
Lv.2 - 기능개발 (스택/큐) 안녕하세요! 좋아요요정입니다 🙌 지난주 강의에선 양방향 링크드리스트와 스택 & 큐를 진행했습니다. 그 중 큐와 관련된 프로그래머스 숙제를 작성해봅니다! 문제 요약 - 프로그래머스 팀에서 기능 개선 작업을 수행 중. - 각 기능은 진도가 100%일 때 서비스에 반영. - 선입 선출의 구조로 뒤의 기능이 개발이 완료되어도 대기. 앞의 기능이 완료되었을 때 완료된 기능들이 함께 배포됨 제한 사항 - 작업의 개수는 100개 이하 - 작업 진도는 100 미만의 자연수 - 작업 속도는 100 이하의 자연수 - 배포는 하루에 한 번만 가능 입출력 예 progresses speeds return [93, 30, 55] [1, 30, 5] [2, 1] [95, 90, 99, 99, 80, 99] [1, 1, 1, 1, .. Study-Note/프로그래머스 2022. 3. 2.
20. 객체와 배열의 부족함을 채워주는 Map과 Set 안녕하세요. 좋아요요정입니다. 오늘은 ES6에 도입된 Map과 Set에 대해 알아보겠습니다. 컬렉션? 컬렉션이란 데이터들의 집합, 데이터를 모아놓은 자료구조의 개념입니다. 자바스크립트에서 컬렉션으로 잘 사용하는 데이터 타입은 객체입니다. 객체는 key와 value를 하나씩 쌍으로 가진 프로퍼티를 끊임없이 추가할 수 있는 컬렉션입니다. Map과 Set은 ES6에서 도입된 새로운 컬렉션입니다. Map은 Map 객체로 키-값 쌍을 보유하는 형태의 자료구조이고, Set객체는 자료형에 관계 없이 원시 값과 객체 참조 모두의 유일한 값을 저장하는 형태의 자료구조입니다. 자바스크립트는 객체로 자료구조가 가능한데 왜 Map과 Set이라는 새로운 자료구조를 도입했을까요? 도입한 이유는 일반 객체로는 해결할 수 없는 문제.. 카테고리 없음 2022. 2. 18.
Lv.1 - 완주하지 못한 선수 (해시) 안녕하세요. 좋아요요정입니다! 스터디에서 자료구조를 시작했습니다 예~~ 🙌 숙제로 프로그래머스를 시작합니다. Lv.1. 완주하지 못한 선수 문제 요약 수많은 마라톤 선수들이 마라톤에 참여. 단 한명의 선수를 제외하고는 완주. 마라톤에 참여한 선수들의 이름이 담긴 배열과 완주한 선수들의 배열이 주어졌을 때 완주하지 못한 단 한명의 선수를 반환하는 함수를 작성. 제한 사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["l.. Study-Note/프로그래머스 2022. 2. 17.
19. 클로저. 반환된 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합! 안녕하세요. 좋아요요정입니다. 오늘은 클로져에 대해서 알아보겠습니다. 사실 저는 제가 작성하는 코드에 클로저를 사용하지 않는다고 생각하고 있었습니다. 이름은 알지만 낯설고 사용해보지 않았다고 생각했었는데 글쎄 리액트의 Hooks이.. 클로저의 특성이라고 합니다!(두둔) const [count, setCount] = useState(0); 리액트의 함수형 컴포넌트 훅에서는 usdState()를 통해 state를 선언하고, state와 함께 선언되어지는 setCount라는 함수를 호출해 count의 상태를 관리할 수 있습니다. '클로저를 사용해봤다'라고 생각하니, 클로저가 조금 친숙해지네요. 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이라고 합니다. "함수가 선언된 어휘적 환경"을 이해하기 위해.. Study-Note/JavaScript 2022. 2. 9.
18. 자바스크립트의 Strict mode 안녕하세요. 좋아요요정입니다. 오늘은 자바스크립트의 strict mode에 대해 알아보겠습니다. Strict mode 자바스크립트는 구현되는 환경에 따라 this가 객체인스턴스, 윈도우, 생성되는 객체, 호출되는 객체 등으로 변경이 되고, var, const let 키워드에 따라 다르게 적용되는 스코프, 그리고 함수 호이스팅, 전역변수의 호이스팅, 심지어 var는 같은 변수명이어도 에러가 나지 않는 모습을 보입니다. 자바스크립트의 이런 특징으로 인해 어디서 오류가 발생했는지 파악까지 오랜 시간이 걸리는 경우도 있습니다. 자바스크립트는 잠재적인 오류가 발생하기 어려운 환경을 제공해주기 위해 자체적으로 strict mode를 제공합니다. strict mode 1. strict mode를 적용하면 기존에 조용.. Study-Note/JavaScript 2022. 2. 4.
17. 자바스크립트의 클래스는 "특별한 함수"이다.(선언부터 상속까지) 안녕하세요. 좋아요요정입니다. 자바스크립트는 ES6에서 클래스 기반 언어들과 비슷하게 객체를 생성하는 "클래스"가 추가되었습니다. 프로토타입 객체지향 프로그래밍의 자바스크립트에서는 기존 생성자함수를 이용해 객체를 생성했었는데 클래스가 추가된 이유는 무엇일까요? 그리고 클래스 사용법이 어떠한지 함께 살펴보겠습니다. 클래스 클래스는 객체를 생성하기 위한 탬플릿입니다. 붕어빵을 찍어내는 틀 = 클래스, 붕어빵 = 객체라는 예시가 유명합니다. 자바스크립트는 프로토타입 기반의 객체지향 패러다임을 제공하는 언어입니다. 클래스가 도입되기 이전의 자바스크립트는 프로토타입을 사용하기 때문에 클래스 키워드가 없이도 생성자함수, prototype을 이용해 객체지향에서 사용하는 상속기능을 구현할 수 있습니다. 자바스크립트의 .. Study-Note/JavaScript 2022. 1. 29.