전체 글 345

[프로그래머스] 핸드폰 번호 가리기

문제. 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_numberreturn "01033334444" "*******4444" "027778888" "*****8888" function solution(phone_number) { // 입력받은 phone_number에서 4개만 빼고 그 숫자만큼 반복하는 반복문을 만든다. // 반복문을 돈 숫자만큼 *을 빈문자열에 추가해주자. // ..

TIL) JSX란? JSX 쓰는 이유, JSX 문법

JSX란? JavaScript XML 리액트에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다. JSX는 브라우저가 바로 실행할 수 있는 JS코드가 아니라서 브라우저가 이해할 수 있는 JS 코드로 변환시켜줘야한다. 이때, Babel을 사용한다. Babel가 JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다. 컴파일을 하면 브라우저가 JS를 읽고 화면에 렌더링할 수 있게 된다. JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성해서 DOM에 배치할 수 있게 된다. (CSS, JSX 문법만을 가지고 웹 어플리케이션 개발 가능!) 주의할 점! JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 “Babel”을 이용한 컴파일 과정이 필요하다. JSX를 왜 써야하지? DOM 코드보다 명시..

🖥FrontEnd/React 2022.06.02

TIL) 리액트 기초, React의 3가지 특징, React 쓰는 이유, 잘 짠 코드의 기준은?

리액트란? 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 입니다. 리액트를 왜 사용하는 걸까? 리엑트의 아래 3가지 특징 덕분에 프론트엔드 개발을 더 효과적으로 할 수 있다. 1. 선언형 2. 컴포넌트 기반 3. 범용성 (다양한 곳에서 활용 가능) 1. 선언형 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. *개발에서 선언(명시적)이라는 뜻은 코드를 자세히 분석하지 않고도 코드의 의미를 분명히 알 수 있게 작성하는 방식을 의미한다. queryselector로 HTML 내의 코드를 받아와서 JS 파일에서 개발하는 환경은 직관적이라고 볼 수 없다. 반면, 리액트는 JSX라는 HTML..

🖥FrontEnd/React 2022.06.02

TIL) Math.random(), 자바스크립트, 반올림(round), 올림(ceil), 내림(floor)

Math.random() ⇒ 0 ~ 1 사이의 숫자를 랜덤으로 출력한다. (1미만) (소수점이하도 모두 출력) Math.random() * 10 ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (소수점이하도 모두 출력) Math.floor(Math.random() * 10) ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (정수만) Math.floor(Math.random() * 10) + 1 ⇒ 1 ~ 11 사이의 숫자를 랜덤으로 출력한다. (11미만) (정수만) **더 알아보기** Math.floor() 함수는 입력받은 숫자를 내림한 정수를 리턴하는 함수입니다. Math.ceil() 함수는 입력받은 숫자를 올림한 정수를 리턴하는 함수입니다. Math.round() 함수는 ..

TIL) 클래스 super, extends 사용 방법, 왜 사용하지?

class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum() { return this.first + this.second; } } class PersonPlus extends Person{ avg() { return (this.first + this.second) / 2; } } const kim = new PersonPlus('kim', 10, 20); console.log('kim.sum()',kim.sum()); console.log('kim.avg()',kim.avg()); // 출력값 kim.sum() 30 kim.avg() 15 👇 위 코드에서 P..

TIL) 커링(currying)과 클로저(closure)의 차이 이해하기, 자바스크립트, js

커링함수와 클로저의 차이에 대해 알아보았습니다. 커링함수가 클로저의 사용 사례 중 하나라고 말하는 엔지니어가 있는 반면, 클로저는 자바스크립트의 핵심 기능이고, 커링함수는 자바스크립트에 내장 지원되지 않기 때문에 완전히 다른 개념이라고 말하는 엔지니어가 있었습니다. 1. closure : 자바스크립트의 핵심 기능 중 하나입니다. 클로저는 외부 함수 범위와 외부 함수 외부에서 실행되는 경우에도 위의 모든 범위에 액세스할 수 있는 내부 함수입니다. 클로저를 언제 쓸까? 주로 정보를 은닉할 때 사용하고, 전역 변수의 사용을 억제하기 위해 사용합니다. function numbers(firstNum, secondNum) { let a = 'The result is'; return add(); } function ..

프론트엔드 개발자에게 알고리즘 공부가 미치는 영향

https://velog.io/@teo/프론트엔드-개발자에게-알고리즘-공부가-미치는-영향 프론트엔드 개발자에게 알고리즘 공부가 미치는 영향 '프론트엔드 개발자에게 알고리즘 공부가 미치는 영향' 과 같은 주제로 생각을 적어주실 수 있을까요? ... 공부를 하면서도 제가 짜는 코드에서는 전혀 사용되지 않는 것 같고.. 실무에서는 어떻 velog.io 요약하자면, 알고리즘과 자료 구조를 배우다보면 현실의 생각을 컴퓨터스럽게 데이터로 사고하는 능력을 간접적으로 익힐 수가 있다. 그래서 알고리즘을 놓쳐서는 안된다. 그렇다고 해서 알고리즘을 딥하게 공부하기 보다는 현재 공부하고 있는 문제에서 어떤식으로 데이터로 생각하고 어떠한 접근법으로 최적화를 하는가에 대한 생각을 평소에 하면서 공부하자! 코딩 테스트를 통과 하..

TIL) 비동기, callback, promise, async/await 코드로 공부하기

동기화 코드자 짜여진 순서대로 결과값이 도출된다. function waitSyns(ms) { var start = Date.now(); var now = start; while(now - start < ms ) { now = Date.now(); } } // 현재 시각과 시작 시각을 비교하며 ms 범위 내에서 무한 루프를 도는 blocking 함수입니다. function drink(person, coffee) { console.log(person + '는 ' + coffee + '를 마십니다'); } function orderCoffeeSync(coffee) { console.log(coffee + '가 접수되었습니다'); waitSyns(4000); return coffee; } let customer..

TIL) 자바스크립트 비동기와 setTimeout

비동기란? 동시에 여러 작업을 해볼 수 있다! 자바스크립트는 단일 스레드 기반의 언어로 한 순간 하나의 작업만을 처리할 수 있다. 하지만 자바스크립트는 비 동기로 동작하기 때문에 단일 스레드에도 불구하고 동시에 많은 작업을 수행한다. => 비동기 => 주의할 점! 자바스크립트 언어 자체가 비동기 동작을 지원하는 것은 아니다. 비 동기로 동작하는 핵심요소는 자바스크립트 언어가 아니라 브라우저가 가지고 있다. 브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성되며 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다. Web APIs: setTimeout이 Call Stack에 들어와 실행되면 Browser API인 ti..

반응형