프론트엔드 12

[React/CSS-in-JS] Styled-Components를 사용하여 고정 푸터(버튼)와 스크롤 가능한 콘텐츠 구현하기

이거는 사실 css 카테고리인데... 그냥 여기에 씀 문제 상황웹앱 st로 세로가 긴 화면을 개발하는 중에 화면 안의 컴포넌트들이 많아서 화면의 세로 길이를 넘어갈 때 스크롤이 되지 않거나 하단에 고정해둔 다음으로 넘어가는 버튼에 가려지는 문제가 생겼다.이게 내가 개발중인 화면이다.보통의 비율의 핸드폰에서는 평범한 화면이겠지만이제 se같은 극단적인 화면 비율의 상황에서는 이런 상황이 발생한다. 문제 원인다음 버튼을 bottom 스타일을 적용해서 화면의 하단에 footer마냥 위치해둬서 생기는 문제이다.다음 버튼도 그냥 화면의 컴포넌트의 가장 밑에 위치해두고 scroll 여부를 허용하면 금방 해결 될 문제겠지만 나는 다음 버튼을 footer처럼 모든 스크린의 바닥에 위치하게 하고 싶었다. 이유 : 그게 더..

React 2024.07.27

[React/리액트] ThemeProvider로 전역으로 디자인 시스템 설정하기

프론트엔드 프로젝트에서 styled-components와 TypeScript로 디자인 시스템 설정하기 프로젝트를 시작할 때 먼저 설정하면 편한 것들이 있다.prettier, lint 설정이라던지 절대경로 설정이라던지... 그 중 하나인 디자인 시스템 설정을 해보자!프론트로 개발을 할 때 피그마 보고 눈대중으로 값을 지정해서 개발을 하면 절대 안 된다 ㅎ 디자이너가 피그마에서 정해진 색상의 종류, 폰트의 종류를 고려하여 디자인 해야한다! 우리 프로젝트는 밑에 사진처럼 디자인 가이드가 나와있었다. 많이 쓰이는 색상이나 폰트, 크기, 행간을 설정해두고 디자인을 하는 경우거나 자주 사용하는 디자인이 있을 경우 이를 전역에 지정해두고 쓰는 것이 편하다!  이걸 지정해두지 않으면 모든 컴포넌트마다 font-size..

React 2024.07.20

[React-Native] 리액트 네이티브 지도 사용하기 / expo에서 지도 구현 / google map API key 추가하는 방법 / 빌드 후 구글 지도가 안보이는 문제

빌드 후 구글 지도가 안보이는 문제이 문제는 구글 맵 api 키를 환경 설정에 등록을 안했기 때문입니다!!!api 키 발급받아서 app.json에 추가해주면 빌드 후에도 정상적으로 지도가 뜹니다!! 밑에서 확인하세요구현하고 싶은 것서버에서 위도와 경도를 받아와서 해당 지역을 지도로 보여주는 기능을 구현하고 싶었다. 이런 느낌으로! 지도표시 + 해당 위치(1위) 마커 + 간단한 설명 + 1, 2, 3 순위 클릭 시 하단 지도에 위치 보여주기요 정도를 구현 할 예정이다.구현 할 것1. 지도 라이브러리 선택하기2. 서버로 위도 경도 받아오기3. 해당 위치 지도에 마커로 띄우기 사실 할 건 별로 없다! 다만 지도를 쓰기 위해 api키를 발급받고 설정하고 그런 귀찮은것 들이 존재할 뿐!!!구현 방법1. 지도 라이..

React-Native 2024.07.11

[JS] 한 페이지에서 많은 API 호출을 효율적으로 처리하는 방법 / Promise.all 사용하기

