현재 페이지는 이렇습니다. 위의 nav는 react bootstrap에서 가져왔습니다. 이제 nav아래에 페이지의 대문을 장식하는 이미지를 넣어보겠습니다. img 넣는법 css에서 img넣기 App.js에 를 작성해주고 css에서 다음과 같이 작성합니다. .main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center; } css파일에서 src폴더안에 있는 사진을 사용하고 싶으면 ./이미지경로 사용하면 됩니다. html에서 img넣기 html안에서 src폴더의 이미지를 넣고 싶으면 이미지를 import 해오고 사용해야 합니다. import bg from './b..
이번에는 저번시간에이어 input에 사용자가 값을 입력하면 해당 값으로 새로운글의 제목으로 작성하고 화면에 표시하고 글마다 삭제버튼을 만들어 삭제버튼을 누르면 해당글이 삭제되는 기능을 구현해보겠습니다. 1. 유저가 입력한 데이터 추가 사용자가 아래의 입력칸에 값을 입력하고 글발행을 누르면 그 값이 새로운글의 제목이되어 목록에 추가되는 코드를 구현해야합니다. 예전 자바스크립트 코드로 따지면 "버튼 누르면 유저가 입력한 글 가져와서 html을 하나 생성해주세요" 였지만 리액트에서는 "버튼 누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요" 이렇게 작성하면됩니다.(state를 변경하면 글제목.map()함수에 의해 알아서 html을 재랜더링해주기 때문에) 아래의 state에 유저가 입력한 값만 끼..
태그 유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 html에서는 아래와 같이 태그를 생성합니다. 태그 이벤트 유저가 에 뭔가 입력시 코드를 실행해주고 싶을 때가 많습니다. 그러고 싶으면 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다. { 실행할코드 }}/> onChange, onInput은 input에 사용자가 입력하면 안에 있는 코드를 실행해줍니다. 확인해보겠습니다. 아래와 같이 코드를 작성해보고 확인해보면 { console.log('확인'); }}> 아래와 같이 입력할때마다 이벤트가 실행됩니다. 에 입력한 값 가져오기 e라는 파라미터를 추가해주고 e.target.value라고 적으면 현재 input에 입력된 값을 가져올 수 있습니다. 이벤트핸들러에 e를 추가하면 e는 이벤..
자식컴포넌트에서 부모컴포넌트에 있던 state를 쓰고 싶으면 그냥 사용하면 안되고 props로 전송해서 써야합니다. 다음과 같은 코드를 봅시다. 아래의 코드에서 처럼 실행하면 실행되지 않습니다. 왜냐하면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없기 때문입니다. function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 하지만 아래처럼 컴포넌트 2개가 부모/자식인 경우에는 가능합니다. 부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있습니다. 그러면..
똑같은 html이 반복적으로 출현하면 반복문을 이용해서 쉽게 똑같은 html을 생성할 수 도 있습니다. for반복문은 JSX중괄호 안에서 사용할 수 없어서 map()을 대신 사용합니다. map 함수 사용법 모든 array 자료 우측엔 map()함수를 붙일 수 있습니다. var array = [2,3,4]; array.map(function(){ console.log(1) }); 위의 코드처럼 작성하면 array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다. 아래처럼 콜백함수에 파라미터 아무렇게나 작성해주면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다. 즉 2, 3, 4 가 출력됩니다. var array = [2,3,4]; array.map(function(a){ con..
동적인 UI 만드는 step html css로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI가 어떻게 보일지 작성 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다. 저는 글제목 누르면 전에 만들었던 이게 등장하는 모달창 기능을 만들어보겠습니다. 1. html css로 미리 디자인해놓기 저번시간에 modal 컴포넌트에 디자인을 했습니다. 2. UI의 현재상태를 state로 저장 state를 하나 만들고 거기에 현재 UI의 상태정보를 저장해보겠습니다. let [modal, setModal] = useState(false); 보통 위 코드처럼 state변경함수는 set을 앞에 붙이는게 관습입니다. 모달창의 열림/닫힘..
모달창 UI 상세페이지 겸 모달창 UI를 하나 만들어보겠습니다. 일단 html과 css는 다음과 같습니다. 제목 날짜 상세내용 .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } 위의 html코드를 작성할 때 유의할 점이 있습니다. return()안에는 두개의 html태그를 나란히 적기가 안됩니다. return()내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다. (의미없는 div 쓰기 싫으면 로 감싸도됩니다. 이걸 fragment문법이라고 합니다) Component문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 바로 Component입니다. 이걸 이용하면 함..
array, object 자료일 경우에 state 수정할 때의 주의해야 할 점에 대해 알아봅시다. 글수정 버튼 지난시간에 코드에서 아래코드를 추가하여 클릭을하면 state를 변경해주는 버튼을 만들었습니다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { 글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학']) } }> 수정버튼 ) } 하지만 위의코드는 별로 좋지 않습니다. 만약 []안에 글이 100개가 있으면 onClick안의 코드도 매우 길어지게 됩니다. 그래서 state를 첫 글만 바꿔서 state변경함수에 집어넣는 식으로 바꿔보겠습니다. function App(){ le..
좋아요 버튼 만들기 현재 아래의 페이지에서 각 게시물의 좋아요 버튼을 만들고 버튼을 누르면 갯수가 1씩 증가하는 기능을 만들어보겠습니다. 글제목 옆에 span태그를 활용해 좋아요를 만들어줍니다. { 글제목[0] } 👍 0 지금은 0이라고 하드코딩했는데 이렇게 하면 안될거 같습니다. 저번시간에 "자주바뀔거 같은 html 내용은 state로 저장했다가 데이터바인딩하세요"라고 배웠습니다. 따라서 state로 만들어보겠습니다. function App(){ let [따봉] = useState(0); return ( { 글제목[0] } 👍 { 따봉 } ) } onClick사용법 이제 버튼을 누르면 따봉이라는 state를 1증가시키면 원하던 기능완성입니다. 기존에 html에서는 아래처럼 코드를 실행해야 했습니다. J..
state만드는 법 기존에는 let posts = '값' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말고 state를 만들어서 데이터를 저장 할 수 있습니다. function App(){ let [a,b] = useState('남자 코트 추천'); let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } 맨 윗줄에 import{useState} from 'react'하고 원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다. 그리고 저장한 자료를 나중에 쓰고 싶으면 let[a,b] = useState('남자 코트 추천'); a자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다...
기존의 html,css,js로 웹사이트를 만들때에는 html에 코드를 작성했었는데 React에는 html 대신 JSX라는걸 사용합니다. App.js가 우리가 작성할 메인페이지입니다. 이미 채워져있던 부분들은 없애고 하나만 남겨놓고 시작합니다. 우리는 블로그를 만드는 것을 목표로 삼았기 때문에 먼저 블로그 상단 nav를 제작해봅시다. JSX문법1 HTML에 class 넣을 땐 className 아래처럼 h1~h4태그를 사용하거나 p태그를 사용하여 내용을 삽입할 수 있습니다. 그리고 기존의 html에서는 css를 설정할때 class=이름 형식으로 설정했는데 React에서는 className=이름 형식으로 설정해줘야합니다. 설정 후 App.css파일로가서 css를 설정할 수 있습니다. 왜냐하면 실은 App.j..
React 왜 쓸까? 리액트 문법부터 들이밀면 누구나 이해가 가지 않습니다. 리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데 Instagram과 같은 웹사이트에 들어가 보면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 Single Page Application 이라고 하는데 html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 보여줍니다. 그래서 부드럽게 동작합니다. JavaScript만으로도 만들 수는 있지만 코드가 너무 길어지고 복잡해지는 관계로 리액트(React)라는 자바스크립트 라이브러러리를 설치해서 사용하면 쉽게 만들 수 있습니다. 그래서 리액트라는 라이브러리를 배우고 사용하는 것입니다. 리액트를 쓰는 또 다른 ..
1회차를 떨어지고 7월 22일시험 2회차를 보고왔습니다. 저번 1회차때 55점을 받고 이번엔 무조건 합격해야지라는 생각으로 2주정도 기간을 잡고 하루에 3~4시간정도 공부한거같습니다. 1회차때 시험을 볼 때 아 정처기는 기출에서 거의 안 나오니까 기출을 소홀히 했습니다. 그결과 기출에서 8문제 정도 출제가 되었고 처참히 거저주는 기출문제를 틀렸습니다.. 그래서 이번에는 기출에도 신경을 썼습니다. 하지만 이번에도 기출에서 많이 나올지 안 나올지는 모르기때문에 프로그래밍(코딩) + 이론도 많은 비중을 둬 공부를 했습니다. 1단원~12단원중 출제 비중이 많은 부분(2단원, 9단원,11단원 등)을 중점적으로 공부를 했습니다. 그리고 프로그래밍과 SQL응용 부분은 기출문제를 분석하고 어떤 문제가 나올지 예상을 하..
다이어그램 -> UML구성요소(사물,관계,다이어그램) 구조적다이어그램 클래스다이어그램 : 클래스사이관계표현 객체다이어그램 : 럼바우(객체모델링), 객체사이에관계표현 컴포넌트다이어그램 : 컴포너트간의 관계나 인터페이스표현 배치다이어그램 : 결과물,프로세스 등 물리적 요소들 위치 표현 복합체 구조 다이어그램 : 복합구조를 갖는 경우 내부구조 표현 패키지 다이어그램 : 그룹화한 패키지들의 관계 표현 행위 다이어그램 유스케이스다이어그램 : 사용자의 요구분석 ,Actor와 Use Case 시퀀스다이어그램 : 메시지표현 커뮤니케이션다이어그램 : 메시지와 연관관계표현 상태다이어그램 : 럼바우(동적모델링), 상태 활동다이어그램 : 로직, 처리흐름 상호작용개요다이어그램 : 상호작용 다이어그램간의 제어흐름표현 타이밍다이어..
