안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아항! 답변 감사합니당!ㅎㅎ
실무에서 new Map, new Set을 활용하는 경우가 있나요?
array에서 중복값 제거할때 set은 쓸 일이 있을것 같네요 map은 사용한 기억은 없슴다
다루는 데이터 개수가 몇천 개 되는 어드민에서 map 쓴 적 있습니다
Map이 더 좋지만 Object에 익숙하고 Object로도 왠만하면 처리할 수 있어서 Object를 사용하는 느낌 아닌가요..? ㅎㅎ
Set은 알고리즘공부하면서 중복제거할 때 써본 경험 빼고는 없는 것 같고 Map은 방금 처음 알게 되었는데 Map이 사용할 곳이 있을까 엄청 궁금하네요
취향인거같아요 해쉬테이블 자료구조가 필요하다면 굳이 안쓸필요는 없는정도 object는 저수준, map은 고수준 api라고 생각하시면 될거같아요
아 제가 경험이 적다보니 잘 몰랐습니다. ㅎㅎ 답변 감사합니다~
저는 Map이 무조건 더 좋다기보다는 읽기가 더 많냐 쓰기가 더 많냐 기준으로 Map, object 사용을 나눠요!
물론 이것저것 고려하는데 시간이 들다보니 급하면 다 object로 사용합니다
자세하게 좀 더 설명 해주실 수 있나요?
아 확인해보겠습니다~
경우에 따라 사용이 달라요 Map이 더 빠르지만 JSON을 처리하지 못해서 Object를 사용해야한다던지
직장인 책읽기 스터디 이런거 하시는분 계신가요
혹시 평소에 페어프로그래밍 하고 계시는 분 계신가요?
업무에서 하고 있습니다~
여기에서 나온 useCallback 사용은 올바르게 사용된 useCallback인가요? 저번에 몇몇분께서 useCallback 잘 사용하지 못하면 안쓰니만 못하다고 하셔서 궁금합니다~!!
혹시 몇분 몇초쯤에 나오나요?
6분 5초쯤부터 사용하고 있습니다~
useCallback 밑 useMemo 가 유용할땐 다음과 같습니다. 1. 함수가 매우 빈번하게 리렌더링이 일어나는데, useCallback 으로 감싼 값은 계속 같은 인스턴스를 유지하는 경우, 즉 리렌더링이 useCallback 안에 존재하는 값들로 인해 일어나는 것이 아닌 경우 2. "의도적"으로 리렌더링이 일어났을때 값을 유지할려 하는 경우 이렇게 2가지 경우라고 보시면 됩니다. 반대로 좋지 않은 경우는 다음과 같습니다. 1. 매우 빈번하게 리렌더링이 되고 리렌더링을 일으키는 인자가 useCallback 내부에 있는 경우 -> 결국 메모리만 잡아먹고 렌더링에 걸리는 시간은 더 잡아먹습니다. 2. 예상치 못하게 메모이제이션된 값으로 작동하게 되는 경우 -> 은근 많습니다.
결국 리렌더링을 계속해서 고민해봐야해요
반응형 작업할때 레이아웃구성을 grid로 하는게 flex보다 더 효율적이겠죠,,? Flex는 보다 세부적인 컨텐츠 박스 제어할때 사용하구요
최적화 작업이 진짜 어려운 것 같습니다 ㅜ
이건도 다 경험치 차이겠죠 좀 더 열심히 공부해야 하겠네요
1. 메모이제이션 된 값 사용하기 2. useCallback 으로 안 감쌈 함수를 계산하기 3. useCallback 으로 감싼 함수 재계산하고 메모리에 넣기 이 순서대로 렌더링이 빠릅니다
그래서 잘쓸거 아니면 안쓰니냐만 못한다는 이야기가 나오는거에요
넵 React.memo 랑 같이 쓰면 올바른 방법입니당
useCallback 과 useMemo 는 그래서 React.memo 와 같이 사용해야하고 컴포넌트 분리 / 전역상태에서 리렌더링을 유발하는지 여부 등을 고려해서 최적화를 진행해야합니다
아 엄청나구나.. 생각 많이 해야겠네요
1. useCallback 으로 감싸도 함수를 다시 안 만드는 건 아니다 2. 불필요한 훅 사용은 성능을 아주 미세하게 감소시키고 가독성이 떨어지게 한다 이 두 가지만 확실히 인지하면 useCallback을 잘못 쓸 일은 없다고 생각해요!
어서 실무하면서 깨지고 싶습니다 ㅎㅎ ㅜ
근데 사실 평범한 웹사이트는 크게 신경안써도...
영상 좋네요 👍👍
우아한테크코스 참여자인데 실력 좋아보입니다.
우아한테크코스 들어가고시푸다
사진
ㅋㅋㅋㅋㅋㅋㅋㅋ
개발자 개그 재미있는거 많네요 ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
한산님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
메모이징 자체도 리소스 라는것을 생각하면 때론 그대로 두는것도 나름 최적화라고 생각합니다. ㅋㅋㅋ
유저의 컴퓨팅파워를 믿어보자구요
피스메이커 프로도님이 나갔습니다.
ㅋㅋㅋㅋㅋㅋㅋ 대부분의 상황에서 최적화는 필요없죠
이게 간편한 웹사이트 웹앱에서는 최적화가 크게와닫지 않거나 잘못쓰면 오히려 손해가 될수 있는데, 헤비한 뭔가가 들어올 수 있는 지면이 있고 그럴 서비스를 개발한다고 하면 저런 최적화없이는 리액트가 이렇게 느려? 라는 생각이 들 수도 있습니다 -_-. 그래서 그럴만한 상황이 오거나 할 때 당황하지 않고 잘 대처할 수 있도록 평상시에도 어느정도 훈련하는게 좋다고 생각해요!
마치 대학에서 가르치는 자료구조, 알고리즘 같은 느낌? 저런거 몰라도 적당히 코딩을 할 수는 있는데 알고 있으면 더 효율적으로 잘할 수 있을 수도 있는!
아 놔두는것도 방법이 될때가 있는 거군요
옛날에 모달 하나에 5000줄짜리 폼 만들어봤는데 키보드 입력할때마다 500ms씩 딜레이걸리길래 그때 "아 이때 쓰라고 만들어놓은거구나!" 했었던 기억이 납니다
폼이 ㄷ ㄷ ㄷ 하네요
그러면서 역으로 "아 이정도 돼야 의미가 있구나 평소엔 안써야겠다" 라는 생각도 했던 거 같아요
ㅋㅋㅋㅋㅋㅋ 어드민이었어서 가능했던 거 같아요
우리가 흔히 알고 있는 서비스중에 헤비한 서비스가 뭐가 있을까요??
길다란 구글 설문지..?
페이스북이나 트위터 무한스크롤 계속 내리면 헤비해질까요?
헤비한 서비스라기 보다 헤비한 지면이라고 하는게 맞을것 같아요. 간단히 만드는 채팅도 거기에 수많은 사람들이 달려들어서 동시에 채팅을 치면 대충 만들어두면 못버틸듯
잘 만든 무한 스크롤은 화면에 나오지 않는 부분을 없애버립니다
이게 실제로 좋은가는 찬반이 있긴한데
헤비해지지 않게 만드는 방안중 하나에요
리스트 처리에 있어서 리스트아이템이 말도 안되게 커지면 가상리스트 많이 써요!
가상 리스트는 뭔가요?
key값 지정안해줘서 뜨는 오류만 봤는데
실제로 어떤건지는 잘 모르겠네요..
아 알겠습니다~!!
리스트 아이템이 만개가 있고 한화면에 보여지는게 100개면 dom에 만개를 모두 넣는 것이.아니라 일부만 넣는거요
https://tanstack.com/virtual/v3/docs/examples/react/infinite-scroll 무한리스트 만들때 이런걸로 만들었었는데 말씀하신게 이거와 비슷한 개념인거죠?
이동중이라 저코드를 볼 수가 앖어서 자세히는 모르겠지만 비슷할 것 같습니다!
저는 업무하면서 최적화 신경쓴거 데이터 플랫폼 밖에 없었어요. 그 밖에는 최적화보단 추가 기능 구현이 더 우선오었습니다
차트 데이터가 수만개가 넘어가면 브라우저가 터져버려서 강제로 신경쓸수밖에 없던 점도 있습니다
아 그런가요? 면접다니다보면 최적화질문을 종종하길래 최적화는 무조건인가 라는 생각을 했었는데 꼭 그렇지만은 않군요
필수로 알아야 하는 것 !== 필수로 써야 하는 것
아하 알겠습니다~!!
https://dev.to/adamklein/build-your-own-virtual-scroll-part-i-11ib 버츄얼 스크롤 이라는 개념입니다.
버츄얼 스크롤에서 어려운 점은 리스트 아이템 높이 값이 전부 다를때 어떤 기준으로 평균을 매기는가가 어려운 점이긴하네요 그래서 그때그때마다 평균 계산을 해주는게 많습니다
저것도 실제 DOM상에는 15개정도밖에 렌더링이 되지않네요
스크롤 안에서 각 row가 가상화되어서 렌더링이 되니 위에 말씀하신거랑 비슷하다고 접근해도 되는걸까요?
https://github.com/bvaughn/react-window 이런 라이브러리들이있어요
네 맞아요. 쉽게 말하자면 보여지는 부분 만 렌더 하고 나머지는 안 보여주고 높이값 계산하여 스크롤을 노출해준다라는 개념입니다
O_O님이 보내주신 라이브러리도 비슷하게 동작하는거같은데 둘간의 정확한 차이점이 뭔가요?
같은거에요 개념이
이런류 라이브러리들 종류가 매우 많습니다
아하 핵심은 보여지는부분은 최소로 렌더링하고, 나머지는 계산해서 그때그때 갈아끼워주는 방식이군요
감사합니다 많이배워가네용
누누히 생각해봐도
사수, 선배 없는 외길 프론트는
이방이 극락입니다
저는 사수는 없는데 부사수는 있어요 ㅎㅎ... 못난 사수를 만난 부사수에게 괜시리 미안해지네요
못난 사수는 없습니다. 그저 감사하졍
이모티콘
저는 대학교동안 혼자 프론트만 우직하게 공부하다 9월 부터 사수생기는데
설렙니다
근데 사수분이 외국분이셔서
어떨지는...
외국어공부도하고... 오히려좋아..!
면접때 기술 면접 봐주셨는데 되게 말 잘하시긴 했어요
그런데,, 제가 한국에서만 살아봐서
외국인 눈을 보면 이해하신건지,,, 화난건지,,,
마스크를 쓰고 있으니깐 전혀 알아볼 수 없어서 조금 심란합니당
사람사는건 다 똑같지않을까용.. ㅎㅎ
사진
혹시 유데미 이 강의 들어보신 분 있으신가요? react 입문하려는데 괜찮나요?
사수분 많으신게 부럽네용.. 저도 이직하면 꼭.. 개발문화 좋고 사수분 많은곳으로 가고싶어요
저는 추천합니다
후기가 괜찮아서 전부터 눈여겨 보고 있었는데 마침 할인해서 이 걸로 공부해봐야겠네요 감사합니다~!
그분꺼 다른강의들도 좋아요 자바스크립트도좋고... 최근엔 nextjs도 올라왔더라구요
오 네 추천 감사힙니다! ㅎㅎ
우와우
힘내세요 ㅠㅠ !!흑흑
인턴 온라인면접할때 다들 인사어떻게하나요?
꾸벅!! (어색한 표정으로) 안녕하세요
ㅇㅅㅇ
정답은 없으니 그냥 좋은 미소 짓는거밖에 할게 없더라수요...
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
헐?
워니님 혹시 강남언니 다니시는 워니님이신가요?
앗 맞습니다
오호
헐 쩐다
헐
제가 준비 3개월 정도 후에
강남언니 도전 해보고 싶은데
혹시 코테가 알고리즘인가요?
오!!!
과제전형인가요?
알고리즘이라고 하기 민망할 정도의 기본적인 난이도의 코테를 진행합니다
좋은 정보 감사합니다
호오...!
혹시 강남언니에서 리액트쿼리를
프론트엔드로 지원하시는거면 없는 걸로 알고 있고요!
사용하시나요?ㅎㅎ
제가 요즘 리액트쿼리에 관심이 좀 지대해서
너무 갑작스레 질문 공세 죄송합니다
사용하는 곳이 조금 있는데 메인으로는 쓰지 않고 있는 걸로 알아요!
앗 아닙니다 괜찮습니당 ㅋㅋㅋㅋ
아하! 감사합니다
혹시 3개월 뒤에도
워니님 이력서 작성하면서 많은 도움이 되었습니다~!!!!
힐링페이퍼에서 프론트 채용 진행하면
한번 도전해보겠습니다~!
오앙 넵넵 너무 좋아요!! 난중에 지원하실 때 wonny727@gmail.com 으로 연락주세요~! 추천전형으로 넣을 수 있다면 넣어드릴게여!!
와 워니님.. 저 최근에 인프런강의 들으면서 취준중인데 영광입니다..!
헙..정말 감사합니다 :) 실력 꽉꽉 채워서 연락드리겟습니다!
워니님 어제 생일이셨나보네요? 727@gmail.com!
헉 ㅋㅋㅋㅋ 수강생님이라니 부끄럽군요 강의 수강해주셔서 감사해요
뒷북이지만 감축드립니다!
(아니면 어쩌지...)
저도 인프런 이력서 강의듣고 취업햇슴다!
응원합니다! 🙏 꼭 좋은 결과 있으시길!
앗 맞아여 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 엄청 예리하시군요
감사합니다
오오 이력서 강의 저도 들어봐야겠어요!!
이럴수가 ㅠㅠㅠㅠ 넘 뿌듯하네요 ㅠㅠㅠㅠㅠ 강의 수강해주시고 좋은 결과 있어주셔서(?) 감사해용
ㅋㅋㅋ 물리치료사 이직힌다길래 친구에게 워니님 이력서 방식 좀 참고하라고 추천해줬느넫 ㅋㅋㅋㅋㅋㅋㅋ
친구
강남언니라는 곳에 관심을 가진게 워니님이 나오신 eo와 개발바닥보고 흥미가 생겼던거라ㅎㅎ 여기서 봬니까 정말 신기하네요!! 응원해주셔서 감사합니다 :)
졸업 앞두고 갈피를 못잡고 있었는데 정말 큰 도움 되고 있습니다!!
ㅋㅋㅋㅋㅋㅋㅋㅋ 물리치료사분에게 추천해준 사례는 처음 들어보는군요.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
워니님 영상으로 찾아뵈야겠네요 이력서 ㅜㅜ 주변사람들하고 실력이나 내용은 비슷하다 생각하는데 항상 저만 서탈이라,, 함 봐야겠습니다!!
스르륵 놓고 가겠습니다
으악 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
모르시는 분들을 위해서
호로록 갖고 가겠습니다
이모티콘
두번 봤습니다
위에 온라인 면접 인사 어떻게 하냐는 질문에 대답이 웃겨서 웃으러 왔다가 지대한 관심을 이렇게..
전 그 강의 나오기전에 특강해주셔서ㅋ이력서 잘 수정했었습니다!! ㅋㅋ특강끝나고 바로 인프런 올리신다고 할때가 엊그제 같은데 ㅎㅎ !! 역시 인프런도 호응이 좋으시네요! 👍👍
저는.. 작년에 서류만 15광탈했어서 워니님 블로그랑 동영상 열심히 보면서 다시 작성했는데 인턴 지원한 3곳 중 2곳 최종합격했슴당…
개발자들의 개발자… 감사함당!
오?! 그렇다면 멋사 분이신가..?!
우앙 이런 합격 사례라니.. 세상 뿌듯.. 그 글을 올릴 때만 해도 이렇게 바이럴 될지 몰랐는데 새삼 신기합니다 ㅎ_ㅎ
그때 강의 출품 얘기도 하셨었는데 ㅎㅎ
엇 저도 멋사인데..
반갑습니다 ㅎㅎ
라이언님!
오 멋사 어떤가요??
취준중인데 신청할까 싶었었는데ㅠ
저도 멋사했었어요!(1기)
제가 다른 부트캠프들을 모두 경험해본게 아니라 비교는 어렵고 그럴 군번도 아니고요ㅎㅎ 근데 운영 매니저분들이 친절하시고 교육생들 잘 챙겨주십니다.
오 1기분이 또 계셨네요!
이모티콘
오 여기 계신 분들 2분 곧 있을 동문회서 서로 보시겠어요 ㅎㅎ 월리를 찾아라가 되겠네요!
손을 번쩍 든 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
손을 번쩍 든 무지님~~ 반갑습니다 :)
안녕하세요 :-)
3개월차 신입 프롱트엔드 개발자입니다!
우왕!! 입사 축하드려요!! ㅋㅋ 궁금한것들에 한참 많을 시기겠네요~~ 편하게 궁금한것들이나 관심사 고민등을 얘기하고 많은 것들을 얻어 가고 나눠주는 대화 부탁드려요 ㅎ
불금 네오님도 한산님도 환영합니다 :)
네~!! 감사합니다ㅎㅎㅎ
반갑습니당
저 tailwindcss를 적용중인데 혹시 tailwind를 사용해서 background img 적용하려면 어떻게 해야하나요!? 공홈에 참고해서 해봤는데 아무런 변화가 없어서요…
사진
리액트에서 클릭시 상단바로 가주려고 onclick시 다음과 같은 함수를 호출하게했는데 … 잘 안먹히네요 혹시 해결법을 아시거나 비슷한 경험을 하신분이 계실까요???
사진
스크롤이 window에 걸려 있는 게 맞나요?
막 커스텀 div에 걸려 있다거나..
백그라운드 이미지는 style을 직접 쓰시는거 더 나을것 같네요. 이미지가 그 사진과 같은 이미지를 말하는 거 맞죠?
네네 맞습니다.
window scrollTo 말고 element.scrollIntoView를 추천합니다 https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView
styled-components로밖에 사용못하나요…ㅠ
네 이미지 url 적용은 그냥 스타일로 하시면 되요. react style을 그대로 인라인으로 적용하세요
넵!! 알겠습니다:)
감사합니다~
감사합니다 해결했어요!!
당신의 인생을 더 성공적으로 만들어줄 30가지 멘탈 모델 https://www.reddit.com/r/selfhelp/comments/utu7v0/30_mental_models_that_will_make_you_more/
경례하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
경례하는 프로도님 안녕하세요! 반갑습니다 :)
안녕하세요! 개발 블로그 글 너무 잘 읽으며 공부하다가 이렇게 좋은 소통 창구를 발견해서 들어왔습니다
이직관련해서 질문좀 드려도 될까요
감사합니다!
네!
Html5 웹앱 솔루션 개발 2년반정도 개발하다가 반년전쯤에 프론트앤드 개발자로 이직을 했습니다. 급하게 이직하느라 회사 내부 사정을 잘 모르고 이직했는데 내부 시스템을 차세대로 바꾸는 프로젝트 진행중이었고 문제는 차세대를 리드할 시니어 개발자가 전혀 없는 상황이었습니다
어찌저찌 반년간 개발해왔는데 기존 레거시 운영하시던 분들도 거의 다 퇴사하시게 돼 잘 모르던 운영업무와 백앤드 업무도 같이 봐야하게 될 것 같습니다 ㅠ
뿅뿅 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
프론트로 깊이있게 가고 싶었는데 상황이 이렇게 되니 퇴사해야하나 고민이 깊어집니다..
프론트 쥬니어 개발자로 회사에 사수가 없는 환경에서 계속 일하는게 도움이 될지 문의드립니다 ㅠ
뿅뿅 네오님 반갑습니다
사수가 없어요라는 고민은 정말 많이 들어보게 되는 것 같아요
프론트엔드는 예전에는 존재하지도 인기있는 직군이 아니었기 때문에 시니어의 모수 자체가 적을 뿐더러 옛날 레거시를 오래해봤다고 깊이있는 잘하는 개발자일까? 하는 문제도 있구요
정말로 좋은 사수가 있는 회사가 있을수도 있겠지만 제 주변의 대부분의 회사들은 다 똑같이 어떻게 차세대(?)를 리드해야 하는지 잘 모른다입니다
그렇군요..
애초에 최신 기술 자체가 나온지 얼마 안되었고 웹서비스로 유명한 회사일수록 레거시로 되어 있을 확률이 높아요
성공한 서비스가 되기 위해서는 최소 2-3년은 필요한데 2-3년전 프론트 최신 기술이 어디 최신 기술인가요? ㅋ
이직을 해야겠다는 느낌이 드셨다면 이직을 시도해보는 것은 좋다고 생각합니다 요새같은 대 이직시대에 시야도 넓어지고 이직을 준비하는 동안 학습하게 되는 것도 많을거에요
하지만 다른 곳도 크게 다르지 않고 모두가 그런 고민들을 하고 있으며 엘로라도가 존재하지는 않는다라는 거 알려드려요 다들 지금 뭐가 제일 좋은지 최선인지를 모르지만 열심히 하는 상황입니다
제가 드린 질문은 아니지만 매번 친절히 답변해주시는 테오님 정말 감사합니당 ㅎㅎ
그래도 조금은 위안이 되네요.. 답변 감사합니다!
🥺
이직과 동시에 사수가 없는 환경을 기회로 여겨보세요. 어차피 내가 시니어가 되려면 스스로 기술 스택 비교하고 선택하고 책임져야 합니다. 어떤 곳은 사수나 회사가 레거시를 고집하는 곳도 있는데 그런 곳이 훨씬 더 나쁘니까요
레거시를 최신화하는 작업은 잘 나가가는 회사일수록 더 많이 해야 한다는 점 - 왜냐하면 레거시가 돈을 벌어주고 유명하게 만들어 주었으니까요 - 기억하시면서 레거시를 최신화 하는 작업을 해보는 경험은 충분히 내세울만한 일이고 깊이 있는 고민이 필요한 작업이고 성장하려면 반드시 해야 하는 일이기에 누군가에게 의지하지 않고 할수 있는 좋은 기회라 여기시고 막막해도 부담되도 버거워도 한번 해보시길 바랍니다. 제가 회사 사정을 아는게 아니라 감히 말할수 있는게 아니다보니 이직이라는 선택지도 열어두시고 본인이 잘 선택해보시기 바랍니다
한마디만 덧붙이자면 레거시를 최신화를 하는 작업은 정말 윗선에서 큰 의지가 필요합니다. 필요한거 안다 해야 되는거 알지~ 할거다. 하고 있다 그런데 가만보면 적극적이지 않고 어영부영 흘러가고 있는 거라면 빠른판단 하셔도 될 것 같습니다. 다들 필요성만 외치고 의지나 책임지겠다는 사람이 없다면 다른 판단을 하셔도 좋을 것 같아요
좋은 말씀 감사합니다 ㅎㅎ
CSS Nesting 문법 선택에 투표해 주세요 https://news.hada.io/topic?id=7062&utm_source=slack&utm_medium=bot&utm_campaign=T03C8SLH21M
안녕하세요 혹시 s3 써보신 분 계시나요? 제가 react 환경에서 이미지를 올리면 백엔드에서 aws s3저장시킵니다. 이미지 변경 요청(put)은 잘가는데 다시 불러올 때(get) 403 에러가 발생합니다. 새로고침 하면 잘 불러와지고요! 이 경우에 s3 정책을 같이 살펴보는 것이 맞을까요?
에러 메시지가 어떻게 출력되나요?
S3 file browser 들어가셔서 업로드가 잘 된게 맞다면, 권한을 확인해보세요. put 요청시 acl을 public-read로 설정하는 부분이 있을겁니다.
콘솔에 따로 에러 메세지는 출력되지 않고 네트워크 탭은 이렇게 나옵니다. ㅠㅠ
사진
감사합니다! 한번 확인해보겠습니다
불러올 때 presigned URL 이용하시나요?
자세히 안보이지만,, 요청주소가 뭔가 이상해보이는데요.. ㅎㅎ
이미지 불러올때 앞에 s3 경로 붙어야 한대서 붙였더니 새로고침 하면 잘 불러오ㅓ집니다!! 다만 업로드 후에 변경버튼 누르면 요청은 200이 뜨지만 이미지들에 대해서 403이 뜨네요 ㅠㅠ
맨위에 잘린 부분 말씀하시는걸까요?!
생각보다 커리큘럼이
제가 궁금했던 내용인데
채용 프로세스는 진행 안하고
과제만 듣고 냅다 도망가도 괜찮겠ㅈㅅ..?
자주그랬습니다
물론 저요
과제만 세번풀었었습니다 ㅋㅋㅋ
ㅋㅋㅋㅋㅋ
저도 채용챌린지만 냅다 안하고 도망갈까 생각중이였는데.. ㅋㅋ 같은 생각을 하신분이 계시네요
껄껄
취준 하는 입장에서 기회를 뺏는다는 기분이 들 수 있겠지만
제 경험상 프리온보딩 원티드는 정말 인원을 많이 뽑기 때문에
지원해봐도 나쁘지 않을 것 같네요 ㅎㅎ
학생도 지원 가능한가요..?
안녕하세욤.. 뜬금없지만 맥북 마이크 관련 질문 드립니다. 몰랐는데 맥북 내장 마이크 성능이 정말 좋네요... 가족들이 거실에서 떠드는 소리까지 다 들리는지 몰랐어요ㅋㅋㅠㅠ 가족이랑 함께 사시는 분은 줌 회의하실때 어떻게 하시나요..? 다들.. 외장마이크나, 소음억제 앱(mac에서 가능한 앱 추천 받습니다ㅠㅠ)을 쓰시나요???
전 대학교 3학년때 원티드 프리온보딩 했슴다
본인이 시간만 낼 수 있다면 충분한거같아용
앗 그럼 신청해보겠습니당!
그 줌에 주변소음 설정하는거 있어용
고수다..
고수는 아니구... 멋모르고 덤빈거조 ㅎ
프로젝트나 과제를 많이 하면서 느낀건 구현을 많이하면 실력이 느는거와 직결되진 않는 것 같습니다. 동일하게 기능 구현을 잘한다해서 실력이 좋은 것두 아니구요..
그럼 실력이 는다는건 어떤걸까요?
오 대박 감사합니다!
저도 플젝할 때마다 성장하고 새로운거 배우고 그러는 거 같아요
엄지척 튜브님이 나갔습니다.
저도 좋은 실력을 갖춘건 아니지만 제가 공부하면서 느낀건 이론이 탄탄해야된다고 생각해요.! 기능구현은 새로운 기술도 배우고 응용해볼 수 있다는건 좋지만 기한이 있기 때문에 본인이 가진 역량을 바탕으로 보통 코드를 짜게 되더라구요 그러다보니 기능구현만 해서는 본인의 역량을 높이기엔 저는 좀 부족했어요. 책 보면서 따라하고 필요한 부분은 기술 블로그, 강의 보면서 계속 보완하면서 공부해야되는 것 같슴당
함께 자라기 책만봐도 개발자로 실력을 키우는데는 충분히 도움되실거에요
그런데 다음 챌린지가 next js던데 그럴경우 다음 챌린지에서 불이익을 받을수도 있을까요?
플젝 -> 공백기 동안 내가 부족한 부분 이런 공부 -> 플젝 -> 회고 후 부족하거나 이때 이런 기술을 썼다면 더 좋았을텐데 하는 기술 공부
저는 이런식으로 플젝 후엔 꼭 이론 공부하는 시간 가졌습니다
이론공부는 혹시 어떤걸 하시나요?
저는 책을 읽습니다
deep dive JS | 클린아키텍처
지금은 올바른 타입스크립트 활용 능력이 부족해서 이펙티브 타입스크립트 공부랑 jam stack 공부하고 있슴당
메모오
하지만.. 요즘 느낀건 이런거 다 재치고 코테가 최고다~.~
동기들 네카라쿠배 가는거보면... 코테 원툴들이 가더라구요... 하...
새로운 유형이나 문제를 마주쳤을 때 보통 1~2시간 고민하다가 해답을 보곤 합니다! 그러면 그 이후에 그것과 관련된 비슷한 문제들을 찾아서 푸는식으로 공부하고 있는데 올바른 방법인가요?
그 해답을 제대로 이해하고 다음 문제에 활용한다면 올바르다고 생각합니다
코테만 잘하면 면접을 통과할 수 없지 않나요???
코테 만점 이러면 다른가..
답변 감사합니다! 조금씩 난이도를 올리고 있는데 점점 힘이 드는건 노력부족이겠죠..?ㅠㅠ
힘이 든다는건 올바르게 하고 있다는 거라고 생각해요! 공부는 힘들게 해야 기억에 오래남고 정말 내 것이 된다고 생각합니다. 아무나 할 수 있으면 난이도가 어렵다고 할 수 없다고 생각합니다 ㅎㅎ
답변 주신분들 감사합니다 ㅎㅎ
저도 지금 프로젝트 중인데 하면서 느낀점, 부족한 점을 잘 정리해놔야겠네요
맥북에어랑 프로랑 스피커마이크 차이 많이나나용?
오 프로 스피커는...
저 밴드를 하고 있는데 가끔 연습실에서 스피커 틀어놓으면
친구들이 앰프틀어놓은줄 알더라고요
사운드기술 정말 최고에요 진짜
오.. 사실 맥북에어로 밴드공연 스트리밍 할거땜에 고민이엇는데!
오인페 물리느라 갖고다니신건가요?
아니요 일할려고..?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아…. 이럴수가
안녕하세요! 저는 디자이너인데 프론트엔드 개발자분들과 협업할 때 어떤 방식으로 해야 더 도움..?이 될지 알고 싶습니다 ㅠㅠ 어떤 부분을 공부해야 될까요? 넘길때 디자인 컴포넌트 네이밍을 잘해놔야하는 한다는 기본적인 사항처럼요!
css 를 공부하시면 매우 도움이 됩니다
그거면 충분해요
UI UX 디자이너라면?
컴포넌트를 어떤식으로 구성하는지
페이지마다 버튼모양이 다르고 그러면 컴포넌트로 만들기 힘들겠죠
오 ㅠㅠ 좋은 답변 감사드립니다!!
솔직히 그거땜에 빡친적이 많았던..
UI 디자이너가 보통 css로 컴포넌트를 구성하나요?
여기랑은 좀 다르네요 포지션이
저는 그룹이랑 레이어 네이밍 잘되있는 시안받으면 정말 좋았던것 같아요
보통 피그마로 넘겨주는데
보통은 피그마만 뚝 던져주지않나요..?
css가 어떻게 작동하는지 인지하는거랑 안하는거랑 디자인퀄리티가 달라지긴하죠
네 피그마만 던져주고 보통 프로젝트 매니저랑 같이 일을해요
css만 잘할줄 알면 안다고 생각하네용...
저도
그리고 컴포넌트는 따로 회사에 팀이있어서 거기서 다 만들고 저희는 갖다쓰기만해요
개발하기 쉽게 던져주려면 어떻게 개발하는지 알면 좋겠죠?
와..
분명 같은 버튼인데 페이지마다 border-radius나 폰트사이즈같은게 다 다르면 빡칩니다
저같은경우는 제이쿼리 염두해서 디자인하지 말라고는 말하긴해용…
저희는 개발자만 3만명이라
스케일이 크죠
개발자가
아예 다른 버튼이면 모르겠는데 분명 같은 버튼인데 미세하게 다르면..
3만명이라구요…?
ㄷㄷ 회사가 얼마나 크길래
3만명..?
아 이건 맞네요. 하나의 페이지에서 디자인이 통일성이 부족하면 좀 힘들긴해요...
무슨 회사..신가요..
3만명?..
(우리 스쿼드에 프론트가 3명은 됐었나..)
전 얼마전까지 혼자였습니다..
미국에만 있는건 아니고 전 세계적으로 다합해서에요 근데
페이팔이에요
제 생각엔 조금 다릅니다. 모든 것이 고고익선이긴 하지만, 일정 점수 이상을 받을 수 있는 궤도에 오른 이상에야 코테 점수가 딱히 의미가 없는 것 같아요. 사실 코테라는게 기업 입장에서는 HR 리소스를 최대한 적게 투입하면서 많은 지원자를 걸러낼 수 있는 편하고 값싼 방법이라 사용할 뿐, 코테 결과 자체에 큰 의미를 두고 있진 않는 것 같아요. 주변에 미들~ 시니어급 선배들에게 물어보면 대부분 채용 프로세스에 투입될때, 코테 몇솔 했는지 관심도 없다고 합니다.
아 페이팔 근데 개발자가 3만명이면 다른 직군까지 포함하면
거의 한 4만 5만 될려나 ㄷㄷ
네 아마 4만에서 5만으로 알고있어요
백엔드는 보통 인도에서 인도분들이 자바로 다 관리하시고
북미에서는 프론트쪽만 주로하더라고요
오오 그렇군요 신기하네용
그래서 팀중에 노드랑 자바쪽 연결하는 랩퍼만 만드는 팀도 있더라고요
와 글로벌 기업은 개발자 스케일이 다르군요ㄷㄷ
이게 좀 웃긴게 HR도 코드를 배우더라고요. 뭐가 어떻게 돌아가야하는지 알아야된다고 그래서 쿼터 별로 트레이닝이 있는데 거기 코드 트레이닝도 있어요 전 직원용
그래서 HR이랑 전화 인터뷰 하는데 백엔드 기술에 대해서 대화한 기억이 나네요
와우 페이팔...
프론트 인터뷰인데 백엔드 기술도 물어봤나요?
아뇨 이건 팀원이랑 한게 아니라 HR이랑 소소한 대화요
자기회사 기술 뭐쓰고 이런거요
아하 그렇군요
3만명이면
인터뷰는 리액트 컴포넌트 구성 1라운드 일고리즘 2라운드 시스템디자인 1라운드 매니저 1라운드 해서 총 5라운드로 봤네요
한사람이 업무 영역이 좀 좁고 깊으려나요?
한사람의*
저는 전혀 그렇게 느끼진 않아요 프론트인데도 CI도 가끔하고 백엔드도 해요
스프린트마다 나오는 스토리에 따라 다른데 자기가 하고싶은거 골라서 하면되요
오호...
페이팔이라고 하면 결제시스템만 있다고 생각했는데 업무가 다양한가 보네요
페이팔, 벤모, 허니
많죠
혹시 리액트 클래스컴포넌트에서 함수컴포넌트로 변경하게된 계기가 정확하게 무엇이었는지 아시는분 계신가요? 무엇이다른지에대한 이야기는 많은데 정작 히스토리컬하게 왜?에대한 이야기는 못찾고 있어서요 ㅠㅠ
그리고 앞으로 나올 서비스도 많구요. 지금은 페이팔에 코인 거래도 가능해요
es6 탄생배경 보시면 이해되실듯용
js랑 인터랙트가 되야해서..?
https://overreacted.io/ko/how-are-function-components-different-from-classes/ 한번 참고해보시면 좋을것 같아요!
class형에 비해 펑셔널이 읽고 쓰는데 드는 자원이 절약돼서 그런거 아닌가여
오 일단 읽어보고 오겠습니다. 다른분들도 답변 감사합니다
최근 문벅스 블랙커피스터디에서 저도 클래스로 구현하는 방법으로 구현을 했었는데 this와 관련해서 애 많이 먹고있어요 ㅎㅎ..
해당글이 둘의 장단점에 대해서 설명을 하고있지는 않지만 차이점에 대해서 잘 설명해두었어요
브라우저에서 맥주소에 접근하는 방법이있나요??
갑자기 궁금
좋은 글 감사합니다 👍👍
어 저방금 면접봤는데 이거 물어봤어요
제가 이해한 바로는 1. ui의 상태와, 이벤트핸들러에 바인딩 상태가 동기화되어야 하는데 기존의 클래스 컴포넌트에서는 동기화가 안된다. 2. 이러한 문제를 해결하기 위해 클로저를 사용하면 된다. 3. 그렇지만 클로저를 사용하면 이러한 문제를 해결할 수 있기 때문에 함수 컴포넌트를 만들었다. 4. 함수컴포넌트의 핵심개념은 클로저이기 때문에 클래스 컴포넌트의 잇점인 this에 바인딩된 상태를 레퍼런스로 접근하는 것이 필요 없어지게 되었다… 로 정리하면 틀린게 있을까요?
결국 클로저를 통해 immutable을 더 잘 보장해 줄 수 있다는 게 핵심인 거 같네요?
넵 저도 this가 mutable하다는것이 핵심이라고 이해했어요
그러쿤여
공식문서에도 훅이 나오면서 함수 컴포넌트로 넘어가게된 이유를 잘 말해주고 있네요
그냥 "클래스에서는 되고 함수에서는 안된다" 대신 간결하잖아 라고 생각하고 있었는데 코드 레벨에서 확실한 이점이네요.. 배워갑니다
슨생님들.. 소요시간이 얼마나 걸려요 라는 질문을 처음 받아봣는데. 답변을 어케해야되나요?
내년이맘때…
생각하신 시간의 1.2~1.5배 정도를 부르시는게 보통 걸리는 시간 느낌이에요!
개발 일정 산출해보시고 배포 후 모니터링 시간까지(하루 이틀?) 포함해서 알려드리면 좋지않을까싶네요
그래서 그냥 해봐야 알겠어요.. 라고 대답했습니다;;
일정산출은 경험에 의존되는것같기도,,
실제로 해봐야 아는게 맞기도하고 생각한 일정이 항상 맞는것도 아니지만 일정산출을 꾸준히 하면서 아 나는 이 작업을 할 때 평균?대략?적으로 이정도 걸리는구나를 습득하면서 오차 범위를 좁혀나가는게 좋은거같아요
보통 일정 산출 질문이 글만 나온 기획서 상태에서 받을 때가 많아서 정확도가 떨어지는 것 같아요…
디자인, 개발 진행하면서도 기획서가 계속 변경되니까 일정에 영향이 계속 가기도 하구용
안녕하세요 보통 이미지를 미리보기 를 해주고 나서 업로드 해주는 기능이 있다고 했을 때, 유저가 파일을 선택하면 프리뷰를 보여주는 방식은 서버에 먼저 올려서 가져오는 방식이 아닌 로컬에서 파일리더나 url api등으로 보여주고 난 뒤에 하는 방법도 있는데 보통 어떤 식으로 구현 하시나요? 보통은 서버에 먼저 업로드 하지않고 하시나요?
서버에 업로드 하고 프리뷰가 맘에 안들어거 삭제하고 하면 서버에서의 히트가 일어난다고 들었습니다. 이 부분에 대해서 궁금하네요.
등록하고 업로드하지않고 사용하는 경우를 생각하면, 서버업로드는 가장 마지막에 하는게 좋다고생각합니다
저어희는 파일리더로 먼저 보여주고 업로드 버튼 누를때만 서버로 전송합니당
등록하고.. 업로드하지않고 삭제하는경우에… 삭제가 빠졌네요
작성을 중단하고 다른 페이지로 이동한다거나 파일을 잘못 업로드해서 수정 삭제를 고려해야할것같아용
인풋 파일 선택/ 프리뷰 보여주는 곳/ 그 아래에 프리뷰 삭제 , 업로드가 있습니다.
삭제 시 그러면 프리뷰도 삭제 하게 되는걸 고려하면 로컬에서 작업하는게 더 빠르나요? 서버에서 그렇게 많이 히트를 잡아 먹는 것인지. 보통 어떤 형태로 구현하시는 지 궁금하네요
히트가 db 히트를 말씀하시는거인가요 ?
우선 저희는 수정이나 삭제시 프리뷰에도 반영하고 있고용(로컬에서 처리) 작업 속도는 프론트에서 이렇게 처리하는게 더 빠른지 서버에서 불필요한 데이터를 지우는 속도가 빠른지를 물어보시는건가용?
저는 아직 사용자가 업로드할지 최종적으로 결정하지 않은것을 서버에 업로드할 이유가없다고 생각해요.
저두 같은 생각입니다
이미지같은경우 트래픽도 생각해본다면 서버측에서도 좋은 방법이 아니라고생각합니다
임시적으로 저장하더라도 사용자가 많아지면 서버가 파일 저장-삭제처리하느라 부하가 클 것 같아요
그롬 업로드 전에는 프론트에서 이미지 같은 것을 바리너리로 사용하시나요 다들?
input 업로드로 받았으면 blob객체로 받게되니 바이너리로 다루게 되겠지용
아핫~! 감사합니다
맞아요 ! 당연히 서버 트래픽이 좀 있다고 했지만 보통 유저가 신중하게 파일 선택 할테니 프리뷰를 잘 삭제 안한다고 너무 간과한것 같습니다 ㅠ
로컬에서 처리 할때도 파일리더로 하나 다른 방식으로 하냐에 따라 렌더링 성능 차이가 약간은 있다고 들어서요 그 부분도 얼마만큼의 차이인지 궁금했네요
앨리스님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 이제 막 프론트 시작한 사람입니다. 새로운 분들과 이야기 나누고 싶어서 들어왔습니다 ! 오늘 하루도 건강하게 보내세요!
우왕!!! 어서오세요!! 프론트에 입문하게 되신것 축하드립니다 :) 이곳은 프론트엔드에 대해 궁금한 것들을 물어보고 대화를 나누며 함께 성장하고자 하는 곳입니다~ 모르는 사람의 질문은 모두를 생각하게 만들어줍니다 모두를 위해서 적극적으로 궁금한 것들 편하게 질문하고 글 남겨주세요 ㅎ
선생님들 질문이 있습니다! 저희는 이미지를 s3 url주소를 기준으로 img태그에 주소를 입력해서 그리는 방식으로 하는데요. 이렇게 하면 1. api를 통해 imgUrl을 받는다. 2. 해당 url을 통해 이미지를 그린다.
나눠서 질문해서 좌송..ㅠㅠ 두번 나뉘는데 스켈레톤을 사용해서 1의 로딩은 감출 수 있습니다. 저는 2의 시간도 스켈레톤으로 보여주고 싶은데 어떤식으로 구현해야 할까여?
img의 onload와 같은 이벤트가 존재할겁니다.
아하
아아아아!!
감사합니다! 시도해볼게요
스크립트레벨에서 처리한거지만.. 예제로는 참고하셔도 될것같습니다. https://www.sizplay.dev/TIL/image-lazy-load-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC/
image onload 링크가 안 보이네요
맞아요 complete와 onload를 이용한 lazyload 말씀드리고 싶었어요!
이번에 취업한 회사에 대해 글을 작성하고 있습니다. 혹시라도 회사에서 뭐하는지 궁금하신 분들 계시다면 제 글을 참고하시면 조금이나마 도움이 될 거 같아요! 시간이 나는 대로 계속 쓰고 있고 오늘이 12일 차 되는 날입니다 하하! https://velog.io/@hotbreakb/%EC%B6%9C%EA%B7%BC-3%EC%9D%BC-%EC%B0%A8
혹시 position: fixed를 뷰포트 기준 말고 특정 컴포넌트를 기준으로 할 수 있는 방법이 있을까요??
우아 구경갈께요!
제가 이해한게 맞다면 position에 relative 랑 absolute 사용하면 될거에요
특정 컴포넌트 옆에서 스크롤되어도 화면에 고정으로 박고싶은데 fixed가 뷰포트 기준이다 보니까 margin으로 줬을때 화면 크기가 커지거나 작아지면 레이아웃이 깨져버려서요 ㅜ
relative랑 absolute로도 스크롤할때 화면에 고정시킬 수 있나요?
기준 컴포넌트에 fixed걸고
우와! vlog같은 소설을 하나 읽는 기분이네요 ㅋ 재밌어요 ㅎ
그.자식 컴포넌트에 absolute걸면됩니다
스크롤을 하는데 고정을 해보고 싶다면 position:sticky도 한번 참고해보세요
제가 지금 치고 있었는데 말씀 주셨네요! 저는 sticty로 사용합니다!
사진
안녕하세요! 리액트 이제 막공부하고 있는 리린이입니당.. 리액트 import할 때 위에꺼랑 아래꺼랑 혹시 차이가 있는건가요?
오타 정정 sticky
오.. sticky가 있었네요 다들 감사합니다 !
React를 import하냐 안하냐 차이입니다
여전히 리액트로 개발하는 곳 많겠죠?
라이프사이클,훅 때문인걸로 아는데 자세한 건 테오님 블로그에..
그럼요~
다시 시작해야하나 고민됩니다
지금은 뷰로 개발중인데
나중을 생각하면 리액트도 해야하나 하고 있어요
@시니
다들 협업툴로 어떤거 쓰셔요?
잔디, 트렐로, 아사나 등등..
이 글을 보고 참고가 많이되엇습니다~
저희는 지라 씁니다
저희는 아사나요!
지라가 좋은거 같은거같아요..!
ㅋㅋㅋ네? 편하긴 하죠
프로세스가 명확하게 보여서 좋은거같아요 규모가 커질수록.. 연동해서 쓸수있는거도 많고
오오 좋은말씀감사합니다
해커톤 나가 보신 분 계신가요?
저요
팀 어떻게 짜셨어요?
저는 지인끼리..
아..
포지션 당 몇명으로 나가셨나요?
6명 3/3도 해보고 4명 2/2 해보고 기획디자이너껴서 1111도 해봤습니다
요즘에
플로우같은것도 뜨던데
현업에서 많이들 쓰시나요?
협업툴인가요
mui 에서 제공하는 datePicker + dayjs 쓰시는 분 계실까요..?!
짜기 나름이군요 감사합니다!
감사합니다!
어떤 상황에서 쓰시는 건가요? fullcalendar랑 dayjs랑은 써본 경험은 있어요!
제가 크롬익스텐션 개발 중인데
그냥 웹사이트 켤 때마다 백그라운드에 띄우고 싶은데 무슨 키워드로 검색해야할까요?
약간 momentum같은 느낌이에요
요거 jbee님이 만든 크롬 익스텐션에 대한 정보인데
도움이 되려나 몰겠네요
https://codesandbox.io/s/datetimevalidation-demo-mui-x-forked-lgjyby?file=/demo.tsx mui 예제를 dayjs 로 바꾸면 동작을 안하는데.. 어디가 잘못된걸까요 ㅠㅠ...
dayjs 로 하면 minDate , maxDate 같은게 안 되는데..ㅠ
그
dayjs 임포트해서
new Date가 아니라
dayjs()로 넣어보세요
new Date로 만드는 Date객체랑 dayjs에서 만들어주는 객체랑 달라서
js의 Date 객체는 dayjs로 변환 가능한데 반대는불가능해요
아헉...
Dayjs -> Date 변환하려면 명시적으로 .toDate() 호출해야돼요!
궁금한게 하나 있습니다만 프로그래머스 코딩테스트 연습을 많이들 하시나요 취업을 준비하는 입장에서 프로그래머스 기준으로 몇 Lv까지 풀 정도로 공부를 하는게 적당하다고 생각하시나요 2년 9개월 근무한 회사에서 퇴사 후 4개월째인데, 취업의 문턱에서 수차례 좌절하며 최근 알고리즘 공부에만 너무 몰두했나 하는 생각을 하고 있었습니다. 그런데 며칠 전 모 기업의 코딩테스트에서 2시간동안 6문제 중 1문제도 채 풀지 못해서 1시간의 시간이 남았음에도 포기했고, 아직도 코테 공부를 더 해야하는건가라는 생각이 들었습니다. ( 그 전까지는 서류 통과한 기업의 경우 대부분은 코딩테스트는 통과했고, 코딩테스트 연습이 충분하다고 여기고 있었습니다. ) 전 프로그래머스 기준으로 Lv2~Lv3 사이라고 생각하고 있었는데, 여러분의 생각은 어떤가요?
그정도면 괜찮은 것 같아요
코딩테스트 어려운 네카라 같은데면 좀더하시긴해야겠지만
일반적인 기준으로는 충분한것 같습니다
그런가요.. 저는 일반적으로 Lv2, 핫한 기업들 대비해서 Lv3도 어느정도는 풀어야 한다는 생각이긴 했습니다. ㅠㅠ
다른말이지만 프로그래머스는 너무 문제가 적어서
백준이나 리트코드를 애용하네요
요새 카카오 코테는 플레티넘 이상도 많은 것 같던데요..
백준 플레티넘 말씀하시는건가요?
@다몬 @델 도움주셔서 감사합니다!!
제리님님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
코린이 TodoMVC 비스무리한거 만들고 혼자 뿌듯해서 자랑하러 들어왔는데 쌓인 글들을 읽어보고 겸손해져야겠다 마음먹고 돌아갑니다 총총 선생님들 모두 화이팅하시구 좋은 주말 되시기를 바랍니다!!
제리씨님~| 반갑습니다 :) 어서오세요 ㅎ
안녕하세요!
환영합니다 제리님~ 이곳은 프론트엔드에 대해서 물어볼 곳이 없어 궁금한것들 마음껏 물어보고 내가 아는 것은 답해주면서 함께 성장하고자 하는 곳입니다~ 뭐든 편하게 글 남겨주세요
그래도 자랑마저 하세요 ㅎㅎ 보여주세요
보여쥬세여!!!
신입 기준으로 회사에 합격하고 보통 몇일 후에 출근하나요??
전 3일후에 출근했었습니다
저는 5일이었습니다
저는 한달 놀구 갔슴니다
저는 15일~
뭣모르고 합격했다고 신나서 다음날 바로 출근 가능하다고 했다가 CTO님이 쉬고 오시라고 다음 주에 보자고 하셨었는데
지금 생각해보면 질질 끌 수 있을 때까지 끌었어야 했어요..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
엇 ㅋㅋㅋㅋ
퇴사 전까지 2주 이상 쉴 수 있는 기회가 없단 걸 그땐 몰랐습니다..
보통 다 다르군요..
전 일단 방 땨문에 일주일 정도로 받아놨눈데
저는 일주일 놀다가 입사했던것같습니ㅏ
맘 같아선 2주로 늘리고 싶네요 ㅠ
저두 한달~
근데 여름이라 이거 원 어디 놀러가지도 못하고 너무 덥네요
돈만 오지게 쓰는 중
와우 한달..
다시 보니 굉장히 부끄럽네용 https://replit.com/@NightlyHerb/asdb-frontend-ui 컨셉은 리액트를 쓰고 싶은데 바닐라를 써야 하면 벌어지는 일입니다
이제 버실거니까 쓰셔야죠 ㅎㅎ
전 3주요~
안녕하세요 매일 눈팅만 하다가 갑자기 너무 비상사태라서 염치 불구하고 질문 올려요 ㅠㅠ
혹시 chart.js 써보신 분 계실까요?
chart js 의 막대나 선 그래프에 텍스트를 표시하려면 플러그인을 설치하면 된다는건 알았는데, 혹시 단순한 value값 말고 따로 각 데이터의 총합과 퍼센트를 표기하고 싶어요.
그럴경우 데이터의 배열 형태로 받으면 될지 궁금합니다.
ㅠㅠ 이렇게 질문 올리고 싶지 않았는데 ㅠㅠ 너무 죄송해요 ㅠㅠㅠㅠ
각 데이터별 통계가 들어가려면 object 형태가 좋지 않을까요..?
chart js 사용할때 지금까지 index 값이랑 맞춰서 사용하면 데이터가 적용되길래 배열로 요청드렸는데
오브젝트 형태로 요청드려서 나중에 필요하다면 따로 제가 바꾸면 되겠쥬..? ㅠㅠ
저는 보통 차트데이터 만들때
제가 앞에서 다시 데이터 다 제입맛대로 가공하고 사용하는 편이에요...
백엔드쪽에 요청하는거보다 차트데이터 가져오는 부분에서 map한번 돌려서 차트별로 입맛에따라 가공하는게 속편하더라구요..
공부 시작한지 두달째라서 아직 급하게 진행하다보니 두서없이 질문 드렸는데도 팁 알려주세서 감사합니다 : )
너무 멋짐니다..
모든 개발자를 존경합니다..
오브젝트로 오면 그걸 배열로 가공하면됩니다
어우 멋져요….. 오브젝트를 배열로 바꾸는것까지는 했는데 키값이 같은 애들끼리 또 따로 모아서 배열로 만드려니 힘들었어요 .. 하핳...
선생님들 리액트 배우는과정에서 현업 어떻게 되는지 궁금합니다
니꼬형은 리액트에서 html css 다 친다는데 현업에서도 이렇게하나요? 아니면 바닐라 js쓰듯이 html / css / js 이케 나눠서하나요?
프바프입니다..!
앗
html 친다고 하신 건 아마 jsx 말씀하신 거일 거 같고, css 는 프바프입니다
글쿤여.. 딱 하나로 정해져있는지 알았습니다 ㅋㅋㅋ
css를 나눠서 할수도 있고... styled component로 할수도 있고.. 기타등등..
사진
이미지를 버튼으로 사용하려고 하는데 방법이 있을까요;;?
button 태그안에 img 넣는것도 방법입니다
button에 style해서 적용하는거죠?!
<button><img/></button>
div에 이미지 넣고 onClick 속성 줄 때도 있습니다~
이렇게 해주고 button border:0 , background: transparent 해주면 이미지 버튼 처럼 쓸수있긴해여
tailwind에서도 적용이 되나요?!
당연히 되죵 근데 아마 tailwindcss는 커스텀하셔야 할겁니다.
아니면 tailwind랑 styled-component 혼용해서 사용하는 twin-macro도 한번 봐보세요
감사합니다!!
제가 webpack을 공부중인데 혹시 webpack dev server 돌렸습니다. 근데 index.html 파일을 수정하고 저장하면 왜 dev-server 돌고 있는 브라우저에서 최신화가 안될까요??… 새로고침해야지 html파일 수정한 부분이 반영됩니다 ㅠ
근데 자바스크립트 파일을 수정하고 저장하면 바로 반영이 되요….
webpack reload html 로 검색해보심이
간접적인 해결책인데 저는 vite로 바꿨더니 해결되었..
헛… webpack진짜… 제가 진짜 허접이라그런데;; webpack이 여러 js 파일들을 하나의 js 파일로 번들링해주는 거잖아요?? 그래서 entry가될 index.js에 모든 js파일들을 import해서 불러와서 실행시키는게 맞는건가요???
사진
이런식으로 작성하는게 맞는걸까요?;;
메인에 섹션이 여러개일때 스크롤시 섹션마다 멈추면서 스크롤되는? 애니메이션을 구현해보려고하는데 뭐라고 검색해야 나올까요? 스크롤 구간 멈춤 등으로 검색해보았는데 잘 안나오네요..!
scroll snap
으로 검색해보시셌어요?
즐거운 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
즐거운 네오님 안녕하세요!! 반갑습니다 :)
즐거운 퇴근~
안녕하세요
여러분은 일끝나고 헬스같은거 하시나요?
넵 합니다
가기 귀찮아서 집에 헬스장 만들었어요 ㅋㅋㅋ
ㅋㅋㅋㅋㅋ 유산소는 밖에서 뛰시는건가요
여러분 면접을 보면서 이 회사가 나랑 핏이 맞다라는 판단을 하시는 기준같은게 있으신가요? 물론 면접간 정신없이 답변하기 바쁘겠지만 뭔가 감이 오는 회사가 있나요?
재밌을것같은데? 라는 생각이 들면 대체로 재밌게 다닐 수 있는것 같아요
그니까.. 나하고 맞다..?
nextjs로 블로그 만들어보고 있는데요
포스팅할때 마크다운으로 하는데
velog처럼
사진
이렇게
바로 이동할수있는 리모컨? 이라고 해야할까요..
이걸 구현하고싶은데
키워드 알려주실 수 있을까요?
오 정말 감사합니다!!
그렇군요 다름이 아니고 제가 해야할 것에 대해서는 재밌겠다는 판단이 서는데 온보딩기간 감액이 있고 1시간 반 가량 출퇴근 거리를 고민하고있는데 이건 개인적 취향이 가장 중요한 거겠죠?
scroll anchor 로 저는 했던 기억이..
anchor?
오 감사합니다
다들 프론트에서 로그인 상태관리를 어떻게 하시나요? 백엔드에서 Jwt로 구현하고 username이랑 avatar는 로그인했을 때 받아서 세션에 넣어두려는데 제가 아직 쿠키와 세션에 대한 이해가 부족해서 그런지 인증 요청시점과 상태관리 방법이 감이 안잡히네요
면접자 한명한명 서류 꼼꼼하게 읽고 어렵고 부끄러울 수 있지만 프로젝트 내부 코드도 읽어보시거나 리드미 읽어보신 분들이랑 면접하면 핏이 맞다고 느껴집니당
대체로 그런회사가 기술 수준도 높았고 면접 내내 배려해주는 느낌, 괜찮은 기업 문화를 가지고 있었던 것 같아용
감사합니다 :)
TOC(table of contents) 찾아보시변 될거예요
감사합니다!!
안녕하세요 리액트에서 배열을 렌더링할 때 아래 사진과 같이 작성하고 결과를 보면 [Object object]가 나올것으로 예상했는데 실제 결과는 102030abc이런식으로 나와서 원래 이렇게 동작하는게 맞는지 궁금해서 질문드립니다.
사진
네 맞아요
리액트에서 내부적으로 베열을 join을 해서 렌더링 결과를 나타내나요?
안녕하세요 현재 리액트 2주정도공부한 학생입니다 이번에 상태관리는 redux, react-query사용해서 친구들끼리 토이프로젝트를 한번 해보려는데 혹시 redux,react-query에관한 괜찮은 인강이나 책있으면 추천좀해주실수있나요? 한달정도 계획하고 토이프로젝트해보려합니다
네 그런것같네요
그렇군요 예상한 결과가 안나와서 당황했네용
코드 반복해야할일 있을때
배열 렌더링할때
map을 통해서 처리하는데
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!!!!!
깊게 생각해본적이 없네요 저도..
토이프로젝트를 하려고하는데 궁금한게 생겨 왔습니당
안녕하세요
공공api를 파이어베이스db에 저장해서 쓰려고하는데
시간당 받아올려고하고
상업적으로 사용해도되나요??
구글링해보면 된다고하는데
공공api사이트에서는 저작권마크를 붙이라고하는데 어느게 정확한 정보인지 몰라서요
회사에서 yarn berry 사용하고 있는분 계시나요?
얀얀 베리
간단하게 사용해본적은 있는데, 딥하게는 안해봤어요
성능이 뛰어난가요??
yarn berry하고 npm 비교글 봤는데 매우 좋아보이던데여
도경잉님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
npm은 node modules에 자식 모듈까지 전부 다시 설치하는데 yarn berry는 자식 모듈까지 관리를 해줘서 동일한 모듈 설치가 없지 않나여??
도경잉님이 나갔습니다.
좋아보이는데 혹시 현업에서 많이들 사용하시는지 궁금햇슴다 안정성이라던지!
저 썼었어요! zero install로
저희도 제가 도입해서 쓰고 있습니당
오호 제가 잘몰라서 그런데 zero install이 머에요?
피스메이커 프로도님이 나갔습니다.
yarn berry p'n'p를 쓰면 node_modules 대시 .yarn/cache 에 .zip 형태로 패키지들이 깔리는데
걔들을 git ignore 안시키고 깃에 그대로 올려버리는거예요!
zip으로 압축해놨으니까 용량도 1/n 으로 작고 파일 수는 몇만배 적어서
ㄹㅇㄹㅇ 디스크I/O도 확줄고
어느순간 프로젝트 보면 몇기가씩 되는거보면 진짜 얀베리 도입하고 싶음요
아 확실히 좋겠네요…ㄷㄷ
벙찐 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
벙찐 튜브님이 나갔습니다.
브랜치들 사이에서 패키지 다르면 부랜치 바꿀때마다 yarn install해줘야되는데
상쾌해요
그런거 안해줘도돼서
사진
공공api 상업적으로 사용하는 것은 전혀 문제 없다고 하네요. 저작권 마크의 경우 정해진 것은 없고 footer 나 어디든 무슨 무슨 Api를 사용합니다른 출처만 밝히는 문구만 있으면 된다고 하네요
뿅뿅 네오님이 나갔습니다.
그 공공api 신청할때 적절
앗 잘못 타이핑했어요.
토리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
신청 사용목적에 프로젝트 등록하고 테오말대로 출처만 언급하면 상관없습니디. 또한 리퀘스트횟수도 부족하다고 느끼시면 해당 리소스 제공하는 기관에 연락하면 제한도 풀어주셔요. 다만 공공 api 자체의 허용량이 높아서 저 사용할때는 큰 문제는 없었어요
안녕하세요 멋쩍은 튜브님~ 반갑습니다 :)
혹시 내부추천 제도가 있는 회사에서 비개발자가 개발자를 추천 가능한가요 ?
안녕하세요
네! 보통 가능한 것으로 알아요. 저희 회사도 직군 상관없이 모든 직군 사람들을 추천할 수 있어요.
헉
그러면 이점이 따로 있나요 ,
??
그럼요~ 내부 추천은 검증하기 위한 용도라서 함께 일해봤던 경험이 있는 사람이 추천하는 것은 아예 모르는 사람보다는 검증이 됬다는 거라서 가능하면 추천으로 사람을 뽑으려고 하요
반드시 같은 직군이어야지만 좋은 동료임을 알 수 있는 건 아니라서 그렇다고 생각합니다! ㅎㅎ 하드스킬 검증은 인터뷰로 하면 되니까요.
가능하면 취소요~ 추천으로 데리고 오는 것을 좋아한다 정도로 뉘앙스 변경할게요
실제로 데이터 상으로도 직군과 무관하게 추천 받아서 채용 프로세스 타시는 분들의 합격률이 압도적으로 높습니다 ㅎㅎ 몇 배 이상이에요.
그쵸
아하아하 !
아는 지인분이 해주신다고 하셨는데
사실 과제전형 이런쪽이 걱정이 되네요 ㅠㅠ
화이팅입니다! 잘 하시겠죠 ㅎ
헉 워니님도 계셨군요 강의 잘들었습니다!
감사합니다 !
내부추천 같은 경우 면접 때 보는 여러 측면 중에 협업, 커뮤니케이션 같은 걸 어느 정도 대체한다는 느낌이었어요! 디자이너나 기획 직군에서 추천하신 프론트엔드 개발자분이면 그쪽에는 강점이 있겠구나 하고 나머지 기술 스택 등이 우리 회사에서 필요로 하는 것과 맞는 지 등으로 검증하게 되더라구요
오오! 좋은 설명이네요
물론 단순 친구라서 추천하는 케이스도 있어서 이런 경우는 꼭 협업 능력이 좋다고 보장할수만은 없지만요😅
삭제된 메시지입니다.
안녕하세요 한가지 질문이 있어서 올립니다~ 지금 리액트 쿼리랑, socket을 사용해서 채팅을 만들고 있는데요. 문제가 체팅 리스트에 처음 접속하면 서버에 2번 연속으로 요청을 하고 있어서… 이 부분에 대해서 질문 드립니다.
사진
사진
사진에 처럼 채팅 서버에 2번 연속으로 요청하는게 문제인데요...
사진 3장
다음과 같이 코드를 작성했는데… 잘 안되네요ㅠ
혹시 같은 문제를 경험해본 있다면 또 만약 해결하셨다면? 공유 부탁 드립니다~
요새 함수형 코딩 읽고 있는데, 태오님의 velog 글인 다시 쓰는 함수형 프로그래밍 글 너무 좋네요!! 1독하고, 함수형 코딩 봐야겠어용ㅎㅎ
useEffect에서 refetch가 호출되고 있어서 그런 것 같은데요~
삭제된 메시지입니다.
캐시된 데이터가 없는 상태에서 마운트되면 useQuery에 의해 한번 호출되고 useEffect에서 refetch가 호출되면서 한번 더 호출되는 것 같아요~
감사합니다~ 함수형 코딩을 처음 접하면 신세계를 접하면서 그 뒤로는 모든 것을 극닥적인 함수형으로 작성하게 되는 함수형 코딩병을 잠깐 앓았다가 어느순간 클린코드가 곧 함수형 코딩이구나를 깨닫고 적절히 타협하며 잘 작성하는 테크를 타게 되실꺼에요! 중도 하차 금지!!! ㅋㅋ
오!!ㅎㅎ그러면, 함수형 코딩 다음으로 읽을 책으로 클린 코드 괜찮을까용?ㅎㅎ
네~ㅋㅋ 클린코드는 약간 수학의 정석 같은 느낌이에요
아항! 클린코드랑 리팩터링 2판이랑 고민했었는데, 클린코드부터 읽어야겠네용!! 덕분에 공부방향성을 찾게 되어 너무 기쁩니당!!ㅎㅎㅎ
오 네 답변 감사합니다. 그래서 제가 조건을 걸고 수정을 시도 해봤는데.. 잘 안되네요ㅠㅠ
함수형 코딩 에릭 노먼드 책인가요??
넵 그 책이 제일 좋은 것 같아요
도은이 :)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 도은이 :) 님 반갑습니다!!!
안녕하세요 태오님 블로그 잘보고있습니다 😆
앗 테오.. 죄송합니다ㅎㅎ
감사합니다! 더 편한 방식으로 불러주세요 ㅎ
코린이 질문 하나만 받아주실수 있나요?
얼만든지 물어보세요~ 이곳은 그럴려고 만들었습니다 ㅎ
하요님이 나갔습니다.
포트폴리오에 들어갈 프로젝트들 어느정도 수준이 되어야 하는지 잘 모르겠어요
취업용 말씀이신거죠?
넵
답변하기는 어려운 질문인데 왜냐하면 면접마다 다 다르고 보고자 하는 것도 사실 운적인 요소도 있구요
일단 클론코딩은 별로라고 들었습니다…
그래도 저는 어느정도 완성된 형태의 프로젝트
그리고 본인의 생각이 많이 들어간 (기술적이든 서비스 적이든) 형태의
맞아요 그냥 따라 만든 클론코딩이 클론서비스가 아니라
자기가 만들어보고 싶은것들로 구성하면 될까요
클론코딩이라 하더라도 이 프로젝트에 대한 이유거 분명하고 본인의 생각과 의지가 많이 반영되어 있는 느낌늘 주는 것에 높은 점수를 줍니다
네! 사실 그게 제일 좋아요 만들어보고 싶어서 했다는게 제일 개발자스러운 접근이잖아요 ㅎ
제가 디자인 감각이 없는데 디자인도 많이 볼까요
결국 깃헙을 보지만 디자인이 잘 되어 있으면 좋은 선입관을 심어 줄 수 있지요
디자인이 화려하거나 하는 것보다 완성되지 않은 느낌만 주의하시면 될것 같아요
답변감사합니다!
앗 그러셨군요. 어떤 이유로 useEffect에서 refetch를 하시려는 건지 알 수 있을까요?
스프린트 10기의 결과물을 공유합니다. 지난주에 끝이 났지만 개발시간이 부족하다고 아쉬워서 자발적으로 팀끼리 더 시간을 투자하여 퀄리티를 조금 더 높여서 지금 공개해보려합니다. 물론 스프린트 데모이기에 모든 기능이 완성된 것은 아니라는 점 양해 부탁드려요.
1팀 냉장고 파먹기 - 오늘도 해먹는 간장계란밥 말고 내 냉장고에 있는 것만으로 간단하게 뭘 해먹을 수 있는걸 찾고 싶어! https://naengpa.netlify.app/
첫 채팅 리스트에 접속하면 2번 연속으로 호출하고 닫았다가 다시 채팅 리스트에 접속하면 서버에 요청을 보내지 않아서 refetch 함수를 조건 걸어서 해봤는데 잘 안되네요ㅠ
2팀 모두의 레파지토리 - github repository도 SNS 처럼 볼 수 있었으면 좋겠다. - 자랑스러운 나의 레포지토리를 올리고 다른 사람들과 공유해보세요! https://mo-re.netlify.app/
오 대박..
어우 상당한데요
이모티콘 멋있습니다..
원하시는 동작이 데이터가 있을 때 업데이트 하는 것이라면 if(!chats.data) return; refetch(); 정도면 될 것 같은데요. 서버측 수정이 가능하면 업데이트가 있는지 관계없이 클라이언트에서 refetch하는 것 보다는 지금 socket 사용하고 있으니 업데이트가 있을때 메시지를 내려주고 메시지에 업데이트된 데이터를 함께 내려줘 클라이언트에서 직접 반영 하거나, refetch를 호출해 서버로부터 업데이트된 데이터를 받아오는것도 고려해보시면 좋을 것 같아요!
이모티콘
머쪄…
앗 다른 문제였군요 ㅎㅎ
와...
완전 필요한 서비스인거 같아요 ㅋㅋㅋ
데이터 수집하는것도 엄청난 일이었을 것 같은… ㄷㄷ
냉장고 서비스는 상품성이 있지 않을까요?
오~ 네 답변 감사합니다 👍
진짜 못올려 보는게 좀 아쉽네용 ㅜㅜ
냉장고 파먹기 너무 멋있어요
레포지토리도 너무 멋쪄요!!!
저도 잘하고 싶네요...
진짜 이번 서비스만 끝나면 저도
스프린트 참여해서 재밌게 뚝딱뚝딱
만들어보고 싶네요 ㅋㅋ
짧은 시간동안 다같이 함께 모여 멋진 결과물을 만들고 소중한 경험 함께 해준 스프린트 10기 참가자분들께 모두 감사드립니다. 스프린트의 취지는 결과물 보다는 아이디어를 구체화해서 배포까지 해보고 성공적인 협업 경험과 좋은 사람들을 얻어가는데 있기에 이번 스프린트도 좋았다고 생각합니다. 스프린트 10기 회고글 입니다. 다들 너무 너무 수고 많으셨습니다. https://velog.io/@teo/google-sprint-10
너무 기엽고 아이디어도 좋네요..멋있어요 스프린트 10기 참가자분들 👍👍👍👍
우와 ㅎㅎ 넘 귀여워요 ❤️🙏 배포는 netlify 로 하셨는데 git action 이나 다른 배포 말고 netlify 선택하신 이유가 있을까요? 저도 도입해보려구요 ㅎㅎ
우와 아이디어들이 너무 다 재밌고 멋있네요! 10기분들 모두 멋있으세요!
오... 테오의 스프린트가 점점 커지는거같네요.. 최고다 최고!! 10기뷴들 넘 멋져요 ㅎㅎ
11기는 언제하시나요
이모티콘
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!!
next에서 라이브러리를 사용하는데 window에러가 나는데
const XMLParser = dynamic(() => import("react-xml-parser").then((mod) => mod.XMLParser), );
이거와
const XMLParser = dynamic(() => import("react-xml-parser")), );
이렇게 해도 함수를 못찾는데 제가 잘못 코드를 작성한걸까요?
사진
사진
new 키워드와 함께 사용해야되는거 아닐까요?
가이드에 예시를 보니 new키워드로 객체를 생성하여 객체에서 메서드를 호출하고있네요.
라우터나 axios의 URL Path string를 입력하는 함수에 타입스크립트오 어떻게 동적으로 타입을 붙일 수 있을까? https://lihautan.com/extract-parameters-type-from-string-literal-types-with-typescript/
8월말이나 9월초를 생각하고 있습니다. 8월단은 휴가시즌이 있는 달인데 아직 휴가일정이 확정되지 못해서 일정을 못정하고 있어요 ㅎ
아이폰 사파리에서만 저 부분이 스크롤이 안되는데 어떤 원인이 있을까요?
사진
지난번엔 에프랩 알아보시던 분 계셨던것 같은데 혹시 등록 하셨나요? 아직 고민중이신가요?
앞단쳐내기님이 나갔습니다.
앞단쳐내기님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 앞단쳐내기님~ 반갑습니다 :)
안녕하세요. 신입 프론트개발자에요. 잘부탁드립니다
저도 잘 부탁드립니다. 이곳은 프론트엔드에 대해 궁금한게 있거나 하고 싶은 얘기가 있을때 그런데 얘기 나눌 곳이 없을때 언제든 함께 이야기를 나누고 성장하고자 하는 곳입니다~ 언제든 편하게 글 남겨주세요
여기 2팀만 모집한다고 광고하는곳 맞나요?? 지나가다 본거같네요ㅋㅋㅋ
예전엔 그랬었는데, 최근에는 멘토풀 넓어지면서 꼭 그렇지는 않은 것 같아요. 멘토 스케쥴에 따라 인원 조절되는거 같더라구요
근데 프론트엔드는 멘토가 1명뿐인거 같던데...아닌가요?
프론트엔드는 카카오스타일, 마이리얼트립, 뱅셀 출신 3분이더라구요
저였던 것 같은데 아직 확정은 아니지만 등록해놨어요
근데 에프랩 레포지토리가보면 죄다 자바고 자바스크립트는 first commit 하나 있는 레포 하나뿐이라
조금 고민되긴 합니다
결제하셨나요?
이번에 프엔 8월에 처음 열려서 그렇다고 알고 있어요
네네 결제는 했는데
팀 빌딩 전에 취소가 가능해서
아직 면접 남은 곳 결과에 따라서
달라질 것 같아요!
내일까지 친구랑 같이 신청하면 할인 되던데
취소하시면 수수료 나오는지 한번 확인해보시고 괜찮으시면 저랑 같이 신청 안하실래요? 40만원 할인이던데
저도 너무 괜찮은데 내일까지 신청이면 힘들 것 같아요ㅠ 제가 다음주까지는 결정을 미뤄야 할 것 같아서요
헐 가격이 800이네여
#9145.eth님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저도 최종결정은 아닌데 미리 결제해두고 취소해도 되나 알아보려구요 ㅠ 일별로 환불해준다고 나와잇던데 멘토링 시작전에 취소하면 100% 되는지 확인해보려구요
snoopso님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
얼리버드에 친구랑 등록하면 700만원 초반이더라구요
안녕하세요~
이거
TanStack React-query가 뭔가요?? react-query docs치면 이것밖에 안나오는데 이거아니지 않았나요?
react-query가 이번버전부터
이름이 바꼈어요
네이밍이 tanstack query로 바뀌었어요
다른 프레임워크들도 지원하게 되어서요 ㅎㅎ
이거때메 30분날렸네요...
3.39.2버전으로 우선 사용 권장드립니다
4버전부터는 탠스택이 인수해서 라이브러리 구조나 기능이 좀 변했어요. 그런데 안정화가 다 되어있진 않아서 혼란이 있을겁니다
근데 라이브러리는 왜 인수하는거에요? 돈 안되지 않나요?
도서관 매니아라서..?
이모티콘
이모티콘
인수한거에요? 원래 거기서 만들었는뎅
원래 탠스택꺼 아니었나요?
혹시 window로 vm ssh 접속해보신 분 있으신가요? 입사 과제로 받게 됐는데 백엔드 쪽도 같이 해야해서.. 처음해보는 거라.. 질문드립니다 ㅠㅠ 있으시다면, password를 입력하라는 값이 나오는데 password를 아무리 입력해도 접속이 거절되는데, 이 경우 보통 password가 잘못된 경우일까요? 혹은 제 컴퓨터 설정이 잘못됐을 수도 있을까요?
확실하진 않지만 리액트에 종속되지 않고 뷰쿼리 스벨트쿼리 이런거 만들려고 분리한 거라고 이해하고 있었어요
네 저도 그런걸로 알아용
리액트 테이블 라이브러리도 턴스택으로 바뀌고
선생님들 화살표 함수 많이 쓰시나요?
저만 () { ~ 이게 더 편하다고 생각하는..
적응되니 이것만 씁니다ㅎㅎ
글쿤여 ㅋㅋㅋ 역시 적응의동물
함수가 값이라는 게 더 잘 느껴져서 화살표 함수만 씁니다!
function() {} 이렇게 익명함수 쓰는 건 너무 길어서 불편하고..
문법도 간결하고 this context 때문에라도 자주 쓰게 되더라고요
아 this
9145.eth님 반갑습니다 :)
snoopso 님도 안녕하세요!!
저도 function가 꼭 필요할때 빼고는 const 화살표 함수만 사용하는 편입니다.
전 이게 타입스크립트로 쓰면 제네릭 식이 더 간결해져서 선호합니당
비번문제아닐까욤
22,23포트 사용중이 아니면 비번문제?!
포트 번호를 10022로 받았는데.. ping 이랑 telnet 으로 확인해보니 없고, 22포트가 있어서 22로 연결하긴 했슴다ㅜㅜ
비밀번호 세번정도 입력하면 Permission denied (publickey, password) 요롷게 떠서.. 일단 vm 정보 제대로 받은건지 문의 메일은 보내놓았고, 제 컴퓨터 설정단 문제도 있는것같아서... 이것저것 시도해보긴 하규있습니다.
혹시 꼭 필요할때가 언제일까요 ?
재귀호출? ㅎㅎ
클래스 안에 있는 퍼블릭 함수...?
function 의 this context 가 필요할때도 잇구요
아항.. context가 필요할때 쓰는군요 !
컴포넌트만들땐 선언식 표현식 중 어떤걸 선호하시나요
arguments를 써야 하는 경우도 있어요
엄지척 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
일반적으로 잘 쓰이는 건 아닌데 라이브러리 만들때 함수인자 개수에 따른 오버로딩처리 등에서 사용되는 경우가 있어요
엄지척 제이지님 반갑습니다 :)
안녕하세용~
답변 감사합니다 !
어서오세요 이곳은 프론트엔드에 대해서 궁금한것들을 묻고 답하는 공간입니다 편하게 무엇이든 물어보세요 헤
새로운 프로젝트에 tailwind하고 emotion 고민하고 있다가 관련 추천 영상을 보게 되었는데 너무 반갑네요 ㅎㅎ https://tv.kakao.com/channel/3693125/cliplink/423595065
연예인 테오..
티비에 나오는
https://medium.com/@appiahyoofi/goodbye-node-js-9e2f71f5e430 NodeJS를 대체할 새로운 Javascript 런타임이 나왔다네요.
개발자가 되고 싶은 개린이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
반갑습니다 개발 공부 시작해보려는 신입입니다 잘 부탁드립니다
안녕하세요 수스순님~~ 반갑습니다 :)
안녕하세요! ㅎㅎ
ㅋㅋ 프론트엔드에 오신것을 환영합니다. 이곳은 궁금한 것이 있을때 언제든 궁금한것이 있으면 편하게 물어보고 답을 듣고 또 말해보며 함께 성장하고자 하는 곳입니다. ㅎ 환영합니다. 편하게 글 남겨주세요
감사합니다!! 스스로 공부하다 해결하기 어려운 문제가 있을 때 도움 부탁드리겠습니다 :)
삭제된 메시지입니다.
프로그래머스 뉴스 클러스터링 코테 문제 풀다가 헷갈리는 부분이 있어서 질문 올립니다 ㅠ
사진
사진
아래와 같은 조건이 있어서
교집합은 [ 'aa', 'aa' ]
합집합은 ['aa', 'aa', 'aa']
가 나와야 하는데, intersecion 배열의 로직을 바꾸었을 때 union 배열의 값이 다르게 출력되는데 이 원리가 뭔지 이해가 잘 안되네요
splice 메소드가 사용되면 다음 줄 코드가 실행되지 않는건가 싶어서 첫번째 반복문에서 union.push 하기 전에 콘솔을 출력해보면 콘솔도 나오는거 보면 그건 아닌거 같은데 왜 저 로직이 동작하는지 모르겠습니다 ㅠㅠ
splice는 배열을 직접 변경합니다
아 splice 때문에 arr2 배열에서 중복되는 것들은 제거 되어서 밑에 반복문은 중복되는 인자들이 제거되고 남은 배열에서만 돌아는거였네요
감사합니다!
여러분들 data 흐름을 이해하기 위해 도식화 하려는데 혹시 많이 쓰는 tool이 있나요 ?
리액트 처음 토이 플젝하려고 하는데 데이터 공유 모듈 어떤거를 먼저 해보는게 좋을까요?? 리덕스랑 리액트쿼리, swr 생각하고 있습니다!!!
리덕스 많이 쓰지 않나요 ??
토이 플젝이면 규모 작으니 굳이 안써도 돼지 않나여?
리액트 이론 적용하면서 실습용으로 한번 경험 해보려구요
리액트쿼리랑 swr을 같이 써요??
아뇨아뇨
세개중에 한개 골라서 해보려구요 현재 다 사용해본적 없어서 쓰기 쉬운 거 부터 하나 골라서 해보려구요]
기존 리덧스는 완전 레거시로 된건가요?
피스메이커 프로도님이 나갔습니다.
사진
그래도 압도적입니다
2022년 1월에 무슨일이 있었던거죠?
연초에 휴가가 많아서..?
이야 좋은 사이트 하나 얻어가네요
감사합니다 리덕스 툴킷으로 진행해보겠습니다
근데 리액트쿼리는 엄밀히 말하면 상태관리툴이 아니어서 병행하는것도 좋아요
안녕하세요 이직 고민이 있어 여쭤봅니다. 현재 퍼블리셔&react 프론트앤드 초기 단계 업무를 보고 있습니다. 총 경력은 2년정도 되었습니다. 최근 들어 이직 고민이 생기는데 구인구직 사이트에서 직무 검색하면 나오는 아무 회사 들어가긴 싫어서요. 어느 곳으로 가야할지 모르겠어요. 지금까지 다녔던 회사들은 에이전시, B2B, B2C 까지 운영 예정인 회사였습니다. 그래서 이번엔 금융권이나 요기요, 우아한 형제들 같은 곳은 어떨까 싶습니다. 네이버나 카카오도 좋겠지만 그쪽보다는 금융권이 더 끌리는 것도 같네요. 요즘은 어떤 곳으로 가는게 나을까요? 아직 생각 정리가 되지않아 말이 두서없다는 점 양해부탁드리며 조언 기다리겠습니다.
데이터 페칭과 캐싱을 담당하는 친구이기때문에 전역상태관리랑 다르게 사용하는게 좋다고 생각해요
이거 사이트 이름이 뭔가요..?
Npm trend용
A vs B vs C npm trend 라고 검색하면 돼용!
Rtk랑 리덕스로 2개와 redux react query 조합 주로 뭘로 쓰시나요? Rtk써보신분 계실까요?
현업에서 next 쓰는 분들 혹시 getStaticProps 메서드 많이 사용하나요?
RTK는 RTK query를 말씀하시는 걸까용?
네 맞습니다 리덕스에서 나온 쿼리요
앗 저는 RTK query는 안써보고 redux + react-query 는 써봤습니당
리덕스를 쓰기 쉽게 해주는게 rtk인데 거기에 추가로 리덕스를 따로 쓰는건 이상한데요?
리덕스 툴킷 이 아니라 rtk query입니다 별개로 알고 있는데
rtk가 redux toolkit 아닌가요?
위에..오타인데..Rtk query 랑 rtk는 별개 아닌가요?
rtk는 쓰더라도 rtk query는 안쓸수도 있긴 하니까요 ㅋㅋ
rtk query가 rtk 안에 있는 애드온 아닌가요? 만약 rtk query를 채택 했으면 rtk 하나로 다 관리 가능한걸로 알고 있어서요
Rtk query랑 리덕스랑 궁합맞아도 히액트 쿼리를 선호하는 걸 본거 같아서 리덕스 쓰시면 어떤 식으로 스택을 사용 하시는 지 궁금하네요.
저는 rtk query를 직접 사용해보진 않아서 rtk + react-query를 주로 사용했었어요
Rtk query를 두고 그렇게 하신 이유가 있으실까요?
제가 rtk를 사용할 땐 없었거든요 ㅠ...
리덕스를 쓰다보니 거기서 나온 rtk query도 리액트 쿼리랑 비슷한 기능 라이브러리로 충분히 대체되고 데브툴러도 확인이 가능할거 같아서 다른 분들은 현역에서 어떻게 사용하시는지 궁금해서요 ㅎㅎ
사진
혹시, 코드숨 수강해보신분 있으신가요? TDD 배워보고 싶은데, 괜찮은 것 같아서 혹시 들어보신분 있나 해서 여쭤봅니당!
에프랩은 너무 비싼것 같구….ㅎㅎ
ㅋㅋ.. 이런 경우 특징: 본인이 쓰는 라이브러리는 괜찮음
그럼 상사가 만든것도 타인꺼니.. 못 믿는
서로 다름 라이브러리로 ㅋㅋ
Recoil은 어떤가요 러닝커브
리코일은 그냥
공식문서보시면 쉽게 따라할수잇는 수준인거같아요
리코일 러닝커브라는게 있을까 싶을정도로
간단합니다
튜토리얼 todolist 만드는거 한번 해보세요! ㅋㅋ
안녕하세요님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 프엔 개발 지망생입니다 혹시 노트북 추천좀 해주실수있을까요?
맥북 m1 에어 추천드려요!
렘은 16으로
m2요
윈도우 노트북은 추천 안하시나요?
맥이 훨 편해요
윈도우 노트북 쓰면서 마주친 오류들이 너무 많아서
맥 오니까 마음이 편안하더라고요
그렇군요 감사합니다
여유 있으시면 제일 좋은 맥북 추천 드립니다 학생이시면 에어 추천 드리고요
안녕하세요님이 나갔습니다.
사진
갤럭시맥북쓰면 해결됩니다
아니면 프리도스 노트북 사셔서 우분투설치하시는 것도 방법이긴합니다..
우분투도 좋죠
전 우분투 좋아해요 ㅋㅋ 다양한 이슈 겪어보면 맥 윈도우가 선녀로 보이거든요
쉘님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 쉘님~~ 반갑습니다 :)
안녕하세요~!
어서오세요ㅎ 이곳은 프론트엔드에 궁금하게 있을때 물어보고 또 내가 아는 질문들은 적극적으로 대답을 해보면서 함께 성장하고자 하는 공간입니다. 편하게 무엇이든 글 남겨주세요! 감사합니다!
넵!! 많이 배워가고 나눠볼게요!!
우쭈쭈님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
냥냥펀치님~ 반갑습니다 어서오세요 :)
usecallback 같은거 내부 코드가 궁금해서, react 소스 코드 보고 있는데, usecallback을 찾았는데, 어떻게 내부 모습을 봐야할지 도저히 감을 못잡겠네용ㅠㅠ 혹시, 오픈소스같은거 코드 보실 때 팁 같은거 있을까요?
잘 찾으신거 같은데요??
찾긴 찾았는데, 어떻게 메모이제이션 되는지가 궁금하거든요! 이 코드만 봐서 몰라서ㅠㅠ이럴경우 어떻게 하시나요..고수님들은ㅠㅠ
하나하나 찾는수밖에 없습니다. 오브젝트같은거에 담는걸로 봤었는데
useCallback 만 정리한 게시글을 찾는거 같아요
내부 구현체가 있는데 깃 클론하셔서 검색하시면 더 찾기 쉬워요
저는 클론해서 검색기능으로 찾앗어여
클론해서 vscode 같은곳에 찾아보라는 말씀이신거죵?ㅎㅎ
이 게시글에 동작원리가 간략하게 설명되어있어요
와우!!! 감사합니당!!ㅎㅎㅎ
삭제된 메시지입니다.
한국어 번역도 있어요~
오! 감사합니당!!ㅎㅎ
악!!!!ㅋㅋㅋㅋㅋ여러분이 주신 자료에서 키워드 뽑아서 clone 한 코드 검색하니 구현체 드디어 찾았어요!!! 감사합니당ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
진짜 정직하게 메모이제이션되어있지 않아요? ㅋㅋㅋㅋㅋㅋ
혹시 링크 공유해주실수있나요?🥳
네!! 신기하네용!!ㅎㅎㅎ
여기용!!ㅎㅎ
감사합니다!!
const exampleList = [{ id: "1", description: "contact abc@gmail.com now" }]; exampleList를 map 돌려서 description으르 꺼냈는데 그중 'contact'과 'now'사이에 있는 abc@gmail.com에만 mailto를 걸고 싶은데 어떻게 해야하는지 아는분이 계실까요? 탬플릿리터럴 쓰면 [object object]에러가 납니다🥲
descripton을 split(' ') 하신다음에
정규표현식으로 스플릿
각 원소를 span으로 묶으면 안될까요?
그럼 가운데 span에만 밑줄 그으면 되니깐 원하시는 결과가 나올 것 같은데용
후움 한번 스플릿 시도해보겠습니다 !
사진
오 프린이 방금 뭔가 감을 잡은 것 같은데 이런 식으로 컴포넌트를 조립하면 되는 건가요??
이전값과 변경값을 비교해서 값이 달라졌을때와 이전값과 같을때를 파악해야하는데 비슷한 것 구현해보신 분 계세요? Useref 사용중인데 쉽지가 않아서 조언을 듣고 싶습니다
input에서 비교하는건가요?
useEffect 로 하면 되지 않을까요?
네 맞습니다 input에서 비교합니다
useState에 (이전값)=>다음값 함수를 넘길 수 있다고 배웠어요!
setState에요!
잘 나누셨네요 나아가서 props drilling을 어떻게 처리할지, input이 늘어나면 onChange 함수가 계속 늘어날텐데 어떻게 처리할지에 대해서 고려해보시면 좋을것 같습니다.
오 감사합니다 관련해서 더 찾아보고 생각해보겠습니다 ㅠㅠ
삭제된 메시지입니다.
지금 어떤 방식으로 적용해보셨는지 코드를 좀 볼 수 있을까용
지금 뒤죽박죽으로 작성해서 보여드리긴 부끄럽지만 ㅎㅎ 현재 해당 링크를 참고하며 작성하고 있습니다 https://yoursource.tistory.com/8
정말 감사드립니다!! 혹시 onChange가 많아지면 안 좋은 점이 있나요? 보기 불편한거면 그냥 function으로 바꾸고 뒤로 빼놓게요!!
사진
이렇게 하시는건요?
아뇨..! 그냥 onAgeChange 함수와 onUsernameChange 함수를 하나로 만들 수 있을 것 같아서 드린 말씀입니다. 물론 상황에 따라 나눠서 사용하는데서 오는 이점도 있을 수 있습니다
이해했습니다 감사합니다!!
const [name,setName]으로 변경 해주셔야 될거 같은데 에러 안뜨나요!? 워닝이 뜰거 같은데
useState는 상수로 선언해야댑니다
앗 넵 옮겨적는 과정에서 실수했네요
감사합니다. 적용해보겟습니다!!
혹쉬 구현체 뭐라고 검색해서 찾으셨어요??😂
https://goidle.github.io/react/in-depth-react-preview/ 저 이거보고 공부했는데 최고입니다 👍
v18에선 좀 달라서 아주 정확하진 않지만
삭제된 메시지입니다.
value도 빠졌네요 <input … value={name} />
와우 찾았습니다 최고네요 정말
이전값과 변경값이 같을 때 판별하기가 어려운 것 같습니다 ㅠㅠ 올려주신대로 해보았을 때 기존 state 초기값과 입력한 값이 모두 다를 경우밖에 나오지 않네요 .. ㅠ 그래도 알려주셔서 감사합니다
실무에서 react hook form많이 사용하는 편인가요? 실무에서 응용이 많이되어도 유용한지 궁금합니다 ㅎㅎ
앗 같을때를 파악하는거군요 죄송합니당
와 진짜 좋네요 감사합니다 👍
사진
요즘 너무 더운건지 너무 습한건지...
어제는 덥고 오늘은 습하네요
무한 에어컨
아이돌 동윤님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
초롱초롱 튜브님이 나갔습니다.
사진
vite 시작화면이 바뀐것같아요
https://vitejs.dev/blog/announcing-vite3.html 2.9에서 3.0으로 바뀌었네요!
뒷북죄송합니다... ㅠㅠ
저희 회사는 폼 검증 라이브러리 사용 안 하다가 얼마 전부터 rhf 사용 중입니다 쓰기 전보다는 훨씬.. 많이 괜찮네요
사용후기가 긍정적이네요 ㅎ경험담 감사합니다!
formilk 랑 rhf 랑
비교 검증을 하고 rhf 를 혹시 도입하신건지 궁금합니다!
저도 회사들어오니깐 rhf를 써서 아무 생각없이 rhf 를 썼는데, 스타수가 더 많은 건 formlik 라는걸 얼마전에 알아서
비교대조를 좀 해보고싶은데,공식문서상으로는 거의 차이가 없어보이더라고여
저는 formik 쓰다가 rhf로 넘어왔는데요, formik은 특정 필드가 변화해도 전체 form 상태를 변경해야해서 상품 등록같은 복잡한 폼에 적용했을때 성능이슈가 좀 있었어요
https://blog.songc.io/react/react-form-control/ 요 글 살펴보셔도 좋을 것 같아요!
순수 폼 검증 으로 하다가 라이브러리 쓴 차이 체감이 어떻게 되실까여? 어떤 부분이 좋고 나쁘셨으나요
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
개인페이지(블로그 제외) 구글 애드센스 달아보신분 있으실까요??
제가 이번에 무료 api를 사용해서 페이지를 하나 만들었는데(리스트,상세페이지 정도)이런 페이지에도 구글 애드센스를 사용할수있나요?? 검색해보면 다 블로그에만 사용해서요 ㅜㅜ
국비에 목숨님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
응원하는 튜브님이 나갔습니다.
이제국비로
취직준비하는 주린입니다
많은 공부를 하고싶습니다
주린이가뭐에요?
아아
어린1
어린이
코린이
입니다
주린 ㅋㅋㅋ
기본적으로 yup 같은 라이브러리 사용해서 문자열 숫자 불린 이메일 요런 걸 간편하게 사용할 수 있어서 좋았고요 코드도 간소화해졌다고 느꼈습니다~
저도 formik vs rhf 선택할 때 성능적으로 rhf이 더 낫다고 해서 후자를 선택했구요
렌더링 관련해서는 rhf이 더 좋았습니다 formik은 필드 입력할 때마다 렌더링 된다고 하더라고요 rhf는 옵션에 따라 다릅니다
포믹은 커다란 useState 같은 느낌이라 최적화하려면 memo 써야되긴 하죠
저
이제 프론엔
준비하는데
세가지언어만
하고있거든요
리액트가 좋아하는 건 포믹이고 성능이 좋은건 rhf일 수밖에 앖을 거 같아요
동의합니당ㅋㅋ
루트경로에 Robots.txt를 만들었는데
구글에서는 없다고 나오는데
같은 에러겪어보신분있나요??
netlify 이걸로 배포했습니다
순수 네이트브로 폼 로직과 rhf사이에서 물론 라이브러리라 간단한 점이 있지만 rhf로 갈아탈 정도의 장 단점이 있을까요.? 안 써봐서 궁금하네요
소문자r로 배포했습니다 ㅜㅜ
저는 rhf 쓰는데 실질적으로
입력 폼에 input만 있는건 아니고 상태에 따라서
모달, 드롭다운, 이미지 등록 등 다양한데
이 상태들을 setvalue만으로 관리하는게 생각보다 까다로와서
다음 프로젝트에선 포믹을 사용해볼듯 합니다
혹시 NextJs 에서
사진
작업하다가 일정 시간 지난후에 코드 업데이트 할 때 wait - compiling... 계속 뜨다가 에러뜨는 현상
아시는분 있으실까요...?
jun님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 jun님 반갑습니다 :)
배불뚝 제이니님도 국비에 목숨님도 어서오세요~~ 환영합니다 :0
안녕하세요! 반갑습니다 😊 혹시 여기 톡방에 규칙같은게 있을까요?
없어요~ 편하게 궁금한 내용 관심있는 내용 이야기 해주시면 됩니다. ㅎ
넵 알겠습니다 😁
테오님 혹시 개발바닥에 react 객체지향 관련해서 동영상 보신적 있으신가요?
네~
처음에 그냥 봤을때는 react 구조 땜에 oop로 한다 한들 장황해서 별로 일거 같다 생각이 들었는데
잘만 하면 리액트에서 좀 아쉬운 점인 hooks에 종속적인거라던가 또 계단식으로 props를 넘겨주는걸 어느정도 해소할 수 있을거 같더라구요
이게 자동이 아녔구나.. 테오님이 직접 치시는지 몰랐어여 ㅋㅋㅋ
그렇다해도 react가 class형태로 바뀌지는 않을겁니다. 이미 class 방식에서 실패하고 함수형 + hooks 기반으로 와서야 react가 3강 체계에서 1강이 될 수 있었던 부분이고 ㅋ
개발바닥에서 말하는 OOP는 리액트와는 무관합니다. 상태를 다루는 방법을 백엔드에서 엔티티를 다루듯이 class와 같은 방식으로 다루는 것에 대한 얘기였던거라서요
튜토리얼 해보시고 공부해보시고 결정하시죠! 저는 비제어방식 느낌 드는 api가 취향에 안 맞아서 안 씁니다 :)
그건 맞습니다. 저도 리액트가 함수형으로 바뀐거 자체가 가볍게 쓰기 위함인걸 알고있는데 의존도를 낮춘다는 의미에서 좀 재미가 있어서 고민해봤었습니다 ㅋㅋ 그런데 이런 이야기를 할 사람이 없어서 여기 들어온 김에 말씀드려본거였습니다
방송에서도 구체적인 코드의 형태를 말한게 아니라서 제일 유사한 형태는 mobx와 같은 코드를 상상하고 있어요. mobx도 나왔을 당시에는 인기가 많았는데
OOP라서 인기가 없다라기 보다는 요새 라이브러리 선택은 좋다 나쁘다고 있지만 유명한가 아닌가도 여부도 많이 있는데다가 JS 생태계에서 class에 대한 부정적인 인식들이 있어서 - 가령 this는 나쁘다 - 와 같은 말들이 있다보니 class를 기반으로 하는 방식 자체가 관성적으로 유행을 하기 어려운 것 같아요
저번에 잠깐 호돌맨님 라이브할때 이거에 대해 정확히 뭘 원하시는 건지 여쭤봤었는데 이야기를 들어보니 의존도나 여러가지 측면에 장점보다는 사실 클래스 형태를 사용하고 싶은거 같더라구요
네 저도 그렇게 느꼈습니다ㅎ
근데 하나 좀 의문이였던건
그 배민에 김민태님이 계신데 그분한테 여쭤보면 바로 답이 나올거 같은데 왜 안물어보셨을까요 ㅋㅋㅋ
프론트엔드에 대해서 지금 이게 좋다라고 정의할 수 있는 사람이 얼마나 있을까요? ㅋㅋ 매일 외국 블로그에 올라오는데 What is Best javascript XXX in 2022? 이런 글들이라... 얘기했다고 한들 합의되거나 하지는 않았을거 같아요 ㅎ
하 그래서 고민입니다. 좀 벤치마킹할 코드 스타일을 찾아서 거기에 맞추고 싶은데 스타일이 다 파편화 되있으니 어떻게 맞춰야 할지 참 어렵습니다
테오님께서는 리액트에서 사용하시는 패턴이 있으신가요?
저는 React를 쓰고 있지는 않아요. 그래서 상태관리도 지금 만들어서 쓰고 있어서 React용 패턴은 아니지만
ㄷ_ㄷ..
아 그렇군요! 혹시 어떤거 쓰시는지 알려주실 수 있나요? 아니면 테오님 블로그에 가면 될까요?
대고수님들..
React에서 유사한것은 Zustand나 ngrx 정도 인듯해요
답변 정말 감사드립니다 😁 바로 읽어보겠습니다
아직 설명이 제대로 되어 있지는 않구요 😅 해당 라이브러리 말고 상태관리에 대해서는 지금 velog글 작성 중입니다.
그런 부분 참고해서 읽어보겠습니다 😊 그래도 갑자기 들어오자마자 뜬금없는 주제였는데 진지하게 답변해주셔서 감사합니다 👍🏻
아닙니다~ 최근 가장 관심있어 하는 주제이기도 하고 또 글을 작성하면서 조사를 많이 하다 보니 질문이 너무 반가웠어요. ㅎ
이모티콘
제가 이전에 이야기했었던 주제인데, setValue 를 안쓰는 방향으로 코드를 리펙토링하면 대부분의 form 문제가 해결됩니다!
setValue 를 그럼에도 불구하고 반드시 써야한다라고 한다면, 그건 기획이 어수선(?)함을 의심해볼 필요가 있어요
저도 최근에 비슷한 고민을 많이해서 반갑네요 ㅎㅎㅎ 어제 개발바닥채널의 프론트 oop 1,2 영상과 댓글을 정독했는데 저도 준님과 비슷한 생각을 했습니다. 왜 캡슐화, 상속, 다형성, 추상화등의 가치를 얘기하지 않고 클래스형에 집중을 할까... 답답했습니다. Ts의 인터페이스 문법이 있기때문에 클래스형으로 만들지 않더라도 느슨한 결합도를 달성할 수 있고, 일급객체이기 때문에 함수를 인자로 넘기는 방식으로 컴포지션의 상속을 구현할수 있죠. 제가느끼는 바로는 프론트앤드 진영에서 이러한 유지보수성을 지키기 위한 선배들의 발자취(oop개념 나아가 디자인패턴)를 "클래스형이 싫다." 는 의견에 편승되어 평가절하 하는것이 문제인것 같습니다. 당연히 멋진 프론트앤드 개발자분들은 리액트의 컴포넌트 설계 자체가 oop의 철학을 바탕으로 다룬다는 것을 알고 계시겠지만 이러한 주제로 대화를 시작하면 클래스형은 진입장벽이 너무 높아서 배울바에 다른거 공부하는게 이득. Js는 컴파일언어가 아니라서 성능적인 이슈가 있어서 프론트앤드 진영과 맞지 않다. 등의 의견으로 시작하니 깊은 대화가 쉽지 않았어요. 화두를 꺼내는 저의 실력이 뒷바침하고 있지 못해서 생기는 문제도 있었겠지만요 ㅎㅎ 결론은 클래스형이나 함수형에 매몰하지 말고 철학적인 관점에서 프론트앤드진영의 유지보수성을 높이는 방법을 고민해보고 싶어요 ㅎㅎ
이게 웹에선 input으로 개발하면 대부분의 문제가 해결되는데 rn에선 인풋이 TextInput으로 제공되다 보니깐 드롭다운, 파일접근을 직접 컴포넌트로 제작해야되서 그런 문제가 있던것같습니당
에대한 답변이엇는데 ㅠ
답변링크를 안달았네요 ㅠㅠ
같은 고민을 하고 계신분이 또 계셨군요 너무 반갑습니다!
째려보는 어피치님이 나갔습니다.
공식문서에는 그런 경우를 대비해서 Controller 또는 useControl 을 사용하라고 되어있는데 사용해보셨나요?
사실 개발바닥에 이야기는 별개로 어떻게 하면 각 컴포넌트끼리의 의존도를 어떻게 낮출지 고민했었는데 개발바닥에서 의도가 어떠한들 프론트엔드에 한 의문을 던져줘서 즐겁게 고민했었습니다!
js에서 class가 안 좋다는 것은 언어의 문법에서 기인하는 것인데 얘기를 하다보면 OOP vs FP로 얘기가 번지다 보니 좀 오해가 생기는거 같아요. OOP의 개념이 안 좋다는 얘기가 아닌데 말이죠 개념과 무관하게 그렇게 작성 할 경우 js는 안타깝게도 dx가 나빠집니다. ㅠㅠ
나중에 한번 디스코드나 게더에 모여서 이야기하는 시간을 가지면 좋을것 같습니다 😁
언제든 환영합니다 ㅎ
맞아요 확실히 개발경험이 안좋앚더라구요 클래스로 만들면 ㅠㅠㅠ
오... 재미있을 것 같아요
그럼 지금? ㅋ 어차피 날짜와 시간 잡아도 사람 모으는 건 쉽지 않아서요 ㅎ
지금 좋아여
저는 좋아용
ㅋㅋㅋㅋㅋㅋㅋ
헉 저는 준비가 덜 되었는데 너무 무섭네요 ㅠㅠ
디코 놀러 오세요~
디코 주소를 알 수 있을까요?
이건 몰랐네요!!!!!! 감사합니다!!!!!
헉
지금 토론하시는거면
듣고싶습니다 ㅎㅎ
디스코드 중이에요.ㅎ
안녕하세요 혹시 자바스크립트에 대해 기초를 좀 탄탄히 쌓고 싶은데 추천해주실만한 책있을까요?? 수준은 3개월 웹개발 공부를 했습니다!
저는 추천받았던 코어 자바스크립트 좋았던 것 같아요!
자고 코어 자바스크립트로
후루룩 자바스크립트 생태계 이해하고 개발했습니다
코어 자바스크립트 좋습니다. 인프런 강의도 매우 저렴하구요
그런데 어휘적 환경에 대한 이야기나 참조 에대한 이야기는
이해를 위해 추상화를 거치셨다하셔서
나중에 시간이 되면 딥다이브 읽어보려구용
저는 자바스크립트 딥다이브 추천해드립니다!
돌고 돌아 딥다이브..
러닝 자바스크립트 좋았어요~
한번 블로그 보시고 선택하시는 것도
피스메이커 프로도님이 나갔습니다.
저 블로그 내용 보면서 실행 컨텍스트는 지금이랑 좀 다른거 같은데 맞나요? 책을 안봐서 책에는 다르게 적혀있는진 몰겠네요
코어스크립트, 딥바이브, 러닝자바스크립트 한번 찾아보겟습니다! 감사합니다!
딥다이브 죠아여 ㅎㅎ
숨참고
딥 다이브
혹시 딥다이브가 더쉬울까요코어 자바스크립트가 쉬울까요???
쉽다의 기준이 좀 다를 것 같긴 하지만 개인적으로는 딥 다이브가 좋은 것 같아요
저는 완벽가이드 봅니다
ㅎㅎ
쉬운 건 코어
말그대로 딥한 건 딥다이브
그래서 저는 아예 처음 공부할 땐 코어 그 다음엔 딥다이브로 넘어갔어요
근데 몇 개월 지나니까 까먹어서
다시 읽어야 할 판이예요
😂
아 ㅎㅎ 감사합니다 다들!! 웹개발 강의 쓱듣고 어떻게 만드는지만 배우니까 정확한 원리나 기초가 부족한느낌이였어요 추천해주신 책으로 열심히 공부해보겠습니다..!(씨익)
https://262.ecma-international.org 자바스크립트 스펙도 한번 보세요 저도 다 안봤지만... ㅋㅋ
토리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아하님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
React.memo 관련해서 궁금한 점이 있습니다. container 컴포넌트처럼 props가 없을 수 있는 컴포넌트도 memo로 최적화해줄 필요가 있을까요?
props 가 없으면 memo로 최적화하기 더 좋죠!
props가 없으면 최적화 할 필요가 있나요?
memo를 사용하면 메모리에 그 컴포넌트를 들고 있어야 하는데, 컴포넌트를 렌더하는데 시간이 오래 걸리지 않는이상 굳이? 라는 생각입니다
근데 애초에 memo 자체가 필요한 상황인지를 먼저 판단해야 하고 memo가 필요할 일이 거의 없긴 하지만
아무튼 props가 있고 없고는 memo를 적용할 때는 상관없다고 봐요 오히여 props 가 없을 때가 더 의미있다고 생각하구요
props가 없을 때 왜 더 의미있다고 생각하시는 여쭤봐도 괜찮을까용?ㅎㅎ
부모가 리렌더링되면 자식이 무조건 리렌더링되는데, 이로 인해서 slow render 가 유발되는 문제가 있고 -> 이럴 경우 부모가 리렌더링되어도 (props가 변하지 않았다면) 자식이 리렌더링되지 않게 해 주는 게 memo 이니까요?
사실 props 가 없을 때 의미있다 라는 표현보단 그냥 props의 유무와는 상관없는 거고, props가 없으면 더 마음 편하게 할 수 있다고 하는 게 정확할 거 같네요!
오홍~! props가 없게 되면, 자식이 부모로 인해 리렌더링이 발생하지 않으므로, 좀더 마음 편하게 할 수 있다로 이해하면 괜찮을까용?ㅎㅎ
렏님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
엥 아뇨 부모가 리렌더되면 자식은 memo처리하지 않으면 무조건 리렌더되죠..?
그냥 위에 말 무시하시고 props 여부랑 상관없다고 이해해주세요!
넵! 다들 답변해주셔서 감사합니당(굿)
사진
svg 범위 조절하는 방법이 있나요...?
svg 파일의 태그안에 height와 width 속성을 사용해서 조절했던 기억이 있어요.. 함해보심이 어떠실까욥
안된다면 다른방법을 강구해봐야할것같습니다 ㅠ
오 감사합니다ㅠ
한번 해볼게요!!
크기 조절은 되었는데 좌표가 조절이 안되네요ㅠ
그건 저도 잘..모르옵니다 ㅠㅠ
이부분은 잘 해결되어서 너무 감사합니다
근데 React에서 components가 뷰만 당담하는 폴더의 의미아닌가요?
디렉토리를 어떻게 짜느냐에 따라 달라지겠죠?
갑자기 궁금한 게 생겼는데 li가 아니더라도 key 속성을 쓸 수 있는지 궁금하네요! 한번 찾아보려구요!!
모든 element가 key 사용가능할텐데요?
모든 element가능합니다
key을 왜 쓰는지 확인 먼저 하시는게 나을거같은데
https://viteconf.org/ 바이트에서 컨퍼런스를 하네요!
신규 프로젝트 구성할때 어떤것들을 고려하는게 좋을까요~?
서비스 요구사항 파악후 앱 상태관리를 어떻게 할것인지 api요청은 어떤걸로 할것인지, 폴더구조, 협업방식, 코딩컨벤션 결정 등등..?
감사합니다!
오늘자 긱뉴스에서 공유된 개발자를 위한 검색엔진 공유드려요! "구글이 코드, 요리, 여행 등 분야에서는 뒤지고 있다"는 글에서 개발자를 위한 대안 검색엔진으로 Neeva, Kagi 같은 엔진을 추천했었는데요. 여기에 새로운 검색엔진이 등장했습니다. "개발자를 위한 검색엔진" 이라는 부제를 가진 Hello는 자체 개발한 AI 언어 모델을 이용하여 기술 쿼리를 분석하여, 주요 개발자 사이트 들에서 결과를 찾아줍니다. 그냥 결과만 나열하는 게 아니라, 답변으로 예상되는 코드 스니펫 이 검색 결과에서 바로 보여서 더 빠르게 원하는 답을 찾을 수 있습니다. 개발자분들은 한번 테스트해 보시기 바랍니다. https://beta.sayhello.so/
대화에 링크가 안걸려서 "구글이 코드, 요리, 여행 등 분야에서는 뒤지고 있다" 글 링크는 요기요 https://news.hada.io/topic?id=6391
안녕하세요! 혹시 전에 면접 봤던 곳에서 해당 날짜에 합격여부를 알려준다고 했었는데, 아무 연락도 오지 않은 상태라면 그냥 불합격일 수도 있는 걸까요..??
리마인더 보내보세요
아! 네
그런 경우가 없는게 베스트지만,,, 까먹었을수도있으니까요
네 감사합니다!
안녕하세요! 프론트쪽에서 null값 체크할 때, 동등 연산자(==)와 일치 연산자(===)중에 어떤걸 쓰시나요??
!!사용합니다
전 일치연산자요 가끔 숫자나 블린값 들어올때 피본 경험이 있어서 왠맨하면 일치연산자로 비교해요 혹시 다른분은 어떤 고견이 있을지 궁금하네요
저도 정말 예외아니고서야 일치연산자 쓰는데, 스크럼 할 때 부팀장님께서 null체크할때는 == 동등연산자 쓰는게 낫다고 하셔서 의문이 들었습니다(!)
널체크만 ==null 쓰고 있습니다..
== null 하면 null 과 undefined 다 잡아줘서 편하더라고요..
오오 꿀팁 감사합니다
혹시 페이지 내에서 키워드 검색 하는 기능을 구현해보신분 있으실까요?
마치 브라우저에서 커맨드 F 로 검색하는 그 기능 입니다. ..
null 체크에 ?? 도 있는데 이것도 사용해보시면 좋을 것 같습니다. 전 이거 자주 사용합니다! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
유돈노js에서 null체크는 == 를 쓸 만 하다고 하길래 == 쓰고 있습니다
null이랑 == 때려서 true나오는게 null이랑 undefined 밖에 없어서
오!호! 완죤 감사합니다!!
파일 업로드 구현해보신 분 계시나요? ㅠ put 요청 보낼 때 파일 두가지를 같이 보내고 있는데 두가지 모두 업로드하면 200이 뜨지만 하나만 넣거나 이미지를 다 넣지 않았을 때 400 에러가 발생합니다. 이 경우 해결해보신 분 계신가요? ㅠㅠ
이건 백엔드 개발자와 얘기해보셔야할듯?
백엔드가 그렇게 구현해주신 거 같은데요..?
받는 쪽에서 형식이 안 맞아서 튕구는게 아닐까요? 두 개 다 필수로 필요하다고 되있어서 그런거같은데
백엔드 분께서 다 처리해주셔서 포스트맨으로 테스트하면 잘됩니다 ㅠㅠ
포스트맨에서 한개 보내거나 없이 보내도 에러가 안난다는거죠?
네 ㅠㅠ 파일 업로드 관련 로직을 이렇게 작성했는데 뭐가 문제일까요 ㅠㅠ
사진
로직보단 리퀘스트가 어떻게 날아가는지 궁금합니다!
네트워크탭에서
넵!! 잠시만요!!
useMEMO님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사진
왜 차트가 안나 올까요..
사진
차트에 데이터가 없어서 그런거 아닐까요
사진
페이로드에는 이렇게 뜹니다 이전에 저장된 데이터가 들어가있어요!
이미지파일이 아마 제 기억으로 (binary file) 이런 식으로 떠야 됐던 거 같은데 1/1/image_1.jpg 라고 뜨네요?
아 두개 다 보내면 된다고 하셨으니 그 이슈는 아니겠네요 죄송합니다 ㅋㅋㅋㅋ
요건 두 개 보낸 상황인거죠?
여러분들 NaN은 어떻게 검사하시나요
아 맞네요 ㅋㅋ.. 감사합니다
isNaN?
isNaN 씁니다!
네 맞습니다 ㅠㅠ
그리고 다시 조회해 와서
파일 업로드 하지 않았을 때 오류가 발생합니다 ... 그때 페이로드에도 이전에 업로드한 저 이미지들이 뜨고요..!
음..? 뭔가 간단한 문제는 아닐 거 같고 로직을 봐야 할 거 같다는 냄새가 나네요
api 던지는 로직을 보여드리면 될까요 ? ㅠㅠ 하 정말 이틀동안 해결이 안됩니다 ㅠㅠ
로직을 안 봐서 잘 모르지만 이미지를 서버로 보내고 나서 input.target.files 를 안 비워줘서 생긴 이슈일 수도 있을 거 같고
제 능력으로는 이미지 올리고 -> 서버에 전송하는 것까지의 전체 플로우 + api 규격까지 다 봐야 알 것 같습니다 ㅜㅜ
ㅠㅠ 감사합니다 회사 코드이기 때문에 못보여드려서 답답하네요 물어볼 사람도 한명도 없어서 ㅋㅋㅋ큐ㅠㅠ 감사합니다
사진
홈브류를 설치하는 중인데요! 터미널에 설치가 완료될 때 아무 키나 누르라고 마지막 문단에 떴는데요! 설치 될 때까지 기다리면 되는 건가요? 아니면 지금 설치가 안 되고 있는 건가요??
돈다발 들고 좋아하는 무지님이 나갔습니다.
안녕하세요! html내에서 원하는 단어에 b태그를 씌워서 다시 내보내게 하고싶은데 나오긴하는데 param1이라는 변수가 그대로 나와서.. 변수 그대로 말고 단어로 나오게 하려면 어떻게 써야하나요??
사진
‘<b>${param1}</b>’
백틱으로 감싸야 합니다
이모티콘 정말 감사합니다
추가로 유저가 써치한 단어가 컨텐츠에 있을시 볼드처리 해주는 그런 기능인데 저렇게 짜는게 맞을지 모르겠습니다 작동이 되긴하는데..
저는 innerhtml을 쓰지 않으려고 replace후에 배열로 만들고 map 돌려서 했었네요
innerhtml을 안쓰면 코드를 html내부에 넣을 수가 없지않나요?!
innerhtml은 리액트적인 방법은 아닌거같네요
jsx에서 inner 다 넣어주는데 굳이..
숭글미FE님 인사가 늦었네요~ 어서오세요 환영합니다
jsx return 부분에서 map함수를 돌려서 html 자체를 렌더하면 되지 않을까요?
dangerouslysetinnerhtml 라는 키워드를 이용해서 리액트에서 쓰자면 쓰긴하는데 그래도 안쓰고 싶었습니다
네 이렇게 했습니다.
그렇군요!.. 제가 지금 리액트로 작업을 하고있지않아서ㅠㅠ
아 그럼 innerHtml로 넣어야겠네요
앗…. 리액트가 아니시라면(머쓱)
백단에서 자바로 데이터를 다뤄주고계시는데..
머쓱..ㅎ
(머쓱)
죄송합니다 🙏
저도 리액트 동참하고싶네욥....🥺
아님다! 유익한 정보를ㅎㅎㅎㅎ
갑자기 궁금해진건데
라이브러리를 api라고 할 수 있을까요?
음
많이들 혼동하는 개념이라는데
api 개념을 구현한게 라이브러리니까..
api = 농기구 라이브러리 = 직접적으로 눈에 보이는 낫, 호미, 삽 정도로 봐야하지 않을까요?
프레임워크는 컨베이어 벨트..?
트랙터..?
ㅋㅋㅋㅋㅋㅋㅋ
프레임워크는 농장이 될것 같습니다. 농장 컨텍스트 안에서 농장주인이 저에게 일을 할당시키니.
d3로 차트 만들어보신분 계신가요 ??
농장(framework)에서 낫, 호미, 삽(library) 등을 이용해 농사(개발)를 합니다. 저는 낫, 호미(library)가 농장에 종속되기 보다 도구 그 자체로 활용되기를 좋아합니다. 왜냐하면 농장(framework)이 바뀌더라도 낫, 호미(library)사용 방법에는 영향이 없어야 하거든요. 가끔씩 농장 주인은 저에게 제가 농기구를 잘 쓰는지 테스트(testcase)합니다. 저는 어떤 농기구를 쓰더라도 일을 잘 해내야합니다. 저는 무조건 호미만 사용하고 싶지만 (의존성 내부 선언) 주인이 제 손에(IoC) 낫, 호미, 삽 등을 쥐어주며(DI) 일을 잘 하는지 테스트합니다.
노예는 전가요??
아차차 농부여
ㅎㅎㅎ
노예이자 농부…
ㅋㅋㅋㅋㅋㅋ
우와 이해가 잘가네요 감사합니다 ㅎㅎ
그러게요 ㅋㅋㅋ 그 이전에 process,thread 관련 글 본거같은데 훌륭하십니다 ㅎㅎ..
다시보니, api = 농기구 라고 예를 들기보다는 밭 <-> 농부의 상호작용 하는 방법 (개념) 정도로 봐야겠네요.
그럼 농기구는 컨트롤러가 되는건가요?
선생님 선배님들 질문하나만 여쭙겠습니다..! public 폴더 내 이미지를 불러오려고 합니다. <img src="assets/img/main/064/064_1.png" alt="여행지이미지"> 이렇게 하려니 안되고 "/assets 로 하니 되는데 어떤 차이가 있는 것인가요??
감사합니다!
이 문제가 아닐까싶네요
컨테이너보다 큰 요소의 정렬에는 어떻게들 하시나요?
사진
세번째 요소의 상황입니다!
width를 컨테이너보다 크게 한 다음 margin-left를 마이너스로 주면 될거같네요
이런경우가 어떤 경우인가요?? 요소가 문자인지, 이미지인지 아니면 카드UI?같은것인지,,, 궁금합니다!
디자이너에게 꼭 그래야만 했는지 물어봅니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
가장 현실적이네요
답변 감사합니다 참고되었습니다! 또 다른 문제는.. 같은 위치에 있는 다른 컴포넌트는 아래와 같이 <img src="assets/img/01.png" /> '/' 가 없이 "assets/" 로 접근이 가능한 데 현재 작업 중인 컴포넌트는 "/assets/" 으로만 접근이 되어 이유를 도통 알수 없네요..
이럴수가
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ소프트 스킬이 필요한 이유인가요ㅋㅋㅋㅋㅋ
한수 배웁니다 …
저도 저 UI가 어떤 상황인지에 따라 선택하는 솔루션이 다를 거 같아요! 만일 한 박스가 섹션 같은거라면 각 섹션을 각자 컨테이너에 담고 튀어나온 걸 다른 넓은 컨테이너에 담았을 거 같습니다~
이게 맞는 것 같아요! 여쭤보니 아예 다른 섹션임을 나타내기 위함이라고 하시네요 컨테이너를 하나 더 만들어야겠어요..ㅎㅎ
이모티콘
Number.isNaN이랑 isNaN 두개가 있는데, 형변환 문제 때문에 전자를 사용하시는게 좋습니다.
isNaN이 글로벌로 있는 줄 지금 알았네요 ㅋ
Strapi 현업에서 사용중인 분 계신가요?
vue 서적 추천 부탁드립니다..
현업에서 바로 써야합니다..
저는 서적보다는 공식문서가 더 좋을거같아요
공식문서을 100%를 받아들일
깜냥이 안되서,..
궁금한게 있는데요! 한 화면에서 boolean값으로 여러 상태들을 관리해야할 때 좋은 팁들이 있을까요? 예를 들면 모달온오프 상태라던지?? 한화면이 좀 거대해지다 보니까 상태가 많아서 뭔가 난잡해보이네요..
캡틴 판교 블로그글 참고해보세요 뷰 대장이십니다
바로 써야할땐 더더욱 공식문서 추천드리는게 어차피 전부 외울수가 없는데, 이런게 있었지만 알면 금방 검색할 수 있거든요
저도 방금 이말하려했습니다
뷰 공식문서도 꽤나 잘되어있어서
vue3 라면 https://v3-docs.vuejs-korea.org/ 공식 한글문서가 이쪽에서 번역 진행중이예요
사진
캡틴판교 뷰 전용 블로그에요
혹시 MUi에서 텍스트필드 부분만 입력 막는 방법 아시는분 있을가요 ㅠㅠ?...
useReducer를 써볼 수 있을 것 같습니다.
캡틴판교님
강의도 회사에서 다
지원해주긴 했습니다 ㅋㅋ;;
저는 이런경우 활성화된 모달 이름 문자열을 상태로 썼었습니다 빈 문자열은 modal disable
김부엉님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
키보드이벤트를 막는걸로 임시해결?했습니다
안녕하세요~ 김부엉님~~ 반갑습니다!! :)
이모티콘 반갑습니다ㅎㅎ
현재 서버가 배포되는 환경의 노드버전에서는 사용불가능한 메소드를 코드상에서 못쓰게끔 린트나 바벨로 잡을수있을까요?? (예를 들어 String.prototype.replaceAll 은 15버전부터 사용 가능)
어서오세요~ 이곳은 프론트엔드에 대해 궁금한것들을 편하게 물어보고 내가 아는 것들은 적극적으로 대답하면서 함께 성장하고자 하는 곳입니다 ㅎ 편하게 글 남겨주세요
tsconfig target,lib 설정이 해당 에러에 영향을 주는걸로 기억하네요
불 뿜는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
ㅋㅋㅋㅋ
creat-recat-app 해보시면
사진
수많은 냥이들이 ㅋㅋㅋ
이거 뭔가용??
여러분 vue를 쓰는 회사에 들어가도 2~3년 후에 react로 이직을 하는데 문제가 없을까요
react만 계속 쓰셨던 분들에 비해 경쟁력이 떨어질까 고민이네요
vue 2년조금넘게 하다가 리액트하는 회사로 얼마전에 이직했어요 ㅎㅎ 프레임워크보다는 어떤 기능을 어떻게 구현했는지가 더 중요한것같아요! 다만 중간중간에 리액트로 사이드 몇개하긴했는데 면접때 딱히 많이 질문받진않았어요
호옥시 프로젝트에서라도 이거 사용해보신분 없으실까요?
5~6년차에서 이직 할때도 문제가 없을까요 ㅠㅠ
현재는 3년차 개발자입니다.
보통 api 연결할 때 domain.com/+endpoint로 하나요 domain.com+/endpoint로 하나요? 후자가 보편적인걸로 알고 있는데 검색 키워드를 뭘로 해야 나올지 모르겠네요
처음에 cmd에서 react라고 안하고 오타로 recat이라고 하면 저렇게 나와요 ㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그러네요 ㅋㅋㅋㅋㅋ
귀엽다
혹시 프론트에서 비디오 압축 업로드 해보신분 계실까요..?
멋쩍은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
멋쩍은 튜브님 어서오세요~
네 안녕하세용 ^0^~~*
불뿜는 튜브님도 인사가 늦었습니다 어서오세요 ㅎ
네~ 반갑습니다 :) 이곳은 프론트엔드에 관해 이야기를 나누고 소식을 공유하고 궁금한 것들을 서로 물어보고 성장하고 함께하고자 하는 공간입니다~ 편하게 글 남겨주세요 ㅎ
안녕하세요! mousemove 이벤트가 발생할 때마다 돔의 노드에 접근해서 (node).style.transform = "대충 간단한 뺄셈 연산" 이렇게 인라인 스타일을 먹이려고 하는데, 혹시 성능 관련해서 개선할 수 있는 포인트가 있을까요? (가령 requestAnimationFrame을 적절히 활용한다거나..?)
사진
코드로 치면 이런 느낌입니다!
실제 코드는 리액트고 ref.current.style 을 변경하긴 합니다 :)
애니메이션 쪽을 잘 몰라서 질문드려요!
이후님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 이후님 반갑습니다 :)
안녕하세요..!
어서오세요ㅎㅎ 이곳은 프론트엔드에 관해 궁금한것들을 서로 주고 받고 성장하고자 하는 곳입니다~ 잘 부탁드립니다
저 간단하게 써봤어요~
https://github.blog/2022-07-27-planning-next-to-your-code-github-projects-is-now-generally-available/ 깃헙 프로젝트가 정식으로 나오나 보네요! 이제 JIRA 안녕일까요?? ㅎ
사이드 프로젝트에서 사용하고 있는데 세부적인 일정을 정하기는 쪼금 힘들더라구요 ㅠ 하지만 소규모 프로젝트들을 진행할때는 간편하고 무엇보다 github이랑 붙어있어서 편했어요~!
오오~ 그렇군요~ 세부적인 일정이라고 하면 어떤건 말하는거에요?
이전 회사에서는 클릭업을 사용했는데 거기서는 시간단위로 테스크 일정을 조율했어요. 깃허브 프로젝트는 기능별 단위로 마일스톤을 정하는 것 같아서 날짜별로 관리하기는 아직 어려울 것 같았어요!
https://velog.io/@yujuck/Javascript-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8A%A4%EC%99%80-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81 해당 링크 한번 참조하시면 도움이 되실것같아요!
추가로 저는 onAnimationStart와 onAnimationEnd 함수에서 각각 flag를 설정해주어서 애니메이션이 중복실행이 되지 않도록 했었어요.
사진
동영상
안녕하세요! Dropdown 컴포넌트를 개발하던 도중에 문제가 생겨서 질문드립니다! 현재 OptionList를 Portal를 사용해서 렌더링 해주고 있고 Dropdown이 열릴 때 OptionList의 위치를 결정해주고 있습니다. 그런데 여기서 영상과 같은 문제가 생겼습니다. 저런 문제가 생기는 케이스는 사진과 같이 코드를 작성하면 발생합니다. 혹시 이와 비슷한 문제를 겪으신 분이 계실까요? 계시다면 어떻게 저 문제를 해결하셨는지 궁금합니다!
앗 감사합니다! 드래그하는 애니메이션이라 부드럽게 보이는 게 중요해서 쓰로틀을 걸기는 어려울 거 같긴 하네요..ㅠㅠ 감사합니다 :)
드롭다운이 열린 상태에서 영역 밖을 클릭하면 발생하는 문제인가요?
드롭다운이 열린 상태에서 해당 영역을 스크롤하면 발생하는 문제입니다!
앗.. 그런거라면 델님께서 말씀하신방법이 좋지 않을까요…?
스크롤 발생 시에 드롭다운을 닫아버리는 방법도 있을 것 같구요 스크롤 시에 드롭다운 위치를 계산을 해서 position에 반영해야 하지 않을까 합니다
portal 사용하지 않고 relative와 absolute로 하셔야하지 않을까요
처음엔 relative와 absolute를 조합하여 구현했으나 부모 영역이 overflow: hidden인 경우에 OptionList가 짤리는 경우가 발생해서 portal를 사용했습니다
아하… 저도 최근에 Overflow와 스크롤 동시에 구현하는 문제가 있었는데… 그냥 모달로 타협했습니다
혹시 해커톤 같은 대회는 다들 어디에서 확인하시나요 ?
https://github.com/brave-people/Dev-Event 여기 참고하시면 좋을것 같아요
혹시 Node.js 웹 서버에서 es5를 써야하는 이유가 있을까요? 프론트단에서는 크로스브라우징 때문이라고 할 순 있어도 웹 서버 단에서 es5를 지원하지 않는 경우는 어떤건지 궁금합니다~!
없는 것 같습니다
바벨설정하면 es6 쓸수있지않나요?
바벨 설정하면 되는걸로 알고있어용
vscode insider 버전을 설치하니, 말끔히 해결이 되었습니다. 근데 이게 insider 버전을 사용해서 그런건지 아니면 모든 설정이 초기화가 되서 그런건지 모르겠지만… vscode 일반버전을 사용할때는 코드 한줄쓰고 저장 시, 컴파일이 수초 이상 걸리고, git source control이 또 수초이상 걸리고.. 또 formatter 작동이 수초 이상걸렸는데 일단 이제 아주 빠르게 동작하긴하네요..
혹시 로그인 관련해서 궁금한게 있는데 로그인 성공하고 받은 토큰을 localstorage에 저장하면 그 후에는 토큰이 있는지 없는지 확인을 해서 바로 로그인을 시켜주는데 이 경우에는 토큰이 손상이 된 경우에도 바로 로그인이 돼서 보안에 문제가 되겠죠?
컴포넌트에 다이나믹 import를 적용하고 컴포넌트에 사용되는 데이터를 react query로 받아온다고 가정했을 때 Suspense를 적용하면 데이터를 받아오는 순서는 어떻게 되나요.??
localstorage에 토큰이 있으면 백엔드 검증없이 그냥 로그인이 되는 구조인겅가여...?
토큰으로 로그인 시도를 한다는 것 아닐까요?
그럼 손상된경우에는 로그인이 안되야 맞는거 아니에용...? ...
넵 맞습니다
로그인 시도를 하는데
손상되면
에러가 날테니까 그럼 비인증처리하면 되겠네요 감사합니다!
insider 버전이란게 있군요 정보 감사합니다
리액트 학습중인데 맨 처음 로그인 인증같은 경우 딱 한번일어나는 상황에선 어떤 파일에서 로직을 구현해야하나요?
일반 버전을 완전 삭제를 해봐야할 것 같긴합니다 ㅠㅠ 지운다고 지웠는데 가비지가 있는지.. ㅎㅎ 안되더라구요
로그인과 관련된 컴포넌트에서 해야죵
무슨 프레임워크 쓰냐에 따라서도 다르죵
CRA라면 src/index.js에서 시작해서 import된 컴포넌트로 내려가면서 찾아보세요
넵 감사합니다!
이직준비중인데
오후에 계속 반차 쓰고 면접보러 다녔더니
팀장님이 따로 불러서
이직준비중이냐고 물어보는데
아뇨 아파서 병원 갔어요 이러고 나왓거든요 ??
뭔가 ㅋㅋ 제가 잘못한거는 아닌데
떨리는 느낌이네요 ㅋㅋㅋ ㅠ
팀장님이 그걸 물어보시네요 ㅋㅋㅋㅋ 보통 알면서도 그런 말 잘 못하는데
그쵸 ㅋㅋㅋㅋㅋ
뭔가
마피아게임 하는데
제가 마피아인걸
경찰한테 걸린 느낌
ㅋㅋㅋ
도망쳐야지 헤헤..
이모티콘
zzzz
혹시 webpack에서 url-loader로 limit : 2000 설정하면 20kb 미만인 녀석들은 url-loader 로 base64로 그냥 때려 박는것 아닌가요?…
그 이상은 file-loader로
다들 input에 placeholder말고 label로 미리보기 사용하시나요?
저는 input의 이름(목적) label, 값 예시(또는 설명) placehold 로 썼습니당
저는 placeholder 잘 안 씁니다! 유저가 입력을 시작하면 글이 사라지기 때문에, ux적으로 좋지 않다고 특별한 경우가 아니면 쓰지 않는게 좋다는 글을 봤었어요.
어엇 그러면 아예 안적고 아래 안내 말을 적는 편인가요?
저는 그냥 디자이너가 디자인한대로.. 🫠
저도 유저의 기억력을 너무 믿지 말라는 글을 봤던 기억이 있네요
회사가 강남이면 보통 집을 어느쪽에 구하시나요?! 강남은 너무 비싼거 같아서 ㅠ
설입 낙성대 사당쪽이 무난스
아 지금 서울대입구 보고 있긴한데
서울대입구쪽은 출근할때 괜찮나요?!
설입이면 금방입니다
아뇨,,ㅎ
사람이 겁나 많을뿐
앗 갈리시네요 ㅋㅋㅋㅋ
아 그쵸..
금방가긴하는데 사람이 ㅋㅋ
단순 지하철 노선도만 생각하면 금방일거 같은데 출근시간 2호선이 ㅠ
더 서쪽으로 가시면
가천대도 낫밷
멀어져도 싸지고, 사람도 적어요
오 가천대 한번 찾아보겠습니다
신분당라인?!
멀어도 최대한 가까운곳으로 가시길 추천드려요...
아니 조금 가격이있더라도요
출퇴근 편도 50~60걸리니 죽을맛입니다
어후 편도 50~60은 엄청 힘드시겠네요 ㅠ
건대도 추천드려요
오.. 감사합니다!
ㅜ 여기 90~120있어요..
어우야..
신림동 원룸도 괜찮은데..
월요일은 빼박 120..
강남 어느 라인이나 따라 버스도..추천..
신림 설입 살아봤는데 신림은 동네가 브금이 달라요
ㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋ
질문드립니다.. localstorage에 클릭요소를 저장해두고 새로고침했을때 그 값으로(유저가 보던위치로) 스크롤내려주는 앵커기능을 만들었는데요, 문제는 더보기를 눌러서 데이터를 더 받아온 상태로 클릭한 요소를 저장하면 더보기를 누르지않았을경우엔 그 위치로 갈 수가 없다는 것입니다ㅜ 이경우엔 어떻게해야할까요?
사실 신림에서는 생존의 문제입니다
초중고를 신림에서 다닌 저로썬,, 스즈란이였습니다
강남 버스 지옥아닌가요? 오 괜찮나보네요!
월세로 너무 몰려서 엄청 비싸다던데 집 잘 구하시길 ㅠ
ㅠㅠ 넵 감사합니다!!
더보기를 할 수 있도록 이미 불러온 데이터를 보관했다가 보여줄 수 있는 방법은 어떠세요? 보안상 문제가 없다면 로딩된 데이터도 localStorage나 IndexedDB등에 보관이 가능하니까요 ㅎ
더보기 클릭 횟수를 저장해놓고 클릭한 횟수만큼의 데이터를 서버에서 받아온 이후에 스크롤하게 하는 방식으로도 구현할 수 있을 것 같아요.
1.불러온 데이터를 저장한뒤 그 데이터를 다시보여주고 스크롤 2.더보기클릭횟수 감지해서 데이터 다시 받아온뒤 스크롤
요로케 해볼까요..
프로젝트 하다 궁금한점이 생겨서 질문 드립니다! 페이지 이동시에 필요한 정보들이 있는 경우 현재 recoil을 사용하여 1. Link 태그 onClick시 recoil을 이용해 상태 저장 2. 새로운 페이지 이동에서 useRecoilValue로 사용중인데 이게 맞는 방법인지 모르겠어서 여쭤보려고 합니다. 보통 하위 페이지가 아닌 다른 페이지 이동할 때 전달해야 하는 값이 있다면 어떤 방법을 사용하는게 가장 좋나요?
router hook에 params를 같이 가져갈 수 있지 않나요??
가져갈수 있는걸로 알고있어요
받는 페이지에서 useLocation hook으로 받아서 사용할 수 있을거에요
useParams쓰면 되지않을까요
useLocation과 useParams 둘다 url 정보 파싱으로 알고 있었는데 파라미터 전달이 가능한가요? 공식 문서에서 관련 내용을 못찾겠어서...
navigate hook에 없나요?
react router 쓰고계세요?
네네
router hook에 props전달하는게 있었는데 기억이..
navigate 맞는걸로 알고있는데 저도..
Usesearchparams
navigator(url, {state: {type: result}});
요렁식으로하면.. useLocation.state로 쓸수있는걸로 압니당
아 state에 담아서 전달해도 되는군요 감사합니다!!!
이모티콘 모두들 감사드립니다
안녕하세요 프론트엔드방 개발자 여러분! 개발 열정이 넘치시는 분들이 많이 계셔서 저도 많이 배우는 것 같습니다. 다들 즐거운 저녁시간 보내고 있으신가요? 😉 다름이 아니라 이 방에도 사이드 프로젝트에 관심이 있으신 분들이 많이 계실 것 같은데, 팀원을 구하는 데에 도움이 될 만한 이벤트를 소개드리려고 합니다. 자세한 내용은 아래 글을 참고해주세요! 감사합니다🙏
🎈 커리어리 사이드 프로젝트 팀원 매칭 이벤트 🎈 🤔 앱/웹을 만들어 보고 싶은데 함께 할 팀원을 구하기 어렵다면? 이벤트에 참여하고 개발자, 디자이너, 기획자와 함께 원하는 서비스를 만들어 보세요! ✅ 이벤트 진행 방법 참가 신청을 완료하신 분들을 대상으로 커리어리에서 직접 팀원을 매칭해 드립니다. 팀원이 매칭되면 팀마다 슬랙 채널을 개설해드리고, 프로젝트를 시작하는 초반 단계에 도움을 드릴 예정이에요! 첫 회의 이후부터는 팀에서 정하신 방식대로 자유롭게 진행하시면 됩니다. ✅ 참여 대상 포트폴리오 관리/직무 역량 강화 목적으로 디지털 프로덕트(앱/웹)를 만들어 보고 싶은, 스타트업 1~5년차 개발자, 디자이너, 기획자라면 누구나 참여 가능합니다! ✅ 참여 방법 아래 링크를 통해 참가 신청을 하고, 참가비 10,000원을 납부해 주시면 됩니다. 자세한 내용은 아래 참가 신청 구글폼과 안내 페이지를 참고해주세요. ✅ 이벤트 기간 8월 7일(일요일)까지 참여 신청을 받습니다. 8월 11일(목요일)에 팀 매칭 결과가 발표되는데요, 결과 발표와 동시에 프로젝트를 시작하게 됩니다. (프로젝트의 총 기간은 팀원 분들과 상의 하에 조정하실 수 있습니다!) 📌 참가 신청 구글폼: https://rebrand.ly/loungeevent05 📌 이벤트 상세 안내 페이지: https://rebrand.ly/loungeeventnotion
뿌슝빠슝님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 🥲
이번에 프론트 엔드 공부를 하고싶어서 여러가지 정보들이 궁금해서 들어오게 됐습니다
안녕하세요 뿌슝빠슝님~~~!!!
안녕하세요오오오오오
기존에 사용하전 맥북을 판매하게 되서 중고로 구입하려고 하는데 어느정도의 사양이어야 원활하게 작업이 가능할까요?🥲
좋아요!! 좋습니다 :) ㅋㅋ 이 곳은 궁금한게 있을때 언제든 물어보고 아는 질문이 나왔을때 스스로 답해보면서 함께 성장하고자 하는 곳입니다 ㅋ 정보들이 궁금하다면 한번 관심사에 대해서도 글 남겨주세여 ㅎㅎ 잘 부탁드립니다
사용하시던 기종이뭐였어요?
15년식 사랑하고 있었습니다 에어
감사합니다! 잘 부탁드려요🥺
현재 자본이 많이 남은게 없어서 🥲
m1 에어가 제일 가성비 좋죠
용량이나 렘은 16 , 512로 구매하는게 나을까요?
그러면 좋죠
램 16을 우선으로..
중고여도 엄청 비싸네요🥲
M1 밑으로는 별로일까요?🥲🥲
저는 m1 가시는걸 추천합니다..
🥲🥲넵
안녕하세요~ 프론트 스터디는 보통 어디서 구하나요~?!
고민하고 있는게 있는데요 ㅠㅠ 1. 중고로 m1 야무진거 구매하기 2. 새제품 m1 할부로 구매하기
어떤게 나을까요🥲
1-2년 안에 바꾸실꺼면 1
오래쓰실거면 2
22
Ssd는 꼭 512 여야할까요..?
저는 256으로 1년동안 썼는데 아무런 지장이 없었습니다 :)
m1은 ssd이슈 없어서 괜찮지않나요?
M1..!
에어..? 프로..?
m1 에어 256기가, 메모리 8기가로 1년 반 정도 사용했었는데 공부만 하시는거라면 괜찮을 것 같아요
그래도 메모리는 16기가로..!
m1 프로,에어 스팩차이 유튜브에서 영상보시면 결정에 도움 되실듯요
선생님들..
!!
M1 에어 새상품 미개봉 16기가 216 gb
120만원이면 야무진건가요?
216이면 중국제품입니다 아플인듯요
아ㅏㅏ
256이요!
쿠팡에서 주문하셨다고 하시던데
괜찮은것같아요
근데 에어는 모니터 외장 한대입니당
정가 150인데
미개봉 맞으면 야무지네요
이게 무슨 뜻이에요?
외장모니터 연결이 한대밖에 안되여
아ㅏㅏㅏ
최대로 연결할수있는 외장모니터가 한대에요
신입 면접을 보았는데 사수가 없다고 하네요 사수가 있는 회사를 가는게 좋을까요?
팀원은요?
디자이너 기획자 있다고 합니다
사수유무보단 과연 거기 가서 커리어가 될지가 중요한거같습니다
사수가 없어도 어떻게든 머리깨져가며 하면 답은 나오게 돼있으나
스스로 자기계발 하는 성향이면 사수가 없어도 괜찮은것같아여
물경력은 답이없습니다...
다른 사업 하다가 이번에 플랫폼을 만들면서 앱개발 웹개발 한다고 해서
신입이면 개인적으로는 팀원이라도 있는게 좋다고 생각합니다...
좀 더 생각을 해봐야겠네요...
22
음 그럼 아예 웹을 안하던 회사같은데
많이어렵지않을까싶긴하네요
맞아요
신입일때 사수의 영향이 꽤 크다고생각해서 저두 있는게.. 좋다고 생가갷요
신입땐 그래도 체계있는데를 가는게 좋다고 생각합니다
처음 웹사업을 시작한다면 설계를 해야할 수도 있는데
전 없지만 있는게 좋아요
ㅋㅋㅋ
어쩌면 인프라까지 직접 설계해야할 위험이 있지 않을까요? 아직 다른 백엔드나 인프라 개발자도 준비된 게 아니라면
맞네요.. ㅠㅠ
저도 그렇고 프론트 사수나 동료 없이 입사하신 분들이 많지만, 프론트가 아니더라도 다른 개발 직군 동료가 있느냐(= 회사에서 경영진에게 개발 파트에 대한 설명이나 필요한 것에 대해 요구할 사람이 나 혼자는 아닌지)는 특히 중요하다고 생각해요. 사실 프론트 사수가 있는 회사는 찾기 어렵더라도(아직 프론트 직군이 분리되지 않은 회사도 많아서) 개발 직군 선임자가 있는 회사를 조금 더 찾아보시는 걸 추천드릴게요!
저도 직접 인프라까지 설계를 했는데 그래도 큰 도움이 된거 같아요! 사수가 없어도 개발팀장이나 pm은 있지 않으신가요?
선생님들 저 그냥..!
m2 로 가기로 결정했습니다
12개월 할부 하면 그나마 낼 만 하겠죠..?
어어..
어차치 12개월 할부 하실꺼면..
m1 프로 14인치가
더 현명할 것 같은데요
헙
뿌슝님 지갑 사정을 모르다 보니 뭐라 말씀드릴 수가 없긴 한데..
헛
일단 저도 허브님 말씀 동의합니다
헉
정말 m2 이번에 가격이 너무 비싸게 나와서 환율도 오르고..
근데 혹시.. 왜 맥북들을 그렇게 좋아하시는지 알 수 있을까요
안써봐서 어떤 이점이 있는지 몰라용
개인적으로는
써봐야 아는거라
말해봤자
소용이 없어요..
m2 가격 너무해서 차라리 14인치 프로 깡통이 나은거 같아요
헉
그럼 m1으로..
일시불 >>>>> m1프로 할부 > m2 할부
근데 개인적인 생각이라 ㅎㅎ...
참고만 부탁드립니당!
M1프로는 공홈에서
저는 m1 써보고 윈도우는 이제 안산다는 생각 들더라구요
구매할 수 있나요?
아 14 16이구나
넵 공홈 가능합니다
13은 안되는거죠?
13도 살 수 있어요!
쿠팡에서 22개월 무이자 할부로 구매하시는 것도 괜찮을 것 같아요
13인치는 에어가 추천드립니다 ㅎㅎ
에어 조아요
헉 22개월 무이자요?
13인치 프로는 기본 램8기가라서
코어수도 다르고
14인치 프로 당근으로 찾아보세요
앗 ㅠㅠ 일시불로 결제하기는 조금 무서워서 ㅠㅠ
감사합니다 큰 도움 되었습니다
저두 차라리 당근으로 중고거래할거같아요
근데 공부용이시면 그냥 에어 깡통으로도 충분하실듯해요
감사합니다 ㅠ
네 저도 공부할꺼면 에어 깡통이면
90정도에 운좋으면 리퍼제품이나 미개봉제품 살 수 있던데
충분하다고 생각해요 저도 에어 깡통 썻구요 ㅋㅋㅋ
내 무이자요
취업하면 보통 노트북은 지급되니까
공부용이라면 에어 강추합니당
사실 공부할때는 윈도우 PC를 더 많이 썼던거 같네요 ㅎㅎ
M1 에어..@
그럼 m1에어 할부로 구매하는게 낭을까요?
m1에어
당근에서 당근달근하게
구입하시는게
윽 ㅠ
유튜브 보니까
21년7월 이후 제품으로
구입하라던데
궁금해영
21년 7월 이후요?
맥이좋은점은 brew로 거의 모든 패키지를 설치가 가능해요
그리고 화면전환이 가장 좋네요
개발자 맥북 유튜브 검색하시면
영상 엄청 많을듯요 ㅋㅋ
터미널이 너무 큰장점이죠
오호
감사합니다
wsl 이 너무 허접해서 ㅋㅋㅋㅋㅋ 윈도우는 흉내 못낼거같아요
윈도우쓰다가 맥쓰면 그저 그렇긴한데
맥쓰다 윈도우로가면 역체감이 확되요
도커 쓸때
맥북 생태계가 진짜 좋아요
편하지않나요
아이패드 아이폰 같이 사용하시면
윈도우 도커쓸때
개불편하던데
사실 윈도우로 도커를 안써봤어요
ㅋㅋㅋㅋㅋㅋ
저는 프론트 개발 할때 별거 설정할거 없이 하는게 편하네요. 윈도우는 자꾸 뭔가 안되고.. 환경변수니 뭐니.. 뭐가 참 많더라구요. 저 처럼 컴맹이면 맥이 낫겠다... 싶네요.
윈도우로 도커를 돌리기, ssh 사용하기
그냥 저는 윈도우에서 모든게 너무 화났기 때문에 ㅎ..
아 putty ㅋㅋㅋㅋㅋ
첨해보면 난감하죠
근데
그냥 리눅스 설치해서
대부분의 컴퓨터 지식이 unix 기반으로 되어 있는지라 이쪽 세상에서는 윈도우가 너무 레퍼런스도 적고 마이웨이죠
개발하면 되긴함;
ㅇㅈ
우분투는 인정합니다 최고
거기에 스벅 입장해야하면
처음에는 이런거 저런거 따지면서 뭐가 더 좋을까 그러는데 나중에는 따지지 않고 그냥 맥북 쓰게 되더라고요
맥북으로 올리는거죠
ㅋㅋ msi + 우분투 + vim
한성에 우분투면 입장 거부 당합니다,,
이조합이면
msiㅋㅋㅋㅋ
공부하시는거면 당근에서 m1 16기가 사는게 시간절약 돈 절약 스트레스 최소화 인 것 같습니다.
스벅 매니저님도
진짜임을 알아보시고 자리 마련해드림
ㅋㅋㅋ 그리고 하드웨어적으로도 저는 디스플레이나 키보드나 트랙패드 만족스럽습니다..
ㅋㅋㅋㅋㅋㅋㅋㅋ
근데 진짜
맥북만큼 트랙패드 개좋은 노트북 없음
우분투에 빔까지;;
ㅋㅋㅋ 맥북이 스벅 입장권이라고 불리는 이유가 둘 다 가성비가 ㅊㄹ이라 그런거였는데.. 요즘 보면 스벅도 가성비 좋고 맥북도 가성비 좋죠
궁극의 빨간 점 있잖아요
진짜 옛날에는 자기들만의 프리미엄 느낌이었는데
요즘은 안 쓰면 바보
빨콩ㅇㅈㅇㅈ
요샌 가성비가 너무 좋아져서 방사능까지 주더라구요
콩콩이;;
방사능 무료
개꿀
근데 ㄹㅇ 플러터나 rn하는데 맥북 안사는 개발자들 보면
너무너무너무너무 답답합니다
반대로 뭘 해도 성공하실 분들 같네요
그걸 어떻게 참고 살지..
근데 저도 직접 사용해보기전까진 굳이 맥을 써야되?? 싶었는데 막상 사용해보니깐 그때 알겟더라구요ㅎㅎ 경험해보기전까진 사실 뭐가 그렇게 다이나믹하게 바뀌겠어 싶은거같아요
저는 맥북 산 이유가
링크드인에 계셨던 맨토님이
쥬니어의 가장 큰 실수는 장비에 투자하지 않으면서 실력이 늘길 바라는 거라고
저는
20년에 전역하고
전 윈도우파입니다
장인이 도구탓 제일많이하죠
Windows 11 만세
군적금으로 19년 맥북프로 16인치 바로질렸습니다
지금은 개슈레기,,
맞아요 장인은 지난 세월간 자신의 몸에 맞는 장비를 찾아온거고 그 정답이
지금의 실리콘 벨리에선 맥이다
같은 환경에서 개발할때 오는 생산성을 무시하지말고 실력이 딸리면 장비로 커버하란 말 듣고
얼렁 샀었네용
네,,
로그님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
공통 팝업 작업 해 보셨던 분 계신가요...~ ReactDom.createPortal 사용하면서 리덕스 같이 사용하는데, 버튼 하나 또는 두 개인 팝업의 경우 버튼을 눌렀을 때 팝업이 닫히는 이벤트 외에 다른 메소드도 함께 넣어 주고 싶은데 리덕스에는 function을 담는 걸 추천하지 않는다네요...... 구현해 보신 분들은 어떻게 구현하셨는지 어떤 것 참고하셨는지 궁금합니다
바로 주믄 합니다
function 을 state에 담지 말고 action으로 만들면 어떨까요?
로그님!! 반갑습니다 어서오세요 :)
맥북 프로 m1 pro 쓰는데 ios android 예뮬 두개 돌리고 구글크롬 왕창 켜놔도 쾌적해요 맥북 최고…
말도안되
인텔 맥북인데
크롬 탭 많아지면 죽을라카는데
인텔맥북 + 안드로이드 스튜디오면 남극가서도 얼어죽을 일은 없죠 ㅋㅋㅋㅋㅋ
그대로 하셔도 문제는 없겠지만, 메소드를 넣어주기 보다 openModal 함수 자체를 async로 만들어서 유저의 확인, 취소에 따라 다음 동작을 진행할 수 있게 만들어보는건 어떨까여??
부부님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 부부님 반갑습니다 :)
안녕하세요
부부님이 나갔습니다.
퇴근길.. 테오님의 블로그를 보며..
안녕하세요, 선배 개발자 분들에게 여쭤보고싶은게 있어서 여쭤봅니다..! 현재 스타트업에 신입으로 취업한지 반년이 되어가는데 뭔가 고착상태에 있는거 같아서 더 공부하고 싶은 욕구가 생기는데 따로 공부하는게 나을까요 아니면 다른 개발자분들과 스터디나 사이드 프로젝트라도 진행하며 여러 정보를 접하는게 좋을까요??
둘다인데 하나만 고르라면 후자요!
음.. 필요한 스택이 있고 그것이 뭔질 안다 하면 1번 협업능력이 필요하고 배포가능한 서비스를 만들어보고싶다 하면 2번
혼자 집중하면서 이론적으로 성장할 시간도 필요하고 다른 사람들이랑 공부하면서 재미+정보 를 챙길 시간도 필요한 거 같아요
음 그렇군요.. 저는 필요한게 뭔지는 아직 잘 모른다고 생각하기 때문에
그러면 협업을 통해 정보를 많이 챙겨가는게 좋을것 같네요.. 소중한 의견 감사합니다 ㅎㅎ
그럼 경험이 깡패죠 ㅎㅎ
멋지십니다
공감합니다
쓸만한것들을 함께 많이 만들어보세요!
저도 사내 스터디 진행하면서 하고 있는데 실무에서는 아직 잘 안쓰던 지식을 서로 공유하게 되는 점도 좋았습니다!
워메 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
썸네일.. 파멸적이네요
ㅋㅋㅋㅋ 백엔드 중심의 홈페이지에서 jQuery를 쓰자니 구식같을때 원포인트 프레임워크 같은거죠
요새는 프레임워크 툴이 워낙 잘나오기도 하고 개발자를 뽑는 이유가 대형 서비스를 만들기 위함이니 설자리가 애매하긴 한데 레거시등에 jQuery보다 원포인트로 쓰기에는 좋은 것 같아요
리액트 고수님들 redux의 subscribe로 재렌더링하는게 나을까요 아니면 redux 데이터를 useState로 받아서 state로 재렌더링 하는게 나을까요?
전자요~
아하! 감사합니다
저도 전자입니다. 굳이 state로 다시 받을 필요가 있을까요?
감사합니다 ㅎㅎ
이 상황이 아니더라도 동일한 state에 대한 local copy 는 별로 권장되지 않습니다! state 가 하나 늘어나면 어플리케이션의 차원이 하나 늘어나는 거라, 딱 필요한 만큼만 맞게 쓰는 게 좋아요 :)
앗 이게 약간 공격적으로 보일수가있었는데 정말 그런 상황이 필요한지 궁금해서 여쭤본거였어요...!
음 그게 제가 아직 지식이 얕아서
만약 컴포넌트가 디스마운트 되면 현재 컴포넌트에 등록되어있던 subscribe들이 알아서 구독해제가 되나요?
넵
그렇군여!
state가 변경되면 랜더링이 일어나기 때문에 피할수있는 랜더링은 피하는게 좋습니다
멋지다요..
혹시 모바일 디바이스에서 크롬은 가로 스크롤 길이가 오른쪽 gutter값에 딱 맞는데 사파리에선 오른쪽 gutter가 무시되는 일 겪으신 분 계신가요 ㅠㅠ
이런 식으로 하려면 thunks saga 같은 미들웨어 필요한가요?
저는 커스텀 훅으로 인터페이스를 구성해서 비동기 로직 같은 경우 미들웨어가 없더라도 작성하는데는 문제 없었습니다!
혹시 깃허브에 코드 올려 놓으신 것 있다면 참고할 수 있을까요??
원티드 온보딩 챌린지 참여하신 분들
언어나 라이브러리 사용
잠시만요! 회사코드라서 보여드리기는 어렵지만 이런 식입니다!! const openModal = (modal) => { return new Promise(resolve => { // 열리고 닫히는 로직 등 } }
적극적으로 하시나요?
그런데 제가 작성한 방식을 보면 결국 리덕스에 onConfirm이나 onCancel이 들어가는 방식인 것 같습니다. 아래의 블로그를 보면 리덕스 툴킷의 createAsyncThunk를 이용해서 비슷한 코드를 작성하고 있습니다 . 화해 : http://blog.hwahae.co.kr/all/tech/tech-tech/6946/
북미신입개발자님이 나갔습니다.
CV/3/8500님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저.. 스타트업 신입 취업을 목표로 공부하고있는데요 채용절차에 코딩테스트가 없는곳과 있는곳의 차이가 많이 클까요...??
여러분 혹시
부트스트랩 이용해서 개발 후 build 시에는 안쓰는 module들은 다 삭제되고 사용된 css만 빌드되나요 ?
조이님이 나갔습니다.
저 현재 MainPage와 stylepage에서 carousel을 사용중에 있는데요. MainPage에서는 carousel2.css파일을 호출해서 적용중이고 style에서는 carousel copy.css 파일을 호출해서 적용중에 있습니다. 그런데 왜 carousel copy.css 파일을 수정하면 style페이지만 변경되는게 아니라 왜 main 페이지에서도 적용이 되는걸까요!?
불 뿜는 튜브님이 나갔습니다.
Css 명 겹치는거아니에요?
준비 과정에서 차이요??
이제 봤네요 감사합니다 철진 님~ 참고해 보도록 할게요
삭제된 메시지입니다.
어떤 글을봤는데 채용프로세스가 간단하면 비추천한다는 글을 봐서요 ㄷㄷ 진짠가 싶어서..
간단한 채용프로세스는 어떤 건가요??
서류-면접-내일출근 아닐까요
면접 한번으로만 끝나는곳 생각했습니다
아하!
흐아..
M2 에어 너무 이쁘네요..
개인적으로 느껴본건
저 궁금한게 금방 떠나야하는 회사는 어떤 회사라고 생각하시나요??!
코테나 과제가 있는 기업이
좋은 것 같습니다~
ㅋㅋㅋㅋㅋㅋ 근데 회사마다 다 달라서... 개인적으로는 코테 있는곳이...
그렇군요...!
역시... ㄷㄷㄷㄷ
그만큼 좋은 개발자를 뽑고 싶은 마음이 있기 때문에 채용 과정에 있어 절차를 두었다고 생각이 들어용
채용과제도 좋습니당
구현하기 위해 얼마나 노력했는가를 면접관 입장에서도 알수있어서요
코테준비를 따로 하는게 싫으면 과제 주는 회사도 괜찮나요?
회사에서 거의 대부분의 개발자가 산업기능요원인거는 어떻게 생각하세요??
아무래도 코테나 과제가 있으면 무서워서 잘 지원을 안하니깐 급한 기업이나 규모가 작은 기업은 그 과정을 없애고 바로 함께 일할 수 있는 개발자를 많이 보는 것 같습니당
아 그건 돈이 없어서... 후려치기...
아하
이건쫌..
스타트업 프론트 신입 쪽도 코딩테스트 를 많이 보나요?? 본다면 난이도가 어느정도일까요 ㄷㄷ 무섭네요
네... 곧 떠나야겠네요...
회사바이회사죠?
오히려 경력뽑을때 코테 잘 안보고 신입뽑을때 많이보지않나요
경력은 이력서보고 거르면 되지만 신입은 거를게 없으니..
회사바이회사죠 ㅋㅋㅋㅋㅋ
그냥 어떻게든 인맥 넓혀서 지원하는 회사에 지인이 있는게 무조건 최고인 거 같습니다
와.. 그얼군요 ㄷㄷ
회사 어때? 라는 질문을 할 때 제일 정확한건 그 회사 개발자한테 직접 물어보는거니까요!
진짜 좋은 회사면 좋다고 말하던데
안좋은회사는 말도안하더라고요 ㅋㅋㅋ
개인의 성장은 좀 챙겨주는 편이고 시니어도 나쁘지 않은데 디자이너가 성격이 좀 이상해서 스트레스고 기획자 능력이 부족해서 기획이 자주 바뀐다
막 이런 식으로 자세하게 알려줄테니
지인찬스가 제일 좋은거같아요 외부에선 알기 힘든 정보인데
맞는 말씀이네요 ㅠㅠ
주위 지인은없고 코테 과제 면접 준비해야하고
빡세다 ㅎㅎ
열심히하겠습니다 다들 감사해용
개발자가 4명정도로 이루어진 완전 초기 스타트업에 대해서는 어떻게 생각하시는지 궁금합니다!
멤버가 어떻느냐에 따라 다르죠
쉬운 문제라도 코테 보는 곳이 더 좋지 않을까 싶습니다. 조금이라도 남의 코드에 관심을 기울인다는 뜻이니까요.
개발쪽 성장은 잘 못 챙기겠지만 회사 운영이나 방향성에 깊게 관여하면서 얻는 또다른 성장이 있을거같아요!
그렇군요...!! 감사합니다!
이번 이직 때 코테 없는 곳으로 왔는데 다들 코드엔 별로 관심이 없는 것 같거든요..
코테 보면 제출한 코드를 직접 보나요?
과제전형은 경험상 코드 보고 질문도 하고 하던데, 코테는 맞았는지만 보고 코드는 안 보셨던 거 같아서
얼마전에 면접본데는 어떤 생각으로 풀이과정을 도출해냈는지 코드를 보면서 질문하시더라구요
오.. 그렇군요 감사합니다!
코테는 많은 지원자를 필터링하기 좋은 수단으로 사용되죠.. 코드안보고 점수만 보기도합니다 과제 테스트는 실무위주의 역량을 더 중요시 하는 경향이라 생각되네요
사진
network탭에 특정요청에 대해서 앞에 해당 문양이 있는데 어떤의미인가요 ??
보통 개발 스터디 같은거 개설하고 모집하는 것은 어디서 하는지 아시는분 계신가요?...
저는 인프런이랑 okky에서 했습니당
저건 웹워커 문양인거 같은데요 음..
아 그렇군요 ! 감사합니다 !
사이트 돌아다니면서 네트워크탭 열어보고있었는데 웹워커에서 하는 요청엔 저렇게 문양이 붙는군요
저는 회사랑 동아리요!
인프런 사이트에도 스터디 구하더라구요
혹시 맥북 쓰시는 분들 투두리스트로 어떤거 사용하시나요 ?? 미리알림같은 내장 기능 사용하시는지 따로 쓰시는게 있는지 궁금합니다
그냥 기본 메모앱씁니다 ㅋㅋ
노션쓰셔도 되고
중요 알림은 미리알림
투두리스트는 칸반보드로 관리해요
노션 칸반보드
틱틱도 좋아요!
감사합니당 !
미리알림 써요!
파이팅하는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아 각각 다른 css 호출해주었어요
제 생각에 다른 css를 호출하더라도 index에서 합쳐지기 때문이지 않을까요? nesting을 이용해서 특정 className 아래에 있는 경우에만 적용될 수 있도록 나눠보시는게 좋을 것 같아요!
<style> /*css1*/ .copy{} /*css2*/ .copy{} <style> 이렇게 사용되고 있을 듯 하네요
삭제된 메시지입니다.
아 죄송합니다 ㅎㅎ 잘못 썼네요
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
일하기 싫은 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
CV/3/8500님 파이팅하는 무지님 기타치는 튜브님 일하기 싫은 네오님 모두 모두 환영합니다 :)
안녕하세욥 ~~
안녕하세요~
안녕하세요 두분 모두 환영합니다. 이곳은 프론트엔드에 대해서 궁금한 것들을 편하게 물어보고 아는 질문이나 관심사에 대해서는 적극적으로 대답을 해보면서 함께 성장하고자 하는 곳입니다. ㅎ 잘 부탁드립니다.
실무, 공부, 커리어, 추천, 관심사, 고민 등 다양한 주제로 편하게 글 남겨주세요. 가급적이면 다 대답을 해보려고 하고 있답니다. :)
프론트는 아니지만.. 구글이 언어를 또 만들었읍니다... https://github.com/carbon-language/carbon-lang
와우
c++ 계승 언어인가 보네요
구글이 미는 언어/프레임워크는 신뢰하기 어렵다는 전통이... 읍읍
코틀린 c++ 버전이라고 생각하면 될까요
통수를 조심하세요!
고랭은 나름 잘 써먹고 있습니다 ㅠㅠ
앵귤러?
리액트에서 id이 없을떄 고유값을 만들어내보신분있나요?? uuid,random,shortid 을 사용하면 안된다고하기도하고 직접해보니 랜더링이 조금 이상하게 되서요
배열에 key문제 때문입니다!
key가 고유하지않아서 삭제기능을 구현못하고있어요 ㅠㅠ
지양되는 방법이긴 하지만 저는 그냥 인덱스 씁니당..
그럼 삭제를 못해요..
`${index-item_name
조합하긴했습니당
useRef로 1씩 증가하는 id 사용하면 안되나요?
그럼 index랑 같아서 별 차이가 없을거같아요. 저도 민석님이 올려주신것처럼 index값에 item마다 고유하게 가지고 있는 데이터를 조합해서 키로 사용하고있습니다.
지금 고유값이 없습니다..
보통 서버에서 가져온 item에 고유한 id값들이 있지 않나요? 저는 보통 그 id값들을 key로 사용하고있습니다.
지금 플로우가 인풋컨네이너(게시물이름,게시물내용)이게 하나의 박스라고 치면 추가가 되요 그래서 inputs로 관리를 하고있고 여기서 삭제기능을 추가해야하는데 고유값이 아예없어서 문제입니다. 여기서 서버에 보내면 거기서 id를 붙여서 다시 반환합니다
인덱스를 조합한다고 해도 데이터 배열에 변경이 있을 때 기존에 id-1이였던 애가 변경이후 id-0으로 변경되기 때문에 같은 값으로 리액트가 생각 못할거에요. useRef를 이용해서 배열자체의 값에 고유 아이디 key를 주는게 더 좋은 방법일 거 같아요!
배열의 index를 사용하는 것과 useRef를 사용해서 1씩 증가하는 key를 사용하는 것은 것은 다르지 않나요? 수정/삭제 작업이 발생했을 시에 배열의 index는 변경되지만 useRef는 고유한 값이지 않나요?
아 그러네요!제가 잘못생각했습니다.
리스트 아이템을 새로 생성시키게 되나요?
아니요
onChange가 반박자느려져요
value가 바뀔때 문제가있더라구요
아니면 배열을 추가할때로 자연스럽지 못했습니다!
코드를 보여주시는게 빠를거같긴 합니다만
결국은 인풋 입력해서
리스트아이템 추가하는거 맞을까요?
삭제된 메시지입니다.
삭제된 메시지입니다.
삭제된 메시지입니다.
———————————— | 제목 | | 내용 | ================= 추가하기 삭제하기
———————————— | 제목 | | 내용 | ================= ———————————— | 제목 | | 내용 | ================= 추가하기 삭제하기
이렇게 되는로직입니다
투두리스트랑 동일하다고 생각되는데
맞아여
리스트 추가하실때 로직은 어떻게 되시나요
아이디 생성하실때
리스트의 맨 마지막 요소의 id +1 방식으로 하시면
금방 해결 되실겁니다
그런데… 사실, 고유한 값이 없는게 문제가 아닐까 하는 생각이 듭니다. 특정 게시판이거나 특정 댓글이거나 고유한 id가 당연히 있어야할 것 같은데 없는 이유가 있을까요?
빈털터리 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 프론트엔드는 처음이라 로그인기능 구현 중에 질문드리려고 들어오게 되었습니다
음악듣는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
빈털터리 제이지님 음악듣는 어피치님 반갑습니다.
네 편하게 질문하세요 :)
axio로 로그인 기능을 구현하려고 하는데, 401 응답이 왔을 때 어떤 기준으로 refresh token을 재발급해야 하는지, 어떨 때 로그인화면으로 리다이렉트 되야하는지 궁급합니다..!
access token 이 만료되면 refresh token을 받는데, 이렇게 되면 유저가 로그아웃되는 일은 쭉 없게 되는건가요?
네~
리프레시토큰도 만료됐으면 로그아웃되어야겠죠..?
보통 그렇죠?,,,
그거는 status code가 401이 아닌건가요..?
Happy님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
axios intercept 안에서 401요청 핸들링 할 때에, 먼저 리프레시 토큰 요청 -> 거부 -> 리로그인 리프레시 토큰 요청 -> 액세스 토큰 업데이트 -> api 재요청
아뇨 401이 오면 refesh를 요청하고 그것마저 401이면 로그아웃이라고 보시면 될 것 같아요
이런 식이 되는걸까요?!
Happy님 안녕하세요~ 반갑습니다.
감사합니다!
삭제된 메시지입니다.
안녕하세요!ㅎㅎ
엇 그러네요
배열이셨군요.. 그럼 useid는 못쓸듯 하네욥
사진
요런식의 ui는
어떻게 설계해야 효율적일까요??
캐러셀처럼 넘기는건 어떠신지요
캐러셀보다 간단한것을 찾고있어서요!
어서오세요 이곳은 프론트엔드에 대해 궁금한것들을 묻고 답하면서 함께 성장하고자 하는 곳입니다 언제든 편하게 글 남겨주세요 :)
이건 어떠세요?
감사합니다
혹시 aws amplify - cognito 로 로그인 구현해보신 분 계신가요? acces, id, refresh 토큰을 프론트엔드에서 받아오는데, 이걸 전부 프론트엔드에서 관리하면서 localstorage나 세션스토리지에 넣는게 맞는건지.. 리프레시토큰만큼은 백엔드에 넘겨줘서 관리하는건지 어떤것을 추천하시나요?!
여러분 저학원선택좀
도와주세요
앵귤러 / flutter v1 / android에서의 java 정도가 제가 아는 대표적인 사례입니다
모두 구글이 목숨거는것처럼 밀어붙였는데....
저
여러분
고민하나 말해도되나요
아무리 고민해봐두
ㅠㅠ
네 말씀하세요
사진
사진
두국비학원을 고민하고있는데요
사실 저는 감으로 가고싶진이제않고
디자인을 하고싶지 않습니다 조금쓰인다면 하겠지만
아래껀 마케팅에 가까운 웹디자인인것같고 위에껀 웹 개발이더가까워보이는데 제가 인지하는게 맞을까요
저는 위에커리큘럼이 조금땡기는데요
다른분들은 추천하지않더라고요
다른 선택지는 없나요?
저는 어차피 개인공부를 할거라서
네..
저거둘밖에없습니다
프론트엔드 코드스테이츠도있지만
그건 자기관리 흐트러지면 끝인것같아 거르고있습니다
국비를 다니셔야하는 이유가 있나요
프로젝트 보니까 모든 수강생이 같은 프로젝트하는건데...
개인공부하신다고 하셔서 질문드린거에요
혼자 공부를 하면서 하기가 버거워서요
학원을 다니기도버럽고
무엇보다 직장을 못구하니
직업생계대출이나온다니 취직후에갚고싶어
하나 확실한건
코드스테이츠 좋아하진 않눈데 저기랑 비교하면 코드스테이츠가 백배 나은거 같아요...
국비에서 배운거 전
하나도 안써요
ㅋㅋㅋㅋㅋㅋ국비 저 커리큘럼 다 다른 강사분이 해주시는거겠죠..
저도 조사하고 조사해서 국비했지만.. 유료부트캠프랑.. 질적으로 차이가 나더라구요..
그리고 국비는 특히 강사역량이 중요하다고 들었어요
취업시장에선 국비에서 배운것 초초초이상으로 노력하셔야 되어요 ㅠ 이력서 보면 국비 출신분이랑 부트캠프 출신분이랑 너무 차이가 많아서 ..
기간이 얼마나될지는 모르겠지만
그래도 요즘 국비는 리액트도 알려주네요 ㅋㅋㅋㅋ
전요
넥스코어라는 이상한 프레임 워크 씁니다
거기에 빌드스타트랑
국비도 해보고 코드스테이츠도 해봤지만
스프링이 그립다....
수료후바로취업은 힘드실수있어요
둘 다 비추해요..ㅋㅋㅋㅋㅋ
저는 스프링 국비 배워성
그나마 전자..
잘 취업했습니다
케바케이니..
바로 취업도 됩니다
둘다
중견급도 갈 수 있어요
케이디지털이라
이모티콘
고용노동부에서
실무를
저는 기반이 아예 없으시다면 국비도 좋은거같아요 공짜로 공부할수있는 습관 갖출수있고, 여러사람들 만날수있는 기회가있어서 같이 스터디하고 플젝할수 있어서요. 대신 수업으로 끝나는게 아니라 본인 노력이 중요한거같아요
해주는 프로젝트를
한답니다
실무를 시켜준다고해요
실무라는게
그래서 실무경력을 만들어줘서 경력직으로 가게끔
음
케이디지털이라고
이거는 너무 믿지 마시길
여러 회사를 연계해
실무가 사실 어느정도를 말씀하시는지 모르겠는데
고용노동부에서
주관하는건데
거고 실무랑 달라서
그런 지원받는 회사가 멀쩡한 회사일까요 ㅋㅋㅋ
믿진않아도
경험쌓는다는 느낌으로 생각하시는게 좋을것갗은데요
전부다
저는 완전 의심스럽습니다
간절하니까
가는게아닐까요
2가지 걸러야 하는게
연계해주는 곳이랑
네
ㅋㅋ
사람인에서 전화오는곳
ㅇㅈㅇㅈ
커리큘럼에 디자인 있으면 무조건 거르고
그럼 첫번째
맞습니다
가 조금더
낫겟네요
낫다지
가라고 말씀드리긴 쫌...
사실
근데제가
국비가
지금 상황이 너무안좋아서
너무 얉게만
전 어문하고 상경하다가
가르치는 느낌이 너무 강해서..
혼자 공부를 하며직장을 다닐수가
추천은 안해요
없거든요
이리로 왔거든요?
관세사 준비 하니라
생계대출받아야하는지라
국비로 넓게 배우고 혼자서 깊게 파야죵
회계도 볼 수 있어요
오히려 그런게
도움되요 실무는
분야 파고
네네
혼자공부는
할거에요
무조건요
올인해야해요
내가 가고 싶은 분야 설정
근데 학원 선택과정에서
그런거에요
이거 중요 합니다
2222
저는 하다가 사실 프리로
전 금융쪽에 있어요
빠지고싶어요
국비학원 강사님들도 다 케버케이지만
근데 코드스테이츠는 왜 빼신거에요?
개발에서 손뗀지 꽤되신분들도 많아요
ㅠㅠ
코드는 일단
국비님은 개발에서 어떤 직무가 하고싶으세여?
신청은 했는데
집에만 박혀잇어서요
3년 10개월차 프리분
진짜 코드스테이츠 추천 안하는데 자기 두곳보단 백번 나은거 같아요
월급 600받는거 보고
현타 오지게 먹었죠
사실 저는 인사 노무 쪽 개발이나
그니까
ERP유지보수나
네네
솔루션 계발 쪽이네요
네네
맞아요
그래서 두번짼
거르고싶어하는기분이더크구요ㅠ
국비를 들어야지만 대출이 나오나요
네
솔직히 코딩 보다 중요한게 업무라고 생각합니다
아무리 코딩 잘해봐야
설계 개판 처놓으면
두번째는 아예 퍼블리셔 과정같은데요
모래성 보다 못한거라
네맞아요
그게 싫었던거엥ᆢ
엥ᆢ
에요
거의 쇼핑몰
퍼블리셔는 비추...
보낼삘인데
쇼핑몰쪽은
거의 돗대기 시장이라
돈이 많이 도는 곳으로 가세요
고작 쇼핑몰
쇼핑물 영세한 곳도 많고
가겠다고
직훈가는건아니라서요
저 쿠팡 에서 근무까지했었어요
고작 거기가겠다고..
쿠팡!?
디자이너요
오오 어떤 직무셨죠
유후!
고작 ㅜㅜ 제가 쇼핑몰가겠다고
네카라쿠배 아닙니까요
쿠팡을 버리는게
쿠팡은 고작이 아니지않나요
ㄴㄴㄴ
그
일반 쇼핑몰
이커머스 시장에서 꽤나 중심인데
가겠다고
이커머스도 이커머스 나름인데 쿠팡이 고작이라니 ㅠㅠ
쿠팡을
버리겠냐구요
아니
반대로
이해하셨어
요
국비님
퍼블쪽 하셔서
네네
쿠팡 경력 살리는 쪽도
그럼 어느정도를 생각하고 계세요??
방법이죠
국비 들으시고
저는 제사업 까지 염두하는거라
어느정도 취업을 원하시는건가요? 추상적으로도
경력 쌓고
그리고 다른데 문 두드리시는것도 방법이에요
그런가요ㅠ
저도 디자이너시라면 퍼블리셔까진 무난하게 진입하실껄로 기대합니다.
저는 퍼블은 진짜
눈에안차는데
ㅜㅜㅜㅜㅜ
큰일입니다
제눈패고싶어요
혹시 새로고침할때 맨 위 찍고 이전 스크롤 값 기억해서 그 곳으로 이동할 수 있는 방법이 있을까요??
퍼블리싱하다가 개발하는 분들도 많으니까요 ㅎㅎ
새션스토리지?
퍼블리셔로 하시다가 개발자로 전직하시는분들도 많아요
hr쪽으로 개발자하길원해요
제대로는요ㅠㅠ
백엔까지 가길원하는데
백엔수업은
제가 자신이
없어서
어쩔땐 그 스크롤 그대로 나오고 어쩔땐 맨위에 가있고 어쩔땐 탑찍고 이전 스크롤로 가있고 왔다갔다하는데 잡기가 힘드네요 ㅠㅠ
아휴
분야를 여쭤본건 프론트 백엔드 등등 데브옵스까지 많은 분야가있는데 어느 분야로 가고싶다는건지 여쭤본거얐어요
ㅜㅜ
제가 유튭더봐야하나봐요
프론트개발자도 백엔드에 관심이 있어야한다고 생각하겆든요? 웹개발자라는 타이틀이니까여
ㄷ
새로고침이 f5인경우에만 한정하시는건가여?
넵..!
아니면 페이지왓다갓다도 되는겅가요
음
목적은 페이지 탑을 찍고 원래 갔던 스크롤로 가는게
데브코스나 앨리스 같은곳도 국비 비추하시나요?
베스트입니다..
저는 첫번째보다 두번째가 커리큘럼이 더 나은것 같은데... 첫번째는 좀 너무 얕게 배우는 느낌이고 php,jquery도 끼어있구...
디자인 부분이 200시간 넘는건 아쉽긴해도 남은 시간은 html,js에 집중된 과정인것같고...
첫번째 과정도 시간만 보면 ui쪽 교육시간이 200시간이 넘는데
디자인이 너무강해서
두번째 과정 가서 html,js를 좀 깊게 공부해보시는건 어떨까요
첫번짼
아직 상담전이고
두번짼다녀왔어요
두번째는 리액트도 없는거 아닌가요
제가 사전평가1등했단이유로끌렸던건데
몇년 뒤에 시골에서 낮에는 농사지으면서 밤에는 스마트팜 시스템 만들면서 외주하려고 생각하는데 틈틈히 nodejs vuejs 정도 공부해두면 될까요? ㅎㅎ현직자인데 웹개발쪽은 아닙니다
1이
좀더 낫죵??
첫번째 과정에 리엑트가 있어도 겨우 100시간인데 저라면 차라리 그 100시간에 자바스크립트를 더 깊게 배우는게 좋아보여요
저는 지금 원래 업은 사주타로를 해왔고 제사주볼줄알아도 제사이트열고 채용 분야까지 하고싶은데
이걸어떻게 접목시켜야할지
데이터 공부도필요한분야인데
개발자 + 대표를 원하시는건가요?
beforeunload라는 이벤트 붙여서 현재스크롤 위치를 세션같은데 저장시켜놓구 마운트 이전에 스크롤을 top으로 , 마운트 이후에 저장된 스크롤로 복원시키는 방법도 될 것 같아요
네 맞습니다
기술배운후에
쓰고싶어서요
너무꿈이허황되서
여러분 귀찮게
해드려죄송해요
의지가 있기에 하고싶은데
우선순위를 정하세요
혹시 recharts 라이브러리에 reference line을 드래그앤 드랍으로 이동시켜보신분 계신가욤,,
어떤사이트 만들고 싶으신가요
Iot도 필요하지 않을까용
선생님들 질문(?) 있습니다 저희 프론엔드는 리액트 등 프레임워크로 화면 만드는게 더 편하고 유지도 더 쉬운데 왜 정작 많은 회사에서는 백엔드를 요구할까요? 것도 자바스프링으로 화면만드는 능력을요.. 안정성 운운하지만 리액트가 무겁다고 안돌아가는것도 아닌데.. 예전이야 ie쓰면서 국가정부프레임웤 썼지 이제는 아닐텐데 아직도 자바스프링이 만연한 이유가 궁금합니다 🥲
프론트엔드가 사용자에게 더 높은 가치를 전달해주는 역할이라면 백엔드는 그냥 없으면 서비스 자체가 안되니까 프론트엔드는 없으면 아 별로네 하고 말지만 백엔드는 없으면 서비스가 없는 거죠 ㅋ
자바스프링으로 화면을 만드는 능력을 요구하지 않지 않나용...
그러다보니 서비스를 구현하려면 백엔드가 먼저인거구요 모든 웹 서비스가 프론트엔드의 기술들이 많이 필요하지는 않습니다 대부분 요구사항들은 사실 기존 웹 방식으로도 충분히 만들수가 있어요 웹이 인터랙티브하게 돌아가서나 앱처럼 돌아갈 필요가 없으니까요
그쵸 여기서 말하는 화면을 만드는 능력은 적당한 HTML css js 정도로 추측을 해봅니다
아 그런가요? 프론트도 없으면 서비스가 없는 거 아닌지..? 궁금합니다
역시 이펙트보단 에센셜을..
jsp 나 장고템플릿 같은 것도 백엔드라고 보신걸까요?
react를 안쓴다고 html css js를 백엔드에서 못하는 것은 아니니까요
아하 이해했습니다 :) 👍
안녕하세요. macos 환경에서 vue로 프로젝트하나 하고있는데, 모바일 디바이스에서 로컬호스트 환경어떻게들 띄우시나요?!
사실 백엔드 프론트엔드을 뭘 기준으로 자를지는 애매한데요...
좋습니다 찰떡 같이 알아들어주셔서 고맙습니다 ㅎ
같은 와이파이에.. mac ip주소 복사해서 모바일에서 넣었더니 안떠서요..!!
신입이 웹에이전시로 커리어를 시작하면 나중에 경력에 문제가 될 수 있을까요?? 사바사긴 하겠지만 웹에이전시 경력 자체를 잘 인정안해줄지 걱정되서 한번 여쭤봅니다
그렇게 띄웁니다..!
ip주소를 내부망 말고 외부망으로 하셨거나 같은 망 와이파이를 쓰고 있는 게 아니거나 한 거 아닐까요?
같은 네트워크 사용중인데 이상하게 안되네요..
과거 BE, FE 가 현재와 같이 분리되지 않았던 시절에 spring 과 같은 웹 프레임워크들이 현재의 BE+FE 를 모두 담당하곤 했었어서 그때 개발하였떤 레거시 프로젝트들 때문이 아닐까 싶습니다
맥에서 ifconfig | grep inet 하고 대충 내부망처럼 생긴 ip주소 고르신 거 맞으시죠?
작년 조사였던가 레거시를 포함하는 전체 웹 서비스중에서 웹프레임워크를 쓰는 웹서비스 비중이 10%가 채 안된다고 봣어요 나머지는 아직도 jquery거나 그냥 html css
자바 스프링이 수요가 많은건 si개발이 많은데 전자정부프레임워크가 기본이고 전자정부프레임워크가 스프링부트 기반이라 그렇고, 서비스 회사의 경우에도 스프링부트 자체가 워낙 지원하는 라이브러리나 구현되어있는 모듈수가 방대해서 만들어 있는걸 가저다 쓰기만 하면 되고 업데이트도 어마어마하게 되서 그런것 같아요
넵 맞습니다.. 172.~~~~ 입니다
맞아요 레거시 규모는 아직도 어마어마합니다
혹시 애드센스 사용해보신분 있나요??
흠 그럼 제가 아는 선에선 돼야 하는데 이상하네요ㅜ
그러게요 ㅠ 같이 고민해봐주셔서 감사합니다
메인페이지에 적용되고 컨텐츠 부족으로 상세페이지에 적용해야할거같은데 정보가 많이 없네요..
ㅏ 레거시가 있네요
카페같은데서 작업할때는 ngrok 이용합니다
포트번호도 확인해봐야할거같구요
포트번호도 잘 넣었는데 도무지 이유를 알 수가 없네요 .. ㅎㅎ 저주받았나봐요 ㅠ ㅋㅋ
소수의 기업들을 제외하곤 굳이 소프트웨어를 지속적으로 발전시킬 필요가 없는 경우가 많아서.. 기존에 구축해놓은 시스템을 그대로 유지 보수만 하면서 수혈해주는 경우가 많으니 과거의 방식을 유지 보수할 인력을 ㅎㅎ..
본인이 어떤 경험을 해보고 어떤 기술을 써보고 어떤 문제 해결을 해봣는지에 따라 달라질거같네요
답변 감사합니다 결국 저 하기에 따라 달라질 수도 있는거군요
피스메이커 프로도님이 나갔습니다.
좋은 점심들 되셨나요
9월에 있을 프로젝트에 앞서
뷰 공식 스타일 가이드를 보고 있습니다
그러던 중
사진
이게 무슨말인가해서 여쭙고자 합니다..
영어로 바꿔서 보시는게 좋아보입니다
번역이 이상할 수도,,
영어를 해석을 못 합니다..
22
영어 단어 검색해서
조합하는 방식으로
해석해보는건 어떨까요
!
스타일 가이드내에서
관련 제안은 안한다고 (피한다고) 말하는거 아닌가요
뒤에 맥락에 의하면 그런거 같은데
vue 사용자가 html,js 작성을 어떤 식으로 하던 그 부분은 관여하지 않는다는 내용 아닐까여...?
신경 안쓴다는 말인 거 같네용
맞는것같숨다
감사합니다~
개발직군 사람들 다친구먹고싶네요
저 혹시 작은규모의 스타트업같은경우는 프론트개발자가 html과 css도 맡아서 개발하시나요??
넹 합니다
큰 규모도 html css를 프론트엔드가 다룹니다
퍼블리싱의 영역은 프론트의 기본소양아닐까여
아 제가 잘못 알고있었나보네용 ㄷㄷ
저번에 프론트가 퍼블을 왜하냐고 여쭤본분도있었던거같은데
저희 회사같은 경우는
퍼블은 따로 외주주고
받아서 프론트 개발자가 작업합니다
아하.. 그렇군요!
헉..
based인 것 같아요
html css를 사용하지 않고 프론트 업무를 하는것도 능력인거같네요
안녕하세요, 리액트로 티끌같은 예제 프로젝트를 끝내고 뿌듯해하고 있습니다. 다름이 아니라 `(params) => (oldState) => newState` 형태의 코드를 많이 쓰게 되었고 개인적으로는 너무 만족스러운데, 혹시 일반적으로 읽으실 때 불편하실까 걱정되어 질문드렸습니다. https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/shell/store/UserInputState.js#L6-L19 https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/shell/store/AppState.js#L24-L26 이런 상황에서 사용하였습니다.
혹시 제가 이 책을 샀는데
인프런에 이런 강의가 있길래
여러분들은 어떻게 활용해서 공부하셨나요?
말씀해주신 부분은 괜찮은데, spread 대신 object.assign을 쓰시는 이유가 있으실까요??
사진
아무 이유 없구 그냥 한 줄에 안 들어와서 보기가 편해서요! 혹시 spread를 쓰면 다음과 같은데 이게 더 깔끔한가요??
* 한 줄에 들어와서
저는 저게 더 보기좋아용
assign 쓰면 코드가 장황해보여서
사진
spread가 훨씬 깔끔하죠
참고로 airbnb lint는 spread를 권장합니다! https://github.com/airbnb/javascript [prefer-object-spread]
아아..
저도 떨어졌어요ㅜㅜ
저도ㅠㅠ
죄송합니다 갔다오겠습니다..
null 관련 질문이 있는데요, null 체크할 때 변수 !== null 이라고 안하고 변수 != null 이라고 하는 이유는 어떤거 때문인가요?
저희회사 5명신청했는데 한명 당첨이네요 인프콘
부러워라.. ㅂㄷㅂㄷ
깔끔한 건 취향차이일 거 같긴 한데 일반적으로는 spread 많이 쓰는 거 같아요! 저는 mutable하니까 Object.assign 지양하긴 합니다
등호 두개로 체크하면 undefined 여부까지 같이 체크해줘요
null, undefined 때문 아닐까요?
const a = undefined; a == null // true
아하! 그럼 값이 정확히 null일 때는 ===로 체크하는게 맞겠네요?
넵넵
감사합니다!
아 그렇군요 앞으로는 기본적으로 spread를 써야겠어요! 감사드립니다!!
인프콘 당첨되신분 계시나여??
떨어졋더라고요
극악의당첨확률
저도 탈락입니다. ㅎ
오늘도 과거에 만들어둔 스파게티 코드를 맛있게 먹느라 배터질거같네요
오 .. 저는 엄청 운좋았나봐요
왜 이렇게 짠거야..
총원이 몇명이길래 ㅜㅜ
온라인으로도 하겠죠…?
ㄹㄸ님이 나갔습니다.
끝나고 유튜브로 공개된대요
운좋게 당첨 됐네요 ㅎ..
다행이네요 :)
오옹 저도 당첨됐네요!
끝나고 유튜브로 봐야제
친구들 다 떨어졌는데 혼자됐네요 ..
오와..저 포함 주변 지인분들 거의 다 떨어지셨는데
인프콘 당첨되신 분들 너무 부럽습니다!!
성장했다는 증거ㅋㅋ
부럽습니당… 저희회사에서도 한명됐는데
그러게요 다들 축하드려요~
이모티콘 옆에서 무진장 놀리네요 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
제가 알려줘서 신청한건데…
오…. 당첨 됐네요
어안이 벙벙
로또 사줬는데
다행이(?) 유튜브로올라온다니까
친구가 당첨된꼴
유튜브에서 보는걸로..
사진
지금발견한건데 인프런 강의 신청부분
이렇게 낚시를 하네요
ㅋㅋㅋㅋ
관심있는 ㅋㅋ
ㅋㅋ?
저런식이면 구글이나 애플도 가능하겠네요..
안녕하세요! next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 혹시 어떤 키워드로 검색해야 예제가 나올까요…?
유명한 회사들 다 나오더라구요 ㅎ
잘모르겠지만 탭기능구현 next.js 로 검색하면 나오지않를까요?
TS공부하면서 궁금한 점이 있어 질문드립니다. ts 사용하시면서 함수의 매개변수나 리턴값 타입을 주로 type alias 사용하시나요? interface 사용하시나요?
저는 보통 interface 써요
거의 유사해서 그냥 편하신거 쓰시면되요 회사가면 동료분이랑 상의해서 하나로 정해서 쓰시고여
저는 뭔가
추세는 interface를 더 많이 사용한다고 하네요
interface로 만들고
아주살짝 차이 있어요
타입 유틸리티사용하면 type으로 새로 선언해서 사용해요
반복 선언이나 상속 유니언타입 사용 여부등에서 약간 차이가 있는데
하나 마스터하시면 나머진 그냥 대충봐도 금방 배우셔서
인프콘 부럽네요 ~
아항!! 다들 답변해주셔서 감사합니당~ㅎㅎ
https://mui.com/material-ui/react-tabs/ 이런거요 ?
상황 따라 다른 거 같아요
커다란 유틸 함수면 인터페이스 쓰는거고
간단한 이벤트 핸들러 만드는데 interface 쓰면 좀 투머치일 거 같긴 해요 ㅋㅋㅋㅋ
보내주신 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다,,
지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없나해서 질문했었습니다.
모두에게 질문 드립니다.
여기서 저번에 vue3+ 타입스크립트로 개발할 것을 추천해주셨는데
이 글을 보니 조금 혼동 스러워서 여쭙니다.
캡틴 판교님의 블로그이고
사진
이 문단을 보니 조금 혼동스럽습니다..
vue2로 가야할지..
사진
vue2는 내년말에 지원이 중단이 될 예정입니다!! 지금 개발을해야한다면 저는 vue3를 추천드려요:)) 왜냐면, 위에서 말씀주신 라이브러리들이 지금 당장 현재에더 지원이 안되는지는 모르겠습니다만, 해당 라이브러리들도 곧 vue3를 지원하지 않을까요?! 그렇지 않다면 필요에 의해서 누군가가 반드시 개발을 할 것이라 조심스레 예상해봅니다:) 요약 : 곧 vue3생태계도 잡혀갈것이니, vue3추천입니다!
어떤 라이브러리를 사용할지부터 산정하신다음에 vue3로 갈지말지를 결정해야하지않나요? 그리고 vue2는 곧 지원중단으로 알고있어요!
맞아요ㅎㅎ 코어 라이브러리들은 이미 지원중에 있으니, 어떤것들을 쓰실지에 따라 결정하는 것도 현명해보입니다
답변 감사합니다
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
어제 맥북을 중고로 살지 m2 새거를 살지 고민을 하다가
오늘 외출한김에 그냥
샀습니다
굿입니다 ㅎ
오 뭐사셨나요
와..
ㅋㅋ
안녕하세요 인턴 합격했는데 학칙때문에 인턴쉽 포기해야하는 신입입니다
oops;
기숙사도 퇴관하고 자취방까지 알아봤는데
이모티콘
ㄷㄷ!
아니.. 이런 경우가 있나요..?
사진
12주 짜리 인턴쉽이라 해당 내용에도 포함되고
학교에서 인정해줄 수 있는 현장실습 학점이 정해져 있다고 초과하면 아예 듣지도 못하니 인턴쉽 취소하라네요
심지어 합격한지 3주가 지났고
초과학점에도 불이익이 가나요?
말도 안되는 거 같은데; 게속 따지고 들어가면
과거에 학교랑 상담까지 했는데도
해줄 수 있을 거 같아요
직장이 무슨뜻이죠? -> 요건 뭔뜻인가요..? 직장이라고 생각하지 말란건가
단기현장실습/장기현장실습 참여학생은 맞으신거죠?? 그걸 묻는거 같은데…!
12주짜리 과기부에서 주관하는 ICT 인턴쉽입니당
정확히 말하면 4개월짜리네요
ict 인턴쉽 학점 인정해주는거 아닌가요..?
네 맞아요
아니.. 4개월 짜리 인턴쉽이면
장기로 들어가는거 아닌가요?
저는 그런걸로 알고있어서 내년에 신청하려고 했었는데...
장기 맞는 것 같아요..
아니
혹시 이거 참여대학 리스트에 있으신가요?
인터넷에 치시면 나옵니당
꽤 많이 참여해요
안타깝네요.. 사전에 학교랑 얘기까지 하셨으면, 학과 사무실 찾아가셔서 공식적으로 요청해보셔도 되지 않을까요? 학과 사무실 다음은 현장실습센터 이런식으로요.
아 네네 알겠습니다
지도 교수님이 학과장님이신데
내일 학과 사무실이랑 일자리센터와 이야기 나눠봐야되겠네요..
아 참여대학이 궁금한건 아니었고.. 저희 학교는 장기현장실습은 운영하지만, ICT인턴십에 참여를 안해서 몇몇 분들이 잘못 신청하는 경우가 있었서요
아아
진짜
짜증만 나고
죽고 싶네요
이 인턴쉽 할려고 올해초부터 알아보고 준비했던건데
수강신청도 이미 다 끝난 마당에
갑자기 이렇게 공고하면..
잘 해결 되실거예요 허브님 ㅜㅜ
티비보는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
오늘님이 들어왔습니다.
근데
학교
너무하네요
무엇을 위한 정책인지... ㅋㅋㅋ
사유 인정 시 이수가능하다는 정책이 있지만
학점이랑 기간도 장기현장실습이랑 똑같지만
교과목명이 다르단 이유로 인정해줄 수 없단건
진짜...
react에서 상태관리 라이브러리는 redux를 쓰고 있는데 아이템리스트 페이지로 이동할 시에 아이템리스트를 받아오는 로직을 action 생성 함수에 만들어 놓고 페이지 이동시에 dispatch를 해주면 될까요?
페이지 이동시에 해줘도 되는데 미리 로딩해줘야 하는 게 아니라면 이동시 말고 그 페이지가 마운트될 때 하는 게 낫지 않을까요?
마운트 될때 하는건
useEffect로 한다는걸까요?
리액트로 코드를 짜는데 새로고침을 넣는다는 걸, 현업에 계신 분들께서는 이 상황을 어떻게 보시나요??
이유는요??
제 생각에는 새로고침이란 게 이유를 막론하고 필요하지 않다라고 생각해서 여쭤봤습니다!
제가 여전히 배워야할게 많다보니 제 생각이 옳지 확률이 높아 현업에 계신 분들 의견을 듣고 싶었습니다!
location.reload ??
넵넵
현업 비지니스에서는 온갖 상황이 많이서 절대 없다고 단언하긴 어려울 것 같아요.
새로고침을 해야할 이유가있나요?
DOM을 새로 그려야한다는건데
꼭 해야할상황이아니라면..? 왜 해야하는지가 중요할것같아요
가능하다면 굳이 새로고침을 할 필요는 없겠지만, 꼭 해야할 상황이 절대 없다고 하기는 어려울 것 같습니다.
새로고침을 하고자 하는 이유가 명확하면 사용하고, 아니면 사용하지 않겠죠
티비보는 무지님이 나갔습니다.
사용 해야 할 상황 예가 어떤 게 있을까요?.?
별도의 프로젝트로 리다이렉트해야하는경우?
ex) 카카오톡 -> 카카오택시 -> 카카오페이
리액트로 작업중인데요~
div위에 div 가 있는데
로그인 토큰 시간이 만료되었을떄?
스크롤이 둘다 있습니다
div안의 div 위의 스크롤을 동작시키려 하는데 뒤의 스크롤이 움직여여 ㅠ 어떻게 처리할까요
그거
구글갓에 치면 나오던데
답변 감사합니다!
답변 감사합니다!
넵
감사합니다!!
이인송님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
이인송님 어서오세요. 반갑습니다 :)
제가 코드를 뒤져보니 로그인 에러시 로컬스토리지는 삭제하고 새로고침을 시키는 경우도 있고 화상회의중에 네트워크 에러가 발생했을때 강제로 새로고침을 시키는 케이스가 있네요.
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior 가 있는데 아직 모바일과 구 사파리에는 동작안하는 스펙이 있어요. 이걸 못쓰는 브라우저 지원이 필요하면 뒤쪽 element에 스크립트로 조건부 overflow:hidden을 걸긴해야해요
후후님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 후후님~ 반갑습니다 :)
안녕하세요~ 벨로그에서 "프론트엔드 장인의 서재" 리뷰? 글 보고 들어왔습니다 :) 잘 부탁드립니다!!
와! 어서오세요 이곳은 프론트엔드에 관해 궁금한것들을 묻고 답하며 함께 성장하는 곳립니다~ 프론트엔드 장인의 서재는 협업 경험을 함께해보고자 하는 스프린트 이벤트 결과물 중에 하나였어요 ㅎ
ㅎㅎ 환영합니다
오 혹시 블랙커피 14기 하신 106님이신가요? 106님 블랙 커피 후기 글 보다가 여기까지 왔네요 🤣
오 네넵 ㅎㅎㅎ 혹시 구글 스프린트 이벤트 추후에 오픈 예정된게 있나요?
8월은 연휴 & 휴가시즌이라 8월말이나 9월초를 생각하고 있어요 정확한 일정은 중순 이후에 정해질것 같습니다~
아 넵넵! 알려주셔서 감사합니다~
오 맞아요 ㅋㅋㅋ 신기하네요
ㅎㅎㅎ 반갑습니다! 저도 블랙커피 14기 같이 했습니다 🙌
혹시 HTMLElement를 Element로 바꾸는 방법이 있나요..?
타입스크립트에서요?
타입상관없이요..!
intersection observer에 등록해야하는데
element가 아니라 HTMLElement라서
등록을 못하네요..ㅠㅠ
안녕하세요! 컴포넌트에서 return (<Component />) return ({Component()} ) 위와 같은 두가지 방법으로 했을때 차이가 있을까요?
.님이 나갔습니다.
옐로카드 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
옐로카드 프로도님 반갑습니다 :)
안녕하세용~
음 그게 타입때문 아닌가요??
음.. 전 형식이라고 생각했었어요..
타입 변환을 하면 가능할까요?
혹시 포트폴리오용 사이드 프로젝트 홍보 한번만 해두 될까요?
< /> 는 jsx 문법이라 React.createElement (new jsx transform에서는 _jsx.뭐시기) 로 트랜스파일되고 뒤에껀 그냥 함수 실행입니다!
그럴거같은데요..?
런타임에 에러나는건가요?
/가이드
환영메시지: 새로운 참여자의 입장을 반갑게 맞이해주세요. 인사말과 간단한 알림을 작성할 수 있습니다. 긴 내용은 공지사항을 첨부해보세요. 알림메시지: 1회 알림과 반복알림을 설정할 수 있습니다. 특정 시간에 전하고 싶은 메시지를 작성해보세요. 질문답변: 방장이 질문을 설정하면, 참여자가 채팅방에 ‘/를 입력했을 때 질문리스트에 추가됩니다. 참여자가 ‘/닉네임규칙'을 입력하면 방장이 설정한 답변으로 봇이 응답해요.
네..!
아하 넵! 작동에는 둘다 테스트를 해봤을때는 큰 차이가 없는 것 처럼 보이는데, 리렌더링이나 기타 작동 방법에 있어서 차이가 있을까요?
앗 그렇군요 ㅜ 조용히 사라지겠습니다
음 후자가 잘 작동하나요?
보통 intersection observer 사용할때
넵! 잘 작동합니다!
querySelector 사용하면 Element 타입으로 리턴해줄텐데
memo 먹여보시면 아마 작동 안할거같아요!
어떻게 observe 걸어주시나요
간단한 기능들은 컴포넌트가 아니라 jsx를 리턴하는 함수로서 동작할 거 같네요 :)
안녕하세요~ 🙌 사이드프로젝트를 진행하고 있는 백엔드 개발자 1명과 UX/UI 디자이너 2명입니다. 현재 플레이스토어와 앱스토어에 런칭을 목표로 8주짜리 사이드 프로젝트를 진행하려 합니다. 저희는 동일 전공생 랜덤 매칭 채팅앱을 기획하고 있습니다. 모집 중인 개발자 파트 - 프론트엔드(안드로이드/ios/하이브리드) 1~3명 - 백엔드 1명 이런 분을 찾고 있어요 - 끝까지 프로젝트 진행할 책임력을 가지신 분 - 일주일에 한번 주말에 회의 가능하신 분 (시간은 서로 가능한 시간 합의 후 결정할 예정) 성공적인 프로젝트 진행을 위해 불가피하게 탈주 방지 차 초반에 5만원을 받고, 프로젝트가 끝나면 돌려드릴 예정입니다! 중단에 그만두실 경우 돌려 받으실 수 없다는 점 유의해주세요! 자세한 내용은 하단에 노션 링크를 통해 확인해주세요! 자세한 사항 확인하기 👇 [https://www.notion.so/h2bal/835b3ddb4a8a4f10ac46b373e33cc341] 관심이 있으신 분은 구글폼을 통해 지원해주세요! 최대한 빠른 시일내에 연락드리겠습니다. 어느정도 개발이 가능한지 확인하기 위해 포트폴리오를 받는 점 양해바랍니다! 개발 파트 지원하기 👇 [https://forms.gle/6mpejqHbiaqKVK1f8] 궁금한 사항은 오픈채팅방을 통해 자유롭게 물어봐주세요! 문의사항 물어보기 👇 [https://open.kakao.com/me/h2bal] 프로젝트를 같이 진행하면서 좋은 경험을 쌓고 싶어요 많은 지원 부탁드려요! 🥰
아하 넵! 아직 정확한 이해가 부족해서 보내주신 키워드로 좀 더 찾아봐야겠네요🥲
아 그리고 해당 컴포넌트 안에 훅이 있다면 조건부 렌더링을 했을 때 jsx로 쓰시면 오류 안나는데 ()로 쓰시면 오류 날 거예요 :)
맥북 이용해서 앱스토어에서
카톡이나 다른것들을 다운받았는데
설치하는 동안 오류가 발생했다고 뜨네요
혹시 어떻게 해결해야하는지 아시는 분 계실까요?🥲
재부팅..?
한번 옵저버 쓰는 코드 올려주세요
저는 그냥 element로 잘 됐던거같습니다
제 코드요?
앗 방금 테스트 해봤는데, jsx 로 했을 때도 동일한 에러가 뜨는 것 같습니다!
음 그건 뭔가 실수하신 거 같은데
암튼 jsx로 쓰면 컴포넌트로 인식하고 실행문으로 쓰면 그냥 jsx를 리턴하는 함수로 인식해요! 컴포넌트로 만들길 의도했다면 항상 jsx 로 써야 합니다 :)
넵
제가 질문한건 아닌데..
그냥 궁금하신건가요
아....
그러네요 ㅋㅋㅋㅋㅋ
사진
엘리쌤 목소리너무좋아서
듣디가
좀
로그인 로직 관련해서 여쭤볼게 있습니다!!
현재 새로고침 할때에 로컬스토리지에 저장되어있는 토큰값을 가져와서 서버에 토큰을 header에 담아서 토큰이 유효한지 확인을 하는데, 문제가 listItem들이 있는 페이지가 문제가 생겼는데, listItem 페이지에서 새로고침 시에 토큰이 유효한지 확인을 하는 과정 때문에 listItem에는 헤더에 토큰이 담기지 않아서 에러가 났다가 토큰이 유효한지를 확인 한 후에 header에 토큰이 담기고 listItem으로 재요청시에 성공을 합니다
현재 로직이 이렇게 돌아가고있는데 뭔가 상당히 잘못된거 같습니다...
유효한지 확인하는 로직에 await 붙이고 그다음 리스트 아이템부르는 함수 호출하면 될거같네뇨
답장 감사합니다!! 새로고침시에 토큰이 유효하는지 확인하는 과정 자체는 문제가 없는것인가요!?
구현하기 따라서 달라질거라 그부분은 제가 평가할영역이 아닌거같아요
아하 그렇다면 저 방법이 아닌 다른 방법도 혹시 알 수 있을까요...!
제가 다른방법으로 생각해본것은 일단 로컬에 토큰이 있다면 토큰유효성을 확인하지않고 토큰을 header에 담고 다른 요청이 있을때에 토큰이 유효하지 않으면 에러를 뿜어내니까 login페이지로 가면 될것 같은데
이 방식으로는 문제가 유저 정보에 계정 등급이 있어서
계정 등급은 스토리지에 담으면 조작의 위험성이 있어서 저렇겐 하지 못했습니다
토큰을 헤더에 담고 인가처리는 서버에서 하면 문제있을까뇨?
세션에 있는 토큰을 그냥 바로 헤더에 담고 다른 요청시에 유효성을 확인하신다는 말씀인가요?
네네
아 그렇다면 유저 등급에 대한 정보는 혹시 어떻게 저장하는게 좋을까요
새로고침시에 무조건 유저등급을 파악해서
등급에 따라 레이아웃이 달라져서
무조건 등급을 알아야합니다!
서버에 리퀘스트 보내서 등급 확인한 다음에 레이아웃 보여주면 안되나요?
첫번째 방법대로여!?
next.js 면 getServersideProps 에서 처리하면 깔끔한데 말씀주신 걸 보니 아마 CSR인 거 같고
넵
맞습니다 ㅠ
유저등급을 확인하는 api가 따로 있으면 어떨까요? 다만 그렇다면 맨처음 설계랑 크게 다를바는 없어지겟네요 auth를 매번 호출하느냐 유저등급을 매번 호출하느냐 가 달라지는것일 뿐
넵 맞습니다...!
그럼 일단 최선의 방법은
await으로
이제부턴 취향이겟네요
동기화 시키는 방법이겠네요
그냥 App.tsx에서 const [userInfo, setUserInfo] = useState(); // 또는 리덕스나 context 나 react-query 등등 if (userInfo === undefined) return null; // 아직 유저 정보 못 가져왔으면 빈화면 return …
이런 느낌 생각했습니다!
아하.. 너무 감사드립니다 ㅠㅠ
네네 개인적으로 auth는 auth의 역할을 유저등급은 유저등급의 역할을 가지고 각각 있어야지 의미를 명확하게 가지고 관리할 수 있을것같은데 이건 취향이죵
Auth 토큰안에 모든 유저관련 정보를 담아넣고 auth.user에서 유저에대한 정보를 찾는것도 나쁜방법은 아닌거같아요
스토리지에 담아넣었을시에 정보가 수정될 경우 때문에
못담고 있어서 ㅠㅠ
수정이 있을 매번 받고싶다면 reactQuery 추천해요 주기적 풀링도 해주고 mutation 도 가능 개꿀템
그거 적용해서 써보고있습니다 ㅎㅎ 리액트가 첨이라 진짜 너무 어렵네요
앵귤러가 훨씬 더 쉽네요ㅋㅋㅋㅋ
오..
헉 앵짱...
지금까지 앵귤러만 거의 써봐서ㅋㅋㅋ
근데 지금 하고 계신 고민들은 앵귤러보단
*앵귤러 리액트 차이보단
CSR 프로젝트에서 ajax를 통해 유저 정보를 가져와서 정보에 따라 레이아웃을 어떻게 내려줄까에 대한 제너럴한 고민이지 않나요?
앵귤러도 CSR SPA라 비슷할 거 같은데
넵
그냥
리액트 훅들이
너무많고
이해가잘안돼서 ㅋㅋㅋ
생명주기함수가
더 편한거같아요.,..
아 그냥 앵귤러 리액트에 대한 말씀이셨군요 ㅋㅋㅋㅋ
클래스컴포넌트일땐 그래도 앵귤러랑 DX가 좀 비슷했는데 (ngOnInit -> componentDidMount 등등) 함수컴포넌트로 넘어오면서 훨씬 선언적이고 뭐랄까 rxjs같아진 거 같아요
넵 좋은 훅들이 너무많아서
오히려 뭘써야될지 모르겠는..
그런 고민이시면 useState랑 useEffect만 있다고 생각하시면 될거같습니다
그거 두개면 다 할 수 있어요
너무 많아서 고민이시면 반대로 사고를 제한해보는 것도 좋은 방법일 수 있을 거 같네요!
아하 그럴수도 있겠네요 지금 막 이것저것 덕지덕지 붙어있는 상황이라서
안녕하세요. 이번 주에 처음 기술 면접을 해보는데 정확히 어떤 것을 준비해야 할지 막막하네요… 혹시 여러분의 팁을 전수해주실 수 있나요?
저도 요새 next auth로 로그인 로직 구현중인데요. 저는 권한이 없는 토큰으로 요청할 경우에 401로 리턴되고 이때 axios 인터프리터로 응답을 가로채서 토큰재발급, 재발급된 토큰으로 재요청하는 로직으로 진행했습니다. 새로고침 했을때는 각 페이지별로 getserversideprops에서 처리해도 되는데 각 페이지별로 처리하면 귀찮을듯하여 매번 요청시에 헤더에 로컬스토리지에서 읽어온 토큰을 넣어줍니다.
요거에 대한 답변이었어요
기술적으로 공부하시면 될 거 같아요! 뭐 호이스팅이 뭔지 ref가 뭔지 이벤트루프가 어떻게 동작하는지 html 시맨틱태그가 뭔지 reflow가 뭔지 이런거 질문받으실 거예요 아마
아하 감사합니다!! 이런방법은 생각안해봤는데 한번 고민해봐야겠네요 감사합니다!!
신입에게는 역시 기초지식을 많이 물어보는군요 기술 외적으로 준비해야 할 부분은 어떤 게 있을까요?
일단 면접이니까 말하는 톤이나 시선처리 등등 연습하시면 될 거 같고 혹시나 자기소개나 경력/경험에 대한 질문 나올 수 있으니 이력서에 작성하셨던 플젝들 쭉 돌아보면서 어떤 걸 말할 수 있을지 어떤 걸 배웠었는지 돌이켜보시면 좋을 거 같아요~
태도죠! 뭔가 주눅들지 않고 같이 개발 얘기에 너무 흥미 있고 같이 얘기하는게 재밌다는 ㅋㅋ
맞아요 가령 기술적으로 너무너무 뛰어난데 말투가 너무 축 쳐져있고 말이 느려서 면접보는 동안 면접관들이 졸려서 이 사람이랑은 같이 일 못하겠다 싶어서 탈락시킨 케이스도 있습니다 ㅋㅋㅋ
태도가 생각보다도 더 아주아주 중요한 거 같아요
기술이야 뭐 와서 공부하면 언젠가 느는 거고..
아! 뭘 준비해야 할지 감이 잡히네요~ 감사합니다ㅎㅎ 거울보고 연습을 좀 해야겠어요.
안녕하세요 파일업로더 관련해 질문있습니다. 파일 확장자를 임의로 pdf->xlsx 로 바꾸는 경우를 검증하고 싶습니다. 확장자 변경 전 기존 파일 확장자를 알 수 있는 방법이 있나요?
hyeonguk님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 힙합맨 제이지님 반갑습니다 :)
아! 안녕하세요 :)
어서오세요. ㅎㅎ 이곳은 프론트엔드에 대해서 궁금한것들이 있을때 물어보고 또 함께 대화해보고자 하는 곳입니다. ㅎ 언제든 편하게 글 남겨주세요. ㅎ
네 프론트엔드 4개월 공부생입니다 :) velog 둘러보다 오픈채팅방 추천을 받고 들어왔어요 ! 감사합니다!
파일 헤더에서 pdf만의 바이너리 코드를 읽어본다? 라고 뇌피셜입니다..
랑이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
우와우님이 들어왔습니다.
안녕하세요
질문 해도 될까요?
안녕하세용
네~ 좋아요~
국비로 uiux디자인 수업 5개월짜리를 시작한지 한달이 됐는데, 수업 조금 해보고 나니 코딩쪽을 전문적으로 하고 디자인은 안하는게 좋을거 같다는 판단을 하게 됐어요. 그래서 프론트엔드로 취업을 하다가 후에 백엔드로 갈 생각이에요. 그런데 지금 수업은 코딩을 이제 html css 트랜스폼정도 까지 나갔고 앞으로는 디자인 수업이 좀 많고 자바스크립트는 아주 조금 나갈거 같아요
sp~
네~
인터넷에서 프론트엔드 공고를 보니 자바스트립트 (뷰 리액트) 언어에 대해서 이야기를 하던데, 제가 저 학원과정을 마무리하면 하루에 8시간씩 수업이고 뷰 리엑트 js 많이 부족할거 같아요 학원를 다니면서 독할할지 너무 고민이 되서 경험 있는분들께 여쭤보고 싶어요
수업은 들으만 하신가요? 재밌나요?
코딩이 재미있는데 저는 조금 느린편인거 같아요 그래서 집에 와서 따로 연습을 하는데도 조금 느리구요, 디자인 수업은 후에 필요할지도 잘 모르겠고 흥미도 비교적 낮아요
input file type으로 받았는데 없더라고요 따로ㅠ
본인이 흥미가 없다면 뭘해도 안될거에요~ 흥미를 찾으러가 가야죠. ㅎ 하지만 독학을 하는 것도 한계가 있어요. 속도를 내가 정할 수 있다보니까 왠만한 동기부여가 아니고서는 빨리 가기가 힘들기도 하구요. 학원은 제가 잘 몰라서 추천드리기가 어렵겠지만 독학을 하시겠다면 공부보다는 일단 뭐라도 만들자는 식으로 해보시는 것을 추천합니다. 프론트엔드 -> 백엔드 순으로 가실거라면 간단한 게시판이나 인스타형 피드를백엔드를 중심으로 약간의 프론트를 섞어서 하는 식으로 만들어보는 것을 해보세요
그걸 어떻게 하나요? 라고 한다면 그걸 인터넷에서 찾고 하나씩 붙여보는 것을 연습하는게 곧 개발을 연습하는 것입니다. 대부분의 개발과정이 1) 찾아보고 -> 2) 코드 한줄을 올리고 -> 3) 왜 안되지? 고민하고 -> 3) 찾아보고의 반복작업이니까요
학원은 처음이시니까 흥미위주로 골라보시면 좋을 것 같아요 어차피 학원에서 배우는 것들은 그냥 어떤것들이 있는지 그리고 공부습관과 함께 의지를 붙잡아주는 루틴을 만들기 위한 수단이고 진짜 학습이 되는 것은 본인이 찬아서 한줄 한줄 코드를 만드는데에 있으니까요~
네 답변 감사해요 저도 코딩을 아예 독학하는건 좀 걱정스러워서 학원을 그만두는건 위험하다고 생각을 했어요. 국비여서 코딩 프론트엔드쪽 수업으로 지금 바꾸는것도 아마 불가할거 같아요.. 지금 uxui 과정 들으면서 html css js정도까지 익숫해져서 포폴 만들면 프론트엔드 지원 가능할까요? 뷰 리엑트 원하는 곳들이 좀 있어서 그것도 프엔에 필수 사항일까요?
아뇨 html css js까지는 퍼블롤이고 프엔은 아닙니다
그래서 지금 수업을 그만둬야할까 고민이 커요ㅠㅠ 프론트는 자바 뷰 리엑트라는 언어예요?
자바는 백언어구요
뷰나 리액트는 js라이브러리입니다
자바스크립트용
자바랑 자바스크립트 헷갈리면 안돼여
ux ui 강의 듣는것도 프론트개발자로써 나쁠건없다고 봐요
자꾸 톡이 짧아져서요 ㅎㅎ 어피치니은 제가 지금 다니는 학원이 효율성이 잇다고 생각하세요?ㅜ
html css js로 ui를 그린다 > 퍼블리셔 데이터를 페칭하고 기능을 구현한다 > 프론트엔드
국비는 그 다음이 없나요? 1회권인가요?
ui/ux를 배우는것은 장기적으로 손해볼것은 없는데요
사실 퍼블리싱과 프론트엔드 직무를 구분하는 곳도 있지만 겸하는 곳도 많고 프론트엔드 개발자가 같이 알아야한다고 생각하긴 해서
그 다음이 어떤 이야기세요?
지금 수업으론 프엔은 힘들거같네요
서비스측면에서도 서비스를 이해하고 더좋은 서비스를 만드는것이 가장중요하다고 생각해요
제가 국비 시스템을 잘 몰라서 국비는 1회성인가요?
차근차근 시간 더 들여서 공부하실거면 uiux수업 끝나고 프론트 더 파시면 되는데
지금 교육과정으로는 프엔도 그렇고 백엔드는 더더욱 관련이 없는 것은 맞지만
당장 취업이 급하시면 지금 수업은 부족하지않나싶습니다
그렇다고 프엔만 5개월 배운다고 프엔이 되는것도 아니라서
보통 uiux 퍼블리셔 과정을 5-6개월이에요. 저는 5개월짜리 수강했고 이제 한달이 지나서 너무 고민이 돼요 긴 시간이고 시간 효율성이 생각되어서요
국비교육은 1회성으로 알고있서용~
눈빛 애교 어피치님 말 너무 공감합니다!!!
맞네요
장기적으로 볼떄는 괜찮은 수업이지만
단기적으로 취업에는 부족한것같습ㄴ디ㅏ
아예 프론트쪽으로 가실거고 시간이 아까우시면 드랍하시는걸 추천드립니다
드랍하면 그 국비를 다른 쪽으로 돌릴 수 있는건거죠?
단 css랑 기초js가 어려우시면 프론트는 더 각오하셔야..
그 국비 중간에 중탈하면 패널티 있을 수도 있으니까 잘 찾아보세요
적성을 알고 싶으시다면 학원이 아니라 그냥 한번 인터넷으로 책으로 뒤져가며
일단 게시판 하나를 어떻게든 만들어보세요
그러면 본인 적성을 알게 될지도 몰라요
js는 아직 안들어갔고 css는 좀 헤매고 있어요
애초에 uiux랑 퍼블이랑 묶어서 하는 수업이면 그쪽으로도 별로 깊게 하는 수업은 아닌거같네요
코딩을 처음 배우신분이신가요?
걍 흔한 웹디퍼블 양산형 수업인거같습니다
ㅠㅠ 국비가 인당 300 지원되고 이 수업이 200이어서 코딩 수업 등ㄹㅎㄱ은 어려울거 같아요
화면에 어떤 걸 구현하거나 그려지는 것에 흥미가 있는 거라면 퍼블리셔 직군을 알아보는 것도 괜찮겠지만, 후에 백엔드 직군으로 전향하실 생각이라면 퍼블리싱보다는 js에 좀더 초점을 두셔야할 것 같긴 하네요.
네 코딩 처음이에요 웹디자인 보고 들어갔다가 코딩으로 하고 싶어져서 고민이 많아요
음 백엔드 직군으로 전향...이라고 하니 전향도 좀 이상하긴 한데
저는 일단 진짜 코딩을 하고 싶은건지를 스스로 한번 점검해보시길 바랍니다
음 근데 제가 웹디퍼블 국비수업을 들어봐서 아는데 그게 함정일수 있어요
진짜 코딩을 하고 싶은 거라면 학원이 아니더라도 그냥 하면 되거든요. html도 js도 css도
css까지는 되게 코딩이 재밌고 디자인보다 할만해보여서 퍼블이나 프엔쪽으로 생각을 바꾸는 학생이 많은데
어떤 함정이요 ?
마크업 코딩이랑 프로그래밍언어 코딩이랑 많이 다르기도 해요
정작 파보면 만만치않다는걸 깨닫게 되고 이도 저도 아닌 상태로 수료하는 사람을 많이봤어요
퍼블리싱이 프론트엔드개발자라고 생각하는분들도 꽤 많아요
그 경계를 모호하게 판단하시는 분들이 많더라고요
내가 디자인이 어려워서 바꾸려는건지 진짜 프론트엔드쪽이 적성에 맞는건지 객관적으로 생각하셔야합니다
두번째에요!
국비과정에서 함정에 빠지는 경우가 많아요
일단 css까지는 마크업언어라서 진짜 프론트를 해보신게 아닙니다
코딩을 하면서 어떤 점이 재밌는지 알아보시는 게 좋을 것 같아요. 화면에 구현되는 게 재밌는지(애니메이션, 레이아웃 구현), 데이터를 설계하고 통신하는 등 다루는 게 재밌는지... 음 일단은...! js를 배우시기 전이라면 국비 진도 전에 독학으로라도 미리 js를 좀 해보시는 게 좋을 것 같아요
js로 es6문법까진 파보신 다음에 진짜 코딩이 맞나 생각해보시는걸 추천드립니다
맞아요 재밌어보인다랑 본인이 재밌는거랑은 다른거니까요
css 등 마크업을 할 때와 js를 다룰 때 차이와 어느쪽이 더 재밌고 자신에게 맞는지 느껴지는 부분이 있을 거에요. 저도 사실 아직은 마크업이 더 맞는 쪽이긴 하구요.
눈에 보이는 화면을 만지는것보다 배열이랑 객체를 다루는게 재밌어야 프론트에 맞는거에요
코딩이 재밌다의 기준이 밤새고 피곤해도 계속 하게 된다 일까요.?
그건 사람마다 다르죠~
일단 전 밤새고 피곤해도 계속 합니다
저두용
재밌다의 기준은 사바사지만 일단 좀 깊게 파보신 다음에 결정해야한다고 생각합니다
저도용
재미있어서 피곤하지도않고 시간가는줄모르는것같아요
오오~ 그정도면! ㅋㅋㅋ 일단 합격 ㅋ
뭐하면서 밤을 새고 있나요? +_+
꼭그렇지는 않아서요ㅜ 졸리면 졸려요ㅜ
저도 밤새고 피곤하면 자러 가지만🤣 배우시면서 어떤 부분에서 재미를 느끼실까요?
졸리면 자야죠ㅋ
ㅋㅋㅋㅋ졸리면 자야죠
휴 다행..
일단 그렇게 국비에서 낚인 사람들이 js입문하자말자 벽을 느끼는 경우가 많아서
도은이 :)님이 나갔습니다.
일단 js부터 공부해보세요
개발 안맞는 사람들은 만들고 결과를 보는 과정에서 재미를 느끼지 않고
만드는 과정을 숙제고 해결해야 되는 문제고 얼른 치워버리고 싶다고만 생각하더라구요
그러면 발전이 없죠
코드도 개떡같아지고..
저는 해결되지 않던 로직을 고민해서 해결되거나 완성된 화면을 보고 재미를 느껴요
기능하나 만들려고 하는데 막히면 씨게 현타오는데 또 그걸 하고있고.. 내가열심히 해서 해내면 기분이좋고
음 해결해내는데 희열을 느끼는건가봐요
아직 개린이라 하나하나 해낸거에 좋아하고있습니장
제 개인적으로는 그러합니당
js를 공부해봐야겠어요
안녕하세요!! 저도 밤중에 여쭤볼게있어요! 프론트 취준하면서 코테준비를 하려고 알고리즘 문제를 연습하려고하는데 초보자가 학습할만한 추천해주실 사이트가 있을까요 ~~?
맞아요 그게 최우선일거같아요
답변들 정말 감사합니다!
네 css까진 마크업언어고 js부터가 프로그래밍언어라 좀 다른 세계일겁니다
프로그래머스, 백준 !
저두 프로그래머스 백준을 추천받았는데 두 사이트 같이 보면되나요~? 둘중에 고민이였거든요ㅠㅜ
코테를 자바스크립트로 하시는거면 백준말고 프로그래머스
문제는 백준이 더 많아요
파이썬으로 코테한다 백준 프로그래머스
근데 js 로하실거면 프로그래머스라고 말하려했느데 이미 답주셨네요 ㅎㅎ
유튜브에 프론트엔드라고 쳐봐도 다 html,css,js 강의부터 알려주는데, 전 지금 퍼블리셔라서 이것들은 다 알고있거든요. 프론트엔드로 전향하려고하는데 뭘해야하죠...? 리액트랑 next.js깔짝할순있어요! rest api 받아와서 화면에 뿌리는 것도 해봤구용...
아 ㅎㅎ js로 할 예정이라 프로그래머스 봐야겠네요 !! 🙃🙃 감사합니당
리액트를 더 딥하게 파보시는건 어떨까요
FE, BE 등 어떤 방향성을 선택할지 고민될 때 저는 기본 CS를 공부하면서 어디로 가야할지 충분히 고민하고 FE로 결정했어요. 먼저 프로그래밍쪽 방향이 나와 맞는지 고민해보았고 맞다면 어떤 프로그래밍 색깔이 나와 맞는지 고민한 후에 FE를 선택했습니다
게시판무새가 되고 있는 것 같지만 next든 뭐든 이용해서 백엔드도 뭐든 이용해서 로그인을 이용한 게시판 서비스 하나만 꼭 만들어보세요.
strapi랑 next.js 이용해서 게시판 구현한 것도 게시판서비스로 쳐주나요...?
네! 프론트엔드라면 더더욱 잘하셨습니다. ㅋ
사진
이번에 새로 하는 프로젝트인데 재미있어보이나요? ㅎㅎ
오오
왛
너무요!
오~ 등산 서비스인가요? ㅋ
출시되면 알려주세요 쓸래요 ㅋㅋㅋㅋㅋㅋ
등산 관련이 하나도 없어요 ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋ
도메인은 흥미롭네요ㅋ
등산로그면 어떤것을 보여주나요??
관악산이 쉬움이라니
허들이 높은 서비스군요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
일단 베이스는 등산 난이도별 (상, 중, 하) 코스 제공 + 등산 시설이나 주차장 등 등산 정보 제공 서비스입니당
rn으로 하신건가요??
오 신박하네용
이제 개발 시작단계고 next랑 pwa에요!
pwa궁금하네요!
react입니당
게시판 컨텐츠만 등산으로 바꾸면 저렇게 서비스가 되는거라서 일단 데이터 기록 CRUD하는 앱이든 서비스든 만들어 보는 것을 추천드리고 그 뒤는 장바구니나 키오스크류와 같이 인터렉션에 의해 컨텐츠가 바뀌면서 계산도 함께 해야하는 것들을 한번 해보면 좋아요~ 그 뒤로는 좀 갈리는데 1) 백엔드와 쫀쫀하게 가는 길을 걷거나 2) 에디터나 UI 컴포너트처럼 브라우저 API쪽을 파거나 3) 프레임워크 라이브러리 처럼 devops쪽을 파거나 등등 그때는 회사에 맞춰서 deep하게 파시면 될거에요
로그인 + 게시판 + 키오스크류 이 조합의 베리에이션만으로도 할 수 있는게 무궁무진해서요.. + 약간의 에디터 까지 그러면 왠만한 백오피스는 만들 수 있게 될테고 여기까지가 프엔 기본기라고 생각합니다. 이걸 하기 위한 프레임워크나 방식은 뭘로 해도 상관없어요
나중에 잘 만들게 되면 꼭 공유해주세요. ㅎ 궁금하고 기대되네요 ㅎ
그렇군요 감사합니다!
https://www.youtube.com/watch?v=hZBP_fyRn4s 개발과 관련없이 직장생활에서 매우 좋은 영상이고, 많은 생각을 하게 되는 영상이라서 공유합니다.
혹시 아이맥 쓰고 계신 분들 계신가요~?! 게임은 전혀 안해서 인터넷 서핑, 개발용으로만 쓸 것 같은데 윈도우 데스크탑 사는 것보다 추천하시나요?! 참고로 아이폰, 맥북 사용중입니다!
가격 부담 없으시면 무조건 아이맥이요!
오홍 감사합니다! 혹시 추천하는 사양 있으신가요???
종류가 넘 많아서,,, 어렵네요ㅎ
맥북 사양이 어떻게 되시나요?
맥북은 그냥 깡통 에어13인치 쓰고 있어요!
개발용 메인컴인지 서핑용 서브컴인지에 따라 다를 거 같아요
근데 외주도 2개 정도 하고 개인 프로젝트도
하니까
화면도 작고
아하 m1이요? 램은 몇기가인가요?
앙ㅖ ㄱㅊ 기업ㄱ
아이고
아예 추가 없는 깡통모델입니당
8기가에 256이요!
아이맥 24 m1에 깡통에 32인치 모니터 물고 사용중인데
램은 16으로 하세요..
그래서 아이맥을 사면 개발용 메인컴으로 쓸 듯 하네요!!
버벅입니다
m1 + 16기가 가 제일 무난할 거 같습니다!
ㅠㅠ 맥미니 깡통 에어 깡통 다 써봤는데 아이맥 깡통만 버벅거리는게.. 자체 디스플레이가 있어서 그런가봐요
암튼 아이맥 좋아요!!
오홍 개발외에는 사실 쓰는게 없으니 용량은 가장 낮은거로
써도 되겠죠?
네 램만 16으로 해도 충분할 것 같숩니다
그건 블럭님이 그동안 쓰셨던 컴퓨터의 저장공간을 확인해보시면
이모티콘 감사합니다
막 많이 안 깔면 256기가면 불안불안해도 충분하긴 하죠!
아이맥 vs 맥미니 + 울트라 파인 둘중 하나 고민하셔도 ㅎㅎ
에어 1년 넘게 썼는데 아직 100기가 이상 남아서 용량은 말씀해주신 것 처럼 256으로 가도 충분할 것 같네용 감사합니다
울트라파인 혼자 아이맥가격 아닌가요..? ㅋㅋㅋㅋㅋㅋ
24인치 기준으로 ㅎㅎ;
여쭤보길 잘햇어여ㅎㅎ
근데 저도 아이맥 안 쓰고 맥스튜디오 + 울트라기어 쓰고 있긴 합니다
ㅋㅋㅋㅋㅋㅋㅋㅋ
뭐가 되게 많네요,, 맥미니랑 맥스튜디오 사실 처음 들어봐서
유튜브에서 좀 찾아봐야겠어요
https://attardi.org/why-we-memo-all-the-things/ 이런글도 잇군요...흠
혹시 next.js github action 에서 .env가 등록이 안되는 문제 겪어보신 분 있나요 ?ㅠ
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
마지막 마스크 비유 진짜 별로네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋ 그쵸
메모이징 논쟁은 끝이없는 것 같아요....
근데 한번쯤 고민은 해볼 한 포인트인 거 같아요 진짜 모든 컴포넌트에 memo 모든 함수에 useCallback 모든 값에 useMemo를 박는 세상은 어떨지
재밌는 아티클 감사합니다 👍👍
님들 프론트엔드 코딩테스트언어 저 c++로 250문제정도 풀었는데 js로 바꾸어야될까요..ㅜ
바꾸면 좋죠
저랑 같네요 ㅎㅎ 프론트엔드는 js만 보는 곳도 생각보다 많더라구요
그렇지만 저는 c++로 그동안 한 것들은 그대로 남아있으니 오히려 도움이 되었어요
c++ 로 하셨던게 js로 코테준비하는것에 도움이 되었다는 말씀이신가용?
혹시 리트코드푸시는분 계신가요?
하... 인턴쉽 취소되었네요...^^...
??
삭제된 메시지입니다.
사진
삭제된 메시지입니다.
교수님따라서 열심히 방학에도 학교나가서 프로젝트를 참여한건데 사유 인정되면 현장실무 교육을 해당 인턴십 포함하면 20학점 밖에 안되는데
함께 공고한건 맞으나 해당 사업은 인정되지 않는단 어처구니 없는 이유 단 하나만으로
이주전에 혹시몰라 해당 교직원과 상담까지 해서 괜찮다는 허락을 받았는데
기업으로부터 합격 2주 이후에 다짜곶짜 수강신청 바로 전날 인턴십 참여가 불가하단 문자 한통을 받았습니다
합격 이후 교내 연구실에서 일하는 일과 기숙사도 모두 그만두고 기숙사까지 퇴관 하고 현재 강남으로 출퇴근 하기 위해 집이 멀어 대출까지 알아보며 자취방까지 구했는데
내가 바보같이 안일했던건가 싶어 답답해 평소에 입에 대지도 않는 소주도 네 병이나 마셨네요
정말 제가 다 화나네요..
열심히 준비하시는거 항상 톡방에서 봤는데 일이 이렇게 되네요..
이 인턴십 위해서 전 학기부터 해당 사업 알아보고 실무 경험 쌓고자 연합동아리도 하고 주변 현직자 분들에게 이력서나 자소서 첨삭도 염치없이 부탁해왔는데 이런 일이 저에게 일어날 줄 몰랐습니다
ㄷㄷ
일처리하는 쪽이 너무 무책임한 것 같은데
사전 공지도 없이 하루 전에 통보는 너무하네요
그러게요 뭐라 위로의 말씀 드려야할지 모르겠어요
혹시 책임을 물을 수 있는 곳은 없나요?
현재 기업은 해당 사항을 모르는 상태이고
회사랑 조율해서 ict사업이 아닌 그냥 인턴으로 참여하는 방법같이 다른 방법을 한번 조율해보는건 어떨까요
제가 구제 신청을 넣어서 내일 교내에서 회의를 가진다고 했지만 결과적으로 교직원에게 학칙상 불가하단 이유로 네번이나 해당 인턴십을 수행 불가하단 문자를 받았습니다..
음 이런건 어디에다 물어봐야 할지 잘 모르겠는데 우선 할 수 있는건
현재 상황을 정리해보고 관련해서 주고 받은 대화 내용이나 자료 등을 정리해서
관계자나 전문가한테 물어보는게 제일 낫긴 할텐데
근데 그 관계자들이 회의적인 상황 같아서 어렵네요
삭제된 메시지입니다.
회사 입장에서도 최종 선발 단계 이후라 제가 그만두면 인턴십 대체 인원을 뽑지도 못하는 상황이라 어떻게 메일을 보낼지도 답답하네요
특정할 수 있는 도움 받을 수 있는 곳은 없나요?
유일한 희망은 지도교수님이 학과장님이셔서
내일 학교 방문 후 제 상황을 말씀드리는 것과
정규직 전환 가능한 인턴이라
일주일 전에 상담받은 교내 일자리 센터 선생님과 상담하는게 전부입니다..
일단 할 수 있는 도움 받을 수 있는건 다 활용해 봐야겠네요…
센터 선생님께도 비슷한 선례 같은게 있는지 여쭤보고 있다면 도움이 될 것 같은데
네네 ㅜㅜ 일단 도움 받을 수 있는 부분에선 최선을 다해봐야겠지만...
만약 인턴쉽이 취소되게 되면... 어떨 수 없지만 다시 취업준비를 해야되겠네요..
그동안 열심히 준비해오신거 생각해서 다들 뜻모아서 잘 도와주셨으면 좋겠네요 학칙이라는 말로 된다 안된다 결론내는것보단 지금같은 상황을 위한 대비책 같은게 있음 좋겠다고 생각드네요…
넵…저도 잘 해결됐으면 좋겠네요
감사합니다...
일방적으로 통보한 거는 뭔가 문제라고 생각하구요 어떻게 도움 받을 구석이 있을 거라고 생각합니다
너무 뻔한 말이지만 일단 지금 최선으로 할 수 있는 것부터 찾아보시는게 좋을 것 같아요
주변 지인들에게 이미 인턴십 합격햇다고 동네방네 소문댔는게 허허..
이미 안되는 쪽으로 고려하고 있고... 정말 억울하고 답답하지만 하나님이 더 좋은 기회를 위해 고난을 주셨다 생각하고
상반기 준비를 위해 공부하는 수 밖에 없겠네요...
찡얼거리는 소리 들어주셔서 여러분 모두 감사합니다ㅜㅜ
(끄덕끄덕) 상심이 길어질수록 헤어나오기 힘들수 있어요
아닙니다 모두 굿밤되세용
이모티콘
넵 열심히 하셨는데 잘 해결됐음 좋겠네요
힘내세요.. 좋은쪽으로 잘해결되셨으면좋겠네요
감사합니다... 정말 울고싶고 지금까지 노력한 모든게 무너져내렸지만 이럴수록 더 노력해서 단단해져야겠네요... ㅜㅜ
지금 당장은 힘드시겠지만 위기를 잘극복하시면 더 단단해지고 더 좋은 기회가 오실겁니다
지금 어떤말도 위로가 안될 수 있지만... 항상 열심히 하시는거 보면 혹시나 이번 기회가 아니더라도 뭐든 잘 해내실 것 같습니다 내일 상담 잘 풀리길 바랄게요 🙏
멋집니다 허브님은 응원하는 팬이에요 ㅎㅎ
이인송님이 나갔습니다.
내가 들인 공만큼 결과가 안 나오는 것 그리고 그게 내가 아니라 외부 환경에 의해서 그렇게 될때 와르르 거리는 마음 충분히 이해가 됩니다. 그래도 할 수 있는 것들 담담하게 잘 찾아서 할 수 있길 바라며 그간의 과정은 허브님께 계속 남아 있을 거에요. 인턴쉽이라고는 하나 한번 검증을 받은것이니만큼 다른 기회에서도 충분히 그 기회를 잡으실 역랑을 갖췄으리라 생각합니다. 좋은 방향으로 더 나은 방식으로 풀리기를 바래요~
안녕하세요 혹시 eBook 구매할 수 있는 yes24, 알라딘, 교보문고 등 다양한 채널이 늘어나고 있는거 같은데 보통 어떤 플랫폼을 이용하시는지 여쭤봐도 될까요?
교보문고요
교보문고에 없는 책이면 알라딘 가서 보는 거 같아요!
아하 감사합니다!
전 반대로
알라딘에 없으면 교보문고 또는 다른 곳 갑니다..
하하
인터파크
도 가끔봅니다
https://ebook.insightbook.co.kr 태블릿 있으시면 강추합니당
책 질도 좋구 PDF로 줘서 읽거나 필기하기도 좋아요
22 저두요
오 인사이트는 몰랐네요 감사합니다!
단점은 책 가짓수가 아직 적다는 점이요…
넵 ㅎㅎ 여러 플랫폼 써봤는데 제일 만족스럽네용
전 옛날 사람이라 그런지 왜 이렇게
ebook이
안 읽히죠..
밀리의서재도..
저도 밀리의서재로 이북 한창 읽다가 결국 종이책으로 다시 넘어온 ㅋㅋ
ㅋㅋㅋ 저두요 종이책 펴고 연필 들고 읽는게 제일 잘 읽히더라구요
킨더ebook
😭
같이 공부했던 여자분 중에
아이패드랑 맥북이랑 다 들고 다니시는 분 게셨는디
데
엄청 잘 쓰시더라구요
패드로 ebook 켜놓고 필기하면서 맥북으로 코딩하고
불 뿜는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 불 뿜는 튜브님 반갑습니다. :)
안녕하세요!
어서오세요~~ 반갑습니다. 이곳은 프론트엔드에 대해서 궁금한 것들을 물어보고 아는 것은 대답해보면서 함께 성장해나가고자 하는 공간입니다. ㅎ 편하게 질문하고 편하게 관심사를 가져와 나눠보세요~
eslint 설정 너무 안되고
오류 너무 많이나서 피했었는데
잘 동작하니까
ㅅ세세ㅔㅅ상 이렇게 편할 수가 없군요
텍스트만 봐도 많이 편하신게 느껴져요 ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
축하드립니다. 일단 한번 설정의 산을 넘으면 다음부터는 진짜 편하죠 ㅎ
저희도 프로젝트 어느정도 마무리짓고 eslint 적용했었는데… 5000개 정도의 에러가 났었는데 해결하니 천국…
와!! 5000개요? ㅋ
ㄷㄷ
ㅋㅋㅋㅋㅋㅋㅋㅋ그거 보고 다같이 '아… 우리 정말 돌아가게만 개발했네?' 라고 순간 다들 똑같이 말했죠…
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
정말 뿌듯했겠네요!
저도 한 700정도 였는데 ㅋ
가끔.. 다른 프로젝트 헬프 들어갔을때 vscode 열자마자 문제탭 수십줄이면 한숨부터... ㅜ.ㅜ
ㅋㅋㅋ
그래도 약간 청소하는 기분이 나서 조금씩 없애면 뿌듯하더라구요 ㅎ
처음에 vue 쓰다가 react 순으로 공부해보신 분 있으신으신가요!!
프론트개발공부 첨한게 뷰였다가 생태계보고 리액트로 넘어왔어요
전 리액트입문했다가 뷰쓰고있어요!
회사스택때문에용
전 개인적으로 vue가 훨씬 편한것 같네여!ㅜㅜ 다들 퇴근하시고 공부하시죠??!?
저도 회사 스택때문에 nuxt사용하다가 최근 react공부하고 있어요
그럼요 공부는 숨쉬듯이 하고 있죠. ㅋ
숨쉬듯이 ㅋㅋㅋㅋㅋㅋㅋ ㅠㅠ
대부분 나중에 나온 프레임워크들이 기존것들 보다 더 쉽게 나오니 vue가 react보다 편하고 쉬운 것은 맞다고 생각해요
제가 처음에 js를 10개월 공부하고 vue를 5개월 공부하고 이제막 react 공부중인데 잘하고 있는게 맞는건가요 ㅠㅠ,,/??
react는 편해서 1등이 아니라 JSX문법이 워낙 단순하다보니 외부 생태계에서 지원해주기가 편해서 ts도 제일 빨리 지원했고 lint도 IDE도 백엔드 프레임워크도 그렇고
생태계크기가 넘사다 보니 react가 짱먹었지 react 자체만으로는 안편한건 사실입니다. ㅋ
스벨트 사랑해요~~
혹시 가고 싶은 회사가 있다면 그 회사에 공고에서 사용하고 있는 기술 스택 위주로 배우시면 좋죠 취업이 목적이라면
넵~!
리액트 뷰 둘다 만남을 가졌었지만.. 스벨트와 사랑에 빠지게 되었습니다
개인적으로 취업 준비 중이시라면 리액트로 프로젝트 한두개 정도는 하는 게 유리하다고 생각해요! 어차피 웬만한 회사가면 리액트 하게 되니까 미리 한다고 생각하셔도 되지 않을까 싶습니다. ㅎㅎ 어차피 두 가지가 몇 가지 문법은 다르지만 큰 틀은 비슷해요~!
저도요 ㅋㅋㅋ
스벨트킷 사랑해요~
다양한 프레임워크를 해보다 보면 뭔가 깨달음을 얻을 수 있습니다. 프레임워크의 본질은 다르지 않거든요. 그러면 프레임워크가 아니라 하나의 도구로 볼 수 있구요
그러면 자연스레 뭘 해도 그냥 잘 쓸 수 있는 사람이 되는거라서 회사에서 주 프레임워크가 아니라 타 프레임워크 경력이 많은 사람들도 이 사람이 잘한다 싶으면 뽑을 수 있는 것도 어차피 그 사람 짬바면 다른 것을 해도 잘할거라는 믿음이 있어서 그렇죠.ㅎ
특정 프레임워크가 아니라 두루두루 하고 있다면 뭔가 공톤점과 차이점과 본질등 조금 더 다른 시각으로 접근을 하시게 되면 react든 vue든 svelte든 서로의 방식을 좀 가져와서 더 좋은 코드를 만들 수 있을 거에요
혹시 제가 생각하는 그 워니님이 맞으실까요!?
네맞습니다
근데 걱정되는게 회사에서 일이 너무 없을땐,, 다들 어떻게 하셨나요?? 저는 일없으면 무조건 공부를 하긴하지만.. 공부가 답이겟죠!?
이모티콘 꺄 워니님!
오 아주 좋은 말씀 감사합니다 👍
이모티콘
저 왜이렇게 떨리죠?!ㅋㅋㅋ
그럴때는 다른 일없는 사람(!)들을 찾아서 사프나 스터디를 했습니다. ㅋ
스터디 부럽네요.. 일이없으면 눈치보여서 뭐든 만들어서 해요 ㅋㅋㅋ
제가 2개월째 공부중입니다..
앜ㅋㅋㅋ 일이 들어오면 그르케 기쁩니다,,
이직준비하고 이력서썼어요~!
저도 하반기 준비중입니다! ㅠㅠ리액트뿌쎠,,
화이팅입니다!! ㅋ
혹시 자바스크립트 cloneNode(true) 매서드로 객체 복사하는거 사용해보신 분 있으신가요?
뿌셔 뿌셔!
저요~
엇 .. 지금 써보고있는데, 안에있는 자식 요소들도 복사가되는거잖아요? 일단 안에있는 a태그도 개발자도구로 보면 복사는 되었는데 a태그 안의 텍스트가 화면에 뜨질 않아서..
아, 복사된 태그에 기존있던 클릭이벤트도 안먹힙니다ㅜ
며칠 걸쳐서 그동안 작성한 코드 보니까 자체 개선 할게 많아서 그거로 시간 때운거같네요
사실 대부분의 올바르게 일하고 있는 회사들은 기술부채가 있는지라 일 없을 댄 그거 상환하고 있으면 되는 거 같아요
b2c 회사를 계속 다니다가 이제는 서비스가 너무 싫어져서 .. b2b를 하는 회사로 이직을 하고싶은데.. 혹시 이런경우도 있으신가요 ㅎ
저는 반대로 b2b왔는데 너무 재미가 없습니다 ㅠㅠ
cloneNode 는 인라인리스너만 복사하구 addEventListener로 추가한 이벤트는 복사하지 않습니당
저도..
일단 저는 고객들 피드백이 너무 심적으로 부담되더라구요 ㅠ
아 이제야 뭔가 알 것 같네요......ㅋ......아
b2b라서 온프라미스 환경때문에 일이 더뎌지고 고객들 피드백이 오면 직접 출동해야합니다..
그리고 고객이 파워갑이라 해달라는거 다해줘야해서 SI아닌데 SI같은 느낌도 들고
b2c 서비스가 싫어진 이유가 무엇인가요?
자바스크립트 코딩하실 때 다들 중괄호 사용 or 생략 중에서 어떤 스타일을 선호하시나요? ex) if 문 예시 1. if (!data) return; 2. if (!data) { return; }
생략을 더 좋아합니다
2 사용합니다
전 1번인데 회사는 2번이네요
저는 케바케요~
2가 가독성이 좋은거같습니다
케바케입니다~
정답은 사수에게 달렸습니다
리턴쪽이 길어서 포매팅했을 때 2줄 되는 경우에는
괄호를 치고 한줄 모두 담을 수 있으면 생략하는 편입니당
길어질 여지가 보이면 2번 예외처리 느낌이면 1번 선호합니다
저는 처음에 1번 사용했었는데 이게 리턴되는 곳은 확실히 보여주는게 나중에 코드를 다시 볼때 중요하더라구요 그래서 2번 끕니다
들어주신 예시 기준으로면 1번이겠네요!
씁니다
아하 각자 다 다르시군요 감사합니당 저는 깔끔하게 보이는 것도 좋아하지만 항상 경계를 명확하게 나누는걸 좀 더 선호해서 중괄호를 항상 사용했거든요ㅎㅎ
사진
이런 글들을 좀 많이봐서 그런지
취향 차이인 거 같아요! 사실 prettier 만 써도 indent 가 다르기 때문에 저런 실수를 할 수가 없어서
저는 머리로는 중괄호 쓰는게 좋다고 생각하면서도 안 쓰는 게 깔끔해보여서 안 쓰고 있네요 ㅋㅋㅋㅋ
ㅎㅎ감사합니다. 회사 코드라면 이런 코딩 스타일같은건 통합하는게 좋을까요?
네 그렇죠 이런 규칙은 문서화해놓으면 도움이 많이 됩니다!
기존에 회사 코드들이 전부 중괄호를 사용하는 스타일이었는데, 얼마전에 새로 오신 분이 짜신 코드를 봤는데 중괄호가 생략된 코드들이 되게 많았거든요.. 그래서 왠지 모르게 좀 불편한 느낌이..ㅎㅎ
문서화도 좋지만 해당케이스 적용 가능한 린트룰 있다면
그걸 적용하는게 더 좋다고 생각해요
린트 있어요! 적용하시는 거 추천드려요
오 린트 규칙이 있군요ㅋㅋ 감사합니다. 얘기해보고 적용해볼게요
고객 voc들어오면 fe특성상 바로 눈에 보이기때문에 나 때문에 서비스의 이미지가 (유저 경험이) 안좋아진다는 부담감이 너무 큰 것 같아요.. 만약에 이런게 밤 늦게 터진다거나 주말에 터지면.. 아무것도 못하겠더라구요 잠도 안오고 ㅠ ㅋㅋ
좋은 말씀 해주셔서 감사합니다 ㅜㅜ 결과적으로 지도교수님, 학과장님, 학생처장님 세분께서 함께 도와주셔서 이번에 인턴쉽 할 수 있게 되었습니다!!!! ㅎㅎㅎㅎ
오늘 느낀 점은.... 행실을 바르게... 살자ㅜㅜ
축하드립니다~
다행이네요 진짜ㅠㅠ
허브님 어린나이에 열심히 사는 모습 존경합니다
정말 다행이네요 ㅠㅠ
아하 그렇군요.. 그런게 프론트엔드의 부담스러운 부분이긴 하죠.
뭐 그런건 b2b도 마찬가지겠지만.. ㅋㅋㅋ
어피치님 회사에 프론트엔드 개발자가 몇명이신가요?
3명입니다 ㅎ
제가 제일 연차가높아서 뭔가가 터지면.. 감당해야하는 부분이 가장 많더라구요
책임을 받는 자리에 계시군요
축하드립니당!!
제 개인적인 편견이긴 합니다 ㅎㅎ 관심 가주셔서 감사해요
그냥 답답해서 혼자 주절주절 해봤어요 ㅎㅎ
ㅋㅋ아닙니다. 같은 프론트엔드 개발자로 공감이 갑니다. 잘 극복해내시길 응원합니다 👍🏻
github pages로 블로그 하시는 분들은 jekyll-theme도 많이 사용하시나요?!
그거 완전 국룰테마 ㅎ
다들 코드를 처음 받았을때 분석,파악을 어떻게 하시나요..? 입사하고 프론트 프로젝트 클론을 받았는데 방대한 양에 압도돼서 뭐부터 시작해야할지 모르겠네요 ㅠㅠ
앗 그런가요? ㅋㅋ 아 허브님 다행이에요 ㅠ 축하드립니다!
jekyll-theme 좀 봤는데 많이들 사용하시는 테마는 뭔가 안보여서.. 흠 아니면 게츠비를 쓰시는건지
저같은경우는 페이지 하나하나 직접 보면서 해당 코드가 구현 어떻게 되어있나 간단히 구조정도는 파악하는 편이에요
바로 실전 들어가서 부딪히면서 파악합니다!
코딩 초고수가 되고싶어요
같이 되어 보싲 ㅛㅎ
우아 저도
어떤걸 하면 코딩 초고수가 되는걸까요?
노오력이죠
정확하고 신속하게
사진
이게 생각나네요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
오늘님이 나갔습니다.
축하합니다!! 역시 정의는 승리하는 법이네요 !!
저는 ICT 인턴 3곳 다떨어졌는데..ㅜ 결과적으로 붙으셔서 축하드립니다. 솔직히 쉽게 붙을줄 알았는데 역시 현실은 다르더군요..
와 정말 잘됐어요 ㅎㅎㅎㅎ
brew 설치시 혹시 다음에러 만나신 분 있으실까요? 여태 한번도 없었는데 brew 설치명령어 입력하면 다음과 같이 뜨네요 curl: (35) error:02FFF03C:system library:func(4095):Operation timed out
const 함수 =(파라미터)=> (파라미터)=> { return …} 이 형태는 뭐라고 검색해야 알아볼수있을까요??
arrow function 요?
()=> ()=> 이게 두번들어가는거요!
화살표 중첩 함수
라고 하면 될것같네여
arrow currying
감사합니다!!!
나나난님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아롱님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 나나난님~ 아롱님 반갑습니다 어서오세요 :)
아롱님이 나갔습니다.
pepper님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
스티븐님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
pepper님 스티븐님~ 반갑습니다 :)
안녕하세요 :)
어서오세요~ 이곳은 프론트엔드에 대해서 물어보고 생각을 함께 나누고 아는 것은 대답해주면서 함께 성장하고자 하는 곳입니다~ 뭐든 편하게 글 남겨주세요 :)
안녕하세요~
어서오세요!! 환영합니다 잘 부탁드려요 ㅎ
밀린 카톡을 어제 새벽에 정독하다가 요 부분에서 궁금한게 생겨서 글 남겨봐요. 1. 프론트로 일하다가 백엔드로 전향하고 싶은 분들이 이 방에 좀 있으신지 2. 백엔드로 전향하려는 이유가 무엇인지
완전 전향은 아니더라도 백엔드로도 일해보고싶기는 해요
경험에 해옴에 따라 관점이 바뀌지 않을까 싶어요. 저는 프론트했다가 서버관리직했다가 다시 프론트로 왔어요 ㅎ
개발도 완전 내려놨다가 다시 개발하려니 머리가 아프긴하지만 ㅎㅎ
현재 프론트로 일하고 계신가요?
안녕하세요!!!ㅎㅎㅎ
두개 다 겪어본 다음에 더 잘맞는 거 하나로 파고들고 싶다는 생각은 있어요
넵 프론트 신입개발자입니다 인턴포함하면 경력은 이제 10달쯤 되었어요
그렇군요 답변 감사드려요!
저는 백엔드하다가
프론트.. 맡게 되었는데
궁금한게있는데요
제가 웹디자인공부를 하면서 ㅠㅠ
html css 자바스크립ㅇ
안외워지는데ㅠㅠ 어떤방법이있을가ㅛ
ㅠㅠ
너무힘ㄷ네요 안외워지니
외울필요가있나요
계속 하시는 방법밖에 없어요
직접 사용하는게 베스트일 껏 같습니다. 공부에는 왕도가 없다고 생각해요!
외워서 하는 게 아니라 해서 외워지는거죠
필요할때마다 어떤걸 사용해야할까 라는 걸 익숙해지세요
그리고 키워야 한다면 서칭하는 능력이 중요하다고 생각해요.
하면서 잘 잊어버리는것들 블로그에 정리하면 기억에 잘 남더라구요 저는
코딩 공부를 하나하나 외우는 식으로 접근하면 금방 지치실거에요 외워서 하는게 아니라 하다보니 외워지는거죠 10년차 시니어들도 생소한 메소드들은 검색해서 씁니다 똑같아요 ㅋㅋㅋ
어떤게 있다~ 정도만 머릿속에 남겨두면 검색이 다 해결해줄거에요
삭제된 메시지입니다.
최근에 본 당근마켓 기술블로그 글인데 분명 프론트엔드 글임에도 여기서 설명하는 내용이 이해가 90프로 이상이 안가더라구요.. 관련 내용을 학습하려면 어떤 키워드로 접근해야할까요?
두번째 글은 클라우드 환경에서 배포해본 경험이 있으시면 좀 더 쉽게 읽으실 수 있을것 같네요
모르는 단어를 검색하고 거기서 또 모르는게있으면 검색하는 식으로 파고 들어가다가 나의 뇌가 여기까진 이해못할거같다 싶으면 스탑하고 여태본거 정리하면 좋아요. 스탑한 부분은 나중에 더 성장하고 봐도 되구요
두글 다 대략적으로 읽어보니 코드 레벨의 키워드들이라기 보다는 인프라 영역에 가까워서 최근 클라우드 리소스들을 어떻게 사용하고 있는지에 대해 찾아보시면 조금 수월하게 읽을 수 있을 것같아요
프론트엔드 관련인건 맞는데 DevOps 에 좀더 가까운 내용이네요
글도 애초에 배포하기여서.. 그런것같네용
오 넵넵 말씀해주신 분들 모두 감사합니다
혹시 그리드 써보신 분계실까요? 궁금한게 그리드로 만들어놓고 안에 내용물을 데이터 받아서 그 갯수 만큼 map돌리면서 동적으로 해줄 수가 있나요?
grid-template-row를 동적으로 주고 싶은데 그게 가능한지 궁금하네요
컴포넌트에 인라인으로 style={}안에 동적으로 넣으면 되지않을까요
<Component style={{grid-template-row:`${Array.length}`}}/> 뭐 이런식으로..
저건 map밖에서 부모컴포넌트에 줘야겠네요
부모 컴포넌트에 첫세팅할때 css에서 template row ,colum갯수를 이미 정하지 않나요?
인라인으로 style을 먹이면 css파일보다 우선순위가 높아집니다
인라인으로 동적으로 넣을거면 css파일에서 안정해도 되고요
styled component쓰시면 props로 넘겨도 될거같네여
grid-auto-rows나 grid-auto-columns를 사용해보시면 어떨까요? 저는 grid-auto-rows: minmax(24px, auto) 같은 식으로 종종 씁니다.
타이틀만 그냥 만들어놓고 그 안에 들어갈 친구들만 다이내믹해줘도 괜찮은거겠죠?
타이틀쪽은 start 1/ 10 이런식으로 한줄로 통합해서 flex로 좀 나눠놨긴했는데 , 시안이랑 맞지 않아서 타이틀은 작업하고 안에 들어갈 내용만 그리드로 동적하는게 좋을지.. 고민중입니다.
이번에 취업하면서 회사에서 맥 지원 받는데 m1 pro 13인치 32메모리 512 스토리지면 괜찮을까요?!
캬..
슈퍼컴퓨터네요
와 32메모리 ㄷㄷ..
저는 왜 아이맥을 받아서...
가지고 다니지도 못하는… ㅜㅜ
13인치인게 조금 아쉽네요
맥북프로 13인치 m1인거죠??
M1프로가아니라
네넵
얘네 이름을 헷갈리게지어놔서,,
아마 그런것갘아요
맞아요 ㅠㅠ
맥북 프로 13인치 m1이랑 m1프로 13인치랑 다른거예요?
저도 16하고 싶은데 그러면 가격이 너무 뛰어서 ㅠ..
기본m1인게 살짝 아쉽긴 하지만 큰 이슈 없이 쓰실 수 있을거같아요!!
M1프로는 13인치가 없어요!
감사합니다!
전 m1에어입니다 회사컴 ㅠ
근데 사실 m1이 에어랑 프로랑 큰 차이 없긴 해서
메모리만 16이상이면 장땡인 거 같아요
아 프로는 14인치 16인치만 있는거군요
13인치 pro는 프로가 아니네요
헷갈리네..
m1 pro는 칩셋이름이 m1pro에요!
아마도
맥북에어 13인치 m1 맥북프로 13인치 m1 맥북프로 14인치 m1프로 맥북프로 14인치 m1맥스 맥북프로 16인치 m1프로 맥북프로 16인치 m1맥스
델님은 델쓰시나요?
아뇨 앱등이입니다
ㄷㄷ
모니터 델 사려고 닉네임 델로 했는데
정작 모니터도 lg샀어요
델 그 세로로 되는거 좋은데
m1도 좋은데 m2는 얼마나좋을까요
M2에어는 오히려 성능 하락 이슈 있어요
앗 진짜요?
네 유명한 IT유튜버들이 다 다룬 이슈입니다ㅠㅠ
유튜버가 비교한 영상 많은데 가격이 오른만큼의 값어치를 못하는거 같아요
m1이 진짜 명기..
m1이나 m1프로면 진짜 차고넘치는 것 같아요
저는 M2에어 존버하다가 가격인상+성능이슈 때문에
M1프로 깡통으로 샀습니다..
저도 인텔맥 2년쓰다가 최근에 m1프로 구매했는데.. 빌드속도가 드라마틱해서 ㅋㅋㅋ놀랬어요
보통 회사에서는 깃헙 라이센스를 어떤걸 쓰나요??
제로초병(병아리)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
혹시 프론트엔드 취직 포토폴리오로 사이트는 몇개정도가 적당할까요 ??
영혼을 갈아넣은거 1개면 되겟죠
근데 요즘 성능 관련해서 이슈에 대한 반박까진 아니고 “정말??” 하는 마음에 테스트 하는 영상 많이 올라오는데 꼭 성능이 떨어진것만은 아니더라구요.
양이냐 질이냐 차이겠죠?
리액트로 괜찮은 페이지 만들면 나쁘지않을까요?
양보다는 질이..
그렇군요
개인페이지에
근데 작은기업에서는 코드도 안봐서 의미가 있는지 모르겠네요
양은 별로안중요하다던데 질이 중요하다고 들었습니다
4개나 5개 올리려고했는데
어차피 다 안본다고
괜찮은 페이지의 기준이..?
제로초병님 어서오세요 :) 반갑습니다
양보다 질이겠지만 어떤 이유를 갖고 프로젝트를 했고, 뭘 학습하기 위해 만들었고 등등 이런 스토리도 중요하게 작용하는 것 같습니다
완성도있게 2개정도 괜찮은 것 같아요
반갑습니당
그렇군요 다들 감사합니당
질을 올리려면 어떤식으로 공부해야할까요 ㅠㅠ..
리액트로 투두리스트 정도만 만들어봐서
제 생각에 포트폴리오는.. 좋지 않은 방식으로 10개 100개 만들어도 의미가 없습니다. 빠른 시간에 한 개를 만들어보시고, 돈을 내시더라도 전문가에게 코드 리뷰, 컨설팅을 받으신다음 개선해서 제출해보시면 어떨까합니다.
코드도 보지않는 회사는
안가는게 맞죠
동의합니다 ㅎ
혹시 크롬에서 새 창을 팝업으로 띄우는 방법이 있을까요? window.popup()은 어떤 설정을 넣어도 새 탭으로 뜨네요 ㅜㅜ
아니 window.open()이요 ㅎㅎ
혹시 맥에서 전체화면으로 하셨나요
아 넵넵
아 전체화면을 해제하니 새창으로 뜨는군요! 감사합니다 ㅎㅎ
안녕하세요 자바스크립트 기초만 대략 알고 있는 퍼블리셔입니다 프로그래머스로 코테를 봐야하는데 이게 분야(?)가 또 나뉘어있더라구요 ㅠ 빠르게 벼락치기를 해야하는데 어떤 것들 위주로 보면 괜찮을지 혹시 조언해주실 수 있으실까요?
할 수 있는데까지 공부하고 코테에 임해보려합니다
리본맨 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
제가 지금 하고있는 주제가 개인의 얼굴사진을 넣고 스타일을 선택하면 그 스타일에 맞게 변형되는 주제로 프로젝트를 진행입니다. 혹시 페이지 폴더안에 upload페이지랑 style 페이지가 있는데 upload 페이지는 개인의 사진을 올리는 페이지이고 style 페이지는 어떤 스타일로 바꿀지 선택하는 페이지입니다. 그런데 backend 쪽에 이미지 데이터와 스타일 데이터를 전송해야하는데 이미지페이지에서 데이터 보내고 스타일 선택페이지에서 데이터를 보내고 하는것보다 이미지페이지에서 스타일페이지로 이미지 데이터를 보내서 스타일 페이지에서 이미지 데이터와 스타일 데이터를 한번에 보내는 작업이 좋을거같은데 혹시 이렇게도 가능할까요?
전역state로 관리해서 한번에 보내는게 좋을거같네용
아~!! 해보겠습니다 감사합니다ㅠ
useQuery로 한 컴포넌트에서 데이터를 받아온 후에 그 데이터를 자식 컴포넌트에서 사용하게 되었는데 1. 부모컴포넌트에서 내려받는다 2. query 요청을 한번 더 한다 (캐싱되어있기때문에 의미가..?) 3. 쿼리클라이언트에서 꺼내서 쓴다 (캐싱되어있는 값) 세가지 방법 중에 뭐가 좋은지 잘 모르겠어서 혹시 이럴때 다른분들은 어떤 방식으로 데이터 받아오시는지 여쭤봐도될까요 !
부모에서 내려받은걸 props로 내리거나 전역state로 관리하면 되지않나여
앗 그 값을 재사용 하게 될 때 세가지 방법 중 다른분들은 어떻게 사용하는지 여쭤본거였어요 ㅎㅎ !
저는 2번으로
저도 2번
재사용을 많이해야하면 프롭스로 상태 주입받고 재사용을 하지 않을 경우 컴포넌트에 훅스로 상태 불러오는식으로 해요~ 저는,,
저는 상황 봐서 1번 아니면 2번으로 합니다!
혹쉬 runjs 같은 프로그램 있나요 ??
앗 다들 답변 감사합니다 ㅎㅎ
Runjs쓰다가 요즘 익스텐션으로 quokka 쓰는데 좋아요!
이번에 공부하면서 저는 3번의 방식으로 했는데 3번을 잘 안쓰시는 이유가 있나요??
쓰라고 만들어놨다기보단 진짜 진짜 어떻게 해도 안 될 때 쓰는 최후의 수단 느낌이라..?
merony_sin님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저 안녕하세요
react-query dx의 1순위 가치가 캐싱이랑 선언적 api라고 보는데 클라이언트에서 직접 꺼내 쓰면 선언적이지 않고 명령적이게 되니까요!
저 개발자 지망생인데요 혹시 질문하나 드려도 되나요>
안녕하세요 merony_sin!!! 반갑습니다 어서오세요 ㅎ
네!!
선언적과 명령적의 차이가 몬가요??
어차피 2번으로 해도 한번만 요청 할텐데요
그 vscode로 메인메뉴1 메인메뉴2 메인메뉴3 메인메뉴4 하위에는 서브메뉴 1,2,3,4, 요렇게 놓고 코딩할려고 하는데 인터넷 찾아봐도 답이 안나와서요
정확히 멀 찾고계신가여??
코딩을 어케해야하는지 싶어서요
vscode 에디터를 꾸미시고 싶으신거에요?
창을 여러 개 켜고 싶으신 건가요?
네 html로 대충 윤갖잡고 css로
꾸미고 싶어요
그럼 구조 잡고 만들면 될거같은데용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style/05.css"> </head> <body> <div class="dropdown"> <button class="dropdown-btn">Main Menu</button> <div class="dropdown-submenu"> <a href="#">서브메뉴1</a> <a href="#">서브메뉴2</a> <a href="#">서브메뉴3</a> <a href="#">서브메뉴4</a> <a href="#">서브메뉴5</a> <a href="#">서브메뉴6</a> </div> </div> </body> </html>
요거를
앗 이런부분에서 궁금했었어요ㅎㅎㅎ.. 델님 감사합니다
사진
요렇게 하고 싶은뎅
어케 해야하는지 빡대가리라 진짜 몰겠어서..
헤더만들기 같은거 검색해보세요
그 헤더가 상단 바디가 중단 푸터가 하단아니에요?
네
저게 헤더아니에요?
드롭다운을 구현하고싶으신거아니에요?
드롭다운 메뉴라는 키워드로 검색하셔도 뭔가 나올 것 같아요 도와드리고 싶은데 제가 도와드릴 실력이 안 되어서ㅠㅠ
맞아용! 그니까 메인메뉴 펼치면 하위에 서브1 서브2 서브3 서브4가
쫘라락
나올 수 있게
네 이제 구글링하시면되요
그 커서 갔다됬을때는
만 적용되게
뿌슝빠슝님이 나갔습니다.
how to make dropdown menu on mouse hover
검색해보세용
드롭다운메뉴랑 헤더 검색하시면 되겠네요
그 영어 읽을 줄만 아는데 ...
크롬 번역기능쓰세요
영어로 검색하는 능력 키우면 원하시는 정보 얻기가 더 쉬워질거에요
그 개발영역은 영어 안되면 암것도 안되겠죵?
영어로 구글링하는법도 공부해보세용
암것도라는건 없죠
구글링도 실력입니다
남이 쓴 코드 잘 가져다 쓰는것도 실력이에요
그 마진이 여백 남기는 뜻인가요?
네 맞아요
이것도 검색해보시면 다 나옵니다~
패딩도 여백 남기는 거던데 모가 ... 어케 틀린건지
gnb 드랍다운
css기본기부터 공부해보셔야될거같네요
구글에 마진 패딩 차이점 ㄲ
검색하시면 아주 친절하게 나옵니다 ㅋㅋㅋㅋ
박스모델 검색해서 보시면 좋을거같네요
키오스크 개발하려는데 영수증 출력 같은 거는 무슨 키워드로 검색해야 나올까요?
혹시 1번은 부모에서 pros내려주기 2번은 그 컴포넌트에서 다시 쿼리요청으러 보면 되나요?
넵 제 질문은 아니긴 한데 제가 이해한 바로는 그렇습니다..?
델님은 주로 props으로 내려주나요? 그래도 캐쉬되도 서버 상태도 리프레쉬 해주려면 한번 더 요청 하는게 낫지 않을런지 .. 성능 상 이점이런거 잘 모르겠네요
위에 세 방식 다 성능 차이 무의미하고 결과 99.9% 동일하고 코드 스타일만 다르게 동작해요!
근데 컴포넌트마다 페칭하면 캐싱된 값을 여러번 비교하게 되지 않나요??
쑥스럽게 인사하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
그부분은 성능적으로 큰 영향이 없는건가여?
그래서 성능 결과 이런 거 무시하고 유지보수성이랑 가독성만 고려했을 때 세번째는 절대 안쓰고 첫번째 두번째는 그때그때 맞춰서 쓴다는 의견이었어요
캐싱된 값을 자주 비교해 성능이 조금 떨어지는것보단 데이터 최신화 보장이 더 가치가 크기때문에 그런게 아닐까 생각합니다
사진
사진
이거 두개 차이 질문주신 거 아니었나요..? 동일하게 동작하는 걸로 알고 있습니다!
저 혹시 코드 보내주실때 쓰시는게 프로그램인건가요 델님..??! 예전부터 봤는데 채팅방에올릴때 되게 깔끔하게 올려지는거같아서요!
vscode code snapshot 확장프로그램 씁니다~!
이 사이트로도 깔끔하게 코드 정리해서 질문하실수 있어요
키오스크 개발하려하는데 참고할 글이 있을까요..? 자료가 없네용...
감사합니다(굿)(굿)
슨상님
복붙하니까
이리 뜨는데요?
안녕하세요 타입스크립트 공부하다가 궁금한게 생겼습니다! interface에 원시타입과 객체타입을 둘다 사용하는 방법이 있나요? 예를 들면 basicInfo { stacks: string | string[] } 이런식으로요! 불가능한건가요,,,?
맞습니다 !
혹시 이런 내용 찾아볼 수 있는 키워드나 아티클있을까요 ?!
말썽쟁이 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
음.. 공식문서요..?
우문현답.. 감사합니다..
이글 보시면 도움될듯
선생님 저는 구글번역기를 늘 틀어놓고 합니다
22
초롱초롱 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 초롱초롱 무지님~~ 반갑습니다 :)
1) const hello = (() => { // 값을 만드는 로직 return value; })() 2) const getHello = () => { // 값을 만드는 로직 return value; } const hello = getHello() 1, 2 어떤걸 선호하시나요?! 반복해서 사용하는 경우는 아니고, 일회성입니다.
저는 2번 선호합니다! 함수는 동사+명사 순이어야 편안..
저도 2번.. 해야할일이 명확해보이는게 나중에 봐도 안헷갈려서
getHello 가 다시 불릴일이 없다면 굳이 getHello라고 안쓰고 1번으로 써요 저는
저도 이렇게 사용할거같아요
사진
근데 나중에 다른곳에서 불릴거같으면 무조건 2번처럼 쓸거같네용
저도 이렇게 쓰고 있습니다~
오 테마 이뻐여
앗 감사합니다. 하지만 블로그글 퍼온거랍니다ㅋㅋㅋㅋㅋㅋ
(결론 : 감사하지만 감사하지않지만 감사한듯 감사합니다)
와 어렵다
감사하지만, 감사하지않지만, 감사한듯, 감사합니다
이거 조건문으로 짜보면
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
찐 개발자시네요.. 바로 조건문부터 생각하시다니
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
저정도 해야하구나
(감사 ? 감사하지않지만 (감사 ? 감사하지않습니다 : 감사합니다) : 감사하지않습니다( 감사? 감사합니다 : 감사하지않습니다))
이케되나요?
오늘 우울해서 살짝 뇌절온..
ㅋㅋㅋㅋㄲㅋㅋㅋㅋ
네 제 컴에서 저러면 이제 삼항연산자 eslint에 걸립니다
우웩 ㅋㅋ
merony_sin님이 나갔습니다.
ㅋㅋㅋㅋㅋㅋㅋㅋ
쪼끔 뒷북이지만 지금 여기서만 그 값이 필요한데 그냥 쓰기엔 값을 뽑아내는 로직이 복잡할 때만 iife로 쓰고 그 외에는 2번으로 씁니다!
답변들 감사합니다!! :)
여러분들 혹시 제가 443 포트 번호를 죽이려고 netstat 써서 확인해보니 443 포트가 안나오는건 어떤 경우일까요 ..? 443 포트가 사용중이라고해서 죽이려고 했더니 안나와서요 ㅠㅠ 해결방법을 아시는 멋쟁이분들 계실까요..?
443 포트 https 기본포트아닌가요?
네네 맞아요 저도 그렇게 알고있어요
제가 알기론
커스텀 포트를 사용가능한부분이 있고 안되는 범위가 있는데
443 포트를 죽이련느 이유가 있을가요?>
백엔드 서버를 https 로 인증받아서 배포했었는데 인증서 기한이 끝나서 갱신 받고 다시 재배포 하려니까 그러네요 ㅠㅠ
서버를 재배포 하려고하니 443포트가 사용중이여서 안된다고 해서요 ㅠㅠ 기존에는 이 포트번호로 사용했었구요
netstat -tnlp 로 해보세여
nginx 사용중이라는 것같네요 ㅠㅠ 감사합니다 좀 더 봐서 해결해보겠습니다 ~!!
보통은 웰노운 포트 통해서 그런 요청하게 되면 로드벨런서를 중간에 끼는데
흐음
저도 잘 모르다 보니 도움을 드리기가 애매하네요 ㅜㅜ 잘 해결되셨으면 좋겠습니다!
여러분들 도움 덕분에 해결 됐습니다 !! 감사합니다 ㅠㅠ
이것도 한번 공부해봐야겠네요 ! 감사합니다 !
어떻게 해결하셧는지 공유 가능할까요..?
netstat -tnlp 요거로 검색해보니 nginx: master 랑 nginx: worker 라는 것이 사용 되고있었어요 ㅠ 저는 nginx 를 사용 안하고 있다고 생각해서 놓쳤던 부분인것 같아요 ㅠㅠ
사용중인 PID 번호로 해서 kill 하고 다시 했더니 정상 작동 됐어요 !
공유 감사합니당 ㅎ
Next js는 어떻게 학습하는게 좋을까요?
이모티콘 책 추천 받고 싶습니다
공식문서요
공식문서 되게 잘되어있어요
오 감사합니다 !! 영어라서 피해보려했는데
다이빙해보겠습니다
역시 정면돌파가
최곤가
어지간하면 공식문서가 젤 좋은거 같아요 ㅋㅋ
가장 최신이고
리액트의 경우에는 베타 문서 되게 좋은거 같더라구요!
누군가 정리해놓은 블로그 글은 레거시한 버젼일수도 있어서 ㅋㅋㅋㅋ
혹시 여기계신분들은 자바스크립트로만 개발하시나요? 파이썬이나 다른언어는사용안하시나요?
next는 특히나 ... 책이 거의업지안ㄹ나요?
버전업도 엄청 빨라서...
go 요즘 관심있게 보고 있긴 한데 메인은 자바스크립트 (타입스크립트)만 하고 있습니다!
전재연(JAENY)님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
무지누지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 잘부탁드려요 늦은 밤에 죄송해영
이모티콘
혹시 live server로 작업하는 것과 parcel bundler를 다운받아 로컬 서버를 켜서 작업하는게 차이가 있나요 ??
청소하는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 혹시 회사에서 유저페이지/관리자 페이지를 구현할 때 1. 도메인을 두개로 나눈다. 2.같은 도메인에 /admin 식으로 서브도메인으로 나눈다. 어떻게 하시나요?
뷰넉님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
사이즈가크면 1
아니면 2번여
전재연님 무지누지님 청소하는 튜브님 뷰넉님 모두 모두 반갑습니다. :)
잘 부탁드려요! +_+
이곳은 프론트엔드에 대해 궁금한게 있는데 물어볼데가 없을때 뭐든 편하게 물어보고 내가 아는 것이면 진짜로 내것으로 만들기 위해서 적극적으로 설명을 해보면서 함께 성장하고자 하는 곳입니다. 쉬운 질문이건 어려운 질문이건 모두가 생각해볼 수 있기에 이런 질문 해도되나? 싶어도 한번 도전해보시길 바래요. ㅎ
이모티콘 안녕하세요!
사진
B가 더 보기 편하시죠??
넵넵
감사합니다!!
안녕하세요 ! 다름이 아니라 궁금한 게 있는데, 깃헙에서 작은 팀프로젝트를 하고 있는데 다른 사람 공개 레포에서 커밋한 이력은 저한테 따로 남지는 않을까요 ?!
저는 classnames 쓰긴 합니다!
classcat
선생님께서 다른 사람의 공개 리포지토리에 커밋을 하셨다는 말씀이시지요? 그럼 그 분의 리포지토리에서는 선생님의 정보와 함께 그 커밋을 확인할 수도 있고 본인 깃허브 페이지에서도 확인이 되네요 https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/viewing-contributions-on-your-profile#contributions-calendar
좀 isOdd 같은 느낌이라 그냥 직접 만들어서 쓰는 것도 좋을거같긴 해요 const classNames = (…args) => args.join(' ');
안녕하세요,
어제까지만 잘만 되던
사진
회원가입이..
사진
이런 흉악한 에러를 내뱉습니다..
감사합니다! 그런데, main branch에 커밋하는게 아니면 잔디가 안 심겨지더라고요 ㅠㅠ 그래서 여쭤봤습니다!! 알려주셔서 감사해요. 오늘도 좋은 하루 되세요!
CORS 오류내요 API개발자에게 문의해보세요~
서버쪽에서 origin설정을 해주거나 프론트쪽에서 프록시설정을 해주셔야할 것 같아요
하하 스웨거ui로
개발중입니다
처음 접해보는 거라 해결 해봐야겠네요
리액트 막 여러번 렌더링 되는거 이거 최적화가 엄청 빡세겠네요..
콘솔 로그로 찍어보는데 첨 시작하자마자 로그 막 여러개 찍히는게 여러번 렌더링 된다는거겠죠?
index.js에서 React.StrictMode 지워보셨나요???
리액트 strict모드 활성화 상태에서 콘솔찍으면 콘솔리 여러번 떠요
함 지워보겠슴다
저 태그 지우지 않으면 최소 두번 연달아 출력되더라고요
오오....
사진
앞에 이거 붙여주면 된다고 하는 거 같은데
왜 안될까용 ㅋㅋㅋ
http가 두번 있어서 그런가
실제로 그 헤로쿠 프록시서버가
돌아가고있나요?
감사합니다!
아 그리고 한가지 더 여쭤볼게 있는데
props가 변할때마다 하위컴포넌트가 재 렌더링 되니까, popup같은 경우 toggle 상태를 prop으로 넘겨주는데
해로쿠가 뭐에용...
toggle이 false로 변할때도 props로 전달되니까 이 경우에도 렌더링이 되는데 이런 경우는 props로 전달하지 않는게 좋을까요?
전달해야죠..?
요소가 생기는거니까
이거 접속하시기 전에 먼저 corseverywhere 페이지만 먼저 접속하시면 프록시 서버 키는 페이지가 떠요. 그거 키고 다시 하시면 될거에용
아 그런가요??
렌더링이되는게
맞는거 아닌가요?
*anywhere
그렇군요...
아직 짬찌라 이런 판단들이 너무 어렵네요
그냥 익숙해지시기 전까지
최적화는 고려 안하셔도 큰 상관 없을거예요
아 넵 감사합니다!
타입스크립트 타입 지정할 때 타입지정이 정말 애매하다 하는거는 그냥 any로 두시나요? 아니면 끝까지 타입이 어떤지 확인하시나요?
any는 최악...
좋은 레포있어서 공유해드립니다~ https://github.com/mithi/react-philosophies
리액트의 철학!
any 보단 unknown
안녕하세요, 오늘 설문 조사?같은 거를 하려고 하는데 괜찮을까요? 다름이 아니라 제가 일본 개발자 사이트에도 글을 올리고 있는데, 한국 개발자들이 가지고 있는 일본 개발자에 대한 질문을 수집해서 답변을 받아보면 좋을거 같아서요! 괜찮을까요?
아~
감사합니다
사진
혹ㄱ시 문법에 오류가 있을까요?
사진
아 언노운이라는건 한번도 사용하지 않았는데 해보겠습니다
안녕하십니까! 제가 저번에 cra할때 yarn으로 create react-app을 잘못쳐서 create recat-app으로 해버렸더니 고양이가 가득 담긴 리액트 페이지가 만들어졌는데요 그 이후에 create react-app을 하게 되면 기본 리액트 구성이 안나오고 계속 고양이로 고정되서 나오는데 혹시 해결방법 아시는분 계실까요…?
ㅋㅋㅋㅋ
처음엔 귀여웠는데 이제는 화가납니다 ㅠㅠㅠㅠ
혹시 계속 create recat app이라고 쓰신 거 아니에요?
아니에요 create react-app으로 두 눈 부릅뜨고 확인했습니다 ㅠㅠ
공식문서에 있는거 그대로 복붙해서 써보세요
npx create-react-app my-app
손을 번쩍 든 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 손을 번쩍 든 무지님 반갑습니다 :)
안녕하세요!!
사진
CSS가 넘모 어려워요ㅠㅠㅠ
어떤게 제일 어렵나요? 레이아웃?
cra할때 애초에 고양이 껴들어가는거 같습니다
아니 저게 뭐죠
ㅋㅋㅋㅋㅋㅋㅋㅋ
살려주세요….
음 그때그때 아주 specific한 기능을 구현하려 할 때 딱 가려운 곳을 긁어주는 방법을 찾는 게 쉽지 않네요ㅠㅠ
npx 를 삭제하고 하면안되나
ㅋㅋㅋㅋㅋㅋㅋㅋ
테오님 혹시 위의 설문지 같은거 올려봐도 될까요 이 방에?
오타 한번 났다고 가혹하네요...
네! 자유롭게 이방 활용하세요!! ㅎ
넵!
예를 들면 어떤것들이 있었나요?
김채은님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저도 이게 고민인데,
안녕하세요 무지무지님 반갑습니다!!
안녕하세요!
음 지금 막힌 부분같은 경우엔.. 동일한 클래스의 element에 두개 이상의 애니메이션을 넣고 싶은데 방법을 못찾겠어서 타고타고 여기까지 들어오게 됐네요ㅎㅎ...ㅠㅠ
fadeIn이랑 fadeOut을 각각 구현해서 하나의 element에 넣고 싶은데
에니메이션 발동 조건은 어떻게 되나요?
아코디언 메뉴같이 생각하시면 될 것 같습니다..!!
메뉴가 하나인 아코디언..?!
Read More 버튼 구현하려는 거거든요..!
펼쳤다 접었다 하는 기능이 필요한데 구글링해도 마땅한 게 잘 안나오네요ㅠㅠ
fadeIn은 했는데 여기에 fadeOut을 어떻게 추가할 수 있을까요..? 가능한 걸까요?
css 애니메이션의 경우는 동적으로 클래스를 추가 하면 fadeIn, 삭제하면 fadeOut 으로 구현 합니다. 거의 대부분 ui는 이를 응용해서 만들어요.
css만으로는 hover를 제외하고는 발동조건을 만들려면 좀 귀찮을거에요. 그래서 스크립트를 이용해야 하는데
https://forms.gle/56Sy8bMuKhYv7ydA8
많은 참여 해주시면 감사하겠습니다!
근데 스크립트를 쓰려면 특정한 class나 id값을 타겟으로 잡고 돌려야 하지 않나요? 동일한 기능을 하는 버튼이 20개 이상 되야 하는 상황이라서요..!
이건 혹시 제가 이해를 잘 못한 것 같은데 좀 더 설명을 부탁드려도 될까요?
아녜요 스크립트에서도 클릭시 현재 영역을 기준으로 상대적으로 class를 추가 삭제 하거나 해서 범용적으로 처리할 수 있어요
코드펜 같는곳에 아코디언으로 검색해서 원하는 방향으로 레퍼런스 찾아보세요!
인사하는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
아 그런가요..?!
네 조언 감사합니다ㅎㅎ 그렇게도 찾아보겠습니다..!
Re: `create-recat-app` 따라해봤는데 고양이 문제가 없네요, 제 머신에서는요?? `npx create-recat-app cat-villain`으로 cat-villain 디렉토리에서 `npm start`해 보니 고양이 짤 돌아가는 것 확인 `npx create-react-app react-sane`으로 react-sane 디렉토리에서 `npm start`해보니 리액트 짤 돌아가는 것 확인 뭐가 문제인지는 모르겠지만 npx의 캐시를 날려버리고 해보시는 것은 어떠신지요? https://stackoverflow.com/questions/63510325/how-can-i-clear-the-central-cache-for-npx
오오 진행해보겠습니다!!!
서버 사이드 렌더링할때
html에서 사용하는 js 파일이 동일할경우
최초 1회만 가져오나요?
아니면 최초 렌더링할때 모든 js 파일을 다운받나요?
혹시… 제가 처음에 cra할때 yarn으로 했는데 yarn에 문제가 생긴걸까요..?
npm cache 삭제해도 같은결과네요….
ㅋㅋㅋㅋㅋㅋ고양이의 저주..
터미널 삭제하고 다시 npm start 하셔도 그렇죠?
recat 만든사람은 진짜 귀엽네요 ㅋㅋㅋ
맞습니다..ㅠㅠ
얀이 문제인건가..
저 이거 해결못하면 그냥 맥북 새로 장만하려구여
헉 ㅋㅋㅋㅋㅋㅋ
새로운 기기를 위한 빌드업….
근데 사~실 recat으로 고양이 나와도 코드짜는데는 문제없긴한데..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
새창 안나오면 묘하게 열받거든요
타입스크립트로 cra하니까 오류를 뱉어서 보니까 또 recat에 맞는 타입스크립트 template이 있더라구요…
어이구;;
타스땜에 원상복구하려고 합니다.. ㅠㅠ
처음엔 귀여웠는데 이제 고양이가 가운데에서 빙글빙글 도는 모습보니까 열받네요
뭔가 놀리는 느낌이랄까
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
사방팔방 돌아가는거 보면 진짜 열받거든요
이게 그냥 도는게 아니고 gif라서 고양이가 살랑살랑 흔들면서 돌아가더라구요
그래서 더 열받는 그런..
살쾡이v님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
제가 안타까워서 스택옾플에 써치중..
오오오… 감사합니다 ㅠㅠㅠㅠ 저도 계속 찾아보고 주변 친구들이랑 개발자들에게도 물어보는데
업계포상, 오히려 좋아 이러고 있네요…
일단 맥북은 주문 넣으시는게..
오히려 좋거든요..
네…?
네..
이건 고양이 의견도 들어봐야...
방장님 혹시 이런 건 어떤 식으로 사용하는지 알 수 있을까요??
clcick 이벤트에 dom에 접근해서 가변클래스 네임을 사용하면 되지않나요? 리액트를 쓴다면 ref
Addclassname 이렇게도 사용할수있어요 클릭할때
아하 그렇군요!! 다들 감사합니다!
고수님들.. Addclassname로 찾아보니 일단 element를 지정을 해야 거기에 더하는 게 가능한 것으로 보이는데, 처음에 클릭한 특정 버튼을 id 없이 target으로 어떻게 잡을 수 있나요..?
리액트로하시나요?
아니면 바닐라?
Event current target 안되나요?
바닐라입니다!!
`element.addEventListener("click", (e) => { e.target /* button element */ … }` 안되나요?
아 이런 식으로 사용하는 거군요..! 감사합니다ㅠㅠ 시도해보겠습니다!
근데 혹시 클릭한 타겟이랑 그 하위 element는 currentTarget이나 target으로 접근 가능하다고 하는데 반대로 버튼 상위의 element에 접근할 수 있는 방법도 있나요?
아 찾아보니 target.parentElement 가 나오긴 하네요..!!ㅎㅎ;;
이벤트 핸들러를 상위 element에다 달아주시면 button을 클릭한 event가 버블링되어 상위 element에 전달될 것 같은데 저도 기초가 부족해서 정확한 설명인지 모르겠네요ㅠㅠ https://ko.javascript.info/events
웹사이트에 정확한 설명 및 참고될만한 내용이 많이 있을 거에요!
네 감사합니다! 참고하겠습니다!!
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget 위에서 말씀해주신 event.currentTarget을 활용하면 더 깔끔하게 작성 가능할 것 같습니다. 같이 화이팅입니다!
키워드로 검색해보시고 콘솔로 현재값들 찍어보면서 확인하고 그러면 해결하실 수 있을거에요!
네 감사합니다!!
이모티콘
옐로카드 프로도님이 나갔습니다.
무한 cra 고양이 해결했습니다!! create-react-app 전역으로 설치된거 삭제하고 다시 전역 설치하니까 원상태로 돌아왔습니닷!!
결론은 cra문제...
ㅋㅋㅋㅋ
어머 ㅋㅋㅋㅋㅋ
아 근데 이제 yarn이 문제네요.... 다시 해결하러 갑니다.. 점심 맛있게 드십쇼 ㅠㅠ
맥북 주문은요?
잠깐 보류... ㅎㅎㅎ 해결가능할거같습니닷
애초에 npx로 안하고 yarn으로 오타냈더니 그러는거 같아서 yarn 설정만 손봐주면 해결 가능할거같아요 ㅎㅎㅎ
저희는 2번이요
저 궁금한게 있는데 드리블에서 shots 카테고리에 있는 이미지는 구매가 불가능한가여~? design files메뉴에 있는 이미지만 구매가 가능한거에요~? ㅠ
선생님들 ! 맥북이랑 모니터 한개만 쓴다고 가정했을때 27인치 32인치 중에 어떤선택을 하시나요!?
프론트 앤드개발에 있어서는 2개의 큰 유의미한 차이점은 모르겠으나, 게임할때는 분명 32인치가 좋습니다
한개면 32인치도 나쁘지 않을 거 같은데 나중에 듀얼로 바꿀 가능성 고려해서 27 로 하겠습니다!
전 27인치요 전 게임을 안해서 그런지 32인치 너무 크더라구요..!
전 32인치 추천 드리는데, 여러 가지를 한 화면에서 볼 수 있다는게 엄청난 메리트인 것 같습니다.
사진
여기서 오류가 어디일까요..
주소가 이상한거 아닌가여?
요청주소는 이상이 없습니다 ..
요청주소가 이상하게 보입니다. http가 두번 들어가 있네요
백엔드에서 쿠키를 설정해줘서 요청시 헤더에 쿠키가 들어가 있긴한데 크롬 콘솔 application 쿠키에는 안보이는 경우는 어떻게 해결하는지 아시는 분 있으신가요? ㅠ
크롬 설정에 모든사이트 쿠키허용 해보시고 set cookie시 도메인 명시해보숑ㅅ
보셔요
넵 쿠키허용 한번 해보겠습니당
혹시 og:image 경로는 꼭 웹에 저장된 곳으로 해야하나요..? 컴퓨터에 저장된 경로 설정을 하면 안뜨는건지 해서요! 하위 폴더 img(폴더)내 ogImage 존재하여 아래와 같이 했으나 뜨지 않네요.. 경로를 잘못 입력 한것일까요ㅠ <meta property="og:image" content="img/ogImage(800x400).png" />
cra 무한고양이 최종적으로 해결했습니다!! yarn 해결방법이 사용자폴더에 숨김폴더 중 .config/yarn/global/yarn.lock 파일에 create-react-app이 아니고 create-recat-app으로 바뀌어있어서 이거 삭제하고 yarn create react-app 하니까 고양이 드디어 방을 뺐습니다!!
ㅋㅋㅋㅋㅋㅋㅋ
고생하셨어여
ㅋㅋㅋㅋㅋㅋㅋ긴 여정이네요
yarn.. 쉽지않다
생각해보니 yarn도 고양이던데 고양이들이 쌍으로 괴롭혔네여...
그렇져
큰 죄를 지으신거임..
눅눅해 님도 프사가 고양이시네요...
쿨럭
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
무섭....
저는 퍼블릭 폴더에 넣고 '%PUBLIC_URL%/~'로 경로 지정했던 것 같아요
벨로퍼트 리액트 사이트 들어가지시나요 ㅠㅠ?
깃북(https://react.vlpt.us/)은 안 들어가지는데 깃헙은 접속되네요
감사합니당ㅎㅎ
넵 감사합니다!
고수님들 element.getElementsByClassName()을 사용하면 HTMLCollection가 할당되던데, 이거 말고 element를 할당시킬 수 있는 방법이 없을까요?
버튼이 클릭됐을 때 버튼 외부의 element의 애니메이션을 다시 실행하고 싶은데, 그러자니 일단 해당 element를 target으로 지정할 수 있어야 해서요...!
님들 혹시 패스트캠퍼스 초격차 패키지 강의 괜찮을까요..?
querySelector 나 getElementsBy* 로 원하는 요소를 불러올 수 있지 않나요?
사진
혹시 vscode에서 저런 글자 없애는 방법 아시는분 ? .. ㅠㅠ
아 다른 곳에서 문제가 있었네요! 해결됐습니다 감사합니다!
VSC 자체에서 자동완성을 끄시면 될거 같은데요!!
아하?
그냥 궁금해서 그러는데 vscode, 인텔리제이 중 뭐를 더 선호 하시나요 ㅎㅎ?
(방 모든 분들께 하는 질문입니다)
vscode요
이유도 말씀해주시면 감사하겠습니다. (개인맥에선 vscode 쓰는데 회사에선 intellij 라이센스를 해줘서… 섞어쓸지 그냥 회사에서도 vscode 쓸지 고민이네요)
상관이 있나요?
저희도 라이센스 주는데 vscode 사용하고 있네요 ㅋㅋㅋ
파일 찾는거나 세팅 이런게 더 손에 익어서 그런가 굳이 인텔리제이나 웹스톰 써야하나 생각도 들고
vscode 쓰면서 딱히 불편함을 못느껴서
익스텐션이 많아서 조아요
저는 webstorm사용중인데 여기에 적응되서 그런지 vscode가 불편해요 ㅠㅠ
만약 제 소스에서 오류가 나서 동료들이 제 컴 볼때 IDE가 같아야 단축키나 메뉴 찾기가 편할거같아서요.
webstorm에 vscode 단축키 plugin적용해서 사용하면 문제없을꺼에요!
팀끼리 맞추면 좋긴 하겠죵?
집에서 사용하는 vscode 익스텐션들 동기화도 이유 중의 하나요!
저는 Java도 같이 해서 인텔리제이를 사용하고 있어요
모두들 답변 감사합니다.
참 애매한 경우 인것 같아요. 개인적으로는 “장인은 도구를 가리지 않는다”라는 생각으로 개발은 협업이기 때문에 회사에서 쓰는 걸 우선하는게 어떨까 합니다.
둘다 익숙해서 둘다 씁니다 ㅎㅎ
요즘은 vscode 많이 쓰는 거 같아요
안녕하세요 프론트엔드랑 백엔드 사이에서 진로를 깊이 고민중인 컴퓨터공학과 4학년 대학생입니다.. 저는 언어는 다양하게 접해봤고 최근까지 개발하면 화면에 바로 나타나는 프론트엔드 공부를 하고있었지만 하면할수록 벽을 느껴서... 신입기준 취업목적으로 자바 스프링부트쪽만 하면 된다는 백엔드쪽에 크게 매력을 느껴서 공부해보려는데... 그냥 하던 프론트쪽을 공부할지 백엔드로 갈아탈지 너무 고민인데 조언좀 해주실분 계실까요..
추가로 협업시 사용하는 매크로, 스니펫 등을 IDE에 맞는 플러그인을 개발해서 사용하는데, 개발자마다 환경이 다르면 개발속도가 떨어질 수 있기 때문에 가급적 환경을 맞추는게 좋을 것 같아요.
궁금한게 있습니다! 회원가입페이지를 만들고 있는데, 회원가입시 필요한 정보를 3페이지에 걸쳐 받고있습니다. 예를들어 아이디, 비밀번호 받고 그다음페이지에서 약관동의 받고.. 이런식으로요! 이럴때 그 전페이지에서 받은 회원정보를 전역상태로 저장해둬도 될까요? 전역상태관리로 recoil을 쓰고있습니다 ! 아니면 어떤식으로 정보를 가지고있으면 좋을까요?
백엔드 벽이 프론트보다 작다고 볼 순 없을 거 같아요~
매력을 느끼는 백엔드를 해보면 좋지않을까요? ㅎㅎ
프론트벽보다는 백엔드의 벽이 조금 더 높지않을까요?
프론트가 백엔드보다 더 빠르게 변해서.. 그게 벽이 될 수도 있다고 생각해요
각 분야의 특성이 있으니 뭐가 더 어렵다 라는 말은 아무 의미 없지만
백엔드는 스프링 하나만 하면 되니까 더 쉬운 길이겠다! 라는 판단은 잘못됐을 가능성이 높아 보여요
하나만 파서 우직하게 가야겠죠... 자꾸 흔들리네요 지금 js 공부하고있는데 제가 기존에 알고있었던 C, C++ 과는 너무 언어가 자유롭다고 해야되나요 조금힘드네요
저는 막 백엔드에서 프론트로 전향한참인데
조심스러운 워딩 빼고 그냥 제 어린 생각 기준으로 말하면 백엔드가 프론트보다 보통 신입 컷이 높으니 백엔드를 좋아하시는 게 아니라면 어려운 길일 수 있습니당
유니티에 웹뷰로 회원가입 및 로그인을 구현해서 동작중인데 간편로그인을 하려고 기술검토중인데 간편 로그인 선택하는 화면은 웹뷰로 하고 선택하면은 결국 네이티브 sdk 실행후에 데이터를 웹뷰로 넘겨주는게 맞는거겠죠?
근데 프론트가 어려워서 피하려고 백엔드를 가는 게 아니라 진로를 찾는 목적으로 백엔드도 해볼까? 라면 아주 좋다고 생각해요! 그 경험이 나중에 어디로 가시든 도움이 될거예요
백엔드를 정말 깊이파면 훨씬 깊이있고 서비스로직만 짜야하는게 아니라, 아키텍쳐, DB, 캐싱, 보안, CICD, 인프라 등등 프론트못지않게 많이고려하고 배워야해요ㅠ
넵넵 데이터다루시거나 비즈니스로직 짜는데 재미를 많이 느끼시면 추천드려요
그렇군요 이미 알고있었지만 어느하나 쉬운게 없네요... 그냥 우직하게 프론트엔드 공부하겠습니다..ㅠ
메인 기술 스택이 하나고 해당 기술 스택을 오래 썼다는건 그만큼 진입 장벽이 높다는 소리이기도 합니다
바로 취업을 원하시는거라면 조금 늦은 감이 없잖아 있어요
바라보는 곳이 어디냐에 따라 다르고 사람마다 러닝커브가 천차만별이라 꼭 그렇다라고는 말씀 못드리겠지만.. 다음학기가 졸업학기실 것 같아서 말씀드립니다
그렇군요.. 저는 빨리 취업하는게 목표라서요.. 주변에 누군가는 자바 스프링만 해서 백엔드 취업한사람이 많아서 자꾸 흔들리는 거 같습니다
그런 경우는 국비학원나와서 si갔을 가능성이..
저희과 동기중에 개발자들이 대부분인데요. 개발자가 20명이라할때 프론트개발자는 3명이에요
대부분 백엔드로 택하시더라고요
퍼블리싱자체에 스트레스 받아하는 친구들도 많아서 재밌고 롱런할수있는걸 추천드려요
제 동기들도
현실적으로 fe를 대우해주는 기업의 숫자가 많지 않기 때문도 있습니다
퍼블 싫어하는 녀석들이 다 백으로 갔네요
너무 조급해하시지 마시고, 맞는 길 잘 택해서 가시면 될 거 같아요~!
그러니까요 제주변도 프론트는 거의 없고 다백하더라구요..
오히려좋다고생각하고있습니다 ㅋㅋㅋㅋ 가면갈수록.. 귀해질수도?
컴공 애들이 백엔드 선호 경향성이 좀 있죠 ㅋㅋ
그만큼 백이 더 경쟁이 쌔서..
그래서 오히려 전공출신 프론트 개발자가 대접받는 케이스도 있는거 같고요
예전에는 백이 대우 잘 받았는데
요즘에는 프론트도 많이 올라와서
비등비등 하다고 들었습니다
물론 좋은개발자일때입니다
프론트 개발자가 귀해가지고 ..
그렇군요 혹시 프론트 백 뽑는 비율이라던가 회사내 프론트 백 비율정도는 백이 더많을까요..?
안녕하세요! 혹시 회사에서 미니 프로젝트로 할만한 재미난 아이디어가 있을까요? 회사에서 시간날때마다 틈틈히 뭔가를 만들어보고 싶은데, 근무시간에 한다면 회사에 도움되는 일을 해야할거같아서요 :)
인하우스 플랫폼 기업들 기준으로
그냥 경험상 취업은 프론트가 더 잘 된다고 봐요
조언 정말 고맙습니다 컴공쪽에서는 js를 안배워서 현재 js부터 부랴부랴하고있는데 그다음 리액트를 적용해서 프로젝트하나만들어보려고하고있습니다.. 조언정말 고맙슨디ㅏ
그냥 불경기라 취업 컷이 올라갈 예정이긴 한데, 신입 취업은 프론트가 훨씬 잘되는거같아요
타스를 하시면 좀 더 나을수도..
아 아직 프론트를 많이 하신 상태가 아니군요..?
네네.. 그래서 지금이라도 백으로 옮길지 고민이였어요..
아 지금 근데 뷰쓰는 인턴다니고 있긴합니다
뷰를
더파보시는건 어떠세요?
근데 제가 개발하는 느낌은 아니고 가져다가 쓰는느낌이라..
거의 모르는 상태라 보셔도되요
진로 선택이 회피성으로 되면 좋지 않은 것 같아요
ㅋㅋㅋㅋ 백엔드도 똑같아요!
취업생각하지말고 재밌는걸로 하세요 ㅎㅎ;;
뭘 하든 어려운 부분은 똑같이 있을테니까 더 잘 맞는 쪽으로 하시는게
맞아요 재밌고 잘 맞는거 하시면 될거같아요
취업하고 안맞으면 더 고생입니다
길게봐야죠
솔직히 잘 맞는 쪽 찾는게 아직 어려운거같네요ㅜㅜ 백엔드는 아직 깊게 경험안해봐서 그런지 프론트쪽이 왤케 멀고 험하게만 느껴진느지..
백엔드도 한번 해보셔용 찍먹 느낌으로 간단한 사이드플젝이나
취업쪽으로 질문하셨으니.. 취업쪽으로 답변드리면
둘 다 안해보면 알기가 힘은거가타요
힘든*
주변 지인들중에 최근 백엔드 네카라 합격한 친구들 대부분 컴공과 졸업하고 학교 다니면서 스타트업 경력 1~2년 씩은 채운 친구들이 가는걸 보면
컷이 많이 올라가긴 한것 같아요
저랑 같은 4학년이시네용 ㅎㅎ js가 자유롭게 느껴져서 힘드시다면 ts 한번 해보시는거 추천드려요!
조언 정말 고맙습니다!!
ㅋㅋ저도 js 자유로워서 힘들었는데 ts써보니 까다로워서 힘들어요 ㅋㅋ... ㅠ
사진
ㅋㅋㅋㅋㅋㅋㅋ 재밌는 비교 이미지네요 ㅋㅋㅋㅋ
어쨋든 결과는 같네요 ㅋㅋㅋ 멍청하게 맞는거냐 화려하고멋지게 맞는거냐네요
사진
이렇게 적용되지 않는 스타일에 대해서
왜 적용이 안되는지 볼 수 있나요??
파일 객체 빈 값을 서버로 전송할 수 있는 방법 아시는 분 계실까요 ? ㅠㅠ 여러 데이터를 보낼 때 이미지를 올리지 않으면 이 파일 객체가 비어있는 string 으로로 넘어가서 400 에러가 납니다..
스타일이 상속되거나 선언 순서에 따라 적용 여부가 달라질 수 있어요
그런듯하네요 답변 감사합니다
우선순위가 밀린겁니다
안녕하세요. 현재 대학교에서 uxui디자인을 전공하고있는 학생입니다! 현실적으로 디자이너보단 개발자가 더 취급이 좋을거같아 이쪽에 발을 들이게 되었습니다.. 취업할 때 혹시 uxui를 한 경험이 도움이 될까요..?
간접적으론 도움이 되겠으나 그렇게 큰 메리트는 없을거같네요
도움이 됩니다 하지만 디자인과는 다른 분야이기 때문에 엄청나게 많은 새로운 것들을 공부하셔야할거에요.
우움
useCallback을 사용하지 않고는 리렌더링을 막을 수 없다면 useCallback을 사용하는게 맞겠죠?
저도 요 의견에 공감합니다.
넵~
애초에 그럴 때만 쓰라고 만든 거라
물론 리렌더를 막아야 하느냐 를 먼저 생각해야겠지만요
그리 큰 메리트는 없군요 조언 감사합니다😓
저도 이부분에서 도움 많이 받았는데 도움이 되실려면 내가 전공했다는 것 뿐만 아니라 실제 서비스에서 어떤 역할을 통해 무엇을 기여했는지가 더 중요해요
- UI/UX 시나리오 개발/디자인 - 시나리오 정립 및 버튼형 UI 도입을 통해 Fallback Block(사용자의 채팅을 이해하지 못하고 이탈로 이어졌을 때 등장하는 상호작용)을 기존 6.53%에서 2.83%로 약 2.3배 감소하여 서비스 경험 개선
저 같은 경우에는 회사에 UI/UX를 담당하는 디자이너가 있어서 이거에 대해 크게 고민해본적이 없습니다.
실제로 서비스에 IA를 작성하고 고객 경험 노선을 어떻게 개선했다던가
해당 경험이 개발에 직접적인 기여가 있다면 메리트가 있겠다만 그게 아니라면 큰 메리트는 없을 것 같아요.
대이터를 분석해서 내 가정이 과연 성공적이였는지, 그리고 그 성공이 성공임을 파악하기 위한 근거는 무엇인지!
이런 것들이 오히려 더 취업에 도움이 되었지 단순히 uiux를 전공해서 피그마를 잘 한다는건 큰 메리트는 안된거같아요
음 어떤식으로 개발과 연관지으면 좋을지 대충 감이 오는 것 같네요 ㅎㅎ 답변 감사합니다🙇♀️🙇♀️🙇♀️
저도 2학년때 uiux디자이너가 되고 싶어서 공부했었는데 이 책 도움 많이 되었습니당
감사합니다~ 인풋을 입력하면 자꾸 타이핑한게 리렌더링되면서 초기화되서요 ㅎㅎ
뭔가 취업에 대한 메리트는 아니지만.. 그것과 별개로 경험은 언젠가 다 도움이 되는 것 같다는 생각도 듭니다. 라이언님과 결이 다른 부분이긴 하지만 저는 비전공자인데, 이전 전공이 현재 개발을 하는데 있어 큰 도움이 되고 있어요. 서비스가 제 전공과 연관된 서비스를 만들다보니요..
타입을 지정하고 있는데 온체인지부분을 어떻게 해야할 지 몰라서 캡쳐 올립니다.
사진
부모요소 온체인지
사진
자식컴포넌트
사진
자식컴포넌트 내부
사진
오류
Function 아닐까용
다른 타입은 지정을 했는데 온체인지 부분을 props로 받아오면서 자식요소에서 어떻게 지정해야 할 지 모르겠습니다.
흠 그건 리렌더 잘못이 아닌 거 같은데요?
리액트가 최적화를 해서 버그가 생길 수는 있지만 리렌더로 인해서 버그가 생길 수는 없는 구조라
IonInput 에서 받는 onIconChange 이벤트 정의를 확인하시고 같은것을 넘기실 수있게 해야할거같아요
리액트가 그 성능 다 버리고 번들 사이즈 버리고 vdom까지 써가면서 챙기려고 했던 게 "우리는 메모리랑 돔 사이에 값 달라서 버그 생기는 일 없다" 인데 버그가 생기면 안되지 않을까요..?
모달에 input state를 주입하셔서 사용하는거라면 state가 변함에따라서 modal 전체가 새로 렌더링되기때문에 생기는 문제라고 생각됩니다
동영상
저도 비슷한 문제를 겪은적이있는데 ref.current를 이용해서 해당 input의 값을 참조하는 방법으로 해결했어요
요게 유즈콜백 적용전 리렌더 문제구요
전체적인 코드 구조를 고치는 게 맞을 거 같긴 해요 터진 수도관은 한쪽 막으면 다른쪽 터지고 다른쪽 막으면 또 다른쪽 터지는 법이라
동영상
요거는 유즈콜백 적용하고 리렌더가 되지 않는 화면입니다
저 페이지가 modal써서 만든 페이지인가요?
넵넵 그러니까 리액트 철학에 맞게 코드가 짜였으면 유즈콜백 적용 전같은 버그가 생길 수 없을 거 같다는 의견이었어요
물론 해결이 됐다면 그냥 넘어가도 될 일이긴 하지만, 지금의 해결방법이 뭔가 우회책 같은 느낌이라 나중에 또다른 문제가 터져서 그때 다시 리팩토링하게 될 수 있을 거 같아요
타입지정문제 해결했습니다~ 감사합니다~
사진
네 모달쪽입니다~
아 리액트를 구현하는거에만 급급하게 배우다 보니 심도있는 사용법에 너무 약하네요 ㅜ
저도 델님 의견이랑 같은 생각인데요 인풋을 넣을때마다 리렌더링 되는건 코드 구조가 인풋을 넣을때마다 리렌더링 되게 구조가 짜여져 있을 가능성이 더 높다고 보여지고 구조를 바꾸는게 조금 더 근본 대책이지 않을까 조심스레 말씀드려 봅니다
저게 모달 외부에서 state 선언해서 모달에 전달해서 사용하다보니 모달 전체가 리렌더링이 되어서 발생하는 문제일듯합니다.
저는 모달 전체가 언마운트 후 다시 마운트되어서 발생하는 문제일 거 같다는 쪽에 한표 던지겠습니다
아 네 맞아요! 모달외부에 스테이트 선언했습니다!
네 델님이 말씀하신게 정확합니다 모달 내부에서 useEffct 콜백함수에서 로그찍어보시면
언마운트가 되었다가 다시 마운트될거에요
아 그렇네요
그런데 이상하게 이상한 부분에서 해결이 되었습니다.
타입지정하고 onIonCange부분에 이벤트정의를 하니까 유즈콜백 사용하지 않아도 리렌더링이 되네요
그게 가능한가요..?
문제상황에서는 타입지정을 어떻게 해야 할 지 몰라 any로 놔두고 onIonChange={onChange} 이렇게 되어있었는데
사진
타입지정하고 onIonChange={()=>onChange} 이렇게 바꾸니 해결이 되었습니다
혹시 예비군 훈련을 가는게 연차를 쓰라고 하면 어떻게하면되나요?
이게 뭐지
() => onChange() 말고 () => onChange 로 바꾸셨다구요?
예비군 훈련에 연차라니
이거정말 귀하네요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 잠시만요 코브 복붙할게요~
맵네요..
그럼 상위 모달의 state 변경 안되고 있는데 그냥 비제어 방식으로 폼 수정되고 있는 거 아닐까요?
예비군은 유급 처리 아닌가요…ㅋㅋㅋ
ㅋㅋㅋㅋㅋ오반데요 이거
불법아니에요?
맞아요 불법일텐데
회사가 너무 매운맛인데요...
사진
귀하다.. 예비군 연차..
아.. 그렇네요.. 코드를 수정해야겠습니다 ㅎㅎ
이부분 회사에서 해결을 안해주면 노무사쪽에 연락해보면될까여??
FE몬님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
헐... 심하네요
슬프네요
안녕하세요! 혹시 react-dnd-treeview 사용해보신분 계신가요?
사진
스타일 컴포넌트모듈화시 childrend 타입을 뭐로 정하는지 혹시 아시는 분 계실까요?
React.ReactNode
기본 태그 타입을 extends 하시면 될 것 같아요.
React.ReactNode 입니다
PropsWithChildren 사용시 타입을 지정해주지 않아도 됩니다 !!
import React, { PropsWithChildren } from 'react';
혹시 import해야하나요 이걸로는 똑같이 밑줄나오네요 이걸로도 해보고싶었는데 안되네요
감사합니다!^_^
네 리액트 모듈에서 불러오는거라서요
import React from 'react'
이렇게만해와도 사용가능하고요
import {ReactNode} from 'react'
이렇게도 사용가능하고요
넵 import해야 합니다
아래와 같은 에러가 생기는ㄷ ㅔ모듈시에는 tsx 파일로 하면안되나요
사실 PropswithChildren도 내부적으로 React.ReactNode 쓰고 있습니다
사진
tsx파일로 했더니 문제 생겨서 ts해도 동일해서
여기서 확인가능해요
tsx는 마크업을 무조건 리턴시켜줘야하지않나요
ts에선 jsx를 못쓰고 tsx에선 쓸 수 있죠
그냥 어디에 꺽쇠 하나 더 쓰신 거 같은데..ㅋㅋㅋㅋㅋㅋ
vs code껏다키니까 제대로 되네요 ㅜㅜ 아...
앗 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
react 기본 셋팅 해놓은 boiler plate 코드들을 어디다가 올려놓고 갔다쓰는게 효율적일까요?…
깃헙 프라이빗 레포
??
github template repository?
근데 경험상
그냥 그때그때 복붙하는게 총 시간량 합으로 따졌을 때 제일 나은 거 같아요
아하……….
뭐 하나 만들어놓으면 그거 유지보수하는 것도 일이라..
뭐 하나 추가하고 싶으면 그냥 추가하면 되는데 여기도 추가하고 template에도 추가해야 되니 귀찮더라구요
져니님이 나갔습니다.
저는 이거 complete~ 부분이 가려져 있는 그림 갖고 있는데 여태 complete sucks인줄 알았는데 답을 알아가네요..
사진
이 그림 좋아합니다
앗 지금까지 예제 프로젝트 하면서 App component에 모든 State를 넣고 input 넣을 때마다 그 State를 바꾸고 그 State로 input 재렌더링하고 있었는데 혹시 Input 관련해서, 다른 State에 영향을 주지 않는다면 Ref를 쓰는 것이 더 좋은 practice인가요??
react hook form 사용해보세요
react hook form도 결국 state 내부적으로 쓰지 않나요?
저 위상황은 좀 특수한 케이스라
아 그런가요? 조금더 알아보겠습니다 감사해요
곰곰님 혹시 아까 ref.current 사용해서 해결하셨다고 한 거 자세하게 들을 수 있을까요?
사용자가 입력한 값이 화면에 보이려면 리렌더링이 되어야하지 않나여..? ref를 쓰면 리렌더링이 안되니까 타이핑해도 화면 변화가 없을 것 같은데..
아 저는 psy님과 동일한 상황은 아니였고
실시간으로 렌더링해서 보여주는게 아니라 마지막 submit할때만 참조만 했으면 되는 상황이라
그렇게 해결을 했었어요
아 그런가요? 알겠습니다 ㅎㅎ
지금 해볼 수 있는 건 다 해보고 있습니다 . ㅜㅜ
케바케로 결정해야 될 것 같은 느낌이 물씬 나는군요…! 알려주셔서 감사합니다!
처음에 저도 해당값을 state로 가져왔었는데 psy님과 동일하게 언마운트되는 문제가 발생했었거든요.
모달 사용하기 어렵네요 ㅎㅎ
혹시 keyframe이나 transition으로 fadeout 시키면서 해당 영역 자체도 같이 없앨 수는 없는 걸까요? keyframe으로 display 쓰려니 none->block은 되는데, block->none은 안된다고 하고, visibility은 애초에 공간은 안사라진다고 해서 어떻게 해야 할지 잘 모르겠네요..
어 이상하네요? 저도 거의 비슷하게 코드 짜는데 왜 되는거지? 갑자기 오싹하네요
저는 customhook 방식으로 모달 빼서 사용했을때 해당 문제가 발생했었어요
아 혹시 setInputs가 있는 것을 보니 `const [inputs, setInputs] = useState({});` 와 유사하게 input 데이터가 있을텐데 저는 이런 값들을 ModifyProfileModal 함수에다 props로 항상 주입해주었습니다!
제가 생각했을때는 부모에서 커스텀훅으로 모달 선언후 자식에게 부모의 state 전달 및 변경되었을때 부모 컴포넌트또한 렌더링이되면서 customhook으로 가져온 모달자체도 새로 선언이되면서 언마운트가 일어나는것이라고 생각하고있어요
그래서 usecallback을 썼을때, 부모컴포넌트가 렌더링이되어도 해당 모달은 유지되기때문에 해당문제가 해결된것이라고 생각합니당...
아 네네 맞아요 그렇게 사용했습니다.
앗 제가 쓴 글이 되려 방해만 드릴수도 있겠네요, 더 공부하고 이 주제를 다시 방문하겠습니다!
프롭스로 어떤값을 내려준건가요?
일단 유즈콜백은 되는 것 같아보이는데 근본적으로 수정해보려구요
잠시만요 제가 진도가 다 나간 게 아니구 상황이 다를 수도 있어서 맥락이랑 같이 코드 보여드릴게요! 오히려 방해드릴까봐 조심스러워서요!
ㅋ 아닙니다 배우는 단계니까 여러가지 시도해봐야죠 ㅎㅎ
근데 해당 함수를 callback을써서 메모이제이션한거라 저는 저렇게써도 괜찮치 않을까싶은데
ㅋ 일단은 최후의 보루로 놔두려고요 ㅎㅎ
제가 생각했을때 원인은 부모컴포넌트 렌더링에따른 customhook 모달의 재선언이라 이것만 메모이제이션 해주면 해결이라고 생각하거든요…
근데 저도 커스텀훅으로 모달빼서 사용하면서 이게 잘 사용하는건가 좀 확신이 안드는상황이라.. 잘 모르겠네요 @.@...
인사하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
네 저도 부모쪽에서 리렌더링을 하는 것 같아요 인풋박스상태관리를 부모에서 하는데 자식요소에서 인풋박스 값을 바꾸면 부모요소 인풋박스상태가 바뀌니 리렌더링을 하고 또 리렌더링이 되니 다시 초기값으로 돌아오고
저는 input의 value값을 다음과 같이 state로 저장하였었구요 https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/shell/components/UserInput/UserInput.js#L32-L42 다음과 같이 props로 내려주었습니다. (예시에서는 username이며 input의 value에 들어갑니다) https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/shell/components/UserInput/UserInput.js#L32-L42
왓 감사합니다! 확인해볼게요!
pointer-event는 어떨까요?
혹시 그리드 전문가 계시나요? ㅜㅜ 스크롤 내릴시 뒷배경도 유지 시키면서 그리드도 스크롤 형식으로 만들 고 싶은데, 화면 크기를 벗어나면 배경색은 사라지는데 어떤 부분을 찾아봐야 하는지 아시는 선생님 계실까요 ㅜ?
사진
김현진님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
옆자리 동료는 어떻게 대기업으로 이직했을까? 😲 AI,IoT,임베디드 커리어 스펙업을 위한 교육과정! 실무 프로젝트형 교육듣고 포화된 취업시장, 대체불가능한 인재 등극하자! 자세히 알아보기▶ https://bit.ly/3OACOF1
사진
?
으음~ ㅎ
광고인가
🫣
아 빌게이츠 형처럼 초당 140달러 벌고 싶다
한달 반만에 기획부터 개발까지 가능해진다라..
사칙연산 계산기라면 가능할지도…?
김현진님이 나갔습니다.
44일만에 연봉 두배만들어줄수있으면 당장 사표쓰고 배우러 가고싶네 ㅋㅋㅋㅋ
저걸 시에서 운영한다는게
안녕하세요! 지금 웹뷰앱으로 개발하고있는데 홈 버튼이없는 아이폰 기준으로 최상단 최하단에 배경컬러가 적용이 안되는데 어떻게 해결하면 좋을까요.? body부분에 height:100vh 상태입니다..!
사진
직업은 한 사람의 인생이 걸린 일인데 저런 광고로 사람 현혹하지 말아야 할텐데 말이죠 ㅠㅠ
그냥 쓰고 계신 모달이 어딘가 잘못된 친구인 거 같아요
리액트에서 렌더는 숨쉬듯이 일어나는 일인데 렌더가 일어난다고 모달이 언마운트된다는게 말이 안되는거라
모달 직접 만들어서 쓰고 계신가요?
ionic react라는 라이브러리에 내장되어있는 모달입니다~
사진
정상적인 모달이면 그냥 이렇게 써도 돼야되는거라
혹시 요 부분 아시는 분계실까요 ㅜㅜ main 안이 div에서만 스크롤 해주고 싶은데 전체가 스크롤 되는 형식이 되어서 배경이 씹히는 현상이 있는데
이게 참 이상한게 다른 팀원이 작업한 참고할 모달이 있어서 그대로 만들었거든요 그런데 제거만 이러는거 보면 뭔가 어딘가 잘 못 된 것 같습니다 ㅎㅎ
약간 정신줄 놓은 것 같아요
혹시 모달 쓰실때 부모단에서 조건문이랑 같이 사용하시는건 아니져?
네 조건문은 없습니다
일단 좀 더 파봐야겠습니다
모달 쓰시는쪽 코드 볼 수 있을까요?
아 잠시만요~
import { Icon } from '@iconify/react'; import { IonButtons, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonModal, IonRow, IonText, IonTextarea, IonToolbar, } from '@ionic/react'; import React, { useEffect } from 'react'; import styled from 'styled-components'; import { ProfilePhotoSegment } from '../../components/Index'; interface IonRowStyledType { margin?: string; } const IonRowStyled = styled(IonRow)<IonRowStyledType>` display: flex; justify-content: center; ${(props) => (props.margin ? `margin:${props.margin}` : '')} `; const ModifyProfileModal = ({ show, profilePhoto, nickname, intro, onClose, onChange, }: { show: boolean; profilePhoto: string; nickname: string; intro: string; onClose: () => void; onChange: (e: any) => void; }) => { useEffect(() => { console.log('마운트'); return console.log('언마운트'); }); return ( <IonModal isOpen={show} onDidDismiss={() => onClose()}> <IonHeader mode="md" className="ion-no-border" style={{ borderBottom: '1px solid #dddddd' }} > <IonToolbar style={{ padding: '0 16px' }}> <IonButtons slot="start"> <Icon icon="ic:round-arrow-back-ios" fontSize="24px" onClick={onClose} /> </IonButtons> <IonText style={{ fontSize: '16px', fontWeight: 'bold', position: 'relative', display: 'flex', justifyContent: 'center', }} > 프로필 수정 </IonText> <IonText slot="end" style={{ color: '#3171FF' }}> 완료 </IonText> </IonToolbar> </IonHeader> <IonContent className="ion-padding-horizontal"> <IonGrid className="ion-no-padding"> <IonRowStyled margin="28px 0 0 0"> <ProfilePhotoSegment profilePhoto={profilePhoto} heightAvatar="88px" widthAvatar="88px" /> </IonRowStyled> <IonRowStyled margin="12px 0 0 0"> <IonText style={{ color: '#3171FF' }}>프로필 사진 바꾸기</IonText> </IonRowStyled> <IonItem className="ion-no-padding"> <IonLabel position="stacked" style={{ fontSize: '12px' }}> 닉네임 </IonLabel> <IonInput style={{ fontSize: '14px' }} name="inputNickname" value={nickname} type="text" placeholder="닉네임을 입력해 주세요" onIonChange={onChange} ></IonInput> </IonItem> <IonItem className="ion-no-padding" style={{ marginTop: '28px' }}> <IonLabel position="stacked" style={{ fontSize: '12px' }}> 소개 </IonLabel> <IonTextarea style={{ fontSize: '14px' }} name="inputIntro" value={intro} placeholder="자기소개를 부탁해요" rows={3} maxlength={80} onIonChange={onChange} ></IonTextarea> </IonItem> </IonGrid> </IonContent> </IonModal> ); }; export default ModifyProfileModal;
모달 컴포넌트 파일입니다.
import React, { useRef, useState } from 'react'; import { IonHeader, IonToolbar, IonButtons, IonGrid, IonRow, IonCol, } from '@ionic/react'; import styled from 'styled-components'; import { Icon } from '@iconify/react'; import { NicknameSegment, ProfilePhotoSegment, Text, } from '../../components/Index'; import ModifyProfileModal from './ModifyProfileModal'; import { StyledInput } from '../signIn/LoginSection'; const IonColStyled = styled(IonCol)` padding: 0; align-self: center; `; const Profile = () => { const [show, setShow] = useState(false); const [profilePhoto, setProfilePhoto] = useState( '/assets/icon/travelog/blue-face.svg' ); const [mockMyProfile, setMockMyProfile] = useState({ nickname: '용감한 여행자', travelLog: 5, follower: 1312, following: 1362, intro: '안녕하세요! 무계획 여행을 좋아하고, 잘하는 용감한 여행자 입니다. 잘 부탁드립니다.', }); const [inputs, setInputs] = useState({ inputNickname: '', inputIntro: '', }); const { inputNickname, inputIntro } = inputs; const onChange = (e: any) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }; console.log(inputs) return ( <> <IonHeader mode="md" className="ion-no-border"> <IonToolbar style={{ padding: '0px 16px', marginBottom: '15px' }}> <NicknameSegment nickname={mockMyProfile.nickname} fontWeight="bold" fontSize="20px" /> <IonButtons slot="end"> <Icon icon="ps:plus-box" fontSize="24px" style={{ marginRight: '16px' }} /> <Icon icon="mi:settings" fontSize="28px" /> </IonButtons> </IonToolbar> </IonHeader> <IonGrid style={{ padding: '0 16px' }}> <IonRow> <IonCol className="ion-no-padding" style={{ marginRight: '12px' }}> <ProfilePhotoSegment profilePhoto={profilePhoto} heightAvatar="88px" widthAvatar="88px" _onClick={() => setShow(true)} /> </IonCol> <IonColStyled> <Text count={mockMyProfile.travelLog} textTitle="트래블로그" countSize="14px" fontSize="12px" justifyContent="center" /> </IonColStyled> <IonColStyled> <Text count={mockMyProfile.follower} textTitle="팔로워" countSize="14px" fontSize="12px" justifyContent="center" /> </IonColStyled> <IonColStyled> <Text count={mockMyProfile.following} textTitle="팔로잉" countSize="14px" fontSize="12px" justifyContent="center" /> </IonColStyled> </IonRow> <IonRow style={{ marginTop: '20px' }}> <Text textTitle={mockMyProfile.intro} fontSize="14px" /> </IonRow> </IonGrid> <ModifyProfileModal show={show} onClose={() => setShow(false)} profilePhoto={profilePhoto} nickname={mockMyProfile.nickname} intro={mockMyProfile.intro} onChange={onChange} /> </> ); }; export default Profile;
부모 컴포넌트 파일입니다.
사진
저는 이런식으로 만들어서 사용하고있어요
div만 스크롤 해주고 싶다면 div 태그에 overflow:scroll을 적용하면 되지 않을까요?
흠 그렇게 쉽게 안되더라구요.. 뒷배경도 같이 스크롤 되면서 화면값 100% 넘어가면 흰색바탕나오네요
배경이 이미지라면 요소에 object-fit: cover; 같은 걸 넣는다면 어떨까용
수정하시는 건 inputs인데 띄워주시는건 mockMyProfile인 거 같은데요..?
전체의 overflow hidded을 주면 스크롤 자체가 안되니까 그것도 좀 이상한거 같은데 .. 흠 div 안의 내용물의 div만 스크롤바를 주고 싶은 상황이긴합니다.
모달부분 빼고 생각하면 const [inputs, setInputs] = useState() const [mockMyProfile, setMockMyProfile] = useState() return <input value={mockMyProfile.뭐} onChange={(e) => setInputs(뭐)} />
아 넵 맞습니다 최초로 띄워줄 값때문에mockMyProfile내에 있는 값을 사용했습니다
사진
이런 상황인 거 같은데
안녕하세요 국비로 비전공에 수업듣고 퍼블리셔나 프론트 실제로 초봉이 어느정도부터 시작일까요?
그럼 지금 작성하신 대로 정직하게 잘 동작하는 거 아닌가요..?
2000대부터 6000꺼지 다양합니당..
질문이 너무 추상적인것 같지 않나용
최저 => 무한
jj님이 나갔습니다.
연봉은 본인 실력대로 받는게 아닐까요~?
개발자라고 다 같은 월급받고 일하는게 아니에용
맞아요
어제 직업 상담하시는분과 이야기 하게 되었는데 기사나 인터넷은 개발자에 대한 환상이 많고 현실은 최저임금정도부터 시작이라고 하더라구요
아 지금 코드 내용은 인풋내용을 바꾸면 바로 리렌더링이 생기고 다시 초기값으로 보여지는게 맞는거라는 말씀이시죠?
저는 적은데 남은 많이 받고 그런게 월급입니다
10% 실력 + 20% 운 + 70% 수요공급곡선
실력있고 본인어필 잘하면 잘받는게 연봉이라고 생각해용
초봉 6000 실제로 적지 않게 있습니다~! 당연히 쉽게 받을 수 있진 않지만
수요공급 곡선이 급격하게 줄어드는중..
ㄷㄷ.. 6000;;
웹페이지 url로 접속하는 것과 nextjs의 Link 태그로 접속하는 것의 차이가 뭐가 있을까요?
와…
프론트에서 실력이 있다는건 어느정도의 기준일까요
타전공 우러욧..
spa가 왜 생긴건지는 혹시 아실까요?
url로 접근하면
적습니다...
한 컴포넌트에서 document querySelectorAll를 쓸 일이 있는데 url접속했을 땐 값을 감지하지만 Link태그로 이동할 땐 감지를 하지 않네요..
모든 DOM을 가져옵니다
link로 페이지 이동시에는 필요한 DOM만 바꾸고요
오.. 그런 이유라면 저게 설명이 되는군요..
그건 전공생 스펙있는 대기업 초봉 아닐까욤 인터넷에 비전공분들은 연봉 관련 그런 이야기를 별로 안하시잖어요
와우 코드스테이츠 국비 심사 떨어졌네요 it, 개발자로 전환하시려는 분들이 생각보다 훨씬 많은 모양입니다 저같이 노베이스 상태에서 배우시려는 분들 기본기가 있어야 국비도 들을수 있는것같으니 간 그만보고 그냥 지금부터 빨리 공부시작하시는게 나을것 같습니다
저 아는 지방 개발자 초봉 2400 받더라구요ㅋㅋㅋ진짜 케바케인듯
여기 올라오는 질문들에 대부분 답변할수있으면 실력있는거 아닐까요 ㅎ..
언론에 나오는 건 뭐 다 상위 1%죠 모
제 주위에도 마치 공무원 시험 준비하듯이 많이 시작하긴하더라구요
그정도가 보통 시작이지요..?
음.. 전공생 스펙있고 돈 잘 주는 회사 붙는 사람이 많아요
본인 하는만큼 받는거예요 보통~ 이런건 없습니다
저 2500시작해서 1년하고 3200으로 올렸어요!
개발자 전환을 했는데 해보니까 실력없으면 그냥 중소기업 직장인 월급과 다를게 업슨ㄴ거 같습니다 ㅋㅋㅋ
그리고 전공생 아니어도 잘 하고 타이밍 잘 타면 너무 당연히 가능하죠 ㅋㅋㅋㅋ
제 기준
요새 서울에 중소기업 스타트업 3000~3500
이정도가 대부분이었어요!
물론 지방에서
수요공급곡선이줄어든다는게 무슨의미일까용..
지금 개발자 혹한기입니다
채용이 줄고 있다는 뜻인것같군여
모든경제가 얼어붙어서...
스타트업들 투자금이 줄어들어서 고용이 줄어든다는 말이죠
작년보다는좀 식은것 같긴해요
채용시장이 모든직군 불문하고 다 얼어붙고있어요
그만큼 실력이 중요해졌습니다
코테 공부해야합니다
보통 그 정도로 시작하는거지요.?
똑같은 실력이어도 작년에 더 높은 연봉으로 더 쉽게 합격할 수 있었고 올해는 더 낮은 연봉으로 더 어렵게 합격한다는 말이죠
서울은 모르겠는데 지방은 그래요
다른 변수가 너무 많은데 “보통”을 원하시면 최저 시급으로 계산하세요
열심히 준비하시면
잘받으실거에요 본인 공부에 믿음을가지세요 ㅎㅎ
되게 비관적으로 보시는 듯 해서 믿으실진 모르겠지만 제 주변 친구들 보면 평균이 5000이었네요
네 왜냐면 현실을 제대로 알고 시작하는게 필요하니 여쭤보고 싶었어요
물론 작년기준이었긴 했습니다
일부의 평균이라 생각합니다
근데 실제로도
신입초봉 4000이상주는데도 꽤많아요
화이팅입니다..
실제 고용 시장에서 신입 평균 5천 절대 안됩니다
솔직히 잘받는 사람 주변에는 잘받는사람만 있어서
준비 잘하시면 가능해요 ㅋㅋㅋ
혹시 시간되시면 제가올려놓은 모달코드 봐주실수있을까요? 사용방법은 부모단에서 선언후에 하위컴포넌트를 감싸는 방법으로 쓰고있어요..!
신입 초봉 5000이요..?
비관적이라기 보다는 저고 전에는 낮아도 3000정도부터 시작하지 않을까 싶었는데 실제 입사하는걸 많이 본 분 이야기가 현실은 최저임금정도부터 시작이라고 하셔서 알아보고 싶었어요
제주변엔 신입 전부다
3400입니당 ㅋㅋ
갭이 엄청 크긴 하죠..
저도 psy님과 비슷한문제가 발생해서 callback으로 감싸줬습니다.
한 5명정도
오오
적절하네요
잘받는 사람은 그만큼 외부 활동도 많이 하고 회사 동료나 주변 사람을 보면 다들 그정도 하는사람이니 주변사람들 평균 연봉이 높을수밖에 없죠
혹시 수습끝나고 짤리신분있나요
ㄷ ㄷ
이게 정확하죠
궁금하네요
전 5천 받다가 3천 5백 가요...ㅋㅋ
네?
얘기 들어본 적은 있어요
뭔가 예엣날에 비슷한 코드 봤었는데
대기업협력사 => 스타트업으로 갑니다
어쩌다가요..
연봉에 연연하지 마셔요~
실력만 높이면 됩니다
아이고
맞아요 저도 그 마인드
실력이 최우선이라고 생각합니다
초봉에 연연하지 않고
예엣날에 봤던 이 코드 생각나네요 ㅋㅋㅋㅋ @곰곰
온젠간 다시 광풍이 불겠죠.. 그때 이직해야지 ㅋㅋ
사실 뭐 추상화 레벨만 잘 짜놓고 동작 원리 정확하게 파악하고 있으면 잘 짠 코드 아닐까요..?
저는 좀 다르게 짜긴 합니다 :)
저도 저때보고
콜백으로 해결한거라(머쓱)
하나만 더 여쭤봐도 될까요?
그냥 저는 컴포넌트를 리턴하는 방식을 안 채택하고
그러니까
const { Modal } = useModal(); return <Modal> ...
이거 말고 그냥 Modal 자체를 컴포넌트로 만들어서 쓰긴 해요
감사합니다 해결했습니다 !!
전 모달을 공통 컴포넌트로 만들어뒀는데 델님처럼 만들어봐야겠네요
그 방식이 DX가 더 좋다고 느껴서 그렇게 하는데 (mui 등 많은 ui 프레임워크들도 그렇게 하고 있고?), 곰곰님 취향에 맞게 버그 안 나게만 잘 쓰시면 어떤 방식이든 문제 없지 않나 싶어요 :)
엥 저도 그렇게 합니다
아 아니에요 답변 감사합니다!
저도 제 동기들은 다 생신입 5천으로 갔엇네요 적어도 4500 이상
최근본상품 구현할때 state가 아니고 localstorage를 사용하는 이유는 새로고침 시 데이터가 유지되는 것 때문인가요??
혹시 다른 이점이 더 있을까요…??
손을 번쩍 든 무지님이 나갔습니다.
그렇군요.. 감사합니다...! 말씀해주신 방법도 한번 써봐야겠네요
우워..
넥스트 레벨이네요..
넵넵! 여유되시면 Mui 소스코드 한번 뜯어보시는 것도 좋을거같아요!
2군데 이상붙으면 오퍼시 협상하고 그러다보면 연봉이 많이 오르는거 같더라구요!
말씀하신 이유로 localStorage에 저장하는데 공부가 부족해서 다른 이점은 모르겠네요😅
전공하셨나봐요
마이크님 전공이 중요한게 아니예요 물론 전공자가 더 유리한부분이 있지만
제가 어제 현실적인 이야기를 많이 들어서요 오늘 좀 혼란스럽네유
전공생이라고 다잘받는건 아니에요 중요한건 실력이고 얼마나 성장할수있는가를 증명해내면되요
ㅎㅎㅎ
맞아요 실력도 중요하지만 그만큼 어필하는거도 중요한거 같아요
https://www.youtube.com/c/hyosunglim%EC%9E%84%ED%9A%A8%EC%84%B1/featured 제가 본 비전공분 중에 이런분이 계셨는데 노베이스에서 진짜 딱 반년 엄청 열심히 하시고 지금 유명 스타트업가셨어요
html css 진짜 기초부터 준비하셔서 책도쓰시고
다 본인이 하는만큼 가는겁니다
오 저도 이거 봤습니다 !
ㄷㄷ
저도 보면서 동기부여 많이 받았네요
와 반년만에.. 대단하시네요
저도 부트캠프 하다보면 사람자체가 코딩인 사람이 있는 것 같아요
분명 처음엔 html로 화면에 hello world찍던 분이 어느새 저보다 훨씬 잘해지셨어요
아 저분 영상 한번본거같네여
아무것도 모르고 시작했는데 엄청빠르게 배우는 사람
한달동안 코딩만 하면 어떻게될까 영상
맞아요 분명 같은수준이었는데 순식간에 넘어서는 분들이 잌ㅅ더라고요
평균이란 게 있고 기본 실력이란 게 있지만, 굳이 그걸 보고 자기 실력에 천장을 미리부터 만들 필요는 없죠 오히려 더 잘할 수도 있는간데
맞습니다. 저도 처음엔 그런분들 보며 코딩머리는 따로 있는걸까ㅠ 하고 좌절도 했었는데 멀리 봐야죠..! 인생은 길고 우리는 젊고(?) 아직 모르는거예오 다들 파이팅
여기에 질문하기에 조심스러운 내용이었던거 같아요
그냥 시작도 전에 한계를 잡아놓지 말란 말씀이였어요 정 불안하시면 다른 길도 많으니 본인 선택이기도 하고요
확실한건 난 비전공이니 최저밖에 못받을거야 sns에서 개발자는 적어도 4천은 받고 시작한다는건 다 거짓말이야 이런건 아니라는거예요(조금 거짓말이긴 하지만)
제가 어제 들은 내용이 틀린건지 확인해보고 싶었어요, 어제는 비전공 국비는 최저시급정도로 보통 시작한다고, 인터넷에는 환상이 많이 끼어있다고 하더라구요. 저도 배우는 입장에서 믿고 싶지는 않지만 현실은 알아야할가 같아서요. 그분 이야기가 틀린건가용?
저라면 고민할시간에 코드한줄을..
최저시급은 너무 갔네요..
감사합니다 두 군데 붙기를..
그말 듣고 오늘 많이 혼란스럽더라구요
얼마나 더 말해드려야 믿으실까요..?
아니에요 잘 이해했습니다 감사합니다
정답은 없다는거예요
저 영상처럼 한달내내 코딩한번 해보세요 아침 9시부터 밤 9시까지
밥만 먹고 코딩하는 것도 나름 재밌어요
서버쪽 auth 관련 공부하는중인데요,
생성된 jwt를 유저정보를 저장하는 db에 같이 저장하나요
아니면
jwt만을 위한 db를 따로 두나요?
저는 비전공이고 교육프로그램도 안다녔지만 독학으로 님이 생각하는 좋은 연봉 주는 기업 여러개 제의 받았었어용. 제가 그렇게 잘하는 것도 아니고여..
Jwt를 디비에 저장하나요?
구인공고를 보면 최저시급도 꽤 존재합니다. 그러나 1년 반, 2년만 버티면 다른 현실이 되어 있겠죠?
jwt를 db에 저장하나요?
에구
리프레시용 jwt는 디비에 저장하긴 해요
jwt는 디비에 저장안하려고
저희도 refresh db에 저장해요
jwt 종류가 2개인가 보네요
리프레시는 워낙 의견이 분분하긴 한데 액세스는 저장안하죠 보통
access 랑 refresh
음.. 더 찾아보겠습니다
감사합니다
Jwt방식이라고 생각하면되요ㅋㅋ 토큰 종류가 여러개에요ㅋㅋ
근데 한편으로는 돈 적게 줘도 저는 개발할 것 같은데, 뭔가 이 세계에 재미를 느끼셨으면 좋겠네요 🙏
Css님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
도움을 구합니다
사진
어서오세요 무슨 일인가요?
푸터 바로 위에 버튼이 위치하게하고싶은데
안되서요ㅜ
양옆 여백이랑 다른 버튼이랑 width도 같게 줘야해요
position: absolute나 fixed는 써보셨나요?
네 써봤는데 그 다음에 width랑 여백이 안먹혀서
다른 방법 찾아보던중입니다ㅜ
width말고 left right를 줄수 있습니다
left: 20px; right:20px
그거도 안먹어서요ㅜ
부모 요소에 relative를 주고 버튼Wrapper에 absolute를 주면 되지 않을까 싶네요.
코드샌드박스로 간단한 html, css파일 만들면 수정봐드리기 편한데..
코드를 봐야 알거같아요
코드 작성해서 올려드릴게요. 지금은 집에 가는중이라ㅜ
혹시 ec2에서 next js 배포해보신 분 있으신가요?? 배포했을 때 Ssr, ssg, isr이 어떻게 적용되는지 잘 모르겠네요 찾아보니까 거의 Amplify 이용하는 것 같은데 왜인지 얘도 계속 빌드 실패해서여ㅠㅠ
저 ec2에서 해봤어요!
오 코드샌드박스 되게 좋네요! 아까 얘기 나온 input 직접 확인해보았습니다! https://codesandbox.io/s/temp-react-input-puzzle-demo-iicceb 특별한 건 없으니 계속 지나가겠습니다!
오옷 혹시 ssg나 isr 구현을 위해서 따로 설정이 필요한가요?
저도 해당 환경을 도커에서 배포해본 적이 있는데 인턴일 때라 잘도 모르고 마주친 오류도 많지 않지만 serversideprops 문제가 가장 많았어요
아뇨! 로컬에서 되면 배포환경에서 똑같이 됩니다
오 그렇군요!!
여기에서 로그인 인증 인가를 ssr방식으로 하셨는데
ElastiCache로 redis에 토큰 저장하시고 가져오는 방식으로 하셔서 따로 구현을 해야하는 줄 알았는데
그냥 돌아가는 군요!! 감사합니다
그건 ssr이라서가 아니라 그냥 따로 해야되는거같은데요..?
nextjs에서 서버사이드로 인증이 필요할 경우가 많이 존재한가요?
보통 next.js프로젝트 ec2로 배포하나요?
배포하기 나름 아닐까요
사실 100프로 이해하지는 못해서 제가 잘못 알고 있을 수도 있어요...
사진 2장
어떤 상황에서 어떤걸로 배포하는데 효율적인지가 궁금해서요ㅎㅎ
velog에 글 올린 거 여기다가 올려도 되나요?? 피드백 같은 거 받고싶은데...
서버리스조 되고
서버리스로도 배포가능하고
ecs에 올려도 되고
네!! 올려주세요
네네 s3랑 클라우드프론트로도 가능하지만
읽고 피드백 부탁드려요 !!
어떤 상황에서 그런지가 궁금 하네요
쌩 비전공자들 부탬 출신이었어요
해보니까 말씀하신 내용이 맞습니다
그니까 구슬 주머니가 두개 있는데
왼쪽 주머니에 구슬을 넣고 오른쪽 주머니에서 찾고 계신거같아요
아 지금 수정해보고 있습니다!!
김명호님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 김명호님~ 반갑습니다 :)
어머 설명…! 너무 깔끔합니다
사진
선배님들 span은 class명이 있고 p는 없는데 p태그에 css속성을 줄 수 있는 방법이 있나요?
id가 있슴둥
span class 로 접근해서 부모 element 에 접근해서 줘보세요
아 JS 밖에 방법이 없군요 . .ㅠㅠ
답변 모두 감사드립니다
p태그에도 클래스 넣어주면되지않아요?
css자체엔 부모요소에 접근할 방법은 없습니다
parentNode..?
parentElement였나 헷갈리네요 근데 아닐수도..!
이모티콘
이모티콘
동기들이라구 하셔서ㅎ 부캠 동기들이었나봐요
브라우저의 사용자 에이전트(User Agent)에 얽힌 역사적인 이야기를 이해하기 쉽게 정리해봅니다. https://wormwlrm.github.io/2021/10/11/Why-User-Agent-string-is-so-complex.html?utm_medium=share
이분 글 참 좋습니다 유익하면서도 흥미로운 이야기입니다 ㅎ 한번씩 읽어보세요 ㅎ
질문이 있습니다! var obj = { a: console.log(this), // — ① window fn: function () { console.log(this); // — ② obj function fn() { console.log(this); // — ③ window } fn(); } } obj.a; obj.fn(); 위 코드의 3번째 부분은 왜 window로 출력되나요,,? 2번째 부분은 obj.fn에서 실행시켜서 obj가 출려되는 것은 알겠는데요! 같이 실행되는 fn()은 왜 window인지 잘 모르겠습니다. 선언될 때 window 객체 안에 들어가고 실행만 내부에서 진행이 되는건가용,,?
2번쨰는 함수 표현식 3번째는 함수 선언식으로 호이스팅의 차이가있어요
함수 선언문은 호이스팅이 일언가게되어서 스코프안에서 최상단으로 끌어올려져서 실행컨텍스트에 올라가게되어서
this에 window가 바인딩되는건가...
저도 조금 헷갈리네요 ㅠㅠ
삭제된 메시지입니다.
네 함수선언식은 호이스팅이 적용되고 this가 전역객체 window를 가르켜서 입니다~~
제가 말한게 맞나요?
아!!
멋쩍은 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
그러네요 감사합니다
멋쩍은 튜브님 반갑습니다 :)
안녕하세요
너무 헷갈려서 질문드렸는데 친절하게 답변해주셔서 감사합니다
:)
아닙니다 저두 대답하면서 헷갈려서 잘못된 지식 전달할까봐 좀 두려웠습니다
넵 추가로 this가 어떻게 바인딩되는지 알아보시면 도움 되실거에요
조금더 공부해야겠습니다 감사해용
호이스팅까지는 아니구요~ 그냥 자바스크립트 스펙이 그렇습니다 함수의 this는 global 객체이고 브라우저의 경우 window죠 ㅋㅋ ㅠㅠ ㅋㅋ ㅠㅠ
워낙 옛날에 만들었을때는 큰 고민을 안하고 만들었다는 후문이... 그래서 이후 "use str
그리고 이후 이건 좀 아니다 싶어 "use strict" 문법이 생겼고 엄격모드로 하게 되면 this가 undefined가 됩니다 module로 실행시켜도 그렇습니다
엇그렇다면 테오님 저도 질문하나 드려도될까요?
그냥 쓰면 안되는 문법 같은거라고 생각해주세요
네~
노드는 v8 엔진을 브라우저밖에서 사용하려고 만들어진 것이라고 알고있는데 그렇다면 같은 코드를 사용한다면 노드 런타임환경에서는 this가 window객체를 가리키는 일은 없는것이 맞나요?
긋긋 오늘도 하나 배워갑니다
취준생님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
globalThis 라고 전역 객체를 부르는 값이 존재합니다. 브라우저에서는 window 입니다.
취준생님 어서오세요ㅎ 반갑습니다.
안녕하세요~
앗 감사합니다 ㅎㅎ
직접 해보는게 진짜 도움 많이 돼요! 브라우저랑 노드환경에서 다양하게 테스트해보세요. 그리고 코어 자바스크립트라는 책 읽어보세요~ 자세하게 설명 되어있습니다
현업에서 쓸 일은 거의 없다고 보시면 됩니다. ssr객체를 다룰때 window를 쓰면 에러나서 쓰는 용도? 애초에 window에 뭘 다는것 자체가 편법 같은거라.. globalThis.xxx = xxx 를 만들어 두고 console에서 좀 편하게 보고 싶을때?
화살표함수는 this자체가 없어서 호출될때 상위스코프가 this로 바인딩된다고 알고있는데 맞나요?
맞아요 저두 ssr 환경에서 window객체가 존재하지않을때에만 사용했던것같아요!! ㅋㅋㅋ 감사합니다
선언형 함수는 this를 생성자에서 직접 바인딩해줘야하더라고요
이곳은 프론트엔드에 대해서 협업이나 실무 뭐든 개발을 준비하면서 궁금한 점들을 물어보고 내가 아는 것 공부했던 것등을 공유하면서 함께 성장하고자 하는 곳입니다. 편하게 궁금한 것들이 있으면 나눠보세요. ㅎ
맞습니다~
넹 지금 취준으로 국비 다니고 있는데 비전공자에 경력도 없어서 이력서를 어떻게 해야할까 고민중인데 팁 있을까요??
개발이 학력을 잘 안본다고 하는 것은 결국 학력보다 결과물이기에 포트폴리오와 깃헙을 위주로 결과물들을 계속 쌓아 갈 수 있기를 바랍니다
추가로 이런 뻔한 정답같은 얘기말고 조언을 드리자면 어디든 마찬가지겠지만 개발의 특성이 10년을 넘게 해도 어떻게 하면 문제를 더 잘 해결할 수 있을까를 계속 고민하는 곳입니다.
결과물을 만들어서 보여주는 것도 중요한데 그걸 통해서 이력서이후 면접 등에서 진짜 알고 싶은 것은 할 줄 하는 것만큼이나 얼만큼 고민을 해봤냐를 중요하게 생각합니다
그래서 뭘 공부하거나 만들때 어떻게 하면 에 대한 치열한 고민들을 해보시고 기록해두시려고 한다면 많이 도움이 될거에요~ 화이팅입니다!!
next js에서 getStaticPaths를 사용하려고 하는데요. 예를 들어서 [id] 페이지에서 사용하고 싶을 때 path로 들어올 수 있는 모든 id를 불러오려고 합니다 이런 경우에 서버 개발자에게 모든 id를 불러오는 api를 부탁하거나, 이미 있는 api를 적절히 불러와서 모든 id 배열을 만들 수 있을 것 같습니다 둘 중 어떤 방법이 더 적절하다고 보시나요?? 코드 가독성, 유지보수 측면에서는 전자가 나을듯한데 서버 개발 요소가 늘어날 것 같아서요
두 방법에 대해서 개발공수가 차이가 얼마나 나나요? 동작시키기까지?
개발 공수라면 투여 인력이나 시간 말씀하시는 걸까요??
넹
제가 백엔드는 잘모르지만 id 리스트만 보여준다고 했을 때 한 테이블에서 셀렉만 돌리면 돼서 크게 어렵지는 않을 것 같은데, 현재 진행 중인 프로젝트에서 프론트엔드보다 백엔드 개발 속도가 느려서 필수 api도 다 못 만든 상황입니다..
dependencies와 devDependencies 분류하는 부분에서 의존성은 패키지 하나하나 찾아봐야하나요?
감이 안오네요 ..
mvp 개발 중인 상황에서 렌더링 속도 개선 때문에 api 추가로 요청하는 게 살짝 눈치보여서요… 사실 이 이유가 가장 크네요 ㅋㅋㅋㅋㅋㅋ ㅠㅠ 요청하되 우선순위를 미뤄야 할까요
잘 몰라서 하는 말이지만 내가 처리할 수 있는 방법이 있고 만드는데 하루정도 수준이라면 일단 빨리 돌아가는 방법으로 먼저 만들고 아젠다를 띄워두는게 좋을 것 같긴해요~ 백엔드에게 미뤄야 더 좋은 작업들이 분명히 있는데 미루고 나면 다 부메랑이 되어 오더라구요
음 네네
말씀대로 일단 역량껏 만들어두고 따로 얘기를 해봐야겠네요!! 감사합니다
게임엔진보다 느리고 앱보다 퀄리티가 떨어져도 웹프론트가 가치 있는 곳은 빨리하라고(!) 프론트가 있는거다 라고 생각합니다 ㅋㅋㅋㅋ
감사합니다!!!
저 같은 경우는 백엔드 프로젝트 초반 셋팅이랑 구조잡는건 못하지만 만들어진 코드 참고해서 필드추가하거나 엔티티 구성하는 정도는 해보니 하겠더라고요. 그래서 프론트하면서 추가해야하는 서버작업 있으면 간단한건 제가 그냥 해서 리뷰받아요. (정말 간단한거요..)
보통 스타트업에서 공용컴포넌트 관리는 어떤식으로하나요?
우선은 만들고 추후 리팩터링을통해 고용화하는지
공용화하고 시작하는지
그리고 margin,padding등의 속성을 props로 받아 설정하는것에대해서 어떻게생각하시나요
저희 공용화 벌써 4번째 실패입니다 절대 쉽지 않은 작업이에요
만들고 나서 공용화하는 게 정석이긴 하죠
오오 멋지세요 저도 가끔 스프링 코드 읽어보려고 노력하는데 쉽지가 않더라구요… 간단한 작업 처리하는 정도는 알아두면 좋을 것 같에요
패딩은 안좋고 마진은 할만하다고 봅니다!
저도 같은 말 하려고 했어요
그런 업무만 담당하는 부서가 있고 높은 레벨에서 의지가 있는게 아니라면 만들고 공용화가 더 나은 선택일거에요~ 너무 비효율적입니다
회사에서 작정하고 하는 팀이 없다면 더더욱 말이죠
컴포넌트는 어디 갖다붙여도 완성형이 되어야 한다고 생각해요 그래서 마진을 컴포넌트 자체에 정해두면 관리하기가 어렵다고 생각해요
정확히 어떤 기능 어떤 속성이 필요한지는 직접 써보기 전까지 예측하기가 너무 어려워서 만들고 시작하는 건 사실상 불가능이거나 실패로 돌아갈 가능성이 높다고 봅니다
저도 마진은 부모 컴포넌트에서 gap등을 이용해서 관리해주는게 좋다고 생각합니다~
공감합니다~
이럴 줄 알고 만들었는데 -> 직접 써보니 이것도 필요하고 저것도 필요하고 이 기능은 왜 있고 저 기능은 또 왜 있고 이럴 가능성이 너무 높아서
그럼에도 불구하고 용기 내셔서 답변주신게 멋있습니다!
먼차이죠..?
또 너무 공용으로 쓰는것도 안좋은 점 있더라고요. 추후에 어떤 것들이 어떻게 커스텀 될지 모르니까요.
비단 ui 컴포넌트뿐 아니라 모든 컴포넌트 (코드 컴포넌트) 에 해당하는 내용일 거 같네요!
useCallback으로 함수를 재사용해야 하는 경우가 구체적으로 어떨때가 있을까요?
패딩과 마진 차이 물으시는건가요?
그렇군요
아니요 둘중 하나만 props로받는걸 허용하는이유가
궁금합니다..ㅠ
쉽게 이야기하면 레이아웃이 어디에 붙여놔도 그 컴포넌트를 감싸는 컨테이너에서 래이아웃을 결정해야지
패딩은 컴포넌트 안쪽으로 생기는거라 외부에 영향을 안받는데 마진은 바깥쪽으로 생기는거라 그런거같네요
컴포넌트가 그렇게 패딩이나 마진을 가져버리면 컨테이너에서 재사용하기 답답해서 그런 것 같아용
입사 한달 반차인데 이미 뭔가 사수분께서 기획이 많이바뀌신것에대해 공용화하는것에대해 별로 의지가없는거같으신데 다 이유가 있는거같아서요
허용한다기보다는 패딩을 받아야하는 상황이면 그래도 되지만 주로 박스 내부값이니 고정영역이라고 생각되어서요. 마진은 외부요소가 어떻게 들어가냐에 따라 붙냐 마냐 얼마나 떨어지냐 하는 영향을 받으니 외부 값으로 받는게 조금 더 관리하기 편해 그렇게 답했어용
이부분 답변해주실분 계실까여??
잠시 생각해보니 그렇군요
저도 첫 회사 사수분께서 공통컴포넌트에 대한 의지가 없으시고 보수적으로 행동하셔서 엄청 답답하고 힘들었었는데
아 뭔가 기준이 살짝 잡혔네요
사이드플젝에서 한번 해보고 확 이해됐어요.. 쓰고 나서 합치는 게 맞습니다..
그리고 함수명 네이밍이 진짜 다른사람의 코드를 볼때 중요한거같더군요..ㅠㅠ
조언감사합니다..
사내에 시니어 개발자분이안계셔서
이를테면 버튼 만들었는데 얘가 위쪽에 붙냐 가장 아래쪽에 붙냐에 따라서도 마진값이 달라지잖아요. 그래서 컴포넌트를 감싸는 박스를 하나 더 쓰곤 하죠.
뭔가 함수명이 뭔가 나침반같은느낌이랄까
ㅋㅋㅋ
코드는 남을 위해 짜는게 맞는거같아요
그리고 미래의 나도 남이라는 점
마자요
스토리북이 도움이될까요?
아직 도입이안되어있는데
???: 누가 이따위로 짰어 ???: 나네
이런부분에있어서 도움이될까해서 건의해볼려는데
확실한 이유가 없다보니..
극공합니다 주석은 미래의 나에게 보내는 타임캡슐
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
전 오늘도 선배가 자기가 짠 코드 설명해주면서 자아분열하는걸 봤기때문에..
남의 코드 뭐라할게 아닙니다.. 그 당시에는 그게 최선이었겠죠..ㅋㅋㅋ 나나 잘해야해요..
저도 그 상황에서의 최선이였다라고 생각합니닼ㅋ
그래서 대화가 중요하다고 생각해요~ 대화와 공유가 개발자 최고의 미덕이다..
코드리뷰보다 코드 설명이 효과적인거 같아요~ 설명하다보면 발표하다말고 실시간 리팩토링을 하고 있는 나자신을 발견하게됩니다 ㅋ
스토리북에대한 의견도 여쭤봐도될까요,,ㅠㅠ
그렇군요..
네!
뷰에대한 관리가 쉬워집니다!
개발 다 해놓은 뷰가 다른 코드로 인해 망가지는걸 방지할 수 있어요
헐 너무 공감합니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
저희는 스토리북을 위해서 작성을 하기 보다는 마크업 개발자가 코드를 같이 수정하면 꼬이는 문제 대신 마크업이 FE와 디자이너와 기획자와 소통하기 위한 도구로 잘 활용되고 있어요 ㅋ
그래서 모노레포인데 마크업은 스토리북으로 FE는 리얼개발로 컴포넌트는 같이 쓰되 분리해서 개발하고 있어요
저는 혼자 개발하면서 둘 다 관리 하는 것은 어렵다라구요 ㅠㅠ
아하..마크업 개발자가 따로 있으신거군요??
네~
흠..뭔가 회사 코드를보면 components폴더인에 공용화라고여겨지는 파일들이많은데 뷰가 안보이다보니 지금 하고있는 작업에서 쓸수있는 컴포넌트를 파악하기가 어려워서 생각해봤습니다..
모노레포도 고도화과정 중 필요한거죠?!
그렇군요 작업공간 분리용도로도 쓰이군요!
습관이 되면 좋을 것 같긴해요 :)
말씀하신 문제점에 대해서는 충분히 공감이 갑니다! 나중에는 점점더 많이 질거라
습관이 된다라는게 어떤의미인가요 ..!!?
방에 에어컨이 없어서 그런가 축 쳐지네여 힝
컴포넌트를 하나 만들때마다 스토리도 하나씩 작성하는 거요 ㅎ
나중가면 중간에 있는 컴포넌트들이 데이터와 결합이 되다보면 샘플을 만드는 것도 진짜 일이 되거든요
비효율이라고 말하는 건 아니구요 제가 잘 안해서 그런거에요
따라하지느느마세요 ㅋ
좀 바보같은 질문일 수 있는데 궁금해서 여쭤봅니다!🥲 React에서 컴포넌트로 패키지를 넘겨주면, 컴포넌트안에서 다시 패키지를 선언하는 것보다 용량을 절약할 수 있나요?
혹시 스토리를 작성하는 기준은 어떻게 되시나요? 모든 컴포넌트에 스토리를 작성하시나요?
눈물 흘리는 제이지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
맨 하위 컴포넌트들과 레이아웃 단위로 독립적인 컴포넌트 정도만 하는 것 같아요 중간단위 컴포넌트들은 좀 애매해서
눈물 흘리는 제이지님~ 반갑습니다 :)
안녕하세요
맞아요, 도메인 로직이나 데이터에 종속적인 컴포넌트들까지 해야되나 라고 고민했었어요. 이런 종속적이고 수정여지가 많은 컴포넌트까지 해야되나 해서요
그쵸 보통 디자인시스템이나 다른 스토리북 샘플을 보아도 그런것 까지 게시하는 경우는 못 봤어요
어서오세요~ 이곳은 프론트엔드 대해서 궁금하고 더 개발을 잘 할 수 있는 고민 더 일을 잘 할 수 있는 고민등을 함께 얘기해보며 질문해가며 함께 성장을 해보고자 하는 곳입니다 함께 나누고 싶은 질문이나 이야기 뭐든 편하게 글 남겨주세요!
이거 질문을 이해못했어요~ 조금 더 구체적으로 물어봐줄수 있을까요?
질문이 이해가 잘 안가는데 컴포넌트에서 package 자체를 props로 넘긴다는 말씀이실까요.....?
음.. 제가 A라는 라이브러리를 사용해서 여러 컴포넌트를 만들어 최종적으로 한 페이지에 붙여서 사용할건데, 이때 1. 컴포넌트 각각에 A를 import해오는것과, 2. 컴포넌트가 들어가는 전체 페이지에 A를 import해서 props로 내려주는 것에 크기 차이가 있는지 궁금해요..!
2방법으로 해보셨어요?
가능은 한가요...? 전 안해봐서 모르겠네요 그게 될랑가
흠.. 그렇군요 우선은 사용법에대해서 구글링좀 해보겠습니다 ㅋㅋ
네..! 2번방법 해봣는데 동작하길래 ㅠㅠ 더 이점이 있나 싶어서 여쭤봅니당
참 유익한 공개 톡방같습니다..ㅋㅋㅋ 모두들 감사합니다
똑같은 것 같습니다
똑같을 것 같습니다
저도 똑같을 거 같습니다!
ㅋㅋㅋㅋㅋㅋ lodash에 _ 이런애들 넘겨주고 그런건가요?
그럼 패키지 용량 보여주는 익스텐션도 작동하려나.. 궁금하네요. 낼 해봐야지
이모티콘 흠 빌드를해서 한번 비교를 해봐야겠네용 내일비교해서 알려드리겟습니다.. 두근두근
고맙습니다 언제든 막히거나 궁금한게 생기면 같이 고민해봐요 ㅎ
TS로 React 프로젝트 만들어보려고 하는데, 혹시 참고할 만한 TS+React 레포 아시는분 있으신가요?
저도 궁금합니다1
!
벨로그...?
오! 감사합니당!!ㅎㅎㅎ
그그 리액트 컴포넌트 파일 확장자를 js 라기도 하고 jsx라고 하기도 하던데 이건 정말 다른게 없고 깃허브에 푸시 했을때 언어가 자바스크립트랑 리액트라고 나오는게 외에는 차이가 없는건가요??
제가 모르는 다른점이 존재하는지 궁금합니다!
jsx가 있으면 jsx 없으면 js
로 구분하고 있어요
저 현재 api 연동중인데 혹시 코드한번 봐주실 수 있나요? postman으로 진행했을때는 잘 작동되는데 vscode에서 했는데 보내지지가 않아서요 혹시 보내는 방식이 잘못되었는지 확인해주실 수 있나요;;
아하 그럼 예를 들어 리덕스 같은 건 js겠군요 return하는 jsx가 있다면 확장자를 jsx로 하신다는 말씀이시죠??
사진
jsx가 있으면 클린코드를 지향하기 위해 확장자를 jsx로 하곤 합니다
넵
url에 localhost 포트 빠진 거 아닌가요??
아 캡처하느라 잠깐 수정했습니다
네트워크 탭도 보여주시면 더 좋겠습니다
state 를 blob 으로 보내는 건 어떤건가요?
state에 파일을 담아놓은 다음 다른 페이지에서 전송하는 로직인건가요?
blob으로 되어있긴합니다
네네
잠시만요
사진
헤더를 보여쥬시는게 ㅋㅋㅋ
헤더 중에서도 맨 아래쪽에 payload 라는 섹션이 궁금합니다
사진
사진
잘못 들어갔네요
아 어디가요?!
저게 [object Object] 라고 뜨는데
(binary file) 이런식으로 떠야 해요
ㅇ…아 진짜요?
ㅠㅠ
그럼… ㅇ…어디를 수정해야 하는지 혹시… ㅠ
그냥 예를 들어서 객체가 { file: 파일 } 이면 e.file 을 보내야 되는데 e를 그대로 보냈다거나 그런 상황인 거 같은데
아 원래 index:number, e:any를 해서
해결이 어려운 건 아닌데 지금 코드에 타입이 다 any로 되어 있어서,, 알 수가 없습니다
이미지 아이디값이 찍히도록 했었는데
2개가 들어가니까 오류가 나더라고요
넵.. 객체를 그대로 넣으면 안돼요
아...ㅠ
그럼;;
근데 진짜 타입만 알고 있으면 5초면 해결할 수 있는 문제인 거 같긴 합니다
타입을 ㅠ 하ㅠㅡㅠ
잠시만요
타입을 알 수 있는 방법이 따로 혹시 있나요;
어.. 코드 작성한 분께 여쭤보면 되지 않을까요?
제가 처음했을때는
사진
이렇게 해서
사진
이런식으로 이미지에 아이디값을 나타내도록 한거였는데
사진
e부분만 console에 찍히게 하면
사진
이런식으로 나옵니다.
ㅜㅜ 그거만으로 뭔가 알기는 힘들 거 같아요 전체 플로우가 머리속에 안 그려져서
그냥 구글에 폼데이터로 이미지 보내는법 검색하셔서 따라해보시는 것도 나쁘지않을거같네요!
axios 요청 보내는 함수 e 로그 찍어주실수 있으신가요?
잠시만요
아 그 숫자나와요
e 로그만 찍으면
state도 로그한번만
찍어주세욥
사진
사진
벌 서는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저건
이미지파일이아니라
dataurl파일이네요
아니 파일이 아니지.. dataurl
사진
맨 위에 handle거기서 해봤는데
저 api가 파라미터로 파일을 받는거죠?
근데 지금 보내시는건 파일이 아니라 dataurl(이미지주소)를 보내고 계세요
어떻게 해야하죠 ㅠㅠ
그 api의 명세를 자세히 아는게 중요한데
이미지파일(바이너리)를 받는건가요?
vscode시면
thund clinet 까셔서
api테스트부터 해보시는게 어떨까요?
thunder clinet
아니면 포스트맨 쓰셔도 좋구요
api명세가 있다면 해당 명세 맞춰서 보내시면되고, 아니면 테스트를 해보셔야할듯해요...
아.. 이미 테스트를 하셨구나 혹시 포스트맨으로는 이미지 파일 자체를 보내신건가요?
네네
근데 코드상에서 보내시는건 바이너리파일이 아니라서 오류가 나는것같아요
state.fileImage를 보내보시겠어요?
바이너리파일로 바꿔줘야하는건가요ㅠ
잠시만요
state as Blob => state.fileImage
사진
오류가 나에요ㅠ
나네요ㅠ
그냥 @ts-ignore 다시죠 ㅋㅋㅋ
state.fileImage 이게 daturl이라
파일 확장자를 js로 바꾸는 방법도..
다시 이미지로 바꾸셔야할듯해요
아 그렇군요!!;
사진
여기부분이
저기부분에서 createObjectURL이
이쪽으로 이미지를 넘겨주는곳인데
바이너리를 dataurl로 바꿔주고있네요
아 그러면 그 부분을 지울까요?
createobjecturl부분을 없앨까요!?
넵 file자체를 한번
넘겨줘보시겠어요?
사진
만약 미리보기형식으로 표출이필요하시다면 dataurl state를 하나 더 만드셔서 표출하고
axios 자체에는 file 자체를 append하셔야할거에요
이렇게해서 보내는게 맞죠?
아~
넵
잠시만요
state를 다시 콘솔찍어볼게요
사진
이렇게 나옵니다
근데 여전히 object로 나오네요ㅠ
state.fileImage를 append해주세용
사진
아까.. 델님이 말씀하신것저럼...@ts-ignore를 한번...
@ts-ignore이요~
ㅎ…혹시 어디부분에 사용해야하나요;
파일 최상단에
//@ts-ignore 를 넣어주세용
사진
아니면 해당 함수 위에 쓰셔도됩니다
빠른수정누르면
한칸 띄고 써주세욥
// @ts-ignore
사진
// eslint-disable-next-line @typescript-eslint/ban-ts-comment 이것도 한번 추가해보시겠어요?
ㄷ…동일한 오류가 나와요ㅠ
ts ignore 위에요
오
잠시만요
사진
이렇게 나옵니다
onSubmit2 함수 최상단에
네네
if(!state) return;
사진
넣어주세요
넣었습니다...
state?.fileImage....
어디서부터 잘못된걸까요;;
죄송해요 괜히 저땜에...
타입이 명확하게 정의되어있지 않아서... 큰거같아요
아닙니당 ㅎㅎ
state?.fileImage 해보시겠어요?
사진
음…
음.... 파일 확장자를 혹시 바꿔도 될까요...?
네네
js나 jsx로...
아
tsx로 다 해놔서 바꾸게되면 시간이 좀 많이 걸릴거같아요;;ㅠ
지금 [object object]가 뜨는이유는
아까 찾아보다가 index는 사실 e.xxxx로 바로 접근하기보다는, 가독성과 관리성 측면에서 선택한 id를 state에 저장해두고, handleOnClick에서 참조하시는 게 가장 좋습니다! 라는걸 봤는데…
state.fileImage 자체를 넘겨줘야 하는데..
네네
이거 어캐 생각하세요?
지금 저 오류는 state가 undefiend인 부분을 배제해주지 않아서 그런것같은데
네네…
const {fileImage} = state;이런식으로
한번 더 구조분해 할당 하면 어떻게 뜨나요?
const { state } = useLocation();
이부분을 수정하는게 아니고
아뇨 onsubmit2에서요
아
사진
이렇게 나옵니다~
저 onsubmit2에서
state 콘솔찍었을때
아까와같이 나오는거죠?
{fileImage: File....XX 이렇게}
아 네
ㅠ
state as any 해보시면
그래도 오류뜨나요?
다시 돌려볼게요!!
같이 object로 나오네요
fileImage 콘솔로 찍으면 어떻게 나오나요?
아 그
fileImage 오류있어서 지웠었는데
잠시만요
사진
이렇게나와서요
const {fileImage} = state as any;
사진
이제 fileImage를 append 해주세요
밑에 state ? 붙여도 똑같습니다.
state.fileImage => fileImage
그럼 밑에는 state가 아니라 그냥 fileImage
사진
이렇게 맞나요?
넵.. 한번 테스트 해주세욥
사진
사진
바이너리는 제대로 전송이 되네요
네네
그
근데 key값을 바꾸시면 안되요
files 이렇게 보내주세요
그러게요 fileImage 바뀐거만 확인하느라 key값 바뀐거는 못봤네요 ㅋㅋ
사진
사진
어 잠시만요
이제 파일부분은 문제가 없는거같고...
style_enum이 잘못들어간거같네요
네ㅠ
그러네요...
그 포스트맨 테스트하셨던
이거는.. 제가 봤을땐 차분히 다 뜯어 고치시는게 좋을거 같아요
style_enum으로
설정하셔서 보내보세요
넵 저도 같은생각입니다.. 리팩토링은 꼭 하셔야겠어요
ㅠㅠㅋㅋㅋㅋ 화이팅..
잠시만요ㅠ
시간이 걸리더라도 타이핑은 꼭 하시는걸 추천드려요...! 아직 타입스크립트를 쓰시는게 익숙치 않으시다면 js로 먼저 개발을 하시고 나중에 타입스크립트로 마이그레이션하는것도 좋은 연습이 되실꺼에요!
지금이야 억지로 억지로 되게끔 하는건데.. 이러면 본인만 더 힘드시고 답답하실거에요. 파일데이터 원래 처음할땐 힘들어유..
ㅠㅡㅠ 그렇군요...
진짜 너무 착하고.. 착하다....... 곰곰님 짱...
너무 감사합니다...
아닙니당 ㅎㅎ.. 저도 이방에서 도움받은게 너무 많아서..
파일데이터만 예제보고 올려보시고 그 담에 하나씩.. 해보셔요 디버깅도 혼자 차분히 좀 열받고 답답하더라도 해보셔야 늘어요
아니시면 코드 전체를 어디 샌드박스나 코드펜같은곳에 올려주시면........
ㅠㅡㅠ 너무 감사드려요
혹시 타입스크립트 쓰시는분들 클래스랑 인터페이스많이쓰시나요?
당장은 넘 답답하고 동아줄이라도 잡고 어케든 저 코드 멱살잡아 끌고가고 싶으시겠지만 저는 잠깐 쉬시는걸 추천드려요. 샤워를 하거나 잠깐 밖에 나가 하늘을 바라보고 스트레칭을 하십쇼. 오늘안에 끝내지 않아도 된다면 내일 다시 생각해보는 것도 좋아요. 화이팅!
저는 클래스는 잘 사용 안하고 주로 타이핑할때 인터페이스 많이 써용
클래스는 필요하다고 생각할때 쓰는 편인데 그렇게 많지 않고요. (값들 받아서 변환해야할 것이 있는 유틸인 경우..정도..) 인터페이스는 종종 씁니다. 타입이랑 경계가 제겐 아직도 모호하긴 해요.
알려주셔서감사합니다
감사합니다ㅠ
불 뿜는 튜브님이 나갔습니다.
@곰곰 님 혹시 오픈 1대1 주실 수 있나요 너무 감사해서 커피라도 보내드리고 싶어서요ㅠ
아 제가 할 수 있네요:)
늦은시간까지.. 다들 대단하시네요
@델님 @곰곰님 오늘 멀쩡한 정신으로 시도해 보았습니다. 해결했습니다~ 감사합니다~
다들 멋지십니다
훈훈하네요!
아 herb님을 깜빡했네요 어제 감사했급니다 아 속이 시원하네요
샵검색 : #개비스콘
우아!! 밤새 어마어마한 일이 있었군요~~ 모두모두 감사합니다!!
혹시 애니메이션이나 트랜지션으로 element 사라지게 할 때 실제 해당 영역도 같이 사라지게 할 수 있는 방법은 없을까요? 구글링해도 잘 안나오네요....
element 자체를 없애시려는 게 아니고 영역만 없어지면 된다고 한다면 width, height값을 transition 주시면 되지않을까요???
아 그런 방법도 있겠네요..! 시도해보겠습니다!!
안녕하세요, 다들 좋은 아침 보내고 계신가요? 사이드 프로젝트에 관심있으신 개발자분들을 위한 정보 공유드립니다 :)
🎈 커리어리 사이드 프로젝트 팀원 매칭 이벤트 🎈 🤔 앱/웹을 만들어 보고 싶은데 함께 할 팀원을 구하기 어렵다면? 이벤트에 참여하고 개발자, 디자이너, 기획자와 함께 원하는 서비스를 만들어 보세요! ✅ 이벤트 진행 방법 참가 신청을 완료하신 분들을 대상으로 커리어리에서 직접 팀원을 매칭해 드립니다. 팀원이 매칭되면 팀마다 슬랙 채널을 개설해드리고, 프로젝트를 시작하는 초반 단계에 도움을 드릴 예정이에요! 첫 회의 이후부터는 팀에서 정하신 방식대로 자유롭게 진행하시면 됩니다. ✅ 참여 대상 포트폴리오 관리/직무 역량 강화 목적으로 디지털 프로덕트(앱/웹)를 만들어 보고 싶은, 스타트업 1~5년차 개발자, 디자이너, 기획자라면 누구나 참여 가능합니다! ✅ 참여 방법 아래 링크를 통해 참가 신청을 하고, 참가비 10,000원을 납부해 주시면 됩니다. 자세한 내용은 아래 참가 신청 구글폼과 안내 페이지를 참고해주세요. ✅ 이벤트 기간 8월 7일(일요일)까지 참여 신청을 받습니다. 8월 11일(목요일)에 팀 매칭 결과가 발표되는데요, 결과 발표와 동시에 프로젝트를 시작하게 됩니다. (프로젝트의 총 기간은 팀원 분들과 상의 하에 조정하실 수 있습니다!) 📌 참가 신청 구글폼: https://rebrand.ly/loungeevent05 📌 이벤트 상세 안내 페이지: https://rebrand.ly/loungeeventnotion
하트뽀뽀 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 하트뽀뽀님 반갑습니다 :)
안녕하세요!
덕분에 해결됐습니다 감사합니다!! :)
이거 신청만하면 다 되는건가요??
hoxy 멀티캠퍼스 같은 기업교육 전문 사이트 알고 계신분 있으신가요??
혹시 어떤 페이지에서 이게 어떤 프레임워크로 만들어졌는지 확인하는 방법이 있을까여?
검사눌러서 import 확인 , 하다보시면 눈에 익어서 이거 뭐구나 ~ 하고 알게되여
휴넷…?
오우 감사합니당!!!
규규님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
황금밥알님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
원티드 지원현황이 바뀌었네요..?
서류만 읽어도 진행 중 떠서 서합인지 검토중인지 알 수 없군요..
어 원래 그러지 않았나요?
모노레포 환경 세팅해서 공통 UI 패키지를 나누고 있습니다 ! UI 패키지는 next.js 환경으로 세팅해서 프로젝트에서 import 하는 과정에서 컴포넌트를 로드하지 못하고있는데 혹시 이런 이슈 겪어 보신분 계실까요??
사진
아 원래는 접수 -> 검토? -> 서류 합격
이런식으로 되지 않나요?
아아 그랬었나요
근데 이게 맞는거같습니다 ㅋㅋ
뚬님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
안녕하세요~
Sephine님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!:)
안녕하세요~
이모티콘
뚝딲이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
네 안녕하세요
다들 display:flex간격을 어떻게주시나요
gap쓰다가 사파리는 미지원인걸 봐버렸네요
헐 사파리 gap 지원 안되나요?
첨알았네요....
https://caniuse.com/flexbox-gap
구버전 아니면 되는것같은데요?
좀 충격이네요 14버전은 안됐다니…
14.1부터 지원하는데
어찌됬건 프론트엔드입장에선
구버전도 생각해야되니
사실상 못쓰는게 맞지않을까요
작년에 맥북샀는데 14.0.3인걸보면...
tailwind css 가 utility-first 라고하던데 utility-first가 무슨 의미인지 잘 모르겠어요 ㅠㅠ
미리 셋팅되어있는 css 클래스들의 활용으로 번거롭게 클래스를 따로 만들일을 줄이겠다는게 포커스이지 않을까 싶어요
대표적인걸로 패딩 마진 같은거요
저 혹시 input css 디자인 되어 있거나 input type 이미지 볼 수 있는 사이트 아실까유..?ㅠㅠ
테일윈드 쓰시면
space-x나 space-y쓰면 gap과 비슷한 효과를 낼수 있는데
해당 부분 구현된걸 보면 마진으로 관리가 되더라구요
박주영님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 박주영님 반갑습니다 :)
.flexbox > * + * { margin-right: 4px } 처럼 올빼미 표기법으로 폴리필 할 수 있어요 ㅎ
Devastated Jay-G님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Devastated Jay-G님이 나갔습니다.
사진
새로고침과 뒤로가기 이벤트를 막으려면 onbeforeunload 밖에 방법이 없을까요?? 아무리 검색해봐도 onbeforeunload만 나와서 질문 드립니다 ㅠㅠ onbeforeunload의 경우 페이지 이탈 시에 모두 얼럿창을 띄워주는데 저희 서비스에는 새로고침과 뒤로가기에만 적용시키면 되어서요, 혹시 다른 방법이 있을지 궁금합니당 얼럿창 내부 메시지가 커스텀이 안되는 것도 문제이기도 하고요!
https://youtu.be/RUJTkFR1jko 관련 내용으로 사내에 발표한게 있는데 어떤 내용인지 한번 이해하시기 좋을 거에요 헤
감사합니다!
네 안됩니다~ ㅠㅠ 조건을 잘 설정해볼수도 있겠지만 (가령 내부 링크 클릭했을때에는 안되게 한다거나) 원하시는 것 안될거에요
ㅠㅜㅜ감사합니다!!
뒤로가기는 만약 react router 사용하신다면 prompt로 커스텀 할 수 있는걸로 알고있습니다!
퇴근하는 프로도님 황금밥알님 뚬님 불뿜는 튜브님 Sephine님 뚝딲이님 박주영님 Devastated Jay-G님 모두모두 반갑습니다!!! 어서오세요 :)
감사합니다!! 적용하고 있는 코드는 바닐라여서, 리액트 프로젝트에 적용할때 참고하겠습니당 ㅎㅎ 알려주셔서 감사해요 🙏
React router dom v5를 사용중이시라면 history를 v6라면 history라는 라이브라리를 별도 설치 후에 막을 수 있습니다
바닐라js면 onpopstate로 뒤로가기 이벤트를 감지해서 막을 수 있어요
carousel에서 따로 arrow버튼을 커스텀 할 수는 없나요?
라이브러리 사용중이신가용?
네네
개발자도구에서 element 확인해보고 나서 해당 영역에 맞는걸로 커스텀 가능할거 가튼데용!
잠시만요
넹 css 만져보면 될거같아요!
혹시 gtm, ga대해서 아시는 분 계실까요…? 현재 웹에서 원하는 사용자 액션에 gtm을 이용해서 ga로 데이터가 저장되게 돼있구요, 웹뷰에서는 원하는 사용자 액션에 native의 onEvent라는 함수를 호출해서 native가 firebase로 뭔가 이벤트 name이 담긴 액션을 보내면 ga에 로그를 남기게끔 돼있는데 웹뷰에서는 gtm사용하고 앱에서는gtm을 사용 안하는 이유가 궁금합니다… 현재 코드 히스토리가 끊겨서 알 수 있는 방법이 없네요 ㅠㅠ
아 웹뷰에서 onEvent가 아니라 logEvent 함수를 호출하는거네요
으음 사용안하는 이유라기보단
하
bigint이거
ga가 웹서비스에서 사용자의 데이터 트랙킹을 위해 먼저 시작하다보니 아직 app쪽에 자리를 잡지 못해서 안쓰이는게 아닐까라고 생각합니당
왜 널이 스트링으로 넘어오지
이거 때매 30분을 삽질했네
아 그럼 앱에서 gtm을 못 쓸 이유는 없는거라고 이해해도 되는건가요?
저도 앱개발자가 아니라 자세하게는 잘 모르겠는데 네이티브에서 특정 이벤트를 수집하고 이를 시각화할때는
ga랑 bigquery 활용했었습니당
gtm 초기에 컨테이너 설정할 때 앱도 선택할 수 있었던 걸로 기억하는데
사용 못할 이유는 없죠
gtm에서 앱도 사용가능하다고 말하고 있는데
아마 사용못할 이유는 없지만 그냥 안쓰는게 아닐까란...
조심스러운 의견을 내봅니당
웹도 gtm 없이 그냥 바로 ga로 바로 쏘기도해서
react-query에서 fetchData로 json-server에 있는 데이터를 가져올 때 자꾸 data가 undefined가 뜨는데 어디가 잘못된걸까요??ㅠㅠ
사진
undefined 가 뜨면 안되나요??
화면에서 계속 Loading...이 뜨다가 TodoListPage 제목만 뜨네요 ㅠㅠ
앗 잠시만요 content가 배열이어서 그런가..??
안 되네요 ㅠㅠ
렌더할때 data 콘솔찍어보시겠어요?
네 잠시만요!
Error도 찍어봐주시면 좋을거 같아요!
data랑 Error 찍었더니 undefined 'Missing queryFn' 이라고 떠요!
혹시 리액트쿼리 버전 4 쓰시나요?
네!!
useQuery('data', fetchData) -> useQuery(['data'], fetchData) 로 바꿔보실래요?
v4에서 저거 필수로 배열로 넣어야 된다고 어디선가 봤던 거 같아서
!!! 해결됐어요!! 감사합니다 ㅠㅠㅠ
ㅋㅋㅋ우와... 갑자기 해결되서 너무 놀랐네요 ㅋㅋ
혹시 공식문서에 있는 내용인가요?
넵넵
interface divBox { display?: string; } 요기에서 "?" <= 이기능이 정확한 명칭으로 옵셔널이 맞는거죠?
공홈을 봐야겠네요 ㅎㅎ 정말 감사합니다~!
삭제된 메시지입니다.
이모티콘 감사합니다!!
황금밥알님이 나갔습니다.
리액트에서 closest 써도 컨벤션에 어긋나지 않을까요?
찾아보니까 optional property, optional argument, optional chaining, … 등 optional 모시깽이로 불리네용
공식문서에서요! 즉 말씀하신 내용이 맞는 것 같습니다!
closest 써야할땐 써야죠 뭐 ㅎㅎ
closest랑 부모요소의 ref.current 비교할때 많이 썼던거 같네요
const clickCountry = (event) => { console.log(event.target.closest(".card")); };
이런식으로 버블링으로 상위 노드를 찾는건데
closest, querySelector 등을 사용하게되면, 결국 구조에 종속적인 코드를 짜게 된다. 구조에 종속적이지 않게 가져올 수 있는 방법을 생각해봐라.
사람마다 다 다르게 불러서 혹시 정식단일명칭이 있나 긍금해졌어요 ㅎㅎ
이 말을 찾아버려서
필요하면 쓰면 되죠 ㅎㅎ 안 쓰고 할 수 있으면 안 쓰고 하는게 맞겠지만
안쓰고 할려면 반복문으로 생성되는 컴포넌트에 전부 onClick 함수를 넣어줘야 하는데
오히려 이게 더 나을까요?
넵 저는 그게 낫지 않을까 싶습니다
아하 감사합니다!
이벤트 델리게이션 패턴이 편하긴 한데 유지보수하기 좋은 코드인가? 하면 잘 모르겠어요
옐로카드 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
그렇군여...
안녕하세요 옐로카드 프로도님~ 반갑습니다 :)
안녕하세요 반갑습니다!
그냥 상위에 하나 달아도 동작하지 않나요?
근데 각각 달아도 최적화 된다고 본거 같긴 하네용
어 저 closest 대신에 event.currentTarget을 활용하는 영감이 떠오르긴 했는데 혹시 여러 요소에 onclick event handler가 있는데 걔네들이 동일한 코드를 실행하는 경우가 있어요?
<div className="saleBox countryListBox" onClick={clickCountry}> {countries.map((country) => (<CountryCard key={country.id} styleOptions={{ color: "#fff" }} className="card" > <img src={country.logo} /> <span>{country.name}</span> </CountryCard> ))} </div>
앗 탭 지우고있었는데
<div className="saleBox countryListBox" onClick={clickCountry}> {countries.map((country) => ( <CountryCard key={country.id} styleOptions={{ color: "#fff" }} className="card"></CountryCard>))}</div>
이런식으로 하위 컴포넌트에서 이벤트를 안걸고 상위에 걸어서 한번만 이벤트 걸어주려했어요!
카드에 따라 좀 다르게 동작해야하는거 있으면 그냥 카드에 달아주는게 나아보이네용
원티드 회사 지원 관련 질문드립니다~ 이력서 제출후 열람 단계에서 진행중 단계로 넘어갔는데 이게 서류는 합격했다는 의미인가요..?
아녀 서류합격이라는
게 따로떠요
근데 서합되서 연락온곳도 진행중으로 계속 나와있어서요..
회사랑 이야기 하는게 맞아요!
원티드 버그 좀 있다던데요 버그 일수도 있규여 ㅋㅋㅋ
역시 그렇군요 더 기다려보고 소통해봐야겠습니다 답변 감사드립니다 !
그 혹시..
vscode 왜 오류나면
소리 나나요 ㅋㅋㅋ
처음 듣는데..
또로록
이런 소리 나는데...이거 어떻게 끄나요....
서류 합격 버그..ㅎㅎ
이번에 바뀐 것 같아요… 서류 확인하면 진행 중으로 가는 듯해요! 서합해도 진행 중에 두는 곳들도 많이 있습니다! 면접이나 이런 것 진행할때도요!
아 그렇군요…진득히 공부하면서 기다려야겠네요ㅎㅎ
리액트 이벤트 위임에 대해 찾아 봤는데 리액트 내부적으로 이벤트를 관리해서 이벤트를 위임하든 각 태그에 이벤트를 걸든 결국 메모리나 성능상 이점이 없다고 하네요!
맞아요 저도 그런글 봤었읍니다
음 리액트 내부적으로 모든 핸들러를 루트에 위임시킨다는 내용 아니었나요..? 각 태그에 걸어서 핸들러 10개가 나오면 그 핸들러 10개가 위임되는거고 델리게이션해서 핸들러 한개가 나오면 그 한개가 위임되는거고
그게 성능상 차이가 없다는 걸로 어떻게 연결되는지 궁금해요!
I think you might have misunderstood the answer. React doesn't attach your click event handlers to the nodes. It uses event delegation and listens at the document level.
요 문구인데요
에초에 리액트는 이벤트 위임으로만 이벤트를 등록한다고 하네요 ㅎㅎ
와 그냥 보고만 있어도 뭔가 지식이 느는 느낌이 듭니다
그런데 뒤에 내용을 보니까
React 17에서는 또 달라졌다고 하는군요
맞아요 17부터는 document 말고 root 에 delegation 하고 있어요
하나의 페이지에서 리액트 버전을 여러 개 쓸 경우를 대비하기 위함이라고 봤던 거 같아요
혹시 git ssh 관련해서 해당 오류 원인 아시는분 계실까요,, ssh 키도 등록 해뒀고 DNS 관련해서도 확인해봤는데 전부 안되네요 ㅠㅠ config도 다시 등록해봤는데 해결되는게 없어서요.. Could not resolve hostname 깃주소 nodename nor servname provided, or not known
모든 이벤트를 루트에 등록하기 때문에 성능이 똑같지 않나요?
시간이 없어서 앞에 말한 내용 투척만 할게용 https://codesandbox.io/s/temp-react-event-target-srpqxo?file=/src/App.tsx
사진
음 이거 위에꺼랑 밑에꺼랑 성능이 똑같다는 말씀이시죠?
제가 이해한 내용은 그렇긴 한데...
뭐 완전 100프로는 아닐 수도 있지만 거의 같을듯요 ㅋㅋㅋ
위에꺼는 루트에 핸들러가 1개 걸리고 밑에꺼는 루트에 핸들러가 5개 걸리는 상황 맞을까요??
근데 저게 루트에 핸들러가 5개가 걸리는게 아닌거 같아요
위임이니깐 루트 온클릭 이벤트에 조건문 형식으로 추가 되는거 아닐까요?
만들기에 따라 다를 것 같아요 ㅎㅎ
onClick = (e) => { children.forEach(el => { if (condition) el.onClick(e); }) }
이렇게 하면 한 개가 등록되는거겠죠?
직접적 root node에 등록하면서 if로 핸들링할 수도 있고
// addEvent는 $root에 이벤트를 한 개 등록 addEvent($root, $child, 'click', fn) addEvent($root, $child, 'click', fn) addEvent($root, $child, 'click', fn) addEvent($root, $child, 'click', fn)
궁금하면.. 리액트 코드를 까보는걸로..
오… 생각도 못해봤는데 궁금하네요 ㅋㅋㅋㅋㅋ
다들 도와주셔서 감사합니다!! 한번 실험해보고 결과 공유해드릴게요
사진
사진
오 내부적으로 어떻게 하나로 합쳐지는 거 맞는거같네요..! 오늘도 배워갑니다 감사합니다 :) @포유 @2년차ㅠ @황준일 👍👍
이건 칼럼으로 써도 되겠네요
신기방기
저도 몰랐어요
와 @델 님 감사합니다!!
근데 딱 켰을때 왜인지 클릭 핸들러가 세개 붙어있긴 하던데
델님 혹시 블로그 작성하시나요?
그건 나중에 확인해봐야될거같아요
쓰긴 하는데 보여주는 목적보단 저 혼자 정리하려고 쓰는거라 모든 글이 용두사미네요 ㅜㅜ
앗 한번 볼수있을까여 항상 깊게 생각하시는것같아서 궁금해여
근데 신기하네요 함수명을 넘겨준것도 아니고 익명함수인데 하나로 합쳐지는게
엇.. 근데 벨로그에 똥글이 너무 많아서 다음에 미디움으로 한번 제대로 이사할 계획 있는데 그때 이방에 공유한번 할게요 ㅋㅋㅋㅋㅋㅋ ㅜㅜ
넵넵 ㅎㅎ 감사합니당
이모티콘
vite 가 번들해놓은거라 해독할 순 없는데 소스 보니까 이런식으로 생겼더라구요
사진
아하... 태그가 같아서 그런가? 암튼 어렵네요
호옥시 여기 cypress 써보신 분 계실까요
사진
Input 을 돔에서 가져와서 clear 실행해주려 하는데
"$count is not a function" 이라는 에러가 뜨면서 이후 테스트들이 막힙니다
뭐가 잘못된걸까요..?
제이쿼리??
사진
수정버튼을 눌렀을 때 span태그 속 밑줄친 isSoldout true false 여부를 뽑아내려면
e.target.closest("span"));
이런식으로 안되는데 알려주실분 계실까요ㅠ
closest는 부모를 찾는건데 span은 수정버튼의 형제인거같네요
그럼형제버튼 뽑아내려면 어케해야될까요
previousSibling 이었나 쓰시면 될듯
삭제된 메시지입니다.
사진
제이쿼리를 써야되는군요..
저거 js로 쓰는건 커스텀 하시면돼요
부모노드 선택한다음에 getElementBy~ 하시면 되지않을까요
상위노드로 간다음에
cypress get 함수가 promise 함수인가요..?
그 하위 노드들 전부 찾아서 원하는것만 리턴해주는 함수를 만드시면 될듯
cy.wrap 으로 감쏴주세료
cy.wrap($count).
e.target.closest("li").querySelector("span") 같이 바닐라 JS로도 원하는 Element를 고르는 방법은 다양할 것 같아요. 다만 HTML이 바뀔 때 그 코드를 고치지 않아도 되게 짤 수 있을지는 잘 모르겠어요
고맙습니다
해당 span을 뽑아내셨다면 classList가 sold-out이라는 class를 가지고있는지 판단하는식으로 코드를 짜보시는건 어떠세요?
네네 해결했습니다 고맙습니다
익숙한 html코드네요 ㅋㅋ 화이팅입니다
엇 됐다! 감삼다!
김석진님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 !
안녕하세요 김석진님~~ 반갑습니다 :)
혹시 여기 질문도 가능한 방인가요 ?
넵
오오 감삼다
사진
어서오세요~ 이곳은 프론트엔드에 대해서 궁금한게 있는데 함께 얘기하고 싶은 사람이 필요할때 내가 남에게 알려주면서 성장하고 싶을때 언제든 편하게 얘기하는 공간입니다. 언젠든 편하게 글 남겨주세요
네!! 언젠든지요. ㅎ
List 에서 obj를 다른 파일로 return해 줬는데요
사진
그파일에서 return 받아서 출력해보면 undefined가 뜹니다
근데 LIst 함수에서 console 찍어보면 잘나오구요
뭐가 문제인지 도무지 모르겠어요..
return이 정확이 안된 것 같아요
return이 정확히 안됬다는게 무슨말인가요?
List 함수에
list 함수에서 return 하는 값을
받는 친구가 없습니다
아
classObj 선언자체가 없지않나요
사진
위에 선언해놨습니다
음 그러면 list함수에서 리턴해줘야하는이유가 있나요
글로벌 변수를 사용해서
글로벌변수의 값을 변경중인데
어 이유는 없습니다..
ScheduleData 함수에서 setData의 data를 return해주면 나오지 않을지
스케쥴데이터 함수는 리턴하고 있는거에요?
맨 하단에 return datark QkwuTspdy
sp
네
return data; 이게 빠진거같네요
아
scheduleData 함수는 아무것도 return 하고있지않습니다
아 그러네요 ScheduleData return을 안했ㅅ브니다
오 어느정도 머리속에서 정리가 됬어요 !
감사합니다
classObj가 필요하신거면 그걸 리턴하시면 될 듯?
함수나 변수가 다 PascalCase라 알아보기 좀 힘드네용 camelCase를 추천드립니다
다는 아니고 몇몇개가..
넵 !
안녕하세요 리액트로 프로젝트를 만들다가 페이지내에 서버통신을 하는 로직은 없어야된다는 생각이 들어서 서버통신하는 js파일안에 모든걸 선언해놓고 페이지에서는 그함수를 불러오는 형식으로만 작성하려고하는데요
사진
사진
위가 페이지내에서 호출하는거고 아래가 js파일에서 만든 함수입니다 근데 페이지내에서 호출했던 정보가 undefined로 게속 Console에 찍히는데 혹시 어떤 이유일까요 ????
async await 형식으로 바꿔보세요
postGetRecipeList에 async await가 빠져있네용
비동기통신을안해서그런것같은데
styled-component에서 button태그와 Link태그에 같은 스타일을 먹이고 싶은데 방법이 있을까요 ??
그거 넣어도 리턴 할때는 빈값이라
그리고 리턴도 안해주셨어요
버튼에 스타일 선언해주신다음에
아하 감사합니다
axios then 에서 넣어주는건 리턴되고 난 후여서
return axios({}).then((res) => res)
이렇게해서 리턴시켜보세요
styled.button, styled(Link) ''는 안 되는 거 같더라구요 ㅠㅠ
네 저렇게 하시거나 async await 쓰시고.. 받는 곳에서고 await해야합니다 프로미스로 받으시거나
같은 템플릿을 문자열로 만들어놓고
const btn = styeld.button`${TEMPLATE}` const linkBtn = styeld(Link)`${TEMPLATE}`
하면 될텐데요
한번해보세요
오호 감사합니다!!!!
as를 사용해보셔도 되는 걸로 알아요!
as는 찾아봐도 잘 안 나오네여 ㅠㅠ 사용법을 알 수 있을까요 !?
리액트 네이티브를 처음으로 사용해보려고 하는데요 환경설정부터 해야할 것 같습니다. 추천해 주실 만한 강의가 있을까요?
앗 찾았습니다 ㅎㅎ 감사합니다!!
[오픈소스코드리뷰] Dayjs - https://uznam8x.tistory.com/m/76
오랜만에 글 하나 썻어요.
moment 엄청 쓰고 있는데 개발 끝난지 몰랐네요
좋은 라이브러리 알아갑니다 감사합니다!
자기들도 이건 아니다 싶었는지 셆 deprecate 시켜버린..
혹시 리뷰 했으면 하는 라이브러리 있으면 알려주세요. (프레임워크 말구요^^;)
오픈소스코드리뷰 너무 좋네요 잘 읽어보겠습니다👍
redux요!
const COUNTRY_GET = "country/GET"; const COUNTRY_SELECT = "country/SELECT"; const MARKET_GET = "market/GET"; export const storeCountry = (items) => ({ type: COUNTRY_GET, payload: items, }); export const getCountry = () => axios.get(ALL_GET_COUNTRY); export const selectCountry = (id) => ({ type: COUNTRY_SELECT, payload: id, }); export const getMarket = (id) => axios.get(GET_MARKET_BY_COUNTRY_ID(id)); export const storeMarket = (items) => ({ type: MARKET_GET, payload: items, }); const INITIAL_STATE = { countries: [], countrySelect: null, markets: [], }; const reducer = createReducer(INITIAL_STATE, { [COUNTRY_GET]: (state, action) => { state.countries = action.payload; }, [COUNTRY_SELECT]: (state, action) => { state.countrySelect = action.payload; }, [MARKET_GET]: (state, action) => { state.markets = action.payload; }, }); export default reducer;
제가 reduce를 이런식으로 작성하는데
리듀스 안에다가 저런식으로 axios를 써도 상관은 없을까요
저건 걍 함수만 가져다가 컴포넌트에서 사용하는데
감사합니다. 검토해보겠습니다. ^^
네 상관 없습니다. 이후 then 내부에서 dispatch 사용하셔도 무방합니다.
아하 감사합니다!!
와! 좋네요 ㅎ 저도 moment쓴다가 갈아탔는데 Date관련해서는 좋은 라이브러리 인거 같아요 ㅎ
용량도 훨 적고 좋더라구영
갤럭시 기기내에서 다크모드해서 삼성브라우저 로 들어가면 간헐적으로 컬러들이 제멋대로 어두워지거나 반전되어 나오는 현상이있네요! 다들 알고계셨나용!
헉 방 인원수 777명이에요 👏👏
wow..
잭팟이네요
TS에서 부모 클래스에서 static으로 선언된 메서드를 자식 클래스에서 오버라이딩 못하나요?
와!!! 벌써 그렇게 되었군요 :) 여리 함께 해주시고 계신 모든 분들 올해 모두 777 잭팟 하나씩은 터뜨리시길 바래요 ㅎ
몇 명까지 될까 궁금해지네요ㅎㅎ
전에 확인했을 때 삼성브라우저는 다크모드를 prefer-color-scheme를 안 따르고 강제로 브라우저를 어둡게 처리하더라구요. 요청이 많았는지 현재는 실험실 설정에서 prefer-color-scheme를 따르는 옵션을 제공하고 있는 것으로 보여요.
사진
웹사이트 다크 테마 사용이 컬러 스키마를 따르는 다크모드라고 하네용
삼성브라우저는 자체적으로 다크모드를 제공하는거같더라구요
문제인게 웹은 다크모드로 반전되었는데 css에선 라이트모드로 인식을 하니..아주..ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
헤더가 아예 사라졌어요ㅋㅋㅋㅋ
아마 초반에 컬러 스키마가 도입되기 전에는 웹에 자체적으로 다크 모드를 지원하는 경우가 적어서 이미지 같은 건 하얗게 나오니 따로 다크모드 처리를 안해도 임의로 어둡게 보이게 처리를 했던 나름 신기능이었던 것 같지만...! 점점 웹 자체에서 다크모드를 지원하다보니 엇갈려버린 것 같아요😂 언젠간 저 실험실 옵션이 표준으로 들어가겠죵
맞습니다 맞습니다,,
그래도 삼성 브라우저는 저런 경우 제외하면 크로스 브라우징 이슈는 의외로 없어서 저는 좋아합니당... (사파리에 비하면...🥲)
너무나 인정합니다!🥲
피자 먹다 자는 무지님이 나갔습니다.
brew install watchman을 했는데요 Cannot install in Homebrew on ARM processor in Intel default prefix 이런 오류가 뜨는데 해결하신 분 계실까요?
리액트 네이티브 run-ios 하는데 자꾸 build failed 가 뜨네요 . 하하 ㅜ
cpu가 arm이아니라 인텔이셔서 그런거 아닌가용?
파일: react-events.txt
피자 먹다 자는 무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
m1입니다 ㅎㅎ
피자 먹다 자는 무지님이 나갔습니다.
실리콘 가능한 브루 m1버전 설치로 찾아보세요! 인텔 칩이랑 default 경로가 조금 달라서 문제 일수 있을것 같아 보입니다
이직준비중,,님이 나갔습니다.
넵 찾아보겠습니다!
피스메이커 프로도님이 나갔습니다.
회사에서는 환경설정할 때 빠르게 해결안되는 오류 생기면 진짜 답답할 것 같네요 ㅎㅎ
homebrew가 m1용이 있었다니 생각치도 못했네요. 해결 완료했습니다. 감사합니다~!
React 파헤쳐보기! React의 Virtual DOM과 render가 어떻게 동작하지는 잘 살펴본 글이 있어 공유합니다 :) https://velog.io/@yesbb/virtual-dom%EC%9D%98-%EC%84%B1%EB%8A%A5%EC%9D%B4-%EB%8D%94-%EC%A2%8B%EC%9D%80%EC%9D%B4%EC%9C%A0
결국엔 자료구조...운영체제
Hemdi님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Hemdi님 안녕하세요!! 반갑습니다 :)
이모티콘 안녕하세요!
네! 어서오세요 :) 이곳은 프론트엔드에 대해서 궁금한데 물어볼데가 없을때 같이 얘기해보고 싶은데 들어줄 사람이 없을때 내가 알고 있는 것을 알려주고 싶을때 다같이 이야기를 나누며 함께 성장하고자 하는 공간입니다 :) 편하게 글 남겨주세요 ㅎ
혹시 회사 신입 지원시 나 webpack 설정 해봤다 라는걸 어필하려면 어느 정도까지 해보면 좋을까요? CRA 사용하지 않고 앱이 구동 되면 되는 부분일까요? 어리석은 질문같기도 하네요..!
웹팩을 왜 사용했는지 말씀하시면 될 것 같아요! 저도 웹팩으로 환경 구성을 많이 했었는데 어디까지 해봤다 이건 중요하지 않고 왜 했는지 cra로 했을 때와의 비교를 여쭤보시더라고요!!
어느 정도까지 한 다음 웹팩 설정을 해봤다는 스펙을 챙겨가시는거보단 웹팩을 직접 설정하면서 뭘 얻었는지 고민해보시는 건 어떨까요?!
그런것보단 웹팩을 왜 쓰는지가
면접 본 곳 대부분이 왜 사용했느냐를 많이 여쭤봐주셨습니다
웹팩이 필요한 이유나
오호 그렇군요..많은 참고되었습니다! 프로젝트 하면서 적용해보고 사용이유, 비교 내용을 잘 정리해야겠네요 감사합니다!!!
기대하는건 웹팩 사용해봤다 정도이겠지만, 번들러를 직접 만들어봤다? 매우 큰 차별점이 될 듯 합니다
진짜 사용이유는 꼭 물어보시는거같아요
어필 하실정도면 블로그에 웹팩 설정이나, 다른 번들러와 비교정도면 충분히 어필될 것 같아요
질문하나만 할께욤.. 혹시 현업에서 유즈스테이츠는 잘 안쓰는 편인가요?
엄청쓰이지않나요
저희 회사는 유즈스테이츠를 왠지 기피하는거 같아서 사실 이유는 모르겠어요 ㅋㅋ 안좋다? 더 좋은게 많다? 잘모르겠네요
그걸 안쓰면 코드를 어떻게 짜요..?
상태를 전부 전역으로 관리하시나보네요
oOo
저희는 대부분 유드스테이트 씁니다
컴포넌트는 뷰 역할만 하게 하고
테오님도 그러한 방식으로 개발하시는걸 지향하시는걸로 압니다
오 답변 감사들 합니다
혹시 onChange도 부정적이신분들 계신가요? 재랜더링 때문에
리액트에서 리렌더는 좋은거라고 배웠습니다
저도 useState안쓰고 상태로 관리하는데 useState쓰는게 더 나을까요?
사실 프롭스 하기 싫르면 전역으로 하는편인데
우리 회사 프로젝트에서는 단 한번도 유즈스테이츠를 보지 못해서 ㅋㅋㅋ 궁금했습니더..
사실 주제랑 좀 어긋나지만 이방에서 리렌더 최적화 얘기 나올때마다 혼자 소리치고 싶었어요.. 리렌더는 나쁜 게 아닌데..
모든 상태를 전역으로 관리하면
초기화하기 빡세지않나요???
전역을 필요하지 않는 상태는
각 컴포넌트에서 관리합니다
델님이 말씀하시는 나쁘지 않은 리렌더는 어떤 것인가요?
유즈스테이츠 안쓰면 어떤거 쓰시나요?
아하
https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render 이 글 보고 깨달음을 얻었습니다
오호
나쁜 건 rerender 가 아니라 slow render라는
한번 읽어보겠습니다
감사합니다
적연상태관리 라이브러리 mobx 나 아톰 이런거요 ㅎㅎ
씩씩거리는 무지님이 나갔습니다.
아톰은 전역으로 쓰지는 않고 얼핏 보기로는 유즈스테이츠보다 좀더 좋은 성능을 내준다고 본거같긴한데 저도 허접이라..
리액트쿼리 공식문서보다 설명 잘하는 블로그 쓴 걸로 유명한 tkdodo님도 "리렌더는 뷰가 최신화됐단 걸 보장하니까 좋은 거다 오히려 렌더해야 되는데 안 하면 그게 진짜 나쁜 거고, 최적화를 위해서는 리렌더를 막을 게 아니라 구조 변경을 통해 slow render를 막아야 한다" 라고 주장하셨더라구요
사진
아하 그렇군여
오...
여러분들은 메모이제이션을 통한 렌더최적화 많이들 하시나요?
보보님이 나갔습니다.
리렌더링을 최대한 어떻게안할수있을까를 고민했었는데
그래서 onChange 쓰지말고 자기는 form같은걸 이용을 한다고
오.. 사실 잘 돌아가기만 하면 어떻게 짜든 문제는 없겠다만
아직 최적화까진 못해봤네요.. 일단 지금 하고 있는 프로젝트는 최적화가 필요한 케이스가 없었어요
공식문서가 onChange 를 통한 제어 방식을 권장하는데 굳이 큰 차이 없는 성능 개선을 위해 비제어 방식을 채택한다는 건 저는 조금 반대 입장이긴 합니다 :)
질문하길 잘한거 같습니다 좋은.의견들이 많아서
사진
"대부분의 경우 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋습니다"
오.. 👍
혹시 테일윈드로 짠 코드 스타일 번역해주는 사이트같은건 없죠..? 찾아보는데 안나오네요 ㅠ
하나하나 찾아서 바꾸기 참
...
사진
혹시 피그마에서 이 빨간선들 한꺼번에 다 지우는 방법 아실까요..??
룰러가 필요한게 아니라면 cmd+R로 룰러를 끄면 같이 안 보입니다.
감사합니다!!
리렌더링을 안한다기보다는
필요하지 않음에도 불구하고 렌더링이 된다면, 해당 리렌더링을 줄이죠
전혀 필요없는 렌더링이라면 당연히 안 하면 좋죠 👍
근데 그걸 하기 위해서 추가 공수가 들어가고 소스코드가 지저분해진다면, 그냥 렌더되게 냅두는 것도 좋다고 봐요
성능이 좋아야 하는 핵심 이유는 사용자가 불편함을 느낄 수 있기 때문이고, 대부분의 상황에서 리액트는 충분히 빠르기 때문에 사용자가 불편함을 느낄 일이 없으니까요
글 읽고 말씀하시는 요지에 대해 이해했습니다
확실히 리액트 내부 들여다보면
props가 바뀌었을때 돔이 리렌더가 된다는 것 보단
dom의 속성들이 재 업데이트가 되는거라
저는 이 작업자체도 부하가 있을거라 생각했는데 생각보다 큰 차이는 없나보네요
안녕하세요:) 사이드 프로젝트로 웹을 만들고 있는데 궁금한 점이 있어서요! 사진처럼 유저가 웹에서 자료를 읽다가 저희 웹으로 공유 할 수 있게 하려는데 앱으로 개발된 경우에만 가능한 것 같아서 웹을 pwa로 업데이트 하고 이를 스토어에 배포하는 방식만 떠오르는데요,, 혹시 다른 좋은 방법이 있을까요?
요즘 컴퓨터들도 좋아서...
사진
좋은 글이였습니다. 감사합니다! 앞으로 개발할때 좋은 인사이트가
메모이제이션을 하냐마냐 기준판단이
될거 같네요!
참 어려운거같아요
메모이제이션이 하다보면 대충 설명은 어렵지만 자기만의 기준이 생기는거 같아요
맞아요 예를들어서 useCallback이랑 useMemo의 사용도, 앱 규모가 크지 않을 경우 성능 차이는 굉장히 미미해서 ..
렌더링 시간에 확실한 문제가 있지 않는 한
사실 이제 리액트말고 새로운 프레임워크에 대해 진지하게 고민할때 인거 같아요
오 저도 그 생각 있어요
리액트가 오히려 리액트스럽게 개발을 하다보면
스벨트..?
개발 시간을 더 잡아먹고 또 다른 영역에서 햇갈리게
하는거 같아요
스벨트는 사용은 안해봤지만 스벨트도 좋구요
그 저는 좀 호돌맨님과 향로님이 사실
클래스니 뭐니 그게 중요한게 아니고
그 프론트엔드에 정석적인 그리고 일률된 개발방법이 없냐를 여쭤보신거 같아요
손목 터널증후군 있으신 분들은 마우스 어떤거 사용하시나요???
자바 벡엔드가 스프링이 나오고 나서 어느정도 이제 고도화가 됐는데
이쪽 프론트엔드도 단순 돔 상태관리를 넘어서 모두가 비슷한 스타일로 개발할 수 있는 프레임워크가 나와야할거 같아요
키보드랑 마우스 받침대 꼭쓰세요
저는 받침대 쓰고나서 엄청 좋아졌어요
오.. 그게 리액트 아닌가요??
리액트는 생각보다ㅔ
쓰는 사람마다
전역 상태관리 방법도 다르고
컴포넌트 짜는 방식도 다르고
다 달라서
프론트는 춘추전국시대..
플러터 만세
항상 물어보는게 그거 잖아요
마우스 받침대 사용중인데 전 몸도 무겁도 손목도 무겁나봐요 ㅁ받침대가 쿠션이 죽어가고 딱딱해져요 ㅎ
전 뷰가 좋았는데...
리액트 어떤 패턴으로 작성하는게 제일 낫나요?
나무로된거 쓰세용! 이게 위생적으로도 훨씬 좋고 좋아요
전 나무 팜레스트 써요
넉스트쓰면 너무 편했던 느낌이...
이 패턴의 통일을 가져올 수 있는 프레임워크가 나왔으면 좋겠어요
대형 테크기업들도 갈피를 못잡고있는?상태인데 오년은 더걸리지않을까요
흠 교과서적인 좋은 방식이 슬슬 등장하면 좋겠다 라는 건 공감하는데, 그게 새 프레임워크의 등장으로 해결될 문제인가? 싶긴 하네요
ㅋㅋㅋ 모르죠 혹시 어딘가에서 개발하고 있을지도
근데 저는 사실
아니몀 직접
만들어보는것도 좋구요
next가 좀만 더 안정화되면 그런 프레임워크가 될 수 있을 거 같았는데 next 내부 코드가 너무 개판이라 아직 멀었을 거 같아요ㅜ
넥스토좋죠
넥스트가 커지면 좋겟다에 한표
전 스벨트코인을 탔어요
넥스트나 리믹스가
자리가 잡혔으면좋겠어요
스벨트도 나온지 꽤된거가튼데 너무 조용힌듯한데
맞아요 저도 넥스트나 리믹스
뷰는 어떤가요... 앵귤러와 리액트의 중간느낌이라 어느정도 균형있는 느낌인데
저는 새 프레임워크 오픈소스같은곳에 참여하고 싶어요
뷰도 좋아요
저는 뷰는 별로ㅠ
뷰 쓰면서 확실히 좋았던 점은
전 뷰가 진짜 좋았어서
여기는 어느정도
앵귤러랑 리액트의 중간에 있는 게 장점인지는 잘 모르겠어요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
스타일이 다 비슷하게 되더라구요
저도
리액트는 너무 자유도가 높아서
상태관리가
앵귤러에서 리액트쪽으로 가고 더 가야 좋은 거 아닐까.. 싶어요
저같은 초보는 힘드네여
기본적으로 들어가 있어서
그거에 대한 고민은 안해도 되니
이것또한 좋았어요
넥스트도 결국엔 지금말하는 리엑트의 문제점을 그대로 가져가는거 아닌가요?
그쵸 그 어쨌든
모두가 힘듭니다 ㅋㅋㅋㅋ
리낵트니까
액트니까
통일된 상태관리 방법이 있다는건 장점인거같아요
네
그거만으로도ㅔ아마
단순히 생각해서
질문 같은걸도
것도 답변하기 쉽고
채용을 했을때
바로 업무 투입하디도
이전보다는 훨씬 쉬울거라고 봐요
아 근데 이게 또 이렇게 말을 하다보니
통합되기 힘들다고도 느껴진게
우리 프론트엔드 개발자는 개성있는걸 좋아해서
프론트엔드라
좋은거 나와도 “난 이거 싫은데?”하면서
안쓸거 같네요
이미 이 얘기 하고 있는 열 명 언저리 안에서도 스벨트 리액트 뷰 세개 나왔네요 ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
아 이런 의미에서는
리액트가 참 좋은 라이브러리죠
ㅋㅋㅋㅋㅋㅋ
개발자마다 개성이 있는 스타일로 개발가능하니
그래도 전 아무거나 하나가 나머지를 다 찍어눌러줬음좋겠어요
쓸 라이브러리가 많다는게 프론트의 장점이자 단점 ㅋㅋㅋㅋ
하나만 집중적으로 파게
이거했다 저거했다 정신나갈거같애요
그만 개발해....
ㅋㅋㅋㅋ 근데 그거에 대해
고민하는것도
괴로운데 엄청난 성장을 할 수 있어서
입맛대로 골라 쓸 수 있어서 좋은데 처음엔 뭘 파야하나 고민하다 취업 잘되는걸로 파다보니 결국 리액트..
받아드리셔야..할것..같네요…
근데
ㄹㅣ액트는 오래해먹을수있다고생각하는게
사실 프레임워크 전쟁은 종결났다고 보고 리액트 안에서 어떤 방식이 주류가 될지를 지켜보는 게 제일 현실적이지 않나 싶긴 합니다
요즘 전자정부에서밀어주는게 이액트라
그래서 제가 생각하는 건
그 nestjs처럼
그럼 프론트도 si갈수있나요
파견 가보고싶은데
낭만있게
?
리액트를 기반으로 돌아가지만 리액트의 스타일을 고정시키는 프레임워크를 만들면
이미
리액트쓰는 si많아용
파견을 낭만이라고 보신다 ..ㅋㅋㅋㅋㅋㅋ
되지 않을까 싶어요
스프링도 솔직히 JVM이랑 도커 조합도 애매하고 성능도 최고라고 보기 어렵고 최선 아닌데, 훨씬 좋은 go 나 rust 서버가 스프링을 못 이기고 있는 상황이니
아하!! 꼭 한번은 해보고싶었어서
이러다가 프론트엔드자체가 소멸되는던 어떨까요
그럴 수 도 있죠
vercel이 좀만 더 힘내서 next.js 좀 잘 만들어주면 좋겠어요
ㅋㅋㅋㅋ
vercel이 스벨트도 빡세게 밀어주면
넥스트.. 리믹스 힘내...
둘중에 한명만 이겨줘
모두가 코어 개발자로 가야합니다
🙏
백엔드 프론트나누는 이패러다임 자체가 사라지면..
저는 그날을 대비하기 위해
러스트 공부하려고 합니다
러스트가 미래같습니다
저도 러스트코인 탑승했습니다
데논ㅡㄴ
데노는 아직 멀었을까유
노드js는 서버로 경쟁력이 충분할까요
러스트 너무 멋있는 언어같아요
아마 노드는 없어지진 않는데
디노가
대체되지 않을까 싶습니다
저는 진짜코인이나 탑승하렵니다
거긴..
화이팅입니다
부자개발자가 되시딜
러스트 화이팅!!
러스트도 좋긴한데
국내수요가 아직
부자개발자라는건 없을듯..
부자만존재..
그래서 코인인겁니다..
많지가 않아보여서 ..
ㅋㅋㅋㅋㅋㅋ
아무도 모를때 타야
인정합니다
혹시
러스트 외국인 유튜버 아시나요
그
한국말오
하는
외국인이요?
그 자막
노마드코더?
우리 노마드 센세는
https://youtube.com/user/mithradates
go 코인
타셨어요
dlqnsdldy
동일한분이네욬ㅋㅋ
이분 외국분인데
네네 ㅋㅋㅋ
네
봤어요
왜 이렇게 배울게 많아 ㅠ
ㅋㅋㅋㅋ
한국말로 강의하시는거보고
충ㅇ격
ㅋㅋㅋㅋㅋㅋ
외국 보면
맞아요 저도 저거 약간 국뽕 유튜브 느낌이라
신기하게 본 기억이 있급미다
ㅋㅋㅋㅋ
go를 api서버에 많이 쓰더라구요
ㅋㅋㅋㅋㅋㅋ 와 너무 외국인처럼생겼는데 한국망하네
러스트는 배우지 않으셔도 되는겁니다
살짝만 봤을때는 강의 퀄리티도 좋아보이던데
한국에서 쓰는 곳은
당근이랑 배민 정도?
아예 프론트엔드랑 별개라
러스트 메모리 문제를 너무 우아하게
해결해서
그냥 언어자체가 멋있어보입니다
네 외국은 go 많이써용
수요랑 대우도 좋구
유창한 한국말하시는게 왜이렇게 어색하죠 ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋ
예전에 학교에서 있을때
nginx 대신 go traffic
아 이게 아니였는데
ㅜㅜ
이름이 뭐였더라ㅜㅜ
go 쓰는기업들 많을거에요!!
저는 백엔드를 한번
배워보고싶어요
저는 그렇다면
노마드의 nestjs
강의 추천드립니다
간단하고 또 타입스크립트로 진행되서 여러모로 엄청 도움됩니다
네스트가 스프링스럽고 좋죠
근데 아직
저는 이걸 통해서 typescript접하고
프론트도 쪼렙이라 ;ㅁ;
지금까지 잘 쓰고 있습니다
아 찾았네용
Traefik + docker-swarm 해서
외부 클라이언트랑 연동해서 써봤는데
쪼랩이여도 원래 하고 싶은거 하면 성장합니다!
말씀하신게
유튭 클론코딩
한 2년전이라 한국에 레퍼런스가 얼마 없어서
말씀하시는건가용?
네네
힘들었는데 속도면에선 만족스러웠던 것 같습니당
오호
노마드는
강의가격이 좀
부담시러워서
나중에 좋은회사로 옮기면...
정보 감사합니다!
들어봐야겠어용...
아
공짜
강의
말씀 드린가에요
아 api만들기 이거말씀이시군요
그 아마 노마드 사이트에 가면
무료일가에요
우버이츠도 한번
재밌을거같아서 들어보고싶은데
언젠가는 꼭...
👍🏻
사진
input 태그 그냥 border 은 없앴는데
클릭시 생기는 테두리는
어떻게 없애는지 아시는분 계시나요
focus outline을 없애야합니당
css에 outline 있어요
감사합니다
500 error 를 처리하려고 하는데, 500 error 가 제대로 구현되었는지 확인할 수 있는 Mock api.. 같은게 있을까요?
포스트맨으로 보내보면 안되나요?
초보님이 나갔습니다.
useMEMO님이 나갔습니다.
useMEMO님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
서버 코드를 테스트하시고 싶으시면 API client / API tester 등의 키워드로 검색하시면 될 것 같구 클라이언트 코드를 테스트하시고 싶으시면 mock server라는 키워드로 검색하시면 될 것 같아요
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
현명님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
https://doda.app/quiz/sVnyiiTIHi
여러분 혹시 계층적 설계로 프로젝트 구성하실 때 레이어의 추상화 정도랑 에디터에 나오는 순서(abc순)랑 달라서 불편하시진 않으신가요? 처음만 그렇고 적응하면 괜찮으려나요
사진
와웅
편안한거 눌렀는데 8개나 맞췄네요
사진
오 저는 9개네요
ㅋㅋㅋㅋ
사진
ㄷㄷ
사진
ㄷㄷ
침론트
저는 8개 ㅠ ㅋ
ㄱㄷ
10개 다 맞아도 9개로 표시되네요
엇 저는 10개라고 잘 나오던데 간헐적 버근가여?
안녕하세요! 핸드폰 번호가 아닌 ‘차량번호판’을 매개로 소통(채팅)하는 플랫폼 PLEASY에서 프론트엔드 개발자를 모집합니다! PLEASY는 번호판을 스캔시 광고를 매칭하는 특허를 보유하고 있고, 이외 여러 특허를 출원하였습니다. 다행한 기획을 같이 실현하실 하이브리드웹앱 개발 경험이 있으신 프론트엔드개발자를 구하고 있습니다. 업무는 저희회사가 소유하고 직접 운영중인 신촌역 도보 1분거리 ‘공유오피스 ILTER - www.ilter.work’에서 합니다. 바로 옆 같이 운영하는 식당 겸 카페 ‘MONTUNO - montuno.co.kr’도 이용 가능합니다. 좀 더 자세한 서비스 소개, 팀소개는 아래 페이지를 참조해주세요! https://general-tiger-45c.notion.site/PLEASY-75e64132e2ce4d13b8fe073d74bd0518 홈페이지 ：www.pleasy.co.kr 유튜브 : https://www.youtube.com/channel/UCscDp-w-Vel9TqfbCAC0B_Q 플리지 인스타그램 : https://www.instagram.com/_pleasy__/ 사용법 소개 영상 : https://youtu.be/gE2qbeC_kIg 채용공고: https://www.saramin.co.kr/zf_user/jobs/relay/view?rec_idx=43249822&view_type=etc 채용문의: http://pf.kakao.com/_nxmTvs/chat
사진
저도 10개 잘 나와요 버그인가봐요 ㅎㅎㅎ
서울시에 거주하시는 분들 학자금대출 이자지원 사업 신청하세요 :) 링크: https://youth.seoul.go.kr/site/main/content/sup_busi_intro
지금되나요
오 감사합니다
삭제된 메시지입니다.
저 오랜만에 질문좀 하나 드리겠습니다! 다중의 api를 받아오는 상황인데 프론트에서는 이걸 하나의 상태로 처리하고 싶으면 어떻게 하는 방법이 좋을까요??? 저 다중의 api 컬럼들은 다르긴 하지만 프론트에서는 공통의 컬럼들만 합치려고 하거든요 (예시로 api1 : a,b,c의 값, api2 : a,d,e의 값, api3 : a,f,g의 값)
안 합치는 게 나을 거 같은데요??
그냥 따로 관리를 해주는 편인가요??
프론트에서는 a값말고는 사실 필요없눈 값들이기도 해서
필요없는 값을 굳이 받는 이유가 있나요??
리스폰스에서 필요 컬럼만 빼내면 되긴 하는데.. 저 값을 안합쳤을때의 이점을 알려주실 수 있을까요???
합칠 때는 공통된 부분이 많을 때 생각하는데, 일단 하나밖에 없어서 필요성을 못 느끼겠어요. 또한 합치게 되면 의존성이 생기기 때문에 a하나로 묶고 나중에 수정하게 되면 다 바꿔야 해요. 나중을 생각했을 때 굳이?라는 생각이 드네요.
api1 api2 api3가 정확히 어떤 값을 받아오는 코드에요?? 제가 대답을 드릴 수 있는 건 아니지만 궁금해서 질문드렸습니다!!
아 저건 예시이고 공통된 부분들은 8개정도됩니다! 공통된 부분들 역시 거의불변의 키들이기도 해요
청약정보를 캘린더에서 보여주려고 하는데 아파트청약/주탱청약/오피스텔 등 여러가지 api종류가 있고 거기에 공통되는 부분들이 있습니다
제가 실무에선 프론트개발자가 아니고 혼자 사이드프로젝트로 만들어보고 있는데 실무자의 입장에서 어떻게 처리하는게 효율적인 방법인지가 너무 궁금하네요 ㅠㅠ
저라면 훅을 만들 거 같네요
그방법도 고려했는데 감사합니다!!
사진
젠장 폴드 호환안되서 질문이 안보여유 ㅠ
나쁜 사람들..
히히 10개
Hopeful Neo님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
늦게 봤지만 너무 감사합니다 ㅎㅎ !!
게다가 보기는 상하인데 선택지는 좌우라서 바람직하지 않은 디자인인듯 ㅋ
근게요..ㅋㅋㅋㅋ
그치만 저런 반응형 만들어서 서버 넘길생각하니.. 벌써 만사귀찮 ;_;
보통 리액트에서 GA 적용할때 react-ga 로 하시나요? 아니면 헤드태그에 직접 넣으셔서 하나요?
이게 아마 낮은 버전만 지원하지 않나요?
네 최신꺼를 업뎃 안해주더라구요
안녕하세요! 혹시 리액트에서 useForm 사용해보신분 계신가요? 다름아니라 useForm을 그냥 input태그에서 사용하면 잘 작동하는데 따로 컴포넌트를 만들어서 전달하면 에러가 발생하더라고요... 타입 문제인 것같은데 사용해보신 분계신가요?
사진 2장
사진
inputBox 에 ref 사용을 안 하시는데
useForm을 사용하냐고 물어보셔서 react에 useForm 이 있었나… 했네요. react-hook-form 사용하시냐고 여쭤보시는게 맞는거 같구여.. 사용할 때도 {…register} 이런식으로 사용하는거 아닌가요~
죄송합니다! 질문이 모호했네요! 그 정확하게는 타입에러가 있는 상태입니다.
사진
fowardRef 일때 저기서 ref 받아오는게 아니고 2번째 인자로 받아오지 않나용
사진은 제가 코드 조금 수정해서 보내느라 ref가 빠져있던것같습니다 Docs에 나온대로 구현해도 타입에러가 뜨기도 하고, 이 방법이 아닌가 싶어서 혹시 경험있으신분 조언이 듣고 싶었습니다!
ref 타입 제네릭도 제대로 안 돼있는거 같구영 fowardRef면 타입 2개 줘야합니다
조금 더 찾아보고 나중에 정확하게 다시 질문드리겠습니다!
삭제된 메시지입니다.
forwardRef<ref가 할당되는 요소 타입 정의, 컴포넌트가 기본적으로 받는 프롭 타입>((컴포너트 프롭, ref) => return 컴포넌트)
그리고 InputBox.displayName = "debugging시 보여지는 이름" 해주어야지 린트 에러 안뜰거에용.
열받게 ref타입, props 타입 줬는데 순서는 props, ref로 받아요 순서 그대로 하면 안되나.. ㅋㅋㅋ
삭제된 메시지입니다.
pc로 작업중인데 visual studio code 가 너무 느려요.. 그냥 폴더 만드는것도 약간씩 걸리고 코드 치고 저장할때도 느리고 깃허브에 커밋이나 푸쉬할때도 자꾸 시간이 걸립니다
해결법 아시는분 계신가요
pc 사양은 그냥 고사양 게임들 다 무난하게 돌아갈 정도 입니다
설치된 플러그인 문제 일 수도 있습니다.
익스텐션 중에서 문제 있는 거 binary search로 찾아보시는 건 어떠신지요?
vscode 싹다 지웠다가 다시 깔아보거나 저는 vscode insider로 쓰고 있습니다.
아 이게 왜이렇게 웃기죠 ㅋㅋㅋㅋㅋ
실생활 알고리즘
권한이 있어야 오픈할 수 있는 페이지는 ssg로 구현하지 않는 게 좋은가요? 미리 페이지를 생성하려면 api를 빌드타임에 호출해야되는데 api 호출을 하려면 액세스 토큰이 필요해서 어떻게 해야될지 잘 모르겠네요..
Ssr이 낫지 않을까요?
음 역시 그렇겠죠..
권한 없는 페이지는 SSG로 구현하고 권한 필요한 페이지는 SSR로 해봐야겠네요
감사합니다!
혹시 Next.js에서 index말고 특정 route를 접속했을 때 첫 페이지로 하고 싶을 땐 어떻게 해야될까요?? index.tsx에서 useEffect로 router.push 하는 방식으로 했는데 뭔가 계속 버그가 걸리는 게 이 방식은 아닌 것 같아서…
getServerSideProps 의 context를확인해보세요
redirect 속성있습니다
아 인덱스를..?
딱 접속을 햇을 때 특정 라우트에서 처음 접속하게 하고싶습니다!
get req가 '/'면 다른페이지로 이동시켜주게
커스텀 서버
사용하는방법은 어떠신가요
가능은한데 왜? 특정페이지가 먼저 나와야하는지도 궁금하네요
특수한 경로로 접속했을때 메인이 아니라 특정 페이지로 이동시키고 싶다는걸까요?
nginx를 쓰시는게 더 좋아보이네용
음 예를들어서 문제집의 리스트를 맨 처음 띄우고 싶은데 라우트를 문제집 리스트 화면의 라우트를 quizbooks?week=3 이런식으로 사용했습니다
김뱅님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
토스 js코테보신분계실까요..
저요 ㅜㅜ
라이브러리 만드는 느낌!!
시간 넘 부족했네요 ㅠ
혹시 2번문제 1번 케이스만 실패하는데 요거 먼가요..?
저 c++로만 풀다가 js로푸려니ㅋㅋㅋ 개망했네요 ~
6번 문제 오류있는지 모르고
새로고침안하고
풀다가 망했급카다 ㅜ
저도
66번
공지안보고
계속풀다가 시간 엄청
날렸어요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아아
여러분 다음시험도 파이팅!
뚜벅이님이 나갔습니다.
원티드 프리온보딩 사전과제는
시작 후에 제출하는게 맞죠?!
저도 케이스 하나만 실패했는데 시간이 없어서 못고쳤네요.. 저는 빈문자열인 경우에도 '?' 을 반환해서 실패했었는데, 1번 케이스가 뭐였는지는 잘 몰겠네요
오 프리온보딩 하시는군요
네네! 제이지님도 하시나요?
오 아닙니다..!
저도 비어있는 경우 ? 만 반환하는 예외를 처리했는데도 계속 실패하더라구요;
악 토스
코테잇엇군요
이런
재밋었겟다..
아 그런가요? 전 몇초 남긴 상태에서 발견해가지고... 더 봤으면 좋았을텐데 ㅠㅠ 한시간반 진짜 촉박하더라구요 2시간이면 딱 좋았을거 같은데..
제출하는건 아니고 수업?들으면서 작성한 코드를 스스로 개선해 나가는 것 같아요~~ https://github.com/starkoora/wanted-pre-onboarding-challenge-fe-1-api/issues/1
감사합니다ㅎㅎ
무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
다들 NEXT토스 몇 솔 하셨어요??
저는 7솔이염
정규식 활용하는게 너무 어렵더라고요
7문제 모두 정답으로 나오신 거에요?
네넵, 8번 풀다가 시간 끝났어요
아마 시간 더줬어도 못풀었을듯합니다
많이 푸셨네용
와
고수시네요
전 5개인가 ㅋㅋㅋ
정규식 싫어.. 패스
토스 가시겟네요 7개면..
이미 다니고 계시려나
흑 저는 6솔이요 ㅠ
시간 좀맘 더 있었으면 7솔 하지 않았을까 행복회로를…
6/8 충분히 잘하셧는걸요
우악 토스 코딩테스트 있는지 몰랐네요…! 다음엔 꼭 해봐야지…
으렵네요 토스테스트
와……. 토스.........
말했습니다앙 😭
망했습니다
토스 바이바이🥲
원티드 사전과제 하고 있는 중인데 회원가입에서 jwt 토큰 받아오는 부분을 잘 모르겠네요 ㅠㅅㅠ db/db.json 쓰라고 해서 json-server 쓰는데 localhost:8080에서 api대로 데이터 POST로 보냈는데 404 에러가 뜨네요..
사진
테스토스테론 같고 좋네요
토스테스트
ㅋㅋㅋㅋㅋ
와 시간압박이 엄청나네뇨...
오홍 여기도 백엔드 보신 분들이 계시군요
사진
프론트는 10문제인가 그랬던거 같은데
시간 1.5배씩 있었으면 딱 좋았을텐데
사진
아 저는 프론트라서 7/10 이에요
맞아요 프론트 10문제
와 7문제나 푸신거에요
대단하다
대박
3솔은 어디가서 명함도 못내밀겠네요
조금 띄엄띄엄 올라갔는데 한번 봐주시면 감사하겠습니다!! ㅠㅠ
저희를 띄엄띄엄 보신건가요
pin 문제 하나 실패 떠서 ㅠ 5솔..
작년 next 코테에서는 1문제 빼고 모두 솔 하신분도 탈락핬다고 하셨는데, 이번에는 어떨지 모르겠네요
하나 예외가 뭐지..
ㅎㄷㄷ
사진
cors랑 default 경로는 최상단 App에서 이렇게 처리했어요!
어 아닙니당 ㅎㅎ 제가 타이밍을 잘 못맞춰서 ㅠㅠ
악ㅋㅋㅋㅋ장난입니다
db/db.json 쓰라고 했다는 말씀이 db 디렉토리 내의 db.json 파일내용을 쓰라고 했다는 말씀일까요?
네 맞아요!!
json-server를 쓰라는 말은 따로 없었는데 그 내용이 있어서 그냥 썼어요.. 근데 localhost:8080을 제시해준거 보니 필요없는거같기도 ;;
그렇다면 호출 url을 /users/create 에서 해당 파일path로 바꿔주어야 하지 않을까요?
사진
헤헤 잘 모르겠네요…
해당파일 path요??
base url localhost:8080으로 가리키시고 하시면되는데 네트워크탭에서 어디로 통신하는지 보셔야할거같아용 404면
아 네트워크 탭! 한번 보겠습니다!
본다고 뭘 알것 같진 않지만.. ㅠㅠ
general이랑 response request header 각각 있는데
어디를 봐야 할까요??
사진
혹시 서버키셨나용
jsonserver
사진
네 concurrently로 yarn dev 하면 클라 서버 둘다 한번에 켜지게 했어요~
사진
api쪽에 이렇게 나와있는데 그러면 user 내용이 이쪽 서버로 들어가는 거니까 json-server가 필요가 없는걸까요??
근데 localhost인데.. (혼돈)
삭제된 메시지입니다.
삭제된 메시지입니다.
promise 문제 정답좀 갈쳐주실분 계신가영
어피치님
앗 그러네요 삭제했습니다 ㅠㅠ
프로그래밍 자체가 추상화를 기반으로 하지 않습니까..?
갠톡주시면 보내드릴게욥!
후론트라서 안할 순 없는 것 같아요..!
루비엉니님 https://www.youtube.com/watch?v=edWbHp_k_9Y 해당 영상 보시면 궁금증 해결하실거에요
오 대박 감사합니다!
Promise.race, setTimeout, Promise.reject 세개 활용해보시면 될 것 같아요!
그럼 저 질문은 프로그래밍에서 사용되는 추상화에대한 물음 이해하면 될까요?
토스 서술형은 이미 SLASH에서 다룬 개념들에서 나온거라서 영상 다 보시면 도움될거같아요
그렇군요! 감사합니다 ㅎㅎ
감사합니다
네트워크 탭에 payload는 올바르게 왔는데 Headers에서 에러가 나는 경우는 어떤 경우인가요?
아 payload는 클라쪽에서 보낸거군요... Response가 빈 객체네요 ㅠㅠ
저는 race 는 안 쓰고 setTimeout 하고 fetch 에서 finally로 cleatTimeout 했는데 통과였어용
오, 그 방법도 있겠네요!
안녕하세요! 홈페이지에서 직접 지원서 작성해서 제출하는 회사일 경우 직전연봉, 희망연봉 기재하는 회사가 많던데 이럴경우 희망연봉이 너무 높으면 탈락하는 경우가 있을까요?
clear 오타요 ㅎㅎ
그 회사에 알아서 판단하지 않을까요?
어떤 로직으로 푸셨는지 모르겠지만 차이가 일정한데 연속적이지 않은 경우도 고려하셨나요?
희망연봉이 회사에서 생각하는 금액보다 맞지 않더라도 회사에서 필요한 분이라고 생각된다면 인터뷰 후에 연봉협상을 하면서 조정할 것 같아요! 회사에서 생각하던 금액보다 많이 높다면 서류 검토 시 판단에 따라 탈락시킬 수도 있겠지만 그 정도로 차이가 난다면 아마 지원자 입장해서도 맞지 않는 회사라고 생각하면 되지 않을까 싶어요(입사 후 연봉협상 등을 고려할 때 전체적으로 연봉풀이 낮게 형성되어있다던가 등)
입장해서도 > 입장에서도
터무니없지 않으면 가치에 맞으면 상관없겠죠?
UI /UX 레퍼런스 모여있는 사이트좀 추천해주실 수 있을까요???다들 디자인 참고하실때 어떤 사이트를 보시나요?
저는 Behance요!
감사합니다!
와 좋은 자료 감사드립니다 멈추고 보고 하면서 많은걸 배웠네요 감사합니다
안녕하세요 최근에 기술면접 합격하고 2차 컬처핏 준비하고 있는데 주로 어떤 것들을 위주로 준비해가면 되나요? 처음 준비해보는거라 막막하네유 ㅠㅠ
회사 서비스 에 관해서..?
편하게 가셔서 두런두런 이야기하다보면 되지 않을까요~? ㅎㅎ
저는 너무 빳빳하게 긴장해서 처음에 무슨 기술면접 하듯이 이야기했는데
15~20분 정도 이야기하다보니
서비스 사용해보면서 궁금했던거 물어보고 이렇게 해보는건 어떨까 저렇게 해보는건 어떨까 하면서
제가 받았던 질문들은 - 동료와 의견이 다르면 어떻게 조율하나요 - 제일 같이 일하기 싫은 타입은? - 우리 서비스 써봤어요? 무슨 기능 추가하고 싶었어요? - 워라밸에 대해서 어떻게 생각하세요? 이런 거였어요
같이 그냥 아야기하시면 될 것 같아용
그래서 뭔가 어쩔 수 없이 있는 그대로를 보여주게 되고 꾸며내는 게 불가능한 구조였고
공부해간다 하면 회사 문화 관련 문서가 있다면 좀 읽어가보기..?
합격하고 나서 커피챗할때 저 컬쳐핏 어디가 마음에 들어서 합격시켰냐 여쭤봤더니 전 당연히 대답을 잘해서일 줄 알았는데 답변 내용도 내용이지만 대답을 하는 방식이 마음에 들었다고 하시더라구요 진짜 면접자랑 프리토킹하면서 회사에 어울리는 사람일지를 고민하는 시간이 컬쳐핏인 거 같아요
오… 되게 딱딱한 분위기인줄 알았는데 의외로 자유로운 분위기군요
회바회인 거 같아요 엄청 딱딱한 회사도 있었어요
근데 그 회사는 원래 딱딱하기로 유명한 회사였어서 ㅋㅋㅋㅋ
그래도 뭘 준비해야할지 감은 잡힌거같아요! 1차때 그렇게 딱딱한 분위기가 아니였어서 2차도 비슷한 분위기이지 않을까 싶어용
그런 점에서 '컬쳐'핏이 아닐까 싶어요👀
넵넵 회사 문화 관련 도큐먼트가 있으면 공부해보시고, 서비스 회사면 그 서비스 좀 써보고 고민해보시고, 그리고 평소에 토벤님이 어떤 생각과 관점을 갖고 사시는지 잘 정리해보시면 좋을 거 같아요!!
10년 뒤에 뭐하고 있을 거 같냐는 질문도 많이 받았던 거 같아요
넵! 덕분에 많은 인사이트 얻어가요~
혹시 바벨을 사용하는 이유가 크로스브라우징 이슈 외에 다른 이유가 있을까요? 요즘 브라우저들은 es6 문법을 지원하는걸로 알고있는데 바벨을 사용할 필요가 있을까요??
Jsx랑 타입스크립트도 바벨 플러그인으로 트랜스파일하긴 하죠!
타입스크립트랑 jsx를 바벨로 트랜스파일했을 때 이점이 있나요?
jsx를 바벨로 트랜스파일 하지 않는다면..
어.. jsx는 바벨만 할 수 있지 않나요?
우선 기본을 생각해보면
브라우저는 js 만 읽을 수 있져
jsx ts를 js로 바꿔야하는데
타입스크립트는 확실하진 않은데 tsc는 타입 체크를 해주지만 느리고 바벨은 타입체크는 안해주지만 빠르다고 알고있어요 (틀렸을 수 있습니다)
컴파일을 통해서 js로 만든 파일을 실행 시키거나 바벨을 통해 컴파일 과정 없이 트랜스파일을 진행해서 js로 바꿔주는걸로 알고 있어요
네넵 tsc는 컴파일 바벨은 트랜스파일로 저도 알고 있어요
ts랑 jsx는 브라우저에서 읽을수없습니다
델님께서 얘기하신 내용 요기에 나와있어요~
앗 감사합니다!!
인사가 너무 늦었습니다.. 안녕하세요 선린인터넷고등학교 소프트웨어과 재학중인 1학년 웹 개발자 지망생입니다. if kakao를 통해 functional css, AdorableCSS 등의 유익한 내용을 알게 되면서 테오님의 글을 읽고 많이 배우고 있었는데. 이런 오픈채팅방이 있는것을 알아서 배우고자 들어오게 되었습니다
환영합니다 :) 고등학생이라니 멋지네요! 이곳은 프론트엔드에 대해 궁금한게 있을때 언제든 물어보고 공유하며 함께 성장하고자 하는 곳입니다~ 궁금한게 있다면 언제든 글 남겨주세요!! 화이팅입니다
감사합니다. 열심히 배우겠습니다!
슈퍼고등학생 안녕하세여
고등학생이라는게 너무 부럽네요..
취업과 진학의 갈림길에 서 있는데
대학을 가서 가르침을 더 받고싶지만, 중학생때 시작해버린 웹 개발이 너무 재밌어서
방향성이 취업으로 틀어지고 있습니다..
사진
기획하고 디자인하는걸 좋아해서
제 아이디어를 제가 실제로 구현할 수 있는게 너무 즐겁더라고요
저는 프엔 개발자도 cs가 중요하다고 생각해서,, 대학교가서 cs 도 학습해보시는게 좋을것 같아요
다른 유사 직무에 대한 시야도 넓힐수 있지 않을까요 ㅎㅎ
공감합니다 비전공자인데 년차가 쌓일수록 cs쪽이 부족한게 느껴집니다
저도 만약 제가 그 나이라면, 대학에 무게를 더 둘 것 같네요. 지식외에도 교수님, 동기들 여러 네트워킹과 더불어 인생의 시야가 넓어지는 경험이 될테니까요.
꼭 대학에서 뭘 배운다기보다 여러 기회가 주어지는 것도 장점이라고 생각합니다 ~
다들 좋은 말씀 감사합니다. 아무래도 대학을 못가서 잃는 메리트가 큰건 확실하군요..
제가 아는 분은 취업하고 일하시다가 나중에 대학 들어가셨어요.
재직자 전형인가요?
네네!
취업은 어디로 갈 생각이에요?
생각한건 토스.. 콴다.. 정도였습니다
개발에서 학벌은 중요하진 않다지만 어설프게 입사를 하고나면 점점 더 실력을 즐명하기가 어려워서
저도 그 부분이 너무 고민이었어요
내가 지금 이렇게 개발 공부를 한다고
진짜 실무에서 잘 할수 있을까
진짜..
ㅠ
개발센스가 있다면야 잘 하실수 있을 거에요~ 입사만 가능하면야 뭐 해봄직하시겠지만
내신도 절대 놓지 말아야겠네요.. 감사합니다
워후
슈퍼고등학생이..!
멋있다요..
아 나도 고등학생이었는데!!
너무 놀았다!!
둘다 프론트는 진짜 좋은 회사니까 들어가시면 많이 배우고 인정받으실 수 있을 거 같긴 하지만, 그래도 저도 대학 쪽에 한 표를 던지고 싶긴 하네요..!
조별과제가 되게 의미 없어보이지만 여러 사람들과 같은 주제를 가지고 목표 달성을 위해 협업하는 행위를 배울 수 있는 기회라 저도 대학 가시는걸 무조건 추천드립니다
대학이 꼭 학업에만 방점을 찍지는 않습니다.! 개발도 정말 잘하시는 것 같지만 공부하셔서 서울이나 수도권 오시면
연합동아리, 각종 대외활동, 해외 교환학생 등 지금까지 살아왔던 환경과 분야가 아예 다른 사람들을 만나볼 수 있어 좋았습니당
랑이님이 나갔습니다.
휘파람 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
학교 선배님 중에 선린고등학교에서 오신분이 계신데 후회하지 않아
하시더라구요
답을 쓰다가 전송 버튼을 눌러버렸네요 ㅠ
대학생활 누구보다 열심히 하시고 지금은 카카오에 계십니다
취업도 좋지만.. 이때가 아니면 할 수 없는 것들이 너무 많다고 생각해서 대학 진학도 나쁘지 않다고 말씀드리고 싶었어요
감사합니다
저도 대입을 다시하는 기회가 있다면 대학갈것같아요
저는 대학 비추천 합니다 4년의 시간동안 원하는 것만 배우는 것도 아니고(도움도 되는것같이 않고...) 경력이 중요한 이 업계에서 남들보다 3년의 경력이 더 있는건 매우 큰 무기같아요 금전적으로도 3000후반대의 학비와 (저는 대학재학중이라 내일체움공제도 못받음) 시간이 가치있지 않았어요...
저라면 우선 1학년 다녀보면서 빠르게 결정하시는게 좋을 것 같아요(실제로 자퇴율도 높았어요 라뗀...) 군복무요원으로 군생활과 경력을 같이 쌓으면서 그 후에 선택하셔도 되고요!
저는 4년의 시간동안 원하는 것만 배우는 것도 아니라는 말이 더 와닿네요 원하는 것만 배우는 것이 아니기 때문에 오히려 더 새로운 흥미를 찾는데 도움이 될 수도 있다고 생각이 들어요! 아직 어리기에..! 최대한 많은 것을 경험해보라고 조언드리고 싶어요
저도 같은 의견이에용
사실 다양한 시각을 가지면서, 다양한 것들을 배우는 것도 좋다고 봐서... 시야가 넓어지는 만큼 다양한 접근이 가능해진다고 생각하거든요 ..ㅎㅎ
대학이 갖는 장점도 많아요, 많은 친구를 만들 수도 있고 그리고 대학을 나왔을 때 선택의 폭이 넓어지는 경우도 있습니다. 과제나 동아리 등을 통해 꿈을 바꾸는 경우도 많구요. 그리고 아직까지 우리나라에서 대학 나온 사람의 인식 자체도 신경 쓸 부분이구요. 물론 요즘엔 점점 없어지는 추세라지만 어른들이 안좋아하는 경우를 봐서.. 마지막으로 여자친구가 생길 확률이 0.3% 증가합니다.
-0.3%로였는데 저는 그래도 0이 됬어요 연인 생길 확률이
물론 실력으로 뽑는 것은 사실이나, 대학을 나온다면, 그리고 좋은 대학을 나온다면, 거기에 컴퓨터공학 관련 전공을 다니는 것은 그렇지 않은 것보다 대단히 유의마하게 많은 기회를 알게모르게 부여받습니다
ㅋㅋ
저도 처음에는 대학을 왜 갈까, 대학을 가서도 이걸 배워서 뭐에 써먹을까(문과였기도 했어요), 철학수업, 역사수업, 다양하게 듣게 되었지만, 뭐에 써먹을까 하는 부분이 의문이긴 했어요. 근데 졸업하고 회사를 다니면서 다양하게 써먹긴 하더라구요, 사실 회사를 다니는 것만이 삶이 아니라고 봐서 삶을 살아가면서 다양한 위기에 봉착하고 그것을 어떻게 풀어낼까에 대한 실마리를 얻은 경우가 많았습니다. 직접적으로 대학에서 배운 것이 쓰이지는 않지만(쓰이는 경우도 있지만), 그것이 어느정도 실마리 또는 다양한 배경지식을 부여해주었습니다 ㅋㅋ
저 소개팅녀랑 동시에 질문 했을때
저는 아르바이트를 많이해봤는데, 경험은 대학에서만 구할 수 있는건 아닐 것 같아요 서류에 대학필수는 아직 많지만, 저도 그런회사는 가고싶지 않아요 여자친구는 인정합니다 ㅋㅋ
교착상태 이야기 했다가
그대로 읽씹당함요
...ㅠㅠ
컴공에게 연애는... ㅎ...
저도 같은 의견입니다! 아직 고등학교 1학년 이신데 벌써부터 진로에 대해서 고민하시는 모습을 보니 대학생활도 잘 하실 것 같네요ㅎㅎ 전 나이 대 마다 경험할 수 있는게 있다고 생각하는데 대학은 그런 것 같아요 다양한 사람들을 만나고 전공뿐만 아니라 여러 견문을 넓힐 수 있는 기회라고 생각합니다 사실 이런 경험은 돈주고도 사지 못하는 경험이거든요
아주 단적인 이야기인데 나중에 창업을 한다고 했을때, 고졸로 창업하는 길은 매우 어렵습니다. 초기 맴버로서 합류하는 길도 어렵고 스톡 옵션도 기대하기 어려운 부분도 있습니다.
VC 들은 아이템 보다 사람을 먼저 보는 경향이 짙습니다. 시리즈 A 전까지는
결국 뭐가 되었든 자신의 선택이기에, 성공을 하든 실패를 하든, 그치만 후회는 하지않을 선택을 하세요...
창업에서 그말은 맞는것같아요 그래서 그러한 사람을 파트너로 두는 방법도 있죠
대학에서 배우는 학문이야 정말 실제로 쓸모없을지도 모르지만 그안에서 배우는 팀플이나 사람사이의 관계 인맥은 돈으로 사기 어려운 부분들이라고 생각해요! 또 물론 제리님 말처럼 알바를 통해 배울 수도 있지만 도움이되는 알바를 구한다는 보장도 없고 조금 쉬운 길을 택하고 싶다면 대학을 가는 것도 하나의 좋은 길이라는 걸 알려드리고 싶어요 절대 쓸모 없는 시간은 아닐겁니다
하지만 결정은 본인이 하는 것이기 때문에 어떤 결정을 하든 응원하고 싶습니다 슈퍼고등학생!!
다들 정말 감사합니다.
후회하지 않을 선택 해서
최선을 다하겠습니다!
ts 공부중인데요
interface를 class를 정의한 곳에 같이 두는게 좋을까요
아니면
interface 디렉토리를 따로 만들어서 관리하는게 좋을까요?
일반적으로 별도의 디렉토리를 통해 관리하는 것으로 알고있어요
프로젝트의 성격에 따라 다를 수 있습니다
저는 런타임에서 동작하는 코드와 타입은 별개의 파일로 둡니다
음 생각해보니 따로 두는게 맞는거같네요
인터페이스를 여러곳에서 import 하지 않는다면 사용처에서 바로 선언해서 써도 괜찮아요
interface 가 하나의 class를 만드는게 확실하면
같이 두는것도 괜찮아 보이는데
실질적으로 타입을 한곳에 두고 쓰면 이게 뭔지 잘 기억이 안나서 저는
api 호출부 쪽이나 서비스관련에 모아둡니당
답변 감사합니다
또 질문이 있는데요
class를 만들 때 interface를 항상 선언하는게 좋나요?
아니면 프로젝트 규모에 따라 달라지나요
class 자체를 type으로 쓸 수 있는 거 같아서..
조금 헷갈리네요
기본 클래스를 상속해야 하는 경우 (axios error, error 등)이 아니면 딱히 클래스 잘 안쓰고요. 클래스가 있으면 인터페이스가 딱히 필요없죠? 반대도 마찬가지고요.
클래스랑 인터페이스를 같이두는게 맞느냐? 는 성질보다는 응집도 결합도 축면에서 두 데이터가 같이있는게 맞냐? 를 보는게 좋겠네요
제가 실무를 해보면서 적용해본 것이 아니라서 현실성이 떨어지는 내용일 수도 있습니다만 개인적으로 공부해왔던 내용을 공유드립니다. 결론부터 말씀드리면, interface를 쓰는 것이 매우 매우 권장되는 경우는 해당 class의 사용자가 해당 class를 바꿔가면서 사용해야 되는 경우 해당 class의 사용자가 해당 class보다 더 추상적인 경우 다시 말해 Dependency Injection이 필요한 경우 interface를 쓰는 것이 보기에 더 깔끔한 경우는 class의 모든 기능을 쓰는 것이 아니고 사용하는 관련 일부 기능들만 정리하고 싶은 경우 정도로 알고 있습니다. 그래서 저는 누가 더 자주 바뀌는지, 누가 누구에게 의존하는지 등을 파악하고 나서 코드를 짜려고 하는데 조금은 편해지는 것 같아요.
네오님이 나갔습니다.
네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
제가 한 회사를 목표로 잡고 공부하고 싶은데 현역 좋은 IT 병역특례 업체를 추천해주실 수 있나요?
토스 당근 채널톡 콴다 배민 오늘의집 정도 생각나네요!
고등학생이신가요 대학생 보충역이신가요?
엥 거기서 병특을 주나요?
산업기능요원 갈 생각입니다 고2입니다
배민은 지금은 모르겠네요 나머지는 돼요
배민 되네요
엥
사진
토스는 현역 전직만 가능하네요
아 이제 신규 안받나요? 제가 좀 오래된 정보를.. 갖고있었네요 ㅎ
당근도 이제 불가능한 거 아닌가요??
캐묻는 거 죄송해요...저에게는 중요한 내용이라
아뇨아뇨 그마음 너무잘알죠ㅜㅠ
사실 그때돼서 회사에 메일 보내보시는게 제일 나을거같아요
근데 지금 목표를 잡고 그 회사에서 요구하는 기술스택에 맞추어 프로젝트를 해놔야할 것 같아서요
위에 회사들 전부다 리액트 타입스크립트긴 해서
그래도 정 원하시면 지금 메일 보내서 물어봐보셔요!
부끄러워하는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
고등학생 신규 병특 하고 싶은데 혹시 고등학생 현역 병특 뽑냐 아직 고2라 1년 남았지만 미리 준비하고 싶어서 연락드린다
이모티콘 지금 메일 보내볼께요 답변 감사드려요
777명 럭키 트리플 세븐! 축하합니다
친절하게 대답해주실거예요!
아하
부끄러워하는 라이언님~~ 반갑습니다 :)
안녕하세요~!
@hyeoki @Herb 답변 감사합니다!
어서오세요!! 이곳은 프론트엔드에 대해 궁금한 것들을 물어보고 아는 질문에는 적극적으로 답해보면서 함께 성장하고자 하는 곳입니다 ㅎ 잘 부탁드려요
오..
2학년분이신가요
넵넵 잘부탁드려요 ㅎㅎ
저는
특성화고 다니는 1학년인데
이거보다 headless UI 링크 따라가서 잠깐봣는데 모든 변수를 let으로 선언하는군요...
저도 라이언님처럼 프로젝트 많이 하면서 취업 생각하고 있었어요
그러다가 여기분들 말씀 듣고
내신 공부 놓지 않으려고요
이 방에 특성화고 분들이 많네요 ㅎㅎ 일찍 시작하시는거 부럽습니당......
그러게요 현명님은 병특 생각 없으신가요?
병특은
생각해본 적이 없어요
그러게요!! ㅋ 저도 어렸을때 그런게 있는 줄 알았다면 더 빨리 시작했을것같아요
어제는 대학 추천드렸는데 병특이 끼면 말이 달라져서
아하 넵넵
선배님들 중에 병역특례 받으신 분들 많이 보긴 했는데
저는 병특같은 혜택보다는
더 많이 배우고 발전하고 싶은 마음이 커서
군대에서 컴퓨터를 못 하는 시간을 안 가질 수 있는 것 만으로도....
어 음 개인적인 생각으로는 군대에서 18개월 멈춰있는거보다 회사에서 34개월 배우는 게 더 성장 아닌가..? 싶긴 한데
아
그걸
아무튼 넵넵!! 좋은 선택 하시길 바라요
생각을
못했는데
아니 그거
생각보다 리스크가 너무 큰데요
멈추는게 제가 제일 두려운건데
합법적으로 안 갈 수 있으면 안 가시길 바래요 ㅎ
군대가 아니어도 사회생활 배울데 많고 운동하고 정신 체력 단련할 수단은 많아요
운동은
지속적으로 헬스 다니고 있어서 괜찮긴 해요
대학교에서 네트워킹이 중요하지만 그게 맘처럼 되는 것은 아니고
어떻게 보면 사회적으로 눈치보이지 않을 자유로운 시간을 보장받는 거라서
확실히 전공교육은 도움은 됩니다만... 이것도 사회에서 배우려고 하면... 잘 안되긴 하죠 그래도 안될건 없고
대학이랑 병특을 둘다 챙길 수 있으면 베스트인데 현역이면 그게 작년부로 막혀버려서ㅜ
군대를 합법적으로 안갈수잇다면 안가는게 최고입니다! 그중 최고의 장점은 군대간 친구가 휴가나왓을때 놀릴수잇다는 겁니다ㅎㅎ
산업기능요원이면 또 23개월이기도..
현역 -> 34개월 보충역 -> 23개월
인걸로 알아요!
보충역 It 병특은 제가 알기로는 관련 학과 2년이나, 정보처리 산업기사 취득 후 경력 1년이나, 조건이 있는 것으로 알고 있긴 한데 종종 회사 들어간 후에 병무청에서 잘 모르는지 안된다고 할 때 있어서, 미리 알아보고 준비해보는 것두 좋다 생각합니다.!
맞아요 이게 상황따라 조건이 많이 다른데, 아무튼 병특 하실거면 지금부터 뭐가 필요한지 인지하고 준비해두셔야될거같아요
마이크를 든 라이언님이 나갔습니다.
보충역은 몸에 문제있는 분들이 가는 거 아닌가요?
"신검 결과 4급 받으신 분들" 이라는 표현이 좋을 거 같네요..! 병특 아니면 일반적으로 사회복무요원(공익) 갈 분들
현역 it 병특도 석사 이상 조건이 있을거에요 ! 제가 보충역 병특 출신이라, 아는 쪽으로 이야기를 나을 것 같아서 그랬습니다 :)
저는 현역 대학생 병특 중인데 석사 이상은 없고 (전문연구요원은 있음) 대학생은 4학기 이상 수료 조건이 있었습니다 물론 고등학생이셔서 해당사항은 없으시겠지만
혹시 setState를 props로 넘겨주는것에대해서 지양하는쪽인가요? 1뎁스정도는 괜찮을거같다라는 생각이 들긴합니다만 어떻게 생각하시는지 궁금해요!
이때문에 리코일을 사용중이였는데 굳이 전역으로 관리할 필요가 있을까 싶고
그렇다고 setState를 하위 컴포넌트로 넘겨주는것이 상태추적에 있어선 혼동을 야기할 수 있을거같기도하고해서요!
제가 알기로 올해부터 현역 학사 병특은 없어진걸로 알고 있어요
상위컴포넌트가 useState를 이용해서 state를 관리한다는 걸 하위 컴포넌트가 알 필요가 없다고 생각해요
하위 컴포넌트는 어떤 일이 일어났을 때 인자를 넣어서 실행할 콜백이 필요한거고
엇 저는 하위에서 상위 컴포넌트로 데이터를 넘겨줄 때 setState 말구 `onData: (data) => void` 형태의 함수를 넘겨서 쓰고 있었는데 혹시 이렇게 쓰는 것 지양해야 한다면 알려주시면 감사합니다! 라고 쓰려 했는데 다행히 괜찮은가보네요
그래서 하위컴포넌트의 props에서 콜백 타입을 setState: Dispath<SetStateEvent<타입>> 이거 말고 (인자) => void 로만 잡아놓기만 하면
상위컴포넌트가 setState를 넘기든 콜백을 만들어서 넘기든 컴포넌트간 결합도가 낮은 상태가 유지되니 상관없다고 봐요!
useState를통해 관리하는 state가 하위컴포넌트의 state이긴한데 이럴경우 상위 컴포넌트에서 상태를 관리하지않고 하위컴포넌트쪽으로 빼는게 좋겠죠?
하위컴포넌트가 테이블인데 이게 한컴포넌트에 넣자니 덩어리가 너무커져서 분리하려니까 어쩔수없이 props로 넘겨줘야하는상황이 생겨서요
저는 내릴 수 있으면 최대한 내리는 걸 선호하는데 그건 컨벤션 따라 다를 거 같네요..! 컨테이너 프레젠터 느낌으로다가 ui 컴포넌트는 ui만 해야 된다고 생각하는 분들도 계셔서
ui로직이랑 함수로직을 분리한다는 말씀이신거죠 컨테이너 프레젠터가?
그렇게되면 상태자체를 하위에서 관리하는게 맞는거같네요
저도하고싶슴다님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
저도하고싶슴다님~~ 안녕하세요!! 반갑습니다 :)
반갑습니다 !!
어서오세요~ 이곳은 프론트엔드에 대해 얘기하고 싶은데 함께 하고 싶은 사람이 없을때 내가 궁금한것들을 물어볼 때가 없을때 함께 이야기가 하고 공유하며 성장하고자 하는 곳입니다~ 편하게 글 남겨주세요 :)
넵 잘부탁드립니다!!
input type number 일 때, 사용자가 숫자를 변경했어요. 그럴 경우 변경된 값을 바로 읽어오는 방법은 없을까요?
바닐라인가요?
oninput 이벤트를 이용해서 event.target.value요
input에 onChange 함수를 걸어서??
시도해 보겠습니다.
oninput 도 구글링해서 찾아보겠습니다. 다들 조언 감사합니다.
함수에서 value를 인자로 받아서 처리하면 될거 가타용
혹시 테오의 스프린트 참여는 어떻게 하나요 ~?
8월말이나 9월초에 열린대용 ㅎㅎ 선착순입니다
아하 치열하겠군요 ㅠㅠ 감사합니다!
공지는 이방에서 알수있나요 ?
사진
777...!
넵 공지올려주세요
... 치열하지는 않아요 ㅋㅋㅋ 편하게 지원해주세요 :)
안녕하세요 react hook form 라이브러리 사용중에 해결이 안되어서 질문드립니다. 회원가입 시 이메일 등에 중복 검사를 위해 실시간으로 서버로부터 중복 체크를 하려합니다. 요청 횟수를 줄이려고 debounce를 사용하였습니다. register 안에서 onChange로 값이 변할 경우 debounce 중복 검사 함수를 실행하는데, 자꾸 요청이 최소 3회 이상 날아가는 문제가 발생합니다. 요청을 1회만 갈수 있도록 조절할 수 있는 방법이 있을까요?
안녕하세요. 혹시 크로스 브라우징에 대한 레퍼런스 추천 부탁드려도 될까요? IE가 사라져서 이건 대응 안해도 될듯 싶은데 IE대응 내용이 많은 것 같아서요 ㅠㅠ 그리고 mdn에 나온 내용이 굉장히 많긴한데 어느 부분이 현업에서 실용적일지도 궁금합니다. 잘 부탁드립니다.
https://caniuse.com/ 요기서 사용하실거 검색해보시면 브라우저 호환성 알려주긴합니다! 저도 크로스브라우징은 문제 생길때마다 검색해가면서 해결해서...정리되어있는건 없네요 ㅠ
금융권이나 공공기관 사이트처럼 아직 IE를 지원하는 곳도 있지만 일단 공식적으로 종료되었으니 지금 주로 크로스 브라우징 이슈는 사파리 관련일 것 같아요! 하지만 역시 이건 미리 공부하거나 하긴 애매해서 테스트하다 발생하면 찾아보는 쪽이 좋아보입니당
사파리(+모바일 사파리), 삼성브라우저
모바일도 사용하시면...삼성브라우저 꼭 체크하세여! ㅋㅋㅋ
안녕하세요! 좋은 주말입니다. js 정규표현식 관련해서 질문이 있는데요. string에 split을 썼을 때 배열의 앞뒤에 빈 항목이 생기더라구요. 이를 수동으로 제거하지 않을 수 있는지, 제가 잘못사용한 것인지 질문드립니다.
예시가 있으면 좋을 것 같네요
let path2D_ = "M545.51,308.4h-291a31.84,31.84,0,0,1-31.84,31.84V459.76a31.84,31.84,0,0,1,31.84,31.84h291a31.84,31.84,0,0,1,31.84-31.84V340.24A31.84,31.84,0,0,1,545.51,308.4Z" let commands = path2D_.match(/[a-zA-Z]/g); let values = path2D_.split(/[a-zA-Z]/);
str.split(re).filter(Boolean) 이런식으로 필터링은 가능합니다
사진
간단한데 강력한 방법이네요! 감사합니다
머리빗는네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
머리빗는 네오님 반갑습니다 어서오세요 :)
벌 서는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
벌 서는 라이언님 안녕하세요! 반갑습니다
반갑습니다! 벨로그에서 테오니 글 재밌게 많이 봤었는데 오픈채팅 우연히 찾아서 들어오게 되었네요ㅎㅎ
와!!! 감사합니다 :) 어서오세요 ㅎㅎ
이곳은 원랴 블로그에 썼던 주제들에 대해서 궁금한것들이나 더 깊이 있게 얘기하려고 시작했는데 이제는 다 같이 프론트엔드에 대해 함께 얘기하고 다 같이 성장하고자 하는 공간이 되었습니다 ㅎ 뭐든 궁금한게 있으면 언제든지 뭐든지 물어보세요 친절하게 알려드릴게요 ㅎㅎ 잘 부탁드립니다 ~
안녕하세요! 저도 벨로그에서 테오의 프론트엔드 글 잘 보고있었는데 오픈 카톡방 있는 걸 알고 들어오게 되었습니다! 잘 부탁드려요 :)
감사합니다!! 편하게 글 남겨주세요 :) 잘 부탁드립니다!!
선배님들 혹시 리액트에서 전역상태를 컴포넌트의 렌더링에 맞춰서 initial 값을 주려면 어떻게 하면 좋을까요 ..?
상태관리는 zustand 쓰고있습니다
당장 생각나는건 context provider랑 useeffect 정도인데.. 다른 방법은 없을까요 ..!
다른 발법을 고민하는 이유는 뭔가요?
방법*
useEffect 에서 초기화 시켜주면 되지 않나요?
뭔가 리액트의 생명주기에 맞춰서 할수있는 방법이 있을까 해서.. 선배님들은 어떤 방법으로 하시는지 궁금해서 여쭤봤습니다 ㅎㅎ
생명주기에 맞게 값을 변경을 해야 하는 거죠? 컴포넌트 생성시와 종료에 맞춰서
네 맞습니다
useeffect는 이전값이 남아있어서 렌더링 시 잔상이 보이더라구요 ㅜㅜ
Use effect 클린업으로 값 날리면 되지 않나여?
그래서 useefftect return에도 setter를 넣어줬는데.. 혹시 다른 방법이 있을까 싶어서..
아하
네 우선은 이렇게 해뒀습니다 !
useLayoutEffect 로는 되려나욥..?
한번 해보겠습니다 ㅎㅎ 감사합니다 !
그냥 전역상태를 그대로 쓰면 안되고, 그 상태의 복사본이 필요한거죠??
동일한 상태로 쓸 수 있다면 최대한 local copy 를 만드는 건 지양하면 좋을 거 같아서요!
저는 전역 객체를 이용했고 생성시 그리고 클린업시 세팅을 했기 때문에 목적에 잘 맞게 쓰셨다고 생각해요~ 그래서 다른 방법이 필요하다고 느끼신 이유가 궁금했어요. 잘 하신 것 같은데요?
initial값을 준다는 것은 어떤 의미인가요?
useEffect 하나에서 isMounted ref 값을 true로 만들기 전까지 로딩창을 보여주는 방식으로 하면 이전값으로 보이진 않을꺼에용
깃헙에 새로생긴 뱃지 얻는방법 공유드립니다 ㅎㅎ 수집욕구 생겨서 재밌네요!! https://velog.io/@learningssik/Github-%EC%8B%A0%EC%83%81-%EB%B1%83%EC%A7%80-5%EB%B6%84%EB%A7%8C%EC%97%90-%EC%96%BB%EB%8A%94-%EB%B0%A9%EB%B2%95
사진
컴포넌트가 didmount 시 기본값을 주려고 했었습니다 !
usestate의 initial state를 생각해서 그렇게 표현했던것같아요
네~ useEffect에서 dependency를 []로 해서 한번만 실행하게해서 초기값을 셋하는 zustand 메소드를 호출하고 cleanup return 함수에 reset을 해주는 식으로 만드는 방식으로 하시면 될 것 같네요 이미 그렇게 하신 것 같구요 ㅎ
그렇군요
여러분 제가 고민이있는데요 국비 듣고 있는데 1주일 남았거든요 돌아오는주에 이수자평가라고 학원 나와서 발표하라고 하시는데 오른들 앞에서 발표할 좋은 기회라고 (근데 지금지금 좋은 강의 찾아서 살짝 국비 왜 들었지 싶기도 하고 ㅋㅋㅋ) 학원 나가지 말고 집에서 강의 들을까 하는데 혹시 국비 다녀보신 분 계시면 이수자평가때 꼭 나가야될까요..?? (안나가면 좀 눈치 보이는 상황/아닐수도있는상황 입니다)
발표는 좋은 경험이 될 수 있습니다
저는 국비를 다니진 않았지만 좋은 기회라고 생각해요..!!
지금까지 노력하셨는데 마무리를 안하면 정말 아까울 것 같습니다!
국비는 다녀보지 않았지만 설명하는 능력을 키우는 것이 좋야요
영상으로 남으면 더 좋을거같습니다 ㅎㅎ
저 국비인데 나갔었던거같네요 ! 안나가도 상관은없었던것같습니다..출석율만 달성하면뭐..
오 다들 나가는게 좋다는 편이시네요! 그럼 나가보도록하겠습니다,, ㅋㅋㅋㅋㅋ 감사해요!!
화이팅입니다…!
넹 오고 가는 시간이랑 가서도 포폴은 지금 상황에서 채울게 없어서 시간 아깝다 생각했는데 발표 경험 삼아 가보려구요~~~~물론 발표에 뽑혀야 할 수 있는거긴 하지만요 ㅋㅋㅋㅋㅋ….
정규표현식 관련해서 질문 하나만 하겠습니다 ㅠㅠ 하이픈을 가져와야 하는데 1) 문자나 컴마가 앞에 오지 않는 하이픈이며 2) 가져올 때 해당 하이픈만 replace해야해서 저것만 가져오고 싶은데 여기서 더 어떻게 해야할까요?
사진
말씀하신 문자에 숫자도 포함되는건가요??
숫자도 포함되는거면 [^] 안에 숫자도 넣어주시고 소문자도 함께 넣거나 / 뒤의 옵션에 i를 추가해주시면 될 것 같습니다
아! 문자나 컴마가 아닌 뒤의 하이픈만 말씀하신거군요^^;;
네 지금 0-랑 1-이 잡히는데 여기서 -만 잡으려는 것을 원합니다!
str.replace(/-/g, (a, index) => { if (str.charAt(index-1) == 조건) { return ??? } return '-' }
정규식 lookahead나 lookbefore이 있긴한데요 괜히 복잡해지고 구버전 브라우저는 안되는게 있어서 저렇게 함수로 쓰셔도 되구요
lookbehind네요
lookbehind는 근데 사파리버전 이슈가 있어요
오 replace에도 함수를 넣을 수 있나요..! 저도 배워갑니다!
감사합니다. 브라우저이슈가 있네요
사진
참고로 제가 테스트한곳은 https://regexr.com/입니다. 도움주셔서 감사해요!! 얼마남지않았지만 즐거운 주말보내세요!!!
그쳐... replace와 함수 결합은 응용력이 엄청나지기때문에 간단한 정규식을 응용하기 엄청 좋아집니다 잘 활용해보세요 ㅎ
선풍기 바람 쐬는 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요~:D
안녕하세요 선풍기 바람 쐬는 어피치님~~ 반갑습니다 ;)
안녕하세요! 혹시 다른사람의 레포지토리에 컨트리뷰터로 작업하고 있는데 그 레포를 배포할 수 있는 방법 있을까요? React앱 입니다. gh-page는 private이라 안되고, fork도 안되고 Vercel이나 Netlify도 레포 선택하는 칸에서 검색이 안되더라구요.. 조언을 구합니당
fork를 뜨는 것은 어떤가요?
아 안된다고 되어 있군요
배포를 해봐야 하는 상황인가요? 코드를 내려받아서 개인 private repo로 다시 올리는 방식은요?
음악듣는 어피치님이 나갔습니다.
clone하고 본인 레포로 리모트 변경해서 올리면 될 듯 하네요
휘파람 프로도님이 나갔습니다.
샵검색 : #멀티스레드 기반 자바스크립트
오오 좋은 방법이네요! 감사합니다!
디장님이 나갔습니다.
새벽부터 비가 많이 온다고 합니다.
출근길 조심하세요~!
답변을 너무 늦게 확인했습니다 ㅜㅜ 감사합니다 !
기존에 있던 자바스크립트 리액트 프로젝트를
타입스크립트로 바꾸려고 하는데
이런경우 프로젝트를 새로 생성해야하나요?
아니요~
그냥 기존에 프로젝트에서 타입스크립트만 추가하고 그대로 타입스크립트로 바꿔주면 되는건가요?
공식문서에 나와있어요
아 넵
찾아보고 질문드리겟슴다 죄송함다
만약 cra 프로젝트라면
cra 공식문서에 있을거에요
cra로 만든 리액트 프로젝트라면 https://create-react-app.dev/docs/adding-typescript/ 링크 참고하시면 좋을 거 같아요
혹시 리액트하실때 cra많이쓰시나요 아니면 본인이 커스터마이징해서쓰시나요?
wjsms
저는 vite쓰고있어요
전 별 설정없이 빠르게 개발하려고 하면 CRA로 합니다.
Vite도많이쓰던데 가벼워서그런가요?
Vite typescript많이쓰시는거같습니다...
빠르고
가벼워요
git 실수할때마다 난감했었는데 케이스별로 어떻게 해결하면 좋은지 나와있는 요런 사이트도 있네요~한글버전도 있어요 ㅎㅎhttps://ohshitgit.com/
깃 얘기 나온 김에 https://learngitbranching.js.org 요기도 추천합니다 재밌게 깃 공부할 수 있어요
삭제된 메시지입니다.
와우 델님 감사합니다
삭제된 메시지입니다.
삭제된 메시지입니다.
뉴뉴님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
yarn create react-app my-app --typescript 이렇게 만들었는데
사진
App.tsx 가 아니라 계속 js 로
만들어져요
원래 이런건가요?? 구글링했을땐 App.tsx 로 만들어져서
npx 사용해야하지않나요?
이런건 구글링보다 공식문서를 먼저보세요
https://create-react-app.dev/docs/getting-started#creating-a-typescript-app `yarn create react-app my-app —template typescript`인 것 같습니다 공식문서 짱짱
네 저렇게 해보니까 되네요 ``` herb@Herb yarn-cra-ts % ls src App.css index.css react-app-env.d.ts App.test.tsx index.tsx reportWebVitals.ts App.tsx logo.svg setupTests.ts ```
사진 3장
사진
파일이 모두 resize, upload 될때까지 로딩컴포넌트를 띄울라면 어떻게 해야 할까요? 처음에 첫번째, 두번째 이미지 처럼 코드를 작성했더니 setImgUploadLoading(true) 되자마자 setImgUploadLoading(false)가 실행돼서 로딩컴포넌트가 안나오더라고요. 그래서 세번째 이미지처럼 작성했더니 디버깅 해보니 setImgUploadLoading(true)가 세번연속 실행되고 하나의 이미지가 업로드 되면 setImgUploadLoading(false)되면서 로딩컴포넌트가 사라집니다.. 어떤방법이 있을까요?
forEach는 비동기 안먹는걸로 알아요
Promise.all 어떨까요
promise 객체로 만들어서 promiseAll 단계에서 state를 변경해주시면 어떨까요?
사진
저도 배열로 만들어서 Promise.all 이 맞는 방법같습니다!
리액트에서 스크롤로 날짜값 입력받으려하는데
혹시 관련 라이브러리 조언해주실수 있으신가여
감사합니다 한번 해 볼게요
선배님들 혹시 랜더링 하다가 css 스타일이 풀려보신적 있나요..? 무한 스크롤 구현중인데 100개 정도 되면 갑자기 스타일이 풀려버리네요 ㅠㅠㅠ🥲
사진
관련해서 검색해봤는데 for of 사용해서 해결했습니다. 감사합니다
축하드립니다! 근데 궁극적으로는 파일 업로드 순서가 중요한 게 아니라면 promise.all 이 나을 가능성이 높아보여요
for of 로 가면 하나 올리고 다 올려지면 그다음꺼 올리고 다 올려지면 그다음꺼 올리고 이렇게 동기적으로 처리되는데
Promise.all 로 하면 싹다 한번에 올리는 거라 비동기 병렬적으로 처리할 수 있어서 사용자가 훨씬 빠르다고 느낄거예요!
progress를 구현하는데 해당 state(1%, 2% ...)는 보통 서버에서 내려주나요?
음 그렇게 하면 너무 콜이 많아져서
눈속임으로 응답 올때까지 애니메이션으로 80%까지 채워주고
응답오면 그때 100%맞추는 식으로
눈속임 합니다
오오 그렇게하는군요
맞네요 for of는 직렬이라 파일크기가 크면 사용자경험에 안좋아지겠네용 감사합니다. 한번 시도해볼게요!
axios에 onUploadProgress 였나 하는 친구가 있었던 거 같은데 그것도 한번 알아보시면 좀더 퀄리티있는 눈속임이 가능할 수도 있을 거 같습니다!
오오.. 이런 옵션도 있군요
감사합니다
근데 저도 안써봐서.. 아닐수도있어요 ㅋㅋㅋㅋ
여러분 혹시 취준하실때
하루에 코테 몇 문제씩 푸셨나요?
하루에 한문제씩 꾸준히 풀려고 노력중인데 부족한 느낌이 들어서
어떤지 궁금합니다!
저는 코테날 일주일전부터 감잡으려고 열문제정도 풀어봤고 따로 준비 안했었어요
타고나셨군요..?
ㅠㅠ
코테고 뭐고 프론트엔드 기본이 안돼있어서 그거 준비할 시간이 없더라구요..
ㅋㅋㅋㅋㅋ 그 결과 코테 말아먹었습니다 안 좋은 예시였어요
한창 알고리즘 공부 많이 할때 하루에 5~6개정도 4개월가량 풀었던것 같아요
아하 하루에 5-6개
감사합니다!
백준 단계별로 풀기
로 진행했습니다
백준 입출력 너무 까다로운데
괜찮으셨어요?
백준은 원래 처음에는 베끼는게 국룰...
저는 프로그래머스로 하고 있는데
아 백준이 국제 표준 알고리즘 문제에
맞춰진 입출력이라서
백준 입출력 익숙해져야하나 고민입니당
ㅠㅠ
근데 한국 기업들이 프로그래머스에 맞춰서 진행하니깐
코테만 할거면 프로그래머스에 더 익숙해지는게 맞네요
아아 자세한 답변 감사합니다!
당시에는 뭣도 모르고 알고리즘 대회까지 가야지! 라고 생각하고 백준 풀었던거라
알고리즘 너무 어려워요 ㅠㅠ lv1도 어려워서 뭐 어떻게 시작해야할지 모르겠어요
알고리즘은 항상 풀때는 이정도면 잘푼거같은데? ㅎㅎ 하고 다른사람 코드보면 좌절하더라고요 … 잘하시는 분들 너무 많아요
코테 목적은 알겠지만… 너무 지옥입니다
ㅠㅠ
저는 아래 순서대로 공부했어요. 1) 관련 개념을 먼저 공부 (Brutal Force, DFS,BFS) => 기본적인 아이디어 공부 2) 기본 문제 풀기 => 30분정도 하다가 안되면 뒤도 안돌아보고 구글 검색, 모범 답안 2~3개 정도 공부 맞춰도 2~3개 공부 3) 여러 응용 문제 풀기 => 이땐 1시간 잡고 도전, 1시간이후에도 안되면 무조건 답보기
답을 과감히 보는 선택이 좋았던것 같아요 돌이켜보면
근데 프로그래머스 lv1 단계는
물론 백준에서 완전히 베낀 답으로 등수올리면 밴당하는데, 공부하는 수준에서는 괜찮다고 하십니다
자료구조 이런거 몰라도
문제해결능력만 있으면 풀수있다고 생각해요
차근차근 요구사항 분석해보시면서 풀어보시고 관련 개념들 공부하시면 더 도움이 될것같습니다
오.. 감사합니다. 괜히 오기부려서 나는 내가 풀거야 내가 해낼거야 하면서 안봤던게 바보같았네요 ㅜㅜㅋㅋ
답을 꼭 2개이상 3개정도까지 보세요!
저는 일단 풀고 다른사람 풀이보면서 이문제는 이렇게 접근하면 더 효율적이겠구나 하고 공부하고있어요
근데 보통.. 알고리즘 문제보고 자료구조 유형을 어떻게 알아낼 수 있을까요? 예를들어.. 뭐 철수가 사과를 10개 가져왔는데 영희가 몇개 뺏어먹었다가 다시 돌려주고 어쩌고.. blabla..
문제 이해하는게 가장 어려운 것 같아요 막상 이해하고 풀면 코드는 그리 어렵지않은데
수학 공부랑 비슷한 거 같아요 풀다 보면 유형이 거기서 거기라서 감이 잡히는
그러다가 진짜 상상도 못한 방법으로 풀어야 되는 문제들 한번씩 있어서 놀라는 것도 수학이랑 비슷한 거 같고
맞아요 나오는 개념들이 거의 정해져있어서
백준 단계별로풀기 추천드립니다
프로그래머스도 잘 나눠져있던걸로 기억하는데
그래서 수학 공부하듯이 유형별로 많이 풀어보고 익숙해지는 게 제일 좋은 방법 아닐까 싶어요!
1. 저장되어 있는 쇼핑몰 호출 2. 쇼핑몰 클릭시 -> 쇼핑몰이 취급하는 상품들을 호출(예: 신발) 3. 취급하는 상품을 클릭 시 현재 판매중인 목록들을 호출(예: 나이키 등등) 이렇게 클릭하고 현재 클릭되어있는 상태를 저장해야 할 때, 컴포넌트 단에서 클릭된 id값의 상태를 갖는게 좋을까요 전역에서 갖는게 좋을까요
저는 전역~
딴데서 쓸거면 전역 아니면 컴포넌트에 한표요~
혹시 웹뷰에서 네이버나 카카오 소셜 로그인 기능 넣어보신분 계신가요?
어 그거 적당히 백엔드한테 해달라하면 됩니다
ㅎ
소셜 로그인 인증 방식이 두가지가 있는데네이버랑 카카오는 백엔드에서도 되는걸로 알아요
궁금한게 있는데 웹뷰다 보니 앱을 실행시켜서 현재 로그인 중이면 로그인 정보 데이터를 가져와서 자동적으로 받고 싶은데,,, 네이티브 한테 요청하는거 말고는 답이 없는지,,,
헛,,,!? 그런가요? 현재 네이버 카카오 앱의 로그인 정보를 가져와야 하다보니 당연하게 네이티브 앱 개발자들한테 일단 요청 드리려고 했는데,,, 백에서도 가능한지 궁금하네여
아하 감사합니다
링크드인 인재 트렌드 보고서 - 개발은 아니지만 흥미로운 글이라 공유 해봅니다 ~ https://brunch.co.kr/@nutilde/22
바밤바님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 코지님~ 반갑습니다 :)
네 안녕하세요! 테오님 블로그 보다가 홀려서 들어왔습니다 :)
ㅎㅎ 홀린다는 말 기분이 좋네요 감사합니다
이곳은 프론트엔드에 대해서 궁금한게 있을때 물어보고 내가 아는것은 이 기회에 대답을 하면서 정말 내것으로 만들어보면서 함께 성장하고자 하는 공간입니다 편하게 글 남겨주세요 ㅎ
비쥬얼스튜디오코드
소리 끄시는 법 아시나요..
에러가 뜨면 효과음이 나타나는데 신경이 너무 쓰이네요
따로 설정한 적도 없는ㄷ ㅔㅠ
setting에 sound 검색해서 다 끄니 소리 안나네요ㅋ;;;; 죄송합니다
너무덥네요
우투더와투더우
퇴근하는 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 퇴근하는 프로도님 반갑습니다 :)
테오님 안녕하세요 :) 저는 신입 웹 프론트엔드 개발자 입니다!! velog 보다가 궁금증을 못견디고 들어왔는데.. 혹시 재직중인 회사가 어디신지 여쭤봐도 될까요?
카카오엔터프라이즈에 다니고 있습니다~
헤헤 답변 감사합니다~! 글을 읽으면서 저분이 내 시니어였으면 좋겠다~~ 라는 생각이 엄청 드네요!!
과찬이십니다~ 고맙습니다 +_+!!
(좋아)
이전에 개발자 초봉에 대해서 이 방에서도 한참 이야기가 오갔던 거 같은데 커리어리에서 관련 투표가 있어서 공유합니다! 6000만원 이상은 상위 2%인가봐요 😂 https://careerly.co.kr/polls/390?utm_campaign=user-share
초봉으로 6000만원 이상은 상위 2퍼센트 이상 아닐까요? 😂
네네 다수는 아니라고 생각햇는데 투표 결과 숫자가 보여서 더 실감되네요 ㅋㅋㅋ
2%면 생각보다 많네요..
아니면 커리어리에 좋은 회사(네카라쿠배당토) 다니는 개발자 분들이 많아서 그럴지도요... 🤔
프론트엔드가 아니라 개발자 초봉이니 만큼 AI쪽 석박사 졸업 후 초봉도 있고해서 일반적인 경우를 생각하시면 안되긴해요~
아 그럴수도 있겠네요
결과가 궁금해요가 38% 니까
그거 뺴면 3퍼센트 넘지않을까요 저기 투표에서는..?
허허 저런거 따지기 시작하면 행복할 수 없습니다....
재미로만..ㅋㅋㅋㅋ
코딩합시당
성인..
ㅋㅋㅋㅋㅋ네 재미로만 보시죠
백지화면이 나오는 구간을 불리는 용어가 있나요?
맥미니는 무조건 m1 2020 형 사는게 나을까요~?? 2018이나 2019 중고로 사서 램이나 메모리 자가업그레이드해서 쓸까도 고민되네요🤔
저는 안드 13올려봤네요 오늘
호환성 이슈 없으시면 무조건 m1이요!
저도 m1추천합니다
감사합니다!!
상태의 뎁스가 깊어지니까 데이터 다루기 힘드네요...
개발자가 생각하는 좋은 PM 나쁜 PM ㅋㅋ 공감가고 재밌네요 https://youtu.be/WVvFRh1vGv8
안녕하세요! 프론트 면접관련해서 전해들은 질문이 있는데 여기있는 분들한테 조언을 듣고 싶어서 여쭤보겠습니다! 프론트(ex 리액트)에서 추상화를 하게 된다면 어느 부분을 추상화해주면 좋을까요?
범위가 너무 넓은것 같네요
모든 추상화가 항상 좋은 건 아니지만 꼭 한다면, 잘 변하지 않는 부분에 한해서는 다 하죠
https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase 추상화 얘기가 나와서 제가 감명깊게 봤던 명강의 하나 공유합니다 :)
위의 영상과 아래 블로그가 저에게 추상화 관련 인사이트가 떠지게 된 계기입니다
모두 답변 정말 감사합니다!! 올려주신 자료와 답변 토대로 공부해보겠습니다!
'개발 트렌드'가 뭐길래.... 공부를 평생 해야하는걸까? #프론트엔드 ㅋㅋ 공감가는 이야기라서 공유해봅니다. 재미로 한번 들어보세요~ https://www.youtube.com/watch?v=2u6GwJV2LdM&t=335s
사진
안녕하세요 nextjs 에서 naver map을 사용하는 도중 typescript 에러가 발생하는데 이게 왜 발생하는지 이해가 가지 않아서 질문드립니다 @types/navermaps 패키지를 devDependencies에 설치하였고 vscode 상에서는 밑줄 또는 에러가 나타나지 않습니다. 그 후 localhost:3000으로 들어가면 naver is not defined라고 에러가 발생하네여 ㅠ
naver맵을 사용하는 컴포넌트를 따로빼서dynamic Import => ssr false로 시도해보세욥
해당 initMap 함수가 useEffect 안에서 실행중인가요?
네넵 useEffect 안입니다
자문자답이지만 <Script> 문의 strategy를 beforeInteractive로 변경하니 해결되었습니다
혹시 해당 코드 전체 다 볼수 있을까요?
앗 해결하셨다니 다행입니다
사진
이런 표 만들때 table태그 말고 시맨틱 태그 중에 사용할만한 거 없을까요>
?
list tag 들을 이용해서 테이블을 만들기도 하는데 필요에 따라 aria-* 들을 추가해요
dl쓰면 되지않을까요
이제야 부트캠프가 끝났습니다! 이력서 작성하기 시작했는데, 혹시 해주실 조언이 있으실까요?.?
이력서와 포트폴리오를 구분하여 이력서엔 필요한 내용만!
정성적인 이야기보단 정량적인 사실에 근거하여 사짜가 아님을 증명하면 될거같아용!
선배님들 내일 최종 면접이 있는데 해주실 조언이 있을까요.? 1차 면접때 너무 떨고 답도 잘 못했는데 너무 감사하게도 2차 면접을 보게됐거든요ㅠㅠㅠ
2차는 컬쳐핏인가요?
떨어서 답을 못했는데도 붙었구나 -> 아 나는 인재구나 라는 자신감을 가지세요
우인재시네요
헉 너무 좋은말씀이시네요 ㅠㅠ 감사합니다
아니요 기술도 같이 볼 것 같습니다
그 어디선가 봤는데.. 면접관이 마지막으로 할 질문있냐고 물어보면 제가 어떤 면에서 긍적적인 평가를 받았는지 질문하라고 하더라고요. 이 질문이 좋은 점은 장점에 초점을 둬서 지원자의 장점을 다시 상기시키고, 또 사람에게는 일관성을 유지하려는 성향이 있기 때문에 긍정적인 부분을 이야기 하고 난 이후엔 그 입장을 바꾸려고 하지 않는다고 하네요!! 다음에 면접 보면 꼭 물어보려고 적어놨던 내용인데 루비엉니님 꼭 한 번 써보셔요
긍정적인 면이 없다하면 마상당할거같은데ㅠ
근데 그럼 합격을 시키지 말았어야 하지 않을까요 🤔 면접관 입장에서 그렇게 답하긴 어려울 거 같아요
긍정적인 면이 없다면 불합이었겠죠
오 나중에 면접 보러 가면 한번 질문 해봐야겠어요!
https://howhttps.works/ko/ 귀엽게 설명한 HTTPS 동작 방식이네요!
오 좋은 꿀팁 감사합니다!! ㅎㅎ
가상돔을 사용해서 트리의 변경점들을 모아서 화면갱신의 렌더링 횟수도 줄이고 최적화 하는것으로 알고있는데요 ,
그 변경점을 조절하는 것은 무엇인가요?
변경시점 **
렌더 함수 호출시 가상돔에 반영 후 변경사항을 찾은 후 한번에 적용하는 과정이 절차적으로 일어나는 거일까나요 ?
으음 정확히 말하면 가상돔은 브라우저의 해석 대상은 아니에요. 가상돔에서 변경사항을 모두 배치 큐에 모아두고 한번에 계산을 하기 때문에 더 효율적이라고 표현을 하는거에요. 관련해서 변경된 부분을 어떻게 찾는지는 diffing algorithm이라고 불러요. https://ko.reactjs.org/docs/reconciliation.html#gatsby-focus-wrapper 관련한 설명보단 직접 보시는게 더 자세하고 이해하기 쉬울 것 같아 남겨드려용
아아 네 한번에 계산.. 하는 그 시점은 어떻게 조절하는가? 가 질문이랄까요..
일단 리액트 가상돔 질문 맞으신 거죠?
네네
fiber 엔진 내부에 구현되어 있는 걸로 알고 있어요
허브님이 말씀하신거에 덧붙여서 리액트 diff 알고리즘에 대해 잘 설명해논 글이네요 참고하시면 좋을것같아요
깊게는 저도 안 파봐서 모르는데, 대충 제가 아는 바로는 fiber의 렌더 작업은 재조정 작업을 비동기로 처리함으로서 렌더 과정에서 메인 스레드를 점유하지 않도록 구현되어 있고
다시 말해서 "언제 해요!" 라고 딱 떨어지게 말할 수 있을 만큼 명료하지 않고 16ms 안에 렌더가 일어나도록 지가 알아서 타이밍 잡아서 한다 정도로 이해하고 있습니당
그건 몰랐네용!
렌더가 일어나도록 -> 사용자 눈에 업데이트가 보여지도록
집가서 찾아봐야겠습니당 신기방기
저번에 여기서 관련 글 올라왔던 것 같은데 디코에서 확인해봐야겠네요 좀있다가
혹시 말씀의 의도가 프로그래머가 어떻게 조절할 수 있는 방법이 있는지를 알아보고자 하신 건가요??
오 공부해보겠습니다 감사해요
내부 구현이 어떻게 되어 있는지에 대한 질문이셨던 걸로 이해했는데 혹시 제가 잘못 이해했을까요..?
저도 동일하게 이해하였는데 혹시 X Y problem일까 돌다리 두들겨보았습니다!
선배님들 타입스크립트에서 type 과 interface 중 언제 어떤것을 사용하는게 좋을까요?
https://github.com/facebook/react/blob/ca990e9a753597768765e71c98fe650789c9ee8b/packages/scheduler/src/forks/Scheduler.js#L240 아마 이부분이 fiber 비동기 렌더링의 핵심인 거 같은데.. 저도 확실한 건 한번 파봐야 될 거 같네요!
인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능하므로 가능한한 type 보다는 interface로 선언해서 사용하는 것을 추천한다고 했던 글을 예전에 보았던 기억이.. - 참고 : 좋은 소프트웨어는 확장이 용이해야 한다는 원칙의 위키 피디아 글 - https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle
회사에서는 type을 사용합니다. 왜냐하면 interface는 중간에 property를 추가할 수 있기 때문에 개발자의 실수를 예방하기 위함입니다. 다른 회사에서는 어떨지 궁금하네요 :)
확장이 가능한 것을 장점으로 볼지 단점으로 볼지에 따라 다른 거 같네요
오늘 딱 공부한 내용이라서 정리해드리면 1순위) 복잡하게 타입이 구성된다 => type 2순위) 프로젝트 내부에서 일관성있게 따라간다. 이미 interface 를 쓰면 interface로 type 을 쓰면 type으로 3순위) 보강의 관점에서 보강이 필요하다고 생각이 되면 (특히 오픈소스 라이브러리를 가져다 쓰는 경우), interface 를 쓴다
출처는 effective typescript 입니다
type 도 인터섹션(&) 으로 확장 가능하지 않나용?!
그거랑 다릅니다
네에 맞습니다
예를 들자면
interface A { name : string; } interface A { birth: Date }
이렇게 되면
어 설명을 잘 해주시네요
선언적 확장
A 에 name 이랑 birth 를 다 넣을 수 있어요
말씀하시는건가용?
맞아요
인터페이스가 선언적확장이 가능해서 더 확장성이 높다는 말씀이시군요
이게 반드시 필요하다면(책에선 오픈소스라이브러리를 가져다쓸때 유용하다고 되어있네요) interface 를 쓰고
아닌 경우는 웬만하면 type 을 박으라고 되어있어요
오픈소스를 만드는게 아니라면 type으로 타입이 확장 불가능한 것이 더 좋다는 의미일까요?
같은 타입을 두번이상 저런식으로 선언할 이유가 있나요?
그건 상황과 관점에 따라 다를 수 있겠지만 interface 를 더 선호하는 분들은 어떤 이유에서 그런건지 듣고싶었어요 ㅎㅎ
질문이 있습니다. const result = items.map(item => [item[0], mapper.fromJson(item[1])]); result의 타입이 왜 [string, T][]가 아니고 (string, T)[][]이라고 나올까요??
저도 이부분에 있어서 내부에서 사용하는 코드라면 확장이 올바른 방향은 아니라는 이야기를 봐서 타입을 주로 사용합니다
오픈소스 라이브러리를 쓰면 보강이 필요한 게 혹시 어떤 맥락에서인가요??
여기서 items는 [string, string | null][] 입니다.
뇌피셜이지만 array destructuring이 아니라 index 접근만으로는 tuple이 아니라 array로밖에 유추를 못하지 않을까 찍어봅니다
as const 붙이면 뭐 나오나요? const result = items.map(item => [item[0], mapper.fromJson(item[1])] as const);
궁금해서 여쭤봐요!
const result: (readonly [string, T])[]
이렇게 나옵니다
보통 오픈소스는 버전업 되면서 기존 함수에 새로운 기능이 추가되는데 그때 선언적으로 타입을 확장해서 버전 별로 타입을 다르게 다룰 수 있다? 고 책에서 읽었습니당!!
오 그런 용례가 있군요 감사합니다
오호...
배열에 따로 장치를 해주지 않으면 배열로만 인식할 거예요
잘못찍은거같아서 매우 쫄리고 있습니다
델님 허브님 모두 감사합니다.
const arr = [1, 2, 3]; 이라고 했을 때 arr의 타입이 튜플이 아닌 number[] 로 잡히는데, arr이 수정 가능한 상태기 때문에 그렇다고 알고 있어요
오 그럼 혹시 readonly로 해도 튜플로 나와요 아니면 as const를 해줘야 튜플로 나와요??
집가서 알아보겠습니다!!
사실 리드온리까지 안가고 const arr: [number, number, number] = [1, 2, 3] 만 해도 튜플로 나올걸요..?
화나서 방방 뛰는 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
https://velog.io/@yesbb/virtual-dom의-성능이-더-좋은이유 관련 글이 있어 공유드립니다!
삭제된 메시지입니다.
깃허브 블로그에 disqus 댓글 기능 추가하려고 하는데 지시대로 했는데도 "We were unable to load Disqus. If you are a moderator please see our troubleshooting guide." 메세지가 뜨면서 댓글창이 안떠서 질문드려요 ㅠㅠ 1. disqus 사이트에서 url주소 다시 한 번 확인함 2. shortname에 띄어쓰기 -로 연결함, 큰따옴표를 작은따옴표로도 바꿔봄 3. disqus에서 trusted domain에 깃허브사이트도 등록함 4. 포스팅 영역에 layout, title 영역때문일수도 있다고 해서 지우고 적용해봄 위에 네가지 방법을 다 해봤는데도 계속 오류가 나는데 혹시 다른 방법 아시는 분 계실까요? ㅠㅠ
구구님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 구구님~~ 반갑습니다 :)
안녕하세요
개발 입문자여서 좋은 커뮤니티에 소속되고 싶어서 들어왔습니다
에고 해결됐어요! 어쩜 여쭤보자마자 딱 보이네요 ...ㅡ_ㅠ
사진
쿠팡의 br태그
귀하네요
네!! 어서오세요 :) 좋은(?) 커뮤니티에 오신 것을 환영합니다~ 여기는 프론트렌드에 대해 궁금한 것들을 적극적으로 물어보면서 성장하고자 하는 곳입니다~ 잘 물어봐야 빨리 성장합니다 ㅎ 잘 부탁드려요
잘부탁드립니다!!
원래 물어보려고 하면 정리를 해야하로 그러다면 보면 잘 보이는 거 같아요 :) 자문자답도 좋아요 ㅎ
github readme 작성할 때 해당 레포에 있는 커밋들의 링크를 넣고싶은데 깔끔한 방법이 있을까요?
🚀 프론트엔드 2022년 현황 - 꼭 읽어 보세요!! https://tsh.io/state-of-frontend/
사진
안녕하세요! 이펙티브 타입스크립트 공부중인데, 아래 TupleEl이 대체 왜 저런 타입이 나오는지 이해가 안되서 여쭤봅니다..ㅠㅠ 책을 봐도 전혀 이해가 안되네요
Svelte 코인..!
Tuple[0] Tuple[1] Tuple[2]
이렇게 생각해보세요
아..!! 헉 감사합니다 너무 복잡하게 생각했네요
이모티콘
언제나 좋은 정보 감사하게 읽고 있습니다! 정말 정말 여기서 배우는게 많은 것같습니다😄 혹시 하나만 여쭤봐도 될까요? 지금 비밀번호 변경시, 사용자에게 이메일로 비밀번호를 변경할 수 있게 해주는 링크를 만들려고 합니다! 하지만 문제가 보안인 것같습니다! 변경링크 url 파라미터에 저희만의 암호화방식으로 처리하려고 합니다. FE에서는 암호화된 파라미터를 BE에 변경할 비밀번호를 합쳐서 건내줄 것같습니다! 혹시 이 방법에 대해서 피드백주실 수 있으실까요?? 부탁드리겠습니다🙆🙇
피드백이 필요한 부분은 저희만의 암호화방식의 보안퀄리티인가요? 아니면 지금의 방식인가요?
죄송하지만... 지금의 방식과 보안 퀄리티 둘 다 말씀해주시면 좋을 것같습니다! 저희 팀이 아직 학생이라 많이 부족해서.. 실무자분들의 시각이 조금 필요해서 둘 다 조언이 필요할 것같습니다!
방식은 일단 많이들 쓰고 있는 방식이다 보니 큰 문제는 안될것 같아요 어차피 이메일을 알고 있어야 가능하다는 거니까
비밀번호를 생성하는 URL을 만드는 방식은 어떻게 되나요?
해당 URL이 외부에서도 흉내를 낼 수 있는 방식만 아니라면 보안상 문제는 안될 것 같구요
한번이라도 비밀번호가 변경이 되었다면 지난번 메일의 그 주소가 무효화만 되면 문제없어 보입니다.
비..가 너무 많이와요..
내일 출근할 수 있을까요 ㅋㅋㅋㅋㅋ 😭
난리났네요ㅜㅜㅜ
동영상
무조건 재택해!
내일 재택하라네요☺️
저희는 왜 아직 공지를.. ㅠ
사진
실시간 강남 상황입니다…..
지하철 침수..
와....
보만상 문제가 되는 지점이 비밀번호 변경이 가능한 URL을 외부에서 규칙을 추측하여 접근을 해서 다른 사람의 비밀번호를 변경할 수 있는 접근 경로가 만들어지는 상황인데 그렇게 되는 방법만 막으시면 문제없을거에요~ BE분이 잘 하셨을거라고 생각합니다
사장님 재택시켜주세요라고 하늘에 비는중입니다.. 다들 조심하세요ㅜㅜ
세상에나.. ㅠ
이거 지금인가요?
사진
와 ㅋㅋㅋㅋ
사진
본인 사진찍는거라네요
왘ㅋㅋㅋㅋㅋㅋㅋ..
와..
ㅋㅋㅋㅋㅋㅋ
보험도 안되고 폐차인데
낭만이기전에 무섭겠네요~
답변 정말정말 감사합니다! 😄 팀원들과 조금 더 회의를 해보고 추가로 여쭤볼게 생긴다면 다음에 말씀드리겠습니답 감사합니다!
가슴아프네요
서초쪽인가..
낼 출근 어떡하죠
재택인감..
걸어오는데 번개가 치는게 더 무섭더라고요 물에 번개칠까봐 ㅜ
동영상
동영상
이런건 아예 보험 안되나요?
자연재해는 지자체별로 다른걸로 알고있어요
헐 여긴 어디에요?
도시설계의 중요성이네요.. 이젠 배수 처리를 평균치로 하면 안될것같아요
작년인가 재작년인가에도 엄청 많이 와서 난리였잖아요 ㅠㅠ
응 1호선
침수 당해서
지금 저 신도림에
갇혔습니다
헉...
헉...
기다리면 해결될려나요
후
서초라네요 ㅠ
허억
헐. ㅠ
다행히 제가 집가는 방향은
침수 안당했네용
반지하는 지금 집 버리고 강제 이재민 됬슴다 ㅠ
이모티콘
버스타고 가시는게..
ㄷ
무사귀환하시길 바래요 다행히 지금 비는 좀 잦아드는 것 같네요
저 신도림에서 버스타고 인천까지왔어용..
전쟁입니다
웃을 일이 아니네요...
다들 고생하십니다...
어떡해요 ㅠㅠ..... 아이구
정말 재난이네요.. 반지하 가구가 얼마나 많은데.. 복구가 신속하게 이뤄지게 날씨가 좀 도와줬으면 좋겠네요..
URL 설계할 때 궁금한 점이 있습니다! 현재 진행 중인 프로젝트에서 챌린지 > 문제집 > 문제 로 계층구조가 있는데요, 챌린지 안에 문제집, 문제집 안에 문제가 있고 문제집 안에 들어있는 문제는 문제집 하나에만 고정적으로 속합니다! 이런 경우 url을 1. 챌린지s/챌린지id/문제집s/문제집id/문제s/문제id 2. 챌린지 별도 + 문제집s/문제집id/문제s/문제id 3. 챌린지, 문제집, 문제 전부 별도로 챌린지s/챌린지id, 문제집s/문제집id, 문제/문제id 등등의 방식 중에 어떤 걸 채택할지 고민입니다! url에 계층구조가 많아도 상관 없나요?? 문제에서 문제집을 참조하거나 문제집에서 챌린지를 참조하는 경우가 있어서 백엔드 측에서 상위계층 id도 함께 보내달라는 니즈가 있네요
아..^^ 전철이 왜 불안하게 신도림에서 탔는데 출발하자가 다시 멈추죠ㅠ
전 1번으로 합니다!
개봉역 침수됐습니다 ㅠ
사진
어 네네 그런데 저는 수원방면은 아니라서
괜찮긴한데
금천구청
침수됐답니다..
네 그래서 역곡에서 내렷습니다
전철이 자꾸 가다가 멈춰서 상당히 불앙합니당
전..
1호선 라인은 비 좀만 많이오면 침수네요..
동영상
부산은 왤케 평화롭죠,, 다른나라인가요ㅠ
태어나서 비 젤 많이 오는 것 같아요 ㅠ
저희 동네 1층 다 잠겨서 반지하사시는 분들 지금 다 나와계세요 ㅠㅠ
아이고 ㅠ
사진
혹시 이렇게 동적으로 추가되는 input들의 state 관리는 어떻게 해야 할까요?
헐 오반데;;
useState에 배열 하나 넣고 input 카드 추가할때마다 배열에 객체 넣는 방식으로 하고있는데... 상태 바꾸는게 너무 어려워서 이게 맞나 싶습니다
사진
사진
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㄱㅋㄱㅋㄱㅋㄱㅋㄱㅋㄱㅋㄱㅋㄱㅋㅋ
이건 좀 어이없네요 ㅋㅋㅋㅋㅋ
아니 물고기가 왜 ㅋㅋㅋㅌㅋㅋ
ㅜㅜ 상태관리 어려워욘
이왜진ㅋㅋㅋ...
ㅠㅠ
저 큰 박스에서 useState 선언해서 카드 생성할때마다 배열 상태랑 set함수 내려줘서 거기서 바꾸려고 했는데
조의영역..
사진
ㅋㅋㅋㅋㅋㅋㅋ사람들 참 빠르네요
자식 컴포넌트에서 배열 상태를 어떻게 바꿔야할지 고민되네요...
와 이거어디에요?ㅋㅋ
잘 하시고 계신 거 같은데요??
저도 배열에 넣고해야한다고 생각했어요
동적으로 바뀌는 상태면 배열안의 객체가 맞지않을까요?
저도 1번이요
세상에!
용태님
질문하나드려도되겠습니깡
넹
제가 자바스크립트나 리액트로 구현능력이부족한데 알고리즘 풀면 구현능력이많이좋아질까요?
앗 그런가요
코테는 파이썬으로풀고있는데 자바스크립트로 바꿀까고민입니다..
물론 코드를 봐야 알겠지만
기본적인 개념은 당연히 배열로 관리하긴 합니다!
근데 자식 컴포넌트는 내가 지금 바꿔야하는 객체가 몇번째 객체인지 확인할 방법을 몰라서 헤매고 있습니다
자식 컴포넌트에 props로 인덱스를 넘겨주면 되죠!
id값이나 인덱싱은 없나요?
아...?
자식컴포넌트 안에서 인덱스로 어떻게 해보려고는 많이 했는데
부모에서 내려주는걸 생각 못햇네요
두분 다 감사합니다!!! 해봐야겠네요 ㅎㅎ
사진
어디에요…?
한국...?
저는 오히려 자스로 풀다가 파이썬, 자바로 넘어갔는데 개발 구현 능력이랑은 크게 상관은 없을거같습니다
저도 아직 부족하지만 구현은 그냥 개발 많이 해보면 느는거 같아요
신림동 펠프스라고 하네요 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ
개발많이하기메모..
동영상
동영상
실시간.. 도림천입니다..
사진
저도 신림;
와 도림천 뭐죠;;
사진
세차 좌..
오
피할 수 없으면 즐기는군요..
이건 못참죠
사진
어푸어푸
학교가야되는데..
알고리즘이 도움이 되는 부분이 충분히 있죠! 도움은 되실거에요~ 그래도 알고리즘와 구현은 다른 영역이다보니 그냥 알고리즘을 한다고 구현능력이 생기지는 않을거라 연관된 부분을 알려드릴게요 일단 코테와 구현능력을 함께 키우려면 먼저 요구사항을 데이터로 생각하는 능력을 키우셔야 해요~ 코테를 하면서 구현 요구사항을 들으면서 문제를 읽고 떠오르는 데이터의 구조 형태가 선명해질때까지 많이 생각하고 그려보세요~ null 불리언 숫자 글자 배열 구조체 함수 이것 밖에 없긴한데 이 구조를 떠올리는게 참 중요합니다 두번째는 그 다음의 데이터 변화에요 프로그램은 데이터가 변화하는 과정이기때문에 반드시 이전 데이터와 다음 데이터가 생겨나요 구조를 파악핬다면 그다음은 데이타의 변화임니다 세번째는 데이타의 변화를 함수(동작)으로 표현하기에요 이전 데이타와 외부 데이터를 결합하여 새로운 데이터를 만드는 과정입니다 네번째는 여기에서 반복이나 조건등을 찾는 거에요 어지간해서 개발은 이 과정을 잘 안 벗어
항상 감사합니다 테오님
개발은 잘 안 벗군요
개발은 데이터 구조 -> 변화 -> 동작(+외부인자) -> 반복이나 조건등 규칙찾기 이러한 단계를 나눠보면서 접근을 해보면 조금더 점진적으로 생각하기 쉬우실 거에요
감사합니다! 알고리즘도 공부해보려는데 도움이 많이됩니다ㅎㅎ
비가 엄청내리네요 😨 다들 조심하세요 ㅠㅠㅠ
와 감사합니다
어 혹시,,, 그 bun 이라는 것도 많이들 쓰나요?
혹시 사용해보신 분 계실까요?
이번 사이드 프로젝트에 적용해볼려고 고민중입니다
다 되던데요 보니깐
bun
너무 아직은
시기상조에요
앗 그렇군요 ㅠㅠ 감사합니다 유투브에서 봤는데 궁금해서 여쭤봤습니다
사진
axios rest api 통신 중에 이런 에러가 발생하는데 왜 그런지 아시는 분 계신가요?
요청주소가 http 인가요?
https -> http로 요청이에요
mixed content 에러 나지 않나요?
프론트 https / 백엔드 http
https 프론트에서 http 백엔드로 요청 못하는걸로 알아요
그러면 백엔드가 https로 되어야 가능할까요?
넵
그렇게 한번 해보겠습니다! 늦은 시간 감사합니다!
해결했습니다!!, 랜더 문제가 아니라 alt에 들어가는 string 문제인거 같습니다..!(너무 길거나 or 특수문자 ..? 아직 확인중입니다..!) 혹시 alt 관련한 이슈 아시는 분들 있을까요..?
[FE]부트캠프 푸린님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
삭제된 메시지입니다.
아직은 많이 모자랍니다 지켜보고 있다가 최소 1.0은 릴리즈 되야 써먹을 수 있을거 같더라구요 다른 라이브러리와 호환 되는게 거의 없어서 생 바닐라로 짜야 되는데 아직은 그럴만한 메리트는 없어요~ 그럼에도 지켜볼만한 패러다임 전환이다 보니 이슈가 된거라고 생각합니다
라연님~~ 반갑습니다 어서오세요 :)
안녕하세요 잘부탁드립니다
안녕하세요 좋은 아침입니다~
퇴사자들이 남기고간 프로젝트를 분석할 일이 생겼는데
혹시 프로젝트의 어느 부분부터 분석을 하면 좋을까요?
전 프로젝트 의존성먼저 파악하고 그 담에 루트부터 분석해 나가니까 좀 큰부분부터 파악할 수 있더라구여
프로젝트 의존성이라고 하시면 어떤 부분을 말씀하시는지 알 수 있을까요?
package.json을 보면 어떤 라이브러리등을 쓰는지 확인이 가능하니까 우선 그쪽 부터 보시면 좋을 것 같아요
그리고 대략적인 폴더구조를 파악하시고
전반적으로 의존성을 기준으로 레이어가 어떻게 되어 있는지 파악을 하시면 좋아요.. (의존성 = 어떤 구현을 하기 위해서 다른 기능이 필요한 것)
감사합니다!
용태님이 말씀하신것처럼 저도 package.json부터 먼저 봐요
의존성을 기준으로 레이어을 파악한다를 조금 더 풀어주실 수 있나요..? 라이브러리의 종류는 어플리케이션에 크게 영향을 미치는 녀석들을 말하는 걸까요?
안녕하세요 질문이 있습니다!! typescript에서 aaaa-aa-aa 이런식으로 타입을 만들 수 있나요??! a는 string입니다 정규식으로 할 수 있긴한데 혹시나 있나해서욥
type aaaa = 'aaaa-aa-aa'
말씀하시는건 아니죠?
아 a가 모든 string이여야되나보네요
import를 기준으로 생각하시면 쉬어요. 내가 특정 파일을 import 한다면 import를 한 파일에게 의존성이 있다는 거에요
type a = `${string}${string}${string}${string}-${string}${string}-${string}${string}`
요거 해보셨나요?
그래서 가장 의존성이 높은 애들이 가장 하위의 레이어이고 다른 파일들이 import 하지 않는 것들이 상위 레이어입니다.
앗 한번 해볼게요 답변감사드려요!!
감사합니다!!!
type M = '0' | '1' type A = `${M}${M}${M}${M}-${M}${M}-${M}${M}` const c: A = 'aaaa-aa-aa' console.log(c)
string이 '' 을 포함해서 원하시는 결과는 안나오고 string을 좀 한정시키면 돌아가긴 하네요
답변 감사합니다! 작은 라이브러리 기준이라면, 여러 곳에서 import해서 사용할텐데 레이어가 따로 존재할까? 하는 물음이 들어서 여쭤봤습니다!
라이브러리 검색하고 있는데
너무 많이 검색했는지
사진
이런게 뜨네용
엇,,, 저두요
어 저도지금 그래요
사진
아 ㅋㅋ구글 문제였나..
아
구글
저만 그런거
아니였군요
개발 중지!
아~~
저도 구글 검색하는데 안떠서 식겁햇어요
구글없이못살아요
오,,, 구글신이시여,,,
구글 서버
안되네요
아
저만 그런게 아니었네요
저도 안돼요 구글 서버에러라니 ㅎㅎ
중지중지!!
어릴땐 서버 터지면 짜증났었는데
이제 서버 터지면 안타깝네요..
오 복구된거같네요!
아앗
안돼!!!
합법적으로 쉴 수 있는
기간이
ㅋㅋㅋㅋ
구글 일하지마...
구글서버가 터지다니 귀하네요..
역시 네이버가 최고죠
벌써 고쳐지다니
ㄸㄷ
useEffect에서 useState를 동기로 쓸 수 있는 방법이 있을까요..? set 함수에 콜백함수를 넘겨줘도 비동기로 작동을 하네요
로직이 반드시 그런식으로 작성이 되야하나요?
음 그건 아닌데 getData 함수를 만들어서 해당 로직만 외부로 빼놔서 useEffect에서 다른 로직 처리하려 했더니 동기처리가 안되네요
이해가 잘 되지를 않네요 await getData() -> state 변경 -> useEffect 실행 -> useState 실행 -> 동기적으로 다른것 실행 이런 순서인가요?
useEffect(() => { if (selectedCountry.id) { setLoading(true); getMarketData(selectedCountry); setLoading(false); } }, [selectedCountry?.id]);
const setLoading = (flag) => { _setLoading(() => flag); };
현재 이렇게 되어있습니다
아 loading
react query 를 쓰거나
급하다면
https://usehooks.com/useAsync/
이런걸 쓰는걸 추천드립니다
아하 감사합니다!
선배님들 안녕하세요
사진
사진
사진
이거 왜이러나용..?
first-child에만 옵션을 줬는데
버튼안에 있는 span에도 속성이 들어가네요
바로밑자식한테만 스타일을줘야될거같아요
>요거였나
div span은 div에 포함된 모든 span을 셀렉합니다
거기에 first 옵션줬으니까 첫span만 적용되지않나용?
버튼안에서도 span이 첫자식이라 적용되나봐요
사진
좌측이 30님이 하신것
우측이 나동님이 제안하신것
이라고 보시면 될거같아요
그리고 first child는 오해하기 쉬운 선택자인데 first of type도 한 번 찾아보시는 걸 추천해요~~
앗 선배님들 이해했습니다.
답변 감사합니다 !!!!
오 이건 무슨툴인가요 ?
툴은 아니고 적절한 그림을 찾다가 발견했습니다 😅 원본: https://www.google.com/amp/s/www.nextree.co.kr/p8468/amp/
감사합니다 ㅠㅠ
사진
사진
12시간쨰 해결을 못하고있습니다.. 어떻게 해결해야할까요 ㅜㅜ
재부팅해보셨나요?
모듈 삭제하고 npm install 다시해보는건 어떠할까요
재부팅, npm install 다해봤씁니다!
1. 재부팅 2. node_modules 재설치 3. wsl 로 변경 4. 리눅스 듀얼부팅 5. 맥북 구매
정도가 생각나는데..
스택트레이스 주소중에 undefined가 껴있네요
맥북 구매 ㅋㅋㅋ
사진
노트북을 안가지고왔는데 재택전환되어서.. 윈도우로하는데 미치겟내여.. wsl로도 세팅해봤는데 이렇게또 에러를만나게되씀니다..
복사
해주세요
잘 안보여요
ERROR in ./utils/api.ts Module build failed (from ./node_modules/ts-loader/index.js): Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself. at Object.resolveTypeReferenceDirective (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:42537:18) at C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\servicesHost.js:373:77 at C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\servicesHost.js:95:142 at Array.map (<anonymous>) at Object.resolveTypeReferenceDirectives (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\servicesHost.js:95:125) at actualResolveTypeReferenceDirectiveNamesWorker (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:116674:163) at resolveTypeReferenceDirectiveNamesWorker (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:116974:26) at processTypeReferenceDirectives (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118456:31) at findSourceFileWorker (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118341:21) at findSourceFile (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118196:26) at processImportedModules (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118602:25) at findSourceFileWorker (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118347:17) at findSourceFile (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118196:26) at processImportedModules (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118602:25) at findSourceFileWorker (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118347:17) at findSourceFile (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\typescript\lib\typescript.js:118196:26) @ ./index.js 2:0-29 8:27-30 ERROR in ./src/index.tsx Module build failed (from ./node_modules/ts-loader/index.js): TypeError: Cannot read properties of undefined (reading 'getSourceFile') at Object.getEmitOutput (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\instances.js:369:53) at getEmit (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\index.js:275:37) at successLoader (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\index.js:67:15) at Object.loader (C:\Users\devlee\Documents\undeifned\iscrim\html\node_modules\ts-loader\dist\index.js:22:12) @ ./index.js 1:0-35 4:0-8
(아찔
혹시 직장인이 퇴근하고 할만한 부트캠프같은 플랫폼 아시는거 있을까요 ? 음 프로젝트하고 리뷰받고 이런 플랫폼이요~
WSL error는 WSL distribution에서 code-server 설치해주시면 해결될 것 같습니다!
부트캠프는 아니지만 next step 이라는 곳에서 프로젝트하고 코드리뷰도 해주는 것 같아요
모듈에러에요
npm install -g ts-node@latest
ㄱㄱ
두개다 한번해보겠습니다!!
F-lab 도 비슷한 느낌인 것 같아요
사진
nextjs에서 환경변수 NEXT_PUBLIC_API_URL로 설정해서 api 호출하니까 앞에 localhost가 붙어서 나오는데 분리하는방법 알고계신분이 계실까요?
localhost + 실제 api 주소 가 붙어서 나옵니다…!
해결..해주셨습니다.. 폴더명을바꿧더니되내요........ 내12시간.......
혹시 환경변수 값을 따옴표로 감싸셨나요?
와.. 앞쪽에 따옴표 하나가 붙어있었네요 진짜 감사합니다 복받으세요!!!
그럼 혹시 import 할때 경로에 \b라는게 붙는데 이건 어떤 의미일까요? \b를 제거하면 경로 에러가 납니다..
사진
쓸 일이 있을지는 모르겠지만 제네릭 타입 파라미터 안에서 전체 타입을 참고해서 타입을 재귀적으로 정의해야 할 때 위처럼 바로 나타내면 타입 파라미터를 무한히 표시해줘야 하는 문제에 부딪혔습니다 아래처럼 재귀적인 부분과 제네릭한 부분을 나눠줘서 해결했습니다. (사용할 때는 `StackT`만 사용) 해결하긴 했는데 튜플로도 타입 추론 잘 되면 그냥 이거 갖다버리고 튜플 쓰려구요. 뭐 아깝기도 하고 혹시 도움되실까 싶어 공유해봅니다
디렉토리 경로에 "\b" 캐릭터가 끼어들어간 것 같은데요? utils 디렉토리에서 `mv $'\b'common common`으로 이동시키면 될 것 같습니다
와..폴더명에 띄어쓰기가 들어있어서 그랬군요.. 말씀해주시니 보이네요 ㅜㅜ정말 감사합니다!!!
선배님들! 과제 테스트를 마무리 하고 README 작성 중인데 어떤 설명에 들어가면 좋을까요?? 추가적으로 들어갔으면 좋을 설명있으면 추천 해주세요!
우테캠같은 부트캠프 프로젝트 readme 참고하면 좋아요
감사합니다!!
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요
안녕하세요 귀여운 라이언님~~~ 반갑습니다 :)
의존성배열에 me 객체 사용해보신분 있으실까요??
안녕하세요 알고리즘(?) 관련해서 질문드려요! 아래 배열에서 현재 id가 1인 경우에 parent: 1인 오브젝트도 가져오고 parent: 1의 아이디를 parent로 가지고 있는 오브젝트도 가져와야 합니다. 혹시 좋은 방법 있을까요? [ { id: 1, parent: 0, title: '제목', }, { id: 2, parent: 0, title: '제목', }, { id: 3, parent: 0, title: '제목', }, { id: 4, parent: 1, title: '제목', }, { id: 5, parent: 4, title: '제목', }, { id: 6, parent: 4, title: '제목', }, ]
혹시 try-catch를 다들 어디에 작성하시나요?? const postAPI = async () => { const res = await axios.post(); if(res === "") throw new Error; return res; } const handleClickButton = async () => { try{ const res = await postAPI(); setter(res); }catch(e){ handleError(e); } } ___ const postAPI = async (handleError) => { try{ const res = await axios.post(); if(res === "") throw new Error; return res; }catch(e){ handleError(e); return []; } const handleClickButton = () => postAPI(handleError).then(setter); — 첫번째의 경우 handler함수에 try-catch를 넣어줬는데요 이럴 경우 postAPI함수는 api 요청을 진행하고 error를 뿜어내거나 res값을 뿜어내기만해서 함수 역할이 올바르다고 생각합니다. 하지만, postAPI를 호출하는 handler마다 try-catch를 작성해야하니 생산적이지 않다고 생각이들어요 그래서 아래와 같이 수정을했는데 postAPI에서 api 요청을 진행하고 try-catch를 작업해주는건데 postAPI를 호출하는 handler함수에서 try-catch를 사용하지 않아 좋다고 생각하는데, postAPI 함수의 역할이 api 요청을 보내는것인데 handler가 아닌 post 함수에서 try-catch로 에러를 잡아주는게 맞는가? 라는 의문이 들더라구요 정답이 있는 문제일거라 생각하는데 어떻게 생각하시나요??
find와 filter 메소드 사용하면 되지 않을까요
주로 에러를 캐치해서 UI로 보여주도록 하는 컴포넌트에서 try catch 사용해요
저도 에러핸들링으로 status code 로 다른 ui로 보여주어야할때 사용합니다
리덕스를 쓴다고 가정하고 상위 컴포넌트인 a컴포넌트 하위 컴포넌트인 b컴포넌트에서 동시에 사용되는 state가 있습니다. 이럴경우 a에서 useSelector로 불러온후 b에 props로 전달하나요 아니면 b에서도 useSelector로 불러와서 사용하나요?
하위 컴포넌트를 "얘는 리덕스에서 스스로 정보를 불러와서 쓰는 애다" 라고 정의할지 "부모가 정보를 넣어줘야 하는 애다" 라고 정의할지에 따라 다를 거 같습니다!
아하 제가 어떻게 정의하느냐에 따라 다른거군요
도움주셔서 감사해여!
해당 컴포넌트의 디펜던시를 리덕스에 걸지 부모 컴포넌트에 걸지 경험적으로 결정해야 되는 거 같아요
me 객체라는게 어떤걸 말씀하시는건가요?
많이 도움되었습니다!
저는 주로 atomic 패턴이라 치면 page 랑 template 레이어까진 리덕스에 걸고 그 위로는 props로 합니다!
그 위라는건 나머지 atom molecules organism들을 얘기하시는거죠??!
노코드 툴을 배우게 되어서 당근마켓 카피 해봤습니다. 오늘 처음배우면서 3시간정도 해봤는데 생각보다 너무 좋네요. 웹 기준으로 만들었습니다. https://margit400.softr.app/
넵넵!
감사합니다!
뭔가 프론트엔드의 개발자의 미래에 대해서 생각해보게 되네요..
피스메이커 프로도님이 나갔습니다.
10년 전만 해도 직접 컴퓨터에 OS깔고 램꽂아서 서버 세팅했는데 지금은 다들 aws로 마우스 클릭으로 서버를 생성하지만
그렇다고 데봅스 개발자가 사라지진 않았잖아요? 오히려 엄청 늘어났고
프론트엔드도 백엔드도 + 소프트웨어의 많은 분야들이 그렇게 점점 고수준 개발로 올라오지 않을까 싶어요
노코드 툴 어떤거 사용하신거에요? 대박이네요
점점 기획이 중요해지는거같아요
eslint 중에 props spreading을 막는 친구가 있는데 막는 이유가 궁금합니다. 이유를 아시는 분이 있을까요?
props를 명시적으로 나타내라… 가 아닐까용
해당 옵션 리드미 들어가보면 나올거예요!
softr사용했습니다 !
사진
유지보수하기 좋을 거라고 주장하네요!
자문자답합니다! 재귀함수 사용해서 처리했습니다
신난 어피치님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
알고리즘 문제인가요 한번 풀어봤습니다. https://replit.com/@NightlyHerb/temp-parent-puzzle#index.ts 앗 한 발 늦었군요
최종면접보고 보통 합불 언제쯤 나오나요? 어제봤는데 연락 아직없어서 싱숭생숭하네요 ㅜㅜ떨어져도 연락주신다고합니다
최대 2주에서 한달까지 가니까 마음 편하게 계셔도 될거같아요~
아 그런가요 마음이급했네요 ㅜㅜ첫취업이다보니.. 감사합니다 🫠
좋은결과 있으실거에요 ㅎㅎ
저는 그래서 합불여부를 떠나서 답은 언제주시냐고 면접관님꼐 한번 묻곤합니다
따로 면접 결과 언제 준다는 말이 없었다면, 일주일 뒤까지 답 없으면 메일 보내보시면 될 거 같습니다!
물론 무지개님처럼 면접 볼때 물어보는 것도 좋은 방법이구요 :)
아 제가 무지개군요 ㅋㅋㅋㅋㅋㅋ
좋은결과 있으실겁니다!!
아 이런 질문해볼걸그랬네요!!!! 감사합니다😍
질문드립니다! redux에서 state가 실제로 어디에 저장되는지 조금 깊게 원리에 대해 이해하려면 어떤 키워드로 검색하면 좋을까요?
redux랑 react-redux 소스코드 보셔도 좋을 것 같아요
신난 어피치님 반갑습니다~
와! 이게 3시간만에 되는 군요!!
프론트엔드 개발자는 이런 서비스를 만들면 되니까 걱정말아요. ㅋ
useQuery의 isLoading이 pending 상태에서도 false로 나오는데 혹시 원인을 아시는분 계실까요? 아무리 찾아도 안나오네요...
반갑습니다 ~
어서오세요. ㅎ 이곳은 프론트엔드에 대해서 이야기하고 궁금한 것들을 물어보며 함께 대화하면서 같이 성장하고자 하는 곳입니다. 편하게 하고 싶은 질문이나 관심사 자료등을 남겨주세요 :
refetch 라면 isFetching 써야될거예요
오,, 감사합니다!!
네 열심히하겠습니다 🙂
언데드풀/ts님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
감사합니다!
뷰붕이님이 들어왔습니다.
고슴도치파님이 들어왔습니다.
공식문서 읽으면 바로 나와요~
연봉업님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
카이카스님이 들어왔습니다.
안녕하세요 잘부탁드립니다.
안녕하세요!!
줍줍님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요! 잘부탁드립니다
신입FE응애님이 들어왔습니다.
안녕하세요오
안녕하세요!
언데드풀/ts님 뷰븅이님 고슴도치파님 연봉업님 카이카스님 줍줍님 신입FE응애님까지 모두 모두 반갑습니다~ :)
초롱초롱 튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
이곳은 프론트엔드나 개발을 하다가 궁금한 것들에 대해서 물어보고 아는 것들은 적극적으로 대답을 해보면서 다같이 성장하고자 하는 공간입니다. 편하게 관심사나 궁금한 것들 글 남겨주세요~~ 잘 부탁드려요 :)
초롱초롱 튜브님도 반갑습니다 :)
이모티콘
인원이 이렇게많은데 살뜰히 다 챙기시는군요 감사해요
Fe님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Fe님 안녕하세요!ㅎ 반갑습니다. :)
안녕하세요~
안녕하세요
(굿)
단체로 오신건가요!!? 많이들 오셔서 너무 너무 고맙습니다 :)
프론트엔드나 개발이야기 혹은 개발 외에도 실무나 회사생활, 취준생활, 이직 취업등 커리어 고민까지 궁금한 것함께 이야기 나누고 싶은 것들 모두 모두 편하게 글 남겨주세요.
프론트 어른이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
함께 해보고 싶은 이벤트가 있거나 본인이 쓴 글이나 프로젝트 홍보, 멘토링, 스터디등 네트워킹이 필요한 경우가 있어서 물어봐주세요 :)
안녕하세요 프론어른이님 반갑습니다 :)
안녕하세요
화상면접을 볼떄 보통 옷을 어느정도까지 차려 입으시나요 ? (네카라쿠배 같은 회사들 기준입니다)
정장까지는 아니었던것 같구요. 단정하기만하면 괜찮은 것 같아요. 크게 옷차림을 신경쓰지는 않았던것 같네요
저는 무난하게 셔츠같은거 입었습니다.
저는 셔츠입었어영 대면면접때도 셔츠에 슬랙스 입고갔습니당
혹시 vscode에서 파일이 어디어디에 import 되었는지 확인할 수 있는 방법이 수동으로 찾는거 말고 더 있을까요?
샵검색 : #곰돌이 푸
튜브님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 튜브님 반갑습니다 :)
안녕하세요 :)
어서오세요~ 이곳은 프론트엔드, 개발, 커리어, 개발 철학, 일 등에 대해서 궁금한 것들을 물어보고 서로의 생각을 공유하면서 함꼐 성장하고자 하는 공간입니다. 편하게 글 남겨주세요. 잘 부탁드립니다. :)
답변 감사합니다!
안녕하세요 다름아니라 진로 고민이 있어서 질문 드립니다. 제가 내년 2월에 대학교 졸업을 앞두고 있습니다. 졸업 이후 방향성에 대해 고민하고 있는데요. 1. 졸업 후 성장하기 좋은 스타트업에 취직해서 빠르게 경력쌓기 2. 내년 여름쯤에 있을 우테캠, 부스트캠프 같은 좋은 코딩캠프 목표로 공부하기 이 두가지 방향 중 고민이 됩니다 ㅠ 어떤 선택지가 더 좋은 선택일까요?
전부다 지원해서
선택지를 고르시죠
둘다 좋은 것 같아요 ㅎㅎ 더 재밌어 보이고 마음이 끌리는 걸로 하는게 좋을 것 같네요
esm님이 나갔습니다.
1을 하기 위해 2를 하기도 하니까 좋은 스타트업에 함께할 수 있다면 바로 취직하시는 것두...! 양쪽 준비하는 방향이 크게 다를 것 같진 않아요
요상한 엣지케이스때문에 한 2번은 고쳤네요! 비즈니스로직에서 고려해야 한다면 한 번 확인해 보시는 것도 좋을 것 같아요 (고려할 필요 없으면 상관없구요)
답변 감사합니다. 1번을 선택하면 최대한 빨리 취업을 하고싶어서요! 물론 된다는 보장은 없지만 ㅎ..
아까 최종연락 기다리고 있다고 했는데, 지금 합격연락왔네요!!! 비전공자로 독학했는데, 태오스프린트도 하고 취업했습니다 ㅜㅜ 스프린트의 팀 협업경험과 가치중심 프로젝트에서 배운점들을 면접에서 어필했던게 좋게 작용한거같아요!!! 오픈채팅에서 주워들은 지식들도 기술면접에서 요긴하게 잘 써먹었습니다!!!!!! 테오 감사해요 🙇🏻♀️ 채팅활발하게 해주시는 모든 분들도 감사합니다 🙇🏻♀️
축하드립니다!
와 축하드려요!!!
와!!!!! 축하드려요!!! 🎉 본인이 잘한거지요! 잘하셨어요!!!
부럽습니다!!!
축하드려요!! ㅎㅎ
축하드려용 !!
축하드립니다!!!
축하드립니다
다들 축하해주셔서 감사합니다ㅠㅠ 감동..😭
ㅎㅎㅎㅎ 제가 다 기분이 좋네요
열심히 노력하신 과정이 좋은 결과를 가져오신 것 같아요 ㅎㅎㅎ!
축하드립니다~~
감사합니다!! 저도많이배워서 채팅에 답변많이 할수있으면 좋겠네요 😆
안녕하세요 계속 jquery만 하다가 요즘 대세인 react로 넘어가려고하는데 넘어가는데 보통 얼마나 소요될까요??
합격 축하드립니다!! (씨익)
너무너무 축하드려요~🥳🥳🥳
취뽀 축하드립니다~🎉
넘어간다는게 어떤 건가요? 기존 프로젝트를 React로 옮기는 건가요? 본인이 React를 배우고 활용할 수 있게 되는 기간을 말하는 건가요?
갓테오의 스프린트에 참여하면 취업에 도움이 된다. 기억해둘것입니다.
지원완료
후자 입니다!
어떻게 지원해용?
테오의 스프린트 참여 조건도 있나요?! 구글에서 찾아보는데 테오님 회고글만 보여서요!!
뒷북이지만 축하드리고싶어서 씁니다!! ㅠ 너무축하드려요 저도 공부하고있는 학생으로서 너무 부럽습니당
웹개발 처음 할때 jquery로 시작을 했어서 어느정도 자유자재로 사용한다 하고 생각하는데 react를 새로 공부한다 생각하니 또 막막해서요 ㅠㅠ
그냥 입문해서 뭔가 만들어보는데까지는 1~2달까지도 안 걸렸던거 같아요. 입문 자체는 어렵지 않을거에요. 대신 프로젝트가 큰 것을 다뤄야 하는 경우라면 짬이 많이 필요해서 하고 싶은것에 따라 다를것 같네요
익숙해지면 jQuery로 돌아가기 힘듭니다. ㅋ 그냥 취미삼아 한번 만들어보세요.
축하드립니다 !! 저도 빨리 협업해서 이직하고싶네요 ㅠㅋㅋㅋ
참여조건 없습니다. 밤 11시부터 새벽 2시까지 5일간 빠지지 않고 시간만 낼수 있으면 됩니다. ㅎ
넵 역시 한번 해보는게 제일이군요 답변감사합니다~!
요새느끼는건 그냥 작은거라도 스스로 만들어보는게 정말중요한거같습니다 그동안 인강으로 클론코딩만 했었는데 시간날린거같네요 ㅠㅠ
제가 알기론 jQurey의 장점인 querySelector가 이제 자바스크립트에서도 지원을해줘서 점점 퇴화될것같아요
네~ 요새는 입문용으로 많이 구축되어 있는게 많아서 시작은 금방할거게요~
클론코딩으로 따라치는거랑 직접 작은거라도 만드는거랑 완전다른거같습니다ㅠ
맞아요. 영어 테이프로 듣고 따라 읽는 거랑, 외국인 앞에서 1마디 하는거랑 차이죠. ㅋ
테오는 이렇게 시간을 보내고 어떻게 체력을 유지하시나요? 진짜 대단하세요… 👍
진짜 달리는거였군요
그래서.. 저도 1달에 1번만합니다... ㅋㅋ 오래는 못하겠더라구요. 대신 하고 나면 뭔가 체력은 잃는데 활력소는 충전되는 기분이라서 오히려 좋아요
11기 지원은 꼭 해봐야겠습니다..!
5일간 새벽에..
8월달 11기 또 해보고 싶네요!!
존경합니다
지원해야징
꼭 참여해보고싶네요! 👍
1인분 할 때 되면 꼭 지원하겠습니다!!
저도 부족한 실력이지만 꼭 참여하고 싶네요!!
아.. 그리고 저는 3일만 합니다..ㅋㅋ (제일 힘든 2일은 여러분들끼리...)
8월 11기 올라올때 따로 톡방에 공지가 올라오는걸까요?! 🥹🥹
저도 지금 이론만 공부하고 클론코딩 하나 끝내니 이게 코드를 봐도 제가짠거같지 않고 심하면 낯설기까지 하는데.. 어떤 작은 프로젝트부터 시작하셨나요 ? ㅠㅠ
스프린트할 때 팀빌딩 후에 스택을 정하나요?!
뭘 시작하려면 막막해서 시작이 참 어렵더군요 ㅠ
국룰 todo 입니다 !
ㅋㅋㅋㅋㅋㅋ
네 제 일정이 제 일정이 아니라서 미리 공지를 못드리는 점 양해부탁드려요 저도 허락을 받아야할 사람이 있어요. ^^;;
제가 할말 https://todomvc.com/ 여기를 참고해보세요.
감사합니다 !!
스프린트 그 시간대면 리모트로 진행되는거겠죠...?!
사진
아니면 world도 추천합니다. 기본기가 다 필요한 프로젝트이면서도 만들고 나면 누구한테 보여주고 평가받기 좋은 서비스입니다. ㅎ
원격 Repo에 PR 대기중인 branch 변경 사항들을 로컬 브랜치에 가져오는 법 혹시 아시는분 계신가요? commit history 없이요! A 라는 기능을 개발하다가 PR을 두번으로 나누어서 할려고 하는데요. PR을 받는동안 로컬의 다른 브랜치에서 앞서 하던 작업을 이어서 하려고요!
넵~
깃 체리픽
확인해보세요
cherry pick
체리픽이나 리베이스 하시면 될거같아요!
헉 맞네요. 감사합니다!
저는 간단하게 투드리스트부터해봤어요
저는 투두리스트부터해서 -> 로그인 및 회원가입 폼 작업으로해봤습니다
클론코딩한 코드를 내 사진이나 배치, 데이터들을 살짝 내가 원하는대로 바꿔서 다시 수정하는 방식으로 해보면 그 코드들이 내것이 되더라구요..!
호옥시~
재택 100%하시는 분 계시나요?
재택 개발환경 추천 좀 받으려고 합니다:)
출근 100%는 있는데요
모니터 및 데스크.. 의자..등이요..
며칠전에 이케아 가봤는데
이모티콘
클론코딩한 코드를 보지않고 똑같은걸 스스로 만들어보면 엄청 막히더라고요ㅠ 그러면서 배우는게 많은거같네요
과거에 했었습니다!
스텐딩데스크
탐나더라고요...
이케아 모션데스크 쓰는데 좋아요~
가격이 80만원이라그렇지
다들 꿀팁 감사합니다 😻😻
저는 플젝하면서 힘든게 기획과 디자인이라
저도 클론코딩이 무조건 나쁘다는 아닌것 같아요. 클론코딩을 할때 무작정 코드를 따라치냐 or 프로젝트의 구조랑 흐름을 이해하면서 따라 하냐 차이라고 생각해요.
이미 있는거 클론하되 코드는 순수하게 자기것으로 해요
혹시 클론 코딩의 의미가 정확히 무엇인가요? 1. 실제 사용 되는 서비스를 본인이 직접 구현해보는 것(코드를 보지않고) 2. 남이 작성한 코드를 따라 치는 것 저는 1번의 의미인줄 알았는데 2번으로도 많이 쓰이는 것 같아서요
이것도 좋아요!
저 모션데스크 쓰는데 아주 만족합니다
근데 이제 이사는 못갈거같아요
보통은 1번인데 강의에서 1번을 하는 것을 따라하는 2번이 많아져서 와전된것 같아요
저도 담이사때 사볼려고요 ㅋㅋㅋㅋ
모니터 : LG 40WP95C 피벗 서브모니터 : LG 27UL850 데스크 : 데스커 1800x700 컴퓨터 데스크 의자 : 시디즈 T50 air
저는 이렇게 사용하였습니다!
오 깔끔하게 정리해주셨네요
저는 클론코딩 강의 들으면서 할 때도 강의는 듣되 코드는 안보고 혼자 고민하면서 짰어요 정 안될 때 소스 참고 하구요
그렇게 안하면 그냥 타자연습밖에 안되더라구요
이제 저도 원룸에서 살다 신혼집으로 이사가게 되어
작업방 꾸미려고 합니다
혹시 약간 가물하긴 한데, map을 돌면서 조건문을 통해 jsx렌더링시, props를 주고 안주고 가능한가요? 예시로 만들어서 해보니, 주고 안주고 분기줘도, 같은 스타일링이 나와서요
와!!! 부럽부럽
저는 매인 모니터 레안텍 qa3410p 피벗 모니터 27인치로 구성해서 사용하고있어요
와 신혼집 축하드립니당!
감사합니다! 이제 주구장창 공부만 해보려고 합니다 ㅎㅎ
저는 모니터 - 메인: LG 울트라기어 27인치 - 서브: 쿠팡에서 산 대충 필립스 27인치 의자 - 베스툴 J2 (보급형 시디즈) 책상 - 베스트피스 1400*800 cafe01 모션데스크 쓰고있습니다!
화이팅입니다!! 신혼이시라면.. 한번 사진들로 이벤트 같은 홈페이지 한번 만들어 보여주심이 어떨지요? 동기부여 뽬뽬 될 거라고 생각합니다. ㅋ
오우..
좋은 생각 이시네요 ㅎㅎ
답변 감사합니다 ~>
모니터 - LG 27UP850 - DELL U2720Q 의자 - 시디즈 T50 air 책상 - 이케아 이도센 1600 * 800 모션데스크 쓰고 있습니다
근데 의자는 T50 너무 별로라 교체예정이에요 ㅠㅠ
저도 t50은 안 맞더라구요
허리가 너무 아팡..
헤드레스트랑 럼버서포트가
너무 구려요 ㅠㅠ
의자는 기왕이면 허먼밀러 스틸케이스 휴먼스케일인데
비싸서 문제에요
그쵸 ㅋㅋ ㅠㅠ
저는 의자보다는 스탠딩데스크에 돈 쓰자 파인데
의자 좋은 거 써도 자세 안 좋으면 꽝이라..
모션데스크 쓰시는 분들은 어떤 장점이 있는지 알려주실 수 있을까요?
잠올떄 서서할수있습니다
ㅋㅋㅋㅋㅋㅋ
허먼밀러는 정말 돈 값을 하나요?
ㅋㅋㅋㅋㅋ필수겠는데요
와우 축하드립니다 테오의 스프린트가 정말 좋은 신입 포폴을 완성 시켜주는듯하네여😀😀
안 써봤지만.. 안아주는 느낌이라고 지인이 말하더라구요
셀프 축하인줄알았네요 ㅋㅋㅋㅋㅋㅋㅋ
앉는 느낌이 아닌.. 폭 안기는 느낌..?
진짜 좋기는 한데 돈값을 하느냐는 사람마다 다른 것 같아요. ㅋ
ㅋㅋㅋㅋ 이름이 같네요
회사에서는 주니까 쓰고 있는데 사려니 가격이 부담되는건 맞죠. ㅋ
오.. 한번 앉아보고싶네요
저 허리가 너무 아파서 바꿨는데 많이 나아졌어요 저는 갠적으로 강추입니다
근데 안맞는 분들도 계셔서 미리 앉아보고 사시는걸 추천드려용
친구가 회사에서 쓴다길래 진짜 좋냐고 물어봤더니
편하긴 한데 똑바로 앉아야 의미가 있지..
라고 하더라구요
저는 양반다리하고 앉아서 ㅋㅋ..
혹시 발 받침대 쓰시는 분들도 계신가요?? 계속 다리를 꼬게 되어서 하나 사보려고 하는데..!
이런 게 있네용
받침대 있으면 편하긴 해요
유사배열 순환시 (map) styled props로 내려주면 안 먹는데 주로 이런 경우는 혹시 어떻게 해결 하시는지 아시는분 계실까요? 조건문 분기에만 넣어줬는데 둘다 먹네요 ㅜ
손목받침대 쓰시는분 혹시 효과 좋나요?
팜레스트요?
기계식 쓰시나요 키보드?
그럼 필수라고 생각합니다
필수급인가요?? 무접점 쓰고있습니다
그럼 저는 추천드립니다
안쓰실때 손목 아프시면
팜레스트 무조건 있어야합니다.
의자가 고정형이면 궁하이 잘맞을거같아요. 바퀴달렸으면 없는거나 마찬가지인 느낌입니다.
사시는거 추천드립니당
저도 cox 무접점 쓰는데
좀 높아서 제닉스 대나무 팜레스트 사고 광명 찾았습니다
궁합
오호 감사합니다 광명까지 찾으시다니
사무실 의자가 시디즈라 좋긴한데
저는 듀오백 에어로가
더 좋더라구요
전 그냥 ㅋㅋㅋㅋ
5만원짜리 의자써요
허리건강은 100만원짜리 의자가아니라 데드리프트로 100kg로 지킵니다..
ㄷㄷ
인정합니다
종국이형보니 허리건강엔 진짜로 운동이 중요한거같고.. 그리고 애초에 디스크질환 9할이 유전이래요
저도 허리 안 좋았는데 디스큰줄 알았더니 병원가니까 디스크 아닌데 운동하라고 해서 수영을 시작했는데 확실히 괜찮아지더라구요
전 살 찌고 허리 아프더라구요
그래서 10키로 감량했습니다
전 운동으로 주짓수 합니다! 그러다보니 매일 허리가 아파요
하지마세요
백년허리라는 책 추천드려요..!
크로스핏은 어떤가요!
어허... 하지마라뇨 (7년경력)
ㅋㅋㅋㅋㅋㅋ
제가 크로스핏 하는데
앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ전 뻣뻣해섴ㅋㅋㅋ매일 아파욬ㅋㅋ
요령을 잘 배우면
허리 안 아픕니다
근데 처음엔 무조건 아파요..
자세들이 몸에 익숙하지 않아서..
크로스핏은 근데 손목 다칠위험이 크다던데
중량 안치면 됩니다~
저도 크로스핏터로서 강추입니다,,,ㅋㅋㅋㅋ 코어 근육을 키우는게 목적이라서요
아하
ㅎㅎ 안다치기에는 수영만한게 없죠..
체력은 수영이.최고라던데
수영이 관절에도 좋고
시국이 시국인지라 ㅠ
하는 사람들 마다
다 좋다고 하던데
주위에 너무 없더라구요 ㅜㅜ
문화센터나 이런곳이 좀 있었으면 한번 해보고 싶긴해요
맞죠 코어키우는운동 뭐든좋고
몸이 건강해진다음에 의자는 보험겸 예방삼아 ㅋㅋ
혹시 여러분들 블로그에 책 읽은 til같은거 남기시나요?
저는 남기는편입니다
어떤 분들은 본인이 읽은 책 1장부터 n장까지 요약한 내용 남기시는데
안남기다가 다시 시작했어요
저는 약간 칼럼이나 제가 개발하면서 겪은 문제점만 남기는 식이라 글이 책 읽은 til에 묻힐까봐 걱정되네용
velog 쓰고 있슴당
시리즈다르게하면
크게문제될것같진않아용
저는 til은 그냥 repo하나 만들어서 이슈에다 적어 놓는데 괜찮은 것 같아요 ㅎㅎ
이제 한달에 한두번 밖에 안적긴 하지만 ㅠㅠ
velog 기존처럼 쓰시고 TIL 쓰는 공간 분리하셔도 괜찮을 것 같아요!
저도 til은 repo에 씁니다 !
아하아하
감사합니당
한빛미디어 서평단신청해서 스스로에게 고통주면서 블로그에 책 후기는 남기고 있습니다. 다만 상세한 내용이나 팁같은 경우는 내용별로 노션에 정리해서 쌓아놓고 있어요. 내용이 쌓이면 해당 주제로 글을 쓰려고합니다.
클론코딩얘기하니까 저도 궁금한게있습니다 사실 코드를작성한다는게 어떻게 보면 자신의 지식한도내에있는걸 이용해서 작성하는거잖아요 예를들어 제가 좀더 난이도를 높여서 특정기능이나 아니면 코드를 좀더 효율적으로 짜보고싶은데 이럴경우에 클론코딩강의를보면가 아니면 오픈소스를 검색해서 찾아보는식으로 지식을 늘려서 공부하는게 효율적인방법일까요?
무작정 클론코딩으로 배우는건 기억에도안남고 별 의미가없는거같더라구요
클론코딩으로 코드 자체에 익숙해지기 -> 강의에 없는 기능 혼자 추가해보면서 문서 찾아보기 -> 이걸 두어번 정도 반복한다음에 이론책 (모던 자바스크립트 다이브) 한번 훑어보기 이런식으로 사이클 돌리면서 공부하고 있어요
특성 서비스의 특정 기능을 클론해보겠다 -> 어떤 기능이 있을지 설계부터 기획까지 본인이 한다 -> 설계와 기획을 코드로 구현해낸다 이러한 클론코딩이라면 좋을것같습니다. 코드를 클론해가는 공부법은 비효율적이라고 생각해요
책이 한번볼때 보이는게 다르고 두번볼때 또 다르게 보이더라구요
저도 클론만 하는건 완전 초보가 아니시고서야 좋은 방법이 아니라고 생각해요
저도 무지성으로 클론코딩강의를 봐서 익혔는데 결과적으로 남은게없더라구요.. 기본적인것도 저스스로만들줄모르고..
이것도좋네요
ㅋㅋㅋㅋㅋ 저는 쿠팡을 클론해보겟다보다는 모달창부터 코드 안보고 어떤기능이 필요하겠지..?
이런 컴포넌트단위로 클론을 해보았어요
오.. 좋네요
모달이라고 가정햇을때 how to make modal with React 라고 하면 예제가 무지하게 많이 나오잖아요? 제가 작성한 코드랑 다른분들이 올려놓은 코드랑 어떤게 비교점이있는지도 크로스 체크도 되고요
https://www.numble.it/f30cb4c0-cc70-467e-af36-673495991e6d 예전에 해봤던건데 class 101의 디자인시스템을 클론코딩하는겁니당
기획과 설계는 되어있으니 요구사항에 맞게 디자인시스템을 구축하는게 있더라고요
그래서 회사나 협업이나 만들어야 할 목표등이 필요합니다~ 모든 개발자들이 본인이 가진 100%를 이용해서 개발하지는 않아요~ 필요하니까 원하니까 만들어야 하니까 문제를 해결하기 위해서 찾다보면 나머지가 채워지면서 성장하도록 되어 있습니다! 목표를 가지고 도전을 하면서 배워서보세요 ;)
TS 배우고 나니까 JS 로 할 때, 중간중간 오타 실수 나는거 너무 짜증나네요ㅎㅎTS 배울 때 하나한 타입 지정해주는 거 짜증난다고 생각했는데, JS 하니까 TS로 다시 개발해야겠다는 생각이 드네요ㅎㅎ인간이란 참 간사한것 같아요....ㅎㅎㅎ
TS쓰다 JS로 못돌아가죠 ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋ 그쵸
진짜 그런것 같아요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋTS 공식문서 제대로 읽어봐야겠네용ㅎㅎ강의만 들었는데ㅎㅎ
이번에 네이버 월간영입 기술 지원하신분 계신가요?
저 리액트 질문드려도되나요?
자동완성 완전 좋아요 ㅋㅋㅋㅋㅋ
단점 : 타입 파일에 오타내면 온 플젝 전체에 오타 도배됩니다
질문은 눈치보지 말고 먼저 물어보세요~ :)
넵 감사합니다!
리액트에서 화살표함수로 컴포넌트를 정의하는것과 그냥 함수로 컴포넌트를 정의하는것에 어떤차이가있나요?
검색은해보았는데 검색어를 어떻게 적어야할줄을모르겠습니다.
호이스팅 차이가 가장 크지 않을까요?
this의 차이?
this의차이와 호이스팅의 차이가있군요..
생성자 함수로 만들수 있는지 없는지도 있습니다
모든것은.. 렉시컬 스코프
컨벤션 이유중에는 가독성 때문에 function을 선호하는 분들이 있습니다
컴포넌트였군요
넵 컴포넌트요
컴포넌트는 스코프가 컴포넌트레벨로 정해지지않나요?
아하 컨벤션의 이유도있군요
혹시 flex, grid 등을 사용해 나열할 때 자리만 차지하기 위한 empty 컴포넌트를 만들어 쓰시기도 하나요?? 안티패턴 같긴 한데... 편하다고 생각해서 가끔 쓰거든요 다른 분들은 어떤지 궁금합니다.
저는 자주 씁니다~ 현대 웹 개발에서는 이제 안티패턴일 이유가 없어요
안티패턴이라고 한다면 다른 css로 다른 레이아웃을 못만들기 때문인 것인데 해당 UI가 다른 레이아웃을 가져야 할 이유가 없다면 관계없습니다
컴포넌트는 화살표함수보다 함수 선언문에의한 정의를 많이 쓰나요?
제가 지금까지 봤던 코드는 99% 이상이 화살표였습니다
함수 선언문 뭔가.. 함수가 값이라는 느낌이 덜 들어서 개인적으로 불호하게 되더라구요
뭔가 컴포넌트정의는 선언문이 좋다고한걸 드러봐쓴ㄴ데
함수형컴포넌트 작성할때
그럼 React.Fc 쓰시는건가요?
저는 default값이 되는 함수면 선언형 아니면 화살표로 작성해요
저는 되도록 React.fc를 안쓰려고 함수로 선언해서 사용하는편이긴한데.. 어떤게 더 맞는 방법인지는 모르겠어요🤔
FC 쓰면 안되는 이유가 따로 있나용?
안쓰는게 권장돼요
예전에 벨로퍼트님글에서 봤던 기억이있는데
deprecate 는 아닌데 그냥 굳이 쓰지 말자 정도 느낌?
react.fc 는 children이 암묵적으로 들어가있고
default props를 쓸수 없어서 안쓰도록 권장을 한다 이런 글이였던거같아요
함수 인자를 타이핑하는 게 아닌 함수를 타이핑하기 때문에
Modal.Title = () => {
뭐 이런 문법도 못 쓰고
FC는 Props 에 제네릭도 못 먹이기도 하네요 생각해보니
https://github.com/facebook/create-react-app/pull/8177 그리고 제일 하이라이트는 CRA typescript 템플릿에서 제거되었습니다!
앗 cra에서 제거된건 몰랐던 정보네요 감사합니다
!!!!
감사합니다
답변 감사합니다!! 자신있게 쓸 수 있겠네요 ㅋㅋ
사진
비동기처리 중인데.. 결과값이 왜자꾸 pending 이 나올까요?!
결과값 보시는 부분이 어디인가요?
츄리닝안경 네오님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
음.. 다른 컴포넌트 안에서 호출해서 setState 할때 콘솔로 찍으면 pending 이라고 나옵니다..ㅜㅜ
개발구석님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
츄리닝 안경 네오님 개발구석님~~ 반갑습니다 :)
안녕하세요 :)
그부분 코드도 보여주실수잇나요?
안녕하세요 글 너무 잘보고있었습니다ㅎㅎ 채팅방이 있는걸 이제 알았네요
getList 같은 경우에 결국 프로미스를 반환해서 받는 곳에서 await 해주셔야 할 것 같은데 관련 처리가 되어 있을까요?
사진 2장
저도 이와같이 생각하고잇습니다
감사합니다 ;) 이 곳은 프론트엔드나 개발에 대해 궁금한 것들을 물어보고 아는 것은 적극적으로 대답을 해보면서 내것으로 만들어보는 연습을 하며 함께 성장하고자 하는 곳입니다 ㅎ 궁금한 내용이든 아는 것을 자랑하든 편하게 글 남겨주세요 ㅎ 기타 회사 일 고민거리 내가 작성한 글 자랑 커리어 상담도 환영합니다
await으로 받으면 Uncaught SyntaxError: Unexpected reserved word 이런 에러가..
에러 메세지 보여주실 수 있나요??
async는 항상 프로미스를 반환하므로 받아서 사용하시는쪽에선 then이나 await로 받으셔야합니다
아 그렇군요..
lists: Promise {<fulfilled>: Array(0)} 이렇게 나와서 map을 돌리지 못하는 이슈가..
좀더 봐야겠군요ㅎㅎ
반환타입을 주시면 해결될 것 같습니다!
반환타입을 준다는게 어떤 말씀이시죠?!
에러 코드에 따라서 다른 문구를 나오게 할 수 있나요? 400이면 alert으로 프론트 오류! 500이면 서버 오류! 라는 문구를 띄우고 싶은데 잘 안되어서요 ..!
getLists 함수에 반환타입을 배열로 명확히 주시면 map 못 돌리는 에러는 해결 될 것 같아요
방금 debounce에 async 주고 getList에 await 주니 됐습니다..!
반환타입을 배열로.. 적용해보겠습니다
Promise<데이터타입[]> 이런 형식으로요
아 넵넵 적용해보겠습니다!
근데 await을 썼다면 그 외부의 함수는 모두 async로 감싸줘야 하는건가요? 해당부분 딥다이브 책도 읽고 캡틴판교님 글을 읽었는데도 헷갈리네요..
await 을 쓰는 함수만 async 함수면 됩니다!
그리고 반환을 받으면 반환 받는 함수에 async, 반환하는 promise 객체에는 await을 사용해야 하는거지요!?
await를 할거면 async를 써야합니다 await뒤는 항상 promise가 와야하구요
아니요..?
사진
async를 써서 반환이 프로미스로 되서 await을 사용하게 된 것이지 비동기 함수라도 async를 사용하지 않았다면 꼭 async await을 사용하지 않아도 값을 받을 수 있습니다
getList는 promise 함수를 리턴하는데 그것을 받으려면 감싸줘야하는것 아닌가요!?
네넵
아하..
사진
받는 쪽에서는 Promise 를 받는 거기 때문에 그 함수가 async-await 인지 그냥 Promise 를 리턴하는 건지는 상관없어요!
아아 그럼 async-await으로 감쌀 필요는 없고 프로미스 객체를 처리하는 then() (?)을 사용하면 된다는 건가요?
await는 async 함수안에서만 사용 가능하지않나여?
넵넵
then 을 쓰셔도 되고, async-await 을 쓰셔도 되고 편하신 대로 쓰시면 돼요!
전 웬만하면 then 안 쓰는 취향이긴 합니다
아 비동기를 받아서 사용하는 쪽이 항상 async함수로 감싸야할 필요는 없다는 의미로 작성하신거군요. 프로미스.then()이 가능하니깐
감사합니당!
넵넵 async 함수를 호출하는 함수는 무조건 async 여야 하냐고 네오님이 물어보신 걸로 이해했었어요
오오 이해했습니다
전 then도 await처럼 async 구문에서만 사용해야된다고 잘못알고잇엇는데 제대로 배우고가네여ㅎ 감사합니당
감사합니다 델님!! 혹시 평소에 이런 모호한 부분 공부 어떻게 하시는지 여쭤봐도 될까요?!
그런데 저 let lists 부분 린트에서 워닝안뜨나요?? 변수로 선언하고 한번 할당이후에 재할당이 없어서 const로 선언하라고 할거같은데
음.. 아무 코드 짜보고, mdn 읽고, 블로그 찾아보고 이 과정을 이해될 때까지 하는 거 같아요
아 지금 esLint 안붙이고 하고있습니다..ㅎㅎ
감사합니다!!
붙이고 해야겠네요 .. 말씀하신 사항도 보강하겠습니다
song님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
https://www.makeus.in/cmc Central MakeUs Challenge(이하 CMC)는 전국의 수익형 서비스 런칭 동아리 중 최고의 동아리로, 총 서비스 개수 50개 이상, 누적 앱 다운로드 400,000회 이상을 기록하고 있습니다. - 수익형 서비스 런칭 CMC에서는 3개월간 선별된 기획자/디자이너/개발자 간에 팀을 이뤄 서비스를 런칭합니다. 창업 기획 등은 최소화 하여 '나만의 수익형 앱'을 만드는데 집중합니다.다운로드 실적이 우수한 팀은 후원사로 부터 프로젝트 지속 성장 지원을 받아 수익을 대폭 늘립니다. - 다양한 해커톤/공모전 수상 마음 맞는 팀원들과 유닛으로 팀을 이뤄 다양한 대외활동을 진행합니다. 수상률이 매우 높아요! - 실력 있는 개발자 & 디자이너친목 도모 저희는 버스 탑승이 없습니다. 버스 기사들만 모인 그곳! 프리미엄을 지향하기에, '선별'된 사람들만 모이는 장점을 활용해 다양한 네트워킹 행사(해커톤 개최, MT, 홈커밍데이, 데모데이 등)를 기획하고 있습니다.
제가 참여하고 있는 동아리인데 열정 있는 기획자, 디자이너, 클라이언트 개발자, 백엔드와 함께 모여서 개발하는 기회가 괭장히 귀하고 드물어서 공유해드립니당~!
web은 RN으로 개발하게 되는데 사이드 프로젝트 하고 싶은 대학생, 취준생, 직장인 추천드려용~
스터디 기간도 있을까요? rn에 대해 무지한데..
제가 참여했을땐 초기에 기획자와 디자이너가 와이어프레임이랑 gui 제작 하는 2주동안
모여서 함께 스터디 했었습니다
그리고 초기에 동아리에서 진행하는 헤커톤이 있는데 그때 간단한 앱 만들었던 거 같아요
song님 안녕하세요! 반갑습니다 :)
와!! 멋진 행사네요!!
헛헛.. 부족하지만 감사합니다~!
손흔드는 라이언님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
RN이 리엑트와 코드는 같은데 virtual dom에서 DOM에 그려지냐, native에 그려지냐의 차이가 맞나요?
손흔드는 라이언님~ 안녕하세요 반갑습니다 :)
RN도 꼭 한번은 경험해보라는 조언을 들은적이 있었는데 좋은 기회같네요 ㅎㅎ..
네 Native이기 때문에 CSS를 쓸수가 없다는 점과 함께 몇가지 미묘하게 다른 점이 있긴합니다~
Rn해본적이 없는데 Rn에서 리액트 스타일컴포넌트도 못쓰나요?
쓸 수 있어요 😀
css문법과 html문법이 미묘하게 다르지만 react에 익숙하신 분들은 빠르게 적응하셨습니다
감사합니당
안녕하세요 :) 이제 막 공부에 입문해보려고 합니다. 프론트엔드 개발을 목표로 하고 있습니다. html, css, js, react 네 가지를 공부하면 된다고 하는데 병렬적으로 공부가 가능한지 궁금합니다 ㅎㅎ
한번에 한개씩은 공부하기가 참 까다로운 구조라
오히려 직렬적으로 공부가 불가능하다고 보시면 될거같습니다 :)
유튜브에 있는 간단한 클론코딩같은걸 한번 따라해보시면 좋지 않을까 싶네용 ㅎㅎ
네 어차피 다 유기적으로 연결되어 있고 이걸 하려면 저게 필요해서 ㅋㅋ
맞아요 ㅋㅋ
html만 공부를 하고 있는데 문법만 계속 공부를 하기에는 지쳐서, 혹시 html 문법 숙지가 모두 되지 않은 상태에서 css, js, react를 병행하기에 문제가 없을까요?
오히려 html 태그만 달달 외우면 너무 재미가 없을거에요~!
선배님들 답변 정말 감사합니다 !
그리고 실제로 저희가 쓰는 인스타그램, 카카오톡이랑 동떨어져서 이게 뭔가 싶어서 와닿지도 않구용
혹시 테오님께서 운영하시는 온라인 강좌가 있나요!?
그래서 간단하게 저희가 자주쓰는 서비스를 따라 만들어보는걸 클론코딩이라고 하는데 그런거 한번 보시면 되게 좋을거에용
감사합니다!!
맞아요 그리고 모든 것을 다 활용하는게 아니라서 나중에는 필요한것만 골라배우셔야 해요 하나를 완파하고 다음 것! 이런건 없어요
하하!! 아니요 ㅠㅠ
혹시 도움이 되었던 온라인 강의 추천 부탁드려도 괜찮을까요?
시간상 학원을 다닐 여건은 되지 않고 독학으로는 한계가 있는 것 같아 온라인 강의의 도움을 받아보려고 합니다 ㅠㅠ
전 입문을 생활코딩으로햇는데
방개으쓱님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
노마드 무료강의 추천드려요
안녕하세요 잘 부탁드립니다 ㅎㅎ
추천해주신 분들 감사합니다!
드림코딩 앨리가
친절하고 재밌게 잘 알려줍니당
드림코딩채널 이미 구독 중인데 너무 좋습니다!
앨리선생님도 진짜 👍👍
다만 아직 용어가 너무 익숙치 않습니다 ㅠㅠ
어려워요ㅋㅋ
유데미, 인프런, 노마드코더, 생활코딩 등 무료 혹은 값싼 강의 많으니 찾아보시면 됩니다!
감사합니다! 모두 즐겨찾기 해놓고 좋은 강의 찾아보겠습니다
방개으쓱님!! 환영합니다 :) 이곳은 프론트엔드에 대해 궁금한것들에 대해 물어보고 아는 것은 답해주면서 함께 성장하고자 하는 곳입니다 개발 외에도 고민이나 실무 멘토링 홍보 자랑 들 편하게 함께 하고 싶은 말 남겨주세요 ㅎ
늦은 시각에 정말 감사합니다!
피그마를 쓸지도 모르게 되었는데 리액트를 쓰는데 어떤 도움이 될까요?
피그마는 ui 보여주는 툴 아닌가요?
저는 디자이너가 만들어 준거 열람하는 용도로밖에 안쓰는데 개인적으로 특별히 사용해서 무슨 스킬이 생기는건 없는것 같아요
개발구석님이 나갔습니다.
피그마에서 css뽑아줘요
도원석님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 이제 막 React 공부한지 한달된 신입입니다 잘 부탁드립니다
안녕하세요 리액트 api 요청 함수들을
동기 처리를 어떻게 할 수 있을까요? ㅠㅠㅠ
Promise객체로
.then하면 되지않을까영
게시판 관련 질문이 있습니다 ! 전체 게시물을 볼 수 있는 페이지에 게시물 마다 좋아요 기능을 붙혀 보려고 하는데요, 이 때 보통 좋아요를 누르면 리스트를 재조회를 시키나요 ?? 재조회를 하지 않는다면 화면에서만 좋아요 숫자를 업데이트 해주나요 ?
저도 관련해서 질문드립니다! 백엔드에 좋아요 기능이 구현이 되어 있으면 좋아요를 눌렀을 때 백엔드에 관련 요청을 보내고 백엔드에서 좋아요 정보가 업데이트되면 프론트엔드에서 좋아요 정보를 백엔드에서 다시 받아와서 UI를 업데이트해야 할 것 같은데 혹시 이 기본 흐름에 문제가 있지는 않은지요?
articleLlist를 다시 받아오지 않고 그냥 해당 article만
refetch하면 되지않을까요
말씀 해주신 흐름대로 처리 해두긴 했습니다 그런데 반응이 좀 느린것 같아서 질문을 드렸습니다.
말씀해주신대로 해보겠습니다 감사합니다
사진
이제 정말 안녕 IE...
공공기관들은 어떻게 됐을지 궁금하네요..
바이바이..
환영합니다!! 도원석님~~ 어서오세요 이곳은 프론트엔드에 대해서 궁금한게 있는데 물어볼때가 없을때 편하게 질문하고 그 질문을 통해서 대답 할 수 있는 사람들은 대답을 해주면서 다같이 생각할 수 있게 하고 함께 성장하고자 하는 공간입니다. 하고 싶은 질문 함께 고민하고 싶은 이야기. 실무에서 궁금한 얘기들 다 편하게 적극적으로 글 남겨주세요 :) 잘 부탁드립니다.
안녕하세요! 궁금한점이 있습니다! 합격 통보를 받고 보통 오퍼레터를 받기까지 며칠정도가 걸리나요?? 혹시 합격을 받고도 오퍼레터를 안받는 경우도 있을까요??
몇주 걸린적도 있었어요
회사마다 다를 거라서 딱 잘라 말씀드리기는 어렵습니다만 저는 1주일 안으로 왔던 것 같아요
합격 후 통보는 정말 회사마다 다른데 저도 1주일정도 걸렸어요
빠른곳은 3일안에도 왔어요!
저두 보통 면접 다음주면 연락이 왔었던 것 같아요
아아그렇균요 감사합니다! 8일이 지나도 연락이 안와서요 ㅠㅠ 한번 연락 해보는것도 괜찮을까요?
아니면 일단은 2주정도는 기다릴까요?
마음을 비우고 다른걸 하고 계시는게 좋을거같아요~
8일정도면 연락해볼만한거같은데요?
근데 혹시 결과 언제나오냐 보다는
근처에 몇달간 밀려있던 사람이 있어서 저라면 연락해볼 거 같네용
저라면 혹시 결과를 알려주셨는데 제쪽에서 메일이 누락되었을까 걱정되어서 연락드린다 이런 식으로 돌려말할거같아요
흠 감사합니다! 한번 메일 보내봐야겠네요
프엔이랑 상관없는 얘기이긴한데.. 보통 래퍼런스 체크는 어떻게 하는건가요?? 합격한 회사의 담당자분이 제가 다녔던 회사에 전화나 메일을 해서 다짜고짜 물어보는건가요?
그건 불법인걸로알아요
비동의 레퍼체크
그럼 어떻게 제 행실?을 체크할수가 있죠??
동의를 구하고 진행하신걸로 알고있습니다!
지원자분 동의 구하고 나서 해야 되고, 저도 동의까진 받아봤는데 그 회사가 동의 받아놓고 레퍼체크는 안해서 잘 모르겠네요..!
그럼 담당자가 지원자한테 동의를 구하고.. 제가 다녔던 회사에다가 어땠는지 물어보는 형식이군요
귀찮을법한데 친절하네여
동의 안구하면 불법인지라
감사합니다!
합격자분께 사전에 동의 구하고 직장의 동일 직무이신 3분 정도 연락처를 받아서 레퍼 체크하는 경우도 있었어요
헐 ㄷ
저도 3분 레퍼체크 받았어요
동일직무가
같은팀밖에 없어요 ㅠ
엄지척척님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 질문이 있어 들어왔습니다 반갑습니다!
안녕하세요 엄지척척님 반갑습니다 :)
혹시 깃허브 액션 쓰시는 분 계신가요? 배포할 때 보통 몇분정도 걸리시는지 궁금합니다. 저희는 5분 정도 걸리는데 답답한 것 같아요 ㅠㅠ
그
전 회사에서 썼었는데 10분 걸렸었어요 ㅜㅜ
태스크 마다 다른거 같아요
그 혹시 한 명의 사용자가 웹의 어느 기능을 사용할 때 다른 사용자들이 동시에 그 기능을 사용할 경우 db에 데이터가 저장이 이상하게 될 수도 있는데 이거는 어떻게 막나요??
저희는 3~4분?
테스트 다 돌리고해도
근데 지금 회사는 다른 거 쓰는데 똑같이 10분 걸리더라구요
저는 ecs 자동배포 10분걸려요 Cra는 이거보단 빠르지만
아 저는 백엔드 쪽이긴 한데
동시 사용인데 괜히 동시사용했다가 데이터가 뒤죽박죽일 가능성이 있어서
세션으로 제어하고자하는데 이게 생각보다 어렵네요..
한 사용자가 그 기능을 끝날때까지 이미 그 jsp에 접속한 다른 사용자는 기다리는게 맞는건가요??
아하 5분이 엄청 느린 편은 아니었군요 감사합니다
유저입장에서 상당히 불쾌한 경험이지않을까요?
보통 어떻게하나요?? 웹이 처음이라 모르게습니다ㅠㅜㅜ
왜 그렇게 되는건가요? DB의 데이터를 읽어서 다시 덮어쓰는 구조라서 그런가요?
보통은 트랜잭션을 이용해서 말씀하신대로 동시동작을 제어하거나
아하
조금더 고급스럽게 푼다면 데이터가 아니라 사용자의 행동을 중심으로 로그식으로 쌓은 다음 필요한 데이트를 역산해서 계산하는 방식 (ex git) 을 사용하곤합니다
보통 실시간 협업도구들을 보면 구글 시트의 경우에는 동시에 편집이 안되도록 lock을 걸어서 사용하고 있고
오오
제가 우려하는게 한 페이지에서 예를 들어 무슨 검사를 하는 동작이 있는데 그거를 한참 수행하면서 db에 저장하고있는데 다른 사용자가 그 버튼을 눌러버리면 검사하는 동작을 다시 수행하는 일이니
hackmd등을 보면 사용자 액션을 받아서 시간순으로 다시 재해석한다음 최종 결과를 모아서 보여주는 식으로 되어 있습니다
그래서 데이터 위험에 우려가 있엇어요
그런 경우에는 내부에 큐를 받아서 대기열을 만들고
스케쥴러를 통해서 하나씩 처리할 수 있도록 한 다음에
인코딩같은 경우에도 데이터가 많을 경우 시간이 오래걸리는데 한 사용자가 인코딩하는 동작의 버튼을 누르고 다 될때까지 기다리고있는데 다른 사용자가 인코딩 되는 시간에 인코딩 버튼을 눌러버리면 안될거같아서요ㅠㅠ
처리하는 방식으로 만드시는게 좋을 것 같아요
일종의 예약순번제 같은거라고 생각하시면 좋겠네요
그러면 시간이 되게 오래걸리지 않을까요??
그래서 저도 쓰레드를 생각은 했는데 어찌되었든 하나의 작업을 처리하고 그다음꺼를 처리하게되어
시간이 되게 오래걸릴거같아서요1/
사용자에게는 대기열이나 대기시간을 제공하면
아하
네네
충분히 납득 가능할거에요
그 시간이
되게 길면요?!?!?
어차피 여러명이서 요청을 해서 다 들어주기 위해서라면 걸리는 시간은 같아요
아 그래요???
시간이 되게 길 경우에는
네네
원래도 길어요
시간이
검사하는 시간!
이메일등을 통해서 완료를 전달한다고 해주면
굳이 사용자는 기다리지 않아도 되니까
아하
유투브 업로드 같은 거 생각해보시면 좋을 것 같네요
더 깊은 이해를 위해 유튭업로드 알고리즘을 찾으면 될까요??
테오님께서 이해 쉽게 알려주셨느데
아뇨아뇨... 그런건 찾아봐야 ..
더 이해가 필요해서요ㅠㅠ
사용자에게서는 필요한 데이터만 업로드 할 수 있도록 하고
대기열에 쌓아 두도록 합니다
아하
검색해봐야겠네요! 사실 검색 키워드의 갈피도 못잡고있어서 헤맸거든요ㅠㅠ
방법은 여러가지가 있지만 결국은 시간이 오래 걸리는걸 어떻게 고객의 이해를 구하느냐 같아요
긴 작업이 필요한 동작이 끝나면 자동으로 남아있는 대기열을 확인하고 다음 동작이 있으면 처리를 하는거죠
대기열은 보통 표시를 프로그레스바로 하시나요?
작업시간이 오래걸릴때 배치로 처리하고 완료시 메일이나 문자발송 할때도 있고
시간이 어느 정도 걸리나요?
시간이 한번 검사할 때 천차만별이기는 하지만 아마 길면 2분이상이지 않을까싶어요
최소는 40초 이상
생각만큼은 길지 않네요~ 충분히 기다릴거에요
근데
만약 5분 이상이라면요??
아마 그때까지도 넘을 수도 있어서!
사용자가 반드시 웹 앞에 있어야 하나요? 지켜봐야 하는 작업인가요?
반드시는 아니지만
검사하는 동안 웹의 다른 메뉴는 사용못하게 하려합니다
그래서 최대한 빠른 처리를 생각 중이었어요
제 경험상 고객님들은 시간 안내만 있다면 불평이 많지는 않으셨네요
아 그리고 또 여쭤보고싶은게
네~ 그게 그만큼 필요한 작업이라고 하면
근데 웹을 멈춰야 하나 싶네요
검사를 하는 동안 네비게이션 바나 이런 곳의 메뉴 버튼을 아예 비활성화시키고싶은데
아하
그러면 그냥 새창으로 들어오면 어떻게 처리하려고
그러네요..
어떡하죠ㅠㅠ
클라이언트 로직으로 돌리는거에요? 아니면 서버로직으로 돌리는거에요?
아까 DB을 언급하셔서 당연히 백엔드 로직일거라고 생각했는데
맞아요
백엔드입니당
혹시 여러분들 폰트 뭐 쓰시나요!?
d2coding 씁니다 !
오오...역시...
이번에 폰트 d2쓸지
다른거 괜찮은것도 있는지 찾아보려고 해서...ㅎㅎ
800명 축하드립니다😀
오 800명 돌파 축하드립니다
이모티콘
크으 축하드립니다~
(축하)
이모티콘
fira code, PressStart2P, Jetbrains Mono 세개 그날 기분따라 돌려씁니다!
오오 좋군뇨
어느새 800명이 되었군요 ㅋㅋㅋ
축하합니다~~~
오 제가 800번째 손님인가요~~?
이모티콘
근데 무슨 동작이길래 서버에서 해야하고 느린 거에요?? 동영상 인코딩인가요? 유튜브에 영상 업로드해본 적 있는데 - 업로드하는 과정에서 모달이 떠서 할 수 있는 유일한 행동은 취소 or 기다리기 - 업로드도 몇 분 걸리지만 퍼센티지 + 예상시간 보여줘서 기다릴 수 있었구 - 인코딩한다고 1-2분 정도 기다리긴 하는데 인코딩중이라고 뜨면 그 정도 걸리겠거니 합니다. - 한 번은 무슨 이유에서인지 인코딩 화면에서 멈춘 적이 있었는데 이상이 있다고 알려주지도 않고 해서 기다리다 재시도했었는데 그 때가 사용 경험이 가장 안 좋았던 것 같아요.
아헐 저는 너무 치명적으로 유저에게 기다리게할거같아서
그것도 우려를 했던거였으요
사진 3장
fira code / PressStart2P / Jetbrains Mono 순서인가 보네요
넵넵 맞아요
안녕하세요 nextjs에서 글로벌스코퍼에 객체를 만들어야하는상황인데요
<!— jQuery —> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> <!— iamport.payment.js —> <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js"> 이걸 _document.tsx head 에 삽입했는데도 window에 IMP(아임포트) 객체가 안생기는데 이렇게하는거아닐까요?
아 물론 제이쿼리도 window에 생성되어야합니다.. iamport에 의존성있어요
넥스트 Script 써서 onLoad에서 확인해보셨나요??
저는 state하나 두고 Script써서 onLoad에서 해당 state를 true로 업데이트 시켜주고 effect에서 해당 스테이트가 true일 때 윈도객체에 외부 객체가 존재하는지 확인해봤었어요
요것도 해보긴했는데 이건 useState써서 스테이트에 넣는거죠?
넵
불편하네요 저런 구식 라이브러리 호환하는거
오히려 csr에서는 index.html에 그냥 넣으면 되던데
_document.tsx 말고 app.tsx 에 넣어보셨나요?
_app.tsx
옷? 거기에도넣을수있나요?
궁금한게 있습니다. 리액트보다 스벨트보다 뛰어난 점은 많이 찾아볼 수 있어 알겠는데 스벨트보다 리액트가 뛰어난 점은 레퍼런스 말곤 없는걸까요..?
뛰어난점이라는게 오직성능관점이라면 리액트가 못이기고요
레퍼런스가 어마무시하져
스프링도그래요
GO서버가 훨씬빨라요 ㅋㅋㅋ
생산성 유지보수성 확장성 관련한 자료는 많이 찾아보실수 있으실겁니다
스벨트 나온지 생각보다 한참댔는데 대세가안되는건 다 이유가있을겁니다
아직도 제이쿼리 많이 쓰는거 보면여 뭐 ..
카이카스님 혹시 크러스트에 다니시나요?
레퍼런스라는게 무시할게 못되죠
스벨트 프로젝트커지면 빌드가 그렇게느리다는데 실제로 그런가여
클레이튼지갑이 떠올라서 ㅋㅋㅋ
레퍼런스도 있고
단방향 데이터 흐름 때문에 디버깅 쉬운거 무시 못한다고 봐요
ㅋㅋㅋ아닙니다 전 크러스트안다닙니다 ㅋㅋ
최근에 카이카스 쓸일이 자주있어서 닉넴이 카이카스에요
앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그렇군요
혹시나 싶었습니닼ㅋㅋㅋㅋㅋ
그리고 블록체인관련 개발을하고있어서그래요
스벨트는 양방향인가요?
(취미로)
React라기 보다 JSX의 장점이긴 한데 문법이 단순합니다. JS에서 조금의 문법만 추가를 하면서 JS나 TS 생태계를 그대로 사용할 수 있다는 것이 사실 가장 큰 장점이었어요. 그래서 angular나 vue나 svelte는 자체적인 문법을 가지고 있었기 때문에 다른데서 응용을 하거나 사용을 하려고 하면 맞춰야 할 것들이 많은 반면에 React의 경우에는 크게 공수가 들지 않았기 때문에 레퍼런스와 3rd 파티 생태계들이 커질 수 있었어요. 그러다보니 자연스레 새로운 메타 프레임워크(Next, Remix 등..)이 React를 중점으로 발달을 했구요
호출하는 컴포넌트 상위에서 아임포트 호출되는 컴포넌트를 dynamic으로 감싸서 해보셨나여?
그리고 한번 1등을 먹고나면 벤드웨건 효과가 있어서 배우는 사람들이 전부 React를 배우다보니 개발자를 뽑기가 힘들다는 것이 큰 단점이라 다같이 협업을 하려고 하면 다 알고 있는 것으로 하는것을 하는게 좋다보니 React로 뭉친 것도 있습니다. 당장 여기만 하더라도 Svelte를 써보거나 제대로 해본 사람이 몇명이나 있을까요
많은 답변들 감사드립니다. 현재 기술스펙을 정하는 중인데 구글링으로 한계가 있어 답답해서 문의드렸습니다 ㅠㅠ 너무너무 감사드립니다
양방향도 지원을 한다 입니다. 이것은 약간 말장난인게 React도 양방향을 props와 onClick으로 하는데 React가 지원하지 않은 편의기능을 단방향으로 표현한거라고 밖에 생각이 안드네요. 물론 ng-model, v-model, bind 등을 활용하면 모르는 사람은 왜 문제인지 헷갈리게 만드는 경우가 있긴한데 양방향의 문제는 아니라고 생각합니다.
사실 newwork탭을보면 가져오는건 문제가없는데 .. 왠지 글로별 변수생성부분이 문제가있는거같아요
저는 JetBrains Mono 사용합니다. fira처럼 문자 합쳐서 변환해주는 기능도 지원하고 글꼴이 예쁜것 같아요
잠시 다른 일이 있어서 답을 하다가 말았는데요 사용자가 하는 업로드랑 서버에서 하는 동작을 분리시켜 주는 편이 좋을 것 같아요. 화면에서는 진행중입니다라는 표시만 보여주고 몇분 걸릴거라는 표기를 하는 식으로 비동기적으로 표현하는 것이 좋을 것 같아요. 사용자가 무조건 기다리게 만드는 작업을 하는 경우에는 사용자 경험이 좋지 않을 것 같아요.
sass를 사용하면 많이 느립니다. sass가 아니라면 그렇게 느리다까지는 아닌것 같아요. react와 비교하면 webpack보다는 충분히 빠른지만 esbuild나 swc등을 사용하는 모던 빌드 도구가 이제 react빌드가 빨라져서 한번 컨버팅을 해야하는 svelte가 불리하기는 하지만 느리다가 체감되는 정도는 아니에요
리액트 진영에서는 양방향을 지원하는 걸 편의기능이라고 보지 않는 거 같아요, 프로그래머를 트롤러라고 굳게 믿고 굳이굳이 변태적으로 setState를 쓰도록 의도적으로 강제한 거 같긴 합니다 저도 그 부분이 강점이라고 보는 쪽이구요 물론 요 부분에 대해서 "바인딩하면 한 줄에 끝날 걸 왜 굳이굳이 막아놔서 10줄에 걸쳐서 짜지?" 라는 의견에도 공감하고 충분히 근거가 있다고 생각합니다!
양방향은 저도 의문이있는게
초기프레임워크들이 다 양방향을 선택햇는데 전부 안쓰더라고요
앵귤러도 처음엔 양방향을 강조하더니 어느순간 쓲 버렷죠
그리고 프레임웍을 저도 개발을해봤는데 양방향을하면 오히려 state흐름이 불분명해집니다
loop이 어디선가는 무조건발생해요
양방향을 하면 추적이 어렵긴 하지요. 에러로그가 찍혔을때 프레임워크 내부에서 에러가 나거나 왜 값이 변했는지를 모르니까요. 그치만 간단한 폼을 만들때 react도 결국 사람들이 formik같은 것을 쓰는 것을 보면 단순할때에는 있으면 좋다라고 생각은 합니다.
그럼 뷰 보다 리액트가 더 좋은..건가요..?? 물론 개인차가 있을 수 있지만요
개인차라기보다는 관점의 차이인데요
닭이 먼저인지 달걀이 먼저인지는 모르겠으나 취업하기에는 React가 가장 좋다 보니 가장 많이 공부를 하고 있는 언어가 React이고 그러다보니 Vue나 Angaulr를 쓰는 회사들로 취업을 안하려고 하고 그러다보니 원래 쓰고 있던 것들도 React로 전환을 시도하는 회사가 많아지고 있고 그러다보니 자연스레 대규모 협업이 필요한 회사에서는 React를 할 수 밖에 없게 되어가고 있다입니다. 그런 면에서는 React가 좋은 거겠죠. 일단 사람이 많으니까요. Java처럼요
아직도 네이버 카카오 레거시는 Vue로 되어 있는 것들이 많고 삼성SDS에서는 angaulr를 쓰고 있으며 주위 많은 레거시들은 React Component + Redux도 있고 잔재들은 많이 남아있습니다.
그런데 다들 그런데는 취업을 안하고 싶어하니까요 ㅠ 그리고 국내에서 최근 국비 부트캠프등을 비롯해서 기본적으로 React를 그냥 정석으로 배우고 있는 환경이 크다보니 다른 것들을 배우기도 쉽지 않고 쓰기도 쉽지 않은 것 같아요.
개발자 구인을 신경쓰지 않을거라면 대규모 협업을 하는 과제가 아니라면 다른 프레임워크를 쓰는 것도 추천합니다. 확실히 React보다는 편의 기능이 많은 것들을 사실이니까요
저도 현업에서는 Svelte쓰고 있고 함께 쓰고 있는 개발자들은 만족도가 높아요.
"뷰가 낫냐 리액트가 낫냐" 라는 질문은 전에 테오가 말하셨듯 프레임워크는 종교 같은 느낌이 있기 때문에 누구도 대답하기 어려울 거 같고, 확실한 건 지금 생태계가 리액트 크기가 압도적이고 회사들도 리액트 개발자를 뽑기 때문에 취준생이시라면 리액트 하시는 게 맞다 라고 봅니다
일본과 중국에서는 아직도 Vue 점유율이 훨씬 더 높습니다. 물론 React로 넘어가는 중이지만요. ㅎ
하지만 진짜 프로그래밍적으로 원론적으로 봐서 리액트가 다른 거보다 확실히 좋냐? 라는 질문을 한다면 글쎄요, 저는 개인 취향상 좋아하지만 안 좋아할 근거도 차고 넘칩니다
일전에 있던 회사에서는 루비나 PHP로 만들어져있던 서비스들을 죄다 Java로 바꾼다고 홍역을 앓았던 적이 있습니다. 왜냐하면 루비나 PHP개발자가 안 구해졌기 떄문이죠. 하하 ㅠㅠ
저는 현업에서는 Vue를 쓰고 React도 써봤고 현재 사이드프로젝트로 Svelte와 SvelteKit을 사용 하고 있는데 Svelte 만족도가 정말 높습니다~~ 제 개인 취향이지만 ㅎㅎ❤️
저는 리액트를 공부하고 스타트업에 취업했는데 여기는 Vue x Nuxt x Ts 쓰고있는어서 이직을 고려하면 리액트도 개별로 프로젝트하면서 공부해야하나 싶네요 ㅠ
저도 그렇습니다. ㅋㅋ
근데 이직이라고 하면 시니어급이 아니라면 사실 잘하는 사람은 어차피 다른것도 잘하기 때문에 크게 개의치 않습니다. 너무 걱정마세요! ㅎ
오 저도 학원에서 react 해서 하고 있는데 강의 보면 vue가 저에겐 접근성이 좋더라구요 react는 좀 어려운 느낌,, 그래서 한번 여쭸습니다~~ 감사해요!!
그리고 Vue와 React간의 개념들은 서로가 서로를 참고하면서 크고 있기 때문에 그 개념이 그개념이라서.. useEffect 하면 .. 아! computed? watch? 등등.. 다 물리고 물립니다.
저는 리액트하기 싫어서 굳이 뷰 쓰는곳으로 이직했습니다.. ㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
맞아요 여러분 프레임워크와 언어는 종교입니다
저번에 테오님께서 알려주신 https://bestofsvelte.com/ 이 사이트에서 참고 많이 하면서 스벨트/스벨트킷으로 행복하게 사이드프로젝트 진행을 하고 있씁니다 헤헤
다행히 프론트엔드는 언어 갈등은 없네요. ㅋㅋ
진짜 문법 이름만 다르고 프로세스는 같은거 같아요 ㅋㅋㅋ
네~ 그래서 회사에서 하는 주전공은 주전공이고 두루두루 개념만 익혀보시면서 공통점 차이점 새로운 패러다임등 살펴보시고 저변을 넓혀놓으시면
이직이나 면접이나 혹은 프레임워크를 다른 것을 써야할때에도 금방 적응합니다. 비주류만 깊게 파는 것은 비추이지만 비주류가 전공인게 안좋은 것은 아니라고 생각해요. React말고 다른거 하시는 분들도 React만 하는 사람과는 다른 상대적 경쟁 우위를 가진다고 생각해보세요 :) (대신 React도 할 줄은 알아야함)
그렇군요 ㅎ 감사합니다!! 다들 너무 멋지셔요.. 톡 오는거 보면 뭔말인지 아직 잘 모르는 1인,,
React 하나만 파기도 힘들던데 흑..
s3에서 링크를 받아서 a태그에 넣는 식으로 작업을 하는데, s3에서 링크를 바꿔도 브라우져 캐시가 먹어서 링크가 바꾸기전에 것이 적용되는 이슈가 있는데 어떤식으로 해결하는 게 좋을까요 ?
시크릿모드에서 보면 변경된 것이 확인이 됩니다 ㅠ
invalidate 문제는 또 아닌 것 같구요 ㅠ
저라면 링크를 s3에 안 넣었을 거 같긴 합니다
해당 웹페이지 파일의 header의 cache-control을 must-revalidate 등으로 한번 수정을 해보세요
cdn쪽은 대부분 기본적으로 캐시를 걸어두는 편이라서 수정을 해도 브라우저에서 캐시된 데이터를 보여줄 수 있습니다.
파는 것은 React를 파되 다른 공식문서를 그냥 유투브 보듯이 한번 읽어보세요. 오히려 React를 이해하는데 도움이 되는 경우도 많아요. ㅎ 프레임워크의 본질과 개념과 해결하고자 하는 문제는 거의 비슷해서 Background나Core Concept과 같은 내용들은 알아두면 좋습니다. 화이팅입니다!
저희팀 시니어님도 현회사에서 뷰를 처음 써봤더니 리액트보다 편하다고 좋다고 하시는데 결국은 구인구직 시장이 문제가 아닐까 합니다. 저도 뷰가 좋은데 일단 다 리액트 공고다보니 따로 공부할 필요를 느껴요
감사합니다 초기에는 무턱대고 프로젝트만 보고 달려갔는데 말씀해주신 각 프레임워크 탄생 배경이나 코어컨센을 알아가니까 구조 면에서부터 고민하는 질이 틀려지더라구용 ㅎㅎㅎ😍😍
리액트 베타 문서 굉장히 좋더라구요 ㅎㅎ
넵 감사합니다 확인 해보겠습니다 !
뇌피셜인 이유: 단방향/양방향 데이터 바인딩에 대해서 예전에 구글 찾아봤을때 설명 잘 되어 있는 링크를 찾지 못해서
앗 쓰는 도중에 엔터눌렸어요ㅠㅠ 잠시만요!!
데이터 바인딩을 변수 X의 값을 변경시킬 때 변수 Y의 값이 그에 맞추어 자동으로 바뀌는 걸로 정의한다면, 리액트는 단방향 데이터 바인딩만 지원하는 것 아닌가요?? 아니면 위의 뇌피셜 정의가 사람들이 보통 쓰는 정의가 아닌가요??
리액트는 단방향만 지원하는 거 맞아요!
감사해요!!
양방향 데이터 바인딩이라고 하는 부분은 input field등의 값이 있을 경우 Form을 통해서 view가 전달해주는 데이터와 컴포넌트의 데이터 변경감지로 인해서 변경된 데이터를 다시 Form Element로 전달하는 과정을 동시에 처리해주는 것을 의미합니다. angaulr에서는 ng-model view에서는 v-model svelte 에서는 bind:value 등의 기능으로 제공을 하고 있어요 react의 경우에는 이러한 기능을 제공하고 있지 않고 value={...} onInput={e => {...} } 와 같이 나눠서 작성을 해야합니다. 뷰에서 데이터를 변화한 것이 실제 데이터에도 반영이 되는 것을 의미하는 건데요. React의 경우 setState와 Event를 분리하고 event에서 setState를 명시적으로 해줘야만 이게 가능한거에요. 기존의 웹 개발의 경우 대부분이 폼 입력이 가장 중요한 핵심 페이지였고 데이터 처리들의 대부분을 차지하다 보니 편의를 제공하고 싶어했어요. (ex CMS, 게시판, 등록등..) 이후 웹 어플리케이션이 Form이 아니라 어플리케이션의 형태를 띄게 되면서 데이터가 의도하지 않게 바뀌는 부분의 디버깅이 어렵다고는 하나 다른 프레임워크들이 양방향을 중심으로 하는 프레임워크가 아니라 데이터와 이벤트를 중심으로 한느 단방향과 편의를 위한 양방향'도' 제공을 하는 것인데 리액트가 그런식으로 단방향을 언급하면서 많이 와전된거라고 생각해요.
와전이하고 하면 양방향은 나쁘고 단방향이 좋은거야를 말하는 건데.. 이것은 이후에 FLUX패턴이나 Redux에서 단향방 아키텍쳐를 제시하면서 뷰로직과 비즈니스 로직을 분리하는 과정에서의 큰 틀에서의 단방향을 얘기하고 있는 거에요. 프레임워크의 단방향은 one-way binding 이구요 FLUX, Redux에서 말하는 단방향은 unidirectional architecture 라서 미묘하게 달라요. 우리가 양방향이 나빠요 라고 말하는 것은 컴포넌트의 데이터 교환이 복잡해지는 방향성을 의미하는 것이 two-way binding을 말하는 것은 아닙니다. 사실 헷갈려도 몰라도 크게 중요한 개념은 아닌데 주제로 언급이 되어서 궁금해하실까봐 적어봅니다.
선배님들 제가 강의 결제 하려 하는데 프리패스(html,css,js,jquery,react,nodejs mongoDB, vue, typescript) 23만원 끊을까요 react(8만원) 공부하고 나머지는 독학으로 해볼까요..? 현재 제 상태는 html,css,jquery,js를 배운 상태 입니다!
제이쿼리..?
리액트 뷰 제이쿼리 다 배우는건
과하긴 하네요
취업 목표로 하시는거면 그냥 국비하나 들어가셔서 프로젝트하시고 해당 프로젝트 경험으로 면접보시는게 젤짜릅니다
js 더 파시고 리액트로 바로 넘어가세요
뷰랑 제이쿼리 nodejs는 딱히 지금 볼 필요없을거같네뇨
딱봐도 종류별로 수박겉햝기만 하는 느낌이에요
오오 코딩애플 강의인데요! 리액트만 보는걸 추천 하시는군요!
지금 국비 듣고 있는데 리액트가 완전 부족하다 느껴져서 리액트만 조금 파고 들어가고 싶은 마음입니다!
코딩애플님은 해외 fireship 유투버 흉내내서 인기몰이 하신것 같은데 원래 뭐하시던 분인지는 모르겠네여
일단 커리큘럼만 봐서는 절대비추입니다
그럼 음 리액트만 보시는건 추천하시나요??
아 그래요..?
Tenserflow in 100 seconds
ㅋㅋㅋ
리액트만 봐야한다 다른 것은 볼 필요가 없다라는 뉘앙스라기 보다는 결국 실전을 더 중요하게 해야 하는것이니 강의를 몰아서 듣기 보다는 일단 React를 먼저 하면서 프로젝트를 할 수 있는 상태가 될 수 있도록 잘하라는 의미로 받아들여주세요
fireship님 영상 제목이 자극적이네요
어떤 강의인지는 모르겠는데 일단 프리패스 단어 들어간건.... 보통 그럴듯한 커리큘럼을 내세워서 깊이는 없고 대충 사용 방법 정도 짚고 넘어가는 느낌이에요. (아니면 모 사이트처럼 여러 강의 짜깁기 해놓거나)
넵 알겠습니다!
제가 예전에 이거 끊었었는데요 비추고 리액트는 html css react는 괜찮습니다
그거 우선 따라해보시고 혼자서 생각하면서 이것저것 붙여보고 해보시면 나름 리팩토링하명서 프로젝트하나 할수있을거에요
오 감사합니다!!
이것저것 많이 넣은 강의는 하나하나의 분량이 많을수가 없어서 비추하는거기도 합니다
23만원에 저 많은것들을 만족할만큼 넣을거 같진 않네요
맞아요 저도 일단 끊고 ㅂㅎ자는 마인드도 있었던거 같네요 ㅎ,,,
넵 다들 감사합니다!!
제가 저기서 들어본건
리액트,뷰,타입스크립트
저도 리액트만 결재했었는데 간단한 프로젝트 용으로 빠르게 훑고 가시기에는 좋은 것 같아요 그렇다고 엄청 깊이 있는 것은 아니라서 추가로 더 공부하셔야해요.
세개인데
입문자가 듣기엔 좋습니다! 그리고 나서 결국 자기가 뭔갈 만들어보면서 응용해야하는거같아요
개인작으론 엘리쌤 바닐라로 간단 자기소개 페이지 만들기있는데.그거 좋습니다 ㅋㅋ
넵 다들 의견 감사해요!!
다른게 필요 없다기보단
취준은 가성비도 중요해서
오 그것도 찾아볼게요!
걍 유데미 3만원짜리 강의가 최고이긴한데…
오 저는 노마드추천드려용!!!
하나만 일단 잘하는게 중요하다는 느낌으로..
kent c dodd 30만원짜리 강의도 들어봤는데 생각보다 별로였슴여
노마드코더 바닐라 Js는 무료인데 괜찮구용 ㅎㅎ
다국어 제공은 어떤 구조로 하시나요?(i18n) 1. 서버에서 json 받는다 2. 프론트에서 json을 하드코딩한다 3. 구글 스프레드시트로 관리하고 프론트에서 api로 땡겨온다 정도가 있는거 같은데, 전 직장에선 1번으로 해봤고 새로 해보려는데 다른분들은 어떤 식으로 하시는지 궁금합니다~
ㅋㅋㅋㅋㅋ 다들 감사해요!!
다른강의들도 저렴하구.. 나중에 챌린지도해보세요!!!
저도 노마드로 공부했는데 노마드가 젤 괜찮네요
저희는 2번으로 해요!
저는 2번입니다. 물론 제가 하는 서비스가 SPA라서 그렇습니다
챌린지하시면 진짜 매일이여서.. 아마 취준때는 ㅎㅎㅎ 더좋으실듯 !!
챌린지는 안해봤는데 도움 많이되나보네요
확실한건 코딩애플 리액트는 해볼만하거 개념은 챙겨갈수있슺니다
다른간 하지마시구 ㅋㅋ
개인작의견
혹시 모달컴포넌트 같은경우는 재사용할일이 많은데 최상위단에 모달컴포넌트 생성해놓고 쓰시나요?
넹 이게 은근 매일이라, 난이도가 어렵고 이런문제가아니라. 매일의 성실함과 제출기한 맞추기가 ㅋㅋㅋ 물론 부끄럽게도 이런저런 핑계이기도하지만..ㅎ.. 생각보다(?) 한번에 통과하시는분 최초 신청자보다는 없어서 ㅎㅎㅎ
의미있으실거같습니다! ㅎㅎ동기부여도되고
저희는 mui modal 처럼 재사용 가능한 컴포넌트로 만들어놓고 씁니다
아하
최상위단에 생성해놓고 오픈 상태를 state로서 관리할 수도 있긴 한데 저희는 저게 더 편하더라구요 그때그때 Portal 통해서 새 모달 띄우는게
아 그렇군여
그럼 델님이 말씀하시는거는 해당 모달이 필요한 컴포넌트에서 생성해서 등록해준다는거죠?
저희는 2번 방식 비슷한데 엑셀 시트로 관리하면서 엑셀 시트로 Json 파일을 생성하고 이를 프로젝트에 넣어주면서 업데이트 하고 있어요!
넵넵 맞아요
넵 감사합니다!
실제 코드는 그냥 import { Modal } from '어디' … return <Modal isOpen={뭐}>
이런식으로 쓸 수 있도록
저희는 최상단에 선언해두고 useModal 이라는 커스텀 훅으로 openModal 함수만 부르면 나타날 수 있도록 설정중이에요!
챌린지는 어떤 챌린지 말씀하시는거예요??
전 최상위에 등록을 해놓고 state로 온오프 관리하고 서비스기능은 따로 모듈로 빼서 const {setOpen, setClose} = usePopup({title, content})
이런식으로 쓸까 생각했었거든요
넵넵 그런 방법도 있어요
아하 그렇군여
전 불편하더라구요
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이건 취향차이라..
뭐가 더 효율적이고 그런 정답이 없는거네요
감사합니다 테오,델! 추가 질문을 드리자면 1. 프론트에서 하드코딩으로 관리하면 번역 추가될때 번역가들과 협업하는 과정에서 번거로움이 꽤 있을 듯 싶은데.. 이 부분은 어떠신가요? 2. CSR이라 2번이라고 해주셨는데, 어떤 연관성이 있는지 궁금하네요!
앗 참고로 저는 SSR 환경입니다ㅎㅎ
사실 저희는 하드코딩은 아니고 번역 앱이 따로 있어서 번역가들이 거기 가서 번역해주면 자동으로 json export해주는 앱을 따로 만들었었어요
앞분도 말씀해주셨는데 구글 시트를 이용해서 번역을 전달받고 구글 시트를 자동으로 JSON으로 변환하는 기능을 만들어서 사용하고 있어요.
찌찌뽕
앱까지 만드셨다니!! 저는 그냥 스크립트입니다. 앱 있으면 좋겠네요!!
델님은 엄청난 실력자같아요
시트로 관리하고 json export가 나름 최적의 방법인거같군요 ㅎㅎ 다들 의견 감사합니다
제가 만든 건 아니었어요 ㅋㅋㅋㅋㅋㅋ 회사 갔더니 만들어져있었던..
앱 있고 서버 있으니까 스크립트로 다 관리돼서 편하긴 하더라구요!
SPA라고 했던 이유는 서버에서 받아오는 데이터를 다국어 지원을 해야하는 경우가 없고 앱내의 문구만 다루면 되었기 때문에 그렇습니다.
설명 감사합니다!
800명이군요!!
mui 쓰시는분들 이벤트핸들러에 useCallback 쓰시나용...?!
아니욥 안써도 별 문제 없었어요
제가 제대로 이해한게 맞나 싶은데.. React.memo가 씌워진 컴포넌트에 props로 내려주는 이벤트 핸들러에만 useCallback이 의미를 가지는 듯 하는데 맞게 이해한걸가요 ㅠㅠ?
또는 다른 hook의 deps가 되기 때문에 참조값을 유지해주고 싶을 때 정도?
throttle debounce 같은 케이스도 있어요
정말정말 감사드립니다ㅠㅠ 말씀해주신 덕분에 정확히 이해하지 못하고 나중에 오해할 수도 있었던 내용에 대해 명확하게 이해하고 갑니다!!
mui 코드 클론떠서 보는데 React.memo가 없군용....
혹시 debounce 에 useCallback이 어떻게 쓰이는지 조금만 자세히 알 수 있을까요ㅠㅠ..?
아 자답으로 이해했습니다.. 지금은 debounce함수를 외부에 선언해둬서 useCallback을 쓸 일이 없었네요..
사진
params를 명시했는데 왜 params가 없다는건지 모르겠네요
느얼일수도있기때문에 저렇게 못 빼는거 아닐까요
그니까요 전체 오브젝트에 대해 null 체크 해주시면 해결될 것 같습니다
{} | null
이렇게가 null체크하는게 아닌건가요?
잠시만요!
널이면 비구조화할당을 할수없어서 가 아닐지
그럼 비구조할당할땐 걍 any로써야하나요?
Null이 아님을 보장한 후에는 비ㄱ조화할당 될듯요
const a: { params: { name?: string } | null } = { params: null } const { params } = a 위에 처럼 타입 정의하시면 해당 코드 에러 안나올 것 같아요.
사진
이건 hooks자체를 건드려야하는건가요?
react-router-dom hook이라 안건드는게 맞는거같은데..
아니요 보내주신 코드에서는 f를 useMatch로, example이 유저 작성 코드라고 생각하시면 됩니다. 사진에서 f를 건드릴 필요가 없듯이 useMatch를 건드리실 필요는 없구요 (계속)
사진
나오는 값 자체가 null이 될 수 있다고 하시려면 이렇게 하시면 될 것 같습니닷..
*하려면
react-router-dom에서 제공하는 hook들이 제네릭 지원을 안해줘서...ㅠㅠ as 같은거 써서 형 지정해줘야 하는걸로 알고 있습니다
삭제된 메시지입니다.
실수로 엔터가 눌렸지만 암튼 이런 느낌으로 사용하실 수 있을 것 같습니다
giuthub flow로 하나의 기능단위로 브랜치를 생성하고 작업중 기능과 관련은 없지만 서로 의존적인 기능을 수정해서 구현해야하는 경우 어떻게 해결할 수 있을까요?
https://medium.com/steve-cruz/til-destructuring-from-object-undefined-689f459f546 이런거 찾으시려나요..?
제가 배경 지식이 없어 주어진 타입만 보고 얘기드렸었는데 오해드릴 수도 있을 것 같아 삭제했어요 ㅠㅠ 혹시 혼란드렸다면 죄송합니다ㅠㅠ
음
안녕하세요! 지금 회사 프로젝트 작업중에 testing-library 가 깔려있어서 한번 테스트를 해보려고 하는데요. 로컬에서 제가 직접 클릭하며 테스트 할수도 있는데, 왜 이 라이브러리를 써서 테스트를 진행해야하는지 모르겠습니다 ㅜㅜ testing-library는 보통 어떻게 사용하시나요??
어라 타입선언으로 해결하는게 아니었네요
const { params } = useMatch("url") || {};
뒤에 null인 경우 기본값을 넣으니까 해결되네요;
국비에 목숨님이 나갔습니다.
사진
기본값을 쓰는 것은 바로 생각지 못했네요, 상황에 맞춰 두 가지 방법 중 적절히 선택하셔서 해결하시면 무방할 것으로 보입니다!
|| 대신 ??가 더 정확할 수 있겠군요 쓸 수 있는 상황이라면
혹시 인증이 안된 aws 이메일 계정이 있는지 확인하는 방법이 있을까요? 2022년 3월에 aws계정에 가입을 했는지 안했는지 기억이 잘 안나서 어디다가 물어봐야할지 몰라서 여쭤봅니다. Aws doc에 나와있는 noreply메일을 확인하는 방법과 가입절차를 검색해보고 현재 체크카드에 해외 결제 1달러 내역이 없는것도 확인한 상태입니다
제가 입사지원한 회사에서 사전과제 받았고 과제 제출 후 하루 이틀 내에 확인 후 서류 통과 내용을 전달해 준다고 알림을 받았습니다. 일요일에 제출하고 회사측에서는 월요일 10시쯤에 메일을 확인했는데요. 아직까지 답이 없어서 너무 기운이 없네요. 오늘이 사흘째인데 리마인더 메일을 보내도 괜찮을까요?
과제전형 후 한번 피드백 받고 나서 회신했는데 실무자가 까먹고 다음 진행을 안한 경험은 있어요
보통이면 기다릴텐데 하루 이틀내로 알려준다고 말했으니 정중히 물어볼 수 있을것 같아요
회사마다 피드백 오는 시기, 피드백 여부가 다 달라서 혼란스럽고 초조하신 지금 시기는 곧 지나가고 좋은 결과 있으실거에요 :) 사전에 하루 이틀 내에서 피드백 준다는 내용이 있었다면 회사 측에 연락해봐도 괜찮을 것 같은데요 ?
실례가 될까봐 망설였는데 한번 보내보겠습니다! ㅎㅎ
안녕하세요 선배님들
사진
이렇게 date 타입만 다른 object가 있는데요
사진
IBlogNode 타입을 date만 바꿔서 IBlogNodeNew 타입으로 tempObj 객체를 만들고싶은데
이러한 방법밖에없나요?
extends,,로 불가능할까요?
or 로 안되나요
Date | string
이걸로 안될까요?
와우
그렇네요 타입 그렇게 설정해주면 되겠네요..
감사합니다 선배님들 ^^7
여담인데 I를 type 이나 interface 앞에 붙이는건 별로 좋지 못한 패턴이라고 합니다
아하 그런가요? 저는 많이 붙인다고해서
붙여서 선언했습니다.
네네 ts 초반에는 그런식으로 많이 붙였는데
생태계가 어느정도 갖춰진다음부터는 I 등을 붙이는게 좋지 못하다고 해요
C# 에서 넘어온 패턴인데
아하 해당부분도 검색해봐야겠네요 감사합니다 ^^7
사진
그럼 혹시 어떤식으로 네이밍하시나요 ?
effective typescript 라는 책에서 해당 부분 확인이후에 검색을 좀 해보니깐 대문자로 시작하기 + 해당 변수의 타입을 잘 나타낼 수 있는 단어로 만들기 ex) const student : Student = { name: '김동현', grade: 'A+' } 이런식으로 하라고 하더라고요
중요한건 변수가 뭔지 나타낼수 있는 타입으로선언하라 입니다
https://zereight.tistory.com/948
사진
토스 발표중 일종인데 실제 코드가 저렇게 되는지는 모르겠지만, react props 의 타입네이밍을 Props 로 퉁칩니다
이러한 방법도 있겠네요 감사합니다 !!
벨로퍼트님 코드 봐도 export 되지 않는 props는 Props로 다 하셨더라구요
보통 1 file 1 component 이기도 하니 export 되는거만 아니면 그냥 Props로 하는게 깔끔하긴 하죠
맞아요 오해가 생길것같지도 않구요
저는 클래스 워너원 컨밴션를 따라했는데 ComponentProps 식으로.. 지금 생각해보니 굳이 라는 생각이 들었어요
어 저도 그렇게했었는데 여러분들 말씀나누는거 보니 그렇게 생각이드네요
집가서 변경해야겠어요 ㅋㅋㅋ
그렇네요 괜찮아보이네요
이모티콘
사진
책을 사니 사은품으로 노트가 왔는데
읽어야할 책이 엄청 많네요;;; ㅜ
선배님들 혹시 리액트 관련 책 도움 될만한 거 있을까욥 :) ?
ㅎ 다 좋은 책들로 리스트 업 되어있네요
좋은 사이트가 있어서 공유합니당 https://www.notion.so/ReadIT-Letter-IT-6c11b1b3749e45e58268e816b1e473ea
감사합니다!
퍼블본으로 vue header, footer 만들려고 하는데 너무 어렵네요..
눅눅해!!!님이 나갔습니다.
언젠간나두님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 언젠간나두님~~ 반갑습니다 :)
안녕하세요:)
어서오세요 :) 이 곳은 프론트엔드에 대해 궁금한것들을 물어보고 아는 것은 함께 공유해가며 함께 성장하고자 하는 곳입니다. 개발, 실무, 멘토링, 취업, 고민 등등 편한게 글 남겨주세요~ 잘 부탁드립니다.
저 질문있습니다!
사진
스벨트에서 태그 내 함수 파라메터 타입 지정하는 방법이 있나요?
parse에러가 나서요 ㅠㅠ
안녕하세요! 회사에서 주어진 일이 너무 없거나 적을때 어떻게 하시나요~? 아직 주니어단계라 일 많고 야근하더라도 배우면서 성장하고싶은데 저한테 주어진 일 자체가 없고 팀장님한테 수차례 요청해도 변화가 없네요.. 현재 회사에 같은 포지션 동료나 사수가 없어서 혼자서 사이드프로젝트 하는것도 한계가 있고 실질적인 프로젝트에 투입돼서 경험을 쌓고싶어서 이직을 해야하나 생각도 드는데.. 이직을 하더라도 이직 준비하는 시간동안은 이 회사에서 어떻게 시간을 보내야할지 조언주시면 감사하겠습니다!
이직면접 공부요!
개꿀띠를 외치면서 인강을 틉니다
돈받으면서 공부하기..
저는 const xxx = (e:Event) => {...} on:click={xxx} 이런식으로 합니다.
혹시 아직 수습기간(3개월~6개월) 이신가요
일단 거기 사람들이랑 먼저 친해져보세요. 사적인 대화를 하지 않지만 유대감을 쌓아가며 얘기를 많이 해보시길 바랍니다.
1년미만입니다! 계속 인강보고 스터디는 하고있는 상태입니다..
어차피 공부는 혼자서도 충분히 할 수 있어요. 회사에서만 할 수 있는 것들을 많이 가져가시면서 이직 준비를 해보시기 바래요. 사람들과 얘기를 많이 하다보면 자연스럽게 필요로 하는 것도 찾을 수 있고 회사도 계속 인력을 놀려야할 이유가 없기 때문에 곧 일이 생겨날거에요. 사람들과 얘기하며 회사사람과 회사자체를 파악하는 것을 먼저 시도해보시길 바래요. 이건 이직을 하는데에도 큰 도움이 되실거에요
사내에 함께 대화를 나눠보고 같이 공부나 사프를 해보거나 비전을 같이 공유할만한 사람이 정말 1명도 없다면 회사관련 프로젝트를 그냥 혼자서 만들어보면서 이직을 준비하시는게 맞겠네요
오 맞아요 그래서 회사관련프로젝트로 혼자 해보고있는중인데 이것도 혼자하다보니 잘 하고있는게 맞나라는 생각이들어서 여기에 여쭤보게되었습니다..ㅠ 자세한 답변 너무너무 감사합니다!!!
제가 딱 그런 상황이었는데, 회사에서 근무시간에 이력서 쓰고 포폴만들고 면접준비했었습니다..!
ㅠ저도 잘 준비해서 이직성공하고싶네요..!! 일하고싶어요~~~~~일 일 ㅠ
저 혹시 여쭤볼게 있는데요 프로그래머스 레벨1 2016이라는 문제인데 제로초님께서 푸신방법이 어떤 문법을 이용하신건가요 대괄호 2개를 이어 붙이셨는뎀..
사진
요일 문자열 배열을 만들고 date객체의 getDay메서드로 해당 날짜가 몇 요일에 위치해있는지 인덱스로 접근하는 방식입니다!
arr[0] <- 이런거라고 보심 됩니다
아 굉장히 간단했군요 ㄷㄷ.... 감사합니당!!!!
근데 왜 getMonth는 0부터 시작할까요?? ㅜㅜ 일관되게 1부터로 해놓지ㅠㅠ
일월 이월 삼월 이런게아니라
그렇게 안세서그런가봐요? 서양이?
오오..
jan feb 이렇게...?
그럴 수 있겠네요
javascript는 그냥 Java에서 쓰는 방식을 그대로 가져왔습니다. 물론 Java에서도 왜 0으로 시작하는지 말은 참 많았습니다. ㅋㅋ 이후에 생긴 Calendar는 1로 조정하기도 했으니까요. ㅋㅋ https://stackoverflow.com/questions/344380/why-is-january-month-0-in-java-calendar
getMonth 문득 궁금해서 찾아봤는데 js에서 그렇게 부르는 건 앗 쓰려다가 테오님께서 먼저 올리셨군요 그렇습니당;
Tempotal 표준도 좀 구려보이던데 그래도 빨리 Native 날짜 함수가 나왔으면 좋겠습니다. 쓸때마다 미치겠어요. ㅋㅋ
Temporal https://tc39.es/proposal-temporal/docs/
적어도 다음 표준이 될 Date에서는 month가 1~12 로 되어 있네요. ㅋ
프론트엔드로 근무중인데요.. 메뉴 헤더에 있는 알림아이콘의 알람 갯수를 실시간으로 업데이트 시켜야하는데 찾아보니 웹소켓,socket.io라이브러리를 사용하더라고요.. 근데 마땅히 구글링을통해 얻은 자료가 없어서그러는데 혹시 참고할만한 자료가 있을까요..?
감사합니다 읽어보겠습니다
영상이나 글로 되어 있는 강의를 보신다면 강의만 쭉 보시나요? 아니면 중간중간 따로 실습을 하면서 도전하고 다시 강의로 복귀하시나요?
저는 후자요
저도 후자요 !
개발은개발님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
한 번 훑을때는 전자 작심공부할때는 후자 가 아닐까 조심스럽게 추측해봄니다
저는 영상강의는 항상 두번을 보는데 첫번째는 보기만 하고, 두번째부터는 손으로 치면서 봅니다.
vscode 테마 잘 쓰시는 거 있나요? 있으면 추천 부탁드립니다!
기본 다크
Panda-syntax
사진
대충 요런 모양새에요
개발은개발님 반갑습니다 :)
dracula clean
안녕하세요. 잘 부탁드립니다
오 두 분 다 감사합니다
둘 다 써볼게요
네~~ 환영합니다. 이곳은 프론트엔드과 개발을 하면서 궁금했던 것들을 물어보고 아는 내용들을 공유하면서 함꼐 성장하고자 하는 곳입니다. 언제든 어떤 내용이건 편하게 글 남겨주세요 :)
보니까 클라이언트쪽에선 웹소켓으로 서버를 구독하는 역할만 하면 될것같은데 맞겠죠..?
피스메이커 프로도님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 피스메이커 프로도님 반갑습니다~
meiis님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요!! meiis님 어서오세요~~~
안녕하세요 ☺ 처음뵙겠습니다.
네 웹소켓 간단하게 써봤을땐 서버쪽이 할일이 많고 프론트쪽 코드는 간편했었어요
네 환영합니다. ㅎ 이곳은 프론트엔드나 개발에 대해서 궁금한 것을 물어보고 아는 것들은 공유하며 함께 성장하고자 하는 곳입니다~ 언제든 편하게 글 남겨주세요 !! 잘 부탁드립니다.
이모티콘 어느새 800명이 넘었네요 ㅎ
실무에서 프론트엔드 비중이 줄어드니 열정이 사그라들고 있어서 급히 열정 수혈하려고 들어왔어요 ㅎㅎ 개인프로젝트로 서서히 시작해보겠습니다. 잘부탁드립니다 : )
좋습니다!! 동력이 필요하시면 작업할 내용의 문서나 개발하고 있는 링크 공유해주시면 많은 분들이 피드백을 해주실거에요 ㅎ
그렇다면 저도
깃허브 링크 투척..
우와 🥹 감사합니다. 준비해서 공유할게요!
늘 절차지향식으로만; 개발하다가 최근 함수형 프로그래밍 책을 보면서 공부 중인데, 혹시 모나드 개념 이해하시거나 실무에 적용하시는 분 있으신가요? 의외로 이 방에서 검색해도 얘기가 안나왔던 것 같아서 여쭤봅니다👀
모나드를 학문적으로 이해하면 어려운데 하나의 단계를 거쳐서 데이터를 다루를 방식을 모나드라고 합니다. Array도 Date도 모나드라고 할 수 있어요
함수형 프로그래밍에서 모나드가 중요한 이유는 연산자를 이용하는 할당과 연산문이 아니라 함수의 조립을 통해서 가지고 작성을 하기 원하기 때문에 함수를 받아줄수 있는 객체가 필요합니다.
Array.prototype.map, Array.prototype.filter등을 떠올려주세요. 즉 원시 데이터를 함수를 받아서 조작을 해줄수 있도록 만들어주는 객체를 모나드라고 합니다.
Promise도 같은 맥락에서는 Monad입니다. 원시 값을 비동기로 다루는 then, catch등의 메소드를 제공하고 처리를 할 수 있으니까요
그 밖에 Maybe, Either등 전통적인 모나드객체가 존재하나 결국은 모든 모나드의 상위호환격인 rxjs의 Observable로 귀결이 되게 됩니다.
바보fe님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
Array의 특성과 Promise의 특성을 모두 가지고 있는 객체이구요
안녕하세요 바보fe님 반갑습니다.
안녕하세요!
어서오세요 :) 이곳은 프론트엔드에 대해서 궁금한것들을 함께 이야기하고 공유하면서 다같이 성장하고자 하는 곳입니다. 언제든 궁금한게 있다면 편하게 글 남겨주세요~ ㅎ
무지무지님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
모나드에 대해 마무리 하자면 윈시데이터와 함수를 조립하기 위해서 인터페이스(ex. map, filter, reduce)등을 제공하는 타입이며 원시 데이터를 꺼내올수도 있어야 하고 값을 다시 모나드로 감쌀수도 있어야 하며 함수를 통해서 조립과 연산이 가능하면 모나드라고 부릅니다. 학문적 이론으로 깊이 들어가면 못 이해할만한 내용들이 쏟아지기 때문에 엄밀한 이해를 하지 않으셔도 코딩하는데 지장은 전혀 없어요 Array와 Promsie가 모나드의 일종이구나로 시작하시면 이해하시기 쉬울거에요
안녕하세요 무지무지님 반갑습니다 :)
이모티콘 안녕하세요오~~
네 안녕하세요~ 무지무지님!! 반갑습니다. 이곳은 프론트엔드나 개발을 하면서 궁금한것들을 만날때나 함께 얘기하고 싶은 주제가 있는데 주위에 없을때 내가 알고 있는 지식을 마구마구 뽐내고(?) 싶읉때 함께 할 수 있는 그런 공간입니다. ㅎ 언제든 편하게 글 남겨주세요 :) 잘 부탁드려요~
우와.. 감사합니다 이직 하고싶어서 공부중이라 질문이 많을거 같은데 많은 도움 받을 것 같아요~!
정성껏 질문하도록 할게요오
자세한 예시와 설명 감사합니다! 개념적으로 이해하기보다 RxJS와 같은 라이브러리 참고하면서 더 살펴볼게요!
좋아요! 내가 궁금한 것들은 다른 사람들도 궁금하기 때문에 모두에게 도움이 되는 거라고 생각하고 편하게 질문 남겨주세요 ㅎ
네 Rxjs로 바로 점프하기가 어렵다면 함수자(Functor) 라던가 Maybe, Either, Future와 같은 것들을 검색해서 읽어보시면 조금 더 단계별로 이해하시기 편하실거에요~
이모티콘 네엡 감사합니다
프론트방 터졌다고
많은분들이 오시네요..
이직 제안 오면 보통 반차 쓰고 가시나요??
그쵸 ㅋㅋㅋ
갑자기 터져서..
바로살아났어요!!
아하
안녕하세요 혹시 컬쳐핏 면접에서는 보통 어떤 질문을 하나요..? 뭘 준비해가면 좋을지 모르겠습니닷..ㅎㅎ
react에서는 꼭 쌍따옴표를 사용해야 하는건가요??
eslint 옵션에
그렇게 설정해두신듯요
- 가장 같이 일하기 싫은 동료는 어떤 동료인가요? - 10년 후에 뭘 하고 있을 것 같나요? - 동료와 의견 충돌이 있을 때 어떻게 해결하시나요? - 지금까지 일하면서 가장 갈등이 심했던 경우는 언제인가요? - 개발자의 성장과 역량에 대해 어떻게 생각하세요? - 우리 회사 컬쳐 문서 읽어 보셨나요? 거기서 설명하는 ~~~란 개념에 대해 설명해 보시겠어요? - (그 외 이력서에 따른 사바사 질문)
우와..! 정말 감사합니다..!!!!
보통 갈등경험 물어보고 나머지는 진짜 사바사 같아요
근데 컬쳐핏이라고 불러놓고 기술 2차 본 회사도 있었고, 완전 따뜻하게 수다떨듯이 한 회사도 있었고, 진짜 기술면접마냥 질-답-질-답 만 한 회사도 있었어요
이 회사는 따뜻하게 수다떨듯이 한 회사였습니다
아하..! 감사합니다 일단 여러방면으로 준비를 해야겠네요 ㅎㅅㅎ
여러분들 sql 컬럼명 카멜케이스로쓰시나요 스네이크로쓰시나요?
아 우리 서비스 써봤냐 추가하고 싶은 기능 있냐 하는 질문도 받았었네요 ㅋㅋㅋㅋ
저는 스네이크용
회사의 특성에 맞게 다방면에서 정성적으로 "얘가 우리가 원하는 인재상인가" 를 파악하는 시간이 컬쳐핏인 거 같아요
저는 서비스 써보면서 기술적으로 구현을 어떻게 했는지 궁금한점 여쭤봤었는데
그 이야기로만 거의 30분 이야기 하고 개인적인 성격이야기나 개인사 이야기 한다음 컬쳐핏 면접 끝났었는데 합격했었습니당
??
이모티콘 다들 감사합니다!!
공감합니다 직설적으로 같이 일하고 싶은 사람인가를 보는거라고 보시면 될것 같아요
사진
이런 부분에서요!
작은따옴표 쓰셔도 돼요~
감사합니다!
해파리님이 나갔습니다.
해파리님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 해파리님 반갑습니다 :
🛍 (주)멀린의수염 개발자 채용 O2O 이커머스 오픈마켓 플랫폼인 주식회사 멀린의수염에서' 초기 멤버(프론트엔드 개발자)를 모집합니다 ! 🛒 오프라인과 온라인을 직관적으로 연계해주는 오픈마켓 플랫폼입니다 ! 주식회사 멀린의수염은 ✅ 2021년 경희대학교 캠퍼스타운 대상 ✅ 2022년 예비창업패키지 선정(역대 최대금액 선정) ✅ 메쉬업, 캡스톤파트너스 투자상담중 조금은 느리지만 확실하게 성장하고있는 초기 스타트업입니다 ! 💻 이번 7월에 법인설립을 하여 시제품제작을 함께하실 극초기 멤버(리액트 개발자)를 모십니다 ! 대학생과 직장인들로 이루어져있어 초기멤버이면서 사이드로 가능합니다. 👩👩👧👦 현재 저희 팀원은 대표인 저와 디자이너 1명, PM 1명, 백엔드 개발자 2명으로 구성되어 있습니다. 대학생 및 직장인분들로 구성되어 있습니다. 함께성장할 프론트엔드 개발자분을 모집하고 있습니다 ! 더 자세한 사항은 아래의 번호로 문의 주세요 ! 김병수 : 010-3381-5793
안녕하세용 저랑 함께 개발했던 분이 이번에 창업을 하셔서 공지해드려요~!
안녕하세요! 혹시 PD님이 신입개발자를 2차면접할떄 뭐를 중점으로 볼까요???
2차가 컬처핏인가요 !?
1차로 기술면접봤고, 2차가 컬쳐핏인지는 모르겠습니다ㅠ
일반적으로는 그런데 면접관에 따라서 섞이는 경우가 대부분입니다.
월급은 주는걸까요..? 그부분도 병수님께 연락해봐야할까요?!
대개 2차가 1차보다 높은(?) 사람이 본다는 차이정도일까요? ㅎㅎ
제가 2차 때 받았던 질문은 인성위주로 다양하게 물어봤던거 같아여
아하 인성이랑 기술 둘다 준비를해야겠네요!!
합격하실 꺼에요 !
TS의 매개변수 프로퍼티가 생성자에 이렇게 선언과 할당을 동시에 해주는 건가요? ``` constructor(readonly name: string) {} ```
네네 직장인 분들도 계신다고 하고 저도 처음 제의 받을 때 투잡 형식으로 제의 받았는데 저는 제가 따로 하는 서비스가 있어서 거절 했었습니다 월급이랑 지분도 나옵니당
FE 취준생인데 고민이 있어서요 .. 쬐끔 길긴 한데 얘기해도 될까요?
앗 ㅎㅎㅎㅎㅎ
국비는 담주에 수료를 해요! 여태까지 FE 개발자를 목표로 준비 중이었지만, 프로젝트를 하면서 느낀건 개발도 좋아하는데 기획 하는것도 설레고, 디자인도 좋아하고 관심이 많아요! 아직 나이도 어리고(?) 이것저것 경험도 해보는 게 좋다 생각이 들었고, 웹 퍼블 업무도 현업에서 딥하게 해보고 싶다는 생각이 들어서요! (차후에 PM도 욕심이 있습니다.) 그래서 웹퍼블로 취업을 하고 경력을 쌓은 뒤 FE 쪽으로 중고 신입으로 FE로 이직을 준비해야 하나 고민이에요.. (분명 웹퍼블쪽 영역도 무궁무진 할테고 너무 FE만 보고 시야를 좁히는 건가.. 싶기도 생각이 들어요) 첫 회사가 중요하다고 다들 얘기를 많이 들어서 .. 그냥 몇 개월 더 공부하고 FE 개발자로 쭉 취준을 계속할지, 아님 웹퍼블 현업에 뛰어들어서 실무 경험을 쌓고 다른 한계가 생긴다 싶으면 개발자 공부를 해서 이직 준비를 할지 너무 고민입니다.. (현재는 JS와 React 공부 중입니다!)
편하게 바로 얘기하십쇼 ㅋㅋㅋ
퍼블리싱이랑 FE 개발이랑 같이하는곳이 요즘은 엄청많은데 둘다같이하는데를 가시는건 어떤가요?
퍼블리싱을 주로 + @(개발) 말씀하시는 건가요?
퍼블리싱 직무가 따로없는회사 말씀하시는것 같아요
공감합니다. 퍼블리셔 + FE 개발자의 일을 같이 하는곳도 많습니다
아직 프론트 업무가 퍼블리싱과 분리되지 않은 곳도 많을 거에요!
대기업 경우아니면 대부분 프론트가 퍼블리싱대 겸해요!
두개를 분리해서 생각하지 않고 퍼블리싱(html css) 를 FE 개발로 취급하는곳이 많아요~
퍼블리싱이면 html css 만을 말하는게 맞는걸까요?!
+ 디자인 + JS 까지 생각하고 있습니다!
아!! 그럼 구직활동을 할때 FE 개발쪽으로 알아보면 되는걸까요 .. /?!
fe이랑 차이점은 뭐라고 생각하세요?
데이터를 다루는 차이라고 생각이 들어요!
저는 퍼블리셔가 만들어준것 가져다쓰고 js 개발만 하고있는데, 두개 한사람이 하는게 더 메리트있는것같아요
크몽에서 퍼블리싱 외주를 받아보시는건 어떨까요 꼭 취업 안하고도 맛을 볼수 있잖아요
여러가지 해보는 건 좋지만 나중에는 스페셜리스트가 되시는 걸 목표로 삼으세요 🙂
저는 로직작성 하나도 안하면 좀 아쉬울 것 같아요
아 정말 다들 생각이 비슷하면서도 서로 조금씩 다르군요
퍼블리셔는 웹 개발의 발전과 관련이 있는데 지금처럼 웹 프론트엔드가 데이터를 다루거나 애플리케이션을 하지 않는 시기에서는 홈페이지 개발을 하는 웹 개발자가 다수였고 지금도 그 포션은 결코 작지 않습니다. 이 때 웹 디자인의 결과물들을 홈페이지로 만들기 위해서 HTML과 CSS를 만들 수 있는 직군이 나타났고 이를 전문으로 하는 직군이 퍼블리셔였습니다.
홈페이지의 경우 깊은 JS의 지식이 많이 필요하지 않고 디자인의 영역이 더 중요하게 여거지는 페이지들이 많다보니 전문적인 개발자들 보다는 디자인을 할 줄 알면서 HTML과 CSS를 잘할 수 있는 계층에게 인기가 있었으며 데이터를 주로 다루는 개발자영역과는 조금 다른 직군이었어요
지금 대기업에서 퍼블리셔와 프론트엔드를 분리해서 운용하는 이유는 기존에 시장에 풀려있던 퍼블리셔의 몸값이 개발자보다 조금 떨어지는 반면에 기존 개발자들이 결국 퍼블리셔의 일을 안 할수는 없는 구조이다보니 UI를 전문성을 가진 사람에게 맡기고 백엔드와의 데이터 교환에 더 집중 할 수 있도록 해주는 방식으로 한거에요. 대기업은 어쩄든 업무를 분화하고 더 잘하고 가성비가 좋은 사람에게 시키려고 하니까요
최근 프론트엔드 입지가 높아진 것은 디지털 전환과 스타트업의 성장으로 인해서 대시보드나 CMS 기타 여러가지 데이터들을 화면으로 보여주고 조작을 할 수 있게 하는 것들을 만들기 위함입니다.
퍼블리셔로 먼저 시작을 한다면 나중에 FE 전환시 일종의 선입관을 가지게 될 수도 있다는 점은 알아두시면 좋을 것 같아요
최근에는 둘 다 중요하기 때문에 직군간의 연봉의 갭이 줄어든다고는 하고 있어서 지금은 함부러 말하면 안되겠지만
그냥 둘다 잘 할 줄 아는 상태로 포장을 하시는게 좋을 것 같아요. 굳이 나를 한쪽으로 내려 두실 필요는 없을 것 같습니다. 요새 스타트업에서는 왠만하면 두 일을 모두 시킬테니까요
혹시 어떠 선입관을 가지는지 여쭤봐도될까요?
HTML, CSS는 잘하지만 JS는 잘 못할거라는..?
공감합니다 ㅠㅠ
제가 많이 들었어서 ㅠㅠ
퍼블리셔의 방향성은 애플 홈페이지나 https://campaign.naver.com/band-10th-anniversary/?pcode=naver_timeboard
뭐 이런류의 방향성이라서
이게 나쁘다는 것은 아닌데요... 음...
아닙니다. 저 역시 선입관에 빠져있는 건지도 모르겠네요;; 옛날사람이라... 퍼블리셔 일과 개발일의 급여차이가 꽤 났었기 때문에 둘 다 잘 해야한다라는 것만 기억해주시고 너무 깊게 담아두지 마세요. 죄송하빈다
답변정말감사합니당
사람마다 차이가 있으니까 테오님의 말씀도 이해됩니당 ㅎㅎ
반성하겠습니다... 차별철폐 둘 다 소중한 걸로~~ 요새 FE 분들 중에서는 CSS를 잘 못하는 사람들도 많아서
저도 취준시 퍼블리셔로 FE 면접 보았을 때 면접관분들께서 개발을 잘할 수 있을 까라는 걱정을 많이 하시더라구요
오히려 자극받는것같습니다. 감사해요
포기하지말고 ! 열심히하면 좋은 결과가 있을 거라고 생각합니다 !
html css만하다 프론트 전향하신분들 대단합니다!
프론트엔드의 2가지 갈래에 관한 외국 관련 아티클입니다. 생각해볼만한 부분이라고는 생각합니다
저도 퍼블리셔에서 fe개발자로 준비중인데 많은 것 얻고 갑니다 감사합니다.
사진
항상 감사합니다!
이모티콘
이제 국비도 수료하기도 하고 올해 안에는 취뽀를 목표로 했는데 현재 스타트업 경기도 많이 안좋아 많은 생각이 들어서요.. 국비에서도 웹퍼블로 취업을 미는 추세라 다양한 경험도 해보고 싶어서 웹 퍼블로 준비를 해서, 일을 해볼까 생각이 많이 들었는데.. 테오님 말씀처럼 제 자신을 한쪽으로 내려둘 필요는 없을거같아요! 결국 제가 선택해야 하는 길이고 그 선택을 옳게 만드는 과정이 제 일이니까 현재 주어진 상황에 맞게 열심히 준비를 해서 퍼블리셔 + FE 개발자의 일을 같이 잘 할 줄 아는 개발자가 돼야겠어요! 지난주부터 너무 고민이 많았는데 진작에 얘기할걸 생각이 드네요! 어떻게 보면 답은 정해져있고, 제가 듣고 싶은 말을 들었던 거 같다는 생각도 들어요! 다들 답변 정말 정말 감사드립니다 :)
이모티콘
국비는 너무 믿지마세요
이건 공감해요 본인이 하고싶은걸 밀고가세요
취업률이라는 양적인 결과만 추구하는곳이라 질적인 부분은 보장이 안됩니다
맞아요.. 그래서 스터디원들끼리 스스로 발품팔고 서로 정보 공유하면서 취준하고 있어요 히히
국비 퍼블하면서 일러스트 소묘데생? 브랜드디자인? 이런걸로 3개월 했습니다 후...
4개월 유료 부트캠프같은 건 퀄리티가 괜찮을까요? 기간이 좀 짧은 것 같아서 걱정이긴 한데,,ㅠ
저도 캠프했지만 거기서 배운것보단 스터디에서 진짜 도움 많이 받았어요
호불호 많이 갈리더라구요 ! 결국 본인하기 나름이라고 말씀하셔서 !
공부할수있는 환경도 잘 만들어졌구요ㅎㅎ
부캠 가격을 생각하면... 금전적 여유가 꽤 있으신거 아니면 그닥 추천안합니다
부캠할거면 국비로 하셔요
저도 국비였어요ㅋㅋㅋ 기초가없는 상태에서는 도움이 되더라구요!
답변들 감사합니다 역시 환경도 중요하지만 본인 하기 나름이겠지유,, ㅎㅎ
몇백씩 쓸만한 값어치는 안하는거같습니다
부캠은 그냥 코딩할 환경과 약간의 강제성? + 팀원들제공 정도..
국비 단점이 복불복인거같아요 ㅠㅠ
와.. 이 페이지 너무 예쁘네요
저는 국비 경험이 너무 안좋아서 ㅠㅠ
부드럽고..
저도 퍼블리셔 국비 했었는데 포기자도 많고 하루종일 구글링만 했던 기억이,, ㅎㅎ 그래서 이번엔 유료캠프 생각중이에요 ㅎㅎ
부트캠프의 장점은 커뮤니티랑 취업연계성인거같아요
전 아무것도 모를 시절에 유료가 몇십만원정도 하는줄알았는데 기본 5백이넘어가다보니.. 깜짝 놀랬던 기억이 있어요
마자요 ㅠㅠ 국비는 무료다 보니 중도포기도 많더라구여
프론트엔드 초고수가 되고싶어요
js정말 잘 하고싶네요..
저두….
너무 답답해요
코드 보고 이해라는걸 하고싶어요
ㅋㅋㅋㅋㅋㅋ극공감,,
긴거 보면서 흐름을 이해하는..쾌감을 느껴보고싶네요
바보는 웁니다
외부 스터디도 참여해보세요!
동아리 추천드려요 !
대학생만 가능한가요? ㅠ
아뇨
동아리마다 다르긴한데 아닌곳도 많아요
저도 동아리활동 추천합니다
질문있습니다! 혹시 부트스트랩 같은 라이브러리가 더 있을까요? css에 반응형까지 지원하는거요
antd mui
정말많아요
대안을 찾기 제일 좋은 팁은 뒤에 alternative 라는 키워드를 넣어 보는 겁니다. ㅋ https://www.google.com/search?q=bootstrap+alternative&oq=bootstrap+alter&aqs=chrome.1.69i57j0i512j0i10l8.7140j0j7&sourceid=chrome&ie=UTF-8
오 감사합니다!!
두 분 답장 감사합니다~!
저는 퍼블리싱 괴로워서 프론트만 전문적으로 하는 회사가고 싶던데
ㅠㅠ
인터렉티브웹 재밌어서 배워보고 싶어요 저는 ㅋㅋ
인터렉티브 웹은
안드로이드폰이 괴로워하더라구요
최적화 힘들어요 흑흑
리액트 하시는 분들 input의 onChage에 따른 재랜더링을 어떻게 최적화 시키시나요?.? 키워드 주시면 감사하겠습니다!! 🙏🙏🙏
최적화가 필요하다고 느껴지는 성능이슈가 있나요?
버벅임이 느껴지지 않는다면, 그냥 컴포넌트 리렌더링 시키셔도 됩니다
벨로퍼트 블로그
ref써도 됨니다
정주행하셔요
버벅임이 느껴지신다면 먼저 state를 끌어내려 보시고, 최후의 수단으로 memo를 활용할 수 있습니다
그리고 최최최최후의 수단으로 비제어 방식을 채택할 수 있습니다
사실 구조가 제대로 되어있으면 그다지?최적화를 안해도됩니다
그냥 냅둬도 크게 거슬리는건없어요
리액트의 컨셉이기도하구요
이게 리액트의 초기컨셉이자
지금까지 이어지는 철학이죠
저번에 델님이 공유해주신 아티클 참 인상깊었습니다.
켄트 아저씨 글 말씀이시죠?
자기 얼굴 때리는거요.
ㅎㅎㅎ헤
https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render ㅋㅋㅋㅋㅋ 좋은글이죠
딱히 문제도 없는데 리렌더를 막고자했던게 과연 최적화라고 해도 되나? 에 대해 생각해보게 됐습니다.
버벅임은 없는데 lighthouse로 점수 확인하니까 너무 놀랐습니다 ㅠㅠ..
그래서 컴포넌트가 렌더링 될 때 랜더링이 불필요한 것들은 렌더링이 안 되게 만들고 싶더라구요…!
아직 저도 거기에 찝찝함이 해소 된건 아니라 마음속에 응어리가 있긴합니닼
아 lighthouse 가 스스로 인풋 수정해보고 반응이 몇 ms 안에 오는지까지 테스트해주나요??
그 리렌더가 ilghthouse에도 악영향을 주나요?
만듀웅님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 만듀웅님 반갑습니다 :)
안녕하세요~ 반갑습니다 :)
어서오세요~~ 이곳은 프론트엔드나 개발에 대해서 궁금한 것들을 물어보고 아는 것들을 서로 공유하면서 함꼐 성장하고자 하는 곳입니다. 궁금한 것들 하고 싶은 얘기들 고민들 뭐든 편하게 글 남겨주세요!! ㅎ
넵ㅎㅎ 반겨주셔서 감사합니다.
최근 회사에서 테스트가 필요하다고 느껴져서 도입할려고 하는데요. 프론트엔드에서 테스트가 무의미하다는 의견이 많은 것 같습니다. 근데 막상 이슈처리하다보면 예상치 못한 사이트이펙트로 인해서 다시 작업하는 경우가 많은 것 같은데요.
어라 이렇게까지해주나요...?
어떤식의 테스트가 유의미하다고 느끼시는지 의견이 궁금합니다ㅠ
리소스가 많지 않다면 e2e 테스트만 작성하셔도 좋을거같아요!
https://www.linkedin.com/posts/sryoo_scitcu-testdrivendevelopment-tdd-activity-6949219052850421760-USIe 요 글이 인사이트가 되실 수도 있을 거 같네요!
*될 수도
안녕하세요 질문좀해도될까요~? api받아와서 검색창을 구현하고있는데, form태그로 감싼 input태그의 value값을 useState로 받아와서 api에 넣어주는 로직인데요! useState를 사용할 경우에는 검색하면 맨처음값이 undefined로 떠서, 제가 원하는 값이 안나오더라고요ㅠ 그런데, useRef를 사용할 경우엔 바로 결과값을 얻을 수 있더라고요!
useRef는 DOM 노드에 접근하기때문에 사용을 지양해야 한다고 들었던 기억이 있는데 공식문서에 포커스, 텍스트 선택영역 또는 미디어의 재생을 관리할 때는 사용해도 된다고 나와있습니다. 그럼 혹시 지금처럼 input의 value값을 가져오는 경우에는 ref를 사용해도 어떤 성능 이슈같은게 없나요? 사용해도 괜찮은지 궁금합니다 :)
사진
사진
성능은 큰 차이 없고, 유지보수성은 더 안 좋습니다!
역시 그런가요?ㅠ useState를 사용해서 결과값을 한번에 나타내고 싶은데 어떻게 해야 좋을까요?
리액트의 철학에 맞추려면 input의 값을 애초에 state로 관리하고 있었어야 했을 거 같아요
무의미는 아닙니다. 다만 테스트를 작성하고 유지하는 비용이 비싸기 때문에 가성비가 떨어진다는 것이지요. 특히 비즈니스 로직이 아니라 뷰에서 버그들이 많이 일어날때 더더욱 그러합니다. 혹시 사이드 이펙트들은 주로 어디서 발생하나요?
음 이건 이런이유 때문에 useRef를 쓰는 건 잘못쓰는게 아닐까 싶은 느낌이 들어요
사진
오랜만에 개발바닥 보고 있는데
ㅋㅋㅋㅋ 보셧군요
과거에 쏘아올린 리액트 아키텍쳐 영상에 대한
과오를 뼈저리게 느끼시는게 아닐까... ㅎ
어라 애초에 state로 관리하고 계셨네요.. ㅋㅋㅋㅋㅋ 코드 똑바로 읽고 다시 답변드릴게요 🙏 @파이팅
과오까지는 아니겠죠 충분히 프론트엔드끼리 많은 소통이 일어났고 충분히 이슈는 되었다고 생각합니다. ㅎ
console.log를 handlesubmit 밖에 두시면 search가 undefined가 아니고 원하는 값으로 보일거예요
제대로 state를 관리하고 계셔요
useState 에서 onSearch(search) 가 아니라 onSearch(e.target[0].value) 라고 하셔야 할 것 같네요!
GraphQL을 사용해서 Apollo Cache에 많이 의존하는 상황입니다. 여기서 cache 데이터가 제대로 관리가 되지 않으면서 같은 모델을 리졸빙해서 가져오거나 업데이트시 다른 컴포넌트에도 예상치못한 영향이 가는 경우가 많습니다ㅠ
어.. 아닌데 input에 onChange 핸들러 걸려있는건가요?
아니요! 오
이렇게했더니 됐습니다.
사실 폼의 submit 이벤트에서 target[0] 으로 input에 접근한 다음 거기서 value 빼내는것도 리액트 취향은 아니라
네 저도 그부분이 맘에안드네요ㅠ
value값을 찾으려 요리조리 이벤트 뒤지다가 발견하여 임의로 넣었는데.. 다른방ㅇ법이 마땅히 떠오르지않네요
찐 정석은 input 에 onChange 걸고 (e) => setSearch(e.target.value) handleSubmit 에서 onSearch(search) 이렇게 하시면 될 거 같네요
당연히 input에 value={search} 도 넣어주셔야할거구요!
아하 change핸들러로 받아와야 최신상태가 바로 업데이트 되는것으로 이해하면 되는걸까요
또한 API가 바뀌어 user.name -> user.member.name 과 같이 렌더링해야할 정보가 바뀌는 경우 user모델을 사용하는 컴포넌트를 모두 교체해줘야하는데 빠트리는 경우도 자주 생기구요ㅠ
change핸들러 docs를 한번 살펴봐야겠네요 감사해요 :)
@파이팅 이거 한번 쭉 읽어보시면 될거같아요!
그.. 이번에 공식문서 베타보다가 본거 ㅅ같은데 링크 찾아볼게영
아 클래스문법이네.. 리액트 게으르네요
베타공식문서가 진짜좋더라구요 잠깐봣는데
오 그렇군요! 베타공식문서 있는지 몰랐어요
두곳 다 찾아보겠습니다!
도메인 모델과 UI 컴포넌트를 어떻게 잘 조합해서 관리하는게 좋을지 고민이 드네요
https://beta.reactjs.org/learn/you-might-not-need-an-effect 개인적으로 이건 진짜 리액트 개발자면 꼭 보셔야 할 것 같아요
정독하겠읍니다 답변주신 델님과 0110 감사드려용
와 글 좋네요
진짜 state 변경될 때 useEffect 로 state 변경 처리하는 코드 보면 부글부글 끓었었는데
이거 진짜 완전 공감이요
https://beta.reactjs.org/learn/state-as-a-snapshot 아마 이 내용이 맞을진 모르겠네요
와 머리 띵하고 갑니다 바로 코드 열어서 불필요한 이펙트 다 걷어내고와야겠네요 감사합니다 ㅠㅠ
오 맞아요! 처음예시가 거의 똑같네요! 해당 문서와 델님 말씀처럼 ref없애고 change 핸들러추가하는 것으로 변경해서 해결했습니다 감사합니다ㅠㅠ!
저 글로벌스코프에 안떨궈진다고 징징햇엇는데요 ㅠㅠ _app 에 넣으라던분 감사합니다
_document가 아니에요
아니네요
어떤식으로 테스트 전략을 세우실지가 궁금하네요 말씀하신 사이드 이펙트를 검증하기 위해서 테스트가 유의미해져야 할텐데 좋은 해법이 있거나 중간 과정에서 얻게 되는 인사이트가 있다면 한번 공유 부탁드려요~ 저도 테스트는 필요하다고 생각하면서도 효용체감을 잘 못하다보니 미루게 되더라구요 반성은 하는데 실천을 못하고 있네요 ㅠㅠ
🐦님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안주무시는군요
안녕하세요 반짝이는 이모지님 반갑습니다 :)
전 백엔드엔지니어할때 보다 프론트할때 테스트가 너무 힘들다고 느껴질때가많은데... 그 중 큰부분은 리덕스쓰는겅우 데이터모킹이너무 번거로와서 코드짜는것보다 더오래걸리고 동기화처리가 너무 까다롭고..무엇보다 제스트 너무느려요 흑흑
제스트 너무 느려요 강조
(흑흑)
cypress e2e 는 어떻게 생각하시낭ㅅ
나요?
사실 그부분은 제가다는회사는 qa에서 해주셧는데
제스트는 계산함수 단위테스트에서만 쓰고
저희는 jest 단위테스트에 좀 집중하구요
아하!
그래서 view딴은 대충 스냅샷으로 넘겨버리고 hooks들만 검증하고있죠..
근대역시나 좀 큰프로젝트를 돌리는대 제스트 너무오래걸리는건 언제나 킹받아요
vitest는 안쓰시나요?
그개뭘까요?
찾아보고오겟습니다
저는 유틸성 함수 테스트할때만 써봤는데 빨라서 좋았습니다
view까지는 시도도 안해봤..
5년이상된 프로젝트에 서드파티가 잔뜩이라
vite는 시도하다가 호환성땜에 포기하고 결국
Webpack5 에 esbuild loader를 붙엿죠
근데 웹팩5도 써보니 웹팩은 끝물은 맞는거같습니다
ㅇ
혹쉬 어떤 이유에서인지 알 수 있을까요..?!
대 웹팩의 시대도 저무는군요ㅠ
스토리북도 그렇고 이제 대표적인 큰 패키지들이 4기준이서 5기준으로 업데이트를 안하는 애들이 있더라고요
그리고 4에서5로 간다고 성능이나 번들링이 확연히 좋아짐것도아닌데
안정성은 더 떨어진느낌이...
esbuild-loader 사용하실때 문제는 없으셨나요? 저는 기존 프로젝트에서 babel-loader에 여러 플러그인을 같이 쓰다보니 문제생길까봐 마이그레이션을 망설이고 있어서요 ㅠ
Es5 지원안대는거말고는 크게 문제는 없었는데
Babel로더말고 안에 세부의존성들은
좀 조정해줘야되요
예컨데 프로젝트에서는 필요없는데 Jest에서는 바밸이필요하거든요
그래서 패키지에설치는하지만 프로젝트빌드시엔 바밸빼고 테스트시에만 특정 바밸포함시키는?
Env변수로 구분해사오
아하 감사합니다!
그런 경우에는 프로젝트 최신화을 하려는 시도는 하나요? 어떻게 관리하세요?
저에게 주신 질문일까요?
네~
전 최근 1년동안 최신화담당이었어요 ㅎㅎ
Flow를 벗겨내고 ts로
5년 이상된 코드라고 해서 굉장히 흥미가 갔어요!! ㅎ
웹팩과 노드버전을올리고 esbuild도 도입하구오
와!
저희프로젝트는 언제나 최신화를 도모합니다
그래서 class도 전부 functional러
교체중이에요
근데 제가맡은서비스가 기능추가가많지않고
성능만 신걍쓰면되서 그런명도있어요
그리고 팀원전원이 중니어이상 시니어 정도 되어서
코드리뷰나 리팩토링이 무쟈게 빠른점도 있네요
그러면 거의 대부분의 작업이 최신화가 된건가요? 1년정도 몇퍼센트나 가능했나요?
거의끝났습니다 90프로이상 끝났구요
새숨을 불어넣었으니 앞으로 5년은 더갈겁니다
캬~ 멋지십니다!! +_+bb
근데 애초에 저희팀장이 기반을 너무 잘짜놓으셧어요
제가들어오고 소스코드파악하는데 일주일 밖애 안걸렸습니다
레거시상태로요 ㅎㅎ
그러게요 중간에 Flow도 있었고 class -> functional은 어쩔 수 없는 거라고 쳐도
프리티어나 린트도없었는데 적용했고 커밋훅도.. 드론빌드를 깃헙액선으로..
Flow to ts늨
엄청나게힘들었어요
그래서 중간에 셋팅을 둘다 받아들이게 듀얼로두고
Flow가 다 사라졌을때 패키지를 제거했죠
5개월은걸렷어요
1000개정도 바꿧습니다 ㅋㅋㅋ
Js to ts
오줌누고 말리듯이 패치나갈때 한줌씩 바꿔나갓어요 ㅋㅋ
ㅋㅋㅋㅋ 오오!! 실력 많이 늘으셨겠네요 개발경험적으로는 어떠셨나요? 레거시 최신화가 취향에 맞는 분들과 아닌 분들이 있어서
개발실력은 ㅋㅋㅋ음..... 좀 저를 되돌아본거같네요
이렇게짜는개 최선은 아니엇구나
예컨데 굳이 리액트훅에안넣고 순수함수로 빼버러도되는함수가 많구나? 요런
레거실 최신화하는작업은
저도 시니어로 가는데있어서 무조건 필요하다고 생각했습니다
셋팅이나 마이그레이션은 신입을 시킬순 없자나요 ㅠㅠ
그리고 어느회사를 가서도 환영받을 이력이라고 생가했어요
신입이나 주니어시절에도 그런 작업을 맡게되는 경우가 있는데 많이들 물어보더라구요 이직해야 되냐고
사실 서비스개발은 안하는 거다 보니
오래된 레서시코드 호환이나 서드파티호환이 제 주업무애요 거의
안하는건 아닌데 뭐랄까
뭔가 내걸 만들고 있는게 아니라는 느낌?
소스코드스타일은 아차피 리뷰도 받을수있고
팀원들꺼 카피해서 짭니다 저는
그사람들 스타일로 이해하시쉽게
내걸...이라 흠..
창업아니면 결국 남의꺼...?
개인프로젝트로 내꺼 많이만드는편이고 회사에서는 팀서포트죠뭐
저희회사도 시니어님 혼자 열심히 고치시던데
나중에 저도 할 수 있을까 걱정이 됩니다
그게 배포에 섞어나가보내도 문제는 생기지 않으야하면서도 유사시 롤백도 편해야됩니다 ㅋㅋㅋ
멋지네요! 좋은 경험이셨울거라 생각합니다!! 좋은 이야기 고맙습니다
전 좀씩 흘려나가보내며 물타기를 추천하지 브랜치하나에 막고쳐서 4개월만에 머지? 이런건 비추해요
이렇게하먄 마이그레이선 실패해요
맞아요! 저도 항상 하는 얘기가 그거에요~ 코드에 모든 역사가 남아있더라도 야금야금 고쳐나가야 한다 한번에 고치면 거진 다 실패합니다
nextjs에서 네이버맵을 연동하려는데 스크립트를 _app에 넣는게 맞나요 아니면 _document 아니면 해당 페이지 라우팅? 에 넣는게 맞나요??
제가 해보니 app이 맞을거같아요
아그런가요??!
Npm에 패키지있는지도 살펴보시구요 ㅎㅎ
app은 모든 페이지 시작전에 들리는 곳 아닌가요!'
맞습니다
패이지라우팅 index에 넣어도 상관은없을수도...?
제가 동작하는건 다 확인햇는데
정답을 모르겟어서ㅜㅜ
다 동작하면 라우팅에넣는게
번들사이즈는 줄일수있죠
줄인다기보다 레이지로딩...?
우왕 부러운 환경이네요....
저연차를 안뽑는 팀장 취향입니다 ㅋㅋㅋ
저희는 중니어라도 추가됐으면 좋겠어요ㅠㅠ 대기업이신가요?
최소 5년차부터 뽑겟다는 팀장의의지
스타트업은 중니어도 하늘에 별따기인데
대기업....은 아닌거같아요
숫자가 많지는않아서
스타트업 시리즈 A이하는... 지원자의 95%가 신입이라
ㅠㅠ
저희는 최근에 고오급 인재를 많이 주워담은...
지인이나 주변알음알음 아니면... 다 1년차 정도인 것 같아요...
저희팀은 fe평균연차 5년이상이네요
우와....
팀원은 몇분 계신가요?
8명~10왓다갓다합니다
Tf왓다리갓다리해서
진짜 제가 꿈에 그리는 환경이군요 ㅠㅠㅠㅠ 제가 평균에 안되지만..
저도 신입이나 1년차랑만 섞여서 한참 일했어오
크흑.. 결국 기다리는거보단 제가 찾아서 가는게 빠르겠군요
혹시 tollkit에서 Redux-thunk다들 어떻게 공부하셨나요? 미들웨어 개념이 약해서인지 오늘 thunk처음배웠는데 이해가 잘안갑니다 ㅠㅠ
리덕스가 좀 어렵죠 ㅋㅋ...
모든 액션의 선행 후행작업을 해준다고보면됩니다
그냥 구글 찾아보며 예시 코드 치면서 하나하나 이해하면서 작업한듯요
리덕스는 음.. 강의도 워낙에 많아서 그래도 공부할 자료는 많은 것 같아요
대부분의 강의가 리덕스 기반이라
프론트 개발자가 AI나 블록체인 관련된 프로젝트를 진행해보는게 크게 도움이 될까요?
혹시 유튜브강의말씀이신가요?
네 도움될거같아요
부트캠프에서 프로젝트 주제를 정하고 팀을 짜야하는데 평범한 주제에서 잘한다고 모인 팀 멤버로 들어갈지, 특별한 주제지만 평범한 팀 멤버로 들어갈지 고민이 됩니다!
어떤식으로 도움될까요..?
블록체인도 점점 시장이 커지고 블록체인네트워크랑 연결할 경우가 점점 늘어나니까
좋은경험이 될 수 있겠죵?
고견 감사합니다!
원래는 블록체인 같은 특별한 주제로 해보고 싶었는데, 팀 모으기도 전에 이미 잘한다고 하시는분들로 팀 다 짜놓은 곳에서 같이하자고 연락이 와서 고민하고 있습니다
제가 포폴도 제대로된게 하나 정도 밖에 없고 경험이 부족하다고 생각해서 진짜 잘하는 분들이랑 해보고싶은 마음이 드네요... 근데 또 블록체인 해보고싶기도 하고
어렵네요 ㅋㅋ
주제vs사람이면.. 두 팀의 실력이 거의 비슷한데 조금 더 잘하는거면 주제, 많이 실력차이가 나면 저는 사람에 한표요ㅎㅎ
특별/평범은 기준이 뭔지 모르겠지만...부캠에서는 짧은 기간이니까 협업 잘 해서 mvp 라도 잘 뽑아내면 성공 아닐까요 저라면 협업 잘 될 것 같은 팀으로 갈 것 같아요
주제는 어디서든 찾으려면 찾을 수있긴하지만 잘하는 사람은 만나기 힘들더라구요
평범도 완전 평범은 아니고 나름 빅데이터 분석, 추천 서비스이긴 합니다 ㅎㅎ... 협업 잘될거같은 팀이라... 감사합니다!!
오... 이말 맞는거같습니다 잘하는 사람 찾기 힘들다
왠지 싸피같은데… 맞나요?
맞습니다 ㅎㅎ
넹 유튜브도 잇고, 무료이면 생코.. 인프런... 유튜뷰드 등등
리덕스 자료는 리액트 자료중에 제일 많은걸로 알고 잇어요
근데 윗분들말씀처럼 결국 직접 해보면서 익히는게 짱이죠
역시 실천이답인군요
css grid Layout 많이 사용하시나요??
ie의 영향으로 본능적으로 안쓰게되더라구요
flex를 더 많이 이용하는것같슴다
해태님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
파일: monads.txt
위 글에 대한 답장입니다!
이모티콘
무이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요~ 리액트 ts 프론트 개발자 무이입니다. 잘부탁드려요!
ie종료됐자나요
관성을 말씀하시는 거 같아요ㅎ
현재 회사에서 레거시 프로젝트를 진행중인데 jquery 기반으로 동적 페이지가 구성되있는데요, 여기서 신기능 추가할 때 ES2022 VanilaJS의 클래스 기반 동적 페이지로 작성하고 있는데 클래스보다 함수형 프로그래밍 방식 클로져로 개발하는게 더 나을까요..? 클래스에 dom을 담아서 this.$dom 이런식으로 사용하고 있는데 this가 동작 안할떄도 있고(클래스 인스턴의 함수를 콜백 넘기고 이럴때요) 이런 이슈가 클로져를 사용하면 해결되나 해서 질문 드려요.
this를 bind 같은걸로 고정시키면 되죵 아니면 화살표함수로 만들어도 되구
바닐라면 클래스 계속 쓰시는게 쉽지않을까싶네요
this쓰려고 화살표 함수로 사용하는 방식을 쓰고 있어용. 근데 이게 또 클래스 상속하게 되면 상속이 안될때가 있어서 헷갈리더라구요;
상속이 안된다고 해야하나.. 뭔가 동작이 꼬였었는데 기억이 안나네요. 부모 클래스에서는 add = () => {} 이거면 상속이 안되고 이런거였거같아요.
그래서 add(){} 이걸로 써야하고
혹시 클래스 상속이 어떤 상황에서 필요하세요??
Modal이라는 부모클래스 UserInfoModal 이 상속받고 이런식이요
Modal 부모 클래스에 show() close() 이런거
클래스마다 중복된 함수가 필요할떄 인서턴스를통한 상속은 메모리의 이점을 가져올수잇으니까요
인스턴스를 통한 상속에 한정인데.. 안그런언어도있어서 필수는아닙니다
아 언데드풀님께 질문하는거셧군요
자바스크립트는 어떠한경우에서도 class안써도됩니다. (주관적)
새로오신 해태님~~ 무이님~~ 모두모두 반갑습니다 어서오세요!! :)
어떠한 경우에서도 class를 안써도 되니깐 class를 syntatic sugar라고 하는건가용?
*syntactic
주관적인 경험에 의한 내용이지만 grid가 조금 더 번잡한 코드를 작성해야 하는데 grid로 되는 코드들 중 대부분은 flex로 가능하기 때문에 레이아웃을 위해서 grid는 잘 안쓰이는 편입니다. grid는 격자형 배치나 반응혈 그리드 시스템 정도에서만 제한적으로 사용하고 있어요
저도 flex정도만 많이씁니다
flex in flex를 많이쓰는거같아요 저는
보통 loop으로 리스트구현하니까 grid가아니라 loop x flex가 되지않나.. 생각해요
원래부터 js에는 전통적인 클래스라는 개념이 없이 프로토타입이라는 방식으로 동작하고 있었어요. 그래서 function A {} A.prototype.method = {} 과 같이 코드를 작성해야 했는데 코드의 가독성이 떨어지고 익숙하지 않은 방식이다 보니 class라는 문법은 새로 추가했지만 결국 기존 형태로 작성하는 것과 같은 거라서 결과적으로 같은 함수코드를 작성하지만 간단한 문법으로 표현한다고 해서 문법설탕으로 불려요. 같은 맥락으로 asyan await Promise가 있습니다
flex 로 할 수 있으면 flex 로 하는데 간혹 "이건 누가봐도 그리드다" 싶을 땐 grid로 합니다!
맞아요 하나의 Array인에 n x m 그리드 형태로 보여야 한다거나 할 경우에만 부분적으로 사용하는 편입니다 flex 기본에 grid 살짝 양념으로다가
일정한 비율만큼 나눠야할땐 grid가 편하긴합니다
솔직히 flex랑 grid는 가로배치가 가능하다는거 빼면 아예 성격이 다른애들이라
비교하는게 이상한거같기도 하네요
ㅋㅋㅋ
이럴때 constructor 에서 this를 _this 나 #this 로 저장하고 그 안에서만 사용할 수 있게 만들면 어떤가요
그게 클로저 활용한거긴한디
결국 콜백 등에서 클래스 함수가 사용될때 this 에 접근이 되야 해서 비슷하게 동작할거같은데 한번 시도해보겠습니당. 답변 감사합니다.
일단 당면한 this binding 문제를 무지성으로 해결하는 방법 중 하나로 다음이 존재하는 것 같습니다 모든 "메소드"는 function 및 this를 활용하여 작성 콜백을 넘길 때는 무조건 `instance.method.bind(instance)`로 넘기기 당장의 문제를 무지성으로 해결하는 거라 좋은 방식인지는 모르겠습니다만 적용하기는 제일 무난할 것 같아서 일단 고려하실 옵션 중 하나로 소개드립니다
화살표함수는 클래스의 메소드로 못쓰지 않나요?
넵 그런걸로 알고있어요 this, argument, super 등 바인딩을 하지않아서 생성자함수로 사용불가능하다라고 알고있습니다
쓸 수는 있는데 제약이 좀 있어요
그
프로토타입에 안들어가는걸로
알고있어요
오 감사합니다
오옹 감사합니다 : >
생성자 함수 쓸때 자식 메서드에서 super가 안써졌던거가 기억나네여
아 써지던가
생성자 함수 -> 화살표 함수;;
맞아요 프로토타입에 안등어가요
그쵸 프로토타입에 안들어가니까 super가 없죠
사진
흠... this.#this에 접근할 때 그렇게 되겠네요
그냥 bind 된걸 넘기는게 낫겠둔영
사진
안녕하세요! 이런 스플릿 뷰에서 사이즈 조절하는 가운데 부분? 을 뭐라고 부르는지 혹시 아시나요~~? 용어를 잘 모르겠어서요!
면접에서 useRef와 useState차이점이 뭐냐는 질문에, useState는 상태를 바꾸고, useRef는 상태를 참조하는것이라고 대답을 했는데 맞을까요??..
가운데 회색바를 view divider 라고 하는데 전체 검정영역도 명칭이 있는지..
저는 신입 개발자입니다 현재 면접 준비를 하면서, 질문 답변을 생각중인데 '개발 진행중, 기획팀이나 디자인팀에서 자주 변경사항이 생긴다면 어떻게 해결할것인가' 라는 질문에 어떤식으로 이야기 하면 좋을까요?
컴포넌트 렌더링을 발생시키냐 아니냐가 가장 큰 차이 아닐까요..?
차이점 그렇게만 말하면 좀 아쉬운 대답인거 같긴합니덩
렌더링을 발생시키는 건 맞는데 useRef는 상태 뿐만 아니라 렌더링과 상관없는 값들을 저장할 수 있습니다..! 그리고 useRef는 useState({current})로 구현되어있어요 useRef.current를 수정해도 useState가 참조하는 객체는 바뀌지 않아서 렌더링을 발생시키지 않습니다
맞아요ㅠㅠ 그때 useRef에 대해서 자세히 알아보지않고 useState만 공부해서..아직까지도 남네요ㅠ
오 감사합니다!!
dom 관련된 값을 저장할 때나 마운트 됐는지 등을 확인 할 때 많이 쓰이고~ ref 값은 바뀌어도 렌더링이 안 되듯이 useEffect 등도 다시 실행이 안되구양
useRef 를 사용해 값을 저장했을 때랑 컴포넌트 밖의 변수에 값을 저장했을 때의 차이도 공부하시면 좋을거 같습니당
클래스 관련 답변들 감사합니다. 많이 도움됐습니다. 🙇♂️
혹시 제가 오독한 거면 알려주세요! 프로토타입 체인을 방문하며 프로퍼티를 찾을 때 화살표 함수로 정의된 프로퍼티도 검색이 되는 것으로 보입니다. 다만 화살표 함수로 정의되었기 때문에, this가 동적으로 바인딩이 되지 않는다는 차이만 존재하는 것으로 보입니다.
사진
아 잠시만요 이 뜻이 아니셨군요
property로 등록? 되어서 프로토타입 체인으로는 검색이 될거에요!
https://github.com/Wavez/react-hooks-lifecycle 이것도 같이 보시면 좋을 것 같습니다
렌더링 로직과는 상관없기 때문에 이전 렌더링의 상태를 저장한다거나 하는 등의 용도로도 많이 사용해요
오 좋은사이트 공유해주셔서 감사합니다!! 👍🏻
역시 코딩은 멘탈인가봅니다..
사수가 없어 헤매기도 했는데
꾸준하게 찾아보고 도전하니까 어떻게든 진행 되가네요..
이전에 함수형 프로그래밍 관련해서 이전에 드림코딩 영상 본 정도라 함수형/객체지향 프로그래밍 관련해서 혹시 읽어보면 좋은 레퍼런스 알 수 있을까요??
아 이런 제가 많이 잘못했네요… 1. "클래스 메소드 정의"와 "함수 타입의 클래스 필드 정의"는 엄연히 다르고 2. AClass에서 메소드를 정의하면 AClass.prototype으로 들어가며 함수 형태의 클래스 필드를 정의하면 AClass 객체로 들어가기 때문에 this 바인딩 이외의 차이가 있다 는 것을 몰라서 제가 오독한 것이었네요. 반성합니다.
함수형 프로그래밍 관련해서는 예전에 테오께서 소개해주시기도 한 "쏙쏙 들어오는 함수형 코딩"이라는 책 좋은 것 같습니다. 그러나 레퍼런스 느낌은 아니에요.
아 혹시 이것도 제가 레퍼런스의 정의를 잘 몰라서 오해하는 것일지도 모르겠어요
글라디이님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
모든 것이 담겨 있는 사전같은 느낌은 아니라는 뜻으로 얘기하였습니다
글라디이님 반갑습니다 ~:)
안녕하세요~ 👋🏻👋🏻
에이 잘못일게 뭐가있어요 이야기하면서 서로 알아가는거죵
맞아요 이 책 좋아요. 그리고 아이러니 하게도 함수형으로 극단적으로 치우치면 또 좋은 코드가 아니라서 ㅋㅋㅋ 이 책에서 추구하는 방향성 정도가 딱인것 같아요. 예제로 JS로 되어 있어서 좋습니다. 함수형 프로그래밍이 이해가 되시면 Rxjs도 같이 한번 봐주시면 좋아요
의견주셔서 감사함니다
안녕하세요 반갑습니다 :)
인프런의 함수형 프로그래밍과 자바스크립트 강의도 좋았어요
@Herb, @유용태 (teo.yu) 읽어봐야겠네요 더불어 RxJS도 살펴보겠습니다 감사합니다
무상님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
째려보는 어피치님 반갑습니다 :)
안녕하세요~
반갑습니다~
어서오세요!! 이곳은 프론트엔드에 대해 궁금한 것들을 물어보고 함께 얘기해보고 대답을 해보면서 함께 성장하고자 하는 곳입니다. 편하게 글 남겨주세요~~
넵! 잘부탁드립니다~
채팅방 관리자가 메시지를 가렸습니다.
해태님을 내보냈습니다.
채팅방 관리자가 메시지를 가렸습니다.
ㅋㅋㅋㅋㅋㅋㅋ 나가랏
뭐였지
ㅋㅋㅋㅋㅋㅋㅋ
혹시.. 단타해볼 생각 있나요? ㅋㅋㅋ 의 주제였습니다
이모티콘
ㅋㅋㅋㅋ
뭔가했습니다
애니스크립트도 도움이 될까요..? 일단 부딪혀보면서 하고는 있는데 잘 안되면 애니스크립트라도 쓰고 있긴하거든요.. 그럴바엔 그냥 자스를 쓰는게 나을까요..?
아니오 도움이 안됩니다. 자바스크립트를 쓰시지요.
E 하십쇼...
옙.. 타입 어렵네요.. 뭔가 막 어렵다보다는 성격이 급하다보니까 뭔가 스스로가 답답한 느낌이랄까요..?
적응되시면 못돌아갑니다
일단 strict 걸어두면
어떻게든 적응하게 되더라구요
타입 없으면 넘나 불편합니다 허허
급하지 않게 제대로 써봐야겠네요..!
졸린꼼님이 들어왔습니다.
안녕하세요. 프론트엔드 시니어 개발자 테오입니다. :) 여기는 개발을 하다가 문득 궁금해진 것들을 서로 물어보고 좋은 것들은 공유 하는 공간입니다. 환영합니다 ♥ 지난 글 지난 링크 보기: https://developer-1px.github.io/teo-yu-frontend/ 디스코드 채널: https://discord.gg/ZCFTMTfGQj
안녕하세요 2년차 프론트개발자입니다! 벨로그 보고 들어왔어요!
감사합니다!!! 어서오세요~ :)
이곳은 프론트엔드에 대해 궁금한 것들을 편하게 물어보고 아는 것들을 대답하고 공유하면서 함께 성장하고자 하는 곳입니다~ 궁금한 주제나 함께 나누고픈 이야기가 있다면 뭐든 글 남겨주세요 ㅎ
그래도 자스보다 자동추론을 바탕으로 해서 IDE성능이 훨씬 더 좋은데다가 야금야금 쉬운것 부터 추가해보세요 ㅎ 일단 열려있다는게 중요하죠 ㅎ
갈수록 쉬워질거에요 지금 타입지정이 어렵죠 ㅋㅋ
하.....
선배님들...
돌아버리겠어요 진짜..
회사에 같은 붙캠 나온 둘이 있는데 친한건 알겠는데 한 놈은 코딩하다가 씨발씨발 상욕을 크게 하고 한 놈은 휘파람을 졸라게 불어요 하루종일..
하…너무 당연한거라 뭐라 말도못하겠고 십선비꼰대 취급당할것같고
헉..
요즘 뭐만 하면 다 꼰대라고 해서 허허
주변 사람한테 피해가 가면 안 하는게 맞죠
뭐만하면 가스라이팅이라고 하고
십선비 취급 받을지언정 저는 얘기하는게 좋다고 봐요
뭐라하는 사람이 없나요?ㅋㅋ
그 친구들 싸움 잘하나요?
회사에서 쌍욕을 크게하는게 당연한게맞나요..욕은가려서해야지
저런 사람들 때문에 제 생산성까지 떨어지면...
당연한 거 얘기하는거니깐 문제될건 없는거 같아요
맞아요
와 회사에서…;;
집중이 안 된다 일하는데 방해된다 조금만 주의해달라고 말하는거 정도는 괜찮지 않을까요
이정도도 꼰대라고하면 ㅋㅋㅋ
꼰대 문제는 아닌거같습니다...할말은 해야할듯싶네요ㅎㅎ
자기들끼린 되게 좋아하는 것 같아서..;웃고 떠들고
저만 불편한가봐요 ..
저런 행동을 하는 사람이라면 뭔 얘기를 해도 꼰대라고 생각할 것 같네요
걱정이되시면 다이렉트로 하지마시고, 윗사람?에게 전달해보세요
허허..
하긴 애초에 본인들 모습 돌아볼줄 알면 저렇게 행동도 안했을것같긴하네요..
형님들 리액트 swiper library 쓰고있는데요 reduxThunk 통해서 세팅값 바꾸는데 제대로 안먹히는데 혹시 이거에대한 해결책 아시는분…?
이래서 좋은사람보다 나쁜사람을 거르는게 면접이라고 개발바닥에서봤습니다
그런 사람 내보내려고 수습기간이 있는건데
붓캠 출신에 잘하고 좋으신 분들도 많은데
저런 분들때문에 이미지가 안 좋아지는 것 같네요
State값은 바뀌는데 그에 따라 swiper ui가 정상적으로 작동하지 않네요
붙캠 혹시 ㅇㅋㄷ인가요 ?
인성은 가르칠수 없으니 붓캠 때문은 아닌거 같아요 그런데 그 두분은 피해줄 수 있는 행동이라고 인지를 못하시는거 같은데 한번 조심스럽게 이야기 해보는게 좋을 것 같아요
ㅇㅋㄷ면 선배님 출동한다고 기다리라고 해주세요
ㅇㅋㄷ이뭐에여
위
아하
우와 근데 저런사람이
실제로있군요
저런게 붓캠출신을 욕먹이진 않을거같네요 저건 진짜 인성문제라 붓캠이랑은 별개 어쨋든 특이한사람 둘이 왔네요;
붙캠출신문제보다는 그냥 사람이 별로인건데
저 전 회사 동료는 회사에서 업무시간중에 절반을 졸면서 보내더라구요,,ㅎ
헐
전데요
어제 술먹었더니....
ㅋㅋㅋ
다들 커밋은 어떤 기준으로나눠서 하고계시나요? 서비스를 처음부터 만들고 있는데 기능하나마다 커밋을 치고 싶지만 기능들이 서로 연결되어있다보니 딱 분리해서 커밋을 남기기가 어렵더라구요. 그래서 자꾸 커밋못하고 로그가 쌓이기도하구요. 여러분들은 어떻게 커밋을 하고 계신지 궁급합니다 !!
배아프네요..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
TDD를 하면 내가 이번 커밋에서 뭘 만들 고 싶은 건지 깨닫는 데에 도움이 됩니다!
매일 그러시진 않잖아요..ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋㅋ
그 친구는 맨날 그렇게 졸더라구요 점심시간만 되면 귀신같이 깨는데
아니 그정도로 존다구요?
네..ㅋㅋㅋ
심각한데요
기면증인줄 알았어요
전회사 동료가 기면증은 있었는데
그래도 할일은 다하더라고요
근데 밥시간되면 초롱초롱 해지는거 보고 병은 아닌갑다 싶었죠
할일만 잘하면 상관없는데 일을 제가 다 떠맡아서 햇엇쥬.,결국 못참고 퇴사하긴햇지만 ㅎㅎ
TDD에 관심을 두곤있는데 서비스런칭기한이 정말 짧아서 시도를 못해보고있었습니다..공부를 해보아야겠어요! 잘 몰라 질문이 엉망일 수 있을것 같은데.. cypress로 ui테스트를 해보려고하는데 cypress ui테스트를 먼저 작성하고 기능을 구현하는것도 TDD랑 비슷한 효과를 낼 수 있을까요?
안녕하세요! 너무 기초적인 질문일 수 있지만;;… 혹시 export const 함수명 = () => {} 이렇게 쓰는거랑 const 함수명 = () => {} 쓰고 아래 export default 함수명; 쓰는거에 대한 차이가 있을까요??
모듈로써 내보내냐 아니냐 차이입니다
export 위치 자체는 차이가 없는데 default 키워드에서 차이가 발생합니당
위에껀 named export고 밑에껀 default export 됩니다
넵넵! 사실 TDD까지 안 가도, "어떤 기능을 구현하겠다" 하고 메모장에다가 써두고 시작하기만 해도 도움이 될 수 있을 거예요
아하 감사합니다. 아직 지식이 부족해서인지 확 와닿지 않아서 알려주신 키워드로 더 찾아봐야겠어요!
말씀해주신대로 기능별로 커밋을 해보아야겠습니다. 답변 감사합니다 :-)!!
Sentry를 사용해서 에러 리포팅을 할 예정인데 좋은 글이 있을까요??
삭제된 메시지입니다.
저는 예전에는 task 단위로 나누려고 노력(?) 하다가.. 말씀하신 것처럼 뭔가 깔끔하게 안떨어지더라구요 ㅠㅠ 최근엔 squash merge 해버려서 세부 커밋은 신경 안쓰고 해용....
넵 계속 삽질해보겠습니다 ㅎㅎ 감사합니다
오…그렇군요 찾아보니 괜찮은것 같아서 함 해봐야겠습니다 !
에구..아무 생각없이 복붙했네요.. 센트리 적용해보려고 찾아던 레퍼런스 공유해드립니다 카카오페이 : https://tech.kakaopay.com/post/frontend-sentry-monitoring/ 라인 : https://engineering.linecorp.com/ko/blog/log-collection-system-sentry-on-premise/ 어반베이스 : https://urbanbase.github.io/dev/2021/03/04/Sentry.html 리디북스_outdate : https://ridicorp.com/story/monitoring-howto/ 이외에 카카오엔터프라이즈, 네이버도 sentry를 사용하고 있다네요 ㅎㅎ 아래는 적용하는 방법입니다 https://velog.io/@klucas/React-%EB%AC%B4%EB%A3%8C%ED%95%9C-%EC%82%B6-17
앗 오늘 아침에 올린 txt파일에 오류가 있는데 수정을 못하네요... 거의 마지막에 ST 가 아니라 State라고 검색해야 할 것 같습니다
중요한 부분은 아닙니다
할일만 다하면