안녕하세용 프엔 취준생입니다 구글사의 크롬브라우저가 벡엔드측에서 클라이언트가 되고, 구글에서 제공하는 컴퓨터가 서버 역할을 한다.라는 글을 보았습니다. 이게 올바른 정보인지 아닌지 알고싶습니다. 위에 서술된 정보가 맞다면 프론트엔드 측에서 클라이언트와 서버는 어떻게 되는건가요..? 서버는 당연히 그 회사 고유의 컴퓨터일테고... 추가)클라이언트 사이드, 서버 사이드를 공부하기에 좋은 자료있다면 공유받을수있을지요... (●'◡'●)
멋쩍은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
클라이언트-서버 개념은 정보를 요청하는 쪽이 클라이언트, 요청을 받아서 정보를 내어주는 쪽을 서버라고 칭합니다. 그런 의미에서 크롬 브라우저는 서버에게 정보를 요청하여 정보를 받아와서 보여주는 역할을 하기때문에 클라이언트이고, 구글의 컴퓨터는 브라우저가 요청한 정보를 내어주는 쪽이기때문에 서버가 맞습니다. 프론트엔드 측에서의 클라이언트와 서버는 어떻게 되는거냐는 질문은 정확하게 이해가 되지않네요.
답변 감사합니다 ,, ㅠㅠ 프론트엔드 측에서의 클라이언트와 서버는 어떻게 되는건지에 대한 질문은 벡엔드측에서 클라이언트와 서버의 관계를 이루는 것이 있다면 프론트엔드측에도 마찬가지로 그 관계가 존재할것같아서 개인적으로 알아봐도 블로거분들이 같은 내용을 거의 복붙수준으로 배껴놔서 이해가 안되었거든요..ㅜ
클라이언트-서버 개념이 정보의 요청, 정보의 제공으로 구분되는게 기본입니다. 하지만 이는 상대적인 개념으로 브라우저 입장에서 서버-서버로 보이는 것들도 그들사이에선 클라이언트-서버일수도 있습니다. 브라우저만 클라이언트가 된다는 의미는 아닙니다. 구인구직시 프론트엔드, 백엔드 개발자를 뽑는것은 프론트엔드는 웹개발자, 백엔드개발자는 rest api서버 개발자를 보통 의미한다고 보시면됩니다.
웹서버는 브라우저라는 클라이언트 입장에서보면 서버이지만 DB의 입장에서보면 웹서버가 DB에 정보를 요청하는 클라이언트가 될 수 있습니다. 클라이언트-서버는 상대적인거로 정보의 요청, 제공으로만 단순하게 이해하시면 될것같습니다ㅎ
아하... 질문전에는 잡히지 않던 감이 잡힌것같습니다 늦은시간에 친절한 답변 감사합니다!!!
ㅋㅋ 프론트를 클라이언트라고 표현하니깐 클라이언트가 무슨 뜻인지 모르냐고 깎아내리던 옛 교수님이 떠오르네요 ㅎㅎ
프로덕션과 다커도 모르셨던 교수님... 잘 모르시면 물어라도 보시지... 본인이 이해를 못하시니 얘내는 당췌 무슨 말을 하는지 모르겠다며 그냥 입닫게 만든 아픈 기억이... 흑흑
발음 좋네요 다-커
제생각에 프론트엔드는 단말은(휴대폰, 티비, 컴퓨터, 브라우저등등) 다 프론트엔드이지않을까 생각되는데 요새 프론트엔드라함은 웹을 프론트엔드라 부르는거같습니다
코린이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
ㅎㅎ저희는 모르는건 모른다고 명확히하고 부끄러워말고 물어보는 사람이 되도록 노력해요 개발자는 서로 알려주고 배우는 덕목이 중요한거같습니다ㅎ
맞습니다..
그래서 이 방 참 좋아요
이모티콘
bb님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
저도요! (하트)
멋쩍은 튜브님 코린이님 bb님 모두모두 환영합니다+_+ 어서오세요!! :)
반갑습니다 ㅎㅎ
아나스님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
사진
혹시 자바스크립트 콘솔에 찍히는 배열 원소의 개수랑, 실제 개수랑 차이나는 버그 경험해보신분 있으신가요..?
필드1 열어서 보여주실 수 있을까요?
콘솔찍고 나서 그 배열이나 객체 수정하면. 전의 콘솔에서 객체 배얄 열면 달라져있어요.
사진
아 그순간에 객체가 찍히는것이 아니군요
그 순간 객체를 보고싶다면 json.stringify 해서 출력하시면됩니다
{…object} 로 출력해서 보세요! 그럼 그 당시의 값이 복사되서 보여요
여러분 m1 에어 8기가랑 16기가 친이큰가요? 8기가쓰다가 너무느려서 16으로바꿀까하는데 고민됩니다...
넵 깊은복사로 출력해야 그 순간 객체를 확인할 수 있다는걸 첨 알았네요 ㄸ 감사합니다!! :)
8을 안써봤지만 16기가로 1년째 문제 없이 잘 쓰는 중입니다ㅎㅎ
저도 지금 다커 + rn 시뮬레이터 + 피그마 + 디코 + 깃크라켄
이렇게 8기가 학대증인데
16기가보단
m1프로로 가시는게
더 좋을 것 같더라구여
저도 했던 고민입니당 ㅜ
다다익램
프로 16말씀이세요?
8기가쓰는데 이것저것 열어놓고코딩하니까 너무느려서 16으로바꿀까 고민되네요ㅜㅜ
맥북 프로 14용
그건 기본이 16이더라구요
지금 아직 대학생인데 취업 하면 바로 바꿀 예정입니당
돈이...
270이네요ㅜㅜ
저도 윈도우 쓰다가 큰맘 먹고 맥북에어 처음 질렀을때
한 1년 써보니깐 왜 장비에 투자 안했을까란 생각이 확 들더라구요
투자한 만큼의 생산성이 저한테 돌아오고 그만큼 성장해서 좋은 결과가 많았어요
성장하고 싶다면 실력 뿐만 아니라 장비에 대한 투자도 간과하면 안되더라구요
허브님은 혹시 프로 16기가 쓰고싶다는말씀이신가요?
m1 프로 14인치 입니당
16인치는 너무 비싸더라구요ㅜ
14인치도 270이네요
..
그래도 저는 추천
!
미래에 대한 투자라고 생각하셔요
투자할돈이없...
ㅋㅋㄱㅋㄱ큐ㅠㅠㅜㅜㅠㅠㅠ
그럼 조금 더 학대하시면서 저랑 같ㅇ 모아요
이모티콘
저도 에어8쓰고있는데
고민이많네요
에어 16은별로인건가ㅜㅜ
깡통 성능이 참 좋은데
8과 16은 많은 차이 안날걱같더라구요
만약 사시면 꼭 후기 남겨주세요
저도 이럴거같아서 고민이네요ㅋㅋ
괜히샀다가 8이랑별차이없으면.,.
저 16쓰는데 부족한거 같습니다🥲
8이 램인가요
그냥 8써야겠네요
나중에 취업하고바꿔야지ㅜㅜ
m1이면 8을 다 쓰기 힘들다던데..
8쓰는데
후회되네요
버벅거려요..?
이것저것 저는많이열고 코딩하는데
버벅거려요
평상시에는 괜찮은데 좀 여러개 열어두면 가용램 딸리더라고요
돈만있으면 프로 16 516플렉스하고싶네요
얼마정도 하나요?
저 m1 맥북프로 8기가 썼어요
16 많이 무겁지 않나요 ㅋㅋㅋ
친구가 m1 맥북에어 16기가 쓰는데
친구는 렉 하나도 안걸리는데 저는 렉걸리더라고요
진짜요?
물론 가벼운 거 돌리시고 익스텐션 많이 안쓰시면 8기가로도 충분했는데
에어사셔도 16기가 가세요! 프론트엔드더라도 크롬 여러개 켜놓고 코딩하면 렉걸립니다!
서버 두개이상 띄우고 도커 띄우고 하면 8기가 어림도 없더라고요
에어 16미개봉 125만원이면 괜찮나요?
그럭저럭 쓸만하다가 어느순간부터는 자동 import도 안되고 auto close tag 두번씩 닫히고 난리났었어요
정가가 얼마죠..?
저두요..32기가 쓰고싶어요..
암튼 지금은 돌고돌아서 m1pro16기가 한대 m1max32기가 한대 쓰고 있는데 둘다 아주 만족하면서 쓰고 있어요
메모리는 무적권 16기가 이상
다다익렘
무조건 인거 같습니다
다다익램..
다다익램 공감합니다.
안녕하세요 JS 관련해서 궁금한점이 생겨서 질문 남깁니다. JS에서 이벤트 핸들러는 비동기적으로 동작하는건가요? 정확히 이벤트 헨들러가 어떤식으로 동작하는 건가요?
이벤트가 발생할 때 콜백함수를 큐에 넣고 이벤트 루프가 큐를 비우며 함수를 수행합니다
정가가 140인가 인거같아요
그러면 이벤트헨들러가 비동기적으로 동작하는게 맞나요?
이벤트라는 것이 비동기적으로 발생할 수 밖에 없으니 핸들러도 비동기적으로 동작하죠
js 이벤트 루프 찾아보시면 좋을 거 같아요
넵! 감사합니다
이벤트 핸들러는 비동기적으로 동작하는거 맞고 그 이유는 이벤트 핸들러가 Web Api 이기 때문입니당. Web Api 랑 이벤트 루프랑 연관관계를 찾아보시면 될듯합니당
web API는 setTimeout이나 setInterval 이런것만 포함되는줄 알았는데 이벤트 리스너도 web API에 포함되는 거군요…! 감사합니다 찾아봐야겠어요
삭제된 메시지입니다.
이벤트 핸들러는 사용자가 작성하는 것이니 혹시 이벤트를 말씀하신 거라면 일부 이벤트가 webapi 가 맞긴 한데 이벤트는 dom의 구성요소라고 보는 것이 맞지 않을까요
아 아닙니다 레퍼런스를 찾아보니 뮤츠 님 말씀이 맞는듯
react 에서 state change 를 모아서 한번에 re-render 하는 기술이 언젠가 도입되지 않았나요? 말만 듣고 지금 정리할려고 검색해보는데 잘 안나오네 😥 혹시 공식문서어디에 적혀있는지 알고 계신 분 있나요?
여기 첫번째에 나오는 내용이맞나요??
automatic batching 이라고 하는군요 감사합니다!
네네 맞습니다!
https://medium.com/naver-place-dev/react-18%EC%9D%84-%EC%A4%80%EB%B9%84%ED%95%98%EC%84%B8%EC%9A%94-8603c36ddb25 여기 글도 정리가 잘 되어있습니다! :)
현업에 치이느라 흘려듣던 기술들 정리하고 있는데 굉장히 많네요.. 개발자로 먹고 살려면 계속 배워야겠군요
😥
18버전 깊이 안봤는데, 괜찮은게 좀 있네요!!
그쵸 🥲 배울 게 많아서 좋다가도 압박감이 들 때도 있고..여러 감정이 드는 것 같아요 ㅎㅎㅎ
그런 의미에서 회고 하나 썼습니다. 이런저런 사정으로 PM 을 2월말부터 4월말까지 2달여간 진행했는데, 그때의 회고입니다. https://velog.io/@dongdong98/2%EB%8B%AC%EA%B0%84%EC%9D%98-PM-%EC%97%AC%EC%A0%95-%EC%B5%9C%EC%A2%85-%ED%9A%8C%EA%B3%A0
사진
인터넷 익스플로러 비석이 한국에 있다네요
짤로봤는데 한국이었군요 ㅋㅋㅋ
다른 브라우저 다운 받기에 좋은 툴 ㅋㅋ
문구가 너무 재밌네요 ㅎㅎ
ㅋㅋ ㅋㅋ ㅋ ㅋ ㅋㅋ ㅋㅋㅋㄱㅋㄱㅋㄲㅋㄱㅋㄱㅋㄱㅋㄱㅋㅋ
엥ㅇ ㅋㅋㅋㅋㅋㅋ 합성인가요..?
검색해보니 경북 경주 어느 카페에 있다고 하네요
와우
다들 즐거운 주말 보내고 계신가요? 이틀 전에 다녀왔던 인프런 네트워킹 데이에 다녀온 후기를 써봤어요. 테오 덕분에 알게되어 즐거운 경험을 하고 왔습니다. 테오 감사해요😍 https://onlydev.tistory.com/152
크 부럽습니다ㅠㅠ!
부럽네요 :)
2기때 뵈어요 !! :)
후기 감사합니다
next js에서 소셜로그인 연동할때 next auth를 주로 쓰는건가요??
웹소켓 공부하려고 하는데, CRA 환경에서 같은 폴더 안에 server.ts 이런식으로 서버 코드를 작성해도 될까요? 리액트에서 웹소켓을 구현하는 코드는 많은데, 서버 코드는 어디로 빼야 하는 지 감이 잘 안옵니다😢
노드서버하나 구축해서 연결하시면 편하십니다
같은 레포지토리 내에서 src 밖에 서버 폴더를 생성하는 거 맞으실까요?? 아니면 레포지토리 자체를 서버용으로 따로 만드는 건가요??
블로그 글 잘 읽었습니다 :) 인프런 네트워킹 다음엔 저도 가보고 싶네요 글을 깔끔하게 쓰셔서 재미난 시간이 독자에게 전달될정도로 좋아요
저는 아예 따로 만들어서 구축하고 앱이랑 웹이랑 다 연결했었어요
그렇군요! 조언 감사합니다👍
저도 최근에 처음해본거여서... 대부분의 서버예제들이 따로 있는게 많아서 그냥 맘편히 따로 개발했던 것 같아여
제가 이제 막 개념만 아는 상태라, 일단 되게 해보는 게 맞는 것 같네요! 따로 하는 방법으로 해봐야겠습니다ㅎㅎ
저 m1 프로 16기가랑 에어 16기가랑 차이큰가요?
감사드려요 🤩 다행이네요! 저도 또 열렸으면 하는 마음에 홍보(?) 해봤어요. ㅎㅎㅎ
블로그 뭔가 해보려고 해도 틀린 내용을 올릴까봐 겁도 나고 잘 써지지도 않던데 평소에 어떻게 작성하고 계신가요?
보다가 갑자기 생각난건데, 다들 개발자 블로그 어느 플랫폼으로 작성하시나요?
저는 공식문서 위주로 검증해서 틀린 정보 최대한 안올리려하기도 하는데, 틀린 내용이 있으면 댓글 피드백 받아서 서로 성장해나간다는 생각을 하는 편인 것 같아요.
신입이님이 나갔습니다.
그래서 평소보다 더 공부하고 여러 글 참조하게 돼요! 준호님 말씀처럼 공식 문서도 보고, 내가 쓴게 맞는지 확인하고 수정하다보면 생각 정리도 더 잘돼요. 그래도 틀린 내용이 있다면 나중에라도 수정하거나 애매하면 글을 삭제하거나 보호글로 옮길 때도 있습니다. 🥲
어느 분이 말씀해주셨는데 유명한 블로거도 흑역사 글이 하나쯤은 있다고 하셔서 그것도 위안이 좀 되거라구요 😄
*되더
이모티콘
혹시 산에서 와이파이쓸수있는법있나요?
말이이상하네...
스타링크?
에그(?) 라는거 되지않나요
초반에 정말 고민 많이한 부분인데 결국 티스토리로 정착했어요. 동기부여 되는 부분도 많고(방문자 수, 광고) 커스텀도 쉬워서 좋아요. 이미지도 알아서 최적화 되고..장점이 많더라구요.
요즘 벨로그도 많이 쓰지 ㅇ낳나요
않나요
벨로그 좋죠.. 일단 글쓰는게 엄청 편하구 노력 좀만 들이면 트렌딩에도 자주 노출돼서 동기부여도 잘돼요.
근데 github.io는
구글 서치콘솔이 별로 안 좋아하나요?
저는 벨로그 쓰는데.. 노션, 네이버블로그, 워드프레스 쓰기나 깃헙 커밋 막힌 회사도 있어서 무난한 거 같아요
생각나는거 임시 저장하기도 좋고
미디엄이나 티스토리 안될경우..
(흑흑)(흑흑)
벨로그가 유일한 대안이었는데 쓰다보니 편한듯..
다들 답변해주셔서 감사합니다 :) 벨로그랑 티스토리 중 고민해봐야겠어요
저는 티스토리에서 벨로그로 넘어왔는데 벨로그가 더 개발자 친화적인것 같아여
벨로그 없어지거나 그러진않겠죠..?
벨로퍼트님 한분만 관리힌시는거같인서요
서버비용 감당안되시면 그만두시지않을까여..?
애교뿜뿜 무지님이 나갔습니다.
react 에 tailwindcss 적용해서 사용해보신 분 계실까요? 기존에 있는 레포 클론해서 tailwind css 설치해서 적용하는데 적용이 되지를 않아서 , 혹시 이런 경험 있으신 분 계실까요?
오, tailwindcss v2에서는 craco 이용해서 세팅을 해줬던 것 같은데, v3는 이 과정이 사라졌네요.
이 글이 도움되셨으면 좋겠습니다
그럼 안되는데..
(힘듦)
벨로그정도면 인수하려는 곳 많지 않을까요 ㅎㅎ
서버비 후원하기 이런거 안되나..
감사합니다 :) 확인해볼게요 ㅎㅎ
벨로그는 사용자층이 너무 확실한데다 타겟광고하기도 좋고 고인곳이 아니라 유입도 많은 곳이고 브랜드가 구축이 되어 있어서 어떻게든 엑싯은 하지 않을까요? 나중에 취업쪽이랑 연계를 하건 교육쪽이랑 연계를 하건 벨로그 엑싯은 개발 친화 브랜드를 가져가기 좋을 것 같아요
그때 우연찮게 클럽하우스에서 들었는데 서버비를 온전히 혼자 충당하고 계신대요ㅠ 기업에서 인수하려는 시도 있었지만 그러면 광고를 붙여서 현재 사용자들이 원하는 광고없는 블로그를 유지하지 못할까봐 아직은 개인으로 운영하신다고.... (가 일년전이네요 벌써) 지금은 좀 후원도 많이 받으시고 그러지 않을까요.....?! 업뎃이 됐겠죠....! 하하
아이고.. 고생많으시네요
대박이다…
저는 벨로퍼트님이 벨로그 만들었다는거를 지금알았어요
삭제된 메시지입니다.
후원을 받거나 유료화하시는건 어떨지..
필요한 사람이면 지불할 가치가 있다고 생각합니다..
https://velog.io/@velopert/2021.log
여기에도 언급이 있네요
사진
고민되게많으시네요
호오
혹시 웹뷰 어플이 종료되면 데이터 다 안날라게 할 수 있는 방법이 있을까요 ?
월 1200달러를 유지할 수 있다는
놀라운 경제력..
리다이렉션을 통해 쿼리스트링에 필요하신 데이터를 담으시면 됩니다. 만약 오브젝트 데이터가 너무 크고 길어서 파싱하기곤란하시다면 api를 통한 통신을 고려하시면 좋을 듯 싶네요
저도 얼마전 pg 결제 모바일 결제때문에 타 앱 간 리다이렉션으로 구현을 해야되서 겪었던 문제였습니다
사실 ... 완전 웹뷰로만 돌아가는 앱인데
로그인도 웹뷰상에서 진행하는데 이러면 또 로그인을 해야하나요 ?
어플은 완전껍데이에요
<webview uri="https://~~" >
이거 한줄 있는 앱인데
껍데기
로그인에 대한 세션처리를 해주셔야죵
앱에서 말씀하시는거죠 ?
웹 스토리지로 구현하실경우 리다이렉션 혹은 브라우저가 종료되었을때의 데이터 관리가 어렵기 때문에 결국은 네이티브 단에서 해주셔야할겁니다
내네
흑..
RN 지식이 없어서
그리고 우려되는 점은 그렇게 웹뷰로만 구성하시면
넵
스토어 리젝사유가 되실텐데
아 진짜요 ?
rn으로 개발하시는데 굳이 웹뷰를 활용해 개발하시는 이유가 있을까요
그
rn으로 개발하는게 아니라
웹으로 개발하는데
앱으로도 만들고 싶어서
웹뷰를 활용해서 하려고 했던 것 입니다
아하아하
이럴때는 혹시 방안이 있나요 ?
그러면 동일한 UI를 활용하게되어 리젝사유가 되기 때문에
아 ... 문제가 되군요
1. RN 도입 2. 네이티브 앱으로 개발하되 구현이 어려운 인터랙티브한 부분은 웹뷰로 개발 3. PWA 도입 등이 있겠네요
좋은 방향으로 개발 잘 하시길 바랍니당 ㅎㅎㅎ
감사합니다!
아..
벨로그 이야기가 나와서 그런데, 이미지 캡션 기능이 없어서 추가한걸 PR을 올렸습니다. 그런데 PR리스트를 보니 테오님이 2월에 PR올리신것도 아직 클로즈가 안되었더라구요..! 이런 경우에는 어떻게 하는게 맞을까요? 메인테이너에게 PR에 대한 메일을 보내는게 맞을까요??
저도 타입스크립트 교재 관련 이슈 올렸었는데
아직 클로즈 안되서 그냥 바쁘신듯용
이용자 수가 얼마나 되는지 몰라도 170만원 / 500명이라고 가정하면 월 3,400원 정도로 지불할수 있는 셈인데..
따로 허가를 구하거나 이슈라이징 된 내용을 PR한게 아니라 없는 기능을 추가해서 올린거라 오픈소스 메인테이너에 대한 정해진 매너 같은게 있는지 궁금하네요
정기적으로 이용하는 수가 적은가보네요..
데이터를 추출하게 할때 비용을 붙이거나 해도 헤비유저 수가 적으면 그런것도 별로 무의미할 거 같기도 하고 결국에는 어느 정도 초심자 학습용으로 쓰다가 이탈할 수 밖에 없는 구조인거 같긴 하네요..
괜찮은 자료들은 많아서 스크랩하기도 좋았는데.. 회고록 읽어보니 흠..
와우 pg 하셨나요?
pg사 결제모듈을 직접연결하는 방식이 아니고 아임포트 통해서 개발 했습니당
선배님 혹시 pwa로 개발하면 어플 종료했을 때 로그인 다시해야하는 문제도 해결될까요 ?
저는 항상 간단한 푸시알림 넣어서 통과했습니당...
아 이런 방법으로 우회를 할 수도 있군요
참고하겠습니다. 감사합니다!
아하 그렇군요!!
안녕하세요 리액트 아키텍쳐를 공부하다가 안드로이드에서는 MVC MVP MVVM같은 개념들이 있는데 그럼 리액트에서는 어떤 아키텍쳐를 사용하지는 궁금해서 질문드립니다!
리액트는 MVVM입니다 useState가 VM을 담당한다고 생각하시면 되요
아 감사합니다! 그런데 state가 어떻게 VM을 담당하게 되는지 잘 이해가 가지 않습니다. 좀 더 상세하게 설명해주실 수 있나요?
음.. 저는 VM이 가상돔이라고 생각했는데
ViewModel 이라는게 View를 표현할 수 있는 객체고, 리액트에서는 가상돔이 그 역할을 수행하는게 아닐까요?
가상돔에다 view의 형태를 반영하도록 만들고, 다시 이게 웹에서는 돔으로 변환되고 리액트 네이티브에서는 네이티브 뷰로 변환되는거죠
오,,, 제 생각엔 컴포넌트의 JSX 부분이 View라고 생각했는데 가상돔이 View라고 볼 수도 있겠네요 🤔
jsx가 가상돔을 표현하는 도구입니다 ㅋㅋ 똑같은 것 같아요!
아 View 모델이 가상돔 전체라고 말씀하셨던거 아니었나요?
아아 제가 다르게 생각했네요 ㅎㅎ
앗 준일님 블로그 잘보았습니다 반가워요🙌
view는 dom이고 ViewModel이 가상돔 이라는 이야기였습니다,
ㅋㅋ 감사합니다!! 😊🙏
음 글을 읽다가 궁금한 점이 있어서요. React에서 표현되는 객체 + 인터렉션(데이터 페칭, 리렌더, 이벤트 처리 등) 이 두가지가 같이 들어있는데 dom을 제어한다는 입장에서는 vm으로 볼 수 있지 않을까요..?
이부분 react 증분 렌더링 관련해서 찾아보시면 관련 글 많이 나와요
감사합니다 찾아봐야겠어요
안녕하세요! 변수명 쓸 때, Len 보다는 Length로 작성하는게 더 좋은걸까요!?!!?
즐거운 네오님이 나갔습니다.
회사 컨벤션마다 다르겠지만 저희는 보통 다 씁니다
특별한 경우가 아니면 축약 안하는게 요즘 트렌드 같아요
SI 프로젝트들보면 약어를 너무 써놔서 단어용어 테이블없이는 코드리딩이 안 되더라구요
굳이 줄여야할 이유가 없다면 줄이지 않는게 좋아요~ 모르는 사람들은 축약어를 따로 또 배워야 하는 경우가 발생합니다
안녕하세요 만약 리액트 프로젝트에서 모달창은 만들다고할때 2가지 방법을 생각해봤는데 ( 모달창 닫는건 일단 생각안함) 1. 모달창을 띄울 부모컴포넌트에서 modal 열리는것을 state로 관리하며 true일때 조건부렌더링으로 열리게 하는방법 2. 똑같이 부모 컴포넌트가 state로 관리하지만 true값을 띄울 modal 컴포넌트에 props로 전달하여 modal컴포넌트에서 css속성으로 display : true ? block : none 이런식으로 열리게하는것 어떤방법이 더 나은방법일까요?
저는 state로 관리해서 modal에 props로 넘겨주는게 좋은 것 같아요
저도 react potal사용해서 1번으로 쓰고 있어요
저도 포털로 1번으로 사용중입니다
성능차이는 크게없는걸까요?.. 제가 아직 초보라;;; 저는 이때까지 1번으로 만들었었는데 근데 회사에서 리액트를 공부하신 백엔드 사수?분이 (프론트 사수님이 없습니다..)2번으로 구현을 하셔서 뭐가 더 나은방법인지 고민이 되어 여쭤보았습니다...
MVC, MVP, MVVM의 구현방식이 저마다 달라서 딱 자르는 것은 아니지만 1) UI 프로그래밍이란 데이터(M) 화면(V)보여주고 사용자가 행동하면 데이터를 바꿔서다시 보여주는 작업(C) 입니다 2) 예전에는 C영역에서 뷰를 찾아 이벤트를 등록하고 핸들러에서 model을 바꾸고 그에 맞는 view를 바꾸는 식으로 개발을 했어요 - 전통적인 MVC 3) 그러다 보니 model이 바뀌는 코드와 view를 바뀌는 코드를 쌍으로 만들어야 하고 가끔 데이터와 화면의 불일치가 발생했어요 4) 그래서 model이 바뀌면 전부 view를 업데이트 하는 것을 presenter에 위임하는 방식이 MVP입니다 데이터가 바뀌면 전달만 하고 Presenter가 다시 그리는 방식입니다 5) 그러다보니 Presenter에서도 view를 그리기위한 Model를 추출할수 있었고 미리 선언된 View에서 viewModel만 바뀌면 View를 그릴 수 있는 MVVM으로 진화를 합니다
모달이라고 하면 크게 문제가 안될것 같아요~ on/off가 빈번하고 그때마다 살짝 화면이 밀린다 싶을 정도의 부하가 아니라면 메모리 측면과 업데이트 측면에서는 DOM에서 아예 제거를 하는게 좋아요 리액트의 경우 css로 display none을 해도 가상돔은 존재하기에 업데이트 루틴에 포함이 됩니다
답변들 감사합니당!!
"State(ViewModel)의 변경에 따라서 컴포넌트(View)가 리렌더링 되니까 MVVM이라고 할 수 있다." 제가 이해한 바가 맞을까요?
질문있습니다! 보통 js로 코딩할 때 코드가 길어지더라도, 최대한 let은 지양하는 방식으로 코딩을 하는데요, 보통 공식문서들을 보면 예제 코드에 let을 사용하는 것들을 심심찮게 볼 수 있는데, 어떤 의미일까요? 그대로 따라해도 크게 문제 없다는 걸 뜻하는 걸까요?
변수의 재할당시에 필요한부분이라 재할당이 필요할때 쓰면 됩니당
맞습니다. 그리고 그걸 가능하게 하는게 프레임워크이고 선언된 템플릿과 데이터 바인딩이 MVVM이 다른 패턴들과의 차이점입니다
const를 쓰는 것은 일종의 팁? 권장사항이라고 보시면 될 것 같아요. 예제에서는 클린코드보다는 예시의 목적에 충실하려고 하기 때문에 let const가 섞이는 것보다 간결하게 보여주려고 하는 것 같아요. 코딩 하실 때에는 const를 습관적으로 쓰시는게 좋아요~
감사합니다!
홍서진님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 홍서진님~~ 반갑습니다 :)
안녕하세요. 파리 사진이 멋있네요.
감사합니다!! ㅎ
iOS 개발자인데 프론트엔드에 관심이 많아서 들어왔습니다. 1982년 생입니다 ㅎㅎ
고맙습니다!! 프론트엔드에 관해서는 엄청 초보적인 내용들도 좋으니 뭐든 궁금한게 생기면 글 남겨주세요 환영합니다+_+ 잘 부탁드려요!! ;)
프로미스 질문좀 해도될까요
그럼요!!
함수안에 프로미스 작성하면 앞에 return 붙여서 프로미스를 리턴하게 해야된다고 알고있는데요
사진
여기서 저 함수들은 앞에 return이 없는데 어떻게 then을 쓸수있나요!?
화살표 함수가 리턴해주는게 프로미스여서 가능합니다
화살표 함수안에서 함수 결과가 값으로 평가되면 그 값을 암묵적으로 리턴합니다
=> 하고 { } 없르면 return이 생략 돼있다고 보시면 됩니다
아……
여지껏 => 뒤에 {} 붙였는데 자꾸 then이 undefiend라고 오류뜨길래 뭔가 했는데
{}를 안붙여야 되는거군요…
감사합니다… ㅠㅠ
{} 하면 return을 따로 적어줘여하구영
화살표함수 부분 다시 딥다이브 읽고오겠습니다..
그리고 정확히는 프로미스를 원하는 시점에서 실행시키려고 이를 리턴하는 함수를 만들 뿐입니다. 프로미스는 생성되는 시점에서 인자로 받은 함수를 실행시키기 때문입니다.
저는 화살표함수에서 {} 붙일때는 본문이 여러줄일때 붙이는걸로 알고있엇네요
{}를 쓸때는 항상 return..
질문있습니다. 도와주세요 ㅠㅠ 리스트 조회 중에(DB 접근 때문에 조회가 오래걸림) 리스트 생성 및 삭제를 했을때 화면에 리렌더링이 일어나는데(당연하게도) 이러한 상황에서는 보통 사용자 친화적으로 구현하기 위해서는 어떻게 로직을 구성하나요?? 제가 구현 했을 때 화면이 버벅이면서 이상하게 나타납니다. React를 사용한 프로젝트입니다. 상태관리는 recoil, react-query입니다.
흑석동주니어님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
조회가 끝난후 상태를 갱신하나요?
추상 클래스를 상속하여 만든 자식 클래스에서, 추상클래스 생성자에서 실행되는 메서드 보다, 자식 클래스에서 생성되는 메서드를 더 빨리 실행시키는 방법이 있나요?
팡님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
조회가 느려서 조회 중에 상태를 다시 갱신해요
조회중에는 로딩 애니메이션을 보여주고, 상태 갱신은 한번만 하면 어떨까요
상태가 여러번 갱신되면서 리렌더링이 일어나 버벅여보이는거 같아보여요
혹시 객체지향적으로 코드가 잘 작성되어 있는 리액트 오픈소스가 있을까용????
레이어 계층 분리나 이런 부분들을 참고해보고 싶은데 잘 보이지 않네요 ㅠㅠ
혹시 미니 프로그램에 대해서 한국에서도 대응하려는 움직임이 있나요?
최근에 관련 포스트를 봤는데, 플레이스토어와 앱스토어 양강 패러다임을 뒤집는 다는 개념이 흥미로웠습니다 ㅇㅅㅇ
요건 근데 무슨영상인가요?!
https://www.choonsikdiary.com/
카카오에서 만든거 같은데
드림코딩 엘리님이신데 진짜 기가막힙니다
너무 귀엽네요
전 노마드코더는 개인적으로 안맞았는데
좋은 정보 공유 감사합니다. 재밌는 컨셉이네요!
드림코딩 앨리님은 말ㅇ 영어가 섞여서 좀 어렵지만 짧은 시간내 단기적으로 보기 좋았어요
엘리님은 유튜브로만 보고 니꼴라스님꼐 배우고 있습니다
ㅋㅋㅋㅋ춘식이귀여오
춘식이 너무 귀여워요… 저거 만드신분도 대단하고
안녕하세요~ 니꼴라스 입니다~ ㅋㅋㅋ
투데이 위토커바웃~~
드림코딩 엘리님 비동기 부분 영상이에요
어제 질문드렸었는데 답변을 못받아서요ㅜㅜ 토이프로젝트에서 sns로그인을 구현하려는데 백엔드개발자가 따로 있는 상태에서 프론트엔드 개발자가 어디까지 구현을 하면될까요?
next사용중이라 검색해봤는데 next-auth라는 라이브러리가 있던데
이걸 사용하나요?
로그인을 어떻게 구현하느냐에 따라 다를 거 같아요
로그인을 어떻게 구현하느냐가 어떤걸까요?
next-auth 는 next.js 에서 auth 관련 처리를 해주는 되게 큰 라이브러리인데
로그인 인증과 인가를 어떻게 구성하는지
방법은 여러가지일거같아요
제발 웹으로는 기본적인 사이트만 만들면안될까ㅋㅋㅋㅋ
그걸 써서 할 수도 있고 안 쓸 수도 있고.. 백엔드분과 말씀을 해보셔야 하지 않을까 싶어요
ㅋㅋㅋㅋㅋ 왜죠
가능성은 무한하죠
저런거 보고 ㅋㅋㅋ 기획자들이 요구하죠,,,
저기는 되는데? 왜 못해요?
모바일 청첩장을 저렇게 만드신분도 봤는걸요
next.js 가 서버가 있는 프레임워크다 보니 next.js 안에서 거의 모든 로직을 다 가져갈 수도 있고 백엔드에서 소셜로그인 쪽을 많이 챙겨가실수도있고
저정도까지 디테일하게 만든게 아니라도
움직이면서 볼수 있도록
ㅋㅋㅋㅋㅋㅋ저도 그냥 장난식으로 말해봤습니다,,,ㅋㅋㅋㅋ
리렌더보다 slow render 가 근본적인 문제일 거 같긴 해요
그려야할 리스트가 많다면 가상스크롤을 추천드립니다
아 너무 진지하게 받은듯하네요 죄송함다 ㅠㅠ
저도 약간은 가볍게 말한다고 말했는데 ㅠㅠ
대박이네요 진짜 ㅋㅋㅋ 완성도가 엄청나네요
저런거는 three.js인가요??
webgl썼을거같아요
play canvas쓰는거같았어요
아아 webgl이라 써있군요
감사합니다
아닙니다ㅠㅠㅋㅋㅋㅋㅋㅋ
와 미쳤다
•᷄⌓•᷅ 근데
열심히 돌아다니면서
찾았는데
생각보다 선물이 ㅎ
안녕하세요 addEventListener 에 넣어주는 콜백함수에 대해 질문이 있어서 채팅남깁니다! 리액트에서 리렌더가 발생하였다고 가정하면, 리렌더 이전 onClick={() => console.log('1')} 리렌더링 이후 onClick={() => console.log('1')} 위 두 cb함수는 익명함수로 함수 본문이 동일하더라도 서로 다른 함수로 취급되어 새로운 () => console.log('1')을 생성하여 이벤트를 등록한다고 알고있습니다. 그렇다면 const testFn = useCallback((item) => () => {...logic},[]); 리렌더 이전 onClick={testFn(item)} 리렌더 이후 onClick={testFn(item)} testFn이라는 함수를 curry을 사용하여 만들고나서 리렌더 됐을때에도 새로운 함수로 인식하여 onClick에 새로 등록을 하는지 궁금합니다!
사진
안녕하세요 혹시 이중에 필요한 책이 있으시면 택배로 보내드릴게요!
넵 (item) => () => {…logic} 이 메모이제이션된 거지 () => {…logic} 이 메모이제이션된 건 아니기 때문에 새로운 함수가 들어가요!
안녕하세요!! 혹시 리액트 아키텍쳐 관련 참고할만한 오픈소스가 있을까요!!!!>??!?!?!?!?
저 구글 애널리틱스랑 알고리즘
애저까지 세권 .....
우아 저 리액트 부탁드려도 될까요?
서울이시면 받으러갈수있습니다 ㅎㅎ
엔진엑스요ㅎㅎㅎ!
플러터 생존코딩 받고싶습니다 !
쉘스크립트 부탁드려도 될까요..!
그러면 onClick에 달아줄 콜백 함수에 인자가 들어가는 경우는 메모이제이션이 안된다고 생각해도 무방할까요?
삭제된 메시지입니다.
해줄 수 있어요!
물론 전체 코드를 봐야 확실하게 알 수 있지만 웬만하면 가능합니다
한분씩 주소를 요청드리고 있는데요. 1대1 오픈채팅이 활성화가 되지 않습니다. 확인부탁드려요. 멋쟁이 프로도 - 엔진엑스 딩도로롯 - 플러터 생존코딩 핑구는뮉뮉 -쉘스크립트
삭제된 메시지입니다.
넵 감사합니다! 더 알아보겠습니다
두잇클론코딩트위터 부탁드려도 될까요?!
저에게 주소 보내주시면 감사하겠습니다.
넵
쓰면서 익히는 알고리즘 !!아직 남았다면 부탁 드려두 댈가요 ㅎㅎㅎ
주소 보내주시면 감사하겠습니다.
넹~!!
개발자에서 아키텍트로 부탁드려도 될까요? ㅎㅎ
먼저 요청하신분이 있으셔서 아쉽지만 다음에 또 요청해주실래요. ㅜㅜ
일단 7분이 신청해주셔서요 책 보내고 다시 정리후에 신청 요청드리겠습니다. 모두 완독하세요
헉 그렇군요 ㅠㅠ 알겠습니다!
핸디님 좋은 책 무료로 공유해주셔서 감사합니다 :) 열심히 공부할게요!
이모티콘
무료나눔 다시한번 감사드립니다ㅎㅎ
이모티콘
이모티콘 핸디님 감사합니다~~ 맥OS로 넘어오면서 생각보다 터미널을 쓸 일이 많아서 고민이 많았는데, 나눔주신 책으로 열공하겠습니다. 다시한번 감사드립니다!
핸디님 안녕하세요 혹시 아래 리스트 중 남은자리 있을까요? 1. 리액트 프로그래밍정석 2. 쓰면서익히는 알고리즘과 자료구조 3. 클론코딩 트위터 4. 파이어베이스
전부다 요청주신 목록이에요ㅜㅜ
앗 그렇군요!ㅠㅠ 알겠습니다 답변 감사드려요!!
사진
styled components로 생성된 컴포넌트를 콘솔에 찍어보다가 $$typeof라는 걸 확인했는데 이게 뭔가 싶어서 찾아보려했지만 무슨 문법으로 검색해야할지 모르겠더라고요...혹시 이 문법?을 뭐라고 해야하나요?
$$typeof로 검색해서 나온 젤 첫 글인데 이거 보셔도 되지않을까요
이름은 잘모르겠습니다
제가 엉뚱한걸로 찾아보고 있었나봐요...ㅠ 답변감사합니다!
넵!
하율찬님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
하율찬님이 나갔습니다.
당근마켓에서 준비중인 것 같아요
헙 혹시 기사나 문서 공유 받을 수 있을까요? 중국커머스에 재직 중인데, 미니프로그램 가능성이 많은데 기업들이 입점을 안하더라구요
저도 이 글 봤는데, 중국커머스는 알리바바가 너무 잡고 있어서 그동안 미니프로그램으로는 안했던거 같아요 (성공사레 낮고 매출볼륨이 낮음 ) 한국에서 진출 예정인 기업 소식 있으면 공유 받고 싶습니다
기사는 별로 없네요.. 지금 당근마켓안에 있는 앱들도 별로 없거나 퀄리티가 엄청 별로구요.
당근마켓은 다른 곳에 진출한다기보다 플랫폼이 되려고 하네요
진짜 지역기반 플랫폼으로 자리잡을 것 같네요
seo 최적화 관련해서 질문이 있습니다!.. 페이지 이동을 기존에는 클릭 이벤트 발생시 window.location을 동적으로 바꿔주는 방식으로 했었는데, 이번에 seo 최적화를 위해 a태그를 사용하려고 합니다. 그런데 a태그의 href에 실제로 이동이 될 페이지의 url만 있다면, a 태그 클릭 없이 페이지 이동 처리 자체는 기존로직대로 진행되도 seo 최적화가 될까요??
헝헝 감사합니다 : )
하트뿅뿅 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하헤요 백엔드 개발자지만 프론트에도 관심이 있어서 참여하게 되었습니다! 잘부탁드립니다~
사진
서버에 한꺼번에 사진 url 생성을 하는데 저런 메세지가 뜨면서
사진이 깨집니다 ㅠ
환영합니다!!! 언제든 궁금한게 있으면 질문남겨주세요. ㅎ 백엔드 시각으로 프론트엔드를 보았을때의 궁금한점들이 궁금하네요 ㅎ
잘 부탁드립니다.
앟 아직 많이 부족한지라...ㅎㅎ 넵 잘 부탁드립니다
토스에서의 시간을 돌아보며 https://evan-moon.github.io/2022/05/07/toss-retrospective/ 블로그 글이 좋아서 잘 보고 있던 분이셨는데 토스에 있었었네요~ 읽어볼만한 글이라 생각해서 공유해봅니다
이분이 쓰신 다른 글들도 대부분 좋아요 :)
감사합니다 ~
실제로도 멋있는 분이더라구요
멋진 블로그이군요...
진짜 멋진분..
저도 저렇게 멋진 개발자가 되고 싶네요 ㅎㅎ
글 되게 잘쓰시는 것 같아요 술술 익혀요... 예전에 다른 글 보면서 도움 많이 받았어요!
재택하시는 분들 중에 집중 안 되는 날 있으면, 어떤 방법으로 해결(?) 하시나요?
카페에 갑니다
이모티콘 요즘 뭔가 급 무기력하네요... 날씨탓인것 같긴한데 ㅠㅠ
오늘 미친듯이 더웠어요
요즘 하늘이 너무 흐리죠...
계쇽 우중충하니 뭔가 처지네요... 덥고 습하구
전 흐리면 많이 쳐지는 편인데, 얼마전에 인센스를 뒀더니 연기가 피어오르는 걸 보고 힐링이 되더라고요
오호 그런것도 기분전환 되겠네요
답답한 마음에 여기에 한번 문의드려 봅니다.. 제가 지금 스타트업에 신입으로 합격을 한 상태인데 갈지 말지 고민입니다. 저는 비전공자 출신이고 국비 백엔드 과정 수료하고 프론트엔드 공부는 반년 정도 했구요. 회사에 프론트엔드 개발자 한분, 백엔드 개발자 한분이 계신 상태인데 프론트엔드 개발자 분 경력이 2년정도 시더라구요. 면접하는 과정에서 프론트엔드 분과는 충분히 얘기를 나누었고 배울 점이 많은 분이라고 생각은 들었는데, 확실한 시니어 개발자 분이 안계셔서 이 부분이 제가 신입으로 들어가서 성장할 수 있을지에 대한 고민되게 하네요. 백엔드 개발자도 주니어시구요. 대표님은 7년차 이상의 시니어 개발자를 적극적으로 채용 중이라고는 하시는데 현실적으로 스타트업에서 시니어 개발자를 모시기는 쉽지 않다는 것을 알고 있기에 걱정이 됩니다. 내일까지 답변을 드리겠다고 했는데 많은 고민이 되네요. 시니어 개발자가 없는 환경 괜찮을까요? 제가 성장할 수 있을지가 가장 큰 고민입니다.
프론트로 채용되신건가요?
시니어가 없으면 성장하기 어려운건 맞긴 합니다.
네 프론트엔드입니다
그래서 고민이 되네요..
자주 나오지만 항상 어려운 주제네요....ㅠ 다른 곳 진행중인 곳은 없나요?
다른 옵션이 없다면 다녀보는 것도 나쁘지 않을 것 같네요
진행중인곳은 있는데 코드를 제이쿼리쓰는거 보고 아 이건좀… 했어가지구요
물론 제이쿼리가 나쁜것만은 아니지만요
시니어가 있어야한다고 생각합니다..
옆에서 말하는거 듣기만 해도
지식이 늘어요
저도 어깨너머라도 볼수있는 시니어분이 좀 계셨으면 좋겠는데..ㅠ
너무 고민이 됩니다
공감합니다
가끔 과제
피드백만 받아도
진짜 성장하는 느낌인거같아요
채용과제 내고 탈락할 때의 피드백,,,
보통 스타트업에 프론트엔드 시니어분들이 많이 계신가요??
취준 초기이신가요? 초기이고, 본인이 그 정도로 맘에 걸리신다면 저는 좀 더 준비해보시라고 말씀드리고 싶어요
없거나, 주니어만 있는경우가 많고 정말 뛰어난 분들은 보통 시리즈B 이상이나 대기업에 많이계시지않나요..
자도 이 문제에 공감을 많이 했는데 원하는 개발을 할 수 있고 그래도 총 시니어 개발팀장이 있다면 배우는 것도 있을거 같아요! 한번 고민해보세요
내일까지 좀더 고민해볼게요~ 답변해주셔서 감사합니다!
전 시니어가 없단 거보단 프론트가 1명이고 백엔드가 주니어 1명이라는 게 걱정되네요.. 개발에 대한 고민 좋은 코드에 대한 고민 좋은 아키텍쳐 자동화 인프라 이런 거보단 그때그때 만들기 급급해서 일정만 맞추는 개발 하게 될 수도 있을 거 같아요 특히 백엔드가 주니어면 각종 이슈 만들어내고 해결하는 데 한참 걸릴 확률이 높은데 프론트 특성상 백엔드가 병목이 될 때가 많아서
그렇게 생각해볼수도 있겠네요
사실 어깨너머 시니어분은 이 방에도 계신지라 어느 정도는 커버 가능하지 않을까 싶은데 현실 회사에 백엔드 1명은 커버가 힘들거같기도 해요
오히려 백엔드쪽이 탄탄하지 않은게 걱정될수도있겠네요
사실 저도 당했는데.. 백엔드가 주니어분이라..이 부분 땜에 고민 했는데 시니어가 그 부분을 잘 이끌어서 역량을 다 키우실 그런 팀장이시면 배우는 것도 있을거 같아요. 일정이 급급한 쪽인지 한번 알아보시면 좋을 것 같아요
시니어분도 중요하지만 개발문화에 공감하고 성향이 잘 맞는지도 정말 중요하다 생각해요
맞아요 빨리 개발해치우고 퇴근하고 싶어하는 시니어분도 계시긴 해요
커피챗이 있으면 활용해보세요~
혹시 커피챗에 무슨 질문들 하시나요? 그 회사와 관련 없는 질문을 하시나요...? 뭘 물어봐여 할지 모르겠어서..
저 합격 이후 커피챗 세번 정도 해봤는데 그냥 편하게 대화했었어요! 회사 질문도 하고 개발 얘기도 하고 그랬던 거 같아요
그 회사 말고 성장에 관해서도 질문하시고 하시나요? 사실 그 회사 당장엔 관심이 없지만 어떻게 성장할지 막막한 부분을 알고 싶긴한데 어떤 질문들을 하셨는지 여쭤보아도 될까요?
좋게 잘 포장해서..? 물어보는 건 어떨까요 ㅋㅋㅋ
음.. 들어가기 전부터 크게 걸리는게 있으면 들어가서도 계속 아쉬움이 생길 듯 해서... 당장 급한게 아니시면 더 트라이 해보시는 것도 어떨까해요..? 물론 더 좋은 곳 갈 수 있다는 전제하에..
저는 그냥 딱히 아무것도 준비 안해가고 그냥 개발자 대 개발자로 편하게 얘기했던 거 같아요 저는 회사에 갈지 말지 고민하던 게 주 목적이었어서 그냥 그 회사 사람을 보고 같이 일하고 싶은지 아닌지 판단하고 싶었거든요 그러다 보니 무슨 얘기 했는지도 잘 기억이 안나네요 😅
https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867 조금 된 자료인데요 리덕스 만드신분이 리덕스 아키텍쳐에 대해서 설명하는 강의입니다. 무료강의구 2시간짜리에요
엥 아브라모브 evan you한테 깃헙 팔로워수 2등 자리 뺏겼네요
중국빠와..
???: 누가 팔로우 소리를 내엇는가
프론트엔드 기술 팔로우만 따로 집계하는 통계가 있나봐요?
저희 5일간의 스프린트 9기의 결과를 공유합니다. 다 완성된 것은 아니고 이것은 과정이고 프로토타입이라는 점을 감안하고 아이디어와 구현 그리고 앞으로의 발전을 상상하면서 한번 평가 부탁드려요. 1조: 추억의 롤링페이터 https://rolling-paper-client-blue.vercel.app/ 2조: 생각만 해도 어려운 기술면접, 😢 이제 원아우어로 https://1hour-front-fzy3k6ucz-de-yobalja.vercel.app/ 3조: 코드 리뷰를 부탁해 https://pleview-898b3.web.app/
톡게시판 '공지': 저희 5일간의 스프린트 9기의 결과를 공유합니다. 다 완성된 것은 아니고 이것은 과정이고 프로토타입이라는 점을 감안하고 아이디어와 구현 그리고 앞으로의 발전을 상상하면서 한번 평가 부탁드려요. 1조: 추억의 롤링페이터 https://rolling-paper-client-blue.vercel.app/ 2조: 생각만 해도 어려운 기술면접, 😢 이제 원아우어로 https://1hour-front-fzy3k6ucz-de-yobalja.vercel.app/ 3조: 코드 리뷰를 부탁해 https://pleview-898b3.web.app/
https://wangchujiang.com/github-rank/ 전 요기서 확인해요!
아 토발즈가 1위 맞군요
ㅋㅋㅋㅋㅋ 리눅스 vs 리덕스 는 너무 밸붕이라..
공지 댓글에다가 남기면 될까요?
retu님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요! teo님 벨로드 보고 들어왔습니다 잘 부탁드려요!
감사합니다. 환영합니다 어서오세요 :)
다들 이름부터 귀엽네요ㅎㅎㅋㅋㅋㅋ 짧은 시간안에 아이디어를 내고 이만큼이나 하셨다니 멋져요👍👍
다 너무 좋은데요?? 멋집니다ㅜㅜㅜㅜ
와 이번엔 3팀이나!
멋지네요 다들 수고하셨습니다!
dhkdn
고생하셨습니다
고생하셨어요~_~
아이디어가 엄청 좋은 것 같아요!
우와 3팀이나 대박 ㅎㅎ!
아이디어랑 디자인이 너무 예뻐용
벌써 9기가 되었군요!! 3팀 모두 디자인 퀄리티 장난아니네요..짧은 시간에 다들 고생하셨어요!!
9gb ㄷㄷ
세월 빠르네요
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
seo 관련 질문이 있습니다. 사용자는 클릭할 일 없는 a태그여도 (ex 페이지 이동은 click event로 처리) 유효한 url을 가졌다면 (이동하게되는 페이지는 동일함) seo 최적화에 유효할까요?
기존에는 모든 페이지 이동을 click event 및 window.location으로 처리해서, seo 최적화를 위해 페이지 로드시 모든 페이지 이동이 되는 버튼들에 a tag를 넣으려고 합니다. 다만 페이지 이동은 여전히 기존 로직대로 진행되고요
크롤링이 가능해지는 걸로 알고 있어요
답변 감사합니다~!
seo를 위해서는 페이지이동은 a태그로해야 되는건가요??
seo 봇이 a 태그 href를 감지해서 사이트 돌아다니는거 아닌가요? 저도 확실하진 않습니다.
근데 페이지 이동을 click event 로 구현하신 이유가 있으신가요?? 궁금해서 질문드려요!
프론트 하려면 css도 수준급으로 해야할까요??
css flex grid 배웠는데도 어렵네요
언제해도 중앙정렬은 어렵습니다
리액트 할때는 스타일드컴포넌트로 css주로 하나요?
팀마다 다른것같은데 저는 그렇게 합니당
가장 대중적이에요
css는 원하는대로 왤케안될까요 ㅠㅠ
프론트는 재밌는데 css는 …
css도 프론트 영역 아닐까요..?
저희회사는 css 다들 잘 못해서 맨날 퍼블팀 사람한테 도움받아요 ㅎ
프레임워크 없이 이쁘게는 못꾸미겠어요 ㅠ
이쁘게 꾸미는 것보다 중요한건 기능구현인거같아요
디자이너랑 기획이 시안서 뽑아주면
그거 그대로 만들어낼 수 있는 정도 css는 쉬우니깐
기능구현 + 애니메이션 할 줄 아는게
진짜 중요하더라구요
저도 맨날 힘들어하는 중 ㅎ;
css 가치가 백엔드 연동에 비해서 좀 낮게 평가되어 있는데 저는 중요하다고 생각합니다. 중요한 능력이라고 하면 디자인을 빨리 화면으로 바꿀 수 있는 것 디자인 수정사항에 유연하게 대처할 수 있는 것이라고 생각해요
프론트라고 하지만 어드민이나 대시보드류의 서비스들이 많기에 css 중요도가 떨어지지만 서비스들을 만들때에는 특히 서비스 초반에는
개인적으로 프론트엔드라면.. 퍼블리셔 분들의 도움 없이도 작업할줄 알아야 한다고 생각합니다 ㅎㅎ
저도 초반에는 css가 리액트랑 자스에 비해 진짜 중요도 낮다고 생각했는데 공부하다보니 프론트가 ui부분도 담당하는데 css도 중요하다는 생각이 들더라구요
디자인이 만들어내는 가치가 엄청 큽니다. 그걸 극대화 시켜주기 위해서라면 디자인에게 수정 부담을 덜어주고 실험을 할 수 있게 해줘야 해요
그런데 개발이 css수정이 너무 느리거나 디자인 필터링을 했을때 반영이 느리다보면 어느순간 디자인을 고도화하지 못하고 멈추게 되요.
둘다 있는 회사에도 있어봤는데 조금 중점적으로 두는 부분이 다른거 같은데 공통적으로는 알아야 하는거 같아요.
https://www.edwith.org/codespitz-css-rendering css 어려우신 분들은 이 강의 추천드려요!
퍼블+프론트엔드
css도 잘짜면 성능 최적화가 가능한가요?
우리가 욕하면서 쓰는 B2B UI나 금융권 UI를 떠올려보세요
경우에 따라 다르겠지만, css만 잘써도 렌더링이 빨라진답니다
GPU쓰는 속성도 있고 CPU 쓰는 속성도 있어서요
UI 렌더링에 집중하는지 > UI개발 애플리케이션 개발에 집중하는지 > FE개발
회사마다 다른거 같아요
성능 이슈도 중요하지만 우선순위가 되지 않을 경우도 있어서..
'토스처럼' 이라는 말이 생겨날 정도로 디자인 요소가 중요해진 것에 공감이 되네요. 디자인을 직접하진 않지만 디자이너가 만들어낸 것을 개발하는 직군이 FE인 만큼 css또한 그럴테죠..ㅎㅎ
토스처럼 해주세요 라는 말.. 많은데
어떤 블로그 글을 봤는데 애니메이션 처리를 gpu에서 작업해주고 alert띄웠을때 애니메이션이 정상적으로 동작하는 반면 gpu로 처리못하고 cpu에서 처리하게되면 alert때문에 메인스레드가 잡혀서 애니메이션이 동작하는 이슈가 있는 블로그글을 봤는데,, 좋은 자료 감사합니다!
토스 같은 인프라가 안되있는데
토스처럼 해달라는게 사실 좀
눈에 보이는 것만 생각하는 건 아닌가
뭐 그런 생각을 해봅니다..
저도 가끔 그런말 들으면 장난삼아 저희가 토스, 네이버인가요? 라고 맞받아칩니다ㅋㅋㅋ
결과가 나오기 까지 어떤 과정과.. 환경이 갖춰졌는지.. 다니시는분들이 더 잘아시겠죠..
저는 아직 학생이라
기업에서의 업무방식은 잘모르지만...
기획이랑 디자인 저희 모두 의옥이 넘쳐서
디자인 시스템 만드는데 노력을 했던 것 같아요
디자인 시스템을 기반으로 프로덕트를 만들어나가니깐 공동체 의식도 생기고
분업화되어서 각자 일을 하는게 아니라 다같이 하나의 프로덕트를 만든다는 느낌이 들어서 좋더라구요
기업에서는 아무래도 비즈니스가 우선순위여서 그런거 같네요..
아하 ㅜ
생산성 향상에 대해서 그게 직접적인 수치화가 어렵고
무엇보다 교육에 투입되는 시간도
중요한거 같아요..
맞아요 저희팀 같은 경우는 모두 피그마랑 깃 애자일 슬랙에 익숙해서
좀 빨리 적응 했던것도 있구
규모가 크면 또 다르구요..
기획쪽에서 매주 애자일 회고 내용이랑 번다운 차트를 지속적으로 뽑아주니깐
가시적으로도 생산성이 눈이 보이더라구요
모든 구성원이 같은 맥락으로 받아들이는 시간도 하나의 비용이기에..
아 ㄹㅇ요
우리는 결과 하나만 보는데
근데 진짜 피그마 활용한 BDD SDD 적용해서 같이 개발하니깐 진짜 좋더라구요
들인 시간이나 보이지 않는 과정이 있을거라
컨텍스트 비용 절약이 미쳤습니다
판단하기가 좀 어려운거같아요..
ㅠㅜ 맞아요
그런 부분에선 진짜
팀내 이야기를 많이 나눠야
아는 부분이라
정량적 지표를 데이터로 만들어 내는 조직 문화가 없으면 진짜 힘들 것 같아요
그래서 저희는 미디움에 팀블로그 하기로 했어요
삭제된 메시지입니다.
오 그런거도 좋은거 같아요
윤종님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요. 혹시 리액트에서 움직이는 이미지는 보통 어떤식으로 구현하시나요? gif이미지로 하시는지 아니면 다른 방식이 있는지 궁금합니다.
저는 가장 무난한건 gif 쓰고 있구요. 만약 배경 변경도 필요하다고 하면 agif 쓰고 gif 데이터가 너무 큰 것같다 싶으면 lottie로 사용하고 있습니다.
Lottie 사용하실 때 디자인 커스텀까지 하시는건가요???
three.js, react-three-fiber로 육면체 만들기 하고 있는데, 혹시 boxGeometry 사용하는 방법 말고 사각형 6개를 붙여서 육면체를 만드는 방법이 있을까요,,?
간단한 색변경같은 경우에는 웹 툴로 가능해서 그정도는 직접 하고 있습니다.
답변 감사합니다!
감사합니다 ㅠㅠ css만만하게 보다가 공부시작하니까 어렵더라구요 좋은자료 공유 감사합니다
Css translate 로 만들수 있어요
감사합니다.
그거 관련해서 유튜브에서 영상 본거 같아요
사각형 이미지 6개 붙여서 배경공간 만들더라구요
감사합니다 이런 방법도 있다는걸 처음 알았네요!
오 이 내용도 한 번 찾아보겠습니다 감사합니다!
buffergeometry 직접 vector넣어서도 가능합니다 저는 이방법을 사용합니다 https://r105.threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html
양손 엄지척 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
윤종님 양손 엄지척 무지님~~ 반갑습니다 :) 어서오세요!!
혹시 채용과정에서 회사 개발자분과 커피챗 해보신 분 계신가요?? 커피챗을 할때 어떤 질문들을 주로 하시는지 궁금하네요
어떤 기술 스택을 쓰나요? 저는 무슨일을 하게 되아요? 회사의 기술적 성장 방향성은 어떻게 되나요? 업무 프로세스는 어떻게 되나요? 몇 명이서 함께 하나요? 코드 리뷰는 하나요? 개발 문화는 어떻게 되어 있나요? 회사의 성장 방향성은 어떻게되나요? 등등 저는 이런것들이 궁금할것 같아요
https://www.choonsikdiary.com/ 춘식이가 핫하네요!
질문하자마자 정답지를 꺼내주셔서 감사합니다ㅋㅋㅋ
잘만들었더라구요!! 멋짐
개발 성과측정은 어떻게 하는지 물어보시는것도 좋을것같습니다
공부나하자님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
삭제된 메시지입니다.
안녕하세요! 혹시 깃에서 같은 소스를 받았는데 구현되는게 다를 경우의 원인은 뭐가 있을까요ㅠ..? node_modules도 삭제했다가 다시해보고 버전도 똑같은데.. 다른원인이 뭐가 있을지 궁금합니다!! 에러메시지나 이런게 나오지않아서요
브랜치도 동일하신지 확인하셨나요?
넵 ㅠ 다 동일합니다! 하다 안되서 클론도 새로해봤는데.. 그래도안되네요 뭔가 pc에서 문제인건지
로그도 확인 해보셨나요..?
혹시 프로젝트에서 환경변수를 사용중이다면 환경변수쪽을 확인해보세요.
.gitignore에 있는 파일이 다 있나 확인해보세요!
흠..ㅠㅠ 이게 제가 react-custom-scrollbars 설치해서 스크롤바 커스텀을 사용했는데 다른 팀원pc에선 잘 보이는데 제 pc에서만 구현한게 적용이 안되어 보이는 상황이어서요...! (구현할땐 제 pc가 아니라 다른pc에서 작업했었습니다.!) 에러메시지도 없고 뭐가 문제인지 몰라서 답답하네요.. 답변주셔서 감사합니당 ㅠㅠ
혹시 같은 브라우저를 사용했을까요?? 브라우저마다 지원하지 않는 경우도 있을 것 같아서요!
넵 브라우저는 동일하게 크롬 사용했습니다!
양손 엄지척 무지님이 나갔습니다.
혹시 해당 라이브러리 버전이 두 개 있는 것 같은데 1을 사용했을까요?
사진
1은 최근 업데이트가 5년전이네요
혹시 크롬 캐시 지우고 다시 실행시키면요?
저도 그런 경우 있었는데 캐시 싹 날리고 실행시키면 되는경우가 있더라고요.. 대신 로그인 정보나 그런것들 다 날라갑니다...
혹시 form 형식 만들 때, 주로 태그 하나하나 다 만들어서 사용하시나요? 아니면 라이브러리를 주로 사용하시나요?
현업에서도 formik 같은 라이브러리를 사용하나요??
사용합니당
블럭을 무너트리는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
넵 구현할땐 1 사용했는데 1, 2 둘다 안되네요..!! 알아봐주셔서 감사합니다ㅠ
후우,,이것저것 해봐야겠어요..ㅎ_ㅎ 감사해용..!!!
감사합니다
안녕하세요 이제 5개월차된신입 프론트엔드 개발자입니다!! 개발자로써 회사 업무를 실제로 하다보니 부족한게 많이있음을 느끼고있습니다. 부족한부분이 너무많은데 우선순위를 어떻게 두고 공부하는게 좋을지 모르겠습니다... 구현력, JS언어 자체, REACT, TS, TEST CODE, storybook, 기타 라이브러리, 프레임워크 회사업무 시간 이외에 어떤 기준으로 우선순위를 잡고 공부하는게 좋을까요?ㅠㅠ
개인적으로 저는 최근 ts 를 사용하면서 타입레벨 프로그래밍의 대한 이해가 부족하다 느껴서 ts를 공부하는 중입니당
새로운 것을 배우는 것도 좋지만 잘 쓰는 것도 중요하더라구요
next.js , TS, 테스트 코드 (테스팅 라이브러리 or jest)
업무에서 즉각써먹을 수 있는 기술 스택 위주로 공부라시면서 부족한 부분 채우는건 어떠세요?
JS언어 자체를 파는건 현재 우선순위는 아니겠죠?...
js는 좋을 것 같긴한데..
언어자체를 잘 알아야 다음 것도 수월하긴 합니다
공부할 분야가 넓고 많다보니 먼저 해야할것 나중해해야할것 구분하기가 쉽지않네여!
js 조금씩 하면서 급한거 병행하시면..
react-hook-form 써용
react-hook-form이랑 formik이 있겠군요. 그렇다면 UI를 짤 때도, 라이브러리를 이용하시나요? ex) 매터리얼 UI랑 formik이랑 연계하듯이요
폼 형식을 만들 때 어떻게 하는 게 잘 만든 경우에 속할까 고민돼요
확실히 라이브러리를 사용하면 보이는 코드양이 줄고 직관적으로 보이는 거 같고용.
저희 팀은 아닌데 옆팀에서는 antd 랑 react-hook-form 이랑 같이 쓰고 있어요 근데 백오피스라서 좀 자유롭게 쓰는거 같기도 합니다 ㅎㅎ..(일단 빠르게 되게 하는게 중요해서😵💫😵💫)
어드민은 ui 라이브러리 쓰고 유저서비스는 직접 만든걸루..
formik 이랑 material ui 랑 연계된 뭔가가 있나요??
아니면 그냥 조합이 좋은 건가요?
직접 만든게 디자인 시스템이 잘돼잇으명 그냥 다써도 될거 같구여
사진
그냥 value ref onChange 정도만 뚫려있으면 다 잘 될거에요
그런 거 같아용
오 그렇군요 처음 알았네요.. 감사합니다!
id랑 name도 필요할수도 있구여
useForm으로 직접 만들까 고민을 했고, 아니면 라이브러리를 사용할까 고민을 했다가. Formik을 사용하기로 결정을 내렸는데, UI도 라이브러리..?를 사용할까 고민이 되네용 ㅋㅋㅋ
모바일환경에서 검색할 때 debounce 몇 초 정도 주면 좋을까요...? 데스크톱에선 500ms 주고있었는데, 모바일은 너무 짧은 느낌이드네요ㅠㅠ
form 라이브러리 최적화도 많이 돼있어서 좋을거에용
validate 같은거나.. 다른 기능도 많구
알려주셔서 감사합니다!! 다행히 formik 문서양이 많지 않아서 읽어볼만 하네용!!
포믹 6개월정도 썼었는데 만족스러웠어요
기능도 많고
근데 너무 리액트스러워서 좀 피로한 감은 있어요
요즘 react-hook-form을 더 많이 쓰는거 같은데 차이점 알어보시면 좋을거 같네용
빡빡하게 제어 방식을 쓰다 보니까 매 필드마다 name 이랑 value랑 onChange 를 넣어줘야 되는게 확실히 귀찮고 react-hook-form 에 비해서 아쉽더라구요
개인적으로 리액트 훅 폼은
v요즘 쓰고 있는데 좀 헷갈리는게
validation은 input만 가능한건가요?
Field 를 사용하면 onChange랑 value는 안 넣어줘도 되지 않나용??
제가 리액트 네이티브라
태그가 조금 다릅니당
컨트롤러 안에 렌더함수가 들어가고 콜백으로 onchange value onblur를 넘겨줘서
name만 넣어주게끔 하는 편한 방식도 제공하는 거 같아용?
그 안에서 확인하는 편이에요
네임만 있으면
그 네임을 가진 벨류에 대해선 어떻게 처리를 해주나요??
사진
이게 애매한게 저희 서비스 일부인데
폼에서 이미지 업로드 와 같은 부분은 훅 폼으로 검증하기가 어려워서 따로 검증을 하거든요
톡게시판 '투표 취소': 요즘 관심사는 무엇인가요? 항목 추가 가능해요! 복수 투표 가능해요!
근데 다 같이 묶어서 쓰고 싶은데 어찌 해야될지 잘 모르겠더라구용
<Formik> 에서 자체적으로 내부에서 콘텍스트 훅을 사용해서 value 값을 받아올 수 있게끔 돌아가는 것으로 보여용
아 이미 서비스 전반적으로 폼에 훅 폼을 적용해서
다른 라이브러리로 변경하는건 좀 어려울 것 같아요ㅜ
(빈배열 선언 + forEach + push) vs map 으로 배열만드는건 단순 취향차이일까요..?
map이 깔끔할 것 같아요
오 요즘 바꼈나요? 한번 알아봐야겠네요 제가 잘못 쓰고 있었을지도
formik에서 Field 컴포넌트 사용하면 onChange이랑 onBlur 등 하나하나 입력하지 않아도 되더라구용
map에서 쓰이는 함수는 독립적으로 재사용이 가능한데 반해 forEach push의 경우 반드시 외부변수를 활용하는 형태의 코드를 작성하게 되고 이 코드는 높은 확률로 재사용이 불가능한 코드가 되기에 map을 더 권장합니다. 조그마한 function 내에서 쓰여서 그 자체가 독립적인 함수라면 경우에 따라서는 push나 forEach가 filter와 flat을 대신하거나 더 쉽게 짤 수 있는 경우에는 쓰곤 합니다. 그래서 가급적 map으로 쓰는 것을 기본으로 하되 map으로 더 복잡한 코드가 만들어질때 forEach 방식을 쓴다고 생각하시면 좋아요!
피스메이커 프로도님이 나갔습니다.
우와 상세한 답변 감사합니다!! :)
개발서적 이북으로 읽으려고 하는데 이북 뷰어 추천 부탁드려요 될까요??
아이패드로 보시는거 추천합니다. 이북리더기는 일반 서적 보기에는 좋은데 개발 서적 보기에 적합한 것 같지는 않아요.
화면이 작아서 예시코드들도 보기 어려워요
앗 .. 질문이 잘못됐군요! 아이패드 에어5 유저입니다. 리디북스 교보문고 이런 플랫폼 여쭤본거였습니다 ㅎㅎ
제가 구매했던 개발 서적들은 거의 다 pdf였어서 뷰어 차이가 크게 있는지 모르겠어요ㅜㅜ
일단 리디는 형광펜까진 되어도 북마크나 메모같은건 pdf라 불가능했어요
저도 pdf로 구매하고 싶은데 리디북스나 이런거 다 그 앱에서만 사용가능하더라구요 혹시 어디서 구매하셨어요?
저는 우선 구글북스에 책 있는지 먼저 확인해요
전 책 구매하고 모두 pdf로 만듭니다.
그래야 패드, 폰, 맥에서 다 볼 수 있고 좋아요 !
노가다 작업은 필수겠군요
업체 맞겨요 스캔도 ㅋ
우리의 시간은 더 소중한 곳에 써야죠. 스캔 작업은 돈으로...!
ㅋㅋㅋㅋㅋ 글로
글쵸
React Router 코드 뜯어보는 중인데
오 좋다 ㅋㅋ
신기하네요
popState에 커스텀 이벤트를 등록해서 작동하는 방식인줄은 몰랐어요
그 프로그래머스에 과제란에서 나오는 방식이랑 비슷하네요
오 과제관에 그런 방식도 있나요?
몰랐네요
spa구현하는 과제 해설에 그런식으로 구현하더라구요
오오
신기하네요 지금 보는중인데
고양이밖에 안 해봤는데 이런 방식도 있네요
제가 질문을 잘못 이해했네요! 죄송합니다 ㅎㅎ
여러분은 지금 만약 개발을 하나도 모르는 상태에서 다시 공부하게 된다면 무엇부터 하실껀가요? 발을 들여놓는 친구에게 조언해주고 싶은데 로드맵을 보내주는게 최선일까요/?
저는 그래서 생활코딩을
알려주ㅏㅆ어요 ㅋㅋㅋ
스벨트 추천합니다
아하 다시 공부하시는거군아
로드맵 보내주면 압도당할거같아요 ㅋㅋ
제가 딱 이생각 들어서요 ㅋㅋㅋ
핵심은 이제 개발 해보려는 친구에게 무엇부터 일단 해봐라! 이걸 알려주고 싶은거에요 ㅋㅋ
게시판 만드는 것을 목표로 공부를 시작하면 좋을 것 같네요
혹시 android에서 input maxlength가 동작하지 않는 증상 경험하신 분 계실까요?? 모든 input, textarea에 keyup event, input event를 걸어주어야 할 것 같은데 혹시 다른방법으로 해결하신 분이 계실까 하고 여쭤봅니다!
html css가 미끼로 제일 아닌가요...
게시판이라는게 백엔드 포함인거죠?! ㅋㅋ
혹시 저와 함께
죽음의 400 에러 해결하실 분 계신가요 ㅎ,
사진이랑 json 같이 보내는 멀티파트 폼데이터인데
진짜 6시간 동안 뚜들겨봐도 안되네여
윤종님이 나갔습니다.
어떤 에러 뜨나용?
눈빛 애교 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
음료수 마시는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
머리 빗는 네오님이 들어왔습니다.
호이님이 들어왔습니다.
리듬타는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
네 그쵸 개발 경험 차원 ㅎㅎ
혹시 모 서비스 회사에서 사용하는 나라 국기..? 대륙 아이콘 이런 거 사용할 경우 문제가 있을까요? 토이프로젝트에서 사용하려고 하는데 국기나 대륙은 소유가 아닌 것 같아 헷갈려서 질문드립니다.
아이콘의 저작권은 그 서비스 회사에 있어요
ㅠㅠ 그렇군요… 넵 감사드립니다
잉여개발자님이 나갔습니다.
인정합니닷!
삭제된 메시지입니다.
front를 시작한 제 입장에서도 html css는 인정할 수 밖에없네요 ㅎㅎㅎㅎ 저는 그냥 정적인 페이지 만드는것도 진짜 재밌었습니다:))
PSY님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
copilot 공식 오픈했는데 유료네요. 학습한 코드들은 깃헙에 올라온 오픈소스들인데.. 공짜로 풀어주기에는 유지비용이 많이 들 것 같기는한데 여러모로 안좋은 선례가 되지 않을까싶어 좀 아쉽네요. 첫 두달은 무료고 기능은 정말 좋았어서 사용해보시는 것도 추천! https://github.blog/2022-06-21-github-copilot-is-generally-available-to-all-developers/
1년 13만원이네요..
청소하는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
css 작업할 때 margin을 최대한 사용하지 않고 가능한 flex gap을 사용하는게 좋은가요?!
김예림님 츄르님 머리빗는 네오님 호이님 리듬타는 제이지님 청소하는 튜브님 찾아주셔서 감사합니다. 환영합니다.
케바케인거 같아요.. 디자인시안에 따라서 항상 간격(gap)이 같지는 않더라고요..
컴포넌트가 될 수 있을법한 영역에는 margin을 걸지 않는게 좋다 이정도로 생각해주시면 좋아요
margin이 걸려있으면 아무래도 재사용측면에서 좋지 않아서요. 가령 버튼에 margin이 걸려있다면 보든 버튼 사용하는 곳에서 margin을 고려해야하는 상황이 발생할테니까요
레이아웃 div과 컴포넌트div 를 분리해서 생각을 하시고 작업을 하다보면
flexbox에서 간격을 만들때 컴포넌트나 내부 div에 margin을 걸기보다는 외부에서 조정하는게 더 편하다보니 gap을 권장드리고 있어요
컴포넌트 내부에서만 쓰이는 margin이 있어서 항상 세트로 움직이는 것에 대해서는 굳이 margin을 안쓸 필요는 없지만
'내가 여기 margin을 다른곳에서는 변경해야할 일이 있을까?' 정도를 고민해보시면 좋을 것 같아요.
그렇군요! 항상 margin을 사용하다 보니 말씀해주신 부분들을 고려해서 gap을 사용해봐야겠네요 감사합니다!
사진
안녕하세요 ! 사진과 같은 디자인의 스크롤바를 css로 구현하는 방법이 있을까요? -webkit-scrollbar-thumb으로 스타일링을 하는데 가운데부분 줄무늬는 after 가상요소로 표현하고싶은데 그게 안되는것같아서요..! 혹시 아시는분 계실까 여쭤봅니다
안녕하세요 react 관련 질문인데 삼항연산자로 분기해서 처리 하는 경우 -> 조건 ? <컴포넌트1/> : <컴포넌트2/> 일 때, <컴포넌트1/>과 <컴포넌트2/>를 모두 렌더링 해놓고 조건에 따라 다르게 보이는 하는 방식인가요 아니면 조건에 맞는 컴포넌트만 렌더링하는 방식인가요?
용도에 따라 다르고 그 기준이 상대적일수 있지만, 보통적으로… 이미지는 용량이 어느정도 되야 적당하다고 생각하시나요? 용량에 대한 기준을 보통 어떻게 잡고 계신지 궁금합니다.
안녕하세요 채용공고들 보다가 궁금해진건데 질문 하나 드려도 될까요? 생신입을 뽑는 회사들이 많이 없어서 1년차 2년차 3년차까지 넓혀서 채용공고를 보고 있습니다. 1. 저는 신입인데 1~3년차를 원하는 공고에 지원을 해도 되나요? 2. 그리고 대부분 n년차에 ‘준하는 실력’ 이라는 단어가 많던데 2년차 3년차에 준하는 실력이라는건 어느정도의 실력을 말하는걸까요?🥺 어느 정도의 지식과 스택을 쌓았을 때 지원할 수 있을지ㅎㅎㅠ 너무 고민이 되네요
저도 최근에 취업한 신입인데 무엇무엇에 준하는 실력이라는건 신입도 가능하단 뜻으로만 받아들였습니다 아무래도 주관적인 기준이니까.. 회사측에서 이력서와 면접 같은걸로 판단해주시지 않을까 싶습니다
1. 네 됩니다! 어차피 조건에 안맞으면 회사측에서 알아서 떨어트리고..경력자도 떨어지는 경우가 부지기수인걸요 ㅎㅎ 저는 밑져야 본전이다는 마인드로 지원하고 다녔습니다..만 경력 미달일 경우 아예 서류검토도 하지 않는 경우도 있더라구요ㅠㅠ 그래도 넣는걸 추천드려요! 2. 이건 너무나 회사마다 다를것 같긴 한데.. 채용공고에 적혀있는 자격요건을 충족하는 사람이지 않을까 싶네요! 채용을 하는 이유와 합류했을때 하게 되는 업무를 잘 해줄 사람을 뽑는게 목적이다 보니까.. 구직에 있어서는 완벽한 상태로 지원을 하는것 보단 지원하면서 완벽해져 가는게 좋을 것 같아요! 어차피 백날 혼자서 서류 판단해보고 이정도면 됐을까? 해봤자 문제점을 찾기가 어렵더라고요ㅠ 그리고 제 경험으론..서류 불합을 받고 나서 어떤점이 문제점인지 좀 더 꼼꼼하게 생각해보고 보완하는 과정을 거치게 돼서 먼저 지원하는 훈련을 하게 됐습니다..처음이 어렵지 나중에 되면 지원 => 불합 연락에도 익숙해지더라구요..ㅎㅎ ㅠㅠ 요약하자면 떨어져도 아쉽지 않을법한 회사부터 조금씩 넣어보면서 시도해보는거 추천드려요! 이력서 피드백은 기회가 있다면 꼭 받으시구요..!
그리고 가끔 친절한 담당자분께서는 서류단계서 어느 부분이 충족되지 않아 통과가 어려웠고 이러한 부분을 보완해 추후 재지원 하면 좋겠다는 피드백을 받기도 했어요..!
사진
여기서 오류가 나는 이유가 무엇일까요? getElementById와 querySelector 차이 공부중인데 이해될듯하면서 안되네요
브라우저에서 지원해줄 수 있는 한계가 분명히 있어요. https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/ 이 이상 안되는 경우에는 스크립트로 커스텀해서 짜야 하는데 npm scrollbar 이런식으로 검색해보시면 좋을 것 같아요
조건에 맞는 컴포넌트만 렌더링하는 방식입니다. 리액트는 매번 상황에 따라 스크립트가 다시 다 호출되어 그리는 방식입니다
Document.querySelector()나 Document.querySelectorAll()과는 달리 getElementById()는 전역 document 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문이다. 이게 어떤뜻인지도 잘모르겠어요..
getElementById()는 전역 document 객체의 메서드로만 사용할 수 있고 여기서 target이 document만 가능하다는 뜻 아닐까요??..
용량을 크기로 정하는 것은 힘들것 같네요. 보통 메가를 넘지 않기를 바라지만 서비스마다 달라서 일반적으로는 구글 lighthouse에서 검사해서 경고가 뜬다면 한번 체크해보시길 바래요.
정성스러운 답변들 너무 감사합니다ㅎㅎ!!
상관은 없습니다. 어차피 개발자가 모자란 상황이다보니 그런걸로 자르지는 않을거에요. 다만 준하는 실력이라고 하면 그에 맞는 경력을 원하는 거죠. (회사를 다지니는 않았지만 자체 프로젝트를 1년간 해봤다 라던가...) 경력이 없는데 코드를 너무 잘짤수 있다는 것을 증명한다는 것은 참 힘들거에요~
getElementById는 document의 공유 기능입니다
고유기능*
2번째 var test1 = 에서 parentDom.getelement가 아니라 document.getelement로 하셔야되는거아닌가요
아아아 mdn예제긴한데 맞는거같습니다
그럼 그 둘을 사용하는 기준이있나요 취향인가…
getElementById와 querySelector의 차이를 얘기하시는 건가요!? 저는 querySelector가 class/id등 좀더 범용성있게 쓸 수 있고 util함수로 분리해 jquery처럼 간편하게 돔을 셀렉팅할수 있어서 querySelector을 더 자주써요!!
감사합니다 🫶
getElementById같은 경우에 성능이 조금더 빠른걸로 알고 있긴 한데 querySelector가 편의적인 측면에서 더 좋아 자주씁니당
const $ = (selector) => document.querySelector(selector); const $input = $('#input '); 이런식으로 자주썼어요 👍
뷰넉님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
답변감사합니다!!! id값은 문서전체에서 유일해야하먀 국지적인 버전을 쓸 이유가 없기때문이다가 혹시 getElementById 쓸필요없다는 아니죠..?
네네 전역값 (target을 document로만 지정할수 있는 이유)가 ID는 html 문서 전체에서 유니크하게 지정되어야 하는 값이고, 따라서 지역에 따라서 중복된 값이 있을 수 없으므로 특정 target을 지정해서 셀렉팅할 필요가 없다~ 라는 말이지 해당 메서드를 쓸필요는 없다! 라는이유같아요
=> 라는 말이지 해당 메서드를 쓸필요는 없다! 라는이유는 아닌것 같아요 (오타가 있네요 ,,)
Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function. 영어 원문을 보시는게 더 이해하시는데 쉬울수 있을것 같아용!!
넵 영문도 읽어보겠습니다 자세한 답변감사드려요ㅜㅜㅜㅜ
맨위에 nav bar가 있으면 시맨틱태그를 헤더로 하는게 나을까요 nav로 하는게 나을까요?
사진
이런식일때요
헤더 안에 nav로 사용하면 어떨까요..?!
아.. 감사합니다 !
개인적인 생각이라 참고만 해주세요 저도 입문자라..!ㅋㅋㅋ
안녕하세요 취업을 준비하고 있는데 작은 스타트업에 서류가 통과해 서류 통과 통지와 면접 의사를 묻는 메일이 와서 답변을 드리고 5일간 답이 없는데 혹시 면접 일정 안내 메일이 통상 늦게 오나요? 궁금해서 질문드립니다!
일주일 정도 기다리고 나서
리마인드 메일을 보내보셔도 좋을 것 같습니당
감사합니다!!
코파일럿 유료됐군요...
ㅜ..
코파일럿 좋은가여..?
생각보다 엄청 똑똑해서 좀 놀랐어요 한글 주석만 달아도 코드 추천해줘요
같은 조건이면, data-, class보다 id 로 찾는게 빠르고 (id는 문서 전체에 하나만 있다고 가정하기 때문에, 하나 찾으면 바로 찾는걸 멈춥니다) 범위가 정해진 곳에서 찾으면, 다른걸 쓰는게 나을 수도 있구요.
// 이메일 정규식 함수 이렇게 쓰면 함수 만들어줘요
오오오오 편한거였군요 ㅠ..
코파일럿 엄청 잘 쓰고 있었어요 ㅋ
안녕하세요. 다른 분들의 생각이 궁금해서 여쭤보게 됐습니다. 현재 가고 싶던 기업에 지원을 했는데요, 채용사이트를 이용하지 않고 메일로 송부를 했습니다. 오늘로 딱 일주일째가 되는데 아직 연락을 받지 못했어요… 채용은 마감기한이 정해져있는데 그전에 채용사이트를 통해서 한 번 더 지원해야 할까요? 아니면 보냈던 메일로 접수가 잘 되었는지 여쭤봐야 할까요? 접수됐으면 됐다고 연락이 올 줄 알았는데 그렇지 않네요… 다른 분들의 생각이 궁금합니다 이런 경우 보통 어떻게 하시나요? 마냥 기다려야 할까요 ㅠㅠ
채용공고에 있는 방법으로 지원하는게 맞다고 생각합니당
ㅠㅠㅠ
개발자로 이제 한걸음 나아갔는데 코파일럿같은게 나오다니.. 무섭군요..
노코드이야기도 나오고있어서
단순한 웹페이지같은것들은
사용하지않는다면! 나오지도 않겠죠!
조만간 일반인도 만들수 있을거같아요
ㅋㅋㅋㅋㅋ
코파일럿이 딥러닝한것중에 버그도 딥러닝했기때문에 실수가 있을수도 있다고해서 앞으로는 코파일럿이 만든 코드를 리뷰하는 사람이 필요해질 수도 있다고 우스갯소리로 나오더라구요
0님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
여기 계신분들 회사내 백엔드개발자와 프론트엔드개발자 비율이 어떠한가요?
저희는 현재 프론트 4 백 5입니다
저희도 거의 반반 되는거 같아요
프1 앱 1 백7 입니다 저는 프백 다 ..
제가 프론트이자 앱..
저흰 채용 다 끝나면... 백이 2.5배 정도? 지금은 백이 3.5배 정도?
얼마전에 원티드 봤는데, 웬만한 회사들 다 채용하더라고요
지금 개발자 다 부족해요..
개발자부족하다는게
(잘하는)개발자 맞나요?
잘하는도 아니고 할줄아는..
그래서 스타트업들도 요새 신입들을 쓰는 추세라고 들었어요 … 워낙 안뽑히니까
그정도인가요..
잘하는 개발자의 기준은 어느정도 일까용
저도 궁금하네요
너무 주관적이라 이 부분이 어렵네요…흠..기업입장에서는 연봉을 주고 그만큼의 생산성을 바로 뽑아낼 수 있는 점?이라고 해야될지
라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요! 질문이 있는데 object형태의 state를 setState를 하려고 하는데 전혀 동작하지 않는데 혹시 해결방법 아시는 분 계실까요? next.js + ts 베이스이고 google-map-react 를 활용하는 중 발생한 에러입니다.
사진
사진
몇 번 줄에서 실행한 setState가 안 동작하나요?
아 주석으로 써주셨군요
setRegion 함수는 어떻게 생겼어요?
RegionModal 호출하는 부분에서 로직 실수로 컴포넌트가 언마운트됐다가 다시 마운트됐을 가능성이 있을 거 같아서
부모 컴포넌트에서 const [region, setRegion] = useState<string>(''); 이걸 내려준겁니다..!
음 부모 컴포넌트도 볼 수 있을까요?
여기서 setRegion만 내려주었습니다
앗 잠시만요
사진
이게 부모 컴포넌트입니다
화면에서도 안바뀌나요?
넵….
부모컴포넌트에 있는 region state는 잘 변경되는데 자식 컴포넌트에 있는 location 이랑 tmp state가 안 변경되는 거니까
진짜 언마운트되는 건가 싶은데 RegionModal 에 아래 코드 추가하고 다시 클릭해보셔서 state 변경될 때 언마운트되는지 한번 확인해보실래요? useEffect(() => { return () => console.log('unmount'); }, []);
저 혹시.. 메인에서 navigate /uselocation으로 프롭스 내려서 만든 디테일 페이지를 다른 페이지에서 들어갈 수있는 방법이 있을까요? 다른데서 들어갈일이 없을줄알았는데............. useparams 써야겠죠.......?
헉.. onClick될 때마다 unmount가 뜹니다 ;;
제가 라이프 사이클을 아직 잘 모르겠는데 혹시 이러면 어떻게 해야 되는지도 좀 알 수 있을까요? ㅠㅠ
근데 모달을 띄우는 애가 ModalPortal 이라는 친구인 거 같은데
저친구 로직이랑 useModal 로직을 다 확인해야 알 수 있지 않을까 싶어요
사진
이게 useModal 컴포넌트 입니다. 여기서 openModal, closeModal, ModalPortal이 다 파생됩니다.. 책을 참고하긴 했는데 잘못된 코드일까요?
책에서 ModalPortal 을 useModal 안에다가 놔뒀나요?
혹인 3d 관련으로 일하시는 분 계신가요? 디자이너랑 협업할 때 어떤 툴을 사용하는지 궁금합니다.
넵.. useModal 컴포넌트는 전부 책에서 참고해왔습니다..!
코드가 잘못되었나요..?
혹시 어떤 책인가요..? 일단 처음 보는 형태라 잘못되었다 아니다를 따지지는 못하겠는데
저 코드에서 setRegion 지우고 해보세요
클론 코딩으로 시작하는 Next.js입니다
setRegion 지우면 언마운트 안되지 않나요
헐 대박 네 setState가 잘됩니다! 감사합니다 !! 혹시.. 제가 뭘 잘못했던 걸까요? 그리고 부모컴포넌트에서 선택된 state의 일부를 가져가긴 해야되는데 방법이 있을까요..?
Home에서 useModal 불러와서 사용하고 계신데 region state가 바뀌면서 리렌더링 되면 useModal도 다시 불러오겠죠 그럼 거기서 불러온 ModalPortal도 다시 불러올거고 ModalPortal의 자식도 마찬가지로 리렌더링 되지 않을까요
Home 이 렌더되면 -> useModal 이 렌더되면 -> useModal 안에서 ModalPortal 을 선언하기 때문에 ModalPortal 이 언마운트되었다가 마운트되고 -> 그럼 ModalPortal 의 자식들도 모두 언마운트되었다가 마운트되는 구조인데
사진
혹시 form-data 보고 있는데
계속 이유를 알수 없이 400 에러가 나서요
리렌더링 보단 언마운트가 맞는 표현이겠네요
이미지와 json을 함께 폼데이터에 담아서 보내주고 있는데
책 쓰신 분이 뜻이 있으셨겠지만 상위 컴포넌트가 렌더되면 무조건 모달이 언마운트되는 구조라.. 저라면 저렇게 안 짰을 거 같네요
content-disposition이 저렇게 뜨는게 맞나요?
그러게요 저런건 어떻게 해결해야할까요
Content-Disposition: form-data; name="client_id"
보통 이렇게 되는거같은데
저 대시가 붙는게 정상적인가요?
앗.. 저는 모달 말한거였어요
아하
ModalPortal 정의하는 부분을 useCallback으로 감싸면 해결은 될 거 같은데
const ModalPortal = useCallback(() => {…}, []);
혹시 해결됐나요?
Nuxt 너무 재밌네요 ..
써주신 거 천천히 보면서 이해하려고 하는데 제가 라이프사이클 지식이 부족해서 그런지 충분히 이해는 하지 못한 것 같아서 우선 짜요짜요님이 말해주신대로 해보려고 합니다 잠시만요~!
사진
이렇게 하고 위에 주석처리해둔 setRegion의 주석을 푸니 모달이 안뜹니다..
여기 부모컴포넌트인 (Home)의 41번째 주석만 region이라고 콘솔에 뜨구요 ㅠㅠ 그냥 useModal을 새로 짤까요? ㅠㅠ
아아 useCallback 의존성 배열에 modalOpened 를 추가해주셔야될거같네요
const ModalPortal = useCallback(() => {…}, [modalOpened]);
오 이렇게 하니 잘나옵니다!!
값을 false로 주기위해서 !를 넣을때 느낌표의 용어가 뭔가요? 갑자기 생각이 안나서ㅜ
와 정말 감사합니다 ㅠㅠ 이거때문에 몇 시간을 삽질했는데..
근데 정말 코드가 음..
일단 해결됐다니 다행이네요!
어떤 부분이 별로인지 집어주실 수 있을까요?.. 너무 쑤레기인가요..?
not 연산자 말씀하시는건가여?
bang?
아 네! 느낌표연산자만 떠올라서..! 감사합니다
오 그렇게도 말하는군요
useModal만 별로인지 아님 전체적으로 좀 구조가 잘못되었는지 궁금합니다 🥺
Bang operator 감사합니다
전 useModal 만이요!
아 저도 이부분은 계속 걸렸어서 감사드립니다 ! 그리고 마지막으로 여쭤보고 싶은데, 여전히 제가 어떻게 해결되었는지는 잘 모르겠어서요. 혹시 라이프사이클에 대해 충분히 이해 한다면 이 문제를 이해할 수 있을까요?
음 라이프사이클을 얼마나 이해하고 계신지 모르지만
카카오에도 스레드 기능이 있음 좋겠네요~
라이프사이클 + 클로저 (+훅과 클로저의 관계?) 이해하시면 충분할 거 같아요
좀더 욕심내면 useCallback 구현체를 직접 뜯어보시는 것도 좋고
오호… 넵 알겠습니다 기초 지식의 중요성을 다시 한번 깨닫고 가네용.. 너무너무 감사드립니다 🙌🙌
아무도 대답을 안해주셔서 다시 여쭤봅니다...ㅠㅠ 메인에서 navigate /uselocation으로 프롭스 내려서 만든 디테일 페이지를 다른 페이지에서 들어갈 수있는 방법이 있을까요? 다른데서 들어갈일이 없을줄알았는데............. useparams 써야겠죠.......?
구체적으로 어떤 상황인지 잘 그려지지 않는 것 같아요?
같습니다!
메인페이지에 아이템이 여러개 있는데요, 그 중에 하나를 클릭하면 detail 컴포넌트로 가게되는데, useparams처럼 넘겨주는 방식 ( " /detail/:id "같이 패쓰가 설정)이 아니라, "/detail" 로 navigate하고 해당 아이템의 정보만 props로 내려줘서 uselocation으로 props를 받아서 만든 child component 형식입니다.
그런데 이 디테일 페이지를 다른 컴포넌트에서 바로 열수있는 방법이 있나싶어서요....
react-router-dom 쓰신건가요?
제가 디테일 페이지를 여러 컴포넌트에서 필요할줄 몰라서 이렇게 만들었는데 처음부터 api 설계를 잘못한것같습니다 ㅠㅠ
넵
<Route /> 로 안하시고 props 로 처리하신 이유가 있으실까요?
app.js에서 Route로 설정을 했구요
아하 동적 라우팅이 아니라 디테일 페이지는 props로 받은 것만 뿌리는 형식이군요
onclick으로 넘어갈때 props를 넘기는 방식입니다
넵
아하아하
그렇다면 다른 페이지에서도 관련된 props만 줄 수 있도록 하면 될 것 같은데 매끄러울지는 모르겠습니다,
원래 디테일 들어갈때 api 요청 다시 넣는 방식으로 하려다가
근데 그렇게 하시면 detail 페이지에서 새로고침하면 이상한 데로 가지 않나요?
흠 네 지금으로선 그렇게 하거나 아니면 api요청을 다시 따야될거같아요
다른 데서 못 들어가는 것만이 문제가 아닐 거 같은데
자식 컴포넌트라면 디테일이
부모에서 데이터를 받기는 하니까 새로고침해도 이상은 없을 것 같은데 맞나용??
새로고침은 이상없습니다
아하 제가 로직을 잘 못 이해했나 봐요
메인에서 디테일 들어가기 전까지 크게 바뀔 정보가 없어서 그냥 간단하게 props로 처리한건데 확장성이 좋지가 않네용...
개인적으로 데이터 받는 부분을 너무 끌어올리는 것은 좋지 않다고 생각해서, 디테일에서 자체적으로 데이터를 받을 수 있도록 수정하는 편이 저는 좋다고 생각합니다! 그렇게 진행하시면서 props로 id만 받으면 이를 이용하도록 할 수도 있고 아니면 동적라우팅과 params를 이용해도 되구요!
안녕하세요 다들 리액트에서 컴포넌트 설계하실 때 어떻게 하시나요? 가장 중점적으로 생각하는 설계 방식은 무엇인가요? 최근에 리액트 컴포넌트 설계에 대해서 고민을 하고 있었는데 best practice를 보지 못한거같아서 여러분들은 어떻게 생각하시는지 궁금합니다!
저도 동의합니다! 너무 섣불리 판단해버린거같네요...수정하고 있습니다 ㅠㅠ
감사합니다!
컴포넌트의 역할을 확실히 하고 합성 등을 통한 재사용이 가능하도록 고려하고 컴포넌트간 결합도를 최대한 낮추도록 디자인하고 있어요!
회사별로, 그리고 개인별로 많이 다른거같아요. 디렉토리 구조를 잘 짜는게 핵심인것같습니다!
최대한 컴포넌트간 의존성 없게 설계하도록 지향해야 하지 않을까요…. 저도 설계 할때가 제일 고민 많이 되는것같아요. mui 같은거 참고하시면 걔네가 만든 컴포넌트들이 어디든 갔다 붙여도 동작하는게 컴포넌트 간 의존성이 그만큼 없어서….
갖다 붙여도..
이번 토스 컨퍼런스에서 컴포넌트 설계에 관한 챕터가 있었는데, 참고해보시면 좋을 것 같아요! 한 컴포넌트가 어느 역할을 가지고 있어야하는지, 재사용하기 좋은 컴포넌트 구조는 어떤것인지 소개해주시더라구요. https://youtu.be/fR8tsJ2r7Eg
MUI는 UI를 다루는 영역이라서 이해하는데 API 통신 등 다양한 로직들이 섞여서 어쩔수 없이 의존성이 생기는 경우가 있을수도 있잖아요? 그런 경우에 대한 모범사례를 참고하고 싶어요
네! 마침 제가 찾던 영상자료인거 같아서 참고해보겠습니다. 감사합니다
리액트 정말 기초적인 질문 있습니다..! 제가 라이프사이클을 제대로 이해하지 못한것인지 모르겠는데, 마운트는 1번만 되어야 하는거 아닌가요?? 혼자 공부하는 중에 useEffect를 활용해 마운트 되는 경우에 콘솔을 찍도록 했더니 2번 동작하네요 😅 제 개발환경 특성인지 제가 모르는 부분이 있는건지 잘 모르겠네요ㅠㅠ wsl 위에서 타스를 사용해 리액트 간단하게 연습하고 있습니다!
오.. 요새 스타트업 혹한기가 오고 있다는 말이 많은데 개발자 시장은 아직 그 영향은 없는가봐요?!
오고있다고는 들었지만
아직 초기단계라
약간 쌀쌀하네 이정도라서 ㅋㅋㅋ
useEffect 코드가 어떻게 생겼나요?
아니면 React.StrictMode가 켜져있을 수도 있을 거 같아요
사진
아 react.strictMode가 켜져있습니다!
그렇군요.. 감사합니다!!
어떤 검색어를 사용할지 몰라 막막했는데 찾아주셔서 감사합니다!!
옐로카드 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
울고있는 어피치님이 들어왔습니다.
사진
지원되지 않는다는거겠죠..?
mdn에 보니까 box-sizing은 content-box와 border-box값을 가지는것을 확인했습니당..
사진
저 vue질문있는데 제가 actions써서 state값을 바꾼뒤 바뀐 state값을 getters로 확인해보려고 콘솔에 찍어봤는데 위의값처럼나왔습니다.. 혹시 actions에 state가 제대로 작동이안된건가요?
저 혹시 리액트 라우터에서 Link 태그의 폰트 스타일 없애려면 어떻게 해야할까요?
li 태그안에 Link태그로 라우터 주소 넣어줬는데 li 태그 css로 text decoration none줘도 안없어지네요..
zustand로 useState 대체가 가능할까요? store를 굉장히 간편하게 만드는데, 글로벌 상태도 관리할 수 있는데 컴포넌트마다 state를 따로 분리해도 좋을 것 같아서요 보통 어떻게 사용하시나요?
아 완전 대체는 무리일려나요...?
Link태그 a 태그로 잡으면 css 잡히지 않나요
감사합니다!!
사진 2장
array 생성 방법에 따라 시간 차이가 나는데, 이유를 알고 싶어요. 1. arr = [] 2. arr = Array.from( { length : n } ) 3. arr = new Array(n) 이렇게 했는데, 걸리는 시간이 3 < 1 < 2 더라고요. 어떤 이유인지 궁금합니다..!
from
엄청 느려요
가끔 코테 시간초과될 때
from에서 3번으로 바꾸면 통과되는 경우도 있더라구요
삭제된 메시지입니다.
- 1번의 경우에는 동적으로 arr1의 length를 늘리면서 안에 아이템을 추가중이기 때문에 느림; - Array.from 은 내부적으로 얕은 복사를 진행해 새로운 Array를 만들기 때문에 가장 느림 작성하신 for를 순회하는 시간이 오래걸린게 아니고 from에서 객체 생성하는 시간이 오래걸린것임 - 3번이 가장 빠른 이유는 10000000의 배열을 생성해놓고 값만 넣는 형식이기 때문에 가장 빨라보임
제가 대충 생각해본 이유를 적어보았읍니다...
독학으로 공부하는데 첨부터 어떤식으로 코딩하는지 알려주는 선생님 있으면 넘 좋겠네요.. 국비는 대부분 백엔드고 부캠은 코테보니…
오 감사합니다 동적으로 늘려야해서 그런거네요
설아아버님 감사합니다
몰랐네유 ..
사진
사진
예시를 보면 이해하기 쉬울것 같아요
폴리필을 보는것도 추천이요!!
사진
핸디님께서 나눔해주신 책이 왔네요ㅎㅎ 다시 한번 감사드립니다~!!!
핸디님 나눔 정말 감사합니다~%~~
핸디님 책 정말정말 감사합니다~~!!!
사진
밖에 나갈일이없었는데 다들 오셨다고 하셔서 확인해봤더니 왔더라구요!! 열심히 하겠습니다 🔥🔥🔥
아름답네요 책 나눔이라니
기록 어플인데 데이터 안키면 못쓰는 어플 어떻게 생각해요? 저는 항상 데이터 키고 다니는데 안 그런 사람도 있을 거 같아서요
어른들은 항상 아무생각없이 데이터를 켜고 다닐 수 있는데 학생들이나 그런 층은 마음 편하게 켜고 다니지 못할 수도 있을 거 같아요
흠 그렇군요
기록 어플인데 데이터를 키지 않으면 사용할 수 없는 이유가 있어요 ?!
의견 감사합니다
서버에 데이터를 저장해야해서
api통신때문에
그렇습니다
사진
RN 에서 react-native-modal 활용 시
상단 넘어감 혹시 해결하신 분 계실까요?
yarn.lock이나 package-lock.json 충돌나면 보통 어떻게 해결하나요? 손수 충돌 해결하는지, 아니면 파일 지우고 npm i / yarn을 하는지...
파일 지우고 하는 건 위험해서 손으로 해결하는데
버전이 맞으면 충돌 안 나지 않나요?
lock은 이름이 lock인 이유가 있다고 생각해서 직접 수정하지 않는 편입니다 :)
아무래도 좀 불편하지 않을까요? 그래서 대부분의 클라우드기반 앱들이 오프라인 모드 지원하는 것 같습니다
사진
혹시 웹뷰에서 아래 누르면
사파리 웹 처럼 뭔가가 뜨는데 이거 뭐라 부르는지 아시는 분 계신가요?
아 그렇군요! 감사합니다
기본적으로 로컬스토리지에 저장해둘건 저장해두어서 오프라인상태에서도 앱이 동작하게끔 앱을 설계하시는 편이 좋을것같습니다. 저장해야될 데이터의 범위를 잘 정하시면 될거같네요.
사실 쌩웹뷰기반이라 이게 가능할지모르겠네요 ...
어플에 코드는 웹뷰가 끝인데
웹뷰에도 로컬스토리지가 잇지않나요?
넵있습니다
아
웹 로컬스토리지 말하는줄 알았어요
웹뷰도 있군요?
잇는걸로 알고있습니다
귀여운 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
한번 찾아보겠습니다 감사합니다
기뻐하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
방금 확인했네요. 모두들 완독하세요. ㅎㅎ
귀여운 라이언님 기뻐하는 라이언님 환영합니다. :)
핸디님 너무 너무 소중한 나눔 감사드려요 +_+bb
오 저도 왔습니다 감사합니다
stateofcss stateofjs에 이어 stateofgraphql을 진행하는군요!!https://www.stateofgraphql.com/ko-kr/?source=stateofjs&
javascript 클로저 스코프 등이 헷갈렸다며 이거 한번 보세요 그림으로 잘 설명해주고 있네요 https://betterprogramming.pub/10-javascript-closure-challenges-explained-with-diagrams-c964110805e7?source=email-e012841b24ec-1655832600652-digest.reader-d0b105d10f0a-c964110805e7----1-1------------------b969ac20_75e9_4136_9674_e06c5c176f1b-31
톡게시판 '투표 취소': CSS 기술 스택은 다들 어떻게 되나요? 항목추가 중복가능입니다!!
스택오버플로우의 설문조사 결과가 나왔네요!! 트렌드 파악은 필수 https://survey.stackoverflow.co/2022/
이모티콘 감사합니다
개발자의 학습과 성장 좋은 ppt내용이 있어 공유합니다 https://present.do/documents/62a02582f6365307fc441c7f?page=45
실무에서 지라 쓰시는 분들께 질문이 있습니다! 지라 사용시에 프론트와 백엔드가 모두 같이 하나의 프로젝트에 포함되어 같은 칸반 보드를 사용하나요?? 같은 칸반 보드를 사용하면 이슈같은게 너무 많아서 보기 힘들것 같은데 실무에서는 어떻게 사용하시나 궁금해서 질문드립니다!
보통 같이 사용해요 그리고 fe입장에서는 같이 사용해야 편할것 같아요 화면 개발할때 필요한 api 개발을 연관 이슈로 등록하거나 화면 단위로 스토리를 관리하고 하위 이슈로 be/fe 이슈를 등록하면 담당api 개발자가 누군지 진척은 어느정도 되었는지 등등 확인이 편하더라구요
저희는 같이 해놓는데 같이해놓으면 편한점이 서로 어디까지 진행되었고 어떤 순서로 진행하실지 알 수 있어서 좋은거 같아요
그렇군요.. 다들 같이 사용하는 방식을 선호하시네요 답변 주셔서 감사합니다!!
회사 서비스에 대한 웹사이트 랜딩(소개) 페이지를 Next.js로 만드는것은 오버 스펙일까요??? 기능은 스크롤에따른 애니메이션, UI 전환이랑, 다른 페이지로 이동정도.. 반응형 API 붙일 일은 없습니다. 그냥 바닐라로 만드는게 나을까요?!? 소개페이지로서의 역할이 끝입니다.
금액으로 상관이 없다면 아임웹으로 만드는게 제일 편한 방식일 것 같지만 랜딩페이지고 검색 최적화를 고려하신다면 next가 편안한 길이긴 할 것 같아요!
Gatsby같은 SSG는 어떠신가요?
개츠비 성능이 next.js에 비해 조금 좋을텐데 dx가 너무 불만족스러웠어요
슥?
저는 라우팅이 없다면 굳이 넥스트 안쓰고 그냥 index.html에다 메타태그넣어서 할거같아요
저도 이 방식이 좋을 것 같아요. 저희 회사 리뉴얼 페이지도 넥스트 썼었는데 소개페이지라면 바닐라가 더 편할 거에요.
js코드가 거의 없을 거 같아서 리액트를 쓸 필요가 없을 거 같아요 저도 바닐라 한표요
저는 넥스트 아니더라도 리액트라도 괜찮다고는 생각하는데 넥스트는 오버스택이라고 생각합니다
어떤 방식으로든 리액트 쓰는 거랑 Next.js 로 SSG 하는 거랑 번들 사이즈에서 큰 차이가 있나요?
gatsby 쓰시는건 어떠신가요?
gatsby가 템플릿도 잘되어 있습니다.
비디오님 말대로 gatsby가 템플릿은 잘 되어 있다고 해서 빠르게 만들기는 편할 것 같아요.
복잡한 라우팅이 없는 상황이면 바닐라도 좋은 방법 같구요!
ㅋㅋㅋ 스벨트는 어떠신가요
개인적으로는 경험상 바닐라 > 스벨트 > 넥스트 > 개츠비 순서로 추천드립니다!
전에 소개 홈페이지 만들어봤는데 기술스택 못정하고 넥스트로 하다가 개츠비로 하다가 스벨트로 하다가 결국 바닐라로 바꿔서 v4까지 갔던 경험이
오 바닐라로 만들 생각을 못했는데, 생각보다 괜찮았나 보네요
제가 gatsby는 첨들어봐서 한번 참고 해볼게요!! 감사해요
랜딩페이지가 js코드도 거의 없고 90%가 html이랑 css코드다 보니 스벨트랑 바닐라랑 큰 차이가 없더라구요
바닐라로 하게 되면 웹페이지 이동시에 깜빡임을 해결할 방법이나 우회법은 아예 없을까요? 페이지가 하나라면 상관 없겠지만 ㅎㅎ..
next.js SSG 저는 dx 너무 좋았습니다. 사실 개발중인 과정이 좋았다기 보다는 빌드후 결과물이 SPA랑 Html 다 나와서 좋더라구요! (요건 그냥 SSG의 특징일려나요..?)
둥글님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
귀여운 라이언님이 나갔습니다.
그건 ㅠㅠ spa아니면 불가능..
혹시 쏙쏙들어오는 함수형 코딩 책 읽으신 분 계신가요? 사소하지만 궁금한 부분에 대해서 어제 메일을 보냈는데 다음과 같이 답변이 와서 공유해봅니다 ~~! 책에는 “쿠폰에 등급 매기기” 가 데이터라고 되어있어서 질문했던 부분입니다
사진
지금 읽고 있는데 이런 부분까지 메일을 보내시다니 멋져요!!
오호 좋은 내용 공유 감사합니다!
Fe님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
FE개발자님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
경례하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
사진
안녕하세요~~ 변수 key가 런타임에 결정되기 때문에 대괄호 표기법을 사용해야 한다고 하는데,,, 이해가 잘 안 가서요ㅠㅠ 객체 키 값을 점 표기법으로 찾으면 존재하는 값만 반환하는 이유가 궁금하고… (없다면 undefined) 런타임에 결정된다는게 어떤 의미인지 궁금합니다. 변수로 인식된다? 이런 의미인가요..?
혹시 여러분들 useQuery 후 성공 데이터를 useState같은곳에 담아두시나요? 아니면 바로 data를 활용하여 랜더하시나요 ?
모지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
혹시 이번 FECONF2022 언제 하는지 아시나요 ?
https://2022.feconf.kr/trailer/#see-you-soon 10월 8일에 진행하는걸로 알고 있습니다
FECONF 사이트는 볼때마다 감탄하네요 와,,,
힙합맨 제이지님 FE개발자님 경례하는 프로도님 승민님 모두 모두 반갑습니다!! 어서오세요 :)
공유 감사합니다!
점표기법과 대괄호 표기법 관련해서 https://ko.javascript.info/object 위 내용 읽어보시면 도움 될거같아요
넵 반갑습니다!! 안녕하세요!
혹시 여기서 포폴용 사이드 프로젝트 인원모집을 해도될까요?
네! 안녕하세요. 언제든 FE에 관해 궁금한게 생길때 글 남겨주세요~
오오!! 좋아요!
넵 감사합니당 ㅎㅎ
저는 State에 따로 담아두지 않아요 useQuery함수 내부에서 에러핸들링과 select옵션을 이용해서 데이터를 제가 원하는 형태로 바꾼 뒤, 바로 렌더시켜요 State에 담아둘 필요성을 못느꼈습니다~
안녕하세요! 이번에 서비스 기획을 해보고 있는데 다양한 의견을 받아보고싶어서 그런데 계획중인 내용에 대한 글을 좀 올려도 괜찮을까요 ?
네~ 얼마든지요~
사이드 프로젝트를 진행하실 프론트엔드분을 모십니다. 멘토, 멘티를 구하고 스터디를 도모할 수 있는 웹 커뮤니티를 제작할 예정입니다. 개발 예상기간은 약 한달~ 한달 반 정도로 잡고 타이트하게 갑니다. 프론트 기술 스택은 react, ts, recoil, react-query 정도를 다루고 있습니다. 백엔드는 AWS에 서버 배포와 도메인 구매가 되었으며 소셜 로그인, 커뮤니티 관련 API 구현이 완료된 상태입니다. * 학생들 위주로 구성된 팀입니다. 현업에 종사하신 경험이 있으신 분은 지원 시 이 점 참고해주시기 바랍니다. 협업 경험이 있으시고 시간과 열정을 쏟으실 수 있으신 분 이 오시면 좋겠습니다! 현재 멤버 구성 프론트엔드 : 1명 백엔드 : 1명 디자인 : 1명 궁금한 점은 오픈 카톡으로 문의주시면 감사하겠습니다 https://open.kakao.com/o/sGkeSuEd
핏투라는 피트니스 관련 웹 커뮤니티 및 앱을 계획 하고 있는데요, 목적은 PT 매칭 및 예약을 좀 더 수월하게 할 수 있는 방법이 어떤게 있을까 라는생각에서 부터 시작 하게 되었습니다. https://velog.io/@jkl1545/Part.1-%ED%95%8F%ED%88%AC%EB%8A%94-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%9A%94 생각하고있는 자세한 내용은 블로그에 정리를 해두었는데요, 비슷한 생각을 갖고계시거나 서비스를 개발해보신 경험이 있으시다면 의견 공유를 받아보고 싶습니다! 감사합니다
혹시 lerna 모노레포에서 husky commitlint 무시되는 에러 겪으신분 있나요
혹시 통신사 PASS 웹 으로 구현해보신분 있으실까요~~? 있으시다면 어떤 플랫폼으로 하셨나요??!
저는 sci평가정보 이용해서 썼었고 아임포트가 구현하기 편하게 잘되있는것같아요
안녕하세요 타입스크립크 리액트에서 api데이터를 props로 받을때 타입이 많아지면 제네릭을 사용해야 하나요?
해야 한다기 보다는, 사용하면 편하죠
제네릭이 그런 식으로 쓰이는게 아니라 입력과 출력의 데이터타입을 암시적으로 동일하게 둘때 쓰는거 아닌가요?
저건 그냥 타입을 따로 선언 해주는 거랑 유사해보여서용
api데이터가 많아지면 어떻게 타입을 설정해야 할까요?
말씀하신것처럼 타입정의하고 사용할때 제네릭으로 사용하시면 되지 않을까요?
아아 그런식으로요 ㅎㅎㅎ 이해했습니다 ㅎㅎㅎ
이해가 되지 않아서 코드로 알려주시면 감사하겠습니다.
저는 이런식으로 만들어 봤었는데 도움이 될지 몰르겠네요..
사진
사진
인스타에서
협업 프로젝트하는 광고를 봤는데
좋아보이는데 여기에 공유해도 되나요?
네!
미리보기가 안 뜨네오....
z-index에 대해 학습중에 예제파일없이 혼자 공부한다고 작성해 보았습니다.. wrap2-1과 wrap2-3이 같은 z-index값을 가짐에도 불구하고 wrap2-3이 앞으로 나오는 이유를 모르겠습니다..
사이드프로젝트 매칭해주는 서비스같습니다
사진
2-1위에 2-3이 있기 때문에 2-3이 앞으로 나오는게 맞지 않나요~?
삭제된 메시지입니다.
html을 작성한 순서가 영향을 미쳤을까요...?
네 순서가없으면 돔 순서대로 위로 쌓여서 나중에 추가된 2-3이 앞에 있는게 맞는것 같아요
순서가 없는게 아니구 z-index가 같다면요
아하,,, 친절한 답변 감사합니다!
이해됬어요!
호이스팅에 대해서 찾아보는데 블로그글마다 let, const는 호이스팅 된다는 사람도 있고 안된다는 사람도 있고… https://deepthink-programming.tistory.com/9?category=1070788 그나마 이 글이 도움이 많이 되서 공유드립니다 구글링해서 블로그글이 정확한 정보인지도 확인하면서 읽는 습관이 필요하겠네요..
정보마다 다르다면 1차 자료를 찾아서 보는게 제일 좋은 것 같아요! 1차 자료만 보면 좋겠지만 가독성이 ㅎㅎ..
덤으로 이해도 되지 않죠..
Deep Dive 책 참고하시면 좋을거같아요
변수 선언이 선언과 초기화 단계로 나뉘어서 let const는 초기화 단계를 진행하지 않아 참조 에러 발생해서 호이스팅 발생하지 않는다고 하는거 같아여
구구님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
삭제된 메시지입니다.
호이스팅에 대해서 확실하게 보시려면, 책 + 실행컨텍스트 쪽 개념을 확인하시는게 좋을거같아요
감사합니다ㅎ
블로그 글이 좋은 글인지 아닌지 판별하는 능력도 필요하다 봅니다 ㅋㅋㅋ
멋쩍은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
메모리 할당해놓고 undefined로 초기화 하냐 안 하냐의 차이로 알고있습니다
근데 좀 이해가 안되는게 변수선언을 통해 메모리할당을 햇으면 거기에 undefined로 초기화를 해주지않더라도 기존 메모리에 잇는 쓰레기값이라도 참조할수잇을텐데 초기화전에 참조를 할수없단 에러를 낸다는게 조금 이해가 안갓습니다. 그냥 자바스크립트의 정책인걸까요?
안녕하세요. 궁금한 점이 있어요! 싱글톤패턴의 단점이 여러 클래스에서 해당 인스턴스에 동시에 접근하게 되면 동시성 문제가 발생할 수 있는데 프레임 워크를 사용하면 이 문제점들을 해결할 수 있다고 알고 있어요. 그렇다면 싱글톤패턴을 사용하는 Nestjs에서는 동시성 문제를 알아서 해결하나요? 혹시 그 이유가 네스트 프레임워크는 node 기반으로 자바스크립트 엔진의 이벤트루프에 기반한 동시성 모델을 가졌기 때문일까요? 백엔드에 가까운 것 같아 질문을 망설였지만 너무 궁금해서 ㅜㅜ
맞아요 node는 멀티쓰레드 방식이 아니니니깡ㅅ
까요
아하 넵, 감사합니다 :)
헛 저도 그 점에 대해서는 잘 모르겠네요.. ㅠ let이랑 const는 메모리 공간을 만들어두고 선언하는 줄에 초기화단계가 일어나는 것으로 알고 있습니다. let이랑 var const 모두 스코프에 진입하면서 메모리공간을 할당하게 되고 var는 undefined로 초기화됩니다..
호이스팅은 일어나지만 접근할 수 없다고 보는게 맞는 듯 합니다..
제가 처음 배울때 정리했던 것인데
그리고 자바스트립트의 정책은 맞는 것 같아요
테스트해보니 호이스팅은 되지만 초기화되지않고 접근 불가능한 상태가 됩니다
변수에 값을 직접 저장하는게 아니라 주소를 저장하게 되는 구조로 알고 있는데
변수영역에 메모리는 만들어졌지만 실제 메모리 주소가 할당되지는 않은 상태가 참조 에러가 발생하는게 아닐까 생각합니다
정확한 것은 아녀서 ..ㅠ
호이스팅에 대해서는 너무 깊게 파지 않으셔도 좋습니다ㅠㅠ 자바스크립트가 맨 처음 나오고 var와 function밖에 없던 e3시절 function은 선언 순서와 관계없이 먼저 호출 할수 있도록 만들었고 - 함수 선언이 나중에 되어 있어도 호출이 가능하도록 function 선언을 먼저 처리할 수 있도록 하게 만든 것이 호이스팅입니다 (대충 위로 올린다는 뜻)
var는 선언 하지 않으면 글로벌로 선언이 되는데 스코프안에 var선언이 있으면 꼬여버리는 것도 그렇고 이것들이 별로다 보니
이후에는 let const 등을 만들면서 좀 사람다운 언어를 만들게 되는데 이 과정에서 기존에 설계된 것들을 다 한번에 정리해서 설명을 해주려고 하다보니까 그렇게 복잡한 설명이 되버린 것인데ㅠㅠ
그냥 var쓰지 말고 변수던 함수던 선언하기 전에 쓰지 않자고 굳게 다짐(!)한다면 이런 개념이나 이상한 예외 케이스 따위는 없으니 그냥 그렇구나 하고 넘어가세요
사실 면접에서나 가끔 물어보지... (이것도 신입 면접에서나..?) 요즘은 린트가 다 잡아줘서 문제가 발생할 일도 없는 듯 해요.
면접 단골질문이라 차이점만 알고 var 안쓰면 되는 문제리고 생각요
생각해요
혹시
면접 질문에 저런걸 물어보기 시작하면서 이상하게 알아야 할것 같은 필수 개념같은게 되고 있는데 그냥 자바스크립트 설계 미스 같은거에요
솔직히 TDZ같은 질문은... 너무 암기식 질문이라 별론거 같아요. 실무에서 저거때무에 고민할 일이 있나 싶은데
함수형 컴포넌트에서 useState가 어떻게 리렌더링을 유발? 트리거? 하는지 여쭤봐도 될까요?
왜 이게 단골문제가 되는지 모르겠네요 ㅠㅠ
라이브러리들 코드를 뜯어보고있는데 이해가 잘 안되어서요 ㅠ
보통 오픈소스는 버전별로 있는데, 버전별로 보시면 조금이나마 도움이 될거에요
아하 넵ㅎ감사합니다 그럼 혹시 실행컨텍스트 만드는과정이 런타임 이전에 도는 컴파일 과정이라고 봐도 될까요? 제가 느끼기로는 실행컨텍스트라는게 메모리공간을 미리확보해두고 바로 바로 사용하는 느낌같앗거든요
보통 잘 되어있는 오픈소스들은 버전별로 문서화도 잘 되어있거든요
리액트 라이브러리를 뜯어보고계신가요?
사실 라우터랑 zustand 코드는
뜯어보니까 어느정도 이해가 됐는데
리액트는 너무 모르겠더라구여...
헉 리액트 라이브러리인가요 ㅋㅋㅋ
바나나코드님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
그냥 한번 구현을 해보는 건 어때요? 상상력으로 ㅋㅋ
제가 그
hook까지는
이해했는데
클로저 배열이다 까지는 이해했는데
저도 한번 뜯어봤어요
클래스가 아니라 함수형 컴포넌트가 그냥 jsx만 반환하는 함수라고 생각하거든요 제가 이해한 건
와우
띠용님 멋쩍은 튜브님 바나나 코드님 반갑습니다 :)
한번 읽어보시면 대략적인 틀이 보이실거같아용
근데 클래스에서는 트리거 할 수 잇을거같은데 함수형에서는 어렵다고 생각되어서요
감사합니당
안녕하세요 궁금한게 생겨서 여쭤보게 됐어요! 소셜로그인(구글) 구현해보고 있습니다. 현재 window.location.href="쿼리" 를 만들어 구글서버에 요청하면 console창에 'No routes matched location'이라고 워닝이뜨는데 뒤에는 code를 담아서 출력해주는데요,,, 똑같이 axios.get으로 보내면 CORS에러가 뜹니다. window.location과 axios.get의 차이점이 무엇인가요? window.location이 navigate와 같은 역할을 하는건가요?
오 감사합니다 진짜 코드단위로 뜯어보셨네요... 집에가서 한 번 읽어볼게요 감사합니다!
location을 변경하는 것은 브라우저 주소를 이동하는 것이구요 axios는 브라우저 주소는 유지한채 다른 주소의 데이터를 조회하고자 하는거에요
https://www.choonsikdiary.com/
와우 threejs
감사합니다!!!
Fe님이 나갔습니다.
오늘 갑자기 tailwind에서 잘 작동되던 속성들이 에러가 나고있는데 혹시 동일 증상 있으신분 계신가요??
브라우저 캐싱문제 확인해보셨나요?
곰젤리 닉네임 넘 귀엽네요
하리보에요?
캐싱문제로 이런 상황이 발생할 수도 있나요??
셩이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
어제까지 잘된다고 느낀게 브라우저 캐시때문일수도 있다는 생각을 잠깐 해봣습니다
네 ㅋㅋㅋㅋ
캐시는 항상 지우면서 테스트해봐서 해당문제는 아닐것 같아요!
다들 혹시 눈관리를 위해 사용하시는 안약이나 드시고계신 약있으신가요??
저는 레티놀 먹고있어요 ㅋㅋ
저도용
안약은 따로 안쓰시나요? 눈이 너무뻑뻑한 경우가많아서...
눈 시원해지는거같은!
셩이님이 나갔습니다.
저도 눈이 많이 뻑뻑하던데
4k를 쓰면 좀 낫다고 얘기를 들었었는데
4k 쓰면 조금 나아지나요??
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 !!
혹시 이번에 노트북을 맞추려고 하는데 노트북 질문도 가능할까요?!!
맥북 m1 16 512로 구매하시면
상상만 했는데 부럽네요
앗 저는 14인치 생각중인데
저는 안 해본 게 없는데 1. 블루라이트 차단 안경 2. 안약은 쎈 것도 괜찮기는 한데 잠깐일뿐이지 전반적으로 해결해주진 않아요 3. 가장 좋은 건 중간에 좀 쉬거나 마사지 4. 루테인 짱입니다 하지만 안구건조증을 완전 고치지는 못했습니다 하하 개발자의 고질병 같습니다
그럼 14인치 가시죠
램32기가를 갈지 고민이됩니다 ㅠ
오
다다익램으로 결론 낫습니다
웹개발인데
전 완전 베이직하게 쓰는데 아무 문제 없습니다
저같은 허접은 8기가로ㅠ되는데
프론트쪽 하고
고수는 16이상으로 가라고 하시더라구요
진짜 아주 잘 돌아갑니다
8기가 썻는데 32기가 써보니까 확실히 좋더라구요 ㅋㅋㅋ
오 그럼
맥은 램도 너무 비싸지 않나요
그걸로 가시죠
16이랑 차이가 없는지 궁금한데 기본으로 쓰시는분이없어서
네네 맞아요 ㅠㅠ
하나 추가할 때마다 돈이 아주 팍팍팍 오르더라고요
회사에서 14인치를 쓰고있어서
16 다 쓰려면 엄청 힘들긴 하다던데
램은 다다익선이 맞긴하죸ㅋㅋㅋ
퇴사하면 바꿀까요..?
오오
흠
퇴사까지
모든 직장인의 로망
이시점에서 살까 말까 고민이 되네요
생각날 때 후딱 바꾸세요
고민은 구매만 늦출뿐
그쵸? ㅠㅠ
시간은 금이다
배송만 늦춘다아
근데 유튜브보니까
세상에서 제일 비싼 금은..?
지금
지금 이순간..!
이모티콘
메모리 스와핑느로 ssd쓸수있다고
ssd를 늘리라는말이잇어서
램은 가격대비 큰 차이가 없다고
16에 512면
좋겟는데요
스왑메모리가 아무리 있어도
램다익선은 예외없이 무조건 맞는말인거같아요
악
14인치에 메모리32기가…..
안녕하세용 테오님 블로그에서 MVI 아키텍처 글 읽고 React 프로젝트에 도입해보고 싶은데 혹시 경험있으신분 있으신가요?!
근데 저 16기가도 쓰고있고 32기가도 쓰고있는데
둘다 성능문제는 못느껴봤어요
프론트세요?!
넵넵!
아 50만원이 크긴한데
근데 또
20년 쓸건데
50정도야..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
한 2년도 안쓰다가 팔거같아요
2년 쓰지 않을까요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
맥북이 계속 잘나와서
파실 때 저 태그좀
해주세요
오 루테인 효과 있나용
4k쓰니 더 아프네요.. 블루라이트 차간 안경이 좀 효과 있더라구요
루테인 짱입니다
루테인이 흡연하시는 분들한텐 안 좋다고 들었어요
오.. 드라마틱한 효과를 보시나요? 전 차이를 모르겠던데
아 그래요? 전 비흡연자라 다행이네요 근데 흡연자한테 안 좋은 건 신기하네요 무슨 화학적 작용이 있는 건지
루테인 안 먹은 날만 안약을 넣더라고요 신기하게..
제가 먹고 있는 건
이거입니다
(광고 아님)
개발자는 결국 문제해결을 하는 사람이기에 기술적 성장도 중요하지만 가치를 만들어내야 한다고 생각합니다. 한번 읽어보면 좋을 것 같은 내용 공유 해봅니다. 세줄만 기억하시면 됩니다. 문제 - 해결책 - 첫걸음 https://community.applepie.pro/t/topic/27
항상 좋은 자료들을 공유해주시네요..! 혹시 자료들은 어디에서 주로 보고 있으신가요 ? 따로 매체가 있어요?
이번글은 https://news.hada.io/ 여기에서 알게되었습니다 좋은 글 인사이트 넘치는 글이 올라옵니다 추천합니다
그밖에 미디엄 각종 FE뉴스레터 구독 링크드인 유투브 이런데서 소식을 모으고 있고 그중 괜찮다 싶은것들을 공유하고 있어요
감사합니다~!
ㄷㄷㄷ님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!
ㄷㄷㄷ님 안녕하세요! 반갑습니다 :)
피스메이커 프로도님이 나갔습니다.
ㄷㄷ
ㅎㄷㄷ
ㅎㅎ
입사6개월차 애기 개발자입니다.. 다른 6개월차들은 뭔생각하는지 궁금해서 회고 찾아보다가 타고 들어왔네용ㅎㅎ
선배님들 잘부탁드립니다..,
👍 👍 너무 잘 읽었습니다! 감사합니다 😀
허걱
혹시 ErrorBoundary는 많이 사용하시나요?? 사용하실때 전역적으로 감싸시는지 Suspense와 함께 묶어서 해당 컴포넌트만을 감싸는 식으로 사용하시는지 궁금합니다!
상황에 따라 많이 다른거같은데요. 만약 해당 컴포넌트의 에러가 해당 페이지에 전체 영향을 준다면 해당 컴포넌트에 감싸지 않고 상위 컴포넌트 에러바운더리로 처리합니다. 아니라면 suspense와 함께 움직이죠. 제 경우엔 대부분 함께 묶여서 다니고 있습니다.
지금 깃허브 Create a branch for this issue 안되지 않나요?
사진
새로고침 해봐도 안되네요 :< .... 저만 그런가요
jin님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
스타일드컴포넌트로 스타일링할때 ul태그 안에 있는 li태그들 만들때 ul, li 컴포넌트 각각 따로 만드나요? 아니면 그냥 ul컴포넌트 안에 li중첩해서 만드나요??
전 따로 만드는 편입니다
성향 차이인듯 합니다
저도 따로 만듭니다
저도 따로 만들어요
중첩은 피하는게 나을까요?
styled.ul` li { color: red; } `
이런 방식 말씀하시는건가요?
네 맞아요
안녕하세요 혹시 IT서적 집필제안 받아보신분 계신가요? 처음 제안 받아보는거라 과정이 어떻게 진행되는지 할만한지 수익구조는 어떻게 되는지…등 궁금한게 많네요…
css 에서 ul element 스타일링할 때 .{클래스} li { } 이런 방식 지양하라고 하는 거랑 똑같은 논리가 적용될 거 같아요
굳이 스타일드컴포넌트 아니더라도
styled.ul` .{li의 클래스} { } ` 이렇게 className으로 접근하는 건 저는 종종 쓰긴 해요
아하 그렇군요 감사합니다!
사진
혹시 이처럼
뒷 배경에 도형(?) 같은 걸 깔아서
흰색 background가 허전하지 않게 채워주는 역할을 하는 친구를
부르는 명칭이 있을까요 ?
답변 감사합니다!! 잘 참고해보겠습니다
흠…지오메트릭 백그라운드..??
오 ! 비슷한 거 같아요 ㅎㅎ
근데
1~3개 정도로만 표현하는 것 같은데
말씀해주신 친구들은 엄청 도형이 많네요 ㅜㅜ
저는 아닌데, 듣기로는 수익은 시급 생각하면 손해라고 하셨고, 대부분 스펙쌓기용도로 많이 하신다고 들었어요
테오에게 물어보면 딱 좋겠네요~!!
네 저도 개발자 커리어에 있어서 도움이 된다고 생각해서 긍정적으로 생각하고 있어요!
네 ㅎㅎ 테오님이 도와주시면 큰 도움이 될거같아요
저도 제안만 받은 상황이고 집필중인데다가 수익은 생각은 안하고 하고 있어서 원하시는 답변을 드릴 처지는 아직 못되는거 같아요 ^^:;
혹시 일이랑 같이 병행하는데 무리가 없나요? 제일 크게 걱정되는 부분이 워라벨이네요
아직은 마감날(?)이 다가오지 않았지만 압박감은 계속있네요. ㅎ
질문이 있습니다. react router 라우팅 하는 부분에서 A라는 페이지에서 세션이 종료된 경우에 팝업을 띄우고 확인 버튼을 누르면 로그아웃 페이지로 라우팅을 해서 로그아웃을 하는 방식을 사용하고 있는데요, 여기서 로그아웃으로 경로는 변경이 되지만 페이지가 나오지 않고 흰화면만 노출이 되는데 이런 비슷한 이슈를 겪어보신 분이 계실까요?
저같은경우 보통 그런경우에 라우팅 경로가 잘못되어잇는 경우들이 많았습니다. 라우팅 경로 스펠링이나 혹은 콘솔에 라우팅관련 워닝이 잇는지 확인해보시면 좋을것같습니다.
이게 기존에는 잘 동작하던 세션 관련 팝업인데요 ErrorBoundary를 전역적으로 감싸고 세션 같은 경우에는 전역 ErrorBoundary에서 처리하도록 했더니 관련 증상이 발생하더라구요. ErrorBoundary를 페이지에만 감싸주면 정상 동작을 하는데 전역으로 감싼 경우에는 제대로 라우팅이 되지 않는 것 같아서 원인이 궁금했씁니다!
cra로 프로젝트 생성하고 react v18을 설치했는데요. 18버전에는 connected-react-router 설치가 안되는건가요? 오류가 뜨네요
오류 내용은 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: hellrou@0.1.0 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.4.0 || ^17.0.0" from connected-react-router@6.9.2 npm ERR! node_modules/connected-react-router npm ERR! connected-react-router@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/parkjaemin/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /Users/parkjaemin/.npm/_logs/2022-06-24T06_21_01_145Z-debug-0.log
이렇습니다.
버전 지원 안되는게 있더라구요ㅠㅠ 저도 mui 설치할때 동일한 에러떠서 —force로 설치하긴했습니다
connected-react-router 패키지가 지원이 되는지 먼저 확인해보면 좋을거 같습니다.
--lagacy-peer-deps 옵션 넣어서 설치해도 가능하더라구여
저렇게 화내면서 에러를 말해줄 필요 있나..
ㅠ..
상처인데요
npm
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
18버전에서 지원 안하는걸로 들었어요
사진
혹시 react-hook-form 쓰시는 분들 중에
TextInput에 onChange랑 value를 따로 useState로 써야할 상황일때
케이크.. 혹시 생크림인가요..?
validation에서 계속 value가 있는데 errors에 잡히는 경우 어떻게 하시나요?
알려주신다면 생크림이든 초코든 바로 만들어드리겠습니다!
저도 이번에 써보려는데 귀쫑끗..
이모티콘
죄송합니다 초짜라..
당연히 useForm 입장에서는 value 가 있는지 없는지 모르니깐요
왜 state 를 따로 관리하시는거죠?
react-hook-form 을 쓰는 이유가 없는데요 이러면
사진
인풋을 누르면 이렇게 모달이 뜨고
커스텀 토글을 넣어서 만들어야해서 그렇습니다!
지금 코드는 아직 토글을 넣기 전이에요
그러면 useFormContext 등을 이용해서 value 를 가져오면 되지 않을까요?
최후의 수단인 watch() 도 있고요
useFormContext를 활용하면 value에 set도 가능한가요?
사진
일단 render 안에 onChange 랑 value 를 활용하시고
setValue 도 존재하는데, setValue 를 써야하나요?
setValue 를 쓰는건 기획이 탄탄하지 못하다는 증거로 봐도 되는데
네네 토글을 눌렀을때 해당 케이크 크기가 해당 케이크 크기를 선택하는 인풋의 글씨에 보여야해서
사진
여기서 토글을 눌렀을떄
케이크 크기를 선택해 주세요라는 플레이스 홀더 대신 해당 선택한 값이 들어가야해서
그랬었습니당
watch() 를 통해 해결이 충분히 가능해 보이는걸요
일단 validation 이 안잡히는건 react-hook-form 의 onChange 와 value 를 사용하지 않아서 그렇습니다.
이게 이해가 안되시면, 공식문서를 다시 처음부터 차근차근 보는게 더 편합니다.
아아 네네 어떤 방향으로 개발해야될지 watch를 조금 더 보니 감이 잡혔습니다
감사합니당
궁금한점이 있는데 setValue를 react hook form에서 지양해야하는 이유가 있나요? setValue(key, value, {shouldValidate: true}) 이런식으로 자주 쓰고 있습니다.
webpack 설정 관련 질문드립니다! output을 따로 설정하지 않아도 dist폴더에 index.js가 생성되는데 굳이 output을 설정해야하는 이유가있나요?
말그대로 좀 최후의 수단(?)의 성격이 강합니다. setValue 를 쓴다는것은 Controller 에서 벗어나서 value 에 접근해야할때 써야하는거잖아요. Controller에서 벗어났다는것은 예기치 못하게 value 를 변경한다는 뜻이고요. 그런 기획 자체가 나쁜 기획인셈입니다. 정확히 input의 변화가 필요한 곳에서만 input 의 변화를 주어야하니깐요.
input change 에 관여하는 곳이 일원화가 되지 못하고 이곳저곳으로 가게 된다면, 예기치 못한 버그가 생길수도 있고요.
아하 input과 관련된 것들을 Controller 안 한곳에 묶어두면 관리하기도 편하고 해당 input에 대한 것들을 한눈에 볼 수 있어서 좋을 것 같네요 감사합니다!
코드에서 this 자주 사용하시나요?
next js 에 css module구조 쓰고 있습니다. 빌드시 css관련 에러 발생하는데 webpack 설정을 안해줘서 일까요?
사용했을 때의 장점이 있나요?🤔
global css 문제인가요?
이런 말씀 드려도 될지 모르겟지만 동현님께서 해주신 답변 섹시하네요...
js 에서는 거의 쓰지 않는 것 같아요. 객체 지향으로 코드를 짜지를 않아서.. C++ 이나 java 할때는 매일썼습니다.
어떤 css때문에 문제인지 모르겠는데 global css가 문제일까요
ㅋㅋㅋㅋ감사합니다~~
객체지향으로 코드가 이뤄져있다면 안쓸수가 없습니다.
오, 감사합니다
혹시 화면 마운트 시 input에 초기 value 넣어주는건 setValue외에 어떤방식이 또 있을까요?
아, 초기 value 라면 서버에서 가져온 값 입니다.
loading 이 다 된 이후에만 component 에서 보여주는 방식이 있겠네요
const {loading, data} = useQuery(); if (loading) { return null; } return ( <FormProvider> {…code} </FormProvider> ) 이런형식?
저 code 안에서 useForm 을 선언해도 되고요 data 를 넘겨받은 다음에
어떤 에러인지 모르겠네요 ㅠ next 10 -> 11로 넘어갈때 global css를 가져오는 방식이 변경되었다는 내용이 있어서 그게 아닐까 했습니다
input태그의 어트리뷰트 중 하나인 defaultValue를 사용하면 어떨까요?
props drill이 발생하긴 하지만 이 방법도 있겠네요.
모바일 웹뷰(또는 네이티브)에서 ㅁ모바일에 디폴트로 잡힌 프린터에 출력요청을 보낼 수 있나요?? 어떤 방법이 있을까요..?
실무 하실때 라이브러리나 프레임워크버전업된다면 버전업된 것으로 사용하시나요? 아니면 안정적이게 기존거로 사용하시나요?
업그레이드된 버젼을 임시적으로 돌려보고 결정합니다.
아하 일단 사용해보고 결정하시는군요
안녕하세요! 혹시 nextjs+TS로 실시간 채팅을 구현하고 싶은데 적절한 레퍼런스를 못찾고 있어서 혹시 아시는 분 계실까요? ㅠㅠ 가능하면 db (postgresql이면 좋고 아니여도 좋습니다)에 저장해서 추후 열어볼수도 있으면 좋겠지만 아니여도 괜찮습니다!
오 감사합니다 ㅠㅠ 근데 혹시 설명은 따로 없는 거겠죠..? 찾아보니 안나오는 것 같기는 한데 ..ㅎㅎ
혹쉬 open api generator나 nestia 사용해보신 분 계실까요?!
찾아주셔서 감사합니다 설아아빠님 ㅎㅎ !!
스프린트 9기 2조 졸리의 후기랍니다 +_+ https://velog.io/@jjoljjolla/onehour
아름답네요..
디쟈인도 넘 넘흐옙브네요
와 엄청 이쁘게 잘만드셨네요 고생하셨겠다.... 고생하셨슴돠!!
와 진짜 깔끔하고 좋네요
프로그래머스 + 토스 느낌
갓갓갓
와 저게 진짜 5일동안 가능한가요...!? 저도 7월에는 꼭 참여해보고싶네요!!! 근데 다들 갓갓고수님들만 계신거같네용.. 코린이분들도 계시려나요
와…. 정말 퀄리티가 좋은 것 같습니다 대단해요!
파이팅입니다
저도 다음엔 꼭..ㅎ
오.. 저도 스프린트 한번 꼭... 해보고싶네요.. 퀄리티가...
우왓
너무 멋집니다. 이직을 경험해보니 저런 사이트가 필요했는데 파편화된 정보만 있었거든요. 고도화도 하신다고 하는데 점점 발전될 모습이 정말 기대되네요.
짧은 시간인데 정말 대단하네요~~
멋있어요!!
삭제된 메시지입니다.
혹시 궁금한게
왜 이 코드가 에러인건가요?
typescript 핸드북 내용인데
한 5분 봤는데도 왜 에러인지 잘 모르겠네용
사진
raidus라서요 ㅋㅋㅋㅋ
radius로 정의했는데 밑의 예시는 raidus네요
아
ㅋㅋ
ㅋㅋ
ㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋ
캠릿브지효과때문에 안보이네요;;
ㅋㅋㅋㅋㅋ
거의 틀린그림찾기네요
하^^
저도 한참 뭐지 싶었다가
ㅋㅋㅋㅋㅋ 한번보이니까 보이네요
(잠시 컨트리뷰터 될 수 있는 건가 행복회로 돌림)
감사하빈다 ^^~~
후기랑 스프린트 모두 너무 멋지네요
눈물바다에 빠진 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 눈물바다에 빠진 라이언님~~ 반갑습니다 :)
네 안녕하세요~ 많이 배우러 왔습니다 잘부탁드려요~ :)
혹시 코파일럿 사용하시는분들 있으신가요?
코파일럿없이 못 사는 사람이 되었습니다…
저도 잘 부탁드립니다 여기는 서로 궁금한것을 공유하면서 또 내가 알고 있는 질문이 올라오면 답을 해주면서 서로가 함께 성장하고자 하는 공간입니다~ 언젠든 궁금한게 생기면 뭐든 상관없으니 편하게 글 올려주세요!!
만족스럽나보네요.. 저도 한번 사용해보고 싶은데 사용하신분들의 후기가 궁금합니다
세미님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
로딩시간이 너무길군요
캐시랑 Pagination 를 활용한 ajax call이 필요합니다
세미님 어서오새요 반갑습니다
사진
안녕하세옹
!!!
일단 프론트엔드의 문제가 아니겠네요;;
사진
이상적인 웹이지만 이렇게는 거의 어렵더라구용ㅋㅋ
프론트도 일단 어느정도 개입이 됩니다
저도 비슷한 문제를 겪었었는데, 페이지 로드 시 뷰포트에 있는 컴포넌트만 쿼리 동작하도록 구현해서 쬐금 개선하긴 했는데
애초에 서버 요청이 1초가 넘어가니까 한계가 있더라고요
저는 검색엔진 최적화 분야를 주력으로 하고 있어서
무튼 반갑습니댱
와우!! 멋있네요 반갑습니다 ㅎ
혹시 이 툴의 이름을 알 수 있을까요?!
크롬 개발자도구 lighthouse?
아! 감사합니다
옹 다른거군요.. 잘못된 정보 죄송함니다!
두개다 취지는 비슷해요
두분모두 감사합니다~!
안아줘요님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 안아줘요님 반갑습니다~
es2022에 새로 추가되는 스펙은?? https://2ality.com/2022/06/ecmascript-2022.html
ie11이 사라진 지금 이제 Map을 쓰는게 좋을까 Object를 쓰는게 좋을까? https://www.zhenghao.io/posts/object-vs-map
react 타임트레블 디버깅 도구 크롬 익스텐션 https://github.com/open-source-labs/reactime
좋은 글 공유 감사합니다!!!
최근에 퇴사 회고를 했는데 공감가는 부분이 많아서 행복하네요!
톡게시판 '투표 취소': 우리 방 사람들에게 투표를 통해 물어보고 싶은 것들이 있다면 무엇인가요? 항목추가가능! 중복투표가능! 입니다
손을 번쩍 든 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!
안녕하세요 신나는 프로도님~ 반갑습니다 :)
에러잡는 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
혹시 지금 벨로그 잘 안되시는 분 계신가요?
Working well
아 저만 그런 거군요 감사합니다아!
에러잡는 네오님! 어서오세요~~ ㅎ
안녕하세요! 반갑습니다ㅎㅎ 블로그 보고 많은 도움을 받고 오픈 채팅방이 있다하여 참여했습니다 잘부탁드립니다!
고맙습니다! 이 곳은 궁금한게 생겼을때 서로 물어보고 아는 것 답해주면서 좋은 것들을 볼때 공유하는 공간입니다! 서로 기끼어 나눠주며 함께 성장하기를 추구합니다 ㅎ 잘 부탁드려요!!
넵!!ㅎㅎ
혹시 회사에서 remix 쓰시는 분 계신가요? 개인프로젝트 말고 회사에서의 remix는 next와 비교해서 어떤지 궁금해서요
순수함수의 개념 중 외부의 상태를 변경하지 않아야 한다고 하면 리액트에서 함수 내에 setState를 사용하는 것도 순수함수에 위배되는 코드인가요?
그렇지 않을까요 함수내에서 다른 값을 변경하는거니까요
오.. 그렇군요 그러면 리액트에서 함수형 프로그래밍을 토대로 작성하기 위해선 setState를 어떤식으로 사용하나요?
리액트 컴포넌트는 함수형이 아니라 함수라서
함수형 컴포넌트 (X) 함수 컴포넌트 (O)
컴포넌트를 함수형으로 짜도록 디자인되지는 않았다고 생각해요
그래서 함수형이든 객체지향이든 알맞게 조리해서 써야겠네요..
브라우저 렌더링 과정 재밌게 알려주는 영상 아시는 분 계신가요?
우테코?
우테코
저는 이거로 완전 익혔어요
다들 답변 감사합니다~!
안녕하세요 초보 개발자입니다~ 여러분들은 현업에서 matetial ui, boootstrap 같은 프레임워크를 실제로 wrapper 해서 사용을 하시나요? 아니면 자체적으로 개발을 하시나요??
대충만든 프로젝트는 공개 cdn 불러와서 대충쓰고
기대감이 큰 플젝은
자체 cdn + 다뜯어서최적화
명료하내요 감사합니다 👍
저희도 다이렉트로 쓴 경우도 있고 디자인팀 요구사항에 맞춰 변경하거나 새롭게 만든 것들도 있습니다.
안녕하세요 여러분 예전에 이 방에서 공유된 취업후기 보고 저도 이직후기를 써야지 마음먹고 있었는데 정리가 끝나가게 되어 공유드립니다. 처음 이직을 해보며 경험한 내용을 적은 글입니다. https://all-dev-kang.tistory.com/entry/%EC%9D%B4%EC%A7%81-4%EB%85%84%EC%B0%A8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%EC%9D%B4%EC%A7%81-%ED%9B%84%EA%B8%B0
실례지만 개발업종은 회사에 다닌적이없어 말입니다
연봉은 어느정도인지 물어봐도되는지
제 개인정보가 후기글에 다 있어서요 그건 어려울것같아요
개발쪽은 잘몰라서요
인정만받으면 5000 6000정도 쉽습니까?
회사마다 다릅니다
우와 정리된 포트폴리오 페이지가 눈에 잘 들어와요! (한번에 읽기 쉽게 정리되어있네요! )저도 참고하겠습니다~!
회사, 경력, 실력마다 모두 달라요 적게는 2천대부터 많게는 억대있으니 개발자가 되면 얼마를 받는다! 라고 딱 말하기가 어렵습니다
그렇군요 @@
검색해보세여!!
일반적개발자의 연봉도알수있나여
평균연봉말고
2800~3500?
요즘 뉴스보면 개발자 초봉이 어쩌니뭐니
그러다보니까 뭐가진실인지
저도 이쯤으로 알고 있는데
오.. 과제테스트 꿀팁 알아갑니다
이직하는 기분이 들정도로 몰입이 잘되었습니다. 좋은 후기 공유 감사합니다!!
인정만 받으면 3~4년차에 억대도 가더라고요
일반적으로 서울에 있는 대학교 나오면 초봉 5천이상 받는것같습니다 기업에서 학벌을 보는건 아니지만 제 주변을 일반화해보면
저 인서울 4학년인데...ㅅ
이쪽으로 갈지 고민중...
개발자 평균 연봉이 얼마던데 그럼 내 연봉이 얼마가 되겠구나라고 생각하시면 어렵고요
얼마를 받는 개발자가 될 것인가를 목표로 준비하셔야 구체적입니다
개발자로 안따지고 그냥 기업으로 따지면 될듯합니다
개발자=회사원
그래서 그냥 신입 회사원이라 비슷한거같아여
신입도 연봉 협상 가능합니다
근데 원래 개발 하셨었나요?
제 주변 보면 개발직군에선 학벌 딱히 안보던데
경험상 제일 안 볼 거 같으면서도 어쩔 수 없이 보게 되는 거 같더라고요
저도 주변 보면서 학벌빨 좀 느꼈었어요
유독 공기업 면접때
무슨이유인지모르겠는데
지방대분들이 많이 떨어지는거같습니다
그렇군요.. 주변에 공기업은 없어가지고 잘 모르겠네요
먼가 b2c 신입 연봉 잘 쳐주는 쪽들은 학벌 기준을 느껴본 적은 없는거 같아요
대기업말고 중소쪽이나 작은스타트업은 이게 현실인거같아요
3500도 사실드문편
인정합니다
2800주는데도 많나요?
작은 스타트업들
네
양질의 정보를 정말 많이 알아갑니다
모두 감사드려요
연봉은 참 궁금하긴 하네요 언론에서 다루는 신입이 이정도 받는다라는게 실제일지 부트캠프 수료하고나서 더 궁금해지네요 ㅎㅎ
올해입사자 평균 연봉이 1960만원인회사도 있고
어디서요….?
음.. 말씀드리기는 조심스럽네요 ㅎㅎ
이거는 불법아닌가요..?
평균연봉이 2천이안된다는것은
좀 이해가 안가서요..ㅎㅎㅎ
저도 최저임금 이하로 나와있길래 이게 뭐지 했어요
저는 작년 2월에 신입으로 3000시작해서 7개월차에 이직해서 3300 1년차에 이직해서 5000 지금 또 이직준비중입니다...ㅠ
와... 3300 -> 5000은 어떻게 하신 건가요??
사진
저도 딱 비슷한 시기에 이직 준비중이라
이런 헬인곳이 ㅎㅎ
1년차에 5,000 엄청 노력하셨군요
4500에 붙은상태에서 다른곳 면접봤는데 이미 붙은곳 회사 말했더이 5천 불러주시더라고요..
우왓….
전 사실 38백만되도 이직하려했는데
45백 불러주신곳에 감사...
이직준비할때 한 3곳 합격된상태였어요
와 대단하시네요
대단하시네요 ㅜ. ㅜ
이직하신 곳은 스타트업인가요?
ㄷ ㅡㄷ
1번째 중견 2번째 스타트업 3번째 대기업협력사
다시 스타트업 가려구요..
신입으로 스타트업회사를 간다면 장점이 어떤게 있을까요?
손을 번쩍 든 무지님이 나갔습니다.
스타트업은 복불복이죠...
최소한 CTO 한사람이라도 제대로 갖춰진 팀으로 가는게 좋습니다
제가 그렇지 못한 곳에서 1년 간 두 회사를 경험했는데 완전 동의해요
네넵 그런회사 찾기도 쉽지않죠 ㅠㅠ
1년짜리 프로젝트를 3개월 안에 하라고 해서 이건 안된다고 했더니 해보지도 않고 왜 안된다고 하느냐며...
ㄷㄷ..
저흰 그래도 스펙 낮추던가 하는데 ..
아 cto 유무가 차이가 있군요??
뿌롱이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세용
안녕하세요 뿌롱이님|~ 반갑습니다 ;)
개발
프론트엔드 공부하려는데
컴퓨터 맥북이 젤 낫나요??
필수는 아닌데 장기적으로는 손해는 아니에요 ㅎ
님도
맥북이신가용
넵 저희는 회사에서도 강제로 맥북을 쓰도록 합니다~
아
맥북에다가
모니터 두개 연결할수있나요??
혹시 잘못 말씀하신건가요?
어떤 점에서요?
필수는 아니지만 장기적으로 손해는 아니다라는 말씀이면 맥 체제가 개발에 크게 상관없다는 말씀을 해주시고 싶으셨던건가요? ㅎㅎ
네 됩니다~
오오~ 네! 하지만 개발자라면 맥을 한번은 다루게 될터이고 그러다보면 맥에 정착을 하게 될텐데 그럴거면 빨리 적응하는게 낫지 않나 이정도 시각입니다 ㅎ
아하! 감사합니다! ㅎㅎ
웹 개발이 맥이든 윈도우든 둘 다 관계없이 동작하고 vscode도 다 잘 동작해서 개발관점만으로만 보면 크게 맥이라서 윈도라서 뭐 그런것들이 많지는 않아요
맥이 좀 더 폰트나 UI가 미려하다보니 같은 결과물이 조금더 맥이 나아보인다 정도? ㅎ
고민되네용
맥북에어M1 살라는뎅
저도 전에 맥북 질문 올렸었는데 맥북 추천받아서 중고로 구해서 잘 쓰고있어요!!
살꺼라고 마음이 들었다면 사세요~ 계속 생각납니다
저도 한평생을 윈도우로 살다가 작년에 맥북 처음 샀는데 왜 맥북 맥북 하는지 알겠더라고요
저도 그냥 m1맥북 16인치 질렀어요
다시한번 답변해주신 분들 감사드립니다 고민이신 부분이 제가 경험한 부분이면 도움이 될 지도 몰라서 글 올렸어요!
왜용?
빠르나용
그냥 뭔가 잘 만들었어요 적응시간이 조금 필요할수 있는데 문화라는게 높은걸 겪고나면 내려가기 싫어지는데 맥을 쓰다보면 윈도를 쓰기 싫어져요
ㄷㄷ
테오님 말씀이 맞아요
전 온리윈도우
뭔가 잘 만들었어요 ㅋㅋ
개인적으로 막연한 느낌이지만 덜 버벅인다는 느낌이 들었습니다
맥북 작업효율이 너무안납니다
트랙패드의 쫀쫀함도 폰트의 미려함도 UI의 세련됨도 유닉스 기반이라 터미널도 편하고
근데 저에게 갖추어진 작업효율이 너무안나네요
그리고 맥을 써야 개발하는 느낌이 드는데 이유는 없어요 ㅎㅎ
m1 되면서 윈도우랑은 사실 비교하기가..
나중에작업 화면을 보여드리죠
터미널이 편한건 진짜 공감
m1은 배터리가 미쳤습니다
맥은 단축키 넘나불편
맥북에어M2살까....
ㅠㅠㅠㅜ 나도 맥북 감성좋아하는데
ㄱㅏ고싶은데 맥북쓰면 능률 절반이하로 뜩
단축키표시되어있는 키패드 커버가 있어요 ㅎㅎ
그런그용...
저는 단축키 자체를 몰라서 ㄱㅊ
거기까지가는속도가 너무 느리고 불편해서요
2박3일 정도는 여행갈때 충전기 안챙겨도 됩니다
첨부터 다 배워야해서
맥 단축키랑 키가 정말 편하지 않나요 ... 저는 맥쓰다가 다시 윈도우 쓰고 있는데 ms말곤 다 맥이 좋았었는데....
전 이제 윈도우pc사용하면 불편하더라구요 ㅎ
이모티콘 부럽습니다
윈도우도 11 되면서 미려해기진 했지만.. ㅎㅎ
윈도우는 트랙패드 불편해서 마우스 꼭 챙겼는데 맥북은 이상하게 트랙패드만 써도 불편감이 없는 것도 있어요
그래서 넘어갈꺼라면 빨리 적응하는게 ㅎ
저
다른 직종에서 개발자로 전향하려는데
노베이스 부트캠프
ㄱㅊ나요
별로같아요
저 그렇게 일하고 있어용
요즘은 부트캠프도 테스트 많이보는 것 같아요 그거 통과할 정도는 공부해놔야할 것 같아요
혼자서 어느정도 고 가시는게 좋은거같아요
하고
노베이스는 힘들어요
님들작업환경영상으로
보여줄수있나요
단단히 각오하시지 않으면 주변 사람들한테 오히려 피해 될 수도 있습니다.
힘들긴 했었어요 뭔가 지금 다시 해본다면 뽕을 뽑을 수 있을 것 같은데
...
그땐 몰라서 더 얻을 수 있었던 걸 얻지 못한 게 있더라고요
Html ccs js 정도면
되나요
사실 저는 윈도우를 오래 쓰고 맥은 만진 지 며칠밖에 안 되긴 했지만, 개발 관련 느끼는 가장 큰 장점은 unix를 지원하는 개발 도구들이 지원이 잘 된다는 점과 패키지매니저가 오랫동안 있었다는 것 같아요 하다못해 git에서도 윈도우에서 \n newline 쓰려면 설정 찾아서 해야하고...
붓캠 거의 리액트 할테니까 리액트로 간단한 개인 프로젝트 하나 해보시고, 가시는걸 추천드리고 싶습니다.
영상은 모르겠지만 저는 구글 크롬과 inteliji web storm sourcetree 이거 3개면 충분한거 같아요 ㅋ 나머지는 다 웹에 있으니 지라 노션 슬랙 등등
내사랑 피그마와 게더타운 ㅋ
인강들을때
모니터 2개로 해야하쥬?
두개가 편하긴한데 너무 완벽하게 갖추고 시작하지 않아도 괜찮은것같아요
모니터 한개 + 맥북으로도 충분해요
그냥 맥북도 좋아요 한창 카페에서만 일할때도 있었는데 크게 불편한 점이 없었어요
전 항상 모니터 1개로 공부해왔었는데 어차피 인강 듣고 따라치고 듣고 따라치고를 반복해야 해서 창 전환하는게 크게 거슬리지는 않았어요 하지만 거슬리는 정도는 개인차가 있을 것 같아서 결론내리기는 조심스럽네요
웹스톰이랑 vscode 중 어떤거을 선호하시나요~?
vscode죠
Vscode쥬
웹스톰이 돈값한다는데 아직 많이 써보질 못했습니다 ㅠ
저는 vscode가 나오기전부터 webstorm을 써왔기때문에 몸이 지금 못 옮기고 있어요 ㅠ
혹시 vscode에서 파일을 이동해주면 import 경로도 자동으로 업데이트해주는 방법이 따로 있나요??
파일 이동할때 리팩토링 알람 뜨지 않나요?
헐 확장프러그램있다면 바로 다운 받을듯요
auto import 때문에 작동하는건가
전 항상 자동으로 되서 원래 내장 기능인지 알았습니다.
vscode 헤비유저는 아니라서 파일을 이동할때는 아니지만 리팩토링 옵션으로 이동하면 경로는 맞춰주더라구요
ㅇ오...!
그리고 요새는 그게 싫어사 alias설정을 통해서 absolute방식으로 세팅을 많이 하시더라구요
방금 해봤는데 따로 안 뜨네요, 아직 기본으로 지원하는 기능은 아닌가봐요😅
아 설정에서 켤 수 있네요, 알려주셔서 감사드립니다!!
테오도 소스트리 사용하시나요?
맥에 따라 외장 모니터 1개까지만 지원되는 경우도 있어요! 따로 어댑터를 사야할 수도 있어서 이건 확인해보세요!(이것 때문에 회사에서 m1 에어 쓰다가 프로로 바꿨었네용)
제가 에어 m1 사고 후회하는 단 하나의 이유....
그거 빼면 다 좋은데 말이죠 정말ㅠㅠㅠ
아 그래요?
m1 모니터
두개 안되나요?
넵 기본적으로는 안됩니다ㅠㅠ
프로부터 두 개가 되더라구요
어댑터 사면 에어도 되긴 한다는데
제대로 된건 비싸고
싼건 색감이 정말 전혀 다르게 나와서ㅠㅠ
m1 프로는
가능하다는 거죠?
그때 어댑터 찾아봤더니 품절이었어요ㅋㅋㅋㅋ
아하아하 아니 지근 저도 모니터 하나랑 연결해서 쓰는데
최근 rn 개발 하게되서
노트북 화면에 시뮬레이터 + 피그마 + 터미널
이렇게 두고 하닠간 좀 불평하더라구요
호오... 의도치 않은 팁을 얻어갔네요
공식 문서에 M1 칩 종류별로 개수까지 나와있네요!
울트라 5대...
전 이거 사용해서 듀얼에 다른 허브까지 이용해서 총 m1에서 모니터 3대 연결해서 사용하고 잇습니다
악 귀엽다
가격이 쫌 안귀엽긴 하지만
좋아보이네요.....
아무래도 퍼블 작업 하게 되면 피그마 > IDE(Storm/VSCode) > 크롬 이렇게 세 개 띄워두고 슥슥슥 하고 훑어가면서 옮기게 되어서 디스플레이 세개는 필요하더라구요
쑤레기네
데스크탑 가야지
https://okky.kr/article/1255579
재미나네요 맞는 글인거 같아요 ㅎ
저는 노력가인거 같네요
M1에어에다가 어댑터까지사면
인풋대비 아웃풋이 전혀 안나오면 자괴감이 ㅠㅠ
프로가격이네 ㄷㄷ
개발직군은 참 개인 성향을 많이 타는 거 같아요ㅠㅠ
정말 잘하시는 분 계셔도 그분이 월급쟁이나 월급도둑이면
같이 할맘이 뚝뚝 사라짐ㅠㅠ
근데 잘해서
암말도 못하겠음ㅠㅠ
그전 잘하는게 아니죠
그건*
그렇죠 저도 똑같이 치구있었는데 ㅋㅋ
인성도 실력이라고 생각합니자
다*
그런사람은 잘하는게 아니고 그냥 마이너스...
재택근무
하시는분
있나용
잘한다는 기준은 프로젝트는 되게 하고 즐겁게 하게 만드는 사람이라고 생각합니다 코딩실력과 지식은 그냥 최소한의 조건일뿐
저요
고급수준정도 되야
하나영
재택은 수준하고는 상관관계는 없는 것 같아요
재택하면
회사는 아예 안나가는 건가요??
입사 한달만에 재택..ㅎ
그냥 회사에 익숙할수록 유리하다? 인것 같네요
부럽다
하.......
요즘 코로나 개선되면서 정말
회사마다 체계를 바꾸는 거 같던데요
어떤데는 풀 재택
꼰대 부딪힐일도 없을거 아니예용
어떤곳은 3일 출근 2일 재택
어떤 곳은 풀 출근...
꼰대는 화상에서도 꼰대라 ㅋㅋ
근데 체감상 요즘 삼성역은 사람 점점 늘어나는 것 같아여 점심시간 바글바글 ㅠㅠㅋㅋ
메신져에서도
그래듀
다이렉트 면전 샤우팅 아닌게 어딘지 ㅜㅜ
후.. 이직각
많이 출근하는거 같아요 요새 지하철이 다시 지옥철 되었어요 ㅋ
그런데는 진짜 근데 이직하세요
지방에서는 개발자
거의 없나용
거의 서울이던데
저는 다른 직종 근무 중임미당 ㅜ
어쩔수 없는 것 같아요 ㅠㅠ IT가 서울에 몰려있다보니
그면
재택근무하면
lg 삼성 kt sk 정도가 아니면 IT는 지역이 좀 힘든데
사실 재택이 좀 더 활성화되어서 수도권에 몰려있는 현상이 좀 줄어들면 좋겠지만...
서울 회사 지만 지방 집에서 근무를 할 수 있나요??
직방? 거기는 완전 풀재택 메타버스 근무 하고 있어요
ㄷㄷㄷ
게임하면서 돈버는 느낌일듯..
저는 아직은 재택보다 출근이 좋더라구요
저는 재택도 좋은데
출근도 좀
해보고 싶네요
저는 재택이 매우… 저랑 맞아서 저도 재택할 수 있는 회사 알아보고 있어요.
네 사실 저도 자취하다보니 재택하면 사람 볼 일이 너무 줄어서 고립감이 오기도 했어서
일하는것도 좋아해서 출근해서 야근하는것도 일만 재밌으면 상관없는거같아요 ㅋㅋㅋㅋ
사람마다 다른거 같아요 재택 선호비중이 미친듯이 우월하다 이정도는 아니고 반반 내지 6:4 정도라
히키코모리 하면서 돈벌기 가능 ㄷㄷ
집돌이인 저에겐 최고네
그럴거라고 상상하지만 출근과 퇴근의 경계가 모호한 삶도 힘들어요 ㅎ
재택할 때도 주변에 누가 보고 있어야 집중되어서 카페 가는 분들도 있고...
회사에서 같이 스터디하는거ㅛ도 좋고
재택하면 뭔가 분리된 느낌나서
근무환경이 더 좋을거라고 생각해서 이직을 꿈꾸신다면 그건 좀..
카페에서 돈벌기 ㄷㄷㄷㄷㄷ
개발이 안맞으면 지옥이 따로 없을걸요
개발은
적성에 맞는거 같아요
다행이네요
지금 워낙 힘든일을 하는중이라
에어컨 밑에서 일좀 하고싶네요 ㅜ
재택도 회사에서 재택 관리를 어떻게 하냐에 따라서도 많이 갈리는 것 같아요
상시 접속 상황을 체크하는지, 매일 업무 진행상황만 공유한다던지
루팡은 어떻게든 루팡을 하려고 하고 하는 사람은 어떻게든 하랴고 해서 크게 소용이 있나 이런생각이 들어요
재택하고 집밖을 자주 안나가서 햇빛대신 비타민d 먹고 있어요 ㅋㅋㅋ
부러브.....
하디님
넵?
전공자이신가욤
아뇨 비전공이에요!
재택 불편한 점도 아쉬운 점도 있지만 편하게 일할 수 있고 출퇴근시간 세이브되어서 좋은 것 같아요ㅎㅎ
체력도!
Poison 학
하셨나용
손을 번쩍 든 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
아뇨?
안녕하세요!
부트?
부트? 부트캠프 말씀하시는건가요?
옙
넵 독학 > 부트캠프 루트 탔어요
독학은
몇개월하셨나요
음 정확히 기억은 안나는데 반년은 넘었을거에요
설렁설렁 1년 했나?
ㄷㄷㄷ
그리고 부트캠프
시험보규 들어가셨나요
우테코?
아뇨 그냥 사설 부트캠프 갔고 저때는 돈내면 그냥 드갔어요 ㅋㅋㅋㅋ
아
지금
다니시는거 만족하시나용
퇴근하고 공부 계속 하시나용 ㅜ
만족하고 있어요 퇴근 경계가 없어서 그냥 쭉 일하다가 일 없으면 공부하고 그래요
뿌룽이님은 고민이 있으신가봐요?!
주말은용
옙..
주말은 놀죠!
지금 제가 하는 일에 대한 현타 뿌라스 퇴사 살자각 이어서
직종 변경을 노리는중이예용
일정 급한거 있으면 일하긴 하지만
일단 독학해보시고 입맛에 맞으면 그때 생각해보세요
님안
님은
몇살때 하셨나요 ㅠ
현타는 어느부분에서 생기신거에요??
이 일을 언제까지 해야하나.. 하고
일이 넘 힘들어서요
인간관계도 그렇고
저는 20살 후반을 코딩에 쓴거 같아요
그건 개발자도 ㅋㅋㅋㅋ
그래도
몸쓰는일은 아니잖아용 ㅜ
비맞고 눈맞고 높은데 올라가고 뙤양볕맞고 무거운거 들고
아! 몸쓰는일이 너무 힘드신거군요..!
교대근무도 넘 힘들두
일단 공부해보시고 혼자 이것저것 만들어보세요
옙
화이팅입니다..!
저는 그냥
부트캠프 지를라고 해용
어... 공부하시고...
독학은 겉핥디만하고
돋학 안하고 하시면 후회해요
ㅠㅠ
부트캠프 2번 들을거라서
그건 좀 돈아까운데요
어.......
방향도 안잡히고
그럼 거의 천만원 아닌가요
퇴직금 많이 나와서 ㄱㅊ
자바스크립트라도
모아놓은 돈듀 있구
기본문법
들으시는게
우테켐 하는 곳이 있는데
어디였지
코드스쿼드
부트캠프 노베이스로 가시면 고생해요
ㅜㅜ
고생하던 동기분들을 많이 봐와서
그냥 인프런에 몇만원짜리 강의도 많은데
요즘은 거의 온라인으로 하던뎅
그럼 일단
코드스쿼드
그렇네여
Html css js
겉핥기라도 할까용
그거 열심히 듣고 가도..
뿌롱이님 html css
저 부트캠프 했는데
어차피 플젝도
하나도 모르시는 상태시죠?
한 두명이 캐리하고
나머지는 묻혀가요
엄청 겉핥기만
알아요
ㄹㅇ
거의 노베나 마찬가지
아 좀 그래도
마크업이라도 알고
가시는게
1년은 공부하세여
근데 묻혀가면 얻는거 없어요
물론 수료는 어떻게 흘러는 가는데
ㄹㅇ2
html css js 유튜브나 인프런에 무료강의 진짜 많은데
진짜 공부하고 가면 본인이 더 많이
제가 했던 프로젝트 기준
그거라도 듣고 가는거랑 천지차이
전문대는 좀 아닌가용?
얻어가시는거니까
마크업이랑 라우팅만 하시는 분도 계셨음
진짜 그래도
ㄹㅇ3
아 근데 독학 플러스 부트 까지하면
시간이 너무너무 오래걸리네용 ㅜ
듣는게 나으실꺼에요 정말 정말
대학교 가봤자 실무랑 다르긴합니다
그 딱가시면 부트캠프가
약간 이론을 뭐 딱딱알려주는게 아니라
솔직히
뿌롱님 길게 봐야해요
되게 얕게 알려주고 직접 구글링 플젝하면서
퇴근하고 공부하긴 너무 파김치라서 퇴사하고 해야해서
커리큘럼 잘 받으면
가면 도움은 되겠지만
1년이면 충분하다고 생각해요
하는거라
자바스크립트부터 차근차근히 해서
진짜 힘드실거에융
공부가 예전 학교 공부처럼 알려주고 그런게 아니라
국비는 쑤레기죵?
방향만 잡아주는거라
쩝...
이거 리얼입니다...
지금 대학 3학년에 it복전 시작하는데, 학교에서 기초다지고, 졸업해서 부트캠프가는게 도움되겠죠..?
뿌롱님은 몇세신지 여쭤봐도 될까요?
26이요
저는 국비교육들었는데 솔직히 케바케라고 생각해요
국비도 좋은데 잘 찾아가서 열심히하면 문제 없는디
제가 퍼블리셔 하다가 넘어가는 사람인데도 조금 힘들었거든요?
아직은 저는 늦지 않은 시기라고 생각하고
js천천히하세요...
국비나 부캠이나
저는 30살 넘어서 시작했고 급하게 하려고 할수록 기초가 부족해서 고생하실거에요
똑같아요
해봤자 학원인걸요
하 지금회사 걍 다녀야 하나..
국비로 맛 보고
그리고 js 공부하고 가시면 아마 본인이 더 나중에 그 더 만들기도 재밌고 플젝도 그나마 나으실꺼에요
부캠 결정하시는게 더 나으세요
저는 28인데 했거든요 괜찮으실꺼에요 30대에 부트캠프하시는분들
엄청많으셨어요~
요즘 부캠도 국비로 지원받아서
js 안하고 리액트부터 조급해서 하기 시작하면 정말 나중에 두배로 시간 더써야할 시기가 올거에요
저희 학원에 회사원들도 수업들으시던데.. 그런게 있지않을까요?
국비 커리큘럼 여기 올리면 사람들이 좋은지 안 좋은지 말해줄거 같네요
국비 날리면 아까우실거에요 ㅋㅋㅋ
이거 정말 맞는말인거 같습니다 다 js기반 라이브러리니 기본 js알면 좋을거 같네용
맞아요
근데 자스 하려면
자스 2주 하고
바로 리액트리액트리액트
HTML이랑 CSS는 거의 마스터 해야하죵?
솔직히 뿌롱이
아니용
언어에 ...
마스터란게 어디있나요
마스터는 없고 css는
마스터라...
딥하게 가면
지금 회서 다니는데도 마스터 못 햤는데
진짜 왠만한 언어보다
js는 어느정도 수준으로 공부해야할까요..? 시중에 나와있는 js입문서정도면 되나요...?
어렵거든요?
부트캠프 듣기전에요..!
팀장님도 이런게 있었냐고 팀원들한테 배우십니다
제가 개발하면서 진짜 바보같은게
마스터라는 거에 집착했는데
개발자분들도
음
다 모르시는건 찾아가보고 좋은코드 보는거지 모든 언어를
막 처음부터 프로토타입으로 상속 받고 이런거까지 자세히는 아니더라도 내장함수 사용방법이라던지 웹 개발하면서 기본적으로 다뤄야할건 다루고 들어가시는게 제일 좋다고 생각해요
다알수는없어서...
그러면 자주 사용하는 태그 같은걸 외우고 적용하는건가용
개발도 개발인데
구조를 이해 잘 하시는게 중요해요
아그런거죠? 약간 뭐라고 해야할까요 기본적인거 구동하는 동작이라던지 아 이런거 크게크게 보고시고 흐름 아시는게 제일
중요한것같구요
아 이거 언어 하나하나 마스터해야지 하면
ㄷㄷㄷ
숲 먼저보고 그때그때 필요할때 나무도 찾아보세요
정말 끝도 없는게 이쪽이라서.. 아 이건 이런거구나 큰틀로 보시고
마스터? 불가능하다고 생각합니다
모랑님 너무
어렵당
공감합니다...
정말
근데
국비 하실거면
저도 급하게 서두르다가 1년넘게 시간 보내봐서...
아니 부트캠프 하실거면
테스트 안 보고 가는 부트캠프는 솔직히 비추요
제가 나온 부캠이
3개월에 개발자를 만들어준다고 광고하는 부캠인데
직방 가고싶다 퓨ㅠㅠ
실력 천지차이 심해요
저도 테스트 있는 부캠 가는거를 추천합니다ㅔ
그런곳일수록 미리 한 사람이랑 아예 베이스 없는 사람이랑 엄청 차이 심할거에요
엄청 심해요 ㅋㅋㅋㅋ
들어가면 팀원들 똥기저귀 갈걸요
그런 곳 가시려면요 지금부터 몸이 아파도 퇴근하고 새벽까지 공부하시고 1년 더 공부하고 부트캠프 2번하고 진짜 미친듯이 2년 하세요
모랑님 js 재귀함수도 좀 이해하는게 좋겠죠?
너무 쉽게 생각하시는거 같네요
저도 위에서부터 봤는데 같은 생각입니다
테스트 있는 부캠은 코테도 보고 이력서도 보고 가고 그래서 가고 싶다고 붙는건 아니라 쉽진 않아요 ㅋㅋㅋ
재귀도 다뤄보고
하트뿅뿅 라이언님이 나갔습니다.
저는 requestAnimationFrame 이런거 다룰때 재귀 쓰게 되더라구요
사실 밖에서 일하는게 힘들고 교대근무도 힘들고 해서 개발자를 한다는게 이해가 안 가는게 개발자도 힘들거든요 ..
뭔가 부트캠프 생기기 전에 현업에 들어와서 새로 오시는 분들이 대부분 부트캠프를 거쳐서 오시던데 요즘 부캠은 가르쳐주는 것보다 프로젝트 하면서 결과물이랑 협업 경험 쌓는 게 더 큰 느낌인 것 같군요?
흠 좀 심화로 js 더해보려고 하고 있어서 감사합니다~!
저도 개발자는 적성이 맞는게 제일 중요한거 같아요
적성이 가장 중요합니다
저 전 직장 동료분이 3개월정도되는 부캠출신분이었는데 많이 힘들어하셨어요
3개월도 그전에 얼마나 뭘 알고가서 얻고 왔냐가 정말
중요한거 같네요 남에틈에
베이스없이 출발하다보니
그냥 몸맡겨서 수료하려면 솔직히 시간흐르면 하는거 일수도 있을테고 얻어가는건
본인이니까 정말 생활코딩 유튜브라도 한번 보시는거 강추합니다`!
~!
야근을 매일 2-3시간씩 더해도 작업물이 잘 안나와서
제가 부트캠프 한번 노베이스로 갔다가 중도포기한적있어서 말씀드립니다~!
그러면 팀원에게 물어보고 팀원 생산성도 잡아먹게 돼서 팀원도 힘들죠 ..
제가 다닌 부트캠프 처음에 120명인가로 시작해서 수료날 반타작 했어요 ㅋㅋ
맞습니다
저는 제대로 시작하기 전에 베이스없이 리액트 공부 6개월 해보고 남는게 없어서 번아웃이 왔어가지구…
클론코딩도 베이스없이 듣는건 독이고 부캠도 마찬가지라고 생각해요. 베이스 없으면 같은 3개월에도 남들보다 2배 더 열심히 할 각오가 필요하다고 봅니다
맞아요
클론코딩 베이스 1도 없이 했었는데
ㅋㅋㅋ근데 솔직히 생활코딩 좀 보고 html css 조금 건드려본 정도로 적성을 판단할수있을까요?
그냥 진짜 따라치기만 하게 돼요
누구라도 재밌을걸요 그건
생각해보면 무작정 부캠 등록 했는데 적성 안 맞으면 돈이랑 시간만 날리는 ㅋㅋㅋ
그것도 안 맞는 사람이 있을수 있죠 이해가 안 돼서 ㅋㅋㅋㅋ
클론코딩 강의는 정말 잘못하면 타자연습돼서 조심해야하는 것 같아요~
맞죠
클론코딩 노베로 하면 영타속도만 소폭 상승하게 돼요
ㄷㄷ
역시
걍 지금 회사 정년까지 다녀야긋당
머리아프어!
주말에 유튜브 간단한 강의라도 들어보시는게.. ㅋㅋㅋ
머리가 365일 아픈 직종이니까요 개발자는 ㅠㅠ
여기와서 할수있을까요 한다고 해도 누가 쉽게 말을 해줄수있을까요 내인생이 아닌데
일 끝나고 쉬면서 혹은 주말에 강의 들으시면서 조금씩 시작하시는 게 좋을 거 겉아요
뿌롱이님이 나갔습니다.
에고
너무 내가 꼰대처럼 말했나..
오늘도 한명을 살렸다..
근데 정말 부트캠프나 그냥 들어가면 힘드니.. 뭐든... 일이 힘들겠지만유 다들 화이팅하세융!
살렸네요
살렸네요
천만원 날릴뻔한 분 살럈네요
+ 1년
ㄷㄷㄷ
역시 언제나 유익한 테오방
천만원이나 하나요
두번 가신대요 ㅋㅋ
거의 천만원 가까이 하는곳도 있고
조금 더 싼곳도 있고 다양하긴 하더라구요
저 노베이스로 했는데
잠깐 사이에 어마어마한 얘기가 오갔군요!!
크게 문제는 없는거같아여!
그냥 미리 집중하냐 하면서 집중하냐의 차이같아가지고
그냥 단순히 밖에서 일하는게 힘들다 안에서 일하면 쉽겠지라는 마인드로 오면 여기사도 뭐 잘 버틸 수 있을지 ...
돈 날리겠단 생각들어서 집중이 잘되더라고요...
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
돈기부여!
제가 그 생각입니다 ㅠ
애초에
안녕하세요 손을 번쩍든 무지님~ 어서오세요 :)
돈기부여! ㅋㅋㅋ
국비 커리큘럼은 믿지마세요 ㅎㅎㅎㅎㅎ 커리큘럼대로 안할 확률이 높거든요
유명하고 좋은 부트캠프는
사실 부트캠프 밖에서도 열심히 찾아보고 복습하는 분이라면 국비든 어떤 과정이든 잘하실 것 같아요
너무 너무 쉽게 생각하셔서..
들어가기도 힘들잖아요
멋쩍은 튜브님이 나갔습니다.
주위에 부스트캠프 떨어지고 네카라가신분들 수두룩한데,,
ㅋㅋㅋㅋㅋㅋㅋㅋ
커리큘럼은 학원에서 짜놓은거고 강사님 커리큘럼은 따로인 곳이 많아서 들어갈때 본 커리큘럼이랑 실제 커리큘럼 괴리가 큰 경우를 꽤 봐서..
저는 싸피 했는데 진짜 새벽까지 프로젝트 하고 그랬어요
싸피 어떤가요? 궁금했는데
알고리즘이랑 프로젝트 골고루 배우려면 좋은거 같아요
싸피 좋네여
그냥 부캠은 강사가 기수 선배라
신뢰도가 너무 떨어져요
혹시 싸피 전공자가 하기엔 어떤가요??
전공자도 좋은거 같은데 상대적으로 강사분들도 그렇고 비전공반이 좀 더 좋았던거 같아요
근데
저희학교는
스타트업 재직하시는 분들 연봉협상(이직X, 같은 회사에서 일년마다 갱신) 시에 보통 몇 프로나 올라보셨나요...?
졸업하고 싸피 하시는 분들도 꽤 있더라구여
다른 회사 합격해서 협상카드로 쓰는 거 말고 진짜 딱 회사에서 제안한 금액 갱신만 말씀하시는 거죠?
넵!
그렇군요!
저같은 경우는 컴공 4학년 재학중이고 FE 개발자를 목표로 하고있는데 중간에 싸피듣는건 시간낭비인가 궁금해용
개인적으로 느꼈을 때 전공분들은 다 프론트엔드 안좋아하셨어요 큐ㅠㅠㅠㅠ
제가 4년제 전공 프론트엔드인데
스터디를 몇 개 하고있는데 주위에 백엔드분밖에 안계세요
ㅋㅋㅋㅋㅋㅋ
프론트 한 분 계세요,,,
그래서 협업 프로젝트하면 진짜 프론트엔드 공부하시는분들한테 같이 하자고 말씀도 많이 주시고
어차피 나중에 다 하시게 될텐데 ㅠ
전공자는 자바를 배우다보니 백에 더 관심 많은거 같아요
맞아요 저도 주변 전공생들이 백엔드를 많이 좋아하더라고요..
컴공 전공 출신 FE 준비생인데
대학동기 개발하는 애들이랑 얘기하면 프론트 한두명밖에 없고 다 백엔드 ㅋㅋㅋㅋㅋ
플젝할때 아키텍쳐 이해하고 스키마 짜면서 BDD 개발까지
근데 알고리즘도 관심 있고 프로젝트 관심 있고 하면 한번 도전해보는거 좋은 거 같아요
진행하니
프로덕트가
플젝할때는 프론트가 디자인까지 해야해서 기피하시는 분들이 좀 있긴하드라구요 ㅋㅋ
저도 전공하긴 했는데 주변에 프론트 편견이 있긴 하더라구요
좋게 나오는 경향은 있는거같어요
학교마다 다르겠지만 컴퓨터공학이면 정말 인프라 같은 공학으로 알려주는 곳이 많다보니... 웹쪽은 거의 다른 전공 같은 느낌이었어요
일단 개발자 동료도 많아지고 배울 점이 많긴 해서
css때문에 호불호가...
싸피는 백엔드 위주입니다
프론트 돔황챠
싸피는 뭐알려주나요?
1학기는 거의 자료구조 알고리즘
혹시 친구가 스타트업을 하는데
2학기는 플젝 위주로 진행합니다
홍보해달라고 해서
여기 공유해도 되나요?
아하아하
그러면
싸피 해도
괜찮지 않나요?
근데 2학기때 프로젝트 등한시하고 면접준비 알고리즘만 하는 친구들도 간혹 있어요
ㅋㅋㅋㅋ
싸피나오면
어느정도 보장되지않나요?
그 친구들이 조금 더 대기업 잘가는거 보면 분하긴 합니다
싸피라고 딱히 뭐없습니다 ㅋㅋ
어떤 캠프를 가도
저는 어제 싸피 면접봤는데 프론트 개발자 하고 싶다 했어요 ㅋㅋㅋㅋㅋ
본인이 하기 나름인거앝아서
우테코빼곤 진짜 다 비슷비슷할거에요 ㅋㅋ
아하아하
프론트 지망 전공자이시면 그냥 취준하시는게 나을수도...
맞아요 프로젝트 이력들이 생기니까 조금 더 괜찮을뿐이지
+ 네이버 스프링부트
싸피로 취업이 직결되는건 아닌거 같아요
은행권에서는 조금 좋아하는거 같기도한데
그른가여
우테코는 몇 명씩 뽑나요
금융권...
우테코도 한 50명씩 뽑던가여..?
우테코는
언제 열리나요?
하반기쯤에 열렸던거 같아요 프리코스가 한 11월쯤이었나
근데
대기업 가고 싶어서 SSAFY 지원했는데 고민이네요
선발까지 2달 걸려요
ㅋㅋㅋㅋㅋㅋㅋ
3달인가 2달인가
아하 그때쯤 열리능군요!
준비를 많이해봐야되겠네요
자료구조 알고리즘 1학기에 바짝하니까
그때 열심히해서 1학기에 대기업 트라이 해보는 친구들 많습니다
싸피도
보니깐
저도 그럴생각으로 지원했습니다. 스타트업 경험 잠깐 있긴한데 코테에서 자꾸 떨어져서요..
1년에 한번씩 뽑는게 아니던데
기수가 어떻게 되는건가요?
6개월마다 한번씩 해요
아하아하
그럼 1학기 2학기는
3개월 씩인거에요??
1년짜리이고
반년씩 겹치니까
다른기수도 볼수있어요
아 그런거군요!
훈련소같네요
ㅋㅋ ㅋㅋ ㅋㅋ
물론 교류는 없구요 ㅋㅋㅋㅋ
아 논산교회에서 만나는 그런 느낌은 없군요
1년끝나고 성적우수자중에 취업안되신분들 조교도 하는데
몇분 안뽑으니까 그때나 볼 수 있겠네요
아 그거 월급이 장난 아니라고 들었어요
맞아요
ㅎㅎㅎ 도전 욕구가
올라오네요
이번 방학 코테 아주 빠짝해야되겠슴당
뭐니뭐니해도 취업이 더 좋습니다
논산교횤ㅋㅋㅋㅋ 비유 재밌네용
손을 번쩍 든 무지님이 나갔습니다.
싸피는 백엔드 위주고
우테캠은 프론트 위주 우테코는 프론트 백엔드 다있고, 네이버 부스트캠프는 프론트 위주인데 백엔드도 배워요
맞아요 가르치는건 백엔드 위주로 가르쳐주고 뷰는 사실 반짝 배우긴 하죠
전공자반 비전공자반이 나뉘어져있으면
프로젝트도 따로하나요?
1학기는 아예 분반이고
2학기는 첫프로젝트는 섞었고 이후에는 자율로 풀어줬어요
보통은 서로 1학기동안 친해진 반 친구들이랑 같이하게 되는 경우가 많죠
아항 프로젝트를 여러번하나보네요
3번합니당
글쿤요 조금 더 고민해봐야겠네요 알려주셔서 감사합니다 ㅎㅎ
울고있는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
대기업 싸피지원 괜찮아보여요
친구도 싸피 수료하고 한달뒤에 대기업 갔으니
일부 기업에 싸피전형? 이런게 따로 있는것같더라구여
모랑님 일대일로 잠깐 간단하게 이것저것 여쭤봐도 될까요??..ㅎㅎ
네네
삭제된 메시지입니다.
개발 관련 정보 올려주셔서 감사합니다
빨간줄님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 빨간줄님~ 반갑습니다 :)
안녕하세요~~ 반갑습니다 ㅎㅎ
네! 어서오세요 여기는 프론트엔드나 웹 개발을 하면서 궁금한것들을 공유하고 대답하면서 함께 성장하고자 하는 곳입니다 ㅎ 부담없이 편하게 글 남겨주세요 ㅎ
네, 감사합니다 😊
즐거운 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
즐거운 네오님이 나갔습니다.
아이스크림 든 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
아이스크림 든 네오님이 나갔습니다.
안녕하세요~~ 저 팀블로그에 FE 파트가 어떻게 일하고 있고 어떤 기술스택을 채택하였는지 작성할려고 하는데
혹시 관련하여 잘 작성된 FE 부서 팀블로그나 글 가지고 계신 분 있을까요오~~?
보틍 개발자가 되면 회사에서 기본적인 노트북은 다 제공해주나요? 제공해주면 노트북을 보통 들고다니시는지, 집에서 쓰는 용도의 본인 노트북이나 컴퓨터가 따로 있는지 궁금합니다!
회사 맥북으로 다 해결하고 있습니다.. 사이드 프로젝트, 웹툰 보기 등등..
회사에서 장비는 지원해주고, 저는 회사일 할때만 쓰고 있습니다!
개발 PC를 회사에서 주기는 하고, 딱히 그룹웨어나 보안프로그램이 깔려있지는 않으나, 가능한한 거기서 회사업무외의 작업은 지양하고 환경을 분리하는 편입니다. 나도 모르게 개인자료가 저장될 수도 있고, 또 언제 갑자기 환경이 달라질지도 모르고...
앞단쳐내기님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
저도 개인계정 같은거
연결해놨다가 클라우드에 뭐 딸려올라갈까봐 찝찝해서 못쓰겠더라구요 ㅋㅋㅋ
노트북이 점점 버벽여서 새로 사야 하나 고민하고 있었는데 감사합니다!
안녕하세요~ 혹시 nextjs로 최근 본 상품을 어떻게 구현하는지 아시는 분 계실까요? localstorage로 하면 계속 에러가 나서요 ㅠㅠ
윈도우가 마운트 됐을때 로컬 스토리지에 접근 하시면 됩니다
윈도우가 마운트 됐을때를 혹시 어떻게 구현해야 할까요? nextjs 공식문서에서는 로컬스토리지를 csr 환경에서 useEffect에 빈 의존성 배열에 코드 구현하는 것 또는 if (typeof window !== 'undefined') 일때 코드 구현하라는 것 같은데.. 이러면 토이 플젝에 ssr이 없어지는 것 같아 nextjs 쓰는 이유가 사라지는 것 같아서요 ㅠㅠ
localStorage는 브라우저의 자원이기 때문에 노드측에서 접근하는게 불가능합니다. 그리고 그러한 이유로인해 ssr의 이유가 사라지진 않습니당
음.. 제가 조금 헷갈려서 그런데 그러면 어쨌든 로컬스토리지 접근하려면 제가 어떻게 하면 될지 혹시 코드로 알려주실 수 있을까용? ㅠㅠ
클라이언트사이드 시점일때 접근하심됩니다
그러면 찾아보니 해당 페이지 컴포넌트를 임포트 해올 때 ssr: false로 하면 된다는 말이 있던데 이런 방식을 말씀하시는 게 맞을까요?
https://www.npmjs.com/package/ssr-window 이런것도있던데 도움이되실수도..
한번 시도해볼게요 ! 감사합니다
bb님이 나갔습니다.
최근 본 상품을 ssr을 해야할 이유가 있는지 생각해보셔도 좋을듯합니다. seo를 위해서라면 크롤링봇이 최근상품을 갖고있을 일이 없으니 불필요할것이며, 빠른 로딩을 위한다면 서버에서 최근 본 상품을 불러오기 위한 통신 비용이 오히려 지연을 일으키겠죠 (굳이 해야한다면 쿠키에라도 저장해야겠지만..)
사진
위와 같이 이미지를 넣고자하는데
사진
이런오류가 뜨며 엑박이뜹니다 이유가 무엇일까요..
404......
웹팩 설정상 문제인거같은데..
Image폴더를 src안에 넣어보시고 다시실행해보시겠어요?
이미지를 못찾는 것 같네요 윗분말씀대로 웹팩설정은 건드려야될수도..
사진
안녕하세요 .. 화살표 함수 관련으로 질문드릴 게 있습니다. 객체 내부에 화살표 함수가 있고, 해당 화살표 함수는 상위 객체의 함수를 this.함수 형태로 접근하고 있는데요, 동작에는 이상이 없으나 Prefer that unbound methods are called with their expected scope JS-0387 라는 안티패턴 경고가 떠서 머지가 불가능한 상태입니다. 제가 코드를 잘못 짰다는 것은 알겠는데, 개선점을 찾지 못하겠습니다. 개선하려면 어떤 부분을 참고하면 좋을지 조언을 구해도 될까요?
이미지 태그 src=“경로” 말고 src={require(“경로”)} 해보시겠어요?
화살표 함수를 function으로 변경하면 될까요..?
function으로 변경하면 스코프가 상위 객체가 아닌 하위 객체로 내려가서 함수 호출이 어렵습니다.ㅠㅠ 구현 자체를 잘못한 것 같기도 하네요..
this.erasePixel.bind(this) 하면 되지 않을까여~?
헉 해당 오류가 사라졌습니다!! 뭐가 문제였는지 이해가 잘 안 되네요 ㅜㅜ 더 공부해야겠습니다. 도움 주셔서 정말 감사드립니다. 좋은 주말 되세요!!
화살표 함수에 this가 없어서 그런거죠..?
this가 바인딩 되지 않아서 그런거 같아요 erasePixel을 넘길때 화살표 함수로 감싸서 호출하던가 위에 적은것처럼 bind를 호출해서 넘겨 줘야 해요
commandable인터페이스로 함수 호출 -> handleDraw -> handleDraw 두번째 인자로 넘긴 함수를 차례대로 실행하는 구조인데, 중간에 this가 없어져서 저런 오류가 생기는 것 같기도하고 알쏭달쏭 어렵네요..
고수님께 많이 배웁니다. 감사합니다. 바인딩 부분을 좀 더 유심히 공부해야겠네요!!
프로도님
혹시 this.erasePixel 메서드 내부에서 this를 사용하시나여??
앗 넵 그렇습니다. 그래서 문제가 생겼던 것 같습니다.. ㅠㅠ this를 너무 남발했나봐요..
혹시 실례가 안된다면, this.handleDraw와 this.erasePixel 코드를 알려주실수있을까요?? 제가 이번에 this를 공부하면서 화살표함수에서 this는 상위스코프를 가리키고, js는 렉시컬 스코프로 this는 함수가 선언될때 this를 바인딩한다고 공부를했는데, 위 코드에서는 어떻게 this가 에러났는지 좀 더 알고싶어서요 ㅎ,,,
졸린 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
사진
기능은 오류가 나지 않는데, 안티패턴이라고 하는 것 같습니다. 저도 아직 초보인지라 나쁜 코드 예시로 참고하시면 될 것 같습니다! 텍스트로 첨부해드리려고 했는데 카톡 코드 복붙이 안 되네요..ㅜㅜ
감사합니다!!!
졸린 라이언님~ 반갑습니다 어서오세요 :)
삭제된 메시지입니다.
아 질문하신분이 다른분이셨네요 😅
테스트해보았는데, 동일한 오류가 발생합니다. 바인딩 문제가 맞는 것 같아요! 감사합니다.
눈물바다에 빠진 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
좋은 의견 감사합니다! 덕분에 구현 원리 다시 생각하고 csr로 구현 해보려고 합니다. 감사합니다 ㅎㅎ
P2E 분야에서
수많은 웹 기반 게임들을 보았습니다
보안 걱정이 되던데 저만그러나요
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!!
안녕하세요
기능에 오류가 나야 정상일텐데.. erasePixel 함수에서 this를 사용중이라면 this.erasePixel.bind(this)로 호출했을때와 this.erasePixel로 호출했을때 erasePixel 함수 안에서 가르키는 this는 다르니까요 두가지로 호출해보고 콘솔로 this를 찍어보시면 어떤 의미인지 알 수 있으실 것 같아요
먹보 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
단호한 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
즐거운 네오님 먹보네오님 단호한 프로도님~ 반갑습니다 어서오세요 ㅎ
말씀해주신걸 늦게 확인했네요…ㅠㅠ 이상하게 바인딩 부분을 지워도 비슷한 구조의 모든 함수가 정상적으로 동작합니다. 어제 깃허브에서 호기심에 코드 분석 툴을 연결하니 질문올렸던 경고가 발생하며 머지가 안 되었고, 분석툴이 오류를 잡아주기 전까지 해당 이슈를 전혀 모르고 있었습니다. 하지만 바인딩을 추가하니 bad code경고가 사라진 걸 보아 바인딩이 문제였던 것이 맞다고 생각합니다. 이제는 이 기능이 왜 되는 건지 이해가 안되기 시작하네요 ㅋㅋㅋㅋ ㅜㅜ 친절한 설명 정말 감사드립니다. 좋은 하루 되세요!
사진
위는 handleDraw쪽 this, 아래는 erasePixel의 this입니다. 전부 최상위객체를 가리키고있는 상태입니다.
사진
이렇게 보면 이해하기 편할 것 같아요
맥북 M2에어 7월 출시 확정났네요
사진
와!
생각보다 빨리 출시가 잡혀서
놀랍네요 ㅋㅋㅋ
맥북 사용하시는 분들은 교체주기가 어떻게 되나요?
회사에서 주는대로...?
개인 작업용으로는 따로 사용하시는거 없나요??
제가 아는분은 코딩오타쿠라 퇴근해도 일상이 코딩인분이 있는데 개인작업용으로 있더라구요
기타치는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
바쁘실텐데 이른시간에 번거롭게 해드려서 죄송합니다 ㅜㅜ 그림으로 그려주시니 바로 이해가 되었습니다. 제가 함수를 선언할 때 어디는 화살표 함수 어디는 일반 함수..ㅠㅠㅠ..로 뒤섞어 선언해서 어떻게 운좋게(?) 기능이 굴러간게 아닌가 싶습니다. 귀한 시간 내주셔서 감사합니다. 열심히 공부하겠습니다!! 좋은 하루 보내세요.
안녕하세요 기타치는 튜브님, 반갑습니다 :)
혹시 프로필 사진의 픽셀로 된 캐릭터(?) 어떻게 만드셨는지 여쭤봐도 될까요 ?
안녕하세요 반갑습니다! 퍼블리셔로 일하다가 프론트엔드로 이직 준비중이라 정보도 얻고 함께 공유하면 좋을 것 같아서 들어오게됐습니다😆 잘부탁드립니다
아 이거 NFT입니다 ㅋㅋㅋ
환영합니다!! 궁금한게 있을때 얼마든지 편하게 글 남겨주세요 실무나 개발 질문 뿐만 아니라 개발관련 고민 상담이나 개인적인 이야기도 좋아요
답변 감사드려요 ㅎㅎ
취미로 NFT 수집하고 있어서...ㅋㅋ
엇 그럼 프사 실제로 구매하신거에요? 저 픽셀 초상화 몇십억 씩 하고 그렇던데 ㄷㄷ
네네
근데 몇십억은 아니라
몇만원입니다...ㅋㅋㅋ
그거는 이더리움 기반 NFT 크립토 펑크일거에요
이거는 클레이튼 기반 NFT입니당
간지난다 ㅋㅋ
그렇군요 ㅎㅎ 답변 감사합니다!
안녕하세요 약 1년정도 다닌 제 상황이 이러한데 퇴사할지 봐주실수 있을까요? - 사수 및 개발자 없음 (동기 개발자 1명이 전부) - Jquery 사용 (기존에 있던 분이 jquery를 사용해서 그게 굳어짐) - 일 (프로젝트) 없음 (1년간 자사 홈페이지(jquery + nodeJS) 만들고 자사 솔루션 유지보수가 전부) - 6개월 넘게 프로젝트 개발 "대기"중 (추후 개발해야할 것들을 이것저것 만들어보면서 시간 보내는 중) 현재의 나 - JAVA spring 개발자로 취직했으나 어쩌다보니 nodejs + jquery를 하게됨 - 하다보니 front에 흥미가 생긴 상황 -1년 넘게 기술블로그, 1일 1커밋 중 - 코테, react, vanilla js 공부중이나 시간적 한계를 느낌 8월에 부트캠프하며 재취업 VS 계속 존버하며 이직 어떤 선택이 나을까요.? 봐주신분들 모두 감사합니다.
전 후자 추천
이유를 알 수 있을까요?
미취업 상태는 쫓기듯이 준비할 위험이 있기 때문입니다
저도 다니면서
이직준비하면서 이직 할거같습니다
제가 그러는중인데
마음의 안정이 엄청 많이 됩니다
어떤 부트캠프냐에 따라서도 달라질거 같긴한데, 급여가 밀리는 게 아니라면 그래도 돈 받으며 이직 준비하는게 나을것 같단 생각이 드네요. 어차피 회사에서도 지금 일이 없는 상황이라면 앞으로 할 개발 준비한다하고 몰래(??) 공부할 수 있지 않을까요??
저라면 퇴사후 이직할것 같아요 물경력만 채워지는중인것 같은데
저도 이직전에 좀 쉬면서 이직할까 했었는데 주변 개발자분들께서 회사 다니면서 이직하라고 말씀해주신 이유중에 하나가 "현재 일을하지 않는 상황 자체가 약점이다" 라고 하시더라구요.
저도 이직준비 하면서 이직 추천드립니다.
맞아요 물경력도
경력이긴합니다
쉬고 구하면 그건 경력이 아니라서..
그리고 쉬는시간이 짧다면 모르겠지만 그 기간이 의도치않게 길어질경우 아쉬워서 취직하게되고 또 후회하게될 상황이 올수도 있다고 생각해요.
전 퇴사 후 이직 추천합니다. 뚜렸한 목표를 가지고 퇴사 해서 부트캠프 가서 공부했다는 열정을 높게 평가하는 곳도 많이 있어요. 특히, 백엔드였다가 프론트로 전향하는거면 더더욱이요
이력서는 쓰셨고 서류 지원은 하고 있는 중이신가요?
헉 쉰다음에 이직하면 경력직이 아닌가요?
경력직이긴한데 쉰 기간동안 뭘 했는지 증명해야되니까
쉬는 기간이 경력에 포함되지 않는다가 맞는 것 같습니다!
그거도 맞고요
아하
결국엔 부캠또한 근본 자체는 학원강의+@ 라고생각하기때문에, 혼자서 학습하시는게 어렵다고 생각하시면 양질의 강의들이 많이 나와있으니 부캠 결정할 기간동안 한두가지정도 수강하면서 공부하시고 판단하시는것도 늦지 않다고생각해요
어렵네요ㅜㅜ 좋은 문화를 가진 곳으로 이직하면 경력 인정은 개의치 않을것 같습니다.. 이력서를 작성했는데 시장에서 요구하는 역량들이 회사일로는 갖춰지지 않는다는 생각과 그것들을 채우려면 스터디 할 것들이 꽤나 많아서 부트캠프를 생각해보게 됐습니다. 강의는 udemy에서 clean code, black coffee, 코딩앙마의 react 영단어 외우는 사이트 만들기, 인프런 vanilla js - tdd 강좌 및 js 서적들을 듣고 읽긴 했는데 아직도 부족한 것 같아서 코드리뷰도 하고 협업도 하는 부트캠프에 가서 충분히 준비해보는게 어떨까 싶었네요 퇴사후 취업을 하는것은 심적으로 역시나 많이 힘들것 같긴 합니다 고민스헙네요ㅜㅜ
next step의 교육들이 회사다니며 참여하기에도 좋고 무엇보다 코드리뷰가 포함되어 있다고 들어서 한 번 알아보시면 좋을것 같습니다. 온라인 교육은 협업을 경험하기엔 약간 부족할 수 있겠지만, 코드리뷰가 포함되어있는 교육이 next step 말고도 몇몇 더 있다고 알아서 (이름을 까먹었네요;;) 회사 다니시며 이런 교육 참여하시는 것도 고려해보시면 어떨까요?
아 넵 안그래도 요번에 프로그래머스에서 진행하는 코드리뷰 등록했습니다. next step은 요번에 시기를 놓쳐버렸네요ㅎㅎ 조언 감사합니다!
페이지네이션응 구현했는데
쿼리로 limit를 줘서 구현을 했는데
더보기를 누를때 10씩 증가하는데 맨위로 자동으로 올라가지는데
스크롤이벤트말고 따로 해결하신분있으실까요 ㅜㅠ
페이지 이동이 된거 아니에요? 코드가 필요할듯 하네요 ㅋㅋㅋ
코드를 봐야 답변이 빠를거같은데요
싱글페이지면 데이터에따라서 해당 컴포넌트가 리렌더링이됨에따라 스크롤이 초기화되는거아닐까요?
저는 구글크롬 사용하는데, 구글크롬에 리액트 익스텐션이 있어요 거기 보시면 리렌더링 될때마다 테두리로 하이라이팅이 일어나도록 설정할수 있거든요
그때 리플로우가 발생하는지 한번 확인해보시면 좀 도움이 되지않을까 싶네요
리액트에서 axios로 json데이터 받아와서 콘솔에 보여주는데요 처음에는 잘 되는데 리렌더링 되면 cannot read properties of undefiend 오류 뜨는데 왜이럴까요?
비동기 처리에 대한 핸들링이 제대로 되어있는지 먼저 확인해보시면 좋을것같아요
async await를 빼먹었다던지 등등..
밑에서 혹시 관련 데이터에 접근하는 로직이 있나요??? 그렇다면 거기서 에러가 먼저 나서 이후에 동작이 안됩니다.
네네 컴포넌트 리턴하는곳에 데이터접근 하는 로직있는데 이러면 안되나요??
그곳에 옵셔널 체이닝이나
데이터가 없는 경우에는 보이지 않도록 조건부 렌더링을 해주셔야 합니다
데이터가 받아지기 전에 렌더링부터 되기 때문에 undefined 상태에서 에러가 발생해서 이후 동작이 안되는거에요!
아하 .. 감사합니다!!
useEffect와 라이프사이클 관련 문서 먼저 읽어보시면 도움 되실거에여!
useEffect는 아니고 버튼 클릭했을때 데이터 받아오는건데 같을까요?
혹시 로직 간단히 볼 수 있을까요?
아아
해결했습니다 감사합니다 ㅎ
말씀하신대로 조건부 렌더링 해주니 나오네요
숨참고 love <div>님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!!! next.js를 공부하고 있는 신입 프론트엔드입니다 잘부탁드립니다
반갑읍니다
이모티콘
어서오세요~ 잘부탁드립니다 ㅎ 뭐든 편하게 물어보세요
넵ㅎㅎ감사합니다!!
router.replace(`/list?limit=${limit) + 20}`)
더보기를 누르면 이런식으로 불러오게 되는데
새 페이지가 로드되면서 맨위로 올라가는거같아요
스크롤을 저장하는함수를 만들어야겠죠…?
리스트에서 아이템누르고 뒤로가기를 하면 캐싱해서 스크롤위치는 저장되는데
열분 앱 만들고 싶은데, 혹시 강의 좋은거 추천 받을 수 있을까요?
리액트랑 리액트네이티브랑 많이 다르나요..?
요걸 바꾸는 건 어떨까요?
이것도 해결방법이 되긴 할텐데 뭔가 일이 복잡해지는 느낌이라
근데 원래 인피니트 스크롤의 페이지 상황을 url에 저장하나요..?
인피니트 스크롤의 페이징 여부를 히스토리에 저장해시는 이유가 저도 궁금합니당
내부로직을 짜는 것은 React의 문법을 사용하나 뷰를 만드는 방법은 다르다고 알고 있어요 DOM대신 네이티브 컴포넌트로 css대신 컴포넌트 스타일로 처리하고 나머지는 유사한 느낌입니다
선배님들 취업할 때 테스트 코드를 짜봤다는게 메리트가 있을까요??
분명 면접때 물어볼것이고 실무에서 어떻게 했는지 본인이 잘 설명할수 있다면 충분히 메리트입니다
당연히 있으면 좋죠!
프론트엔드 테스트는 현업에서도 뜨거운 감자라 ㅋㅋ 무조건 물어볼거에요! 정답은 없는데 진짜 해봤다라는 것만 설명할수 있다면 많이 메리트일겁니다
뭔가 해봤다는 건 무조건 메리트이긴 한데, 더해서 단순히 "짜봤다"면 작은 메리트겠지만 테스팅에 대한 고민의 흔적이나 그런 게 느껴지면 큰 메리트일 거 같아요
그렇군요 지금 고민인 부분이 혼자 포트폴리오로 클론코딩할 사이트를 정해서 만들고 그거에 대한 테스트 코드를 짜보는 식으로 포트폴리오를 만들 생각인데 이 방식 괜찮을까요?
ui 레벨의 테스팅은 어떻고 프론트 테스팅은 다른 거에 비해 이런 점이 불편하고 신뢰도 문제가 어떻고 그래서 이런 식의 테스팅을 하는 게 가장 현실적이고 의미있지 않을까 생각했다 막 그런 말들
아!!! 심도있게 고민해봤다는 흔적이 있어야 겠군요 모두 답변 감사합니다!
부트캠프 나오면 어느정도 수준이 되는건가요?
어려운 질문이네요 ㅠㅠ
나오고 안나오고의 차이보다 과정을 어떻게 얼마나 자기것으로 체화했는지가 중요할거같네요
수강한 부트캠프 내용에 따라 다르고 수강자에 따라서도 다르던데..
열정과 노력과 기본 베이스와 적성에 따라 높게는 네카라쿠배 개발자부터 낮게는 중도포기까지 나오는 거 같습니다..
말그대로 그냥 나오기만 한사람이랑
수능때처럼 열심히 하는 사람들이랑 갭이 엄청클거같네요
물론 다 옳으신 말씀이지만 그래도 평균이라는걸 여쭈어보고 싶었습니다.
제주변에는 부트캠프 출신이 없어서요.
개인적인 생각으로 평균이라면 타개발자들과 프로젝트 진행할 정도아닐까싶네요..?
그래서 문뜩 생각난게 그곳을 나오면 음... 어느정도 개발이 가능할까란 궁금증이 생겨서요.
수료까지 했다면 협업 경험이 있고 뭔가 만들어본 경험이 있다 정도?
비전공자도 부트캠프에 좀 있나요?
부트캠프에 수료생들 포트폴리오 보여주지 않나요?
그런거 참고해보세요
비전공자가 거진 80~90퍼에요
와. 그럼 수업 내용이 좋은거네요.
우테코 같은 기업 부트캠프는 전공자가 더 많겠지만
처음 알았네요.
좋다라...
좋나?
비전공자가 80~90퍼인 거랑 부트캠프의 퀄리티는 독립인 거 같습니다..?
비전공자를 협업할정도로 만들정도의 수준이면 좋은거 아닌가요? ㅎㅎ
열심히 했다는 전제로요.
부트캠프마다도 너무 달라서요ㅎㅎ
3개월 가르치는곳 일년가르치는곳 너무 다양하더라고요
움..
부트캠프마다, 수강생마다 다 달라요
부트캠프가 비전공자를 협업할 정도 수준으로 만들어준다 부트캠프 아니어도 성공했을 비전공자가 부트캠프를 통해 협업할 정도 수준에 좀더 빨리 도달했다 전 후자라고 봅니다..
그쵸.
실력적인 평균은 솔직히 어떻게 측정해야할지 모르겠고
연봉 평균은 3300이였던걸로 기억해요
솔직히 부트캠프에서 뭘 해준다기보단 환경만 마련해주고 본인이 하기 나름인 것 같아요
짜요님은 전공자시군요? ㅎㅎ
아 넵 전 전공입니다
부트캠프는 환경을 마련해주고 어느정도 도구를 줘서 초기 진입장벽을 낮춰주기는 하는게 좋은거 같아요
부트캠프라고 등용문은 아니니까요..
그쵸
물론 저는 붙캠을 안해봐서 모르지만...
부트캠프 수강해도 따라가지 못하고 도중에 그만두는 학생들도 많은걸로 알고 있습니다;
네네 그쵸
수료하고 나니 절반 사라졌어요
ㄷㄷ
절반이면 다행이군뇨
저는 그냥 복수전공으로 16년도에 컴공 했었네요
부트캠프도 진짜 잘 알아보고 가셔야..
와
그게 생각보다 비전공자가 처음 입문하기 쉬운 종목은 아닌거 같더라고요.
여기분들은 머리가 좋으셔서.....
음 흔들님 주변에 어떤 분들이 계신지는 모르겠지만
요게 그래도 제가 인지하고있기 딱좋은 예시 같네요.
제 주변 사람들은 비전공이어도 부캠 없이 잘 하더라구요
저희 회사도
그정도면 천재 아닙니까? ㅎㅎ
부트캠프 수료했는데, 저랑 같이 하셨던 분들은 대부분 무리 없이 취업해서 현업 개발자로 일하고 있습니다. 부트캠프마다도 많이 다르고 같은 부트캠프라도 기수마다 많이 다르긴한데 열심히 하는 분위기만 잘 만들어지면 다들 어느정도 공부 잘 하는 듯 합니다!
9명중에 전공 1분이십니다
개발자중에
ㅠㅠ
저도 마찬가지로 비전공이고요
부트캠프 이야기는
아 내용감사합니다.
주기적으로 올라오네용
아 부트캠프이야기는 금지인가요?
헛 아녀아녀
부캠은 원래 방목형이라
본인이 얼마나 하느냐에 따라 달라져서 ..
ㅋㅋㅋㅋㅋ 부캠 없이 잘하고 있는 비전공 개발자 엄청 많아서..
그쵸 ㅋㅋㅋ
맞아요
천재라고 하기는 좀 그렇고 적성에 맞는 사람이라고 해야 될 거 같네요
저도 비전공이지만 학원도 안다니고 부캠없이
2년차까지 왔습니다
사실 뭐둔
뭐든
자기하기 나름인거 같아요
그쵸 그거시 인생인거같슴미다
근데
포폴만들려는 목적이면
ㄱㅊ지않나여
여러가지 케이스가 있는건 잘 알겠습니다. 와닿는부분도 있고 이해가 안가는부분도 있지만 어떤 의미에서 말씀들 주신건지 알겠습니다. 감사합니다.
회사 입장에선 같은 부트캠프 출신이 다 비슷한 포트폴리오 가지고 있으면 오히려 신뢰가 떨어질 것 같아요
그쵸
사실 포폴을 만들기 위해서라기에는 비슷해지는게 많아져서 오히려 경쟁력이 떨어질거 갘아요
물론 포폴도 중요하겠지만 포폴을 만들면서의 과정도 중요하게 생각할거 같아요.
포폴이 목적이면 그 돈 아껴서 마음 맞는 사람 찾아서 사이드플젝 하는게..
ex) 테오의 스프린트
비전공자 싸피 출신입니다. 싸피는 1, 2학기로 나누어 지는데요, 1학기에는 언어나 cs지식을 알려줍니다. 물론 알고리즘 중점이라 추가적으로 상세한 cs는 개인이 공부해야합니다. 여기서 정해진 내용 대로만 하냐 아니면 그 이상을 본인이 더 찾아서 깊게 많이 공부 하냐로 많이 갈립니다. 1학기에 겨우 커리큘럼 따라가기 바쁘던 분들은 알아서 2학기에 눈낮춰 나가거나 다른 직종으로 빠지는 것 같습니다(물론 잘해서 취업 하시는 분들도 계십니다) 2학기가 되면 세번의 프로젝트를 진행하는데 해당 프로젝트마다 얼마나 기여하고 추가적인 공부를 해나가냐에 따라 성장 속도가 크게 다릅니다 첫번째 플젝때는 비슷해보였지만 마지막 플젝때는 좀 차이가 보이죠. 2학기 때에는 특히나 다른 분들 얘기처럼 환경을 만들어 준다는 게 큽니다. 물론 깃, 지라 등 사용하기 때문에 협업 환경을 알아간다는 것도 좋은 점입니다.
암튼 부트캠프 생각하시는 분들께 참고용으로 말씀드리면 개발 경력이 아예 없다면 싸피추천합니다 하지만 언어 하나 이상 다룰 줄 안다면 우테코나 부스트캠프가 더 나을 것 같습니다.
자세한 답변 감사드립니다.
react-hook-form 이용해서 드롭다운 라이브러리 없이 구현하신분 있으실까요? 혹시 register 방식으로 하셨는지, 아니면 control 방식으로 하셨는지.. 궁금합니다.
control 방식으로 구현해서 input은 클릭안되게 하고 value만 넣고 useRef로 위치값 준다음
드롭다운 클릭했을때 value를 setValue로 넣어줬슴당
저번에 watch를 활용해서 하실 수 있다고 하셨는데 레퍼런스를 제가 못찾아서 setValue로 구현헀어요
혹시 css 파일을 한 파일에 다 넣는거랑 컴포넌트 별로 분리하는게 퍼포먼스 적으로 큰 차이가 있나요?
그러시군요.. 혹시 실례가 안된다면 코드를 참고 할 수 있을까요..?
호옹이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
분리가 안 되니까 브라우저가 필요한 거만 나눠서 불러오는 게 안 되지 않으려나요?
사진
사진
음,, 말 이해가 잘 안갑니다
앗 감사합니다.
브라우저가 페이지를 불러올 때 html을 불러온 다음 html이 시키는 대로 css를 불러오는데
그때 css 파일이 쪼개져 있으면 첫 렌더에 불필요한 css 코드는 안 불러올 수 있을 텐데 파일이 하나면 불필요한 css까지 처음에 다 불러오게 되니까 초기렌더가 느려지지 않을까 하는 말이었어요!
예를 들어서 랜딩 페이지 ('/') 로 사용자가 접근했으면 프로필 페이지 ('/profile') 에 필요한 css는 굳이 처음에 안 불러와도 되는데
css 파일을 안 쪼개놓으면 랜딩에 접근했을 때 프로필 페이지에만 필요한 css를 불필요하게 불러올 테니까요
아아ㅏ아ㅏ 이해했습니다
감사합니다!
근데 css는 사실
영향이 별로 없대요
부트스트랩 전체가 24kb였나 70kb였나
저는 불편해서 쪼개서 썻습니다
수정할때 찾기가 더 복잡하더라구요
가변하는 매체에서 포지션 absolute로 같은 자리에 위치시키려고하는데 어떻게하는게 좋을까요?? 뷰포트 인지해서 if문처럼 상황 만들어서 하나하나 대응해야할까요ㅜㅜ
자꾸 위치가 바뀌어서 멘붕입니다 지금...ㅠㅠ
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 이렇게 하면 부모가 relative 인 곳 기준으로 한 가운데 위치하게 되는데 % 바꿔보시면 가능할수도요 ㅎㅎ
부모 relative 없으면 그냥 화면 기준
vw로 너비기쥰으로 잡는건 오떨까요?
next.js에서 블로그를 만들 때 언제 어떤 페이지는 정적, 어떤 페이지는 SSR로 만들면 좋을까요?
재배포 하기 전까지 안바뀌어도 되면 SG, API에 따라서 바뀌려면 SSR로 하면 되지 않을까요?
검색이 되면 좋을 것 같다는 페이지는 SSR로 되면 좋을거 같네요~
콘텐츠 특성에 따라 바뀌지 않을까요
아아 실시간으로 바뀌는 거면 ssr, SG에서 재배포라는 의미가 새로고침을 뜻 하는 게 맞을까요?.?
오늘 next.js 처음 공부하는데 뭔가 그 기준이 알듯 말듯해서 정확히 알고 싶어서 여쭤봤습니다...! 제 자신이 아직 애매해서 어떤 특성에 따라 해야할지 확신을 못 갖겠네요
SSR -> 사용자가 접속할 때 html 생성 SSG -> 빌드할 때 html 생성
그래서 동일 url에 대해 잘 안 바뀌는 페이지는 SSG가 좋고 잘 바뀌는 페이지는 SSR이 좋은 거 같아요 (SSR이 필요하다면)
안녕하세요! 궁금한 부분이 있어 여쭤보고싶은데요! 혹시 코테를 준비하는 겸, 알고리즘이 재밌어서 공부를 하고싶은데 현재 리액트 신입개발자 취준생이라면 JavaScript로 알고리즘 공부하는 것이 현명하다고 볼 수 있을까요?
삭제된 메시지입니다.
보통 C++ or Python이 코테에서는 유리하기 때문에 그 언어들을 코테를 위해서라도 주로 한다고 정보를 들어서 알고리즘 혹 코테에 대해 경험있으신 분의 의견을 듣고싶습니다!
안녕하세요 혹시 antd select 사용하시면서 option들을 drag and drop으로 구현해보신분 계실까요..?
혹시 리액트 폴더구조 관리하실때 인터페이스들 모아놓은 폴더명은 뭐로 정하시나요?
types나 interfaces 많이 사용하시는 것 같은데요
types 로 해요!
사진
react 에서 jsx return 하실 때 특수한 경우에만 화면을 보여주는 경우 문법 어떤거 사용하세요?
이번에 타입스크립트로 리액트 프로젝트를 처음진행해보는데 폴더명결정이 어렵네요. 뭘해도 이름짓는게 제일 어려운거 같아요 ㅋ
포함이 된경우 <></>. 포함이 안된경우에 보여주는 케이스입니다.
저도 types로 하고 있어요
둘다써요!
아 그럼 프로젝트 더 깊어지기 전에 types로 바꿔야 겠네요
&& 으로 하거나 isShow ? <Component/> : null 로 합니다!
이 상황이 맞는지 모르겠지만 if문으로 화면 안보여줘야할때 null을 리턴하고 있습니다. if (화면을 보여주지 않는 경우) return null return (…view)
참고해보시면 좋을 것 같아요-
박정훈님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
'좋은 개발자는 어떻게 도움을 요청하는가'에 관한 글이 있어서 공유드립니다. https://hackernoon.com/how-awesome-engineers-ask-for-help-93bcb2c7dbb7
저 혹시 궁금한게 개발하면서 필요한 기능이 있으면 회사에서 util로 빼는게 아니라 npm 라이브러리로 개발하는 이유가 뭔가용~?
다른 도메인에서도 사용할 수 있게 하기 위함인건가요?
편리성 아닌가요..?
아하아하 관련해서 라이브러리를 프로젝트에 도입해서 관리하는 방법을
따로 부르는 방법이 있을까요?
제가 궁금해서 찾아보고 싶은데 어떤 이름으로 찾아봐야 하는지 궁금합니당
모노레포 사용할 때 많이 사용하는 것 같아요
저 같은 경우 회사 내에서 쓰는 디자인 시스템을 여러 프로젝트에서 공유해서 쓰고 싶어서 모노레포를 구성했었습니다. 처음엔 이걸 모노레포로 구성해서 했습니다. npm 에 굳이 퍼블리싱 하지 않아도, yarn workspace 와 여러 라이브러리의 도움을 받아 import를 해서 사용했는데 음 이게 디렉토리 구조도 점점 깊어지고 파일이 커짐에 따라 조금 불편하다 라는 생각이 들었습니다. 그래서 모노레포가 아닌 서비스별로 레포짓토리를 독립적으로 구성하면서도 통일된 디자인 시스템을 사용하고 싶어 npm 퍼블리싱을 생각해본 적이 있었습니다. 다만 .. 그러다가 기획이 바껴서 각 서비스별로 디자인시스템을 다르게 써야해서 ㅎㅎ 모든게 다 물거품이 됐지만요..
next.js에서 블로그 자기 페이지는 SSG로 만들어도 된다는데 자신이 새로운 글을 추가했을 땐 자기 페이지에 글 하나가 바로 추가 되야하니까 블로그 자기페이지 또한 SSR로 만드는 게 맞는 게 아닐까요?.?
데부님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
아하아하 ㅠㅠ
모노레포의 단점과 단점이 좀
확실하네요~?
혹시 서비스에서 모노레포 구성해서 쓰시는 분들 계신가요?
혹시 flex 관련해서 궁금한게 잇는데 기존에는 a / b / c 로 가운데 b가 센터를 잘 차지햇었는데 이번에 컨텐츠가 오른쪽에 더 생겨서 a / b / c1, c2 로 변경이 되는 페이지가 생겨서 가운데 b가 약간 왼쪽으로 치우쳐져서 나오는데 이거를 맨 왼쪽 a에 2만큼 값을 줘서 가운데를 맞추는 방법 말고는 없는건가요?
기존 A / B / C 그대로 나두고 C 안에 div 2개 생성하면 되지 않나요 ?
c1, c2를 div로 묶어보세요
사진
사진
리액트 라우터v6에서 컴포넌트에 여러개 경로설정할때 첫번째 방식보다는 두번째 방식을 쓰는게 맞는건가요 ?
저는 개인적으로 전자가 오히려 가독성이 더 좋아보이긴 하네용
코드 자체가 비지니스 로직에 큰 영향을 안준다면 어떤 방법이든 좋아보이는데 후자도 좋네요~!
모노 레포 여쭤보자마자 이런 이야기 블로그를 발견했슴당
스택오버플로우에 첫번째 방식은 컴포넌트 불러올때 easy to break 하다는데 뭔말일까요?..
휴먼 미스가 날 수 있는 확률이 높다는 의미 아닐까요?
좀 더 찾아봐야겠네요 ㅠ
삭제된 메시지입니다.
삭제된 메시지입니다.
안녕하세요 질문 좀 드려도 괜찮을까요?? 각 div (요소)마다 다른 css값을 어떻게 동적으로 줄 수 있나요?
아 순간 인터넷이 끊겨서 죄송합니다
어떤 동적을 말하시는거에요...?
div의 left 값을 다른 곳에서 받아오는데 이것을 각 div마다 다르게 지정 해야 하는데 어떻게 특정 값과 특정 div를 매핑해야할지 감이 잘 오지 않습니다 ㅠㅠ
js 말고 css로만 하셔야 하는건가요..?
vue쓰고 있는데
도저히 어떻게 정확히 매핑을 해야할지 감이 안오네요
vue를 이용해야 하나요? 아니면 document.querySelector를 이용해서 처리 할수 있을까요?
그냥 id나 data attr를 추가해서 테이블에 있는 left값에 div을 찾는 방식도 괜찮을것 같구요
아니면 onMount시에 div엘리먼트를 전역 Object나 Array에 넣어두는 방법도 있을 것 같아요
감사합니다 한번 해 보겠습니다
next.js 에서 구글 로그인 구현하신 분들 중 혹시 next-auth 사용하지 않고 구현해보신 분 있으신가요?!
피스메이커 프로도님이 나갔습니다.
프론트에서 값을 보내고 서버에서 2~4분 걸리는 작업을 처리해야합니다. 이 작업이 다 되었는지 알기 위해 프론트에서 어떤 식으로 값을 가져와야 효율적일까요?? 현재까지 생각한 방법은 아래 두 가지인데 다른 방법도 있을까요?? 1. 일정 간격으로 api 요청을한다 2. 소켓 통신을한다
그 두 방법이 일반적이라고 생각합니다 그 외 방법이 현재 있나요?
long polling도 가능하다고 들었는데 말만들어봤던거고 안 해봐서 잘 모르겠네요
샵검색 : #Server send event
이걸로는 해결할수 없을까요?
아하 역시 저 두가지 방법이 일반적이군요. 혹시나 해서 여쭤봤습니다! 주신 키워드들 한번 조사해볼게요 감사합니다 🙇
리액트 쿼리 공식문서보다 설명잘하는 외국 블로그 있었던 것 같은데.. 혹시 어떤 블로그인지 아시는 분 계신가요? 저장해놓은 줄 알았는데 찾을 수가 없네요..
공식문서보다 설명 잘 하는 ㅋㅋㅋ
리액트 쿼리 공식문서
이기기 어려운데
귀한 블로그군요
그거
찾게되시면 공유점 ㅠ
리액트 쿼리 공식문서에
있어요
잠만여
이러
이가 말씀하시는거 맞으시죵
엇 마자요!!!!
이모티콘 감사합니다
넵
이모티콘
https://ui.dev/react-query?from=tanstack&coupon_code=akJ4E 혹시 리액트 쿼리 요 강의 들어보신 분 계신가요? 리액트 쿼리 개발자랑 어떤 교육 업체랑 같이 만든 강의라고 하는데 그래서인지 공식문서에서 홍보배너가 뜨길래 관심이 생겨서요..!!
그냥 광고일뿐인지 진짜 괜찮은지 궁금합니다
메인테이너 블로그였군용
ㅋㅋㅋㅋㅋㅋㅋ 저도 공식문서에 블로그있길래 놀랐어요
아주 잘 되있긴 하더라구용 ㅋㅋㅋ 공식문서에 소개중이라니 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ 공식문서에서 블로그 리다이렉트라니
저도 재밌게.보긴.했어요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
뷰우님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
늦은시간 죄송합니다! async-await에 관련해 질문이 있습니다! async 함수 내부에서 await을 만나면 async 함수 전체를 마이크로 태스크 큐에 넣고 함수 전체를 다시 call stack에 넣지만, 제너레이터에서 yield호출하는 원리와 같이 다음 await까지 async 함수를 계속 실행 한다고 이해하면 됄까요? 제가 의아하는 부분은 await을 만나면 async함수 전체를 마이크로 태스크 큐에 넣는지 궁금합니다! 아니면, await 이하 코드만 마이크로 태스크 큐에 넣는 건가요?? 늦은시간 죄송합니다!
코드를 마이크로 태스크 큐에 넣는다는 게 진짜 그 코드 text를 큐에 넣는다는 말씀이실까요?
면접을 밤 10시 30분이 잡자고 하면 걸러야 하겠죠?
..
유명한 기업인가요?
가고싶은 회사라면 볼듯하지만
저라면 거릅니다
내부구조는 확실치 않은데 async await은 then의 sugar syntax이기 때문에 이하 코드가 마이크로 태스트 큐에 잡히는게 맞는 내부구현이라고 생각합니다.
너무 늦은 시간 이긴한데,, 이유는 들어볼 것 같아요...
사진
혹시 이 기능 활용하나요?
활용을 할지는 nyeong님이 결정할거같아요 저는 써본적없지만
나중에 어떤걸 쓸지 모르겠어요
유명한 곳은 아니고 인원이 10명 이내인 신생 스타트업이예요
밤 10시30분까지 근로시간인가요... ㄷㄷㄷ
걸러야죠 무슨 밤 10시 30분입니까
배려가 너무 없네요
사실은.. 제가 거기 면접보고 들어와 있습니다 변형 기출이었어요
ㅎㅎ
퇴사 준비 중입니다
ㅋㅋ
ㅋㅋㅋㅋㅋㅋ
외국계면 ㅇㅈ 칠려다가
아는사람이야기였네요
화이팅 하십쇼란
ㅋㅋㅋㅋㅋㅋㅋㅋ꙼̈ 기출변형
개웃기다 ㅋㅋㅋㅋㅋㅋㅋ꙼̈
이야기로 바뀌였네용 (머슥)
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
10시 30분은 좀ㅋㅋㅋㅋ
ㅠㅠㅠㅠㅠㅠ 슬퍼
ㅋㅋㅋㅋㅋ 왜 그땐 몰랐을까 싶네요
이모티콘
ㅋㅋㅋㅋㅋㅋ 쥬륵..
웃프네오ㅓ
여기 와서 온갖 가스라이팅, 비상식적인 일정 등등등 모든 겪을 수 있는 걸 다 겪은 것 같아요
다덜 힘내십쇼...ㅎㅎ
삭제된 메시지입니다.
들어와서 보니까
넴.. 다른분을 답장으로해서 삭제했습니다. 😅
대표님이 이에 대한 문제의식이 없더라고요
ㅜㅜ
zzzzzzzzz
ㅜㅜ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
웃픈얘기였군요....
1년짜리 규모의 프로젝트 3개월 만에 하라고 던져놓고 (프엔 저 혼자, 백엔드는 파트타임) 안된다니까 최선을 다하고 있는 거 맞느냐 이거 할 때까지만 야근, 주말 출근 해달라..
등등
야근, 주말 출근에 대한 수당은 따로 있나요 ?
아뇹
전혀 없죠
미안해요
그냥 해줘 였어여
아이구..
제가 그런 회사에 청년내일배움 2년짜리 묶여 있었던 경험이 있어서 그 아픔을 잘 압니다..
그래서 퇴사 한달 뒤에 할거라고 통보하니까 선을 넘는대요 그런 통보는
한달정도면
괜찮지않나요??
뭐지 ㅋㅋㅋ
한달이면 충분한거같은데
충분한 기간인 것 같은데
조정기간이 보통 있다고
사회생활 못해봐서 그렇다면서
와우
가스라이팅 시도 하시도라고요
퇴사 국룰이 한달인데..
전형적인 대답
암튼 찡찡은 여기까지 하겠습니다
궁금했어요 저만 이렇게 생각하는지
하루 빨리 퇴사합시다
런해야져 그런 회사는
zzzzzz
ㅋㅋㅋㅋ한달이면 배려많이 하셨는데..
다몬님 몇년차세요??
1년차예요
헐...너무했다
개발 공부한지는 1년 3개월 됐구
개인적으로 너무 하네요
어느정도 스타트업에서 압박을 줄 수 있다곤 생각하지만
이야기 들어보니 개발을 떠나 일을 할 수 가 없는 곳이네요
ㅜㅜ
고생 많으셨어요
네… 일정 산출 해보니 로그인-회원가입-마이페이지까지 하루만에 테스트 완료하고 프로덕트 수준으로 뽑아내면
가능하더라고요
ㅋㅋ
암튼 퇴사 일정 조율해서 못 박았어요 ㅎㅎ
감사합니당
저는 요즘 고민이 함께하는 사이드 프로젝트 팀원이 인턴에 합격해서
혹시 MobX를 사용할 때 toJS 를 사용해야하는 경우가 있을까요??
스프린트에 많이 참여를 못하는데
이걸 어떻게 잘 이야기해야할지 너무 고민이에요
저도 스프린트 단위가 너무 짧아서 무조건 야근 + 주말에 일 해야 하는데 이것도 회사에서 못하고 집에서 하는데 좀 힘드네요
그로게요ㅠ 베스트는 그 분이 책임감을 가지고 끝까지 해주는 것이겠지만
인턴 적응하는게 본인한테 우선순위일 수 있으니..
이게 저는 두 달 내외로는 해볼만한데 그 이후로도 지속되는 일정이면 번아웃이 오더라고요
열정은 강요하면 안되는것 같아요. 그냥 열정의 크기가 다름을 인정해주는게 필요한것 같아요. 가볍게 참여할 수 있는 방법을 고민해보는 것도 좋을 것 같고 페이드 아웃 할 수 있도록 고민하는 것도 중요하다고 생각합니다. 그건 단순히 책임감으로만 말해서는 안된다고 생각해요
아니 수당을 주면서 그런 말을 하면 모를까…와..너무하네요
저는 10년을 넘게 수당도 없고 근무시간 그게 뭐임? 이런 회사를 다녀서 너무 공감합니다.
MobX로 wrapping된 객체는 기본적으로 Proxy 객체이기 때문입니다
그 부분은 인지를 하고 있는데 이를 사용하는데 문제는 없는데 props로 전달하는 경우들 때문에 toJS를 사용하는 것일까요??
와잣 ! 감사합니다!
전 보통 JSON 변환할 때 사용합니다. Proxy 객체는 직렬화가 안되서요 ㅎㅎ
백엔드와 통신하는 경우에는 변환이 필요하겠네요! 답변 감사합니다.
위로가 되네요.. 힘들게 이직해서 행복하게 다니고 있다가 팀장님이 바뀌고 뭔가 회사분위기가 열정이 강요되는 분위기가 돼서 뭔가 마음이 불편하고 주말에도 기분이 꿀꿀하고 그랬는데 ㅠㅠ
성과를 내기 위해서 압박을 해서 어떻게든 일정을 하루 이틀 줄이고 같은 돈으로 일을 하나라도 더 하게 만드려고 했던 성과주의 방식이 점점 까보니 좋지 않다는 것을 MS에서 증명을 해줬다고 생각합니다. 당연히 성과로 평가를 하지 않는 회사는 없겠지만 일정의 압박이나 태스크의 압박에서 벗어나도록 노력해야될 것 같아요. 이직이 베스트라면 이직을 해야하는 그 시간 동안 어차피 이직할 회사 하는데까지 내가 어디까지 이 문화를 바꿀수 있는지 한번 시도해보자라는 생각으로 "적극적으로 하겠다고 하되 언제까지라고는 절대로 약속하지 않기 그저 해보겠다고만 하기"의 태도만 가지고 야근이나 퇴근 마감의 압박으로부터 내 시간을 지키는 것을 한번 연습해보세요. 위에서 열정이 강요된다면 적어서 우리끼리는 으쌰으쌰 할 수 있는 장치를 많이 마련해보세요. 어떤 회사던 다 나에게 맞춰줄 수는 없으니까 내가 바꿔보는 연습도 필요하다고 생각하고 그냥 이 회사를 좋은 교보재로 생각해보시길 바랍니다.
너무 좋은말씀인 것 같아서 글 잘 보고갑니다.^^ "적극적으로 하겠다고 하되 언제까지라고는 절대로 약속하지 않기 그저 해보겠다고만 하기" 이 부분이 조금 이해가 안되는데 어떤 의미인지 조금만 더 상세하게 설명해주실 수 있으실까요? 토픽을 던진 사람은 아니지만요ㅎ
언제까지를 약속을 하는 순간부터 관리자와 개발자는 약속에 의한 갑-을 관계가 됩니다. 더 이상 일정을 논의하거나 조정을 해보는 대상이 아니게 되요. 물론 성과주의형 관리자와 일할때 한정이지만 그래서 일정에 대해서는 먼저 말하지 않는게 좋습니다. 그런 사람에게는 중간에 듣는 얘기들은 관심없고 약속한 그 날짜에 했느냐 못했느냐가 중요하니까요 해내면 당연한거고 약속한 날짜에 결과가 안 나오면 뭐라할 구실이 생기는 거니까요
PM이나 PO, SM의 역할은 그 일정관리를 해주는 데 있어요. 그런데 그놈의 일정관리를 제대로 배우고 오는 관리자들이 드물다 보니까 그리고 개발의 일정이 개발자 능력에 달려있다는 특수성 때문에 그냥 일정책임을 개발자에게 미뤄두고서는 갑질만 해대서 인풋대시 아웃풋을 많이 내놓는것을 잘하는 관리라고 생각하는 사람들이 너무 많아요
인풋대비*
FE개발자님이 나갔습니다.
그렇기에 언제까지 얼만큼 하겠다는 약속의 형태는 가급적 하지 말아야하고 그렇다고 일정을 보수적으로도 잡지 않아야 합니다. 일정을 보수적으로 잡게 되면 본인에게 손해입니다. 나중에 습관적으로 안된다고 하거나 일정을 미루는 개발자가 될 수 있어요. 그건 그거대로 꼴보기 싫은 개발자 유형이 됩니다.
일정 산출은 원래 안되는 거에요. 그게 정상이구요. 그러니 일정을 약속하는게 아니라 진행사항을 꾸준히 짧게 짧게 보고를 하고 관리자가 속도나 일정을 체크 할 수 있도록 해주는 것이 가장 이상적입니다.
그렇게 하기 위해서는 일정을 역으로 관리자와 가지고 놀아야 하고 먼저 물어보고 최종 일정을 약속하지 않고 중간 보고 날짜를 계속 찍어 주는 요령이 필요합니다.
중간보고는 완료하겠다고 한 일정이 아니니까 그냥 언제든 그때까지 한것을 보고하면 그만이니까요. 미리 약속하지 않고 지금까지 한 것을 그때 공유한다 이 문화를 정착하는게 진짜 중요합니다.
테오가 말씀해주신 관리자와 아닌 관리자를 비교해보면 개발자 입장에서도 아웃풋 차이가 엄청 큽니다. 백번 천번 지당하신 말씀이고 너무나 공감합니다.
삭제된 메시지입니다.
저도 이전 회사에서, 관리자에 의해 일정 산출에 대해 강요받은 기억이 있네요 참 ..
생산성이 좀 확실히 떨어지는거 같더라구요
물론 개개인마다 차이가 있겠지만
그래서 최종적으로는 일정을 정하는 책임을 관리자에게 넘길수 있도록 하는게 중요합니다. 대부분 관리자들은 그걸 하기 싫으니까 개발자에게 떠넘기고 나서 문제가 생기면 개발자 탓을 하는 못난 관리자들이 많아요. 중간보고를 끊임없이 하고 진척도와 속도를 측정해주고 이러한 속도가 계속 근거가 되어야합니다. 그래야 말도 안되는 일정을 결정한 사람의 잘못이 되어야 하는거겠죠
테오님 좋은 말씀 감사합니다.
또 하나의 인사이트를 얻고가네요 감사합니다
이모티콘 와…정말 구구절절 옳은 말씀 뿐이네요
정말 많이 배우고 갑니다 ㅎㅎ
월요일부터 일할 맛 나네요
화요일 아닌가요? ㅜ.ㅜ
ㄷㄷ...
어
오늘 왜 화요일이죠
(주말에도 개발하느라 시간 개념 없어진 사람)
혹시 href 어떻게 발음하시나요..? 에이치알이에프 에이치레프 흐레프
에이치알이에프
흐레프 ㅋㅋ
요
에이치알이에프요 ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋ href 가 hypertext reference 의 줄임말이라더라구요 그래서 에이치레프라고 읽어야 하나 고민중입니다ㅜ
h는 묵음으로
가시죠..
오
레프로 읽겠습니다
한소희가 그렇다면 그런거죠..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
wrap
다들 이거 어떻게 읽으시나요
뢥이요
강의 보면 다들 워랩
으로 읽으셔서
우랩
우랩
워랩
이렇게
저는 랩, 래퍼라고 합니다
맥도날드 스낵랩처럼요
음성메시지
뤱
안소의
혹시 빅데이터 플랫폼 클라이언트 개발하시는분 있으신가요 ! 저희가 컴포넌트별 실시간 데이터를 받아와야하는데 10초 주기로 100개 넘는 컴포넌트 API를 호출해야 하는 상황에서 이게 맞는 건지, 서버단에서 처리할 수 있으면 어떤 방법이 있을지 궁금합니다 ㅜ^ㅠ
서버를 늘려야할까요..
서버를 늘리는 방법밖에는 없을까요 ,,
일단 클라이언트단에서 100개 API를 (더 늘어갈수도있음) 10초에 한번씩 찌르면 페이지가 뻗지 않을까요
웹소켓도 검토해보셨을까요?
브라우저마다 동일 오리진에 대해 요청할 수 있는 네트워크 요청수가 있는데, 6-12개 정도라서 100개 동시 호출하여도 다 받아오는데 시간이 좀 걸맂 않을까 싶기도 하네요..
사진
벨로그 보다가 TCP UDP차이 짤이 너무 이해가 잘 되어서 가져왔습니다.
tcp는 덩크 udp는 3점 슛이군요
그럼 점수가 더 높나요..?
왼손은 거들뿐..
오 그렇군요 !!감사합니다 :)
서버를 늘리기보단
백엔드가 어떻게 이벤트 브로커를 할당하냐에 따라 다른데
nginx나 아팟치등을 프록시로 두어서 활용해서 동시처리성을 높이는 방향으로 아키텍쳐를 잡으시는게 좋아보여용
허브님
그런것들은
AI쪽이면 파이썬 같은거 쓰실텐데 레비뎀큐랑 셀러리 보시면 좋을 듯 합니당
어디서 공부해야할까요
브라우저 요청수도 제한을 알고있기는 한데 막 문서를 보고 안 건 아니여서요
저는 실리콘벨리에서 인턴쉽을 한적이 있어서
굇수셨군여,,
http 개요에 대해서 공부해볼까 고민중인데
뭔가 거리감이 조금 있을거같아서 고민중이에요
혹시 연관이 조금 있을까여..?
그때 링크드인에 계신 한국 데이터 엔지니어님한테
아키텍쳐 관련해서 많이 배웠어요
아하
컴퓨터 네트워크를 봐야하나,,
사실 전공생이긴 한데 cs가 하나도 기억에 안 나네요
http관련해서는 인프런 김영한님 강의 좋습니다
근데 프론트랑 연관이
좀 있나요?
이건 네크워크 통신보단
프론트 백 할것없이
좋아요
아하
아키텍쳐지식이라
혹시
모던 아키텍쳐 같은 원서랑 네크워크 통신 많이 보셔용
Google sandbox 관련한 seo problem
공부해볼까 고민은 했는데
아하
겪어보신분?
감사합니다
http는 프론트랑 관련이라고 말하는건 좀 그렇습니다 결국 프론트와 백의 통신 프로토콜이라
결국 프론트가 알아야되는 내용중에 하나라고 생각해서요
rfc 문서
많이 참고해서 보면
좋더라구용
근데 제 개인적인 관점이지만
리액트 쿼리랑 토큰 인증 공부할때 많이 봣어요
음 근데 그래도 딥하게 알면 좋을 것 같긴 하네요
저도 지금 리액트쿼리 보고있는데
rfc도 한 번 찾아보겠습니당
리액트쿼리가
rfc 5861에대한 구현체에요
캐시 컨트롤이랑 http에 대해 저도 오늘 자기전에 한번 다시 봐야겠네용 ㅎㅎ
(기억이 가물)
저도 제가 알고있는거로만 생각하게되다보니
http를 딥하게 알지 못해서 약간 시야가 좁은 것 같기도 하네여
http랑 쿼리 열심히 공부해봐야겠어요 ㅠ
저도 아직 대학생인지라 ㅜ 많이는 모르는데
제가 지표가 될만한 사람은 아니니 조금 더 찾아보세요~!
캐시나 이런 관점에 대해서 공부하려고 쿼리를 공부 중이었거든요
http는 진짜 얕게 알아서
열심히 봐야겠네요 ㅠ
next js와 노션으로 블로그를 만들고 싶은데 참고할만한 강의나 사이트 있을까요?
구글 플레이 콘솔 관련해서 질문하나만 드리겠습니다! 테스트 완료 후에 테스트 트랙을 삭제할 수 있는 방법이 있을까요? 내부 테스트, 비공개 테스트에 있는 트랙을 삭제하고 싶습니다! 트랙 일시중지는 있는데 트랙 종료나, 트랙 삭제는 안보이네요…;; (버전 관리를 해보라고 권한을 받았는데, 옛날 트랙이 남아있어서 이걸 삭제하고 싶습니다)
html 버튼 태그 관련 질문 있습니다! 버튼은 인라인 요소라고 하는데, 현재 작성해 둔 코드는 버튼이 여러 개의 div를 감싸고 있습니다.. 이걸 수정하려면 버튼을 div로 바꿔서 그 안에 여러 개의 button을 두는 게 맞는 걸까요?? 클릭 이벤트를 최상위에 적용하는 게 좋을 것 같았는데, 어떻게 해야 시맨틱하고 효율적인 코드 작성이 될지 궁금합니다..!
혹시 디자인과 같이 어떻게 사용되고 있는지 볼 수 있는 자료를 공유해 주실 수 있을까요?
앗 네넵..! 리액트로 작성 중인데 코드는 이렇고, 디자인은 이런식으로 동일하게 반복되고 있습니다
사진 2장
svg를 컴포넌트로 생성해서 사용하고 있습니다
button > span + span 또는 button > span + i 태그로 변경할 거 같은데 디자인만 보았을때는 combo 박스 같네요 ?.?
span이 인라인 요소라고 알고 있는데 이 안에 svg를 넣어도 괜찮은 걸까요??
inline요소안에 block요소가 들어가면 안됩니당
감사합니다ㅠㅠ두 개의 svg를 감싸서 디자인 하는 방법은 div 태그 안에 버튼 태그 2개를 넣는 방법이 가장 좋을까요?? 버튼 태그 1개는 span을 감싸고, 1개는 svg를 감싸서요..! 고민이 돼서 여쭤 봅니다ㅠㅠ
<div className={styles.buttons}> <button>title</button> <ArrowUpIcon /> <ArrowUpIcon /> </div>
앗 제가 콤보 박스 의미를 잘 몰랐는데, 선택 될 때마다 저 svg가 증가/감소를 나타냅니다! 선택지가 열리거나 하지 않아요:)
이렇게만 마크업해도 원하는걸 다 할 수 있을것 같은데...
그럼 div에 클릭 이벤트를 넣는 거 말씀하시는 거 맞나요?? 전체에 클릭 이벤트를 먹이고 싶어서 고민했습니다ㅠ
여기서 styles.buttons 는 어떤 스타일인가욤? 먼가 아이콘 두개를 세로로 정렬하는 느낌일거 같긴 한데..
네 맞습니다!
근데 위로 가는 아이콘 클릭이랑 아래로 가는 아이콘 클릭의 동작이 같은거에요?!
하나의 버튼으로 묶여도 되는..?
네 토글 버튼으로 클릭될 때마다 정렬 기준만 바뀌는 겁니다
사진
body안에 엘리먼트를 최대 두개만 사용해서 todo list를 만들고자합니다. 이때 안에 필요한 엘리먼트들을 하나하나 createElement로 만들면 코드가 너무길어지고 같은 코드가 반복될거같은데 더 좋은 방법이있을까요? 바닐라로 진행합니다
문자열 템플릿 써서 inserAdjacentHTML로 서치해보셔용
오 감사합니다!
사진
이런식도 되는군요
https://chanto11.tistory.com/51
insertAdjacentHTML이 성능상으로도 좋고 보안상에서도 innerHTML보다 좋군요
원준님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
달팽이똥님이 들어왔습니다.
흠 아니네요 둘다 똑같이 xss에 취약하고
결국 createElement가 노동력은 많이들지만
제일 나을까요
원준님! 달팽이똥님 반갑습니다 어서오세요 :)
안녕하세요!!! 동료분 추천으로 알게돼서 들어오게 되었습니다 :)
이모티콘
혹시 인터뷰 일정은, 일주일 이내 면접자 기준으로 조정해도 상관없겠죠? 큰 무리가 있지 않는 이상?
네네
면접이 이번주 금요일로 잡혔는데, 차주 월요일로 조정 가능하냐고 사측에 다시 물어봤거든요
아하 ㅎ 좋은 결과 있으시길 🙂
조정해도 크게 영향 없겠죠? ㅋㅋㅋ
플러스될 건 없지만 딱히 마이너스될 것도 없을 거 같아요 타당한 이유가 있다면
회사에서 일정이 안되면 안된다 할것이고 웬만하면 해주지 않을까 싶은데요? 보통 큰 회사들은 안해주긴 하던데 물어봐서 뭐 이미지 깎아먹거나 그럴일을 절대 없어보입니당
근데 저쪽도 사람이 하는 일이다 보니 그 과정에서 예의라든가 태도라든가 그런 걸 잘 챙겨야 하겠지만
안된다면 그쪽에서 안된다고 말해주실거에요
그걸로 불이익 준다면 오히려 안가는게...
오! 참된 동료분을 두셨군요 ㅋㅋ 감사합니다! 이곳은 프론트엔드나 개발 기타 궁금한것들에 대해 묻고 답변하면서 함께 성장하고자 하는 공간입니다~ 언제든 편하게 글 남겨주세요 :)
혹시 이방에 웹에이전시에서 개발자로 근무하시는분도 계신가욥??
지금은 아니지만 웹 에이전시에서 개발자로 근무했었습니다.
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!!
반갑습니다아
제가 에러를 찾다가 깃허브 이슈를 발견했는데 이해가 안가서 질문드립니다
해결법이 있는데 이해가 잘 가지않는데 쉽게좀 말씀해주실분있나요 ? ㅠ
혹시 프론트엔드와 백앤드가 samesite이며, response header에 set-cookie가 됐음에도 불구하고, 브라우저에 쿠키가 들어오지 못하는 증상에 대해 겪여보신 분 계실까요?
http https확이해보셨어요?
네 ..양쪽다 모두 https이고 Secure; HttpOnly; SameSite=Lax 모두 되어있는데 ㅠ,ㅠ
public suffix 이면 안된다는게 혹시 도메인이 .com 이면 쿠키를 제한한다는 것인지도 여쭙고 싶습니다 ㅠㅠ
음악듣는 개발자님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
보통 폰트 관리는 프로젝트에 파일로 관리 vs 웹 폰트 사용 중 무얼 더 선호하시는 편인가요?
내부cdn
안녕하세요? 보통 프런트엔드 개발자는 성과인정을 어떻게 받으시나요?
프론트엔드 작품과 코드를 검토해서?
보통 주 업무가 데이터시각화, 퍼블리셔가 없다면 디자인 가이드를 토대로 퍼블리싱이 많을 것 같은데 이런 것들을 어떻게 성과로 연결시킬지 좀 어렵네요 .
이쁘고 인터랙티브한 화면을 만들었다? -> 만들었다가 끝이고 이것을 수치화해야 성과로 이어질 수 있을 것 같은데 어렵습니다
일정내에 버그없이 동작하는 서비스를 만들었다면 고성과라고 해야할텐데 개발 성과를 과연 수치화 할 수 있는 건가? 싶긴하네요
사내에서 성과 측정에 대한 가이드 문서 같은게 있나요?
가장 성과로 이야기하기 쉬운건 (기술적 난이도가 쉽단 거 X) 화면 렌더링 속도를 몇 초에서 몇 초로 얼마나 더 개선했냐 요런거 아닐까요? 특히 메인페이지 로딩 속도 중요하니까요
정해진 템플릿은 없고, 연봉협상 때 & 제 이력서에 나타내고 싶어서 질문을 드렸습니다 ㅎ
아 이것도 많이 고민했었습니다. ㅎ 혹시 속도 측정은 라이트하우스로 하시나요?
아... 어렵네요;; 커밋수? ㅎ
엇 커밋수 ㅋㅋㅋ
속도는 컨텐츠가 없을 수록 느리고 서버 이슈도 많은데다가 처음부터 잘못짜서 느린것을 정상화시키기만해도 90점 이상인거라 ㅠ
네 라이트하우스 특히 퍼포먼스 부분 보긴 했어요
답변 감사드립니다
성과를 수치적으로 이야기하기가 젤 어려운거 같긴 해요... 아니면 레거시 개선은 어떨까요?
라이트하우스 개선 경험른 중요하다고 생각해요 숫자가 높아지면 뿌듯하기도 하고 ㅎ
회사마다 다르겠지만 저희 회사 인사팀에서 말씀하시기로는 "수치화 된 성과만이 인사고과에 반영된다" 라고 하시네요. 레거시 개선 정말 많이했고, 서비스 인터랙티브하게 참 노력을 많이했는데 "수치화" 앞에서 현타가 좀 오네요 ㅎ
헐... 그렇다면 커밋수와 코드라인 수로
?! 개발 성과를 수치로만 ..?
이 분노를 이직준비에 쏟아야겠습니다
jira 태스크 개수!
jira 테스크 개수, 커밋수, 코드라인 수 좋네요.. 이력서에는 올리기 힘들겠죠..?! ㅎㅎ
못올릴것은 없다고 생각합니다 ㅋㅋ 굳이 다들 그런걸로 올리지 않아서 그렇지 ㅎ
그렇군요 ㅎㅎ 답변 감사합니다 ㅎ
사내에 프런트 시니어개발자가 없어서 이런얘기할곳이 있다는게 정말 감사하게 느껴지네요
연봉마냥 다른 회사에서는 얼마나 평균 커밋인지를 모르니까요 ㅎ
감사합니다 :)
수치로 증명할 수 있는 성과에 대해 얘기하다보니 궁금해졌는데요, 개발한 기능이 추가된 후 기획자 분이 구매 전환율이 얼마만큼 올랐다라고 분석해주신 결과도 개발자가 이력서에 본인의 성과로 쓸 수 있는걸까요? 사실 그게 그런 성과를 낼거라고 생각하고 아이디어를 낸 건 기획자다보니 그런것도 개발자의 성과로 쓸 수 있는지 궁금해지네요
프로젝트의 성과는 다 쓸 수 있다고 생각합니다. 카카오 네이버 배민 토스 결국 서비스가 잘 나가야 개발자도 잘나보이니까요 ㅎ
그것을 잘 수행할수 있도록 만들었고 핵심 과제를 내가 맡아서 할 수 있게 한 것은 중요하죠
감사합니다!!
라이트하우스 성능 수치 말고 web vital 의 fcp 요런것도 라이트하우스와 연관이 있겠지만, 독단적으로 web vital을 단축시키면 좋은 성과일가요 ??
근데 그 수치화된 데이터를 인사팀에서 이해 하나요? 🤔🤔
그런데 궁금한게 태스크 갯수가 많은게 어떤 부분에서 좋은겅가요???
일을 많이 해냈다는 부분에서 좋은건가요?? 경험이 없다보니 감이 잘 안잡히네용
전혀이해안할거같은데요
예시로 바이낸스 아시죠?
제가 경험한 웹 인터페이스 중에 가장 무거운 웹 플랫폼이 바이낸스
라이트하우스 측면에선 빵점에 가까울 정도로 무거운데
사진
바이낸스는 Fucking heavy 합니다
어쩌다 보니 저랑 업무가 많이 비슷한것 같아요. 저는 데이터 시각화 할때 어떤방식으로 대용량 데이터를 관리했는지, 랜더링 속도를 최적화 했는지를 중점으로 수치화를 했습니다.
경우의 수가 많아서 이 분야에서 그 이상의 가치를 만들어도 그에 걸맞는 평가를 받을지 모르겠네요
망고님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
깃브랜치 전략에 관한 화해 개발블로그입니다. 오늘 나온 따근따근한 글이에요. git flow를 비롯해 여러브랜치 전략에 대한 비교와 장단점을 잘 정리했더라구요. 프론트엔드와 직접 관련은 없지만 꼭 필요한 내용이라 공유드립니다 http://blog.hwahae.co.kr/all/tech/tech-tech/9507/
아 오늘 테스터 빌드 때문에
8시간 날렸네요
ios 개발자들에게 존경을 보냅니다
첫페이지 컨텐츠 로딩 시간이 20초인데도 들어가야할민한 페이지인가요?? ㄷㄷ
신난 어피치님 어서오세요 반갑습니다 :)
저기바이낸스라고
이모티콘 어마무시한 플랫폼입네다
뭐로만들었는지 저도궁금한데
저렇게 렉이걸리는 웹시스템은저도 처음
근데제가 본 웹중에서 가장 잘 만들어짐
ㅋㅋㅋㅋㅋㅋㅋ
일단 인터랙션부터,,
경례하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
피스메이커 프로도님이 나갔습니다.
음악듣는 개발자님이 나갔습니다.
nextjs 12.2 https://nextjs.org/blog/next-12-2 We're laying the foundation for the future of Next.js with 12.2: Middleware (Stable): Dynamic routing for your entire application. On-Demand ISR (Stable): Update content without redeploying. Edge API Routes (Experimental): High performance API endpoints. Edge SSR (Experimental): Server-render your app, at the Edge. SWC Plugins (Experimental): Extend compilation with your own plugins. Improvements to next/image: Including a new next/future/image component. Update today by running npm i next@latest.
리액트 쿼리 useQuery 쓰시는분들중에 post 메서드 호출하시는분 계신가요?
get post 말씀하시는 건가요???
usemutation 사용해야 하지 않나요 ??!
혹시 그 zoom으로 한달동안 하는 그건가요?
post로 update delete 같은거 할때 useMutation 사용하면 되요
혹시 유니티 WebGL로 빌드 안하고 server build했는데 그 화면을 웹에 띄울 수 있나요?
보통 웹에 띄울 때 webgl 쓰지 않나요??
그렇긴한데 혹시 다른 방법이 있나 싶어서 여쭤봤습니다 ㅠㅠ 다른 방식은 검색해도 잘 안나와서,,
음... 제가 알기론 없는 걸로 알아요
정확하진 않아요😅😅
넵 감사합니다!
useQuery 는 선언적으로 라이브러리가 자기 마음대로 호출하도록 되어 있어서 idempotent한 동작만 (get만) 해야 하고, 명령적인 동작은 useMutation 을 써야 된다고 하더라구요
post메소드여도 idempotent 하게 설계되어 있다면 문제 없을 거 같긴 해요
엄지척척님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 반갑습니다!!
질문이 있어 들어왔습니다
안녕하세요 프엔님~!! 반갑습니다 :)
감사합니다 ㅎㅎ
질문혹시 드려도 될까요??
네~
급 입장에 바로 질문드리네요 ㅠㅠ
아
다름이 아니라. 혹시
bindingcomplete를 해결해보신적 있나요? 저는 bindingcomplete가 나면 alert창을 띄우고싶은데 계속 안되네요 ㅠㅠ
$('#jqxGrid').on('bindingcomplete',function(event){ 이거를 쓰지 않고 공통.js에서 함수로 쓰고싶은데 아무리 검색해도 나오지 않습니다...
js 안에서 함수처럼, bindingcomplete: function(event){})
이렇게 쓰고싶거든요 근데 해결점이 안보여요ㅜㅜㅜ
사진
이렇게 한번 해보시면 어떨까요?
헐 도전해보겠습니다!!!!!
근데 이게
제가 말씀드렸던 .on("bindingcompelete")와 같을까요??
원하시는 최종적인 동작 형태가 어떻게 되나요?
상상하시는 코드 모양?
아아 예를들어서
function fn_create(){ pagesize:20, bindingcomplete:function(){} }
Post인데 데이터 가져오는 api에서 useQuery 써보신분 있나했어요
이런식으로!
일단은 해보겠습니다 용태님! 감사합니다.
.env 에서 환경변수를 관리할 때 특정 환경변수는 각 로컬 환경에서 공유되어야 할 때가 있을 것 같아요. 그럴 땐 어떻게 공유가 가능할까요??
제가 잘 못사용해서 그러는건지 잘 안됩니다ㅜㅜ
.env.copy 로 생성하면 되실 것 같아요:)
.env.local 도 가능합니다 :)
보통 .env.prod랑 .env.local
ㅇ렇게 두고 쓰지 않나용?
혹시 html에서 이미지 설정할 때 크게 두가지로 나눠서 코딩하는데요, 하나는 img태그, 또 하나는 background-image로 코딩해요. 평소에 그냥 감으로..? 큰 기준없이 코딩하는데, 혹시 둘을 사용하는 기준이 있으신가요?
최대한 의미에 맞게 사용
감사합니다~!!
혹시
GDC 가입하고 싶은데
지금 가입하고 계신 분 있나요?
*GDG
사진
디자이너분께서 grid system기반으로 작업한다고 하셔서 이렇게 주셨는데 이걸 직접 구현해야하나요?!
피그마 사용하신다면 컨트롤+쉬프트+4 하셔서 끌 수 있을거에요
디자인은 잘 모르지만 가이드로 잡아놓은걸거에요
그리드를 보고 px영역을 미리 잡으라고 준거 아닐까요~?
마이크로 프론트엔드 사용해보신 분이 계실까요??? 회사에서 JSP와 리액트를 조합해서 사용하다가 점차적으로 리액트로 완벽하게 전환을 하려고 하는데 어떻게 붙일 수 있을지 감이 잘 안잡혀서요!
작년에 이 영상 봤던 기억이나네요! https://www.youtube.com/watch?v=DHPeeEvDbdo
안녕하세요 혹시 클릭 이벤트 발생 시, api호출하여 api 결과값을 use state에 저장하고 바로 그것을 이용하여 호출 하려 하니 동기적으로 작동을 안해서 undefined라 문제가 생기는 것 같은데 이런 경우는 어떻게 다들 해결하실까요?
사진
콘솔에서 undefined가 찍힙니다. 그전 비동기 함수안에서 setState 해주는데 그게 작동안해서 그 뒤에 함수 호출시 불러오는데 에러가 있는데, 보통 한 함수안에서 비동기 여러개를 호출하는데, 순서가 중요해서 한 함수안의 값을 가져와서 다시 재호출하려면 보통 어떤식으로 하시는지 여쭤봐도 될까요 ㅜ
getHospitalId 내부에서 setState를 호출중인건가요..?
네 맞습니다.
useEffect에서 값이 바뀔 때 실행하도록.. 합니다 setState가 비동기라
useEffect(()=>{ getPresinedUrl(hostpital) },[hostpital])
버튼 클릭시 -> id 가져오는 api호출함수 ( 그 값을 상태로 저장하는 부분 useEffect로 빼기), 그 후 버튼클릭안의 2번째 함수에서는 저 부분을 사용해서 호출 이 방식을 말씀하시는게 맞을까요?
그래서 거기도 await를 붙여서 동기적으로 하게끔해줘도 ㅜㅜ 못 받아오는 사태가 발생하네요
await 로는 안 돼요 setState는
마이크로 프론트엔드
점진적 도입하실려면
lerna 나 yarn berry 같은 지식도
많이 필요할텐데
아니면 getHopsitalId return 값으로 id를 반환해주고 받아서 할 수도 있을듯용
lerna 는 이제 죽어버려서 딴거를 추천..\
와우 썸넬보소
terbo repo도 있구
한번 찾아보시는걸 추천드려용
아 근데 lerna 왜 죽은거죠?
개발자분이 번아웃와서라고 알고있어요
한 함수내에서 쭉~~ 하는게 아니라 기능별로 쪼개려니.. id받아오는 것, 그것으로 다시 재호출하는 과정을 이벤트 하나 발생시 하려다 보니
프로미스로 다 받아놓고 한번에 setState하시면 되지 않을까요
제가 옛날에 썻던 글인데
지금 다시보니 코드는 좀 구리지만
react query안쓰시면 이렇게 하시는게 좋아보여용
비동기가 아니라 동기여도 스코프가 달라서 안돼요
애초에 작업이 일어나는 순서의 문제가 아니라
하나의 렌더 phase 에서는 state 변경 이후의 state에 접근할 수가 없어요
레르나 nwrl가 소유권 가져가서 부활(?)했습니다
포유님이 말씀하신 대로 이렇게 하는 게 제일 좋지 않을까 싶어요
무슨 말씀이신지 이해가 안 갑니다. 한번에 setState를 해주는 과정이 아니라서요 ㅜ 첫번째 함수 호출에서 setState하고 그걸 이용해서 두번째 함수를 그 state를 활용해서 다시 setState해줘야 하는상황입니다'
프로미스 체이닝으로 해주시면 될거같은데요
그렇게 하면 결국 한 함수내에서 체이닝으로 다해결해야되서요 ㅜㅜ 나누고 싶었던터라..나누게 되면 이전 비동기 호출의 결과 값을 가져와야되서 그런것 같습니다
답변 감사합니다!
안녕하세요~ 간편로그인 관련 질문 드리려고 합니다. 혹시 인스타그램 api로 로그인 구현 알아보신 분 있으신가요?? Meta 디벨로퍼사이트에서는 instagram api를 앱 로그인에 사용하지 말라고 하는거 같아서요 ..! 인스타 간편로그인이 있는 서비스가 있는지도 잘 생각이 안나서 여쭙니다!
답변 감사합니다!
보통 페북 로그인이었던거 같긴하네요 ㅋㅋ
맞아요 페북 로그인을 권장하고 인스타를 사용할 시 앱 검수에서 거절한다고 나와있는데….. 인스타 간편로그인이 하나도 없었나?? 언젠가 본거같긴 한데?? 라는 생각이 들어서 여쭈었습니다
감사합니다! 프로미스 체이닝으로 한 함수내에서 id 반환해서 한번에 반환하는 방식을 말씀하시는 걸까요?
const response = await getHositalId(ho~); await getPresignedUrl(response.id); 라던가 … 첫번째 함수에서 setState를 하지말고 그값을 return 해주면 될거 가탕요
async function onClick(){ const hospitalId = await getHospital(name); const presignedUrl = await getPresignedUrl(hospitalId); setHospitalId(hospitalId); setPresignedUrl(presignedUrl); } useEffect(()=>{ console.log(hospitalId,presignedUrl); },[hospitalId,presignedUrl]);
아하~!~ 감사합니다!
혹시 nextjs 에서 jwt 사용하시는분들 token관리 쿠키로 하시나요? 1. 로그인되면 리스폰스로 온 토큰을 쿠키에 넣어줌 2. getServersideProps 에서 ctx객체로 쿠키에있는 토큰 가져와서 axios header에 넣어주는 로직을 구현하려고하는데 로컬에서는 잘되는데 배포만하면 안되네요 ㅠㅠㅇ
원래는 localstorage에 관리하려다가 ssr에서는 브라우저에 접근을 못해서 쿠키로바꿧는데 또 안되네요..
혹시 카카오톡 브라우저에서 클립보드 복사 기능 구현해보신 분 계신가요?_? 구현을 위해 clipboard api를 사용했는데요. https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText 카톡 브라우저 내에서 복사가 되지 않고 있습니다ㅠㅠ(https 환경입니다!)
저거 사용하시면 안먹혀요!
텍스트 area 생성해서 거기에 넣은 값을 클립보드에 넣는 방식 사용해야하는데 레퍼런스 찾아서 전달드릴게용
앗, 혹시 execCommand() 말씀해주시는걸까요!
Tryit Editor v3.7 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
이방식이용
좀 예전 방식이긴한데 거의 모든 브라우저에서 다 먹히더라구요
전 이방식 애용합니당
사진
엇 이 친구도 clipboard API를 이용하는거 아닌가용?
엇 이게 아니네요
잠시만용 ㅋㅋㅋ 죄송합니당
다른 얘기지만 hola 서비스 페이지 어제 보았는데 프로필 사진보니 생각나네요
@Hola ㅜㅜ
사진
여기가 a태그나 버튼이 아니라서… 새창으로 열기가 안됩니다..
네 이게 맞아용 ㅋㅋㅋ
앟ㅎㅎ 감사합니다
넹.. 요거 인지하구 있어요 얼른 바꿀게욤..
현업에 치어서…
네 그렇군여 ㅠㅠ deprecated된 API라 별로 쓰고싶지 않았는데..
ㅠㅠ 넹...
아니면 카카오 브라우저 구분가능하니 구분하셔서 사용하셔도되요!
submit 하면 axios로 데이터 받아와서 useState에 저장해주고 콘솔에서 보여주려고 하는데요 처음 submit 하면 초기값이 나오고 한번더 submit 해야 저장된 데이터가 나오는데 한번에 나오게 하는 방법 없을까요 ?
사진 2장
이렇게 나와요
이것도 고려해볼 수 있겠네요! 감사드려요ㅎㅎ
혹시 면접에서 페어프로그래밍 해보신 분 계신가요?
라이브 코테랑은 다른 걸까요?
제가 가서 면접을 보는데 노트북을 들고 오라고 하고, 메일에는 페어프로그래밍이라고 써있어요 🤔
그럼 면접관 분이랑 무언가 협업을 잠시 하는건가요?!
어………….. 그런 거 같기도 하고…
저도 이런 걸 처음 해봐서 다른 경우가 있었나 싶어서 궁금해서 여쭤봤어요
onSubmit 함수가 끝나면서 setName 때문에 리렌더링이 일어나서 onSubmit 안에서의 name은 초기값이 맞는 거 같아여 !
와인앱은 어떤 건가요? 와인을 파는건가요? 아니면 커뮤니티 관련된 어플인가요?
onSubmit 안에서 name을 사용하고싶다면 res.data.username을 사용하고 요청이 끝났을 때 name을 사용하면 useState의 name을 사용하면 될 거 같습니다 !
저도잘...
holaworld.io
에서 확인해보세ㅛㅇ
name state 는 다음번에 render할 때부터 사용할 수 있고 onSubmit 에서는 변경될 name 에 접근할 수가 없어요 res.data.username 을 그대로 이용하시면 돼요!
Webshare api쓰시면 크롬까지 이제 지원되고 광범위하게 많이 지원되더라구요
이게 리액트 철학이 예를 들어서 구슬이 두 개 있는 주머니 (state)에 구슬을 하나 더 넣으면 (setState) 내 구슬이 세 개가 되는 아니라 내 주머니는 그대로 있고 주머니에 구슬이 세 개 있는 평행우주가 저기 어딘가에 새로 생기는 거라서
뭔가 있어보이네요
불변성을 이렇게 설명하시다니
변경 이후의 state 에 접근하는 건 문법적으로도 불가능하고 실제로도 리액트가 좋아하는 코드는 아닐 거라고 생각해요!
제가 이해력이 좀 후달려서 이해가 잘 안가네요 ㅠㅠ
제가 생각하기에 submit이 될때 axios로 데이터를 받아오는 코드는 실행은 되지만 데이터 로딩하는데 시간이 걸리고 그 다음 코드인 console.log가 실행되서
사진
처음 submit 했을시 state 초기값이 나오는것 같은데 맞나요 ?
이게 클래스 컴포넌트일때는 어거지로 어떻게 할 수 있었는데 함수 컴포넌트에서는 아예 안되는거같더라고요
음 아뇨 순서의 문제보다는
axios가 비동기로 동작해서 그런게 아닌건가요 ?
사진
이렇게 금방 끝나는 setState를 1초나 뒤에 출력해도 after 에 2가 아니라 1이 나와요
왜 그런건가요 ??
setName을 해도, onSubmit 함수가 바라보고 있는 name 이 변경되는 게 아니라
name 이 변경된 상태에서 함수 컴포넌트가 다시 실행되면서 onSubmit이 새로 생기고
그 새로 생기는 onSubmit 이 바라보는 name 은 setName 한 이후의 name이 돼요
이걸 정확하게 설명드리려면 실행컨텍스트랑 스코프 얘기가 나와야 되고..
아.. 좀더 공부해보겠습니다 감사합니다 ㅠ
흠
useEffect에
대해찾아보세용
리액트의 최대 장점이면서도 처음에 적응하기 가장 어려운 부분이라고 생각해요
리액트의 원리와 훅에 대해서도 공부해보셔용
SetTimeOut에 콜백으로 던져준 함수가 기억하는 count는 setCount 되기 전의 count를 기억해서 그런거 아닌가여
useEffect에서 데이터 가져오는게 아니고 form에서 submit 될때 데이터를 가져오는거라서요 ..
넵넵 맞아여 달팽이님 설명이 좀더 정확한거같네요
useEffect 를 통해서 저걸 해결하는 방법이 있긴 해요 아마 허브님은 그거 말씀하신 거 같은데
개인적으로는 그리 좋은 방법은 아니지 않나 생각해요
물론 useEffect 로 해결하는 게 맞는 상황도 있을거긴 하지만요
넵 ㅠㅠ 제가 뭐 배우면 이거가지고 여러가지 뻘짓들 많이해서요
맞아요 !! 짜요님 감사합니다..ㅠㅠ 리팩하기 이 이펙트 땜에 좀 힘들더라구요 비동기가 순차적인게 필요할때
저는 생각했던게 axios = 비동기 / console.log = 동기 따라서 console.log 가 먼저 실행되고 그 다음 aixos가 실행되기 때문에 처음 submit 했을때 state의 초기값을 console 하게 되서 그런건줄 알았는데 동기 비동기의 문제가 아니라는 말씀이신거죠 ??
덕히님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
실행컨텍스트에 대해서 공부해봐야겠네요
아 코드 다시 보니까 동기 비동기 문제도 있긴 하네요 ㅋㅋㅋㅋㅋㅋㅋ 근데 axios.get 에 await 걸어서 axios.get 다 완료되고 setName 다 완료되고 나서 console.log 실행되게 만드셔도 똑같이 안될거예요
안녕하세요 덕히님 반갑습니다. 어서오세요. ㅎ
안녕하세요 테오님!! 영광(?) 입니다!!!
감사합니다 :) ㅎ 저도 영광이네요~~ ㅎ
clipboard-polyfill 을 사용하셔야할지두여.. ㅎㅎ
네.. async await 로 axios await 했는데도 저러더라구요
console.log를 프로미스 체이닝으로 비동기로 해봤는데도 안되는거 보니 말씀하신 리액트 동작 구조 ? 같은 문제인것 같네요
넵넵 정상적인 방법으로는 어떻게 해도 변경 이후 state에는 접근할 수가 없는 걸로 알고 있어요!
알려주셔서 감사합니다 !!
사진
여담이지만 비정상적인 방법으로는 가능하긴 합니다 :)
setTimeout 으로 하는건 정말 안 좋아요 ㅠ 1초 뒤에 바뀌었을거라는 보장이 없기 때문에..
컴퓨터 cpu가 느리다던가 계산 연산이 많아서 1초 뒤에도 안 바뀌어져 있다면 쟤는 기존거랑 같이 나올거에요
근데 카운터 예시에서 after 에도 1이 나오는데 웹 페이지에서는 클릭할떄마다 +1씩 잘 렌더링되는데
맞아요 완전 쓰레기코드
"되긴 하는데 하면 안되는" 것들 중 하나죠
setState를 추적하고 싶다면 보통 useEffect 이용해서 state를 의존성 배열 추가해서 console.log 찍으시면 될 것 같아요~
좀 헷갈리는 부분이 onClick 이벤트로 +1을 해도 콘솔창에는 여전히 1인데 화면에는 2가 나오네요
콘솔이 바뀐 state를 찍는게 아니라서 그렇습니다.
useEffect(()=> { console.log(count) }.[count]) 하시면 아마 찍힐거에요
콘솔창에 1이 찍히는 건 이전 state를 바라보고 있어서 그래요
브라우저 화면은 항상 최신 state에 의해서 그려지구요
콘솔에 이전걸로 찍히고 나서 state가 변경 되고 리렌더링 되어서 화면이 바뀝니더
아하 .. 이런부분은 브라우저 동작 구조에 대해서 공부해야하나요 ?
앗 아뇨 리액트요
컴포넌트 라이프사이클 공부하시면 될 거 같아요
저걸 설명하는 괜찮은 글이 있나 찾아봤는데 딱히 마음에 드는 글이 없군요
감사합니다 라이프사이클 찾아보겠습니다 ㅠㅠ
사진
참고가될진 모르겠지먼 라이브러리별 동작차이입니다
감사합니다 !
안녕하세요 고민이 있어서 질문드립니다. 리액트 공부중인 취준생인데 강의나 책들에서 다루는 내용이 최신이 아닌 경우가 많아 학습에 어려움을 느낍니다. 예를들어 리액트 라우트 같은 경우 현재 6버전인데 강의와 책 모두 대부분 5버전을 사용하고 있습니다. 꼭 리액트 라우터가 아니더라도 최신 버전으로 공식문서로 스스로 학습을 하는게 좋을까요? 아니면 구버전으로 학습을 마치고 버전업에 따른 차이점들을 따로 학습하는게 좋을까요? 아무래도 공식문서를 보고 공부하면 강의나 책보다는 학습 효율이 떨어져서 질문드립니다.
생태계를 제외하더라도 리액트 자체만으로도 버전 18을 다룬 강의가 없어서 어려움을 느끼고 있습니다.. ㅠㅠ
보통 버전에 따른 차이가 대동소이하니 학습이 용이한 방법을 취하시면 될듯
저는 예제가 책 버전과 현재 버전이 달라 동작이 제대로 안되는 경우가 많으면 그냥 예제를 실행을 안해보고 내용만 읽고 이런 기능이 어떻게 동작하는구나라고 생각하며 넘어갑니다. 책을 완독하면 현재버전 공식문서를 보면서 튜토리얼을 진행해 봅니다
예제 안되는거에 스트레스 받는게 너무 싫어서요..
저는 책보단 공식문서 먼저 보고 공식문서가 부족하거나 궁금한게 생겼을때 학습자료를 보는 편입니다
근데 궁금한게 여기 분들 중에 프로덕션에 리액트 18 많이들 쓰시나요? 제 주변엔 아직까지 라이브러리 호환성을 이유로 17버전 쓰며 지켜보는 분위기여서...
백오피스 새로 개발 중인데 18써욥
온라인강의는 그래도 업데이트가 잘 되는 것 같더라구요 초반에는 온라인강의랑 책 같은걸로 먼저 좀 쉽게 접근한 다음에 지식이 쌓이면 공식문서로 터득해도 좋은 것 같아요
저는 지금 시점에선 딱히 공부 안하셔도 되지 않을까 싶어요
너무 구버전 막 클래스컴포넌트 이건 좀 유의미하겠지만 라이브러리 하나 버전 최신꺼 아닌 게 면접에서 마이너스 요소가 되지는 않을 거 같다고 생각해요
물론 지금 시점 기준이고 나중가서 주류가 되면 그땐 해야겠지만요!
그리고 어디까지나 효율을 생각했을 때 그런 거지, 학습비용이 동일하다면 저도 최신버전 공부를 추천드리긴 해요
저도 동의합니다 그래서 지금 시점엔 학습자료 많은 17버전으로 공부하시고 18에서 새로 추가되는 것들만 따로 보셔도 되지 않을까 싶네요
새로 개발하는건 18로 시작하는것 같습니다
책이나 강의를 최신화해주는 강의는 많지 않아요 버전업데이트에 관련된 부분은 버전을 다운그레이드 해서 배우시던지 직접 마이그레이션 하셔야할듯
다들 emotion이나 styled-components 로 스타일 컴포넌트를 만드는 기준이 있으실까요? 너무 스타일드 컴포넌트를 많이 만드는 것 보다 class를 섞어가면서 작성하는게 더 가독성이 좋아보여서 고민중입니다 ㅠ
class를 안 섞고 싹다 styled 로 구현합니다
책은 체계를 만들어주는데 도움이 되지만 말씀하신대로 최신코드를 익히는기에는 애로사항이 있습니다 기본적으로 책은 아무리 빨라도 1~2년 정도 늦으니까요. 지금은 취준생이라 체계가 먼저 잡혀야겠지만 현업으로 오게되면 트렌드를 계속 따라가긴 해야 합니다. 책으로 익히는 것은 전체적인 그림이고 실전은 전부 공식문서로 트렌드를 따라간다는 생각으로 둘 다 병행해보시길 바랍니다. 책은 입문만 도와줄뿐 현업에 있다보면 결국 공식문서를 보는 능력이 필요하다라구요
혹시, 며칠전에 공유하주신 링크 하나 찾고 있는데, 못찾고 있어서 메시지 남겨요ㅠㅠ디스코드에서도 찾고 있는데 못 찾고 있네요ㅠㅠ 어느 분의 취업 성공기 글이었고, 내용 중에 과제 테스트에서 테스트 코드를 추가하니 통과했다 라는 이야기가 담긴 글인데, 혹시 어느 링크인지 아시는분 있을까요?ㅠㅠ
이거인가요?
아 그러면 css 설정이 필요한 마크업 태그 대부분은 다 styled로 구현하시나요? 그렇다면 그렇게 작성하시는 이유도 알 수 있을까요?
넹! 맞아요!!! 감사합니다
그냥 jsx 코드에 className 들어가 있는 거보다 styled 로 되어 있는 게 개인적으로는 가독성이 더 좋더라구요! css-in-js 의 큰 장점 중 하나인 리팩토링이 편하다는 점도 있구요
<div className="form-item-wrapper"> vs <FormItemWrapper>
전 밑에 께 더 읽기 편했어요
근데 초보여서 그런지
프론트에서 테스트가 큰 의미가 있는지 모르겠어요. UI랑 애니메이션 같은게 있어서
테스트코드 작성하면 이런거까지 테스트 할 수 있나요?
유튜브에서 예제 따라해본게 전부입니당,,,
아하 그렇군요 답변 감사합니다!!
혹시 현업에 계신 프론트엔드 개발자 선배님들은 어떤식으로 프론트엔드 최신 트렌드와 양질의 정보를 습득하시나요? 제가 아는 양질의 컨텐츠는 테오님 블로그랑 여기 톡방뿐인데… 성장하기 위해서 더 많은 정보를 얻고 싶네요 ㅠ
아래 사진과 같이 위치시키려면 어떻게 해야할까요 ㅠㅠ ?
현없에 없는 개발자지만,,,
사진
자식요소를 또 하나의 div로 래핑하고 그 div에 padding이랑 margin을 줘서 위치시킬수도 있고 position:absolute를 이용해서도 배치할 수 있을 것 같아요
메주 뉴스레터 보내주는데 저도 열심히 읽지는 않지만.. 공유해봅니다
오옹 감사해용~
현재 postiion으로 left 50%, transform: translate (-50%, 0)을 줬는데 bottom 값을 어떻ㄱ ㅔ줘야할 지 모르겠습니다 ㅠㅠ
bottom:100%주면
부모 바로 아래 붙을텐데 그 상태에서 translate로
올려주면 될거같은데요?
%주면 부모기준이에용
와우 ㅎㅎ 감사합니다 ㅠㅠ
해결 하셨나여>
?
네네 ㅎㅎ 자식한테 left : 50%, bottom : 0, translate(-50%, 50%)
줘서 해결했습니다 ㅎㅎ
오 좋네요
고생하셨어용
감사합니다 ㅎㅎ 좋은 밤 되세요 !
이모티콘
책이 좋은점은
정말 싸게 코드 잘짜는 사람의 코드를 단시간에 볼 수 있단 점인것 같네용
ㅋㅋㅋㅋㅋㅋㅋㅋ 경험치 빨기...
ㅋㅋㅋㅋㅋㅋ
ㄹㅇㄹㅇ ㅋㅋ
UI나 애니메이션 같은걸 테스트 코드로 테스트하면 변경사항이 잦아서 테스트 코드도 계속 업데이트 해야해서 시간이 너무 많이 소모될 것 같아요... 테스트 하기 어려울 것 같기도 하고.. 백엔드보단 테스트 코드를 활용하기 어려운 것 같긴 하지만 그래도 있으면 든든한 부분이 있습니다
컴포넌트 단위의 로직검증엔 비용이 크게 들지 않아서 유용하다는 말씀이실까요...?
컴포넌트 단위든 페이지 단위든 최대한 변하지 않을 로직 위주로 테스트하고자 하면 테스트 코드 작성 비용을 아끼면서 나중에 코드를 리팩토링할 때 좀 더 안심하고 수정할 수 있더라구요!
아
로직을 수정할때도 테스트코드를 재사용 할 수 있네요
그런 측면에서는 리팩토링할 때에도 도움이 될거같아요
오,,,,
감사합니당
네네 개인적으로는 리팩토링할때 제일 유용하다고 느낍니다👍👍
보통 수습기간에는 어떤것을 요구하나요???? 어떤것을 잘 해내야 수습기간을 잘 지나갈 수 있을까요?
나쁜 짓을 안 하면 됩니다
웬만한 회사들에게 수습기간은 그냥 면접때 가면쓰고 들어온 사기꾼들을 법적 손해 없이 내보내기 위한 방어 수단인 느낌이었어요
가면쓰고 들어온 사기꾼이란건 어떤 꾼들 일까요???
들어와서 CTO님 자리 비우셨을 때 cto님 컴퓨터로 drop database하고 스냅샷 날려버리고 나가려는 경쟁사 스파이..?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 좀 과장한 거긴 한데 어차피 회사쪽에서도 면접에서 심사숙고해서 걸러서 합격시킨거라
특별히 조심할 거 없이 그냥 정말 큰 잘못만 안하면 되는 거 같았어요
물론 회바회긴 하지만 정상적인 회사들은요!
그저 많이 친해지도록 노력하세요~ 억지로 맞추라는게 아니라 사교적인 시간을 많이 보내도록 해보세요 친해지는게 제일 중요합니다 ㅎ
핏이 안맞아서 전환되지 못한 분들도
더럿 본거같아서
저도 기술적으론 당연히 그분들보다 부족하기 때문에 두루두루 지내는게 좋은걱 같아용~~
맞아요 두루두루 잘 지내기!
팀에 잘 적응하기??
너무 뻔한 소리같지만 저게 진짠거 같아요. 단순히 회사만 입사자를 평가하는 게 아니라 입사자도 팀에 적응하려 해보다가 너무 자기랑 안 맞다 싶으면 다른 곳 갈 수 있는게 수습기간이고요!
여러 답변 감사합니다!!!!!
친화력 모드로 접근 해볼게요 ㅎㅎㅎ 감사합니다!!
사진
사진
혹시 제가 리액트 쿼리는 익숙치 않아서
Error 타입을 줘도 잘 못잡는데 아시는 분 계신가요?
리액트쿼리 문제가 아니라 error 가 unknown type 인데 error.request 에 접근해서 그런 거 아닌가요?
후움후움
사진
타입 단언을 해줬는데
LOG ———————————————— LOG undefined LOG undefined LOG undefined LOG ————————————————
이런 상황이 발생해서 혹시 fetch 사용하실 때 핸들링 하시는 방법 아시는 분 계신가요?
보통 defaultQuery 옵션 사용하는 걸로 알아요
네네 그걸로 defaultQuery 에서 핸들러를 추가해서 해주긴 하더라구요
삭제된 메시지입니다.
아하 그 질문이셨군요
아하 이해했습니다
뭔가 fetch가 400을 throw 를 안 한다고 했던 거 같기도 하고 잘 모르겠네요
어 맞아요
비즈니스 로직이 리액트 쿼리를 탈 수 있도록 구현했는데
제가 에러에 대해서는 콘솔만 찍어보고
Throw를 안해서 queryCache가 오류를 못잡았던거에요
개발 초기라 살았네요
맞아요 fetch는 에러응답 400이든 500이든 응답이 내려오기만 하면 에러 안던집니다~
네트워크 에러인 경우에만 reject 돼요!
답변 감사합니다! 책으로 학습후에 제가 뭘 알고 뭘 모르는지 알게 됐을 때 공식문서 참조하겠습니다!
사진
에러를 콘솔로 찍으면 status 가 보이는데
error.status 로 접근할려니 error 가 unknown이라서 타입 단언을 해줘야할 것 같은데
혹시 fetch에서 이런 형태 타입을 뭐라고 하나요..?
if(!(error instanceof Error)) throw error; ...
이런식으로 좁혀서 사용하시면 될 것 같아요~
axios쓰시면
if(!(error instanceof AxiosError)) throw error; ...
AxiosError로 던져졌을테니 AxiosError로 타입 좁혀주시면 될 것 같습니다
엄지척척님이 나갔습니다.
초롱초롱 튜브님이 나갔습니다.
deno + preact => no build typescript ssr full stack framwork = fresh framework https://youtu.be/4boXExbbGCk
앞으로 나올 기대되는 새로운 CSS 스펙들!! - 이미 scroll snap은 사용되고 있어요 🙂 https://engineering.udacity.com/the-4-upcoming-css-features-im-most-excited-for-24b66293edfa?source=email-e012841b24ec-1656523707513-digest.reader-23c8405c11b4-24b66293edfa----0-98------------------f03c04bd_15ac_4580_94aa_227b2887451a-1
오오옭....
사진
우왕
안녕하세요 디자이너분이 제공해준 figma에서 css가 전부 absolute로 나오는데, 이대로 복붙했을 때 그대로 구현이 안되잖아요? 다들 어떻게 구현하시나요?
저는 취준생인데 듣기로는 피그마에 나와있는 css코드를 백프로 복붙하면 그대로 안나온다고해서 제경우에는 그대로 복붙안하고 참고할 것들만 참고하여서 최대한 똑같이 만들었던거같아요.
너무 좋은 링크 공유 감사합니다
자바스크립트로 애먹으면서 구현하던 것들이 css로 된다니 대박이네요..
삭제된 메시지입니다.
디자인 내용보고 직접 구현하는 편입니다! 컬러나 박스 쉐도우 같은 것들은 복사하구용!!
222222222
저도요 ㅎㅎ
피그마가 명확하게 수치가 전달되는 건 좋지만
그대로 복붙하기는 한계점이 보이긴 하더라고요
블로그를 구현한거 봤는데 번들사이즈 진짜 작더라구요..
프론트로 취업하려면 백엔드쪽 지식도 필수인가요?
노드랑 익스프레스 이용해서 서버까지 만들어서 만들어보려는데 시간낭비일까요?
백엔드도 알면 좋은데 프론트를 아는 게 더 중요할거같아요~
백엔드는 협업할 수 있을 정도만 알면 된다는 주의입니다
사진
사진
검색 구현중인데.. 쿼리파라미터 라우팅 이렇게 하는거 아닌가요?ㅜㅜ
크게 어렵지 않은 부분같은데 ㅜ 예시를 못찾겠어서요..ㅜ선배님들
감사합니닷
쿼리파라미터로 라우팅이 되나요?
path 로만 되는걸로 알고있었는데
리액트에서는 쿼리파라미터를 거의 사용할 필요가 없어졌죠
내부 상태값으로 조정하면 돼서
뿌롱이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요
아
사진
사진
쿼리는 라우트에서 따로 해줄건 없네요
ㅜ없는걸 찾으니 없었다.
님들아
컴퓨터
뭐가좋을까요
맥이요
묻따않 맥
비쌈..
그가격이면 성능 2배는 좋은거 사는뎅..
ㅋㅋㅋㅋ
비싼건 맞는데 쓸 기간 생각하면 만족도 최상입니다
맥이
개발처음 시작하는사람들에게
좋습니다
게임을 거의 못하는거도 개발에 올인할수있게하는 장점입니다
맥이
좋은이유는용?
개발 환경설정할때
성능이 안좋아서 다른짓 몬하게 막아주는 수갑역할?
윈도우보다 맥이 훨씬 좋아요
폰트나 그런거용?
잘하는 사람은 윈도우든 맥이든 상관이 없는데
아뇨
환경설정..
일단 내구성은 확실히 좋은 듯 합니다 ㅎㅎ 저는 맥 쓴지 10년정도 됐는데 전보다 확실히 한 번 사면 오래쓰는 것 같아요. 요새 다른 기기들이 어떤지를 잘 모르겠지만
터미널 되는게 젤 메리트인거 같습니다
저는 환경설정하고 하는거 윈도우가 더 확실하고 좋던데.. ㅎㅎ
맥북에어는
물론 윈도우로 시작해서 그런것같긴합니다
에어면
넉넉합니다
2개 모니터 연결 안되서 별루
검색하면 맥이 디폴트로 나와서..
진짜요?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
맥을 별로 안좋아하시는거같은데 그냥 조립식 사시죠ㅋㅋ
그러게요 걍 조립쓰시면 될듯 ㅎㅎ
옙 ㅜ
조립식 맞추고 우분투 쓰면 같은 가격에 성능 두배 나오긴 하겠네요
맥이 성능이 안좋다는 말은 처음 봐요
ㅎㅎㅎ
다 써봣는데 윈도우는 터미널 안되서 불편하고 우분투는 카톡 지원 안해주고,, 해서 결국 맥으로 넘어왔습니다
결정했습니당
걍 둘다 사야지
ㅎㅎㅎ
윈도우 쓰면 wsl 을 써야되는게 휴
어차피 데탑이랑 놋북 둘다 필요하니
이거 잔버그가 좀 있어서 버렸습니다 ㅠㅠ
레노버 노트북 있긴한데 망치갔다가 때리부시고싶네용
맞아요 한숨
IOS개발 할일 아니면
맥을 쓸 핑요가 없다ㅜ해서
고민중
오픈채팅에 차단기능이 있네요
역시 카카오 좋다
뿌롱이님이 나갔습니다.
삭제된 메시지입니다.
이방에 트롤러 처음 본듯
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅜㅜ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
create-react-native-app 할 때 "✖ Something when wrong installing JavaScript dependencies. Check your yarn logs. Continuing to initialize the app. ⚠️ Something went wrong running `pod install` in the `ios` directory. Continuing with initializing the project, you can debug this afterwards."
위 에러가 발생하는데 아무리 검색해도 해결 방법을 찾지 못하겠어요 ㅜ
혹시 해당 오류 해결법 아시는 선배님 계실까요 ?
pod 가 설치되어있을까요?
이것도 시도해보셨을까용?
사진
pod은 설치되어있구요 !
여기 주소도 이미 시도해봤습니다
혹시 npx @react-native-community/cli doctor
이 명령어 실행한번 해보시겠어요?
ios 바깥쪽 경로에서요!
터미널 열고 바로 입력하면 될까요 ?
사진
이렇게 나옵니다 !
음…ㅜ 저도 잘 아는게아니라 저 사진만 봐서는 잘 모르겠네요ㅠㅜ
그래도 감사드립니다
혹시
create-react-native-app
이 명령 실행하는 부분에서 ls를 찍어보면 그곳에 package.json이 있는지 한번 확인해보셔도 좋을것같아요! 저도 예전에 리네 시작할때 계속 에러났었는데 package.json때문이었거든용
리액트 모듈 not found 컴포넌트 경로 , 이름 모두 정확한대도 계속 저 오류가 나오는 건 무슨 문제일까요?
안드로이드sdk 설정이 안되었다고 나오는거 아닌가요...?
사진
sdk설정이랑
xcode appstore에서 더시 설치해보셔요~
혹시 개발용으로 지금 싱글모니터 쓰고 있는데 하나 더 사서 듀얼로 맞추려고 하는데 추천해주실 만한 브랜드나 제품 있으실까요..?
대충 블루라이트 들어가 있는 걸로 27인치로 사려고 생각 중인데 뭔가 놓치고 있는 중요한 포인트가 있을까 해서요!
모니터 비율..?
해상도?
27인치면 델이 보증3년이라 괜찮은것 같아요
샵검색 : #주연테크 v28ue
주연테크 꽤 괜찮은 것 같던데요
아 찌찌뽕
저 이거 쓰고 있는데 좀 뿌옇고 색상 표현력이 떨어져요
거치대도 별로고 돈 좀 더 쓰셔서 델 사시는게 좋을 것 같아요
구매 고민 중이었는데 그렇군요..정보 감사해요!
저는 막눈이라 주연테크도 좋더라구요.. 4k처음이면 주연테크도 좋은 거 같습니다…!
맥북에 아주좋아요
저도 주연테크 저 제품 쓰고있는데 가성비로는 이만한게 없는것같아요. 4k모니터 처음 쓰는데 개안한기분 ㅎㅎ
샵검색 : #v28ue-m
근데 이런저런 잔버그같은거 때문에 스트레스 받을때가 가끔있어서 여유있다면 대기업 제품쓰는것도 추천드려요 ㅎ..
이 업그레이드 모델은 거치대 나쁘지않습니다
앗 사실 거치대는 암 쓸 거 같긴 해요 ㅋㅋㅋㅋ
다들 감사합니다..! 주연테크 한번 찾아볼게요 가성비 진짜 좋다더라구요
CRNA 사용 중이신 선배님들 !! 혹시 Xcode verison을 여쭤봐도 될까요 ??
사진
주연테크 모니터에 암은 저걸 추천 하네요
노마드코더 인스타보면 개발환경세팅 자랑 볼 수 있어요~
32인치 한대써도 목아파요 ㅜㅜ
4k가 다르긴 한가보군요..!
32인치 + 27인치 듀얼로 쓰고 싶은데
32인치 한대만 써도 목이 아플까요?
32인치 사용중인데 한눈에 안들어와서 좀 불편해요
이렇게쓰는데 기가막히게 좋습니다
목 아픈건 느껴본적없는거같아요
메인을 32인치로 하시고 사이드에 27인치 두신건가요?
넵넵
혹시 제품 어떤거 쓰시는지 알 수 있을까용?!
하나는 삼성 27 커브드인데 제품명은 기억이안나고
32는 이거써요
아하
감사합니다!!
안녕하세요 : ) 질문이 있습니다. 리액트에서 styled-component로 div 태그로 StyledContainer라는 컴포넌트로 만들었습니다. 여기에서 컴포넌트가 사라질 때 background-color를 변경하는 커스텀 훅- useChangeColor(인자는 color를 받습니다.)-을 만들고 싶은데 StyledContainer 요소를 어떻게 잡으면 될까요..?! ref 로 써서 잡아야할 것 같은데 방안이 생각나지 않습니다 ㅠㅠ
저도 삼성 27 커브드랑 27gn650 사용 중인데 되게 비슷하시네요..ㅋㅋㅋ
컴포넌트가 어느 시점에서 사라지나요?
버튼 누르는 순간에 컴포넌트 색이 바뀌면서 사라집니다 !
그럼 버튼이 눌러지는 시점에 색이 변경될테고StyledContainer에 props로 컬러를 전달해주면 해결되지않을까요~?
네 ! 그 방안도 생각했는데 커스텀 훅 실습중이라서요 ..! ㅠㅠ 🥲 ref를 넘겨주는 방법이 있을까요..?!
커스텀 훅에 ref를 넘겨주는건 커스텀 훅에 인자로 넘겨주면 해결될 것 같아요
이모티콘 감사합니다!!
또는 훅 안에 ref를 만들고 return 해줘서 해당 컴포넌트에 전달하는 것도 가능할 것 같네요
서버에서 리프레시 토큰을 http only로 쿠키에 저장해주면 프론트에서는 백엔드에 요청할 때 자동으로 리프레시 토큰이 쿠키에 담아서 요청이 보내지나요?
본래 해더에 넣어주거나 credential true 넣어주면 쿠키가 해더에 실려서 가는걸로 알아요
http only랑은 별개라고 생각합니다! http only는 말그대로 js에서 접근 못하게하는거라 res로 쿠키 대이터 받아와서 document.cookie로 넣을 수도 있는데 요청에 넣어주는건 위에 과정이라 별개로 생각합니다,,,!
쿠키 설정이 http only로 되어있는데 요청에서 넣어줄 수는 있는건가요?
브라우저에 저장되어있으면 요청에 딸려 들어가게 작업을 해주면 딸려 들어가는걸로 알고 있습니다!
아하 그렇군요.. 다시 찾아봐야겠네요 ㅠㅠ 답변 감사합니다!
깃에서 자꾸 Unversioned file이 생겼다고 뜨는데, 제가 추가한적도 없는 '기존파일명 2.js' 이런게 생기네요;
webgl을 통해 유니티 프로그램을 띄웠는데 다른페이지로 이동하고 component도 사라졌는데 유니티 프로그램이 종료 안되는 현상이 있더라고요. 혹시 해결 방법 아시는 분이 있을까요??
react-unity-webgl 라이브러리 이용해서 띄웠습니다!
없어질 때 useEffect return에서 quitUnityInstance 해주면 어떤가요
Node.js에서 파일 객체를 버퍼로 변환하려면 어떻게 해야할까요? 프론트의 Input type=file에서 받아온 객체인데 스트림은 createReadStram으로 가져올 수 있더라구요 이 스트림을 가지고 버퍼를 만들어야하는걸까요?
프론트 질문인지는 모르겠지만.. nodejs 아시는 분 계시면 답변 부탁드립니다🙏
앱개발로 프로그래밍하는 법이 익숙해질 때 웹개발 배우면 문법만 배우면 될정도로 개발언어 넘어가는게 자유로울까요?
quitUnityInstace라는 함수가 있나용,,
생태계가 다른 동네다 보니 아주 편하진 않지만 그렇다고 아주 어렵지도 않을 거 같아요
버퍼로 변환하려고 하는 이유가 있을까요?
저흰 좀 예전 버전이라 그런가 import { UnityContext } from 'react-unity-webgl'; 이걸로 만드는데 있는거 같은데요.. 흠
sweetalert 써보신분 계신가여??
저용
뭐하나 여쭤봐도될까요 ?? ㅠㅠㅠ
넵
sharp라는 라이브러리를 써서 이미지를 크롭하려고 하는데 sharp 생성자가 이미지를 buffer로 받더라구요
sweetalert로 prompt 가져왔는데 prompt로 입력한 값 어떻게 가져오나요 ??
변수 저장하고
그걸 넣으시면 될거같아요
저도 지금 안써본기능이라
문서봐야할거같은데
지금 밖이네요 ㅠㅠ
한번 해보겠습니다 !!
감사합니다ㅎㅎ
혹시 리액트 테스팅 라이브러리에서 act가 동작을 안하는 경우는 무엇일까요??? 별다른 비동기 없이 setState 하는데... 반영이 되지 않아서 곤란해 하고 있습니다.
useLocation 이나 useSearchParams를 사용해보세요
userEvent 나 fireEvent를 사용하면 내부적으로 act가 사용되고 있기 때문에 굳이 안해줘도 되는걸로 알고 있는데
상태 업데이트가 안되나요 ?
act 랑 state 가 변하지 않는거랑은 다른 이야기 같아요!!..
음 <Route path=“/student?a=1 /> <Route path=“/student?b=2 /> 이게 되냐는 질문이긴 했어요
톡게시판 '투표 취소': 지금 뭐가 제일 어려운가요? 중복투표가능 항목추가가능 합니다 가능한 많은 추가 의견 부탁드려요!
보통 저런 훅으로 query string을 변경시키는걸로 아는데 처음부터 저렇게 되는지는 시도를 해봐야 될 것 같네요. 근데 저렇게 해야되는 경우가 있나요 ?
ㄷㄷㄷ님이 그렇게 구현하셔서 저도 여쭤본거였어요
커스텀 훅만 테스트 중이라서 액트만 사용했습니다!
코드르 봐야 알 것 같네요! 보여주시면 저도 찾아보겠습니다 :)
setState 같은 경우 액트 안에서 사용하라고 봤는데... 변화가 없습니다 ㅠㅠ
지금 밖이라서 집 가서 바로 올려보겠습니다! 감사합니다!!
아하 저는 보통 query string을 저런 훅을 이용해서 React 상태로서 사용을 해서 저렇게는 사용되는지 처음 알았네요 :)
아마 안되는거..일걸요..?
보통은 act(() => result.current.onChangeState(newState)); 요론식으로 하긴 하는데 onChangeState 함수내부에 setState(newState); 이런 로직이 들어갈 것 같습니다.
맞습니다.. 그렇게 진행했는데… 흠… 또 다른 커스텀훅에서는 되는 것 같아서 제 로직을 다시 살펴보겠습니다. 답변 감사합니다!
혹시
사이드 프로젝트 같이하실 분
여기서 찾아도 될까요 ?
@유용태 (teo.yu) 방장님 혹시 사이드 프로젝트 같이하실 분 여기서 찾아도 될까요 ?
그럼요~ 얼마든지요!
감사합니다 !
사이드 프로젝트 같이하실 웹 프론트엔드 한 분 구해요 프로젝트 기간은 한 달 정도 잡고 있습니다. 주제는 헬스 기록 쪽이고 헬스에 관심 많으면 정말 재밌게 프로젝트를 진행할 수 있을 거 같아요 현재 디자인 2명 프론트 1명 백엔드 1명 이렇게 있습니다. 저희가 제작할 것은 모바일 우선 반응형 웹입니다. 이것을 만들어서 ReactNative에 웹 뷰로 걸어놓고 어플로도 출시할 예정입니다. 조금 더 자세한 사항은 개인톡으로 주시면 알려드리겠습니다.
리액트네이티브 못해도 괜찮나요
넵 그것은 제가 해요!
삭제된 메시지입니다.
톡아이디 주실수있나용
RN은 걱정 안 하셔도 됩니다:)
넵
잠시만요
여기로 주세요~
혹시 프로젝트 범위가 어느정도인지 여쭤봐도 될까요?
저 관심있는데 마감됐을까요?
아 죄송합니다. 한 분 구해서 같이하기 어려울 거 같습니다 ㅠㅠ
아 네 알겠습니다~
webpack 공부할만한 강의나 자료 있을까요? 빌드하려는데 webpack 설정을 몰라서 애먹고 있네요 ㅠ
공식문서 보시거나 cra eject 해서 하나씩 조사해보는게 제일 나은것 같아요
https://joshua1988.github.io/webpack-guide/ 이거 있는데 막 엄청 자세히까진 아니어서..
그냥 구글링이 제일 나을지두
굳모닝! 아침에 출근하면서 또는 잠깐의 여우 시간동안 ㅎ 보시기에 재밌는 내용일거 같아서요! 공유 드려요 https://youtu.be/fq9EhygVYvU
rollup 번들링시 cjs랑 esm 형태 둘다로 번들링하는걸 종종보는데 왜 cjs까지 번들링하는걸까요???
번들러 안 쓰고 그냥 가져다 쓰는 사람이나 nodejs 사용할때는 esm으로 안 하는 경우도 많으니 거기서 갖다 쓰라고 그런거 아닐까요
사진
퐈이팅..
뙇.. 라이언 하르방이 있을 줄 알았는뎅
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!!
안녕하세요 엄지척 튜브님!! 반갑습니다 :)
맞아요. nodejs 떄문입니다
질문이 있어서 찾아왔습니다 모달을 history에 연결해서 뒤로가기를하면 모달이 꺼지는 구현을 했는데 새로고침을 하면 기존 url을 가더라도 404페이지로 가는데 혹시 새로고침시 모달을 띄운상태로 할수있는방법이있을까요?
모달과 history 연결한 방식은 pushState를 사용했습니다
modal을 띄울 수 있는 url이 있나요? 최초 진입시 location의 주소를 파악해서 모달인 URL이라면 모달을 띄우는 식으로 구현을 하셔야 합니다
오랜만에 글을 쓰네요. 전에 스프린트 온라인에서 설명을 했던 내용을 글로 정리해봤습니다. 사이트로 팀 프로젝트를 진행을 할때 태스크 관리나 설계를 할때 도움이 되기를 바랍니다. https://velog.io/@teo/behavior-driven-development-schema-driven-development
디자인시스템 컴포넌트라면 esm만 있어도 충분하겠지요?..
그럴겁니다. 테스트 쪽을 node로 돌릴 경우도 있긴 하지만 packages 타입을 module로 해서 사용하면 cjs없어도 문제 없을 거에요 .... (아마도?.. ;;)
답변감사합니다^^
모달을 띄울수있는 url은 실제로 존재하지 않고 임의로 /modal 이런식으로 구현했습니다
url을 이용하실게 아니시라면 sessionStorage등을 이용해서 마지막 상태는 보관하고 있어서 띄워주는 방법도 생각해볼 수 있습니다.
sessionStorage는 새로고침을 할때에는 데이터를 보관해주니까요
실제 url만 없고 pushState로 url만 조작해서 /modal이라면 on 없다면 off로 규현했는데 이것도 세션스토리지를 사용해야할까요? https://tyle.io/blog/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%82%AC%EC%9A%A9%EC%84%B1-%EC%A6%9D%EB%8C%80%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%ED%9E%88%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%B4%80%EB%A6%AC?loc=ko 딱 이방식입니다!
눈물 흘리는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
눈물 흘리는 제이지님 반갑습니다 :)
요 링크 마지막 업데이트가 5월 6일이네요 🤣
혹시 웹에서 pdf 뷰어 구현해보신 분 계신가요?
맥 미리보기 앱처럼 줌으로 확대/축소 자연스럽게 되게 만들고 싶은데 딱히 마음에 드는 게 안 보이네요ㅜㅜ
Antd 테이블에 있는 데이터를 엑셀 파일로 뽑아내려하는데 혹시 해보신분 있을까요?? 좋은 라이브러리가 있다면 추천도 부탁드립니다
antd 테이블에 있는 데이터가 어딘가에 자스 객체로 저장되어 있을 거고, 객체를 엑셀로 뽑아주는 라이브러리는 쉽게 찾으실 수 있을 거 같아요
어드민이라 별 생각 없이 xlsx 썼었는데 번들 사이즈가 어마어마했던 기억이
감사합니당!!
혹시 다들 셀링페이지 (랜딩페이지) 개발할 때 어떻게 시간을 아끼고 계신지 여쭤봐도될까요? 셀링페이지는 코드의 수명주기가 짧은데 항상 개발할 때마다 가장 골칫거리인 것 같아요. 이미지는 s3에 일일이 업로드해줘야하지, 반응형 코드도 일일이 넣어야하지… 노가다를 줄일 수 있게하기 위하여 figma의 hands-off기능 혹은 디자인을 바로 리액트 컴포넌트로 전환해주는 기능같은걸 사용해보신 분 계실까요?
제가 게을러서 오늘 한번 업뎃을 해야겠네요 ㅎ
framer쪽에서 그런 기능을 봤던것 같은데 일부가 아니라 홈페이지 단위는 아직 정교한게 부족해서 어쩔 수 없는 것 같아요 마크다운과 미리 제작된 컴포넌트를 이용해서 처리하는 경우도 더러 봤지만 힘을 주려면 만드는 것은 어쩔수 없다고 생각해요. 보통 그래서 그런 페이지들은 외주를 준다고 생각합니다ㅠ
아직은 그렇군요 ㅠㅠ
/modal 이 떴을때 해당 url을 반응해줄 수 있는게 아니라면 #hash 나 ? 를 사용해서 없는 페이지가 나오지 않도록 하고 새로고침시 맨 처음 진입에도 url를 보고 판단해서 해당 로직을 실행시킬수 있도록 하시면 될것 같네요
마크다운 제법 그럴싸하게 작성한 사이트 공유가능하신분 계실까요?
그냥 작성하니까.. 너무 딱딱한 느낌이라 ㄷ ㄷ ㄷ
웹 접근성을 잘 고려해서 만들어진 사이트는 항공 관련 사이트라더라고요.. 확실하진않지만
네네. 사용자가 다양하고 외국은 우리나라보다 접근성에서 엄격하니까요 ㅜ.ㅜ..
아마 법으로 정해졌을거에요
@여의도개발
우리나라도 공공서비스는 장애인 차별법때문에
접근성 잘지켜져 있습니다
그거 안지키면 벌금내야해요
그쵸 최근에 ssg에서도 백오피스에서 대체텍스트 운영자들이 꼭 넣을 수 있게 하고 있다고 테크 블로그글 본거같아요
웹 표준이랑 접근성 맞출려고
+ 스크린리더 대응 할려고
노력 많이했던 기억이 있네용
진짜 근데 하다보니 자연스럽게
시멘틱 하게 코드짜게되어요
맞아요 ㅋㅋㅋㅋ
스크린리더 대응하는게
ㅎㅎ 그쵸
진짜 도움 많이되었어요
현재스타트업들은 그거 안지켜도 되니 요새 점점 까먹고는 있지만..
ㅜㅠㅠ
레진이랑 네이버가
그런거 표준 다큐먼트
되게 잘되어있더라구여
갸루피스 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
한번봐봐야겠네유
오 맞아요
스타트업은 규제가 약한가보군요
그 제가 개발할때 도큐먼트 지침서 있었는데
지금은 어디갔는지
공유해드리기가 애매하네요ㅜㅜ
유저들에게 필수 서비스가 아니라서 그런지
장애인차별법 굳이 안지키더라고요
안녕하세요 웹 디자인이랑 그래픽 디자인 취준생입니다. 코딩도 추가로 배우려고 들어왔습니다. :) 아직 많이 어려운 html 과 피그마, 포토샵 사용중입니다. 많이 못하더라도 비난보단 비판과 피드백 부탁드립니다
이모티콘
반갑습니다~~~
그래서
한때 이런이야기 해도 그렇지만
배달 어플 기업이
과기부 UI평가
오늘은 상세페이지를 작업하려고 해요
꼴지를 달성했었죠..
첫 피그마 사용이지만
많이 떨리고 무섭지만 그래도 열심히 해보고
레퍼런스 참고해서 작업물 올려볼께요 :)
이모티콘
홧팅임다~
ㅠㅠ많이 어렵네요
일단 해보고
올리면 피드백 가능할까요?
정말 꼭 취업하고 싶어서😭
https://bookdown.org/yihui/rmarkdown/blogdown-start.html 요런 곳은..
네 어서오세요!! 피드백 많이 해드릴테니까 편하게 올려주세요 +_+ 화이팅입니다 :)
제가 정말 실력이 없어요 입문자지만 그래도 최대한 레퍼런스 많이 참고해가며 많이 보고 코더들한테 코딩도 조금씩 배우면서
열심히 포폴 제작해보겠습니다!
그 사내 문서는 어디갔는지 보이지가 않아서
사이트 드려봐용
여기가 좀 현실적으로 이용하고 있어서
좋더라구용
이모티콘 @허브의 개발 일지 감사합니당
ㅎㅎ 아닞니당
사진
제 지도교수님이 웹접근성 표준을 엄청 중시하던 분이셔서 찾아봣았네용 .. ㅎ
자료는 한번 이거 참고하면서 상시페이지를 제작해볼거에요....!!
우와..기대가 됩니다!
와 학교에서
웹개발도 알려주나여
요즘 학교에서 다커까진 알려주는데
도커?
저흰 스위프트랑 깃허브도 배우긴 하거등요
제가 처음으로 상시페이지 틀만 잡아봤는데요!! 내용은 ..제품을 홍보하는 사이트 틀만 잡아보았는데요.. 860*5000인데
아 네 한국발음은 도커
한번 느낌 보시고
틀만 피드백 부탁드립니다!
냉넹~
삭제된 메시지입니다.
근데 깊게 알려주는건 아니고
저는 전기전자쪽이라 C언어 끝...
웹은 jsp 알려줘요 ㅋㅋ
사진
부트스트랩이나은듯
이런느낌입니다
다커도
하이퍼바이저 이론이랑
컨테이너 이론만 주구장창 알려줘서
저기서 어떤걸 수정하면 좋을까요?
헬스케어도 알려주긴 했는데 실질적으로
저희들이 다 찾아서했었네용
일단 조금 더 만드신다음에 올려주시면 저희도 보고 이야기 할 수 있을거 같아용~ ㅎㅎ
컨텐츠를 먼저 정해야 하지 않을까요…?
음...
컨텐츠...컨텐츠
알겠습니다 한번 사진 넣고 로고 넣고
내용 넣어서
다시보낼께요
감사합니다
이력서 업데이트를 하고 있는데 정말 힘들군요
앞으로 2시간내에는 작성을 완료해야하는데 하핳
사진
이 사진에서
투명도 따는거 어떻게 하시는지 아시나요
하얀부분은 없애고 빙수사진만 넣기
투명도를 딴다는게
포토샵 cs6입니다
네
누끼 따는 거 말씀하시는 게 맞으실까요 ?
네 맞아요
펜툴로 따거나
올가미 툴로 노가다하거나
네
포토샵 누끼따는법 으로 검색해보시면 될 것 같아요
오 감사합니다
색상 영역 잡아서 반전시킨 후 가져오거나
네
하시면 될 것 같아요 ㅎㅎ
포토샵 없으시면
저 포토샵 사용중잉에ㅛ
요새는 인터넷에도 많아요 누끼 따주는 사이트
펜툴 사용이 어려우면 올가미툴로 노가다 뛰어야하고
아 펜툴 사용 한번 해볼게요
네
네넵
화이팅
ㅋㅋㅋㅋㅋㅋ 마감 2시간남은 공고 넣으세요?
19살에 디자인 입문하는거
너무 늦었나요?
아뇨 ㅋㅋㅋ 커피챗하기로 했는데 2시간 남았어요
아하..
이력서 급하게 그냥 이력만 적어놓은거 하나 보내놨고
ㅋㅋㅋㅋㅋㅋ
새로 작성해서 드리겠다 라고 말씀드렸거든요
기술블로그
본거같아서
낯이 익네요
화이팅하세용
잘되셨으면 합니다
감사합니다 ㅎㅎ 복학이랑 이직중에
고민중이에요
헛...
한 2주후부터 이직 알아볼려했는데 지난 3일동안 갑자기 제안이 밀려들어와서
급하게 이력서 오늘 작성중..
ㅋㅋㅋㅋㅋㅋㅋ
포맷 정하는게 제일 어려운 것 같아요
저도 취준중인데
디자이너나 개발자 채용글에서 피해야 한다는게 있는데 어떤 글을 피해야하는지 그리고 회사에서 바라는 포트폴리오는 어떤건지 모르겠네요 1. 상시모집(이건 왜 피해야하는지 모르겟어요)
어떤 포맷으로 적을지가 제일 어려운 것 같습니다 ㅠ
하얀 배경 없애시는거면 여기 이용해보세요 https://www.remove.bg/ko
목적지에 따라 다르지않을까요?? 정통 미대입시를 준비하시는거면 저도 전공자가 아니라 잘 몰라서 대답은 못드리겠지만 바로 상업쪽으로 뛰어들어서 취준하시는거면 19살도 충분할것같아용!!
아하 그렇군요 디자이너는 취업난이 빡세다는데 독학으로 갈 수 있을지
많이 힘들것 같아요
전 작은 회사여도 되는데..그거도 취업난이 깊겠죠?ㅠ 열심히 해야겠어요
정확히 어떤 분야로 준비중이신건가요...?
저는 웹디자인이랑 그래픽 디자인 두개로 가고 싶은데
포토샵을 원래 사용했었거든요? 근데 디자이너 전공인 실무자분께서
포토샵보단 Figma 를 사용하라고 하셨는데
감 잡기가 너무 힘드네요
음
먼저 큰 틀을 잡으시고
그리드 시스템을 짠다음에
필요한 디자인 시스템을 넣으시는걸 추천드려요
사진
저희 서비스 일부인데
디자이너 취업문도 문과처럼 요즘 많이 힘든가요?
음 웹디자인도 쇼핑몰 상세페이지 제작쪽을 주로하시는거면 포토샵도 많이 쓰는걸로 알고있어요~ Figma나 스케치같은 경우에는 UI/UX디자인쪽에서 주로 쓰는걸로 알고있고요 지금 얘기하신 내용을 보면 분야에 대한 정확한 갈피를 못잡으신것 같은데 디자인 취업관련 자료들 인터넷에 많이 있으니까 한번 읽어보시는거 추천드릴게요..!
이런식으로 개발이 되고 공유됩니당
사진
또 각 디자인들은 아토믹하게 컴포넌트 단위로 구분되는데
그리고 유튜브에 디자이너 취준생 포폴 피드백이랑 예시 같이 진행하는 유튜버도 있으니까 그런것도 자주보시면 좋구용
저희 디자인 시스템 일부 공유해드려용
헉 실무인가요??
우와
실무 아니고 저희 다
대학생이에용
실례지만 관심있는분야여서 어떤 서비스를 하고 계신지 여쭤봐도 괜찮을까요?
아하
근데 실무랑 비교해서 부족한점이 많지만
네
실제 서비스 런칭을 목표로
웹디쪽 허들이 높고 처우가 별로라서 주변 웹디자이너분들 프론트로 전향 하시거나 전향에 대해 물어보는 경우 많습니다.
연합동아리에서 같이 개발하고 있는거라
근데 코딩이 너무 어려워서
기획,디자인,백엔드,프론트 같이 하는 중임당
뭐부터 시작해야할지 모르겠어요
코딩을 하는 디자이너로 진로를 정하고 싶으신건가요..?
음..
그러니까 웹디자이너를 하고싶은데
디자이너도 요즘엔 조그만한 코딩을 하나씩 할 줄 알아야
취업에 도움이 된다고 실무자한테 들었어요
이모티콘
취업에 도움이 되는건 맞긴한데 디자이너로 취직을 하실거면 디자인을 공부하시는게 먼저이지않을까요..!? 코딩을 하는건 가산점의 느낌이지 않을까 싶어요..
음... 그렇군요
일단 실무자인 친구가 도와준다고 햤는데
디디님 말씀대로 디자인을 한번 하고,코딩 기능을 배워서
추가하는법도 알려준다고 했으니 한번 열심히 해볼께요
그러면 웹 디자이너보단
안녕하세요. 리액트의 가상돔에 대해 질문이 있습니다. 가상돔에서 실제 DOM과 차이를 계산하고 차이나는 부분을 반영하는것인데 차이가 생기는 부분의 DOM 만 반영하면 되기 때문에 기존 DOM 보다 빠르다고 하는 건가요..?!
웹 퍼블리서가 더 맞겠네요
디자인을 하고 싶으신건지 디자인 + 코딩을 하고 싶은건지?
후자!
전 디자인이랑 코딩 두개 다 해보고 싶어요
둘 다 하고 싶은 이유가 있으신가요?
근데 웹 디자인+코딩은 웹디자이너보단 웹 퍼블리서라고 하네요
마크업
일단 목표가 있는데
말씀라시는건가
움직이는 웹사이트를 만들어보고 싶어요 그러니까
스크롤을 내리면 움직여지는 애니메이팅이 들어간 웹사이트요
스크롤 애니메이션이나 최적화는 프론트에서 하는 작업이긴 한데
아 그걸 프론트라고 부르는군요!
네네!
디자인역량을 가진 프론트개발자가 하고싶으신거에요?
엄...정말 정말 죄송한데
웹사이트 디자인을 하면서
움직이는 모션을 넣으려면 어떤 프로그래밍 언어를 배워야하는지 모르겠어요ㅠ
죄송해요ㅠㅠ
css svg
js를 더 하셔도 좋습니다
음
혼자선 코딩이 너무 어려운데...
국비지원해주는 곳 없나ㅠㅠ..
이왕 시간들여서 국비지원 들어가실거면 허들이 있는곳에 지원해보세요~!
인프런에서 강의같은거 찾아보셨어요??
허들??
헉 그런게 있는지듀 몰랐어요..
유튜브에도 좋은 강의들이 많아요..
디자인과 개발을 동시에 배우시는거면 일단 한가지에 집중하라고 말씀드리고 싶네용...
음....왠지 물어봐도 될까요?
앗 ㅋㅋㅋ 죄송합니다 좀 혼란이 생길만한 단어를 썼네요. 테스트가 있고, 인원을 거르는 곳에 지원해보세요!
바로 국비로 가시지 말고 인터넷에 있는 무료 자료들이나 저렴한 자료들을 보시고 공부하면서 기초를 학습하는걸 전 좀더 추천드리고싶어용..
둘 다 쉬운 분야가 아니니까요?
이도저도 안될 확률이 높습니다
음 그렇구나 그러면
한개부터 열심히 해야겠네요
나나님이 나갔습니다.
그리고 작은회사로 가면..자칫 애매한 커리어가 될수도 있어요ㅠㅠ
음 그러면
오전시간대는 국비지원해주는 곳에서 코딩교육을 받고 오후시간대에는 유튜브 영상이나 코딩하는 실무자한테 직접 배워서 피드백 받는건
취업에 도움이 안되려나요...
저랑 같이살고있는 룸메이트가 경력직 코더라서 코딩을 잘하는 인재라서 실무자한테 직접 배우는것도
도움이 될까 싶어서요😭
완전 도움이 되죠
그런가요...?
7년차 코더입니다..
회사에서 찾는 인재인 코더 룸메에요
코드리뷰 받으면 좋죠
언어는 14개를 구사한다고 했어요
그중 주언어가 8개인데 Js를 제일 잘한다고 했어요
음....그렇군요
감사합니다..
근데 이거는 그냥 질문인데요...
국비지원하는 학교에서 꾸준히 배우는것과 경력직 실무자한테 피드백 받으면서 꾸준히 배우는 것 중 뭐가 더 취업에 도움이 될까요..?
언어14개… 엄청 나시네요
실무요
룸메이트 직급이
이사에요 코딩 기술이사
그런가요..? 그렇군요...
배우는거보단 실무에서 많이 배웁니다
그렇군요!!
룸메한테 상황 설명하고 오늘부터 열심히 해봐야겠네요!
이모티콘
주언어가 8개요...????
엄청난 polyglot인데요
코딩쪽...기술이사다 보니까
전 ts 하나로도 힘들어 죽겠는데
대기업 개발자들한테도 피드백 오고 외주오고 그랬던걸 직접 봤어요
아 혹시 yaml 같은것도 포함하신건가
그게 모죠...?
저도 회사에서 개자이너라고 불리는데
비슷한 상황인 것 같네요
다음폰
전 남자친구가 개발자를 직접 자르는
Yaml은 yaml이 아닌것을 의미합니다.
샤오미 미믹스 5
그정도로 높은 직급인걸 봐서
네이버에 쳐도 이사라고 나오더라구요
얘한테 열심히 코딩 배우면 취업할서 임ㅅ을까요....
이모티콘
일단 너무 고민 걱정이 많으신 것 같은데
ㅜㅜㅜ
네.....
일단 해보고 걱정하셔도
늦지안ㄹ은데요
맞아요 ㅎㅎㅎ
음.......그렇군요...
돈좀 쟁여둔거 있으시면 부트캠프도 좋아요
한번 얘한테 배워보고 걱정해야겠어요...
사진
이게 30분동안
룸메한테 배운건데요...
ㅋㅋㅋㅋㅋㅋㅋ 펭귄이 왜 귀여울까 ㅋㅋㅋㅋ
html 기초 잘 배우고 계신 것 같네요
제목부터 혼났어요 왜
한글로 했냐고ㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠ
그렇군요......
zzzzzzz
경로도
영어로 바꾸셔야해요
저거 한줄 띄울때마다
아니! 그걸 왜! 소리가 들려옵니다..
7년차 코딩 경력 기술 이사와... 시작한지 7분차 개발 취준생의 대화
cto랑 룸메인것도
신기하네요
ㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋ
제가 하나라도 틀리면 발작하면서 피드백 해줘서 좀 무섭지만
7분만에 알고리즘을 가르치는 이친구가 꽤..무섭습니다 ㅎㅎㅎ
ㅋㅋㅋㅋㅋ 와 근데 복받으셨습니다 ㅠㅠ
엥 왜왜요..?
룸메분은 동갑이에용~?
남자친구입니다
아! 남자친구분이시군여,,
네네 메타버스 쪽
기술이사에요
그게,,,코딩이구
와 여자친구 코딩가르치면
ㅇㅁㅇ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅎㅎㅎㅋㅋㅋㅋㅋㅋ
에...
저는 개발자로 취업 될까 안될까 무서워하는데 얘는
19살에 7년차 기술이사라니…
그냥 인턴들 쑥쑥 짜르고 맘에 안드는 대리 코드 있으면 밤새서 갈아엎고 자르는
웃으면서 갈구는..
아 근데 잘생겼어요
ㅋㅋㅋㅎㅋㅎㅋㅎㅎㅋㅋㅋ
부끄러운 어피치님이 나갔습니다.
근데 저한테난 웃고 친절하게 코딩 가르치고 다른 실무자한텐 안그러는거 같아요...
울고있는 어피치님이 나갔습니다.
울고있는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
ㅠㅠ피치님 나가지마욥••
안녕하세요 한가지 질문이 있는데요 리액트 쿼리를 처음 사용중인데요.
예를 들어서 post에 대한 응답 값을 받고 싶은데요
사진
19살에 7년차 기술이사분이 계시다구요?!
result : true라는 값을 콘솔에 받고 싶은데 어떻게 해야 하나요??
취미 포함이라...
5년차 정도..
잘 모르겟어요 취미때부터
시작하다가 취업했다규 들어서
엄청 멋진거 같애여
사진
useMutation에서 onSuccess일때 data를 받아올수 있지 않을까 해서 해보고 있는데 undefined만 나오네요ㅠ
저 api에서 반환해주는게 없는거 아닐까요?
저도 그생각했어요
signupAdd 보여주시면 좋으거같아요
return 부분
리턴 확인하셔야 할거같은데
사진
여기요~
저기있는 중괄호들 다 지우시고 다시해보시겠어요?
함수 바디부분의 중괄호요!
하 네 중괄호때문에 그랬군요ㅠㅠ 방금 해봤는데 잘 받아집니다ㅠㅠ
감사합니당~ㅎㅎ
이모티콘
이모티콘
이모티콘
ㅎㅎ 넵!!
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
굿굿
멋진 미래를 응원해요 ㅎㅎ
이모티콘
감사합니당~ㅎㅎ
어떤가요
ㅋㅋㅋㅋㅎㅎㅎ
잘생겼네요
감사합니다
잘만드셨네요
ㅋㅋㅋ아닠ㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋ
여쭤볼게있는데요
주말에 훨씬 다듬어야겠어요
ㅈㅔ가만든웹에 포토폴리오 문서 만들어서 제출하면
이상할까요?
포트폴리오 문서 잇으면 좋을 거 같아요
좋게평가받습니까
포토폴리오가 뭔지 잘모릅니다
외모도 스펙도 멋있으시네요 ㅎㅎ
한양대...
웹페이지 하나 만드시는거라고 보시면됩니다. 그거보고 회사에서는 이사람이 이런걸 할수 있구나 이렇게 판단을 할수있도록
뭔지는 아는데
깊은 의미를 자세히는 모릅니다..
22
본질적 가치가 내가 왜 이걸 해야하는가에 대한 진정한의미를모름
굳이 깊은 의미를 알아야할까요.. 어짜피 내가 할수있는걸 보여주기위해 만드는 거라서
포트폴리오 문서? pdf? 같은거보다는 그냥 깃허브 링크가 좋은 것 같아요
저는 이력서를 많이 보지는 못했는데 좀 보다보면 코드작성 스타일이나 어느정도 수준인지 보고싶은데 확인하기가 어렵더라구요! 이력서가 많이 들어오는 편이 아니라서 널널하게 보는데 자신있게 만든 깃허브 repo링크나 어떤 레거시 리팩토링 경험 블로그 링크 같은게 직접적으로 작성되어 있으면 들어가서 꼼꼼하게 보고싶은데 깃허브 링크나 블로그 링크만 작성해주시는게 대부분이라 다 뒤져봐야해서 그런 부분이 좀 아쉬웠어요.
할수 있는걸 보여준다면 그게 포폴이 될듯
그것이 필요없다면 직업학교 코딩 수준 그 이상은 검토가 어렵지 않을까요
나는 적어도 사짜는 아니라 진짜임을 증명하기 위한 최소한의 증빙자료라고 생각해주세요 ㅎ
무튼 여러가지 언어를 결합한 작품 소스를 보면 그 사람의 숙련도가 보이긴 하니까요
포폴이 결국 이력서같은거 아닐까욕
코드보면 좀 보이더라고요
얼마나 꼼꼼하게 짯는지 무슨생각을 하고 짰는지
요새는 자칭 개발을 했다고 하는 사람들이 넘쳐나는 시대라서 글로만 적혀있는 이력을 대화를 통해서만 걸러내는 것은 쉬운일이 아니니까요
방장님 저같은 스타일은
어느 분야로 가면 적성을 발휘할까요
어떤 스타일이신가요?
혼자개발하는 스타일입니다
서비스에서 관심이 있나요? 기술에 관심있나요? 둘 중 하나말고 적당히 퍼센티지로?
혼개스..
그럼 보통 프리랜서...
프리랜서..
외주...
1인 개발하는 프리랜서..
사진
제가예전에 올린 스샷인디
그외에는 혼자 개발하는 경우는 엄청 드물어요..
좀 코드가 마이너 할겁니다
어느분야로 가야 역량을 발휘하지 모르겠네요
php쓰시네요
php네요
php
저는 한쪽을 선택해보시고 공부해보시는걸 추천드립니다.. 프론트나 백
만들고싶은게있긴해요
APM이 웹개발의 입문인 시절이 있었죠 페이스북도 PHP로 만들어졌었구요
번역 시스템
근데 여긴 넘사벽인거같고
개발자로 취업을 하자니 개발을 혼자배워서 쌓아올린 사례가 어케야 할지 모르겠
그쵸 이제 번역은 로직으로 만드는 시대가 아니게 되었으니까요
수익을 창출하기도 하고여
요새는 앱도 나오고 유저 인터렉션이 많아져서 프론트와 백이 나뉘어진 형태로 개발이 많이되는 추세인거같아요
혼자 배워서 쌓아올린 사례는 게임쪽은 더러 있는 것 같아요
개발 접하신지는 얼마나 되셨나요??
아니면 개발자들이 좋아할만한 라이브러리나 프레임워크나 서비스 같은것들도
5년정도되었습니다
라이브러리 개발자 들이 기부를 받는걸 봤는데 수익성이 괜찮으련지
저는 일단 회사 들어가보시는걸 추천드립니다
당연히 안 괜찮아요. ㅎ ㅋㅋ
서비스 개발 한번 경험해보시고 ㅠㅠ
그냥 더러 취업하면
창업을 하시든 해보시는게.
역량을 크게 발휘못할거같아서요
그냥 직장인 그이상 그이하도 아닌
취업해서 경험 쌓고
어떤 경험을 쌓을까요?
그 역량을 더 크게 발휘 해보시라는거죠
어떤 경험을 통해 역량을 크게 발휘를 해야...?
가만히 고민하는 것보다 훨씬 많은 경험이 쌓입니다
맞아요
사업은 어떻게 해야할지, 회사에서 개발자들이 일하는 방법, 등등
아아
사업하다보면 결국 직원을 써야하는데
본인 커리어를 어떻게 계획중이신지에 따라서도 많이 달라지겠네욥
적어도 사람들과 함께 하는 경험은 꼭 필요하실꺼라고 생각합니다. 원하는 프로젝트를 이제 만들기에 개인 역량만으로는 부족한 시대니까요
혼자 개발은 못할수도 있어서요
개발 영역이 워낙 넓어서
사진
좋은 기업에서 경험하는게 좋을것같네요
그리고 서비스를 계속 유지하려면 단순히 돌아가게끔만 개발하면
오픈소스를 하거나 개인 앱을 한다고 하더라도 잘 되면 언젠가는 함꼐 할 수 밖에 없으끼나요.
진짜 나중에 망하거든요
응원합니다! 화이팅이요 _)_
+_+
그런거 고려해서 개발하는법이라던지 배울건 많습니다
코드를 나누고 분기점을 또 나누고
그것이 개발이죠!!
ㅎㅎㅎㅎ 화이팅입니다!!
근데 그
개발자 업무강도가 일반적으로 어느정도인지 통 감이안오는..
일반회사업무와 비슷합니까?
프로젝트의 압박이 어느정도있는지
태스크 일정을 얼마나 타이트하게 잡냐에 따라 달라질거같습니다
사바사 프바브
다다르죠
개발자 - 비개발자 업무강도 차이보다
회사 간 업무강도 차이가 훨씬 클 거 같아요
개발자는 아무래도 고객상담 이런 직군보다는 강도가 들쑥날쑥한 경향이 있긴 한데 그것도 회바회고
medium은 최신순으로 정렬 할 수 있는 기능은 없나요..?
미디움 레어
킄킄큰
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아~ 감사합니다
사진
사진
혹시 플렉스박스에서 빗금쳐진 부분도 확장할수있는 방법 없을까요 ?
어떤 확장을 원하시는건가요
높이 100%주면 되지 않을까요?
그냥 풀스크린을 원하시는건가요?
세 항목에 flex-grow: 1 ?!
네
flex : 1 0 33%?
마지막 h3 태그를 밑바닥쪽으로 내리려는데
안내려가네요 ㅠㅠ
justify-self : flex-end 해도 먹통 ..
css 너무싫다 진짜
h1 h2를 flex로 묶고 h3를 block으로 해보세요
Align-self flexend?
flex 안쓰고 말씀하신대로 h3는 block으로 빼고 postion absolute로 해봐야겠네요 .. 감사합니다
qweqwe 만 바닥에 붙히시고 싶으신건가요??
네네
보라색공감은 플렉스 아이템들이 사용할수있는공간이라 충분히가능할거같아요
화이팅!!!
감사합니다 ㅠ
지금 컨테이너에는 justify-content: center 주신 상태인가요??
네 flex direction column이구요
저도 한번 해볼게요! center 상태에서 기존항목 유지하고 별개로 밑으로 붙히는 경우는 저도 처음 시도해보는거 같아요!
아니면 위에 2개요소만 묶고 마진top쓰고 space-between쓰면 안되나요?
flex item에서 가능할거같은데 움
flex 공부하시려고 일부로 flex 사용하시려는 거 같은..
css 기본개념은 봤는데 직접 만들면 뭔가 하나씩 나사가 빠진느낌이네요
나사만 빠졋으면
가능ㅇ성 있네요
ㅋㅋㅋ ㅠㅠ
킹능성 있습니다
저는 그냥 골도가 빻아진
골조..ㅎ
사진
가면갈수록 알록달록해지네요 ㅎㅎ
요즘 프로젝트에서 Sass 혹은 SCSS 많이 쓰나요?~~~
styled components가 압도적이겠죠?ㅎㅎ
저는 클래스 네임에 대한 스트레스 해방, 테마프로바이더 덕분에 css-in-js 써요
저도 스타일드컴포넌트나 이모션 씁니다!
갸루피스 어피치님이 나갔습니다.
안녕하세요 타입스크립드를 공부하고 있는데 클래스에서 추상화 메서드를 추상화 클래스에서 call signature로 선언하는 이유가 무엇일까요?
npm trends에서 보시면 더 좋을거같아요~!
사진
헉 1등이네요
테오 스프린트 후기글이!
👍
원 아우어 좋아요
아우어 베이커리 vs 원 아우어
닥후
사진
너무 공감가네요..
생각만 해도 조금씩 오르네요
명분 생겼다..
피스메이커 프로도님이 나갔습니다.
안녕하세요! 구글링을 하다보면 구글에서 설정한 이스터에그가 있는데, 어떤식으로 검색해야 기능 구현을 위한 정보를 얻을 수 있는지 궁금합니다!! 구글에 heartstopper 를 검색하시면 같은 결과를 얻으실 수 있습니다. 궤적은 동일한데, 해당 이벤트가 실핼되는 동안에도 뒤에 글자들이 호버되거나 선택이 되더라구요!
사진
해당 gif 첨부합니다
재미나네요. ㅎ
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path 여기를 한번 사용해보는 건 어떨까요?
AdorableCSS cdn 방식을 업데이트 하였습니다. - vite없이 이제 어디서든 adorableCSS를 쓸수 있다!? - 써보고 싶었지만 vite를 쓰지 못했던 분들은 script를 추가해서 한번 써보세요 :) 궁금한 게 있으면 언제든지 물어봐주세요. 1:1로 친절하게 알려드립니다. ㅎ ## 1.1.5 - ⛱ 이제 vite, webpack, postcss등 다른 복잡한 설정 없이 그냥 script 한줄만 추가하면 adorableCSS를 사용할 수 있습니다. - ⚡️ adorableCSS를 간편하게 쓰는 방법! body 맨 아래 <script src="https://unpkg.com/adorable-css">만 추가해보세요. - 런타임 방식으로 css in js 방식을 통해서 동적으로 style을 생성하여 적용해줍니다. - (지금 개발자 도구를 열어서 아무 엘리먼트나 class="bg(red)" 를 한번 추가해보세요.) <script src="https://unpkg.com/adorable-css"> </body> </html>
canvas에 pointer-events: none; 속성을 주면 되네요
아! 질문이 이거였나요? ㅎ
그림이 텍스트 위로 올라가도 클릭이 되는걸 물어보시는것같아서.. ㅎ
두 분 다 맞는 것 같아요!! 테오의 css에 설아아빠님 속성까지 합쳐서 공부해봐야겠네요 ㅎㅎ
저희 회사비 개발자 분들이 구글링하다가 발견하셨는데 아이디어로 연동이 돼서 흥미가 생겨 찾아보는 중이었습니다 ㅎㅎ
> 회사 비 개발자
테오 늦은시간이지만 흥미로워서 만들어봤는데 생각보다 간단한 거 같아요! 올려주신 keyframes 속성이랑 offset-path 로 경로만 설정해주면 되더라구요 ㅎㅎ 설아아빠님이 알려주신 pointer-events 써서 뒷 배경도 인터렉션이 들어가게 구현이 되는 거 같아요!! 두분 다 감사합니다
사진
iframe을 velog 로 연결해서 만들어봤어요!
파일: event.mov
너무 끊기네요 ㅠ
우와!!!
멋지네요 ㅎㅎ
고맙습니다 ㅎㅎ 또 하다보니까 path 에 대해서 조금 더 흥미가 생기는 것 같아요.. 좋은 주말이 될 수 있겠네요 !!!!
엄청난열정이신 bbb
너무 습해서 집에서 코드나 뚝딱거리는게 나을 거 같습니다 ㅋㅋㅋㅋ ㅜ 좋은 주말 보내세요!!
저 혹시 궁금한게
세미님이랑 준희님 프로필
따로 띄우는건 어떻게 하시는건가요??
카톡에서 오픈프로필을 만드시고 여기 단톡방 들어와서 프로필변경해주시면됩니당
아 따로 띄운게
티가 나는건가요?
아하
티가 난다라기보단
는 몰랐네요
그 프로필 모양이
조금 달라요
아하
사진
혹시 위의 세미님처럼
아하
감사합니다 🙇♂️
오픈채팅 프로필 설정 하시면 될걸요 ?
아하
감사합니다
밤늦게 죄송합니닷,, 카카오 소셜 로그인을 공부하면서 구현중인데 엑세스 토큰은 보통 프론트에서 받는지 백에서 받는지 궁금해서 여쭤봅니다. 찾아보니 보안상 백엔드에서 받는게 좋다는 의견도 있는데 일반적으로는 어떻게 진행하시나요?
서벼중심연산은 해커로부터 방어할 수 있는 유일한 수단이다
두가지 방법으로도 다 구현가능합니당
그런데 보통 백에서 구현해줘용
포인터 포인터!
중요함수가 담기는 어드레스를 찾아야해!!!
토큰은 프론트에서 받고
그걸 이용하는건 백에서
저희는 구현했어요
답변 감사합니다!
리액트로 애플 홈페이지처럼 스크롤 애니메이션 구현해 보신 분 계신가요? 코드 직접 작성해서 하셨는지, 아니면 라이브러리 쓰셨는지 라이브러리 사용했다면 어떤 라이브러리가 좋았는지 궁금합니다
코드 직접 작성했었어요!
저는 framer-motion 썼어욥
감사합니다!
사진
혹시 childrun한테 props 로 함수를 넘기면
이걸 child에서 어떻게 사용하나요..?
cloneElement는 처음 써봐서 좀 헷갈리네요
칠드런에 들어가는 컴포넌트에 close를 넘길 수 있지않울까요?
네넹 근데
저렇개 사용하려면
child에 이미 있는 함수를 가져다가 내용을 추가해서 넘기는 방법정도나 있을 것 같은데요??
사진
props를 로그를 찍어봐도
빈 object가 나와서
어떻게 해야할지 잘 모르겠더라구요
사용하는 전체 코드를 봐야 알 것 같네요
return cloneElement(child, { onClick: () => { } }
return cloneElement(child, { onClick: () => { child.props.onClick() 우리가 넣을 동작() } }
이런 방향으로 해봐도 안되던가용??
사진
상단에 선언을 해놓은 코드이긴한데
사진
제가 선언을 잘못해놓고 쓰고 있는걸까요?
사진
삭제된 메시지입니다.
ㅎ.. 급한대로
모달 열리고 닫히는걸그냥 컴포넌트에 넘겼네요 ㅎ..
삭제된 메시지입니다.
여담이긴 하지만 date: DateData | undefined; 의 형태보다는 date?: DateData 의 형태가 조금 더 깔끔할 것도 같네요! ? 붙여주면 값이 undefined일수도 있다는걸 나타내주니까여
이모티콘이 잘못나갔네요 이모티콘 플러스 써가지고
아하
date는 렌더링을 위해서 무조건 받아주고 있고
api 통신에 의해 값을 못가져올수 있어서 저렇게 했었고 아래서 직접 만든 asserts 함수로 타입가드 후 throw Error 하는식으로 짰는데
저렇게 적는게 가독성이 좋아보이네요! 감사합니당
이모티콘
사진
요런것도 Css로 구현이가능한가요? 이미지로 쓰려했더니 화면 가로길이에 100%주고 height auto 주니까 원하는 디자인이 안나와서...
사진
요걸 구현해야돼서요!
일단 이런게 있긴 한데 보여주신 이미지처럼 가운데 파인 부분의 radius까지 똑같이 할 수 있는지는 모르겠네요...
오오 그래도 참고해볼만할거같아요 감사합니다!!!!
헛 저인줄
앱솔루트로 위치잡으면 가능하지 않을까용?
오 넵넵 앱솔루트로 잡아서 해봤는데 그다음 저 플러스버튼 배치가 잘안되더라구요!!
혹시 이강의 들어보신분 있나요?
비싸긴한데 좋을거 같아서 고민되네요... 399달러....
Kent c dodd가 밀어준거면 해볼만 한거같긴한데
kentc 가 밀어준 강의라니..
유명하신분인가보네요
저 절반정도 들었는데 괜찮긴긴한거같아요
저분도 개츠비 엔지니어+ 칸아카데미 출신이라...
오와
후... 회사에 지원해달라카면 넘비싸서 안해줄거 같고;;
돈내고 듣기전에 저분블로그에 있는 무료내용들 먼저 보시는것도 괜찮아요
칸 아카데미는 뭘까용?
자습 사이트요
저도 내돈내산이라… 지금은 FE팀이라 요청하면 해줄텐데 전팀에서 산거여서 ㅎㅎ;
1세대 코세라 EDx같은 사이트에요 ㅋㅋ;
마소에서 만들었었나. 돈안내고 교육 받을수 있게 만든 사이트입니다.
사진
오호..
강의도 그렇고 부트캠프도 그렇고 요즘 개발실력 올리는거도 정말 돈없으면 힘드네요
unsplash 에도 있으신분이였군요
뭐 자본주의인 이상 돈안바르고 실력안올라가는 분야가 어디있겠느냐만은.... ㅜㅜ
ㅠ 그래서 걍 처음부터 좋은회사 다니는게 크나큰 도움이 됩니다
그래도 뭐 저런 컨텐츠는 프론트만 10년 판 고인물이 직접 기획헤서 제작한 내용이고… 저희같은 사람들 뿐만 아니라 아마존 마소 다니는 직원들이 회사돈으로 듣기도 하는거라…
인프런도 대부분 비즈니스에서 매출이 나오지 않을까요? 회사나 대학에서 많이 지원해주니까요 개인적으로 사서듣기엔 좀 비싼거같아요
담주에 한번 강력하게 부탁해봐야겠어여....
솔직히 개인이 사서듣는건 유데미정도가 한계....
저희회사도 인프런은 묻지도 따지지도않고 지원해줘서 저도 좋아보이는건 수강신청 눌러놓고 안듣습니다 ㅋㅋ;
칸아카데미가
뭐에용?
인프런 지원은 부럽네요
근데 인프런 8만원짜리 강의보다 유데미 2만원짜리가 훨씬나은게 많아요
역시 개발실력 주도는 영어권이죠 ㅋㅋ
인도분들 강의 듣고 깜짝놀랐습니다.
인프런 클론코딩 하느니 그냥 freecodingcamp에 클론코딩 치고 글읽으면서 코딩하면 강의로 10시간 걸릴꺼 2시간 정도면 실습하는데
너무 잘가르쳐서
이번에 레딧에서 freecodecamp로 공부하고 160k 샐러리 찍은분도 글올라왔는데 참 잘만든거 같아요.
리액트도… ㅋㅋ 공식문서 리뉴얼중인데 너무 잘만들어뒀더라구요
영어할줄알면 강의들을 이유가 없음...
저거 한참 걸리거 같습니다 ㅋㅋㅋ 아브라모브가 이제 한 60퍼인가 완료됬다고 트윗올렷던거같은데
비영리 교육 사이트입니다.
리액트 공식문서가 드디어 함수형을 반영한건가요??
아하아하
함수형뿐만아니라
튜토리얼을 그냥… 만들어버렸어요 ㅋㅋ
인터랙티브 코스라 해야하나...
인프런에있는 강의들 다 청산될 예정 ㅋㅋㅋㅋㅋ
기존 리액트 공식문서는 알아보기 힘들었는데 마음에 드는군요
리액트 공식문서는 좀 부실한 감이 있었죠ㅜ
틱택토 미쵸~
ㅋㅋ ㅋㅋ ㅋㅋ
업데이트 왜안되나했더니 새로 만들고 잇었군요...
와!! 좋은 자료 감사합니다
다들 커피 많이 마시나요?
저는 카페인 달고 사는데 안 먹는 날에 머리가 너무 아프네요
그럴때에 한번에 끊으면 두통이 심해서 양을 서서히 줄여가야 한다고 들었어요!
전 하루에 커피 2리터정도 마시는 것 같아요
와 .. 감사합니다
ㄷㄷ
안녕하세요! 혹시 react-virtualized 라이브러리 사용해보신 분 있으신가요?
이 글이 말하는 바를 정확하게 이해하기가 힘든데 혹시 이거에 관련된 내용 주소 아시는 분 계실까요?.?
이게도움이되시려나요...?
봐보겠습니다!! 감사합니다!!!
이거랑
여기도 저기예시로든거랑 비슷한 얘기하거든요
자바스크립트로 자동화 스크립트를 짤수있나요? 투두리스트에서 1만개의 아이템을 추가했다가 삭제하는 자동화 스크립트요!
그건 자동화가 아니라
function 아닙님가
와 정말 정말 감사합니다 ㅎㅎㅎ!!! 이것도 지금 봐보겠습니다
생각하는노댕님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 생각하는 노댕님~~ 반갑습니다 :)
안녕하세요 블로그 글 보고 감동 받아서 찾아왔습니다 앵귤러 RxJS를 좋아하는 프론트엔드 개발자입니다 잘 부탁드립니다~
감사합니다!! 저도 rxjs 좋아합니다 ㅎ 환영합니다 :)
이 곳은 프론트엔드나 개발을 하면서 궁금한게 있을때 서로 질문하고 경험을 공유 하는 것입니다 ㅎ 잘 부탁드립니다 :)
이런거를 만들기 위해서는 어떤 부분의 기술들을 좀 참고하면 될까요,,,?
라이브러리나 키워드가 궁금합니다
울고있는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
이런건 뭔가 특정 기술이 아니라 UI의 조합들도 만들어지는 거라 참 어렵네요;;
울고있는 어피치님~ 반갑습니다 :)
저 궁금한게 하나 있는데 제가 a라는 사이트에 들어가면 a라는 사이트에서 저한테 html파일을 주고 그걸 보는거자나요 ? 근데 a라는 사이트는 숫자를 입력하면 더해주는 연산을 해주면 그게 제컴퓨터에서 js가 돌아가는 건데 여기서 궁금한게 인터넷이 느리면 이 연산도 느려지는 건가요 ? 아니면 그냥 컴퓨터 성능에 종속적인건가요 ?
조금 바보같은 질문인거같긴한데 조금 헷갈리네요 …
네 인터넷 속도와 관계없을 것 같네요
넵 감사합니다
컴퓨터 성능이 정답인데 브라우저는 네트워크 처리가 최우선이고 멀티태스킹을 하지 않아서 서버에서 데이터를 불러오고 있는 중인 상황에서는 인터넷 상황에 따라 스크립트 처리가 느려지는 경우가 있습니다
와 그렇군요 감사합니다!!
일단 저 글에서 정의하는 WYSIWYG web editor 로 구글링을 시작해보면 어떨까요? 하다보면 연관된 개념이나 키워드들을 발견할 수 있을 것이고 거기서 또 구글링을 할 수 있을 것 같습니다.
안녕하세요 구직관련해 질문이 있습니다. 2~3지망으로 생각하던 회사가 채용이 확정되고 1지망 회사는 최종면접을 앞 둔 상태인데 일반적으로 최종합격 통보 후 첫 출근까지 몇 주의 시간이 주어지는지 궁금합니다.
1~2주 가 보통이고 한달걸릴수도 있죠 ㅎ
첫출근 시기는 정하기 나름인것 같아요 팀에서 빨리 와달라고 하는 경우도 있고
회사와 상의하기 나름인것 같습니다 보름 이상은 조금 어렵지 않을까 싶네요
혹 1지망 회사 프로세스가 늦더라도 관계없이 2,3지망 회사 입사하시고 계속 진행하시는걸 추천ㅎㅎ
답변 감사드립니다!
추가적으로 최종 면접 후 합격/불합격 여부를 안내받기 까지 얼마나 걸리셨는지 여쭤보아도 괜찮을까요?
빠르면 수 일, 길어도 보름 안에 받았던 거 같아요
전 최종면접은 1주이내 결과받았습니다
면접하고 집가는길에 연락온적도 있고요..
면접볼때 2,3지망 합격한거 언급하는거 나쁘지않아요
연봉협상도 유리해지고 결과도 더 빨리 말해달라 요구할수도 있고요
그래봐야겠네여! 감사합니다! 테오님도 감사합니다!
아하! 참고하도록 하겠습니다 답변 감사드립니다 ㅎㅎ
안녕하세요! 정말정말 가고 싶은 회사에 다음주 월요일 커피챗을 하게 됐습니다! 온라인 커피챗이 처음이라 어떻게 준비를 해야할지 잘 몰라서 이렇게 글을 남깁니다. 보통 커피챗에서 1분 자기소개는 하나요? 해야한다면 온라인으로 들어가자마자 안녕하세요와 함께 1분PR 하면되나요,,,? 메일에선 편하게 이야기 나누는 분위기라고 하시는데,,, 긴장이 많이됩니다,,, 어떻게 준비해야할까요?
가고싶은 회사 합격하셨다니..축하드립니다..
그냥 편하게 대화하는게 최고입니다
면접이 아니니까 1분pr까지는 필요없지 않을까요? 부담스러워할 수도.. 제가 아는 커피챗은 정말 편하게 커피마시며 대화하는 시간이었습니다.
그냥 가벼운 마음으로 하시면 될 것 같아요~
평소에 그 회사에게 궁금했던 것들 물어보시면 될 것 같아요 ㅎ
면접이 아니라 정말로 그냥 사감 잡담 수다에 가까운 시간이라고 보시면 될것 같아요 ㅎ
사담*
개발문화라던가 비전이라던가 가치관 팀 분위기 복지 회사가 돈을 잘 벌고 있는지 기술은 뭐 쓰는지 가면 어떤 일을 할 수 있는지 어떤 사람을 뽑고 싶은지 입사를 하려면 뭘 준비하면 좋은지 내 포폴이나 이력서는 어떠한지 등등
입사를 하려면 무엇을 준비해야하는지도 여쭤봐도 되는시간이군요!!! 감사합니다 참고해서 준비해보겠습니다!
면접에 합격한건 아닙니다 ㅎㅎ 면접전 커피챗을 먼저 제안해주셨어요! 답변해주셔서 감사합니다 :)
리액튜님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요! 채용과제를 냈는데, 제출기간이 오늘 자정까지에요. 깃허브 레포 주소를 드리는 형식인데, 몇 가지 로직을 수정하였는데, 수정하였다고 메일을 다시 드려야할까요?
과제 수행에 관련된 내용이라면 메일을 드려야할거같습니다. 관련없다면 안보내도 될거같고요..
로직을 수정하고 콘솔 지우고 이런 작업들인데
메일 드리는게 낫겠죠?
네 메일보내는게
깔끔하겠군요
감사합니다...!
리액튜님 반갑습니다 어서오세요 :)
스벨트 공식문서에서 튜토리얼을 리뉴얼 하고 있네요. svelte를 한번 배워보고 싶은 분들은 참고해보세요. ㅎ https://learn.svelte.dev/tutorial/welcome-to-svelte
테오님, 스벨트의 서버사이드 렌더링은 어떻게 구성하나요?
sveltekit 으로요
테오가 알려주니까 스벨트 마렵네요...
못참겠다
맞아요!! svetlekit으로 합니다 ㅎ
문득 궁금한건데 리액트에서 OOP를 얼마나, 어떻게 활용하고 계신가요?
리액트에서 클래스 문법을 사용해서 상태관리를 하는 게 리액트스러운 상태관리인가 라는 생각이 들더라고요
JS 내지 TS 는 OOP 를 정확히 관리하기에 적합하지 않습니다.
Hooks 의 등장으로 Functional Programming 에 훨씬 적합하죠
선언형 프로그래밍, 함수형 프로그래밍 과 관련된 내용을 적극적으로 활용하고 객체지향프로그래밍은 잘 어울리지 않습니다.
쓰려면 충분히 어울리게 쓸 수 있는 거 같아요
그렇군요! 연습 삼아 특정 데이터를 클래스로 묶어서 주입하고 있었는데
이러면 상태관리가 분리되는 게 아닌가 생각이 들더라고요
어찌됐건 js는 oop와 fp를 모두 할 수 있게 설계되어 있고 (오히려 그래서 애매하다고 느껴질 수도 있지만)
그래서 충분히 custom hooks를 만들어서 사용할 수 있으면 클래스를 만들 필요가 있나 싶었구요
저희는 oop 의 장점을 이용하기 위해서 클래스 문법을 어느 정도 활용하고 있어요
오 어떤식으로 활용하고 계신지 간략히 들을 수 있을까요??
근데 그렇다고 해서 상태관리를 클래스로 하진 않습니다..ㅎ
비즈니스 로직을 레이어 단위로 분리할 때 쓰고 있어요!
예를 들어서 api 콜을 하는 class / 상태를 분기해서 어떤 로직을 보여줄지 판별하는 class 등등
물론 웹에서 class 를 쓰는 게 정답이고 좋은 거냐? 라고 한다면 난독화에도 이슈가 있고 클래스랑 함수 문법을 섞어쓰면서 애매해지는 부분도 있고 해서 저도 물음표가 있지만, 그래도 잘만 쓰면 흔히들 말하듯이 진짜 안 어울린다 까지는 아닌 거 같아요
감사합니다 고민했던 부분이 조금 해소가 됐네요
파전에 막걸리 급으로 어울리진 않지만 파전에 와인만큼 안 어울리는 건 아니고 파전에 소주 정도는 되는 느낌
파전에 소주면 매우 어울리는 거 아닌가여? ㅋㅋㅋㅋ
가끔
그런경우는 봤어요
상수 많은 객체 만들 때
클래스로 만들기도 라더라구요 파싱이나 이런거 들어가면
만약 백엔드를 노드기반 nestjs를 쓸경우 dto를 oop 적으로 관리하는게 좋긴했던거같아요.
hook이 Functional Programming이 아니라는 관점에 대해서는 어떻게 생각하시나요?
Hooks provide access to imperative escape hatches and don’t require you to learn complex functional or reactive programming techniques.
훅은 함수형 프로그래밍이 아닙니다.. 원래 믹스인 대안으로 나온거에여
안녕하세요 혹시 질문이 있는데요! axios를 이용해서 서버에서 Promise 형태의 응답을 받아왔는데 사진에서 볼 수 있는 PromiseResult안에 array 데이터를 편하게 사용할 수 있는 방법이 있을까요…? 도저히 해결이 안돼서 질문 올려봅니다
사진
usestate로 array를 따로 빼서 잠시 저장시킨뒤에 사용하면 되지 않을까요?
어떤 부분이 어려우신걸까요???
usestate에 promise.PromiseResult.array 를 setstate에다가 저장하고 state를 불러와서 사용하지는 못하는 코드인가요??
axios를 사용해 저 사진의 Promise<pending>값을 받아오고 저 array 데이터 값만 빼오는 커스텀훅을 만드려고 하고 있습니다
이 방법은 시도해본적 없는데 한 번 도전해보겠습니다!
코드를 같이 주시면 어떨까요? 그냥 promise 객체 reslove 하면 될듯한데
pending 상태니까 then이나 async/await으로 .. 접근하시면됩니다..
https://okky.kr/article/704616
사진
사진
위의 API를 다른 커스텀 훅에서 관리하려고 하는데 Promise<pending>상태가 처리하기 너무 까다롭네요
글 공유 감사합니다!
함수형이 아닌게 맞죠
공식문서에서도 인정하고 functional component -> function component로 바꿨으니
단무님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
잉여개발자님이 들어왔습니다.
아 원래 함수 컴포넌트였던게 아니라 함수형이었다가 바뀐거엿나여?
오호 그렇군요 답변 감사합니다
함수형이라 부르다가 함수형프로그래밍의 정의? 랑 안 맞는게 너무 많으니 헷갈린다. 함수 컴포넌트라고 하자 로 된걸로 압니다
원래 클래스랑 공존할때는 함수형도 맞는말이었는데... 훅이나왔으니 ㅋㅋ...
함수 컴포넌트 관련 재밌는 글이 있네요 ㅋㅋ 글 끝에 수정 내용이 진심인지 비꼬는 것인지 모르겠지만
잉여개발자님이 나갔습니다.
재미있는 관점이네요~
React는 함수형 프로그래밍을 지향해서 함수형 컴포넌트가 된 것이 아니라 최초 class 기반의 문법이 복잡했던 것에 반해 (특히 this와 render) hook을 이용한 function으로 컴포넌트를 만들 수 있도록 한 부분이 주요했고 컴포넌트 객체를 선언할 때 class가 아니라 function으로 등록할 수 있기에 functional Component라고 불렀습니다.
그러다가 Redux가 유행을 타고 Redux의 전후값 비교를 위해서 함수형 프로그래밍의 불변성과 순수함수부분을 차용하면서 설명하게 되면서 때아닌 함수형 프로그래밍이 유행을 타게 됩니다.
React = Redux 공식이 성립할만큼 너무 당연한 기술이었던 만큼 이 둘을 하나로 보는 사람들도 많았고 함수형 프로그래밍이 유행을 하면서 React에도 함수형 프로그래밍인지 이런식으로 용어를 설명하면서 한참의 과도기가 있었는데 사실 둘은 아무런 관련이 없습니다.
그간 javascript 진영에서 class보다는 함수 위주로 프로그래밍을 해야한다는 기조가 더글락스 클락포드를 필두로 해서 깔려있었지만 그동안 객체 지향 옹호론자들로 부터 인정을 받지 못했던 함수형 프로그래밍이 각광을 받으면서 그때 부터 함수형 프로그래밍 방식에 대해서 좀 조명을 받게 되면서 React의 Functional 이라는 용어가 함수형 프로그래밍을 떠올리게 한다는 지적도 나오게 됩니다.
깔끔한 설명 감사합니다!
그냥 대학교 1학년 컴공 시험에 맨날 나오는 Override와 Overload 의 차이점이 뭐에요? 이런 질문 마냥 사실 별로 큰 관계가 없는데 이름이 비슷해서 마치 관련이 있는 것처럼 느껴지는 그런거라고 생각을 해요
대신 리액트 컴포넌트를 하나의 클래스가 아니라 하나의 함수로 볼 수 있게 되면서 Hoc(Higher order component) 와 같은 개념은 함수형 프로그래밍으로 부터 나온 개념이기에 완전 상관이 없다고 보기는 어렵지만
순혈 함수형 프로그래밍 옹호자는 순수함수를 쓰지 않는 함수형 프로그래밍을 좀 인정(?)을 안해주는 분위기이고 대부분의 개발자들은 함수를 좀 응용을 하면 함수형 프로그래밍이라고 하기 때문에 React는 혹은 hook은 함수형 프로그래밍인가? 라는 논쟁이 지금은 무의미한것 같아요 관점에 따라서 이렇게도 저렇게도 해석이 될 수 있는 부분이라서요. 그렇지만 이런 것들을 생각해보고 한 번 생각해보고 찾아보고 이해를 하는 부분은 많이 도움이 된다고 생각합니다. 그래서 이런 아젠다로 얘기를 많이 나눠 보는 것 좋아합니다. ㅎ
아 hoc 얘기가 나와서 하는 말인데요. hoc의 개념에 대해서 인터넷에서 찾아보면 너무 원론적인 내용들이 많더라구요. 제가 이해한 바로는 코드 재사용을 위한 개념이고 대표적으로 리액트 커스텀 훅을 생각하면 된다고 생각하는데 맞는 걸까요?
면접준비를 해야하는 데 기술면접때 대답을 하려면 너무 원론적이게 길게 말하는 것도 아닌 것 같고, 너무 축약해도 아닐 것 같아 설명이 좀 어렵습니다. ^^
아뇨.. hoc는 higher order (고계함수) + component 가 중요한 개념이라서 higher order에 대한 개념 설명이 더 중요합니다. 사실 이름이 거창해서 그렇지 함수에서 함수를 인자로 받고 함수를 리턴할 수 있다는 개념이에요
React는 컴포넌트를 함수로 생성할 수 있기 때문에 ex) Component = (params) => <div></div> 그러면 컴포넌트를 생성하는 함수를 리턴하는 함수를 만들 수 도 있습니다. ex) createComponent = (p) = ... return Component = (props) => <div></div>
앗 감사합니다~ 함수가 함수를 인자로 받아 함수를 리턴한다라고 한문장으로 보니 딱 이해되는 것 같습니다.
설명해주신거 항상 잘 보고 있습니다. 여기서 전후관계가 살짝 어긋난것 같아서 첨언해보자면, react에서의 hook 지원보다, redux의 유행이 더 먼저 이긴 합니다! redux 쓰면서, react의 FC를 많이 쓰게 되는데, FC는 컴포넌트의 상태를 가질 수 없다보니, 상태를 가지려면 클래스형 컴포넌트가 어쩔 수 없이 필요했고, 후에 hook이 공식적으로 지원되면서, FC에서도 상태를 가질 수 있게 되었습니다!
올바른 설명 감사합니다! +_+
제가 알고 있었던 것 보다 hook이 훨씬 더 늦었군요! 좋은 정보 고맙습니다~
저는 면접볼때 hoc는 한번도 질문 못받았어요
리액트가 클래스형일때의 잔재라서 그런거 같더라구요
전부 다 신입면접이었지만 한 10개 넘게 볼동안 리액트가 클래스형일때만 관련있는 내용들은 질문 받아보질 못했네요.
신입 면접볼 때 중요하게 생각하시는 부분들이나 꼭 물어보는 질문있을까요? 다음주에 면접보는 취준생입니다 ㅠㅠ
하나를 말해도 깊게 말하는게 인상을 남기는데 도움이 됬던거같아요
저는 모던자바스크립트 deep dive내용을 일부러 거의 외우다 싶이해서 대답을 한편인데
면접관분께서는 좋아하시더라구요.
고수 ㄷㄷ
야무지시네요...
그리고 리덕스나 jotai 같은 상태관리 라이브러리들도
그 메인테이너들이 기술블로그를 운영하는데
거기가서 자기가 만든 라이브러리의 해체분석글을 아주 자세하게 써놨습니다.
아니면 이거 보세용
zustand인데
그것도 좀 몇번 보면서 이해하고 외우면서 답변준비를 먾이했어요
코어부분 코드가 ts말고 js로 쓰면 70줄정도 나와요
특히 mark ericson 이분이 리덕스 코어 메인테이너인데요. 블로그가 리액트랑 리덕스 이해하는데 큰도움이 되는 글이 많습니다.
리액트 코드베이스가 저는 너무 커서 까볼 엄두가 안나는데
저기서 다 추상화해서 설명 해줘요
헛 혹시
어떤 아티클인지 알 수 있을까요?
조언들 너무 감사합니다! 지금 바로 읽어보도록하겠습니다!!
사진
Mark의 블로그하단에 조회수 많은글들이있는데요
넵
저기에서A (mostly) complete ~ 저 글이었던거 같네요
와 감사합니다
근데 저기 있는글들은 진짜 다 좋아서
리덕스 아직 안죽었다 재밌겠네용
왠만하면 전 추천드려요
감사합니다 ㅎㅎ
요즘 라이브러리들 코드 까보고있는데
그리고 kent c dodd이분 블로그도
리액트코드는 진짜,,,
좋은글들이 많아서
많이 읽는게 전 도움이 컷어요.
질문은 그때 그때 다르지만 이력서에 있는대로 진짜 경험을 해봤을까? 얼마만큼 고민을 해봤을까? 본인이 얼마나 스스로 생각해봤는진를 중점으로 물어봅니다
최근 웹뷰 프로젝트를 react + sass 로 작업하는데,,, 뭔가 css 이름 짓는데 현타가 오기 시작하더라구요. 그래서 누가 올려주셨는데 이런 사이트를 봤었는데 저희는 rem을 전체적으로 사용하다보니 좀 애매한 부분이 있어서,,, 이런걸 직접만들어서 사용해보신 분 계신가요?
https://mobily.github.io/stacks/
맞아요 저도 프로젝트 하면서 겪은 어려움들을 저기 블로그에 나왔던 심화된내용이랑 스까스까 해서 말한게 좋은 인상을 많이 받았거든요.
맞아요 뭐가 되었건 본인 찐 경험 이야기를 할 수 있다는 것이 중요하다고 생각해요
예를 들어 내가 프로젝트할때는 리액트의 렌더링 라이프사이클을 정확히 몰라서 지금 깃헙에는 이렇게 이렇게 구현했는데~~ 나중에 이런 코어메인테이너의 글을 보고 이렇게이렇게 공부하니까 저렇게저렇게 봐꿧으면 더 효율적이었겠다 이런식으로 대답을 했엇는데
이런걸 좋아 하시는것 같았어요.
오오 맞아요!! 이런 스스로 고민해보고 해결해본 자기 이야기
오… 제 깃헙 돌이켜보고 글로 정리해야겠네요 감사합니다
와 근데 저 아티클
엄청 기네요
재밌어서 금방 보실거에요!
아는내용도 어느정도 있어서
재밌네요
그렇죠 그래서 컴포넌트 방식 의 레이아웃이나 ex) https://chakra-ui.com/
tailwindcss류의 atomic css등을 sass대신 좀 쓰려고 하고 움직임이 있죠 최근
주말에 테오님의 css 관련 글들 읽으면서 제대로 현타가와서 ㅋㅋㅋㅋ 회사에 맞게 만들어 볼까 싶기도하고 다른 라이브러리들을 도입해볼까? 싶기도하고 참 고민이 많아지네요 ㅋㅋ
요거 홍보성 유투브지만 이론 이야기는 많이 도움이 되실겁니다~
테오덕에 atomic css는진짜 제대로 이해했네요 ㅋㅋ
아무래도 회사에서는 비주류를 쓰기는 부담스럽다보니 tailwindcss정도는 해봄직 할 수도 있긴 한데 주로 다루는 화면이 어떤 스타일인가요? 홈페이지? 백오피스? 어드민?
저는 웹뷰인데 회사에 프로젝트가 크게 쇼핑몰이랑 웹뷰로 존재를 합니다
디자이너들이 피그마로 작업한걸 하나하나 옮기는 것도 참 현타가 오더라구요
여기야 말로 제가 만든 피그마 플러그인과 css 라이브러리가 적격인 곳인데 아쉽네요 ㅋㅋ
생각 좀 정리해서 나머지 개발자 분들한테 얘기 좀 해볼 것 같습니다 ㅋㅋㅋ 컴포넌트를 만들어보던지~ 도입해서 사용해보던지,,, 개발자가 3명인데 제가 중간이라서 ㅋㅋ
좋네요!! 그렇게 프로세스를 개선해보는 경험을 해보는 것은 잘 되든 안되든 커리어에도 성장에도 큰 도움이 될거에요! :)
테오님 사진 보니 구본승 젊을 때 사진 같네요 ㅎㅎ
감사합니다 :D
감사합니다!
핼로님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 헬로님~~ 반갑습니다 :)
안녕하세요 :)
방금 코테를 보고왔는데
자바스크입트로 입출력 형식까지...먼가 엄청 불편했네요..결과적으로 조졌습니다...가고싶은 느낌의 회사였는데 아쉽군요 ㅠ
자바스크립트로 코테 풀기 많이 어렵나요?
프로그래머스 문제는 괜찮은데
입출력 형식으로 찍는 문제는 그동안 안풀어봐서
노드 함수들을 써야하는데 굉장히 난감했습니다...ㅋㅋ 문제 자체는 그닥 안어려웠던거 같은데 ㅠㅠ
프로그래머스에 있는 js 는 함수만 잘 만들면 되니깐 큰 문제 없어요
홧팅임다ㅜ
저도 입출력 때문에 고생했었는데 참 당황스럽죠 ㅋㅋ ㅜㅜㅜ
공감을 해주시니... 위안이 조금 되는거같슴니다
주말내내 프로그래머스 문제 좀 풀다보니 실력이 많이 는거같습니다... 다음회사 지원할땐 미리 대비좀 해야겠네요 ..
구름에서 푸셨나여?
구름이나 백준은 그런게 안되어있더라구여,,,
구름에서 풀었습니다ㅠ
ㅋㅋㅋㅋㅋㅋㅋㅋ
저도 같은 상황을 겪어봐서,,,
사진
혹시 글로벌하게 이넘을 사용할려고 이렇게 쓰고 있는데
더 나은 방법이 있을까요..?
사용 목적은 타입 추론보단 맨날 까먹어서 자동완성, 실수 방지가 큽니당
export const orderStatusKeys = { ... } as const
이렇게하는게 좀더 편하더라구요
멤버도 readonly되는 차이죠?
네네 맞아요
사진
사진
적극반영해서 이렇게 사용하기로 했습니당
훨씬 깔끔하네요 ㅎㅎ 감사합니다
이모티콘
이영범님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
모든 페이지에 header 가 필요한 게 아니라서 몇몇 페이지 상단에 header 컴포넌트를 넣었는데 ,동일한 헤더를 가진 다른 페이지로 옮겼을 때 그 헤더의 캐시 데이터 내용이 변함이 없음에도 계속 렌더링 되는데 이걸 데이터가 바꼈을 시에만 렌더링 시킬 수 있게 할 방법이 뭐가 있을까요?.?
리액트인가요?
엡엡
리액트 쿼리로 겟 해오고 있습니다
라우터는 어떤 거 이용하시나요?
리액트 쿼리의 어떤 옵션을 쓰면 될 거 같은데, 제 생각이 어디에서 잘못된 건지, 아니면 옵션을 쓰면 되는지 정확히 모르겠네요
아 렌더링되고있다는 게 api 콜을 한다는 말씀이신가요?
리액트 라우터 돔 최신 꺼 씁니다
넵넵
콘솔에 또 찍히더라구요
캐시에 데이터가 있으니 찍히는 거지 렌더링 되고 있는 게 아닐까요?
렌더는 될거예요 일단 페이지가 바뀌는거니까
근데 api 콜을 또 하는 게 아쉬우신거죠?
네 맞습니다!
어떤 데이터인지에 따라 어떤 옵션을 쓸지가 다를 거 같아요
렌더링이 새로고침 아닌가요?.? 제가 잘못 알고 있는걸까요?
기본 옵션대로면 staletime 이 0초라
리액트 렌더랑 페이지 새로고침은 다르죠..!
아아 내용만 렌더링 되는 거지 그러고보니까
새로고침할때랑다르게
화면이 멈췄다가 돌아가는 게 안 보이니까
다른 의미가 맞겠네요
감사합니다!
디테일한 원리들에 대한 호기심을 물어볼 사람이 없어서 중간 중간에 구멍이 많습니다
기본이 0초 군요...!!
아아 staletime에 관련해서 이제야 정확히 이해했습니다
와
감사합니다!
근데 제 의도는 staletime과 관련없이 정보가 바뀔 때만 랜더링하고 싶은 건데 그런 경우엔 어떤 옵션을 사용해야 할까요?.?
update가 아닌 get인데 페이지를 옮겼을 때 변경 내용이 없으면 header는 get에 대한 랜더링 없이 기존의 값을 가지고 있는다. 이거 자체가 말이 안 되는 내용일까요..?.?
정보가 바뀔때라는게 클라에서 트리거할 수 있나요?
넵 맞습니다!
staleTime: Infinity 주시면
업데이트될때는 강제로 refetch하게 하면 되긴 할 거 같아요!
아니면 명령적인 동작이 필요한거면 그냥 리액트쿼리를 안 쓰는 것도 방법이구요
아 staleTime infi 주고 업데이트 될 상황엔 refech!
refetch 말고 queryClient.invalidateQueries 도 되나..? 그건 확인해봐야 알 거 같아요 staletime infinity 랑 저걸 같이 써본적이 없어서
지난 주 2주 동안 리덕스 써서 상태관리 했었는데, 모든 값들이 전역으로 들어가다보니 그럴 필요가 없다라고 생각되서 이번엔 리액트 쿼리를 쓰고 있었습니다! 이번 주에 리액트를 쿼리를 알아가다 보니 리덕스 자체가 필요없겠다 이게 더 최적화에 옳겠다라는 생각이 들었는데 잘못된 생각일까요?
저 세가지 위주로 get 요청에 테스트 해보겠습니다! 키워드를 주신 것만으로도 정말 감사합니다!
그거 공식문서에 관련 문구가 있었는데
리액트 쿼리에서 전역상태까지 관리를 할 수 있겠더라구요 공식 문서가서 확인해보겠습니다!
리덕스 자체가 필요없다고 느낄 수도 있는데, 우리도 그렇게 생각하는데 그건 알아서 해라! 이런 느낌이었어요
그렇군요 공식 문서에도 말을 애매하게 해줬네요...ㅠㅠ
엇 저는 명료하다고 느끼긴 했는데
상태는 클라 상태랑 서버 상태가 있으니 서버 상태는 리액트쿼리로 관리하고 클라 상태는 리덕스 등 상태 관리 매니저를 쓰든 말든 해라
근데 서버 상태를 리액트 쿼리로 옮기면 클라 상태가 사실상 얼마 남지 않아서 리덕스를 떼고 싶을 수도 있을 거다 그건 알아서 해라!
클라 상태가 크고 복잡하다면 리덕스를 유지하고, 필요없으면 적당히 context 같은 걸로 해결할 수 있을 거예요
근데 리액트쿼리에서 전역 상태 관리하는 건 가능하긴 한데 지양하는 걸로 알고 있어요 용도에 맞지 않아서
쿼리스트링에
문자열 넣어서 관리하는거 말씀하시는거죠?
아 쿼리키
아 그런가요? 제가 현업에 있지 않아서 그러는데 그러면 현재 전역상태는 리덕스로 관리하고 그외는 리액트 쿼리로 관리하고 있나요?.?
딱 이 상태입니다..!
넵넵 리액트쿼리요!
인줄 알았는데 아니네요 요건 무시해주세요 ㅋㅋㅋㅋㅋㅋ
아 넵넵!
https://tkdodo.eu/blog/react-query-as-a-state-manager 리액트쿼리 컨트리뷰터분 블로그인데 (사실상 tannerlinsley보다 관리 열심히하는거같은) 참고해보시면 좋을 거 같습니당
회바회 팀바팀 플바플인데 리액트쿼리를 쓴다면 서버상태는 리액트쿼리 클라상태는 리코일 조합이 요즘 선호되나 봐요
플젝 비율만 보면 리덕스 + 리덕스 사가가 압도적으로 많긴 할텐데 아무튼
사실 요즘 리덕스가 저물면서 상태관리매니저가 하도 많아서 딱히 현업에선 이거 써요 라고 할 만한 건 없는 거 같아요
리덕스 짱싫어요...
보일러플레이트...
리액트쿼리랑 조타이나 주스탠드
감사합니다 ㅎㅎ!
델님 혹시 하나 더 여쭤봐도 괜찮을까요...? 화상채팅 기능을 넣으려고 하는데 webRTC에 관해서 어떤 영상이나, 글을 보면 좋을까요..?
퇴근하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
queryCache를
라우팅 되었을때 불필요한 cache를 초기화하는건 어떠실까요?
리액트 쿼리의 개념은 rfc5861에 구현체라
사실 데이터는 캐싱이 모두 되어있슴당
늦은 밤 질문 죄송합니다. 리액트 공부중인데 코드 스플리팅이나 ssr이 좀 어렵게 느껴지는데 리액트로 하는 법을 공부하지 않고 단순히 next를 공부해도 괜찮을까요?
아 실무자가 아니고 취준생입니다
저는 12월에 처음으로 next.js로 리액트를 접하고 프론트엔드를 시작했었어용
처음 시작을 타입스크립트로 했었고 원래 바닐라를 조금 알았었는데 12월부터 지금까지 4개 프로젝트를 했었으니깐
순서대로 느낀점이
1. 리액트스럽지 못하게 페이지단위로 코드를 구현, 재사용보단 그저 모듈을 분리했단 느낌이 강한 컴포넌트, any타입의 남발이였던 타입스크립트, 커스텀 훅을 못씀, 당연히 nextjs도 활용못함. 이때 nginx, docker, gcp instance 구축을 같이 했어야했는데 웹팩과 바벨에 대해 이해 못한 채 홈페이지만 뜨면 돌아가는거라고 생각. ssr, ssg, csr의 구분을 못하고 사용. styled-component를 쓸줄 몰라서 외국 유튜버가 알려준 tailwind로 스타일링, mui를 많이 사용함.. 직접 컴포넌트를 만들기엔 실력이 부족했음 2. 리액트에 대해 어느정도 이해함, 훅을 활용하여 상태를 관리, 리덕스와 미들웨어를 활용, 재사용 컴포넌트에 대해 이해하고 쓸려고 노력했음(디자인 패턴 못했음),타입스크립트에서 타입을 명확히 사용하려고 했으나 타입추론과 타입가드는 못했음(그땐 이런게 있는지 몰랐음) styled-component와 sass를 쓸 줄 알게됨. 컴포넌트 css에 조금 욕심이 생겨서 무한스크롤, 탭, 모달, 토글 등을 라이브러리 없이 직접 구현하려고 노력했음 3. 혼자서 처음부터 끝까지 프론트를 만들어봄. ssr과 csr의 차이를 알게됨. 비동기 로직이 뭔지 이해하고 커스텀 훅으로 api 서비스를 분리하는 방법을 알게됨. webpack과 babel이 뭔지 알게됬으나 production용 세팅은 못했음 msa환경을 직접 구현해야했는데 aws ecs에 container 배포 후 ssr이 안되서 결국 next js를 반쪽짜리 프레임워크로 활용. 지금은 왜 안되는지 docker network와 container에 대해 공부함. 이때도 타입 상속 등은 많이 미흡했고 추론과 가드는 못함. pg 결제 모듈에 대해서는 아예 타입 추론을 못했음.. 4. ssr에서 필요한 함수들을 미흡하지만 활용할 줄 알게됨. 간단한 웹팩과 바벨설정은 구글링해서 어느정도 찾아볼 수 있게되었음. 간단한 배포환경은 어느정도 구축 할 수 있게됨. react-native를 시작하게되었음. 리덕스말고도 아토막하게 관리하는 리코일등을 활용할 수 있게되었고 각각의 상태관리 라이브러리들의 철학과 목적이 뭔지 알게됨. 하지만 아직도 상태관리쓰는게 많이 부족함. 디자인 패턴이 있다는걸 알게되었고 미흡하지만 찾아가면서 조금씩 적용해보려고 노력하게되었음. 랜더링 최적화라는걸 알게되어서 useCallback, useMemo등을 적극적으로 활용하려고 노력 중.. 타입추론과 가드를 통해 타입 레벨로 코드를 짜려고 노력하게됨. 좋은 코드를 짜다보니 당연하게 유틸과 커스텀 훅으로 모듈을 하나하나 분리해보기 시작함. 유틸은 어느정도 만들어내는데 커스텀 훅은 아직도 잘 못함. 리액트 쿼리의 존재를 알게되었고 이것저것 찾아보면서 뚝딱거리는 중. 리액트도 테스트가 가능하다는걸 알고 jest, testing library, detox등을 활용하려고 준비중임
4개 프로젝트를 반년동안 했구 지금은 4번 프로젝트를 하는 중입니당 1 2 3 4 가 프로젝트 하고 느낀 짧은 회고 입니당
개인적으로 저는 next.js를 하시는 리액트를 하시든 그렇게 큰 상관은 없을 것 같습니다 ㅎㅎ 오히려 저는 next.js에서 리액트처럼 라우팅처리와 환경설정을 안해서 더 빠르게 훅이나 jsx을 익힐 수 있었던것 같네요
제가 반년전으로 되돌아간다면 next js 더 붙잡고 인프런 인강도 찾아가며 제대로 해볼것 같습니다
저는 학교에 프론트 개발자가 한명도 없어서 혼자 이것저것 해가며 공부했어서 서러웠던 마음에 더 길게 적었던것도 있네요..! 아무튼 next js공부는 강추입니다!
엄청열심히하는분이네요
존경스럽습니다^^..
오호...
멋있으십니다
시간을 엄청 효율적으로 쓰시네요
(우와)
신입사원은 도대체 뭘 해야 하는가 (feat. 1-3년 차) https://www.youtube.com/watch?v=qL77xKKGpiw - 개발 얘기는 아니더라도 너무 공감되는 말이 많아서 좋은 내용이라 공유해봅니다. ㅎ
안녕하세요 리액트네이티브관련해서 궁금한게 생겨서요! 리액트 네이티브 개발하실때 환경변수는 어떻게 관리하고 계시나요? https://brunch.co.kr/@newnorm/90 제가 이 블로그를 봤는데, 리네에서는 환경변수를 서버에서 api로 받아온다는 글도 있더라구요 혹시 다른분들은 어떻게 관리하고계시는지 궁금합니다!
이모티콘 다들 좋은 아침입니다!!!
좋은 아침입니다 ~! 궁금한 게 있는데 혹시 화면 비율 (세로인지 가로인지) 알 수 있는 방법이 있을까요? 제가 반응형을 구현하면서 모달창의 이미지를 2 가지 (가로형, 세로형)을 준비했는데 화면 비율을 어떻게 알 수 있는지 모르겠어서요 ㅜㅜ
height, width 값을 비교하면 될듯 합니다
css로 확인해도 되나요 ?
만약 css로 확인한다면 @media (orientation: portrait) { /* Portrait 모드일 때 적용할 CSS */ } @media (orientation: landscape) { /* Landscape 모드일 때 적용할 CSS */ }
정말 감사드립니다 🙇♂️ 제가 찾던 것 같아요 ㅎㅎ 잘 쓰겠습니다 ㅎㅎ
답변 주셔서 정말 감사드립니다 🙇♂️🙇♂️
<Radio> {({ check }: { check?: boolean }) => { console.log('check'); return <div>{check ? '확인' : '노'}</div>; }} </Radio> 혹시 위와 같은 방법으로 사용을 해보려고 하는데 위처럼 사용하는 경우에는 안의 함수를 컴포넌트로 인식을 못하게 되는데 방법이 있을까요?
화이팅입니다 !
함수를 호출해주세요 {(() => {return <></>})()}
혹시 udemy에서 colt steel 이분 강의 수강하신분 계신가요?
알고리즘 강사인가요?
맞다면 저 앞부분 수강했습니다 천천히 보고있는중이라
네 자바스크립트 알고리즘 자료구조
강의 어떤가요?
자바스크립트 이해도 높아야지만 들을수있을까요?
저도 아직 자스 공부중인 학생인데요 강의자체로만 봤을 땐, 자스에 대해 깊이 알지못해도 이해 가능했던 것 같아요. 그렇지만 퀴즈들은 아무래도 자스를 해야 풀 수 있는 것 같고, 퀴즈 해설이 없는 것들이 꽤 많아서 하나하나 구글링해서 알아서 찾아봐야해요
구글링해서 관련 레퍼런스를 찾아볼수 있을정도의 자스 실력이면 충분합니다
감사합니다 일단 들어봐야겠네요
코테언어 파이썬 말고 자스로 해도 되겠죠?,,
fe면 코테 자체가 js로 나오는 경우가 많아요
파이썬보다 자스가 무조건 낫다고 생각해요
C언어는 좀 고민해볼만하지만 프론트 개발자 코테 언어에서 파이썬 - 자스는 비교가 안되지않나 싶을 정도로
파이썬이 코테하기 좋은 언어는 맞지만 저도 자스 추천입니다
감사합니닷
사진
답변 감사합니다! headless 코드를 봤는데 이부분이 잘 이해가 가지 않아서 질문 드렸었습니다!
얼굴마사지하는 제이지님이 나갔습니다.
리액트 화상채팅 기능 넣고 싶어서 webrtc ,socket i.o 공부하려는데 좋은 강의 추천해주 실 수 있을까요?.?
노마드 강의 중에 그런 내용 다루는게 있던거 같은데
니꼴라스 줌 클론코딩이용
강의보단 문서를 많이 찾아보시는거 추천드립니다. 쉬운 기능이 아닐거에요
보통 react 에서 title 값 설정해주실 때 react-helmet 쓰시나요 ?
저는 헬멧 사용 중입니다 ~
제 생각에 document.title 로 변경할 수 있을 것 같은데 혹시 react-helmet을 사용하는 이유가 있을까요 ?
helmet이
그런방식으로 작동하는 걸로 알고있어요
실제로도
감사합니다!
자바스크립트로 백엔드, 프론트 동시에 왔다갔다 하면서 하니 헷갈리더라구요..ㅠㅠ
그래서 실제 seo 하려면 ssr필수라고 알고있습니다
렌더링후에 동적으로 변경하는거라
리액트로 webRTC가 없군요..ㅠㅠ
리액트는 뷰를 담당하는 라이브러리일뿐..
다른 것들은 직접 구현하거나 다른 라이브러리를 사용하면 됩니다
title만 설정할 수 있는게 아니라 각종 meta 태그들도 설정할 수 있고, 상위단에서 헬멧 씌워두고, 아래에서 헬멧 덧씌우면, 덧씌운걸로 갈아치기 되는등, 수작업으로 하는 것보다 더 편하긴 해요
리덕스랑 미들웨어 너무 어렵게 느껴지는데 .. 꼭 해야할까요?
저는 리덕스가 어떻게 작동하는지 flux 패턴 공부해보고 recoil했는데,, redux도 해볼껄 후회중임다 ㅜ
ㅠㅠ 독학으로 하는데 리덕스 너무 짜증나네요
상태관리는 꼭 만나게 될 애라 ㅠㅠ 저는 처음 할 때 생활코딩 듣고 했는데 설명 정말 잘 되어있어요! 화이팅입니다!
리덕스 어려워요.. 저는 우아한 테크러닝? 거기서 김민태님이 강의로 만들어보셔서…
그거보고 대충이해했어요..
감사합니다 ㅠㅠ 리덕스를 리액트에 적용시켜서 뭘 만들려고 하는게 잘 안되네요
혹시 GIthub Token 발급받는 방법 바뀌었나요? 원래 Github > Setting > Developer settings > Personal access tokens 들어가면 됬었던거 같은데 사라졌네요 ㅠ
리덕스가 진입장벽 조금 있고, 보일러플레이트가 좀 많은게 단점이긴 하지만, 이해하고 나면, 제일 명확하고 깔끔해서 좋긴 했어요. 괜히 예전의 대장이 아니긴 함
물론, 요즘은 다른 것들도 많이 쓰이고는 있으니 두루두루 알아두긴 해야하구요
쓰신 그대로인 듯 합니다. 저는 잘 보이네요?!
음악듣는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
시무룩한 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
앗 그러네요 ㅠ 제가 못찾고 있었네요 감사합니다.
음악듣는 어피치님 시무룩한 튜브님~ 방갑습니다 :) 어서오세요 +_+
울고있는 어피치님이 나갔습니다.
이 책 혹시
보신 분 계신가요?
cracking the coading interview 번역본이라고 해서 사볼려구요
저 사두고 책장에 쳐박아만 뒀네요 ㅎㅎ.. 일반적인 내용을 다루다보니 FE 개발과는 관련성이 없는게 많아서 좀 눈이 안가게 되네요 ㅎㅎ
아하 그런가여?
저는 코테용으로 구매하는거라
코테용으론 어떤가요?
뷰넉님이 나갔습니다.
코테용 아니고
실리콘밸리 스타일 면접용입니다..
화이트보드 손코딩 + 이론
프론트엔드 주특기이고 혼자서 프로젝트를 해보려고 하는데요. 백엔드 구현은 아직 제 실력으로는 힘들 것 같아 고민입니다. 백엔드 없이는 어느 정도까지 프로젝트를 구현해야 할까요?
아하아하.. 그렇군요...
감사합니다~!
파이어베이스 사용하면 따로 서버구축없이 쉽게 백엔드 적용가능합니다.
혹시 모바일프로젝트 해보신분들중 에서 웹뷰는 다른 프로젝트로 따로 관리하시나요 아니면 같은 프로젝트로 관리하시나요?!
이번기회에 nestjs를 배워보시는건 어떨까요.
타입스크립트가 왜 OOP로 써먹기 좋은지 저는 nestjs로 많이 배워서 백엔드공부에도 좋더라구요.
단순 next js도 좋은 대안이 될 수 있습니다.
nestjs는 손대지 않으면 좋겠네요. 현재 수준에선 너무 과합니다
곰곰님 말씀대로 next.js 같이 간단한 api 엔드포인트 작성만 해보고 나머지는 프론트에 올인하는게 좋아요
비옷입은 튜브님, 프론트신입생존기님, 곰곰님, 인성님 말씀감사합니다~ 알아보겠습니다~
아 그리고 혹시 반응형 웹을 적용하려 하는데 프로젝트 초기부터 적용하는게 나을까요? 아니면 pc웹브라우저 사이즈로 먼저 완성하고 반응형을 적용하는게 나을까요?
예전에 경력자분께서 적용시점은 아무때라도 괜찮다고 하시던데 제 생각에는 프로젝트 초기에 반응형을 잡아야 나중에 복잡하게 코드 건들일 필요가 없지 않나 생각이 들었습니다
같이하는게ㅜ편하지 않을까요?!..
테일윈드 같은경우는 기본사이즈가 모바일기준이라 저는 반응형 처음부터 모조리 잡고갑니다…
아하 알겠습니다
리액트 디렉토리 구조(best practice) 참고할만한 곳 있을까요?
바나나코드님이 나갔습니다.
감사합니다 ㅎㅎ
ㅋㅋㅋㅋ 여의도 화이팅...
판교로 가고프네여 케케
화이팅입니다 ㅋㅋ
스프린트 후기가 너무 너무 늦었네요. 20명도 넘게 참석해주 역대급 스프린트 후기 글 남겨보았습니다. 다시 한번 참석해준 모든 참가자 분들에게 감사를 표합니다. :) (디자이너는 언제나 환영입니다.) https://velog.io/@teo/google-sprint-9
톡게시판 '공지': 스프린트 후기가 너무 너무 늦었네요. 20명도 넘게 참석해주 역대급 스프린트 후기 글 남겨보았습니다. 다시 한번 참석해준 모든 참가자 분들에게 감사를 표합니다. :) (디자이너는 언제나 환영입니다.) https://velog.io/@teo/google-sprint-9
오픈소스 컨트리뷰톤 해보신 분 계실까요?
저 지원했는데 응답이 온건가요 두구두구..
전 아쉽게도 불합이네요 ㅠㅠ
저도 불합이네요 ㅠ
다들 어떤거에 지원하셨어요??
저 githru 지원해서 합격했는데
이거 회사 다니는거랑 병행이 가능할까요?
이메일로 결과 왔어요!
예전에 오픈소스 컨트리뷰톤 했을때 현직자분들도 있었어요!
혹시 추가 메일 오셨나요?
아녀 아직 안 왔는데 번호를 조회해보니까 있더라구여
아아 혹시 많이 빡세셨나요?
저도 githru 붙었어여!
그렇게 빡세지는 않았어요!
오 대박
잘배우겠습니다...
오오 감사합니다!!
ㄴㅋㅋㅋㅋㅋㅋㅋㅋ
아녀....
저도 배우는 입장일것같아서
다들 짬짬히 시간 내서 꾸준히 기여하는 분위기였어요!
무섭기도 하면서도....
아 완전
주5일 이런건 아닌가보네여
그건 뭐하는거에요?
저도 githru 붙었어요!
githru 가 뭔가여?
오 붙으셨어요?
두 번 하시는거에여?
혹시 모바일의 웹 브라우저에서 로그인 유지할땐 다들 어떤 방식으로 하시나용,,?
네! 그런데 첫번째하는건 데이터분석쪽이었어서
이번에 vs익스텐션은 처음이에요!
이거요!
매년마다 오픈소스 기여하는 프로그램이 열리는데 거기에 있는 프로젝트들 중 하나에요!
아하.. 저도 데이터시각화 경험 어필해서 붙은거같은데
타로님도 관련된거 하셨나보네요
아하아하~~!
답변 감사합니다!
네 저는 pandas 관련하고, 전공수업에서 들은거 하고, 사전과제에서 에러난거 썼었습니다
아는게 하나도 없능거 보니 고수시네요
잘 배우겠습니다...
vs 익스텐션인데 깃 흐름 보여주는 익스텐션 같습니다!
타로님 재학생이신가여??
저는 이제 막학기 8월 졸업 예정입니당
아하 졸업예정이시군여,, 많이 배우겠슴다,,
저도 절대 잘하지 않아요ㅠ 많이 배우겠습니당
어흑 안됐네요
저도 떨어졌습니다 ㅜㅠ
합격 후 멘티 안내 메일 스팸함에 있네요 ㅋㅋ,,,
헐 덕분에알았습니다 감사합니다
깃쓰루 많으시군용 다행입니다
음악듣는 어피치님이 나갔습니다.
안내메일 확인까지가
전형인가보네요
꼼꼼함이 있냐
혹시 안드로이드에서는 안생기는데 ios에서만 생기는 오류가 있나요??
매우매우 많습니다...
하하...참 재밌네요!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅠㅠ
맞아요! 웹만 해도 사파리는 이제 IE같은 존재가 되어버렸죠 ㅠ 예전에는 ios는 전부 업데이트 충성도가 높아서 무조건 최신을 써도 좋았던 시절이 있었는데 애플이 사파리는 별로 투자를 안하는 느낌입니다
크롬 짱짱맨
브레이브는 이번 업데이트 하고 좀 맛이 간느낌...
사실 요즘 웨일이나 브레이브나 죄다 크로미움 기반이라 크롬에서 못벗어나는....
열심히청소님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요! 이제 곧 1년차가 되는 프론트엔드 개발자입니다
이모티콘
환영합니다!! 한참 프론트엔드 재밌을 시기시네요!!! 열정이 있을때 호기심이 많을 때 많은 것들을 물어보시고 가져가실 수 있었으면 좋겠습니다 :)
한참 재밌으면서도 무엇을 해야 할지 고민이 많은 시기인거 같기도 합니다 ! 환영해주셔서 감사합니다😃
요즘 이직준비하면서 궁금한게 하나가 있는데요.. 제가 경력이 2년이면 이제 3년차 개발자가 맞는거죠?
사람 나이랑 똑같은걸로 알고있습니다
감사합니다.. 세상에.. 아무것도 한게 없는데 경력만 쌓여버렸네요
오 저도 이거 헷갈렸는데 완전 이해되네요 k-나이인거죠!?
이모티콘
아 한국식으로요
네ㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋ
12개월 지나면 2년차인가용?
그냥 예를들어 작년 5월에 커리어를 시작하셨다하면 지금 2년차이신거죠
이게 맞아요
아하에서랑은 다르네요ㅠㅠ
아하에선 3.1일 입사자는 내년 3.1일 이후 1년차라고 나와 있는거 같은데
헷갈리네요!
아하에서는 법적인 연차 발생기준 때문에 저렇게 말한 것 같아요 밑에 더 읽어보면 통상적으로 한국식 나이대로 연차 계산을 한다고 나와있네요!
오오미
김치코인 아하토큰!
요새는 css와 관련된 컨텐츠를 찾아보기가 힘든데 뭐 사람마다 다르겠지만 css 관련 내용으로는 어떤것들을 좀 찾아서 보는 편이신가요?
반응형을 안 해봐서 전 요즘 반응형 찾아보고 있습니다.. ㅠㅠ
저는 select를 만들고 있는데 select처럼 css가 안되는 요소들은 어떻게 커스텀 스타일링을 해야할지 고민이라 찾아보고 있습니다..
오픈소스 컨트리뷰톤 붙으셨는데 메일이 안온거 같으면, 스팸메일 한번 확인해보세요!
css는 요즘 따로 하나하나 공부하기 보단 방법론 위주로 아티클을 보는거 같아요!
얼마전에 텍스트길이나 element 갯수가 달라져서 overflow 됐을 때, 즉 한 줄 아니라 여러 줄이 됐을 때 스타일링을 다르게 해주는 작업을 하느라 어떻게 css만으로 할 수 있나 찾아봤었어요. 결국 javascript로 overflow 감지를 해줬네요..
그쵸 이런건 css만으로는 안되죠. ㅎ
(best)
안되는게 맞군요 ㅜㅜ
css를 이용해서 작업을 하는데 그러면 애로사항들은 없나요? 마냥 css가 또 하게 되면 쉬운것만은 아닐텐데
요즘은 마니 참고하고있어요~~
같은 ui도 여러가지 속성들로 구현할 수 있을 것 같은데 내가 지금 정의한 css가 맞는건지 판단이 좀 어렵더라구요. 실력으로 구현이 어렵다 잘 모르겠다 하는건 디자이너분이랑 어느정도 타협해서 구현이 가능한데..
class 네이밍이랑 selector를 어떤걸 사용해야할지도 고민이구요. img[alt="…"] 처럼 attribute selector도 사용해보고 있는데 맞는건지도 궁금하고 얘기하다보니 끌어주는 사수분이 없는게 어려운 점이었네요 ㅎㅎ
태오님은 주니어 시절에 css를 사용하면서 어떤점이 가장 어려우셨는지 조심스럽게 물어봐도 될까요?..🥲
https://blogpack.tistory.com/765
저 주니어 시절에는 IE 6,7,8마다 다른 CSS 규칙을 익히는고 적용하는게 제일 힘들었습니다. ㅋㅋ (IE6은 돈을 2배로 받았어요. ㅋㅋ)
사진
구조화하는게 중요한거같아요
요즘 고민..0
오 직접 그리신건가요?
구현을 위해서?
아녀 ㅋㅋ
저런식으로 공통으로 쓸거를
구상중..
아아 저렇게 그려보는것도 좋아보이네요
그리고 최대한 class를 적게 쓰고 시멘틱하게 만들어 보려고 했었는데 selector도 화려하게 쓰고 그랬었는데 나중에 다 부질없다는 것을 알았죠.
이모티콘
혹시 react-native에서 asyncStorage에 있는 데이터를 가져와서 .map 시킬 수 있을까요 ?
그 시절에 비하면 개발하기 좋은 요즘이네요 :)
저 같은 경우에는 적게 쓰는게 좋은거다 정도가 확실한 기준인것 같아요. 중복을 제거하고 축약을 쓰고 margin만 조심해서 쓰고 가급적 flexbox로 해결하려고 한다 인것 같습니다.
새겨두기
단일 클래스로 쓰는게 정석이 될 줄은 몰랐습니다. 처음에는 그런것들을 적게 쓰고 최대한 시멘틱 태그를 이용해서 시멘틱하게 만들라고 배웠거든요. ex) section.contents > header > h1 { font-weight: bold } 이런식으로요 ㅎ
요새는 h1도 잘 안쓰는 추세라. ㅋ
아.. 제가 지금 그렇게 알고 노력하려고 하고 있는 단계인데 그 다음 단계가 있군요 ㅋㅋ
단일 클래스로 쓰는게 어떤건가요?
<div class="title">title</div> .title { font-size: 10px; font-weight:bold; } 이런식이요
엇 그럼 어떤 방식으로 사용하나요.. ? h1같은 경우는 seo 때문에도 쓴다고 들었는데 요즘은 다른방법이 있나요??
css에 굳이 태그들을 안쓰는 것 같아요
아아..
시멘틱이라는 개념이 차라리 class로 넘어가면 어떨까 하는 생각도 해요
div로 태그를 통일하고
지극히 개인적인 생각입니다ㅎ
그렇게해도 되는건가요..? 속편하네요..
제가 요새 하고 있는 작업들이 대부분 SPA이다 보니 더더욱 SEO는 신경을 안쓰는 것도 있고
medium과 같은 블로그에도 h1을 그냥 딱 1개만 쓰고 있고. ㅋㅋ
Spa이고 싶네요..
사진
오홍..감사합니다 !
블로그 서비스인 미디엄 코드인데 h1이 딱 3개만 있어요... 어차피 요새 검색엔진들이 HTML 시멘틱에 맞춰서 긁어가는게 아니라서 SEO를 위한 og태그와 title h1 nav 정도만 쓰고 나머지는 그냥 만들어도 크게 무방한 것 같아요
사진
https://schema.org/Organization
정규는 아니지만 크롤러가 속성으로도 데이터를 긁어갈수 있다고 하더라구여..
SEO를 봐도 h1태그는 페이지당 1개만 있는게 좋다고들 하구요 그러니 전체 페이지들을 너무 시멘틱하게 작성하려고 고민할 필요는 없는 것 같아요. HTML 시멘틱 태그들을 전체 페이지에서 <main> 1개 <header> 1개 <h1> 1개 <nav> 1개 <section> 1개 <article> 1개 <footer> 1개 만 넣어두고 나머지는 <div> <span>으로 도배를 해도 시멘틱에는 전혀 문제가 되지 않습니다.
(아예 안쓰란 얘기는 아닙니다. ㅎ)
아 ~~ 위에 말 듣고나니까 어떻게 해야할지 확 와닿았어요 !! 자세한 답변 너무 감사드려요 ㅠㅠ😂
보통 수습 탈은, 다른 회사 지원할때 담당자들이 어떻게 생각하나요??
시맨틱하게 쓰려고 div를 쓰면 안된다는 강박증 같은게 있었는데 뭔가 마음이 편해지네요 ㅎㅎ 감사합니다
혹시 vue를 열었는데
자꾸 1024포트로 열리는데 왜그런지 알 수 있을까요 ?
분명히 3000포트로 되어있는데
자꾸 1024로 열리네요 ...
사진
여기는 1024포트로 열리는데
3000포트로도 들어가지네요 ;;
혹시 마진 조심해서 써야한다는 말씀은 무슨 뜻일까요?
마진 상쇄때문일것 같습니다
리액트에서 해쉬태그 만드는 거 해보신 분 계신가요?.?
벨로그에서 만드는 방식말고 새롭게 만들어 보고 싶은데 감이 안 오네요..
부족한 저에게 키워드 하나라도 주시면 정말 감사하겠습니다!
이런게 있었군요… 감사합니다!!
정규식으로 되지않나여?
마진 상쇄도 있지만 마진은 자신을 중심으로 간격을 만들다 보니 컴포넌트에 마진이 있다거나 마진이 있는 박스를 같이 배치한다거나 하면 또 귀찮아지는 문제가 있습니다. 그래서 가급적 마진은 본래의 목적인 글자의 상하 간격에만 쓰도록 하고 가급적 가로의 경우 flexbox의 gap을 통해서 컨텐츠간 마진이 겹치지 않도록 하는 것이 좋습니다
해쉬태그라고만 하면 상상하는게 다를 것 같아서 조금 더 구체적으로 설명해줄 수 있나요? 어떤식의 형태라던가 방식이라던가
타입스크립트 서브타입에 대해 궁금한 게 있습니다~! 예제를 보고 있는데 맨 마지막에 함수를 호출할 때 인자에 값을 넣지 않아도 에러가 나지 않고 잘 실행되는 이유가 무엇인가요? 코드 —— class Person { } class Developer extends Person { coding() { } } function tellme(f: (d: Developer) => Developer) { console.log(f); } tellme(() => { ———> 여기서 왜 에러가 없는 걸까요? return new Developer(); });
아하… 그렇군요!! 그러면 컴포넌트 상하 간격에는 마진보다는 flex align 정렬 같은걸 통해서 하는게 나을까요?
네 저는 항상 gap을 추천드리고 있습니다 :)
답변 감사합니다!!! 마진 out!!!
타입스크립트 에러는 나고 있지 않나요? 런타임에서는 결국 자바스크립트라서 문제가 안될꺼에요 없으면 undefined니깡ㅅ
타입스크립트 에러도 없어요!
가급적 out입니다 절대란 없어요ㅎ!! 컴포넌트 내부에서 한정적으로 쓰이는 마진은 아무런 문제가 되질 않습니다. 컴포넌트 외각 마진은 안쓰는게 맞아요 ;)
넵 ㅎㅎ 감사합니다 :)
함수의 서브타입은, 함수의 인자는 반변이고 반환타입은 공변이기 때문입니다
피자 먹다 자는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
oauth 관련해서 질문드립니다 ! react-google-login 사용해서 oauth 구현하고있는중인데요 리다이렉트 후 url에 다른 정보들이 다들어가고 있는데 비슷한 상황을 겪으신분 계신가요 ??
사진
요거 아마도 리다이렉트 한 페이지에서 저 정보들을 처리하는 함수가 있어야 할 것 입니다...!! 저는 리액트는 아니고 뷰로 구현하려고 하기는 한데 관리자도구 여셔서 무슨요청 보냈나도 한번 확인해보세요!!
넵 감사합니다 확인해보독할게요
Flex gap 최고
https://youtu.be/jaGnaygzdJA 이번에도 리액트 이야기네요 ㅎㅎ
저도 관련해서 궁금증이 많은데 고수 분들의 댓글을 기다려봅니다☺️
공유 감사합니다! ㅎㅎ 흥미로운 주제네요
한 줄 요약하면 "프론트엔드에서의 DI 활용에 대해 코드 예제와 함께 설명해주실 프론트엔드 고수 찾습니다"네요 ㅋㅋㅋㅋ
어제 백엔드 개발자분이 프론트엔드에서는 di 관리해주는 도구를 무엇을 쓰는지 물어보는데 제 경험이 짧아 제대로 설명 드리지 못했었는데... 비슷한 내용인 것 같아 궁금하네요!!🥺
angular의 DI나 class 방식으로 개발하는 방식이 주류로 선택을 받지 못했던것은 다 이유가 있는 것인데... 프론트엔드에서 선택을 받지 못했단는 것에 대해서 이해를 하기 힘들어하시는것 같네요. 해석을 해보자면 객체지향 프로그래밍을 하면 될텐데 왜 굳이 객체지향 프로그래밍을 안하는 방향으로 하려고 할까요? 그러면 의존성 주입이나 DI등을 못쓰고 그러면 결합도와 응집도도 안되고 아키텍쳐적으로도 좋지 않은 것 같은데 이런내용으로 들리는데 고민을 좀 해볼만한 주제인것 같네요
다들 개인적으로 그냥 자바스크립트에서 객체지향 프로그래밍을 굳이 안하는 이유가 뭐라고 생각하세요?
딱히 이점이 없어서??
지난 영상을 보고 자바는 아니지만 네스트로 간접체험 하고 있는데, Api호출을 레포짓토리 레이어로 보려고 한다 라는 부분에서 와 이분들 뼛속까지.. 라는 생각이 듭니다 🫢
반드시 객체지향이 아니어도 할 만 해서?
데이터를 받아오는 부분을 레포지토리로 생각하는 방법은 저도 요즘 들어 항상하면서 작업하고 있었던 부분 같아요!! 아시오스가 아니어도 다른 라이브러리로 교체하기도 편할 거 같고
맞아요 그래서 msw나 miragejs 처럼 API 영역을 mock해서 다른 값들을 전달해주는 이러한 형태의 라이브러리들도 존재하고 axios를 굳이 교체하지 않아도 mock이 레파지토리 레이어 역할을 충분히 해줄 수 있다고 생각합니다
자바스크립트 태생이 프로토타입이기도 하고 저는 왜 자바스크립트에서 객체지향 아닌지 보다 프로토타입 기반 언어인 자바스크립트가 왜 프론트에서 주류가 되었는지가 생각해봐야될 생각이라고 생각이 되네요
ㅋㅋㅋ 그건 대안이 없어서? ㅋ
저는 아직 초심자라 선배님들의 답을 알고싶습니다 🙏
그럼 axios를 언제든지 갈아끼우기 쉽게 공통 모듈을 만들고 레파지토리로 관리했을 경우엔 api를 모킹하지 않고 테스트할 수 있는 거예요??
Muzi\\님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 Devastated Ryan님~~ 반갑습니다 :)
이모티콘 안녕하세요!
그렇죠. 그냥 한번만 function으로만 감싸고 axios를 직접 호출하지만 않고 fetch_xxx() 이런식으로 함수만 만들어도 layer가 만들어지는 거니까요
OOP의 핵심이라고 할 수 있는 캡슐화와 은닉화를 제대로 구현할 수 없어서 JS에서 OOP가 사양되는 거 아닐까요? TS를 통해 간접적으로 가능하지만, 결국 바닐라 JS니까요
함수형으로도 객체지향과 같은 프로그래밍을 구현할수있어서..?
옹 그렇네요 프론트는 애초에 다 공개되니까
답변 감사합니다! 프론트엔드에서 DI를 적극 활용한 오픈소스 프로젝트가 있을까요?
최근에 Mobx를 써보면서 클래스형와 함수형 둘 다 사용해봤는데 함수형이 훨씬 코드가 적고 쉽게 사용이 가능하더라구요. 그런데 클래스가 좀 더 안정적인 느낌이 든다고 해야하나..? 딱딱 나눠진 것 같아서 협업하기에는 더 좋은 것 같아요. 그래서 개인적으로 뷰는 함수형, 비즈니스 로직은 클래스형으로 하는 게 아직은 더 좋아보여요..!
드림코딩 엘리 리액트 강의에 DI에 대한 내용이 잠깐 나오긴 합니다. 저도 궁금하네요 🤔
body 데이터들을 변환해서 받으면 객체라서 더 그런것 같아요
https://sac4686.tistory.com/55
개인적으론 개발편의성과 프론트의 문화때문이라고 생각합니다. 개발기술스택 변화나 요구사항의 변경등이 백엔드보다 더 빠른 프론트엔드에서는 di나 클래스설계나 이런 복잡한것들을 고려할 시간보다 빠르게 대응가능한것들이 더 중요하다고 생각되지않앗나 싶습니다. 더 좋은 기술이 항상 개발자들에게 채택되는것은 아닌 이유들이 이런것들이지않나 싶습니다. 백엔드의 기술스택이 프론트엔드에 올라와서 아키텍처적으로 탄탄해지면 더좋은거아니냐라고 주장하면서 그러한 시도들이 리액트에서도 mobx에서도 어노테이션이나 클래스문법으로 시도되엇지만 결국 더빠르고 더편한 기존의 개발방법으로 개발자들에게 외면받앗기때문에 적용되지못햇다고 생각합니다. 먼가 뉘앙스가 백엔드의 기술이 더좋은데 프론트가 받아들이지못햇다같은 느낌도 드는거같은데 프론트의 빠른 변화에도 어울리지못한것도 큰 원인이라고 생각됩니다
오 감사합니다 강의 들어봐야겠네요
건방진제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
너무 좋은 답변 갑사합니다. 그렇죠. 프론트엔드가 추구하고자 하는 방향성은 백엔드랑은 결이 다른 것 같아요. 더 적게 쓰고 싶어 하고 큰 효율을 얻으면서 그렇지만 변경에도 유연할꺼야.. ㅋ
건방진 제이지님 반갑습니다 :)
안녕하세요 반갑습니다 :)
기술에 너무 닫혀 있으시네요
일부로 어그로는 끄는게 아닐까 싶을정도
ㅋㅋㅋㅋ
근데 또 반대로 그들의 생각을 한번 이해하려고 노력하게 되는 계기도 되는 것 같습니다 ㅎㅎ
맞아요 어그로라도 항상 프론트엔드 진영 이야기만 듣다가 백엔드, ios, 안드로이드 쪽에선 다 저렇게 하는데 너넨 왜 이렇게 안 해? 이런 외부 시선으로 이야기 들으니까 토론도 활성화되고 재밌는 것 같습니다
빠르고 맛잇고 탄단지 균형잡힌 햄버거를 제일 좋아하는데 맛잇는 음식 사주겠다고 프랑스 정찬 레스토랑에 대리고가서 식사예절부터 잘못됬다고 "??: 얘 밥 먹을줄 모르네" 하는 느낌??ㅎㅎ
그쵸 DI에 대해서 코드로 설명해달라는 얘기에 많이 고민을 하고 있습니다. React의 Provider나 Context API에서 함수나 객체를 전달하는 방식이나 그냥 하다못해 fetch_items(http, params) 이런식으로 함수 인자로 의존성 주입을 받는다거나 import 모듈을 교체하거나 mock 서버들도 어찌보면 DI와 목적은 크게 다르지 않는데 말이죠. ㅋ
훅 좋은데 왜 스프링에선 훅을 안쓰냐? 라는 느낌인건가요?
이건 프론트엔드의 역할 때문에 그런거라고 생각해요 ㅎㅎ 보통 백엔드에서 객체지향을 하는 이유는 복잡한 도메인 로직을 관리하고, 도메인 로직과 네이티브간의 격리를 위해서라고 생각하거든요. 그런데 프론트엔드에서 도메인 로직을 처리하는 경우가 거의 없기 때문에 굳이 객체지향을 깊게 적용할 필요가 있을까? 하는거죠 가령 계산기를 만든다고 치면 이건 객체지향 없이 관리하기가 무척 힘들어요 계산기라는 앱을 다루기 위해선 UI를 그리는 부분과 계산기 도메인을 다루는 부분을 분리해야 할텐데 대부분의 웹서비스는 UI에서 입력 받고 서버에 요청 보내서 응답 받고 출력해주는거죠 도메인 로직이 거의 완전히 백엔드에 위임된 상태입니다 그러니까 굳이 객체지향이 필요할까? 하는거죠 반대로, 리액트로 UI를 만드는게 아니라 리액트 자체를 만든다고 생각하면 객체지향이 빠질 수 있을까요? 다루는 영역의 차이라고 생각합니다 ㅎㅎ
달려라급식차님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 달려야 급식차님 반갑습니다!! :)
안녕하세요 :)
그래서 객체지향을 경외시 하기 보단 객체지향이 추구하는 목표나 개념은 꼭 숙지할 필요가 있다고 생극해요 그래야 어려운 난이도의 일을 할 때 조금 더 수월하지 않을까 싶네요 ㅋㅋ
공공님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
벌 서는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 공공님 벌 서는 라이언님 반갑습니다 :)
안녕하세요!
이제 5개월된 주니어 개발자입니다. 스타트업에 다니고있는데, 이번에 경력개발자 뽑는 면접에 저도 같이 들어가게되었습니다. 기술적으로는 선임분들이 물어볼것같은데 저는 저희팀이랑 핏이 안맞는지 질문을 해야할것같아서 어떤 질문이 좋을까요??.. 혹시 여러분들은 어떤 개발자 혹은 팀원이랑 일을 하고 싶으신가요?..
테오님이 저쪽에 출연하실생각은 없으십니까 ㅎㅎ 뭔가 세분이 대화만 나눠도 엄청 배울게 많을 것 같다는 생각에 ㅎㅎ (농답입니다.)
하지만 저는 React 전문가가 아니라서 안됩니다. ㅋㅋㅋㅋㅋ
초롱초롱 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 초롱초롱 무지님 반갑습니다 :)
안녕하세요 테오님 블로그 보고 들어왔습니다. 반갑습니다:)
드림코딩 엘리님 영상인데 참고하시면 좋을 것 같습니다 https://www.youtube.com/watch?v=yA4d5ZydVVQ
감사합니다!
건초염 진단 받았습니다.......
이모티콘
저는 면접자의 입장에서만 참여하긴 했지만 인성관련은 주로 협업에 대해서 많이 물어보셨던것 같아요 협업시의 태도나 팀원들간의 의견차,갈등이 일어날때 취하는 방식같은걸 물어보셨어요!
소심한 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 소심한 네오님 반갑습니다.
오늘 뭐가 링크가 공유됬나요? 엄청 오셨네요!! 모두 모두 환영합니다.
안녕하세요 :)
여기는 프론트엔드나 개발에 대해서 궁금한 것들을 질문하고 또 내가 안다 싶으면 대답을 해주면서 함께 성장하고자 하는 공간입니다. 실무, 관심사, 고민상담, 내가 쓴 자랑글, 사이드 프로젝트 구하는 글, 홍보글 뭐든 상관 없으니 편하게 글 남겨주세요 :)
혹시
앱개발해서 등록 최근해 해보신분 계신가요?
요즘 플레이스토어 앱등록이 어려운지 궁금합니다.
괜찮으신가요? ㅠㅠ 개발자가 이렇게 위험합니다. 잘 회복되시길 바래요
왜 개발자가 되고 싶어했는지 뭘 만들고 싶은지 개인적으로 좋아하는 라이브러리들은 있는지 우리 회사에서는 어떤 걸 해보고 싶은지 기술을 좋아하는지 서비스를 좋아하는지 개발 고민은 어떻게 푸는 스타일인지 혼자서 집중해서 코딩하는게 좋은지 같이 떠들면서 하는게 좋은지 문서화는 좋아하는지 싫어하는지 이런 것들을 물어보면 될 것 같네요. ㅎ
혹시 루비온 레일즈 전망은 어떤가요??
기존 갖고 있는 기술 스택은 React인데, 루비온레일즈 제안이 와서 ..
안 좋다고 봅니다..
오른손잡인데 신기하게 왼손에 걸렸네요 ㅠ 신경써주셔서 감사합니다!!
물론 쓰는 덴 많이 쓰고 있는 걸로 아는데 레거시가 대부분일거고 특히 리액트에서 넘어갈 메리트는 없다고 봐요
다른분들도 평소에 관리 잘하셨으면해요 ㅠ
루비온 레일즈는 사장까지는 아니지만 좀 애매한 위치라고 생각합니다. 개발속도는 빠르지만 서비스가 성장했을때 트래픽 관리에는 용이하지 않다고 저희 백엔드 개발자가 말씀해주시면서
결국 대규모 전환작업에 들어갔었거든요. 아무래도 스타트업에서 서비스를 빨리 만들어보고 해서 서비스를 키우는데에는 도움이 될 지 몰라도 기술적인 성장을 생각하시는 거라면 강하게 추천드리기는 어려울것 같아요
혹시 유데미 강의보시는분 계신가요?
저요
클린코드 타입스크립트봅니다
저요
지금은 리액트 보고 있어ㅛ
저는 재무분석 및 투자 보고있어요 ㅋㅋ
유데미 스크린샷찍으면 검은색으로 찍히던데 이거 스샷찍는방법없겠죠…? ㅠㅠ
일부러 막아놓은거같긴한데..
대부분
강의사이트들은 다 그럴걸요?
인프런도 그래용
컨텐츠 제공하는곳은 drm때문에 다 그럴거에요
이거는 스샷찍는방법 없겠죠..?ㅜㅜ
네 .. 강의 자료를 따로 올려주신거 아니면
핸드폰으로 사진을...
프론트엔드 개발자에게 어느정도 디자인 감각이 있어야겠죠?
있으면 좋습니다. 가끔씩 디자이너들이 요청한대로 그대로 구현이 안되는 경우가 있는데 그걸 모르고 지나친다거나 내 맘대로 수정해서 디자이너가 요구한대로 구현이 조금씩 안 맞기 시작하면 좀 서로 피곤해집니다. ㅎ
그렇군요.. https://cantunsee.space/ 이거 해봤는데 결과가 썩 마음에 안들더라고요..
ㅋㅋㅋㅋㅋ
이거 재밌네요
2222 일단 결과가 잘 나와서 기분이 좋아요 ㅎㅎ
좋은 정보 감사합니다
안녕하세요 제가 수요일에 최종면접 보고 일주일 이내로 결과를 알려줄거라고 했는데 아직까지 답을 못 들었습니다. 인사담당자랑은 문자로 2번 정도 대화한상태고 정말 너무너무 궁금한데... 결과 언제쯤 나오냐고 문자해보고 싶네요. 그래도 내일까지 기다려보는게 답이겠죠? ㅎㅎ ㅠ
넵ㅎㅎ
꼭 그런 타이밍에 전화할까하면 늦은시간에 연락오는경우가 허다하더라구요
일주일 안에 결과 말씀드린다고 했으니 일단은 기다리시는게 좋을거 같아요ㅎㅎ
기다리기 정말 힘드네요 ㅋㅋㅋ 넵 감사합니다
힘드시겠죠 ㅠㅠ 다른 거 하면서 시간 잘 보내보십쇼 윗분들 말대로 일단 약속했던 시간까지는 기다려 보시는게 좋을 것 같네요
이모티콘 네!!
넵! 답변 감사합니다 ㅎㅎ
제가 이번에 인턴을 지원하는데 기업에서 아래와같은 팁을 제시하더라구요 1.자신 있는 스킬을 보유하고 있는지, 성실한지, 책임감을 보여줄 수 있는지, 진츼적인 자세와 성실성, 서류 제출시 수행한 과제 결과물과 포트폴리오를 제출해줄것 2.JD를 참고하여 스크리레벨에 기재된 기술스택 및 수행 프로젝트를 중심으로 작성바람, 전화 기술면접으로 외부 대행업체가 진행하고 필요하면 2차 대면면접 진행, 함께 성장하고 싶은 진정성과 개발역량 및 기술 경험을 비중있게 봄, 젊고 글로벌한 조직 3. UI/UX 디자인은 Figma 사용, 필수는 아니지만 웹툰/웹소설 플랫폼 시장에 대해서 얼마나 이해하고 있는지를 작성해주면 좋겠다. 웹/앱 개발에 대한 기본적인 이해가 있는지 관련 경험에 대해 기술해달라. 평균연령 20대의 젊은 스타트업, 자유로운 공간
인턴도 기업면접과 동일하게 이력서와 자기소개서를 적는게 좋을까요?
크롬 옵션에서 영상재생 하드웨어 가속 끄고 해보세요
네 그렇지만 가이드를 저렇게 줬다면 저기에 맞게 한번 다시 적어보시는 것도 좋을 것 같네요. ㅎ
아하 알겠습니다.! 한번 핏에 맞게 다시 작성해봐야겠네요! 감사합니다~.~
react suspense의 경우 비동기적으로 데이터를 가져올때 fallback에 명시되어있는 컴포넌트를 렌더링하다가 비동기페칭이 다되면 suspense 하위에 있던 컴포넌트를 다시 렌더링하게되는거같은데요. 코드 읽기가 편해진다는거 왜에 이점이 어떤게 있을까요????
오 그거 리액트 블로그에서 본 거 같아요
선언전인
코드로 작성되어서 그렇습니다!
그리고 내부 하위 컴포넌트 코드에 로딩, 에러와 관련된 코드가 사라지게 되죠
딱 필요한 부분만 컴포넌트에 작성되어있어서 코드 가독성도 좋아지는 측면이 있는 것 같아요
https://github.com/reactwg/react-18/discussions/37 이거 참고해보시면 좋을거같아요
suspense를 활용한 streaming ssr인 상태라면… 좋아보이던데
지금까지의 suspense 는 그냥 가독성 차이뿐이었고 isLoading 분리한거랑 뭐가 다르냐는 비난이 있었다 리액트 18부터 이게 도입되면서 개쩔어질거다
요런 내용입니다
ssr이 아닌 환경(ssg)에서 활용하려면?? 아직 큰 이점은 없나부죠?..
감사합니다 참고해볼게요~
요 표현은 다른 글에서 봤나.. 확실하지 않네요 아무튼 댄 아브라모브가 직접 써놓은 글이긴 해요
Ssr되어있을 때 먼저 인터랙트하는 부분을 먼저 fetch하고 막 그런
저 부분은 ssr 할때 비동기적으로 완료되는 순서대로 렌더링되는거같고
하이드레이션도 포함해서 도중에 인터렉션하게되면 해당부분부터 하이드레이션을 먼저 시작하게된다던지하는듯합니다.
csr에서의 suspense는?? 뭐지 싶네요..
csr도 로딩상태가 있을수도 있어서요
단순 loading시 fallback.에 지정된 컴포넌트를 렌더링해준다? 인건지..
csr에서도 컴포넌트를 lazy loading 처리할 수 있죠
suspense 말고 방법이 있나요?
csr에서의 Suspense는 lazy, 페칭처리.. 를 비동기적으로 사용할수 있을듯해보이네요
안녕하세요 최근 커피챗을 통해서 한 시간가량 이야기를 나누고 나서 기술면접을 보게 됐습니다. 기술시험에 대해서 좀 더 명확하게 물어보는 메일을 보내도 될까요? 알고리즘을 보는건지, 과제전형인건지 등등 무엇을 준비해야하는지 모르겠습니다. 커피챗 할 당시엔 기술면접이 있고, 오프라인으로 진행된다 는 설명만 들었습니다. 보통 어떻게 진행되나요,,,?
사람마다 회사마다 다르긴 한데 일반적으로는 기술관련 질문을 하고 심층 질문을 하고 지식이나 문제해결능력을 확인하고자 함입니다. 간단한 코드를 작성하게 하고 설명하라고 하거나 화이트보드를 두고 본인의 프로젝트에 대한 설계를 설명해보라고 하는 등 방법은 다양합니다. 기술면접에 관해서 질문 메일을 물어보시는 것은 좋으나 원하시는 형태처럼 굉장히 구체적인 답변을 얻지 못할수도 있다는 것은 알고 계시면 좋을 것 같아요
근데 저도 궁금한게 커피챗하고… 면접 들어가면 커피챗에서 궁금한거 다 물어봐버리는데.. .
혹시 면접에서 궁금한거 물어보라고 하면 어떻게들 하시나요..
저는 보통 1. 코드리뷰를 하나요? 한다면 어떻게 하나요? 2. 회사 내에 스터디가 있나요? 지금 하고 있는 스터디는 무엇인가요? 이런 거 물어봐용
너무 많이 물어보면 힘들어하실 거 같아서 2개 정도 질문하는데, 어떤 회사는 어? 더 물어보시지! 하는 곳도 있었어요 ㅋㅋ
툴 뭐쓰는지..
깃 쓰는지..
기본적인거라도..
저는 회사 기술스택 보고 이 기술을 선택한 이유? 혹은 이러한 툴을 쓰는 이유 등등 물어봐요
저는 비즈니스에 대해 물어봤는데 좋게 봐주셨어요
그래도 같이 일하는데 어떤걸 만드는지, 뭘 목표하고 있는지 모르고 일하는건 아닌거같아서
그럼 커피챗에서는 무슨대화들을 하시나요..
저 진짜 엄청 물어보거든요 커피챗에서?? 그럼 면접에서 물어볼게 없어져서.. .
ㅋㅋㅋㅋㅋㅋㅋㅋ
면접 끝나고 식사할만한곳..?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
저 면접때 계속 질문하라고 하셔서 11개 정도 한적있습니다ㅋㅋㅋ
전 수익구조 물어봤다가
1시간 강연 듣고
나와서 불합 했슴다
ㅋㅋㅋㅋㅋ
저도 비슷하게 ott추천서비스 면접 갔다가
아무리해도 비엠이 안보이길래
비엠 질문했다가
떨어졌어요
아무런 의미 없으니 그냥 궁금한거 여쭤보세요
아 저 그것도 물어봤어요
면접 질문 중 혹시 의도하신 방향으로 대답하지 못했던 질문이 무엇이 있었는지
아 좋네요
이건 어딜가도 물어보는데
선풍기 바람 쐬는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
다들 좋아하시더라구요
CTO님들은 엄청난 TMI 분들이 많으셔서
AWS 람다랑 헬스케어에 대해서 강연 들었던 적도 있어요
어젠 저 면접보는데 최종 커리어가 뭐냐 물어봐서 언젠간 공동창업으로 CTO로 창업해보고싶다 라고했더니
여긴 연봉테이블에서 제가 희망연봉 불렀다가 탈락..
창업이야기만 30분 해서
혹시 창업이야기를 많이했는데 이게 마이너스일지 걱정된다고 했더니
오히려 목표가 있는게 좋아보인다고 답변오기도 했어요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
좋네요
전 개발자의 개발자가 되고 싶다고 했는데
비웃어서
기분 확 상한적도 있었슴다 ㅠ
2년차 주니어개발자가 창업을 생각하고 있어서
마이너스일까봐 ㅠㅠ
개발자의 개발자 멋있당👍
근데 그게 자극이 되더라구요 블로그 포스팅도 열심히하고 신기술 있으면 최대한 따라해볼 수 있는 예제도 만들어보면서 같이 연습중임당
나중에 npm라이브러리랑 책도 내보고 그러면 개발자의 개발자가 되지 않을까요 흐흐
세미님이 나갔습니다.
chany님 반갑습니다 :)
요즘 프론트엔드가 알아야하는 기술도 많아지고 새로운 기술 스택이 많이 등장하는데 이직한 회사에서 사용을 안하고 주변에서는 많이 사용해서 그런지 조급함이 많이 생기더라구요..이전 회사가 jQuery를 사용하던 환경이었어서 또 도태될까하는 걱정이 큰 것 같습니다..! 퇴근후나 주말에 공부를 계속 하는데 저만 이런 조급함이 있는걸까요?ㅎㅎ 다른 분들은 어떻게 생각하시는지, 이런 상황에서 어떻게 하시는지 궁금합니다..!
https://jsisweird.com/ 재밌는 사이트네요~ 알아두면 쓸데없는 자바스크립트 deep dive를 하게 만들어주는 시간이 될거에요. console창 없이 한번 try 해보세요. ㅋㅋ
조급함이 생기죠 잘 압니다. 나는 그대로인데 세상이 빨리 가고 있어서 뒤쳐지는 기분. 특히 프론트엔드의 경우 더 심하긴 하죠. 그나마 안정화가 되고 있는 요즘이라고는 합니다만... 한번만 주류를 쓰고 있는 회사로 이직만 해도 안심이 될텐데 그 과정에서 순탄치 않으면 어쩌나 하는 생각이 드실거라고 생각해요. (그리고 실제로도 증명을 하기가 어렵기도 하구요) 그래도 퇴근 후 주말 후 공부를 열심히 하신다고 하니 기록들을 남겨가며 1번만 이직으로써 증명해보시길 바래요~
19점이네요.. ㅋㅋ 아 오늘 업무할 때보다 더 머리쓴듯
와! 고수시네요!! ㅋㅋ
ㅠㅠ흐으… 결국 잘 준비해서 이직이 답이군요…! 말씀 정말 감사합니다!!
삭제된 메시지입니다.
아니면 회사에서 새로운 기술 스택을 도입을 해보자고 말하시고 한번 시도를 해보는 것도 추천을 드립니다. 된다고 하면 그게 공부를 하는 것보다 훨씬 더 나은 선택이고 면접이나 이직때에도 할 말이 더 많을 수 있어요. ㅎ
어허!! 컨닝페이퍼 안되요. ㅋㅋ
엇 ㅋㅋ 그렇네요 다른분들을 위해 지울께용 ㅎㅎ
ㅋㅋㅋㅋㅋ
그렇군요..!! 점점 물경력만 쌓이게 될까 고민인 것 같습니다..! 회사 분위기가 너무 안정적인 기술을 지향하다보니 저에게는 독이 되는 것도 있네요…ㅠㅠ
엇 뭐였나요 궁금해요 ㅋㅋ
테오님 주신 링크의 답지 같은 거였어요 ㅎㅎ 링크로 드릴게요 문제 푸실분은 다 푸시고 보세요~ http://m.humoruniv.com/board/read.html?table=pdswait&pg=0&number=9519620
ㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
와...........
11점이네요,,,ㅋㅋㅋㅋㅋㅋㅋㅋㅋ보면서 어떻게 이런문제를 내지 했어요..............
12점이네요 ㅠㅠㅠㅋㅋㅋㅋ 공부 많이 해야겠어요
저도 한번 부셔보겠습니다.(부셔질 예정)
"" - - ""
이건 도대체가 뭐죠?
처음봐요 이런 거
너는 자바스크립트 개발자가 아닙니다 오늘부로..
ㅋㅋㅋㅋ
ㅎㅎ 아마 0 - (-0) 으로 해석될거에요
와
찍어서 맞은거 있는데도
많이틀렸네요
... 여러분... 알아둬도 정말 쓸데 없습니다. 재미로만 보세요. 재미로만ㅎㅎㅎ
010 ;;;;;;;;;;
The comma operator simply returns the value of the last operand.
ㅋㅋㅋㅋㅋㅋㅋㅋ 신기하네요
자바스크립트 설계가 요따구다... ESLint에서 하지 말라는데는 다 이유가 있는 거다. Typescript 연전연승...!
린트야 고마워....
사진
콘솔창 키니까 ㅋㅋㅋㅋㅋ
그와중 꿀팁까지 ㅋㅋㅋㅋㅋ
멋져용
ㅋㅋㅋㅋㅋ
어떤 기술 스택을 쓰고 있나요? 프론트엔드는?
타스를 지양하셔서 주로 es6기반의 바닐라로 작업을 하고 있고 리액트를 사용하는 쪽은 클래스형을 사용하고 있습니다..!
그런거보면, 저는 프론트엔드가 저 혼자밖에서 없어서... 최신 기술스택 회사 프로젝트에 적용해 볼수있는건 또 작게나마 좋은점일 수있겠네요.... 대신......사수가 없습니다....
코드량이 많나요? 클래스형이라고 하면 좀 오래되었을 거라 이제 와서 다 바꾸기는 쉽지 않기는 하겠죠
요새 프론트엔드 역사에 사수가 있으면 얼마나 있을 수 있겠습니까... 내가 선택하고 책임지고 가야죠!! 화이팅입니다
js를 ts로 바꾸는 것은 그래도 strict를 없애도 한번 해봄직하지 않을까 싶긴한데 말이죠
아무래도 유지보수도 어렵고 node버전도 너무 오래돼서 기존에 함수형으로 작성되어있던 것을 이제 node버전 업 시키고 바닐라로 변경하는 작업을 하는 것 같습니다!
안녕하세요 구글 소셜 로그인을 벡엔드분과 맞춰보다가 궁금증이 생겨서 여쭤봅니다! 구글 로그인버튼을 클릭하면 백엔드로 통신을 보내고, 회원가입이 되어있다면 'JWT토큰'을, 회원가입이 되어있지않다면 임의의 'google_id _number'를 받기로했어요. 그리고 google_id_number를 받게 되면 회원가입창으로 이동하고 사용자가 회원정보를 작성하면 다시 쿼리에 google_id_number를 넣어서 보내주기로 계획했습니다. 여기서 궁금한게 login과 join 컴포넌트가 달라 google_id_number 어떻게 넘겨줘야할지 모르겠습니다. 애초에 google_id_number를 redux를 사용해 전역으로 관리하는게 가능한가요? redux를 쓰게된다면 thunk라는걸 통해서 google id number를 받은 후, 사용자가 작성한 회원가입 정보와 함께 다시 보내는게 가능한가요?
하면 굉장히 좋을 것 같아서 의견을 여쭤보면 ts 도입 자체를 지양하셔서 어려울 것 같습니다.. 흡 뭔가 비즈니스 로직을 풀어가면서 성장하는 것도 많을 것 같은데 아쉽게도 사이드 프로젝트를 많이 해야하나 생각중입니다..
일단 가능하긴 합니다
그게 맞는 건지는 좀더 고민해봐야 하겠지만, 아무튼 가능은 해요!
어쩔 수 없에요. 의지를 가지고 있어도 힘들판에 위에서 그렇게 나온다면 도태될수 밖에 없을텐데... 아니면 한번 해보겠다고 하고 도전 해보시는 건 어때요? 그냥 해서 잘되면 되돌릴 이유가 없어서 허락보다 용서가 빠르다고 ㅋㅋ
ㅋㅋㅋㅋ 서비스 규모가 커서 힘들 것 같지만 열심히 설득해보겠습니다..!ㅎㅎ
어딘가에서 많이 봤던 분위기네요 바닐라에 함수형 라이브러리에
설득이 안되더라도 한번 typescript로 스스로 바꿔보시는 것을 공부하는 것 교보재로 사용해보시면 학습에 훨씬 더 도음이 될 것 같아요!! 화이팅입니다~
이모티콘 ㅎㅎㅎ 네 알겠습니다!! 같이 고민해주셔서 정말 감사합니다!
개발바닥 영상 댓글에 테오 댓글이 진짜 도움 많이 됐습니다
감사합니다~
감사해요 테오👏
8기 스프린트하고 삘받아서 취업했어요~! 테오, 정말 감사해요❤️ 덕분에 면접에서 스프린트 이야기 많이 했어요🥰 (오늘 스프린트 사람들 만나기로 했어용)
취업 축하드려요!!!! 저두 담에 실력 좀 기르면 9기 참여하고싶네요 ㅎㅎㅎ
취업 축하드립니다! ㅎㅎ 스프린트는 주로 단톡에서 모집을 하시는건가요?!
9기는 이미 해서 이제 10기 차례니 곧 공지올라오면 꼭 해보세요👍👍
규칙적으로 하는건 아니고 테오가 시간 나실때 단톡으로 공지해서 모집후 조 편성해서 하는걸루 알고있습니당
아하!ㅎㅎ 감사합니다!!!
잉열!!! 헬렌 완전 축하해요!!! 뿌듯하네요 잘하셨습니다 ㅎㅎㅎ
테오 나중에 시간되시면 또 만나요🥺
좋아요!! ㅎ
사실 클래스를 안쓰는 이유는 데이터와 로직을 아예 분리하려는 시도가 프론트엔드에 훨씬 많기 때문인것 같습니다
객체지향은 클래스가 핵심이 아니라 데이터를 객체안에 쑤셔넣고 그 데이터를 핸들링할 권한을 그 객체에만 캡슐화하는게 핵심입니다
인터페이스 분리니 생성자주입이니 뭐니 클래스니 이런건 부차적이고 원래 es6이전에도 js는 객체지향 언어였죠
Object Orient지 Class Orient가 아니니까요 ㅋㅋㅋㅋㅋ
저번에 ts jum인가 블로그에 요즘 ts에서 잘안쓰는 이넘으로 스파게티 코드짜놓거보고 약간 의아하긴 했는데 애초에 java자체가 클래스 없으면 이야기가 안되는 언어다보니 그러려보다 했습니다
뭐 튜플이라던가 파라미터 다형성이라던가 불변이라던가 객체지향과 리액트의 사상은 애초에 다른차원의 이야기라
신나는 프로도님이 나갔습니다.
ts jum이 뭔가요?
https://jojoldu.tistory.com/621
이글이네요 ㅋㅋ
ul에 li를 비동기통신으로 추가해주고있는데 늘어난 li만큼 스크롤이 안되는건 왜일까요..
혹시 테스트 코드 작성하시면서 axios mock adapter 사용해신 분 계실까요??
궁금한 점이 있어 질문남겨요~~ 폼의 값을 이용하여 url에 쿼리문을 붙인 링크로 이동한다면 a태그를 활용하는게 시멘틱할까요 버튼 태그가 시멘틱할까요??
<button type="submit" /> <input type="submit" /> 얘들 아니려나요?
form method=get 을 이용해서 submit으로 가는게 일반적일 것 같아요
미편집본이고 2시간 분량의 영상이긴 한데 내용이 좋아서 공유해봅니다 플러터와 리액트네이티브, 스벨트에 관한 개인 PT입니다 https://youtu.be/xxSKi2Jjvl0
퇴근후맥주님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
흐.... 포스트 리액트라니...드디어 리액트도 막을 내릴때가 온건가요
설마요. ㅋㅋㅋ
지금 리액트로 만들어질 레거시가 얼마나 많을텐데 jQuery도 아직 건재하잖아요. ㅎ
퇴근 후 맥주님 반갑습니다 :)
안녕하세요! 반갑습니다!! 😄😄
근데 사실 리액트가 사용된건 한국이 3-4년 밖에 안되었지만 미국에선 7-8년전 부터 사용했었더라구요
저도 리액트가 이렇게 나이가 많은지 깜짝 놀랐습니다
어서오세요~ 이곳은 프론트엔드 개발이나 프론트엔드와 협업을 하면서 느끼지는 궁금한 점들을 함께 나누고 대답하면서 함꼐 성장하고자 하는 곳입니다. 직군 직무 현업 실무 이론 개인 개발 고민, 좋은 링크, 재미난 거리등 편하게 글 남겨주세요 ㅎ
그치만 리액트의 전성기는 정확하게 hook 기반이라고 봐야 하지 않을까 싶어요
훅 기반이 아니란거는 useState도 없던 시절도 있었던건가요?
태오님! 디스코드 초대장이 유효하지 않다는데 참가 불가능한건가여??
네...this.setState하던시절이
있었죠
그 시절이 더 길죠
ㅋㅋㅋㅋㅋㅋㅋ
아 저는 접한지 얼마 안되서 놀랍네요 ㅎ
리액트 16.8.0이 2019년 2월에 나왔고 지금이 2022년 7월이니 훅을 쓴 게 길게 쳐줘도 3년 반 정도?
seoul.kidico.kr 국가 지원 부트캠프 프로그램이 교육생 선발중에 있어서 혹시 주변에 개발자를 하고 싶어하는 지인분들 있으시거나 독학중에 부트캠프 수료 고려중이신 분들을 위해 링크 업로드 드립니다!
https://discord.gg/ZCFTMTfGQj 초대장 링크를 다시 만들었습니다. 바꿔놓을게요 알려주셔서 감사합니다
요즘 실무에서 상태관리툴은 뭐가 대세인가요??
리코일이나 리액트 쿼리 많이쓰나요??
리코일은 저는 잘 안쓰지만 react-query 엄청 애용하고 있어요 ㅋㅋ 부가적인걸 너무 쉽게 해주네요 ㅋㅋ
지표를 보면 그런것 같아요. react-query는 확실히 react 진영에서 대세가 되었구요
recoil은 구 redux시절 처럼 당연히 recoil 이정도 급은 아닌거 같아요
recoil은 쓰다보니 부족한 점이 많았고 오히려 zustand 가 더욱 유익하더라구요
리덕스 미들웨어 보다는 리액트 쿼리에 좀 더 집중하는게 나을까요?
react-query + context API react-query + recoil 이정도 급이 무난하게 지금 쓰는 트렌드 같아 보입니다. recoil 자리에 zustand나 jotai도 종종 보이는 것 같은데 엔터프라이즈 레벨에서는 잘 모르곘습니다. 저는 실무에서 react를 쓰고 있진 않아서요 ^^;;
둘의 성격이 달라요. 집중의 의미가 어떤 건가요? 학습?
실무에서 스벨스 사용하고 있으신건가요 !?
네 군대 전역하고 이제 공부한지 4개월정도 됐는데 학습겸 취업준비도 하려구요
스벨트!
react-query랑 mobx는 어떤가요?
네 저는 실무에서 svetle를 쓰고 있어요
차이를 물어보시는 건가요 1?
아뇨 같이 조합해서 사용하는것에 대해서 여쭤본것이엿습니다
요새 stateofjs에서 설문을 안하고 있다보니 트렌드 파악이 어렵네요 ㅎ
상태관리는 2020년 이후로 조사를 안하고 있어서
https://bestofjs.org/projects?tags=state github 스타로만 보면 이런데
https://bestofjs.org/projects?tags=state&sort=yearly 최근 상승세를 보면 이래요
react-query와 mobx를 함께 배민 주문팀에서 사용하고 있다고 알고있슴당
오 그렇군요
조합 자체는 크게 상관은 없을 거라고 생각합니다. mobx도 많이 사용하고 있는것으로 나와요. 오래전부터 제공하기도 했고
리코일 조합도 괜찮다고 들었어요!!
저도 최근 스타트업 기술 면접에서 몇 군데에서 리액트 쿼리에 대해 질문 받았어요!
네 주문팀의 경우 주문 상태에 따라 다양한 상태가 존재하였고 이를 단일 스토어에서 구분하기에는 어려운 점이 존재하였습니다.
react-query는 그냥 API를 처리하기 위한 기본 라이브러리로 자리잡을거라고 보입니다. axios처럼요
딱히 대체제가나 경쟁구도가 없어서요
그래서 비대해진 스토어를 다이어트 시키고 서비스 로직에 집중하여 상태를 관리하기 위해 react-query를 채용하였고 이때 client state는 기존 리덕스보다 가볍에 관리하고 기존의 비대해진 단일 스토어를 탈피하기 위해 mobx를 채택한것 같더라구요
거의 필수로 익혀야할까요..?
mobx 쓰는 프로젝트에 리액트쿼리를 도입해서 사용해봤는데 둘이 정확히 타켓하는게 달라서 사용하는데 큰 문제는 없었습니다. 다만 mobx가 클래스로 다뤄지는 경우가 많다 보니깐 함수컴포넌트랑 잘 어울리진 못했어요
배민은 객체지향으로 작성하는걸 좋아하는 느낌을 좀 많이 받았습니다. 테크톡같은걸 봐도 리액트 쿼리의 글로벌 에러 핸들러를 클래스로 짜더라구요
react-query 대체제가 swr 정도인데.. swr이 초반에 잘 나가다가 주춤세라...
저는
swr이랑 react-query 둘 다 사용해봤는데
react-query가 제공해주는 기능들도 더 많고 좋은 것 같아요
그러니까요. swr이 업뎃을 더 해주는 것 같지도 않고 해서
딱히 대체제가 없는 상황입니다. mbox나 recoil이나 jotai나 zustand처럼 올망졸망 상황은 아니라고 보여져요
저도 next와 좀더 많은 연계를 바라고 swr를 사용해봤는데 최근에 리액트쿼리로 변경했습니다
저도 딱 이랬었는데 vercel을 보고 썼는데 query가 더 좋더라구요
그러게요 vercel에서 좀더 밀어 줄만도 한데 말이죠
아하! swr 2.0을 만들고 있군요!!!
아직 beta네요
오 그건 또 몰랐네요
오 그렇군요
나오면 지켜봐야겠네요. ㅋㅋ
swr 쓰는 1인..ㅎㅎ 아직 swr도 활용 잘 못하고 있지만 리액트쿼리 궁금하네요..
둘다 비슷합니다. 컨셉도 쓰는 방식도.. swr이 좀 더 가벼운 느낌이라면 react-query가 조금더 기능을 많이 제공하는 형태라고 보시면 됩니다~
아하 그렇군요..!!
혹시 useMutation 하실때 1번 api 성공 -> 2번 api 실행 해야할때 어떤식으로 구현하시나요?
onSuccess로 넘겨주거나
묶어서 뮤테이션 펑션으로 넘길 것 같아요
2번을
뮤테이션 펑션은 혹시 뭔가요??
단계가 2단계 뿐이면 이쪽 사용할 것 같습니다
useMutation에 넘겨주는 첫번째 파라미터가 보통 mutationFn인데 요거요 ㅎㅎ
인자로 넘겨주고 mutate 호출하면 실행시킬 함수를 말하려 했습니당 react-query useMutation 말씀하시는게 맞을까요?
저도 mutate에 넘겨줄 mutationFn 함수에 묶어서 사용하는것 같아요!
네넵 맞슴당
아
아하아하 ㅎㅎ
이해했슴다
어떤 방향으로 구현하는지 이해가 되었네요
왜냐면 저는 1번 api 의 onSuccess에 2번 api의 mutate를 넣었는데 좀 뭔가 번잡해보였거든요
const mutateFn = async () => { const res1 = await fn1(); const res2 = await fn2(res1); … } … useMutation(queryKey, mutateFn);
수도코드로는 요런 느낌일것 같아요
그러면 궁금한점이
제가 queryCache를 통해서 글로벌하게 401 에러 핸들링을 하고 있는데
그렇게 할려면 mutateFn을 고차함수로 구현하여 분기처리를 리액트 쿼리한테 위임해야하는데
그럴때 평소 하시는것처럼 then.catch로 여러번 해서 구현하시나요?
아니면 리액트 쿼리에서 401에러를 잘 핸들링하는 방법이 궁금합니다 ㅠ
Jotai나 리코일 잘쓰시는분 계시나여
아무래도 서버에서 리스트로 내려준 데이터를 아래로 보낼일이 많다보니 바텀업 스타일인 저친구들보다 zustand가 쉽고 잘팔리는것 같은데
사진
지금은 이렇게 핸들링하고 있는데
서버개발도
혼자 하신건가요?
리프레시 토큰 구현하기 어렵던데 ㄷㄷ
에러 핸들링 후 에러난 부분의 쿼리를 리프레쉬 하고 싶은데
방법을 잘 모르겠네용
쿼리키를 잘쓰면 될것같은데 라이브러리서 콜백으로 쿼리키를 넘겨주는지 모르겠네여
멋쩍은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
쿼리키는 모르겠는데 해당 쿼리를 넘겨주긴해요
저도 이번 프로젝트에 리액트쿼리를 처음 써보는걸
거라 어렵네용~.~
음, 저도 확실한건 아닌데 response.config.url에 요청 url이 정보가 담겨있지 않나요?_? url로 요청한 쿼리를 찾아서 해당 쿼리를 invalidate 시켜주면 어떨까요?
next 에서 헤더를 레이아웃 컴포넌트에 넣어서 _app.tsx에 설정하고 헤더를 사용하지 않는 페이지는 레이아웃 컴포넌트에 props 넘겨줘서 사용하지 않는 식으로 작성하려고 하는데 혹시 다른분들은 헤더를 사용하지 않는 페이지 예외는 어떻게 적용하시나요?
멋쩍은 튜브님 반갑습니다 :)
이모티콘 오늘하루도 괜찮은 하루 되셨길 바라고요! 날이 더워요 ㅠㅠ 꼭 건강 잘 챙기셔요!!! 특히 땀띠 조심하세요!
감사합니다 :)
그렇게 말씀 주셔서 감사합니다!
눈빛 애교 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
눈빛 애교 어피치님!! 반갑습니다 어서오세요 :)
이모티콘 안녕하세요! 프론트엔드 시작한지 6개월된 응애 개발자입니다 ㅎㅎ
응애
환영합니다!! 이곳은 프론트엔드 개발을 하고나 프론트엔드와 협업을 하면서 궁금했던 것들이나 좋은 것들을 공유하고 또 대답하면서 함께 자라는 공간입니다 ㅎ 뭐든 편하게 글 남겨주세요 :)
이모티콘
갑자기 궁금해진건데 테오는 실무에서 기술스택 어떤 조합으로 사용하세요?
svetle와 vite 그리고 rxjs를 응용한 제가 만든 상태관리와 adorable-css 이렇게 쓰고 있어요
제가 svelte를 할 당시 svelte에서는 상태관리쪽 라이브러리는 없었는데 rxjs와 svelte의 궁합이 좋기에 ngrx를 모티브 삼아서 조금 더 쉽게 쓸 수 있게 만들어서 잘 사용하고 있습니다 :)
와 모티브로 새로운 길을 개척하시다니 넘 멋지네요..!!
감사합니다 :)
많은 도움이 되었습니다!! 테오님 댓글도 인상깊게 잘 봤습니다.
https://cssbattle.dev 재밌는 걸 발견했습니다. css 대결을 할 수 있는 게임? 입니다.
history.push가 지금 리액트 18에서 쓰는 navigate랑 똑같은 거 맞나요?
이모티콘
열심히코딩공부님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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
열심히코딩공부님 눈물 흘리는 제이지님 시작님 모두모두 반갑습니다 어서오세요 :)
안녕하세요 반갑습니다 😁
네!! 반갑습니다 :) 이곳은 프론트엔드에 대해서 궁금한 것들을 물어보고 내가 안다 싶은 질문에 대해서는 적극적으로 답을 주면서 함께 성장하고 하는 공간입니다~~ 잘 부탁드립니다 ㅎ
혹시 webpack loader가 있는데 babel을 활용하는 이유는 무엇인가요~~?
면접준비하다 궁금해서 여쭤봅니다!
음,,,
webpack의 역할을 여러개의 JS 파일들을 하나의 JS로 만들어 주는 역할을 합니다. Loader는 JS 파일이나 다른 파일을 불러와서 하나로 만드는 과정에서 가공을 하기 위한 장치 이구요 babel은 최신 JS로 짠 코드들을 구형 브라우저(ex IE)에서 돌아아가게 하기 위해서 구 브라우저 JS 포맷 - ex) ES3 - 으로 변환해주는 트랜스 파일러입니다. 정리하자면 웹팩이 만들어진 JS파일을 하나로 모아주는 역할을 하는데 이때 이 결과물을 구형브라우저에서 돌아가게 하려면 바벨을 중간에 거치게 하도록 한다고 설명하시면 면접에서는 문제없을겁니다
아.. 오타.. ㅠㅠ 제가 오타를 좀 많이 내는 편인데 알아서 잘 들어 주세요;;
와웅,,,
......!!!! 제가 번들러와 트랜스파일러의 차이를 잘 몰랐나보네요
외부파일을 어떻게 해석할지 알려주는것과 변환이 끝난후에 가공을 어떻게 할지 차이라고 생각했는데
혹시 다른개념일까요..?
덕분에 많이 알고갑니다 감사합니다 ㅎㅎㅎㅎ
아아
잘못이해했네욤
좋은 아침입니다! ㅎㅎ 혹시 여러분들은 깃 gui 어떤걸 애용하는지 알려주실 수 있나요? 계속 cli 만 사용했는데, 충돌 났을때 같은 경우를 위해 gui 를 활용해볼까 싶어서요~! 종류가 은근 많아서 고민되네용
깃 크라켄~
저는 맥에서 sourceTree를 사용하고 있습니다
학생계정으로 pro 버전 쓰고 있는데 램 많이 먹는거 빼곤 만족하고 있슴당
오 크라켄은 처음 들어보네요 ㅎㅎ 한번 찾아봐야겠습니다… 소스트리도 얘기 많이 들어봤는데 두개 한번 비교해봐야겠네용! 저한테 맞는걸로~! 감사합니다 ㅎㅎㅎ
크라켄은 유료 아닌가요??
cli 쓰다가 merge conflict 났을 때는 vscode로 resolve하고 있는데 혹시 개인 프로젝트보다 큰 스케일에서는 별로인가요?
큰 스케일에서 오히려 좋은것같아요
스케일 커져도 쓸만하군요, 감사합니다!
맞아요 브랜치 트리 확인하고 실수 없이 개발할 수 있고 git flow를 더 잘 활용할 수 있어용 충돌난 부분도 쉽게 확인할 수 있어서 좋아요
gui쓰면 가짜개발자라고 끝까지 gui안쓰고 pr 잘 못날리시던 예전 백엔드 개발자님,,, 늘 브랜치 꼬아놓으시고 reset hard 하다가 망가트려놓으셨는데
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
저도 맨날 얘기하는건데 GUI 쓰세요. 굳이 왜? 라는 생각이 듭니다.
수용하시고 네트워크 트리 확인하며 프로젝트에서 성과 내시고 싶으시면 추천~~
그럴거면 맥이나 윈도우를 안 쓰셔야죠
그분은 wsl이 있는데 왜 맥을 쓰냐고 끝까지 고집부리셨어서
어휴 ㅋㅋㅋ
저도 회사에 '누가 gui 써요' 하더니 어느샌가 cli 로 gui처럼 시각화해주는 툴 찾아다니는 개발자 봤어요.. ㅋㅋ
빠르게 프로젝트 끝내고 도망쳤슴당 ㅎ;
진짜 그런분들 너무 같이 일하기 힘들어요 ㅜㅜ
맞아요,,
괜한 이상한 부심부리는 사람들 꼭 있죠…
특히 GUI 프로그램을 만들어서 향상된 UX 경험을 파는 FE 개발자라면 자부심을 가지고 GUI를 쓰세요. ㅋ
이것도 선입견이라 조심스럽긴한데 그런분들중에서 프롬트 무시하는분들도 좀있어가지고 ㅡㅡ
혹시 그럼 에디터는 vim으로 하셨나요? (요즘 vim은 ide지원도 되어서 무시하면 안되긴 합니다만)
프론트로 무시당한적은 제가 개발하면서 한번도 없는것 같아용
백엔드 개발자라기보단 그분이랑 저랑 가치관이 좀 달랐었나봐요
웹무시하는 안드개발자랑 같이근무했는데
너무 같이 일하기 힘들었슴다
ㅜ.ㅜ
퍼블리셔 분들도 어렵지만.. 프론트를 예전에 퍼블리셔처럼 생각하셔서 예전에 무시하셨던 그분들이 많은거 같긴해요..
무시하면 그냥 흘리시는게 답
gui 써봐야겠네요
cli만썼었는데
flow랑,,,
저는 깃을 처음배울때 vscode 기본 gui로 배워서
체크아웃이나.. 체리픽은 그걸로 합니다..
나머지는 gui보고 리베이스까지 cli로 하고요
깃 그래프 좋더라고요
전 소스트리
바로 소스트리 깔아보겠읍니다
저는 깃 크라켄 사용하고있어요ㅎㅎ
개발바닥 최근 영상 보고 생각이 많아졌는데 (안 좋은 뜻은 아니구요) 혹시 프론트엔드 개발 현업에서는 비즈니스로직이 뷰 내부에 박혀 있는 코드를 마주하고 짜게 되나요??
전 많이 봤어요
그리고 경험상 그게 나쁘다고 딱히 확신에 차서 말하지는 못하겠더라구요
비즈니스로직도 뷰만큼 자주 바뀌어서 그런가요?
분리를 하면 파일 수가 많아지고 줄 수가 늘어난다는 단점이 생기는 대신 책임이 분리되면서 향후 유지보수성이 좋아진다는 장점이 생기는데
그냥 저 장점이 잘 체감되지 않더라구요 ㅎ 비즈니스 로직이 복잡하고 도메인이 빡셌으면 체감했을 수도 있을 거 같아요!
개인적으론 제가 실력이 부족해서 그런건지는 모르겠지만 ui로직과 비지니스 로직이 코드가 깔끔하게 분리하기가 쉽지 않은 케이스들 때문에 그러지않나 싶습니다.
지금 한달째 신생팀에서 들어와서 업무를 하고 있습니다. 현재는 채팅과 엑셀로 대부분의 업무나 이슈가 공유되는데용. 저도 왔을 때 온보딩이 없다보니 많이 힘들었어서요. API Docs 운영으로 Gitbook 유료플랜을 결재해서 쓸 것 같아서 내부 문서로 온보딩, 팀소개 문서를 만드려고 합니다:) 혹시 참고할만한 레퍼런스들이 있을까요? ㅎㅎ(한국어면 더 좋습니댱ㅋㅋ) 제 경험을 반영하는 것도 좋겠지만, 어떤 요소들이 있으면 좋을지 추가적으로 참고할 예정입니다!!
노션으로 공유하면 편합니다.. 엑셀… 너무 별로에요
이모티콘 다들 오늘도 적게 일하고 큰 성과나는 하루 되셔요!
이모티콘
자란다님의 센스있는 말들은 어디서 따로 배우시는건가요?? ㅎㅎ 항상 기분이 좋네요!
매일 생각합니닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그렇게 말씀 주셔서 감사합니다
자란다 프론트엔지니어 분들 많이 채용하셨나요? ㅎ
앗 자란다!!
전 광탈이었습니다 ㅎㅎ
다들 정보 search 가져오실 때 useSearchParams로 하시나요?.?
react 에서 버튼 이벤트를 사용해 react query mutation 을 통해서 서버와 통신중인데 간헐적으로 동시에 2~3 번씩 호출하는 경우가 있습니다. 이런 경우에는 어떤 부분을 확인해봐야할까요…!?
아니면 이런 부분을 어떻게 막을 수 있는 방법이 없을까요!?
넵
useQuerys 알아보시면 도움되실 것 같습니다!
ies
usequeries
URLSearchParams 로 직접 처리할때도 있어요
답변 감사합니다!!!!
혹시 어떤 내용들로 보통 구성하시는 지 알 수 있을까요😏😏
말했던대로.. 온보딩 팀소개 등등..
이거는 병렬 쿼리 작업할 때 사용하는거 아닌가요? 동시에 여러개!? 저는 일어나지 않게 하고 싶습니다 ㅠ
아아 일어나지 않게요 옵션을 활용하시거나, useCallback 같은 거 쓰셔야 할 거 같은데 저도 궁금하네요 ㅋㅋㅋㅋㅋ 저도 재랜더링 되는 거 막으려고 며칠 전에 여기에 여쭤봤었는데 아직 정확한 해답을 찾진 못 했습니다. 그때 다른 분이 말씀하시기로는 옵션으로 staleTime infinity걸고 하면 될 거라고 하셨었는데.. 네 그렇습니다 저는 여기까지밖에 모르겠네요...ㅎㅎ
감사합니다 ㅠㅠ 저도 이래저래 usecallback 도 적용해 봣는데,,, 또 발생을해서 ㅠㅠ 매번 일어나면 원인이라도 찾을텐데,,, 간헐적으로 일어나니 참 답답하네요 ㅠ
엇 그 다른 분 저인 거 같네요 ㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋ 개인적으로 언급하는 게 실례일 수 있겠다고 생각해서 말씀드리지 않았는데 델님 아직도 감사함을 기억하고 있습니다! 👍👍
css 초기 세팅할때 어떻게 하시나요? 전체 선택자에 패딩 마진 0으로 하고 box sizing은 boder box로 바꾸는데 height width 는 어떻게 설정해야할지 감이 안오네요
reset.css 는 어떠신가요 ?
감사합니다 한번 살펴볼게요
얼굴마사지하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
재하님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세여
안녕하세요~~
헐..강아지 너무 귀엽다..
안녕하세요!
이모티콘
이모티콘
이모티콘
이모티콘
이모티콘
이모티콘
이모티콘
성능에 대한 악영향으로 타입스크립트의 enum을 지양하라고 핸드북에 보았는데, 그게 굉장히 큰 차이를 발생시키나요?
key, value로 관리할 데이터가 대략 200쌍정도 되는데, enum으로 관리할지 유니온타입으로 관리하는게 나을지 고민입니다. 그 데이터는 select로 여러군데에서도 쓰이고, table 데이터이기도 하고..그러다보니.. ㅎㅎ;;
재하님~~ 반갑습니다 :) 어서오세요 ㅎ
https://news.hada.io/topic?id=6921 명령어만 바꾸면 빨라진다니 신기하네요!!
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!!
넥스트 하다가 질문이 생겨왔습니다 /[id] 까지는 동적라우팅으로 처리를 했는데 이렇게 접근하면 그뒤에?page=1이런식으로 붙이고싶은데 구글링을해도 나오지않는데 검색키워드라도 알려주실분있나요 ㅠㅠ
쿼리파라미터 검색해보세요
저번에 개발바닥 영상 보면서 '레파지토리 레이어', 'DI' 이런 개념들이 나왔는데 무슨 말인지 모르겠더라구요.. 이런 개념들을 알고 이해하려면 어떤 키워드로 공부해보는게 좋을까요?
백엔드에서 주로 다루는 개념인 것 같긴 했는데 궁금해서요.. ㅋㅋㅋ
DI는 의존성 주입이라고 검색해보시면 됩니다
어서오세요 반갑습니다 :)
레파지토리 패턴등의 키워드나 도메인 주도 개발 이런것을 보시면 될것 같아요
오랜만에 개발바닥 이야기가 나와서 틀었는데, FE관련 영상이있길래 보는와중에 댓글에 태오님이 계시네요ㅎㅎ이방에서 저혼자 내적친밀감이 쌓여서 괜히 막 반갑고 그러네요ㅎㅎ
클린아키텍쳐 검색해보시면 많이나옵니다 :)
오왕 감사합니다
백엔드 조금 공부해볼까 생각하고 있었어요
음 저 아키텍쳐는 백엔드에 한정된 개념이 아니라서 알아두시면 좋아요
스프링 하면 Repository DI 둘다 공부할 수 있어용
개발바닥에서 신입 백엔드하네 스프링 프레임워크 공부하는걸 추천한 걸로 알아요
nest 추천합니다.
네스트는.. 스타트업에 좋긴한데 취업은 역시 자바가 맞는거 같아요..
그러면 특정 컴포넌트에 진입시 쿼리파라미터 주는것도 처리가 가능할까요??
맞아요 ㅋㅋ 근데 프론트면 Nest를 추천합니다. 저는 처음할때 Express로 서버 시작했는데 DI나 DTO DAO 이런 개념이 없어서 고생했는데 Nestj 나온 이후에는 공식문서도 잘되있어서 공부하기 좋은거 같아요 ㅋㅋ
특정페이지로 가면 router.replace를 하고싶어서요!
인사하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
next로는 해본적이 없는데 되지 않을까요
여기 대부분은 FE라서 nest 말씀드렸습니다 ㅎㅎ 스프링으로 업무 하시는거 아닐것같아서 ㅎㅎ
아아 ㅎㅎ 공부의 목적이라면 저도 nest추천하긴 합니다!!
감사합니다ㅎㅎ 공부할 거 많네요!
혹시 다들 퇴사하실때 인수인계서 같은거 어떻게 작성하셨나요..? 이번에 퇴사하면서 인수인계서를 작성하게 되었는데 딱히 정해진 양식도 없고 그동안 문서화된게 거의 없어서요.. 일단 README.md에다가 git관련 정보와 설치/실행/배포방법, 프로젝트 구조같은걸 작성해서 두긴 했는데 어떻게 해야할지 감이 안잡히네요ㅜ
남겨진 코드가 곧 인수인계
코드 보고 항상 파악했던것같아요
저는 노션에다가 정리하긴 했었는데 파악하기 힘든 비즈니스 로직만에 대한 간략한 설명이랑 나머지는 디디님이 적은 방법과 동일하게 적은거 같아여
그리고 이슈상황이런거 적어드리고 나온거같아여 ㅠㅠ
파악하기 힘든 비즈니스 로직 설명 ..!! 이슈상황은 항상 그때그때 급박하게 대처했어서. .🙃 히스토리를 거슬러서 저도 적어봐야겠어요 감사합니다 ㅎㅎ
안녕하세요 리액트 네이티브 에러 관련해서 질문이 가능하다면 사진속 에러는 어떻게 처리하는지 도움이 필요합니다ㅠㅠ
사진
무지성개발자님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
reset cache 하면서 start 해보시겠어요?
되게 오랜만에 보는군요 이 에러메세지
안녕하세요. 스벨트킷으로 프로젝트 중이에요. 백엔드를 네스트로 구축하다가 프론트개발에 더 집중하고 싶어서 디비는 레일웨이와 프리즈마로 연동하여 스벨트킷에서 api에서 일반적인 서버측 로직을 작성하고 있어요. jwt 로그인부분 이제 막 완성했는데 이렇게 스벨트킷으로 모든 서버로직을 작성했을때 야기되는 문제는 어떤것이 있을까요..?
안녕하세요~ 질문있습니닷 좋아요 같은걸 무한으로 클릭할 수 있다고 했을때 이를 매번 서버에 보내기에는 무리가 있을텐데, 보통 어떤식으로 처리가 되나요~? 2초마다 보내기 이런식으로 하시나요?
스로틀링과 디바운싱 검색해보세요 ㅎㅎㅎ
저같으면 무한으로 연속해서 빠르게 클릭할 수있다고 하면 클릭 후 1~2초 동안 클릭이 없으면 서버로 보낼 것 같아용 ㅎㅎ
아하 두분다 감사합니다~
이런 지식은 관련 책이 있나요??
흠 책보단
인터넷 자료 많습니다..
책은 출간되는 순간은 최신일지 몰라도
지나면 지날수록 지난 지식이라
블로그나 자료들 많이 찾아보려합니다
혹시 코드리뷰, 스터디문화가 없는 회사는 어떻게 생각하시나요?
그런 문화를 만들어가자고 제안 하거나 회사 형태에 따라서 그런걸 도입하지 못하는 경우도 있는거 같아요!
코드리뷰, 스터디 문화도 결국 시간을 내야 하는건데, 업무시간으로 인정해주지 않는 회사는 보통 그런 문화가 잡히지 않는 것 같아요.
코드리뷰가 없는 회사는 정말 가고싶지 않네요 ㅜㅜ
꾸준히 늘어나는 추세이지만 없는 회사 많습니다. 사정상 있다가 없어지는 경우도 있고요
당근도 몇달전까지만 해도 없었던걸로 알아요
지금은 있나..?
없는곳이 훨씬 많지 않아요???
일단 저희 회사는 있다가 없다가 합니다.
없는것도 나쁘기만 한 건 아닌 거 같긴 해요
사정에 따라~
코드리뷰도 잘 해야 좋지 잘 못 하면 병목+감정소모가 될 수 있어서
코드리뷰 문화가 잘 정착하기 위해선 일단 개발문화 이런걸 떠나서 서비스가 궤도권에 올라가야되는 것 같아요
맞아요 개발이 어느정도 안정화가되야…
그리고 코드리뷰를 잘 한단 건 결국 회사 리소스가 소모되는 거라.. 특히 개발자 몸값도 비싼데
부럽습니다 ㅠ 코드리뷰하는 회사…
문화가 없는것 == 좋지않은회사 와 같은 인과는 아닙니다 ㅋㅋ 워낙 안정되지않는회사는 빠르게 만들고 엎고를 반복하다보니 ㅜ
큰회사들은 보통있더라구용
소통 중심의 코드리뷰라면 꼭 필요하겠지만 코드 퀄리티를 위한 코드리뷰는 어느정도 규모가 있고 비즈니스가 안정화되어야 현실적인 성과를 낼것같네용
시니어 개발자가 코드리뷰를 해줄 여유가 있어야 가능한 것 같아요. 심적이든 시간으로든요
공감합니다..
암튼 첫 질문에 대해서는 저는 그냥 "코드리뷰가 없는 회사구나" 싶어요 ㅋㅋㅋㅋ 저라면 안 갈 거 같습니다 꿈을 펼치기보단 배우고 싶고 개발에 대한 토론을 하고 싶은 시기인지라
코드리뷰에서 얻고싶은게 어떤것인가요??
한가지 질문 있습니다. 혹시 리액트에서 버튼에 onClick으로 특정 id값을 넣었는데 받는곳에서 ID값이 아닌 이벤트 객체가 받는거는 어떻게 해야 하는건가요??
저도 코드리뷰 있는 회사 가고싶긴한데.. ㅠㅠ 회사 여건상 코드리뷰나 내부 스터디를 업무시간에 포함하는 회사를 찾아보는건 힘들었어서 ㅠㅠ
사진
이런식으로 콘솔을 찍으면
사진
이렇게 받아집니다… 저는 ID값을 받고 싶은데요ㅠㅠ
워라밸 중요하게 생각하시나요?
그냥 다같이 개발에 미쳐서 열심히 하고 엄청 고민하고 야근 좀 하고 하는 좋은 회사들은 많긴 하더라구요
신입으로 면접을 보러 다니고 있는데요 코드리뷰가 없으면 나의 코드는 엉망일게 분명한데 코드리뷰 없이 마무리하면 욕 엄청 먹는거 아닌가 하는 제가 모르는 영역에 대한 두려움이 있습니다 ㅎㅎ
많다 -> 충분히 있다
저는 칼퇴를 지향하죠 ㅋㅋ
근데 그렇지 않은 회사도 충분히 있어서 그게 문제입니다..
앗 그럼 쉽지 않긴 하겠네요 ㅋㅋㅋㅋㅋ
지향하는거지 무조건 칼퇴해야한다 이건 아니라 ㅋㅋ
개인적으로 퇴근시간은 잘 모르겠고 업무량을 보는것같아요
욕먹는다는게 면접관들한테요??
퇴근시간은 생각보다 뒤숭숭하니깐 내가 할 일 마치면 가도되는 문화가 있는 곳..?
저도 그게 가장 좋다고생각합니다
내가 할일 끝났는데 다른분들 야근한다고 남아있는 문화는 좀
맞아요 다들 아침에 컴 키면
아 오늘 이거이거 딱 보고 이거하면 되겠다~~
이렇게 대충 목표잡고 하잖아요
(보통은 이상한 부분에서 에러가 뜨지만)
이 목표 끝내면 갈 수 있는 곳,,, 가고 싶네용,,,
아 실무중에요~ ㅎㅎ
저 petprofileDelete가 사용되고잇는 부분 보여주실수잇을까요?
이모티콘 안녕하세요! 코드리뷰랑 다른 주제로 뜨거우신데 혹시 Next.js api route쪽에서 socketIo 서버 제작해보신분이나 예제를 아시는분이 계실까요..? 친구랑 사이드 프로젝트 진행중인데 next.js api 쪽에서 웹소켓서버 만든 에제를 찾기가 어렵네요 ㅠ,ㅠ
예로 한 페이지에서 서버로부터 get 요청을 1번 받는 거랑 10페이지에서 각 1번씩 10번 받는 거랑 서버쪽 부담과 관련하여 어떤 차이가 있을까요?.?
앗 네 해결햇습니다~ 감사합니다~
다행이네요ㅎ
혹시 여러분들 조금 추상적이고 웃길 수 있지만
같이 개발하시면서 어떤 부분에서 이 개발자는 배려심있다고 느껴보셨나요~~?
(이력서 소개란 쓰던 중 절대아님 ㅎ 암튼 아님 ㅎ)
이모티콘
저는 고집 안부리는,, 서로 의견 수용 잘해주고 이해하려하는 사람이요!
소통할때 명확하게 어느 부분이 된다 안된다 말씀해주시는분이요!
제가 x떡같이 말해도 찰떡같이 이해해주는 분이요 너무 좋았어요
오마이갓 여러분들 억까
많이 당하셨군요
컨벤션 잘 지켜주고 ,,, 급하다고 슥슥 넘어가지않고 코드에 고민흔적 보이는..?
최대한 자세히 들어주려고 노력하는 모습?? 그런모습 보면 힘이 났습니다
(귀 열고 있는 중)
이모티콘 나는 과연 그런 개발자였나... 반성하게 되네요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
역시 경청이 중요한 것 같아요
앗ㅋㅋㅋㅋㅋㅋ
제가 모르는거나 애매한거 여쭤봣을때 본인도 잘 모를때 같이 고민해주는 모습, 같이 내용 찾아봐주시는 모습
저도 여기에 동감합니다 고집 부리면 뭔가 경청하기 힘든것 같아요
그거 그렇게 하는거 아닌데 라는 식으로 말하기 보다는 본인이 꺠우칠 수 있게 도와주는 개발자가 배려심있었던 것 같아요
아하아하
와! 감사합니다 ㅎㅎㅎ
제가 생각못한 배려들도 많아서
배려있는 개발자란 어떤 사람일까 다시 생각하게되었슴당
이모티콘 감사합니당~~
이모티콘
이모티콘
이모티콘
혹시 react-router-dom를 사용중인데 클릭시 해당 페이지로 화면이 안넘어가지는 문제가 있는데 왜 그런걸까요??
사진
저 해당 영역을 클릭하면 petId라는 파라미터 URL은 브라우저에서 잘 바꿔는데 정작 화면은 이동하지 않네요ㅠ
Stirct mode 사용중이신가요
혹시 백준허브 프로그래머스에서만 업로드 안되는 에러 겪어보신 분 있나요?
삭제된 메시지입니다.
따라 제가 선언한것은 없어요~
실제 <router> 설정한 컴포넌트 확인하셔야 할거 같아요
AppRouter 쪽
사진
이렇게 해놨습니다~
react 18인거같은데 component말고 element사용하셔야 될거에요
보통 to안에도 객체형채로 넣어주기도 하나요?
사진
.
위에 코드리뷰 관련되 대화를 보다가 문득 궁금해졌는데, 시니어 개발자가 해주는 코드리뷰는 뭔가가 다른가요??
제 경험상으로는 꼭 시니어가 기준은 아니지만 코드 리뷰 잘해주시는 분들은 단순 컨벤션이나 버그 등을 넘어서 전반적인 구조까지 리뷰를 해주셔서 다른 사람은 다르구나! 를 많이 느껴요!
이런 분들에게 호되게 코드 리뷰 받으면 코드 처음부터 다시 다 짜야한다는 어려움은 있지만..🥲 배움이 많아서 좋은 경험을 하고 있슴니다
벌 서는 라이언님이 나갔습니다.
?
공감합니다. 배워가는게 많아서 항상 감사드리기도 해요
신입입장에서 작은회사 a,b사에 합격했다면 a사- 좋아하는 분야이고 마음 맞는 대표 및 팀원이지만 신입 혼자 서비스를 새로 만들어나가야함 b사- 관심이 아예 없는 분야는 아니고 20프로 많은 연봉과 동기 및 인품이 좋아보이는 사수의 존재 어떤 회사가 더 괜찮다고 생각하시는지 여쭤볼 수 있을까요?
전 b요 혼자 만드는게 좋은 경험이 될 순 있지만 실력 좋은 사수에게 배워가며 실무하는것 보다 좋을까싶네요
a사가 b사보다 나은 게 분야밖에 없는 거 같네요..?
그렇네요
좋아하는 분야면 일에 대한 이유가 높아지고 열의가 높아지긴 하는데
연봉이 20프로 높고 좋은 사수가 있고 동료들이 있다는 게 일에 대한 열의가 높아지는 훨씬 큰 이유일 거 같아요
정진님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저도 무조건 B 20% 차이 무시 못하고 동료가 좋다면...
저도 B... 신입 혼자 개발하는거 진짜 위험할 수 있어요
무조건 b.. 좋아하는 분야더라도 막상 가서 하는 일은 다를 수도 있지 않을까요..?
a 마음에 맞는 대표와 팀인지도 면접을 통해선 알 수 없죠
저도 b
양상우님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
감사합니다~
감사합니다~
답변 감사드립니다~
현재 앱 서비스 안에 웹뷰를 리액트로 작업중인데 게시판에서 특정 게시물을 클릭해서 상세 게시글로 들어간다음, 뒤로 가기 했을때…. 내가 보던 특정 게시글목록에 스크롤이 유지되게 하려면 어떤 방법중 정석적인 방법일까요? 1. 페이지 스택을 구현해서 상세게시글로 들어갔을때 페이지 스택을 하나 쌓고 뒤로가기 했을때 페이지 스택을 하나빼서 스크롤유지시킨다..(깔끔?) 2. 상세 페이지로 들어갈때 그 게시물의 위치(Y값)을 기억했다가 뒤로가기했을때, 해당 위치를 useEffect안에서 감지하고 있다가 그 게시글 위치로 스크롤을 이동시킨다.. (딜레이? 어색하지 않을까요?…) 보통 이 기능을 구현할때 어떤 방법으로 구현하는지 궁금합니다!!
다른 좋은 방법이 있다면 조언 부탁드립니다!!!@ 아직 초보입니다 ㅠㅠ
1번은 react modal with router 와 같이 검색하면 뭔가 많이 나올 것 같아요.
주로 뒤로가기를 했을때 스크롤 위치를 기억하는것은 history 객체의 scrollRestoration 속성을 사용하는걸로 알고 있습니다!
피스메이커 프로도님이 나갔습니다.
혹시 tailwind에서 동적 styling 하려면 classcat 사용하면 되나요 ?
리액트 쓰시면 그냥 사용해도 상관없지 않나요?
리액트면 classname에 템플릿리터럴이나 삼항연산같은거 쓸수있나요 ???
넵
넵
헐 감사합니다
넵 삼항 연산자도 결국 값이기 때문에..
그렇죠 ㅋㅋㅋ
무지성 개발자님 정진님 양상우님 모두 모두 반갑습이다 어서오세요 :)
원하는 클래스만 동적으로 지정해주시면 됩니다.
넵!! 안녕하세요~!!🤗
오자마자 열심히 답을 달아주셔서 감사합니다! :) 언제든 편하게 궁금한거 질문하시거나 지금처럼 답변을 해주시며 함께 성장했으면 좋겠습니다 ㅎ 고맙습니다!!
안녕하세요! 테오님께 인사받는 날이 오네요… !!
(꺄아) 고맙습니다 :)
안녕하세요 라이브러리 확인하다가 문득 궁금한게 생겼는데요! 라이브러리에서는 type을 컴포넌트 파일 내부에 작성을 해주는거 같아요 그런데 혹시 d.ts에서는 declare 해주는 이유가 내가 쓰려는 이유가 아니라 알려주기 위함이 맞나요?
제이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
d.ts를 작성하면 크게 2가지 상황에 대한 대응을 할 수 있어요. 1. js로 작성된 파일도 타입을 읽어 올 수 있어요. 2. 컴포넌트 내부에 타입을 정의하면 파일이 길어질 수 있고, 유틸처럼 범용으로 사용한 파일이 있는 경우 타입 파일들이 파편화 될텐데, 이를 한 곳에서 관리 할 수 있어요.
어렵군요.. ㅠㅠ 아무래도 주로 사용 하는 이유가 타입 추론이다 보니 그런거 아닐까요..? 저는 에러 나는거 때문에 쓴 기억이 있네요 ㅠㅠ
써드파티의 타입을 별도로 정해주고싶을 때도 d.ts를 작성했던 것 같네요
B..요
제가 쓴 글인데 조금이나마 도움이 되셨으면 좋겠네요(sweat)(sweat)
와.. 다들 감사합니다.. ㅎㅎㅎ
튜브낀 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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주지난 코딩입니다. 혹시 프론트 엔드 현업자 분들 계시면 컴퓨터 추천을 받을수 있을까해서 들어왔습니다. 지금 윈도우 쓰다가 우분투 깔으라고해서 듀얼로 깔았는데 좀 되다가 아예 우분투자체가 안되더라구요. 맥을 사야하나 하는데 아예 컴퓨터 쪽을 몰라서 현업분들 고견을 여쭙고자 합니다. 중고로 살까하고 가격은 100내외 생각중인데 맥북 에어, 프로 이런게 너무 생소합니다
wsl ..?
m1 맥북 사시면 되겠는데요~~
근데 안사도 되는거면 굳이
저는 중고로 2015년 맥북프로 사용하다가 m1맥북프로로 갈아탔습니다.
2015맥북프로는 중고가가 50~70정도인 듯합니다.
맥북 m1 에어 8기가 추천드립니다! https://link.coupang.com/re/NONPROFITSDP?lptag=CFM81580991&pageKey=4322481134&itemId=5033260880&vendorItemId=72343055474
그런데 화면크기를 꼭 보고 사세요
돈들고 편한거 - 맥북 공짜지만 불편한거 - 우분투 공짜지만 어려운거 - 윈도우 +. wsl 그냥 하면 안되는거 - 윈도우
13인치를 잠깐 사용해봤는데 눈알빠질뻔 했습니다.
안사도 된다고 부트캠프에서 얘기하긴햇는데 지금 우분투하는데 안되니까 정신 나갈거같아요...ㅋㅋㅋㅋㅋ코딩 배우는것만해도 바쁜데 설치에 발목잡혀잇으니까
저 대학때부터 3년반동안 13인치 쓰고 있긴 합니다 ㅋㅋㅋㅋ 개인차가 있는 거 같아요
참고하겠습니다. 감사해요
친구가 삼성 15인치 -> 맥북 13인치로 갈아탔는데 처음에는 좀 작다고 힘들어하더니 적응하긴 하더라구요
아하 그렇군요. 오늘 어떤분은 wsl쓰다가 힘들어서 우분투로 오셧다는데...우분투도그닥
으 근데 맥이 정말
좋아요
아 제가 노안이... ㅎㅎㅎㅎ
그냥 구매 후 윈도우
개인적으로는 제일 무난하게 2015년형 옛날 맥북프로 중고로 저렴하게 구매하시는 거 추천드립니다
팔아버리죠
ㅋㅋㅋㅋㅋㅋㅋㅋㄲㅠ
저는 집에 윈도우가 없움
m1 추천
합니다
m1이 진짜 말도 안 되게 좋긴 한데 가격도 있고 사이즈도 13인치로 작고 호환성 이슈도 없진 않고..
사실 개발아니면 인터넷만쓰면되니까 뭔 불편함이 있는지도 모르고 지금도 부트캠프 아니면 맥 필요없는데
m1맥북을 사신다면 게임을 할 수 없어서 좋은 장점이 될 듯 합니다
많은분들이 m1을 추천하시네요
답답한게 없어요
ㅎㅎㅎ
사진
이렇게 얘기해주시는 분이 있엇는데
현업에서도 m1을 많이쓰시나요?
아 맥스튜디오는 너무 무섭군요 ㅋ
맥미니
개조아요
오
학
맥스튜디오 쓰는데 살짝 상처받았습니다
맥미니도 좋습니다.
좋은데..
어떤점이?
맥미니
가성비가 좋아요
개 젛아요
맥미니
포트도 많고 좋은데..
현업에서도쓰시나요?
그냥 성능도 좋음
ㅋㅋ
맥미니 ㅇㅈ
현업에서 m1 쓰시는 분 없나요?
죻습니다
ㅇㅈ까지나올정도면
요즘 많이들 쓰던데요
m1
맥미니도 고민해봐야겠네요
근데 저도 맥미니에 m1맥스 달렸으면 맥미니 샀습니다
물론 저는 현업이 아니라
제 동료 m1 프로써요
저희 써용
부트캠프 매니저가 현업에서 m1썼었다고 합니다.
회사에서
아하
그럼 맥미니로
가즈아
전직원 m1프로~m1맥스
가즈아..!
ㅋㅋㅋㅋㅋ
m1맥스로 바꾸고 싶다~!!!
중고로알아봐야겠네요
중고가 65-70정도 하려나요
기본형
오 생각보단 괜찮네요!!
근데
16기가 쓰세요
일단 많은 분들이 맥미니와 m1을 추천해주셧네요
Rn해볼려니까
오 이것도 기억하겠습니다
계속 버벅여요
rn이 머에요..?
리액트 네이티브?
넵
넵
헉
근데 프로젝트 크기 커지면 일반 리액트도 start할때 좀 속도가 느려지더라구요
다다익램..
m1 맥미니 램16기가 / ssd512기가 / 실버 추천드립니다
와우
대신 맥미니 사시면 집에서만 쓸 수 있다는 점..
이렇게 상세하게...
저는 스그
아? 왜죠?
맥미니가
뭔지는 아시죠?
데스크탑이에요~
저는 들고다닌 적도 있긴 한데
데스크탑이라서
https://www.youtube.com/watch?v=gVK0553eBhA&t=241s 아이패드랑 매직 키보드가 있으시면 이게 가능하긴 합니다
굳이
모니터도 있어야 하고
와 저렇게까지
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
진심이구나 다들
비추입니다
그냥
맥북이 이득
ㅋㅋ
맥미니가
저건가요?
그래서 밖에 다니실거면 그냥 선택지가 맥북밖에 없고, 집에서 잘 안나가신다면 맥미니요
저거로는 저는 못하겠네요
부트캠프가 현장강의라면 m1이 제일 무난하겠네요
사진
이거예요
사진
선택지가줄엇네요
이게 맥미니입니다
먼지닦아야겠다
그럼 가격을 살짝 포기하고 맥북으로 가셔야할듯합니다ㅜ
너무 작네요
네 중고로 알아보면뭐
엥 작은건 좋은거 아닌가여
100만원안에는 있지않을까 기대해봐야겠네요
화면이 너무작아서요...;;
화면은 모니터 따로 사셔야 돼요
와우
맥미니는
데스크탑이에요
저거 데스크톱이라 모니터 키보드 마우스 다 없어요
그럼 더더욱.....
ㅋㅋㅋㅋㅋㅋㅋ
맥북에어로
가시죠
ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋ
맥북에어밖에 없을거같네요
ㅋㅋㅋㅋㅋㅋㅋ
여기 똑똑이분들
에어는 근데 모니터 한대밖에
많으시네요
연결안되요
하지만 그건 프로도 마찬가지..
많이배워가네요
아 맥스만 더 연결되던가요
프로 여러대 돼요
그쵸 프로는 되던걸로 기억
m1프로는 되고 맥북프로m1은 안돼요
맥북프로로 생각해보겠습니다
엥 돼요?
1년 반동안 썼는데 속은건가
사진
물리적으로 두대 가능하다고하는거같은데요
사진
한대가 맞나봅니다 ㅋㅋㅋ
제가 틀렸을 수도 있긴 해요 ㅋㅋㅋㅋㅋ
맥미니쓰고있어서 잘몰라요...
아무튼 m1 맥북에어 - 1대 m1 맥북프로 - 1대 m1pro 맥북프로 - 2대 m1max 맥북프로 - 2대
이런 걸로 알고 있었습니다
네
지금 알려주신 것들은 다 노트북인가요?
네
맥'북' 은 노트북입니다
북 안들어가면 데스크톱입니다
그렇군요!!!!!
감사합니다
이모티콘 참고해서 구매하겠습니다
혹시 앱에서 해당 뷰가 웹뷰인지 알 수 있는 방법이 있을까요??
안드 이신가요?
ios입니당
ios는 잘 모르겠네요 ㅜㅜ 저는 보통 안드가 네이티브면 ios도 네이티브 이지 않을까 가정하고 하나만 파악해서 다른곳도 같게 가겠구나 판단하곤 해요
프레임이 보이는 개발자 도구 같은게 있는데
레이어가 나눠보이면 네이티브고 통으로 보이면 웹뷰이더라구요
ios 같은 경우에 터치 후에 스크롤 움직일 때 포커스가 풀리면 네이티브라는 팁도 들었습니다 ㅋㅋ
m1max는 4대 까지 가능해요! https://support.apple.com/ko-kr/HT202351
힉 생각도 안해본 숫자였는데 지식이 늘었네요 ㅋㅋㅋㅋㅋ 감사합니다
모니터 두대 더놔둘수있겠네요 👍👍
m1 쓰는데 어댑터 연결해서 2대 쓰고 있어요
node와 deno보다 엄청 더 빠른 자바스크립트 런타임이 나왔습니다!! bun https://youtu.be/FMhScnY0dME
와 영상에서 test 속도 보고 진짜 깜짝놀랐네요 ㅋㅋㅋ
아직 버전은 0.1.0이라 현업이든 프로젝트든 쓸 수 있는 정도는 아닙니다. 로드맵이 공개가 되어 있네요. 에지 번들러로써 그리고 ssr을 중점으로 진행되는 모양입니다 nextjs가 완료되었고 차차 remix svetlekit vite등을 준비하고 있네요~~ https://github.com/Jarred-Sumner/bun/issues/159
이로 인해 프론트엔드 빌드속도 개선과 함께 서버쪽에서 타입스크립트나 자바스크립트에 더 많이 쓰이길 바랍니다 ㅎ
트윗타에서 지난주에 한창Bun이 Rust 보다도 빠르다고 불타던데
정말 궁금하긴하네요
vite정도만 돌아가면 ssr은 몰라도 그냥 로컬에서 js, css 빌드용으로만 쓸 수 있어도 좋을 것 같아요 ㅎ vite도 빠르긴 하지만 빠를수록 좋으니까요 ㅎ
안녕하세요 캘린더 위젯을 구현한다고 할 때 datepicker를 사용하면 다양한 옵션들을 사용하여 상황에 따라 대응하기도 그렇고 또 완성도 측면에서는 좋겠지만 퍼포먼스도 좋지 않은것 같아서 datepicker를 사용해야 할지 고민이 되네요. 혹시 많은 기능을 필요하지 않는다고 한다면 자바스크립트로만으로 구현하는게 나을까요?
headless 한 라이브러리 사용하셔요 ㅎㅎ
ㅎ 네에 조금 더 고민해봐야겠네요 감사합니다
안녕하세요 cs 과목에도 우선순위가 있을까요? 결국 다 중요하지만 프론트엔드 신입으로 지원 시에 가장 우선적으로 공부해야할 과목이 궁금합니다
네트워크
저도 네트워크 한표입니다
반응하다님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
컴퓨터구조 - 시스템프로그래밍 - 운영체제 라인도 프론트 실무에서 웬만하면 필요한 개념은 아닌 거 같긴 한데, 그냥 컴퓨터쪽에서 일한다면 알아놓으면 무조건 좋고 어딜 가도 인정받을만한 지식인 거 같아요
김영한님 인프런에 http강의한거있는데
https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99 여기에 나온 분야를 기준으로 프론트엔드에서 특히 더 중요할만한 분야들을 한번 추려봤습니다. 프로그래밍 패러다임 알고리즘과 자료구조 프로그래밍 언어론 소프트웨어 공학 네트워크 컴파일러
그거 좋아요
반응하다님 반갑습니다. ㅋㅋㅋ React 문서를 구글 번역을 돌리셨군요. ㅋ
컴파일러는 TS컴파일러, 바벨, WASM 같은것 때문인가요?
우왓 이거 감사합니다
안녕하세요. cs 얘기가 나와서 여쭤봅니다! 저는 전공학점이 3학점이 남았는데요, 다음학기에 마지막 전공으로 프로젝트 과목을 들어서 프로젝트 경험을 쌓는게 좋을까요? 아니면 컴퓨터네트워크를 아직 안들었는데 이 과목을 듣는게 좋을까요?
그런것도 있지만 가끔 문자열 파싱을 한다거나 간단한 문법같은 것들을 만들어서 제공해야할 때(ex 나만의 커스텀 마크다운이나 제가 만든 adorableCSS 같은거...) 해당 배경지식이 요긴하게 쓰였습니다.
저는 네트워크 과목 되게좋았어요
대학교에서 배우는건 평생가요!
둘다 들으시는 건 어떨까요..!
초과학점?
CS는 백엔드를 하든 프론트를 하든 devops를 하든 직군 상관 없이 다 중요하답니다 ㅎㅎ
프로젝트 과목이면 TDD 애자일 이런거 알려주는 건가요?
(이모티콘)
어서오세요 반갑습니다. 이 곳은 프론트엔드에 대해서 궁금한 것들을 물어보고 답하면서 함께 성장하고자 하는 공간입니다. 무엇이든 편하게 글 남겨주세요!! ㅎ
작년부터 새로 신설된 과목이라 자세히는 모르는데 들어보니 그런 프로세스보다는 작품 아이디어 위주?이고 이론적인 것보단 실습 위주라고 들었습니당
엇 그럼 저는 네트워크보다는 중요도가 많이 낮다고 생각돼요..!
앗 그렇군요! 사실 저도 네트워크 과목을 듣고싶은데, 저희과 네트워크 교수님 수업 방식에 대한 평이 좀 안좋아서 고민하고 있었거든요 ㅠ 그래도 그냥 듣는게 좋을 것 같네요 ㅎㅎ 답변해주신분들 감사합니다!
전 프로젝트에서 많이 배워서 프로젝트 추천드려요~
아하.. 고려해서 생각해보겠습니다!
둘 다 신청하시고 느낌이 쎄한 과목을 드랍하는건 어떤가요? 학교마다 다를 수는 있지만, 저희는 전공 학점을 추가로 들어도 문제가 없었어서 시간적 여유가 되시고 마음에 든다면 둘 다 들을 수도 있을 것 같아요!
와! 굳 아이디어네요 ㅎ
체로님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 체로님~~ 반갑습니다 :)
학점은행제같은걸로라도 들어야겠네여 언젠가는..
비전공자라 ㅠ
안녕하세요 ! 이전에 아티클 재밌게 읽은 경험이 있어서 찾아보고 들어오게 되었어요 🙂 잘 부탁드립니다~
공유감사합니다
600명이 됬네요 !
우와..진짜네요! 🥳
감사합니다. 혹시 궁금한 주제가 있다면 제보부탁드립니다. ㅋㅋ 환영합니다. 이곳은 프론트엔드에 대해서 궁금한 것들을 물어보고 대답하면서 함께 성장을 도모하고자 하는 곳입니다. (동시에 제가 쓸 글의 소재를 찾는 곳이기도 합니다. ㅋㅋ) 잘 부탁드립니다!! :)
이모티콘 600명 축하드려요!!
(꺄아)
감사합니다! :)
여러분 혹시 사무실에서 사용할만한 기계식 키보드 추천이 가능할까요? 이전까지 회사에서 제공하는걸 사용했는데 이번에 구매를 하게 되어서요. 금액대는 10만원 아래로 추천하거나 혹시 추천하는 키워드가 있을까요?
무접점 키보드 / 저소음 적축
청축 사시면 구역의 인싸가 되실수 있습니다
이렇게 저는 많이 찾아보는거 같아요
저소음으로..
기계식도 아니고 10만원 언더도 아니지만.. 사무용으로 mx keys 추천드립니다
키크론 적축은 소음 적다고해도 회사에서 사용하기에 소리가 크게 느껴져서 사용하지 않지만 그래도 윤활(?)해서 사용하면 더 소음이 적게 난다고 해서 주변에서 권장하기도 하더라구요
전 별로신경안쓰는데 소리에 민감하신 분도 있더라구요..
저 키크론쓰다가
바꿨습니다
이렇게 찾아보겠습니다!! 감사합니다
청축 갈축 빼고는 다 조용하던데.. 매직키보드 사용해도 탁! 탁! 때리면서 치는사람도 많더라구요
저도 개인적으로 mxkeys 매우추천합니당.. 기계식 사무용으로 10만원 이하는 좀 찾기 힘들더라구요
바저적 추천드립니다
저는 사무실에서 체리 CHERRY MX BOARD 3.0S 게이밍 기계식 키보드 저소음 적축 사용하는데 생각보다 괜찮아요!
레오폴드 저소음 적축 되게 조용했어요!
한무무 추천 드립니다
와우...키보드 다 비싸네요
기계식을 고집하시는게 아니라면 근본 멤브레인도 되게 괜찮아여 소음도 거의없구
안녕하세요 혹시 grid 라이브러리 추천 받을수 있을까요?
react grid layout?
존재만으로 도움이 되는 단톡방.. ㅠㅠ
삭제된 메시지입니다.
grid도 라이브러리가 있었나요?
없는게 없군
궁금한게 있는데 언제까지 무슨 기능 개발을 하겠다, 하는 개발일정을 전부 기획자와 공유하시나요?
넵
보통 wbs 작성하는 곳은 그런 편인 것 같아요 일정 공유가 서로 안 되면 새로운 기능이나 보완사항을 그냥 쌓아놓게 될 수도 있다보니
아하 그렇군요 답변 감사합니다!
안녕하세요~ 초보개발자입니더 무한스크롤을 구현에 많이 사용되는 라이브러리가 있을까요?
Intersection observer 용
라이브러리안써도.. 어피치님 말씀대로 저걸로 많이 하죠
이런게 나왔네요
오호 감사합니다. 저도 실제로 구현할려고 하는데 좋은 라이브러리가 있으면 참고할려고 물어봤습니다!
박찬혁님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
박찬혁님이 나갔습니다.
혹시 하위 div가 상위 div 넓이 안에 들어왔는데 overflow-x auto 로 줬을때 자꾸 불필요한 스크롤이 생기는 오류 해결해보신분 있으신가요. 정말 원인을 모르겠네요 ㅠㅠ..
둘중에 position 주신건 없어요?
position 준 하위컴포넌트가 있습니다!!
아그래서 그런걸까요
프론트분들 개발할 때 화면에 개발자도구 무조건 켜두고 작업하시죠!?!?
무조건 켜야겠다 하고 켜는 건 아닌데 항상 켜져있더라구요
저는 필요할 때만 켜놔요!
화면비율 100%로 체크해야 될 때는 끄긴 하죠!
저는 항상 켜놓는 습관을 들이려는 편이에요
콘솔과 함께,,
사진
혹시 요렇게 모서리를 깎고 border도 깎인기준으로 주는 방법이 있을까요??? 찾아보니 모서리 깎는 방법은 많은데 border도 깎인기준으로 주는게 없네요 ㅠㅠ
ㅋㅋ svg plz
디자이너님 help ㅎㅎ
저정도면 svg로..
저런게
css로 하면 너무 어렵던디
방법이 없진 않은데 svg 코드량이랑 css 코드량이랑 비슷할거같네요
ㅋㅋㅋㅋㅋㅋ
저렇게 살살 모서리 깎는 css의 고통
혹시 호버나 클릭되면 저 모서리들이 막 다이나믹하게 변하나여?? ㅎㅎ
호버했을때 완전한 사각형으로 바뀌게 하려고 저걸 기본으로 주고 싶은데 너무어렵네요 ㅋㅋㅋㅋㅋㅋㅋ
태그 2개 활용하면 가능할 것 같은데요 ㅋㅋ
아직 취준생이라 css로 해야될거같습니다..
(위/오른쪽을 그려주는 태그하나 + before 혹은 after로 대각선 만들기) * 2 (반대방향)
배경이 보여야 한다면.. 가능할까요?
before 랑 after 로 등변직각삼각형 만들고 45도 돌려주면 될거같네요!
이런 property가 있네요
https://developer.mozilla.org/ko/docs/Web/CSS/clip-path clip path 라는 친구도 있네요!
이친구는 모서리를 깎아버려서 border도 같이 깎아버리더라고여 ㅋㅋㅋㅋ 요렇게
사진
아하 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
요거 한번써볼게용
요게 좀 비슷한 거 같아요
도라에멍님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
머리 빗는 네오님이 들어왔습니다.
초롱초롱 네오님 머리빗는 네오님 반갑습니다! :)
혹시 next.js 써보신 분들, 추천하시는 상태관리 라이브러리 있으신가요? mobx 괜찮을까요?
안녕하세요! ㅎㅎ
안녕하세요!! ㅎ
반갑습니다아
반갑습니다!!
반갑습니다!!!!
오호 감사합니당
ssr 연습해볼만한 좋은 아티클 있을까요? ssr에서는 useLayoutEffect쓰면 안된다던지 그런 것들 연습해보고 싶습니다
next js로..
https://zuminternet.github.io/vue-ssr/ vue ssr에 대한 내용이긴 하지만, 바닐라자바스크립트로 ssr을 만들어보는 과정을 다루고 있답니다! 그래서 nextjs 같은 프레임워크에 사용하기 전에 읽어보길 추천합니다!
삭제된 메시지입니다.
질문 있습니다! 인턴이지만 스타트업이라서, 제가 프론트를 리드하게 됬어요.. 첫 프로덕트 프로젝트라서 react랑 nextjs랑 고민 중입니다.. seo가 딱히 중요하지 않은 웹서비스 만들게 됬는데, react 개발 경험은 있는데, nextjs는 처음이라서요. 고민 중입니다.. 그래도 nextjs로 개발하는게 좋을까요??
nextjs 로 하면 복잡한것들 설정하는거 알아서 next 가 해줍니다.
대신 새로운 복잡한 게 등장합니다.
ㅎㅎㅎ 어렵네요...
프로젝트 성향에 따라 다를 거 같아요 next랑 cra랑 둘다 장단점이 있어서
seo가 중요하지 않으시면 cra 사용하셔도 될 것 같은데여 ?
개인 성장 배제하고 프로덕트 관점에서만 보면
비슷한 웹서비스가 있는데
그 회사에서는 ssr 방식이더라구요
cra가 편해서 저도 이렇게 하고 싶은데.. eject는 할일이 거의 없나요?
CRA 장점 - 좀더 자유로운 느낌 (eject도 되고) - 서버 리소스를 안 먹음 (비용 절감) Next 장점 - 사용자에게 안 보여주고 싶은 걸 서버에서 좀더 미리 처리 가능 - SEO 대응 가능 - 사용자 기기 성능이 낮아도 화면이 빨리 뜸 - 좀더 프레임워크스럽고 좀더 해주는 게 많음
CRA도 SEO 가능하다고 하던데 최적의 정도가 다른 걸까요?
와 감사합니다..!!
서버 리소스가 정확히 어떤걸 의미하나요?
aws 로 치면 ec2로 서버 띄워서 돌려야 한다는 얘기였어요!
개발 관점에서는 뭐가 더 편하나요??
삭제된 메시지입니다.
CRA는 html 파일이랑 asset만 s3에다가 올려놓으면 돈이 거의 안드는데 서버를 돌려야 되면 좀더 비싸지죠
그런의미라면 렌더링 csr이라고 표현해는게 맞을거같아요
저는 next.js 선호하긴 해요 둘다 익숙한데 react-router-dom 6 하기 싫어서
아하
개발 과정은 둘다 거의 비슷하나요??
ssr없이 next도 컴파일만 한다면 동일한부분이라...
으음
아 SSG 하면 그렇네요 좋은 지적 감사합니다!
막 엄청 많이 다르진 않고, 안 다르지도 않아요 아무튼 리액트 기반 프레임워크니까
vite 로 하세요~
vite 강추합니다
vite는 인정이죠
CSR으로 진행하되 vite로 하면 괜찮나요?
프로젝트가 규모가 작으면 cra도 괜찮으나 규모가 커지게되면 속도 차이가 커지기 때문에 vite가 좋아요
아하 감사합니다
규모는 그렇게 크진 않는데
vite 쓰고싶은데
가끔 오류날때가,,
정 애매해서 고민되시면 CRA로 하시면 될거같아요
CRA 가 리액트 프레임워크의 교과서라
혹시 html에 portal이라는 태그가 react.portal과 다른건가요??
Next.js로 마이그레이션하는 가이드도 있고 vite로 마이그레이션하는 가이드도 있어요
근데 반대방향은 일단 제가 알기론 없어서
진행하시면서 무슨 차이가 있는지 공부해보시고 필요성을 느끼고 나서 마이그레이션하면 성장하시는 데에 제일 도움이 되지 않을까 싶습니다!
동적 라우팅 처리도 생각보다 편해서 좋긴한데
개인적으로 리액트와 더불어 프레임워크에 이해가 있어야
잘 쓸 수 있더라구요
저는 처음 next 할때 이해가 부족해서 ssr을 잘 활용하지 못해서 오히려 로딩이 더 느려지는 경험을 했어요
씩씩거리는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
휘파람 프로도님이 나갔습니다.
씩씩거리는 무지님 반갑습니다 :) 어서오세요. ㅎ
Error: Cannot find module 'tailwindcss' 테일윈드 쓰는데 이 에러가 뜨면서 가끔 빌드 오류가 납니다.. 그런데. node_modules 지우고 다시 설치하면. 정상빌드가 되고.. 어느날 또 에러나고.. 이런경험 있으신지요…ㅎㅎ
빌드에러날때 node_moduels 지우고 다시 설치하면 되는 경우가 있긴 합니다만 빈도가 그렇게 높지는 않았어요 tailwindcss는 쓰고 있지 않아서 꼭 맞는 것은 아니겠지만
이거 이해하는데에 진짜 도움많이 됐어요 감사합ㅂ니다
고양이도 아주 귀엽네요
야옹
자바국비프론트지망생님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요~!
안녕하세요 자바국비프른트지망생님 어서오세요 :)
구글링으로 프론트 취업 관련 글 보면서 어떤 사람이 취준하면서 잘한게 여기 톡방 들어온게 잘한 점이라고 하길래
들어오게 되었습니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 와우!! 멋지네요. ㅎ 감사합니다.
여기는 프론트엔드에 대해서 궁금한게 생길때 언제든 무엇이든 편하게 물어보고 또 내가 안다 싶은 것들 공부한것들 공유하면서 함께 성장하고자 하는 곳입니다. 테크, 기술, 커리어, 방향성, 고민 등등 궁금한게 생기면 편하게 글 남겨주세요 :)
사실 방향성이 고민입니다 ㅎㅎ 제 닉네임을 보시면 감이 벌써 잡히신 분들도 많으실 것 같지만 지금 자바 국비 2개월반정도 했고 3개월 더 하면 국비 끝나는데 일단 국비하는 동안에는 자바 공부 학원에서 시키는거 하면서 자바스크립트 쭉 공부하고
학원 끝나고 한 2개월정도 프론트 포트폴리오 만들어서 취준하려고 하는데 문제는 제가 고졸이라 ㅠ si가기 싫다는 막연함으로 이거저거 준비하고 있기는 한데
취업준비가 정말 막막합니다
어떤 분들은 1년동안 준비하시기도 하고 그러는데 제가 너무 쉽게 생각하는건지 이런 생각도 들고...
기업에서 보통 프론트 신입한테 요구하는 역량이 어느정도 되나요?? 회바회 이겠지만 적어도 이정도까진 준비해야 한다 이런게 있을까요?
취업 준비 기간은 욕심인것같아요 ㅎㅎ 학벌은 전혀 중요하지않구요!
취준 준비 기간은 역시 좀짧죠 ㅎㅎ ㅠㅠ
조금 더 마음 내려놓고 준비 열심히 해야겠네요
답변 감사합니다! 저도 높은 빈도는 아닌거 같은데. 가끔 그러네요.. 패키지 매니저 잘못인지 제 잘못인지만 알 수 있어도 좋을텐데 ..ㅋㅋㅋ 답변해주셔서 감사함당
아 그게 아니라 저도 취준생인데 취업 준비 기간은 개인 욕심이라구 말씀드린거에요!! ㅎㅎ 짧아도 상관없어요오
아 그런 뜻이군요 ㅎㅎ 이해했습니다 감사합니다
프론트 지망이시면 자바를 할 이유가 없긴해서 조금 아쉽긴하네요.
특히 요즘은 백엔드도 모든 데노로 가능해서...
국비학원에서
리액트 가르키는 학원이 한 4월까지만해도
제 주변에 없었어요 ㅠㅠ
아이고 그러시군요....
5월 6월 되니까 한둘 보였는데 그전에는 안보여서
백엔드도 어차피 툴만 다르지 프론트로 넘어가도 개념은 같을거다 생각해서
그냥 다니는 중입니다 ㅋㅋ
프론트 지망이시면 차라리 책이랑 유데미강의로 독학하시는게 효율이 좋으실텐데
저는 취준까지는 코딩애플이랑 책몇권 읽을계획인데 유데미 강의가 많이 좋은가요?
강사별로다르긴한데
음 이런 말씀드리긴 좀 그런데
Maximilian 꺼는 되게 좋아요
본인이 부족한게 무엇인지 알고 채우는 강의가 좋은것 아닐까요
제가 프로젝트 함께 했을때 국비나 비전공자분들은
데이터의 흐름이나 아키텍쳐에 대한 이해도가 많이 떨어지셔서
서비스를 같이 만드는데 너무 힘들었어요
그래서 개인적인 추천은 프론트 강의를 보시는게 아니라
웹페이지 만들기 같이 서버부터 프론트까지
쭈욱 하시는걸 추천드려요
아하
이동욱 님의 AWS 스프링부트 책이나
김영한 님 강의 먼저 들으시고
그 다음에 프론트를 하시는걸 추천드려요
아 처음 배우는거면 서버도 한번 만들어봐야하는건 저도 추천합니다.
감사합니다!!!!!!!!
dto나 repository가 어떻게 생겼는지, mvc는 무엇인지를 모른 상태에서 함께 개발하면
어차피 프론트 지망이시면 js기반 서버를 공부하시는걸추천드려요 자바보다는요
너무나 힘듭니다
맞아요 ㅎㅎ 노드 진영으로 개발하셔도 좋고 개인적으로 저는 스프링, 스프링부트를 조금이라도 이해 하는게 좋은 것 같습니당
개발자들의 특징이 본인이 아닌 단어를 남들도 알고 있다고 생각하고 표준적으로 사용하시는 분이 많은데
이게 js 기반 백엔드를 공부해놓으면 좋은게 나중에 ssr 같은거 해볼때도 도움이 되거든요.
백엔드 개발자분들이 그런 경향이 많으셔서 스프링 경험하시면 말 이해하는데 도움 되더라구용
오 말씀 정말 감사합니다
*본인이 아는
우리나라가 자바공화국이라...
스프링, 스프링부트 다 알아야하나요?
스프링 - 리덕스 스프링 부트 - rtk
정도로 생각하시면
조금 편하실수도..?
하지만 엄연히 다른 프레임워크 입니다
학원에서 나중에 진도 쭉 따라가면 스프링 배우는 거 같긴 합니다
그럼 쭉 학원에서 배우는거 잘 따라가시는게 좋을 것 같습니당 ㅎㅎ
학원에서 하는거 잘 따라가면서 남은시간엔 자바보단 js에 시간 쏟는게 낫겠네요
말씀 감사합니다~~
파아ㅣ팅
이거 좀 하려면 확실히 취준 2개월은
좀 짧은거 같네요
음.. 개인적으로 아직 많이 경험을 안하신것같은데 학원에서 알려주는걸
완전히 본인껏으로 만들어보시는데 집중해보셔요~
넵 감사합니다!
ㅋㅋ저도 2개월차에 지원했었어요 할 수 있씀다
요즘 무료강의도 좋은거 많고 유튜브채널도 유익한 정보 쉽게 설명해주는곳 많아요!
그런것만 찾아봐도 전체적인 흐름은 파악하실수있을거에요
독학이고 베이스가 전혀 없으시다면 내가 어디까지를 할수 있고 알고 있는지를 잘 몰라서 힘드실수 있을 거라고 생각합니다.
와~ 방장님 두두등장~
스프링부트 학원에서 나눠준 책이 몰랐는데 알고보니 이동욱님 책이네요
웹을 한다고 하면 적어도 로그인이 포함된 게시판정도 수준은 혼자서 만들수는 있어야 하구요. 여기가 시작단계다 라고 생각하시면 좋을 것 같아요. 그래서 일단 배우는 것은 뭘 하던 다 연결이 되게 되어 있으니까 열심히 하시되
혼자서 일단 로그인과 게시판을 백엔드 프론트엔드 배포 등을 뭘로 쓰셔도 좋으니까 하나는 완성해보시기 바랍니다
오 알겠습니다 어느걸 목표로 해야하는지 알려주셔서 정말 감사합니다
내 이론이 짱짱하지 않더라도 그정도를 할 수 있으면 일단 기초는 가지고 있구나 라고 생각하실수 있어요
저도 이부분에서 고민이 있었는데 알려주셔서 감사합니다.
게시판 같은 경우는 CRUD말씀하신는거죠?
그리고 나시면 어떻게든 사람들이랑 사이드 프로젝트를 한번 시도해보세요. 결국 개발자는 정해진거 만드는게 아니라 아이디어를 어떻게 구현을 할까 문제 해결은 어떻게 하나 고민을 하는 사람이어야 하기 때문에 닦아놓은 기초를 바탕으로 아이디어와 시간만 있다면 만들 수는 있는 사람이 되어야 합니다. 회사에서 요구하는 것은 결국 이거 만들고 싶은데 만들 수 있겠어? 를 물어보니까요
오
네~ 그렇죠. 보통은 페이지네이션이나 무한 스크롤 + 댓글이나 리액션 정도까지 해보는 것도 좋아요
사이드 플젝 보통 이런 오픈카톡방에서
구하나요?
아 말을 너무 횡설수설 하게 했네요
네~ 여기서도 좋고 https://holaworld.io/ 이런 곳도 있고
부트캠프에 지원하는 법도 있고
돈 왕창 내고 하는거 말구요
부트캠프 하면 대부분 비싼거 밖에 생각이 안나네요, 구글링 했을때도 상단에 그런 것들만 뜨기도 해서
(부트캠프를 폄하는 것은 아닙니다. 가성비의 문제니까요...)
홀라월드는 무료인가요?
저거는 맘 맞는 사람끼리 구해보려고 하는 플랫폼 같은거에요 ㅎ
아하 되게 좋은 정보 많이 알려주셔서 감사합니다
인정합니다
지금 스샷중이에요 ㅋㅋ
그렇게 사이드 프로젝트를 하시면서 협업도 익히셔야 겠지만 완성도에 대해서 좀 깊이있는 고민을 해보시게 될거에요. 아니 그렇게 하셔야 합니다. 제품의 완성도와 코드의 완성도 둘다요!
생각보다 고난이도 기술를 많이 알거나 쓴다고 제품의 퀄리티가 좋아지는게 아니구요 코드의 퀄리티는 기술과는 또 다른 영역이라서
그때부터가 진짜 개발자스러운 고민을 하는 시기이고 적어도 그런 고민을 해본 사람을 회사에서는 뽒고 싶어합니다. 그냥 해봤다. 할줄 안다. 이걸로는 외주를 쓰면 썼지 함꼐 하고 싶은 개발자는 아니거든요
혹시 제품의 완성도랑 코드의 완성도 차이가 잘 이해가 안가는데 제품의 완성도가 있으려면 코드가 완성되어야하는 거 아닌가요?..
둘에 차이가 명확하게 이해가 안되서 그런데 한번만 설명해주실 수 있나요?
제품의 완성도는 모든 기능이 잘 돌아가냐인거같고 코드의 완성도는 추상화를 얼마나 잘 했고 성능 이슈가 없는가 인거같아요
아 그렇군여
솔직히 혼자 준비했으면
코드를 개판으로 짜도 어차피 쓰는 사람들은 모르죠.ㅋ 제품은 좋을 수 있습니다. 돈을 벌수도 있구요
제가 이런 고민까지 과연 할 수 있었을까 싶습니다
혹시 둘 다 중요하겠지만 신입한테는 뭐가 더 중요하나요??
아 그렇군요 이해했습니다 감사합니다
돈을 벌어다 주는 것과 또 잘만든 것은 별개이지만... 비지니스와 기술은 또 고민해야 되는 영역인데... 이건 패스할게요. ㅋㅋ
넵!
항상 답변해주셔서 감사합니다
돈을 벌어다 주는 것에 더 관심이 있다면 사업가 기질이 있는 것일 수 있겠지만 기술을 다루는 엔지니어라면 기술쪽에 더 고민을 하는게 좋을거 같긴 하네요
그 제품의 퀄리티를 올리는 작업이라는게 기술적 난이도나 많이 알고 있다고 되는게 아니라 버그를 계속 고치고 테스트를 하고 조금씩 개선해 나가고 하는 그 사소한 모든 것들이
참... 중요합니다
뭐라고 설명하기가 어려운데 공감은 하실거에요 ㅋㅋ 음...
그러면 제품의 퀄리티를 올리는게 코드의 완성도랑은 또 다른느낌인가요?
이 리액트 문서와 https://ko.reactjs.org/tutorial/tutorial.html
방장님 제 노션 보시면 깜짝놀라실듯 합니다 방장님 글 싹다 스샷해서 두고두고 보려구 저장해놨습니다...
이 리액트 문서의 차이? https://beta.reactjs.org/
아 ...
이게 퀄리티가 더 좋군요
아... 아니요?;;
후자가 개선을 하려고 하는 방향입니다만...
앗 .. 아니군요 ㅠㅠ
React는 그냥 문서를 잘 못만드는 걸로. ㅋㅋㅋ
요번에 광장히 보기 편하게
만들어진것같습니다
영화같은거라고 생각하시면 되요
같은 영화인데 더럽게 재미없게 못 만든거 있잖아요...;;
ㅋㅋㅋㅋㅋㅋㅋ
넵 ㅋㅋㅋㅋ
아하 ㅋㅋ 이해됩니다
바로 이해했습니다 ㅎㅎ
완성도는 기술의 영역이 아니다!! 얼마나 챙기고 다듬고 개선하려고 하는 노력과 디테일의 영역인데
이건 배운다고 배워지는게 아니라서
정리를 하자면
리액트를 보니 UX/UI 부분도 중요하다고 볼수 있네요..
블로그 만들어서 글들을 포스팅하는거 중요하다고 생각하시나요??
신입 취준용 블로그..
1) 일단 혼자서 웹 서비스 1개는 만들 줄 아는 경지로 가자(기초) 2) 그러면 협업을 통해서 사이드 프로젝트를 해보자 (아이디어를 구체화 하는 능력과 협업) 3) 이후 제품의 완성도를 올려보자. (완성도는 정성과 고민과 디테일이다!! 기술이 아니고... 근데 엄청 중요하다.) 4) 코드 완성도와 퀄리티도 고민을 해보자. (이건 프로젝트를 길게 해봐야 알 수 있어요!!)
아 코드 완성도가 리팩토링!
네~ 일단 취업에 유리하기도 하구요... 글을 잘 쓰는 능력도 알수 있고 성실함을 또 알수 있는 장치기도 하니까요
감사합니다 메모
그리고 무엇보다 본인에게 엄청 좋습니다. 쌓여있는 글들을 보면 누가봐도 했다는 게 보이잖아요
깃에다가 TIL도 도움이 될까요?
그렇군요 ㅎㅎ 감사합니다
뭐든 기록은 다 도움이 됩니다.
넵
글을 잘 쓰는 능력 엄청 중요합니다!! 연습 연습!!
프론트에서 계층을 나눈다고는 하지만 쉽지가 않은데 비즈니스로직과 유저인터렉션 부분을 명확히 나눌만한 예제가 있을까요?
기록은 매일매일 하는 습관이 중요 하군요..
용태님 항상 너무 감사합니다
기록남기기
저두요!! 감사합니다 :)
진짜 중요하더라구요
코딩테스트는 어느정도로 준비해야 하나요??
이력서 쓰는데 정말 후회 많이 됬어요 ㅠ
그때 무슨 고민을 했고 어떻ㄱ ㅔ해결하려고 노력했는지가 기억도 가물가물하고
하이퍼링크로 남기고 싶은데 기록이 뜨문뜨문 있으니깐 아쉽더라구요
프로그래머스 1단계 다 푸는 정도 될때면 이력서 넣을 정도 되나요??
글쎄요~.~
그건 알고리즘 능력이라 개발능력이랑은 다르다고 생각해요 ㅎㅎ
기업마다 다르지 않을까요~? ㅎㅎ
이건 답이 없는 문제인가보군요
그래서 저도 매일 얻는 짧은 지식은 빵부스러기 라는 이름의 깃헙 레포에 올리고 거기서 좀 딥하게 들어가고 싶다!! 하면 블로그에 풀어서 쓰고 있어요
최근에 시작했습니당ㅋㅋ
쿠키..?
빵부스러기 ㅎㅎ 재미있는 네이밍이십니다
저는 노션 데이터베이스를 만들어서 기록하고 있습니다.
이건 서칭해보시면 어느정도는 나와요 회사마다 다르기도 하구요
노션 API를 이용해서 블로그 제작도 해보려고요..
오..
쉽진 않겠지만 해보고 있습니다.
오.. 멋지시네요
좋네요!!
사진
ㅋㅋㅋㅋ
구글링하다가 너무 충격적인 이미지를 봤습니다...
이거 스크래치 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
짤 찰지네요 ㅋㅋㅋ
ㅋㅋㅋㅋㅋ 그런 시기가 한번쯤은 오긴 하지만 결국 개발은 재밌습니다 ㅋㅋㅋㅋㅋㅋ
만들게 된다면 사이트 올려 보도록 하겠습니다.
혹시 strapi 나 contentful 같은 headless cms 프로젝트나 회사에서 사용해보신 분들 계실까요
저희는 다 스프링이나 노드류 백엔드를 할 기회가 많은 없는 거 같아요
힘이나네요… 응원 해주셔서 감사합니다.
개인적으로 제일 힘날때는
회사 스택이 headless cms + 리액트 + 그래프ql 인데요...회사에서 홈페이지 리뉴얼을 한다고 디자이너를 채용했어요. 제는 겨우 취뽀한 신입 리액트 개발자라서 아키텍쳐를 어떻게 짜는지도 모르는데 다 갈아 엎을 예정인듯하고 스택상 백엔드분도 따로 없으셔서 저랑 개발 헤드이신 1분이랑 둘이서....해야하는데 막막해서 여쭤봤어요 하하하하하하
1. 발표나 세미나에서 다들 칭찬해줄때 2. 서비스 이쁘다고 다들 이야기해줄때 ㅎㅎ
충분히 하실 수 있어요 strapi해봤는ㄷ 노코드 툴처럼 간단하더라구요! 프론트을 위해 나왔을 정도로! 엄청난 커스텀을 많이 하지 않는 이상 쓸만한 도구 툴이에요 직접 백엔드 서버 개발자가 없는 거라면..
프론트엔드는 늘 그 패턴이라서요 ㅋㅋ 미리 연습하신다 생각하시고 그냥 해보세요. ㅋㅋㅋ
다개국어도 하는 서비스이고 데이터가 많아서 리디자인 미팅을 하고 갑자기 😂 머리가 하얘지네요..네 살아남아볼게요
두 분이서 서버도 만들어서 하셔야 하는 건가요??...
레벨업 엄청 하시겠네요...😂😂
국제화는 다들 어떻게하시나요
https://github.com/Lee-WonJun/JDD-Description JDD라는 방법론도 있네요 공부할게 자꾸 나오는것 같아요
그냥 컴포넌트에서 t 이거쓰시나요?
https://www.npmjs.com/package/svelte-i18n 저는 요고 쓰고 있어요ㅎ
이모티콘 다들 오늘도 괜찮은 하루 였길 바라겠습니다! (_ _) 저.. 아까 퇴근했고 운동 다녀와서 톡 남겨요!! ;ㅁ;
혹시 react 이모지 input 라이브러리 뭐 쓰시나요??
자바스크립트로 코딩테스트 준비하시는 분들 많나요? 코테 준비하시는 분들 타입스크립트로 하시는지 궁금해서 여쭤봅니다!!
코테에 타입..?
안쓰나요?
진짜 마스터 되겠는데요
코테에 타입..
아하 안쓰는군요 ㅋㅋ 반응 보니 알겠습니다
잘 모르겠어요 저는 허접이라..
거의 js로 해요
그냥 신박해서
다음에 한 번 도전해보겠습니다..
면접을 ts로 보는 경우는 있는데 코테는 보통 타이핑할 이유도 없고 여유도 없고 그렇습니다
면접가보면
가끔
ts로 요구하는 경우는 있는데
안녕하세요. 제가 인터넷에 관련 자료를 검색하고 싶은데, 어떻게 검색해야 할지 몰라서 질문 드립니다. svelte 에서 컴포넌트를 import 할때 onclick 함수를 props로 내려준다면, export let onClick 을 사용안하고, 해당 태그에 on:click만 사용해도 improt한 컴포넌트에서 on:click을 통해 바인딩이 되던데, 되는 이유를 어떻게 검색해서 얻을 수 있을까요?
코테는 거의 100%에요
거의 100% js 말씀이신가요?
넹
ㅠㅠ 혹시 emoji-mart 써보신분 있나요
ts로 해도 js랑 크게 다르지 않습니다. 어차피 코테에서는 number, string 정도만 사용되기 때문에, 직접적으로 타입을 명시해줄 일이 거의 없어요. 이차원배열 같은 경우에 타입 명시해주면 오히려 실수 안하게 되서 좋을때도 있더라구요 문제는 플랫폼에서 TS를 지원해주냐 인데... 프로그래머스나 구름에서는 지원안해줬던거 같네요.. leetcode나 boj에서는 ts로 종종 풀고 있습니다 ㅎㅎ..
경험상 유니콘 스타트업 중에 라이브코딩 타스로 하는 데는 있었습니다!
친절한 답변에 감사합니다!
유니콘 정도 되면 ts로 하는군요~ 몰랐던 정보를 알려주셔서 감사합니다!
앗 유니콘 정도 되면은 아니고 그냥 그 회사가 그랬단 거였어요 ㅋㅋㅋㅋㅋ
아하
이것도 회바회에 더 가까운 문제인가보네요
그 회사에서 ts를 더 중요하게 생각하면 보나보네요 대부분은 js로 코테보고
보통 근데 기업에서
사이트를 던져주면 거기서 제공하는
언어로 하는데 거기엔 자바스크립트나 노드만 있더라구용
개인적으로 근데 그렇게 타입스크립트 사용 능력을 보고 싶은 기업이라면 과제를 내주지 않을까 싶네용 ~~
채점사이트 한번 만들어본적 있는데 예전에
타스 자동채점하려면 컴파일이나 트랜스파일을 해야돼서 그런지 많이 오래 걸리더라구요 채점하는데
물론 그게 사이트에서 타스를 제공 안해주는 이유인가 하면 그건 아니겠지만요 ㅋㅋㅋㅋ
코틀린이랑 타스가 진짜 채점서버 터트리는 주범이었어요
아하 ㅋㅋ 다들 친절하게 답변해주셔서 너무 감사합니다
그냥 svetle 문법과 제공하는 기능이 그런거입니다
답변해주셔서 감사합니다 ㅎ
여태까지 많은 코딩 관련 오픈카톡방을 돌아다녀 봤지만 이 방만큼 사람들이 다들 지식을 알려주는거에 꺼림도 없고 활발하고 친절한 방 없었던 것 같습니다...
공감합니당
얼마전까지만 해도
자바 궁금한거 있어서 질문하러 갔었는데 거의 구걸하듯이 질문했네요
이거이거 왜해요? 하는 역질문을 오히러 많이 받았던거 같습니다...
질문하느라 서러웠던 나날들이여 이젠안녕~~
좀 아재같나요 감성에 취해서 ㅋㅋ 죄송합니다
그럼 이러이러한 이유로 한다고 말하면 되지않나요 ?
약간
물론 저는 학원에서 시키니까 한거죠 ㅋㅋ
갑갑해하기만 하고
알려주지는 않은 그런거
아닐까요
물론 제가 질문을 횡설수설하게 여쭤봤을 수도 있어요
물론 사바사인것도 어느정도 알고있지만 그래도 저는 여기방이 하루만에 좋아졌네요
갑갑해 하기만 하고 알려주지는 않는거
개발자중에 실제로 대화의 기술이 어렵다고 느끼는 사람들
많다고 합니다
저도 처음 공부할 때
그런 대화 겪으면 괜히 자존심 상하고 그랬어서,,,
어느정도 이해갑니다,,,
저도 약간 성격있기도 하고 오픈카톡이라서 익명이라 용감해져서
그런식으로 답달거면 차라리 답을 달지마세요 이런적은있는데
요즘은 제 구글링 능력이 부족해서 라고 생각합니다...
저도 신입개발자라서 비슷한 입장이긴 한데요... 모르는 내용에 질문을 잘 하는 것도 중요하다는 말에 공감합니다
맞아요 질문도 진짜 하니깐 늘더라고요
맞습니다 ㅠ
예전의 저를 생각하면 그냥 핑프로 보였을수도 있을거 같단 생각이...ㅎㅎ 그래도 이방분들은 어떤 질문이든 친절히 알려주셔서 늘 감덩입니다
핑프가 뭐에요??
지금같은거? ㅎ;
검색 안하고 물어보는,,
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 한번 찾아보셔요
ㅋㅋ 이거 별다줄아닌가요
그래도 물어보세요~ 물어봐야 이건 물어봤야 되는건지 아닌건지 알게 되는 것도 있고
저는 여기분들이 답만 쏙 빼가려고 하는 사람들이 아닐거라는 것과 함께 너무 쉬운 질문이라면 내가 알고 있는 지식자랑(?)을 할 수 있는 멍석을 깔아준 소중한 사람이라 생각하고 ㅋㅋ 마음껏 답을 주셨으면 좋겠어요
맞아요! 머릿속에서 의문드는걸 텍스트나 입밖으로 꺼내는 순간 기억에 훨씬 많이 남는건 맞는거같아요ㅎㅎㅎ
왜냐하면 설명도 해봐야 느는 거라서 서로에게 윈-윈이이 될거라고 생각합니다 :)
맞아요
쉬운질문이라 욕먹더라도.. 욕한번 먹으면 오히려 좋아 기억에 남아..!
스터디 하는중인데 말하는것도 진짜 많이 늘은 것 같습니다
완전 공감합니다 ㅋㅋ
핑프 이거 기억에 남을듯합니다 ㄹㅇ
다른 분들이 질문하는걸로 배우는 것도 많습니다 ㅎㅎ
진짜 설명하는 스킬도 늘고
설명하다 간혹 어? 이게 아닌거 같은데? 싶을 때 잘못 알고 있던거 바로잡게 되는 경우도 있어서
좋은 것 같아요 ㅎㅎ
맞아요, 그리고 "뭔가 이거 물어보는게 쪽팔린 거 아닐까?"해서 오프라인에서는 삼켰던 질문들도 편하게 할 수 있는 것 같습니다
{ "received": [ { "id": 2, "storeMenuListDto": { "image": "cake.com", "menuName": "1호 커스텀 케이크", "menuDescription": "맛있는 케이키", "price": 2000 } } ], "accepted": [], "making": [], "completed": [], "canceled": [ { "id": 1, "storeMenuListDto": { "image": "cake.com", "menuName": "4호 커스텀 케이크", "menuDescription": "맛있는 케이키", "price": 2000 } } ] }
혹시 key값이 이렇게 열거되어있을때
이거 enum 활용해서 타입 지정하고 싶은데
어떻게 표현하는게 좋을까요?
사진
이렇게 해볼려했더니 에러가 나서
혹시 효율적으로 타입 지정 받는 추천 받습니당 ㅎ;
음
코드 한번 풀로올려주세요
orderStatusKeys가 어떤거에요?
enum Key { RECEIVED = 'received' … } type Data = { [key in Key]: Some[]; }
사진
이거 입니당
some []는 [ { "id": 1, "storeMenuListDto": { "image": "cake.com", "menuName": "4호 커스텀 케이크", "menuDescription": "맛있는 케이키", "price": 2000 } } ]
를 타입으로 지정해준거로 생각했습니다
요렇게 하면 되지 않으려나요? 이넘 활용하실 거면
사진
우움우움 enum 이유가 타입지정도 있긴한데 개발하면서 한글로 보는게 조금 편해서 이렇게 쓰고 있긴한데
저렇게 하고 주석을 상단에 달아줘도 되겠네요!!! 감사합니당
ㅎㅎㅎㅎ
엇 그러신거면 똑같은 코드에서 enum Key = { 주문대기중 = 'received' … } 하시면 될거같은데요?
const orderStatusKeys = { 주문대기중: 'received', 주문완료: 'accepted', 재작중: 'making', 픽업완료: 'completed', 취소된주문: 'canceled', } as const type OrderStatueEnum = typeof orderStatusKeys[keyof typeof orderStatusKeys] type ISellerOrderList = { readonly [k in OrderStatueEnum]: unknown[] } export const dt: ISellerOrderList = { received: [ { id: 2, storeMenuListDto: { image: 'cake.com', menuName: '1호 커스텀 케이크', menuDescription: '맛있는 케이키', price: 2000, }, }, ], accepted: [], making: [], completed: [], canceled: [ { id: 1, storeMenuListDto: { image: 'cake.com', menuName: '4호 커스텀 케이크', menuDescription: '맛있는 케이키', price: 2000, }, }, ], }
OrderStatueEnum 가 아니라 OrderStatueUnion이 되버렸네요....
!!!!!!!!!!!!!!!!!!!!!
역시 곰젤리님 완전 타입을 스윙하고 계시네요…
이거 보니까 뭔가 이런걸 원하는것같아서....
ㅋㅋㅋㅋㅋㅋㅋ
아 맞아요 ㅜㅠㅜ
저번에 질문 올렸을때도 트리 쉐이킹 때문에
유니온 타입 쓸려고 노력했었는데
아직 저는 스윙하고있지 못합니다....
readonly를 앞에 붙여줘야 되었군요
정말;; 겸손까지 스윙하시면 곤란하십니다;
덕분에 조금 더 좋은 코드가 되었네요 ㅠㅠ 집단지성 감사합니다 여러분덜
이모티콘
CRUD로 간단한 웹페이지를 만들때 DB서버나 node서버를 남는 노트북으로 리눅스 설치해서 만들어봐도 많은 도움이 될까요?
클라우드에 올리셔요~
AWS lambda, dynamoDB, httpgate 이렇게 쓰시는것도 좋구
lightsail에 간단하게 배포하시는것도 좋구
조금 욕심부리시면 ecs 로 docker 환경 만드시는것도 좋아보여용
한번 생으로 만들면 도움이 될까 싶어서요..
아하아하 ㅎㅎ 그러면 인스턴스에 올리는게 제일 좋아보이네용
남는 노트북으로 하시면
아마 리눅스 재설치 꽤 많이 하실거같아요
네네 남는 노트북에 우분투를 설치 해놨어요
포트포워딩 같은거 직접 해보면서 얻는 게 있긴 했어요
근데 돈아낀다는 거 빼고 클라우드보다 나은 게 없었던 거 같아요.. 실무에서 노트북에 서버 띄울 거 아니니까
네 그렇군요.. 그냥 개인 프로젝트 할때 해보려고요..
백엔드 서버를 돌렸던 건 아니고 마크 서버 도커로 띄웠는데 ec2에 띄우긴 돈아까워서 남는 컴퓨터로 돌렸었습니다 :)
한번쯤 해보시는 건 추천드려요! 나름 고정ip 유동ip 알아보고 우리집 와이파이가 어디 연결돼서 어떻게 나오는건지 보는 재미가 있었어요
네네 한번 해봐야 겠어요 도움 주셔서 감사합니다.
웹이 어떻게 돌아가지는지 알 수 있을꺼 같아요
아 약간 생으로 바닐라로 바닥부터 해보시고 싶은거군요
나중에 성공하시면 경험 공유해주세요 ㅎㅎ 재밌을거같아요 화이팅입니다!
감사합니다.
안녕하세요 혹시 next.js로 개발할때 react strictMode true로 설정하고 개발하나요?
false로 설정하고 개발하는 경우가 많은가요?
true로요 !
드류님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
반갑습니다
드류님~ 어서오세요 ㅎ 반갑습니다 :)
머머리 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
삭제된 메시지입니다.
삭제된 메시지입니다.
ㅎㅎ 저는 봤슴당
webstorm이 vscode 보다 좋은게 있나요?
ㅋㅋ
글쎄용 IDE는 각자의 취향이니 뭐가 좋다 할 순 없지만
저는 vscode를 활용하는 이유는 익스텐션이 잘되어있고 가볍고 자율성 있어서 사용하고 있습니다
파일찾기나 검색 기본 UI는 jetbrain이 잘 만들었어요
웹스톰은 중복코드 노란줄로 체크해주는게 귀찮으면서도 좋더라구요
vs는 익스텐션이 알파이자 오메가인데 깡통이 별로에요 ㅠㅠ
그런데 웹스톤같이 젯브래인 제품들은
개인적으로 기본 제공되는 git gui 너무 강력하다고 생각해요
유료라서 회사에서 안사주면
사용하기 조금 그렇지 않나요..?
프로젝트마다 node 버전 다르게 지정 가능하고
nvm 없이 가능한건가요?
꼭 사야하는가? 라고 하면 그렇지는 않습니다 웹 프론트라면 익스텐션 생태계는 vscode가 훨씬 더 빨리 업데이트 되기도 하구요
nvm 있으면 더 다채롭게 쓸 수 있죠 ㅎㅎ
저 같이 vscode가 없던 시절에 유료구매해서 쓰다보니 vscode로 옮겨타기가 너무 힘들더라구요 ㅋㅋ
npm script 실행을 터미널로 직접 하는게 아니라
설정해서 실행하게 만들 수 있어서
그리고 변수 같은거 한번에 바꿔주는 기능도 좋고
자동화가 무척 잘되어있어요
그... 스프린트 후기 보고왔는데요 6개월미만 개발자도 계시고 하던데 혹시 잘 참여가 됐나요?? 저도 해보고 싶은데 초보라서 잘 못 따라갈거 같아 질문드립니다!
sideCar님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저가 코딩공부한지 한 1개월 반정도 됬을떄 리액트도 잘 모르고 8기에 참여했었거든요???
sidecar님 반갑습니다 어서오세요 :)
그때 8기하고 쓴 회고글입니다 이거 참고하시면 될거같아여
협업에 기여 하는 방식은 꼭 개발스킬만 있는 것은 아니에요! 얼마든지 팀에 기여할 수 있는것은 많아요~ 대신 상쇄할만한 에너지와 적극성이 있어야 합니다. 함께 하는 것이지 그저 배우기만 하려고 하는 것은 아니니까요 ㅎ
반갑습니다!! 잘 부탁드립니다~
저도 웹스톰에 길들여져서.. 못갈아타구있습니당...
오 익숙한 이름이라했는데 벨로그 글 잘보고있습니다
웹스톰 쓰고싶긴한데 vsc 에 넘 ㅜ길들여져서 적응시간이 두려워요 ㅋㅋㅋㅋ
혹시 트랙 패드 사용 하시는 분 잇나요
손목 아픈건 없으신지들,,
트랙패드는 손목건강의 주적입니다
트래패드가
오히려 마우스보다 낫던데요
저는 손목받침대랑 같이 쓰고있는데 일반 마우스보다 괜찮은거같아요
오오
정독했습니다!! 글 정리 잘해주셔서 감사합니다 ㅎㅎ 저도 괜한 걱정보다는 용기를 갖고 그냥 시도해봐야겠네요!!!
다음에는 꼭 참여해봐야겠어요 ㅎㅎ
아앗.. 감사합니닷! ㅎ
ㅋㅋㅋㅋ 리액트 좋은글들 많이 올려주셔서
감사합니다
저도 손목이 저릿해서 버티컬 마우스 사용하고 있어요
버티컬 쓰고 나서 완전히 좋아졌어요!
손 작으신 분들 로지텍 리프트 마우스 추천드립니다
저도 손목 너무 아팠는데
바꾸고 나서 훨씬 나아졌어요
브랜드 아니더라도 버티컬이면 좀 나은 거 같아요
저는 figma를 좀 많이 봐야해서 좌측에 트랙패드 우측에 로지텍 mx 버티컬 쓰고 있는데
만족중입니다
리프트 사고싶은데 계속 품절이더라구요..ㅠㅠ
빨리 사고싶은데
오 이것도 방법이네요
메인으로 쓸생각만했는데
키보드 역할이 좀 큰것같은데 무접점 35g 쓰는게 진짜 효과 많이 봤어요
저는 드래그나 클릭은 트랙패드보단 마우스가 조금 더 편하더라구용 ㅎㅎㅎ
손목 건강은.. 개인적으로 컴퓨터보단 핸드폰 많이하는게.. ㅠㅠ
이것도 연관 있습니다 확실히..
핸드폰이 생각보다 무게가 있다보니 핸드폰 들고 이것 저것 보다보면 피로가 많이 쌓이는 것 같아요
아 진짜 맞아요..
손가락도 아프고
핸드폰 좀 가벼운거 쓰는것도 도움이되는것 같아요
웹툰을 너무 많이 봐서 ㅋㅋㅋ
ㅋㅋㅋ
엄지가 아파요 🤣
삭제된 메시지입니다.
ㅋㅋㅋㅋㅋ 저도 웹툰 많이 봐서 공감되네요
뒤로가기가 얼마나 먼지..
재즈님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 재즈님~~ 반갑습니다 :)
안녕하세요 벨로그 글 보고 가입하게 되었습니다 반갑습니다 ~~ :)
감사합니다!!! 어떤 글을 보고 오셨나요?? +_+ (개인적인 궁금함입니다. ㅋ)
react native에서 splash screen 만들어 보신 분 계신가요 ?
구글링해서 나오는 글 따라해도 적용이 안 되어 이틀째 헤매고 있네요 ㅜㅜ
링크드인에 프론트엔드 변천사 보다가 시리즈로 좋은 글들 많아서 보고 있습니다. 좋은 지식 공유 감사드려요 ~~
자바랑.. obective C 수정하셨나요
고맙습니다! 여기에서는 궁금한것들에 대해서 질문하고 답하는 공간입니다. 소소하게 프론트엔드에 궁금한게 있다면 얼마든지 편하게 글 남겨주세요. ㅎ
네엡 감사합니다 ~~ :)
백엔드 쪽 유지보수 하다가
신규 프론트엔드 개발 들어가게 되었는데
인프런 강의보면 볼수록 신세계네요
쑥스럽게 인사하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!! 쑥스럽게 인사하는 프로도님~~ 반갑습니다 :)
어떤 점이 흥미로우신가요? +_+
안녕하세요 블로그글 보다가 스프린트에 대해서 궁금해서 들어왔습니다!
9기까지 진행된것으로 보이는데 추후에 또 계획이 있으신가요??
단순히 화면에 뿌려주는 용도로만 사용했었는데 데이터 조작도 가능한게 흥미로웠습니다
혹시
제가 첫 인턴쉽에 도전하는데
학교에 선배나 아는 사수가 없다보니깐
프론트엔드 관련해서 이력서겸 포폴을 봐주실 분이 없는데
현업에 종사하시거나 채용 경험이 있으신 분 계실까요 ㅜㅜ
네! 있습니다 :) 아직 정확한 일정은 못 정했지만 적어도 7월 18일 이후로는 생각하고 있어요. 회사일정을 좀 지켜봐야 해서 다음주 중에는 일정이 나오지 않을까 생각합니다
재직자도 스프린트 참여 가능한가요??
그럼요!! 재직자님이 함께 해주시면 참가자분들이 아주 좋아합니다!!
시간은 밤 11시입니다
완전 썡초보도 가능할까요..
스프린트 기간동안 개근만 가능하다면 참여에는 제한을 두고 있지는 않습니다 :)
html5에서 a태그안에 블록요소를 넣어도 된다는 사실 알고계셨나요
Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.
테오의 스프린트 후기글을 보니까 5일안에 디자인+프로그래밍까지 완료하는 것 같은데 제가 제대로 본거겠죠?
저도 처음엔 실화인가했느데 다들 해내시더군요...! 그래서 저도 아직 코린이지만 이번 스프린트에 참여해볼예정입니다
오 이렇게 해도 돌아가나요?
원래 inline 안에 block 못 넣는데
a태그는 html5부터 허용되도록 바뀌었대요
참여해보고 싶은데 폐를 끼칠까봐 두렵네요
html 5부터는 컨텐츠 카테고리라는게 생겨서 인라인이랑 블록으로만 html 요소를 구분하지 않는다고 하네요. https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories
w3c에서 html보는데 진짜 신기한거 많슴당
네 맞습니다. 물론 보통 출시할만큼 완성이 되지는 않아요. ㅎ 완성을 목표로 하는 것은 아니니까요. 하지만 퀄리티는 다들 좋았답니다. ㅎ
사진
안녕하세요. replaceAll 을 현업에서 사용하고싶은데, 이 상태로만봐서는 구버젼에서는 지원하지않는 것 같은데 사용하기 힘든 상태일까요?
const str = '안녕하세요 테오의 프론트엔드 입니다 안녕하세요'; return str.replaceAll('안녕하세요', '안녕'); 이런식으로 사용하려고 합니다.!!
정규표현식을 활용해보시는건 어떨까요?
return str.replacel(/안녕하세요'/g, '안녕'); 이렇게 하시면 됩니다
str.replace(
아 정규식도 했는데, 안녕하세요 단어가 반복되면 하나만 처리하더라구요..
g 옵션
global 옵션 넣어주시면
다 잡아줘요
/g를 붙이면 다 잡아여
아 gi가 아니고 g였었네요
이전 버전이 맘에 걸리면 polyfill을 쓰세요. ㅎ
아직 멀었나봅니다..ㅎ
답변 감사드립니다!!
i는 대소문자 무시 옵션입니다.
처음으로 이력서 겸 포폴을 만들어봤는데
워니님의 블로그에서 이력서는 꼭 피드백을 받아보라하셔서
주변에 프론트 개발자가 한명도 없어서 이렇게 사적인 정보지만 올려봅니다 ㅠㅠ
마구마구 보고 강한 피드백 주시면 감사하겠습니다 ㅠㅠㅠ
굉장히 열심히 사셨네요.. 멋있습니다
굉장한데..
와!
이번에.. 처음으로 인턴 지원해보는거라
다 처음이라 너무 어렵더라구요
와 너무 조아보여요..
이미 해오신건 인턴이 아닌것같아요.. 대단하셔요
일단 이력서로는 떨어질것 같진 않네요!! 충분히 잘 정리하신것 같아요
엄청 노력 많이 하셨네요 대단하십니다.
아앗 인터넷에 jbee님이랑 워니님 이력서 열심히 작성해봤는데 잘 봐주셔서 감사합니다 ㅜㅜ
허브님! 허브님 페이지에선 이미지가 잘 불러와지시나요?
사진
이거랑 산돌이도 이미지를 불러오지 못하고 있습니다!
아! 저도 처음에 그랬다가 나중에 새로고침 몇번 더 하니까 나오더라구요~
오잉오잉 ...!!!!!
제출할땐 노션으로 제툴해야되겟네용
채용자님들은 안뜨면 안보시니깐,,,
앗 ㅋㅋㅋㅋ 새로고침 연속으로 하니 뜨네요!
이력서 너무 잘봤어요 허브님!
감사함당..! 그럼 이제,,, 자소서랑 면접준비
해야겠네요..! 덕분에 어디에 집중해야할지 알았어요ㅜㅜ
슥슥봐도 내용이 잘 읽혀서 좋았어요!
정리 너무 잘하셨는데요!!
쓰면서 제가 문제가 있으니깐 고친건데 정량적 지표를 측정안해놔서 뭐라 쓸말이 없어서 못쓴것들도 많았어요ㅜ
저같은 바보같은 행동을 하지 않으실려면,,, 로딩시간, 렌더링 시간, 빌드시간, 등등,, 이것저것 측정하면서 블로그에 기록하시길 ㅠ
안녕하세요 혹시 1년전에 한 팀 프로젝트가 있는데 그것을 포트폴리오에 첨부해도 괜찮을까요?
저도 비슷하게 교내 캡스톤 상도 타고 나름 잘한 프로젝트가 있었는데
안드로이드 프로젝트라서 따로 서술하진 않고 기타에 한줄 정도만 넣었어요
년도만 오래된거면 스케일이 괜찮다면 넣어보셔요!
작년 8월까지 했던 프로젝트 였거든요.
헛 고생하셨어요
멋있으시다
이제 사짜가 되지 않게
면접 준비 해야합니다…
정말 멋지십니다.
ㅋㅋㅋㅋㅋㅋㅋㅋ
혹시 프로젝트에서 색상 관리는 어떻게 하시나요? styled-component에서 DefaultTheme { color : { red : ~~ ; blue : ~~; } , ...} 을 통해 관리하려고 하는데요, 네이밍이 고민입니다. 밝은 순서부터 어두운 순으로 red-0, red-1 이런 식으로 하자니 같은 계열의 색이 추가될 때마다 계속 나머지 값들도 수정해줘야 하는 것 같아서요.. 혹시 체계적인 관리 방법에 대한 노하우가 있을까요..?
사진
저희도 체계를 이제 잡아가는 중인데 일단 색상과 숫자를 이용한 색상 팔레트를 만들고 그중에서 몇몇 색들은 이름을 붙여서 primary accent 로 사용하려고 하고 있어요
프로젝트 시작할때 디자이너랑 디자인 시스템에 대해 먼저 이야기 나누고
primary color랑 accent color 만들어서 global에 선언해두고 쓰고 있슴당
좋네요!
디자인 시스템은 만들어진걸 쓰는게 아니라면 결국 만들면서 채워나가고 다시 그에 맞게 만들어야 되는거라서
시멘틱 컬러에 대해 찾아보시면 좋을것같습니다 컬러를 hex값 대신 컬러의 목적과 적용되는 UI에 따라 네이밍하고 시스템화하는 것인데요 #fffff값 컬러 이름을 단순히 white로 지정하지 않고 background 컬러로 네이밍한다던가 하는 것입니다! 추후에 다크모드를 고려하고계신다면 컬러의 유지보수하는것에도 더 용이할것같습니다!
하고계신 서비스와 유사한 디자인 시스템 레퍼런스를 먼저 찾아보시고 (디자이너와 함께) 함께 고민을 해보시면 좋을 것 같아요
예제들 처럼 primary accent danger 이정도의 칼라 (+light +dark) 정도의 색깔과 grayscale쪽 색상들이 기본 골격이 되는 것이 일반적입니다
https://material.io/design/color/the-color-system.html 나 ui 라이브러리들 참고해서 잡아가면 좋더라고요
사진
저희도 이렇게 만들었는데 잘 안쓰네요
ㅋㅋㅋ 왜요?
다들 주니어라서 그런지 만들기에 버겁고 저런거 프로젝트 초기에 세팅해야되는데
그런 세팅시간도 주어지지 않고
ㅠㅠ
뭔가 애로사항이 많은거 같습니다
와우 그렇군요..!! 사실 제가 팀에서 디자인까지 전부 담당하고 있어서.. 디자인도 같이 해가면서 css작업을 해야 했어서 고민이었는데요, 말씀해 주신 부분들 잘 참고해서 작업해보겠습니다!! 도움 주신 분들 정말 감사드립니다!! 🙏🙏
공감입니다... 시니어가 계셔도... 프로젝트 진행하기 바빠서 디자이너랑 맞추지도 못하고 ㅠㅠ
저는 컬러 이름에 문맥(title subtitle 이런식) 을 추가하고 싶은데 디자인쪽에서는 색을 문맥 없이 그저 여기저기 색으로만 표기(333 555 777) 하다보니 좀 아쉬운 부분이 있네요.
typescript에서 form에서 시간 13:00 직접 입력하는데 13:00 의 data type이 뭔지 알려 주실 수 있나요??
Date?
다들 자바스크립트 세미콜론 붙이시나요? 안 붙이시나요? ㅋㅋ 저는 안 붙입니다~ https://youtu.be/hJjYvVOEO7s
저는 안붙이는데
프리티어가 알아서 붙입니다ㅋㅋㅋ
ㅋㅋㅋㅋ
저도 개인 플젝 할 때는 안붙이고 했는데
회사에서는 프리티어 룰에 의해서 ㅎㅎ..
저희팀에서는 붙이는게 룰이여서 붙여 쓰고 있습니당 :)
c계열 언어 위주로 접해본 분들은 세미콜론 없으면 너무 어색해 하더라구요
넣는게 좋은가 아닌가 고민 많이 했었는데 남들 보기 편한 것으로 정착 ㅎㅎ
저희 회사는 안붙여요ㅎㅎ
유돈노자스에서 붙이라고 해서 붙이고 있습니다 ㅋㅋㅋㅋㅋ
ㅋㅋ 그러면 문자열 따옴표는 뭐로 쓰세요? " vs '
저흰 싱글이욤
저희는 ' 사용합니다
저희도 싱글이요!
저희도!
저희도 싱글입니다!
그렇군요... 다시한번 프리티어의 영향력이 지대하다는 것을 느낍니다. ㅠ
테오님은 혹시 더블을 쓰시나요?
네 ㅋㅋ
오호 ㅎㅎ
저도 첨 배울떄 더블로 배워서 더블로 씁니다
자스는 더븡 파이썬은 홑이 편하더라구요. 많이들 그렇게 쓰는거 같은데 안 쓰는 곳도 있어서 적응 안되기도 하고
더블의 장점이 있을까요? 시프트 한번 더 눌러야해서 싱글로 굳어진게 아닐까 싶은데
세미콜론 얘기 좀 지나긴 했지만, 자스는 세미콜론을 써야 하는 게 맞고, 세미콜론은 자동으로 붙여주는 ASI 는 어디까지나 "오류 수정 로직" 이지 미관상의 차이를 만들어주는 게 아니라고 하더라구요
세미콜론을 붙이냐 마냐는 탭을 두칸쓰냐 네칸쓰냐랑은 다른 주제라고 되어 있었어요
그렇군요...
사진
"안 붙이자" 쪽은 asi는 명백한 언어스펙이고 린트처럼 껏다켯다 하는것이 아니기 때문에 안 쓰는 것이 이롭다고 보는거 같았어요
그래서 유돈노자스 저자인 카일 심슨은 세미콜론을 붙이라고 하면서 "ASI 가 있으니까 세미콜론을 안 써도 된다는 사람들의 주장은 틀렸다" 뭐 이런 강한 워딩을 썼더라구요
세미콜론 vsc에선 프리티어가 자동으로 붙여주지만 코테 코드에서 다 잘 붙어있으면 꼼꼼하단 인상이 드는 것 같아요 ㅎㅎ
장점이라고 하면 JSON은 "가 표준이다? 일까요? ㅋ
아 그렇네요 ㅎㅎ
실제로 세미콜론을 명시적으로 붙임으로써 리턴문을 개행하는것과 같은 논리에러를 유발하기도 하구요
예) return 1; // undefined 리턴
궁금한게 잇어요 객체에서 { a: 'a's value', b: 'b's value', } 여기서 맨뒤 쉼표 붙이고 안붙이고의 차이가 있을까요??
문자열 검색할때 JSON이랑 코드랑 따로 검색해야하는 것도 있고.. c부터 배워서 문자열은 " 로 익숙해졌어요.
오.. return 1 하면 1을 리턴하나요?
아뇨 undefined
없습니다. ㅋ 단 JSON에서는 에러나요
엇 그럼 세미콜론을 암시적으로 붙이는 쪽도 똑같은 거 아닌데 제가 뭔가 잘못 생각하고 있는 거려나요?
어제 면접질문에서 맨뒤에 붙이고의 차이를 아냐고 물어보셔서..
오히려 에러 가능성이 높은 쪽은 세미콜론 붙이는 걸 ASI에게 맡겼을 때가 아닌가 싶어서요!
차이가 있나 했습니다
;이 없으면 코드가 훨씬 더 깔끔해보인다고 생각합니다. ㅎ
적어도 세미콜론이 statement 의 끝을 결정 짓는것이 아니다라는것을 인지할수 있죠
물론 안붙이자쪽의 의견입니다 저는 세미콜론 붙입니다 ㅎㅎ
아하 넵넵 어떤 의미인지 인지했어요! 설명 감사합니다 :) 그게 더 편하게 보이는 사람들도 있을 거 같네요
델님도 아시겠지만 asi 가 해결못하는 구문이 있는데 그거만 아니었어도 안붙이는걸로 밀고 나갔을거 같아요
부먹 vs 찍먹 같은거라... 취향 차이라고 생각합니다. ㅋ
[1,2,3].forEach() -> ;[1,2,3].forEach()
return {
;(() => {....})()
브랜든 아이크도 붙이자고 말했고 카일 심슨도 붙이자고 말했던지라.. 개인적으로는 취향 차이보다는 뭔가 더 있다고 생각하긴 해요
테오님 실제로 이렇게 앞에 세미콜론 붙여서 코딩하시는거죠?
네~
저렇게 코딩 할 일이 많은 것도 아니고 빼먹고 적어도 ESlint에서 다 알아서 붙여줘서 괜찮습니다. ㅋ
가독성에서 얻는 이득도 무시 못하죠 ㅎ
그쵸 ㅎㅎ 네이밍을 하는게 좋은 프랙티스이기도 하고
암튼 취향차이다에는 살짝 공감하기 힘들긴 하네요.. 좋은 의견 감사합니다!
ㅋㅋㅋ 재밌네요. MBTI 같이 하나 만들어보면 좋겠네요.ㅋ 탭은 2칸 vs 4칸 어떤걸 선호하나요?
전 두칸이요!
저도요 ㅋ
4칸 하면 진짜 코드볼 때 로켓쏘는 기분 들 거 같아요
ㅋㅋㅋ 프론트 하시는분들 다 두칸이다에 한표
저도 두칸이 좋아요
그 콜백지옥짤 생각나네요
html 열면 가로스크롤 쫙
ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋ 퇴사전에 3칸으로 만들어서 다 변경하고 퇴사하면 어떻게 될까요
eslint --fix
사진
4칸 들여쓰기하는 코드 보면
닉네임이 이거이신분도 봤어요
등산하고싶어져요 고개 90도 돌리고
보통 js 컨벤션 2칸으로 많이 나오더라구요! 이건 너무 스탠다드러 굳어져서 왜 2칸이어야 하는가라는 질문도 올라왔더라구요 ㅎㅎ
팀에서는 4칸을 쓰는데 원래는 2칸을 선호합니다. 4칸 너무 넓어용 ㅠ
탭을 4칸 8칸 쓰시는 분들 입장은 "넓은 탭은 코드 구조를 얕게 유지하고자하는 압박을 준다" 라고 하더라고요
공감은 가는데 그렇게 쓰고 싶진 않았습니다.. ㅎ
8칸은..와...
탭 8 칸이 스페이스바 여덟번 맞나요?
네넵
와 진짜 넓기는 하네요.
모니터가 큰 거 아닐까요
그럴지도..
저는 모니터가 조막 만해서,, 탭 많이 넣으면 줄바꿈이 되버리더라구요 ㅠㅠ
샵검색 : #존카멕 crt
안녕하세요! 비개발 직장인인데 혼자서 조금씩 프론트 공부하고있습니다 너무 재밋네요 희희!!
사진
빌게이츠 이력서라고 합니다
하버드라고 적혀있는데..
뭔가 희망적인 말을 해주고 싶어서 공개한 것 같은데
자기소개 첫 문장이
하버드 1학년 재학중이며 운영체제구조, 데이터베이스관리, 컴파일러 설계와 컴퓨터 그래픽 등의 과목에서 모두 A를 받은 우등생이네요
ㅋㅋㅋ
이정도면 그냥 놀리고싶은거아닐까여ㅠㅠ
저런 스펙이었으니 차고에서 윈도우 만들었죠 ㅎㅎ
저는 윈도우 3.1부터 사용했었는데
대단한 사람이었구만 게이츠형
대단하네요 bb
혹시 현업에서 백엔드, 프론트엔드 협업하실때 swagger를 많이 쓰시는걸로 알고 있는데 request할때 넘겨받는 데이터 모델에 대한 example은 백엔드쪽에서 프론트로 보통 어떻게 전달해주시는지 궁금합니다! swagger request모델 안에 데이터박아서 주시나요??
혹시 flutter 하신 분 중에서 vscode 자동 포맷 하신 분 계신가요?? Stackoverflow 검색해서 나온거 해도 안되네요 ㅠㅠ
사진 2장
선배님들...
미디어 쿼리로 화면 줄어들면 다른 컴포넌트를 보이게 하는데 안에 주황색 svg 1,2,3 이모지가 색이 안나오는데요…왜이럴까여..
Css에서 모바일에서 visible같은거 설정해놓은건 아니세요?
화면크기에 따라서 css다르게 보이는 것 있자나요
svg라 width가 줄어들면서 flex 레이아웃이 눌린거같은데
오 저도 한번 참여해볼수 있을까 싶어서요 일정 기다리겠습니다!
flex wrap을
줘보시는걸 추천~
개발자도구 열어서 저 컴포넌트가 이상한 곳 가있지는 않은지 레이아웃이 다르게 잡혀있는지 확인해보면 좋을 것 같아요!
ㅋㅋㅋ 개발자 분들 마다 달라서요. 저는 그냥 예시 request를 쏴서 얻은 결과를 가지고 example이다 생각하는 편입니다. ㅎ
혹시 예시 request는 어떤걸 보고 테스트 하시나요?!
안녕하세요 혹시 jest로 테스트 할 때 절대 경로를 어떻게 설정해야 하는지 아시는 분 계실까요? 현재 제가 해결 못하는 부분은 ./jest/fn.test.ts 에서 import { convertAllMatch } from 'components/member/_shared/utils';를 통해 가져온 convertAllMatch를 테스트 하고 싶은데 'components/member/_shared/utils'파일에서 사용하는 다른 절대 경로 (import { addCommas } from 'lib/utils';)를 읽지 못하는 것 같습니다. 이 부분을 사진과 같이 jest.config.ts를 설정해서 해결하려 했으나 계속 실패하는데 도움을 요청드립니다.
사진 2장
졸린 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 모바일앱,웹 퍼블리싱하실 때 최소해상도 정해놓고들 하시나요!?
최소해상도요?
혹시 오픈소스 기여할 때 strategy가 다른 뜻으로도 쓰일까요?
일반적인 단어로 전략이라고 알고 있는데, 다른 뜻이 있는지가 궁금합니다
pr을 날렸는데, 메인테이너가 what is your strategy? 라고 물어 본 상황입니다
회사마다 다를 수 있겠지만 그래도 375까지는 맞추곤 하는듯 해요
그친구한테 물어보는게 빠르지 않을까요?
아니면 그 pr을 보여주시면 다른 분들이 이해하기 좋을듯
what do you mean? 해보세요 ㅋㅋㅋㅋㅋ
저희도375로 맞추긴했는데 만약에 그렇게 맞춘다면 클라이언트에서 따로 설정을 해줘야할부분이 있을까요ㅕ ?
혹시.. 이거 아시는 분은 안 계실까요? 간절히 기다리겠습니다 🥺
설정이라고 하면 어떤 부분을 말씀하시는 걸까요?
음.. 예를들어 global css 파일에서 min-width: 375px 이라던지 html 파일에서 viewport 태그 width 설정이라던지요! ㅎ
테스트 파일을 같은 폴더에 두면 어떨까요
우선 답변 감사합니다! 음 제가 설명을 제대로 적어둔 건지 모르겠네요 ㅎㅎ 이게.. (두번째 사진에 나오는 것 처럼) 테스트하려는 파일에는 접근을 한 것 같은데, 접근한 그 파일 내부에서 사용되고 있는 다른 함수 (절대 경로로, 다른 폴더의 파일에서 import한)의 절대 경로를 못 찾겠다는 에러가 나와서 이걸 해결 못하고 있는 상황이거든요 🥺
넵 그래서 테스트하려는 파일과 테스트 파일을 같은 폴더에 두면 해결될 것 같아서요
해결되었어요! 짠 코드의 테스트를 잊어버리고 있었네요!
감사합니다!
메타태그 말씀하시는거면 다른것보다 user-scalable=no 쓰면 접근성 문제가 있어서 WCAG에서 권장하는것처럼 최소 2배~5배 scale 확대 가능할 수 있게 설정해주는게 좋아요
아 넵 메타태그였습니다. 혹시 현업에서 디자이너분과 375픽셀로하자! 정해졌으면 클라이언트에서 따로 설정할거는 더 없을까요?
css에서 not가상클래스로 last child만 css를 다르게 적용하고 싶은데요 .borderline:not(:last-child) { border-color: #403e39; border-width: thin; border-style: solid; border-radius: 3px; margin-bottom: 8px; }
저는 라스트 차일드의 마진 바텀만 없애고 싶다면 어떻게 해야 할까요?
저방식은 모든 css를 적용하지 않게 하는 거라 제 의도와는 달라졌네요 ㅎ
스타일을 적용하신 태그가 list 태그가 아닌가요?
아 네 맞습니다. .borderline은 제가 임시로 만들었던건데 li태그에 적용합니다.
실제로는 li:not(:last-child)입니다~
실제로는 li:not(:last-child)입니다~
한 번 해봤는데 같은 문제가 나오는 것 같습니다 ㅠㅠ
사진
.list-item{ margin-bottom: 0px; } .list-item:not(:last-child){ margin-bottom: 8px; }
이렇게 하시면 마지막 li 태그에는 margin-bottom 값이 적용되지 않을거에요 :)
앗 감사합니다~~~
안녕하세요 프론트엔드 취준생입니다. 면접 보다보면 ‘서버 등 다른 개발 직무를 맡게된다면 어떻게 할 것인지?’라는 질문을 종종 받습니다. 그런데 솔직하게 저는 프론트엔드가 재밌고 더 잘하고 싶습니다ㅠ 팀프로젝트하다보니 다른 분야를 다시 공부해야겠다는 생각은 들었지만 그걸로 일하고 싶지는 않습니다… 다른 직무를 맡게된다면 잘 못 할 것 같고 솔직히 아예 안 가거나 이직할 것 같아요ㅠㅠ 그래도 당연히 ‘할 수 있다’고 답하는 게 맞겠죠…?
이런 생각이시면 개발자로 계속 성장하시기는 어려워요
아 그렇군요…
물론 그런 문제로 퇴사하는 프론트 개발자분등도 많이 봤는데요
신입이시라는 가정하에 프론트개발자 면접에서 서버 개발 직무도 할 수 있냐고 물어보면..
저는.. 프론트엔드로(자바스크립트+리액트) 들어와서 백엔드 자바 하고있는데 또 막상해보시면 재밋을걸요? ㅋㅋ
점점 기술 수준이 올라가서 프론트 개발자들도 직접 배포하고 서버를 올려야할 경우가 계속 생깁니다 물어보시는 분들도 대단한걸 바라는건 아닐거네요
전 소프트웨어 개발자라고 생각하지. 프론트엔드 백엔드 개발자가 따로 잇다고 생각하지 않습니다. 물론 분명히 다른 부분이 많이 있겠지만 프론트하다가 백엔드도 할 수 있다고 염두를 해두시는것도 좋을거같아요. 개발자라는 직업이 프로그래밍 언어를 배우는 직업이 아니라 프로그래밍적인 사고를 할 수 있는 직업이라고 생각합니다.
로투스님 마음도 이해가 가는데 프론트만 할거에요 하는 대답은 상대방에게 기술에 닫혀있는 자세로도 느껴질 수 있답니다
맞아요 프론트만 한다라는 생각보다는 나는 개발자이고 주로 프론트엔드 영역을 담당한다 라는 느낌으로 성장하시는게 좋습니다
그렇군요… 화면단을 만드는게 재밌다고 생각해서 프론트로 정하고 준비를 하고있었습니다. 서버쪽은 아주 조금 해봤지만 별로라고 생각했었거든요
다들 감사합니다! 제가 너무 좁게 생각했던것 같네요
저는 오히려 프론트에 집중을 하는게 맞다고 생각합니다.
저는 생각이 좀 다릅니다
전 생각이 좀 다른데, 프론트 개발자로 입사해서 프론트를 안 하면 그것도 웃긴 거라고 생각해요 내가 잘 하고 좋아하고 즐기는 게 있는데 강제로 다른 걸 시키는 회사가 좋은 회사라고 보이진 않네요
정말가고싶은 회사라면 네라고 할거같은데 그외 상황이라면 프론트 업무에 집중해보고 싶다고 할거같아요
서로 핏을 맞추는곳이 면접이니깐여
프론트엔드 개발자가 백엔드 영역까지 손대는 경우를 다른 일이다라고 정의하는게 위험하다고 말씀드리고 싶네요
물론 서버에 대해서도 열려 있고 서버도 나서서 공부하려는 개발자가 더 성장 가능성이 높은 건 너무너무 당연히 맞는 건데, 프론트 신입이 프론트를 안 하고 서버를 한다는건..
전문성이 당연히 떨어질 텐데 회사가 왜 시키지? 싶네요
회사에서는 애초부터 프론트엔드 공고를 냈을거고, 그 공고를 보고 로투스님을 지원하셔서 "프론트엔드 개발자"를 채용하기위해 면접을 진행했을텐데, 다른업무? 백엔드?를 하라고 면접관이 이야기한다.. 이 사람이 어떤 반응을 보일지 떠보는건가? 싶은 생각도드네요
디바이스 사이즈 확인, 웹 뷰라고 한다면 IOS에서 보여질수 있는 safe-area 에 대한 부분도 고려하면 되지 않을까요?
더군다나 신입이신데 말이죠.. 물론 난 프론트엔드 개발자니까 이것만하면돼. 다른거는 필요없어 내 일이 아니야 라고 생각한다면 위험하겠지만요
보는 화면과 생각해야 하는 관점이 완전 다른데 소프트웨어 개발자라는 직업에 묶여 있으니까 다른 개발도 열려있는 마인드로 봐야 된다 라는 말은, IT업계라는 분야에 묶여 있으니까 디자인을 시켜도 해야 되고 데이터 매니저를 시켜도 해야 된다는 거랑 같은 논리라고 봐요
그런데 저 질문을 생각보다 많이 물어보더라고요... 정말 '다른 직무가 주어질 수 있다'고 먼저 설명하신 곳도 있었고, 그냥 물어보기만 한 곳도 있었습니다
회사에서는 알아도 모른척 ㅎㅎ
풀 스택이라는 생각의 고정관념을 가지시는게 아닐까요?
풀 스택과 풀 사이클은 다릅니다
개발을 하면서 기획에 참여한다고 해서 그것이 기획자인 것은 아닌 것처럼
저도 프론트 채용공고 많이보고 면접도 꽤 본거같은데 그런질문은 받아본적이 없던 것 같은데.. 경력이라 그런가..
아 제가 면접 경험이 많지는 않습니다ㅠ
반대로 백엔드 개발자 면접에서도 물어보려나요..
회사가 좀 개발자 인력이 부족해 보였나요?
프론트 개발자가 가끔은 서버 코드를 봐야하고 손 대야하는 순간도 오는 건데 그것을 회사에서 다른 일을 시킨다 전문성을 떨군다라고 생각하시면 신입을 넘어 경력을 쌓아도 마찬가지일 가능성이 큽니다
그건 잘 모르겠습니다 중소기업 또는 스타트업이었어요
다른 분야를 한다고 전문성을 떨군다고 생각했다기보다는 프론트엔드 전문성을 키우고 싶은데 백엔드하느라 이도저도 아닌 개발자가 될까봐 걱정했던 것 같습니다
맞아요 신입때는 하나 하기도 벅차니까 그런생각 하시는게 당연해요
서버 코드를 보고 분석하고 건드리는 거랑 서버 개발 직무를 맡는 건 다른 거 아닐까요?
근데 신입이라면 당연히 그렇게 느끼실 수 있어요 ㅎㅎ
넵넵 델님 말씀이 맞아요 면접관의 의도가 불분명한 것 같아요
저도 신입때 첫 회사 입사해서 코드보는데 난 지금까지 뭘 공부했던것인가 바보였구나 생각했습니다 ㅋㅋ
저라면 다른 직무 맡을 수도 있다고 하면 굳이 안 다닐 것 같습니다.
오히려 다행이다하고 안가시는 것도 방법이겠어요
전문성 키우는게 맞다고 생각해요
저도 프론트엔드 개발자로 면접을 보았는데 다른 직무를 맡기겠다고하면 저는 프론트엔드에 집중하고 싶다고 할 것 같습니다~
프론트에 강점을 가지고 있어서 프론트로 전문성 쌓고 싶지만, 상황에 따라서 다른 것도 당연히 배울 용의가 있다 정도로 두루뭉실(?)하게 넘어가면 되지 않을까요?!
아 나그네님은 좀더 "서버 공부에 열려있냐" 는 뉘앙스의 질문으로 보신 거고 저는 "와도 프론트 자리 없어서 서버 해야 될 수도 있다" 라고 이해한 거 같네요 :)
‘서버 개발 등 다른 개발 직무’라고 적어주셔서 아예 프론트 이외의 직무를 시킬 수도 있다는 걸로 이해했네요. 예로 프론트로 입사했는데 몇달 서버팀가서 일하라고 하면 할까? 라는 생각이 들어서요. 당연히 다른 분들 말씀처럼 서버쪽 관심갖는건 당연한거고..
진짜 면접관 바이 면접관이라서..
몇달 서버쪽 가서 하라고 해도 안하는게 나을 것 같습니다
ㅋㅋㅋㅋㅋㅋ
넵넵 정확히 맞습니다 ㅎㅎ 면접관의 의도가 궁금하긴하네용
아 저는 '다른 직무를 맡을수도 있다 괜찮냐'로 이해하고 질문드린거였어요! 다른 직무는 알아야하는게 맞다고는 생각합니다
로쏘공
근데 회사마다 코드스타일이 다르다고 하잖아요? 같은 한국어라도 육지사람이 제주사투리 듣는것처럼 "이건 뭐지" 할 정도인가요?
저 이직했는데 무슨 외계어 보는 줄
알았습니다
그러면 경력이 있어도 이직하면 코드스타일 익히는 시간이 필요한거죠?
이런 분들도 계셔요 같은 프론트엔드 개발자지만 어느 영역에 강점이 있는지는 모두 다릅니다 ㅎㅎ
넵넵 그렇다고 따로 코드스타일 익히는 시간이 잡혀있진 않은데, 온보딩 및 OJT 기간에 적응하면 되는 거 같아요
면접 때 또 같은 질문 받으면 의도를 여쭤보는것도 좋은 방법인것 같네요! 아니면 프론트를 좀더 어필하는 것도 좋을 것 같아요. 무조건 '네'라고 답하는게 정답인지 궁금해서 여쭤본거였는데 좀더 솔직하게 굴어도 될 것 같습니다. 그리고 다른 직무에 너무 부정적으로 다가가는 건 안 좋은 것 같구요 다들 진짜 너무 감사합니다!
아 공부가 끊임없군요 ㅜㅜ ㅎㅎ
ㅎㅎ 프론트는 다른 회사 아니고 같은 회사에 계속 있어도 코드스타일 익히는 시간이 필요하죠.. 하도 많이 바뀌니
여러분은 왜 프론트엔드에 접하게 되셨는 지 알 수 있을까요?
저는 프론트엔드와 백엔드의 갈림길에 서있는 것 같아서 여쭙니다
막연히 '개발'을 하고 싶어서 오긴 했는데.. 아직까지
뭘 개발하고 싶은지 모르겠더라구요.
프론트할지 백엔드할지 동전 던져서 결정해서 여기까지 왔습니다
약간 선택의 영역도 있는 것 같아요. 프론트를 전문적으로 하는 사람이 될 것이냐, 여러가지를 전문적으로 하는 사람이 될 것이냐. 하지만 사람의 시간과 자원은 한정되어 있으니 사람의 능력치가 같다고 했을 때, 여러가지를 다 전문적으로 할 수 없다고 한다면, 프론트만 많이 잘할 것이냐. -> 좁고 깊게 파기 -> 스페셜리스트 이것저것 적당히 잘 할 것이냐. -> 넓고 얕게 파기 -> 제네럴리스트 의 문제로 가게 되고, 둘다의 니즈가 다 있긴 합니다. 개인적으로는 저연차일수록, 제네럴리스트라고 하기엔 너무 깊이가 얕을 수 있으니, 스페셜리스트를 더 선호하는 편이고, 고연차이면, 제네럴리스트, 스페셜리스트 둘다 그때그때 다르게 생각합니다.
저는 디자이너하다가 전향했는데 코드에따라 화면구현하는게 좋았어요 그리고 내가 직접 기능들을 만들어볼수있다는것두..
우리가 조조처럼 무력/지력/정치력/매력 모두 90+를 찍으면 좋겠지만... 조조는 약간 사기 캐릭터고.... 무력 100, 지력 10여포나, 무력 10, 지력 100제갈량 vs 모든 능력 70대 관평의 싸움?
근데 가끔씩 조조 같은 분이 계시긴 하죠... 그런 분들 보면 부러움 ㅜ
전 무력만 100인 것 같네요 ㅜ
PSY시면 매력이 100 아닐까요
아 ㅋㅋ 개명전 이니셜인데 버리지를 못하겠어요 ㅋㅋ
ㅋㅋㅋㅋㅋ
하와이에 있는 스타벅스를 갔는데 거기는 호출기를 주는게 아니고 이름을 불러서 음료를 전달하더라구요 전 당연히 제이니셜을 적었는데 나중에 음료 나올때 직원이 싸이~!! 싸이!! 이렇게 부르니까 사람들이 다쳐다봤어요 ㅋㅋ
ㅋㅋㅋㅋ
두유노 갱냄 스타일?
ㅋㅋㅋ
제너럴리스트 스페셜리스트 이야기 하니 드림코딩 유튜브영상 생각나서 공유드립니다 https://youtu.be/ly7UabPJNvs 2분쯤에 저희가 나눈 이야기 관련해서 말씀해주시네요
병아리 프론트님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
안녕하세용!
안녕하세요 아이디어 프로도님 반갑습니다~
프론트엔드로 입사했는데 백엔드나 다른 직무를 해볼수 있느냐라... 재밌는 주제네요!!
오... 전 X!!!!
유사한 업무를 함께 필요에따라 봐야하는거라면 이해하지만 다른 직무에서 일해야하는건 취업사기가 아닐까 싶네요
그건 맞죠
조세핀님이 나갔습니다.
FE는 협업 범위가 넓어서 다방면에 폭 넓은 지식이 있어야 하는데 아니 지식보다는 경험이 필요하니까 장기적으로는 다른 직군을 경험하는 것은 도움이 되는 건 맞지만 커리어를 생각하면 참 쉽지 않은 결정일듯해요
면접에서 근데 그렇게 물어보면 긍정적으로 대답은 하되 순수하게 "그러면 저는 입사하면 어떤것을 하게 되나요?" 는 꼭 물어봐야 될것 같네요 ㅎ
반대로 백엔드 가고 싶지만 신입은 수요가 상대적으로 적고 어려워서 프론트 가서 전향한 케이스도 있더라구요!
백엔드가 더 신입 수요 많지 않나요?
백엔드가 더 적은거같아요 체감상
시니어가 많아서 그런지
진짜요 ?
사실 프론트는 이런이야기하긴 그렇지만 시니어의 비중보단
그냥 백엔드 애들이 취업하기 더 어려워하더라구요
신입 몇명 더 붙이는게 아웃풋이 더 잘나오는 경우도 있어서
상대적으로 취업에서 순환이 빠르단 느낌을 받았어요
이직할때도 프론트는 다붙어서 골라가는데 백엔드 친구들은 많이 떨어져서 합격한 곳 가고
범위가 너무 넓어서 그런거같아요
백엔드 사람들 있는 데서는 이런 얘기 못하지만
솔직히 범위는 프론트 > 백 아닌가.. 생각합니다
백엔드가 요즘은 도커 msa 카프카 객체지향 클린코드 디자인패턴 알아야할게 너무 많아서 그런거 아닐까요
맞아요 백엔드한테 기대하는 기초수준이
난이도는 프론트 < 백 이고 공부량은 프론트 > 백
요즘 요구하는게 도커랑 msa 카프카 이런것도 신입한테 요구해서
개인적인 의견입니당!
생각보다 높달까...?
네 딱 이말이 맞는 거 같아요
저는 백엔드 취업하라하면
범위가 어떤 범위말하시는거에요?
절대 못해요
그냥 신입이 알야아하는 범위 ?
알아야하는
공부량, 기술적 레벨이 프론트랑 비교해서 미쳤다고 봅니다
아항
맞아여 백엔드가 더 어렵고 면접도 다이나믹하죠
레디스, nginx(분산) 이렇것도 필수고
제가 프론트 하는 이유도 자바스크립트가 좋아서 하는거거등요
자바스크립트 하나로 할 수 있는게 무궁무진하니깐
덕후처럼 한길만 팔 수 있더라구요
허들이 높은것 인정하는데 허들만 넘기면 취업이 프론트보다 쉬운것 같아요
백엔드도 그런거까지 다 하고 신입으로 들어가는 사람 거의 없을거에요 ㅋㅋㅋ
프론트가 많은 이유중 하나가 실제 화면에 보여서 그런게 아닐까요 ? 사실 프론트도 제대로하면 힘들죠
백엔드는 tdd 검증 그리고 속도 테스트 이런것도 요구되니까
근데 눈에는 안보이고 ;;
제 백엔드 친구 왈
로그 찍히잖아.
ㅠㅠ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
백엔드 넘 ㅜ
고되죠..
저도 백엔드 잠깐 공부했었는데 공감되는말이네욬ㅋㅋㅋㅋㅋ
결국 근데 비즈니스 솔루션을 제공하는 건
프론트보단
백엔드쪽이나 인프라에서 제시하니깐
CTO의 길을 걸을려면 나중엔 결국 백엔드를 해야되겠더라구요
일단 프론트로 취업먼저 ㅎ;
프론트가 서비스의 질을 결정한다면...
백엔드는 없으면 서비스가 성립이 안되니까요 ㅋ
둘 다 중요…
테오~ 메일로 연락처 보낼게요! 도착하시면 전화주세요 ㅎㅎ
네 :) 지금 가는 중입니다
안녕하세요 궁금한게 있습니다! https://holaworld.io/ hola페이지에서 로그인을 클릭해보면 모달창이뜨고 정보를 입력할때마다 url의 변화 없이 화면전환이 이루어지는데 조건부렌더링으로 구현한건가요???
졸린 무지님이 나갔습니다.
정보 입력을 어디서 하나요? 모달창에 구글 카카오 로그인 같은거 밖에 없어서..
사진
로그인 버튼 클릭하고 구글로그인으로 시도했을 떄 회원정보가 없을 시 정보입력창으로 넘어가는거 같아요!
아 로그인까진 안 해봤는데 그렇군영 그냥 steps으로 state 관리하고 step 0이면 닉네임, 다음 눌러서 step1 이면 다음 이런식으로 돼있지 않을까요
비슷한거 구현했었는데 저는 스텝 숫자를 저장하는 state를 두고 스텝별로 조건부렌더링 했었습니다!
아!!!!! 이해했습니다 감사합니다 !!!
혹시 react 테스트 관련해서 볼만한 아티클 아시는 분 있을까요?_?ㅎㅎ
아티클은 아니지만 https://github.com/kentcdodds/react-testing-library-examples 이 레포가 예제 정리 잘되어 있어서 공유드립니다
오! 너무 좋네요! 감사합니다 :)
혹시 최근에 ios에서 스크롤 막아보신분있을까요? 부모 컨테이너에 overflow-hidden을 주면 안드로이드에서는 스크롤이 막아지는데 ios에서는 막아지지 않습니다
fixed 속성을 줄 수 없어서 다른 방법을 찾고 있는데 out data된 자료들이 많아서 헤매고 있습니다
이게 iOS 에서 적용이안되서
ios에서는 부모 컨테이너한테 overflow: hidden을 주면 해결할 수 있어요
참고로 overscroll-behavior 는 사파리16에서 지원 예정이라고 wwdc에서 발표했어요
음 근데 다시 읽어보니까 iOS에서 overflow: hidden이 안된다는거였네요 ㅋㅋㅋㅋ
position: fixed 쓰면 스크롤은 막아질텐데 최상위로 스크롤되는 문제가 있을거에요
네 맞습니다. overflow-hidden이 ios에서는 안되서 다른 속성을 찾고 있습니다.
position: fixed도 해보셨겠네요....
저거 진짜 힘들더라구요 ㅠㅠ
네 fixed로 하면 스크롤은 막아지는데 레이아웃이 깨져요 ㅠㅠ
삭제된 메시지입니다.
근데 스크롤 막아야되는게 어떤상황이에요?
팝업이 열리면 뒤에 배경을 막아야 하는 상황입니다!
팝업열릴때 팝업의 부모요소로 화면을 덮는 투명요소를 만들어놓고
투명요소에다가 addEventListener('touchmove', (e) => e.preventDefault(), { passive: false })
이렇게하면 터치전파가 막혀서
뒤에 스크롤도 안되는 그런 방법이 있긴해요
감사합니다 시도해볼겠습니다!
<면접 준비는 어떻게 해야 하나요?> 취업을 준비하시는 분들이 많이 하시는 질문입니다. 그리고 당연히 이러한 질문에는 정답은 없습니다만 그래도 이 글이 도움이 되기를 바라며 글을 적어봅니다. 일반적으로 내가 가고자 하는 직군 - 저에게는 프론트엔드겠네요 - 에 관련된 기술 면접에 대한 기출문제는 많습니다. 그리고 그러한 질문에 대한 정답이 적혀있는 컨텐츠를 찾는게 어렵지 않는 요즘입니다 그리고 대부분 면접관 역시 이러한 질문들을 참고해서 기술관련 질문지들을 준비하곤 합니다. 그러면 역시 기출 문제들에 대한 대답들을 많이 외우고 말을 할 수 있도록 준비하는 것이 정답인걸까요? 그렇지만 면접관들이 정작 원하는 대답은 해당 기술을 알고 있는지가 아닙니다. 그것보다 실제로 이러한 기술을 해 본 경험이 있는지? 써봤을때 어땠는지? 해당 기술을 사용하면서 다른 문제들을 겪어 봤는지? 어떻게 하면 더 나은 방법이 있을지 그 사람의 경험과 생각을 알고 싶어 한다는 것을 꼭 기억해주시길 바랍니다. 면접관은 그 사람을 평가하지만 평가의 기준은 그 사람리 많이 알고 있는지 실력자인지가 아니라 내가 함께 같이 개발을 하고 싶은 사람인가? 입니다. 그렇기에 내가 하는 고민을 함께 하고 즐거운 공감대를 가지고 함께 하고 싶은 사람을 뽑고 싶어 합니다 그러니 면접 기출 문제에 대한 연습을 하실 때에는 해당 질문에 대한 대답을 외우고 답하시지 마시고 꼭 그 이상의 경험과 내 생각에 대해서도 고민을 하고 대답을 해보는 연습을 해보시길 바랍니다 1) 해당 기술을 사용해본 경험이 있나요? 2) 어떤 점이 기존에 비해서 좋았었나요? 3) 어떤 점은 아쉬웠나요? 4) 해당 기술은 원하는 문제를 해결해줬나요? 5) 애로사항은 없었나요? 6) 실제 써보면서 이렇게 쓰니 좋더라 하는 나만의 방법은 있나요? 7) 다시 이 문제를 해결하라고하면 이 기술을 쓰실건가요? 8) 다른 대체 기술에 대해서 어떻게 생각하세요? 9) 그밖의 나의 경험과 나의 생각 정답이 있는 질문에 대해서 준비하고 대답하는 것은 누구나 할 수 있습니다. 그래서는 변별력이 없겠죠. 하지만 자기의 경험과 자기의 생각은 유니크합니다. 그러니 면접 기출 질문에 대해서 정답이 아니라 내 경험과 내 생각을 꼭 같이 고민을 해보시기를 바랍니다 취업을 준비 하는 모든 분들 응원합니다!!!!
안녕하세요. 자란다 채용 매니저 김미준 입니다! 자란다는 오프라인이 주력이었던 유아동 시장을 디지털화하며 교육과 돌봄에서 발생하는 다양한 문제를 데이터와 머신러닝 알고리즘으로 해결하고 있는 업계 1위 (누적투자금 447억 )데이터 매칭 플랫폼인데요. 지난 2월, 라인에서 새롭게 CTO님을 모시게되어 4개월간 준비한 콘텐츠. 자란다의 시장 가능성과 곧 빠르게 스케일업 될 개발팀에 대한 이야기를 테오님의 프론트엔드방에 계신 여러분들께 공유 드리게 되었습니다. . 관심있는 분들은 아래 콘텐츠 확인 부탁드립니다. URL: https://bit.ly/3Rmj9uK Backend Frontend 구분없이 모두 유쾌한 Weekend 되길 바라며 인사드리겠습니다. 좋은밤 되세요. 감사합니다. 자란다 채용 매니저 김미준 드림
자라고싶네요
하,, 자소서 쓰다보니 지난 대학교 3,4학년 생활이 너무 아쉽네요,,
삭제된 메시지입니다.
남은 반학기라도 화이팅해야겠슴당 혹시 대학생분들이 계시다면,,,, 저같은 후회는 하시지 않게,,, 홧팅하셔용 ~.~
4학년 1학기 끝났는데 학교 공부만 해놓은 사람도 있습니다.. ㅎㅎ
포트폴리오 보면 누구보다 열심히 사신거같은데…
사진
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
오히려 소원을 안들어준게 다행...일수도
React의 상태관리에 대한 이야기와 최근 트렌드까지 다루는 좋은 글이 있어서 공유 합니다. https://frontendmastery.com/posts/the-new-wave-of-react-state-management/
혹시 컨텍스트api랑 usereducer많이쓰나요?
Devastated Ryan님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 라이언님!! 반갑습니다 ;) 어서오세요!!
리듀서는 가끔써요 관리할 상태가 많을때
저는 단순하게 상태 몇개 정도만 쓸때는 컨텍스트 API를 쓰는 편이에요!
답변감사합니다
후론트개발자님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아 저 이거 처음 보고 소원 안들어주는 게 아니라 소원 비는 순간에 혜성도 버그 난 건 줄 알았어요😂
혹시 자바스크립트로 객체 지향 참고할만한 레퍼런스나 연습 예제같은거 추천해주실 수 있으실까요?
후론트개발자님 반갑습니다 어서오세요 ㅎ
반갑습니다~
클린코드 만한게 없다라고 생각되는데용 ㅎㅎ
2판은 자바스크립트로 작성되어 있다고 알고있어요
아직 저도 읽어볼 레벨이 안되서 못읽고 있지만 읽게 되시면 후기 남겨주세요~
사진
사진
혹시 이력서 겸 포폴에
프로젝트 갯수가 좀 많으면
저는 2번처럼 나열식으로 적고 있는데
1번처럼 레이아웃으로 만들어서 누르면 세부페이지로 넘어가는건 많이들 쓰시나요?
리팩토링 2판이 자바스크립트로 돼있는걸로 알고 있고 클린코드는 2판이 있는지 모르겠네용
아하 제가 잘못 말씀드렸네용
리팩토링 2판임다
1번이 걱정되는게 보통 포폴이나 이런거 인쇄 하시는 분이 많아서 인쇄 하면 세부 페이지도포함되서 인쇄 되나 궁금하네요
아 인쇄하면 안보이네요
자바스크립트에서는 객체지향을 deep 하게 다루지는 않는 편이고 전통적인 객체지향과는 달라서 조금 애매하네요~ 원하시는 방향성과는 다르겠지만 도움이 될것 같은 링크 하나 공유 드려 봅니다 https://github.com/labs42io/clean-code-typescript
감사합니당 :)
프로토스님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 프로토스님~~ 반갑습니다 :)
잘부탁드립니다! 도움받고 도움될수 있도록 하겠습니다!
감사합니다!! 언젠든 궁금한것들은 편하게 물어보고 또 내가 아는 질문이 나오면 설명해주면서 진아 내것이 되는 기회로 삼아보세요ㅎ
저도 궁금하네요 저는 전자처럼 갤러리 구성했는데 허브님 후자처럼 변경해야하나 고민중이었거든요
고민 한결과
저는 이번에 인턴십에서 이력서 + 포폴 형식이라
후자를 선택했슴다
만약 이력서라면 갤러리보단 열거형으로 간단하게 작성하는게 좋을 것 같고
포폴이면 갤러리 방식도 좋은 것 같아요
이력서는 1페이지 방식이 좋죠 ㅎ
허헛허헛
그런가요~?!?!
(급한 수정 중)
경우에 따라 다르지만 이력서가 많을 경우에는 읽기에 너무 버겁거나 귀찮으면 원하는 만큼이 안될수도 있어서 휘리릭 읽었을때도 부담이 안되고 자세히 읽어도 좋을 수 있게 해주면 좀 좋더라구요
아하아하 보는 입장도 배려해서 작성해야겠네요 ㅜㅜ 감사합니당~~!!!
이력서는 지원자 개인이 어떤 ‘사람’인지에 대해 중점을 두고 포트폴리오는 지원자가 한 ‘경험’에 중점을 두는건가요? 사실 이력서랑 포트폴리오의 경계를 정확히 모르겠어서 질문드립니닷ㅜ
포트폴리오는 결과물과 프로젝트 자체에 더 중점을 두는거죠
기간 오타 있습니다~
어 그러네요~!! 6주 짜리가 1년 2개월 짜리가 되어있네여 ㅕ
와- 집단지성! 멋지다!
오호… 감사합니다
면접 인원이 적다면(주로 제가 면접에 참여할때는) 어떤 형식이어도 모든 github 링크 들어가서 확인하기 때문에 어떤 형식이어도 마찬가지지만 채용 인원이 많아서 면접 전에 간단히 프린트만 해서 확인하는 케이스라면 말씀하신대로 나열식이 좋은 것 같아요!
checkbox의 상태 확인하는것도 개발자 도구에서 가능한가요? 가능하다면 어떻게 해야할지 알려주시면 감사하겠습니다(순수 바닐라 자바스크립트만 이루어져있어요) checkbox상태에 따라 t/f값을 가진다는것을 확인하고 상태가 변함에 따라 css를 주려고 하는데 쉽지 않네요 ..
아니면 다른 도구를 사용해야할까요?
js에서는 input Element의 chcekd 값을 통해서 알 수 있어요. ) document.getElementById("input").checked
checked값이 바뀐 이벤트를 추적하려면 'input' Event로 가능합니다. element.oninput = (event) => {} 이나 addEventListener("input") 등으로 확인이 가능해요
감사합니다 오늘한번 삽질해볼게용
이걸로 시도해봐야할것같아요
checked 상태에 따라 스타일을 조작하는것이 목적이라면 스크립트 없이 css 만으로도 할수 있지 않을까 생각해보네요~ input[type=checkbox]:checked
오 저는 eventListener 로 체크하고 다중 className을 지정하는걸 추천드릴려 했는데 저런것도 좋네요~
상태에 따라서 변하는 css를 어떤식으로 만들고 싶은 건가요?
투두리스트에 할일 완료된것은 취소선 정도로만요..!
여러방법을 생각하게 해주셔서 감사합니다
역시 감사드립니다
신입 FE 개발자입니다님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
<label class="todo-item hbox"> <input type="checkbox"/> <div>Hello</div> </label> <style> .todo-item :checked + div { text-decoration: line-through; } </style> 이런 방법으로 CSS만으로도 가능하다면 그러한 방법을 추천드립니다.
안녕하세요 신입 FE 개발자님~~ 반갑습니다 :)
안녕하세요!!
네 안녕하세요. 어서오세요~~~ 이 곳은 프론트엔드에 대해서 궁금한것들을 물어보고 또 아는 것은 대답해주고 좋은 자료들을 공유하며 함꼐 성장하고자 하는 곳입니다. ㅎ 편하게 글 남겨주세요~~~
네 ㅎㅎ
제가 월요일날 a시리즈 단계에있는 스타트업 첫 출근인데 fe개발자 한분 포함해서 총 네분 계시거든요. 이정도 규모에 스타트업의 경우는 신입이라도 온보딩 시간없이 바로 실무에 투입되는게 일반적이겠죠?
실무로 온보딩을 할 수도 있죠. ㅎ
이렇게 하는걸 추천하는 이유가 있나요? 진짜로 몰라서 여쭙습니다
ㅠㅠㅠ
JS를 안써도 되니까요 ㅎ
아하! "최고의 자바스크립트 개발자는 최대한 자바스크립트로 개발하지않는 개발자다." 확인 했습니다 ㅋㅋㅋ
요구사항의 목적이 화면을 바꿔서 보여주고자 함인데 CSS로 가능하다면 CSS로 하는게 테스트 할 부분도 적고 CSS는 선언적인데다가 성능도 더 잘나올테니까요
ㅋㅋㅋㅋ
다들 특정 라이브러리를 익힐 때 어떤식으로 공부하시나요? 저는 독스를 처음부터 끝까지 다 읽어보는 타입인데, 이 기술이 언제까지 쓰여질지도 모르는 상태에서 요즘 들어 특정 기술에 어느정도의 학습이 적당한가를 고민하게 되네요 :)
쓰는 이유를 파악하고 서비스에서 어떻게 사용되는지 컨퍼런스나 기술 블로그 읽어봅니당
그 라이브러리를 써야할 이유가 있기 전까지는 머리속에 넣어두기가 힘든 것 같아요. 지금은 그냥 이런게 있구나 정도로만 기억해두고 필요할때 꺼내쓰는 방식으로 하고 있어요. 어차피 할때 또 찾아보면서 할테니까
선언적인게 큰 의미가 있는거군요
사실 저는 이런말하면 질타받을 수 있지만 docs 만으로 공부하신 분들은 사용목적, 서비스에서 어떻게 활용할건지를 모르셨던 분들이 많으셨어요
저도 docs보다는
코드를 먼저 보게되는 것 같아요
정말 충격적인게 예전 백엔드 분한테 맥에서 docker compose에 00가 안된다고 말씀드렸더니 그 프레임워크 공식문서 지원 버전엔 맥 된다 써져있다. 공식문서에 적혀있는데 왜 안되냐고
그렇군요.. 제 같은 경우는 개발환경에 서버 스테이트를 따로 관리하는 틀이 없어서 많이 불편하던 차에 react-query를 선택해서 그 문제를 해결해 보고자 하는데, 블로그 글이나 그런 것보단 docs가 좀 더 믿음이 가더라구요!
계속 도큐먼트 이야기만 하셔서
제가 디스커션 올리고 docker compose 수정한 적도 있었어요ㅜㅜ
그렇네요, 여러가지로 해당 기술을 접해보는게 좋은 방법이 되겠어요! 감사합니다 :)
암튼 docs만으로 공부하는건 개인적으로 비추~!
지금 처음으로 말통하는 백엔드 만나서 같이 개발중인데 같이 스키마짜는게 이렇게 행복할 일인가 싶더군요
유대감이 주는 행복감이 있죠. ㅋ
운이 좋으신 겁니다!!! 그러는 사람 만나는 것도 복이라고 생각해요 ㅎ
맞아요 ㅜㅜ
좋은 백엔드,,, 정말 귀한 인재,,,
ㅁㄴㅇ님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 ㅁㄴㅇ님 반갑습니다 :)
이모티콘 오늘은 그래도 조금 시원하네요.식사 챙기시고 좋은 토요일 저녁 되세요!!!
채팅방 관리자가 메시지를 가렸습니다.
채팅방 관리자가 메시지를 가렸습니다.
채팅방 관리자가 메시지를 가렸습니다.
채팅방 관리자가 메시지를 가렸습니다.
채팅방 관리자가 메시지를 가렸습니다.
채팅방 관리자가 메시지를 가렸습니다.
감사합니다 :)
안녕하세요 :)
반갑습니당
네 반갑습니다 어서오세요 ;)
근데 확실히 혼자하는 개발이랑 여러부서랑 협업하는거랑 다르긴 합니다
행복한 토요일에 갑자기 뽐뿌가 와서 기능 개발을 하고 블로그 글을 작성했습니다. 한글 검색기능 개선을 위해 초성검색 지원과 매치되는 문자열을 색칠하는 방법을 정리한 글입니다. 혹시 읽어보시다가 불편한 점이 있으시면 피드백부탁드립니다. 모두 안녕히 주무세요!!
잘봤습니다! 제가 구현한다고 상상해봤는데요. 문자열이 유니코드라는 가정하에 쿼리와 타겟의 캐릭터마다 NFD 정규화를해서 첫 자음을 뽑아낸 다음 적절히 스코어를 메기면 어떨까 싶었습니다. (데이터가 크지않으면 편집거리등 사용)
중간에 타겟마다 적절히 인덱스:자음 맵을 만들어 두면 하이라이트에 활용할 수있을 것 같고요!~
실무에서 서비스 해보신분의 구현이 궁금하네요. (백단에서 es나 db 같은 검색엔진에 위임하는게 무난할 것 같기도 하네요)
너무 좋은글이네요 ㅎㅎ
저는 예전에 한 면접에서 검색엔진 자동완성 기능을 구현했다고 말씀드리니깐
디바운싱은 어떻게 처리했는지?, 한번 검색되었던 데이터는 어떻게 처리하는지?, 캐싱을 구현했다고 하셨는데 어떻게 구현하셨는지? 만약 목록이 업데이트 되었을때 사용자는 stale data의 변경점을 인지할 수 있는지?
이런 질문을 해주셨는데 적용해보셔도 좋을 것 같습니다 ㅎㅎ
저때 머리가 띵해져서 지금 리액트 쿼리랑 레디스 열심히 공부했었어요 ㅎㅎ;
면접준비하다가 오지고지리는 잼난 글 발견해서 공유해드립니다
선배님들 혹시 현업에서 next.js 사용하는 비중이 얼마정도 되나요? 취업할때 꼭 필요하면, 이미 만들어진 플젝 가지고 next.js 적용해서 리펙터링해보려구요
많이 사용합니다 꼭 해보셔요
취업할 때 꼭 필요하다 생각하진 않지만 현업에선 아주 많이 사용하는 것 같아요!
감사합니다!!! 😁
Next.js는 신입의 경우에는 당장 필요하진 않다고 생각해요. 리액트, TS 충분히 공부하고 해도 늦지 않습니다!
공감합니다
항상 글 잘보고 있습니다. 개발자분들에게 제가 정확하게 모르는부분이라 여쭈어봅니다. A.I 개발하려면 어떤 테크트리를 타야 하나요? 혹시 a.i 관련 개발하시는분이 계시면 추천트리 부탁드립니다.
ai쪽은 보통 석사 정도는 하는거같아요
아 그런가요? 감사합니다.
톡게시판 '투표 취소': 요새 무슨 공부 하세요? 항목을 추가해주세요 :)
직접 트랜스파일링도 해보면서 트리쉐이킹 관점에서 union type을 리액트에서 잘 써볼려 노력한 내용을 담았습니다!
에전에 톡방에서 곰젤리님이 밤이였는데도 답변을 너무나 잘해주셔서 해당 내용도 담았으니 한번씩 궁금하시면 놀러와 주셔요 ~.~
튜브낀 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
영블님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
튜브낀 튜브님 영블님~~ 모두모두 반갑습니다 어서오세요 :)
안녕하세요! 프론트엔드 역사와 잘하는 개발자 블로그 글을 보고 링크타고 오게 되었습니다!!
감사합니다!! 환영합니다 ㅎㅎ 이곳은 프론엔드에 대해서 궁금하게 있을때 언제든 물어보고 또 공유하면서 함께 성장하고자 하는 곳입니다~~ 실무나 기술 혹은 고민 상담이나 그 밖에 뭐든 편하게 글 남겨주세요 ㅎ
넵 감사합니다 테오님! 프론트엔드로 시작한 1년차 주니어 인데 좋은글 공유해주셔서 감사합니다. 정신없는 트랜드와 할게많은 프론트라 역사나 가치관 정립이 필요했는데 덕분에 좋은 정보를 많이 얻었습니다! 앞으로도 잘부탁드립니다~
보람을 느끼게 해주는 말 너무 너무 고맙습니다!! 이 방에서 나왔던 다른 좋은 내용들은 디스코드에 따로 아카이브를 하고 있습니다. 많은 도움이 되었으면 좋겠습니다!
엄지척 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 엄지척 제이지님~~ 반갑습니다 :)
안녕하세요 :)
네!! 어서오세요 ㅎ 이곳은 프론트엔드에대해 궁금한것들을 서로 묻고 답하고 좋은 자료들이 있으면 함께 공유하며 성장하고자 하는 곳입니다 잘 부탁드려요 ㅎ
100명 안될때부터 들어왔던것 같은데, 어느새 600명이 넘었네용ㅋㅋ
그러게요~ 저도 참 신기하다고 생각합니다 :)
저 여기 너무 좋아요
(꺄아)
개발 입문자에게 치트키같은 곳입니다~
이게 다 용태님의 관심 덕분이라 생각해요
이모티콘
감사합니다. 앞으로도 꾸준히 관심가지고 많은 분들에게 치트키 같은 곳이 될 수 있도록 해볼게요 ㅎ
안녕하세요, 인사가 늦었습니다!! 테오님 블로그 글보고 배울게 정말 많은 분이라고 생각되어 찾아왔습니다~~!! 많이 배워가고 혹시 저도 나눌것이 있다면 나누도록 하겠습니다😊
감사합니다. 프론트엔드가 엄청난 속도로 발전하고 있는 요즘이라 저도 계속 배워가는 중이랍니다. 모두의 집단지성으로 다같이 공유하고 나눠서 함께 성장하기를 바라봅니다. 잘 부탁드려요 :)
희희님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 취준대학생님~~ 반갑습니다 :)
샵검색 : #HTTP 완벽 가이드
이책 사서 볼려고하는데 읽으신분 있으신가요 유명한 책으로 알고있는데
안녕하세요 잘 부탁드립니다!
드래그를 시작했을 때 잡고있는 컴포넌트를 다른 컴포넌트로 바꿔버리고 싶으면 어떻게 해야할까요????ㅠㅠ
스터디로 열심히 읽고 있습니다.
드래그를 시작하면 시작했다는 걸 알 수 있는(true 나 false) 상태를 만들고 div(컨테이너 역할을 할 컴포넌트)안에 잡고있는 컴포넌트와 바꾸고싶은 컴포넌트를 넣어서 상태에 따라서 나타나게 하면 어떨까요??
오!!!!! 그렇게 하면 되겠네요ㅎㅎ 감사합니다 ㅠㅠㅠㅠㅠ
도움이 되었다니 기쁘네요~~~!
개인적으로 해당 요소 element에 ref를 걸어서 mouse 이벤트들에 useState를 걸고 해당 상태를 useEffect 내에서 관리해보셔용
직접 구혀나시는게 아니라면
drag and drop 라이브러리를 활용해보심은 어떠실까요 ~.~
제가 잘 이해가 안 가서 그런데,,, 이거 조금만!! 자세히 설명해주실 수 있을까요ㅠㅠ
어엄.. mouse Event들에 over, reave, Enter 등등이 있잖아요..? 그러면 해당 핸들러들을 만들어주고 boolean으로 임의의 상태를 만드는게 아니라 이벤트 값을 useState에 넣어주고
해당 상태들이 드래그했는지 아닌지 useEffect에서 관리해주면 dead zone이랑 event 전파를 막을 수 있을거라고 생각했어요
그리고 해당 element 의 posX, posY를 지정해줘서 드래그 하면 마우스를 졸졸 쫓아와서 내려놓을때 해당 지점에 떨어질 수 있게하면 원하시는 결과를 할 수 있지 않을까 생각했슴당
(순수 뇌피설 & 상상 코딩이니 양해바랍니다… )
앗 쉽지 않네요!ㅋㅋㅋ 일단 조금 이해가 되어서 한번 해보겠습니당
감사합니다!
정독했는데 http기본기 잡기 좋았어요!
이고요!
저 책 많이 들 좋다고 하더라구용 저거랑
이거도 추천
http 프로토콜을 이해하시는데 TCP/UDP를 같이 보면 아주 이해가 쏙쏙 잘됩니다
저도 질문이 있습니다 ! input 창에서 value가 바뀌는것도 reflow가 일어난다고 들었는데, 이를 최소화 시키려면 디바운스랑 스로틀링으로 가능할까요.??
밸류가 바뀌고 뭔가 다른 화면이 나와서 reflow를 발생시키는것이라면 디바운스 걸면 이펙트가 좀 더 나중에 나오니까 최소화 되지 않을까요?
가상 돔을 사용하면..
헉
인풋이 들어가는것 만으로 리플로우가 일어나는진 모르겠는데, 그러면 디바운스, 스로틀 관련이 없을것 같아요
안녕하세요, 혹시 웹팩, 바벨등 개발환경과 관련된 강의 추천해주실 만한 것있을까요??
아! 테스트코드 관련 추천해주실만한 강의도 혹시 있을지 궁금합니다!
사진
안녕하세요, 리액트로 이렇게 추가를 통해 input을 여러개 생성하는 폼을 만들고 싶은데
구글에 어떻게 검색해야 할지 모르겠어서… 혹시 이런 방식을 구현하려면 어떻게 하면 될까요?
투두리스트 예제 같은거 참고해볼 수 있을것 같아오
배열인 상태를 하나 두고 추가를 누를때 배열 요소를 추가해주면 될듯합니다
무직백스님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
input을 생성하는게 아니라
자스타스찌쮜스님 반가습니다. 어서오세요 :)
데이터를 생성한다 생각하셔용
반갑습니다
array 하나 두고 input을 map으로 반복시키고, 추가할 때마다 array에 하나씩 append하는 느낌으로 만들면 될까요?
감사합니다! 사실 이렇게 구현은 했는데, 이렇게 하는게 맞나 싶어서 고민했었거든요. 답변 주신 분들 감사합니다.
삭제된 메시지입니다.
초보님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!
안녕하세요 초보님!! 반갑습니다 :)
넵 잘부탁드립니다 ㅎㅎ
혹시 meta에서 아래 강의 들어보신 분 계신가요?? 후기가 좀 궁금하네요..
네 이곳은 프론트엔드에 대해 궁금한 것들을 물어보고 또 아는 질문은 적극적으로 답을 해주면서 함꼐 성장하고자 하는 곳입니다. 편하게 글 남겨주세요. ㅎ
넵!!
혹시 플래티콘 사이트 쓰시는분 있나요?
아이콘을 가져와서 쓰는데 제가 원하는게 아니라 이상한 아이콘을 불러오네요….
웹팩과 번들링 작업과정을 많이 해본신분있나요? 리액트를 통해서 프로젝트도 만들어 여러가지해봤는데 웹팩이랑 번들링부분은 건든적이없어서 어떤 효과가 있는지도 잘모르겠네요
cra로 만드시나요?
근데
개인적으로
잘쓰는거 아니면 cra하는게 맘편하긴 한거같아요
package.json에서 왠만한 옵션은 제공해주던데요
저는 웹팩을 잘 모르긴 하는데
docker 빌드하게되면 이미지가 너무 커지고 빌드시간이 길어져서
네
의존성 연관관계 정리랑 최적화가 필요하다고 생각해요
모가 있을까요
트리쉐이킹이랑
플러그인이 필요하다거나
배포할때 필요없는 플러그인이나 로더같은걸 줄일 수 있으면 좋은거같아요
그거는 그렇죠
배포할때마다 10분씩 빌드하면
하루종일 앉아서 하는 일이 코딩이아니라 배포시간 기다리기가 되서 ㅎ..
소스맵 설정?
저는 경험이 많이 없어서 체감상 느낀건 이정도인것같아요
저도 얕게 알아서... ㅋㅋㅋㅋ
흠 감사합니다
ㅁㄴㅇ님이 나갔습니다.
react에서 mui와 emotion 중 어떤걸 사용하는게 좋을까요?
핼로님이 나갔습니다.
emotion 이요
이모티콘 다들 푹 쉬셨길 바라고, 좋은 밤되셔요! 내일월요일이라는게 슬프긴하네요... ;ㅁ;
다들 월요팅 하십셔
전 내일 첫출근입니다 😂
우왓!!!! 축하드립니다
오.... 축하드립니다
출근할때 명심해야할것
사진
잊지마십셔
ㅋㅋㅋㅋ
ㅋㅋㅋㅋ 중요한 팁 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
명심하겠습니다..!
혹시 리액트 네이티브에서 Animated Header 만들어 보신분 있나요?
동영상
제가 사수없이 혼자 구글링해서 만들다 보니까 이게 슥슥 넘기면 자연스러운데 악의적으로 저 스크롤에 멈추면 좀 사용자 경험이 안좋은거같아서
보통 어떤식으로 구현하나요…?
사수 없이 하시는거면 저정도는 인정해줘야죠..
나쁘지.않은데 머가 문제인거죠?
중간에 딱 그 전환되는곳 가운데서 멈추면 사라져서 저걸 개선을 해야하나… 고민했어요
저거 뭐라하면 제가 사라지기전에 조용하시라고..
한 마디 하죠..
부럽네요
조심스럽게 올려봅니다…
사진
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
카톡은 원스토리 그런데서 받으면 되겠네요..
웹으로 막 전환 한다던데
사진
카카오 멈춰줘....
부탁이야.....
워워 지금은 주식이야기 금지.. ㅠㅠ
누구도 햄볶할수 없어요 ㅠ
어니 그런데 왜
따봉 누르시는 거에요
부탁은 저도 하고 있어서요. ㅋㅋㅋ
ㅋㄱㅋㄱㅋㄱㅋㄱㅋㄱㅋㅋㅋㅋㅋ
ㅋㅋㅋㄱㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이모티콘
나만 물린게 아니네...
전 오히려
이번기회에
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
카카오 구글 인수합병 가 즈 아 !!!!!!!
구글아!!!!! 살려줘ㅜㅜㅜ
전체적으로 시장이 좋아져야지 한두 호재로 될게 아니라서 길게 보십시다.
팔기 전까진 손해가 아닙니닷..
🥹
지금은 나한테 투자하는 시기입니다. 참고 내 연봉을 올립시다. 주가나 금리 인상보다 내 연봉 인상률이 더 놓을시기!!
옐로카드 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 궁금한게 컴포넌트에게 API의 로직을 넘겨서 제어권 역전을 통해 구현할 시 얻을 수 잇는 이점은 뭔가요??
IoC와 State reducer Pattern 공부하다가 어려워서 질문 드립니다!
555
ㅠ
컴포넌트같은 것을 만든다고 했을 때 유효성 검사 로직을 폼 컴포넌트에 두고 사용하면 서로 다른 유효성 검사 로직이 필요한 곳에서 재사용 하기가 어려운 문제가 있는데 이를 해결 가능한 것 같구요. 그리고 유효성 검사 로직을 수정할 때 이를 가져다 쓰는 상위 컴포넌트에서는 유효성 검사 로직이 폼 컴포넌트 내부의 어디서 쓰이는지 생각할 필요 없이 해당 로직만 수정하면 되기에 유지보수가 용이할 것 같아요.
맨 앞에 폼이 빠졌네요ㅎㅎ...
아하아하 ㅎㅎ 기존 패턴들은 custom hook이나 외부 로직에 의해 응집도가 높아서 테스트 하기가 곤란했는데 IoC를 적용함으로서 응집도를 낮추고 테스트에 용이하게 로직을 작성할 수가 있군요
저는 state reduce pattern도 처음 들어봤고 SOLID 면접 준비할때 정도나 조금 살펴봐서 잘못 이해했을 수도 있으니 적당히 참고만 부탁드려요~
이번에 지원하는 곳이 OOP를 많이 본다고해서
IoC, DI, 객체지향원칙, Suspense 와 Fallback, 이런거 위주로 보고 있슴다 ㅠ
오... 면접준비 하시는군요 ㅠㅠ
화이팅입니다!
감사합니다!!
생각해보면 저도
범용으로 사용되는 컴포넌트를 설계할때는
의존성 역전을 생각하고 하진 않았는데 저런 식으로 결국 하게 된 것 같긴 하네요 ㅎㅎ
근데 reducer 로 어떻게 저렇게 컴포넌트를 생가각하고 짜세요..? 휴먼의 뇌로 그게 가능한가요..?
실력 미달로선,, 정말 배울게 너무나 많다고 매번 느낍니다..
state reducer pattern 은 처음 들어봐서
켄트 아저씨 글을 얼른 보고 왔는데요
redux 생각하시면 될 것 같아요
아하아하
아 그런 느낌이군요
네네 평소에 useReducer 잘 안쓰게되어서
안익숙해서 그렇지
redux의 reducer, dispatch랑 다를게 없어요ㅎㅎ
감사합니다.!
회바회 팀바팀 프바프지만
네네
useReducer 엄청 잘 써먹는 곳도
있더라구요 ㅋㅋ
오…
고수 팀인가보네요...
저는 그냥 스타일 차이라고 생각되기도 해요 ㅎㅎ
아하아하 그러면 저는 말씀해주신 SOLID 원칙도 달달 외워보겠습니당
화이팅입니다!
감사합니다.!
SOLID 하나도 모를 때 봤던 글인데
글을 재미있게 잘 쓰셔서 공유 드려요
도움이 되실지 모르겠네요 ㅎㅎ;;
오 ㅎㅎ 감사합니다 ~~
아닙니다 ㅎㅎ 저도 잘 몰라서
저렇게 쉽게 적힌 글이 필요했어요
아마 결합도와 혼동하신듯 합니다? ㅎㅎ
아아 그러네요 ㅎㅎㅎㅎ 감사함다
선배없는 주니어에게 여긴 한줄기 빛입니다..
저도 여기서 정말 많이 배우고 알아가는 것 같아요 ㅎㅎ
이제 막 첫 걸음 내딛은지라 배울게 산더미네요🤣
그래서 재미있는 것 같기도 하구요
같이 힘내요🔥🔥🔥
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
휘파람 프로도님~~ 어서오세요 ㅎ 반갑습니다 :)
안녕하세요! 네트워크나 자료구조 공부하는데 추천하시는 강의나 책 등 공부자료 있을까요? cs 공부 필요성을 느껴서 질문드립니다..!
깊게 공부하실거면.. 전공책 보시는게 낫고.. 적당히 보실거면 정처기 책사서 정처기 이론만 공부하셔도 좋습니다 시험 안보시고 ㅎㅎ
안녕하세요~~ 글로만 뵙던분을 톡방서 만나니 신기하네요
그렇군요!! ㅋㅋ 저도 이렇게 찾아주시는 분들이 너무 신기하고 또 고맙네요 ㅎ
목적에 따라 다른 것 같아요! 취업 준비할 때는 면접에서 많이 물어보는 것들 위주로 준비해서 정리했었고, 실무 와서는 알아서 공부하고 싶은 것들이 알아서 생기더라구요.
저의 경우에는 아키텍쳐가 될수도 있고 개발 방법론도 있었습니다. 이런것들은 취준 때는 사실 크게 와닿지 않아서 외우기만 했던 식이라 실무에서 체감하고 공부하는게 좋을 것 같아요!!
필요성을 느꼈다니 너무 좋은 기회네요! 처음에는 깊이 있게 아는 것보다 무엇이 있는지 개론 위주로 공부하시면 좋을 것 같아요 책을 콕 짚어주기에는 제 대학교 시절때 책을 추천하기에는 너무 오래되었을 것 같구요 ^^;; 뭐가 되었던 돈 아까울만큼 쉽고 얕아보이는 책을 추천드려봅니다 ㅎ 어떤 것들이 있는지만 알고 있다가 결국 실무에서 필요할때 구글 검색을 하면서 얻게 되는 지식이 내 것이 되더라구요
이모티콘 답변들 감사합니다ㅎㅎㅎ모두 월요일 화이팅 하세요!!
정보처리기사는 꼭 따야할까요?
저도 없긴하지만 일하는데 지장은 없습니다
있으면 나쁠 건 없다 정도..
그 지식만 필요하지 굳이 기사 자격증까지 프론트엔드에 필요하지는 않은거같아요
컴공 나오긴했는데 피차 미루다보니....
컴공 아니어도 딸수 있는 자격증이다보니.. si에서 아니면 거의 안보는거 같아요
요새 si도 필요성이 줄어들고 있다고 듣기도 했고요..
예전에 프리뛰려면 경력산정이 자격증딴후부터 기간으로 한다고 들었던거같은데.. 그건 또 아닌가봐요?
꼭 따야되는 건 아니지만 따두면 좋고 공부하는 과정도 도움이 됩니다
정처기 컴공아니라도 딸수있어요?
네 4년제 대학 아무과나 나오면 응시 가능
굳이 필요없어요 물어보는 사람 한명도 못봤네요 ㅋㅋㅋ
사진
맞아요 지식을 물어보는거 아니면 정처기가 굳이 있어야하는 이유를 모르겠어요
있으면 좋다고 하지만 약간 운전면허증이랑 비슷한 느낌의 자격증.
정보처리기사 자격증이 도움되는 경우를 생각해보면 1. 공부하는 과정에서 cs 지식 습득 2. 이력서에 한줄 추가 3. si 업체에서 필요로 함 4. 기술사 자격증 취득 시 필요 경력 5년 단축 대충 이런 장점이 있을 듯 합니다
또 예전처럼 필기실기 둘다 omr 카드로 작성하던 시절처럼 그렇게 쉽지 않아서 공부하고 남는지식이 꽤 될거라고 생각해요 특히 비전공인 경우
지식을 위한거라면 저도 동의하지만
자격증을 위한거라면 저는 비추천합니다
정처기 제외하고
다른 도움되는 자격증은 무엇이 있을까요
단순 cs지식을 공부하는거라면 그냥 자격증준비보다 관련 서적이공부나 강의를 듣는게 더 도움이 되겠죠?
자격증 자체는 의미가 없다고 저는 생각합니다 면접을 봤을때 자격증이 있다고 플러스라기 보단 자격증으로 얻는 지식을 면접에서 엄청 물어보셔서
정보보안기사 정도가 생각이 나네요
요즘 이직준비를 하면서 cs지식을 많이 잊어버리다보니 공부해야할 필요성을 느껴서요 ㅎㅎ
시험 공부라는 방식 자체가 실력 향상에 그닥 도움이 되는 방식인지 몰겠습니다 😵💫 점수에만 매몰되어 버린 중고등학교의 기억때문인건지...
너가 진짜 이런 이론들을 알고있는지? 이런것들을 엄청 물어보시더라고요 그래서 단순히 자격증을 딴다기 보단 그걸 이해하고 적용할수 있는 지식 위주로.. .
엄청 깊게 물어보셔요
렌더링 과정에서. 돔트리와 cssom트리가 어떻게 합쳐져서 렌더트리가 되는지
이런것들도 들어봤어요
아니면 사설 자격증 같은 것도 꽤 많아요 리눅스마스터나 ocp 같은
요즘은 구글이 워낙 잘돼있으니까 어떤 분은 책에서 목차만 긁어와서 그 커리대로 구글링해서 공부하시더라구여 출퇴근 할때
면접(경력자 기준) 준비로 꼭 공부해야할 cs 지식은 뭐가 있을까요?
프론트에서 많이 물어보는건 네트워크 os쪽 많이 물어보셔요
제가 가장 많이 들어본 질문입니다
근데 이런건 정보처리기사에 안나오지 않나요? 옛날에 따긴 했는데, 이런 프론트 지식은 1도 없었던거 같아서요
추가적으로 js쪽도 많이 물어보거나
예시를 든거라서요 ㅋㅋ os쪽도
그렇게 꼬리질문으로 엄청 물어보시더라고요
네트워크나
면접도 일종의 구술시험이라 생각하면 도움이 많이 될 수도 있지 않을까요 ㅎㅎ
답변주신분들 모두 감사드립니다!! 힘찬 월요일되세요
답변 감사하빈다!
합니다!
다들 좋은 월요일 되세요 ㅎㅎ
저는 그게 좀 어렵더라구요 ㅎㅎ.. 시험공부하면 그냥 고득점 받는거에만 집중하게 되어서 이해 안되면 걍 외우고 가고, 출제자 의도나 파악하고 있고... 😵💫 ㅋㅋㅋㅋㅋ 잘못된 마인드셋이 몸에 너무 깊게 베여버렸나봐요
export const Slider = (() => { return { increase: (value) => {...}, play: () => {...}, pause: () => {...}, stop: () => {...} }; })(); 안녕하세요! 솔루션 회사에서 사수없이 개발하는데 모듈화에 대해 고민스럽습니다. 위의 방식으로 Vanilla JS로 클로저+IIFE를 사용하여 나름 모듈화 하여 개발중인데 잘하고 있는지 모르겠구요..ㅎㅎ typescript로 객체지향 관점으로 접근하는게 좋을까요? 혹시 더 좋은 방법이 있을까요? 바닐라 JS로 개발하는 이유는 저도 React.js는 공부하는 단계이고 동기분도 jquery밖에 모르기 때문입니다..!
아웃룩도 정말 IE급이네요.. html이 버전별로 다르게 나오네요 ㅜ.ㅜ
안녕하세요 혹시 파이썬 버전의 코어자바스크립트 같은 책 추천 부탁드려도 될까요?
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
B님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
이모티콘 맛점하세요!
Muzi is pissed off님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아래와 같은 오류가 발생하는데 해결이 안되고 있습니다. React Hook "useIonToast" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function 훅을 최상위 레벨에 둘 수 없다고 하는 오류라 다른 방식으로도 해보았고 구글링해서도 해결을 시도해 봤는데 쉽지가 않네요.
//firebaseConfig.ts import * as firebase from "firebase/app"; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, updateProfile, signOut, } from "firebase/auth"; import { getAnalytics } from "firebase/analytics"; import { IonToast, useIonToast } from "@ionic/react"; import { FirebaseError } from "firebase/app"; import { toast } from "./toast"; import { resultingClientExists } from "workbox-core/_private"; const config = { apiKey: "AIzaSyBmYIPAvaJgiBdJ7JrI-D2TaxhQvSrdYcc", authDomain: "ionic-react-prac.firebaseapp.com", projectId: "ionic-react-prac", storageBucket: "ionic-react-prac.appspot.com", messagingSenderId: "706253795460", appId: "1:706253795460:web:ad315b1967b23d4c6712d1", measurementId: "G-B7RWV8BMRZ", }; firebase.initializeApp(config); export const auth = getAuth(); const ERROR_MSG: Record<any, string> = { 'auth/weak-password': '패스워드는 6글자 이상이어야 합니다.', }; const [message, dismiss] = useIonToast() export async function resisterUser(username: string, password: string) { const email = `${username}@asdf.com`; try { const res = await createUserWithEmailAndPassword(auth, email, password); console.log(res); return true } catch (error) { message(ERROR_MSG[(error as FirebaseError).code]) // console.log(ERROR_MSG[(error as FirebaseError).code]); } }
//Resister.tsx import { IonAvatar, IonContent, IonHeader, IonItem, IonList, IonPage, IonText, IonLabel, IonTitle, IonToolbar, IonItemOptions, IonItemSliding, IonItemOption, IonButton, IonIcon, IonInput, useIonToast, } from "@ionic/react"; import ExploreContainer from "../components/ExploreContainer"; import "./Home.css"; import { atCircle, fingerPrint, star } from "ionicons/icons"; import { KeyboardEvent, useEffect, useState } from "react"; import { Link } from "react-router-dom"; import { resisterUser } from "../firebaseConfig"; const Resister: React.FC = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [cpassword, setSPassword] = useState(""); const [message, dismiss] = useIonToast(); async function resister() { //validation if (password !== cpassword) { return message("Passwords do not match!", 2000); } if (username.trim() === "" || password.trim() === "") { return message("Username and password are required!", 2000); } const res = await resisterUser(username, password); if (res) { message("You have resistered successfully!", 2000); } } return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>Resister Page</IonTitle> </IonToolbar> </IonHeader> <IonContent className="ion-padding"> <IonInput value={username} type="text" placeholder="Username?" onIonChange={(e: any) => setUsername(e.target.value)} /> <IonInput value={password} type="password" placeholder="Password?" onIonChange={(e: any) => setPassword(e.target.value)} /> <IonInput value={cpassword} type="password" placeholder="Confirm Password?" onIonChange={(e: any) => setSPassword(e.target.value)} /> <IonButton onClick={resister}>Resister</IonButton> <p> Already have an account? <Link to="/login">Login</Link> </p> </IonContent> </IonPage> ); }; export default Resister;
resisterUser 컴포넌트 안에서 훅을 호출해야하지 않나요~?
useIeonToast() 가 resisterUser 안에 선언되어있지 않습니다
firebaseConfig.ts파일에서 ------------------------------------------------ const [message, dismiss] = useIonToast() <-이 부분이 에러가 발생합니다. export async function resisterUser(username: string, password: string) { const [message, dismiss] = useIonToast() <-이 곳으로 옮겨도 에러가 발생합니다. const email = `${username}@asdf.com`; try { const res = await createUserWithEmailAndPassword(auth, email, password); console.log(res); return true } catch (error) { message(ERROR_MSG[(error as FirebaseError).code]) // console.log(ERROR_MSG[(error as FirebaseError).code]); } } ------------------------------------------------
안쪽에 선언을 해도 오류가 발생하더라구요
React Hook "useIonToast" is called in function "resisterUser" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
일단 /firebaseConfig.ts 요 파일 내부에서
이 오류가 안쪽에 선언했을때 나오는 오류인데 이건 구글링해도 참고할만한 것이 없네요 ㅜㅜ
registerUser 는 Hook 도 아니고 React Component 도 아니니깐요
const [message, dismiss] = useIonToast() <- 요 코드가
지금보니깐 async function 이네..
그르네요
아 네 맞습니다. async
훅은 같은 훅 안쪽이나
React Component 안에서만 선언 가능합니다
react 컴포넌트가 아닌 그냥 ts 호출되서 그런것같습니다만
지금 작성하신 코드는 둘과 전혀 별개의
함수안에서 훅이 불려져서 그런거에요
(최고)
아~ 무슨말씀인지는 알겠습니다~
하하 어렵네요~
Muzi is pissed off님이 나갔습니다.
react-query 관련 질문 드립니다.. A 페이지에서 fetching한 data를 B에서도 사용하고 싶은데 페이지네이션이 일어나면 쿼리가 inactive상태로 바뀐다고 하더라고요.. 그래서 B페이지에서 새로고침를 하면 inactive상태가 되어버립니다. 이걸 막을 수 있는 방법은 없는건가요?
새로고침을 하면 메모리에 있는 값은 원래 다 날라가서..
아하.. 그럼 스토리지 저장이나 데이터 리페칭을 하는 방법밖에 없는거겠죠?
vscode html 자동완성이 왜 안될까요? 느낌표 치고 탭 누르면 됐었는데 갑자기 안되네요
다들 vscode 테마 어떤거 쓰시나요?! atom one dark 사용중인데 기분전환삼아 바꿔볼까 합니다 ㅎㅎㅎ
HTML 문서로 저장하시고 하셨을까요?
네.. 잘되다가 오늘 vscode 업데이트 되고 나서부터 안되네요
엄지척 제이지님이 나갔습니다.
네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 화살표함수 공부하던 중 궁금하게 있어 여쭤봅니다. 화살표 함수 `() ⇒` 컴포넌트는 화살표 함수로 값을 호출 하게 된다. 함수는 일급 객체(first-class Object)로 이루어져 있기 때문에 객체를 반환하는 것이다. 화살표함수는 실행 컨텍스가 생성될 때 this를 바인딩하는 작업 자체를 하지 않으므로, this를 찾게 되면 스코프 체이닝을 통해 외부 스코프에서 this를 찾게 된다. - 함수 스코프를 생성하지만 실행 컨텍스트 생성시 this를 바인딩 하지 않는다. 라고 이해했는데 내용이 맞을까요?
실행컨텍스트 - 렉시컬 환경 - 환경 레코드 ( 자신 스코프 ) - this - outer환경레코드 ( 상위 스코프 ) 로 알고있어요 저도 전에 공부한 내용이라 기억이 가물가물하긴 한데 화살표함수로 만든 함수는 위 실행컨텍스트에서 this를 binding하지 않는 것 같더라구요
선언시점에서 this바인딩해버려서
실행시점에 실행컨택스트 때는 this를 바인딩 하지 않아서
말은 맞습니다 ㅎㅎ
this의 바인딩 시점이 다를뿐
감사합니다 저도 배웟네요 ,,
함수는 일급 객체(first-class Object)로 이루어져 있기 때문에 객체를 반환하는 것이다. 이부분은 혹시 맞는 표현일까요?..
안녕하세요! 요즘에 리액트 패턴(혹은 구조?)에 관심이 있어서, 어떤 식으로 폴더 구조를 가져가고, 어떤 방법으로 컴포넌트를 구성할지 고민하고 있습니다. 그래서 혹시 다른 분들이 보시기에, 잘 만들어진 리액트 프로젝트들의 github 링크나 참고할만한 글이 있다면 공유 부탁드려도 될까요?
폴더 구조는 황준일님이 고민하셨던 블로그글이 있었던거같아요!
오 감사합니다 찾아봐야겠네요!
제어 역전과 구현난이도를 고려하여 작성한 리액트 디자인 패턴입니다
결합도를 낮추고 테스터빌리티를 높일 수 있는 관점에서 보면 좋은 패턴인 것 같아 공유해드립니다
감사합니다! 한번 읽어봐야겠네요!!
안녕하세요! 혹시 react-hook-form에서 원래 데이터와 변경되는 데이터를 비교할 수 있는 메서드가 있나요?
watch()사용하시면 변경되는 데이터를 보실 수는 있습니다
안녕하세요! 혹시 React-query 를 쓰는 best practices 볼수있는 github 레포 추천해주실수있나요?
아직 best practices가 없어서 https://tech.kakao.com/2022/06/13/react-query/
카카오 테크글이랑 배민에 배민근 개발자님이 써주신 글, 화해에서 만든 리액트쿼리 전역 에러 핸들러보면서 공부했습니다
아 그럼 watch해서 가져온 데이터와 defaultValues랑 비교하면 되겠네요 감사합니다!
감사합니다!
화장실에 있는동안 체팅열심히 했는데
오늘 내공 많이 챙겨가네요 ~.~
https://tkdodo.eu/blog/practical-react-query 공식문서가 인정한 best practice입니다 :)
https://parang.tech/react/2022-react-01/ 블로그가 인정한 한글 번역도 있어요
요기에 이론만 설명하는 게 아니고 실제 예시도 많고 스니펫도 엄청 많아서, 어쩌면 실제 best practice가 적용된 레포보다도 더 도움되실 거 같아요!
best practice는 어디서 나오나요?? 문서에 나오는 건가요?
위 블로그에서요??
BestPractice라는 기 있는 지 첨 알았어요
저 궁금한게 있는데여,, svg를 버튼으로 만드실 때
어떤 태그로 감싸시나요?
svg에 직접 onClick을 넣기도 하시나요?
저는 보통 span이나 div로 감쌌는데 svg의 height 값이 24일 때 계속 span이나 div높이가 24가 아니라 28로 잡히는데 이유가 뭘까요 ㅠ
버튼으로 만드는 것이기 때문에 저는 보통 button으로 감쌌습니다.
아하 어떤 기술 (도구) 가 생기면 그건 도구이고, 이걸 어떻게 써야 잘 쓰는거지? 라는 고민을 하게 될 거예요. 가령 가위라는 도구가 있다면 엄지랑 검지에 가위를 끼우고 자르면 잘 쓰는 거지만, 중지랑 약지에 가위를 끼우고 자르면 잘 쓰는 게 아니잖아요? 이런 것처럼, 이걸 어떻게 하면 잘 쓰는 걸까 고민하고 그걸 정리해둔 걸 best practice라고 해요!
링크 / 버튼 태그의 사용은 목적성에 따라 다르겠지만 button > svg 넣어서 사용하고 있어요 아니면 svg 를 백그라운드 이미지나 폰트 아이콘으로 변환해서 사용하고 있어요
공식문서는 일반적으로는 매뉴얼 제공용이고 best practice는 공식문서에서 제공해줄 때도 있고 블로그에서 "내가 이렇게 쓰니까 좋더라" 라면서 best practice 를 알려줄 때도 있고 한 거 같아요. 생각해 보니 유일하지 않은데 best 라고 표현하는 게 이상하긴 하네요 ㅋㅋㅋㅋ
아하 글쿤요
가장 간단하게는 react best practices 이런 식으로 구글링해보시면 아 이런거구나 하실거예요
svg의 display 속성이 inline이라 그럴 거에요
앗 다들 답변 감사합니다!
리액트에서 theme으로 자주쓰는 fontsize들은 정의해서 쓰려고 하는데 정형적인 네이밍 방법이 있을까요???
그렇다면 어떻게 바꿔야할까요? inline-block을 줘봐도 상위태그 height 값이 크게나오네요
아,,, 원인을 찾았습니다 line-height 문제네요. button에 line-height: 0px를 주니까 해결되네요. 갑사합니다!
혹시 react-router-dom V6에서 동적라우팅 할 때 @표시를 못하게 됬나여 ? 아래의 코드대로 localhost:3000/@name로 라우팅 처리를하면 페이지를 못 읽네여 ,,
사진
fe개발님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
fe개발님이 나갔습니다.
리액트 쿼리로 get할 때 데이터 값이 한 동작 느리게 반응하는데 어떻게 하면 좋을까요......
그냥 axios 콜 했을 때보다 한 동작 느린건가요?
한 동작 느리게 가 뭔지 더 설명해주시면 좋을거같아요!
일반 페이지에서 카드 형식으로 글을 뜨게 하고
그걸 눌러서 디테일 페이지로 들어갔을 때
디테일 페이지에 데이터가 바로 연동이 안 되고 있습니다!
일반 페이지에서 필요로 하는 데이터, 디테일 페이지에서 필요로 하는 데이터가 달라서
다른 api get으로 사용하고 있습니다
넵 그럼 다시 fetch해야 되니 로딩이 필요한 게 맞을 거 같은데, 로딩 없이 바로 빡 뜨길 원하시는 건가요?
로딩일 땐 stats 로 loading 중이라는 게 보이게 해놨는데 바로 이전 값이 뜨네요
분명 어딘가가 잘못된 거 같은데 잘못된 부분이 뭔지 감이 안 오네요..😂😂
데이터 보이는값 초기값을 이전데이터에서 그대로 받아오신거 아닌가요??
이전값과 이후값을 다르게 하셔야지 로딩이 먹힐꺼같아요
코드를 보여주시면 제일 좋을 거 같고
리패칭
예상되는 이슈는 쿼리키를 잘못 설정하시지 않았을까 싶긴 하네요?
이 문제인 거 같네요
그냥 단순하게 정해둔 API 키 속의 변수가 바뀌면 자동으로 새로운 값을 부르겠지라고 생각했는데
그 부분이 아니여서 새로운 디테일 페이지를 눌렀을 때 한 박자 느리게 업데이트가 되는 게 아닐까 싶어요
맞을까요?.?
코드도 모르고 오류 상황도 정확히 몰라서 뭐가 문제다를 콕 찝어 드릴 수가 없긴 합니다ㅜ
아마 예상하고 계신 이유가 맞는 거 같긴 해요
멋쩍은 튜브님이 나갔습니다.
델님 항상 감사합니다...!!!!!!! 해결했습니다 ㅎㅎ 👍👍👍
파이팅하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
유니코드 별로 폰트를 따로 지정해줄 수 있다는거 알고 계셨나요?? 신기해서 올려봅니다.
와우 ㄷㄷㄷ
재택할때 누워서 하는 분 계신가요.. 오늘 첫재택했는데 누워서 일하니까 넘 좋네요 ㅎㅎ
저요
ㅋㅋㅋㅋㅋ
아무것도 안입고 코딩하기도 개꿀..
오늘의 tmi.....🥹
저만 그런가요!!
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
군린이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
휘파람 프로도님 휘님 상현님 파이팅하는 무지님 군린이님 모두 모두 환영합니다 :) 반갑습니다!!
안녕하세요 velog글 보고 채팅방으로 들어오게된 사람입니다. 저는 닉네임처럼 군인이고 최근에 코딩을 하면서 자바스크립트 공부하고 있는데 아직 모르는것도 많고 궁금한것도 많아 들어오게 됐습니다!
생각하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
네!! 잘 오셨셨슴이다 ㅎ 궁금한게 많을수록 적극적으로 물어보고 내 것으로 만들면 좋겠죠 ㅎ 편한게 글 남겨주세요 :)
생각하는 라이언님 반갑습니다 어서오세요 :)
안녕하세요 테오님 오픈카톡에 프론트엔드 검색해서 들어왔습니다 눈팅하며 분위기 익히고 질문있음 질문도 하고 할게요 벨로그 글 잘읽고있습니다 (씨익)
군인이라는 신분때문에 공부하는데 많은 제약이 있어 어떤식으로 공부를 해야할지 모르겠습니다. 지금은 격리중이여서 컴퓨터도 못쓰고 있어서 강의로 대체하려 보니 머리에 안들어오기도 하고, 공부 순서는 뭐가 먼저인지 모르겠습니다. 1. 책 추천 저는 문법에 좀 초점을 맞추면서 자세히 공부를 해보고 싶습니다. 기초없이 무작정 시작하려니 클론코딩을 할때도 이게 뭐지 하면서 시간만 까먹는 기분을 받습니다. 2. 공부 방법 뭘 어떤식으로 해야할지 모르겠습니다. 컴퓨터는 하루 최대 3시간정도 쓸 수 있습니다. 주말이면 더 쓸수 있습니다. 그래서 좀 더 효율적으로 사용하고 싶은데 어떻게 해야할까요?
너무 감사합니다!! 이 곳은 개발을 문득 궁금해지는 내용들은 편하게 물어보고 내가 아는 것 질문이 나오면 적극적으로 대답해보면서 함께 성장하고자 하는 곳입니다 편하게 글 남겨주세요 ㅎ
우선 뭐가 되었든 무언가를 만든다는 목표를 먼저 세워보시면 좋을 것 같아요 그게 실제로 도움이 되는 거라면 훨씬 더 좋구요
그걸 만들기 위해서 뭐가 필요한지 찾아보면서 구글에 계속 검색해가면서 남이 만든 코드를 내가 만들고 있는 것에 조금씩 붙여가면서 무언가를 조금씩 만드는 경험이 함께 하는 것이 좋습니다 개발을 공부한다는 것은 결국 무언가를 만들어내기 위하 기초단계일 뿐이니까요
내가 만들수 있을까? 이걸 만들려면 뭘 해야 할까? 하는 생각으로 해보시면 좋을 것 같아요
*내가 만들 수 있을까? 하는 생각보다
군인이시라면 D-day 서비스 라던가
아이돌 포토 앨범이라던가
운동을 체크해주는 거라던가
꼭 군인으로 한정하지 않더라도 뭔가 있었으면 하는 거 한번 생각해보시면 좋을 것 같아요
컴퓨터를 못쓰는 환경이라면 이런 아이디어들을 스케치를 해보거나 익숙한 조그만 서비스흘 스케치하고 설계를 해보는 것을 추천드립니다.
개발을 잘 몰라도 설계는 연습할수 있어요 그리고 분명 도움이 되실겁니다
저 혹시 제가 신입 면접을 보러 가게 되었는데요. 이렇게 문자를 받았습니다. -------------------------------------------- 인성 면접과 기술면접 같이 진행 하는데 기술 부분은 간단한 기본만 질문 드리고, 30 분 정도 소요되는 간단한 라이브 코딩 테스트가 있습니다 -------------------------------------------- 라이브코딩을 처음 진행해보는데, 올 해 설립된 회사라 정보를 얻을 수 가 없습니다. 30분간의 라이브코딩이면 어떤 문제가 나올까요? 라이브코딩은 처음이라 떨립니다. ㅎㅎ
객체 딥카피도 은근 많이 질문주시고
또 뭐가있을까요.... 음 간단한 dp나 dfs bfs도 많이 질문 주시는 거 같아요
근데 라이브코딩은 문제가 어렵지는 않더라구요 아무래도 라이브코딩 자체가 긴장이 되는 일이라 그런지..
답변 감사합니다
방구석에서 구글링하며 코딩만하다 라이브코딩을 하려니 긴장되네요
라이브코딩은 구글링 허용해주나요??
how to update object state using reduce..
구글링 없는 코딩 어렵네요
보통 mdn만 허락해주는거 같습니다
예전에 만든 코드 깃허브 가서 뒤져서 복붙 하는게 개발의 3할인데;;
너무 긴장되네요 ㅎㅎ
메소드같은거 기억 안나시면 편하게 질문 가능한 분위기에요!
아! 질답이 가능한거에요???
넵
어떻게 생각하는지를 보는거라
실제 코딩을 안 하는 경우도 있어요 ㅋㅋㅋ
다행이네요 ㅎㅎ
그리고 콘솔 못 찍게 하고,,,
저 본 회사는 구글링도 하게 해줬었어요
그런데 저번에 프로젝트 진행하면서 긴장하니까 .map()을 갑자기 까먹은거에요
비슷한일 있을까봐 두렵군요
아니 얘는 map을 몰라? 이럴 듯.. ㅋㅋㅋ
사진
hotjar라는 유저 트래킹 툴을 사용해보고 있는데, 제공하주는 코드중에 파라미터가 hotjar로 되어있네요. 뭔가 이스터에그같아서 공유드려요 ㅎㅎ
콘솔을 못찍게 하면 코딩이 되나요???
ㄹㅇ,,,,, ㅋㅋㅋㅋㅋㅋㅋ
근데 콘솔 못찍고 로직 짜도록 하더라구여
콘솔 안찍고 하면 한번 꼬이기 시작하면 어디서 잘못됐는지 찾기 힘들텐데 ㅎㅎㅎ
구글링 범위는 자유로운가요??
넵넵
그냥 옆사람한테 물어보는 거 빼고 다 하게 해줬었어요 비대면이었는데
근데 완전 회바회 아닐까 싶네요 특히 신생회사면
아 비대면이셨구나
2022년 1월 설립한 회사에요 ㅎㅎ
프로젝트 하려는데 react + tailwind 어떻게 생각하시나요?
요즘 그렇게 많이 하는것 같아요.
테일윈드는 취향차이인것같구
넘 좋죠~
혹시 리액트 네이티브에서는 아직 recoil 사용이 원활하지 않은가요?? 둘다 페이스북에서 만든거라 괜찮을줄 알았는데 확인차 질문드려요!!
저는 잘 쓰고 있습니다!
잘 사용할 수 는 있는데 데이터의 흐름을 관측하기 위해서 devtools를 켜도 redux만큼 편하게 보질 못합니다
또한 test 코드를 작성할때 상태의 전이나 흐름도 파악하기가 어려워요
만약에 하시게 되면 zustand 혹은 redux 활용을 추천드려요
지금 recoil 활용해서 개발 중인데 좋긴한데 약간 부족하더라구요
flipper 를 이용하면 recoil도 괜찮습니다.
맞아요 그래서 저도 지금 flipper 활용해서 개발 중이에요
그런데 개인적으로 다음 프로젝트 들어가면 다시 rtk 혹은 zustand 도입 해볼것 같아용
건방진 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
오 상세한 답변 감사드립니다! 확인해보겠습니다
안녕하세요 건방진 제이지님~~ 반갑습니다 :)
안녕하세요! 스타트업에서 PM하고 있습니다 :) 같이 가장 많이 일하는 직무인 프론트엔드 개발자 분들 이야기가 궁금해서 들어왔어요!
네!! 반갑습니다 :) 스타트업의 PM이라면 프론트엔드 개발자와 정말 가깝겠네요.ㅎ 어서오세요. 프론트엔드라면 기획과 협업 그리고 PM과의 일정 조율이 정말로 중요한 능력이라고 생각합니다! PM입장에서 프론트엔드에 개발자에게 궁금한것들이 있다면 언제든 편하게 물어봐주세요 ㅎ
어엇 자란다가 이번에 지원하는 인턴쉽에 올라왔는데
지원하고 싶은데 백엔드 직무 밖에 없네요ㅠㅠ 어엉
기존에 있는 array에서 splice로 빼고 넣으려고하는데, 아래의 코드를 치면 const updatedData = { ...selectedData, isActive: !isActive };
ReferenceError: Can't find variable: isActive
이 뜨네요 ㅜㅜ
사진
object에 값이 잘 담겨있는데 왜 이런 문제가 생길까요ㅜㅜ
조언 주실 분 선배님 계신가요 ㅜㅜ
RN인가요?
네 맞습니다 !
splice 부분 코드가 어떻게 되나요?
immutable 때문일 거 같은 느낌이 살짝 드는데
!isActive를 !selectedData.isActive
바꾸면 안되나요?
와 !!
이런 간단한
문제를 !!!
야호~
어 그러네요 ㅋㅋㅋㅋㅋ
맞네요 ㅜㅜㅜ
너무 기초적인 실수를 했녜요
대단히 감사드립니다
드류님 그리고 델님
오늘 남은 시간 제 행복 다 가져가세요 !
으쓱으쓱 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 으쓰으쓱 어피치님 반갑습니다 :
웹페이지의 퍼포먼스를 측정하는 코드를 작성하고싶은데 node js로 하는 방법이 있다고 들었는데 혹시 아시는 분 계실까요??
으쓱으쓱 어피치님이 나갔습니다.
힙합맨 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 힙합맨 제이지님 반갑습니다 :)
안녕하세요. 반갑습니다 ~
네 어서오세요. ㅎ 이곳은 프론트엔드에 대해 궁금할떄 언제든 질문하고 또 답변하면서 같이 성장하는 곳입니다. 잘 부탁드려요~~
사진
안녕하세요 지금 프로미스를 공부 중인데 콘솔창에서 이것저것 쳐보다가 궁금증이 생겨 질문드립니다!
rejected된 프로미스를 만들어서 저렇게 캐치를 하도록 햇는데 콘솔에러가 뜨기 전 펜딩된 상태의 프로미스를 열어보면 fulfilled 되었다고 뜨는데 이유를 모르겠습니다 ㅠ
읽기 쉽게 코드 들여쓰기 해서 다시올려주세요 ㅠㅠ
let test2 = new Promise((_,reject)=>setTimeout(()=>reject('rejected'),5000)) test2.then(()=>console.log('i am fulfilled!'),()=>console.error('not fulfilled!'))
여깄습니당!
혹시 스타트업이나 중소 it기업은 대부분 야근수당이 없는편인가요??
제가 아는 선에서는 넵
그냥 배운다 생각하고 다녀야겠네요,,ㅜ
회바회입니다 ..
근데 저희는 없어유 ㅠ
대부분 포괄임금제..
야근수당 주는 기업 찾는게 더 힘든 그런 느낌이죠?
개발 가르쳐주는데 돈도줘! 마인드 장착 정신승리 하겠습니다
국비 교육 다니면서
수당 받는다 생각하시면..
웅세님이 나갔습니다.
콘솔에 찍히는 Promise는 test2.then().catch()가 반환하는 새로운 프로미스로 보입니다
늦은시간에 질문올려 죄송한데 React 에서 보통 Container에서 비즈니스 로직 처리를 하나요 ?
로직은 분기처리없이 service에 작성하고
호출과 분기처리는 cache 에러핸들링 위해서 react query에 위임하여 쓰고 있습니다
답변 감사합니다 !
근데 이러면 로직이 너무 컴포넌트 종속적으로 되서
최근엔 커스텀쿼리로 빼는거 공부중입니다
결국은 다 빼네요!
service로 작성한다는게 어떤 말씀이실까여
저는 src 아래 service 폴더 하나 만들고 도메인 별로 디렉토리 만들어서 api 통신 export 해서 쓰고 있슴당
리덕스 사가나 별다른 미들웨어를 쓰고있지않고
책임을 다 리액트 쿼리한테 위임해서 쓰고 있어서 이게 조금 편하더라구용
아 fetcher를 여러개 작성해서
쿼리에서 쓰신다는 말씀이신가요?
커스텀쿼리처럼
네넹 맞아용
express잠깐 공부했을때 그런식으로 service 폴더로 따로 핸들러를 빼서 작성하는걸 했어서
리액트에서는 어떻게 하시나 했네요
사실 이방법이 뭐가 맞다라고는 이야기하기 어려워서
저도 알아가는 중입니당
이번프로젝트에서 처음 써보는 거에요
아하..
저도 query 연습하고 공부만 해봤는데
최근에 채용과제를 받았는데 query 적용하면 에러나 로딩처리를 위임할 수 있는건 간편하지만
비동기통신을 초기에 한 번만 해서
query를 쓰고 queryClient로 데이터를 조회하는 식으로 작성할지
아니면 useState로 관리할지 좀 난감하더라구요
음 개인적으로 그건 상황에 따라다른것 같아용
일단 초기에 데이터를 받아와서 zustand로 넘긴다음에 전역으로 상태관리 중인데
staleTime이나 cacheTime이 딱히 필요 없고 데이터를 다시 불러올 필요도 없어서요
아하아하
그런것도 좋네용~!
뭔가 항상 스택 어떻게 쓸지 정하는게 난감한 것 같아요...
저는 react query쓰는 이유가 secer state와 client state의 관심사 분리를 하고
기존 redux의 store의 복잡도 증가 및 크기 증가 같은 현상을 막을려고
전역상태 관리는 client state만 사용할려고 노력하는 편이거등요
맞아요 사실 serverState를 분리하면 clientState에 남는건
UI상태랑 몇개 없어서
되게 좋긴 하죠
근데 종종 안될때도 있어서 예를들어 사용자 상태 수정 패이지같은건
그런 관점에서는 query를 적용하는게 맞는데,,
넵
service는 클래스인가요?
기존 데이터를 호출하고 수정 단계가 두세단계에 거쳐야하면 이걸 queryString이나 그런걸로 넘기기 그래서 전역변수에 담긴 해요
아 그것도 그렇죠
현재 진행상태나 그런걸
url에 담기는 좀,,,
어어 맞아요
그래서 이런거 제외하고는 웬만하면 관심사를 분리하려고 해보는 편이에요
근데 왜 fulfilled된 프로미스를 반환하는걸까요?ㅠㅠ
맞아요 저도 딱 그런 관점입니다
이전페이지로 돌아가지 못하도록 막는다던지
아마 되게,,, 잘하시고 계신거 같은데요...?
그런가여,,,,,?
저도 그런부분에 대해
좀 더 공부해야겠네요.,,
아직도 잘 못쓰고 있는 중이라ㅜ
피드백 받을 곳이 마땅하지 않아서요 ,,,ㅠ
맞아요...
쿼리 공부해도 맨날 공식문서 보고 씁니다
정리해둔거랑,,
ㅋㅋㅋㅋㅋㅋㅋ
catch 콜백에서 error가 throw되지 않아서요 ㅎㅎ
아..에러가 던져진게 아니면 무조건 fulfilled로 뜬다고 이해하면 될까요..?
.
네~ 에러 throw되거나 reject가 호출되지 않고 정상 종료되면 fulfilled 처리됩니다
아하..그렇군요...!! 답변 정말 감사합니다!!
이모티콘
이야 정말...
개발바닥이 큰 공을 쐈네요
DI 관련 이야기인데 저도 어제 IoC 공부하면서 생각했던 고민인데 정말 해답을 코드로 좀 보고싶네요
어그로 엄청 끄네요..ㅋㅋ
저런거 보면 화나요..ㅎㅎ
왜 말을 그렇게 하시죠?
삭제된 메시지입니다.
저분들이 피해줬나요?
서로 의견이 다를 수 있는건데 왜 그러시는건지 이해가 안되네요
우리 리액트한테.. 넘심한말을 햇기 때문이져..
??
내용 제대로 보셨나요? 심한말 한 적 없는데요.
워워 다들 진정하세요
앞으로 무작정 비난하는 그런 태도 고치셨으면 좋겠습니다. 저분들 악의없이 본인 의견 내면서 토론하는건데 어그로라고 하는거 보기 안좋네요.
삭제된 메시지입니다.
화나면 그냥 보지마세요
ㅋㅋ 진정하시고…
제 생각에도 비난하거나 하는 부분은 없었고 더 좋게 해결해나갈 수 있는 방향에 대해서 토론하는 방향 같았는데
저 영상같은 토론이 있어야 기술의 발전이 있다고 봅니다.
기타치는 튜브님께서 오해하신 것 같아요 근데 600명 넘는 톡방에서 어그로라고 말씀하셔서 영상 안 보신 분들은 저 영상이 다 어그로라고 생각할 수 있기 때문에
프론트는 잼있어님 기분이 별로 안 좋으신 것 같아요
네.. 사실 저는 react에서 di에 대해서 회의적이었기 때문에.. 그랫던 경향도 있었네요
저도 이 의견엔 찬성합니다 예를 들어 SOLID 원칙도 인터넷 토론에서 서로 의견 내가면서 정립된 것처럼
저걸로 인해 좋은 패턴이라던지 개념이 생길 수 있는 좋은 기회일 수도 있다는 생각이 드네요 ㅋ
반성하시면 "개발바닥아 미안해" 한번 해주세요. 저도 다소 띠껍게 말한거 사과드리겠습니다.
개발바닥아 미안해!
!!!!
"기타치는 튜브님 미안해!"
그래서 너무 부정적으로 생각하시기 보다는 왜 공감하지 않는지 설득하는 방향으로 가면 더 좋을 것 같다는 제 생각입니다 ~.~
프론트는 잼있어님 미안해!
띠껍게 말한거 사과드리겠읍니다 튜브님
훈훈하네요
사실 저는 댓글 달앗는데
우리 모두 서로를 존중하는 개발자가 되어보아요-
Webpack이 번들링해서 결국 하나의 chunk를 반들어주는데
di같은게 왜 필요한지 싶엇거든요
그리고 context와 같은 것도 있고
기타치는 튜브님의 의견도 이해가 됩니다. 저도 프론트 개발자라 개발바닥의 내요은 전부 이해하지는 못하지만 저런 토론은 좋은거라고 생각해여
Mobx에서도 그런 구조때문에 di같은걸 버렸죠.
아무튼 잘못을 인정하고 반성하는 '기타치는 튜브'님 '칭찬해'
혹시, 이것과 영상에서 이야기 하는 di의 필요성의 연관성이 있을까요?? mocking 없이 테스트가 가능한 코드를 만드는 것, 결합도를 낮추는 점이랑요!
관련된 아티클이 있다면 공유 가능하실까요?
혹시 이런 접근 대신 context API를 사용할 수 밖에 없는 이유가 있나요? DI를 정말 잘 활용한 예시인 것 같은데 이 얘기는 없고 Context API 얘기만 보여서 이유가 무엇인지 궁금해요. https://reactjs.org/docs/context.html#before-you-use-context
이 정상대전 끝내줄 샹크스 없나요
이모티콘
ㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
리액트 메인테이너가 오셔야 하나..
에? 죄송해요ㅠㅠ 글이 너무 공격적이었나요? 현업에서 안 쓰이면 이유가 있을 것 같아서 궁금한 거였어요!
"이 얘기는 없고" -> "이 얘기가 화제(?)의 영상의 댓글에는 없고"
React는 이미 DI를 가지고 있어요! 라는 내용의 포스트입니다 ㅎ
테오님 감사합니다~
사진
공격적이지 않았습니다 ㅎㅎ
감사합니다!! 저런 형태의 Component Composition도 현업에서 잘 쓰는데 댓글에서는 굳이 별도로 언급할 만한 내용은 아니어서 안 보였다고 이해하면 되겠네요!
백엔드 관점에서 DI의 정의와 예시 그리고 필요한 목적에 대해서 프론트엔드에서 썼으면 하는 방식에 대해서 선명하게 제기하지 못했기에 저마다의 방식으로 이해하고 말을 하다보니 계속 오해가 생기는 것 같아요
우리도 DI가 있는데? 이렇게 쓰면 되잖아요? vs 그건 DI라고 할수 없지 않나요? 정도의 느낌인듯 싶어요
덧붙여서 그건 백엔드 관점으로 생각하셔서 그런거고요 vs 하지만 같은 클라이언트인 ios android도 이렇게 하던데요? 도 있는것 같습니다
그리고 굳이 그 정도의 DI가 프론트에 있어야 하나요? 와 유연성과 아키텍쳐 측면에서 왜 없는지 모르겠어요 정도 인데 결국 FP와 OOP방식까지 불거지는 내용이지만
니가 맞니 네가 맞니가 아니라 각 언어별로 분야별로 현재 유행하고 주도하는 방식이 있기 마련이고 팔은 안으로 굽으니까요 ㅋㅋ
어그로라고 하면 어그로 일수도 있겠지만 - 다른 관점으로도 바라볼 수 있는 좋은 아젠다를 제기해줬다 정도로 생각해보시면 좋읗 것 같아요. 실제로 웹에서 쓰는 개발 방식들이 ios aos등에도 전파가 되기도 하고 함수형 개념들이 코틀린에 전파가 되기도 했으니까요
DI이야기는 저번 댓글에 디씨인사이드프로그래밍갤러리 분이 달아두셨듯... 랭귀지 자체에 대한 이해가 부족해서 그런겁니다
클래스기반 언어만 써온사람들은 데이터랑 기능이 안붙어있으면 불편하셔서요
솔직히 말하자면 일급함수에대한 이해가 부족하신것 같습니다
저거랑 별개로 저번영상부터 프론트랑 백엔드랑 계속 비교하려는 구도여서 블라인드에서 개발바닥 여론 안좋습니다
저런 말을 하는 사람이 있어야 발전하는게 아닐까 싶긴 하네요..ㅎ
저도 비교라거나 어그로라고 못느끼고 그냥 이야기할만한 주제라고 생각들었는데 ㅎㅎ
맞든 틀리든 의견을 제시해야 고민해볼 꺼리가 생기니까요
그렇군요. 하지만 블라인드는 원래 부정적인 글들이 많이 올라오는 곳이라서
저도 비슷한 맥락에서 이해했습니다
이모티콘
저도 걍 흥미롭기만 했던거 같아요
일단 기-승-(전) 이정도 까지는 잘 지피고(?) 온것 같아서 마무리만 잘 되면 또 훈훈하게 끝나지 않을까 그리고 프론트엔드 얘기가 주류로 올라와준다는 것이 좋긴 하더라구요
저 위엣분 말씀처럼 샹크스가 나타나주길 바라면서..ㅋㅋ
맞아요 일단 프론트가 주제여서 재밌게 보았어요 저는 ㅋㅋㅋ 백엔드 이야기는 아무래도 한발짝 떨어져서 보게되는게 있네요
샹크스...ㅋㅋㅋㅋㅋㅋ
좋네요
그래도 저렇게 관심가지고 토론장읊 펼쳐주셔서 성숙해지는거같아서 좋더라고요
저도 fp파인데 저 토론과 댓글들을 보며 oop로 플젝 한번 해보고싶어졌어요
그치만 진짜 한번더 백엔드 관점에서 투덜투덜로만 끝나버린다면 분위기 진짜 안 좋을 수는 있을 것 같아요. 모든 백엔드 개발자가 그런건 아니지만 프론트엔드가 나중에 발전한 분야다 보니
당시 개발을 할 경우에는 웹디자인과 웹개발(웹 프론트도 아니었음)은 조금 낮게 보는 경향이 있었고 잘 모르시는 분들은 아직도 화면 만드는 개발을 데이터나 인프라를 다루는 것보다는 좀 더 쉽다라고 생각하는 분들이 있어서... 그 PTSD 들이 아마 있을 거라
백엔드가 프론트엔드를 잘 몰라서 궁금해서 물어보는 토론의 장이면 얼마든지 환영이지만 뭔가 백엔드 > 프론트엔드 이 감성이 느껴지는 식으로 좀 번지게 되는 것은 진짜 조심해야 될거라고 생각합니다. ㅋㅋㅋ
1차 영상에도 분명 좋은 댓글이 많았는데 거의 무시하고 2차 영상에서 고수들이와서 코드를 보여줬으면 좋겠다라는 표현을 해서 실망이였어요
욕먹을 각오 하고 올렸다니까 저는 재밌게 봤습니다 🫠
그렇긴 하죠. 댓글들이 이해가 안되었다라고 발언했던 부분들은 조금 아쉬웠어요. 물론 저도 백엔드 개발자분들이 댓글로 백엔드에 관련된 전공 지식 내용을 구구절절히 적어주셔도 그 맥락을 완전히 이해가 어렵긴 하겠지만요
그쵸 유투브인데. ㅋㅋ 재밌는게 중요하죠. ㅎ 저도 프론트엔드 얘기라서 정말 재밌게 봤어요. ㅋㅋㅋ
공감해요 백앤드가 fe은근 무시하죠. css나 하라는 식으로. 요즘 be분들은 덜 하지만 ㅎㅎ
웹 자체부터 그랬는데 그 안에서 be가 fe한테까지..
프론트가 단가 더 쎄지 않나요..?
스타트업이나 개발 문화 그런 얘기들도 재밌어서 개발바닥 좋아합니다. 혼자서 개발 얘기를 하거나 강의나 정보전달의 채널들은 종종 있지만 재밌거나 도움이 되진 않자나요. ㅋ 예능 지향 개발 토크쇼라는 부분은 정말 좋다고 생각합니다. ㅎ
맞아요 저도 그부분땜에 계속 시청하고있습니다 ㅋㅋㅋ
전지훈 (Dante)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 전지훈님!! 반갑습니다 :)
그건 각자의 개인 역량이라 누가 더 쎄다는
판단 할 순 없을 것 같습니다
평균은 있잖아요..ㅎ
사바사도 있고
단가랑 이 주제랑은 상관없는거같아요
아하 그냥
자부심을 가지시라는
그건 그냥 수요공급곡선이라
얘기 하고싶었음
ㅎㅎ
남이 뭐라든 자기들 생각인데 화내고 그럴 필요 없자나요 ㅎㅎ
안녕하세요~ 저번 달부터 스타트업에서 커리어를 시작하게 된 주니어 프론트엔드 개발자입니다! velog에서 teo님과 스프린트에 참여하시는 분들의 글을 종종 봐왔었는데, 이제서야 톡방에도 참여하게 되네요. 잘 부탁드려요~~
입사 축하드립니다!!! 이 곳은 프론트엔드나 회사생활과 관련해서 궁금한 것들을 공유하고 대답하면서 함께 성장하고자 하는 곳입니다. ㅋㅋ 한참 궁금할게 많을 시기일거라고 생각하는데 많은 궁금증 같이 공유하면서 다 같이 성장 할 수 있었으면 좋겠습니다. 이런걸 물어봐도 되나? 하는 질문이란 건 없습니다. 내가 궁금하다는 것은 곧 누군가도 궁금할거라는 거잖아요. ㅎ 잘 부탁드립니다. ㅎ
next.js streaming ssr 사용중이신분/
ㅋㅋㅋㅋㅋㅋ 초딩때 장수풍뎅이가 쎄니 사슴벌레가 쎄니 하고 싸우던 거 생각나네요..
ㅋㅋㅋㅋㅋㅋㅋ
@유용태 (teo.yu) 감사합니다~~
말넘심이네요ㅠㅠ
Q. 사자와 호랑이랑 싸우면 누가 이기나요? A. 덩치가 더 큰 놈이 이깁니다.
장똑깨기 저양반 정말 넘후ㅏ네요
구독자 빨아먹기, 조회수 빨아먹기 용인거 같아요! 유튜브가 워낙 그런점이 없지 않게 있지만서도요..
저게 어그로가 아니라 현실에 리얼로 존재하는 백엔드 군상중에 한명이라 아까 말한 PTSD가 진짜 있어요. ㅎㅎ 그래도 지금은 많이 없어졌죠~
테오 말씀대로 덩치 큰 놈이 이기는 거니 이상한데 힘빼지 말고 우리 덩치 키워 봐요 ㅋㅋㅋㅋㅋㅋ 재밌네요 🤣
알고는 있었지만 대단하네요 정말ㅋㅋㅋ
백엔드 군상중에 한명...
와우;;;
와우 ㅎㅎ 그렇다면 불호 의견이 센것도 이해가 가네요… 저 댓글들 진짜 -꼰-의 냄새
로컬에선 오류가 안나는데 프로덕션 빌드하면 오류 나는 문제 해결할땐 어떤 방식으로 하시나요,,?
아... 진짜 싫은 이슈다 ㅠㅠ
로컬에서 빌드해서 띄우시면 오류 나나요?
프로덕션 모드로
아무래도 오키가 평균 연령대가 좀 많이 높은 편이기도 해서 그런 것 같긴 해여
일단 최대한 로컬에서 재현할 수 있는 환경을 세팅해보고자 합니다. prod 빌드를 돌리고 dev 서버가 아니라 static server로 띄우고 아니면 cbt 서버나 동일한 클라우드 환경을 만들어서 띄워보고
서버에서 빌드해서 엔진엑스로 띄우는데 이때만 오류가 나네요,,ㅠㅠ
아.. 제일 싫은 상황이네요 화이팅입니다ㅜ
그러면 내 알바 아님~ 서버에서 확인해주세요! 필살기를 써야겠지만... (농담입니다..) 일단 에러 로그부터 받아 봐야죠
빌드 중에서 에러나나뇨? 배포중에서 나나요? 런타임에서 나나요?
로컬에서 http통신 되는거 다 확인하고 빌드해서 올렸는데 자꾸 url에 undefined가 붙어서
ㅠㅠ
저도 비슷한 맥락에서 이야기 한 것 입니다 화이팅 하죠 ㅎㅎ
node 버전이 다르다거나 package.json이 업데이트가 안되고 있다거나 env가 업데이트가 안되고 있다거나
도메인관련 로직이 코드에 있는데 분기가 안되었다거나
아 일단 런타임이네요 코드 상에서 도메인 관련 처리를 하는 코드가 있나요?
도메인 관련 처리가 정확히 뭔지 알려주실 수 있을까요,,
내부 코드에서 url과 관련된 처리가 있는지 물어보는 거였어요. location.href를 다룬다거나
JSON을 써야 하는데 JASON이라고 자꾸 오타내는 분 계신가요? ㅋㅋ
ㅋㄴㅋㅋㅋㅋㅋㅋㅋ
저는 string함수들 오타 자주내요
subStr subString 이런식으로..
유독 자꾸 오타내는 단어가 있어요 ㅎㅎ
date랑 data...
ㅋㅋㅋㅋㅋㅋㅋ
음 여쭤보시는거랑 맞는지는 모르겠지만 .env.production이랑 .env.development.local로 나눠서 사용하도록 해놓았고, 커스텀 훅을 초기화할 때 뒤에 붙는 세부 url을 받을 수 있도록했습니다, useData('/api/abc/dd') 이런식으로요!
datas 이런것도...
아 저도 date data 오타 자주 내네요 ㅎㅎ
backgorund도 한번쯤은..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그러면 env.production이 gitignore에 포함되어 업데이트가 안되고 있지는 않나요? 혹은 서버에 있는 env 설정이 잘못되었다거나
백엔드쪽이 실제로 사람이 더 적나요?
제가 아직 대학생이라
더 많지않나요?
현업을 잘 모르긴하지만
네,, 둘 다 아닌것 같습니다
저도 대학생인데 제주위는 다 백엔드하셔요
여기서 백엔드가 적다고해서 .
부캠때문에 프론트가 더 많을 수 있을 거 같긴 해요 지원자 수만 보면
혹시 같이 하는 분이 yarn 하고 npm 혼동해서 사용한것 같은데 이것도 문제가 될 수 있을까요?
*혼용해서
전공자 기준일때 개발자가 된 제 동기들중에서 10명이 개발자일때 프론트는 2명이었습니다
일단 로컬과 prod가 다른게 있다면 뭐든 다 맞춰봐야겠죠
일단 해당 부분 수정부터 수정해보겠습니다
nextjs 에서는 보통 페이지 별로 user redirect을 어떻게 구현하고 있나요? 리액트에서는 route 파일에서 일괄적으로 처리하면 되는데 nextjs는 페이지 별로 route가 처리되니까 어떻게 처리하고 계신지 궁금하네요 일단 제가 생각한 방식은 1. _app.tsx 파일에서 일괄 처리해준다 2. UserRoute와 같은 리다이렉트 처리 컴포넌트를 만들어서 필요한 곳에서 감싸준다 가 있습니다. ㅎㅎ
저도... ㅋㅋㅋㅋㅋ
대부분은 설정과 관련된 것들인데 찾기는 힘들고 찾고 나면 허망하겠지만 이 경험이 크게 도움이 되실거라고 생각합니다. 화이팅입니다! ㅠㅠ
깊은 복사 글을 보다가 어떤 예시를 봤는데요 const obj = { a: 1, b: { c: 2, }, func: function() { return this.a; } }; 이런 객체를 사용할 일이 있나요? 객체안에 함수가 있는거요~
nextjs 12.2 나오면서 미들웨어도 고려해볼만한 옵션이 될 거 같아요
제기준 객체리터럴 자체는 은근 쓰게되더라구요 모듈을 정의한다거나 할 때..
저 예시는 json.stringify가 함수는 복사 못해줘서
깊은복사 예시에서 나온걸꺼에요
json.parse(json.stringify(obj))
이게 함수는 복사 못해줘요
아 그러면 단순히 예시를 위한 객체일 뿐이다라는 말씀이시죠?
샵검색 : #객체리터럴
종종 써요!
앗 알겠습니다~
삭제된 메시지입니다.
샵검색 : #js 모듈패턴
지금 React 강의의 Context 부분 듣고 있는데, 콜백함수까지 객체로 담아서 쓰네요 강의 예시에서는!
아 객체에 함수가 들어갈 일이 있군요?
어떤경우였나요?
즉시실행함수를 더 많이 쓰긴 하는데
기뻐하는 라이언님이 나갔습니다.
객체리터럴 내부의 메소드의 this는 객체 자신을 가리키거든요
const [name, setName] = useState(''); <Provider value={{ name: name, setName: setName }}>
이런 케이스..?
삭제된 메시지입니다.
https://github.com/academind/react-complete-guide-code/blob/zz-reactjs-summary/code/19-finished/src/store/favorites-context.js#L30-L36 제가 지금 보고 있는 부분은 이런 맥락입니다!
사진
그냥 자연스러운 패턴인 거 같아요 react-redux 에서 리듀서도 저런 식으로 작성하곤 하고
이런 구조의 클래스를 직렬화 할때도 쓰일것 같네요
아 리듀서를 저런식으로 썼었죠 아 알겠습니다~~
속이 시원
고민이 무색하네요 ㅋㅋㅋㅋ 미들웨어 쓰면 될 것 같습니다 감사함다!!!
기뻐하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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
웹팩은 필수인가요?
웹페이지 성능 최적화하기 위해 사용하는 거라고 하는데, 쓰면 좋고 안 쓰면 말고..의 느낌인지
궁금합니다:)
기뻐하는 라이언님 라이츄님 빈털터리 제이지님!! 모두 모두 환영합니다. 어서오세요!! :)
웹팩이 번들러의 일종인데, 없어도 돌아가게 만들 수는 있지만 - 번들러 자체는 필수라고 생각하고, 그게 웹팩일 필요는 없다고 생각해요
반갑습니다 :) 저는 개발자는 아니지만, 취미로 장고를 사용하여 여러 프로덕트들을 만들어 보고 있습니다 🙂
아까 문제해결했습니다,, 휴
아까 로컬에서는 괜찮았는데 프로덕션에서 오류 나셨던 선생님이시지요? 혹시 답변 괜찮으시다면 문제가 무엇이었는지요???
오오~~ 축하드립니다~ +_+bb
답변 감사합니다!
Dockerfile 작성되있는걸 갖다 써서 몰랐는데, Dockerfile 내부에서 env 쪽 문제였습니다
dockerfile 변경해서 해결햇습니다
이모티콘
안녕하세요 리액트에서 커스텀훅으로 카드 open close를 핸들링하고 있는데 질문있습니다! 지금은 카드 수만큼 커스텀훅을 불러와서 작성하고있는데 이걸 일일이 작성하지 않고 map이나 다른 방법으로 할 수있을까요 ?
지금 코드는 이런 형식입니다
사진
map으로 가능해요
근데 저라면 그냥 지금대로 쓸 거 같아요
Card 와 Hook 을 합치는 방향성도 있습니다.
그리고 Map 으로 진행하는거죠
훅 내부에서 컴포넌트 반환해주면 되는데
리렌더링은 신경쓰셔야해요
훅은 렌더 중에 실행 순서만 안 꼬이면 어떻게 써도 잘 돼요 그냥 링크드리스트라
컴포넌트 반환하는 형식으로 만들면 이렇게 되는건가용 ?!
사진
아 저런구조면
괜찮겠넹ㅅ
네요
내부에서 jsx도 같이 반환하시면 돼요
피자 먹다 자는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
CRNA 작업 중에, 저장을 하면 자동으로 앱이 리로딩 됐었는데, 다른 설정은 하지 않았는데 갑자기 리로딩이 안 되는 경우, 무엇을 확인해주면 될까요 ?
혹시 함수의 인자 타입을 타입 알리아스 설정하고 , 이것을 typeof 를 통해서 분기처리 하여 구현하는 것은 불가능한가요?
타입은 런타임에 다 사라지고 런타임의 typeof와 타입스크립트에서 타입관련 typeof는 달라서 안될것 같습니다. 런타임에 typeof 문이 사라지기도 할거구요 인자가 객체인 경우에는 보통 type이라는 key를 추가해서 구현하지 않을까요? 제가 올려주신 질문을 정확히 이해하고 얘기한건지 모르겠네요
nextjs가 backend 프레임웍으로 분류되어 있는데, 그럼 api서버(DB연결)의 역할을 하면서 프론트 파일 서빙하는 것 까지 nextjs 하나로 충분한가요??
네 가능합니다.
해당 레포보시면 next js 로만 데이터 서빙하는것 가능합ㄴ디ㅏ
cherry님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!
감사합니다~
근데 가능하다고는 알고있긴한데 현업에서 nextjs를 baas 로 사용하는 사례가 있을까요?
저 했었어요
next js 홈페이지 가보시면 showcase쪽에 어떤플랫폼에서 해당기술로 서비스 구현했는지 찾아보실수 있고, 저도 현재 next js로 서비스 개발중이에요
그냥 간단하게 빠르게 만들긴 좋은 거 같은데 사이즈 크면 어렵더라고요
이 글을 읽어보니 nextjs의 기능이 백엔드를 대체할수있는가에대해서 생각을하게되어서 여쭤봤습니다
이분은 그냥
프론트 공부하신지 얼마 안된거같은데
세줄읽고 뭐야 이게 하고 껐네요
답변감사합니다 ㅋㅋㅋ 저도 다시 한번 생각해봐야겠군요
물론 백엔드의 기능을 완벽하게 대체할수는 없어요. 순수 next js를 이용해서 구현하다보면 미들웨어가 필요한 부분이 있을수도 있고…. 대신 next js는 그에 따라서 커스텀 서버를 넣어서 셋팅할수 있습니다.
저분 글을 보면 "결국 서버단 처리를 하려면, Next.js 의 경우 API 기능 등의 서버단 전문 처리라던가, 별도의 API 서버를 구축해야 하는 것이다."
이런 말이 있는데요…단순 API 서버 자체는 next js로 가능합니당…
저 글은 그냥.. 안 읽는 게 맞는 거 같아요
저도 제목보고 좀 의아해 했는데...
내용을 보니 더…
루비엉니님 반갑습니다 :)
며칠전에 읽어보고 의아해서 혼자 저장해뒀다가 이게 맞나싶어서 여쭤본거기도해요 ㅋㅋㅋㅋ 더욱더 감사합니다
ㅋㅋㅋㅋㅋ 어그로성이 다분이 높은 글이네요 ㅎ
중2병 개발자를 그렇게 좋아하지 않습니다
ㅋㅋㅋ
다분히*
저는 next js 좋아하는 이유가 간단한 서비스 자체는 저 혼자서도 모조리 구축할수 있겠다 라는 마음이 들어서인데… ㅎㅎ
저런글은 좀 황당하네요
nextjs에서도 미들웨어를 넣을 수 있다고 되어 있는데, nextjs로 하기 어려운 서버 기능은 어떤게 또 있을까요??
저도 백엔드 개발자는 아니지만.. 제가 그동안 경험해본걸 말씀드리자면 파일전송같은경우는 next-connect라는미들웨어 가져다썼었고
웹소켓 통신같은경우는 별도의 express 커스텀서버를 이용했었어요
감사합니다~
next 내에서의 express 서버 말씀하신거죠?
안녕하세요~
해당부분은 https://nextjs.org/docs/advanced-features/custom-server 참조하시면 될것같습니다.
넵 제가 말했던부분이맞네요! 감사합니당
궁금한것이 있습니다! react-use(https://github.com/streamich/react-use) 패키지에 보면 정말 많은 훅이 있는데 기능구현할때 최대한 여기있는 훅들 사용해도 문제없을까요? 훅으로 너무 많이사용하면 생기는 실무적인 문제가 있을까요?