[JS] 귤 고르기 (Map 사용하기)

문제 풀이해당 문제에서 구해야 하는 것은 귤 k개를 고를 때, 귤의 크기 차이를 최소화 하는 것이다.아이디어는 단순하게, 크기가 많은 것부터 선택해야 차이가 나는 귤의 종류를 최소화할 수 있다.주어진 배열에 크기에 따른 귤의 개수를 알아야 하므로 Map을 사용해서 구현했다. Mapkey-value 쌍의 형태로 데이터를 저장하는 자료구조이다.객체와 비슷하지만, 객체의 key 타입은 문자열과 Symbol만 가능하지만, Map은 문자열, 함수, 배열 등 모든 자료형이 가능하다는 차이점이 있다. 1. key-value 형태의 이터러블을 인수로 전달const map = new Map(); // Map(0) {}const map = new Map([['k1', 'v1'], ['k2', 'v2']]) // Map(..

• format_list_bulleted ETC ✏️/Algorithm
• · 2024. 9. 13.
• textsms

스파르타코딩클럽 내일배움캠프 React 트랙 5기 수료 후기 🎓

벚꽃이 개화할 때부터 한 여름까지 4.5개월 동안의 과정이 끝났다. 9-9으로 진행하기 때문에 식사 시간도 안맞고, 잠을 잘때가 많아서 오랜만에 가족들이랑 같이 저녁을 먹었다.잠오면 잠오는대로 실컷 자고, 뒹굴거리면서 책도 읽고 게임도 보고~ 이렇게 쉬어도 되나싶다 누워있다가 허리 아작나는 자세로 내배캠 수료 후기를 작성한다!1. 내일배움캠프(내배캠) 참여하기 전 백그라운드나는 전공자이고, 리액트로 간단한 웹사이트까지는 만들 수 있는 상태에서 내배캠에 참여했다.학교에서는 딱히 프론트 개발 경험이 없었고, 졸업반 때 짧게 일을 하면서 시작했다. 프론트엔드는 결과가 즉각적으로 보이고, 사용자 경험을 디자인한다는 점에서 매력적인 직무라고 생각한다. 2. 내배캠을 선택한 이유신청할 때가 새해쯤이었던 거 같은데,..

• format_list_bulleted 생각 💭
• · 2024. 8. 23.
• textsms

최종 프로젝트 중간회고

프로젝트 목표우리 팀은 포트폴리오 목적으로 로그인부터 구매까지의 사이클을 경험하기 위해 쇼핑몰을 진행하기로 했다브레인스토밍을 하면서 향 관련 제품(향수, 인센스, 핸드크림, 디퓨저 등)들을 구매/판매하는 이커머스 플랫폼을 제작하기로 하였다 주객전도가 되었지만, 향수 시장에 대해 조사해 본 결과 향수 시장은 팬데믹 시대 이후 30% 이상 증가했다고 한다 향도 자신의 아이덴티티 중에 하나가 되었고, 향이라는 주제로 다양한 선물 제품들이 쏟아지고 있다트렌드인 주제이며, 시장 크기도 증가하고 있어 완전 럭키비키니시티다 하지만 일반적인 쇼핑몰과의 차별점이 뭘까 라는 고민은 진행 중이다제품적으로는 불가능하고, 기능적으로 접근해야 하는데 이커머스에 적합하면서, 참신하며, 도전적으로 해볼 수 있는 그런 기능,,  가격..

• format_list_bulleted 생각 💭
• · 2024. 8. 7.
• textsms

프론트엔드 모의면접 질문 정리 + 후기

하 질문을 받자마자 머리가 새하얘져서 아무말이나 했다..입다물고 들어온 문으로 그대로 나가버려 그냥 일단 울자!!! 으허어헝 그래 지금이라도 충격받고 면접 공부 열심히 해야하겠다 오늘 받은 질문 정리 상태 관리를 왜 하고, 평소에 상태 관리를 어떻게 하나요?요약 ) 리액트에서 상태의 역할, 리렌더링, useState  리액트에서 상태 관리는 애플리케이션 UI와 데이터의 동기화를 유지하는데 중요한 역할을 합니다리액트에서는 기존 상태와 변경된 상태를 버추얼 돔을 통해 비교하고 실제 dom에 반영되어 리렌더링이 발생하게 됩니다 저는 가장 기본적으로 useState를 통해 상태관리를 합니다리렌더링의 조건에는 state가 변경이 되거나, props가 변경이되었을 때 리렌더링이 발생하게 됩니다 하지만 useSta..

• format_list_bulleted FrontEnd ✨/CS
• · 2024. 8. 1.
• textsms

[CS] 개발하며 한번쯤은 만나는 CORS 오류 원인과 해결 방법 정리

CORS (Cross Origin Resource Sharing) : 교차 출처 리소스 공유CORS는 서로 다른 출처(origin) 간에 자원을 공유할 수 있도록 해주는 보안 매커니즘이다. 기본적으로 브라우저에서는 보안을 위해 같은 출처에서만 자원 공유를 허용한다 (= SOP)따라서 CORS 오류는 다른 Origin으로 리소스를 요청했을 때 발생한다. 다른 도메인으로 요청을 보내면 cross-origin HTTP 요청에 의해 요청 되며, 요청 헤더에 Origin 필드를 추가한다하지만 대부분의 브라우저들은 보안상의 이유로 cross-origin 요청을 제한한다 이때 SOP로 인한 보안상의 이유가 원인이다. SOP (Same Origin Policy) : 동일 출처 정책해당 정책은 브라우저의 기본 보안 정책..

• format_list_bulleted FrontEnd ✨/CS
• · 2024. 7. 25.
• textsms

tanstackQuery에서 useQuery, useMutation 타입 지정하기

React Query는 서버 상태 관리를 간단하고 효율적으로 할 수 있게 해주는 강력한 라이브러리이다React Query는 제네릭 타입 형식으로 지원하고 있다 그래서 제네릭을 잘 사용한다면 타입을 보장 받으면서 편리하게 데이터를 다룰 수 있다 ! 타입 지정을 안하면, 대부분 unknown, any 타입을 사용하고 있기 때문에 명시적으로 타입을 지정해서 비동기 상태의 타입 안정성을 확보하자 useQueryuseQuery 타입은 아래와 같다export function useQuery TQueryFnData , TError queryFn의 리턴값const { data, error } = useQuery(['todo'], getTodo);// data = number | undefined// error = Ax..

• format_list_bulleted FrontEnd ✨/TypeScript
• · 2024. 7. 23.
• textsms