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

Libraries

 (52)
[Redux] Store 목차 1. Redux Store란?2. Store와 데이터3. Store의 역할4. Store의 특징5. Store의 구성 요소6. Store의 생성 방법7. Store의 사용법 (핵심 메서드)8. Store의 중요성  Redux의 Store에 대해서 알아보자!    1 . Redux Store란?  store: 저장하다, 보관하다.store은 Redux의 데이터들을 저장하기 위한 저장소이다.Store를 통해 애플리케이션에서 사용되는 모든 상태를 하나의 객체로 관리하며,  상태를 효율적이고 예측 가능하게 다룰 수 있다.그러나 여기서 오해하면 안되는 것이, Redux Store의 데이터들은 실제로 저장장치에 저장되는 것이 아니다.아래에서 자세히 살펴보자.     2. Store와 데이터  • State m..
[Redux] Redux의 개념, 탄생 배경, 3가지 원칙, Context Api와의 비교 Redux에 대해서 알아보자!     1. Redux란?  Redux는 2015년, JavaScript 개발자인 Dan Abramov와 Andrew Clark에 의해 탄생한 상태 관리 라이브러리이다. 이 도구는 애플리케이션의 상태를 예측 가능하고 일관성 있게 관리하기 위해 만들어졌다.     2. Redux의 탄생 배경   1) 복잡한 상태 관리하기 위해  단일 페이지 애플리케이션(SPA)의 인기가 높아지면서, 컴포넌트 간 상태를 효율적으로 공유하고 관리하는 것이 점점 더 어려워졌다. 특히 React를 사용하는 프로젝트에서 상태를 props를 통해 자식 컴포넌트로 전달하거나, 서로 다른 컴포넌트 간 상태를 동기화하는 과정이 번거롭고 비효율적이라는 문제가 있었다.   2) Flux 아키텍처의 한계를 극복하..
[React] children 정말 쉽게 이해하기 왠지 모르게 이해가 잘 안되고 어려운 children에 대해서 이해 하기 쉽게 알아보자!      1. "children" 이란?  children은 리액트 컴포넌트의 특수한 props로, React element 객체들로 구성된 배열이다.부모 컴포넌트의 태그 안에 작성된 모든 내용을 자식 컴포넌트가 props로써 받을 수 있게 해준다.children을 통해 부모 컴포넌트가 자식 컴포넌트에 HTML이나 다른 컴포넌트를 중첩해 넣는 것이 가능해진다. 만약, props에 대해서 잘 모른다면 아래의 게시글을 봐주세요!https://dev-ini.tistory.com/63     2. children가 유용한 상황  1) 공통 레이아웃 구성: 반복적으로 사용되는 레이아웃을 정의하면서, 그 안에 들어갈 내용을 동..
[React] KAKAO(카카오) 지도 API 사용법, 웹에 카카오맵 불러오는 법 KAKAO 지도 API를 사용해서 카카오맵을 불러오는 법을 알아보자!     만들 예제의 완성본  - 마커(파란색 핀)로 해당 장소의 위치를 표시 - 마커 위에 인포윈도우를 표시 (상호명, 큰지도보기, 길찾기)- 지도 확대/축소를 설정할 수 있는 줌 컨트롤을 생성- 지도를 마우스 드래그로 이동 가능- 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도 타입 컨트롤을 생성 - 마우스 휠 확대/축소는 비활성화   구현된 카카오맵 사용 영상       1. 카카오 개발자(developers) 사이트에 방문한다.  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공..
[React] 리액트로 라디오 버튼(Radio button) 만들기 (신고 모달창 만들기) 리액트로 라디오 버튼을 만들어보자!       만들 예제의 완성본  - 버튼이나 텍스트를 클릭하면 버튼이 파란색으로 바뀐다.- 버튼을 hover 하면 버튼 테두리가 회색으로 바뀐다.      Radio 컴포넌트 만들기  Radio 컴포넌트는 개별 라디오 버튼을 나타낸다. 라디오 버튼은 HTML에서  요소의 type 속성을 radio로 설정해주면 얻을 수 있다.라디오 버튼은 여러 개의 선택 사항 중에 사용자로 부터 하나를 선택받기 위해서 사용된다. 텍스트를 클릭햇을 때도 라디오 버튼이 선택될 수 있도록 하려면,  요소로  요소와 children prop 모두 감싸주면 된다.  Radio.jsx import "./Radio.css";export const Radio = ({ children, value, n..
[React] 리액트로 서버에 데이터 요청하는 방법 (fetch, axios.then, async/await 사용하기) 목차 1. 서버 만들기 2. React 설치하기 3. 서버에 대이터 요청하는 방법 2가지4. fetch로 통신하기 5. 라이브러리(axios)를 사용해서 통신하기 6. async/await 이용하기7.  async/await과 axios.then() 차이점     리액트로 서버에 데이터를 요청하는 방법을 알아보자!       1. 서버 만들기  서버에 데이트를 요청하려면 서버가 있어야한다. 이해를 위해 직접 서버를 만들어보자! (express를 이용할 것이다)  1. 폴더 기본 구성하기  폴더 기본 구성은 아래와 같다.    2 . 터미널에서 server 폴더로 이동한다.      3. node.js 프로젝트를 하니까 npm init을 해서 package.json을 만들어준다.      4. npm i ..
[React] 스크롤 top 버튼 기능 구현하기 스크롤을 맨 위로 올리는 top 버튼을 만들어보자! 생각보다 코드가 매우 간단하다. 만들 예제의 완성본 1. 리스트 페이지를 만든다. List.jsx import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "1번", }, { id: 2, title: "2번", }, { id: 3, title: "3번", }, { id: 4, title: "4번", }, { id: 5, title: "5번", }, { id: 6, title: "6번", }, { id: 7, title: "7번", }, { id: 8, title: "8번", }, { id: 9, title: "9번", }, { id: 10, title: "10번", }, ..
[React] 작성 날짜 기준으로 지난 시간을 변환하기 (리뷰시간, 게시글 시간, 댓글시간, 방금전, 몇분전, 몇시간전, 며칠전) 작성날짜 기준으로 지난 시간을 계산해주는 코드를 구현해보자!     아래의 게시글을 참고한 다음 이 게시글을 보면 이해가 훨씬 더 빠릅니다! https://dev-ini.tistory.com/110 [Javascript] 시간 변환 함수 (newDate, getTime, toLocaleString, , toLocaleDateString, toLocaleTimeString)시간 변환 함수에 대해서 알아보자! new Date() - Date 생성자는 특정 지점을 나타내는 Date 객체를 생성한다. - Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는dev-ini.tistory.com     활용 예시  이 게시글을 활용하면 아래와 같이 구현이 가능하다.리뷰를..

티스토리툴바