오늘은 리액트를 사용하여 만들어보았던 sprint 중에 StatesAirline - Client를 express를 사용하여 Server를 만들어보았다. server에 s자도 몰랐던 나로써는 너무나도 버거웠다... 오늘 과제의 구현은 express 프레임워크를 이용하여 서버를 만들고, 클라이언트 요청에 따라 항공편과 예약 데이터를 조회, 생성, 수정, 삭제하는 기능을 수행할 수 있다. 먼저, app.js를 보면 express 프레임워크를 통해 서버를 구현하고 app.use를 통해 각각 flightRouter, bookRouter, airportRouter에 분기점을 만들어주었다. router폴더에서 flightRouter.js를 살펴보면 controller폴더의 flightController의 파일들에서 ..
문제 : 수를 입력받아 제곱근 값을 소수점 두 자리까지 리턴해야 합니다. 입력 : 인자 1 : num number 타입의 정수 (num >= 2 출력 : number 타입을 리턴해야 합니다. 최대 소수점 둘째 짜리까지 구합니다. (소수점 셋째 자리에서 반올림) 주의사항 : Math.sqrt 사용은 금지됩니다. 소수점 처리는 javascript 표준 내장 객체인 Number를 검색해 봅니다. (js decimal places limit 또는 자바스크립트 소수점 자리수) 항상 타입을 주의하여야 합니다. 각 자리수(1, 0.1, 0.01, 0.001)마다 (목표값을 넘지 않는) 근사값을 구하는 방식이 있습니다. 제곱근을 구하는 방법 중 바빌로니아 법이 있습니다. 바빌로니아 법의 점화식(recurrence fo..
오늘은 저번시간에 했던 Mini-Node-Server에서 http모듈을 사용하여 만들었던 과제를 express 라는 프레임워크로 리팩토링 하다가 알게된 것을 정리하여 적어보려합니다. 그럼 먼저, express가 무엇일까?? 일단 먼저 확실한건 티익스프레스는 아닙니다. 뭐라구요?? 재미없다구요? 저도알아요 Express.js는 Node.js 환경에서 웹 서버, 또는 API서버를 제작하기 위해 사용되는 프레임워크이다. 앞서 작성했었던 http모듈로 작성한 서버와 다른점은 미들웨어 추가가 편리하고, 자체 라우터를 제공한다는 것이다. 미들웨어 추가가 편리..?? 미들웨어가 뭔지알아야 추가가 편리한지를 알죠 미들웨어(middleware)는 간단하게 말하면, 클라이언트에게 요청이 오고 그 요청을 보내기위해 응답하려..
문제 : 문자열을 입력받아 문자열에서 숫자를 모두 찾아 더한 뒤에 해당 값을 (숫자와 공백을 제외한 나머지) 문자열의 길이로 나눈 값을 정수로 반올림하여 리턴해야 합니다. 입력 : 인자 1 : str string 타입의 문자열 출력 : number 타입을 리턴해야 합니다 (0 이상의 정수) 주의사항 : 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다. 숫자(digit)는 연속해서 등장하지 않습니다. 입출력 예시 : 풀이 : 나만의 해설: strLength=0으로 숫자를뺀 문자만 들어있는 문자열의 길이를 초기화 시켰고, sum=0을 통해 숫자의 합을 0으로 초기화시켜주었다. 주의사항에서 str이 빈문자열일 경우 0을 리턴해야하기 때문에 먼저 if문을 주어 str.length===0일때 0을 리턴하게 해주..
오늘은 웹 서버에 대해서 공부를하였다. 첫번째로 CORS에 대해서 배웠는데 이에 대한 부분은 새로 포스팅하여 자세히 공부해볼 예정이다. 오늘한것은 node.js의 http모듈을 이용하여 웹서버를 만들어보았다. 모듈이라고는 저번에 포스팅했던 fs모듈써본게 다였던지라 많이 어렵고 헷갈렸다. 했지만 하지않은것 같은..?? 3. fs모듈을 활용하여 비동기 처리(callback, Promise) 브라우저는 자바스크립트를 해석하고, 실행할 수 있는 자바스크립트 엔진을 내장하고 있음. 또한, Node.js도 자바스크립트 엔진을 내장하고 있음. 따라서 자바스크립트는 브라우저 환경 또는 Node. jhbljs92.tistory.com 이번엔 http모듈을 통해 HTTP 요청과 응답을 다루어보았다. 코드스테이츠에서는 no..
문제 : 문자열을 입력받아 아이소그램인지 여부를 리턴해야 합니다. 아이소그램(isogram)은 각 알파벳을 한번씩만 이용해서 만든 단어나 문구를 말합니다. 입력 : 인자 1 : str string 타입의 공백이 없는 알파벳 문자열 출력 : boolean 타입을 리턴해야 합니다. 주의사항 : 빈 문자열을 입력받은 경우, true를 리턴해야 합니다. 대소문자는 구별하지 않습니다. 입출력 예시 : 풀이 : 나만의 해설: 주의사항에 빈 문자열을 입력했을 때 true가 출력되어야 하기때문에 str.length === 0 일때 true를 리턴해야한다. result에 빈객체를 선언해주고, 문자열로 들어온 모든 알파벳을 소문자로 바꿔준다. 그리고 for 반복문을 통해서 result객체에 소문자로 바뀐 알파벳을 키로 넣..
오늘은 sprint 과제를 진행하면서 처음 알게된점, 다시한번 복습하게된점, 중요한점을 다시 정리하여 나의 것으로 만들어보려고 한다. 이번과제를 진행하면서 저번에 포스팅하였던 상태 끌어올리기에 대해서 더 잘 이해하게 된 것같아서 아주 유익한 sprint였다. 6. State 끌어올리기(Lifting State Up) 정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올 jhbljs92.tistory.com 먼저, 이번 스프린트는 항공권 정보를 받아와서 도착지를 입력하여 입력된 도착지에만 해당하는 항공권 정보를 필터링해서 리스트를 렌더링해주는 스프린트이다. 먼저, 구조를 살..
문제 : 두 수(num1, num2)를 입력받아, num1를 num2로 나눈 나머지를 리턴해야 합니다. 입력 : 인자 1 : num1 number 타입의 정수 (num1 >= 0) 인자 2 : num2 number 타입의 정수 (num2 >= 0) 출력 : number 타입을 리턴해야 합니다. 주의사항 : 나눗셈(/), 나머지(%) 연산자 사용은 금지됩니다. 0은 어떤 수로 나누어도 나머지가 0입니다. 어떤 수도 0으로 나눌 수 없습니다. 이 경우 'Error: cannot divide by zero'를 리턴해야 합니다. 입출력 예시 : 풀이 : 나만의 해설: if (num2 === 0) { return 'Error: cannot divide by zero' } if (num1 === 0) { retur..
map()을 보면, 처음 드는생각은 어?? 이거 자바스크립트 배열 내장메서드 아니야? 이걸로 리액트에서 뭘 어떻게할 수 있는데... 리액트에서 동적인 배열을 렌더링할 때, map()을 이용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 반환 실제로, 리액트에서 배열은 게시글, 리스트, 피드 등등을 표시하는 등에 자주 사용되기 때문에 무조건 알아둬야한다!! 아래의 예제를 보면서, 배열을 이용하여 리액트에서 List렌더링을 해보고, 개별적인 컴포넌트를 만들어보자!! 1. DiaryList.jsx 먼저, 일기리스트 컴포넌트를 작성할 DiaryList.jsx파일을 만들어준다. 2. App.js 그다음, dummyList를 만들어 DiaryList에 prop으로 데이터를 전달한 후, 그 데이터를 리스트..
useState에 이어서 리액트 Hooks 중에서 가장 중요하다고 하는 useEffect에 대해서 알아보고 정리해보도록 하겠다. ⭐️ useEffect란?? useEffect Hook을 이용하여 우리가 React에게 컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄수 있음. 또한, useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있음. 과거엔 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었지만, 오늘날에는 이제 함수형 컴포넌트에서도 사용할 수 있음. 즉, (componentDidMount, componentDidUpdate, componentWillUnmount)라는 라이프사이클 훅을 대체할 수 있게 되었다. useEffect는 기본적으로 몇개의 조건에 ..
