전체 글 19

[React] vite로 리액트 프로젝트 시작하기

1. vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. Esbuild를 사용하여 기존 JavaScript 기반 도구에서 나타나는 느린 성능 적용 및 서버 가동의 문제점을 해결했다.  2. create react app(CRA)과의 차이점?가장 궁금했던 부분이다. 처음 설치했을 때 나타나는 웹페이지 기본창만 다르고 기능들을 똑같은 거 같은데 왜 vite가 권장되는지 둘 사이에 차이점이 있는지 궁금했다.  CRA는 Webpack이라는 모듈 번들러를 사용하는데 라이브러리를 많이 설치하고 코드가 길어지면 느려진다고 한다. 그걸 해결하기 위해 vite는 Go 언어로 작성되고 속독 빠른 빌드툴인 Esbiuld를 기반으로 한다. 3. 사용방법사용하기 전에 Node.js가 설치..

React 2024.11.02

[싸피 회고] 특화 프로젝트 3 - FCM(Firebase Cloud Messaging)

내가 ddong... 이 된 FCM. 알람은 우리 앱의 주요 기능 중 하나였고 알람 기능을 개발하기 위해  FCM을 사용했다. 올해 FCM 사용법이 바뀌어서 정보 찾는 게 어려웠다. 혼자 할 수 있는 게 아닌데 혼자 하겠다고 끙끙대서 날린 시간도 있다. 반성 반성 또 반성. 나 진짜 소통 잘 못하는구나를 느껴 아주 조금 우울했었지만 백엔드 팀원과 합심해서 기능 구현을 성공해 행복했다.  FCM을 사용하기로 결정하고 내 디바이스 토큰을 받고 내 디바이스와 FCM 서버를 연결했을 때 내가 이해한 작동 원리를 이랬다. FCM에서 알람 타이틀 및 내용, 시간을 정한다.FCM 서버에서 내 디바이스로 알람을 보낸다. 그럼 내 디바이스에서 알람 내용이랑 시간을 설정하면 되겠네?? 라는 생각이 들었다.그래서 내가 생각..

project/ssafy 2024.11.02

[싸피 회고] 특화 프로젝트 2 - 리덕스(Redux)

1차 때 저장소를 안 쓰고 props로 다 넘겼었는데 후회되는 일 중 하나였다. 처음에는 userName 같은 간단한 것들 1, 2개만 넘겨서 가벼운 마음으로 props를 썼는데 개발을 진행하면서 다른 컴포넌트 사이 간에 넘겨야 할 요소가 점점 많아졌다. 자식 컴포넌트A - 부모 컴포넌트 - 자식 컴포넌트B(C의 부모 컴포넌트) - 자식 컴포넌트C 이런 구조에서 A -> C로 데이터를 전달해야 했을 때 정말 난감하고 멘붕이었다. 이동하는 컴포넌트가 많으니까 성능은 점점 구려지는데 불필요하게 코드가 길어질 수밖에 없었다. 그리고 userName도 여러 컴포넌트에서 많이 써서 부모에서 자식 컴포넌트로 전달할 수 있어도 저장소에 저장하자고 생각했다. 그래서 2차 프로젝트를 할 때 저장소를 꼭 쓰고 싶었다.  ..

project/ssafy 2024.11.02

[싸피 회고] 특화 프로젝트 1 - 리액트 네이티브 네비게이션

리액트 네이티브를 쓰면서 제일 처음 리액트와 차이점을 느낀 부분은 리액트 네비게이션을 쓰는 것이었다. 리액트에서는 url과 url 이름을 이용해서 필요한 페이지로 링크를 타고 이동하게 했는데 앱에서는 링크의 개념이 없어 다른 방법으로 이동해야 했다.   리액트 네이티브에서는 React Navigation을 이용해서 페이지를 이동한다. 리액트 네비게이션은 NavigationContainer를 이용해 Screen name과 component를 지정할 수 있다. 이를 통해 생성된 모든 경로 구성은 내비게이터에 props로 지정된다.  어떤 정보를 저장소에 저장하고 필요할 때 꺼내 쓴다는 게 힘들었다. A 페이지에서 B 저장소에 저장하고 C 페이지에서 B 저장소에서 꺼내 쓰는 건 알겠어. 근데 코드가 너무 복잡..

project/ssafy 2024.11.02

자스로 반복문 쓰는 걸 까먹었다! DP 문제로 공부해보자

자스로 백준 문제를 풀려고 했는데 DP 문제를 추천받았다. 피보나치 수를 이해하는 브론즈 2의 간단한 문제다. 근데 1, 2를 입력받았을 때 상황을 빼고 코드를 짜서 한 번 NameError가 남 헿 그리고 자스로 리스트 다루는 법이랑 반복문 쓰는 방법을 까먹었다. 파이썬에서 반복문 쓰는 것처럼 썼는데 전혀 아니었다. 이번 기회에 안 헷갈리게 확실히 정리해야겠다. 자스로 백준 문제 풀 때 특징은입력 예제를 텍스트 파일로 저장하기그 파일에서 입력 예제 불러오기이다. VSCode로 문제를 풀 때와 백준으로 문제 풀 때 예제 입력 방법이 다른데 각 상황에 따라 입력 코드를 주석처리해야 한다. 귀찮고 까먹을 것 같아 인터넷을 이리저리 찾아보니 삼항 연산자로 입력을 받으면 될 것 같았다.  근데 파일 경로를 왜 ..

언어/JavaScript 2024.11.02