본문 바로가기

Study/Front

페이지 성능 최적화 recoil 2023. 6. 8. 진행하고 있는 프로젝트에 배포가 끝나서 들어가보면서 user 입장에서 사용할 때 괜찮은지를 확인해보고 있다. 다른 페이지들도 성능이 좋은 건 아니지만 단순 Read인데 데이터를 불러오는 것이 상당히 느려서 이에 대한 최적화를 진행하기 위해 atom 기반으로 상태관리를 진행해보려 한다. 사실 다른 페이지에서 데이터를 불러오기 위해서 atom을 사용하고 있다. 이 페이지에서는 왜 안썼는지 모르겠지만 적용을 해보겠다. const idState = atom({ key: 'idState', default: '', effects_UNSTABLE: [persistAtom], }); id를 저장할 곳은 이미 코드에서 선언을 해놓았었다. {notice.title} 원래는 라우팅을 위와 같이 했었다. 하지만, 이렇게 해두..
React Native #0 2022. 2. 18. 프로젝트를 위해 React Native를 시작했다. 본론으로 들어가자. React Native를 사용하기 위해서는 React Native CLI, REPO 두 개의 방법으로 사용할 수 있다. 내가 참고하는 유튜버 분은 React Native CLI를 사용하기 때문에 나도 React Native CLI를 사용하기로 했다. 하지만 이 친구 세팅이 만만치 않다. 하나하나 세팅을 살펴보자. 1. React Native CLI 당연한 얘기지만 React Native CLI를 먼저 설치해 줘야 한다. npm install -g react-native-cli 위 명령어를 통해 설치할 수 있다. react-native init "project-name" React에서 했던 것과 같이 project를 init으로 시작해..
ReactJs#6 - react basic 2021. 11. 11. 이번에는 지금 까지 배운 react 기초 문법들로 간단한 프로젝트를 해 볼 것이다. 코인의 데이터를 가지고 있는 API가 있으면 그 API를 불러와서 우리가 원하는 데이터를 화면에 보이게 하는 것이다. 우선 데이터를 받을 때까지 기다려야 하기 때문에 loading을 useState로 설정해주고, return문에 loading의 삼항 연산자를 사용해 문구를 띄워준다. fetch로 api를 불러오고, then을 활용하여, 불러온 response를 json에 저장해준다. 그리고 그 json을 활용하여, 빈 배열로 저장해 둔 coin에 setCoin을 활용하여 json을 저장한다. 그리고 데이터를 불러오는 과정은 끝났기 때문에 loading을 false로 설정해준다. coin에는 araray가 담겨있기 때문에 ..
ReactJs#5 -todolist 2021. 11. 9. 지금까지 배웠던 React로 아주아주 간단한 todolist를 만들어 보자. 우선 useState로 input 값인 todo를 설정해주고 input 안의 요소들을 설정해 준 뒤 onchange함수를 설정해주자. 그러면 input값에 따라서 todo가 변화하는 것 까지는 설정을 해줬다. 이제 이 친구들을 form에 제출하면, 배열에 따로 저장 한 뒤에 하나의 component로 출력해보자. input요소 앞에 form을 넣어주고 onSubmit으로 Evnetlistener도 설정해준다. 그리고 useState를 배열로 정의해 줘서 todo들이 담길 배열을 설정해준다. onsubmit함수에 자동 새로고침을 막기 위해서 event.preventDefault() 값을 설정해주고, todo, 입력되는 값이 공백이..
ReactJs#4 -useEffect 2021. 11. 8. useeffect가 왜 필요한지 먼저 알아보자. useState를 활용하여 위와 같이 단순히 버튼을 누르면 카운트가 되는 코드를 짜주자. 카운터가 올라가는 게 보이듯이 코드는 정상적으로 실행된다. 하지만, console에서 확인할 수 있듯이 원하지 않는 hi까지 rerender 되어 버려서 console창에 출력이 된다. useEffect는 이렇게 원하지 않는 요소가 rerender 되는 것을 방지하기 위한 문법이다. 위와 같이 처음 render 될 때만 실행시키고 싶은 코드를 useEffect안에 넣어놓고, 그렇지 않은 코드는 그 밑에 작성하자. 그러면 useEffect안에 설정해 주었던 Call The API는 한 번만 출력되고, onClick때마다 hi만 rerender 돼서 출력된다. 그럼 use..
ReactJs#0 -basic,state 2021. 11. 2. 저번에 듣던 강의를 이어 들으려고 들어왔는데 갑자기 강의가 늘어나 있었다. 알고 보니, 내가 듣기 이전 강의들은 오래된 버전이라 새로운 20년도 버전으로 업데이트한다고 대규모 업데이트가 된 것 같았다. 들을게 더 많아졌다는 소리다. 하지만 오히려 좋았다. 들으면서 기본 문법이 어렵다고 느껴졌는데, 그 부분에 대한 강의들이 대거 업데이트되었기 때문이다. 우선 이 친구들을 src 해줘야 react를 실행할 수 있다. 17년 버전의 것과는 실행 방식이 다르다. 이게 훨씬 나은 것 같다. 그리고서는 원래의 js파일과 비교해 주기 위해서 다른 js 파일에 위와 같이 클릭하면 counter가 늘어나는 식으로 간단하게 코드를 짜줬다. 이런 식으로 나온다. 이제 이 친구를 React를 활용해서 좀 더 코드를 간편하게 ..
ReactJS#3 -async 2021. 11. 1. 이제 원래 프로젝트의 목적이었던, Movie 데이터들을 불러와 보자. fetch를 사용할 수도 있겠지만, 니꼬쌤은 axios를 사용하여 데이터를 불러오는 것이 더 효율적이라고 하였다. 위와 같이 말이다. 하지만 axios는 상당히 느려서 컴파일러에게 이 친구를 기다려 달라고 말을 해줘야 한다 했다. 저번에 js로 웹페이지를 구성하는 과정에서 동기, 비동기 실행 관련하여 이해가 100프로인 상태가 아니라 고생을 한 기억이 나서 이번 기회에 확실히 공부를 하고 넘어가기로 했다. 우선 자바스크립트는 동기(Synchronous)식 언어이다. 자바스크립트는 한 번에 하나의 작업을 수행한다. 한 작업이 실행되는 동안에는 다른 작업은 정지하고 그 작업을 실행한다. 단일 스레드라고 보면 편하다. 왜 동기식 언어인지는 ..
ReactJS#2 -state 2021. 10. 30. React에는 다른 프로그래밍 언어들과 같이 function component를 지니고 있지만 동시에 class component를 지니고 있다. 편한 건 function이 훨씬 편하다. class에 비해 필수적으로 요구하는 것도 몇 개 없고, 다른 프로그래밍 언어에서 충분히 써왔기에 익숙하기 때문이다. 둘의 차이점은 https://velog.io/@sdc337 dc/0.% ED%81% B4% EB% 9E%98% EC% 8A% A4% ED%98%95-%EC% BB% B4% ED% 8F% AC% EB%84% 8C% ED% 8A% B8 클래스형과 함수형 차이 클래스형 컴포넌트react 컴포넌트 선언하는 두가지 방식 중 하나. 클래스 컴포넌트 & 함수 컴포넌트현재 자주 사용하지 않지만, 사용하는 기업들이 있다..

티스토리툴바