사진 찍는 개발자의 365일

최근 이직을 준비하면서 근 2년 만에 기술 면접에 대해 다시 공부하기 시작했다. 인터넷에 나와있는 것들을 바탕으로 실제로 내가 본 면접에서의 기술 문제도 같이 넣을 예정이다. 아마 면접은 계속 볼 것이니 기술 면접 관련해서는 계속해서 추가되지 않을까 싶다. 주로 사용한 라이브러리는? 라이브러리는 React를 사용하고 있습니다. SPA 개발에서 많이 사용되고, 데이터 변경에 따라 특정 컴포넌트만 효율적으로 갱신한다는 특징이 있습니다. 또한 커뮤니티가 크게 발달해있어, 개발 중 생기는 문제점에 대해 의견을 나눌 개발자들이 많은 것도 장점입니다. 템플릿 방식으로 관리하는 Vue와는 달리, JSX, TSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태를 변화시키지 않고 관리합니다. 또한 코어 기능 이외의 편의 기능..

최근에 과제를 하면서 새로운 경험을 하게 되어 이를 글로 정리해놓으려고 한다. 과제에는 목업용 json 파일이 포함되어 있었고, 이를 활용해 화면에 data를 뿌려줘야 했었다. 어떤 방식을 쓸까 고민하던 와중, 동료 개발자가 이전에 MSW를 활용하여 백엔드 api가 없는 상황에서 개발을 하던 것이 생각나서 이를 사용해보기로 결정했다. MSW 라이브러리 설치 $ npm install --D msw 위의 커맨드로 msw를 설치해준다 MSW 기본 세팅 $ npx msw init public/ 해당 명령어를 통해 기반 코드를 자동으로 생성할 수 있다. 여기서 public/은 정적 리소스 코드를 넣어두는 폴더로, Create React App이나 Next, Vue를 활용하면 자동으로 생성되는데 이를 바로 활용할 ..

회사를 옮기면서 Vue에서 리액트를 한지 반년이 지났다. 블로그도 그만큼 방치되어있었는데, 신기하게도 Vue 관련 게시글이 내 블로그에서는 최고의 조회수를 자랑하고 있다 처음 시작했던 것은 노마드 코더의 리액트 강의를 보고 시작했는데, 어찌저찌하다보니 지금은 리액트로 백오피스를 끝내고 (정말 어쩌다보니) next.js + react native로 어플리케이션까지 진행 중이다. 그래서 오늘부터는 조금씩 리액트를 하면서 써왔던 기술들에 대해서 복기 겸 정리해놓을 생각이다. 그리고 그 첫 타자는 react-hook-form 우리는 프로젝트들을 진행하며 수 많은 필드들을 다루게 된다. 입력필드만 하더라도 회원가입 정보, 댓글, 게시판 등 수 많은 곳에 사용이 되는데, 이를 useState 하나 없이 사용 가능하..

프로젝트를 진행하던 중, 우리가 알고 있는 식상한 기본 스크롤이 아닌, 마음대로 스타일링이 가능한 스크롤을 제작하게될 일이 생겼다. 스크롤에는 대표적인 라이브러리에는 perfect-scrollbar, vuescroll 정도가 있을 것 같고, 뷰 전용 라이브러리가 아닌 자바스크립트 라이브러리로는 iscroll 도 모멘텀스크롤을 위해 자주 사용하는 것 같았다. 여러 라이브러리들을 갖다 붙여봤지만 우리가 사용하는 vue는 vue 3였고... 대부분 뷰 전용 라이브러리들이 vue 2에 모여있는데... 우리는 vue 3를 사용하고 있었기에 마땅한 스크롤바를 찾을만한게 없었다. (제발 vue2 꾸준히 업데이트해줘요...) 아무튼 결국 스크롤을 내가 따로 만들게 되었다. 거두절미하고 대략적인 모습은 이렇게 생겼다. ..

v-if는 참 편리한 녀석이다. boolean 값에 따라 html 요소들이 동작하는 방향을 결정할 수 있다보니, 컴포넌트를 표시할 때에도 쓰이고, 각종 로직에 쓰인다. 나는 아직 경험이 많지 않다보니, v-if를 통해 보여지는 컴포넌트를 결정하는 로직을 많이 짰다. 하지만 오늘 드디어 일이 났다. 싱글 컴포넌트 라이브러리를 제작하게 되면서, v-if를 사용하는 부분에서 오류가 났다. 아래는 문제의 해당 코드이다. Process.vue 위와 같이, async & await를 통해 store에 있는 GETSTATUS를 실행시켜 axios로 데이터를 받아오고, 해당 status 값이 done 이면 상위 컴포넌트인 Process.vue로 이벤트를 보내 보여지는 화면이 바뀌도록 하고 싶었다. 하지만... 내 눈에..

