모닝코딩

컴포넌트 생성 후 map() 함수 사용

현재 만들고자 하는 UI는 다음과 같다. 멤버들 별 이름과 학력, 전공, email을 적고자 한다.위 UI를 보는 바와 같이 같은 UI가 반복되는 것을 볼 수 있다.하여 컴포넌트를 생성 후 map() 함수로 뿌려주고자 한다.   컴포넌트 생성 나는 일단 Function Component로 만들었다.그리고 컴포넌트 폴더를 따로 만들어두는 편이다.src 폴더에 components 폴더를 만들고 "MembersProfile.tsx" 파일을 생성하였다. 함수 형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용해야 한다.그리고 아래 코드와 같이 const로 컴포넌트 이름을 선언해도 된다.나는 주로 아래와 같은 방식을 사용한다. 파일 생성 후 마지막에 export를 하면 다른 파일에서 해당 컴포넌트를 ..

TailwindCss로 반응형 헤더 만들기 내 목표는 교수님 명함에TailwindCss로 반응형 헤더 만들기  내 목표는 교수님 명함에 우리 홈페이지 URL이 들어간 QR 코드를 만들어드리는 것이 목표이다.그러기 위해서는 접근성이 좋은 모바일 버전의 웹 UI가 필수이다.반응형으로 만드는것은 꼭 필요한 일이지만 동시에 매우 귀찮은 일이긴 하다.그 중에서 헤더는 반응형이라기 보다는 적응형 웹 개발에 어울리다는 말이 맞는것 같다. PC 버전에서의 헤더는 메뉴들이 일자로 나열되어 있는 경우들이 많다. 화면이 그만큼 여유롭게 크기 때문이다.하지만 모바일 버전은 대부분 햄버거 모양의 이모티콘을 사용한다. 만드는 과정을 포스팅 해보고자 한다.   React 화면 크기 감지 - resize 이벤트 resize 이벤트는..

ES2015 전에는 var를 사용하는 것이 변수를 선언하는 유일한 방법이었다. 하지만 이제는 더 나은 기능을 제공하는 몇 가지 변수 선언 방법이 추가되었다. const const는 값을 변경할 수 없는 변수이다. 우리가 작성하는 자바스크립트 코드에서는 변경해서는 안 되는 변수가 많다. const name = "JS"; name = true; console.log(name); // Error let js에서 구문적인 변수 영역 규칙을 지원한다. let은 값을 변경할 수 있는 변수이고, 지역변수로 사용 가능하다. js에서는 중괄호를 사용해 코드 블록을 만든다. const title = "js"; if (title) { let title = "python"; console.log(title); // pytho..

Map은 반복문이다. array 자료 앞에 map을 붙일 수 있다. 함수 안에서 card라는 파리미터는 array의 자료가 순서대로 받아지게 된다. 그러면 Card라는 서브컴포넌트가 card를 받고 순서대로 div 태그를 출력하게 된다. 위의 코드가 출력되면 이렇게 출력된다. 만약 이런 사이드바를 제작해야한다고 치자 이러한 객체를 받아왔을 때 이렇게 객체를 받아와서 map에 뿌리면 바로 제작 가능이다!! 마지막 연습으로 게시물 객체를 map으로 받아와서 하드코딩 없이 만들어보자 객체 : const backendInformation = [ { title: "HTML", content: "HTML은 어쩌고 저쩌고...", image: "#", }, { title: "CSS", content: "CSS는 어쩌..

State state는 React에서 정말 많이 쓰이는 문법이다. state는 변수에 값을 할당해주고, 유동적으로 값을 변환시켜주기 때문에 코드를 동적으로 사용해야할 때 매우 유용하게 쓰인다. 이때 하나의 의문점이 들 수 있다. 왜 일반변수를 사용하지 않고 state를 쓰는걸까? 그 이유는 동적으로 사용할 수 있는지의 유무에서 온다. 일반변수는 html 코드 안에서 값을 변환할 수 없다. 하지만 state는 일반 변수와 달리 자동으로 값을 변환할 수 있다. const [textValue, setTextValue] = useState(""); state 선언은 이렇게 한다. textValue : state의 값을 가져오게 한다. setTextValue : state의 값을 바꿔주는 함수 역할을 한다. 코드..