본문 바로가기

전체 글168

201210_TIL 🍎 오늘 한 일 ✔️ HTML, CSS 구조 및 문법 공부 (querySelector, box model 등) ✔️ Github에서 다른 계정에 내 파일 push하기 ✔️ 소수구하기 문제 코드 개선 (제곱근 이용, 아리스토텔레스의 체 이용) ✔️ 이번 주동안 공부한 내용들 blogging ✔️ 궁금했던 것 찾아보고 정리하기 (정규표현식, spread operator, parseFloat, apply, match, trim) ✔️ 블로그 html, css로 편집해서 원하는대로 꾸미기 🍎 기억할 것 ✔️ HTML, CSS 는 구조와 관리를 위해 구분해서 사용해야 한다. ✔️ 시맨틱 태그는 태그에 의미를 담아 contents 영역을 논리적으로 구분하기 위한 용도이다. (, , , , 등) 기능은 랑 다를게 없.. 2020. 12. 10.
소수(Prime Number)구하기 - Javascript 문제 정수를 입력받아 2부터 해당 수(num)까지의 소수들을 문자열로 리턴 string 타입, '2-3-5-7'의 형식 이중 반복문(for문)을 사용할 것 풀이 우선 소수의 정의부터 명확히 하면, 소수(Prime Number)란 '양의 약수가 1과 자기 자신 뿐인, 1보다 큰 자연수'이다. 예를 들어, 5는 1×5 또는 5×1로 수를 곱한 결과를 적는 유일한 방법이 자신을 포함하기 때문에 소수라고 할 수 있다. ver1 이중 반복문을 사용해야한다는 조건이 있어서, 우선 첫번째 for문을 어떤식으로 구성할 지 생각해봤다. 1. 입력되는 수(num)가 2이상이기 때문에, 모든 결과값에 포함될 2를 출력 문자열(result)에 2를 미리 지정해둔다. 2. 3부터 num까지 반복문을 통해 하나씩 소수인지 확인한.. 2020. 12. 10.
[CSS] Selector, Class와 Id의 차이점 HTML과 CSS의 역할(관심사)을 구분하게 되면 구조를 파악하기도 쉬워지고, 수정하기도 편리해진다는 장점이 있다. 이렇게 파일을 구분하게 되면 HTML의 어떤 부분을 CSS에서 지목해야하는 상황이 생길 수밖에 없다. 이 때 필요한 개념이 바로 Selector이다. Selector을 사용하면 코드도 간결해지고, 나중에 속성들을 한번에 바꾸기도 편하다. '중복제거'는 모든 언어에서 마찬가지로 핵심적인 요소이기 때문에 Selector 또한 매우 중요하다..! HTML, CSS 연결하기 HTML과 CSS를 연결하는 방식은 두 가지가 있다. 둘 다 CSS 문법은 같지만, HTML파일과 합쳐서 하나의 파일로 사용하느냐 혹은 파일을 구분해서 사용하느냐에 따라 차이가 있다. 첫번째는 태그를 이용해서 HTML body.. 2020. 12. 10.
parseFloat, Number의 차이점 parseFloat과 Number 모두 문자열을 'Number' 타입으로 반환해준다는 점에서 같은 기능을한다고 볼 수 있다. 그런데 왜 굳이 두 가지 방법이 존재하는 건지, 두 함수의 차이점이 대체 뭔지 궁금증이 생겼다. 찾아본 결과 StackOverFlow에서 좋은 답변을 찾을 수 있었다. parseFloat이나 parseInt은 문자열(string)을 말 그대로 파싱한다. 반면, Number은 주어진 값을 강제로 숫자로 변환시킨다. 예시를 통해서 이해하는 것이 빠를 것 같다 ㅎㅎ 이렇게 숫자 그대로를 표현하는 문자열을 입력하면, 두 함수는 똑같이 작동한다. parseFloat('3'); // => 3 Number('3'); // => 3 parseFloat('1.501'); // => 1.501 Nu.. 2020. 12. 10.
Math.max(), apply, Spread Operator(...) - Javascript 문제 차례로 3개의 문자열을 입력받아, 가장 짧은 문자열을 리턴하는 문제 풀이 과정 1. 배열에 모든 문자열의 길이를 저장 2. 가장 짧은 문자열 길이 구하기 3. 가장 짧은 문자열과 길이가 일치하는 문자열을 리턴 function findShortestOfThreeWords(word1, word2, word3) { let words = [word1.length, word2.length, word3.length]; let min = Math.min(...words); if (word1.length === min){ return word1; } else if (word2.length === min){ return word2; } return word3; } 새로 알게 된 것 위의 과정으로 접근했더니, 최소값.. 2020. 12. 10.
정규표현식(Regular Expression), match 정규표현식 (Regular Expression) 정규 표현식은 복잡한 문자열을 처리할 때 사용하는 기법이라고 할 수 있다. Javascript 뿐만 아니라 문자열을 처리하는 모든 곳에서 사용되며, 정규식을 사용하면 훨씬 간편하고 직관적인 코드를 작성할 수 있다. 메타 문자(meta characters) 정규 표현식에서 사용하는 메타 문자(meta characters)에는 대표적으로 이런 것들이 있다. 메타문자를 사용함으로써 정규표현식은 특별한 의미를 갖게 된다. /^$+?{}[]\|() [ ]는 문자 클래스(character class)이다. 즉, [ ] 사이의 문자들과의 매치를 의미한다. 예를 들어, [hot]라는 정규 표현식은 h,o,t중 한 개의 문자라도 들어가 있다면 매치되는 것으로 인정한다는 뜻.. 2020. 12. 10.
201209_TIL 🍎 오늘 한 일 반복문 공부, Coplit 21문제 풀기 블로그 정리 시작하기 조건문, 문자열 관련 메서드 복습하기 🍎 기억할 것 같은 type끼리 비교하는 것이 바람직하다! 그래서 개발할 때는 type확인을 위해 에러처리하는 코드를 추가하기도 한다. for문과 while문의 차이점! for문은 반복문이 얼마나 실행되는 지 아는 경우 사용하고, while문은 모르는 경우에 사용한다. 🍎 더 공부할 것 sqrt 이용해서 소수(Prime Number) 찾는 다시 풀어보기 2020. 12. 10.
문자열 관련 메서드 .length length 메서드는 주어진 문자열의 길이를 반환해준다. 'Code'.length; //4 .indexOf indexOf 메서드는 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없을 경우, -1을 반환한다. 'Blue Whale'.indexOf('Blue'); // returns 0 'Blue Whale'.indexOf('Blute'); // returns -1 'Blue Whale'.indexOf('Whale', 0); // returns 5 'Blue Whale'.indexOf('Whale', 5); // returns 5 'Blue Whale'.indexOf('Whale', 7); // returns -1 'Blue Whale'.indexOf(''); // retur.. 2020. 12. 10.
기억해야 할 6가지 falsy 값 Javascript 엔진은 boolean 타입이 아닌 값을 Truthy(참으로 평가되는 값), 또는 Falsy(거짓으로 평가되는 값)으로 구분한다. 조건문이나 반복문같은 제어문의 조건식에서는 boolean값으로 평가되는 문맥을 사용해야 하는데, 이 때 Truthy값은 true로, Falsy값은 false로 암묵적 형 변환이 일어난다. Falsy값 이외의 모든 값들은 모두 true로 평가되는 Truthy값이기 때문에, 훨씬 경우의 수가 적은 Falsy만 알아두도록 하자! Falsy boolean값에서 false로 평가되는 값을 말한다. (쉽게 말해 if문의 조건으로 넣었을 때 false로 변환되는 값) 이렇게 6가지의 falsy값은 꼭 기억해두자! if(false) if(null) if(undefined).. 2020. 12. 10.
개발자가 질문하는 방법 개발자에게 '질문'이란 필수적이다. 또 계속해서 무언가를 배워야하는 직업이기 때문에 개발자에게 '질문하는 방법'을 아는 것은 매우 중요하다. Step 0 : 검색만이 살 길! 수많은 사람들이 궁금해 해왔으며, 질문과 답변이 오간 흔적이 반드시 있다. (99% 확률로 있음) 검색을 통해 답을 얻지 못하더라도 내가 무엇을 찾아봤는지 기록, 기억, 트래킹 할 수 있어야 한다. Step 1 : 질문을 개선하기 위해 검색은 필수 답을 얻기 보다는 더 나은 질문 keyword를 얻기 위해! 전체 에러가 이해가지 않아도 한번쯤 읽어보기 Step 2 : 질문하기 이 세상에 바보같은 질문은 없다. 하지만 정성을 들이지 않은 질문은 많다. 질문의 퀄리티가 점점 높아져야 한다. 0.2%씩이라도! Learn by doing .. 2020. 12. 10.
변수(Variable)와 데이터 동작 원리 변수(Variable) 변수는 한 마디로 '데이터 보관함'이다! 수학에서 변수는 '변할 수 있는 수'를 의미한다. 이를 컴퓨터 개념으로 좀 더 확장해서 생각해보면, 변수는 '변경할 수 있는 데이터'로 이해할 수 있다. 여기서 데이터는 string, object, array... 등 어떤 타입도 가능하다. 변수는 가장 기초적인 개념이라 그냥 넘어가기 쉽지만, Javascript에 대해 좀 더 깊게 알아갈수록 변수의 동작 원리와 관련된 복잡한 개념들을 마주하게 되는 것 같아서 차근차근 다시 정리해 보았다. 변수는 기본적으로 다음과 같이 선언한다. 이 예시를 말로 설명하면 ' 변할 수 있는 데이터를 만들고자 하는데(let), 이 데이터의 주소 이름는 apple로 할거다' 라는 뜻이다. 이것이 변수를 '선언'하.. 2020. 12. 9.
201208_TIL 🍎 오늘 한 일 Javascript 기초 문법에 대해 배웠다. 조건문 비교연산자, 논리연산자 문자열 실용주의 프로그래머 30page까지 읽기 🍎 더 공부할 것 trim 공백문자 match, replace 정규표현식 spread operator typeof parseFloat, Number 차이점 debugger ✏️ coplit 문제를 풀다보니 여러가지 방법이 떠오르기는 하는데 그 중 뭐가 더 좋은 코드이고 방법인지 궁금해졌다. 그리고 자잘하게 더 공부할 것들이 많아져서 쌓이기 전에 그날그날 꼭 복습을 하고 자야겠다. ✏️ 8시 기상에 적응중이다ㅠㅠ 12시만 되면 눈이 절로 감겨서 체력 관리의 필요성을 절실히 느끼고 있다. 저녁먹고 꼭 운동해야지 2020. 12. 9.
반응형

티스토리툴바