강디너의 개발 일지

HTTP 상태 코드는 웹 서버와 클라이언트 간의 통신 과정에서 클라이언트 요청에 대한 서버의 응답 결과를 전달하는 코드입니다. 이 코드는 HTTP 응답의 일부로 사용되며, 성공, 클라이언트 오류, 서버 오류 등의 여러 상황을 나타낼 수 있습니다. 프론트엔드 팀과 백엔드 팀이 HTTP 상태 코드를 기준으로 특정 상황에 대한 코드 값을 약속하게 된다면 불필요한 커뮤니케이션을 줄일 수 있습니다. 예를 들어 HTTP 상태 코드가 401인 경우 로그인이 필요한 상태라고 약속합니다. 백엔드에서는 인증이 필요한 사용자일 경우 401로 내려주고, 프론트엔드에서는 401 코드만 딱 잡아서 로그인이 필요하다고 사용자에게 보여주거나, 로그인 페이지로 이동시킬 수 있습니다. 백엔드에서 HTTP 상태 코드로 구분시키는 게 아닌..

원본 글: HTML Tips 몰랐던 것들도 있어서 정리합니다. 1. The `loading=lazy` attribute 이미지 태그에 loading=lazy 속성을 넣으면 사용자가 스크롤해서 볼 때 까지 이미지를 호출 하지 않습니다. 웹 사이트의 로딩 시간, 성능 관리 측면에서 매우 좋으며, 페이지 초기 로딩 시 필요한 이미지의 수를 줄일 수 있습니다. 아래 GIF를 보시면 이미지가 보일 때 쯤 로딩하는 것을 볼 수 있습니다. 2. 이메일, 전화, 문자 links Send us an email Call us Send us a message 이메일 보내기, 전화 걸기, 마지막은 문자 보내기 입니다. 3. OL의 `start` 속성. 신기방기합니다 ㅋㅋ.. 쓸일이 있을지.. 4. meter 태그 음.......

서버를 구성하지도, 백엔드 로직을 직접 짜지 않아도 백엔드 개발을 쉽게 도와주는 strapi라는 프레임워크가 있다는 것을 듣고 바로 찾아봤습니다. strapi는 엄청 복잡한 로직이 아니라면 간단한 CRUD는 금방 뚝딱 나와서 백엔드에 시간을 많이 안 쏟아도 되는 장점이 있습니다. strapi 문서에서는 opensource headless CMS라고 하며, 로컬에 띄워서 버튼 몇 번 클릭으로 테이블을 만들 수 있습니다. 튜토리얼 문서 1. 설치 CLI CLI 로 설치하려니깐 무슨... access denied 가 계속 뜨면서 설치가 안돼서 실패했습니다... Node, npm 버전만 맞추면 되는 줄 알았는데 그게 아닌가 봅니다... sudo를 통해서 권한까지 주면서 했는데 실패 ... ! 다른 설치 방법도 ..

자바스크립트에 없던 enum이 타입스크립트에 나왔다. 쓰는 방법도 쉽고, 기능도 간단한데 개인적으로 잘 사용하지 않는다. 굳이 enum이란 애를 써서 나열 하지 않아도 object로 선언해서 사용하는 것이 편하기 때문에 잘 사용하지 않았던 것 같다. 어디에 사용해야 하는지, 왜 좋은건지 잘 감이 안잡혀서 리서치를 했다. TypeScript에서 ENUM을 사용하는 이유는 무엇입니까? TypeScript enum을 사용하는 이유 [Typescript] enum을 써야 할 때, union type을 써야할 때 Typescript Enum이란? 여러가지 enum의 형태 [Typescript] Enums 열거형 interface, type, enum에 관한 글 [TypeScript TIPS] Interface 를..

결론부터 말씀드리자면 '알아두면 좋다'입니다. 디자인 시스템이란 팀이 제품을 개발할 수 있도록 디자인 패턴 및 원칙들을 모아둔 시스템을 뜻하며 UI/UX 가이드라인 또한 포함됩니다. 서비스를 만드는 데 사용한 공통 컬러, 서체, 인터랙션, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해놓은 것이며 불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리한 시스템입니다. 비효율적인 디자인 비용을 줄이기 위해 체계적으로 정리한 시스템 - 딜리셔스 멋쟁이 디자이너님 왜 알아두면 좋은가?? 예전 우아한형제들의 김민태 님께서 디자인 시스템에 대해 발표하신 것 중 배달의 민족 앱에는 많은 화면이 있는데, 그중 사용자가 잘 안 보는 화면이나, 수정이 없는 화면에는 옛날 옛적 UI가 남아있다. 디자인 시스템을 적용하면서 ..

