본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Category

 (236)
[React] 데이터 값에 따라 CSS 스타일 다르게 지정하기 데이터 값에 따라 CSS 스타일을 다르게 지정하는 법을 알아보자! 만들 예제의 완성본 "영업중"은 파란색, "영업종료"는 빨간색으로 뜬다. 1. 마크업을 한다. List.jsx (리스트 페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "닭갈비", state: "영업중" }, { id: 2, title: "피자", state: "영업종료" }, { id: 3, title: "치킨", state: "영업중" }, { id: 4, title: "떡볶이", state: "영업중", }, { id: 5, title: "짜장면", state: "영업종료", }, ]; return ( 음식점 리스트 {dummyList..
[React] Routing (4) 리스트 페이지에서 게시글 클릭 시 상세 페이지 연결하기 (게시판 리스트 조회, useParams, useNavigate, Route, Routes, id 동적 라우팅) 목차 (router 설정까지 이미 다 하신분은 10번 부터 보시면 됩니다) 1. App.jsx, App.css 기본 구성하기 2. src/pages 내에 폴더 구성하기 3. import 하기 4. 4개의 페이지 import 하기 5. import 하기 6. import 하기 7. /list 경로 추가하기 8. 나머지 페이지 경로 추가하기 9. 리스트페이지와 상세페이지 마크업하기 10. App.jsx에서 path 속성 처리하기 11. id 별로 상세페이지 다르게 나오게 하기 12. 리스트페이지에서 리스트박스를 클릭하면 해당 상세페이지로 이동하게 하기 리스트페이지에서 게시글 클릭 시 상세페이지로 연결되는 router를 구현해보자! 구글링을 해봐도 기존의 블로그 주인들 코드들과 합쳐져서 이해할 수 없는 글이 ..
[React] 체크박스 (약관동의 만들기) 약관동의를 위한 체크박스를 만들어보자! 만들 예제의 완성본 1. 하위 체크 박스를 하나씩 선택해서 전체 체크 됐을때 전체동의 체크박스에 체크된다. 2. 체크박스가 전체 체크 된 상태에서 체크 박스가 한개 이상 해제되면 전체동의 체크박스가 해제된다. 3. 전체동의 시에 체크박스 모두가 선택되고, 다시 누르면 모두가 해제된다. state를 생성한다. const [allAgreed, setAllAgreed] = useState(false); const [agreements, setAgreements] = useState({ termsAgreed: false, personalInfoAgreedEssential: false, personalInfoAgreedOptional: false, ageAgreed: fal..
[React] input type="date" 기본값, 초기값을 현재시간(오늘날짜)으로 설정하기 input type="date" 에서 기본으로 보이는 날짜를 오늘 날짜로 설정되게끔 만들어보자! 1. input 태그를 작성한다. import { useNavigate } from "react-router-dom"; import MyButton from "../components/MyButton"; import MyHeader from "../components/MyHeader"; import { useState } from "react"; const New = () => { const navigate = useNavigate(); return ( } /> 오늘은 언제인가요? // (1) input 태그 작성 ); }; export default New; 2. date 상태(state)를 생성하고, in..
[React] Filter (1) 최신순/오래된순 등등 필터링 리액트에서 필터 기능을 구현해보자! 만들 예제의 완성본 1. 최신순/오래된순 필터 만들기 1. 컴포넌트를 만든다. DiaryList.js import { useState } from "react"; const ControlMenu = ({value, onChange, optionList}) => { // (1) 컴포넌트 만들기 return } const DiaryList = ({ diaryList }) => { return ( // (2) 컴포넌트 불러오기 {diaryList.map((it) => ( {it.content} ))} ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; // (1) ControlMenu 컴포..
[React] 버튼을 클릭시 모달창(팝업창) 컴포넌트 뜨게 하기, 닫기(취소) 버튼 누르면 없어지게 하기, useState props로 전달하기 , props 사용하여 state를 다른 컴포넌트로 전달하기 버튼을 클릭하면 모달창이 열기/닫기할 수 있는 기능을 구현해보자! 만들 예제의 완성본 상단에 장바구니 담기 버튼을 누르면 모달창이 뜬다. (배경도 어두워지고 배경에 있는 것들은 클릭 안됨) 그리고 취소 버튼을 누르면 모달창이 없어지고, 배경도 다시 원래 색으로 변한다. 1. 모달창 컴포넌트를 만든다. Modal.jsx 라는 컴포넌트를 만들고, 여기에 Modal.css 파일을 import해서 style을 적용한다. 그리고 App.js 에 Modal .jsx 컴포넌트를 import해서 렌더링한다. Modal.jsx import "./Modal.css"; export const Modal = () => { return ( [풀무원] 국물 떡볶이 4,000원 - 2 + 합계 8,000원 취소 장바구니 담기 );..
[React] 게시글 더보기, 접기 토글 버튼 만들기 게시글 더보기, 접기 토글 버튼을 만드는 법에 대해서 알아보자! 만들 예제의 완성본 글자수가 100자 이상일때 더보기 버튼이 뜨고, 더보기 버튼을 누르면 글 전체가 펼쳐지고, 접기 버튼을 누르면 원래 접힌 상태로 돌아간다. 1. 기본적인 마크업을 한다. Board.jsx 라는 컴포넌트를 만들고, 여기에 Board.css 파일을 import해서 style을 적용한다. 그리고 App.js 에 Board .jsx 컴포넌트를 import해서 렌더링한다. Board.jsx import "./Board.css"; export const Board = () => { const content = "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산..
[React] 버튼 클릭 시 toggle로 CSS style 바꾸는 방법, 버튼 클릭 시 요소 숨기기, 펼치기 버튼을 클릭 시 CSS style이 바뀌게 하는 방법을 알아보자! 만들 예제의 완성본 메모장 작성 버튼을 누르면, 메모장을 작성하게 할 수 있는 textarea가 펼쳐지게 하는 예제를 만들어볼 것이다. 1. 기본적인 마크업을 해서 메모장을 만든다. Toggle.jsx 라는 컴포넌트를 만들고, 여기에 Toggle.css 파일을 import해서 style을 적용한다. 그리고 App.js 에 Toggle.jsx 컴포넌트를 import해서 렌더링한다. Toggle.jsx import "./Toggle.css"; export const Toggle = () => { return ( Click to write a note! ); }; Toggle.css .container { width: 400px; height:..

티스토리툴바