Front End/css, html, JS
-
항해 99 - 알고리즘 문제 찍먹 주차Front End/css, html, JS 2023. 4. 14. 23:44
그토록 바랐던 알고리즘 주차의 시작~!!! 얼마나 많이 내가 풀 수 있을지 모르지만 사실 너무 재미있다. 간단한 문제부터 너무 어렵고 다양한 풀이 방식에 정신이 없지만 문제와 풀이를 정리하면서 새롭게 알게된 포인트들을 적어 두려고 한다. 하루에 많은 문제들은 풀어서 한꺼번에 적어두면 정신없을 것 같아서 이 페이지는 목차 용도로 사용할 예정! 1일 차 (4/14) Q1 - 직사각형 별찍기 Q2 - 짝수와 홀수 Q3 - 가운데 글자 가져오기 간단하다고 생각했는데 여러 풀이를 보니 역시 100명이 있다면 100명 모두 다른 알고리즘을 낼 것 같다. repeat 메소드, 삼항연산자, truthy/falsy 사용 잊지 말자 2일 차 (4/15) Q4 - 두 정수 사이의 합 Q5 - 문자열을 정수로 바꾸기 Q6 -..
-
항해 99 - Map, Set 자료구조Front End/css, html, JS 2023. 4. 10. 22:28
오늘은 익숙한 구조일 줄 알았던 Map과 익숙한 구조 그 자체였던 Set에 대해 공부했다. 정말 Set은 사용하는 메소드와 식이 달라서 그렇지 사실 개념은 집합에서 크게 벗어나지 않았다. Map은 엥? 이게 뭐지? 객체랑 뭐가 다르지? 라는 생각이 드는 자료구조이다. 1. Map() 위에서 말한것처럼 객체와 크게 다르게 생기지 않은 자료구조이다. 객체와 차이점이 있다면 key값에 변수명(즉, 문자형)만 허용했던 객체와 달리, Map 자료형의 key값에는 다양한 자료형(예. 숫자형, 문자형, boolean 등)이 가능하다는 것이다. Map() 자료형에 대한 다양한 메소드들을 정리해보자. // Map 자료형 선언 const myMap = new Map(); // Map에 데이터 insert, key를 이용해..
-
항해 99 - 함수의 기본 형태 & 확인 문제Front End/css, html, JS 2023. 4. 8. 21:56
사실 강의에는 콜백 함수, 화살표 함수 등 고급 함수의 내용이 잠깐잠깐 나왔지만 4주차에서 더 자세히 알아본다고 했기 때문에 고급 함수는 그때 더 자세히 정리하는 걸로 하고 오늘은 기본적인 형태에 대해서만 정리할 것이다. 이미 앞서서 나머지 매개변수와 초깃값에 대한 내용을 ES6 문법을 정리하면서 정리했기 때문에 익명 vs 선언적 함수에 대한 차이와 확인 문제의 풀이만 써본다. 해당 내용들을 정리하기 전에 함수는 왜 써야하는가? 에 대한 답이 나와야 한다. 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출해서 쓰기 위해서 => 반복 작업 최소화 프로그램의 기능별로 나누어 함수로 작성하는 모듈화를 하기 위해서 => 코드의 가독성 증가 기능별로 수정이 가능하게 하기 위해서 => 유지보수가 쉬워짐 이런 ..
-
항해 99 - ES6 문법 정리Front End/css, html, JS 2023. 4. 8. 12:37
JS 만의 문법을 가득 담고 있는 ES6 문법! 현재 더 새로운 문법이 나왔음에도 ES6를 표준으로 사용하고 있다고 하니 강의 외의 다양한 문법에 대해 공부할 필요가 있는 것 같다. 우선은 배운거라도 완벽하게 익히자! 앞서 설명하셨던 변수 할당 하는 let, const도 ES6 문법이라고 한다. 또한, 자연스럽게 사용하던 템플릿 리터럴과 삼항 연산자, 화살표 함수도 ES6 문법이다. (화살표 함수는 책의 함수 챕터를 정리하면서 같이 정리 할 예정) [ ES란? ] ES는 ECMAScript의 약자인데 사실 ECMA도 약자이다. 다 풀어서 쓰자면, European Computer Manufacturers Association Script의 약자인 것이다. JavaScript의 문법체계라면서 갑자기 유럽? ..
-
항해 99 - JavaScript 반복문 & 확인 문제Front End/css, html, JS 2023. 4. 8. 00:09
반복문은 개인적으로 컴퓨터가 존재하는 이유 그자체라고 생각하기 때문인지 어떤 언어이든 공부할 때 반복문 부분을 제일 좋아했는데 역시나 지금까지 중에 제일 재미있다. 간단한 문제들이 잔뜩 있어서 그런 것 같기도 하고...ㅎ... 익숙한 듯 익숙하지 않은 이 느낌이 너무 즐거운 것 같다. 새롭게 배우는 느낌?! 간단하게 문법과 예제, 확인문제를 정리하고 넘어가자. 1. for 반복문 for 반복문 종류가 이렇게나 많다고??!?? 하면서 강의를 듣기 시작했다. 꽤 세세하게 나눠져있는 이유가 무엇일까?? 각 for문을 살펴보면서 어떤 경우에 더 어울릴지 생각해보자. 1-1. for 기본문 for (초기값; 조건식; 증감문) { // 메인 로직 } 가장 기본적인 for문이다. 가장 범용적인 형식이며 많은 언어들이..
-
항해 99 - JavaScript 배열Front End/css, html, JS 2023. 4. 5. 23:17
벌써 어려운 것 같다... python 이랑 헷갈리는 문법이 너무 많아!!! 기본적인 생성방법과 인덱싱은 제외하고 메소드와 콜백함수에 대해서만 정리한다. 자료 처리할 때 비파괴적 처리인지 파괴적 처리인지 딱히 구분해서 사용하지 않고 자연스럽게 익혔던 것 같은데 책에서 언급된 내용이므로 조금씩 신경써야겠다. 비파괴적 처리 -> 처리 후에 원본 내용의 변경X 파괴적 처리 -> 처리 후에 원본 내용이 변경O 1. 배열 메소드 1-1. 배열 요소 추가하기 [ 배열.push(요소) ] push는 가장 마지막에 해당 요소를 추가해준다. (파괴적 처리) push할 때 추가된 배열의 길이를 반환하고 추가한다. [ 배열.unshift(요소) ] unshift는 배열 가장 앞에 요소를 추가한다. (파괴적 처리) 추가된 배..
-
항해 99 - JavaScript 2주차 확인문제Front End/css, html, JS 2023. 4. 5. 22:16
1. 자바스크립트 개요와 개발환경 설정 1-3. 알아두어야 할 기본 용어 1. 다음 단어 중 식별자로 사용할 수 있는 것은 O표, 식별자로 사용할 수 없는 것은 X표를 하세요 (1) a ( O ) (2) hello ( O ) (3) 10times ( X ) // 식별자는 숫자로 시작해서는 안된다. (4) _ ( O ) (5) $ ( O ) 2. console.log()에서 console은 무엇인가요? ( 식별자 ) 3. console.log()에서 log는 다음 중 무엇일까요? ( 식별자, 메소드 ) 4. 여러 단어로 이루어진 식별자를 만들려고 합니다. 한 단어로 묶어주세요. (1) we are the world ( weAreTheWorld ) (2) create output ( createOutput ..
-
항해 99 - JavaScript 조건문Front End/css, html, JS 2023. 4. 3. 23:37
if, else if, else 구문은 익숙하므로 정리는 스킵하도록 한다. 조건문의 중첩은 가독성과 유지보수에 악영향을 끼치므로 최대한 지양해야 한다. 오늘 공부하면서 너무 놀랐던건 switch와 짧은 조건문(논리합, 논리곱)이다. switch는 지금까지 변수의 값을 비교하는 것에만 썼는데 조건문이 가능하다는 것. 짧은 조건문은 아예 본 적도 없는 문법이라 이해하는데 많은 시간이 걸렸다. 또한, javascript에서만 쓰이는 문법은 아니지만 falsy, truthy라는 용어는 처음 들었기 때문에 한번 정리해보려고 한다. 1. switch 문 사실 switch문은 python에 없는 문법이지만 정말 잠시 java를 공부했던 적이 있어서 친근하게 다가왔다. 그 때는 변수에 할당된 값만 비교했었는데 조건문도..