🏋🏽문제 문자열을 입력받아 문자열에서 숫자를 모두 찾아 더한 뒤에 해당 값을 숫자와 공백을 제외한 나머지 문자열의 길이로 나눈 값을 반올림으로 리턴 🔍나의 풀이 1. 일단 문자열에 있는 숫자는 문자열이기 때문에 그걸 뽑아서 숫자열로 변환해준다. 2. 숫자를 찾아 빈공백으로 처리해서 문자열만 추출한다. 3. 1에서 추출한 숫자열들의 합을 구한다. 4. 2에서 추출한 빈공백 제외의 문자열의 길이를 구한다. 5. 3에서 2를 나눈 후 Math.round메소드를 통해 반올림해준다.' 💡알게 된 점 여기서 사용한 메소드 설명 match() replace() 정규표현식
Airport API 공항이름 자동완성 클라이언트에 공항 이름을 검색할 때, 자동 완성 기능이 동작하게 하는 API http://localhost:3001/airport?query=c 에서 req.query 는 http://localhost:3001/airport?query=c 노란색 부분인 qeury=c를 의미하고 req.query.qeury는 http://localhost:3001/airport?query=c 빨간 부분인 c를 의미한다. 즉 요청객체의 쿼리 파라미터에 글자를 추가하면 해당 문자열이 포함된 공항목록을 보여준다. 위 예제로 get요청을 보낸 뒤 console.log(req.query.qeury)를 확인해보면 터미널에서 확인 할 수 있다. 공항 목록에서 c가 포함된 공항목록을 볼 수 있다...
🏋🏽문제 수를 입력받아 제곱근의 값을 소수점 두 자리까지 리턴 🔍나의 풀이 function computeSquareRoot(num) { return Number(Math.pow(num,0.5).toFixed(2)) } Math.pow는 첫번째 인자의 두번째인자제곱인 값이다. 즉 Math.pow(2,4)일때 2의 4제곱인 것이다. 제곱근은 해당숫자의 2분의 1제곱이므로 첫번째 숫자로 전달받을 변수이름을 두번째 인자로 2분의1을 의미하는 0.5를 넣어준다. 조건에서 소수점 두자리까지 반올림하라고 하였으니 toFixed메소드를 사용한다. 💡알게된 점 Math.pow 메소드를 알기 전까지 2시간 가량 바빌로니아 법의 점화식과 제곱근가지고 어떻게 코드를 써야할지 머리를 싸맸는데 이런 메소드가 있으면 얼마나 좋을까..
MERN stack 인기짱 프레임워크인 MongoDB,Express, React, Node.js를 의미한다. (리액트가 왜 여기선 프레임워크,,,?) 그 중 Express는 Node.js환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크 Express로 구현한 서버가 Node.js HTTP모듈로 작성한 서버와 다른점 1. 미들웨어를 추가할 수 있다. 2. 라우터를 제공한다. 라우팅 메서드와 url(/lower, /upper 등)로 분기점을 만드는것 클라이언트는 특정한 HTTP 요청메서드(GET,POST)와 함께 서버의 특정 URI(또는 경로)로 HTTP요청을 보낸다. 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는것. 미들웨어(Middle..
API서버는 프론트엔드도 다룰 수 있었야 한다. 왜냐하면 필요한 데이터를 저장하거나 불러오는 API서버를 구축할 수 있어야 동적활동을 할 수 있는 클라이언트를 구현할 수 있기 때문에 SOP에 대해 이해할 수 있다. CORS에 대해 이해할 수 있다. CORS 동작 방식에 대해 이해할 수 있다. CORS 설정 방법을 이해한다. SOP (Same-Origin-Policy) 동일 출처 정책 : 같은 출처의 리소스만 공유가 가능하다. 출처(Origin) 프로토콜 호스트 포트 https:// www.hahahah.com :433 /course 출처는 프로토콜, 호스트, 포트의 조합이며 이 중 하나라도 다르면 동일한 출처가 아니다. SOP는 왜 탄생했을까? 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 ..
✅ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다 ✅ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다 ✅ 더이상, 컴포넌트 내 필터 함수 `filterByCondition`를 사용하지 않습니다 우선 FlightDataApi에 담긴 getFlight 함수를 사용하는것은 react 컴포넌트와 관련이 없는 동작이므로 Side Effect라고 볼 수 있다. useEffect 훅을 사용하여 Side Effect를 관리를 해준다. useEffect는 함수와 배열을 인자로 받는데 함수에는 side effect를 배열에는 종속성 배열 즉 변화를 감지할 상태값을 넣어주면된다. 여기서 condition은 항공권을 조회할때 출발지..
🏋🏽문제 문자열을 입력받아 알파벳을 한번씩만 이용해서 만든 단어나 문구인 아이소이그램인지 여부 리턴 🔍나의 풀이 한 문자열 내에 같은 알파벳이 있으면 안되니까 이중반복문을 사용해서 하나씩 검사했을때 같은 알파벳 발견시 바로 false를 리턴하는 로직 구현 💡깨달은점 레퍼런스를 보니까 빈 객체를 선언해주고 빈 객체에 값으로 boolean 값을 주고있었다. 이중반복문을 이용안해도 되는 너무나도 편리한 객체의 이용법....! 객체 활용을 잘하자..!
Side effect가 어떤 의미인지 알 수 있다. React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. Side effect의 예를 들 수 있다. Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다. Effect Hook에서의 dependency array 사용법을 이해할 수 있다. 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다. side effect란? 부수효과 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나..
🏋🏽문제 두수(num1,num2) 를 입력받아 num1을 num2로 나눈 나머지를 리턴한다. 🔍나의 풀이 num2는 num1을 여러번 곱했을때 num2보다 작은 상태에서 그 값을 빼주면 나머지가 될거라 생각(복잡..) 1. 일단 조건에 있는 num2가 0일때 경고문 문자열 작성 2. num1이 0일때(0은 무슨수로 나누든 나머지0) 또는 num1과 num2가 같을때는 0을 리턴 3. 반복문을 돌려서 몫을 구함 4. 조건이 맞을때 무조건 1이 더해지므로 5. num1에서 num2를 몫인 n-1번 곱한것을 뺀것은 나머지 값이다! 💡알게된 점 복잡하게 쓴 나의 로직은 오늘도 레퍼런스에 패해버렸고! 테스트 패스하는것에만 일단 신경쓰라는 말을 되뇌이어봅니다..
React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다. 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다. State 끌어올리기의 개념을 이해할 수 있다. 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다. 단방향 데이터 흐름 리액트는 컴포넌트 단위로 개발을하는것이 가장 큰 특징이다. 먼저 컴포넌트를 어떤 계층구조로 사용할 것인지 나누고 페이지를 조립해 나가기 때문에 상향식으로 앱을 만든다고 할 수 있다. 컴포넌트를 나눌때 한 컴포넌트는 한가지 일만 한다는 단일책임원칙에 따른다. 컴포넌트는 부모 컴포넌트에서 props를 이용해 데이터를 전달인자처럼 받을 수 있다. =>하향식 데이터 흐름, 단방향 데이터 흐름(one-way-data flow..
