개발자 9Diin의 개발일기

안녕하세요, 저는 이제 걸음마를 뗀 주니어 개발자 'SON7AE'라고 합니다. 사실, 저를 과연 주니어 개발자라고 칭해도 될지 굉장히 부끄럽습니다만, 그래도 나름 제가 하고 있는 일에 자부심을 가지고 있고, 너무나도 재밌게 공부하고 있고, 무엇보다 코딩하는 삶이 너무 좋기 때문에 이하 텍스트에서는 당당하게 개발자라고 칭하도록 하겠습니다. 📌 개발자의 삶은 살게 된 계기? 글쎄요, 처음부터 코딩의 세계에 발을 붙일 생각은 없었습니다. 저는 개발자의 삶을 살기 전까지 제주도에서 5년 동안 자연과 함께 살며, 자유분방한 삶을 살았기 때문이죠. 그리고 저의 전공은 카지노경영입니다. 그냥 관광업 종사자가 되기 위해 제 인생의 5년을 바쳤다고 생각하시면 되겠네요. TMI이지만, 카지노 경영학 전공을 하기 전엔 전자..

📢 최근 Vue.js로 이루어진 웹 애플리케이션을 유지 보수하게 된 업무를 받은 나는 정말 난감했다. 일단 모든 개발이 끝난 상태는 아니었지만, 80% 이상 진행된 상태였고 내가 처음부터 초기 개발자로 투입된 상황이 아니다 보니 어떤 이슈가 터져도 가벼운 이슈가 아니라 꽤 크리티컬 한 이슈였을 경우, 전체 로직을 까 봐야 하는 상황이었기에 여간 난감하지 않을 수 없었다. 그래도 명색에 Vue.js 개발자라고 불리는데 포기할 수 없어 일단 간단하게 해결해볼 수 있는 부분부터 해결해보기로 했다. 📢 내가 직면한 문제는 어떤 화면을 로드했을 때, 백엔드 쪽에서 넘겨주는 api를 재가공하여 초기 기획 상태의 UI처럼 구성하는 것이었다. 그래서 기존의 api는 객체 데이터가 어떤 조건으로 그룹핑되어 내려오는 것이..

📌 What is this? ✅ this 자바스크립트를 사용함에 있어 가장 흔히 사용하는 값 중 하나는 바로 this 가 아닐까? 매번 this를 사용하면서 정확히 this가 무엇인 지에 대해 깊게 고민해본 적은 없었던 것 같다. 단순히 인터넷 강의에서 사용하다 보니 그냥 나도 모르게 익숙하게 사용했던 것 같다. w3Schools.com에서는 this를 이렇게 정의하고 있다. In a method, this refers to the owner object Alone, this refers to the global object In a function, this refers to the global object In a function, in strict mode, this is undefined In a..

안녕하세요, 손재의 파이프라인 블로그 주인장 '손재'입니다. 최근 들어 코로나가 잠잠해지면서(?) 거리두기가 완화되어 저 역시 서울에 살고 있기에 최대한 문화생활을 즐겨보고자 합니다. 그래 봤자 사실 영화관 가서 영화 한 편 때리는 게 고작이긴 하지만 😭 아무튼, 그래서 오늘도 최근에 개봉한 영화 한 편을 보고 왔는데요. 제가 보고 온 영화는 '신비한 동물들과 덤블도어의 비밀'이라는 영화입니다. 제목만 들었을 땐, 혹시 해리포터 시리즈와 어떤 연관이 있는 내용일까 생각했는데, 영화, 만화 등 미디어의 가장 격동기를 겪어온 세대라고 하기 민망할 정도로 저는 해리포터 시리즈를 책은커녕, 영화도 단 한 번도 보지 않았기 때문에 사실 어떤 연관성이 있는지 어떤 내용인지도 모른 채, 배경지식 없이 보고 왔습니다...

최근 Vue.js 와 API 통신을 활용한 간단한 미니 프로젝트를 진행한 적이 있었다. 그리고 공식문서를 활용해보며 Vue.js 라이프사이클 훅을 짧게 살펴봄으로써 우리가 외부 api 데이터를 불러왔을 때, 변경된 자료를 어떻게 화면에 뿌려줄 수 있는 지를 살펴보았다. 또한 미니 프로젝트든, 대형 프로젝트든 상관없이 사용하는 코드는 뷰 개발자라면 Vue에서 제공하는 공식 문서 내용을 토대로 활용해야 하기 때문에 프로그래밍에 정답은 없지만, 기초지식을 쌓고 활용해야 한다는 것에는 모두가 이견이 없을 것이다. 그래서 오늘은 Vue로 만들어보고 있는 미니 프로젝트에서 궁금했던 점을 한 번 살펴보고자 한다. 📌 Vue.js 디렉티브가 뭐야? 디렉티브의 영단어를 살펴보면 Directives이다. 직독 직해해보면 ..

📌 Node.js 설치방법 구글에 Node.js를 검색한다. Node.js 사이트에 접속한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 3. LTS버전과 Current 버전 중 가능한 한 LTS 버전을 설치한다. - LTS 버전 👉 장기적인 지원을 보장받는 버전 - Current 👉 최신 기능을 접할 수 있는 버전 4. VSCode 터미널에서 아래와 같이 코드를 작성하여 버전을 확인한다. node -v 👉 현재 설치되어 있는 node.js 버전 확인 npm -v 👉 현재 사용하고 있는 npm 버전 확인

✅ 웹스퀘어 5 UI/UX 툴은 무엇인지 다룬 포스팅이다. https://sungjaecloud.tistory.com/303 지난 포스팅에 이어 웹스퀘어 5 두 번째 정보를 공유해보고자 한다. 앞서 설명하였지만, 웹스퀘어 5는 Mac OS 즉, 맥에서는 호환이 되지 않는다. M1 반도체 칩을 사용하는 애플 제품은 말할 것도 없고. 그래서 몇 시간 동안 애먹었는데 아마 부트캠프 Boot Camp window을 설치하면 될 지도 모른다고 했는데, 굳이 그렇게까지 사용하고 싶진 않았다. 📌 WebSquare5 설치 웹스퀘어5 사용에 앞서 우리가 해야 할 것은 윈도 기반의 PC를 준비하는 것이다. 윈도우 PC가 준비되었다면, 검색창에 WebSquare5 를 검색하자. 검색을 완료하였다면, 아래 사진과 같이 웹스..

세 달 간의 수습 기간 중 어느덧 두 달이 훌쩍 지나버렸다. 두 달이라는 시간이 훌쩍 지났지만, 수습 기간이기도 하고 마땅히 프로젝트에 투입될 실력이 되지 않아 Vue.js 공부를 주로 하고 있었는데, 팀장님께서 첫 업무를 주셨다. 정확히 말하면 첫 프로젝트에 투입될 것을 알려주셨다고 하는 게 맞을까? 아무튼, 내 첫 프로젝트는 오는 월요일 웹스퀘어 5를 이용한 회사 소개 홈페이지 화면 개발을 하는 것이다. WebSquare5 자바스크립트 프레임워크? 나는 현업에 종사한 지 겨우 두 달 밖에 되지 않은 주니어 개발자이기에 웹스퀘어 5라는 툴은 처음 들어봤다. 구글에 검색해보니 이렇다 할 정보는 없었고, 오히려 좋지 않은 사용후기가 많았다. 연관 검색어에 웹스퀘어 쓰레기 가 있을 정도니 말이다. 뛰어난 개..