오늘은 웹 서버에 대해서 공부를하였다. 첫번째로 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는 기본적으로 몇개의 조건에 ..
문제 : 문자열을 요소로 갖는 배열을 입력받아 문자열을 세로로 읽었을 때의 문자열을 리턴해야 합니다. 입력 : string 타입을 요소로 갖는 배열 출력 : string 타입을 리턴해야 합니다. 주의사항 : 각 문자열의 길이는 다양합니다. 각 문자의 위치를 행, 열로 나타낼 경우, 비어있는 (행, 열)은 무시합니다. 입출력 예시 : 풀이 : 나만의 해설: arr[0][0] + arr[1][0] -> arr[0][1] + arr[1][1] -> arr[0][2] + arr[1][2] 위의 규칙을 활용하여 첫 번째 인수 범위는 arr의 길이까지, 두 번째 인수는 배열의 요소 중 가장 긴 길이를 주었다. 가장 긴 문자열의 길이를 구해준뒤 이중반복문을 통하여 외부에는 가장 긴 문자열의 길이만큼 반복시키고, 내부..
정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올리기 처음엔 이게 뭘까.. 가만히 생각해보다가 멱살 끌어올리기밖에 생각이안나서 여기저기 찾아보았다. 상태 끌어올리기란 ?? 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 타입이 무엇인지만 알 수 있다. 또한 데이터가 state로부터 왔는지, 하드코딩을 통해 입력된 내용인지도 모른다. 따라서, 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름" 처럼 느껴질 수 도 있다. 결국 상위 컴포넌트의 "상태를 변경하는 함수" 그자체를 ..
