헬리_storage

1차 프로젝트를 하면서 비슷한레이아웃을 가진 컴포넌트를 어떻게 사용해야하는지 궁금했는데, 마침 배우게 되어서 정리를 해 보았다. 어려울 것 같았으나, 알고보니 되게 간단하게 구현 할 수 있었다. 이런것도 할 수 있다니... 아주 좋구만... 🌝 컴포넌트 분리는 대부분 관심사에 따라 분리를 하는데, 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는것 을 의미한다. 복잡한 컴포넌트 일수록 재사용이 어려워 가독성과 유지보수성이 떨어지기 때문에 컴포넌트를 따로 분리하여 관리하면 앞서말한 문제들을 야기시키지 않아 아주 유용할 것이다. 컴포넌트를 분리하는 기준 -> UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 분리 한번 이제 예를 들면서 배웠던 것을 정리해 보겠다. 1. 컴포넌트 분리..

위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝 코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ 1. useState setState 함수의 인자로는 1. 새로운 state가 될 값 2. 콜백함수 () => {} 두가지 유형의 인자를 전달할 수 있는데, 콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다. 장점 - 이전 state 값을 명시적으로 기억할 필요가 없음 - 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적 위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 ..

바로 전에 parseInt( ) 으로 string-> num 변환도 했고, isNaN ( ) 으로 값이 숫자가 아닌지 맞는지도 해봤는데, 이걸로 이어서 조건문을 이용해 본 것을 정리해 볼 예정이다. (그전) 참고참고 https://hayley-0616.tistory.com/19 [Javascript] string->num , NaN 판별 Javascript 복습중 string->num으로 바꾸는 새로운 방법을 알게되었다! 바로 parseInt를 쓰는것!!!! parseInt( )를쓰면 string->num으로 변환시켜주는데 예를 들어 설명해 보겠다. 이렇게 prompt로 나이를 묻는 창 hayley-0616.tistory.com 조건문은 이런 구조로 구성되고 있다. if(condition){ // con..

Javascript 복습중 string->num으로 바꾸는 새로운 방법을 알게되었다! 바로 parseInt를 쓰는것!!!! parseInt( )를쓰면 string->num으로 변환시켜주는데 예를 들어 설명해 보겠다. 이렇게 prompt로 나이를 묻는 창을 생성했다고 해보자 여기에 숫자값을 넣는다면 숫자로 나올 줄 알았으나.. 29를 입력했으나, string으로 나온 것을 볼 수 있었다. 이제 이 string 으로 나오는 것을 num으로 변환을 해 줄것인데, 이때 사용하는게 위에서 언급한 parseInt( ) 이다. 이렇게 사용해보자! 29라는 숫자를 아래처럼 둘다 ""로 감싸주었을때, pareseInt를 이용한 데이터의 타입은?! console.log(typeof "29" , typeof parseInt..

앞에 Side Effect글과 이어서 useEffect에 대해정리해보겠다. https://hayley-0616.tistory.com/17 이제 useEffect 차례다.. 학습목표는 이것이었다.. - React 에서 Side Effect의 올바른 발생 시점 알기 - useEffect의 사용법 알기 - 조건부로 Side Effect 발생시키기 - Rendering & Effect Cycle 알기 - Clean Up Effect 알기 과연 나는 다 알았을 것인가.. 🙈😑🙈 React 에서 Side Effect의 올바른 발생 시점은 - 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다. - 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수..

React의 꼬-ㅊ 이라는 useEffect를 배웠다.. 일단...이론은 알겠다.. 알겠는데... 흠.. 일단 내가 배운대로 정리를 해보겠다. 먼저 side Effect다. 일단 학습목표는.. React에서 UI Rendering과 Side Effect의 차이를 구분하여 설명할 수 있다. useEffect hook을 활용해 다양한 Side Effect를 일으킬 수 있다. useEffect hook을 활용해 원하는 타이밍에 Side Effect를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다. Side Effect 란? : 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과를 말한다. : 함수의 주된 목적은 Input을 받아서 output을 산출하는 것 이므로 (inp..

점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라.. React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다.. Props란 -컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다. -Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다. 예시를 들어보겠다 //Parent.js import React from "react"; import Child from "./Child"; const Parent = () => { const animal = "호랑이"; //호랑이라는 문자열을 변수에 담아서 관리하고있으며, //해당 변수를 이용해..

데이터에 대해서 배우고있다... 다음주가 지나면 프로젝트가 들어갈텐데... 이정도 실력으로 프로젝트를 할 수 있을까.. 😂 넘나 걱정이고!?? 그치만..그전에 모르는것을 그냥 넘어갈 순 없으니.. 오늘은 데이터 (상수 데이터 와 mock 데이터)중에서도 Mock data에 대해 공부해보았고, 강의를 들으며 정리를 해 보았다. Mock Data란? : 백엔드 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 백엔드 API처럼 만든 데이터 이다. 이때, 백엔드와 프론트엔드 각각 사용하는 컴퓨터 언어가 다를텐데 그래서 약속을 한 것이 통신할때는 json 형태로 주고받기로 하여, 코드를 보낼때 json 형태로 변환하는 코드도 같이 심어서 보내야한다. 왜 사용하는걸까? - 백엔드 API가 미완성인 ..

과제를 하기전에.. 아직 배우지 않은 상수데이터에 대해 나오길래 한번 정리를 해보았다. 전에 댓글 구현할때 애먹었던..Javascript의 map을 여기서도 또 쓰게되었는데.. 제발 이쯤되면 익숙해지자..나자신.. 😂 상수데이터란? UI 구성에는 필요하지만 동적으로 변하지 않아서 백엔드로부터 API 등을 통해서 데이터를 가져올 필요가 없는 변하지 않는 정적 데이터를 말한다. 그래서 상수데이터로 UI를 만들때는 백엔드에 요청하지 않고 컴포넌트에서 만들 수 있다. 왜 어떻게 상수데이터를 쓸까? : UI를 보다 효율적으로 확장성 있게 구성할 수 있으며, 특히 반복되는 UI구조는 상수데이터와 map 메서드를 이용하여 간결하게 표현이 가능하고, 그래서 유지보수가 용이하기 때문에 이용한다고 한다. 이러한 상수데이터..

인스타 그램 클론코딩 중 내가 아주 애먹었던 😂 댓글구현 과정.. 드디어.. 이해가좀 되어 이렇게 정리하면서 업로드 해본다 👀👊 내가 한 방법은 1. 댓글을에 입력하면 comment 라는 state(초기값=[])에 받아와서 commentList라는 state에 추가하고, 2. 그 배열 형태롤 추가한 commentList에 map함수를 돌려서 배열안에 있는 데이터를 하나씩 가져온 후 3. 배열에서 가지고온 데이터를 라는 컴포넌트에 props로 넘겨주었고, 4. 댓글이 꾸려지도록 가져온 {props.data.commentItem} 로 구현해 보았다. 말로 풀어봤지만.. 뭐라는거지..? 라도 할 수 있으니 코드도 한번 넣어보았다...ㅠ //Main.js function MainFeed() { const [co..