거름

반응형 웹 기기마다 또는 환경마다 최적화된 웹사이트를 제공 모바일 점유율이 증가하면서 모바일로 인터넷을 사용하는 것이 당연해졌습니다.모바일 웹 또는 반응형 웹을 만들어야하는 것이 기본이 됐습니다. 장점 1. 유지보수가 간편하다. 모바일 웹과 데스크톱 웹, 2개의 웹사이트를 만들게 되면 추가, 수정시 둘 다를 수정해야하지만반응형 웹 경우 하나의 html와 css에서 작업하기 때문입니다. 2. 마케팅에 유리하다. 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경하여 보여줄 수 있끼 때문에 전달하고자 하는 내용을 확실하게 전달이 가능합니다. 3. 검색 엔진 최적화(SEO - Search Engine Optimize) (검색 엔진 -> 특정 키워드로 검색시 겸색 결과에서 상위권에 나타나도록 관리)모바일 웹 ..

HTML 기본정리 HTML (Hyper-Text-Markup-Language) 제목(tile), 링크(a) 등브라우저에게 각각의 태그와 각 요소가 무엇을 뜻하는지 설명(구분)해주는 언어(태그가 많은 텍스트 문서) 프로그래밍 언어는 아닙니다. 브라우저에게 해당 문서가 html임을 알려줍니다.self-contained태그 - 혼자 열고 닫음 사용자에겐 보이지않고 웹사이트에 관한 필요 정보를 제공 추가 정보 - 브라우저에게 어떤 언어로 작성되었는지 알려줌. - 웹사이트에 대한 설명(사이트 검색시 하단에 보여짐)

리액트 기초- 10 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. async와 await (fetch, then 을 계속 하다보면 callback 지옥에 빠지게된다.) then 안에 then... 안에 then..callback 지옥에 빠집니다. 그에 대한 해결책(async, await) 사용자 정의 함수 2개를 만들어줍니다. _getMovies와 _callApi getMovies는 가져온 영화관련 정보를(jso..

리액트 기초- 9 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. Ajax(비동기 자바스크립트 그리고 xml)(https://yts.am/api#list_movies) 해당 사이트에서 를 이용할것 입니다! Ajax를 React에서 사용하는 방법-> fetch(url) 함수 사용 App.js Promise-> 자바스크립트의 새로운 컨셉(?)입니다!-> 영화관련 API를 불러오는 동안 (fetch) 다른 작업을 하길 ..

리액트 기초- 8 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. state가 없는 Component(props만 존재,render 없음,라이프 사이클 없음) state가 없는 컴포넌트는 function 함수명 (props) { return() } 으로 구성할수있습니다. props는 {}->JSX 로 받아주면 됩니다. (this.props.어쩌고 는 쓰지 않습니다. 못써요!class 안에 있는 this 키워드 이기..

리액트 기초- 7 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. React Component Lifecycle 컴포넌트의 여러 기능을 순서대로 실행 RendercomponentWillMount()▼render()▼componentDidMount() UpdatecomponentWillReceiveProps()▼shouldComponentUpdate() ▼(true일 경우만)componentWillUpdate()▼r..

리액트 기초- 6 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. props의 타입 검사 (정수, 실수, 문자열, 꼭 요구되는 값 등)prop-types 모듈 필요 cmd 에서 movie-app2 폴더로 들어갑니다. 모듈을 설치합니다.(npm install prop-types 도 가능) title은 string여야하고 isRequired 꼭 요구되는 값이다!하고 정의를 해주면다른 값이 들어왔을 경우 에러메세지(Wa..

리액트 기초- 5 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. 그럼 App.js를 이렇게 수정 한 후 poster 이미지 도 자식 컴포넌트로 보내주면서!Array.map을 사용해볼겁니다! 지금은 movies 배열의 내용이 4개뿐이지만몇갠지 내가 알수가 없는 상황이거나 무수히 많을 경우 movies[0].titlemovies[1].titlemovies[2].titlemovies[3].titlemovies[4].t..

리액트 기초- 4 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. (Dataflow with Props) React는 Data가 위에서 아래로 흐릅니다.아래에서 위로는 가지 못하는 것이죠. 부모컴포넌트가 자식컴포넌트에 정보를 넘겨줄것입니다.-> props App.js 에서문자열 배열을 생성해서Movie.js의 Movie 컴포넌트로 문자열을 넘겨보겠습니다. movies 라는 이름의 문자열 배열 생성 후 title={..

리액트 기초- 3 (https://academy.nomadcoders.co/courses/enrolled/216871)(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv) 노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다. 컴포넌트 추가로 만들어보기 Movie.jsMovie.css파일 생성 후App.js 와 비슷한 형태로 구현한다. React - Component가 필요합니다.(import)css를 후에 사용하기위해 미리 import 해줍니다. render(){return();} 함수로 사용자에게 보여줄 부분을 구현합니다! 이렇게 구현해 놓은것을 사용자에게 실질적으로 ..