일반 function 사용 문법 // 1 function 함수이름(){ // 기능 } // 2 var 함수이름 = function(){ // 기능 } Arrow Function 사용 문법 var 함수이름 = () => { // 기능 } 왜 쓰는 걸까? = 이걸 알면 언제 쓰면 좋을지가 나온다. 1. 함수 본연의 기능을 아주 잘 표현해주는 문법 우선 function은 언제 주로 사용하는가..에 대해 생각해보면 1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때. (이후 재사용도 고려..) 2) 입출력기능을 만들 때 var 두배만들기 = (x) => {return x * 2 } console.log( 두배만들기(4) ); console.log( 두배만들기(8) ); 이런 식으로 사용하면 직관적으로 보..

예를 들어.. 아래와 같은 코드를 작성했다고 해보자. module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( {todo.task} Submit ); }, this); return ( {taskNodes} ); } }); onclick event 로 map 함수에 표시된 어떤 것들을 삭제하는 기능을 하는 function 을 구현한다. 이때 delete 기능은 버튼 클릭 시에만 발생하여야 한다. 근데 해당 function 안에서 console을 찍어보면 화면이 렌더링 될 때 function 안의 console 이 찍히는 것을 볼 수 있을 것이다...

copy and paste excel ... 임시 데이터를 넣어주는 data.js 아래와 같이 구성 // data.js export const employees = [{ 'ID': 1, 'FirstName': 'John', 'LastName': 'Heart', 'Prefix': 'Mr.', 'Position': 'CEO', 'BirthDate': '1964/03/16', 'HireDate': '1995/01/15', 'Notes': 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf..

React-Query 란? 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 data fetching 라이브러리. Server-side 와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해준다. React Query 내에서의 Server State 정의 Client가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨. fetching 및 updating을 위한 비동기 API를 필요로 함. 상태가 공유되며 사용자 모르게 변결될 수 있음. 주의하지 않으면 애플리케이션이 잠재적으로 "out of date" 상태가 될 수 있음. React Query의 특징 (Server State 제외) Caching..

TypeScript 쓰는 이유 1. Javascript는 Dynamic Typing 이 가능하다. : 코드를 길게 짤 때는 자유도와 유연성이 독이 된다. // Javascript 5 - '3' // 연산 가능 // 원래는 숫자-숫자만 가능하지만 JS가 알아서 '3'을 숫자로 바꿔준다. // 프로젝트 규모가 커지면 단점. 관리하기 힘듬. ts 는 type 을 엄격하게 검사해준다. // Typescript 5 - '3' // TS Error : 문자랑 숫자를 빼는게 이상하다. 수정 요망. 2. TypeScript 는 에러메세지를 자세하게 뿌려준다. TypeScript 는 Javascript 와 문법이 거의 동일하기 때문에 코드 에디터 부가 기능 역할로 봐도 충분하다. Typescript 필수 문법 1. 간단..

1. MUI 설치 MUI 설치 시 일괄 설치가 되는 것 같은데.. 안되어 있다면 @MUI/LAB 을 설치해주도록 하자. $ npm install @mui/lab 2. MUI 테스트용 treeview 생성 import React from "react"; import TreeView from "@mui/lab/TreeView"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import TreeItem from "@mui/lab/TreeItem"; const TreeViewExample = () => { return ( ); }; ..

"성공적인 웹 어플리케이션은 UX 디자인과 사용자 인터페이스 모두에 대한 강력한 기반을 갖추어야 한다." - Brad Frost BootStrap Material-UI what? 반응형 웹사이트 개발을 위한 CSS, HTML, JS 프레임워크 Material Design 원칙을 따르는 React UI 프레임워크 개발 주체 트위터 Meterial Design - 구글 MUI - unnamed team 적용 예시 에어비앤비, 드롭박스, 애플뮤직, 트위터 ... NASA, Amazon, Unity, Google 및 모든 제품... grid sys 완벽 반응형 디자인 제공. 12열 그리드 시스템. infomation layout 모바일 및 데스크톱(모바일 우선) 용 모바일 및 데스크톱(데스크톱 우선) 용 dep..