프로그래밍을 하다보면 배열을 만나게된다. 진짜... 처음 보았을 땐 죽여버리고 싶을 정도로 짜증나는 녀석이었는데, 쓰다보니까 이 친구가 없었으면 어쨌을까 싶은 고마운 친구였다. 아무튼 이 배열이란건 프로그래밍을 하게 되면 어쨋든 배워야 되는 녀석인데, 오늘은 이 배열을 편하게 나열해주는 v-for에 대해서 이야기 해 보겠다. 그 동안 배열의 나열은 내가 배웠던 자바를 기준으로 이야기하자면 ArrayList list = new ArrayList(); for(int i=0; i

우리가 자주 보는 ui중, 업로드 중에 몇 퍼센트가 업로드가 되었는지 확인할 수 있는 ui가 있다. 진행바라고도 하는데, 해당 부분을 하기 위해 부단히도 노력했다. 처음에는 통신API를 따로 폴더를 만들어서 관리했었다. 하지만 통신 API를 따로 만들어 둘 경우, onUploadProgress에서 퍼센트를 가져와서 값을 바인딩하는 과정에서 문제가 생겼다. 아마 api폴더의 index.js로 가면서 컨텍스트가 사라져 버려서 그런게 아닐까하는 생각이 있는데, 아무튼 그래서 전전긍긍하다가 api를 전부 vuex의 store로 옮기기로 했다. 이게 사이즈가 큰 프로젝트라면 다른 방법을 찾아봐야겠지만, 우선 통신관련 api는 3개 밖에 없었기에, api를 store의 actions에서 관리하고, 진행도인 퍼센트를..

데이터를 전송하는 일은 많다. 컴포넌트 단에서 바인딩할수도있고, 이벤트로 올리고 프롭스로 받을 수도 있다. 하지만 컴포넌트 간에서 바인딩하고 프롭스를 쓰는 것은 vuex를 쓰면 아주아주 손쉽게 사용할 수 있게되고, 내가 겪은 부분은 API를 통해 데이터를 보내는 부분이었다. Title Authors Add {{ item.author }} Publisher Cover Add Pages Add Submit Clear 대충 이렇게 form 태그 안에 인풋 태그를 덕지덕지 바르고 css로 양념을 쳐놨다. 오늘 볼 부분은 file부분이니 file 태그를 설명하자면, 우선 text타입의 input을 넣어 disabled로 설정 해놓고, 실제로 file버튼은 보이지 않게 css를 변경해놓았다. file은 오직 but..

입사 후 열심히 교육과정을 하다가 이번달 말 부터 바빠질 것 같아 바로 업무에 투입이 되었다. 내가 해야할 일은 책에 대한 정보(제목, 저자, 출판사 등)와 커버 이미지, 페이지 스캔 이미지를 넣으면 자동으로 epub 전자책 파일로 변환할 수 있는 사이트를 만드는 것이었다. 여차저차 이틀만에 만들기는 했지만 참... 뭔가 깔끔하지 않은건 알겠는데 잘 돌아가서 신기한 느낌이다. 아무튼 각설하고, 오늘 겪은 것 중, setInterval에 대해 이야기를 해보자 setInterval은 일정 시간을 간격으로 지정한 함수나 코드를 반복해주는 기능이다. 기본적인 형태는 이러하다 setInterval(() => { ... }, 1000); //여기서 1000은 1000ms로, 1초를 의미한다. //1.5초를 하고 싶..

요즘 계속해서 일이 끝난 후 한~두시간씩 캡틴판교님의 강의를 보면서 vue.js를 익히고 있다. 비동기 처리, Promise, this 등 자바하고는 다른 개념이 많아서 처음엔 이해 안가는 부분들이 많았는데 듣다보니 이해가 되는 부분들이 생기는게 신기하다. 우선 이 글은 캡틴판교님의 인프런 강의 'Vue.js 완벽 가이드'를 참고로 했다. 사용하는 코드들도 해당 코드들이고, 티스토리에 따로 적는 이유는 단순히 보고 따라치는게 아니라 내가 제대로 이해한 것이 맞는지 확인할 겸 해서 올리는 것이다. 현재까지 진행된 상황은 이렇다. 클릭시 페이지가 바뀌도록 하기 위해 router를 설치, routes 폴더의 index.js를 통해 각 패스를 통해 어떤 컴포넌트를 호출할지를 정의했다. routes/index.j..