TIL
1.22.부트스트랩
다른 사람이 만들어둔 것을 사용.bootstrap.css를 불러와서 적용한다. col-sm- : 768보다 아래로 내려가면 세로로 한 줄로 정렬된다. 가로 정렬이 안됨. 만약 <768 이면 1, 768< 이면 2, 970px 이상에서는 3
2.22. bootstrap - 예시
로그인 페이지 header body 게시판 body summernote
3.js - promise
4.섹션1. 함수형 프로그래밍 개요
함수형 프로그래밍 = 성공적인 프로그래밍을 위해 조합성을 강조하는 프로그래밍 패러다임. 부수효과를 미워함 → 순수함수를 만든다 → 오류를 줄이고 안정성을 높인다조합성을 강조 →모듈화 수준을 높인다 → 생산성을 높인다. 순수함수인 이유는 항상 동일한 인자를 주면 동일한
5.섹션1. 함수형 프로그래밍 개요 - 2
함수를 값으로 다룰 수 있는 개념.변수에 함수를 담을 수 있다는 사실이 중요. 함수가 함수를 인자로 받을 수 있다.add_maker은 함수를 리턴하는 함수/아래처럼 사용.일급함수 + 클로저 개념이 사용된 함수이다. 아래처럼 여러 add_maker을 만들 수 있다. a라
6.섹션 2. 함수형으로 전환하기
명령형 코드로 아래 문제 해결30세 이상인 users를 거른다30세 이상인 users의 names를 수집한다.30세 미만인 users를 거른다.30세 미만인 users의 ages를 수집한다.1,2의 경우, 조건부만 다르고 코드는 거의 같다. 직접 변경하지 않고 새로운
7.섹션 2. 함수형으로 전환하기 - 2
두 부분의 중복 -> loop 부분과 참조하는 부분이 중복된다. 이걸 참조할 수 있는 함수 \_each()를 만들어보자.each()함수를 사용하게 되면 위 함수들은 다음과 같이 변경된다.명령적인 코드표현이 줄어들게 되고, 선언적인 코드가 늘어나게 된다.array내부 함
8.처음 배우는 react-native
컴포넌트: 재사용할 수 있는 조립 블록으로 화면에 나타나는 uidyth여러 개의 요소를 표현할 경우 반디시 하나의 부모로 감싸야함. : 와 비슷한 기능view처럼 특정 역할을 하는 컴포넌트로 감싸지 않고 여러개의 컴포넌트로 반환하고 싶은 경우 로 감싸준다 ← <
9.섹션2. 함수형으로 전환하기 - 3
커링은 함수와 인자를 다루는 기법이다. 함수에 인자를 하나씩 적용해나가다가 필요한 인자가 다 모이면 함수 전체를 실행하는 기법이다.커링이 직접적으로 지원되지 않지만, 일급함수가 지원되고, 평가시점을 마음대로 다룰 수 있기 때문에 사용할 수 있다. 아래처럼 만들 수 있다
10.섹션3. 컬렉션 중심 프로그래밍
부트 스트랩을 시작하기 위한 시작 페이지테이블네비게이션레이아웃(화면 크기에 맞춰서)
11.create react project
clone codingreacttodo.jsmodal.jsbackdrop.js
12.Meetup page
MainNavigation.js 파일을 활용해서 네비게이션링크를 만들어준다. App.js에서 <MainNavigation />을 불러오면 바로 확인 가능. 혹은 App.js에서 Layout.js 파일을 이용해서 바로 레이아웃을 만들기 가능App.jsLayout.j
13.Newmeetup form
14.new meetup form - data
function NewMeetupForm에서 form submit event인 submitHandler, 각 폼 요소는 ref형식으로 전달해서 useRef()로 레퍼 요소 만들어 submitHandler에 넣기
15.preparing app for Http
react를 이용해서 바로 데이터베이스에 연결하지 않는다. 보안 문제 때문. 모든 리액트 코드는 방문자들이 볼 수 있기 때문에 서버를 통해서 데이터베이스와 통신한다. 파이어베이스 사용할 것. 파이어베이스 ->리얼타임 베이스NewMeetupForm.jsprops.onAd
16.favorites
favorites-context.jsFavorites.jsMeetupItem.js
17.4. 스타일링
자바스크립트를 이용해서 스타일링인라인 스타일 2. 스타일 시트에 정의된 스타일을 사용Html 인라인처럼 직접 입력. 문자열 형태가 아니라 객체형태로 전달해야한다.태그에 직접 입력하는 방식이 아니라 스타일시트에 정의된 스타일을 사용하는 방법css클래스를 이용하는 방법과
18.redux-thunk로 rn -firebase 관리하기
app.jsstore/action/product.jsstore/reducers/product.jsshop/ProductsOverviewScreen.js
19.6. hook
동기 : 요청을 보낸 후, 해당 응답을 받아야 다음 동작을 실행한다비동기: 요청을 보낸 후 응답에 관계없이 다음 동작을 실행useState함수를 호출하면 그 변수를 수정할 수 있는 세터 함수를 배열로 반환. 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수와 그 변수를
20.6. hook -2
동일한 연산의 반복 수행을 제거해서 성능을 최적화하는데 사용.javascript, expo, expo, react native라고 적혀있는 list를 버튼을 클릭할때마다 다음 리스트의 값과 값의 길이를 가져온다. 위의 경우, 마지막 문자열 이후에 더이상 문자열의 변화가
21.7. Context API
일반적인 rn 어플의 경우, 데이터는 부모 → 자식 컴포넌트로 전달된다. 만일 데이터를 사용하는 컴포넌트가 많다면, 최상위 컴포넌트인 App 컴포넌트에서 상태를 관리하여 하위 컴포넌트 어디서 필요로 하든 props를 통해 전달할 수 있게 한다. 이렇게 하면 데이터 전달
22.8. navigation
리액트 네비게이션 라이브러리는 리액트 네이티브 애플리케이션의 내비게이션을 쉽고 간단하게 관리할 수 있도록 도와준다. 지원하는 네비게이션의 종류는 스택 내비게이션, 탭, 드로어 세종류. 리액트 네비게이션에는 NavigationContainer 컴포넌트 내비게이션의 계층