https://velog.io/@mageboy 로 이사합니다!

Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 함. Ex1) 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! Pure Function (순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 순수 함수는 입력으로 전달된 값을 수정하지 않음 Ex2) 순수 함수의 예제 function upper(str) { return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable) } up..

상태 끌어올리기 - 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있음. 데이터가 어디서왔는지 등은 모름! - 그런데 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 "역방향"이 아닌가 의문임. 여기서 발상의 전환! 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 이것이 상태 끌어 올리기임. 예제 사이트 export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setVa..

Before You Learn 서버에서 정의한 API 문서를 통해, 서버가 제공하는 리소스를 이용할 수 있다. API 테스팅 툴 Postman을 이용할 수 있다. AJAX 통신을 가능하게 하는 fetch API를 이용할 수 있다. UI를 구성하고, 컴포넌트를 분리할 수 있다. React의 props와 state 개념을 이해할 수 있다. 무엇을 React state(상태)로 두어야 하는지 알 수 있다. Achievement Goals React 데이터 흐름 React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다. 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다. State 끌어올리기의 개념을 이해할 수 있다. 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 ..

문제 input :조의 개수(N)와 조의 발표 순서(K)를 인자로 받는 함수 구현이다. 모든 경우의 발표 순서 중에 인자로 받은 발표 순서가 몇 번째(output)인지 확인해야 한다. 유의사항 모든 경우의 수가 담긴 배열은 번호가 작을수록 앞에 위치한다고 가정합니다. ex) N = 3일 경우,[[1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]] 입출력 예시 let output = orderOfPresentation(3, [2, 3, 1]); console.log(output); // 3 output = orderOfPresentation(5, [1, 3, 2, 4, 5]) console.log(output); // 6 접근 과정 - N이 최대 12이므로 12개..

- 주어진 상황 😢 리액트 앱에서 태그를 사용해서 테스트를 통과할 필요가 있었음. let addThumbnail = images.map( (image) => { return ( ) }) - 만난에러😈 테스트는 통과가 되나 콘솔창에 이게 뜸 The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. - 원인 👌 태그 사용시 하이퍼링크의 유효한 값이 필요하다는 것. - 해결과정 🧵 let addThumbnail = images.map( (image) => { return ( // href링크를 '#!'로 걸어줌 ) }) 유효한 링크로 걸어도 됨..

- 주어진 상황 😢 리액트에서 배열에 map 함수를 사용하여 이미지을 보여주려 했다. let addThumbnail = images.map( (image) => { return ( ) }) 작동은 잘 되는듯 하지만 콘솔창에 에러가 떴다. - 만난에러😈 Warning: Each child in a list should have a unique "key" prop. - 원인 👌 배열의 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 key 값을 지정해야 한다. - 해결과정 🧵 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어주면 된다. et addThumbnail = images.map( (image) => { return ( // key값 넣..

Endpoint http://3.36.72.17:3000 root-endpoint(혹은 root-URL): API로 요청을 서버와 통신할 때, 서버가 요청을 수락하는 시작점 뜻함. Github API의 루트 엔드포인트는 https://api.github.com 이고 트위터 API는 https://api.twitter.com 이다. 일반적으로 root-endpoint는 도메인 주소의 루트( / ) 를 가리킴. 마찬가지로 Message States Server 의 URL을 기준으로 파악할 수 있는 root-endpoint는 Message States Server 의 가장 마지막 Location인 호스트의 루트( / ) 임. path: path(또는 url-path)는 API를 통해 서버와 통신할 때, 서버와..

Postman with Open API Open Weather Map의 API Docs를 보고 Open API를 사용하여 서울(혹은 거주 지역)의 날씨를 요청하고, 응답을 확인해보자. Getting Started 1. 접속 먼저 https://openweathermap.org/ 에 접속. 2. 로그인 및 인증 3. API 발급 로그인 후에 다음과 같이 API Keys 탭을 누르면 기본 Default API 키가 발급된 것을 확인할 수 있음. 5. 원하는 API 탐색 By City ID를 클릭하면 문법이 나옴 api key는 내 것 city id는 찾아서 (서울은 1835848) Postman에 Get으로 하면 api.openweathermap.org/data/2.5/weather?id=1835848&AP..

HTTP API 테스트 도구 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저임. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용함. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET요청을 보냄. 테스트를 위해 GET이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 내장함수 fetch를 사용해야함. 매번 fetch 어쩌구 저쩌구 할 수 있지만 귀찮지.. 그래서 HTTP 요청을 테스트할 수 있는 다양한 고구가 있음! 많은 API가 HTTP 프로토콜을 이용하므로 API 테스트 도구라고 부름! HTTP API 테스트 도구 (CLI) curl (대부분의 리눅스 환경에 내장) wuzz HTTP API..

Open API . 공공데이터 포털 에 접속해보자 정부는 Open API의 형태로 공공데이터를 제공하고 있음. Open이기는 하지만 기관이나 API마다 정해진 이용 수칙이 있을 수 있음! 데이터를 JSON 이나 XML, CSV형태로 주더라. API Key API를 이용하기 위해서는 API Key가 필요함. 얘는 서버의 문을 여는 열쇠같은 거임. 데이터를 요청할 때 API key를 같이 전달해야 원하는 응답을 받을 수 있음.!