728x90 전체 글73 [알고리즘] 문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자로 이루어진 문자열을 리턴해야 합니다. 💡 최대한 간결하게 풀어본 나의 풀이 function firstCharacter(str) { // TODO: 여기에 코드를 작성합니다. return str.split(" ").map((a) => a[0]).join("") } 💡 Split () : 문자열을 일정한 구분자로 잘라서 배열로 저장 const str = "Hello I am learning JavaScript!"; console.log(str.split(" ")); // [ 'Hello', 'I', 'am', 'learning', 'JavaScript!' ] 💡 join() : 배열의 모든 요소를 연결해 하나의 문자열로 만든다. const arr = ['A', 'B', 'C']; console.log(arr.join()); // A,B,C co.. 2022. 5. 11. [알고리즘] 수를 입력받아 2의 거듭제곱인지 여부를 리턴해야 합니다. 💡 최대한 간결하게 풀어본 나의 풀이 function powerOfTwo(num) { // TODO: 여기에 코드를 작성합니다. while (num >= 1) { if (num === 1) return true; if (num % 2 !== 0) return false; num = num / 2; } } 2022. 5. 11. [React] SPA 그리고 React Router 🌈 SPA and React Router 💡 SPA -> Single Page Application : 전통적인 웹페이지 사이트는 페이지 전체를 로딩하고, SPA는 Menu, Footer 와 같이 페이지 전환 후 전후에 중복되는 페이지 부분은 새로 불러 오지 않는다. SPA 는 HTML 전체가 아닌 업데이트에 필요한 부분만 서버에서 전달받아 동적으로 HTML 요소를 화면에 보여준다. (Youtube, facebook, Gmail, airbnb, Netflix등 우리가 사용하는 다양한 서비스들이 SPA 방식으로 제작되어 있음.) - 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하기 때문에 사용자와의 Interaction에 빠르게 반응. - 서버에서 요청 받은 데이터만 넘겨주면 되기 .. 2022. 5. 10. [VS code] Module not found: Error: Can't resolve 'react-dom' in 해결방법 🌈 Module not found: Error: Can't resolve 'react-dom' in 에러 해결 방법 리액트 앱을 실행하려다 보니 모듈이 없다는 아래와 같은 에러가 발생하였다. 구글링 하다보니 생각보다 간단하게 해결할 수 있었다. npm install npm install 을 실행한후, 다시 npm run start 를 해줬더니 문제없이 앱 실행! 2022. 5. 7. <JavaScript> React 그리고 JSX 🌈 React 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 - 선언형 (Declarative) 리액트는ㅇ 한 페이지를 보여주기 위해 HTML/CSS/JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 직관적으로 코드를 짤 수 있다는 장점이 있다. 코드를 보고 실제 기능을 대충 떠올릴 수 있다. - 컴포넌트 기반 (Component-Based) 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다. - 범용성 리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용 가능. 페이스북에서 관리되어 .. 2022. 5. 6. [JavaScript] React 로 만든 웹페이지 실행하는 방법은? 🌈 React 실행하기 1. create-react-app 설치 npm install -g create-react-app 2. react project 생성 -> 원하는 이름으로 생성하면 된다. create-react-app test_app 3. 생성한 폴더로 이동 후 app을 실행시키면 아래와 같은 페이지가 생성된 것을 확인할 수 있다. cd test_app npm start 4. App.js 파일에 들어가 수정하고 save를 하면 자동으로 컴파일이 시작되어, 페이지가 자동으로 reload 되는 것도 확인할 수 있다. 이제 리액트 공부 준비 끄읕:D 2022. 5. 6. [JavaScript] var, let, const 차이점은? 🌈 var, let, const? 1. var : var 는 변수 재선언, 재할당이 가능하다. 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있으나 코드량이 많아진다면 어디서 사용했는지 파악하기도 힘들뿐더러 값이 잘못 변경될 수 있는 가능성이 있다. a 에 변수에 A 를 할당 해준후, a 라는 변수에 다시 B 를 넣어보면 아래와 같은 결과를 확인할 수 있다. 같은 이름의 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 다른 값으로 변해버리는 결과를 확인할 수 있다. 2. let : var 의 단점을 보완하 위해 ES6 이후에 추가 된 변수 선언 방식이 let과 const 이다. let을 사용해서 위 예제를 test 해보면 재선언이 되지 않는 에러를 확인할 수 있다. 하지만, let 은 변.. 2022. 5. 5. [JavaScript] 일급 객체 그리고 고차 함수 🌈 일급객체 자바스크립트에서 대표적인 일급 객체 중 하나가 함수라고 할 수 있는데, 자바스크립트에서 함수는 아래와 같이 특별하게 취급할 수 있다. 1. 변수에 할당할 수 있다. 2. 다른 함수의 인자로 전달이 가능하다. 3. 다른 함수의 결과로서 리턴이 가능하다. => 함수를 변수에 할당할 수 있기 때문에, 함수의 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 테이터 다루듯이 다룰 수 있다는 것을 의미한다. 💡 호이스팅 호이스팅은 선언된 위치에 관계없이 어디서든 함수를 사용할 수 있도록 하고, 코드가 실행되는 과정에서 함수 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 한다. 🌈 고차함수 1. 함수를 인자로 받는 함수 2. 함수를 리턴하는 함수 => 고차함수를 쓰는 이유, 추상화를 .. 2022. 5. 5. [JavaScript] 저장해두면 유용한 정규 표현식 (Regular Expression) 🌈 저장해두면 유용한 정규 표현식 (Regular Expression) 1. 공백 체크 var regExp = /\s/g; 2. 영어 또는 숫자만 가능 var regExp = /^[A-Za-z][A-Za-z0-9]*$/; 3. 숫자만 가능 var regExp = /^[0-9]+$/; 4. 휴대폰 번호 체크 var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/; 5. 주민등록번호 앞자리 체크 var regExp = /^([0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1,2][0-9]|3[0,1]))$/; 6. 생년월일체크 var regExp = /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-.. 2022. 5. 3. 이전 1 ··· 3 4 5 6 7 8 9 다음 728x90
