본문 바로가기

프로그래밍/React4

window.location.href 를 이용한 메시지 앱 연동 1. 서론 웹, 앱이 둘다 되는 하이브리드 앱을 개발 중에 나의 앱과 메시지 앱을 연동하는 동시에 나의 앱에서 복사된 메시지를 메시지 앱에 붙여넣기를 해야하는 상황이 발생했다.=> 한마디로 버튼 클릭하면 자동으로 문자 전송 전 상황까지 자동으로 해 달라는 뜻. 2. 본론메시지 앱과 연동하기 위해서 검색해봤고, 아래와 같은 코드로 연동이 가능했다.// 나머지 코드window.location.href = `sms:${Phone}?body=${message}`;// 나머지 코드문제 발생 처음에는 Message를 바로 body 쪽에 넣어봤는데, 모든 줄바꿈과 공백이 사라진 채 메시지가 입력되는 문제가 발생!!=> window.location.href를 사용하여 SMS 메시지를 보내는 기능을 구현할 때, 줄바꿈과.. 2024. 9. 9.
[React] useEffect가 2번 호출되는 이유 0. 개요 리액트에 대한 공부를 진행하면서, useEffect에 대해서 공부 하던 중, 이상한 현상을 발견했다. useEffect를 선언하였고, 컴포넌트들이 최초로 마운트 될 때에만 실행되도록 선언하였고, 언마운트시 실행되게끔 클린업 함수도 넣어주었다. (아래 코드 참조) useEffect(() => { console.log("컴포넌트가 화면에 생성"); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); 그런데 실제로 yarn start로 실행하여 크롬개발자 모드로 로그를 확인하였더니, 아래와 같았다. 해당 컴포넌트가 리스트 안에 들어있어 3번 호출되는 건 맞다. 그러나 최초에 예상했던 결과는 아래 그림과 같이 "컴포넌트가 화면에 생성"이 3번 찍히는 .. 2023. 12. 30.
[React] 보일러 플레이트와 React 초기 폴더 설명 1. 보일러 플레이트란? 의미없이 반복되는 것들 또는 코드들. ex) JAVA의 getter/setter 또는 npx create-next-app을 입력했을 때 생성되는 초기 폴더 구조와 같이 항상 같은 구조로 사용하는 것들을 의미. (보일러 플레이트는 회사마다 다를 수 있다.) 2. React 초기 폴더가 의미하는 것들 myapp ├── node_modules // 라이브러리, 프레임워크 저장소 (npm install 받은거 저장됨) ├── pages // 프론트 엔드의 페이지 화면들 (js 파일이 들어간다) ├── public // 사진, 아이콘 등 ├── style // css 파일 ├── .gitignore // git에서 제외할 파일 ├── package-lock.json // npm insta.. 2023. 9. 24.
[React] node.js, npm, yarn의 이해 1. node.js 일반적으로 Python 또는 JAVA 또는 C#으로 브라우저로 실행되는 웹앱을 만들려고 하면, 무조건 JavaScript을 알아야 한다. 왜냐하면! 브라우저에서 실행될 수 있는 것들은 HTML, CSS, JavaScript이기 때문이다. HTML이 form, CSS가 스타일, JavaScript가 동작을 담당한다. 웹개발자로써 Python 또는 JAVA, C#을 다뤄보지 않은 개발자들은 많지만, JavaScript를 다뤄보지 않은 개발자는 드물다. 그렇기 때문에 이 JavaScript라는 언어를 가지고, 브라우저 밖에서도 실행가능한 앱을 만들고 싶어하는 사람들이 생겼을 것이고, 이를 실현가능하게 해준 것이 node.js이다. 쉽게 생각하면 JavaScript로 작성된 로직들을 실행해주.. 2023. 9. 20.

티스토리툴바