되게 멋지시다..
야근 했어요
많이
ㅎ
근데 그건 제가 집중이 잘 돼서 한 자발적 야근이긴 하지만
사진
안녕하세요., 저 계속 혼자 고민하다가 이렇게 질문을 보내봅니다! 혹시 jest로 react, typescript 테스트코드 작성해보신분 계실까요?? 제가 렌더링 테스트를 해보려고 코드를 짰는데 자꾸 아래와 같은 에러가 뜹니다 ㅠㅠ 혹시 이유를 알 수 있을까요??
사진
전에 이방에 유데미 할인 기다리시던 분 계셨던 것 같은데.. 오늘부터 할인 하는군요??
유데미는 매일 할인하지않나용
할인률이 다르지 않나요
볼때마다 12000~18000사이던디
1.2 1.5. 1.7 그때그때 다르던데 지금이 최저가 할인이라서요 ~
start component 에 import react 하셨는지 보여주실수있을까요?!
신입 혹은 취준 개발자가 기술 블로그를 쓰는거에 대해서 어떻게 생각하시나요?? 어떤 시니어 개발자 분께서는 신입의 꾸준한 성실성에 대해서 볼 수 있어 긍정적으로 평가하는 방면 어떤 분께서는 신입 개발자의 잘못된 정보가 쌓이고 쌓여서 개발 문화에 악영향을 주고 있다고 판단 하시더라고요.. 저는 취준 개발자로서 자신의 성장에도 도움이 되어 블로그를 쓰려고 노력중인데 혹시나 잘못된 저의 정보가 악영향을 줄 수 있다고 하니 계속 써야하나 고민스럽습니다.
부정적으로 보시는 분도 블로그 쓰시는 초반에는 잘못된 정보가 담긴 글들 쓰셨을거예요 ㅋㅋㅋㅋㅋㅋ
할꺼면 제대로해야죠
대부분 긍정적으로 봅니다
ㅋㅋㅋㅋㅋ
애초에
블로그들 잘못된 정보엄청 많을걸요
근데 보통 그런데에 정리할 때 미칠 악영향까지 고려하기엔...
저도 최근에는 제 잘못된 정보가 남에게 피해를주진않을까 싶었는데,, 요즘은 신경안쓰고 쓰고있어요 ㅋㅋㅋㅋㅋ
아 다들 저와 비슷하게 생각하시는군요 ㅎㅎ….
모든면을 다 신경쓰면 내 성장은.. 언제?
약간 구더기 무서워서 장 못담구는 그런 느낌이 아닐까 생각했었거든요 ㅋㅋ
제가 간디는 아니잖아요
근데
빠르게 변하는 기술은
에이...나중에 더 공부해서 더 좋은글 쓰시면 좋져
어쩔수없죠
어렵게 생각하지마세요
Next.js에서 Link 안에 a 태그 안써도되는거
오늘첨알았습니다
워닝뱉지않나요?
12.2버전부터
안써도되는걸로 되었더라구요
다들 좋은 답변 감사합니다 ㅠㅠ
저는 제 성격 자체가 잘못된 정보를 전달하기가 싫어하는 성격이라 별도로 노션에 정리하고 있습니다
별도로 관리해서 링크를 달아두고 있어요!
아 import react 하지 않았아요..! 안쓰여서....!
일단 글로 남길 수 있다면 잘못된 정보인지 고려하지 않고 쓰는 게 항상 좋은 것 같아요! 대신 댓글을 열어서 다른 분들이 수정사항을 짚어줄 수 있게 하거나 나중에 스스로가 깨달았을 때(자신의 레거시 코드 갈아엎듯이...) 다시 예전 글을 새로 쓰면 괜찮을 것 같아요! 처음에 두려워하다가 시작도 못하는 경우가 많더라구욧
혹시 해결하시면서 참고한 레퍼런스 있으시면 공유해주실수있나요???!
일단 시도해보는것이 중요한거 같네요 ㅎㅎ 친절한 답변 감사합니다!!!
저는 후자보다는 전자가 훨씬 효과가 크다고 생각해요. 글을 하나만 보는 것도 아니고 요즘은 공식문서도 잘되어 있어서..잘 가려낼 수 있다고 생각해요. 블로그 글은 개인적인 생각들이나 고민들도 엿볼 수 있어서 도움이 되고 자극도 많이 받아서 저도 더 열심히 쓰려고 노력하고 있어요! 다만 헷갈리거나 조금 애매하면 더 찾아보고 글을 쓰는 노력도 필요한 것 같아요.
Z님이 나갔습니다.
개발자는 문서화도 잘해야한다고 생각합니다..
맞아요..메일이든 온보딩이든 기술문서든 보고든 개발자도 글쓰는 일이 많다고 생각해요.
은빈님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요. 클립보드 이미지 붙여넣기를 구현 중인데요 🥲 이미지 파일을 직접 복사하는 경우 (마우스 우클릭 후 복사 or 이미지파일 선택 후 cmd+C) 클립보드에 타입이 text/plain 또는 text/html로 들어가고 있습니다. 😭 이거 어떻게 이미지로 감지할 수 있을까요??
해결했습니다..! 이벤트 객체에서 클립보드에 접근해서 해결했어요!
https://codepen.io/ahw/pen/qEPRzW
아! 잘됐네요!! :)
힙합맨 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 힙합맨 제이지님~~ 반갑습니다 :)
안녕하세요!
어서오세요~ 프론트엔드에 대해 궁금한게 생기면 얼만든지 편하게 물어보세요. 아는 질문이 있다면 적극적으로 대답을 해보면서 함께 같이 성장하기를 바랍니다. 잘 부탁드려요~
김창균님이 나갔습니다.
import 추가하신걸로 해결되셨나용?!
없음님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
삭제된 메시지입니다.
안녕하세요 !
흑 아니유 ㅠ
없음님 안녕하세요!! 반갑습니다 :)
이곳은 프론트엔드에 대해 궁금한것들을 물어보고 아는 것들은 공유하면서 함꼐 성장하고자 하는 곳입니다. 궁금한게 있다면 얼마든지 편하게 글 남겨주세요 ㅎ
ㅠㅠ 왜 안될까요
네 고맙습니다 ! 이제 막 배우기 시작하는 단계라 잘 얻어가겠습니다 :3
여러분들은 함수 짜실때 뷰를 그리는 로직을 항상 따로 분리하시나요?? 급하게 개발할때는 상태나 데이터 수정하고 이런것들이랑 분리하는게 번거로워서 대충 같이 작성해두곤 하는데 나중에 수정을 잘 안하게되네요... ㅋㅋㅋㅋ
그럴려고 노력중입니다. 너무 귀찮을때에는 반드시 @FIXME: 이거 분리 해야함!! 이런식으로 주석을 달아놓거 정기적으로 @FIXME 제거하기 시간을 가져보려고 하고 있어요.... (라고 하기면 아직 무수히 많ㄴ은 @FIXME 들.. ㅋㅋ)
그거 제가 졸업하고 고치러 가겠슴다 ㅎㅎ
기다릴게요오오오오오~~~
혹시 신입 포트폴리오볼때 dapp을 들고가게 되면 면접자볼때 불이익이 있나요?
😂😂 요번에 좀 빠듯하게 개발하는 일정으로 프로젝트 하고있는데 무수한 악수..가 아닌 FIXME TODO의 항연이
dapp이 뭐에요?
디앱이요?
블록체인 베이스 앱인가용
블록체인활용한 웹사이트입니다
네
신입이여서 어떻게 지원해야할지 모르겠네요..
뭔가 했는데 굳이 불이익을 줄건 없지 않을까 싶긴 합니다 분야도 블록체인이고
아! 불이익이 있을만한 이유가 있을까요?
굳이 불이익이?
web3와 web2의 차이 때문에 걱정을 했는데
저라면 좋게볼거같아요 유망하다고 보이는 분야에 발을 담궈볼 줄 아는 사람이구나
공감합니다. 개발자에게 다양한 경험은 득이면 득이지 불이익을 받을 이유가 전혀없어요
괜한 걱정일까요...
그럼요! 안해본사람보다는 훨씬 더 나은 사람이죠 오히려 궁금해서 물어볼껄요?
이제 거기서 대답을 너무 못하면 불이익이 될 수 있죠 ㅋㅋㅋㅋ
불이익은 스스로는 해봤다 잘한다고 했는데 까봤더니 그러지 못하더라인거도
오오~ 맞아요 ㅋ
아
그렇군요
좋은 답변 정말 감사합니다
근데 진짜 해봤다 정도다 라고 솔직히 얘기하면 어쨌든 +요소입니다
프론트부분을 전부 맡아서 했다면 좋게 보일수 있나요?
네~
대단하신분들이 많군요..
컨트랙트쪽도 좀 건드리신 거예요 아니면 ethers 같은 거 써서 프론트쪽까지만 하신거예요?
저도 디앱 있어요!!
dapp이라서가 아니라 그냥 포트폴리오에 올릴 내용이니까 거를 부분 잘 거르고 자신 있는 부분 잘 골라서 올리셔야 하길 할 것 같긴 해요!
컨트랙트부분 제외하고 프론트만 담당했습니다
배포 하셨나요??
아뇨 아직 배포는 안했습니다
히룰룰님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 히룰룰님 반갑습니다 :)
안녕하세요!
어서오세요 :) 이곳은 프론트엔드에 대해 궁금한 것들이 있을때 언제든 물어보고 아는 것에 나오면 적극적으로 공유하면서 함께 성장하고자 하는 공간입니다. 편하게 글 남겨주세요~ 잘 부탁드립니다!
친절한 안내 감사합니다 :) 종종 고민 나누겠습니다!
감사합니다 :)
뷰와 로직을 나누실때 어떤 패턴을 주로 사용하시나요?
그래서 ..클린코드의 핵심은 리팩토링책의 결론이기도 한데, 2시간 코드 짜고 2시간 클린하게 정리해라 라는게 의미더라구요. 멀고도 험한길 … 알면서도 잘 안하게 되는
불 뿜는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
졸린 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
쑥스럽게 인사하는 프로도님이 나갔습니다.
루피님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 루피님 반갑습니다.
안녕하세요 ㅎㅎ 잘부탁드립니다
새벽에 오신 불 뿜는 튜브님 졸린 무지님도 반갑습니다.
네~~ 어서오세요! 이곳은 프론트엔드나 웹 개발을 하면서 궁금한 것들을 편하게 물어보고 내가 아는 것은 기꺼이 기여하고 공유하면서 더욱 더 내것으로 만드는 과정을 통해 함께 성장하고자 하는 공간입니다. 언제든 편하게 글 남겨주세요 :)
Z님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!
안녕하세요!
안녕하세요~~ 졸린무지님 Z님 반갑습니다~~ :)
사진
다들 출근 홧팅입니다~반갑습니다
사진과 같이 height 가 서로 다른 box 들을
어떻게 css 를 줘야 저렇게 배치가 가능할까요
게시물ㄹ ㅣ스트를 받아와서 순서대로 배치하고 있는데
저는 모든 박스들이 가장 제목이 긴 box의 height로 바뀌네요
인라인박스 버티컬얼라인탑 주면 대충 원하는 그림은 나올거같은데, 하이트가 각기 다르면 스크립트로 처리 하더라구요~
인라인블럭..!
일단 검색 키워드는 masonry layout 이라고 검색하시면 됩니다. 현재 html, css 만으로는 해당 스펙을 구현할수가 없구요. css에 grid에 해당 기능이 업데이트 될 예정인 상황입니다.
혹시 국비관련 질문 드려도 되나요??
여러가지 스크립트적인 해법들이 있는데 라이브러리를 가져다 쓰시거나 구현을 하실거라면 css grid와 grid-row: span 을 이용하는 방법을 추천드립니다. https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
유용태님 유용한정보 감사합니다
네~ 개발과 관련되어 있다면 물어보지 않고 그냥 편하게 선질문부터 하세요. ㅎ
저같으면 flex-direction을 colomn으로 두고 flex-wrap:wrap으로 줄바꿈처리할거같네요
아 그러면 글마다 크기가 다르니까 높이제한이 컴포넌트수를 컨트롤못하려나
그럴거같아요
아 저 이제 봤는데 레퍼런스 같은 건 없었습니다… 그냥 구글에 막노가다 형식으로 서치만 엄청 했어요
그나마 도움 된 것들이라 함은
현재 한달가량 독학으로 프론트엔드 공부를 했고요 프론트과정 국비를 선택할려고 하는데 마땅한 게 없네요 1.프론트엔드과정(리액트,뷰,제이쿼리)인데 디자인 공부가 좀 많이 있고요 2.풀스택(리액트,노드)로 구성된 과정이 있는데 아무래도 백엔드에 치중되어 있습니다. 어떤과정을 선택하는게 나을까요??
빨리 결정을 해야하는데 머리 아프네요ㅠㅠ
저라면 풀스택 과정을 선택할것같습니다!
혹시 이유를 알 수 있을까요???
https://heropy.blog/2019/02/28/blob/ https://curryyou.tistory.com/441 https://pks2974.medium.com/file-api-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-729fa6a3a0ba https://www.habonyphp.com/2019/03/js-api-filereader.html https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=horajjan&logNo=220463053828 많이 도움 받았던 자료들입니다! 도움 되시면 좋겠네요~
지금 프로그래머스 데브코스 프론트과정 신청받는데 이거 좋습니다
웅진씽크빅 인턴 연계 부트캠프도 있고요
저는 프론트엔드 과정 선택할 것 같습니다 풀스택 교육 들었었는데 강의 시작 초창기 즈음에 이건 아니다 싶어서 바로 강의 음소거 시키고 HTML/CSS/JS + React + TypeScript 공부만 했어요 그렇게 해서 학원 수업 하나도 안 듣고 3개월만에 취업했습니다,,,
둘다 별론데요..
한번 알아보겠습니다!
배우는 디자인, 백엔드 는 찍먹 수준일거같은데, 같은 찍먹을 했을경우 디자인 찍먹한 프엔 개발자보다, 백엔드 찍먹한 프엔 개발자가 더 효율적일거같아요!! 학원이 종료된이후에 혼자 프로젝트 만들때도 백엔드를 할줄알면 훨씬 도움될거같아요!
인정
확실히 제 생각도 둘 다 별로예요… 학원 가시는 것보다 책 몇 권 사서 혼자 마음가짐만 잘 가지고 공부하시면 학원 다니는 시간이 아까울 정도로 실력은 늘고 빨리 취업하실 수 있을 거예요
백엔드 찍먹이 아니라 프론트찍먹일거같은 느낌이라
저도 21살에 고졸이라는 치명적인 단점을 안고도 학원이 마음에 안 들어서 혼자 공부해서 취직이 됐는데 더 수월하실 거예요,,, 게다가 풀스택 교육 과정은 프론트엔드만 찍먹이 아니고 모든 걸 다 수박 겉핥기로 끝냅니다
ㄷㄷ 어린나이에 엄청나시네요
재능충이신듯
아닙니다 ㅋㅋㅋㅋㅋ 운이 좋았죠
아무튼 학원은 정말 깊이 잘 생각해 보세요,,,
과정 기간이 기나요?
독학은 어려울거 같아요ㅠ 틀리게 하는건지 맞게 하는건지 확신이 안서더라고요
둘다 5~6개월 과정입니다!
저도 완전히 독학만 하지는 않았어요 당연히 책의 도움 + 주변 프론트엔드 개발자 분들의 도움 + 강의의 도움 으로 취업했어요
차라리 국비부트캠프쪽으로 알아보세요
저는 풀스택 node.js express 관계형/비관계형 같이 6개월 과정 했었는데요 개인적으로 현업에서 백엔드 개발자와 협업할때 도움이 정말 많이됐어요
여기 프론트엔드 분들은 이미 넘쳐나게 많으시구 강의는 유튜브에 풀려 있는 강의도 많아용 충분히… 하실 수 있습니다
독학도 한번 고려해보겠습니다! 근데 수업중에 만약 도연님 처럼 아예 안듣고 다른건 공부해도 문제가 안생기나요??
문제 생기지만 저는 그때 든든한 전우 분들이 계셨어요… 학원 수업 초창기에 제가 스터디를 개설했었고 그때 친해진 분들께서 가끔 무조건 대답 해야 할 경우에는 급하게 전화해서 알려 주셨어요
흠 몇분이 비슷하게 말씀하시는거 보니 풀스택이 좀 더 낫다고 보는게 맞겠네요!
일단 디자인 vue react jquery다루는 과정은 진짜 도움안될가능성이..
근데 전 신입이 풀스택이라고 하면..
사실 목표가 완전히 프론트냐 백이냐로 정해진 게 아니라면 학원도 괜찮을 거라 생각은 합니다
너무 얕게만 아는게 아닌가 하는 생각이 들기는해서
차라리 하나에만 집중하는게 어떨까 하는 의견입니다
그니까요 저도 프론트를 확실하게 하는 상태에서 백엔드를 봐야지
프론트라면 물론 백엔드에대한 이해는 필요로해여
첨부터 풀스택과정은 비추임다
흠 다들 반반이시네요ㅠㅠ
제가 다녔던 학원 수료 날짜가 9월 말이라 간만에 학원 같이 다녔던 그 전우 분한테 얼마 전에 연락 드리니까 그 분도 어마무시하게 후회하시고 저랑 똑같이 강의 소리 끄고 자기 공부만 하는 길을 걷고 계시더라구요
헐 정말요??
반반이라기보단 둘다 별로라고 생각합니다..
그때 제 말 들었었어야 했다고 땅을 치고 후회를… ㅋㅋㅋ
사실 밤새가면서 국비 프론트과정을 봤더니 없더라고요ㅠ
그 분은 되돌릴 수 없지만 아직 시작하시기 전이니까 생각 충분히 하시면 될 거예요
네!
해당 국비교육에 팀프로젝트 관련 일정이 있나요?!
커리큘럼 첨부해주시면 대충 파악되긴하는데
프론트과정은 없었고요 풀스택은 오는 가서 알아볼려보요
첨부해 드릴께요 잠시만요!
사실 어차피 공부는 혼자하는거라 강의들으시고 많이 찾아보셔야 할거에요ㅋㅋㅋ
국비 퀄리티는 너무 기대하지 마세요
국비는 비추지만 가능하면 멘토가 있는것을 추천 드립니다 위에서 말씀하신대로 자기가 제대로 하고있는지 판별이 힘든 부분도 있고 적어도 멘토를 통해 기초 기반을 다지신 후에 독학하시는게 시간을 아끼실수 있는 방법입니다
@도연 님은 근데 제로베이스에서 리액트 타스까지 공부하고 포폴준비해서 취업하기까지 3개월만에 다 되신거에요??
저는 학원 나쁘게만 생각하지 않습니다!! 강의 내용은 불충분할수 있으나, 팀프로젝트나, 같이 공부하는 분위기가 너무 좋은거같아요!!
넵 포폴까지 준비 다 했습니다 근데 타스는 좀 찍먹이었구 리액트도 일주일 공부하고 포폴 다 만들자마자 이력서 제출 했었던 건데 운 좋게 붙었네요
리액트를 일주일만에 다 땟어요?? ㄷㄷ
다는 분명 아니겠지만 기본적인 훅이랑 사용법을 좀 기초를 빠삭하게 다뤘거든요
코테준비도 하셨나요??
사진 2장
근데 국비에 프론트엔드 과정이 있나요? 국비 프론트 과정이라 해놓고 디자인 일러스트 이런거 알려주지 않나요... ㅋㅋ
프론트 과정 두곳이고요!
사진
이게 플스택 과정입니다
디자인100시간
ㄷㄷ
세상에 uiux부터 제이쿼리 vue 리액트 php ㅋㅋㅋㅋ
아니요! 백준이랑 프로그래머스 몇 개 풀긴 했는데 이게 코테 준비는 아니었어요
비추입니다..ㅎㅎ
ㅠㅠ
3곳다 비추인가요??
저라면 1번이나, 풀스택으로 갈거같아요!
저라면 혼자 할것같아요
ㅇㅎ 진짜 빡세게 준비하셧나보네요
아 여러가지있네요
3번이 제일 괜찮네요
전 현업 퍼블에 1년뒤에 전향하려고 하는데 1년도 너무 부족하게 느끼는중이라..
커리큘럼만 봐서는요
그냥 강의는 찍먹용으로 들으시고 구글링하시면서 깊게 파보세요
그럼 풀스택이 그나마 낫다는거죠??
네엡
넵
강의는 들으시면서
부족한게 있을때 채워넣는다는 느낌으로
가시는게 좋을듯해요
네! 말씀하신 느낌대로 해보겠습니다ㅎ
부트캠프 가세요..
와 3개월 만에 어떻게 취업하셨데요 전 독학 8개월차인데 아직두 헤매구 있는데 ㅜㅜ 괴물들이 많네요
코드스테이츠 국비 소프트웨어도 있던데
한번 알아보세요
제가 코드스테이츠 부캠출신이라ㅋㅋㅋ
제가할땐 없었어서 저는 블록체인 부캠나왔거든요
재수 없게 들릴지는 모르겠지만 저도 천직이라고 느꼈어요… ㅋㅋㅋㅋㅋㅋㅋ 코드 짜는 게 좋고 로직 짜는 게 재밌으면 말 다 했죠 허허
지금은 파이썬 독학 중입니다 ㅎㅎ
아 소프트웨어 과정이 FE과정입니다
저도 부캠 알아보는 중인데 비용 생각하면 몇곳 없더라구요..
사실 남의 인생에 대해 왈가왈부 하면 안 되는 건 알고 있지만 학원… 은 제가 겪은 게 너무 많기 때문에……
첫번째 프론트국비는 서울일까요.?
정말 추천 안 드리고 싶어요
사실 학원국비는 진짜 학바학이라
구린데 걸리면 당하기하죠
당하긴하죠
부캠이 낫긴해요
근데 국비 캠프라면 무료니까 좀 들어보고 별로면 혼자공부하는것도 방법인거같아요 캠프에서 열심히하는사람만모아서 스터디 파고..
프로그래머스에 KDT아직 남아있을텐데
35명 뽑긴해도ㅠ한번 지원해보세요
코테를 보긴하지만요
전 다른 부캠을 붙혀놨는데 이거 등록하면 프로그래머스 데브코스 참여를 못해서 지금 고민중입니다..
일정이 참 안맞네요
어디 부캠 붙으셨어요?
멋사요 ㅎㅎ..
저도 멋사 2기 붙어놓고 애먼 학원이나 갔네요,,, 지원금 많이 준다 해서,,, ㅋㅋㅋㅋ
아 학원은 지원금도 나오나요?
그 수당 있어요
아하..
저는 멋사1기 했었어요
훈련수당
멋사가 그래도 수료생도 잘 챙겨주고 페어프로그래밍도 많이 한다해서
참 고민되네요 오늘까지 등록마감인데
아 어제 부캠 다 찾아보니 멋사는 신청기간 끝났더라구요
아니요 경기도 입니다!
프로그래머스 붙을거란 보장이 없어서 ㅎㅠㅠ..
부캠 하고싶은데 시간이 안돼서 너무 안타깝습니다 ㅠ
고민되시겠어요
저 취준할때 부캠 국비가 있었다면 좋앗을텐데..
근데 부캠 코테나 과제면접 난이도가 어때요??
부캠도 잘 골라가야해요
음피치님의 실력이 왕초보가 아니라면 멋사보다는 더 하드한거 추천드려용
책 추천해주실수있나여
학원이나 부캠이나 가서 본인이 뭘하냐에 따라 달라서
부캠 학원 다 가봤는데 둘다 별로엿어서
책은 그냥 사전처럼 보는데 굳이 추천을 드리자면
사진
이 두 개 일할 때도 옆에 두고 사전처럼 찾아봅니다
다른 분은 잘맞는다고 잘 수료하시고 좋은데 가셨어요
확실히 정해진 시간동안 공부하는 습관은 생기는거 같더라구요ㅋㅋ
피곤해도 일어나고.. 피곤해도 코딩하고..
딥다이브는
이모티콘 피곤하네요..수요일
바이블이죠
전 말만 3개월이지 이틀에 한 번 자면서 공부해서 6개월이나 다름 없어요… ㅎㅎ
전 개인적으로 https://ko.javascript.info/
이거만 제대로봐도
된다고생각합니다
이거 괜찮아요 저도 추천이요
이건 저도 추천
react도 react인데 js 기본도 무시는 못해서
이것도 추천해요
감사합니다 ㅎㅎ
여기 보시면 사이트 모아져 있어용
위에 리액트를 다루는 기술 책 쓰신 분이 만드신 리액트 핸드북인데 이것도 도움 많이 받았어용 https://react.vlpt.us/
좋은 아침입니다~~
저는 디자이너>퍼블리셔>백엔드개발로 취업햇는데..회사에서 vue.js 사용해서..결국 프론트로 다시 왓네요ㅎㅎ 돌아돌아 프론트,.
운명이군요..
네..
루피님 처럼 백엔드하시다가 프론트로 넘어오신분 계시나요 ㅎㅎ
저도 그런 케이스..
겸업..
겸업..
저는 프론트 하다가 이제 풀스택 준비 중인데… 대단하시네요
회사에 백엔드가 다 퇴사하고 잘 뽑히질 않아서 사내에서 백엔드 하고 싶은 사람 모집해서 알려주신다고 하더라구요
그래서 지금 파이썬 찍먹 중이에요 ٩(๑❛ᴗ❛๑)۶
오오
장고나
플라스크
사용하나 보군요
장고일듯한
느낌
그러게요 ㅋㅋㅋ
그냥 파이썬이라고 하시더라구요 저도 백엔드는 잘 모르긴 하는데
도연님 회사 잘 들어가신듯한 느낌..
장고일 가능성이 높을겁니다 ㅋㅋ
네 전 뽑기 진짜 잘했어요
DRF도 쓰시게네
겠네요
저희 회사… 전 너무 좋습니다
확실히 독학 할 때는 우물 안 개구리 느낌이 강했는데 취업하고 나서 아는 게 더 많아지고
아 이거 업데이트 해야되는데...
어찌저찌 하다보니 사내 핵심 업무 맡아서 하고 있는데 이거 하면서 실력이 좀 많이 늘어서 팀장님이 이제 프론트엔드 뭔 일만 생기면 저한테 여쭤보세요… ㅋㅋㅋ
혹시 구직하실때 회사는 어느 플랫폼으로 찾아보셨나여??
사람인이욭
용
엌 사람인 괜찮은데 찾기힘들던데..
사람인, 점핏 이렇게 했습니당
사람인으로 찾으셨다니
운이 진짜 좋으셨네요
ㅋㅋㅋㅋㅋ 대단하시네요
다른 곳 면접이 첫 면접이었는데 구데기같았고
두 번째 면접이 저희 회사였는데 분위기도 너무 좋고 들어가자마자 다들 인사해 주시고 면접 분위기도 너무너무 좋았어서
뒤도 안 돌아보고 들어왔는데 진짜 운이 좋았어요 ㅋㅋㅋ
첫출발 좋으면 진짜 빠르게 성장합니다
서비스 기업인가요?
회사 여러 차례 거치고 여기 오신 분들도 첫 회사가 여기인 게 너무 부럽다 하시더라구여…
자사 서비스도 있고, 정부 사업도 진행합니당
회사가 어디인가요..?
호오
좋네요
선릉역 부근입니당
저도 갈래요
ㅋㅋㅋㅋㅋㅋㅋ
아
저는 역삼역으로 가는중..
사람 좋은게 최고 ㅎ..
Vuetify는 언제쯤
정식버전 나올련지 ㅡㅡ
거꾸로 읽어도 역삼역
우영우
아쉽게도 프론트엔드는 정원이 다 차서… ^_ㅠ
다음 기회에..
오늘 밤새 플라스크 리액트 ec2에서 연동하는 것 하고 출근하는데.. 슬프네요
근데 진짜 실력 느는 게 정말 눈에 보이고
이모티콘
API로 넘어오는 데이터셋 자체가 일정한 게 하나도 없고 다 달라서 데이터셋 갈아엎는 연습만 엄청 하다 보니까
확실히… 진짜 확실히 달라요
오오
사진
플라스크보다는
패스트
어떠신가요
넘재밌겠어요ㅠ저도 얼른 실무 투입..
패스트요..?
fast api가 미래긴하됴 ㅎㅎ
백엔드랑 협업을 한 게 아니고 백엔드에서 이렇게 보내줄테니까 그냥 해보세요 이런 거였어서
네네
음악듣는 어피치님이 나갔습니다.
FastAPI
아아
그 패스트
3년 전에 들어보고
처음이네요
ㅋㅋㅋㅋㅋㅋ
요즘
너무 핫해서
flask대체로
드디어 때가 왓군요
많이 쓰더라구요
네네
아아 아직 도연님도 실무 투입은 아니신건가요?
아뇨 실무인데
이게 백엔드도 어쩔 수가 없는 게
빅데이터 사업이라 데이터가 그렇게 넘어와버리면 백에서도 어쩔 수 없이 그대로 넘겨줘야 하는 상황이라
제가 좀 고생을… 했죠
아하
백엔드가 팀장님이신데 상담하시면서 고해성사 하시더라구요,,,
데이터는 진짜 쌓는게 가장 중요..
솔직히 자기가 보기에도 말도 안 되는 데이터셋이었는데
ㅋㅋㅋㅋ
해내는 거 보고 대견했다고 칭찬 + 고해성사를 한 10분을 하셨어요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋ무슨 마음인지 이해가 갑니다..
사진
네 대충 데이터셋 뜯어고치고 zip 파싱해서 그 안에 있는 파일 내용도 다 읽어오고… 그 읽은 걸로 미리보기 테이블 렌더링도 하고… 앞단에서 unzip해서 zip 안에 파일만 다운로드 받을 수 있게끔 하고…
그나마 쉬웠던 걸로 들고 왔읍니다,,,
오 근데 저 테마는 어떤 것인가요?
아예 zip이나 csv 파일 같은 경우에 다운로드 링크를 보내주는 게 아니라 바이너리를 보내 주시면 제 쪽에서 가공해서 파일을 만들어주는 형식이었어요
Bearded Theme에 있는 Will 테마입니당
감사합니다
저거 쓰고싶엇는데
물어볼 사람 찾고있었는데
마침
여기 계셧네야
혹시 취준생이신데 개발동아리하시는분 계신가오?
이모티콘
그래도 뭔가 뿌듯함을 느끼셨을 것 같아요
재사용 함수만 10개인데 데이터셋 다 달라서 재사용 함수 못 쓰고 새로 함수 정의한 것도 엄청 많고… 간단한 프로젝트인 줄 알았는데 어마무시하게 컸던 프로젝트였어서 좀 당황했었지만 뿌듯해요 지금은
데이타가 ㄹㅇ킹받죠..
이제 슬슬 문서화 하면서 코드에도 주석을 달아놓으셔야 겠네요. 이런 코드들은 맥락을 모르면 나중에 인수인계가 힘들어서 다른 일을 하다가도 회사있는 내내 불려다닐 수 있습니다. 코드 단위별로 뭘 의도했는지 슬슬 적을 준비 해두시면 좋을 것 같아요. ㅋ
정말 실무에서 유용한 말씀을 해주시네요
네… ㅋㅋㅋㅋ 어제 야근하고 이거 끝나자마자 냅다 버리고 와서 못 적은 거긴 한데
사진
나머지는 이런 식으로 열심히 적어 두었슴미다
후
야근을 하면서 회사를 좋아하시다니
진정한 개발자십니다
재밌어용!!
개발자는 취미도 개발이라고
전 집 가면 심심해서 토이 프로젝트 할만한 거 찾아요
일하는게 노는거고.. 그게 워라밸이라는
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 다들 변태라 하더라고요
변태.. 메모
와 폰트 엄청 예쁘네요
그리고 이 프로젝트는 사실 유지보수가 필요가 없는 프로젝트예요 국가 사업이라 그냥 기한 내에 끝내서 띡 주면 끝이거든요
코드 잘 작성하셨네요! 코드 정리할때 줄간격도 그룹별로 이제 조금씩 벌려두시면 좋아요. 9라인, 20라인 25라인 34라인 44라인에 엔터 1줄씩만 더 적어주셔도 훨씬 더 좋은 코드가 될것 같아요
ㅋㅋㅋㅋㅋㅋ
인수인계 할 필요가… 없습니다
오랜만에 다시 작성중입니다
아 조건문이나 반복문처럼 큰 덩어리는 잘 보이게 나누면 좋다는 말씀이시죠?
혹시 파이썬 백엔드 프레임워크 Fast, Django, Flask 및 그들의 라이브러리들을 정리중인데
관심있으신 분들은 들려서 수정 및 지적 해주시면 감사하겠습니다 ㅎㅎ
그쵸… 저 이거 못 헤어나오고 있어요
네 그리고 의도가 하나인 코드들은 엔터 2줄 + /// 주석
엔터 2줄을 띄워 놔도 프리티어 때문에 한 줄로 결국 줄어들더라구요… ㅋㅋㅋ
국가사업은 제출하고나면 다른 사람이 코드볼 일이 없나요?? (국가사업 형태를 몰라서..)
네 볼 일이 아예 없구 딱 기한 내에 끝내서 제출만 하면 끝입니당
코드 작성할때 웬만하면 주석 다 다는게 좋은가요?
@바보fe 어제 알려주신 방법으로 바꿔보니 작업 모두 완료했을때 900ms 걸리던게 380ms 걸리는걸로 바꾸었습니다 ㅎㅎ!! 감사합니다!
넵 나중에 인수인계를 위해서라도 어떤 역할을 하는지, 어떤 기능을 하는지 간단하게라도 적어 두시는 게 좋아요
나중에 제 코드를 보고 공부할 다른 신입 분을 위해 저도 유지보수가 필요 없지만 적어두는 중입니다…
헉 축하드려요
고생하셨어요!!
코드를 설명하는 주석 (X) 의도를 설명하는 주석 => 무조건 자세하게!!
오오... 감사합니다!! 의도 설명 메모메모
ex) if (arr.length > 10) // 10개 보다 많으면.. (X) // 상품이 10개 이상이면 줄여서 보여준다.. (O) if (arr.length > 10)
와 저는 변태에만 메모했는데 이런..
아 이런식으로... 오오
맞아용 if문을 보면 누구나 다 알 수 있는 그런 거 말고 전체적으로 코드 한 덩어리가 어떤 의도를 가지고 작성한 코드인지 어떤 역할을 하는 코드인지 적어두는 게 중요하더라구요
사진
저는 큰 덩어리는 확장프로그램 사용해서 이렇게 강조 시켜놓고, 부연설명은 그냥 주석으로 코드 한 줄 뒤에 이렇게 적습니당
Code Snap 상에서는 저 강조가 안 보이더라구요,,,
맞아요. 주석은 그룹으로 기획의도를 적어 주는게 좋구요. 1줄 주석은 코드와 의도가 내가 봐도 연결이 안될때(?) 누가 봐도 이해하기 힘들겠다 싶은 것들은 적어주면 좋아요
1줄만 쓰는 주석은 다른 주석과 뭐가 다른가요?
사실 클린코드에서는 주석이 없는 (필요없는) 코드가 좋은 코드라고 말하긴 합니다
의도가 보이는
저는 이말은 무슨 의도인지는 알지만 문장만으로는 오해를 너무 많이 불러일으키는 말이라서 추천하지 않습니다. 주석을 쓰면 나빠라는 식으로 생각하는 주니어가 너무 많아요. ㅠ
코드를 말씀하시나요
그리고 재사용 함수 같은 경우에는 주석 적으실 때 /** */ 이런식으로 적으면 함수 사용할 때 가이드 나와서 제가 짜놓고도 까먹은 코드 재사용할 때 매우… 유용합니다… ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
특히 우리는 한국사람이라 코드에 한글이 있는 거랑 영어로만 되어 있는 코드랑의 가독성 차이는 정말 엄청납니다. 주석을 많이 쓰세요.
전 이거 누가 짰지 해놓고 아 내가 짰네 한 게 한두 번이 아니라
웬만하면 주석을 다 다는 개 좋냐고 물어보셔서..ㅎ
*게
누가 봐도 알아볼 수 있는 그런 코드 말고 머리를 굴려야만 이해할 수 있고 머리를 굴려서 나온 그런 로직 같은 데에 주석을 달아 두셔야 해용
클린코드에서 말하는 주석의 의미는 함수의 이름으로 충분히 파악이 가능한 목적성과 관련된 주석에 가까워보이고 비지니스에서는 코드로는 이해할 수 없는 조건들(특정 조건에서 특정 동작을 보여야 하는 비지니스 룰) 같은 경우에는 의도를 주석으로 남기는 건 좋아보이긴 하는 것 같아요! 아까 태오님이 남겨주셨던 말처럼요!
주석 없이도 알아볼 수 있는데 달 필요는 없는거고 주석 없으면 어 이거 머리 좀 굴려야겠는데? 싶으면 달면 되는거같아요
카메라로 찍으셨보네요?? ㅎㅎㅎ
const onkeydown = (event) => { // @NOTE: 한글 조립중일 경우에는 크롬에서 keydown이 2번 호출이 되는 이슈 수정 if (event.isComposing) return 약간 이런식으로 왜 이 코드를 넣는지 설명이 필요한 부분은 적어주고 있어요
넹 방금은 카메라로 찍었어요… ㅋㅋㅋㅋ 주석 강조가 안 나오더라구요
새로 들어온 개발을 모르는 사람도 이해할 수 있도록 남기려고합니다(언젠가 퇴사할 예정이기에) 비지니스, 서비스, 커뮤니케이션으로 생긴 내용을 노션으로 남겨도 찾기힘들어 코드위에 남기고, 참고한 링크나 디자인 링크 남깁니다 알고리즘이 들어가 해석에 시간이 걸려도 주석 달아둡니다
마침 이 부분에 대해서 코딩애플 영상이 올라온 게 있네요! 참고하시면 좋을 것 같아요~ https://youtu.be/ORmnc-hLrYs
전 웬만하면 재사용할 수 있는 건 따로 빼두고 계속 재사용 하는 타입이라 유용하게 써먹고 있습니다 ㅎㅎ
도연님 긐데
회사코드는
공유 안하시는게 나아요
나중에 문제가 될 수도 있고 같은 회사분이 여기 계실수도 있고...
회사 코드 아니구 혼자 작업했던 코드 들고 왔습니다! 아직 회사 코드에 붙이려면 연습을 좀 많이 해야 해서 개인적으로 연습한 거예요 ㅎㅎ
아아
다행이네용
넵 걱정 감사합니당 ㅎㅎ
하나씩 개인적으로 연습해서 회사 코드에 응용하는 걸 반복하는 중이라
프엔은 몇명 정도 되나요 ? 그런 곳은 규모가 궁금하네요
주석에 적고싶은내용 잔뜩 적으세요 두서없어도되니
아치피빌드하면 사라질거
코애
못챔지
프엔 셋이구 전직원은 20명 조금 넘습니당
나머지 분들은 데이터 분석, 백엔드, 앱 개발(안드로이드, iOS), 디자이너, 관리팀 등 있어용
오오
엘라스틱 서치 하시는 분도 계시고, 이미지랑 텍스트 하시는 분도 계시구용
알찬 구성이네요
눈물바다에 빠진 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 눈물바다에 빠진 라이언님 반갑습니다 :)
네 반갑습니다 :)
시니어는 보통 몇 년차부터 시니어라고 할 수 있나요?
안녕하세요
저는 친구들 다 놀고 있고 저도 놀 나이라 10년만 하면 31살인데 시니어다 하고 울며 겨자 먹기로 입사했거든요…
안녕하세용
10년 하면 31..
아름답네요
경력 10년차 시니어 개발자인데 31살이면 얼마나 간지 날까 싶어서 그냥 취업했어요… ㅋㅋㅋㅋ
원래 입사하기 좀 무서워서 첫 면접 전날에 면접 취소하려고 했는데
하고 나니 별 거 아니네 잘한 선택이네 싶더라구요
……………..
갑자기 그만두고싶네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
… 왜죠…
전 늦은나이에 전환해서 10년하면
44살인데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
제가 좀 특출나게 어린 거라 절대 그러실 필요가… 없어요…
나이를 정말 깡패처럼 쓰고 계시군요
진짜 잘 생각하셨네요 ㅎㅎ
학원에서도 평균 연령 29살인데 제가 압도적으로 막내였고 회사에서도 압도적으로 막내여서
전 10년차면 39..ㄷㄷ
대신 고졸이라는 흠이 있습니다…
내년에 전환할거니 10년차면 40..
노는것도 돈이 있어야 노는거라 좋은 선택일듯 합니다 ㅎㅎ 해외도 가실수있을듯요
나이가 깡패네툐
안녕하세욥 코딩테스트 준비 중인데 지금 python으로 공부하고 있는데 프론트엔드 분야면 js로 준비하는게 더 좋을까요??
요새는 확실히 평균연령이 어려지긴 하네요 ..
대신 잘나가면 고졸신화입니다. 걱정마세요! 화이팅!
유명 개발자님도 고졸인분들 많죠
근데 도연님 공부한 기간에 비해 발전속도가 어마어마하신거같아요
고졸은 연봉 테이블이 다르다 보니 학점은행제라도 해야겠단 생각을 좀 많이 하는 중이에요
취준3개월+신입2개월만에 저 실력이시면..
위에도 말했지만 말이 3개월이지 이틀에 한 번 자며 공부해서 6개월이나 다름 없습니다…
그것도 실력이죠
반성해야겠다
올인할수있는것도 능력..
크으
피곤하면 자고
후아
독하시네요
20스타
찍었네요 첨으로
구랬는뎅
흑흑
요즘 자존감 많이 떨어졌었는데 자존감 지킴이가 다들 여기 계셨네…
감사합미다… ㅠㅠㅠㅠㅠ
나보다 잘하는 사람 주변에 있으면
자존감 떨어지더라구요...
여기서 자존감 충전~
저는 요즘 퍼블리싱보다 코드 한 줄 적고 콘솔 찍고 코드 한 줄 적고 콘솔 찍고를 반복하다 보니
전 취준할때 주말에 걍 쉬고 하루에 8시간하다 놀았던거같은데..
회사 사람들이 제가 일을 안 하는 줄 알더라구요…
ㅋㅋㅋ
근데 팀장님이 열띈 변론을 해주신 덕에
근데 21살 취업은 진짜 부럽네요
괜찮아졌습니당
신입때는 그런거 신경쓰지 마세요
신경 안 쓰려 해도 뒷담화를 하는 사람들이 있고 그 얘기가 또 저한테 들려오다 보니 ㅋㅋㅋㅋ 좀 속상했었어요 많이
어차피 3~5년차 커리어가 중요하고 일단은 성장 그리고 일이랑 프로세스 그리고 사람들이랑 어울리는 법 이런거를 잘 익혀두세요! ㅎ
9시까지 야근하고 간 날도 허다한데 말이죠 ㅎㅎ…
잘 나가면 뒷담화 안하는 사람하고 일하게 됩니다. ㅋ
오
그런방법이 ㄷㄷ
그냥 다들 뒷담화 하라고 냅두려고요 ㅎㅎ 그 분들이 뒷담화 할 때 허비하는 시간엔 저는 열심히 성장 중이니까요
델님이 나갔습니다.
현재 21살이신건가요?
넵
헉 저랑 동갑이시네요
헉 대박
저 동갑 처음 봐요
프론트 부럽습니다...
이모티콘
퍼블로 일하고있는데 리액트 공부 생각보다 어렵네요🤔
혹시 RangeError: Invalid String Length 에러 해결해 보신 분 계실까요? 제 생각엔 데이터가 너무 커서 못 받아오는 것 같은데 해결 방법 대신 다른 방법을 쓰긴 했지만 해결할 수 있으면 좋을 것 같아서요
어떤 방법으로 해결하셨나요?
https://ohgyun.com/782 이건 이미 참고했지만… 여기엔 제가 원하는 게 없더라구요
어떤 데이터이길래 저정도의 에러가…
이 코드에서 발생한 문제였는데, zip 내의 파일을 파싱해서 불러오는 과정에서 문자열 데이터 자체가 몇십만 줄을 훨씬 뛰어넘다 보니 ㅋㅋㅋㅋ ㅠㅠㅠ
도연님 혹시 이렇게 3개월정도 공부하시고 입사하시면서, 조금 더 공부하고 취업하면 어떘을까 하는 생각은 없으신가요???? 제가 지금 취업시기에 대해서 고민을 하고 있어서 여쭤봐요
파일은 csv 파일이고 csv 파일을 파싱하게 되면 문자열 데이터가 되는데 그 문자열 데이터가 몇십만 줄 많게는 몇백만 줄까지 가요!
절대요! 취업을 더 빨리 할 걸 이라는 생각은 해봤지만 늦게 할 걸 이라는 생각은 안 해봤어요
혼자 공부하는 건 우물 안 개구리와 같더라구요
아무래도 제가 지금 하는 프로젝트가 데이터 전처리부터 시작해서 정규화, 학습용 데이터셋 생성, 변수 분석 및 선택, 모델링까지 가는 프로젝트이다 보니 데이터의 양이 방대할 수밖에 없는 프로젝트라
Node.js에서 정해둔 용량, 브라우저에서 지정해 둔 문자열의 길이 제한 등등… 부딪히는 문제가 죄다 용량 혹은 메모리 쪽이네요 ㅋㅋㅋ
아하 감사합니다 !!
초롱초롱 무지님이 나갔습니다.
해결은 RangeError가 뜨는 쪽만 zip 파일 자체를 다운로드 받을 수 있게끔 하고, 에러가 뜨지 않는 부분은 zip 파일을 파싱해서 Preview Table을 렌더해 준 뒤 unzip까지 거친 후에 zip 내부 파일만 다운로드 받을 수 있게끔 했어요
원래 csv 파일만 받아오는 거였는데 브라우저에서도 Response Data 용량이 제한이 걸려 있더라구요 하필 크롬에서…
그래서 용량을 줄이려 zip으로 압축해서 백에서 보내주고 계시고 그걸 이제 제쪽에서 풀어 주는 거였는데
Zip으로 압축을 하지 않으면 파일 자체가 못 오는 현상이 생기다 보니… 압축은 해야 하고 그걸 앞에서 풀자니 V8 엔진에서 정해둔 제한 때문에RangeError가 발생하고…
저 혼자 너무 떠들었네요 뻘쭘해라
ㅋㅋㅋ
후아 처음으로
20스타
찍어봤네요
오
21스타 만들어드릴게용
투애니원
혹시 어느 정도 포폴을 준비 하셨어요? 그렇게 단기간에 갈정도면 .🤭
잠시만용
https://kdyportfolio.vercel.app/ 지금 보면 코드도 너무 엉망이고 웃기기 짝이 없지만 그때 당시엔 정말 열심히 만들었었네요… ㅋㅋㅋㅋ
ㅋㅋㅋ프로젝트 귀여워요
와 랜딩이 맛깔나네여
그쵸
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아
지금 보니 쪽팔리네요
멋지네요!
크으
와 멋지세요…! 전 아직 대학생인데 더 제가 열심히 해야겠다는 생각이 저절로 드네요..
대용량파일 읽을 때 저는 먼저 파일을 쪼개고 (Blob.slice) 파일 리더를 그에 맞춰 생성했습니다 (new FileReader), 이 후 각 리더들은 쪼개진 파일 하나를 담당하여 어레이버퍼로 만들었고요 (readAsArrayBuffer) 각 리더에서 읽기가 시작될때(onLoad) 읽어온 어레이버퍼를 특정용량으로 쪼개어(청크) 잘린 청크만큼 읽어서 처리했습니다
이게 작은작업이 아니어서 큰 파일 읽을때 UI가 블럭되는 현상이 있는데 위 작업은 모두 웹워커에서 진행했습니다
와 굳이 큰 프로젝트 아니니까 신경 쓰지 말라 하셨는데
그래도 뭔가 하고 싶다 생각했지만 접어야 할 것 같네요
코드량은 상당히 짧아요 ㅎㅎ
갑자기 생각이 안나는데.. 백엔드 도와주는 .. 사이트가 뭐였죠..
연두색인가 초록색이였던 거 같은데..
포스트맨?
스웨거 ?
스웨거 같네요 ㅋㅋㅋ
스웨겈ㅋㅋ맞습니다
감사합니다
ㅋㅋㅋㅋ 저도 저거봤어요 코테에 돈주고 시험보던데
스웨거 ㅋㅋㅋ
자격증처럼
왜 저런걸 만드는거야 … 해야하는게 늘어나네요 ㅠ
어우 저건 뭐야
저런거 싫었는데..
해커스 코딩 생기려나,,
친구들 토익 한국사 이런 자격증러쉬하는거들 싫었는데 비슷한 느낌이네요
코익;;
안그래도 코테도 부정적인 의견였는데..
탈프로그래머스 하겠습니다 ^^
사진
ㅋㅋㅋ...
맞는말들 하시네요
ㅋㅋㅋㅋ 에휴...
카킴님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
카킴님 반갑습니다. 어서오세요 :)
안녕하세요..!
요즘 스타트업에서 어떤 제품을 만드는지 궁금하다면? https://www.producthunt.com/
오태님이 나갔습니다.
Rxjs 쓰시는분들 있나요?? 최근에 간단하게 개념 설명 듣고 흥미 생겨서 공부하고 싶은데 다들 어떻게 시작하셨나요?? 참고할 강의나 책같은게 있는지 궁금합니다
저는 회사에서 Angular를 사용하고 있어서 자연스레 rxjs를 접하게 됬는데요, 얄코님 꺼 강의 보고 개념 한번 훑고, 추가적인 내용은 공식문서나 블로그 참고하면서 공부 했습니다
이거 좋아요!
다들 감사합니다!!
학력이 다는 아니지만 나중에라도 필요한 시기가 오면 공부하시는 것도 좋을 거 같아요. 저도 비전공자라서 사이버대나 학점은행제나 그런걸로 운영체제나 자료구조 이런거는 알아야 할 시기가 아주 미래에라도 올 수 있겠구나 싶어서요.
🍒 Onecake 🍒 주문 제작 케이크를 간편하게 주문할 수 있도록 돕는 서비스 원케이크에서 프론트 개발자 한 분을 구합니다! 서비스 소개 노션 : https://makeus-challenge.notion.site/a5e1d52b793a4470ae6719cd54a31c6b RN으로 개발하고 있는 사이드 프로젝트로서 기획자, 디자이너, 백엔드, 프론트 2명으로 팀을 함께 이뤄 개발하고 있습니다. 앱스토어와 플레이스토어에 런칭까지 하였지만 버그와 부족한 기능 구현이 많아 프론트 2명이 개발하기엔 부족해하여 프론트엔드 개발자를 구해봅니당! - 지원 조건 1. 맥북이 있으신 분 2. RN 개발을 해보신 분 3. typescript 와 reactquery를 다뤄보신 분 4. 팀원들과 둥글둥글하게 소통하고 책임감 있게 사이드 프로젝트를 마무리 하실 분 자세한 내용은 프로젝트 소개도 읽어봐주시고 갠톡으로 편하게 연락해주시면 감사하겠습니당 ㅎㅎㅎ 직장인 대환영~
요즘엔 찾으면 무료로 들을 수 있는 강의가 많아서요.
재밌게 개발 중이고 서울에서 주로 활동하니 편하게 연락주세요~!
제 주변에 고등학교 졸업 하고 일하신 분들도 처음엔 신경안쓰시다가 사회에는 다양한 분들이 있어서 결국 나중에 학위를 따더라구요.
사람마다 생각이 다르고 진입조건이 달라 약간의 차별도 없잖아 있어서..
뭐든 공부해두면 좋은거 같습니다~!
그쵸
네 어떤 사람한테는 그게 판단의 척도가 되기도 하고 더 본질적인 걸 중요시 하는 분들도 계시구요. 물론 학력 !=실력은 아니라고 생각합니다. 다양한 가치관이 있는데 나중에 라도 언젠가 그런 시기가 올 수 있다는 것만..
악 rn...
저도 그래서 사회 시선 뿐만이 아니라 제 연봉 테이블도 높이고 싶어서 학위를 따두면 조금이나마 도움 될 것 같아 학점 은행제 고려 중입니다 ㅎㅎ
네 아까 읽어보니 습득력이 좋으셔서 뭐든 금방 하실거 같아요~!
화이팅입니다!!!
감사합니다 ㅠㅠ
저두 반성하게 되네요~!!
열심히 해야지..
제 시니어는 학위에 대해서 이렇게 말씀하시더라구요, 처음에는 이게 쓸모있을까 했는데 나중가니 알게모르게 영향을 끼친다 이게 무섭다
공유해주신 자료도 참고도 되었습니다~!
앗 다행입니당
이모티콘
방통대는 어떠신가여
이거 심지어 조은님도 느끼신다는데
물론 꾸준한 자기계발이 뒷받침 되어야 학위가 의미있다고는 편입니다 ㅋㅋ
저도 궁금했는데 해외 이직을 희망하는데 단기간에 대학학위를 받을 수 있는 곳이 있을까요?
해외 이직이라면
어디인가요?
일본, 미국, 캐나다 등인데 일본이 가능성이 높아서 산업기사 준비하고있습니다
일본은
미국 캐나다는 좀 더 까다롭다고 들어서요
그나라 학위 없으면 거의
힘들다고 봐야돠요
산업기사면 어떤 산업기사 말씀인가요?
정보처리입니다!
아하, 이왕이면 기사를 따는게 낫지 않을까요?
그것도 학위에걸려서...
ㅋㅋㅋㅋㅋㅋ
산업기사부터 취득중입니다!
경력 자격으로도 응시 가능하지 않나요?>
일본어는
어느정도 하시나요?
비즈니스 레벨입니다 ㅋㅋ.. 일본에서 회사생활했어서
ㅇㅎ
인터넷으로만 해외취업 정보를 찾아보다보니
나중에 한 번 상담을 받아봐야겠네요
저는 일본 대학원 준비중인데
오호 부럽습니다.. 대학원
웬만한 기업에선 일본 학위가 필요하더라구요
없어도 문제는 없지만
그렇군요…
그래도 있으면 수월한
라쿠텐같은 경우에는
네네
영어만으로 소통하고
제가 잘 몰라서 그러는데
그래서 직원분들이 고통받기는 한데
일본이 아날로그 중시 국가의 이미지가 강해서
라쿠텐 메루카리 영어소통으로 알고있습니다 ㅋㅋㅋ
네네
맞아요 ㅋㅋㅋ
it 강국이라는 느낌은 못 받았는데
저 서합하고
실상은 어떤가요?
면접볼때
영어로 하느라 죽을뻔 했습니자
it발전이 20년도부터 미친듯이 진행되서
노다지인 것 같습니다
노다지
오...
맞아요 ㅋㅋㅋ
사실 지금 일본 정부에서
디지털화 사업을
저 있을때 배민,오늘의집,당근마켓
돈을 퍼붓도 있어서
들어오더라구요 일본에
드디어 일본도 심각성을 깨우쳤군요
한창 개발에 열을 올리는 느낌입니자
인구는 많은데 아직 서비스가 없다보니
네네 그쵸
사실 좀 극단적인 케이스라고 해야되나 일본은
개인적인 의견입니다! ㅎㅎ
연구쪽은 그래도 성과가 잘 나오는데
응용쪽은 아주 안나오는
그런 느낌입니다
방통대는 들어가는 건 자윤데 나오는 건 자유가 아니라는 소리를 들어서
들어갈 땐 마음대로지만 나갈 땐 아니란다
ㅋㅋㅋㅋㅋㅋㅋㅋ
그리고 루비를 좋아합니다 자국 언어라
네 약간 그렇대서… ^__^ 하다 못해 야간대라도 다니는 한이 있어도 방통대는 안 가고 웬만하면 학점은행제 하려구요
후우 저는 내년 목표로 일본 대학원 준비중인데 교수님들 컨택 메일 보내는 중이네오
3년제 후 -> 4년제 또는 학은제 따신분 계신가요
저도 3n년동안 불편함 없이 살았는데 어느 순간 부족함을 느끼고 공부해 필요성을 깨닫게 되었습니다..
저는 일하다가
아 대학원이 필요하겠다 느꼈네요
정보는 많은데 실천이 어렵네요..
프론트엔드 관련해서 대학원을 진학한다면 전공은 어떻게 되나요..?
실천이
학점은행제보다는 사이버대학을 추천드립니다.
가장 힘드네요
HCI?
사실
분야는 상관없다고 봅니다
그걸 어떻게 엮느냐가 중요합니다
프론트, 백, ops등등이 무조건 이거다는 없어서
그건 그러네요
저희 교수님이 말씀해주신거는 석사는 공부/연구하는 법을 배우는 과정이고 박사는 그걸 바탕으로 가설을 세워서 증명하는 단계이다
라고 하신게 아직도 뇌리에 박혀있어요 ㅋㅋ
저는 대학원을 희망하는 이유가, 좀더 공부를 깊게하고 싶고 이 분야에 어느정도 본격적으로 들어가서 기여하고 싶다?라는 생각이 들어서...ㅋㅋ
개발을 하다보니, 점점 깊숙이 파고들고 싶더라구요 ㅋㅋ
일본은 아직도 종이로 편지랑 팩스 주고 받는줄 알았는데
발전하는군요
아
물론
그거는
아직도 그렇긴 합니다
학위
중요한거같아요
전 제가 취업한데에는 학위의 영향이 크다고 생각해서요
작은 스타트업일수록 특히 더 그런거같아요
저도 그렇습니다
들어와보니 다들 전공자셔서
확실히 대학민국이라..
학위중요하죠
말은 그렇게 안해도 중요한것같아요
학벌은...요..?
전 비전공이지만..
저는 중요하다고 생각하는데
학위만큼 중요하지는 않은 것 같아요
제가 신입이라 그렇게 생각하는 것 같습니다
사실 학벌은 경력이 쌓이면 무의미해지지 않을까용?
이라는 생각인데 저는 신입 취업 기준 중요하다고 생각해요
어느정도 이상 느낌..?
요즘 사진이랑 학교 입력하는 란이 없는느낌이던디
거의 근데
자율형식이잖아요
고졸 대졸 차이는 많이나는데
어디 나왔는지는 그렇게까진 안중요한느낌이죠
ㅋㅋ 이렇게 생각하면 고3때 뭐하러 수능에 목숨걸었나 싶기도 하고..
학위는 중요해도
제가 느끼기엔
학벌은 서류에는 영향 끼친다고 샌각해요
신입기준입니당
기업 크기에 따라 다른느낌
맞아요
아
저는 크게 느끼진 못했어요 주변인도 보면..?
저도 그거는
작은 스타트업 기준입니다
인정..
대표님들은
작은회사들은 즉시 투입해서 빠르게 성과내야해서
근데 제가 소규모 스타트업은 절대 안갈거라.. ㅋㅋ
학습능력을 판단해야하므로
학벌로 서류 많이 거르기도 하실걸요..?
그런느낌입니당
그쵸...
저도 입사해보니 다들
서성한 이상 전공자셔서
좀 그렇게 느꼈네요...
소규모 스타트업에 가면 어떤 장점이 있나용??
저도 근데 첫 회사고 근무한지 1년도 안되어서요
며칠전에 포프성님 라이브에서 들었는데
장점 - 다양한 좋은걸 경험한다 단점 - 다양한 나븐걸 경험한다
앗.. 너무싫은데요 ㅋㅋ
스톡옵션과 exit을 통해 큰 돈을 벌 수 있습니다
저희는
작긴 한데
작은회사에서 좋은 사수 만났을때 성장속도가 엄청나다고 들었습니다
체계는 어느정도 갖춰진 느낌이라
체계가 어느정도 갖춰진 곳 아니면
비교적 좋은 문화를 만들어갈 수 있습니다?
좋은사수는 큰 회사에서 더 만날확률이 크지않나요??
이것저것 다합니다
의견냈을때 수렴될확률이 높죠
도입하고 싶은거나 시도하거나 이런게 좀 자유로운 느낌입니다
본인이 하고싶은 일을 할 수 있습니다
대기업은
개발프로세스를 바꿔본다던가
사실
사수
그냥 하라는거만하면돼서
중요하다고 생각하는데
워라벨만 보장되면
혼자 공부하면서 성장할 수 있다고 생각해요!
회사규모가 작을수록 사수가 없지않나용..?
그래서 학벌을 보고
학습능력좋은사람 뽑는느낌이져
저희는 40인 규모인데
무조건 없다는 아니죠
40인이면 작진않네여
사수가 저연차여도 의미있나요? 같이 공부중이라 좋긴한데
소규모... 라기에는
그정도면 사수라기보다 동료느낌아니에요??
그춍 완전 소규모는 아니죠
사수는 어쳐피 1-2명 아닌가요?
그쳐..
대기업이든 스타트업이든
성장에 필수요소는.아니라고 생각해요
제가 생각하는 소규모 스타트업은 10명미만에 개발자 1, 2명이고..
그런곳을 생각했습니다 ㅋㅋ
아하 소규모 스타트업에서
초기멤버로 신입을 쓰기도하나요?
사실 스톡옵션 대박 생각하고 스타트업가는건
그런곳 많이봤어여..
가능성이 낮죠
있는데요 개발자는 없을 확률이 높아요
모통
경력만
뽑죵
경력이 없어서 서류 탈락한 곳들은
다 소규모 스타트업이였어요
애초에 메일로도 경력이 없어서라고 보내주셔서...
근데 저도 사수는 없어요 저에게 사수란 구글…
hover 효과로 border를 주고있는데, border가 생김에 따라 컨테이너의 높이 변화는 어떻게 처리하는게 좋을까요?
box-sizing : border-box
이거쓰시면될것같습니다.
앗.. 감사합니다!
그동안 퍼블리셔끼고 진행하다가 처음으로 css까지 작업하려니 보통일이 아니네요
저는 종종 box-shadow로도 합니다.
border를 opacity 0으로 줬다가 색상 입혀도 되겠네요 감사합니다.
border-color를 transparent로 주시면됩니다
주위에 잘 모르는 주니어에게 기꺼이 알려주고 설명해야 하는 이유 (저희 방이 지향하고자 win-win의 방향이기도 합니다.) https://www.youtube.com/watch?v=bi8Mo7aZ8bM
this$.router.push('경로')로 들어갔을 때
css가 깨지는 경우는 어떻게 해야할까요?..
새로고침하면 css가 제대로 먹습니다
어떤 파일이 깨지는지 확인하고 그 파일을 불러오는 경로를 확인해야할것 같은데욥? 라우터 이동했을때와 파일을 불러오는 시점에 차이가 있는거 같아요.
혹시 웹스톰 쓰시는 분 계신가요? 궁금해서 써보려고 하는데 어떤가요?
저요 저요!! 저는 좋아요!! 만족합니다
단 윈도우에서는 아닙니다.
오오 그렇군요!! 윈도우는.. 진작에 버렸습니다 ㅋㅋㅋ
저도 쓰고 있는데 이 글 내용에 완전히 공감하고 있어요 참고하시면 좋을것같아요! https://daily-dev-tips.com/posts/i-stopped-using-visual-studio-code/
우와 포스팅도 따로 있군요 감사합니다
대학생때는 웹스톰쓰다가… 라이센스끝나서 ㅋㅋㅋㅋ vsc 쓰고있습니다
css를 전역으로 쓰고 있습니다..
타이퍼그라피어님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 타이퍼그라피어님 반갑습니다 :)
안녕하세요.
저 질문 바로 해도되나요?
테오님 오늘 스프린트 미팅 11시인데요~ 제가 11시 30분까지 마이크를 못쓸수 있는 상황이 있을거 같은데 정말 죄송하지만 11시 30분까지는 오디오랑 채팅으로 참여하다가 30분에 마이크를 켜도 될까요 ?
코딩이나 개발 관련 질문은 바로 물어보셔도 된다구 하십니다~~
그럼요~ 괜찮습니다~
아...... 그런거라면 ㅠㅠㅠ 저는 스플리팅해서 파일 불러오던거라 발생하던 문제였거든요ㅠㅠ
감사합니다!
이렇게
사진
이게 스플리팅이라고 하는거죵?
@허브의 개발일지 님 사이드플젝 올리셨었네용 ㅋㅋ
아쉽게도 rn을안해서..
허허.. 다들 RN 으로 인해 안오시네요 ㅠ.ㅜ
구인구직의 어려움을
벌써부터 느끼고 있는 중 입니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
RN 이 뭔가요 ..?
ㅜㅜ... 아무래도 앱쪽은 하는사람이 적어서..
리액트 네이티브요
react native 입니당
아
아하 넹 감사합니다
그... querySelectorAll로 가져온 NodeList데이터의 원하는 태그 부분만 가져와서 1차원 배열로 만들 수 있을까요?
네
NodeList가 생긴건 배열같이생겨서 배열 함수를 쓸려고했더니 안되더라구요
구글에 NodeList to array
(프론트 전혀모릅니다)
검색해보세용
네네 그걸로 검색해서 찾아봣는데
const array = […NodeList]
window.location.search 하면
DOMException not a valid selector라고 나와서...
Array.from
아니면 혹시 현재 windows.location.search값을 찾아주는 jQuery있을까요?
쿼리스트링을
찾고싶은건가요?
For문은 쓰실수있ㅛ어요
현재 페이지 parameter와 같은 href 링크를 찾고 위아래로 sibiling을 얻어올려고하거든요
방법은 상관없는데
근데,,, 그거랑 NodeList랑은 무슨연관이..?
a태그 href를 따려고 하시는건가..?
네네
이걸 따서
순서대로만든다음에
제이쿼리 쓰시면
window.location.search 같은걸로
현재위치를 비교하고
앞으로 뒤로 기능만들려고하거든요
해당 엘리먼트 밑의 Node중 anchor 태그의 href 어트리뷰트를 탐색하면 되지않나요?
네제가프론트를 전혀몰라서;
$("선택자").each((i, e) => e.attr("href"))
이런식으로 하면 따와질거 같은데요
오 해보겠습니다 감사합니다
JS잘하고싶다님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 건배하는 프로도님 반갑습ㄴ디ㅏ :)
반갑습니다 :)
안녕하세요~
저혹시 관련 이야기는 아니지만
사진 2장
이게 뭘까요..,?
잠금화면 비번
써야되는거 아닐까요..?
아니면 다른거를 물어보신건가요...?
어떤거를 뭘까요 라고 물어보신건지..;;
비밀번로를 까먹으신두ㅛ
갑자기 뭔지도 모르는게 키체인 암호 요구해서 그런거 아닐까요?
프로그램이 깔렸는가봐요
kyca1242 구글검색
재사용함수나 재사용 컴포넌트, 재사용 state 같은 거 짬 나서 리드미에 정리하고 있는데 이런 순간에 뿌듯함이 오나봐여,,, 내가 얼마나 했고 어떻게 했는지 돌아볼 수 있는 순간이네용
오 좋네요.
-님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요. 타입스크립트로 전환 중인데, 커스텀 훅에서 타입이 예상하지 못하게 나와서요.. 어떻게 해야되는지 몰라서 여쭤봅니다 ㅠㅠ 반환되는 handler의 타입이 이렇게 나오는데, 왜 이러는지 도무지 찾아도 모르겠습니다 ㅠㅠ string | ((event: ChangeEvent<HTMLInputElement>) => void) 그리고 해결책이 뭐가 있을까요… 분명 커스텀 훅 정의할 때는 타입을 제대로 해준거 같은데, 안되네요..
사진
사진
사진
사진
질문과는 상관없지만,,, 폰트랑 테마가 되게 이쁘네요
그러게요
이쁘네요...
setEmailTest가
setState인가요?
넵넵! useInput가 handler 받는 거에요
이 글 보고 as const 하니까 에디터에서 알려주는 에러 메세지가 없어지긴 했는데, 왜 그러는지 모르겠네요..
target.value가
감사합니다 ㅎㅎ
사진
undefined일경우 때문에
webstorm에서 이 테마 쓰고 있어요
에러뜨는거같은데용ㅇ
아
undefined이면 handler가 string으로 전달되는 건가요?
지금
onChange event 타입이랑 헨들러에 event타입이랑 일치하는지 확인해보시는게
그러고 undefined일경우 헨들링도 해야할듯??
as const를 안해주시면 return 배열 타입이 Array<string | ChangeEventHandler> 형식으로 됩니다
onChange가 setEamilTest 말씀하시는 건가요??
onChange 프롭스입니다
아아
감사합니다
감사합니다!!
as const를 이제 처음 알아서 공부해봐야될거 같아요 ㅠㅠ
경프님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
혹시 자바스크립트 관련 강의 들었는데 좋았던거나 추천할 만한게 있으실까요?
javasript30이뇨
오 감사합니다 다 봐볼께요!
스크롤 이벤트로 지금 스크롤이 맨위인지 구하고있습니다. 여기에 throttling 넣어서 250ms? 정도로 해서 적용하고 delta값을 한 넉넉하게 50정도 줘서 topValue가 delta보다만 작으면 그냥 탑이라고 쳐줘도 모바일에서 터치같은건 파멸적(?)으로 빨리 올릴수있잖아요 throttling을 적용하면서 안전하게 현재 스크롤이 탑인지 알수있을까요?
포트폴리오에 넣을 프로젝트 팀 구해서 진행 해보신분 있나요? 있다면 어디서 어떻게 팀 구하는지 알 수 있을까요??
Window.scrolltop 이라는 속성이 있지않나요??
원하는 지역의 케이크 가게들을 모아보고 자신의 조건에 알맞는 가게를 쉽게 찾을 수 있어 주문제작 케이크를 간편하게 주문할 수 있도록 돕는 서비스인 원케이크를 만들고 있습니다. 현재 기획자, 디자이너, 백엔드, 프론트엔드 개발자 2명이 함께 개발을 하고 있으며 appStore 및 playStore에 배포를 하였습니다. 서비스 소개 에 대한 자세한 정보는 해당 링크에서 확인해주세요~! https://makeus-challenge.notion.site/a5e1d52b793a4470ae6719cd54a31c6b 프로젝트 목표 저희 서비스는 현재 판매자 기능을 거의 만들었고 이제 소비자 기능을 채워나가야합니다. 12월 내 까지 소비자 페이지를 모두 만드는 것을 목표로 하고 있습니다. 예상 프로젝트 일정(횟수) 저희는 주 2회 오프라인으로 모여 회의를 하고 있습니다. 개발 과정 전체는 slack으로 공유되고 있으며 진척상황은 figma를 통해 개발 하고 있습니다. 예상 모집인원은 프론트엔드 개발자 한 분을 모집하고 있습니다. 지원 기준 1. Mac을 소유하고 계신 분 2. React Native, Typescirpt, React Query를 다뤄보신 분 3. 팀원들과 둥글둥글하게 소통하고 책임감 있게 남은 기능을 모두 만들고 프로젝트를 성공적으로 마치실 분 연락은 https://open.kakao.com/o/stgf5Yne 오픈체팅방 또는 010-4183-2998로 문자 남겨주시면 감사하겠습니다! 정말 열정적인 팀원들이니 좋은 분과 함께 하였으면 좋겠네요 ㅎㅎ
여기있네요~!
혹시 RN 하실 줄 아실런지요 ㅎㅎㅎㅎㅎ
scrollTo 라고 어딘가로 스크롤하는 메소드만 잇는거같아요;
우움 사이드 프로젝트모으는 사이트들이 여럿 있더라구요. 구글에 사이드 프로젝트 사이트 치시면 블로그에 정리 잘 되어 있어서 한번 검색해보시는걸 추천해용
저도 거기에 있는 사이트들에서 지금 팀원 모으고 있습니당
앱만 하시나요??
넵 RN 할 줄 아시는 프론트 개발자만 찾고 있습니당
한 분 찾고 있는데 참 힘드네용ㅜ.ㅜ
이거
window.height 계산해서ㅓ
pageUOffset
document.body.offsetGeigh 랑 비교해가지고 처리해보세요
저도 비슷한거땜에 환장하는줄;;
삭제된 메시지입니다.
아니 왜 자꾸 Height
그냥 deltaY같은걸로 처리하면 답이없는게
휠이벤트자체가 경우에 따라서 한번에45번넘게 호출되는경우도있다고..
아니면 div 잘감싸서
인터섹션 옵저버로
알아내는 방법이 부하가 가장 적지 않을까요
div에 메소드 이용하는게 아마 소스도 제일많았던거같아요. 저는 프론트 잘몰라서 쉽게갈려구 윈도우사이즈로 계산함...
앱은 할줄 몰라 아쉽....ㅠㅠㅠㅠㅠ
스크롤 이벤트 리스닝 보다 요샌 intersectionObserving을 많이 하지 않나요?
가끔 밖에 나가서 서브로 사용할 맥북을 찾고 있는데요. 혹시 M1 맥북에어 램 8기가로 작업하시는 분 있으시나요?
ㅠ 그러면 바디바로밑에 더미로 뭐하나 끼워놓고 옵저빙하는해야하는건데 것도 뭔가;; 제 헤더도 fixed라서
경프님~~ 반갑습니다 어서오세요 :)
-님, 라이언님 모두 모두 반갑습니다 ~
아 fixed 헤더를 적용해놓으신 상태면 관찰할 대상 요소가 없긴 하네요
먹보 네오님이 나갔습니다.
저요 ! 그냥 프론트작업하는데엔 전혀 무리없습니다
프론트만 작업하는데에는 무리가 없는데, local server 를 띄우고, RN으로 작업하면서 에뮬레이터 ios android 다 띄우고 하면 고생합니다
오 두분다 감사합니다!
답변 감사합니다~~ 사이드 프로젝트 검색해보니깐 많이 나오네요~ 이 단어가 생각이 안나서 헤매고 있었는데 감사합니다~~
오전에 주석관련해서 이야기 나누었던게 기억이 나서 오늘 추천영상에 뜬 유튜브 공유합니다 ㅋㅋ https://youtube.com/shorts/FXxaVX7j9TE?feature=share
ㅎㅎ 코딩애플님 주석 영상 많이 올라오네요 조회수 많이 나오실듯
저도보고 적용해보고있어요 ㅋㅋ!
음악듣는 어피치님이 두명이네요
0.00000004의 숫자가 4e-8
이렇게 날라오는데
보통 클라이언트에서.. 다시 바꿔주나요?
뜬금없이 한개의 데이터만 저렇게 날라오네요 ..ㅋ
안녕하세요 프론트엔드 취업준비생입니다 질문드립니다 리액트개발자로 취업준비를 하고 있는데 html css js es6 react까지만 하고 ts나 next.js는 준비 안하고 취업 문 두드려도 신입으로 취업이 충분히 가능할까요?
이모티콘 혹시 리액트 프로젝트 구조나 아키텍처 관련 학습에 도움될만한 자료가 있을까요,,,?
저도 궁금합니다~!
리액트까지만 파면 nextjs는 리액트 파생 프레임워크라 크게 다르진 않아요
제가 딱 이랬어요 ts는 자동완성 툴정도 맛보기만 해봤었구요
Ts는 js숙련도가 생기면 하라는 말이 있던게 이 부분도 궁금합니다
고수님들 답변 한번 부탁드립니다 ㅠ
그거야 ts는 js를 타입언어로 다뤄서 컴파일시키는거니까
js를 모르면 ts를 공부하는게 의미가 없죠
제가 느낄때는 ts가 어려워서 그런다기 보디는 ts 관련 학습자료들은 다 js를 안다는 가정하에 기술이 되어서 이해하기 어려운 것 같아요
그렇다면 js실력이 어느정도 올라왔을때 하는게 좋을까요?
자바스크립트로 개발하면서 정적타입에 대한 필요성이 느껴질때..? 근데 필요성을 느끼려면 타입스크립트를 겪어봐야하니.. 그냥 하시면 되지 않을까요? 크게 다르지도 않아요!!
js로 투두리스트 만들줄알면 Ts로도 한번 전환하는 작업해보면서 익혀보세요
손으로 쳐봐야 좀 빨라요
다른 문법이 아니라 확장이니 js 공부하는 중에 한 챕터처럼 껴서 보다가 점차 ts로 전환해가면 되지 않을까요?
es6 문법을 공부할 쯤...! 정도이지 않을까 싶어요
ts사용은 빠를 수록 좋은 것 같아요 알려줄 사람이 있다면 먼저 사용하는걸 추천합니다
그냥 js 파일 보면 무슨뜻인지 읽을수만 있어도 가도 될 것 같아요
앗 그렇군요 답변 감사드립니다
Ts 랑 Next는
무조건하시는걸추천합니당
준비안하고 취업문 두드리면 많이 좁고 힘들겠지요?
무조건 무조건이야~
답변 감사합니다 ㅠ
Ts는 천천히 익히시고
함 해보세요~ 판단은 회사가 하는거니까요 저는 모르고도 잘 취업했어요
Next는 공싣문서만 봐도 될정도로
공식문서가 잘돼있어서
생각보단 어렵진 않을거에요
타스는 좀 토나오던데.. ㅋㅋ
보통 우대 아닌가요 저건
TS는 필수인거같고, next는 우대 인거같아요!
젤중요한건 js랑 리액트긴하죠
아 리액트나 뷰
자바스크립트만 잘하면 입사시켜서 좀만 해도 잘들 하시니까
1년정도 사이에
타입스크립트가 필수가 되는 분위기로 바꺘어요..
Any script가 되도 써야죠
고수분들 많이 답변해주셨네요..
참고해서 열심히 준비해보겠습니다 취업준비생이라서 아는게 없었는데 도움주셔서 정말 감사드립니다 ㅠ
저는 next만 쓰다보니 react 쓰면 잠시 어색해집니다ㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
nuxt랑 vue 쓸때도 비슷했던거 같아요
갑자기 작성하는 코드도 많아지고, 안되는거에 답답함도 생기고
😊
next나nuxt 진짜 편한것같아요
어드민페이지도 ssr로 많이 만드나요?
굳이 ssr로 만들필요없을거 같긴한데 기획에따라 다르니 ... 많이는 안만들거 같아요
역시 그렇겟죠?
네.. 어드민페이지 많이 만들어봤는데 저는 csr로만 만들었어요 제가 빨리 찍어내는게 좋기도 하고 관리하기도 편해서요
저는 cra 쓰느니 next를 썼는데 요즘에는 next 안쓰면 vite도 좋을 것 같네요
저흰씁니당 라우팅이 편해서..
그냥 사내에서만 쓸거니 어렵게 생각하지 말고 관리하기 편하신거 인수인계 받은 사람이 유지보수하기 쉽게 만들면 될거 같아요ㅋㅋ
라우트 컴포넌트 만들지않아도되는게
너무 매력적이라서 ㅋㅋㅋㅋ 걍 사용하고있어요
오호... 라우트 해주는게 크게 작용하는군요 저는 아무래도 csr이 배포가 편해서 이쪽을 선호합니다
안녕하세요 린트 때문에 에러를 마주 했는데 can't resolve reference #/definitions/directiveConfigSchema from id # 라는 에러입니다;; 서비스 구동은 정상적으로 작동되는데 신경쓰여 해결하려해도 검색했을 때 원하는 답변을 찾기 힘들어서 혹시 유사한 에러를 경험하신 분들 있을까요?
혹시 node_modules 안에 있는 types.d.ts 에
새로운 타입을 추가하고 싶을땐 어떻게 설정하나요?
해당 패키지 안에 설정을 했었는데
그거
declare로 덮어씌울 수 있을걸용
이러면 그 순간만 괜찮지 문제가 되네요
모듈지우고 새로 설치하면 말짱도루묵 아닌가여?
네네 그래서
지금 declare로 추가해줄려고 하는데
혹시 이거랑 관련 있을지요? https://github.com/typescript-eslint/typescript-eslint/issues/5525#issue-1346848186 이게 아니더라도 깃허브에 검색하니까 뭔가가 나오긴 하네요 잘 해결되시길 기원하겠습니다
이런게 있긴 하네요
어딘가 공식문서에서 본 기분인데 어딘지는 모르겠네요 ㅓ
혹시 궁금한게 어떻게 검색해야할지
저도 옛날에 global.d.ts 설정해서 해본적은 있는데 이건 좀 달라서 헷갈리네요
오! 감사합니다!
위에 올려주신 링크에 오리지널 URL 타고 들어가니 깃허브 이슈가 나오는데 1. 골치아픈 문제들로 인해서 구현이 될지는 미지수이구 2. 누군가가 다음 해결책?을 내놓았는데 따봉을 많이 받은 상황이 맞는지요? https://github.com/typescript-eslint/typescript-eslint/issues/5525#issue-1346848186
성공 하셨나요?
아나ㅠㅠ 링크 또 잘못 복사됐어요ㅜㅜ
제가 말했던 부분은 이 부분인데 https://github.com/microsoft/TypeScript/issues/36146#issuecomment-1190925432 영양가 있는 정보인지는 모르겠습니다 전체 대화 타래를 보시면 도움될 만한 게 있을 수도 있어서 일단 올립니다
새로운 타입을 추가하는건 괜찮은데
이게 기존 타입에 새로 제가 원하는 타입 추가하는건 잘 안되네요 ㅜㅜ
@Herb @바보fe 너무너무 감사합니다! 주신 레퍼런스 읽어보다가 @typescript-eslint/eslint-plugin를 5.34에서 5.33으로 버전을 낮췄더니 오류가 사라졌습니다!
타이퍼그라피어님이 나갔습니다.
제작자가 어제? 확인했고 수정하고 있는듯 보입니다 마지막 커밋은 5시간 전이였습니다! lint 적용시에 고려하면 좋을 것 같습니다 :)
엘라님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
response에 setHeader로 Authorization을 넣어주는 이유가 있나요?!!
클라이언트의 쿠키에 토큰을 담아주기 위함이 아닐까요?
엘라님! 반갑습니다 :) 어서오세요
하이용
하이하이!! 안녕하세요~
useEffect vs 핸들러함수에서 처리 저는 후자를 선호하는데... 전자를 선호하시는 분도 계실까요?
여기는 프론트엔드에 대해 궁금한게 있을때 편하게 물어보고 아는 것은 기꺼이 알려주면서 서로 공유하고 함께 성장하고자 하는 공간입니다~ 편하게 글 남겨주세요
뭘 처리하는건가요
그냥 쿠키를 셋해주면 정상동작 하지 않나요 ?
예를 들면, 특정 state를 변경하면 다른 state를 변경시키는 경우.. 전자는 useEffect의 deps를 활용해서 변경하고, 후자는 핸들러 함수에서 처리한다능 의미엿습니다.
아아
그냥 함수로 처리하는게 더 편한것같습니다
개인적으론 리렌더링의 트리거, useEffect 동작 설명을 위한 불필요한 주석 추가, 동작을 예측하기 어려움, useEffect 두 개이상 사용할 경우 체인패턴으로 동작 예측이 더더욱 어려워짐 등의 이유로 ..
라고 생각했는데 혹시 제가 잘못 알고 있는 부분이 있을까해서 다른 분들 의견도 궁금합니당!
거의 대부분은 핸들러함수에서 처리가 가능해서..정말 useEffect가 필요할 때는 드물더라구요..
일반적으로 웹이 아닌 네이티브 어플리케이션(ios, android)에는 쿠키가 없기 때문에, setCookie 가 아닌 response body 혹은 header를 통해 토큰 정보를 제공하는 것으로 알고 있습니다.
답변 감사합니다 👍 좀 더 공부해보겠습니다
그냥 인증 방법중에 하나입니다.
next에서 라우팅을 한글로 해보고싶은데 잘 안되네요.. 혹시 해보신분 계신가요
인코딩 디코딩하셔야 합니다
pages 하위 파일들을 get 요청보내서 작업하는걸로 아는데 server.js파일로 한번 작업해보면 될듯합니다
정확한 상황은 아니나, params로 넘어온 데이터중에 한글 이름이 있었고 이걸 파싱해서 데이터를 넘겨주는 부분 로직입니다. getTeacherByName이 한글인데 이 부분에서 encodeURL 안하면 에러를 던지더라고요. 확인해보세요.
사진
감사합니다 한번 찾아보겠습니다
코드까지.. 감사드립니다
Next js로 쿠키를 받아 보신분 있으신가요??
리액트와 같은 방식으로 하면 안되는거 같네요…
코린이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
쿠키를 어디서 받으시는데요?
쿠키는 서버로 부터 받아옵니다!
쿠키는 보통 서버 response에서 헤더에 붙여주지않나요?
서버에서 보내시는거면 response에서 받아서 브라우저에 Set 해주셔야 하지 않나요??
그게 아니라 이미 저장된 쿠키를 NextJS 구조에서 ServerSideProps나 API쪽 영역에서 쿠키값 받고싶으신거면 브라우저에 쿠키가 저장되있으면 Context쪽 객체나 Request 객체에서 사용하실 수 있어요. Request 객체 정보 -> https://nextjs.org/docs/api-routes/request-helpers Context 객체 정보 -> https://nextjs.org/docs/api-reference/data-fetching/get-static-props#context-parameter
getInitialProps를 이용해서 해결했네요 ㅠㅠ.. 감사합니다!!
혹시 비동기 통신같은 경우는 다들 어떤 식으로 에러 핸들링 하시나요? 유저에게 보여주지 않을 에러의 경우 단순히 console log (err)가 아니라 어떤 아키텍쳐로 관리 하시는지 궁금합니다!!
저는 500에러 같은 경우는 ErrorBoundary를 통해서 sentry에 로깅한 뒤, 500 페이지를 보여주고 있습니다
저두 이렇게 해뒀어요
혹시 간단한 예시가 있을까요?
리액트 공식문서에잇을걸요아마 ...?!
컴포넌트를 하나 랩핑 한다는 말씀이신거죠?
엑시오스 인터셉터로 하신듯
Errorboundary는 sentry에서 next js나 react 예시를 문서로 잘 나와있어영
그럼 500 에러 페이지 같은 것도 404처럼 하나 해서 핸들링을 하시는지 궁금하네요..근데 그런 에러 페이지를 보여줘야 하는지가 의문이긴 해서요
500에러 감지같은 경우는 저는 react query 쓰고 있어서 useErrorboundary 옵션을 설정했어요
아아 리액트가 아니라 센츄리문서 였나봐요
next js에서 500에러에 대한 페이지를 404처럼 지원하고 있긴한데
그냥 404제외한 에러페이지들을 하나로 처리하셔도 괜찮을 듯 해요
서비스가 정지 되는 것보다는 나을것 같은데 500에러라고 페이지를 명시 해주는 것도 유저 입장에서 좋은게 맞는지 의문이긴 합니다 .
저도 딱히 500에러라고 명시하기 보단 기본 에러페이지와 유사하게 보여주고 있는 것 같네요
기본 에러 페이지라 함은 요청하신 페이지에 접속할 수 없습니다 와 같은 커스텀 에러 페이지 말하시는 걸까요?
아이스크림 든 네오님이 나갔습니다.
넵넵
약간 고객센터 문의를 띄우는 페이지..
울고있는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 혹시 git commit 시에 "npx: 85개의 패키지를 2.273초만에 설치했습니다." 이런 문구가 뜨는데 왜그런지 아시는분 있으실까요 ! husky pre-commit 설정하긴했는데 허스키파일에는 린트체크하는것 밖에 없거든요… 이유가 뭘까요
여러분혹시 컴포넌트구조같은거는 어떻게공부하세요? 혼자 막구현하다보니 이런 부분에서 어떤식으로 짜면좋을지 잘모르겠는데..다들 이부분은 어떻게공부하시나요?
저는 그냥 고수분이 짜신 프로젝트 하나 선택해서 비슷하게 짜봤습니다
벨로그도 코드 공개되어 있어서 참고하곤 했습니다
전 부딪혀서 직접 뼈로 느낍니다(?)
요즘은 ui 라이브러리들 까보려고 생각 중이에요
컨퍼런스 발표도 보고해도... 막상 이론은 느낌이오는데
진짜 도메인도 제각각이라 정답찾기 힘듭니다
적용하기 어렵더라구요ㅠ
이게 은근 중요합니다
그리고 같이 의논할 동료도 필요하구..
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> 이런 경우에 container에 display:flex를 주게 되면 1,2,3이 각각 플렉스의 아이템이 되잖아요? 그런데.. <div class="container"> 단순 텍스트 </div> 이런 경우에는.. "단순 텍스트" 이 문자열이 플렉스의 하나의 아이템이 되는 걸까요?
삭제된 메시지입니다.
삭제된 메시지입니다.
그렇다면 궁금한게요.. <div class="container"> 그냥 문자열 </div> .container{ display: flex; justify-content: center; align-items: center; } 이렇게하면 그냥 문자열이 정 중앙에 오게 되는게 궁금합니다. 저 단순 문자열이 하나의 item으로 취급을 받는건지가 궁금합니다.
다시생각해보니 텍스트도 중앙정렬시켜주니..
<div class="container"> 1 <div></div> 2 </div>
하고 container에 justify-content:space-between으로 바꿔서
네 그경우도 해보니 space between 잘 먹더라구요
어떻게 정렬되나 보면 될거같네요
그럼 텍스트노드도 정렬시켜주나봅니당
그럼 굳이 플렉스 컨테이너안의 아이템들을 태그로 묶어주지 않아도 하나의 아이템으로 인식하는걸까요?
엘리먼트만 노드인게 아니라 텍스트도 노드라서
노드를 다 정렬시켜주나봐요
아하 감사합니다!!
직접 부딪힌다는게.. 어떻게말씀이신가요?
0A. Disclaimer: 좋게 쳐 주어야 아마추어에 불과한 경험없는 학생입니다 0B. 컴포넌트 구조 짜는 것 관련해서 개인적으로 느꼈던 바가 있는데 맞는지 확인받고자 해서 글을 올려요 맞는 내용이라면 도움이 되시길 바라는 마음도 있어요 1. 제게 가장 큰 울림을 준 글 중 하나가 Robert C. Martin의 Clean Architecture 글입니다. https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html 백엔드 구조이기에 구조 자체에 너무 연연하실 필요는 없지만 저는 여기서 - 큰 애플리케이션도 결국 (잘 안 바뀌는 핵심) <- (거기에 의존하는 잘 바뀌는 디테일)의 의존성 트리로 구성된다는 점 (본문에서는 동심원으로 표현하고 있습니다) - 핵심을 바꾸지 않으면서 디테일을 바꾸기 위한 수단으로서 디자인 패턴들이 존재한다는 점 을 느꼈습니다. 2. 그래서 저는 "구조를 보거나 구상하려고 할 때"에 한해서는 어떤 부분이 변하는지, 어떤 부분이 안 변하는지, dependency tree가 어떤지를 파악하고 나서 거기에 맞추어 코드를 보거나 짜게 되는 것 같습니다.
피자 먹다 자는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
어젯밤에 글을 적었는데 밤이 늦어서 답장을 못 드렸어요! 아 그리고 patterns.dev 이 사이트도 좋은 얘기 많이 하시더라구요! 다만 저는 아직 이거 이전에도 봐야 할 게 많아서 보지 못했습니다. 좋은 하루 되시길 바랍니다!
큰 애플리케이션도 결국 (잘 안 바뀌는 핵심) <- (거기에 의존하는 잘 바뀌는 디테일)의 의존성 트리로 구성된다는 점 (본문에서는 동심원으로 표현하고 있습니다) 이것에 많은 인사이트를 얻었습니다 감사합니다~~
혹시 선생님 여러분… React에서 useReducer 부분 강의 다시 듣고 있는데요, useState이 못 하는 뭔가를 useReducer가 해주는 줄 알았는데 그런 느낌이 아니구 그냥 같은 코드를 더 깔끔하게 짤 수 있게 해준다고 이해하면 괜찮을지요? 이런 생각을 했던 이유는 간단한 예제를 만들어보는데 https://codesandbox.io/s/usereducer-t7v43n?file=/src/App.tsx 뭔가 useReducer를 쓰나 useState을 쓰나 비스무리하게 완성이 되어서 질문드렸습니다. 근데 그럼 useReducer를 쓰면 좋은 상황이 있나요?
상태 관리를 어느 단계에서 할 수 있냐의 차이가 가장 크지 않을까요?
제가 이해하기로도 state를 한 번에 모을 수 있게해준다의 장점이 다였는데, 다른점이 있는지 궁금하네요
Action의 type으로 변환시키는 액션의 가짓수를 제약할 수 있어요
선생님들 모두 도와주셔서 감사드립니다! 올려주신 답변과 아래 글을 보니 뭔가 정리가 되는 느낌이네용 https://kentcdodds.com/blog/should-i-usestate-or-usereducer state들이 독립적이면 useState를 쓰는 것이 더 깔끔한 경향이 있으며 굳이 useState를 써서도 비슷한
https://kentcdodds.com/blog/should-i-usestate-or-usereducer 저는 이 글을 보고 많이 와닿았어요😄
…반면 state들이 엉켜서 서로 영향을 주는 경우 state를 묶고 action을 제한시켜서 상태 변화를 한 눈에 들어오게 하는 것이 더 깔끔해보이는 경향이 있다. 여기서 useReducer가 잘 어울린다. 물론 굳이 useState를 "노오력해서" 써도 비슷한 구조를 가져올 수는 있으나, 그냥 더 표준적이고 보기 편한 useReducer를 쓰는 것을 우선 고려해봐야겠다 라고 결론을 내렸습니다. 도와주셔서 감사드립니다!!
.님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
시드님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
처음으로 사이트를 배포해봤는데 신기하네요..ㅎ
감사합니다!
dark mode랑 light mode 전환될때
색 바뀌는 요소에서 transition: background-color 0.3s ease-in-out; 추가하면 부드럽게 전환될것같아요
동영상
오좋네요
전 아직까지 배포한 서비스 경험이 없는데.. 부럽네요
있어도 교내 서비스라 외부에 공개 못하공..
그냥 간단하게 해본거라... 전 아직 초짜중에 초짜입니다
와!! 멋지네요!! 잘 만드셨네요 ㅎ
시드님 반갑습니다 어서오세요 :)
mini님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
mini님 반갑습니다 어서오세요 :)
안녕하세요 ! 리액트 공부 중인 퍼블리셔 입니다 ^.^
안녕하세요! 현재 회사에서 next로 개발중인데요! 각 page마다 접근 관리를 개선해보려고 합니다. 현재 각 page에 해당하는 component에 내 정보가 있는지 없는지 확인해서 redirect해주는 custom hook으로 접근을 제한하고 있는데, 이는 한눈에 들어오지도 않고 한눈에 들어오지도 않고 일일히 page마다 hook을 넣어줘야해서 비효율적인거 같습니다! 따라서, react-query key를 관리하는 방식처럼 한 파일에 모든 route를 모아놓고, _app.tsx에서 route 체크를 통해 application 코드는 건들지 않고 route.ts만 수정하는 방법으로 각 route의 접근 설정을 해보려고 하는데 혹시 더 좋은 방법이 있을까요???
미들웨어를 이용하시는건 어떤가요?
page마다 hook을 넣어주는게 자연스럽고, 기획의로부터 유연하게 대응이 가능해 저라면 현행유지할 듯 하네요 라우트로만 분기하지 않고, 데이터에 따라 분기하는게 점점 늘어가면서 유지보수가 괴로워졌거든요
오! 그럴수도 있겠군요!
next 미들웨어 말씀하시는건가요?
JS로 스타일 변경이 안되네요
사진
넵
위에 bgc 변경하는건 먹히는데 밑에 코드가 적용이 안되요ㅠㅜ
해결방법 아시는분 계실까요.>?
!important 쓰셔도 안되나요?
네..
콘솔창에서 먹여도 적용이..
그럼 해당 graph객체가 대상을 잘못가리키고 있는것 아닐까요?
그렇다기엔 바로 윗줄은 적용이 되서..
환영합니다~ 이곳은 궁금한 것을 물어보고 아는 것은 공유하며 함께 성장하고자 하는 곳입니다~ 리액트나 프론트엔드를 하면서 궁금한것들이 생겼다면 편하게 물어보세요
시무룩한 팡교뚜벅이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
어제 RangeError 해결해 보신 분 있냐고 여쭤봤었는데, 혼자 해결 방법을 생각해 보던 도중 RangeError가 날 정도로 큰 파일을 스트림 방식으로 다운로드 받는 데에 큰 도움을 주는 라이브러리를 찾았습니다! 이미 알고 계시는 분들도 꽤 많으실 것 같지만 매우 유용하게 사용하고 에러 또한 해결했기 때문에 공유 드립니다 ㅎㅎ 로직이 하도 복잡한 프로젝트라 하나하나 설명 드릴 순 없겠지만 RangeError로 인해 Preview Table을 렌더하지 못하는 상황이었지만 Blob.slice(), Array.shift(), Array.pop() 메서드를 통해 그것 또한 해결했습니다! 혹시 프로젝트 도중 파일을 다루어야 할 일이 많으신 분이 계시다면 개인적으로 와주시면 코드 공유해 드리겠습니다! 참고한 레퍼런스와 사용한 라이브러리 링크 첨부합니다! https://github.com/jimmywarting/StreamSaver.js https://stuk.github.io/jszip/ https://ohgyun.com/782 https://heropy.blog/2019/02/28/blob/
이모티콘 뚜벅이님 안녕하세요
세미콜론 빼보시는게
안녕하세요! 반갑습니다 : ) 계신분들이 많아서 인사를 할까말까 고민했는데 먼저 인사해 주셔서 감사합니다! 잘부탁드립니다 ㅎㅎ
함수로 전달은 안되나요? 스트링이여서 그런가 싶어서요
따뜻한 방이니 편하게 얘기나눠주세요 :)
아 아니네요 세미콜론 때문인가봐요 😃 https://stackoverflow.com/questions/44716559/how-to-change-clip-path-with-javascript
사진
filter를 걸어서 undefiend를 없애도 타입추론은 바뀌지 않네요?..
어떤식으로 되어야하죠?
const ee: ({ aa: string; b: string; c: string; })[]
이걸 기대했어요
이미 obj3이 undefined라 그런 거 아닐까요 런타임 까지 구현해서 힌트를 제공해줄수는 없으니..
필터 함수에 타입 잘 걸어 주시면 추론이 될 것으로 기대됩니다.
단순 궁금하신지는 모르겠으나 obj3에 undefined 자체가 안들어가게 하는 걸 추천드립니다.
오.. 감사드립니다 다들
갈길이 머네용
같이 가용
메소드 사용할 때, 사용자 정의 타입가드를 사용하지 않으면 보통… undefined가 사라지지 않던데 정확한 이유가 뭘까요???
어서오세요!! 인사가 늦었습니다 :) 이곳은 프론트엔드나 웹 개발을 하면서 궁금한 것을 물어보고 아는 것들은 서로 공유하며 함께 성장하고자 하는 곳입니다. 편하게 글 남겨주세요!! ㅎ
filter(Boolean)으로 바로 넣어볼래요?
그게 어떤거에요?
사진
이런 상황을 이야기 한 것이었습니다!
``` const f = (e: unknown) => e !== undefined; 의 타입이 (e: unknown) => e is Exclude<unknown, undefined>가 아닌 (e: unknown) => boolean으로 추론되기 때문으로 보입니다.
땡땡 관련 문항이 있어서 변수명을 짓고 있는데 땡땡은 object고 각 문항마다 q-1, q-2.. ex) 땡땡: { q-1: '', q-2: '', ... } 이런식으로 짓고 있습니다. 다른 문항들은 번호가 있어서 저렇게 지었는데 마지막 문항이 '~~에게 하고 싶은 말을 쓰세요' 이건데 번호가 없거든요.. 혹시 괜찮은 변수명 어떤게 있을까요??
얼핏 봤을 때는 당연히 string만 남거나 빈배열이 나오기 때문에 undefined 같은 경우에는 걸러진다고 생각이 드는데 추론이 명확이 안되는 이유는 뭘까요…?
타입스크립트가 "1"을 보고 "1"로 추론할지 string으로 추론할지 결정짓는 문제처럼 타입스크립트의 타입 추론 알고리즘에 대한 깊은 이해가 필요할 것 같아서 제가 논의할 수준을 벗어난 것 같습니다. 혹시 이에 대해 아시는 지식을 나누어줄 고수 분 계시면 감사드립니다.
답변 감사합니다!! 사용자 정의 타입가드를 쓰면 해결되는건 알겠는데, 왜 못하지? 궁금증이 들어서 사소한 의문이었습니다!
땡땡1: [ q-1, q-2 ] 땡땡2: [ q-1, q-2 ] 땡땡3: [ ~~에게 하고 싶은 말을 쓰세요 ] 이런 느낌인가요?
v-model 설정중이라 땡땡 = { q-1: '', q-2: '', ... q-14: '', } 이런식입니다
너무 별거 없는 질문이지만 떠오르지 않아서 여쭤봅니다..ㅠㅠ
그런데 마지막에는 q-20: "~~에게 하고싶은 말을쓰세요" 가 들어간다는거죠?
(어쩌면 q-20이 아닐수도 있고요)
문항대로 간다면 q - ~에게 하고 싶은말 이 되어야 합니다
똑같네요!,..
나머지들은 다 번호가 있고 저문항만 번호가 없어서요
그런데 { } 이게 순서가 보장이 될까요?
아.. 음.. 넵 v-model로 연결한거라 1대1로 연결되어있습니다
땡땡.q-1 // 땡땡.q-2 이런식으로 접근하고 있습니다
마지막은, 그냥 메시지 작성하는 느낌인건가요? (선생님에게 하고싶은 말.. 이라던가)
사진
안녕하세요 비동기식 데이터 전송 관련해서 질문드립니다 아래 코드에서 전송이 정상적으로 되었을때 alert창을 띄우는데 alert에서 엔터를 빠르게 여러번누르면 동일한 데이터가 관리자로 여러번 전송되는 문제가 있습니다 이걸 어떤식으로 막아야할까요?? 엔터키 막는건 해봤는데 적용이안됩니다ㅜ 도움을 구합니다..!
네넵!
뭔가 메시지라고 하셔서 그런지 q_message로 하면 될거 같네요 하하
뭔가 저런걸 마땅히 표현할 단어가 생각이 안났었는데 감사합니다 ㅎㅎ
ㅎㅎ네
행주 프론트 신입님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요, 반갑습니다.
typescript 내부의 filter 메소드 타입 선언을 보면 아래처럼 Array의 타입을 그대로 리턴합니다 filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
요것만 봐서는 어떤식으로 요청이 일어나는 동선인지 알수가 없어서 ㅎㅎ form에 submit 이벤트가 걸려있어서 엔터를 누르면 전송되버리는 걸까요? 아래중에 해결책이 있으면 좋겠네요. 1. 데이터 전송 성공시 보냈던 데이터를 초기화 하고, 데이터가 비어있으면 전송을 보내지 않는다 2. 호출 상태를 관리해서 API가 호출중이면 API를 호출하지 않는다 추가적으로 빈번히 호출이 일어날 수 있는 구조라면 디바운싱 적용을 고려해봐도 좋겠네요.
어서오세요 반갑습니다~
혹시 버튼에 focus가 되어있어서… alert() -> 엔터 닫힘 -> 버튼 focus -> 엔터 -> 전송 이 되는건 아닐까요 ㅎㅎ
백단에서 자바로 데이터를 관리하고 프론트에서 json형식으로 전송하는 것 같습니다 전송버튼은 a태그에 send() 요론 형식입니다. 말씀해주신 방법 시도해보겠습니다! 부끄럽지만 데이터 코드는 처음 만져보네요..
말씀해 주신 것처럼 다음과 같이 오버로드가 2개가 있는데, ``` filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[]; filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[]; ``` predicate가 `(value) => value is S` 형태로 추론되면 첫 번째 오버로드가 적용되어 타입이 좁혀지게 되고, 그렇지 않은 경우 두 번째 오버로드가 적용되어 타입이 유지되게 됩니다.
focus는 css말씀하시는걸까요?! alert 띄워져있을때 엔터기능 막기 해도 alert창까지는 제어가 안되던데 페이지자체에서 엔터가 먹히는건가.. ㅎ어렵고만요
정말 완전 이해됐습니다! 감사합니다!!
추가로 답변 해주셔서 이해가 잘 됐습니다! 감사합니다!
선배님들
질문이 있습니다!!
개인 업무정리하는 툴 어떤걸로 다들 쓰시나욤!!
노션요
notion!
예전에는 구글 시트를 많이 썼었어요~
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 웹사이트 제작하는 사이드 플젝하셨을 때 저작권 관련해서 주의해야할 점이 있나요?
안녕하세요 휘파람 프로도니 반갑습니다 :)
안녕하세요
보통 크게 주의할만하지는 않지만 폰트랑 배너이미지등은 좀 주의했어야 했어요
라이브러리 라이센스도 확인..
어서오세요!! 이곳은 프론트엔드에 대해 궁금한 것들을 물어보고 아는 것들은 서로 공유하면서 함꼐 성장하고자 하는 곳입니다. 편한게 글 남겨주세요~~
저 여러분
실무에서 일을 하게 되었는데 기존에 배우던 언어와 다르고 아무리 생각해도 잘 해낼 자신이 있다고 판단되면 퇴사가 답을까요?
잘해낼 자신이 있는데
자신이 있으면 아니죠
왜 퇴사하시나요
아니 오타네요 ㅋㅋ
자신이 없는요
없
어떤 언어의 업무를 주셨나요?
스프링요
자바스프링 프레임웤
행주님은 프론트 포지션을 약속받고 입사하셨는데 백엔드업무만 주신다는건가요..? 원하시는 포지션이 명확하셔야할듯해요
??
프론트한테 왜 스프링을?
jsp?
si중에 프론트나 퍼블 뽑아놓고 java시키는 회사가 있다고 들었는데..
그런거면 도망치세요
만에하나 그런거라면 저도 하루빨리 도망가야한다고 생각….
이건 답해드리기가 어려운것 같아요 또 해보면 재밌을수도 있고, 내가 쌓고싶은 역량이나 경험이 아니라면 빨리 원하는 길로 나가는게 좋겠죠. 스프링도 알아야 할게 넓고 깊을텐데... 저는 백엔드를 잠깐하다 프론트로 온 케이스라 백엔드를 한걸 후회하진 않거든요. 스스로에게 도움이 될지 안될지를 고민해보시면 어떨까요
네, 다들 감사합니다.
진로의 개념이 아니라 회사에서 프론트를 뽑아놓고 다른 업무를 시키는거면
그냥 친구따라 정보통신가고 걍 그렇게 지내다.. 실무로 오고나서
이게 안맞다 싶어요....
회사 자체가 좋진 않은거같습니다
사람 속이는 회사라는 뜻인데..
해결안되는 걸 하루종일 붙잡고 있는게...
너무 생각이 없었던 것 같습니다..
다들 조언 감사합니다
회사 잘골라야합니다
어피치님말씀대로 저도 동의합니다. 나중엔 자바가 아니라 개발업무 외에도 시킬수있다고 생각해서.
어렵게 취업했는데 당연히 엄청 고민될거에요, 저는 이대로 그냥 다닐까 다시 취업하려면 고생인데.. 하는 생각도 했던거 같아요ㅠㅠ 힘내세요
감사합니다
혹시 grafana 써보신 개발자 분 있을까요? 혹시 기존 템플릿은 이미 퍼블리싱 되어있는데 같은 디자인으로 커스텀 하는게 가능할까요?
보통 그라파나같은거 회사에 설치해서 서버 열어서 사용하지않나요?
그냥 회사 내부 모니터용으로 사용하는건가요?
그렇게 사용하는거로 알고있어요
우리 회사꺼로 완전 다르게 보이는 디자인으로 커스텀해서 상품화 하려는데 그 디자인 커스텀이 일반적으로 제가 했던 패턴과 다르게 보여서요
아아 답변 감사합니다!
행주 프론트 신입님이 나갔습니다.
html css 작업하실 때 처음부터 끝까지 html 다 만들고 나서 css 하시나요? 아니면 중간에 css 만지시나요?
던 다만들고 하는게
좋더라구요
저는 작업순서를 나누어서 마크업하고 css 만지고 다음 순위로 넘어가서 작업해요
그러면 ..웹페이지 만드실 때 헤더 메인 풋 나눠서 작업하시나요 아니면 통째로 작업하시나요?? ..
저도 처음엔 bboy님 처럼 하려다가 너무 엉켜서 이렇게 하려구요!!
헤더 메인 푸터도 나누어서 작업해요
저는 처음에 html css로 작업할떄는 html먼저 다 작성해주고 css먼저 하는게 좋았던거 같아요
html이랑 css 동시에 만지는게 편한거같습니다
html먼저 다 써놓고 css만지다보면 구조를 바꿔야될일이 많아서요
저도 이렇게 합니다 ㅎㅎ
근데 뉴비에요님 저번에 수업으로 jsp배운다고 하셨던거 같은데 아직도 하시나요..?
눈물바다에 빠진 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세욧
네 그 시간에 제가 하고싶은 것 하구 있습니다 ㅎ 기억하시네요
모두들 감사합니다
사진
이거 영역 전체를 가운데로 옮기고 싶은데 어떻게 하나요? ㅠㅠ
큰 박스를 넓이 지정하시고
마진 오토 주세요
넵 해보겠습니다
마진 0 auto
헐퀴... 바로되넹
감사합니다 ㅎㅎ
네 안타까운 마음이 컸어서..
ㅠ.ㅠ 이방은 뉴비가 살아남을 수 있는 공간이에요 너무 감사한곳
어서오세요! 반갑습니다 :)
아아...
어지럽습니다...
K-개발자의 삶은 너무나 어지럽군요..
어차피 있어도 못 믿어서 따로 코딩테스트나 라이브코딩 할거 같은데요 허허
혹시 타입스크립트에서 props로 서버에서 받은 데이터나 혹은 비동기로 인해서 undefined로 타입이 유추될지도 모르는 값을 props로 내려줄때는 여러분들은 어떤식으로 props에서 타입 단언하나요? 구지 구체적으로 예를 들자면, 흔히들 마주치는 아래와 같은 케이스로 정리해봃수 있을거 같습니다. Type '{ data: customeType[] | undefined; }' is not assignable to type to type 'IntrinsicAttributes & customeType[]'. Undefined 없도록 단언 시켜줘야 하는데..
하위 컴포넌트를 customType이 있을 때만 렌더링 시켜서 undefined 일 때가 없도록 만드시죠 허허
전 nullish operator를 씁니다
가능하먄 이 방법이 더 좋은 것 같아요
사진
이런모양의 스와이프 슬라이더를 만들려면 서버에서 내려온거를 4개씩 그룹핑하는 작업이 없이도 가능할가요?
서버 통신이 오는거라 어쩔수 없이 Undefined 될 경우도 있어서.. 정녕 간단하게 props에서 해줄방법은 없는지 ㅜㅜ 구지 구조분해할당을 하거나하는 거 없이는 없으려나요 ㅎㅎ
킹쩔 수 없이.. ?. 도배, if (언디파인드) 리턴 <></>;
저 문제 땜에 매번 interface를 만들어줘야되서 interface를 안 만들고 해결하는 좋은 방법이 없을까 해서요 ㅎㅎㅎㅎ
XMLHttpRequest 사용중 readyState로 요청상태 받아오면 send() 하기전까진 계속 대기상태로 있는건가요..? XMLHttpRequest.DONE 되었을 땐 서버로 보내진게 아닌것인가요…😭
form 전송 비동기형식일때 입니다..!!
data?.id ?? 0 이런식으로 기본 값을 설정해주면 돼요
그루핑하는게 맞는 방향같은데용
리액트에서 웹뷰 네이티브 브릿지 구현해보신분 계신가요?
흠 .. is not assignable to type 'IntrinsicAttributes & (0 | CustomType[])'. 결국 어쩔수가 없네요 ㅜㅜ;; interface 매번 만드는것도 골치아파서 다른 방법 찾아보고 있었는데 ㅜㅜ
지금 뷰에서 브릿지 구현해보고있는데 방식자체는 어렵지 않은거같은데 몬가 무슨구조로 어떻게써야 잘쓰는지 모르겠어요
mini님이 나갔습니다.
혹시 지금 코드가 어떤지 예제로라도 간단히 보여주실 수 있으신가요?
클로저를 이용하면 되겠네욤~
뉴피프론트님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
뉴피프로트님~~ 안녕하세요!! 반갑습니다
안녕하세요
프론트쪽에 관심이 생겨 찾아보다가 들어오게되었습니다!
앞으로 잘 부탁드려요!!
네~ 잘 부탁드려요~ 언제든 궁금한게 있다면 편하게 글 남겨주세요!!! ㅎ
해결은 할수 있지만, 매번 이렇게 interface나 type alias 없이 해결할 순 없을까 궁금했었습니다. 1번은 const data = storyList?.data_list as CustomType[]; 1. <StoryPreviewBox data={data} /> 1번도 동일하게 interface 하위 컴포넌트에서 만듬… 2. <StoryPreviewBox data={storyList?.data_list} /> 2번은 하위 컴포넌트에서 Inerface { data?: customType[]}
잘부탁드립니다~
네네 그래서 아까 선생님들께서 대답주셨던 해답들 선에서 해결이 되었어야 되는 것 같아서 이상해서 질문드렸습니다! if / else 활용 ``` const data = storyList?.data_list; if (data === undefined) { return <></> } else { return <StoryPreviewBox data={data} /> ``` ?? 활용 ``` const data = storyList?.data_list ?? []; return <StoryPreviewBox data={data} /> ```
🙏🏻 혹시 tdd bdd와 관련해서 프론트엔드 개발자 관점?에서 도움이 됬던 서적이 있다면 추천해주세요!
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
책은 아니지만, 유튜브 하나 공유해드립니다 https://www.youtube.com/watch?v=L1dtkLeIz-M&ab_channel=FEConfKorea
개인 공부로 Next.js 풀스택이랑 리액트 쿼리 중에 고민중인데 혹시 뭐가 우선순위가 더 높다고 생각하시나요?
next.js는 프론트인데여??
nest.js말씀하시는건가
소중하게 시청할게요 ! 감사합니다 !!
어쩌다 보니 협업에서 클래스형 컴포넌트로 구성된 파일을 받게 되었는데,,, 혹시 다음 코드에서 작동 안하는 원인이 뭔지 여쭈어 봐도 될까요,,,? ㅠㅠ 마감 30분 전,,,
res.data.result.pinList 안에는 값이 있는데, this.setState 가 작동하지 않네요 ㅠㅠ
아아 서버리스 환경을 붙여서 풀스택을 구현해본다는 의미였습니다
next조아요
시무룩한 팡교뚜벅이님이 나갔습니다.
componenetdidmount에 데이터 피칭하전에 렌더링되서 그런게 아닐까요?
어떻게 작동을 안한다는건지는 잘 모르겠으나..! this.setState((prev) => {…prev, pinList: res.data.result.pinList}) 이런식으로 업데이트 해야할것 같습니다..!
async compnentDidMount
혹시 react-slick으로 케로셀 구현할때 다음컨텐츠나 이전컨텐츠가 남았는지 알 수 있는 프로퍼티가 있을까요?? 슬라이드 할 수 있는 다음컨텐츠나 이전컨텐츠가 있을경우는 왼쪽, 오른쪽에 약간의 블러처리를 하고싶은데 생각이 안떠오르네요…
무한 캐러셀이 아닌거죠??
선풍기 바람 쐬는 어피치님이 나갔습니다.
객체 키값으로 { first-name : 'park'} 이런식으로 주고 싶은데 first - name 은 키값으로 줄수가 없다고 에러가 나오는데 이런 특수문자 들어간 키값은 어떻게 설정할까요 감사합니다 :)
"first-name" 이용
object의 key값에 특수문자가 들어가면 안된다는건 규칙이어서
string으로 묶으시던지.. 그외엔 방법이 없을듯합니다
네 그렇습니다!
배열값으로 맨처음 맨뒤 값을 구해서 하셔야겠는데요?
만약 10개의 아이템을 슬라이더에넣고 4개를 보여준다했을때 슬라이더내에 4~7이 있다면 여기서 슬라이더 내에 있는 요소의 인덱스가 4~7까지 이다 라는걸 알수있으면 그렇게 할거같은데 이 방법을 모르겠네요
슬라이더 index state를 만들어서 캐러셀 넘겨줄때마다 해당 상태를 관리하는 방법은 어떠세요?
네네
[currentSlide, setCurrentSlide] 이걸로
처리하면 될거같아요
프론트엔드가 보안 서비스 관련된 회사로 취업을 한다면 (신입 기준) 공부할만한 책이나 강의 추천해주실 만한게 있을까요??
감사합니다,,!!! 해결했씁니다, ㅠㅠㅠㅠ 다음 부터는 조금 더 꼼꼼히 봐야겠네요
사진
안녕하세요! 혹시 여러분들은 react에서 여러 문구들을 어떻게 관리하시나요?? 저는 한줄의 stirng 변수로 관리할 수 있는 장점이 있어 아래처럼 사용하고 있습니다. (string 변수로 관리하면 i18n 적용도 가능합니다.) 걱정되는건 역시 dangerously이다보니 이를 이용하지 않고 string 변수로 관리할 수 있는 방법을 찾고 있습니다. 여러분들은 어떻게 관리하시나요?
차라리 <div>{message1}<br/>{message2}</div> 이런식이 더 낫지않을까요? 저는 dangerously는 외부(서버)에서 받아온 html포함된 스트링 그대로 출력해야할때 씁니당
그러면 message가 쪼개지게 되서 string 변수로서 관리가 불편합니다. ㅠㅠ
한번 시도해보겠습니다 감사합니다!
css의 white-space: pre-wrap을 이용해서 줄바꿈이 가능하게 하고 문자열에서 "xxx\nㅇㅇㅇㅇ" 이런식으로 사용하게 하면 HTML 없이도 여러줄 표기를 할 수 있습니다.
그런데 여러문구를 관리한다는 내용이 어떤 것인지 한번 설명해주실수 있나요?
다국어등을 위한 문구 관리 같은 건가요?
혹시 어제 이야기 나눴던 멋사 프론트 부캠 넘기시려면 저한테 주실래요.? ^^ ㅋㅋ
독학도 될거같지만 부캠 있음 좋겠네여
야나두개발님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
네, 맞습니다. 특정 key값에 각 언어별 문구를 두는 방식입니다
아! 감사합니다!
저는 i18n 방식으로는 json을 이용해서 관리하고 있구요. key는 한국어를 기준으로 작성을 하는 편을 선호합니다. 업무에서는 번역 시트가 존재해서 문구들을 워싱하고 번역을 처리해주면 자동으로 JSON으로 변환하는 툴을 이용해서 반수동으로 덮어쓰는 정도로 관리하고 있어요
번역 시트는 기획쪽에서 관리를 해주고 업데이트시 노티를 주는 편입니다.
디블리셔님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
디블리셔님!! 반갑습니다 어서오세요 :)
안녕하세요! 잘부탁드립니다
네! 저도 잘 부탁드립니다 :) 디블리셔라면 프론트엔드에 관심있는 디자이너 겸 퍼플리셔인가요? ㅎ 이곳은 프론트엔드와 웹 개발을 하면서 궁금한 것은 물어보고 아는 것은 공유하면서 함께 성장하고자 하는 곳입니다ㅎ 이런거 물어봐도 되나? 걱정마시고 내가 궁금한거면 다른 사람들도 궁금할거라는 생각으로 편하게 글 남겨주세요 ㅎ
삭제된 메시지입니다.
노하우 공유 감사드립니다!
혹시 완전 노베이스 인 비전공자가 프로그래머스 코딩 테스트 자바스크립트 레벨 2 까지 가는데 얼마나 걸릴까요? 부캠 지원하려는데 , 실력 테스트를 본다고 해서 여쭤봅니다..
얼마나 시간을 들이느냐에 따라 다르지 않을까요
기간이 3주밖에 안남았는데 어떻게 공부해야 빠른시일내에 그정도 레벨까지 올릴 수 있을지 조언좀 구할수있을까요? 현재는 자바스크립트 문법기초, html ,css 기초만 공부한 상태입니다 ㅠㅠ 꼭 붙고 싶은 부캠인데 불가능할까요 .. ??
플그 코테는
html css 필요없지않나요
앗 넵 제가 완전한 노베에서 어느정도 배웠는지 말씀드릴려고 적었습니다!
그냥 1단계부터
천천히 푸시면 될듯합니다
3주 빡세게하면
2레벨까지는 가능하실수있어요
그럼 그냥 코테만 현재는 주구장창 파는게 맞을까요 ?
자스 문법을
어느정도아시는지몰라서
for문 while문 자유롭게 쓰실수 있도록 익히시고
기본적인 자료구조는
이해하시면서
문제읽었을때 어떤식으로 구현해야겠다 라는 생각이 이어지도록 연습하시면 좋을듯합니다
생활코딩유튜브 자바기초 배우고, 프로그래머스 데브코스 에서 추천한 hello javascript 까지 들은 상태입니다..!
감사합니다!! 가능하다는 말을 들으니 조금 자신감이 붙네요.. 이해하고 활용하려면 유튜브 강의로 많이 공부하는게 좋겠죠 ?
혹시
map 함수나 filter 함수 사용하실줄아시나요
엇 아니욥.. 아직 거기까지는 못배운것같습니다 ..
배열, 문자열 메서드 열심히 익히시고
기본적인 자료구조도 좀 익히시고
반복문, 조건문에 익숙해지시면
될것같습니다
남은기간동안
이모티콘 앗 넵!! 정말 감사합니다 ㅠㅠㅠ 두분 모두 시간내주셔서 답해주시고 감사합니다 !!
앗 세분이요! 잘못말했네요! 감사합니다 ㅎㅎ
지치지 마시고 화이팅하세요
달려보겠습니다!!! 화이팅!! 좋은하루되세요!
혹시 12000원 정도 과금 의향 있으시면 https://www.udemy.com/course/best-javascript-data-structures/ 이런 유료 강의들도 옵션으로 고려하실 만 한 것 같습니다. 저 강의는 제가 들은 건 아니구 여기서 평가가 좋아서 그냥 예시로 들었습니다. 아마 여기서 물어보시면 잘 아시는 분들께서 더 좋은 강의를 추천해주실 수 있지 않을까 싶습니다.
이런 강의도 있었군요 ..! 추천해주셔서 감사합니다!!
next Image태그 src를 동적으로 설정하고 싶은데 잘 안되네요ㅠㅠ
아시는분 계신가요
loader 이걸 이용하는걸까요
src의 경로가 외부도메인이면
설정에서 추가해주는 옵션이 필요했던것같아요 그부분으로 확인해보실래요?
눈물바다에 빠진 라이언님이 나갔습니다.
사진
src는 내부 경로에 있습니다
postData.thumbnail 은 '/public/thumbnails/js-dataType.png' 이런 형식이구요
사진
모듈을 찾을 수 없다고 나와서..
어떻게 해야할까요ㅠㅠ
개인적으로 질문하면 답변을 잘 해주셔서 좋았던거 같아요
퍼블릭 제외한 링크 "/thumnail/.." 로 하시면 될거같은데
그렇게 해봤는데 잘 안됐습니다 ㅠ
앞에 require 없어야하지않나요?
그러게요 그냥 src="/thumnail/…" 하시면 될거같은데!
요것도 함께 적용하면 될거같은데요
헉 감사합니다!! 참고하겠습니다! 경험하신 바탕으로 좋은 강의소개해주셔서 감사합니다 ☺️
어
그렇네요
함께 적용하니까 잘 됩니다
감사합니다
오 이 강의 완전 추천해요!
오 들어보셧나용
앨런님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저는 코테준비 c++ 로 하고있는데 자스로해야될까요..
자스나 파이썬으로 하시는 게 풀이 속도에서는 좀 더 이점이 있을 것 같아요
자스나 파이썬이 시간적으로 유리하다고 하더라구요 fe 할거면 문법도 익힐겸 자스가 좋죠
저는 그냥 자바스크립트 연습용도로 리트코드풀고있어요
코테는 파이썬..
그냥 갑자기 궁금해졌는데요, 자바스크립트는 아직 {x: number, y: number}로 이루어진 set 이런 거 라이브러리 없이 구현하기 골치아프잖아요, 혹시 코테 풀면서 이런 점이 불편하지는 않으세요?
개인적으로 라이브러리 없이 뭔가 할 때 제일 답답한 부분이라 다른 사람들도 비슷한지 궁금했어요
저는 자스로 코테볼때 큐 속도 느린게 제일 골치아프더라고요
직접 구현해야하는..
아 맞네요
벙찐 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
앨런임 벙찐튜브님 안녕하헤요!! 반갑습니다 :)
사진
안녕하세요!
혹시 이 화면에서 날짜 위에 화살표를 누르면 달력의 월이 바뀌게 되는 로직을 구현했는데
안녕하세요 :D 반갑습니다~
조금 제가 마구잡이로 구현한거같아 더 깔끔하게 작성할 수 있는 방법이 있나 해서 도움을 받으러 왔습니당!
제가 React 사람은 아니지만 이렇게 액션은 하나인데 다루는 데이터가 복합적이라면 useState보다 useReducer가 훨씬 더 직관적인 코드를 만들어 줍니자
아하!! 그런 방법이 있었군요! ㅎㅎ
아! 그리고 그전에... 굳이 연월일을 나누지 마시고
제가 참고한 달력만들기 포스트입니다
그냥 하나의 Date를 이용하는게 더 좋을 것 같아요 12월에서 1월을 더하면 다음해 1월로 만들어 줍니다
그러면 reducer 안해도 되겠네요
아하 그러면 관리해야할 상태도 줄어들게 되니 하나의 상태로 날짜를 관리할 수 있겠네요
네~ 맞아요
덕분에 좋은 방향으로 리팩토링 할 수 있겠네요 감사합니다~!
이 곳은 프론트엔드나 웹 개발을 하면서 궁금함 것들을 편하게 물어보고 아는 것은 알려주며 물어보는 쪽도 알려주는 쪽도 모두 함께 성장하고자 하는 공간입니다~ 모르는 것이든 아는 것이든 언제나 편하게 글 남겨주세요~
혹시 rtk query랑 tanstack query 중 현업에서는 어느 쪽을 마주칠 확률이 높을까요?
후자라고 봅니다.
이직 관련해서 조언과 의견을 구하러 왔습니다! 개발자가 없는 스타트업에 첫 번째 개발자로 합류하는 건 재미를 떠나서, 많이 어려운 일일까요? 도전해볼만 할까요?
후자가 압도적일것 같아요...
takstack query 가 4버전만 지칭하시는거면 또 모르겟네요...
도전해볼만한 일인것 같습니다. 신입으로는 비추천이지만, 경력이 어느정도 쌓인다음에는 저도 이러한 도전을 다시 해볼것같아요
오오 압도적이군요 답변해주신 모든 분들 감사드립니다!!
압도적이란 말은 좀 자극적일수도 있겟네요.... ㅠㅠ
의견 감사합니다. 쌩 신입은 아닌 주니어인데, 벅찰 것 같다고 말씀드려도 이해하니 함께하자고 제안을 주셔서.. 고민되는 상황이네요. 일은 지금보다 더 재밌어보입니다.
요부분은 개인적의견으로봐주세영..
어떤 회사인지.. 본인 상황이 어떤지에 따라 꽤 다를 것 같아요...
초기 세팅하는 시간을 이해할 수 있는 회사인지도 중요합니다
지금 당장 다니는 회사에서 세팅된거 본인이 다 다시 A-Z 세팅한다고 생각해보세요!
제가 약간 비슷한 느낌인데, 저는 일은 분명 재밌지만 커리어 망치고 시니어에게 배울 수 있는 것들을 포기하고 있어서 좀 후회해요
저의경우엔 백엔드 팀은 있는 상태이지만.. 화면단 모든 구현을 제가 도맡고있어요. 백엔드도 없이 나홀로개발자이면 험난하긴 할 것 같아요.
첫번째로 영입하는 개발자가 팀장급은 되어야 할텐데 첫단추가 주니어개발자이면 추가로 채용하는 인원들도 주니어일 확률이 높기도 하구요.
외주로 구현이 마무리되는 시점에 합류하는 걸 제안 주셨고, 추가되는 기능이 혼자 맡기 어렵다면, 외주 팀과 함께 해도 좋다고 하시더라구요. 생각해보면 개발보다 유지보수나 업무조율을 많이 할 것 같기도 하구요.
아 외주로 MVP 를 개발하고 이후 유지보수를 내부 직원 채용으로 가져가고 싶은 거군요.
외주는 생각보다 유지보수에 대한 신경을 쓰지않고 작업을 하는 경우도 있기 때문에 그 부분은 염두하시는게 좋을 것 같습니다.
MVP 코드를 먼저 살펴보고 입사를 결정할 수 있다면, 그 방식이 제일 좋아보입니다
제일 걱정되는 점 중 하나입니다. 혼자 한다면 코드 퀄리티에 소홀해지지 않을까.. 하는 점이요!
말씀 드렸는데, 합류 확정 전에는 어려울 것 같다고 하시네여.
울고있는 어피치님이 나갔습니다.
외주 코드
진짜 양아치들 많던데요...
외주 코드가 괜찮은 퀄리티인가가 관건일까요? 퇴근하는 프로도님이 하신 경험이 제가 겪게될 경험이랑 비슷하지 않을까.. 싶네요. 위험할 걸 알면서 마음은 자꾸 기우는게 싱숭생숭합니다.
맞아요. 개발 인원이 적다면 어쩔수없이 일정에 쫓기고 버그에 쫓기며 개발하게 되는데, 원치않게 주먹구구식 개발이 되기 십상입니다. 리팩터링 할 틈 없이 다음 기능 개발하면 코드 상태가.. ㅠㅠ 훌륭한 코드가 아닌 보여지는 결과물에만 성과가 갈리게 될 수밖에 없어요. 아직 수익 모델이 뚜렷하지않은 스타트업은 더 그렇습니다.
그럼에도 불구하고 제 손으로 프로젝트를 도맡는 게 분명 즐겁고 재밌는 경험이긴 해요.
혼자이기 때문에 작업에 대한 크기 분배가 매우 중요합니다. 테스트 코드의 경우 아예 배제하는 것도 방법입니다. 실제로 스타트업에서도 그렇게 하는 경우가 많습니다. 대신 QA가 그부분에 대한 책임 및 프로세스를 신경써야될 것 같습니다.
경력 있으신 분들은 가끔
그런거 하시던데요
고연봉자 분들
이마트 마감세일 할 때 회덮밥 아닌 회 구매하시나요
저는 회덮밥 구매했네요.....
사수가 없기 때문에 관련 오픈소스 혹은 경쟁사에 대한 서비스를 확인하고 현재 개발 수준을 객관적으로 평가하고 로드맵을 길게 보는게 좋을 것 같아요.
귀여운 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
그리고 보통
비개발직군하고의 의사소통에 대해서
혼자 개발자면 많이 어려울 것 같은데요?
이것 때문에 눈이 반짝반짝 하는 것 같아요!
이 부분도 걱정이라 이야기 나눴었는데, 현재 말씀하신 대로 진행되고 있고 개발팀이 더 커지기 전까지는 현행대로 하게될 것 같습니다.
이것도 고민해볼 사항이네요.. 저와 비개발직군 간 소통도 소통이지만, 혼자 다 하는게 무리라면 외주와 운영진 사이의 소통을 맡는것도 큰 임무가 되지 않을까 싶습니다.
보통 에러같은건 고치는데에 드는 비용도 고려해야하는데
아무래도 그런 비용같은건 계산을 안하시다보니..
흠.. 이 부분도 업무 진행하게 된다면, 충분히 이야기 해야겠네요.
다들 늦은 시간에 함께 고민해주셔서 감사드려요 :) 이미 좀 기운것 같긴 한데 말씀해주신 부분들 충분히 생각해보겠습니다.
사진
호옥시
삭제된 메시지입니다.
사진
해당 캘린더에서 화살표를 좌우로 넘기는 기능을 아까 무지성으로 개발했는데 이번엔 useReducer로 리팩토링 하였는데
여기서 한번 더 업그레이드 할 수 있는 방향이 있을까요??
초보라 그런지 제가 아는 지식만 가지곤 업그레이드가 참 어렵네요 ㅜㅜ
react-native-calendars 안쓰고 저걸로 진행하는 이유가 있으신가요 허브님
생으로 퍼블리싱하시는것같은데
이거 react-native-calendar입니다
디자이너님의 의도에 맞춰서
다 뜯어고쳐서
그렇게 안보이는 겁니당
ㅠ.ㅜ
title 쪽을 커스터마이징을 할때
음… react-native-calendar 에 있는 onPressArrowLeft 등을 override 하는게 좋아보입니다
subtractMonth 랑 addMonth 를 제공해주잖아요
헛 그런가요?
제가 그 부분을 몰라서 쌩으로 개발했는데
혹시 제가 찾아본게 이게 맞을까요?
맞아요!
히야~
저거 쓰면 되요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아주 값진 개고생이였네요!
하지만 만족합니다
오히려좋다 ㅠ.ㅠ!
moment.format 랑 moment.format.tostring 이랑 값이 똑같지 않아용?!
감사합니다
ref 제공해주는걸로 기억해서
그런게 있는지 몰랐네요~
다 날라가죠 그러면 코드
한 3줄로 끝날것같은데
그러게요 ㅎ
그냥 인라인펑션으로 쓰면 될것같습니다 ㅎ;
엇 그러네요~ 감사합니다~
오늘 맥북사서 하루종일 세팅만 했네요 ㅋㅎㅎㅎ
끝이 없네요 ..ㅠ
도메인의 정의가 뭔가요??
뭔가 추상적으로 감은 잡히는데 정확히는 잘 모르겠네요 ㅠ
우앙
여러분 지금 리덕스 툴킷으로 상태관리하는중인데 사실 정확한 개념없이 그냥 패턴을 익힌다음에 기계적으로 사용하고있습니다.. 궁금한게 내부적으로 어떤원리로 되는지 큰틀은이해하지만 예컨데 디테일하게는 어떤원리로 사용하는지 잘모릅니다.. createAsyncThunk또한 기계적으로사용하구요 ㅠㅠ 이런경우 내부적으로 어떤원리인지 깊게 파고이해해야할까요?
리덕스 툴킷 같은 경우는 리덕스 공식문서에 가보시면 보일러 플레이트 줄이기라는 항목을 보시면 조금 이해되실 겁니다.
엘라님이 나갔습니다.
선배님들 깊게 공부하는 꿀팁 있을까요?
망해본다
ㅋㅋㅋㅋㅋ
ㅠ
내 관점 만들기?
til이나 블로그 포스팅으로 글을 쓰면 많이 도움되는 것 같아요
axios interceptors 에 관련된 좋은 예제 있을까요?? 구글링해보고있는데 잘 안나오네요 ㅜ.ㅜ
axios learning guide 괜찮은거같은데 이미 보셨을지 모르겠네용 https://yamoo9.github.io/axios/guide/interceptors.html
bearer토큰 교환할 때도 유용하지 않나요? intercepter.request였나 그 거 사용해서 요청 전 헤더에 엑세스 토큰 담아주고... .response로 만약 리프레쉬토큰 에러라면 리이슈 요청하고...
저 문서들도 확인했는데
약간
사진
저기 주석부분에 실제로 어떤 코드들이 사용되어졌는지 확인해보고 싶어요
캬~ 지금까지 잘못 개발하고 있었네요
react-query redux 두개 쓰는데 서버데이터도 전부 리덕스에 넣어놓고 꺼내쓰고 그랬는데..
ㅋㅋㅋ컨셉이해하기 전까지 그럴수도있죵 직접 필요성을 깨닫는게 중요하다고 생각해요
리액트쿼리 자체가 상태관리아닌가여??
그렇드라구용....
다 뜯어 고쳐야겠네요!
오 지금 프로젝트
초기단계인데 무조건 넣어야겠네요
상태관리이긴한데 리액트쿼리는 보통 서버데이터를 항상 최신으로 유지하려는 컨셉인것같아요
깊게 공부하는 팁.. 망해본다 어떤 맥락인지 공감합니다. ㅋㅋ 어떤 문제건간에 문제의 심각성을 몸으로 한번 느껴보고 나면 동기부여가 싹 됩니다!! ㅋㅋ
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
리팩토링 시작이군영
멋지십니당..
윗분들이 말씀하셨던대로 날짜 관련해서는 라이브러리를 그냥 잘 다루는 편이 훨씬 더 간결해집니다. 이렇게 저렇게 다뤄본 경험은 도움이 될거라고 생각합니다만 화면과 기획을 다루는 뷰의 코드가 너무 컴퓨터스럽게 작성을 하고 있다면 한번 곰곰히 생각해보시기 바랍니다. 그리고 INCREATE, DECREATE 보다는 PREV_MONTH, NEXT_MONTH 혹은 이전_달, 다음_달 이런식으로 조금 더 기획스러운 표현을 쓰는게 좋을 것 같아요. 지금 코드들은 한번 주석을 달거나 설명을 해보라고 했을때 기획과 구현이 섞여 있다면 분리를 하는 방향으로 한번 생각해보세요
피스메이커 프로도님 반갑습니다 :)
안녕하세요 잘부탁드립니다!
네~~ 어서오세요 이곳은 프론트엔드나 웹 개발에 대해 궁금한 내용이나 함께 나누고픈 이야기를 편하게 하고 내가 아는 내용은 기꺼이 알려줌으로써 서로 함께 성장하고자 하는 공간입니다. 편하게 글 남겨주세요!! 잘 부탁드립니다~
이모티콘 네!
공부하는제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 공부하는제이지님 반갑습니다 :)
안녕하세요
네! 어서오세요~ 이곳은 프론트엔드나 웹 개발협업에 대해서 궁금한 내용들을 물어보고 또 내 아는 것은 기꺼이 알려주면서 함께 성장하고자 하는 공간입니다. ㅎ 언제든 궁금한 것이나 공유하고 싶은것 함께 나누고 싶은 얘기가 있다면 언제든 편하게 글 남겨주세요
넵 잘 부탁드립니당
만잘부~.~
리액트 개발중인 1년차인데.. 데이터 확인할때 항상 console.log로 했었는데 debugger; 이란게 있었는지 오늘 처음알았어요.......!!!! 신세계네요............
debugger가 뭐예요..?!
이걸 봤는데
데이터 확인할때 항상 console.log로만 했는데 이거 사용하니까 함수 스코프 안에 있는 정보들 한번에 볼수있어서 좋은거같아요!
이모티콘
개발하면서 debugger의 존재는 알지만 자주 사용안하게 되더라구요 ㅠ 다른 분들은 자주 사용하시나요?ㅎㅎ
마박사님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 막광습님~~ 반갑습니다
예전에는 없었던거라 손이 잘안가버릇하지만 잘 쓰면 좋다고 생각합니다 ㅎ
저는 자주 사용해요! 중단점 해놓고 제대로 데이터가 들어왔는지 확인할 때 좋아요. 소스탭에서 자주 사용하는 스니펫도 저장해놓고 사용 중입니다 ㅎㅎ 크롬 좋아요
삭제된 메시지입니다.
폼에서 submit 안 보내고 싶은 데이터는
어떻게 처리 해야할까요?
뷰 쓰고 있습니다
이벤트자체를 막으면될것같아요
기뻐하는 라이언님이 나갔습니다.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault 이거 쓰시면 될 것 같긴 한데 저도 잘 몰라서 자신이 없어요
어떤 함수 내에서 forEach를 사용하는데, 루프문 안에서 에러가 발생할 수 있는 가능성이 있습니다. 이경우에 어떤식으로 에러를 핸들링해야 전체 함수의 catch 에 잡힐까요? forEach에서 throw 에러를 해도 전체 함수의 catch 에는 걸리지 않는 것 같네요..
질문이 그게 아니지 않나요..? 특정 데이터만 안 보내고 싶다는 걸로 이해했어요 저는
아 그렇네요 오독했어요ㅠㅠ
아 그렇네요
객체로 보내는 경우가 많은데 필요없는 속성은.delete 를 사용해 해당속성을 지워줄수 있습ㄴ디ㅏ
사진
살려주세요
delete를 사용하거나 const {deleteObj, …otherObj} = obj; 해서 otherObj만 빼올 수 있어요
안녕하세요 모질라같은 페이지에서 구문보면 (ex: js includes) str.includes(searchString[, position]) 이런식으로 되어있던데.. [ ,position]. 이렇게 생긴 구문이 이해가 안됩니다 ㅠ 어떻게 이해하면 좋을까요?
일반적인 상황에서는 잡히는 것 같습니다.. https://replit.com/@NightlyHerb/SeveralBluevioletRuntime#index.js 혹시 async 막 들어가고 그런 코드인가요?
괄호 내부는 선택적으로 추가하는 parameter일 겁니다
앗 네 그렇스빈다.
코드 보여주시면 아마 고수분들이 파악해주시지 않을까 기대해봅니다!
CORS 에러네요..ㅠㅠ 서버에서 헤더를 설정해주거나 프록시 서버를 이용해야 해요. CORS는 브라우저 정책이니까요!
https://xiubindev.tistory.com/115 관련글입니다!
https://github.com/KaniKim/PythonFrameworkGuide 새로이 업데이트 했습니다. 이번에는 장고의 프레임워크, 지원 파이썬 버전, 장고버전, 등등을 추가했습니다.
사진
아하 감사합니다!!
혹시 react-query 사용시에 상위 컴포넌트에서 useQuery로 데이터 받고 하위 컴포넌트에서도 data가 필요할 때 그냥 prop으로 넘겨주시나요?
사진
감사합니다 해볼게요ㅠ
백엔드 코드 이긴하나 사실 JS에 대한 개념이라 여쭤봅니다 (__);
forEach 안에서 throw을 했을 때, 밖에 있는 catch 에서 에러를 잡도록 하려고 하는데, 제가 모르거나 놓치고 있는 부분이 있는 것 같습니다 ;
이런 경우 for ... in 문을 쓰는편이 낫습니다
굳이 forEach를 사용해야 하는 경우인가요??
혹시 그 이유에 대해서 설명을 요청드려도 될까요?
try catch 가 안먹잖아요
아닙니다. 배열의 각 요소마다 함수를 실행하기만 하면 됩니다.
저도 김동현님과 같은 의견이에요
아하 네 감사합니다. 나머지는 제가 한번 찾아봐야겠네요 ㅎㅎ
아무무님이 나갔습니다.
swagger-ui에서
사진
이렇게 정의 되어 있고
사진
정의되어 있는 api 토대로 회원가입 구현중인데.... 왜 못 찾을까요
중간에
로컬호스트도 껴있네요
앞에는 헤루쿠라서
상관 없지 않나요
헤로쿠..
사진
지금 서버가 localhost:8080으로 켜져있습니다
사진
이건 cors 피해주는 주소에요
이모티콘 껴있으면 안되는건줄 알았네요
1. async / await은 어쨋든 결국 Promise를 반환하는 함수들에 대한 Syntax sugar입니다. 2. forEach 함수 내에 async 함수를 넣게 되면 그 함수는 Promise를 반환하고 끝납니다. async 내에서 throw문이 있더라도 결국 Rejected Promise를 반환하는 것이지 forEach 내부의 함수 자체가 에러를 내는 것이 아니기 때문에 try catch 문으로 잡히지 않습니다. 3-1. 이를 해결하기 위해 for … of … loop을 사용하게 되면 async 함수 하나 실행하고 기다리고 하나 실행하고 기다리면서 루프를 모두 돌게 됩니다. 여기서 throw한 에러는 잡힙니다. 3-2. 아니면 async 함수를 전부 바로 실행시키고 싶으시다면 Promise.all을 사용하시면 될 것 같습니다. 참고하셔서 좋은 검색 되시길 바라겠습니다.
파라미터에 . 들어가도 인식하나요?
사진
테스트 해보면
swager-ui에서는 잘 들어갑니다
사진
아이고 너무 감사합니다!
너무 완벽한 답을 주셔서.. 금방 해결할 수 있을 것 같습니다.
혹시 모바일 사파리에서 애니메이션이 잘 적용되지 않는 이슈 해결책을 아시는 분이 있을까요? 간단한 transform, opacity 변경하는 애니메이션인데 안드로이드 크롬 / 맥 사파리 등에서는 잘 되는데 ios 크롬이나 사파리에서는 뚝뚝 끝기게 보이네요… 해본 방법 1. will-change 2. prefix 어떤 방법이 있을까요? ㅠㅠㅠㅠ
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
용용님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
ios13버전에서 키프레임 애니메이션이 끊기는 버그가 있어서 자바스크립트로 바꿨더니 해결된 경험은 있습니다
JS로 css 조작하신걸까요?
safari의 경우 아래 성능 이슈 있습니다. https://stackoverflow.com/questions/44662417/css-filter-is-very-slow-on-safari-with-different-order-can-someone-explain
네
아 알겠다 저 fierce-earth 뭐시기가 본인 컴퓨터에서 돌아가는 게 아니라고 가정하면 저렇게 요청했을 때 지 localhost에서 저 주소를 찾을 것 같네요 만일 이게 맞다면 해결책으로는 저 cors-everywhere 뭐시기를 로컬에서 돌리시면 될 것 같습니다
cors-everywhere 로컬에서 돌린다는 말씀이 무스 말씀이실까요ㅠ
프론트엔드 비쥬얼스튜디오, DB, 이클립스 백엔드
다 로컬에서 돌리고 있습니다
CORS 이슈인지 아닌지 확인하기 위해 아래 크롬 extension 사용하여 확인하는 것도 방법일 듯 합니다. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf
webRequest 아래 헤더 변경하여 cors 이슈만 해결하면 끝나는 이슈인지 체크하고 access-control-origin: * 맞다 싶으면 백엔드 개발자에게 도메인 white list 허용해달라고 하면 될 듯 합니다.
식사하고 해보겠습니다
감사합니다!
피자 먹다 자는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 뷰3에서 뷰티파이 대체제로 쓰시는것들 뭐 있으신가용?
사진
이렇게가 유명하지않을까요??
아하
뷰티파이만 쓰다가
다른거 써보려고했는데
감사합니다!
초롱초롱 튜브님 용용님 비옷입은 튜브님 모두모두 반갑습니다!
애교뿜뿜 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 혹시 프리온보딩 코스 회사다니면서 해도 지장이 없을까요??
삭제된 메시지입니다.
애교뿜뿜 어피치님 반갑습니다 어서오세요 :)
안녕하세요 ! :)
안녕하세요! 리액트 강의를 듣는데 클래스 기반으로한 컴포넌트 수업 부분이있는데 이 부분은 생략해도 될까요?
선택사항이라고는 해서 여쭤봅니다!
있으면 들어도 좋을것같아요~
앗 늦었네요ㅠㅠ 지금 사용하시는 fierce earth herokuapp 뭐시기 웹사이트 대신 같은 기능을 하는 cors-anywhere 같은 서버를 로컬에 깔아서 돌리시라는 의미로 말하였습니다!
위 글에 대한 답장이었습니다 맛있는 점심 되세요!!
감사합니다 허브님!
cors는 해결했는데
api를 못 타네요 ㅠㅜㅜ
삭제된 메시지입니다.
프록시 문제인건가요...
아니면 api를 못 타는 걸까요..
흑
사진
baseurl 이 맞나요?
baseurl 에 http 가 2번 들어가있는것같ㅇ느데
저게 다들 헷갈리실 수도 있는데
저게 cors
피하게 해주는 거라고 합니다
BAD_REQUEST 니깐 body 쪽 문제일거에요
제대로 들어가있는지 찬찬히 확인해보세요 특히 오타
API 보낼때는 타입 명시가 제대로 되지 않는 경우가 많으니 오타가 잦습니다
사진
사진
저 cors 피하게 해주는 걸 웹사이트로 쓰지 마시구 로컬에서 서버를 돌려서 시도해보실 만 한 것 같아요
사진
일단 api 타는 것이 먼저인 거 같아
그 부분 해결하고
로컬로 해보겠습니다
cors 오류는 현재 나지 않아서요 ㅎㅎ
아뇨 지금 404 오류가 나는 이유가
cors-anywhere을 테스트용으로 사용하고, 실제 업무상에서는 백엔드 개발자에게 이야기하여 해결하는 것을 권장 드립니다.
맞습니다 백앤드쪽에서 해결해줘야해요 CORS 는
혹시 참고할만한 사이트가 있을까요?
오늘 백엔드 개발자가 휴가라서..
어쩔 수 없이 ㅠㅠ
저 웹사이트에 localhost:8080/api/경로/ 를 CORS 해결해주세요 하고 요청을 보냈는데 저 웹사이트에서 자기 컴퓨터에서 localhost:8080/api/경로 를 찾아보고 서버 컴퓨터에는 저 경로가 당연히 없기 때문에 404 오류가 나는 것으로 추정됩니다 어디까지나 뇌피셜이구요 그래서 404 오류를 해결하기 위해서 cors-anywhere를 로컬에 설치해서 돌려보는 방향을 제안드렸습니다
백엔드 개발자가 전부 휴가면 이슈를 미루는게 좋지 않을까요?
ㅎㅎ그럼 제가 할일이 없어지는걸요
원래 저부분은 프론트 개발자만의 영역은 아니라서요.
https://donggov.tistory.com/132
이 사이트 참고해서 해보겠습니다
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf 저는 개발버전에서는 위의 크롬 익스텐션써서 브라우저에서 cors정책 없이 테스트를 하는데 혹시 프록시서버를 구축하신 이유가 있나요?
사진
responseURL은 이게 맞는건가요?
예전에 여기 이슈로 물어봤는데, Msw나 목업으로 만들어서 먼저 기능 만드시고 연결해보시는 것도 하나의 방법일거 같아요!
감사합니다. js 로 처리하니까 잘 먹네요!!
안녕하세요 git, gitHub 사용관련해서 질문이있습니다. 사용 github repository에서 기능완성한 branch 를 지워주고, 로컬에서도 branch를 지운후, 나중에 repository에 같은이름으로 브랜치를 만들면 새로운 branch로 생성될까요 아니면 기존에 썼던 이력을 가진 branch로 생성되나요?
어떻게 사용하는지
알아보고 사용해보겠습니다
아마 새로운 브랜치가 생성되지 않을까요??
끄럼 지운 branch를 restore branch 하는것과 별개가 되는건데 만약 A 라는 브랜치를 레퍼지토리에서 사용하다가 지우고, 나중에 다시 A 라는 신규 브랜치를 레퍼지토리에 만들고 예전 A 브랜치를 restore하면 이름이 중복되는데 이런 경우는 없나요?
해결돼서 다행이네요!
안 먹는 거 같습니다
사진
사진
근데 responseURL이 많이 이상해보여요
404가 나올거 같이 생겻어요
다른 api는 정상 동작 하는게 있나요? 서버 돌려서 외부에서 접근하려면
보통 다른 ip사용하는걸로
알고있어요
postman에서는 정상작동하나요?
뷰 리액트도
로컬호스트랑
같은 네트워크에서 접속 가능한 ip주소
동시에 띄워주는것처럼요
음 저도 확실하진 않지만 아마 레포지토리를 삭제한다고하면 그안에 있던 브랜치들도 초기화 될것같아요
저 사이트에서 1-1에서 `npm install 후 node server.js`까지만 해보고 로컬 컴퓨터에서 `http://localhost:8080/우리의/백엔드/api/주소` 이렇게 한 번 시도해보시면 좋을 것 같습니다. 제 컴퓨터에서는 https://fierce-earth-31743.herokuapp.com 이걸로 로컬호스트 접근하면 404 나오고 위와 같이 하면 되었습니다. 근데 크롬 익스텐션이 더 쓰기 편할 것 같은 느낌적인 느낌이 드니까 그거 먼저 시도해보시고 안 되면 츄라이해보세요
레퍼지토리를 삭제하는게 아닌 해당 레퍼지토리에서 사용하는 브랜치 삭제를 여쭤봤습니다 ㅎ
새로운 브랜치로 생성이 됩니다. Git Graph 확인하시면 분기점이 다른 것 확인하실 수 있을 것 같아요.
깃 지식이 늘었네요 감사합니다
요것도 그럼 중복이 없나요?
.
git fetch -p 이용하여 원격 브랜치 레퍼런스도 제거하는 것을 추천드려요.
예전 A 브랜치를 어떻게 restore할 수 있어요??
그럼 지운 브랜치를 restore branch 할수없게 완전제거되는건가요?
멋쩍은 튜브님이 나갔습니다.
사진
요렇게 지우면 리스토어 브랜치 떠요
아 깃허브에서 할 수 있군요
아 물론 여기서 localhost:8080은 cors-anywhere가 띄워진 주소입니다!
사진
사진
애초에 못 가져오는 거 였네요
백엔드 개발자 오면
해야겠네요
레퍼런스 지우시면 restore 목록에서도 안보이는 것 확인되실거에요.
아이고 고생 많으셨습니다ㅠㅠ
다들 도와주셔서 감사합니다..
아마. Access-Control-Allow-Methods 도 허용해주면 될 듯 싶습니다만 프론트 개발자가 할일은 아닐 것 같아요
감사합니다~
해봤는데 이렇게 나오네요 herb@Herb temp-github-restore-branch-ed2d1e21-2f37-42e4-8742-d120a489d41b % git log —all —graph —oneline * bd74d5b (HEAD -> branch-b) Branch B 4th try | * bcbc16e (origin/branch-b) Branch b third try |/ * 0e24ab7 (origin/branch-a, branch-a) Branch a commit
사진
이런식으로 콘서트를 눌렀을 때 아래 펼쳐지는 라인을 구현하려면 무슨 기능을 쓰나요??
자스로 하나요??
저 사이트 들어가서 확인해보니, + 버튼 눌렀을 때 동작하는 UI가 popper에 가깝네요.
https://www.w3schools.com/howto/howto_css_mega_menu.asp 공부 목적이라면 위 사이트를 참고하는 것도 좋을 듯합니다.
아하 콘서트 눌럿을 때 군요
바닥부터 만든 이후, 그 이후 위 내용처럼 다른 라이브러리를 사용하는 방식으로 가면 좋을 듯 합니다
html css js 까지로는 구현 어렵나요??
가능합니다
어떤 기능으로요?? js????
클릭했을때 요소를 찾아서 클래스를 추가하거나 height를 주는식으로 js로 하면됩니다
안녕하세요! 리덕스를 쓰는 이유에 대해서 궁금한 점이 생겨서 질문드립니다. 작은 프로젝트에서는 정보를 저장하는 데 hooks과 props를 사용해도 문제가 없는 것 같은데 리덕스 스토어에 모든 값을 전역값으로 저장하면 프로젝트가 무거워지는 것 같습니다. axios통신, 데이터 저장과 상태관리에 리덕스를 사용하면 좋은 점이 뭐가 있을까요? props drilling을 막고, 버튼 같은 하위 컴포넌트에서 바로 사용할 수 있는 장점이 있다고 알고 있습니다.
작은플젝에서는
굳이 안써도 될거에요
유저 인포같은 데이터들은
큰 플젝에서 거의 전제적으로 쓰다보니
전역에 두면 좋아요
네 axios 통신 같은 경우는
리덕스 액션으로 하는 메리트가 없을까요?
사진
추가해주니까 되네요
사진
이런 식으로 담아서 사용해도 괜찮을까요?
패칭한 데이터가 여러 컴포넌트에서 사용이 필요한 경우에는 하신 것처럼 썽크를 이용해서 데이터를 패칭하고, useSelector로 불러쓰시는 것이고, 해당 정보가 여러 컴포넌트에서 사용되지 않는 경우에는 굳이 리덕스 거치지 않고 컴포넌트단에서 패칭하셔도 될 것 같구요.
네 답변 감사합니다!😀
혹시 궁금한게,,, 다들 오픈소스 라이브러리 사용하시는거 설정에다가 고지를 하시나요?
웹뷰로 앱을 제작중인데 카카오톡 같은경우에도 설정에 오픈소스 라이선스로 페이지가 있길래 궁금해서 남겨봅니다
추가로 어떤 부분까지 고지를 해야하는지,,, 궁금합니다
질문있습니다! vue에서 watch 사용하여 router 이동 감지할 때, 사진과 같이 '' 작은 따옴표를 쓰는 이유가 무엇인가요?
사진
이게 왜님이 나갔습니다.
있는거랑 없는거랑 차이가 없을 것 같은데요?
일하기 싫은 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요. 리액트 공식문서를 읽고 있는데 이해가 잘 안가는 부분이 있어서요..! React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. 여기서 일반적으로 하나의 루트 돔 노드가 있다는데 이게 꼭 하나일 필요는 아니고 필요의 경우 여러개로 구성될 수도 있다는 말인가요??
모달같은 걍우엔
외부로 띄우기도 해요
모라고 불렀지 그걸
root 말고 또 둘 수 있어요
그모달 portal 얘기하시는걸까요..!?
아아 그럼 index.html에 <div id="root"></div>가 하나일 필요는 없고 밑에 추가적으로 계속 <div id="portal">… 등등 쓰려는 노드를 추가한다는 의미일까요..?
그게 맞는 것 같아요 리액트 포탈로 모달 구현하면 루트랑 형제요소로 띄우기도 하니까요..!
감사합니다!!!ㅎㅎ
포탈
server연동해서 기본적인 todo list만들고있는데 궁금한 것이 있어서 질문드립니다! 로그인 성공했을 경우, server로 부터 token을 받아 로컬스토리지에 저장 -> a루트로 리다이렉트 하려합니다. 근데 a루트는 token이 있을 경우에만 렌더할 수 있습니다. (로그인 루트와 a루트는 형제 컴포넌트입니다) 이 경우 어떻게해야 새로고침없이 a루트가 로컬스토리지에 들어온 토큰을 바로 확인할 수 있을까요?
말씀하신대로 구현하면 동작하지 않나요 ?
보내주신 경우에는 사용 안해도 크게 상관 없을걸로 보이고 보통 오브젝트 데이터 내의 특정 요소에 watch 를 걸고 싶을때 따옴표를 사용합니다 Ex) A = { key1: 1, key2: [] } 여기서 A.key1 의 변경을 추적하고 싶으면 watch: { ‘A.key1’() { … } } 이런식으로요
아 a루트가 로그인성공했는지 여부를 알 수가 없어서 언제 로컬스토리지를 확인할지에 대한 질문이신건가요 ?
네 맞습니다.. 제가 현재 전역상태관리 라이브러리를 사용하지 않고
그냥 제일 상단 컴포넌트인 App에서 상태관리를 하고있는데, 이러한 방법으로도 확인할 수가 있는지 궁금합니다.
사진
저는 지금 이렇게 구현했는데 로그인 후 token이 로컬에 저장되어도 a루트에서는 로컬이 null이고, 렌더링을 해야만 들어오더라고요 (당연하겠지만)
근데 마땅히 다른 방법이 떠오르지않아서 여쭙네요ㅠ
로그인과정이 성공했을 때 로컬스토리지에 저장시키셨다고 하셨는데, Todo의 useEffect문 안에서 로컬스토리지를 찍어보면 어떤가요 ?
null상태가 되고, 새로고침 할 경우에 token이 들어옵니다.
다시한번해보겠습니다!
Todo가 보이기전에 이미 로컬스토리지에 값이 저장되어있는데도 불구하고 마운트 이후에도 안찍히는건 좀 요상하네요..
vue.js 배포시 어떤 이미지는 ㅇ나오고 어떤이미지는 안나올땐 뭘까요..? 웹팩 사용하고 알리아스 @style 써서 경로 설정했습니다..
로컬에선 잘보이는데
정 안되면 url이동시킬 때 데이터 넘기는 것도 방법일수도 있겠네요
아하 그러네요! 오 그방법으로 알아보겠습니다.
제가 지금 서버가 고장나서.. 바로 못해서ㅠ 해보고 성공하면 꼭 알려드릴게요 감사합니다
그.. 아이디 중복체크도
백단에서 조회한 후 하는게 맞는거죠?
넵
요즘엔 아이패드로 코딩도 하나요??
용량 제한이 잇을가요??
ㅜ.ㅜ
setToken이 로컬스토리지에만 저장하는 함수인가요? 공통컴포넌트인 app에서 상태를 선언하시고 로그인 시 로컬스토리지에도 저장하고 로그인상태도 바꿔보세요~
야스오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
앞열 대기중입미다~
헉 ㅋㅋ
재밌어보이네요
호돌맨님 향로님 계십니다
다시생각해보니 지금 제가 짠 구조가 잘못된거같다는 생각이 드네요ㅠ 참고해서 보안하겠습니다 감사합니다.
너무 부럽네요 ㅠㅠ
사진
어
저도 바로앞인데
연예인이다~
삭제된 메시지입니다.
무신사 티 좀 받아주십셔..
훠덜멘~
와아... 직접 보셨다니 너무 부럽다
싸인 받고 싶ㄷ가
다
친구가
파이썬에서
while, for 없이
구구단을 출력할수 있을까
해서
고민하다가 된다는 걸 확인했네요 방금
사진
어지럽네요...ㅋㅋㅋㅋ
향로님
인프콘 부럽네요,,
while, for 를 사용하지 않는다는게 반복문을 사용하지 않고 푸는거 인가요?!
네네
그게 면접 질문 이었다네요
물론 회사에서는
재귀를 의도하거나...
그랬겠지만
가고 싶으당
이모티콘 여러분 혹시 html css js 연습할 수 있는 사이트 알고계신 곳 추천좀 해주세요!!
localhost 아닐까싶습니다
ㅋㅋㅋ
웹서비스 하나 잡아서 로컬호스트에서 따라 만들어보시는게 제일 좋아요!
https://www.w3schools.com/howto/default.asp 여기에 있는 것만 기본적으로 해도 충분할 것 같아요.
flex 개념 이해하기에
요거 재밌어요
이모티콘
이모티콘
지영님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요. 강의를 듣는데 보면서 따라서 치면 강의 속도가 더 빨라서 계속 멈췄다가 따라쓰고 다시 재생하고 반복하니 강의시간이 긴데 완주 하기가 힘들 것 같은데, 이럴 경우에는 어떻게 공부하는 방법이 좋을까요?ㅜㅜ
원래 그러면서 듣는겁니다
원래 그러면서 듣는겁니다22
그리고 단무지 싫어하면 벌받습니다
아하,,,,,,,
강의에서 나오는 코드를 따라치기만 하시면 기억에 남지않으실거에요 ㅠㅠ 저도 오래걸려도 왜 이코드를 여기서 작성하는지 정리하면서 강의를 들었어요!
근데 계속 뭔가 전체적인 흐름 파악하기가 따라쓰면서 하니깐 어려운 것 같아요 ㅜㅜ
한 챕터 마치고 빈 종이에
간단하게 두세줄로 요약하는 습관 기르시면
정말 도움 많이 됩니다!
감사합니다,,
강의에 코드 남긴 github가 있다면
대학교때 컨닝페이퍼 만든답시고
일단 쭉 듣고 github보면서 따라친 다음에
열심히 했던 공부법인데
다시 2회독해도되고여
지금까지 잘써먹고 있습니다
노마드 강의 들으면 머리에 남는게
혹시 방법 중에 일단은 강의를 따라안치고 흐름파악으로 빨리 듣고 2회독할 떄 하는 건 어떻게 생각하시나요?
boom! amazing!
2회독 할 자신이 있으시면 그렇게 하는게 좋은데
아니면 강의 하나 빠르게 들으시고 한 번 더 따라치시는 건 어떠신지요?
제 경험상
1회독 하면
그 책 잘 안보게 되더라구요
그쵸 ㅜㅜ
2회독 때가 아니라 바로요!
전 한번 따라친 다음에 그부분만 다시 한번 듣습니다
이왕할때 그냥 잘 보시는거 추천~
1분 30초~2분30초까지 따라치고 그부분만 다시 듣는식으로
아하,,
그럼 노마드의 boom! amazing!을 여러번 듣게됩니다
github에 챕터마다 강의자료가 있는데, github부분을 보면서 따라치면서 다음 강의에서 어떤 부분이 바뀌었는지 한눈에 아는 방법이 있을까요?
boom! this is react query magic!
hoxy… udemy…?
네!!
udemy입니다!
react 강의 듣고있어요!
ㅋㅋㅋㅋㅋ 저도 아마 말씀하신 강의 듣는 중인데 선생님이 파일을 정리한 방식 때문에 오히려 diff하기는 어려운 것 같더라구요
그렇군요 ㅜㅜ
react는 javascript어느정도 할수있으면 배우는게 낫나요?
알아보고 뭔가 깔쌈하게 볼 수 있으면 연락드릴게요
기술블로그도 시작하려하는데 보통 한 챕터가 끝나면 블로그 작성 정리하는 걸로 해야할까요?
감사합니다!
저는 그냥 같이해버렸네요
같이하셨군요 대단..
이거 진짜 좋은것같아요!
이전에 다른 프로그래밍언어 해보신적있나요?
아니요! 퍼블리셔 국비학원 다니고 취준하고 있는데 욕심생겨서 react도 공부해볼까 생각중이에요!
요즘 리액트 배우는데 왜 그렇게 자바스크립트를 오래 붙잡고있었나 생각이 들어요 주석 반복문 객체 데이터타입 돔조작방법 그리고 욕심이 있으시다면 웹동작원리 이정도만 알고가도 충분하다고 생각해요..
제이님처럼 같이할걸... ㅠ
진짜 할게 많네요 하하하
이번 년도까지 취업 목표로 잡아야겠어요,,
일단 단무지부터 좋아해보세요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이직하고싶어요..ㅠㅠ
무지님 백엔드 가시려구요?
아니요 프엔으로요!
헐 저 닉네임 몰랐어욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그냥 무지는 어떠세용
아~ 두분 무지가 겹치시네요 ㅎ
혹시 여기서 프론트 스터디 하시는분들 계세요?
무지 들어가면 다 싫으신가보네요..
ㅠㅠ
오늘 인프콘에러 밸로퍼트님이 강의하셨는데 글쓰는법에대해서
곧 인프콘 영상 올라가고 발표자료도 올라간다고 하네요!! 한번 참고하시고 작성해보세영
벨로퍼트님 실물 처음보는데 생각보다 젊고 잘생기셔서 놀랐네요
인프콘
가고싶다
ㅠ
생각보다 (x) 그냥 젊고 잘생기셨어요
되게 깨발랄하시더라구요
와 그냥 젊고
그냥 잘생긴
그게 최고인데
개발까지 잘해..
ㅠ
성격도 좋아보이셨어요..
장기효님 세션도 되게 좋았어요
와..
흠 어딘가에
흠이 있겟죠
무지성개발자님도 무지가 들어가네요
..ㅎ
오늘부터 팬할래요
ㅋㅋㅋㅋㅋ
ㅎㅎ
벨로퍼트님 완전 미남이시던데.. 깜짝놀랐습니다
안돼....
미남이면 그가 다가졌자나...
(흑흑)
인간적으로 운동은 자제좀요(?)
ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
운동 금지 조항
넣죠
혹시 datalist태그 이용하면서 img태그 사용이 가능한가요? 검색 리스트의 방향키나 자동완성 기능때문에 이용하려는데, 이미지 태그를 같이 넣어주는게 잘 안 되고 있어요.
저는 운동이라도 해야겠네요
이번생은 망했다
다음 생이락ㅎ
라고
보장되어잇는 것 아니니
이번 생이 어쩌면 리즈일 수도 잇습니다
샵검색 : #리즈
ㅠㅠ
그렇다면 큰일인데요
서운한데요..
요거 한 번 보세요
존잘인 평행우주도 있다면...
잘생긴게 전부는
맞습니다
하지만 왜 전부 가져야합니까
남을 잘생겨 보이게 해주는 우리
서폿 역할도
충분히 가치 있습니다
https://primer.style/css/components/select-menu#list-items Github 디자인 시스템이 해당 부분에 대해 잘 구현한 사례가 있습니다.
답변 감사합니다!!
피자 먹다 자는 무지님이 나갔습니다.
토리님이 나갔습니다.
토리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
초롱초롱 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
ㅋㅋㅋㅋㅋㅋㅋ
역할에 충실하겠습니다..
하고싶긴하네요!!ㅜㅜ
스터디 가즈아..
프로젝트형 스터디 모임..
좋을것같아요
프리온보딩 챌린지 추천드려여
8월꺼 했는데 유익했습니다
서동욱님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
라이온님이 들어왔습니다.
프론트잘하고싶다님이 들어왔습니다.
부탁하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
토리님 서동욱님 프론트잘하고싶다님 부탁하는 무지님 모두모두 반갑습니다 :)
사랑아보영해님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
멋쩍은 튜브님이 나갔습니다.
저
급합니다 한번만 도와주세요
저 고등학교 동아리 깃허브로 협업하고있는도중
무슨 일이신가요?
PR이 Closed 되있는데
이거 어떻게 다시 열수있나요?
이거 어카나요
사진
이런식으로 closed 되있습니다
머지 되서 닫히신거 아니에요?
머지 되서 닫혔네요
아..
어카나요
디벨롭 브랜치 힘 가보세요 개발하신 파트 합쳐져있을거같은데용
머지되면 안되는데.
없습니다
아무데도요
아까 모르고 삭제해서 다시restore
하긴했는데
이거 pr만 복구하는법 없나요?
작업한 내역 다날라가셨나요?
사이즈 안크면 그냥 다시 브랜치 파서 넣는게 빠르실거같은디
혹시 타스에서 컴포넌트는 타입이 뭔가여??
FC VFC 있어요
화난 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
화난 튜브님 반갑습니다 :)
merge전 커밋으로 브랜치를 따서 해보는 건 어때요?
그럼
merge 를 취소해버리면
pr이
돌아오나요?
다들 NextJS에서 ENV 변수 유효성검사 어떻게 구현하시나요??
Jest로 되지않나요
Process.env
테스트할때 말고
빌드나 개발할때 env에서 필수옵션으로 지정해두면 에러띄우고 그러고 싶어서
nestjs에서는
joi 같은거 말씀하시는걸까요
Configmodule에 joi로 환경변수 유효성검사가 가능하더라구요
네네
맞아요!!
nextjs에서는 어떻게 해야하나~ 해서
아 next..!
똥님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
타입스크립트 사용하는데 undefined인거 불편해서 어떻게 처리하면 깔끔할까 고민중이네요
머지 취소가 되나요? 안해봐서 잘 모르겠네요
그냥 한번 닫힌 pr 다시 열어서 또 커밋하고 푸시하시면 이상한 삼각관계 되니까 따로 브랜치 파서 시도해보시는건 어떠신가요?
페이지네이션할때 안에 api연동할 리스트 목록은 커스텀으로 따로 만들수없나요 ??
assertion 을 통한 타입가드를 해보시면 좋겠습니당
assertion는 컴파일러를 속이는거라 애매하지 않나요??
뭔가 next.config에 joi설정하고 호출하는 걸로..
function assert(value: any, errorMsg: string): asserts value { if (!value) throw new Error(errorMsg); } function toString(value?: number) { assert(value !== undefined, "value 는 undefined 가 아니어야 한다."); return value.toFixed(2); }
제가 주로 쓰고 있는 방식인데 이렇게 써보면 타입표명으로 인한 걱정은 좀 덜 수 있지 않을까 생각되어 말씀드려보아용
오오 감사합니다
저런 방법도 있군요
2박3일 해커톤 마무리하고 집에 왔어요 ㅎㅎ 테오의 스프린트 경험이 많이 도움이 되어 수상까지 했네요. 해커톤에서 여기 단톡방 분들도 직접 대면으로 만나게되었는데 다들 너무 좋은 분들이셨어요! ㅎㅎ https://github.com/99ulling/99ulling 덕분에 대학생 마지막 여름방학. 좋은 추억 쌓고 왔습니다.
헐 귀엽네요
고생많으셨어요! 축하드립니다
ㄷㄷ 저는 아직 버스..
퉁이리님 성격 너무 좋으세요 엄청 호탕하시고 ㅎㅎ 덕분에 해커톤 재밌게 잘 했습니다!! 감사해요 ㅎㅎ
오늘그거어땟어요
인프콘
내용좋앗나여?
저는 일정이겹쳐서 못갔네여
"선풍기 바람 쐬는 어피치"님 조심히 들어가시길.. 저도 너무 좋은 추억이였습니다 ㅎㅎ
내용은 좋았는데 타켓이 거의 주니어라서 개인적으로는 조금 아쉬웠지만 간만에 컨퍼런스 분위기가 너무 좋더라구요~ +_+
인프콘 저만 못갓나봐요ㅠㅠ.. 여기저기 후기가많군요
저도 추첨제 떨어졌는데 계속 가고싶었어요
ㅋㅋㅋ아는 지인이 총 기획하신거라서 성공적으로 끝나거 다행이에여
진짜 재밌었어요!!!!
지인인데도 저한테 티켓 두장밖에안주시더라고요 ㅋㅋㅋ
인기가너무많다고
다음엔 꼭 가보고 싶네요 한번도 못가봤는데 ㅎㅎ
코로나 때문에 한동안 오프라인 컨퍼런스가 계속 죽어있었다보니 더 그랬을것 같아요 ㅋ
이제 슬슬 다시 할듯
와.. 최우수상
멋지세요
부스 굿즈들이 너무 매력적이라서 부스 줄서느랴 강연듣느랴 몸이 참 힘들었네요 ㅋㅋ ㅠ
ㅋㅋ맞아요 토스 ...줄
https://d2.naver.com/news/3524742
그와즁에 데뷰는 미뤄짐 ㅜㅜ
흠
아쉽네요
우와 캐릭터는 디자인어케하신거에요?
귀여워요너무
우와!! 넘나 멋지네요
와 고생하셨습니다 존귀탱!!
기획1, 디자인1, 프론트1, 백1. 총 4명이 팀을 이루어 진행했어요!
디자이너분께서 직접 해주셨슴다 ㅎㅎ
우와 2박3일 해커톤이라니 좋은 경험하셨겠네요ㅠㅠ결과물도 멋지십니다
저도 열심히해서 테오님 스프린트 12에 꼭 참여해야겠습니다
우와 너무 귀여워요!!
ㅋㅋ 고마워요 조이
qwer님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요~ qwerty님 반갑습니다 :)
사진
이 함수 리턴부분 문법 설명해주실분
있나요..
js입니다
spread operator
라는 문법입니다
한번 콘솔창에 임의의 arr과 index 만들어서 직접 넣어보세요
해보는게 제일 이해가 잘돼서 ㅎㅎ..
아 그니까
저렇게 문법을 쓰면
해당 인덱스 앞과 뒤의 값들을
배열로 return 해주면서 해당 index 만 제거해주는거네요
네네 index 번호의 배열 인자만 제거하고 return 하는거예요
근데 저같음 arr.filter((e, i) => i !== index)
이렇게 하면 더 깔끔할거같네요
사진
이런 유틸 함수를 구현해보았는데 (구현은 구립니다) 유용하게 쓰일까요?
useReducer 염두에 두고 만들긴 했습니다
제네릭으로 만드시면 여기저기 많이 쓰일 것 같긴 합니당!
아 근데 redux랑은 다르게 useReducer는 액션의 타입을 dispatch 함수가 알기 때문에 dispatch를 호출할 때 자동완성이 되니까 이런 유틸함수 없이 action 타입을 그대로 써도 불편하진 않겠군요!!
허브님이 두명이시네요
엄지척 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 웹에서 알림을 네트워크 도움 없이 로컬에서 타임 트리거 해줄수 있는 방법이 있을까요? 가령 스케쥴을 등록하고 일정시간이 지난후 알림을 트리거하는 방법이요
네트워크 도움 없이 -> 서버 도움 없이
settimeout 밖에 없지않을까요?
아.. 방법이 없다 봐야겟군요
계속 셋타임아웃 같은걸 돌릴수는 없으니..
const a = (func: (e: string) => void) => {func(str)}; 함수타입은 type이군요
본문 요약 type을 써야 할 때: 다음 타입들을 선언할 때 primitive type의 alias tuple type function type union type mapped type interface를 써야 할 때: declaration merging이 유용한 상황 object type을 선언하는데 type 안 써도 표현 가능할 때
누가 예전에 테이블로 잘 정리한 글이 있어 인상에 남아 공유드려요.
와 이 글 되게 애용했었는데 시간이 많이 지나긴 했네요, 저기서 mapped types랑 augment (declaration merging으로 이해했습니다) 빼고는 이제 노랑이 빨강이들 다 지원하는 걸 보면요…
저도 실무에서 쓸때는 문법적인 고민은 안하고 엔티티는 interface 나머지는 type 이런식으로 쓰고 있어요~ 야매적으로 말하면 여러줄은 interface 한줄은 type? ㅋㅋㅋ
유시온님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
서비스워커 키워드로 푸시 알림&백그라운드 쪽 알아보는 것도 방법일 듯 합니다. https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API setTimeout으로 하기에는 탭이 백그라운드로 들어가면 제한이 있기 때문에 원하는 동작대로 구현이 안될 가능성이 높습니다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#timeouts_in_inactive_tabs 크롬88버전부터 생긴 제한사항 https://usefulangle.com/web-updates/post/110/chrome-88-will-throttle-timers-1-minute
방금 트렌드 관련 글 올라와서 읽고 있는데 테오님이 작성하신 문서였네요. https://yozm.wishket.com/magazine/detail/1663/
혹시 css 중에 experimental 딱지 달려있는 것은 언제쯤 상용화(?)되나요? 대부분 기약없고 아무도 모르는 건가요?? 🥺
야매적인 것들 너무 좋아합니다
파일: 2022 IWOP 나눔축제 교재 최종.pdf
학교 행사 교재를 제작해보았는데
네 ㅋㅋㅋ
틀린 내용은 없겠죠..?
유시온님~~ 반갑습니다 어서오세요~
https://www.w3.org/Style/CSS/current-work 에서 현황 확인할 수 있는걸로 알고 있어요.
https://webkit.org/status 혹은 여기 들어가서 개발현황 보면 되지 않을 듯 싶습니다.
감사합니다!
시온님 반갑슴다
안녕하세요!
반갑습니당
어서오세요 :) 이곳은 프론트엔드나 개발을 하면서 궁금한 것들을 물어보고 아는 것은 기꺼이 알려주고 공유하면서 함께 성장하고자 하는 곳입니다~ 편하게 글 남겨주세요! ;)
사진
개발자에게는 null
와!! 엄청난 퀄리티네요!! 좋아요 :)
좌절하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
김정현 - MUSITEC님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Y.D.S님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 개발자 과정 프론트엔드공부 해보려고 하는데 현업 분들께 궁금한게 있어서 들어왔습니다. 혹시 질문 해도 될까요?
네~ 질문 편하게 남기셔도 괜찮아요!
화이팅!
우선 어제 국비지원 학원알아보려고 갔는데 상담직원분이 상당히 부정적으로 말씀하시더라구요. 제가 나이가 33살인데 지금 개발자공부해서 취업하시려면 34살일텐데 나이 많은 신입 누가좋아 하겠냐 부터 개발자 직군이 수명이 길지 않아서 다른직업 알아보시는게 좋을거 같기도 하다 이러길래 현업에 계시는 분들은 어떻게 생각하시는지 궁금합니다!
그 학원을 거르시면 되실듯!ㅎㅎ
그분 개발자인가요?
본인이 하고싶은걸 하는게 가장 중요하죠 롱런하려면!
원래 학원상담하시는분들중에 오지랖부리는거좋아해서 이상한소리하는경우가 많은데 그냥 걸러들으시면 될거같습니다!
상담 전문으로 하시는분 같았어요..
엥 뭔 개소리지… 저는 부캠 하는데 같은 클래스에 최장 42세도 있어요..
그 학원 상담사가 좀 이상한듯..
ㅋㅋ학원에서 그런말을 하네요..
근데 33신입이면 나이 보고 좀 거르는 회사도 있어서 취업률 걱정돼서 미리 자르는듯
어지럽네요...ㅋㅋ
다른직업은 나이든 신입 반겨준다고 물어보시지..
근데 한 36 정도가 신입 커트라인 같긴 합니다
개발자가 다른 외부적 요인 안보고 실력만 보는 직군 중 하나입니다!
아예 무시하는 건아니지만 그정도까진 아닌듯..
신입 나이에 커트라인 같은건 없구요. 드문 케이스이긴한데 40대 신입도 봤습니다. 그냥 잘 하시면 돼요 ~ 요즘 이력서에 그리고 나이 기재 안합니다 ㅎㅎ...
나이보다는 최소 1년 이상 준비하여 다른 지원자 전공자, 비전공자보다 결과물을 낼 수 있을지 고민해보시는게 좋을 것 같습니다.
오 진짜 드문 케이스네여
마자요 저도 나이 기재 안해서 면접 가서 물어본 적도 많은데
개발자는 포트폴리오가 공개된 경우가 많기 때문에 신입 대상으로 어떻게 준비하였는지 보고 판단하시는게 좋지 않을까요?
답변 해주신분들 감사합니다.
당장 저희 회사에만 그 비슷한 나이대에 커리어 전환하신 분 3분 넘게 계신걸로 알고 있어요! 나이는 절대 걱정하지 마시고, 그학원은 거르세요!
채용 방침은 회사마다 다르기 때문에 쉽사리 이야기 드리기 힘들지만, 개발에 재미만 느끼신다면 갈 곳은 많기 때문에 적성에 맞는지부터 판단해보시면 좋을 것 같아요.
호호 부는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
위 기준은 저같은 경우 하루 16시간씩 2달간 의자에 앉아서 작업하면서 '이건 재미없으면 정말 못하는 직업이겠구나' 라는 생각이 들더라고요.
호호 부는 튜브님이 나갔습니다.
제가 프론트엔드쪽으로 생각한게 저는 눈에보이는 결과물을 만들어내는걸 좋아해서 선택하려고 합니다!
네, 만약 국비지원 하신다면 개인의견으로는 국비지원 커리큘럼만 하면 다른 지원자와 차이가 없기 때문에 개별적인 프로젝트 하시는걸 권장드려요. (물론 커리큘러만 제대로 이수하였는지 보는 회사도 있습니다만..)
나이가 아예 안보는 요소가 아니긴 해요. 아무래도 나이 한참 많은 사람이 신입이면 선임 입장에서도 껄끄러울 수 있고, 신입 동기 입장에서도 공감대 형성이 덜될수는 있다고 생각합니다. 하지만, 이 쪽은 그러한 요소보다 실력이 더 중요하기 때문에 나이, 전공 상관없이 자신의 실력을 더 키우시는게 중요한거구요! 바꿔말하면 다른 신입 후보들보다는 더 많은 노력을 하셔야 경쟁력이 있을 수 있다고 생각해요.
얼굴마사지하는 제이지님이 나갔습니다.
38살에 코딩 공부해서 2년만에 구글 입사한 사람도 있습니다
그건 논외일듯요
이 글에 나와있습니다.
그 분야에서 두각을 나타내고 단기간에 성과를 내는 사람은 있지만 극소수니까요
너무 잘된 사례만 보고 자만하지도 말고 너무 안된 사례만 보고 낙담하지도 않고 자기 위치를 아는게 중요한것 같아요
현답이네요
변호사에서 구글러 ㄸ..
리액트 테스트 커버리지 확인도구 다들 어떤거 쓰시나요??
제스트?
저두 제스트요~~
.님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 디자인 관련해서 질문 하나 해도 되나여?
넹 이방은 모든 질문에 열려 있어요
사진
이런식으로 눌린 텍스트는
폰트인가여 아니면 따로 텍스트를 누른건가여
사진
폰트..같은데요??
아하 감사합니다 !
.님이 나갔습니다.
데브매칭 망했네요 ㅠㅠ 잘들 치셨나요
이번 난이도는 어떤가요?
비동기, 무한 스크롤, 컴포넌트화, inpu validation
비슷비슷한거 같네요
후아..시간이 부족했어요 ㅠㅠ 이제 막 재밌어질라 했는데
3시간 다 쓰고 끝났네요..ㅎㅎ
근데 이거 다 푸시는 분 계시나요? 역대 데브매칭도 3시간에 다 풀수 있는 양이 아닌것 같은데...
이번건 양이 제일 많았떤거같아요 ㅋㅋ
Home밖에 못했네요 ㅜㅜ
SPA도 처음 구현해보고 어려웠습니당
이번엔 약간 양으로 승부하는 느낌
SignUp 하려니까 시간 끝,,
저도 home만 겨우겨우..
열심히 해야겠네여...
다들 고생하셨습니다
다들 고생하셨어요!
고생하셨습니다
고생하셨어요!!
다음 분기때 더 잘하면 될듯 ㅎㅎ
전 기술과제가 훨씬 재밌네요 ㅎㅎ
라우팅에서 너무 시간 잡아먹었네요 후
저도 다음 분기를 노리려구요..ㅎㅎ
그래도 재미있고 유익하네요 좋았습니당
재밋엇습미다!
저근데 signup에서 로컬스토리지에 객체 넣는데 계속 마지막 키값에 \b가 붙더라구요. {..., "\bmbti":"INTP"} 이렇게 후.. 버그인가..
... 순수 자바스크립트 spa.. 전혀모르겟내요.. 리액ㅌ트만 한 최후인가요
순수자스로 리액트에서유즈이팩트로 값이바뀌면 리랜더링 하는것처럼 동작하려면 어떤식으로 코드를 써야하나요..?
스테이트변경함수에 렌더링을 붙여주면 되지않을까요?
혹시 다들 기대하는 혹은 상상하는 코드리뷰 문화는 어떤건가요? 많은 이직자들이 물어보는 것 중에 하나가 코드리뷰 문화인데 어떤것을 상상하는지 혹은 좋은 코드 리뷰를 경험한 분이 있다면 어떤 방식이었는지 궁금해요~
제 코드에 대한 피드백이요..! 당연한 얘기겠지만 ㅎㅎ 왜 이런 방식으로 작성했는지, 이보다 더 나은 방식에 대한 토론같은걸 진행하면서 많은걸 깨닫게 되더라구요 ~ 또 은연중에 안티패턴이나 조금만 생각을 바꾸면 더 쉽게 해결할수 있는 방법을 팀원들이 얘기해줬을 때 많은 도움이 됐던것 같아요! 그리고 서로간의 코드를 리뷰할때 날선 말투나 강요가 아니라 부드럽게 커뮤니케이션 하는게 좋았던것 같아요!
상상:코드에 대한 각자의 철학을 이해하는 시간 현실: 대충 보고 '이상없죠?'
ㅋㅋㅋㅋ
리뷰 빈도가 어떻게 되나요? 이런 경우가 없진 않지만 자주 있는 일은 아니다 보니 리뷰 문화를 물어보면 현실적으로 답해야 할지 환상을 충족시켜줘야 할지 참 어려워요~ 안 하는 건 아니지만 항상 그렇지는 못하는 거 같아서요 ㅋ
저희 회사 같은 경우에는 리뷰를 받아야 머지가 되는 구조라서 특수한 케이스가 아니라면 pr 올리면 무조건 리뷰해요! 리뷰기간은 최대 이틀내로 잡아두고 있고요 ㅎ
디디님 회사 가고싶다..
신규 기능/서비스 배포전입니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ오시죠 환영입니다..!! ㅎㅎ
리뷰는 무조건 하는데 마감시간은 똑같아서 끊임없이 압박들어오던 환경을 겪어보면 지옥이 따로 없더라구요. 리뷰에서 좋았던 부분은 리뷰 때 내가 생각하지 못한 더 나은 구조에 대한 제안이나, 실수로 잘못 수정한 부분에 대해 알 수 있거나, 다른 사람이 작성한 중복 코드가 있다고 알려주거나, 언어나 프레임워크에서 알지 못했던 다른 구현방식이나 키워드를 알게 되는 경우가 좋았습니다.
리뷰 해주는 사람은 업무 따로 업무진행을 어찌하나요?
비는 시간에 합니다..ㅎ! 복잡한 기능일 경우 한번에 올리지 않고 리뷰를 끊어서 올리거나 리뷰어가 이해할수 있도록 최대한 설명을 같이 달아놓는 편인것 같아요~
동의합니다 마감일정 잡혀있는데 리뷰하고 수정하고 리뷰하고;;
비는 시간에 합니다..ㅎ! 복잡한 기능일 경우 한번에 올리지 않고 리뷰를 끊어서 올리거나 리뷰어가 이해할수 있도록 최대한 설명을 같이 달아놓는 편인것 같아요~
혹시 NavLink에서 activeClassName없어졌나요?
Navlink??!!
제 코드에 대해 피드백 받으면서 미처 고려하지 못했던 부분을 알게되어 시야가 넓어지기도 하고, 잘못 이해하고 있던 부분들, 알지 못했던 것들을 알게되는 점도 좋은 것 같아요. 또 코드 전체를 혼자 파악하기 힘든데 이로 인해 발생하는 중복 등을 잡아줄 수 있는 점도 좋구요. 그리고 리뷰를 하면서 다른분들 코드를 보면서 배우기도하고 제 나름 더 좋은 방법은 없을까 생각할 수 있는게 좋았습니다.
다같이 좋은 방향으로 나아가려고 얘기를 나누는 과정 자체가 즐겁기도 한 것 같아요 ㅎㅎ
신규서비스 올라갈때는 어떤지 궁금하네요
빈도는 저희도 리뷰가 필수라 항상 합니다 ㅎㅎ
다들 신규 입사자들이 기존 코드 리뷰 부탁할때는 어떻게 하시나요?
오늘 데브매칭에서 /web/signup에서 새로고침하면 signup.html로 가는거.. 어캐 해결할수 있을까요? signup.html 건들어서 리다이렉트 해야되나 싶엇는데
반대로 리뷰 때문에 릴리즈가 늦어지거나 하는 경우는 없나요?
많아요 느려져요
필요성에 대해서는 당연히 공감하믄 편인데 저는 체감효용 비율이 빈도에 비해 낮은 편이라서 효과적인 리뷰 경험 회수가 적은 것이 늘 아쉬워요 그래서 뭔가 좋은 방법 자체가 궁금하긴 해요
저는 튿히 대부분이 초기 제품 경험을 하다보니 안정성보다는 속도 중심의 프로젝트를 하다보니 코드리뷰를 경험이 거의 없다싶이 해서 잘하고 있는 팀의 구체적인 방법들이 궁금해요~ 회사 기밀이 아니라면 방법이나 절차나 양식등이 어떤지 궁금해요
저도 예전엔 꼭 리뷰를 하고 merge하는게 좋지 않을까 생각했는데, 솔직히 배울 수 있거나 도움이 되는 좋은 리뷰는 단순한 코멘트로만 이루어지기는 쉽지 않고 코드 스타일같은 리뷰만 주로 남게 되더라고요. (특히 같이 오래 일한 사람들일 경우 더욱) 그래서 요즘엔 격주 금요일마다 엔지니어링 데이라고 해서 같은 챕터 사람들끼리 자신들이 짠 코드를 토론 하거나 새로 배운것들을 공유하는 자리를 가지면서 강제(?) 코드리뷰를 어느정도 대체하게 됐어요
그래도 중요한 기능이나 복잡한 도메인에 대한 코드리뷰는 최대한 받는다는 가정하에 하고있습니다
말씀중에 죄송한데 그 도메인이란건 어떤 뜻일까요?? 추상적으로는 감이 잡히는데 정확히는 잘 모르겠어서요 ㅠ
저의 경우는 리뷰 단계에서 배포도 동시에 진행을 하여 기능 테스트(e2e)는 QA에게 맡겼습니다. QA가 기능 테스트를 하는 동안, 신규/개선인 경우에만 코드리뷰를 진행을 하고 P1~P5 반영 정도를 같이 작성을 합니다. 이 부분을 중간에 추가하였는데, 확실히 바쁘면 P4~P5를 무시해도 되서 프로세스를 빠르게 할 수 있었습니다. 뱅크샐러드 참고: https://blog.banksalad.com/tech/banksalad-code-review-culture/
사진
이 부분을 중간에 추가했는데 P4~P5 바쁘면 무시할 수 있어서 편하긴 하더라고요.
이미 병합되고 문제가 될 수 있는 코드는 codestream 툴 사용하여, 기존 코드에 코멘트를 작성하고 실시간으로 바로 전달하여 리뷰 진행하는 편입니다. https://www.codestream.com/
그 외 추가 몇가지 사항으로 - 5일 이상 지난 PR은 리뷰없이 이야기하고 병합가능 - 자기가 온전히 책임질수 있는 PR은 리뷰없이 병합 가능(간단한 문구 수정 등) - PR 템플릿의 경우는 참고링크만 남기고 나머지는 JIRA같은 다른팀들 볼 수 있는 공간에 작성하기 등 룰을 만들었던 것 같아요.
회사에서 주로 다루는 비즈니스?로 생각하고 있어요. 약간 사내 플랫폼에 대한 비즈니스 이해도가 각자 다르기 때문에 이런것들을 하나의 이해로 일치시켜 간다고 생각하는 느낌이네요
그 외 릴리즈 끝날때마다 개선에 관련되서 계속 이야기해서 효율대비 시간 걸리는 프로세스를 단축시키는 방향으로 했던 것 같아요.
대부분 비슷한 경우로 진행을 하시겠지만, 저는 위 프로세스로 진행을 하고 있어서 공유드려요.
근데 제이쿼리는 왜 이름이 제이query일까요?
쿼리처럼 돔조작이 편하다?!
가령 쇼핑몰을 잘만드는 개발자가 리액트를 정말 잘 안다고 해서 은행앱이나 세무서 앱을 뚝딱 만들기는 어렵습니다. 기술은 같지만 비지니스의 성격이나 알아야 할 내용들이 존재하니까요~ 기술 외에 비지니스 영역으로 알아야 할 영역을 도메인이라고 부릅니다
뜨끈하고 든든한 망분리 지식
당시 jQuery의 가장 큰 특징이 css selector로 DOM을 조회 할 수 있는 거였고 이를 javascript query라고 칭했던 것 같아요 이후 querySelector가 jquery 함수를 보고 표준이 되어습니다
요즘은 제이쿼리 안 배우나요?
= 잘 안 쓰나요?
안씁니다
요즘은 이런 도메인들이 각기 다르기 때문에 best practice로 될만한 아키텍처를 찾는게 어렵네요
요새는 조금 사장되는 분위기인데 레거시 코드로 남아있는 경우는 많습니다.
그래도 사람 뽑기가 어려워서 도메인별로 지식 최적화 된 사람까지 뽑기는 너무 힘들고 기술만 잘 알면 뽑히는것 같습니다
Jquery가 그 당시 자주 사용하는 기능들의 축약이라서 내부 구현 로직 보는건 도움이 많이되더라고요. 예를 들면, cloneNode를 바닐라로 사용하는 경우 이벤트 리스너는 복사되지 않는데, Jquery에서 이벤트 리스너 복사옵션이 별도로 있어서 어떻게 구현했는지 참고하면서 배웠던 경험이 있는 것 같아요.
요즘 대세가 되는 리액트는 돔조작을 직접 하는경우가 거의 없어서 제이쿼리를 쓸 이유가 없어진거같습니다
"프로 자바스크립트 테크닉", Jquery 리드 개발자가 쓴 책인데 Jquery만들면서 경험 내용을 읽을 수 있어서 좋더라고요.
2015년도 출판이라서 오래되긴했지만 내용자체는 지금봐도 괜찮을 것 같아 이야기 드려요.
감사합니다! 찬찬히 공부해볼게요 고맙습니다
네. 저도 릴리즈 하는라고 항상 코드리뷰를 제떄 못하여 비슷한 고민을 하는 입장에서 조금이라도 도움이 될 수 있을까해서 이야기 드렸어요.
코드리뷰 기한은 보통 어느 정도로 잡으시나요...?! 저희는 보통 당일안에서 라벨로 시간정해서 몇시간내에 답변인데.. 받는 입장에선 빠르게 받아서 좋은데 하는 입장일 땐 집중해서 해야할 일이 있는데 흐름이 끊겨서 힘들더라구요
여러분 혹시 js class를 이용해서 to do list 만드는 예제가 있을까용??
못 찾겠어서..
저의 경우는 4일로 고려했었습니다. 보통 월요일 시작하여 목요일까지 리뷰 진행하고 보통 금요일날 마무리 지었던 것 같아요.
오 일단 참고해보겠습니다 정말 감사합니다~
리뷰하는라고 정작 자기 담당이슈 처리못하면 눈칫밥 먹어서...곤란한 경우가 많은 것 같아요.
저희는 지라 티켓에 서브태스크로 잘게 쪼개서 최대한 빠르게 리뷰받는식으로 하고있습니다.
안녕하세요 질문이 있습니다..! 현재 react와 Mui를 활용하여 레이아웃 작업을 하고 있는데 화면에서 (메인 부분)과 (헤더에 마우스 오버시 생기는 서브 메뉴박스)를 겹치게 만들고 싶은데 어떻게 하는게 좋을까요??
두 컴포넌트 모두 MUI에서 Box component활용하여 개발하고 있습니다!
사진
안녕하세요! 사진에 보이는 왼쪽 아이콘을 png로 넣을지 svg로 넣을지 고민하고 있는데 혹시 정답이 있을까요?
svg가 확대를 하여도 픽셀이 보이지 않아서 svg가 좋을 것 같아요. (벡터 vs 픽셀 그래픽)
차이가 없을줄 알았는데 확대할 경우에 차이가 있군여! 감사합니다
오..
https://github.com/mswjs/msw/issues/156 mocking 서비스는 항상 웹소켓 지원 이슈가 핫한것 같아요.
이런게잇군요... 소켓은 아직 모킹 안해봐서 몰랏네요ㅠ
젠님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
작은뉴비님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
프론트 취준생입니다 여러 질문이나 정보 얻고 싶어서 들어왔습니당
보통 input을 만들 때 defaultValue를 서버에서 fetching한 값을 사용한다고 한다면, input에서 어떤식으로 상태관리를 하시나요?
사진
죄송한데 해당 함수는 jest로 테스트 할때 어떤방식으로 하면될까요?
11-18번까지 테스트 하는 방법을 모르겠어요 ㅠ
리액트 페이지네이션 번호 만드는건 react-js-pagination을 썼는데 목록에 넣을 자료는 그냥 배열을 만들면 될까요
혹시, 테스트 더블 많이 쓰시나요? spy, mock, stub 세가지 용어 구글링해보는데, 읽어도 무슨 차이가 있으면, 언제 어떤걸 쓰는게 좋은지 잘 모르겠네용ㅠㅠ
학원에서 Vue 위주로 배울것 같은데 Vue가 프론트엔드에서 젤 많이 쓰는 프로그램인가요?
스타트업 가시고 싶다면 리액트가 더 많이 쓰이는거 같고요 대기업 si 하시거나 좀 규모 큰 플젝할때 뷰 많이 쓰는거 같아요 그냥 제 뇌피셜이긴합니다 ㅋㅋ
흠.. 프로그램간 호환이 전혀 안맞는 수준인가요?
호환이 안맞는다는게 어떤 의미인지 모르겠어요.
리액트로 작업한 것을 Vue 에서는 아예 못쓰는지 같은거요!
리액트를 가장 많이 쓰죠ㅐ
리액트랑 뷰랑 같이 사용하고 싶단 말씀이세요?
그렇게 사용한 경우는 본적이 없는데..
리액트 프로젝트로 시작했다면 마이크로 서비스로 다른데 갖다 붙이는거 아닌이상 계속 리액트로 하겠죠...?
그춍
제가 배우기 전이라 프로그램 체계를 아예 몰라서요;; 그럼 Vue를 학원에서 배웠는데 회사에서 리엑트를 요구하면 저는 완전 새로 다시 배워야 하는 상황인가요??
그쵸그쵸
근데 뭐 회사에서 구르다보면
금방 돼요
같은 자바스크립트라서
이모티콘
ㅋㅋㅋㅋㅋㅋㅋㅋ
람머스신가용
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
근데 ㄹㅇ
구른다는게 가장 맞는 것 같아요
ㅋㅋㅋㅋㅋ
환영합니다~~ 언제든 편하게 궁금한 것이 생기면 질문 남겨주세요~ 내가 궁금한것들은 남들도 궁금하겠지라는 생각으로 부담없이 적어주세요
그렇지는 않습니다ㅋ 완전 새로배우는 것은 아니에요 람머스가 나와서 롤에 비유하자면 리액트와 뷰는 같은 라인인데 캐릭터가 다른 정도 입니다. 조작법은 다르지만 기본개념이 충실하다면 언제든 갈아탈수 있고 둘다 잘 하는 것도 어렵지 않습니다 물론 더 잘할수 있는 장인의 개념도 마찬가지겠지만요
stub은 잘 모르겠지만 spy, mock은 많이 쓰는거같아요
혹시, 차이에 대해 여쭤봐도 괜찮을까요?
리액트가 그냥 지금 메타에 대세 픽이자 사람들이 가장 먼저 배우고 있다보니 다들 먼저 배우라고 하는 거죠
흠 그럼 배우려는 학원에서 약간 흐름 못타고있는거네요;;;ㅠ
저도 셋다 써보긴 했는데 차이를 외우고 있지않아서요. 검색해보시는게 젤 좋으실거같아요!ㅐ
동영상
안녕하세요 지금 검색영역 css 작업 중에 '검색'버튼 영역과 이름,휴대폰 번호의 영역이 현재 나뉘져있는데요 보시면 검색 버튼 영역이 움직이지 않았으면 좋겠는데 혹시 방법을 아시는분이 계실까요? 저 두 영역은 flex로 되어있는 상태입니다!
ㅜㅜ검색해도 이해가 안되서요ㅠㅠ알겠습니당! 답변해주셔서 감사합니당ㅠㅠㅠ
mock은 예를들어 한 클래스에 엄청나게 많은 메서드가 있어서 import 가 굉장히 많아지면 하나하나 모킹해줘야해서 번거로운데 mock을 쓰면 import 되는 모든 메서드들이 모킹되어져 나온다? 는 느낌이고 spy 같은 경우는 모킹이라기보단 그 클래스 내에서 하나의 메서드에 대해서만 결과를 볼 수 있다는 느낌??
채용사이트에서 뷰랑 리액트 검색해보시면 바로 확인 가능하실거에요!
이게 저도 공부하고있는 입장이기도 해서 제 말이 맞는게 아닐수도있어요
으음.. 하지만 메타가 변하기 전에는 vue가 1픽이던 시절도 있었고 vue가 망테크 까지는 또 아니에요
대세라기보다는 뷰 사용하는 회사 가셔도 되고, 뷰를 한번 해보시고나서 리액트 보시면 첨 배우는것보다 수월하게 할 수 있지않을까여
아 추가해서 spy는 모킹해도 되지만 모킹말고 실제 내부 로직을 돌려보고 확인하는 느낌이라고 볼 수 있을듯 합니다
흐름을 못타는건 아닐겁니다
흐름을 못탄다기보다는... 국비학원의 특성이아닐까 싶어요
구인이 쉽냐 안쉽냐의 차이죠!! 생태계가 어느쪽에 더 친숙한가 그 차이일뿐이에여
답변들 감사해요 도움이 많이 되네요 확실히!
네이버에서도 뷰는 쓰입니다
mocking 은 결과값을 임의로 넣어주는거고, spy 는 해당 함수에 스파이를 심어서 호출이 몇회 진행되었는지, 어떤결과값으로 리턴되었는지 를 파악한다고 이해했습니다!
뷰 사용하고 있는 기업 리스트에요
오 이런사이트두 잇군요
사진
헉 mocking 에 관한 내용이었나요? jest.mock에 관한 질문인줄알았네요
원티드 기준 단순 검색결과는 이렇네요..
저는 두개가 같은 개념이라고 생각합니다 🤗
으쓱으쓱 어피치님이 나갔습니다.
근데 mocking 결과값을 임의로 넣어주는 거랑, spy로 어떤 결과값으로 리턴되었는지 파악하는거랑 어떤 차이가 있는건가용?? 아…mocking은 결과값을 직접 넣어주는 거고, spy는 결과값을 직접 넣어주지 않는 차이인가용?ㅎㅎ
spy는 내부로직 그대로 진행할 수 있어서 그걸 토대로 확인하는 걸걸요?
혹시 넵플러스나 그린아이티아카데미 아시는분 계세요.?
mocking의 경우에는 내부 로직 그대로가 아니라, 그냥 결과값을 임의로 넣어주니까 거의 껍데기로 볼 수 있는거네용?? 어느정도 감이 잡히는 것 같아요ㅎㅎㅎ
네 저는 이렇게 이해하고있어요 !
넵!! 답변감사합니당!!ㅎㅎㅎ
앱에서 인박스 알림이란게 서버 사용안하고 앱 로컬 기능만 사용하는걸 말하는 걸까요?
notification api를 말씀하시는건가요?
회의하다가 앱에서 인박스라는 용어를 들었는데 웹의 노티피케이션api랑 같은건지는 저도 모르겠어서요ㅠ
플랫폼이 어떻게 되신지 알 수 있을까요?
아이폰, 안드로이드 입니다
https://help.shopify.com/ko/manual/inbox/inbox-notifications 위의 기능을 말하는 것 같은데, 알림의 서버 필요 여부는 기획에 따라 달라지지 않을까 생각이 듭니다.
오 감사합니다 회사에서 말한게 저거랑 비슷한 개념인가보군요
사진
앱에서 저렇게 알림 뜨는 기능인데, 서버에서 메시지 받아올지, 로컬에서 보내는 메시지일지는 내부구현에 따라 달라서요.
push api랑 비슷한건가보군요
유데미 강의할인보고 정신놓고 질렀는데
이거 가격 항상이런건가요
할인 자주 하긴 합니다
종종하는데 지금이 아마 최저가이지아ㅎ나요,?
유데미는 근데 항상 치킨보다 싸서... 큰차이는 없는 것 같아요
요즘 치킨이 더 비쌉니다 ...
유데미 심심하면 12000원까지 가격내리더라구요
오 심심하면
좋겟네요 계속
저도 이번에 8만원가량 질럿어요
항상 할인합니다 ㅠㅠ 안들으실 강의라면 환불하시는게 좋습니다
인프런에서 프론트 폴더 구조 프로젝트 아키텍쳐, 코딩 스타일같은거 추천할만한 강의 있으실까요...?
프론트를 혼자개발하다 보니 이런것들이 궁금하고 발목을 잡네요 ㅠ
폴더구조, 아키텍처, 코드 스타일의 경우 정답이 없어, boiler template 키워드로 검색하여 비교하면서 자신만의 템플릿을 만들어 보는 것도 도움이 될 것 같아요. 참고: https://pankod.github.io/superplate/docs/
코드 컨벤션의 경우는 아래 룰들이 왜 사람들끼리 정의를 하였는지 확인하고 good, bad case 보시면 도움 될 것 같습니다. https://eslint.org/docs/latest/rules/
위의 내용은 정답이 없어서 개발자들이 항상 싸우는 내용이기도 하지만, 자신만의 생각이 있으면 좋을 것 같다는 생각을 했어요.
와 감사드립니다!!
깡시님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
개발자님들 혹시 html <script> 안에 설정한 변수를 js파일로 export하는 방법 아시나여 ???
왼쪽 파일에서 userId를 window 객체에 할당하고 오른쪽에서 window.으로 접근해봐주실수 있나용?
맞는진 몰겠어요ㅠㅠ
혹시
window.userID="권현우" 이렇게 할당하는게 맞나요 ..?
저렇게하면 오른쪽파일에서 window 뭐라고 찍히나요?
Window 객체안에
userId 가 있는지 확인해보세용!
아쉽게도 안뜨네용 ㅠ
어쨋든 의견 주셔서 감사해요...
ㅎ
script 속성에 type=“module” 넣으시고 js 파일 하나 더 만들어서 거기서 userID를 export 해보세요!
엇 아니면 저 스트립트를 head 태그말고 body쪽에 설정해보시겠어요?
사진
이방식도 안돼네영
넵 해볼게요 ~
사진
이렇게 뜨네요 ㅠ
스트립트를 body 에 설정하고type을 지운다음
그안에서 window 객체에 할당해보시갰어용?
사진
넵넵
Main.js가
바디에서 임포트되게
해봐주실수잇나용..?
전역에 선언되있는걸 굳이 다시 모듈로 쓸필요 있나요? 전역으로 계속 쓰면 될꺼 같은데요?
사진
오 됐어요! body에 window 객체로 접근하고 외부 js파일에서 import없이
진행하니
사진
나오네여
window 객체는 한번 정해지면 새로고침하지 않는 이상 변하지 않나요 ?
window에 들어있는 값을 직접 변경하거나 js를 리로드하지않는 이상은 변하지않을것같아욥 근데 정확하지는 않습니다 저도 구체적으로 아는건 아니라서ㅜㅠ
도움주셔서 감사해요 ㅎㅎ
사진
이거래요!
깡시님 반갑습니다 어서오세요 :)
타입스크립트에서 타입 또는 인터페이스의 네이밍을 어떤 규칙을 두고 작성하시나요 ?
예를 들면요?
저번에 인터페이스 이름을 ISomeInterface 처럼 하는지 SomeInterface 처럼 하는지 얘기가 있었던 것 같은데 그 때 대화를 본 기억으로는 보통은 I같은 prefix는 빼고 적절한 이름을 써서 많이들 작성하셨던 것 같아요
확실히 요새는 뭔가 헝가리안식 표기법을 추구하지 않는 것 같아요
대문자로만 시작한다 정도?
대분자로 시작하는 카멜케이스
음 유저정보를 받아오는 api의 response body에 해당하는 데이터의 타입을 명시한다고 했을 때, UserDataResponseBody거나, User, 등등 될 수 있을 것 같은데 데이터의 성격까지 지칭하는 편이 좋은지, 아니면 데이터 그 자체를 뜻하게하는 네이밍이 좋은지 고민이 되어서요
헝가리안은 지양되는군요
아! 저는 UsersResponse UsersParams(혹은 UsersInput) 같이 api에서는 response와 params은 뒤에 붙이고 있고
엔티티명은 그대로 User 이런식으로 쓰고 있어요
일단 엔티티를 중심으로 꾸밈없는 이름을 쓰고
목적이 필요한 경우 정해진 컨벤션의 이름을 뒤에 붙여두고 있습니다
아하! 감사합니다 !!
에이유님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
동영상
안녕하세요. 구현을 고민중인데 답이 잘 나오지 않아 질문 드립니다 😂 위와 같은 탭메뉴를 어떻게 구현할 수 있을까요? 스크롤 위치를 감지해서 특정 위치에 도달했을때 위의 탭메뉴의 특정 탭 상태를 active로 바꿔주는 탭메뉴 입니다. intersection Observer의 threshold를 통해 제어하려 했는데 실패했습니다. 그래서 scroll percentage로 제어해야 하나 하고 고민하고 있습니다..
현재 scrollTop과 컨텐츠의 offsettop을 비교해서 탭의 액티브를 바꿔주면 되지않을까요?
질문에 맞는 답변인지는 모르겠습니다만 도움이 되고자🥲
바닐라로 구현하시나요?
아뇨 리액트로 하고 있습니다!
intersection observer기능이 있는 wrapper 컴포넌트를 만들고 section 마다 사용해줄거 같아요 wrapper 컴포넌트는 handleChangeTab, tab 두가 props 받아서 observer에 걸리면 handelChangeTab(tab) 이렇게 실행되게 하면 되지 않을까요 handleChangeTab에는 현재 tab을 setState할 수 있게끔? 아니라면 전역 상태를 이용해도 되겠고요 상상 코딩이라 안될수도 있습니다
김민지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 김민지님~~ 반갑습니다 :)
자주보이는 레이아웃들을 css로 어떻게 만들까? 대표적인 레이아웃 css예제들이 있는 사이트 입니다 https://csslayout.io/
좋은 정보 감사합니다~!
떠오르는 일감은 스크롤 이벤트와 getboundingClientRect를 이용해서 top을 조사해서 만들것 같아요 이후 퍼포먼스가 안나오면 다른 방법을 찾아볼것 같네요
getBoundingClientRect는 항상 화면을 중심으로 값을 반환하기 때문에 현재 어떤 화면이 있는가 확인하시기 쉬울거라고 생각합니다
ScrollSpy로 검색하시면 여러 참고 자료 나올 것 같아요. https://codepen.io/jonasmarco/pen/JjoKNaZ?editors=0010
지금 기존 쇼핑몰에 삽입되는 슬라이더를 만들고 있는데요 혹시 삽입된 화면을 확인하고자 하려는데 쇼핑몰 code 권한이 없네요 ... 레이아웃 맞는지 확인할 방법이 없을까요?
사진
화살표에 제가만든 슬라이더가 들어갈 예정입니다
정확히 원하는게 어떤건지 질문파악이 어렵네요 핵심 문제상황이 뭔지 한번 더 설명이 가능할까요?
음 고객사 쇼핑몰에 제가만든 스와이퍼만 들어갈 상황인데 테스트용으로 그 쇼핑몰에 제 스와이퍼를 삽입한 화면을 확인하고 싶었던 상황입니다
HTTracker를 이용해서 특정사이트의 리소스들 ( HTML,JS,폰트,이미지, 기타 ) 을 클라이언트 입장에서 다운로드 받으면 될 것 같습니다 !
피자 먹다 자는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 선배님들.. typescript 삽질중인데 도움 요청합니다 ㅠㅠ
사진
사진
CopyButton에 {target}에 type을 어떤걸로 설정해야할까요..?
copyButton 누르면 clipboard에 mdx문서에 있는 CodeBlock 코드들을 저장하는 로직입니다.
온클릭이벤트면 onClick에 마우스 올려서 뜨는 type으로 주시면뎁니자
선배님들 혹시 원티드 프리온보딩 코스 이용해서 취업하신 분들 계실까요? 후기가 좀 궁금합니다!
고객사 사이트의 경우, php + jquery 이용하여 구현되는 것으로 보여지는데요. 그렇게 되면, Swiper를 VanillaJS 통해 구현을 하셨을 것 같습니다. 데이터 구조는 php라서 외부로 드러나지는 않지만, DOM만 보면 대략 아래처럼 데이터를 받을 것 같아, { name: string; description: string; originalPrice: number; discountPrice: number; } 해당 데이터를 넣어 Swiper UI 구현이 가능한 라이브러리를 제공하는 것이 좋아보입니다. 참고: https://swiperjs.com/
target에 그냥 문자열을 넘기게 되면 CopyButton 컴포넌트를 만드는 시점에 클립보드에 저장되는 문자열이 정해져 고정되어버려서, 아마 원하시는 동작을 기대하기 어려울 것 같습니다. 따라서, 예를 들면 `() => string` 타입의 getText 함수를 prop으로 넘기셔서 - 버튼을 클릭했을 때 그 getText 함수를 호출하는 식으로 버튼을 구현하시고 - CopyButton을 CodeBlock 내에서 사용할 때는 getText prop으로 내부 텍스트를 얻는 함수를 만들어 넘겨주시면 원하는 동작을 하지 않을까 싶습니다. 물론 다른 더 좋은 구현이 있을 수도 있습니다.
사진
그런데 개인의견으로 저정도는 Php 사이트에서 간단하게 css 조작만 하면 swiper는 되지않을까 싶네요..
역시 깃허브님
답변은 너무 감사드립니다만.. 제가 초보라서 이해하기가 어렵습니다 ㅠㅠ any로 하게되면 동작은 잘 됩니다. console.log(typeof target)을 하면 string으로 뜨긴 합니다
HTMLButtonElement Type 쓰면 되지 않을까요?
칠드런 타입이 props에 있으실텐데
그대로쓰면 안되려나요?
칠드런 타입이 머엿더라 기억이안나네
사진
이게 전체 코드입니다.
오잉 칠드런이 문자셧군요?
그럼 위에
children도 이렇게 설정하는건지 모르겠습니다.. 일단 에러는 안나길래 이렇게 설정은 했습니다만...
그 칠드런 그대로
쓰시면될거같습니다
스트링 또는 스트링배열
언디파인드도 잇을수잇네여 그러고보니
(parameter) target: any Property 'target' does not exist on type 'Props'.
그대로 에러가 납니다
이벤트객체 타겟 아닌가요?
{target}: Props 이런식으로 하라는 말씀이시죠?
아뇽
그렇게하면
칠드런만 props로 타입정의돼잇는데
타겟으로 받으려하니 안되는듯?.?
그냥 target : string ~~이렇게 줘보실래요한번??
아..
Property 'target' does not exist on type 'String'.
요로코롬 됩니다
한번 코드 보여주실수잇을까여??
사진
{ target }: String 말구 { target} : { target: string } 이렇게유
대소문자도 중요해유
스트링이랑 스트링배열 둘다
사진
이렇게 말씀이실까요??
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText#parameters writeText는 string[] 배열 파라미터가 들어갈 수 없어서 그럴 것 같아요.
사진
뺐더니 아래 저것만 빨간색 남았습니다!
children이 어떠한 경우인지 모르겠지만, string 배열로 오게 된다면, join() 같은 메소드를 통해서라도 string으로 변경해줄 필요성은 있어보입니다.
(property) target: string Type 'string | string[] | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322) CodeBlock.tsx(9, 35): The expected type comes from property 'target' which is declared here on type 'IntrinsicAttributes & { target: string; }'
역시 토나오는 타스...
해당 에러는 요렇게 뜨네요
후…ㅠ
as로 고정하시던지 아니면 예외처리를 두시던지..
as 한번 찾아보겠습니다!
1. children: 없는경우 2. children: string 3. children: string[] 위 3가지 고려하여 writeText()에 삽입되면 좋을 것 같아요.
혹시 괜찮으시다면 children 대신 다른 변수명을 쓰시는 것도 좋을 것 같습니다
퍼블왕초보취준생님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
퍼블 왕초보인데 질문 해도 되나요
as의 경우는 강제로 이 타입만 올거라고 이야기하는 것이기 때문에 실제 데이터상으로 string[]이나 null, undefined가 오게되면 문제가 될 수는 있을 것 같습니다.
혹시 페이지에서 버튼마다 다른 모달 컴포넌트를띄울 때는 각각 useState로 상태를 만들어줘서 관리하는 편인가요?
넹
지금 스트링 스트링배열 언디파인드로 받았는데 타겟에 넘길땐 다른 타입은 빼고 스트링만 주겠다하니 문제가 생김과 동시에 게스트님 말씀대로 이너텍스트?에 스트링배열을 주려고하면 또 오류가 나고 그럴거같아요
사진
이 레이아웃 구성할때
그리고 보통 칠드런은 하위 컴포넌트를 나타낼때 많이쓰는걸로 알아서 이름 바꾸시는게 나을듯?.?
header 앱솔로 띄우는거 말고 방법이 없어요 ?
아뇨
방법은 많죠
사진
이렇게 나오는데 저 네비 헤더 옆으로
옮기고 싶은데
살려주십쇼..
사진
undefined가 어디서 나오나 했더니 제가 children?: string 으로
했어가지고 그랬던거군요..
에러 안나고 잘 됩니다 선배님들..!
제가 잘 몰라서 그냥 다들 쓰는 children으로 했는데 어떤식으로 바꾸면 좋을까요??
걍 body에 플렉스 주니 바로 해결되네요 감사합니다
퍼블왕초보취준생님이 나갔습니다.
이름이요? text sourceCode sourceText 같이 마음에 드시는 파라미터 이름 하나 고르시면 무난할 것 같습니다!
아… 이해했습니다..!! 변수를 저렇게 사용하니 뭐가 뭔지 정확히 명시가 되는군요..! 아직 초짜라 하위컴포넌트의 인자인지 상위 컴포넌트인자인지 볼때마다 헷갈려가지고 조금 힘들었는데 조금씩 감이 잡히는거 같습니다
감사합니다
김정현 - MUSITEC님이 나갔습니다.
사진 2장
부모 컴포넌트에서 LeftSideList 컴포넌트를 맵을 돌리고, 자식 컴포넌트인 LeftSideList에 li태그인 listBox에서 onClick 이벤트가 일어나면 글자 색이 노랑으로 바뀌고, 다른 리스트를 누르면 원래 노랑으로 변했던 list는 검은색이 되고 다른 리스트가 노랑색이 되게끔 하고 싶은데 문제는… 현재 노랑색이 다 유지가 됩니다…! 혹시 어느 부분에서 문제인지 봐주실 수 있나요???
지금 리스트아이템 하나별로 state가 하나씩 각각 있는 상황인 것 같습니다. 각 리스트아이템을 클릭하면 자기 state를 list.listName으로 업데이트해주고 다른 리스트아이템의 상태는 건드리지 않는 상황입니다. 따라서 이미 클릭된 리스트아이템이 계속 유지되는 것으로 보입니다. 마지막으로 누른 아이템만 노랑으로 만들고 싶으시다면 상위 컴포넌트에서 클릭된 아이템 상태를 관리하는 것이 하나의 방법이 될 것으로 생각됩니다.
아 그렇군요! 답변해주셔서 정말 감사합니다!!
사진
혹시 표시한 영역처럼 아이템의 배경 역할을 하는 부분을 뭐라고 부르는지 아시나요..?
말씀그대로 배경이 되지 않을까요...?
여백..?
질문이 다소 추상적인것 같습니다 좀 더 구체적으로 어떤걸 알고 싶으신건지 알려주시면 좋을듯요!
갑자기 집에서 케이티 설문하더니 아이폰이 당첨되서 카드번호 쓰라는데 피씽일까요..
'공짜 아이폰' 솔깃해서 카드번호 적었더니 결제 문자가?
이거아니에여 ?
네
이거 사기조? 홀린듯이 폰번호 집주소까지 다 적었어요ㅜㅠ
사기네여
휴 카드번호까지 다 적고 누르기전에 피씽인가 싶었어요..
감삼다..
사진
디자인 시스템의 정의에 따라 다르긴 하지만, background 혹은 background layer 정도로 부른는 것 같아요
아하 감사합니다ㅏ!
생각해보니 토스 디자인 시스템 비공개인가요? 본적이 없는 것 같아서.. 아시는 분 있을까요?
관련 포스팅은 많을걸로 알고있어요
사진
내부적으로 있는 것 같은데 오픈되어있는지는 모르겠네요;;
css 강의 추천해주실만한 것 있나요? 홈페이지도 몇개 만들어봤고 구현도 가능한데 어 왜 되지? 이런 경우가 너무 많아서.. 모호함을 이기고 정확하게 알고싶습니다
저는 이거로 공부했었어요
오.. 감사합니다!
사진
배포 계획을 가지고 있지만, 아직 예정인가 보네요.
작년에 영상보니까 프레이머 쓰는거 같더라구요
어떻게 공개할지 기대가 되네요
김버그의 css 강의 좋았어요~👍
리듬타는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
https://csslayout.io/ 레이아웃 배우는건 여기가 괜찮은 것 같아요.
레퍼런스 체크는 아래도 괜찮아보입니다. https://www.w3schools.com/cssref/default.asp
엄청 예전에 공부하던 곳인데, 아직도 운영하고 있었네요. 아래도 기본적인건 있어서 좋은 것 같아요. http://soen.kr/html5/css/css.html
주니어개발자(0.1년차)님이 나갔습니다.
대답해주신 것들 참고하겠습니다 감사합니다!
yarn berry를 다운그레이드 하고 싶은데 어떤 명령어를 쳐도 다운그레이드가 안되네요..
yarn set version 1.22.1 해보셨나용?
감사합니다
여러분 답변 주셔서 감사합니다..! scroll event에서 scrollTop이랑 offsetTop 비교하는 방법으로 해결했습니다!!! 답변주신 모든 분들 감사합니다 흑흑
궁금하신 분들을 위해 이 이슈였습니다~!
조이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 배불뚝 제이지님 반갑습니다 :)
디자인같은거 참고하기 좋은 사이트 있을까요?
디자이너 없이 프로젝트 진행하니 너무 막히네요 ㅠ
목적이 뭐에요?
웹사이트인가요? 모바일?
웹인데 모바일까지 고려한 웹앱사이트입니다
무난~히(?)는 ㅎㅎㅎ 핀터레스트나 비핸스 많이 참고해서 봅니닷!!
추천감사합니다!
앱은 드리블도 진짜 많고요….!
개발까지 고려하면 figma도 괜찮아요 https://www.figma.com/community/tag/web
와.. 좋은 추천 감사합니다 ㅎㅎ!!
오호 ㅎㅎㅎ 그러네요!! ㅎㅎ 제가 추천해드린곳은 정말 디자인적인 도움만....ㅎㅎ
https://www.figma.com/community
https://wwit.design/ 모바일쪽이면 여기서 어떻게 만들지 레퍼런스 체크 하는것도 좋은 것 같아요.
JS못하는사람님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 JS못하는사람님 반갑습니다 :)
안녕하세요.
이사이트도 진짜 좋네요!
어서오세요 이곳은 프론트엔드나 웹개발에 대해 궁금한것들을 물어보고 아는 것은 공유하면서 함께 성장하고자 하는 곳입니다. 실무적인 이야기도 좋고 고민상담이나 함께 이야기해볼만한 꺼리등을 주셔도 좋아요~ 잘 부탁드립니다
DDack님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 DDack님~~ 반갑습니다 :)
안녕하세요~
어서오세요~ 이곳은 프론트엔드나 웹 개발에 대해서 궁금한게 있거나 함께 나눠보고 싶은 이야기가 있을때 함께 하고자 하는 공간입니다. 아는 내용은 서로 공유하며 함께 성장할 수 있도록 도와주세요 :) 잘 부탁드립니다!
네 잘 부탁드립니다 😀
컴퓨터 의자 집에서 사용할 용도로 추천 부탁드립니다 허먼밀러는 힘듭니다 ㅜㅠ
저는 시디즈 사용하고 있는데 꽤 괜찮습니다!
모델명은 어떤걸까요?
리엔님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
힙합맨 제이지님이 나갔습니다.
이거 사용하고 있어용!
감사합니다!! ㅎㅎㅎ
사진 2장
모니터암 사용하시는분들 어떤걸 추천하실까요? 32인치 삼성모니토입니다 !
여러분은 월요병 있으십니까
주말도 공부하는데요 뭐.. ㅎ
하루씩은 쉬세요 ㅋㅋㅋ..
저는 32인치라 카멜꺼 10마넌짜리 썼어용
휴학생님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 혹시 상태관리 라이브러리 어떤 거 자주 쓰시나요??
리코일이랑 리액트쿼리를 젤 마니쓰고있습니당
리덕스나 리덕스 툴킷 안쓰시는 이유가 있으신가요???
리코일이 리덕스보다 리액트스럽다고 생각해서요
Java 난이도를 10으로 봤을 때 js는 1~10 어느정도 일까요??
ㅎㅎ..
항상 상태관리 뭐 쓸지 고민되더라구요,,,ㅋㅋ
하나씩 써보고 비교하는게 가장 좋은거같아요... ㅋㅋㅋ
리코일도 한번 해봐야겠네요1
입문은 2~3 잘쓰려면 5~6 패러다임 전환하는데 9? JS는 언어 자체는 정말 쉽게 쓸 수 있도록 만든 것 같아요. ㅎ
역시 깊게하면 다 어렵군요 역시역시 참고하고 잘 배워볼게욧!
근데 깊게 해야할 경우가 별로 없는데다가 어렵다~~ 라는 생각은 안드실것 같아요. 허들이 막 높은 편은 아니라서요. ㅎ
타입에 있어서의 나이브함이 '잘 쓰고 싶다' 단계에서는 괴로운 요소인데, 처음 입문할 땐 알아야 할 것을 줄여준다는 점에서 진입장벽을 낮춰주는 것 같아요. 잘 쓰고 패러다임을 전환하는 단계는 아직 잘 모르겠지만.. 입문이 자바 보다는 훨 쉬운 게 맞는거같아요.
굉장히 민감한 주제가 될 수 있는 항목을 잘 풀어서 이야기 하시는 것 같아요 ㅎㅎ
예전에 이 방에서 타입스크립트 모임 주최하신 분 있었는데 어떻게 됐는지 궁금하네유
9월 일정으로 알고 있어요 따로 공지할거라고 하셨는데 한번 더 리마인드 해주시면 좋을 것 같아요 @인성(현파랑)
갑자기 끌어올려져서 놀랐읍니다,,
안창살러버님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 몽툥이님 반갑습니다 :)
많은 분들이 관심을 가지고 계신거 같아요 ㅎ
사진
반갑습니다 잘부탁드려요~~
현재 4주차 진행했고, 이번주 5주차입니다 ㅎㅎ
한 분 얼굴이 너무 적나라하게 드러나서 스티커 처리하구 다른 분들은 옆모습+마스크라 올렸습니다
아! 이미 한참 진행중이시군요 ㅋ
종료는 아마 추석 전이 될 것 같네용
당근모자인가요? ㅋㅋㅎㅎ
제주도 감귤모자입니당..🌱
아 ㅎㅎ 그렇군요
우와.. 이건 언제 모집했었나요 ㅠㅠ 왜못봤지.......ㅠㅠㅠ
저도 저거 함께하고 싶었는데
입사가 9월이라 아쉽지만 참여 못했었네요 ㅠ.ㅠ
이제 강남 출근이니… 저도 다음 스터디 한번 같이 참여해볼까 합니당
눈팅 꽤 열심히 하는데 놓쳤네요 ㅠㅠ.......
단톡방에 좋은 분들 많으니 여러분도 한 번 모집해보세용! 많은 기회를 얻을 수도…
추석 이후로… 프론트엔드 테스트 코드 쪽이나 함수형 프로그래밍 준비중이니 그때 같이 하실 분들은 또 지원해주세요😊
허브님 팬입니다
…..?
저도..!!
닉변하세요
감사합니다
!!!
윤뿔소님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 윤뿔소님 반갑습니다 :)
안녕하세요😄😄
어서오세요~ 이곳은 프론트엔드나 웹개발에 대해서 궁금한 것들을 물어보고 아는 것을 서로 공유하면서 함꼐 성장하고자 하는 곳입니다. ㅎ 편하게 글 남겨주세요 ㅎ
알겠습니다 잘부탁드리겠습니다 ㅎㅎ
와 세상에 본인 프린이 너무 뿌듯한 거 하나만 자랑해도 괜찮겠습니까 어제 리액트 강의 끝까지 완강했는데 (물론 프로젝트를 빨리 시작해보고 싶어서 예제는 대충 대충만 훑어본 상태입니다) 리액트에서 딱 한 가지 있었으면 했던 게 비동기처리를 위한 useAsyncReducer 같은 거였는데요 오늘 아침 곰곰히 생각해보니까 async generator를 사용한 커스텀 훅으로 구현이 가능할 법 해서 구현해봤는데 너무 잘 작동해요ㅠㅠ 내새끼 넘나 기특한 것ㅠㅠ https://codesandbox.io/s/use-async-reducer-0te9is 진짜 미니멀한 프로토타입입니다. 대단한 건 없구요, store.ts의 makeAsyncLoadAction에서 AsyncAction을 정의한 걸 볼 수 있구요 useAsyncDispatch에 커스텀훅이 있습니다 App.tsx에서 버튼 클릭하면 데이터를 받아오는 것을 보실 수 있습니다.
아 혹시 뭐 잘못된 부분 발견하셨으면 언제든지 말해주세용!
미리 감사드립니다!
허브님 팬이에요
공유하면 좋을 글이 있어 공유해봅니다 [ 당장 실천하지는 못하더라도 일단 '임시 저장'은 해둬야 하는 이유 ] https://careerly.co.kr/comments/65815?utm_campaign=user-share
그렇게 임시저장한 북마크가 이제 1만개가 넘어서 한번 날잡아서 정리하는 습관도 중요한 것 같아요.. 이젠 잊어버린 레시피도 많은 것 같아요 ㅎㅎ
저도 공유하면 좋은 글이 있어서 공유드려봅니다. 어제 문득 프레임워크별 각 스타일 문서 작성하는 중에 이미 누가 잘 작성한 사이트가 있어 공유드려요. https://component-party.dev/
와! 만개라니!! 놀랍네요 ㅎㅎ 저희방 질문들을 guest님이 툭툭 던져주시는 답변을 보아하나 다 짬바로 연결이 되었을거라고 생각합니다 ㅎㅎ
북마크로 저장하면 가끔씩 좋은 자료임에도 사라지는 경우도 많아서, 정말로 좋은글이면 아래 익스텐션 이용하여 HTML로 보관하는 것도 좋은 것 같아요. https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle
오호
Html로 저장해서 뭐할때써 이생각했었는데
저런꿀팁이..
제가 아시는 분들이 만드신 익스텐션도 유용해서 공유드려봅니다! https://chrome.google.com/webstore/detail/cookie-parking/gbpliecdabaekbhmncopnbkfpdippdnl 눈에 잘 띄는 카테고리별로 저장할 수 있고 내 디렉토리를 공유할 수도 있어 좋더라구요🤩👍🏻
미어캣이 너무 귀엽네요
좋은 콘텐츠를 파킹하는 미어캣이라고 합니다ㅎㅎㅋㅋ
이모티콘 디자인도 너무 깔끔하고 유용하게 쓰겠습니다!
저거 경쟁작 소개가 될 수 있긴한데... 셔플이라고 잘 만들었는데, 생각보다 사람이 없어서 아래 앱도 소개드려요.. https://chrome.google.com/webstore/detail/%EC%84%9C%ED%94%8C-%EB%A7%A4%EC%9D%BC-%EC%84%B1%EC%9E%A5%EC%9D%84-%EB%8F%84%EC%99%80%EC%A3%BC%EB%8A%94-%EC%8B%9C%EC%9E%91%ED%8E%98%EC%9D%B4%EC%A7%80-supp/lmndkckmpbalpaboffnegimjmabeeefo?hl=ko
사진
이모티콘
안녕하세요! 개발블로그 시작학려하는데
어떤 플랫폼 이용해야할까요!? 추천 부탁드립니다!
감사합니다!!!
단무지 아직도 싫어하세요?
성향에 따라 다를것 같은데 on-premise 환경 구축없이 바로바로 사용하고 싶으면 velog, notion, md 작성과 파일로 관리하고 싶으시면 Hugo, Hexo 같은게 좋은 것 같아요.
ㅜㅜ 정말 감사합니다!!
단무지좀 좋아해주세요
gatsby도 있어요!
ㅜㅜ
ㅋㅋ
사진
근성개발자 짤 공유드립니다..
GDDㅋㅋㅋㅋㅋㅋ
velog 태그목록 어떻게 바꾸는지 아시나요?ㅠ
글내용 최상단에 변경하는거있어요~
태그를 입력하세요 란에 태그를 적은 후 전체보기있는 목록에 추가하려면 어떻게 해야할까요?
얼굴마사지하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
바로안되고 저는 동기화가 좀 걸리더라구요 ㅠ
아, 그렇네요
로그아웃하고 하니까 생기네요 ㅜㅜ 감사합니다
캐시 지우는 새로고침후에
한번 시도해보세요
근데 서플은 서핏(https://www.surfit.io/) 따라 만든것 아닌가요? 예전에 페북에서 논란 한번 된적 있었던거 같던데..
헉
이건 처음 알았네요. 이야기 감사드립니다.
넵 서플 리뷰에 보면 카피캣이라고 다들 안좋게 생각하긴 하더라구요.. ㅜ
여기서 이야기되고있네요.
어 맞아요 이거 봤었어요..
유사해보이기는 하네요
https://medium.com/supple/%EC%A3%BC%EC%8B%9D%ED%9A%8C%EC%82%AC-%EC%84%9C%ED%94%8C%EC%9D%84-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4-5bf681646d6d 위 글 보고 괜찮다고 생각하였는데 해결하는 과정이 아쉽네요..
일란성쌍둥이네요
오잉
서핏보다 제가 불편하다고 느끼는 점들이 해결되있네요
갈아타야겠다... 죄송합니다. 서핏..
사진
테오님글이 1등이네요
코드 너무 잘 봤습니다~ 멋있어요!
우와....
코드 샌드박스 처음보는데 좋네용 코드 이동도 지원되네요
눈물바다에 빠진 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
맞아요~ replit도 괜찮아요. 저희방에서 코드 질문들 들어오는데 이런걸로 공유해주시면 훨씬 더 깊은 리뷰를 받을주시면 수가 있지요. ㅎ
안녕하세요
안녕하세요 피스메이커 프로도님 반갑습니다~
코드보다가 질문이 있는데 useAsyncDispatch에서 for await (const action of asyncAction(state)) { dispatch(action) } 이 부분은 for 반복문을 어떻게 돌리신건가요? for에 await가 붙어있는 형태는 처음 봤어요
반복문 내의 모든 비동기 작업을 기다리게끔 하는 방법 정도로 이해하시면 될 것 같습니다!
Promise.all이랑 비슷하게 여기실 수도 있지만, 순차적으로 하나씩 실행한다는 점이 차이라고 알고 있습니다
오 이건 저한테도 필요했던 내용이었습니다 정말감사합니다!
우와 신기하네요.. 덕분에 새로운 코드 형태 알아갑니다 링크도 감사해요!
둘다 찍먹해보고 replit으로 자리잡기로 했습니다. 추천 감사드려요!
커리어리는 다크모드가 없네요 ㅎㅎ
혹시 잘못된 정보를 전달드릴까봐 노파심이 많이 드네요 데모에서는 빼먹었지만 요청이 실패할 경우 그에 맞춰 적절한 상태로 도르마무하는 코드도 들어가야 할 것 같습니다 혹시 중간에 캔슬하는 기능 구현할 수 있으면 구현해보구 진짜 각잡고 만들어봐야겠어요
사진
저 선은 border인데 부모의 패딩때문에 끝까지 못가는데 border가 부모의 패딩을 이길수있는 방법이 있을까요?
구글링하면 width나 height로 하던데 border로 무시하는 방법이 잘 안나와서 질문드립니다..
백그라운드를 저 색으로 지정하고, margin bottom 값으로 주시는건 어떠신가요?!
margin을 마이너스로 하고
width를 calc로 해서 100%+패딩값×2
하시면됩니다
부모 padding: 24px 이라고 하면 자식 width: calc(100% + 24*2); margin: 24px 0 24px -24px;
이런 방법 말씀하신거죠??
margin-left를 -24px
margin 마이너스... 메모... 감사합니다!!
허브님 팬이에요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
어머나 영광입니다 🙇♂️
젠장 이거 퍼블리셔의 테크닉이었는데 하나 뺏겼네요
감사합니다 ㅜㅜ 잘되네요
모모링님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
그럼 허브님 팬클럽 가입하세요
어떻게 신청하죠!?
닉변하시면됩니다
허브님을 존경하세요
저번에 보니까 당황하시던데
오 어떤 강의를 들으셨너요
https://www.udemy.com/course/react-the-complete-guide-incl-redux/ 이거 들었습니다!!
혹시 유데미에 css강의 추천해주실 만한거 있을까여 Herb?
흠... 제가 css쪽을 제대로 들은 상황이 아니어서 추천드리기가 어렵네요ㅠㅠ HTML CSS JS 강의 사놓은거 하나 있는데 들어보고 나서 얘기드릴 수 있을 것 같아요 유데미 아니더라도 크게 상관 없으시면 마침 어제 CSS 강의 얘기가 나왔는데 잠시만요!
이 질문의 답변부터 보시면 될 것 같아요 (핑 죄송합니다ㅠㅠ)
초롱초롱 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
감사합니당!! ㅎㅎ
?-? 괜찮아요! 아까 코드 보다가 또 살짝 헷갈리는 부분 있어서 또 질문 드릴수도 있을것 같아요.. ㅎㅎ 좋은 코드 공유해주셔서 오히려 제가 더 감사합니다!
안녕하세요 초롱초롱한 네오님 반갑습니다 :)
css는 하다보면 늡니다
안녕하세요:D
어서오세요 :) 이곳은 프론트엔드나 웹개발에 대해 궁금한 것들을 물어보고 아는 것은 공유하면서 함께 성장하고자 하는 곳입니다. 함께 나누고 싶은 이야기 궁금한 것들이 있다면 언제든 편하게 글 남겨주세요 ㅎ
넵 감사합니다!!😊😊
벙찐 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 벙찐 튜브님 반갑습니다~
선배님들 취업 할때 css는 어느정도 수준이여야 취업 할 수 있는건가요??
배열 마지막만 css바꾸는 방법이 있을까요 ? 리액트인데
디자이너 주는 디자인을 화면으로 만들 수 있는 정도..? 이것도 근데 취업하시는 회사에 따라 좀 많이 다를것 같아요
어떤건지 더 상세하게 말씀해주실 수 있을까요
스타일드 컴포넌트라면 props로 플래그 처리하여 가능하고
인라인 스타일을 사용하면 불린값에 의하여 인라인스타일 처리 가능합니다
:last-of-type 이나 :last-child 선택자로 지정해서 css 설정해주시거나 코드 상에서 마지막에만 class나 props로 스타일 잡아주시면 될 것 같아요
isEndField = index === array.length - 1
사진
이걸 :after로 화살표를
넣었는데 동그라미친 마지막은 없애고 싶어서요 ㅠㅠ
last-of-type하면 다같이 사라지네요
https://www.geeksforgeeks.org/css-notlast-childafter-selector/ 여길 참고하여 해보시면 어떨까요
:not(:last-child):after 검색 키워드는 위입니다.
function Item2({ item2 }) { return ( <div className={styles.items2}> <div className={styles.item2__box}> <span>{item2.title}</span> <img src={item2.src} alt="" /> <strong>{item2.text}</strong> <p>{item2.p}</p> </div> </div> ) }
.item2__box:after { position: absolute; content: ''; width: 28px; height: 21px; top: 50%; right: -24px; margin-top: -10px; background: url(/public/images/arrow_1.png) no-repeat; z-index: 1; }
이렇게 줘서
last-child는
안먹히나봐요
.item2__box:last-child:after{ background:none; }
이런식으로 주면 안되나요??
네 ㅜㅜ 그러면
다같이 사라지네요
하나로 인식해서 first-child last-child가 같나봐요..
부모클래스:last-child .item2__box:after{ background:none; } 이렇게 해도 안되려나요
그래도 다같이 사라지네요
저 혹시
증권 서비스 계발자 비전 있나요?
제가 서비스 계발자라서 여쭤봅니다
현직....
재미없어서 탈출했는데 비전은 좋은 것 같습니다
.items2 .item2__box:last-child:after {display:none}
똑같이 사라집니다 ㅠㅠ
샌드박스 같은걸로 볼수있을까요?
https://codepen.io/ 같은 곳에 올리시면 다른 분들이 보기 편하실 것 같아요 ㅎㅎ
저는 코딩하는 사람은 아닌거 같다가
정론입니다
공유 안되시면 last index item 에 클래스라도 넣어서 after 아이콘을 숨겨보심이. HTML <div class="item2__box last-item"> CSS item2__box.last-item:after{display:none}
.items2 .item2__box:not(:last-child):after { position: absolute; content: ''; width: 28px; height: 21px; top: 50%; right: -24px; margin-top: -10px; background: url(/public/images/arrow_1.png) no-repeat; z-index: 1; }
이거라도 한번해보세요 ㅠㅠ
.items2 > div:last-child:after { display:none; }
이것두요
이게 맞는걸로 알고있는데
부트캠프 지원하기 위해서 자바스크립트 문법 공부하려는데 이 강의 혹시 괜찮을까요 .. ?? https://school.programmers.co.kr/learn/courses/10
제가 샌드박스를 안써봐서 넣고있는데
이미지 적용이안되네요
어떻게
공유해야하나요 일반으로뜨네요
강의가 그렇게 길지는 않은것같은데
우선 들어보시는것 나쁘지않아보여요 물론 해당강의 들었다고 js를 어느정도 안다는건 현실적으로 어려울것같습니다
네네 맞아요 그런데 부트캠프 지원까지 얼마안남아서 괜찮은 강의를 듣고싶어서요 ..!
그렇군요 감사합니다 !
부트캠프에서 지원자격을 제시하고있는게 어떤지에 따라 답변이 달라질것같네여
코테 자바스크립트 2단계입니다 !
{items2.map((item2, index) => ( <Item2 item2={item2} key={index} /> ))} 아니면 after로 그리시지말구 요기에 div안에 기존에있던 ITem2랑 화살표를 그려주시는데 화살표에 조건을 다셔서 마지막 index라면 그려지지 않도록 하시는건 어떨까요 ???
우선 코딩을 처음 접하신걸까요?
무난하게 그 문제를 풀 수 있을정도 되어야한다하더라구요
네네 ..현재는 생활코딩 유튜브로 web2 자바스크립트 + 프로그래머스 헬로월드 수업까지 들은상태입니다
아이패드나 아이폰 브라우저에서 발생하는 자바스크립트 에러 메세지는 꼭 mac 통해서 xcode 개발환경 연결해야지만 볼 수 있나요..? 따로 뭐 윈도우에서 볼 수 있거나 어떤 서비스에서 볼 수 있게 지원해주는게 혹시 있을까요..?
그렇게도 해봤는데 화살표가 상자안에 갇히더라고요 뺄 수 있을까요?
browserstack, saucelabs 같은 서비스들이 있습니다.
사진
browserstack같은 경우는 대학생 student packs 통해 1년 무료 제공하고 있기 때문에 학생 계정이 있으시다면 추천드려요.
혹시 Vue에서 카카오톡 대화창에 URL로 공유할때 뜨는 썸네일을 페이지별로 다르게 할 수 있나요?? 이미지 데이터는 서버로 부터 받아옵니다. 지금까지 vue-meta 패키지 사용해봤는데 실패했습니다. nuxt말고 순수 vue로 방법이 있을까요???
감사합니다!
og tag 로 검색하시면 될거에요.
사진
아 정확하게는 페이지별로 다르게군요.
아 답장 주셔서 감사합니다. 혹시 og tag의 데이터를 서버에서 받아서 동적으로 바꿀수있나요?
잠시만요. 그렇게 작업했던 적이 있었는데 가능한가 볼게요.
여기 참고해보시겠어요?
pwa 사이트 만들때 그렇게 작업했던 것 같아요
오 감사합니다 !
<div> <Item2 item2={item2} key={index} /> <Arrow></Arrow> </div> arrow는 제가 임의로 화살표라고 생성한거구여 부보 div에 relative주시고 arrow아이를 absolute로 right값을 조정하시면 밖으로 뺼수 있을거에용
안녕하세요? 첫 질문인데요.. 넘 떨리네용 부트캠프 시작 전에 개인 공부 중인데, 코테 공부하다가 이렇게 기본 없이 해선 아무 것도 안되겠다 해서 알고리즘 공부 중에 있습니다 지금 기본 정렬 이후 퀵 정렬, 병합 정렬 등 강의를 듣는 중인데 강의 듣기 전에는 sort()로 그냥 정렬시켜버렸는데 퀵, 병합 등등은 이해는 되는데 코드로 치기가 굉장히 어렵더라고요 가독성도 낮고.. 궁금한 점은 이런 알고리즘(퀵, 병합, 버블) 등등을 실무에서도 적용을 하나요? 한다면 어떻게 접근을 하는게 좋을까요?
실무를 하기위한 코테에서 주로 쓰이고..
실제 개발하게되면 그렇게까지는 활용안하는데 주로 장바구니, 검색 키워드 이런데 가끔 쓰여용
object를 다루는 일이 많슴당
웬만하면 sort 메소드를 쓰는 것 같아요 특히 프론트엔드에서는..
좋은게 좋은거니 그냥 받아들이시능건 어덜까용~?
너무 무책임하지만...!
실용적일까란 의문을 가지면 공부가 너무 저는 어렵더라구요 ㅜ.ㅜ
sort가 왠만한 정렬 알고리즘보다 빠릅니다 간혹 내장 sort 메소드를 사용하지 말고 정렬을 구현하라는 문제가 나오기도 하는데 정말 소수라서 ..
다들 답변 감사합니다..! 공부하면서 허브님 말씀대로 실용적일까? 생각이 떠나질 않는데ㅋㅋㅋㅋ..완주해보겠습니다!
혹시 어떤 강의듣는지 여쭤봐도 될까요 ?
여러분 답변해주셔서 감사합니다!
저 유데미에서 javascript 알고리즘 & 자료구조 마스터클래스 << 이거 듣는데용 12,000원이라 가격도 부담 안되서 듣고 있네요!
알려주셔서 감사합니다!
요즘은 유데미가 가장 핫하군요..!
아무래도 싸서 ㅋㅋ...자막도 잘되있어요 생각보다!
해외 강의들이 세세하게 알려주긴 하는거같아요 a부터 z까지 오목조목
혹시 구조를 바꾸면 안되나요 ??
ul li로 안해서
그런거같은데
바꾸고싶은데 렌더링을 써야하나요?
저도 리액트를 몰라서 ㅠㅠ
사진
필요없어서 주석처리했고
사진
감싸는 부모태그 추가해주면 css 적용되긴해요 ㅠㅠ
ul li를 주고
.title>ul>li:last-child .item2__box::after { background: none; }
이렇게하니까 사라졌네요
근데 리액트 구조는 제가 몰라서 일반 html로 이해하고 수정했습니다
다들 관심가져주셔서 감사합니다 !!!! 해결됐어요
이모티콘
해결하니까 console에 key값 오류가 뜨네요
키값은 인덱스로 하시면 안되긴 합니다
어렵네요 ㅠㅠ
item2 안에 고유값으로 설정한 무언가가 있다면 그걸 key 값으로 해주시면 될 것 같습니다
서버측 상태와 매칭이된다면 id값을 넣어주는게 가장 이상적일거에요
id로 바꿨는데 li로 감싸서
생기는 오류같아요
<ul> {items2.map( (item2, id) => ( <li><Item2 item2={item2} key={id} /></li> ))} </ul>
음 그 배열의 인덱스를 뜻하는 id 가 아닌 고유한 id인게 좋다는 말씀인것같아요
그리고
map으로 감싼거라면 map내부 컴포넌트중 최상위 노드에 key가 있어야해요
리액트 문서를 조금 더 읽어보시고 진행하시는 쪽을 추천드립니다
사진
사실 이것도 안좋은 거긴행
해요!
그렇군요 ! 감사합니당
이제 저기서 itmes2의 index를 뜻하는 id 변수를 다른 것으로 대체하는 것이 최선이죠!
사진
고유한 id가 없을때에는 이렇게 고유한 문자열과 조합해서 사용할 수 도 있어요
삭제된 메시지입니다.
간단한 예로는 item2 안에 고유한 id가 있다면 key={item2.id} 로 하시면 될 것 같습니다.
이렇게하니까 사라지네요 감사합니다!
udemy 12000원 할인 이벤트였군요. 감사합니다
할인 자주해요! ㅋㅋ
제가 볼 땐 항상 정가였는데 혹시 12000원 이하로 할인 할 때도 있나요? ㅋㅋ
진짜 심심하면 할인해요~! 장바구니에 넣어두시고 꼭 할인할때 사세요! 커피값
만이천원 이하는 저도 못본거같아요 궁금하네요
12000원 아래는 못본거 같아요!
아 그럼 오늘 구매각이네요. 감사합니다.
12000원이면 거의 역대최대할인인거같아요 ㅎㅎ 보통 14000~16000원 할인을 많이 해용
아마 최대할인했을때 가격이
12000원일거에요
그아래로는 본적이없는..
저도 갑자기 쇼핑뽐뿌오네요 둘러봐야겠다 흐흐
저 react도 들으려구요 ㅋㅋ
헤헤 다들 완강 화이팅…!!
이모티콘
이건가요?
가격이 올라가있는건 저만 보이나요?하핫..
헐!!! 그새 올랐네
어 저는 2일동안 더 12,000원이라는데 오르셨나요 들..!?
얘는 만육천원으로보이네요
어라 저는 12000으로 나오는데
사진
크롬으로 들어가니까
12000으로 보이네용
ㅠㅠ
한글자막 아닌게 16000원이긴 하네요
이모티콘
콜튼센세
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ko-KR.md 가 유명하긴 해서, 부족한 부분만 따라해보는 것도 방법인 것 같아요.
이모티콘
그런데 저의 경우는 실무에서 필요한 경우만 알고리즘 그때그때 학습하여 작업 진행해서 넓게 보는게 좋은 것 같아요. 예를 들어, CI/CD 그래프 구현을 할때 argo workflow 혹은 airflow 같이 dag algorithms을 공부한다거나 그랬던 것 같아요.
프론트엔드 개발자가 알고리즘 공부할때 좋은게 시각화해서 바로 보여줄 수 있는게 접근성이 괜찮더라고요.
algorithm-visualizer https://algorithm-visualizer.org/divide-and-conquer/bucket-sort
유틸 관련으로는 어떻게 VanilaJS로 구현할 수있을까 고민이 되는 경우는 아래 사이트 참고하시면 좋을 것 같아요. https://decipher.dev/30-seconds-of-typescript/docs/
lodash-es 내부 코드를 보는 것도 좋긴한데 위 사이트가 한눈에 보기는 좋더라고요.
Data Structures 쪽은 아래 보면서 많이 공부했었어요. https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
프론트개발자가 재밌는게 학부생 시절 알고리즘 수업에 남들이 전부 C로 낼때 HTML로 낸적이 있어서 시각화해서 보여줬던게 재밌던 것 같아요.
시각화가 진짜 좋은거같아요
아는분 백엔드 준비하시는데
추상적이라 스트레스 받는다고 하시던데..
ㅇ
react-native에서 intersection observer 같은 기능 알고 계신분 있으신가요?
여러분 다양한이라는 단어를 떠올리면 뭐가 떠오르시나요??
여러가지 가지각색?
다형성이요
저는 패턴이 떠올라요 ㅎㅎ
무지개
어떤 기능이 사용하시려는건가요?
어떤 기능에
전 구슬 주머니가 생각나요 ㅋㅋ
컴포넌트가 화면에 노출되는 시점을 알고 싶어서요
onLayout을 이용하면 mount 될 경우에 알아차릴 수 있어요
감사합니다 참고해서 구현해볼게요!
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ그럼 관점이라는 단어를 들으면 뭐가 생각납니까!!
다양한 사람들이 이야기하는게 떠올라요
안경같은거 낀 사람이 생각나네여 왠지 말풍선도 같이있어야할거같고
인종이 생각나네요
저는 무지개
다양한? 성격?
성향이요~
저는 알록달록하게 모여있는 동그란 사탕들이 생각나네요!
다양한 성격 다양한 사람 다양한 mbti 이런게 생각나네요 ㅎㅎ
그럼 관점이라는 단어를 들으시면 표면적으로 뭐가 떠오르시나요??!!!
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
장님들이 코끼리를 만지는 모습이요!
색안경이 떠오르네요 ㅎㅎ
각도의 중요성이요
국비 웹디퍼블 그만둔거 제가 성급했었나봐요..ㅠㅠ 독학보다 교육 시스템이 필요한데 다른과정 다시 시작하려면 기간이 어마어마하네요ㅠㅜ
뭐든 시작할때나 그만둘때나 신중함이 필요한 법이죠
퍼블끝내고 프론트과목 단과로 듣거나 인강들으며 할수 있었는데 생각이 짧았네요
그땐 나이가 있어 빨리 프로그램언어 배우고 올해안에 취업이라고 생각했었는데 그러기에 양이 많고 다져야할 기본기들이 있는데. 그만둔 국비과정은 다시 이어서 못 듣겠지요..?
국비를 중간에 그만두셨다는건가요
초롱초롱 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
네 수업보다 강사와 트러블이 있었어요
저라면 지금부터라도 프론트공부를
시작하면 좋을것같습니다
상담을 받아보셔야 할 것 같은데 그게 그만 둘 때는 아마 다시 다른 걸 신청하실 때의 제한사항이 생기셨을거에요
지나간 후회는 의미없다고 생각해요
앞으로가 중요해용
원장샘이 중간에서 사연 들으시고 제한사항 풀리게 해주셨어요 고용부에 말하고 환불도 받고.
국민취업지원제도를 이용하신건 아닌가보네요 내일배움카드만 발급받아서 들으신거 같은데 그렇다면 내일배움카드 쪽에 문의를 남겨보시면 될 것 같습니다
프론트 기본기 혼자 하고 있는데 저는 아무래도 교육 시스템에서 먼저 훑고 독학이 맞는 스타일이었나봐요. 프론트만 있는 국비 수업은 없고 무료 부캠 프론트는 두개 있는데 경쟁율이 어마어마..
인강은어떠신가요
다수 이어서 들을수 있는지요? 저 내일배움 국취제 둘다 하고 있어요
유튜브고 찾아보면서 하는데 저는 공간에서 시간정해서 배우는 오프라인이 맞는 스타일같아요ㅜ
이어서 듣는건 불가능하다고 알고 있지만 이것 또한 국취제에 문의를 해보시거나 또는 학원 원장님께 여쭤보시는게 좋을 것 같습니다
학원에서 강사와 트러블로 조금 갑작스럽고 깔끔하지 못하게 마무리를 해서 다시 학원에 연락을 하기가 좀 주저가 되네요..
사진 2장
선배님들 다양한/계기/관점/ 이렇게 키워드가 나와서 컨셉을 도출하는데 도무지 잘 떠오르지가 않아서 선배님들 생각을 한 번 들어봐도 될까요! 생각나시는 컨셉 한 번만 부탁드립니다!
상담사님이 배정이 되어서 들으셨을테니 이어서 듣는게 가능한지 여부가 중요하다면 상담사님한테 연락해서 물어봐도 좋을 것 같구요
사실 제일 정확하게 정보를 얻는방법은 해당학원에 문의해보는게 빠르고 정확하지않을까요..?
주저되는건 공감해용
국취제 상담사요? 저는 학원 수업신청하고 국취제 배정받았고, 접입된 지역이랑 지금 지내는 집이 달라서 센터를 지역이동 이관 신청을 했었어요~
만약에 이어서 수강이 어렵다면 개발스터디를 모집해보시는것도 좋은방법이 될것같아요
첫번째 국취제 상담사가 빨리 학원 바꿔라 거기서 취업 못한다.. 부캠가라 시간아깝다 그런 얘기를 해서 너무 혼란스러웠었기도 했어요
국취제든 부캠이든 하기 나름이라 생각합니다만 개인적인 생각으로 부캠은 기초가 있어야 듣기에 수월하다고 생각합니다
결국 국취제 상담사님이 정해지셨다면 이어듣는 건 그 상담사님한테 묻는게 가장 정확할 것 같아요
네 국비 끝내고 인강하면서 부캠준비해볼껄 싶어요.. 국취제 상담사한테 내일 물어봐야겠어요
원하시는 결과 얻기를 바라겠습니닷 화이팅
지금은 html css 복습하고 js 혼자 독학하는데 갈피를 못잡도 있는거 같아요.. 교육이나 시스템이 필요한가봐요 저는
감사합니다 문의해보고 또 더 찾아볼게요
초롱초롱 어피치님이 나갔습니다.
독학하는법도 유튜브에 많이 나와있으니 참고하세요~~
헉 진짜 이방 너무 좋은 것 같아요 ㅜㅜ
저번에 컨닝페이퍼 만들 듯이 메모하라고 하셨었는데 바로바로 블로그에 작성하니깐 너무 좋네요!!
저도 블로그 써야할거 잔뜩 리스트업해놨는데,,,
주말 너무 바빠서 못썼네요
목요일에 시간내서 작성해야겠어요 ㅋㅋㅋ
모아둔거 하나씩 꺼내서 쓰는 재미죠 ㅋㅋ
조급해하지말고 하나하나씩 하면 취업 되겠죠..?!
네
당연하죠
감사합니다!!
취업은 어렵지 않아요 얼마나 가고 싶은 회사에 갈 수 있는지가 중요하죠..
감사합니다!!
혹시 router.query.[pathName]이 string[] 일때도있고 string 일때도있는데 차이가 무엇인가요?
Path의 depth에 따라 여러개가 되는 것 아닐까요?
둘다 Router.push('~~/[pathname]') 하나씩만줬는데
하나는 router.query를 콘솔로 찍어보면 townName: ~~ 로 나오는데 하나는 id : array(1) 로 나오네요
url 을 같이주실수 있을까용?
넵~ 잠시만요
사진
하나는 이거구요!
사진
하나는 이거에요
아헐 찾았어요
고민 더 하다보니 제가 페이지 라우팅을 [...id]로 걸어놧었네요 ^^ 습관처럼... 에휴
눈물바다에 빠진 라이언님이 나갔습니다.
찾으셨다니 다행입니다!
건배하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 건배하는 프로도님 반갑습니다 :)
안녕하세요 잘 부탁드립ㄴ다~
네 어서오세요 :) 이곳은 프론트엔드나 웹개발에 대해 궁금한 것들을 물어보고 아는 것은 서로 공유하면서 함께 성장하고자 하는 곳입니다~ 편하게 글 남겨주세요 ;)
안녕하세요 :) 제가 최근 이력서를 수정했는데 신입 이력서 피드백 해주실 멋진 분이 계신가요?
스윽(✋🏻)
링크는 공개해도 될 것 같아서 여기 올리겠습니다~! https://hyeoke.github.io/resume/
"반갑습니다 저는 정준혁입니다." 아래의 설명 가독성이 좋아졌으면 좋겠습니다. 처음 보는 입장에서 한눈에 들어오지 않아서요. 문장별로 개행을 두거나, 중요 키워드에 색이나 밑줄을 활용하면 좋을거같아요.
제 개인적인 의견인데 맨 위의 파란줄이 없는게 더 나을거같기도 합니다
일단 모바일페이지의 가독성도 높일 필요가 있을거 같아요. 프론트엔드 개발이니.....^^
가독성 문제가 있군요..감사합니다!
글씨가 짤려요
대제목 크기를 약간만 줄여도 좋을듯요
엇 수정하겠습니다
대제목 마지막에 파란 점이 있는데 요곳도 약간 저기에 신경이 가게 되네요
동감하고 상단 가로 스크롤이어도 좋을 것 같네요!
대제목, 중제목 글씨를 약간만 줄여도 괜찮을거같아요. 일반 설명 텍스트랑 차이가 너무 나요
그리고... 어차피 공개된 프로젝트들이라면.. 간단히 이미지를 같이 이쁘게 넣어도 되지 않을까 싶어요 너무 글씨만 있어서
오,, 넵넵
열심히 수정해보겠습니다
https://hyunseob.github.io/resume/ 이거 참고하신 것 같은데 넘 똑같이 하신것 같기도.....
아 현섭님 이력서 맞습니다 MIT 라이센스 해두셔서 레포에 출처밝히고 사용하고 있어요
같은 스타일이지만 너무 차이나네여..
경력 기술서처럼 쓰긴 아쉬운 것 같아요
으음 그렇군요,,ㅜㅜ
이력서 포맷은 비슷비슷해도 괜찮지 않나요??
해당문구는 개인적으로 빼면 더 좋을 것 것 같습니다. 다른 소개에서 충분히 열정적이고 커뮤니케이션을 잘하고 중요하게 생각한다는게 느껴져서요 ㅎㅎ 저 문장까지 있으니까 조금 과해보여요
사진
아하~ 피드백 감사합니다
사진
아직 요기가 짤려요
헐 감사합니다
좋은 피드백 감사합니다 여러분 ㅜㅜ 피드백 주신 것들 바탕으로 더 수정해볼게요,,!
윤생님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 윤생님 반갑습니다 어서오세요 :)
안녕하세요
환영합니다. 이곳은 프론트엔드나 웹 개발에 대해서 궁금하거나 함께 해보고 싶은 이야기를 나누고 아는 것을 공유하면서 함께 성장하고자 하는 곳입니다. 편하게 글 남겨주세요~~ 잘 부탁드립니다
안녕하세요. 혹시 서류 넣고 '채용 프로세스 진행 전 개인 정보 수집 및 이용 조항'을 우선 요구하는 회사들이 있는데, 이게 서류 합격의 사인인지 아니면 일단 인사 정보를 수집하는 건지 혹시 아시는 분 계실까요?
질문드립니다 선배님들! components의 파일명들 보통 대문자로 짓는거 같아서 소문자를 대문자로 바꿨는데 import할 때 에러가 나더라구요 혹시 아시는분 계실까요??
사진
이런식입니다
에러내용이 뭔가요
파일명은 navbar -> Navbar // footer -> Footer로 바꿨는데 import할때는 그대로 소문자로 적어야 하더라고요
껏다켜보세용
사진
Vscode 자체를여
아..
되네요!
네 저거 바로 인식을 해주지않더라구요
아 그냥 인식문제였군요.. 감사합니다 ㅎㅎ
yarn build 시에 warning ../../package.json: No license field 이 경고 뜨는거 해결방법도 부탁드려도 될까요?? 구글링해서 해보라는거 해봤는데 잘 안되더라구요
추후에 운영체제별 대소문자 구분을 어떻게 처리하는지 까지 알면 좋을 것 같아요. 서로 처리방식이 다릅지다.
Json 파일 지우고 Yarn install 다시 해보셨어요?
아 그렇군요 따로 알아보겠습니다 ㅎㅎ
이것도 해봤는데 install이 잘 안됐었던 같습니다 다시 한번 시도해보겠습니다.
컴터가 먹통이 되서 껏다 키는중입니다 하하 ㅠ
선배님들중에 혹시 인텔 맥북에어 깡통에서 m1맥북에어 깡통으로 넘어가신분 계실까요?? 인텔 깡통인데 죽을맛이네요 ㅠㅠ
M1은 신세곕니다…
혹시 여기서 스터디 인원 구해도 되나요?
그럼요!!
M1 에어 괜찮아요? M2 에어랑 고민중이긴한데
겨울에 한창 개발하다가 무릎에 올려도 차갑습니다
감사합니다 :)
그렇다고 버벅거리는것도 아니고..
인텔리는 쓰지도 못하고 이제는 vscode도 못쓸정도네요 ㅠㅠ
물론 m2가 더 좋아요
가격 차이에 비해 성능 메리트가 없어보여서 전 m1이 더 좋은 것 같습니다
package.json 지우다가 뻑나서 껏다켰네요
오호 감사합니다
https://yarnpkg.com/configuration/manifest#license 말그대로 라이선스를 필드를 채우면 될 것 같아요 ㅎㅎ
전 2013 Late 맥북프로 레티나 현역으로 쓰고 있.....습니다. 그리고 추석전후로 도착하도록 M1 MAX 주문했어요!
근데 m2가 이쁘긴해요
가성비와 가심비
잘 타협하시면은..ㅎㅎ
스프링부트2개, Postgresql, Redis, React 동시에 돌리는데 힘겹게 돌아갑니당
fe 면접 스터디 인원 구합니다! 자세한 내용은 아래 노션에 작성해두었습니다. https://truth-princess-379.notion.site/3d042b4d7c7743c09ed8593b5428c35b 참여를 원하시거나 궁금한 내용이 있으면 아래 오픈채팅 1:1 대화 걸어주시면 감사하겠습니다! https://open.kakao.com/o/sZziUxye
private: true license: MIT 추가를 해도 뜹니다
뭔가 프로젝트가 꼬인것 같습니다. package.json 지우고 yarn install 실행하니 npm이랑 yarn이랑 같이 쓸수 없는게 문제인지 package-lock.json지우라고 하는거 같습니다.
npm에서 yarn으로 넘어갈때 지웠었거든요
질문이 있습니다. 예를 들어 prop = 1 function app( prop: number ) { const array = ["a", "b", "c"] return <div>{ array[prop] }</div> } 가 있을 때, array[number]를 쓰면, array[1]인 "b"가 출력되길 바라는데,
❯ yarn install yarn install v1.22.19 warning package.json: No license field warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. warning No license field
사진
실제로 type error cannot read properties of undefined 를 내 뿜는데, 어떻게 하면 가져올 수 있을까요?
prop에 default 값을 줘보시죠
Lock json도 지우고 하신거에요??
시그니쳐 인덱스 검색해보세욘
lockjson도 지우고 해봤습니다!
디폴트를 줘도 같은 결과가 나오네요 ㅠㅠ
검색해보겠습니다!
코드를 올려주시면 확실하지 않을까 싶어요
아 혹시 node 버전 아세요?
Nvm으로 버전 낮춰보세요
v16.15.1입니다
Yarn이랑 버전 맞나요?
yarn version 은 1.22.19인데
그것도 맞춰야 하는것이었나요??
도움 주셔서 감사합니다! 그런데 제가 실제로 가져오려는, 예시에서 array에 해당하는 것이 React hook form에서 errors의 값인데, 그럼 rhf의 type 파일에서 직접 수정해야 해결할 수 있는것이겠죠?
코드가 조금 복잡해서.. 좀 정리해서 올려보겠습니다..ㅠㅠ
Npm은 공식으로 권장되는 버전이 있긴한데
Yarn은 모르겠네요
혹시 몰라서 json파일은 바탕화면에 빼놓고 있어서 다시 돌려놓고 yarn install 하니까 인스톨은 되는데요 여전히 no license field라고 뜨네요
Github 쓰시면 이전버전으로 돌리셔서 다시 빌드해보세요
사실 전부터 계속 떠왔었습니다
?? 혹시 함수를 이렇게 작성하신다면 사용하실 때는 { app(1) } 이렇게 쓰시는 건가용?? 쓰는 곳까지 같이 코드를 보여주시면 상황 파악이 더 쉽지 않을까 조심스레 생각해봅니다!!
warning이라서 그냥 개발 해왔구요 하하..
아 동작은 되는거에요?
Npm이랑 yarn이랑 꼬여서 그런 것 같긴한데
네넵 그냥 build할때마다 warning뜨니까 거슬려서 해결해보다가 잘 안되서 질문드렸습니다. 개발에는 지장 없는거 같습니다
const {register, formState:{errors} } =useForm(); function ItemCard({ itemId, errors, register } ) { return ( <input type="text" {…register(`items.${itemId}.answer`, {required: true}) }> {errors.items[itemId].answer && <span>필수 입력 값 입니다.</span>} )}
일단 그냥 개발에 더 집중해야겠습니다 ㅎㅎ 도움주셔서 감사합니다 (_ _)
파일 두개에 걸쳐서 props를 전달하다보니, 코드를 공유가 좀 어렵네요…
Js에서 초성과 문자열 비교하는법 아시는분이 혹시
계실까요...?
혹시 원래 npm 쓰시다가 yarn으로 옮기는 상황이신데 npm을 쓰는 스크립트들을 yarn으로 안 옮기신 상황인가요??
한 번 찍어보았습니다
어… 이해가 잘 되지 않습니다 npm쓰는 스크립트라는게 어떤게 있을까요??
package.json에 들어가시면 "scripts" 항목이 있는데
넵
거기서 npm을 사용하는 항목들이 있어서 그런게 아닐까 하닐까 혹시나 해서 확인차 질문드렸습니다
사진
요게 다입니다 이중에 혹시 있나요??
제가 아직 초보라 이런거 까지는 봐도 잘 몰라서요 ㅎㅎ..
사실 이제부터는 저도 잘 모르겠네요 ㅜㅠ 혹시 찾아서 뭐 나오면 또 업뎃드리겠습니다!!
ㅎㅎ 감사합니다
이모티콘
"../../package.json" 이것만 보면 상위 디렉토리에 package.json이 추가가 된 것으로 보이는데 상위 디렉토리 있는지 확인 가능할까요?
사진
https://github.com/yarnpkg/yarn/issues/3821 이슈가 무지님이 처한 상황과 유사해보이네요.
이게 상단 폴더입니다!
아
읽어보겠습니다!!
~/package.json 이 있는지 확인 필요해보이네요.
폴더구조는.. /github/blog/package.json 입니다. github폴더에는 package.json이 없고 blog에만 있습니다
👍🏻
ls -al ~ | grep package.json 혹은 ls -al ~ | grep yarn.lock 명령어 통해 파일 있는지 확인 가능할까요?
그.. 각 폴더에서 다 해보면 될까요??
경로가 ~ 로 고정되어있어서 한번만 치셔도 될거에요.
❯ ls -al ~ |grep package.json -rw-r—r— 1 ssl staff 39 8 23 23:18 package.json
이렇게 뜹니다
네. 위 package.json 사용 안하시면 제거하시면 될거 같아요.
아…!!
감사합니다!!!!!!! 정말 아주 깔끔한 build가 되었습니다 ㅎㅎ!!!!!!!
이모티콘
잘 해결되서 다행이네요.
../../ 여기서 루트폴더까지 갈 생각을 못했습니다
당연히 전 폴더까지만 보면 되겠거니 했었습니다 감사합니다 ㅎㅎ
useForm 커스텀 훅이 컴포넌트 바깥에 있는데 Rules of Hooks랑 어긋나지...않나요? 아닌가? 헷갈려요! errors를 react hook form에서 읽어보기만 한 거라 틀릴 수도 있는데, errors[`items.${itemId}.answer`] 와 같이 register에 넘겨주신 문자열 그대로 쓰시면 될 것 같애요
useform을 아이템카드 컴포넌트 안에서 사용하셔야 할 거 같습니다. (저대로 사용하셨다면?..)
안녕하세요! 다름이 아니라 vsc에서 코드 수정 후 저장하면 실행화면에서 아무것도 클릭이 안되는 이슈가 발생하는데 이것을 해결해보신 분이 있으신가요?? 크롬 새로고침 후에는 요소 선택이 가능합니다.
삭제된 메시지입니다.
CV/3/8500님이 나갔습니다.
삭제된 메시지입니다.
삭제된 메시지입니다.
https://doqtqu.tistory.com/m/341 저도 비슷한 이슈를 겪었는데 이를 통해 해결했었습니다.
저는 후자 방법으로 해결했어요. 참고로 iframe이 생기면서 클릭이 막히는 것이라거 iframe의 포인트 이벤트를 없애 보셔도 클릭 등으 정상적으로 되기는 할거에요!
제이슨님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 저희 스프린트 11기 결과물을 공유합니다!! 1조 하루 영수증 - Daily Receipt는 당신의 시간을 정산해드리는 애플리케이션입니다. https://www.daily-receipt.com/ github 먼저보기 https://github.com/EasyAndBeauty/DailyReceipt-FE-WEB
2조 링쿠니 - 내 모든 URI을 담는 바구니 - [Linkuni]는 나중에 다시 보고싶은 링크들을 한 곳에 모아 정리하고 쉽게 찾아보기 위한 서비스입니다. https://kunis-teo.github.io/Linkuni/ github 읽어보기: https://github.com/Kunis-Teo/Linkuni
3조 구딩 - 내 구독관리의 시작, 이제는 구딩에서! https://gooding.vercel.app/ github 읽어보기: https://github.com/Princess-Teo-And-The-Seven-Frontend/gooding
구딩 짱!! 구딩 짱!!!!
구딩 서비스 너무좋다~~!!!!!
도움 주셔서 감사합니다. 말씀하신대로 백틱으로 묶어서도 해봤는데, 렌더링 과정에서 같은 에러가 발생하네요! 인터페이스를 조금 수정하는 방향으로 잡았습니다. 감사합니다 ㅎㅎ
해결되셨다니 너무 다행이에요!!
혹시 툴킷에 리액트쿼리 많이쓰나요?
4조 FLIP - 플래시 카드를 이용하여 학습을 도와주는 서비스 https://leeseongbok1214.github.io/flashcard/ github 읽어보기 https://github.com/code-flash-card/code-flash-card
구딩 서비스 방금 써봤는데 짱짱!!! 너무 좋아요~!~!~! 으아아아앗!!!!!!
ㅋ ㅑ 다들 고생많았습니다
우와 다들 최고 ㅎㅎ
3일만의 저정도 결과물이라니 다들 잘하시네요 ㅎㅎ
안녕하세요 늦은 밤 질문드립니다 저렇게 ?가 쓰이는 경우를 처음 봤는데 삼항연산자랑 비슷한건가요?
사진
옵셔널 체이닝이라구 값이 undefined 경우에 undefined를 리턴해줍니다
아하 감사합니다ㅠㅠ 실무는 리액트로 하는데 자바스크립트 공부 열심히 해야겠네요...
쿼리문 관련해서 질문이 있습니다 ! 게시물에서 댓글의 갯수를 2개 까지만 조회 하기위에서 이미지와 같이 쿼리문을 짯는데요 LIMIT 2를 걸면 comment 는 2개까지 나오는데 게시물이 3개가 있는데 1개만 나오는 문제가 있는데 어느부분이 잘못된 걸까요 ?
사진
[공지] 스프린트 11기 결과물을 공유합니다!! 1조 하루 영수증 - 오늘을 열심히 살아낸 당신을 위해 하루를 담은 영수증을 출력해드려요.🧾 - 할 일을 기록하고 포모도로 타이머로 집중력을 높여보세요.⏲️ - 영수증을 저장해서 보관하거나 SNS로 친구들에게 당신의 열정을 공유할 수도 있습니다.💪 https://www.daily-receipt.com/ github 먼저보기 https://github.com/EasyAndBeauty/DailyReceipt-FE-WEB 2조 링쿠니 - 내 모든 URI을 담는 바구니 - [Linkuni]는 나중에 다시 보고싶은 링크들을 한 곳에 모아 정리하고 쉽게 찾아보기 위한 서비스입니다. https://kunis-teo.github.io/Linkuni/ github 읽어보기: https://github.com/Kunis-Teo/Linkuni 3조 구딩 - 구독 서비스 스케줄러 - 내 구독 관리의 시작, 이제는 구딩에서! https://gooding.vercel.app/ github 읽어보기: https://github.com/Princess-Teo-And-The-Seven-Frontend/gooding 4조 FLIP - 내 손에 담긴 가장 큰 백과사전 - 플래시 카드를 이용하여 학습을 도와주는 서비스 https://leeseongbok1214.github.io/flashcard/ github 읽어보기 https://github.com/code-flash-card/code-flash-card
톡게시판 '공지': [공지] 스프린트 11기 결과물을 공유합니다!! 1조 하루 영수증 - 오늘을 열심히 살아낸 당신을 위해 하루를 담은 영수증을 출력해드려요.🧾 - 할 일을 기록하고 포모도로 타이머로 집중력을 높여보세요.⏲️ - 영수증을 저장해서 보관하거나 SNS로 친구들에게 당신의 열정을 공유할 수도 있습니다.💪 https://www.daily-receipt.com/ github 먼저보기 https://github.com/EasyAndBeauty/DailyReceipt-FE-WEB 2조 링쿠니 - 내 모든 URI을 담는 바구니 - [Linkuni]는 나중에 다시 보고싶은 링크들을 한 곳에 모아 정리하고 쉽게 찾아보기 위한 서비스입니다. https://kunis-teo.github.io/Linkuni/ github 읽어보기: https://github.com/Kunis-Teo/Linkuni 3조 구딩 - 구독 서비스 스케줄러 - 내 구독 관리의 시작, 이제는 구딩에서! https:/
다음 12기는 언제쯤 하시나요!!
다들 대단하시네요!!!
멋지십니다!!
이모티콘
지금은 9월말이나 10월초를 생각하고 있는데 일정은 개인상황에 따라 달라질 수 있어서 확정이 되면 추후 공지 하도록 하겠습니다 :)
@이지원 오 구딩의 개발자님이시군요? 좋아요 눌러주셨네요 🤪 고마워요오오오오오!
아 이 댓글이군요~?
감사합니다 😁😂
이걸 3일만에.... 대단하십니다 다들!
이모티콘
다들 너무 잘하셨네요
우와 11기 너무 멋져요!
삭제된 메시지입니다.
청소하는 튜브님 무슨말씀이시죠!? 님은 님이 맞습니다!!
이모티콘 다들 넘 고생하셨네요!!
다들 너무 멋져요!!!🔥🔥
혹시 CRA에서 서비스워커 적용할때 public/index.html에서 관련 js 불러와야하나요?
App 에서 불러도 될거에요!
아하 감사합니다!
아
튜브낀 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!! 튜브낀 튜브님~ 반갑습니디 :)
국취제 상담사에게 전화해보니 수업 이어득기는 안된다고 하네요.. 그럼 학원에서도 안된다고 하겠지요?ㅠ
안녕하세요 vuetify 쓰시는 분들중에 v-tooltip hover랑 click 두 이벤트로 오픈 하는거 해 보신분 계신가용?
그렇지요
네
다들 멋지십니다~!
너무 늦게 말했나 ㅎㅎ
ㅋㅋㅋㅋ 감사합니다!!
감사합니다!
부끄러워하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
혹시 baseline vertical-line 고수님 계실까요... ㅜㅜ
안녕하세요! 부끄러워하는 라이언님 반갑습니다
안녕하세요 테오님!
baseline은 영어 글자의 아래 부분 정렬을 말합니다 어렸을때 영어 4서 노트에 적어보면
3선 라인을 의미해요
저 테오님 질문하나만 드려도 될까요..?
네네 여기는 질문 눈치보지 말고 편하게 올려주세요 ㅎ
혹시 스프린트가 스터디 모임이에요? 다음 기수도 준비중이실까요?
사진
사진
pink에 vertical-line top을 주면
yellow 상단에 부모요소 height에 영향을 주지 않기 위해 yellow가 올라간다는 것은 이해했습니다.
근데 왜 lime이 yellow baseline에 맞추기 위해 같이 올라간건지 이해가 안가요 ㅠㅠ
스터디는 아니고 다같이 5일간 아이디어를 구현 배포하면서 협업을 배워보는 이벤트입니다 다음달에 또 다음 기수 생각하고 있습니다
yellow상단이
t아카데미에서 국비교육 모집 중이어서 지원했습니다 오늘 사전과제을 주신다는데 5시간 주시더라고요..? 사전과제 때 보통 뭘 만들어서 제출하라고 하나요???
와아 사전 과제도 있나요? 대박이네요
이거 붙어야 면접 기회를 준다는데 ㅋㅋ 걱정이에요
와아;;
국비교육이 엄청 힘드네요,,?
몰라서 교육받는건데 사전과제라니....!!!
프론트엔드
교육과정인가요?
사전과제로 보통 로그인 구현…?
ㄷㄷ
아니면 채팅 컴포넌트를 만들고 페이지 이동시에도 해당 내용들이 남아있는지? 그리고 새로고침시에도 데이터들이 남아있는지도 해봤었어요
와,,우
5시간만에 만들수 있는건가요 ㅋㅋㅋㅋㅋ
html css js만 활용해서 만다는 간단한 과제라는데
학원다니는데
css에서 잘 안 쓰이는 속성이다 보니 지금은 까먹었는데 나중에 정리해서 한번 공유 드리겠습니다 :)
저도 준비가 되면 나중에 한번 참여해보고 싶어요^^
몰라서 다니는데 어떻게 과제를 하지?
언제든지 환영합니다
중도탈락자가 꽤 많아서 그런가보네용
부캠 국비 아니고 그냥 학원인가요?? 이제 다 사전과제 있나보네요.. 어려운건 아닐거같아요
부캠 국비라고 하는게 맞는거 같아요
사진
요 과정입니당
오호 Sk플래닛에서 저런걸 하는군요
학원느낌이네용
웹 풀스택 ㄷㄷ
왜 풀스택으로 이렇게 광고하는걸까요..? 신입이 풀스택이라고 하면 믿음도 안줄텐데
풀스택 바라지도 않습니다 저 ㅋㅋ 하나만이라도 잘하고 싶어요 ㅋㅋ
그러면 하나만 있는 커리큘럼으로 가시는게 낫지않을까요
저거 커리큘럼이 궁금해서 봤더니, 졸업예정이거나 취준중인 전공자들이 신청하는 과정같네요.ㅎㅎ
백엔드는 그냥 곁다리로 껴넣은 느낌..
혹시 react를 pwa 를 통해 웹앱을 만드려고 하는데 관련 레퍼런스나 조언을 얻을 수 있을까요. 검색해도 잘 안나오네요
window.scrollY > 0 ? (scrollDirection.value = true) : (scrollDirection.value = false)
혹시 이 코드를 더 줄일수도있나요…?
뭔가 괜히 어색한 느낌이 드는데 더 간단하게 쓰는게 있으실지 해서요!
scrollDirection.value = window.scrllY > 0
아…감사합니다 ..!!
졔킴님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 제킴님 반갑습니다 :
안녕하세요! 혹시 PM 직무여도 이 방에 들어와도 괜찮을까요?
와우!! 감사합니다
환영해주셔서 감사합니다. 🙇♂️
아무런 상관없구요 프론트엔드나 협업에 대해서 궁금한게 있다면 얼마든지 편하게 물어봐주세요 :)
저희 방에서 프론트엔드나 협업 회사일 기타 고민거리 등도 많이 이야기 하지만 하지만 또 이거 어떻게 해야하나요? 와 같은 개발지식 관련 질문들도 다수 올라올거에요 ^^; 나누고 싶은 이야기가 궁금한게 있다면 언제든 편하게 글 남겨주세요 ㅎ
네 알겠습니다. !! 혹시 테오님께 이야기를 드릴려면 여기서 질문드리는 것이 맞을까요? 아니면 메일 등의 다른 수단을 활용하는 것이 맞을까요?
공개된 장소에서 질문이 많아지면 다른 분들게 폐가 되지 않을까 싶어 질문드립니다.
전혀 관계없습니다. ㅎ 제킴님이 궁금한 내용들 다른 분들도 궁금해하실거에요~ :)
아 그렇군요! 감사합니다.
네 개인적인 이야기라면 디스코드DM을 통해서 이야기 하셔도 됩니다. :)
앗 그럼 테오님께 디스코드에서 DM 드리고 제가 찾은 인사이트 등의 내용을 따로 공유해보도록 하겠습니다.
집에서 사용할 개발용
맥
아이맥 m1 램8 ssd256 괜찮을까요
모니터 물고 사용하시나요?
저의 경우는 램8gb 램16gb 체감이 좀 크더라고요.
32인치 4k 물고사용하면 조금 버거워하더라고요.
요즘 브라우저가 메모리를 많이 먹어서 그런지..
차리리 맥미니 16기가 사시는게 나을수도 있어요
모니터 qhd 물 예정입니다
저는 가지고 다닐 필요가 없어서
노트북은 지양하려 합니다
맥미니도 데탑이긴한데
qhd물리면
크게 문제는 없으실꺼에요
컨테이너 환경 개발 주로 하시면 256gb 이면 조금 답답하긴 하더라고요.
저는 브라우저 20~30개, 메신저랑 피그마랑 vsdode돌리고 하면 좀 렉이 걸리더라구요
4k 물렷을때요
4K는 안 씁니당
맥은
아이맥은 자체 디스플레이도 사양이 높아서 그런지 동급 에어나 맥미니보다 확실히 렉이 심합니다
맥에 대해서 1도 몰라요 ㅠㅠ
집에서 살 ios 기반 pc 추천 부탁 드려도 될까요
가성비로는 맥미니 16gb m1 이 제일 좋은 것 같아요.
맥미니는 모니터 없는 본체만 있는 것입니다. 아이맥은 화면 딸려있는 일체형 pc이구요
아 그럼 맥미니가 낫겠군요
리액트네이티브에서 리스트뷰(FlatList) renderItem에 들어가는 컴포넌트를 useCallback으로 감싸서 렌더링 성능 이슈를 해결 했는데요 보통 이런식으로 사용하는게 일반적인가요?
웹개발하기에는 성능 체감이 느껴지지 않으실거에요.
게임도 하나도 안해서
(메모리는 많이 쓰게될것 같지만)
맥으로 넘어가려 합니다
맥미니는 램이나
하드 추가하기에 어려운가요?
맥 pc 내부를 한번도 본적이 없어서 ㅋ;;
m1 맥미니는 안돼요
처음에 사면 그대로 고정입니다.
그렇군요
확장할 수 있는 것은 무엇이 있을까요
음..없습니다..
외장 하드 저렴한거 쓰시면 될것같아요
그래서 맥북을 쓰시는 군요
높은 사양의 맥북..
램 8로가기엔
너무 낮은 램 아닌가용
윈도우만 되더라도 16은 써야..
노트북 -> 맥북에어, 맥북 프로 / 데스크탑 -> 맥미니, 아이맥, (맥스튜디오) 이렇게 있는게 뭘 사시던 16기가 또는 그 이상을 사세요.
맥미니중 하이엔드 급을 사야겠군요
다다익램이긴 한데 m1 칩부터는 램 효율이 많이 좋아져서 램을 올릴 바에 CPU를 업글 하는 경우가 많더라고요 참고하시면 좋을 것 같습니다.
무튼 에어 8기가, 미니 8기가, 16기가, 아이맥 8기가, 맥북프로 32기가 16기가 모두 써본 경험에서 말씀드렸습니다. 🙇♂️
답변 감사합니다
경력이 쌓이면 쌓일수록
저는 개인적으로 맥미니로 가서 최고 사양으로 가시는게 제일 베스트가 아닐까 싶네요
맥을 많이 쓰시더라구요
아이맥에서 원하는 사양 뽑으실라면 예산이 진짜 만만치 않으실거에요
저...
맥미니 8기가는
최고사양의 모델명이 따로 있을까요
사지마십숑
16기가로가세요
16은 가야죠 ㅎㅎ
RN 개발할때 예뮬레이터 IOS / AND 돌리면
다나와에서 원하는 옵션을 선택하실 수 있고 애플 공홈에서 맥미니를 선택한 후 사양을 결정하실 수 있습니다.
버벅이고 도커로 디비컨테이너 실행하면 버벅입니다
감사합니다!
M1 맥미니 16G 512GB CTO
이거로 갑니다
크 축하드려요 ㅎㅎㅎ
ㅋㅋ..아이맥 키보드.. 마우스도 추천 좀 받을 수 있..을까요..
샵검색 : #로지텍 버티컬
샵검색 : #엠스톤 저소음 적축 35g
키보드는 되게 취향차이인데
저는 로지텍 mx master 시리즈 추천드려요
전 한무무868 추천해여
하얀걸로 예뿐고..
샵검색 : #gk868b
mx keys 쫀듯하니
좋습니다
한무무도 레트로한 감성때문에 좋은거 같습니다
로지텍 mx master 3 마우스랑 mx key가 제가 사용했을 때는 제일 낫더라고요 ㅎㅎㅎ 최근에 로지텍 시그니처 k855라는 무선 기계식 키보드도 나왔는데 이것도 강추입니다 .갓성비
mx master 3 휠 좋죠 ㅎㅎ 근데 마우스가 좀 무겁다는 단점? 아닌 단점이 있습니닷
묵직합니다 일반 마우스보다 훨씬 그래서 그것때문에 더 피로하다는 분들도 계시네요
개발시 맥 프로까지는 필요 없을까요?
사실 사양이 높을수록
웹 / 앱 개발에 따라 다르지 않을까요?
좋긴합니다 ㅎㅎ
웹 개발이고
vue나
리액트
정도입니다
좋은곳 취업하셔서 지원받아 사용하시죠 ㅎㅎ
m1 램8g면 원래 크롬에서 three.js 렉걸리나요? ㅜ
렉걸릴것같아요!
내년초
전 m1에어 16기가 쓰는데 만족합니다
회사에서 맥북 구입 예정입니다
최대한 사양 높여서
구입하세용
게임도 안하고 해서
그 이전에 맥 환경 적응이나 할 겸해서
집에 한 대 두려구요
웹이면 프로까지는 필요 없으실 것 같긴 한데… M1에어로 충분히 가능이란 이야기가 있어서, 저라면 성능보다는 휴대성 보고 고를 것 같긴 해요!
집에한대 회사 한대가 아주 이사적이죠
근데 웹이라도 큰 프로젝트 빌드를 빨리돌리기위해
좋은 사양을 고려하는것도
좋을것같아용
그 사양이
어느정도 선까지인지 모르겠네요 ㅜㅜ
개인적으론
예산이 허용하는한
m1에어 램16기가로 그냥 회사에 react, RN 무리없이 돌리고 있습니다
최대한 사양을 높이몀 좋을것같습니다
M1 에어는 모니터 하나밖에 연결 안되지 않나요?
m1에어 모니터 1개밖에 연결 안된다는게 단점인것 같고, 그냥 프론트 개발이면 큰 무리는 없는것 같아요
대신 최소 m1에어 16긱이면
좋을것같아용
프로를 사서 얼마나 잘 활용할 수 있을지 생각해보시면 좋을것 같아요
프론트분들은 현업에서도 m1에어 16정도면 충분하신가요?
m1 에어로 모니터 두개 쓰시려면
그 칼디짓 말고 유명한곳 독 사시면 가능하긴 합니다
오호 그렇군요
디스플레이 싱크 되는 독 사셔야돼요
전 피그마 크롬 vsc 키면
맥북까지 모니터 3대 사용해야해서
모니터 1대는 불편한것같아요
부끄러워하는 라이언님이 나갔습니다.
저는 현업에서 아직까지는 불편함없이 사용하고 있습니다 :)
지금 취준중에 m1 8기가로 쓰는중인데 취업하면 무조건 부족할거같아서...
전 집에서는 m1pro 14인치 깡통 쓰고 회사에서는 m1pro 32기가 쓰고 있습니다
존버하다가 프로로 갈아탈지 아니면 에어 16으로 미리 바꿔버릴지 고민중입니다
사실 회사 입사하면 더 좋은 스펙 노트북 주게되는데 고민해보시죠..
아그럴수도 있겠네요 ㅋㅋㅋ
노트북 주는 회사로 가시져!1
지원해주시는 노트북이 보안에 자유도가 높다면 (?) 그걸로도 사이드 프로젝트해도 문제 없을 듯 합니다. 제 지인분들도 많이 그렇게 하시고요
그렇군요! 감사합니닷 ㅎㅎ
현징님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
무한공부중님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
특정 기업에서 서류 합격을 줫다가 말없이 한참후에 불합격으로 바꾸는건 이유가뭔가요???
서류만 합격하고 인터뷰나 이런거 응시 안해서 불합격으로 한건 아닐까요?
문자 잘못간거 아닌가요
이메일을 잘못보냈나
인터뷰라던지 과제라던지 아무런 말이 없어서 재요청도 보냈는데 어느순간 불합격으로 바꿨떠라고요
문자보다는 원티드에 서류합격으로 변경됐었어용
클릭 미슨가보네요
그렇군요 ,,
근데 그런 경우 종종 있어요 서류 합격했는데
아무런 연락이 없습니다
미스클릭 같기도 하고 잘 모르겠네요 인사담당자가 아니여서
서류 합격입니다 하면서 그릇줬다가 도로 뺏아서 다른 테이블 갖다주는 식
어잌후 죄송합니다 그쪽은 부랍격입네다
이쪽이 합격입니다...
이모티콘
즐거운 네오님 정호영님 모두모두 반갑습니다 어서오세요 :)
안녕하세요 Thunk 에 대해 하나 여쭤보고자 합니다. Input 태그안에 입력된 값을 event.target으로 불러와서, 그 값을 axios.post로 json server로 보내려고 합니다. Input 태그안에 입력된 값을 event.target으로 불러오는데까지는 성공했는데 그 값을 slice?모듈? 에 보내주어 axios.post로 json server안에 데이터를 집어넣고 싶은데 잘 되지 않는 상황입니다. 상황설명이 잘 안되네요….. 어떤 방법을 써야할지, 어떤 검색어키워드로 정보를 얻을지감이 잡히지 않습니다. 도움을 부탁드려도 될까요?
말하시는 thunk가 React thunk라면 액션을 dispatch하시면 될것 같아요
혹시 리액트 열렸을때 페이지 url에서 파라미터 뽑는 권장되는 방법 아시는분???
쿼리스트링에서 파라미터 뽑고 싶습니다!
React router요
https://react.vlpt.us/using-typescript/06-ts-redux-middleware.html 해당 자료 따라하면서 위 내용 습득하시는 것도 좋아보입니다.
필요한 곳에서 location.search와 URLSearchParams 사용해보세요 어차피 전연변수라 접근레는 문제 없어요
키워드 감사합니다 우선 검색을 좀 해보겠습니다
한번 꼼곰히 읽어볼게요 감사합니다
쿼리문 관련해서 질문이 있습니다 json_agg() 를 이용해서 게시물의 댓글을 조회해 오는데 값에 limit을 줄 수 있는 방법이 있을까요 ?
스터디하실때 지각하거나, 날짜 안지키고 야근한다며 계속 날짜 옮기는 멤버가 있을 때 어떻게 해야 좋을까요?/
페이지별로 api콜을 할때 react router 같은걸로 왔다갔다할때 한번간 페이지는api 다시부르기싫으면, 첫진입에서는 api콜해서 redux같은데넣고 두번째부터는 redux에 데이터가없으면 다시부르려하는데 이런 흐름맞나요? 그러면 데이터마다 expired시간도 줘야하구요
과감히 뺍니다
안녕하세요. 같이 스터디도 하고 프로젝트도 하고싶어서 들어왔습니다. 잘부탁드려요.
날짜 fix가 맞는 것 같고.. 참여못한 본인만 손해되는 방향으로 진행하는건 어떠신가요
맥 관련하여 한가지만 더 여쭙고자 합니다, 용량이 256기가면 부족할까요?
맥 미니 입니다
가능은 할 거 같은데 데이터 패칭 라이브러리 사용하시는 게 좋을 거 같습니다!
Nas 구축해서 올려버리시죠 ㅋㅋㅋ
아이클라우드가 필요없습니다..
ㅜㅜ 사이드플젝이라 4명이서 하는데 한명빼기가 애매한데 .. 보통 팀내 리더분께서 이야기 따끔하게 하나여?
리액트는 swr이나 react-query 같은거 있다고하는데 저는 vue써서 vue-swr 같은거 찾아봐도 주간다운로드수가 4 이면 못쓰겠더라구요;;
몇번이상 빠지거나 지각을 하면 벌금을 걷는다던가 해야하지 않을까요
ㅋㅋㅋㅋ 주간다운로드 4
저 커리어리에서 매칭해줘서 하는데 혹시 거기 임원진한테 말씀드려도 되는부분인가여?????
이것도 생각 중입니다 ㅋㅋㅋ
음 저같으면 개인적으로 한마디하고 계속 안지켜지면 일단 빼고 추가 인원을 모집할거같네요
안녕하세요! 정렬 또는 필터링을 구현할 때 React를 예로들어 웹사이트의 Query Parameters를 변경하고 받아와서 만드는 방식과 useState로 url을 변경하지 않고 만드는 방식 둘중에 선택해야한다면 어떤 방식이 더 좋고 그 이유를 알 수 있을까요?..
API 요청에 대한 방식은 모두 동일하고 단순히 URL을 변경하느냐 하지 않느냐의 차이만 있나요?
넵 API 요청은 동일하고 URL을 변경하지 않느냐 변경하느냐 어떤게 더 옳은것인가?... 그런 부분이 궁금합니다 예를들어 정렬화면을 보여줄때 /?sort=ASC 또는 /?sort=DSC로 하고 url의 sort 값을 불러오고 url을 변경하는 방식과 const [sort, setSort] = useState('ASC')로 useState의 값을 변경하는 방식 이 두가지 중 어떤 방법이 더 선호되야하고 그 이유가 궁금했습니다
혹시 전자는 정렬된 데이터를 서버에서 받아오고, 후자는 받아온 데이터를 프론트에서 정렬시키는거 아니신가요?
후자의 방식에서는 서버에 param값을 별도로 전달해주지 않나요?
엇 혹시 몇팀이실지..제가 건너 아는 분이 그거 하시다가 진행이 안되서. 임원진에게 문의드렸다고 하더라구요 ! 스태프에게 문의 해보세요
헐 정말요!! ??? 3주차인데 아직도 아이템을 못정했어요..........ㅠㅠ 감사합니다!!
그런 플젝은 어디서 진행하나요??
단순히 생각했을 떄 저라면 서버에서 받은 값을 그대로 사용할 것 같습니다. 그래서 컴포넌트 내에서 오름차순인지, 내림차순인지 상태가 불필요할 것 같다는 생각이 듭니다. 그래서 url이 바뀌는것인지 바뀌지 않는 것인지에 포커스를 맞춘다기보다는 서버에 query (param)을 보내냐느냐 보내지 않느냐에 포커스를 두고 서버에서 받은 값을 그대로 사용할 것 같습니다.
url 공유기능때문에 url변경 방식으로 했는데, 구현시 데이터와 url 싱크 맞추는 작업이 빡셉니다. 그래서 전 프레임워크에서 제공하는 라우팅 기능 이용하지 않고 location.href 로 처리했습니다.
곰팡이님이 나갔습니다.
전 커리어리 사이드플젝에 신청했던것 같은데,, 기억은 안나지만 메일로 구글신청서 같은게 날라와서 신청했어요!!!!
혹시 수연님이신가요? ..lee sol?
여기가 바로 만남의 장소?
안녕하세요 혹시 맥북 듀얼 모니터 사용하시는 분들은 4k 지원되는 모니터 사용하시나요? 기존에 사용하던 모니터 맥북에 연결하니 화질이 깨지는거 같아서 질문드립니다
hdmi로 연결하시나요? 포트 연결케이블의 문제일수도있어요 모니터마다 다르거든요
맥미니 m2존버 해봐야겠네요 곧 나온다는 말이...ㅎ
ㅋㅋㅋㅋ아니요! ㅠㅠ 수연님도 저와 같은 상황이였나요?
넵 hdmi랑 어댑터 확인해봤는데 4k 지원 되는 거 같아서 모니터가 문제인가 싶었어요 ㅜ
아 같은조가 아니셨군요.. 퉁이리와 같이 플젝하신분 인줄 알았어요 ㅎㅎ
해당모니터 메뉴얼을 한번 읽어보세요 4k를 지원하는 케이블이 무엇인지
흙ㅠㅠ 의지가 없는분과 같이하기가 힘드네여!
감사합니다 URL 공유에 대한 기능을 생각해볼 수 있겠네요
넵!! 감사합니다!!
어피치님은 백엔드 이신가요? 기획자?
그거 아마 케이블 문제일듯합니다
저 fe입니다! ㅎㅎ
저도 4k 60프레임 지원하는 케이블로 다시 샀어요
가뜩이나 지금 백엔드분이 시간을 너무 안지키셔서,,, 나중에 협업할 때 걱정이 됩니다ㅠㅠ
얼릉 물어보시고 탈출하시거나 다시 알아보심이... 시간은 못 지켜도 소통이라도 되면 그나마 다행이겠네요.. 에고ㅠㅠ
앗 vue 셨군요..
아참 저는 vue였습니다. ㅎㅎ
ㅠㅠ 힝구 조언 감사합니당 ㅎㅎㅎ
혹시 react-query 사용하시는 분들 계신가요? 사용자가 어떤 정보를 입력하고 저장했을 때 post 요청을 하고, 업데이트 한 것으로 보고있는 데이터를 업데이트 해줘야 하는데 post 요청이 성공했을 때 refetch or invalidQueries 를 하면 타이밍 이슈가 발생하는 것 같아서요
가끔은 수정된 내용으로 새롭게 데이터를 불러오고 가끔은 기존의 데이터를 불러오는 현상이 생기네요 ㅠㅜ
짧게 딜레이를 주고 refetch나 invalidQueries 하는 것도 뭔ㄱ ㅏ살짝 이상한 것 같고요
오호 넵 감사합니다!!
성공 후에 요청이 가는 건 확인하셨나요??
넵 성공후에 네트워크 요청 가는건 확인해봤습니다!
혹시나 async await 나 promise 사용과 관련된 타이밍 이슈일수도 있을거같아요.
보통 프론트엔드 스터디할 때 어디서 만나나요? 카페밖에 생각이 안나네요
핀터레스트같은 사이트 추천해주실 만한 사이트 있을까요??
헬로월드에서 합니다
줌
Lalala님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
게더타운
https://dribbble.com/ 도 많이 이용되는 것 같아요.
감사합니다!
요청 응답 값은 네트워크에서 어떻게 오나요?? 제대로 업데이트된 값이 오고 있나요?
한번 살펴보고 있습니다! 감사합니다 :)
감사합니다!! 혹시 목업사이트도 추천해주실 수 있나용??ㅎㅎ^^
값이 업데이트가 안될 때는 응답이 업데이트 되기 전 데이터로 옵니다! 그래서 디비에 업데이트 요청을 하고 get을 다시 너무 빨리 요청해서 그런가? 라는 생각을 했습니다. 조금 살펴보니까 invalidQueries가 아니라 refetch 함수로 다시 요청할 때 이런 현상이 발생하는 것 같기도 해서 조금 더 살펴보겠슴다
저도 비슷한 이슈가 있었는데, 해당 요청이 react-query 를 사용할 때 문제는 아닌 것 같고. 저희 같은 경우에는 서버의 조회 로직 문제였기 때문에, 서버의 조회 로직을 수정해서 반드시 업데이트 된 값이 넘어올 수 있도록 변경했었습니다.
쿼리키는 refetch를 할 때도 동일한데 아직 캐싱타임이 지나지 않아서 캐싱된 데이터를 그대로 뿌려주는 것인지 궁금해서 그 부분 한번 봐보려고요!
아,,
캐싱된 데이터를 가져온다면 요청이 가지 않을 것이기 때문에 요청을 보내고 서버에서 업데이트 전 값을 보내는 거라면 서버 조회쪽에서 어떤 최신값을 가져오는 지 한번 확인해봐도 좋을 것 같아요!
오우 넵 답변 너무 감사드려요!
당시에 0.3초 정도 딜레이 주면 잘 되는걸 확인했었는데, 그건 맞지 않는 방법이었어서 서버 조회쪽 문제인 걸 확인하고 수정했었어요!
저희도 백엔드 분들이 타이밍 이슈 한번 발생했던 적이 있어서 수정을 했었는데 말씀하신대로 서버쪽 문제일 수도 있겠네요 음
좀더 보고 백엔드 분들이랑 같이 살펴봐야겠군요 ㅋㅋ
(1) post요청 성공 후 (2) refetch or invalidQueries가 실행되도록 비동기처리가 되어있는지 한번더 확인해보시는 것도 좋을 것 같습니다. 업데이트된 값이 가져와지기도하고 이전값이 가져와지기도 했던 비슷한 경험이 있는데 비동기 처리가 되어있지않아 발생했었어요!
멤버는 정해져있고 오프라인으로 할 생각이에요 장소를 추천받고 싶엉ㅅ
어요
아? 혹시 맥미니에 qhd 모니터가 호환이 잘 안되나요?
안녕하세요 UXUI 취준생입니다. 처음으로 개발자와 함께하는 프로젝트에 참여할 기회가 생겼습니다. 제가 아직 공부가 부족한 상태로 진행하게되었는데요.. UXUI 디자이너가 프론트엔드 개발자와 협업하기 위하여 꼭 알아야할 것이나 지켜주었으면 하는 것이 있을까요?
일단 컴포넌트화를 위해 자주 사용되는 버튼이나 테마컬러같은거 다 정리해두셔야하고
반응형ui라면 화면크기에 따라 화면이 어떻게 변해야하는지 명확하게 하는게 좋구요
와이어 프레임 같이 기획하면서 디자인하셔서 공유해놓고 시작하면 딴길로 새지 않더라구요!!
Figma prototype을 이용하면 의도하신 바를 정확히 전달할 수 있을 것 같아요
상호작용이 필요한 요소라면 (버튼 이나 인풋) 그 요소가 여러가지 상태를 가지는데 (focus, disable 등등) 그 상태에 따라 어떻게 변화해야하는지 다 디자인해줘야합니다
와 하나같이 다 너무 제가 필요했던 정보들입니다.
이부분은 프로토타입으로 전달가능할까요?
피그마 사용합니다ㅣ!
공통컴포넌트라면 각 상태에 따른 컴포넌트들을 모아놓는게 좋겠죠
궁금한 사항으로 요즘 프론트엔드 개발자도 Figma 툴 이용하여 디자인 및 기획을 참여하시나요?
피그마를 보면서 코딩을 하죠
디자이너없이 혼자 그렇게 하시는 분도 있는지 궁금하여 이야기 드려봤어요.
디자이너 없이 프론트한테 디자인 시키는 회사는 탈출해야죠..
완전 인터널 프로덕트라면
백오피스쪽은 거의 디자이너 없긴합니당..
가능을할것같습니다만 매우 어려울것같네요 ㅋㅋ
디자인을 제외한 기획 단계에서 정도에서는 쓰나요?
걍 개인프로젝트라면 걍 antd같은걸 써서 어케케 하겠지만..
기획도 프론트가 안하죠
기획은 기획자가 하는겁니다
규모바이규모입니다
욕심있으면 할수도있죠
저흰 같이합니다
회사마다 다르기 때문에 얼마나 프론트엔드 개발자분들이 기획 및 디자인 참여비율 같은게 궁금했어요.
디자이너분들이 프론트 공부해서 오는 경우도 많아서, 그 반대의 경우도 많을까 해서요.
Role이 명확하게 나뉜걸 좋아하는 사람들도있고 함께 경험해보는걸 좋아하는 사람도있는거니깐여
전 명확하게 안나뉘는 회사 질색이라..
근데 보통 개발에서 디자인으로 넘어가는 사람은 잘 못본거같습니다
물론 저는 기획 참여는 안하는데 기획에대해서 질문은 던져요
왜 그렇게 되어야만하는지
그런건 좋죠
저의 경우는 제플린 보면서 지금까지 작업해왔는데, 앞으로 프론트 개발자가 기획까지 참여하는 생태계로 바뀌었는지 궁금했네요. 요즘 Figma 많이 쓰시는 것 같아서 공부가 필요한 분야인지 궁금했던 것 같아요.
피그마를 보는건 딱히 공부 안해도 지장 없더라구요
저도 책임소재가 불분명해질 수도 있어서 공감합니다
더 문제는 명확하게 안나누고 프론트 일정을 소화하는 와중에 다른거까지 처리 하라면서 왜 프론트 일정 못 맞추냐 이런 말 나오면
최악이죠
안녕하세요. 이번에 회사에서 맥을 지원받게 되서 질문드립니다! 300만원 선에서 맥 구입을 해주신다는데 맥북프로 13인치 M2에서 램,저장용량 업그레이드가 나을지 맥북프로 16인치 기본형 하나 하는게 나을지 고민이 됩니다. 맥북 고수님들 조언 주시면 감사하겠습니다ㅠㅠ
와 핵 부럽습니다
약간 값싸게 여러 역할 위임해서 갈아넣는 그런 느낌
16인치 기본형 가시죠
저는 화면 큰거 추천입니다!
일단 듀얼모니터 지원 유무부터가 넘사벽이라..
13인치 사면 거북목올것같습니다..
저는 램높은게 좋아서 하하
무게가 고민이시면 14 추천드립니다!
어제 스프린트 결과물 공유하신걸 보니 다들 기획에 열심히 참여하신 것 같아서 그런 업무 분위기로 바뀐걸로 생각했는데 꼭 그런건 아닌가보네요.
전 이직하면 맥북 받을거라서(희망사항입니다^^) 존버중입니다
…
아 무게도 조금 신경쓰이긴 합니다ㅠㅠ
거의 모니터 연결해서 쓰신다면 14인치 M1 10코어 램16 추천합니다~
스프린트는 사이드플젝이라 회사랑 좀 다를거같습니다
그 혹시 죄송합니다만..
2013 맥프로 2.7-12코어 / 64램 / 500기가 / D300이것도 지금 쓰기에 괜찮나요
13년도는 좀..
헉..
근데 엄청 좋은거 사셨나보네요
2013년시절..
다들 개인용으로 그냥 많이 쓰시는거같아요
m1이랑 비교해서 더 괜찮을 거 같은 느낌..
뭐 문제가 없다면 써도 되겠지만 제 14년도는 고장나서
그당시 가격 얼마였나요?/
주변에도 많이 쓰십니다
맥미니랑 저 사양이랑
했을때 어떤거 추천하시나요
맥미니 ssd 512 램 16
Udemy강의 질문 있습니다! JS 초보자인데 이 강의 들어보신분 있을까요?(혹은 추천해줄만한 강의가 있나요..?)
갑자기 카카오맵 coord2address 요청이 net::ERR_FAILED가 뜨는데 혹시 카카오 맵 웹 api 터진건가요?
사진
구매당시 600 이상이었고, 150 들여 업그레이드 했다고 합니다
전 개인적으로
Angela yu 좋았습니다
cpu m1 pro랑 m2는 큰 차이는 없죠?
13년도 맥북 중고거래신가요?
13 맥북을 가지고 계신다면 구지 바꾸시지 않아도 된다라는 의미긴했고...! 구매를 하시는거라면 맥미니 그냥 사시는게 나을 것 같습니다
초보고삼님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
초보고삼님이 나갔습니다.
네네
맥미니를 사는게 낫겠죠?
너무 오래 되서
에이 9년된건
보내줘야죠
넵 맥미니가 좋아보입니다~
뿅뿅 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
일하기 싫은 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
깆무원님이 나갔습니다.
useQueries
return useQueries([ { queryKey: [...planBasicList], queryFn: api.serviceState.GET_SERVICE_PLAN_BASIC, }, { queryKey: [...planRegisterList], queryFn: api.serviceState.GET_SERVICE_PLAN_REGISTER, }, ]);
이렇게 쓰는거 맞지 않나요...
왜 reactquery에서 에러가 날까요
머라고 에러 나나요?
저 들었는데 + 자기공부 하실거면 강추입니다.
와우 50시간...
homie님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저 개발자 유명하죠 리액트강의도 좋습니다
허,,
듣고싶은데
리액트도 벅차서 큰일이네요
근데 너무길어서 저는 다는 못보고 보고싶은 카테고리만 봤어요..
각잡고 봐야하는데 잘안되네요
맵을 못돌리는거 같습니다..
에러 메세지가 있어야 좀 더 파악이 가능할거 같네요..
넵 잠시만여 넘 빡쳐서 담배피러 나와가지고... 금방 들가서 보내드리겠슴다!!
ㅋㅋㅋㅋㅋㅋ
크 저도 담배 다시 시작합니다
사진
면섿담배41300….
오
하이브리드 5미리 맛있죠 ㅠ
근데 면세점 왜이리 비싼가요 ㄷㄷ
41300원이오..?
10갑 이라서 ..
아하,,
면세 반값 아니었나요..? 차이가 없네요..?
달러가가
1350원인걸요
17년도쯤에 35000원정도했던거같은데
계속 비싸지더니
달러까지 높아져서
깜짝놀랐네요
막말로 별차이없어서
Uncaught TypeError: Cannot read properties of undefined (reading 'map') at useQueries.ts:149:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at Object.useMemo (react.development.js:1650:1) at t.useQueries (useQueries.ts:149:1) at useServiceState (index.tsx:12:1) at ServiceState (ServiceState.tsx:4:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1)
요 에러 납니다 ㅠ
사진
뭔진 몰라도 149번째 라인에 있는 배열이 undefined라는데요?
현업에서 처음 환경설정 할 때 ESLint랑 git hook까지 추가하시나요?.?! 코린이... 가 여쭤봅니다
협업을 한다고 하면, 맞춰서 시작하는게 낫더라구요
안하고시작하면 당장은 편해도
분명 달리는 마차의 바퀴를 바꿔야할떄가 옵니다
춘님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
후 알약땜에 몇시간 일한거 다 날아갔네요... 이제 맥북으로 갈아타렵니다...
ㅎㅎ..
오늘 ㅋㅋㅋㅋㅋㅋ 다들 고생하셨어요..
쓰지도 않는거 냅뒀다가... 이게 무슨.....
알약이슈..
안녕하세요 춘님 반갑습니다
이래서 약 잘못먹으면 탈나는거같습니다
앗, 반갑습니다. 쓰신 블로그 글 보고 들어오기 되었습니다.
감사합니다!! 이곳은 블로그 내용이나 프론트엔드 웹 개발에서 궁금한 것들에 대해 물어보고 아는 것을 공유하며 함께 성장하고자 하는 곳입니다 ㅎ 많이 물어보고 많이 알려주세요 잘 부탁드립니다 ;)
혹시 태호님 블로그 주소 알수있나용👉🏻👈🏻
알약은
이름 바꿔야합니다
백신이 아닌거같아요
🥹
이스트소프트 힘들겠네요 ㅜ.ㅜ
허브님 프사 너무귀여워요
내일 주가 큰일 났네요 ..
샵검색 : #이스트소프트
일반적인 게시판에서 react-query를 사용하고 있는데, 특정 게시물에서 삭제를 할때 useMutation을 사용하여, 백엔드 서버에 게시글 삭제 API를 보내고, 성공했을때(onSuccess) queryClient.invalidateQueries(queryKey) 를 통해 게시글 list 불러오는것을 쿼리 초기화 시켜서 게시글 목록 페이지에서 삭제된 최신 리스트를 리패치 시키는데요. 정상적으로 잘동작하다가, 어떤 게시글을 삭제 했을때는 서버로 삭제 api요청하는것까지 정상적으로 확인했는데 왜 게시글 목록에서는 삭제가 안되있을까요? 어떤게 문제일까요 ㅠㅠ 어떨때는 되고 어떨떄는 안되고 원인을 못찾겠네요 ㅠㅠ
백엔드문제아닐까여?
요청은 갔고 응답도 제대로 온 것을 확인 하셨나요?
요청이 갔는데 삭제가 안되는 것이면 백엔드 이슈로 봐야할 것 같습니다.
저도 오늘 오후에 이이슈 봤었는데, invalidateQuery는 useQuery있는 컴포넌트가 다시 mount 될때 적용되구요, 최신리스트 바로 반영하려면 1. refetch를 실행하거나 2. isLoading대신에 isFetching으로 체크하거나 인거같습니다
제가 더 귀여운 편입니다
?
?
존경합니다
이모티콘
혹시 여기 web3 개발자도 계신가요?
새로운 목록 요청이 갔다면 백엔드 문제구요, 안 간다면 캐시 문제일 확률이 커보입니다.
이래서 요청을 하면 항상 응답 값이 제대로 들어오는 확인 해야 하는거 같습니다 ㅎㅎ
삭제 요청 제대로 갔고 목록 조회 페이지에서 응답데이터도 삭제된 최신 목록으로 불러오는것 확인했습니다!
최신목록 그러니까 삭제된 항목이 포함되지 않은 목록을 받아오는데 렌더링은 삭제된 항목도 렌더링 된다는 얘기인가요?
get이랑 delete 리액트쿼리 코드 부분 이미지 공유 가능하실까요?.?
그렇다면… 데이터를 혹시 따로 상태에다가 저장하시고 있나요…?
와 저는 input defaultValue에 출력했더니 리프레쉬가 안됐던 거 였네요
따로 어떤 state에 저장하지는 않습니다! 바로 useQuery에서 반환된 데이터로 list 뿌려줬습니다!
사진
이게 deleteMutation코드이고
사진
이게 list get하는 부분입니다.
리패치 하신다고 했는데 어디서 하시나요?
혹시 여기 web3 개발하시는분 계시나여??
데이타 콘솔 찍어봤을때 이전 값이 찍히시나요?
음…. 위에올린 delete mutation 할당한 deleteData(변수) 를 다른 컴포넌트(버튼컴포넌트)에 props로 전달을해서 거기서 mutate를 실제로 실행하긴 합니다…
사진
사진
이게 실제로 삭제 mutation 실행하는 곳입니다
삭제완료후 게시글 목록 refetch후 응답받아온 게시글 목록은 삭제된 최신 데이터 였습니다. 확인결과 백엔드 서버 API 이상은 아닌것 확인했습니다!
스피너 뜨고나서두 옛날데이터 인건가요?
혹시 invalidateQueries에 쿼리키를 스트링으로 전달은 해보셨나요?
사실 상관은 없는 부분이긴 한데…
제 말은 react query에 들어온 data 값이 최신 값으로 들어오는지 궁금했습니다!
mutation 후에 캐시 날림 => 다시 요청 보냄 => 응답 값이 최신 데이터 => data에 그 값이 잘 담겨 있다면 memo나 useMemo 등 특정 곳에서 업데이트가 잘 되지 않고 있지 않을까 의심
뷰우님이 나갔습니다.
감사합니다! 한번 확인해보겠습니다!!
아닙니다 ㅠㅠ 뭔가 큰 도움이 되진 못한 것 같네용
사진
우왕…! 프로그래머스 레벨 1 다풀어서 뿌듯합니다..ㅎㅎㅎ
역시 존경합니다
아아...
ㅠ.ㅠ
K for kris님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 K for kris님 반갑습니다 :)
안녕하세요! 반갑습니다😊
오프라인 스터디그룹을 주기적으로 진행예정인데 만남을 어디서 가지는 게 좋을까요?? 카페밖에 생각이 안나네요..
스페이스클라우드에서 장소를 렌트해보세요
신난 어피치님이 나갔습니다.
삼성역이 가까우시다면 구글 캠퍼스 서울?
오 스터디 하시나요??
혹시 서울인가요?
퇴근하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
서울이면 저도 참가하고 싶습니다!
퇴근하는 프로도님 반갑습니다 :)
안녕하세요! 딱히 어떤경로로 들어온건 아니고 프론트엔드 공부중인데 오픈카톡방이 있을까 해서 검색해서 들어왔습니다 잘 부탁 드립니다
안녕하세요!! 반갑습니다
잘 오셨습니다. 이곳은 프론트엔드나 웹 개발에 대해서 궁금한게 생겼을때 언제든 물어보고 아는 것은 알려고 공유하며 함께 성장하고자 하는 곳입니다. ㅎ 편하게 글 남겨주세요
반갑습니다! 넵 방해 안되는 선에서 도저히 모르겠다 싶은것만 질문 올리도록 하겠습니다 감사합니다 ㅎㅎ
여러분들은 백엔드나 다른 분야를 해봐야겠다는 생각이 든 적이 있나요, 저같은 경우는 백엔드를 더 잘하기 위해 협업을 잘하기 위해 프론트도 건드리는 중인데, 여러분들이 건드리는 프론트 말고 다른 분야가 있을려나요
백엔드가 앞에서 시간 다끌고 API가 마감시간 몇일만 남겨두고 줬을때...요... 아.. 내가 할까? 이런 느낌? ㅋㅋ
아앗....
저군요...ㅠㅠ
농담입니다. 사실 진담인데 요새는 그런 분 안 만나고 행복코딩하고 있습니다. ㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
Devops(ex. k8s) 관련으로 관심있게 도전해보고 YAML 같은 에디터를 어떻게 UI화 해볼까 고민하고 그런 작업 관심있게 하는 것 같아요.
요새는 아닌데 1~2년 전에는 웹뷰 + 네이티브 조합을 좀 했었습니다. RN은 안쓰지만 모바일 서비스로 내보내야 한 적이 있었거든요
특정 폰에서 버그터졌는데 스택오버플로우는 안뜨고 재현되는 폰은 없고 하거나 안드 아이폰 서로 다른 현상 뜨거나 할때
그래서 쌩 웹뷰 + 네이티브 API + Javascript Interface Bridge 이런 방식으로 간단한 모바일 앱 만들어보는 거요
다른분야하고싶어요
주로 ui이슈긴 한데..
cordova plugin 같은걸 말씀하시는건가요?
문자만 읽었는데 스트레스가 살짝 올라왔습니다. ㅋ
아뇨 그러기에는 너무 무거워서 그냥 MainActivty에 WebView올리고 Javascript Interface만 뚫어서 Navtive API 결과를 javascript로 보내는 방식을 했었습니다.
오 저 월요일에 아이패드, 아이폰에서만 구동 안돼는 javascript 현상 겪을때 느낀점이랑 비슷하네요. new Date 형식 문제였습니다.
반대로 주말이나 한밤중에 대기하는 백엔드 생각하며 버티죠
아하, 예전에 웹뷰쪽 구현할때 이런 플러그인들은 누가 만드는건가 궁금했었어요 .
내부적으로 네이티브 코드 다만들어야되는 작업들이 공유를 하는 멋쟁이들이 누군가 해서요 ㅋㅋ
javascript Date API는 만든 사람 진짜 혼나야도니다고 생각합니다!!!
이단 저는 아니네요. 저는 비겁하게 제꺼에만 썼어요. ㅋㅋ
일단8
아이패드 아이폰 웹에서만 재현되는데 이걸 에러로그를 보고 싶은데 어찌보나 하다가.. 다양한 환경 테스트 제품 추천해주셔서 그것도 보고 결국 크롬 앱에서 로그 찍는 방법이 있길래 그걸로 알아내서 해결했어요..
저는 사내에서 Browserstack이나 saucelab 같은걸 지원안해주어서 window, ios(simulator) vm 올려서 테스트하는 것같아요 ㅋㅋ
browserstack 이었네유. 그거 쓰고싶었는데 무료는 30분만 쓸수 있다그래서 울며 다른방법 찾았었네요
학생 계정 없으신가요?
하... 역시 크롬에서 PC웹 개발이 짱인듯 ㅋㅋ
네 ㅠ
ㅠㅠ
익플 죽기 전에는 그래도 모바일 대상 개발할때
익플 지원안해도 되니까 꿀이라고 생각했는데...
ㅋㅋ ㅇㅈ합니다. 아니! IE를 안해도 되잖아!?
웹뷰쪽이 예전에는 cordova -> ionic -> react-native -> 요즘은 flutter 많이 쓰던데, 굉장히 개발 추세가 많이 바뀌는 것 같아요.
그떄는 홈페이지 서비스보다 어드민 만드는게 더 좋았어요. 어드민은 IE지원 꼭 필수가 아니어서
https://github.com/Tencent/vConsole
채팅방 관리자가 메시지를 가렸습니다.
이 라이브러리 쓰면
모바일에서 가상 개발자도구를 띄울수 있습니다
와!
저희는 이거로 로그 뜬거 봐요
채팅방 관리자가 메시지를 가렸습니다.
좋은 팁 감사합니다!
와 감사합니다!
chrome://inspect/#other 저는 여기서 usb 디버깅 연결해서 console 띄워서 확인하는 것 같아요.
잘못올렸네요. chrome://inspect/#devices
ㅎㅎ좋네용
가상 콘솔창 신박하네요
safari로 모바일 devtools 만지면 크롬이랑 다르게 신선한 기능들이 많더라고요.
허허 이거 버그 빌미로 맥북 사달라고 해야하나
해결 못한척..
aws에서 맥 서버 vm 띄울 수 있는 기능이 이전에 생긴걸로 알고있어요.
저희는 회사 다 윈도우 쓰는데
앗
아이폰 개발한다고 프론트만 맥북써요
ㅋㅋㅋ
ㅋㅋㅋ
aws는 못들은걸로 하겠습니다.
맥북 궈궈..
ㅋㅋ 목적은 맥북이시군요
ㅋㅋㅋㅋㅋ
예전에 ios 앱올릴려고 상상코딩한다음, 친구 맥가서 빌드해서 올렸는데
어쩌다보니 cordova로 구현되있는 회사 앱 ios랑 안드 둘다 관리해야될거같아서 달라고 하면 될거같긴해유..
역시나 문제 있어서 ㅋㅋ 내렸던 기억이 있어요.
ㅎㅎㅎㅎ
상상코딩
아직도 cordova 쓰는곳이 있긴한가보네요. 요즘도 지원을 많이 하나요?
홈페이지만 자체 개발해서 서비스했는데, 이걸 앱으로 만들려다 보니 SI에 외주를 줬나봐요. 소스를 받아서 레포에만 있는데 보니까 cordova더라구요
https://cordova.apache.org/plugins/?platforms=cordova-ios 사이트도 죽은 것 같은데...
xhr err 뜨네요
진짜 죽어가네요;; 호출중에 503도 뜨고;; 플러그인들이 다 사라진건가
고생이 많으시겠네요.
생태계가 죽으면 혼자 삽질하는게 쉽지 않은 것 같아요.
허허..
새로 만들어야될수도 있겠네요
;;;
지금은 사진하나 교체하는데도 몇십만원씩 줘야된다던데
v2 팀을 새로 결성하시죠 ㅎㅎ
혹시 이모션 스타일드 사용하실때 개발자도구에서 props [object object]로 나오는거 해결해보신분 계신가요? 프라그마 써도 그러는군요 렌더링은 문제없이 되긴하는데…
객체를 그냥 문자열로 바꿔버리면
[object object]가되져
렌더링은 됩니다
객체에 들어있는 값을 출력하셔야해용
흠 제가 어딘가 이해를 잘 못하고잇나보네요 화면 그려지는건 문제 없으니 잠시 킵..
말썽쟁이 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 말썽쟁이 네오님~~ 반갑습니다 :)
안녕하세요~! 테오님 반갑습니다 ㅎㅎ
네!! ㅎㅎ 어서오세요 :) 이곳은 프론트엔드나 웹 개발에 대해서 궁금한 것들을 물어보고 아는 것들은 공유하며 함께 성장하고자 하는 곳입니다 ㅎ 편하게 글 남겨주세요
사진
다른 분들은 no code 플랫폼에 대해서 어떻게 생각하시나요?
혹은 사용경험이 특별히 있으신 분들이 있는지 궁금했어요.
개발을 하다보면 노가다성 개발들이 존재하기 마련인데 조금 더 인건비가 싸거나 소통의 비용을 줄이기 위한 방법으로 no code는 충분히 연구될 분야라고 생각합니다. 일반인들이 상상만 하는대로 개발이 된다면 무궁무진한 아이디어들이 나올테니까요. 롤도 워3 유즈맵에서 탄생한거기도 하구요거
다만 no code면 비개발자 패러다임에 맞게 기능이 만들어져야 하는데 결국 개발자 패러다임에 맞는 툴을 GUI로 만들다 보니 비개발자는 허들이 높아 못쓰겠고 개발자들은 IDE 보다는 불편하다보니 이 간극을 잘 메워주는 툴이 중요하다라고 생각합니다.
챗볼빌더 같은 것을 no code라고 해서 만들어봤는데 결국 순서도도 그리고 커스텀한 코드도 짜고 있는 형태가 되더라구요;;
결국에는 개발자가 사용하는 인풋을 그대로 유지한채 별다른 하위호환성없이 비개발자에게 전달하는게 중요한 관건이 되겠네요.
네 그렇지만 비개발자가 쓰는 UI는 비개발자에게 맞게 되면 좋겠는데 학습이 쉬운 중간지점을 도메인에 맞게 제시하는게 중요한것 같아요
예전에 룰베이스 기반의 챗봇을 https://www.rivescript.com/ 스크립트를 UI화 하기 위해 작업했던 적이 있었는데 엄청 노가다적인 측면이 많이 필요하더라고요.
다른 이야기이긴 하지만... 블리자드가 요즘 죽쑤고 있긴하지만 이전에 워3맵에디터를 사용했던 시절에 트리거 라는 개념, 그리고 마우스로 무언가를 제작하는 과정이 정말 재밌었던 것 같아요.
네. 개념과 방식을 정말 잘만들었다고 생각합니다
요즘 이러한 https://builderx.io/ 서비스도 많이 등장하고, 5년 뒤 프론트에 대한 작업 방식이 많이 변경될 것도 같아 다른 분들 의견이 궁금했는데 감사합니다.
5년전만 해도 제이쿼리쓰던 시대였으니..
군대 갔다오니까 망해서 슬펐어요 ㅎㅎ
군대에서도 jquery 책 들고 싸지방에서 열심히 공부했는데...
저런 툴이 유행하면 프론트엔드 개발자는 저런 툴들을 만들고 있겠죠. ㅋㅋ
사회 나오니까 어느 분이 코드가 왜 이렇게 올드하냐고 하시더라고요 ㅎㅎ
프론트엔드 세계에서 2년이면...
그래도 또 금방 따라잡으실겁니다
생각해보면 저도 새내기때
첫 코딩 동아리에서
php랑 html을 배웟었는데
군대갔다오니 뷰랑 앵글러가 살짝 국룰이 되었고
1년 지나니깐 리액트가 짱커졌더라구요
처음엔 저도 전역하고 얼레벌레 정신 못차려서 시간 좀 날렸는데
방향성 일찍 잡으신거 같아서 아마 잘 하실거에요!
네, 상당히 이전 일이라서 요즘은 프레임워크 상관없이 그래도 어느정도 작업하는 것 같아요.
대... 대단하시군요..?
이모티콘
그렇게 한번 잃고나니까... 브라우저 표준이라던가, 언어적인 공부에 더 집중하게 되는 것 같더라고요.
이모티콘
리액트 쓰시는 분들 계시면 편하게 커맨드라인 한줄 복붙으로 리액트앱 빠르게 설치실행가능합니다!
바벨, 웹팩세팅만 돼있는건가요?
네 맞습니다
혹시 타입 정의할때
삭제된 메시지입니다.
이런식으로
정의 할수가 있는건가요?
들으면 좋은 세션들이 많아 공유드려봅니다
예전에 올렸던 데모를 나아아중에라도 작은 라이브러리로 만들지 말지 고민하고 있습니다. <https://codesandbox.io/s/use-async-dispatch-0te9is> 이걸 라이브러리로 만든다면 - 타겟: 복잡하면서 정확해야 하는 비동기 코어 로직 - 타겟 아님: 데이터페칭 (데이터페칭이 독립적인 문제이며 다른 라이브러리로 해결된다는 뜻이지 간단하다는 뜻이 절대 아닙니다) - 약팔이(*): redux-thunk와 비슷한 사용성, 캔슬 가능한 액션, redux-saga와 비슷한 testability - 약팔이: race condition을 유발할 만한 상황을 직접 발생시켜서 테스트해볼 수 있음 - 단점: 비동기 상태 변화를 고려해서 state를 모델링해야 하는 복잡성과 보일러플레이트. 이 될 텐데 이게 과연 수요가 있을까요? 이런 게 필요하신 분들은 어차피 이런 느낌으로 짜셔서 굳이 라이브러리가 필요없지는 않을까 싶은 생각도 들구요 이렇게 뭔가 있는 척을 열심히 했지만 사실은 그저 헬로월드 코딩하다가 딴 생각이 들어서 소설을 한 번 끄적여보았습니다 기본기부터 채우고 다시 돌아보던가 하지 않을까 싶어용 여러분 모두 좋은 하루 되세용 * Redux, redux-thunk, redux-saga 다 눈팅만 해 봐서 제가 지금 하는 말이 완전 헛소리일 수도 있습니다
멋있는 라이브러리 개발자가 되고 싶어서 이런 상상하면서 이런 소설을 쓰나 봅니다
"작은 라이브러리": 라이브러리의 일부 기능을 경량화, 특성화 하는 것은 다른 개발자로 하여금 더 편리함을 느끼거나 고려사항을 줄여주는 등 좋은 일이라고 생각합니다. 예를 들어, Redux-zero와 같은 사례가 있습니다. redux-zero같은 경우는 redux를 경량화 시킨 케이스로 Reducer를 없애고 더 코드를 빠르게 사용할 수 있게하고 러닝 커브를 낮추는 등을 타겟으로 잡았습니다. 참고: https://medium.com/@matheusml/introducing-redux-zero-bea42214c7ee
"비동기 특화" - redux-observable 같은 Rxjs를 사용하기위한 redux 미들웨어도 존재합니다. 여러모로 기존 API Call 취소, 새로 요청 허브님이 구상한 기능들이 포함되어 있어 확인해보면 좋을 것 같아요. 대신 러닝커브가 그만큼 높아졌다는 평이 있습니다. 참고: https://redux-observable.js.org/
저는 개인적으로 미들웨어 개발의 목표 중 하나는 편함이라고 생각합니다. 조금이라도 코드를 덜 쓴다거나, 데코레이터 혹은 제네레이터 문법을 지원한다거나 등 Payload 타입에 error, loading 등을 미리 고착화 시켜 redux의 조금 더 제한을 두어 개발자의 usage를 확실시한다거나 등이 될 것 같아요. 자신이 평소에 불편했던 점을 이렇게 해결하였더니 편하더라 라는 내용을 다른 개발자에게 공유하는 마음이 좋은 것 같아요.
헐 감동이에요ㅠㅠ 초심자의 글에 대해서 이렇게 인사이트 넘치는 댓글 달아주셔서 너무너무 감사드립니다ㅠㅠ (하트) 달아주신 글은 두고두고 곱씹어보도록 하겠습니다!!
곰님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
카카오톡에서 외부 url 링크를 누르면 카카오톡 안에서 브라우저가 뜨는데, 이걸 뭐라고 부르나요..? 웹뷰? 인앱뷰?
보통 inappbrowser 라고 부르는 것 같아요.
인앱브라우저!
오호..! 감사합니다!!
안녕하세요 곰님~ 반갑습니다 :)
사진
11기 스프린트 후기를 작성해주셔서 공유해봅니다 :) https://velog.io/@jayjay8/%ED%85%8C%EC%98%A4%EC%9D%98-%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-11%EA%B8%B0-%ED%9B%84%EA%B8%B0 tmi가 가득한 후기글을 작성해보았습니다. 스프린트 기간동안 너무너무 행복하고 감사한 시간이었습니다! 스프린트를 열어주신 테오와 참여해서 멋진 프로젝트 보여주신 분들 모두 감사합니다!
IOS 기기 inAppBrowser 에서 a tag download 속성이 먹히지 않는거같네요.. 이미지를 다운로드하는 기능을 만들어 보신분이 계실까요 ??
하루 영수증 아이디어도 멋지고 구현도 예쁘게 됐네요😄 회고를 읽으니 참여하신분들의 열정도 멋지고 저도 참여할걸 그랬다는 아쉬운 마음도 드네요. 다음번엔 시간을 꼭 잘 내서 참여해보소 싶네용
썸넬부터 조아요,,
혹시 이모션으로 스타일 적용해보신 경험중 스타일드 컴포넌트와 비교했을때 좋았던 경험이 있으시면 공유해주실수있을까요!
theme도 유용한지도 궁금해요.!!
혹시 jsp에서 일부 유저에게만 css가 일부 누락돼서 받아지는 이슈에 대해 아시는분 계신가요
이게 서버에서 css받는 과정에 누락되는 이슈인건지요
프론트엔드 개발자로 일하고있는 분들, 명함에 포지션(영문) 이 뭐라고 되어있으신가요? 첫회사라 다들 어떻게하시는지 궁금하네요 ㅎㅎㅎ
명함은 없지만 만약 있다면 Web Front-end developer일 것 같아요 ㅎㅎ
로컬 - 개발 - 운영 --> 개발 - 운영 // 혹시 테스트서버로 바로 개발하시는 회사가 있나요?
그러면 develop branch에 코드리뷰 없이 바로 붙히나요
넹 코드리뷰 없습니당..
제이드님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 울고있는 제이지님!! 반갑습니다 :)
저희는 디벨롭에 배포안하면 테스트가 안돼서 디벨롭에는 자유롭게 머지하고
디벨롭에서 운영으로 머지는 안하고 다시 각 브랜치에서 운영으로 리뷰하고 머지하긴해요
두 분이서 일할 때 이렇게 일했다가 인원 많아지면서 변경됐어요!
저희는 qa 해주시는분이 개발서버에서 테스트하시고 완료되면 프로덕트로 올려요
크......qa 너무 부럽네요
저희 회사 명함에는 직군이 없네요 호
CSS-in-JS관련 궁금한게 있어 질문합니다. CSS-in-JS 코드를 분리해서 컴포넌트 파일과 다른 파일로 관리해도 상관 없나요?? styled-components를 배울때 CSS-in-JS의 장점중 하나가 컴포넌트 내에 CSS코드를 작성할 수 있어 파일을 따로 생성하지 않아 관리하는데 편리하다고 배웠습니다. 그 장점을 CSS-in-JS는 컴포넌트 내에 작성해야 취지에 맞고 파일로 분리하면 장점을 잃는다는 생각이 들어 항상 컴포넌트와 같이 작성해왔어요. 근데 CSS코드가 많아지니깐 코드가 너무 지저분해지고 컴포넌트파일에서 컴포넌트코드를 찾는데 시간이 오래걸리니 이게 맞나 싶더라구요. 그래서 CSS-in-JS 장점을 더 찾아보고 알아보니 컴포넌트와 CSS-in-JS 파일을 분리해도 CSS-in-JS의 다른 장점들은 사용할 수 있을것 같은데 아직 확신이 들지 않아 질문해봅니다.
별도의 js 파일로 css property object를 작성하여 사용하기도 합니다
개인적으로 상관 없고 코드 컨벤션만 맞추면 된다고 생각 합니다. 선택의 여부죠!
저도 요즘 같은 고민 하고 있습니다. 코드량이 너무 많아지니까, 한 파일에서 컴포넌트의 스타일링까지 관리한다는게 좋은건가..? 싶기도 하더라구요. 아직까지는 그래도 장점이 더 크다고 생각해서 저는 한 파일에서 관리하고 있긴 한데, 분리해서 쓰시는 분들도 많아서 개취의 영역이 아닌가 싶습니다
팀 컨벤션마다 다를 것 같아요. 저희 팀은 오히려 컴포넌트와 스타일 파일을 분리하는 편이 가독성이 좋다고 여기거든요! 그래서 CSS를 단 하나만 선언하더라도 파일을 반드시 분리하고요.
저는 스타일은 맨밑에 선언하니까 괜찮더라구요 컴포ㅂ넌트 부터 나오게
tailwindcss 사용안해보셨다면 추천드립니다
개인적으로는 파일을 분리하는 편이 "컴포넌트의 역할에 집중"할 수 있다고 생각해서 이 편을 선호하고 있습니당!
추천 감사합니다! 테일윈드나 부트스트랩 다 사용은 해봤는데, 저 개인적으로는 단점이 더 크게 다가와서.. 선호하는 스타일링 방식은 아니었어요ㅠㅠ
어떤 단점이 제일 크게 느껴지셨나요? +_+ 궁금합니다!( tailwind 좋은데 왜 그러시죠? 그런 의도아닙니다. 순수 호기심입니다!)
저희도 컴포넌트 내부 맨밑에 스타일 선언해ㅇ요 ㅋㅋ
컨벤션의 문제라는 것에는 동의하고요 저 같은 경우 파일이 쪼개져 있으면 파일 구조 변경이나 이름수정등의 리팩토링을 할때 불편해져서 html+css는 하나로 구성하되 컴포넌트를 더 잘게 쪼개는 식의 방식을 택하고 있습니다.
컴포넌트 파일이 길어질까의 걱정은 스타일코드 문제가 때문이 아니였어요 주로..
앗! 우선.. 1. 클래스명으로 스타일링을 지정하다보니, 스타일링이랑 html 마크업이 섞이는게 오히려 가독성을 해친다고 생각했어요. 2. 그리고 저는 제가 직접 CSS 코드를 치면서 다양하게 만드는걸 좋아하다보니, 테일윈드를 사용하면 정해진 틀 안에서만 스타일링 해야 한다는게 아쉬웠습니다.
컴포넌트 자체가 길어지는거는 컴포넌트가 뭔가 분리가 안되었다는 증거가 될때가 있더라구요..
svelte에서도 script -> markup -> style 순서를 권장하고 있어서 그렇게 쓰고 있어요
다들 답변 감사합니다~ 오래 고민했던 문제가 어느정도 해결 됐네요~~
말씀 감사합니다! css-in-js를 잘 활용하려면 결국 컴포넌트화 하는 걸 더 잘해야겠네요😇
감사합니다. tailwindCSS장점은 유지하고 단점은 개선한 AdorableCSS를 만들었고 쓰고 있는데 다른 사람들이 생각하는 tailwind 장단점? 호불호? 영역이 궁금했어요 ㅎ
요새 tailwindcss 처음 도입해서 쓰는데 엄청 편리하던데 아직 첨이라 그런가 ㅎ
혹시 jsp ssr환경에서 모바일 네트워크 환경이 나쁜 상태에서 접속하면 css파일이 로딩이 다 안된 상태에서 캐시로 남기도 하나요?
정해진틀안에서만 스타일링 한다는게 구체적으로 어떤건가요? 커스터마이징 가능하지않나료
저도 테잏윈드 넘 편해서
애용합니다 ㅋㅋ
미디어쿼리도 넘 편행
w-2 -> width: 0.5rem / 8px 이런 부분들인것 같아요. 최초에 tailwind는 4px grid로 설계가 되어있다보니 이제는 w-[32px] 이런식으로 커스텀으로 쓸 수 있지만 미묘한 불편감이 있었어요. ㅎ
컬러들도 그렇고 tailwind에서 만들수 있게 해주는 디자인과 원하는 디자인을 만들어야 하는 경우에는 저런 preset들과 자유도간에 간섭이 생기고 그 부분은 저도 자유도가 높은 작업을 해야하다보니 제일 크게 느꼈던 단점이었거든요
최근 알약 때문에 난리네요,,, 피해없으시길…!
사진
웃프군요
이부분 혹시 아시는분 계실까요..
맞아요 tailwind의 컨셉은 편하고 좋다고 생각합니다. ㅎ
든든한 망분리환경에선
머나먼 이야기네요
방장님 블로그에 css framework 개발이야기를 보니까 css 흐름이 보이네요. 오래하시면서 느낀점이 많으신듯..bb
감사합니다 :) js보다 css를 더 많이 했던 시절도 있어서서 css는 관심이 참 많아요. ㅎ
네 맞습니다. 제가 말씀 드린 정해진 틀이란게 이런 부분 이었습니다!
사실 tailwind 저런부분을 설정에서 싹다 갈아엎을수 있긴하지만… 그것조차도 불편할때가 있죠 ㅎㅎ 처음부터 디자이너랑 얘기해서 맞춰서 작업하면 좋아요
그래도 가장 큰 단점은 일반적으로 동적클래스 할당을 하면 적용이 안된다는점인것같아요… 이거해결할려고 무수한 삽질을...
헛 동적 클래스 적용이 안돼나요??
뷰에선 쓰고있는거 같은데 .. 아직 정확히 몰라 말을못하겠네요 ㅋㅋㅋ
aran님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
https://tailwindcomponents.com/ tailwind의 가장 큰 장점은 디자인을 못해도 별다른 작업없이 가져다 쓰기 쉽다 라고 생각했어요.
https://github.com/aniftyco/awesome-tailwindcss awesome 업데이트도 지속적으로 이루어지고 있어서 확실히 사람이 힘이다? 라고 생각이 들더라고요.
위 중에서는 daisy, kutty가 제일 좋았습니다.
우와..공유 감사드립니다 튜브님!
aran님 반갑습니다 어서오세요 :)
좋은 자료 감사합니다!!
저는 https://www.hyperui.dev/ 여기 자주 사용했었는데 저런 곳도 있었군요.
tailwindcss 컨셉이 간단해서 그런지 생태계 업데이트가 빨라서 그 부분에 사람들이 매료되는 것 같아요.
어우 잘주워갑니다
단점으로는 tawilindcss plugin에 대한 캡슐화가 제가 찾았을때는 없는게 조금 아쉽긴 했던 것 같아요.
전역적으로 클래스가 지정되어 더럽혀진 느낌이라서 ㅋㅋ
혹시 이부분 아시는 분은 공유해주시면 감사하겠습니다!
https://v2.tailwindcss.com/docs/just-in-time-mode 추가 내용으로 tailwind 2.1부터 사용되어진 css 부분만 삽입되게 업데이트 된건 최적화 측면에서 혁신이라 인상 깊게 다가왔어요.
이메일아이디 : 토큰 => 로그인 성공 이메일아이디 : 비밀번호 => 로그인 성공 유저네임 : 비밀번호 => 로그인 성공 유저네임 : 토큰 => 로그인 실패 현재 깃허브 로그인시 해당문제를 겪고있는데 해결방법 아시는분 계신가요?
자문자답입니다. 토큰 새로 발급받으니 해결이되었는데… 왜 해당문제가 발생했는지 원인은 모르겠네요. 토큰의 만료기간은 없었고, 오늘 갑자기 재인증 요구가 뜨더니 해당 문제가 발생했어요.
곰곰히 생각해봅시다
토큰 세션 만료? 아니면 토큰 DB 만료 시간이 다되서 배치잡이 만료 처리..?
엿장수(깃헙) 맘대로일 수도 있을거같아염
눈빛 애교 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
눈빛 애교 어피치님이 나갔습니다.
혹시 네이버나 구글에 회사의 구버전 앱이 검색되고 있는데 이런걸 내려보신 경험이 있으신 분 계실까요…? 그리고 추가로 네이버에서 애플 앱스토어 앱은 검색이 안되는데 이런 경험 해보신 분 있으신가요....?
https://www.ascentkorea.com/what-is-robots-txt-sitemap-xml/ 참고해보시겠어요?
sitemap이나 robots 으로 앱스토어 앱도 설정해야 하는 거였나요!?
구글 플레이스토어 앱이나 애플 앱스토어 앱은 자체적으로 해주는 줄 알았는디,,, 좀 봐야겠네요
가윰님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
가윰님이 나갔습니다.
가윰님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
없음님이 나갔습니다.
인풋 창 터치 시 키보드가 올라오면서 화면을 가려 인풋 창에 무엇을 입력하는지 알 수가 없습니다. 기종은 안드로이고 브라우저는 크롬입니다! 검색해보니 리액트 네이티브 결과들만 보이길래 헤메는 중입니다. 혹시 저와 같은 문제 겪으신 적 있는 분들 계실까요?
해결하고자 하시는 방향에 따라서 다른 방식으로 조언들을 해주실 수 있을 것 같습니다
안드로이드같은 경우엔 키보드가 올라간만큼 vh가 좁아져서 스크롤을 내리면 인풋값을 볼수있는데
아이폰은 인풋에 화면이 확대되지않나요
뷰포트에서 스케일 조정을 건드렸다면 확대가 안 될 것 같아요
근데 기종이 안드로이드라고 하셨으니
제가 사용자라면 자연스럽게 스크롤을 내려보지않을깡6
까요
눈물바다에 빠진 라이언님이 나갔습니다.
전체적으로 overflow: hidden이 적용되어 있어 스크롤이 안 됩니다ㅠㅠ 그래서 일단 제 생각으로는 키보드 높이만큼 상위로 화면을 올리고 싶습니다만...! 안드로이드만 화면을 올려야 할텐데 그게 구분이 가능한가요??
form이 있는 부분만 잘라서 스크롤을 만들어듀면 되지않을까요
css쫌만 만지면 해결될거같은데
원하시는게 이게 맞을지 모르겠네요
여기에 최소수량 아래로 못내려가게 막을수있을까요>?
사진
리액트 앱에서요.. 왜 대부분의 state를 각 컴포넌트가 아니라 최상단 컴포넌트.. 즉 App 컴포넌트에서 관리한다음 props로 내려주나요?
상태관리 라이브러리 사용해서 관리를 안할까요?
네 상태관리 라이브러리 없을때요
각 컴포넌트에서 관리해서 문제가 없으면 아래에 내려서 관리하는게 맞죠
그걸 props drilling 이라고 칭하고 지양하는게 일반적이에요
리액트 공식문서 상태 끌어올리기 챕터? 읽어보시면 이해가실거 같아요
상태관리 라이브러리가없을때에는 context api 를 사용하죠
짜다보면 다른데서도 같은 상태가 필요해지기 때문에 점점 위로 상태가 올라가는것일거에요
우쭈쭈님이 말씀하신 문서에요
이모티콘
음 그러면 책에 나와있는 예제들은.. 이미 앱이 완성된 이후에 다시 탑다운으로 보여주다보니까 끌어올리고 난 후의 코드를 미리 작성하게 되는건가요?
전역상태관리 라이브러리 없이 사용하때에는 앱 전체에서 사용해야하는 상태라면 최상위 컴포넌트에서 뿌려줄수 밖에없죠 하단 컴포넌트 내부에서만 사용된다면 해당컴포넌트 내부에서만 사용하는게 베스트고요
아 감사합니다. 이해 했습니다!!
저 정규식 질문이 있습니다...
/^[+]?\d*(\.?\d*)?$/ 를 사용해서 숫자양수 + 소숫점만 입력 가능하도록 만들었는데
0123 같이 0으로 시작하는 숫자도 통과가 되어서요... 맨앞에 0은 허용하지만 0.1234같은 소숫점은 되는 정규식으로 혹시 어떻게 수정할수 있을까요...?
아 맨앞에 0은 허용안하지만 0.1234같은 소숫점은 허용되게요..!
0보다 크면 해당 문제는 해결되는거 아닐까요?
그냥 부등호 사용해서 조건 검사하는것으로요?! 그러면 +/- 기호 입력이 가능하게 되더라구요..!
사진
/^([1-9]+[0-9]*\.?|0\.)[0-9]+$/ 이거면 될까요?
테스트를 빡빡하게 안해봐서 빵구나는 곳 있으면 알려주세요 ㅎ
헐 감사합니다!!! 테스트 해보겠습니다!!
역시 대장님
const calcRem = (px: number) => Number((px / 16).toFixed(2));
px을 rem 소수 최대 둘째짜리까지 변환하는 함수를 짜보았는데 잘 작동할까요..?
코드 자체에는 딱히 문제없어 보입니다 16은 고정인거죠?
넵넵 저기만 변경할 예정입니다
감사합니다 !
사진
앗 대장님... 한자리일때 잘 안되는것 같습니다...
대장님 🤣
먹보 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
/^([1-9]+[0-9]*|0)(\.[0-9]+)?$/
한번 바꿔봤어요~ 제일 기본인 한자리수는 테스트도 안했네요 ㅎ
안녕하세요 부탁하는 네오님 반갑습니다
안녕하세요! 고수님들 여쭙고싶은게 있어서 잠시 들렸습니다!
네~ 환영합니다~ 어떤게 궁금한가요?
display를 relative로 줬는데 부모의 height값에 영향을 안 줄 수 있는 방법이 있을까요??
사진
사진
table 태그인데 ul태그를 숨겨놓고
검색 시 li를 넣고 display를 보여줬어요
ul은 relative 입니다
감사합니다!!
셀렉트에 portal 을 적용해보면 어떨까요?
오 portal은 처음 들어서 찾아보겠습니다!
https://react-select.com/advanced#portaling 이거 참고해보세요!
react라면 input에 ref 속성을 주고 해당 드롭다운에 absolute를 줘서 포지션을 설정 해주는건 어떨까요~?
아 그냥 js입니다 ㅠㅠ
relative에 height를 0으로 하고 overflow:viisble로 한 다음에 내부 엘리먼트를 absolute로 주면 어떨까요?
li들이 아예 안 보입니다 ㅠㅠ
참고할 수 있는 코드가 있나요?
사진
이게 ul태그이고
사진
이게 li태그입니다
어떤걸 추가로 보여드리면 되나요??
전체는 공유가 안되나요? 풀코드가 좋고 코드가 아니어도 좋고 결과를 개발자도구로 볼 수 있으면 좋겠네요.
https://codepen.io/pen/ 이런데 간단히 올려주셔도 됩니다
방향성이나 키워드를 물어보는 질문이면 코드가 없어도 상관이 없는데 내 문제 해결을 필요로 하는 거면 개발자도구 없이 알려드리기가 참 어렵네요
사진
방장님 기초적인 질문이긴한데 정적메쏘드는 어떨때 사용하는 게 활용가치가 더 좋나요? function으로 만들어서 사용하는거랑 정적메쏘드로 만들어서 사용하는 걸 어떨때 어떤 방법을 사용하면 좋을지 고민하다가 여쭤봅니다.
사진
이렇게 보여드려도 괜찮을까요?
클래스의 정적메소드를 쓴다고 하면 클래스와 관련성이 높기 때문일 겁니다. 자바스크립트에서 생각해보면 Array.isArray() 라던가 Array.from() 등을 떠 올려보시면 좋겠네요 해당 객체를 인자로 받는 함수거나 해당 객체를 생성해주는 함수들 처럼 해당 객체를 다루는 형식의 메소드들은 정적메소드로 가면 좋습니다 클래스 메소드의 경우 트리세이킹이 안되기 때문에 번들 크기가 크다면 편의성을 포기하고 그냥 함수형태로 제공을 하는 편이긴 합니다 간단한 유틸성 클래스라면 정적메소드가 해당 객체를 사용하기 위한 DX를 높이기 훨씬 좋은 선택인것 같아요
감사합니다. 객체 자체를 바인딩해서 함수로 넘겨주는 것과 정적메소드로 만드는게 구현상에는 다르지 않은데 클래스로 하는게 function으로 구현하는 것보다 시맨틱적인 코딩이 안되는 것 같아 고민하고 있었습니다ㅠㅠ
안녕하세요! 제가 레퍼런스체크라는걸 한번도 당해본(?) 적이 없는데, 면접 보러 간 회사에서 레퍼런스 체크를 할거라고 서명을 받아갔는데 제가 이전 직장명을 이력서에 적었지만 특정 직원의 이름이나 연락처는 적은 적이 없는데요, 이럴 경우 어떤식으로 레퍼런스 체크가 진행되나요? 회사에 전화해서 관련 부서에 연결해서 질문을 하는건가요?! 아예 감이 안와서 아시는 선배님들 있으시면 답변해주시면 감사드리겠습니다 ㅎㅎ
한다해놓고 안하더라고요 ㅋㅋ
아는 지인있는 경우에만 확인하는 걸로 알고 있습니다. 크게 걱정안하셔도..ㅎㅎ
객체의 활용법을 누구에게 알려줘야 하는 게 재사용성이 높은 객체인지 아니면 1~2회성의 비즈니스 로직인지 한번 생각해보고 DX가 높은쪽을 선택해보세요 말씀하신대로 구현상 다를 것도 없기 때문에 사용입장에서 정적메소드의 장점은 일단 자동완성에 있는데 그 메소드들이 자주 쓰이지 않는 거라면 굳이? 이정도의 느낌인거 같네요. 목적에 따라 잘 선택해보시면 좋을 것 같아요 ㅎ
감사합니다. 대장님의 고견이 궁금했어요. 초짜가 생각하기에는 저정도밖에 생각이 안되었는데 답변듣고 좀 더 고민해보고 작성해봐야겠습니다.
ㅠㅠ 이러면 코드를 수정을 해보고 확인을 해서 전달을 하기 힘들긴 하죠ㅎ #suggest가 보였다 사라졌다 해야 하는데 relative는 부모의 크기에 영향을 주는 방식이기에 고민인 것이겠죠. #suggest를 absolute를 해야 부모의 크기에 영향을 주지 않아요. absolute로 배치를 그 위치에 두려면 relative한 객체가 필요하니 #suggest상위에 relative인 엘리먼트를 만들어서 그안에 absolute한 #suggest를 넣으라는 애기였어요. 이렇게 하면 width값이 안 맞을거라서 width:100% 등이 추가되어야 할지도 모르곘네요. 코드 설명 핑퐁이 채팅으로만 길어지면 좀 힘들어서 아까 말씀 드렸던 코드를 공유하는 사이트등을 이용하면 조금 더 나을 것 같네요 한번 시도 해보시기바랍니다
감사합니다! 시도 해보겠습니다!
감사합니다. 너무 말을 높여주시지 않으셔도 됩니다. 테오라고 불러주시고 님도 붙이지 않으셔도 됩니다. 고견이라고 하지 않아도 좋아요. 편하게 테오 생각은 어떤지 궁금했어요~ 이렇게 말해주세요. ㅎ
넵!! 알겠습니다 ㅎㅎ
리액트에서 카카오 지도를 사용해서 여러 기능들을 만들어보고 있습니다. 단순 함수와 class로 기능들을 구현하고 있는데 이게 리액트에 맞는 방법인지 고민이 많이 되네요. 카카오 지도는 결국 하나의 객체이기에, 지도관련 동작에서 state가 변해야하는 일은 없어서서 커스텀 후크를 만드는 방향은 아닌거 같기도 하고,
키야.. 선생님 한번에 해결됐습니다 부모에 relative주고 ul에 absolute 줘서 해결했습니다 감사합니다! 복 많이 받으십쇼!!ㅎㅎ
안녕하세요..! 혹시 웹뷰 세로 스크롤 영역 height가 좁아서 세로 스크롤 시도 시 종종 위아래로 움직이는데 혹시 이런 문제 해결해 보신 분 있을까요😅
scroll bar width를 커스텀 하는 건 어떤가요?
곰님이 나갔습니다.
사진
레퍼런스를 위해 요긱이라는 앱에서 사진.가져왔습니다..!
엇 조금 더 자세히 말씀해주실 수 있을까요..!
useState 인자에 함수를 사용하는 경우가 빈번한가요?
올려주신 레퍼런스 부분은 가로 스크롤 형태의 ui 같은데, 맞나요?
제가 이해를 잘못했나 해서요
앗..잘못 말했습니다
가로스크롤입니다..!
사진
안녕하세요.. 타입스크립트 고수님들의 도움을 구합니다 ㅠㅠ!! 도와주세요..😭😭 오늘 하루종일 붙잡았는데 구하지 못했어요😭😭😭 위 사진에서 test에 제네릭을 동작시키고 싶습니다. 뭔가 가능할것 같은데, 이거 타입스크립트로는 불가능할까요..?
가로스크롤만 원하시는걸까요? overflow: auto 로 하셨다면 overflow-x:로 가로축만 스크롤 하시는방법이
안녕하세요.저도 뭐 좀 물어보고싶은데 toast ui 에디터 설치하고 이런 에러가 쓰는데 왜 뜨는지 아시는 분 있을까요..?어떻게 해야할지 구글링해도 안 나오는거 같아서요ㅠ
사진
먹보 네오님이 나갔습니다.
이병현님이 나갔습니다.
네 맞습니다..! 해당 영역만 overflow-y : hidden 주시라는 말씀이실까요?_?
질문드려요! 항상 화면 아래쪽에 고정되어야하는 버튼을 fixed 로 배치했는데요, 버튼의 width를 특정 컴포넌트(반응형)와 동일하게 설정해주고싶어요. 이때 어떻게 설정해야할까요? useRef와 offsetWidth를 사용해서 width를 가져와서 styled components의 props로 넘겨줫는데 제대로 적용이 안되더라구요 ㅠㅠ 혹시 다른 방법이 있거나 제가 잘못생각한 부분이 있을까요? 혹시 offsetWidth로 컴포넌트의 width를 가져오기전에 버튼이 렌더링되어버려서 그런게 아닌가 하는 생각도 들고...ㅠㅠㅠ
아뇽 overflow:auto 대신에 overflow-x:auto; 로 바꾸심 될듯요
현재 속성상태를 몰라서 정확하진않네요
한번 도전해보겠습니다! 조언 감사합니다🙇♂️
여러분
프론트 배포 파일은
콘솔로그 다 빼고 보내나요??
프로덕에 올라가는건.. 특별히 필요 있는거 아닌 이상.. 빼야 정상이긴 할거 같은데요...
굳이? 안뺴고 올릴 이유가 ..?
역으로 질문하면 왜 안뺴나요
혹시나 하고 여쭤봤어요
Npm run build를 통해 file build하면 빌드 파일에 주석도 빠지나요??
주석을 빼고 npm 런 빌드를 진행해야 될지 모르겠네여
플러그인으로 빌드 시에 주석 없애기도 하지 않나요
네이버지도 api로 마커누르면 정보창 나오게 하는 기능을 구현하고 있는데 질문이 생겨서 남겨요! 도와주세요ㅠ 예시코드는 제이쿼리로 되어 있어서 이렇게 태그를 스트링형태로 넣어서 입력하라는데 .. 저는 리액트+스타일드 컴포넌트를 사용하고 있어서 contentString부분에 컴포넌트를 넣어야할거 같은데 어떻게 해야할까요?ㅠㅠ
사진
안녕하세요 , 웹뷰 디버깅관련해서 하나여쭤보고싶어요 ! 혹시 크롬 개발자 도구 콘솔로 관련 로직을 디버깅하는 방법이 있을까요? 아니면 웹뷰를 디버깅 하는 방법좀 알 수 있을까요? 해당부분 답주시면 정말 감사할것같습니다ㅠ
https://stackoverflow.com/questions/29586411/react-js-is-it-possible-to-convert-a-react-component-to-html-doms react component to html 로 검색해봤습니다
안녕하세요. next.js를 사용해서 프로젝트를 진행하고 있습니다. 요구 사항 중 404 페이지를 로그인 / 비로그인 상태에 따라서 다르게 보여줘야 하는 부분이 있는데 next.js에서 404 페이지는 빌드 시 정적으로 생성되고 이후에는 쿠키나 다른 값에 접근하지 못하는 거로 알고있습니다. 혹시 404 페이지에서 로그인과 비로그인을 구분할 수 있는 방법이 있을까요?
선생님들 깃헙 잘 다루고 싶은데 혹시 추천하는 책 있으신가요? 각잡고 해보고싶네오 ㅠ
커스텀 할 수 있눈데 공식문서 보시면 있슺니다!
항상 감사드려요~!
답변 감사합니다. 현재 Custom 404 페이지를 만들어둔 상태이고 문제는 로그인 사용자와 비로그인 사용자가 보는 404 페이지의 디자인이 달라서 분리를 해줘야 하는 데 방법을 찾기가 어렵네요,,
암
안녕하세요 ~ 리액트로 개발을 하면서 재사용 컴포넌트의 필요성을 새삼 느끼고 있어서 리팩토링을 하려고 하는데 관련된 좋은 자료가(문서, 강의 등) 있다면 공유 받을 수 있을까요!? :)
유우명한 책이 있죠
리액트에 특화되진 않았지만요
리팩터링 2판인가요 ㅋㅋㅋ
404를 static으로 하지 않고, getInitialProps에서 req의 cookie 정보를 사용하면 안되나요?
울고있는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
자바스크립트는 이 코드가 브라우저에서 실행되는지 nodejs에서 실행되는지 구별해야 해서 헷갈리는거같습니다 😵💫
브라우저가 아니면 노드 아닌가욤
spring과 react로 프로젝트 진행중인데, 로그인 하면 spring에서 쿠키를 설정해주는데 로컬에서는 잘 작동했었는데 배포나 모바일(같은 와이파이)로 접속하면 쿠키저장이 잘 안되는 현상이 있는데 혹시 해답을 아시는 분이 계실까요..? cookie는 secure, httponly, sameSite=None 설정이 되어있는 상태입니다
환경별 빌트인 객체 구별이 어려우신걸까요 ㅎㅎ
안녕하세요!! 깃헙에 api key업로드 하면 안된다고 해서 config 파일에 api key를 따로 두고 config파일은 ignore해두었습니다 깃헙에는 올리지 않았구요 그럼 깃헙 페이지로 배포하면 당연히 안되는 것이겠죠?? ㅜㅜ 그렇다면 api key를 숨기고 배포는 어떻게 해야하나요??
서버를 사용 하셔야 하겠습니다
github action과 secret을 사용하는 건 어떨까요?
.env 파일 사용도 괜찮을듯해요
어떤거 관련 api키인가요?
사진
안녕하세요 질문드립니다… 부트스트랩 드롭다운이 셀렉트가 안되네요 ㅜㅜ
사실 서버 아니면 완벽하게 숨길 수는 없을텐데요 ㅋㅋ
날씨 api입니다
서버 쓰셔야할거같아용
날씨 api key를 감추실련느거죠?
api key라면 서버 쓰시는게 맞을듯해요
https://www.udemy.com/course/best-git-github/ 책은 아니지만 저는 이 강의로 재밌게 공부했었어요 지금 12000원에 판매 중이니까 어지간한 책보다도 싸겠네요 ㅎㅎ
클라에서 직접 날씨 불러오면 네트워크탭에 api 노출 될거에요..?
그나마 next js 이용해서 클라서버에서 날씨 요청하고 결과만 브라우저에 내려주면 될지도??
nextjs라면 말씀하신 방법에 동의합니다
1. 배포하는 환경에 미리 env파일을 만들어둔다 2. action 이나 jenkins 등을 이용하면서 배포할때 생성하도록 한다
제가 초보고 정말 작은 개인프로젝트를 하는 수준이어서요 좀 어렵네요ㅠ 한 번 찾아보겠습니다 답변 주신 분들 감사드립니다~~
화이팅!! 저도 딱 그 문제로 찾아봤던 경험이있었어요 ㅋㅋ 마침 또 날씨 api..
Mysql에서 select ... for update 명령어는 undo를 lock 하지 않는다는데 이유가 있나요 ??
답변 감사합니다. 404와 500 이렇게 상태 코드마다 페이지를 따로 만들지 않고 _error.tsx에서 getInitialProps를 사용해서 처리하는 방식으로 수정했습니다. 감사합니다~
heroku 지원
11월부로 무료플랜이 끝나는군요
이런이럼
혹시 styled-components 사용하시는분 계신가요??
많을거에용
다른 분과 얘기하다가 궁금한게 생겨서 styled-components를 사용하시는데 style관련 코드를 따로 빼서 export 하는 형식으로 사용하시더라구요
이게 css in js의 의도와 맞는것인지,,
코드컨벤션 차이라고 생각합니당
따로 뺀 코드도 결국에는 js 아닌가용 ??
취향차이 아닐까요
아마 말씀하시는 의도는 따로 분리해서 작성한다면 css 파일로 만들어 import하는 것과 다를것이 없어보이는? 그런의도로 말씀하신듯 보입니다!
앗 네 맞습니다!
저도 그런 생각을 했는데 CSS in JS 의 목적성은 코드를 분리하는것과는 조금 다른것 같아보였습니다..! 공부중에 있지만요.. ㅠ
Styled components가 Css in component가 아니니깐, 저도 컨벤견의 차이라고 생각합니다 !!
아 저는 컴포넌트 기반이기도 하고? 같은 파일에 작성하면 컴포넌트의 스타일을 바로 확인 할 수 있다는 생각이 들어서,,
항상 같이 써왔는데 또 다른 분 얘기 들어보니 맞는말 같아서 여쭤봤습니다!
컴포넌트.tsx 컴포넌트.style.ts 로 정의하면 질문자님 의도와 비슷하지 않을까요?
그렇게 생각할 수도 있겠네요 !
정답은 없는 느낌이군요,,
저는 같은 파일에 작성하면 한 파일에 코드가 길어져서 불편했던 적이 있어서 따로 분리 하는 편입니다. 컨벤션 차이가 맞을것 같아요
저도 그렇게 생각했었는데 취향차이인거같아요 또 막상 한곳에 쓰는데 너무 길어진다면 가독성이 떨어지는면도 있어서.. 그렇다고 짧은 코드에 매번 분리하는거도 비효율적인거같고
스타일이랑 컴포넌트 역할을 분리하려고 쓸 수도 있다라고 생각해서 컨벤션 차이라고 생각이되긴합니당
저는 Css in js와 css의 가장 큰 차이가.. scope 라고 생각해요..css로 의도치 않게 클래스명이 중복이 되고 스타일이 겹치면 난감...
대신 rendering 할때.. 그만큼 패널티도 감수해야죠
rendering에 패널티가 어떤것이 있을까요?
아까도 같은 맥락으로 저희 방에서 한번 얘기를 나눴는데 팀 컨벤션 인것 같아요. 개인적으로는 한 파일에 있는 것을 선호합니다. 파일이 분리되면 리팩토링을 할때에도 불편하고 디자인 수정을 하려면 그 파일을 벗어나지 않아야 한다 라는 점이 생각하기 편하게 도와주는 것 같아요.
예를들면 코드 수 20줄 제한두고 넘어간다면 분리하고 짧아진다면 그냥 한곳에두고 이런것도 괜찮을까요? 이렇게 사용해본적은 없어서ㅎㅎ
——BEGIN CERTIFICATE—— …. 토큰 ——END CERTIFICATE—— 와 같은 토큰을 환경변수에 넣으면 아래 같은 에러가 나는데 해결할 수 있는 방법 아시는 분 계실까요? : line 0: export: `KEY——': not a valid identifier
Css는 import가 되어서 브라우저에서 로딩이 끝나있는데. 리액트 등에서. js로 스타일을 구현하면 동적으로 불러와지니까여..
오,, 그부분은 생각하지 못했던 부분인데 감사합니다!
아까 나왔던 주제같은데 여기서부터일거에요ㅋㅋ
삭제된 메시지입니다.
@두구둥둥 @정호영 늦었지만 답변 감사드립니다!!ㅎㅎ
사진
사진
혹시 이 부분 타입 지정이 좀 어려운데 any 타입을 해결할 방법을 아시는 분이 계실까요~??
헉ㅠㅠ
AxiosRequestConfig라는게 있었네용
호준님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
호준님~ 안녕하세요! 반갑습니다
오 감사합니다!!
좌절하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 추천해주셔서 들어왔어요 반갑습니당(beams)
혹시 인프런 javascript 기초 강의 추천해주실거 있으신가요?
프론트님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!
환영합니다~ 이곳은 프론트엔드나 웹 개발에 대해서 궁금한 것들을 물어보고 아는 것은 답해주고 또 공유하면서 함께 성장하고자 하는 공간입니다 편하게 글 남겨주세요 ㅎ 잘 부탁드립니다
안녕하세요!! 프론트님~ 반갑습니다 :)
사진
로컬에서는 문제가 없는데 github action에서 test 돌아갈때만 문제가 생깁니다. 원인을 잘 모르겠어서 그러는데 혹시 아시는 분 계실까요?
사진
이 문구 해보셨나용?
사진
버튼 모양을 이런식으로 제작하고 싶은데 뭐라고 구글링 해야 정보를 얻을 수 있을까요? 검색해봐도 내부 효과 같은건 나오는데 이런 형태로 만드는 법은 못찾겠어서요.
이런건가요
오호 네 맞아요! 감사합니다 🥹
여러분은 같이 일하고 싶은 동료가 어떤 사람인가요? 같이 일하고싶은 사람이 되고싶어서 부족하면 고쳐보고싶어서요!!
잘생긴 사람이요!!
저는 대화가 잘 통하는 사람이요 개발적인 이야기든 그냥 사적인 이야기든 대화하면 편한 사람?
장난이구 부정적이지 않은사람이영
슬퍼요에 슬퍼요를 달고싶군요
저두 이거요
저도 이거용
다른 사람 말에 귀를 잘 기울여주는 사람이요
ㅋㅋㅋㅋㅋㅋ다들 정말 감사합니다… 혹시 그렇다면 반례로 함께하기 싫은 동료를 만났적이 있다면 공유 부탁드려봐도 될까요?
싫은은 너무 워딩이 강력하네요 함께하기 어려웠던 혹은 쉽지는 않았던 으로 정정할게요
저는 생각 없는 사람!?
본인만 생각하는..?
여기저기 피해끼치고다니는 사람
말이 도는 사람..?
자신이 짠 코드에 대해서 왜 그렇게 했는지 생각을 말하지 못하는 사람?
무조건 (찾아보지않고) 대뜸 질문부터하는 사람
덧붙여서 어떤 로직이나 기능을 붙일때 잘모르고 붙이는 사람
자신이 한 일만 어렵고 대단한거고 남이 한 일은 가볍게 보는 사람이요!
대부분 상대적인 기준이 적용되는 부분이네요
그래서 어려운거군요..
함께하고싶은 동료의 길은
역시 어렵군요
ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이모티콘 다들 의견공유 정말 감사합니다
화이팅입니당
서로에게 든든한 동료
이모티콘
열정없는사람..?
이 부분은 왜 그렇게 했나요 - 그건 ~~때문에 이렇게 되었어요 - 그런맥락이라면 ~~방법은 어떤가요? 요런식으로 논의가 이어졌음 하는데
일을 잘하건 못하건 소통 부족하고 자기일만 하는 사람
열정이 없는 저는...
기피대상
코드에 이유가 없으면... 대화가 끊겨버려서...
사실 이부분이 제일 어려운거 같아요ㅠㅠ
기존코드의 관례에 따랐다… 이러면 할말이 없긴하던데 ㅋㅋㅋㅋ
일정 못 지키면서 중간 상황 공유 안 하는 아람이요
사람이요*
저는 그럴 때 기존 코드 관례가 왜 생겼는지 / 어떤 효과를 기대하고 그런 관례를 만들었는지를 물어보면서 이어나가는편이에요
저도 상대가 한말에 그치지않고 나또한 대화를 이어나갈수 있는 동료가 되는게 좋은거 같아요
각자 다 사정이 있는거죠 뭐
이모티콘
ㅋㅋㅋ근데 이게... 잘못하면 꼬투리잡기가 되어버려서...
항상 조심스럽긴 합니다
저는 자기 의사표현 안하시는 분이랑 일하는게 제일 힘든 것 같아요....
코드비난이 되는 경우도 있나요?
자기 의사표현을 안하신다는게 어떤 경우일까요?
엌ㅋㅋㅋㅋ 저랑 같은ㅠㅠ 생각이시네요 저 그래서 질문 잘하는데, 그걸 부담스럽게 대하는 분 만났을 때 힘들긴 했네요
좋은지, 이해를 한건지, 싫은건지, 설명이 더필요한건지... 의사소통이 힘든 분이 간혹..... 평소 성격이 내성적인거랑 일할 때 자기 의사표현하는거랑은 또 다른 듯 해서...
음.. 그 코드를 쓴 사람 보다는, 그 사람이 어쩌다 그런 코드를 쓰게 되었나.. 같은 이야기를 들어보려고 해요
저도 ㅎㅎ 이야기를 들으려고 하는거죠
불평은 감정만 소모하고 해결되는게 없다고 생각해서
비언어적인 요소도 중요하다고 생각합니다..
다음에 같은 문제가 발생하지 않으려면 시스템/환겅을 어떻게 개선해야할까
같은 걸 고민해보는게 도움이 된 것 같아요
저랑 좀
이모티콘
(대충 통한다는 임티)
이력서주세요
ㅋㅋㅋㅋㅋ
이모티콘
ㅋㅋ 산업기능요원이라 이직 못합니다
무섭네요
이모티콘
국방의 의무를 다하고있는중...
아앗...
끝나고주세요
휴학생님 연락주세요
제가 먼저입니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이모티콘
이모티콘
그럼 두분다 주세요
?
자리 마련할게요
이모티콘
저희도 뽑으면 받고싶다
이모티콘
이모티콘
이모티콘
다들 보통 개발관련해서 커뮤니케이션 어떻게 하시나요?? - Slack 같은 채팅 프로그램 - Github Discussion 토론장 이용 - 직접 구두로 회의 - 기타..
구두보단 운동화는 어떨까요~?
택배 상자를 든 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
푸하핫~!!!
이모티콘
ㅎㅎ
와우 사람많네요! 안녕하세요!
보통 저희는 slack이랑 figma 내 코멘트 기능 많이 활용합니당
어서오세용
이모티콘
안녕하세요!! 택배 상자를 든 네오님~~ 반갑습니다 :)
아무리그래도 구두가 제일 빠르게 잘 통하는것 같습니다. 출근하기가 싫어서 그렇지..
저희도 이렇게하고 슬랙으로 도저히 어려우면 대면으로해요
이야기 주제에 따라 좀 갈리는거 같아요...
메신저 문화가 잘되어있으면 메신저로 주로하고, 히스토리 남기거나 공유되야 하는건 메신저에 프로젝트 채널(공유 채널) 있다면 거기에 공유하고, 테스크가 있다면 테스크에 댓글 남기기도 햇어요 (문화따라 차이가 큰거 같아요) = 상황과 문화에 따라 다르다.
그러면 그 다음에 보통 문서화 잘하는 곳은 문서화까지…? 척척 되던
맞아요 문화마다 다르다~
이모티콘
문서화
요즘 하는데
정말어렵긴한거같아요
글 잘쓰는거..
맞아용
그런거 동료한테 피드백 받는 재미도 있는데
그것도 문화 큼큼
문서 피드백은
좀 어려운것같아서
ㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
저희도 Slack으로 보통 커뮤니케이션하고 토론할 일 있으면 Github Discussion 에서 지속적으로 토론하고 개발 관련 기록할 건은 Github Issue 주로 처리. 완전 긴급건은 회의로 하네요. 다른분들은 어떻게 커뮤니케이션 하시나 궁금해서 여쭤봤습니다. :)
부트스트랩 드롭다운 선택이 안되는데 도와주실수 있으신가요 ㅜ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="research.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <title>Document</title> </head> <body> <header> <img src="" alt="No image"></img> </header> <section> <div class="search-wrap"> <div class="dropdown-wrap"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="true"> 연도 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a class="menuitem" href="#">2022</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="true"> 월 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a class="menuitem" href="#">1</a></li> <li><a class="menuitem" href="#">2</a></li> <li><a class="menuitem" href="#">3</a></li> <li><a class="menuitem" href="#">4</a></li> <li><a class="menuitem" href="#">5</a></li> <li><a class="menuitem" href="#">6</a></li> <li><a class="menuitem" href="#">7</a></li> <li><a class="menuitem" href="#">8</a></li> <li><a class="menuitem" href="#">9</a></li> <li><a class="menuitem" href="#">10</a></li> <li><a class="menuitem" href="#">11</a></li> <li><a class="menuitem" href="#">12</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="true"> 일 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a class="menuitem" href="#">1</a></li> <li><a class="menuitem" href="#">2</a></li> <li><a class="menuitem" href="#">3</a></li> <li><a class="menuitem" href="#">4</a></li> <li><a class="menuitem" href="#">5</a></li> <li><a class="menuitem" href="#">6</a></li> <li><a class="menuitem" href="#">7</a></li> <li><a class="menuitem" href="#">8</a></li> <li><a class="menuitem" href="#">9</a></li> <li><a class="menuitem" href="#">10</a></li> <li><a class="menuitem" href="#">11</a></li> <li><a class="menuitem" href="#">12</a></li> <li><a class="menuitem" href="#">13</a></li> <li><a class="menuitem" href="#">14</a></li> <li><a class="menuitem" href="#">15</a></li> <li><a class="menuitem" href="#">16</a></li> <li><a class="menuitem" href="#">17</a></li> <li><a class="menuitem" href="#">18</a></li> <li><a cl
사진
Script 추가로 넣어줘야 됩니다..!
html닫는 태그 밑부분에 넣어주면 되죠?
그리고 부트스트랩 버전을 다르게 하면 바로 저 드롭다운이 안먹히더라구여 ㅜ
이벤트 제어는 어디서 해주나요?
자바스크립트 아직 코드 못짰는데 제이쿼리로 하면 $ reference not defined에러뜨는데
npm이 설치가 안되서 그런건가요 …
html파일 위에서 쓰신다면 제이쿼리 cdn링크를 부트스트랩 링크 위에다 넣으시면 돼요
사진
깃헙 오가니제이션 만들었는데 오버뷰 부분 저렇게 나올 경우에는 어떤걸 바꿔줘야할까요?.?
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
pdf 파일 업로드시 iframe으로 미리보기를 구현했는데, 해당 iframe 클릭시 확대 보기를 구현하려는데 혹시 방법 아시는 분 있으실까요? 클릭이벤트가 빈 iframe일 때는 되는데, pdf를 업로드 하면 먹지를 안네요ㅠ
사진
오른쪽에 저거 눌러보세요!
넵넵.. 저도 드롭다운 안먹혀서 고생한적이 있어서..🥲
이거 저도 궁금했는데 감사합니다!!
부트스트랩 버전도 수정해서 적용했는데 여전히 안먹힙니다 ㅠ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="research.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Document</title> </head> <body> <header> <img src="" alt="No image"></img> </header> <section> <div class="search-wrap"> <div class="dropdown-wrap"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false"> 연도 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelled-by="dropdownMenu1"> <li><a class="menuitem" href="#">2022</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false"> 월 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelled-by="dropdownMenu1"> <li><a class="menuitem" href="#">1</a></li> <li><a class="menuitem" href="#">2</a></li> <li><a class="menuitem" href="#">3</a></li> <li><a class="menuitem" href="#">4</a></li> <li><a class="menuitem" href="#">5</a></li> <li><a class="menuitem" href="#">6</a></li> <li><a class="menuitem" href="#">7</a></li> <li><a class="menuitem" href="#">8</a></li> <li><a class="menuitem" href="#">9</a></li> <li><a class="menuitem" href="#">10</a></li> <li><a class="menuitem" href="#">11</a></li> <li><a class="menuitem" href="#">12</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false"> 일 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelled-by="dropdownMenu1"> <li><a class="menuitem" href="#">1</a></li> <li><a class="menuitem" href="#">2</a></li> <li><a class="menuitem" href="#">3</a></li> <li><a class="menuitem" href="#">4</a></li> <li><a class="menuitem" href="#">5</a></li> <li><a class="menuitem" href="#">6</a></li> <li><a class="menuitem" href="#">7</a></li> <li><a class="menuitem" href="#">8</a></li> <li><a class="menuitem" href="#">9</a></li> <li><a class="menuitem" href="#">10</a></li> <li><a class="menuitem" href="#">11</a></li> <li><a class="menuitem" href="#">12</a></li> <li><a class="menuitem" href="#">13</a></li> <li><a class="menuitem" href="#">14</a></li> <li><a class="menuitem" href="#">15</a></li> <li><a class="menuitem" href="#">16</a></li> <li><a class="menuitem" href="#">17</a></li> <li><a class="menuitem" href="#">18</a></li>
저는 이렇게 스크립트 넣으니깐 해결 되었어요...!
<body> <div id="root"></div> <div id="modal"></div> </body> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous" ></script> </html>
<body> 끝나고 html 전에 넣었습니다..!
html전에 넣었는데 왜 안되는걸까 참 의문입니다 ㅠㅠ
</body> <script src="research.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </html>
스크립트에 defer 속성이려나요...?
부트스트랩 introduction에 있는거 그대로 복사해서 갖다 붙인건데 defer는 아닌거같아요
스크립트 바디 안에 있어야돼용
</body> 태그 바로 전에 붙여보겠습니다..
<script src="research.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
여전히 셀렉이 안되는데 오늘 날 샐거같습니다 ㅠ
혹시 로직이 researxh.js 안에 있니요? 그거 로드를 마지막에 로드해보세요
개발자도구 네트워크탭에서 상태 200은 뜨고있나요?
사진
304 not modified라고 뜨네요 ㅠ
좌절하는 라이언님이 나갔습니다.
근데 css적용은잘되고 있어요
안녕하세요 선생님들, 개발한 프로젝트를 발표해야 하는데 발표자료를 어떤식으로 만들지 잘 모르겠어요..
사진
이런식으로 하는게 맞을까요../
무작정 안된다고 말씀주시기 보다는, 에러가 발생하지는 않는지? 발생한다면 에러 메시지 내용은 무엇인지? 등을 공유해주시면 더 좋을 것 같아요 :)
사진
저 노란색 네모칸 부분에 research.html , jquery, popper, bootstrap.min.js, bootstrap.min.css는 200이 잘뜨고
research.css, research.js만 304 Not modified가 뜨네요
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="research.css" /> <!— Bootstrap CSS —> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Document</title> </head> <body> <header> <img src="" alt="No image"></img> </header> <section> <div class="search-wrap"> <div class="dropdown-wrap"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false"> 연도 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelled-by="dropdownMenu1"> <li><a class="menuitem" href="#">2022</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false"> 월 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelled-by="dropdownMenu1"> <li><a class="menuitem" href="#">1</a></li> <li><a class="menuitem" href="#">2</a></li> <li><a class="menuitem" href="#">3</a></li> <li><a class="menuitem" href="#">4</a></li> <li><a class="menuitem" href="#">5</a></li> <li><a class="menuitem" href="#">6</a></li> <li><a class="menuitem" href="#">7</a></li> <li><a class="menuitem" href="#">8</a></li> <li><a class="menuitem" href="#">9</a></li> <li><a class="menuitem" href="#">10</a></li> <li><a class="menuitem" href="#">11</a></li> <li><a class="menuitem" href="#">12</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false"> 일 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelled-by="dropdownMenu1"> <li><a class="menuitem" href="#">1</a></li> <li><a class="menuitem" href="#">2</a></li> <li><a class="menuitem" href="#">3</a></li> <li><a class="menuitem" href="#">4</a></li> <li><a class="menuitem" href="#">5</a></li> <li><a class="menuitem" href="#">6</a></li> <li><a class="menuitem" href="#">7</a></li> <li><a class="menuitem" href="#">8</a></li> <li><a class="menuitem" href="#">9</a></li> <li><a class="menuitem" href="#">10</a></li> <li><a class="menuitem" href="#">11</a></li> <li><a class="menuitem" href="#">12</a></li> <li><a class="menuitem" href="#">13</a></li> <li><a class="menuitem" href="#">14</a></li> <li><a class="menuitem" href="#">15</a></li> <li><a class="menuitem" href="#">16</a></li> <li><a class="menuitem" href="#">17</a></li> <li><a class="menuitem" hr
이게 html전체 소스코드입니다
캐시삭제, 인터넷기록삭제 해보셔요
시프트 f5
쿠키삭제 결과 모두 200으로 바뀌었는데, 드롭다운에서 선택이 안되는건 여전합니다..
네트워크탭에서
아 이미 하고계시는구나
$(".dropdown-menu li a").click(function() { $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>'); $(this).parents(".dropdown").find('.btn').val($(this).data('value')); });
이 코드로 해결했습니다..
송아지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Frodo whistling님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
삭제된 메시지입니다.
오쯔님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 늦은 밤 들어와서 죄송합니다 ㅠ 현재 취준중인 프론트엔드 개발자 오쯔입니다. 리액트, RN을 주로 사용하고 블로그들을 보다가 링크를 찾아서 들어오게 됐습니다. 잘 부탁드립니다
이모티콘
어서오세용
불 뿜는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
송아지님, Frodo whistling님, 오쯔님, 불 뿜는 튜브님 모두 모두 반갑습니다 어서오세요 :)
목차 구성과 흐름 좋습니다. 잘 하셨네요.
엄지척 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 엄지척 어피치님 반갑습니다 :)
엄지엄지척~
안녕하세요~ 최근에 개발공부 시작했어요!! 잘부탁드립니다 ㅎㅎ
와~ 조만간 1000명을 넘기겠네요 ^^
잘 부탁드립니다. 이 곳은 프론트엔드나 웹 개발에 대해서 궁금한 것들을 물어보고 아는 것들 배운 것들을 공유하며 함께 성장하고자 하는 곳입니다. ㅎ 개발공부 하면서 궁금한게 있다면 언제든지 편하게 물어보세요 :)
네 ㅎㅎ 감사합니다!
usecallback 사용하면 함수가 디펜던시가 변하지 않으면 새롭게 불러와지지 않는데 함수가 새롭게 불러와 지지 않음을 어떻게 확인할 수 있을까요?.?
함수내용에 콘솔로그 추가하기
useinput로 따로 빼서 그 안에 콘솔 넣고 확인해봤는데
계속 콘솔이 찍히는데 그러면 useInput으로 따로 커스텀해서 사용하는 이유가 뭘까요...?.?
커스텀 훅으로 만드셨나요?
사진
이렇게 콘솔 찍히는 건 함수가 재사용 되고 있다는 게 맞겠죠?.?
넵넵
뭔가 복잡성을 줄여주는 목적도 있어서 use allback 문제는 또 별도로 생각하시면 좋을거 같습니다.
아아아 함수를 두개 쓰니 줄여주는 목적 때문 + usecallback 이 두가지 이유 때문에 useInput을 쓴다는 말씀이다라고 이해하면 좋을까요?.?
useInput을 직접 만드셔서 사용하는 것보다는 react-hook-form을 사용해보시는 것을 추천드려요
최적화 때문에 useCallback 쓴 건데 랜더링 같은 경우는 크롬 확장 프로그램으로 바로 눈으로 확인이 되는데 함수 같은 경우는 어떻게 확인하면 좋을지 모르겠어서 최적화가 정말 되고 있는지 아닌지 모르겠네요..
음 그렇다기 보단 usecallback은 최적화와 관련이 있어서 커스텀 훅을 만들어 쓰는 목적성과는 별도의 문제로 봐야할 것 같다 라는 의미였습니다
useCallback 이 잘 작동되는지 확인하고 싶으신 거라면 의존성 배열에 []을 주고 안에 변수 같은 경우에 외부 변수를 참조하게 해서 제대로 클로저가 업데이트 안되고 있는지 확인하시면 될 것 같습니다.
외부변수를 참조하는데 값이 자꾸 바뀐다면 제대로 작동하지 않고 있다고 봐도 되지 않을까요?
협업에서 A는 a라는 부분을 작업하고 B는 b라는 부분을 작업할때 A가 a를 고치다보니 b부분에 수정할 부분이 생기면 보통 B에게 고쳐달라 말하나요 아니면 A가 b를 고치고 충돌나게 하고 수정하나요..?
둘다요..
충돌ptsd
아아!! 오... 맞는 것 같습니다 감사합니다 !!!!!!!!!
아 말하고 충돌내나요 ? ㅋㅋㅋ 생각치 못한 부분이군요
콘솔에 클로저로 변수를 넣어서 확인 해야지, 그냥 콘솔 넣고는 계속 랜더링 되니까 확인이 불가하네요!!
코린이라.. 리액트 훔 폼은 처음 들어보네요! 한 번 알아보겠습니다 감사합니다 ㅎㅎ
넵넵 맞습니다. 콘솔로 외부 변수를 확인해보시면 쉽게 확인이 가능하십니다!
고치기전에 이야기를 해야겠죠..작업하다보니 이부분도 수정을 해야하는데 지금 고칠것이냐 나중에 고칠것이냐
왠만하면 바로 고치는게 낫긴하죠
이거 작업하다보니 b쪽에 문제가 있는 거 같은데 B님 확인 부탁드려요 라고 이야기를 시작할 것 같아요. 아무래도 b에 대한 부분은 B가 더 잘 알고 있을 테니, 더 잘 아는 사람에게 상황을 공유하고 솔루션을 같이 고민해보는 게 좋아보입니다.
아 생각해보니 말도 안되는 질문이였네요 .. 당연히 B에게 말을 하고 회의를 해야하는데
감사합니다 !
아침부터 정말 정말 감사합니다 ㅎㅎ
개강의 아침이 밝았네요 대학생분들 ㅎㅇㅌ
#공유 헤로쿠 무료티어 대체제에는 이런 것들이 있으니 토이 프로젝트 하실 때 검토하시면 좋을 것 같네요! https://news.hada.io/topic?id=7294 출처 : https://holix.com/ch/q1a6bVab
Heroku대체제
이네요
좋군요
흙흙 나의 헤로쿠
국비 우선 같은 과목으로 다른 학원에서 재수강하고 공부 더 하려고 하는데 코로나 특이사항으로 마무리 서류 적었는데 접수가 꼬였나봐요 ㅠ
리액트에서 tailwindcss 로 accordion 토글 애니메이션 만들려고하는데 해보신분 있으신가요?? 계속 찾아봐도 어떻게 작동이 안되네요 ㅠ
구구님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
js 배우는데 간단한 계산식 할 때 여러분들은 알고리즘 vs 함수 뭐를 쓰시나요?
함수로 존재하는 알고리즘이면
함수 씁니다
정규식보다 알고리즘을 좋아하지만 있는건 활용하는게 협업에도 좋고 시간도 아끼고 좋은것 닽아요
알고리즘과 함수의 차이가 뭔가요? 둘을 구분지어 생각하려니 기준이 애매한 것 같아서..
아 죄송해요 음.. 로직을 전부다 본인이 짜서 구현하는지 만들어진 함수를 이용하는지 물어보는 거 였습니다!
간단한 계산식이면
아니다
그냥 그 계산을 해주는 함수가 있으면 그걸 쓰고
없으면 계산하면되져
샵검색 : #바퀴의 재발명
저는 요 이야기 되게 좋아해서, 일단 만들어진 게 있는지 검색해보긴 합니다
라이어느님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
안녕하세요!! 혹시 tagged union을 배열에 사용했는데 추론이 안되는 이유가 뭔지 아시나요 ㅠㅠ 구글에 검색해도 전혀 뜨지 않고 이유를 모르겠네요..
every 로는 타입 좁히기가 안되어서 그럴거에요
아.. ㅜㅜ 그럼 타입단언을 쓰는방법밖에는 없을까요?
리액트에서 윈도우 객체 접근이 안되네요?? Index.html에 윈도우 객체에 키 추가했는데 ..
type predicate 이용하면 될지도..?
이것도 해봣는데 안되더라구요..ㅜㅡㅜ 감사합니당
사진
사진
type predicate 하니까 되는거 같아요..?
이모티콘
아, tagged union과 섞으면 되는군요..! 저는 Person에 있는 name이 있는지만 확인했는데 안되더라구요 ㅠㅠ 정말감사합니다!!
every가 2개로 나눠쓰일수있는거같아요 선언부 보시면..?
사진
이렇게하니까 잡히네요 ㄷㄷ
이모티콘 오… every가 저렇게 생겼었군요 이제 이해가 되네요 감사합니다
리듬타는 제이지님이 나갔습니다.
혹시 useEffect안에서 해보셧나요? 렌더링된후에 접근 가능하실거같은데
이미지가 크기를 줄이면 계속 왼쪽은 그대로고 오른쪽만 줄어드는데 양옆으로 줄어들게 하고싶어서 그런데 방법이 있을까요?
쏘이주님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
힌트 주셔서 감가합니다 시도해볼게요
디스코드에 올린 질문자분이 맞으실까요? 코드를 보니 리덕스성크 사용하고 계신느데 성크에서도 윈도우객체에 접근이 가능한건지 궁금하네요
성크에서 콘솔로 찍었는데 안되더라구요 html에서 윈도우객체에 키 추가했는데 그거 접근이 안돼요
ㅠ
맞습니다
미들웨어에서는 윈도우객체에 접근이 안되지않나요 …? 잘몰라서요
저도 되는지 여부를 몰라요..
오 useeffect내에서 접근이 가능하네요
감사합니다감사합니다
혹시 라이브러리를 추가했는데 그 라이브러리 내에서 에러가 난다면 어떻게 해결해야 할까요
깃헙이슈에 올려볼것같아요
영어로 써야되죠? 어렵네요
FE conf 홈페이지 오픈해서 공유드려요~ 관심있으신분들 보시면 좋을것 같네요 티켓예매은 9월 5일부터 진행됩니다 https://2022.feconf.kr/
이거 혹시 나중에 유투브에 올라오나용??
주제들이 관심가는 주제가 꽤많네요
멋있는 팀이네요
매년 올라왓으니 그렇지 않을까 싶네요
돈다발 들고 좋아하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아 코로나여서 무료로 온라인하다가 오프라인은 유료로 하는거군용
선착순 티켓팅이니 빠르게만 하면 되겠네요. 인프콘보다 낫다
티켓 구매 참고 사항에 나와있네요!
사진
프론트엔드 DDD
듣고싶네 ㅋㅋㅋ
오 감사합니다!ㅎㅎ찾고 있었는데ㅎㅎ
돈다발 들고 좋아하는 무지님이 나갔습니다.
선배님들! 이 레퍼런스랑 비슷한 레퍼런스사진이나 참고자료 가지고 계신 분 있으시면 공유 좀 부탁드려도 될까요!!
사진 2장
뽀롱님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
레퍼런스 사진이나 참고자료 공유를 부탁하시면 답변을 얻기 쉽지 않아보여요. 레퍼런스를 찾으려면 어떤 키워드가 좋을지 물어보시면 더 좋을거같습니다 Gradient / abstract / fluid / line element / poster 같은 키워드로 이리저리 조합해서 google 이미지 검색은 기본으로, pinterest behance dribble 등등 모든 디자인 사이트에서 찾아보세용
사진
Useeffect내에서 dispatch 비동기 thunk 요청 응답완료 후 아래 setIsState가 진행되도록 하는 방법좀 알려주시면 감사하겠습니다 ㅠ
디스패치 썽크 응답 다 끝난뒤 유스스테이트 작업 되도록 하는방법이 있을까요?
unwrap으로 thunk응답을 받아서 쓸 수 있어요
사진
이런거 원하시는거 맞을까요 ?
툴킷쓰시나요 ?
네
툴킷썻어용
챼야님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
와
너무 감사합니다!!!
생각해보니 썽크도 비동기니 당연히 응답 분기처리(?)가 있겠네요
뽀롱님 기뻐하는 라이언님 모두 모두 환영합니다~ 반갑습니다
왜 그생각을 못했는지..
안녕하세요~~ 반갑습니당
구구님 라이어느님 선풍기 바람쐬는 어피치님도 인사가 늦었습니다. 어서오에ㅛ :)
어서오세요!! 이곳은 프론트엔드나 웹 개발을 하면서 궁금한 것들을 물어보고 아는 것들은 알려주고 공유하면서 함께 성장하고자 하는 곳입니다. 편하게 글 남겨주세요 :) 잘 부탁드립니다
안녕하세요!!!!!!반갑습니다~~~이런 오픈카톡방을 이제서야 알게되어 아쉽지만 기쁩니당!
안녕하세요~ 프론트엔드 개발자로서 더 스킬업 하고싶을 때 어떤 부분을 더 공부해야 도움이 될까요..?! 프레임워크로 개발을 거의 해왔는데요. 그래서 바닐라 자바스크립트로 뭔가 개발 해봐야 할지 아님 개념적?? 지식 (디자인패턴, TDD 등..)을 공부해야할지 .. 정체가 되고 있는 느낌이 들어서 어디서 부터 시작해야 될지 갈피를 못잡고 있네요..!! 혹시 여기 계신 분들은 어떤 방향으로 공부하시고 계신가요?!!
논굥님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 혹시 클라이언트에서 데이터 관리할때, server state를 react-query로 관리한다고하면, client state는 어떤걸로 주로 관리하시나요? 그리고 그 이유는..?
Recoil Redux Mobx 등 여러가지가 있는데 각각 장단점이 있고 개인의 취향도 있어서 정답은 없다고 생각합니다 저는 recoil을 주로 사용하고 있습니다
안녕하세요. 제가 모니터를 골라야하는데 27인치와 32인치 둘 중에 어느게 나을지 혹시 추천해주실 수 있을까요,,?
그냥 직접 보고 더 편한거 고르는게 좋을 것 같아요 전 개인적으로 27이 적당해서 27 고를 거 같은데 큰 화면 좋아하시는 분들도 많더라구요
더블27 싱글 32
가 좋을것 같네요
32인치에 24인치 하나 더 두려니까
애매한 거 같아서
27 27로 갔습니다 전
저는 m1 모니터 연결이 하나 밖에 안돼서.. 32인치 큰거로 하나 했어요
아하 두 대를 둘 것 같아서 27 27로 가야겠네용
답변 감사합니다!
redux보다 recoil이 확실히 hooks와 같이 리액트스러운 느낌이라 쉽게 잘 쓰고 있어요
@오쯔 안녕하세요 오우님
??
헉
힌트는 크루크루입니다
일단 현재 작업하고 있는 프로젝트나 과제에서 불편을 겪고 있는 점이나 개선이 필요한 부분을 중심으로 공부를 해보는 것이 좋습니다. 공부를 할때에는 목적이 있어야 뚜렷하게 더 잘 되는 편이니까요. 리팩토링을 하는데 버그가 계속 난다거나 기술부채가 많다거나 특정 이슈들은 수정하기가 정말 힘들다거나 신규 피쳐를 넣기가 어렵다거나 신입이 들어오면 알려주는데 너무 힘들다거나 퍼포먼스가 너무 느리다거나 등등 일단 작던 크던 한번 이러한 부분들을 먼저 한번 적어보세요. 그리고 나서 이러한 맥락을 바탕으로 해결법을 찾기 위한 여정으로 공부를 시작해보시면 좋을 것 같습니다.
콩노보노콩님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
전부 다 잘할 수는 없으니, 특정 목적에 따라 취사선택을 하고 해당 분야만 지속적으로 파서 보람을 느끼는 것도 좋은 것 같아요
이번에 팀별 프로젝트를 하는데 서버를 꼭 jsp로 사용해야 하는데.. 제가 html,css,js로 만든 작업물을 빽단으로 넘겨서 합치라고 하면 너무 양아친가요? 아니면 원래 빽단에서 다루나요??
답장 링크를 잘못걸었네요..
어디까지 프론트가 해야할지 감이 안 오네용
안녕하세요 콩노보노콩님 반갑습니다
jsp는 프론트가 붙이는게 아니라 백에서 붙이는거에요
본인들도 할일 많다고 제가 작업한김에 연동시키라고 푸시 들어오네요 후....
jsp가 애초에 jstl로 데이터 붙여야하는데
프론트한테 붙이라하는건 아니죠
작업물을 resource 폴더에 올리면 되지 않을까요?
jsp가 벡엔드라고 생각하는데..
그럼 벡엔드에서 처리해야하지 않을까용..
이것에 대한 의견도 좀 많이 갈리긴 하더라구요
국취제 상담사가 너무 아무것도 모르네용 ㅠㅜ
jsp써야하는게 과제인가요 아니면 백에서 걍 jsp쓴다고 하는건가요
ㅋㅋ 저도그랬어요
서버단을 반.드.시 jsp로 써야합니당
;; 학원이 이상하네요
그러게요 예전에 말할 때도 다른분들도 학원이상하다고 헀어요 ㅋㅋ...
5년전에나 쓸법한 녀석을..
jsp로 구축만 해놓고 rest api 뚫어놓으면 모르지 않을까요?
next js 에서 페이지가 test/[id] 이런식으로 구성돼있다고 가정했을 때 test/1 에서 test/2로 Link를 통해 이동하게 되면 deps없는 useEffect가 test/1에서만 호출되는데 이유를 아시는 분 있을까요?
제생각에도 걍 api달라고 하고 js로 fetch해서 붙이는게
베스트일거같습니다
아~ 현재 진행중인 프로젝트나 업무에서 문제점이나 개선부분을 찾아서 그 부분을 공부해 나가는 식도 괜찮네요 제가 지금 목적이 뚜렷하게 없어서 방황중이었던 것 같습니다..! 말씀해주신 방향성으로 한 번 고민해봐야겠네요 좋은 말씀 감사합니다 테오!!
안녕하세요... 리액트에서 document에 이벤트 리스너를 다는게, 라이프 사이클 측면에서 그닥 좋지않다는 얘기를 들었는데요 useEffect안에 넣어주고 cleanup처리를 잘하면 딱히 문제가 없다고 생각하면 될까요..?
flex container 의 자식 요소들의 갯수에 변화가 생길때, 애니메이션을 넣고 싶은데 이와 관련해서 레퍼런스를 알고 있으신 분이 계실까요? ex) 1 -> 2 개로 변화할때, 각 요소들이 양쪽으로 분리되는 애니메이션을 넣고 싶습니다!
하트뿅뿅 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
해결했네요 https://github.com/vercel/next.js/issues/9992 staticProps key를 안주면 이런 문제가 발생하는군요 ㄷ
사진
저 헤더란의 드롭다운 메뉴를 오른쪽으로 옮기고싶은데 어떤옵션줘야하는지 아시는분 계신가요 ㅠㅠ
float: right 혹은 헤더와 드롭다운이 포함된 영역에display:flex 속성!
감사합니다
사진
내용물 그래프가 위에서부터 시작해서 아래로 내려가는데 혹시 위에서 부터 시작해서 올라가는 그래프 할려면 css 설정 어떻게해야할까요?
프린이🐥님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요~~
git관련 질문 하나 드려도 될까요??
ㅠㅠ;; 학원 진도따라가랴 프로젝트하랴 git 을 2일만 배우고 나머지는 혼자 구글링 하면서 해서 제대로 파본 경험이 없어서 이렇게 하는게 맞는지 모르겟습니다
마음껏 하셔도 될 것 같아요 제가 답을 못해서 그렇지
.gitignore 에다가 경로들 .project나 .classpath 같은 push 안할 목록들 ignore 시켜놓고
.gitignore 도 깃스테이징에 같이 올려놓고 푸쉬를 하는건지
같이 공유할 git이라면 ignore도 푸쉬해야 다른사람도 ignore를 공유하겠죠
아하 ㅠㅠ 감사합니다
혹시 manifest 가 뭐하는 파일인지 혹시 아시는분 계신가요?
뭔가 자바의 냄새가 나는데요 https://docs.oracle.com/javase/tutorial/deployment/jar/manifestindex.html 이걸 의미하신다면 Jar 파일의 메타데이터라고 하네요 (즉 Jar 파일에 들어있는 데이터가 뭔지 설명하는 데이터)
웹앱(PWA) 혹은 확장앱에서 해당 앱에 대한 정보를 가지고 있는 파일이기도 합니다.
얘도 깃이그노어 시켯는데 다른사람이 이걸 깃이그노어 안시키고 그냥 푸쉬시켜서
근데 프로젝트도 어느정도 진행이 계속 되고 있는 상태라 revert 도 시킬수 없어서
이럴땐 그냥 노가다로 파일을 다 손으로 복사하는 수밖에 없나요??
아 제가 질문을 횡설수설하게 했네요...
이미 올라간 파일을 레포지터리에서 제거하고 ignore 하고싶으신건가요?
manifest.mf 라는 파일 때문에 다른사람이랑 자꾸 conflict 가 발생합니다
네
manifest파일을 지운 다음에 푸시하고 gitignore에 manifest추가하고 푸시하신 다음에 다른분들한테 풀땡겨보라 해보셔요
리액트에서 차트 라이브러리 많이쓰는게 어떤건가요?
d3??
저는 chartjs
레퍼런스가 많은것일수록 좋을거같아요!
직접 해본 게 아니라서 100% 자신은 없지만 현재 상황이 이 상황이라 생각되어 공유하였습니다.
허브님 존경합니다
차트js 괜찮나요!?
넹
넵 러닝커브도 없습니다
답변 주셔서 감사합니다! 한번 시도해보겠습니다!!
오 지리는 라이브러리군요
확실히 캠프든 학원이든 취업률을 중점으로 생각하네요 학생들은 아웃오브안중...? 프론트 과정에서 백엔드가라고 말이 나오다니 ㅋㅋ... 허탈
ㅋㅋㅋㅋㅋㅋ 잔인하지만,,, 밥그릇은,,, 본인이 잘챙기셔야해요 해당과정에서 배운점도 있으실거라고 믿습니다..
혹시 aaa.bbb[“ccc”]ddd[“eee”] 이런 구조를 만드려면 어떻게해야할까요ㅠ 배열 객체 왔다갔다하려니 너무 헷갈리네요.. aaa = { bbb:[“ccc] } 여기까진 알겠는데 다음을 잘모르겠습니다ㅠㅠ
혹ㅅ[“ccc”].ddd 여기사이에 . 들어가나요? 그리고 [] 여기 안이 스트링이면 다 객체인거같습니다
const obj = { name : '청소하는 튜브' }; console.log(obj['name']) // 청소하는 튜브
이렇게 나올거에요
안들어가는거같아요ㅠ
감사합니다 글보고 조금 더 공부해보겠습니당
저는 스프링 프로젝트 하는 국비학원생인데요 jstl 사용해서 붙이는건 백에서 하는게 맞다고 생각합니다
우선 컨트롤러나 그런 작업들을 다 백에서 하고 데이터 값을 어트리뷰트에다가 나름 보내놨기야 했겠죠...? 근데 그 값들이 잘 처리되었는지 까지 프론트단에서 하려면 그 코드를 다 보고, 해야하는데... 아무래도 역시 만든사람이 하는게 맞는거 같습니다ㅋㅋ
긍정기운 아자자!
질문이 있습니다. jest로 expect(~~) 해서 함수가 제대로 콜 됐는지 확인하고싶은데 .to~~를 확인해보면 전부 mock function에 대해서만 하는것 같더라고요. 혹시 실제 로직도 체크하는 방법이 있을까요?
스파이를 써보시겠어요??
흠.. 스파이온이 맞나요? 관련 내용대로 해보고있었는데도 못하겠어서 ㅠ 한번 더 보고올게요
클래스로 짜셨으면 가능할거같은데..
함수형으로 짜셨으면 모르겠습니다ㅎㅎ
함수형으로 짰어요... ㅠㅠ
webpack 5 버전 환경에서 리액트 사용시 혹시 코드 스플리팅 어떻게 하시나요?~~
export const Function = () => {} 이 module이라는 파일에 써있을 때, test 파일에 import * as module from './module' 해서 불러오고 jest.spyOn(moudle, 'function') 이렇게 해서 사용하는게 맞나요??
해당형태로 사용했을때 자꾸 Cannot redefine property: function 이런식으로 뜨네요 ㅠ
module 스펠링이 잘못된것같아요!
jest.spyOn(moudle, 'function')
그렇네요!
아니면 여기서 카톡에서 치다가 오타 나신거 일수도
아 저건 옮겨적느라 ㅎㅎ..
넵 맞아요! 옮겨적다가 오타났네요.
저는보통 spyOn(require(path), function) 으로 쓰긴하는데 둘다 상관없을거같아요!
자답할게요!! __esModule: true라는 옵션을 줘야되나봐요 모듈 불러올때!
쓰긴하는데 -> 썻던거같은데..
혹시 파베 클라우드 메시징 백그라운드로 받은 텍스트 클라이언트로 받을수있나요?
toho님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
안녕하세요 toho님 반갑습니다 :)
안녕하세요~
서버에서 4.5, 3.5과 같은 숫자로 오고 별다섯개 5점 만점 중에 이를 별이 차있는 비율로 표현하고 싶은데 뭘 공부해야할까요…??
svg 아니면 조건문 분기?
아닐까요
튜브낀 튜브님이 나갔습니다.
1) 일단 빈별, 별 반개, 별 1개를 표현하는 방법을 만들어보세요 2) 숫자에 맞게 별 표시를 하는 걸 해보세요. 3) .5가 있다면 별 반개가 나오도록 해보세요 4) 다 모아서 조립해보세요
한번 스스로도 고민해보시고, 디자이너가 아래처럼 구현해달라고 하였을때도 고려해보시면 좋을 것 같아요. https://spectrum.adobe.com/page/rating/
저의 경우는 1) 어떤 Property가 필요할까? 2) 이벤트는 어떤 것들이 있을 수 있지? 3) LifeCycle은 어떻게 될까? 이런 형식으로 나누어 고민해서 구현하는 것 같아요.
React.lazy 와 Suspense로 코드 스플링할때 그 쪼개는 기준이 뭘까여 ㅠㅠ
야매적으로 말하자면 화면에서 1~2초 뒤에 나온다고 해도 이상하지 않을 것 같은 단위? 랄까요? ㅋ
modal이나 snackbar이런게 될수 있겠네요?
맞습니다!
혹시 스낵바 업체 이용하시는 회사 계신가요?
스낵24 말씀하시는 건가용?
저희 회사 스낵24 구독중이에요
저희 두요
스낵 24가 가성비 킹이죠..?
감사합니다
저희는 과자가 점점 쌓이고 있어요
안먹는 과자들이 올 때가 좀 많았어서 구독 취소하고 직접 구매하는 식으로 바꾼 경험이 있었어요🥲
헉 감사합니다
이런 문제가..
꽈자 먹을 사람 거의 없을 것 같긴 한데..
있으면 드시려나 ㅎㅎ
스낵24 홈페이지 멋지네용
다들 개인 프로젝트에 테스트코드 커버리지 얼마나 되시나요?
0 ..?
과감하시군요
아 찾앗어요
프론새싹님이 나갔습니다.
콘이 웃긴 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
베개를 부비적대는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
백엔드맨님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
와! 근데 지난 대화글을 볼 수 있는게 진짜 최고인 것 같아요... 개발자분들이라 그런지 오픈카톡창 클라스가 남다르네요... 아직 공부 4개월차인데 날짜별로 다 봐야겠어요🥺
지난 대화글이 남는다고 하니, 답변 한번 할때도 신중하게 되는 것 같아요 ㅎㅎ (박제될까봐...)
ㅎㅎㅎㅎㅎㅎ저도 질문할 때 더 신중하게 고려해서 제대로 해야겠어요....(나중에 보고 이불킥할까봐...)
이모티콘
기타치는 튜브님 배게를 부비적되는 라이언님 백엔드님 모두모두 반갑습니다 :)
감사합니다 :) 글 내용을 다 읽기에는 내용이 너무 많고 맥락 파악은 어려우실거라 링크나 검색을 통해서 필요한것들만 찾아서 보시라고 만들어봤습니다~
혹시 모바일 웹에서 주소창 도구 모음 등을 가리고 전체 화면처럼 보이게 할 수 있는 방법이 있을까요?
Kdg0110님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
kdg0110님 안녕하세요!! 반갑습니다
사내에서 비트버켓을 쓰면서 아래의 사항이 저는 불편하다고 생각하였는데, 혹시 다른 분들은 비트버켓을 쓰면서 장단점을 어떻게 생각하는지 알 수 있을까요? 비트버켓 불편한 점 - comment와 커밋이 따로 분리되어 관리됨 - 일반 코멘트와 파일 코멘트가 나눠져있어 따로 봐야함 - 파일을 하나씩 봐야 코멘트가 있는지 알 수 있음 - 타임라인 형식이 아니여서 어떤 코멘트가 추가됬는지는 알아서 확인해야됨 - 수정된 파일은 outdated comments로 별도로 클릭하여 확인해야함 - 새로운 내용 업데이트시마다 새로고침해야 알 수 있음 - 코드 다중 라인 코멘트 작성이 불가능함 - 기존 코드 -> 개선 코드안 기능이 없음
권은빈님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 손을 번쩍 든 무지님 반갑습니다 :)
위 사항은 PR리뷰에 국한된 내용임을 이야기 안드렸네요..
Kdg0110님이 나갔습니다.
아직 기본 브라우저에서는 그런 기능을 잘 제공하지 않는 듯 합니다. 웹앱 만들기 기능을 이용하면 모바일 페이지를 full화면에서 보여주는 형태의 바로가기를 만들수가 있습니다
안녕하세요. react에서 yarn dev 명령어가 안되는데 package.json 파일의 script에 "dev"가 없던데 이것 때문일까요? 만약 맞다면 "dev": "react-scripts dev", 를 입력하면 될까요?
네 추측하신 사항이 맞습니다. npm(yarn) run <정의한_스크립트_키워드> 통해서 커스텀으로 정의한 스크립트가 사용 가능하실거에요. https://docs.npmjs.com/cli/v8/using-npm/scripts
불금 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
꿱님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
불금 네오님 꿱님 안녕하세요!! 반갑습니다 :)
안녕하세요! 회사에서 안드로이드 개발만하다 취미로 웹 개발을 해보려는 꿱입니다 :)
와우 멋지십니다 :) 이곳은 프론트엔드나 웹 개발에 대해 궁금한 것들을 물어보고 아는 것들은 알려주고 공유 하면서 함께 성장하고자 하는 곳입니다 ㅎ 언제든 궁금한게 생기면 편하게 글 남겨주세요
들어오자마자 질문을 해서 죄송합니다만… 부모에게 display: flex와 width: 100% 그리고 overflow: auto 를 주고 자식 아이템들에게 width, height을 주었을 때 제가 의도했던 느낌은 부모 영역 내에서만 자식 아이템들이 표시 및 스크롤 되는 것을 원했는데 아이템이 많아지면 부모 영역을 벗어나 표시가 되게 되네요… outside나 여러 단어로 검색한 결과를 따라해도 해결이 되지 않아… 혹시 어떤 부분이 문제일지 유추할 수 있을까요?
사진
아이템이 적으면 괜찮은데 브라우저 크기를 벗어나는(?) 갯수가 되면 같이 늘어나게 되더라구요…
사진
어떤 결과를 원하시나요?
그리드한 격자를 원할거라고 생각하고 flex-wrap 키워드로 검색해서 한번 적용해보세요
사진
overflow-x:auto
써보시죠
아 주셨구나
부모한테 오버플로 주는게 아니라
이렇게 화면 영역 내에서만 스크롤을 원하고 있는데 갯수가 많아지면 조금 더 증가되어 가로 크기가 같이 늘어나더라구요
네네
스크롤을 원하시는 건가요?
부모한텐 width auto주시고
아!
부모를 감싸는 wrapper만들어서
width를 고정한다음 overflow auto주세요
width에 대한 제한을 먼저 주셔야할 것 같습니다. 부모 엘리먼트에 position: relative; 같은 형식으로 상위 부모에 대한 width를 가져와야 되지 않을까요?
스크롤을 넣을 엘리먼트 width가 100%여야 할것 같네요
반갑습니다! 리크루터와 Pm으로 일하고있습니다 ㅎㅎ
flex 엘레먼트에 한번더 감싸서
그 엘리먼트에 overflow를 줘보세요
<container> <flexelement> items </flexelement> </container>
svg 파일이 여러개의 png img 파일들을 다루는것보다 쉬워서 사용하고 있습니다
혹시 svg 파일? 코드가 더 무거울까요?
환영합니다!! :) 홍보나 협업에 대해서도 괜찮으니 편하게 글 남겨주세요
svg 코드 하나로 상태에 따라 다른 색을 입히는 등 foreach문 돌려서 뿌리고 있는데 900개쯤 데이터가 되니 엄청 느려져서요 ㅠ
아이콘은 더 가볍고 이미지를 svg로 표현하면 더 무겁습니다
css를 이용하세요
svg는 브라우저가 하나하나 그려줘야하니 복잡해질수록 무거워지죠
알려주셔서 감사드립니다ㅎㅎ
삐약이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
요런 느낌일까요~?
사진
ㅎㅎ 정말 예전에는 이미지 하나에 아이콘 나눠서 관리하던 시절이 있었는데 요즘도 이렇게 하시는 분 계신가요?
스프라이트 요즘 잘안씁니다
오버플로우를 제일 상위div로 옮기세요
감사합니다~!
동영상
흑 똑같이 화면이 늘어나네요…
RN에서 detox 랑 testing-library 둘 중에 어떤게 자동 UI 테스트에 적합할까요??
@types 디펜던시들은 dev디펜에 넣어야하나요??
랑이님이 나갔습니다.
네. 실제 프로덕션의 경우 전부 제거되기 때문에 devDependency에 넣는게 맞을 것 같아요.
<script defer> console.log('3') </script> 라고 작성을 했을 때 defer 속성이 작동하지 않는 것 같은데 이유를 아시는 분 계실까요?
감사합니다
콘솔의 특정 에러가 표시되지는 않았을까요?
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Security-Policy/script-src inline-script를 막는 브라우저 정책같은게 존재해서 이야기드렸어요.
사진
콘솔에 에러는 발생하지 않고 위처럼 작성하니 defer가 적용되지 않는 것 같더라구요 제가 생각했을 때는 3이 2 아래에 나와야 할 것 같은데 아닐까요?
사진
defer의 경우 src attr이 필수입니다.
인라인 스크립트의 경우는 정상 작동하지않아서 그럴 것 같아요.
defer 속성은 외부 스크립트에만 유효하고 저 코드가 유효하여도 제 생각에는 3 2 로 출력될 것 같네요 ㅎㅎ
지연스크립트도 일반스크립트와 마찬가지로 HTML에 추가된 순으로 실행됩니다
음, 그런데 번들러를 사용하지 않았을 경우에는 2 3이 맞지않을까요?
헛헛 그런가요?
이모티콘
정답은 질문자분이 공개해주시는 걸로 ㅎㅎ
id값으로 다이나믹 라우팅을 사용해서 라우트를 이동할때 id를 기반으로 상세 정보를 불러오는 경우(인스타그램 피드 클릭시와 같은 ..) 상세 데이터를 props로 넘겨주는 방법과 새로운 페이지에서 다시 fetch하는 방법중 뭐가 좋을까요?
"상세 데이터를 props로 넘겨준다"는 의미가 라우터 이동전에 이미 상세 데이터의 정보를 들고있는 상태라는 이야기일까요?
상세 페이지 이동전에는 id값만 들고있어야되지 않나 싶어서 이야기 드렸어요.
약간 인스타그램에 빗대서 생각하면
홈에서도 상세 페이지 내용을 일부 볼수있는데
이럴때 홈에서 들고있던 정보중 어디까지 넘겨줘야하는지가 좀 모호하네요
인터페이스가 완전히 동일하지 않다면, 페이지 넘어가고 나서 새로 부르는게 낫지 않을까요? (정확하게 어떤 구조인지 몰라서 섣부른 답변일 수는 있을수있어요)
데이터 성격따라 기획정책이 필요할 수 있다 생각이 드는데
이모티콘
역시 그럴까요 ….
그냥 개인프로젝트중인데
아아 개인프로젝트!
이런 상황에 컨벤션처럼 쓰이는 방식이 있나해서 궁금했어요
이전 리스트 데이터에서 가져오지말고 새로 가져오면서 생기는 여러케이스를 다뤄보는건 어떨까요?
상세페이지로 들어가서 여러명이서 수정할 수 있는 데이터라면 사실
상세페이지 들어갈때마다 최신데이터가 보여지는게 맞는거 같아요
다만 그 개발방식은 여러가지..
리스트에 상세정보가 보통은 다 업지않나요?
만약 홈에서 보이는 정보가
UI만 다를뿐 상세페이지에서도 완전히 동일하다면
그냥 props로 넘겨주는게 더 효율적일까요?
데이터가 시간에 따라 다르다면 문제가 될 가능성은 존재할 것 같아요.
그게 바뀌는데이터가아니면 굳이 다시 불러올 필요가 없다는 생각이 들어요
튜브님생각이제생각
음음 그렇군요 확실히 개발상황에 따라 다르긴하겠네요
네 ㅎㅎ 막상 버그터지면 생각이 잘될지도..
이모티콘
사진
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ새벽인데 빵터지네요
이모티콘
사진
저렇게 회원가입 박스가 저렇게 위에 나타나려면 css로 어떻게해야하나요??
탱구님이 나갔습니다.
안녕하세요 radio버튼에서 onClick으로 react hook form에 있는 값을 바꾸고 있습니다. 그런데 styled-compontent에서 props값을 전달하면 싶은데 한 박자 늦게 바뀝니다. 제 생각에는 랜더링이 onClick이 반영되기 전에 실행되고 있는 것 같은데 한 박자 늦게 랜더링을 시키는 방법이 따로 있는 걸까요? 아니면 styled-component의 props를 버튼 클릭했을 때 연동시킬 수 있는 방법이나 키워드가 따로 있나요?
watch로 훅폼값바뀌는거 탐지할 수 있어요
삭제된 메시지입니다.
watch를 찍었을 때는 값이 나오는데 styled-component에 props로 넣을 때만 직전에 누른 버튼의 값이 들어갑니다.
음,,, 그러니까 어떤 버튼 누르면 값이 100, 200, 300으로 바뀌게 만들었고 실제로 바뀌고 있는데, 그게 어떤 styled-components 의 props 에 넣으려고 하니까, 한박자 느리게 작동해서.... 직전의 값이 들어간다는 말씀이실까요?
아 감사합니다!!!!!!
!!!!!!!! 맞아요
header 또는 nav로 마크업한다음에 클래스 속성 달아서 css작업하면 되지않을까요?
arr = [ {id:1, name:a}, {id:2, name:b} … ] 이런 데이터에서 id: 2의 name을 c로 수정하고싶다면 arr에서 id가 2인 객체의 idx를 찾아서 arr[idx][name]을 수정해주면 되는걸까요…? 매번 이런식으로 하고있는데 혹시나 다른 방법이 있을지 궁금해서 여쭤봅니다
map을 써도 되지요
arr.map((item) => item.id===2 ? {…item, item.name : c} : item});
오호!! 감사합니다!!!
잼잼이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
라이언 붕붕카를 탄 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
초롱초롱 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
999명이네요. 1000명의 주인공은 ㅎㅎ
이모티콘
잼잼이님 라이언 붕붕카를 탄 무지님 초롱초롱 무지님 모두 모두 반갑습니다 :)
옛날 분들은 현재까지도 디자인이 프론트엔드 영역으로 보는 시각이 많네요… 반고흐의 작품을 알아야 한다는둥.. 여기 여러분들을 몰랐더라면 속절없이 믿을만 하게 말을 하는데 어우…ㅋㅋ
10년전 시각이죠ㅎ HTML와 데이터 조합을 백에서 하던 시절 웹 디자이너가 HTML+CSS를 하던 때가 있었습니다 ㅋ 그때는 프론트 백엔드가 아니라 웹 디자이너 / 웹 마스터라는 용어가 있었습니다 ㅋ
그렇다고 프론트엔드가 디자인을 몰라야 한다거나 할 건 아닌데 반고흐는 좀 너무 갔다싶네요. ㅋㅋ 그래도 최신 UI / UX는 알고 있어야 내 결과물이 촌스럽지 않아집니다
정확합니다 지금껏 그런 말을 하셨던 분들은 전부 완전 옛날 분들…
헉 반고흐..!!! ㅋㅋㅋㅋ 테오님 말에 전적동의합니다 ㅎㅎㅎ 물론 알고 모르고에 차이가 있을 수도 있고, 알았을 때의 더 넓은시야..? 를확보하실 수 있으시겠지만…. 저도 UI디자인 하다가 프론트로 직무전향을 하는중(?) 인데..!! 반고흐는….ㅎㅎㅎㅎㅋㅋㅋㅋ 괜찮을것같습니당!!
음, 아마 넷스케이프 시절쯤 분들이 아닐까요 ㅎㅎ
사진
처음 배울때 이런책 들고 다니면서 암기식으로 했었던 것 같아요 ㅋㅋ
여러분 리액트 프로젝트 사용할 시 환경변수로 사용자가 설정 하는 건 모두 문자열로 인식되는거 같은데 js로 인식되게 하는 방법 아시는 분 있나요?
이미지도 옛날 이미지라 디지털 풍화가 됐네요 ㅋㅋ
2000년대 출판한... 오래된 책인데 기억에 남는 것 같아요 ㅎㅎ
어릴때라서 장미가족 태그교실 책 혹은 카페가 유행했었는데 요즘은 잘 안보이는 듯...
헉.....
ㅋㅋㅋ와..
장미가좈ㅋㅋㅋㅋㄲㅋㅋ넘 오랜만ㄲㅋ
ㅋㅋㅋㅋ
사진
우아한 형제들에서 경력자를 대규모 채용한다고 하네요 관심있으신 분들은 한번 해보시면 좋을 것 같네요
여전히 우형 잘 나가나요
요새 배달업계 매출이 많이 떨어졌다던데…
하트뿅뿅 라이언님이 나갔습니다.
김신입님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 김신입님~~ 반갑습니다 :)
환경변수는 모두 string인게 맞아요. 찾아보니까 node에서 문자열 key value로 구문분석한다고 하네요. 왜 환경변수에 js를 넣으려고 하시는지 알수있을까요?
배포환경에서는 js로 window 객체로 접근하는 코드가 있어서요ㅠ
Github 관련해서 질문이 있습니다 현재 master 브랜치와 stg 브랜치는 항상 동기화 되게 유지중이고 stg브랜치에서 feat/test 브랜치를 따서 작업을 한다고 했을때 stg로 merge 후 test 이상 없을 시 prd로 배포하는 형식인데요. feat/test 에서 stg 브랜치로 merge할때 conflict가 나게 될텐데 이때 이것을 보통 git cli로 해결하나요 아니면 github PR에서 해결하나요? git cli로 해결한다면 git pull origin stg 이 명령어로 충돌 해결하고 git push origin feat/test 로 push하고 stg 브랜치로 merge하는게 맞나요?
안녕하세요 잘부탁드립니당 :)
위 같이 진행하니 항상 conflict 해결하는 커밋이 생겨서 고민입니다
말씀하신대로 컨플릭트 나는 PR에서 컨플릭트 해결하고 나서 머지하는 방식으로 해결합니다!
리액트 빌드 후 산출되는 js, css 파일 이름 설정 웹팩 config file 밖에 못하나요?
지에지에님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
천명달성!!!
안녕하세요! 지애지애님 반갑습니다 :)
이모티콘
음... 어제 올려주신거에는 window.userID 이렇게 작성하셨던데 그냥 userID를 저장하고 싶으신건가요?
이모티콘 안녕하세요 잘부탁드려요
PR에서 conflict가 많을경우 github에서 해결하지 못하던데 이럴땐 어떻게하세요?
어서오세요. 이곳은 프론트엔드나 웹 개발을 하면서 궁금한 것에 대해 부담없이 물어보고 아는 것은 알려주고 공유하면서 함께 성장하고자 하는 곳입니다. 내가 궁금한 것들은 다른 사람들도 궁금할 거라는 생각으로 편하게 글 남겨주세요! 잘 부탁드립니다. :)
Conflict의 경우 하나의 청크단위로 리베이스하여 해결해보는 것은 어떨까요? cli에서 git pull --rebase origin main 이런식으로 쳐보시면 좋을 것 같아요.
혹시 청크단위가 무슨뜻이죠..?
일단 어제 문제는 해결됐는데 단순 궁금하여서 여쭤봤습니다!
git add 하실 때, 같은 파일이더라도 변경 단위를 세부적으로 나눌 수 있는데 그 단위를 뜻합니다. 참고: https://blog.outsider.ne.kr/1247
조금 이야기의 용어를 잘못 이야기드렸을 수 있는데, 일반 confilict 해결의 경우 모든 변경사항을 한번에 당겨 해결을 진행하는 반면, 리베이스하여 당길시 커밋 단위로 conflict을 해결할 수 있어 변경 흐름을 확인 가능한게 장점인 것 같아요.
아 커밋별 충돌을 —continue를 하면서 볼 수 있다는 점인거죠 ?
네 맞습니다.
혼자 작업하는 경우가 대다수다보니, 설명해본적이 별로 없어 말을 잘 못하는 것 같아요 ㅎㅎ
방인원 천명 됐네요?
천명 간지나네요
오와
신나는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
pull에 rebase옵션이 있는건 처음 알았어요 ! rebase origin/main 이런식으로 작업했었는데 원격브랜치코드도 한꺼번에 업데이트해주는 거군요 pull하면 항상 merge커밋생겨서 리베이스 다시 해줘야한다고 생각햇는데 한번에 할 수 있군요 한번 시도해보아야겠네요
아 1001명됐네
나가겠습니다
ㅋㅋㅋ짧은순간
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
님 999명 더 초대하세요
친구가 9명도 안되는데요?
1010도 괜찮네요
ㅋㅋㅋㅋㅋㅋㅋ
아 혹시
1024명 까지 만들죠!
아 1000이마지막이아니구나
2^10
안녕하세요
웹 개발 공부하는 고등학생 개발자 지망생입니다
제가 이미지 3개를 materialui에서 grid를 사용해서 각각 xs값을 주고 불러오고있는데. 화면 크기가 작아지면 이미지가 겹치는 현상이 발생됩니다. 그런거 상관없이 어떤 화면 크기던 딱 고정되게 하고싶은데. 어떻게 해야하나요?
프론트 개발 공부 중에
문득 제가 사용하고 있는 방법이 맞는 방법인가 대하여
의문이 생겨서 질문드립니다
엄청 엄청 기초적인거면... 대답해드리겠습니다...
페이지마다 불러올 데이터가 다르고, 그렇기 때문에 페이지 마다 fetch 로직을 새로 짜주었는데
실제 현업에서도
이러식으로
데이터를 fetch하나요?
데이터 fetch하는 로직을 따로 클래스화해서 함수들을 지정해주고, 함수에 파라미터로 옵션값을 주고 불러내는 형식입니다
저는 그렇게 해요
사진
사진
화면크기에 따라 이미지가 같이 적당한 크기로 작아지지 않기때문에 겹치지 않을까요? grid를 어떻게 짜셨는지는 모르지만 나란히 3장이 있다는 가정하에는 그럴거같아요.
오..
필요한 메서드의 함수를 가져와서 fetch하고 컴포넌트에 props로 부여하는건가요?
저걸 이제 각 페이지 컴포넌트마다
흐음.... front단이 굉장히 약해서 참 고민이네요
저렇게 만들어놓은 클래스를 임포트해서 불러오고
사진
사진
서버와 호출할 담당페이지를 또 하나 만들어놨어요 저는
오홍..
차트js로 이렇게 두가지 종류가 합쳐진 그래프를 구현 가능한가요??
저도 초보개발자라 ㅎㅎ;
안될건 없죠
오호 가능한가요?
처음 해봐서 차트를..
되는 것 같아요 !
제가 공식문서를 보고 있는데 내용이 없는거 같은데 혹시 어디서 보셨나요!?
참고하실분 하세용
감사드립니다!ㅜㅜㅜ
채용 시즌인가요 ㅎㅎ
aixos instance 검색해서 한번 보세요 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {} });으로 인스턴스 만들고 export. 데이터 불러오는 페이지에서 axios를 라이브러리를 불러오는게 아니라 제가 만든 axios instance를 가져와서 인스턴스 메소드 (ex. .get() .post(), ,put()... 등등) 붙이시면 됩니다. 급하게 적었는데 이해 안되시면 다시 설명해 드릴게요
옹..
아 말씀하신대로 로컬에서 해결하고 그걸 PR 브랜치에다가 push 하고, 그다음에 머지한다는 뜻이었습니다~
input 태그에 name을 넣는 게 그 input 태그가 무슨 태그다라고 명시적으로 인식하기 쉽게 하기 위해서 해두는 것이라고 제가 이해한 게 맞을까요? 아니면 그 외로 어떤 기능적인 의미가 있는 건가요?.?
이전(HTML4 시절)에 <form> 태그에 submit을 보낼때 name이 서버에 인식할 수 있는 id값으로 사용되었으나 요즘은 그렇게 사용 안되는 것으로 알고있어요.
저의 경우는 php로 작업할때 주로 사용했던걸로 기억합니다.
input type이 radio일땐 name이 같은것끼리는 하나만 선택됩니다
보통 form을 submit시키면 input에 지정한 값들이 key,value 형태로 서버(action 주소)에 전송됩니다. 그때 input에 지정한 name값이 key로 매핑된다고 보시면됩니다.
답변감사합니다 참고 해 보겠습니다!
<form method="POST" action="…"/> <input type="text" name="userName" value="foo" /> </form> 로 하시고 chrome 개발자 도구에서 어떻게 데이터가 전송되는지 페이로드로 보실 수 있습니다.
(submit 버튼을 빼먹었네)
요즘도 자주 사용되나요?
요즘은 submit자체를 잘안써서..
아직도 많은 웹에서 사용하죠. 절대 없어지지 않을 방식입니다.
네, 제가 이야기하고나서도 워딩을 약하게 했어야했는데 아쉽게 이야기했네요.
요즘은 걍 onSubmit걸고 보낼 데이터 직접 만져서 보내지않나요
현대 프론트프레임워크에서 사용하는 경우는 많이 못봤습니다만 저런 과정을 직접 해주냐, 자동으로 해주냐 정도로 봐도 될 정도로 기본적인 부분이라 알아두시면 좋습니다.
두 분 모두 맞는 말씀을 해 주신 것으로 보입니다 form 태그의 name 프로퍼티는 링크에 의하면 deprecated 되었구 input 태그의 name 프로퍼티는 아직 잘 살아 있는 것 같네요
와 답변 감사합니다.. 다들 답변에 정성이..ㅎㅎㅎ!!
useEffect 관련 질문드립니다..!
애교뿜뿜 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
애교뿜뿜 어피치님이 나갔습니다.
사진
사진 속의 useEffect가 [ ] 빈배열로 디펜던시를 넣어놨는데도 불구하고 처음에 클릭했을 때 클린업이 없는 경우 계속 돌아간다면 뒤에 [ ] 빈배열을 안 넣고 쓰는 것과 동일한 거 아닌가라는 생각이 드는데 맞을까요?.?
대신 렌더링이 다시 일어난다면
useEffect 안에서 저렇게 뒤에 빈배열을 넣었음에도 클린업을 안 해주면 계속 작동되는 예시가 setInterval 비동기랑 또 어떤 게 있나요?.?
타이머가 여러개가 중첩되겠죵
아!...
ㅋㅋㅋ 오 정말 감사합니다!!!! 생각이 짧았네요
혹시 post로 보낼때 입력받는 값이 하나도 없는데 form으로 만들어서 보내나요? 아니면 직접 body를 만들어서 보내시나요??
와 1000명 넘었네
Rest에서 지원하는 content-type 형태에 따라 다르지않을까요?
그냥 일반적인 json데이터입니다! 간단한 바디만 넘겨줄거라서 form을 만들어서 hidden으로 전부 감추고 넘겨주는게 옳은 방법인지 아니면 body를 만들어서 넘겨주는게 옳은 방법인지를 잘 모르겠어서 여쭙습니다!
form 형식으로 보낸다면 hidden으로 감추기보다는 아래 형식을 따르는 것이 좋아보입니다. https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
둘다쓰는 방식이기 때문에 둘 중에 뭐가 옳다는 없을 것 같아요
아하 감사합니다! 역시 이런거 하나하나 지키는게 중요하겠죠?
안중요하다고 말하기는 힘들 것 같아요 ㅎㅎ
ㅎㅎ 감사드립니다!!
이모티콘 우와 여기 천명이 넘었네요!! 축하드립니다!!
혹시.. 웹에서 hls 파일 m3u8파일 재생시켜보신분 계실까요? 라이브러리 쓰시는지 아니면 직접 개발해서 뭔가 재생해주시는지 궁금합니다!!
사진
혹시 리액트 빌드했을때 css js 파일명이 main 이 아닌 다른 이름으로 설정 가능한가요?
Myapp.해쉬값.js 이런식으루
webpack 건드리셔야할것같아요
이거 확인해보세요
사진
webpack.config.js에서 output 설정 변경
이모티콘 다들 즐점하세요~
감사합니다!
JS dom 너무 어렵네요 ㅠㅠ
돔은 참돔이 맛있죠
실전에는 프레임워크를 쓰기 때문에 DOM을 직접적으로 다뤄야 하는 경우는 크기나 스크롤등 몇가지 안됩니다. DOM API의 경우 잘 만들어둔게 아니다보니 쉽게 쓰게 해주는 jQuery가 인기였던 것을 기억하시면서 어렵게 생긴 놈이지만 몇 번 만날일 없을 거라는 생각으로 가벼운 마음으로 접해보새요
호그와트장학생님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 호그와트장학생님 반갑습니다 :)
안녕하세요 ! 이번에 운동과 관련된 커뮤니티를 사이트를 오픈하게 되었는데요, 피드백을 받고 싶어서 링크 공유드립니다 ! https://fit-too.com/ 기능적인 부분이나 디자인적인 부분에 대해서 많이 피드백 부탁드리겠습니다 ! 감사합니다
요즘 트렌드랑 좀 다르게 글씨가 넘 작고 패딩이 넘 좁은거 같애요 ㅎㅎ
특히 카테고리요
감사합니다!
yarn install 시 데브랑 일반이랑 한번에 같이 명령어 입력 가능한가요? yarn install react and @types/react --dev 이런 느낌으로요!
넵!!
가입해보려는데 ㅣogin api에서 401이 오네용
캘릭터도 귀엽고 무난한 디자인이네요. 좋아요~ 카톡 로그인을 하니까 프사 연동이 되는데 프사가 다 찌그러져서 나와요. img 태그를 쓰고 있는데 object-fit: cover등을 추가해주면 좋을 것 같아요.
확인해보겠습니다. 감사합니다
사진
아직 컨텐츠는 없어서 핵심적인 피드에 대해서는 잘 모르겠네요. 스켈레톤이 나오고 존재하지 않는 글이 나와서 번쩍거리는 것 처럼 느껴지는 데 이건 글이 있으면 해소가 될 것 같아서 샘플이든 최초 컨텐츠가 있으면 좋겠어요 ㅎ
탭 내 선택된 탭의 보더height만큼 선택된 탭들이 올라가는데
보완 하도록 하겠습니다. 의견 감사합니다
이것도 확인해보면 이쁘게 만드실 수 있을것같아요!
대단하시네용
오 미쳐 확인하지 못했던 부분인데 꼼꼼히 봐주셔서 감사합니다
브라우저 크기 줄이면 반응형 적용되면서 버벅거림이 꽤 있는거 같아요~
아 이건 제 노트북 쓰로틀링 때문이었네요 ㅋㅋㅋ
이런 부분은 어떻게 해결하는게 좋을까요 ?
아아
감사합니다 ㅎㅎ
아주 잘 됩니다ㅎㅎ
피드백 감사합니다 !! 혹시 이런 부분은 postion으로 디자인 할까요 ?
Spa에서 라우터쓰면서 모달이나 drawer같은것들 어플처럼 브라우저 뒤로가기로 없애는기능 해보신분 계신가요?
확인 감사합니다!
이 사이트는 item.id 코드 예시 테스트 사이트인가요~?
커스텀 훅을 class로 만들수 있을까요
usePopup이라는 훅을 만들었는데 useState로 open toggle을 관리하다 보니까 한 페이지에서 popup이 두개일 경우 state를 공유해버리네요..
훅이 원래 객체가 아니라 함수형을 뜻하는거 아닌가여
저런 경우는 그럼 어떻게 해야할까요..?
state를 팝업 여러개 담을수있게 만들어야하지 않을까요
useState가 usePopup 안에 들어있는건가요?
state[0]이 있으면 state[1]을 추가한다 이런식으로..
그렇군요... 그런식으로 관리해야겠군요
넵
usePopup이라는 커스텀훅에 팝업을 온오프 하는 상태를 useState로 관리하고 있습니다
state를 전역으로 관리해서 usePopup이 아니라 띄우는 페이지에서 관리하게 해도 될거같고..
역시 뭐 정답은 없는거군요
return을 [] 로 하시면 사용할때 const [isAOpen, handleAOpen] = usePopup() const [isBOpen, handleBOpen] = usePopup() 형태로 관리하셔도 무방합니다.
배열 구조분해 할당은 이름이 상관 없으니까요. 아니면 const {isOpen: isAOpen, handleOpen: handleAOpen} = usePopup() const {isOpen: isBOpen, handleOpen: handleBOpen} = usePopup() 하셔도 상태는 각자 독립적으로 관리됩니다.
아하 그렇군요!
감사합니다!
jaja님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아니요 ! item.id를 url로 인식해서 카톡이 사이트정보 자동으로 띄워주었나봐요
라이웅님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
이거 저도 궁금하네요 모달을 띄우면 임시로 url 바꿔주거나 뒤로가기 이벤트 잡아서 close 시키고.. 어떻게 해야할까요
테오, Dom API가 프레임워크에서 잘 안쓰이긴 하지만, 현재 시점에서도 잘 만들어지지 않았다라고 말할 수 있는 자료가 있으면 공유가 가능할까요? 지금 조금 찾아봤는데 아래 벤치마킹 사이트를 이야기해도 될지 테오 생각이 궁금해요. https://krausest.github.io/js-framework-benchmark/2022/table_chrome_104.0.5112.79.html
그래도 웹표준의 영역이라서 항상 공부하자라는 마음가짐과 프레임워크가 결국에는 성능보다는 개발 경험을 더 중요시 여긴다고 생각을 해서 이야기 드려봤어요!
제가 말씀드리는 것은 프레임워크나 라이브러리를 쓰는 것에 비해 DOM API 사용이 덜 직관적인 부분 때문입니다. 가령node.parentNode.nextSibling.insertBefore(refNode, newNode) 이런식으로 쓰게 되는 부분이거나 document.querySelectorAll(...) 에서 혹시나 모를 요소에 대한 접근이나 없을수도 있는 부분이라던가... DOM API를 직접 사용했을때 생산적인 부분이 떨어진다는 의미였어요. 그래서 프레임워크 기반에서는 DOM API를 실질적으로 쓸 일이 별로 없다는 거였어요. 프레임워크가 당연한 웹 개발 시대에서 프레임워크에서 지원을 하지 않아서 실무에서 DOM API를 꼭 써야만 하는 작업들을 생각해보자면 focus, blur, scroll, getBoundingClientRect 이런 것 정도 밖에 없더라 라는 의도였어요
안녕하세요 아임포트 결제 성공 후 리다이렉트 받은 페이지에서 메인으로가기 버튼을 누를 경우 history.push('/') 로 메인으로 보내줍니다 메인페이지에 도달했을때 해당 레이아웃이 깨지는 현상이 발생합니다 이유가 무엇일까요 ..? 웹뷰입니다.
그쵸~ 비슷한 맥락으로 실무와는 거리는 있지만 당연히 알고리즘과 자료구조처럼 DOM역시 깊은 지식은 알면 좋겠죠 ㅎ
결국에는 DX를 중요시여기고 특별히 로직을 이상하게 짜지 않았을 경우에는 성능과 연관되지는 않는다는 이야기네요. 혹시 성능과 관련되어 이야기가 되면 어떤 자료를 근거로 이야기해야되나 궁금했어요. 답변 감사드려요~
angular(incremental dom), svelte가 virtual dom을 사용하지 않고 속도를 낼 수 있는 이유와 연관지어서 궁금했던 점도 있었어요.
다른 개발자가 위 내용을 이야기해달라고 했을때 생각보다 이야기 하는게 까다롭다고 생각했었거든요.
관련 문서: https://www.slideshare.net/gyeongseokseo/virtual-dom
혹시 atomic pattern 쓰시는 분들 사내에서 testing 단위는 어떻게 가져가시나요?
저는 중첩라우팅으로 모달을 서브라우터에 넣고 모달버튼 누르면 해당주소로 이동하는걸로 했네요. react router dom v6의 outlet을 사용했습니다
https://youtu.be/FhYefTLiJkE 일하다가 말고 갑자기 궁금해져서 찾아봤는데 설명 잘되있어 참고자료로 공유드려봅니다.
앗 그렇군요ㅎㅎ 답변 감사합니다~!
오와 감사합니다! 라우터 쓴지 진짜 오래되었는데 v6나오고 새로워진거같네요 ㅋㅋㅠ
Nextjs 사용하시는 분들 플젝 새로 만드실 때 create next-app 이거로 새로 만드시나요 ? 아니면 다른 세팅 방법이 있나요 ?
와 이방 벌써 1004명이군요 ㄷㄷ
천사같은 방장님 덕입니다
이론적인 이유로는 효율을 따지고 벤치마킹 결과로는 얘기를 할 수 있겠지만 체감성능차이가 미미하다면 결국 생산성인 측면이나 배우기 쉽거나 미리 배워둔 사람이 많은게 유리하겠죠.
네. 저도 결국에는 생산성에 대해서 큰 장점이라고 생각은 하는데 이전에 다른 개발자분이 성능 중심으로 렌더링 전략에 관해서 설명해달라고 한적이 있는데, 솔직히 설명이 잘안되더라고요.. 갑자기 그 기억이 나서 이야기 드렸던 것 같아요.
virtual DOM을 쓰는 것은 속도를 향상시키기 위함이 아닙니다. 안 쓸 수 있는 방법이 있다면 더 빨라지겠죠. 바닐라 스크립트를 1로 두는 이유가 DOM 조작을 제외한 나머지 기능들을 하지 않기 때문이겠죠. 그래서 벤치마킹적으로 속도가 잘 나오는 것처럼 보이게 하려면 스크립트를 덜 쓰는 방법이 좋겠죠
그래서 virtualDOM을 안쓰는 전략 svelte나 solid, angular 등의 경우 변경된 데이터를 추적하고 변경해야할 곳만 가지고 있다가 DOM조작을 하는 방식을 통해서 DOM diff가 아니라 데이터 diff 를 통해서 diff 연산을 적게 할 수 있어서 벤치마킹상은 빠르게 나오고 있어요
스벨트가 리액트 점유율을 뛰어넘는때가 올까요?
고민을 많이 했던 부분인데 관련 의견 주셔서 감사합니다.
실무에서 신규 프로젝트 생성할 때 vue2 혹은 vue3중에 뭐가 좋을까요?
스벨트야 힘내…
대신 React에서는 이러한 부분에 대해서 개발자가 언급하기를 벤치마킹 점수를 높이기 위해서는 그렇게 하는게 맞지만 Virtual DOM이라는 방식을 통해서 DOM을 렌더링하는 전략을 만들수도 있고 기존에 데이터를 변경 전략을 만들지 않고서도 덮어쓸 수도 있기 때문에 일장일단이 있다라고 말하고 있기는 해요
힘들거라고 생각합니다ㅋㅋ jQuery의 점유율은 아직도 react보다 높아요. ㅋ
태오는 신규개발자가 React 약간 신봉자 느낌으로 Svelte를 왜 사용하는지에 대해 의문을 가졌을때 어떻게 이야기 하는편인가요?
svelte를 좋아하는 저로써는 그냥 React를 안쓰면 안될 것 같은 분위기 정도만 되었으면 좋겠어요. ㅎ
네! React 하셔야죠! 라고 합니다. ㅋ
ㅎㅎ 오히려 명쾌해서 좋은 것 같아요. 감사해요.
이번에 팀 토이프로젝트 스벨트로 하고 싶었는데 어쩔수없이 리액트 ㅜ
Svelte 한번 해보쉴? 했을때 오~ 궁금하네요 관심있어요! 라고 하면 찍먹을 시켜드리고 아닌 사람에게는 굳이 싸우거나 설득시켜야할 필요는 못 느끼고 있어요
그렇지만 만약에 회사에서 하나의 프레임워크로 통일을 해야한다라고 하면.... 그때는 좀 심각하게 고민을 해봐야곘네요
개발 생태계에서 점유율이 떨어지는 부분에 위치하면 항상 이런 것들에 대해서 고민이 되긴 하더라고요.
맞습니다. 사시 저도 운이 좋아서 svelte를 현업에서 쓰고 있지만 React로 갈아탈 각오는 항상 하고 있습니다
vue와 react는 공존상태로 계속같이 경쟁하면서 가게되는걸까요?
이번에 사이트에 클립보드 복사 기능을 넣고 있는데 카카오톡 웹뷰에서 뜨는 케이스입니다. 그런데 아래와 같이 소스코드를 넣었는데 리액트 페이지를 만들어서 카카오톡 웹뷰로 띄우면 정상적으로 복사가 되는데 왜 nextjs 로 띄우면 안되는걸까요,,, 혹시 이런 경우 있었던 분 계실까요?
사진
vue는 어떻게 생각하시나요? 테오님!
에반유가 요새 vue보다는 vite에 더 깊게 파고 있는 느낌이라서 Next가 좀 나와봐야 알겠지만 vue3가 생각보다 흥행을 못했어요. ㅠ vue2는 워낙에 레거시가 많아서 vue가 쉽게 사그라들지는 못하겠지만 Next thing에서 갈리지 않을까 생각합니다. 더 쉽고 더 빠른 프레임워크라는 자리는 svelte나 solidjs 등이 나오고 있구요
https://viteconf.org/ 이전에 공유드리긴 했는데, 10 11-12날 에반유가 발표하긴해서 저는 관심있게 보고있어요.
리액트를 공부하고 입사는 뷰로 했는데 뭔ㄱ ㅏ불안하네요 ㅋㅋㅋㅋㅋㅋ vue3 써보니까 잼긴해서 좋았는데
하지만 vue쪽 생태계나 커뮤니티 파워가 막강하기도 하고 국내한정으로 react 강세가 워낙 센거지 아직은 vue 생태계도 작지 않은 것으로 알고 있어요. vue2 -> vue3로 넘어가는게 좀 쉽지 않아서 angaulr의 전철을 밟지 않을까 걱정은 됩니다. 메타 프레임워크들이 vue는 잘 만들어 주지 않는 것도 있구요.. 이미 react는 next, remix, redwood 등 계속 나오고 있고 bun들도 react 부터 일단 지원을 하고 있고
이미 컨퍼런스부터 vite컨퍼런스ㅋㅋ
프레임워크는 항상 더 빠르고, 쉽고, 멋진것들이 나오니 결국 돌고 돌아 근본인 자바스크립트를 잘 해야겠네요.. 언제든지 갈아 탈 준비..!
머 자꾸 새로운게 나오고.. 공부 그만하고싶어요 우웩
돌돌js..
맞아요. 근데 자바스크립트를 잘한다라는 표현도 애매한것 같아요. 코어 자바스크립트를 잘한다는 것만이 경쟁력이 또 아닌것이기도 하구요 ㅎ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그래도 막 크게 바뀌는게 아니니까
특정 개발자가 어느 개발자의 결국에는 슈퍼셋이 될 수는 없다고 생각해서 각자 다른 사람이 그 시간에 보지않은 파트에 대해서 잘 설명하고 이야기할 수 있다면 경쟁력은 있는 것 같아요.
그런 걱정은 근데 하지 마세요. vue <-> react 전환에 대해서는 어렵지도 않을 뿐 더러 vue를 잘하면 당연히 react도 잘할거라고 생각합니다
결국 베이스는 같기에 전환은 쉽다라는 뜻인거죵?
맞아요.. 잘하는 사람은 금방 다 잘합니다
안녕하세요 고민고민하다가 여쭤봅니다! 현재 스타트업 두 곳에 최종합격해서 행복한 고민하고 있어요. 저는 두 회사 모두 좋은회사 같아서 다른분들의 생각이 궁금합니다. A회사는 B회사에 비해 연봉은 적지만 체계가 갖춰져있어요 프론트 백 ios 안드로이드 이렇게 갖춰진 상태입니다. 그리고 테스트없이 기술면접보고 일주일 쯤 후에 합격소식을 들었습니다. B 회사는 A회사에 비해 연봉이 높고 자유로워보였어요 하지만 사수가 없고, 주 1회 비대면으로 대기업IT 시니어 개발자분한테 컨펌을 받을 기회가 있습니다. 테스트를 보고 면접을 봤습니다. 얼른 답변드려야하는데 너무 고민만하다보니 머리만 아프네요,,, 어떤 기준을 가지고 회사를 선택해야할까요?
저도 이런 케이스에 뷰2 뷰3 두번째 회사째 뷰입니다.. ㅎ
영어 잘하면 듣고 싶네요! ㅠㅠ
저도..영어를 ㅠ_ㅠ
사수는 없지만 동료는 있나요?
저도 영어는 잼병이라, 항상 자막 번역에 빌붙어서 보는 것 같아요 ㅋㅋ
저라면 B를..
내부 기술스택을 알수있을까요?
저라면 A를..
기존에 계신 개발자 분들 모두 이직을 하고, 면접때 최소 2명이상 뽑는다고 해서 아마 동료는 있는거 같아요
이직크리
저는 자유롭고 연봉높은 회사요...
이직하신 사유도 여쭤보셨나요?..
면접할 때 더 잘맞았던 곳으로..
관심있는 기술스택에 대해 공부하다가 더 배우기 좋은 환경으로 이직하신다고 들었습니다
저라면 B, 초봉이 높은건 매우 유리...
첫 회사라면 본인의 개발 프로세스가 정립되지 않은 상태로 시작하게되면 생각보다 많은 고생을 하게 됩니다. (제가 그랬거든요) 반대하는 것은 아니지만, 다른 팀들의 개발문화, 현재 도메인의 가장 유사한 오픈소스 혹은 경쟁사에 대해서 꾸준히 모니터링하고 객관적으로 자기평가를 하는게 중요한 것 같아요.
저같으면 체계있는 곳이 장기적으로 일하기 좋은거같습니다
두 회사 모두 비슷했는데요 Nextjs, Typescript이고 A는 RN과 Mobx B는 아마 가서 선택해야하는 단계같습니다 면접땐 위 기술스택만 들었어요!
저는 같이 일하면서 서로 이끌어 줄 동료만 있다면 B가 좋아 보이네요
저도 같은생각입니다.
(사수가 없는 경우, 개발팀이 신설된 경우에 관련된 이야기 였습니다.)
사수가 있던적이 없어서 ㅠㅠ 제가 이렇게 말하는게 비교가 안될 수도 있을 것 같긴해요..
선택해야하는 단계면 조금 아쉽기는 합니다. 리딩해주실수있는 분이없다면... 쉽지않을수있어요
이 상황이면 엄청난 고통..
동료가 어떤분인지 알수가 없네요 ㅠㅠ,,
저도 사수가있던적이없어서... 리딩해주실수있는분이 있는곳을 추천드려요..
지금 시점에서 스타트업은 자금력과 투자상태가 제일 중요한 것 같아요. 물론 초봉도 중요하구요..
그런데 항상 좋은 사수를 만난다는게 보장이 되진 않아서 자유로운 분위기도 어느정도 장점은 있을 것 같아요.
주 1회 시니어개발자분께 컨펌받을 기회가 있긴한데, 비대면이고 회사소속은 아니고 다른 회사 소속이지만 컨펌을 해주시는거라서,, 이부분도 좀 고민이 되네요,, 최대한 연봉이나 복지보단 성장에 초점을 두고 있습니다 !
제가 볼때 b는 진짜 밑바닥부터 채워야 하는 상황인거 같아서 많이 힘들거같아보입니당..
시드 단계인데 주니어밖에 없으면 일은 재밌을 수 있고 으쌰으쌰할 순 있지만 회사 망해요.ㅠㅠ
ㅎㅎ 그래서 항상 자기객관화가 중요한 것 같아요. 너무 낙심해서도 안되고, 너무 해이져도 안되는 것 같아요.
초기 개발단계에서 다른 오픈소스나 타회사와 비교했을떄 항상 우리 서비스의 강점이 뭐지라고 물었을때 부족한면만 보여서 자기회의 들때가 많더라고요.
회사의 서비스가 내가 관심있는 분야인가 도 중요할거같네요
근데
연봉이 복지고 성장인거같아요
최고의 복지.. 연봉..
초인님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저는 예전에 제 능력과 거의 맞지 않는 높은 연봉의 회사를 갔다가 B의 경우와 비슷하여 주니어로선 성장하기 힘들다 판단하고 나온 적이 있어요
저의 경우 제가 한 일에 대해 진정성 있는 인정해주는 것이 최고의 복지라고 생각해요.
첨예하군요.. 성장인가 연봉인가
근데 저는
기술적으로 재미있어보이는 회사 왔습니당
둘중 하나만 제대로 있어도 성공
초인님이 나갔습니다.
어렵네요,,,
시기마다 본인이 선택의 기준을 갖고 선택하는 것도 방법인거 같아요
완전한 답은 없는데 어떻게 성장할지 어떤 개발자가 될지 그려나가는게 필요한거 일수도 잇고여
나중에 연봉은 올릴 수 있다면 당장은 성장에 더 신경을 쓰는게 장기적으로 봤을 때 더 좋지 않을까 생각했어요 그때도 사람 더 뽑는다 했는데 바로 뽑히지도 않았고.. 새로 오실 분도 회사에 들어오셔서 적응해야 하는 기간이 있을거고 해서 그냥 기존에 이미 적응하신 동료나 사수 + 바로 옆에 있는 사람들과 함께 하는 것이 개인적인 경험 상에선 더 좋았던 것 같아요!
이모티콘 답변 해주신 분들 모두 정말 정말 감사합니다. 한 분 한 분 답변 다시 읽어보고 결정해보겠습니다 :)
ssr에 비해 csr이 가지는 강점은 뭐가 있을까요? 구글링해보면 mpa와 spa의 차이점만 나와서 여쭤봅니당
미래의 내가 알아서 잘하겠지 하면서 극한의 환경에 자신을 던지는 것은 어떨까요 ㅎㅎ
젊을때 고생해봐야지 하면서 위 생각으로 몸을 던졌습니다 ㅋㅋ
토이프로젝트도 아니고 취업을 그렇게 하이리스크로 하기엔 너무 모험 아닐까여
(후회중)
실시간으로 반영되는 데이터를 수정해야 하는 경우에 ssr보다 빨라요
예를들어 뭐 주식 데이터라던가
ajax로 하면 되니까
근데 요즘에는 둘 다 합쳐서 씁니당
그럼 react가 nextjs에 비해 가지는 장점은 뭐가 있나여??
요즘은 구글 검색엔진이 발전해서 SPA도 곧잘 잘 긁어서 가져가더라고요.
화난 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
화난 튜브님 반갑습니다 :) 어서오세요
맞아요 기다리더라구여
최적화나 이런 작업들을 신경쓰지 않아도 해주고
말씀드린 ssr csr 이런것들도 편하게 할 수 있어서요
리액트는 csr만 하는거 아닌가요?
아 next 장점 말씀하시는줄...
리액트도 ssr 돼요
다만 좀 번거로울 뿐이죵
질문이 잇는데요 보통 계산이 필요한 경우 클라이언트에서 계산을 하나요 아니면 서버에서 계산한걸 보내주나요?
각 상황마다 다를 것 같아요. 사용자 리소스를 점유해야하는 경우면 클라이언트가 맞고, 그 반대라면 서버가 맞을 것 같아요.
안녕하세요, 입사한지 4개월차가 되고 있는 주니어 프론트개발자 입니다,,! 다름이 아니라 이 회사에서 계속 일할시 물경력만 쌓일 것이 너무 확실한 곳이라서 (또한 도메인이 저의 관심사와 거리가 멀어 일에 흥미가 가지 않습니다) 이번달까지만 다닌다고 말씀을 미리 드리고, 계속 이직준비를 지금부터 할지 혹은 회사다니면서 이직준비를 하고 합격을 했을때 퇴사를 말씀드려야할지 고민입니다. 다니면서 하려다가 좀 흐지부지 될 것 같아서요..! 어떻게 하는게 좋을까요?
답변감사드립니다
게임으로 생각하시면 서버가 게임엔진의 GPU가 하는일을 전부 해서 주면 좋겠지만 그렇게하면 회사가 거덜나지 않을까요?
저는 무조건 합격 했을때 퇴사했어요
안전빵은 있어야죠
공부할 양이 많으신거면
퇴사하셔도 괜찮지만..
요 ㅎㅎ
아.. 그렇군요… 공부할 양이 많다기보단 제가 좀 해이해질까봐서 고민중이었습니다.. 하하
저라면 A... 신입의 경우에는 프로세스를 잘 경험하는것도 중요하다고 생각되어서. 연봉 차이가 엄청나지 않다면 A가 추후에 더 좋은 연봉을 받기에 편하지 않을까 생각해요
명확하게 계획있으시면 퇴사하시고 아니시면 계획세우고 퇴사하세요~ 둘다 아니시면 다니시면서 준비하시는게 낫습니다! 일단 이력서를 던져보시고 시장에서 내가치가 어느정도인지 판단 후에 결정하시는게 좋아보여요
아아! 네 감사합니다!!
근데 그 마음이 막상 퇴사를 하고 쉬는 시간이 많아지면 왠만큼의 의지나 장치가 없으면 퍼지기 훨씬 쉬워서요. 회사안에서 공부를 같이 할 수 있을거라고는 생각합니다만 나갈꺼라면 장치나 계획은 좀 필요할거라고 생각합니다
아.... 흠... 그렇네요.. 맞는 말씀이신것 같습니다..! 아무래도 다니면서 공부를 쭉 해봐야겠네요 감사합니다!!
상황에따른 적절한 분배를 하는게 좋을거같군요
오픈채팅 들어오게 된 계기가 다른 사람들 공부하는 모습 함께하면서 자기개발 더 하려고 한건데 확실히 남들이 공부하는 모습보면 의욕이 나는 것 같아요.
업무의 강도가 강하신것이 아니라면…공부하다가..!! 취업이 되면 퇴사를 하셔도 늦진 않을 것 같습니다 ㅎㅎㅎ 물경력이고 흥미없고 도움되지 않는 환경일지라도 현업에서 경험할 수 있는 것이 언젠간 면접이라던지… 요런곳에 쓰일때도 있을 수 있어서 ㅎㅎ
근데 막 엄청 야근 매일하시고 진짜 주말에도 짬내서 이력서 한줄쓸시간도없고 미쳐버리겠으면… 진짜 그 의지 갖고 퇴사하셔서도 일찍일어나서 준비하시구 하세옹 ㅠㅠ!!!
업무의 강도는 전혀 강하지 않습니다! 오히려 별로 하는 일이 없습니다.. 일하면서 공부를 좀 해야겟습니다...
아니요! 칼퇴근 합니다! 다니면서 준비 해야겠습니다 ㅎㅎ
비슷한 고민을 하신 분들에게 말씀드린 이야기도 있는데 회사에서 기술적인 성장을 못하겠다면 소프트스킬을 올리기 위한 연습공간으로도 한번 생각해보세요. 사람이랑 친해지고 얘기를 잘하고 비효율적인 프로세스를 개선한다거나 그런것들쪽으로 시선을 돌려서 회사생활의 의미를 어떻게든 부여해보심도 어떠신지 말씀드려봅니다. 개인 사정을 모르니 함부러 말할 수 있는 것은 아닐테니지만 다니는 이유는 만드시면 좋은 것 같아요
저같은 경우에는.. 뒤돌아보면 멘탈적 성장을.. ㅎ...많이 한거같긴 합니다.
맞아요 의미없는 경험은 없으니까요! 이직 준비하면서도 조금씩 배울점들을 생각해보고 주의도 더 살펴보고 해야겠습니다. 좋은 말씀 감사드립니다!!
리액트 쿼리를 사용하는중 버튼을 클릭했을때 해당 기간에대한 데이터를 서버로부터 받아와야하는데요. 이럴경우엔 useQuery가 맞는거같은데 enabled를 사용해서 처리해야하는지, get요청이지만 useMutation을 사용해야하는지 고민입니다..
일반적이라면 useQuery가 맞을 것 같은데요
enabled처리로
마운트시 요청을 제한할까요?
이게좀 부자연스럽다고해야하나...
비슷한게 닉네임등의 중복요청시에도
get요청이니까 useQuery가 맞는거같은데
뭔가 조건부요청을위해 enabled처리가 부자연스러워서요..
https://dico.me/topic/articles/296/ko 예전에 혼자서 개발문화를 바꾸려고 노력하신 분 글이 떠올라 공유드려요.
useMutation으로 처리하고있든요
현재 회사 분위기가 마음에 안든다면 이직도 방법이지만 사내 문화를 바꾸는것도 하나의 방법이라고 생각을 해요.
오 읽어보겠습니다 감사합니다!
어떤 조건에 따라 요청 여부가 나뉘나요?
저도 완전 비슷한데요 저는 제 실력 대비 입사한 것 자체만으로도 감사하다고 생각하고! 좋은 환경의 회사를 갈만큼 실력을 쌓으려고 나서 퇴사를 해아할 것 같아서 그냥 근무 외시간에 노력하고 있어요 주말에도 스터디나 강의듣고ㅜ
페이지내에 재고불러오기 버튼이 따로있다라고 생각하시면 될것같아요
그렇군요...! 저는 너무 매일 감정적으로 좀 힘들어서 빨리 옮기고 싶은 생각이 너무 강하게 들어서요...!! 다니면서 공부하면서 계속 이력서 돌려보랴고 합니다..!
조건에 따른 enabled 처리가 저는 나쁘지 않은 것 같은데, 어떤 부분이 부자연스러우신걸까요?
사진
이런상황이 아닌, 유저의 직접적인 액션에의한 것이라서 그런생각이 들게되네요
사내 메시지에 컨퍼런스 갈사람 구해보세요 ㅎㅎ
다들 좋아하십니당
컨퍼런스요? 주말에 등산이나 같이 갈까요 ㅎㅎ (농담입니당)
오히려 좋습니다.
이모티콘
우리회사는 맨날 서로 싸워요. ㅠㅜ...
허브의 개발일지님과 Herb님은 무슨관계이신가요?
두분다 제가 존경합니다
허브님, 허브님 회사에선 UI테스팅 어떻게 하시나요?
제가 처음부터 참여한 프로젝트가 아니고 제가 주니어라서
주도적으로 테스트를 가져가고 있진 않지만
QA팀이 따로 계시고 저는 Testing library로 Dom event 기반으로 원하는 결과나오는 지 통합 테스트 하고 있어요
저도 주니어라서 다른 회사는 어떻게 하는지 궁금해서 여쭤봤습니다. 제 얄팍한 지식으로 내린 판단은 UI 컴포넌트 테스팅까지 하는게 맞나... 싶어서요
아 QA팀이 있군요
저희도 atomic 인데 UI 컴포넌트 테스팅의 경우
테스트가 통과될지라도 원했던 전체 시나리오 행동과 달라질 수 있어서
RN이라 좀 다를 수 있지만 스크린 기반으로 행동 단위로 테스팅 하고 있어요
후
능력자분들이 많네요
그래서 BDD 단위로 시나리오 짜고 있습니다^^;;
노가다의 삶
고수....
저는 UI는 storybook을 사용해서 차곡차곡 모아두는것에 만족하고있습니다...
저도 UI 짜보고 싶네요
비즈니스 로직 아직 못만지는 중이에요
BDD.... 잘 모르는거 메모...📝
제가 아는 bdd는
롤 프로게이머밖에 없는데
역시 고수분들은
atomic pattern으로 만들다 보면 작은단위로 잘게 쪼개는게 의미가 있나 싶기도한데 어떻게 생각하시나요? 확장성이 없어서 재사용을 못하겠는데... 그냥 제가 못만들어서 그런걸까요 8ㅅ8
하다가 때려쳤습니다...
곽보성씨...
아토믹은 약간 이론적인거같아요.. 실무에서 사용하기에는 너무 애매한게 많은거같아요 ㅠㅠ
저는 아닙니다 빼주세요..
아토믹 별로같아요
ㅠㅠ오 그렇군요
저는 쪼갠다음에 재사용하는게아니라 재사용할 컴포넌트를 쪼개넣습니다. 재사용안하는건 그냥 해당컴포넌트에 선언합니다
저는 아토믹을 싫어하지는 않지만 구성에 목숨걸기보다는 개념의 공감대 형성이 더 우선적이라는 생각입니다
컴포넌트를 분리하면 가독성이 좋아질줄 알았는데 또 그렇지만도 않고... 어떻게하는게 좋을지 항상 고민이네요 ㅠㅠ
너무 아토믹 형태에 묶이지 않으시는게 중요한 거 같습니다
휘파람 프로도님이 나갔습니다.
저도 메모합니다..🙌🏻
https://yozm.wishket.com/magazine/detail/1565/ 여기서 나오는 테오님 글
꺅 감사합니다!!!
혹시..
사진
Chart.js 사용중인데
요소중에 비율이 너무 작은건.. 아예 조금이라도 색표현이 안되던데
이런거에 대한 수정을 진행해보셨던 분 있을까요
노란색이 1로 다른거에 비해 너무 비율이 작아 아예 뜨지가 않네요
타입 스크립트가 처음이라 애를 먹고 있는데 다음과 같은 경우 어떤것을 확인해 보면 좋을까요 ?
사진
https://github.com/chartjs/Chart.js/issues/1793 관련 이슈가 있군요
오 감사합니다!
뭔가 억지로 넣어줘야겠네요 ㅋㅋ
현업에 가면 늘 새로운 프로젝트를 개발하나요?? ex 1프로젝트 끝나면 2프로젝트 시작 (반복)
프론트도 수정 보완을 주로 하나요??
Si냐 솔루션이냐 차이 아닐까욥
전 주로 yield call이 어떤식으로 타입스크립트가 적용되는 지 구글랭해봤던거 같네요. ts에러만으로 추론하기 조금 까다로웠어요ㅠ
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
신나는 프로도님이 나갔습니다.
뿅뿅 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
이 도움으로 해결했습니다! 감사합니다! 원형차트가 그려지는 data에는 기존 값을 백분율로 바꾼 뒤에 젤 1보다 작은 값들은 1로 반올림을 해줘서 차트에서는 작은 비율이라도 최소 1의 비율로 들어가게 했습니다. 이 경우에 실제 데이터를 보여주는 툴팁에서의 수치도 1로 표현이 되어서 이 곳에 들어가는 툴팁 내용은 콜백함수를 써서 기존의 값을 넣는 형태로 진행했습니다! 덕분에 금방해결했네요! 좋은 주말 되세요!
혹시 해피해킹 사용하시는분?
저욤
아~ 기존 코드에 ui요소 추가해야되는데 전부 프레임워크없이 제이쿼리로 떡칠되어있네여…
미래를 생각하면 어떤방향으러 ui를 추가해야할까여…
맥도 사용하시나요?
넹
ui/ux 트렌드를 파악하기위한 추천해주실만한 사이트가 있을까요 ??
저는 이거 추천
키세팅 어케 하시나여? 맥에서 컨트롤 캡스락으로 쓰기 애매하던데
오 감사합니다 !
그냥 그렇게 사용하고 있어요. 저는 나름 편하게 사용하고 있습니다 ㅋㅋㅋ
아하
감사합니다
초인님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
동영상
저장하기는 저렇게 마우스 위에 올리면 색상이 화이트로 잘 바뀌는데 돌아가기 누르면 안바뀝니다ㅠㅜ 하이퍼링크 걸어놨는데ㅜㅜㅜ 저장하기 처럼 하려면 어떻게해야하나요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
솔직히 전 질문을 이해하기가 어렵네요..!
코드를 첨부해주지 않으시면 답변하기 굉장히 어렵습니다 어떤게 문제인지두 잘 모르겟구용
호버할때 컬러를 바꾸면되는거 아닌가요?
button { margin-left: 10px; margin-right: 10px; width: 180px; height: 45px; color: #554C2B; background-color: #FFF7DA; border: none; border-radius: 10px; font-size: 13px; } button:hover { background-color: #c7a54e; color: #FFF7DA; } /*button:focus{ outline:none; color: white; }*/ a:visited {color:#554C2B; text-decoration:none;} a:link{ text-align: center; text-decoration: none; /* 링크의 밑줄 제거 */ /* 링크의 색상 제거 */ }
<button type="button"><a href="html.html">돌 아 가 기</a></button> <button type="submit">저 장 하 기</button>
돌아가기 텍스트 컬러가 안바뀌는게 문제인가요?
react-native 공부중인데 텍스트에디터 추천해주실만한 것 있나요?
프론트님이 나갔습니다.
내네ㅠㅜㅜㅠㅠㅠㅠㅠㅠㅠㅠ
텍스트가 버튼 태그 내부의 앵커에 들어있어서 그런거 아닐까요? Css파일에 button>a 같이 추가적으로 작성하시거나 돌아가기를 span 태그에 넣어보세요
초인님이 나갔습니다.
button:hover > a { color: white; } 일캐 하니까 되네영
constructor{ this.여기에 -이런 특수문자 쓰려면 어떻게하나요? }
혹시 React query와 fetch 조합으로 쓰면 axios 쓸 때와 달리 사용해야 할 부분이 있을까요?
json으로 파싱해야죠
toast-ui요.
this['-1']= 123 이런식으로 해보시겠어요
혹시 여기는 간단한 홍보같은게 허용되는 방일까요?
팀빌딩이나 유용한익스텐션 유용한 아티클 스터디모집 프로젝트모집 글도 종종올라오더라구요
아하 그러면 포트폴리오 정리 필요한분들 계실까 공유해보겠습니다
사진
[Notion으로 소개페이지 정리해주는 프로젝트 공유] 저와 제 주변인들은 Notion으로 소개페이지를 제작해두고 레주메로 활용하거나 서로 소개받곤하는데요, 그 활용도가 높아 만족하고 있습니다. 때문에 소개페이지를 직접 만들어드리는 이벤트를 진행하게되었습니다. https://bit.ly/3AY2Le1
오
감사합니당
지인이 하는 프로젝트인데 포트폴리오 정리 귀찮았는데 간단히 해두기 좋을 것 같아 공유해요
그래도 신택스 오류 가 뜨네요ㅜㅜ
안그래도 포트폴리오 준비중인데 참고하겠습니다 감사합니다~!!!!
아닙니다 ㅎㅎ 감사합니다~~!!
고수님들 궁금한게 있습니다. cloneNode(true)를 하면 계속 해당 요소를 벗어나는데 cloneNode에 true값을 주면 만약 버튼이면 버튼을 그대로 가져가는 거 아닌가요?ㅠㅠ
let changingBtn = ob.querySelector('button:last-of-type') const changedBtn = changingBtn.cloneNode(true) changingBtn = changedBtn
changingBtn.replaceWith(changedBtn) replaceWith로 줘도 똑같이 벗어나고 어떤 개념이 없는 걸까요? 태오 도와줘요
베개를 부비적대는 라이언님이 나갔습니다.
요소를 벗어난다는 말에 대한 설명을 다시 해줄래요?
하고싶은 코드의 의도가 뭔가요? 왜 cloneNode(true)를 쓰고자 하는 거에요?
cloneNode(true)의 경우 해당 노드부터 자식의 노드까지 포함하여 복사본 DOM을 생성해냅니다 버튼을 cloneNode했다면 버튼 노드 복사본을 가져올거에요
아.. 복사본을 가져오면 그걸 HTML 버튼 요소랑 연결해줘야 되는거군요. 그럼 지금은 DOM에 생성된 상태로 연결이 없는건가요?
연결이라고 하면 클릭과 같은 이벤트를 말씀하시는 걸까요?
아니면 document에 추가(append)가 아직 안된걸 말하는 건가요?
후자일거라고 생각하면 맞습니다 그냥 DOM만 생성이 된 상태이고 어딘가 document DOM tree 어딘가에 추가가 되어야 화면에 나타나게 됩니다
늅new비님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 늅new비님 반갑습니다 :)
안녕하세요!!
이모티콘
rn도 toast ui 있군요
감사합니다
감사합니다. 후자였고 해결했습니다 ㅎㅎ 감사합니다.
addEvent로 주니까 계속 중복해서 이벤트가 생서오디서 가비지콜렉터한테 보내버리려고 했던건데 테오가 해준 조언대로 해결했습니다.
언제나이지만 이분 글은 항상 좋네요! 추천드립니다 == 개발자라면 알고 있어야 할 HTTP의 진화과정 https://careerly.co.kr/comments/66453?utm_campaign=user-share
궁극적으로는 이벤트핸들러로 onclick을 주면되지만 왜 그런지 궁금해서 물어봤습니다 ㅎㅎ
어서오세요 이곳은 프론트엔드와 웹 개발에 대해 궁금한 것들을 물어보고 또 아는 것은 알려주고 공유하면서 함께 성장하고자 하는 곳입니다. 꼭 실무가 아니더라도 고민이나 방향성 커리어나 협업 등에 질문도 환영합니다 잘 부탁드립니다
테오가 생각하는 클린코드에 있어서 제일 중요한 3가지만 이야기해줄 수 있나요?
k8s가 초기에 SPDY 형식으로만 지원하여 소켓 개수가 6개까지 지원밖에 안되서 많은 어려움이 있었는데, 웹소켓 지원부터 편해졌던 것 같아요. https://github.com/kubernetes/kubernetes/issues/7452
사진
https://learnk8s.io/real-time-dashboard 초창기에 요런거 보면서 배웠던게 도움 많이됬던 것 같아요.
3가지만 고르려니까 어렵네요... 이렇게 고르겠습니다 의도를 이해하기 쉬운 가독성 잘 지은 이름 있어야 할 곳에 있는 코드
있어야 할곳에 있는 코드
그리고 추가로... 함수와 모듈을 가능한 작게 만들기
이거 여러의미를 담은거죠?!
네~ 크게는 모듈구조와 계층을 생각했구요 그 다음에는 파일 내에 순서나 응집도를 생각했습니다 ㅋㅋ
와.. 역시 테오님
이모티콘 말 한마디에서 많은 게 느껴져요 친절한 설명 감사합니다
협업 측면에서 의미하는게 많은것 같은데 잘 이해한걸까요?
위에 세가지를 생각하면서 공부해야겠네요. 아래는 나중에....
답변 감사합니다:)
네 남들이 봤을따 이해하기 좋은 코드면 좋은 코드라고 생각합니다. 여기에서 가장 가까운 남은 한달뒤 미래의 나도 포함됩니다 ㅋㅋ
k8s가 아니더라도 fetch만을 통해, 웹소켓처럼 구현해보고 싶다! 라고 생각하신 분들은 참고하면 좋은 글(transfer-encoding: chunked 방식)이라고 생각을 해서 공유드려요.
좋은 링크 공유 감사합니다 :)
있어야 할 곳에 잇는 코드 좋네요
혹시 테오님이 보시기에 프론트엔드로서 cs지식공부하기에 적당하다고 생각하시는 기술블로그나 레퍼런스사이트있다면 추천해주실 수 있을까요?
이모티콘
워낙 양이 방대해서 프론트엔드로서 필요한 cs지식을 필터화시킬 수 없더라구요.. 혹시 괜찮은 블로그있다면 다른 분들께도 부탁드리겠습니다,,🥲
으악! 음... 위키백과와 구글? ㅋㅋ 사실 특정 블로그를 주로 챙겨보는 것은 잘 없었어서요 아까 그분 지그재그의 블로그도 최근에 알게 되었고
ㅎㅎ 너무 테오만 찾아서 기다리고 있었습니다(농담) 혹시 어떤 목적을 가지고 있는지 알 수 있을까요?
실용주의 프론트엔드 개발 이분 글도 좋았는데 CS인지는 모르겠네요 https://peter-cho.gitbook.io/book/
말씀하신것처럼 cs 지식이 워낙 방대해서, 그 내용을 전부 블로그로 기록하기에는 힘들고, 사실 그럴려면 전공자 cs 책을 보는게 맞아서...
ㅎㅎㅎ헣 서운하셨을까요????저는 비가와도 힘내는 튜브님의 답변도 정말 좋아합니다!! 제가 프론트엔드 포폴 준비중인데 그냥 무턱대고 배운 리액트나 자바스크립트공부만 하기에는 배경지식이 너무 부족하고 체계적이지 못한 것 같아서 성향상 기본부터 제대로 쌓기 원해서 공부목적과 전체적인 그림을 위해서 공부하랴고 합니다~!
생각해보니 대학교때 배운게 쓸모는 없지만 헛되지는 않았다는 생각은 드네요 아예 안배운것보다는 알고 있다는 것은 큰 힘이 되는군요
아! 그렇군요ㅠㅠ 워낙 CS 영역이 넓다보니 프론트엔드 영역에 도움이되는 과목이 뭐일까 생각들더라고요! 말씀해주신 블로그도 참조하고, 위키백과나 구글선생님에게 도움을 받아보겠습니다ㅎㅎ
웹커리큘럼쪽을 원하는걸까요? 아니면 전공자쪽의 cs 지식 (운영체제, 알고리즘, 데이터 아키텍처) 쪽을 원하는걸까요?
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
이 에러는 무슨 에러인가요..?
전공자쪽의 기본적인 CS지식를 원합니당..ㅎㅎ 현재 자바스크립트,리액트 를 기본적으로만 다룰 수 있는 상태인데 공부하다보면 모르는 용어도 너무 많고 배경지식이 필요하다는 생각이들어서 그게 아마 전공자 cs지식이 아닐까싶어서요..ㅎㅎ 저는 비전공자입니다!
video나 audio에서 난간가요? 에러가 난 배경은 어딘가요?
js로 audio.src = '주소' 한 후에 audio.play()를 했더니 저러네요...
사이트 내용이 체계적이고 너무 좋습니다! 정독하겠습니다 감사합니다~!
급하게 생각마시고 한과목을 수강해 보시는 것은 어떤가요? 3학점 한 과목 하신다 생각하시고 12월까지
하지만 프론트엔드 입문에는 CS지식이 직접적으로 쓰이는 곳이 거의 없긴한것 같아요~ 아까 드린 프로그래밍 개론을 위주로 공부하시고 필요하면 더 깊이 파시길 바랍니다 프로그래밍 개론 자료구조나 알고리즘 순서대로
맞아요
https://stackoverflow.com/questions/37674223/domexception-failed-to-load-because-no-supported-source-was-found 불러올수가 앖는 내용이라서 그런가보니요 오디오나 비디오가 아닌 주소가나 주소를 접근할수 앖거나 한가 봅니다
안녕하세요! 늦은밤에 죄송하지만 질문하나 하겠습니다. Github actions로 프론트 배포를 하려고 하는데 계속 EnvironmentPlugin에서 에러가 뜨고 있습니다. 혹시 이와 관련해서 아시는 분 계실까요?
사진
감사합니다
오! 너무 좋은 아이디어입니다! 마치 대학교시절로 돌아가서 무리하지않고 한과목수강한다고 생각하고 공부해보겠습니다 감사합니다!!
넵! 참고하여 공부하겠습니다 감사합니다 :)
이렇게 두개 공부해보시는건 어떨까요~!
좋은 강의들입니다
근데 2.mp3라는 파일은 재생이 잘 되는데 2,#.mp3라는 파일은 재생이 안되는데 이건 무슨 경우인지 아시나요..?
new webpack.EnvironmentPlugin(['BASE_URL']) 웹팩에선 plugin에 다음과같이 설정해놓았습니다 혹시 아시는 분 있으시면 답변 부탁드립니다 :)
두 파일 모두 같은 폴더에 있는데..
제가 가장 처음 전역하고 html,css 배울때
서버가 뭔지 뭐가 뭔지 몰라서
보고 공부했던건데
비전공자 이시면 이거 가장 먼저 보는거 추천드려용
왓!!! 저도 진짜 서버가 뭔지 모르겠어요.....
개인적으로 전공자 cs쪽이 전부 다 필요하다고 생각을 하지는 않아요. 그래도 관련있다면 익히면 좋겠다고 생각하는 분야가 - Data Structures https://www.cs.usfca.edu/~galles/visualization/Algorithms.html) - 만약 용어쪽 궁금하면 (https://www.grabbing.me/IT-A-to-Z-By-1e1fbc981b7c4c03ac44943085ac8304) - 운영체제는 전공책 번역이 좋은편이라서 아니라서, 강의 통해 진행하면 좋을 것 같은데 다른분들이 좋은 대학강의 추천해주셨네요. - cs쪽이 devops와 관련이 더 깊다고 생각이 들어서, https://github.com/Knowre-Dev/DevOpsCurriculum 커리큘럼 질문들 참고하여 공부하는것도 방법이라고 생각을 해서 추천드려요.
감사합니다😭
샵검색 : #비전공자를 위한 이해할 수 있는 it 지식
저는 이것도 스터디 했었는데
조금 어렵긴한데 좋았습니당.!
운영체제 북마크 찾는데.... 연습문제 풀이 블로그밖에 안나오네요... 저도 공부 해야될 것 같아요 ㅠㅠ
프론트엔드는 웹 브라우저가 곧 운영체제라 ㅋㅋ
웹 브라우저 전공과목이 있으면 좋겠네요 ㅎ
헉 책 추천 감사합니다
이렇게 정리해서 보내주시다니ㅠㅜㅜㅜㅜㅜㅠㅠㅠ저는 여기 안들어왔으면 어떻게 됐을까요?ㅠㅠㅠ다 참고해서 공부하겠습니다! 정말 감사드려요🥲
앗 그 유명한 it지식 책이네요! 저도 구매해야겠어요 감사합니다~~!
감사합니다 나중에 한번 링크나 교재등이 정리되면 한번 공유해주세요! 덕분에 다른 분들도 좋은 자료들을 알게 되셨을 거에요!
네!!!! 한 번 싹 공부하고 강의 들어보고 정리해서 공유하겠습니다~~! 받은 것보다 배로 돌려드릴 수 있기를🥺
저도 비전공자이지만 정말 뭐 기본적인 프로토콜이나 동작 방식 같은 걸 프론트적으로 접근하면 쉽더라구요 저도 도움 받은 강의가 있어서 하나 알려드릴게용! 기획자나 관리자 기준으로 되어 있지만 애자일, 워터폴같은 개발 프로세스도 그렇고 기본적으로 개발자, IT회사에서 일하는 사람들 모두 알고 있으면 좋은 지식들이라 저희 회사에서는 이걸 사원 전체가 듣고 있거든요! https://www.inflearn.com/course/%EB%B9%84%EC%A0%84%EA%B3%B5-%EA%B8%B0%ED%9A%8D%EC%9E%90-%ED%95%84%EC%88%98-%EC%A7%80%EC%8B%9D/dashboard
혹시 님들 ㅎ; 비전공자 강의추천 이야기 하시는거앝은데
TDD, BDD, Jest, Testing Library 관련 강의 있으면 추천좀요 ㅎ;
cs가 직접적으로 도움이 된다기보다, 가끔씩 터미널 ctrl + c 누를때 아 이거 SIGINT였지 이정도 생각나는 것 같고 ㅋㅋ 웹쪽은 쓰로틀링, 디바운스 생각할때 아 세마포어 공부했던게 생각나네 저의 경우는 이정도였던 것 같아요
고수님들이 엄청 많으시네요... 귀한 순간 배워가야되겠습니다..
아 맞다 방장님 스프린트 또 언제 하나요? 저 진짜 너무너무너무너무너무 관심 있는데 ㅠㅠㅠㅠㅠ
(개인 사담이였습니다)
강의 개요봤는데 완전.. 핵심들만 모여있네요!? 감사합니다!!
저도 들은 이야기이지만 코드숨 괜찮대요!
그거
사달라하면
삭제된 메시지입니다.
눈치가 너무 보이는 가격인데
넵! 확실히 엄청 도움 되실 거라고 생각합니다 ㅎㅎ 전공자 분들도 이거 들으시면서 정처기(정보처리기사) 준비하실 때 봤던 책에 있었던 내용들이 다 있는 것 같다고 정말 좋은 것 같다 하셨어요!
정확히 얼마인가요..?
FEconf에서 TDD 관련 영상 참고하셔도 괜찮을 것 같아요!
그건 저도잘...ㅎㅎ
아..
220만원이네요^^..
일단은 9월 말이나 10월 초 중 제가 덜 바쁠걸 같은 주로 생각하고 있습니다 추석지나고 날짜 공유 하겠습니다 ㅎ
아항..ㅎㅎㅎ
그거 사달라고 하면
ㅎ..
그렇군요!!! 올해는 정처기가 끝나서,, 아쉬웠는데 이거라도 공부해서 내년에 정처기 취득하고 싶어요!!!!! 감사합니당🫶🏻
스프린트로 단어 알림 켜놔여겠어요… ㅋㅋㅋㅋ
아침에 일어날때마다 쳐서 알림 울려야겠네요 ㅎㅎ
공지도 할거고 디스코드 채널 알림 해두시면 그쪽이 더 확인하시기 편할거에요~
억 ㅋㅋㅋㅋ 빌런이시네요…
풀스택이 목표라 요즘 파이썬 공부 중인데 참… 힘드네요… 자바스크립트랑 너무 달라서 ㅠㅠㅠㅠ
생애 첫 언어가 자바스크립트였고 주 언어도 자바스크립트이고 할 줄 아는 언어도 자바스크립트밖에 없어서
객체 지향 개념 잘 살린 언어를 거의 처음 해보니까 멘붕이 오더라구요,,,
원래 타입스크립트도 입문만 하다가 바로 취업이 됐는데 하필 타입스크립트 사용 안 하는 회사라 더 공부해볼 시간도 없었네욤,,,
그래도 객체지향 개념이 자바스크립트랑 파이썬은 비슷해서 this = self다 정도만 기억하시면
제가 자바스크립트에서 클래스를 써본 적이 없고 리액트도 함수형 컴포넌트가 완전히 자리잡았을 때부터 공부를 시작했다 보니 클래스형 컴포넌트는 읽을 줄만 알고… 네… ㅋㅋㅋㅋㅋㅋ
자바스크립트스럽게 작성할수 있을 거에요 그리고 @ 데코레이터에 적응하시면 자바스크립트 감각으로 충분히 금방 적응하실꺼에요
클래스 너무 깊게 모르셔도 괜찮아요 ㅎ
그런가요…? ㅜㅜ
뭐든 실전이 제일 중요하니 파이썬 웹 서버 + 웹 프론트엔드 TODO를 일단 한번 해보심이 어떻겠습니까? ㅋ
지금 생각했었을때 CS 용어 중에 민감하게 반응하는 것들 위주로 생각하면 동시성(Concurrency) vs 병렬성(Parallelism) 의 차이, 데드락이 무엇인지, 스택과 큐에 대한 차이 이정도만 기억에 남는 것 같아요.. 학창시절에 열심히 공부를 안해서 그런가봐요. ㅎ
https://www.youtube.com/watch?v=GFO_txvwK_c&list=WL&index=171&t=11995s 객체지향은 게임같은거 만들때가 가장 체감이 많이 되는 것 같아요.
앗 다들 감사합니당
Player, Enemy, Background 등 나눠서 각자의 행동 메소드를 구현하다 보면 어떻게 데이터를 관리해야 효율적이겠구나 싶더라고요.
엄청 예전에 취업 준비 관련으로 좋은 글이 기억에 나서 찾아서 공유드려봅니다. https://www.facebook.com/eun.cho.161/posts/3647131878703097
좋은 글 감사합니다. 첫 회사 지원에 도움이 많이 될 것 같습니다!🥺
치맥하는 제이지님 멋있어요 프론트엔드에서 테스트를 지금도 체계적으로 꾸리시는 것 같은데 여기서도 계속 공부하시는 것 같아서요 아니면 혹시 뭔가 해결되지 않는 부분이 있는지요?
어엄
지금 제가 주니어라서 비즈니스 로직을 개발하진 않아요 그래서 지금 하는 서비스에서 UI 자동화 테스트를 구축해달란 제안을 받았거든요
그런데 현재 사수님은 QA팀이 있으니 intergration test을 생각하시고 function 단위나 reducer를 테스트하기 보단 렌더 테스트나 특정 Dom에 event 가 발생했을때 네비게이션이나 어떠한 행동이 발생하는걸 테스트하시길 원하는거같아요
그래서 testing library와 jest를 활용해서 처음이니깐 action이랑 네비게이션 까진 좀 어려워서 render test만 하고 있는데 제가 맞는 방향으로 하는진 잘 모르겠네요
사실 비즈니스로직이 아니고 이 서비스는 메인 서비스가 아니라서 그렇게 엄청 중요한건 아니라 이걸 가지고 계속 사수님이랑 팀이랑 의논하기도 뭔가 살짝 눈치보입니다
보통의 타 기업에선 프론트 테스트를 어떻게 하는지가 궁금하더라구용
http://www.jidum.com/jidums/view.do?jidumId=814 여기도 용어 잘정리되어있는 것 같아요
사진
이거는 진짜 돈이 1만운 나갈 거라는 건가요? 아니면 예상을 한다는 건가요
어제가 결제날 아니였나용
저돈 나간단 의미같은데용
어떻게 아셨나요
돈은
700원 나갔어요
저번달에도 700원
이번달에도 700원
모르고 있었는데 매일 700원씩 나가고 있었더라구요
아하아하 신기하네요 프리티어 덕분인가
왜영?
다음 달 10월2일에 저 돈이 나가는 건가
뭔지 정확히는 몰라도 찝찝해서
계정 삭제하고 싶어요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
라우트 53 삭제 했는데 그래도 찝찝해서요
제가 도움이 되기에는 넘나 깊은 내용입니다ㅠㅠ 고수분들이 아침에 발견하셔서 많은 도움 드리기를 기원하며 저는 테스팅 관련 북마크해둔 글만 올리고 들어가겠습니다 https://jbee.io/react/testing-0-react-testing-intro/
헛헛 이분은
정말 프론트 분야에 다채롭게 계시네요
감사합니다.! 내일 읽어볼게영
앗 그리고 또 궁금한게
저는 좀 시키신 일을 열심히 할려고 노력하는 편인데
테스팅말고도 개선사항이나 하고싶은 업무를 하다가 말해달라고 했는데
범위가 너무 커서 이런건 보통 뭐 말하시나요..?
어려운 용어 나올 때마다 검색하기 좋은 것 같아요 감사해요...들숨 건강 날숨 행복얻으세요..
이모티콘
정말 하고싶어 하는 일이 뭔지 궁금해서 물어봤을 것 같아요. 자기가 정한 일을 수록 그 부분에 대한 책임감을 가지고 일하고 능률도 잘 나와서요. 보통 그런 부분의 경우, 해당 서비스의 부족한 메뉴 혹은 페이지 나누어 자기가 생각하기에 부족한 부분 개선하고 싶다 라고 이야기하시면 될 것 같아요. (정확하게 도메인이 어떤건지는 몰라서 구체적으로는 이야기 드리기는 힘든 것 같아요)
어 파이썬 관련 글을 적어주셨네요 파이썬 class 문법에서 적응하시기 어려우신 부분이 있는건가용??
예를 들어, 모니터링 서비스 중 오픈소스 차트를 사용해서 개발해서 고객사의 요구사항 중 대용량 데이터 렌더링, 실시간 렌더링 등 을 제대로 지원 못하고 있는데 한번에 제가 canvas api 혹은 d3.js 렌더링 엔진을 활용하여 직접 개발해보겠습니다. 이런 내용들이 되지 않을까요? 위는 모니터링의 경우에만 예시입니다.
아하아하 그렇군요 뭐 딱 정해서 시키면 너무 강압적이니 저를 배려해서 온보딩 기간동안 하고 싶은 일 찾으라는 거였군요.!
물론 위의 예시 경우는 일단위가 커서... 맡기지 않을 가능성이 큽니다만...
네. 그래서 사내 서비스의 니즈 파악을 우선시하고 그 제품과 관련된 다른 내용들도 확인하시면 좋을 것 같아요.
아하 감사합니다 ㅎㅎ 가서 좀 서비스도 이용해보면서 정책이나 문서도 살펴봐야겠네요
간단한 클래스 문법이나 헷갈리는 부분의 경우 자바스크립트 프로토타입이나 클로저 함수로 의역해드릴 수 있을 것 같아요
테스트 관련으로 좋은 문서라고 생각한 글 공유드려요. https://ui.toast.com/fe-guide/ko_TEST
그리고 위 정황상은 "인수 테스트" 키워드로 검색해보면 좋을 것 같아요
http://www.yes24.com/Product/Goods/13161818 저도 요즘 테스트에 대해 부족하다는 생각이 들어서 위 책 공부하고 있습니다.
감사합니다 ㅎㅎ 새벽에 좋은 이야기 공유 받네요 ㅎㅎ
회사 출근하자마자 사달라하겠습니다
파이썬 클래스 문법 의역해보았습니다 도움은 그닥 안 되는 것 같지만 재밌게 봐주세용 https://replit.com/@NightlyHerb/python-javascript-duality#main.py https://replit.com/@NightlyHerb/javascript-python-duality#index.js 혹시 비유가 깨지는 부분이 있으면 알려주심 감사드립니다! 파이썬 안 쓴 지 꽤 되어서…
여러분들은 export default에 대해서 어떻게 생각하나요? https://www.lloydatkinson.net/posts/2022/default-exports-in-javascript-modules-are-terrible/
요즘은 딱히 컨벤션이 정해진게 아니면 추가적인 export가 생길수있는 확장성을 고려해서 default를 안쓰려고 하고있어요
저는 컴포넌트 같이 대표적인 성격을 띄우는건 default, 그와 수반되는 타입이라던가 부수적인것들은 그냥 export로 하고 있습니다
저는 하나의 파일에 하나만 export 해서 default 만 쓰고 싶은데 현실은 여러개가 있으니 export 만 쓰게 되는거 같네요~ (컴포넌트는 물론 default 입니다 ㅎㅎ)
사진
오... 네이버 프론트도 오류가 생기네요 ㅇㅅㅇ
대기업 오류 너무조앙
오 저도 인식하지 못하고 있었는데 default는 안 쓰고 있었네요 ㅋㅋ
.님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시..php 파일 써보신분 계신가요? 이거 어떻게 여시는지 아시는분 계실까요 ..php프로젝트 파일인데 로컬 서버 띄우려면 뭔가 설정을 해야할까요? ..
펲님이 나갔습니다.
맥북이랑 아이폰 양쪽에서 쓸 수 있는 추천할만한 캘린더 앱 있을까요? 위젯 제공해주면 더 좋을 것 같아요 🙄
저는 기본 캘린더 사용합니다…ㅎ
저도 애플 기본 캘린더를 추천합니다
야나두개발님이 나갔습니다.
후우 애저 900 자격증 획득했케용
했네용
나중에 워치 연동이나 시리 연동도 그렇고 기본 모바일 앱이 살짝 아쉽긴한데 사용성에 있어서는 크게 문제 안되더라구요
아하 저도 기본쓰고있는데 일정이 점으로 표시되는등 조금 아쉬웠거든요 ㅠㅠ
공감합니다 ㅠㅠ
사진
까리하군요 ㅋㅋㅋㅋ
오
멋있어..
ㅋㅋㅋㅋㅋㅋㅋ
이제 다음 자격증 준비해야겠네요
태오님 벨로그에 이상한 글이 올라왔는데 어디다가 말씀드려야할까요..? 중국어인데 개발에 관련된 내용인가 하고 번역해봤더니 그것도 아니고 사진도 요상한걸 갖다가 글을 올렸네요
삭제나 아이디 신고가 안되는지 여쭤보고 싶어서요..!
감사합니다 댓글쪽인가요? 제가 아마 지울 수 있을 것 같아요 어떤 글인지만 알려주시면 삭제하겠습니다 감사합니다
사진
아뇨 글입니다!!
테오님의 벨로그가 아니라 테오님을 부르신건가요??
아~ 이건 벨로그를 이제 중국사람이 쓰고 있나봅니다
아하 ..
아 넵 ㅋㅋ 제가 잘못 썼네요 ㅠㅡㅠ
토리님이 나갔습니다.
자바스크립트 객체지향방식이 클래스가아닌 프로토타입인 이유는 무엇일까요??
만든 사람이 객체지향보다 함수형 프로그래밍을 좋아해서 closeure나 lisp같은 언어를 만드려고 했는데 네스케이프 상사가 java처럼 만들라고 해서 java문법 형식으로 함수형 언어를 만들었다는 설이 있습니다
오오 테오님은 모르는게 없으시군요 한번 읽어보겠습니다 감사합니다 ㅎㅎ
카더라는 아닌데 하도 오래전에 봤던 내용이라 출처가 불분명한점은 양해부탁드립니다
와,,, 저는 javascript가 동적타입인것처럼 유연한 프로그래밍 언어이다보니, class를 사용한 엄격한 객체 지향 보다는 prototype을 사용해서 좀 더 원형적인 유연한 객체지향을 사용하려는줄알았는데,,
유용태님 유용한 정보 감사합니다
고맙습니다 편하게 테오라고 불러주세요~ 님자 안 붙여도 괜찮아요 오히려 그게 더 익숙해서 ㅎ 감사합니다
테오!! 👍👍😎
테오!! 👍👍😎
아이 라잌 테오!!!! 😆
화살표 함수 내부의 this는 상위 스코프의 this를 상속받는 걸로 알고 있는데 document.body.addEventListener('click', () => { console.log(this); }) 의 출력 결과가 document 객체가 아닌 window객체가 나오는 이유가 있나요? 자바스크립트에서의 객체와 브라우저가 렌더링하는 DOM 객체를 다르게 봐야하는 건지 궁금합니다 this 공부하는데 많이 헷갈리네요 ㅠ
네!! ㅋㅋ
TMI: 러브말고 라잌인 이유 - 러브는 여자친구한테만 ✌️😉
ㅋㅋㅋㅋ엌ㅋ
🤣✌️
해당 함수를 호출하믄 컨텍스트가 글로벌 컨텍스트이며 자바스크립트에서 글로벌 컨텍스트는 window 객체이기에 그렇습니다
감사합니다!! 토끼굴에 빠지다 보니까 뒤죽박죽 머리가 몽툥해지네요 ㅋㅋ 개념 좀 다시 봐야겠습니다
삭제된 메시지입니다.
헉 어떻게 그런말씀을..
props로 전달하지 않고 컴포넌트 내부에 선언된 함수들은 테스트를 할 수 없는거 같은데 그러면 다들 테스트를 위해 외부 모듈로 빼시나요? 아니면 다른 방법이 있을까요?
빼는 것을 권장하는게 요즘 추세라고 생각합니다
커스텀 훅이나 유틸함수로 빼요
감사합니다 혹시 그러면 지나치게 깊어지는 디렉토리나 많아지는 문서들이 문제가 되진 않을까요??
그렇다고 한들 1000줄짜리 컴포넌트 1개보다는 100줄짜리 10개의 모듈이 더 낫습니다
제가 궁금했던거 딱 해소된거같습니다 감사해요!!!
삭제된 메시지입니다.
사진
커뮤니티 활동하면서 최근에 사내 서비스 이야기가 좀 많아져서 부담스러워서 닉 내렸는데
벌써 먹혔네요
허헛헉
허브님이십니까
@유용태 (teo.yu) 저는 현재 무료로 웹폰트를 편집/제작할 수 있는 서비스를 개발 중에 있는데요. 개발할 때 웹폰트를 활용하시는 분들을 대상으로 하는 설문조사 링크를 공유해도 괜찮을까요?
네
안녕하세요. 😀 저는 현재 무료로 웹폰트를 편집, 제작할 수 있는 서비스를 제작 중입니다. 개발 중에 폰트파일을 활용해보신 개발자 분이시라면 설문 답변을 부탁드리겠습니다. 💵설문 참가 혜택 - 5천원의 스타벅스 쿠폰 추첨(3명) - 후속 인터뷰 참여시 5만원 상당의 사례금 https://forms.gle/nTL7NXwK3UtXneZd9
삭제된 메시지입니다.
안녕하세요! firebase에서 분기배포를 하고싶은데, 혹시 브랜치마다 다른 명령어를 실행하고자하면 뭐라고 검색하면 될까요..?
제가 vue를 사용해본적이 없어서 뷰에서도 jsx를 사용하나요?
jsx는 리액트임다
.vue로 특이한 형식을 사용합니다
jsx는 리액트 전용 문법을 쓰기 위한 파일이어서, vue와는 호환되지 않아요. https://ko.reactjs.org/docs/introducing-jsx.html 이 문서를 보면 리액트에서 jsx를 어떻게 사용하는지 볼 수 있어요. 요 문서를 읽어보시면 도움이 될 것 같습니다.
vue에 jsx쓸수있어요~
바벨이 React.createElement로 트랜스파일링해주는거라 따지고보면 리액트랑 별개로 알고있어요
맞아요 저희도 일부 파일에 jsx 적용하긴해서 호환은 되긴합니다
일반적으로는 vue를 쓸 뿐..
안녕하세요 그 디자인시스템을 따라서 Typography 컴포넌트를 제작하려고 합니다. 각 폰트 그룹마다 font-size 별로 묶여있고 font-weight와 line-height는 다른 형태입니다
이걸 컴포넌트화를 하려고하는데 font-weight와 line-heigt를 props로 넘겨받는 식으로 보통 제작을 하는건가요?
보통은 타입명을 받고
그걸... 가지고 스타일 구현하지 않나여
H1 H2 같은 느낌으로
예를들면 H1에 font-size 28은 고정이고 font-weight는 regular, medium, bold 이렇게 나뉘고 line-heigt는 120%와 140%가 나뉩니다
사진
검색해보다 토스 이미지를 가져왔는데 Typhography1에 font-size는 동일하고 line-height와 font-weight는 여러가지인 경우입니다
이런경우 props로 받는 방법 밖에 없을까용?
뭐 컴포넌트명 + props 혹은 클래스명 정도....?
안녕하세요 로그인 회원가입을 프론트엔드 앞단에서 jwt사용하여 리액트로 구현해보려고 하는데 레퍼런스 추천 부탁드려도 될까요? 완성된 코드도 좋고 관련자료도 좋습니다 ㅜㅜ
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
axios interceptor 활용하시면 될 것 같은데.. 관련 키워드로 찾아보세요~
감사합니다 깃허브에 코드검색으로 axios랑 로그인 관련 키워드로 검색해보니 다른사람 코드도 나오던데 완성된 다른사람 코드를 보는것도 좋은 공부법일까요? 일종의 치팅은 아닐까해서요
원래
잘 적은 코드 보고 카카시하는게
제일 좋은거같습니다
다른 사람의 코드를 아예 아무것도 보지 않는다면 전 개발자를 할 수 없습니다..ㅋㅋㅋㅋㅋ
다만 그렇게 하더라도 왜 쓰는지 어떻게 쓰는지 이해는 하셔야 합니당 안그러면 내 상황에 맞게 커스터마이징이 어려워요 특히 인증쪽은요
보고 그냥 따라치면 아무 의미 없지만 내 서비스에 맞춰 바꾸다보면 공부가 돼요. 바꾸려면 이해해야하고 바꾸다보면 이해되기 시작하거든요. 적어도 저는 그래요
그리고 내가 사용하는 컨벤션, 팀이 사용하는 컨벤션에 맞게 고치다 보면... 내것이 되죵...ㅋㅋ
오 좋은 공부법이었구나 다들 감사합니다!
여쭤볼것이 있습니다 ! 기본값이 false인 setIsPopuped라는 useState를 setTimeout으로 3초후 setIsPopuped(true)의 상태로 변경했는데 isPopuped가 true일때 열려야 하는 팝업이 열리지가 않더라구요.. 리랜더가 되지않는것 같은데 리랜더를 발생시킬수 있는 방법이 무엇인지 알 수 있을까요? useEffect 디펜던시에도 isPopuped를 추가했음에도 useEffect의 내부 콘솔도 찍히지 않고있습니다…!ㅜ
상태가 바뀌면 무조건 리렌더될텐데 다른 코드에 오류가 있을 수도 있을 것 같아요
디펜던시에 하나 빠진게 아닐까요?
디펜던시에 하나 빠졌다는건 어떤 의미일까요?? isPopuped도 넣어보고 setIsPopuped도 넣어보고.. 둘다도 넣어봤습니다…! setIsPopuped(true)가 아예 안되는것 같아요.. setIsPopuped(true) 변경하면서 콘솔도 하나 찍어봤는데 콘솔은 찍힙니다…ㅜ 햄햄님 말씀처럼 다른코드가 문제인가보고있는데 영향을 줄만한게 있는건지 도저히 모르겠네요😭
그러면 set is popued가 안되니 리 랜더가 안되는거네요! 그 부분 쪽의 함수나 그 주변 코드를 보시면 해결될거 같아보여요
네 답변주셔서 감사합니다! 좀더 찾아보겠습니다..!
react native 질문드립니다 ㅠ ScrollView로 특정 리스트를 보여주고 있는데 두번 눌러야 터치를 인식하네요 View로 하면 한번 클릭으로 인식은 되는데 스크롤이 안되고… 이런 경험 있으신분 계실까요?
저 질문이 하나 있는데 제 컴터에서 애뮬레이터 띄워놓고 거기서 제 컴퓨터 백엔드 서버에 통신하려는데 localhost는 안되고 제 아이피는 되네요 같은 컴퓨터 안에 있으면 가능한걸로 알고있는데 왜 웹은 되는데 앱은 안되는지 알 수 있을까요 ?
구글에 서칭하면 전부다 localhost -> 0.0.0.0으로 바꾸라고해서
왜그런지 자세하게는 안나와있어서 그 부분이 궁금합니다
정확한 환경은 모르겠으나 현재 컴퓨터 네트워크와 에뮬레이터 의 가상 네트워크가 서로 다른 네트워크로 인식되서 그러지 않을까 싶습니다.
에뮬레이터 안에서의 localhost는 해당 에뮬레이터 자체를 의미하는 거겠죠. 보통 운영체제마다 호스트맵이 있습니다. localhost는 127.0.0.1로 연결해라라고 명시 되어있습니다.
jaja님이 나갔습니다.
dispatch를 export function에서 props로 넘기지않고 그대로 사용하는 방법이 있을까요?
혹시 맥락을 조금 더 설명해주실 수 있으신가요?? Dispatch는 보통 useReducer나 useDispatch와 같은 훅에서 나오지 않나요??
네 그렇게 나오는 dispatch를 props로 넘기면 함수에서 사용할 수 있겠지만 dispatch가 필요한 함수에 전부 dispatch 파라미터를 넣어주는게 너무 반복작업으로 느껴져서 혹시 export 모듈로 뺀 함수 내에서 사용하는 방법이 있을까 해서 여쭤봅니다 ㅎㅎ
어 말씀하시는 함수가 컴포넌트라면 말씀해주신 문제 때문에 리액트 공식문서에서 dispatch 함수를 context api로 주입해주는 걸 권장하는 걸 본 것 같애요 잠시만요
와우 감사합니다 허브님
context api가 redux의 하위호환 느낌이라 생각햇는데
context 공부좀 할걸그랬네요 ㅎㅎ 감사합니다
삭제된 메시지입니다.
삭제된 메시지입니다.
사진 2장
모니터 질문이 있는데요.. 왼쪽사진은 모니터고 오른쪽은 맥북인데 둘의 색상차이가 보시다시피 매우 심해서요.. 모니터가 색표현을 못해서 배경색과 저 흰색칸을 둘다 흰색으로 표현해버려서 색구분이 안됩니다.. 이럴 경우에는 어떤걸 해볼 수 있을까요 ?
이런 extension을 써보시는건 어떨까요? 웹사이트에 특정 부분을 클릭하면 어떤 색인지 알려줍니다
오 감사합니다 이 익스텐션으로 나타나는 색을 볼 수 있군요 !! 근데 모니터 자체의 문제를 해결해보고 싶어서요 ㅠㅠ
캘리브레이션해보시면 되겠네요
아하 이런 조정을 캘리브레이션이라고 하는군요 감사합니다 한번 찾아서 해보겠습니다 !
이게 가장 좋은 소프트웨어 이고 이걸 지원하는 하드웨어 센서를 구매하시면 됩니다
아하 하드웨어도 있어야하는군요 .. ㅠ
안녕하세요, next.js를 처음으로 실행해보기 위해서 npx create-next-app npm run dev 명령어 입력을했는데 다음과 같은 오류가 발생했습니다. error - ./node_modules/next/dist/client/dev/amp-dev.js Module not found: Can't resolve 'C:\Users\4hsni\OneDrive\바탕 화면udemy\nextjs-course\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'C:\Users\4hsni\OneDrive\바탕 화면\udemy\nextjs-course\node_modules\next\dist\client\dev' 스택오버플로우에서 찾아봤는데 설정된 경로가 잘못되어있어서 오류가 발생한다는 것 같습니다. 바탕화면udemy → 바탕화면\udemy 관련해서 경로를 똑바로 설정할 수 있는 방법이 있을까요? 간단한 에러지만 아직 코린이라 양해부탁드립니다 ㅠㅠ..
정린님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
음 바탕화면이아닌 c드라이브 하위폴더에 넣어놓으면 안되나요? 한글경로가 문제일수도
도대체 Active branch는 뭘까요...
깃헙에서 Active branches: The Active view shows all branches that anyone has committed to within the last three months, ordered by the branches with the most recent commits first. 이거 말씀하시는걸까요...?
번역해 보니까 최근 커밋 브랜치를 나타내는건가봐욜.. 흑흑
감사합니다 0110님..
바탕화면이 아닌 C드라이브 하위폴더에서는 제대로 작동합니다! 저같은경우에는 바탕화면에 공부해놨던거나 프로젝트를 저장을 해두는편이라.. 기존에 react로 프로젝트할 떄는 문제가 없었는데 이번에 이렇게 문제가 생기네요 ㅠㅠ 보통 바탕화면이 아닌 C드라이브 하위폴더에 저장해놓으시나요??
한글과 영어는 인코딩방식이 달라서요 보통의 개발문서들과 환경은 영어에 친숙하니 환경설정에 능숙하지않다면 영어에 맞추는게 정신+육체적으로 편해집니다
감사합니다 바탕화면을 영문이름으로 바꿔볼생각은 한번도 못해봤네요, 한번시도해보겠습니다!
.님이 나갔습니다.
혹시 파일명이나 파일경로를 변경한 이후 배포할때 빌드 오류가 발생한적 있으신분…?
글 내용중에 특정 폴더의 대소문자를 바꿨는데 그걸 git에서 체크하지못했고
로컬에서는 제대로된 경로라 빌드가 제대로 돌았는데 도커에서 풀 땡겨와서 할때는 대소문자가 달라 모듈 낫파운드가 떴었어요
Y.D.S님이 나갔습니다.
헐 감사합니다 ㅠㅠㅠㅠ 이것때문이네요 ㅠㅠㅠㅠㅠ
이모티콘
git의 ignorecase는 시스템 파일시스템에 맞춰서 세팅되어 있어서, 함부로 바꾸는 것이 좋지 않다는 글을 지금 읽고 이해하려고 하고 있어요. 애플의 파일시스템도 기본 설정 하에 case-insensitive case-preserving filesystem이고 그래서 이 사단이 지금 나고 있는 것 같아요 https://stackoverflow.com/questions/58192285/is-it-a-good-idea-to-set-git-config-core-ignorecase-to-false 굉장히 머리아픈 문제로 보이는데 알려주셔서 감사드립니다
피자 먹다 자는 무지님이 나갔습니다.
질문 하나 드리겠습니다!😀 리액트 테스팅 라이브러리에서 fireEvent로 버튼을 클릭하여 리액트쿼리(tanstack쿼리)에 useMutation의 isLoading에 의한 컴포넌트와 onSuccess에 의한 컴포넌트들을 렌더링하는 것을 테스팅하려고 합니다. 하지만 isLoading에 의한 컴포넌트까지는 잡히는데 onSuccess일 때 await이 안먹히는지, onSuccess에 console.log를 찍어보면 테스트 종료가 되어 콘솔로그를 찍지 못했다고 합니다! 하지만 밑에 테스팅 코드를 보면 await을 통해 onSuccess일 경우의 컴포넌트가 렌더링될 때까지 기다리라고 해주었습니다... 무엇이 문제일까요??
사진
다른문법이있을거에요.. 잘 기억안나는데 await waitFor(() => screen.findBy...) 이런식으로!
await findby가 waitfor + getby 라고 docs에서 설명해서 사용했습니다! waitfor해보았는데 같았습니다
앗! 그러네요..
사진
이력서 지원시 첨부자료란이 "선택" 으로 되어있긴 한데… 아무것도 안쓰고 제출하면 감점될까요…?
github 링크 붙여넣으면 되긴 하겠는데… 잔디심은게 거의 없어서 써넣기도 부끄러운 ㅠㅠ
깃헙에 뭐 볼게 없으면
안넣어도 될것같아요
async 함수로 정의하신거 맞으실까요?
네 맞습니다!
혹시 isloading이 먼저 잡혀서 onsuccess까지 기다려주지 않는것일까요..?
흠 그건아닌거같은데.. 잘 모르겠네요 ㅠㅠ
그래도 도움 주셔서 정말 감사합니다!😊
감사합니다!
junhee님이 나갔습니다.
junhee님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
실수로 나가버렸네요 ㅋㅋ
요런 글이 있었네요. 내용에 추가해야겠어요. 감사합니다~
ㅇㅇ님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 ㅇㅇ 님 반갑습니다 :)
정린님도 반갑습니다 인사가 늦었네요 ㅎ
안녕하세요~
네 어서오세요! 이곳은 프론트엔드나 협업에 대해 궁금한 것들을 물어보고 또 아는 것들은 서로 알려주고 공유하면서 함께 성장하고자 하는 곳입니다 :) 궁금한 것 내가 알고 있거나 새로 배운 것들 언제나 편하게 글 남겨주세요
머리빗는네오님이 나갔습니다.
좋은 코드란 읽기 좋은 코드다 https://apeltop.github.io/docs/book-review/the-art-of-readable-code/
핵심만 잘 정리한 것 같아 공유해봅니다
오오 ~~지난번 그 3가지 업그레이드 버전인가요?감사합니다:)
제가 쓴 글은 아니지만 ㅋㅋㅋ 예시가 너무 좋네요 ㅎ
양손 엄지척 무지님이 나갔습니다.
사진
무슨테마에요??
Gruvbox입니다!
아나… 깃이랑 별개로 맥에서는 파일시스템에서 대소문자를 무시하네요 ㅡ.ㅡ 이제부터 리눅스에 돌아갈 만한 모든 것들은 대소문자 구분하는 파일시스템이 있는 파티션에서 짜야겠어요 옮긴 다음에 후기 올리겠습니다!
자주 나오는 이슈라서 대소문자로 테오방 검색하면 몇개 나오지 않을까요 ㅎㅎ
김은혜님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
https://karnsonline.com/case-sensitive-apfs/ 를 참고하였습니다. 편-안
안녕하세요 김은혜님!! 반갑습ㄴ디ㅏ :)
반갑습니다ㅎㅎ
추천 받아서 들어왔어요!
감사합니다!! 어서오세요 이곳은 프론트엔드와 웹 개발에 대해서 궁금한 것들을 물어보고 아는 것들을 서로 알려주면서 함께 성장하고자 하는 곳입니다. 편한게 궁금한 것들 글 남겨주세요 ㅎ
혹시 모바일 환경에서 하단 바랑 상단 주소창때문에 css가 가려지는거 해결방법 아시는 분 계실까요?
safe-area 문제일수도 있겠네요
제가 알기로는 주소창이 뷰포트를 침범하지는 않긴한데
혹시 제가 링크드인을 할 줄 잘 모르는데
링크드인 사용하실때 쓰신 블로그 같은거 추천해주실 수 있을까요?
링크드인이랑 블로그랑
무슨상관이...
아 이력서같은건
워니님이나 개발자블로그 작성법 같은 유명한 가이드 블로그 같은게 있잖아요?
네
링크드인은 한국에서 많이 사용하는게 아니다보니깐 참고할만한 블로그가 생각보다 많이 안나와서 어렵더라구요
그래서 여쭤봤던겁니당
아하
그냥 SNS라고 생각하심됩니다
페북같은 느낌이져
일단 하나하나 꾸며보고 있는데
혹시 링크드인 내 활동 탭은
본인이 글을 남기거나 해야지
생성되는건가요?
잠시만요
활동탭은
추천눌러도 뜨고
본인이 글써도 뜨는거같네요
공유해도 뜨구여
아하 말그대로 링크드인이 이력서 올려놓는곳이 아니라
SNS같은 곳이라
본인이 SNS에서 활동한 내용이 뜨는 곳이군요
말씀하시는 활동탭이
사진
이부분맞죠?
네네 맞아요
그럼 위에서말한게 맞아용
아하 감사합니다 ㅎㅎ
이력서도 올려둘수도
있습니당
사진
딱 1000명이네요
오오
이모티콘
🎉🎉🎉🎉🎉
이모티콘
안녕하세요 여기랑 좀 별개긴한데 하나 여쭤보고 싶은게 있습니다!! 제가 논문 써야하는데 처음 써보는거라서 자료검색은 주로 어디서 해야 하나요..?
요새도 인기가 있는지는 모르겠지만 논문검색은 https://www.dbpia.co.kr/ 이곳을 주로 사용했던것 같아요
http://www.riss.kr/index.do 여기도 많이 이용했었네요
오늘님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 오늘님 반갑습니다! :
감사합니다!!
감사해요 ㅠㅠ!!
안녕하세요~~
빵갑습니다님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 빵갑습니다님 반갑습니다
안녕하세요 ! 반갑습니다
어서오세요!! 이곳은 프론트엔드에 대해서 궁금한 것들을 무엇이든 편하게 물어보고 아는 것들을 알려주면서 함께 성장하고자 하는 공간입니다. 편하게 글 남겨주세요
네!! 빵갑습니다님ㅎㅎ 잘 부탁드립니다. :)
이모티콘
이모티콘 네 잘부탁드립니다~
추억의 사이트네요 ㅋㅋㅋㅋ....학교다닐때 많이봣는데
삭제된 메시지입니다.
삭제된 메시지입니다.
삭제된 메시지입니다.
안녕하세요!
혹시 프로젝트에 도커, 배포 자동화, 테스트코드 개발 이런거 했다 쳤을 때 신입한테 면접에서 어느정도의 난이도까지 질문을 하나요? 깊게 물어보겠죠..?
회사마다 다르겠지만 이력서에 4rem으로 적으셨다면 좀 더 집중적으로 질문해주시지않을까요?
(4rem은 폰트 크기라는 뜻 ㅋㅋ)
지원 분야가 어떻게 되시나요?
혹시 분야가 세분화 돼있나요 ? 제가 그렇게는 잘 모르겠지만 프론트엔드 넥스트 쪽으로 지원해보려고 생각중에 있습니다
아, 프론트쪽 이시군요 저라면 말씀하신 '테스트코드' 제외하면 나머지는 크게 안볼것 같습니다.
그러면 테스트코드 관련해서는 신입에게 얼마나 깊게 지식을 요구할까요?
왜 테스트를 하게 됐는지, 어느 부분을 어떤 방식으로 테스트 했는지, 해본 결과는 어땠는지. 지식보다 과정이 궁금할 것 같네요.
오 그렇군요!! 감사합니다 이부분 정리해보겠습니다 ㅎㅎ
테스트코드 왜 짜야하는지, 진행한 프로젝트에 mock 써봤는지, 장단점은 무엇인지 등인데 솔직히 크게 기대는 안합니다. 어차피 외워서 대답할 수 있는 부분이고 분별력이 안생겨요.
그렇군요.. 오히려 크게 기대안해줘서 맘이 놓이는게 정상인지는 모르겠지만 ㅋㅋㅋㅋ... 깊게는 잘 몰라서 혼쭐날까봐 걱정돼 질문드려봤습니다. 답변 너무 감사합니다
안녕하세용 비가 많이 오네요… 다들 한남노 피해 없으시길 바랍니다 😊
매미보다 강력 하다고 합니다 ..
부탁하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
궁금한게 있어서 들어왔어요..!
안녕하세용 질문있습니다! 리액트에서의 onInput과 onChange가 동일하게 작동해서 알아본 결과 "리액트에서 onInput과 onChange가 사실상 같은 이벤트로 취급이 된다. 이중에 더 자주 사용하는 것은 onChange이다." 라는 글을 읽었습니다 왜 change가 널리 사용되는 것일까요..?
혹시 패스트캠퍼스 프론트엔드 개발자 취업연계과정 들어보신분 계신가요?
제로베이스 말씀이실까요?
아뇨 패캠에 있는 국비지원 강의인데
메가바이트 스쿨이요!
그게 취업연계인가요?
네!
저는 제로베이스에 대해서는 좋지않은 기억이 있는데^^… 메가바이트스쿨은 처음들어요!
제로베이스는 어땠는지 여쭤봐도 될까요?
제로베이스에서 어떤 강의 들으셨어요?
제로베이스에서 제일 미는… 네카라쿠배 프론트엔드 취업스쿨 들었었어요! 꽤 초기 기수였구요.
그냥 패캠관련된거는 믿고걸르셔도ㅎㅎ
전 예전에 돈내고하는 프론트엔드 취업과정 들었는데 어느정도 괜찮았던..
국비지원 교육도 별로일까요?
국비지원이든 아니든 패캠이 커리큘럼을 짜고 운영하는 부분은 같지 않을까요?
저는 국비지원쪽은 자세히 몰라서 말씀드리기는 어려웁지만요 ㅠㅠㅠㅠ
흠.. ㅠㅠ 막상 7개월 과정 합격하긴 했는데 왜 불안한지 모르겠네요
커리큘럼 전체 공개도 안돼있고ㅜㅜ
패캠 7개월 jquery부터 다 배우지않나요..?
불안하면 안가시는게
사진
이렇게 나와있긴 한데
몇주차에 뭘 공부하고 이렇게 구체적으론 안나와있더라구요
7개월과정인데 4주차까지만 나와있고
그뒤로 블러처리돼있음
왜이런건지
ㅠ.....
불안하면
빼는게 낫다생각합니당
이런건 거르는게 ..
혹시 국비지원으로 학원 다녀보신분은 계세요?
근데... 일단 뭐라도 해보는게 좋은 것 같아요
저기서 교육받고 대단한 걸 얻고 취업을 꼭 한다 라는 생각을 가지는 것보다 언어 가볍게 1회독 한다 생각하시고, 같은 길을 걷고 있는 사람들하고 커뮤니티 형성해서 서로 조언얻고 얘기하고 편하게 다녀보는 게 어떠실지
좋을 것 같아요!
저도 국비지원은 아니지만 비슷한 프로그램으로 교육받았는데 중간에 너무 힘들고 어려워서 탈주각 세웠는데 저렇게 마음먹으니 편해져서 부담감줄이고 재밌게 다니다가 잘 수료했고 좋은 사람들 만나서 수료후에도 계속 단톡 활성화되고 서로에게 의지하고 있어요~!
그렇군요 제가 이 기회를 반드시 어떤 성과로 연결시켜야한다는 부담때문에 더 스트레스를 받았나봐요 ㅠㅠ 스트레스받는다고 될일이 아닌데
넘 좋은 말이군요
저도 그래서 스트레스 엄청 받았는데 대학교 4년 교육받아 바로 취업하기도 어려운데 그 짧은 몇개월 교육과정으로 취업하는 건 얼마나 더 어렵겠어요! 가볍게 생각하시고 한 번 체험해본다! 하고 부담감을 줄여보시고 편하게 지원하셔서 공부해보세요~~
네 감사합니다!!!
그래도 교육받는 동안 진짜 알게된 것도 많고 탈주했으면 엄청 후회했을 것 같아요! 멘탈도 많이 쎄지고 여러모로 도움이 되었습니다! 화이팅하세요~!~!
좋은 정보 알려주셔서 감사드립니다. 처음 알게 된 내용입니다. 깃허브에 다음과 같은 역사적 맥락을 찾았습니다. 오래전에 리액트 팀에서 onChange를 더 밀어줬던 것 같네요. https://github.com/facebook/react/issues/9567 사실 저는 공식문서에 onChange만 나와 있어서 onChange만 알고 있었습니다. 저와 같이 처음 보신 분들을 위해서 onChange가 DOM의 change event와 다르다고 나온 공식 문서를 링크합니다. https://reactjs.org/docs/dom-elements.html#onchange
아하 오래전에 onCange를 밀어줬던 이력이 있었군요 링크해주신 링크 참고하겠습니다!! 답변 감사합니다 허브님! 항상 파이팅이에요!
음 3년전이긴한데 국비 다녀봤어요 궁금한거 있으면 질문 받아드릴게용
국비지원으로 어떤 공부 하셨고 개발자로 취업하셨나요?
흠.. 국비 솔직히 거창하게 커리큘럼 적혀있지만 요즘도 그런가 모르겟는데 .. 막상들어가면 다 자바 백엔드 과정이엇어요
흔히들 아시는 jsp 스프링맛뵈고, 제이쿼리 배우는 과정이었고... 저는 오늘도 트위터에서 공감가는글봤는데 국비는 거기서 배운걸로'만' 취업해야지! 이런 마인드보다는 공부할 환경을 제공받는다?는 느낌으로 다니시는게 좋은 것 같아요
패캠쪽은 어떤지 모르겟네요... 트렌디하게(?) 가르치려나
국비지원과정은 커리큘럼 전체 공개가 안돼있는데
제가 따로 구매한 강의는 커리큘럼 있어요
혹시 괜찮은지 한번 봐주실수 있을까요??
저는 그래서 시설 좋은 곳 갓습니다 솔직히 ㅎㅎㅎ... 가르치는거 또이또이할거 같아서
따로구매하셧다는게.... 패캠 패키지 강의 그런건가요?
네 패캠에
프론트엔드 초격차 강의?? 였던거같아요
파일: [패스트캠퍼스]-교육과정소개서-초격차-패키지---한-번에-끝내는-프론트엔드-개발.pdf
이거에요!
박박님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
음.. 그과정은 제가 안들어봐서 답해드리기 그럴 것 같고 19년?20년?에 비슷한걸 들어봣는데 강사분에 따라 달랏어요.. 되게 꼼꼼하게 가르쳐주시는 강사님도 계셨고(박영웅님), 대충 겉 핥기 느낌 나는 강의도 있었고
그 패키지라는게 여러 강사님 강의 묶음집이라 뭐 서로 연결되는 느낌도 아니고
필요한 부분 골라서 잘들으면좋다? 정도로 말씀드릴 수 있을 것 같아요
음 그러면
프론트엔드 신입개발자가
무조건 갖고있어야한다 하는 기술이 뭐가 있을까요?
배우는 과정 자체는 괜찮은데
비용이 얼마나 되는건가요?
저게 20만원인가 30만원인가 그랬던것같아요
아, 패캠은 참고로
할인을 이벤트를 자주합니다...
아 맞아요 원가는 저정도였고
저도 할인받아서 10몇만원에 샀어요
넹 뭐그정도면
필요한부분만 몇개들어도
그정도의 값어치는 하지 않을까..싶은데..... 커리큘럼은 하나도 안중요하구요 진짜 ㅋㅋㅋㅋ...
강사분이 더 중요한것 같습ㄴ디ㅏ
특정 시간에 하는 강의가 아니고 그냥 공개되어있는 인터넷 강의를 순서대로 듣는거죠?
넵
박영웅님 계시네요.. 되게 꼼꼼하게 가르쳐주셔서
제가 html css 기초공부할떄 도움많이 받앗죵
맞아요 수업 정말 꼼꼼하게 잘 알려주신다고 느꼈어요
넵 그래서 사실 저기적힌 커리큘럼은 걍형식적인거라고 보시고 ㅎㅎ 강의 몇개 듣다가 나한테 맞겟다 싶은거만 선택해서 들으시면 될것 같습니다!
이건 뭐.. html, css, js 라고 대답해드리면 원하시는 대답 아닐것 같긴한데.. ㅠㅠ
어떤회사를 목표로 하시는지에따라..
앗 아니에요
원하는 대답이 아니라기보단
그회사 공고에 보통 우리회사가 원하는 기술스택같은거 적어둬서
뭔가 아 정말 저걸로만 되는건가?하는 불안? 이 있는것같아요
다 저기서 파생된 기술들이라 ㅎㅎㅎ...
공고보면 피그마 리액트 이런거 요구하는 회사들도 많고 해서요ㅜㅜ
피그마요..?
피그마는 uxui쪽인데
프론트엔드 공고인데도 스케치 피그마 리액트 이런걸 우대사항으로 적어놓더라구요 ㅜㅜ
자주 나오는 프론트엔드 면접 질문 서치하셔서 그정도는 다 대답할 정도로 이론 공부하시고
우대는 말그대로 우대이고..일단 직접 다루시진 않고 그걸보고 어쩃든 마크업을 하실테니
백엔드랑 협업하는 프로젝트 한두개만 준비하셔시면
적혀진게 아닌가 싶습니다
충분할듯합니다
피그마 사용 경험 아닐까요?
*준비하시면
알고리즘 공부도 병행하시면 더 좋고 기술블로그 작성하시는 것도 하시구여
직접 그걸로 디자인해본 경험이라기보단.. 피그마 디자인으로 개발해본 경험이 있냐? 있으면 우대한다 느낌
일단 제 개인적인 생각은.. 인터넷 강의는 입문자가 사용 설명서(레퍼런스)를 하나하나 구글에서 찾아보면서 직접 습득을 하기에는 시간이 너무 오래 걸리기 때문에, 이 시간을 줄이면서 단순히 사용법을 익히는 과정이라고 생각하고 접하시는게 좋다고 생각합니다. 현재 현업에서 많이 쓰고 있는 도구를 어떻게 쓰는거지? 에 대한 강의라고만 생각하시면 될 것 같아요
일단 저기 있는 커리큘럼 자체는 현업에서 모두 사용하는 것들이니, 해당 강의를 통해서 빠르게 사용 방법을 익힌다고 생각하시고, 이를 바탕으로 별도로 주제를 정하셔서 프로젝트를 개인적으로 몇 개 진행해보시는게 좋다고 생각이 드네요
현업에서 일하는 분들한테 조언 구하면
프로젝트를 진행해보란 말씀을 많이들 하시는데
그 프로젝트는 어떻게 시작해야하나요?
보통은 커뮤니티에서 같이하실 분을 모으시구요
너무 알못같은 질문이지만 진짜 알못이라..ㅠㅠㅠㅠ
학원가시면.. 아마 학원에서도 하실거에요 무조건
그거하러 학원가는거니..
그렇군요
ex) 붕어빵 지도 웹 서비스 만들기
이런 간단한 거라도 좋습니다
강의에서 시키는 것 만으로는 온전히 내것이 되기가 쉽지 않아서 직접 주제를 정하고 해당 주제에서 발생하는 문제를 직접 해결해보셔야해요
강의만 따라하면서 이렇게 따라만 하는게 맞나 싶은 걱정이 계속 됐었는데
방향을 좀더 뚜렷하게 잡을 수 있을것같아요 감사합니다
일단 처음부터 하나하나 다 찾아보시기에는 시간이 너무 오래걸리실테니
강의를 따라하면서 빠르게 아 이런식으로 쓰는 거구나 정도만 익힌다고 생각하셔도 될 것 같습니다
그 자체가 취업에서 본인의 실력을 입증하는 자료가 되기는 어차피 힘들기 때문에
딱 그 수준으로 짚고 넘어가시면 될 것 같아요
넵 감사합니다
그리고 저런거 하실 때 '왜', '어떻게' 했는지 기록해두시고 취업자료로 활용하시면 좋을 것 같습니다!
네!!
혹시 useLocation 으로 url의 특정 depth 의 정보만 받아올 수도 있나요?
아니면 그냥 받아온 pathname을 통해 적절히 잘라서 써야할까요?
여러분 궁금한게 testing library 랑 jest 쓰시는 분들
ts 로 진행하시나요?
someCompnent.test.ts 이렇게…
url 라이브러리 요즘 뭐 쓰시나요? 별건 아니고 host부분만 뜯으려해요..
내장객체 써도 무리없더라구요
Urlsearchparam 이요?
https://developer.mozilla.org/ko/docs/Web/API/URL 요거 말씀하시는 것 같아요~
pathname 바로 줘버리네용ㄷ
저는 window.location의 pathname이나 origin같은걸로 보통 썼습니다
LazyCuma님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
늦은 시각에 죄송합니다.
x의 n 제곱을 반환해주는 함수 pow(x,n)을 만드는 문제인데, function pow(x,n){ let x = prompt('x?',''); let n = prompt('n?',''); if(n<1){ return alert("nonono");} return alert(x**n);} 왜 함수안에서 x와 n을 선언하면 안되나요 ? 에러로 x가 이미 선언되었다 라고 떠서 안되더라구요. 그런데 x,n 변수 선언을 함수밖에서 하니 되던데 이유를 모르겠어서 여쭤봅니다.. 너무 간단한 거라 죄송합니다 ㅠㅠ
https://ko.javascript.info/function-basics#ref-1766 이쪽을 참고하셔서 arguments에 대해 이해하시면 좋을 것 같습니다
pow(x .. 여기서 선언된거라서 그래여; 겹치는데 이름쓰고싶으면 내부변수는 let _x 이렇게쓰시면될듯..?
마침 저기서 과제로 나온 문제 풀다가 이해를 못했던거였습니다 답장감사합니다 ㅎㅎ
앗그렇군요! 감사합니다!!
생각해보니 파라미터라고 하는게 맞겠네요.
그나저나 window.prompt 있는거 첨알앗네;;
저 함수를 사용하실때 입력을 pow(3, 5) 이런 형식으로 받으면 함수 내부에서 사용해야하는 변수명이 이미 x, n으로 지정되어있기 때문에 x, n을 또 지정하려고 하셔서 "이미 자리있어요!" 하고 에러나는 거라고 생각하시면 될 것 같아요.
예전에 var로 변수를 선언했을 때는 허용을 했었으나 (https://eslint.org/docs/latest/rules/no-shadow), 요즘은 scope가 헛갈리기 때문에 에러로 지정되는 것 같아요.
사진
가끔씩 헷갈리는 것 같아요...
헛그렇군요 자세하게 설명 해주셔서 감사합니다.. 이해가 완전 됐어요 ㅠㅠ
즐거운 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
호쉬지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
밀림님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
음료수 마시는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
제제님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
일하기 싫은 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
chi님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
위젯기반 개발 - React -> Redux -> React Query 로 이어지는 변화속에서 React Query나 SWR 과 같은 방식에 대해 저자는 Widget Driven Develop 이라는 이름을 붙여서며 개념을 정리하고 있습니다. 간결하면서도 핵심만 잘 정리된 글이기에 공유드려봅니다. https://alexei.me/blog/widget-driven-development/
즐거운 네오님 호쉬지님 밀림님 음료수 마시는 어피치님 제제님 일하기싫은 네오님 피스메이커 프로도님 모두 모두 반갑습니다!!
좋은 아침입니다~
안녕하세요!!
어서오세요 어제는 늦은시간이라 인사를 못드렸네요. 환영합니다ㅎ 이곳은 프론트엔드나 웹 개발에 대해서 궁금한 것들을 물어보고 아는 것들은 알려주고 또 공유하면서 함께 성장하고자 하는 곳입니다. 궁금한 것이든 아는 것이든 둘다 편한게 글 남겨주세요 :)
넵 ><
이모티콘
import로 useEffect를 가져왔음에도 useEffect가 작동 자체를 안 하는 건 무슨 이유 때문일까요..
import { useEffect } from "react"; 이렇게 가져오셨을까요?
넵넵
이런 적은 처음이네요....
useEffect를 어떻게 사용중이신데요~?
혹시 커스텀 훅을 중복 로직 최소화 같은 재사용성을 위한 측면보다 코드량을 줄이기위해 만들기도 하나요? 로직은 같지 않은데 훅들을 따로 빼고 싶을 때도 사용하는지 궁금해요.
useEffect(() => { console.log('rkskek'); }, []);
[졸린 라이언] [오전 10:01] useEffect(() => { console.log('rkskek'); }, []); 이렇게 쓰고 되나 확인만 해도 작동이 안 되고 있습니다
해당 컴포넌트가 렌더는 되는데 useEffect 안에서의 콘솔만 안 찍힌다는 말씀이신거죠~?
넵넵
사진
사진
리액트-쿼리 사용시에 모든 서버 데이터를 useQuery만 사용하시나요?? axios만 이용하는 상황이 있을까요?
처음에 이렇게 없다가 투어고소개를 호버 했을 때 아래 페이지가 또 뜨게 하는 건 어떻게 하나요??
js로 하나요?
css로만 가능해요
저번에 같은 질문 나왔을 때 나왔던 링크 첨부합니다! https://www.w3schools.com/howto/howto_css_dropdown.asp hover dropdown menu nav bar 같은 키워드 조합해서 구글링해보시면 많이 나올 것 같아요!
삭제된 메시지입니다.
허브님 정말 감사합니다
useEffect 안에서의 콘솔만 안찍히나요?!
다른 곳에서의 콘솔은 잘 찍히나요?
제가 잘 몰라서 그런데, 웹서버에 데이터 요청을 보낼 때 캐싱이 필요없을 때가 있나요? 아니면 혹시 말씀의 핀트를 제가 잘못 잡았는지요?
두 배열을 데이터들을 조건에 맞게 하나로 합치는 방법은 무엇이 있을까요? 간단하게 2중 forEach 문으로 빈 배열에 push 하고 있는데 더 나은 방법이 있는지 질문드립니다..!
3일째 해결하지못해 질문 드립니다!ㅠㅠ next.js를 사용하고있구요, 전체 컴포넌트를 감싸고있는 layout이라는 컴포넌트에서 setTimeout를 호출하고 있습니다. setTimeout를 통해서는 1분뒤 setState로 상태를 변경해주는 코드를 실행하고 있는데(상태가 변경되면 현재 어떤 페이지에있던 팝업이 실행됨을 기대하고있습니다), setTimeout이 돌아가고있는 중 페이지를 이동하면 setState로 인한 리렌더링이 일어나지 않습니다. 리렌더링을 일으킬 수 있는 방법이 있을까요? 혹은 로직을 변경해야하는걸까요?
한 배열로 먼저 합치고나서 filter 돌리는건 어떨까요?
페이지ㅜ이동 후의 1분뒤에는 setState가 일어나나요?
includes도 괜찮을거 같아요!
페이지 이동하면 setTimeout이 초기화되서 그럴거같은데 고려해보셧어요?
음... 딱 한번만 요청 후에 다시 요청하진 않을것 같아서입니다
db join 하는 것처럼 각 배열 아이템의 id가 같을 때 둘이 합치는 로직을 구현 중입니다. 두 배열을 합치고 filter 하는 방식으로 구현이 가능할까요..?
setState를 담고있는 함수안에 콘솔을 찍으면 콘솔은 찍히고 있습니다. 그래서 setTimeout이 초기화된것이 아니고 setState 로 인한 리렌더링이 일어나지 않고 있다고 생각했습니다 !
그러면 id를 key로 하는 Map을 만들어서 해결할 수 있을 것 같습니다!
setState로 변경될 상태와 모달이 화면에서 제거되거나 초기화된게 아닐지요
허브님 아까 주신 사이트에서 코드소스 가져와서 제 식대로 바꿔서 쓰는 건 초보자 떄 하면 안 될 일인가요?
가져와서 바꾸고 쓰고 부트스트랩이나 템플릿 처럼
하면안되는건 없죠
당연히 가져다 쓰셔도 되죠! 다만 소스를 이해하고 가져다쓰시는 게 좋을 것 같습니다
후엥 ㅠ
처음부터 저러면 실력이랑 괴리감이 생길 것 같아서요 ..ㅎ
원래 복붙 잘하는것도 실력이에여
모달은 레이아웃 컴포넌트에 있고, setState가 초기화되는걸까 싶어 상태를 recoil을 통해서 업데이트 해봤는데도 같은 결과가 나타나내요… 로그인 연장 팝업을 띄우려고 하는건데 제가 컴포넌트 위치를 잘못 잡은 걸까요.. app 컴포넌트에도 넣어봤습니다 ㅠ
오 감사합니다. 한 번 시도해보겠습니다!
간단히 만들어봤는데 페이지 이동해도 잘 됩니다 https://codesandbox.io/s/nameless-monad-xs28ol?file=/pages/_app.js 혹시 프로젝트를 공유해주실 수 있으신지요?
아하 스테이트는 각 페이지별 클로저에 갇혀있을텐데 a페이지에서 설정한 setTimeout에등록한 setState는 a상태를 변경하는것이고 현재는 b페이지의 상태를 바라보고 있으니 리랭더링안될거같아요
선생님들 피피티 디자인 참고할만한 사이트 추천부탁드립니다!!
디자인 레퍼런스만 찾으시려면 canva도 추천드려요 :) 디자인 작업 하시려면 부분적으로 유료이긴 한데 레퍼런스 보시기엔 좋을것 같아요.
토스가 새로운 로고를 공개했네요
와우~ 멋지네요 ㅋ
와 임팩트가 세서 이전 로고가 기억이 안 나요!!
그러게요 예전로고는 먼가 카톡 로고 같았는데
페이지 이동하면 _app컴포넌트 자체가 리렌더링되어서 빈배열 useEffect가 의미가 없군요.. 서버사이드렌더링엮여있어서 nextjs 머리아프네요 cra는 이러지 않았는디.. portal도 해보고 이리저리 해봣는데저는 잘안되네요 ;ㅠ
와 FeConf 구매하신분?
??
아니뭐죠
1초도 안되소
이렇게 빨리
너무빠른게요?
???
매진인대요?
매진될리가 없는거같인데
뭐지 ;;
2등이요
안 풀린 거겠죠...?
버그아니에요?ㅋㅋㅋㅋㅋ
저 예매했는데..?
헐...
서버시간 맞추셧나요?
59에 들갓는데
헐…
에반데요
FE CONF 예매 성공
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
와 1초만에 매진 ㅋㅋㅋㅋ
넵 딱 12시에 들어갔어용
.... 이게 맞나요
예매하신분들 부러워요 ㅠㅠ
수강신청보다 빡센데요
으악 매진…
버그인듯? 다시 들어가니 또 구매버튼이 뜨긴 하네요
사진
현직: 대학생
가 아니라 매진이네요
와우
ㅠㅠㅠㅠ
한국에 개발자 정말 많군요...
세상에 내 PC는 12시도 아니었는데
ㅠㅠ
수강신청보다
빡신데요
진짜
ㅋㅋㅋㅋㅋㅋㅋ
와..12시 되자마자 눌렀는데 ㅠㅠ
순식간이네요 진짜...
말도안돼..
https://time.navyism.com/ 수강신청 사이트는 필수에요 ㅠㅠ
ㅜㅜ..
사진
진짜 58초가 답이였나
재고 몇개 풀렸는지 아시는분?
와… ㅜㅜㅜ
59초 새로고침 연타했습니다..
에이 이런거가지고 하면서 00초눌렀다가
허허…
ㅋㅋㅋㅋㅋㅋㅋㅋ
ㅠㅠㅠ
와...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
와ㄷㄷ
딱 정각에 버튼바뀌더라구요
저 구매했슴다..
너무 스무스하게 되서; 안돼신분들 있는줄 몰랐네요
생각보다 버벅임없이 되길래 경쟁률 안빡센줄 알았어요
와 진짜 실패할거라고는 생각도 못했는데..
부럽네요 ㅋㅋ 알림 맞춰두고 딱 홈페이지 들어가는데 바로 매진이 떠있었어요
그니까요..
사진
ㅠㅠ
와 점심 먹다가 까먹었네요..
와..
제 PC 시각은 아직 11:59 ㅋㅋ
사진
저두요 ㅠㅠㅠ 진짜 1분전부터 대기했는데
사진
매지이이인 ㅠ ㅠ
알림 딱 울리자마자 예약하려하니 매진..
와우 티케팅 성공!
와
매진
;;
추가 오픈 가능성 없읆가요......
와
200장되나요??
너무 나이브했나... 라고 하기에는 순식간이라. ㅋ
이렇게 빠를수가없는데 진짜
흐엉 인프콘도 떨어져서 이건 꼭 가야지 하고 10분전부터 대기했는데ㅠㅜㅜ
생각해보면 여기 인원들만 도전해도 천명 넘으니까 매진 속도가 이해가기도해요..
아쉽네요 ㅠㅠ
너무 편하게 생각했네여…
저두요..너무 아쉽네요
이모티콘
ㅠ 모집 인원이 적긴 적었나바요
저는 잘 아는 건 아니구 구글링해보니까 Next에서 _app.js에 넣은 컴포넌트들은 페이지 이동해도 리렌더링 안하고 상태 유지 해준대요
전에 홍보물보기론 300명이었나
적엇어요ㅠ
다들 이렇게 ㅜㅜ 수강신청하듯 준비하실줄이야..
롯데타워자체가 되게작아요 생각보다
3만원인데
지금은 예약 페이지 자체가 닫혔네요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
다들 와..
저도 성공 했는데 이제 막 시작한 개발 초보 중 초보인데 가서 들으면 도움 되겠죠,,?
그럼요!! 그리고 사람들 북적거리는 느낌 받아가며 FE 개발자 뽕도 좀 채워오시구요. ㅋㅋ
알겠습니당 ㅎㅎㅎ 답변 감사합니다
가서 후기글쓰겠습니다..!
부스만 돌아도
뽕차요
ㅋㅋㅋㅋㅋㅋㅋ
매진돼서 못삿어요…
와
기대하겠습니다 ㅎ
혹시 Layout 컴포넌트가 _app.js 말고 다른 파일에 들어있지는 않나요??
너무한다
ㅠㅠ 기대했느네 ㅋㅋㅋ
원래 이정도로 인기가 많아요?
google i/o 하듯이
feconf i/o도 있으면 좋겠네요,, 이원생중계로..ㅋㅋ
사진
300장이엇다네용 ㅠㅠ
매진이네여 ㅜ
새삼 오프라인과 온라인 체감이 확나네요. 유투브에서 조회수 300과 온라인 참여 300 음...
부럽다..
생각해보면 여기 톡방만해도 ㅋㅋㅋㅋㅋ
300명안에 들기 어렵겠군요
우앙 엄청부럽네용 ><
그래도 유튭으로 볼수잇네요
인프콘 영상은 언제 올라올련지..
초코맛프로틴님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
인프콘은 1년에 한번만 열리나여?
이번이 첫회라 모르겟네요ㅠ
코드까지 만들어 공유해주시다니 정말 감사합니다 ! ㅎㅎ 주신대로 만들어보면 되더라구요 그럼 제코드에 문제가 있는것 같아요..! 저는 정확히는 Layout컴포넌트에서 로그인이 되어있고, 타이머가 아직 시작 안했을때 setTimeout을 실행했거든요! 로그인조건과 타이머조건이 들어가니까 안되는것 같아요 아래코드가 제가 만들어야하는 코드인데 이렇게 하면 팝업 생성이 안됩니다 …! useEffect(() => { if (!!authTokenByCookie && !!isLoggedIn && !isLoginTimerStarted) { console.log("로그인"); setIsLoginTimerStarted(true); setTimeout(() => { console.log("Popup set!"); setIsPopup(true); }, 5000); } }, [isLoginTimerStarted]);
authTokenByCookie isLoggedIn isLoginTimerStarted 얘네가 바뀔때마다 useEffect가 다시 돌아가야 하니까 얘네를 dependency array에 넣어주어야 하지 않을까 뇌피셜을 써봅니다. 실험해볼게요
제코드에서는 디펜던시 넣어줘도 안되긴 합니다,,,, 😭
죄송한데, 직장인 전형 부트캠프 같은것도 있을까용?
flab, 원티드 프리온보딩..
아아.. flab은 알고있었는데 감사합니다 !
후자는 부캠은 아닌데 직장인도 참여가능한 시간에 진행하고 내용도 좋아요
혹시 다들 클라우드 콘솔 프론트 쪽은 어떻게 생각하시나요?
혹시 Layout 컴포넌트가 _app.js가 아닌 파일에 정의되어 있지는 않는지요?
네네 근데 연초에 한번 뽑는것같네요ㅜ 친절한 답변 감사합니다
아 그러네요 제 Link 코드에 문제가 있었던듯
초코맛프로틴님 반갑습니다! 어서오세요 :)
클라우드 콘솔 프론트쪽이라고 하면 어떤걸 말씀하시는건가요?
아 집에 처치곤란 초코맛프로틴이 쌓여있는데 마침 기억났네요 감사합니다!
ㅋㅋㅋㅋ
콘솔에 Popup set!은 뜨는데 팝업창은 안뜨는건가요?
대쉬보드, DOCKER, AWS 입니다.
그러면 질문의 어떻게에 대한 의미는 뭐였나요?
앞으로 기술적으로 비젼이 있을까요? 리액트랑 JS만을 집중적으로 파는 것이 나을지.. 아니면 다양하게 익히는 것이 나은지에 대한 궁금함입니다.
_app.js에 들어있습니다 !
네 맞아요 !
ㅂㅈㅎ.님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
버튼 onClick 눌렀을때 다른 페이지로 라우팅하눈 함수 만들 때 보통 네이밍을 어떻게들 하시나요??
연차와 방향성에 따라서 다를 거라고 생각합니다. 규모가 큰 대기업이고 연차가 오래될 수록 스페셜리스트를 기대합니다. 규모가 적은 스타트업이며 연차가 아직 적다면 제너럴리스트를 원합니다. 물론 뭐든 다 잘하고 알고 있으면 좋아합니다. 다양하게 익히고 있지만 전문성이 무어냐고 물었을때 전문성으로 평가를 받게 되며 그 외의 것들은 일종의 보너스인 셈입니다. 혹시 지향하고자 하는 5년뒤 10년위 커리어 패스가 있나요?
ㅂㅈㅎ님 안녕하세요! 반갑습니다 :)
안녕하세요ㅎㅎ
저는 goSomePageName() 처럼 지어요
어서오세요 이곳은 프론트엔드나 웹 개발을 하면서 궁금한것들을 물어보고 아는 것들은 공유하면서 함께 성장하고자 하는 곳입니다. 편하게 글 남겨주세요 잘 부탁드립니다.ㅎ
저도 잘 부탁드립니다 ;)
오호 감사합니다!
어떻게 이런 일이… 정말 불가사의하네요 혹시 팝업창 컴포넌트도 테스트해보셨나요? 페이지 이동할 때만 나오는 버그같아서 아닐 것 같긴 한데… 이상하네요
나오는 버그같아서 -> 나오는 버그라고 하신 것 같아서
페이지 이동안하면 팝업 잘떠요.. 음..근데 허브님이 작성해주신 코드 그대로 제 개발환경에서 해봤는데 페이지 이동시에 레이아웃 컴포넌트가 다시 호출되면서 setTimeout도 초가 다시 카운팅되더라구요, 저는 레이아웃컴포넌트가 다시 렌더링되는게 맞다고 지금까지 생각했는데 허브님 코드에서는 그렇지 않더라구요. 제가 뭔가 잘못하고있는걸까요? clearTImer는 호출하지 않고있습니다 !
추천드리고 싶은 부트캠프가 있어 올립니다! 유데미에서 주관하고 3개월 기간에 채용 100% 연계, 비용은 무료라고 합니다 👏 개인적인 생각으로는 어정쩡한 국비나 비싼 부캠보다 훨씬 좋은 것 같네요! 뽑는 인원이 좀 적긴 하지만.. (= 뽑히면 좋음) 관심 있으신 분들은 한번 들어가보세요~ https://www.udemykorea.com/bootcamp/index?utm_medium=owned&utm_source=dev_event&utm_campaign=recruitment_02&utm_content=front-back&utm_term=220824
제가 코드에서 사용한 Layout은 다음 Example에 나온 Single Shared Layout이며 페이지 전환 시 레이아웃이 재사용됩니다. https://nextjs.org/docs/basic-features/layouts#examples 반면 그 다음 예제와 같이 페이지에서 레이아웃을 가지고 온다면 페이지 이동 시 리렌더링이 되어야 정상일 것 같습니다.
아 잠시만요 다음 Example에 대해 적은 건 잘못 설명한 것 같습니다
와 티켓 너무 적어요ㅠ
저도 이거 신청했는데
input의 value를 state로 갖고 있고 백스페이스 한번누르면 안먹고 꾹눌러야 먹는데 원인을 알수 있을까요.. ?
어떠셨나요? 뽑는 인원이 너무 적은 거 같긴 해요 ㅎㅎ
*state -> 전역 state참조
신청만 해도 강의 쿠폰 주는게 맞는건지 모르겠어요 ㅋㅋ 저는 그거 쿠폰준다길래
대충넣어봤는데
앱이 프론트가 아닌가요?
저는 프론트라고 생각합니다
앱이 프론트다 라고 하기엔 앱도 백엔드 있지 않나요??
제가 질문을 잘 이해하지 못한거 같습니다 ㅠ
firebase로 api받아와서 미니 프로젝트 진행중에 궁금한점이 있어서 질문드립니다. env파일에 api key를 저장해두고 .gitignore 처리한 후 깃허브에 올리게 되면 다른 분들이 제 깃헙에서 클론떠서 확인하게 될 경우 동작이 잘 될까요?? 결론적으론 그분이 클론 뜬 파일엔 firebase관련 api key가 없을텐데 말이죠??
백엔드는 앱/웹이 분리되어 있지 않습니다
개념적으로는 앱도 프론트엔드 범주 내에 속해있지만, 일반적으로 시장에서 앱은 안드로이드/iOS가 별개이기 때문에
프론트엔드 개발자는 웹 개발자로 지칭하는 것으로 알고 있습니다
api key를 숨기기 위해 env에 넣는거이까 당연히 작동안하겠죠
그럼 플러터는 뭐라고하나요 ?
플러터는 플러터 개발자라고 지칭합니다
범주는 크로스 플랫폼 앱 개발자로 보시면 될 것 같습니다
감사합니다
감사합니다
저도 좀 애매했는데 답변 덕분에 완벽히 이해했습니다!!
하랑님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 하랑님 반갑습니다 :)
안녕하세요 반갑습니다 ㅎㅎ
어서오세요 프론트엔드에 대해 궁금한 것들 또 다른 사람이 궁금해하는것에 대해 알고 있는 것들 편하게 언제든 글 남겨주세요. 공유를 통해 함께 성장을 도모합니다. 잘 부탁드립니다 :
type ErrorHandler = (error: mixed, isFatal: boolean) => void;
혹시 jest에서 이 에러 뜨시는 분 해결 방법 아시는 분계씰까요?
사진
이렇게 쓰고 있스빈다
클론한 사람이 따로 firebase에서 본인 계정으로 api 키 만들어서 env파일에 넣어주면 될 것 같습니다. 아니면 같은 계정을 써야 하는 협업 상황이라면 api 키를 비밀스럽게 따로 잘 공유하면 될 것 같습니다. 예전에 디스코드 봇 api 키 털려서 전부 갈아엎고 디코방 다시 파신 친구분 기억이 새록새록 나네용
아... 넵.. 이게 궁금했었습니다.! 누군가가 제 플젝을 확인을 하려면 어떻게 해야하나에 대한 의문점이었습니다 ㅎㅎ 감사합니다
라이브러리 이슈였네요 핳 라이브러리가 모든페이지의 모든 인풋창을 건드리다니 후 ㅠ
에러가 어떤거ㅔㅇ요..?
리액트 훅에서 unmount 제어 방법은 useEffect의 클린업 함수 방법밖에 없을까요..? 이벤트 핸들러에서 API 콜을 하고 응답으로 setState로 상태를 변경하는데 unmount 시 fetch를 중단하려고 합니다!
사진
사진
이게 에러입니다.!
비옷입은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 엑셀에서의 개행문자는 자바스크립트에서 뭐로 인식을 하나요???
렏님이 나갔습니다.
사진
tailwind ui 쓰시는 분들 중에 컴포넌트
저거 결제해서 쓰시는 분 있나용?
select 스타일링해서 쓸 경우에 몇 브라우저에서는 지원이 안 된다는 글을 봤던 것 같은데 혹시 여러분은 어떻게 쓰시나요? select 사용할지 div로 만들어 사용할지 고민이 되네요
사진
검색창 크기를 키우고 싶은데 어떻게 할 수 있나요? 위드 하이트 다 안 돼요 엉엉 ㅠ.ㅠ
SELECT 아예 커스터마이징으로 만들어도 재밌어요 ㅎㅎ
초코맛프로틴님이 나갔습니다.
useEffect 쓰면 별로인가요?
abort 시점은 지금처럼 클린업이 좋은 것 같은데요? :) 저는 추가로 궁금한게, abort 시에 발생하는 에러 처리를 어떻게 하시나요? 에러 페이지를 표시하나요?
내일 태풍때매 재택하시나여 다들?
산업기능요원이라
휴가를 써야하나 고민입니다
내일 오후면 비그칠것같아서 일단 커밋과 푸시만 하고 퇴근하려합니다
괜히 병무청에 책잡힐 껀덕지 만들기 싫은데
목숨담보하긴 또 싫고...
산기/전문연 재택근무 좀 풀어줬음 좋겠네요 ㅠㅠ
사진
예전에는 비와도 이렇게 출근하곤 했다죠
react konva 써보신 분 있으신가요?!
이것만 보고서는 잘 모르겠네요..\
태풍 엄청나네요
useEffect(() => { dispatch(selectInit()); return () => { window.alert('잉?'); }; }, []); cleanup 하려고 하는데 왜 컴포넌트 진입때도 알럿이 실행이 될까요?
react18 strict mode에서 useEffect함수가 두번 실행되기 때문인듯합니다
아하...그렇군요 그럼 Strict mode를 꺼야하겟네요
아녀! 다른 방법이 있나 궁금했습니다. ㅎㅎ abort 하기 위해서 이벤트 핸들러에 useEffect를 감싸서 해봤는데 'Invalid hook call. Hooks can only be called inside of the body of a function component' 이런 에러가 뜨더라구요..! 지금은 커스텀 훅으로 빼서 사용해보려구 바꿔보고 있어요!!
Stictmode를 끄게 되면 여러가지 사이드 이펙트를 감지할 수 없게 되니, 다른 방법을 추천드립니다 참고자료: https://reactjs.org/docs/strict-mode.html 가령 개발모드에서는 flag를 주고 관리하는건 어떨까요? 참고: https://github.com/facebook/react/issues/24502#issuecomment-1118867879
오 정말 감사합니다!!
메모리 누수를 막기 위함이라 현재는 로깅만 하구 있어요! 엄지척님 생각은 어떠신가요??
알려주셔서 감사합니다! 커스텀훅 좋은 것 같아요! AbortController 관련 코드만 따로 뽑을수도 있고 깔끔하겠네요
그쵸?! ㅎㅎㅎ 의견 감사합니다 Herb님 :)
낼 걱정되네요 출근하다 날라갈까봐 ㄷㄷ
경남이신가여?
서울이여
날아가지 않을거예요
저흰 뚠뚠하자나여,,
개발자는 뚠뚠하져
소도 날라가는데 닝겐이 뚠뚠해봤자..
태풍 매미때 소들 날라가서 지붕에 있지않았나요
소 불쌍해 ㅠ
이번태풍 바람강도가
사람도 날아간다네요
..
사진
사진
혹시 testing library에서
제가 잘 못 쓰고 있는걸까요? 훔훔...
30되기전네카라쿠배님이 나갔습니다.
const Component = () => (…) 으로 적으시고 render(<Component />) 로 해보시겠어용?
그래도 동일한 에러가 발생하네요
i18next 써보신분들 보통 json파일 폴더트리 어떻게 짜시나요?
주니어탈출님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
당근마켓이나 티켓베이 클론코딩 해보신 분 있나요 ~?
이제서야 봤습니다. 지금으로서는 5년뒤를 생각해본적이 없어서.. 다만 누군가에게 도움을 주는 사수가 되고싶은 마음은 있습니다.
조금 더 고민해봤는데 jest 에서 transpiler가 제대로 동작하지 않아서 jsx를 이해하지 못했던 문제였네요.!
초롱초롱 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
파이팅하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 ! React 관련해서 질문하나 드려도 될까요
두개하세요
그럼 기쁜마음으로 조언 구하겠습니다
리액트로 input 태그 이용할 때, input의 value를 state로 이용하는 식으로 많이 구현하던데, 혹시 이유가 따로 있을까요? 이벤트 시에만 input 값 가져오는 식으로 구현하면 될 거같다고 생각했는데, 예시 들이 전부 onChnage 이용해서 구현하더라구요..!
https://ko.reactjs.org/docs/uncontrolled-components.html 이 부분 읽어보시면 좋을 것 같네요 + : https://ko.reactjs.org/docs/uncontrolled-components.html
저도 이 경우엔 useRef 많이 활용합니다!
모달의 흐릿한 배경 width와 height는 어떻게 주시나요..? vw 와 vh를 활용하면 될까요@??
100vw 100vh 로 가장 최상단에 fixed로 올려놓을 것 같습니당
감사합니다~
이름은 backdrop입니다
아~ 그렇군요 감사합니다
Raul님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
치맥하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 프론트엔드에 관심이 많은 백엔드 엔지니어 라울입니다!
이모티콘
안녕하세요 프론트앤드 개발자 준비중인 학생입니다..!
다들 반가워요
welcome
!
지금 바람이 많이 불기 시작했어요
서울은,,
이펙티브 타입스크립트 공부하다가 궁금한 점이 있어 질문드립니다. 인터페이스의 유니온과 태그된 유니온 같은 말인가용?
반갑습니당
해본 건 아니고 조사만 조금 하고 있는데, 보통은 localization tool이 파일 관리를 어떻게 할지를 정해버리는 것 같더라구요
특정 브랜치에 번역 파일을 저장하는 툴 아예 백엔드 서버로 json 파일을 받아오게 하는 툴 등등이요
백드롭+모달을 구현할 때 페이지 위에 백드롭위에 창을 3겹으로 쌓는 방식이 일반적인가요 아니면 백드롭의 자식으로 창을 놓는게 일반적인가요?? 백드롭의 자식으로 놓으면 event propagation을 신경써줘야 할것 같아서요
백드롭을 누르면 창이닫히게 하려고 합니다
사진 6장
저 react랑 tailwind 폰트 적용방법 구글링해서 코드 수정하고 진행했는데 적용이안되요ㅠㅡㅠ 혹시 tailwind font-melon 부분이 문제인가요?!
자료는 이 두개 참고했습니다
아니요 다른 개념인 것 같아요 tagged union을 쓰지 않고도 인터페이스의 유니온을 나타낼 수 있습니다. 다만 쓰기에 불편할 것 같아요 반대로 tagged union을 인터페이스가 아닌 타입에도 적용시킬 수 있어요 다만 인터페이스의 유니온을 나타낼 때 tagged union을 쓰면 쓰기가 편해서 같이 다룰 수는 있을 것 같습니다
네 저는 currentTarget이랑 target이랑 비교해서 처리해요
오.. 키워드 감사합니다
자식으로 놓은다음에 current target으로 처리한다는 말씀이시죠!??
tailwind config에서 '116watermelon' 이 부분을 ' "116watermelon" ' 이렇게 바꿔야 할 것 같아요 (띄어쓰기는 보시기 편하라고 넣었구 실제로는 붙여쓰셔야 합니다)
옙
삭제된 메시지입니다.
tagged union을 쓰지 않고도 인터페이스의 유니온의 형태가 아래이고, ```ts type FillPaint = unknown type LinePaint = unknown type PointPaint = unknown type FillLayout = unknown type LineLayout = unknown type PointLayout = unknown interface FillLayer { layout: FillLayout paint: FillPaint } interface LineLayer { layout: LineLayout paint: LinePaint } interface PointLayer { layout: PointLayout paint: PointPaint } type Layer = FillLayer | LineLayer | PointLayer ```
tagged union을 사용한 인터페이스의 유니온은 아래로 이해하면 될까요? ```ts type FillPaint = unknown type LinePaint = unknown type PointPaint = unknown type FillLayout = unknown type LineLayout = unknown type PointLayout = unknown interface FillLayer { type: 'fill' layout: FillLayout paint: FillPaint } interface LineLayer { type: 'line' layout: LineLayout paint: LinePaint } interface PointLayer { type: 'paint' layout: PointLayout paint: PointPaint } type Layer = FillLayer | LineLayer | PointLayer ```
네
아항! 덕분에 명확히 이해가 되었네용! 감사합니당~ㅎㅎ
감사합니다. 덕분에 이해 잘 되었습니다 ~
다들 귀가하시는 길 조심해서 들어가세요
2호선
꽉막히는게
살짝 힘듭니다
죄송하옵니당..
여러분들은 any와 unknown 어떻게 구별해서 쓰시나요?
저는 Any는 쓰지 않고, 어쩔 수 없는 경우에는 unknown을 씁니다.
any는 안써요! js에서 마이그레이션하거나등의 불가피할때만 any를 사용하는게 좋다고 알고있습니다
.ts을 .js로 바꿔버리기
unkown은 무슨타입들어올지 모르는상황에 쓰고 any는 어떤타입이든 받고싶을때 쓰지요 늬앙스차이가 있어요
혹시 생산성을 위해.. 빠른 개발을 위해 ts는 도입하되 타입 지정을 자율적으로 맡기는거에 대해서 어떻게 생각하세요..? strict도 끄고..any도 마음대로 쓰고
그래서 unkown은 예를들어 strimg 변수에 할당할수없어서 타입을 좁혀야되구요
any는 모든 타입 변수에 할당할수있어요
그냥 자바스크립트로 개발하는게 낫지 않을까요.
props 에만 주는 용도로 쓰고있다면..?
코드만 더 지저분해보일것같아요
프로그램 내 타입안정성이 깨지니까 ts를 쓰는의미가 별로 없어지겠쥬
Anyscript라도 ts쓰는게 낫다는 분들도 계시던데
음 만약에 학습차원이라면 자유인데, 프로젝트를 해야하는데 타입스크립트가 미숙하다면 자바스크립트를 쓸 것 같습니다.
제가 있는곳에서는 오히려 타입을 잡는다고 개발이 느려진다는 의견이시라 팀에 자율적으로 맡기는 분위기라서요..
의견들이 궁금했습니다
감사합니당
네 실제로 그런 이유로 인해 타입스크립트를 안쓰는 곳도 많이 봤습니다. 팀의 방향성에 따라 선택되는 것 같습니다. 뭐가 더 우월하다고 할 순 없을 것 같아요.
타입도 테스트라 생각하시면 엄청 주기가 빠른 테스트인건데 도입하면 개발에 드는 절대적인 시간이 줄어든다 생각해유
테스트도 비슷한 맥락으로 자율적이네요 대부분 안하는 분위기고
참 아쉽습니다 개인적으로 공부는 하고 있는데 ㅠㅠ
jsdoc이라도 도입하자고 해보셔용
파일이 ts이긴해서 저는 다 붙여서 쓰고있슴다ㅋㅋ
deno 개발은 ts대신 jsdoc 을 사용한다고해요
오 신기하네요
최봉수님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Jsdoc만 숙련되어도 개발이 훨씬 수월할 것 같긴 해요
안녕하세요 최봉수님 반갑습니다! :)
안녕하세요 테오님! 환영해주셔서 감사합니다 :)
타입을 잡지 않고서라도 타입스크립트를 유지하는 것이 나을 거라고 생각합니다. 타입스크립트로 되어 있으면 심심할때 1개씩 해볼수도 있지만 환경이 없으면 아예 시도도차 하지 않는다고 생각해요 타입을 잡느라고 개발이 느려질수는 있다는 점에서는 공감하지만 그것이 안해야할 이유라고는 생각하지 않아요
오와..
말씀감사합니다 ㅎㅎ
네~ 어서오세요 :) 편하게 테오라고 불러주세요. 이곳은 프론트엔드에 대해서 궁금한 것들을 물어보고 또 아는 것들은 공유하면서 함께 성장하고자 하는 곳입니다. 언제든 편하게 글 남겨주세요 :)
아 그러면 melon: ['"116watermelon"'], 이렇게 인가요!?
herb님 감사합니다 덕분에 해결했어여ㅛ
타입스크립트 적용된 미니프로젝트 클론코딩중인데 처음이라 그런가 굉장히 번거롭고... 귀찮고...그러네요ㅠㅠ 이게 처음엔 힘들지만 유지보수면에서 크게 봤을 때 큰그림에서는 효율적이니 사용을 많이 하는거겠죠..?ㅎㅎ
적응만 하면 작은 프로젝트라도 없으면 너무 답답합니다 ㅎㅎ
그렇군요ㅠㅠ 잘 버텨서 습득해보겠습니다!!!🫡
저는 cannot read property 'x' of undefined로 고통을 너무 많이 받아서... 디버깅의 답답함을 귀찮음으로 교환하는 걸 기꺼이 받아들이겠더라구요
그런 귀찮음이 있겠지만 js에서의 실수 방지 해주는 자동추론 맛을 한번 알고나면 못 끊을 정도...로 좋더라구요..(ex로 메서드 호출 같은거 js면 일일히 오탈자 조심해야 되지만 알아서 추론해주니..)
한편으로는 rescript가 더 떴으면 하는 마음이 있는 걸 보면 저도 홍대병이 있나 봅니다
ㅋㅋㅋㅋㅋ
효용체감을 하는데 까지 그리 오래걸리지 않습니다 조금만 더 해보세요 ㅎ
사진
대장님 신입 개발자를 많이 봐오셨을텐데 신입 개발자의 성장 가능성을 판단하시는 개인적인 기준이 있으실까요?
저요 ?
사람들과 잘 지내려고 하는데 거리낌이 없고, 새로운 기술에 호기심이 많아서 해보고 싶어하고, 만들고 싶어하는게 있거나 마음속에 대강의 롤모델들이 있는 사람들을 높게 평가합니다.
답변 감사합니다!
리액트 공부할 목적으로 노트북 저렴하게 구입하려고 합니다 메모리 4GB면 적당할까요?
위치제약없이 코딩 하고싶습니다..
저는 8도 힘들긴했어요
최소 8가시죠 ㅠ
조언 감사합니다 핳핳
이모티콘
최소 8 아니면 16 요즘 램 값 저렴해서 ㅋㅋ
16츄천
합니다!
4기가는 정말
힘들것같아요
크롬 이놈 없으면 개발안되는데,,,, 크롬이 정말
메모리 4GB 노트북 써 보신 적 있으세요? 버벅이는 것 감당되시면야 안될 건 없겠지만 저라면 램을 추가하던가 해서 최소 8기가를 쓸 것 같습니다 아니면 리눅스 익숙하시면 진짜 가벼운 리눅스 배포판 돌리시는 것도 옵션이긴 합니다
삭제된 메시지입니다.
네넹 감사합니다...!
4기가를
요즘 팔긴 하는군요
울고있는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
타입을 이렇게 지정해주고 사용중인데요 이 타입자체를 초기화 해주는 방법이 따로 있을까요?
사진
위의 useState처럼 해주면 동작은 잘 되는데 아래state처럼 할수 있는 방법이 있나 궁금합니다
사진
아래와 같이 해주면 저기서 에러가 납니다
사진
에러 내용입니다
제 부족한 지식으로는 초기화? 문제인거 같은데 정확히는 어떤문제인지 잘 모르겠습니다.
todo가 undefined일 수 있다는거니까
?.로 해결하시면 되지않을까염
사진
state의 초기값이 없어서 그런것 같기두해요
그렇게 처리하면 위와같은 에러가 납니다
네네 그래서 state의 초기값은 무조건 저렇게 넣어야하는지 궁금합니다. 뭔가 하드코딩 같아서요
type에서 no-unused-var 에러는 혹시 어떻게 처리하는게 best일까요 ?
type Todo{…} 지정해줄때 초기화하는 방법이 따로 있나해서요..
todo: todo?.todo ?? '', date: todo?.date ?? '',
이런식으로 undefined일때 처리를 해보실래요?
아 date는 Date 객체였군요
todo: todo?.todo ?? '', date: todo?.date ?? new Date(),
new Date()
일케 하시면 될거같습니다
로 하긴 했습니다만.. 음..
아마 init state가 제일 깔끔할 거에요
아니면 얼리리턴해주셔도 될것아요!
그것도 좋네요
useState에서 early return하면
rule of hooks에 위배되어서
initialState 하드코딩해서 쓰는방법이 제일 안전할거에요
사진
그럼 위 방식이 제일 안전한 방식일까요??
혹시 이 룰에서 어떤것이 위배되는지 알려주실수 있나요..? 저도 정확히 몰라서 여쭤봅니다!
뭔가 보기 안좋아서 고쳐보려고했는데 더 복잡해지는거 같네요
훅은 항상 실행되어야한다라는 규칙이 있습니다! 앞에서 return 해서 훅의 실행을 막으면 안됩니다~
제가 아는 한 제일 안전해요
냠냠님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
답변 감사합니다
냠냠님 안녕하세요! 반갑습니다 :)
울고있는 제이지님도 환영합니다!
아니면 처음부터 todo 상태를 const [todo, setTodo] = useState<Todo | null>(null)
안녕하세요! 잘 부탁드립니다~
이렇게 하는것도 방법일거같네요
안녕하세요!!
궁금한게 그러면 hook은 항상 실행돼야하면 useEffect같은 훅 내부에 조건문을 둬서 어떤 경우에만 실행하게 하는 경우도 원칙을 어긋나게 하는 친구인가요?
if (어떨때만) { useEffect(...) }
이것은 안되고
useEffect(() => { if (어떨때만) { } }, [...])
이런것은 문제되지 않습니다!
사진
훅 안에서 조건문은 괜찮아요
맞아요~ 훅은 내부적으로 순번에 의해서 자기 값을 기억하도록 되어 있기 때문에 조건에 따라 hook순서가 바뀌면 안됩니다
공식문서에서는 밖에서 쓰지말고 effect안에서 if문을 쓰도록 하고있어요
훅을 이벤트 리스너랑 비슷한 느낌으로 이해하시면 편해요 내가 지정한 상황(deps)에서만 실행되는 콜백 이라고
엇 그러면 setState( prev => ({ if(prev) { … } }) setState( prev => ({ if(!prev)return; … }) 그러면 이 두 코드 모두 잘못된 것인가요?
냠냠님도 울고있는 제이지님도 프론트엔드에 대해서 궁금한게 있거나 내가 아는 내용이다 싶으면 언제든 편하게 글 남겨주세요 ㅎ 이런 질문과 답변을 자주할수록 더 빠르게 성장할수 있습니다 ㅎ
얼리리턴은 굉장히 즐겨썼는데 새롭게 알아가는 중입니다!
if() setState()
이게 맞지않을까요
아 setState의 콜백함수 안에서는 상관없죠
state setter는 조건문 안에 있어도 상관 없어요
근데 콜백함수 안에서 early return한다면
return하는 값이 있어야겠네요
null값을 항상 에러핸드링해준다 생각하고 return null 해준다음 핸들링 했었습니다!
고수님들의 대화에 껴볼수 있도록 열심히 배워가는중입니다.. 새로운걸 많이 알아가네요 ㅎㅎ
이모티콘
피자 맛있겠네요
어떤 곳에서는 .env 파일 생성만 하고 다른 곳에서는 dotenv모듈을 설치한 후 사용하는데 어떤 차이점이 있나요??
저두 비슷한 질문인데 환경변수를 사용할 때에 next js에서 .env를 쓰는게 좋나요 next.config.js를 쓰는게 좋나요?
삭제된 메시지입니다.
말을 이상하게했네요,, next config getConfig도 결국 환경변수 참조하는건데 환경변수처럼 쓸 수 있는게 있나요?
CRA 같은 보일러플레이트에서는 기본적으로 dotenv가 포함되어있오요 프로젝트를 어떻게 구성하느냐의 문제인듯요
dotenv가 내부적으로 포함되어서 그냥 읽어지는걸로 알고 있습니다
next.js는 docs에 환경변수를 이런식으로 사용하라는게 있을거에요 PUBLIC 뭐를 붙였던것같은데...
프로파일별 여러 환경에서 사용하기엔 .env를 이용하는 방법이 주로 쓰이긴 하죠..
넥스트도 리액트처럼 비슷하게 쓰는데 앞에 NEXT라는 prefix붙는걸로 알고있어요 NEXT_PUBLIC_${ENVNAME}
둘이 무슨 상관관계가 있는지 잘 이해가 안가서 그런데 next config js로 어떤걸 할 수 있나요?
module.exports = { env: { key: '~~', }, };
이렇게 하면 process.env.key이렇게 접근가능해서
dotenv랑 비슷한 기능을 한다고 생각했습니다
next.config.js파일입니다
sunflower님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 sunflower님 반갑습니다 :)
안녕하세요! 프론트 공부중에 들어왔습니다~!
환영합니다! 여기는 프론트엔드에 대해서 궁금한것들을 마음껏 편하게 물어보고 아는 것들 내가 배운 것들을 공유하며 함께 성장하고자 하는 곳입니다 언제든 궁금하게 생기면 편하게 글 남겨주세요
불타는 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 웹신입님 반갑습니다~~~
이모티콘 안녕하세요~!!
어서오세요 :) 여기는 프론트엔드에 대해 궁금한걸 물어보고 아는 것을 알려주며 할께 성장하고자 하는 곳입니다 잘 부탁드립니다~
넵!! 잘 부탁드립니다~!!
반갑습니다!!
루피님도 잘 부탁드립니다! ;)
네엡 ㅎㅎ
spa에서 swiper같은거 쓸때 스크립트에서 "import 'swiper/css'" 해야하잖아요. 어디서 어떻게 임포트하는게 맞을까요? 지금 swiper 쓰는 컴포넌트마다 다해주고있는데 나중에 알아서 최적화가 되나요..? 그리고 다시 확인해보니 프로젝트 전체에서 아무 컴포넌트에나 "import 'swiper/css'"를 선언해도 다른 곳에서 전부 스타일이 잘 적용되는데 혹시나 이거 피하려면 쓰는 컴포넌트마다(vite+vue3사용중입니다) style 태그에 scoped 달아서 하면되긴한데... 이렇게 오래 생각하다보면 그냥 main.js에 박는게 맞아보이기도 하구요...
오 저도 vite vue3 개발 + swiper 써요
반갑네요!
저희 프로젝트는 한 컴포넌트에서만 써서
+ 코드 스플리팅 필요성이 적은 프로젝트라
큰 고민 안할 수 있었는데
혹시 코드 스플리팅으로 swiper사용하는 컴포넌트가 lazy load 되나요? 이게 중요하지 않을까 하는 생각이 드네요
한 대여섯군데 정도 쓰고잇고 컴포넌트 로드는 아직 생각않고 잇습니다;
mainjs에서 박는게 제일 맞아보이긴하는데 그러면 toast ui의 css도 메인에박고, 뭐 달력도 메인데 박고 뭐 이런게 맞는가 싶어서;
main에 박아도 크게 문제없지 읺을까용
그렇다면 저도 main이 맞을거 같네요
전역에서 사용하는 의미가 드러나는거니 맞는 위치인거 같기도 하고요
좀 더 가독성을 좋게한다면 별도 파일로 분리해서 css import를 main.js에서 감추는 것도 가능할 것 같은? 이거는 좀 더 구글링을 해봐야 깔끔하게 될거 같네요
사진
vue 2 vuetify 예제인데 이런식으로 감출 수 있을 것 같네요
말썽쟁이 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
택배요님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
와 async generator를 쓰면 콜백 prop에 대해 props drilling을 없앨 수 있네요 왜냐하면 generator를 쓰면 주입받아야 할 콜백 디펜던시를 밖으로 뺄 수 있기 때문이에요 같은 맥락에서 의존관계가 깔끔하게 정리된 좋은 아키텍쳐들을 데이터의 흐름만 신경쓰고도 구현할 수 있을 것으로 기대되어요 그리고 이 async generator와 비슷하지만 구독자를 여럿 가질 수 있고 기능이 짱짱한 친구를 우리는 Observable이라고 부르는 것 같아요
오오 존경합니다
이번에 회사에서 next.js 사용해보자고해서 공부를 좀 하려는데 혹시 패캠 이번에 나온 next.js 강의 들어보신분 계신가욥..
추석 이벤트 좋네요
nextjs는 공식문서가 진짜 잘되어있어서 문서만봐도 괜찮을듯하긴해요
공식문서
랑 이슈탭
우선 공식문서랑 레퍼런스들 보시고 구매하시는게 낫지 않을까 싶네요
감사합니다!
예제 같은거 볼 수 있을까요??
있다가 만들어볼게용!!
허브님 매번 탐구하시고 공유해주셔서감사합니다! 큰도움이 되고있어요
아직 경험이 없어서 깊이가 부족한 말들을 이렇게 좋게 받아들여주셔서 몸둘 바를 모르겠습니다! 한편으로는 이런 말들을 자유롭게 공유할 수 있는 이 방 분위기 덕분인 것 같습니다 그런 의미에서 테오님 감사합니다
허브님이 말씀해주신 내용을 공부하고싶으신분은 이 영상 1, 2를 모두 보시면 좋을것같습니다 저는 저 영상을 보고 generator에 대해서 많이 배웟던거같습니다
감사합니다 :)
이분 본좌..
저도 저 분 영상을 우연치않게봣다가 큰 충격을 받앗엇죠 그래서 틈날때마다 저분강의 계속 보고잇어요 근데 내용이 확실히 많이어렵긴해요..ㅜㅜ그치만 그만큼 퀀텀점프하는데 필요한 내용이기도하고 진짜 대단하신분ㅜㅜ
말썽쟁이 네오님 택배요님 반갑습니다 :) 어서오세요~~~
태풍이 위쪽은
조용히 지나갔네요
이거 저도 심심할때마다 보고있는데 뮌가 인사이트를 확 얻는다기보다는 내용정리하는 느낌입니다. 실제로 공식문서랑 예제가 너무 잘되어있는 면도 있구요.
혹시 tailwindCSS 많이 쓰신분중에 중복되는 공통 속성에 대해서 묶음으로 주는방법이있나요? 예를들어서 리액트에서 일정 브라우저 크기일때 반응형으로 줄때 className="sm: w-[15px] sm:h-[15px]" 처럼 sm 이 중복되서 쓰는데 이걸 묶어서 sm:w-[15px] h-[15px] 이런식으로 되나요?
요거 보시면 좋을거같네요
묶으려면15px이라는 단위까지 묶어서 utility 새로 생성 하셔야하지않을까요.. 진짜 자주쓴다면
따로 customizing 해서 config에 만들어놓는 컨셉말고 sm: 이라는걸 계속 쓰게 는 @media 쿼리부분을 className 부분에서 한번만 쓰는방법을 여쭤본건데 없나요
아 확인해보겠습니다 ㅎ 감사합니다
안녕하세요~ 이메일 템플릿을 생성하고 전송해야 하는 기능을 구현해야 하는데 혹시 일반적인 웹 에디터를 사용해도 무관할까요? 찾아보니 이메일 빌더라는 게 따로 있어서 질문드립니다. 관련 기능 구현해보신 분 계실까요?
테이블 코딩 😨 ?
아직도 EMS는 대부분 table 코딩으로 제작을 하고 있는 실정 입니다. 서비스 타켓이 단지 구글 지메일 정도라면 다른 네이버나, 다음 심지어 아웃룩에 비해서 다양한 태그나 CSS 속성을 지원하지만 국내 유저 타킷이라면 table 코딩 진행하고 대표 서비스에서 테스트까지 해야하실겁니다. 이메일 빌더라는게 해외에서 제공하는 서비스인지 국내 개발자가 만든건지는 확인할 수 없지만 제작 후에 각 서비스별로 테스트 이메일 보내서 확인해 주시면되겠네요.
오 프로그래머스 프엔 데브매칭 통과했네요; 점수는 따로 안나오나보네요
개고수........
데브매칭 그거 과제아니에요?
네네 과제에요
오 축하드립니다
인터뷰만 남은건가요?
감사합니다 각 기업 서류검토일거에요
바닐라 js spa라니
혹시 크롬 브라우저에서 html > element의 변화를 녹화할수있는 기능을 어떻게 사용하는지 아시는분 계시나요..? 특정 웹사이트에서 drag이벤트를 좀 파보려고하는데, drag할때만 생성되는 element를 좀 자세하게보고싶은데 drag끝나면 그 element가 사라져서요ㅜㅠ
저번에 봤을땐 바닐라로 구현하는거라 골치아팠는데 이번에도 그랬나요?
사진
여기서욥..!
아하 감사합니다!
네네 바닐라로 SPA
답변 감사합니다!
축하드립니다! 일부 기업은 추가로 코테도 하더라구요. 준비 철저히 하셔서 합격하시길 바랍니다!
시간 모자라서 저는 진짜 많이 못풀었어요.;;
감사합니다! 아 따로 코테라니 ㅠㅠ
알고리즘보다 구현이었던걸로 기억합니다
헐..? 저도 언데드풀님 톡보고 확인해봤는데 합격했네요!!
축하드려요!
감사합니다!!!!! 와 심장 떨려요
축하해요!!!!
메일안왔으면 떨어진거겠죠?ㅋㅋㅋ
프로그래머스에서 확인 가능해요!
데브매칭 문제 풀어볼수도 있나요?
네네 과제 테스트 연습문제 풀어볼 수 있어요
기존 테스트에 나왔던 내용인거같더라구요
return { init: init, getList: getList, } return{ init, getList }
혹시 이 문법 이름 아시는분 있을까요..? es5에서 사용가능한지 궁금해서요
es6에서만 사용가능한걸로 알고 있습니다!
Property Initializer Shorthand이고 es6만 가능한걸로알고있습니다
감사합니다 ㅋㅋㅋㅋ 추석연휴에 풀어보겠습니다
피자 먹다 자는 무지님이 나갔습니다.
감사합니다 !!
프론트엔드는 코테를 어떻게 보나요???
서울 지방 상관없이 코테 다 보나요??
회바회용
아하 지방도 볼 곳은 보는군!
광어회인가요?
네
광어회입니다
이모티콘
JS 마무리 하고 react로 작업 하시는 분들 react로 작업하다 보면 js로는 쓸일이 완전 없을까요??
리액트는 js기반인데...?
js가 밥값벌어줍니당
Js마무리는 머징
js배우는데 귀찮은 문법들이 싫으면 react에서 다 배우니까 그냥 넘어가라고 하시길래 ㅎㅎ.
Js : 국어 React : 시 같은 관계입니당 :)
Js가 탄탄해야
리액트고 뷰고 다 쉬워져요
이모티콘
이해도가 달라집니다 ㅠ
이모티콘
저 요즘 그거 느껴요 js 를 많이 알아야 된다는거
헝 ㅜㅜㅜ
바닥에 이쑤시개 박고 그위에 집짓는거네요
너무 오바했나 ㅎㅎ..
자스책 여러가지 읽고
많이 잘 알아야 함...
이해도가 많이 올라가면
ㅜㅜㅜㅜㅜㅜㅜㅜ
js를 리액트스럽게 배웠을때 당장 리액트를 쓸수는 있겠지만 결국은 한계점이 올거에요!
다른 언어도 공부하기 양호해진다고 하니까
열공하시죵
그 한계점이 자스 차이라면서요 ㅜㅜㅜ
요즘 죽겠어요 ㅜㅜㅜㅜㅜ
JS를 모르면 다른 사람 코드 읽는게 일단 어려웠던것 같아요
리액트만 잘하면
책 추천
의미가 없어요
javascript 딥다이브만큼 좋은책이없죠
수학의 정석느낌이랄까
리액트를 잘한다라는 의미 자체도 사실 JS 이해도가 깊게 있다 라는 느낌인것도같고..
책은 하나도 안본 1인..
js를 깊게 파고싶으면 바닐라로 사이드프로젝트 만드는거 도움될까요?
bboy님 실력에 책보면 또 다른 인사이트가 생길거같아요
넹
맨날 뷰나 리액트로만 하는거 좀 자괴감들때 있어서 …
Ps도 메소드 공부하는거에서는
사칙연산은 모르지만 미분은 마스터했다같은 느낌인거같아용 ㅠㅠ
도움이 많이 됩니다
저는 결국 필요할때 배우는게 가장 깊게 와닿더라구요
리액트 진짜 너무 어려운듯요 ㅜ
바닐라로 이것저것 만들어보는게
좋겠죠 ?
안쓰는건 봐놓고 다 까먹었어요
아직 자스가 익숙하지 않아서 그런건가
ㅠㅠ 저두여
여기도 추천!
보통 어 이게 이제 쉽네? 이때를 조심해야하는것같아요
그떄가 가장 어려울때인것같습니다
10을배웠는데 1000000이 남아있는..
계속 보다보면 늘긴 하겠죠..?
당근~~
어차피 이직업 평생 공부해야하는 직업인거 알고 골랐으니 악깡버해야죠
어디서 봤는지 모르겠는데 매일 자기가 사용하는 언어 책을 30분이라도 읽는게 가장 도움이 많이 된다고 하더라구요 ㅎㅎ 좋은 방법인거 같아요
모던 자스 사이트
N독 하십쇼
도움 많이 됩니다
늘긴 느는데 무슨 산넘어 산인 느낌
모던자스 리액트 공식문서 넥스트 공식문서
이 세개가 제일 좋은느낌..
산을 동네 뒷산이라고 생각하시고
여러산을 정복하시죠
많이 보고 많이 쳐보고 경험해야지
자괴감 장난 없음 요새 ㅠㅠㅠㅠ
도움이 많이 됩니다 !
저도 그랬었는데
너무 급하게 하려고 하면
더 그래요
욕심만 많이서 그런듯해요 ㅋㅋ
급하게 하려고 하고 완벽하게 하려고 하면
스트레스를 많이받아서
천천히 넘길건 넘기면서 하는게
젤좋은것같습니다
금전적인 여유가 되신다면
공부기간을 좀 더 오래 잡으시면서
기본기 탄탄하게 가시죠
저는 취준 때 급전적인 여유가 없어서
별로 안 좋은 회사에서 고생만 하다가
잠 줄여서 공부하고 있어요
ㅠㅠ
저도 여유가 없어서 취직먼저 한 케이스라
저도
저도 시간 쪼개서
ㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋ
저는 술을 엄청 좋아하는데
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ고단하네요 정말루
평일에 열공하고 주말에 하루씩 술을 줍니다
오
그리고 남는 시간은 공부 좀 해요
시간을 조금씩 늘려볼라구요
화이팅입니다
일다녀오면 지쳐가지고…
이모티콘
맞아요 지치죠 ㅠ
그래도 하루에 1시간이라도 보시면
나중에 도움이 많이 될거에요 ~
네 그렇게라도 해야지 안그럼 안됟겠더라구요...
이모티콘
열공 하시죵
다들 !
힘을 얻고 가네요!!! 감사합니다!!
다들 화이팅이요
사진
혹시 jest에서
이런 류의 에러가 나면 어떻게 대처하시나요?
네이버 메인페이지 같이 화면이 작아져도 반응형으로 작아지지 않고 스크롤만 생기면서 이렇게 퍼블리싱하는건 어떻게 하는건가요?? 반응형에 익숙하다보니 막상 그런건 어떻게하는지 모르겟네요….이런식으로 퍼블리싱 공부할 수 있는 강의나 책있으려나요?/
npm start 시 빌드실행하고 웹팩 설정한 포트로 접근시 '사이트 연결할 수없음 ' 오류 왜나오는지 알수있을까요 ? 감사합니다
사진
dev 서버가 3002번아닌가요?
네
접근 포트도 3002 번입니다
적응형 웹인 듯한데, 뷰포트 태그 없애면 돼어요
빌드하고 스타트하셧다는거는 프로덕션 모드같은데
오호...
해보겠습니다
근데 뷰포트 태그를 안넣어져있네요
js를 10일만에 배우는게 가능한가요? (마스터 말하는 거 아니에요! 진도상)
배운다의 기준이 어디까지인지 모호하네요
콘솔만 찍는거면
5분도 가능
기본 문법만 배우는거면 가능하죠
3초가능
원리로 들어가면 불가능
이모티콘
눈빛 애교 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
네네
사진
js로 이거 하는데도 어렵네요 ㅠ.ㅠ 겨우 했다눙
어..
갸어려워보이는데요?
오 저런속성도 있구나
zawtwo님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
눈빛 애교 어피치님, zawtwo님 모두 모두 반갑습니다. 환영합니다!! :)
반갑습니다 (씨익)
ㅠ.ㅠ
어서오세요 이곳은 프론트엔드에 대해서 궁금한것들을 편하게 물어보고 아는 것들을 알려주고 공유하면서 함께 성장하고자하는 곳입니다. 언제든 궁금한게 생기면 글 남겨주세요~
나눠보고 싶은 관심사나 고민, 내가 작성한 글이나 프로젝트 자랑 및 홍보 모두 모두 환영합니다.
혹시 인프콘 영상이 올라왔을까요..?
최근 CSR SSR SSG 중에 앞서는 추세??? 같은게 어떤건가요?
안녕하세요~ html 시멘틱태그관련해서 질문이 있어 올려봅니당 !! 전공자는 아니고, 직무전환을 한 프론트엔드 개발자인데요. 현재 실무에서 일한지는 4개월정도 되었고요. 학원을 다니진 않고 유튜브며 책이며 독학을 하며 감사하게도 바로 기회가 주어져 리뉴얼하는 작업부터해서 일을시작하고있는데…. 이론과 다르게 실제론?? 아직 div,span태그가 많더라고요… 실제 현업에서가 어떤지가 궁금해져서 질문드립니다! 그러면서 앞으로의 작업은 정말 시멘틱태그로 하는것이 맞는것인지…!!도 궁금해지네요. (사수는없고, 같이 일하는 동료도 신입입니다)
https://geonlee.tistory.com/96
사진
8일에 올라온대요!
감사합니다 ㅎㅎ 유튜브찾아봤는데 없는거같아서요 8일이였군요 ㅎㅎ
시맨틱이 왜 필요한지에 대해 먼저 확인해보시는것도 좋을거같아요
좋은 답변이네요
저도 온클릭 저런 속성있는거 이거보고 첨알았어요
아핫… 오..!! 넵넵!!!
필요에 따라? 작업의 목적에 따라 다를 수 있다는 것이지요?!
혹쉬 GitLab 쓰시는분 있나요?? 깃헙에 비해 장점이 뭘까요?
쌍둥이 질문으로.. Intellij 쓰시는분 있나요? vscode에 비해 장점이 뭘까요?
오토 import나 리팩토링 기능이 매우 잘 동작하는 것 같아요.
인텔리는 IDE이고 비쥬얼스튜디오는 IDE가 아닌
raon (베이비 개발자)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 Raon님! 반갑습니다 :)
안녕하세요! 테오님의 sprint 글을 보고 참여하게된 백엔드 개발자입니다(spring 기반이랍니다ㅎ) 다음 sprint 따 꼭 참여하고싶네요ㅎㅎ 만나서 반갑습니다 :))
안녕하세요!
환영합니다!! 다음 스프린트는 9월말이나 10월초를 생각하고 있습니다 :) 일정이 확정이 되는대로 공유하겠습니다. 고맙습니다~
깃랩은 무료로 팀 단위로 사용할 수 있는걸로 알고 있어요. 그래서 스타트업에서 많이 사용하는 것 같아요. CI/CD는 적극적으로 사용 못해봤는데 기본 기능으로 되어 있는 것 같더라구요. 근데 저는 항상 끕니다..ㅎㅎ
https://about.gitlab.com/pricing/feature-comparison/ 무료시 기능 비교입니다.
https://about.gitlab.com/features/?stage=plan 기능 정리
가끔씩 유튜브 보면 정말 열심히 업데이트 하는구나 하는 것 같아요. https://www.youtube.com/c/Gitlab/videos
태그에 의미를 부여해서 SEO 향상과 접근성을 높이는 걸로 알고있어요. 유지보수성도..? 확실히 정리 잘 된 곳보면 우와..하긴하는데 서비스 타겟에 따라, 회사에 따라 다를 것 같습니다. 백오피스나 특정 고객 타겟이 있는 곳이라면 내부 회의를 통해 시멘틱 태그를 고려해볼 것 같아요. 익숙하다면 모르겠지만 시멘틱하게 작성하는 것도 은근 시간이 소요되더라구요.
사진 2장
안녕하세요 위의 함수로 Array를 매핑할때 한 섹션에 두개의 item마다 해당 섹션을 관할하는 container를 추가 하고싶은데 어떻게하면 좋을까요..? 부모 container에 with 100% display: flex justify-content: space-between; , item에 with 50%로 레이아웃을 잡아놔서 container 태그 없이 매핑할 시 위 이미지처럼 레이아웃이 깨져버리네요.. 시도했던 방법은 레이아웃 컨테이너없이 item style에 min-width를 50% 줘서 overflow 되는 영억은 아래로 보내는것이였는데요 생각한것처럼 동작하지 않네요,,
한줄에 아이템 두개씩 나오게ㅜ하고싶으심건가요?
네 맞습니다!
Display grid는 어떤가요?
아 gird로 구현 가능한가요? 제가 사용을안해봐서
한번 해보겠습니다 감사합니다~
네네 다시 블로그글 읽어보니 살짝… 답변의 의미를 파악할 수 있을거 같습니다! ㅎㅎ 정말 감사합니다 ㅠㅠㅠ 민망스럽게도 정답을 올려놓고 제대로 파악을 하지 못했던것같습니다 ^^
네 뭐 그렇긴 하지만, 일반적으로 사용하고자 할때 그 이유에 대해서 확인해보시고 작업하시면 도움이 많이 되실겁니다.
ㅎㅎㅎ넵!!!
크기가 고정되어있지 않은 여러 이미지를 불러올 때 레이아웃이 움직이는 문제를 해결하기 좋은 방법이 어떤것이 있을 까요??
리액트에서 스크롤 할때 글자만 슥 나타나는 에니메이션 같은걸 넣는다고 하면 보통 리액트 라이브러리를 쓰나요? 아님 다 css/js 로 구현하시나요?
다음 기수 스프린트 참여하고 싶어요!
이경준님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
늦게 알아버려서 이번에는 못한...
매번 저도 해보려다가 늦게 알아서.. ㅠ
그쵸 ㅜㅜ 다음에는 빨리 참여하자구요!
여러분 혹시 월급의 몇프로까지 월세로 쓸수있다고 생각하시나용?
grid 사용하니 바로 구현되네요…감사합니다
최대30%..? 20%정도가 적당한거같아요
전 20프로로 생각하고있었는데 관리비 모두포함하니 14.2프로네요
오 14프로면 넘 좋네요
전 30퍼요
이경준님이 나갔습니다.
근데 저는 전세라서 전세이자 + 관리비입니다
연차가 높아질수록... 월세도 많아지겠군요...ㅋㅋㅋㅋ
저도 이번에 전세로 이사가는데... 대출을 좀 많이 했더니 이자가 50~60나가네요 ㅠㅠ 거의 월세...
16%네요 저는,, 나갈때마다 마음아픕니다
집을 사는게...
건물주랑 저랑 동갑이던데
하,,
좋겠다 건물주
실례지만 전세대출 + 신용대출이신가용
아뇨 전세대출만 1.6억이라... 허그 안심전세대출 4% 금리에...
고정금리로 하셨나요?
아직 신청 전인데 안심전세대출도 고정금리가 있나요?!
잘몰라서..
카뱅 금리 3.6나와서 고민중입니다
제가알기론 고정금리 전세대출은 없는걸로 기억합니다... (중기청, 버팀목 이런거 빼고)
아하
와,, 재작년인가 봤을때 1.8였는데 언제 3.55까지;;
오 완전 싼데요..?!
저도 그렇게 알구있어여
대부분 유동금리인데
지금 3.6이면 진짜 싼거에요
3.6이면
괜찮네요
아 그런가여
지금 상황에 안나오는 퍼센트 아닌가요
넹넹
이건 대출한도 1억인거랑 2.2억인 대출
다르지않나요?
저는 1억잡고 3.6나왔어요
사진
1억빌리면 한달에 30
카뱅말씀하시길래 요 상품말씀하신줄알았어용
와
엇 저는 1억 대출받았는데 2.62입니다
2.62면
달마다 전세이자 21.9 나와요
와
거의 학자금수준
이거 한도 조회하고, 실제 실행! 버튼 누르기 전까지는 몰라서 단계 계속 진행해봐야 확실할수도 잇습니닷...
연봉조건만 맞으면 중기청이 젤좋지않나욥
1%인가 그렇던데
근데 변동금리라서 오르지 않으셨나요?
그때 입사이전이라..
중기청 좋다고 하더라고요
돌랐어요 ㅠ
20만원 언저리였는데
22만원 언저리로 ㅠ
중기청 좋죠... 달에 9만6천원 밖에 안나가더라구요 ㅎㅎ 1.2%...
중기청에서도 전월세 보증금 대출이
나오는군요
몰랐습니다
조건만 맞으면 중기청 진짜 좋은거 같아요
와 마자요 ! 진짜 조건만 맞으면 중기청 최고…그다음이 lh허브인가? ..허브전세인가.. 이건그래도 금리가 조금씩오르긴하더라고요 ㅠ
1.2% 최고다
중기청 조건이 3600 이하인가요
일반형이랑 뭐랑있던데
서울시 청년 임차보증금도 금리 1%인데 대출조건에 맞는 방이 거의 없어서
중기청 짱짱
5천이하도 있는걸로 알고있어요
3600언더, 5000언더 ?
아하
외벌이면
5000언더 알아봐야겠다
그건 2펀가? 그랬던거같아요
3500이라고 나와 있는거 같아요
내가 잘못봤나..
카카오랑 다를건없군요
ㅋㅋㅋㅋㅋ
조금더 싼거 골라야지..
중기청 이제 못 받아서 신혼부부로 갈아탔읍니다
축하드립니다
축하드려요
둘이 벌면 그나마 낫다고들 하더라구요
훨씬 낫습니다
쓰는건 반으로 줄게 되니..
헛돈 쓰던걸 많이 안 쓰게 되더라구요
으쌰으쌰 같이 벌어야죠
ㅋㅋ
material-ui 에있는 컴포넌트 사용하려면 무조건 전체 다 설치해야되나요 ?? 필요한부분만 설치할 수 있는 방법도있을까요 ?
번들링할때 안쓰는모듈들 빠지지않나요?
제가 지금 디자이너랑 둘이서 사이드프로젝트를 하려고 하는데요. 혹시 게시판 같은 기능을 백엔드 없이 작업할수 있는 서비스같은게 있나요?
firebase?
firebase 써보세요
노션 api써보세용
오 노션api도있군여
오 사이드프로젝트
사진
위 세 배열을 이용해 맨 아래 배열처럼 만드는 방법이 뭐가 있을까요 ?
id만 쇽 하고 바꾸려고합니다.
어제 텍스트로 질문드렸는데 감이 안와서 재질문 드려요 ㅠㅠ
사진
자바스크립트swiper.js 라이브러리 사용중인데 옵션중에 상품수 조절하면 보여지는 상품수 조정하는 게 있나요..?
slidesPerView 조절해보셨나요??
없었던걸로 기억하는데 확실하지는 않네요 ㅠㅠ 대신 swiperslide 갯수를 조절하는 방식으로 사용하시면 되지않을까용?!
삭제된 메시지입니다.
음 다른거라서여…
그냥 직접 렌더하는 방식으로 구현했네영.. 혹시나 하구 여쭤봐써여 ㅋㅋㅋㅋ
next js 를 사용하다가 갑자기 next/link나 useRouter로 이동할 때 페이지가 상태 유지가 안된 채로 full refresh 되는데 이런 현상 겪어보신분 있을까요..?
좌절하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 좌절하는 라이언님 반갑습니다 :)
안녕하세요! 반갑습니다😎
질문이 있습니다! input태그를 react state로 관리하면서 보통 onchange 이벤트가 발생할때마다 setState를 해 주던데 굳이 input value를 state로 관리하면서 value가 바뀔때마다 set하는 이유가 뭘까요? input value를 state로 관리하지않고 onBlur로 input창이 out focus됐을때 event 객체에서target.value를 가져와서 딱 한번 setState 해 주면 더 효율적일거라 생각하는데 이유가 있는걸끼요?
행갬님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Hayden님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
제 생각은 개발자가 만들어야할 것이 무엇인지냐에 따라 다를 것 같습니다.
저도 정확한 답은 모르겠지만 어떤 용도와 요구사항을 만족시켜야 하는가에 따라 다를 거라고 생각합니다...! 만약 입력값이 변하는 것에 따라서 UI를 변경해야하거나 다른 동작을 해야하는 경우에는 set을 해야할 것 같구요. 그런 요구사항이 없다면 blur 이벤트로 가져오거나 ref로 관리해도 될 것 같네요!
혹시 jsdoc 사용하시는 분들 계실까요? 사용하시는 분들이 계시다면 프로젝트내에서 어떤 규칙으로 사용하고 계신지 공유가 가능할까요? 예를들어 아래 사진과 같이 파라미터와 리턴값만 사용하시는지 아니면 함수의 로직을 설명하는 내용까지 작성하시는지가 궁금합니다
사진
vite로 리액트 시작할 때 eslint 설정도 되어 있는 템플릿이 있을까요??
사진
tailwindcss 속성을 변수 값으로 넣어줄때 동작을 안하는데 혹시 이유아시는분 있나요?
사진
데브매칭..통과했으면 웬만한 기업과제 통과하나요? 네카라같은 천상계 말구요!
데브매칭 통과해도 면접기회 아예 안주는 케이스 많아요
수능최저기준 같은거라고 생각하시면 편할것같네요
데브매칭 통과하고 서탈하는 경우 많더라구요 ㅜㅅㅜ
데브매칭은 최합하는 케이스 자체가 적다고 들었어요
근데 다른 질문이군요
그렇군요…!! 더 열심히 해야겠네요
그렇다면 데브매칭을 이렇게 크게 하는 이유가 뭘까요.. ㅠ ㅠ
기업 홍보 ..?
아..?
데브매칭에서 들어가는 회사 연봉 수준대가 어떨까요..?
그 회사의 신입 평균 연봉대로 가지 않을까요?
보면 좋은회사도 많고 처음들어보는 회사도 많아요
근데 데브매칭
의미없다고 하던데요
https://replit.com/@NightlyHerb/AggravatingPastProgrammingtool#index.ts id랑 productId랑 title이 뭐에 대한 것인지 몰라서 하고도 잘 했는지는 모르겠습니다만 일단 말씀하신 결과는 나왔습니다
프로그래머스 홍보를 위해 대기업에 이용해달라고 하고 대기업은 꼭 필요해서 하는건 아니라 진짜 필요한 인재만 뽑는 느낌으로 느꼈어요
ㅠㅠ 어떤점에서 그런지 여쭤봐도 될까요?
근데 데브매칭 과제가 쉬운과제가 아니던데..
아 너무 제기준인가요
음 그래서 분별력을 가진거 같기도해요
회사에서 프런트 신입 채용할 때 어느정도 수준까지 할 수 있다고 생각하나요? 처음 가면 보통 어떤 일 부터 하나여??
저는 온보딩 프로세스 있었어서 그거에 따라서 달랏어요
어느 수준까지의 기준도 물론 있지만 회사마다 또 달라요
데브매칭으로
해도 연락이 안오는 경우가..
그렇군요 혹시 다른 회사들 기업 과제 경험해보려면 지원하는 것 말고는 없나요?
그쵸
과제는 공개 안하죠
그렇지 않을까요 다른 곳에 유출하지 말라고 하는 곳이 많더라고용
데브매칭 수준이랑 비슷한가요? 한번도 안해봐서 궁금하네요..ㅎㅎ
회사마다 워낙 달라서
아핫
제가 해본 곳은 11번가랑 애니메이션 툴 만드는 스타텁이랑 데브매칭 3개인데
스타트업 과제가 제일 어려웠어요 3D 로 요구사항 맞춰서 움직이게 시뮬레이션 하는 과제였는데
11번가는 csv파일 파싱해서 시각화 하는거였고
코딱지만한 개인 플젝에서밖에 안 써봤습니다만 쓰시는 목적에 따라 다르지 않을까요? - vscode에서 타입스크립트 타입 추론 - vscode에서 hover menu 보고 도움 받기 - jsdoc cli를 이용하여 문서화
사진
혹시 jest에선
Destricture 로 새로운 변수로 선언해주는걸
어떻게 해결해야할까요..?
app config 가 undefined 인거 같아요!
제가 사용하려는 목적이 js에서 파라미터만으로 타입추론이 어려워서 작성하려던거라서요 우선 답변 정말감사합니다!!
appConfig가 undefined여서 나는듯 합니당
아하..!
보통 그러면 이럴땐 어떤식으로 조치를 하시나요?
오 이런게 나오나보네요 참고하겠습니다
그 목적이라면 jsdoc에 타입스크립트 타입 어노테이션 때려박는 게 가장 부합하는 사용법일 것 같습니다 jsdoc을 쓰지 않고 d.ts 파일 쓰시는 방법도 있을 것 같습니다 - 이건 해 본 건 아닙니다
/** @type {string} */ let str; 이런 방법 말씀하신걸까요?? 출처는 https://poiemaweb.com/jsdoc-type-hint 입니다
네네 설정만 잘 해주면 vscode에서 타입스크립트처럼 추론을 해줘서용
ㅎㅎ 허브님 감사합니다~!
광고플랫폼 FE 과제여서 그랬던 것 같아여
React Query 질문있습니다! 좋아요 기능을 구현할 때 좋아요를 클릭하고 바로 화면에 반영시킨 뒤에 api 요청을 보내려고 합니다. react query를 사용하는 경우에는 서버 상태가 반영되고 나서 화면에 반영돼서 그 시간차를 없애고 싶어서요. 이런 경우에는 따로 좋아요 상태를 state로 관리 해주어야 하나요?
어떤 기업은 과제가 그냥 공개 레포로 설정하라는곳도 있긴합니다
react query optimistic update 사용하시면 좋을 듯 합니다.
오 감사합니다 키워드를 못찾고 있었는데
찾아보겠습니다!!
혹시 이분 해결되셨나요? id만 쇽 바꾼다는게 어떤말씀이신지 모르겠어서요
개인적으로 궁금한건데 이런 상황에서 api요청이 실패할 경우에는 어떻게 핸들링하나요? 숫자 대신 에러ui를 보여주나요 ?
rollback해주는 기능이 제공되는 것으로 알고 있습니다!
react 쿼리에서요 ??
대박짱이넹..
최종 결과물 nextTitleArr의 id를 prevTitleArr의 id로 바꾼다는 의미였습니다..!
이모티콘 아직 react query를 안써봐서 미지의 영역이네요 얼른 봐야겠어요 !!
감사합니다 ㅎㅎ
허브님이 주신 코드 분석해보고 있습니다. 감사합니다 허브님~!
혹시 리액트로 웹말고 윈도우에서 실행되는 exe파일의 슬롯머신 게임만들어보려고하는데 리액트로 하는건 비효율적인 짓일까요..?
유니티 이런거써야하나 싶어서요 ㅇㅅㅇ
일렉트론?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
일렉트론 하고있는데
하지마세요 ㅋ.ㅋ
헉 왜죠…?ㅋㅋㅋㅋㅋㅋㅋㅋ
검색하니까 그게 젤 많이 나오긴하던데
헉 저도 써보진않았는데 ㅋㅋㅋㅋㅋㅋ
메인프로세스에서 크롬 실행시켜서 리액트를 웹뷰형식으로 띄워주는거라
두 작업을 다 해야해서 까다롭더라구요
꼭 exe로 해야하는게 아니면
그냥 리액트로 하시는게
낭르거같아요
꼭 exe 는 아니고
그냥 인터넷없어도…
노트북에서 실행파일로
돌아가야하는 상황입니다!
그건 pwa가 더 맞지않나요?
단순히 exe로 생각하긴했어요 그 형태를
여튼 안쓰시는걸 추천드립니다
똥이에요 똥
아하 pwa도 한번 찾아볼게요!
안녕하세요! 혹시 모던자바스크립트 딥다이브 책을 가지고 계신 분들중에 도움이 되었던 공부방법 tip이 있을까요? 제가 아직 자바스크립트 동작원리가 어려운 편이라 책 글이 눈에 너무 안들어오더라구요… 너무 이론만 읽기보다 프로젝트에 적용해가면서 발췌독하는게 제일 좋은데 언제 어떻게 적용해야할지도 모르겠고.. 예시코드해보면서 동작원리를 파악하기에는 루즈해져서.. 혹시 괜찮은 공부방법있으면 추천부탁드리겠습니다^ㅠ^
txt
더 큰 개념으로 먼저 공부하고
강아지 기엽
딥하게 공부한다고 생각해서 머리에 넣는건 어떨까요?
고양이도 기엽
딥다이브가 설명이 무지많고 복잡하더라고여 그리고 책에서도 명시하는데 단어가 같은 단어여도 맥락에 따라 달라지기도 하고…. 생각할게 많아져서 이해하기도 벅찬 느낌?
맞아요… 뭔가 더 복잡해지는 느낌이라..책을 읽다가 중단했어요ㅠㅠ 분명히 개발자들이 많이 읽는데 이유가 있다 생각해서 그래도 잘 이용해서 공부하고싶은데 말씀하신대로 이해하기에 너무 벅차네요ㅠㅠㅠ
네네 그 약간 요약된 글이나 유툽 영상 먼저보시고 핵심만 잡고
딥다이브 전에 you don`t konw js
그 다음에 하나씩 딥하게 천천히…
추천드립니다
사진
이런 생각도 있구나하고 한번 참고만 부탁드리겠습니다
옆에 결과나오는건
무조건 find가 된다는 가정이 깔려야겠네요..ㅠㅠ
쿼카인가요?
네 쿼카 맞습니당
아 그렇군요 감사합니다!
nextjs는 기본적으로 클라이언트단에서 이동을 해도 페이지 상태가 유지가 안됩니다.
상태 유지하시려면, _app.tsx에서 상탯값 내려주시거나 전역으로 상태관리 하셔야 합니다.
기본 렌더링 방식이 SSG라서요
추천감사드립니다! 한 번 읽어보겠습니다~
넵! ㅠ0ㅠ 조언 참고하여 공부해보겠습니다..
이모티콘
딥다이브보다 조금 더 쉬워요
you don't know js 시리즈별로 책 많지 않나요?
https://github.com/getify/You-Dont-Know-JS 이런데서 영어로는 볼 수 있을지두여
네 두권으로알고있어요
개발하실때 다들 대시보드 차트같은거 어떤거 이용하시나요 ? react 기준 라이브러리
amchart devExpress chart.js 사용해봣어요
저두 amchart 사용해봤습니다!
왜 사용하셨을까요 ? 가벼워서 ? 커스텀이 자유로워서 ?
원하는 데이터를 표현하기에 가장 적합해서 인것같아요!
이거 관련해서 문서가 있을까용?
여러가지 차트 찾아보다가 amchart가 렌더링이 빠르다 느껴서 사용했었는데 대량 데이터를 뿌렷을때는 메모리가 엄청올라가더라구요
감사합니다:)
가벼운건 chart.js가 가벼웠던것같고 기능이 많아 사용햇었습니다.
아하
답변 감사합니다. 제가 전역 상태 jotai를 쓰고있어서 관련한 문제인 줄 알았는데 static file들을 s3에서 분리해서 서빙하면서 발생한 이슈였네요..
음 …. 이문서가 답이 될수도있을까요?
삭제된 메시지입니다.
사진
Link로 이동시 클라이언트 이동이기에 리프레쉬는 일어나지 않는것같은데
오오
감사합니다
이런것도 있었네요
제가 next js experimental 옵션인 outputstandalone을 사용하고 있었는데 이거때문에 refresh가 발생해서(아직 원인은 모르겠지만) state가 초기화 되고 있었네요
사진
버전업되면서 experimental에서 빠졌다고 들었는데 버전업시킬 때 유의해야겠네요
string으로 받네유
slaemf
svg도 캐싱되죵?
input 으로 숫자를 입력 받을 경우에 최솟값 검증 로직을 작성하려고 하는데 최소값을 5로 설정하면 숫자 40 같은 숫자를 입력을 못하는 문제가 있는데 어떤식으로 해결하는 게 좋을까요..?
사진
이거 왜 live server
injected가 나오는걸까요 ㅠ
최소값 미만 (4같은 값)을 아예 막지 말고 경고로 하면 어떠세용
vsc setting에서 설정 다 해놨는데도 저러네요..
키다운이아니라
값이 바뀔때
파이어베이스로 게시판을 만들때 페이징은 어떻게 처리해야하나여..?
로직검사하면되지않을까요
오오 이제 봤어요 감사합니다!!!!!!🥰
말씀해주신 방법도 한번 고려해봐야겠네요..감사합니다!
값이 바뀔 때라는것은 setState 함수가 실행될 때로 봐도 무방할까요ㅕ?!
set하기전에 검사를하고..
코드를 보여주실 수 있으실까요?
아 전역 상탯값을 쓰고 계셨으면, 말씀하신 config를 체크해봐야겠네요
혹시 nextjs의 기본렌더링방식이 ssg라고 하셨는데 관련문서 공유가능하실까요?
페이지 기준으로
공식문서에 잘 나와있습니다.
아 서버페칭을 사용하지않으면 기본적으로 SSG방식을 택한다고 생각하면 될까요?
넵
넵감사합니다!
근데 서버 페칭을 해도
기본적으로 SSG입니다 ㅋㅋ
ssg가 더 빠르기때문에
페칭받은 데이터를 SSR시킬거냐 CSR 시킬거냐에 대한 차이라서
아 기본 프레임은 ssg택하고 그후에 데이터만 ssr해오는 방식인가요???
기본프레임은 데이터에 의해 동적으로 생겨날 Node들을 말한거에요
넵
오호 ㅋㅋㅋㅋ 하나 알아갑니당
공식문서 읽으시고 이해하시는게 빠를듯 합니다 ㅋㅋ
제가 설명을 잘 못해서
역시 next는 공식문서가 정말 친절하긴해요
ㅋㅋㅋㅋ
킹스트
사진
이겁니다! min : 5 max: 40 이라 생각하시면 될 것 같아요!
사진
const { authCookie: authCookieKey } = appConfig; console.log(appConfig);
이렇게 찍어보면
appConfig라는 애가 콘솔에 잘 찍히는데
Jest에선 undefined 라고 정의 되는데
이럴땐 어떻게 처리해야하는지 아시는 분 계실까요?
아니면 해당 appConfig가 Object인데 mocking 하는 방법이 있는지 궁금합니당
"jest mock module" 이라는 키워드로 검색해보시면 공식문서 나올거같아요!
혹시 헌업에서 rtk query많이쓰나요?
저희 회사는 쓰긴쓰는데 이제 react-query 로 갈아타려고 하고있어요!
저희 회사도 쓰고 있는데 불편함이 좀 있어 갈아타는 중입니다...
저흰 Swr
rtk query 다음 프로젝트에서 써보려는데 뭐가 큰 불편함일까용
혹시 어떤점에서 그러신가요?
만약에 rtk query안쓰시면 그냥 리덕스 비동기처리는 createAsyncThunk쓰시나요?
어느것이 최고다! 라기보다는 서비스 유형에 맞게 적절히 혼합해야하는거같아요 그런의미에서 next.js가 편리한 점을 제공해준다고 생각합니다
각각 SEO 필요없을때, 실시간 데이터 필요할 때, 그 외 나머지일때 사용하면
client state와 server state 차이점 알아보시면 상태관리 툴 선정하는데 큰 도움이 되는거같습니다 참고로 저는 client state관리는 recoil, redux-tool-kit을 사용하고 server state는 react-query를 사용하고 있습니다
좋은것같아용
CSR SSR SSG 전부 장단점이 있고 작동 방식이 달라서 해당 페이지의 상황에 맞게 써야해요. 셋을 비교해서 어느 게 가장 우월하다고 말할 수 있는 것들은 아니에요. 아마 몇 일정도 잡고 공부해보시면 금방 알 수 있으실 거라 생각합니다.
사실 제가 몰라서 묻는 것은 아니고 강의에서 요즘 CSR이 추세라는 말을 하셔서 추세가 있나 싶어 여쭤봤어요
사진
아하 아마 요즘 웹페이지엔 CSR이 필요한 페이지가 더 많다라는 맥락에서 하신 말씀인 것 같네요.
그렇군요!
제가 알기로는 두권 이상이던데 한국어만 두권인건가요?
한국어로된거는 두권으로알고있는데 영문은 모르겠네용..
혹시 vuetify 라이브러리 사용하시는 분 계신가요?
저용
이번에 vuetify3 넘어오면서
네네
내용이 너무 없어서 ㅠㅠ
아직 뷰티퍼이3 베타아닌가요?
0년차 개발자라 고생중입니당 ㅠ
베타
넹..
일테네
음
정식릴리즈가안되서..
개인 플젝용으로
8버전 쓰고있어요
쓰는건가요?
네!
저도
베타용
베타로 개인 플젝
하고있긴해서
도와드릴 수 있을지는 모르겠지만
질문 하시면 도와드릴게요
v-select를 공용 컴포넌트로 만들어 둘려고 하는데
네네
사진
select아래
네네
v-menu의 style을 동적으로
custom하고 싶은데
어렵더라구요...
어떤식으로
바꾸고 싶으신걸까용
v-menu의 bgcolor를 props으로 받아서
적용해주고싶은데..
네네
음
삭제된 메시지입니다.
사진
v-menu가 v-overlay-container라는 클래스 아래 있더라구요
네네
그러면
v-select하고
v-menu
네!
는 분리되어있고
네 ㅠㅠ
이거
bgcolor를
넘겨주면 될려나...
흐음
이게 베타
라
사진
v-select props에
menu props라는게 있긴한데
네네
이거 사용법을 잘 모르겠어요..
ㅠㅅㅠ
으음
잠시만요
프로젝트에서 전반적으로 쓸 v-select를 만들었는데, 사용할 때 마다 v-menu의 bgcolor를 props으로 던져주려고 시도하는데, 제가 아직 실력이 안되다 보니까
사진
이렇게 css 선택자로 하드코딩밖에 못하겠더라구요 ㅠ
음
그
script쪽에
네!
v-menu있는데서 props: {~~~~~} 선언하고
아니지
<template> <childcomp childdata = "data"/>~~~
이런식으로
넘겨주는거
해보셧나요
자식 컴포넌트에
넘겨주는 식으로
근데 이게
맞는 방식인지도
저도 잘...
ㅠㅅㅠ 죄송해요 저도 현재 문제사항을 잘 인지 하지 못하고 질문을 드려서..
한번
도움을 주시려고 해도 받아먹질 못하네여 ㅠㅠ
뷰 props
베개면 그럴수도 있죵
Vue 자식 컴포넌트 프롭 전달
찾아보시면
도움되실거 같아용
저도 프론트 단은 잘 모르긴 해서...ㅎㅎ....
감사합니당 ㅠㅠ
배게 아자아자 ㅠㅠ
저도 이런식으로 개발햇엇어요
물론 리스팅 되는 컴포넌트 많이 바껴야해서 그렇게 하긴 햇는데
위의 경우에는 리스팅되는 아이템의 스타일만 바꾸는거면
옵션 제공하는거 잇지않을까하긴 하는데
받는쪽 엘리먼트에 :style props 에 받은 bgcolor 넘기시면 됩니다
<div :style={backgroundColor: $props.bgColor} />
오.. 집에가서 알려주신 내용들 한 번 적용해보겠습니다!
앗 근데 엘리먼트 태그에 접근이 어려워서 ㅠㅠ...
오잉?! 왜 어려우신가요?
초심자는 어려워용 ㅠ.ㅠ
ㅋㅋㅋㅋ귀엽네용
실제 코드를 보여주실수 잇으면
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
구조보고 말씀드릴수 잇는뎅 ㅠㅠ
아.. 접근 불가가 아니라 어렵다는거군요
ㅋㅋㅋㅋㅋㅋㅋ
V-select라는 vuetify 라이브러리에 있는 UI Component를 사용해서 제가 스타일 재정의 하기 쉽게 컴포넌트를 새로 만들어서
새로만든 컴포넌트가 <template> <v-select /> </template> 인데 부모 컴포넌트에서 V-select에 있는 v-menu의 배경색을 props으로 주는데
막상 props으로 주고나니까 v-menu에 어떻게 줄지 모르겠더라구여...
죄송해요 ㅠㅠ 질문이 잘 정리된게 아니라...
버스라 양해 바랍니당 ㅠㅅㅠ
괜찮아용 ㅋㅋㅋ
천천히 하셔도 되요
백엔드 하다가
가끔씩 Vue 다루면
뭔가 눈에 보이는 결과물이 바로 보여서
재밌네요
오늘 링크드인에서 이 채팅방을 알게됬는데, 정말 엄청난 집단이란걸 느꼈어요. 어떤 문제든 질문한다면 다같이 달려들어 문제를 해결하려고 하는게 베개인 제 입장에선 너무나 환상적이고 멋지더라구요.. 왜 이제 알았나 싶긴한데, 지금이라도 알게되서 넘나 감사하고 행복하네요
그쵸!!
네네 ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
크으 좋네요
랜선사수
랜선 사수!
대화 내용 읽다보면 제 분야 아닌 정보도 알게되서 좋더라구여 ㅎㅎ
맞아용
저도 제 분야 아니지만
생각도 안하고 있었는데, 얕게 얕게 지식이 넓어지는 기분 짜릿하네여 ㅎㅎ
뭔가 얻어가는게 많아서
좋아요 이방 ㅋㅋ
고수분들이 참 많습니다..
인정...
오늘 처음 왔지만, 앞으로 잘 부탁드립니다!
고수분들 진짜...
굳굳입니다
작성하신 select의 style에서 v-bind로 prop의 값을 읽어서 v-menu의 색상을 설정하면 어떨까 싶긴해요 위에서 보여주신 css에서 background color를 v-bind로 변경하시면 될 것 같아요
이모티콘 헛 감사합니다! 읽어볼게요!
혹시 투두리스트 처음부터 끝까지 안보고 혼자 구현 못해도 취업은 가능한가요? 질문의 요지는 뭐랄까 이정도를 수준? 기준으로 봤을때 신입으로 가는 회사의 정도가 많이 다를까요?
Vuetify가 쓰기는 편한데 대신 내부를 마음대로 변경하기는 힘들어서 필요한 경우에는 일일히 css를 찾아서 바꾸긴 해야합니다 ㅠㅠ
ㅠㅅㅠ 이거 넘 힘들긴 하더라구요
나중에 어엿한 개발자가 되서 멋진 디자이너 분과 협업을 하게되면
Component 라이브러리 안 쓰고 직접 다 만들어야할텐데
조금은 걱정되면서 한편으로는 설레네요 ㅎㅎ
회바회긴하지만 안보고 투두리스트 정도는 만들수 있으면 더 좋지 않을까여
사실 투드리스트가 척도는 아니지만
투드리스트를 보고 만들어도
구글링해서
투드리스트를 만들 때 이걸 더 잘 만들수 있다면
저는 안보고 만들 필요는 없다고 봐용
전 기능명세가 나왔을때 백엔드 api없이 뷰단구현만이라도 가능한 분이라면 같이 일하고싶어요
아
어차피 업무볼때 구글링 비율이 99%라서 애초에 안보고 코딩하라? 이회사가 개발자 업무에대한 이해가 없다고생각이 드네요
가장 좋은거는
구글링을 하되, 내것으로 만들어라
일듯 합니다
이런것도 가능했다니... 진짜 끝이 없네요.. 어썸한게 너무 많아요! css variables 사용해서 비슷한 구현해 봤었는데, 뷰에선 이런 방법이 있었군야
규글링하는 능력도 실력이에요 필요한 키워드를 정확히 캐치해내는 능력
그래서 영어가 필요합니다...
예전에 검색해서 적용했던걸 언젠가 또 검색하는경우가 있습니다ㅋㅋㅋ 그만큼 뭔가 다 외우는건 불가능하고 결국 검색해서 내 코드에 적용시키는 능력이 중요한거같아요
개인적으로
코드를 복붙하기 보다는
그 코드를 이해해서 현제 코드에 어떻게 잘 녹이는지가
중요할듯 한 느낌
맞아요! 저는 이해안하면 복붙을 안해서..
혹시 현업에서 취업 때 프로젝트 내에서 testing library랑 jest로 테스팅한 경험이 플러스가 많이 되는 부분일까요??
회바회일거 같아요
어떤
프로젝트인지에 따라서도
다를거 같구용
삭제된 메시지입니다.
프로젝트를 무조건 한다고 좋은건 아닌 느낌이에요. "A라는 거를 써봤으면, B라는 결과를 도출해냈다, 그 과정에서 A+를 나름대로 적용해봤다"
이런식으로 스토리텔링이 되어야 하지 않을까....하는 생각입니다
내부 구현은 css variables로 되어있을거에요 해보시고 개발자 도구로 보시면 확인하실 수 있어요 ㅋㅋ
별로였던점과 실패경험도 한번 녹여보세요 ㅋㅋㅋㅋㅋㅋ 성공경험도 재밌지만 실패경험도 되게 재맜어요
맞아요 ㅋㅋㅋㅋ
실패경험을 오히려
쳐줄 수도 있습니당
실패를 해봤다는 거는 미래에서 실패 가능성 하나를 예측할 수 있다는 거니깐
실패했는데 혹시 같은 경험이 있었는지 다른분들께 여쭤보고 그 결과 다른 결과가 나왔었다 이런 스토리텟링도 될수 있으니까여
실패를 안해봤다는건 여러 시도를 안해봤다는것이라는 말을 어디서 본거같네요 그만큼 실패가 중요합니다!
실패는 성공의 어머니
개인 프로젝트는 아니고 사내 체팅 서비스가 테스트가 없고 QA만 있어서 만약 문제 발생 시 바로 유저에게 보여지는 상황에서
제가 UI 테스트 자동화를 진행하고 있는데 도움이 많이 되었으면 좋겠네요.!
안녕하세요. 리액트나 넥스트로 개발해서 웹, 앱 서비스 낼 예정인데 rn에 웹뷰 100%로 말아서 플레이스토어와 앱스토어에 배포하는데 문제가 없을까요?? 리액트 외에 다른 플랫폼은 고려하지 않고있어요(네이티브, 플러터 등..) 웹뷰 마는 용으로만 rn 사용하려고 합니다!
rn응 사용하는데 웹뷰를 굳이 쓰시는 이유가 있을까요~?
웹뷰를 감싸는데는 capacitor 등등 더 적합한 것들이 있지 않나요??
아 일단 출시하시고 하나씩 rn으로 변경하실 계획이면 좋은 선택일 수 있겠네요
앗 혹시 방 규칙 같은게 있을까요??
무조건 개발 관련된 얘기만 해야한다거나...
아뇨
이직 취업 얘기 다가능해요
오..
그래도 주로 개발자 일 코드 공부 행사 위주인 것 같아요
이모티콘 네 알겠습니다! 알려주셔서 감사해요
웹을 감싼 많은 앱들이 영업 중이니 괜찮을 거에요 그런데 앱 스토어마다 앱에서 지켜야 하는 규칙 때문에 앱에서는 특정 콘텐츠는 다르게 보여줘야 한다던가 등이 있을 수 있어요 예를 들어 애플의 경우에는 pc에서 이용할 수 있다 이런 말도 트집을 잡는다던가 등등
아아 질문을 다시 해보자면.. 리액트 외에 다른 플랫폼을 최소로 사용해서 앱을 배포하는 방법은 어떤게 좋을까요? 이것저것 찾아보다가 rn이면 양쪽 플랫폼 커버되고 웹뷰 100%로 말면 리액트 외 학습곡선이 없을거 같아서 저렇게 생각해보았거든요.
ios쪽 심사가 까다롭긴 한가보네요..!
여러분 원래 버튼사용하면 타입을 꼭 넣어줘야 하나요..?
Default가 submit으로 알고있는데 타입넣어주라고 에러가뜨네요...
웹을 감싼 앱들은 보통 어떤걸로 만드는건가요? 예시가 있을까용?
혹시 프론트는 이직 시 도메인 바꾸는 경우가 종종 있나요?
예를 들면 어떤경우인가요?
쇼핑몰 이엇다가 은행이라던지 뭐 이런경우라면 있겠죠?
허다합니다 도메인이 뭐가 중요한가요~
뿌론투는 그런거에 좀 덜 영향받는거 같아서 좋은거같애요
10년이상된 프론트 시니어 한테 물어보니 도메인 중요하다네요! 저연차는 모르겠지만..
전 영향도 크고 중요하다고 요즘 느끼는데
이직시에 같은 도메인이면 강점을 가질순 있겠지만 다른 도메인이라고 단점은 아닌거같아요
떨고있는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
소심한 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
소심한 네오님이 나갔습니다.
안녕하세요 떨고있는 어피치님~~ 반갑습니다 :)
저연차때는 도메인도 모를거라고 가정해서 알려주면서 하면 되는데 아무래도 고연차로 가면 개발실력은 평준화되고 도메인 이해도에 따라서도 판가름되는 경우가 있어서 중요합니다. 가령 블록체인 회사라면 프론트엔드라 하더라도 블록체인을 최근에 많이 경험한 개발자를 커머스를 오래한 개발자를 더 선호할테니까요
*커머스를 오래한 개발자 보다
이직을 하게 되면서 도메인을 유지하는게 더 어려운것 같아요 네카라쿠배건 뭐건 비슷한 일을 하는데가 없다보니
안녕하세요..! 혹시 5개월 전 면접을 본 회사에서 떨어졌는데 면접이 인상깊었어서 후에 보충해서 다시 지원할 수 있나요..?
규칙없이 눈치보지 않고 뭐든 편하게 얘기하고자하는 방향을 추구합니다. 그렇지만 많은 사람에게 메시지가 전달되는 만큼 이 방에 들어오고 싶어하는 사람들이 관심을 가질만한 이야기면 좋겠다 싶어요 ㅎ
안녕하세요
5개월이면 좀 짧은 느낌이긴 하네요ㅠㅠ
앗 그렇군요ㅠㅠ
사내규정에 따라 다를거에요 카카오는 면접 탈락 이후에는 1년간 재도전이 불가능합니다
그래도 팀이 다르면 괜찮을 것 같은데 같은 팀이면..ㅠㅠ
ㅠㅠ 그렇군요 답변 정말 감사합니다!!
어서오세요 :) 이곳은 프론트엔드에 대해 궁금한 것들을 물어보고 아는 것들은 알려주고 공유하면서 함께 성장하고자 하는 곳입니다 ㅎ 편하게 궁금한 것들 함께 나누고 싶은 이야기나 고민들 나눠주세요! 잘 부탁드립니다
배불뚝 제이지님이 나갔습니다.
이모티콘 혹시 현재 베개인 제 상황에 조언 해주실 수 있는 분 계실까요? ㅎㅅㅎ.. 직장 및 마음가짐 등등..
신입이신가요? 아님 취준이신가요?
착한E님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
착한E님 안녕하세여! 반갑습니다
신입입니다!
벌 서는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
전에도 공유드린적이 있는데 신입은 존재로써 일한다는 명언이 있는 영상 다시 공유드려봅니다 ㅋㅋ https://youtu.be/qL77xKKGpiw
벌 서는 라이언님 어서오세요 ;) 반갑습니다
오늘 점심시간에 잘 봤습니다! ㅋㅎㅋㅎㅋ 링크드인에서 봤어요 올려주신거
덕분에 도움이 많이 되었습니다! 비슷한 상황인 지인들께도 공유해 드렸는데 다들 좋아하셨어요 ㅋㅋ
이모티콘
제 상황이 특별한 건 아닌데, 고민이 많네요 ㅎㅎ.. 경험이 없다보니
앞서 async generator 예찬한 사람입니다. 작은 데모를 만들어봤는데, 작동은 되는데요, 데모와 같은 방식은 써먹을 물건이 못 된다고 자신있게 말씀드립니다. 하지만 Observable이나 CustomEvent 날리기 등의 방법으로도 같은 목적(dependency 간소화)을 더 쉽게 달성할 수 있을테니 앞으로 그걸 적극 활용할 계획입니다. 아쉬운대로 사용한 코드는 다음과 같습니다. lib.ts는 살면서 작성한 코드 중 가장 이상한 코드입니다. 사실 맞는지도 모르겠어요. 혹시 잘못된 부분을 알려주신다면 정말정말 감사드립니다. <https://codesandbox.io/s/vigilant-gauss-6fy7sg> 혹시 Observable이나 이벤트가 디버깅이 까다롭다는 말을 들었는데 왜 그럴까요??
3-5년차 이직때 정말 크게 점프할 생각으로 지금 상황을 많이 이용해먹으시면 좋을 것 같아요~ 뭐든 회사마다 일장일단이 있는데 평균 연속기간 길어봐야 2년이니 좋은 점만 골라내서 개인의 성장을 회사를 이용해서 잘 해먹길 바랍니다 ㅋㅋ
얼렁 코드 읽고오겠습니다
많은 근심과 걱정을 떨칠 수 있는 말이네요! 사색은 이만하고 다시 책을 펴야겠어요 ㅎㅎ 감사합니당!
앗 갑자기 궁금한건데 혹시 이력서 작성할 때 중고 신입인데 경력사항을 기재 안 해도 되나요??
리액트에 ts 설치 했는데 ts를 안 쓰고 그냥 CRA만 쓰게 되었습니다. 이 상황에서 react-query를 패키지 다운 받고 useQuery 등을 치면 ts꺼만 불러져 오면서 react-query가 인식이 안 되던데 이럴 경우에 어떻게 해야할까요?
npm i @types/react-query 이걸 다운 받고 코드만 ts가 아닌 형식으로 하면 될까요?
저는 async generator보다는 Observable을 조금 더 선호하고 rxjs를 쓰고 있는 입장에서 디버깅 얘기만 해보자면 Observable에서 에러가 발생하면 stack이 굉장히 깊습니다 콜백에 콜백을 연결하는 방식이라서 그리고 대부분 그 에러 위치는 이슈를 수정하는데 도움이 안되는 위치이기도 하구요~ 그렇지만 Observable은 흐름제어 측면에서는 이해하기 쉽기 때문에 디버깅을 하려고 하면 또 잘 할수는 있습니다
왠만하면 하세요~ 그래야 신입으로 들어가도 추후 연봉협상하기도 좋고 면접에서도 좋습니다 굳이 숨길이유가 있응까 싶네요
진짜 별 거 없구 버튼 클릭 -> 커스텀 이벤트 -> 그 이벤트 발생시 상태변경 을 하려 하는 간단한 코드인데 async generator를 써서 망했습니다 실패작 + 이상한 코드로 시간을 뺏기가 죄송해서 대충 보시면 될 것 같습니다
아 그렇군요, 감사드립니다!!
사진
tailwindcss 를 공부하고있습니다 위와같이 li태그에 중복되는 값들을 줄일 수 있는 방법은 없을까요.?
프레임워크를 쓰시나요?
사실 제일 좋은 것은 프레임워크를 사용해서 컴포넌트로 만드는 방식이 제일 좋습니다 cosnt Li = () => <li class=".... <Li>...</Li> <Li>...</Li> <Li>...</Li>
네 리액트에서 tailwindcss를 사용하는 연습을 해보고 있었습니다..
음... 그렇군료 감사합니다!!
반복되는 스타일은 의식적으로 컴포넌트오 같이 쪼개는 연습을 하시면 좋아요 ;)
쁘린이7님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 쁘린이7님 반갑습니다 :)
안녕하세요. 반갑습니다!!
hihy님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 hihy님 반갑습니다 :)
모두모두 환영합니다 이곳은 프론트엔드나 웹 개발을 하면서 궁금한것들을 물어보고 아는 것은 알려주면서 함께 성장하고자 하는 곳입니다~ 궁금한 이야기 같이 나눠보고 싶은 고민이나 관심사가 있다면 언제든 편하게 글 남겨주세요 호
안녕하세요 반갑습니다~!
오랜만에 제너레이터 볼려니 잘이해가안되서 mdn으로 공부중입니다 ㅋㅋㅋㅋ 낼까지 보고 다시 말씀드릴게여 매번 이렇게 연구하시고 공유해주셔서 감사해요 ㅎㅎ
근데 제너레이터를 쓰면 이점이 있나요?
메모리를 아낀다던지..
필요할때 데이터를 꺼내올 수 있다 ?
이터레이터 배열 순회 할때 제너레이터 사용하면 사용하지 않는 배열을 순회하지 않으니 속도면이나 성능면에서도 좋은 것 같아요
사진
평가를 필요할때 평가하게끔 미룸으로써 성능상 이점이 있는걸로 알고 있습니다!
리액트 쿼리 쓰려고 QueryClient 불러오려고 하는데 react-query가 import 안 되고 계속 /types/ 형태로 인식이 되는데 어떻게 해야할까요....?
사진
계속 types/core로 인식이 되네요...ㅠㅠ
신기하게도 아래 QueryClientProvider은 아까는 react-query로 인식되서 엔터 치는 순간 import가 됐는데 지금 다시 하려니까
사진
울고있는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
또 react-query/types/react로 인식이 되네요....
yarn add @tanstack/react-query
로 해보셨을까요?
신입 지원서에 프론트엔드랑 관련이 좀 없지만 수상경력에 캡스톤에서 했던 python기반의 프로젝트를 기입하면 오히려 디메리트인가요?
import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from '@tanstack/react-query' const queryClient = new QueryClient()
버전이 어떻게 되시나요
저도 그런데 안넣었어요 ㅠ
감사합니다 ㅎㅎ
수상이 없어서 이러면 아쉽긴하네요
수상내역에만 적으셔도
괜찮을것같아요
엇 수상내역에 적으려고만 한건데 적는게 나을까요?
넵 그정도는 크게 신경쓰지 않으시더라구용 어차피 프로젝트 위주로 질문하는..?!
혹시 캡스톤이외에 다른프로젝트는 경험하셨을까요?
이승환님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
다른 프로젝트는 총 두개 경험했습니다
그리고 한가지만 더 질문드려도될까요 서버사이드프롭스로 데이터를 fetch 할 때 mock adapter 가 있어도 mock이 적용이 안되더라고요. 혹시 이 부분은 어떤 방식으로 해결할 수 있나요?
쇼생크탈출님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
핵고수님들 질문있습니다!!!
단일책임원칙에서 제가 버튼을 클릭했을때 handleOnClick함수를 실행하는데 그 안에는 리덕스 디스패치도 실행하고 다른 로직도 실행한다면
이건 단일책임원칙에 벗어나는걸까여?
저는 그 버튼이 클릭이 됐을때 해당하는 사건이 발생하길 원하는데 그게 전역변수에 담기기도 원하고 다른 함수도 실행되길 원한다면
이건 단일책임원칙을 지키는것인가요??
원래 핸들러에서는 디스패치만 해주는게 좋아요
State view action 단방향 데이터플로우를 따라가려면...
단일책임원칙이란게 원래 클래스에 바인딩된 메서드를 다루는 주제라 1대1매칭은 그렇지만...
어딘가에서는 필요한 로직을 수행해줘야할텐데..
한함수 내에서 단순조회와 변환을 수행한다면 srp위반이라 할수있습니다
비즈니스로직은 리듀서 부수효과는 미들웨어라는 위치가 있습니다
그럼 온클릭을했을때 따라오는 부수로직은 리듀서 액션에서 해야한다는 말씀이신가여?
예를 들어
온클릭하면 액션 디스패치만 해야해요
제가 리스트의 한 아이템을 클릭했을때 클릭한 아이템의 정보를 전역에 저장해두고싶고 팝업창도 동시에 띄워야한다면
이건 고대리액트 클래스시절 withConnect 사용예시 찾아보시면
이런 경우는 어떤식으러 해야할까요
핸들러에서 액션생성만하는거 볼수있어요
전역은 스토어겠고 팝업은 미들웨어로빼서 액션 객체내 정보 이용해서 호출하는게 정석이긴 합니다
와...어렵네요ㅠ
어디까지나 원론적인 이야기긴해요
onClick={ dispatch(저장); openPopup() } 이런건 단일책임원칙에 위반된다는말씀이시져?
흠 저 같은 경우 그냥 핸들러 이름만 열심히 지어보고 행위들은 핸들러 안에서 다 해줬는데.. 그런 방향성은 몰랐네요 어느새 3년차라 이대로는 불안하기도 하네요..
사실 함수형 패러다임과 srp이야기를하면 트랜잭션 스크립트패턴은 안티패턴이 아니냐는 이야기까지 나와서... 맵 필터 리듀스 단위함수내 조회와 변경로직이 분리되어있냐 정도가 적절한 srp가 아닐까...
사실 리덕스안쓰면 대부분 핸들러에서 처리하게되긴해요
저같은 경우는 리덕스 안쓰면 걍 핸들러별로 훅 하나씩 만들어서 씁니다
근데 리덕스를쓰면... 설계상으로 미들웨어란 적절한 위치가 있어서... 굳이다른곳에 둘필요가없죠...
ㅠㅠ제가 아직 너무 부족하네요
좋은 답변 해주시지만 답변도 이해가 안돼서 더 열심히 공부해봐야겠슴다ㅠㅠㅜㅠㅜㅠㅠㅠㅠㅜ
시간나면 읽어보세용 ㅎ
이런 흐름들은 어떻게 습득할 수 있으셨나요?
감사합니다 저도 링크 읽어볼게요
웹을 열심히 표류하시면 됩니당... -_-
허헣
오늘도 배울거 하나 더! 열심히 넓히면서 전체적인 그림을 그릴 수 있게되기를..
감사합니다!! 정독해볼게여!!
사실 함수형 프로그래밍인 저아저씨 블로그랑 c#개발한 다른아저씨 하나있는데 그분 블로그만 다읽어도 될듯한데... 시간이 없어서리 ㅎ
사진
늦은 시간 질문 드려 죄송합니다 ㅠ response.headers에 담겨 있는 refresh-token을 가져오고 싶은 상황입니다.
그런데 refresh-token을 뒤에다가 적으면 - 부분때문에 가져올 수가 없는데 ,, 혹시 방법이 있을까요 ㅠ
obj[key] 방식으로 접근해보시겠어요?
오호! 감사합니다!
정독이 쉽지는 않겠지만 좋은 소스 알게된게 어디! 🥰 감사합니다
사진
이정도 수준으로 관리되고 있는 회사가 많나요..?
protobuf는 첨들어보네요
Grpc protobuf
혹시 프론트엔드개발자가 백엔드를 장고로 사용한다고하면 불이익이있을까요? 무조건 노드쓰는게 좋을까요?
로 세트로 쓰는경우가있어요
아 grcp군요
에이
도구차이라고 봅니다
메시지를 protobuff로 하는경우가 있습니다
루카스님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
클라이언트에서는 현재 아예 사용되고 있지 않는 API 호출 함수가 있는데, 백엔드쪽에서는 아직 API가 삭제되지 않았습니다. 추후 사용될 여지가 있을 수 있어서 API 호출함수를 남겨두고 주석을 걸어둔다면, deprecated와 obsolete 중 어떤 키워드가 더 적절할까요? 아니면 다른 키워드가 있을까요?