뭘 배웠지?

안전한 이메일 템플릿 만들며 배운 점 이메일 UI를 바꾸기 위해 자주 사용하는 태그와 CSS 스타일을 사용해서 변경 했는데, 스타일이 전부 깨져서 나오는 것을 확인했습니다. 이 글은 수 많은 이메일 클라이언트에서 깨지지 않는 ‘안전한 이메일 템플릿’을 만들기 위해 작성했습니다. 시작 전 인상 깊었던 말 여러 러페런스를 찾아보다가 인상 깊은 문단이 있었습니다. "웹 개발에 익숙하다면, 알고 있는 것을 전부 잊어라. 가장 큰 장애물은 '보통' 웹 개발처럼 작동한다고 예상하는 것이다." If you are already familiar with web development, forget everything you know about it. The single biggest obstacle to you is ..

앤트 디자인(Ant Design) 사용하며 배운 점 Ant Design 커스터마이징이 왜 필요하지? 리액트를 위한 UI 라이브러리인 앤트 디자인에서, 이미 여러 디자인을 위한 컴포넌트 라이브러리를 제공하지만 원하는 요구 사항을 지원하지 않는 경우도 있다 예를 들면 Select 컴포넌트 경우 border-radius를 변경할 수 없다 테마를 커스터마이징도 있다고 공식 홈페이지에서 말하지만 복잡해 보인다 원하는 것은 그저 Select에 border-radius를 주고 싶을 뿐! 구원자 Styled Components 스타일드 컴포넌트(Styled Componets)와 함께라면 할 수 있다! 간단히 말해 컴포넌트를 CSS에 붙이는 것이고, 대표적으로 emotion 혹은 styled-component가 있다. ..

일지 2022년 7월 5주차 이번주는? 3D 게임 만들기 테스트 코드 3D 게임을 만들자 이번에도 JS13kb에 참가한다. 주말 프로젝트가 될 것이고, 3D 게임을 도전한다. 이번 대회에서 해보고 싶은 것들은 이렇다 작년까지 목표는 결과물을 만드는 것이었다면, 이번에는 티셔츠를 받는 것이 목표 - 3D 스무스 렌더링 - webpack 초기 설정 - 저용량 3D 게임 엔진 사용 중요한 것은 부드러운 움직임! 테스트 코드 현재 맡는 프로젝트가 TDD 방식으로 만들어졌다고 한다 거의 모든 컴포넌트, 페이지, 파일에 테스트 코드가 작성되어 있고, 테스트 커버리지도 70으로 되어있다(이 밑으로 내려가면 빌드 안된다) 요구사항에 맞춰서, 기능 기능 추가/변경을 하는데 시간을 쓰고, 그에 따라 바뀌는 테스트 코드를 ..

JavaScript로 간단한 3D 게임을 만들며 배운 점 'JavaScript로 3D 게임을 만들어보자'는? js13KGames에 참가하며 기록합니다 js13KGames는 JavaScript로 13kb 이하의 게임을 만드는 대회입니다. Theme 발표를 기준으로 한 달 뒤에 종료됩니다. 3번째 참가고, 이번에는 간단한 3D 게임을 만들 예정입니다. 갓 취업한 웹 프론트엔드 개발자로 주로 주말에만 작업합니다 현재 상황은 테마 발표까지 2주가 남았고, 어떤 게임을 만들지 기획하고 있습니다. 주말 프로젝트이고 한 달 안에 만들어야 하기에, 찾아본 게임 기획중에서 꼭 필요한 사항이라는 것들을 정리해보고 있습니다. 간단한 게임 기획 테마 발표 전 -> '프로토타입' 기간, 테마 발표 후 -> '프로덕션' 기간으로..

일지 2022년 7월 4주차 입사한지 4주차 모르는 것도 많고, 혼자 할 수 있는게 많지 않아서 퇴근하면서도 찝찝한 느낌이 있다. 마치 축구하러 가서 땀도 안흘리고 온 듯한 느낌 매일 조금씩 기업에 대해, 팀원 그리고 같이 일하는 방법을 알다보니, 이제는 담당 프로젝트도 생겼고, 서브 프로젝트도 생겼다 여기서도 알아야할 것들이 많고, 물어볼 것도 많지만, 코드를 작성하고 주체적으로 생각할 것이 생겼고, 백엔드, 디자인, PM 등 다른 팀원과 콜라보 할 수 있다는 것에 기쁘다. 박제 시키는 as const 타입스크립트 코드를 보다가 'as const'라는 것을 봤다 const라고 하니까 추측한 것은 값을 변하지 못하게 하는 건가? 했는데 그런 개념이었다 객체의 프로퍼티나 배열의 요소를 박제시키는 거다 만약..

