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

Libraries

 (48)
[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:..
[React] 프로필 사진 업로더 만들기, 프로필 변경/삭제/추가, 프로필 페이지 만들기 리액트로 프로필 업로더를 만들어볼 것이다! 구현과정에 대한 설명을 세세하게 적어둔 블로그가 없었기에 많이 헤맸었다. 그래서 나는 최대한 친절하게, 자세히, 하나하나 다 정리해보고자 한다. 1. 프로필 영역을 마크업 한다. ProfileChange.jsx import styles from "./ProfileChange.module.css"; import DeleteImg from "../../../assets/my-page/setting/profile-delete.png"; import DefaultImg from "../../../assets/my-page/setting/default-background.png"; const ProfileChange = () => { return ( 프로필 변경 블로그 ..
[React] useReducer를 코드에 적용하기 (emotion diary 프로젝트 2탄) useReducer 개념을 알아야 이해가 가기 때문에 아래 게시글을 보고 오시길 바랍니다! https://dev-ini.tistory.com/89 [React] useReducer로 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReduer를 사용해서 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReducer 위 사진에서 보다시피, App.js 컴포넌트 안에 굉장히 많은 상태변화함수 (onCreate, onEdit, onRemove)가 존재하는 상태이다 dev-ini.tistory.com 1. reducer 함수를 전달하고, 기본 state 빈배열로 설정한다. App.js import React, { useReducer } from "react"; import "./App.css"; impo..
[React] useReducer로 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReduer를 사용해서 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReducer 위 사진에서 보다시피, App.js 컴포넌트 안에 굉장히 많은 상태변화함수 (onCreate, onEdit, onRemove)가 존재하는 상태이다. 그리고 이 상태변화함수들은 컴포넌트 내에만 존재해야만한다. 상태를 업데이트 하기 위해서는 기존의 상태를 참고해야하기 때문이다. 그런데 컴포넌트의 코드가 길어지고 무거워지는건 결코 좋지 않다. 그래서 복잡하고 긴 상태변화 로직을 컴포넌트 바깥으로 분리해야한다. 그때 사용하는 것이 useReducer이다. 위 사진에는 useState만 사용해서 1부터 10000까지 각각 더할 수 있는 Counter가 있다. 그리고 10, 10, 100, 1000, 10000을 더할 수..
[React] Warning: you provided a `value` prop to a form field without an `onchange` handler. this will render a read-only field. if the field should be mutable use `defaultvalue`. otherwise, set either `onchange` or `readonly` Warning: you provided a `value` prop to a form field without an `onchange` handler. this will render a read-only field. if the field should be mutable use `defaultvalue`. otherwise, set either `onchange` or `readonly` 오류를 해결해보자! 1. 아래와 같은 오류가 떴는데, 이는 태그 사용 시 value 속성을 고정값으로 설정하지 않아서 생기는 오류이다. 오류가 생긴 부분의 코드 const MyCourseCalendar = () => ( ); export default MyCourseCalendar; 2. 해결방법: value 속성을 de..
[React] Warning: Each child in a list should have a unique "key" prop 오류 해결방법 Warning: Each child in a list should have a unique "key" prop 오류를 해결해보자! 1. 아래와 같이 오류가 떴는데, 이는 props를 map할때 생기는 오류이다. 2. 해결방법: 최상위 태그에 key={el.id} 를 추가한다. (el은 요소를 뜻함) 아래 예시에서는 최상위 태그에 key={it.id}를 추가하였다. *참고) 만약 map((item)=> 이런식이라면 key={item.id}가 되는 것임 const DiaryList = ({ diaryList }) => { console.log(diaryList) // return ( 일기 리스트 {diaryList.length}개의 일기가 있습니다. {diaryList.map((it) => ( // uniq..
[React] 공통 컴포넌트 세팅, 버튼 만들기 (onClick, props), 컴포넌트 사용 (emotion diary 프로젝트 1탄) 아래와 같은 공통 컴포넌트 버튼을 만들 것이다. 1. src/components 폴더 안에 MyButton.js 라는 파일(컴포넌트)을 생성한다. 2. MyButton.js의 기본 구조를 작성한다. MyButton.js const MyButton = () => { return( ) }; export default MyButton; 3. props로 text, type, onCilck을 받는다. MyButton.js const MyButton = ({ text, type, onClick }) => { return( ) }; export default MyButton; 4. button에 props를 연결한다. MyButton.js const MyButton = ({ text, type, onClick })..

티스토리툴바