과거 (5) 썸네일형 리스트형 [문서화] 강의: 만들면서 배우는 리액트 : 기초 이 글은 인프런 강의 만들면서 배우는 리액트: 기초를 수강하고 개념들을 정리하여 문서화시킨 글입니다. 목록 리액트가 왜 필요한가 JSX (개념, 문법) 컴포넌트 이벤트 스타일링 상태와 useState 리스트 로컬스토리지 데이터 싱크 폼(from) API와 fetch async & await useEffect 조건부 렌더링 create-react-app React 깃헙 배포 리액트가 왜 필요한가? [자바스크립트만으로 우리가 원하는 웹을 구현하기 힘들어졌다. 그렇기 때문에 나온 것이 리액트이다.] 강의에서는 이렇게 짧게 나오지만 개인적으로 더 찾아보았다. 코드의 가독성과 재사용성, 유지보수가 편하기 때문에 React를 사용한다. 는 말로 정리할 수 있고 이것을 풀어서 말하면 다음과 같이 이야기할 수 있다. .. 덕담 공유 사이트 https://deokdam.spartacodingclub.kr/b2ZUGTw2cyaG/index.html 민호 님의 덕담 페이지 덕담 한마디 남겨주세요! deokdam.spartacodingclub.kr 스파르타 코딩 클럽에서 제공하는 무료 강의로 만들어본 페이지 입니다. 코딩을 처음 시작하는 사람들이 배우기에는 나쁘지 않지만 조금 배운 사람들에게는 많이 아쉬운 강의입니다. JS코드르 어떻게 짰을지 궁금해서 듣기 시작한 강의인데 그 부분은 미리 짜놓은 코드를 복붙하는 것으로 끝내버려 김이 새어버린 그런 강의였습니다. 스파르타코딩클럽 추억 소환 저번에 가정의 달을 맞아 스파르타 코딩클럽에서 했던 강의를 또다시 진행하길래 이번에도 한 번 해보았다. 저번에는 api라든가 까먹었던 css가 많아 살짝 버벅이는 모습을 보였기 때문에 지금의 나는 어떤지 궁금하여 복습차원에서 다시 진행해보았다. 그 결과 지금의 나는 무리 없이 강의를 끝마칠 수 있었다. 중간에 오타가 나서 일어나는 오류를 제외하면 기술적인 부분에서 문제는 일어나지 않았다. 오류가 나도 이 부분에서 문제가 생겼구나 하고 수정을 하니 오류가 해결되었다. 특히 api키 때문에 생기는 오류를 단번에 캐치해서 개인 api를 가져와 해결하는 내 모습은 훌륭했다. 복습하면서 눈에 띄었던 것은 @media 였다. 이것은 웹페이지가 줄어들었을 때 어떻게 보일 것인지 설정할 수 있게 하는 코드인데 최근에 .. 1. 자바스크립트(JavaScript) [정의, 역할, 장단점] 자바스크립트란? 자바스크립트는 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어입니다. 우리가 버튼에 마우스를 올려놓았을 때 버튼의 색이 바뀐다던가 버튼의 테두리가 진하게 바뀌는 모션들이 전부 자바스크립트로 작동되고 있습니다. 자바스크립트로 작성한 프로그램을 '스크립트(script)'라고 부르며 이것을 HTML 내부에 작성하거나 파일을 따로 만들어 함께 불러올 수 있습니다. 그리고 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 🤔 자바스크립트와 자바는 무슨 연관이 있나요? 자바스크립트가 처음 만들어졌을 때 Mocha라는 이름으로 불렸습니다. 그리고 LiveScript라고 바뀌었지요. 그런데 당시 자바의 인기가 아주 높았습니다. 개발자들은 LiveScript 대신 자바스크립트(JavaS.. 스파르타코딩클럽 스파르타코딩클럽에서 진행하는 추억소환 코딩 패키지에 참여했다. online.spartacodingclub.kr/enrolleds/608bf9abeea7ba0a5b52e6bb/rounds/60892d3e450ab01f434346ba/roadmap SpartaCodingClub online.spartacodingclub.kr 초보자들을 위해 HTML,CSS의 기본을 가르쳐주고 지도 API를 사용하는 법을 알려주면서 간단한 웹페이지를 만들어보는 수업이었다. 그동안 너무 React만 했던 모양인지 오랜만에 하는 HTML,CSS가 낯설었고 기억나지 않아 구글에서 열심히 검색하며 만들어보았다. 지도 API는 카카오에서 apikey를 받아 script에 넣고 거기에 필요한 위도와 경도를 구글에서 얻어와 입력하면 장소.. 이전 1 다음
