아! '이거는 4번 반복해서 부딪혀야지 알 수 있는 문제구나'라고 말하면서 아직 딱 1번 부딪혔다고 인지해보세욥.
다른 사람도 여러 번 부딪혀서 해결했겠거니 하면서용~
어려운 게 당연하다!
아...앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
당연하다..!!ㅠㅠㅜ 나 바보 아니다..
네! 위로 차원이 아니라 이성적으로 생각해도 당연하다고 생각해요!
저도 어려운 거 마주치면, 이거 여러 번 해봐야겠다.. 싶은 마음으로 대해용 ㅋㅋ
같이 화이팅 해욥!!
퐈이링ㅋㅋㅋㅋ!
파이팅이에요!!
너무 공부시간도 길어지고 막막하게 느껴지면, 목표치 세워서 공부하기 보다.. 하루 이틀 정도는 시간 정해서 그 시간되면 쉬시는 것도 좋아요!
그게 맘편하고 좋은거 같아요...ㅠㅠㅠ 절대 목표치만큼 못채우겠던데요
모르는게 꼬리에 꼬리를 무는..
저는 잘 안풀리는 문제가 있으면 내가 아는 지인들중 한명을 만들어두고 화이트보드에 그려가면서 설명하거나 걸으면서 음성녹음켜두고 설명을 찬찬히 해보는 편입니다 그렇게 설명하고 말하다보면 스스로 해법이 떠오르더라구요
나중에 내가 한말 2배속으로 들으면 좀 스스로 똑똑한것 같고 그렇습니다 ㅋㅋ
목표치는 가급적 세우지 않기를 바랍니다
그것보다는 오늘 한 것을 기록해두는게
오옼ㅋㅋㅋㅋㅋ 성공한 사람들의 특징을 어디서 본게 있는데 설명을 꼭 해보라고 했던게 기억이 나네요
여러모로 정신건강상에도 좋고 개발할때도 마감이 있는 것보다 진행속도를 체크하는게 훨씬 더 고오급(!) 기법이지요 ㅎ
목표치 방식은 뺄셈이라서 충족을 시켜야 본전이고 못하면 충격이라서 멘탈관리하기 힘들어요 ㅎ
뭔가 쌓여가듯이 경험치 채워가듯이 시각적으로 장치를 하나 만들어두시면 훨씬 더 멘탈관리 하기 좋으실거에요
혹시 시각적인 장치로 사용하시는 툴이 있으신가요??
꿀팁이군요..!
저도 궁금합니다
전 최근에 시각적장치를 notion으로 구현해보려고 하는 중입니다
근데,,, 데이터들이 전부 notion에 귀속되는게 너무 걱정되서 obsidian도 생각중인데 이건 tracking 기능이 너무 약해서 ㅠㅠㅠ
꿈은 구체적으로 상상하고 목표로 나아가되
뭐라고 해야하지... 음 실패경험을 할 수 있는 방식으로 플랜이 짜여져 있다면 좀 바꾸시는게 좋을 것 같아요
아뇨 저는 P형이기 때문데 ㅋㅋㅋ 별거없습니다 그냥 메모장에 태스그를 잘게 적어두고 체크해서 지워나가는 그런거요. 그런거 안 모아둔게 살짝 후회되요 ㅋㅋ
태스크*
극 P가 극히 공감합니다…ㅎㅎ
메모지 대신에 A4지로 그냥 생각날때마가 정리하고 낙서하고 태스크 정리하고 지우고 하던 시절이 있었는데 그걸 안 버리고 모아두니 내용은 하나도 알아볼수가 없는데 그냥 쌓여있는걸 보는 것만으로도 뭔가 뿌듯하더라구요 ㅋ
사진
ㅋㅋㅋ 앗 저돈데 저도 하나도 못알아보는데 못버리겠어요 ㅋㅋㅋ
와!
ㅋㅋㅋ 저는 쓰레기 아까워서 아이패드로…
거기 쌓여이쓴게 좀 많아요 ㅋㅋ
유명해지면 저게 다 돈이다 생각하고 모아두세여 ㅋㅋㅋㅋ
그렇게 쌓여있던것들을 한번씩 돌이켜 보면 진짜 에너지 생깁니다 ㅋㅋ
내가 이만큼 하긴 했구나...
ㅋㅋㅋ 전역 후엔 첨단 문물 사용하지만 저거 보면 흐뭇하긴 하더라고요
ㅋㅋㅋㅋ 뭔가 만지고 보고 느낄 수 있는게 남는다는것은 아날로그의 큰 매력이죠
그러니까요 손때 타서 너덜너덜해진 것도 지금 보면 오히려 매력적인 것 같아요
저 작은 노트는 군번 상관없이 예전부터 디자인이 비슷한가요?
러버덕 디버깅과 비슷하네요! ㅎㅎㅎ
기본적인 건데 내용 좋아서 공유드립니당
오오!! 그런게 있네요~ 맞아요 인형대신 내가 아는 실제인물을 좀 떠올리면 몰입감이 생겨서 하는 편인데 좋은 방법이라고 생각해요!
마치 제가 쓴 글인거 마냥 쓰여있네요 ㅋㅋ 여기에 있는 방법대로 하고 있어요 https://onwah.tistory.com/m/9
혹시 1분 코딩 채널 즐겨듣는 분 계실까요? 저는 사실 백엔드 개발자인데, 실제 요즘 프론트엔드 개발을 어떻게 하고 계신지 궁금한 부분이 많아서 들어오게 되었어요. 제일 궁금했던 질문이긴한데, 저는 일반적인 정적페이지 개발 (html, css, js, jq)를 이용한 방식으로만 개발을 하였는데, 실제로 리액트를 사용하면 어떤 부분이 편리해지고, 또는 어떤 단점이 생기는지 궁금합니다.
jquery에서 하는 element를 찾아서 이벤트를 연동하고 값을 바꿔서 dom을 찾아서 텍스트나 클래스 값등을 바꾸는 작업을 상당히 직관적으로 그리고 선언적으로 작업을 할수 있도록 도와줍니다
프론트엔드가 굉장히 복잡한 경우에는 DOM을 찾아서 이벤트를 관리하고 DOM조작 작업이 상당히 복잡해지는데 이 작업을 프레임워크레 맡겨버리고 비지니스로직에만 집중 할 수 있다는 장점이 있어요
그리고 협업시 코드가 어쨋든 리액트에서 추구하는 방식으로 일관성있는 코드를 짜야한다는 이점이 있습니다
대신 그냥 단순한 원페이지나 복잡한 인터렉션 없이 폼 검증 정도만 필요한 수준의 패이지라면 리액트를 쓰는 게 오바엔지니어링이 됩니다
라이브러리 크기가 적지도 않고 그냥 바닐라나 jquery에 비해 초기비용이 필요하니까요
아 정말 중요한 말씀 많이 해주셨네요. 비슷한 경험을 이전 회사에서 한 적이 있어서.
뷰를 선언형으로 관리할 수 있고 + flux 패턴을 이용하기 때문에 버그도 적고 디버깅이 아주 쉬워지는 장점이 있지만 성능이 안 좋다고 생각해요
레이어를 추가할수록 성능이 안 좋은 건 아주 당연한 이야기긴 한데 리액트는 성능을 정말 쿨하게 버린 거 같아요 딱 "대부분의 상황에서 충분히 빠를" 정도만 챙기고
사진
그러면 일반적인 웹페이지에서는 자신이 jq js에 대한 충분한 이해도로 일반적인 방식으로 개발하는게 맞다 라고 이해가 되어지는데
리엑트를 써야하는 이상적인 경우는 어떤 서비스를 개발할 때 일까요?
왠만한 어드민 류 페이지나 대형 포털 등 데이터 변화가 잦은 페이지들이요
서비스가 소규모로 개발자가 적을때는 이전의 방식으로 하는게 더 나은 방식이라고 생각합니다. 그래야 빠르게 적용해보고 검증하고 빠르게 수정하는게 한사람이 다 하니까 더 빠르게 됩니다
근데 규모가 커지면 커질수록 컴포넌트화를 진행하는게 더 낫다고 생각합니다.
빠르게 검증하는건 똑같지만 모든것을 전부 수정할 필요는 없으니 컴포넌트화를 진행하여 필요한 부분만 얼른 수정하는게 나은방법이라 생각해요
사용자가 주로 읽기만 하면 되는 문서류나 인터렉션이 하나만 있는 종류(폼 방식)이 아니면 그냥 요새는 그냥 대부분 쓰신다고 보면 될거에요
유지보수를 하고 계속 성장해나갈거라면 안해야할 이유는 별로 없어요
jquery를 쓰고 있는 페이지를 개발한다고 하면 개발자 채용에서 이미 힘드니까요 ㅋㅋ
요새는 jquery할 줄 아는 개발자를 뽑긱가 더 힘들걸요 ㅋ
$
저도 제이쿼리 할줄 모릅니다.. 차라리 바닐라 자스로 하는게 더 편해서..
jquery할 줄 아는 개발자는 많을거예요~ 경력이 5년 이상이면 대부분 하실거예요 예전에는 다 jquery여서..
근데 제이쿼리쓰는곳을 안가는게 함정이죠
5년차 개발자가 이직을 그런 곳으로 하려고 할까요 ㅋㅋ
그렇킨하네요^^;
요새 프론트엔드 5년차면 엄청 귀한데요 ㅋ
프론트엔드 쪽 개발자 분들 기준에서는 확실히 중요한 부분이군요
저는 신입인데도 제이쿼리에 j만 보여도 지원안했어용..
ㅋㅋㅋㅋㅋㅋㅋ
신입이든 아니든 개발자에게는 성장이 가능한 환경이라는게 엄청 중요한 요소인데 여기는 기술도 많이 필요하지 않으니까 적당한 개발자를 뽑아서 쓰면 되지 않을까?로 접근했다가는 망하죠 ㅋ 결국 외주로 돌리기 되다가 업체로 맡기는 식으로 흘러가고... 그렇게.. 음
프론트엔드 개발자분들 사이에서는 바보같은 질문이겠지만 jq를 사용하시지 않는 이유는 뭘까요?
바닐라가 jq기능을 거의 다 흡수를 했엉ㅅ
했어요
jquery의 가장 큰 매력이 쉬운 API, IE 크로스 브라우징, ajax인데
IE는 이제 필요가 없고
ajax는 더 쉬운 fetch API도 있고 axios라는 확실한 대체제가 있고
quertySelectorAll classList closest matches 등 jquery 핵심 기능이 다 네이티브 기능이 되었어요
jquery를 쓰는 이유가 이제는 프레임워크를 쓰는 것보다 가볍다는 이유라면
사실 jquery가 가볍지 않기 때문에 그냥 안 쓰는게 나은거죠
그러면 axios랑 fetch 중 어떤걸 선호하시나요..?
axios자체도 fetch기반이라..
리엑트 코드들 보면 대부분 axios쓰긴 하더라구요
옵션을 좀더 제공해주는측면에서
저는 fetch인데 주류는 아직 axios인듯해요
사진
axios가 편하긴하죠
선호도가 갈리는 느낌이 있긴 해요 전 axios요!
예전에는 axios가 완전 대세였는데 요즘은 fetch도 좀 보여서요~
저는 실무에선axios쓰고 간단한 바닐라 사이드환경에서는 fetch요!
생김새가 좀 귀엽기도 하고.. 인터셉터 쓸 일 생기면 axios 로 바꾸는거 같아요! 사실 fetch 랑 axios 랑 디테일 한 차이가 있다고는 하지만, 아직 사용상에 큰 베네핏은 느껴보지 못한거같아요.
맞아요. axios가 fetch보다 나은 것은 IE 크로스 브라우징과 cancel이 가능하다 정도이고
나머지는 api 쓰임새의 차이라서 조금더 쓰기 편하고 익숙한 axios를 많이 쓰는것 같더라구요
ㅋㅌㅋㅌ진짜 그런거같아요.. 전 개인 작업할때, VSC 에서 axios.get() axios.post() 이 부분에... 색깔로 친해진게 눈에 잘들어와서 쓰는거같아요
진짜 별거 아닌데.... 뭔가 달콤합니다 ㅠㅠ...
ㅋㅋㅋㅋ
혹시 셀링페이지 제작을 노코딩툴로 대응하고있는 회사계신가여
셀링에 시간좀 덜 쓰고싶다는 생각이..
저는 axios 인터셉터랑 업로드프로세싱 기능도 좋더라구영
cancel은 fetch도 가능한걸로 아는데 아닌가요?
이게 최근에 만들어지기도 했고 여전히 IE에서는 안되고 있는거라서
안녕하세요 저 질문사항이있습니다! 현재 storybook 사용해서 공통 컴포넌트를 원격저장소에 올린후 프로젝트에 적용시켜서 사용중인데요, storybook 컴포넌트를 빌드할 때 혹시 css파일은 포함되어 빌드파일이 만들어지지 않나요?? 같은 css를 컴포넌트에도 적용하고 따로 프로젝트에도 적용해야되는지 궁금해서 여쭤봅니다!
storybook webpack 설정 에서 따로 셋팅할수 있어요!
아하 설정하는부분을 찾아봐야겠네요 ㅎㅎㅎ감사합니다
react framer-motion 사용하시는 분들께 질문 한 가지 드립니다 ㅜㅜ
혹시 x나 y값을 조정하는 부분을
부모를 positon: relative; 로 설정해둔 후
bottom, top 으로 제어가 불가할까요 ?
사진
이건 동작이 되는데
사진
이건 안 먹네요 ㅜㅜ
translateY 조절이 아니라
bottom을 옮기고 싶은데
이건 불가한 걸까요 ?
룰루님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 ㅎㅎ
잡플래닛 평점 4점 이상 회사 A vs 2점 중반 회사 B 둘다 서비스 회사이고, 각각 시리즈A, B급입니다. 그런데 B회사가 연봉을 신입기준 1000이상 더 제시했습니다. 경영진에 대한 불만으로 B회사의 안좋은 리뷰가 많은데 최근 개발팀에 좋은 cto가 들어오고 채용도 공격적으로 하는 것 같습니다. ( 잡플래닛 평균 임금의 거진 2배 수준의 오퍼를 받았습니다 ) A 회사는 지인이 다니고 있고 모두 만족하며 다니고 있습니다. 안전하게는 좋은 문화의 A회사에서 성장하는게 좋아보이지만 한편으로는 연봉 숫자도 중요해 보여서 고민이 되네요. 여러분은 어떤 선택을 하시겠나요?ㅜㅜ
전 신입입니다
b가 a보다 연봉이 천만원 높은건가여?
네 맞아요! 평점은 낮지만 연봉이 높다
일단 정보력 차이가 있네요 믿을 만한 지인인지는 모르겠지만 B 회사 정보가 부족해보입니다
네임밸류는요 ?
b회사가 두배를 제시했는데 a랑 천만원 차이면 a도 높은편인거아니에여?
전 차라리 시리즈a 냐 b냐에 주목할거같습니다만
링크드인 크레딧잡 블라인드 thevc 등 더 뒤져보시고 평점이나 잡플래닛 연봉말고 최근 퇴사율처럼 실질적으로 나오는 데이터를 더 찾아보세요
222
잡플래닛 후기 조작이많이들 하나요 ?
이게 잡플래닛 평균이 많이 낮더라구요. 그래서 기대 안하고 면접 연습하력후 했는데 오퍼레터 보고 좀 놀랬네요
잡플래닛 거긴 인증도 딱히 안하는데 신용이 그닥.. 둘다 표본도 적을 것 같은데용?
오옹.. 그렇군요
혹시 연봉정보 말고 고려할 중요한 사항이 있을까요? 신입이라 판단기준이 잘 서질 않습니다 ㅜㅜ
하는 회사들은 엄청 합니다
저는 개발자 인원수 중요하게 봅니다
얼마나 개인의 성장을 챙겨주는지?
일단 B회사 정보가 상대적으로 없습니다
회사가 하는일이 마음에 드냐 안드냐도 중요한거같아요
theVC같은 곳에 직원 200명이라고 했는데, 개발자 막 5명 있는 회사도 많습니다.....
정보를 더 수집하시고 비교해보시는게 좋겠어요
저도 b회사 정보를 좀 더 알아보시는게 좋을 것 같습니당
정말 신중하시다면 철판깔고 B회사 개발자 한분 어떻게든 붙잡고 밥 한끼라도 사드리는것도..
잡플래닛 2점대면 일단 그런 평점은 신경도 안쓴다 이거네여ㅋㅋㅋㅋㅋ
조작은 안한게 확실합니다
혹시 B 회사가 코인이나 금융계 회사인가요…..?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그쪽 분야가 돈을 많이 줍니닼ㅋㅋ
b 설마 101인가요?
헉 ㅋㅋ 맞아요
저도 확 101 떠오른..
101 안좋나요?ㅋㅋㅋ소문이 있는 것같긴 하던데.....
이제 반말은 안한대욬ㅋㅋㅋㅋㅋ
삭제된 메시지입니다.
엇 101이면 거긴 들리는 얘기들이 잇기는한듯요
CTO 새로 바뀐지 1년 다 될거에요
네네 cto 오시고 조직도 다 갈긴 한거 같더라구요..
길게 보시는 거 추천해요
한별님 조언 감사드려요 참고할게요!
다음이직 다다음이직까지 멀리 보고
빠이팅!
블라인드 확인해보세요
그 회사에서 얼마나 성장할 수 있을지 잘못하면 시간 날리는 거 아닐지?
ㅇㅇㅇ101 이야기는 블라인드에도 많으니 거기서 요즘 어떤지 확인해보시면 조금 더 괜찮은 최신 정보 얻으실 수 있을겁니다
지인이 이번에 갔는데 생각보다 만족하긴하더라구요 ㅋㅋ 팀바팀이긴하겠지만
오 이제 반말 안하는군요…
네네 하나 더 여쭤볼거는 A회사 연봉을 원하는대로 맞춰주겠다 불러봐라 해서 잠정 결정된 연봉이었는데 추가 협상 같은 것은 불가능하나요? 아직은 전화로 서로 이야기만 해보았고 계약서나 오퍼레터는 안받은 상태이구요
진짜 한 1년전인가..? 101 얘기로 블라에서 핫했던거 같은뎅ㅋㅋㅋ
네네 저도 그건 봤어요 ㅋㅋ ㅜ
그 시절 소문의 대부분은 사실에 가깝더라고요..
지금은 다 퇴사하셔서 아는 분이 없네요;;
맞춰주겠다 했으면 더불러보면 되지 않나요 ㅋㅋㅋ
b에서 받은걸 카운터오퍼 해보세요!
이게 궁금한 거긴 했는데 어떤식으로 해야 무례하지 않을까요?!ㅜㅜ
저는 그래도 웬만해서는 찍먹파입니다 ㅋㅋㅋ 다른 사람이랑 안 어울려도 나랑 잘맞을 수도 있고, 내가 잘 맞아도 다른 사람이 와서 잘 안맞을 수도 있습니당….ㅋㅋㅋ
혹시
(그래서 더 어려운 것같아요.....)
사진
깃허브에서 폴더가 이렇게 나오는이유를 알수있을까요
아시는분 ㅠㅠ
github submodule 쳐보시면 나와요!
서브모듈이네용
아 서브모듈인가요
흠
서브모듈 지우고싶은데
감사합니다!!
그냥 tosolist 폴더 안으로 들어가서 github이랑 연결하면 될걸용..?
아니면 하위 폴더 .git 지우시면 되는걸로압니당
이모티콘
아 바깥쪽에서 연결하고 싶어서요
js로 투두리스트 만든거랑 ts로 만든거랑 비교해주고 싶어서
감사합니다 검색 키워드도 몰랐는데
검색해서 해결했습니다!!
면접질문 찾아보다가 질문드립니다! 질문이 "리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유가 무엇인가요?"라고 적혀있는데, 실제로 함수형 컴포넌트와 함수 컴포넌트가 다른가요?🤔
함수형 프로그래밍이 순수 함수쪽을 지향하는데
함수 컴포넌트는 순수 함수가 될수 없어서 그런게 아닐까요
useEffect 엄청 남발해서..
저는 그렇게 이해하고 있었어요
함수형 프로그래밍이 보통 상태를 갖지않는데
리액트에서 구현할때 useState처럼 상태를 갖고있어서 구분하는거같아요
원래 리액트 진영에서는 함수형 컴포넌트라는 단어를 썼었어요
그런데 이 네이밍이 함수형 프로그래밍과 비슷했고, 충분히 혼란을 야기할 수 있었어요. 이러한 이유였죠. "함수형 컴포넌트를 사용하면 함수형 프로그래밍이 가능해진다"
그러나 저희가 사용하는 컴포넌트에는 hook이 들어가고, 이 훅으로 사이드 이펙트를 빈번히 일으키기 때문에 함수형 프로그래밍이라고 볼 수 없습니다
그래서 리액트 진영에서도 최근-그래도 1년전이지만 함수 컴포넌트라고 다시 명명했어요
그 뒤로 공식 문서에도 Functional Component 가 아닌 Function Component라고 기재되어있습니다
참고해보시면 됩니다
모두들 답변 감사합니다 :)
css grid에서 2 / 3 / 2 식으로 배열하는게 가능할까요? 첫번째 row에는 column이 2칸 두번째는 3칸 세번째는 2칸 이렇게요!!
반갑습니다. 답장이 늦었네요 어서소세요. ㅎㅎ
국비 카드 신청해보신분들
결과 얼마정도 기다려야되나요 ?
안녕하세요! 이게 며칠전에도 나온 주제이긴 한데 저도 막상 맞닥뜨리니 고민이 은근 되네요. 🤣 반응형을 하다보면 줄바꿈을 임의로 넣어주어야 할 때가 있는데 다들 <br /> 태그를 사용하시는지 아니면 \n + pre-line을 통해 해결하시는지 궁금합니다! 사실 br태그가 더 쉽게 해결이 가능한데 선호하는 방법이 아닌 것 같아서 이렇게 질문드려요!
일주일 됐는데 아직 접수상태네요 ..
아까 질문에 연속인데 혹시 css가 제가 작성한 별도의 css파일도 빌드에 포함시킬수 있는건가요?!
전 br태그 쓰는 편이에요ㅎㅎ
저는 그때마다 다른것 같아요!!
저는 특별한 이유 없으면 css요!
저도 css로 사용합니다 ㅎㅎ
전체 column을 6칸으로 하시고 row마다 column이 2개면 3칸씩 3개면 2칸씩 나눠 갖게 하시면 될 것 같아요
그렇군요..! br 태그가 문단 구분용으로 남발하지만 않으면 크게 문제는 없을 것 같네요. 목적 자체가 줄바꿈이니까요..! 다들 경험 공유 감사드립니다!! :D
여러 방법을 사용해보고 저도 상황에 맞게 사용해야겠어요~!
답변감사합니다 시도해보겠습니다!!!
서버데이터가 엔터를 입력하는 형태라면 pre 아니면 br 저는 이렇게 하는 편입니다
서버든 클라든..
허..명료한 답변이네요 정말..감사합니다 테오 😍 관련 글을 쓸 생각인데 참고해도 될까요??
손흔드는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
즐거운 네오님이 나갔습니다.
혹시 vue에서 tailwind를 css프레임웍으로 사용하시는 분이 계신가요??
안녕하세요 손흔드는 라이언님~~ 반갑습니다. :)
실무에서 high order component를 자주 사용하나요? 들어는 봤는데 써본 적이 없어서 익히는 데 약간 어렵네요. 공식문서 보면서 뭔지 배우고 있는데 "기존에 있는 컴포넌트에서 props를 추가해서 새로운 컴포넌트를 만들어서 사용할 수 있다." 이정도만 알겠는데 더 알아야 할 사항이 있다면 알려주실 수 있으신가요?🙏
Hooks 생태계로 넘어오면서 많이 쓰이고 있지는 않습니다
다만 클래스 컴포넌트를 필수로 써야하고 에러 바운더리 컴포넌트를 사용해야할때는 필요할 수 있고요
아 그럴 때 사용하는군요. 제가 클래스 컴포넌트를 자주 안 써봐서 몰랐던 거 같네요. 감사합니다☺️
다만 공식문서를 보고 설명하신 것을 봤을때는 조금 더 이해가 필요해보입니다
열심히 공부하시는군요 ㅎㅎ
더 읽어보겠습니다! 사실 공식문서 읽는 것도 약간~ 어렵네요 아하하 프로젝트를 하다 보니까 아는 선 내에서 계속 해결하려는 모습이 보여서 코드 개선을 하려면 더 알아야겠다는 생각이 들어 공식문서를 읽고 있습니다. 칭찬 감사합니다! 공부할 힘이 나네요!!!
하이어 컴포넌트 정말 가끔
라이브러리에서 등장하긴합니다
정말 가끔은 아니고 종종..?
보통 이제 안쓰이니까 공부 안해도 되겠죠? 라는 공부하지 않을 이유에 대한 답정너 질문으로 받는 이야기라서
좋은 자세를 가지신 것으로 보입니다 ㅎㅎ
depth가 3인 array를 리스팅할때 삼중 for loop문을 만들어야하나요? 너무오래걸릴꺼같은데...
배열 크기가 얼마 정도 되나요?
카테고리라서 가늠이안됩니다..
depth 가 3 인 array 를 펼치는 작업이라면 전체 원소 개수에 대해서 O(n) 일 거 같은데 혹시 어떻게 구현하셨나요?
혹시 실무에서도 CRA를 많이 사용하는 편인가요 ? 사수가 없는 상태에서 새롭게 React + TypeScript 로 새롭게 프로젝트를 시작해야 하는데 webpack으로 필요한 부분을 모두 설정을 다해주어야 하는지, 아니면 CRA로 초기 세팅을 하고 craco와 같은 도구들로 필요할 때마다 추가적으로 Webpack 설정을 해주는 방식으로 처리하는지 궁금합니다.
전 CRA와 react-app-rewired로 구성했습니다.
자신있으시면 밑바닥부터해도 되고 그게 아니라면 CRA 같은 도구의 힘을 빌리는게 더 좋을 수 있죠 ㅎㅎ
저는 CRA + CRACO 조합으로 프로덕션 운영한 경험이 있어요
저도 이걸로 프로덕션 운영해본 경험이 있습니다 :)
저도요 : )
동일 경로로 { "description": "대충 이거 내 자기소개에요" } 하고 Bearer Token 을 보넀는데, insomnia 에서는 정상 작동하고 axios 상에서는 Unahturoized(401 error) 가 발생하고 있는데.. 혹시 제가 모르고 있는 부분이 따로 있는 걸까요?"
사진
사진
원인을.. 모르겠네요 http 라서 그런가...
콘솔에서는 토큰 잘 나오나요?
하하... 죄송합니다
애초에 잘못넣었네요
넵,,,,, config 파라미터로 넘겨야 하는데...
정상작동됩니다.. 번거롭게 해서죄송합니다
정말 좋은 주제와 정보 공유 감사합니다. 너무 큰 주제라 이게 함수형이야? 하면서도 그냥 그런가 보다 하고 썼었는데, 후회가 되네요 ㅋㅋㅋ ㅜㅜ
게으름(lifeisnovel)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ lifeisnovel님! 반갑습니다 :)
이모티콘 안녕하세요! 예전 AdorableCSS 테크톡 때부터 블로그 글 흥미롭게 읽다가 오랜만에 봤더니 오픈채팅방이 있어서 들어오게 되었어요!
와!!! 감사합니다 고맙습니다 :)
여기는 프론트엔드나 개발자들에게 궁금한 것들을 물어보고 또 대답해주면서 함께 성장하고자 만든 공간입니다~
학습이나 진로 실무에 대해서 궁금한것들이 있다면 언제든지 편하게 글 남겨주세요~~
이모티콘 4년차 프론트엔드... 개발자라고 말하고 싶지만 아직 jquery와 IE지원에서 올해 막 모던 js와 css로 어떻게든 올라타려고 발버둥치고 있습니다! 많은 얘기 나눌 수 있으면 좋겠어요, 좋은 공간 감사합니다!
그 밖에 뭐든 좋아요!! 내가 아는 거다 싶으면 또 답을 달아주세요~ 설명할 줄 아는 지식이 정말 본인의 지식이라고 합니다!!
취준 중인데 혹시 원티드 프리온보딩 프론트엔드 코스에 대해 아시는 분 계실까요? 아신다면 어떻게 생각하시나요??
기업에서 내준 과제 해결하면서 개인/팀으로 참여하면서 합니답
윤님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
삭제된 메시지입니다.
안녕하세요~ 윤님 반갑습니다 :)
앗 ㅠㅠ 저는 단체방인지 늦게 깨달아서 글을 지워버렸어요 죄송합니다!!!
아니에요~
구글 스프린트는 4월달 신청을 받았고 마감이 된 상태입니다 :)
톡게시판 '글 공유': 구글 스프린트 6기를 모집합니다. 날짜 4월 13일 (수) ~ 4월 18 (월) 까지 (디자이너님의 참가를 절실히 원하옵니다! +_+bb) 원래 스프린트는 (월~금)으로 이루어진 구성이나 저희가 사이드 프로젝트로 하는 만큼 주말을 이용해 조금 더 개발에 할애할 수 있도록 수요일날 시작하는 구성으로 만들어보았습니다. 저의 개인적인 사정으로 인해서 시간은 저녁 11시 고정입니다. ㅠㅠ (죄송해요 애들을 꼭 재워야만 해서.. 10시 45분 정도도 고민해보고 있습니다.) 알림 6명의 인원이 확보되면 스프린트는 시작할 예정이며 인원이 부족할 경우에는 스프린트 시작 날짜가 미뤄질 수 있습니다. 최소조건 스프린트인 만큼 매일 최소 1시간 30분 이상의 온라인 미팅 시간 확보는 꼭 필요합니다. (지난 번의 경험으로는 보통 1시간은 항상 넘어가고 1시간 30분~2시간 정도는 쓰는 것 같아요) *주말은 모두 비워둘 필요는 없지만 경험상 시간을 많이 비워두시면 좋을 것 같아요 주니어건
아하 !!! 감사합니다 :)!!!
혹시 신청을 원해서 이메일을 남겨놓으시면 자리가 빠지거나 추가 모집을 하게 되면 또 공지를 드리도록 하겠습니다
넵!!!! 감사합니다:)!!
앗 감사합니다:) 6주를 투자할 만큼 메리트가 있을지 궁금했습니다..!
취업에는 엄청 도움될거같네욥!!
스프린트 관련해서는 프론트엔드는 거의 모르고 백엔드랑 인프라쪽만 가능한데 지원 가능한가요??
네~ 백엔드 디자이너는 언제나 환영입니다 ㅎ
다행이네요 ㅎㅎㅎ
대신 스프린트를 하시게 되면 백엔드를 하셔야 합니다. ;) 스프린트는 각자의 전문성을 가지고 최대환 활용을 하는 협업방식을 배우는 곳이며 내가 못하는 스터디는 아닙니다 오셔서 프론트엔드를 하지는 않게 될거에요
최대한*
오히려 백엔드로 지원을 해서 인프라와 DB쪽을 지원을 해주시면 훨씬 더 풍성한 협업 경험과 서비스를 만들수 있을 거라고 생각합니다
그렇지만 아이데이션부터 개발까지 가는 과정을 배우는 스프린트 과정은 백엔드를 하셔도 프론트엔드나 기획 디자인을 또 익힐 수 있는 좋은 기회가 될거에요!
혹시 electron사용해보신 분 계신가용? 되게 관심있게 보고 있는데, 사용해보신 분들의 후기가 궁금합니다!
아 넵 저도 슥 봤는데 스프린트가 생각보다 더 촉박해서 프론트를 배우기 보다는 각자 역할에 집중해서 프로덕트 자체에 집중하게 될 것 같더라구요 ㅎㅎ
그것도 좋은 경험일 것 같아서 조만간 참여해보고 싶네요
안녕하세요.
삭제된 메시지입니다.
안녕하세요.. 올해 초에 원티드 프리온보딩을 했었는데 저는 개인적으로 동료분들에게 많이 배우고, 보다 성장할 수 있던 기회였던 것 같습니다! 참여기업들이 좋다면 참여해보시는 걸 추천드려요ㅎㅎ 하지만 참여기업에 취업이 된다는 보장은 없고(해당 코스 수료시기에도 채용을 진행하지않음)또 진정 뽑으려고 참여한 것이 맞는지는 의문이 들더라구요. 체면치레(?)만 하려고 참가한 기업들도 많더라구요..! 제가 했던 기수에선 중간에 기업들이 나간다던가 과제의 요구사항이 바뀐다던가 했던 기억이 있습니다!
질문 올렸다가 검색하니 바로 나와서.. 삭제합니다 죄송합니다 ( _ _ )
중간에 기업들이 나가기도 하는 군요...ㅠㅠ 기업 수가 많지 않아서 더 고민이 되더라고요.. 말씀 너무 감사합니다! 동료학습 경험으로 생각하고 고민해봐야겠네요..!
혹시나 더 궁금한거 있으시면 1:1대화 걸어주세요 ㅎㅅㅎ)!!
공짜라서 더 괜찮은거같네요!!
50만원을 내고 어느 정도 수료하면 돌려받는 식인 것 같아요..! 감사합니다🙏
채용과정 중에 과제전형으로 제출하시는분들은 어떤식으로 하셨나요 ?
git repo를 public으로 하면 안될 것 같은데 어떤식으로 commit을 해야할지 모르겠네요
제출방식이 뭔가요?
커밋로그 남겨서 마지막엔 아카이브해서 이메일로 제출입니다!
일단 프라이빗 레포만들어서 remote add origin 으로 추가해서 하고있는데 마지막에 압축해서 보내려면 커밋로그가 남을지 모르겠네요 ..!!
.git 폴더만 들어있으면 될겁니다
아 그런가요? ㅎ 감사합니다
일단 비공개 repo에 remote origin 연결하는건 맞는거겠죠!?
remote origin 으로 연결할 곳이 있어요?
이메일 제출이라고 말씀하신거 보면 그냥 local repo 로 작업하셔도 될듯?
저였으면 리모트 레포 연결 안했을거같아요
레포 주소 적어서 같이 내라고 한게 아닌이상 로컬에서 작업하셔도 될 것 같아요!
아 그렇군요!! 감사합니다
늦은시간에 답변 감사드립니다! 편안한밤 되세요 :)
과제는 대외비일 수 있어서 .git 만 남기는게 안전합니다
넵 아무리 프라이빗이라도 올리면 안되겠네요 답변 감사드려요!
면접 전형이 모두 종료되고나서 그때 비공개 저장소로 관리하시거나 별도 클라우드로 올려도 늦지 않으니까요 ㅎㅎ
나중에 제가 따로 관리하는게 제일 좋겠네요 ㅎ
조은님 포스팅이 있어서 공유드립니다. : ) https://euncho.medium.com/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%95%99%EC%8A%B5-%EB%A1%9C%EB%93%9C%EB%A7%B5-91c3bc11dec0
엥 기업들이 나가는건 뭔가요 ㄷ
그러게요..ㅎㅎ 당일 과제공개 시간에 갑자기 나간 기업도 있었어요!!
혹시 moment js에서 day js로 마이그레이션 해보신 분 게신가요?
저요!
저도 모듈 사이즈 때문에 마이그레이션을 하고 싶은데 혹시 이슈는 따로 없으셨는지 궁금합니다. ㅎㅎ
저는 Date관련 필요한 함수를 만들고 내부적으로 monent를 썼다가 dayjs 함수로 바꾼거라 어렵진 않았는데요. ex) isSameDate = (a,b) => monent... -> dayjs, dateFormat(date, format) => monent.format(...) -> dayjs.format(...)
나중에 dayjs는 ufc랑 timezone 플러그인이 따로 있기 때문에
서버에서는 monent를 써서 만든 포맷이 dayjs로 그냥 해석을 했을때 미묘하게 틀린적이 있어서
utc 확장을 설치하고 dayjs.parse("YYYYMMDD....") 어쩌고 해서 포맷을 정확하게 맞춰서 했던 거정도 기억이나네요
오 …공유해주셔서 감사합니다. : )
저도 moment -> dayjs로 변경했습니다. 거의 똑같아서 마이그레이션 하기 어렵지않으실 것같습니다 ㅎㅎ ㅎ
오 dayjs는 date-fns에 비해 어떤신거 같나요??
어피치님이 말씀하신 이유랑 동일합니다. ㅋ
monent는 만능이나 너무 무거워서 마이그레이션이 필요했고
dayjs가 거의 monent랑 비슷하다보니 택하게 되었습니다.
date-fns는 함수형으로 만들어졌으니 나중에 트리쉐이킹을 하기에는 더 용이할거라고 생각해요
근데 마이그레이션을 해야하다보니 그냥 좀 편한걸 찾게 되더라구요 ^^;;
2222222222
일단…..옮기는게 우선이다
빨리 Temporal이 ES Native에 포함되길 바랍니다. ㅠㅠ
Javascript Date는 진짜 쓰레기에요!
22222222........
오죽하면 StateofJS에서 JS개선 과제중에 Date 개선만 따로 있겠습니까? ㅋㅋㅋㅋ 무려 Static Type과 나란히 할 토픽감!!
선배님들 혹시 내 로컬에 빌드한 프로젝트를 외부로 간단히 노출?할수 있는 익스텐션이 있을까요?
ngrok
예전에 한번 여기서 언급되었던거같은데요. 찾아보려니 배포쪽 내용만 나와서요
역시 빠르십니다!! 감사합니다!!
프론트가 배포하지 않아도 테스트링크를 만들어볼수있어서
유용하게 쓰고 있어요
그리고 로컬에서 바로 저장해서 적용되면 저링크에서도 바로 적용돼서 좋습니다
오 신기하다 : ) 공유해주셔서 고맙습니다
리액트에서 함수형 컴포넌트와 훅은 동시에 등장한 것인가요?? 공식문서에 훅이 등장한 이유에 대해 나와있는데요 1. 컴포넌트간에 생명주기 메서드 로직을 재사용하기 어려움 2. 복잡해진 컴포넌트 (생명주기 class 메서드 간의 코드 중복, 그에따른 재사용 불가 등) 3. Class의 this는 사람과 기계모두 이해하기 어렵다 (this는 사람이 이해하기 어렵고 컴파일 후에 배포하는 식으로 진행을 하게 되면 Class는 지연을 일으킬 가능성이 있다) 정도로 저는 이해를 했는데 2,3의 내용은 훅에 대한 내용이 아니라 함수형 컴포넌트의 이점이 아닐까 생각이 들어서요 아래 사항중 어떤 순서로 진행이 되었는지 알고싶습니다 1. 클래스형 컴포넌트 -> 함수형 컴포넌트의 등장 -> 훅의 등장 2. 클래스형 컴포넌트 -> 함수형 컴포넌트, 훅의 등장
함수 컴포넌트는 원래부터 있었습니다.
상태관리가 클래스 컴포넌트밖에 안되다가 context를 이용한 방법이 나와서
함수 컴포넌트에서도 훅을 통하여 상태를 관리할수있게 되었고 그래서 권장하게 되었습니다.
함수 컴포넌트에서는 정말 state를 관리할 수 없었습니다. 그러다가 hook이 나오면서 함수 컴포넌트를 사용하는 쪽으로 패러다임이 바뀐거죠 라고 쓰고 있었는데 썰님이 빨랐급니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
예전에 김민태님이라고 우형개발자분이 훅의 작동방식을 구현해주셨는데 신기하더라고요
그런방법을 생각해내다니?! 이러면서 봤습니다 ㅋㅋ
그럼 이전에 함수 컴포넌트의 역할은 상태관리가 불가능했으므로 크지 않았을것 같은데 맞을까요?? 이후에 훅이 등장하면서 권장되기 시작한 것이구요
역할이 크지 않았다라기 보단 아예 사용을 할수 없었다..? ㅋㅋㅋㅋ 비슷한 말인거같기도 하고
네 함수컴포넌트는 정말 프레젠테이션만 담당했습니다 컨테이너&프레젠테이션 스타일로 주로 사용됐어요
props 내려주는대로 그냥 보여만 줬었습니다
두분다 친절한 설명 감사합니다!! 클래스형, 함수 컴포넌트 존재 -> 훅의 등장 으로 머릿속에서 정리할게요!!
SFC 라는 키워드로 검색해보시면 도움될겁니다
클래스컴포넌트는 너무 뚱뚱하고 무거워 라이프싸이클도 상태도 존재하지 않는 Stateless Functional Component 를 사용하자! 라는 바람이 불었고 상태라고 해봤자 props만 내려받아서 렌더링하는 가벼운 함수 컴포넌트가 먼저 등장했었습니다
감사합니다!!
Seoul Finance Center가 먼저 떠오른건 반성하겠습니다
안녕하세요 저 질문하나만 하겠습니다ㅠㅠ 현재 web이랑 mobile을 react-device-detect의 isMobile을 통해서 분기처리를 해서 브라우저에 띄우고 있는데 분기처리는 잘 되지만 웹 화면에서 모바일 css를 계속해서 호출하는 이슈가있어서요ㅠㅠ mobile.css는 모바일컴포넌트 내에서 선언되어있는데 얘가 왜자꾸 웹에서 호출되는지를 모르겠습니다ㅠㅠ
react-device-detect 레포 들어가셔서 어떻게 구분하고있는지 확인해보시면 아마 도움 되실 것같아용...
true false로 분기처리가 되어지는데 컴포넌트가 생성될때 생성자에서 import하니까 잘 먹히네요ㅠㅠ이게 맞는 방법인진 모르겟지만..
그렇군요 ㅎㅎ 추가로 생각해본 방법은 하나에만 의존하지않고, 약간의 방어 로직(이라고 해야하나..)을 얹는건 어떠세요…? 예를 들어 width가 450px 이하일 때는 모바일, 그 이상일 때는 PC로 간주한다.
만약 제가 그런 상황이라면, 뭐 그런식으로 보완장치를 같이 만들어서 처리할 것같습니다. 아니면 userAgent를 추가로 확인한다거나.거나…
userAgent는 처음들어봤어요!! 조언 감사합니다 방어코드에 대해서도 생각해보는게 좋겠네요 ㅎㅎㅎ
다른 분들의 조언도 들어보시면 좋겠네용 ㅋㅋㅋ 저도 늅늅이라서…..ㅋㅋㅋㅋㅋ 아는게 이게 전부입니다
ㅋㅋㅋㅋㅋ넵 감사합니다!
오늘 정말 정말 좋은 회사에 최종합격하게돼서 연봉협상을 하게되었는데요 원하는 연봉을 알려달라고 하시는데 어떤걸 기준으로 결정하면 좋을까요??? (로켓펀치 공고에는 네카라베쿠배급 연봉 이라고 써져있고 제가 지원했던 포지션은 경력3년차 이상 포지션이었습니다!)
축하드립니다~~
저는 0년차 신입입니다!
감사합니다ㅜㅜ
오 축하드립니다~~
축하드립니다!
와!!! 일단은 먼저 축하드려요!!!
ㅠㅠ 오래되셨네요 그때 프로젝트 같이했었는데
더 기쁘실듯
네카라쿠배급이면 5천이상불러도되는거아닌가요?
네..취준하면서 정말 너무 힘들었어요ㅠㅠㅠ
와 3년차 이상인데 신입으로 합격하시다니 엄청난 실력자시군요!!!…
축하드립니다.. 얼마나 고생하셨을지 가늠도 안되네요
5천을 제가 감히 불러도 될까요..????
밑져야본적아니겠습니까
충분할 것 같아요! 저도 오퍼레터 보고 놀랬어요
로켓펀치에 대놓고 그정도급맞춰준다하면
내가 할수있는게 그만큼인지 생각해보고 부르는건 좋습니다 ㅋㅋ 그래도 일단 불러보고 ㅋㅋ 협상하는걸로
5천이상ㄱㄱ하시죠
마음같아선 업계평균받아도 정말 행복할 것 같은데 이러면 후회한다고 주변에서 말려서요ㅠㅠ
6은 어떠세요 네카라 친구들 그정도 받던데..ㅎㅎ
저는 4천 생각하고 5천 부를거같아요
떨어질거 생각하고 확 불러서
4000천까지는 오케이 이런느낌?
이거굿
우왓.. 조언 감사합니다!!!!!
이모티콘
축하드려요!!!!
감사합니다!!!!!
축하드립니다 ~!
감사합니다!!!
축하드려요! 저도 최근에 이직하면서 같은 고민 했는데, 기존 연봉 두배 불렀는데 주더라고요 ㅋㅋㅋㅋㅋ 생각보다 요즘 프론트 개발자 귀한 거 같아요 연봉협상 화이팅입니다
축하드립니다!!! 분발해야겠어요 ㅎㅎ
두배...와...
오 휴파 드디어!! 정말 축하드립니다 🥳🥳🎉 믿고 있었어요!!
축하드립니다 🎉🎉 혹시 서류 몇개 넣으셨는지 여쭤봐도될까요?
축하드려요..!!!!
두분다 축하드립니다~~
와…축하드려요…….
축하드려요 ㅎㅎ
축하해주셔서 감사합니다ㅜㅜ !!!
축하드려요!!
신입은 보통 연봉협상 개념이 없는데 말이 안되도 일단 부르는게 좋다고 생각합니다. (생각하셨던 마지노선 밑으로만 안가게 잘 협상하시면 될듯요)
진현님 혹시 기술 스택이 어느정도 되시는지 여쭤봐도 될까요? 취업준비중인데 궁금합니다..!
저.. 90개정도 넣어서 서류(코테/과제포함) 30개 면접은 10곳 조금 넘게 본 것 같아요..
https://better-chamomile-2c5.notion.site/bae03824f7cd4ad492276db9a0c39365 제 이력서입니당..!
자세하게 알려주셔서 감사합니다! 연봉현상 좋은 결과 있으시길!!
와우 ㄷ
감사합니다!!!
엇..비밀번호가 들어있어서 삭제하려고 했는데 안되는군여...ㅠㅠ
진현님 깃헙 팔로우 해도 되나요?
ㅎㅎㅎ
앗 넵!!ㅎㅎㅎㅎ
진현님 너무 축하드립니다~~
감사합니다(__)!!!
고생하신만큼 보상 받은신거 같아요!! 앞으로 더 화이팅입니다
진현님 ㅎㅎ 혹시 하나만 오지랖을 부리자면…… 이력서가 가운데정렬이 안되어있어서 가운데 정렬 되면 더 좋을 것같습니당
의도하신거라면 죄송합니다
같은 부트캠프 후배님이라 더 반갑네요 ㅎㅎ
노션사이트라서 중앙정렬하기가 여려울거에요
고생하셨습니다
워니님 이력서 템플릿인데, 워니님 이력서 들어가서 보시면 모니터가 와이드라도 가운데 정렬?(Max-width가 있는 느낌?)이 되어있거든용… 그 부분을 그냥 말씀드린 것입니당 ㅋㅋㅋ 사소한거니까 뭐 보강하셔도 되고 안하셔도 상관없습니당 ㅋㅋㅋ
워니님 커피챗 해보고싶은분중 한분..
노션에서 전체 width 로 할지 좁은 width 로 할지 설정하는게 있는데, 그걸 설정하신것뿐일거에요. 노션에서 css styling 할려면 아예 템플릿 자체를 사거나 oopy 등의 써드파티를 사용해야할겁니다
헛..감사합니다 제가 이력서 제출할땐 a3로 출력해서 뽑아서 가운데 정렬이 안되어있는줄 몰랐습니다ㅠㅠ
이력서 잘봤습니다 ㅎㅎㅎ
앗 아닙니다 ㅎㅎ 가운데 정렬의 의미는 아니었고 동현님께서 말씀하신 width설정의 차이였던 것같습니당 ㅎㅎㅎ 너무너무 사소한거니까…무시하셔도 됩니당!
와 축하드립니다🎉🎉🎉🎉🎉
와!! 정말 축하드려요!!!
코드스테이츠 부트캠프 이번에 프론트엔드 과정으로 들어갈예정인 사람인데 커리큘럼이나 안에서 하는 과정들이 어떠셨나요????
국비합격하셨나요?
공고에 어느정도 급으로 맞춰주겠다고 했으니 생각하신 만큼 자신있게 얘기하셔도 될 것 같아요~
아직 합격은 아니긴한데 국비지원이 맞긴해요
와 축하드립니다!!
축하드려요!!!!
코드스테이츠를 믿지 마세요..
제 주변 수료하신분들 중에선 추천한다고 하신분들은 안계셨어요..ㅠㅠ..
국비면 뭐..
코드스테이츠 국비에요? 최근에 바뀐 건가?
이번년부터 국비로바꼈더라구요
그래도 저는 팀프로젝트, 파이널 프로젝트 는 재미있었어요!! 들인 돈에 비하면 그 두개만 남았지만,
코스마다 달라요
?
질문입니다 ㅎㅎ
정말 축하드립니다!! 곧 취준인데 너무나 부럽고 두렵네요 ㅠㅠ 축하드립니다!
축하드려요!!
축하해주셔서 감사합니다ㅠㅠㅠㅠ
ㅠㅠ 어떤점이 별로였다고 하던가요… 커리큘럼 자체는 괜찮은것 같던데
음.. 제가 느꼇을때는 개개인에 대한 케어가 전혀 없고.. 실시간 세션에서 강의 해주시는 강사들도 수료하신 분들이여서 전혀 개발에대한 지식이 있다고 볼 수 없는 상태이고.. 네 그랬습니다.. 한번은 코드스테이츠내 문서들이 너무 성의가 없어서 제가 문의해서 따졋더니 참..네.. 그랬습니다..
그래도 될놈될이긴해요 코드스테이츠 나와도 잘 하는 애들은 잘되긴합니다
근데 저도 지인들 몇명이 후회한다고 하는 경우를 많이 보긴했어요
맞습니당..!! 어디든 자기 하기 나름인 것 같아요
코드스테이츠 내 컨텐츠 보여드리면 다들 이게 850만원짜리가 맞냐? 라는 반문을 하십니다..
아무튼.. 저는 개인적으로는 비추천드려요!
위윈 제도?? 자체가 문제도 많다 그러고 다 그런건 아니겠지만 적어도 제 주변에서는 상대적으로 수료 후에 만날때마다 욕하는 분들이 대다수이셔요
네 빡칩니다 ㅎㅎ
17프로씩 2년동안 내야합니다
이정도 열심히 해야 합격을 하는군요 분발 해야겠네요
저정도는해야 네카라급가는구나라는 생각이드네요
국비지원이라 돈이 아깝진 않을것같고 배운다는 마음가짐으로 열심히 해야겠습니다 ..ㅜㅜ 국비되는데는 저기만한데가 없는것 같아성
국비가 된다면 저만한 선택지는 없을 것 같아요..
그래도 국비지원이 되는곳을 찾으신다면 커리큘럼으로만 봤을 때 요즘 생기는 기관들이 기존에 있던 컴퓨터학원에서 실력없는 강사들 데려와서 책만 읽어주는 곳보다는 낫습니다. (남궁성님 학원 제외)
데브코스 좋아용
답변 감사드립니다!!! 선배님들
22... 국비 경험자인데 국비는 참 아쉬운점이 많아요
저는 코드스테이츠 추천은 안하지만 배울 것은 많다고 생각합니다. 비전공자에 대학도 안나왔지만 코드스테이츠에서 배운 지식으로 취업까지 했고, 현재 계속해서 배우고 있습니다. 안에서 동기분들과 많이 토론하시면서 공부하시면 분명 좋은 결과 있으실거에요.
될놈될이 맞아요 ㅎㅎ..
코드스테이츠 윈윈으로 한 사람 중에 매달 돈 감사한 마음으로 보내는 사람이 있을까요 ㅋㅋㅋㅋ 피같은 내 월급에서 심지어 세전으로 성과급까지 떼가는데 말이죠.
커리큘럼 퀄리티나 케어해주는거에 비해 2년에 (최대) 1500만원인데 이런데는 전세계 어디서도 없을거같네요 ㅋㅋ
오우… 매월 급여명세서라도 확인하나요..?
몇개월과정이죠..?
6개월 과정이고요 매월 급여명세서는 확인안하지만 연말에 소득급여명세서 받아가요~
6개월아닌ㄴ가요??
건보료 확인증이랑 ㅋㅋ
와 그렇군요.. ㄷㄷ
우와!! 진현님 축하드립니다!!!!!!!
이번에 프론트엔드는 국비로 아에바뀐거같던데 좋은거겠죠..?
약속은 약속이니 내는거지만 연협이라도 잘되면 다른의미로 눈물납니다ㅋㅋㅋ 하루빨리 끝나길!!
국비면 괜찮지만 아니면 다른게 더 좋을것 같아여
저같은경우 사실 금액이부족해서 유료부트캠프는 생각도못했는데 국비로 바껴서 무료면 확실히 좋은거같긴하네요..
@진현 혹시 코테는 어느 수준까지 준비하셨나요?
다른 국비보단 그대로 분위기 낫지 않을까(?)하는 기대는 있을 듯 해요. 국비에서 반 분위기 잘못 만나면 피눈물나요.....
기업들이 내준 코테를 풀어보니 너무 어렵더라구요..그래서 따로 준비안하고 코테 안보는 곳만 넣었습니다!!
과제랑 포폴 전형
그런 느낌인가요?
넵!!!
저도 그런 수순을 생각중이라
진현님 혹시 기술면접 질문리스트는 따로 정리하셨나요? 아니면 어디서 많이 참고하셨나요 ?
벨로그에 있는 면접질문 글들 많이 참고했습니다.. 그리고 면접에서 받았던 질문들을 따로 정리했는데 결국엔 다들 같은 것을 물어보시더라구요!! 항상 받았던 질문중에 기억나는건 1. 리액트/브라우저 렌더링 과정 2. 라이프사이클이 뭔지 3. 렛바콘스트차이 4. 호이스팅이 무엇인지? 요것들은 꼭 물어보셨던 것 같아요
단골질문들이군용
아 감사합니다 ㅎ클로져도 많이 물어보죠?!
넵!! 클로저/스코프 , https http차이, 세션, oauth 프로세스 들도 많이 물어보셨어요
핵어렵습니다 요즘 코테
실행컨텍스트쪽은 개발하면서 알면 계속 이용가능해서
신입 때 스타트업 위주로 면접 봤는데, 몇 군데 보다보면 면접 질문이 비슷비슷해서 최대한 많이 지원해서 경험치 쌓는게 중요한 것 같아요
헉 그정돈가요
임원 면접 준비중인데 성격의 단점부분에서 막혔습니다…. 단점같지도 않은 단점을 적거나 뻔한걸 적으면 안되고 솔직히 말해야하는 것을 좋아한다고 해서 솔직한 저의 단점을 의견 관철 능력이 떨어진다 로 말을 하려고 생각중입니다. 의사소통이 강조되는 프엔 직무에서 이 단점을 말하는것이 치명적일수도 있을 것 같은데 조언 주실 수 있으실까요? 다른 분들은 단점 어떤거 말하셨는지도 궁금합니다
처음 취업할 때는 대충 string, array 메서드로 잘 조작해서 풀면 어느 정도 풀리는 문제들이 많았는데 최근에 이직 준비하면서는 bfs, dfs 활용은 기본으로 하나씩 나오는 것 같구요, dp로 풀어야하는 문제들도 나오고 있구요. 단순히 맞고 틀리고의 문제만이 아니라 효율성 점수를 따로 매기는 기업들도 많아졌어요. 최근에 3문제 중에 3문제 다 풀었는데 효율성 점수에서 fail이 많았던 적이 있었는데 결국 탈락이었습니다 ㅋㅋㅋ
허허.. 경력직 이직이면 코테는 무조건 자바스크립트로 봐야하나요?
회바회이긴하지만
단점 = 나쁜 점 이라고 생각하지 말아보세요. 함께할때 미리 알아두면 좋은 점. 그래서 이렇게 받아줬으면 좋겠다거나 이런식으로 케어를 받는 다거나 이런 환경에서 더 잘하고 못하고 이런식으로 좀 생각해보시면 좀 편할수 있습니다
그런 회사가 늘어나는걸로 알고있습니다
단점은 진짜로 단점을 말하라는 얘기가 아닙니다. 적절한 예인지는 모르겠지만 '저는 너무 일만 많이하는 것 같아요' 처럼 관점에 따라서 장점으로도 단점으로도 보일 수 있는 것 같은 걸 말하시는게 좋아요
단점 자체보다는 단점을 극복하려는 방법이나 노력 같은 것도 같이 말씀하시면 좋을 것 같아요 제 경우에는 덜렁대는 걸 말했는데 (메일 첨부파일 빼먹는다거나...ㅋㅋ) 체크리스트를 만드는 습관을 들였다 요런 식으로 풀었어요
굳이 말하고 싶지 않는 단점은 적지 마세요~
저는 사실 퍼블리셔인데 혹시 인터렉션 구현 자주 하시는 분 계신가요? 원래 간단한 스크롤 효과같은 건 aos로 처리하다가 복잡한 애니메이션이 필요해져서 gsap의 scrollTrigger를 같이 사용하기 시작했는데 aos와 gsap가 병행사용이 안되네요ㅜㅜ gsap를 aos처럼 쓰고싶은데 혹시 이렇게 만들어 쓰기도 하시는지 궁금합니다..ㅎㅎ AOS :: https://michalsnik.github.io/aos/ gsap(scrollTrigger) :: https://greensock.com/docs/v3/Plugins/ScrollTrigger
아뇨 파이썬이 편하시면 파이썬으로 하시고 cpp가 편하시면 cpp로 하시면 됩니다. 근데 자스 개발자가 굳이 저걸 코테를 위해서 배울 필요까지 있을까는 의문이에요
저 알고리즘 딥해지길래 그냥 자바로 봤어요!
코테.. 저도 요즘 개발공부보다 코테 준비하고 있는데 괜찮은 교육과정이나 회사 지원하려면 전부 코테 보더라고요.. 또 이런 알고리즘이 기본적으로 필요한 지식이라고들 하니 안할 수도 없네요 ㅠㅠ
조언해주셔서 감사합니다!
혹시 amplify할때 iam권한 뭐뭐필요한지 아시는분 있나요
정말 죄송한데 이거에 대한 구현을 현재못하고있어서... 리액트 프로젝트에서 styled-components 사용중입니다
사진
어핏님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 그니님 반갑습니다 :)
이모티콘
노이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 노이님~~ 반갑습니다 :)
안녕하세요 노이입니다~
네~ 어서오세요 반갑습니다~
grid-template-areas를 이용해 보시거나 grid-column-start, end 로 시도해보시면 될거같아요
그니님 노이님~~ 어서오세요!! 여기는 프론트엔드나 개발을 하면서 궁금한 얘기들 취준이나 커리어 고민들 뭐든 함께 이야기하고 또 답하는 공간입니다
하고 싶은 이야기 궁금한 이야기 뭐든 좋으니 편안하게 글 남겨주세요~~
이게 제가 카드 컴포넌트를 map으로 7장 받아와서 2/3/2로 배치하려고하는데 그렇게 진행해도될까요??
사진 2장
그냥 css입니다 제가 스타일드 컴포넌트를 몰라서.. 참고하세요!!
앗 이렇게 친절히 예시까지... 감사합니다ㅜㅜㅜㅜ
아 2/3/2네요 그러면 숫자만 바꿔주시면 돼요!!
안녕하세요 혹시 vue2에서 customElements.define() 사용해보신 분 계실까요? custom Element를 가져오기 위해 vue2 백엔드 서버가 꼭 필요한지 궁금합니다! 아니라면 구현한 커스텀 엘리먼트를 프론트 서버만 이용하여 가져오는 방법이 있을까요?
웹 기반 xr 개발이면 리액트가 아닌 xr관련 라이브러리 등을 사용하여 개발하는건가요?
비옷입은 튜브님이 나갔습니다.
선배님들께 조언을 구해봅니다... 저희 프로젝트가 사용자 모바일 웹 / 사용자 웹 / 관리자 웹 3개가 필요합니다. 보통 이런경우에는 하나의 프로젝트로 구성을 하는지 아니면 별도로 각각 구성을 하시는지 궁금합니다.
어떤 프로젝트인가요? 커질 가능성이 있다면 혹은 장기적으로 가져가야하는 프로젝트라면 적어도 관리자단은 분리하는게 좋다고 생각합니다.
모바일은 적응형(PC 뷰포트와 디자인뿐만 아니라 노출할 내용도 많이 다른 경우)이 아니라면 반응형으로 같이 하시고 관리자단을 분리해서 2개의 프로젝트로 구성하시는 게 좋을 것 같아요!
B2B 기업용 서비스입니다. 개발 기간 1~2년 최소 5년~10년 이상 유지보수 할 것 같습니다. 그렇군요.. !!
감사합니다. 조금 더 지엽적인 부분일 수 있는데.. 위 프로젝트에 스토리북을 도입해보고자 하는데요. 2개의 클라이언트 단에서 1개의 스토리북을 바라 보는 것이 가능할까요.?
모노레포로 구성하고, 스택 버전만 잘맞추면 충분히가능합니다!!
모바일이랑 데탑웹은 반응형으로 하면 안되는건가요/??
모바일과 데탑의 UX가 다른 경우가 많아서 대부분 적응형으로 가는 것 같아요. 최근 진행한 프로젝트 중 데탑과 모바일을 반응형으로 묶어서 간 적은 없는 것 같네요. 반응형은 폰이랑 패드 정도 선에서만 사용한 것 같아요
너무 다르면 어쩔수 없죠 ㅠㅠ
젤리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 젤리님~~ 반갑습니다 :)
안녕하세요 ! 벨로그 글 보다가 찾아 들어왔습니다 ◡̈
와!!! 그러시군요 너무너무 감사합니다 :)
여기는 프론트엔드에 대해서 궁금한 내용들을 듣고 또 대답을 해주려고 만든 공간입니다.
언제든 편하게 글 남겨주시면 간단한 것은 답변 드리고 호흡이 길만한 내용들을 블로그로 작성을 하고 있어요
지금은 사람들이 많이 모여주셔서 서로 서로 묻고 답하면서 함께 성장하고 있는 곳이 되었습니다. :)
네 참고할게요 ! 저도 다른분들께 도움을 드릴 수 있으면 좋겠네요 ㅎㅎㅎ
네! 감사합니다. 내가 아는 거다 싶으면 답변 달아주시고 궁금한게 생기면 언제든 글 남겨주세요~~
네 ~~
이모티콘
보통 스크럼회의는 어떻게 진행되나요?
어제 한 일의 결과와 오늘 할 일을 간단하게 공유하고, 프로젝트 이슈와 새롭게 알게된 프론트 기술 공유, 각자의 컨디션 공유로 팀규모에 따라 다르겠지만, 약 20분 정도 합니다.
백엔드 개발자분 여력이 안돼서,,, 이번에 어드민 관련 api 들은 노드로 구축을 할 예정입니다. 하나의 테이블을 유저들이 사용하는 스프링부트와 어드민 서버 이렇게 두개가 보게되는데 미리 고려해야할 사항들이 있을까요?
어떤 프레임워크를 쓰는 것 보다는 태이블 설계가 고민이 될 것 같습니다. 유저 권한, 역활, 계정 설정 등에 따라 메뉴, 컨텐츠 표시, 테이블 백업 및 롤백 시나리오 등이 고려 될 것 같아요.
시스템 환경 설정에 따른 ci/cd도 고민이 되겠네요.
다들 디자이너분과 협업하실 때 피드백은 어떤 방식으로 하고 계신가요? 저희 회사는 피그마로 디자인 받고, 궁금한건 댓글을 통해 해결하고 구현이 완료된 후 피드백(수정사항)은 pptx 파일로 받아서 하고 있어요. 다른 분들은 어떤식으로 하시는지 궁금합니다!
피그마로 디자인 리소스 받고 그 안에 코멘트 기능으로 주의사항과 수정사항 받고 있습니다.
아 감사합니다! ㅎㅎ 두 가지만 질문드려도 될까요? 1. 코멘트에서 그 둘을 구분짓는 방법은 없을까요? 2. 피그마에서 모두 해결하시면 불편한건 없으셨나요? 이 두 가지가 궁금합니다!
저희 회사는 기능 설명이나 애니메이션이 필요할 경우에도 코멘트를 써서 피드백까지 코멘트로 하면 뭔가 복잡해질 수도 있겠단 생각이 들어서요..!
1번은 우선 코멘트 목록에서 미리보기 편하게 헤드에 라벨링을 달아서 구별하고 있고, 완료된 사항들은 확인이 완료되면 완료처리로 없애버립니다. 2번은 아무래도 코멘트 상으로만 전달하기에는 문맥이나 의도파악이 어려운 경우들도 많고 코멘트가 쌓여서 파악이 힘든 경우도 있어서 지라나 깃헙 이슈로 따로 관리하고 있습니다.
오..그렇군요 정말 감사합니다!! 😆 정말 좋은 방법같은데 이제 어떻게 설득하고 얘기를 꺼내야 할지가 문제네요..ㅋㅋㅋ 감사합니다 j님!
저희는 디자이너분이 제안하셨어요 부터!
우선은 깃이나 이런 이슈 관리는 개발자들은 보기 편하지만 디자인상 리소스 수정은 해당 페이지내 어떤 범위인지 확인하고 들어가는게 편하니까
요새 코멘트도 범위 설정해서 남길 수 있더라구요!
사진
헐..진짜네요
감사합니다 j님!!
아닙니다 ㅎㅎㅎ
도움이 되었다니 다행이네요 ㅠㅠ
도움이 완전 됐습니다!! ㅎㅎ 생각못한 부분이 많았어요!! 지금 벌써 동기분이랑 얘기 해보고 너무 좋다고 하셔서 디자이너분 설득 해보려구요!
안녕하세요. chrome devtool performance로 성능 측정중 이해가 잘 안되는 부분이 있어서 질문드립니다. 아래 사진을 보면 web vitals에 측정된 FCP(파란색 화살표)와 Timings의 FCP(빨간색 화살표)의 시간 측정이 다르게 된것을 볼 수 있는데요. 1644ms에는 이미 페이지가 다 로딩되어서.. 어느것으로 봐야 맞는지가 고민이 됩니다. 구글 레퍼런스를 보면 파란색, 빨간색 화살표의 시간이 동일해서 차이가 많이나는 이유를 잘 모르겠습니다. 왜 이런 차이가 발생할까요? ㅠㅜ
사진
j님 디자이너분도 긍정적으로 생각해주셔서 다음 프로젝트 때 피그마로 다 하기로 결정했습니다! 좋은 방향을 알려주셔서 감사합니다~!!
아닙니다 다 빈츠님이 어느정도 큰 방향성을 잘 잡고 계셔서 그런걸요!
리액트 쿼리를 공부하려고 하는데 추천하시는 사이트 있을까요? 공식문서는 영어로 되어있고 필수로 공부해야 되는 부분을 모르겠어서요. 벨로 퍼트님 같은 분을 찾아봐도 모르겠네요 ㅜㅜ
https://react-query.tanstack.com/overview https://tkdodo.eu/blog/practical-react-query 이거 두개가 진짜 알찬데.. 한글로 돼 있는 좋은 문서가 있는지는 저도 잘 모르겠네요ㅜㅜ
공식문서 번역본 찾아보면 있을 거 같기도 하구요
최대한 공식문서 기준으로 보시는걸 추천드립니다
혹시 다들 css공부하실때 mdn문서많이보시나요?
w3cschool도있던데 mdn이랑 w3cschool둘다 내용은 별차이없나요??
근데 진짜 공식문서 잘 돼 있고 거를 내용이 하나도 없어요
그냥 한번해본다 라는 느낌으로
시작해보시는거면
쉬운내용찾아서 해보시는것도 개인적으로 좋다는 생각이긴합니당
예전에 리덕스 영문공식문서로 했다가 너무 힘들었어서 ㅠ 자료가 저 2뿐이라면 한번 도전해보겠습니다 😂 감사합니다 !
정 힘드시면 아마 벨로그 잘 찾아보시면 공부 차원에서 공식문서 한글로 번역한 분들 블로그 있을 거라 그거 보셔도 될 거 같긴 해요
근본적인 해결책은 영어를 견뎌내는거겠지만
https://hyesech.postype.com/post/10986706 이런거..? 있긴 하네요!
오오 ㅎㅎ 친절하게 알려주셔서 감사합니다 ㅋㅋ 한번 도전해보겠습니다 후덜덜 ㅋㅋ
덕분에 좋은 방법을 제시해서 시도할 수 있었어요! 감사합니다 😍
인녕하세요. 이 방안에 현업에서 vue 사용하시는분이 많으실까 싶은데요, 질문이 있어서요! 렌더링성능을 조금이라도 개선하고 싶은데, 첫 렌더링 이후에 값이 변하지않는 곳에 v-once 태그 이용하려고 하는데 어디어디에 적용하는게 좋을지 고민이됩니다.
예를들어.. index.html 파일이 있다고 가정하에 <h1>이곳은 제목입니다.</h1> <span> {{ message }} </span> 요렇게 있다고치면. 제목부분에 적용하면 될 것 같은데 컴포넌트가 한두개가 아니니까, 각컴포넌트마다 다 찾아가서 제목부분에 v-once를 걸어줘야할지..? 그런게 좀 고민이되네요
모카님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 ~~ 모카님~~ 반갑습니다 :
:)
안녕하세요~~ 많이 배우겠습니다^^
환영합니다~ 배울때는 뭘 모르고 있는지 아는게 필요하고 그럴때는 물어보는게 최고지요. ㅋ 많이 질문 부탁드려요 :)
안녕하세요! 질문이 있는데요~ 알림이 업데이트가 된 것을 어떻게 확인하고 계신가요? 소켓통신을 이용하고 있지 않아 다른 페이지로 이동시마다 알림을 조회하려고 하는데요 혹시 더 좋은방법이 있을까요?
모든 페이지 이동시마다 알림을 조회하는건 낭비같아서요..
사진
알림이 업데이트 되었다는 표시만 나오면 될 것 같은데.. 어떤 방법이 좋은지 모르겠네요..
인터벌 리페칭을 하는게 좋겠네요
페이지 이동시마다 확인한다면 알림의 목적을 다하지는 못하는게 아닐까 싶어요
리액트쿼리에 리패칭 기능 있던거같은데
풀링을 쓰거나
네이버 같은 경우에도 아무 이유없이 안터벌로 페이지를 전체 새로고침시키거든요
자칫잘못하면 잡담으로 끝날수도 있을거같은데 꼭 지켜야할 규칙이 있을까용?
인터벌 리페칭이라면 일정 시간마다 재요청을 한다는 것일까요?
넵!
Nuxt와 vuex를 사용하고 있습니다 .. ㅠ
Nuxt 사용하시면 미들웨어 조합해서 가능하겠네요!
push notification 활용할 것 같네요
웹에서는 푸시알림을 사용하지 않고있어서요..
넵 감사합니다! 미들웨어에서 1분마다 호출하면 되겠네요!
이야기가 세지 않게, 할말만 딱 하고 넘어간다.
사진
그래서 프랭크 자세로 스크럼 하는 짤도 생겼죠...
ㅋㅋㅋㅋㅋㅋㅋㅋ
근데, 전 잡담도 나름 필요하다고 생각해서.
팀원들/파트원들끼리 어느정도 친해져야 일도 더 잘되기 나름이라고 생각하거든요 ㅋ
스크럼에서 잡담 하고 안하고 둘다 겪어 봤는데 장단점이 있는 거 같았어요
오랜만에 글을 작성했습니다.. 정확히 덧붙였는데요.
useEffect와 useLayoutEffect에 대해 비교글을 적다가 코드단에선 어떤 차이점이 있는가 궁금해서서 react 코드를 따라가며 비교해봤습니다. 한번씩 읽어보시고 부족한 부분이 있으면 일침 부탁드립니다.
ㅋㅋ 확인 감사합니다.
평소에 쓰시는 글 수준이 훌륭하시네요
결론에 오타 하나 있습니다!
Goody님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
Goody님이 나갔습니다.
저희는 스크럼 15분 정도 이루 잡담으로 1시간 넘게 떠들어요 ㅋ
사진
이건 재택이라서 가능한것 같기도 하구요~ 음.. 집중해서 떠든다기보다는 뭔가 모각코? 처럼 각자 일을 하는데 이어폰만 끼고 있다가 점심식사 오면 알아서 빠지고 있어요
안녕하세요 ! 궁금한 점이 있습니다 ! 전역 스토어를 쓰는 이유가 무엇일까요..? (redux, mobx 등등..) 예를들어 인풋창이 500개 정도 될 때, 하나의 객체에서 관리하면 500개 중에 하나의 값이 바뀔 때마다 새로쓰고 지워 성능에.. 그렇게 좋아 보이지 않아서요..! 오히려 컴포넌트 마다 각각 상태를 가지고 있으면 더 좋지 않을까? 생각이 들었습니다.. 전역 스토어를 쓰면 관리하는 측면에선 더 좋아보이긴 합니다.. 혹시 여기에 대해 고민 해보신 분 있으시면 의견 주시면 감사하겠습니다 !
전역으로 사용할것만 전역으로 써야죠.. 모든 state를 redux에 넣는건 아닙니당
말씀하신거에서 살펴볼 관점은 두가지가 있는데, 1. 컴포넌트별로 각자의 상태를 가지고 있어야 되는 것은 전역 상태로 가지고 있을 필요가 없습니다. 말씀하신 것처럼 각각의 상태를 가지고 있는게 낫지요. 컴포넌트별로 공통의 상태를 공유하고 있어야 되는 것. 즉, 회원ID나 로그인 정보 같은 것들은 각각의 컴포넌트별로 가지고 있는게 아니라 여러 컴포넌트에서 같이 사용을 해야 좀더 낫겠죠. 2. 여러 컴포넌트가 전역스토어를 참고한다고 하여도, 자신과 상관없는 스토어가 바뀌면 새로쓰고 지워 성능에... 이런게 발생하지 않도록. 즉, 리렌더링 되지 않도록 해주는게 좋습니다. 전역상태 - 일기장 전역상태 - 가계부 두개의 스토어가 있는데(mobx는 별개의 스토어가 있지만, redux는 하나의 root 스토어에 있으니까 그냥 하나에 여러 스토어가 있다고 가정하겠습니다) 일기장 컴포넌트에서는 가계부의 상태가 바뀌었을 때, 리렌더링이 되면 안됩니다. 가계부 컴포넌트 역시 일기장의 상태가 바뀌었을 때, 리렌더링이 되면 안되구요. 그래서 이건 스토어와 컴포넌트를 얼마나 잘 잘라서 조립해두냐도 중요합니다.
음.. 그렇군요..!
많은 도움 되었습니다 !! 감사합니다 !!
요즘은 그런 전역 상태 중에서도 성격에 따라서 react-query나 swr로 대체하기도 합니다. ㅋ 그런것도 같이 찾아보세요~!
넵넵 알겠습니다 !! 감사해요 !!
리덕스처럼 단일 스토어인 경우에, react-redux 같은 라이브러리에서 useSelector 에서 반환하는 값이 변경될 때에만 컴포넌트를 리렌더링하도록 최적화가 되어 있기 때문에 너무 리렌더링 이슈에 대해서 고민 안하셔도 됩니다 ㅎㅎ (useSelector를 잘 써야하긴 하지만요..)
맞습네다
리덕스는 따로 최적화를 하는군요…!
네네 그래도 용도에 맞게 쓰셔야죠
호뚜기님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 반가워요!
안녕하세요~ 호뚜기님~~ 반갑습니다 :)
네~ 어서오세요!
프론트엔드와 개발에 대해서 얘기하고 싶어서 만든 공간입니다~ 궁금한게 있거나 하고 싶은 대화주제가 있다면 얼마든지 편하게 글 남겨주세요 :)
저희는 git flow를 사용하고 있는데요, 저희팀에서 2주마다 배포를 해요. 가끔씩 QA일정이 밀려서 개발을 해도 다음 배포때 배포가 나가지 못하는 경우가 있는데요, 그러면 저희는 해당 feature 브랜치는 develop 으로 머지를 안하고 있어요. 그랬더니 시간이 지날수록 develop이랑 해당 feature 브랜치 사이에 갭이 너무 커져서 나중에 머지하려고 하면 코드 충돌도 많고 그래서 어떻게 좀 해보자 라고 얘기를 하고 있는데, 다들 이런 경험이 있으신지 궁금합니다..!
네, 안내 감사합니다! 😄
https://twitter.com/i/status/1514122208712478720 웃겨서 공유해요 ㅋㅋㅋㅋ 😂
혹시 현재 리액트 18에는 리액트 쿼리에 에러나는 상황이 맞을까요? 4.0 베타 버전(?) 나오기 전까지 리액트 쿼리 못쓰는건지 궁금합니다..
저도 typescript + react18 + react query에서 에러나더라구요...
엇 무슨에러 나나요
진행중이라 궁금합니다..
아 저는 reactDom.createRoot.render
사용하고 잇었는데
아아 저도 그래서 17로 내렸습니다...
뭔지알겠네요 ㅠ
QueryClientProvider에서 client쪽이였나 없다고 나왔었나
여튼 에러가 있었어쇼
js로 우회해서 해결했었어요
기억이 명확히 안나네요 ㅜㅜ
그럼 feature로 배포 나가는건가용?
아뇨 배포일이 되면 develop 에서 release 브랜치를 만들어서 배포하고 있어요. 그래서 배포일 기준 develop 에 머지가 안되어 있으면 해당 기능은 배포가 안나가는 구조입니다
제가 팀 이동할 때, 그 팀의 전신팀? 에서 그렇게 사용하고 있었어서, 바꿨네요. 전통적인 git flow 대신 커스터마이징 해서 사용하고 있습니다. 이거 관련해서도 여러명이랑 이야기 나눴었는데, 팀마다의 상황에 따라 / 선호에 따라 다르게 정해질 수 있을 것 같네요.
이거 관련해서 외부글도 따로 작성해놓으면 좋을텐데 귀차니즘...
그런 점에서 테오님은 대단하신듯 ㅜ
어떤 느낌인지 간단하게 말씀해주실수 있을까요..?
저희는 develop은 개발 후 배포 전 테스트 용으로 사용해서 개발서버 배포는 자유롭고, 그 안에서 qa가 완료된걸 production으로 올려서 배포하고있습니다.
팀 규모가 얼마나 되나요? 그러니까 실제로 git에 push하는 멤버수?
우선은 해당 레포를 사용하시는 분들이 자주 리베이스 하고 동기화 하는 습관이 들어야 편해요ㅜㅜ
간단히 풀면, develop을 따로 두지 않고, master를 기반으로 deploy 브랜치를 생성해서, deploy/20220413, deploy/20220420 같은 배포 날짜 기준으로 브랜치를 생성합니다. 해당 날짜에 나가는거에 대해서는 해당 deploy 브랜치에서 feature 브랜치 따서 작업하고, PR 날려서, 코드리뷰 후 해당 deploy 브랜치에 머지하고, QA도 해당 deploy 브랜치에서 나가게 합니다. QA까지 완료되면, deploy/20220413 브랜치로 운영에 배포를 하고, master로 합쳐줍니다. 그러면 이 시점에 deploy/20220420 브랜치는 예전 master에서 땄을 테니까 최신화가 안되어 있을테니(0413꺼의 코드가 반영되지 않았을테니) master를 기준으로 rebase를 시켜줍니다. (이 때, git rebase master -r 옵션을 붙여주어야, 기존의 코드리뷰 했던 것들이 그대로 살아있게 되고, -r 안붙이면 일렬로 주루룩 붙어서 대참사가...) 이런식으로 쭉 하고 있어요. 근데, 가끔 deploy/20220413, deploy/20220420 브랜치 같이 날짜가 아니라, 배포 예정일이 명확치 않을 수 있으면, deploy/동동동, deploy/댕댕댕 이런식으로 따로 만들어두고 각각의 deploy에 PR을 통해서 코드리뷰 후 머지 한 다음, 먼저 나가기로 결정되는게 생기면 그 deploy 브랜치에서 최종 QA 진행하고, 배포 합니다. 이렇게 하면, 두 deploy 브랜치의 순서가 바뀌어도 꼬일게 없지요. 단, 한 deploy 브랜치에서 여러 커밋 & PR들이 있을텐데, 특정 기능에 대해서는 나가지 않아야 한다. 라고 하면, 그 기능에 대한 PR이 있을거니, 그 PR을 revert 커밋 시킵니다. 나중에 다시 나갈 수 있을 때, revert한 것을 다시 revert 해서 원복하고 사용하구요.
이게 그림이 같이 있는 상태에서 들어야 더 잘 이해가 될텐데... 사내에선 그렇게 공유를 했는데, 그냥 글로만 쓰니까 잘 전달이 안 될 수도 있겠네요 ㅜ
이방법 한번 팀 내에 건의해 봐야겠어요!
안그래도 master 배포나갈때 너무 뭉텅이로 나가서 고민하고 있었는데
일단 develop에 몰아두고... 를 하면, 그 develop에 배포가 다른 것들이 있는 상황에서 분리해서 테스트를 진행할 때 골치거리긴 하더라구요.
그게 골치이긴 했어요ㅠㅠ
전통적인 git flow 상에는 develop이 무조건 있으니까, 저도 바꾸려고 할 때, develop을 master와 deploy 상에 두었는데(초안에서는) 생각해보면, 저 flow 상에는 develop이 아예 의미가 없어져서, 과감히 없앴습니다.
프론돌이님의 방법 저는 멋진거 같아요!
제가 고민하고 있었던 상황이라
저희는 버전 별로 배포가 나가고 있어서 버전별로 develop 만들어서 진행합니당
총 6명입니다!
프론돌이님 설명 감사합니다! 글만 읽어도 충분히 이해가 갔습니다! 배포 브랜치를 먼저 따두고 거기서 feature 브랜치를 만들 생각은 못했었는데 한 대 얻어맞은거 같네요 ㅎㅎ.. 좋은 방법 공유해주셔서 감사합니다!
오픈소스 활동을 명시할때 이슈 생성이나 pr을 생성한 것들도 오픈소스 활동에 명시해도 괜찮을까요?? 이력서에 오픈소스 활동을 명시할때 입니다
적어도 이슈나 PR이 일부 반영이 되어야 명시할만하다고 생각해요!
이슈는 좀 그런것 같고 pr의 경우에는 해당 pr에서 논쟁이 발생하거나 해야 한다는 뜻인거죠?? 일부 반영이라는게 어떤 것일지 궁금해서요
이력서에 적는 것은 내가 이거에 대해서 말할게 있을때 적는게 좋아요~ 이력서에 적는다 = 나에게 질문해달라니까요. 그래서 어떤 활동을 해보신거에요? +_+ 라고 했을때 대화는 될만한 경험이 있다면 reject을 당하샸더라도 적을만 하다고 생각해요
대화는 될만한 경험 => 이해가 팍 되네요 감사합니다!!
이슈도 무시못할만큼 좋은 영향력을 끼쳐서 향후 오픈 소스에 새로운 스펙에 반영될때도 있어요~
맞아요~
감사합니다 나그네님!
오픈소스는 적극성이나 개발 생태계에 관심이 있거나 사내기여 같은 것을 할만한 찐 개발자 스멜을 풍기는 거라서
그런 태도나 스토리나 본인 관심사와 열정만 드러낼수 있다면 충분히 플러스가 될거라고 생각합니다
단순 issue 제기는 쳐내고 contribute 된거와 말씀해주신대로 이야기 하고 싶은 것들만(대화하고 싶은 것들만) 남겨놔야 하지 않을까 싶네요
감사합니다!
이력서에 썼는데 사실 별 생각이 없거나 그냥 해봤다가 가장 최악인듯 해요 ㅋ
그런사례도 있으셨나요?
좋네요!
제가 말한 정도는 아니었구요 어떤 라이브러리고 어떤 내용이었는지 물어봤는데 명확치 않고 얼버무리는 대답은 들은 적이 있어서 - 버그 수정 오타 수정 같은거 했는데 리젝 당했다 정도로만 끝나버랴서 - 기대를 했는데 실망도 좀 했었어요
이력서에 쓸거라면 얘기거리는 만들어 두자 정도로 순화햐야겠습니다 워딩이 오해를 살만큼 센거 같아요 ^^;;
해야*
얘기거리는 만들어 두자 확인했습니다! ㅎㅎ 작성중인 이력서에 공을 들여볼게요 ㅎㅎ
근데 그런 경험이 있다는 것만으로도 충분히 느낌 있으실것 같아요 뺄걸 빼도 할 얘기가 있다면!!
한두개라도 0과 1은 다르지 않을까 싶어서 지푸라기라도 잡아보려고 넣는 상황인것 같아요 ㅎㅎ 떨어지면 피드백 받아가면서 이력서 수정하면 되니까 점차 좋아지리라 생각합니다!
구독을 하면 매주 FE 관련 글을 번역해 제공하는데, 언어 압박 없이 좋은 글 읽어 볼 수 있어 좋은 것 같아 공유합니다~ https://kofearticle.substack.com/
구독을 하지 않아도 글 목록에서 찾아 볼 수 있네요 ㅎㅎ
오늘 스프린트 6기 열렸습니다. 다츠님 럭키님~ 기다리고 있어요! +_+
헉 저 선정되면 따로 연락이 오는줄알고 선정 안되었는줄 알았습니다.. 지금 진행중인가요? 30분내로 빨리 들어가도 될까요?? 정말 죄송합니다
적어둔 메일로 연락을 드렸었는데 메일주소가 잘못되었을까요ㅠㅠ 언제든 오시면 환영합니다 :)
돈다발 들고 좋아하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 돈다발 들고 좋아하는 무지님~~ 반갑습니다 :)
이모티콘 안녕하세요~ 프론트엔드 주니어 개발자입니다 velog 글 보고 여기까지 왔네요 ㅎㅎ 잘 부탁드립니다~
감사합니다~ 궁금하게 생기시거나 개발 애기하고픈게 있다면 편하게 얼마든지 물어보고 글 남겨주세요 ㅎ
짧은 얘기는 바로 답변 드리고 긴 호흡이 필요한 것들은 블로그로 작성을 하고 있습니다.
네~(굿)
건배하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
권노미님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
건배하는 프로도님~ 권노미님!! 모두 모두 반갑습니다 :)
이모티콘 안녕하세요 !
안녕하세요!! 좋은 커뮤니티 만들어주셔서 감사합니다:)
고맙습니다!! :) 여기는 프론트엔드 관련 궁금한 내용들 질문하고 또 답하면서 성장하고 관련 얘기들이 하고플때 함께 하려고 만들게 되었습니다~ 많은 참여와 관심 부탁드려요 ㅎ
스프린트 6기 메일 전달했습니다. 놓치지 않길 바래요 :) 매일 9시 전후로 리뷰와 과제가 전달될 예정입니다!
과거에 redux프로젝트를 할때는 불변성관리가 중요했는데(immutable, immer 등 사용)
이후에 나온 최근 상태관리들은 어떤가요? recoil, zustand, jotai..
불변성은 여전히 적용되는 것 같아요
조금은 다른 방향의 글을 써보았습니다. 이번에는 기술 얘기는 아니지만 제가 관심을 가지고 있는 주제라 많은 관심 부탁드려요 :)
최마오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 최마오님~~ 반갑습니다 :)
안녕하세요~~~!
어서오세요~ 여기는 프론트엔드에 대해 서로 묻고 얘기하고 또 공감을 나누고 함께 성장을 하는 곳입니다. ㅎ
언제든 편하게 글 남겨 주세요 :)
오카이님이 나갔습니다.
인턴 경험조차 없는 생신입인데 회사내 유일한 첫 (그 전까지는 외주로 했었다고 하십니다) 프론트 개발자로 들어가는 건 많이 비추천 하시나요? 아니면 신입때 겪어보면 그래도 많은 도움이 될까요 안간다고 하고 다른곳 준비해야할지 이 곳에 가도 될지 너무 고민됩니다..
혼자서 어디까지 만들 수 있으신지에 따라서 달라질것 같아요
사실 역량도 능숙하고 빠르게 만들어내지 못해서도 걱정입니다..
멘탈이 강하신지도 중요한거 같습니다.. 이런 말도 안되는걸 나한테 시킨다고? 라는 생각에 멘탈이 흔들리면 너무 괴롭더라구요..
내가 보여주겠어 라는 멘탈을 보유하신다면 괜찮을거 같기도 하구요 ㅎㅎ..
맞아요. 시니어가 없더라면 최소한 동료나 백업은 꼭 요구하시길 바래요
일정 조정도 하셔야 할텐데 ..
그리고 함께 할 수 있는지 일을 오더 받는 입장인지도 좀 중요해요
저도 커리어 관련 질문드려요! 이제 1년 좀 넘었고 나이는 많이 어린데, 회사를 몇 군데 합격했는데 다들 너무 좋은 회사라 어디로 가야 할지 고민이 많이 되더라고요 어느 정도 이미 완성되었고 잘하시는 분들이 정말 많은 (프론트 50명 이상) 스타트업이랑 아주 빠르게 성장중인 유망한 (프론트 10명 정도) 스타트업 중에 며칠째 고민중인데, 알려드리는 정보가 너무 부족해서 질문이 애매한 거 같지만 조언해주시면 정말정말 감사하겠습니다..!
전자는 토ㅅ 느낌이 나네요ㅎㅎ
후자로 빠르게 성장 중이라고 하는데 파이버님이 그 성장 속에서 누리실만한게 있나요? 처우나 실력적으로요 왜냐하면 회사는 성장하는데 구성원은 그 어떤 것도 보장안되는 경우가 꽤 많아요
네 감사합니다… 일단 한번 해보고 정 죽겠으면 나와야겠습니다..혹시 백업은 git을 말씀하시는 걸까요? 제가 잘 몰라서 추가로 여쭤봅니다
엇 저가 딱 이런 케이스인데 1년까지는 딱 괜찮은것 같아요 아무도 안알려주고 물어볼곳도 없는 상황에서 혼자 문제를 해결하려고 정말 다양한 방법도 시도해봤고 자립심을 키울수 있다..인데 장기적으로 보면 별로 좋지 않은것 같아 저는 1년차를 막 넘긴 지금 시점에서 이직을 준비중입니다ㅠㅠ 근데 만약 작성자분이 동료도 많고 팀 규모가 큰 환경으로 갈 수 있는 조건이다라고 하면 저는 무조건 후자를 가라고 말씀드리고싶어요..
감사합니다!! 오퍼는 적당히 비슷했고, 실력은 두 회사 다 기술 블로그도 쓰고 내부 세미나도 하고 등등 많이 챙겨주는 거 같았어요 그래서 유일한 차이는 가서 조직에 큰 영향을 미치진 못하겠지만 프론트엔드쪽으로 좋은 체계 하에서 엄청 배우냐 / 조직에 어느 정도 영향을 미치면서 프론트엔드쪽으로도 적당히 성장하냐 이 정도일 거 같아요
안녕하세요~벨로그 보고 들어와서 눈팅만 하다기 조심스럽게 고민을 남겨봅니다. 저는 html, css 배워서 이것저것 해보고 바로 바뀌는게 좋아서 프론트엔드 쪽으로 취업하려고 이제 막 시작합니다. 자바스크립트 deep dive도 1회독 했는데 모르는게 너무 많아서 그냥 흘려보내듯 가볍게 읽었네요ㅠㅠ 아무튼 최근 자바스크립트 간단한 문제를 하나씩 풀어보려고 하는데 별찍기마저 너무 오래 걸리네요...풀고 싶은 문제나 만들어 보고 싶은 걸 구글링해서 다른 분들의 코드를 보고 살짝 바꿔보고 오류 나면 아예 복붙해서 그 코드 고민해보고...이러다가 제가 스스로 코드를 짜는 걸 아예 못할 것같아서 두려워집니다 ㅠㅠ 이런 경우에는 어떻게 공부를 해야 할까요? 지금 이 시점에서 처음부터 끝까지 못 짜는게 맞는 건가요 제가 너무 못하는 걸까요...ㅠㅠ 전문적인 질문들만 보다가 이런 질문 남기니 좀 민망하지만..ㅠ 조언 부탁드립니다...!
그리고 저는 제 코드에 대한 불안감도 많이 크고 레퍼런스를 얻을 곳이 정말 단 하나도 없었어서 (입사하자마자 저혼자 신규 프로젝트의 프론트 개발을 혼자해야하는 상황이였음) 초기에는 정말 미치는줄 알았습니다 사수는 바라지도 않고 동료라도 있으면 했는데 그 아무것도 없으니까 너무 힘들긴 했었어요...근데 이건 제가 입사 당시에 리액트로 투두리스트도 혼자 못만들었던 사람이라 많이 버거웠을수도 있긴 한데..여러모로 부담감이 생기는건 사실이더라고요 ㅠㅠ또 제 입장을 이해해주는 사람도 없으니까 저혼자 모든걸 설명하고 책임져야 할떄도 있어서 그게 많이 힘들긴해요 이런 말도 안되는걸 나한테 시킨다고? < 이런 생각이 들때가 정말 많았던..
혹시 공부를 시작하신지 얼마나 됐을까요??
자바스크립트를 시작한 건 2월입니다...! deep dive 1회독하면서 모르는게 너무 많아서 그냥 무작정 읽기만 했습니다...ㅎㅎ
사실 취업준비 극초반에 이곳에 붙어서 더 큰 규모에 갈 수 있는지 가늠조차 못해봤습니다….. 해주신 말씀들 잘 생각해보고 결정하겠습니다 감사합니다!
저도 엄청난 경력을 가지고 있는것도 아니라서 엄청난 조언을 드릴 수 있을지는 모르겠는데, 우선 저는 대학교때부터 자바스크립트를 공부해서 2년정도? 넘은 것 같아서 얘기를 드리자면… 우선 딥다이브 책은 초보자가 읽기 정말 어려운 책입니다. "기본서"라고는 하지만 정말 "딥"한 내용들을 다루기 때문에 이해가 안가는게 충분히 있을 수 있어요! html과 css를 간단하게 배우고, js를 이제 막 시작하셨다면 어려운게 당연해요! 현재 html과 css로 바뀌는 게 재미있어서 공부를 시작하셨다고 했는데 저도 처음엔 그렇게 시작헀어요! 우선에는 클론 코딩을 한번 해보시는 건 어떨까요? 자신이 좋아하는 웹 사이트나, 평소에 만들고 싶었던 것 정말 간단한거라도 그 사이트의 구조를 보면서 어떤식으로 짜야하고, 어떤식으로 구성되어있고, 이런 것들을 알 수 있어서 좋은 것 같습니다. 이렇게 클론 코딩을 하다보면 기본적인 js로는 효율적으로 코딩하기가 어렵다는 걸 느끼시게 될텐데 그러다보면 자연스럽게 리액트나, 뷰나 스벨트같은 라이브러리, 프레임워크에 한번 공부를 해보세요! 그리고 처음부터 끝까지 못짠다고 하셨는데 처음엔 누구나 그렇다고 생각합니다ㅎ.. 처음부터 코드를 구조적으로 짜고, 웹을 보자마자 어떤식으로 짜야할지 생각나고, 코딩테스트 문제를 보면 어떤 알고리즘이 생각나고 그러지 않거든요.. 저는 지금도 알고리즘이 어렵다고 생각합니다. 그럴 땐 남의 코드를 참고하는것이 정말 중요한 역량중에 하나라고 생각합니다. 남의 코드를 보는 것을 두려워하지말고, 자신이 못짜는걸 두려워하지마세요. 그리고 만약에 모르는 것을 참고해서 썼다면, 블로그나 개인적인 공간에 몰랐던 것과 해결했던 방법을 글로 간단하게 남겨보세요 그럼 몰랐던 것도 하나하나 자신의 것으로 만들수있어요. 그렇게 하나하나 채워가면 됩니다. 너무 조급해하지 않아도 될 것 같아요. 그리고 알고리즘 문제를 연습하실때는 30분정도 고민을하다가 정말 생각이 안나면 다른 사람 코드를 보는 것도 좋은 방법이라고 생각합니다. 처음에는 그 알고리즘을 푸는 “길"을 모르기 때문에 아무리 고민을 해도 떠오르지 않을 수 있거든요. 그래서 다른 사람을 코드를 보면 그런 “길"을 알 수 있고, 아 이렇식으로 풀수있겠구나, 이런 방법도 있구나 라는 것을 깨달으면서 하시는게 좋을 것 같아요. 다른 사람 코드를 보는 걸 무서워하지마세요. 처음부터 그냥 참고를 하는 건 문제가 되지만, 조금의 고민과 다른 사람의 코드를 참고를 하는 건 정말 괜찮은 것 같습니다! 저도 지금 막 글을 쓰느라, 두서가 없지만 궁금한 것 있으면 또 편하게 질문주세요!
음 정보가 너무 없어서 무슨 말을 못드리겠지만 커피 타임하자고 하셔서 구성원분들과 얘기하는 시간을 가져보시고 피부로 느껴보는걸 추천합니다 ㅎㅎ 사실 개발 문화도 기술 블로그나 세미나는 열심히 하는데 까보면 내부적으로는 시궁창인 경우도 굉장히 많이 봤습니다
또 어느정도 인지도가 있는 회사면 링크드인 뒤져보시면서 그 회사에 누가 근무하는지 요즘 무슨 고민을 가지고 계신지 공부는 따로 하시는지 다 찾아보세요 ㅎㅎ
저라면 무조건 전자로 갈것 같습니다. 많이 성장할 수 있으면서 급여도 비슷한 수준이라면 ..! 조직에 영향을 미치는건 더 성장한 후에 해도 되지 않을까용
이 방엔 좋으신분들이 많은 것 같습니다…
헉 이런 긴 조언 감사드려요ㅠㅠ 물어볼 곳이 없어서 민망하지만 여기다 조언 구해봤는데 잘한것 같아요 공부하면서 깊이 새길 조언 같습니다ㅎㅎ 일단 클론코딩을 해봐야겠네요 감사합니다!!
혼자면 이직을 하려고 해도 책임감이나 압박감 때문에 쉽지 않을거고 아프거나 휴가를 쓰는 것도 눈치가 보여서 백업 = 내가 없어도 대신 할 수 있는 사람이 있는가를 확보하라는 것이었어요
누구나 처음은 있으니까요ㅎㅎㅎㅎㅎ민망하지 않아도 됩니다 그리고 이 방에는 저말고도 정말 좋은분들이 너무 많기 때문에 적극적으로 물어보는 것도 좋을 것 같아요
좋은 체계라는 것은 안 겪어보면 모르는 것이라서 처음에는 큰 곳으로 가보시는게 좋지 않을까 생각은 합니다. 작은 곳의 경험은 상대적으로 더 하기가 쉬우니까요. 물론 체계와 경험 측면에서만 한정한 이야기입니다. 저는 내가 뭘 더 할 수 있는 쪽으로 가고 싶어 해서 체계가 너무 빡센 쪽은 지양했었어요
할 수 있는만큼에서 만들고 싶은 것들을 생각해보고 만들어 보기를 바랍니다. html, css로 적당히 내 개인 이력서를 만들어 본다거나, js 이용해서 오늘 점심 뭐 먹지 랜덤 짜보는 거나... 그냥 소소하게 배운 것을 이용해서 '아 오늘 OO 배웠는데 아... 이런거는 할 수 있지 않을까?' 이렇게 생각해서 도전해보시기 바랍니다. 뭔가 퀴즈나 문제 풀이보다도 아주아주 단순해서 내가 생각하고 만든 결과물이 있으면 성장 하실 수 있습니다! 퀴즈풀이랑 만들고 싶은 걸 만드는 것은 목적성 측면에서 아주 다르게 임하게 되실거에요~
맞아요~ 혼자 한다는 막막함은 참 크죠. 잘 하는 동료가 있는 것도 중요하지만 그냥 얘기를 나눌 사람 자체가 없다는 것은 정말 힘든것 같아요
저도 좋은 체계 하에서 많이 배울 수 있는 게 좋아보여요! 사실 제가 볼 때는 프론트 10명 규모도 커보이지만... 저 같은 경우 거의 1~2명이서 프로덕트 전체 퍼블리싱을 하다보니 1년 정도는 라이브 서비스에 바로 영향을 끼칠 수 있는 게 신기했지만 나중에는 어떤 게 체계가 잡히고 좋은 방향인지에 대한 경험과 조언받을 사람이 적어서 점점 실력이 멈춰있는 게 느껴지더라구요🥲
ㅋㅋㅋㅋ 공감합니다. 회사는 그럴지 몰라도 문화는 팀바팀입니다.
엇 다들 조언 정말 감사드립니다..!! 많은 도움이 됐어요 정말 감사합니다 ㅎㅎ
주변에 프론트 개발자가 없는 경우에 제 경험상 좀 많이 힘들었던 건 사내에서 프론트에 대한 피드백을 받을 수 없던 것 같네요. 백엔드 개발자분들께는 '항상 게으름씨는 프론트 잘해주고 있으니까~' 라고 하지만 아무리봐도 이건 아니라는 게 보이는데...? 하지만 PM이나 CTO분들께는 어느 부분이 문제라고 말씀드려도 당장 필요한 이슈 수정 때문에 개선시간을 내기도 애매하고(개선방향이 어떤건지 개인적으로 조사하는 것도 별개...)... 그래서 처음엔 꼭 사수나 최소한 동료가 있는 환경이면 좋을 것 같아요!
이직도 쉽게 할 수 없고 아플때는 생각도 못해봤습니다 여러모로 가는것에 대해 다시 생각해봐야겠습니다.. 사실 혼자 프로젝트 하다가 팀 프로젝트만 해도 팀원분들께 엄청 배웠는데 회사를 저 혼자만 프론트인 곳을 가면 기술적으로 발전하는 것도 더디겠네요..
네 그리고 혹시 규모가 적어서 지금은 프론트 개발자가 없는데 회사가 커는 과정에 있어서 이후에 프론트 개발자 충원이 늘어난다면 1~2년차에 팀리딩을 해야 하는 경우도 있을 것 같아요🥲 저도 인원이 적던 상태에서 회사가 커져서 어쩌다보니 리딩을 하고 있는데 정작 제가 리딩할 실력이 안되어서 이번에 휴가 내고 공부할 예정이에요😂
커는 > 커지는
조언 감사합니다! 사실 투두 리스트나 테트리스 만들기 이런거 해보고 싶은데 백지에서 하자니 너무 막막했었거든요 조금씩 해보겠습니다 ㅎㅎ
오. 국내 기준 프론트만 50명 이상인 회사가 손에 꼽을텐데. 축하드립니다! 저도 지금 연차시면 무조건 전자 추천드립니다. 많은 분들 속에서 어꺠너머로 배우는 것도 많으실거에요
들어가는 팀에 몇명이 있는지도 보시는게 좋아요~ FE가 50명이라고 해서 들어갔더니 드래곤볼처럼 다 흩어져서 개발하고 FE가 많은 팀은 따로 있는 경우가 있어서 대규모 팀에서 기술적 교류 없이 1인 FE 하는 경우도 많으니까요
맞아요! 진짜 중요합니다!!!
3년전만해도 if.kakao 가서 카카오에서의 FE 인원은 몇명인가요 했을 때, 30명 이내 였던 것 같은데... 지금은 프론트 개발자가 많아진것 같아요 여기저기
네카라쿠배 안에서도 고립된 FE분들 꽤나 많아요~
FE가 주력인 프로젝트가 있는 반면 백이 주인데 FE가 없을수는 없는 프로젝트가 더 많죠. ㅋ
오오 넵넵 감사합니다 !!
다른 팀으로 전배 신청할 수 있는 제도가 아예 없거나 있는 척하는 회사도 있고요
있더라도 스스로 떳떳하지 못해서 좋은 회사 다니고 있음에도 전배신청못하고 1인 FE 청산하기 위해 이직하는 경우도 있답니다
저도 그런 상황이긴 했는데, 일단 FE 인원이 많으면 사내 세미나나 스터디도 참여할 기회가 생기고, 슬랙 채널 등 적어도 교류할 뭔가가 있다는게, 확실히 다릅니다. 저흰 그래도 팀 이동이 유연해서, 첫팀에서는 저도 섬나라 였는데... 그나마 위의 것들로 인해서 덜 고립되었고, 두번째 팀부터는 그 교류를 바탕으로 자주 이야기 하면서 재밌게 개발하고 있습니다. 50명인 회사 말고 10명인 회사에 가서도 1인 FE 할 수 있는 확률도 당연히 있다보니. 전자를 추천했어요 !
저도 너무너무 동감합니다. 지인도 좋은 회사 들어가서 너무 좋아했는데, 그 회사가 조직별 FE1명, 백앤드1명, 데이터 1명 막 이런식이어서 거의 신입급인데 혼자서 막중한 책임감을 져야했다는 이야기 들었어용
와 프론돌이님 재미있게 개발하고 있다니 최고네요!
나그네님
앗 혹시 1인 FE 비추천하시는 이유도 여쭤봐도 될까요??
장단점이 있겠지만, 단점이 훨씬 많지 않을까요...
질문있는데 소위 네카라쿠배라하는곳도 fe인원이많다고해도 특정파트분야에따라서 혼자 작업하는일이있을수도 있고 그런가요??
저는 방장님이 설명해주신 내용으로 비추합니다!
사실 두 회사 다 프론트 개발하고 있는 지인이 있어서
1인 FE면 코드리뷰도 여의치 않을거고, 같은 팀의 비 FE 인원이 리뷰해주는건 한계점이 있고, 같은 FE지만 다른 팀인 FE 분이 리뷰해주는것도 역시 그 서비스를 잘 모를테니 한계점도 있고
프로젝트 혹은 팀 자체가 FE는 서포터 혹은 굳이 필요하지 않은 경우라 1인인 경우가 있다보니 어려운 문제 해결을 하며 성장하기는 어렵고 재미도 덜어지고용
이게 인원이 다가아닌가보군요..
협업해가면서 으쌰으쌰 발전시켜나가야 하는데, 혼자면, 내가 산으로 가고 있는건지 바다로 가고 있는건지 나침반 없이 그냥 가기만 할 수도 있습니다.
다 가고 나서야 여기가 아닌가벼 하면 매우 현타가 오겠죠 ...ㅜㅜ?
오.. 넵넵 이해했어요 좋은 말씀 감사합니다 :)
저는 팀은 FE팀에 속해는 있지만 프로젝트는 FE 혼자 하고 있어요. ㅎ
사수, 동료와 함께 성장하는 것도 좋은데요. FE가 별로 없다는 것은 그 팀 혹은 그 프로젝트에서 FE가 그렇게 중요하지 않아서 일 수 있어요 누군가는 사내 개발팀이 만드는 공통 모듈을 만들면서 성장할 수 있고 누군가는 그 공통 모듈을 가져다 쓰는 1인 FE일 수 있으니까요
물론 모든 팀이 그런건 아닙니다 ㅎㅎ FE 뽑기가 넘 힘들어서 1년 넘게 혼자 일하시는 분들도 많아용
이거슨 팩트!
여러 팀들이 있으니, 그런 팀에 속하게 되면 그렇게 되기도 합니다. 너무도 당연한 말이 되겠지만...
네카라쿠배당토직야 등등.. 중 몇멏 회사는 지인의 사정을 알기도 하고 또 일부는 직접 겪기도 해봤는데 여전히 많습니다ㅎㅎ
fe없는이유가 뭘까용?!??!?!
fe가 없다기 보단 눈에 차는 fe가 없다 아닐까요 ㅋㅋ
FE가 돈이 안되던 시절에는 잘하는 개발자들은 FE 개발을 안했구요
사람을 못구해서, 퇴사, 외주, BE의 풀스택으로 버티기 다양해용
fe라는 개념이
이제 FE가 돈이 되기 시작하고 나서 보니 그동안 핍팍받아서 메마른 땅에 싹이 피질 못했어요. ㅠ
생긴지 몇년안된걸로 알고있어요
백엔드분들이 호기심에 프론트 판 키웠다가 수습못해서 사람 뽑아달라고 하는 경우도 있어요 ㅋㅋ
팀내에 1인인것도 기피되는 상황인데 회사내 혼자인것은 정말 힘든 길이겠군요 😵💫
ㅇㅎㅜㅜ어쩐지 백엔드는 정말 많은데 제 주변에 fe는 많이 없어서 궁금했어요!
클럽하우스 초기 개발에 클라이언트는 오로지 아이폰만 출시한 것과 비슷하게 생각해보셔도 좋아요ㅎㅎ 프론트 개발자인 제가 이런 얘기하는게 참 애매하지만 모든 사업과 서비스에 FE가 필요한건 아니거든요~
내부에서 쓰는 대시보드 같은건 애초에 백엔드 분들이 적당히 구현하시기도 했었죠. 프론트 개발자를 덜 뽑고 이런 간단한 프론트 작업은 백엔드 분들이 같이 하곤 했었는데
요샌 FE를 많이 뽑으면서 저런 것도 그냥 다 FE가 하는 경우도 있고
오히려 FE가 서버쪽 롤까지 더 가지고 오는 경우도 있고 (이게 바람직한지는 모르겠지만...)
BFF !
그 용어가 떠오르지 않고 있어서 못쓰고 있었네요 ㅋ
그거 쓰고 걷어낸 것도 최근에 있었어서 ㅋ
여기저기 FE가 부족하다보니 정말 어렵죵.. 다들 피부로 체감하실겁니다 ㅠㅠ
요건 반대로 서버가 fe롤을 더 가져오는거 아닌가요?
bff라면..
bff 를 fe가 관리하기 때문에 그렇게 표현하신게 아닐까요 ..
말씀중에 죄송한데 좋은 프론트개발자라 함은 개발자를 선호하시는지 여쭤봐도 괜찮을까요?
개발자 앞에 어떤이 빠졌습니다..
BFF를 프론트가 만들게 되면요 -_-;
https://velog.io/@teo/frontend 오 저도 면접 준비하면서 고민했었는데 테오님 블로그에 좋은 글이 있더라구요!
구 풀스택 개발자에서 서버만 안해도 괜찮은 느낌? ㅋ
아.. 아니죠. 서버는 해야죠.. 인프라만 빼고 다 할 줄 아는 개발자?
아..이거는 충격이네요
저는 네카라이런곳가면 개발적으로엄청좋고그럴줄알았는데 케바케네요..
FE는 기획,디자인,UX 랑도 일을 밀접하게 하고 백엔드하고도 밀접하게 하죠. 그래서 제품이나 서비스도 관심있고 또 기술도 잘 하는 그런 사람을 원하고 있죠
보통은 제품에 관심이 있으면 기술쪽이 좀 떨어지고 기술을 파는 사람들은 제품이나 일정 맞춰 주는거에 까다롭고 그래서
프론트엔드 기술에 관심이 많고 백엔드는 어느정도 할 줄 알면서 서비스를 하고 싶어서 기획 디자인과 잘 소통해서 결과를 만들 줄 아는 개발자를 원하는 건데
B2C나 대규모 사용자가 많은 곳이 프론트가 잘되있는거 같아요(?)
전 정부 과제 하는 si 다니는데 여기선 잡부..
사람이나 회사마다 좀 다른 것 같아요. 제품 서비스를 잘 만드는 것을 선호하는 사람과 기술력을 선호하는 개발자들
ㅋㅋㅋㅋ
원래 FE가 잡부였죠. ㅎ
국비동기들은 중에 B2C간 동기는
하는거많다더구요 흑흑
빨리탈출을..
아하 너무 막연한 질문을 했는데 답변 감사합니다!!
테오님 블로그도 되게 재밌어요 지금 보고있는데
감사합니다~! ㅎ
백오피스 프론트엔드 개발자의 장단점은 무엇이 있을까요?
커리어 관점에서 살짝 안좋을 수 있다는 생각이 좀 드는데
백오피스로 인해서 프론트엔드 기술 발전이 많이 된것들이 많아서 (컴포넌트, 리액트 쿼리, 대시보드, 차트, 등등)
정말 구조적이고 단순하면서 기술적으로 배우기에는 백오피스가 정말 좋구요
정말 많은 기술적인 도전을 할 수 있답니다ㅎㅎ
맞아요!
그리고 API 연동쪽도 그렇고
성장에 도움 안된다고 많은 이야기가 나오지만 얻을 수 있는 것도 상당히 많아요! 빠르게 실패해볼 수 있는 기회도 있고 중요한건 동료들을 기쁘게 할 수도 있고요
오... 뭔가 SEO 이런거 고려 안해도 될 것 같아서 불리하다라는 생각이 좀 있었습니다.
다만 제품이나 서비스 개발을 더 좋아하는 사람들에게는 안 맞을 수 있어요. 일단 제품 퀄리티를 높이는 것을 생각안해도 되니까요
저도 이거 기대돼요 동료들 기쁘게 할 수 있는것.
SEO를 고려한다는 것은 홍보용 웹페이지인데
그런쪽에서 프론트엔드의 대단한 기술을 쓸만한 곳은 사실 몇군데 없어요
백오피스가 배우기엔 좋은 것 같아요
근데 재미가 없습니다
가장 큰 문제
ㅋㅋㅋㅋㅋㅋㅋㅋ
백오피스 진짜 노잼이에요 ㅋㅋㅋ
신입분들이 뭔가... 결제나 사용자에게 노출된 게 아니면 실패한 취직이다?? 라는 식으로 얘기하고 그런 이야기에 공감하는 시니어분들도 많았어요
그렇죠. 배우는 입장에서는 재밌지만
근데 저는 큰 공감은 안되네영
FO에 비해 BO는 발생하는 이슈가 좀 정돈된? 느낌은 있는 것 같아요
그것도 잠시일뿐
음... 우리가 알고 있는 유명한 시니어들(?)은 결국 서비스의 이름빨이 있어야 하기 때문에(?)...
음.. 백오피스가 서비스의 얼굴은 아니다보니
그쵸 ㅜㅜ
하지만 훨씬 많은 가치를 창출하기에 안 할 수는 없는..
채팅방 관리자가 메시지를 가렸습니다.
이건 또 처음알았네요
거기는 실제 쿠팡 사이트말고도
헐 저도 처음알았어요 ㅋㅋㅋㅋㅋ
배송, 업체 조회, B2B 등등의
무시무시한 백오피스 라인이 존재한다고 저도 전해만 들었습ㄴ디ㅏ.
80% 숫자는 잊어주세요. 수치는 정확한 수치 그런거 아니니까.. ^^;;
그냥 쿠팡 사이트보다 다른 거 하는 FE 개발자가 훨씬 더 많다는 겁니다.
넵~
백오피스는 안 할 수도 없고 한번은 해야 되고
잘하면 기술적인 성장을 할 수 있는 기술의 집약체이자 좋은 교보재이구요~
제가 백오피스는 저희회사밖에 안해봤는데 저는 백오피스가 재미가 없더라구요 특히 관심없는 도메인 관련 백오피스면 ....ㅜㅜㅜㅜㅜㅜ 물론 좀더 큰 기업에서 여러 요구사항을 가진거면 다양한 기술적 접근을 할수 있겠지만 작은 규모에서는 기본적ㅇ로 뭔가 신경을 덜..써도 되는 느낌이라 ㅠㅠㅠ근데 직접 사용자랑 24시간 맞닿아 있는 서비스보단 좀더 편한 부분은 있어서 개인의 성향과 회사가 해당 백오피스로 추구하는 방향에 따라 달라질것 같다는 제 의견입니당..ㅎㅎ
쿠팡 같은 경우는 백오피스도 고객(판매자)이 보는 백오피스와 실제 사내에서 보는 백오피스로 나뉠테니까요...! 판매자 고객이 보는 백오피스는 피드백도 많고 이슈도 많고 사실상 FO...
제품이나 서비스를 만들고 발전해가고 싶어하는 사람에게는 재미없다. 그런데 배우고 싶은 사람에게는 재밌을 수 있다고 생각해요
그렇죠. 사실상 BO같은 FO... ㅋㅋ
우선순위에서 항상 밀리는 레거시 백오피스면 재미없고 서비스의 중추가 되는 백오피스면 재밌는 거 같아요
둘다 해본 경험상..
ㅎㅎ 서비스를 안만들어본 입장에서는 백오피스도 얻는게 많았지만 다음엔 꼭 서비스를 해보고싶다는 생각도 드네요...그만큼 힘들겠지만..ㅋㅋㅋㅋ
안할수도 없고 경험이 아예 없으면 그것도 좋은 것은 아니라서요
헐 진짜요??
기술적 도약을 할 수 있는 중간 다리 같은 프로젝트로 여기시고 백오피스를 하게 되면 제품성장이나 발전의 재미보다 기술적으로 확~~ 포커싱해주세요
눈에 안보이는게 많나봐요
첨알았네여..
아... 숫자는 지워야곘네요;;; 사이트보다 더 많다는 거에요
네이버 신사옥이라네요 ㄷ
좋은답변들 감사합니다!!
배송, 통계, 물량, 납품 등등 구매보다 훨씬 더 많다는 거죠
우와!
뒷단이지만 고객이 보기 때문에 소중한... 상품관리 페이지 흑흑 ㅠㅠ
ㅋㅋㅋㅋ
채팅방 관리자가 메시지를 가렸습니다.
안녕하세요 코린이입니다 ㅎㅎ 궁금한것이 생겨서 질문남깁니다. 실무 개발을 할때 협업이 엄청 중요하다고들하시는데 저의 생각은 개발을 다른사람이랑 같이 하니깐 중요한 부분으로 느끼고 있습니다. 그럼 실무에서 협업을 잘하는 사람의 특징은 무엇이 있는지 궁금합니다. 저도 협업을 잘하는 사람이 되고 싶어서요
엄청 많은데요 그냥 제가 생각하는 것들을 좀 피상적으로 써보자면 - 공유를 빨리 잘 하는 것 (안되고 있는거 마감날까지 혼자 끙끙하다가 터뜨리는거 제발 하지 말아주세요!) - 빠른 피드백과 리액션!!!! - 잘 이해하고 정돈된 문서화 - A vs B 가 아니라 A + B = C로 대화 하는 스킬 - 부정적인 감정 포함하지 않고 말하기 - 한꺼번에 말한 내용을 배경과 의도와 도출과 결과를 분리해서 이해하고 공감과 반대의 포인트를 분명히 하기 - 일관성 있게 행동하기 - 예측가능하게 행동하기 - 아는 것과 모르는 것을 분명하게 전달하기 - 말투를 흐리거나 경앙되지 않고 부드럽게 말하기
아직 제가 부족한 부분들이 많네요ㅠㅠ 조언 감사합니다! 말씀해주신 것을 토대로 협업을 잘하는 개발자가 되도록 노력하겠습니다 감사합니다!!
테오의 의견과 일맥상통하는 부분입니다. 협업이라는 단어는 "같이 일하는" 것이고, 일보다는 "같이"에 초점을 둬보세요. - 내가 말할 때 이야기를 경청하며 공감해준다. - 내가 다소 업무를 하게 되더라도 기분 좋게 해줄 수 있게 부탁 또는 요구한다. - 어떤 일정에 맞추기 위해 스퍼트 낼 때 같이 있거나, 나를 지원해준다. - 그 사람의 의견을 통해 내가, 나아가 팀이 발전하게 된다. 이 모든 건 결국 "커뮤니케이션을 잘하는 사람"으로 귀결됩니다. 여기에 일을 하는 방식이 다른 사람/체계와 정형화 되어 있거나, 배울 점이 있으면 너무 베스트인거죠. 우스갯소리로 말 잘하고 잘 웃고 주변 사람들 잘 챙기는 사람은 일 못해도 어느 회사든 갈 수 있다고 하는데... 그만큼 커뮤니케이션이 강조되기 때문입니다. 테크닉은 공부하면서 갈고 닦을 수 있지만, 커뮤니케이션은 정말 암묵지 영역 그 자체이고, 어떤 경험을 어떻게 받아들이느냐에 따라 독이 될 수도, 약이 될 수도 있거든요.
논점이 흐려졌나 싶은데 우선은 사람들과 대화를 많이 하고, 어떤 생각을 가지고 어떻게 일하는지를 눈여겨 보세요. 상대방의 시선에 맞게 자신의 입장을 잘 조율할 수 있어야 합니다.
결국 협업은 다른 사람이랑 하는 것이니 다른 사람에게 집중하고 관심을 갖는 것이 우선이겠네요! 조언 감사합니다!!
우선은 같이 밥먹는게 안 불편한 사람..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
와!!! 함축적이지만 거의 모든 것이 들어있네요!
다행이네요 전달이 되어서..ㅠㅠ
일이야기 안하면 너무 괜찮은분이 있는데 일 이야기만하면 답답해지시는분도 계시더라구요ㅠㅠ
이게 '나'의 고칠것만 너무 고민하는것 보다 '우리'가 일하면서 맞춰 나갈것을 고민해보세요!
그렇게 본인에게 적용해 보시고 좋은 영향을 끼치면 널리 전파도 되고
안녕하세요 프론트엔드 개발한지 1년도 채 안된 코린이입니다! 버튼 클릭시 이벤트가 발생하는 건에 대해, 더블 클릭(중복 이벤트)에 대한 처리는 어떻게 하시는지 궁금합니다! 참고로 저는 React를 사용해서 개발하고 있습니다 이전까지는 state:boolean로 mutate를 쏘기전에 true, 끝나면 false 로 처리해서 모든 요청이 완료되기 전에 함수 재 호출시 state값을 확인해 바로 return 되도록해서 막는 형식으로 했습니다. 더 좋은 방법이 있을까요??
쓰로틀써도 괜찮을거같아요
또는 기존의 state 방식을 사용하신다면 버튼에 이벤트가 발생했을 시 state로 해당 버튼에 액션이 주어졌을 경우 로딩 버튼으로 처리해서 사용자에게 시각적으로 전달하는 방법도 있을 것 같네요
아하 네!! 쓰로틀 쓰는 방법도 있네요 감사합니다ㅎㅎ 그렇게 로딩으로 보여주는 방식을 사용했는데, 로딩이 짧은 경우에는 화면이 깜박거리는 것 같아서요ㅜㅜ 그냥 의도적으로 시간을 늘리는 게 좋을까요?
j님 말씀처럼 로딩을 버튼에 효과를 줘서 disabled처리 하시면 될거같아요
저는 디바운스 걸어서 로딩버튼 처리 해서 사용합니다
그렇게 처리해볼게요 감사합니다!👍
협업과 관련된 글을 쓰고 있는데 한번 읽어봐주세요~ 협업은 제가 관심이 많은 분야라서 연재형식으로 좀 적어 볼 생각입니다. https://velog.io/@teo/agile-feedback-game
오~~ 테오님 신상이네요!
페북에서 나온 에디터프레임워크라고하네요 https://lexical.dev/docs/intro
최근에 에디터 알아보면서 상용에디터 결제해서 붙였는데, 그 때 이걸 알았으면 고려해봤을텐데 아쉽네요 ㅠ
어차피 페북에 웹 에디터는 이미 있었어요 ㅎㅎ Draft 라는 녀석이 있죠! 아쉬워 할 필요는 없어용
이건 꼭 아닌거 같아요..
원래 성격이 막 장난이나 지적이나 그런 사람두 있드라구요 ㅠ
공과 사구분못하고..
불편한농담이나 성희롱 ㅜㅠ등..
시에스에스님이 나갔습니다.
그런 분이랑은 같이 일하는게 불편하죠 ㅜ
괜히 밥 먹을 때 옆자리 앉지 않게 피해가고 싶고...
헙.. 저 장난기가 많아서 가끔 동료들에게 이것저것 농담 많이하는데 자중해야겠군요...
제 나름대로 선은 넘지않는선에서 한다고 생각하고 하는데 저와 성향이 다르거나 한 분들이라면 가끔은 불편하거나 부담스러울 수도 있다는 생각이 잠깐 들었네욥..
사람마다 다 다른거 같아요..
근데 약간 불편해서 피하면 오히려 전체 분위기를 해치는 사람으로간주한다능..
모르겠네여
안녕하세요 저 질문 하나 드리려고 하는데요 ㅠㅠ 지난주까지 npm install이 잘만 되던게 갑자기 버전 오류가 뜨면서 안되는데...그러면서 받아온 라이브러리들을 인식하지 못하는 문제까지 생겨서요ㅠㅠ 혹시 이럴땐 어떤걸 확인해봐야할까요ㅠㅠ package.json이나 이외 lock 파일도 전혀 건들인게 없습니다ㅠㅠ
혹시 node_modules 삭제 하고 재설치 하셔도 똑같나요?
네..
package-lock.json 이나 yarn.lock 제거 하시고 node_modules 다시 제거 하신 다음에 한 번 해보셔도 동일할까요?
넵.. 해봤습니다ㅠㅠ
원래는 나지 않던 npm warn 도 엄청 생겨나고 라이브러리 인식 문제로 인해서 jsx파일의 태그들도 에러가 나요ㅠㅠ
원래 기존에 잘 돌아가던 프로젝트는 잘 작동 하는데 새로 git clone을 받아서 node_modules를 받았을때만 이런 현상이 일어나네요ㅠㅠ
npm update도 진행해보신 걸까요? 터미널 에러메시지에 추천 명령어 따로 뜬 건 없으실까용
저 같은 경우는 vscode 나갓다 오면 해결되는 경우도 종종 있던데 lint 잘못 돌아서 오류 나는 경우도 있더라고요...
log라도 캡쳐 떠서 공유를 하면 아시는분이 조언을 해주시지 않을까요.
기존버전 / 최신 버전으로도 둘다 작동시켜봤는데 동일하게 라이브러리 인식 오류가 납니다ㅠㅠ
인스톨시
사진
이렇게 오류나요!!!
그리고 인스톨이 다되고서는 원래 잘 인식되던 태그들이 인식이 안되어서 에러가 뜹니다.,
지금 현재 node버전은 12.x.x 쓰고있어요
14도 동일하고
16은 에러가안나요,,.
Package-lock.json 을 보면 lockfileVersion 이 있는데 그게 몇일까요..?
보통 면접시에 자기소개는 몇분 정도 하시나요?
처음하는거 말하는 거죠? 보통 1분 ~ 1분 30초 정도 하지 않나요!
?
저는 약 1분안쪽..?
넵 처음에 말하는 자기소개입니다!
아하 보통 1분 내외군요 감사합니다
도롱도롱님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
1분
안녕하세요!
안녕하세요 초롱초롱 네오님!! 반갑습니다 :)
무찌님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 무찌님! 반갑습니다 :)
안녕하세요 반갑습니다~! 😊
네! 어서오세요~ 여기는 개발을 얘기하고 프론트엔드를 얘기하고 궁금한 내용들을 주고 받으며 함께 성장하는 공간입니다
내가 궁금한것은 남들도 궁금할거라고 생각하고 뭐든 편하게 글 남겨주세요~
네 감사합니다🙆♂️ 앞으로 잘 부탁드립니다🙏 테오님 velog에서 항상 좋은 글 써주셔서 너무 감사드립니다 🥺
감사합니다~ 여기는 소재를 얻기 위한 공간이기도 해서 ㅋㅋ 일고 싶은 주제가 있다면 제안해주셔도 좋아요 ㅎ
*읽고
톡게시판 '투표 취소': 이벤트를 한번 해볼까 합니다. 다같이 온라인으로 모여 1시간 정도 할 수 있는 것들로 생각합니다. 자유롭게 의견 주세요!
택배 상자를 든 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 택배상자를 든 네오님~~ 반갑습니다~
react-form vs formik 둘중에 어떤게 괜찮을까용? 사용해보신분의 의견이 궁금하네요 ㅎㅎ
formik는 본적없는데 react-form은 쓰시는분들이 보였어요
저 포믹써요!
전 react-hook-form 씁니다. 회사 타팀도 이걸로 많이들 쓰시더라구요
아
리액트 폼이
리액트 훅폼이 아니었군요
저는 react hook form 말한거였어요
정황상 리액트 훅폼 말씀하신 것 같아서 ㅋ
일단 저는 포믹 만족하면서 쓰고 있어요 api가 제일 리액트스러워서
저는 둘다 써봤는데 저는 간단하게 쓰기엔 hook form이 편했고 다른건 포믹이 편하더라구요
확인 감사합니다.!ㅎㅎ
nextjs-express-sequelize로 토이프로젝트를 하고 있는데 간단한 admin 페이지 추천해주실 서비스나 라이브러리가 있을까요?
저도 포믹써요!
저 지금 간단한 html,css,js이용해서 포트폴리오만들고있는데요
혹시 스크롤같은 기능을 라이브러리로 써서 포트폴리오에넣어도 괜찮을까요??
아니면 순수 js만써서 포트폴리오에 넣는게나을까요?
왜 라이브러리로 썼는지, 왜 순수js로 작성하였는지 이유만 명확하다면 뭘 하던지 상관없다고 생각합니다! 왜 가 제일 중요한거 같거든요..
저는 단순하게 간단하게 구현할수있는 기능들은 라이브러리로 써서 구현하는게 낫다고판단해서 라이브러리를 사용해서 구현한건데 이게 왜 라이브러리로썻는지에 대한이유로 부적절할까요?
면접관 성향 따라 생각이 다르기 때문에 정답은 없지만, 단순하게 간단하게 구현할 수 있으면 직접 구현하는게 낫지 않나? 라이브러리에 대한 의존성이 늘어나면 유지보수가 어렵지 않나요? 직접 구현하신다면 어떻게 하실건가요? 이런 꼬리질문에 대해서도 자신의 생각을 정리해두신다면 뭐든 좋다고 생각합니다!
이건 반대도 마찬가지인거 같아요. 반대로 직접 구현하셨다면, 이미 라이브러리가 잇는데 왜 만드셨나요? 간단하고 직접 만들수 있다면 항상 만들어 쓰실건가요? 라이브러리를 고른다면 어떤 기준으로 고르실건가요? 이런 대답에 대한
준비가 되어야 하지 않을까 싶네요 ㅎㅎ..
앞서 답변을 워낙 잘해주셨는데요
포트폴리오에 바닐라JS 순수 JS 뭐 이런 강조는 엄청 했는데 막상 코드를 까보면 라이브러리 의존도가 있다? 그러면 지원자분에 대한 신뢰도가 좀 떨어지게 됩니다
포트폴리오 내용 정리할때 주의하시고 라이브러리도 그냥 아무거나 가져다쓴 것이 아닌 고민하고 선택했다는 명확한 근거를 면접 자리에서 설명할 수 있다면 괜찮을거에요!
저는 약간 다른 의견이긴 한데요. 저도 지원자분들 많이 평가하는 입장에서, 일일이 바닐라로 구현했냐 자체를 중점적으로 보지는 않습니다. 실제로 업무에서 구현할 떄, 모든걸 바닐라로 하지도 않고, 있는걸 잘 조합해서 하는 것도 중요하다고 생각해서요. (바퀴는 새로 발명하지 않는다) 내가 표현하려고 하는게, 내가 짜는 것보다 나와있는 것중에서 잘되어 있는게 있으면 그걸 쓰는게 나쁘지 않다고 봅니다. 그래서, 포트폴리오에서 바닐라로 짰냐 안짰냐는 고려포인트는 아니고 (제 입장에서는) UI/UX를 고려해서 잘 짰는지, 코드의 구성, 흐름 같은걸 오히려 보게 됩니다. 하지만, 실제 업무에서 또 라이브러리 없이 바닐라로 직접 만들어야 되는 것도 생기기 마련이니 이런걸 하려면, 바닐라 지식도 풍부해야 되겠죠. 그래서 이런건 서류단이 아니라 면접단에서 deep하게 물어보는 편입니다.
서류에서 나를 최대한 어필해야 되는 목적이라면, 포트폴리오에서는 이것저것 구현을 하고, html, css, js, 그외 cs 지식들 같은건 따로 기술블로그에 적으면서 정리하는 것도 나쁘지 않다고 봅니다!
저는 우선 로직 구현을 어떤 포인트에 초점을 두고 짰는가를 찾아보고 물어봤어요. 로직은 여러가지가 있고, 본인이 생각하기에 왜 이 로직을 선택했는지에 대해 얼마나 생각했는가를 좀 중점적으로 보게되더라구요.
잘짠 코드 예제는 이미 라이브러리나 API 등 많이 나오니까 그걸 가져다 쓰더라도 어떤 포인트에 초점을 맞춰서 가져와 썼는가.를 설명해도 좋을 것 같아요
근데 포트폴리오에 있는 코드를 설명할 기회 / 그거에 대한 질문을 하시나요? 전 면접에서 한번도 물어본적 없는데. 따로 과제가 있었으면 모를까. 그건 그냥 참고로만 봤어서
관심없는 회사나 면접관도 있고 커밋 하나하나 다 보고 코드 한줄 한줄 다 물어보는 경우도 꽤나 있더라고요
전 깃헙 보고 물어봤어요. 이부분을 이렇게 해결하셨는데 이런 방법 말고 다른 방법은 뭐가 있는지랑 그런거 물어봤어요
사전 과제가 있느냐 지원자가 무엇을 강조하느냐에 따라 다를 것 같아용
플젝 레포 커밋내용 보면서 이 부분으로 분담을 많이 하셨고, 해당 파트에서 이 코드를 인상깊게 봤다. 구현 의도를 알고싶다.
그런건 관심있는 지원자들에게는 물어봤습니다.
깃헙보다가 안구건조증 심화..
저도 그래서 과제랑 포트폴리오랑은 약간 결이 다르다고 생각은 해요. 과제는 주어진 시간내에 얼마나 최적화된 결과/구현을 보여줄 수 있느냐. (즉, 잘 했느냐. 질을 따지기) 포트폴리오는 따로 시간이 주어진게 아니라, 그 사람의 평상시 모습을 보여줄 수 있는거니까, 얼마나 잘했냐도 중요하지만, 얼마나 다양한 경험을 해봤느냐. (즉, 많이 해봤느냐. 양을 따지기) 이러한 양을 늘려가면서, 자연스레 개인적으로 퀄리티를 높여가면서 질도 높여갈 수 있는거구요
다들 좋은답변감사합니다!!!
지원자가 제 포트폴리오를 물어봐주세요! 하고 이력서에 강조하는 경우가 생각보다 많아요 그것이 대상이 될 수 있어요~! 특히 과제 전형이 없다면 더더욱 그럴 수 있고용
기술 이론은 자주 나오는 질문들 구글링만해도 나오는지라 포트폴리오 어필도 좋은 방법이네요!
평가자 입장에서는 서류가 무수히 오기 때문에 현실적으로, 과제면, 요구사항이 딱딱 있고, 나름 생각하는 best-case가 있어서 그대로 쭉 생각하다가 아닌거에 대해서 물어보고, 이런게 되는데, 포트폴리오는 열린 주제기 때문에 위의 것을 할 수는 있지만 일일이 하기에는 무리가 있거든요 ㅋ 일일이 하게 되면, 야근하면서 서류만 봐야될테니 ㅠㅠ
대표적인 몇몇개만 써도 좋더라구요..
서류만 보다가 일정 보내기가 수두룩해서
포폴은 정말 1개만 있어도 충분해요ㅎㅎ
팀노바 스타일 이력서가 들어왔고 거기에 평시된 포폴 및 github repo가 수십개면... 일일이 안보겠죠? ㅋ
팀노바 ㅋㅋ
거기 유명하지않나요..
저 안봐요..
보다가 끄는 경우도 있어요..
블라에서 팀노바 단톡방 포탈 열려서 들어가봤는데
어질어질 하더라구요 ㅋ
거기
무슨 종교 단체 같았음 ㅠㅠ
팀노바 플젝만 있으면 보다가 포기..
유명하지않나요?
다른의미로..
저는 100명 이상의 FE 지원자가 똑같은 코드, 똑같은 포트포리오를 제출해서 모두 서류 불합격 했던 경험이 있네요ㅎㅎ
몇명 불러다 물어보고
아 주는 코드 그냥 가져다가 썼네하고
???? 어떻게 그럴수가있나요
네
많아요..
클론코딩 강의내용을 포트폴리오로넣은걸까요??
넵 맞아용
학원 비하는 아니지만 대체로 포폴만 보다가 학원 구분 되고 그래요..
클론코딩강의내용을 포트폴리오에넣는경우가있나..
많습니다..
클론코딩의 결과물, 코드, 이름조차 다 똑같은데 그걸 대표 프로젝트라고 제출하시더라고용
아 정말요??
헉..
넵..
팀노바거기
제가 인턴 채용할때 겪언던 일인걸요 ㅎㅎ
오키에서 예전글보니까
장난아니던데요 ㄷ
그리고 최종 플젝들 보면 기초 구성은 다 있어요
다 같고
아
저는 팀노바는 아니였고 유명한 클론코딩 유튜브용
짜여진틀에 조금씩 수정해서 제출하는건가..
웹팩 만져봤다고해서 물어보면
이 옵션값이 뭔가요 물어보묜
모릅니다..
팀노바가 안드로이드만 했었는데
웹도 하나보네요?!
그분들 문제점이 1. 왜 이렇게 코드를 짰는지 모르고 제출함 2.포트폴리오 내용이 다똑같음 이거맞나요?
클론코딩이나 부트캠프 같은 것들이 나쁜건 아닌데, 아무것도 안한 것보다는 나으니까. 문제는 그거 한다고 다 자기것이 된게 아니라 자기것이 되게 만드는 시간이 필요한 것 같아요. 학원 다니면서 따라하는건 누구나 하니까. 학원 끝나고 나서 얼마나 꾸준히 발전시켜나가느냐!
맞습니다!!
그래서 그런 부트캠프 출신중에서도 옥이 있습니다! 옥석을 잘 가려내야
저도 지금국비중인데
그래서 깃헙을 안볼 수 가 없죠..
깃헙 보고 개인 플젝 다 보고..
학원 플젝 거르고..
저도 포트폴리오만들때 참고꼭하겠습니다..
부트캠프에서 뭘 배웠는데, 이게 난 내껄로 이렇게 만들었어!
유명부트캠프 ㅇㅋㄷ이런곳도 거의그렇겠죠..?
그부분이 중요하죠
저도 국비 출신이에요 ㅋㅋㅋㅋ
저도 부트캠프 출신인데 다른 부트캠프 보면 아니다 싶은 곳이 있더라고요...
그래도 거긴 취업은되게잘되는거같던데 뽑은회사들이 포트폴리오 거의다같은걸 알고도 그냥뽑은건가.. 아니면 정말 거기는 여기계신분들말씀대로 스스로 새로운걸 만들어서 낼수도 있을수도있겠네요..
거기는 실전 프로젝트 + 오프라인 + 이력서 포장 이런 강점이 있는 것 같네여
후자인경우인거죠
j님도 국비출신이시군요
본받고갑니다..
넵 저 전공 + 국비 수강..
국비도 하향평준화 되어있다고 생각하지만 좋은곳은 좋음,,
그러기엔 깃헙이 너무 꺠끘..
해서..
팀노바거기
실력을좋나요?? 유튜브알고리즘떠서보니까
대표강사가 수강생들 실력을좋다고 pr하더라구요
평균적인 수준은 존재하긴 하지만 그게 모든 수강생들을 대표하지는 않아요ㅎㅎ
진짜 그 안에서 많은걸 배우고 본인 걸로 습득하시는 분들이 있고 아닌 분들도 있고
사바사 케바케
요번에 항ㅇㅇ9 광고도 올라오는데 거기도 광고가.. 엄청 파격적이에요 다들 본인 학원 출신은 연봉이 높고 어디서든 잘한다고 포장을 해야 돈을 벌죠 ㅎㅎ
다만 교육기간이 짧고 기수 간의 텀이 적거나 중복 기수가 존재한다면 수강생들을 진심으로 대하기보다는 돈으로 바라볼 가능성이 크죠
그런 학원들을 빠르게 수료시키고 내보내고 빠르게 가르치고 많이 대량으로 뽑고 회전률을 높여야 매출이 높아질 수 밖에 없거든요
그렇군요..
많은생각이드네요ㅕ
저는 첫 회사가 b2b를 주로 하는 회사에서 wpf, c#담당으로 다녔었는데, wpf를 하는 개발자가 혼자라, 방향없이 맨땅에서 헤딩했더니, 지금 프론트엔드를 신입으로 준비하면서도, 이 학습 방향이 맞는지 고민하면서 하는데, 늘 이 방 덕분에 좋은 정보들을 배워갑니다 :>
클론코딩으로 학습하면서도, 매번 끝나면 혼자 일렉트론 써서 캘린더도 만들어보고, 심리테스트 사이트도 해보고, 토이프로젝트 하나 씩은 꼭 해보는 타입인데 많은 생각이 드는 주제들이 오가서 감사합니다..
이모티콘
파일: 스벨트_당신도_할_수_있다.pdf
간단한 스벨트 자료라 한번씩 읽어보시면 좋을것같아 공유합니다
이건 어디 발표자료인가요?
어디서 발표한것인지는 확인을 못했지만 스벨트 코리아 커뮤니티에서 공유되었던 자료라고 합니다. https://open.kakao.com/o/gCi2sKFb
삭제된 메시지입니다.
웃긴건.. 스벨트 오너가 버셀로 갔습니다 ㅎㅎ
오 감사합니당
와 저 스벨트 처음 보는데 혁신이네요
왜 스벨트 스벨트 하는지 알겠어요
버셀 너무 좋아요 ㅎㅎㅎ
(절규)
안녕하세오~ 혹시 자바스크립트 연습은 보통 어디서 하시나요..? 독학중이고요!! 노마드 코드 통해서 강의는 다 들었는데요, 챌린지 중에.. 문제를 하나도 풀수가 없어서요…ㅜ 좀 이런걸 많이 연습해봐야 하는거 같은뎅..ㅠ 책도 이 방에서 추천 많이 해주시는걸 한 두권 사기는 했는데.. 뭘 어떻게 하나 감이 안오네요.
오오!! 되게 잘 만들었네요 자료 ㅋㅋ
그쵸!. 저도 피피티형식이라 간단히 보고 있는데 보면 볼수록 좋은 자료라 공유했습니다
JS로 만들어 보고 싶은거 있나요?
프론트로 직군 전향하려고 지금 공부중인 것입니다! 그래서 수업 다듣고 하면 반응형 웹 하나 만들어보고 싶었습니다. 그런데 당장 이벤트 줘서 색바꾸고 하는 간단한 문제도 풀지 못하구있네요 ㅠㅠ ㅎㅎ
그런 문제를 되도록 찾아 가는게 개발이니까 화이팅입니다
노드 오픈채팅방에 하민님이라고 계시는데 그분이 만드신 자료네요 ㅋㅋㅋ
그러면 해결해야 할 문제를 좀 쪼개서
하면 펼쳐보세요
색만 바꿔보기
호엥
이벤트만 걸어보기
넵넵!!
하다가 막히면 일단 되는 것 부터 하고
비어있는 태스크를 한번 적어보고 다시 일단 되는 것 부터 하고
ㅎㅎ 넹 ㅠ 의지 가득이였는데..ㅎㅎ 강의 까지 계획대로 완강해서 슝슝~ 해낼줄 알았는데 막상 혼자 해보려니..ㅎㅎ 턱!!..
그렇게 쪼개가는 것 한번 연습해보세요 일단 되는 샘플에서 조금씩 바꿔보는 것을 추천합니다
넵넵!!! ㅠㅠ 다시 지금 문제부터 해결해봐야겠오요
절대로 그렇게 될리가 없죠 ㅋ 롤애서 cs잘먹는 법 영상 본다고 갑자기 안 놓치던 cs 잘먹게 되는 건 아니니까 계속 트라이 하면서 막히면 여기다가 물어보세요! ㅎ
넵~!!ㅎㅎ 감사합니다 ㅠㅠ
z-index 혹시 어떻게들 관리하시나요..? 저희 1 ~ 99999 까지 난무해서 정리좀 하려고하는데 ㅠㅠ...
혼자서 고민을 하는 것도 좋은데 개발은 너무 오래 붙잡고 고민하는 것보다는 일단 되는 걸 찾는게 더 나은 곳이라서 화이팅입니다!
찾아보니 https://www.nielskrijger.com/posts/2021-08-29/zindex-with-css-in-js/ 이런 함수 만들어서 사용하는 방법도 있더라구요
저는 :root { --z--modal: 100; --z--dropdown: 200; }
이런식으로 css variable로 하고 있어요
오오!
스벨트가 리액트보다 좋다는 놈들이 있는데 https://www.youtube.com/watch?v=o4HPzbwx_Xk
제가 가져온 자료도 여기 댓글에도 있습니다.
아! ㅋ 감사합니다.
여기는 볼때마다... 어그로가 심하네요 컨셉이지만 애매한...
그래요? 꽤 재밌게 설명잘했다고 생각을 했는데
저는 그래서 코딩애플님꺼 좋아라합니다 ㅎㅎ컨셉보는 맛도 있는데 짧은 내용에 핵심과 팁이 많이 담겨있었어요
네~ 저도 짧은 시각에 다 때려박는 컨텐츠와 내용 좋아요. 강의는 안봤습니다.
설명도 잘하고 컨텐츠도 좋고 여러가지로 대단하시지만 오해가 있을만한 어그로 제목이나 멘트가 자주 활용되서 아쉽더라고요ㅠㅠ
그렇군요... 아무래도 조회수 때문에 그런거겠죠?
제목은 좀 자극적인데 내용은 임팩트하고 좋네요 ㅎㅎ
맞아용 저번에 어떤 강연때 앵귤러 비하한다고 엄청 민감해하시는 분들도 계셨는데 조심스럽긴하더라고요ㅋㅋ 자꾸 이것만 배우면 됨 다른 건 몰라도 됨 MDN 문서 어려워서 안봐도 됨 이런 것들?
이래도 되나? 그냥 혼자 끄적끄적 생각했던 것들이 있었습니다 ㅎㅎ
그래도 mdn 은 너무 사랑해요 ㅜㅠ
어떤 메서드에도 mdn 을 붙이면 답해주는 스윗한 분,,,
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
우아한테크세미나 1월달꺼 말씀하시는듯? ㅋ
맞아요 ㅋㅋ그때 누가 앵귤러 비난한다고 엄청 강하게 따지셔서 분위기가..
무심코 던진돌에 개구리가 죽은꼴이긴 했는데, 그래서 말, 글 이라는게 참 조심스러운 것 같아요. ㅜ
그래도 2부 시작하면서 사과 멘트로 시작하시면서 진화는 되었던듯
마무리가 재미있네용 ㅎ
더위시러님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
JS척척박사가꿈님~ ㅋㅋ 반갑습니다 닉네임이 인상깊네요 ㅎ
안녕하세요 ㅎㅎ 잘부탁드립니다~!!!
네! 언제든 궁금한거 있으면 글 남겨주세요. JS든 뭐든 해보고 부딫이고 물어보고 답하는게 큰 성장이 됩니다. ㅎ
퉁이리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 42311님~~ 반갑습니다 :)
안녕하세요
네! 안녕하세요~
여기는 프론트엔드에 대해서 아니면 다른 개발자들이나 다른 취준생이나 공부하는 사람들 모두 서로 궁금한것을 묻고 또 답하면서 함께 성장하고자 만든 공간입니다 ㅎ
언제든 편하게 글 남겨주세요~ ㅎ
프론트엔드에서 MV* 아키텍쳐란 무엇인가요? 글 읽고 왔어요! 너무 좋은 글 감사합니다 ㅎㅎ
감사합니다! ㅎ 여기서 나오는 질문중에서도 호흡을 좀 길게 쓰면 좋다고 싶은 것들을 블로그 소재로 쓰고 있어요 ㅎㅎ
제 블로그 글(?)로 보고 싶은 주제가 있다면 또 제안주시면 너무 너무 감사하겠습니다.
혹시 용태님이 해석한 hook에 대한 글도 따로 있을까요?
오~ 아니요는 react를 실무에서 쓰고 있지 않아서 react 관련 글은 아직 하나도 써보지 않았습니다.
hook에 대한 해석 소재 keep 해두고 글 쓰게 되면 공유 해볼게요~
hook에 대한 해석이라면 어떤 구체적인 질문이나 궁금증이 있나요? ㅎ
+_+
음
제가 웹에 접한지 얼마 안 되어서 class 문법을 잘 모르는데 class에 대해서 가볍게 짚고 그 한계와 hook이 나온 배경 class -> hook으로 변경되면서 class의 어떠한 기능이 hook에 어떻게 담겼는지 또한 그 hook 기능 (useEffect 등..)에서 유의해야할 사항이나 가장 큰 장점 등에 대해 용태님이 해석한 글을 보고싶네요..! MV*관련 글이 너무 좋아서 반했습니다.
우와! 글 다 써주셨네요. ㅋㅋ 감사합니다 네! 알곘습니다 :)
안녕하세요 프론트엔드 테스트 코드 작성에 대해 고민이 많습니다. 팀에서 (프론트엔드 개발자 3명) 테스트 코드 도입을 고려하고있는데, 오히려 테스트 코드 작성에서 병목이생겨 생산성이 저하되지는 않을까 하는 고민도 있습니다 ㅠㅠ 테스트코드 작성의 목적은 품질 향상인데 오히려 주객전도 되는 현상이 발생할까 우려됩니다. 이에 대해 태오님의 의견이 궁금합니다
맞습니다. ㅠㅠ 사실 테스트 코드 작성은 프론트엔드에서는 참 어려운 존재입니다
저도 항상 고민입니다.ㅎ
저두용
제가 예전에도 답한게 있어서 찾는 중인데
일단 저는 테스트코드를 아직은 도입을 하고 있지 않습니다.
프로젝트 초기기도 하고 실제 FE 개발이 2명(1명은 마크업)이기도 하고
사진
사진
저희 팀 내부에서도 설왕설래 하는 부분입니다. 프론트 테스트가 의미가 있나? 오후 4:18 분명이 이론상 그리고 경험상 필요한데 오후 4:19 *분명히 오후 4:19 그정도의 효용체감을 느낄만한 테스트를 작성하는 비용이 너무 비싸서 되려 비효율을 야기하지 않나 정도가 중론인데 오후 4:20 그래서 방법을 찾아야 한다! 각자 찾게 되면 꼭 공유하자 오후 4:20 이정도로 논의 해본 적이 있어서 상당히 궁금하네요! 오후 4:20 •‿• 개발닥 테오님은 어떻게 생각하시나여? 오후 4:23 •‿• 유용태 (teo.yu) 제 생각도 동일합니다. 테스트는 확실히 필요한것은 맞는데 현존하는 유닛 테스트 건 e2e 테스트건 프론트엔드와 궁합은 별로 좋지 않은 것 같다 오후 4:24 Jest와 같은 류는 대부분 Node 기반으로 이루어져 있다보니 테스트를 작성하면서 개발을 한다는 TDD를 쓰기에도 브라우저 개발하고는 좀 맞지 않는 측면이 있구요 (콘솔이나 화면 구성에 불리함) 오후 4:25 그리고 REST API를 주축으로 서버와의 통신 이후 벌어지는 비동기로 엮이는 종속성들이 가장 큰 이슈인데 이걸 테스트 하기 위해서는 mock를 범벅해야 하는데 테스트의 신뢰도 문제가 있고 오후 4:26 정작 이러한 테스트들이 UI 이슈를 검증해 주지 못한다는 문제가 있어서 오후 4:26 실제 현장에서 느끼는 필요성을 충족시켜주는 테스트 도구나 TDD 개발 방법이 아직은 킬러도구가 프론트엔드에는 없다라는 생각입니다
예전에 적었던 제 테스트 입장인데요. 유닛 테스트는 옛날 개발(?) 웹으로 치면 백엔드 쪽에 더 포커싱을 둔 것이고
지금 UI를 어떻게 하면 테스트하는게 좋을지에 대해서는 아직 이게 너무 좋다 하는 방법이 아직은 없는 것 같습니다.
그나마 스냅샷테스트가 있기는 한데
그것도 개발 중에는 그렇게 도움이 안되기 때문에
볼륨이 커지고 나면 테스트의 필요성을 느끼게 되는게 (과감한 리팩토링에 대한 부분이라던가) 그때 하려고 하면 솔직히 안되는거라서
제가 생각하는 이상향은 테스트 코드를 개발하는게 곧 개발이 되는 형태의 TDD 이자 상태관리 이자 라이브러리 인 형태가 제일 좋지 않을까 생각을 합니다.
시도는 해보시되 주객전도가 되서는 절대 안된다고 생각을 해서 팀 볼륨이 커지면 테스트만 작성을 하는 담당자를 둬볼까? 생각을 하고 있습니다.
TDD에서도 테스트를 짜는 사람은 요구사항을 Task를 Test 코드 형태로 전달하게 되고 개발하는 사람은 그 테스트를 통과하도록 하는 방법론이 있는데 흥미는 있지만 혼자서 테스트하고 개발하고 검증하는 것은 조금 힘들지 않나 생각을 합니다.
케바케라 제 의견이 절대 정답이 아니므로 참고만 해주세요~
사진
프론트엔드 테스팅의 딜레마가 여기서 시작하는데 1) 무엇을 테스트 해야 하는가? -> 동작과 부수효과 => 부수효과는 이론적으로 테스트가 불가능함. => mock 데이터가 필수적으로 필요함. => mock 데이터를 테스트하는것을 신뢰 할 수 있나요? 1) 무엇을 테스트 하지 않을 것인가? - 컴포넌트들이 제대로 합성되는가 - 컴포넌트들이 화면에 제대로 렌더링 되는가 - 컴포넌트에 어떠한 동작을 했을 때, 무엇인가 트리거가 되는가 => 실제로 QA분들이 제일 많이 테스트를 하고 유의미하게 보고 계시는 것들.. (클릭했을때 펼접이 잘되나 데이터는 잘 보이나.. 잘리는 것은 없나...)
와 감사합니다!! 테스트를 하는 목적과 효용성에 내부적으로 잘 협의해봐야겟네요..
그냥 개발을 빨리하고 qa를 할 시간을 늘리고 리팩토링하는게 제품품질을 높이는데 더 도움이 되지않나 하는 생각도있었는데
좋은 의견 감사합니다..!
배민에서도 풀 테스트 보다는 결제같은 리스크가 높은 주요로직만 자동화를 한다고 하더라구요~
네 프론트환경에 찰떡궁합인 테스팅 툴이 나오면 좋겠네요 ㅠㅠ 친절한 답변 정말 감사합니다 🤗
스프린트 피그마 권한 추가했습니다 깜빡했네요~
그러게요~ 언젠가 본격 테스트가 필요한 시점이 오면 공유드려볼게요 ㅎ
저는 간단하게 bdd 테스트만 진행하고있어요
근데 팀원분들중에 저만 하는거라.. 의미는크게없는거같긴합니다ㅠ
저는 bdd를 오히려 기획단계에서 쓰니까 좋더라구요 기획자들한테 전파중입니다 ㅋ
bdd 하니 프로게이머 생각나네요 ㅎㅎ
리덕스랑 리덕스 사가를 어떻게 공부하면 좋을까요? 구글링하면서 보고 있는데 공식문서를 보고 공부하는 것도 약간 어렵네요 🥲
약간 뺄게요…
redux는 지금 살짝 사양길이라서 배우는 목적이 어디에 있나요?
저는 지금 취준생인데 채용공고 중 여러 곳에서 상태관리시스템을 써본 적이 있냐고 물어보더라고요. 프로젝트 하면서 컴포넌트를 많이 사용할수록 자식 컴포넌트 끝까지 props를 넘겨주는 경험을 해봐서 필요성을 완전 못 느끼는 거는 아닌데, 배우는 게 너무 어려워서 갈피를 못잡고 있습니다 😭
recoil 을 가장 많이 씁니다!
제가 느끼는트랜드로는?
그쵸 지금은 react-query와 recoil조합이 제일 무난해서
들어보면 요즘 리액트쿼리도 많이 전환하는거같아요!
오!
redux가 어렵다고 느끼신다면 react의 context api 또는 recoil한번 써보세요
오!
그 둘을 배우고 상태관리를 하고 있다고 하셔도 됩니다
사진
redux 선호자로서 반론을 펼칩니다! ㅋ
다만 redux는 상태관리늬 약간 교과서? 그런 느낌이라서 이런에 대해서는 알고는 계시면 좋을 것 같아요
사양길이라기 보다는 전에는 상태 관리 하면 redux가 압도적 원탑이었고 다른 대체제가 별로 없었는데 지금은 조금 더 편한 대체제가 생긴 상태라, 이것저것 선택하시기는 해요
통계는 인정합니다 ㅋ 상태관리라는 개념을 만든 라이브러리라서 개국공신이뇨 ㅋ
이죠*
redux의 치명적인 단점은 주렁주렁 달린 코드가 많다. 귀찮다, (상대적으로) 어렵다 인데 이거 극복하고 쓰면, 개인적으로는 제일 깔끔해서 좋긴 했어요. react의 철학과도 어울리고 FP 스럽게 잘 할 수 있어서요
저는 redux 랑 recoil 중에 고민하다가 redux toolkit이 주는 보일러플레이트의 안정감이 좋아서 리덕스를 선택햇습니다..
recoil은 아직 1.0을 안찍어서 선뜻 선택하기는 망설여지긴 하죠. 저도 스터디용으론 가져가고 있습니다.
(이렇게 말했지만 현재 팀의 실무는 mobx입니다 ㅠㅠ)
많은 분들 답변 감사합니다:) redux와 redux-thunk, saga는 무슨 차이가 있나요?
redux, mobx, recoil, jotai 이런게 상태 관리하는거고 redux-thunk와 redux-saga는 앞에 redux가 붙었으니... redux에서 쓰는 미들웨어 입니다. redux-thunk의 경우는 실제 코드가 10줄 정도 되었나? 매우 간단해서 한번 뜯어보셔도 좋아요 ㅋ
사진
용태님께서 반론을 제기하러 오셨군요….ㅋㅋㅋㅋㅋ
테오님 말씀하신 것도 맞아요 ㅋ 예전보다 대체제가 더 생겨진거니까 ㅜ
근데 저 그래프에서도 보시면 아시겠지만 상태 관리에선 아직 1등 입니다 ㅋ
사양길은 워딩이 너무 쏀것 같아요 정정합니다. 만족도가 점점 떨어지고 있어서 대체제를 찾으려고 하는데 redux때 만큼의 원탑이 있는 것은 아닌 상황이긴 합니다
그건 맞아요 절대 부정하지 않습니다. ㅎ
vuex라…
특히 현업에서는 아직 쟁쟁해서 지금 취준이랑 학습을 하신다고 하면 1~2년이 더 지날거라서
기대주에 투자할지 고배당주에 투자할지는 본인 선택이죠 ㅎ
아까 정도의 워딩 나쁘지 않다고 생각합니다 ㅋ 그냥 제가 좋아하는거 나와서 저도 그냥 말해본거라 ㅋ
전 redux를 좋아하게 된계기가, 그동안의 OOP 위주의 프로그래밍 패러다임을 저게 어느정도 체계적으로 잘 깨준 느낌이라서 -_-?
거기에서 좀 번쩍 했네요
redux는 thunk는 Promise(resolve => {}) 정도 같은 느낌이라서 금방 배우실거구요
근데 저도 vue 쓸 때는 vuex 밖에 못본 것 같은데, vue 상태 관리는 vuex 말고 다른게 없나요?
redux도 toolkit 쓰고 전역상태만 관리하면 하면 코드 그리 많진 않아용 saga 가 넘 코드가 많아서 좀.. 별로
saga는 호불호가 갈리는데 generator와 yield가 주류가 문법이 아니다보니까 코드 가독성이 아는 사람과 모르는 사람간의 격차가 너무 커서
맞아요. 그것도 하나의 장벽으로 존재하죠 ㅜ
맞아요 외계어 같다는 말도 들어봤어요 ㅋㅋ
팀 전체가 saga가 좋다면 좋고 아니라면 무난하기는 힘든 거라서
근데, 애초에 vue vs react에서도 러닝커브로 조금의 장벽이 있는 것처럼 thunk vs saga도 비슷한 궤로 보면, 어차피 러닝커브 넘어서 쓰는거면 saga에 한표이긴 합니다. 코드가 더 깔끔해져서. 비동기 처리도 편하고
리덕스 팀도 그걸 알고 RTK에 엄청나게 공을 들이고 있죠
React Query의 유사품 RTK Query까지.....
그쵸 작정하고 넘어간다면... saga 괜찮을 수도 있습니다.
일단 react-query는 결이 달라서
그냥 react쪽에서는 REST를 다룰때 업계표준이 될 가능성이 높다고 봅니다 일단 대체제가 딱히 없는데 패러다임 쉬프트도 한 케이스라서
생각보다 graphQL이 흥행하지 못했고
recoil 같은 경우도 페북에서 공식적으로 만드는만큼, 추후에는 recoil로 많이 흡수될 것 같아요. 거기에 테오님이 말씀하신 react-query나 swr
recoil은 안 할수가 없는게 외부 라이브러리가 아니라 React에서 만든 거라서 Context처럼 그냥 알기는 해야하는 거
찌찌뽕!
next를 쓰게 된다면 같은 회사에서 만드는 swr을 쓰는게 더 낫지도 않나? 라는 생각도 조금은 있는데
아직 이거에 대한 결론은 안내려서;
swr이 근데 react-query에 좀 밀리는 추세입니다. 인지도 면에서
react-query가 너무 성장해버렸어요 ㅠ
swr쓰기에는 Query..가 너무 컸어요
맞아요~ 그래서 next라는 전제를 달았지요. 둘다 같은 회사에서 만든거다보니
Jotai는 안쓰시나요?
next가 아니라면 react-query가 무조건 일 것 같고
react Query에서 대놓고…비교를 해뒀더라구여
(우리가 짱이다)
jotai나 zustand는 뭔가 엔터프라이즈 레벨에서
next라면, 아무래도 같은 회사에서 만든게 뭔가 더 낫지 않을 수도 있지 않을까? 생각만 해봤습니다. 결론은 아니었고 ㅋ
좀 신중한 느낌이랄까요?
저도 몇년전에는 비슷하게 생각했던 1인입니다 ㅋㅋ
뭔가 표준 1티어가 아니라서... 언제가는 바뀔지도 몰라.. 같은 느낌? jotai 하는 개발자를 구할수 있을까?
이런 우려...
폭풍 성장 + Suspense 조화가 고내찮아요
몇년전에도 swr을 써보셨었나요?
넵넵 저는 GET 하는 상태만 따로 쓰는걸 선호해요
맞아요. 옛날의 prototype.js, backbone, 이런거 쓰는 느낌 ㅡㅡ?
그런걸 섞어서 사용했어용
나그네님의 지금 결론은 뭔가요? next 쓸 때 react-query가 낫다. swr이 낫다?
그쵸.. 그래서 대다수가 배우고 있는게 결국 그게 좋든 싫든 많이 쓰게 되는거로 되는 것 같아요
Java가 그랬고 React가 그랬고
무조건 Query 죵
테오님 리액트로 오시나요...?
오우.. 상태관리에 대한 고찰들 너무 귀한ㅔ요….
아뇨. ㅋㅋ 당분간은 svelte 계속 할 것 같아요
ㅋㅋㅋㅋㅋ
React는 아직 찍먹중입니다 ㅋ
안한다고 하면 안될것 같아서요 ㅠ
그래도 먹고는 계시는군요 !
네~
그럼요
다 한번씩은 해보고 있어요. jotai건 zustnad건 react-query건
나그네님이 몇년전부터 고민하셨던거에 결론이 react-query면 저도 next 쓰게 되더라도 굳이 swr을 고려 안해봐도 되겠네요!
다만 실무에서 안쓰니까 실무에서 발생하는 그런 경험담(?) 같은게 없어서
대화에 잘 못끼어요 ㅠ
ㅠㅠ
기술의 성숙도도 중요하지만 생태계의 크기를 무시못하죠..
아까 saga thunk 얘기 나와서 링크 하나 투척합니다. https://www.youtube.com/watch?v=UxpREAHZ7Ck
많은 분들 의견 정말 감사합니다! 영상도 볼게요 하하
오늘도 많이 배웠습니다.
rxjs는 아직 안써봤는데 어떨지 궁금하네요...
앵귤러에서는 많이 쓰는 것 같은데, 다른쪽은 아니어서 아직 찍먹도 못해본...
저는 svelte 상태관리는 rxjs랑 엮어서 쓰고 있어요
오! 스벨트도 rxjs로 하는군요!
둘의 궁합은 정말 좋습니다
다만 rxjs자체가 허들이 높아서
ㅜㅜ
사실 rxjs도 알면 어렵지 않은데 선언적 함수형 반응형 프로그래밍 패러다임을 금방 와닿지 않으시더라구요
언젠가 꼭 배워보고 싶습니다 !
정확히 다시 말하면 rxjs는 어렵지 않은데 operator가 너무 많아서 진입장벽을 엄청 높여놨는데 비주류다보니 차근차근 배울만한 가이드나 강의가 부족하고
애써배워둬도 이게 덩치가 커지거나 복잡한 비동기 로직에서 빛을 발하는 녀석인데 그냥 강의 수준이나 실습 수준에서는 더 상황을 어렵게 만들다보니 이럴거면 이걸 왜 써? 이렇게 되는 악순환입니다 ㅋㅋ
원하시면 알려드릴게요! ㅎㅎ
저는 인생을 알려주세요
ㅋㅋㅋㅋㅋㅋ
무엇이 고민인가요?
ㅎㅎ장난입니다. 용태님 진짜 개발을 사랑하시는게 느껴져서 너무 좋아요
개발자들이 다 그렇죠 뭐 ㅋㅋ 괜히 너드겠습니까? ㅋㅋ
여러분 외국 기술트렌드 같은거 어디서보시나요?
구글검색해보면 많이 나옵니다.. ex)web frontend trend
dev.to
medium
github trends
요런 것들만 구독하고 있어도 충분합니다!
오늘 dev 커뮤니티 가입했습니다
종종 들어가보려구요
들어가실 필요는 없고
사진
위클리 + 먼슬리 구독해놓으면 지겨울정도로 메일옵니다 ㅎㅎ
안녕하세요 인프런 클론코딩해보고있는데요 제가 hover로 강의 로드맵 이런식의 태그에 마우스되면 사진처럼 블록이나오도록 css를 설정했습니다 문제는 처음에는 위의 블록을 Opacity:0으로하고 hover될때 opacity:1로 하는식으로 css를작성했는데 opacity:1이되면 위의 사진처럼 배경에 겹쳐서나옵니다.. 이럴때는 어떻게 설정을하는게맞을까요?
사진
사진
이게 제가구현하려는모습입니ㅏㄷ
z-index 가 궁금하네용
앗 z-index쓰니까 됐습니다 감사합니다
저는 z-index값이 작을수록 위로오는줄알았는데 반대로알고있었네요..
https://frontendfoc.us 여기도 메일링!
제가 항상 추천해드리는 https://bestofjs.org/ 도 가끔 들어가시면 좋아요
제일 핫하게 트렌드를 쫓을수 있습니다. ㅎ
조금 듣보 같은것들이 올라면서 응 이게 뭐야? 하는데
막 유명해지고 그러더라구요. ㅎ
하트어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 하트어피치님 반갑습니다 :)
안녕하세여! 잘부탁드립니당 ㅎㅎ
네~ 어서오세요! 잘 부탁드립니다.
많이 질문하고 많이 답변하고 많이 얻어가세요!
네엡!!!
어피치님은 최근 관심사는 뭔가요? +_+
최근 기술과제를 진행하면서 좌절을 많이해서 리액트와 nextJS 기본적인 것들을 다시 복습하고 깊이 이해하기위해 노력중입니다 ㅠㅠ
화이팅입니다!! 기술과제 해결은 하신건가요?
감사합니다 기능 구현은 다했지만 적절한 접근법과 코드 퀄리티면에서 부족한면이 있었던것 같습니다
기능 구현이 제일 중요하죠!ㅋㅋ 해결되는 방법 찾게 되면 어떤 문제였는지 어떻게 해결했는지 나중에 한번 알려주세요. ㅎ
저도 과제 하면서 또 성장하는 것같더라구여……ㅋㅋㅋ(물론 떨어지긴 하지만…)
ㅋㅋ저도요... 과제하면서 벽느끼고 좌절하면서 공부합니다.
네엡 ㅎㅎ 맞아요 떨어지면 마음은 아프지만 도움은 엄청 돼요 ㅎㅎ
프론트 과제하면서 테스트코드는 다들 넣으시나요?
오늘 낮에도 테스트코드 토픽은 나왔었는데 과제할때는 다들 넣으시는지 궁금하네요 ㅎ
대장님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 눈빛 애교 어치피님~~ 반갑습ㄴ디ㅏ :)
안녕하세요 !! 닉변했습니다 ㅋㅋ
어서오세요~ 어제는 너무 늦은 시간인것 같아서 답을 안 드렸어요 ^^;
환영합니다 여기는 각자 궁금한 것들을 모아서 다 같이 성장하고자 만든 공간입니다. 혼자라서 막막하거나 개발 얘기에 대한 갈증을 해소 할 수 있길 바래요 ㅋ
커리어든 학습이든 실무든 멘탈이든 뭐든 좋으니 편하게 글 남겨주세요 :)
벨로그보고왔어요님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 벨로그보고왔어요님!! 반갑습니다 :)
감사합니당 <~
홉! 안녕하세요~!!!
벨로그보고 와주셨군요 ㅋㅋ 감사합니다 +_+
넹! 글이 너무 쏙쏙 잘 읽어져서 도움 많이 받고 있습니다 ! ! 감사합니다 : )
칭찬 감사합니다~ 여기는 블로그 보다는 짧은 호흡으로 소소하게 궁금해할만 것들을 답하려고 시작한 공간입니다만
많은 사람들이 참여해주셔서 이제 함께 묻고 성장하는 공간이 되었네요!! 언젠든 궁금한게 생기면 편하게 글 남겨주세요
그리고 내가 아는 거다 싶으면 또 바로 바로 답해주세요 :) 늘 주시하고 있어서 저도 아는 거다 싶으면 바로 와서 답변 드리고 있어요 ㅋ (그중에 좋다 싶은 내용은 블로그 소재로 쓰고 있습니다 ㅋ)
넵넵! 저도 앞으로 소통하면서 성장할 수 있기를 바랍니당 ( 이제 개발자의 길을 시작했지만..ㅋㅋ)
좋아요! 좋은 개발자의 덕목 중에 하나 좋은 질문을 잘하는 것인데~ 그것도 해버릇해야 느니까요! 잘부탁드려요 ㅎ
넵넵 앞으로 잘 부탁드립니다 : )
혹시 주니어 프론트엔드 개발자가에게 추천해줄만한 서적 있으신가요
*개발자에게
공식문서요..
흠 리팩토링?
지금 주니어책이 뭐가 있는지를 모르겠네요 책으로 공부를 안한지 오래되서요~
책을 고르는 요령은 알려드릴게요
일단 서점으로 가서 직접 보시구요
네
일단 초반부가 읽히고 쉽네.... 하는 느낌이 드는 책을 사세요
그리고 예제.. 라기보다 해보고 싶은 걸 많이 제시하는 걸 사세요
로드맵에나 가이드가 되어 줄거에요
이나*
개발은 이론을 배우는게 아니라
그냥 많이 만들어보는 경험치가 훨씬 중요하니까요
저는 요즘 오브젝트 책 읽고있는데 잘 이해는 안가지만 읽을수록 개발할때 시야가 풍부해지더라구요!!
오 넵 감사합니다..!!
그런게 그냥 만들고 싶은거 만들라라고 말하면
뭘 해야할지 막막해하죠 다들 ㅋ
사실 얼마전에 기술면접봤는데 이미지 1픽셀에 몇바이트냐는 질문에서 제대로 대답을 못해서 ㅠ기본기가 부족한 저스스로에게 너무 실망스러웠습니다 🥺
중고신입 코테는 어떻게 준비하는게 좋을까요 ...?
그런 가이드나 로드맵이 될만한 해볼만한 것들이 많은 책을 입문용으로는 추천합니다
leetcode나 프로그래머스 백준등 코테 사이트에서 중급 정도로 자스로 한번 간을 먼저 보세요 ㅎ
코테 흐름에 익숙해지면 좋은데
아하 ...
공부는 계속 풀어보는거 밖에 없을까요 ?
지문 분석 -> 데이터로 변환 -> 요구사항 구현 -> 굉장히 복잡한 케이스로 인한 최적화
계속 풀어보는 것은 맞는데요
자료구조 먼저 쭉 보시고 그다음에 코테 유형별로 풀어보시는걸 추천드립니다
네네
좀 분석하면서 분리하고 나눠서
아
단계별로 좀 익숙해지면 좋을 것 같아요
요구사항분석 - 데이터 구조 설계 - 일단 테스트 케이스 1개라도 하드코딩해서 통과
조금씩 반복이나 조건추가 하면서 나머지 케이스 정복
오래걸릴만한 요인이나 반복제거 최적화는 어떻게할까
모두 통과
대충 이런 패턴입니다
아하 !
가을에 퇴사하고
중고신입으로 공부하려구여ㅠ...
이직하구싶어여
내가 어느 파트가 약한지 체크를 하면서 이론도 필요한 걸 찾아보시면 좋을 것 같아요
화이팅입니다
감사합니다 !!
아 테오님
인강 같은거는
어떤가요 ?
제가 공부할때는 인강이 없었고 인강은 한번도 들어 본적이 없어서
제가 아니라 여기 다른 분들에게 추천을 받아 보세요 ㅎ
넵넵 !! 감사합니다 ~~
저도 인강은 듣지 않았고 자료구조먼저 하고 풀이법 카테고리대로 문제 풀어봤습니다
코딩테스트 준비는 문제해결전략 책 추천드려요! 기초 탄탄해집니다 ㅎㅎ
메모하겠습니다 감사합니다 !!
샵검색 : #알고리즘 문제 해결 전략 세트
감사합니다 !!! 책도 하나 봐야겠네요 ㅋㅋ
여러분 제가 처음 직장에서 신입 프론트엔드 개발자로 일을 하게되었는데 탄탄한 실력을 갖춘 프론트엔드 개발자가 되기위한 로드맵이나 커리큘럼등을 추천해주실 수 있으실까요??
roadmap.sh
와..
링크가 안걸리네요
무슨 서비스를 만들고 싶나요? 혹은 하고 있어요?
음 현재 사내서비스 화면단을 만들고있습니다!
일단 하고 있는 것을 먼저 분석을 해보세요! 프론트 뿐 만 아니라 전부다요
그러면서 사내서비스 기술 스택 지도랑 데이터 구조 흐름도 같은 걸 일단 먼저 잏하시면서
해당 기술 스택별로 비슷한 것들을 좀 파고 들면
혹시 지도에서 경로 그려보신분 있으신가요
이게 주류인지 레거시인지 최신인지 알게 되는데
그렇게 각자의 맥락을 정리하고 나면
남들이 만들어 놓은 로드맵꼭 안 따라가도
오호..먼저 제가 하고있는것부터 잘하는게 우선이군요.. 제가 성급했네요! 조언 감사합니다 테오님!
현재 하고 있는 것에서 어떤걸 배워서 최신화 할 수 있을지 로드맵이 세워질거에요
프론트엔드 개발자로 일하게되었는데 테오님 벨로그의 css도 잘모르는것같고 리액트도 잘모르는것 같아 조급해졌네요..
*벨로그의 css자가진단에서도
아.. 하고 있는 걸 잘하라기보다 하고 있는 기술 스태부터 출발해서 최신화할것을 찾아가는 방법으로 로드맵을 세울수 있다는 거였어요
스택*
취업하신거 보면 능력이 충분히 있으신 것 같아요!
이모티콘
지금 쓰는 기술 스택이 최선인가? 하는 생각으로 검색을 하다보면 가장 최신이면서도 주류를 찾을 수가 있는데 내가 모르는 거라면 그걸 배우시면 됩니다 ㅎ
axios vs fetch https://meticulous.ai/blog/fetch-vs-axios/
Kor님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 roka님 반갑습니다 :)
안녕하세요!
네! 어서오세요 환영합니다
여기는 프론트엔드을 주력으로 개발이나 실무 커리어등 각종 이야기들을 함께 하고자 만든 공간입니다 :)
언제든 편하게 하고 싶은 말 궁금한 내용들 생각나면 글 남겨 주세요 :)
혹시 회사에서 msp 를 사용하시는분 계신가요? 계신다면 도입 배경이 궁금합니다!
🙋🏻♂️다들 프론트엔드 개발자 분들이시니깐,, js문법관련 질문 하나만 할게요-!(도와주세요😢) 예시 코드) const check = Array.from({ length: MAX_SIZE + 1 }, () => Array(MAX_SIZE + 1).fill(0) ); 질문1) 다들 js에서 2차원 배열은 어떻게 생성하시는 편인가요? 이유도 궁금해요! 질문2) 객체 생성시 '{ length:5 }' 이렇게 리터럴로 객체 크기를 지정해서 생성하는 문법이 있나요?! 감사합니다 😭
2번째 질문 제가생각하기에 첫 번째 인자에 array like object를 넣고
배열로 반환받는 것 같아요.
Array.from(array-like object, 각원소마다 적용될 함수)
2번 객체 크기를 지정해야 하는 이유를 혹시 여쭤봐도 될까요?
감사합니다 유사배열객체는 속성으로 length를 가져서 저런식으로 선언해도 문제가 없는 것 같습니다. 덕분에 이해했어요
객체 크기를 지정한다기보다 유사배열객체를 임의로 만든거라고 생각하시면 됩미다
2차원 배열을 생성하기위해서 크기지정을 하는 것 같아요
아하 이해했습니다. 감사합니다 🙏🏻
저는 Array(N).fill().map( ()=> Array(N).fill(0)) 요렇게 하는걸 선호합니다 ㅎㅎ
저도요 ㅎ
성능차이는 크게 없는거겠죠?! 다들감사합니다 ! 해결완료입니다 🥰
map이 성능은 조금 더 좋은 것 같아요- 감사합니다 ~
코테 땜에 그러시나용? 실무에서 이차원 배열을 만들 일이 거의 없긴 하던데..
요즘 브라우저에서는 최적화가 더 되어서 예전 결과랑 다를수도 있어요 한번 직접 돌려봐서 비교해보는 것도 좋을거 같아요 ㅎㅎ..
넵 코테 때문이에요- 실무에선 사용하는 경우가 거의 없겠군요,, 넵 가능하다면 한번 돌려보겠습니다 !!🙏🏻
코테도 자바스크립트 지원하는 경우면 그 두개 차이로 갈리는 경우는 없어서 너무 신경 안쓰셔도 좋을거 같네여 👍👍 백준 빡센 문제도 다른 병목을 처리하는게 더 중요한 경우가 많더라구요 (sweat)(sweat)
코테 화이팅!!
안녕하세요, 혹시 '소프트웨어 마에스트로'(이하 소마)라는 프로그램을 아시는 분 계신가요..? 현업에서 이 프로그램에 대해 어떻게 생각하는 지 궁금합니다..! 현재 스타트업에서 프론트엔드 인턴을 하고 있고 소마에도 합격을 한 상태입니다. 계약이 끝날 무렵 회사에서는 인턴 연장을 제의해 주셨는데, 취업 관점에서 어떤게 더 현명한 선택인지 모르겠네요.. 회사는 근무환경은 매우 좋고 사람들과도 잘 맞고 일하는 것이 즐겁습니다. 무엇보다 사람들이 정말 똑똑합니다. 다만 구현 위주의 업무가 주이다보니 기술적인 성장이나 코드 품질 개선은 기대하기 어려울 것 같습니다. 속도위주로 작업이 진행되어서요. 보고 배울 사수나 코드리뷰 문화등이 없습니다. 소마는 금전적, 교육적 지원을 해주고 기간 후 나만의 산출물이 생기지만 11월까지 묶여있어야 한다는 단점이 너무 뼈아프네요. 하반기를 제대로 준비하려면 하지 않는 것이 맞는 것 같기도 하구요..(취준에 시간을 쏟으면 프로젝트 퀄리티가 낮아져서요,) 소마를 정말 잘 마친다면 기존 이력서의 포트폴리오를 더 좋게 교체할 수 있을 것 같습니다. 이에 관해 조언해주실 것이 있다면 선택하는데 큰 도움이 될 것 같습니다. 지혜를 빌려주세요. 긴 글 읽어주셔서 감사드립니다.🙏
인턴 연장은 계속 계약직이라는 말씀이신가요?
네 그렇습니다..
소마를 고려해보는 것도 괜찮을 것 같아요! 꼭 소마가 아니더라도 인턴 하면서 기술적인 성장이 어려웠다고 생각된다면 업무를 지속하면서 벽에 막힌 느낌으로 실력 향상이 필요한 시간을 느낄 수도 있는데(사실 제 얘기...) 회사에서 사수 등이 있어서 실력 향상이 되고 있다면 계속 배우면서 성장하는 것도 괜찮겠지만 아직 인턴이고 회사에서 성장이 어렵다면 소마를 거쳐 하반기를 준비하는 것도 좋은 생각일 것 같아요! 소마 자체에 대해서는 주변에 하던 분들도 있던 것 같고 여러번 듣긴 했지만 현재 과정이 어떤지는 자세히 몰라서 더 잘 아시는 분들께...!
그렇군요...! 조언 감사드립니다...!!
네 스타트업은 항상 사람이 필요하기 때문에 정말 회사가 좋으셨다면 소마 끝나고서라도 다시 회사에 연락을(대신 인턴이 아니라 정규직으로) 넣어봐도 되지 않을까 싶어요...! 물론 회사나 상황에 따라 다르고 쉽게 되는 상황은 아니지만 저라면 예전에 좋게 근무하셨던 분이 다시 오신다면 언제든 두팔 벌려 환영이니까요😂
네 말씀해주셔서 감사합니다..!! 올하반기까지는 취업을 마무리짓고 싶은데, 소마를 하게 되면 내년으로 넘어가게 될 것 같아 그 부분이 걱정이네요. 조언해주셔서 감사드립니다..!!
혹시 자바스크립트 완벽가이드 책, 초보자가 읽기에 어려운가요?
조금 난이도있긴한데 자바스크립트 짬좀 먹은 병장이 썰풀어주는 느낌입니다
아 취소입미다..제가 말한건 자바스크립트 핵심가이드;
오호 ㅋㅋㅋ 그래도 감사합니다. 🙂
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 초롱초롱 튜브님~~ 어서오세요 :)
안녕하세여 신입풀스택 개발자인데, 신입은 리액트 위주로 시킨다고 해서 들어왓습니다!!! ㅋㅋ 잘부탁 드립니다~~
혹시 다들 스타일 어떤거 사용하시나요? (스타일 컴포넌트, Emotion 등)
네~ 잘부탁드립니다! 하다가 궁금한게 생기면 글 편하게 남겨주세요 :)
아시다시피 저는 제가 만든 AdorableCSS를 쓰고 있습니다 ㅋㅋ (홍보) https://developer-1px.github.io/adorable-css/
홍보말고 일반적으로는 Sass와 스타일드컴포넌트가 제일 주류이긴 한데요
태일윈드도 조심씩 주류로 편입되어가고 있고 css-in-js는 스타일드컴포넌트에서 물갈이가 필요하다는분위기이긴 하나 이거다 하는 것은 아직 없어요
조금씩*
전 이모션과 태일윈드써용
저희 회사도 태일윈드 사용했습니당
왜 사용하시는지도 궁금해요
어떤것을요?
전 bulma 사용합니다. buefy와..
css 흐름에 대해서는 제가 발표한 영상 전반부에 설명했어요 한번 보세요 :) https://m.youtube.com/watch?v=RUJTkFR1jko
오 ㅋㅋ 따끈따끈한거네요
총4부로 되어 있는데 1부 2부는 css 역사랑 변천사 얘기라서 원하는 내용이 들어가 있을 거에요 ㅎ
스타일드 컴포넌트, 테일윈드 사용하고 있습니다. 사실 테일윈드가 정말 편해서 프로덕션에도 사용하고 싶은데 아직 협업 측면이나 프로덕션에 사용해도 될지 지켜보고 있어요. 그래서 테일윈드는 사이드 플젝에서만 사용하고, 팀원분들과는 스타일드 컴포넌트로 작업하고 있습니다. ㅎㅎ
아하... 그렇군요!!
아하 그렇군요!! 테일윈드도 많이 사용되고있지않나요?
ㅋㅋ 기회가된다면 AdorableCSS 한번 사용해봐야겠어요
감사합니다 :)
테일윈드와 비슷해서 사용하는것도 그렇게 어렵지않을것같아요
와,, 영상 보고 있는데 w(~30) 은 엄청 귀엽고 직관적이네요
w(10~40~50) 이렇게 작성되면.. .엄청 큐트할거같아요
사용은 많이 하시는 것 같은데 배포용으로 사용하는건 잘 모르겠어서 좀 더 지켜보고 있습니다 ㅎㅎ 더 사용해보려구요!
망고님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 좌절하는 라이언님! 반갑습니다 :)
오! 좋은 아이디어네요! 당장 업데이트 하러 갑니다 +_+
안녕하세요 ! vue 사용하면서 keydown 이벤트에대해서 좀 궁금해서요! 현재 vue로 프로젝트 진행중인데, <input @keydown="handleKeyDown" /> 이런식으로 작성했는데, handleKeyDown 함수에서 현재 input에 값을 입력해도 한박자 느리게 나옵니다..!
실제로 input에 "안녕하세요"를 작성하면 console에는 "안녕하세" 까지만 나옵니다.! 어떤방식으로 해결하면 좋을까요?
일단 keyup, keydown, keypress, change 이벤트 사용해봤는데 다 안되고 있습니다.
input 이벤트를 써보세요
@input
아.. 감사합니다!! input으로 변경해보니 바로 해결됐네요. .ㅎㅎㅎ
안녕하세요! OAuth 로그인 구현 처음 해보고 있는데 헷갈리는 부분이 있어서 여쭤봅니당ㅎㅎ 1. Login page는 직접 제작하는 것이 아니라 사용자가 소셜 로그인 버튼을 누르면 Resource Server에서 로그인 페이지를 제공하는 것이 맞나요? 2. Authorization Code는 browser에 저장할 필요없이 백엔드에서 해당 코드를 받으면 바로 Access Token 요청을 하는게 맞나요?
1. 소셜 로그인 버튼만 제작되면, 소셜 로그인 버튼을 눌렀을 때 '이 정보를 사이트에 제공에 동의' 페이지는 소셜 사이트쪽(구글/네이버 등)으로 이동되어서 진행될 거에요! 다만 추가 정보가 필요하다면 소셜 사이트에서 돌아온 이후에 추가정보를 받는 페이지는 직접 제작해주셔야 합니다. 2. 백엔드에서 사용하고 브라우저에 저장할 필요는 없을 거에요!
앗 감사합니다ㅠㅠ!! 그러면 해당 사이트에서 로그인이 성공적으로 이루어지면 Authorization Code를 설정한 redirect uri로 넘겨주게 되는거군요!!!
떨고있는 어피치님이 나갔습니다.
헉.... 이런 조약돌같은 제 상상이.... 들어가게 된다면... 영광입니다... ㅠ.ㅠ
지금 Velog 서비스 저만 호출이 밀리는 걸까요??
오 저도 그래요
작성한 글이.. 날아가지 않게 복사해두었습니다... 하하..
ㅋㅋㅋㅋ 저는 민석님 글 보고 티스토리지만 불안해서 임시저장 눌렀습니다.ㅋㅋ
진짜 호러아닐까요 ㅠㅠㅠㅠ
요즘 책에서 시키는 대로 따라하는 중인데
사진
저 말 잘듣죠
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
현실웃음 터졌어요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
저 짤 약간 밈으로 사용될만한 짤인 거 같아용
ㅋㅋㅋㅋㅋ 뿌듯하네여 감사합니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 너무 웃겼어요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
혹시 awwwards에 있는 화려한 애니메이션(마우스가 스크롤 될 떄마다 화면이 샤라락샤라락 바뀌는 것. 예: 애플 사이트) 같은 건 개인 포트폴리오에서 자주 사용되고 국내 회사 사이트에서는 볼 일이 없을까요? 프론트 처음 시작할 때 이런 거 꼭 만들어보고 싶었거든요🥺
카카오 본사 말고 나머지 서비스들은 스크롤 에니메이션을 과하지는 않지만 조금씩은 쓰는 것 같아요
이게 처음에는 화려해서 멋있는데 빨리 피곤해지기 때문에
프로모션 같은데가 아니면 점점 줄여가고 있는 추세에요
옛날 포트폴리오고 조금 많이 허접하지만, 제가 예전에 그냥 예쁘게 만들어보고 싶어서 최대한 구현을 해봤는데 엄청난 스크롤 애니메이션이 있는건 아니고 유저가 스크롤할때마다 스크롤하는 세기에 따라 숫자를 증가 및 감소시키고 일정 숫자에 다다르면 화면을 이동시키는 그런 애니메이션을 넣었었습니다! 혹시나 참고가 될까 링크 첨부드릴게요! 지금은 레거시에요! 저도 처음에 스크롤 애니메이션을 넣었다가 현재 포트폴리오에는 아예 없앴습니다! https://hyeonsu-jung-f2yuujuwd-junghyeonsu.vercel.app/
호오! +_+ 예쁘네요
전에 저희 방에서 퇴근하는 프로도님이 소개해준 국내는 아니지만 실제 사용하고 있는 유니티 스크롤 에니메이션 페이지도 소개드려봅니다. https://brand.unity.com/ 한번 보고 말 페이지들에서 이렇게 힘 한번 빡 주는 것 같아요. ㅎ
이모티콘
https://developer-1px.github.io/teo-yu-frontend/ 작년 11월 23일 처음 개설이 되고나서 벌써 317명이나 모였네요. 어느덧 아카이브도 4번째 페이지까지 추가되었네요! 너무 너무 감사합니다. 앞으로도 계속 즐겁게 프론트엔드 개발 이야기 함께 했으면 좋겠습니다.
와 유니티 스크롤이라니..
생각해보니 그런 거 같네요… 🫢
직접 만드셨다니 대단하시네요!! 포트폴리오로 보기에 딱 괜찮은 거 같아요
유니티 기깔나네요 와...
네~ 해당 기능은 이번 버전에 반영해서 업데이트 되었습니다 ㅎ
@유용태 (teo.yu) 태오님 혹시 태오님 글을 개인 블로그에 정리하고 제 생각을 깃들여서 포스팅 해도 괜찮을까요?? 만약에 가능하다면 출처는 꼭 밝히고 적을것 같아요 프론트엔드에서 아키텍처에 관한 글을 읽고 꼭 제것으로 소화하고 싶어서 가능할지 여쭤보고 싶습니다
네~ 얼마든지요~~ 저야 너무 너무 좋지요
찐개발자가 되기 위해서 꼭 제것으로 만들겠습니다 감사합니다!!!!!
궁금하신거 있으시면 디스코드에서 따로 물어보세요~ 제가 최대한 알려드릴게요 ㅎ
너무 감사합니다!!
제가 좋아하는 사이트 두개 공유 합니다. 스트라이프라는 결제솔루션 만드는 회사에서 책도 내더군요. 그 출판된 책을 소개하는 사이트입니다. https://press.stripe.com/
암스테르담의 운하를 소개하는 사이트입니다 https://canals-amsterdam.nl/
다음 토이는 꼭.. 그 사랑스러운 고양이님과 함꼐해야겠서요...
너무 감각적이고 멋지네요.. 북마크 해뒀습니다 공유 감사해요!
ㅎㅎ 좋은 피드백 제가 더 감사합니다 ☺️
요즘 vue를 사용하는 곳이 예전보다 많이 보이는 것 같은데 리액트 대신 뷰를 사용하는 이유가 따로 있을까요? 러닝커브가 리액트보다 낮아서 그런건가요?
요기 유튜브 하시는분이 그런거 원리부터 잘 설명해주시더라구여
뷰가 배우기 쉽습니다. 이미 다 정해져 있어서 거기에 맞춰서 사용하면 됩니다.
뷰3 부터는.. 차라리 리액트로 진입하는게 낫다는 생각이 드네요
아하 그렇군요..
우와 감사합니다
감사합니다ㅏㅏㅏ
오..혹시 이유를 알 수 있을까요?
뷰3부터는 리액트 훅스에 영감을 받았다고하면서.. 거의 비슷한 노선을 따라갑니다
오 그러면 앞으로 어떻게 바뀔지도 궁금하네요
뷰2까지는 뷰의 색이 확실히 있었는데 뷰3 Composition API가 도입되고나서부터는 뷰만의.. 아이덴티티가 부족해서 이럴거면 차라리 리액트를 쓰는게 낫겠다 싶은 생각도 듭니다 ㅎㅎ
일본은 뷰 많이 쓴다고 하더라구요
답변 감사합니다!
그렇군요.. 요즘 보면 쇼핑몰? 종류는 거의 뷰를 많이 쓰더라구요
저는 개인적으로 composition api가 vue2에서 불편했던 부분(props나 dom 접근, 로직이 분산되어있던 부분, typescript 지원)을 많이 개선시켜줘서 오히려 더 쓰기 편하더라구요 ㅎㅎ
리액트랑 뷰 둘 다 사용하는데 각자만의 장점이 있는 것 같아요~!
최초의 프레임워크는 angularjs 였고 인기가 많았습니다 그 이루 react는 클래스 컴포넌트로 출시되었고 그렇게 인기 있지는 않았어요 angularjs는 여전히 점유율이 가장 높았습니다 이후 angular는 angularjs개발은 중단하고 2로 리뉴얼을 하게 되면서 아주 급진적으로 완전 다른 class한 방식으로 가면서 어려우면서도 무겁다보니 기존에 배웠던 사람들은 넘어 갈수가 없었습니다 angularjs 방식이 손에 익은 사람은 이제 업뎃을 하지 않을 구시대에서 갈아탈것이 필요했구요 이때 나온게 vue입니다 angularjs의 방식을 그대로 가져오면서 엄청 쉽고 빠르게 정리를 했어요
vue는 기존 angularjs의 점유율을 거의 다 흡수하고 특히 중국쪽 IT 지원을 대폭 받으면서 엄청 큰 생태계을 만듭니다. 이때부터 3대장 소리를 들으며 github star수 만으로는 1등이 되죠
어려운 앵귤러와 복잡한 recat class 컴포넌트에 비해 훨씬 쉽고 단순해서 상당히 많이 퍼지게 되고 그때의 영향력이 지금까지 이어진거라고 보시면 됩니다
최근에 vue가 많아졌다기 보다는 원래 vue가 더 많았지만 react가 hook을 기반으로 하고 생태계 확장을 하면서 순위가 뒤바낀거에요 recat도 많이 쉬워졌로 virtual DOM으로는 SSR을 만들기 쉽고 서버쪽 연동이 쉬웠으니까요
일본이나 중국쪽은 아직도 vue점유율이 꽤 높습니다 하지만 나그네님 말씀하신대로 그건 vue3는 아니에요
전 예전에 handlebar, backbone, requirejs, grunt 등의 조홥으로 했는데 ㅎㅎㅎ 너무 오래 전이지만 이거 쓰다고 Vue로 접근했을때 익숙했습니다.
맞아요ㅋ
vue역시 패러다임이 낡아서 vue3를 만들거라고 에반유가 선언했지만
그 업뎃까지는 정말 오래걸렸습니다 그래서 vue2를 쓰던 사람들도 많이 react로 넘어 왔어요 vue3 점유율은 조금 애매합니다
개인적인 생각이지만 결정적으로 뷰 오너 에반 유 홍콩 시위발언과 중국 특유의 행보때문에 이제 뷰를 비롯한 중국 오픈소스는 사용하기가 꺼려지네요..
저는 vue3도 이제 쓸 만 하던데^^
확실히 vue를 배웠던 사람들이 당시 프론트엔드 주류였고 그따 만들어진 레거시들이 vue로 만들어져 있기 때문에 아직도 회사단위로 vue를 쓰고 있는 곳이 많이 있다고 생각합니다
하지만 vite는 아직 대체재가 없어서...
ㅠㅠㅠ..
우와.. 그렇군요 자세한 설명 너무 감사합니다!!
근데 요새는 학업 래벨에서 react가 디폴트가 되고 있어서 한국에서는 vue가 설자리가 점점 줄어들지 않을까 생각해봅니다 ㅠㅠ
SI에는 Vue2버전이 꽤나 많아요 ㅎㅎ
근데..테오님 말씀대로 점점 줄어들 것 같네용
그쵸 그 시절의 유산들 ㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
백엔드에 힙한 친구들이 호기롭게 뷰 도입하고 나몰라라 하는 경우가 많아서..
react도 클래스 컴포넌트로 된 레거시들 많습니다
react보다는 확실히 vue가 입문하기는 더 쉬웠던것 같아요
맞아요! 제이쿼리 좀 잘다루게 된? SI 친구들이 Vue 도입했다가 웹팩, 바벨 터진다고 연락 많이 주던 시절이... ㅎㅎ
그 시절에는 뷰가 더 러닝커브가 낮았던 것 같아요 리엑트 클래스 시절에는요
그쵸 번들링이 익숙하지 않던 시절 바벨과 웹팩을 무조건 써야 하는 리액트 보다야
cdn으로 등록만 하면 되는 뷰가 jquery쓰듯이 그냥 쓰면 되는 거여서 신셰계긴 했었죠 ㅎ
근데 훅 나오면서 리엑트도 엄청 쉬워진 것 같아요
지금은 어떤게 더 러닝커브가 낮을까요..?
개인적인 생각인데
프로레벨(?)로 가기까지는 어떤 분야든 다 어렵고 힘듭니다
그럼에도 불구하고 러닝커브라는것을 생각하는 이유는
제 생각에는 최소 취직 가능 레벨이라고 생각이 드는데요
저도 아직도 jquery 기반 + PHP로 된 서비스에서 react나 vue 기반으로 다시 작성해야해서 고민 중이었는데 많은 참고가 되네요!
(때에 따라선 취미수준으로 놀기위한 레벨)
웹/앱의 프론트 앤드 분야에서
무슨 프레임워크, 무슨 언어를 고르든 웬만한 타 분야(게임, AI, 데이터 분석, 임베디드 등등등) 보아
보다
정말 정말 러닝커브가 낮다고 생각합니다
그래서 프론트앤드내에서
어떤 프레임워크가 러닝커브다 더 낮다 이런거 따지는게 무의미하다고 생각해요
정말이에요. 순수하게 개발, 즉 코딩만 따졌을때 프론트앤드는 하나도 어렵지않아요
맞아요! 웹은 easy to learn hard to master라사 너무 좋아여
수많은 요구사항들을 맞춰주고
커뮤니케이션을 하고
에러없이 동작하는게 어려운거지
코딩자체는 어렵지않습니다
이지 투 런 하드 투 마스터
좋네요!!
제가 프론트앤드 일 하면서 제일 어렵게 코딩했던게 백준 알고리즘 실버2 실버 3 정도 줄수있을것같네요
프레임워크들 동작방식이나 써야하는 규칙들도
아마 유니티한번 배워보시면 복잡하단 말 다 사라질겁니다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
게임 개발이나 상대적으로 해결하기 어려운 문제를 다루던 분들이 프론트로 넘어오시면 날라다니는 경우가 있죠ㅎㅎ
근데 그건 웹이 정말 희한하게 기반이 잘 닦여서(?) 그렇다고 생각해요 ㅋ
다시말하지만 프로레벨로 잘쓰는건 무슨 분야든 무척어렵습니다. 제가 말하는건 최소 취직 가능 레벨이에요!!!
mvvm이나 mvi 같은 방법도 제일 먼저 만들어지고
이게 앱쪽으로 수출이 되고 있기도 하고 ㅋ
그러므로 이 말에 대한 대답으로, 현 상황에 가장 부합하는 언어/프레임워크를 공부하시면 됩니다. 어떤 상황이라도 프론트앤드분야라면 어렵지 않습니다.
javascript 언어가 "야? 원래 이거 안 어렵게 짜도 되는 거였는데?" 이렇게 해주는 느낌 ㅋ
(조금 심하게 말하면) 뭐가 더 러닝커브가 낮을까? 고민하는 시간에 공식문서 하나라도 더 보는걸 추천드립니다.
그런 의도로 말씀한거 아닌 것 같아서 요 발언은 오해의 여지가 있겠네요
그냥 궁금해서 물어본거 아닐까요?
알고있습니다! 그냥 궁금해서
물어본거잌거
그런 의도는 아니였구요
유투브에서 프레임 워크 관련된 영상을 봤었는데 아무래도 사용하는 개발자 풀이 넓은 쪽이, 커뮤니티도 활성화 되어있고 정보 얻기도 쉬워서 원하는 정보 얻기 쉽다는 것 많이 본 것 같아요 :)
제가 취지에 조금 부합하지 않게 대답한면이 있었습니다 그점은 사과드리겠습니다 🙇♂️
시작에 있어서 막연함이 있을 수 있죠ㅎㅎ
내가 프론트엔드를 처음 접할때 얼마나 힘들고 어려웠을까 라는 걸 생각하면 또 다를 수 있으니까요
얼마전 핫했던(?) 코딩애플 스벨트편에서
스벨트는 고수가 하는 거고 입문자는 리액트를 하는게 낫다는 결말(!)에 약간 재밌다고 생각했었는데
실제로 그렇게 생각하는 사람이 많아서
아... 그럴수도 있겠다 싶더라구요
VDOM이나 hook memo effect 이런 개념들이 쉬운게 아닐 수 있는데 이제는 그냥 너무 당연한거(?) 라서
그런방식을 숨겨놓은(!) 스벨트의 작동 원리를 더 어려워 하는??
가령 VDOM도 아니고 setState를 하는 것도 아닌데 어떻게 업데이트가 되는거지? 왜 전체가 아니라 여기만 재실행 되는 거지? 이런것들?
결국 java도 그렇고 react도 그렇고 제일 많이 쓰고 제일 많이 알려진게 결국은 쉽다고 생각하게 되는 거 같아요 이제는 친숙하니까
에전에는 사람구하기가 힘들었어요 요즘도 힘든 것 같은데.. 그래서 어쩔수없시 둘다 할 줄 모르는 사람들(jsp 하시던 분..)에게 맡겼을 때 리엑트는 많이 어려워하시던데 뷰는 곧 잘 하셔서 훅이 나온 지금을 어떨까해서 가볍게 질문해본거였어요
예전에 jquery와 html이 근본이던 관점에서는 react보다는 확실히 vue가 더 쉬웠을 거라고 생각합니다 jquey쓰는 느낌인데 더 진보한 방식이었으니까요
지금은 저도 궁금하네요~ 저도 그시절 사람이라 ㅋㅋ
지금 react랑 vue같이 배워보는 분들 중에서는 어떤게 더 어려우신가요?
여러 관점이 있을 것 같네용
그 시절에는 리액트 문서는 번역은 없는데 국내 뷰 문서는 적극적으로 번역도 되어있었고
리액트는 훅스API만 외워서 사용해도 웬만한건 만들 수 있어서 다들 요즘은.. 어떻게 느끼실지..!
ㅋㅋㅋ 맞아요 뷰는 그때 문서가 너무 잘된것도 크게 한몫했어요
톡게시판 '공지': 어떤 프레임워크가 배우기가 더 쉬웠나요?
SJ님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 SJ님!! 반갑습니다 :)
반갑습니다! 추천받아서 들어왔습니다 테오님 인사 감사합니다 :)
와!! 추천도 받는 곳이 되었군요 +_+ 어서오세요 ㅎ
여기는 프론트엔드나 개발 얘기가 하고 싶거나 궁금하게 생겼을때 함께 얘기하고 성장하는 공간입니다 ㅎ
너무너무 감사드립니다 !
뭐든 편하게 글 남겨주시면 제가 아는 만큼 많이 답변 드리겠습니다!!
뷰로도 만들어보고 리액트로도 만들어보고 하시면 좋지않을까 생각합니다ㅎㅎ
만들어 보는게 최고더라구요 ㅎㅎㅎ
ㅋㅋㅋ 맞아요
혹시 스벨트 하나만 여쭤봐도 될까요,,?
네!
아는거 나왔네요 +_+
{#each } 로 N 개의 초대창 컴포넌트를 만들었고 그 안에 checkbox 인풋이 있습니다. 그리고 {#each] 외부에 별도로 만든 모두 선택 버튼이 있는데요. 모두 선택 버튼을 누르면 체크박스를 찾아서 클릭하는 것 까지는 해결이 되었습니다.
문제가 된 부분은 해당 체크박스랑 연결된 label 의 디자인이 변경되지 않는다는 점인데, input 에는 bind:checked={isChcekd} label 에는 tailwindCSS 로 {isChecked ? 'bg-gray-600' : 'bg-white'} 이렇게 디자인을 바꿔주고 있었습니다
dom 이벤트로 checked 를 바꿔주고 있으니 역시나 라벨의 클래스도 토글 해야할까요?
요 과정에서 svetle의 값 변화가 아니라 직접 DOM 수정을 하신다는 거죠?
넵 별개의 컴포넌트 에서 값을 주고받는 방법이 없는거 같아서 해당 방법을 사용하고 있습니다,,
store 를 쓰는것 외에는 방법이 없는 같아서요 ㅠㅠ
하지만 label에서 보는 isChecked 값이 변경되어야 반영이 되는 것이니까
결국 스벨트의 데이터를 변경하는 방식으로 수정하지 않으면 해결이 안될거에요
혹시 그러면 그
input 은 지금 display none 으로 가려져있고 label 만 들어나있는 상태입니다. label 에서 체크되어있는 색상이 bg-gray-600, bg-white 이렇게 두개 바뀌면서 사용자 측면에서 보이는데
해당 label DOM 을 찾아서 classList.toggle 해서 강제로 바꾸면... 너무 덕지덕지인 방법일까요
네
ㅠㅠㅠㅠㅠ
알겠습니다 store 를 써야겠네요
감사합니다,,!
프레임워크를 쓰는 이유는 DOM을 쓰지 않고 선언적으로 작성을 하려고 하는 거니까요
그렇네요,, ㅠㅠㅠ 감사합니다!!
가급적 데이터의 변화로 DOM조작이 될 수 있도록 작성하셔야 합니다
넵,,,!!
svetle에서 store쓰면 엄청 쉬울거에요
그냥 전역변수다 값을 읽거나 쓰려면 $를 붙이면 된다 이렇게 접근해보세요
못난 제 코드 수정하러 가봐야겠네요
늦은시간인데 정말 감사합니다,,,ㅠㅠㅠ
화이팅입니다! ㅎ
어드민 페이지 개발하는데 react + mui 기준으로 개발중인데 에디터 추천하실 만한게 있는지 궁금합니다.
어떤 기능이 필요한가요?
기본적인!? 에디터 기능만 있으면 될 것 같은데,,, toast 에디터를 보고있기는한데… 다른 추천 에디터가 있는지 궁금합니다
summernote 쉽게 적용했던것 같아요
React 환경은 아니긴 했어요 ㅠㅠ
https://playground.lexical.dev
페북에서 만든 최신 에디터라고 합니다 . 바닐라고 있고 react기반으로도 쓸 수 있다고 하네요
앗! 두분다 감사합니다!
확인해보겠습니다 ㅠㅠ
저도 적용은 안해봤는데 playground 나쁘지 않아 보여서
https://github.com/zenoamaro/react-quill 이거 next에서 적용해봤어요
한번 검토해보시면 좋을거에요!
저도 quill 사용했는데 괜찮았어요 :)
안녕하세요
혹시 js 최신 소식 무료로 이메일로 받아볼 수 있는 사이트 있을까요?
저는 이렇게 3개 받아보고 있기는 한데…… 솔직히 제목만 쓰윽 보는 정도입니다..........
ㅋㅋㅋ 확실히 요새는 예전에 비해 좀 업데이트나 지각변동이 좀 뜸해진 것 같아요
medium도 프론트엔드만 설정해두면 매일 같이 알려주는데 볼만합니다
http://www.bokziri.com 이런게 잇군요
저도 medium 보고있습니다! 좋은 것 같아요
보통 프론트엔드 개발자가 다루는 기술 스택에 react native가 포함이 될까요? 아니면 프론트엔드 보다는 앱 개발자들이 다루는 기술일까요? 자격 요건마다 요구하는 곳이 있기도 하고 없기도 해서, 궁금해서 여쭙습니다.
프론트엔드의 범위가 애매해서....
필수요건은 아니라고 생각은 합니다
저는
실제로 리액트 개발자 중에는 모르시는분들도 많습니다
답변 감사드립니다 !
요즘IT라는 플랫폼에 teo님 글이 등록되어 있네요! 혹시 직접 등록하신걸까요?_? @유용태 (teo.yu) 보통 좋은 글을 가져다가 링크 형태로 원글로 이동 시키는것을 많이 봤는데, 여기는 원본 글 링크도 따로 제공하는게 없어서.. 혹시 동의 없이 긁어간것인가 하여 여쭈어 봅니다ㅎㅎ https://yozm.wishket.com/magazine/detail/1396/
리액트를 하면 리액트 네이티브를 하기 편한가요? 제가 지인들은 처음에는 둘다 하려고 시도했다가 리액트 네이티브가 엄청 불편해서 안 한다고 하더라고요😅
편하다라는 포인트가 애매한게
RN 에서 새로운 태그들을 알아야해서 러닝이 필요한거지
테오님이 직접 올리신듯? 글쓴이가 테오님이네요
기본적인 로직은 완전히 같습니다.
일반 다른 앱을 배울때보다는 쉽지만
그러게요..! 테오의 프론트엔드로 기재 되어 있네요.
ㅋㅋ 아닙니다 무려 원고료도 받아가면서 게시하고 있답니다 ㅋ (하찮은 값이지만 요즘IT조회수가 벨로그보다 훨씬 높아서 사실 저에게 좋아요 ㅋ)
몇몇 라이브러리들을 알아야하기도 하고요
결국 앱에 관련된거 배워야합니다
아하
오마갓 원고료도 주는군요..! 대박
동현님 말씀대로
그부분은 안배워야돼서 쉽다고도 가능합니다
감사합니다. 리액트 했으면 조금 쉽게 접근할 수 있겠네용
안그래도 궁금했던 주제인데 감사해요
아하! 다행이네요 혹여나 정성스레 쓰신 글이 동의 없이 퍼지고 있을까봐 해서 여쭤봤습니다ㅎㅎ
그리고 퍼져도 괜찮아요. 많이 보라고 쓰는 글인데요. ㅎ
많은들분 답변 감사합니다:)
혹시 올라님 프로젝트 사람들 모아주는 올라(홀라) 담당자님 맞으신가요?!
네 맞아요!ㅎㅎ
ㅋㅋㅋㅋ 유명 페이지 올라월드
뭔가 이렇게 사람들이 알아주니 그때
스님이 해킹할때 옆에 있던사람으로써 뿌듯하네요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋ은인같으신 분이죠 ㅠㅠ
찢었다
이모티콘
권투하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 권투하는 무지님 반갑습니다 :)
안녕하세요 ! 6개월차 주니어입니다. 잘부탁드립니다
안녕하세요 반갑습니다
잘부탁드려요
어서오세요~ 잘 부탁드립니다 :)
프론트엔드나 개발 얘기 커리어나 공부 이야기등 하고 싶은 얘기가 있다면 얼마든 편하게 글 남겨주세요. ㅎ 가능한 같이 얘기해봐요. ㅎ 개발자들은 개발 애기가 고프니까요. ㅋ
삭제된 메시지입니다.
날짜 관련해서 궁금한 점이 있습니다! 날짜만 선택해서 백엔드에 요청할 때(날짜 범위를 정해서 필터링 요청을 하는 등), 날짜+T00:00:000Z라는 특이한 형식을 사용하는걸 봤는데... 원래 프론트-백엔드 사이에는 UTC 시간 기준으로 요청/응답 받고, 이를 화면에 표시해줄 때 프론트에서 현지시간에 맞도록 변환시켜주는게 일반적인 방식이죠...?
그렇지 않을까요? 브라우저에서 현지 시간이나 타임존을 알 수 있으니깐용
react 에서 컴포넌트 4개가 하나의 페이지에 있을 때, 각 컴포넌트의 scrollY 값을 체크해서 현재 scroll이 컴포넌트를 넘을 때 마다 class를 부여하고 싶습니다 ! ( toggle이 아니라 1회성 부여입니다.) 이 경우 어떻게 접근하면 좋을까요 ㅜㅜ
intersectionobserver
로 확인하시면 될거같아요
무한스크롤같이 현재 컴포넌트대비 스크롤 위치를 판단해서 사용할때 씁니다
https://heropy.blog/2019/10/27/intersection-observer/ 저도 이거보고 했었어요~
감사합니다 !!
혹시 사파리에서 promise all로 같은 url에 요청을 할때 첫번째 요청만 가는 이슈를 경험해보신분 있을까요? 크롬이나 파이어폭스에서는 제대로 동작하는데 사파리에서만 요런 이슈가 있네요. 비슷한 상황으로는 2가지를 찾았는데 원인을 모르겠습니다. 일단 맥북이 지금 없어서.. 사파리로 테스트가 안됩니다. 일단 중요한 비즈니스 로직이라 요청 내부에서 160ms의 딜레이 주는 방식으로 동작은 하게 만들었는데 원인을 분석해보고 싶어서요. https://stackoverflow.com/questions/59339561/safari-skipping-xmlhttprequests https://github.com/axios/axios/issues/3211
let videoList = await Promise.all([ firstPromise , secondPromise ]); // after let videoList = await Promise.all([ firstPromise , // 160ms delay for Safari sleep(160).then(() => secondPromise ), ]);
이런 식으로 일단 동작은 하게 만들어놨습니다.
suspense 사용하실 때 최상단 레이아웃에 사용하는 편인가요? 아니면 각 페이지 마다 다르게 하시나요?
각 페이지마다 다르게 한다는 의미는 suspense fallback에 들어갈 컴포넌트를 다르게 한다는 의미일까요?
음,,, 로딩 컴포넌트를 만들어서 띄우는 중인데… 최상단 라우트 쪽에 <Route element={ <Suspense fallback={"loading…"}> <Outlet /> </Suspense> } > 이런 식으로 넣어두니까 모달창에 api 콜하는게 있는데 모달창 뜰때마다 메인 레이아웃에 로딩바가 돌아서요...
글쓰기를 잘해야 하는 이유 https://brunch.co.kr/@rickeygo/282
좋은 글이라서 한번 읽어보세요 :)
해당 api 콜 하는 바로 상단 컴포넌트 suspense로 감싸주는건 어떨까요? 아니면 api 콜에서 suspense를 막는 옵션이 있다면 막는것도 방법일듯합니다.
저는 swr를 쓰고 있는데 swr은 suspense 옵션을 제공하고 있습니다. https://swr.vercel.app/ko/docs/suspense
안녕하세요!!!! nextTick에 대해 질문드려용!
created에서 nextTick쓰는거는 DOM생성되고나서 코드를 실행시켜라~ 이건데 methods는 호출시점에 코드가 실행되는데 methods안에 nextTick 쓰는거랑 차이점이 뭔가용??
DOM을 API를 쓰려고 할때 가령 스크롤 이동과 같은 행동은 DOM이 그려져야 접근이 가능하다보니 프레임워크가 DOM을 그리기를 기다리는 용도등으로 사용합니다
결이 다르다는 거에 대해 구체적으로 알고싶어요
혹시, 카카오 소셜 로그인 연동할 때, 구현방식으로 왜 SDK 방식이 아닌 REST API 방식을 사용하는 분이 있는 건가용? 이렇게 하면 인가 코드를 받은 후에 카카오 토큰을 받아오는 번거로운 과정을 겪어야 하지 않나용?
워메,, 넘나 감사합니다 사이다에요!! ㅠㅠ
그게 auth 2.0아닌가요
SDK 방식으로 카카오토큰을 바로 받고 백엔드에 넘겨주는 게 더 간단해 보여서 궁금합니다
sdk방식은 프론트가 편하지만 그걸 만드는사람의 리소스가 많이 들거고
결국 누구의 리소스를 줄여주느냐의 차이일거같아요
그걸 만드는사람의 리소스가 많이 든다는 게 혹시 무엇을 말하는 지 알 수 있을까용?
redux나 vuex, ngrx, mobx등과 같은 상태관리들은 전역 스토어와 반응 데이터와 같은 같은 클라 내부 상태를 다루는 것이 중점이었습니다. react-query의 경우에는 백엔드 API를 통한 데이터를 상태로 보고 해당 데이터를 관리하는 것을 주 목적으로 하기 때문에 상태관리라는 말은 함께 사용하지만 방향성이 다르다는 얘기였어요
sdk를 만드는사람의 리소스는
그거 그리고 매번 업데이트도 해줘야하고요
필요없나
sdk 만드는 사람이라하면 여기서 카카오인가용
카카오 개발자가 일을 더 하냐 고객이 일을 더하냐 차이일거같아요
아하
REST API는 꼭 javascript가 아니어도 가능한데
오 이게 더 맞을수도 있겠네요
SDK는 특정 언어나 프레임워크에서 쓰기 편하게 만들어 주는 거라서
아 그러면 리액트를 사용하는 저로서는 JSSDK를 사용하는 게 수월하겠군용
sdk는 그럼 모든언어를 만들어줘야하는거라서
그렇죠.
궁금했어용
왜 REST API 방식으로 액세스 토큰을 받아오지?
그러면 인가 코드도 받아와서
번거롭지않나?
근데 무슨 말씀이신지 알 거 같아용
애초에 sdk로 해도 그렇게 진행은 될거에요
sdk로 하면
고객사가 안만들뿐 결국에 보안상에 차이는 없는데
바로 access_token 받아올 수 있어용
인가 코드 말고용
그건 내가 바로 받아오는건데
결국에 처리는 sdk에서 해주는거잖아요
클라이언트 컴퓨터에서
아
무슨 말인줄 알았어용
그럼 클라이언트단에서는 단계가 변하는게 없어요
결국 해내는 처리인데
유저가 아니라
카카오 개발자가
더 일을 한다
검색 기능 자체에도 Debounce를 사용하시는분 있나요? (자동완성 리스트x 단순 keyword 검색)
감사합니다!
타자 한 번 칠 때마다 이벤트 발생해서 그러신 건가용?
아니요 키워드 입력하고 제출할 때 한번 발생합니답
저는 고민될 때 하면 좋다고 생각하는건 고민 안 하고 무조건 해요
디바운스 사용하는 이유가 그러면 제출 버튼을 여러번 누르실까봐 그런가용?
ㅋㅋ 저는 자동완성없는건 안써요ㅠ 죄송..ㅋㅋㅋ
푸하하
엇 맞습니답
키워드 입력하고 제출하면 페이지 바뀌지 않나용?
안 바뀌고, 통신이 가는 건가용?
맞아요 ㅎㅎ 하단에 리스트가 출력됩니당
바로 keyword를 초기화시켜주긴합니다
출력이 되면 출력 됐다는 걸 표시하는 상탯값을(리스트출력 = true)을 두고, 리스트 출력이 true일 때는 통신이 가는 걸 아예 시도 조차 못하게 하는 건 어떨까용?
isSearch와 같은 상태값으로 조절하시라는 말씀이시군욥 ㅎㅎ 그게 나을 것 같습니다 :) 감사합니다
좋은 글이네요! 글 쓰는게 참 어려운거 같아요. 안쓰던 근육을 쓰려는 생각에 미리 피곤해지고ㅜㅜ 공유해주신 글 읽고 글을 왜 써야하는지 중요성을 다시끔 깨닫네요! 글쓰기야말로 인생의 장기적인 무기라 생각하고 꾸준히 해봐야겠습니당 올해는 꼭 매달 한번씩은 글 쓰리라!💪
바쁘셔서 읽지 못하시는 분들을 위해서 요약했습니다. 산문은 도망칠 구석이 없어서 논리적 사고를 만드는 것을 도와준다는 내용입니다. 그 근거로 최고 인물들은 산문을 많이 썼고, 발표 때 ppt에서 산문으로 변경한 기업의 성공사례를 말해줍니다. 글을 작성하면 성공을 할 수 있지만 성공한 인물들에게도 글쓰기는 스트레스라고 하네요. 그럼에도 불구하고 작성한다고 합니다. 이익이 더 크기에. + 저도 글쓰기의 힘을 믿어요. ㅎㅎ 다들 좋은 밤!!
백엔드!님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요
안녕하세요!! 아뇽님~~ 반갑습니다 :)
이곳은 프론트엔드가 또는 개발이 궁금해질때 같이 이야기를 나누고 공유해보고자 만들어진 공간입니다 ㅎ
혹시 저는 백엔드인데
네
프론트엔드랑 같이 플젝 진행하고싶어서
꿈: 카카오 가서 테오님이랑 같이 일하는 것
프론트엔드 여기서 구해도 됩니깡?
이모티콘
오오!! 일단 질러 보세요 ㅎ
오호 가능하군요 감사합니다
혹시 저랑 같이 깃허브 이용해서 프로젝트 진행 하실분 있나용?
음.. 조금 더 구체적으로 알려주실수 있나요?
일단은 기간이나 인원 프로젝트 방향 정도요~
어떤 프로젝트인지 궁금합니다 !
넵
궁금궁금!
그냥 간단한 프로젝트에용 ㅠㅠ ... 너무 큰거는 아니에요 ㅎㅎ
테오님 궁금한 것이 있는데요
맨날 야근해서 공부 할 시간이 없으면 어떻게 하는게 좋을까요 ....?
어떤프로젝트인가요?!!
인스타그램을 간단하게 만들껀데 같이하실 분 있으신가요 ? 기간은3주정도 잡고 있습니다. 인원은 프론트 두명정도 구하고있어요 !
야근하는걸 공부로 활용하시죠..!
백엔드는 저혼차서 진행하려고 합니다!
9 to 12 집 가면 01시 아침 6시 기상인데 스트레스 너무 쌓여서 주말에는 친구들 만나서 술 마시게 되네요 ㅠㅠㅠㅠ
조금 더 구체적으로 설명하자면
이직하시죠..!
이직이 답일까요
9 to 12는 너무 심하네요..
ㅠㅠ 왜 야근을 많이하시는 건가요…? 일이 많아서 그런건가요? 아니면 눈치가 보여서 그렇게 일하는건가요?
9월말까지는 다녀야하는게 9월에 대학 서류 접수해야해서요 ㅠㅠ
………….와우……..?
좀 더 구체적인거는 같이 하실분 있으면 말해들겠습니다... ㅎㅎ
1인 프론트에 프로젝트 끝나면 또 프로젝트 합니다 ..
돈을 그만큼 주나요?
많이 해주는 조언인데 그런 환경은 빨리 벗어나야 합니다 야근을 하는게 절대 효율적이지 못하다는 것은 여러가지로 증명이 되었습니다! 하지만 그냥 이직을 하는 것이 쉽지는 않는데다가 그런 마음으로는 그 기간을 버티리가 힘들겠죠 그래서 이직의 마음으로 문제 분석을 하는 것을 권해드립니다
도대체 뭐가 문제일까? 과제 분배를 잘 못하나? 문화의 문제인가? 소통이 안되나? 어디서 비효율이 오나? 기술이 낡았나? 중간에 노는 사람이 있나?
1인 프론트 ㅠㅠ 으아 너무 공감가네요
내가 할 수 있는 건 뭐가 있나? 소통을 바꿔볼까? 사람을 뽑아 달라고 해봤나? 왜 못 뽑는다 그럴까? 인턴은 안되나?
지금은 1인은 아니지만... PM도 따로 없으면 대개 주어지는 프로젝트만 쳐내야 하고 코드 리팩토링을 위한 시간을 회사에 요구하기도 어려워지더라구요
사내에 프론트 상황을 제대로 파악하는 다른 개발자가 없게되니...
퇴사하고 시간 좀 많이 가지면서 이직 공부하는 것은 나중에 이직 할 때 마이너스가 될까요 ???
너무 레거시 코드인데 제가 바꿀 수 없는 상황이여서요 ..
때려치면 그만이라는 마인드로 일단 지금 상황을 교보재로 사용해보길 바랍니다
기술적으로보다는 멘탈만 단단해집니다 ..
야근의 문제가 코드의 문제인가요?
아뇨아뇨
프로젝트가 어제 끝나묜
오늘 또 프로젝트를 시작해요..
그 프로젝트의 기간이 너무 팍팍한거 아니에요?
회사가 이러니 개발자가 들어오면 바로 나갑니다 ...
회고할 시간도 없더라구요 늘... 다음 프로젝트 바로 시작하고
저도요
블로그고
개인프로젝트 개인공부도 못 하네요
제 깃헙 잔디는 탈모가 심각해요 ㅋㅋㅋ
문제를 조금씩 환기하고 해결책을 제시해보고 시도를 해보세요~
그 환경을 바꿀 수 있는게 최선일텐데, 그게 도저히 안되는 환경이라면, 일단 나 죽었다 하고, 남는 시간에라도 최대한 준비해서 나가는게 최선일 것 같네요
저도 jquery 레거시에... 심지어 얼마전까지도 SVN 쓰던 환경이라 깃헙은 휑했어요
버티라는 소리 아닙니다 당장 나가도 손해에요
일단 분석을 하고 바꿀수 있는 것은 바꾸려고 해보세요~ 어차피 이직할건데 회사를 교보재라고 생각해보세요
5-6년차가 되면 스스로 환경 세팅이나 프로세스 개선은 해야 하는 짬이 됩니다
야근하시는 시간을 보고는 헉 했습니다. 일만 제대로 쳐내셔도 대단하십니다 정말😭
저도 비슷한 상황이라 많이 고민했는데, 퇴사하고 다시 취준하시는 것도 방법이기도 하지만 대부분 지양하라고 조언해주시더라구요. 그래서 찾은 방법은 옆그레이드 역시 이직 시 지양하는 바이지만 처하신 상황이라면 최대한 플젝하면서 이력서 한줄이라도 추가하시면서 계속 다른 회사 지원 하시면서 진짜 개발 실력에 도움이 되는 업무환경을 가진 회사나 하다못해 퇴근 후 공부할 시간이라도 확보될 수 있는 회사로 옮길 수 있도록 도전해보시는 것도 방법일 것 같습니다.
그때를 위한 연습과제라고 생각해보세요. 12시 퇴근은 절대로 비효율적입니다
8개월차라
이직도 힘드네요 ..
그러니까요~ 이직을 하겠다는 생각만 있으면 회사생활의 의미가 더 없어져요
저도 그렇게 jquery 상태에서 버티다가... 이제 신입분들도 모던 js 기반 신입분들만 들어오다보니 기존 코드로 일감을 분배하기도 어려워 결국 리팩토링을 하긴 해야해서 react나 svelte나 살펴보면서 어떻게 옮길 수 없다... 이제서야 보게 되더라구요. 일단 회사 내에 인력이 충분치 않으면 시간이 나지가 않을 것 같아요, 저도 올해 동료분들을 맞이해서 그나마 살펴볼 시간이 나서...
중고신입으로 간다는 마인드로 지원하시면 그 부분은 문제없으실 것 같아요
일단 그 상황에서도 의미부여와 목적을 찾는게 중요합니다
아 !
힘들지만
다른 관점에서 보면
많은 프로젝트를 했다고도 생각 할 수 있네요
그럴수도 있는 거긴하지만 자기합리화를 하기 시작하면 이직을 못해요
ㅋㅋㅋ
ㅋㅋㅋㅋㅋ
앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
사내에 같이 프론트 얘기를 할 수 있는 동료가 진짜 소중하더라구요
내가 하는 모든 행위는 더 나은 환경을 만들기 위한 노력이며 그중에 이직도 있는 것이고
9월말에 퇴사하고
돈 좀 모은거랑 해서 공부 다시 해야겠어요
저랑 똑같은 생각 하고계시는군여… ㅋㅋㅋ
일단 말해도 안 바뀌고 신입 뽑아준다고 하네요 ㅋㅋ
네! 퇴사 할거라면 많이 트라이 해보시길 바래요
인수인계 할 시간도 없어서 ㅋㅋㅋ
넵넵 !!!
저도 이번년도 중으로 이직할 생각입니다
같이 파이팅해봐요 ㅎㅎ
불만이 아니라 진짜로 개선을 해보시기 바랍니다
퇴근 시간도 줄이시구요
저도 10월부터 코테, 갠플, 이론 공부하면섯 불태우려구여 !
진지하게 고민하고 분석해보세요
네네 퇴근시간 줄여야해요 진짜 ㅋㅋㅋ
택시비 한 달에 60만원 ...
물론 법카지만요 ㅋㅋ
테오님 궁금한게 있는데 만약 이직할거에요 님 같은 상황이면 어떻게든 하나라도 성과내는게 맞는거겠죠 ?
저도 비슷한 상황이라…
헉 순간 깜짝 놀랐네요 ㅠㅠㅠㅠ 택시비는 지원되어서 다행입니다
하고싶은 공부가 많네요 ㅋㅋ
요즘 nest에도 관심 생겨서
Next + nest로 사이트 하나 만들겁니당
헤헤
퇴사할거 생각하시는거라면, 평가 신경 쓰지 마시고, 칼퇴하시면서(평가 신경 안쓰시게 되는거니까) 재직하시면서 이직 준비하시는게 나을 것 같기도 해요 저는
야근 너무 많이해서
네! 나중에 그래야 면접에 할 말이 생겨요
예비군 가고싶네요 ㅋㅋㅋㅋ
일단 공백기간이 있으면 좋게 안보일 수도 있거든요
아하..
그렇군요 지금까지의 성과가 임팩트가 없다면.. 눈에 불을켜고 일거리(성과)를 찾아내야겠군요…
뭔가 레거시를 만지다보면 번들러 도입 시에 결국 인프라에서 가로막혀서(저 같은 경우 PHP단이 다 전담하고 있어서) 주도적으로 백단이 담당하고 있는 인프라 업무를 뺏어와야 모던 환경으로 개선을 고려할 수 있겠더라구요... 아직 npm도 못쓰는 환경이었어서(babel... 제발...)
우리 모두가 매우 특출난 사람이라면, 공백기간이 있거나, 이직이 짧게 자주 있거나, 비전공이거나, 성격 이상하거나, 이런거 다 무시하고 이직할 수 있겠지만, 일반인인 이상 마이너스 될만한건 최대한 배재하고 가는게 좋다고 생각합니다 ㅋ
제가 프론트로 만든 예치 상품 200억 예치 됐는데
배재 배제 베제 베재, 한국말 어려워요 ㅠㅠ
이거 잘 쓰면 되겠죠 ?ㅔ
exclude...
그럴때는 serverless로 만들어서 보여주세요 백날 말로 떠들어봐야 모르는 사람른 몰라요 그냥 해서 보여주세요
php로는 REST만 가져가게 해서 api연동해서 보여주면 가능할거에요
설득이 안되는 것은 진짜 몰라서에요
설득보다 용서가 빠르다고 좋은 것은 경험하면 못 돌아갑니다
가을이나 겨울에 부트캠프 갈까 하는데..
아내분께...도 자주 하시는거겠죠...?
요즘에 지원자가 많아선지 코테 보고 들가는곳도 있드라구요..
ㅋㅋㅋㅋㅋㅋㅋㅋ
여기 계신 분들 다들 엄청 열심히 사시는거 같은데 출근-퇴근-공부(혹은 갠플젝)-잠 이런 하루 루틴으로 거의 생활하시나요..전 퇴근하면 운동하고 쉬고 친구들 만나고 개인정비 등등 하면 공부 각잡고 할날이 별로 안생기던데ㅠ 이직업을 유지하기 위해선 다른 취미나 휴식없이 인생 전체가 전부 개발로 물들은 삶을 살아야 하는가하는 많이 고민이 되고 있습니다 ㅠ
그 성과라는게 코딩이나 개발의 결과물이 아니어도 좋습니다~ 잘 이해가 안될지도 모르겠지만 업무문화 개선을 해본 경험이 있다는 것은 진짜 큽니다!!
용태님 좋은 답변 감사드립니다 ㅎㅎ.. 회사에서 이것저것 하다보니 좀더 전문성을 쌓고싶어졌고.. 무엇보다 일거리가 많이 없어서 고민이었는데 이번년도는 전문성은 개인공부 + 사이드프로젝트로 쌓고 회사에서는 업무 위주로 경험을 많이 쌓고 개선을 해봐야겠네요 !!!
정말 감사합니다 !!!! 제가 일단 당장 다닐 동안 도전 해봐야겠네요 !!!ㅔ
ㅋㅋ 저도 처음에는 그런줄 알았는데 결혼하고 애낳고 애키우면서 일해보니 일할 시간 애볼 시간 놀 시간 낼려면 다 내지는 거더라구요~ 취미나 휴식을 안하고 있다면 그냥 한번 해보시기 바랍니다
아주 오래전 영상이라 화질이 매우 안좋지만,, 제가 공부 안될때 종종 보는 영상인데 보시면 자극 되실거 같아서 링크 첨부합니다...ㅋ
재수하다 힘들때 밥먹으면서 한번씩 보면서 힘냈었는데, 너무 오래되서 화질 좋은 영상이 없네요 ㅠ
이모티콘
혹시 고객대응 관련해서 유지보수 업무도 같이 하시는 분들은 프로젝트(신기능 개발)와 유지보수(기존기능 오류 수정 등)에 시간을 어떻게 할애하고 계실까요? 특정 시간이나 요일에는 프로젝트 개발에만 집중하거나 하는 시간이 있을까요?
야근 원인 중에는 업무 시간에 정작 해야하는 일을 못하고 긴급 유지보수나 회의 등으로 빠지는 경우가 많았던 것도 같아서 혹시 다른 분들은 따로 이런 오류 처리하는 기간을 두시는 지 궁금했습니당
그것도 하나의 일이니까. 일정산정에 들어갈 요소라고 할 수 있겠죠? 산정했던 시간보다 더 걸리게 된다면 야근을 해서 채워넣을수도, 일정을 연장할 수도 있는거구요!
저 같은 경우에는 신규 개발와 이슈대응 기간을 완전히 나눠서 대응을 하고 있습니다. 저도 프론트는 혼자 하고 있어서요
조그마한 si다닐때 생각 나네요... 1인 1프로젝트에 맡은 프로젝트는 자기가 유지보수라 년차 쌓이고 열심히 일할수록 일만 늘어나는 회사 였는데....
그러게요
역시 분리가 좀 필요한 게 맞나보네요, 출근하자마자 이슈관련해서 호출되다가 고객지원 시간 끝나면(=퇴근 2시간 전쯤) 그때서야 원래 보던 프로젝트로 돌아가는 일도 종종 있다보니...
이모티콘 남 이야기가 아닌거 같아…
이모티콘 아무튼 많은 조언들 감사합니다! 뭔가 넋두리만 잔뜩 한 것 같지만 그래도 레거시 환경을 모던 환경으로 끌어올릴 개발자는 아직 필요하니까 모두들 파이팅이에요! 저도 더 능동적으로 환경을 바꾸는 개발자가 되도록 힘내겠습니당
네~ 개발에서 컨텍스트 스위칭과 예열하는 시간은 많이 비싸서
가급적 이거하다가 저거 하다가 하는 것은 좋지 못해요
저도 그랬는데 6시까지 전화 받느라 하나도 일 못하고 프로젝트는 완료하겠다고 매일 야근하고..지금 생각하면 왜 그렇게 미련했나 싶어요. 처리한 내역도 잘 기록해놓고 업무내역도 꼼꼼하게 기록해놓고 처리한 내역을 자료화 하는것도 중요한거 같아요.! 저는 정리하는 습관이 없어서..
어차피 이틀을 일할거라면 하루를 2번씩 하는 것보다 하루씩 나누는게 더 효율적이죠
사진
서경님 트위터 스타되셧네여
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ꙼̈
ㅋㅋㅋㅋ
앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
대박 ㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ스타의 탄생이 여기서 ㅜ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋ앜ㅋㅋㅋㅋㅋ
테오~~ 게더타운 오시나요?!!!
ㅋㅋㅋ기억나네요 어젠가 ㅋㅋㅋㅋ
혹시 반응형웹에 대해 참고할만한 자료가 있을까요? 제가 졸업프로젝트로 프로야구선수 성적예측 사이트를 만들고있는데 아무래도 배포 이후에 친구들이나 지인들에게 한번씩 해봐~ 하면서 말하기에는 모바일 화면이 있는게 좋을거 같아서 반응형 웹을 데스크탑, 태블릿, 모바일로 나눠서 구현 중인데 코드량도 길고 이게 맞는건지싶고, vw, %, rem, px 등 어떤 단위를 써야하는건지도 자꾸 왔다갔다거려서 몇번을 뒤집었네요ㅜㅜ
드림코딩 좋아요 ㅎㅎ
드림코딩 반응형 유튜브에 치면 많이나옵니다 말씀하신 단위들
네 한번 참고해보겠습니다!
사진 2장
이렇게 하고있긴합니다
ㅎㅎ멋집니더
안녕하세요 스프린트 6기의 결과물을 공유 합니다. 이번 스프린트 6기는 전부 취준생들만 모였었네요 :) "주니어 개발자가 스크롤 이벤트 힘들어서 만든 스크롤 애니메이션 라이브러리 입니다." 많은 관심 부탁드립니다. https://scroll-animations-js-web.vercel.app/
톡게시판 '투표 종료': 어떤 프레임워크가 배우기가 더 쉬웠나요?
스프린트는 금액이 어떻게 되나요 ??
무료입니다!!!! ㅋㅋ
헉
신청은 어디서 하나요 ?
4월 신청은 마감했구요 5월달에 또 시기가 되면 여기에 공유하도록 하곘습니다 :)
넵 감사합니다 !!!!
안녕하세요 밀린 채팅 읽다가 느낀 건데, 뷰가 이미지가 많이 안좋은 프레임워크인가요? SI에서 주로 쓰인다는 말이 보여서요. 저는 임베디드 개발을 하다가 이번에 프론트엔드로 전향했는데요, 지금 회사에서 뷰/넉스트를 쓰고 있습니다. 이직도 고려해야할텐데 미래에대해 매우 절망적인 문장들밖에 없네요..^^;;
리액트로 넘어가야 할는지..^^;;
전혀요~
금융권에서는 뷰 마니써요
뷰의 전성기가 예전이었다면 지금은 리액트 전성기인데
국비동기들 이야기..
전성기 시절에 만들었던 것들은 아직고 현업과 레거시에서 쟁쟁한데
스타트업이나 서비스회사는 리액트..
스물스물 리액트의 전성기가 오고 있다 이렇게 보면 될것 같아요
그렇게 된 걔기는 java처럼 뭔가 학업쪽에서 React를 많이 하는 것도 있고
네카라쪽에서 React를 많이 쓴다더라 하니까 그러게 되는것도 있고
스물스물 넘어오는 중이지만 vue 나쁘다거나 하는 것은 아닙니다.
지금도 사실 뷰 개발자 입장에선 리액트가 굉장히 전성기로 보이거든요(파이 차이도 있구요) 백엔드의 자바 포지션에 더욱 가까워지고 있는 거군요,,
취업쪽에서 React쪽 TO가 더 많다고 느껴지니까 사람들이 React를 배우는 쪽으로 몰리고 그러다보니 다른쪽 개발자를 구하기가 어려우니까 그러면 우리도 React할까 하면서
네! 그렇죠 React가 Java가 되어가고 있는 거죠
Svelte를 주류로 하는 입장에서 마냥 유쾌하지는 않습니다. ㅋ
옛날 3대장 시절 처럼 뭐쓰세요? 이런거 물어보고 각자 좋다고 생각하던거 쓰던 때가 좋아요 지금은 좀 눈치 보여요. ㅋㅋ
우리회사는 그래도 각자 하고 싶은 기술스택으로 프로젝트를 진행하는 편인데
전사 공통 컴포넌트나 라이브러리 이런거 나올때마다
React 얘기가 나오다 보니...
혹시??? 아는 마음에. ㅋㅋㅋ
CTO들이 React를 택하면서 하나로 프레임워크를 통일하면서 생기면서 React를 택하는 것도 한몫하는것 같아요
그렇군요 ㅠㅠ 말씀 감사합니다. 이것 참 쉽지 않네요… 저희 회사도 다른 뷰 개발자 분께서 진행하던 프로젝트가 리액트로 개발하겠다고 프로젝트가 아예 날아간 적이 있었거든요. 뷰도 그나마 파이가 큰 편인데도 이렇게 규모가 작으면 스벨트는..ㅠㅠ쩝…
그렇군요..ㅠㅠ
그쵸~ Vue가 절대 생태계가 작지 않죠 ㅎ
저희 회사도 Vue파도 있습니다. ㅋ
그래도 테오 님도 스벨트 파이시고, 테오 님 동료분 중에서도 Vue 파가 있다는 말씀에 약간 힘이 되네요..
ㅋㅋㅋㅋ React가 훨씬 많아서;; ㅎ
열심히 표교활동(?) 중입니다. ㅋ
ㅋㅋㅋㅋㅋ ㅠㅠㅠ 포교활동이 꼭 대성공하셔서 리액트를 뛰어넘는 스벨트 붐이 일어났으면 좋겠습니다. 뷰도 살짝 꼽사리 꼈으면 좋겠네요..ㅎ
스벨트 보니까 뭔가 다시 뷰를 보는 느낌이 많이 들어서
어?! 이거 이러면 뷰 아닌가?! 싶었어요
에반유가 vue보다는 vite에 빠져서 ㅋㅋ
뷰3 script setup 축약 문법이랑 좀 비슷한 감도 있는 것 같습니다 ㅋㅋ
마자여 ㅋㅋㅋ 그거 보고 더 그런 생각 들었어요
뷰 본체보다 비트가 더 ㅎ………널리퍼지고 있는 것 같습니다 ㅋㅋㅋ
아..언제 써보징..
새로운 프로젝트 시작할 때 하는건 할 수 있겠는데, 중간에 프레임워크를 피보팅하는건 어려운 것같아요 ㅜㅜ
지금 시점에 무엇을 해야하는가? 하면 리액트를 선택하게 되는것같아요. 저는 개인적으로 vue 특히 nuxt 의 dx가 정말 압도적이라 다른걸 쓰기 싫어하는 사람인데도, nuxt3나 vue3 를 멱살잡고 라이브러리 지원등의 생태계 이끌고가는사람이 없어서 결국엔 리액트를 택하게 되더군요ㅠㅠ
vue3는 ref.value 를 굳이 써줘야하는데 이런걸 안하도록 컴파일러 레벨에서 설탕치기를 하고, prop type으로 넘기는 제네릭도 잘 추론이 안돼서 컴파일러 레벨에서 해결(reactivity transform)하고 있어서
버틸수만 있다면 한번 버텨보시는 것도 ㅋㅋ
없으면 내가 리드한다!
나를 따르라!
취업을 하는 사람에게는 감히... 말을 하기는 어렵지만
이럴바에는 svelte 나 solidjs 쓰는게 낫지않나 하는게 사람심리인듯합니다 ㅋㅋ
테크리드는 손들고 하겠다고 하면
좀 시켜주긴 하드라고요 ㅋ
하지만 svelte나 solidjs처럼 마이너한것을 하면
누가 책임지냐며... 우리 회사 계속 다시실꺼죠? 이렇게 되는거라 .ㅋㅋ
다니실꺼죠?*
ㅋㅋㅋㅋㅋ
흑흑 왜 다녔던 인턴회사가 넉스트였던 것일까..
카카오 오기전에도 프리랜서로 일할때
svelte로 개발을 하고 납품을 했는데
후임팀에서 결국 다시 react로 다 바꿨다라는 후문을 들었습니다. ㅋ
svelte 개발자를 못 구했다라고 하더라구요
2년전 일이니 ㅋㅋㅋ
당시 svelte 개발자를 구한다는 것은 진짜 말도 안되는 거였죠. ㅋ
와우..
요번에도 당장 프로젝트 재구축 하나 해야하는데 팀의 인력수급과 팀원의 커리어를 위해 next를 택했습니다 ㅠㅠ
마음은 nuxt인데 무기명 투표로도 10:1 로 패배
아...
proxy 기반에서 편하게 누렸던것들 memo 할 생각하니 아득하네요! ㅋㅋㅋ
React도 그래서 그거 개발하고 있대요 ㅋ
속으로 이걸 왜 좋아하는거야 궁시렁
react forget 요거죠?
네~ React는 2013년에 만들어진거라. ㅋ
결국 컴파일러 레벨에서 설탕치는건데 사람들은 환호할듯.. 내로남불
ㅋㅋㅋㅋ
이걸 좀더 우아하게 처리하는게 solidjs 라고 보고있습니다 ㅋㅋ 이게 더 흥했으면..
불변성 기반 반응형이 결국 리액트의 큰그림 동시성을 위한 희생인데 이게 dx를 너무 갉아먹는것 같아요
그렇지만 대~~규모로 협업을 하면
react의 ts처리나 eslint 처러나 개발 생태계나 테스트 도구 백엔드 framer같이
퍼져있는 생태계들의 힘이 어마무시하긴 하더라구요
svelte하고 있으면 정상동작인에 ts에서 IDE 에러를 낸다거나
eslint가 이상하게 처리한다거나
props 타입 추론 못해주거나 한면
음... 아직 멀었구나... 하는 것들은 있어요
오 맞아요 vue도 마찬가지입니다 ㅋㅋ vue-tsc 라고 따로 나와서 설치해줘야하고 스토리북도 템플릿 파싱 제대로 못해주고
solidjs는 react 하던 사람이 넘어갈까? 하는 것도 있어요
이런게 어느규모 이상 넘어가면 발에 걸리더라구요
dx는 유사한데 되는게 없다 보니까
react 문법을 그대로 쓸 수 있는 preact나 inferno도 전환을 못 시켰는데 solidjs는 가능할까? 하는..
맞아죠 ㅠ 그래.. React 하자.. 이러면서. ㅋ
남들이 10년동안 지뢰밭 다 밟아준거 쓰자.. ㅋ
ㅋㅋㅋㅋㅋ
vite 는 포기할수없는데 next 호환 가능하게 언제될지
next는 아마 swc로 굳히기하는 것 같아요
아무리 swc 러스트 기반으로 트랜스파일속도를 높여봤자 온디맨드 모듈로드에서 오는 속도랑은 차이가클거 같아서.. vite가 swc를 품을수있지않나요?
vite는 결국 esbuild 이기때문에 swc 품기에는 애매한 면이 있죠ㅠㅠ 메인테이너들도 다 다르고용
MS도 go로 tsc native도 만들고 있더라구요
swc는 또 rust로 작성되어있으니..
그쪽은 그쪽대로 잘 발전하길 바라야겠네요
백엔드!님이 나갔습니다.
안녕하세요 뷰린이라 그런데,,, script부분에서 name: '' / props: {} / data() / watch: {} / computed: {} / created() / mounted() / methods: {} 이거 쓰는것도 순서가 있는지 궁금합니다!!!!!
현재 리액트 기반 프로젝트를 유지보수 하고있는데요,, 클래스형으로 이뤄져있고 hook같은것은 사용하지 않고 있습니다ㅠㅠ 입사한지 이제 6개월차인데 저 혼자 프론트를 담당해서 혼자 구글 찾아보는게 일상입니다,,, 제가 못하는 일은 외주 쓰신다고 하는데 그냥 퇴사하고 다른 회사 알아보는게 나을까요 지금까지 참았는데 요즘 너무 힘드네요ㅠㅠㅠㅠㅠㅠ
퇴사하는 이유가 정확이 어떤것인가요
어떤게 힘든지 확실히 안나와있어서요
사실 미래가 잘 안보여서 같아요
저희회사가 그냥 한 프로젝트가지고 다른것을 확장해서 만드는 정도라
사실상 프론트 개발자가 인력이 많이 필요하진안흔데
기존 프로젝트 버전업도 전혀 안하고 있던거 색깔만 바꿔서 쓰는정도?
순서 상관 없어요 https://eslint.vuejs.org/rules/order-in-components.html#vue-order-in-components 요러한 eslint rule 이 있긴한데 컨벤션을 위한 통일일뿐 순서는 무관합니다~
야근도 많으신가요
우왕 감사합니다!!
데이터(json)를 html(React 컴포넌트)로 마크업(테이블이나 리스트 등)해서 한 페이지로 인쇄하려고 합니다. (1 데이터 - 1 페이지) 해당 데이터가 한 페이지에 인쇄할 사이즈보다 큰 경우 축소해서 한 페이지에 인쇄되어야 하는데... 어떤 방법이 좋을까요ㅠㅠ?
야근은 없어요ㅠㅠ
출력한 다음 출력한 거의 높이를 구해서 인쇄 사이즈 보다 큰 경우 글자 크기를 줄인다던가..? 하면 안되나요
야근 없으시면 사이드나 공부 하시면서 이직 준비하시는게 낫지 않을까요..?
넵...지금 그래서 따로 프로젝트 하고있긴 한데 불쑥불쑥 화가 나서 퇴사먼저 하고싶은 맘이 드네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 일도 일인데 사람들이 너무 힘들게해요
이렇게 하다보면 언젠간 1년이 될까 싶기도한데...빨리 나가고싶어서요,,
너무 힘드시고, 돈이 당장 안 급하시면 퇴사 하시고 준비하셔도 될수도 있고.. 돈이 필요하면 당장 취직 안 될것도 생각해서 다니면서 준비하는게 맞지 않나… 싶네요. 제 개인적인 생각입니다 ㅎㅎ
데이터 형태가 고정적이지 않아서, 글자크기를 계산하는게 힘들 듯 합니다 ㅠㅠ...
저도 포유님 말씀대로 일단 준비해서 이직 결정나면 그때 퇴사하시는걸 추천드립니다
이런 경우 이미지나 pdf같은걸로 변환해서 인쇄 해야되려나요ㅠㅠ
데이터를 출력 하는게 어떤식인가요..? 그냥 쫘르르륵 html로 출력 되면 부모에 ref 달면 height가 측정 될거 같은뎅
저도 동의해요. 이직 준비 시간이 엄청 부족하시다고 느껴지지 않으면 다니시면서 준비하시는걸 추천드립니다!
최근 선퇴사하고 이직 준비해본 사람인데 그리 급하지 않으면 다니시면서 준비하시는게 심적으로는 매우 좋아요 ㅎㅎ 그런데 저는 나름 선퇴사한 이유가 있긴했습니다. 경력이 짧아서 골라갈수있는 입장이 아니라 여러 회사에 지원해서 도전해야하는 입장이라 시간이 많이 필요하다고 판단해서 퇴사했어요. 예상대로 시간은 많아졌지만 심적으로 매우 힘들었습니당 ㅎㅎ
확정된 건 아닌데, 계산서 같은 테이블 형태일 듯 합니다. 테이블의 height에 따라서 글자크기를 변경하라는 말씀이신거죠?
네 기준치 height를 넘어가면 그게 안 넘어가게 글자 크기를 줄이든.. 뭐를 줄일 수 있을거 같은데
정확하게 어떤 상황인지 모르겠네요 ㅠ
요구사항이 아직 확정된게 아닌 상태에서 프린트 방법들만 리서치 중이라서요 ㅠㅠ... 다른 부분은 고정해두고, 테이블 부분만 말씀해주신대로 글자크기를 height에 따라 가변적으로 하면 될 듯 합니다 감사합니다!!
이모티콘
이직할 때 1년정도의 경력은 크게 쳐주진 않죠??
8/8/15/8 개월로 이직했습니댜 ㅋㅋㅋㅋ
현재는 11개월ㅋㅋㅋㅋㅋㅋ
오호…
이직할때 경력이 중요한가요??
경력보단 실력이 중요한것같습니다 + 운
저는 그냥 운이 좋았던거라 생각합니다 운 98ㅋㅋㅋㅋ
저렇게 이직했으면 운이 없었던건가..
저도 경력보단 실력이라고 생각합니다만 꼰대들은.. 아직 경력도 중요하게 생각하더라구요..
저도 이런 상황이긴 한데... 그래도 여기서 하는게 마이너스는 아니니까 병행하면서 준비하는게 아무래도 좋긴하니 마음을 다시 다잡아야겠네요ㅠㅠ
실력도 경력도 중요하죠 둘중하나만 볼리가 없으니
저는 이직하려는 이유가 가장 중요하다고 생각해요 이직하는 이유의 정당성이라고 해야하나
저같은경우 회사가 망한경우가 몇번돼서..ㅋㅋㅋ
프엔2022님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 백엔에서 프엔으로님 반갑습니다 :)
혹시 리액트로 모달을 만들어야 할 때 보통 어떤 방식으로 만드시나요? 라이브러리를 사용할지, 직접 구현할지 고민입니다😂
전 직접하는 것을 좋아합니다 !
직접구현
혹시 직접 구현하시는 이유가 있을까요?
질문있는데요. 본인이 성장 정체기라고 느껴지는 경우 보통 어떻게 극복하시나요?
제가 요즘 그런 걸 느끼고 있는데 존버가 답인 것 같습니다
매일 조금씩이라도 계속 하면 결국은 그 기간을 거쳐 다시 성장에 가속도가 붙지 않을까요?
디자인 요구사항을 유연하게 대처할수 있고 서비스에 맞게 커스터마이징할 수 있어서(?)
매일 조금씩 뭐를 계속해야할까요?
저는 누구를 가르쳐보거나 혹은 완전 다른 분야사람과 협업을 하면서 저는 극복했습니다.
저 같은 경우는 자바스크립트와 리액트 이론 공부를 하면서 조금씩 만들고 있는 중이에요
답변 감사합니다!
오호… 그렇군요. 참고하겠습니다! ㅎㅎ감사합니다
시간이 문제인거같아요! 충분히 시간이 있으면 직접구현하고, 충분한 시간이없으면 라이브러리 써야하는거같아요ㅎㅎ
몸을 바쁘게합니다..
저는 새로운 기술을.. 지금 그래서 웹지엘 보고있어요
인사하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 인사하는 제이지님~~ 반갑습니다 :)
안녕하세요~ 신입 프론트엔트 개발자입니다~! 잘부탁두립니당
네~ 어서오세요 환영합니다.
삭제된 메시지입니다.
답변 감사합니다!
개발 얘기가 궁금하거나 하고 싶을때 근데 주위에 그럴만한 사람이 없을때 여기서 하고 싶은 얘기 마음껏 해보시기 바랍니다! ㅎ
네 안내 감사합니다~
디자인시스템에 미디어쿼리(phone, tablet, laptop, desktop)가 정의들 하시나요?
컴공과 2학년님이 나갔습니다.
생각해보면 UI 프로그램을 개발할때에는 딱히 더 안헀던것 같아요
모바일과 데탑이 반응형보다는 적응형으로 더 개발하게 되다 보니까
그렇군요 ^^ 저는 테마프로바이더에 지정해서 넘기기로 했네욤ㅎㅎ 나중에 브레이크포인트가 바뀌면 한번에 싹 바뀌게
적응형으로 작업하려면 모바일여부 판별해서 페이지를 따로 작업하나요 아니면 컴포넌트를 따로해서 작업하나요
페이지를 따로한다는거는 모바일이면 모바일 페이지로 이동시키는걸 말합니다
페이지는 동일한 URL을 쓰되 모바일여부를 판별해서 루트 컴포넌트를 교체하는 방식을 쓰고 있구요
넵!
공통 컴포넌트가 있으면서 모바일 전용, PC 전용 컴포넌트 셋은 분리가 되어 있습니다.
이번주에 경력직 면접인데 엄청 떨리네요 ..ㅋㅋ 여기 계신분들은 경력직면접때 기초지식 같은거 많이 물어보셨나요? 예를들어.. 프로토타입, 클로져, 실행컨텍스트 등등..
네이버 지도같은 경우https://m.map.naver.com/ 이런식으로 분리가 아니라 컴포넌트로 분리시킨다는 말씀이신거죠??
그러면 모바일 여부는 device판별해서 하시는건가요
네~ 맞습니다. URL은 같은 URL을 사용합니다.
네 userAgent로 구별하고 있어요
넵! 감사합니다!
저희도 이번에 모바일화면으로 디자이너가 준거 억지로 늘려서 쓰고 있는데
적응형으로 바꾸자고 해서
들어갈거같아서 물어봤습니다 감사합니다
저는 주로 프로젝트쪽으로 질문을 받았었는데요. 경력도 연차에 따라 다르겠죠? 그래도 주로 최근에 한 프로젝트 위주로 물어 볼것 같은데 경험있는 다른 분들은 어떠셨나요?
4년차입니다..!
저는 애초에 프로젝트 설명만 이력서에 넣어놓고 그거 질문만 하도록 유도 한다고 해야하나?
그렇게 해놓습니다
위에서 말씀드린 저런 개념같은걸 실무에서 코드로 짜는거다보니 잘 사용할 수 있었는데, 막상 면접때 물어보면 말로 설명하기가 너무 어려울 것 같아서 걱정입니다.
처음에는 공통된 부분이 많아서 반응형으로 만들었는데 점점 조금씩 수정사항이 생기다 보니까... 그냥 같은 컴포넌트라도 모바일 PC를 분리하는게 더 속편하더라구요. PC 수정 사항 때문에 모바일이 뻑나는 것도 힘들고요 ㅎ
실무자 짬 바이브가 느껴지게 대답하면 인정해줄거라고 생각합니다. ㅋ
전 이번에 신입으로 지원했는데 저런것보다 이벤트루프, 브라우저 동작원리를 많이 물어보시더라고요
사진
오 면접 고수이시네요 .. ㅎㅎ
경험자에게는
해봤다라는 걸 어필하는게 더 좋은 거 같아요
알고있다보다
아 역시 ㅎㅎ 그렇군요 감사합니다.
제가 전에 어떤 프엔개발자님과 얘기를 나누는데 반응형은 많이 안쓰는 추세라는 말씀을 하셨는데 실제로 현업에서는 그럼 반응형보다는 적응형을 많이쓰나요?
그거보다 ㅋㅋㅋ 면접 자주보니까 질문하는게 보이더락고요
결국 경력자에게 물어 보고 싶은건 "우리 회사 프로젝트 이런걸로 할껀데 할수 있어?" 를 물어보니까요. ㅋ
그래서 제가 곤란한 것들은 빼고
신입 면접에서는 많이들 물어보더라구요, 프로젝트경험이 없으니 ㅎ
질문을 받고싶은것들은 놔두는 식으로 이력서 수정했어요
케바케인거 같아요
저는 반응형도 괜찮긴한데
거의 실무에서는 그렇게 되는거 같아요 반응형이 나중에는 더 귀찮아 지는 경우가 있어서
이 부분 공감되네요 ㅎ 감사합니다
서비스 특징에 따라 다른데
주로 읽는 컨텐츠가 많은 서비스들은 반응형도 괜찮은데
상호작용이 많은 서비스일수록 그냥 적응형이 훨~~씬 편한것 같아요. ㅋ
마지막 대답도 인상깊네요
그냥 모바일로 만들고
PC에서 적당히 늘려서 보여주게하자. ㅋㅋ
그런데 퀄이 좀 떨어지는 느낌이라
그렇지만 많이 택하는 방법입니다. 너무 맞는 말을 하셨네요 ㅎ
맞아요 그래서 요새 데탑시안도 요청하는데
디자이너분이 한분이라 바쁘기도 하고 애초에 데탑 시안을 그리시지도 않고
삭제된 메시지입니다.
그래서 요즘까지 하고있는데 데스크탑디자인이 애매하다고 해서 바꿔야할시기가 왔어서요 ㅋㅋ
죄송해요 잘못올렸어용 ㅠㅠ
그렇군요...
괜찮아요. ㅎ
잘못올려서 바로 삭제했습니당
저 혹시 데스크탑에서는 마우스 hover로 진행되는 애니메이션을 태블릿이나 모바일에서는 어떻게 처리하는 편인가요? 태블릿이나 모바일은 hover가 안되는 것을 알고있어서 저같은 경우는 그냥 모바일이나 태블릿에서는 hover 전의 css는 버리고 hover 후의 css만 적용했거든요!
저는 PC는 :hover mobile은 :active가 되도록 만들고 있습니다.
이 질문을 듣고 생각해본게, 태블릿에 마우스를 연결하면 hover이벤트가 발생할수도 있지 않을까요..?!
그래서 미디어 쿼리에 hover유뮤 체크하는 것도 나왔어요
아직은 크롬버전마다 되는게 있고 안되는게 있다고 해서
아직 활성화 단계는 아니지만 저런식으로 포인터유무에 따른 CSS를 따로 적어주는 식으로 하게 될 거 같아요. ㅎ
오호 신기하네요 ㅎㅎㅎ
이번에 신입으로 좋은회사 두곳에 최합을 받았는데 두 회사의 성격이 너무 달라 어디를 선택해야할지 조언을 구하고 싶어서 질문드려요. 두 회사 연봉이 비슷하다는 가정하에 한 회사는 B2B 형태고 복지가 거의 넘사수준으로 좋은데 다른 회사는 B2C형태고 일이 많은 느낌이에요. 그렇지만 신입 개발자로서 더 많이 성장할 수 있는 곳에 가고 싶은데 어디가 좋을지 모르겠어서 고민이네요..
일단 편한 곳 가세요 일 많으면 저처럼 집에 못 갑니다
ㅋㅋㅋ 그럴 수 있겠군요
더 재밌는 분야는 어떨까요?
저라면 면접에서 더 배울수있다고 생각했던곳 이나
재직중인 사수분에게 커피타임, 커피쳇 요청해서
이야기해보고 들어가볼거같아요!
(같이 일하면 재밋겠다?)
두 회사를 비교하는 표를 만들어서 비교해보시면 어떨까요 ㅋㅋㅋ 저는 점수로 매겨도 결국 제가 살짝이라도 더 끌린 곳을 선택하긴 했었습니다…..ㅋㅋㅋ(정량적이 아닌 정성적 선택...)
합리적인 척을 하지만, 비합리적인 선택을 했습니다…
저라면 첫번째회사 갈거같네요. 복지가 넘사면 이것저것 현금성 복지로 원천이 연봉보다 꽤 높을 가능성이 있어서... 이직할때도 퍼센트 기준으로 연봉협상을 하기때문에 초봉이 높은것도 중요하다 생각합니다 ㅋㅋ 저는 낮은 초봉때문에 맘고생 좀 해서요
오… 다들 조언 감사합니다. 재미있는 분야는 아직 기업에서 정확한 업무가 무엇인지 모르겠어서 잘 판단이 안가고 면접 같은경우는 한 회사는 5:1이라 정말 형식적인 느낌의 면접을 본거같고 다른 회사는 1:1로 자세하게 물어보면서 그 면접관에 대해서도 어떤 느낌인지 알아갈 수 있어서 더 좋았던거 같아요
그렇군여… 복지까지 합친 초봉을 생각해봐야겠네요
B2B 회사에서 하는 기술스택과 업무만 괜찮다면 전자로 갈 거 같아요! 만약 스택과 업무가 현재 하려는거랑 방향이 다르다면 나중에 더 고민이 많아질 수도 있어요! 경력 찰수록 부담되욥
B2B의 경우 Vue/React 로 이루어진거 같고 B2C는 React이고 몇몇 부서에선 Next.js를 도입한거 같긴해요
신입때 초봉이 다들 중요하셨나요? ㅎㅎ 저는 크게 중요하다고 생각을 안해서 여러분들 의견이 궁금합니다
저도 표를 만들어서 비교해보고있긴한데 그래도 어려운거같아요 ㅋㅋㅋ
저는 1000단위 이상 차이가 나면 중요해지는 것 같아요 ㅋㅋ
적게주는 좋은 회사도 있겠지만 좋은 회사일 수록 많이 주지 않을까란 생각을 가지긴 했어요 ㅋㅋㅋ
저희회사 보면 맞는 것 같아요
좋은 회사는 많이 줍니다
안 좋은 회사는 진짜 조금 줘요
그래서 연봉을 기준으로 보진 않고 그냥 좋은 회사면 많이 주겠거니~ 하면서 구직했었습니다
1000단위면
돈이..
ㅋㅋㅋㅋㅋㅋㅋㅋ
연봉은 안중요하진 않습니다 ㅋㅋ 근데 200정도면 제가 실력을 키울수 있는회사인가 보고 가긴 합니다
프론트는 일은 만들어내려면 얼마든지 만들어낼 수 있는 것 같은데 이미 일이 많이 쌓여있으면 들어오는대로 처리하기 어려울 수도 있을 것 같아서 저도 복지 좋은 B2B쪽 추천합니다! 그런데 라이브 서비스에서 오는 고객 피드백은 B2C가 많아서 초반에 느끼는 성취감은 후자가 조금 더 클 수도 있을 것 같아요! 추가로 고려한다면 같이 일하는 개발팀 규모가 중요할 것 같네용
이모티콘 저는 복지도 중요하게 보지만...! 유연근무제 없으면 9시에 못 일어나서 출근 못하는 사람...
닉행일치신가요 ㅋㅋㅋ
조언 감사드립니다.
연봉도 중요하지만… 보통 좋은 회사는 연봉이 높습니다 ㅋㅋㅋ
좋은 회사일 가능성이 올라가는 느낌…
블라인드에 올라온 글 보셨어요? "vue 공부하면 친중이야?? (IT엔지니어)" https://kr.teamblind.com/s/hrQfoZcd
끊이지 않는 vue vs react 떡밥이지만, 핫글에 올라오면서 많은 댓글이 올라왔길래 링크 투척해봅니다.
블라 특성상 거친말들도 많으니, 걸러서 들으시면서 정보만 취하세요 ㅋ
블라는 회사 리뷰 볼 때 너무 좋아요 일단 점수 낮은거만 봅니다 ㅋㅋㅋ
블라가 익명성 때문에 별로인점들도 많지만, 오히려 그것 때문에 괜찮은 정보도 많이 올라와요. 회사 소식을 블라를 통해서 먼저 듣는 경우도 생각보다 있구요 ㅋ
삭제된 메시지입니다.
회사 리뷰 너무 높아도 의심스러워요 ㅋㅋㅋ
저희회사는 조작하는거 옆에서 봐서 그런지
더 그런 생각이 들더라구요
헉 ㅋㅋ
혹시 잘 되던게 npm install을 새로 받으니 태그 인식이 안되면서 전부 에러가 뜬 현상 경험해보신분 있나요...........
버전도 그대로고 소스도 그대론데... 새로 clone받아서 하니 인식을 못하네요...
제대로 설치 되셨나요..? package.json 있는곳으로 잘 찾아가셨나요..
package-lock.json이나 yarn.lock은 따로 없으신거인가요?
네........
혹시 리액트라우터 5버전이
지원이 끝났나요?????
잘되던게 갑자기 라우터 태그오류가 나네요ㅠㅠ switch에서료ㅠㅠ
라우터 최신버전 6이고 Switch 가 Router 로 바꼈어요
3년동안 버전5였는데 작년 11월에 버전 6돼서
npm install 을 하셨는데 버전 6이 깔리셨을 가능성이 있을 거 같아요
package.json에 버전이 명시가 되어있어서 node_modules에서도 패키지 내용 보면 버전은 5로 깔려있는것 확인했습니다ㅠㅡㅠㅠㅠㅠ
사용하는 node버전은 12이고 npm은 6버전대 사용중인데 같은 package.json을 사용한다 해도 이게 노드버전에 따라서 jsx인식이 안될수도 있나요??
jsx element type 'switch' is not a constructor function for jsx elements.
이런 오류가 계속납니다ㅠㅡㅠ
앗 혹시 리액트 버전은 몇이신가요
Switch 로 해야하는데 switch로 하셔서 그런거 아니에요?
리액트 16.13.1입니다!
엇 아뇨 제대로 되어있어요! 심지어 이부분의 코드는 전혀 건들인 부분이 없습니다,,,,,,,,
타스 에러예요 리액트 에러예요?
타스에러입니다!
코드를 보여주셔요
사진
현재 dev에선 이렇게 버전 선언되어있어요
사진
이렇게 태그오류가납니다ㅠㅠ
위에 import 되어있는 부분엔 오류가안나요
BrowserRouter는 상위에 있나요?
없습니다
저 컴포넌트를 호출하는 상위 부모 컴포넌트에는 있어요!
사진
실행시 이런 오류가 납니다 router관련 태그에 전부요ㅠㅠ
노드모듈 지웠다가 vscode 나갓다가 다시 들어와서 설치해도 해결이 안되나용??
넵...
install도 하나씩 다시 해봣습니다ㅠ
정안되면 깃헙 주소를 공유해주실수있나요?
엇 회사 소스라 공유는 어려울것같습니다ㅠㅠ
import { BrowserRouter, Switch, Route } from "react-router-dom"; function Router() { return ( <BrowserRouter basename={process.env.PUBLIC_URL}> <Switch> <Route path="/home" component={Home} /> </Switch> </BrowserRouter> ); } export default Router; 전 이렇게 했는데 에러안나서 공유합니다!
Router.tsx로 따로 컴포넌트 만들었습니다
빨간줄에 마우스 갖다대면 머라고 에러가 뜨나욤?
요런 jsx에러가 납니닷
tsconfig 수정되었나요?
아뇨..
ㅠㅡㅠ......
아무것도 하지않았러요ㅠㅠ하,,,
뭔가 코드에 switch로 쓰신게 있어서 저렇게 소문자로 에러난게 아닐까요 흠
저거 리액트 라우터 도메
돔
6버전으로 올라가면서 문법 바뀌엇습니다
문서 확인하고 적용하시면 됩니다
스위치 없어졌어요
아니면 5버전대로 다운그레이드 하시면 됩니다
5버전으로 깔려있는거 아닌가요 ㅋㅋㅋ
아님 @types만 깔린건가..
Header 도 안되는거보면
리액트 라우터 문제는 아닌거같긴한데
넵 다 5버전으로 되어있습니다..
아 Header 말고 Helmet이요
인스톨할때 원래는 안나던 npm 워닝이 많이생겼는데 혹시 npm버전문재일수도 있을까요?
이래서 yarn berry를..
npm 버젼 안맞으면 lockfileVersion 이 달라져서 warning이 많이 날수 있는데요, 근데 그렇다고 react-router-dom 5버젼이 6버젼으로 깔리진 않을거 같긴 한데요..
흠..
npm 캐시 한번 지워보시고 다시 설치해보시는건 어때요? npm cache clean --force npm ci
근데 패키지락은 왜없어요?
아 패키지락 없나요..?
그럼 npm ci는 안되겠네요..
허허 ㅋㅋㅋ
정말모르겠네요
에디터 껐다켜도 그러신가요 ㅎㅎ..
tsserver restart가 가끔 필요할때도..
삭제된 메시지입니다.
혹시 react에서 axios로 로그인 관련 token 처리에 대해 이해를 더 하기 위한 유용한 포스팅이 있을까요?
axios interceptor access token 로 검색해보세요 좀 나오네요
access token은 로컬스토리지나 쿠키에 저장하기도하고, 그냥 바로 axios.defaults.headers ~~ 해가지고 넣는 방식도 있는거 같아요
로그인 하고 토큰을 받아오면 https://yamoo9.github.io/axios/guide/config-defaults.html#%EA%B8%80%EB%A1%9C%EB%B2%8C-axios-%EA%B8%B0%EB%B3%B8-defaults-%EC%84%A4%EC%A0%95 이렇게 넣고.. 에러나면 리프레시 토큰으로 다시 받아서 다시 넣고
오.. 너무 감사드립니다. 알려주신거 전부 찬찬히 읽어보겠습니다!
이모티콘
카카오나 네이버 로그인 기능 연동에 관해서 궁금한 것이 있습니다. 구글링을 하다보니, 대부분이 Rest API 방식을 사용하여서 인가 코드를 카카오에서 받아오고, 그 인가 코드를 다시 카카오에 보내서 access_token을 백엔드로 받아오는 방식을 설명하고 있는데용
그냥 프론트에서 javascript-SDK 방식을 사용해서 프론트에서 카카오에서 로그인이 되면 받아오는 access_token을 백엔드에 보내면 안되는 건가용?
됩니다
요즘 관심있는 협업와 리딩에 관련해서 좋은 글이 보여 공유 합니다 https://www.lemonbase.team/f5c5ebbb-ab65-493c-96e8-99315057adc2
네! 제가 백엔드로 access_token을 받아서 직접 데이터 받아오는 것 까지 눈으로 보는데, 왜 어째서 구글링에 많은 정보들은 Rest_API 방식으로 하나 의아해서용..
사진
이런 글을 봐서
흠.. JS-SDK로도 나는 충분히 가능한 거 같은데.. 뭐지 싶어서용
백엔드에서 토큰을 받아서 처리를 하기 위해서라고 쓰여있네요
자체적인 계정 시스템이 있고(백엔드) 카카오 토큰정보도 같이 포함해서 관리를 하고 싶었기에
프론트엔드에서 로그인을 하는 방식이 아니라
백엔드 계정과 카카오톡 인증 계정을 연동하고 싶었기에
프론트에서 카카오 토큰을 받아서 백엔드로 전달하는 방식이 아니라
백엔드에서 카카오토큰을 받아 자기네 계정에 붙여서 전달하기 위해서는 REST API 방식으로만 가능했다
이렇게 읽히네요
같은 말을 다르게 말해본건데 혹시 이해하기 어려운 구간의 말풍선에 답글 달아주세요
SDK 방식이든 REST API 방식이든 어쨌든 백엔드에서 카카오토큰을 받게끔 하는 것이 목적이라고 생각하는데요! SDK 를 이용해서 프론트에서 카카오 토큰을 받아서 백엔드에 전달하는 방식이 RestAPI를 이용해서 백엔드로 카카오토큰을 받는 방식보다 수월하다고 생각하는데요!
왜냐하면 RestAPI 방식을 사용하면 프론트에서 인증코드(인가코드)를 받은 후 이 인증코드를 백엔드에 전달하고, 인증코드를 받은 백엔드는 이 인증코드를 이용해서 카카오에 API를 쏴서 카카오토큰을 받아야하는 과정을 거쳐야 하는데.. 처음 든 생각이 "음..? SDK 이용해서 프론트에서 백엔드로 카카오토큰을 전달하는 방식이 더 수월하지 않나?"
그런 생각이 들어서용
혹시.. 프론트 미들웨어 정도는 쓸줄아는 비전공자 개린인데요. 독학중인데 무척 힘듭니다 ㅠ 5-6주간 짧은 기간동안 교육하는 프로그램이 떴던데 (딱 제가 모르는 부분들이네요) 이걸 하는게 좋을까요 아니면 스스로 공부하는 습관을 위해 혼자서 계속 공부 해보는게 나을까요,,??
그러네요~ 좀 찾아보니까 sdk를 못쓰는 환경인 앱에서 쓰기 위해서 REST API로 바꿨다 정도의 글이 보이네요
sdk 사용이 되는 환경에서는 sdk를 쓰는게 나아보입니다 혹시 sdk에서는 지원하지 못하는 기능이 있을까요? 저도 잘 아는 건 아니라서 추측만 해보게 되네요
이런 개인이 선택해야 하는 부분에 대한 조언을 드리기가 참 힘든데 그 5-6주가 협업 위주라면 추천드리고 공부나 강의라면 본인 성격을 보고 판단해보시기 바랍니다
독학중 힘드신게 커리큘럼이나, 방향성 혹은 불안감 이라면 프로그램을 가는게 좋을거같아요!!
저도 더 찾아봐야 할 거 같습니다! 일단은 sdk로 진행해보고, 문제점이 발생하면 공유하도록 하겠습니다! 감사합니다!!
해당 교육 프로그램이 돈만내면 들을 수 있는건가요?
원티드에서 하는 프리온보딩인데, 돈은 50정도 내고 과제등으로 점수 받고 선발하는 것 같아요
아 어떤분이 그거 물어보셨었는데
프리온보딩은 수료하면 돈 돌려주는 걸로 알고 있는데 아닌가요?
뭘 어떻게 공부해야 될지도 모르겠고 공부 리스트는 있는데 공식문서 보는 것도 너무 힘들고 막막해서 ㅠㅠ
팀으로해서 좋았다고 하셨던거같아요!
실례되는 이야기이지만 요즘 교육기관 들어가는게 만만치 않아요 경쟁률도 생각보다 높고요 그래서 경험상 지원해보고 합격한다면 그때 걱정하셔도 괜찮다고 봅니다
아.. 넵넵 감사합니다
수료후 돈무조건 돌려주는지는 잘 모르겠어요 정확히 찾아본게 아니여서
아 후기 감사합니다 ! :)
공과금 22퍼인가 떼고 돌려준다고 하던데요 사실상 10만원정도 내고 하는거더라고요
아항 감사합니다 저렴하네요 ㅋㅋ
나쁘지는 않네요
뭔가는 만들고싶은데, 사이드나 토이 하기에는 기획이나 디자인이 귀찮을때 해도 괜찮을거같네요!
좋은데도 선발해서 뽑더라구요 ㅠ
아무나 안뽑고 ㅠ
프리온보딩 코스 수료했었는데, 수수료 정도 떼고 전액 환급해 줍니다! 경험 상 대부분이 팀플이어서 협업 경험에 좋을 것 같아요. 기술을 하나부터 열까지 가르쳐주는 방식이 아니라 독학으로도 충분히 배울 수 있는 기술들이 있긴 하지만, 강제성이 있기 때문에 짧은 기간 안에 많은 걸 배울 수 있다는 점이 장점이자 단점인 것 같습니다
리엑트 쿼리랑 잘 어울리는 상태관리가 어떤게있을까요? 리코일이 종종 보이던데.. 사용해보신분 계신가요?
저 리코일이요!
아아 역시 리코일이군요!
그냥 리덕스랑 써도 문제 없습니다 즉, 아무거나 상관없..
useState가 참 잘 어울리던..
요즘 리액트 쿼리 + 리코일 조합을 꽤 많이 사용하시는 것 같네요 ㅎㅎ
전 리덕스를..
주니어님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 주니어님~~ 반갑습니다. 어서오세요 :)
오늘부터 스프린트 7기가 시작이 됩니다. 🚀 관련 사항은 메일로 공지를 드렸으니 7기 참가 신청을 한 참가자분들은 참가신청을 했던 email을 꼭 확인 부탁드려요!
앗 혹시 8기 메일 등록을 어디서 하면 좋을까요?
아직 5월달 일정이 확정되지 않아서 8기 이후 신청은 지금은 받고 있지 않아요. 너무 길게 기다리게 하다보니 나중에 해당 일정이 안된다고 하는 사람들도 생기고 해서 신청과 시작의 갭이 너무 커지면 좋지 않다는 생각이 들었습니다
일정을 확실히 결정한 뒤에 공지를 통해서 신청을 받도록 하겠습니다~ 많은 관심 감사드립니다
모던 자바스크립트를 공부하다가 의문이 생겨 질문드립니다. 지금 요소 사이즈와 스크롤 챕터에서 Place the ball in the field center 문제를 푸는 중입니다. 해답에서 css를 통해 너비와 높이를 설정하지 않으면 브라우저가 이미지의 사이즈를 알지 못해 모두 0이 된다고 해서 실제로 기하 프로퍼티들을 모두 콘솔에 찍어보니 0이 나오는 걸 확인했습니다. 그런데 console.dir로 살펴보면 기하 프로퍼티들에 값이 설정되어 있더라구요. 어떠한 이유에서 0으로 출력되지만 dir에는 값이 설정되어있는지 알 수 있을까요? https://ko.javascript.info/size-and-scroll
관련 링크 남겨두었습니다!
log와 dir 차이 때문에 값이 달라지는 것은 이해하기가 힘드네요~ log나 dir을 실행하는 시점은 같은가요?
사진
사진
사진
혹시 제가 아예 잘 못 이해하고 있는 부분이 있을까요?
dir의 순서를 바꿔봐도 결과는 마찬가지더라구요
console.log(ball)은 어떻게 나오나요?
일단 설명을 드리자면
log에서는 해당 값을 저 시점에서 가져와서 출력을 한 상황이고
console.dir에서 ball은 객체로 찍은 상황입니다
그래서 콘솔에서 해당 하는 값을 열어서 보여줄때
객체의 내부 프로퍼티가 갱신이 되어서 볼 수 있는 거라고 생각하구요
cosnole.dir(ball.clientHeight)라고 찍으면 0이 나올거에요
콘솔에서 영준님이 확인하는 시점은 이미 객체에 값이 반영된 시점이라서 log를 찍는 시점이랑 다른 거죠
와우,,, 이렇게 바로 풀어주시다니 코린이 입장에서 경이롭군여
감사합니다! 의문이 바로 풀렸어요
실제 결과도 그렇네여
콜바이벨류 콜바이레퍼런스 인가.. 보시면 도움될거에요!
감사해요! 참고해보겠습니다
혹시 엠플리파이로 배포 해보신분들 모든브랜치 배포되는데 이거 설정하는거 아시는분 있나요.. 원하는 브랜치만 배포되게 하고싶어요..
엠플리파이 콘솔에서 배포할때 배포할 브랜치 선택하게 되어있는데 혹시 어떤방식으로 하셨는지 알수있을까요?
아 찾았습니다 그냥 블로그 보고 무지성으로 따라했었는데
사진
이렇게 수정했어요
사진
여러분 이렇게 상단에 있는 알림 정보를 polling으로 받아오는것이 좋을까요 아니면 웹소켓을 쓰는게 좋을까요?
저는 폴링이요!
오호 혹시 이유를 조금 들을 수 있을까요??
폴링 너무 요청 많이 갈거 같기도 한데..
네..저도 최소 2 ~ 3천 명정도 사람이 이용할거같은데 요청이 너무 많지는 않을까 걱정입니다..
얼마나 자주 확인해야되는지는 모르지만
로그인정보 받아올때만 가져와도 될수도 있을거같아요
카카오톡처럼 매번 확인해야되는거 아니라면
이런것도 있답니다 서버에서 보내주는
그러려면 소켓이 열려야 되는거 아닌가요
소켓 하기엔 너무 오버스펙같고.. 풀링하기엔 너무 리소스가 클거같으니
조건 걸어서 그때마다 데이터 가져오는방식으로 해도 좋을거같아요
오호 좋은 의견들 감사합니다!
제가 딱 고민하는 부분입니다 ㅎㅎ..
아니면 풀링 기간을 길게 둬도 괜찮을거같아요
1분에서 3분정도 둬도
유저들은 충분히 실시간으로 인지할수도 있어요
SSE가 이벤트로 딱 원할때만 받을 수 있어서 좋아보입니다 ㅎ 적힌 예시들도 딱 들어맞네요
소켓을 연결해도 서버랑 클라이언트랑 계속 연결되어있어야 하는거 아닌가용…? 그러면 그부분에서도 부하가 걸리지않나용? 세션처럼!
썰님이 말씀주신 거랑 비슷한 의견인데, 엄청난 실시간성이 필요하다고 생각하지 않았어요!
답변감사합니다!
오호 역시 이부분이 최선인거 같네요!
혹시 SSE가 어떤 약자인가요??
제가 올려드린거요 ㅠㅠ
이거요..!
ㅋㅋㅋ앗 죄송합니다.. 바로 읽어볼게요!
저도 sse에 관련해서 보고잇는데 처음보는 스펙이긴 해서 찾아보는중인데..
이거도 오버스펙 같아요
그렇게까지 실시간이 필요한 서비스는 아닌거같아서..
그래도 처음보는 기술을 공부할 수 있어서 너무 좋네요 ㅎㅎ
자바스크립트 잘 아시는 분들.. 질문이 있습니다 !! 자바스크립트에 undeclared가 undefined처럼 값으로서 존재하는 건가요?
아니요
힙에 메모리 할당이 안 된 변수를 의미하는 개념이지, 값으로서 존재하지는 않나 보네요
사진
혹시,, nuxt 사용중인데 에러메세지가 이렇게 나오는경우는 어떻게 트래킹 하시나요?.. 아무리 찾아도 안나오네요..!
center라는 애가 undefined인데, center.name 이런식으로 접근하셔서 나온 에러입니당
if(!center){ return; } 추가 하시고 하시거나 center?. 이런 식으로 하면 될거에여 center가 undefined인 경우가 있는지 확인해보세여
오..!!! 감사합니다 ㅎㅎ
vuex에서 api 요청 후에 state값을 가져오려하는데 어떻게 하는지 아시는 분 계실까요? async-await를 작성해도 api 진행되기 전 값을 가져오네요..ㅠ
api에서 응답을 받을때까지 시간이 좀 걸리는데 이걸 어떻게 해결하면 좋을까요?
action으로 fetching하고 mutations으로 세팅합니다
isLoading 상태를 만들고 관리해보시면 어떨까용
어제 install 오류 결국 해결 못하고 기존에 있던 node_modules 디렉토리 복붙해서 쓰고있습니다ㅠ_ㅠ 에러보니 ts오류여서 typescript관련 라이브러리 및 패키지들 버전업 해보면서 다시 확인해봐야 할것같아요 다들 감사합니다!
그냥 다 지우고 하나씩 다시 설치해보시는 것도 ㅠㅠ
복붙은 정말 힘들거 같네요
네네 그렇게 해봐야겠어요ㅠㅠ 지금 당장은 개발할게 많아서 일단은 이렇게 해야겠어요ㅠㅠ
이모티콘
오! 안그래도 궁금했던 내용인데 공유 감사합니다!!
감사합니다!! 시도해볼게요 🤗
혹시 Nextjs에서 동일한 페이지 히스토리 스택만 쌓게 하려면 어떻게 하면 되나요ㅠㅠ 아무리 찾아도 안나오네요..
https://kyounghwan01.github.io/blog/React/next/same-page-stack-history/ 이분은 쿼리스트링을 다르게 줘서 쌓았네요
넵 저건 봤는데 쿼리스트링도 안남게 하는 방법은 없는 걸까요..? 답 감사합니다!!!
react router는 history state 따로 있어서
그거 이용하면 되긴하는데
넥스트는 모르겠네요
이모티콘 한번찾아볼게요!! 감사합니다!!
router.push 할 때 queryString 넘겨주고 asPath 값으로 수정 없는거처럼 안되려나요 허허
한 번 해볼게요 ㅎㅎ 감사합니다!!
사진
혹시… emotion 에서 객체간의 순서 관련된 eslint 룰이 있을까요?? 예를들어 padding -> margin -> width 이런식으로 정렬하고 싶습니다!
저도 궁금합니다! Import 순서랑 css 순서 format on save 되도록 하고싶은데.....
사수가없어요님이 나갔습니다.
import 는 이 걸로 되더라고요! https://www.npmjs.com/package/eslint-plugin-import
import 순서 저거 진짜 좋아요
커스텀도 잘되고
"다들 어떤 순서로 import 많이 하세요? " 저는 - 외부 모듈 (react, next, axios 등) - 내부 api, 상수, type들 - 내부 UI 컴포넌트(버튼, text 등) 순서대로 정렬하고 있습니다.
css는 stylelint가 있는데 emotion 에서 순서조정까지 되는지 몰겠네요 걍 css나 scss는 되는데 styled-components 에서는 순서조정은 안되거든요..
- 외부 모듈 - 샹위 디렉토리 모듈 - 하위 디렉토리 모듈 - 형제 모듈 - 타입 이요!
갑자기 다른 이야기 드려 죄송합니다... 혹시 vue 배포할 때 proxy는 빼고 배포를 해야할까요?? 배포된 링크에서 api 조회 데이터를 보니까 index.html 파일이 넘어오네요....
저도 한번 써봐야겠네요
혹시 리액트로 작업하시면서 아래와 같은 이슈를 보신분이 계실까요,,,? route 설정 문제인지,,,
사진
lazy 로 페이지 부르고 <BrowserRouter> <Routes> <Route element={<Layout />}> <Route element={ <Suspense fallback={<></>}> <Outlet /> </Suspense> } > <Route path={Path.dashboard} element={<DashBoard />} /> </Route> </Route> <Route path={Path.sign_in} element={<SignIn />} /> </Routes> </BrowserRouter> 이렇게 설정했는데 signin 페이지를 갈 때마다 저렇게 에러가나고 새로고침하면 제대로 뜨고 있어서… 참 머리아픕니다 ㅠㅠ
Suspense 저기다가 거는 거 맞나요?
Suspense 위치가..
저는 Suspense 아예 BrowerRouter 밖에 싸줬는데 에러 안났었어요!
suspense 컴포넌트가 왜 필요한지 좀 더 탐구해보는게 좋을거같아요.
각 페이지마다 react query suspense 를사용하다보니 최상단에 거는게 한번에 다 걸 수 있지 않을까하고 저렇게 잡기는 햇는데…
BrowserRouter Routes Route Suspense 이 컴포넌트들이 왜 존재하고 무슨 기능을 하는지 탐구해보시면 이해되실 거예요
네네 공부좀해봐야겠네요 감사합니다
이건,, 그냥 개발이랑 관계없는 사소한 질문인데요,,, 노트북에 로그인할떄 사용하는 개인용 계정 a 가 있고 비즈니스용 계정 b 가 있는데 gmail 브라우저에서는 발송하면 b.name 으로 가는데 노트북에 내장된 Gmail 앱에서는 발송인은 a.name 발송자 이메일은 b.email 로 가는데, 이런 이슈 겪으신 분 계씰까요?
import 순서도 코드 성능에 영향을 끼치나요?!
그건 잘 모르겠스빈다….. 그냥 협업을 위한 가독성때문에
저는 그렇게 사용중입니다
import 순서 막 바꿨다가 터진 적은 있어요
예를 들어서 // a.js const student = { name: 'Tom' } // b.js console.log(student.name); // index.js import './b.js'; import './a.js'; 이러면 터지는데
이건 사실 되게 의도적으로 만든 케이스고, 모듈 import만 하면 번들링 과정에서 알아서 잘 처리되기 때문에 상관없는 걸로 알고 있긴 해요
근데 확실하진 않아서 고수분들께서 지적해주시면 감사하겠습니다..!
오호,, 웹팩을 안쓰신건가요?
앗 혹시 저 말씀하신 거면 웹팩 썼어요
웹팩 5 쓰는 CRA 프로젝트에서 실행해 봤습니다!
요거는 린트에서 잡혀야 하는게 맞을거 같네요 (dazed)(dazed)
번들링 안하는 es6+ 이상에서는 실행 안될거 같은데요 (shocked)(shocked)
맞아요 억지로 린트 disable하면서까지 만든 케이스였어요
https://codesandbox.io/s/loving-chaplygin-v2zk58?file=/src/index.js 요렇게 테스트해봤습니다!
사진
mysql 진짜 왕초보인데요
설정파일 수정해서 주석을 추가하라고 하는데
글자가 안 써지고 밀리네요
이 혼란스러운 언어 원래 이런가요…?
i 누르고 하셨냐요
와 i누르자마자 인서트 뜨면서 바로 써지네요 거지같은거 ㅠㅠ
감사합니다
ㅋㅋㅋ 굳굳
강좌에서 아무런 설명없이 그냥 주석을 넣으라고 해서 당황했어요
써지긴 하는데 저장하는건 또 다른거라...
한번 읽어보세요 ㅋ
감사합니다 ㅠ
와 저장까지
성공했어요
이렇게 뿌듯할수가;;;
저 포트폴리오질문이요
저 현재 인프런클론코딩하고있는데요
기본적인 html,css,js(라이브러리) 사용해서 만드는중인데요
이런것도 포트폴리오로 쓸수있을까요?
완전 똑같이 하고계시다면 굳이 적으실거까지 없어보이고요.. 완전 똑같이 한것이 아니라 조금 더 자신만의 색을 담았다 하시는게 있다면 추가하셔도 좋을것 같아요.
리덕스초보인데, 리덕스에서 데이터패치할때 주로 뭐쓰나요?
rtk query나 axios쓰는게 맞는지..
초보시면 axios 나 fetch랑 redux-thunk 로 쓰시면 될거같아요!
Thunk 추천합니답
오호 감사합니다!
포유님은 구글 개발자신가요
thunk가 많네요 감사합니다
toast ui editor css 직접 수정해보시거나 viewer 글자 크기 변경해보신 분 있으신가요?
안녕하세요 이벤트 리스너에 대한 질문이 있습니다! <div><a></a><div> 와 같은 DOM 구조에서 div에 mousedown 이벤트를 걸어놨는데 div영역을 클릭시 offsetX, offsetY를 통해 div 기준으로 어디를 클릭했는지 가져오고 있습니다. 그런데 div 안에 있는 a태그 클릭시 offsetX과 offsetY의 기준이 div가 아니라 a로 변하는데 div 기준으로 받아오는 방법이 있을까요?
이벤트 객체의 CurrentTarget 을 이용하시면 이벤트 선언된 객체가 지정될거에용
div의 getBoundingClientRect를 구하고 target의 getBoundingClientRect를 구한 다음에
클릭했을 당시의 offsetX, offsetY를 어떻게 가져올 수 있나요??currentTarget으로 객체를 가르키긴하는데 offset을 가져올 순 없네요
left끼리 빼고 top끼리 빼면
원하는 offset을 가져올수 있어요
앗! 못가져오는군요 ㄷㄷ
헉 이 방법으로 해보겠습니다.. 감사합니다
거기에 evevt의 offsetX, Y를 각각 더하면 됩니다
헉 구현했어요
민석님 용태님 감사드립니다!!
헉 근데 transform scale 1.2 이런식으로 확대되었을 때 좌표가 이상해지는것같네요
비율대로 나눠야겠군요
비율대로 나눠도 오차가 발생하네요 ㅜ.ㅜ
https://www.framer.com/developers/handshake/ 아직 베타이긴 하지만 이거 되게 편해보이네요.. framer에 figma도 불러올 수 있으니까 이제 마케팅 페이지는 시간 좀 절약해서 할 수 있으려나요.. 다른 분들은 단순 마케팅 페이지도 아직까지는 전부 코딩하시나요??
눈떠!님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 rabtle님~~ 반갑습니다 :)
안녕하세요 반장님 반갑습니다!
네~~ 어서오세요!! 반갑습니다.
여기는 프론트엔드나 개발 기타 커리어등 여러가지 궁금한것들 얘기해보고 싶은 것들을 함께 나누기 위한 공간입니다
얼마든지 편하게 글 남겨주세요! ㅎ
넵 감사합니다!
사실 제가 고졸인데 프론트엔드 개발자로써 고졸 학력이 앞으로 커리어를 쌓아 가는데 많은 영향을 받을지 걱정이 됩니다. 개발자는 실력이라는데 그건 아주 소수의 사람들만 해당되는 말도 주위에서 듣고 해서 대학교를 4년 다니고 나서 가야 되는 게 맞는 건지 고민입니다.
영향없어요
음... 개발씬에서는 고졸인지 아닌지 여부는 사실 크게 상관이 없기는 합니다.
다만 첫 직장을 구하기가 어렵기는 할거에요
결국 포트폴리오나 실력을 증명하면 되는거라서
지금 혼자서 어디까지 할 수 있고 어느정도 만들었는지는 모르곘지만
나를 증명할 수 있는 수단이나 방법들을 확실하게 만들 자신이 있다면
해보셔도 좋을 거게요
대학교 4년은 어떻게 보면 심리적 안전장치 같은 거라서
답변 감사합니다! 이직할 때는 경력과 실력을 보기 때문에 첫 직장을 잘 해결하면 되는군요
네~
그 첫 직장은 대학교를 다닌 사람하고 경쟁을 해야 하는 것이고 대학교 비전공자하고도 경쟁을 하는 것인데
고졸이라서 떨어지는 경우는 없어요
진짜 실력이 있으면 학력따위는 전혀 신경 안쓰는 곳이기는 합니다
다만 학력이랑 실력이 완전 상관관계가 없는 것은 아니더라 ... 라는 것은 있어요
당연히 잘하는 사람은 공부도 잘하고 개발도 잘해요
말씀 감사합니다
이제는 달라져야 하는 코딩 테스트 https://brunch.co.kr/@godrm77/20 코테의 부작용은 엄청 공감을 하면서도 선별 비용을 효과적으로 줄일 수가 있는 시스템이란것도 알기에... 대한민국 입시공부가 오버랩되네요
ㄴ 그렇다고 공부 하지말라고 할 수도 없구요 ㅋㅋ
공감합니다.. 하지만 잘 하고 싶은 마음은 여전해요 ㅋㅋㅋㅋ
코테랑 실무의 연관성은 없고 코테를 잘한다가 개발을 잘한다는 아니지만... 갸발잘을 잘하는 사람은 코테를 잘봐요 ㅠㅠ
개발을*
어제 코딩테스트에 대해 생각을 오랫동안 했는데 딱 올려주셨네요:) 지금 코딩테스트 준비하고 있는데 "빠르게 "문제를 풀려고 하다보니까 조금 더 효율적인 방안에 대해 고민하는 시간이 줄어들더군요 ㅜㅜ 그리고 이미 코딩테스트를 잘하는 사람이 너~~~무 많아서 제가 넘기엔 허들이 너무 높은 거 같아요. (사실 저에겐 이게 좀 큰 거 같아요. 코딩테스트를 통해 배우는 것도 있다고 생각하거든요. )그래서 차라리 코딩테스트 준비하는 시간을 조금 줄이고 프론트 공부를 더 많이 해서 과제전형이 있는 쪽으로 가서 얼른 취업을 하고 실력을 쌓는 게 좋지 않을까 고민했습니다 🤔
사실 기업에서도 코테는 그냥 한번 걸러내기 위한 수단 그 이상 그 이하도 아닙니다. 개발자가 인기가 많아지면서 지원자는 많은데 리소스를 다 투입하기가 힘드니까
일단 한번 거르고 시작하는거죠
코테만 너무 잘할 필요는 없기에 라이언님 말대로 준비하는 시간을 너무 가지지 말고 목메이지 않았으면 좋겠지만 일단 티켓을 따려면 해야하는 거라는 마인드...여도 일반적인 코테 사이트에서 중급 정도 수준이면 충분합니다. 프론트엔드라면 javascript로 공부하세요
이번에 코딩테스트 준비하고 있는데 DFS, BFS 문제도 나올까요..? 실무에서 거의 사용 안하고있긴한데 ㅋㅠㅠㅠ 그래도 코딩테스트면 준비하는게 좋겠죠..?
프론트엔드를 지원한다면 거의 안나온다고 생각하세요.
Array, String, Number를 다루는 반복문 형태의 알고리즘 위주로 나올거에요
넵!!! 다행이네요 ㅎㅎ 감사합니다!!
최근 구직한 경험상 마지막 문제에 자주 나와요
어떠한 스타일의 문제였나요?
회사마다 기술직 코테가 정해져 있는 경우가 많더라고요. 그런 경우에는 bfs나 dp도 자주 나옵니다.
앗.. 그럼 봐야겠네요..
약간 조건 추가한 길찾기라던지
음... 최신화 되지 못한 정보를 드렸네요;;
사실 백이든 프론트든 대부분 웹개발에선 쓸 일이 없는 알고리즘인데… 저도 그런거 나오는게 이해는 안됩니다 🤔
요즘 진짜 어렵긴 어렵더라구여 ㅜㅜㅜㅜㅜㅜㅜ
저 프론트엔드 코테로 다익스트라자 나온 것도 봤습니다…
저도 마지막 문제에 dfs bfs 나왔었어요
FE면 DOM 조작하는 코테가 나오기도 합니다!
와 코데에 그런 것도 나오는군요
코테 이야기중에 죄송합니다.... 모던자바스크립트 관련해서 질문 하나 드려요! 지금 메서드와 this 챕터에서 계산기 만들기 문제를 푸는 중입니다. 여기서 두 변수를 받을 때 prompt를 사용하는데 저는 앞에서 두 변수를 선언한 후 입력받은 값을 Number()로 명시적 형변환을 해준 후에 할당했습니다. 그런데 해답에서는 this.x = +prompt('첫 번째 값을 입력하세요'); 이렇게 바로 처리를 했더라구요. typeof로 보니까 타입이 number로 나오던데 여기서 의문이 생겼습니다. 1. 먼저 객체에 프로퍼티를 선언하지 않고 바로 this.x로 할당하면 프로퍼티가 초기화됨과 동시에 할당이 되는 건가요? 2. 저렇게 산술연산자로 처리하면 묵시적 형변환이 일어나는 건가요? +가 없을 때는 타입이 string으로 나오던데 왜 저렇게 되는지 궁금합니다. 독학으로 하다보니 너무 기초적인 걸 묻는 건 아닌가 싶네요 ㅜ 도움 부탁드립니다! https://ko.javascript.info/object-methods
기존에 다른 언어 하셨었나요?
자바로 처음 프로그래밍 배웠습니다!
아 넵 1번 질문에서 왠지 자바 느낌이 나서 ㅋㅋㅋㅋㅋㅋ
아하 ㅋㅋㅋㅋ
일단 둘다 맞는걸로 알고 있어요
아 정말요? 다행이네요
테오님 카카오도 이런식인가여 ?!
뭔가 자바스크립트가 자유로워서 좋은 거 같기도 한데 의문이 생길 때가 많네요
감사합니다!
자바랑 정반대인거같아요 약간 파이썬이랑 비슷하고
카카오 공동체만해도 100개가 넘고 채용 프로세스도 여러가지라.... 일관화된건 아니에요
맞아요,,, 그래서 공부하는데 잉? 할 때가 되게 많네요
지금까지 교육기관에서 파이썬으로 코딩테스트를 준비를 시켜서 파이썬으로 해왔는데, 자바스크립트로 변경하는게 나을까요?
둘다로 할 줄 아는게 좋다고 봐요 js로만 되는 시험도 많아서요
파이썬이 편한 문제도 간혹있어서
둘다 하시는것도 ㅎㅎ
react에서 swiper를 사용할 때 바뀌는 Index 값을, useState로 state를 변경하려고 하면 이런 오류가 뜨는데
사진
혹시 해결 방법 아시는 분 계실까요 ?
사진
사진
거기랑 관련된 오류가 맞나요..?
네 맞습니다 ㅜㅜ
console로 찍으면 index가 잘 나오는데
useState로 넣으려고 하면 오류가 뜹니다 ㅜ
state는 잘못 없고 저 오류가 뜨는 부분 로직의 실수일 확률이 높아보여요
@포유 @프린이 ㅎㅎ 틈틈이 준비해야곘네요 감사합니다
제가 마침 swiper를 쓰고 있어서 비슷한 상황으로 구현해봤는데요. 저는 에러없이 잘 동작합니다.
사진
에러에는 removeClass를 읽을 때 undefined인 녀석의 프로퍼티를 읽으려고 해서 그렇다는데요 허허
구글링 해보니까 이런 이슈가 보이긴 하는데
잘 구현 하셨네요 ..
무엇이 문제인건가 ㅎㅎㅎㅎ
pagfeTwoIsPassed 를 사용하시는곳은 없으신가요?
사진
props로 넘기는데 사용하고 있어요 ㅜㅜ
한번 그부분을 지워보고 테스트해보세요!
해당 부분 지워도 오류는 마찬가지네요 ㅜ
사진
혹시 swiper 임포트 부분도 한번 살펴보실래요?
사진
임포트 부분은 위 내용이 전부입니다 !
onSlideChange 에서 setPageTwoIsPassed 를 주석처리하면 잘 작동하는거죠??
네 맞습니다 !
pageTwoIsPassed 를 사용하는곳은 없고!
맞습니다 !
console.log로
activeIndex 찍으면
숫자도 아주 잘 찍힙니다 !
느낌으로는 슬라이드 하는 버튼을 눌렀을때 어떤 className 을 삭제 하는 과정에서 오류가 뜨는거같은데 .. 스크린샷만 보고서는 잘 모르겠습니다 ㅠㅠ
swiper 방금 설치한 부분이라 다른 기능은 없는 것 같은데 무슨 이유인지 전혀 모르겠네요 ㅜㅜ
우선 조언 주신 선배님들께 진심으로 감사의 인사 드립니다 !
그 버전이 이상한건가.. 몇버전가요
좀 하찮은 질문같긴 한데 혹시 다들 vscode 테마 뭐쓰시나요...?저는 개발 시작했을떄부터 기본테마라 이게 제일 눈에 익는데 이번에 새로운 테마를 써보고싶어서 찾아보는중인데 종류가 너~~무 많네요..
이것저것 써보시고 가장 편안한거 쓰시면 될거같은데요 ㅎㅎ
저는 드라큘라 테마 사용합니다 ㅋㅋ
지금 찾아보고있긴 한데 그래도 많이 쓰시는게 있는지 궁금해서요 ㅎㅎㅎ 감사합니당
전 One Monokai 네요 ㅋㅋㅋ
드라큘라 쓰다가 최근에 synthwave 로 넘어왔어요!
"swiper": "^8.1.3",
버전은 8.1.3 입니다
power mode 익스텐션 설치해보세요.. 재밌습니다
synthwave 좋나요 넘 빨간거 같기도 하구 ㅋㅋㅋ
혹시 선배님 Swiper 버전 좀 문의 드려도 될까요 ?
네온 100%로 쓰는데 주변사람들이 눈아프다고 좀 바꾸래요 ㅋㅋㅋ
ㅋㅋㅋ 그쳐 좀 그럴거 같은..
방금 파워모드 깔아봤는데 파워모드 + synthwave + 피라코드 폰트 쓰니까 진짜 게임하는거같네요
사진
게임 콤보하는 것 같죠 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
저는 "swiper": "^7.0.8", 입니다
감사합니다 !
Hua님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 hua님~~ 반갑습니다 :)
혹시 제가 디자인시스템을 모듈화해서 npm 패키지로 배포하려고 하는데 컴포넌트 중에 상태관리를 rtk 로 하는 것들이 있어, 어떻게 해야될지 고민중에 있습니다. 다른 프로젝트에서 배포된 프로젝트의 store 에 접근해서 상태를 select 해올 수 있는지 만약 불가능하다면 컴포넌트들의 rtk 에 대한 의존성을 제거하고 hooks 로만 상태관리를 하는 것이 좋을지 궁금합니다!!
rtk 가 뭐에요..?
Redux tool kit의 줄임말이요
아하.. 감사합니다!
디자인시스템에 rtk를 사용하셨다면 디자인 시스템을 갖다 쓰는 쪽에서 store를 App에 추가를 해줘야 할거 같은데요...? 반드시 store를 쓰게끔 강제화하실 생각이 없다면 rtk에 대한 의존성을 제거하는게 좀더 유연한 라이브러리가 되지 않을까 싶네요 ~, ~ 다른분들 의견도 궁금하네요 ㅎㅎ..
삭제된 메시지입니다.
다자인 시스템에서 RTK 의존성이 있다면 디자인 시스템으로써의 기능을 상실하겠네요..
앗 역시나 그렇군요 ㅠㅠ 친절한 답변 감사합니다!
브래드리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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://yozm.wishket.com/magazine/detail/1436/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents
안녕하세요 ~!! 환영해주셔서 감사합니다 ㅎㅎ
안녕하세요~ 여기는 프론트엔드 얘기를 하고 싶거나 다른 개발자들에게 궁금한게 있을때 물어보고 또 답하면서 함께 성장하는 공간입니다
언제든 궁금한 내용이나 좋은자료 있으면 편하게 공유 부탁드려요 ㅎ
네 알겠습니다 감사합니다! ㅎㅎ
안녕하세요 ! 검색창 자동완성 기능 구현하려고 하는데 고민이 있어서 질문 드리려고 합니다 ㅠㅠ 매번 서버로 현재 input state 내용을 보내서 리스트를 받는다 vs 처음 렌더시 프론트에서 전체 리스트에 대한 정보를 받아 그 정보랑만 비교한다 디바운스를 걸더라도 매번 서버로 요청을 보내는게 서버 자원 낭비 같은 생각이 드는데 어떤 방식을 더 선호하고 그렇게 하는 이유를 알려주실 천사분들 계실까요 ??
전체리스트를 받는게 더 낭비이지 않을까요..?
리스트가 길어질 수록 전체 리스트가 낭비일 거라는 생각을 안했었네요 😂😂
고 를 검색하면 고랑 관련된 단어 중 연관성이 높은 10~20 개를 추출하는데 전체리스트를 받으면 처음에 불필요하게 데이터를 많이 뽑을거같아용..
그리고! 간단하게는 서버로부터 받은 정보를 로컬스토리지에 저장해서 같은 단어를 입력했을때 서버 요청없이 불러오는걸로 알고있습니다!
동영상
서버쪽에서 엘라스틱서치 같은걸로 좀 더 잘 검색된걸 내려주는 경우에는 하나씩 받는게 훨 좋을거 같긴해요.. 프론트에서 정교한 검색은 힘드니
답변 감사드립니다 :)
고수님들 ㅠㅠ 여기서 레이아웃 깜빡거리는건 어떻게 고칠 수 있을까요.. react 사용중이고 memo, useCallback, useMemo 다 사용했습니다
어떤값때문에 리렌더링되는지 체크해봐야할거같아요!
그냥 페이지 자체가 이동되는건데 이경우에 전체를 다 그리는데 레이아웃을 그리지않게 하는 방법은 없을까요?? 제가 개념을 잘못 잡고 있는걸까요ㅠ
memo useCallback useMemo랑은 관련 없고
어딘가에 흰화면을 띄우는 로직이 있을거예요
보통 provider 에서 리렌더링 되는경우가 있더라구요..
Hua님이 나갔습니다.
const [data, setData] = useState() useEffect(() => fetch().then(setData), []) if (!data) return null; return ( …
이런느낌으로
페이지 전체가 깜박거리는 거 보니 아마 탑레벨에 그런 로직이 있지 않을까 싶긴 해요
아직 서버가 없어서 ㅠㅠ 최상위가 레이아웃 컴포넌트예요! 레이아웃잡고 저렇게 내려주고 있는게 단데 당최 모르겠네요.. 혹시 props 문제인가 싶어 레이아웃에서 children 빼고 <Outlet />으로 받아오게 했는데 ㅜㅡㅜ
혹시 코드 공유 가능하신가요??
넵 ㅜㅜ 잠시만요
https://github.com/Numble3/admin/tree/yena 여기서 layout 이랑 page 보시면 될 것 같아요..!
정말 감사합니다!!
아 lazy loading 때문인거같아요
https://github.com/Numble3/admin/blob/e1e851d81b8f7dc4dd7446f14df249bc1223f837/src/routes.tsx#L5 lazy loading 하면 번들링된 청크를 쪼개놨다가 사용할 때 불러오니까
그거 불러오는 동안 깜박거리는 거라 lazy loading을 빼거나 다른 장치를 추가로 적용해주셔야 할 거 같아요
페이지 불러오는 동안 fallback 으로 지정된 null을 렌더하니까요!
헉.. 이건 진짜 생각도 못했네요 감사합니다ㅠㅠ 다른 방법을 찾아볼게요!!
JIN! 오늘 스프린트 늦나요?
네!!! 저 아직 밖이에요 ㅠㅠ 지금 들어가는 중입니다 !!!!
얼마나 걸릴까요?
15분이내에 도착입니다!!
네~ 조심히 오세요~
요즘 pure esm만 지원하는 라이브러리들이 많아져서 회사 cjs 프로젝트를 esm으로 바꾸려고 하는데 엄두가 안나네요 ㅠ cjs 에서 esm으로 나중에는 옮겨야할 걱 같은데 이미 옮기신분 계신가요?
궁금한 점이 있는데, 실무에서 window.onload와 defer가 어떤 차이를 두고 쓰이는지 알고 싶습니다.
실무는 아니지만 defer는 html자체에서 js로드를 제어하는것이고 onload는 js에서 제어하는 차이가 있지 않나요?
네 그 부분에 대해서는 검색해보고 이해 했는데, 실제 사례나 실무에서 어떻게 차이를 두고 쓰이는 지가 궁금해서요.
아 글쿤여.. 아직 경험이 없어서 그부분은 잘 모르겠네요
ㅎㅎ 그래도 답변주셔서 감사합니다
defer는 DOM이 구성되고나서 실행되고, window.onload는 말 그대로 페이지 로딩 이후에 실행됩니다. DOM 구성과 onload는 타이밍이 다릅니다. 다만 보통은 body 태그 끝에 script를 삽입하기 때문에 defer든 async든 실제로 사용하는 코드는 아직까지 못 봤습니다.
저는 리액트에서 Instagram embed API를 불러올 때 async와 defer를 붙여서 불러왔습니다. 동적으로 외부 스크립트를 삽입하는 코드가 있을 때 사용할 수 있었어요.
사진
너무 기초질문같아서 조심스러운데.. 혹시 사진처럼 함수를 인자로 받아 해당 함수를 호출하는 경우 인자를 넘길때 단순히 함수를 넘기는거랑 () => bar()이런식으로 넘기는게 어떤 차이가 있는지 여쭤봐도 될까요..? 함수를 인자로 넘겨서 실행하는 경우를 콜백이라고 알고 있긴 하는데 저런 경우에도 똑같은 원리인지 모르겠어서요..
똑같아 보이네요 현재는 () => 에서 조금더 추가적인 작업을 하고 bar로 넘겨줄수도 있겠죠..?
추가적인 작업의 가능성..!! 이군요 감사합니다!! 별다른게 없었다니 부끄럽네요 ㅋㅋㅋㅋㅋㅋ
사진
경험상 이런식으로 인자 넘길 때 주로 사용하는거 같아요
사진
인자값을 유동적으로 넘길떄 좋군요...!! 감사합니다!!
foo(() => bar()) 는 () => bar() 라는 함수를 새로 생성한다는 차이도 있을거 같아요~
최근에 고민해보고 있는 디자인이 없은 컴포넌트에 대해서 좋은 글이 있어 공유해봅니다. https://jbee.io/react/headless-concept/
저 공부하다 궁금한게있습니다 요새 인강으로 배운내용을 간단한 웹사이트클론코딩하면서 배울걸 써먹고있는데요 이렇게하니까 확실히 제가 배운내용들이 확실히 이해가가고 왜이렇게 써먹었는지 알겠스니다. 웹사이트 클론코딩하다가 안배운내용이나 기능같은게있으면 주로 유튜브나 구글링등으로 기능구현하는방법을 찾아서 지금저 한테필요한방식으로 조금씩 수정하는식으로 코드사용하고있는데요 이런식으로 공부해도 괜찮나요? 제가 걱정하는건 나중에 제가 필요한 기능이나 로직이 구글링이나 유튜브로검색해도 안나올때는 어떤식으로 핵결해야하는지 궁금합니다
당분간은 구글이나 스택 오버 플로우 유투브에 없는 걸 개발하는 경우는 겅의 없으니 ㅋㅋ
거의*
더 잘게 잘게 기워보는 연습을 하기 위해서
만들 과제를 먼저 정하고 필요한 기술을 기워 붙여서 조립해보는 것을 연습해보셔서 이제 포트폴리오쪽으로 가보시면 될거에요
개발의 특성 자체가 이미 만들어져 있는것들에 대한 조립인거라서 충분히 잘하고 있는 겁니다
오.. 지금제가하고있는방식이 틀린방식은 아니네요
저는 그냥 지금느낌이 라이브러리나 혹은 제가 구현하고싶은구현을 찾아서 지금 저한테맞게끔 조금씩 수정해서 쓰고있는데
이게 너무 용태님이말씀하신거처럼 끼워맞추는(?)느낌이 너무 강해서 옳바른방법인지 궁금해서 여쭤봤습니다..
네~ 아주 올바른 방법입니다!
답변감사합니다!!
언젠가 ... 와.. 진짜 이렇게 밖에 못만드나? 내가 만들고 말지.. 하는 시기가 오실텐데. ㅋㅋ
그 시기가 되어도 그 몇몇개를 제외하고는 기워맞추는거라서 ㅋ 개발이란게 원래 그렇죠. ㅋ
사진
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 뿜었네요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ꙼̈
행복하네요 ^^~
현업개발자분도 저랑 비슷한 고민(?)을 하고계씨네요 ㄷ
채용공고 보다가 갑자기 궁금해졌는데, 연봉 3500 이상 이렇게 써있으면 이런 금액은 세전인가요, 세후인가요? 신입 준비 중이라 모릅니다…ㅎ
세전아닐까요?
세전이죵
세후 3500이면 많은거아닐까요?? 저도궁금
세전입니당
세금 너무 많습니다 ㅠㅠ
세전입니다 세후로 적어놓는곳은 거의 못봤네요
나중에 계약할 때 포괄인지 아닌지 확인해보는 것도 중요한거 같아요 ㅎ
그냥 대략 숫자로 얘기하는건 거의 다 세전이라고 보시면됩니다 ㅎ
여기서 퇴직금 포함(?0인지 꼭확인하란느데 사실입니까?
아직 취업안해봐서 잘몰라서 여쭤봅니다
보통 월 얼마 받아? 하면 실수령을 말하고
연봉을 얘기할때는 세전을 얘기하고 그런것 같아요
퇴직금 포함 이런곳은 웬만하면 거르세요...
혹시 포괄임금제로 하는회사들도많나요?
잘몰랐는데 포괄임금제면 야근해도 돈못받는다고..
오호 그렇군요 오늘도 지식을 쌓았네요
스타트업은 포괄이 대부분인 거 같아요
많죠 당근마켓도 포괄이라 들었습니다
토스도 포괄 폐지된지 얼마 안됐구요
토스도 올해들어서 비포괄 된거고
오 그렇군요…
맞아요
대부분 포괄임금제를 적용을 하는 것 같습니다.
네이버는 비포괄인걸로알아요
두나무도
비포괄이면 곽잡아야죠 들어가기 힘든 회사일 확률이 높습니다.
돈에 있어서는 그렇긴 한데 회사 선택할때는 많은 기준이 들어가니까요
많이 주는 회사가 좋은 회사는 아닌데, 좋은 회사는 많이 주죠 ㅋ
혹시... 부스트코스에서 하는 코칭스터디 참여해보신 분 계실까요?
이번에 html+css 과정 모집 글이 올라왔던데... 공부는 해야 하고 하고 싶지만 시간적으로 늘 쫓기고 있어서, 해보신 분 있다면 어떠셨는지 궁금합니다.
varcel 배포할 때 경로문제 겪어보신 분 혹시 있으실까요 ?ㅠ
사진
저는 못 읽는 폴더 지우고 다른 폴더 만들어서 파일 옮기고 하니까 됐어요
아 그런가요? 저도 한 번 해봐야겠네요!
로컬에서는 빌드가 잘 되는데 원인이 궁금하네요..
저도 로컬에서는 빌드가 잘 됐었어요.. 프로젝트 초기에 폴더이름의 앞자는 대문자로 했다가 소문자로 수정한 적이 있는데 그래서 그런가 해당 폴더만 버슬 에러가 났었어요
원인은 모르겠습니다 😞
엇 저도 초기에 폴더 앞자 대문자로 했다 소문자로 바꾸니깐 발생하더라구요
저걸로 인해서 깃헙도 가끔 꼬이고.. ㅎㅎ 무튼 그랬습니다 ㅎㅎ
그렇군요.. 감사합니다!
대소문자 변경하면 깃도꼬이고..좋지않더라구요
그래서 케밥케이스 써야하나 매우 고민하고있습니다
git config core.ignorecase false로 설정해도 꼬이시나요??
정말정말 공감이 가는 내용이네요 좋은 글 감사합니다 🥹
맥북은 대소문자 구분을 못한다고 들었던거같아용..
파일명 변경하실 때 git mv 로 하시면 괜찮을겁니다 ㅎㅎ..
요거하면 괜찮다고 하는데 프로젝트시작할때 해주던가 메인 브렌치에서 해줘야할거같더라구욤
오..앞으론 설정을 해둬야겠네요..
YD님이 나갔습니다.
swiper 사용하시는 분들 중에 스크롤 한 번만 내려도 두 개의 슬라이드가 내려가는 이슈에 대한 해결 방법을 아시는 분이 혹시 계실까요 ?
컴포넌트에 객체 전개해서 prop 전달할때 컴포넌트에서 안받는 prop넘겨도 에러 안나나요?
넵 안날거에요!
왜그런건지 신기하네유
전달안하면 에러 안날텐데
아니 날텐뎁
에러나게 하고싶으시면 타입스크립트를 사용하시면 됩니다!
사진
타입스크립트 써도 사용안하는 props 넘기는건 에러 안나지 않나요?
제가 질문을 잘못이해했나보네용 저는 에러를 나게끔 하고싶다는줄 알았어요! 에러를 나게끔하고 싶으면 타입스크립트를 써서 의도치않은 prop을 넘기기 싫다면 코드레벨에서 에러를 띄울수 있다는 그런 의도였어요ㅎㅎ
Context API 질문있습니다! createContext를 통해서 Provider를 직접 만들어서 동작을 시켜봤습니다. Props로 먼~ 자식 컴포넌트까지 직접 전달하지 않아도 돼서 편하긴 한데 계단식 구조가 생기면서 나중에 규모가 커지면 생각할 게 많아질 거 같더라고요. 혹시 이렇게 직접 Provier를 만들어서 개발하는 경우가 있나요? 제 생각에는 이럴바엔 리덕스를 쓸 거 같다만…🤔 보통 어느정도 규모일 때 리덕스를 도입해야겠다고 생각하나요?
계단식 구조가 생긴다는게 어떤 말씀인가요?
전역상태를 위해 provider라는 컴포넌트를 만드는 걸 말씀하시는걸까요 ?
네! 맞습니다. provider 안에 provider 안에 provider 안에… 계속 생기는 걸 말씀드렸습니당
사진
이런식으로 말이죠? ㅋㅋ
맞아요.. 저런거..
오웈ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
와 근데 저거 진짜 있어요?
저희 현업 코드인걸요?
와 멋지다
저런 거 어떻게 알아봐요?
음… 이걸 해결해봐야한다는 니즈는 지금껏 생각해본적이 없어요
알아본다는게 무슨 말씀이에요?
코드분석할때 불편하지 않냐는 것 같습니다 ..
제가 헷갈리게 말씀을 드렸네요 ㅜ 저거 하나씩 다 이해할 수 있나요?
못하겠죠…?
저기중에 80%는
라이브러리가 맨위에서 Provider 로 선언하라 해서
선언한거고
우리 팀 개발자들이 실제로 만든건 20%정도 밖에 안되요
음… 다 이해하실수있어요!
아하 그럼 그럴 수 있겠네요 오 근데 저렇게 쓸 수 있다는 게 정말 신기하네요
ㅋㅋㅋㅋㅋ Flipper 로 Depth 하면 70~80개정도 나오던데
React 가 DOM 관리를 잘해서 성능에 불편함없습니다!
그래서 질문으로 돌아가서
Context 랑 전역상태관리 를 언제 어떻게 쓰냐
맞아요~
Context 만 주구장창 쓰다보면 언젠가 전역상태관리를 쓰고싶어질때가 와요 라고 말하는게 가장 원론적인 이야기가 될겁니다.
Context 만 쓰다보면, Context 를 꼭 이 Depth 에서 선언해야하나? 하는 것들이 오고
Get // Set 을 쓰고 싶어질때가 와요.
그때쓰시면 되요.
=> 웬만한 토이프로젝트 레벨에선 기능적으로는 거의 전역상태관리가 무의미할때가 많습니다. MVP레벨도 그렇고요
웬만한 건 provider로 해결이 되니까 전역상태관리가 무의미하다고 말씀하시는 거 같네요. 맞나요?
저희팀이 Recoil 을 도입한 3가지 이유는 1. React Native 에서 Screen 간의 공통된 상태를 공유할 필요성이 생김 2. 하나의 Screen 안에서 Provider 를 작성하는게 불필요하게 느껴짐 3. Get 과 Set 으로 좀더 format 에 맞게 상태를 저장할 필요성이 있음
웬만한게 아니라 사실상 다 된다고 봐도 됩니다.
오~ 그렇군요 잘 모르고 있었는데 저에게 소중한 정보를 주셨어요 감사합니다🥺
다만 언급했듯이, Context 를 쓰면 불필요하게 상위 단에서 Provider 를 넘겨줘야할때가 있고
코드가 좀 더러워질때가 있어요.
성능면에서는 리엑트 팀이 엄청 작업해줘서 문제가 크게 되지 않습니다
답변 정말 감사합니다! 새로운 시야를 갖게 되었어요
경기TP근무자님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 경기TP근무자님!! 반갑습니다 :)
우와~ 안녕하세요~!
네! 안녕하세요~~ 어서오세요~ 여기는 프론트엔드가 궁금할때 다른 개발자들과 개발얘기하고 싶을때 묻고 답하며 함께 성장하고자 만든 공간입니다 ㅎ
제가 아는 간단한 질문에 대한 대답은 거의 바로 답하려고 하고 있어요~ 언제든 궁금한게 생기면 편하게 글 남겨주세요 ㅎ
리액트의 생명주기는 클래스형 컴포넌트에만 적용이 되는 걸로 알고 있는데 함수형 컴포넌트는 따로 생명주기가 존재하지 않는건가요?
존재는 하는데 클래스형처럼 세부적인 접근은 불가능해요
안녕하세요ㅜㅜ 밤늦게 죄송합니다.. 카카오 로그인구현 하는거 공부중인데요 빨간부분으로 된부분 어떻게 작성해야하는지 알려주실 수 있으신가요 ㅠㅠ
사진 2장
아하.. 그렇다면 일반적인 리액트의 생명주기를 이야기한다면 클래스형 컴포넌트 기준으로 이야기를 하거나 생각해야겠네요
함수 컴포넌트여도 컴포넌트의 생명 주기가 달라지는건 아니라서
어떻게 접근하냐만 달라지는 거라 클래스 컴포넌트를 기준으로 생각하지는 않아도 될 거 같긴 해요
가령 마운트되는 시점에 접근하는 방법은 함수 컴포넌트에서는 useEffect고 클래스 컴포넌트에서는 componentDidMount 지만 컴포넌트가 마운트되고 렌더된다는 생명주기는 같잖아요?
일하기 싫은 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 일하기 싫은 네오님~~ 반갑습니다 :)
아 그렇게 바꿔서 보면 되는군요! 자세한 설명 감사합니다!
res.kakaoAccount로 받아올 때 값이 들어오시나요? 제가 API 데모를 볼 때는 res.properties로 들어오는 것처럼 보여서 한번 확인해보세요!
이 질문 관련이었습니당!
ts 라이브러리 배포할때 cjs, mjs 둘다 제공하는 방법 https://antfu.me/posts/publish-esm-and-cjs
문서화되지 않은 기존 레거시를 분석하고 리뉴얼해야 되는 업무를 잘할려면 어떤 부분들을 공부해야될까요..?
사진
안녕하세요 새벽에 죄송합니다. 혹시 서버에서 저렇게 유저의 구독 정보를 받아서 화면에 구독중이면 밝게, 그렇지 않으면 어둡게 처리하는 코드를 짜고 싶은데 리액트를 제대로 다루는게 이번이 처음이라 너무 어렵네요..ㅠㅠ 삼항연산자를 써서 className에 true면 active, false면 disabled 를 넣으면 될거 같은데.. 해봤더니 전부 밝게 나와서 뭔가 코드를 잘못짠거 같은데 어떻게 해야 할까요?
코드를 봐야 알것 같습니다.
css로 className 따라서 스타일을 주신거죠?
저 값이 state로 되어있는거죠?
호출!
사진
이렇게..? 하는게 맞는진 모르겠지만 이런식으로 했어요
오잉?..
초기 state는 []고
useEffect후에는 {} 군염
뭐 그거는 상관없을거 같구여
typescript를 사용하면 저렇게 못쓰긴합니댜
.........ㅇ0ㅇ...죄송...해여 허접코드라 보여드리기도 민망한..
아니에여아니에여!
그 useState() 이렇게 비워보시죠
넵...일..일단 비워봤어요
되나여?
아마 렌더쪽에서 undefined 오류 나거나 할거같은뎀..아닌가..헿
걍 다 액티브 상태...로 보여요..8ㅁ8...
오잉?
return 쪽 컴포넌트 보여주실수있나여?
코드 말씀하시는거져...?
넵넵
isOtt가 어떻게 생긴건지 봐야 할거같아여
아니 어떻게 사용되고 있는지요!
사진
ㅇ..이게 아닌가..
이모티콘 너무...아는게 없어서 죄송...죄송해요
아하 지금
문제가 되는건 className 에서 isOtt가 있는지 확인하잖아요?
네네
근데 isOtt에 들어가는 값은
{ netflix: true, wavve:false }
이런식이거든요?
ㄴ ㅔ......!!
그럼 isOtt.netflix 이렇게 확인해야
지금 보이는곳에서 netflix가 true인지 false인지 알 수있겠죠?
헐...
잠..잠시만요 코드 다 바꾸고 올게요!
넵 근데 아마 저렇게 하면 언디파인드 오류가 날거같은데
isOtt?.netflix 요렇게 하셔야 할거에여!
헐
저의 구원자님
ㅠㅠㅠㅠㅠㅠㅠ
사진
아는게 나와서 알려드릴수있는거죠..ㅋㅋㅋㅋㅋㅋ
오 굿입니다
덕분에 너무너무 잘 나와여
언디파인드 오류가 나는 이유랑
? 쓰는 이유..알려주실수 있나요?ㅁ?
음 useState는 초기값을 넣고 쓰게 되어있는데
아니 정정
초기값을 넣을 수있는데
넣지 않으면 undefined가 돼요!
?를 넣는건 optional chainning 찾아보시면 될거에여!
이모티콘
구글링할게요 너무너무 감사드립니다!!
넹넹!!!
엥 피돈님 여기에도 계시군,,,
ㅋㅋ 너무 적절합니다!
안녕하세요! 혹시 svg d3에서 zoom 8배 scale한 상태에서 마우스로 드래그하면 버벅임이 심한데 성능 개선할 수 있는 방법이 있을까요?
혹시 svg 파일을 nextjs 에서 직접 import 해서 쓰시는 분들 계신가요? 오늘 해보고 있는데 이상하게 svg 파일에는 viewBox 속성이 있는데 import 해서 렌더링한 곳에는 viewBox 속성이 없네요.
사진 3장
사진
이런거 설정되어있으신가용??
사진
babel-plugin-inline-react-svg 도 이용해봤는데 이것도 동일한 문제가 발생하네요
viewBox 속성 말고는 잘 렌더링 됩니다
사진
@아호 이것도 보시면 좋을 것 같아요!!
감사합니다! 이부분 참고하면 될거 같네요
혹시 다들 무슨 공부하거나 사고 싶은 분야의 책이 있나요? 시장조사 차원으로 오늘 서점에 가볼 예정인데 괜찮다 싶은 책인지 겸사겸사 봐볼까 해서요~
오 출판하시나요~~!?
css책을 한번 써 볼까 합니다. 한번 부러졌는데 또 다른 곳에서 제의를 주셔서 어떻게 될지는 모르겠지만 한번 진행해보려고요
책 나오면 꼭 소개해주세요!
네! 감사합니다~
와.. CSS라면 완전 환영입니다
JS는 그나마 종류가 많은데..
저도 꼭 보고싶어요 velog글보고 너무 반해서 여기까지 흘러 들어와있습니다
CSS는 에릭마이어 책 말고는...ㅠㅠ
CSS 시크릿 괜찮았는데 절판이고 나머지는 뭔가 퍼블리셔 양산형? (제이쿼리 짬뽕) 책이 대부분이라 책 출판하시면 인기 많을 것 같네용
Css 는 윤인성님 책 많이 보는거 같아요 저서나 역서 둘다요
와! 테오님 책 나오면 꼭 구매해서 읽어보고 싶어요 ㅋㅋㅋ
저두용
와 저 오타 엄청잘찾는데!!
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ저도 꼭 사서볼게요
사진
ㄱ
ㄷ
ㄸ
ㄷㄷ
와우 ㅋㅋ 회사 도서비 지원 정책 빵빵한가요? ㅎㅎ
저희는 도서비는 일단은 무제한입니다 ㅋ
와
헉.. 무제한에 도서도 개인 귀속이에요?
명목상 그렇지만 또 막 어뷰징을 하는 사람은 별로 없어서 ㅋㅋ
원래는 모든 도서였는데 누가 해리포터 전권을 사버리는 바람에 ㅋㅋ
자기 직군에 관련된 기술 도서로 되었다는 슬픈 전설이 있습니다 ㅋ
해리포터 ㅠㅠㅠㅠ
ㅋㅋ 역시 어뷰저는 항상 존재하네요
ㅋㅋ
그래서 자기계발도서나 인문학도 원래는 가능했지만 그건 빠지고 지금은 정해진 기술도서안에서만 가능해요
해리포터 ㅋㅋㅋㅋㅋㅋㅋㅋ
안녕하세요 javascript 관련 질문이 있는데요~ function newText(idx) { return { 1: '하나', 2: '둘', 3: '셋' }[idx] } 이런식으로 객체를 따로 선언하지 않고 함수로 접근하는 것 이 좋은 방법인가요? 어떠한 장점이 있나요?
테오는 혹시 취미 없나요? 개발 말고?
주어진 코드만으론 당장은 장점이랄게 없지만 나중에 조건이 추가된다던지, 값을 변경해서 줘야한다던지 할 때 코드 수정을 줄일 수 있습니다.
네... 요즘 하는 글쓰기랑 스프린트 활동? 사업 아이템 구상하기?
이름을 안 지어도 된다! 요 ㅋ
태오님은 개발이 취미이자 일이신 거 같네요 :)
옹 저 책장 보니까 궁금한게 있는데 테오님은 프론트 외의 것들은 언제쯤부터 공부하기 시작하셨었나요?
거기 return위에 private변수를 선언해서 사용할 수 있겠네영
반대죠~ 제가 개발을 시작할때는 프론트엔드라는게 없었기 때문에
제가 이해한게 맞나요? 주어진 idx에 대해서 return 조건을 다르게 해줘야 하게 된다면 장점이 된다는거죠??
아하 그렇군요
c, c++, 자바, php, mysql 이런것들을 더 먼저 배웠어요
ios, andorid도 했었고
앗 제가 스코프?클로저?를 잘 몰라서 그니깐 저 함수 내에서만 사용하는 변수를 만들어서 쓸 수 있게 된다는거죠?
그러다가 자바스크립트가 좋아서 프론트를 하게 되었습니다
넹 맞아여
오!! 감사합니다 ㅎㅎ
아하 그렇군요 저는 백엔드가 메인인데
자바스크립트로 시작했는데 자바가 훨씬 잘맞더라구요 ㅋㅋ ㅠ
예전엔 자바스크립트가 더 좋았는데 인턴일 하다보니까 관리하기가 너무 어려워져서...
사진
아무튼 시니어분들은 보통 언제쯤부터 다른 분야?도 시작하시는지 궁금해지더라구요 감사합니다 ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ맞아요 코틀린도 공부해보고 싶어지더라구요
우리 회사는 거의 다 넘어갔는데 빨리 넘어 갈수 있으면 좋은 것 같다라고 하시더라구요
탐색비용이 저렴하죠~
그냥 무작정 묻는게 아닌 왜 궁금하고 자신은 어떻게 생각하는지 나누면 더 좋겠네요!
일단 새로운게 나오면 다 찍먹은 해보고 있구요~ 뭔가 설명하기는 힘들지만 그동안 공감하고 있었던 문제들을 해결하는 어떤게 나오면 아! 이거다! 하면서 본격적으로 넘어가게 되는 거 같아요
아항 글쿤요 근데 확실히
주니어랑 시니어의 가장 큰 차이는 어떠한 문제 해결 방안 중에 뭔가 나오면 도입할 수 있는 추진력이라고 해야 하나
받아들일 수 있는 시간 자체가 짧은게 좀 큰 것 같아요
저희 시니어 분도 엄청 빨리 배우시고 도입도 엄청 빠르게 하시던데 멋있으시더라구요...
저도 빨리 경험 쌓고싶네요 ㅋㅋㅋㅋ
레거시를 하시는 곳에서 주니어분들이 새로운 기술에 대해서 주저하게 되는 것은 내가 책임질수 있을까?라는 부분이 제일 큰 것 같더라구요
와 진짜 100퍼센트요
제가 진짜 딱 그렇거든요 안 해본거 하라고 하면 진짜 너무 부담스러워서 어떻게 해야할지 모르겠고 막 그래요
마냥 좋다니까 좋은 걸 쓰고 싶어하는데 기존댜비 뭐가 좋기때문에 뭘 개선 할수 있다는 것에 대한 확신이 없어서라고 생각해요
저는 그냥 일단 회사 코드에 반영하지는 않되
그러니까 하자고 허락받지 말고 그냥 일단 해보는 것을 추천드립니다
그리고 그걸 가지고 얘기를 해보시면 도움이 될거라고 생각해요
좋은 말이네요 사실 저희 회사가 작아서 그런지 제가 인턴인데도 말 잘 들어주는 분위기라 오히려 좋아할 것 같긴 한데
돈다발 들고 좋아하는 무지님이 나갔습니다.
레거시가 뭐에요?
유산.. 크게는 기술스택이기도하구..
작게는 버전..?
어떻게 잘 말해볼지 생각해보는 것도 좋은 것 같네요 조언 감사합니다 ㅎㅎ
쉽게 말하면 오래된 코드 정도로 생각해주시면 좋을 것 같아요
원래 서비스가 출시되고 성공을 하게 되면
1-2년? 거기에 운영을 몇 년쯤 한다면
5-6년전에 기획하고 개발을 했을텐데
닭고기집을 하다가 잘돼서 소고기를 팔게되면 쓰던 칼이 잘 안맞는경우가!!
지금이야 react18에 react-query recoil next같은게 최신이지만
실제 현업에서는 react 클래스 컴포넌트에 redux면 감지덕지요
jquery도 대부분이고
당시의 최신기술을 쓰더라도 낡을 수 밖에 없는 그런 코드들을 레거시라고 합니다
감사합니다!
테오 덕분에 피그마 배워보고 있는데 신기하고 재밌네요 ㅎㅎ 여러명에서 같이 개발 해보면 배워가는게 많군요..
저도 이런 개발자 보면 정말 멋있더라고요! 주니어인 저는 공식문서를 읽어도 뭐라는지 잘 모르겠고 여~~~~러번 봐야 음… 그런가? 싶은 정도인데 제가 이러는 이유는 개발 생태계에서 어떤 문제가 있어서 새로운 패러다임이 생겼는지 전제적으로 바라보는 시야가 좁아서 배우는 게 좀 느린 거 같아요. 그래서 공감하기 어려운 부분도 많고요… 역시 경험이 중요한 거 같습니다. 저는 그냥 울면서 하고 있습니다 ^^;; 언젠간 깨닫겠지… 하는 정도입니다 하하
redux는 안써도 뭔지 알면 좋아요 https://youtu.be/_shA5Xwe8_4
사진
혹시 위 사진 속, 코드에서 ctx.state.user에 저장된 값은 영구적으로 ctx.state.user에 저장되는 건가용>
미들웨어에서 ctx.state 객체에 값을 영구적으로 저장시키는 건가용? 아니면 일회성일까요?
눈물을흘리는라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 눈물을흘리는라이언님 반갑습니다 :)
안녕하세요!😊 반갑습니다 너무늦은밤이었어서 이제야 인사드리네요🙌
네~ 환영합니다. 여기는 프론트엔드나 개발이 궁금할때 함께 이야기를 나눠보고자 그리고 필요하다면 언제든 도움을 주고자 만들어진 공간입니다.
언제든 궁금한게 있으면 질문 남겨주세요. 제가 아는 것은 바로 답변 드리도록 하겠습니다. 또 반대로 다른 분들이 질문을 주셨을때 내가 아는거다 싶으면 주저말고 답해주세요.
넵~! 잘부탁드립니다!
네~ 감사합니다 :)
스프린트 6기 회고글입니다. +_+ 다시한번 스프린트에 참여해준 분들게 감사드리며 다른 분들도 스프린트나 사이드 프로젝트를 할 때 이 글이 도움이 되기를 바랍니다. https://velog.io/@teo/google-sprint-6
사진
사진
div에 padding을 주었더니 저렇게 부모div를 넘어가는데 해결 방법이 있을까요..?
box-sizing을 뭐로 쓰고 있나요?
보내주신 예제에서 자식 엘리먼크 width는 100%가 걸려있나요?
트*
css코드도 한번 같이 보여주세요
부모 div는
사진
자식 div는 padding: 1rem입니다
box-sizing: border-box를 넣거나 width 100%를 제거하면 될거에요
기본적으로 css 박스는 content-box로 width에 패딩 보더 마진든을 더해가는 방식입니다
그래서 width:100% + padding 1rem이 되어서 삐져나간거에요
이런게 불편하다고 해서 border-box라는 스펙이 생겼고 width에서 패딩 보더 등을 빼는 방식입니다
아 그렇군요... box-sizing을 무심코 쓰기만 했어서 놓쳤네요 감사합니다!!
그래서 box-sizing 값을 border-box로 주면 width 100%가 되어도 기대동작이 될거에요
넵 말씀해주신대로 border-box로 해결했습니다!
그러면 각자 스타일이나 계산에 따라 box-sizing을 쓰나요?
저는 주로 border-box 기준으로 항상 생각하고 css를 작성했던것 같습니다
그래서 최근 개발에서는 * { box-sizing: border-box} 등으로 그냥 글로벌하게 쓰는 편입니다
맞아요 대부분이 그렇게 생각해서 아예 기본 세팅을 그렇게 해서 쓰지면 좋아요
쓰시면*
앗 그렇군요 감사합니다!!
reset css 에 왠만하면 다 들어가 있더라구요 (crackup)(crackup) 하나를 알아도 제대로 알아야겠다는 생각이 드네요 👍👍👍 감사합니다 ~
Width:100%가 어디기준인지 Width: auto 가 어떻게 다른지도 같이보심좋을듯요
혹시 msw로 mocking 하시는 분 계실까요? axios는 되는데 form 태그로 submit할때 msw가 해당 url 인식을 못하는거 같습니다. form 태그 요청도 msw가 인식하게 만드는 방법 아시는분 계실까요..?
안녕하세요 styletron 같이 atomic-css를 구현하는 라이브러리에서 padding: 20px 10px 과 같이 shorthanded property를 사용하면 안 되는이유가 멀까요?
form 태그는 js가 아니라 html에서 서버에 직접 호출하게되는게 msw는 스트립트에서 후킹하는 방식이라서 안되는 것 같은데 되는 방법은 잘 모르겠네요. form 태그 대신 API 방식으로 만들수는 없나요?
아… 그래서 안되는거였군요!! 뭔가 구글링 해도 안나와서 input 받은것들 value만 넘겨서 api로 요청하는 방식으로 만들고 있었습니다 ㅎㅎ 이대로 해야겠네요 감사합니다 테오님!!!
아마 캐서케이딩이 잘 안먹을까봐 그런거 아닐까요.. padding-top padding-bottom 이런걸로 다 라이브러리에서는 정의할 테니 사용순서에 따라 캐서케이딩이 먹힐려면 동일한 속성을 사용해야할 거 같아요 (테일윈드 쓸 때의 경험으로 말씀드려봅니다..)
개인적인 생각으로는 shortanded와 longhanded를 같이 쓰지만 않으면 문제 없지 없을거 같은데.. 아닐까요? 흠
https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties 여기에 나와있는 까다로운 예외상황 때문이 아닐까요?
안녕하세요! CSS 전체 선택자(*)를 사용할 때마다 찝찝한 마음이 들어서 직접 테스트를 해보고 정리 해봤습니다. 이렇게 테스트를 하는게 맞나 싶지만..틀린 부분에 대해 알려주시면 정말 감사할 것 같아요. 🥹 https://onlydev.tistory.com/144
맞아요 모던 브라우저에서는 *는 성능 문제와는 이제 상관이 없어요~ https://levelup.gitconnected.com/the-css-universal-selector-is-slow-and-should-be-avoided-yet-another-lie-eb4d15f4c320?gi=2c3630a7b66a
나누야님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 나누야님~~ 반갑습니다 :)
typesafe-actions 관련 질문있습니다! redux-toolkit과 유사해 보이는데 언제 사용되나요? npm trends 찾아보니까 typesafe-actions가 훨씬 인기있어서 놀랐어요 🫢typesafe-actions은 redux-actions로 들어갔다고 하네요. 서로 어떤 관계가 있나요?
둘은 비교 불가능하다고 생각합니다~
완전 다른 건가요?
두 라이브러리가 해결하고자하는 문제나 관점이 좀 다르고요
앗..... 죄송합니다
맨 윗줄만보고 typesafe-actions vs redux-toolkit로 봤네요
안녕하세요 😊
네~ 어서오세요 환영합니다. ㅎ
여기는 프론트엔드나 개발에 궁금한 것들을 서로 공유해가며 함께 성장하고자 하는 공간입니다. 실무나 코드 혹은 커리어나 고민 상담 등 무엇이든 편하게 글 남겨주세요~ 저를 비롯한 여기 사람들 누구든 대답을 해줄거에요!
사진
이런 디자인은 flex로 정렬하려면 어떻게 해야하나요..?
생각나는건 gap으로 강제로 하는건데 그건 반응형 할 때 좋지 않을 것 같아서 ㅠ
flex-basis 자식에 사용하는건 어때요??? grid로 속성 사용하는 건요?
사진
align-items : center justify-content:space-between
빨간 테두리 부모 컨테이너의 위치가 중앙에서부터 시작하는데 추가로 설정할 css는 없을까요?
grid는 따로 사용해본적이 없습니다 ㅠㅠ 말씀해주신 flex-basis 한 번 찾아보겠습니다!
flex-basis flex-grow flex-shrink 로 정의할 수 있는데 맨 처음 기본 비율 어떻게 가질거냐 설정할 수 있어요
헉 말씀하신게 이해가 잘안되어요 ㅠㅠ 사진이 너무 단편적이라 좀 더 크게 보면 좋을거같아요
사진
부모의 부모에서 text-align: center로 설정하시면 될거에요
앗 그렇군요 다시 올렸습니다!
이런 디자인을 조금 더 설명해줄수 있나요?
아님 margin: 0 auto 주는것도 방법일 것 같습니다
부모를 중앙정렬 후에 그 안에 요소들을 flex space-between 하는 말씀이신가요?!
요구사항이 18학번을 가운데로 두면서
우측 하트도 정렬이 필요한 거라고 이해하면 되나요?
넵 맞습니다 말씀해주신대로 18학번 문화상품디자인 문구가 중앙정렬이고 하트는 오른쪽 정렬을 해야합니다!
18학번 컨테이너를 가운데에 위치하기 위한 방법이었어요 저걸 설정한 이후에 18 학번 컨테이너를 display: flex로 주고 자식 요소들에서 flex: 3, flex:1 을 주면 어떨까 했었어ㅛ
사진
이렇게하시면 좋을거같네욤 ㅎㅎ
제 의견 ㅠ 좋은거같진않네요 이제보니
아 넵 충일님이 표시해주신 그림이랑 지키미님이 알려주신이 동일한거 아닌가요?
제가 잘 못 이해했을까요? ㅠ 한 번 해보겠습니다!
사진
이렇게도 좋을지도? 방법은 여러개라서
사진이랑 학번 학과까지를 하나의 박스에 넣어서 가운데정렬 하시고 하트는 flex 없이 따로 겹치는 게 낫지 않을까요
아 그렇군요
그러면 absolute도 괜찮은 방법일까요?
네 동의합니당
flexbox로만 하고 싶다면 왼쪽에도 ❤️ 12 와 동일한 컨텐츠를 넣고 visible:hidden이나 opacity: 0을 줘도 되기는 합니다. 그러면 어떠한 반응형에서도 안정감은 있을 수 있는데 꼭 그래야 하는게 아니라면 absolute도 괜찮아 보입니다
absolute로 만들게 될 경우 가운데 글자가 길어졌을때에 대해서 대비하는 방법을 고민하긴 해야 될것 같아요
네네!!
우와.. hidden 은 생각도 못 했었네요.. 감사합니다!
다들 답변 해주셔서 너무 감사합니다! 알려주신 여러 방법 중 지금 코드랑 가장 잘 맞는 방법으로 해결하겠습니다.
감사합니다!
css 쉽지않네요
그러게요 ㅎ.. ㅠㅠ
혹시..
사진
개발자도구에서 네트워크 창 키고
F5 눌러서 새로고침 할 때 많잖아용?
근데 어제부터
사진
그렇게 하면 이 화면이 뜨는데 혹시 똑같은 문제 겪어본 사람 있나용? ㅠㅠ
네트워크 바로 밑에 오프라인 돼있는거 바꿔보세요
하아...
감사합니다
정말 감사합니다 ㅠㅠ
이모티콘
eslint 관련 질문좀 드려도 될까요? 이번에 린트를 도입하면서 하나씩 수정하고 있습니다. 해당 페이지가 마운트됬을때 실행되야하는 함수가 있어서 useEffect의 의존성 배열에 [] 이런식으로 해서 구현을했었는데 린트상에 다음과 같은 에러가 뜹니다. 혹시 좋은 방법이나 참고할만한 문서가 있을까요?
사진
사진
그냥 의존성배열을 주지않는식으로 하면 될까요?
저는 ignore eslint 했습니다..
저런 경우에만 린트무효에 넣다는 말씀이신가요?
넵 맞습니다 disabled-elisnt-next-line 인가..
그 라인만 무시하고있습니다!
저 룰을 뺐어요 전
아.. 쿠키 설정할 때 httpOnl:true로 옵션값으로 설정할 때가 많잖아용
그렇게 함으로써 프론트에서 axios 결과값으로 response를 받을 때
headers에
사진
쿠키 내용이 제외되는 건가용? 자바스크립트로 접근 못하게끔?
httpOnly 의 목적이 자스에서 접근 못하게 하는거라고 봐주시면 될거같아요
아
제가 이해한 바가
맞다고 보면 되나용?
axios 로 백엔드에서 설정한 쿠키값을 받아오려고 하는데 headers에 cookie값이 없길래 당황했거든용
axios 뿐만 아니라 자스로는 뭘 해도 접근 못한다는 점..?
말고는 잘 이해하신 거 같아요!
아하
그럼 백엔드에서 설정한 쿠키는
프론트에서는 가져올 수도 없고, 제거할 수도 없는 영역인 건가용?
자스로는용
CSRF 위험으로 보호하기 위해서 사용하니깐 못하지 않을까요!?
맞아요!!
심지어 읽을수도 없어요
https://thereclub.tistory.com/59
아.. 가져온다는 말이 읽는거죠
ㅋㅋ
이런데서 언급하는 쿠키랑은 다른 개념의 쿠키인건가용?
같은건데 저 설정을 하면 아무것도 못하는거라고 생각합니다
똑같은 쿠키 저장소에 저장되고 있다고 보여서용
프론트에서도 쿠키 설정할수있는데 httpOnly로 해놓으면 아예 가져오면 오류나더라고요
가져오려고 할때
편하게 생각하면 같은 쿠키지만 값 중에는 보안용타입이 따로 있다고 생각하보셔도 무방합니다
해*
백엔드에서 설정한 쿠키가 보안용타입이겠군용
저 위 블로그에서 쿠키 읽어온다 생성한다며 소개하는 쿠키는 not 보안용타입..
보안용보다는 백엔드 전용이 이해하기 나으실수도 있겠네요 파이버님이 말하신 자스에서 못건드는 타입이 제일 정확할듯요 ㅋㅋ
이해가 갔어용
뭔가 속시원해졌습니다 ㅋㅋ 감사합니다!!
저 핸디님이 질문하신 내용중에 궁금한게 있는데 의존성 배열에 props를 넣어주는 대신 빈배열에 룰을 무시하는 이유가 먼지 알수 있을까요?? 마운트되는 순간에 실행되는 거라면 훅의 props할당이 useeffect보다 먼저 실행되서 의존성 배열에 추가해도 문제가 없을꺼 같은데 혹시 제가 알고 있는게 잘못된건가 싶어서요.
훅 내부에서 실행되는 함수를 의존성배열에 넘기는 방식에 대해 물어보신건가요?
의존성 배열에 워닝이 있는데 이를 무시하게 설정한다고 하셔서 왜 그런지 궁금해서요
아..제가 말을 헷갈리게 썼군요. 핸디님이 질문하신 내용에 다른분들이 답변 하셨는데 이에 대한 궁금증입니다. ㅎㅎ
일단 저는 해당 페이지가 랜더링되면 최초로 실행되도록 useEffect에 빈배열을 넣었는데, eslint 설정상 빈배열을 넘기는 것에 워닝을 줍니다. 근데 그렇다고 빈배열을 안넘기는 대신에 워닝을 방지하기 위해 내부에서 사용하는 props를 넘기는건 해당 props가 바뀌는 경우 트리거가 되는 상황에 대해 사이드이펙트가 발생할것같아서, 그럴바엔 해당 린트옵션을 오프하는 방식으로 많이들 우회하시는 것 같습니다. 저는 좀더 근본적인 해결색이나 best practice가 있는가 해서 질문을 드렸었구요. ㅎㅎ
일단 린트옵션과 useEffect에 대해서 좀더 공부해서 다시 자답할수 있도록 해보겠습니다.
저는 그냥 "마운트될 때 실행" 을 표현하는 데 있어서 빈 배열을 주는 게 너무 일반적인 문법이라 의존성 배열에 빈 배열 넣는 로직을 포기할 순 없었던 거 같아요
뭔가 의존성 배열에 뭐가 들어가 있다면 마운트될 때만 실행하라는 의미로 안 받아들여져서
저도 이 생각때문에 빈배열이 안되는 린트에 대해서 고민중이었습니다
아..그렇군요.저는 혹시나 제가 모르는 다른 이유가 또 있나 싶어서 여쭤보았습니다. 답변 감사합니다. ㅎㅎ
엄지척 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
늦은시간에 죄송합니다 ㅠㅠ 혹시 mount의 뜻을 `정제`라고 생각하면 좋을까요..?
PC에서 USB를 꽃으면 USB 인식이 될때 mount라고 표현합니다.
초기 어원은 linux계열에서 디스크를 찾아서 OS에서 사용해야 할때 OS에 Disk를 mount해서 사용한다는 데어 유래되었구요
DOM에서는 컴포넌트를 DOM Tree에 붙여서 Document에 결합이 된다라고 보시면 될것 같아요
딱 맞는 워딩이 생각나진 않지만 장착, 부착, 시동, 결합 등으로 생각해보시면 좋을 것 같아요
'정제' 라고 생각하계 된 배경은 뭐에요?
앗! 테오님 감사합니다 생각하게 된 배경은 web component를 만들어 사용하고 있는데 (js 공부중입니다!) fragment 안에 원하는 형태의 component를 만들어 화면에 보여주는 작업을 진행 중입니다. 진행하는 과정에서 create, render 등 각각 역할에 맞는 로직을 구현하고 있었습니다.
자료 조사 중 mount를 보게 되었는데 render와 어떤 부분에서 차이가 있는지 mount 네이밍은 언제 사용해야하는지 혼동이 와서 질문드렸습니다 😅
그렇군요! 렌더는 가상동이건 리얼돔이건 변경된 데이터에 맞게 엘리먼트를 만들고 값을 변화하는 과정을 의미하며
마운트는 이 컴포넌트가 DOM에 올라가는 것을 의미합니다
데이터가 바뀔때마다 렌더가 실행이되고
마운트는 생성후 필요할 때 한번 호출이 되겠죠
음 그렇다면 render는 `만들어지는` 느낌이고 mount는 직접적으로 DOM에 주입되는 느낌일까요?
오! 맞아요
render는 만들어지기 보다는 그려내는 용어에서 나온거라서 그려지는 쪽으로 떠올려주시면 좋을 것 같아요
3d 랜더링 이런것 처럼요
아하 마지막으로 그렇다면 update와 create라는 이름은 여기서 카테고리가 좀 다른? 느낌이 맞을까요?
명시적이지 않은??
정확히는 데이터를 최종 산출물로 만들어 내는 과정
update와 render는 취향차이라고 봅니다. 단 create와 mount는 완전히 같지는 않앙ㅅ
않아요 create를 해도 mount는 안 될 수 있습니다
update보다는 render쪽이 데이터를 가지고 ... 라는 뉘앙스가 더 있어서 render를 쓰는 것 같아요
아.. 확실히 이해했습니다 영영 사전으로 찾아봐도 의미가 모호했는데 너무 감사드립니다. 🥰🥰
초롱초롱 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 초롱초롱네오님~~ 반갑습니다 :)
안녕하세요! ☀️ https://jojoldu.tistory.com/667 제가 나아가고자 하는 방향이기도 하고, 공감가는 부분이 많은 글이에요. 좋은 글인 것 같아 공유합니다!
호돌맨님 주소인데
향로님인가
향로님블로그네요!
공감이 되네요~ 개발자는 그저 기술력만 제공하는 인력이 아니라 함께 좋은 제품을 만들어가려고하는 사람이어야 하는데 제품과 기술을 떼어두고 본인이 가진 기술에만 매몰되어 모든 서포트를 요구하는 사람과 일하는 것은 진짜 너무 싫어요 ㅋ
넵 향로님 블로그에요! ㅎㅎ
정말 기술력이 다가 아니라는걸 한번 더 느끼게 된 글이었어요. ㅎㅎ
손을 번쩍 든 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 반갑습니다^^
반갑습니다!! 손을 번쩍 든 무지님 :) 어서오세요 ㅎ
이곳은 프론트엔드나 개발에 대해 궁금한게 있을때 서로 묻고 답하며 함께 성장하고자 하는 공간입니다 ;) 실무나 커리어 고민 상담도 좋은 글 좋은 자료 공유등도 언제든 환영합니다~
혹시 history replace -> history.push 이후에 history back하면 뒤로가기가 두번되는 현상 겪어보신분 있으신가요
삭제된 메시지입니다.
ㅠㅠ 상태값은 리덕스로 해결했습니다
좀 반대의 경우도 있는데 기획자는 대충알려주고 개발자가 다 확인하는 경우도 있죠
저도 조금 동의하는 부분은.. 대충알려주고 개발자가 다 확인 하면서 일정까지 빡빡한 경우가 있는거 같아요 ㅜㅜ 안되면 다 개발자 탓..
그렇군요..🥲 협업이 정말 어려운 것 같아요.
안녕하세요~! 혹시 nexus3에 현재 사용중인 node_modules내 패키지들을 업로드하는 방법 관련된 참고할만한 글 있을까요...?
폐쇄망은 힘들어요 ㅠㅠ
엇..
ㅠㅠ그렇군요
일일히 publish하는 방법밖에 없을까요??
react-query를 쓸 때 커스텀 훅으로 감싸서 사용하신다고 들었는데 그렇게 사용한 좋은 예시 코드나 오픈소스가 있을까요?
저희는 이런식으로 사용해요
앗 공식문서에도 있군요 ㅠ 감사합니다!!
혹시 개인용 깃허브, 회사용 깃허브 따로 계정 쓰시는 분들이 많으신가요? 저는 개인꺼로 회사 코드도 작업하는데 다른 분들은 어떻게 스시는지 궁금해요!
쓰시는지*
회사 깃랩이 있습니다
저도 따로 쓰고 있습니다. ssh alias 설정해 놓고 변경해 가면서 사용하고 있습니다.
아하 감사합니다~
혹시, 네이버 로그인 팝업창으로 구현해보신 분 계신가용?
로그인페이지('/login' - 부모창)에서 네이버 로그인 팝업창(callback 페이지 - 자식창)을 띄우고 백엔드에서 api 호출 후에 팝업창을 닫고 백엔드의 응답값을 로그인페이지로 보내려고 하는데, 창이 다르다보니까 전역상탯값으로 저장해도 데이터 공유를 할 수 없는데, 혹시 어떻게 해결하셨나용?
로그인에서 자동으로 제공한 팝업창이다 보니 흠..
사진
안녕하세요!! 리액트 앱을 배포해보고 싶은데 배포하는데 엄청 다양한 방법들이 있더라구요ㅠㅠ😂 이것저것 블로그 모아서 정리해봤는데 혹시 제가 이해한 것 중 이상한 부분이 있을까요?
오호 vercel도 사용해보세요! amplify랑 비슷해보이네요 얼마전에 한번 써봤는데 신기하더라구요 난이도는 위에서 아래로 쉬워지겠네요
네!! 버셀은 엄청 쉽더라구요 ㅋㅋ 3초만에 뚝딱..👍
정리한건 이상한부분은 없는거 같습니다! 제가 봤을때는요!
엇 이거 제가 툴 하나 만들어봤어요! 폴더별 독립 Git환경 만들어주는 툴인데..
아직 추가만 되고 삭제 변경이 안돼서 헿...
rtk query는 리덕스에서 사용한다는것 빼면 react query와 비슷한건가요? 뭐가 다른건지 잘 모르겠네요😅
https://react-query.tanstack.com/comparison 참고해보세요 비슷한 목적인건 맞숨다
혹시 스토리북을 swc 로 설정하여 사용하시는 분 있으신가요?
감사합니다
사진
배민현대카드 유의사항 글씨
일부로 이렇게 키운걸까요?…
카카오도 디자인 시스템을 적용하고 있나요?
본사는 모르겠네요~ 저희는 필요하다고는 생각하고 있지만 아직 전서단위로 만들지는 못하고 있어요 ㅎ
전사*
오 혹시 왜 아직 안만들고 계신지 여쭤봐도 될까요???
디자인 시스템은 토스 뱅셀 배민등이 유명한데 특징이 하나의 큰 앱으로 구성이 된다는 점인데요
저희 회사는 자잘하게 다른 앱들을 많이 품고 일는 구조라서
일단 디자인을 통일하기에 장벽이 좀 많아요
만들어진지 얼마 안되었고 조직문화가 각자 알아서가 강하다보니
아하 그렇군요 ㅎㅎ 통일하는데 드는 커뮤니케이션 비용이 더 클수도잌ㅅ겠네요 ㅠㅠ
오 ~ 그렇군요! 그래도 구글링해서 찾은 정보 링크보내드립니다!
다들 니즈는 있지만 완장을 차기는 좀 여러운 상황이에요. 회사 차원에서 리소스를 들여서 팀 차원에서 해야 하는데 그러한 리소스도 부족한 상황?
정말 디자인도 쉽지 않은 분야중 하나인것 같아요!
아마 일부러 그렇게 한 것같네용 ㅎㅎ 뭔가 금융관련법에 저런 내용은 키워야 한다고 들은 것같아용
저.. 다시 자바스크립트 공부할려고 하는데 프로젝트를 만들어 보는게 나을까요 아니면 딥다이브 모던 자바스크립트 책을 사서 읽는게 나을까요ㅠㅠ??
둘 다!
다른 곳이었으면 누가 실수했나 보다 하겠는데 배민이니까 뭐 이유가 있나 의심부터 하게 되네요 ... 이름값인가봐여 .. ㅎ
ㅋㅋㅋㅋㅋㅋㅋ 둘다군요!! 좋습니다!! 둘다 도전해보겠습니다!
그렇지만 프로젝트에 무게중심을 더 실어주면 좋을 것 같아요 ㅎ
넵ㅎㅎ 근데 ebook 핸드폰으로 보는거 불편한가요??
보통책이면 볼만한데 개발책은 불편하더라구요 앞뒤로 왔다갔다하며 뭐였더라 뒤적뒤적 이런상황이 많아서ㅜㅜ
전 아이패드로 봐도 불편하던데요.. 😵💫
전 그래서 공부 안 하면 편하더라구요
ㅋㅋㅋㅋ
전 오늘 일하기 싫어서 반차냈어요
내일 열일 해야겠에요
에이..적당히 일해야죠ㅎㅅㄴ
혹시 프론트엔드 공부 시작한지 얼마 안됐는데 할 양이 많아서 어떤 것 부터 해야할지 감이 안잡히네요 어떤 루틴으로 공부하셨는지 여쭤봐도 될까요?
시작한지 얼마안됫을때는 클론코딩이나, 만들고싶었던거 만들면서 맨땅에 부딪혔던거같아요!!
지노님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 지노님~~ 반갑습니다 :)
반갑습니다!
어서오세요!! 여기는 프론트엔드가 궁금할 때 개발 얘기가 하고 싶을때 함께 공유하고 만든 공간입니다~ 마음껏 글 남겨 주세요 :)
혹시 pwa에 대한 의견들을 얻을 수 있을까요? 조그맣게 팀 프로젝트를 하는데 저는 리액트를 사용한 웹기술로 프로젝트를 진행하고싶은데 비개발직군 팀원들이 앱이 있으면 좋을거같다는 의견이라서요! 그래서 모바일 우선 웹을 제작하고 그걸 어플로 스토어에 등록까지 할 수 있었으면 좋겠어요! 들어보니 인스타 트위터 같은 앱도 웹으로 만들어진 앱이라고 하더라구요
웹만으로도 충분하다면 그냥 웹뷰에 링크만 붙여서 출시해도 괜찮아요
pwa로 만든 웹과 웹뷰로 만든 웹이 차이점 있나요?
pwa는 앱스토어에 등록하지 않은채유
로 애플 홈 바로가기나 안드로이드 바로가기를 이용해서 설치하고
웹뷰로 만들면 플레이스토어나 앱스토어에 배포 할수 있어요
모바일 pwa는 상업적인 용도로는 사실 유명무실하고 프로토타이핑 용도로만 보세요
프에공부중님이 생각하는게 네이티브 앱에 웹뷰를 다는 방식일거에요
아 그렇다는건 웹뷰란 웹은 웹대로 만들고 ios든 안드로이드든 네이티브앱을 만든 후에 거기에 웹의 링크를 다는건가요?
네~ 그리고 네이티브 기능이 필요하면 앱과 웹을 자바스크립트로 연결해서 서로 데이터도 주고 받고 기능도 주고 받는 식으로 만들어요
가령 앱 푸시나 같은거요
무신사가 하이브리드앱일까요
잘은 모르겠지만 그런 앱들은 웹뷰로 만드는게 더 이득일거라 그렇지 않을까요?
뜬금없지만 왜 pwa가 무용지물인가에 대해 잘 적은 글이 있어서 공유합니다 https://yceffort.kr/2020/11/pwa-pros-and-cons
와 정말 정리가 너무 잘되어있네요 !
태오! 제가 오늘 첫출근이라 회식하고있는데 언제끝날지몰라서 회고에 참여하지못할것같아요!
네 알겠습니다~ 출근 축하드려요!! :)
현생이 중요하죠~ 회고내용은 메일로 공유드릴게요
혹시 1:1로 연결되어있는 데이터들의 목록이 주어졌을 때 이걸 네트워크 형태로 시각화 하는 툴같은게 있을까요?!
사진
이런 형태가 되면 될 것 같은데 혹시 구현해보신 분이 있을까요?..
D3 Encharts 같이 이미 완성되어있는 데이터 시각화 라이브러리는 어떠신가요
빠르게 붙여서 사용하실 목적이면 Examples 에 있는 것 끌어다 써도 되지않을까 싶네용
오 감사합니다! ㅎㅎ
안녕하세요 스프린트 7기의 결과물! 프론트엔드 개발자로 성장하고자 하는 사람들을 위한 "프론트엔드 장인의 서재" 를 소개합니다. https://frontend-master-library.vercel.app/
한번씩 확인해보시고 우리가 만든 프로토타입에 대해 평가 한번씩 부탁드려요 :)
와! 벌써 7기 종료되었나요 완전 좋아요
와앙 고생많았어요
들어가서 확인해보니 뒤로가기 할 때 버그가 있어요!
인터랙션도 깔끔하고 좋지만 추천해주신 내용들도 동료분들과 같이 보기 좋을 것 같네요! 멋있습니당👏
옹 너무 귀엽네요 ㅎㅎ
톡게시판 '공지': 안녕하세요 스프린트 7기의 결과물! 프론트엔드 개발자로 성장하고자 하는 사람들을 위한 "프론트엔드 장인의 서재" 를 소개합니다. https://frontend-master-library.vercel.app/
오
대박이네요
도움많이될거같아요!
좋은 서비스네용! 디자인도 깔끔하고! 안그래도 책사려고했는데 보구 구매해야겠어요 대박
금액 난이도 페이지수 요약이나 필터링이 있으면 책 고르는 시간이 더 줄어들 것 같아요!
이병현님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 이병현님~~ 반갑습니다
사진
드디어 함수형 코딩 책이 왔습니다!! 이 책을 알려주신분께 너무 너무 감사드립니다
사진
첫 장부터 찐이라는 생각이 듭니다! 다 읽고 나면 후기랑 내용 정리 한번 해볼까 해요 고맙습니다!!
추후에 벨로그에 올리시는걸까요?!
그럴까합니다~ :) 잠깐 보고 있는데 컨텐츠가 너무 좋네요 ㅎ
워니님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세여 워니님!! 반갑습니다 :)
앗 안녕하세요~!
저는 강남언니(힐링페이퍼)에서 엔지니어로 일하고 있는 워니입니다 :)
와!!!
테오님한테 질문하고 싶은 게 있어서 여기까지 찾아오게 되었어요! ㅋㅋㅋㅋㅋㅋ
네! 언젠든지 물어보세요 ㅎ
제*
당장 사보겠읍니다...
헛 워니님 자기소개서를 본것같은데
아이력서!
ㅋㅋㅋㅋㅋㅋㅋㅋ 앗 맞습니다..!
와 안녕하세요
제 질문은요..! 최근에 요즘IT에서 요런 글을 엄청 재밌게 읽게 되었는데요! (넘 재밌고 유익하게 읽었어요 감사합니당!) https://yozm.wishket.com/magazine/detail/1396/ 이 글에서 기술을 공부할 때 그 기술이 나오게 된 배경을 이해하는 게 중요하다고 이야기해주시기도 했고, 아래 같은 내용을 보았을 때 이런 건 어디서 배울 수 있는거지..? 하는 생각이 많이 들더라고요! 그래서 이런 기술의 발전 과정과 배경은 어떻게 아시게 되는 것인지 구체적인 학습 방법이 궁금했습니다 ㅎㅎ — (아래 내용 👇) — 그러나 객체지향은 언제나 복잡함이라는 것을 가지고 있는 개념이기에 그냥 class와 object를 쓴다고 나아지는 것이 아니라 객체지향을 잘하기 위해서는 객체들의 관계를 잘 설정해야 하고 이로 인해 초기 설계에 굉장히 노력이 많이 들어가기에 객체지향 그 이상의 설계를 하는 원칙이나 방법들이 발전하게 되었습니다.
이모티콘 워니님 이력서 참고해서 취업했어요~~~ 감사합니다 여기서 감사인사를 드리네요 ㅋㅋㅋ
헉..! 이럴수가 ㅋㅋㅋㅋ 꺅 그런 좋은 일이 있었군요. 감사인사 해주셔서 감사합니다
뿌듯뿌듯
귀한곳에 귀한분이
개발자로 살다뷰면 유행하던 기술이 대체되기 시작하고 특정 기술 스택이 유행하게 되는 시기가 있습니다. jQuery -> React, Redux, recoil, react-query, svetle, vite, solid 등등 여기서 인사이트는 클래스형 컴포넌트(react, angular)대신 함수형을 좋아한다거나 redux와 함께 스칼라, 코틀림등 함수형 프로그래밍 유행할때를 떠올려주세요
css in js 나 tailwind도 있겠네요
와 저도바로사야겠어요
아무튼 이런 새로운 기술들이 나오기 시작하면 반드시 이 기술이 나오게 된 배경을 설명하게 됩니다 Core Concept이나 Background
이런것들을 읽어가다 보면 개선하고자 하는 방향 = 기존의 문제점 같은 거라서
전후 맥락을 맞춰가며 흐름같은 것들을 찾아봅니다~ 비슷한 문제를 느끼는 글도 찾아보고 마이너하지만 다른 해결책들도 찾아보고 그래서 어느정도 가설이 생기면 그에 맞게 말이 되도록 정리를 해보는 편입니다
이렇게 빌드업을 해서 방향성이 나오게 되야 나중에 새로운 기술을 선택해야 할때 근거있는 판단이나 설득력있는 기술스택 변경을 시도를 하기 위해 자료를 모으다 보니 자연스레 그렇게 정리가 되는 것 같아요
오 그런것이군요! 이해했어요! 학습하실 때부터 일단 배경이나 컨셉 같은 부분을 중점적으로 찾아보시고 전체적인 흐름을 파악하려고 노력하는 게 필요한거군요..! 듣고보니 당연한 것처럼 들리는데 듣기 전에는 이럴 생각을 못해봤네요..!
콜롬버스 달걀 같은 느낌인데.. 헛 ㅎㅎ 상세하게 설명해주셔서 감사합니다…!
이모티콘
지금 정리하면서 말을 멋지게 했지만 사실은 기술스택에는 얼리어탑터 기질이 있어서 레거시 변경을 어떻게든 설득시키보려고 정리하고 설득하던게 소중한 자산이 된거 같아요 ㅋ
우와 제가 이방에 올린듯한데... 사셨군요!
너무너무 만족합니다 +_+ 고맙습니다
맞아요 마이너 한것들은 실제로 해보지는 않지만 문서 첫페이지는 꼼꼼이 읽어봅니다 zustand나 jotai xstate solidjs cyclejs ngrx 이런것들은 해보지는 않았지만 통달(?) 했어요 ㅋㅋ
ㅋㅋㅋㅋㅋㅋ 그런것이군요 👍 일반적으로는 첫 페이지는 슥슥 넘어가고 튜토리얼을 열심히 보는 경우가 많은 거 같은데 사실 중요한 건 첫페이지엿어..
그쵸~ 그렇게 보다보면 뭔가 말로 설명하기는 어렵지만 비슷한 것들간의 본질들을 이해하게 되면서 뭐가 문제였고 뭘 해결하고 싶어 하는지 어떤 방식으로 이게 해결이 되는건지 이해가 되고 나면 뭘 써도 쉽게 적응하게 되는 거 같아요 :)
엇 워니님이 행차를
ㅎㅎ 예전에 브런치 글 많이 공유되던 기억이 나네요
두분 너무 좋은 말씀이네요.. 라이브러리나 새로운 기술스택을 왜 쓰는지 모르고 쓰는 것을 경계해야한다고 생각하는데, 막상 기계적으로 사용하는 걸 바꾸기 쉽지 않더라구요. 앞으로 공식문서의 첫페이지를 유심히 봐야겠습니다!
@워니 그리고 워니님 저번 주 GDGKorea 멘토링 세션에서 뵀었는데 ㅎㅎ 너무 반가워요!!
와 워니~~~ 유튜브에서만 뵙던 분을 보니까 너무 신기하네요 (crushed)(crushed)(crushed)(crushed)
워니님, 연발자(연예인 개발자)시네요….. 저 포함 아마 여기 있는 대부분이 워니님 이력서 양식 많이 참고했을 것같습니다! 이렇게 감사의 인사를 드립니다
연발자라고 줄여서 말하는군요 ㅋㅋ
그냥 이렇게 표현해봤습니다 ㅋㅋㅋ 연반인 (연예인+일반인)이라고 하듯이…
오 저번주 지디지 행사오셨었군뇨!! 소수 행사였는데 ㅎㅎ 반갑습니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅎㅎㅎ 감사인사 해주셔서 감사해요! 🙇♀️
이모티콘 왠지 민망하니 일하러 가겠습니다 ㅋㅋㅋㅋ
이래서 인덱스를 잘 설정해야 하는군요 호호
엄지척 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
벙찐 튜브님이 들어왔습니다.
안녕하세요 엄지척 프로도님!! 반갑습니다 :)
벙찐 튜브님도 환영합니다!!
안녕하세요! 반갑습니다~
혹시 공통 컴포넌트의 클릭 이벤트가 호출된 위치에 따라 다르게 동작해야하는데 이럴 때는 props로 어디에서 호출되었는지 체크를 하는 식으로 구현하는 게 좋을까요?
컴포넌트를 호출하는 부분에서 클릭 이벤트를 정의해서 props로 넘겨줄 수도 있을 것 같아요 !
아~ 그렇네요! 감사합니다 :)
갑작스런 글 공유좀 하겠습니다. ㅎㅎ 이번에 플러터 웹뷰로 프로젝트를 진행하다 간편로그인 관련 리펙토링을 진행했는데요. 그 내용을 간략하게 작성해보았습니다. https://all-dev-kang.tistory.com/entry/%ED%94%8C%EB%9F%AC%ED%84%B0-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B2%BD%ED%97%98%EC%9D%84-%ED%95%9C%EB%8B%A8%EA%B3%84-%EB%81%8C%EC%96%B4%EC%98%AC%EB%A6%AC%EA%B8%B0-feat%EC%9B%B9%EB%B7%B0-%EB%A6%AC%EC%95%A1%ED%8A%B8
오! 플러터를 쓰면서 또 웹뷰도 쓰는 군요~ +_+
좋은 글 감사합니다!
제가 앱까지 관리해야하는 상황이었고 플러터도 최신버전이 나왔다길래 한번 사용해봤습니다.!!
리액트 네이티브로 웹 개발을 하다보면 결국 네이티브 코드를 건들어야한다고 알고 있는데 플러터도 네이비트 코드를 수정하거나 해야할 일이 있나요?
어서오세요~ 여기는 프론트엔드 개발과 관련해서 궁금한것을 묻고 답하고 또 내가 한것들 좋은 것들 공유하면서 함께 성장하고자 하는 공간입니다. 편하게 글 남겨주세요 ㅎ
저는 지금 로그인 관련된 기능을 플러터에서 동작시키고 모든 동작은 브라우저에서 하기에 아직까지 네이티브코드를 건드린적은 없습니다. 다만 이번에 android12가 나오면서 splash screen이 기존 동작과 달려졌다고 합니다. 동작이 달라지면서 현재 splash screen 관련 패키지들이 해당 버전에서 정상동작하지 않는다고 알고 있고 이것에 대한 해결방법으로 네이티브 코드를 건드리는 방법도 있다는 글을 봤습니다(하지만 저는 과감히 포기..ㅎㅎ)
하지만 패키지들이 조만간 업데이트해줄것이라 기대합니다
오.. 그렇군요 자세한 답변 감사합니다!
타로님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 타로님~~ 반갑습니다 :)
안녕하세요. react 이용해서 프로젝트 진행하고 있는데 궁금한 점이 생겨 질문드립니다. 1. react 코드를 작성하고 나서 unit test를 많이 하는지? 2. unit test를 많이 한다면 어떻게 진행하는지 입니다. 감사합니다!
안녕하세요! 저는 프론트를 공부하고 있는 타로라고 합니다!
이모티콘
현재 프론트엔드에서 테스트는 커먼한건 아닌거같아요 ㅎㅎ
할 수는 있으나 주로 많이 하지는 않는다 정도로 이해하면 될까요?!
바빠서 테스트코드 만들 시간이 없어요
ㅍㅍ
ㅠㅠ
비슷한거같아요 ㅎㅎ 해야하는데.. 해야하는데.. 하면서 미뤄지는거 같아요 ㅠ
맞아요~ 완전히 안정화가 되지 않으면 수정할 일도 많아서
결제처럼 진짜 크리티컬한 비지니스로직을 제외하고는 잘 안하는 편입니다.
@유용태 (teo.yu) 테오님 혹시 개발자 인터뷰(면접X, 사용자O)를 하려고 하는데, 모집 글 올려도 괜찮을까요? 🙏
테스트 하는 방법은 BDD 를 읽으면 좋을거같아요!
하더라도 계산로직가 같은 확실히 검증이 가능한 곳만 하고 UI 테스트는 그렇게 잘 하지 않는 것 같아요.
네~ 얼마든지요!
아하 답변해주셔서 감사합니다~
감사합니다 :)
디자인 QA 협업툴을 만드는 AI스타트업 딥블루닷에서 이번에 인터뷰이를 모집합니다 :) 디자이너와 일하고 계시는 3년 경력 이상의 #FE개발자 #퍼블리셔 #마케터 #PM #기획자 분들을 대상으로 디자인 QA workflow 및 전반적인 협업 flow에 대해 여쭤보고자 인터뷰이를 모집하고 있습니다. 상세 내용은 👇 아래 신청 링크에서 확인해서 신청해주시면 감사하겠습니다!!🙏 https://forms.gle/vsT1NDA7DpWKC87LA
이게 뭐에요?
사진
3만원 상당의 기프티콘을 드린답니다
노트는 갤럭시노트..?
ㅋㅋㅋㅋ
앗 뭔가 잘못된줄 알고 깜짝놀랐어요
앗....
ㅋㅋㅋㅋㅋㅋㅋ
공개 가능한 범위에서 인터뷰의 전후 맥락을 알려주시면 좋을 것 같아요.
디자인 QA를 AI를 통해서 자동으로 해주는 그런 서비스를 만드시나요? +_+
네네! 디자인 QA 협업툴을 만들고 있는데, 현재까지는 디자이너분들 위주로 인터뷰를 많이 진행해왔고, 그래서 디자인 QA 자동화를 하는 부분에 집중했는데요, 다른 직군(특히 개발자)과의 소통 과정에서도 어려움이 있다는 걸 알게 되면서 다른 직군의 분들께서는 어떤 부분에서 pain이 있고, 어떻게 서비스를 제공하면 좋을까 하는 부분을 여쭤보려고 합니다~
재밌겠네요! ㅎ
그리고 디자인 QA뿐만 아니라, 팀 내의 협업 과정에서 어떤 어려움이 있는지 전반적으로 여쭤보려고 하구요 :)
테오님도 시간되시면….ㅎㅎ 🙏
네~ 신청했어요
이모티콘 앗 감사합니다
프론트 테스트 코드를 한번도 공부해본 적이 없는데 아래 책 괜찮은가요?! 이번 테오 스프린트 7기 결과물 보다가 추천에 있어서 물어봅니다!
사진
저도 궁금하네요~
https://techblog.woowahan.com/8159/ 내일이라서 링크 투척합니다!
안녕하세요 ! 혹시 질문이 있는데 recoil이나 리덕스와 같은 상태관리를 위한 라이브러리를 사용할때 전역 상태 관리에만 사용하시나요? 아니면 전역으로 관리가 필요하지 않은 상태도 함께 관리하시나요?! 궁금합니당
전역 상태 관리하라고 있는 라이브러리니 전역 상태만 넣으면 되지 않을까요?
로컬 상태도 넣을 수야 있겠지만… 그게 더 불편하지 않을까요
플젝마다 다른 거 같아요
어떻게 쓸지는 사용자 마음이긴 한데, 리덕스를 통하게 쓰면 전역 상태처럼 보이게 되므로 혼란을 야기할 수 있는 단점이 생기고 파일을 왔다갔다 해야 되니까 생산성이 낮아지는 대신 코드를 의미에 맞게 딱딱 분리할 수 있더라구요
각각 방식에 장단점이 있어서 플젝 특성 따라 가는 거 같아요
답변감사합니다! 프로젝트를 고려해서 한 번 생각해보겠습니다!
안녕하세요, yarn workspaces를 사용해서 packages안에 여러 프로젝트를 넣어서 설정을 했고 실제 개발을 할때는 vscode에서 root 디렉토리를 각 package/프로젝트로 하여 사용하려고 합니다.. 근데 root 디렉토리를 이렇게 하니.. vscode가 정상적으로 작동을 안하는데 혹시 같은 사례를 겪어보신분들 있으실까요? 정상적으로 작동하지 않는다라는 것은 .. vscode 플러그인 작동 하지 않음..코드에서 에러 및 경고 미표시.. git 변동내역 미표시. vscode 에밋 미작동.. 등 입니다..
안녕하세요 css 스크롤 스냅에 대해 질문이 있는데요~ 스크롤시에 하나의 섹션간격만큼 한번에 건너 뛰게 하고 싶은데 전체 레이아웃이 그렇게 구성된게 아니라서 일반적인 스크롤을 사용하는 레이아웃 + 스크롤 스냅이 가능한 레이아웃을 한페이지에서 사용하고 싶습니다! 혹시 css스크롤 스냅만으로 가능한가요? 아니면 인터섹션 옵저버(js)로 구현해야할까요?
삭제된 메시지입니다.
스크롤 컨네이너에 scroll-snap-type: proximity; 값을 주고 필요한 snap에만 {scroll-snap-align:start|cetner|end;} 값을 줘보세요~
해당 위치에 가서는 스냅을 무조건 강제를 해야한다면 쓸수는 없겠지만 그냥 스크롤와 스냅을 같이 쓸 수는 있을거에요~
스크롤 컨테이너 라는것은 overflow: scroll을 주어야하는 태그일까요?
네~
안녕하세요 redux-toolkit 에서 thunk 테스트하는 방법에 대해 질문이 있습니다~ 예를 들어 api요청에서 response를 받고 내부에서 여러 처리를 해준 다음 반환하는경우에요..! fetchAllPosts를 호출했을 때, 데이터가 잘 처리되는지 테스트하고 싶습니다. 로직을 함수로 빼서 테스트 하는게 좋을까요..? mock을 사용하려고 했는데 잘 되지 않네요ㅎㅎ
사진
아하 스크롤 컨테이너를 따로 가지게 되면 중간에 스크롤이 따로생기게 될 것 같아서 html에다가 스크롤 스냅 타입을 넣으려 하는데요 혹시 html에다가 scroll snap type을 넣으면 일반적인 스크롤을 사용하는 레이아웃 + 스크롤 스냅이 가능한 레이아웃을 한페이지에서 사용할수는 없게 될까요?
아니면 스크롤 컨테이너를 가지게 되어도 스크롤이 따로 생기지 않게 할 수 있을까요? overflow: hidden으로는 해결될 것 같지 않아보입니다 ㅠ
html의 스크롤은 내려가는것처럼 보이게 해야되어서요
웹이라면 html,body { height: 100%; overflow: hidden } 도 가능하지만
그냥 html,body { height: 100%; } body { overflow: scroll-y; scroll-snap-type: ... } 이런식으로 해보셔도 될거에요
혹시 해당방식을 사용하면 >> (일반적인 스크롤을 사용하는 레이아웃 + 스크롤 스냅이 가능한 레이아웃을 한페이지에서 사용) 이 가능할까요?
계속 반복되는 질문드려 죄송합니다 ㅠ 빠르게 적용하고싶은데 예시가 모든레이아웃에 스냅스크롤이 걸려있는것 말고는 못찾겠네요 ㅠ
네~ 한번 시도해보세요. 만들어 보는거 어렵지 않을거에요
넵 답변 감사합니다 테오! 한번 시도해봐야겠어요! 👍
삭제된 메시지입니다.
번호 인증 같은 경우에는 거의다 자체개발을 하나요? * 실제로 있는 번호인지 문자로 인증코드를 받고 입력하는 경우
Html 에서 클래스 네임쓰실때 언더바쓰나요 하이픈쓰나용????다른 회사들은 어떻게 쓰는지 궁금합니다!!
회사마다, 그리고 사람마다 다르겠지만
제가 아는 얕은 지식으로 답변을 드리자면
저희는 하이픈 사용합니다! id는 js처럼 카멜케이스로 사용하고 있어요
파이썬에서는 주로 스네이크 케이스를 사용하고
웹에서는 주로 카멜 케이스를 사용하는 것으로
알고 있어요
(일반적으로)
어드민 페이지 만드시는분들 혹시 어떤 UI프레임워크 쓰시나요?
Material UI 씁니다!
저희도 MUI 사용하고, 간단한건 Tailwind CSS로 만들고 있어요.
테일윈드 괜찮나용
혼자서 쓰기에는 좋은데 팀으로 사용하면, 다른 사람이 만든 마크업을 읽기 어려운게 조금 있었어요… 클래스네임들의 압박이 엄청나요..
그리고 좀 프리픽스 셀렉터라든지 약간식 엣지 케이스가 생기면 매번 검색하고 찾아야 되는게 불편해요..
그래도 사이드플젝이나 작은 플젝이면 되게 좋다고 생각합니다. 너무 쓰기 좋아요 빠르게 만들어지고
저도 동의합니다. 정말 빠르고 익숙해지면 개발자경험이 정말 좋은데 팀으로 사용하거나 유지보수할 때 조금 불편하기도 하고..그리고 마케팅 스크립트 설치를 해야하는 사이트의 경우에는 테일윈드를 사용하지 않는 게 좋아요!
보통 웹뷰로만 구성된 앱을 만들면 앱스토어서는 승인이 어려운가요?
아뇨 잘되요~~!!
오 다행이네요 ㅠㅠ 감사합니다!
경고문구, 사진 인데 비디오 촬영 허용, 사진 촬영시에 안내 문구, sns로그인 있는경우 애플로그인 등등만 잘 되시면 될거에요 ㅎㅎ 따로 웹뷰여서 더 출시가 안되었다 라고 느끼는 건 전혀없었어요 기본 앱으로서 지켜지지 못한게 있다면 지체없이 리젝이였던것 같아요
그렇군요.. 아마 정말 간단하게 개발해서 출시를 해보려고 합니다 서버 통신도 필요 없구요!
보통 리젝사유 잘 설명해주는데 이해 안되시면 바로 통화 요청하시길 추천드려요 ㅎㅎ 한국말 조금 서투신 분이 전화 받아주셔서 영어 조금 섞어가면서 설명하시면 될거에요
오 상담원도 있군요 감사합니다!
잘 진행되길 바랄게요!!
주로 로그인부분이나 접근할 수 없는 페이지(권한체크로 인해)에 대한 리젝사유가 많았는데 리젝사유 읽어서 해결하면 잘 넘어가더라구요.
김창균님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 김창균님~~ 반갑습니다 :)
권한 부분 특히 신경써야겠네요.. 감사합니다!
조금은 뜬금없는 질문일 수도 있는데요... const user = { username: 'hello' }; 를 만들고 나면 username 을 user 의 속성이라고 부른다고 알고 있는데. const user = { getUsername() { return 'hello' } } 이런 식으로 만들어진 객체에서 getUsername 은 user 의 메서드라고 인지하고 있는데 동시에 프로퍼티 인걸까요?
돈다발 들고 좋아하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
메서드 = 함수로 된 프로퍼티 입니다.
와 저도 오늘 이거 받았는데 좋다고 하시니 얼른 읽어 봐야겠네요 ㅎㅎ
자스 버전으로 나와있나요?!
예제 코드가 자바스크립트로 작성되어있어요!
그런데 이제 조금 옛날 버전의 ㅎㅎ;
var!
클래식하군요~~
혹시 콘솔에서 에러가 났을 때 위치가 3:12 이런식으로 보여지는데 앞자리는 파일의 줄 위치인걸 알겠는데, 뒷자리는 무엇을 의미하나요?
몇번째 글자부터 일걸용
아.. 그 줄에서 글자 순서 군요..
감사합니다.
손을 번쩍 든 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
저 여러분이라면 이 로직을 어떻게 작성하실 것 같은가요?
사진
이게 default, progress, revoked, completed 순으로 priority가 있어서 이렇게 작성했는데
else if문 정말 쓰기 싫은데 그래도 쓰면 보기 좋게 잡히는 것 같아서 그냥 else if문으로 걸었거든요
근데 뭔가 중첩 조건문 아니니까 괜찮겠지~ 하는 기분이라 찝찝하네요
저라면 이렇게 할 것 같아요
const getCmeStatus = (cme: CME[]): CmeStatus[] => { // 윗 부분 생략... return cme.map((item) => ({ id: item.id, status: getStatus(item) })); };
돈다발을 들고 좋아하는 무지님~~ 손을 번쩍든 무지님~ 반갑습니다!!! :)
저도요! status를 만들어주는 함수 만들고, map으로 바꾼다
우와 훨씬 보기 편해지네요
이러면 훨씬 낫네요 ㅎㅎㅎ 감사합니다 :)
잘개 쪼개서 해결할 생각을 못했었네요!!
호호님이 나갔습니다.
김미준님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
자란다 Recruiter님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요. 태오님 깃허브 내에서 블로그 글 확인하고 여기까지 오게 되었습니다. 잘 부탁드립니다!
감사합니다 자란다님,~ 어서오세요 :)
김미준님~ 반갑슴니다 :)
감사합니다 :)
문자 인증을 진행하고 싶은데 이런 경우에는 따로 솔루션 같은건 없고 대부분 자체적으로 개발을 하는걸까요!?
문자인증 하는 업체로 보통 했습니다.
보통 다날이나 인증업체 계약해서하지 않을까요?
제 경험상 문자인증 자체 개발이 쉽지 않을거에요. 어차피 통신사 통해서 발송하려면 통신사에서 제공하는 에이전트 깔아서 사용하던지 해야되서요
그건 본인인증아닌가요!?
아 그렇네요.. 저희 회사는 문자인증은 SK텔링크 계약해서 그쪽에서 제공한 에이전트 통해서 개발했습니다.
음... 결국은 문자보내는 업체는 계약하겠지만 인증할 때 테이블에 번호랑 랜덤번호 넣어두고 매칭되면 넘어가는 방식으로 자체개발해야겠네여
저희는 그렇게 했어요.
onClick에서 함수 호출된 관련한 기초적인 질문인데... 왜 첫번째 사진처럼은 함수가 정상적으로 작동하고 두번째 사진에서는 정상적으로 작동하지 않는지 궁금합니다 ㅜㅜㅜ
사진
사진
position..? 위 onclick은 position을 안받는데 아래는 받는 이유가 있을까요?
selectedPosition이 state로 보이는데 useCallback 안에 넣으시고 두번째 인자를 [ ] 로 주시면 처음 값으로 캐싱돼서 그런거 같습니당[selectedPosition] 으로 해주셔야 바뀔 때마다 함수도 바뀝니당
position 받는것도 차이가 있네요
아아아 이런
세상에
친절한 답변 너무 감사드립니다!!
눈물바다에 빠진 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
눈물바다에 빠진 라이언님이 나갔습니다.
회사 github private 프로젝트에 .env 파일 올려도 문제될 건 없겠죠?
virtual dom이 in-memory에 존재한다고하는데 in-memory가 무엇인지 아시는 분 있을까요?
그렇긴한데.. 그럼 .env로 관리할 필요가 있을까요
거기에 안올리려고 그렇게 관리하는걸로 알아서요
같이 프로젝트 진행하는 사람들의 환경 파일 내용이 다른 경우가 발생하더라구요… 그래서 올리는게 맞나? 싶어서
private 이면 괜찮지 않나요 ㅎㅎ 관리 포인트도 줄어들고..
올리면 편하긴해요, dev, prod 따로 env 관리하기도 좋고
in-memory는 그냥 컴퓨터 메모리 상에 존재하는걸 의미하는거 아닌가요 ㅎ
저도 궁금해서 물어봤었는데 꽤 있더라구요. 아니면 사내 게시판 포스트잇에 공유한다던지..
감사합니다!!!
저희는 사내문서를 노션으로 관리해서 노션 비밀문서에 팀원만 볼 수있도록해서 공유하고 있어요!
아 그렇군요 감사합니다~!
오와..유료버전을 사용하시는건가요? 5명 이상이어도 유료버전으로 사용해야하던데요..!
여기 계신 분들은 머지리퀘스트 전 코드 리뷰 진행을 어떤 식으로들 하시는지 여쭤봐도 될까요? ex) 각 인원 별로 시간이 남을 때, 회의시간을 잡고 한번에 얘기 등등,,
저희 회사 케이스보다는 더 도움 될 것 같아서 블로그 글 첨부합니다!
감사합니다!!!
저도 궁금해요 MR 날릴 때마다 주소 붙여서 메신저로 보내다가, 슬랙에 자동으로 알림 뜨게 하는걸로 바꿨는데 잘 확인을 안하게 되더라구요. 그래서 다시 메신저로 MR 날릴 때마다 확인 요청하게 됐습니다.
둘다 인데요,,,, 큰거는 잘 안보게 되더라구요 봐도 잘 모르고... 작은거는 보긴 하는데... 바빠서 잘 못봐요 ㅎㅎ..
근데 코드리뷰가 안되면 머지가 안되어서 답답할때가 너무 많아요 하..
공감..
코드리뷰 타임을 정하자고 제안 하면 이상할까요…? 할 때는 그게 별로라고 생각했는데, 지나고나니 그거 말고는 다른 방도가 있나 싶긴 하더라구요… 아니면 슬랙으로 "많이 바쁘시겠지만 혹시 코드리뷰해주실 수 있나요…?"라고 물어봐야하고…
저희는 슬랙이랑 깃헙연동해둔 알람오면
리뷰를 우선하는 식으로하니까
좀 덜 답답하더라고여 풀리퀘도 최대한 작게 만들고
이것도 회사의 운영방식일 수 있는데, 뭔가 일하고 있는데 리뷰를 너무 자주 하다보면 본인의 업무의 집중도가 떨어진다고 해야하나….? 저는 그런 부분은 조금 힘들기는 하더라구요….. (제가 멀티가 안되어서 그럴 수 있습니다)
맞습니다… 하던일은 끝내거나, 점심시간 끝나고 한다거나 해야할거같아요
그렇긴해요 저두 집중좀 풀리는건 어쩔 수 없더라고여
리엑트쿼리를 알고나니까 정말 신세계네요
아하,,, 저는 MDN 에서 property / method 가 구분되어 있어서 아예 별개의 개념인가 했습니다..!
코드리뷰를 숙제나 성가신 일로 여기기 보다, 동료들끼리의 성장과 피드백을 위한 기회로 삼으면 좀더 나아지지 않을까요!? 그리고, 누군가가 휴가나 다른 이유로 부재시, 업무 스위칭이 원활하게 되려면, 내 코드다 생각하고 자세히 보기도 해야 나중에 수월하기도 합니다!
감사합니다,,!
https://tsh.io/state-of-frontend/ 이방에 올라왔는지 모르겠는데 stateofjs 같은 프론트엔드 동향입니당
혹시 우아한 스터디 신청하신분 있으신가요? 발표가 났나해서요
오늘 결과가 나오는거에요?? 저도 신청했었는데 오늘 관련 이메일은 안왔네요
저두요!
ㅜ ㅜ 저도 신청은 했는데 답이 읎네요 떨어졌나봐욘...
저두 탈락인가봐여....ㅠ
그럼아징안나온건가바영
ㅋㅋㅋㅋ 그럼 저도 떨어졌나 보네여 아쉽군여....
네이버 FE 엔지니어들이 발행하는 프론트 엔드 관련 기술 소식 깃헙링크인데 테오님 글도 있길래 가지고 와봤습니다. 재밌는 글이 많네요 https://github.com/naver/fe-news/blob/master/issues/2022-04.md
공유 감사드립니다!
감사합니당 ㅎㅎㅎ
합격하신분들이 있네요
메일 안온거면 탈락같아요
ㅠㅠ
사진
안녕하세요 리액트를 공부하고있는데 막히는 부분이 있어 여기에 질문드립니다!! ㅠㅠ 복수의 배열 아이템을 화면에 뿌려주어야하여 컴포넌트 리턴문에서 map으로 돌리기 어려워서 상단에서 함수로 따로 지정해주어서 컴포넌트 리턴문에서 호출하는 방식으로 작성하였는데 위와 같이 코드짜면 인라인 스타일은 되는데 scss에서 스타일 작성하면 안 먹네요… 기본적인 내용에 대한 질문이었다면 죄송합니다 ㅠㅠ
저거 말고 다른 곳은 scss가 잘 되는거에요?
우아한스터디는 오늘 6시 까지 모두 안내될 예정이래요~!
아아 아직 안내가 다 안된건가요
그런것 같아 보여요
넵 감사합니다!
사진
혹시 daum 주소 서비스 이용하는 중에 window객체 관련해서 도움 주실 수 있는 분 계실까요?
삭제된 메시지입니다.
삭제된 메시지입니다.
기능은 잘 되는데… 계속 에러가 떠있어서요 ㅜㅜ 사용환경은 Next JS입니다. Next/Script로 <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> 가져온 상태이긴 합니다.
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
declare global { interface Window { daum: any; } }
type 정의 안되어 있어서 그런거 같은데 아래 코드 한 번 넣어보세요. declare global { interface Window { daum: any } }
앗
헛!
사진
types에 index.d.ts 파일 만들고 이렇게 그냥 선언해주라는 말씀이신거죠...?
일단 제 예시로 보여드릴게요.
사진
궁금한게 이렇게 되면 그냥 컴파일할 때 다 무시한다 이런건가용?
css 처럼 자바도 이런 기능을 하는 extension이 있나요 혹시 ???
사진
컴파일할때 무시한다기 보다는 window 객체에 daum이 없는데 왜 선언했냐 라고 error를 주는데 declare로 너는 모르지만 window 객체 안에 daum도 있어 그러니 넘어가라는 느낌입니다.
아……이해갔습니다.......
감사합니당…….!
브라우저는 1초에 60번씩 (디스플레이의 주사율에 맞춰) 리페인트를 하고 있는 건가요? requestAnimationFrame()은 다음 리페인트 전에 일어나는 콜백을 전달하는 걸로 알고 있는데요 리페인트 동작을 유발하는 행동을 하지 않고도 requestAnimationFrame에 전달한 콜백이 실행된다는 건 브라우저에 1프레임당 리페인트를 하고 있는 건가 하는 궁금중이 생겨서요
혹시 간단한 애니메이션과 인터렉션이 들어간 단일페이지를 만드는데 기본적인 단가가 있을까요? (기술스택은 제한이 없습니다.) 기간은 대략 2주정도이구요. ----- *내용 : 특정 텍스트와 관련된 웹사이트 제작 *기능 : - 책상 이미지 물컵을 누르면 물컵이 쏟아진다 - 액자를 누르면 액자가 뒤집힌다 - 휴대폰을 거꾸로 들면 텍스트에 대한 힌트 혹은 소스가 나온다
제가 이런류의 작업은 처음이라 혹시 기본적인 산출기준이 있으면 알려주시면 감사하겠습니다!
네네 ㅠㅠㅠ 동일 컴포넌트에 다른 태그들은 잘 되는데 for문 내부에서 정의한 div들만 scss에서 스타일링이 안되네요 ㅠㅠ
리액트에서 input[type='file']로 동영상 파일을 받아서 썸네일까지 추출하려고 하는데, 동영상 파일을 저장할 공간으론 S3를 사용하고 썸네일 추출은 Lamda를 이용하는 방식으로 하곤 하나용?
우아한 스터디 발표났습니다
저됐에용
감사함돵
사진
카타나님 무슨 팀인가요?
스터디도 어렵네요 흑흑
오와
저도 합격했는데 오프라인이네요.. 집에서 1시간 거리군요ㅠㅠ
오 합격하신분들 어느 팀이신지 궁금합니다
저는 http 완벽가이드로 신청했습니다
아하 인사 한번 나누면 좋겠네요
같은 팀이신가요?
js팀입니다 ㅠ
아쉽네요 ㅠㅠ
지원사유 어떻게 쓰셨었나요?
음 저는 그냥 "뽑아주신다면 열심히하겠습니다" 쓰고 깃허브랑 블로그 링크만 달아놨었어요
떨어진 1인인데, 하면 좋겠습니다 ~ 투로 썼는데 확실히 약했겠네요 ㅎ
저도.. ㅎㅎ
https://www.youtube.com/watch?v=ssDMIcPBqUE&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9CTech 지속가능한 SW 개발을 위한 코드리뷰 :: 4월 우아한테크세미나
헉 감사합니다,!
혹시, 프론트님들은 비디오를 업로드하고 썸네일 생성하는 작업할 때, 어디까지 프론트의 영역으로 잡으시나용? 비디오 파일과 비디오 관련 정보(제목)을 백엔드에 보내주는 것까지 하시나용?
아니면, 프론트 영역에서 비디오 파일을 저장하시나용?
바로 s3로 업로드하고 관련정보만 백엔드에 따로 보내도 되지않나요 ?
유튜브도 이런 방식인 거 같아서 하려고 했는데, 영어의 장벽이..
느껴지네용
썸네일까지 생성하고 저장하려고 하니까, 예상보다 난관..
다들 좋은 저녁되세요 :)
많은분들이 열심히하는모습 멋있습니다! ㅎㅎ 좋은 저녁 되세요 ! :)
혹시 맥북 수리해보신분 있으신가요?? 디스플레이가 깨진것 같네요.....
수리점 가셔서 견적 내보시는 거 추천드려요!
윽.. 그거 그러면 윗판 다 갈아야할텐데.. 전 백마넌 들엇엇슴니당 ㅠㅠㅠ
집앞에 튜바랑 신도림에 공식 수리점 가봤는데 수리비가 80이래서 애플케어 안들었던거 후회하면서 새거 샀어요ㅜ
다음주에 면접인데... ㅋㅋㅋㅋㅋ 재밋네요 ㅋㅋㅋㅋ
어 저도 면접 전날에 디스플레이 나갔었는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
애플케어 비싸긴 해도...들고나면 마음 편하긴 하죠 ㅜ
그래서 당근에서 미개봉 중고 급하게 샀었어요ㅜㅜ
왠지 오늘 우동이 유달리 맛있더라니... ㅋㅋㅋㅋ
프로로 사셨나요 에어로 사셨나요 ?
작년 1월에 m1 프로요!
m1 맥북 프로라고 해야겠군요
오호.. 그렇군요 저도 요즘 맥 관심있어서 기웃기웃 하고있습니다
램 16기가에 m1 프로를 살지, m1 에어를살지 고민중이에요
13인치였나요 ?
넵넵 작년엔 그거밖에 없었는데
램 8기가 m1 맥북 프로인데 사양때문에 아쉬웠던 적은 딱히 없었어요
그렇군요 ㅋㅋ 좋은 정보 감사합니다!
근데 제가 진짜 안쓰는 앱은 다 끄고 살아서 그런 거 같긴 해요 ㅋㅋㅋ 다른분들은 16기가 밑으로는 쳐다도 안보시더라구요
넵 사실 저도 그래요 ㅋㅋ 8을 어따 써.. 하는 생각이었는데 아닌가보네요
맥북 이야기가 나와서 여쭤봅니다.. 300만원 정도의 예산이 있다고 할 때 맥북프로13(M1) + 아이패드 vs 맥북프로14(M1 Pro) 중 무엇이 더 현명한 구매일까요..?! 주용도는 개발(프론트, 백엔드)입니다!
그 당시 나와있는 제일 좋은걸 구매하시길 바랄게요 하차감처럼 구매감이 가장 오래가는게 만족도가 오래가더구여
하차감.... 메모하겠습니다...!!!
하차감은 농담으로 받아주세요 ㅎㅎ 점점 성능이 좋은게 등장하는데 금방 최신스펙이었던게 점점 안좋아지더라구요 ㅎㅎ 자라자 님 퍼포먼스를 위해서도 장비는 제일 최신거 구매하시는걸 추천드려요!!
그렇군요...!!!! 조언해주셔서 감사드립니다!!
맥북 디스플레이 엄청 약하죠 ㅋㅋㅋㅋ 저는 손가락으로 윗판 들다가 깨졌는데 윗판 전부 교체로 86만원인가 나오더라고요
다행히 애플케어 가입했었기에 12만원으로 수리하였답니다 ㅋㅋㅋ
롯데백화점 부산본점에서 수리했고요 ㅎㅎ
대부분 은행이나 증권쪽은 제이쿼리나 js로 개발하나요?
var let const 를 공부하던중 의문이 생겨 질문합니다! var는 함수스코프를 따르고, let과 const는 블록스코프를 따른다고 알고 있는데 아래와 같은 이미지를 보니 let과 const가 함수스코프도 따른다고 되어 있더라구요.. 블록스코프 안에 함수스코프가 있어서 이렇게 해석이 가능한건지, 아니면 함수스코프 안에 블록스코프가 있는 것인지 아니면 두개를 대립하는 관점으로 봐야하는지가 궁금합니다!
사진
함수 스코프도 블록스코프 이니까 ..?
아니네욥.. 블록스코프도 함수스코프니까 가능한거같아요!
함수 스코프 안에서 let, const로 선언하면 함수 스코프에서 유효하고, 블록 스코프 안에서 let, const로 선언하면 블록 스코프 안에서만 유효하니까 저렇게 표현하신게 아닐까요..?
함수 스코프도 블록 스코프니까요
{ } 으로 묶인다면 다 블록 스코프 입니다
object 리터럴 말고
var 는 함수 스코프 이고, let const 는 블록 스코프 니깐, 블록 함수 스코프가 더 큰 범위 아닐까요?
*블록 함수 스코프 -> 함수 스코프
functuon {...} 함수 스코프
음.. 함수 스코프가 더 적은 범위 인거 같아요..
() => {} if (..) {} while() {..} for (..) {}
{...} 다 블록 스코프 입니다
저 트위터 사진이 반대로 되어있는거 같습니다!!
함수 스코프 안에 여러 블록 스코프가 포함될 수 있어요
사진
( ( ( 함수 스코프 ) 블록 스코프 ) 글로벌 스코프 )
요거의 반대가 되느 ㄴ거군요!?
[Front] Ahn님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
코드 모양으로 생각해보시면 그림을 이해 되실꺼레료
ahn님|~ 어서오세요!! 반갑습니다 :)
반갑습니다! :)
진현니의 트위터 그림은 정의가 아니라 코드의 실제 스코프 범위를 그려서 보여준거라고 생각해주세요
님*
개념적으로 보면 함수스코프도 블록스코프인디 실제 코딩에서는 블록스코프 범위가 함수스코프 범위 안에 있는 경우가 많겠졍
네!! 반갑습니다 여기는 프론트엔드나 개발에 대해 궁금할때 함께 얘기하고 함께 성장하고자 하는 공간입니다
언제든 문득 궁금한게 생기면 개인적이지만 모두의 인사이트를 위해 편하게 글 남겨주세요 ㅎ
블록 스코프 에 적용된다 -> 블록 + 함수 스코프에 적용된다 함수 스코프에 적용된다 -> 함수 스코프 에만 적용된다!
쪼끔 뒷북이긴 한데,, 저는 후자요 아이패드 생각보다 일할때 안쓰고 넷플릭스용 되더라고요
덕분에 이해가 되었습니다!!헤헤.. 감사합니다!! 도움 주셔서 감사합니다!!
이모티콘
정말 개인적인 궁금증이긴 한데 혹시 아래 같은 기능을 구현해보신 분 계신가요? 페스티벌 취소표 건질려고 미친듯이 클릭중인데 어떤 원리로 구현된 건지 궁금해져서요
사진
오.... 그렇군요.... 맥북 프로14로 픽스하겠슴다..ㅎㅎ
저도 맥북 14인치쓰고 있지만 16인치 추천드립니다 실제로 둘다 들어보니 무게차이가 별로 안나더러구요
백엔드에서 초당 요청횟수를 계산해서 일정횟수 이상일때 보내지 않을까요~?
저도 그렇게 생각하긴 했는데 실제 구현 방법이 좀 궁금해져서 질문드렸습니다 요청 횟수를 카운트하는 거라면 생각나는데 특정 시간 안에 요청 횟수를 카운트하는 로직은 어떻게 짜나 싶어서요
전 Request 시간 기준으로 계산하지 않을까요? Header에 포함된 내용으로 판단해서 할 것 같다고 예상해 봅니다
오 말씀하신 게 맞는 거 같아요 request 시간의 간격이 너무 짧은 게 계속 되면 비정상적인 접근이라고 판단할 거 같네요
답변해주신 분들 다 감사합니다~
혹시 자바스크립트 promise async await어떤식으로공부하셨나요?
너무어렵습니다..ㅜㅜ
드림코딩앨리 유튜브에 정리 잘되어있더라구여 좀부족하긴하지만
Promise 무슨의미인줄알거같은데 막상 제가쓰려하면 어떻게써야할지모르겠습니다..
돌머린가..
문법이 헷갈리시는거면 타입스크립트 쓰시면 의외로 도움이 될 수도 있어요
동기 비동기를 이해가 안가시는건가용?
그건아니고 콜백함수를 promise객체로바꾸려하면잘안됩니다..
ㅠㅠ 저두요...
document.addEventListener("click", (event) => { /* callback */ })
const callback = (event) => {... } document.addEventListener("click", callback)
const fromEventPromise = (type) => new Promise(resolve => document.addEventListner(type, (event) => resolve(event))
fromEventPromise("click").then(callback)
아.. 카톡 코드 포맷터 없는거 좀 별로네요;;
이슈업 해주세요..! ㅋㅋㅋ
코드 포맷과 마크다운 지원이 시급합니다
이모티콘
const fromXXXPromise = () => new Promise((resolve) => { callback자리에(() => resolve(event)) }
ㅋㅋㅋ 저는 담당자가 아니라서요 ㅋ
아무튼 const xxx = () => new Promise((resolve, reject)) => { ... }
이 포맷을 그냥 기억해두세요
그리고 기존 callback 자리에 resolve를 넣으면 됩니다.
저는 MDN 보고 어떤식으로 돌아가나 코드 돌려보면서 확인해보고, 어떤식으로 구현이 될지 공부했었어요!
async/await은 generator와 함께 공부하면 이해하기 좀 더 수월하실 수 있을 것 같아요.
이론만배우면금방까먹는거같은데 비동기는 배운이론을어떻게 실전에적용해볼수있을까요? 생각해보면 인강이든 구글링이든 비동기관련해서 많이찾아봤었는데 거의다까먹습니다..
많이 부딪혀 보시는 게 제일 확실한 방법이긴 해요
저도 처음 공부할때 몇개월 구르면서 되는거 안되는거 다겪어보고 나니까 좀 보이더라구요
제 생각도 많이 부딪혀 보는게 답인 것 같아요! 그냥 이론만 줄창 보면 이거 어디다 써먹지? 싶은 생각만 들다가 잊게되더라구요 ㅎㅎ
네 저도 완벽하게 다 아는건 아니지만 프로젝트 하면서 이리저리 치이다 보면 조금씩 보이는거 같아요! 만났던 오류에 대입해 보기도 하고
해볼만한게 뭐가 있을까요 음...
만들고 싶은거 하나를 일단 만들면서 필요한게 부딛혔을때 이론을 찾아서 적용해보세요. 이론만 배우는 것은 뭐가 있다는 것만 아는 선까지만 하면 됩니다. 실전경험 없이 이론을 파는 것은 도움이 안되요
실전 최고~
실전이답..
코딩은 실전의연속이군요
OPEN API를 통해서 우편번호를 통한 주소검색 같은거를 promise를 통해서 한번 구현해보세요
안녕하세요! 저번에 테오가 공유 했던 글쓰기를 잘해야 하는 이유에 대해 생각해보고 개인적인 경험과 함께 글쓰기의 중요성에 대해 글을 쓰게 되었습니다. 편하게 봐주시면 감사하겠습니다! 😆 https://onlydev.tistory.com/145
머리 빗는 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 머리빗는 네오님~~ 반갑습니다 :)
오 안녕하세요!!
이모티콘
어서오세요~ 여기는 프론트엔드나 개발이 궁금할때 물어보고 또 함께 성장하고자 만든 공간입니다. 언제든 궁금하게 있을때 물어 보세요 :)
넵 감사합니다 ㅎㅎ
NEXTJS 에서 api키를 숨기고자 .env 파일에 NEXT_PUBLIC_KAKAO_KEY=6910c81블라블라 로 만들어주고 필요한 페이지에서 const API_KEY = process.env.NEXT_PUBLIC_KAKAO_KEY; 이렇게 하고 쓰려는데 API_KEY가 계속 undefined로 나오는데 혹시 더 설정해줘야되는게 있을까요??
아.. 정답은 서버 재시작을 안해줘서 안됐던거였습니다~ 좋은밤되세여..ㅎ
와! 잘 읽었습니다~ 저번에도 느꼈지만 항상 글 깔끔하게 잘 쓰시는 것 같아요!
아이구..너무너무 감사합니다! 좋은 밤 되세요! 🥹
이제 3주정도 공부한 코린인데 정말 맞는말 인것 같습니다...
사실 테오님의 말씀은 전부 가라사대죠. 절대 믿습니다.
사진
고수분들에게 너무 쉬운 기능이겠지만...
드디어… 로그인 기능을 성공했어요
아 너무 뿌듯하네요
매일 이러기만 했으면 ㅠ
와! 로그인 축하드려요! 한 산을 넘으셨네요!! ㅎ
감사합니다 ㅠㅠ
컬러 조합이 너무 예쁘네요
디자이너가 아니라서 … 구글을 엄청 뒤져서 찾은건데 예뻐서 다행입니다 ㅠ
디자이너분들 존경…
22222
저런 컬러조합을 어떻게 '감각'만으로 단숨에 바로 컬러 시스템만들고 하시는지..
저의 경우에는 프로젝트 들어가기 전에 서비스의 키워드로부터 (회의나 자료 조사를 통해)메인컬러를 정하고 그로부터 색상들을 파생시킵니담.
네이버 FE 기술소식 4월달 https://github.com/naver/fe-news/blob/master/issues/2022-04.md
테오님 글도 있네요ㅎㅎ
그러게요! 신기하네요~~ ㅋ
CSS도 모던해지는 걸까요 ㅎㅎ 이런 소식은 너무 반갑네요!! https://news.hada.io/topic?id=6440
그러고보면 참 css는 변화가 느리네요 ㅋ
모바일 웹을 위한 스와이프나 모달팝업 스펙 같은거 좀 나왔으면 좋겠어요 ㅎ
와..그럼 정말 좋을 것 같아요!! CSS 중첩 구문도 그렇고 js가 제이쿼리 구문 가져온 것처럼 sass도 오버랩 되는 것 같아 보는게 재밌어요 😀
개발이야기는 아니지만 개발에 대입해도 너무 좋을 이야기라 공유해봅니다 https://youtu.be/CRKwszz6l2M
본명이 이준희였군요 ㅎㅎ
이형
ㅋㅋㅋㅋㅋㅋㅋㅋ 맨날 이형으로만 봤어서
저희 애기도 이형이고.. 이직할떄도 도움을 많이 받았는데 신기하네요
많은 영상을 봤는데 진짜 이번꺼는 처음부터 끝까지 버릴 내용이 한줄도 없었던것 같아요~ 제가 보통 주니어들에게 해주고 싶은 말 그 이상으로 너무 정리를 잘해주셔서
저분이 면접준비나 이직준비할때
도움 많이 되서 저도 자주보는
분입니다
자극이 많이되요
많아요 제가 경험을 알게된 내용이랑 너무 공감이 되는내용이 많아서 마냥 빤한 좋은 말이 아니라는게 너무 좋아요
흐흐~ 혀튼 점심 반찬 감사합니다. 점심때 봐야겠네요
누적되는 일이 있고 흩어지는 일이 있습니다. 똑같은 일을 똑같은 시간 동안 똑같이 바쁘게 해도, 주로 흩어지는 일을 하느라 바쁘다면 그건 참 비극입니다. "내가 이거 뭐하고 사는건가" "이렇게 바쁘게 살면 뭐하나" 라는 말이 나오는건 주로 흩어지는 일에 치일때 일겁니다. 아니 사실은 누적되는 일 따로 있고 흩어지는일 따로 있는게 아니라 일의 결과를 쌓이게 하는 사람이 있고, 그냥 흩어지게 두는 사람이 있는것 같습니다. 일을 누적되게 하려면 설계를 잘하고 끝을 상상하고 목적에 집착하면서 지속 해야합니다. 아주 간단하게 예를 들어 "회사 창립기념품을 만드는 잡일(?)을 부여받았을 경우 누적되게 일하려는 성향의 한명은 자신의 업무 덕분에 몇 년 뒤 사람들이 ""이번엔 또 어떤 멋진 제품을 받게 될까"" 궁금해하고 기대하는 모습을 상상하고, 십주년 되는해에 지난 십년간 만든, 컨셉이 일관되고 발란스가 잘 맞는 열 개의 제품이 담긴 스페셜 패키지를 만드는 걸 목표로하고, 첫해에 만든 제품이 웃돈에 거래되는 꿈도 꾸고 백년 되는 해에 전시를 하는 상상을 하며" 매해 의미심장한 일을 하게 될 겁니다. 흩어지는 일을 하는 사람은 검색을 하고 판촉물 회사를 찾고 가격에 맞추고 어느 해에는 예전에 나누줬던 걸 다시 만들기도 하고 또 어느 해에는 "아이 벌써 일년이 지났어?" 하며 괴로와 할지도 모릅니다. 고작 이따위 일을 하고 있나 투덜 대다가 십년 뒤 쯤 자신과 똑같은 일을 맡은 사람이 해낸 고작 이따위가 아닌 결과물을 보게 될겁니다. 매월 회식장소를 정하는 더 잡일(?)이 임무인 신입 사원이 100회 회식때 쯤 "강남구 회식 지도"를 앱으로 책으로 낼 생각으로 회식장소를 잡는다면 그것도 그 자신에게는 참 멋진 프로젝트 일겁니다. 어느회사 사장이 새해 첫날 직원들의 책상위에 장미 한송이와 그해의 메시지를 쪽지로 적어 놔뒀고 그걸 귀찮아하지않고 이십년 지속 했더니 다음 사장이 이어 받고 또 다음사장이 이어받았다면 그 사장은 백 년 뒤 그 회사가 가장 자랑하는 전통을 만든 사람이 될지도 모릅니다. 매해 열심히 신년사를 써서 낭독한 사장은 잊혀질테지만 장미의 전통에 대해서는 들어오는 신입사원 마다 "이 전통은 언제 누가 시작한건가요?" 라고 물을 겁니다. 그 스토리가 회사로비에 동판으로 새겨질지도 모르지요. 얼마전 남태정PD 로부터 매해 15만명이 넘게 참가하는 세계 최대의 음악축제, 글래스톤베리페스티벌이 1970년 하룻동안 자신의 농장을 개방했던 한 개인으로부터 비롯되었다는 이야기를 들었습니다. 그는 아마 상상하고 지속하고 누적하는 사람이었을 겁니다. 목적 설계 상상이 어렵다면 아무리 작은 일을 시작하더라도 무조건 이런 생각에서 출발 해버릇 하면 긴 여정에 도움이 될지도 모르겠습니다. (제가 늘 머릿속에 가지고 사는 생각이기도 합니다) "내가 하는 이 일이 전통이 될 것이다 "
위 영상 잘 봤습니당 ㅎㅎ 저도 최근에 읽은 글 중에 비슷한 느낌의 글이 있어서 공유드려요
하... 사람을 찡하게 만드는 글이네요 감사합니다
좋은 글이네요 출처를 알 수 있을까요?
출처는 제 친구인데…….ㅋㅋㅋㅋ 물어볼게용
https://brunch.co.kr/@peony/13 여준영 대표님 블로그에서 발췌했다고 하네요 ! 근데 그 블로그 주소는 제가 못찾겠습니다......
https://brunch.co.kr/@hyungsukkim#articles 혹시 이런 글 좋아하면 제가 진짜 진짜 좋아하는 '김형석'님 글들 추천드립니다. 카카오 부사장님으로 계시다가 최근에 퇴사하셨던 분입니다. 글을 읽어보면 얼마나 치열하게 고민 하시는 지 느낄 수 있습니다.
이모티콘 열정에 기름 부어주셔서 감사합니다..
삭제된 메시지입니다.
step이 있는 화면의 경우 1단계부터 입력했던 데이터를 저장해가면서 마지막에 최종 submit을 날려야할텐데 보통 어떤방식으로 데이터를 저장하시나요?
스텝의 부모 컴포넌트에서 상태를 관리하면 되지 않을까용 ? 음..
저도 이렇게했어용
1 page 안에서 각 단계 컴포넌트를 분기해서요?
저도 부모 스테이트 혹은 전역에서 그냥 처리합니당....
테오님 추천이면 바로봅니다..
사진
사진
부모의 div안에 input을 넣고 height 100%를 넣었더니 부모 영역 밖으로 나오는 현상의 원인을 알 수 있을까요?
저번에 비슷한 이슈가 있어서 테오님께서 box-sizing 알려주셔서 border-box로 해결했었는데 이번에는 다른 원인인 것 같습니다..
사진
해당 css 코드입니다. pc라서 이미지 모아서 보내기를 못해서 도배 죄송합니다 ㅠ
이건 box-sizing 문제 같은데,, 혹시 box-sizing을 reset.css 어디에 주셨나요 ?
input이 다시 오버라이딩하고있진 않나요 ?
테스트로 input에 다시 border-box를 줘도 마찬가지인가요 ?
box-sizing을 global로 만들어서 app.tsx에 넣었구 말씀해주신 input에 다시 설정을 주어도 동일합니다 ㅠ
사진
콘솔에도 보면 적용은 되어있는것 같습니다 ㅜ
아아 근데 다시 보니까 이거 그럴 수 밖에 없지않나요 ?
div height를 150px로 주었고
안에 input에 height가 100%면 150px인데
위에 h2의 높이도 있으니
그대로 밀린 거 아닌가요 ?
h2의 높이만큼 튀어나왔지않나 하는 ..?
아 맞는것 같습니다.. ㅋㅋ..제가 잘 못 생각했었나보네요 ㅠ
부모안에 넣었으니 당연히 부모 영역 내에서 100%를 생각해서 그런가봅니다 ㅠ
유치원생님이 아니라 교수님으로 변경하셔야할거같아요
초등학생 1학년 정도로 하겠습니다 ㅎㅎ
어리석은 질문에 답변 감사합니다 ㅠ 좀 더 생각했어야했는데 ㅠ
사진
Http status code
Very fun
lol
418 너무 좋아요
https://http.cat/ 고양이가 귀여운 스테이터스 코드 사이트도 있어요
혹시 코파일럿 사용하시는 분 계신가요..?
정보가 느려서.. 신청이 늦었는데.. 대기기간이 엄청 긴듯 하네요.. ㅜ.ㅜ 대신 탭나인 쓰고 있는데 나름 괜찮터라고요 코파일럿은 어떨지 궁금하네요
저씁니다
대기기간이 얼마나 걸렸나요..?
저는 한 3달 기다렸는데 전 진짜 나오자마자 신청했어요
저는 정식오픈해야 사용 가능할 듯 싶네요 ㅜ.ㅜ
많이 도움이 되시나요..?
코파일럿 쓰다보면 편하긴 한데 익숙해지면
플밍 느는느낌이 안나요 ㅠ
글고 당연한거지만 자잘한 로직은 다 수정해줘야도요
도
되
그리고 가끔 방해가 되기도 해서 꺼놓기도 합니다.
그렇쿤요~ 그래도 사용해보고 싶네요 ^^;
하지만 전체적으로는 만족합니다. 탭나인보다 훨 나아요
부럽습니다. ㅜ.ㅜ
삭제된 메시지입니다.
사진
이런식으로 다 써줘욬ㅋㅋㅋㅋㅋ
혹시 이런경우도 있나요ㅜㅜ 크롬에서는 전혀 문제가 없는데 파이어폭스와 사파리에서 스크롤 관련 버그가 생기네요 마우스를 오버하면 팀 카드의 색깔이 변하는 css이고, overscroll-y 는 막혀있습니다. 그런데 크롬은 문제없는데 파폭과 사파리에서 어느 순간 갑자기 y방향 스크롤이 생기네요...
사진
스크롤은 css고 그거 관련 코드는 브라우저마다 다른걸로 알고있습니다
그럼 브라우저마다 대응을 해줘야겠네요
보통은 모든코드를 다 넣죠 ㅋㅋ
혹시 css 속성이 vendor prefix가 들어간 속성은 아닌지 확인해보세요!(-webkit, -moz, -o 등)
모던 브라우저는 스펙이 대부분 통일되어서 괜찮지만 레거시 브라우저 대응용으로 vendor prefix가 들어가있다면 누락된 브라우저에서 동작이 달라질 수 있습니닷
오 맞아요 -webkit 으로 썼어요..
사진
앗 네 -webkit-scrollbar는 비표준이에요! 브라우저 스크롤바 스타일링은 기본적으로 브라우저를 따르게 하는 걸 권장하는지 스크롤바 스타일링은 표준 스펙은 scrollbar-width나 scrollbar-color이긴 한데 파이어폭스만 도입되고 있다고 하네요. 스크롤 커스텀이 필요한 경우는 스크립트로 구현하는 것 같아요! 그래도 말씀하신 문제는 스크롤 모양 문제가 아니라면 css로도 해결할 수 있을 것 같은데 caniuse.com 에서 사용하신 css 속성 확인해보시면 될 것 같아요!
사진
와....
ㄷ ㄷ ㄷ
읽어보니 확정된게 아니라 말그대로 29일에 발표한다는 기사더라구요
즐거운 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 즐거운 네오님~~ 반갑습니다 :)
이모티콘 안녕하세요 테오님 😆
https://github.com/lerna/lerna 종료
네 어서오세요~ 여기는 함께 프론트엔드와 개발에 대해 이야기 하고픈 것들 궁금한것들 공유 해보는 공간입니다~ 언제든 편하게 글 남겨주세요 ㅎㅎ
사진
yarn workspace, nx, 터보레포등이 있더군용.. 러나 잘가
이모티콘 레르나 한번 써봐야지 하고 생각만 했는데 작별을 먼저...
다른 모노레포가 너무 파워풀해져서 ㅎㅎ
헐...ㅡ
안돼...
안돼...ㅠㅠ
lerna 대체제가 혹시 뭐가 있을가요????
슬푸네요 ㅠㅠ 저희 이제 막 자리잡아가는데....
이거용
근데 종료될거라고 몇달전부터 말은 있었던거 같은데.. 그래도 추가 개발이 안 되는거지 사용은 되니깐요
대체제..얼른..찾아봐야겠다..
이거 읽어보셔요 모노레포 도구 설명 돼있어요
Lerna 안써봐서 다행이라고나 할까…? (dazed)(dazed)
감사합니다!!
모노레포 깃 관리하실때 혹시 어떻게 하시나요? 서브모듈 쓰시나요?
헐. lerna 저리된거 이제 알았네요 ㄷ ㄷ
혹시 framer-motion 사용할 때 scrollYProgress 을 useTransform 으로 바꿀 때, scale을 키우게 되면 엄청나게 버벅이는데 이에 대한 조치 방안 또는 조언을 좀 얻을 수 있을까요 ? ㅜㅜ
오.. sequelize 공식문서가 이쁘게 바뀌었네요
혹시 cloudflare pages에 nextjs 배포해보신분 계신가요?
해본적은 있는데 정적인 사이트만 배포해봤네요 ㅠㅠ 아마 옵션에도 Next.js(static) 이런식으로 떴었던것같아요!
Nextjs 배포를 하게된다면 ec2처럼 가상 컴퓨터공간(?)에 띄우는건지 헷갈리네요.. 아니면 개츠비처럼 html css js 파일을 배초하는건지..?
getServerSideProps 를 사용하셨다면 서버가 필요합니다
static이면 개츠비같은 느낌일거같네요
vercel에 배포하시고 cloud flare dns로 연결해서 써봤는데 그렇게 하시면 어떨까여?
프로젝트 셋팅하려고하는데 궁금하게 있어서 여쭈어봅니다! seo가 필요없는 프로젝트의 경우에는 next보다 react가 더 유리할까요? 아니면 ssr을 쓰기위해 next가 좋을까요?
그건 상황에 따라 다를거같아요
개발 리소스와
seo가 필요해서 next를 사용하는 것과 ssr이 필요해서 next를 사용하는 것은 별개인거 같아서 둘중에 하나라도 필요하시면 next를 사용하시는게 편하지 않을까요?
어떤조건이냐에 따라서??
리소스도 고려대상이겠네요
그게 젤중요하네요 ...ㅋㅋ
리액트 할줄아는 개발자 밖에 없는데 넥스트고려하는거도 공부기간이 리소스에 포함일테니..
잘 고려해야겠군요..
사진
혹시 git 3가지 중에 어떤걸로 설정해서 사용하시나요?
rebase 씁니다
저는 일단 머지로 하고
리베이스는 따로 해서 사용합니다
그렇군요.. 원래 ff only를 썼는데 계속 fast-forward 에러가 발생해서.. reabase로 바꿔야겠네요 ㅠ
오 그렇네요 ㅋㅋㅋ 훨씬 나아진 것 같아요
개인적으로 그전에는 너무 읽기도 어렵고 찾기 어렵더라구요.. ㅋㅋㅋ
사실 지금도…읽기 어려운건 마찬가지긴 하지만요 ㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋ그건 맞습니다
토스에서 재밌는걸 하네요 ㅋㅋ
스타트업 서바이벌 콘탠츠입니다
오호.. 재미있겠네요
flex 컨테이너에서 item들을 꽉 채울 수 있는 기능은 없을까요?..
item들의 비율은 필요 없이 말씀이신가요 ?
flex:1 한것처럼 flex 컨테이너에서는 조절이 안되나? 싶었습니다.
보니까 컨테이너에서 자식 선택하고 줘야할거같네요
align-self, justify-self 쓰면 어떠실까요?
넵 한번 찾아보겠습니다.! 감사합니당~
요부분 비슷한 상황은 아니지만 특정 엘리먼트 내부에 차트가 있었는데 이걸 리사이징해야하는 경우가 있었습니다. 내부적으로 랜더링을 막을방법이 없어 리사이징 시작할때 차트컴포넌트를 제거하여 블러처리하고 리사이징이 끝나면 다시 랜더링하는 방식으로 우회했던 경험이 있습니다.
사진
저 이런에러 뜨는데 도저히 찾아봐도 해결책을 모르겠습니다 ㅠㅠ
커밋하려는 코드에 lint 통과안하면 커밋 안되게 프리커밋훅 걸려있네요
lint rule에 맞게 수정해주시면 될 것 같습니다!
ㅠㅠ 앗 넘나 감사합니다!!!
조언 감사드립니다 :)
숭늉님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
ㅋㅋ/React님이 나갔습니다.
안녕하세요 숭늉님~ 반갑습니다 :)
안녕하세요~!
괜찮은 영상같아서 공유합니다~ 가볍게 보시면 좋을것 같아요~
프론트엔드의 역사라고도 볼수 있는 자바스크립트 프레임워크에 대한 변천사와 지금은 어떤 모습인지 잘 알려주는 글이 있어서 공유 합니다 ;) https://www.pzuraq.com/blog/four-eras-of-javascript-frameworks
샵검색 : #자바스크립트 완벽가이드
혹시 이책봐보신분?
사놨습니댜 ㅋㅋ
타입스크립트 관련해서 질문이 있는데요
사진
코뿔소 책이 모던자바스크립트 deep dive랑 차이점이 있을까요?
사진
이게 둘다 되는 이유가 뭘까요? |는 합집합이고 &는 교집합으로 알고 있는데...
영교님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
as 로 type assertion 해서 그런게 아닐까요? const ab: a | {ts: b} = {} 로 해보셔요
사진
사진
여전히 되네요??? 이유가 뭘까요 흠…
&으로 했을땐 둘다 있어야 되는거고 | 했을땐 둘중 하나만 만족하명 돼서
그런거 아닌가용
원래 타입에 없는 추가 키값이 있어도 통과되는걸로 아는데
저도 이렇게생각해서 |일때 ts의 구조적타이핑이 적용된다고 생각했는데 객체 리터럴값에 타입을 적용시킬지 잉여속성체크가 동작을 안하는지 의문이네요
& 일때는 b c ts 다 있어야 통과고, | 일 때는 b c 또는 ts 만 있어도 통과인데 원래 object 타입에 e f g 등등 다있어도 통과 되지않나요
경례하는 프로도님 반갑습니다 :) 어서오세요~~
a b 타입 지정 일 때 a b c 해도 a b 타입이 더 슈퍼 타입이라..
그쵸 그건 구조적 타이핑관점에서 맞는데 객체 리터럴을 타입이 명시된 변수에 할당할 때 해당타입의 속성유무와 그 외의 속성을 확인하여 에러를 발생시키는 잉여속성체크가 | 논리합에서 작동이 안되나 의문이들었어요
처음꺼 또는 두번째꺼에 만족하면 되는데 a b 가 있으니 추가적인 다른게 있어도 처음꺼 만족 하는거고 ts 일때도 마찬가지구영 허허
아.. 그렇겠네여 감사합니다
안녕하세요 ㅎㅎ
네~ 안녕하세요 :) 여기는 프론트엔드나 개발과 관련해서 궁금한게 있을때 물어보고 또 답하는 공간입니다~ 언제든 편하게 글 남겾 세요 ㅎ
남겨주세요 ㅎ
혹시 input type='file'에서 비디오 파일의 재생시간을 쉽게 받아오는 방법은 없나용?
바로 제공하는 메소드가 있을 줄 알았는데, 못 찾는 건지 아니면 아예 없는 건지..
stackoverflow에 유사한 질문이 있는것 같은데, 이 방법으로 해보셨나요?
혹시 패캠에 함수형 강의 들어보신 분 계실까요?!
쏙쏙 들어오는 함수형 코딩 책 서문이랑 열페이지 정도 읽었는데 진짜 찐이네요… 너무 좋네요!!!
맞아요! 이 책으로 사내 스터디 한번 해보려고 생각중입니다. ㅎ
외부 강연도 기회가 된다면 한 번 부탁드립니다!!!
맞아요 ㅎㅎ 필참하겠습니다!!
강연까지는 잘 모르겠지만 방법은 찾아볼게요 ㅎ 보통 그런것들은 알려주는 것 보다 자료 준비하는 시간이 더 오래걸리는데 여러명한테 얘기를 하려면 퀄리티가 너무 또 낮으면 안되니까요. ㅎ
책 반응이 좋군요
A대 4-1(진)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 대학교 3학년님~~ 반갑습니디 :)
안녕하세요 ! 팬입니다 ㅎㅎㅎ
주니어도 안되는 대학생인데 오픈톡방에 잔류하고 있어도 괜찮나요 ?
아유~ 아무 상관없습니다 오히려 잘 모르니까 더 적극적으로 궁금한 것들을 물어봐 주세요 ;)
감사합니다 !
모르는 사람에게 설명을 해주는 게 제일 좋은 성장 방법이기에 부담 가지지 말고 win-win 이라고 생각하고 뭐든 편하게 적극적으로 글이나 반응 남겨주세요 ㅎ
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone 이런게 나온지 몰랏네용...
인사하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 인사하는 프로도님~ 반갑습니다 :)
함수형 프로그래밍하면서 clone부담스러웠는데 좋은 것 같아요!!
깊은 복사를 수행하는 함수가 내장 함수로 지원되는건다요? 된다면 이건 es2020 스펙인가요? 이건 불변성을 위한 함수겠네요?
헛 질문을 속사포로 해버렸네요 ㅎㅎ;
맞아요!! ㅎ
async-await를 어떻게 읽는게 맞나요 ? 개발자 한명은 에이싱크-어웨이트 라고 하고, 다른 개발자는 아싱크-어웨이트 라고 하는데 저도 사용하면서 정확한 명칭을 모르겠네요 ㅋㅋ
에이싱크-어웨이트!
에이싱크가 올바른데 대부분 어싱크라고 많이하네요 ㅜ
옛날사람들은 어싱크라고 배웠다고 하네요
이모티콘
제 아는 분이 그랬다고 말씀해주셨습니다
AJAX는 어떻게 읽으시나요 ㅎㅎ..
답변 주신 분들께 감사의 말씀 드립니다 !
이또한 논쟁이 있던데 ㅎㅎ
저는 에이잭스라고 읽습니다만
동료 개발자는 아쟉스라고 하더라고요 ㅎㅎ
https://docs.google.com/spreadsheets/d/17pLAxtVJBY3SMxPPe1AIfWh0kEu2zAgB4H5w_-LezUM/edit#gid=0 개발자 발음 모음집이에요 ㅎㅎ 재미로 봐주세요
저는 에이작스 ㅋㅋㅋ
에이잭스!
ㅋㅋㅋㅋㅋㅋ 발음모음집 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋ 재밌네요
아카이브 -> 아취브 ㅋㅋㅋㅋㅋ
디장고가 진짜 웃기네요
디장고 ㅋㅋㅋㅋ
전 아삽ㅋㅋㅋㅋ ASAP
아 ㅋㅋ
프리베이트 ㅋㅋㅋㅋㅋㅋ
약간 헷갈릴만한 포인트들이 많아서 좋네요
ㅋㅋㅋㅋㅋㅋㅋ
Django 이것도 디장고라고 읽더라고요 사람들이
샵검색 : #D는 묵음이야
ㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
사진
react hook form 쓰는데 혹시 위에 타입에러 어떻게 처리하는지 아시는분 계신가요 ㅠ
진님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
useWatch 에 FormType 을 주셔야합니다.
음..혹시 어떻게 쓰는건가요?;;
npm, yarn을 대체할 pnpm이라는 것이 있네요! 영상에 의하면 pnpm은 dependency들을 관리하는 node_modules의 directory 구조 등을 개선해 1. npm과 yarn의 security issue를 해결, 2. 속도가 현저히 빠르다 고 합니다. 앞으로 연구해보면 좋을 주제인 것 같습니다! https://www.youtube.com/watch?v=d1E31WPR70g&t=726
오 감사합니당!
감사합니다 ! p 붙은 친구들이 많아지네여
제로초님 생방보다가 꿀팁 얻었네요. 모바일에서 개발자도구 띄울 수 있네요 https://github.com/Tencent/vConsole
그러게요 ㅋㅋㅋ 왜 하필 p일까요
오 감사합니다 최근 모바일웹 개발에 힘들었었는데
저도 요즘 웹뷰개발하는데 답답했는데 다음주에 바로 적용해봐야겠어요
오…그렇군여 이제 확인했네요
답변 감사합니다!!!
지그님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
응애님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
진님~ 지그님~ㅇㅈㅎ님!!! 모두 모두 반갑습니다 :) 어서오세요 여기는 프론트엔드가 혹은 개발이 아니면 내 커리어가 궁금할때 같이 이야기하고 공유 하는 공간입니다~
이모티콘 안녕하세요 잘부탁드립니다~
잘부탁드려요!!
네 잘 부탁드립니다~ 뭐든 편하게 글 주세요 :) 제가 아는 것들은 다 답변 드릴게요 ㅎ
감사합니다!! ㅎ
안녕하세요 프론트엔드 신입 개발자입니다 회사에서 퍼블리싱팀, 기획자랑 커뮤니케이션 할 것만 생각하면 넘 스트레스받는데여ㅠㅠ 기획자가 기획서 없이 구두로 지라를 던져줘서 정확히 어떤업무인지 이해하는데에 시간소모가 있어요 그리고 퍼블리싱작업을 제가 요청하면 그게 꼭 필요하냐고 하며 작업요청하기 싫어하구요 이럴 경우 제가 퍼블리싱팀에 직접가서 작업요청을 해야하는게 맞나요..? 자꾸 명확하게 지라 안주는 기획자 탓만 하게되네요ㅠ 의사소통 그만하고싶어요ㅠㅠ
체계가 없는 상황에서 중간에 끼어있는채로 개발하기가 쉽지가 않죠 ㅠ
어디어디까지 협업 라인인가요? 디자이너는 존재하나요?
디자이너가 있긴 한데 디자이너랑 소통할 일은 없어요! 디자이너가 여러가지 디자인 만들어두면 간단한 css 조금씩 바꾸는 수준의 기획을 들고와요 근데 저는 스타일 시트 수정권한이 없어요. 퍼블리싱팀에서 스타일들 관리하구요 기획자가 원하는 간단한 css를 제가 수정하려면 내부 스타일시트 써야하는 상황 이어서 퍼블리싱팀에 작업요청이 필요한 상황이에요
그렇군요~ 그러면 기획이랑 퍼플리싱이랑 커뮤니케이션 미스가 나는 상황은 기획이 원하는것이 모호한데 내가 그걸 퍼블리싱에게 요구를 해야하는 상황이 발생해서 인가요?
맞아요!
그렇군요~ 기획도 퍼블리싱도 이 상황을 좋아하지는 않을텐데 각자의 불만은 뭐에요?
기획은 코드가 어떻게 되어있고 권한이 어떻게되어있고 이런걸 모르니까 그냥 너가 하면안돼? 이런입장이구 저는 퍼블리싱이랑 직접 의사소통 하기 싫으니까 기획한테 퍼블한테 작업요청해주명 안되냐고 하는 상황입니다,, ㅎ
퍼블은 바쁜게 싫은거같고 기획도 바쁜데 작업요청하기싫고 저도 바쁜 퍼블한테 가서 이거 하나만.. 부탁 해야하는 상황이 싫어요
이해했어요~ 커뮤니케이션 빈도는 어떤가요?
자주 합니다… ㅠ 기획도 자주 바뀌고 해서요 ㅎ
그렇군요. 그러면 3명이서 매일 같은 시간을 정해두고 15분~20분정도 소통을 하는 시간을 한번 마련해보자고 제안해보는 건 어떨까요?
저희 회사에서도 꽤 증명된 방법인데 당사자들이 정해진 시간에 모이는 짧은 회의가 있는 것은 커뮤니케이션 문제를 많이 해소해주더라구요
그리고 구글 시트나 피그잼 혹은 노션등 공통편집 도구를 이용해서 기록을 남기는 것을 추천드려봅니다
테오님
네~
아니요 기획은 개발과 협의가 끝난 건들을 티켓을 끊는게 맞는거 같고 프론트는 qa된 퍼블이 있어야만 진행이되니까 기획에서 디자인요청, 디자인에서 퍼블요청 퍼블에서 디자인qa요청, Fe개발 시작 같은 프로세스를 정해야할듯합니다 말로만 들어도 답답해보이는데 화이팅입니다
질문있는데요 혹시 프론트개발자에게있어서 c나혹은 cpp을 꼭배워야할필요성이있을까요?
메모리관리,..때문에질문드렸습니다
알면 좋지만 꼭... 은 아닌것 같아요. c의 메모리 관리 스킬이 JS에서 적용이 되는건 아니라서
이모티콘 프론트생태계가너무 빨리변화하는거같아서 앞으로는또 어떻게 바뀔지많이두렵네요
조언감사합니다ㅠㅠ
그래도 js 범위안에서 놀지 않나요 ?
맞습니다ㅎㅎ
제가js를잘못해서..
혹시 여러분들은 왜 프론트 선택하셨나요??
화면으로 디자인된거 구현할때 희열감이 압도적이라서요
면접질문이 아니라, 솔직하게 답하면 첫 시작은 상대적으로 서비스 회사 취업의 허들이 낮아서 시작한 점도 조금은 있었어요...! 주된 이유는 사용자랑 좀 더 맞닿아 있어서 사용자의 불편한 점을 직접 제 손으로 해결할 수 있다는 점이 매력적이었어요!! 개발자 되기 이전에 영업 일을 했는데, 뭔가 비효율적이거나 개선할만한 문제가 있어도 영업에서 뭔가를 직접 해결하긴 힘들었거든요ㅠㅠ
저는 눈에 보이는게 좋아서요
일단 첫번째로는 JS가 Java보다 맘에 들어서이구요~ 두번째로는 사업을 하다보니 사용자 요구사항은 거의 대부분 프론트에서 나오더라구요~ 그래서 요구사항 대응을 하다보니 자연스레 스킬이 올라가기도 했고 POC나 MVP 기타 초기 구상에도 주도권을 가지고 개발을 할 수 가 있다는 점에서 프론트엔드를 좋아해요 ㅎ
프론트엔드가 적극적으로 협업을 주도하지 않으면 그 부메랑이 고스란히 프론트한테 넘어와요~ 결국 파이프라인 맨 마지막에 있다보니 ㅠㅠ 그래서 프론트엔드에게는 코딩실력만큼이나 아니 그 이상으로 중요한게 협업이랑 일을 되게끔 만드는 능력이라고 생각해요~ 좋은 기회라고 생각하고 많은 것들을 주도해서 실험해보고 해결할 수 있는 기회로 삼았으면 좋겠습니다 :)
긍정적으로 생각하세요 ㅎ 지금도 jQuery와 DOM조작으로 웹 개발을 한다고 생각하면 끔찍하네요 ㅋㅋ 프로젝트를 진행하는 입장에서는 개발을 편하게 만들어주는 도구들이 많아지는 것은 즐거운 일인것 같아요 ㅋ
전화위복이군요 ㄷ
요건 최근에 진짜진짜 공감하고 있어요! 저희팀도 그래서 채용할때 이런 부분을 많이 보시려고 하더라구요.
다들 긴 답변 감사합니다!
짹🐦님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 짹님~ 반갑습니다 :)
안녕하세요!
프사가 굉장히 귀엽네요 ㅎ
태오님 프사도 쏘큩입니다🐦
감사합니다~ ㅎㅎ 여기는 프론트엔드 혹은 개발일을 하면서 다른 개발자들은 어떻게 하는지 궁금할때 서로 물어보고자 해서 만든 공간입니다~ 언제든 궁금한게 생기면 편하게 글 남겨주세요!! ㅎ
네 감사합니다!😀
인사하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 인사하는 프로도님~~ 반갑습니다 :)
안녕하세요 테오님 반갑습니다! ㅎㅎ 잘부탁드립니다~~
이거 요즘 특히 많이 느끼고 있는데 넘 좋은 말씀 같네용 👍
네~ 함께해주셔서 감사합니다. 여기는 프론트엔드나 개발 하면서 다른 개발자들에게 궁금한것들을 함께 물어보고 또 공유하는 곳입니다. ㅎ 언제든 궁금한게 생기면 글 남겨주세요. 답변 드리곘습니다. :)
넵넵 감사합니다! ㅎㅎ
저도 이부분에서 프론트엔드가 참매력적인것같아요 ㅎㅎ 요즘 서버리스 서비스도 좋은게 많이나와있어서 혼자 간단하게 사이드프로젝트하기에도 편한것같습니다. JS가 자유도가 높아서 관리하기 단점도 있지만, 또 한편으로는 생산성과 활용도가 높은 언어인것같아요ㅎㅎ
불 뿜는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 불뿜은 튜브님~~ 반갑습니다 :
:)
반갑습니다~~!
어떻게 여기에 오시게 되었나요? +_+
스터디를 함께하는 지인이 알려줘서 들어오게 되었습니다! 프론트엔드 관련 이것저것 재밌는 얘기나누고 싶어요 😇
그러시군요!! ㅎ 너무 환영합니다. 프론트엔드 이것저것 재밌는 이야기 나누는거 저 엄청 좋아합니다. ㅎ 지금 관심가는 것들 궁금한것들 얼마든지 편하게 글 남겨주세요. ㅎ
안녕하세요!! 스프린트 5기 참여와 새벽3시18분 타입스크립트 기초 스터디를 진행했던 파랑이에요! 제가 누군지는 중요하지 않지만 ㅎㅎ:japanese_goblin: 다름이 아니라 다음주 월요일부터 타입스크립트 객체 지향 스터디를 진행하려고 합니다! 이렇게 진행될 거에요 :) 1. 리더가 프로젝트 셋업과 템플릿을 모두 제공합니다. 1-1. 템플릿 주소는 https://fecrash.github.io/TypeScript-OOP/ 입니다! workflow도 가볍게 만들어 뒀어요! 2. 해당 템플릿은 "객체 지향 프로그래밍"을 고려하여 작성했습니다. 시간이 부족해 완성도가 떨어지는 CSS지만 양해해주세요…🥹 3. 객체에 대해 공부합니다. 추상화, 캡슐화, 상속에 대한 내용… 4. 타입스크립트를 잘 다루는 방법(이펙티브한 타입스크립트 사용)에 대해 공부합니다. 5. 리뷰, 회고, 강의식으로 세션이 주 1회 진행됩니다! 구성원들의 시간에 따라 세션일정은 바뀔 수 있어요. 가급적 세션을 참여하는 것을 권장합니다. 6. 따라오는 스터디분은 끝까지 같이 갑니다! 중간에 1회, 2회 결석이나 참여율이 저조하면 자연스럽게 묻힙니다… ㅎ.ㅎ 7. 이 과정을 다 읽으시고 괜찮다 느끼시면, goflvhxj2547@gmail.com으로 아래 내용을 기재해서 메일을 보내주세요! 규모가 커지면서 어느정도 필터가 필요하다고 생각이 되네요:innocent: - 경력 : 취준, 1년차~3년차~ 다양하게 적어주세요. - 참여하려는 이유 : 너무 간단하게 적지 말아주세요… - 블로그/깃헙 : 자신있는거루! 제가 직접 확인하려고 합니다. 스터디 시작 전까지 시간을 최대한 내서 저장소도 갱신할 겁니다. 금요일/토요일 중으로 참가자분들을 취합하여 브런치를 생성할거에요! 스터디에 대한 전반적인 내용 공유는 슬랙으로 진행합니다. 다들 좋은 밤 되세요!!
이모티콘
안녕하세요!님이 나갔습니다.
좋은 아침입니다. 이제 마스크 안 쓰고 출근하는 날이네용
근데 아직까지 마스크 벗은 사람은 한 명도 못봤네요 ㅋㅋ
이모티콘 전 벗고 나왔어요..
눈치싸움ㅋㅋ
대박...
사람들이 눈치 안 주나요 ?
이모티콘 어.. 눈치 안 줬던 것 같아요...
지하철에 있는 시간이 대부분이라 쓰고 있네요 ㅠ0ㅠ
저도 지하철 들어오자마자 헐레벌떡 썼어욥ㅠ0ㅠ
샵검색 : #대중교통 마스크
대중교통은 실내 취급이라네요
저도 버스에서만 썼어요
아리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
혹시 chakra ui 사용해보신분들 있을까요? 어떠셨는지 궁금해요!
그냥저냥 괜찮았습니당
안녕하세요 개발자 공부를 처음 시작하는데 인터넷 정보 검색하다가 오픈채팅을 알게되어 들어오게되었습니다. 잘 부탁드립니다.
어서오세요 손을 번쩍 든 무지님~~ 반갑습니다 :) ㅎ 여기는 궁금한게 있을때 같이 물어보고 성장하는 공간입니다. 언제든 편하게 글 남겨주세요 :)
ㅎㅎ 감사합니다. 비전공자이지만 프론트엔드쪽 html css 자바스크립트 강의를 먼저 알아보고 초입부분 수강 중인 상태인데요. 질문 1) 실례가 아니라면 다들 프론트엔드/백엔드 결정을 어떻게 하셨는지 여쭤봐도 될까요ㅠㅠ 질문2) 프론트엔드는 자바스크립트를 깊게 파는 과정이 국비교육에 많지 않아서 국비교육과정은 비추라고 들었는데 정말 그런건지.. 질문3) 혹시 추천하실 국비교육이 있으시면 추천 부탁드립니다.(현재 살고있는 지역은 인천입니다) 질문4) 만약 사설 부트캠프 추천이시면 바닐라코딩이나 위코드를 비싸도 고려하고 있는데 괜찮은 편인지..혹시 관련 정보 아시는분 계신가요? 저 두 곳 말고 추천해주실 곳 혹시 있으시면 추천 부탁드립니다.
일단 질문4 위코드 비추합니다 ~ 왜냐 ? 제가 나왔거든요 !
와! 정보 감사해요! 어떤 점이 별로이셨나요?
일단 멘토가 그냥 선배에요 ㅋㅋ 개발자가 아니고 보통 다 위코드 선배기수가 위코드 취업해서 거기서 멘토업무 합니다.
현업이고 뭐고 보통 경험 안 했어용
아.. 그런 경우 있다던데 위코드가 그렇군요ㅠㅠ
엄청 심해요
지금은 다른 부트캠프 수강하시나요? 아니면 독학하시나요?
예를 들어
20기다
그럼 18기가 알려준다고 보면 됩니다.
세상에낭..
그리고 모순적인 행동 심해요
위코드: 당신들은 풀스택이고 뭐고 하나에만 집중해라
몇달ㄷ 뒤
위코드 풀스택 코스 오세요 ~
으악ㅋㅋㅋ
1. 저는 일단 퍼블리셔 준비부터 했다가 한두달 더 해서 프론트로 입사하자 라고 해서 들어왔는데 재미있어서 계속 하고있습니다. 2. 접근성에 있어서 국비가 좋다고 생각해요. 무료라는 장점이 있어서 개발에 접근하기 좋은데 그만큼 무료라는 단점도 있습니다. 3. 저는 국비 잘 몰라서>.. 4. 저는 위코드 출신들이 그나마 다른곳보단 실력이 괜찮았다고 생각하는데
그건 아니었나보네요 취업에 성공하신분들만 봐서 그런건가..
그냥 잘할 사람은 잘하나보네요
면접들어가서 봤을때 일반화이겠지만
저는 2,3,4는 당사자가 아니라 답변을 못드리고 1에 대해 답을 드리자면.. 프론트엔드 개발을 선택한 이유는 단순하게 화면에 결과가 바로바로 나오는게 좋고, HTML CSS로 꾸미는게 재밌어서 였어용 ㅎㅎ 그래서 처음에 퍼블리싱으로 개발자라는 직업을 접했습니당 그리고 저는 자바스크립트가 더 재밌어서.. 이런 이유도 있는것 같아요~! 만약 둘중에 뭐가 더 잘맞는지 고민중이시라면 그냥 백엔드까지 포함된 풀스택 사이클을 한번 경험해보시면 알지 않을까 싶어요..저는 백엔드 개발 토이프로젝트로 몇번 해봤는데 프론트엔드 할때만큼 재밌진 않더라구요ㅠ
위코드랑 바닐라코딩? 거기 두쪽에서 성과물들이 대체로 좋았었어요
썰님~ 이렇게 하나하나 친절히 답변 주셔서 너무 감사드립니다! 네 2번 국비라서 좋고 국비라서 중도포기자도 많고 강사,동료분들 복불복이 좀 심하다 해서 걱정이에요
다른 곳은 몰라도 위코드는 가지마세요 ~~
공부는 길게 하는겁니다~~
공부는 길게하는거라는 의견에는 좀 반반입니다
헉 위코드 문제점이 많나보네요..예전에 한창 벨로그 트렌딩에서도 자주 봐서 괜찮은 곳인가 했는데 🤔
결국 개발자는 평생해야되는 공부라서
3개월도 안 되는 시간에 취업하면 가서 힘들어요
그건 맞죠
6개월하고 오셔도 힘들어하는건 마찬가지더라고요
근데 너무 ㅁ짧아요
응애 ?
바로 개발자...
그리고 위코드 오셔서 저희 회사 저 오기전까지 혼자서 서비스 담당하던
@디디 디디님~ 감사해요! 그럼 지금 html css 자바스크립트 강의 한두개 정도 떼고 그 후에 자바 강의도 조금 공부해보면서 정하려는 계획은 괜찮은걸까요? 이게 공부만이지 막 실제로 프로젝트를 만들어봐야 아는건지.. 사실 잘 모르겠어요ㅠㅠ
프론트 신입분도 있었어요
저도 혼자 프론트 서비스 담당합니다 ...
뭐 코드 의 질이라던가 이런건 둘째치고 신입이 혼자서 서비스 운용을 다 맡아서 하신거보면
그정도는 대단하다고 생각합니다
자바는 프론트엔드라고 보기 애매한 위치에요
이직할거에요님 큰 고민거리 하나를 제거해주셨습니다. 정말 감사해요ㅎㅎㅎ
저는 위코드 추천하긴합니다. 제가 면접관으로 들어가봤을때 대체로 위코드 출신들의 결과물들이 좋았었어요
백엔드에서 주로 쓰는 것 같아서 자바도 공부해보려한건데 백엔드 공부해보는 것으로도 자바만은 별로인가요?
제 생각에는 위코드 커리큘럼보다는 다른 곳 커리큘럼이 더 좋아보이기도 해요
그건 진짜 제 일반화이긴 하지만요
저는 다녀봐서 알아요
네 괜찮으실것 같아요! 근데 강의를 뭘 들으시는지 모르겠어서..너무 이론적인 내용말고 뭐라도 좋으니 실제로 프로젝트를 구현해보는 강의를 따라가보시는게 좋을것 같아요~ 저같은 경우에는 뭐든 실제로 프로젝트를 해봐야 실력이 느는게 느껴지더라구요! 당장 HTMLS CSS도 어색한 입문자 단계라면 백엔드를 공부하실때 JAVA로 스프링을 가는것보단 node.js로 백엔드를 구현하는 강의 (아마 인프런에서 john ahn?님이 이런류의 강의 하시는걸로 알아요! 무료도 있고)를 따라가시는거 추천드리고 싶네용ㅎㅎ
이직할거에요 님은 위코드 다니시다가 혼자 준비하셔서 취직하신건가요?
네네
수료하고
제 회사에도 위코드 출신들이 4명 있어서
맨날 이야기 듣습니다 ㅋㅋ
보통 2달은 공부 다시하고
취업합니다
그게
위코드가
반반인게
친위코드
반위코드
나뉘어요 ㅋㅋㅋㅋ ㅠ
제가 반위코드
저 같은 사람도 엄청 많아요
그렇다면 친위코드 이야기도 들어봐야되는거 아닐까요 ㅋㅋ
보이는거랑 다른부분이 많아서
반대사람도 많을텐데
그걸 썰님이
대신 해주시는 느낌입니다
계속 위코드 출신 잘한다고 하시는게 그런 느낌이요 !!
아아 저는 위코드 출신이 아니지만
면접관으로 봤을때 느낌인거라서요
오!ㅎㅎ 감사합니다! html css 자바스크립트 강의는 인프런이랑 네이버 부스트코스, 패스트캠퍼스 강의 보통 뭔가 만들어내는 수업 위주로 찾아뒀어요ㅎㅎ 알려주신 팁 고려해서 백엔드 공부때 참고할게요 감사합니다
안에서 직접 배운사람의 입장은 또 다르니까요
근데 취업잘되는 사람의 공통점은 학원이든 부트캠프이든 주어진거 겨우 따라가는 사람은 취업하기 힘든거 같아요
취업해도 회사에서 따라오기 힘들고
썰님 면접관으로도 계셨군요!ㅎㅎ 포트폴리오 같은 것 보신 분이 바닐라코딩이랑 위코드 괜찮다고 말씀해주시니 더 믿음이 가네용 :)
저도 붓캠했지만, 붓캠에서 기초부터 배운다는 생각보다는 거기에서 응용하고 협업한다고 생각하시는게 나을 것 같아요. 제가 공부할때도 그냥 처음부터 잘하는 사람은 잘하고 못하는 사람은 계속 못했어요
저는 초보자라면 비추천 드리는게 . . 일단 자바 자체가 뭔가 해야할것도 많고 자바스크립트로 프로그래밍 언어를 처음 접하시다가 자바를 접하시면 머리가 터지실수 있어요 ㅋㅋㅋㅋㅋㅋㅋ완전히 백엔드 개발자를 타실게 아니라면 배울게 많은 지금 시점에서 굳이 자바로 백엔드를 할 메리트가 있나?싶은 입장입니다! 차라리 좀더 익숙한 자바스크립트로 서버를 만드는게 여러모로 좋을것 같아요~
저도 동일한 생각입니다. 결국 사바사인듯…… 아무리 좋은 교육과정이 있어도 못하는 사람이 있고, 아무리 교육과정이 구려도 잘하는 사람이 있는 것같아서……. 특정 교육기관 출신이 다 잘한다 || 못한다 고 말하기는 조금 어려운 것같아요…
저도 어피치님 말씀에 동의하는게 잘해서 알려주는 사람이 끝날때까지 알려주다가 좋은데 취업하시는거 같더라고요
그래서 미리 공부하고 들어가셔서 알려주는 입장이 되시는걸 추천드립니다.
다들 정말 찐조언들 해주셔서 많이 도움이 되네요! 저도 기본 공부는 좀 쌓은 후에 부트캠프 들어가서 많이 도움주고 열심히 프로젝트 만들다 나오고 싶은 마음이었어서 더 힘이 납니당
화이팅입니다!!
시간이 넉넉하신거면 한번 우테코도 보고 오시면 좋을것 같아요!! 여기는 들어가기부터가 엄청나게 힘들지만..그만큼 가치가 있는곳 같달까용
자바랑 자바스크립트 하나만 골라서 공부하세요! 하나만 하기에도 너무너무 벅찹니다 ㅠ
삭제된 메시지입니다.
그럼 프론트엔드가 쪽 공부로 결과물 조금만든 후에 백엔드 공부도 탐내봐야겠네요. 제가 아무것도 모르니까 감히 이런 생각들도 한 것 같아요 감사합니다.
국비로 자바 스프링 과정 하고서 현재 잡부 2년차인데 아직도 현업이 넘 어렵고.. 전공자들 못따라가며 살고 있습니다 ㅎㅎ
넵! 자바스크립트 먼저 하고 그 후에 자바 조금 해보려고 했어요ㅎㅎ
저는 국비 추천해요
부캠은 넘 비싸요 ㅠ
흠 그럼 저는 독학도 추천합니다
굳이 학원 다닐필요는 없으니까요
저는 노드 백앤드 낙장불입 이지만, 백앤드 준비하실거라면 자바 백앤드가 좋다고 생각해요
국비 부트캠프 둘다 공부하고 현업나가기 절대적으로 시간이 부족한건 마찬가지 입니다.
전 국비는 개인적으로 비추천,, 비싸도 좋은 스승만나는게 좋은거같아요
노드 백앤드 쪽에서 뭐 하나 하려고하면 그냥 싹다 영어거나 과 스트레스 현상 자주 찾아와요,,,
근데 부캠이 비싸서 좋은점은 포기하지 않게 한다는점 자체는 좋습니다
음 먼저 기본기를 쌓고 국비 들어간다면 자기가 어느 정도일 때 국비 들어가는 것 기준 혹시 알려주실 수 있나요? (물론 주관적이고 정하기가 어렵긴 하지만요...ㅎ)
국비는 기초 쌓은분에게는 비추에요 저는
거기는 진짜 아예 모르겠다 하는분들에게 추천드리고
민석님 조언 감사해요 :)
맞아요
허들이 낮으니
전 자바 들어갈거면 자바 기초문법 한번 보고 들어가는게 좋다고 생각합니다.
포기하게하지는 않아요
좀 하시는분들은 독학이나 부캠이 좋다고 생각합니다
혼자 프론트 공부하고 국비 들어가시면 실망하시거나 진도 느려서 스트레스 받을 수도 있어요
거기에서 프로젝트 해보고
협업해보는 그런 경험이 너무 좋다고 생각해요
독학 + 프로젝트 팀원 구해서 하는거도 ㄱㅊ은 것 같아요
저는 진짜 독학이었어서
특정 사유로 국비 고르실거라면 그냥 바로 들어가서 안에서 개별적으로 공부하고, 나오고 나서 개인 공부하는게 좋을 수도 있을 거 같아요
프로젝트를 구할데도 없었어서
진짜 취업할때 많이 힘들었거든요
초반에 혼자 공부하면 머리박치기 너무 많이했는데, 그게 너무 아깝더라고요
이것두 너무 공감되네요,,,
부캠처럼 강제 프로젝트가 아니라
사람들 모아서 하면 끝까지 완성한 경우도 없습니다
아 그렇군요..
저는 Udemy 강좌 추천해요! 영어 강좌긴한데 싸고 친절하게 잘 알려줘서 입문하기 좋았어요!!
썰님은 독학으로 하실 때 공부 순서는 어떻게 하셨나요?
흠 저는 html css 웹접근성 웹표준 쪽 한다음에
퍼블리셔 할까 하다가
한두달 더 해보자 하고 자스하고 리액트 2달 정도 더 해서
취업했습니다
바닐라코딩은 개인적으로 추천드립니다
근데 독학은 진짜 불굴의 의지가 필요합니다. 독학 하시게 되면 패이스메이커 동료 몇명 두시고 하시는거 추천드립니다.
문제는 일단 들어가는게 어려워서 ㅎㅎ
네! 저도 찾아보니까 인프런, 패스트캠프, 네이버 부스트코스(부트캠프 말고 무료 학습 사이트), 유데미, 칸아카데미, 노마드코더, 생활코딩 등등 유튜버분 등 공부 할 수 있는 도구는 많더라구요!
바닐라코딩이 제일 저는 인상 깊긴합니다
거기는 진짜 혼자서 게임하나를 만들어오셨더라고요
위코드에서 프로젝트 결과물 잘 나오려면 팀원 운이 중요해요 혼자 캐리는 불가능하고요
웹소켓 이용해서
바닐라코딩ㅋㅋ스타터부터 공부하고 있긴합니다. 프렙이랑 부트캠프 과정이 다 있더라구요
거기가
아...ㅠㅠ
입학 시험 있지않나요?
네 맞아요
그래서 듣게된다면 8월이나 10월 준비과정 수업 듣고 12월에 부트캠프 듣게 될 것 같아요
근데 수강료만 준비수업이랑 본수업 해서 1500만원이라
1500... ㅠㅠ
제가 가진 돈 전부 털고 학원 다니면서 교통비, 밥값 다 하고나면 아마 모은돈이 0이 될 것 같아요..
가능은 하지만 엄청 신중해야하는 입장이라
국비도 일단 내일배움카드 신청은 해놨습니다.
1500만원…?
8월까지 저는 그럼 독학으로 해보시는걸 추천드려요
holaworld.io
그거 반의 반의 반만 주시면 제가 더 잘 가르칠 자신이 읍읍읍읍
여기서 프로젝트 구하셔도 되고요
다들 추천해주시면 들어갈 각오도 되어있는데 협업, 프로젝트 뽕 뽑고 나와야겠다 의지가 강해서ㅎㅎ 여기까지 물어보려고 들어왔어용..ㅎㅎ
날강도들이 정말 많네
ㅋㅋㅋㅋㅋㅋㅋㅋ
혹시 몇기 지원하실 예정이신가요?
와 저런 사이트도 있네요!
근데 바닐라 코딩은 진짜 좋아요
프론트앤드를 어떻게 1500이나 줘야하는거징
@Hola 님께서 만드신 사이트입니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
위코드도 800정도 했었네요
저 14기요!
맞아요 위코드가 800정도더라구요
코드스테이트가 처음에 무료지만
코드스테이츠도 그냥 내면 800정도인데 위윈 하면 최대 1500까지 되더라구요
나중에 내는거 계산하면 1200이라고 했나
다들 비싸요
와...
ㅠㅠ저 여기 들어온거 너무 행운 같아요 다들 감사합니다
바닐라코딩은 프렙을 안하고 개인적으로 공부해서 시험보고 들어가는 방법도 있습니다 ㅎㅎ
그러니깐 이제 보통 제가 아는 최고급 인강사이트가
아 진짜 너무 비싸네요 ㅠ 전 부캠 국비 인강 셋다 해본 입장에서 솔직히 부캠에서 가르치는모든게 다 인강에 잇긴해서... 부캠 한달하고 나왔는데 그떄 냈던 돈도 너무 아까웠었거든요
조금 더 싸게 다닐 수 있는 방법이죠 ㅎㅎ
20~30만원이거든요?
여기서 갑자기 궁금한게 생겼는데 혹시 코드스테이츠나 엘리스? 같은 곳에서 하는 국비 교욱도 차이가 좀 있나요? 하반기에 모집한다고 해서 한번 지원해보려고 하는데...
한 강좌당
그런거 4~5개들으면 진짜 프론트앤드로는 손색이없으니깐
진짜 많이 쳐봤자 100만원이에요
네 그런데 어느정도를 해야 들어가는지를 몰라서 저는 들어야하나 했는데... 럭키준님 혹시 바닐라코딩 시험 보셨다면 시험문제 유출은 안 되니까 대략 어느정도 수준하면 프렙 안 듣고 통과 가능한지 조언해주실 수 있나요?
멘토링 + 정확한 숙제 + 플젝 할 사람을 구해다줌 의 비용이 최소 500을 준다는건데
근데 켄님 성격상 프렙 안들은 살마은 정말 웬만하면 안받아 주십니다… 비싸긴 하지만 그냥 프렙을 추천하긴 해요 ㅎㅎ
이게 맞나 생각이 듭니다. 개인플젝을 해도 됩니다.
프랩 안듣고 통과하려면 8~9개월 정도는 정말 빡세게 독학하셔야하지 않을까 싶습니다.
material 이나 antd 를 사용하면 디자인도 그렇게 많이 신경 안써도 되니깐요
@김동현 오.. 차이가 많이 나긴 하네요!ㅠㅠ 인강사이트들은 혹시 어떤 것 추천하시나요?
대략 수준이 코어 자바스크립트 책을 이해하고 로대쉬 메소드를 그대로 만들 수 있는 수준이어야합니다
무료강의들 요새 많아요
진짜 비싼 인강사이트가 노마드코더 // 드림코딩 정도가 있는것 같고, 저는 코드잇도 좋았습니다.
무료강의도 넘쳐납니다
제로초님꺼 자스 강의도 무료인데 좋다고 하더라고요
럭키준님, 호잇님 감사해요.. 럭키준님이 적어주신 것은 일단 따로 메모도 해놓을게요!
600~1500을주고 프론트앤드를 배우는건
정말정말 말이 안되는것가탕요
제로초님 요즘 인간 JS 엔진 프로젝트하시던데 정말 재밌는거 같아요 ㅋㅋㅋ
근데 그거 주고 3000이상의 연봉을 보장받으면
이 사이트들은 슬랙채널도 운영중에 있기때문에, 모르는 게 있으면 여기에 물어보면 되요
또 생각해보면 미래르 생각해보면
나쁘지 않다는 의견도 있어요
그냥 프론트앤드를 할줄 알면 3000이상은 줄..걸요?
아
제대로 할줄 모르는사람한테 3000을 안주는거지
근데 개발 혼자서 공부해서 3000 가는 경우는
뭐 위코드 정도 하나 더 드리면
거의 없으니까요
제가 위코드 끝날때
평균연봉이
3300 이라고 들었어요
제가 직접 듣지는 않았지만 ,,,ㅎㅎ저는 무료인 존안님 강의 추천드려요 https://www.inflearn.com/users/@johnahn 일단 무료인게 좋은것 같아요!! 인강 비싼돈주고 샀는데 안맞으면 슬프잖아요 ㅠ ㅠ
위코드 수료생 평균 연봉이용
맞아요 말씀해주신 사이트들이랑 제로초님도 다 북마크랑 구독 해놨는데 정말 찾아보면 할 수 있는 것은 너무 많지만 너무 많아서 헤매게 되는게 힘들었어요ㅎㅎ 그래도 조언해주시는 분들 계시니까 사실 독학도 용기가 좀 생기네요!
레츠님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
학원측 자료인가요? 아니면 수료생들끼리 연봉공유인가요!?
그
ㅋㅋㅋㅋㅋ "부트캠프" 라는 용어는 다들 화내시는 버튼 인가봐요!!
음
취업하면
어디 했는지
연봉이랑 그런거 위코드에
알려주고 그러는데
근데 사실 근 1년간 연봉이 비상식적으로 변해서
그거 기준으로 만든거래영
백엔드 프론트 합쳐서영
그게 학원생들 평균인지라
최저 최고는 알 수 없습니다
근데 최근 개발자씬이 핫해지면서 교육 사이트가 엄청 늘어나고,, 가격이 사악한게 많아진것 같아요 막 랜선사수?사이트같은게 자꾸 광고에 떠서 보니까 가격 어마무시 하더라구용,,
근데 동기분들 서로서로 그냥 오픈합니다
레츠님~~ 어서오세요 :) 반갑습니다 :)
신입으로 4000넘게 받으시는ㄴ 분도 계셨어용
신입 6천도 존재하십니다 ㅎㅎ
뭐 연봉은 결국 실력기반이고 회사에서 그만큼 줄 수 잇음 주는거니가
프론트엔드/백엔드 결정은 다들 조금씩 공부해보신 뒤에 저절로 알게 되신건가요?
네네 제 기수는 다 스타텁 갔네요
전 제 후임이 저보다 실력 좋으면 더 받아도 인정..
와 신입 6천이면 얼마나 잘해야하는건지,,궁금하네요 ㅋㅋㅋㅋ
연봉을 많이받으면 그만큼의 퍼포먼스도 나와야하니까ㅠ
정말 다른 시대를 살고 있다는 생각이드네요...
네카라쿠배가 6000이상 주지 않나요 ??
그만큼 거긴 실력이
좋아야가죠..
스타트업 큰데는 그정도 준다고 들었어요
당근도 7000들었었어요
제주변에도 몇분 계신거같아요 신입 6천정도
저도 당근 그정도 들었어요
안녕하세요!
두나무도 그정도 될텐데
2년차에 1억 받는 분도 계시고
세탁특공대도 그렇다고 하더라고요
그런데 그정도 받는건 이미 신입이 아닌 수준입니다.
중고신입이고 이미 실무 경험 있으신 분들이죠
능력되면... 받아야죠
머 일단..
능력을 키웁시다
하 지금 경력 그냥 다 버리고 가고싶긴하네요 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
이모티콘 안녕하세요 :)! 출근 잘하셨나요!
자란다님 다른방에서도 뵌거같은데
반갑습니다 ㅋㅋ
자란다 !!
전 지금회사 맘에들어서 일단 1년더 존버
많이 들어봤어용
ㅋㅋㅋㅋ
저도!!
후임 들어와서
저는 닉값합니다
헤헤
같이 일하니까 재밋네쿄
후임은 어케 생각할지 모르겠지만
아! 질문 다른 거 하나 더 있는데용! 공부 꾸준히 하면서 싸피는 이미 모집일정이 너무 임박해서 불가능할 것 같고 아직 공고 안 난 네이버 부스트캠프 준비를 병행하면서 프론트엔드 공부를 하는게 나을까요? 아니면 그냥 프론트엔드 학습만으로 하루를 꽉꽉 채우는게 나을까요? 부스트캠프 준비하려면 자료구조 알고리즘 컴퓨터 구조 묻는 질문을 백준, 프로그래머스 통해서 공부해야한다고 들었습니다!
컴퓨터 구조면
프로세스 스레드 이런건가요?
제가 아무것도 몰라서 물어보셔도 잘 몰라요..ㅠㅠ 정보만 엄청 모아본 상태라..
죄송해요ㅠㅠㅠ
자료구조 db는 꾸준히 해두시면 좋고
컴구도 기본 개념정도 익히시는거 추천드려요
저는 정보처리기사 공부 한번 해보시는것도 추천드려요 이게 si 에 필요해서 따는거니 필용없다 그런애기도 많으느데
알고리즘도 결국 자료구조가 기반이라
솔직히 자료구조 db쪽은 프론트에서 엄청 도움된다고 생각은 안합니다
프론트엔드 공부하면서 어느정도 좀 익숙해졌다 하면 CS공부도 병행하는게 좋을것 같아욤 어쩄든 장기적으로 보면 있어야 좋은것들이라..나중에 현업뛰면서 공부하려면 넘 빡세서
전 정처기 공부하면서 cs 기초 많이 공부됐습ㄴ다.
전 db는 필요하다고 봐요
네트워크쪽은 도움 좀 되지만요
db요? 프론트에서 db만질일이 있나요??
와서 백엔드 분이랑 소통안되면 그것도 힘들어서
저도 자료구조 알고리즘 좀 애매하긴 하네요 알면 좋긴 한데 사실 같은 논리로는 세상 모든 지식은 알면 좋은 거라
아 그정도는 되어야하긴 합니다
그리고 좋은회사들은 결국 다 cs 기초질문 엄청 합니다 면접때...
좋은회사라고 하기엔 대기업들..
소통 할 정도는 익혀야합니다ㅜㅜ
맞아요 이거땜에서라도 ㅜ 공부하는게 좋을것같아요.....대기업이 목표시면..
대기업을 초반에 바로 가는거 아니면
솔직히 협업하려면 어느정도 기본은 알아야합니다
저는 어느정도 쿼리 알아야 한다고 생각해요
2222
흠 그런가요 저는 쿼리 1도 모르는 프론트라서..
디비 만질일이 있냐고 하실 수 있는데 얼마든지 생길 수 있더라고요
저 가끔 백엔드 만질때 있어서
오.. 그렇군요 결국 알아야할 것이라면 프론트엔드 공부 열심히 하고 조금 적응되면 얼른 같이 병행해야겠어요...
필요는 하다고 봐요
시간적 여유가 있고 탄탄한 개발자가 되고 싶으시다면 할만하지만 빠른 취업을 원하신다면 자구 알골은 비추요! db는 최소한 소통 가능할 정도는 되시는 거 추천해요
백앤드가 있는데 ㅁ백앤드 만질일이 생기면 그건 문제가 급하다고 생각하는 사람이라서..
파이버님 감사합니다 메모해놓을게요!
아뇨 기본적으로는 에러 디버깅할때도 필요하고요
에러디버깅은 백앤드에게 요청..
에러 디버깅 요청도
백엔드 팀원한테 부탁하기보다는 저는 스스로 보면서 파악하는걸 좋아해서요
이게 무슨 에러인지 알아야
정확합니다
더 빨리 파악되고 불필요한 핑퐁이 사라지더라구여
애초에 api에러로 내려주지 않나요
무슨 에러인지
디비에 저장되는 기록들도 있어요!
api 에러라도 프론트에서 잘못보낸건지
백엔드에서 어느 부분이 고장인지
저희 에러로깅을 안해서
일단
더 필요 없어보이긴 하네요
백앤드는 토이플젝 함서 하면서 배우는거 좋은거 같아요 넘 각잡고 공부하기엔 양이 방대합니다.
정확하게 요청하는게 저는 편하서리
제가 저번주에 로깅하자고
언급은 했지만
어떤회사 어떤 디비를 가지고 있는 회사 갈지 모르니까요~
사내 소통 방식이나 개발 업무량 등에 따라서도 다를 거 같긴 해요
편하다고 제가 막 만질수는 없는거니까요
저희 쪽은 개발팀이 가끔 전체적으로 설계 회의 들어갈 떄가 많아서
프론트 배포하는거 편하다고 막내부터 막 배포할수는 없는 노릇이니
아! 너무 기본적인거 자꾸 여쭤봐서 죄송스럽고 좀 창피한데 안 여쭤보고 지금 준비하는 이 시기에 놓치면 나중에 크게 후회할까봐 여쭤봐요! 문과 로그때부터 수포자였는데.. 프론트엔드에서도 잘 하는 사람이 되려면 수학도 공부 다시 시작해야하나요? 당장 프론트엔드 학습하고 취업 후에 해도 필요하다면 할 생각이라 의견 부탁드립니다. 혹시 필요할까봐 찾아놓은 자료는 아래와 같습니다! 대학기초수학 -지수함수 -로그함수 -집합론 살짝 -수의 체계 삼각함수 미적분학 (선형대수학 같이 추천 -선형대수학 전에 삼각함수 먼저 추천) 이산수학 (오래걸림) 선형대수학
저는 딱 토이프로젝트 하면서 주워듣는 수준이면 일단 충분하다고 보긴 해요
저도 이수준이면
디비공부 필요하다고 봅니다
무지님 혹시 코딩해보셨나요 ??
근데 정처기 수준까지는 아니라고 봅니다
감사해요!
우선 수학은
나중에 보셔도 될거같아요
수학 별로 안씁니다. ai ml 쪽은 엄청 쓰구요
삼각함수 미적분학 (선형대수학 같이 추천 -선형대수학 전에 삼각함수 먼저 추천) 이산수학 (오래걸림) 선형대수학 이건..프론트에서 쓸일이 있나요..?선형대수학은 머신러닝쪽에서 쓰이는걸로 아는데...
아니요ㅠㅠ 이제 시작하는 아무것도 모른느 상태입니다..
수학은 …. 안씁니다
도형쪽에서 삼각함수 많이써서
안쓰긴 하는데 애니메이션 하실거면 나중에
캔버스 사용할일 있으면
그러면 일단 먼저 코딩부터 해보시는건 어떠신가요 ??
그때 하셔도 될거 같아요
그리고 디비 정도는 조작할 줄 알아야 개발하면서도 좀 편한게 있고요 저 개인적으로는. 한번 sql 배워놓았더니 몽고나 다른 부분들도 파악하기 어렵지 않더라고요 저는 리드 온리 디비부터 파악했고요 지금은 간단한 운영 디비 정보까지 제가 만지고 있어요. 할 줄 아는 사람에게 기회가 온다고 ㅎㅎ 저는 영역나눠서 요청하는것보다 제가 알아가는 즐거움이 더 커서 웬만하면 파악하고 요청합니다..!
삼각함수 많이 알아야하긴 합니다
백문이 불여일타 입니다.
와~~~! 당장 급한 것은 아니라니 너무 다행이네요
아 삼각함수는 종종쓰는거 봤어요! !캔버스 쓰면 많이 쓰시더라구요
그정도는 나중에 하면서 해도 충분한거같아요
우선은 콘솔로그부터 찍어보시죠
굳이 처음부터 알아야 하는지는 의문입니다
선타후곰
html,css,자바스크립트 공부 진행하면 되는걸까요?!
근데 저는..무지님이 당장 프론트개발이 뭔지도 잘 모르시면 그냥 프로젝트 한번 하시면서 내가 부족한게 무너지를 찾아보는게 좋을것같아요
직접 해보면 지금당장 부족한게 뭔지 알수 있거든요..!
알겠습니다 다들 너무 감사드려요
저는 백엔드라 여기 프론트분들이 잘 대답해주실거에요~
걱정만 앞섰네요
일단 시작해보세요 ㅋㅋ
저도 우선은 코딩부터 해보시고 필요한 부분을 공부하시는게 맞는거 같아요
넹ㅎㅎㅎ
일단 vscode 까시고 튜토리얼 몇개 따라가시다 보면
에러는 항상 나옵니다 그 에러에 맞는 공부를 하시는게 더 도움될거에요
저는 처음부터 굳이한건 아니고 국비에서 배워서 알았던거고요. 알아보니 좋더라~ 는 제 입장을 말씀드린거에요! 🙂 도움이 되저라!
며칠 안으로 이길이 내길인지 아닌지 보이실거예요
지금 이렇게 커리큘럼 짜도 결국 본인이 칠요한 부분부터 시작하시는게 맞는거 같네요
알겠습니다! 다들 진짜 감사드려요
이게 코딩이라는게 이론부터 공부하는거보다 먼저 뚝딱뚝딱 거리시다보면 필요한게 뭔지 와닿으실거에요
다들 이렇게 진심이신ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 화이팅!!!! 😃😃
동감합니닼ㅋㅋㅋ
원래 디비 공부하다가 프앤 넘어와서 그런가..
컴포넌트 짤때도 고려하게 되는 부분도 늘어나고 생각 범위도 늘어난 부분도 있어서 좋긴 하더라구요
ㅋㅋㅋㅋㅋ정말 다들 진심으로 조언해주셔서 너무 행복한 오전이었어용 다들 힘찬 하루 되시길 바랍니당 공부하고 질문할 것 있으면 또 여쭤볼게용
근데 뭐든 각자 맞는 방식에 맞는 방법을 찾는게 가장 좋은거 같아요 ㅋㅋㅋㅋ
무지님도 화이팅!
화이팅입니다!!!!
확실히 요즘은 좀 다르긴 하네요
용태님떄랑 분위기 많이 바뀌었죠 ???
선택지가 많아졌다라고 해야할까요? 그만큼 돈 쓸일도 많아진것 같긴한데
네!!
ㅋㅋㅋ
ㅋㅋㅋㅋㅋ 저도 코딩을 어렸을때부터 했는데 진짜 많이 바뀐것같아요
그때 분위기랑...
요새는 유튜브만 봐도 취업이 가능한 시대라고
반 장난식으로 말씀들 하시더라고요
아예 거짓은 아니니
정보가 흘러넘쳐요
아까 위코드 이런거 보니까 또 가격이 어마어마 하길래
그 정보를 잘 정리했을뿐인데 1500이라니ㅠㅠ 흑흑
대신에 취업 허들도 높아진거같아요
스펙 인플레이션....
요새는 ts도 기본 스텍으로 들어가는 느낌이라
신입은 어디서 대용량 트래픽을 경험해야하는가…
근데 대용량 트래픽을 경험해볼수 있는 회사 너무 손에 꼽는거 같습니다..
저같은 경우도 b2b라서 사실 그런 귀한경험을 해볼 길이 없네요...
맞아요.. 연말에 크리스마스 트리 사이트를 만들어야하나…. ㅋㅋㅋ
서버비용은
누가내죠 ㅠ
저는 그런 경험만 할수있으면 낼의향있어요 ㅋㅋ
1000만원 아래면
구글 애드센스라도 달아서......
서버비용을 충당하는거죠....ㅋㅋㅋ
뜬금 없는 질문인데,, 구드 에드샌스를 걸면 사업자 등록을 하나요 보통?
ㅋㅌㅋㅌㅋ너무 헛소리에 가까운,,, 질문일까요
이 2개 영상 보시면 조금 도움 될 것같습니당 ㅎㅎ 저도 예전에 봤던 기억은 있는데, 세부적인 내용은 기억이 안나네요 ㅜㅜ
next에서 게시물 수정같은 페이지는 ssg로 getStaticProps, getStaticPaths로 처리하는게 효율적인가요?
개인적인 생각으로는 ssg보단 ssr 또는 csr로 처리하시는게 좋아보입니다. 게시물을 수정하려면 게시물 정보를 들고와야하는게 그걸 ssg로 처리해서 동기화하려면 매번 수정할때마다 해당 페이지를 재배포해야하지 않을까 생각이 드네요.
지그님이 나갔습니다.
이번에 인앱결제를 넣어야하는데 기존에 웹뷰와 네이티브가 혼합? 되어져 있는 프로젝트에서는 웹뷰로 상품 페이지를 만들고 네이티브에 메세지를 보내서 인앱 결제를 띄우는 경우가 많을 까요? 아니면 처음부터 상품 페이지까지 네이티브로 만드는 경우가 많은지 궁금합니다.
저는 전자로 했어요
인앱결제 이후에 응답만 서버로 전달해서 처리했었어요 (이때는 풀스택으로 작업했었어요, 프론트엔드랑 백엔드 분리되어 있다면 응답결과를 프론트로 보내서 액션 처리하면 어떨까 싶어요)
이런 경우에는 api 콜 후 상태 결과값을 웹뷰로 넘겨주고 거기에 맞게 에러메세지를 보여주든? 그렇게 해결하셨나요?
네네, 말씀해주신 두번째 방법은 시도조차 엄두를 내지 못했었습니다
뭐 다른 이슈가 있는걸까요?
react query에 대해 공부하고 있는데요! react query의 사용 목적에 대해서 redux의 경우 전역상태관리이지만, 비동기 요청에 대하여 saga나 thunk를 사용해야하므로, 비동기 요청을 redux에서 관리해주면 store 내부 코드가 복잡해져서, 비동기 요청을 react query를 통해 store의 역할을 분담해준다 생각하면 될까요?
react query 를 사용해서 통신하셔서 서버 쪽 데이터를 관리하시고 redux는 프론트 자체적인 스토어 개념으로 사용하시면 됩니다
관심사 분리 및 server state 관리 최적화 정도라고 생각했습니다
안녕하세요! 프론트앤드 취준생입니다.. 제가 모회사의 면접에 합격하여 출근을 고민중인데 회사에대한 의문이 조금 있는상황이라 혹시 이런 부분도 이야기를 나눌수 있을까요..?
어떤게 의문이신가요
답변 감사드립니다! 그러면, 답변 토대로 종합해보면 redux를 사용해 데이터를 전역적으로 관리하고, 비동기 요청은 미들웨어가 아닌 react query를 사용해서 분담한다고 이해하고있는데 올바르게 이해한게 맞을까요?
면접보러간 곳이 그회사가 아니라.. 다른 대기업의 건물중 한 사무실이었습니다 그리고 거기계신분들은 두분 제외하고 다 다른회사분이라고하시더라구요
오잉?
그리고 제가 다음주 출근가능이라고 말씀드렸는데 너무 늦다고 당장 실무에 투입하기를 원하시더라구요, 제가 판단했을땐 작업량이많아 너무 급해보이기도 하셔서...
타기업 건물에 세들어 사는건 충분히 있을 수 있는 일인데, 사무실에 다른 회사사람들이 있고, 그 두분만 같이 일하게될 사람이란 뜻인가요?
네..
인하우스 개발인가요? 아니면 외주업체인가요?
그점을 저도 잘 모르겠습니다...죄송합니다ㅜㅜㅜ 제가 알아보고 간 회사정보를 말씀드렸더니 회사의 기술력이너무좋아서 타기업에서 기술력을 구매해갔다고하셨고 본인들은 거기서 나와서 근무한다고했습니다 파견이라는 말은 꺼내질 않으셨습니다..
근데 뭔가 서두르는 곳은 진짜 급할수도 있지만 생각할 시간을 적게주기 위한 걸 수도 있어서 판단하기 애매하네요 정보도 제한적이라 판단하기도 좀 어렵다고 생각합니다 ㅠ
주니어님이 궁금하신게 정확히 무엇인가요?
타기업 건물에 상주하며 다른회사분들과 같은 사무실을 쓰면서 근무를 하는 경우가 있는지가 궁금합니다..
저는 IT 기업을 다녀보진 않아서 IT기업의 생리는 모르지만 대기업의 경우엔 있습니다.
si일때 파견가서 그렇게 하시는것들은 봤습니다
아 그렇군요.. 답변 감사합니다!!
a라는 업체에서 b기업에 파견시켜서 상주하면서 일하는 모양이네요
큰기업에서 si업체 여려군데 파견받아서 일하면
그런경우가 대부분이니까요
면접때 파견관련된 얘기를 아예 안해주셔서 의문이 들어서 여쭤봤습니다 에이전시나 si회사가 아닌곳은 어떤식으로 흘러가는지를 잘 몰라서요, 답변 주신 분들 감사합니다..
디자이너분들과 협업에 대해서 궁금한 점이 있어 여쭤봅니다! 이번에 UI 변경을 하면서 디자인 시안의 수치대로 하지 않은 부분들이 꽤 있었습니다. 그래도 딱히 문제없이 넘어가긴 했는데, 멘토분 말씀 들어보니까 디자이너분들이 개발자들 배려해서 눈으로 봤을 때 크게 벗어나지만 않는다면 그냥 넘어가는 경우가 많다고 하시더라구요. 그래서 다른 회사에서는 디자인에 대한 검증이 어떻게 이루어지는지, 디자인이라는 거 자체가 수치적 검증같은 게 가능한 건지 좀 궁금해서 여쭤봅니다!
그렇게 넘어가시는 분도 계시고, 피그마 기준으로 px단위로 검증해주는 분도 계십니다.
와우,,, 그것도 대단하시네요...
사람마다 다르지 않을까요 제가 업무했던 디자이너는 1px만 빗나가도 귀신같이 찾아서 고처달라고 합니다...
저희는 1px은 크게 신경안쓰는데 오히려 색감을 바로 찾아서
넹 저도 개인 성향인 것 같다고 생각했어요
이야기 해줘요
근데 px이 차이가 나면 왜 차이가 나나 찾아보면 보통 개발적인 이유가 있던 경우가 대부분이라 디자이너분께 설명을 충분히 해드리면 납득 후 ok 처리되는 편이예요
다들 감사합니다. 사실 신입으로 들어온지 얼마 안됐는데 제 작업에 대한 자신이 아직 없어서... 명확한 기준을 어디다 세워야 하나 좀 고민을 했던 거 같아요
물론 디자인 시안대로 하면 제일 베스트긴 하겠지만요
웬만하면 디자인 시안 상의 수치랑 크게 차이날 일은 거의 없었던거 같아요. 있다 하더라도 위에 말씀드린 것처럼 납득 가능한 수준이었구용
저는 어떻게든 디자인 시안대로 해주는게 맞다고 생각합니다. 특히 요새 같이 디자인 핸드오프툴이 잘 나오는 이상 수치를 그대로 적용시켜주는 것이 어렵지는 않은 것 같아요
다만 디자이너 결과물이 px인데 소수점 나오고 줏대없고 수치가 일관성이 없다면 다른 얘기긴 하죠. 그건 맞춰가야한다고 생각해요
저의 경우에도 디자인 시안에 어긋났던것도 수정요청이 와서 막상 고처보면 제가 귀찮아서 안했던거지 조금만 신경썼으면 다 디자인 그대로 할 수 있는게 대부분이었던거 같아요
저도 테오님 말에 한표! 디자인 해주신 것보다 이게 더 나을 것 같으면, 대안을 제시할 수는 있으나, 요청사항이 있는데, 그걸 다르게 해간건 안한게 아니라 못한거가 될테니. 근데 그 못한게 기술적으로나 구조적으로 너무 큰 공수가 들어가는거다. 그러면, 디자이너분께 말씀드려서, 이건 이렇게 우회해도 괜찮을까요? 라고 물어보면 좋을 것 같아요.
그리고 그렇게 해야 팀이나 장기적인 관점에서도 좋은게 디자인 필터링도 일종의 신뢰도 점수(?) 같은게 있어서 많이 틀어지는 개발자에게 디자인을 잘 안주고 싶어하고 또 계속 디자인이 검토를 하고 싶어져서 안 좋더라구요
그렇군여 하긴 사실 제가 제대로 완벽하게 시안대로 했으면 이런 생각도 안 들었을 거 같아요 기술적으로나 구조적인 이유가 대부분이긴 했지만 그래도 약간의 합리화를 하려고 했던 것 같습니당... 앞으로 더 노력해야겠네요
그래서, 기획&디자인&개발이 초기단계에서 커뮤니케이션이 중요한 것 같아요. 기획&디자인에서는 열심히 이렇게 하면 좋겠다 라고 짜놨는데, 그게 개발적으로는 불가능하거나 너무 힘든거이면, 다시 생각해야되는게 생기니
맞아요~ 결국 저는 기획&디자인&개발이 다같이 기획&디자인&개발을 하는게 답이라고 생각합니다. ㅎ
협업을 하다보면 효율이라는 명목하에 분업을 하게 되지만 눈에 보이지 않는 커뮤니케이션 비용을 따지고 보면 같이 하는게 맞다고 생각합니다. 다만 개발비용이 높다보니까 기획 - 디자인 - 개발까지는 함께 잘하다가 개발만 해야하는 시기 때 기획 디자인이 놀게(?) 되니 다른 일을 시키게 되는데 이 때 부터 처음의 함께는 사라지고 각자대로 일을 하기 시작하면서 그 문제가 다시 시작이 된다고 생각하고 있어요
그러면 어느샌가 기획-디자인끼리 만들어 놓은 결과물을 함께 고민해볼 시간없이 쳐내기에 급급한 개발자가 되게 되고...
테오님 궁금한게 생겼는데 여쭤봐도 될까요
네!
+_+
User Flow 상 불가능한
부분에 대해서도 error handling 을 하시나요?
예를 들어서
휴대전화 번호가 반드시 있어야 어떤 서비스를 신청할 수 있다고 할때
휴대전화번호가 없는 경우를 handling 하나요?
서비스를 진행하는 동안에
저는 안했는데, 회사 입사하고 나서 이런 경우를 handling 을 미리해야할 필요성(?) 에 대해서 조금씩 느끼고 있어서.. 이게 기획의 문제인거지 아니면 프론트앤드가 처리해야할 업무인데 간과한건지 궁금합니다.
저야 프론트엔드니까 기획이랑 디자인이 없는 에러 핸들링은 굳이 잘 안 만들기는 합니다. 대신 그냥 에러를 퉁쳐서 다 센트리로 보내기는 하고 있어요
센트리로 보낸다? 라는게 어떤건가요
에러로그를 전달하는 로깅 툴이 있어요
결론부터 말씀드리면 기획이 없는데 굳이 먼저 하지는 않아요. 그렇지만 알 수는 있어야 하니까 퉁칠 수 있는 에러페이지나 문구 혹은 로그를 그냥 일임해서 보내버립니다.
아하! 알겠습니다 감사합니다.
가령 "알수 없는 오류가 발생했습니다." 토스트 라던가
alert("이 문제를 발견해주셔서 감사합니다! 높은 확률로 어려운 버그를 재현해주셨네요! 이 메시지를 보신분은 teo.yu로 제보해주시면 커피를 한잔 사드리곘습니다.") 라던가...
재현하기 어려운&
아 이해했습니다! 감사합니다!
디자인 이야기가 살짝 지나갔지만 저도 테오말에 완전 동의해요. 디자이너가 한땀한땀 고심해서 만든 창작물을 웬만해서 그대로 만들어주는게 예의라고 생각하는게 있어요.. 정말 기술적으로 좀 틀어질 수 밖에(?) 없다하면 작업하면서 소통하는 편이고요. 똑같은 얘기 반복이라 괜히 쓰는거 같지만 요즘 사내에서 심심찮게 나오는 이야기인거 같아서 생각을 꺼내보았습니다. 아 이거 기능만 하면되는데 크게 문제 없잖아~ 하고 넘어가려고 하는 분들도 많더라고요.. 특히 서버개발 위주로 하시는 분들이 프론트 어쩌다 잡으시면..ㅋㅋㅋㅋㅋ 그 후속조치는 두고두고 묵혀졌다가 프론트 신입이 다 하더라고요..ㅋㅋㅋ 그만큼 디자이너들도 그 부분이 볼때마다 아쉬웠다는거겠죠.
공감 많이 되네요 ㅎ
안녕하세요! 아이폰 모바일 웹 환경에서 화면 왼쪽 끝에서 오른쪽으로 쓸어넘기면 뒤로가기가 되잖아요!? 혹시 그 뒤로가기가 발생했다는 것을 캐치하는 방법이 있을까요? 안드로이드 뒤로가기 버튼이나 브라우저 뒤로가기 버튼은 window.onpopstate 이벤트를 사용하곤 했었는데 갑자기 아이폰에서 뒤로가기가 생각나서 질문드립니다...!!
안녕하세요
window.print() 했을때
전체가 프린트되지않고
첫페이지만 나옵니다 ㅠ
네 아이폰에서도 onpopstate 이벤트를 쓰시면 됩니다~
print 명령을 해도 word 프린트와 달리 현재 보여지는 HTML만 출력이 되는거라 자세하게 알고 싶은데 확인 가능한 URL등이 있나요?
안녕하세요, 객체의 프로퍼티 관련 질문 있습니다! 혹시 객체를 console.log( ) 로 찍어봤을 때 다른 프로퍼티들과 달리 연보라색으로 나오는 부분은 어떤 차이가 있나요? 해당 부분을 setState를 통해서 업데이트하고 싶은데, 복사가 되지 않거나 업데이트가 되지 않는 것 같습니다. 구글링을 해보려는데 너무 막연해서 질문드립니다
사진
participants 프로퍼티를 setState로 하여금 업데이트하고 싶은 상황입니다!
네 답변 감사합니다!! ^^
손을 번쩍 든 무지님이 나갔습니다.
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세여 신난 어피치님~~ 반갑습니다 :)
안녕하세요 테오님:)
네~ 어서오세요! 여기는 프론트엔드나 개발에 궁금한 내용들을 함께 이야기 나누고 또 성장하고자 하는 공간입니다 ㅎ 뭐든 편하게 글 남겨주세요
이모티콘 넵 감사합니다
연한 이름으로 표시되어 있는 프로퍼티는 비 열거형이어서 순회에 포함되지 않아요~ 그래서 스프레드 연산자등을 통해 복사하려고 하면 포함되지 않습니다! https://stackoverflow.com/questions/36535221/what-do-the-colors-mean-in-chrome-developer-tools-scope-panel
Enumerable에 관해 참고하실만한 블로그, 스택오버플로 글 링크 공유드립니다~
그렇군요!! SDK를 쓰다보니, 넘겨받는 데이터 구조에 대해서 처음 접하는 부분이 있었는데, 구글링을 뭐라고 해야 할지 조차 감이 잡히지 않았습니다 ㅜㅜ 참조하고자 하는 비 열거형 데이터가 배열 구조로 되어 있어서, 문제가 없을줄 알았는데 다른 방법을 찾아봐야 겠네요 감사합니다!!
react-router-dom v6 질문이 있습니다 ㅠㅠ Route를 설정한 후에 Link로 이동하거나 직접 주소창에 url을 입력해도 컴포넌트가 바뀌지 않습니다.. 혹시 이러한 상황 해결해보신 분 있으신가요?!
사진
패스 위치를 바꿔보시겠어용??
아니면 exact를 붙히셔두되구!
v6라 exact는 못쓰지 않나요?!
그런가욥…? 거기까지는 잘 몰랐습니다 ㅠ
'/' 이게 다른 라우트 까지 잡아서 막히는게 아닌가요?
그부분도 v6 가면서 바뀌었나용..?
그런가 싶어서 아예 /에 MockInfo로 바꿨는데도
Home이 그대로 나오는거보니 뭔가 어디서 꼬인것같네요.. ㅠ
단무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
츄리닝안경 네오님이 나갔습니다.
혹시 바닐라JS 에서 "foo" 라는 class 명을 여러개의 객체가 들고있을 떄 classList.add('bar')를 하면 하나의 객체에만 addClass가 되는데, 제이쿼리 $('.foo').addClass('bar') 처럼 모든 객체에 다 addClass는 어떻게 할 수 있을까요 ?
코드를 보여주시면 더 편할거같아요
yeu.kr이라던가 codepen.io
이런데 코드 올려서 보여주시면 다른분들이 더 보기 편할거같습니다
Array.from(document.querySelectAll(".foo")).forEach(el => el.classList.add("bar")))
와...
감사합니다 ..
제가 서치 능력이 부족했네요
저도 방금 찾아봤는데
감사드립니다 꾸벅 :)\
ㅋㅋㅋㅋ태오 완전 정확,,,
👍🏻👍🏻👍🏻👍🏻
완전 정확합니다 ㅎㅎ
자매품 [...document.querySelectAll] 도 있습니다!
쿼리셀렉터 올은 그냥 foreach있지 않나요
노드리스트 타입이라 기본 프로토타입으로 있는걸로 알고있어서 배열로 바꿀 필요 없지 않나요
getElementby 이것들이 HTMLCollection 타입이라 foreach없어서 그렇게 쓰는걸로 알고있어요
크롬은 되는데 IE나 사파리는 에러가 났던걸로 기억을 해서 그냥 습관적으로 썼어요 ㅎ 노드리스트 타입에 forEach가 들어왔군요
좋은 정보 감사합니다 ㅎ
저도 안지 얼마 안되었지만 getelementby로 찾을때랑 querySelector로 찾을때랑 타입이 다르더라고요
ㅋㅋㅋㅋ
회사 과제 전형에서 api 서버 구현을 하지 않고 서버에 데이터를 요청해 받아오는 가장의 메소드를 만들어 사용하라고 나와있는데 서버가 없는데 가상의 메소드를 만들어서 사용까지가 가능한가요..?
갠톡주시면 제가 예전에 했던거 하나드릴게요
이게 맞는지는 모르겠는데..
전체적으로 공개하긴 그렇고..
앗 넵!!
아 ts로 되어있어서 수정하실부분 수정하셔야할거에요
혹시 갠톡을 어떻게 보내나요??
이제 될거에요 ㅋㅋ
저 터치하시고
가상 메소드 라고 하시면 더미 데이터랑 promise 로 해서 만드는건가요..?
네 그렇게 만들었던 코드 예제 드렸어요
public에 json ??
오호.. 신기하군요.. 과제전형은 api 서버랑 같이주실줄 알았는데..
msw 쓰면 api 서버 구현한 건 아니니까 괜찮지 않을까요?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
msw 는 백엔드 데이터 나오기 전에 api mocking 하려고 사용하시는건가용??
json 파일 만들어두고, json-server 같은걸로 띄우셔도 되요 간단히
넵넵 보통 그런거같아요 저도 제대로 쓰고 있진 않은데
이것도 좋은 방법인 것 같네요 감사합니다!
모킹 레벨을 최대한 프론트에서 멀리 보내서 나중에 백엔드랑 연결할 때 프론트 로직 수정을 최대한 적게 할 수 있도록
음.. 그러면 API 명세가 나와서 mocking 하고 작업하다가 API 가 크게 변경되었던 경험이 있으신가요??
음 그런거보단
아무튼 모킹하고 작업하다가 모킹을 제거하면 모킹을 제거하는 커밋을 해야 될텐데
그걸 최대한 작게 할 수 있도록 하려는 거 같아요
그래서 최대한 진짜 백엔드가 이미 구현되었다고 생각하고 개발할 수 있도록?
요거 좋은방법인것 같아요!!
과제전형에서도 git flow로 develop 브랜치에서 기능별로 브랜치를 만들어서 작업하는게 좋을까요?
저도 MSW로 주로 했습니당
이것도 그렇게 했습니당 merge하고 merge 하고
오 넵 감사합니다!
혹시 바닐라 자바스크립트를 많이 사용하고 계신 분들도 계실까요? ai 팀 한곳에서 면접 볼 일이 생길 것 같은데 가면 아마 사내 데이터 학습 플랫폼 개발을 진행할 것 같습니다. 근데 얘기를 들어보니 바닐라 자바스크립트를 많이 쓰고 있다고 해서 조금 걱정이 되어서 여쭤봅니다. 어리석은 질문일수도 있겠지만 굳이 프레임워크를 쓰지 않아도 성장에 문제가 없으려나요?,,
프레임워크도 결국 자바스크립트입니다
오히려 바닐라를 쓰는게 더 성장에 좋을거같아요
오 그런가요! 회사 자체는 너무 좋아하는 회사라 고민중이었거든요 ㅜㅜ
저는 오히려 너무 좋을 것 같아요! JS 기초를 탄탄히 쌓을 수 있는 기회라고 생각해요.
좋아하는 회사라면 고민할 필요가 없죠~ 축하드려요^^
취업 시장에서는 리액트 같은 프레임워크 능숙한 사람을 선호하니 불안한 마음이 이해는 갑니다! 이직할 때 어떡하나 이런생각도 들것이고 시장과 동떨어진걸 하게 되는건 아니려나 하는 불안감도 있으실거 같고... JS가 기초니까 회사에서는 기본기 탄탄히 하고 사이드 프로젝트로 시장 흐름도 따라가면 되지 라는 마인드만 있으시다면 좋을거 같아요~!
전 일을 할수록 바닐라에 대한 감이 없어져서…… 오히려 바닐라를 몰라서 걱정입니다 ㅜㅋㅋㅋ 프레임워크가 없다면……아찔해요….
저도 요새 그렇게 되어가고 있는듯해요.. 리액트 없이 간단한거 만들라고 했는데
멍청이가 된기분이더라고요
회사가 어려워지면 아마 오픈소스 개발자들이 제일 위협받지않을까? 하는 생각에 ㅋㅋㅋ 메타의 주가는 떨어지면 안됩니다….. 우리 리액트 개발자들 계속 버전업 해야합니다!
Hanelle님이 나갔습니다.
혹시 간단한 자바스크립트 문제인데….
사진
사진
저안에 네모박스를 밑줄처럼하면 안되는 이유가 있을까용???
전자는 이벤트 리스터의 2번째 인자로 콜백함수를 넘겨준거고 후자는 2번째 인자에 갑자기 함수를 실행시킨거에요
아하 근데 결국 둘다 실행돼야 되는것 아닌가요 ??? 후자는 실행이 안됩니다
네모는 계란을 준 거고 밑줄은 병아리를 준 겁니다. 이 계란이란 건 이벤트가 들어왔을 때 어떤 조건에 맞으면 부화되는 계란인데요, 밑줄대로 만들면 냅다 병아리가 날아올라서 조건이 충족되어도 부화시킬 계란이 없는 거죠.
이해가 되었습니다
감사합니다!!!!
사진
저도 도촥!
함수형 코딩 책 내용이 좋은가봐요~ 저는 스프린트 7기 결과물에서 추천해준 리팩토링보고 있는데 어여 보고 봐야겠네요
저는 테오님 후기 기다리고 있습니다 ㅎㅎ
저도.. 저 책샀어요..ㅎㅎㅎ 물론 아직 추천사..만 읽었습니다 @.@
혹시 nuxt SSR 사용중인데 일부 파일에서만 client 에서 렌더되도록 할 수 있을까요?
프론트엔드 취준생입니다. 요즘 프론트엔드 공부를 하면서 예전에 햇던것들도 너무 잘 잊어버리고 문서를 봐도봐도 이해가 안갈때가 많고, 앞으로 해야할 것들이 너무 많은데 이걸 내가 할수 있을까란 생각이들면서 정신적으로 피로감을 많이 느끼는것 같아요. 혹시 이런 경험있으신분들은 어떻게 극복하셨는지 여쭤봐도 될까요?
넵 client-only 태그를 사용하시면 됩니다.
우와 알려주셔서 감사합니다!
너무 넓은 분야를 한번에 가져가려고 하셔서 그런게 아닐까 싶네요. 개발 취업에 필수적인 요소 몇개를 제외하곤 자신의 강점 분야에 집중해서 깊이 파고들어보면, 강점인 만큼 재미도 있읉니 슬럼프를 탈출하는데 도움이 되지않을까요?
스스로 개인 블로그나, 개인 노트에 정리해나가시면서 하시면, 안그럴 때 대비 이해도 잘 가고, 나중에 까먹어도 다시 떠올리는게 수월합니다! 그리고 그냥 이론적으로 배우는 것에서 그치지 말고, 뭔가를 만들어보시는게 FE는 특히 중요한 것 같아요. 처음에 정말 많은 시간을 쏟아부어도, 실력이라거나 그런게 쌓인다는 느낌이 바로 오지 않아서 지치는 경우가 있고, 여기에서 포기하거나 안주하시는 분도 많은데, 정말 꾸준히 계속하면 퀀텀점프하는 때가 언젠가 옵니다! 모든걸 다 잘하려고 하지 말고, 단기적으로 계획을 잡고 이번달은, 이번주는 뭘 끝내봐야지 식으로 여러 주제를 깨뜨리다보면 그렇게 쌓인 지식이 언젠가 빛을 발하게 될거고, 그 때가 퀀텀점프하는 때일거에요!
@선풍기 @프론돌이 좋은말씀 감사합니다. 글 보면서 생각을 해보니, 모르는 건 너무 많고 남들은 다 알고있다고 생각하니 못 따라가고 있는 것 같아서 조바심을 너무 넀던거 같아요. 순간 페이스 조절에 실패했네요 ㅎㅎ제가 조금 더 잘할 수 있는 분야에 집중해서 쌓아 올려보겠습니다. 좋은 말씀 다시한번 감사드립니다. 👍
과제전형에서 채팅앱을 api 서버없이 하려면 일반적인 웹소켓을 사용하는게 아니라 rest api와 같은 목 데이터로 그냥 데이터 생성 삭제 등으로 구현하는게 맞을까요...?
너겟님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
프엔공부중님 저랑같은 전형을 보시는거같군요
이모티콘 오늘도 괜찮은 하루였길 바라겠습니다! 퇴근 잘하셔요!
선배님들 혹시 비동기로 데이터 가져와서 그거로 렌더링할때
렌더하면서 데이터 가져오시나요? 아니면 다 가져온 이후에 렌더하시나요?
저도 이거 하는데 안할까 고민중 입니다…
공채 인가봐요?!
아 그런가요? 이게 뭔가 저는 아침부터 읽어봐도 감이 안잡히더라구요 .. ㅠ api 서버 없다는 조건이 ㅠ
ㅋㅋㅋㅋㅋㅋ저도 저의 부족함을 많이 느끼고 있습니다..
월요일 12시까진가요..?ㅎㅎ
엇 저는 월요일 17시까지로 나와있네요 다른건가보네요?
ㅋㅅ아닌가요?
ㅋㅋㅋㅋ
저도 이거에요 ㅋㅋㅋㅋ
채용 전환영 인턴이요!
저도 입니다 ㅋㅋㅋ
오 제출시간이 다르군요
과제 요구사항이 다른 했던 과제들에 비해서 좀 두루뭉실 해서 고민되더라고요... 수습 6개월도 좀 걸리고
신기하네요
저도 17시 입니다
엥..
저만 12시군요?
엥 왜 다를까요? ㅋㅋㅋ
사진
ㅋㅋ..
이렇습니다..
엥
메일이 살짝 일찍 오신거 같은데 ㅋㅋㅋㅋ
저는 5/9로 나와있네요
10이면
엥
화요일인데?
아 저도 5/9에요
??뭐죠
오타인가요?
ㅋㅋㅋㅋㅋㅋ
아 물어봐야겠네요 감사합니다
큰일날뻔
한 번 문의해보심이 좋을것 같아요
넵
저는 과제전형이 처음인데 원래 이렇게 두루뭉실한가요..?
알아서 확장하라는 느낌의 과젠거같아요 흠
아뇨 기본적으로 api 제공해주고 좀 정확하게 명세 주는 곳이 대부분이였어요 저는
음.. 민석님 말씀처럼
자유도를 좀 준거일까요
전 대부분 이런 과제만 해봐서
화이팅..
앗 그렇군요..
모두 화이팅입니다!
안녕하세요, 벨로그 보고 들어와봤는데 선배님들이 많으시네요!!
이전 대화를 살짝 읽어봤는데.. 부트캠프 하신분들 꽤 계시는거같은데 혹시 스파르타 항해99 해보신 분도 계시나요??
안녕하세요 너겟님~ 어서오세요~~ ㅎ
혹시 eslint 설정중에 arrow function으로 컴포넌트를 작성하면 함수 선언문(function)으로 바뀌는 설정이 어떤건지 아시는 분 있으신가요?
테오님 벨로그 글 너무 멋지고 좋고...... 트룰리 제 롤모델이십니다...😭
우선 자답을 하자면 eslint랑 eslint 플러그인들 버전을 예전으로 낮췄더니 해결했네요..
아!! 감사합니다 :) 열심히 할게요!!
벙찐 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 벙찐 튜브님~~ 반갑습니다 :)
ts 에러 한글 번역 플러그인 https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator
오 한글도 있는건가요?
오와 이번에 디스코드 들어가 봤는데
너무 좋네요 ㅎㅎ 예전에 봐야지 하고 안 보고 적어만 뒀던 컨텐츠들 다 올려져 있고 ㅋㅋㅋ
감사합니다~ 다른분들도 오픈 채팅에서 다시 봐야지 했던것들 있으면 언제든 본인 메모장처럼 사용해주세요 ㅋ
사수가없어요님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
이모티콘
이모티콘 출근길 조심하시고 적게 일했는데, 큰 성과 나오는 그런 하루 되세요 :)!
안녕하세요 사수가 없어요님~ 반갑습니다 :)
감사합니다!! +_+
테오님블로그보고왔습니다
일하면서 도움마니되요
감사합니다!! 고맙습니다. ㅎ
사수가없어서 ㅠㅠ
항상감사드랴요~~
언제든 궁금한거 있으면 물어보세요. 사수가 있어도 결국 자기가 찾고 하겠다는 의지가 없으면 무용지물이기도 하고
저도 사수없이 쭉 컸는데... 음... 아쉽긴해도 결국은 자기 철학을 세우는게 중요한거 같아요
저도 태오님 깃허브 확인하고
이모티콘
블로그까지 본...
너무 멋지시던걸요ㅕ
테오님은 항상 멋있죠 ㅎㅎ
감사합니다 +_+ 하하;;
감사한 존재입니다 ㅎㅎ
심지어 깃허브에 프론트 시니어 검색하면 태오님이 가장 위에 노출됩니닼ㅋㅋ
많이 배우고 느끼고있는 사람 중 한 명
저 혹시...
와~ 대단합니다~ 깃헙에서 1위 노출이라니..
이방에 계신분들중..
?? 설마요. 키워드 떄문이겠죠. ㅎ
프론트 개발자분 추천해주실분 계실까요...?
현재 주니어3 미들급 1명으로 구성되어 있는데
시니어 프론트 개발자를 구하시는 건가요 ㅎㅎ
미들과 시니어 연차를 가지신 프론트 엔지니어 분들을 꼭 채용 해야만..이후 신입분들도 또 채용 할 수 있어서요.
저희 회사 시리즈 310 억 B받고 이번에 공격적으로 채용 하려고 하는데
프론트 엔지니어 개발자 미들 ~ 시니어 분들을 모시기가 어려워 여쭤보게 되었습니다! (게다가 이번주 금요일 전사 휴가도 뙇! 주실만큼 좋은 회사입니다..)
시니어가 아니라서 아쉽네요 ㅎㅎ
ㅠㅠ..저도 아쉽습니다..
jd는 어디서 확인하나요!?
주니어분들 모시고 싶어도
미들이나 시니어 분들이 많이 모여있지 않으면 그분들이주니어 분들오셔서 힘드실테니까요 ㅠㅠ
요기서 확인 가능하셔요!
비즈니스만 유아동 시장이지
플랫폼 서비스이고요. 지금 쿠팡, 라인 에서 10년차 이상 분들이 오셔서 프러덕트를 만들고 있습니다!
확인해보고 궁금한 사항 따로 여쭤봐도 될까요?
네!
언제든지 편하게 말씀 주세요
제가
음..
이거 링크 클릭하시면 저랑 1:1 오픈 카카오톡 링크 확인되세요!
회사에서 확인하지 마세욬ㅋㅋㅋㅋ
저희 대표님 외부 평가 저희 시장성 등등에 대한 이야기가 나와 있습니다! :)
넵넵 감사합니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
지금 CTO 분이 아마존 + 라인에서 오랜 기간동안 계셨던 분이 저희쪽으로 올초에 합류해주셨는데,
건강하고 좋은 개발문화와 면접 경험을 만들기 위해서
저랑 정말 이야기 많이 하며 시스템구축중에 있습니다 :)
저를.. 채용해주세요.. ; )
ㅋㅋㅋㅋㅋ
정말 개발자 분들이 좋아할만한 회사가 되기 위해 내부적으로 많은 노력중에 있습니다.. 꼭 추천부탁드려요..
미들 시니어 분들이 오시면 바로 신입도 열겠씁니다!
지금 상태에서 Frontend 주니어 분들 오시면 아마 더 혼란 스러우실거라는게 저와 CTO님의 생각이긴합니다 ㅠㅠ
자란다가 생각하는 미들의 요구조건이나 시니어의 요구조건은 어떤건가요?
우선 연차로만 말씀드릴게요!
미들로 정의하고 있는 연차는 퍼블리셔 경력을 제외한
온전히 개발에 대한 경력이고요
4~7년 미들 7~10년 시니어 로
이번에 설정했씁니다.
채용을 진행함에 있어서 우선 기준설정이 필요해서 위처럼 지정했습니다.
4년이라..간당간당한데..
angaulr를 쓰고 있네요~ 주로 즉시 전력을 원하시는건가요?
그러면 너무 좋죠
지금 저희 앱이
초기 단계로 머물러 있다보니
미들 ~ 시니어 분들이 오셔서 바로 힘을 실어주실 분들을 찾고 있어요.
개발 문화도 정착을 시켜야하기 때문에 경험이 있으시면 더욱 좋고요
제가 잘 모르지만 프론트엔드 경력으로난 이정도 연차가 전체 시장에 거의 없지않나요…? ㅜㅜㅜ
ㅋㅋㅋㅋㅋㅋ
음.. 최근에 4년차 두분 모시긴했는데..
앵귤러를 안다뤄봐서..
다음기회에...
이말이 맞습니다.
근데 해봐야죠... 찾아라도 봐야죠... ㅠㅠㅠㅠㅠㅠㅠ
혹시… 백엔드는.. 뽑으시나요
좋은 인재 구하시길 기도하겠습니다!!
백앤드도 뽑습니다!
아 참.. 추천해주시면
추천해주신분이 절대 창피하지 않도록
주변에 프앤이 없어서리..
ㅠㅠ
제가 하나하나 잘 챙기겠습니다.
꼭 약속드립니다 +_+
Node Express 기반이네요.
그쵸… 물론 못하신다는 말씀은 아닙니당! 자란다 응원하겠습니다 ~ 이 방에서 좋은 조건으로 많이 데려가주세요! ㅋㅋㅋㅋ
절대 민망하지 않도록..
네 맞습니다!
화이팅 입니다!!
감사합니다 :)
내년에 지원해보겠습니다 좀더 역량을쌓고
그렇게 말씀 주셔서 감사합니다!
react 뽑으실때..다시 한번..살짝쿵 기대해봅니다!
자란다 리쿠르터 님, 그냥 궁금한건데 왜 Angular 프레임워크인건지 혹시 아시나요?
님
저희
기술스텍 바꿀수도 있습니다.
저도 열심히 역량 쌓아놓아야겠네요
이런 좋은 회사에 들어가기위해 ㅎㅎ
풀스택 잡부는… 안뽑으시는지 ㅋㅋㅋㅋ
Angular x 시니어 진짜 찾기 힘든 조합일거라..; ㅎㅎ
….인정..
그래서 앵귤러로 계속 가진 않을것 같긴합니다..
현재 프앤분들이 사용하시는 기술스택이 어떻게 되나요?
리액트로 변경할지에 대한 고려를 CTO분이랑 이야기 중이고요
아직 확정된게 없어서.. 이말에 확정적으로 말씀 드리긴어려우나
회사 내부 기술 스택 외에 개발자 분들이 사용하셨던 기술 스택이 좀 궁금하네여
https://team.jaranda.kr/front 보니까 현재는 앵귤라 쓰신다네요
초기단계 스타트업이 앱웹을 개발할때 했던 히스토리 그대로라고 생각해주시면 좋습니다.
아하 그럼 자란다가 업력이 좀 되는거군요
그걸 개선시키고 이제는 변화시켜서 대형 서비스를 준비하는 단계이고요 :)
리쿠르터님 ! 타입스크립트는 필수요건일까요?
필수 요건은 아닙니다!
경험이 있으시면 좋은거고요!
혹시 이방에 아이있으신분 계시나요...
?
아이는 왜요? ㅋㅋㅋ
아기있어요~
자란다 사용해보실 수 있도록 제 권한 내에서 드릴 수 있는 쿠폰 40,000원 전달 드립니다! (혹 필요하실지 몰라..) 쿠폰 JUJU22 / MPRVIP 등록방법 자란다 앱 > 마이페이지 > 포인트 > 코드입력 아마 배움과 돌봄으로 사용가능하실겁니다! 참고 부탁드립니다.
오
저희회사에 아이있는 분들이 많이 계시다보니
광고 많이 하던데
저도 나중에 신입으로 지원해볼게요🥰
딱 4년차이긴한데.. 앵귤러 써본적이없어서 아쉽네요 ㅠ_ㅠ
실제로 앵귤러 써본적 없는 분들도
많이 지원해주고 계세요!
4년차에 '어린이' 라는 닉네임을 가지고 계시다니..
전 응애인가요...
최근 오신 2분도 앵귤러 경험이 없는데, 채용 되셨어요!
면접 자리에서 라이브코딩이나 .. 코딩테스트나 과제전형이 있을까요?
현재 화상으로 1번 있습니다.
직무 기술 면접 자리에서
확인한다고 알고 있습니다!
라이브코딩 말씀이신가요!?
네 맞습니다!
@유용태 (teo.yu) 테오님, 글 올리실때 벨로그 외에도 다른 곳에 올리시나요?
답변 감사합니다
다른 곳도 올리시는 것 같아요
아.. 감사합니다.
혹시 Server driven ui 해보신분 계신가여!
https://tv.naver.com/v/16970011
28분 50초 쯤에 설명되는 내용입니다.
아뇨. 그렇지는 않구요. 요즘 IT라는 곳에서 제 글을 비용을 내고 가져와서 사용해주고 계세요
최근에는 사내 블로그에 글을 하나 쓰고 있어서 velog에 글을 당분간 연재를 못하고 있었는데 일단 사내 블로그에 올리고 나면 다시 velog에 올릴 생각입니다. 예전에 techtalk으로 발표했던 그 내용을 다시 글로 정리하고 있어요
아… 어쩐지.. 페북 react korea group에 테오님 글 공유가 되는데, link 들어가보면 velog가 아닌 곳이고, 등록된 날짜가 velog랑 달라서, 혹시나 해서 여쭤봤습니다.
아무래도 velog보다 요즘IT 글이 더 조회수가 훨씬 더 높더라구요. ㅋ
시간 날때마다 틈틈히 글을 여러번씩 읽고 있는데, 혹 다른 곳에도 글을 올리신다면 그 글도 읽고 싶더라구요 ㅎㅎ 워낙에 도움이 많은 되는 내용들이라…
오호 인기 많네요
사실 저도 요즘it에서 보고 퍽 반가웠습니다 ㅎㅎㅎ
자란다 리쿠르터님 아예 디코에서 조만간 설명회? 인터뷰? 같은걸 해보시는건 어떤가요 만약 허락된다면요
관심 있는 분들이 꽤 되는 것 같은데
오오! 좋네요. ㅋ
일단 저희 디코에 jobs에 글을 올려두긴 했습니다. ㅎ
진짜 커뮤니티화 되는 느낌이군여
질문 하나 드리고 싶은데 비전공자 출신으로 프론트엔드 개발 공부하고 있는데 정보처리기사 자격증이 취업시장에서 메리트가 있는지 아니면 약간 필수조건처럼 여겨지고 있는지 궁금한데 어떤가요??
전혀 개의치 않습니다.
필수조건도 아니구요
비전공자 출신으로 정보처리기사 자격증 취득하고 현업 2년차입니다.
인생 모르는거라.. 저는 시간이 너무 빡빡한게 아닌거라면 따놓는 거를 추천드려요.
가끔 회사에서 정부사업 딸때 이름 올라가는 메리트?
필수는 아니지만 있어도 나쁠건없다는 느낌이군요
제 기준에서 말씀드리면 구인 글에서는 명시되어 있는 곳이 많은데
있으면 좋아요
없다고 큰 문제는 없는데
그냥 이력서나 면접에 한줄정도 쓰는 그 이상이하도 아닙니다
전 없이 4년차요..
다만 안타까운게 가끔 정부사업 참여하고 이름이 안올라간 정도..
그리고 정처기와 현업은 전혀 다른 세상 ㅎㅎ
현업에서 근무하실때 정처기 좀 따야겠는데 라는 생각이 드는 경우도 있을까요??
제 기준에서도 정보처리가 있는데, 프론트 취업으로는 도움이 없었다고 생각 되어요.
전~~~혀 없습니다 ㅎㅎ
제 기준에서는요 ㅎㅎ
전 그냥..소통할때 정도...
그냥 cs에 도움되는 정돈가 보네요
말씀 중 죄송합니다 🙏 혹시 리액트로 SSR 구현해보신 분 계신가요? 매번 nextjs나 게츠비 이야기가 나오는데 리액트로 구현은 많이 어려운가? 싶은 의문이 들어서요
저도 제 개발경력상 아직까지는 1번도 없었습니다.
저도 유치원생님 말에 공감합니다.
그냥 cs 정도 가볍게 알 수 있다..
아 그렇군요 답변 감사드립니다! 오히려 그 시간에 프로젝트 하나 더해서 포트폴리오에 추가하는게 더 이득이겠네요
우선은 코드 두들기는걸 추천합니다
일단 제 기준에선 그게 훨씬 낫다고 말씀드릴 수 있을 것 같아요 ㅋㅋㅋ
취득한 거 후회는 안 하지만
CS는 하다가 부족한 부분들 조금씩 보시는걸 추천드려요
리액트는 클라이언트 라이브러리이구요. SSR은 서버 사이드에서 처리하는 거라서 리액트로 SSR 구현을 한다는 것은 맞지 않는 말습니다. NextJs나 개츠비는 React + SSR 를 만들어놓은 프레임워크에요
공무원이나 공기업 쪽 가실 거 아니면 거의 무쓸모
React로 SSR를 하려면 서버 사이드에서 뭔가를 해줘야 하는데 직접 하시려면 어렵다라기보다... 손이 엄청 많이 갑니다. ㅠ
그게 어렵다라고 하면 어려운거구요
그러면 신입개발자로 회사 지원할때 장기적인 프로젝트 하나를 깊게 다뤄본 경험과 여러가지 스택을 겅험하면서 짧은 프로젝트 여러개를 하는것중에 뭐가 더 눈길이 갈까요? 개발쪽으로는 취준을 처음해보기도 하고 포트폴리오가 비루하다보니 어떤 선택이 더 좋을지 모르겠어요
이거 구현하다가 머리 나갈뻔 했어요..
결국 api 쓴 1인..
둘다 장단이 있는데 그래도 저는 장기적인 프로젝트 경험을 조금 더 높게 칩니다. 기간이 길어서는 아니구요. 구상 - 설계 - 개발 - QA - 배포 - 운영 이 사이클 경험을 한번씩 해봤는지는 좀 크다고 생각합니다.
제가 전에 잠깐 알아봤던걸로는 시마다 또 모집마다 다를 수 있긴한데 공무원 전산쪽 경력 인정받으려면 정보처리기사 취득 후 부터 경력 인정됐었어요 참고만 하시고 필요하시면 꼭 공고 확인하세용
기간이 짧아도 릴리즈와 QA 경험을 높게 쳐주고 싶어요
+ 팀 플젝도 경험해보면 좋아요
맞아요!
git을 어떻게 사용했는지
이것도 중요합니다
찾아보니까 제가 서버 컴포넌트를 착각하고 있었더라고요 ^^; 알려주셔서 감사합니다! 링크도 전부 확인해 볼게요 ㅎㅎ
답변감사합니다!
엄지척 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 엄지척 제이님 반갑습니다!!
안녕하세요! 환영해주시니 감사합니다 :)
반갑습니다 :)
풀스택 플랫폼 관련하여 질문있습니다! Meteor를 대신할 수 있는 스택이 있을까요? 회사에서 미티어를 사용하는데 새로운 스택이 많이 나온 것 같아서요! 참고로 웹앱을 이용합니다!
풀스택의 목적이 어떻게 되나요? 지금 가장 핫한것은 Next.js이기는 합니다만
웹앱입니다! 다양한os로 배포해서 사용하고있어요
점심 맛있게 드세요!!!
맛점하세용!
운좋게 말씀하신 프론트 시니어 연차긴 한데, 그래서 그런지, 링크드인이나 리멤버나 콜드메일 정말 많이 오더라구요 ㅋ
안녕하세요 기초적인 질문일수도 있는데 리액트 폴더 구조를 나눌때 components와 pages를 나누는 기준이 무엇일까요?
쓰기 나름인 거 같아요
NextJS 폴더구조 느낌으로 라우팅에만 pages를 쓰기도 하고 pages에다가 모든 걸 몰아놓고 공통 컴포넌트들만 components/ 에 분리하기도 하고
벙찐 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 감자님!! 반갑습니다 :)
아무래도 pages는 routes = URL를 기준으로 나누게 되고 그 이하에 있는 것들은 컴포넌트로 나누게 됩니다.
안녕하세용 아는지인 추천으로 들어왔습니당 궁금한거 있으면 열심히 질문하도록 하겠습니다!
감사합니다~ 환영합니다. 저도 제가 아는 것은 적극적으로 알려드릴게요 +_+bb
네넹
아 그렇군요 명확이 알고 갑니다 감사합니다
css로 background-image 설정한 뒤 js로 요소선택해서 background-image url값을 불러오려고 하는데 계속 빈 문자열을 반환하네요... 해결방법 아시는 분 계실까요?
개발자도구 열어서 콘솔로 요소 선택된거 확인해서 다시 해봐도 빈 문자열을 출력하고...
사진
url을 콘솔로 찍어주면 제대로 출력은 하는데
css에 입력된 url값을 불러오고 싶어서요 ㅠㅠ
사진
왜 이러는걸까요 증말 ㅠ
css는 url을 잘 인식했는데...
.test 가 하나가 맞나욤?
넵 ㅠㅠ
제 웹브라우저 문제인지 크롬도 써보고 웨일브라우저 둘 다 써보는데
둘 다 똑같네요...
다른 분들은 image값 잘 불러오는데...
재설치가 답인가,,,
image값을 계속 못 불러와서 index.html 하나 파서 .test만 만들어본거에요… 그리고 네이버같은 사이트에서 요소찍어서 background-image해도 빈 문자열 내뱉는데
이거… 웹브라우저 버그인가요?
css에 있는 값을 js에서 읽으시려면 window.getComputedStyle 쓰셔야할거 같은데요 음..
window.getComputedStyle(document.querySelector(".test")).backgroundImage 한번 해봐주실수 있나욤?
스택오버플로우에서 그렇게 하라고 뜨길래
해봤는데 그래도 안 되면...
브라우저 충돌이거나 뭔가 문제가 생긴거겟죠?ㅠㅠ…
왜 제게 이런 시련이..
해당 파일이 있는 폴더 캡쳐해주실 수 있나여 ?
querySelector(".test").style 까지만 입력해서 나오는 데이터 보면 뭐가 나오나요?
다 빈문자열로 주르르륵 떠요
타임아웃 걸어서 한번 호출해보세여
사진
이것뿐이에요!
라이브러리는 연결조차도 안 했구
계속 빈문자열 뱉길래 프로젝트 파일 연결 안 하고 아예 .test div만 만든 html 폴더를 따로 만들었어요
상대경로 문제인거같은데 흐음..
사진
큰 따음표
밖에 차이가 없는 것 같네여 ㅠ
파이어폭스가
말을 듣길 바라며
마지막 간절함으로
시도해보겠습니다,,,
보통 스타일에 적은 속성들 이렇게 적어도 속성 뜨지 않나요...?
background-image에 있는 url 마우스 오른쪽 클릭 새탭으로 열기 하면 이미지는 잘 나오나요?
네 이미지는 잘 나오는데 스크립트로 불러오기가 안 돼요 ㅠ
역으로 url주소를 스크립트로 넣어주고 다시 불러보면 url 경로가 떠요(?...)
사진
저 네이버 큰화면 돋보기에 해봤는데
window.getComputedStyle(document.querySelector(".ico_search_submit")).backgroundImage 'url("https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png")'
window.getComputedStyle(document.querySelector(".ico_search_submit")).backgroundImage
요렇게 했떠니 잘 나오긴 하거든요.. 음..
헐
네이버 홈화면
파이어폭스된다
돼요
저는 크롬에서 했는데 음.. 크롬 버젼이 몇이시려나욤 ..
헐 뭐지 크롬, 웨일 재설치를 해야하나….
크롬은 버전볼라고 들어갔더니
갑자기 업데이트 중이라는거 보면...
뭔가 구버전이었나봐요
이런 거어지같은 ㅠㅠ
도움주신분들 모두 감사해요ㅠ ㅠㅠ 흐엉ㅇ
document.querySelector(".test").style 과 같이 style 속성은 태그의 inline style 과 JS로 주입한 style 값만 확인이 가능해서, css에 기재한 값은 window.getComputedStyle 메서드를 사용해야 하는 걸로 알고 있어요 !
저 카톡에서 궁금한게 있는데요!!
사진
빨간색친거 처럼 옆에 있는걸 뭐라고 부르나용??
어떤 특정 단어가 있나요??!
혹시 husky 사용해보신분들중에 아래 에러 메시지 트러블 슈팅해보신분 있나요?? 관련된 자료가 거의 없어서 삽질하는중인데 도움주시면 정말 감사드리겠습니다(흑흑)(흑흑) husky - pre-commit hook exited with code 3 (error)
yarn 을 하셨나요?
yarn 설치 말씀하시는 걸까요?
패키지 설치는 했습니다
root 에서 yarn 을 돌리시면 node_modules 가 깔리는 그 작업을 말하는것이었어요
네엡 node_modules 생성했습니다
음…. 그럼 모르겟네요. 저희 회사에서는 yarn 을 안돌렸을떄 발생하는 문제라서
pre-commit 훅 스크립트가 어떻게 생겼나요?
사진
요렇게 생겼습니다
lint-staged 주석처리 해봤는데도 안됩니다 저 문제는 아닌거같아요!
혹시 평소에 잘 되다가 갑자기 안되는걸까요 아니면 새로 클론했더니 나오는걸까요?
이번에 새로운 팀에 합류하면서 새로 클론했더니 나옵니다. 다른 팀원분들은 정상적으로 작동하는데 제 PC 환경에서 문제가 있는거 같아요.
Tried - Husky 버전 변경 v6 -> v7 - Reset Git Authentication (user.email, user.name) - Using GitHub Desktop - .husky/_/pre-commit 파일 - nvm, nvm.sh 파일 경로 및 파일 유무 확인 - ./node_modules/.bin/lint-staged 주석처리
확인했던 문제사항들입니다!
html 출력할 때 header footer를 만들어 주고 싶은데...검색해보니 대부분 링크처럼 전체 content를 테이블로 묶어서 thead, tfooter를 활용하는 방법 https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a 혹시 이 방법 말고 다른 방법 아시는 분 계실까요ㅠ?
앗 글이 잘렸네요... 방법을 사용하더라구요. 해당 방법 이외에 다른 방법 사용하시는 분 계실까요ㅠㅠ?
저이번에 간단하게 외부api이용해서 토이플젝하려는데요 외부api통신할때 axios쓰려고할려면 기본적으로 fetch api작동법도알아야할까요?
아뇨
차이 알아두면 좋긴할거같아여 ~~
저는 그냥 단순하게 비동기요청이라 background에서 돌겠지만, axios랑 fetch중에 fetch가 조금 더 빠르다? 정도만 알아두고있어여 오히려 비교해보면서 axios에서 timeout설정하는것도 있다는걸 알게됐던거같아여
Fetch api 인터페이스를 말씀하시면 노 이지만 작동원리라면 예스 입니다~ 결국에 axios fetch 둘다 작동원리는 같거든요~
Fetch 도 timeout 줄 수 있어요 ㅎㅎ axios가 더 간단하게 할 수 있지만..
아 맞아요! ㅎㅎ,, 더 axios가 간단했어서 위에 axios만 가능하다고 작성해버렸네요!
감사합니다!
으
husky 공식사이트에 나온대로 처음부터 다시 설치하니까 됩니다. 의견주신분들 감사합니다 :)
살려줘 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요
반가워용
혹시 스프린트도 모집 아직도 하나요?
안녕하세요 울고있는 제이지님 반갑습니다
언젠간 할건데 아직은 일정이 없어요
6월달을 생각하고 있기는 합니다
아니면 5월 말정도요
감사합니다! 혹시 접수방식은 어떻게 되나요?
제가 구글 시트에 신청서 양식을 만들어서 링크를 공유하면 먼저 등록한 선착순 8명씩 팀을 만들어서 진행을 합니다
디자이너나 UX직군은 무조건(!) 우대입니다 ㅋ
와우
이모티콘 다들 오늘도 괜찮은 하루 보내셨길 바라겠습니다! 연휴 잘 보내세요 :)
휴! 이제 휴일이네요!
이모티콘
연휴 잘보내세요!
이모티콘
이모티콘 즐거운 연휴 보내세요!!
즐거운 황금 연휴 되세요 ! 황금 해커톤기간이네요!
황금 해커톤!! 너무 좋네요 ㅎㅎㅎ 제가 하고싶은 개발할 수 있어서 너무 좋아요 😇
https://snipcart.com/blog/webassembly-vs-javascript 웹어셈블리와 js를 비교해서 잘 정리해놓은 글이 있어 공유합니당!
귀여운 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
반갑습니다
안녕하세요 프론트엔드 막 공부 시작한 휴학생입니다..! 눈팅만 할게요..👀
혹시 디자이너가 많을 때는 디자이너끼리 의견 통합을 어떻게 하나요? 제가 사이드프로젝트 팀장인데 디자이너끼리 의견 차이가 극명해서 어떻게 도울 수 있을지 참 고민입니다... 메인 디자이너를 따로 두지 않아서 생긴 문제 같긴 합니다.
귀여운 라이언님~ 어서오세요 ㅎ 눈팅도 좋아요 ㅎ
언제든 궁금한게 생기면 편하게 글 남겨주세요~ 뭐든 내가 해야 남으니까요 ㅎㅎ
저는 다같이 보여주는 것만으로도 자연스레 결정이 된다고 생각합니다
다같이라고 하시면 팀원 전체를 말씀하시는 건가요?
대부분의 문제들이 뭘 만든것을 보여주지 않고 결정을 해보려고 하거나 논쟁을 하게되는 경우라고 생각을 해요~ 피그마등으로 실제로 만든 디자인이나 다 같이 모여 실시간 피드백을 받아가며 그리다보면
기획 ux 개발 qa 등 팀내 관련 전체를 의미합니다
아 그렇군요
의견 정말 감사합니다🙏🙏
각자의 생각을 그냥 자유롭게 펼치기만 하고 논쟁하지 않는 방향으로만 가면
뭐랄까~ 결국 좋은 디자인들이 스스로 살아 남는 거 같아요. 보여주면 거진 사람들 마음이 크게 막 갈리진 않더라구요
사람들이 실체가 없을때에는 논쟁도 생기고 의견차이가 나는데
특히 디자인은 만든것을 보고 쓰다보면 a b 테스트의 결과는 너무 극명해서 자연스레 결정이 되더라구요
둘다 각자 자신이 하고 싶은대로 만들어보라고 하고 실제로 구현을 해주는게 합의하는거 보다 더 낫고 빠를거라고 생각합니다 ;)
이모티콘 다들 좋은밤 되세요!
이모티콘
이모티콘
와... 지금 진짜 많이 테스트해보는데 해결이 안되서 질문하나 드리려고합니다 ㅠㅠ 8초 영상하나를 video태그로 임베드시키려는데 8초짜리 원본(2.4mb)은 모바일환경에선 표시자체가 안되고, 화질저하(500kb)한 영상은 업로드가 됩니다.. 혹시 뭐가 문제인지 아시는 분 계실까요?? 다른 영상은 용량이 커도 잘 올라가는데 용량에 비해 너무 짧아서그런건가요 ㅠㅠㅠ
확장자는 동일한가요..?
넵 계속 mp4로 사용합니다..!
그… 혹시 영상의 비율은요…? 최근에 제가 비율인가 비트레이트때문에 안된적이 있었습니다
테오의 스프린트 7기 회고 https://velog.io/@teo/google-sprint-7 이번 7기 회고는 스프린트가 끝나고 한참이나 지나서야 회고글을 올리게 되었습니다. 😅 양해 부탁드립니다. 최근 블로그 업로드를 못하고 있어서 스프린트 글 사이에 뭐라도 하나를 올리고 싶었는데 아직 원고들이 다 작성이 안되서 미루다보니 이런 핑계로 스프린트 회고를 미루면 안될 것 같아요. 이 회고 역시 협업을 할때 좋은 방법들이 많이 있으니 인사이트가 될 거라고 생각합니다. ㅎ
블로그에 글올리는거 너무 스트레스받지마시고 편하실때 올려주십쇼 ㅎㅎ
이모티콘 다들 점심 챙기시고 편히쉬는? 아니면 좋은?! 어린이날 되세요!!!
애플 시스템 폰트 비슷한걸 계속 찾고있었는데, 어떤분께서 Pretendard 라는 폰트를 만드셔서 무료로 사용하게 해주셨네요! https://github.com/orioncactus/pretendard
프리텐다드 좋아요!
맞아요 저희 웹 디자인팀에서도 폰트는 다 이걸로 교체하고 있어요 ㅎ
두두킴님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 두두킴님~~ 반갑습니다 :)
혹시 markdown 편집기 다들 뭐 쓰시나여
Typora가 유료로 바뀌면서 새로운 편집기를 찾아보고 있는데
타이포라 만큼 편한게 없고 이번에 베타 되서 유료된만큼 기능 더 좋아져서 그대로 씁니다 ㅎㅎ
오오! 어떤 면에서 좋은 거에요?
오 역시 근본 편집기군요 근데 왜 이런 작은 돈이 더 쓰기가 망설여지는지,,, ㅋㅋㅋㅋ 저도 업데이트된 거 궁금합니다!
ㅋㅋㅋㅋ
안녕하세요! ☺
안녕하세요 궁금한게 있는데 현업에서 보통 캘린더는 라이브러리를 쓰시나요 아니면 직접 만드시나요?
라이브러리를 쓰시면 추천도 해주시면 감사드리겠습니다 🙇♂️
저는 캘린더 만들때 결국 계속 되는 요구사항을 만족시키기 위해서 직접 제작을 했었구요~ 검토가 되었던 라이브러리는 https://fullcalendar.io/ 였어요
캘린더가 어떤 것이느냐에 따라 다를것같아요
큰 거면 테오가 추천해준 것도 나쁘지 않고요, 작은거라면 대안이 좀 있습니다~
저도 이 거 써봤는데, 나름 유용하게 잘 썼던 것 같아요~. 다만 리액트는 좀 제한적이긴 했습니다!
어서오세요 ㅎ 여기는 프론트엔드나 개발관련해서 다른 사람들은 어떻게 하는지 궁금할때 서로 묻고 답하며 함께 성장하고자 하는 공간입니다 ㅎ 언제든 궁금한게 있으면 편하게 질문하세요~ 제가 아는게 있다면 최대한 답변 드릴게요 ㅎ
저도 써봤지만 큰 캘린더라면 테오님이 추천해주신게 제일 괜찮더라구요
구독형도 아니도 종신형 결제이고 그전 불편한 점이 다 해소되서 나왔다고 하네요
오 종신형 결제라면,,, 질러야겠군요 감사합니다
이거 적용하려면
사용하는 .css 파일 맨위에
@import 해서 붙이고
font-family: Pretendard;
하는거 아닌가욤? ㅠㅠ
적용이 안되네여
리액트 프로젝트입니다
보통 직접 제작을 하시는 군요.. 혹시 정석적으로 만들어보고 싶은데 참고할만한 레퍼런스가 있을까요? 웹개발인데 앱사이즈여서 작은 캘린더에요 ㅎㅎ 구글링 해봤는데 많은 분들이 보시는 레퍼가 궁금해서요…!
답변해주셔서 감사합니다 🙂
최상위 css에 하거나 link 태그로 해보시는건 어떤가요?
사진
400뜨는거같애염 ㅠ
사진
Url이 다른 것 같아요
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
Github에는 이거로 나와있네요!
흠.. 기존에 마크다운을 타이포라를 썼던 사람들은 익숙해지고 더많은 테마와 3대까지 연결되고 타자기 모드 같은 점이 있구요 .. vs code도 미리보기를 지원하지만 ui로 간단하고 심플하게 velog처럼 미리보기를 보면서 마크다운 해볼수 도있고 마크다운 문법 없이도 단축키만으로도 바로 간단히 작성하고 pdf혹은 다른 문서로 편하게 공유가능한 점이 좋은거 같아요 제일 큰점은 한글지원이 이제 된다는 점? 유료버전 안쓰려면 베타버전으로 다운 받아서 그 이전버전으로도 사용은 가능합니다. 테마는 2-3개뿐이지만요
무료 버전으로는 macdown이라는 에디터도 가볍고 좋습니다. 다른 에디터들과 달리 , 벨로그처럼 심플하고 직관적인 ui로 편해서 typora유료되도 그냥쓸까하고 고민하게 되더라구요
저도 타이포라 그냥 유료로 구매해서 쓰고 있습니당. vscode 단축키 되는 분이랑 따옴표나 백틱 괄호 같은거 쓸때 개발 에디터처럼 작동도 하고.. 고런 작은 부분 이 편하네유
저는 그냥 노션을 마크다운 편집기로 사용하고 있습니다
저도 타이포라 유료
편하네용
깔끔하기도하고
ㅌ
마크다운 문서 편집들을 자주 하시나봐요 주로 어떤 문서들인가요?
저는 메모장 용도 입니다 ㅎㅎ
저도 그냥 메모.. ㅋㅋㅋ
아하 ㅎㅎ
SSR과 CSR의 차이점에 대해 공부하고 있는데요, SSR이 CSR보다 나은 점은 가장 큰게 seo 때문인가요?
SEO도 CSR 대비 SSR의 장점중 하나겠죠?? 가장 큰거라고 생각하는 것은 개인의 차이가 클 것 같아요! 누군가는 최초 로딩속도를 장점으로 들 수도 있는 것처럼요!
예를들어 사용자가 선택할 수 있는 9가지의 그림이 표시되는 페이지가 있는데 그 그림을 사용자가 클릭했을때 그림이 다른 그림으로 바뀌는 페이지라면, CSR과 SSR중 뭐가 더 나은선택일까요?
SEO도 있지만 콘텐츠가 중요한 서비스는 SSR이 더 나을 수 있다고 생각해요! 우오님 말씀처럼 최초 HTML 렌더링 속도가 더 빠르니까요.
제 생각엔 이건 CSR과 SSR의 선택보다는 다른 그림으로 바뀌는 동안의 딜레이가 있다면 스켈레톤이나 로딩화면, 이미지 최적화가 필요하지 않을까요?? 다른분들 의견도 궁금하네요.
그러면 생각이 든게 Next.js를 사용할 때 첫페이지는 SSR을 사용하여 seo 문제를 해결하고
그 다음 페이지는 CSR을 사용하여 필요한 데이터만 갱신하는게 일반적인방법인가요
사진
ssr의 상황에서 페이지마다 데이터가 자주바뀐다면? 이 무슨 말인지 잘이해가 안가네요ㅜㅜ
상품 상세 페이지 아닐까요? 같은 레이아웃에서 데이터만 바뀌고, 메타 데이터도 바뀌어 검색에도 노출되어야하니까요..!
아 그렇겠네요!!
제가 학교 프로젝트로 진행중인 프로젝트가 사용자가 페이지마다 여러 옵션을 선택하여 그 옵션들을 모아 서버에 전달하면 서버가 머신러닝 서버에 요청하여 옵션에 해당하는 야구선수들의 성적을 예측하는건데
그 예측결과가 나오는 페이지는
csr로 제작하면 되는걸까요?
검색노출이 필요가 없으니까..?
저는 그렇게 생각합니다! ㅎㅎ
https://www.bleepingcomputer.com/news/security/heroku-admits-to-customer-database-hack-after-oauth-token-theft/ 메일로 계속 비밀번호를 강제로 리셋하겠다고 알림이 와서 알아보니 헤로꾸가 해킹당했었다네요.. https://news.ycombinator.com/item?id=31269062
저도이런 연락 왔었는데
이모티콘 전 내일 시리즈 B 기념으로 전사 쉬어서.. 영화 보러 가보겠습니다!! 다들 빨간날 마무리 잘하세요 :) 푹 쉬세요!
늦은 시간에 질문드려서 죄송합니당 매번 강의만 듣다가 토이프로젝트를 처음 만들어보는데요. 라이브러리도 찾아서 혼자 연결해보던 중에 반응형 지원이 안 된다는 사실을 알고 한참을 구글링해서 스택오버플로우 답변들이랑 깃허브 연구소(?)글들도 읽어봤는데 임시방편인 트릭을 알려주는데 계속 막히더라구요.(댓글에도 코드 안 먹힌다고 업데이트 요청있었음!) 첫 프로젝트로 너무 고난의 길을 걷는건가 싶어서 포기하려던 참에 중국인 개발자가 오래전에 쓴 코드가 먹히더라구요?! 막상 문제해결해서 기분도 좋고, 어떤 원리인지도 이해는 했는데. 뭔가 자기화가 되지 않아서인지 찜찜한 기분이 계속 들어요…. 실무에서 일하시는 분들도 이렇게 생각지도 못 한 곳에서 일이 막히고 어쩌다 발견한 코드를 넣었는데 어? 되네?하고 막힌 일이 풀린 경험이 있으신가요? 문득 이럴 때 어떻게 대응하셨는지 궁금하네요... 이렇게 뭔가 날치기 강도처럼 막 쎄벼서 붙여넣기해도 되는건가 싶어요. 괜찮은걸까요?
이모티콘 대혼돈의 멀티버스 보고 왔는데 역시.. 기본빵은 하네요 다들 좋은밤 되셔요!
저는 좋은거 같아요. 처음엔 뭐든 해결 하는게 중요하죠 처음에는 라이브러리를 찾고 찾아 문제를 해결하다가 그러다 경험이 쌓이면 직접 그 라이브러리를 수정해서 해결하고 더 경험이 쌓이면 그 라이브러리를 만들어서 해결하게 되는거 아닐까요~? ㅎ
소중한 경험 나눠주셔서 감사해요 ㅎ 실무에서는 일이 막혀서 안 풀리면 문제해결하는 데드라인 기간(시간)같은걸 설정하기도 하나요?
여러분은 새로고침해도 데이터를 빠르게 가져오기 위해서, 무엇을 사용하는 편인가요? 로그인은 localStorage를 사용해서 유지하고 있는데, 혹시 redux-persist를 자주 사용하시나요?
그건 작업자 나름 인것 같아요. 신입이라면 최대 데드라인을 정해서 그때까지 해결이 안되면 시도 해본 방법들을 정리해보고 그 내용을 가지고 어떤 부분이 문제였는지 선임에게 질문해서 해결하는게 좋지 않을까요~?
사진
방금도 시니어분 코드 복붙중이였는데 ㅋㅋㅋ
라이센스가 있는 코드가 아니라면야 일단 해결이 제일 중요하죠!! 베꼈다가 아니라 해냈다!! 내가 찾았다!! 라고 생각하세요 ㅋ 프로그래머 세계가 그런거잖아요 ㅎ
네~ 당연히 기획자와 함께 데드라인과 B플랜을 정하는 것은 자주 있는 일입니다. 오히려 그 안에서 더 가성비가 좋은 방법들이 찾아지기도 해요! 특히 프론트엔드는 기술을 탐구하는 것에 대한 비중이 낮다보니 문제와 목적을 바탕으로 기획으로 풀어낼수 있는 여지가 더 많다고 생각해요
다른코드 가져와서 자기코드에 적용시키는 것도 일종의 실력(?)이라.. 무조건 나쁜 것만은 아닌 것 같아요!
맞아요 어짜피 전부 구글링 해서 하는거라.. 문제는 그 코드에 문제 생겼을때 해결을 할수있게 이해는 하느냐 정도만 하면 될거같아요
자기가 다 새로 짜는게 실제로 불가능하지 않나요?
구글링안하고 코딩할 정도면 전 여기 안다니고 구글다닐듯
사진
gahui님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
혹시 vue로.... 페이지마다 api로 받은 데이터가 meta tag로 보이도록 설정할 수 있나요...??
안녕하세요 gahui님~~ 반갑습니다 :)
안뇽하세요. 블로그 글 읽고 감명받아서 들어왔어요 ㅎㅎ
와~~ +_+ 너무 감사합니다! 어서오세요 :)
여기는 블로그 관련된 내용이나 기타 프론트엔드나 개발등 궁금한 것들을 물어보면 답해드리기 위해서 시작한 공간입니다. 간단한 질문은 바로 대답드리고 긴 호흡이 필요한 내용들은 블로그등으로 작성을 하곤 했어요.
그러려면 Ssr하셔야하지 않나용? Nuxt를 하면 아마 가능할 것같은데… 저는 next로 제품 상세정보에 대해서 meta tag의 타이틀, desc등 구현했었습니다!
지금은 다 같이 서로 묻고 답하고 함께 성장하는 공간이 되어가고 있습니다. ㅎ 언제든 편하게 글 남겨주세요~
좋은 아침입니다! ㅎㅎ 저번에 부트캠프 위코드랑 바닐라코딩 여쭤보고 큰 도움받았던 사람이에요 이번에 뉴스레터들 목록 정리하면서 혹시 여기 계신분들께도 도움이 될까 해서 올립니다 구독 신청했는데 며칠 지나도 안 오는 경우 스팸메일함 혹은 메일함 분류들 (SNS 메일함 등등) 확인하시길 추천드립니다 저도 구독 처음 누른 것도 많아서 모든 뉴스레터 품질까지는 확인을 못했지만.. 나중에 수신거부 하셔도 되니까 관심있는 것 있으시면 구독해보세요! (거의 무료구독인데 추가적으로 원할 때 유료구독하면 더 자세히 정보 볼 수 있는 뉴스레터도 있습니다)
여러 뉴스레터 구독 안내 https://blog.naver.com/skdhs94/221860445326 아웃스탠딩(종합) https://outstanding.kr/newsletter 미스터동(시사) https://mrdongnews.com/ 돈키레터(경제) https://www.donkeyletter.com/ 테크니들 (IT) https://techneedle.com/ 일간 바이라인 (IT) https://byline.network/newsletter/ 테크니들 (IT) https://techneedle.com/ 일분톡(IT) https://ilbuntok.com/ 플러깃(IT) https://page.stibee.com/subscriptions/168333 그랩의 IT 뉴스레터(IT) https://maily.so/grabnews 코딩월드(IT) https://page.stibee.com/subscriptions/81816 IT조선 모닝테크 https://page.stibee.com/subscriptions/14900
여기에 제가 작은 팁 하나만 더 얹어드리면, "헤이버니"라는 앱이 있습니다. (앞광고, 뒷광고 아님) 이런 구독 레터들이 점점 많아지고 있습니다. 이 앱에서 구독 레터들만을 위한 sub 이메일 하나 파서, 따로 관리해줍니당 ㅎㅎ
감사합니당
아하... 감사합니다...!
혹시 css 라이브러리중에 bulma써보시거나 쓰시는분계신가요?
저 불마 buefy사용합니다
얼굴마사지하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
시닙프엔님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
얼굴 마사지하는 제이지님 불금 네오님~~ 반갑습니다 :)
이모티콘 다들 식사 맛있게 하세요!! :)
맛점하세요 :)
자란다님 완전 식사요정이 되신것 같아용 ㅋㅋㅋㅋㅋㅋㅋㅋ
아침 점심 저녁 밤.. 이렇게 인사라도 드려야죠 :)
오.. 이번에 토이플젝에한ㅂ너 써볼까하는데 익히기쉽나요?
유튜브에 튜토리얼같은것많긴하더라ㅣ가요
Hook님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 ㄹ님~~ 반갑습니다 :)
안녕하세요!!
네네 부트스랩보다 직관적이라서 좋습니다. 저는 잘 쓰고 있습니다.
유튜브에 튜토리얼 영상많던데 이런걸로 배워도 충분할까요? 바로 토이플젝에 써보려해서요 ㅋㅋ
네!! 어서오세요~~ 여기는 서로 궁금한거 물어보고 또 답하면서 함께 하고자 하는 공간입니다~ 뭐든 편하게 글 남겨주세요 ㅎ
안녕하세요:) 혹시 dynamic routing을 구현할 때 path parameter 와 query parameter 중 어떤 것을 사용하시나요? 제 경우는 users 리스트가 있고 각 유저의 디테일 페이지를 보여주는 사례에 가깝습니다. users/15 users?id=15 이 중 어떤 것을 사용(혹은 선호)하시는지와 그 이유도 알 수 있을까요?
근데 사실 불마가 국내에서는 비주류라서요.. 유튜브 보면서 해도 충분하긴 한데 나중을 생각하면 다른걸 하시는걸 조심스럽게 추천드릴게요..
users/15 를 선호하고 이유는 공유시 간결한 url때문입니다!! 있어빌리티 측면에서도 좋아보여요 ㅎ
있어빌리티는 뭔가요? 있어보인다는 걸까요?? 😁
ㅋㅋ 네 그런 신조어가 있더라구요 ㅋ
아정말요? 혹시 dartz님은 어떤경우로 사용하시는거에요?
저는 인턴으로 근무한 회사에서 웹 개발할 때 , 사장님께서 불마를 사용한다고 하셔서 따라 사용하게 되었습니다.
아그렇군요.. 혹시 한국에서 주로쓰는 css 프레임워크나 라이브러리가 tailwind나 scss맞나요?
adorable CSS 추천합니다..!!!!!!!!!!
앗 저도 이거 치고있었어요 ㅋㅋ
누가 만든건진 모르겠지만 너무 좋더라구요 ^,^
야-호!!
오..배우기쉽나요?
아주 직관적이라 죠습니다
저 인성님
tailwindcss 같은 어려운 설정이 없어요
저 지금 html,css수준이 그냥 인프런정도 클론코딩으로 만들정도는되는데요
이정도면 한번 css프레임워크배워서 써봐도괜찮을까요?? 아니면 더 css실력을올리는게나을까요??
갑자기 진지한 대답이 될것같은데….
1)sass+BEM+CSS Module 2)styledComponent 3)tailwindCSS adorableCSS는 제가 만든거고 보편적으로는 이렇게 3개를 제일 많이 쓰고 있다고 보시면 되요
진지한답변 하셔도됩니다
지금 CSS 프레임워크 중에… 기존에 시장을 휘잡았던 부트스트랩 같은 것들은 소위 CSS 외적인 러닝커브가 존재해요
오 정리감사합니다
tailwindcss가 최근에 대표적인 프레임워크죠. className을 정해진것만 사용해서 CSS를 구축하고 추가 커스텀을 style등을 통해 구현하니까요
그래서 이것들은 가급적 추천하지 않아요. 소위 찍어내는 개발이 가능한 수준이라면 문제가 없겠지만…
HTML/CSS 수준을 말씀하셨는데 지금 주니어 프론트엔드 개발자들이 CSS를 다뤄봐야
css프레임워크 쓰시는거에 추천하지않는다고 생각하시나요??
넵넵
플렉스박스, 그리드 정도 다루면 잘 다루는 정도에요
맞습니다
애니메이션, 트랜스폼, 트랜지션 등이나 그 외 선택자들, 최신 문법 is 등은 익히지 못하죠
그럼 그런 부분을 차치하더라도
지금딱 제가이럽니다..
퓨어한 CSS를 공부하면 투자한 만큼 실력은 늡니다
다만 여기서 좀 추상적으로 말하자면
저희가 곱셈, 나눗셈을 배우기 전에
덧셈, 뺄셈을 배우죠?
네
근데 곱셈, 나눗셈만 우선 배워도
덧셈, 뺄셈은 따라오는 개념이 되어버려요
저도 인정합니다. 오히려 퓨어 css 공부하고 프레임워크 쓰면 프레임워크에 대한 러닝커브는 있겠지만 그거 배우면 프레임워크만 배운사람보다는 금방 배웁니다
회사에서 쓰는 프레임워크가 다양하기때문에
소위 후천적인 학습 수준이 높으면 준비되어야 하는 선행 과정이 많이 단축됩니다
내가 어떤 프레임워크를 선택해야 하느냐
전부 대응할수있는 퓨어 css를 좀더 강화하는방향으로 하시는걸 추천드립니다
어떤걸 공부해야 취직에 도움이 되느냐
아그렇군요
고민하는 방향이 "선택"이라면 조금 생각을 해보셔야하구
저는그냥 단순히 한번 css프레임워크같은것도있다길래 재밌어보여서 써볼려했던건데
그냥 css나 더공부해야겠네요 ㅋㅋ
ㅋㅋㅋ이래서 진지한 대답이ㅠ
어우 아닙니다
이런조언이또 피가되고 살이되는거아니겠습니까
클론 코딩을 하실 때
코드 보지 마시고
데스크탑 화면 구현해보고
넵
반응형 넣어보고
:root 에 변수 선언해서 사용해보고
CDN으로 활용하기와 파일로 import하는 경우에 대한 트레이드오프
이런 CSS 테크닉이 아닌 CSS를 활용하는 방법을 조금씩 고민해보셔용
감사합ㄴ디ㅏ
css사실 공부하면 너무어려워서
레이아웃만 잘 잡아도 평타는 치는거같아요
프레임워크쓰면 좀더 편하게개발할수있지않을까? 라는생각에 여쭤본것도있긴합니다 ㅋㅋ
:root안에 변수하는것 정말 프로젝트 사이즈 커지면 유용한거같슴다
현실과 타협하면
드림코딩유튜브에서 강조하던거라 배울때부터 하고 갔는데 정말 좋은거 같아요
몸은 편해집니다
저도이건 완전동의합니다..
프레임워크나 라이브러리는 개발자가 편하게 사용하기 위해 개발된 결과니까요
내가 좀 더 이해하고 잘 활용하기 위해서라면 퓨어한 CSS를 좀 더 해보셔용
요새 CSS 챌린지 이런것도 많은데
ㄴ베넵
인성님
Udemy 강의 좋은거 많으니까 참고해보시공
꼭여쭤보고싶은게있는데
저도 이부분이 궁금했었는데 답변 감사합니당
태오가 진짜진짜 CSS최고입니다
사랑스러운 CSS도 한번 봐보셔용
제가사실 레이아웃잡는걸 많이어려워합니다… 혹시 레이아웃공부하는팁같은게있나요?
개구리 갖고 놀면 이해가 잘 되긴 합니다
개구리 사이트 아나요?
foggy flex
그거말씀이신가요?
네네
아저 그거수준정도는 할줄압니다
그거를
클론해보셔요
헤더/푸터 나눠서
헤더에 네비게이션 달아두고
탭 쭉 나열한다음에
각 탭을 클릭할 때 레이아웃이 변하는 형태로 혼자 연습하시는것도 추천합니다
템플릿 따라하지 말고
맨땅에 헤딩해보세요
보더박스, 패딩, 마진 이런거 신경쓰지 말고
오우 빡세보이긴한데
알겠습니다
display, flex-direction 속성등만 활용해서
백그라운드 컬러 지정해두고 작업하기
네
그러면서 시맨틱 태그도 알아보고~~
인성님혹시현업에서
이거 한번하는게
백날 클론코딩하는것보다 효율 갑이에요
한번해보면확실히 실력은.. 많이늘거같습니다
한번꼭해보겠습니다
코딩은 맨땅에 박으면서 모르는부분 찾아가는게 답인것 같슴다
인죵입니다
프로그래머는 나중에 보니까 결국 문제해결을 코딩으로 해나가는 사람이 맞는거같더라고요
어도러블CSS 추천하러 왔다가 주절주절 떠들어버렸네
그래서 결국 프로그래머 === 문제해결자
ㅋㅋㅋㅋ
ㅋㅋㅋㅋㄱ맞아용
문제 해결을 잘하는사람이 프로그래밍을 잘하는거 같아요
저 그니까 탭을만들고 탭을눌렀을때 예를들어서 가운데정렬버튼 위로정렬버튼 세로로정렬버튼 이런버튼에관한 자바스크립트이벤트를 만들고 버튼에따라 개구리가 flex가되게끔 만들어보라는 말씀맞나요?
오… 개구리들을 클론하라는게 아니라
저는 화면 그리기 전에 노트 펼쳐놓고 고민 엄청 해요. 이걸 어떻게 쌓고 그려나갈지. 그리고 데스크탑이랑 모바일 버전 함께 보면서 다르게 구현된 부분 어떻게 하면 연결이 부드럽게될지랑 등등 뭐 이것저것 고민하다보면 결국 고민하는 시간이 코드짜는 시간보다 길긴한데, 그렇게 결정하고나면 그리는건 순삭이더라고요. 결론: 많이 해봐야 는다. 그럼에도 화면 그리는건 늘 해도해도 어렵다🤣
각 미션에서 요하는 레이아웃 배치들을
컬러만 변경하면서 박스가 달라지게 바꾸라는 의미였어요
1탭을 누르면 로우 플렉스
2탭을 누르면 컬럼 플렉스
탭 클릭하면 자바스크립트 이벤트로 클래스를 변경해줘도 되고 html을 바꿔줘도 되고
탭을눌러서하라는게 자바스크립트써서 하라는말씀맞나요?
아 이해했습니다
아니면 아예 css선택자만 사용해서도 돼요
codepen.io 참고하시면서
굿입니다
어떻게 css 짜는지 봐도 좋을것같네용
감사합ㄴ디ㅏ!
우와 여기보니까 참고할만한게 엄청많네요
검색팁은 pure css 임다
평소 animaition transition 같은게많이부족하다 새악ㄱ했었는데 여기에 좋은게만항요
scss 같은 전처리 언어로 작업된것들은
viewcompile css 였나… 옵션 변경해서 보심돼요
감사합니다!!
이것도 추천합니다. 악으로 깡으로 하겠다면 50일 바짝 해볼만해요. https://github.com/bradtraversy/50projects50days
별이 무려 만 삼천개!
헉 너무좋은 정보많이알려주셔서 감사합니다
이모티콘
제가 최근에 본건 이건데 ㅎㅎ 이런 것도 뜯어보시고 활용해보시면 좋을 것같아요
헉.. 다들너무감사합니다
이모티콘
이방분들 너무 사랑합니다
오 감사합니다!
헐 저도 이거 듣고있는데.....!
와 너무 좋은 정보
넘 많은데요
혹시 테오의 스프린트 하실 때, 풀스텍 5명정도 모여서 하나요? 구성은 어떻게 되는지 궁금합니다!
그냥 팀 모여서 하십니다
안녕하세요 기초 적인 질문 일 수도 있는데 스크롤이 붙어있어서 이걸 오른쪽으로 이동 하고 싶은데 css를 어떻게 설정 해야 할까요?
사진
스크롤 있는곳의 바깥쪽에 패딩이 있는거 같습니다
모달에 padding값이 있나요??
스크롤 영역을 파악하시고 그 바깥쪽이 아닌 안쪽에 패딩을 주시면 될거같아요
네 패딩값을 주지 않았네요
안쪽에 패딩값을 넣고 바깥쪽에 패딩값을 빼주었습니다.
모두 답변 감사합니다.
Vuex 값이 새로고침하면 날아가서 vuex-persistedstate를 사용하려하는데요. 찾아보니 deprecated가 되었는데, 해당 라이브러리를 대체할만한 괜찮은 라이브러리 아시는게 있는지 여쭙고자합니다
진정한님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!! 진정한님~~ 반갑습니다 :)
안녕하세요 :) 잘 부탁드립닏 ㅏㅎㅎ
네!! 저도 잘 부탁드려요~~ 언제든 궁금한게 생기면 편하게 글 남겨주세요 :)
넵 ㅎㅎㅎ :)
질문있습니다! 혹시 instagram api 사용하신분 계실까요? 페이지에 항상 인스타 피드를 띄우려고 하는데, 장기토큰이 60일인데, 60일이 지나면 피드를 가져올 수 없게 되는 건가요? 토큰이 만료되면 새로 받아서 피드를 가져오려고 했는데, 처음에 코드를 받으려면 인증창을 띄웁니다. 그러면 토큰이 만료될때마다 인증창을 띄우고 확인을 해줘야하는 건가요..?
저 setTimeout에대해서 질문있습니다 만약 let timeoutId; const out = () => { timeoutId = setTimeout(() => { console.log("lalala"); }, 6000); console.log("1", timeoutId); }; out(); out(); out(); out(); out(); 다음과같은코드가있다면 저는 timeoutId가 setTimeout함수가 6초뒤에 실행되니까 6초후에 반환값으로 나와서 화면에출력될줄알았는데 그게아니라 바로바로 setTimeoutId의 값은 따로나오고 함수자체만 6초후에 lalala라는 내용이 출력이됐습니다. 제원래 생각은 setTimeout함수가 호출될때 반환값으로 timeoutId가 나오는줄알았느데 setTimeout함수의 반환값 timeoutId는 함수가 호출되고나서 반환되는게아니라 그냥 설정만 하면 바로 반환값이나오는거맞나요?
사진
이런식으로 값이나왔는데 timeoutId는 언제 반환이되는지 햇갈립니다..
timer를 생성할때 바로 id가 나옵니다
아그렇군요
저는 함수가실행되고나야 반환값이나오는줄알았습니다..
그래야 우리는 이 id를 통해서 타이머를 원할때 끌 수 가 있지요
맞습니다.. 이거때매 왜 clearTimeout이 왜이렇게작동되는지몰랐는데 이제이해가가네요
함수 콜백의 반환값은 아무런 의미가 없습니다
저는 근데 이게 함수표현식이니까 당연히 함수의 결과값이 timeoutId로 들어가는줄알았는데 이건왜 그렇게되나요??
가급적 디자이너를 모시고 싶어하구요 ㅎ 조건없리 신청순입니다~~
삭제된 메시지입니다.
아니에요 그냥 생성되어 있는 개수(?)로 id가 만들어져서 부여됩니다
아 콜백함수니까
제가 질문자체를잘못했네요
콜백함수반환값이 timeoutId로 가는건아니니까..
제가 이해한게맞을까요??
네
감사합니다!!
단순히 피드만 띄우는 용도라면 메타 앱 검수 및 토큰을 발급받지 않아도 됩니다. 인스타그램에서 Embed 를 클릭하면 나오는 html 텍스트가 있을 텐데, //instagram.com/embed.js 를 정상적으로 불러왔다면, 이 부분이 인스타그램 피드로 치환이 됩니다. 저희는 데드라인 안에 원래 페이스북 기능을 사용하지 않았던 터라 메타 앱 검수를 받을 여력이 되지 않아서 이렇게 우회적으로 처리했었습니다.
한번 해보겠습니다 감사합니다!!
저는 여태 리액트 렌더링과 브라우저 렌더링이 같은 줄 알았습니다..ㅎㅎ 여러분은 알고 계셨나요? 해당 내용을 글로 써봤습니다! 틀린 내용이 있다면 알려주시면 감사하겠습니다 🥹 https://onlydev.tistory.com/147
글좋네요.. 저도헷갈렸는데 감사합니다
vintz님 다름 아니라 블로그내에 레이아웃은 어떤 블로그를 참고해서 배치하시나용 저도 기술블로그(?)같은 공부한 내용 위주로 블로그를 티스토리에서 작성하고 있는데 너무 못생겨서요ㅜㅜ
레이아웃은 티스토리 Book Club 스킨 그대로 사용하고 있습니다! 스타일은 한번에 다 하기 보다는 가끔 예쁜 블로그 보면 제 블로그에 적용해보고 괜찮다 싶으면 그대로 넣었어요! 처음엔 엄청 밋밋했는데 조금씩 수정하다보니 이제는 조금 나아진듯 합니다. ㅎㅎ
or 잘 읽히는 가독성 좋은 사이트 참고해서 폰트 사이즈, 컬러 등을 적용했습니다.
아하 감사합니다!!
https://wonny.space/writing https://evan-moon.github.io/ https://jbee.io/ https://so-so.dev/ 개인적으로 위 블로그들이 가독성이 좋아요! 참고하시면 좋을 것 같아요.
오늘부터 참고해서 이쁜 블로그 만들어야겠습니다 감사합니다!!!
응원하는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
응원하는 튜브님!! 반갑습니다 어서오세요 :)
앗 안녕하세요 :)
환영합니다~~ 여기는 프론트엔드 하면서 혹은 개발하면서 궁금해진 것들을 서로 물어보고 또 답하면서 함께 성장하는 공간입니다~~ 무엇이든 편하게 글 남겨주세요!!! 정말 뭐든지 좋아요 ㅎ
환영해주셔서 감사합니다 :) 저는 디자이너이지만 구글 스프린트 글 보다가 이렇게 흘러들어왔네요. 많이 배우겠습니다! 잘 부탁드립니다🙂
와!! 감사합니다 :) 여기 디자이너 분이 아주 소수 계시지만 개발 - 디자인 협업에 대해서도 제가 아주 관심이 많기 때문에 "왜 개발자들이 이러나?? 왜 안된다고 할까? 왜 개발자들은 맨날 디자인을 다르게 만들어주고 발견하지 못할까?" 등 개발자들에게 하고 싶은 얘기나 질문등도 해주시면 언제든 답변 드리겠습니다
저도 입사직무는 디자이너에요.^^ㅎㅎ 반갑습니다~~
이모티콘 우와 넵 감사합니다!!
다른 분들도 디자이너에게 궁금한 것들도 많이 물어봐주세요! 프론트엔드라면 디자이너와의 협업은 필수과목인데 알려주는곳이 없기 때문에 많은 정보 교환이 되었으면 좋겠습니다 ㅎ
좋아요..! 전 프론트엔드 개발자지만.. 회사에 디자이너가 없어서.. 디자이너와 협엽을 해본적이 없어서.. 먼미래가 두려웠거든요 ㅎㅎ
아니 가까울 미래인가요 ㅎㅎ
솔님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 솔님~~ 반갑습니다 :)
안녕하세요! 😃😃
네~ 어서오세요!! 환영합니다. ㅎ 여기는 함께 물어보고 또 알려주면서 함께 성장하고자 만든 공간입니다!! 다른 사람에게 궁금한 이야기, 오늘 내가 알게 된 지식, 함께 읽으면 좋을 자료등을 편하게 공유해보세요 :)
태오님 ! 혹시 웹에서 three.js 사용한 3D 의 비전에 대해서는 어떻게 생각하시나요 ??
메타버스가 뜬다하더라도 웹에서는 주류가 되긴 힘들거라고 생각합니다 웹의 강점이 빨리 만들 수 있고 데이터의 유통과 시각화에 있는데다가 3d가 브라우저의 주류 기술은 아직 아니기 때문입니다.
아직은 브랜드용 이미지 재고나 제품등의 실사 렌더링 정도로 사용처를 찾아보는 중이며 보편적인 기술은 아니긴 합니다 to가 없지는 않지만 많지도 않지요
3d 카메라 등이 보편화되고 3d에셋을 만는 것이 보편적인 컨텐츠가 되는 시점부터 본격적이 되지 않을까 생각을 해봅니다
그래도 VR이나 웹 전시, 메타버스등이 차세대 키워드이고 3d이니까 할 수 있는 것들은 늘어날테고 웹은 좋은 진입점이기에 언젠가는 주류가 될 수 있겠지만 아직은 웹에서 데이터가 3d여야 하는 킬러 컨텐츠가 없기는 한 실정이긴 합니다
그래도 좋아한다면 하면 좋지 않을까요? to가 작다는 것은 또 희소성이 있다는 얘기니까요 ㅎ
뜨고 나서 시작하면 늦는 거긴 하니까요 ^^;;
다른 취준생분들에게 질문을 좀 드리고 싶은데 팀프로젝트를 혹시 어디서들 구하시나요?? 기획부터 배포까지 제대로 경험해본적이 없는것같아서 팀프로젝트 하면서 공부하고 싶은데 마땅히 구하기가 쉽지않네요
최근 디자이너 백엔드와같이 프로젝트하는것 같던데 전 참여는 안했지만 이런곳도 괜찮은거같아요
저는 제가 만들어서 모집하고 있습니당
Dash라는 앱? 써봤는데 좋은것 같네요~ㅎㅎ
VS code에서 확장 프로그램에 있습니다~
구글에 검색하는것 귀찮으면 이거로 바로바로 찾을수 잇을것 같네요
저는 당근을 통해 참여의지가 높은 분들이나 취준생만(직장인X) 모아서 스터디만들어서 이번달 말에는 프로젝트 할 예정이에요
이모티콘
취준생분들끼리 한번 팀 프로젝트 해보고 싶으신 분 있나요??
🙋♂️
🙋🏻♀️
🙋🏻♀️
조심스럽게 손들어봅니다
직장인도 하고싶습니다...
🙋
저듀..
제가 스프린트를 계속 운영을 하고 있긴한데 육아를 하는 관계로 밤 11시에 하는 것이 저도 부담이지만 참가자분들도 다들 힘들어 하셔서
차라리 시간대가 여유가 있는 취준생 분들만 상대로 오전반을 한번 해볼까 하는 생각을 해봤어요
오오
제가 주로 재택근무를 하기 때문에 상대적으로 9시~10시까지는 여유가 있는 편이라
오전반 열리면 참여할 용의가 가득합니다
🙊
이모티콘
이모티콘
이모티콘
🙋♀️
직장인도 하고싶습니다22 🥹
오전 9시 ~ 10시 스크럼에 2주간의 스프린트 취준생반을 한번 모집해봅니다. - 다들 취준생이신만큼 2주짜리 스프린트를 진행해보려고 합니다. - 스프린트인 만큼 매일 최소 1시간의 온라인 미팅 시간 확보는 꼭 필요합니다. - 팀 프로젝트인 만큼 중도에 포기 하지 않을 수 있어야 합니다. https://docs.google.com/spreadsheets/d/1ftD8ePjSQ_cVhJhjpF8FR4Rz6lmLS5A4ijhIAfYu9YE/edit#gid=0
다른 스프린트에서는 제가 3시간씩 투자했지만 이번에는 제가 시간을 많이 할애하지는 못할것 같고 가이드 위주로 하고 여러분들끼리 시간을 많이 가지는 방식으로 해보려고 합니다. 저에게도 새로운 방식이라서 일좀의 실험(?)이 되겠지만 관심있으신 분들은 많은 참여 부탁드립니다.
글이 안써지네여 ㅠㅠ 웹으로 안되나봐요
더블클릭하고 작성하면 안 써지시나요?
?? 편집권한은 다 열려있을텐데요? 잠시만요
아~ 모바일 웹은 안되네요~ 웹이나 모바일 앱으로 오시면 될것 같아요
인원수는 얼마나 뽑나요 테오님 ㅠㅠ 헬스하느라 지금 봤습니다
폰은 모바일 지원 안하나 봅니다 ㅠ
한팀에 Max는 8명정도로 생각하고 있어요~
지금 당장 뛰어가서 신청 넣겠습니다
혹시 자격 요건은 있나요?
이번거는 전에 하던 스프린트와 달리 취준생들처럼 시간을 많이 투자할 수 있는 분들끼리 자리를 마련하고자 하는 게 더 큽니다. 2주간 중도 포기 안 할 수 있고 오전 9시~10시에 시간을 낼 수 있는 분을 원해요
글자가 안써지네요 흑
6월중에 다시 스프린트 8기는 진행할거라서 요건 살짝 번외로 봐주세요
넵! 알겠습니다
모바일은 앱을 설치해야 등록이 가능합니다. PC웹이나 모바일 앱이 필요합니다.
테오님 항상 감사드립니다 이번에는 참여를 못할거 같아서 6월 스프린트 너무 기대가 됩니다! 꼭 참여하고싶어요
네! 감사합니다~ 정기적으로는 아니겠지만 꾸준히는 하려고 합니다 가능할때 할 수 있을때 해주세요 ㅎ
단무지님이 나갔습니다.
앗 혹시 마감인가요 ???
음... 그럴려고 했는데요... 일단 받아보고 2팀도 생각을 해봐야겠네요
감사합니다!!
시작은 5/10부터 하려고 합니다~ 일정과 시간은 올려주신 메일로 공지를 드릴게요~ 팀은 2팀으로 나눠서 진행할 예정이니 함께 하고픈 사람은 추가로 올려주세요 :) 새로운 방식이라 어떻게 될지는 모르겠지만 잘 구상해서 좋은 추억을 만들 수 있도록 해보겠습니다~~
감사합니다 테오님!!!!
네~ 감사합니다~ 님자는 안 붙여도 되요 ㅎ
넵!!
톡게시판 '공지': 오전 9시 ~ 10시 스크럼에 2주간의 스프린트 취준생반을 한번 모집해봅니다. - 다들 취준생이신만큼 2주짜리 스프린트를 진행해보려고 합니다. - 스프린트인 만큼 매일 최소 1시간의 온라인 미팅 시간 확보는 꼭 필요합니다. - 팀 프로젝트인 만큼 중도에 포기 하지 않을 수 있어야 합니다. https://docs.google.com/spreadsheets/d/1ftD8ePjSQ_cVhJhjpF8FR4Rz6lmLS5A4ijhIAfYu9YE/edit#gid=0
후후 너무 기대됩니다 우하하하하
ㅋㅋㅋㅋ테오 추진력👍🏻👍🏻
궁시렁 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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
춘식님~ 으쓱으쓱 어피치님!! 안녕하세요!! 모두 모두 환영합니다 :)
테오 취준생 스프린트 혹시 오전 시간대 저 시간으로 확정인가요?
네~ 일단 오전 시간대에 제가 가이드와 과제를 던져주면 조별로 각자 진행을 해오면 중간검토를 해주는 방향으로 진행해보려고 합니다
시간은 나중에 다시 팀이 짜여지면 생각해볼건데요~ 팀끼리 모이는 시간은 따로 정해서 알아서 진행할 수 있도록 할 생각이구요 시간대는 제 일정과 참가자들의 일정에 따라 유동적으로 변할거라고 생각해요
8명 인원이 초과되었는데 다음기수 노려봐야 할까요??
2팀으로 진행할 생각이구요 시간적 여유가 되는 취준생이라면 한번 신청해보세요
네 좋아요~ 좋은기회일거같아서 일정 맞춰 참여해보겠습니다!
답변 감사합니다~~
아이콘을 나타낼때 png와 svg 중 고르라면 svg가 더 효율적인가요?
재미로 보는 자바스크립트 퀴즈 https://pitayan.com/posts/8-javascript-quiz-that-may-confuse-you/
네!
감사합니다!
안녕하세요! 너무 좋은 글을 발견해서 공유합니다. "돌이켜보자면, '받아들임'이 중요한 포인트인 것 같다. 회사 생활하면서 갈등은 상대방을 향한 의심과 경계가 내면에 깔려 있고 표현 여부와 관계없이 마음 속에 결국은 ‘내가 옳다’라고 믿으며 나의 스탠스를 유지했다는 것이다." https://www.wanted.co.kr/events/22_03_s07_b01
React에서 페이지 전환 시 스크롤 최상단에 올리기위해서 혹시 무슨 방법들 쓰시나요?
커스텀 훅 만들어서
window.scrollTo였나
이런거썼던거같네용..
라우팅에 페이지 변환시 실행되도록 해놨어요
컴포넌트 언마운트시 해주몉
저두 scrollTo 로 해결햇던더 같아요
혹시 scrollTo 활용하시면서 스크롤 올라갔다가 다시 이전 스크롤 위치로 복귀하는 경험하신분 있나요?
모든 페이지에서 다 그래요?
흠넵 그렇네요..
어디서 scrollTo 해주고 계신가요?
따로 훅으로 빼서 Router 쪽에 걸었습니다!
페이지컴포넌트에 걸어도 똑같네용
이모티콘 좋은 토요일 저녁 되세요 :)
리듬타는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
톡게시판 '투표 취소': 당신은 어떤 상태인가요?
이모티콘 주말 마무리 잘하셔요!! :)
스터디윗미 플랫폼 중에 타임트레킹 기능이 있는것 중에 쓸만한 서비스가 있을까요~? 구르미 캠스터디 쓰고 있는데, 태블릿 UI에서 안되는 것도 많고, 채팅 누적도 안되고 불편한게 많아서요 ㅠㅠ
https://campaign.naver.com/whaleonstudy/?section=event 한번도 써보진 않았지만 요것도 있긴 하더라구요!
오! 저 잘 쓰고 있어요!
좋은 아침입니다🥰 혹시 시간은 언제 정할 수 있나요?
안 그래도 오늘 단체 메일을 작성하려고 했습니다! 내일은 일단 공지가 나간대로 아침 9시에 게더타운에 모여서 10시까지 어떻게 진행할지 팀을 나누고 진행방식을 알려주고 과제를 내주는 식으로 진행을 할 예정입니다 . 수목은 개인적인 사정으로 시간이 살짝 조정될 수 있는데 아직 확정이 아니라서 내일 다 같이 모였을때 최종 시간을 정해보려고 합니다
더 세부적인 내용은 메일을 통해서 공지하도록 하겠습니다 :)
이번 스프린트 취준생편에 참가해주신 10분에게 메일을 전달했습니다. 신청을 했으나 메일을 전달받지 못한 분들은 저에게 알려주시면 다시 한번 전달을 드리도록 하겠습니다. 내일 뵐게요!!
안녕하세요, 선배님들. 혹시 한서비스 내에서 서비스의 고객별로 각각 다른 url로 이용하도록 하는 방식은 어떤 방식인지요.. 가령 B2B 협업 서비스 같은경우 url이 "https://user-name.myservice.com" 이런식으로 사용자에게 알려주는데 어떤식으로 접근해야 할지 궁금합니다.
dynamic url 을 말씀하시는 걸까요?
제가 생각하는게 그게 맞을지 모르겠습니다.
저희 서비스를 이용하는 고객 단위 별로 각각의 개별 url을 제공해주는 방식을 생각하고 있습니다.
다이나믹 맞으실듯
요론느낌 이실까요?
아 이 방식이 아니라, baseUrl 부분이 동적으로
설정되어야 합니다.
노션처럼요
notion.so/:username/myservice.com
이렇게요?
음 네 노션은 userteamname.notion.site 이런식으로 되어 있는데요. 저도 위와 같은 방식으로 생각하고 있습니다.
아 노션에서 share 눌렀을 떄 보이는 url 말씀하시는걸까요?
아 다르군요..
이모티콘 해는 뜨뜻하고, 바람은 찬 월요일 입니다!! 출근 잘하셨나요?!!!
오늘도 커피로 하루를 시작합니다 ㅎㅎ ☕️
pyscript라는게 나왔던데 앞으로 어떻게 될거같으신가요 여러분?? https://velog.io/@taekkim/PyScript-%EB%9E%80
아직은 알파단계라고합니다
예전에 한번 봤었는데! 신기하더라구요ㅋㅋㅋ
코틀린으로 하는것도있대요! 안드하는 친구가 빨리 코틀린스크립트 상용됐으면 좋겠다고 하던데 ㅋㅋ
웹 어셈블리도 예전부터 있었는데
많이 사용은 안되는거 같아서
Pyscript도 비슷하지 않을까요
일단 npm에 등록되어있는 라이브러리 사용이 어려울거같아서...
그렇군요
답변해주셔서 감사합니다!!
상용화가 잘되어서 Django와 같이 쓰면 Node와 고려해야겠군요
next.js에서 특정 페이지를 ssr 설정을 위해 getServerSideProps를 사용하려고 합니다. 근데 이 페이지가 다이나믹 라우팅으로 라우팅이 되어있으면 getStaticPath도 같이 설정해주는게 맞는건가요?
getStaticPath 는 getStaticProps인가 그거랑 같이 쓰는거 아닌가요
아뇨 그냥 현재 페이지에서의 url입니다. 노션 앱이 아니라 브라우저로 보았을 때 보여지는 url 입니다 ㅎㅎ
그렇긴한데 StaticPath가 다이나믹 라우팅때 사용하는 걸로 알고 있어서 헷갈리네요 ㅠ
다이나믹 라우팅의 params 정보는 어차피 getServerSideProps ctx 나… 다른거 통해서 알 수 있을거에요. 안 사용해도 됩니당
아 그렇군요 ctx나 다른 부분을 좀 더 찾아봐야겠네요 감사합니다!
ctx.req인가.. 그냥 req인가 넘어올텐데 거기 있을겁니당
오 신선하네요
ctx.params에 있네요 감사합니다!
하트뿅뿅 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 하트뿅뿅 라이언님!! 반갑습니다 :)
안녕하세요! ^^
테오님 글 읽다가 너무 좋아서 참여하게 되었습니다.
와!' 감사합니다!! 어서오세요! 여기는 프론트엔드에서 개발에서
궁금한게 있을때 언제든 물어보고 또 답해주면서 함께 성장하고자 하는 공간입니다 ㅎ 언제든 궁금한게 생기면 편하게 글 남겨주세요 ㅎ
네 감사합니다!
혹시 리액트랑 리액트.js는 다른건가요...? 차이가 있다면 대표적으로 어떤게 있나요,,??
똑같아요
a.k.a 입니다
사진
아하 .. 참고하겠습니다 감사합니다!!
혹시 nuxt로 data-n-head="ssr"이 뜨도록 하는 방법이 따로 있을까요? 두 가지 프로젝트를 배포했는데 어느 프로젝트에선 data-n-head="1" 이렇게 보이고 어느 프로젝트에선 data-n-head="ssr" 요렇게 보이네요....
nextjs에서 ssg에 useQuery를 통해 api를 요청하고 받아오면 결국 csr로 동작하는건가요?
SSG로 정적 페이지를 받아오고 useQuery로 데이터를 받아와서 부분적으로 렌더링이 바뀐다는 말씀이신가요?
네 맞습니다!
그럼 제 생각엔 CSR with Prerendering이 아닐까요?
아 그렇군요 이게 ssr을 찾아보니 ssr이 아닌 csr로 위임하는 경우도 있다고 하는데
그러한 경우로 구현을 해보려고 해서 생각한게 ssg로 정적 페이지 받아오고 useQuery로 데이터를 받는걸로 생각했습니다
음..이건 아닌가봐요 프엔님 CSR with Prerendering은 SPA인데 스켈레톤 같은 로딩화면만 빌드 타임에 스태틱 HTML로 만드는 거라고 하네요!
오 그렇군요 저도 자세히 알아봐야겠네요! 감사합니다!
도움이 못돼서 아쉽네요..ㅠ 저도 더 알아봐야겠어요! SSR에서 CSR로 위임한다는건 렌더링 주체를 클라이언트로 위임한다는 뜻같은데..도메인이 사용자와 상호작용이 많은 웹 앱인걸까요?
Ssg되는 부분은 html이 생성되고 자바스크립트로 처리될 부분은 자바스크립트로 처리될 거 같아요
넵 맞습니다! 사용자와 상호작용이 많을 경우 ssr보다는 csr로 위임하는게 더 좋다고 나와있더라구요!
그렇군요 그러면 제가 의도한대로는 작동이 될 것 같네요 감사합니다!
삭제된 메시지입니다.
혹시 jest testEnvironment 설정 시에 jsdom과 jest-environment-jsdom의 차이점 아시는 분계실까요??
여러분..노트북을 구매해야해서 알아봤는데 괜찮은지 한번만 봐주세요 html,자바 처음 공부하는 입장이라 오버스펙 느낌 낭낭한데...살때 좋은거 살까 싶어서요 22년 그램17인치 윈도우11 i7-11세대 메모리 16 1TB 가격 165에서 흥정 가능인 것 같은데 박스없고, 데스트톱으로 가서 판매한다고 합니당.. 어떤편인가요?
그래픽은요?!
잠시만요 캡쳐해올게요
근데 뭐 일단 성능은 차고넘치는 것 같은데.. 윈도우를 구매하시려는 이유가 있으세요?
사진
(사실 개발자방에서 물어보시면 맥북 사라고 하실 분들이 꽤 많을 거 같긴 해요)
맥은 이것저것 설정하다가 지칠 것 같아서요 제가 프론트랑 백엔드 둘다 하는 국비 갈 예정이라..
아 그런가용ㅜㅜ
근데 개발 계속 하실 거면 윈도우 가시면 진짜 많이 지칠 수 있어요
엇..그럴 수도 있군요
그램이야 뭐 이미 증명되었고 스펙만봐도 부족할거없는거같은데
현업가면 막 금융권 이런거 빡세게 걸려있지 않은 이상 다 맥 쓰기도 하구요
165만원이면.. M1 맥북에어 cto는 구매가능할거같은데
저도 윈도우 쓰다 맥으로 갈아탄건데 개발할 때 훨씬 편하더라구요
초기세팅은 맥이나 윈도우나 복잡한건 마찬가지라서요 ㅎ
근데 이게 또 직접 느껴봐야하는거라.. 저도 윈도우 쓸때는 굳이 맥을 왜쓰지 생각했었는데..
으아..그렇군요
노트북사서 개발만 할꺼면 맥사세여
근데 개발말고 다른것도 필요하면 윈도우사세여
저도 윈도우 쓰다가 맥 쓰는데 생산성이 훨씬 좋아여, 개발용은 윈도우보다 맥 한표 !!
165만원이면 M1 충분히 구매가능해요
윈도우 사도 wsl 이나 리눅스 듀얼부팅이라는 선택지가 있긴 하지만
맥이 훨 낫다고 봐요
여기 계신 현업개발자 분들의 의견들을 믿어보세요 ㅋㅋ
저도 생산성 저는 특히 터미널이 너무 크더라구요
감사합니다ㅜㅜ 열심히 고민하고 찾아보겠습니다.. 다들 너무 감사해용
게임하거나 금융권 사이트 등아니면 맥 추천이요.
맥이라서가 아니라 애플이 하드웨어가 좋아서... 폰도 5년써도 멀쩡하고.. 삼성 폰이나 노트북도 그렇게 오래는 사용 못하더라구요.. os최적화 때문인지
감사합니다!
저 질문있는데 form의 event중에서 submit이벤트가 발생할때 궁금한게있는데요 저는 submit하는순간의 input에담긴 내용이뭔지 알아내려고 form.addEventListener('submit',(event)=>{ event.preventDefault() console.log(event.target.value) } 이런식으로코드를짜면 submit되는순간 input에 입력된값이 출력될줄알았는데 input에 해당하는 출력값이 undefined가 나옵니다. 혹시 왜그럴까요? event.target.value는 input이벤트에서만사용이되나요?
근데 가격이 좀 부담될 수고 있고 초창기 개발에는 윈도우로 해도 괜찮다고 봅니다! 윈도우랑 달라 적응하기 처음에 어려워요. 나중에 좋은 맥우로 갈아 타혀오 될거 같아요
그냥 M1 기준으로는 요즘은 오히려 맥북이 싸서 ㅋㅋㅋㅋㅋ 적응하기 어려울 수 있다는 건 공감합니다! 그래도 주변사람들 보면 기계랑 좀 친숙하다면 일주일 안으로 적응하더라구요
음...중고로 윈도우 노트북 하나 구해서 공부하고 취업하면 다들 추천해주시는 맥!!으로 넘어가야겠어요
윈도우든 맥이든 예산에서 살수 있는 가장 좋은거 사서 개발공부 열심히 한다음에 맥북 사주는 회사 입사하는거도 방법이라 봅니다
오!!ㅋㅋㅋㅋ알파카님 감사합니다
요즘 윈도우도 파워쉘 쓰면 그래도 맥북 터미널 명령어도 써먹을수 있고 그렇습니다.
맞아요 저도 회사에서 파워쉘 두달 써봤어요
뭐 맥이 더 개발하는데 편하다는것은 부정은 못하겠습니다만 ㅠ 잘하는 사람은 os 를 가리지 않습니다..
다들 해주신 조언 잘 참고하겠습니다 :)
event.target.value 말고 event.target 를 한번 콘솔에 찍어보시고 나서 HTML form 문서 한번 읽어보셔요!
아보니까 event.target이 input인줄알았는데 form이였네요 그래서 form.value하니까 undefined가나온거고.. 감사합니다
윈도우 사용하시면 파워쉘대신 git bash도 좋은 대안이 될 수 있어요~
new Formdata(e.target) 으로 넣어서 폼의 데이터들을.볼수도있어요
저두 git bash 사용 중입니다
저는 윈도우에서 wsl로 우분투 사용하고 있습니다. 우분투 쓰는거랑 동일해서 불편함이 없네요.
오.. 감사합니다
윈도우에서 도커쓰는거 불편하지 않나요 ㅠ 메모리 계속 커져서 불편하더라구여 ..그래서 그냥 집에 있는 조그마한 서버 가상화 시켜버렸어요 ㅋㅋ
보통 유틸 라이브러리라고 하면 어떤 것들을 의미하는 걸까요?
혹시 자바스크립트에서 JSON 형식의 객체를 보여주려고 할 때 JSON.stringify(object)를 하면 개행도 안된 보기 불편한 문자열로 보이는데, 이를 깔끔하게 객체 형태로 볼 수 있는 메서드가 있을까요??
JSON.parse 찾으시는걸까요?
아니면 stringify했을때 개행같은 문자가 빠졌으면 좋겠다는 걸까요?
아 parse를 까먹고 있었네요,, 감사합니다
추가 파라미터를 넣는 식으로도 되긴돼요 예를들어 JSON.stringify(obj, null, 2)
여러분은 지금보다 작은 기업에서 연락이오면 가실건가요..?
연봉과 거기회사에 누가 있느냐에 따라 다를거같아요
그리고 회사의 BM이나 등등 다양한 요소를 볼거같습니다
사진
결국 이 방법으로 했습니다 JSON.stringify(object, null, ‘\t’)로 하면 잘 보여지네요
Json.parse는 반환값이 object로 나와서 출력이 안되더라구요
응원하는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 응원하는 튜브님~~ 반갑습니다 :)
안녕하세요! 반갑습니다 :)
어서오세요~ 여기는 프론트엔드나 개발에 대해서 궁금한것들에대해서 서로 질문하고 답변하면서 함께 성장하고자 하는 공간입니다~ 언제든 궁금한게 생기면 편하게 글 남겨주세여 :)
도경잉님이 나갔습니다.
https://blog.naver.com/gwanak_gu/222725673296 관악구 사시는 분들 돈 받으세요!!
내일 스프린트 하기 전에 테오 스프린트 7기 회고 봤는데, 어떻게 이걸 다 글로 작성하실 생각을 하셨는지 정말 대단하시네요 👍 함께 했던 사람들이 행복했을 거 같아요
안녕하세요 여러분! 이번에 좋은 기회를 통해 운영 중인 서비스 Hola와 유료 강의 플랫폼 ‘Udemy’와 협업하게 되어 공유드려요..! 😊 Hola! 사이트를 통해 스터디를 모집하면 유데미에서 제공하는 50여개의 강의를 무료로 수강하실 수 있는 프로모션입니다 자세한 사항은 하기 노션 페이지를 통해 확인 부탁드립니다 :) 링크: https://sturdy-dugout-e49.notion.site/Udemy-X-Hola-Study-with-Me-5299159dd78e424181c8cdbf7d5be46c 그럼, 모두 안온한 저녁 보내세요! 감사합니다 🙇🏻♀️
@유용태 (teo.yu) 님 그때 요청주셨던 스벨트도 추가했습니다ㅋㅋㅋ 많이 늦어졌네용
L님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
@Hola
혹시 프로모션 기간은 어떻게 되나요?
혹시 css애니메이션은 다들 어떻게 공부하시나요? 레이아웃짜서 클론코딩식으로 특정사이트배끼는건 이제 어느정도할수있을거같은데 애니메이션꾸미는건 실력이너무부족합니다..
css는 실무에서 ...
저도 css 애니메이션 공부하고 싶은데 어렵더라구요 ㅠ
오늘부터 5월22일까지 진행 예정 입니다 :)
확인했습니다 감사합니다
감사합니다 :)
예나님~~ 반갑습니다 어서오세요 :)
이모티콘 안녕하세요! 리액트로 취업 준비하던 중에 테오님 오픈채팅방 명성을 듣고 참여하게 되었습니다 환영 감사드리고 잘 부탁드립니다~
명성이요?! ㅋㅋ 감사합니다 ;) 여기는 서로 프론트엔드나 개발하면서 궁금한거 서로 물어보면서 같이 성장하고자 하는 공간입니다~ 언제든 편하게 글 남겨주세요 ㅎ
넵! 이런 좋은 공간을 알게 되어 너무 기뻐요 저처럼 취업준비하시는 분들을 비롯하여 함께 성장해나갈 수 있으면 좋겠습니다 감사합니다! 😄
몸은 의자에 경건하게 앉아있으니 당연히 마음도 차분할거라 생각했는데 제가 마음이 급하다는 사실을 알았네요… 닥치는 문제해결에 급급하고 시간에 쫓기니 바로 작동하는 코드만 복붙하려고 하고 글도 제대로 안 읽으려고 하는데 이거 병 고치는 약 없나요ㅠ
누군가와 페어를 해보세요 ㅎ
공감입니다...........가끔 생각해요... 나 난독증있나....?
"나 난독증있나...?" 이거 진짜요...
혹시 지속적으로 페이 프로그래밍 하시는 분 계신가요?
* 페이 -> 페어
저만 그런게 아니네요ㅠ
ㅠㅠ 페어할 사람이 없어서 외롭네유
그럴땐 운동이든 잠깐 멍때리더나 바람 쐬고 오면 실수가 보이더라구요
이거 진짜 맞는 것 같아요
의식적으로 아 안풀리네 하면 딴짓하다가 오면
갑자기 일이 풀리기도 하고..
디스코드 음성채널방을 이용해보세요!
저여러분
사진
제상황이딱이런데… 저만이런가요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
님만 그런거라면 저 짤이 유머일리가 없죠 ㅋㅋ
저렇게 하는게 더 대단한 공연 아닌가요? ㅋㅋ 일단 섰잖아요!!
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ맞아요
사실 너무 공감이 갑니다~ 마음이 급한만큼 빨리 가지 않는 다는 사실을 깨닫는다는 건 참 어려운거 같아요~ 약속에 늦어 지하철을 타면 빨리 가려는 마음만큼 빨리 가지는게 아닌걸 알면서도 마음이 쉽게 그렇게 안되죠
개발은 창의적인 일이고 내가 한만큼 나오는 것 같아서 서두르면 많이 할 것 같지만 한 이슈에 들어가는 충분한 시간이라는 것은 사실 있는 거라서 내가 빨리 가던 천천히 가던 그 시간에 수렴합니다
한번은 언젠가 작정하고 천천히 느긋하게 이래도 되나 싶도록 일해보세요(미루는 거 아님 주의!) 생각보다 큰 차이 없을거에요
감사합니다 …
혹시 다른분들은 스트레스를 어떻게 푸시나요..? 취미 소개도 좋습니다 ㅠㅠ
저는 이어폰 꽃고 달리기요!
너무 재밌네요
회사에 현타가와서 개발이 싫어질려고 하면 회사를 그만두는게 맞는거겠죠..? 조금 돌아가더라도요
저는 헬스용!!
팬더가 죽순 먹는 영상 보거나 원숭이가 바나나 먹는 영상 봐요
저도 운동 추천해요. 땀흘리고 나면 다시 정신이 맑아져서.
다들 운동을 많이 하시는군요..!
저도 운동이요 ~
전 피아노..
핼스에 빠지면 운동 > 일 입니다 ㅋㅋㅋㅋ
매일 운동하려고 일어나는..
ㅋㅋㅋㅋㅋㅋㅋ뭐라도 좀 시작해봐야겠넹 ㅛ ㅠ
네요 ㅠ
악기 나와서 생각났는데 전에 칼림바도 한참 똥땅거렸어요! 손에 그냥 어디든 갖고 다니면서 할 수 있어서 좋았는데 유튜브에 그냥 하시는 분들 음악만 들어도 좋아요 오르골 같고ㅎㅎ
저는 화분을 키웁니당
저는 먹는거! 인생은 먹으려고 사는 거죠
오 그럼 운동 잘안된 날은 일로 스트레스를 푸나요ㅋ
칼림바는 처음 듣네요 !
삭제된 메시지입니다.
혹시 네카라쿠배에서는 recoil 폴더 스트럭쳐를 어떻게 쓰는지 아시는 분 계실까요?
이런 악기에요
아 저걸 칼림바라고 하는군요 몇번 봤었는데!
혹시 이야기 나온김에 잡생각이 많이 들때 날려버는 방법이 계신가용 여러분 ..ㅠㅠ
저는 글을 쓰면 생각이 쓱 사라져요
저는 동료와 수다를 떨거나 달리기 그리고 혼자서 녹음 켜고 말하기 이런거 합니다
맞아요 저도요!
그래서 저는 저에게 편지 쓰는 걸 합니다☺️
오 꿀팁이네요
녹음기켜고 말하기..
한 2년 정도 됐는데 과거를 돌아보면 그때 죽을라 했는데 지나고 보면 별 거 아닌 일이 많아요
오 녹음 켜고 말하기 좋네요
글쓰기 정말 좋은거 같아용 ㅋㅋㅋㅋ 나도 해봐야겟다
우왕
전 떡볶이 먹고 혼코노요 ㅋㅋㅋ
집중해야할 때면 특히 잡생각 많이 나는 이유를 전에 찾아본 적이 있는데요 어딘가에 집중하거나 몰입해야하는 스트레스가 뇌한테는 크게 다가와서 피하려는 습성 때문이래요 지금 처한 현실보다 좀 더 편안해지려고 생각해내기 쉽거나 간편한 것, 인상 깊었던 기억 생각거리를 꺼내는 게 우리가 얘기하는 잡생각의 루트라고 합니당.. (전문적으로는 좌뇌 우뇌 막 설명해줬었는데 기억이ㅜㅜ) 완전히 해결 짠!은 못했지만 저는 잡생각 드는게 내 잘못이 아니라는 걸 인지하고부터 마음이 좀 편해졌습니다
맥주 마시는 분 없으십니까 ㅋㅋ
꿀팁하나알려드립니다.. 어차피 잡생각이라는건 완벽하게 못없애고 이건 무조건 팩트입니다. 그럼 어떻게하냐? 제생각엔 크게 2가지가있는데 하나는 조금씩 집중력을 오리는방법이고 2번째는 그냥 잡생각이드는것자체를 의식안하는거같아요. 전자의경우 솔직히 집중력이 아무리 나빠도 5분은 다 집중할수있잖아요 그럼 5분부터 집중시간갖고 그다음 10분 20분 이런식으로 시간을 늘려보세요 후자는 그냥 잡념노트라고해서 코딩이나 공부하실때 앞에 연습장같은거하나 둬서 잡생각들때마다 잡생각같은거다적어보세요 그럼 잡생각이 그냥 비슷비슷한거만 하는게 대부분인데 그러면 잡념이좀없어질수있어요
잡념 노트 너무 좋네요! 하나 배워갑니다
그렇게 잡념노트는 60권 전집이 되는데...
삼국진가..
명상 하는것도 좋아여!!
불멍이나 물멍
저도 달리기 추천…
씐나는 노래 플리 적어놓고 콘서트 한다 생각하고 막 뛰면 잼뜨라구요
젤리님이 나갔습니다.
이모티콘 하루 마무리 잘하세요...이제 화수목금! 남았슴다!!
이거 진짠거 같아요 지금 너무 공부 많이 해야된다 생각하고 있었어서 잡념이 머리를 지배한거 같아여 ㅋㅋㅋㅋ 생각을 좀 내려놔야겠슴다
아하 잡념노트 메모할게용
혹시..
사진
이 문제는 https로 설정해야만 해결할 수 있는 문제일까요
다른 해결방법은 없는 것일까요?
혹시 요정보가 해결책이 될 수 있을까요?? set-cookie의 경우 access-control-allow-origin에 wildcard는 사용하지 못하고 요청한 도메인이 있어야 한다고 알고있어요
쿠키집어넣을때 secure 속성이 들어가서
자스에서 사용불가능하다는 문구입니다
정확히는 클라이언트에서 사용불가능하다입니다
네넹 그 내용은 발견했는데, 그렇다면 https 바꾸는 게 해결책인데, 혹시 또 다른 해결책을 경험하신 분이 있나 궁금하세요
혹시 자바스크립트로 무한스크롤구현하실때 intersection observe많이쓰시나요?
녜
Intersection observer가 스크롤 이벤트 캐싱, 스로틀링한 것보다 성능이 좋더라구요.
정보감사합니다 이번에한번사용해보려는데 괜찮은자료나 유튜브영상같은게있을까요?
다들어떻게배우셨나요?
https://heropy.blog/2019/10/27/intersection-observer/ 전 여기 글이 제일 이해하기 좋았어요. 그 다음 MDN 글 천천히 읽어보시고 직접 사용해보시는 것을 추천드려요!
정보감사합니다 지금 작업중인 토이플젝에 한번적용해보려는데 쉽지않네요
화이팅입니다 ㅎㅎ 콘솔로그에 entries 찍어보시면서 어떤 변화들이 생기는지 확인해보시고 응용하는 것도 좋아요.
저 여쭤보고싶은게있는데 제가지금 api에있는 정보들이 페이지로구분되서 한화면에 10개씩닌옵니다 이때 스크롤로해서 다음페이지로넘어갈때 interaction observe쓰려는건데 이럴때쓰는거맞나요?
다음 페이지로 넘어가는거면 페이지네이션 방식인가요? 그러면 안 쓰셔도 될거 같은데
보통 무한 스크롤로 스크롤 내려가면서~ 다음 10개 더 불러오는 식이면 써용
아넵 이방식입니다
이방식이면 써도되는거겠죠?
넹
감사용
안녕하세요! SSR에 대해 궁금한 게 있습니다. SSR을 공부하다 보면 '서버에서 HTML을 렌더링한다', '서버에서 미리 그려주기 때문에 브라우저가 그리는 단계가 줄어든다' 라고 표현을 해서 찾아봤어요. 저는 Node.js 환경에서 SSR을하기 때문에 앱 서버가 렌더링까지 할 수 있다고 이해했습니다. (렌더트리 생성까지) 따라서 브라우저는 서버에서 미리 그렸기 때문에 배치와 그리기만 수행하면 되고 사용자가 빠르게 화면을 볼 수 있다고 생각을 했습니다. 그런데 php나 java에서도 SSR이라는 단어를 사용하는 것을 보았는데요..! 이런 경우에는 단어 사용을 다르게 보아야 할까요 아니면 다른 방법으로 서버에서 렌더링을 수행할 수 있는 것인가요?
엥 ssr이 서버가 렌더트리 생성까지 하는 건가요?
덧붙여서 그래서 Next js가 node 환경에서 렌더링을 하기때문에 window 객체를 사용할 때 에러가 나고, 따라서 렌더링이 다 된 후인 useeffect를 사용하는 것으로 알고 있어요..!
저도 그게 궁금해서 찾아보았는데 위와 같이 이해를 했습니다..!
오 혹시 그렇게 이해하시게 된 문서 공유해주실 수 있을까요? 🙏
저는 ssr을 렌더링 준비를 서버에서 끝내고 브라우저에서 렌더링 한다고 이해를 해뒀고, 서버에서 브라우저에서 바로 렌더링이 가능하도록 html파일을 만들어 브라우저에 전달하기 떄문에 브라우저에서는 따로 html 트리를 그리지 않고 바로 렌더링 하는걸로 알고 있거든요..
넵 당연하죠! ㅎㅎ https://helloinyong.tistory.com/320#ref-why-we-care-this https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC%E1%84%8B%E1%85%B3%E1%86%AF-%E1%84%8B%E1%85%AB-%E1%84%8A%E1%85%B3%E1%86%AF%E1%84%81%E1%85%A1
사진
저랑 같은 글을 보셨네요! 그 아래를 보면
사진
그럼 j님은 html 트리라는게 돔 트리까지만을 말씀하신걸까요?
네 저는 DOM까지로 봤어요..
근데 제가 알고 있는것도 어떻게 따져보면 결국 즉시 렌더링을 할 수 있는 파일을 보낸다 -> 렌더트리가 만들어져 있다 로 볼 수 있을거 같아서
그렇군요.. https://ko.reactjs.org/docs/rendering-elements.html 리액트 문서에서도 돔 업데이트를 엘리먼트 렌더링이라고 해서 저도 DOM까지로 봤었는데 SSR 글을 보면서 계속 미리 그린다고 표현을 해서 의문이 생기더라구요
결국 그린다의 주체는 브라우저가 되는거 같고
그리기 위해서는 결국 배치도(렌더 트리)가 필요한거니까 이걸 어디서 작업해주느냐의 차이로 접근해도 되지 않을까요?
오 대박 그러네요 감사합니다!! 🙏
넵 그래서 이제 JS 진영에서의 SSR은 이해를 했는데 php나 java에서도 SSR이 존재했었다..라고 본 적이 있어서 그럼 다른 언어는 어떻게 SSR을 하는거지? 그냥 앱 서버를 통한 동적 사이트 아닌가? 라고 생각을 했어요
SSR은 바로 그릴 수 있도록 배치도를 만ㄷㄹ어 주는 것이고, CSR은 배치도를 브라우저에서 만든다
CSR은 렌더링 과정 자체를 클라이언트에 위임을 해서 HTML 구성까지 전부 브라우저에서 수행을 하지만 'SSR은 어디까지가 렌더링 과정인가'에 대해 고민을 했었습니다
저는 단순히 서버에서 HTML 파일 응답을 받아서 브라우저가 렌더링 해주는줄 알았거든요 ㅠㅠ
그런데 서버에서 계속 미리 그려준다!라고 하길래 찾아봤습니다 ㅎㅎㅎ
둘다 렌더링의 주체는 브라우저가 맞아요!
이모티콘 출근 잘하셨길 바라고! 괜찮은 하루 되길 또 바라겠습니다! 모두 화이팅 입니다!
SSR 하면 어느정도 완성이된 HTML을 내려주는 거니깐 돔트리까지 아니에야?
다만 바로 렌더링해줄 수 있는 파일을 내려주는가 아닌ㄴ가
그 렌더링을 어디까지 해주느냐에 대해 궁금했어요! 실제로 화면에 보여주는 것은 브라우저가 맞지만요
서버가 렌더링을 해준다? 이게 의문이 생겨서요
음..우선 저도 생각을 정리하고 말씀드릴게요!
넵넵!! ㅎㅎ
의견 공유 감사합니다 j님
제가 뒤죽박죽이라 빈츠님께서 답답하실거 같아요ㅠㅠ
csr은 빈 html에서부터 js로 첨부터 그리는거고 ssr은 어느정도 서버쪽에서 js로 html을 만들어서 내려주고 hydration 과정을 통해 브라우저에서 js와 동기화 하는걸로 이해하고 있너용 결국 렌더링은 브라우저가 하는게 아닐지..
전혀 아닙니다 ㅎㅎ 재밌었어요
사실 서버사이드렌더링이니깐 둘다 렌더는 한다고 봐야하는건가
관련 부분 저도 좀 읽어보고 있는데 저는 html까지만 해주는 게 아닌가 싶은 생각이 드네요 ㅋㅋㅋㅋ 저도 생각 정리되고 나서 일리가 있다 싶으면 의견 공유해볼게요
그런데 알고보니 말 그대로 서버사이드렌더링이였던 거죠..! '브라우저 엔진(v8)으로 만들어진 서버쪽 node가 렌더트리까지 생성을 해준다'가 저는 유레카였어요. 그래서 nextjs에서 window 객체를 사용하려하면 에러가 났던 것이죠!
감사합니다!!
저도 궁금한게 서버단에서 HTML 구성까지를 말하는 것인지 아니면 구성 + 렌더트리 생성까지를 의미하는 것인지 궁금합니다
음..저 급 헷갈리는게..
보내주신 글에서
아 아니에요!
저 마저 정리하고 올게요ㅠㅠ
근데 궁금한게 돔트리나 렌더트리가 브라우저 내부적으로 구현되어 있는 자료구조 형태가 아니라 string 형태인가요?
DOM 자체가 상호작용을 하기 위한 도큐먼트 모델을 만든거니까 구현되어 있는 자료구조가 아닐까요?
저는 브라우저 렌더링 과정 글을 더 찾아봐야겠어요..!
객체 형태로 구조가 짜여 있는 것으로 알고 있습니다
렌더트리 생성은 브라우저에서 이루어지는 것이 맞지 않을까요
서버쪽 node가 렌더트리까지 생성했든 안했든 결국 브라우저로 넘어가는건 string 형태의 html이라 브라우저는 돔트리 렌더트리 다 만들고 paint해야 되지 않을까 싶어요
그렇게 생각하신 이유를 알려주실 수 있을까요? 궁금합니다!
음 우선 보내주신 링크 하나에서는 특정 페이지를 요청해서 받아온 첫 번째 리소스 Type이 document이다. 이 document가 무엇일까? 바로 서버 단에서 미리 렌더링 과정을 거쳐서 만들어진 Render Tree 정보를 가진 문서이다. 라고 하고 다른 글에서 보면 CSR에서도 document 타입의 문서가 받아오는데 해당 문서에는 JS로 그려지는 내용이 빠져있다. 라고 하네요. SSR은 HTML이 아닌 무언가 (JS, JSP 등)을 HTML로 파싱하고 DOM으로 만들어서 보내주는 것으로 생각이 듭니다
node 런타임 환경이 브라우저 엔진이라서 가능한 일이 아닐까요? 렌더트리의 구조를 그대로 전해주어서 브라우저는 과정이 줄어들고, paint만 수행하는 것이죠
가 아닐까 생각해봅니다
아..그런데 넘겨주는건 string 형태라고 말씀하셨군요 혹시 참고할만한 글이 있을까요?
그냥 네트워크 탭 열어보면 그렇더라구요
일단 서버에서는 별도의 데이터 없이 css js html 파일들을 내려주는 것 같고.. 그리고 브라우저 엔진과 소통하는 과정이 있을 것 같지가 않아서요
렌더트리는 dom 바뀌면 다시 생성하는거라
url 입력해서 get으로 html파일 요청해서 받아오는게 전부 아닌가요??? 그 이후 html파일을 파싱하는건 브라우저 역할로 알고있었는데
그리고 node 가 v8 기반이라 그게 가능하다 치면, v8을 이용하지 않는 파이어폭스 같은 브라우저는 ssr이 안된다는 이야기인데 그것도 이상하구요
그래서 버추얼 돔이 있고 앱서버가 그 역할을 하는 것이라고 저는 생각했어요
흠..그렇군요
vdom은 자바스크립트 코드로 처리하는 하나의 메커니즘이지 브라우저 동작 원리랑은 관련 없다고 생각해요
아앗 그렇네요 정정 감사드립니다!
넵넵 일단 제 결론은 node는 어떤 방법을 통해서 서버사이드에서 최대한 html을 깔쌈하게 만들어서 주고 브라우저는 ssr이든 csr이든 늘 그랬듯이 html을 받아서 파싱하고 트리 구축하고 paint한다- 라고 생각해요!
감사합니다 파이버님! ㅎㅎ
그 서버사이드에서 깔쌈하게 만들어서 주는 방법에 대해 알고 싶은데 그게 참 어렵네요
제가 서버에서 그려준다라고 생각하게 된 이유가
SSG의 경우 미리보기 탭이
사진
리액트의 경우
사진
Next는
사진
이렇게 떠서 그렇게 생각을 했었어요!
저거 html 안에 들어있는 <style>태그라 저렇게 보이는 거일거예요
리엑트는 html은 빈파일이고 js로 그려서 그런거같아요 넥스트는 html css가 완성돼서 완성된 html 파일을 내려주고요
브라우저는 html tag를 인식해서 그려주기 때문인거 같은데..
사진
이거 제가 만들었던 nextjs 프로젝트인데
<style>태그에 지정된 css는 먹혀서 포지션은 잡아주지만 <link>로 지정된 css는 안먹혀서 input이랑 button이 못생긴 상태 그대로더라구요
파이버님 저거 아주 잠깐 보이는 화면을 캡쳐하신거죠 ?
react는 js를 가지고 컴포넌트를 구성해서 넘겨주는 방식이기 떄문에 브라우저 단에서 js로 된 컴포넌트를 html로 파싱해야하는 단계가 있어서 그런게 아닐까요?
앗 아뇨 계속 저렇게 떠있어요
개발자 도구의
아하 인라인 태그로 스타일을 줘서 그런건가요?
서버에서 받아온 게 잠깐 보이고, 그 사이에 스타일을 입히는 흐름이지 않나요 ?
preview상의 차이 인거죠?
오른쪽에 있는 건 개발자도구 미리보기고 왼쪽에 있는 건 화면이에요!
아아 감사합니다!
포지션은 styled-component 로 먹였고, 인풋이랑 버튼 스타일은 semantic-ui css import한거예요 import 'semantic-ui-css/semantic.min.css';
link로 지정된 태그는 html 받고 또 css 요청해서 가지고와야 제대로 동작해서 그런거 같아요 인라인에 있는건 브라우저가 바로 그린거구
와..정말 인라인 스타일 태그로 먹혀있네요
아마 이건 저 사이트 만든 사람이 css를 html 태그로 안 먹이는 ssg를 택하신 거 같은데
https://overreacted.io/ 여기 개츠비로 돼 있는 ssg 사이트인데 인라인 태그로 스타일 들어가 있어서 네트워크탭 보면 스타일 먹혀 있어요
루트가 __next로 되어있길래 다른건 생각을 못했네요 덕분에 배웠습니다!! 감사합니다
정말이네요 인라인 태그에 있는 스타일만 적용이 되어있군요
스타일 태그도 적용됩니다.
아 ㅎㅎ 맞습니다 스타일 태그 내 코드를 인라인으로 혼용해서 썼네요 감사합니다!
html 안에 있는 css는 적용되고 link로 한번더 네트워크 요청 필요한거는 preview에선 적용 안 되구 그러네여~
와 오늘 많이 배웁니다!! 너무 조아여
저도 너무 재밌었습니다! 하마터면 제 생각에 갇힐뻔 했어요
다들 도움주셔서 감사합니다 ㅎㅎ
안녕하세요, next에서 router.query.id 의 타입이 string | string[] | undefined 인데요. 이 id 값을 request 파라미터에 넣어서 사용하는 케이스가 왕왕 있습니다. 타입을 string으로만 좁혀서 파라미터에 태우고 싶은데 보통 이런 경우 선배님들의 팁이 있을까요..? id를 받는 함수의 파라미터 타입을 string | string [] | undefined 로 하지 않고.. string으로만 받고 싶습니다.. ㅠ
그러면 타입을 string으로 변환할수있게 따로 코드를 짜보면 어떨까요?
const requestParams: {id: string} = { // .. 중략 id: id && id?.toString(), }
요런식으로 접근해보았는데, string[]은 제거를 했지만 음 undefined까지는 제거가 되지 않아 조금 더 깔끔한 팁이 있을까 궁금했습니다 ㅠ
undefined 를 제거 만을 위해 getStaticProps를 사용하는건 과한걸이요?
*과한걸까요?
string으로만 받아도 되는걸까요?
function isString(target: unknown): target is string { return typeof target === 'string'; } function a(b: string | string[]) { if(isString(b)){ } } 이런식으로 쓰면 string 일때만 할 수 있을거 같네용
사진
저라면 router.query.id 의 타입이 string[] | string | undefined 인 건 일단 맞는 거고, 만들 함수는 string 만을 파라미터로 받고 싶은 거니까 router.query.id 를 함수 파라미터로 넘겨줄 때 가드 로직을 만들었을 거 같아요
남행열차 개발자버전이라네요 ㅋㅋ
아하 네 그렇군요!! 포유님이 공유해주신 코드와 함께 참고해서 해보겠습니다 감사해요 두분
저번에 테오가 올렸던 글의 번역 글이 올라와서 공유합니다! 영어라 나중에 읽어야지..했는데 번역 글이 올라왔네요 ㅎㅎ https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EB%84%A4-%EC%8B%9C%EB%8C%80%EC%9D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-1f075bac9995
*올렸던 -> 공유하신
구글 번역으로 좀 보다가 말았었는데 번역팀 고맙네요 ㅎ
혹시 질문하나 드려도 됄까요?
바닐라 js를 사용하여 dom에 직접 접근하여 dom을 변경시키면 모든 dom 노드의 렌더트리를 처음부터 재생성하는가요? 그래서 react를 사용하면 virtual dom하고 비교하여 변경된부분만 dom에 접근하여 변경된 부분의 렌더트리만 재생성하는건가요??
리액트에서 에러 디버깅으로 확인하면 브라우저 웹팩으로 번들링 된 주소로 나오게 됩니당. 이럴 때 리액트 오류 찾아주는 도구 있다고 했는데 아시는분 있나요?
찾으시는게 source map 설정일까요~!?
"모든 dom 노드의 렌더트리" 라고 하셨는데 렌더트리는 한 개인 걸로 알고 있어요!
아 맞네요 ㅠㅎㅎ 감사합니다
바닐라는 렌더트리를 처음부터 다시 구축하고 리액트는 렌더트리의 변경 부분만 수정해주는 건가요 ??
음 어디부터 설명해야 할지 모르겠는데 혹시 리액트가 바닐라보다 성능이 좋다고 알고 계신가요?
일단 결론부터 말씀드리면 리액트는 결국 라이브러리고 100% 바닐라 자바스크립트로 변환되기 때문에 빌드하고 나면 바닐라든 리액트(였던 것)이든 브라우저 입장에서는 똑같이 동작해요
헐… 몰랐어요…바닐라가 더 좋지않나요…? 그래서 성능때문에 일부러 바닐라로 하는 유명한 회사 있다고 들었던 것같은데
에 바닐라가 훨씬 좋죠
앗 제가 말을 이상하게 했네요 ㅋㅋㅋㅋㅋ
아… 의도하신 것과 다르게 이해했습니다
이모티콘 다들 식사 맛있게 하셨길 바라고요! 오후에도 화이팅 입니다!
제가 혹시 정리좀 해서 다시 질문 드려도 됄까여 ??
프론트와 백엔드가 협업을 할 때 백엔드 분께서 api 명세서 작성할 때 처음에는 프론트랑 같이 상의해서 작성을 하나요? 아니면 우선 백엔드가 api 명세서를 작성하고 프론트가 확인해서 수정할 부분있음 요청한 후 맞춰가는식으로 하나요??
타입스크립트내에서 Images focused 여부에 따라 다른 이미지 소스를 넣어주는 코드인데 아래와 같은 에러가 납니다. 이런 경우 타입을 바꿔줘야 할 것 같은데, 직접적으로 Image source 라이브러리에 코드를 건드려서 하는 것은 좋지 않다고 생각하는데 어떤 식으로 해결 해주면 좋을지 아시는 분계실까요? No overload matches this call. Overload (props: ImageProps | Readonly<ImageProps>): Image', gave the following error. Type 'NodeRequire | undefined' is not assignable to type 'ImageSourcePropType'. Type 'undefined' is not assignable to type 'ImageSourcePropType'.
*.d.ts 에서 확장자 타입별로 내부 데이터 프로퍼티를 선언해주는 것을 찾아보세요!
https://stackoverflow.com/questions/51100401/typescript-image-import 요렇게… 비슷한 맥락으로 따라가셔도 되고, 커스텀하게 타입 입혀서 적용하셔도 될거 같아욥
근데 undefined 가 오류인거면 타입을 수정하기보단 내부에 undefined 체크 로직을 넣거나 non-null assertion (!) 을 넣는 게 어떨까요?
이 방법을 사실 해봤으나 유틸로 빼서 문제 생기는건지 잘 해결이 쉽지 않네요
아래 그림과 같이 optinos에서 불러와서 focused 여부에 따라 선택해서 불러오는데 imgae source props가 일치하지 않는 여부의 경우는 어떻게 하면 좋을까요?
사진
사진
아~
당장 간단하게 처리할 수 있는 방법은
react가 라이브러리 이기 때문에 기본 바닐라로 구현하는것보다 성능적으로 뛰어나지 않는다고는 알고있습니다! 제가 생각한 이유는, 첫번째로 라이브러리이기때문에 package를 사용하여 빌드 시간도 더 소모된다고 생각합니다. 두번째로, jsx문법을 js문법으로 변환해주는 과정 때문이라고도 생각합니다! 세번째로, diffing알고리즘을 사용해서 가상돔과 새로 렌더되는 돔과의 비교 알고리즘이 진행되기 때문에 시간 소모가 더 크다고 생각합니다. 위 이유로 기존 바닐라 js를 사용하는게 더욱 성능이 좋다고 생각합니다! 그럼에도 react를 사용하는 이유가 바닐라 js를 사용하여 dom에 접근하여 dom을 변경하게 되면 렌더트리를 재 생성하여 모든 요소들의 reflow 작업부터 새로 시작한다고 알고있습니다! 이 때, 렌더트리를 재 생성한다는게 body에 존재하는 모든 dom노드를 새로 생성하는건지, 아니면 변경된 노드 이하의 노드를 새로 렌더트리를 변경해주는건지 궁금합니다!
타입 단언을 해주시거나, 타입 가드를 쓰시거나, 상단의 ? 를 제외해주시면 될 것 같아요
제네릭을 활용해도 좋겠네요!
앗 마지막줄 혹시 어디서 읽으신 내용인가요?
렌더 트리 재 생성 말씀이실까요??
> 그럼에도 react를 사용하는 이유가 > > 바닐라 js를 사용하여 dom에 접근하여 dom을 변경하게 되면 > 렌더트리를 재 생성하여 모든 요소들의 reflow 작업부터 새로 시작한다고 알고있습니다!
이부분이요!
앗 감사합니다!! 타입단언이 map이라 해주지 못하는 상황인데 optional를 제거해주니 해결되었네요 감사합니다. 선생님 덕분에, d.ts로 타입 손보고 해서 해결하였습니다.
사진
황준일님 블로그에서 읽은 내용이고 위 부분을 통해 그렇게 해석했습니다!
제가 잘못 이해한걸수도있습니다!
아아 저건 vdom에 대한 설명인데요
잠시만요!
사진
저거 테오님 블로그에도 잘 나와 있어요
그래서 등장한게 vdom 이라고 말씀해주셨습니다!
아 ! 네 한번 더 확인해봐야겠네요!
저는 사실 vdom을 통해서 성능 개선을 이끌어냈다 아니면 빨라졌다 라고 표현하는 걸 별로 좋아하진 않아요
생산성이 좋아진거같아요
사실 성능자체는 직접 돔조작이 훨씬빠르다네요
리액트가 유지보수성 생산성을 위해서 뭐 하나 바뀔 때마다 싹다 다시 그리겠다는 엄청난 철학을 들고 나왔고
그러려다 보니까 vdom을 쓰지 않으면 너무 말도 안되게 느려서 vdom을 쓸 수밖에 없었던 거라고 생각해요
100점 만점에 1점 나올 거를 vdom 덕분에 한 70점 정도까지 끌어올린 건데 그걸 vdom 이 성능 개선을 이뤄냈다고 표현하는 게 맞나? 싶더라구요
vdom이 빠르다는건 meme이라는 글을 어디서 읽었던 것 같아요..!
왜 그런지는 아직도 잘 모르지만..🥲
사진
테오 글 캡쳐해왔어요! 바닐라: 스크립트 -> 돔 조작 vdom: 스크립트 -> vdom 조작 -> 돔 조작 진짜 돔 조작이 어마어마하게 많이 일어나지 않는 이상 vdom이 더 느릴 수 밖에 없다- 고 이해하고 있어요
당장 네이티브 API만 사용해도 렌더링 속도는 무조건 실제 돔 조작이 빨라요
solid.js 같은 non-vdom 성능 지표도 확실하구
이모티콘
이 말씀이 바닐라로 spa를 구현해서 해당 컴포넌트만 갈아끼울때 말씀하시는걸까요??
리액트에 useEvent생기네요
이제 함수를 useCallback안감싸도 될듯..
바닐라에서 async - await 사용 없이 promise를 사용해서 api 요청을 보내서 받아오는것 까진 별도 함수로 분리해서 동기적으로 진행이 되는데 promise를 사용해서 데이터 요청 하고 받아온 데이터를 상태로 렌더링해주고자하는데 동기적으로 코드를 작성하는 방법이 어떤게 있을까요?
const getRequest = (url) => fetch(url) .then(res => res.json()) .then(res => res) .catch(...) 로 만들고 let data ; new Promise(getRequest(url)) .then(res => data = res); console.log(data) 가 비동기인데 위 상황에서 동기적으로 진행할 수 있는 핸들링 방법이 뭐가 있는지 알 수 있을까요?? 질문이 많아서 죄송합니다!
이런식이 되지 않을까요
let data; const getRequest = async url => { try { const response = await fetch(url); if (!response.ok) throw new Error(''); const responseData = await response.json(); data = responseData } catch (error) { throw new Error(error); } }; console.log(data);
async - await 없이 promise를 사용한다면, then 내부에서 data를 사용하는 수 밖에 없을까요?
아마 그럴것 같네요..
감사합니다 !!
then 내부에서 그리는걸 실행시켜 주시거나… 옵저버 패턴 같은걸 찾아보시는게 좋아보이네요
바닐라에서 옵저버 패턴 구현해서 해보는 것도 공부가 많이 될 것 같아요.
감사합니다 ㅎㅎ,, 옵저버패턴,,, 사용하고 싶진 않았지만 결국 순수 바닐라와 fetch로만 하려면 필수인것 같네요!
async await 도 순수 바닐라인데
왜 안 쓰시는건가요?
promise로 구현해보고싶어서 해봤습니다 ㅎㅎ,,
아 순수 바닐라라는 부분에서 제가 의도한대로 표현을 못했네요!
Next.js 에서 인증 안된 경우, /login 페이지로 보내주는거 깜박임 없이 redirect 하는 좋은 방법 없을까요ㅜㅡㅜ 현재 router.events.on('routeChangeStart', …); 사용 -> router.replace() 하는데 0.1초 정도 깜박이네요..,
getServerSideProps에서 리다이렉트해주시는 건 어떨까요?
router로 처리하는순간 csr이라 ssr로 처리 해야해요!
데이터를 받아서 확인하는 부분이 client side라서 ㅜㅜ 그 방법은 어려울 것 같아요
그럼 렌더링 요청전에 인증을 미리..
아하.. 어떤 방식으로 해야할 지 조금 이해했습니다 감사합니다!
인증 전까지 null을 띄운다든가 할 수 있긴 행ㅅ
해요
저흰..redirect로 구현해놔써리..ㅠㅠ
아니면 정확한 정보는 아닌데 next.js middleware 쪽 한번 살펴보시면 어떨까요?
좋은 방법 있으면 나중에 공유햊세요!
사진
다음 정보들이 예시로 있는것을 보아 비슷한 기능셋을 제공하는것 같아보입니다. (제가 안써봐서 정확한 정보는 아닙니다.)
그걸 서버사이드로 바꾸면 안되나요
이 방법도 봣는데 저도 개념이 확실하지 않아서 넘겼는데 ㅋㅋㅜㅜ 한번 해볼게요 감사합니다!
데이터를 local에 저장 -> swr 사용 코드라.. 제가 주니어개발자라 임의로 바꾸기는 힘들 것 같아요 😭
넵
이모티콘 많은 피드백 감사합니다 한번 방법을 찾아볼게요!!
삭제된 메시지입니다.
얌얌냥이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 얌얌냥이님~~ 반갑습니다 :)
안녕하세요 :) 잘부탁드립니닷!!
이모티콘
네!! 어서오세요. ㅎㅎ 여기는 프론트엔드나 개발을 하면서 다른 개발자들은 어떻게 하는지 궁금해질때 질문 하고 함께 이야기 나눠보는 공간입니다. ㅎ 마음껏 편하게 글 남겨주세요!!! ㅎ
넵ㅎㅎ 감사합니다🤩
혹시 다른 탭으로 이동할 때 겹치는 데이터만 바뀌고 큰 레이아웃은 크게 바뀌지 않을때 라우터로 이동을 (겹치는 컴포넌트는 재활용) 하도록 하는게 좋을까요, 아니면 탭 누르면 동일 컴포넌트에서 데이터만 바뀌게 하는 것이 좋을까요??
참고로 리액트 입니다 🙂
사용자가 브라우저에서 뒤로가기 눌렀을 때 이전 탭으로 가야 한다면 라우터로, 가지 않아야 한다면 동일 컴포넌트로 처리할 거 같아요!
저라면 동일 컴포넌트로 하고 history 관리할 것 같아요!
저여러분
간단한 토이프로젝트만드는중인데요
넵!
진짜 딱 기능구현만 되고있는상태고 코드 퀄리티(?)가 너무구린거같은데 이럴떈 어떻게해야될까요? 기능구현이 일단은 가장우선순위가 주먹구구식으로 코드작성해서 기능은되긴한데 너무 중구난방입니다 흑
기능구현되면 그 이후에 리팩토링 하시는건 어떠세요?!
리팩토링이란걸 해본적이있는데 혹시 어떤식으로 시작하시나요 ㅋ ㅠㅠ
저같은경우에는 파일한개를 골라서 위에서 부터 쭉 읽어보고 이거좀 구린데? 생각드는걸 더 좋은 네이밍, 방법으로 수정하고
기능이 정상적으로 작동하는지 체크하고
커밋하고
이걸 반복합니다!
리팩토링 2판 책 읽어보시는거 추천드려요! 그리고 개인적으로 기능구현이 먼저라고 생각해요. 지금은 그 코드를 보셔도 계속 거기에 매몰되실 수 있으니까 다른거 좀 하면서 한 숨 돌리시고 다시 봐보세요. 그럼 뭔가 환기되면서 수정할게 보이지 않을까요~? 지금 답답하게 생각드는 부분이 보일 수 있어요!
이게 리팩토링 2판에 주된 내용이죠 ㅋㅋㅋ 악취나는 코드가 무엇인지 나열해주는 가이드라인 제시해준다고 할까요? ㅋㅋ
선배님들 혹시 gitignore에 css가 있는 케이스는 무슨 의도일까요?
처음부터 스타일을 다 작성하거라~~~ 일까요? ㅋㅋ
저도 그 책 잘 보고 있어요~ ^^
저 무한스크롤 기능구현을
Intersection observe로하려다가 그냥 다른방식으로구현했는데요 전자로하는게 요새 스크롤구현 대세인가요?
그냥 api호출받고 거기있는내용 화면에뿌리는 간단한 토이플젝중에 스크롤구현이있어서 어찌어찌구현은됐습니다...
어떤방식으로하셨어요?!
스크롤말쓰이세요?
intersection observe 방식은 크로스브라우징 이슈는 없나요?
저도궁금
저는다른방식인데 cors에러이거 다들 어떻게해결하시나요..
cors-anywhere.herokuapp.com
보통 프록시서버써서 해결해요!
오 저도 저거
ㅋㅋㅋㅋ
여기사이트에서 cors-anywhere.herokuapp.com 이거 url에넣고해결하는거같긴하던ㄷㆍ디ㅣ
로컬에서 애용합니다
혹시 어피치님도그러시나요?
네네 그런데 보통은 프록시써서한다고하긴하더라구요
express로 간단하게 만들어서 쓰곤합니당
이모티콘 저는 오늘 칼퇴합니다! 업무 마무리 잘하셔요!
수고하셨습니다
이모티콘
seo 가 필요없는 어드민을 nextjs 로 개발해야할 이유가 있을까요?
ssr 때문이 아닐까요?!
아주 작은 사이트인데 credential 정보를 서버에 저장해야 하는 경우에 그냥 빠르게 후딱 개발하고 치워버릴 용도로 nextjs 로 개발하는 건 몇번 봤어요
파일 기반 라우팅 제외하면 성능상 이점은 크게 차이가 없을 것 같아요! 관리자 페이지가 엄청 크지 않은 이상..
아무래도 풀스택 프레임워크라 생산성 측면에서 이점이 있더라구요
오호..그렇군요
저도 그냥 라우팅 등이 더 편해서…
미아님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요~ 미아님!! 반갑습니다 :)
안녕하세요!! 반갑습니다 :D
어서오세요!! 편하게 궁금한거 있으면 언제든 물어보세요 ㅎ 잘 부탁드립니다~~
조성환님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
조성환님~~ 반갑습니다 어서오세요 :)
안녕하세요 반갑습니다! =)
저희 방에 오시게 된점 환영합니다ㅎㅎ 여기는 서로 묻고 답하며 함께 성장하고자 하는 공간입니다 뭐든 편하게 질문 남겨주시면 답할 수 있는 것들은 답변 남길게요 ㅎ
지인이 이런 오픈 카톡방이 있는데 서로 이야기하면서 도움이 많이 된다고 소개 시켜줘서 들어오게 되었습니다! 앞으로 질문도 하고 개발지식도 많이 얻어가겠습니다 ㅎㅎ 잘 부탁드립니다!
감사합니다!!! 함께 성장해요~~~ :)
오전에 SSR 관련해서 더 공부해보고, 나름 결론을 내게 됐습니다. 스스로 확신이 들어 자신있게 말을 했었는데 잘못된 정보를 드려 혼란을 준 것 같아 먼저 사과드립니다. 🙇🏻♂️ 결국 CSR과 SSR의 차이는 '화면'을 어느 쪽에서 완성하는가인 것 같습니다. CSR은 아주 기본적인 거의 텅빈 HTML만을 받고, 자바스크립트 파일이 로드가 완료되면 API를 통해 화면 구성을 마치고 화면을 그립니다. 즉 코드를 받는 쪽인 브라우저(클라이언트)에서 화면을 구성하고, 그려서 사용자에게 보여줍니다. 그에 반해 SSR은 매 요청마다 서버에서 화면 구성을 마치고 완성된 HTML을 브라우저에게 보냅니다. 사용자에게 필요한 데이터는 서버단에서 API를 통해(next로 치면 getServerSideProps 함수) 데이터를 미리 HTML에 넣어 완성된 HTML을 브라우저에 보내게 됩니다. 따라서 브라우저는 처음에 텅빈 문서였던 CSR과 달리 화면 구성이 완성된 HTML을 그려주기만 하면 됩니다. 즉 코드를 제공하는 쪽인 서버가 화면을 미리 완성하기 때문에 서버 사이드 렌더링입니다. 여기서 제가 의문을 가진 것이 '서버에서 미리 렌더링을 한다'였습니다. 그런데 이렇게 정리를 해보니 리액트나 뷰는 렌더링을 'DOM을 생성하는 것'을 뜻하는데, 서버단에서 DOM을 생성하니까 그런 의미에서 맞지 않나 생각이 듭니다. 많은 사람들이 계신만큼 좀 더 알아보고 말씀드렸어야 했는데, 그래도 덕분에 정말 집중해서 공부를 했고 많은 분들께 도움을 받았네요. 다시 한번 혼란을 드려 죄송합니다. 🙇🏻♂️
response Header에
쿠키값이 설정되고 있는게 보이는데
사진
왜 쿠키 저장소에는 access_token 값이 없는 것일까요?
프론트에서 잘못된 건지, 백엔드에서 잘못된 건지 혼란스러운데, 예상되는 문제점이 있을까요?
secure true에 httponly면 프론트에서 절대 못사용합니다
이모티콘 오늘도 날이 좋네요! 출근 잘하세요!
이모티콘
자란다님도 출근 잘하세요!!
진짜 오랜만에 글을 올리게되네요. 예전에 구매했던 함수형 코딩 책에 영감을 받아 작성한 '함수형 프로그래밍' 에 대한 이야기입니다. 글을 쓰는데 시간이 오래 걸린만큼 내용에는 자신있으니(?) ㅋㅋ 꼭 한번씩 읽어보세요. :) https://velog.io/@teo/functional-programming
항상 유익한 글들을 공유해 주셔서 감사합니다. 읽기 전에 먼저 감사 말씀 드려요~!!
진짜 존경합니다 ㅎㅎ
하아.. 진짜 기다렸다구!! ㅠ
잘먹겠습니다 냠
오..드디어 기다렸는 글이 올라왔네요! 감사합니다!
ㅠㅠ좋은글 항상감사합니닷!!
잘 읽었습니다 감사합니다!!! 책 바로 질렀어요 😎
안녕하세요! 어제 Next.js에서 깜박임 없이 인증 확인 후 페이지 진입에 대해 찾아본 내용을 공유드립니다. 많은 분들께서 다양한 방법을 남겨주셔서 작업이 수월했던 것 같아요. 정말 감사합니다! 사실 어제 얘기해주신 내용들이 다이긴한데, 정리해보면 좋을 것 같아서 올려봅니다 😊 클라이언트 사이드라면, 1. 인증 확인(isAuthenticated), 로딩중인지(isLoading)에 대한 state 값을 전역으로 관리 2. 로딩중이거나, 인증이 없는 경우 → `<FullPageLoader />` 3. 로딩중이 아니고, 인증도 없는 경우 → `/` redirect 즉, 클라이언트 사이드에서 깜박임 없이 처리하는 가장 좋은 방법은 데이터를 처리하는 동안, 로딩화면을 보여주기 (이때 로딩이 너무 짧은 경우에는 같은 느낌으로 화면이 깜박거리는데, 이건 임의로 로딩 시간을 늦춰주는 방법이 최선인 것 같음) 참고 url → https://learn-auth-redirect-nextjs.vercel.app/ https://theodorusclarence.com/blog/nextjs-redirect-no-flashing 서버사이드라면, Next.js에서는 두 가지 방법이 존재 1. Middleware (Next.js ≥ 12) 1. 미들웨어를 관리해서 redirect를 보내줄 수 있다. 2. 다만, 미들웨어의 경우 별도의 custom server를 제작해 hostname, port 지정이 필요하며 이때 serverless function, Automatic Static Optimization이 제거된다. 2. server side redirects (Next.js ≥ 10) 1. getServerSideProps나 getStaticProps를 사용해 redirect를 보낼 수 있다 2. getServerSideProps는 빌드시 redirecting에는 지원하지 않기 때문에, 빌드 시 redirect를 원하면 next.config.js로 쏴줘야한다.
함수형 프로그래밍 글 정말 좋네요 .. 정말 감사합니다 🙏
사진
테오님, 천동설과 지동설 내용이 바뀐거 맞나여?
ㅋㅋㅋ ;;
아.. 혹시나 다른분들이 착각하실까바 ;;
낼름 수정했어요ㅋ 감사합니다!!!
혹시 이런 경우 보면 다시 말씀 드려도 되져? 다른 글 볼때도 한군덴가 두군데 본적 있었는데 ;;
네 교정은 언제나 감사한 일이죠 +_+
네 ㅎㅎ
엄지척 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
promised 를 안쓰고 async await를 쓰는 이점이 비동기 코드를 동기적으로 작성하 혹은 여 코드의 가독성을 높여주는 것외에 무엇이 있을까요? 혹시 이러한 이점이 있다면, 왜 async와 await로 개발을 안하고 promised 를 쓰고 개발을 할까요? 기존의 promised로 쓰여진 코드라 코드 레거시 등 말고도 여러가지가 있을 것이라 생각하는데, 혹시 이 질문에 대한 의견 주실 분 있으실까요?
이런거 안쓸수있어요
코드의 가독성이 높아지는것만으로도 충분한 메리트가 있다고 생각합니다.
단순한 콜백지옥 해결 말고, 그 이외에 더 좋은 답변을 면접관들이 기대했던거 같아서요.
콜백지옥 해결이 정말 중요한 부분이라고 생각해요
promised가 promise - then 을 이야기 하는건가요?
인간 뇌는 동기적으로 생각하려는 특성이 있어서 비동기가 어느 언어든 어려운 문제였는데 async는 비동기를 동기적으로 쓸 수 있게 해주니까요
콜벨 패턴으로 인한 가독성 문제와 더불어 비동기 처리중 발생한 에러의 처리문제 말고도 혹시 다른것이 있을까해서요.
멀기트님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
그게 전부인것같습니다.
킴뎁님~ 도요새님! 반갑습니다 어서오세요 :)
async await의 경우에는 병렬처리를 한다거나 Promise를 1급객체로 다루기에는 부족한 부분이 있기 때문에 복잡하게 비동기를 다루는 경우에서는 promise를 그대로 쓰게됩니다. then, catch보다는 try await catch가 조금더 문법적으로 깔끔해 보인다는 이점이 있어서 await를 씁니다
await의 경우 then 의 슈가 신텍스이기 때문에 무조건 promise가 아니라 다른 객체에도 쓸수 있다는 점도 굳이 꼽자면 있을 것 같아요
then이라는 메소드를 가진 객체가 있다면 promise가 아니더라도 await을 깔끔한 코드를 만들기 위한 용도로 사용할수는 있는데 보편적인 방식은 아닙니다
이모티콘
프로미스 사용하면
객체를 반환해주서ㅓ 재사용할수있어서아닐까여??
태오님의 따봉,, 영광입니다..
한가지 질문사항이 있어 글올립니다 ㅠㅠ 제가 지금 페이지를 하나 만들었는데 div를 여러개로 만들어서 페이지를 만들었습니다. 그리고나서 back to top버튼을 만들어서 페이지 최상단으로 올리고 싶어 scrollTo를 사용했는데 왜 자꾸 버튼을 클릭하면 그 해당되는 div의 0에만 고정이 되는지 모르겠습니다… 제가 원하고자 하는 구현은 제일 위에있는 div페이지로 돌아가는건데 어제부터 구글링했는데도 답을 못찾아서 질문드립니다 ㅠㅠㅠ
사진 2장
코드는 대략적으로 이렇게 작성했습니다...
class 컨테이너의 top으로 올리면 동작안하나용?
최상위 div페이지로 안올라가고 계속 그 div의 top만 보여줍니다 ㅠㅠ
function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth", }); } 원래 top부분을 이렇게 작성했다가 이것저것 넣어보느라 지금은 offsetTop이 들어가있는 상태입니다...
scroll이랑 scrollTo랑 사용방법이같나요??
파이팅님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
저건 scroll 함수 사용방법같아용
to는 x,y 좌표만 넣는다고 mdn에 나와있긴하네용
function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth", }); } 이 함수 말씀이신가요??
안녕하세요~ 프엔 취준생입니다. 잘부탁드려요!
function scrollToTop() { window.scrollTo(0, 0); } 이렇게 바꿔 봤는데도 동일하네요 ㅠㅠㅠ
scrollTo하고, scroll은 사용법이 동일할꺼예요. https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
사진
console.log(window.pageYOffset) 찍어보시면서 눌렀을 때 어디까지 가는지 한 번 보실 수 있나요?
95라고 출력됩니다!!
클릭했을때 scroll이 0까지 가긴 가는데, 문제가 있는것인지 아예 0까지도 못가는지 봐야 알 것같습니당 저능 예전에 헤더때문에
아 그럼 지금 상태가 0까지 못올라간다는 말씀이신건가요??
흠…. header가 있나요? 헤더 height가 95px일까요? 저는 예전에 header height때문에
그 만큼을 빼주는 작업을 했었습니다.
header는 따로 만들진 않았는데 nav때문에 그런걸까요 혹시…?
아 네
nav가 아마 95px인가요…? 그거 한번 찍어보시겠어요?
nav height가 얼마죠?
와
nav가 딱 95px이네요;;;
네, 아마 그러면 그 scrollTop을 하셨을 때 그 친구는 0까지 갔는데, 그 위에 다른게 있어서…덜 올라간 것처럼 보였을거에요
scrollTo에 그럼 -95를 써야 할까요???
만약 navbar height가 항상 95px이라면 top: -95px, behavior: 'smooth' 이렇게 하셔도 상관없지만… 반응형에 따라 height가 다르다면 다르게 처리해야할 것같습니다. 더 좋은 다른 방법이 있을 수 있습니다. 그건 저보다 더 뛰어나신 분들께서 알려주실 것같아요 ㅋㅋㅋ
nav height가 변경될 수 있으니, nav height를 detect 로직을만들어놓고 그 로직에 대한 return 값을 받아서 쓰시는건 어떠세여?
방금 -95로 변경 해보긴 했는데 아직 동일하네요 ㅜㅜ
그래도 감사합니다!!
제가 아직 초짜라 그런데 어찌해야 할까요…ㅜㅜ
아 혹시 ME님 어피치님이 얘기한대로 해도 수정이 안되었나요?
function scrollToTop() { window.scrollTo({ top: -95px, behavior: "smooth", }); }
이렇게 하신 것 맞으시죠?
네네 맞습니다!!
음….저 문법이 아닌가…? ㅋㅋㅋㅋㅋㅋ 저도 초짜입니다 ㅋㅋㅋㅋㅋㅋㅋ
혹시 ME님 방금 어피치님 조언에 따라 적용하신 code를 공유해주실수 있나요
function scrollToTop() { window.scrollTo({ top: -95, behavior: "smooth", }); }
scroll 함수는 이렇게 만들었구요
document.addEventListener("scroll", handleScroll); let scrollToTopBtn = document.querySelector(".top_button"); function handleScroll() { let scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; let GOLDEN_RATIO = 0.5; if (document.documentElement.scrollTop / scrollableHeight > GOLDEN_RATIO) { // 버튼을 보여주기 scrollToTopBtn.style.display = "block"; } else { // 버튼을 숨기기 scrollToTopBtn.style.display = "none"; } }
스크롤에 따라 디스플레이 되는 코드는 이렇게 짰습니다
.top_button { position: fixed; bottom: 50px; right: 50px; z-index: 100; display: none; } .top_button_link { position: -webkit-sticky; position: sticky; top: 85vh; text-decoration: none; background-color: #384b5e; padding: 1rem; color: white; font-weight: 700; opacity: .3; } .top_button_link:hover { opacity: initial; }
CSS는 이렇게 짰구요!
아니면 혹시 제가 지금 div들을 id값을 줘서 nav 메뉴에서 클릭하면 href로 해당되는 div로 이동하게 설정해놨는데 이게 문제일까요?? 그래서 해당 페이지에서만 버튼이 작동하는건지….
삭제된 메시지입니다.
아닌거 같아요… href값 다 지워봤는데도 똑같아요..
사진
이부분을요
document.body.addEventListener
이렇게 바꿔서 한번 해보실래여
아니면 window.addEventListener
요렇게
오.. 그 body를 사이에 넣으니까 일단 버튼자체가 사라졌네요
window로 바꾸니까 버튼은 나타나는데 동일해요 ㅠㅠ
깃헙으로 코드를 공유 할까요?... 그게 빠르겠죠?..
이모티콘 저는 오늘 반차라.. .청와대 관람하러 떠나보겠습니다! 다들 오후도 화이팅 입니다!
대박 청와대
부러워요
스크롤바를 보니까 top버튼을 눌렀을때 위로는 nav아래서부터 마지막페이지를 뚫고 더 내려가고 그게 아니면 그냥 페이지 전체 상단에서 아래까지 왔다갔다하네요 스크립트보단 css문제가 큰걸까요?
안녕하세요 어떤 블로그에서 프엔 관련 단톡방 추천해주시길래 들어왔습니다
지금 ME님이 주신 코드 봤는데요...
overflow가 부모 자식단에 설정되어 있어서 2중 스크롤이 생기네요…
삭제된 메시지입니다.
사진
사진
이렇게 바꾸고 해보세요.
와 됍니다!!!;;;
오....
중복 css 설정 때문에 충돌해서 발생하는 문제 같아 보여요.
감사드립니다 ㅠㅠㅠㅠ
혹시 한 가지만 더 여쭤봐도 될까요...?
그 말씀하신대로 주석처리하고 하니까 페이지 스타일이 첫번째거 말고 다 벗겨져 버리는데 얘는 다시 하나씩 설정해주면 되는걸까요??
사용 못 하는 건 아는데, 쿠키 저장소에 저장된 모습은 보이지 않나요?
개린이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
음 화가님 예전에 하셨던 질문인거같은데
아 쿠키저장소가 자바스크립트 말고 브라우저에서 개발자도구로 열어보신건가요?
개발자도구에는 httpOnly 여도 보여야 되는 게 맞긴 해요
개발자도구는 보입니다
profile_sections class에 height값을 100vh으로 설정 했고, about, career, hobby, contact도 각각 height값을 100%줬기 때문에 profile_sections안에 about, career, hobby, contact 들이 전부 담기지 않아요. 요청 하신 내용은 적용하는 여러 방법이 있으니 본인이 선호하는 방법으로 적용하시면 되요.
오오 감사합니다!!!
바쁘신 와중에도 도움주신 떨고있는 어피치님, YoMotERi님 진심으로 감사드립니다!!! ㅠㅠ 이틀을 헤매고 있었는데 덕분에 바로 해결했어요 ㅠㅠㅠㅠㅠ
삭제된 메시지입니다.
아닙니당…YoMotERi께서 대부분 해주셨는데요 뭐 ㅎㅎ 저도 코드 보긴 했는데…제가 부족해서 잘 모르겠더라구요… 작은 조언 드리자면, 우선 html, CSS, js가 떨어져있고 같은 이름으로 또 만드니 서로 충돌하는 것같더라구요. 만약 제가 ME님이라면, 파일 쪼개지 마시구 index.html에다가 몇 천줄이 되어도 상관없으니 다 만들어볼 것같습니다. 완성 후에 파일을 기능별로 쪼개보는 것도 좋은 공부가 되실 것같아서요. 아마 처음부터 파일을 쪼개서 여러 개의 파일로 작업 하려니 더 헷갈리실 것같습니다…
html에 style을 다 넣어보란 말씀이신거죠??
네…지금은 파일이 나눠져있어서, 파일을 왔다갔다 하다보면 더 헷갈리실 것같아서요… 혹시 어떤 것인지 잘 모르신다면, 아래 글을 한 번 참고하시면 좋을 것같습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/style
몇년차 개발자를 이야기 할때 공백기는 빼게 되는건가여?? 예를 들어 11개월 일하고 5개월 쉬웠으면 2년차 개발자가 되는건지, 1년차 개발자인지 궁금합니다
가독성때문에 쪼개서 하는걸로 택하긴했는데 말씀대로 왔다갔다하다보니 헷갈리는게 있는것같네요 ㅠㅠㅠ 말씀해주신 방법도 참고하겠습니다!!
1년차 아닐까요..?
답변 감사합니다!!
사실 년차는 크게 중요하지않다고 생각해서 크게 상관이없을거 같아요 ㅎㅎ 쉬는 5개월동안 개발공부를 열심히 하셨으면 2년차라고 하셔도 무리없을거같습니다.
안녕하세요 data 배열을 요소안 객체 productId가 같으면 밑의 result로 어떻게 바꿔야 할까요? const data = [ { productId: 6, image: "asset/img/5/thumbnailImg.jpg", productName: "Hack Your Life 개발자 노트북 파우치", productPrice: 29000, discountRate: 19, optionName: "13인치", optionPrice: 0, qty: 2, }, { productId: 6, image: "asset/img/5/thumbnailImg.jpg", productName: "Hack Your Life 개발자 노트북 파우치", productPrice: 29000, discountRate: 19, optionName: "15인치", optionPrice: 1000, qty: 1, }, ]; const result = [ { productId: 6, image: "asset/img/5/thumbnailImg.jpg", productName: "Hack Your Life 개발자 노트북 파우치", productPrice: 29000, discountRate: 19, option: [ { optionName: "13인치", optionPrice: 0, qty: 2 }, { optionName: "15인치", optionPrice: 1000, qty: 1 }, ], }, ];
그때는 접근에 대해서 물어봤고, 이번엔 왜 개발자 도구의 저장소에 보이지가 않을까요?
response-header를 보면 access_token이라는 이름으로 쿠키가 오는 게 보이는데, 막상 저장소에는 보이지가 않아서 어디서 잘못된 건가 궁금했습니다.
밑의 result 가 뭔가요
data를 result로 바꾸려고 합니다.
알고리즘 문제군요!
result가 어떤 형태여야해요? 허허 그냥 바꾸자고 하면 답이 없는 문제인거 같은데용
질문에 data 랑 result 가 적혀있습니다 ㅎㅎ
a라는 창이 있어요, 근데 b라는 조건이나 c라는 조건이 충족이 되면 a라는 창을 띄우기 위해서 b나 c조건을 완성했을시 함수를 부르고 그 함수에서 직접 창을 만드는게 좋은가요? 아니면 a라는 창을 display:none으로 미리html에서 만들어 둔뒤 b,c조건을 완성했을시 classlist.add해주어서 다시보여주는게 좋은건가요?? 어떤게 좋은 코딩인건지 궁금합니다!!
product 관련된건 같은데 option 이 다르네용
아 있엇네요 맥북에서 스크롤이 안 보여서 없는줄 알았네용
reduce 사용하시고 productId 같은거 없으면 나머지 그냥 넣으시고, option만 option: [] 안에 넣어주시고, 있을 땐 기존에 option 안에 새로운거만 추가해주시면
될거 같은데용
저도 reduce 사용할거 같슴다
data.reduce((prev, curr)=> if(prev.productId === curr.productId){}) 이런 식으로 선언 하면 될까요?
productId 는 항상 정렬되어서 나오는건가요?
사진
이런식으로 나옵니다.
reduce로 해보겠습니다.
오 https 차단된거 해제되었네요
그렇게하면 이전 값이랑만 비교하게 될것 같아요
그렇군요…
라이언님
여길 참고 하셔서 reduce 사용법을 찾아보시고 그래 잘 모르겠으면 모르는 부분을 물어보시면 될꺼 같아요.
그래도
네 확인해보고 적용해보겠습니다 감사합니다
사진
productId를 기준으로 나누고 싶어하셨으니
이 부분을 먼저 참고 하시고 이후에 다시 고민하시면 될 듯 해여
오 감사합니다. 이부분도 적용해보겠습니다.
혹시 타입스크립트 쓰시는 분들중에서 function test( {a},b) =>{} 이 경우, interface로는 {{},b} 요런 형태는 안되는 것으로 아는데, 어떻게 하면 바로 타입을 입힐 수 있을까요..? 예를 들어,리액트에서 function Test(props,ref) =>{} 이 경우, const Test = forwardRef(({}, ref) => { return <div ref={ref}>자식</div>; }); 이런 식으로 현재 구조분해 할당해서 쓰고는 있지만 타입은 지정은 별도로 안한 상태입니다.
음 어떤 의미인지 잘모르겟네요
ref는 forwardRef 사용하시면 <Test ref={ref} /> 이런식으로 쓸 수 있으실꺼구
forwardRef의 타입은 forwardRef<RefType, PropsType>((props, ref) => ) 이런식으로 사용가능하셔요
function test({a}: type1,b: type2) =>{ } 이럼 되지 않나요?
원본 js 코드는 이렇습니다
사진
타입스크립트로 바꾸니 props가 다에러 터져서 상세하게 해줘야 되는거인지 궁금하네요
사진
forwardRef 함수를 빼셨네요~ 타입스크립트는 자바스크립트에 타입을 더한거니까 기존에 자바스크립트는 그대로 있어야해요 (grin)
포유님이 말씀하신대로 하시면 될거 같습니다 ~
제네릭 같은게 첨에 좀 어렵죠 (tearing)
이 부분을 적용해보왔는데 적용 이 안되서 forwaredRef 는 아니라고 warning 떠서 아래처럼 해보니 , 여전히 ref는 <unknown>으로 받아서 미지수이네요 ㅜㅜ휴우.. 적응하기까지 좀 어렵네요
React.ForwardRefRenderFunction<HTMLInputElement, InputBasicProps> =
forwardRef로는 안 감싸져있는거 아닌가용
사진
감싸져있습니다 ㅜ
const Input = forwardRef<HTMLInputElement, InputBasicProps>(
요렇게 해서 어떤 에러 나오는지 보여주실 수 있나요?
저도 저 포워드레프렌더펑션은 써본적 없네요 허ㅓ허
사진
앞에
타입은 안쓰셔도 돼요
자동으로 추론되어서요
const Input = forwardRef<HTMLInputElement, InputBasicProps>(
앞에거 지우시고 뒤에 포워드레프에 타입주셔요
뒤에 주라는 말씀이 forwarded 인자 들어오는 타입 뒤에주는 것이라고하면 그렇게 해도 동일하게 에러가 나긴합니다.
저기 올려주신 코드 그대로 하셔도 에러나신다는거죠?
사진
넵..여러가지로 다해봣습니다만 ㅜㅜ
음...
저건 리턴타입이 되는건데...
const Input = forwardRef<HTMLInputElement, InputBasicProps>({}, ref) => {...}
넹 이거 에러납니다
혹시 그때 무슨 에러가 나는지 보여주실 수 있나요
넹 그래서 혹시나 거기라도 적어본거라서요 ㅜ
이렇게 한것도 사진 올려주세요..
사진
스타일드 텍스트인풋은 그냥 styled.input 으로 한거맞나용? 이게 안되다니
이건 styled component 로 만든 custom input이요
춘식님, 혹시 사용하고 있는 file 확장자가 ts이신가요 tsx이신가요??
전부 컴포넌트라서 tsx입니다
스타일드 인풋도 보여주실 수 있나요 ㅋㅋㅋ
파일: Input.tsx
잠시만요 스샷찍기엔 코드가 많아서 그냥 올렸습니다 ㅜ
사진
input이 아니고 TextInput이네용
저건 또 어떻게 돼있을까요... 애가 ref를 받을 수 있게 돼있어야 될텐데
rn이셨군요
이사진보면 ref 타입이 안 맞아영
Rn ref 사용 안대여
ref라는 props 속성이 없어요
이모티콘 해봤는데 ref로 제어가 안됩니다 ㅜ ㅜ
안녕하세요님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
Form 작업하기가 매우 불편해요 RN이
엇 이거 되는 코드인데…자스로는 돌아가는 코드입니다. 시중코드에서 ref적용하려고 가져와서 비교해보는 중인데 ..
RN 모르는데 나댔네요 ㅠ
안녕하세요님ㅁ!! 안녕하세요. ㅎㅎ 반갑습니다 :
안녕하세요!
옛날에 스벨트 글 쓰신거 보고 감명 받아서
오픈챗방 들어 왔급니다
와!!!~~ 감사합니다. 어서오세요. 환영합니다. ㅎ
여기는 글로 작성한 내용 중에 궁금한거 있으면 더 상세한 얘기를 나눠보고 싶어서 만든 오픈채팅인데 어느덧 사람들이 많아져서 함께 질문하고 답하고 또 성장하고자하는 그런 공간이 되었네요. ㅎ
언제든 궁금한거 질문 주시면 제가 잘 아는 것들은 바로 바로 대답하고 호흡이 길다 싶은 좋은 내용들은 블로그 글로 작성을 하고 있어요. ㅎ
언제든 편하게 글 남겨주세요 ~:)
버전 업하면서 바뀌었나요? 0.64.3 까지 먹혔는데. 정안되면 ref대신 state로 관리해야죠. uncontrolled로 관리해주려고 햇는데 ㅜㅜ 감사합니다! ㅜㅜ 어쩔수없죠! 그러면 혹시 styled component 내에서 props 타입은 어떤식으로 지정해줄수가 있나요
ref로 해보려고 했는데 ;; 아무리해도
춘식님이 말씀해주신대로 ref가 안잡히더라구요;;
저도 하다하다 포기했습니다
감사합니다!
춘식님, Input으로 ref를 전달하는 부모 코드도 한번 볼 수 있을까요? 저도 잘 몰라서 해결 가능하진 않겠지만 호기심에 한번 여쭤봐요.
const passwordRef = useRef(); 이고 input으로 내려준 것 밖에 없네요
사진
const passwordRef = useRef<HTMLInputElement>(); 이렇게 수정해도 마찬가지겠져?
const passwordRef = useRef<HTMLInputElement>(null); 이렇게 ;;
useRef에 타입을 지정하지 않아서, 혹시나 자동추론이 DOM조작 타입이 아니라 value를 제어 하는 type으로 잡힌게 아닐까 싶어서요
네네 말씀해주신거 전부 다해봣습니다. 혹시나 해서 TextInput으로도 다 바꿔봤구요 스택오버플로우에도 언급하셨던 내용이 있어서 다해봤지만 안 먹더라구요
답변 감사합니다 ;;
아 RN이군요 파일 다운받아보고 알았네요
RN인 미묘하게 뭔가 다르던데.. 안해봐서 사라져야겠네요 춍춍춍
미묘하게 다른데 둘다해보니 재밌습니다 ㅎㅎ
Rn 스토어 빌드 10분 이상 걸리는거 맨날 하다 보니 해탈하게 되더라고요 ㅎ…
저는 회사에서 웹뷰 개발하는데, 시뮬레이터 돌리기가 너무 속터져서 미치겠어요.. 찰스로 프록시 켜고 뭐 이런게 좀 번거롭고... 도메인도 너무 여러개라서 관리도 어렵고 그렇네요 ㅠ RN은 좀 덜한가요?
사진
이렇게 타입 지정해줬었습니다 ㅎㅎ
흠 저는 신형컴이 아니라서 시뮬레이터 여러개 돌리면 버벅이니 저는 그래서 하나씩만 돌려서 해보고 있어요 시뮬 번갈아가면서 켜보도 확인 하네요
하나 킬때는 안 버벅이고 잘 되는거 같아요
아하 감사합니다. 저는 아예 그냥 저기 타입에다가 따로 줬었는데 저 방식도 적용해봐야겠네요 ㅎㅎ
채팅방 페이지를 작업하고 있는데 입력창을 fixed로 하면 모바일에서는 문제가 없는데 뷰포트 기준이라 길이가 너무 길어서 혹시 이런경우 어떻게 해결하시나요..? ㅠㅠ
사진
useForm을 이용하시면 편할거에요!
나중에 desktop 확장 고려하셔서 하시면 될 거같아요 저는 그냥 둡니당..
아니면 max-width값 고정시키시고 margin 0 auto 하셔도 될거같아요
next.js + react-query 조합 사용하시는분 있으실까요? 혹시 queryClient를 어디다 만들어두시나요?
사진
이런식으로 페이지마다 쓰시나요?
공통된 캐시를 사용하는 쿼리들을 QueryClientProvider로 감쌀 때 쓰는거 같아요
따로 queryClient.ts 파일로 빼서
사진
이렇게 쓰기도하시나요?
클라이언트 사이드에서 쓰시는 거예요 서버사이드에서 쓰시는 거예요?
클라이언트에서 사용하는경우입니다!
그럼 저는 그냥 cra에서 하듯이 _app.tsx에서 선언해요
서버사이드에서는 따로 적극적으로 안써봐서 잘 모르겠네요 😅
아아 그렇군요
혹시 여기서처럼 굳이 dehydratedState로 props를 리턴해주는 이유가있을까요? 문서를 읽어봤는데 frozen representation of a cache 여기가 이해가 안되네요..
안녕하세요! 정말정말,,, 궁금한게 있는데요~ 개발하실 때 순서도?나 플로우차트?같은걸 먼저 작성하시나요? 간단한 웹 게임을 만드려하는데 생각보다 복잡해서 순서도를 작성해보고싶은데 개발자분들은 어떻게 하시는지 궁금합니다! 사용하시는 툴 같은게 있다면 추천해주시면 감사하겠습니당ㅎㅎ
복잡한 부분들은 분기별로 정리해서 케이스별로 로직을 순서를 정리하는 편인데 따로 플로우차트나 순서도는 작성 안합니다.
앗 감사합니다!! 분기별로 정리한다는게 예를 든다면, 어떤 작업이 들어왔을 때 어떤 상태가 변해서 어떤게 어떤 순서로 렌더링 되겠다. 이런걸 말씀하시는건가여???
google io 보시는분 계신가요 ㅎㅎ 새삼 느끼지만 참 대단한 기술력을 가진 기업이네요
혹시 리액트로 웹에서 카카오 로그인 기능 만들고, 개발자 도구에서 다양한 핸드폰 기종으로 카카오 로그인 적용해보신 분 있나용?
다구님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
Jason님이 나갔습니다.
혹시 terminal이나 cmd 없이 자바스크립트 코드만으로 node 버전이나 js버전을 알 수 있는 방법이 있을까요..?
삭제된 메시지입니다.
그거 치시면 node 버전 볼 수 있을거에여
process.version
아
터미널없이구나
죄송합니당
리액트 useEvent Hook https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
아직 안읽어봤지만 목차만 보면 구직중이신분들께 약간의 도움이 될 수도 있을거같기도하네요. 신상 책이라 공유드려용 http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791165219529&orderClick=LEA&Kc=
와악 감사합니다 !!
사진
강의도 있더라구요 https://www.inflearn.com/course/개발자-면접-cs-특강
대박..
이번에 피그마가 좀 바뀌나보네요? 잘은 모르겠지만… Component Properties 기능이 있나봐요 https://www.figma.com/whats-new/
아니 진짜 어마어마하네요 .. 원했던 기능이 많아요..
앗.. max-width가 있었네요.. 전혀 생각을 못했습니다 ㅠㅠ 감사합니다!!
현재 Notification 기능을 구현중이고, 알림 리스트를 InfiniteScroll로 구현해서 스크롤을 내리면 다음 페이지 알림들을 가져와서 state에 붙이는 방식으로 구현했습니다.
그런데 알림같은 경우 최신 알림이 가장 앞에오게 되므로, 생성 순으로 페이징된 데이터는 Infinite scroll에서 가장 먼저 가져온 이후 업데이트가 발생하지 않습니다.. 만약 이 때 새로운 알림이 추가되었을 경우 어떻게 최상단에 새로운 알림을 가져올 수 있을까요?
오잉!? 그런게 있나여?!
아아 react-hook-form 말씀하신건가여?
네 맞습니다
아니면 react-native-elements 나 react-native-papaer 에서 제공하는
TextInput은 어떤가요
저는 rn에서 벗어나는것을 추천...ㅋㅋㅋㅋㅋㅋㅋ저는 다시 react 하러 갈겁니댱 ㅋㅋㅋ
react-hook-form을 사용하면 그나마 좀 편해지긴 합니다만...그 마저도 너무 제한된 느낌이라 ㅠ
답답하더라구요
Vue 쓰시는 분 계씬가용
거의 다 React 쓰시나
회사에서 vue쓰는데 react 개발자 되고 싶어서 react공부중입니다..
react쓰시는분들 부럽슴다
왜 부러우신지 여쭤봐도 되나요?
왜 부러우신가요?
Vue도 충분히 좋은뎁
아무래도 React를 뽑는 곳이 많아서 그렇지 않을까요..??
그쵸 리액트 전성시대 ...
그냥 1대장 아닌가요
js 위주의 코드 작성?
저도 뷰써용
회사에서..
뽑는곳도 많고 구직하는 사람도 많고..
사람 구할때 리액트가 엄청 유리하다고 들었어요
근데 각자의 장점이 있는것 같아요!
근데 근본적으로 js라서.. 뷰하시던분들도 리액트 금방 익히실수있을겁니다!
혹시 뷰3 하시는분 뭐로 공부하셨나요
저 뷰3 코드 봐야할일이 생겼는데
맞아용 ㅎㅎ 제가 알아봤을 때는 강남언니, 에이블리, 브랜디, 펫프렌즈 전부 다 뷰를 썼었어요 ㅎㅎ
홈페이지요!
뷰는 1도 모르는상태에서
공홈이 역시 베스트죵
그런가요.. 뭔가 예제코드도 보고싶은데 거기는 포멀한 예제뿐일거같아서요
아마 리액트접하시다가 뷰접하시면
이게 뭐야 하시는게 많을수도있어요
ㅋㅋㅋㅋ
제가 그랬습니다..
저 외부에서 사람 모아서 들어가는데 저는 rn으로 앱만들고 어드민을 뷰 하시는분이 하셔서
ㅠㅠ 뷰 코드리뷰 해줘야하는..
저는 리액트하다가 뷰잠깐만졌을때, upstate어케해, 이러면서 엄청 화났었는데 한번 비슷한 프레임워크인 스벨트겪으니깐 뷰도 눈에 들어오더라구요
라이프사이클 명칭도 달라서 좀 혼란스러우실수도있는데 까보면.. 그게그거에요 ㅋㅋㅋ
뷰 스벨트 솔리드처럼 memo 안해도되는 편한게 좋아요 개취
엄지척님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
ㅁㅁㄴ9
로투스님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!
안녕하세요!! 엄지척님!! 프론트님!!! 모두 모두 반갑습니다. ㅎㅎ 어서오세요 :)
하
혹시 프론트가 피그마로 시안 디자인하고 작업하시는분 계신가요?
혼자 할때는 그냥 손으로 그리게 되요 ㅠㅠ 그리다 보면 이럴바에 코딩 하고 말지 이러면서 ㅋㅋ 같이 협업을 해야할때는 화이트보드로 그려서 사진 찍어서 공유하고 그러고 있어요
건방진 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요!
피그마 너무 좋아요!! 이번에 많이 바뀌어서 피그마 컴포넌트를 리얼 컴포넌트로 바꾸는 플러그인 다시 만들어 볼 생각으로 기대가 됩니다 +_+
리액트는 저에게 있어서 JIRA 같은 느낌이에요!! 이게 Best인가? 라고 하기에는 애매한데 다 같이 협업을 하기 위해서는 모두가 수긍할 수 있는 프레임워크랄까요?
팀바팀인데 저희 팀은 그냥 하고 싶은 걸 하자 주의이구요
앗 ㅋㅋ 감사합니다.!!! 역시,, 화려한 뭔가를 찾는건 좋지 않은 것 같네요~~!! 배워갑니당ㅎㅎ
스벨트 리액트 뷰 3종이 다 있습니다 ㅋ
https://mermaid-js.github.io/mermaid/#/ 이거 한번 배워보고 싶었어요
마크다운 기반의 flow 그리는 툴? 순서도를 그리는 것은 수정이 나중 가면 귀찮아지는게 문제라서
아 머메이드
예전에 한번보고
까먹고있었네요 유용하겠다 했었는데
Styled Component에서 onClick 이벤트를 쓸수있는 방법이 있을까요? 하위 또는 상위에 엘리먼트를 만들어서 넣기 싫은데 ㅠㅠ
스타일 컴포넌트에서도 온클릭은 지원하지 않나요 ?
....??
Props는 자주 이용하는데, 온클릭도 되는줄 알았는데 안되더라구요. 내부동작에 차이가 있는듯해서요
될텐데요..
저 많이썼는데
그래요? 다시 한 번 확인해봐야겠네요 ㅠㅠ
안되시면 코드 한번 codepen.io나
yeu.kr
같은곳에 올려주시고 보여주시면
저희가 이해하기 편할거에요
아 넵! 감사합니다!
저도 스타일 컴포넌트에 onClick 잘 쓰고 있습니다 ㅎㅎ
네! 스타일컴포넌트에서도 잘되네요ㅠㅠ
오버레이 부분에 이벤트를 줬을 때 클릭이 안되서 제가 햇갈렸던것같습니다!
오버레이부분을 z-index 부분을 높이면 클릭이 되는데… 이는 어떻게 해결해야 할까용 ㅠㅠ
오엠쥥님이 나갔습니다.
오버레이부분 위에 스캐폴드가 덮어져있어서 그랬네요! 질문을 알기쉽게 쪼개서 했어야했는데 ㅠㅠ 다음부턴 주의하겠습니당
스타일 컴포넌트 관련 답변해주신 분들 정말감사합니다!
Aws로 서비스 배포하시는 분들 롤링배포쓰시나요 카나리배포하시나요~?
엠플리파이로..
자동배포..
엠플리파이 짱짱...인데 엠플리파이의 자동 배포방식은 블루그린으로 봐야할까요?
혹시 echart 쓰시는 분들 중에 실시간차트 구현해보신분 있으신가요..
chartjs 에 있는 streaming plugin같은거 찾고있는데 절대못찾겟네요...
개미다리같은 애니메이션 너무 바꾸고싶어요..
흠 애초에 리액트라서
그런방식이 크게 필요없지 않을까요
httml교체하면
무중단배포처럼 될거라서
리액트 빌드하면 정적페이지라서요
다들 사이드 프로젝트 팀원은 어디서 구하시나요? 하고싶은데 어디서 구해야 할지 잘 모르겠네요ㅠㅠ
저는 올라에서 구했습니다!
holaworld.io
여기 좋아요
열정과 시간이 있으시다면 디프만이나, 넥스터즈 이런곳도좋아요!
우와 감사합니다ㅠㅠ
사진
안녕하세요!🙂 타입스크립트 질문이 있습니다!! 위 사진에서 dummy의 value 값들('111','2222','3333')만 뽑아내고 싶은데 이것도 뽑아 낼 수 있는 방법이 있을까요..? TS 고수분들 도와주세요 😭
map으로 해결하시면 되지 않을까요?
array.prototype.map() 쓰면 되려나요..? 제가 질문을 제대로 이해했는지 모르겠네요
앗 저 값을 타입으로 알아낼 수 있는 방법은 없을까요?
값 자체를 뽑아내는게 아니고 value에 있는 값만 가지는 새로운 const 변수를 만들고 싶어서요!
const newValue = dummy.map(el => el.value) 이렇게 하는게 아닌가 보네요
혹시 왜 필요하신가요?
다른 방법으로 풀 수도 있을거 같아서 여쭈어봅니다…
라디로 박스를 만들려고해요! 옵션에는 저 dummy가 들어가고 state로 라디오 value를 state로 관리하고 싶은데, 이때 state가 dummy 안의 value가 아닌 다른값이 들어가는 것을 방지하고 싶어서요..!
말의 두서가 좀 없는데 이해하셨나 모르겠습니다ㅜㅜ
그러면 value를 string 말고 원하는 값으로 제한하시면 아떨까요? value: “111”| “2222” 이렇게요
타입을 하나 더 만들어서 사용하는게 가장 베스트일 것 같네요ㅠㅠ 감사합니당👍👍
준팔님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 준팔님 반갑습니다.
안녕하세요~ 반갑습니다~ :)
https://yozm.wishket.com/magazine/detail/1474/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 회사에 다닌다면 공감을 할법만 이야기 공유해봅니다 ㅋ
창원/홈업/강태원님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
타입은 할당할 수 있는 값들의 집합이고 런타임에는 영향을 안미치니까, 런타임 값을 이용해서 제한하는 건 타입으로는 안되고 자바스크립트로 하셔야 하는거 같아요 (blushing)
안녕하세요 창원/홈업/강태원님 반갑습니다.
아, 안녕하세요
반가워요
어서오세요~ 여기는 프론트엔드나 개발하면서 궁금한것들을 묻고 또 답하면서 함께 성장하는 공간입니다. 좋은 자료가 있거나 본인이 쓴 글이나 코드 공유도 좋아요. ㅎ 편하게 글 남겨주세요 :)
요즘 뷰 공부중인데 잘부탁드려요 본업은 앱개발 인데 요즘 웹개발 배우기시작해서 ㅎㅎ
감사합니다!!! 덕분에 잘 이해했어요😊😊
멋쩍은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
멋쩍은 튜브님이 나갔습니다.
멋쩍은 튜브님이 들어왔습니다.
네 감사합니다!!! 잘 부탁드립니다.
안녕하세요 멋쩍은 튜브님~~ 반갑습니다 :)
반갑습니다!
응원하는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
응원하는 튜브님~~ 반갑습니다 어서오세요 ;)
네 안녕하세요!! 개발자는 아니지만 개발자이고 싶습니다. 방갑습니다!
이모티콘 다들 퇴근 잘하세요 :) 오늘도 괜찮은 하루 보내셨길 바라겠습니다!
화이팅입니다!!! 공부하시면 준비하시면서 궁금한 내용들 공부했던 내용들 공유 하시면서 잘 준비하기길 바래요!!
질문드려요! 네트워크 오류가 발생했을 때 팝업을 띄우는 작업을 하는 중입니다. iframe 태그에 대해서도 네트워크 팝업을 적용시키려고 하는데, 예외 처리를 할 수 있는 방법이 생각이 안나더라구요 ㅜ 그래서 방법을 찾아보니 미리 get 요청을 보내 반환값에 따라 처리를 하는 방법이 있었습니다. 근데 막상 해보니까 axios 가 무조건 status 200을 반환하더라구요. 현재 chrome 브라우저에서 확인 중인데 개발 모드에서 axios가 무조건 200 상태값을 반환하는 이유가 있을까요? 아니면 혹시 이 방법이 아니더라 iframe에 대한 예외처리를 하는 방법이 있을지 궁금합니다.
부족한 거 같아 추가적으로 말씀드립니다. 네트워크 패널에서 offline 상태일 때도 axios의 반환값이 200이라는 뜻입니다!
https://infcon.day/teaser 코로나 이후 첫 오프라인 컨퍼런스 같아요!
오..좋네요!!
사진
교수님이랑 손잡...
피그마에서 마우스로 장난 많이 치는데 그거 생각나네요 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ두근이라니
혹시 스터디 구하는 사이트 okky, 인프런, hola 외에 있을까요???
흔들님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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
흔들님, 개발은 어려웡님 부끄러워하는 라이언님~ 모두모두 어서오세요 반갑습니다~
안녕하세요~ 잘부탁드려요
리듬타는 제이지님이 나갔습니다.
카카오 로그인 구현하실 때 다들 OpenID Connect 설정도 하시나요?
어떤 차이가 있는지 이해가 어려워서 ㅠ
김대곤님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
혹시 학부생때 학교연계 인턴 경험이 많으면 (3회 이상) 회사에서 안좋게 볼 수도 있을까요?
14일부터 넥스터즈 신규회원 모집한대요
정영준님이 나갔습니다.
혹시 해보신분 계신가요? 회사 다니면서 해볼만 한가요..?
지난 기수에 붙었는데, 회사도 붙게 되면서 못갔었어요ㅋㅋㅋ ㅜㅜ 그렇지만 면접 볼 때, 참여하시는 분들이 굉장히 열정적인 분들이 많았어서 시간이 되신다면 도전해보시는 거 추천드립니다 ㅎㅎ
저는 벌써 4달이나 지났는데 아직 병행할 엄두가 안나네요 ㅋㅋ ㅜㅜ
저 해봤어요!! 회사다니면서 하기 좀 빡세긴해요 ㅠㅠ ㅎㅎ
혹시 웹이지만 모바일 뷰로 소셜 로그인 서비스 만드실 때, intent 에러 겪으신 분 있나요?
엄지척 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
김대곤님 엄지척 튜브님 모두 모두 반갑습니다. 어서오세요 :)
안녕하세요? 개발 관련해서 궁금한게 많던차에 추천 받고 들어왔습니다. 잘 부탁드립니다.^^
여기가 추천을 받는 공간이 되었군요!! +_+ 감사합니다. 언제든 궁금한 것을 남겨주시면 답변 드리겠습니다. ㅎ 편하게 글 남겨주세요~
감사합니다
저도 추천받아서 들어왔어여 훼훼
저는 렛플도 쓰고 있어요
이거 3개만 해도 사람 많이 보여용
*모여요
엄지척 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
창원/홈업/강태원님이 나갔습니다.
최근 frontend의 트렌드라면 어떤것이 있을까요????
아 면접도 봐야하는군요… (dazed)(dazed)(dazed)
https://tsh.io/state-of-frontend/ 이 사이트 참고해보세요!
감사합니다!
곰젤리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: 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://news.hada.io/topic?id=6536 Google I/O 에서 발표한 2022년 CSS의 상황에 대한 발표입니다. 이렇게 모아두니 2022년에도 개선된 게 정말 많군요! https://web.dev/state-of-css-2022/
시무룩한 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
시무룩한 튜브님 반갑습니다 :)
input password에서 눈모양 클릭하면 평문으로 바뀌는 기능이 있는데 이거 눈모양클릭할때 type을 text로 바꾸면 되려나요??
저는 그렇게 개발했습니다 !! 클릭할 때 마다 type을 password 또는 text로 변경했습니다 ~
넵 확인감사합니다. ㅎㅎ
사진
안녕하세요! 타입스크립트 고수님들 질문 있습니다 ㅜㅜ😭 위 사진에서 A,B 타입을 분리하고 싶은데 좋은 방법 없을까요..
사진 엄청 잘찍으셨네요.. 어떻게 찍으시는건가요..?
이거 codesnap 이라는 extension 사용했어요!
type A = { a?:string; b?:number; }
분리하신다는건 순수 B의 타입인 {b:number} 만 사용하고 싶으신건가요?
하면 a,b 둘다
되긴하는데
저는 B 타입만 분리해서 쓰고싶어서..ㅜㅡㅜ.. 잠시만요!!
Partial을 알아보시면 어떠세요
사진
이런식이면 어때요?
마지막 export는.. isolation 오류때문에 넣은거
한번 찾아볼게요! 감사합니닷
사진
얘가 메소드에서 사용이 되어야하는데 들어가는 변수값에 따라 알아서 A인지 B인지 판단하게 하고 싶은데 쉽지않네요..
아 넵! 함수안에서 타입을 판별해보고 싶다는거조?
넵 맞습니다!! 🥲 혹시 가능한걸까요..?
제네릭을 이용한 if문은 없어요
사진
비슷하게 제 아는분이
리퀘스트 함수 구현한건데
이렇게 하셨더라고요
함수 안에서 파라미터 타입을 자동으로 유추하는 건 위험할 거 같아요
값으로 유추하는방법으로 하더라고요
제가 저 코드를 처음봤을때는 이해못했지만.. 다시 생각나니 한번 다시봐야겠네요
타스는 자스를 안전하게 쓰기 위한 장치인 거고 타스가 하지 말라고 하는 건 자스로 짰을 때 터질 가능성이 있는 건데
method 함수 안에서 if ('b' in value) 이런 방식을 통해서 타입 가드를 세워 주는 게 안전하지 않을까 싶어요
아하 ㅠㅠㅡㅜ react에서 params로 함수를 넘겨받으려고 했는데 그렇군요..!
아! 그런걸 타입가드라고 하는군요
좋은 키워드 얻어갑니다
와 감사합니다 그방법으로 해결해볼게요!!
extends 순서만 바꾸면 될거같은데
순서를 바꾸면 변수에는 적용이 되는데 메소드에서는 안되더라구요..
https://radlohead.gitbook.io/typescript-deep-dive/type-system/typeguard#type-guards 이런 느낌으로 참고해 보시면 될 거 같아요!!
감사합니다!!
배너 메이커(썸네일 제작 사이트) 비슷한걸 만들려는데 보통 이럴 경우 preview로 보여지는 이미지단을 canvas 태그로 하시나요 아니면 다른 방법으로 하시나요?? 저는 canvas태그로 해보려 했는데 미리캔버스, 망고보드 같은 사이트의 구조를 살펴보니 canvas태그를 사용하지 않은것 같아서요!! div와 svg태그로 조합해서 만든것 같은데 (제가 잘못 봐서 그런걸수도) 어떤 방법이 좋을지 궁급합니당
갓….레진 아리아에 대해 가이드가 잘되어있네요 https://github.com/lezhin/accessibility/tree/master/aria
class는 BEM을 사용하나보네용
특정 고객사에게 제공하는 b2b 형식의 웹페이지도 웹 접근성을 고려해야할까요 ??!
b2b는 딱히 크게 신경안써도 될거같습니다
b2c는 워낙 사용자들이 불특정 다수라서 지켜줘야 좋을거같고요
용도에 맞는 태그만 쓰는것만으로 충분할것으로 보입니다
와..
카카오 로그인을 웹이랑 웹뷰에서 사용하려면 javascript sdk를 사용하는게 맞는건가요?
네네 sdk 사용하면 알아서 카카오 앱 켜지더라구요
요거 에러가 머라고 나오나요?
사진
이렇게 나옵니다!
감사합니다! javasciprt sdk로 사용할 때 로그인 요청을 해서 프론트에서 인가코드를 받으 후에 카카오로 토근 요청을 할 때는 rest api를 사용하는게 맞는건가요?
A |B 타입에서 명시가 안됬나보네요
그렇군요~ value 가 A | B 로 추론이 되는군요! 윗분께서 말씀하시던거처럼 타입 가드 하시는게 좋을거 같아요 👍👍 사용자 정의 타입 가드 요런 것도 찾아보세요 👍👍👍
discriminated unions 로 해결할 수도 있어요
와 ㅠㅠ 조언 감사합니다!!
작업중이다가 에러가 나면 에러 노티해주고, 고쳐지는 동안 뭘하시나요?
사진
State of CSS 2022 페이지마저도 CSS가 꺠지네요 ㅎㅎㅎ...
CSS is Awosomeㅋㅋㅋ
ㅋㅋㅋㅋ
styled-component에서 Text라는 엘리먼트 컴포넌트를 div로 생성해서 사용하고 있는데, 혹시 이 html tag를 동적으로 지정해줄 수 있는 방법이 따로 있을까요?
withComponent?
as props
사진
당장 생각나는 건 요런 방식이 있을 거 같아요
(best)
오호 .. 다들 감사합니다!
https://styled-components.com/docs/api#as-polymorphic-prop 라이브러리에서 as props를 지원합니다 ㅎㅎ
어 대박 그러네요 새로운 거 배웠군요 감사합니다!!
이모션에서도 지원하나요 ??!
오..저런 기능이 있었군요
헐~~저런 기능이 있었다니
네 https://emotion.sh/docs/styled#as-prop
충격이군요.. 저런게 있었다니
감사합니다!
당장 Button 컴포넌트랑 타이포그래피 컴포넌트 바꺼야겠네용
withCOmponent로 썡쇼했네요 흐~
헉 as 대박이네요
안녕하세요ㅎ 메뉴를 만들 때 이렇게 옆에 무엇인가 더 있다고 인지를 주고싶어.. 그라데이션을 넣고자 하는데.. 잘안되네요 ㅜ 혹시 이런 효과? 기능은 정확히 뭐라고 쳐야 더 검색해서 알수있을가요?
사진
박스쉐도우가 아닌가요..??
text gradient 를 말하시는건가용…?
gradiant는 저 상황에는 어려울까요?
아 헉 뭔가 당연히 박스쉐도우.. 이너쉐도우 이런거만 생각했었는데...! 헉대박
뭔가 저런 그라데이션 효과를 위에다가 얹히는 개념으로만 생각했습니다
화면을 좀 자세히 봐야할거 같는데 웹뷰라는 가정하에 저라면 내비바 오른쪽 넓이만큼 백그라운드로 linear-gradient 줄거같아요
포토샵 레이어 쌓듯이 텍스트위에 박스 얹어서 근데 그 박스한쪽을 그라데이션 주면 되지않나? 요런 접근으로요...
아하 네네
수도클래스로요
after
수도크래스
너무 이해가 안가용
before after
저 네비바 오른쪽으로 이동하면 왼쪽도 저렇게 표현되나요? 그렇다면 before에도 줄거같네요
아하 ... 네네 ㅜㅜ 감사합니다 ㅜㅜ 다시 검색해서 해보겠습니다 !!!!
헷갈리시면 pseudo element 안쓰시고 그냥 span 같은거 써서 구현하셔도 됩니다 ㅎㅎ
이모티콘 우왕...
as 로 엄청 간단하게 했습니다 감사합니다 🙏
로그인 한번으로 여러군데에서 인증을 사용하려면 Single Sign on 밖에 없을까요
통합인증 시스템 말고는 팀장이 생각도 안해서
타입스크립트 고수분 계실까요? optional로 타입을 받아서 아마도 undefined 일 경우 문제가 나타나는 것 같습니다. Cannot invoke an object which is possibly 'undefined'. 이런 경우는 상위에서 내려줄때, undefined으로 아예내려줘야할까요? optional로 할 시 하위에선 에러가 안나지만 상위 컴포넌트에서 에러가 네요
음 뭔가 구체적인 코드가 있어야 이해가 편할것같아요
사진
해결 후 :
해결전에는 이중 If가 아니라 그냥 저 if문안에서 저 함수를 받아서 돌려주는 식이었습니다ㅜㅜ 타입은 : onChangeImage?: (url: string) => void; 입니다.
onChangeImage?.(result.uri)
이중 if는 타입 피하려고 억지로 한거긴 한데 좋아보이진 않아서요 ㅜ
이건 어때요?
아! 감사합니다. 물음표점…상기시켜주셨네요
이모티콘
위에도 그냥 cancelled 면 return 해줘도 되죠 ㅋㅋㅋ
포유님이랑 Neo님이 말한거 두개를 다 하면 좋겠네요 ㅎ
사진 2장
안녕하세요! 업무중에 퍼블리싱할게 있어서 작업중인데 도저히 답이안나와서 이곳에 질문드립니다.!
지금 header를 sticky 속성을주어서 고정은 잘 되었는데.. 아래에 있는 노란색 박스나, 제목 부분과 겹쳐버리네요.
header가 있는 부분에 background-color를 넣으면 바로 해결은되는데 뒷 배경이 gradient 처리가 되어있어서 어떤 color를 header에 넣어도 다 어색해버립니다 ㅠㅠ
겹쳐 버린다는게 무슨 말인가요?
어떻게 동작하기를 원하시나요?
겹친다는게.. 음 .. header라고 쓰여져있는 부분의 텍스트와 아래 분홍색 컬러의 제목이 겹쳐버립니다. 위에 캡쳐 이미지처럼요!
제가 원하는 방식은 아래 캡쳐처럼 헤더안으로 내용들이 쏙 들어가서 안보이는 방식입니다.. 아래 캡쳐처럼요!
사진
좋은 방법이 있을까요!? ㅎㅎ
position: fixed 가 좋은 선택이 될것같습니다.
픽스, 앱솔루트 속성 모두 안되더라구요..ㅠㅠㅋㅋ
모두 겹쳐보이는게 문제입니다 .. 하 ㅎㅎ
컨텐츠 상단에 어느정도 패딩주는건 어떨까용
header 뒤에
저 갈색 배경의 section 아래에도 컨텐츠가 많아서 스크롤이 꽤 긴 페이지라 padding도 한계가 있을 것 같습니다.. ㅎㅎ 의견 감사드립니다!
노란색 박스를 숨기고 싶다는 말씀이신가요 ?
넵 그렇습니다 !
노란색 박스가 header랑 height가 동일한가요 ?
그렇지는 않습니다!
z-index 주셨어요~?
header부분의 z-index가 더 높습니다!
?
그럼
지금 문제 없는 거 아닌가요 ?
사진
구현하고자 하시는 의도를 이해하지 못하겠네요 ㅜㅜ
헤더에 배경을 넣으시면 되지 않아용~?
이렇게 스크롤을 내리다보면 제목을 만나게되는데 저렇게 겹쳐보이는것을 없애고 싶습니다..!!
헤더에
헤더에 배경을 넣으면 바로 해결되는데, 뒷배경이 gradient 속성이 되어있어서 어색해가지구
백그라운드색상..?
헤더에 동일한 background를 주면 되지 않나요 ?
아아 스크롤내리면
그래디언트가 달라보이겠네여
넵 이게 정답인데 .. 그라디언트 속성이 뒷배경에 걸려있어서 뭔가
디자이너분이랑 상의하는게 제일 빠르겠네요 여러분들의 말씀을 들어보니...ㅋㅋㅋㅋㅋㅋ
아아 뒷 배경이 그라디언트이군요
사진
죄송해요 도움 드리고싶었는데 ㅜㅜ
약간 이런느낌이 되어버려서..ㅋㅋㅋㅋㅋㅋ
방법이라면
<div class="gradient"> <header></header> <content></content> <div>
content는 남은영역 모두 차지하게 하고 하면
오버플로우시 스크롤하면 되지않을까요?
사진
뒷배경과 헤더 배경을 일치시키면 깔끔하긴 합니다.. ㅎㅎ
그라디언트 배경을 이미지로 짤라서 쓰면 안되나요…?
이방법도 한번 테스트 해보겠습니다! ㅎㅎ 감사합니다
라이엉님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
react-query에서 hydrate라는 용어를 뭐라고 받아들이면 쉬울까요?
구글이 아주 흥미로운걸 소개했어요!
Sleepy Ryan님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
라이엉님 슬리피 라이언님~ 반갑습니다 :)
와!! 웹에서도 이런게 나오는 군요 좋은 정보 감사합니다
https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter 백드롭 필터 같은걸로 해보세요~ 맥이 좋아하는 불투명 유리창 필터 같은걸로 하면 괜찮지 않을을까 싶네요
튜브낀 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 리액트로 개발하고있는데요
app.css common.css 등 공통으로 적용될만한 것들을 css 로 import 해서 기본적으로 사용하는데
보통 ㅇ ㅓ떤 기준으로 두 공통적 css를 나눌까요?
보통 app.css는 처음 CRA 이후 뜨는 리액트 화면 CSS라 잘 안쓰는것 같고
src폴더 경로에 styles폴더만든다음 안에 global.css 넣어서 많이 사용하는것 같아요
저도 첫 CRA하고 나서 app.css는 지우고 global만들어 전역스타일로 사용하는 편입니다~ styled components에서 제공하는 ThemeProvider도 사용한다면 theme.js까지 추가해서요!
감사합니다!
cra의 전유물같은거군요 ㅋㅋ
혹시 netlify 로 배포하실 때 아래 이미지 같은 에러 해결해보신 분 있으신가요?ㅠㅠ
사진
로컬에서 빌드해도 잘 되나요?
네 로컬에서는 빌드가 문제없이 잘 됩니다 ㅠ
빌드 스크립트 앞에 CI= 붙여보시겠어용?
그래도 동일하더라구요 ㅠ
구글링해보니 CI= 붙이거나
환경변수에 CI false설정도 다 에러가 나서 ㅠㅠ
저기 링크 누르면 뭐라고 나오나요?
Https://ntl.fly …
package.json 보여주세용
stackoverflow처럼 에러코드에 관련 질문 모음이라 이것도 참고하면서 보고 있습니다!
사진
package.json입니다!
저기 build에
넵
export CI=false 앞에 붙여도 안되는거죠?
그 netlify 빌드 세팅 쪽에서 CI flase는 해봤는뎁 package.json에는 안해봤습니다.
아아 netlify 설정에 그런게 있군요
사진
넵 따로 이렇게 빌드 세팅이 있더라구요
로컬에서는 되고 ci에서 안되는거면 가능성이 그게 제일 커보이는데....
사진
안녕하세요! Next.js 프로젝트인데요 /kbo 에서 팀을 고르고(Twins) 그 다음에 /kbo/Twins/position 에서 투수 타자를 고른 후 그 /kbo/Twins/pitcher 에서 투수 리스트를 보여주는 식으로 라우팅을 구성하고싶은데요 위처럼 구성하면 안될까요?
그렇군요.. 고민해주셔서 감사합니다! 계속 구글링 해봐야겠네요 ㅠ
CI=false npm run build
한번 해보시고 빌드 로그 한번 보여주실 수 있나요? 넷리파이에 보여지는거?
넵 잠시만요!
사진
위 이미지 입니다!
혹시.... node_modules를 같이 올리셨나요?
Node version이 안맞나 싶기도 하고 그렇네요 음…
아뇨 그건 아닙니다 ㅠ 우선 공유해주신 글로 SWC 오류 해결해보겠습니다!
Netlify 내 빌드시 사용되는 노드 버전이랑 로컬 노드 버젼은 일치할까요?
근데 원래 배포 잘 되다가 오늘 갑자기 안되는거에요?
아뇨 다릅니다!
아뇨 개발 초반에 한 번 테스트로 진행했을 때는 문제없이 배포해서 이번에 다시 배포를 해보려고 하는데 계속 에러가 나네요 ㅠ
노드 버젼 다르면 동작이 다를수 있거든요 로컬 노드 버젼을 넷리파이랑 맞추고 한번 로컬에서 테스트 해볼 수 있을까요?
엇 콘솔에서는 배포 됬습니다!
node modules랑 package-lock.json 지우고 npm install 했더니
메이저버젼음 일치하고 마이너만 다르다는 뜻이겟죵?
콘솔 에러 없이 배포는 했는데
이게 page not found가 뜨네요..
사진
요거 혹시 조금 더 자세히 설명해주실 수 있나요? ㅠㅠ
노드 버젼이 다르냐고 제가 물어본건 12 냐 14냐 16이냐 와 같은 메이져버젼이 다른지 여쭤본거였여서요 노드 버젼이 달라도 별 문제 없다고 말씀해주셔서 마이너버젼만 다르다(예를 들면 넷리파이는 14.1 로컬은 14.2 ) 고 저는 이해했어요 ㅎㅎ
아하
노드 버젼이 다르면 package-lock.json 최상단의 lockfileVersion이 달라서 다르게 동작할때가 있어서요 ㅎㅎ…
오 그렇군요!
netilify node는 16.15.0 이고 제 로컬은 17.0.1인데 문제는 없는것 같네요!
16으오 해서 해보세요
17은 lts 아니라서 좀 다를 수 있어요
큰 문제 없을거 같긴 하지만 그래도…
오 넵 알겠습니다!
https://velog.io/@kanikim/번역-엘든링에서-배운-프로그래밍-학습에-필요한-7가지 재밌는데 공감이 되어서 가져와봤어요 ㅋ
프엔이 근육돼지라니
ㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋ 주옥 같은 멘트들이 많습니다. #include <stdio.h>는, 이런 것이구나하고 "주문"처럼 패스합시다. 스탯을 다시 찍는 것은 힘들기에 게임이 진행되면 진행될수록 스킬트리를 변경하는 것은 어렵습니다. 프로그래밍 학습은 오픈월드입니다. 적(모르는 내용)은 하나하나 제대로 이해해서, 개별 격파를 목적으로 합시다. 역으로 말하면, 과거에 그 패턴을 만났던 적이 있는지 없는지에 따라 승패가 결정된다고 볼 수 있습니다. 장비 강화로 전투가 한번에 쉬워지는 것은 아닙니다. 실패를 다시 만드는 것이 중요합니다.
역시 공부를 게임처럼해야 좋군욬ㅋㅋㅋ
혹시 노마드코더 유튜브클론들어보신분계신가요?
폼 유효성 검증 라이브러리 사용하려 하는데 formik과 react-hook-form 중에 뭐가 더 괜찮을까요? 사용해 보신 분 있으신가요
저 들어봤어요
저는 비교해보진 않았고 리액트 훅 폼 먼저 알게 되어서 사용해봤는데 사용법도 잘나와 있고 쉬워서 금방 적용했었어요.
이메일 폼에 쓰였는데 간단하게 사용하기 좋았습니다 ㅎㅎ
아 그리구 IE 지원도 돼요. 이젠 거의 필요없겠지만
대신 버전 다운그레이드가 필요합니다..!
리액트 모르는 초보가 접근 하기엔 좋아요! 니코 설명을 좀 잘해서
오오
챌린지 프로그램 하시먄 좋습니다
얻은양식은 많은데 하고나서 몸과마음은 파사삭됩니당
저 기본적인 자바스크립트개념은은아는상태고 비동기개념이많이부족한상탱ㅂ니다 리액트배우기전에한번 서버도같이배워보고싶어서들어볼까하는데 혹시 어떠셨나요?
저 기본적인 자바스크립트개념은은아는상태고 비동기개념이많이부족한상탱ㅂ니다 리액트배우기전에한번 서버도같이배워보고싶어서들어볼까하는데 혹시 어떠셨나요?
저 기본적인 자바스크립트개념은은아는상태고 비동기개념이많이부족한상탱ㅂ니다 리액트배우기전에한번 서버도같이배워보고싶어서들어볼까하는데 혹시 어떠셨나요?
죄송합니다. 제가 너무 늦게 확인했네요. 리액트 언급 하셔서 혹시 유투브 클론 코딩 리뉴얼 되었나 했는데 그대로네요 :)
유투브 클론 코딩 좋은 강의라고 생각하고 배울 부분도 많았지만, 메스가 커서 시간을 많이 잡아먹는다고 생각해요 :)
그리고 강의 커리큘럼 체크해보면 Express 로 프론트, 백 둘다 담당하고 있고 form 이용해서 GET, POST 위주로 돌리는게 많아요. 그래서 실제로 RESTful API 로 서버 돌리는 거랑은 체감 차이가 좀 있다고 생각해요 :)
그래서 프론트앤드 준비하시는데 서버쪽을 배워보고 싶으시다면 Express 만 뚝 떨어져있는 RESTful API 백앤드 서버 구현 이런 강의가 시간도 짧고 간단한 구조라서 이해하기 쉽지 않을까해요!
아그렇군요 민석님은 유튜브클론코딩강의듣고 노마드 리액트강의들으신건가요?
저는 유투브 클론 코딩 듣고, 해당 스펙으로 개인 토이 하나 하고 리엑트 했었어요 !
그리고 비동기 부분은 음,,, 아마 지금 시점에 다시 강의를 보면 어떨지 모르겠는데
비동기를 정확히 이해 못하고 있는 시점에서 듣는다고 생각하면 비동기 관련해서는 놓치는 부분 생길 수도 있을 거 같아요
혹시 MongoDB 사용해보셨으면
GET /list/{사용자ID} 이라는 요청 시 존재하지 않는 사용자 ID로 요청하는 경우에 API에서 [200 성공 + 빈 배열]을 반환해주던데, 제 생각은 요청이 잘못된 경우이므로 400대 오류를 반환하는게 어떨까 생각이 드는데, 이런 부분은 정답이 없는 걸까요?
인프런에 MongoDB 에서 mongoDB 기초부터 실무까지(feat. Node.js) 커리큘럼 봐보셔도 좋을 거 같아요
답변감사합니다
화이팅입니당,,!
저였으면 404로 짰을 거 같은데 200도 일리는 있다고 생각해요
GET에 body값 넘기는 경우는 드문가요?
Get은 바디가 안들어가서..
자답하면 실제로 논란이 있군요.. 200 vs 404...
토이플젝 중인데 백엔드분이 GET에 쿼리를 body로 짜주셨네요...ㅠㅠ
ㅋㅌㅋㅌ저도 그런적있었는데,,, 아마도 postman 같은거에서는 GET 메서드에서도 바디에 담겨서 그런거 아닐까요
바디 자체는 되지 않나요? 권장하지 않을뿐이지.. 얼마전에 김영한님 강의에서 들었던 듯한데
GET - 메시지 바디를 사용해서 데이터를 전달할 수 있지만, 지원하지 않는 곳이 많아서 권장하지 않음
넵 저도 postman에서 지원하는걸 확인해서 궁금했었어요
플러터에서 get 보내는 라이브러리 모두 body에 data 담는 것이 구현 안되어있어서 당황했습니다 ㅎㅎ
공짜 니코 자바스크립트 강의도 있고 mdn문서보시고 공부좀 하고 가시면 좋을거 같네요
니꼬쌤 강의 강추요!! 바닐라JS 무조건 들으세오 ㅎㅎㅎ 챌린지는.. ㅎㅎ 변명이지만~ 야근하고 하느라 2주차때 코딩제출하는거 두번 못했다가..ㅜ 실패했찌만… 또 도전할거에요!!! ㅎㅎ 그정도로 좋고 유익한거 같습니다
그 뒤에 유료강의코스도 있는데, 이것도 비싼편도 아닌거 같고.. 좋은거 같더라고요 ㅎㅎ 저도 완전 초보입니다 ㅠ
민석님 말대로 비동기 개념이 부족하면 힘들긴 하지만 그때그때마다 레퍼런스 찾아서 공부하시고, 전체적인 서비스를 하나 만들어보고 워크 플로우를 익히기에는 오히려 강의 메스가 가격대비 전 커서 좋았던거 같네요 … (기술보단 챌린지하려고 강의를 신청했던 케이스인데 슬쩍 훑어는 다봤는데 간단히 media도 다루고 그 부분 괜찮았네요. 사실 챌린지도 이 강의는 쉬워서 초보자도 할만할거에요!)
답변 다들감사합니다
삭제된 메시지입니다.
삭제된 메시지입니다.
혹시 const arr =[123, 456, 789]; 일때 arr[0]의 1에 접근하고싶은데 배열의 어떤 함수를 참조하면 좋을까요? 아니면 다른걸 참조해야할까요? 1 따로 2 따로 3따로 변수에 저장하거나 반복문으로 돌리려구요..!
단순하게 생각해보면 arr[0]을 string형태로 캐스팅한다음에 [0]을 참조하면 되지않을까요?!
아니면 %를 써서 모듈러연산을 하는 방법도 있을것같습니다
초보자인 저에겐 설명이 좀 어려운것같아요 ㅠㅠ 답변감사합니당..
사랑하긴했었나요스쳐가는인연이었나요짧지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 CSS님~ 반갑습니다 :)
split('') 함수로 나눈 다음 받아오는건 어떠세요?
사진
아..!
이모티콘 감사합니다!!
안녕하세요!! 토이프로젝트 진행중인데 혹시 vercel 제외하고 무료로 http 배포가 가능한 서비스가 있을까요 ㅜㅡㅜ?? 관리자, 웹앱 두 개 배포해야하고 웹 앱은 Docker까지 설치해야합니다! 그냥 AWS 쓰는게 가장 좋을까요??
잘 모르긴 하는데 경험상 공부 목적이 있는 거라면 이러니저러니 해도 돈 살짝 내더라도 aws 쓰시는 게 개인 성장에는 제일 좋았던 거 같긴 해요
프리티어면 돈 거의 안 나가기도 하구요!
헉 네!!! 그럼 AWS로 공부할겸 해볼게요 ㅎㅎ 조언 감사합니다!
AWS로 하시면
key관리 잘 하세요
이메일 항상 확인 하시고
최근에 3억 청구 받으신 분..
ㅋㅋㅋ
깎아줘서 6400내라는데..
아찔하네요……
무섭네요
혹시 그분 어떻게되셨는지 아시는분계신가요..
덜덜
저도 예전에 키 도난돼서 3만불인가 청구된적 있었는데 사정 말했더니 없애주긴 했어요 ㅠ
저는 그래서 토이프로젝트 깔짝거려본 후로는 그런 소식이 무서워서 바로 탈퇴했습니다..
netlify나 heroku도 추천드립니다
좀.. 무섭네요…ㅋㅋㅋㅋㅋㅋㅋㅋ ㅜㅜ
좌절하는 프론트님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
쑥쓰럽게 인사하는 프로도님~~~ 반갑습니다 어서오세요 :)
헐..
???
태오님 안주무셨어요? 반갑습니다!
네~ㅎ 환영합니다. ㅎ
항상 벨로그 잘 보고있습니다. (--)(__)
고맙습니다. ㅎ 벨로그나 기타 다른 내용 뭐든 궁금한게 있으면 여기에 글 남겨주시면 제가 최대한 답변드리도록 하겠습니다. ㅎ
앗 ㅋㅋㅋ 넵 말씀만으로도 너무 감사합니다
응원하는 튜브님이 나갔습니다.
김진혁님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
안녕하세요 김진혁님~~ 반갑습니다 :)
안녕하세요
미션 컴플릿
안녕하세요!
안녕하세요
엄지척 제이지님이 나갔습니다.
저 궁금한게 있는데요
why so 시리어스
1. MSA를 하는 이유가 뭔가요? 2. MSA를 도입하는 회사들의 특징 3. 향후 MSA는 보편화되는지
이 3가지에 대해서 알아보려면 뭘로 검색해보는게 좋을까요??
what msa
mas benefits
mas
msa
msa trend 이런 키워드로 검색을 해보세요
why msa 로도요
네네
근데 국내에서 msa로 제일 유명한데가 어딘가요??
쿠팡으로 알고있어요.. 근데 그들도..레거시라고 내부에서 이야기가 많은걸로..흠;; 이건 다른분이 이야기해주시길 ㅠㅠ
쿠팡이요?? 쿠팡 msa라고 찾아봐야겠네여
전에 버킷플레이스 서버도 MSA로 재구성했다는 글을 본 적 있어서 공유 드려볼게요 https://www.bucketplace.co.kr/post/2021-11-19-오늘의집-msa-여정-part-1-시작/
우형도 있을걸요 ㅋㅋㅋ
근데 회사에서 msa 도입하자고 하면 주도적으로 하자고 하는건 개발팀인가요?
감사여
웬만큼 알려진 회사들 중에 msa 구조 아닌데를 찾기가 더 힘들거에요
국내는 아니지만 보통 넷플릭스 사례를 msa 공부할때 제일 많이들 보시는 것 같아요
네네 그거도 한번 알아볼게여
이모티콘
감사합니당
저 근데.. 몇개 좀 찾아보긴 했는데
사진
그러면 개발조직이 큰 회사여야 도입이 가능한건가요??
작은회사에서 도입할필요는 없는거같아요!
그렇군요..
msa 를 위해 보통 작은 조직들은
msa를 대비한 아키텍처를 적용시켜둡니다
헥사고날도 있고
cqrs같은 애들도있고
미래에 스케일업 하는걸 대비하는거죠
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
헥사고날 cqrs는 뭐죠..? 죄송합니다 개린입니다
육각형 아키텍쳐 CQRS 패턴 이라고
시스템 아키텍쳐 관련 디자인 패턴이라고 생각하시면 됩니다.
우리가 스프링을 사용하면
기본적으로 레이어드 아키텍쳐가 적용되어있고
이걸 3 티어 패턴이라고 부릅니다
모델 - 뷰 - 컨트롤러 -> MVC
각 계층이 VO 라는 데이터 인스턴스를 주고받으면서 소통을 맞닿아있는 계층끼리 통신을 합니다
하 오랜만에 백엔드 관련 이야기하려니 빡시네요.. 검색해보시면 더 좋은 레퍼런스들이 차고 넘칠겁니다.. 또는 고수님이 글 남겨주실거에요..ㅠㅠ
네 좀더 알아볼게요 고맙습니다
이모티콘
츄리닝안경 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
추리닝안경 네오님~~ 반갑습니다 어서오세요 :)
안녕하세요😊 잘부탁드립니다
kong님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
삭제된 메시지입니다.
kong님 어서오세요! 반갑습니다 :)
안녕하세요! :)
콩님 반가워요
환영합니다 여기는 프론트엔드나 개발을 하다가 궁금한 것들을 서로 묻고 답하며 함께 성장하고자 하는 공간입니다 ㅋ 뭐든 궁금하게 있다면 편하게 글 남겨주세요~~~~~
사진
안녕하세요! 저 빨리해야하는데ㅠㅠ 너무 안돼서 여쭤봅니다.. aws EC2에서 하라는대로 nvm설치 후 node를 설치하는데 왜 안되는걸까요ㅠㅠ 혹시 같은 에러를 겪으신 분이 계실까요🥺
nvm use 와 같은 커맨드가 있었던거같은데..
nvm use 18.1.0 인가..?
ㅠㅠ 답변감사합니다..! 근데 안되네요ㅠㅠ
에러 메세지대로 해보셨어요?
넵.. 이게 node 18버전부터 안되는 것 같아서 ㅜㅜ 다운그레이드 중입니다..!! 배포 너무 어렵네요
안녕하세요. 현재 디자이너분이 주시는 대로 프로젝트를 구현하고 있지만 저도 ux분야에 대해 공부해보고 싶어졌어요! 혹시 좋은 ui ux란 무엇인가에 대한 책 추천해주실 수 있을까요??😄
사진
사용자 ux 경험이야기 ㅊㅊ 드려요
kong님이 나갔습니다.
Herb님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
Herb님 반갑습니다 어서오세요 ;)
Teo 선생님 안녕하세요, 벨로그에서 링크를 타고 넘어온 Herb라고 합니다. 카카오톡 오픈채팅은 처음이라서 떨리네요... 잘 부탁드립니다!
감사합니다!!!
벨로그에 썼던 내용이니 다른 개발 얘기중 궁금한게 있다면 얼마든지 글 남겨주시면 바로바로 대답드리고자 하고 있습니다. 그 밖에 다른 개발자들에게도 뭐든 궁금한게 있으면 서로 묻고 답하며 함께 성장하고 있는 공간입니다~ 편하게 글 남겨주세요 ㅎ
이나*
안녕하세요~ 혹시 타입스크립트를 실무에서 쓸 때 활용할 수 있는 실용적인 강의나 책 추천해주실 수 있을까요? 지금은 타입스크립트를 거의 타입 선언용으로만 (자동완성용으로만) 써서 제대로 쓴다는 느낌이 안들어서요.. 가끔 Omit 정도의 기본적인 유틸타입 쓰는 정도가 최대 응용이었습니다. 실무에서 좀 더 본격적으로 응용해서 쓰고싶은데 그게 어떻게 하는건지 (다들 어떤식으로 쓰는지) 감도 안오다보니 강의나 책을 찾고 있습니다.
현재 타입스크립트를 쓰면서 TS에러나 경고는 다 수정을 하나요?
넵 그렇습니다!
그러면 이미 너무 잘하고 계시는거에요 ㅋㅋ 타입선언용과 자동완성용으로 쓰려는 목적이 맞으니까요 ㅎ
타입스크립트를 먼저 공부하시기 보다 쓰는 프로젝트의 범위를 넓혀보시기 바랍니다
오..그런가요?? 조언 감사합니다!!
도구를 먼저 익히면 안 써도 되는 기능을 억지로 쓰려고 해서 오버 엔지니어링이 되기 쉬워요
내가 알고 있는 타입스크립트 지식으로 도저히 안 풀리는 에러가 있을때 그때 이 경우는 뭘 써야 하는 거지?! 하면서 타입스크립트 유틸쪽을 파면서 공부를 하시고
복잡한 스키마를 다루는 경험을 하면서 interface extends exclude 등의 복잡한 타입정의가 필요해지게 될거에요
아하...!
진현 | https://github.com/type-challenges/type-challenges/blob/master/README.ko.md 타입스크립트를 공부하려고 찾던중 타입스크립트 챌린지라는 걸 찾아서 공유합니다!!
타입 정의 외에 또 다르게 활용할 수 있는 방법이 있는건가?!? 했는데 그렇군요 ㅎㅎ
예전에 저희 방에서 알려준 퀴즈 스타일의 타입스크립트를 공부하는 사이트입니다! 도구는 이런식으로 뭐가 있는지 정도는 배우시지만 오버엔지니어링은 주의하면서 프로젝트의 범위를 넓혀보시길 바래요
오 이거 넘 좋네요!!
https://youtu.be/hBk4nV7q6-w 저는 이거 최근에 봤는데 엄청 도움됐어요
오 감사합니다!
혹시 팀 전체가 확인하기 편하고 코멘트를 추가할 수 있는 QA툴이 있을까요? 무료이면서 좋은 QA툴을 찾고 있는데 추천해주시면 감사드립니다~!
오늘은 잼있는 code deploy 구축
이글너무좋네요
잘은 모르겠지만 참고가 되실까 싶어서 공유 해봅니다. https://www.jetbrains.com/ko-kr/lp/tracking-tools-review-2019/
감사합니다!!
안녕하세요 오픈소스 컨트리뷰션 아카데미 참여해보신 분 계실까요? 멘토로 신청해보고 싶은 프로젝트가 있는데 직장인이라 시간이 될 지 걱정됩니다.. https://www.contribution.ac/
멘토가 아니라 멘티입니다 ㅎㅎ;;;
운영방식이 프로젝트마다 달라서 시간 부분은 정확히 말씀드리기 어려운데 충분히 가능하다고 생각됩니다
감사합니다!!
작년 참여했었는데 직장인 분들도 1/3 정도 있었어요
다들 멋지고 부지런하시네요.. 존경스럽습니다
좋은정보 감사해요~~!
안녕하세요 git 관련해서 질문 드리고 싶은데 사진과 같은 상태에서 1. dev 브랜치로 feat 1,2,3이 모두 PR을 한 번에 올리는 것 2. feat1의 PR을 만들어 승인된 후에 feat2에서 dev 브랜치를 fetch하고 나서 PR 만드는 방식을 반복하는 것 어떤 방식이 맞는지 궁금합니다,,
사진
저는 충돌날까봐 2번방식으로 처리하긴했어요!
감사합니다!!!
팀에서 하기 나름이긴 한데 피쳐들끼리 컨플릭이 많이 나는 상황인가요?
각 피쳐마다 수정파트는 달라서 컨플릭트는 안 생길 듯 합니다
1번으로해도 conflict나면 2번 과정이 필수이지 않나요.. 라고 치고있었는데
1번 방식으로 해도 먼저 작업된게 머지되면 새로 올린 피쳐에서 develop을 풀 받고 또 다음 올리는 작업에서 피알 올리기 전에 풀 받고 했어요
아하 그러면 1번으로 하셔도 문제는 없을 거예요 다만 머지하기 전에 dev 리베이스하셔서 문제 없는지 확인하는 건 꼭 필요할 거 같아요
각각은 문제없는데 합치고 나니 터지는 경우가 종종 있어서
감사합니다 여러분ㅠㅠ!
이모티콘
리팩토링 2판에서 본 이야기인데 작업하면서 거의 매일 메인을 풀 받는 습관을 들여라 라고 하더라고요
꼭들여야겠습니다,,
요거 예전팀장님이 처음에 알려주시더라구요. 작업하기 전에 항상 pull 받고 하라고
좋은 말씀들 감사합니다
이모티콘
이모티콘
어 저 이거 쓰는 사람 첨봐요..
이모티콘
이모티콘
이모티콘
저도 저만 쓰는줄 알았네요
이모티콘 동지가 있었네요
이모티콘
이모티콘
이런게 있네요 웃고갑니당
이모티콘
혹시 리액트에 props 타입 지정할때… 조건에따라 타입지정 가능한가요? 예를들어 a가 1이면 A타입 props, a가 2면 B타입 props 처럼요..
infer 또는 extends 를 검색해보시면 될 것 같습니다.
!!!!! 감사합니다
props extends { a: 1 } ? propsA : props extends { a: 2 } ? propsB : never
{ a: 1; data: A; } | { a: 2; data: B; } 이런 식도 가능은 할 거 같아요
개발자 이력서를 만드는 서비스에서 기록한 이력서 작성팁이라네요~ 내용이 좋아보여서 공유 드려봅니다~ https://realdeveloper.pro/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%9D%B4%EB%A0%A5%EC%84%9C-%EC%9E%91%EC%84%B1%EB%B2%95#%EB%B2%A4%EC%B9%98%EB%A7%88%ED%81%AC
오 최근에 이력서 고민이 많았는데 감사합니다 !
감사합니다 !
진짜 좋다
노션에서 링크 붙여넣었을 때 아래 이미지 처럼 나오는 기능을 어떤 기능이라 불리나요? 리액트로 구현을 해보고 싶은데 명칭을 모르겠네요 ㅎ.. ㅠ
사진
open graph scrapper npm 이렇게 검색해보세요
넵 감사합니다!
메타 태그로 설정했던거같아요~
자바스크립트개발중에 컴포넌트별로 개발한다는게 혹시 어떤말인가요? 아직 리액트나 뷰공부해본적은없는데 자바스크립트공부할때 컴포넌트별로 개발하는것도 따로배워야하나요?
리액트나 뷰를 하게 되면 자연히 알게 됩니다~ 화면를 만들때 재사용이 가능한 독립된 조각으로 만들어서 조립하는 방법을 말합니다
빠밤님도 간접적으로 컴포넌트 기반 개발이 뭔지 읽아보시면 좋을것 같아요
컴포넌트는 알면 알수록 심오한 개념같아요
한번읽어보겠습니다 감사합니다!
https://kofearticle.substack.com/archive?sort=new FE글 중 좋은 글을 번역해서 공유 하는 사이트입니다 좋은 컨텐츠가 많네요
뉴스레터도 가능해요!
와우
되게 트렌디하고 좋은 글 많이 번역해주셔서 좋드라구요 ㅎㅎ
진님이 나갔습니다.
승훈님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/2pwX6y9dwj
승훈님이 나갔습니다.
https://twitter.com/corona__live/status/1526183838896226304?s=21&t=Jzxyw6Hggq70g8hIhZweow 코로나 라이브 서비스 종료하나봐요
덕분에 엄청 도움됐는데 마지막까지 멋짐 뿜뿜이네요
우와 정말 멋지네용
힙합맨 제이지님이 나갔습니다.
여러분들은 채용공고 보실때 어떤점을 주로보시나요..?
기술스택이랑 기업문화용
개인적인거니까 참고만부탁드립니당
이모티콘
스택 문화 서비스 제가 할 업무 등등 보고
기술스택이라고하면 구체적으로 어떤점인가요...? 본인이 하고 싶은 기술 스택과 맞는지?
맘에 들면 그 회사 같이 일 할 사람들 이력이나 깃헙 링크 있으면 깃헙까지 봤어요
이번에 회사에서 자유양식으로 작성중이라.. 다양한 의견 환영합니다!!!
이모티콘
다른 회사에서 하신 인터뷰도 종종 있어서 그런거 보고 어떤 인재를 원하는지 참고하기도 했어요
1일단 제가 활용가능한 언어를 사용하는지 2활용가능한 언어와 유사한지욥 (2에대한 설명)->유사하다면 배우는데 효율적이고 업무하는데도 지장이 없을테니까요
아 저도 그런것같습니다
연봉이요 ^^
젤 중요한걸 빠트렸네요 ㅋㅋ
0순위 연봉 1순위 R&R 2순위 협업방식/협업문화/사내문화 3순위 기술 스텍
웹/앱 프론트앤드에서는 무슨 기술 스택을 쓰든 시장에서 거의 사장된 기술스택이 아닌이상 크게 상관이 없다고 생각합니다. 정말 뒤쳐지거나 안좋은 기술을 사용한다면 제가 나서서 고치면 된다는 주의라서요!
핸드폰엔 개발자 도구가 없는데, 모바일 웹에서 에러가 뜨면 어떻게 에러를 발견하시나요?
모바일뷰로 웹을 만들었는데, 웹에선 잘만 되는게, 모바일에서 일부 통신이 잘 안됩니다. 모바일에서 리덕스 스토어나 로컬스토리지를 볼 수 있는 방법이 있을까요?
일부 통신이 안된다면 웹뷰 브라우저를 의심해봐야겠네요.
해당 통신을 android webview 나 ios webview와 함께 연결해서 검색해보시겠어요?
이 방법은 저도 궁금하네요 있다면...?
통신에서 잘못된 건지, 아니면 리덕스 스토어에 값이 빈 건지, 상황을 알아야 뭘 의심하는데 흠.. 개발자도구가 없어서 어디가 에러인지를 모르겠어요
vconsole 모바일에서확인 가능해요
오 안 그래도
그거 보고 있었어요
쓰구있는데 좋습니다 스토리지도 보이구
감사합니다
한 번 써보고
후기 얘기해드리겠습니다
저는 휴대전화 데탑에 연결해서 사파리 콘솔창보거나 에러 로그 서비스 이용합니다
데탑이 window고 휴대전화가 ios라도 상관없나요?
안해봐서 그 부분은 모르겠습니다 사파리 있으신가요? 잭 연결하신 뒤에 개발자 도구에서 해당 휴대전화에 띄운 사파리창 있으면.. 되는거고 없으면 안될거에요
리듀서 스토어값도 제공하던가용?
리덕스를 안써서 거기까진 모르겟네요ㅠ
알려주셔서 감사합니다 ㅠㅠ
!!
질문있습니다..! Web API랑 window객체랑 무슨 연관이 있는건가요?
아니면 차이점이라던지요.. 구분이 되지않는것같습니다
22
삭제된 메시지입니다.
여러분 혹시 이 말이 무슨 말인지 이해하신 분 계실까요?? 제가 환경변수 파일 안에 리액트 프로젝트 네임은 변경 후 터미널에서 리액트 재시작 하고 Id와 비번 입력했는데 로그인부터가 안되네요 ㅠㅠ
사진
react-query 쓸 때 커스텀 훅으로 사용하는데 hooks 파일안에 파일이 많아지는건 어쩔 수 없는거겠죠..?
그래서 다른 구조로 개발하시는 분도 봤어요
아 그런가요? 혹시 어떤 구조일까요?
전역으로 사용되는 쿼리, 훅은 hooks폴더에서 관리하고, 지역적(특정 페이지, 컴포넌트)에서는 컴포넌트 파일 안에 hooks파일을 따로 만들더라고요
그게 진정 맞는 것인지는 잘.. 모르겠으나 아마 프엔공부중 님처럼 고민한 것 같다는 느낌이 들긴했습니다
아 아예 컴포넌트에서 훅스 파일을 또 한번 생성하는군요..
조금더 효율적인 구조를 고민해봐야겠네요 ㅎ 답변해주셔서 감사합니다!
단어 선택에 오류가 있어요 ㅋㅋ 다시 정리하면, 전역에서 사용되는 쿼리는 hooks에 파일을 두고, 특정 페이지, 컴포넌트에서는 그 안에 hooks라는 폴더를 만들어놓고 사용하는 걸 봤어요
보통 리액트 쿼리를 사용하면, 웬만한 경우에서는 api 요청을 리액트 쿼리를 통해서 하다보니까 api 요청 함수까지 같은 파일에 두는 것도 보고.. 딱히 정답이랄 건 없어보여요
그렇군요.. 아무래도 프로젝트 환경이나 구조에 따라 유동적으로 고민해봐야겠네요 ㅎ