개발하고 싶은 초심자

갈수록 CSE가 한다기 보다는 개발 일지가 되어가는 것 같지만, 확정적인 R&R이 개발 업무이기도 하니, 굳이 분류를 해서 쓸 것까지는 없는 것 같다. 실제 에러 핸들링이나 로그 같은 내용은 또 따로 작성하고 있으니, 괜찮을 것 같다. 오늘은 드롭다운 메뉴 만들기와 더미 데이터를 활용하여 화면에 조회하고, 경로를 수정하여 들어갈 수 있게 만들었다. 코드를 작성할 수록 자바스크립트와 라이브러리의 짬뽕(?) 수준이 되어가는 것 같고, 코드도 너무 길어 지저분해보이지만 어쨌든 눈에 어떤 것인지 정도는 보이니 다행이라고 해야할까... 현업에서 사용해야하는 것이고, 그렇기에 시간이 매우 촉박하다는 것 외에는 프로젝트를 진행하는 것 같다. 프로젝트는 상업용을 생각하고 만드는 결과물이고, 그것이 내 포트폴리오에 들어..

(22.09.28 ~ 22.10.06) 1. mui(material ui)가 설치되지 않는 에러 react-create-app을 선행할 때 리액트 버전이 18로 설치가 되며, material ui는 16 버전부터 적용 가능하다. → 해결책 npm install --save react@^17.0.2 react-dom@17.0.2 // react, react-dom 버전 낮추기 npm install @material-ui/core --legacy-peer-deps // --legacy-peer-deps 옵션으로 설치 npm install @mui/icons-material --legacy-peer-deps 혹은 npm install @material-ui/core --force // --force 옵션으로 ..

프로젝트 퍼널 내의 엔지니어들이 사용할 수 있는 노션 페이지 사용 방법을 듣기 위한 스몰톡을 진행했다. 계속해서 여기 저기 들어가봐야하고, 익숙해져야하는 것이 많아지는 것에 약간 어지럽기도 하지만, 이 부분은 사용하다보면 익숙해질 것이기 때문에 괜찮다. 다만 스몰톡 진행 이유는 만든 엔지니어 분의 의도와 대략적인 방법을 들으며 보다 더 효율적으로 사용하기 위함이다. 점심시간 이후에 타 팀의 신입 분과 함께 커피타임을 가졌다. 빠른 시일 내에 얼라인해야 할 팀이었기 때문에, 매우 유용한 시간이었다. 사실, 커피타임을 가지는 것은 누가 됐든 항상 소중하고 좋은 시간이다. 커피타임으로 인해 힐링을 하기도 하고, 내가 잘 알지 못하는 업무에 대한 이야기를 들을 수 있는 기회이기 때문이다. 커피타임 이후 리액트 ..

(reference) 특정 페이지에서 header/footer를 보이지 않게 하고 싶은데, 어떻게 해야할까 고민하다가 구글링을 해본 결과 정말 간단하게 할 수 있는 팁이 있어 공유하여 정리해봤다. const Header = () => { ... if(window.location.pathname === '/header를 숨기고 싶은 경로') return null; return ( ... ) } const Footer = () => { ... if(window.location.pathname === '/footer를 숨기고 싶은 경로') return null; return ( ... ) } 제일 첫 페이지에 header/footer를 숨기고 싶다면 '/' , 특정 페이지에 숨기고 싶다면 그 경로를 적어주면 ..

개발 도메인에서 필요한 기능을 구현하고, 오후 시간에는 회의가 주를 이루었다.그 시간 안에서 어제 하지 못했던 정기회의 시간이 있었고, 개발 일정이 생각보다 많이 늦춰지게 되었다.확실히 내가 생각하지 못했던 부분을 현업에서 생각하려다보니, 생각보다 많은 부담감이 생겼다.부담감으로 인해 포기하고 싶어지는 것은 아니지만, 그래도 달팽이보다 더 느린 개발 속도와 실력에 대한 부족함에 조금씩 힘들어지고 있다.이 상황에 대한 원인은 확실히 프론트엔드 개발에 대한 실력과 경험 부재인 것 같다. 프론트엔드에서 요청을 보내면 응답을 어떻게 보내줄 지에 대해서만 생각해왔다 보니, 정작 요청을 어떻게 보내줄지에 대해서는 깊게 생각해본 적이 없는 것 같다. 수강생 시절에도 항상 프론트엔드에서 요청을 보내는 부분에 취약했는데..

1. 체크박스 구현 1) 체크박스를 선택하면 해당하는 값이 체크됨 2) 해제하면 해당 값을 삭제하는 것처럼 보이게 하기 2. 카테고리 1) 카테고리 지정이 아예 되어있지 않을 때는 '지정해주세요' 등의 메시지를 출력시키기 → 지정 여부에 따른 조건부 렌더링 작성? 3. 구현 과정 1) 체크박스의 내용에 대한 리스팅을 위한 상수 데이터 만들기 (배열 형태로 / 데이터 내용은 임의로 만듦) ‣ 실제 데이터를 이 내용으로 사용하지는 않았지만, 글 정리를 위해 내용을 바꿈. const category = [ {id: 0, data: 'a'}, {id: 1, data: 'b'}, ]; 2) 상수 데이터는 렌더링 될 때마다 불러올 필요 없으니 함수 바깥으로 빼기 const category = [ {id: 0, da..

k-디기역 컨텐츠 피드백을 마무리했다. 강의를 보면서 내가 이렇게 설명할 수 있을까 하는 생각이 들었다. 머리속으로 알고 기능을 작성하는 것과 그것을 다른 사람들이 이해하기 쉽게 설명할 수 있는 것은 정말 다른 영역인 것을 수강생일 때도 느끼고 있었기 때문에 더 그런 생각이 들었다. 컨텐츠 리뷰 업무로 DOM과 리액트를 다시 간단하게나마 학습할 수 있어 머리속에 제대로 정리되지 않았던 부분들을 정리할 수 있었다. 개발과 학습을 병행하며 업무를 진행하느라 정신이 없지만, 질문에 답변을 달았다. 질문 내용은 json-server 라이브러리 설치 에러 메시지 발생 원인과 해결 방법이었다. 보통 permission denied의 경우에는 package.json과 node_modules를 지우고 다시 재설치하는 ..

오전에는 AWS 온라인 컨퍼런스 강의 시청 일정이 있었다. 사실 개발 일정이 촉박하여 제대로 내용을 숙지하면서 시청을 하지는 못했다. 다행히 따로 vod를 사이트에서 제공해주니, 주말을 이용하거나 1차 개발 일정을 마친 후에 시청해야겠다. 점심시간 이후를 활용하여 K-디기역 리액트 콘텐츠 리뷰를 했다. 디기역 관련 컨텐츠가 4개인 줄 알고 하루에 하나씩 4일을 일정으로 잡았는데, 알고 보니 5개여서 오늘 할 수 있는 분량으로 2개를 리뷰했다. 확실히 리액트의 꽃이면서 제일 어려운 부분은 state&props 인 듯 하다. 이제는 다시 들으면 어느 정도 이해를 할 수 있지만, 다시 수강생 시절로 돌아간다면 여전히 헷갈리고 고민해야 하는 부분이다. 리뷰를 하면서 더 절실히 느낄 수 있었고, 그래서 더 공부를..