입사한지 약 한달이 지났다. 레드오션도 이런 레드오션이 없는 불바다를 어떻게 헤엄쳤는지 모르겠지만, 아직 어정쩡하게 탈출한 계약직 인턴이지만!
입사 후 약 일주일 정도는 개발 셋팅을 설정하고, 회사에서 필요한 정보 들을 받거나 컨벤션을 읽어 회사에서의 개발이 어떻게 이루어지고, 어떤 방향을 지향하는지를 분석했다.
그러는 동안 간단한 업무를 받았는데 원래 기존 클라이언트에서는 이메일을 이미지로 만들어서 보냈었는데, 이번에 다국어 대응- 번역을 위해 html로 이메일을 보내기로 결정이 난 듯 했다. 그래서 그 이메일을 html로 만드는 일을 진행했다.
앞으로 보낼 이메일도 내가 담당해서 할 듯 하다.
그 후 2주 째부터는 회사 홈페이지에 올라갈 회사 포트폴리오를 만들었다. html, css와 js(gsap)을 이용하여 인터랙티브한 웹사이트를 만들었고 장점이자 단점이라면 큰 틀이 있지 않아 디자인만 그대로 하며 애니메이션이나 효과 등은 내 마음대로 만들 수 있었다. 또한 gsap을 혼자 공부하며 개인 프로젝트에서만 사용했었는데, 회사에서 사용해보며 다른 분들의 코드를 확인 비교해보며 나와 크게 다르지는 않아 안심했다.
3주부터는 본격적으로 프로젝트에 투입 되기 위해 퍼블리싱 작업을 맡았다. 주로 회원가입이나 로그인 창 등 사용자 단에서 보여질
페이지를 맡아서 했고, 반응형으로 만들어졌다. 또한 SEO나 HTML 표준화를 위해 코드를 짰다.
아직 인증이나 인가같은 API를 사용 한 것은 아니지만 api리스트를 불러와 화면에 뿌려주는 작업을 진행했다. (사실 선임님 코드가 있길래 그거 다듬은 정도다..ㅎㅎㅎ) 그 외에도 단순하게 화면단에서만 쓸 정도의 JS를 사용했다.
셀렉트 박스 All 선택 시 모두 선택 되거나, 한개씩 해도 All 셀렉트가 선택 되고 선택이 다 돼있다면 다른걸 체크 해제 했을 때 풀리거나 하는 간단한 로직을 구현 했다.
이 때 퍼블리싱 했던 것 중에 공통 모달 레이아웃을 만드는 작업을 하고, 그 안에 컨텐츠를 넣을 모달 컨텐츠를 만들었는데, 아무리 해도 JS 적용이 안되길래 당황하다가 GPT에게 물어보니 js에서 append로 보내 동적으로 생성된 객체는 동작하지 않는다 한다.
평소에 거의 리액트를 사용해서 몰랐는데, 원리를 보고 물어보니 리액트에서는 virtual dom에서 알아차리고 새로 렌더링 하지만 기본 html과 js를 사용한다면 그걸 알 수 없어서 내가 만든 객체와 js가 연결이 안되는 듯 했다. 때문에 두가지의 방법 정도를 사용했다.
첫번째 방법은 모달로 append 할 때 그 다음에 같은 함수에서 내가 원하는 함수를 다시 재호출 하는 방법이 있었다. <이벤트 버블링>을 이용한 방법으로, 원리는 알고 있었지만 이렇게 사용 되리라고는 몰랐어서 새로운 걸 배운 하루였다.
두번째 방법으로는 이벤트를 걸 때 언바인딩(제거) 후 재바인딩하여 중복 호출 되는 것을 막았다. 해당 프로젝트에서는 J-query를 이용하여 프론트 단을 작업했기 때문에 on이벤트를 주기 전에 off를 먼저 주고 다시 호출하여 해결했다.
$(document).off("click").on("click", function (e){
})
4주째가 되니 내가 퍼블리싱 했던 페이지들에 API를 연결했다. 가장 먼저 한 작업은 구독 신청이 가게 하는 post 요청을 먼저 했고, 바보처럼 파라미터 이름을 내가 만든 변수 명을 그대로 해서 값이 안들어갔었다. 그래도 금방 찾았다. 개인 프로젝트를 해본 보람이 났다.
이렇게 써야 하는데
{
key: value
}
이렇게 썼다.
{
변수명: 변수명
}
또 인상 깊었던 거라면, 기존에 디자인이 있는 상태에서 바뀐 것을 만들어 놓은 커스텀 폼을 따라가기 위해 클래스 명이나 css를 신경쓰면서 구조를 다시 짜는게 은근 신경쓰였다. 어려운 것 보다는 다른게 망가질까봐 신경을 많이 썼다.
주의 마지막에는 회원가입 페이지를 진행했는데, 정규식이나 유효성 검사는 개인 프로젝트에서도 해봤어서 크게 어렵지 않았으나, 새롭게 알게 된 것이 있다. 바로 compositon이다.
여기서 쓰기엔 길고 또 한개로 묶기엔 짧은 이런 내용들을 묶어서 올려 볼 생각이다.
남은 11월두 파이팅!