맨 땅에 프론트엔드 개발자 되기

Developer Roadmaps Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve. roadmap.sh 프론트엔드 개발자 공부 로드맵

약 6개월 간의 치열한 공부를 마치고 2022년 5월 초, 드디어 개발자로 첫 회사에 온보딩하게 되었다. 3개월 간의 수습 기간도 잘 버텨내서 정규직이 되었다. 그래서 지금 쯤에 나의 과거를 되돌아보고 미래를 계획하는 시간이 필요하다고 생각했다. 내가 개발자로 전직하고자 했던 이유는 개발이 무진장 재밌어서가 아니라 미래에 대한 불안감 때문이었다. 이전에는 패션회사에서 근무했기 때문에 '내가 몇 살까지 이 일을 할 수 있을까'에 대한 불안감, 그리고 여러가지 이유로 일에 보람을 느끼지도 못했다. 그래서 위의 이유들로 인해 이직한 결과 현재의 직업 만족도를 생각해보자면, 50% 정도인 것 같다. 첫 번째 이직 이유였던 불안감에 대해서 얘기해보자면, 개발자가 되어도 불안감은 여전하다는 것이다. 일반 사무직의 ..

오늘 만난 에러는 폼 양식 수정 페이지를 만들면서 마주했다. 폼 양식이 있고, 비동기 API로 기존 정보를 불러와 input 텍스트 타입 안에 defaultValue를 설정하는 것이었다. 당연히 수정이 가능해야 하므로 value로 설정하지 않고, defaultValue로 설정했다. 플로우는 이러하다. useParams로 수정할 아이템의 id 값을 읽어들인다. redux-saga를 이용해 비동기 API에 id 값을 넘겨 기존 정보를 요청한다. redux의 상태 값에 받은 정보를 업데이트 하면 상태가 업데이트 되므로 리렌더링이 일어나 defaultValue 값에 설정해 둔 상태가 리렌더링 되어 기존 정보를 input 값에 보여준다. 이것이 나의 시나리오였다. 그러나 웬걸 defaultValue가 불러와지지 ..

form 태그로 감싸진 양식 안에 button 태그가 있을 경우, 버튼을 클릭하면 자동으로 폼 양식의 submit 이벤트가 발동된다. 이걸 preventDefault 로 막았었는데, 아예 그 버튼이 submit 버튼이 아니라면, 더 깔끔하게 submit 을 방지할 수 있다. 이 버튼은 제출 버튼이 아닙니다. 바로 type 속성에 button 이라고 명시해주면 끝!! 이후 onclick 이벤트를 걸더라도 submit 되지 않고 지정해준 이벤트가 발동된다. 끝!!

최근에 프로젝트를 하면서 웹에서 이미지 파일을 업로드하고 다운로드 할 수 있는 기능들을 만들다보니 Base64와 MIME Type에 대해 많이 접하게 되었다. 한 번 제대로 정리해두면 좋을 것 같아 정리해보려고 한다. Base64 란? - 인코딩 Base64에 대해 알기 전에 먼저 인코딩에 대해 알 필요가 있다. 동영상 인코딩 등 흔하게 접하는 용어지만, 정확히 인코딩이 무엇을 뜻하는 말인지 몰랐다. 컴퓨터가 0과 1의 이진법으로 구성되었다는 것은 컴퓨터 전공자가 아니더라도 한 번 씩은 들어봤던 것 같다. 우리가 컴퓨터 혹은 전자기기로 접하는 모든 이미지, 동영상, 사운드 파일은 0과 1로 이루어진 데이터인데, 모두 컴퓨터가 이해하는 방식으로 인코딩된 것이다. 인코딩 = 컴퓨터가 이해하는 방식으로 바꾸기..

나는 어떤 일을 할 때, 그 일을 왜 하는지가 이해가 되어야 한다. Redux-Saga를 처음 배울 때 비동기를 처리하기 위해 왜 Redux-Saga를 사용할까 이해가 되지 않았다. 컴포넌트 내부에서 비동기 로직을 실행하고 난 뒤에 디스패치를 하면 되는 거 아닌가? 라고 생각했었다. 왜 Redux-Saga를 사용하는가? 디자인 패턴이라고 들어보았는가? 진짜 잘하는 개발자는 소프트웨어 설계부터 비즈니스 로직이 안정적으로 구현되고 가독성 좋은 코드를 짜기 위해 고민한다고 한다. Redux-Saga는 갑자기 어디서 뿅하고 튀어나온 게 아니라 이 디자인 패턴을 고민하다가 나온 결과물이라고 할 수 있다. - Saga 패턴 Saga 패턴에 대한 설명을 찾아보면, "saga 패턴은 분산 애플리케이션의 일관성을 유지하..