댓글에 궁금해하는 ’흑마술‘ 아마 가상인풋 방식 사용했을 듯 싶네요. 인풋 위치가 상단에 있으면 뷰포트를 밀어내지 않는 걸 활용하는 건데요. 사용자 눈에 보이지 않는 실제 인풋을 뷰포트 상단에 배치하고, 사용자에게 보여지고 조작할 수 있는 인풋은 단순히 숨겨놓은 인풋을 조작하는 용도로 구현하면 됩니다
안녕하세요. 김태희 개발자님. 저는 취미로 개발을 하고 있는데 우선 영상 너무 잘봤습니다. ^^. 코딩을 시작한지 얼마 안된 40대 코린입니다. 이 글을 보실지는 모르겠지만 궁금한게 있어서 댓글남깁니다. Next Js 로 메타의 threads 서비스를 흉내내고 있습니다. 영상 중간에 Next Js 는 Vercel 친화적이라고 하셨는데 저도 그렇게 느끼고 배포도 Vercel을 통해서 진행했습니다. 사실 초보자입장에서 접근성이 제일 좋았던 거 같습니다. 혹시 Next JS 가 배제된 사유를 좀더 알 수 있을까요. 그리고 제가 테스트 배포중인 웹뷰는 포스팅 글쓰기나 Image 업로드는 uploadthing 을 사용하고 있습니다. 포스팅시 업로드 지연이 엄청 딜레이가 걸리지는 않는데 좀 거슬리는 정도에요. 예를들어 이미지 제외하고 단순 텍스트만 포스팅했을때 완전 다이렉트로 업로드 되길 원하는데 대략 2-3초 정도 걸립니다. 혹시 포스팅 속도를 높이는 팁같은게 있을까요. 마지막 질문입니다. 당근 동네생활 들어가면 스크롤해서 화면을 내릴때 거의 딜레이 없이 스크롤이 계속 내려가더라구요. 이렇게 딜레이 없이 스크롤을 내릴려면 렌더링할때 어떤 팁이 있을지 조언 좀 여쭙고 싶습니다. 아 그리고 웹뷰도 expo를 사용하면 안드로이드와 ios에서도 앱처럼 사용할 수 있다는데 혹시 속도나 성능면에서 차이가 있을지도 궁금한데 조언 좀 해주실 수 있을까요. 초면에 실례가 많았습니다. 혼자 취미로 하다보니 어디 물어볼데도 없고 혼자 주절거려봤습니다. 영상 잘봤습니다. 감사합니다.
개인적으로 파악된 내용을기반으로 답변드립니다. 1. nextjs가 배제된 사유 nextjs가 배제된 사유는 영상에서도 말씀하시지만 처음ssr을 적용하기때문도 있다고 했는데 이런관점에서는 보통 새로운 프레임워크 도입할때 모든 사람들이 해당 내용을 학습하고 적용하는것도 문제중하나고 많은 실패와 연구를 거쳐서 적용하는게 일반적인데 해당 시기에 그럴만한 여유가 없었을수도 있던것 같습니다. 그리고 nextjs가 좀 최근 몇년간 대격변패치를 좀 자주해서 적용시점이 버전12~13언저리쯤이라면 좀 불안했었을것 같아요. 또하나의 이유는 회사별로 각자의 고유한 관습과 특정 문제를 해결해기위한 방식이 있는데 이를 nextjs에 녹이기에 좀 문제가 있었을수도있습니다. 기본적으로 nextjs는 프레임워크이기때문에 자신의 고유한 규칙안에서 작업이 이루어지는것을 강제할때가 있는데 이와중에 nextjs에서는 핸들링이 안되는 작업이 있었을수도있습니다. 이러한 이유때문에 저같은경우도 nodejs로 express를 올린다음 그위에 nextjs를 올리고 그위에 graphql같은 서버도 올리는형식으로 커스텀해서 사용하며 트랜스파일링또한 nodejs서버따로 nextjs서버따로 진행하여 후처리로 조합하는 형태로 실서버를 운영하기때문에 이와 비슷한 내용이 아닐까싶어요. 2. image 업로드시 업로드되는 속도를 높이는 팁. 이 질문은 개인적으로는 고려해야할 사항이 너무 많아서 잘못된 질문같습니다. 결국 클라이언트에서 각종 서비스 서버까지데이터 전송 및 요청의 과정에서 얼마나 지연을 줄이거나 최적화를 하냐의 관점입니다. 그 과정에서 어떻게 타협하여 무엇을 생략해도 되고 안되는지는 서비스의 상황에 따라 너무나 많아서 좀더 본인의 상황을 자세히 설명해주시면 다른분들이 답변을 더 잘해주실것이라 생각됩니다. 그래도 따라서 영상에서 벗어나지 않는 내용을 기반으로 말씀하신 uploadthing이 "uploadthing.com" 이 플랫폼을 이용하시는것이라면 당장 생각나는것중에 가장 간단한것은 aws s3중 가장 리전이 가까운것을 이용하던가 업로드하는 국가또는 지역과 가장 가까운곳에 스토리지 서버를 운영하는것과 업로드시 데이터를 압축또는 전송에 최적화된 폼,셋을 찾아서 규격화하여 업로드하는것이 지금보다 더 빠른 업로드가 가능하지 않을까 생각됩니다. 이는 운영 및 배포와 관련된 도메인지식이 꽤나 필요해서 질문의 상황으로 봤을때 직접 여러 환경에 배포 해보시면서 실험을 하며 맞춰가보는것이 제일 최선일것같습니다. 여기서는 굉장히 간략하게 설명하고있지만 실제로는 시장평가를 받은 서비스의 경우에는 서버에도 한개의 서버에서 모든것을 핸들링하지않고 메일을 처리하는 서버, DB를 처리하는서버, 캐싱하는 서버등 각각 세부적으로 나누어서 관리하는것이 일반적인 관행입니다. (시장평가를 받기전 방법은 다름) 이곳에서 굉장히 생략된 방식의 흐름은 (클라이언트 => CDN => 릴레이서버(있을수도있고 없을수도 있고 순서가 이곳이 아닐수도있음) => 웹서버 => 각종 서비스 서버) 이런식인것 같습니다. 3. expo를 이용하여 안드로이드와 ios를 동시에 개발한건에 관하여 말씀하신 내용은 크로스플랫폼과 하이브리드 앱개발에대한 내용이 동시에 들어가 있는 내용인데요. 지금은 잘 모르겠으나 1년쯤전에 expo를 접했을때는 간단한 내용들을 개발하기엔 굉장히 쾌적했지만 조금만 커스텀하게 제어하는 상황이 발생하는경우에는 핸들링하지 못해서 결국 react native를 쓰는것보다 난이도가 더 올라가는 상황이 발생했던것으로 기억합니다. 저는 최근 다시 flutter를 이용하여 동일한 개념으로 접근하여 개발하고있지만 expo는 실제로 의미있는 서비스를 개발할때는 추천하지 않습니다. 지금도 그런상황인지는 파악이 안돼서 확실하게 답변은 못드리겠으나 1년사이에 그렇게 많이 달라지지 않았을 것 같습니다. 그리고 속도는 당연히 네이티브보다 느릴수 밖에 없는이유가 개념자체가 크로스플랫폼은 한번의 개발로 안드로이드와 ios를 둘다 대응하고싶어서 나온 개념이기도 하기때문에 최적화적인 이슈가 생길수밖에 없습니다. 네이티브를 사용하며 얻는 이점은 사용하는 기기의 os친화적인 언어를 이용하여 직접 개발하기때문에 한번 개발하고 빌드된 파일은 별도의 번역이 필요없지만. 크로스플랫폼은 빌드된 파일이라고 하더라도 해당 파일을 항상 번역하는 기능이 필요한 상태입니다. 따라서 이런 요인들로 크로스플랫폼쪽 개발 즉 ,여기서는 말씀하신 expo가 더 느릴 수 밖에없습니다. 하지만 개발하고자 하는 내용이 매우 단순하고 간결하다면 이러한 내용은 무시하시고 개발을 진행하셔도 됩니다. 당근테크의 개발자분들께서 답변을해주시길 원하셨을텐데 뭔 지나가던 웹개발자가 답변을드려 좀 죄송스럽기도 합니다. 정확하지 않고 모호한 내용들 또한 죄송하며 다른 고수분들께서 추가적인 답변을 보다 자세히 해주시지 않을까 기대합니다. 건승하세요.!
@ 상세한 답변 정말 감사드립니다. 이렇게 장문의 글을 남겨주시니 몸둘바를 모르겠습니다. 독학으로 여기저기 헤매다가 한줄기 빛을 얻은거 같습니다. 코드 최적화 및 서버 리전(유료결제) 변경으로 속도는 어느 정도 타협했고 말씀해주신 서버 배분에 대해서도 헤딩?을 해보려 합니다. 다시 한번 시간 내주셔서 감사드립니다. 꾸벅
![[라디오스타] 트럼프 당선이 한국에 미치는 영향?💲오바마 인터뷰 한 정치 전문가 김지윤이 쏙쏙 짚어드림🤓ㅣ#김지윤 MBC241127방송](http://i.ytimg.com/vi/BXM99qP2lRs/mqdefault.jpg)
![🐰MZ가 벌써 30세? [잘파세대 소비 트렌드 전망] | 온러닝, 독서, 칼리스데닉스, 키링 | MMM @MickeyPedia](/img/1.gif)
댓글에 궁금해하는 ’흑마술‘ 아마 가상인풋 방식 사용했을 듯 싶네요. 인풋 위치가 상단에 있으면 뷰포트를 밀어내지 않는 걸 활용하는 건데요. 사용자 눈에 보이지 않는 실제 인풋을 뷰포트 상단에 배치하고, 사용자에게 보여지고 조작할 수 있는 인풋은 단순히 숨겨놓은 인풋을 조작하는 용도로 구현하면 됩니다
생생한 이슈와 해결 에필로그까지 너무 깔끔한 내용 잘봤습니다! 😮
발표 너무 잘 들었어요.
Nextjs가 Vercel이랑 어떤 부분에서 강결합이 있는지 궁금해요!
Nextjs의 특정 기능을 쓰려면 Vercel을 무조건 써야하나요?
평소 Nextjs를 자연스레 사용하고 있어서 궁금했어요!
좋은 정보 감사합니다.
진짜 좋은 정보 🎉
개인적으로 당근을 모티브 삼아 학교의 공유장터를 만들어서 운영중입니다
진짜.. 앞으로 겪을 어려운 과정을 미리 다 알려주셨네요
수학익힘책 답지보고 푸는 느낌이랄까..
감사합니다
Remix랑 nextjs를 사용할 때 안맞는 부분이 어떤건지 궁금하네요 예시같은게 있나요?
영상 잘 봤습니다
iOS 키보드 문제를 해결하는 흑마법이 뭐죠..?
와드박고갑니다 저도 알려주십셔😢
혹시 그 흑마법이 뭔지 나왔나요? 전 왜 못본거같죠??
60hz 아이폰(14pro)에서는
버벅거림과 애니메이션등이 너무
웹뷰같아서 "뭐야 당근 웹뷰쓰나...?"
하고 찾다가 이 영상보러 왔네요. ㅋㅋ..
안녕하세요. 김태희 개발자님. 저는 취미로 개발을 하고 있는데 우선 영상 너무 잘봤습니다. ^^.
코딩을 시작한지 얼마 안된 40대 코린입니다. 이 글을 보실지는 모르겠지만 궁금한게 있어서 댓글남깁니다. Next Js 로 메타의 threads 서비스를 흉내내고 있습니다. 영상 중간에 Next Js 는 Vercel 친화적이라고 하셨는데 저도 그렇게 느끼고 배포도 Vercel을 통해서 진행했습니다. 사실 초보자입장에서 접근성이 제일 좋았던 거 같습니다.
혹시 Next JS 가 배제된 사유를 좀더 알 수 있을까요.
그리고 제가 테스트 배포중인 웹뷰는 포스팅 글쓰기나 Image 업로드는 uploadthing 을 사용하고 있습니다. 포스팅시 업로드 지연이 엄청 딜레이가 걸리지는 않는데 좀 거슬리는 정도에요.
예를들어 이미지 제외하고 단순 텍스트만 포스팅했을때 완전 다이렉트로 업로드 되길 원하는데 대략 2-3초 정도 걸립니다. 혹시 포스팅 속도를 높이는 팁같은게 있을까요.
마지막 질문입니다. 당근 동네생활 들어가면 스크롤해서 화면을 내릴때 거의 딜레이 없이 스크롤이 계속 내려가더라구요. 이렇게 딜레이 없이 스크롤을 내릴려면 렌더링할때 어떤 팁이 있을지 조언 좀 여쭙고 싶습니다.
아 그리고 웹뷰도 expo를 사용하면 안드로이드와 ios에서도 앱처럼 사용할 수 있다는데 혹시 속도나 성능면에서 차이가 있을지도 궁금한데 조언 좀 해주실 수 있을까요.
초면에 실례가 많았습니다. 혼자 취미로 하다보니 어디 물어볼데도 없고 혼자 주절거려봤습니다. 영상 잘봤습니다. 감사합니다.
개인적으로 파악된 내용을기반으로 답변드립니다.
1. nextjs가 배제된 사유
nextjs가 배제된 사유는 영상에서도 말씀하시지만 처음ssr을 적용하기때문도 있다고 했는데 이런관점에서는
보통 새로운 프레임워크 도입할때 모든 사람들이 해당 내용을 학습하고 적용하는것도 문제중하나고
많은 실패와 연구를 거쳐서 적용하는게 일반적인데 해당 시기에 그럴만한 여유가 없었을수도 있던것 같습니다.
그리고 nextjs가 좀 최근 몇년간 대격변패치를 좀 자주해서 적용시점이 버전12~13언저리쯤이라면 좀 불안했었을것 같아요.
또하나의 이유는 회사별로 각자의 고유한 관습과 특정 문제를 해결해기위한 방식이 있는데 이를 nextjs에 녹이기에 좀 문제가 있었을수도있습니다.
기본적으로 nextjs는 프레임워크이기때문에 자신의 고유한 규칙안에서 작업이 이루어지는것을 강제할때가 있는데 이와중에 nextjs에서는 핸들링이 안되는 작업이 있었을수도있습니다.
이러한 이유때문에 저같은경우도 nodejs로 express를 올린다음 그위에 nextjs를 올리고 그위에 graphql같은 서버도 올리는형식으로 커스텀해서 사용하며
트랜스파일링또한 nodejs서버따로 nextjs서버따로 진행하여 후처리로 조합하는 형태로 실서버를 운영하기때문에 이와 비슷한 내용이 아닐까싶어요.
2. image 업로드시 업로드되는 속도를 높이는 팁.
이 질문은 개인적으로는 고려해야할 사항이 너무 많아서 잘못된 질문같습니다.
결국 클라이언트에서 각종 서비스 서버까지데이터 전송 및 요청의 과정에서 얼마나 지연을 줄이거나 최적화를 하냐의 관점입니다.
그 과정에서 어떻게 타협하여 무엇을 생략해도 되고 안되는지는 서비스의 상황에 따라 너무나 많아서 좀더 본인의 상황을 자세히 설명해주시면 다른분들이 답변을 더 잘해주실것이라 생각됩니다.
그래도 따라서 영상에서 벗어나지 않는 내용을 기반으로 말씀하신 uploadthing이 "uploadthing.com" 이 플랫폼을 이용하시는것이라면
당장 생각나는것중에 가장 간단한것은 aws s3중 가장 리전이 가까운것을 이용하던가
업로드하는 국가또는 지역과 가장 가까운곳에 스토리지 서버를 운영하는것과 업로드시
데이터를 압축또는 전송에 최적화된 폼,셋을 찾아서 규격화하여 업로드하는것이 지금보다 더 빠른 업로드가 가능하지 않을까 생각됩니다.
이는 운영 및 배포와 관련된 도메인지식이 꽤나 필요해서 질문의 상황으로 봤을때 직접 여러 환경에 배포 해보시면서 실험을 하며 맞춰가보는것이 제일 최선일것같습니다.
여기서는 굉장히 간략하게 설명하고있지만 실제로는 시장평가를 받은 서비스의 경우에는 서버에도 한개의 서버에서 모든것을 핸들링하지않고 메일을 처리하는 서버, DB를 처리하는서버, 캐싱하는 서버등 각각 세부적으로 나누어서 관리하는것이 일반적인 관행입니다.
(시장평가를 받기전 방법은 다름)
이곳에서 굉장히 생략된 방식의 흐름은 (클라이언트 => CDN => 릴레이서버(있을수도있고 없을수도 있고 순서가 이곳이 아닐수도있음) => 웹서버 => 각종 서비스 서버) 이런식인것 같습니다.
3. expo를 이용하여 안드로이드와 ios를 동시에 개발한건에 관하여
말씀하신 내용은 크로스플랫폼과 하이브리드 앱개발에대한 내용이 동시에 들어가 있는 내용인데요.
지금은 잘 모르겠으나 1년쯤전에 expo를 접했을때는 간단한 내용들을 개발하기엔 굉장히 쾌적했지만 조금만 커스텀하게 제어하는 상황이 발생하는경우에는 핸들링하지 못해서 결국 react native를 쓰는것보다 난이도가 더 올라가는 상황이 발생했던것으로 기억합니다. 저는 최근 다시 flutter를 이용하여 동일한 개념으로 접근하여 개발하고있지만 expo는 실제로 의미있는 서비스를 개발할때는 추천하지 않습니다. 지금도 그런상황인지는 파악이 안돼서 확실하게 답변은 못드리겠으나 1년사이에 그렇게 많이 달라지지 않았을 것 같습니다.
그리고 속도는 당연히 네이티브보다 느릴수 밖에 없는이유가 개념자체가 크로스플랫폼은 한번의 개발로 안드로이드와 ios를 둘다 대응하고싶어서 나온 개념이기도 하기때문에 최적화적인 이슈가 생길수밖에 없습니다.
네이티브를 사용하며 얻는 이점은 사용하는 기기의 os친화적인 언어를 이용하여 직접 개발하기때문에 한번 개발하고 빌드된 파일은 별도의 번역이 필요없지만.
크로스플랫폼은 빌드된 파일이라고 하더라도 해당 파일을 항상 번역하는 기능이 필요한 상태입니다. 따라서 이런 요인들로 크로스플랫폼쪽 개발 즉 ,여기서는 말씀하신 expo가 더 느릴 수 밖에없습니다.
하지만 개발하고자 하는 내용이 매우 단순하고 간결하다면 이러한 내용은 무시하시고 개발을 진행하셔도 됩니다.
당근테크의 개발자분들께서 답변을해주시길 원하셨을텐데 뭔 지나가던 웹개발자가 답변을드려 좀 죄송스럽기도 합니다.
정확하지 않고 모호한 내용들 또한 죄송하며 다른 고수분들께서 추가적인 답변을 보다 자세히 해주시지 않을까 기대합니다.
건승하세요.!
@ 상세한 답변 정말 감사드립니다. 이렇게 장문의 글을 남겨주시니 몸둘바를 모르겠습니다. 독학으로 여기저기 헤매다가 한줄기 빛을 얻은거 같습니다. 코드 최적화 및 서버 리전(유료결제) 변경으로 속도는 어느 정도 타협했고 말씀해주신 서버 배분에 대해서도 헤딩?을 해보려 합니다.
다시 한번 시간 내주셔서 감사드립니다. 꾸벅
웹뷰처리는 토스가 진짜 끝내줍니다.
당근팀도 그거를 참고해보시길.
flex gap 눈물
젠장 또 사파리야
영상 너무 한꺼번에 올리셔서 거의 테러급입니다. 구독 계속해두고 싶은데 다른 방법이 없었던 것일까요?
알림을 꺼 두시는 게...
의견 주셔서 감사합니다만... 이 채널 알림은 애초에 꺼져 있었어요. 만약 켜져 있었으면 제 모든 기기가 알림으로 떡칠되서 훨씬 더 테러 당했을 것 같네요. 그것만 문제가 아닙니다