프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ Storybook TutorialsLearn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community.storybook.js.org 안녕하세요. 사내 디자인시스템을 만들며 스토리북을 배포할 일이 생겼는데요,공식문서에서도 배포 튜토리얼이 chromatic으로만 소개되어있고, 스토리북배포를 구글링해봐도 대부분의 글이 chromatic을 통한 ..

이상하게 제 노트북은 새로운 프로젝트를 만들 때 마다 권한에러가 나더라고요 폴더 편집권한을 줘도 해결안되는 이상한 이 문제! 아래의 방법으로 깔끔하게 해결됩니다. 1. 아래와 같은 명령어를 입력합니다 sudo mkdir -p node_modules/.cache 2. 그리고 아래의 명령어를 입력하면 ls -ld node_modules/.cache 아래와 같은답변이 올겁니다. drwxr-xr-x 3 username staff 96 Jun 22 10:25 node_modules/.cache 저 username이 root인 경우가 있는데, 그런 경우 읽기의 권한만 있는거라 EACCES 에러가 계속 납니당..! 아래의 명령어를 입력해 권한을 변경 '내이름'의 위치에 자신의 컴퓨터의 username을 확인하여 넣으..

항해99를 수료하고,, 스파르타에서 하는 취업대비반에서 이것저것 도움 받으며 면접준비+이력서첨삭+코딩공부를 하고있다. 면접 예상질문을 받고 답변을 준비하며 거기에 대한 공부를 하는데, 항해를 하는동안은 집중적으로 실전에 필요한 부분만 빠르게 습득하고 적용시키느라 디테일한 것들을 많이 공부하지 못했다. 그래서 지금 하고있는 면접대비 답변정리가 실제로 면접에서도 도움이 되겠지만 무엇보다 전반적인 JS에대한 이해도를 높이고있는 것 같아 좋은 것 같다. 제일 어려웠던 this에 대해 좀 더 작성해보려한다! this바인딩의 예시 -일반함수 호출시 this바인딩 (window객체가 출력됨.) function myFunction() { console.log(this); } myFunction(); // this는 전..

최종프로젝트 발표회가 어제 끝났다 오늘부터 지원주차! 그래서 이력서를 쓰는데.... 아직 내가 배운게 이렇게 적은데 무엇을 적어야하나 막막하다.... 아직 전 걸음마 뗀 감자인데요 ㅠㅠ 두시간 발제+이력서 특강해주고 9시까지 이력서 쓰래서 이력서 후딱 쓰고 앞으로 뭘 할지 고민했다. Type script & Next.js 제일 먼저 공부해야겠다 생각한건 선용매니저님께서 필수라고 하신 타입스크립트였다. 고민중인거 두개

저희 팀의 최종프로젝트 Gnims는 일정관리 웹앱입니다! 초기 기획단계에서 많은 의견이 오고갔던 주제.. 달력을 넣을 것이냐... 현업에 계셨던 디자이너님께서 달력은 정말 공수가 많이 드는 작업이기에 디자이너님과 프론트엔드에서 고통스러울 것이라는 조언을 주셔서 오랜 논의 끝에 datepicker라이브러리를 이용하기로 했습니다! yarn add react-datepicker 로 라이브러리를 설치한 다음, https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com Datepicker 공식사이트에서 여러가지 설정을 할 수 있습니다. 그러나 공식사이트에서도 찾을 수 없었던 몇가지 추가 설정이 있어요..! 우선 제 코..

발생한 문제 Server Sent Event를 이용해 알림받는 페이지를 구현하는 도중, 알림이 도착해서 첫 알림은 화면에 잘 렌더링이 되나, 두번째, 세번째 알림이 올 때 알림이 축적되는 것이 아닌, 첫번째 알림을 새로운 알림이 대체해버리는 문제점을 발견했다. 이용하고있던 해당 코드는 아래와 같다. notifications배열에 새 알림을 첫번째로 가져오고 기존 알림을 spread연산자로 불변성을 유지하며 새 배열을 만들 의도였다. setNotifications([newNotification, ...notifications]) 이 문제점은 useState hook이 비동기적으로 동작하기 때문에 setNotifications 함수가 실행될 때 notifications 배열의 최신 값을 반영하지 않은 것이 ..

서버에서 보내주는 response값을 담은 schedule의 구조, invitees (일정참여자) 구조 다른 코드에 변화가 없음에도 될 때도 있습니다. 다만 새로고침을 하거나 여기에서 다른 코드가 추가되면 이 부분에서 에러가 발생합니다.에러메세지 (invitees의 length를 인식할 수 없는 문제.)invitees가 array형태인데, length를 가져올 수 없다는 것이 이해가 안감.특히 이 부분이 항상 에러가 발생하는게 아니라, 불러오는데 성공할 때가 있고 에러가 생길 때도 있어서 더욱 의아함이 부분에서 에러가 생기는데, 이게 콘솔에도 찍히고return에서도 화면에 잘 그려지다가 새로고침하거나 전혀 상관없는 코드가 추가되고나면 화면이 날아가면서 에러가 뜨니까 error tracking이 안되는 상..

이 에러 밭 무슨 일이죠? 리렌더링이 너무 많이 일어나서 리액트가 자체적으로 infinite loop을 방지하기 위해 렌더링횟수에 제한을 두고있다고합니다. 그래서 화면이 날아가고 보이지 않습니다... 제 멘탈도 하얗게 날아갔습니다... const onParticipantsChangeHandler = (e) => { setParticipants(e.target.value); }; const [participantss, setParticipantss] = useState([]); if (participants.length > 0) { setParticipantss(participants); } 문제의 코드... 리렌더링이 되는 케이스 부모 컴포넌트가 렌더링 된 경우 컴포넌트의 state가 변경된 경우 부모로..