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

전체 글

 (224)
[React] 데이터 수정하기 (일기장 만들기 6탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 { return ( 작성자 : {author} | 감정 점수: {emotion} {new Date(created_date).toLocaleString()} {content} { console.log(id); if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){ onDelete(id); } }}> 삭제하기 수정하기 // 수정하기 버튼 만들기 ); }; export default DiaryItem; 삭제하기 버튼 onClick 함수 위로 빼서 작성하기 DiaryItem.jsx const DiaryItem = ({ onEdit, onDelete, auth..
[React] 데이터 삭제하기 (일기장 만들기 5탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 { return ( 작성자 : {author} | 감정 점수: {emotion} {new Date(created_date).toLocaleString()} {content} { // 삭제하기 버튼 만들기 console.log(id); // 버튼 누르면 해당 id가 console에 뜸 }}> 삭제하기 ); }; export default DiaryItem; (1) App.js에서 onDelete 함수를 정의함 → 직접 App.js에서 함수 호출하는게 아니기 때문에 어떤 id를 갖고있는 요소를 원하는지 매개변수로 전달 (호출은 DiaryItem에서 해야함) (2) App.js에서 Di..
[React] 데이터 추가하기, 배열 리스트 만들고 추가하기 (일기장 만들기 4탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 - 추가, 수정, 삭제와 같은 이벤트들은 setData 같은 함수를 props로 전달해서 아래에서 위로 올라가는 구조이다. - 에서 새로운 일기를 작성하면 "생성"이라는 이벤트가 발생한다. - 이벤트는 에서 전달한 상태변화함수(setData)를 호출해서 data를 변화시킴으로써 이뤄진다. - data는 위에서 아래로만 움직인다. - data가 변화하게 되면 다시 아래로 떨군다. 위의 설명을 토대로 일기장 리스트 추가 기능 구현해보기 App.js import './App.css'; import DiaryEditor from './DiaryEditor/Diary..
[React] 데이터 리스트 렌더링 (조회) (일기장 만들기 3탄) 코드가 1탄부터 이어지기 때문에 쭉 보고 오셔야합니다~ 1탄 https://dev-ini.tistory.com/73 { return ( 일기 리스트 ); } export default DiaryList; 2. App.js에서 컴포넌트를 불러온다. App.js import './App.css'; import DiaryEditor from './DiaryEditor/DiaryEditor'; import DiaryList from './DiaryList'; function App() { return ( // 컴포넌트를 불러온다. ); }; export default App; 3. 리스트 데이터를 만든다. App.js import './App.css'; import DiaryEditor from './Diary..
[React] useRef로 DOM 조작하기 (일기장 만들기 2탄) useRef로 DOM 조작하는 법을 알아보자 코드가 1탄과 이어지기 때문에 1탄부터 보고 오셔야합니다~ https://dev-ini.tistory.com/73 { const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; // 입력 강제하기 const handleSubmit = ()=>{ if(state.author.length < 1){ alert("작성자는 최소 1글자 이상 입력해주세요"); return; } if(state.content.length ..
[React] useState로 사용자의 입력 처리하기: input, button에 이벤트 달기 (일기장 만들기 1탄) 이렇게 생긴 일기장을 만들어볼 것이다. 1. 작성자 입력 받기 DiaryEditor.js import { useState } from "react"; // (1) 사용자의 input 입력값을 처리하기 위함 const DiaryEditor = () => { const [author, setAuthor] = useState("황혜인"); // (2) input의 입력값이 실시간으로 바뀔때마다 상태변화함수(setAuthor)를 이용해서 state(author)에 입력값을 저장해주면 됨 return ( 오늘의 일기 { setAuthor(e.target.value) }}/> // (3) 작성자(author)를 입력받을 input태그에 value 속성으로 전달을 해줌 // (3-1) input창에 입력해도 입력이 ..
[React] Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 오류 해결 1. 오류 코드 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 2. 원인 JSX는 javaScrit이기 때문에 for은 반복의 의미를 가지고 있어서 HTML 상에서는 htmlFor을 써줘야 한다. 3. 해결방법 for대신 htmlFor을 써야한다.
[CSS] 마우스 hover 시에 붕 뜨는 효과 넣기 (JS 사용X) CSS에서 많이 사용되는 효과 중에 마우스 hover하면 붕 뜨는 효과를 어떻게 넣는지 알아보자! 1. 우선 붕 뜨게 할 아이콘을 만들어준다. 필자는 파란색 박스를 만들었다. (CSS 탭을 누르면 CSS 코드를 확인할 수 있습니다.) See the Pen Untitled by Git ini (@hwanghaein) on CodePen. 2. .box에 transition: transform 0.5s ease; 속성을 추가하고 .box:hover에 transform: translateY(-20px); 속성을 추가한다. transition과 transform에 관련된 구체적인 설명은 아래의 mdn 문서를 참고하자! https://developer.mozilla.org/ko/docs/Web/CSS/transi..

티스토리툴바