문제 : 문자열을 입력받아 해당 문자열에 등장하는 두 칸의 공백을 모두 한 칸의 공백으로 바꾼 문자열을 리턴해야 합니다. 입력 : string 타입의 문자열 출력 : string 타입의 문자열 주의사항 : 두 칸을 초과하는 공백은 존재하지 않는다고 가정합니다. 입출력 예시 : 풀이 : 나만의 해설: 정규식을 활용하여 풀었다. 정규식을 크게 풀어보면, 문자열의 시작부분에 있는 하나 이상 또는, 두개 이상의 연속 공백를 대체하는 단일 공백 문자 (" ") 를 주었다. 자세하게 정규식을 뜯어보면, ^\s+ : 문자열의 시작 부분에 하나 이상의 공백 문자를 찾습니다. \s{2,} : \s는 모든 공백 문자를 나타내며, {2,}는 연속으로 두번 이상의 공백을 나타낸다. 이것들을 마지막에 " " 를 통하여 단일 공..
오늘은 리액트를 시작하는 날이였다 하지만 첫날부터 이런 고비가...?? 이거 jsx 뭐야..?? 왜이래? 내가했던 HTML, JS 어디감...?? 여튼 이번 과제는 이름, 사진, 내용 등등이 들어있는 데이터 더미가 주어지고 이 데이터 더미에서 내용을 뽑아와서 구현해보는 과제를 풀었다. 처음에 딱 app.js 보자마자 든생각은 이걸 뭐 어쩌라고??? 어떡하라고 하지만 마음을 다잡고 다시 이해해보니 오?? 이렇게하는건가? 하나씩 맞춰가다보니 생각보다 간단했다. 완성된 브라우저는 다음과 같이 된다. 1. import로 모듈 불러오기 먼저 import 를 통해 export로 내보낸 모듈을 가져온다. 2. Sidebar 컴포넌트 구성 Sidebar 컴포넌트는 위의 브라우저 사진에서 왼쪽 빨간색 사이드바의 컴포넌트..
오늘 진행했던, fetch를 이용하여 HTTP 요청을 보내고, 응답을 받는 연습을 정리해볼겸 포스팅하려고 한다. fetch에 대해서는 제대로된 정리글을 다시 포스팅할 것이기 때문에 문제 위주로 적으려고 합니다. 먼저, 간단하게 fetch가 뭐야...?? fetch API 는 Promise 기반으로 구성된 비동기 처리 프로그래밍에 잘 맞는 형태인 기능이다. 그래서, then이나 catch와 같은 체이닝으로 작성할 수 있는 장점이 있다. 또한, JS 기본기능이기 때문에 CDN과 같은 다른 작업 없이도 바로 사용할 수 있다. 기본 문법을 보면, fetch("여기에 URL 입력") .then(response=>response.text()) .then((text)=>{ 요청 끝나고 할일 }) 위의 문법으로 아래처..
문제 : 문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자가 대문자인 문자열을 리턴해야 합니다. 입력 : string 타입의 공백이 있는 알파벳 문자열 출력 : string 타입을 리턴해야 합니다 주의사항 : 단어는 공백으로 구분합니다. 연속된 공백이 존재할 수 있습니다. 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 입출력 예시 : 풀이 : 나만의 해설: 처음에 생각했던건, 문자열 str을 찢어보려고 하였다. 그래서 split 메서드를 생각했다가, 그렇게 되면 다음 단어의 기준점을 못잡을 것 같아서 replace에 정규식을 주어서 안의 정규식에 해당하는 부분을 변경할 수 있었다. 정규식을 해석해보면, \b 를 통해 문자의 경계선을 찾았고, g는 일치하는 패턴을 모두 변경하라는 의미이기..
브라우저는 자바스크립트를 해석하고, 실행할 수 있는 자바스크립트 엔진을 내장하고 있음. 또한, Node.js도 자바스크립트 엔진을 내장하고 있음. 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행 가능 하지만, 브라우저와 Node.js는 용도가 다르다!! 브라우저 Node.js 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장, ECMAScript 를 실행가능(몇몇 기능은 호환 X) HTML, CSS, Javascript를 실행하여 웹페이지를 브라우저 화면에 랜더링 하는 것이 주 목적 브라우저 외부에서 자바스크립트 실행 환경을 제공해주는 것이 주 목적 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공 DOM API 을 제공하지 않음..
문제 : 문자열을 입력받아 순서가 뒤집힌 문자열을 리턴 입력 : string 타입의 문자열 출력 : string 타입을 리턴해야 합니다 주의사항 : 입출력 예시 : 풀이 : 나만의 해설: 첫 풀이는 3가지의 메서드를 사용하여 풀어보았다. String.prototype.split(), Array.prototype.reverse(), Array.prototype.join() split() 메서드를 사용하여 부분 문자열로 구분하여, 문자열 객체를 여러개의 문자열로 이루어진 배열로 분할. let splitString = str.split(""); // str = "hello" 이라면, // 결과 : ["h", "e", "l", "l", "o"] reverse() 메서드를 사용하여 배열을 반전. let rever..
3월 17일 진행한 underbar 풀이를 정리해본다. underbar?? 밑줄...?? 내가 처음 과제를 받자마자 든생각은 이랬다. underbar는 배열 메서드가 브라우저에서 자체적으로 지원하지 않았을 시절, 보다 나은 방법으로 배열이나 객체를 다루기 위한 도구 모음집을 만들었는데 이를 라이브러리(Library)라고 불렀다. 따라서 이번 과제는 배열, 객체를 다루는 Underbar 라는 라이브러리를 직접 구현하면서 내장 메서드가 어떻게 동작하는지 원리를 학습. 여기서 collections가 나오는데, 이게 무엇이냐!!! collection을 직역해보면 , '모음', '무리' 라는 뜻이다. cs(컴퓨터 사이언스)에서는 '데이터(data, 자료)의 모음'이라고 생각할 수 있다. 우리가 배운 collect..
문제 : 문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자로 이루어진 문자열을 리턴해야 합니다. 입력 : string 타입의 공백이 있는 알파벳 문자열 출력 : string 타입을 리턴해야 합니다 주의사항 : 단어는 공백 한 칸으로 구분합니다. 연속된 공백은 없다고 가정합니다. 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 입출력 예시 : 풀이 : 나만의 해설: 먼저, 주의사항에 빈 문자열을 입력받는 경우, 빈 문자열을 리턴해야 하니까 if문을 주어 str의 길이가 0이면 "" 빈 문자열을 리턴하게 해주었다. 문자열로 리턴해야하니까 변수result를 ""로 초기화시켜주고, str이라는 문자열을 받고, 받은 문자열을 split(" ")을 통해 공백을 기준으로 찢어서 배열에 담는다. 그 공..
