거니의 velog

2. UI 구성하기 * 앞으로 만들 컴포넌트를 하나하나 용도별로 소개하겠다! 1. TodoTemplate : 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여 준다. children으로 내부 JSX를 props로 받아 와서 렌더링해 준다. 2. TodoInsert : 새로운 항목을 입력하고 추가할 수 있는 컴포넌트이다. state를 통해 인풋의 상태를 관리한다. 3. TodoListItem : 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트이다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 준다. 4. TodoList : todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 변환하여..

* 지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았다. 이 장에서는 지금까지 배운 지식을 활용하여 프론트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 볼 것이다. * 이번 실습은 다음 흐름으로 진행한다. 1. 프로젝트 준비하기 (1) 프로젝트 생성 및 필요한 라이브러리 설치 * create-react-app을 사용하여 프로젝트를 생성해 보자. $ yarn create react-app todo-app * 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하자. $ cd todo-app $ yarn add node-sass classnames react-icons * 이 프로젝트에서 Sass를 사용할 예정이므..

4. styled-components * 컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식이다. 이 방식을 'CSS-in-JS'라고 부르는데, 이와 관련된 라이브러리는 정말 많다. 라이브러리의 종류는 다음 주소에서 확인할 수 있다. https://github.com/MicheleBertoli/css-in-js GitHub - MicheleBertoli/css-in-js: React: CSS in JS techniques comparison React: CSS in JS techniques comparison. Contribute to MicheleBertoli/css-in-js development by creating an account on GitHub. githu..

3. CSS Module * CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술이다. CSS Module을 사용하기 위해 구버전(v1)의 create-react-app에서는 웹 팩에서 css-loader 설정을 별도로 해 주어야 했지만, v2 버전 이상부터는 따로 설정할 필요 없이 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용된다. * CSSModule.module.css라는 파일을 src 디렉터리에 생성하여 다음과 같이 한 번 작성해 보자. /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마..

[form.jsp] 공지사항 등록/수정 DDIT HOME 공지사항 등록/수정 공지사항 ${name } 제목을 입력해주세요 내용을 입력해주세요 ${notice.boContent } 파일을 선택해주세요 Sep2014-report.pdf 1,245 KB App Description.docx 1,245 KB photo1.png 2.67 MB photo2.png 1.9 MB package kr.or.ddit.controller.crud.notice; import java.util.HashMap; import java.util.Map; import javax.inject.Inject; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.H..

마이페이지 Home User Profile 내정보 Profile 아이디 a001 비밀번호 PROTECTED 이름 홍길동 성별 남자 이메일 ddit@ddit.or.kr 전화번호 010-1234-1234 주소 대전광역시 중구 오류동 471-23 대덕인재개발원 내정보 수정 수정하기 프로필이미지 프로필 이미지를 선택해주세요 아이디 비밀번호 이름 성별 남자 여자 이메일 전화번호 주소 우편번호 찾기 package kr.or.ddit.controller.crud.notice; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframew..