빵 입니다.

리액트 모든 이벤트 on으로 시작한다. onClick={clickHandler} 📌 이벤트 리스너 속성에 함수 전달하는 방법 onClick 같은 이벤트 리스너 프로퍼티는 이벤트가 발생했을 때 실행해야 하는 함수의 ‘포인터’를 값으로 전달해야 한다. 그래야 이벤트가 발생했을 때 사용자를 대신하여 리액트가 함수를 실행한다. 📌 부모 컴포넌트로 이벤트 전달하는 방법 프로퍼티를 통해 함수를 받아들이고, 이를 자식 컴포넌트 내부로부터 호출하고, 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거 할 수 있다. 자바스크립트에서 함수는 단순한 객에(일반 값)이므로 프로퍼티를 통해 값을 자식 컴포넌트에 전달할 수 있다. 그리고 (전달받은) 자식 컴포넌트가 해당 함수를 호출하면 함수가 실행된다. 이런 식으..

React 학습하면서 Hook과 여러 팁(?)들을 아이폰 메모에 정리해 놓았는데 Next 강의를 들으면서 React 내용들도 복습하는 게 좋을 것 같습니다~~~ 그런데 메모를 읽어보니 너무 나만의 언어로 정리를 해놓았네~~~~~~~ 블로그용으로 다시 정리해서 업뎃해야징 천천히 해보자

import Expenses from "./components/Expenses"; const expenses = [ {}, {} ]; const Expense = (props) => { return ( 안녕하세요. ); } 위 코드를 순수 자바스크립트로 작성한다면 import React from 'react'; const Expense = (props) => { return React.createElement( ‘div’, {}, React.createElement(‘h2’, {}, ‘안녕하세요.’), React.createElement(Expenses, { items: expenses }) ); 옛날엔 .createElement 메서드를 사용하려면 모든 페이지에서 react를 임포트 해줘야 했지만 지금..

함수형 컴포넌트 방식 함수형 컴포넌트를 많이 쓴다. 기존의 자바스크립트 문법에 익숙한 개발자들이 쉽게 적응할 수 있는 방식이다. function Expenses(props) { return ( {props.items.map(item => ( ))} ); } 화살표 함수 표현식 화살표 함수는 간결하고 직관적인 문법을 가지고 있어 가독성이 좋고, this 바인딩에 대한 동작이 다르기 때문에 몇 가지 상황에서 유용할 수 있다. 개인의 취향과 프로젝트의 코드 스타일에 따라 선택하면 된다. const Expenses = (props) => { return ( {props.items.map(item => ( ))} ); }

내가 생각했던 라이브러리 ➡️ 메서드 모음집. 메서드를 가져다 조립해서 사용한다. 정적인 구조. 내가 생각했던 프레임워크 ➡️ 자동화된 시스템. 동적인 구조. ⭐️ 라이브러리와 프레임워크 차이 라이브러리와 프레임워크 사이의 주요 차이는 제어의 흐름(구조와 동작 방식)이다. 라이브러리는 개발자가 호출하여 사용하는 도구 모음이며, 애플리케이션의 제어 흐름은 개발자에게 있다. 프레임워크는 애플리케이션의 흐름을 제어하며, 개발자는 프레임워크가 정의한 규칙에 따라 코드를 작성한다. React는 라우팅을 제공하지 않기 때문에 react-router-dom를 설치해서 사용해야 한다. Next는 내부적으로 React를 가지고 있기 때문에 react-router-dom을 따로 설치하지 않고, 규칙에 따라 파일을 만들면 ..

Next.js 강의 중 라우팅 챕터를 보는데... Next.js에서 태그를 이용해서 을 만들었더니 태그를 이용해서 페이지를 이동하지 말라고 ESLint가 떴다. React에서 태그를 이용해 페이지 이동하지 않는 이유와 같다고 했다. 생각해 보니 정확한 이유를 모르고 있었다. 막연하게 react-router-dom을 이용해서 컴포넌트를 이용해 페이지 이동을 구현했었다. 창피했다. 제대로 쓰기 위해 열심히 찾아보았다. ⭐️ 페이지 전환 시 태그를 사용하지 않는 이유는? 페이지 전환의 SPA 장점 상실 React로 만들어진 앱은 주로 SPA 방식으로 개발되었다. 브라우저의 페이지 전환없이 동적으로 콘텐츠를 보여준다. 태그를 사용하면 전체 페이지가 새로고침되므로 SPA 장점 사라진다. React Router 기..

Hello World!

UI 컴포넌트 개발을 위해 스토리북이 많이 사용되는 것 같다. 채용 공고에서도 유경험자를 자격요건으로 걸기에 나도 학습해 보았다. (아래의 내용은 여러 경로를 통해 학습하고, 이해하게 된 내용) 스토리북이란? 스토리북은 UI 컴포넌트 가이드북이다. UI 컴포넌트의 디자인을 한눈에 볼 수 있다. ex) Primary 버튼, Secondary 버튼 등 버튼의 스타일 확인 가능 UI 컴포넌트의 상태를 한눈에 볼 수 있다. ex) 버튼 컴포넌트의 다양한 상태(활성, 비활성, 클릭 상태 등) 확인 가능 UI 컴포넌트가 가지고 있는 액션을 실행해 볼 수 있다. === 컴포넌트의 상태나 프로퍼티 변경에 따른 시각적 변화를 쉽게 관찰 가능 UI 컴포넌트를 테스트하고, 디버깅할 수 있다. === 컴포넌트의 동작 확인, ..

어쩌다 보니 프리를 두 달 뛰게 되었고 이제야 끝이 나서 돌아왔다. 퍼블 프리를 했는데 접근성에 대해 더 깊이 알게 되었고 바닐라 스크립트를 더 본격적으로(?) 사용해 보는 계기가 되었다. 프레임워크를 사용하지 않고, 접근성을 준수한 컴포넌트 제작을 해보았는데 넘나 재밌는 것. 작은 규모의 플젝이었지만, 전반적인 일정과 프로세스를 총괄하고, 디자인 인력까지 관리해 보는(!) 재밌는 경험이었다. 같이 일한 초급 퍼블리셔를 리딩했는데 누군가를 가르치는 일은 나한테 너무 잘 맞는다. 업무 외적인 일부터 업무의 사소한 스킬까지, 가르치는 데에 모든 것을 쏟아부었다.🔥 남을 가르치려면 우선 내가 잘 이해하고 있어야 하기에 가르쳐 주면서 나도 많은 공부를 했다. 다시 일상으로 돌아와서 프론트엔드를 향해 매진~!

문제 설명 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 순서대로 적혀져 있다. 바구니는 일렬로 놓여져 있고, 가장 왼쪽 바구니를 1번째 바구니, 그 다음 바구니를 2번째 바구니, ..., 가장 오른쪽 바구니를 N번째 바구니라고 부른다. 도현이는 앞으로 M번 바구니의 순서를 역순으로 만들려고 한다. 도현이는 한 번 순서를 역순으로 바꿀 때, 순서를 역순으로 만들 범위를 정하고, 그 범위에 들어있는 바구니의 순서를 역순으로 만든다. 바구니의 순서를 어떻게 바꿀지 주어졌을 때, M번 바구니의 순서를 역순으로 만든 다음, 바구니에 적혀있는 번호를 가장 왼쪽 바구니부터 출력하는 프로그램을 작성하시오. 입출력 예 [입력] 첫째 줄에 N (1 ≤ N ≤ 100)과 M (1 ≤ ..