감귤밭 호지차 농장

Title : 리액트로 페이지네이션 구현하기 드디어 염원하던 리액트로 페이지네이션을 구현해보았습니다. 추후 CRUD 기능, 검색 기능을 구현해보고 싶습니다. 페이지네이션 라이브러리 페이지네이션을 구현하는 라이브러리 중 인기 상위인 페이지네이션 라이브러리 입니다. 라이브러리를 이용해서 구현해보지는 않았지만 라이브러리를 적용하는 방법을 익히기 위해 따로 공부해보아야 할 것 같습니다. react-js-pagination 리액트로 페이지네이션 구현하기 Component 나누기 App.js ┗ main : 메인 글 목록들과 페이지네이션 구현 ┗ header : Nav 파트 담당 ┗ datas : 임시 dummy datas Main Component 이 Main 부분에는 ' 현재 페이지에 나타낼 글 목록 ' 과 '..

🍀 오늘의 날짜 : 23년 04월 24일 🍀 오늘의 주제 : 리덕스 Redux Redux 에서 애플리케이션을 만들 때, 보통은 하나의 루트 App.js 컴포넌트에서 상태를 관리합니다. 보통은 부모 컴포넌트가 중간자 역할을 하면서 컴포넌트끼리 직접 소통하는 방법은 권장되지 않습니다. React는 SPA(Single Page Application)을 만들기 위해 주로 사용되는데요 , React가 자체적으로 state와 props 를 관리할 수는 있지만 프로젝트 규모가 커지고 컴포넌트가 많아짐에따라 상태를 관리하기 힘들어집니다. 이러한 상태를 보다 편하게 관리할 수 있도록 도와주는 역할의 (독립형) 라이브러리가 Redux 입니다. * ref 를 사용해서 컴포넌트끼리 직접 소통할 수는 있다고 함 * (엄밀히 말..

python 을 깔짝 깔짝 사용해보고 있는데 자꾸 문법 사소한게 달라서 한번에 통과하지 못하고 있습니다만.. 이건 뭐 .. 무깡으로 접근한 제 잘못이져 뭐 python a,b = map(int, input().split()); if(a > b) : print( " > " ); elif(a b) { return ">"; }else if ( a < b) { return "

헉헉 대면서 간신히 따라가는 중..? 아니 이건 따라간다기보다 거의 끌려가는 중인데..? https://react.vlpt.us/basic/13-array-insert.html https://velog.io/@party3205/React-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C-input-%EC%B4%88%EA%B8%B0%ED%99%94 https://styled-components.com/docs/api styled-components: API Reference API Reference of styled-components styled-components.com https://velog.io/@tnqls1211v/TIL-Day49 [TIL] Day49 #Rea..

* * 작성 중인 글입니다. * * 🍀 오늘의 날짜 : 23년 04월 18일 🍀 오늘의 주제 : 컴포넌트 UI 개발을 위한 Storybook + useRef 🔖 Storybook 이란? UI 개발 도구의 일종으로 Component Driven Development가 트렌드로 자리 잡으며 이를 지원하는 도구 중 하나인 Component Exploer (컴포넌트 탐색기) 가 등장합니다. Storybook은 이 도구의 UI 개발 도구 중 하나 입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업 할 수 있다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인 할 수 있다. 전체 UI를 한 눈에 보고 개발 할 수 있다. 버그를 사전에 방지할 수..

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

데일리 코딩을 풀며 정확히 이해하지 못했거나 틀린 문제로 남겨두었던 문제들을 Section이 끝난 기념으로 총 정리 해보았습니다. ** 13번 과 17번은 미해결 문제 입니다.. Problem 04 # 각 문자열의 첫 글자로 이루어진 문자열 리턴 - Ex. 입력 : 'hello world" 출력 : "hw" function firstCharacter(str){ const answer = str.split(' '); let arr = []; let result = []; if( str.length === 0) { return ''; } for( let i fo answer){ arr = i.split(''); for( let j = 0 ; j h * l--> o * o --> r function decry..

🍀 오늘의 날짜 : 23년 04월 13일 🍀 오늘의 주제 : UI 와 UX 그리드에 대해서는 따로 CS 항목에서 정리하고자 합니다. * "그리드"의 모든 것 * [CSS] 레이아웃 뿌셔뿌셔 🔖 UI 와 UX UX ⊃ UI UI : User Interface [ 사용자 인터페이스 ] 사람과 사물 / 시스템 / 기계 / 컴퓨터 프로그램 등 사이에서 의사소통을 위한 목적으로 만들어진 물리적/가상적 매개체 # 사용자 조작환경 # GUI , CLI, NUI(스마폰 터치, 명령어 인식), OUI (모든 사물,물질들이 변형 없이 그대로 인터페이스 장치 ex. IOT) UX : USer Experience [ 사용자 경험 ] 사용자가 제품/서비스를 사용하면서 얻는 경험 즉, 사용하면서 느끼는 감정적인 경험을 의미 # ..

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

Chapter 1 . 재귀함수 연습 + 복습 어떠한 특정 조건에 걸려서 멈추기 전까지 계속 나를 부르는 재귀함수를 이용해서 다양한 예제를 연습해보았습니다. # Solve_flattenArr * 함수 flattenArr을 재귀함수의 형태로 작성하여, 입력받은 다차원 배열을 1차원 배열로 리턴하세요. - Array Method flat(), flatMap() 사용 금지 - 반복문(for,while) 사용 가능. - 원본 배열 변경 금지 - 빈 배열을 입력 받은 경우는 빈 배열 리턴 예시를 생각해보면 다음과 같이 입력을 받고 출력을 해야 합니다. 1) 입력 : [ [1], 2, [3, 4], 5] 2) 출력 : [ 1, 2, 3, 4, 5] 배열 안에 배열이 있는 입력 이므로, 반복문으로 배열을 계속 (재귀)..