개발자연습노트

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

안에 글제목 state 가 필요한데 저번에 만든 내부에 글제목 state를 집어넣고 싶으면 어떻게하죠? 예를 들면 이렇게 하면 될듯요   function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( )}function Modal(){ return ( { 글제목[0] } 날짜 상세내용 )}▲ 하지만 제대로 실행되지 않습니다.'글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다.왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까요.자바스크립트에선 다른 함수에 있는 변..

자바스크립트 map 함수 쓰는 법  모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다. 자바스크립트 기본함수 같은건데 용도를 알아봅시다.  설명하다 var 어레이 = [2,3,4];어레이.map(function(){ console.log(1)});기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.저러면 진짜로 console.log(1) 3번 실행됨    설명하다 var 어레이 = [2,3,4];어레이.map(function(a){ console.log(a)});기능 2. 콜백함수에 파라미터 아무렇게나 작명하면그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)저러면 진짜로 2, 3, 4가 콘솔..

리액트에서 동적인 UI 만드는 step 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다.  1. html css로 미리 UI 디자인을 다 해놓고2. UI의 현재 상태를 state로 저장해두고3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성이렇게 코드짜면 완성입니다.  그래서 글제목 누르면 전에 만들었던 이게 뿅 등장하는모달창 기능을 만들어봅시다.    step 1. html css로 미리 디자인해놓기  step 2. UI의 현재 상태를 state로 저장 state 하나 만들고거기에 현재 UI의 상태정보를 저장해두라는 소리입니다.  let [modal, setModal] = useState(false);저는 modal이라고 작명..

오늘은 모달창처럼 뜨는 상세페이지를 한번 만들어보면서Component 문법을 알아봅시다.    상세페이지 겸 모달창 UI를 하나 만들어봅시다 일단 html css 레이아웃 디자인부터 해봅시다.설명하다  제목 날짜 상세내용설명하다 .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left;}당연히 css 코드는 css 파일에 넣어야합니다. 모달창 겸 상세페이지 완성 끝     설명하다 return( )근데 html 코드짤 때 유의점이 있는데 return ( ) 안에 두개의 html 태그 나란히 적기 이런거 안됩니다. return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다.   설명하다..