솔적솔적

안녕하세요, 오늘은 지금까지 배웠던 리액트를 기반으로 프로젝트를 하나 개인 연습으로 생성하여 프로토타입을 기반으로 홈페이지 구조와 기능들을 만들어 보려고합니다. 자, 차근히 진행하도록 하겠습니다. ​ 1. 프로젝트 생성 새로운 파일하나를 만들고 1) Ctrl + shift + ` 를 눌러 npx create-react-app test(원하는 파일명으로 설치) 2) npm 대신에 쓸 수 있는 소프트웨어, yarn 을 구글에 검색 yarn https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 노란 현광색으로 표시된..

1. 함수형 자바스크립트 소개 1.1 함수형 프로그래밍? 1.1.1 함수형 자바스크립트를 검색하면 나오는 예제 대표적인 함수형 자바스크립트 라이브러리인 Underscore.js 의 each, map, filter, reduce 등 -> for 문을 대체하는 거? 그럼 이걸 왜 사용하지? 커링 혹은 부분 적용과 관련된 코드들 현재는 addMaker처럼 함수로 함수를 리턴하는 기법을 많이 사용하는 추세이다. 코드1-1 addMaker function addMaker(a){ return function(b){ return a + b; } } addMaker(10)(5); //15 addMaker(10)의 결과는 function(b) { return 10 + a; }와 같고 함수다. (function(b) {r..

안녕하세요. 저번 시간에 모달을 만들면서 Component의 장점을 배웠습니다요. Conponent를 만들면 한 묶음씩만든 것을 볼 수 있어 전보다 눈이 편하고 관리가 용이하다는 것, 그럼 단점은? → Component의 단점은, state를 바로 받아 사용할 수 없다는 것. 전에 만들었던 '아범'변수를 방금 만든 아범모달안에 데이터바인딩 할 수 있을까? 없다. 예) 아범은 변수x를 함수1()에다 선언을 한 것이므로 함수2() 안에 바로 데이터바인딩을 할 수 없다. 불러오고싶다면? 데이터를 전해주는 방법이 있다. 그것은 props. 원한다면 함수1()안에 선언된 변수의 데이터를 함수2()에게 넘겨줄 수 있다. ​ APP 컴포넌트 안에 있는 이라는 컴포넌트를 만들었는데(저번시간 코드내용으로 그대로 진행),..

안녕하세요, 오늘은 Component문법을 사용하여 모달창을 만드는 방법을 알아가봅시다. ​ 1. 모달창 만들기 1. 작성한 글 바로 밑에 로 하나의 영역을 만들기 2. 안에 작성할 내용 넣기 3. App.css 디자인 근데, 이 모달을 한 번만 하진 않을텐데 계속 div를 만들면 헷갈리고 복잡하지 않을까? 그래서 리액트에서는 그 문제를 간편하게 만들 수 있는 방법, HTML를 한 단어로 축약할 수 있는 Component문법을 방법을 사용한다. 내가 정하고 싶은 단어로 정해서 한 줄로 넣어놓을 수 있다. 아범은 Model이라고 했지만 명을 어떻게 지어도 무관하다는 것. ​ 4. function APP의 return 부분 괄호까지 끝나는 부분쯤에 Component를 만든다. 이것이 컴포넌트 문법이다. 1...