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

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

intro - React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다 물론 알다시피 이 방법은 테스트가 쉽고 확장성이 좋다는 장점이 있음. - 그래서 컴포넌트를 먼저 만들고 페이지로 조립하는 상향식으로 만듦. ( 단 데이터는 위에서 아래로 흐르는 하향식인데 이 원칙을 단방향 데이터 흐름이라고 부름 또한 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못함! 데이터 정의 - 자. 데이터가 무엇인지 먼저 정의하자. 트위터를 만든다고 했을때 우리가 가질 데이터의 예시로 다음이 있다고 하자 전체 트윗 목록 사용자가 작성중인 새로운 트윗 내용 이중에 트윗 목록은 가변적이므로 상태(state)일 것 이다. 여기서 상태는 많으면 많을수록 애플리케이션이 복잡해진다..

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값 넣..

✍ 오늘 공부에 대해 섹션 2 2주차 진행 완료 HTTP에 기초에 대해 공부를 했는데 GET POST 부분을 실험하는데 너무 재미있었다 API 도 배우고 왜 API 가 중요한지 REST API가 중요한지 알게되었다 컴퓨터든 뭐가됐든 여튼 나와 다른 사람간의 원활한 소통을 위해 약속하는 것! 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 내가 열심히 하려고 노력은 하고 있다는 것 💦 부족했던 것(Lacked) : 조금 더 꾸준히 건강 챙기면서 하기 🕯 바라는 것(Longed for) : 제발 개발 좋은 곳에 취직할 수 있도록 해주셈!! 📄오늘의 띵언 실패로 끝나 현재 잃은것이 많지만 대신 내 안에 더 확고하고 강력한 '신념'을 얻었다

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..