본문 바로가기

개발일지

 (25)
[React Native] Text strings must be rendered within a <Text> component 구글링 결과 ; 같은 오타 때문에 생긴다고해서 >; 를 컴포넌트 마다 검색해봤는데 이런 오타는 없었다. 그렇다면 이 부분을 한 번 확인해보자! // MovieScreen.jsx return state ? ( Hello ) : ( " " ); 이런 식의 코딩을 렌더링 부분에서 자주 사용했는데 간과한 부분이 있다. 상위 컴포넌트에서 해당 컴포넌트(MovieScreen)를 어떻게 불러오는 지를 확인해야 한다. //ScreenTab.jsx ( ), }} > 해당 컴포넌트(MovieScreen)을 component props로 사용하고 있었다. 변경 코드 // MovieScreen.jsx return state ? ( Hello ) : ( isLoading );
[React Native] Stack과 Tab Navigation 동시에 사용하기 접근방법 1. 각각의 Tab위에 Stack들 얹기 장점: 직관적임 단점: 스택 파일 갯수가 많아진다. 1. header(title)를 위해 Stack을 만들어야 했다. Tab.Screen의 component props를 Stack이 아닌 Screen에 대해서는 Header가 생성되지 않는다. 그래서 단 한개의 Screen을 쓰더라도 Stack을 만들어주어야 했다. 2. 여러 탭들에서 공통으로 사용하는 하나의 Screen이 존재했는데, 이 Screen을 접근하기위해 Stack마다이 Screen을 넣어줬다. 아니, 사실 이 단 하나의 Screen을 접근하기 위해 여러 개의 Stack을 만들었다... 좋지않은 코드라는 것을 직감했고 (실제로 동작에 오류는 없었다) 다른 방식을 찾기 시작했다. 접근방법 2. S..
[axios] 이중으로 비동기 요청시 proxy 설정 error 현재 Proxy Setting 서버를 2개 사용하고 있는 중이다. 5000 port는 passport.js를 사용하기 위해 node.js와 연동한 것이고 9999 port는 DB와 연동되어있는 Spring으로 구현한 서버이다. issue /auth로 요청한 후에 /api 요청하니 /api가 9999 port로 요청되지 않는다. 해결방법 GET 방식에서는 Parameter로 data를 rquest한다. proxy 설정이 제대로 되지 않았던 것처럼 보이는 경우를 개발하면서 종종 마주치게 된다. 엄한데서 시간을 많이 소비하게되는데, 대부분 서버로 요청할때 주소와 data값의 문제였다. 이를 다시한번 확인해볼 필요가 있다. 추가적으로 GET방식의 Parameter에 대해 공부한 내용을 적으면 1. path pa..
[Redux] 배열 state에 값 추가하기 export default function SurveyReducer(state, action) { console.log("state =>", state); console.log("action =>", action); if (state === undefined) { return { clickedArray: [] }; } var newState; switch (action.type) { case "ADD_SURVEY": var newData = { id: action.data }; newState = { ...state, clickedArray: state.clickedArray.push(newData), }; break; case "DELETE_SURVEY": newState = { ...state, cl..
[Pandas] 가장 많은 리뷰를 받은 `n`개의 음식점 json 파일 불러오기 try: with open(data_path, encoding="utf-8") as f: data = json.loads(f.read()) except FileNotFoundError as e: print(f"`{data_path}` 가 존재하지 않습니다.") data.json [{"id": 0, "name": "", "branch": "", "area": "", "tel": "", "address": "", "latitude": "", "longitude": "", "category_list": [{"category": ""}, ...], "menu_list": [{"menu": "a", "price": 0}, ...], "bhour_list": [], "review_cnt": ..
[Nginx] 502 error 배포작업 React build 폴더를 home/ubuntu 에 위치시키고 /etc/nginx/sites-available에 있는 default를 다음과 같이 수정하였다. server_name 만 있으면 react화면이 나오고 server_name 뒤에 /api를 붙히면 api server로 접속된다. front단은 배포가 되어서 접속이 잘된다.. 그런데 server로부터 데이터받아오는 부분에서 502 error가 난다. /api/ 의 proxy_pass 부분을 어떻게 설정해줘야할 지 모르겠다.. 1. localhost:5000/api 2. 127.0.0.1:5000/api 3. (server_name):5000/api api뒤에/를 붙히는 것도 해봤고 location /api/에서 뒤에/도 빼봣다.. 기..
Next.js What is Next.js ? React 전용 SSR 프레임워크 What is SSR ? Server Side Redering 렌더링 작업을 서버에서 Why SSR? - 기존 CSR(Client Side Rendering) 방식 초기 구동 시 전체 페이지 렌더링. 사용자 이벤트 발생할때마다 이를 해석하고 필요한 부분만 렌더링하는 방식. - 기존 CSR과 비교시 빠른 첫 페이지 렌더링 가능 SEO(Search Engine Optimization)를 유도하기위해서 적용 Next.js + Express -> 렌더링 전처리 가능! 클라와의 통신횟수 감소! What is Gatsby ? =React + GraphQL 내용이 자주 바뀌지 않는 정적사이트(블로그, 회사소개) 만들 때 사용 Next.js vs Gat..
Jira Jira 프로젝트 생성 Deploy token 생성 git에서 Setting - Repository - Deploy Tokens expands Name은 별로 중요하지 않은 것 같다. Issue Epic - Story - Sub-task / Task / Bug 로 이뤄져있다. Issue Type 설명 주의 사항 Epic 최상위 수준의 기능/작업 단위 Epic에 연결된 모든 Story를 해결한 후 Epic을 완료 처리할 것 Story Epic에 대한 하위 level 수준의 기능/작업 단위 생성 시 Epic을 지정 (Epic Link) Bug 프로젝트 개발/검증 중 발견된 버그 Task 개발에 직접 해당되지는 않지만 Sprint 안에 포함하여 해야할 일 Sub-task 위 Isuue들과 관련하여 세부 단위 ..

티스토리툴바