Frontend/프로그래머스 FE 데브코스

컴포넌트 방식으로 생각하기(w. To do list) 1. To-do 리스트를 추상화 하기 - UI를 선언적으로 표현하기 위해 TO-DO 리스트를 Header, TodoFrom, TodoList, App의 4가지로 추상화 👉 컴포넌트의 재사용 가능, 기능 추가시 간편 1) TodoList 컴포넌트 만들기 ◼ 명령형 코드 방식 function TodoList(params) { const $todoList = document.createElement('div'); const $target = params.$target; $target.appendChild($todoList); this.state = params.initialState; this.render = () => { ..

명령형 프로그래밍과 선언적인 프로그래밍 방식의 이해 1. 명령형 : 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 2. 선언형 : 프로그램이 어떤 방법으로 해야하는 지가 아닌 무엇이 같은 지를 설명하는 경우 👉 HTML, SQL 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-1 1. double() 함수 만들기 1) 명령형 방식 function double(arr) { let result = []; for(let i=0; i number*2) } .- 코드가 간결하며, 유지보수하기 쉽다. 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-2, 2 💡 만약 배열에 숫자가 아닌 것들이 들어온다면 ? 1) 명령형 function double(arr) { let result = []; for(le..

사전 문제 1 function Dog(name, age) { this.name = name; this.age = age; } const dog = Dog('happy', 3); console.log(dog.name); 위 코드는 오류가 발생하는데, 그이유는 Dog 함수는 반환 값이 없기에 dog엔 undefiend 값이 들어가게 되고, undefined.name을 찾을 수 없기에 오류가 발생한다. 또한 추가로 함수안에 있는 this는 window를 가르키기에 window.name을 찍으면 happy 가 나온다 ✅ 왜 this가 window를 가르킬까 ? - 그 이유는 함수를 new를 통해 생성하지 않았기 때문이다. - new를 사용하지 않고 함수를 선언할 시 함수 내부의 this는 window를 가르킨다..

자료구조&알고리즘 - 코딩 테스트 준비 방법 1. 알고리즘을 잘 공부하는 법 1) 문제 풀 때 중요한 것 항상 여러가지 풀이법이 있음을 기억 항상 예외가 있을 수 있음 내 답이 베스트인지 의심 시행착오는 기록 ! 다른 사람의 코드를 많이 보자 너무 쉽게 포기하진 말고, 너무 오래 끌지도 말자 2. 코딩 테스트 준비 방법 1) 나의 성향 파악 미리 생각하고 의사 코드를 작성해야 잘 풀리는 사람 일단 코드를 작성하면서 풀어야 잘 풀리는 사람 ( 나 ) 2) 메모하기 : 코드에 주석을 달거나, 노트에 메모하면서 풀자 3) 디버깅 하면서 풀기 3. 좋은 코드를 만드는 방법 1) 간결하고 가독성 좋은 코드 변수, 함수 이름 잘 정하기 중복 코드 제거 함수형 프로그래밍(고차 함수 이용하기) 2) 가지치기 3) 자바..

자료구조&알고리즘 - BFS, DFS [Algorithm] DFS 정리 (tistory.com) [Algorithm] DFS 정리 1. DFS란? - DFS 는 깊이 우선 탐색 을 말합니다. - 루트 노드에서 시작하여, 해당 노드들의 자식을 우선적으로 탐색합니다. * 미로찾기로 예시를 들면, 한 방향으로 갈 수 있을 때까지 계속 가다가 aeunhi99.tistory.com [Algorithm] BFS 정리 (tistory.com) [Algorithm] BFS 정리 1. BFS란? - BFS 는 너비우선탐색을 말합니다. - 루트 노드에서 시작하여 인접한 노드를 탐색하는 방법입니다. Q. 너비우선 탐색을 하면 순서가 어떻게 될까요? A. 0 - 1 - 2 - 3 - 4 - 5 -6 1) 특징 - 두 노 ae..

💡 실습 문제 - 가장 먼 노드 [프로그래머스] 가장 먼 노드(JavaScirpt) (tistory.com) [프로그래머스] 가장 먼 노드(JavaScirpt) 코딩테스트 연습 - 가장 먼 노드 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 aeunhi99.tistory.com 자료구조&알고리즘 - 트리 1. 트리 - 방향 그래프의 일종으로 정점으로 가르키는 간선이 하나 밖에 없는 구조 1) 용어 Degree(차수) : 한 정점에서 나오는 간선의 개수 Level : 루트부터 리프노드까지 단계(루트가 0,1로 시작하여 커진다) 2) 특징 루트 정점을 제외한 모든 정점은 반드시 ..

자료구조&알고리즘 - 큐 1. 큐 - First In First Out 개념을 가진 선형 자료구조 - Linear Queue와 Circular Queue가 존재함 - EnQueue, Rear, Front, DeQueue 1) Linear Queue 선형 큐 ⓐ Array로 구현 class Queue { constructor() { this.queue = []; this.front = 0; this.rear = 0; } enqueue(value) { this.queue[this.rear++] = value; } dequeue(){ const value = this.queue[this.front]; delete this.queue[this.front]; this.front++; return value; } ..

자료구조와 알고리즘 1. 뜻 1) 자료구조 : 여러 데이터들의 묶음을 저장하고, 사용하는 방법을 정의한 것 - 메모리를 효율적으로 사용하고 빠르게 안정적으로 데이터를 처리하는 것이 목표 2) 알고리즘 : 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것 - 특정 문제를 효율적이고 빠르게 해결하는 것이 목표 자료구조의 종류 1. 단순 구조 - 정수, 실수, 문자열, 논리 2. 선형 구조 : 자료들이 선형(한 원소뒤엔 하나의 원소)으로 나열되어 있는 구조 - 배열, 연결리스트, 스택, 큐 3. 비선형 구조 : 원소 간 다대다 관계를 가지는 구조(계층형, 망형) - 트리, 그래프 시간 복잡도 [Algorithm] 시간복잡도 이해하기 (tistory.com) [Algorithm] 시간복잡도 이해하기 1. ..

네트워크 기초 1. 웹페이지 로딩 과정 1) URL을 해석한다 (scheme://:@;/) 2) DNS를 조회한다 DNS는 도메인과 IP 주소를 서로 변환 DNS로 요청을 보내기 전에 브라우저 캐시와 hosts 파일을 참조 (있다면 ip를 반환함) DNS는 보통 통신사(ISP)에서 제공하는 것을 사용 DNS을 운영하는 서버를 보통 Name Server라고 부름 3) 해당 IP가 존재하는 서버로 이동 4) ARP를 이용하여 MAC 주소로 변환 * 네트워크 내 ARP를 브로드캐스팅 시 해당 IP 주소를 가진 기기가 MAC 주소 반환 * IP주소 - 논리적 주소, MAC 주소 - 물리적 주소 5) TCP 통신을 통해 Socket을 연다 네트워크를 통해 해당 기기로 패킷을 전달 3 way handshake로 연..