전체 글

어제 custom component를 다루면서 props와 state 부분을 짚고 넘어가야겠더라고요! 그래서 chat gpt와 공식문서를 참조하면서 리액트 props와 state의 차이점 정리해보았습니다 Q. 리액트에서 props와 state의 차이점React에서 props와 state는 모두 컴포넌트의 데이터를 다루는 데 사용됩니다. 그러나 두 가지 개념은 목적과 사용 방법에서 차이가 있습니다. props는 "properties"의 줄임말로, 컴포넌트가 외부에서 받는 데이터를 의미합니다. 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다. props는 읽기 전용이므로 컴포넌트 내부에서 직접 수정할 수 없습니다. 대신, 부모 컴포넌트에서 값을 변경하여 자식 컴포넌트가 새로운 값을 받게 됩니다..

화면이 아무리 복잡하고 다양하더라도 기본 구성에서 사용되는 UI들은 반복적으로 재사용되는 경우가 많습니다 오늘은 프로젝트 개발의 효율성을 높여주는 UI 컴포넌트들을 만들어보겠습니다 컴포넌트 ui - 모달 콘솔창을 띄워 element들을 눌러보면서 어떤 컴포넌트 위에 스타일이 들어가는 지를 잘 확인해야 합니다 일반 CSS와 달리 styled component는 class의 이름을 임의로 지정하여 (위에 "sc-dkPtyc ioRIXP" 라고 이상한 클래스 보이시져...) 스타일을 주기 때문에, 클래스의 이름이 확! 눈에 띄지 않을 수 있습니다. 하지만, 각 컴포넌트에 어떤 css 효과를 주었는지 촤르륵~ 볼 수 있어요! ( css 파일 열어서 html나 js 파일 왔다갔다, class 찾아 요리조리 하는것..

CCD (Componet Driven Development) 만약 기획자가 이전에 사용했던 버튼을 이번에도 사용하자고 합니다 그렇다면 디자이너와 개발자는 새롭게 버튼을 만들어야 할까요? 재사용 할 수 있는 UI 컴포넌트가 필요하겠죠! 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Componet Driven Development(CCD) 입니다 레고처럼 부품 단위로 UI 컴포넌트를 만들고 조립해나가는 개발입니다 CSS in JS CSS가 복잡해짐에 따라, CSS도 컴포넌트 영역으로 불러들이게 됨! CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됩니다. 이..

https://www.figma.com/file/NKrCMEUAzrqDARr1rHh08R/Untitled?node-id=1%3A47&t=jHgq8cLluYHrY2he-1 링크에 들어가면 내가 만든 피그마 ui 를 볼 수 있다 피그마를 3일정도 다뤄보았는데 정말 노동이지만 나름 재밌는것 같다 나중에 기획/디자인부터 개발까지 할 수 있는 제너럴리스트가 되길 꿈꿔본다 >

오늘은 뭘 해볼거냐면 JSON.stringify와 JSON.parse에 대해서 간단히 알아보고, localStorage 에 최근 본 상품의 id를 배열로 담아보는 기능을 만들어보겠슴다 JSON.stringify 와 JSON.parse 여기 한 객체가 있습니다 let obj = {name: 'kim'} 만약 이 상태로 localStorage.setItem('data', obj) 해버린다면 예쁜 {name: 'kim'} 요 상태로 저장이 되지 않고, localStorage의 value에 [object Object] 라며 객체가 깨져서 나올겁니다 깨져서 안나오고 이쁜 상태로 obj를 보존하려면 어떻게 해야할까? JSON.stringify로 obj를 감싸면 됩니다! 그렇다면 반대로 JSON 형식을 기존 객체 형..

처음으로 피그마를 다뤄보았다. 기획할때 피그마를 쓴다는 것은 알았지만 방법을 모를땐 어려워 보여서 시도를 못하고 있었는데.. 코드스테이츠 수업시간에 피그마를 다뤄볼 수 있게 되었다 나중에 기획을 할 일도 생길 수 있으니 간단하게 피그마를 다뤄보는 것도 좋을 듯 하다. 나중에 봤을때 잊어버리지 않도록 단축키와 간단하게 ui 만드는 법을 정리해보겠다 ☝🏻기본 단축키 복사하기 : Command + C 붙여넣기 : Command + V 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭 그룹으로 묶기 : Command + G 프레임으로 묶기 : Command + Option + G 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기 ☝🏻컴포넌트 단일 컴포넌트 생성 :..

실력향상 응용문제들 : 응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면? 응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만? 응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면? (Cart.js) # 상품명 수량 변경하기 삭제하기 {/*데이터 갯수에 맞게 표 생성해달라고 반복문쓰는 것도 좋을듯요*/} {/*map으로 html 생성할때 일단 {}부터 쓴다 */} { carts.map((item,i)=>{ return ( {carts[i].id} {carts[i].name} {carts[i].count} { dispatch((changeCount(carts[i].id))) }}>➕ {/*버튼을 누르면 상품이..

처음에 (my agora states) 파일을 봤을때 생소한 코드가 너무 많아서 어떻게 코드를 시작해야 할지 감도 잡기 힘들었다 그래서 챗 지피티에게 코드 한줄 한줄씩 물어보며 주석을 달기 시작했다 특히 어떤 개념을 이해하기 어려우면 예시도 추가적으로 물어보면서 접근했다 A와 B의 차이점을 묻는 질문도 큰 도움이 된다 내 친구 챗 gpt ...ㅎ 이번에 느낀점은 아무리 생소하고 어려운 코드라도 의사코드를 작성한다면 이해하지 못할게 없다는 것이다. 잘 모를 수록 멀뚱멀뚱 코드만 보지 말고 뭐라도 쳐야 한다!! (my agora states) const express = require('express');//express 라이브러리를 불러와, express 변수에 할당하고 const app = express..