code를 헤엄치는 인어공쭈

https://angular-maps.com/ Angular Google Maps Components angular-maps.com위에서 많은 참고 바람 네이버 지도를 사용하다가 해외 지도가 필요해서 구글맵도 사용하게되었다.네이버 지도 사용방법은 다음시간에 한번 다뤄보겠다. 네이버 지도는 해외 지도를 제공안한다고 한다. 처음엔 뭔가 되는것 같아 보였는데 버그가 하도 많아서 됐다 안됐다 하는거 보고 찾아보고 문의도 해보니깐 지원을 안한다는 날벼락 같은 소리..! 왜 그걸 못봤지...  구글맵은 이전에도 사용해본 경험이 있어서 적용하는데 크게 어렵진 않았다. 사실 apiKey 만 발급받으면 거의 끝!https://developers.google.com/maps/documentation/javascript/g..

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위에서 많은 참고 바람 이번에 내가 프로젝트에서 사용한 방법은 가장 나에게 익숙한 CDN link 삽입 방법으로 진행했다.install 하는건 버전 때문에 웬만하면 거부감이 드는 맘..위에 사이트에 친절하게 다 나와있긴한데 DOCS 에 대한 부담이 있을수 있으니 간단히 사용법 부터 설명해보겠다. 사용법1) Use Swiper from CDN (주로 index.h..

문제설명)코니는 각 종류별로 최대 1가지 의상만 착용할 수 있습니다. 예를 들어 위 예시의 경우 동그란 안경과 검정 선글라스를 동시에 착용할 수는 없습니다.착용한 의상의 일부가 겹치더라도, 다른 의상이 겹치지 않거나, 혹은 의상을 추가로 더 착용한 경우에는 서로 다른 방법으로 옷을 착용한 것으로 계산합니다.코니는 하루에 최소 한 개의 의상은 입습니다. 문제풀이)저번에 풀었던 문제와 비슷하게 느껴져서 map.set 을 사용하면 좋을거 같다고 생각이 들었다.데이터를 처음에 맵에 넣어두고 이렇게 저렇게 다양한 시도를 해본 끝에 탄생먼저 데이터를 담을 맵을 생성옷갯수대로 포문을 돌리고 카테고리 중복 체크를 하기위해 +1 를 더한다그럼 맵안에 {옷 : 2, 모자 :1} 이런식으로 세팅이 된다따라서 맵을 다시 포문..

최근에 이커머스 면접을 보게 되었다. 어딘지는 비밀이지만 60명 규모의 10년차이상된 나름 탄탄한 기업이었다. 작년에도 한두번 면접 본적이 있는데 크게 다르지 않았다. 면접 보다 보면 다 거기서 거기임. 그래서 몇번 해보면 감 잡을듯? 참고로 본인은 N년차 경력직 고인물임. 1. 1분 자기 소개(필수) 이건 안하는곳이 없는듯? 자연스럽게 1분 안쪽으로 얘기해라 1분 가까이 하거나 넘지말것 루즈해짐 노잼임 자기의 강점과 경험 경력 위주로 설명하는게 좋음. 2. 최근에 해결한 기술적인 문제 경력직이면 무조건임, 이것도 안하는곳 딱 1군데봄. 기술적으로 해결한거 두가지정도 준비해가면 좋을듯? 어줍잖은거 얘기하지말기! (ex. 버그해결 같은거 그건 당연하거임) 3. 호이스팅과 const, let var 기술면접..

