position 질문 | 커리어리 현직자 Q&A

5달 전 · 황준상 님의 질문

iOS 웹앱 환경에서 헤더 고정 영역에 대한 질문입니다.

vue로 작업된 iOS 웹앱 환경에서 1. form에 focus하였을 때 form 요소가 정상적인 위치에서 보이지 않아 사용자가 재차 스크롤하여야 하는 문제점이 발생 -> 하여, focus 이벤트 리스너를 추가하여 해당요소의 위치에 맞게 스크롤 되도록 이벤트 추가 문제점 : 현재 상단 헤더 요소 (position: fixed) 그 하단에 탭메뉴 (position: sticky) 두개의 요소가 항상 페이지 상단에 고정되어 있음 근데 가상 키패드가 올라오면서 스크롤 이동이 발생하는 경우 상단 요소가 사라짐 가상 키패드가 올라오면서 발생하는 문제인 것 같은데....정확한 이유를 모르겠어서 문의 드립니다.

개발자

#css

#html

#퍼블리싱

답변 0

10달 전 · 백승훈 님의 새로운 답변

Next.js 사용 시 SyntaxError: Expected property name or '}' in JSON at position 61의 에러위치가 어딘지 어떻게 알수있나요?

"next-auth": "^5.0.0-beta.20" 사용 중인데 해당 에러를 검색해보니 JSON 형식의 문자열이 아니기 때문에 에러가 발생한 것이라고 하던데 에러가 일어난 코드의 위치를 정확히 말을 안해주니 어디서 어떻게 고쳐야할지 도통 모르겠습니다....ㅠㅠ 해당 에러를 야기하는 것으로 의심되는 파일의 코드와 에러메시지를 띄운 터미널을 캡처하여 첨부드립니다... 혹시 어디서 문제인지 힌트라도 주신다면 열심히 찾아 해결해보겠습니다!!!

개발자

#next-auth

#next.js

답변 1

일 년 전 · 짹 님의 새로운 답변

콜백함수부분에 대해 질문있습니다.

안녕하세요 현재 자바스크립트를 공부하고 있는 초보자입니다. 현재 위치를 보여주는 코드를 작성하면서 궁금한 점이 생겼습니다. const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation(); 이러한 코드가 있는데 제가 알기론 ()=>{} 콜백함수에 매개변수로 position이 있고 제일 마지막에 askForLocation() 함수 호출하는게 있는데 이 함수 호출부분에서 인자로 아무것도 전달되는것이 없어서 console.log(position)를 했을 때 undefined가 나올 것을 예상했는데 geolocation의 객체정보가 콘솔창에 나오더라구요. 그래서 매개변수로 전달 될 만한것이 없는데 어떻게 콘솔창에 객체정보가 나오는지 궁금합니다. 초보자 입장에서 정말 쉽게 설명해주시면 너무 감사드리겠습니다.

개발자

#함수

#콜백함수

#프론트엔드

#자바스크립트

답변 1

보충이 필요해요 1

일 년 전 · 프레드윰 님의 새로운 답변

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

개발자

#html-css-js

#웹디자인

#css

#html

#script

답변 2

일 년 전 · 이진국 님의 새로운 댓글

react-navigation navigate 파라미터 type

안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)

개발자

#react-native

#typescript

#navigation

답변 1

일 년 전 · 민 님의 질문

플러터 질문. Futuer 및 출

