// 구조분해할당 function solution(dot) { const [num,num2] = dot; const check = num * num2 > 0; return num > 0 ? (check ? 1 : 4) : (check ? 3 : 2); } function solution(num_list) { const [a, b] = [...num_list].reverse(); return [...num_list, a > b ? (a-b):a*2]; } //const [a, b]는 [...num_list] 의 원소 중 순서대로 a와 b에 할당하는구나 // 콜백함수를 작성할때 {()=>{return A}} or (() => a) // {}를 쓰면 반드시 return 을 써줘야 하고, 만약 {}를 쓰지않으면..
전체 글
코드스테이츠에서 솔로프로젝트로 쇼핑몰을 만들었다 8일동안 정말 고생을 많이 했다.. 처음에 react-router를 설치할때부터 오류가 났으니,,, 한마디로 첫 프로젝트는 오류 범벅이었다 개발속도도 느렸을 뿐더러, 보기좋은 코드를 작성한 것도 아니었다. 북마크 state를 정의할 최상위컴포넌트를 잘못잡아서, 중간에 아예 컴포넌트 props 연결을 갈아엎기도 했다.. (앞으로 꼭 프로젝트 구조도를 작성해야지!) 우여곡절이 많았지만 어찌저찌 그래도 프로젝트를 완성했다. 정말 치열했던, 그리고 어려웠던 8일이었지만 그만큼 배운게 참 많다. 무엇을 배우고 깨달았는지, 그리고 앞으로의 공부방향은 어떻게 잡는게 좋을지 적어보겠다 ㅎㅎ 개발 방법 1. 요구사항들을 메모장에 적은뒤, 하루동안 개발할 기능을 적는다 2...
이번과제는? 이번 과제에서는 Figma에서 디자인된 컴포넌트를 React 컴포넌트로 구현해야 합니다. 이를 위해, Figma에서 추출한 디자인 토큰과 Styled Components을 사용하여 일관된 디자인을 유지하고, Storybook을 사용하여 각각의 컴포넌트에 대한 문서화를 진행합니다. 이 과정을 통해 디자인 시스템 구축 및 코드로 디자인을 구현하는 경험을 쌓을 수 있습니다. 수업내용이 거의 문서로 진행되서 진짜 이해가 안되었다 ㅜ 페어분이 설명을 들은 뒤, 나만의 언어로 정리해보았다! 피그마에서 컴포넌트를 보고, 달라지는 요소에 대한 키와 값을 고민한다 이때 hover 기능인지, active 기능인지에 따라 외형적 기준이 달라진다 (잘 모르겠으면 input.js 와 inputsories.js 를 ..
Custom Hooks 개발자가 스스로 커스텀한 훅을 의미합니다 Custom Hooks은 코드 상에 반복되는 로직을 뽑아내어 재사용 하는 것을 말합니다 여러 url을 fetch 할때, 여러 input에 의한 상태변경 등 반복되는 로직을 동일한 함수에서 작동하고 싶을때 커스텀 훅을 사용합니다 (커스텀 훅도 일종의 함수, 다만 일반 함수와 다른 점은 커스텀 훅 내부에서 내장 hook을 불러 사용할 수 있다는 것) 아래의 두 컴포넌트는 동일한 로직을 포함하고 있습니다 //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { // 동일로직 const [isOnline, setIsOnline] = useState(nul..
React.lazy() 와 Suspense는 코드분할과 지연된 컴포넌트 로딩을 간편하게 구현할 수 있습니다. 코드분할과 지연된 컴포넌트 로딩은 초기시간이 감소, 성능향상 등의 장점이 있습니다. 코드분할은 무엇일까? React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것입니다. React 에서의 코드분할 form.addEventListener("submit", e => { e.preventDefault(); /* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */ import('library.moduleA') .then(module => module.default) .then(someFunction()) .catch(handleError()); }..
Component & Hook Function Component와 Class Component Hook은 class가 아닌 function형 컴포넌트에서만 동작한다. Hook 사용규칙 1. 리액트 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상대로 동작하지 않을 우려가 있다. 컴포넌트 안에는 useState나 useEffect와 같은 hook이 여러번 사용될 수 있는데. react는 이 hook을 호출되는 순서대로 저장을 해놓는다. 그런데 조건문, 반복문 내에서 hook을 호출하게 되면, 호출되는 순서대로 저장을 하기 어려워지고 결국 예기치 못한 버그를 초래할 수 있다. 2. 오직 리액트 함수 내에서 사용되어야 합니다. 이는 리액트 함수형 컴포넌트나 커스..
Virtual DOM React 는 UI 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트 할 수 있도록 Virtual DOM 이라는 가상의 DOM 객체를 활용합니다. 이는 실제 DOM 사본 같은 개념으로, React 는 실제 DOM객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다 DOM은 계층적 형태의 트리 구조로 구성되어 있습니다. 자료구조 중에서도 특히 트리는 “데이터 저장”의 의미보다는 “저장된 데이터를 더 효과적으로 탐색” 하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있습니다. 그러나 DOM 이 변경되고 업데이트 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우(reflow) 한다는 것을 ..
이번주 월요일부터 목요일까지 4일동안 '0' 에서 혼자서 쇼핑몰페이지를 만들어보았다. 실제로 해보니 왜 프로젝트 해봐야 하는지 뼈저리게 느꼈다. 알고있던 개념이라고 생각했지만 실제로 바로 코드가 안쳐져서 애먹는 경우도 많았고, 여러번 삽질을 해봐야지 그제서야 이해가 되는 경우가 많았다... 4일동안 순차적으로 어떻게 진행했는지는 다음 포스팅에서 올릴거고 (싸피 에세이 써야하니깐...ㅎ) 일단 오늘 4일차에 뭘했는지 적어보려고 한다. 일단 내가 구현한 쇼핑몰!! 5.18 (목) 1.top buttons는 재사용할 가능성이 있으니 컴포넌트로 만든다 2.상품리스트 페이지에 state를 어떻게 달지? Top buttons를 클릭할때마다 원래 state가 ‘전체’ 이던 것이, 버튼을 누를때마다 그 Top butt..