대기업을 향한 디벨롭 블로그

이번엔 404페이지를 만들거다. https://mhypro.tistory.com/48 Router를 이용해 페이지를 나누어보자. Router - 1 리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 mhypro.tistory.com Router를 모른다면 이걸먼저 보는걸 추천한다. 404Page는 맞지않는 URL을 입력했을때의 페이지를 보여지게 된다. 즉 사용자입장에서 이상한 URL을 입력했을때 잘못입력했다는 페이지를 띄어주는거다. 코드로 봐보자. 일단 404페이지를 띄울 컴포넌트 먼저 만들어보자. 그런다음 Routes에서 한줄만..

https://mhypro.tistory.com/48 Router를 이용해 페이지를 나누어보자. Router - 1 리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 mhypro.tistory.com 이번엔 중첩경로(Nested Routes) 를 알아보자 Nested 의 뜻은 중첩이라는 뜻이다. 중첩 경로는 ex) localhost/one/post 이런식의 경로의 경로이다. 즉 최상위경로만을 다루면 많은 페이지를 다루기 힘들것 이다. 예를들면 /shoes가 있다면 /shoes/yellow(노란신발들) /shoes/blue(파란신발..

Router - 1 포스트를 이어서 시작한다. 1에서 쓰던 코드를 그대로 사용할 것 이다. https://mhypro.tistory.com/48 Router를 이용해 페이지를 나누어보자. Router - 1 리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 mhypro.tistory.com 먼저 navigate를 알아보자 navigate의 뜻은 탐색이다 즉 URL을 탐색한다고 생각하면된다. 코드로 알아보자. ex) navigate('/one') -> localhost:3000/one 먼저 useNavigate훅을 import를 해..

리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 터미널에서 npm install react-router-dom@6 입력하여 설치해 준다. 마지막 @6은 버전을 뜻한다. 설치가 완료되면 제일먼저 BrowerRouter라는 컴포넌트를 사용할것인데 BrowerRouter란 *HTML5 기록 API(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화된 상태로 유지하는 * 즉 페이지가 새로고침하지않아도 URL에 따라 새로운 페이지를 구성할 수 있다. SPA(SinglePageAppli..

https://mhypro.tistory.com/46?category=1063897 바텀 네비게이션 만들기 BottomNavigationView 바텀네비게이션 뷰를 만들어보자. 바텀네비게이션뷰는 당근마켓앱에 이렇게 밑에 보이는 메뉴들이 바텀네비게이션 뷰로 만들어졌을 것이다. 커스텀으로 한번 만들어보겠다. 먼저 들어갈 메뉴 mhypro.tistory.com 이전글에서 바텀네비게이션을 만들었었다. 이제 메뉴의 아이템이 클릭되면 메뉴아이템의 배경이 바뀌게 해보자. 먼저 클릭됬을때의 itemBackground를 적용할 @drawable파일을 만들어준다. 이 xml은 배경은 하얀색에 stroke를 5dp를 줬는데 bottom에만 stroke를 그려주었다. 만들어준다음 새로운 drawable파일을 만들어 state..

바텀네비게이션 뷰를 만들어보자. 바텀네비게이션뷰는 당근마켓앱에 이렇게 밑에 보이는 메뉴들이 바텀네비게이션 뷰로 만들어졌을 것이다. 커스텀으로 한번 만들어보겠다. 먼저 들어갈 메뉴를 만들어 주어야한다. res폴더에 menu폴더에서 menu를 만들어주자. menu리소스파일을 생성했으면 메뉴item을 만들어주자. 총 5개의 메뉴아이템을 만들겠다. 메뉴아이템의 속성엔 id,title,icon을 구성해주었다. icon은 https://www.flaticon.com/ 이 사이트에서 가져왔다. 이렇게 만들어지는데 icon은 split화면에서 보이진않는다 하지만 바텀네비게이션뷰에 적용하면 보이게된다. 메뉴를 만들었으니 적용해보자 레이아웃안에 이렇게 넣어주자. app:menu속성이 내가만든 메뉴를 넣어주면된다. 이렇게 ..

팝업메뉴1장에서 팝업메뉴를 적용하기 , 클릭리스너까지 달아보았다. 2장에서는 팝업메뉴를 커스텀해볼거다. https://mhypro.tistory.com/44 팝업메뉴1 적용하기 , 메뉴 아이템 클릭리스너 팝업메뉴를 커스텀으로 한번 만들어보자. 먼저 버튼을 만들어주었다. 버튼을 클릭시 팝업메뉴가 나오도록 하겠다. 그리고 res폴더에 Android Resource Directory를 만들어주는데 type을 menu로 만들어 주 mhypro.tistory.com 1장에 이어서 할거다. 먼저 themes.xml 파일안에 밑에있는 style을 넣어주자 설명하겠다 . style을 하나 만들어준건데 name은 PopupStyle로 만들어줬고 , 변수이름이라고 생각하면된다 . parent는 부모요소다. 부모요소는 Po..

팝업메뉴를 커스텀으로 한번 만들어보자. 먼저 버튼을 만들어주었다. 버튼을 클릭시 팝업메뉴가 나오도록 하겠다. 그리고 res폴더에 Android Resource Directory를 만들어주는데 type을 menu로 만들어 주어야한다. 그리고 메뉴파일에 pop_menu.xml파일을 만들어주자. 옵션아이템을 4개정도 만들었다. 그리고 MainActivity에서 버튼의 클릭리스너에 binding.optionBtn.setOnClickListener { val popup = PopupMenu(this , it) popup.menuInflater.inflate(R.menu.pop_menu,popup.menu) popup.show() } 이렇게 달아주자 이게뭐냐면 가장기본적으로 팝업메뉴를 띄울 수 있는코드다. Popu..

안드로이드 공부할때 마다 훈련이라 생각한다. 당근마켓 UI클론코딩 해보았다. 그냥 간단히 main만 했다. 허접하다... 갈길이 한참남았다.

AndroidManifest의 파일에대한 구조를 알아보자 이 파일은 app폴더안 manifests폴더안에 들어있다. Manifest는 앱에대한 구성요소, 권한 셋팅정보들이 들어있는 파일이다. 공식사이트의 manifest https://developer.android.com/guide/topics/manifest/manifest-intro?hl=ko 앱 매니페스트 개요 | Android 개발자 | Android Developers 앱 매니페스트 개요 모든 앱 프로젝트는 프로젝트 소스 세트의 루트에 AndroidManifest.xml 파일(정확히 이 이름)이 있어야 합니다. 매니페스트 파일은 Android 빌드 도구, Android 운영체제 및 Google Play에 developer.android.com ..