개발 공부/React

React 처음 했을 때 정리해보자 - 2주차 -

이때 부터 조금씩 내가 한 일들을 기록하기 시작했다. 지금도 꾸준히 하려고 노력중이다. 다시 보니 21일부터 기록하기 시작했다. 21일 디자인이 나오고 나서 바로 화면을 만들기 시작했다. 디자인대로 화면을 그리는 부분을 어떻게 시작해야할지도 모른채 무작정 시작했다. 이때는 주말도 같이 썼다. 그리고 그 주말 동안 내가 만들려고 하는 것과 유사한 예제 코드를 발견해서 어떻게 시작할지를 좀 도움을 많이 받았다. 어떻게 화면을 그려넣어야할지 조차도 막막했기 때문이다. 개념과 기술을 배워도 어떻게 쓰이는지를 모르면 말짱꽝이라서 실제 프로젝트상에서 어떻게 쓰이는지를 볼 수 있는 예제를 찾는게 정말 중요하다는 생각이 들었다. 주말동안에 디자인초안의 첫페이지를 어떻게든 개발하고 그러면서 폰트 적용하는 것 그리고 AP..

2022. 11. 9. 09:37

개발 공부/React

React 처음 했을 때 정리해보자 - 1주차 -

최근에 React를 바로 학습해서 프로젝트를 만들어야하는 상황이 왔다. 모든게 처음이었다. Javascript도 써본 적 없고 css는 말할 것도 없다. html? head, body정도? 프톤트 자체를 거의 해본 적이 없는 상태였다. 엄청 겁이 나거나 그런 건 아닌데 시작하기 전에는 좀 막막했던 거 같다. 물어볼 사람도 없고 혼자 알아서 공부해야하는 상황. 거의 맨땅에 헤딩 수준이다. 2022년 10월 17일에 시작했는데 21일에 디자인이 나왔을 때는 내가 이걸 만들 수 있을까란 걱정이 앞섰다. 시작은 그러했지만 4주차에 접어든 현재는 AWS서버를 구축했고 UI와 어느정도의 인터랙션을 구현해서 React 프로젝트를 팀원들과 같이 볼 수 있는 상태로는 만들었다. 사이트 내의 기능 구현과 반응형 작업이 남..

2022. 11. 8. 08:50

개발 공부/React

[React] Redux 예제 - 버튼 눌러서 값 변경하기

Redux : Node.js 모듈. JavaScript 상태 관리 라이브러리 Redux Flow 이미지 출처: www.google.com [예제] 위의 플로우처럼 초기값 0에서 버튼을 눌러 더하고 뺀 값을 UI에 반영하기 디렉토리 구조 1. Redux 설치 react에서 redux를 사용하기 위해서는 redux, react-redux를 설치해야한다. npm install redux npm install react-redux 2. src>store디렉토리 생성 후 안에 store.js 생성 src/store/store.js 안에 아래 3개의 코드를 넣어준다 - Action 만들기 state에 변화를 일으킬 때 참조하는 객체. 버튼이 눌리면 dispatch를 통해 action을 생성한다. action은 반드..

2022. 10. 27. 13:07

개발 공부/React

[React] React 프로젝트 생성하기

1. Node.js NPM 설치 Node.js 사이트로 가서 다운로드 받는다. 최신을 설치하는 것도 좋지만 안정적인 버전을 추천한다. https://nodejs.org/en/ 설치하고 cmd에서 설치 확인을 할 수 있다. 아래 이미지는 확인한 걸 캡쳐한 거고 최근에 설치한 버전이 아니라서 버전이 다르다 node -v npm -v 2. React 프로젝트 생성 프로젝트를 생성하고 싶은 경로에 새로운 폴더를 만들고 그 안으로 들어가서 아래의 명령어를 cmd에 입력한다 npx create-react-app 프로젝트명 npx create-react-app myapp 시간이 지나면 myapp라는 프로젝트(앱)이 생성이 된다. myapp 폴더를 VSCode 또는 WebStorm를 열면 된다. VSCode, WebS..

2022. 10. 25. 20:10

개발 공부/React

[React] useRoutes() may be used only in the context of a <Router> component.

처음 공부하면서 만든 예제에서 useNavigate를 쓰면서 만든 예제를 참고해서 구현하다가 만난 에러 nav사용한 예제 import Home from "./pages/Home" importReactfrom "react"; import {Routes, Route,Link, useNavigate} from "react-router-dom"; import About from "./pages/About"; import Counter from "./pages/Counter"; import Input from "./pages/Input"; import Input2 from "./pages/Input2"; import List from "./pages/List"; import Test from "./pages/Te..

2022. 10. 20. 15:15

개발 공부/Android

[Android Kotlin] RecyclerView 데이터 변경 시 스크롤 위치 유지하기(onSaveInstanceState(),onRestoreInstanceState() )

페이징 구현시 RecyclerView가 바닥을 인지해서 데이터가 바뀔 때 마다 RecyclerView의 focus가 계속 최상단으로 이동해서 데이터가 바뀌어도 스크롤 위치가 바뀌지 않게 하기 위해서 진행 1. 전역변수로 Parcelable 선언 및 초기화 private var recyclerViewState: Parcelable? = null 2. RecyclerView의 상태를 저장해야할 시점에 onSaveInstanceState() 호출 페이징이 시작되기 전의 상태를 저장할 필요가 있기 때문에 그 시점에 넣어주었다. recyclerViewState =binding.rcyMainMovieList.layoutManager.onSaveInstanceState() //RecyclerView 현 상태 저장 실..

2022. 10. 1. 17:12