개발자연습노트

리액트는 원래 좀 자유롭습니다. 이미지 넣는 법도 서너개 있습니다.    강의에서 사용하는 신발 이미지 URL  https://codingapple1.github.io/shop/shoes1.jpghttps://codingapple1.github.io/shop/shoes2.jpghttps://codingapple1.github.io/shop/shoes3.jpg     대문만들기 심심하니까 메인페이지에 큰 사진 하나 넣어봅시다. 하나 넣고 css 파일에서 디자인넣으면 될 것 같은데   (App.css).main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : cen..

이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성하신 후 그걸 올려야합니다. 왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 리액트의 이상한 state, JSX 이런거 전혀 못알아듣습니다. 그래서 리액트 프로젝트를 build 라는걸 하시면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다.그리고 그걸 어딘가 서버에 올려야 사용자들이 여러분의 사이트를 구경할 수 있는 것임  우리도 build를 해본 후 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 해보도록 합시다. 빨리 github.com 들어가서 계정을 먼저 ..

컴포넌트 만들 때 function 쓰면 된다고 했는데 예전 리액트에선 class 문법을 사용했습니다. 옛날엔 어떻게 했는지 알아봅시다. 지금은 그냥 function 쓰라고 권장하기 때문에 참고만 하셔도 됩니다.     class 문법으로 컴포넌트 만드는 법  class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 안녕 ) }}1. class 어쩌구 작성하고 컴포넌트 이름 작명합니다.2. constructor, super, render 함수 3개 채워넣습니다. 기본 템플릿같은 것임 3. 컴포넌트는 길고 복잡한 html 축약할 때 쓴다고 했습니다. return 안에 축약할 html 적..

태그 사용하기 유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 html에선 다음과 같은 태그들을 이용가능합니다. 이거 말고도 다양한 종류의 인풋 박스가 많으니 필요할 때 찾아쓰도록 합시다.      에 뭔가 입력시 코드를 실행하려면 유저가 에 뭔가 입력시 코드를 실행해주고 싶을 때가 많습니다.그러고 싶으면 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다.   { 실행할코드 }}/>onChange, onInput은에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행해줍니다. 진짜인지 console.log(1) 이런거 넣어서 테스트해봅시다.   (참고)이벤트 핸들러들은 매우 많습니다.onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행해줍니다.onScroll..

Q. 지금 누른 글제목이 모달창안에 뜨게 하고 싶으면 어떻게 코드를 짜야할까요?0번 글을 누르면 0번 글제목이 모달창안에 등장하고1번 글을 누르면 1번 글제목이 모달창안에 등장하고그런 식으로 동작하게 만들어봅시다. 다 배운내용이라 강의 듣지말고 알아서 해봅시다.   약간의 힌트는  직접 뭐라도 해보라고 드리는 힌트인데 모달창안의 제목도 일종의 동적인 UI입니다. 동적인 UI 어떻게 만들라고 했습니까  1. html css로 미리 디자인해놓고 2. 현재 UI의 상태를 state로 만들어두고3. state 종류에 따라서 UI가 어떻게 보일지 작성하랬습니다. 그러면 끝임 이제 나중에 필요할 때 스위치 (state) 조작만 하면 됩니다.       1. html css로 미리 디자인해놓고  다 한것 같군요 패스..

JSX 문법 1. html에 class 넣을 땐 className JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호} function App(){   var data = 'red';   return (                     개발 blog         안녕하세요               ) } 온갖 곳에 {} 중괄호를 열어서 변수들을 집어넣을 수 있습니다. href, id, className, src 등 여러가지 html 속성들에도 가능합니다. 위처럼 쓰면  이렇게 되겠군요. JSX 문법 3. html에 style속성 넣고싶으면   글씨  4. 변수 말고 , state 담기 이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말..

ㅇ

10 분🌙(실전) 웹개발 기능대회 예제 (글로 진행합니다) 실제 프론트엔드 개발을 체험할 수 있는 좋은 예제를 준비했습니다. 전국기능경기대회라는게 있는데   기술진흥원에서 매년 이런 주제로 대회를 개최하고 시상합니다.웹디자인 & 개발 분야는 인터넷 접속 안되는 컴퓨터와 코드 에디터 하나 주는데10시간 동안 열심히 프론트엔드와 서버 만들고 오면 됩니다. (실은 문제를 일주일 전에 미리 줍니다. 그래서 답안을 달달 외워감) 상금이 쥐꼬리라 참가하라는건 아니고 여기서 출제하는 문제들이 자바스크립트 연습해보기 좋아서 가져왔습니다. 20년도 문제인데 심심하면 도전해보도록 합시다.  필요한 이미지 등 첨부파일은 하단에 준비되어있습니다. 목표는 하단에 설명하는 기능을 가진 HTML 파일을 만드시면 됩니다.     ..

알림창 온오프 (버튼2개) buttion onclick = "알림창열기('blcok');">버튼  닫기  => 닫기  =>document.getElementById('close').addEventListener('click', function(){     document.getElementById('alert').style.display = 'none' });  열기  ==> function 알림창열기(구멍,구멍2){ getElementClassName()[0]   document.getElementById('구멍').style.display = 구멍2; (아이디,비번)   document.getElementById('alert').style.display = block; } list(토글)(class ..