여태까지 구글 애드센스, 라이브리 댓글(광고 포함)을 사용하고 있었는데 포스팅 중간 중간 광고가 너무 나와서 불편+ 거슬리다고 생각해 광고를 다 없애버렸습니다. 윽........한번 들어와서 결국... 구글 상단에 배너 하나 달았습니다 ㅠ 요런거라도 있어야지 글쓰는 맛이 나지 않겠습니까 !!!!! 엄청난 글은 아니지만 공부하고 있는 분야에 대해서 글을 쓰고 있는데, 카페인이 들어가면 더 힘이 날 것 같습니다! 카페인 충전으로 더 고급진 글을 쓰도록 노력하겠습니다 ~~!

javascript 를 이용해서 몇일전, 분, 시간, 일, 년 까지 구하는 함수 토이프로젝트를 하다가 날짜계산을 하고는 싶은데 moment.js는 무겁다고 생각이 들고... 어떻게 만들까아아 고민고민 하다가 회사 프로젝트에서 저희팀 '꼬북'님께서 만든걸 보고 사용 !!! function timeForToday(value) { const today = new Date(); const timeValue = new Date(value); const betweenTime = Math.floor((today.getTime() - timeValue.getTime()) / 1000 / 60); if (betweenTime < 1) return '방금전'; if (betweenTime < 60) { return `${..

1. Use AB Test - 김민영 / 원티드랩 프론트엔드 개발자 원티드랩에서 A/B 테스트에 대해 설명하고 직접 시연했다. 회원가입 전환율 관련 테스트를 진행 A안(원본)은 채용 공고를 보기 전 가입 유도를 하고, B안(대안)은 채용 공고는 일단 보여주고, 유저의 추가적인 액션이 있을 경우 가입 유도. 어떤 것이 회원가입 전환율이 높은가 테스트해서 B 안이 2.5배 높다는 것을 데이터를 통해 얻어서 성공했다는 것을 증명. 사용한 툴로는 Google Optimize Javascript API Google Optimize Javascript API의 설정 페이지 타겟팅 원본과 대안 설정 사용자 타겟팅(로그인 한 사람, 안 한 사람, 사용 기기 등) 트래픽 할당(%) GA 연동 원티드랩의 기술 스펙으로는 ..

* 사진 많음 데이터 주의 * 목차 1. 구글 검색의 작동 원리 2. 2019년 검색에 무슨 일이 있었나 3. 한국에서 SEO로 살아남기 4. 점심 5. 검색엔진이 이해할 수 있는 사이트 만들기 6. 커피타임 7. 디지털 마케팅을 위한 구글 서치 콘솔 8. 구글 검색 자세히 들여다보기 9. 웹사이트 성능 개선 도구 입장할 때 기념품으로 칫솔 세트 + 스티커 + 식권을 받았습니다. 밥 먹고 이 닦고 오라는 큰 그림인가...! 1. 구글 검색의 작동 원리 - 구글 검색팀 이수현 님 구글 검색의 작동 원리를 설명해주시고, 검색 알고리즘의 주요 요소에 대해 설명했다. 또한 구글 검색 엔진은 계속해서 업데이트되고 있으며 1년에 약 60만??(잘 기억이..) 아이디어 중 철저한 테스트를 거쳐서 약 3천 개? 정도의..

딜리셔스에 입사해서 크게 2가지의 업무를 했습니다. 1. 로그인 페이지 만들기 2. 기존 php 프로젝트를 Vue 컨버팅 작업 로그인 페이지 만들기 처음으로 메인으로 맡은 큰 프로젝트였으며 원래 있던 로그인 페이지를 개편하는 작업이었습니다. 기존 로그인 페이지는 정말 로그인 기능만 있었다면, 개편될 로그인 페이지는 딜리셔스 서비스인 신상마켓의 소개가 들어가서 디자이너와 협업이 많이 필요한 프로젝트였습니다. 기획 한분, 디자이너 두 분, 개발 저 한 명이 메인이었으며, 개발만 약 한 달 동안 진행했습니다. 회사에서 처음으로 디자이너분들과 협업해서 헤멘것도 있지만, QA를 같이 하면서 엄청 왔다 갔다 하면서 대화하고 친해지게 된 계기가 됐습니다. 상용 서버에 배포 후 준호님(대표님)이 칼같이 QA를 해주셔서..