locate.dart를 만들어서 import 'package:geolocator/geolocator.dart'; class Locate{ Future<List<double>> location() async { List<double> m_l = []; // 위치 권한 요청 LocationPermission permission = await Geolocator.requestPermission(); // 현재 위치 가져오기 Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high); // 위치 정보 리스트에 추가 m_l.add(position.longitude); m_l.add(position.latitude); return m_l; // 위치 정보를 포함한 리스트 반환 } Future<List<double>> get_loc() async { // 위치 정보를 가져오기 List<double> location = await this.location(); // 수정된 부분 return location; // 위치 정보를 포함한 리스트 반환 } } 를 작성하였구요 main_screen.dart 라는 파일에서 함수를 생성해서 my_locate() async{ Locate locator = Locate(); // 위치 정보 가져오기 List<double> location = await locator.get_loc(); } @override Widget build(BuildContext context) { // 함수 실행은 //요 부분에서 return Scaffold( 이 부분 안에서 실행시킬려고 하는데 자꾸 오류가 걸리네요. 방법 알려주실 분 있나요?

개발자

#flutter

#dart

답변 0

보충이 필요해요 1

일 년 전 · 김태우 님의 답변 업데이트

카카오맵 api 사용 ㅠㅠㅠ

안녕하세요~!!!! 프로젝트를 만드는 와중에 궁금한게 있어서 질문드립니다 ㅠㅠ 페이지 3개로 구성된 조그만 웹사이트를 리액트를 사용하여 만들고 있습니다. 그런데 문제가 생겼습니다.... 페이지 A에서는 지도 api를 사용하지 않고 B에서만 사용을 하고싶은데 제가 index.html 파일에 지도를 그리는것과 지도에 표시할 마커인 2개의 script를 불러와서 페이지 A에서도 카카오맵이 불러와져 성능에 문제가 생기는 것을 알게 되었습니다. 그래서 첫 번째 사진처럼 지도를 그리는 script를 script에 담아 헤더에 넣고, 마커를 그리는 script를 makerscript에 담아 헤더에 넣었습니다. 결과는 지도만 그려지고 마커가 안 떠서 어덯게 하면 마커가 뜰지 궁금합니다 ㅜㅜ 도와주세요 ...!! 🥲🥲🥲 1-2 사진: Map.jsx 3 사진: 마커 positions을 불러오는 MarkPosition.jsx 4 사진: 마커를 표시하는 위치, 사진 등이 있는 EventMarker.jsx

개발자

#api

#react

답변 1

일 년 전 · 용용 님의 새로운 답변

프론드엔드 개발시 사용하면 좋은 꿀팁들을 전수받고 싶습니다!!

안녕하세요 올해 컴공 3학년 프론트 개발 시작한지 5개월된 감자입니다.. 다름이 아니라 프론트로 프로젝트를 진행하고 있는데 주로 훅이나 css적으로는 간단한 마진 position 등을 기반으로만 작성하고 있는데 이렇게 하는 것보다 더 효율적이고 좋은 꿀팁들이 있을 것 같아서 질문합니다. 감사합니다!

개발자

#react

#javascript

#css

#hook

답변 1

일 년 전 · 손호영 님의 질문 업데이트

닫힌 질문 | 문제가 뭔지 알려주세요

<!DOCTYPE html>> <html> <head> <title>Love 출석부 로그인</title> <style> h1{ position: absolute; left: 650px; } </style> <script>let name =document.getElementById("samename") alert(name.values+"님 환영합니다.") event.preventDefault();</script> </head> <body> <h1>로그인</h1> <form accept="API.py" method="post" onsubmit="keypress" method="get" action="Love2.html"> 이름:<input type="text" id="samename" size="30" value=""><br> </form> </body></html> 이름을 쓰고 엔터를 누르면 그 다음에 출석부 사이트에 가는데 문제는 엔터를 누르면 crbug/1173575, non-JS module files deprecated.라고 떠요

개발자

#javascript

#백앤드

#html

#css

답변 0

보충이 필요해요 5

2년 전 · 익명 님의 질문

react-native에서 floating button구현

react-native에서 floating button을 구현하려는데요 floating button 영역 바깥을 클릭하면 button이 닫히는 형태를 구현하려고 합니다. react에서는 position fixed하고 left 0 top 0 width 100% height 100% 하면 배경영역이 설정이되는데 react-native는 어떻게설정하나요? touchableWithoutFeedback인가? 이걸 해봐도 floating button 컴포넌트 안에서의 영역만 잡더라고요 .. 자식 컴포넌트어서 스크린의 전체 영역을 잡는 방법 알려주세요!

개발자

#react-native

답변 0

2년 전 · 커리어리 AI 봇 님의 새로운 답변

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

개발자

#채팅

#웹소켓

#채팅기능

답변 2

2년 전 · 이영준 님의 새로운 답변

overflow: hidden > position: fixed 가 iOS 에서 적용되지 않고 있습니다

부모 - overflow: hidden 자식 - position: fixed 이렇게 fixed해서 부모 overflow: hidden을 무시를 하려고 했는데 ios에서만 안먹히는데 혹시 방법 아시는 분 계신가요?

개발자

#css

#ios

#overflow

#position

답변 2

2년 전 · 정완 님의 새로운 댓글

리액트에서 사이드 메뉴 구성 시 메뉴 하단 쪽 짤리는 현상

안녕하세요. Front 새내기입니다 ㅎㅎ React.js 와 Chakra-ui 로 Google Vertex AI 클론코딩 해보고 있는데요, 사이드 메뉴 구성 시 사진과 같이 짤리는 현상이 발생하네요.. 문제가 되는 부분이 <Sidebar /> 컴포넌트인데.. <Header />, <SubHeader />, <Sidebar /> 세 컴포넌트 모두 position을 fixed 로 설정했고. height, width 속성 전부 100% 로 설정했습니다. 영향 받을만한 상위 컴포넌트가 없는 상태라서 왜 이렇게 짤리는 현상이 생기는지 이유를 잘 모르겠네요 ㅠ Chat-GPT 답변처럼 뷰포인트로 설정하면 어느정도 문제가 해결이 되긴 되는데.. 화면 크기별로 뷰포인트를 따로 설정해줘야하고 화면 하단과 깔끔하게 맞아 떨어지지가 않더라구요. 혹시 다른 방법이 있을까요??

개발자

#react

#chakra-ui

#frontend

#typescript

답변 1

추천해요 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

React Native FlatList 스크롤바만 z-index가 가능할까요??

현재 React Native로 개인 프로젝트 구현중에 특정 영역을 Scroll Y위치에 맞춰서 position absolute를 띄워 z-index를 높여 보여주게 만들었으나 FlatList scrollbar까지 가려서 UX상 좋지 않은 경험을 보여주어 이부분을 수정하기 위해 여러 서치를 하였으나 아직 방법을 찾지 못하였습니다.. 혹시 선배님들께서 관련하여 해결한 사례가 있는지 공유 부탁드립니다!

개발자

#react-native

#flatlist

#animated

답변 1

추천해요 1

보충이 필요해요 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

데이터 composition 위치에 대한 문의

안녕하세요. 백엔드 개발하던 중에 질문이 생겨서 올립니다. 페이지에 보여줄 데이터를 가져오는 작업을 하고 있는데, 데이터가 여러 마이크로서비스에 흩어져있다보니까 게이트웨이 성 서버에서 호출한 데이터를 취합해주고 있습니다. 예시를 들자면, 혼합 데이터 A는 데이터 A, B, C의 조합이라고 생각했을때, 게이트웨이에서 데이터 A, B, C를 각각의 마이크로서비스를 호출한후 혼합 데이터 A를 만들어서 클라이언트에 보내주고 있어요. 근데 이게 맞는 방법인지는 잘모르겠습니다. 보통 이렇게 DB 레벨에서 JOIN을 못 해줄경우, 데이터 취합은 어떻게 할 수 있나요? 제가 생각했던 다른 방식은 데이터 A, B, C를 각각 클라이언트에서 마이크로서비스로 요청을 해서 가져오는 것 정도였습니다. 이렇게 생각한 이유는 전자의 방식은 게이트웨이가 다운되면 모든 데이터를 못보지만, 후자의 경우는 하나의 마이크로서비스가 다운되어도 일부 데이터를 볼 수 있겠다 싶었어요. ex. 데이터 A의 마이크로서비스가 다운되어도, 데이터 B, C는 불러올 수 있음.

개발자

#backend

답변 3

2년 전 · 김지태 님의 새로운 답변

vue3 화면 진입 시 api호출

vue3 composition API사용하여 개인프로젝트 만들어보고 있는데 현재는 버튼 눌렀을때 개발자도구-네트워크에 API호출되는것을 확인할수있습니다. 화면 진입시 api호출하려면 어떻게해야하나요? <template> <h1>API에서 받아온 데이터</h1> <button @click="apiTest">API 호출</button> </template> <script setup lang="ts"> //API 호출 const apiTest = async () => { try{ const res: any = await ApiCert.get(API.url) ... } catch(err:any) { console.log('error', err) } } </script>

개발자

#vue3

#composition-api

#setup

답변 2

2년 전 · 김대현 님의 답변 업데이트

(js 초보 질문) scrollEventHandler() 함수 위에 scrollPositionY 변수를 0으로 초기화 시키는 이유가 궁금해요.

안녕하세요 JS 기초 관련 질문 드립니다! 질문) 아래 코드에서 왜 scrollEventHandler() 함수 위에 scrollPositionY 값을 0으로 초기화 시키는지 이유가 궁금합니다.

개발자

#javascript

답변 1

2년 전 · 김민혁 (Noel) 님의 새로운 답변

리액트에서 컴포넌트 직접 접근 후 값 수정하기

안녕하세요! 최근에 리액트를 접해서 연습삼아 리액트로 미니 게임을 만들고 있습니다. 컴포넌트를 클릭하면 해당 컴포넌트의 위치가 랜덤하게 바뀌는 걸 구현 하고 싶은데 방법을 모르겠습니다.(하늘에서 별이 랜덤으로 반짝 반짝 하듯이) useRef를 통해 DOM에 직접 접근 하는 것 까지는 알았는데 값 수정을 못해서요 ㅠㅠ 예를들어 ,바닐라 js에서는 const random = () => Math.floor(Math.random()*99+1) let x =random() let y = random() document.Queryselector().style = “position : absolute; top: “ + x.toString()+”%, left :”+ y.toString()+”%”; 이런 식으로 생각했는데 리액트에서는 어떻게 하면 좋을까요..? 구글링만 하루종일 했는데 해결법을 못 찾아 질문 남깁니다 ..!

개발자

#react-hooks

#react

#javascript

답변 2

추천해요 2

3년 전 · 엄홍재 님의 새로운 답변

react-native의 KeyboardAvoidingView

react-native를 이용해서 앱을 만들고 있는데 글을 작성할 때 keyboard가 TextInput을 가려버려서 너무 불편합니다. KeyboardAvoidingView라는 것을 알게 되었는데요. behavior라는 props가 있는데 공식문서에도 해당 설명이 잘 나와있지 않아요. 'height', 'position', 'padding'이 각각 어떻게 동작하는지 아시는 분 계신가요???

개발자

#react-native

답변 1