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

Libraries/React

 (42)
[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 })..
[React] Routing (3) Path Variable(useParams), Query String(useSearchParams), Page Moving(useNavigate) 목차 1. Path Variable - useParams 2. Query String - useSearchParams 3. Page Moving - useNavigate 이 게시글을 보기 전에 봐야하는 게시글들 1. Router의 개념 (Router의 개념과 SPA와 CSR에 대한 설명이 있습니다.) https://dev-ini.tistory.com/81 [React] Routing (1) 개념, SPA & CSR Routing에 대해서 알아보자! Routing Router [위키백과] 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Routing 경 dev-ini.tistory.com 2. Router 설치 및 사용방법 (이..
[React] Routing (2) Router 설치 및 사용방법 완벽 정리 Router를 설치하는 방법과 사용 방법을 알아보자! 이 게시글을 보기 전에 봐야하는 게시글들 1. 개발환경: CRA (개발 환경 설정은 아래의 게시글을 참고해주세요!) https://dev-ini.tistory.com/83 [CRA] CRA(Create React App)로 리액트 프로젝트 만들기 CRA(Create React App)로 리액트 프로젝트를 만들어보자! 1. 프로젝트를 진행 할 파일을 만들고 VSCode에서 연다. 필자는 emotion-diary 라는 폴더를 바탕화면에 만들었다. 2. CRA 실행 명령어를 입력한다. npx c dev-ini.tistory.com 2. Router의 개념 (SPA와 CSR에 대한 설명이 있으니 원활한 이해를 위해서 꼭 보고 오시길 바랍니다!) https:/..
[React] Routing (1) 개념, SPA & CSR Routing에 대해서 알아보자! Routing Router [위키백과] 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Routing 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 Page Routing 어떤 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 과정을 일컫는 말 즉, 요청에 명시돼있는 경로에 따라서 알맞은 페이지를 선택하게 하는 과정 자체 MPA (Multi Page Application) 와 SPA (Single Page Application) home이라는 경로를 가지고 도착한 요청에는 해당 경로에 알맞는 html 파일을 보내주는 식으로 웹서버가 동작하게 되는데, 이렇게 여러개의 페이지를 준..
[React] useEffect 목차 1. React 컴포넌트의 생애주기 2. React Hooks 3. useEffect 4. useEffect 사용법 예시 React의 Hook 중의 하나인 useEffect에 대해서 알아보자! React 컴포넌트의 생애주기 React 컴포넌트의 생애주기는 3가지로 나뉜다. 처음 화면에 나타날 때를 Mount, 화면이 바뀌면서 리렌더링 되는 것을 Update, 화면에서 사라지는 것을 UnMount 이 3가지 단계로 진행된다. React Hooks 리액트는 생애주기마다 실행할 수 있는 메서드를 가지고 있고, 이 메서드는 클래스형 컴포넌트에서밖에 사용하지 못한다. 그런데, 클래스형 컴포넌트는 사용할 때 코드의 길이가 길어지는 등 다양한 문제점이 있어서, 요즘에는 함수형 컴포넌트를 사용하는 추세이다. 그렇..
[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..

티스토리툴바