문제상황우리 서비스는 한 페이지에서 get 요청을 어마무시하게 많이 날리고 있다!후덜덜물론 받아오는 데이터들이 전부 간단한 string이지만 요청을 한 번에 처리하기엔 서버에 무리가 갈 수도 있다고 판단하였다.그리고 이런 대량의 api의 get 요청은 어떻게 진행시키면 좋은지 궁금해져서 어떻게 처리를 하나 찾아보았다.해결 방법get요청을 병렬적으로 실행한다!병렬적으로 서버 요청 보내는 함수 만들기: Promise.all을 사용하여 여러 API 요청을 병렬적으로 실행한다.사용자에겐 로딩중을 띄워서 조금 기다리게 한 후 그 사이에 순차적으로, get 요청을 병렬적으로 실행하여 데이터를 받아오는 방법을 사용하면 된당 Promise.allPromise.all은 여러 개의 프로미스를 병렬로 실행할 수 있게 해주는..

자바스크립트 2024.07.09

[React-Native] 현재 위치 불러오기 / Expo Location 사용하기

구현하고 싶은 것과 현재 상황사진처럼 장소 추가하기에 현재 위치를 자동으로 불러오게 하고싶다!!!  Expo Location으로 위치를 불러왔던 경험이 있어서 이번에도 Expo Location을 사용해보기로 했다! RN은 공식문서가 굉장히 친절하고 좋으니까 공식 문서 잘 읽어보기~~ https://docs.expo.dev/versions/latest/sdk/location/#installation LocationA library that provides access to reading geolocation information, polling current location or subscribing location update events from the device.docs.expo.dev 구현 할 것..

React-Native 2024.07.09

이벤트 버블링&캡쳐링, 이벤트 전파

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com 이벤트 버블링과 캡처링이벤트 전파의 개념이벤트 전파: HTML 요소에서 이벤트가 발생했을 때 브라우저가 이벤트를 전달하는 방식.이벤트는 두 가지 방식으로 전파됨: 캡처링(Capturing)과 버블링(Bubbling).이벤트 전파 단계캡처링(Capturing): 이벤트가 최상위 요소(html)에서 시작하여 타겟 요소까지 내려감.버블링(Bubbling)..

자바스크립트 2024.07.08

this란 무엇인가?

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  자바스크립트의 this 키워드 이해하기this란 무엇인가?this는 자바스크립트에서 객체를 가리키는 키워드이다.⇒ 간단히 말해 this는 호출한 객체를 의미한다! 호출한 놈!!호출한 객체가 없으면 기본값은 전역 객체인 window이다.예외도 있다전역스코프에서 this는 window 객체 이다.화살표 함수(Arrow Function)에서 this가 ..

자바스크립트 2024.07.08

파일 효과적으로 가져오기 | script defer, async

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com HTML 파일에서 자바스크립트 파일을 효과적으로 가져오는 방법기본적인 자바스크립트 파일 가져오기HTML 파일 생성 (index.html)자바스크립트 파일 생성 (script.js)HTML 파일에서 브라우저에서 라이브 서버 실행하여 확인버튼 클릭 시 경고창 띄우기HTML 파일에 버튼 추가:Click me     2. 자바스크립트 파일에서 버튼에 이벤트..

자바스크립트 2024.07.08

BOM 이란?

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com   브라우저 객체 모델(BOM)이란 무엇인가?브라우저 객체 모델(BOM) 개요브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저를 객체화한 것이다.BOM은 자바스크립트로 브라우저를 제어하기 위해 사용된다.브라우저에서 제공하는 여러 기능들을 자바스크립트로 제어할 수 있다.주요 브라우저 객체Window 객체브라우저 창 자체..

자바스크립트 2024.07.08

DOM 이란?

지나친 이론 공부를 다시 해보겠다... 해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  돔(DOM)이란 무엇인가?자바스크립트의 탄생 배경자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다.HTML 요소를 추가, 제거, 변경하는 등의 작업을 위해 사용된다.HTML 파일을 자바스크립트로 제어하는 방법브라우저에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.ex) 크롬 : 블링크, 파이어폭스: 게..

자바스크립트 2024.07.08
728x90