1. MVC Architecture Model(데이터) - View(화면) - Controller (컨트롤러) * Ajax 로 부터 받는 데이터 - Model * HTML 과 CSS 로 만들어지는 화면 - View * javascript가 데이터를 받아 조작하여 서버에 전달 - Conroller Ajax를 통해 서버에서 HTML을 만들지 않고 데이터만 교환이 가능하게 되었고, JS로 DOM을 조작하는 작업이 중요함에 따라 jQuery를 통해 Ajax와 DOM을 다루게 되었는데... 2. MVVM 아키텍처 Model(데이터) - View(화면) - ViewModel(데이터를 화면에 보여지는 값으로 변경) 리액트의 특징 중 하나였던 선언형 프로그래밍과 연관됨. * . 프론트엔드 아키텍처 변화 정리 프론트엔드..

React 란? Facebook 에서 주도하여 개발하여 UI를 효과적으로 구축하기 위해 사용하는 JS 기반 라이브러리. React 자체로는 Framework 라고 부를 수 있는 기준인 Routing, 상태관리 기본 제공을 충족하지 못해서 '라이브러리'이지만, React 생태계로서는 Framework. React 등장 배경 기존: 특정 DOM 을 선택한 뒤, 해당 DOM에 어떤 이벤트가 발생하면 이에 대한 change 가 일어나도록 설정하는 방식. - 유저와의 상호작용이 자주 일어나는 경우 이에 따른 변화를 동적으로 UI에 표현해야 한다면 그만큼 애플리케이션이 복잡해지고 관리가 힘들어짐. React 특징 1. 가상 DOM 기존의 경우 하나의 데이터가 바뀌어도 화면 전체가 리렌더링 되어서 전체 화면이 다시 ..

전제 조건 react 가 잘 설치되었으며 chocolatey 같은 부가 프로그램들을 모두 다 설치해두었다는 전제 하에 시작. React 개발환경 구축 대충 얼레벌레 깔아서 리액트 구축해오던 나.. 리액트 환경을 처음부터 구축할 기회가 생겼다. 이거 포스팅에 놓칠 수 없다는 생각이 들어 오늘의 글 건덕지를 하나 잡게 되었다. 1. node.js 설치 no bornatnoon.tistory.com 기본 셋팅에 대해 궁금하다면, 첨부 글을 확인해보도록 하자. 0. 시작 내가 react 프로젝트를 구현할 폴더를 하나 구현해주고, 나는 대상 폴더를 D:\Code 로 선정할 것이다. Code 폴더 우클릭 > 터미널에서 열기(T) 선택 여기서부터 시작. 1. create-react-app 설치 리액트 기본틀 만들기에..

이게 REACT 게시판으로 가야하는지 일반 게시글로 쓰는게 맞을지는 모르지만 일단 TIL 내용이라 어디던 작성해본다. 이 또한 개발 공부니까 ... 어느 날 출근하여 네이버 로그인을 해보니 네이버 메인 UI 디자인이 바뀐 느낌이 확 들었다. 기존의 디자인보다 조금 더 동글동글해지고.. 웹앱스러워진 느낌이 들더라 그리고 chrome extension 에 못보던 불이 켜졌다. this page is using the production build of React! 개발자도구로 살짝만 구경해봤다. 리액트 17버전 쓰고 있고.. 역시 대기업인지 오픈 소스 들은 많이 안 쓴 것 같다. 뭔가 어제 배포 되자마자 구경했으면 더 재미를 봣을 수도 있을 것 같은데 내가 본 게시글들에 비하여 내가 뜯어 볼 수 있는 소스코..

파이썬에서 list 와 dictionary 는 거의 필수적인 요소. 이거 두개는 개념을 꼭 짚고 넘어가야겠다. 두개 다 내장 자료형 type 1. 리스트의 특징 - 여러 데이터를 순서있게 담기 위해서 사용되는 자료형 - 타 언어의 array 와 유사하나 자료형에 제한이 없음 - 파이썬에서 가장 범용적으로 사용된다고 할 수 있음 - 가변(mutable) 자료형이기 때문에 리스트 생성 후에 자유롭게 새로운 데이터를 추가하거나, 기존 데이터를 변경 또는 제거할 수 있음 - 파이썬의 특징인 동적 타이핑(dynamic typing) 덕에 이 list 안에 여러 타입의 데이터를 저장할 수 있음 * dynamic typing 동적 타이핑 : 저장할 데이터 타입을 명시하지 않고도 선언할 수 있는.. * 고로 기존에 사..