일지 2022년 7월 3주차 이번주 키워드 1. AWS 2. Dependencies 최신화 3. JS13K - 회의 및 webpack 작성 - 세미나 주제 결정 .toBe와 .toEqual 다른 점 .toEqual은 값만 비교 .toBe는 원시 값 혹은 객체 인스턴스의 referential identity(참조 신분?)을 비교한다 즉 deep copy가 된 배열, 객체는 toEqual에서는 같지만, toBe에서는 다르다 파일 무효화 CDN 최신화를 위해 AWS 사용 CI는 자동화가 되어있고, CD는 수동으로 하는 프로젝트가 있고, CD가 될 때 CDN에 최신 리소스로 자동으로 교체되게 하고 싶다 CloundFront에서 CDN의 캐시를 최신화 시켜주는 작업을 Invalidation(무효화)라고 부르는 듯..

일지 2022년 7월 2주차 이번주 목표 조금 더 정돈된 한 주를 갖자!! 첫 프로젝트 분해 및 파악 npm 버전 기존 프로젝트를 fork -> clone하고 npm install로 dependecies를 받으려고 했다 하지만 시작부터 안됐다 npm install 대신 --legacy-peer-deps를 사용해서 실행까지 되지만 여전히 error가 나오는 상황 dependencies 란? 프로젝트에 필요한 모든 패키지를 버전 넘버와 함께 가지고 있다. 어떤 라이브러리를 설치하면 dependencies object 속에 들어가 있는 것 devDependencies 란? 위의 보통 depencies란 같은 개념으로 설치된 라이브러리 등의 버전과 적어두고 있지만, 개발시에만 필요한 라이브러리 등을 여기에 넣어..

일지 2022년 7월 1주차 이번주 키워드 첫 출근, 맥북 적응, 첫 프로젝트 Day 01 출근 첫 날은 전 직원들에게 화상으로 소개를 했고, 채용팀과 몇 시간 회사에 대해 설명을 듣고 이야기를 나눴다. 개발팀과 이야기도 나누고 업무가 주어지기 전에 읽어봐야 할 것들이 많이 생겼다. 이메일, 출입키, 일정 보는 법, 소통 하는 법 등 다양한 정보를 전달받았다. 아무래도 한 번에 소화시키기는 무리가 있어 보이고, 하면서 차차 적응해야지. 퇴근 시간에 가까워 질 때 마침내 IDE(VSCode)를 받았고, 확장을 설치했다. 코드 작성은 하지 않았고, 다른 사람의 코드를 잠깐 봤다. 일주일, 한 달, 6개월, 1년 ... 적응을 해나가면서 일하기 편리한 공간으로 바꿔나가자 성장을 위한 일을 찾아서 하고, 잘 정..

Git Clone과 Fork을 하며 배운 내용 Clone과 Fork 뭐가 다를까? 기본적으로 둘 다 복사하는 목적으로 사용한다. 다른 점은 Fork는 내 GitHub 계정으로 다른 레포를 가져올 때 사용하고, Clone는 내 레포 혹은 타인 레포를 내 로컬에 복사할 때 사용한다(Git이 도와준다) 기본적으로 Cloning 전에 Forking을 하지만, 꼭 지켜지지 않는다고 한다. Fork Fork된 레포, 즉 내 계정에 복사된 레포는 Pull Request를 통해서 머지될 수 있다. PR(Pull request)란? 레포 주인한테 이렇게 요청하는 것 "내가 수정했는데, 이 수정된 부분을 너 레포로 머지 좀 해줄래?" 사실 PR이 존재하는 이유도 굉장히 지당하다. 안 그러면 타인의 레포를 마음껏 바꿀 수 ..

일지 2022년 6월 4주차 이번 주 스케쥴 주중에 여행을 갔다 올 계획이라 이번주 할 일은 오직 한 가지! 기본 프로젝트 'Google Search Pro' -> TypeScript로 변환 기존 리액트 JS 프로젝트 TS로 변환 기존 리액트 프로젝트에 TypeScript를 추가하고 npm install --save typescript @types/node @types/react @types/react-dom @types/jest tsconfig가 자동으로 생기지 않아서 따로 설치해주고 npx tsc --init js/jsx 를 ts/tsx를 바꾸고 에러가 시키는대로 하나씩 처리해가니 완성! 바꾸면서 id를 number로 할지, string으로 할지 정했어야 했는데, 여기서 기본 타입들을 보고 strin..