감귤밭 호지차 농장

CDD Component Driven Development 의 약자로 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법을 의미합니다. 재사용할 수 있는 UI 컴포넌트를 여러 팀들이 공유를 하면 불필요한 업무 충돌 및 작업이 줄어들 수 있겠죠. 페이지 단위로 UI 개발이 이루어지는 것의 반대라고 할 수 있습니다. 디자인 체계화 & 디자이너와 효율적인 협업 ( Storybook을 통한 체계적인 관리 및 소통 ) 평행화 개발 (Parallelize development) : 다른 프로젝트에서도 쉽게 쓰고 공유 가능 Decoupling : CSS, JS , I18n, UI 단위 테스트 등 Aribnb의 UI Storybook 참고 블로그 : [Methodology] CDD(Component Driven De..

# 재귀함수와 메모리 사용량 간의 관계(javascript recursion memory leask) # 꼬리 재귀 (tail recursion in JS) # 하노이의 탑 재귀(js tower of hanoi in recursion) # 조합 재귀 함수(js combination in recursion)

[구현 기능] 기존에 axios를 이용하여 불러왔던 weather open api를 fetch로 부르기 Weather.jsx 파일 생성 weather api를 불러올 때 편하게 사용 할 수 있도록 개인 key 와 주소를 전역 변수로 미리 선언해주었습니다. const api = { key : ' /* 개인 암호 키 */ ', base : 'https://api.openweathermap.org/data/2.5/', } Weather 함수 컴포넌트 안에 오늘 날짜를 불러올 함수를 작성해줍니다. const dateBuilder = (d) =>{ let months = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월", ]; ..

[구현 기능] 모달 창에 contents 입력 시, 새 todolist에 추가되어 화면에 출력 # # # //App.js sendData라는 이름으로 {data} 파일을 보내는 거라서 에서는 바로 {sendData}를 받고 sendData 를 변수마냥 이용해서 넘어온 데이터들을 이용할 수 있다.!

# 모달 창의 [ + New Task ] 버튼 클릭 시, 로 입력 값 넘어가서 화면에 뜨기 [1]_ [ + New Task ] 버튼 클릭 시 모달 창 pop up const [showPopup, setShowpopup] = useState(falsE); const [newListcontent, setNewListcontent] = useState(''); const [lists, setLists] = useState([{ id:1, content: '첫번 째 할 일', date: '2022-03-31', }]; const togglePopup = () => { setShowpopup(!showPopup); } const onTextChange = (e) => { setNewListcontent(e.tar..

[1] total { count 예정 } Day Journey [ 구현 기능 ] : ( + ) / ( - ) 버튼을 누르면 숫자가 증가되거나 감소함. [ 추가 기능 ] : 카운트가 1 이하로 떨어지지 않게 고정하기 [ 추가 기능 ] 구현을 위해 useState 를 이용해서 함수를 만들 때, 조건을 걸어야 한다고 생각을 했습니다. 1. useState 이용해서 " btnIncrease " 와 " btnDecrease " 함수를 구현 2. 1 이하로 떨어지지 않게 하기 위해 btnDecrease에 조건을 지정 import {useState] from 'react'; /////////////////////////////// const [ up, btnup ] = useState(1); const btnIncr..

# React로 To Do List 만들기 # React로 weather Open API 불러오기 ERROR_ 01 : Logo 부분에 img 태그 사용으로 인해 발생 import React from 'react'; import './Navbar.css'; const Navbar = () => { return( To Do List // 이부분 ) } export default Navbar; . . img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. . . > 해결 방안 : 태그로 수정 import React from 'react'; import './Navbar.css'; ..

JS TDD - .deep.equal / .eaul 차이 argument와 파라미터의 차이 파라미터 promise와 async/await HTML/CSS 레이아웃 뿌셔뿌셔 230317 React (230327) React propst stae 2부 (230322) JSX의 기본 규칙과 컴포넌트 개념 Daily 회고 (230314) : 고차함수 (230322) : JSX의 기본 규칙 기술면접 준비 이것저것 조각보 DDD : 도메인 주도 설계

JavaScript 기본적으로 동기적 언어이지만, V8 엔진과 같은 JS 엔진의 도움?으로 브라우저에서 자동으로 비동기적 수행을 할 수 있습니다. Promise 는 우리가 비동기 흐름을 제어하기 위한 방법이라고 이해하면 될 것 같습니다. ] → 자바스크립트 동기 비동기 → Asynchronous JavaScript_MDN → 벨로퍼트와 비동기 처리 다루기 Promise # callback 함수와 promise 의 차이점 이전에는 callback 함수를 사용해서 비동기 처리를 해왔지만 코드를 잘 작성하지 않으면 어디서 어떤 흐름으로 코드가 작성되는지 파악하기 어렵고, Callback Hell 처럼 쓸데없이 코드가 길어지는 이슈가 발생했습니다. 코드 실행의 성공과 실패에 대해서 규격화된 포멧을 따르는 것이 ..

JS에서는 프로토타입 기반의 객체지향 언어입니다. 프로토타입 기반 객체지향 언어는 Class가 필요없는 객체지향 프로그래밍 언어어였습니다만, ES6에서 CLASS 기능이 출현했습니다. 🔖 ES5에서 상속은 어떻게 구현 했을까? 이전의 경우에는 ' 프로토타입'을 통해 을 구현했습니다. //ES5 생성자 함수 var Person = (function () { //생성자 함수 function Person(){ this.name = name; } //프로토타입 메서드 Person.prototype.hello = function(){ console.log(`Hi I am ${this.name}`); }; //생성자 함수 반환 return Person; }()); //인스턴스 생성 let emma = new Per..