전체 글 (56) 썸네일형 리스트형 Next.js 14 PWA 적용하는 방법! 1. next-pwa 설치 next-pwaNext.js with PWA, powered by workbox.. Latest version: 5.6.0, last published: 3 years ago. Start using next-pwa in your project by running `npm i next-pwa`. There are 85 other projects in the npm registry using next-pwa.www.npmjs.com 2. mainfest 추가public 폴더에 넣으면 됩니다. PWA Manifest Generator | ProgressierThis free tool allows you create an app manifestprogressier.com{ "sho.. 프로젝트에서 Route Handler 안 쓰고 Server Action만 쓴 이유 (feat. Supabase) Next.js로 모하루(개인 프로젝트)를 진행하면서, 모든 서버 통신은 Server Action을 이용해 구현했습니다.Route Handler와 Server Action 중에서 Server Action을 선택한 이유는비즈니스 로직을 클라이언트로부터 분리하고, 보안을 강화하기 위해서Server Action은 서버 환경에서만 실행되기 때문에, 민감한 로직이나 API 키, 인증 정보 등을 클라이언트에 노출시키지 않고 안전하게 처리할 수 있습니다.Supabase를 백엔드로 사용했기 때문입니다.Supabase에서 제공하는 메서드들은 fetch로 직접 호출하는 방식이 아니라, 서버 환경에서 동작하는 클라이언트를 통해 호출해야 하기 때문에, Server Action을 활용하는 것이 더 적합했습니다.모든 서버 통신이 .. 카카오맵 API 타입스크립트로 사용하기 (kakao.maps.d.ts로 Type 적용) 카카오맵을 사용한 프로젝트를 진행하고 있는데, 타입 정의 문제가 발생했다.처음에는 kakao 객체 존재 여부를 TS에서 인식하지 못하기 때문에, 객체가 window에 있다고 선언했다.declare global { interface Window { kakao: any; }} 카카오에서도 이렇게 선언하라고 했는데, (https://devtalk.kakao.com/t/typescript/126917/2)개발 과정에서는 문제 없이 실행되더라도, 문제는 빌드였다.빌드 과정에서 any 타입에 모든 빨간줄을,,, ㅠㅠ 카카오에서는 API 타입을 따로 제공하지 않았다 😱그래서 임시로 장소 결과 객체 타입을 정의했으나export type KakaoPlace = { address_name: string; //.. [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(.. [JS] 소수 찾기 (에라토스테네스의 체) 소수는 1과 자기 자신만을 약수로 가지는 수를 말한다.소수를 구하는 대표적인 방법으로는 brute force로 제곱근까지 단순 나눗셈을 하는 방법, 에라토스테네스의 체가 있다. 에라토스테네스의 체를 구현해보고, gpt와 함께 개선점을 찾았다 에라토스테네스의 체 O(N * log log N)에라토스테네스의 체는 다수의 소수(2~n)를 빠르게 구할 수 있는 알고리즘이다. 2부터 시작해서, 방문한 수의 모든 배수를 지우는 방법이다 (배수는 당연히 소수가 아니므로)결과적으로 남은 수는 모두 소수이다. 첫번째 코드개념을 보고 적용한 방법이다.function solution(n) { var answer = 0; const arr = Array(n+1).fill(true) // n+1 만큼의 배열을.. 스파르타코딩클럽 내일배움캠프 React 트랙 5기 수료 후기 🎓 벚꽃이 개화할 때부터 한 여름까지 4.5개월 동안의 과정이 끝났다.9-9으로 진행하기 때문에 식사 시간도 안맞고, 잠을 잘때가 많아서 오랜만에 가족들이랑 같이 저녁을 먹었다.1. 내일배움캠프(내배캠) 참여하기 전 백그라운드나는 전공자이고, 리액트로 간단한 웹사이트까지는 만들 수 있는 상태에서 내배캠에 참여했다.학교에서는 프론트 개발 경험이 없었고, 졸업반 때 짧게 일을 하면서 시작했다.프론트엔드는 결과가 즉각적으로 보이고, 사용자 경험을 디자인한다는 점에서 매력적인 직무라고 생각한다. 2. 내배캠을 선택한 이유신청할 때가 새해쯤이었던 거 같은데, 새해 초에 느끼는 불안감과 도전의식으로 신청했다. - 강제성 필요- 저번에 신청한 내일 배움 카드가 있었음 = 국비 지원으로 공짜인데, 훈련장려금도 준다- 다른.. 8/13 프로젝트 버그 수정 중 알게 된 것들 ref 사용 시, input 초기값 설정controlled component = value + onChange → react가 제어, 입력값 상태로 유지uncontorlled component = defaultValue → DOM에 직접 접근 Object.keys(res).length>> "res(객체)에 요소가 있으면" 이라는 조건이 필요했는데 습관처럼 res.length 사용해서 undefined 나옴 res는 객체 (배열이 아님) ⇒ res.length는 undefined가 될 수 있다Object.keys는 객체 속성 이름을 배열로 반환const object1 = { a: 'somestring', b: 42, c: false,};console.log(Object.keys(object1)); .. 최종 프로젝트 중간회고 프로젝트 목표우리 팀은 포트폴리오 목적으로 로그인부터 구매까지의 사이클을 경험하기 위해 쇼핑몰을 진행하기로 했다브레인스토밍을 하면서 향 관련 제품(향수, 인센스, 핸드크림, 디퓨저 등)들을 구매/판매하는 이커머스 플랫폼을 제작하기로 하였다 주객전도가 되었지만, 향수 시장에 대해 조사해 본 결과 향수 시장은 팬데믹 시대 이후 30% 이상 증가했다고 한다 향도 자신의 아이덴티티 중에 하나가 되었고, 향이라는 주제로 다양한 선물 제품들이 쏟아지고 있다트렌드인 주제이며, 시장 크기도 증가하고 있어 완전 럭키비키니시티다 하지만 일반적인 쇼핑몰과의 차별점이 뭘까 라는 고민은 진행 중이다제품적으로는 불가능하고, 기능적으로 접근해야 하는데 이커머스에 적합하면서, 참신하며, 도전적으로 해볼 수 있는 그런 기능,, 가격.. 이전 1 2 3 4 ··· 7 다음 목록 더보기
