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

Libraries/React

 (42)
[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을 써야한다.
[React] State 뜻, 카운터 함수, 예시 목차 1. State 란? 2. State로 카운터 함수 만들어보기 3. State를 세팅해주는 2가지 방법 4. State를 사용한 예시 (분→시간 변환기) State 란? - 계속해서 변화하는 특정 상태 - 상태에 따라 각각 다른 동작을 함 State로 카운터 함수 만들어보기 Counter.jsx const Counter = () => { return ( 0 + - ); }; export default Counter; - Counter 컴포넌트에서 동적으로 변화해야하는 유일한 값은 태그 사이에 있는 카운트 숫자 0임 - 카운트 숫자가 '상태'임 - 기본값이 0에서 출발하고 1씩 증가, 1씩 감소하는 Count 상태 import React,{useState} from 'react'; // state는 ..
[React] JSX 뜻, 문법 목차 1. JSX 란? 2. JSX의 문법 - 닫힘 규칙 - 최상위 태그 규칙 - 스타일 규칙 - 자바스크립트의 값을 사용하기 - 주석 JSX란? - 자바스크립트+HTML을 합쳐서 사용할 수 있는 문법 - 자바스크립트 표현식 (extension) - 변수나 함수 같은 값을 HTML에 쉽게 표현해서 사용할 수 있도록 고안된 문법 - 리액트에서는 JSX 문법을 사용해서 웹에 필요한 HTML요소를 만들어냄 - 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript이다. function APP() { return ( 안녕 리액트 ); } JSX의 문법 (1) 닫힘 규칙 태그는 꼭 닫혀 있어야하고, 닫지 않으면 오류가 발생한다. 예컨대, 태그를 열었으면 꼭, 이렇게 닫아주어야 한다. HTML 에서는 imag..
[React] eslint error missing in props validation 오류 해결방법 missing in props validation 오류를 해결해보자! 1. props를 사용하는데 이런식으로 에러가 떴다. 2. eslint 설정 문제로 발생하는 것이라 eslint를 수정해주어야한다. .eslintrc.cjs (혹은 .eslintrc.json)에 아래 조건 추가 "rules": { "react/prop-types": "off" } 3. 오류가 사라졌음을 확인할 수 있다.

티스토리툴바