메타 태그에서 og:description과 description은 각각 Open Graph 프로토콜과 일반적인 웹 페이지 메타 데이터에 사용되는 태그들이다. 예시를 통해서 한번 알아보자 이거 제대로 작성안해서 네이버 검색엔진에서 빠꾸당한 기억이... og:description 만 적고 아 설명 적었지 하면서 name: description은 안적은 것이다. 그래도 바로 체크해서 반영했다. (바보같았던 그날...) 1) og:description (Open Graph Protocol) 목적: 주로 소셜 미디어 플랫폼에서 공유될 때 사용되는 메타 데이터를 정의한다. 활용: 페이스북, 트위터 등 소셜 미디어에서 링크를 공유할 때 미리보기에 표시되는 설명을 제공. 예시 2) description (일반적인 메타..

방법론 비교와 장단점 1. DevOps (Development + Operations) DevOps는 소프트웨어 개발과 IT 운영 간의 협력과 자동화를 강조하는 문화, 철학, 방법론입니다. 개발과 운영 간의 경계를 허물고 지속적인 통합, 배포, 자동화 등을 통해 소프트웨어 제공 과정을 최적화하는 것이 목표. 장점) 빠른 제공: 지속적인 통합과 배포를 통해 빠른 제품 출시 가능. 안정성 향상: 자동화된 테스트와 배포로 안정성을 유지. 단점) 문화 변화 필요: 조직 내에서 협력과 자동화에 대한 새로운 문화를 수용해야 함. 기술적 도전: 기존 시스템과의 통합이나 기술적인 도전에 대한 대응이 필요. 예시) Jenkins, GitLab CI/CD 등의 도구를 활용하여 지속적 통합 및 배포 파이프라인을 구성. In..

Cypress 소개 Cypress는 강력한 엔드 투 엔드(E2E) 테스트 도구로, 사용자 경험을 시뮬레이트하고 테스트하는 데 특히 용이합니다. 다양한 기능과 직관적인 사용자 인터페이스로 프론트엔드 테스트를 쉽게 작성하고 유지보수할 수 있습니다. npm install --save-dev cypress 테스트 작성 // 예시 테스트 파일 (cypress/integration/sample.spec.js) describe('테스트 예제', () => { it('홈페이지 방문', () => { cy.visit('/'); cy.contains('환영합니다!'); // 페이지에 '환영합니다!' 텍스트가 있는지 확인 }); it('로그인', () => { cy.visit('/login'); cy.get('input[n..

* 원시값이란? 불변한값 원시값의 종류 1. 문자열(string) 2. 숫자(number) 3. 불리언(Boolean) 4. null과 undefined *객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조 let person = { name: "John", age: 30, city: "New York" }; *깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) 1. 깊은 복사(Deep Copy) 원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법 // 깊은 복사 예제 let originalObject = { name: "John", address: { city: "New York" } }; let deepCopyObject = JSON..

구글 계정 로그인을 구현하는 방법 https://console.cloud.google.com/getting-started Google Cloud console console.cloud.google.com 1. 구글 개발자 콘솔에서 프로젝트 생성하기 먼저 구글 개발자 콘솔에서 새로운 프로젝트를 생성. 구글 개발자 콘솔에 접속한 후, 새 프로젝트를 생성하고 API 및 서비스를 활성화 2. OAuth 2.0 클라이언트 ID 생성하기 구글 개발자 콘솔에서 OAuth 2.0 클라이언트 ID를 생성. 클라이언트 ID를 생성할 때는 리디렉션 URL도 설정. 이 URL은 사용자가 구글 계정으로 로그인을 완료한 후 리디렉션될 페이지의 URL이다. 로컬 호스트 테스트가 가능하지만 허용목록에 잘추가해줘야됌 3. 클라이언트(..

- 구글에서 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크 - 단일 페이지 애플리케이션 (SPA)을 구축하는 데 매우 적합 - TypeScript와 함께 사용 - 정적 타입 검사 및 코드 예측 등의 이점을 제공 - 현재 앵귤러는 최신 버전인 앵귤러 15까지 출시 - 양방향 / 단방향 데이터 바인딩 둘다 가능 1. 컴포넌트(Component) 컴포넌트는 애플리케이션을 구성하는 기본 단위이다. 컴포넌트는 @Component() 데코레이터가 붙는 TypeScript 클래스, HTML 템플릿, 스타일로 구성된다. 컴포넌트가 템플릿에 사용될 CSS 셀렉터를 지정. 템플릿에서 이 셀렉터에 해당되는 HTML 엘리먼트마다 컴포넌트 인스턴스가 생성. Angular가 컴포넌트 내용으로 렌더링할 HTML 템플릿을 ..