Today`s Study (24) 썸네일형 리스트형 22.03.21 월 오늘은 리액트로 만든 프로젝트를 깃헙을 이용해 페이지 주소를 만들어보았습니다. 기존에 이 부분을 몰라서 리액트로 만든 페이지를 어떻게 공유하는지 몰라 많이 헤맸었는데 이번 강의를 통해 알게되어 정말 좋았습니다. 아마 내일이면 강의가 끝날 것 같은데 그 이후에는 문서화 작업을 생각하고 있습니다. 내일 뵙겠습니다. 22.03.13 일 오늘 배운 것을 정리해보겠습니다. 1. useState - 지연 초기화 const [counter, setCounter] = React.useState(()=> { return jsonLocalStorage.getItem("counter") }) // 예시 1 async function updateMainCat(value) { const newCat = await fetchCat(value); setMainCat(newCat); const nextCounter = counter + 1; setCounter(nextCounter); jsonLocalStorage.setItem("counter", nextCounter); } // 예시 2 async function updateMainCat(value) { .. 22.03.12 토 오늘은 fetch에 이야기 하겠습니다. 예전 스파르타코딩클럽에서 프로젝트를 진행할 때 openweathermap api를 이용할 때 fetch api를 사용했었습니다. fetch 사용 방법 fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(JSON.stringify(myJson)); }); response는 fetch api가 가져온 값입니다. 이것은 단순한 HTTP Response이며 실제 JSON이 아니기 때문에 json() 메서드를 사용해 json 형태로 바꿉니다. 그리고 나서 json안에 우리가 원하는 것을 찾아 이.. 22.03.11 금 리액트를 배우면서 그동안 배운 내용들을 정리해보았습니다. 1. JSX란? JSX = javascript + XML html 태그 안에서 중괄호{}를 사용해서 JS를 쓸 수 있다. const count = 1; const title = {count}번째 고양이 title 변수에 담은 h1태그는 '리액트 엘리먼트'라고 부른다. 2. Babel 최신 문법을 브라우저가 이해할 수 있는 JavaScript로 통역한다. 브라우저는 JSX를 이해하지 못하기 때문에 Babel이 통역해준다. 3. 컴포넌트 재사용 가능한 UI 코드 조각 4. 스타일링 리액트에 css 끼얹기 css 클래스: className 인라인 스타일링: style = {{스타일 속성; 스타일 값}} 위험 //이때 red를 string으로 넘긴다. 5.. 22.03.10 목 오늘도 어제에 이어서 리액트를 공부해보았습니다. 1. useState const [counter, setCounter] = React.useState() counter는 현재값을 의미하고 useState의 괄호 안에 초기값을설정할 수 있다. setCounter는 counter에 변화를 줄 수 있다. const App = () => { const [counter, setCounter] = React.useState(0); console.log(counter); // 0 function Click() { setCounter(counter + 1); } return ( {counter}번째 클릭 ); }; const 여기다가그려 = document.querySelector("#app"); ReactDOM.re.. 22.03.09 수 오늘은 리액트에 대해서 공부를 진행했습니다. 그리고 그 중에서 구조분해문법(Destructuring)에 대해 좀 더 자세히 파보았습니다. 저는 이것을 참고해서 리액트 컴포넌트를 구조분해문법으로 작성해보았습니다. 기존에는 props를 활용해 이렇게 작성했었습니다. const MainCard = (props) => { function handleHeartClick() { console.log("하트 눌렀음"); } function handleHeartMouseOver() { console.log("하트 스쳐 지나감"); } return ( 🤍 ); }; const app = ( 1번째 고양이 가라사사대 ); 이제 구조분해문법으로 작성해보겠습니다. const MainCard = ({ img }) => { fu.. 22.03.08 화 오늘은 리액트를 집중적으로 공부해보았습니다. 리액트를 공부하면서 JS의 문법도 같이 익혀서 많이 도움이 된 것 같습니다. 1. 화살표 함수 // 함수가 있는 경우 const clcikBotton = () => { function onClickEvent(event) { event.preventDefault(); } return ( 제출 ); } // 함수가 없는 경우 const clcikBotton = () => ( 제출 ) // {}와 return의 유무를 확인할 수 있다. 2. 구조분해할당 정의: 객체나 배열을 변수로 '분해’할 수 있게 해주는 문법 필요성: 함수에 객체나 배열을 전달해야 하는 경우, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생겨 생겨났다. 예제 // 이름과 성을 .. 22.03.04 금 오늘은 이터러블, 이터레이터, 이터러블/이터레이터 프로토콜에 대해 알아보았습니다. 참조형 타입인 심볼도 나오면서 개인적으로 많이 어려워한 개념입니다. 아직 이해도가 부족해서 오늘은 이 개념에 대한 설명은 어려울 것 같습니다. 내일도 이어서 공부해서 이해한 다음 설명하도록 하겠습니다. 강의를 듣다가 도저히 안되겠어서 자료들을 찾은 결과 이게 그나마 도움이 된 것 같아 올려봅니다. https://ko.javascript.info/iterable iterable 객체 ko.javascript.info 그리고 멋쟁이사자처럼 프론트엔드 스쿨 자소서를 작성 중입니다. 거의 다 써가고 있고 지금은 가다듬고 있습니다. 내일은 졸업기념으로 친구들과 함께 저녁 약속이 있어서 아마도 블로그가 쉴 것 같습니다. 그래서 일요일.. 이전 1 2 3 다음
