이중표 개발 블로그

Next.js 공식 저장소에 PR 두 개를 머지했다: 오픈소스에 기여한 이야기

Mon, 21 Sep 2026 04:35:14 GMT

Next.js 저장소에 PR 두 개를 머지했다. 하나는 어댑터 문서에서 빠진 필드 두 개를 채운 것이고, 다른 하나는 공식 Redis 캐시 핸들러 예제의 런타임 버그 세 건을 고친 것이다. 둘 다 "오픈소스에 기여해 보자"는 마음으로 저장소를 뒤져서 찾은 게 아니다. 내 일을 하다가 걸린 것들이다. 어댑터를 직접 만들다가 문서에 없는 필드를 만났고, 멀티

검색 안 되는 API 문서에 지쳐서, 직접 MCP 서버를 만들어 npm에 올린 이야기

Sun, 28 Jun 2026 14:37:47 GMT

검색 안 되는 API 문서에 지쳐서, 직접 MCP 서버를 만들어 npm에 올린 이야기 NHN커머스 샵바이(Shopby) API 문서를 자연어로 검색하는 MCP 서버를 만들어 사내 팀에 배포한 과정이다. 한 줄이면 Claude에서 바로 "이 API에 이 필터 있어?"를 물어볼 수 있다. 발단 — 회의 때마다 반복되던 질문 지금 다니는 회사는 커머스 백엔

Sentry 알림을 끄는 대신, AI 에이전트를 상시 멤버로 — 프로덕션 에러 이슈 90% 정리한 2주

Thu, 25 Jun 2026 07:11:25 GMT

Sentry 알림을 끄는 대신, AI 에이전트를 상시 멤버로 — 프로덕션 에러 이슈 90% 정리한 2주 TL;DR — 프로덕션 Sentry에 쌓인 유니크 이슈 1,463개를 AI 에이전트(Claude Code + Sentry MCP)로 분석·정리했다. 90%가 단일 원인(서드파티 GTM 에러의 파편화)임을 규명하고, 노이즈 필터링·user context·

TypeScript와 Next.js 최적화를 위해 4,000줄짜리 에이전트 스킬을 만든 이유

Mon, 20 Apr 2026 08:59:40 GMT

문제 저는 프론트엔드 작업을 할 때 Claude Code를 자주 쓰고, 가끔 Codex도 함께 씁니다. 그런데 거의 매일 비슷한 실수를 다시 고치게 됩니다. 겉보기에는 멀쩡합니다. TypeScript도 아무 말 안 하죠. 하지만 은 런타임에서 를 반환합니다. API 응답 형태가 바뀌면, 이 코드는 조용히 프로덕션에서 깨질 수 있습니다. 상태를 세 조각

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (4편 · 렌더링 전략 실측과 최선의 선택)

Mon, 20 Apr 2026 08:58:39 GMT

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (4편 · 렌더링 전략 실측과 최선의 선택) 3편까지는 "일관성"을 이야기했다. 이번 편은 그 위에서 "그래서 어떤 렌더링 전략을 골라야 하는가"를 실제 수치로 답한다. 1편은 왜 멀티 인스턴스 환경에서 캐시가 갈라지는지 개념을 다뤘고, 2편은 Docker Redi

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (3편 · 운영 검증)

Mon, 20 Apr 2026 04:27:47 GMT

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (3편 · 운영 검증) 로컬 데모에서는 됐다. 이제 중요한 건 실제 AWS Self-hosting 환경에서도 같은 방식으로 동작하느냐다. 1편에서는 왜 AWS Self-hosting + ALB + EC2 다중 인스턴스 환경에서 캐시 불일치가 생기는지 개념적으로 정

Sentry 커스텀 계측으로 FE 무결성을 증명한 로그인 풀림 트러블슈팅 (일 400건)

Mon, 06 Apr 2026 06:54:27 GMT

Sentry 커스텀 계측으로 FE 무결성을 증명한 로그인 풀림 트러블슈팅 (일 400건) 기간: 2026-03-21 ~ 2026-03-24 규모: 1,200건 이상 (하루 약 400건 지속 발생) 결론: Sentry 커스텀 계측으로 FE 무결성을 데이터로 증명 → 백엔드 코드 버그 확정 및 수정 문제 상황 앱/웹에서 로그인이 간헐적으로 풀리는 현상이 다

Next.js Pages Router에서 Scroll Restoration 직접 구현하기

Fri, 13 Mar 2026 02:20:53 GMT

Next.js Pages Router에서 Scroll Restoration 직접 구현하기 배경 기존에 Next.js 13 Pages Router로 운영 중이던 프로젝트를 Next.js 15로 업데이트한 후, 뒤로가기/앞으로가기 시 스크롤 위치가 전혀 복원되지 않는 문제가 발생했다. 에 가 설정되어 있었고 Next.js 13에서는 정상 동작했지만, 15

React 디자인 시스템을 처음부터 끝까지 만들어본 이야기

Fri, 13 Mar 2026 02:20:47 GMT

React 디자인 시스템을 처음부터 끝까지 만들어본 이야기 약 3~4주에 걸쳐 React 디자인 시스템을 처음부터 끝까지 만들어봤습니다. 토큰 설계부터 컴포넌트 구현, Storybook 문서화, 모노레포 전환까지 — 설계 과정과 기술 선택의 이유, 그리고 배운 것들을 공유합니다. Storybook: https://leejpsd.github.io/my-de

이커머스 프로젝트에 테스트를 도입한 이야기 — Vitest + MSW로 주문 플로우 검증하기

Wed, 11 Feb 2026 11:53:14 GMT

이커머스 프로젝트에 테스트를 도입한 이야기 — Vitest + MSW로 주문 플로우 검증하기 3년차 프론트엔드 개발자가 운영 중인 커머스 프로젝트(Next.js + Zustand)에 테스트를 도입하며 배운 것들을 정리합니다. 이직을 준비하던 중 한 회사의 과제를 진행하게 되었습니다. 과제는 여러 번 해봤지만, 이번에는 처음으로 “테스트 코드 작성”이 요

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (2편 · 구현)

Wed, 07 Jan 2026 05:06:27 GMT

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (2편 · 구현) 2편에서는 실제로 Docker로 Redis를 띄우고, Next.js 16 + cacheHandlers + "use cache" 로 진짜 Redis에 데이터 캐시가 쌓이고, 버튼 / Webhook 으로 무효화되는 전체 플로우를 끝까지 구현해봅니다.

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (1편 · 개념)

Wed, 07 Jan 2026 05:05:02 GMT

Next.js 16 + Redis | AWS Self-hosting 캐시 불일치 해결하기 (1편 · 개념) — AWS Self-hosting 환경에서 터지는 캐시 불일치, Redis CacheHandler로 진짜 해결해보자 Next.js 15~16의 Cache Components + cacheHandlers + Redis 를 직접 붙여본 경험을 정리한

첫눈기념! 눈내리는 효과 만들기 Snowfall Effect (TypeScript)

Thu, 04 Dec 2025 08:40:36 GMT

눈 내리는 효과를 타입스크립트 컴포넌트로 제작했습니다. 사용 시 주의: 부모 요소에 position: relative가 있어야 해요. 부모의 영역만큼 눈이 내립니다! 프롭스로 강설량과 눈송이의 크기를 조절해보세요! !codepen[cqtyoeoo-the-selector/embed/azNRLaw?default-tab=html%2Cresult]

React 컴파일러 정식 출시: 자동 최적화의 시작

Wed, 22 Oct 2025 08:09:42 GMT

🚀 React 컴파일러 정식 출시: 자동 최적화의 시작 🧩 "리렌더링은 문제인가? 아니면 렌더링 중 실행되는 코드가 문제인가?" 이 문장은 제가 지난 벨로그 글에서 강조한 핵심 메시지였습니다. 🔗 리렌더링 최적화의 오해 - 리렌더링이 많다고 느린 게 아니다 글에서, 저는 React의 Virtual DOM이 렌더링을 줄이는 기술이 아니라 커밋을 최적

Next.js 15~15.5 릴리스 총정리

Tue, 21 Oct 2025 06:33:20 GMT

Next.js는 문서와 블로그를 통해 변화가 빠르게 공유되는 프레임워크입니다. 실험 기능이 안정화되기까지의 과정이 비교적 투명하고, 커뮤니티 피드백도 제품에 잘 반영되죠. 저도 14.2에서 15로 올라갈 때 @next/codemod를 활용해 무리 없이 마이그레이션했고, 그 이후 15.x 라인의 업데이트를 계속 지켜봐 왔습니다. 이 글은 Next.js 15

React 리렌더링 최적화의 오해 - 리렌더링이 많다고 느린 게 아니다.

Fri, 10 Oct 2025 04:46:46 GMT

⚡️ React render ≠ DOM update Virtual DOM의 진짜 역할과 ‘리렌더링 최적화’의 오해 많은 React 개발자들은 “리렌더링을 막아야 성능이 좋아진다”는 말로 시작하지만, 실제로 애플리케이션을 느리게 만드는 건 리렌더링 그 자체가 아니라 “느린 렌더링”입니다. 리액트 프로젝트를 하다 보면 이런 말을 자주 듣습니다. “리렌더

YouTube Shorts 자동 재생 트러블슈팅: Android WebView 소리 안 남, 백그라운드/포그라운드 감지로 재생 멈춤 해결기

Mon, 21 Jul 2025 01:59:21 GMT

YouTube Shorts 자동 재생 트러블슈팅: Android WebView 소리 안 남, 백그라운드/포그라운드 감지로 재생 멈춤 해결기 🧩 요구사항 사내 유튜브 채널에 올라온 Shorts(쇼츠) 콘텐츠를 홈페이지에 자동으로 노출해달라는 요청을 받았다. 🎯 목적 마케팅팀에서 쇼츠를 별도 등록 없이 자동으로 노출되게 하기 유튜브 채널 운영과 홈페이

✨ Masked Gradient Text Animation과 이미지 확장 효과 구현기 (Part 2 -Parallax Scroll,패럴렉스 스크롤)

Mon, 09 Jun 2025 02:20:28 GMT

✨ Masked Gradient Text Animation과 이미지 확장 효과 구현기 (Part 2 -Parallax Scroll,패럴렉스 스크롤) 📌 도입 지난 글 Part 1에서는 텍스트 애니메이션과 영상 삽입 효과를 중심으로 다뤘습니다. 이번 글은 그 연장선으로, 스크롤 시 이미지가 커지고 위치가 이동하며 자연스럽게 다음 섹션으로 이어지는 패럴렉스

✨ Masked Gradient Text Animation과 이미지 확장 효과 구현기 (Part 1) (CSS 애니메이션)

Thu, 05 Jun 2025 09:02:04 GMT

✨ Masked Gradient Text Animation과 이미지 확장 효과 구현기 (Part 1) 📌 도입 어느 덧 회사 창립 5년 차. 처음으로 사업팀에서 공식 회사 홈페이지에 대한 요청이 들어왔습니다. TF는 빠르게 구성되었고, 기획자 1명, 백엔드 개발자 1명, 외주 디자이너 1명, 그리고 프론트엔드 개발자인 저까지 총 4명이 함께하게 되었습니

window.self 와 window.top 비교로 iframe 여부를 안전하게 검증하는 방법

Wed, 26 Mar 2025 05:24:30 GMT

window.self 와 window.top 비교로 iframe 여부를 안전하게 검증하는 방법 웹 개발을 하다 보면 현재 페이지가 iframe 안에 로드된 상태인지, 아니면 독립적으로 열린 페이지인지 구분해야 할 때가 많습니다. 이때 가장 간단하고 안전한 방법은 와 을 비교하는 것입니다. ✅ 와 이란? | 객체명 | 의미 | |-------------

슈프라이즈 SEO 성과 보고서

Wed, 19 Feb 2025 02:55:42 GMT

📊 SEO 성과 보고서 개요 본 보고서는 최근 SEO 작업 이후 검색 성과의 변화를 분석하고, 클릭수 및 CTR(클릭률), 평균 순위(개재 순위), 노출수(임프레션)의 향상 여부를 검토하여 SEO 최적화 효과를 평가하는 것을 목표로 합니다. 검색 성과 분석 2.1 클릭수, 노출수 및 CTR 트렌드 SEO 작업 이후 검색 성과의 변화를 분석하기 위해 기간별

Next.js 14에서 SEO를 위한 리다이렉트 최적화: 301 vs 308 vs 307

Thu, 06 Feb 2025 07:02:46 GMT

Next.js 14에서 SEO를 위한 리다이렉트 최적화: 301 vs 308 vs 307 SEO 개선 작업 중 구글봇이 여전히 예전 URL을 크롤링하는 현상을 발견했습니다. 기존 URL이 크롤러(구글봇)에게 계속 인덱싱되며 검색 결과에 남아 있었기 때문입니다. 이를 해결하기 위해 영구 리다이렉트(301 또는 308) 방식을 점검하고 적용하는 과정을 정리합

Next.js 14 – ‘isBot’ 기능을 활용한 검색 크롤러(봇) 감지 및 트래픽 최적화

Wed, 11 Dec 2024 10:30:08 GMT

Next.js 14 – ‘isBot’ 기능을 활용한 검색 크롤러(봇) 감지 및 트래픽 최적화 Next.js 14 버전에서는 기본적으로 제공되는 기능을 통해 요청이 크롤러(봇)로부터 왔는지 쉽게 감지할 수 있습니다. 이 글에서는 을 활용한 SSR 및 CSR 페이지로의 분기 처리, 트러블슈팅 과정, 그리고 서버 액션을 사용한 페이지별 봇 감지 로직 구현까지

사용자 피드백 기반의 모달 최적화와 성능 개선: 응답 없는 버튼 문제 해결하기

Mon, 04 Nov 2024 04:56:42 GMT

개요 발매 정보 페이지에서는 각 발매 아이템의 '응모' 또는 '선착순' 버튼을 클릭해 상세 정보를 모달로 확인할 수 있습니다. 그러나 인기 발매일 경우 트래픽이 급증하여 버튼이 반응하지 않거나 여러 번 눌러야 모달이 뜨는 현상이 발생했습니다. 이는 사용자 불편을 초래하며 개선이 필요했습니다. 아래는 사용자 경험과 성능 최적화를 위해 코드와 아키텍처를 개선

SSR 페이지에서 이미지 최적화와 CLS 개선을 위한 Next.js Image 컴포넌트 활용법

Sun, 03 Nov 2024 07:44:26 GMT

배경 Next.js에서 SSR(Server-Side Rendering)로 페이지를 렌더링할 때, 이미지 최적화는 사용자 경험을 개선하는 중요한 요소입니다. 이전에는 커뮤니티 리스트 페이지(SSR)에서 이미지를 서버에서 크기를 조정하여 제공하는 Picture 컴포넌트를 사용했지만, 이 방식은 몇 가지 문제가 있었습니다. 레이지 로딩 미지원: 이미지가 페이지

Next.js와 React Query의 initialData를 활용한 서버 데이터 패칭 및 초기 로딩 최적화 , 무한 스크롤 구현

Sat, 02 Nov 2024 14:09:06 GMT

Next.js와 React Query를 함께 사용하는 경우, 서버에서 데이터를 패칭하고 이를 초기 데이터로 클라이언트에 전달하는 방식이 매우 유용합니다. 이 글에서는 서버 컴포넌트를 활용해 데이터를 initialData로 설정하는 방법과 그 장점에 대해 설명하겠습니다. 서버 컴포넌트와 초기 데이터 설정이 필요한 이유 현대 웹 애플리케이션은 빠른 초기 로딩과

[Next.js 14] 셀프 호스팅 환경에서 주문형 재검증 구현 (ISR)

Tue, 01 Oct 2024 18:14:10 GMT

Next.js는 기본적으로 서버 컴포넌트를 활용하여 다양한 로직을 서버에서 수행합니다. 이는 여러 장점이 있지만, 동시에 서버에 부하를 증가시킬 수 있는 단점도 존재합니다. 이러한 문제를 방지하기 위해 캐싱 전략으로 SSG, SSR, ISR을 활용하고 있습니다. 최근 프로젝트에서는 Next.js의 시간형 재검증을 통해 ISR 기능을 도입했습니다. 더 나아가

[Next.js] lighthouse 를 이용한 성능 개선

Mon, 05 Aug 2024 07:12:21 GMT

Lighthouse Lighthouse는 구글이 개발한 오픈 소스 웹 성능 평가 도구입니다. 이 도구는 웹 페이지의 성능, 접근성, SEO, 최적화 및 Progressive Web App(PWA) 기능 등을 평가하고 개선할 수 있는 자세한 리포트를 제공합니다. 주요 기능은 다음과 같습니다: 성능 평가: 페이지의 로딩 속도와 반응성을 측정하여 사용자 경험

Next.js 캐시(Cache) 총정리: 효율적인 데이터 관리와 성능 최적화 완벽 가이드

Sun, 09 Jun 2024 18:15:59 GMT

이 글은 Next 14 를 기준으로 작성되었습니다. 🌳 [Next.js Cache] 캐싱을 이용한 웹 서버 최적화 이번 프로젝트에서는 제이쿼리와 장고 템플릿으로 구성된 기존 애플리케이션을 Next.js 14.1의 앱 라우터를 사용하여 마이그레이션했습니다. 처음 Next.js 14.1를 도입할 때, 단순히 앱 라우터를 활용하고 폴더 구조를 재정리하는

캐싱 메커니즘으로 이해하는 Next.js 성능 최적화 가이드

Mon, 03 Jun 2024 01:23:36 GMT

이 글은 Next.js 문서 중 캐싱(Caching)에 관한 내용을 번역한 것으로, 참고용으로만 사용하시길 바랍니다. 실제 문서를 꼼꼼히 읽어보는 것을 권장드립니다. Next.js는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션의 성능을 향상시키고 비용을 절감합니다. 이 페이지에서는 Next.js 캐싱 메커니즘, 이를 구성할 수 있는 API 및 상호

2023년 회고 : 신입 개발자의 스타트업 생존기

Tue, 30 Jan 2024 10:29:23 GMT

2023년 회고 : 신입 개발자의 스타트업 생존기 신입 개발자로써 22년 11월 말 입사해 어느 덧 1년을 보냈다. 많이 늦었지만 1월이 지나기 전에 지난 1년간의 회고를 작성해보려 한다. 부트캠프에서 스타트업에 입사하다! 프론트엔드 개발자를 목표로 독학을 반년정도 하다 항해99 라는 개발자 부트캠프 수료했다. 운이 좋게도 항해99를 수료하고 한달

Axios와 Zustand를 활용한 인증 및 API 관리

Tue, 09 Jan 2024 06:56:03 GMT

Axios와 Zustand를 활용한 인증 및 API 관리 웹 애플리케이션에서 안전하고 효율적인 API 요청 관리는 매우 중요합니다. 이 글에서는 Axios와 Zustand를 사용하여 인증 토큰 관리, API 요청 인터셉터 설정, 에러 처리, 그리고 상태 관리를 구현한 사례를 소개합니다. Axios 인스턴스 커스터마이징: 구현 코드와 상세 설명 Axios

Framer Motion과 Observer로 구현한 인터렉션 페이지

Tue, 21 Nov 2023 09:23:06 GMT

Ver1 Ver2 보러가기 https://www.kasina.co.kr/service/aboutus

NextAuth.js 를 이용한 자체 로그인 구현

Mon, 04 Sep 2023 02:50:40 GMT

웹 애플리케이션을 개발하면서 사용자 인증은 핵심적인 요소 중 하나입니다. 이 글에서는 Next.js 애플리케이션에서 NextAuth.js를 활용하여 간편하게 자체 로그인을 구현하고 로그인이 필요한 페이지에서 세션을 효과적으로 관리하는 방법에 대해 알아보겠습니다. NextAuth.js NextAuth.js는 Next.js 애플리케이션에서 사용자 인증을 손

React Custom Suspense

Tue, 29 Aug 2023 01:08:55 GMT

Custom Suspense suspense 의 구조를 이해할 수 있다.

React18 는 단순한 로딩 컴포넌트가 아니다? with SSR

Mon, 28 Aug 2023 05:33:38 GMT

Suspense 의 구조 https://velog.io/@leejpsd/React-Custom-Suspense Introduction React Working Group(reactwg)에서 React Core Team의 Dan Abramov는 React 18의 주요 Feature 중 하나인 Suspense가 SSR Architecture의 구조적인 성능

[React18] 디바운스(Debounce)와 스로틀(Throttle) 을 대체할 HOOK

Tue, 22 Aug 2023 01:32:32 GMT

디바운스(Debounce)와 스로틀(Throttle) 을 대체할 수 있는 react hook인 useDeferredValue와 useTransition를 알아보겠습니다. React 18의 Concurrent Rendering: useDeferredValue와 useTransition 최신 React 버전인 React 18은 놀라운 성능 개선과 유연성을

자료구조와 자료형 4.1 원시값의 메서드

Tue, 22 Aug 2023 00:45:20 GMT

♠ 자료구조와 자료형 ♣ 4.1 원시값의 메서드 자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해줍니다. 원시값에도 객체에서처럼 메서드를 호출할 수 있죠. 하지만 원시값은 객체가 아니란 것을 상기하도록 합시다. 원시값: 원시형 값입니다. 원시형의 종류는 , , , , , , 형으로 총 일곱 가지 입니다. ♥ 원시값을 객체처럼 사

객체: 기본 3.8 객체를 원시형으로 변환하기

Mon, 21 Aug 2023 05:01:46 GMT

♠ 객체: 기본 ♣ 3.8 객체를 원시형으로 변환하기 원시값을 기대하는 내장 함수나 연산자를 사용할 때 객체-원시형으로의 형 변환이 자동으로 일어납니다. 객체-원시형으로의 형 변환은 hint를 기준으로 세 종류로 구분할 수 있습니다. ( 같이 문자열을 필요로 하는 연산) (수학 연산) (드물게 발생함) 연산자별로 어떤 hint가 적용되는지는 명세서에서

객체: 기본 3.7 심볼형

Wed, 05 Jul 2023 01:50:46 GMT

♠ 객체: 기본 ♣ 3.7 심볼형 은 원시형 데이터로, 유일무이한 식별자를 만드는 데 사용됩니다. 을 호출하면 심볼을 만들 수 있습니다. 설명(이름)은 선택적으로 추가할 수 있습니다. 심볼은 이름이 같더라도 값이 항상 다릅니다. 이름이 같을 때 값도 같길 원한다면 전역 레지스트리를 사용해야 합니다. 는 라는 이름을 가진 전역 심볼을 반환합니다. 라는

객체: 기본 3.6 옵셔널 체이닝 '?.'

Tue, 04 Jul 2023 08:05:22 GMT

♠ 객체: 기본 ♣ 3.6 옵셔널 체이닝 '?.' 옵셔널 체이닝 문법 은 세 가지 형태로 사용할 수 있습니다. – 가 존재하면 을 반환하고, 그렇지 않으면 를 반환함 – 가 존재하면 을 반환하고, 그렇지 않으면 를 반환함 – 가 존재하면 를 호출하고, 그렇지 않으면 를 반환함 여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도

객체: 기본 3.5 new 연산자와 생성자 함수

Mon, 12 Jun 2023 02:41:41 GMT

♠ 객체: 기본 ♣ 3.5 new 연산자와 생성자 함수 ♥ 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 연산자를 붙여 실행합니다. 예시: 를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작합

객체: 기본 3.4 메서드와 this

Thu, 01 Jun 2023 01:21:06 GMT

♠ 객체: 기본 ♣ 3.4 메서드와 this 객체 프로퍼티에 저장된 함수를 '메서드’라고 부릅니다. 은 객체를 '행동’할 수 있게 해줍니다. 메서드는 로 객체를 참조합니다. 값은 런타임에 결정됩니다. 함수를 선언할 때 를 사용할 수 있습니다. 다만, 함수가 호출되기 전까지 엔 값이 할당되지 않습니다. 함수를 복사해 객체 간 전달할 수 있습니다. 함수를

객체: 기본 3.3 가비지 컬렉션

Thu, 01 Jun 2023 01:17:51 GMT

♠ 객체: 기본 ♣ 3.3 가비지 컬렉션 ♥ 가비지 컬렉션 기준 자바스크립트는 도달 가능성(reachability) 이라는 개념을 사용해 메모리 관리를 수행합니다. ‘도달 가능한(reachable)’ 값은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미합니다. 도달 가능한 값은 메모리에서 삭제되지 않습니다. 아래 소개해 드릴값들은 그 태생부터

객체: 기본 3.2 참조에 의한 객체 복사

Wed, 31 May 2023 01:44:53 GMT

♠ 객체: 기본 ♣ 3.2 참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠. 예시: 예시를 실행하면 두 개의 독립된 변수에 각각 문자열 가 저장됩니다. 그런데 객체

React Query의 캐시타임(Cache Time)과 스테일타임(Stale Time), 포커스 속성에 대한 이해

Fri, 26 May 2023 07:57:06 GMT

React Query의 캐시타임(Cache Time)과 스테일타임(Stale Time), 포커스 속성에 대한 이해 React Query는 클라이언트 상태 관리와 비동기 데이터 처리를 효율적으로 처리할 수 있는 도구로, 특히 데이터를 캐싱하고 적절한 시점에 갱신하는 기능이 강력합니다. 이 글에서는 캐시타임(Cache Time), 스테일타임(Stale Time

객체: 기본 3.1 객체

Thu, 25 May 2023 01:20:12 GMT

♠ 객체: 기본 ♣ 3.1 객체 객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)입니다. 객체는 프로퍼티(키-값 쌍)를 저장합니다. 프로퍼티 키는 문자열이나 심볼이어야 합니다. 보통은 문자열입니다. 값은 어떤 자료형도 가능합니다. 아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있습니다. 점 표기법: 대괄호 표기법 .

코드 품질 2.4 폴리필

Wed, 24 May 2023 02:30:00 GMT

♠ 코드 품질 ♣ 2.4 폴리필 ♥ 바벨 명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있습니다. 명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문이죠. 이럴 때 바벨을 사용할 수 있습니다. 바벨(Babel)은 트랜스파일러(transpiler)로

코드 품질 2.3 주석

Wed, 24 May 2023 02:27:34 GMT

♠ 코드 품질 ♣ 2.3 주석 ♥ 주석에 들어가면 좋은 내용 고차원 수준 아키텍처 함수 용례 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명 ♥ 주석에 들어가면 좋지 않은 내용 '코드가 어떻게 동작하는지’와 '코드가 무엇을 하는지’에 대한 설명 코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로도 어떤 일을 하는지 충분히 판단할 수 없는 경우에만

코드 품질 2.2 코딩 스타일

Wed, 24 May 2023 02:21:54 GMT

♠ 코드 품질 ♣ 2.2 코딩 스타일 ♥ 문법 ‘무조건’ 따라야 할 규칙은 없습니다. 본 튜토리얼에서 제안하고 있는 규칙 모두를 종교 신조마냥 무조건 따르지 않아도 됩니다. 스타일에 대한 선호에 따라 규칙을 따를 수도, 따르지 않을 수도 있습니다. ♥ 중괄호 😠 초보 개발자들은 아래처럼 코드를 작성하곤 하는데, 중괄호가 필요하지 않기 때문에 추천하

코드 품질 2.1 Chrome으로 디버깅하기

Tue, 23 May 2023 02:44:05 GMT

♠ 코드 품질 ♣ 2.1 Chrome으로 디버깅하기 ♥ 중단점 중단점(breakpoint) 은 말 그대로 자바스크립트의 실행이 중단되는 코드 내 지점을 의미합니다. 중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있습니다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있습니다. 디버깅이 가능해지는 것이죠. S

자바스크립트 기본 1.17 화살표 함수 기본

Tue, 23 May 2023 01:48:50 GMT

♠ 자바스크립트 기본 ♣ 1.16 함수표현식 ♥ 화살표 함수 기본 화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다. 중괄호 없이 작성: – 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다. 중괄호와 함께 작성: – 본문이 여러 줄로

배열의 중복값 제거 (new Set() 이용하기)

Tue, 23 May 2023 01:31:26 GMT

일반적인 배열함수(filter,find,map)는 배열 내 요소 전체를 뒤져 중복 값을 찾기 때문에, 셋보다 성능 면에서 떨어집니다. 반면, 셋은 값의 유일무이함을 확인하는데 최적화되어있습니다.

CSS 선언순서 (PostCSS Sorting 이용하기)

Mon, 22 May 2023 08:40:30 GMT

NHN 코딩 컨벤션에 따른 CSS 선언순서를 지켜야하다보니 마크업하는 시간이 꽤나 오래 걸렸다. 보다 빠르게 작업하기 위해 여러 익스텐션을 찾아보던중 postCSS Sorting 을 사용하게 되었고 그동안 사용해보며 마크업 시간을 많이 단축시키게 되어 소개한다. PostCSS CSS 속성 순서를 정돈해주는 VScode EXTENSION 이다. 1.익스텐

자바스크립트 기본 1.16 함수표현식

Mon, 22 May 2023 04:41:22 GMT

♠ 자바스크립트 기본 ♣ 1.16 함수표현식 ♥ 함수 표현식 vs 함수 선언문 함수 표현식과 선언문의 차이에 대해 알아봅시다. 첫 번째는 문법입니다. 코드를 통해 어떤 차이가 있는지 살펴봅시다. 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다. 함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부

자바스크립트 기본 1.15 함수

Mon, 22 May 2023 04:28:26 GMT

♠ 자바스크립트 기본 ♣ 1.15 함수 함수 선언 방식으로 함수를 만들 수 있습니다. 함수에 전달된 매개변수는 복사된 후 함수의 지역변수가 됩니다. 함수는 외부 변수에 접근할 수 있습니다. 하지만 함수 바깥에서 함수 내부의 지역변수에 접근하는 건 불가능합니다. 함수는 값을 반환할 수 있습니다. 값을 반환하지 않는 경우는 반환 값이 가 됩니다. 깔끔하고

자바스크립트 기본 1.14 switch문

Thu, 18 May 2023 01:37:03 GMT

♠ 자바스크립트 기본 ♣ 1.14 switch문 복수의 조건문은 문으로 바꿀 수 있습니다. 문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다. ♥ 문법 문은 하나 이상의 문으로 구성됩니다. 대개 문도 있지만, 이는 필수는 아닙니다. 예시: 변수 의 값과 첫 번째 문의

자바스크립트 기본 1.13 while과 for 반복문

Wed, 17 May 2023 09:16:00 GMT

♠ 자바스크립트 기본 ♣ 1.13 while과 for 반복문 – 각 반복이 시작하기 전에 조건을 확인합니다. – 각 반복이 끝난 후에 조건을 확인합니다. – 각 반복이 시작하기 전에 조건을 확인합니다. 추가 세팅을 할 수 있습니다. ‘무한’ 반복문은 보통 를 써서 만듭니다. 무한 반복문은 여타 반복문과 마찬가지로 지시자를 사용해 멈출 수 있습니다. 현

자바스크립트 기본 1.12 nullish 병합 연산자 '??'

Wed, 17 May 2023 09:12:03 GMT

♠ 자바스크립트 기본 ♣ 1.12 nullish 병합 연산자 '??' nullish 병합 연산자 를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있습니다. 는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다. 의 연산자 우선순위는 대다수의 연산자보다 낮고 와 보다는 높습니다. 괄호 없이 를 나 와 함께 사용하는 것은 금지되어있습니

$(document).on과 $(document).ready

Tue, 16 May 2023 18:21:18 GMT

$(document).on(eventName, selector, eventHandler); 바인딩 시 문서에 존재하는 요소와 나중에 동적으로 추가되는 요소에 이벤트 핸들러를 연결할 수 있습니다. 이는 초기 이벤트 바인딩이 발생할 때 존재하지 않을 수 있는 요소에 대한 이벤트를 처리할 수 있으므로 동적으로 생성되거나 로드된 콘텐츠로 작업할 때 특히 유용합니

자바스크립트 기본 1.11 논리연산자

Tue, 16 May 2023 01:19:02 GMT

♠ 자바스크립트 기본 ♣ 논리연산자 ♥ 첫 번째 truthy를 찾는 OR 연산자 ‘||’ 전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰입니다. 인수 중 하나라도 이면 를 반환하고, 그렇지 않으면 를 반환하죠. OR 연산자와 피연산자가 여러 개인 경우: 이때, OR 연산자는 다음 순서에 따라 연산을 수행합니다. 가장 왼쪽 피연산자부터 시

자바스크립트 기본 1.10 if 와 '?' 를 사용한 조건 처리

Mon, 15 May 2023 01:29:40 GMT

♠ 자바스크립트 기본 ♣ 1.10 if 와 '?' 를 사용한 조건 처리 ♥ 'if’문 문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 이면 코드 블록이 실행됩니다. 문은 괄호 안의 표현식을 불린형으로 변환합니다. 숫자 , 빈 문자열, , , 은 불린형으로 변환 시 모두 가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다. 이

자바스크립트 기본 1.9 비교 연산자

Mon, 15 May 2023 01:25:56 GMT

♣ 자바스크립트 기본 ♥ 1.8 비교 연산자 비교 연산자는 불린값을 반환합니다. 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’ 순입니다. 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외). 과 는 동등 비교() 시 서로 같지만 다른 값과는 같지 않습니다. 이나 가 될 확률이 있는 변

자바스크립트 기본 1.8 기본 연산자와 수학

Thu, 11 May 2023 01:26:53 GMT

♠ 코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.8 기본 연산자와 수학 용어: ‘단항’, ‘이항’, ‘피연산자’ 연산자에 대해 학습하기 전에, 앞으로 자주 등장하게 될 용어 몇 가지를 정리해 보겠습니다. 피연산자(operand) 는 연산자가 연산을 수행하는 대상입니다. 에는 왼쪽 피연산자 와 오른쪽 피연산자 , 총 두 개의 피연산자가 있습니다. '피연

자바스크립트 기본 1.7. 형 변환

Wed, 10 May 2023 01:17:48 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.7. 형 변환 문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환입니다. 은 무언가를 출력할 때 주로 일어납니다. 을 사용하면 문자형으로 명시적 변환이 가능합니다. 원시 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어납니다. 은 수학 관련 연산시 주

자바스크립트 기본 1.6. alert, prompt, confirm을 이용한 상호작용

Thu, 04 May 2023 02:22:17 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.6. alert, prompt, confirm을 이용한 상호작용 브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공합니다. 메시지를 보여줍니다. 사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 함수는 사용자가 입력한 문자열을 반환하고, 취소 또

자바스크립트 기본 1.5. 자료형

Tue, 02 May 2023 04:48:01 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.4. 자료형 자바스크립트에는 여덟 가지 기본 자료형이 있습니다. – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±2 입니다. 53 – 길이 제약 없이 정수를 나타낼 수 있습니다. – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도

자바스크립트 기본 1.4. 변수와 상수

Tue, 02 May 2023 04:46:10 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.4. 변수와 상수 바람직한 변수명 변수에 관한 매우 중요한 사실이 한 가지 더 있습니다. 변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 하죠. 변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다. 변수명만 슬쩍 봐도 초보자가 코드를 작

URL 인코딩 과 디코딩 (url encoding or decoding)

Thu, 27 Apr 2023 09:07:28 GMT

인코딩과 디코딩 인코딩 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화. 웹에서 통신시 한글 같은 유니코드 문자가 오작동을 일으킬 수 있으므로 필요함. 디코딩 인코딩과 반대로 문자를 원래대로 되돌리는 것. JS 인코딩, 디코딩 함수 상황에 맞게 사용할수 있지만 과 를 사용하는것이 좋다. 나머지 함수들은 스크립트내에서 사용을 지양한다. (스크

자바스크립트 기본 1.3. 엄격 모드

Thu, 27 Apr 2023 07:44:15 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.3. 엄격 모드 지시자 , 혹은 는 단순한 문자열처럼 생겼습니다. 하지만 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작합니다. 즉 자바스크립트가 묵인했던 에러들의 에러메시지를 발생시키며 엄격한 문법 검사가 이뤄집니다. 는 스크립트 최상단에 있어야 한다는 점을 잊지 마세요. 그렇지

날짜에 따라 구매 버튼 활성화

Thu, 27 Apr 2023 07:41:13 GMT

랜덤으로 이미지 생성 (랜덤 팝업 모달)

Thu, 27 Apr 2023 07:36:50 GMT

스크롤 이동 버튼

Thu, 27 Apr 2023 07:31:36 GMT

파라미터 값에 따라 스크롤 이동

thumb swiper 썸네일 스와이퍼 , 스와이퍼 연동

Wed, 26 Apr 2023 10:41:13 GMT

1.loop 모드 2.기본 모드 3.썸넬과 연결된 loop모드 (썸넬클릭시 이동) 내가 사용한 코드

scroll 에 따라 이미지 FadeIn 효과

Wed, 26 Apr 2023 10:24:36 GMT

css 속성중 filter 속성을 이용하면 간단하다. 제이쿼리를 이용해 간단히 구현했지만 추후 옵저버를 이용해 리펙토링 코드도 남겨놓겠다.

자바스크립트 기본 1.2. 코드구조

Wed, 26 Apr 2023 09:06:24 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.1.코어자바스크립트 세미콜론은 줄바꿈을 의미합니다. 또한 줄 바꿈이 있다면 세미콜론을 생략할 수 있습니다. 하지만 자바스크립트가 이를 추정하지 ‘못하는’ 상황도 존재합니다. ex) 대괄호 앞에는 세미콜론이 있다고 가정하지 않기 때문입니다. ♥ eddy’s point 줄 바꿈으로 문을 나눴더라도, 문 사이엔

vanilla javascript carousel (slider)

Mon, 24 Apr 2023 08:33:32 GMT

css html javascript

자바스크립트 기본 1.1. Hello world!

Mon, 24 Apr 2023 08:28:04 GMT

♠코어 자바스크립트 ♣ 자바스크립트 기본 ♥ 1.1.Hello world! 웹 페이지에 자바스크립트 코드를 추가하기 위해 태그를 사용하며 HTML 문서 대부분의 위치에 삽입할 수 있습니다. 과 속성은 필수가 아닙니다. 외부 스크립트 파일은 와 같이 삽입합니다. ♥ eddy’s point HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주

디자인 패턴 7. Proxy Pattern, 프록시 패턴

Fri, 14 Apr 2023 10:00:27 GMT

디자인패턴 프록시패턴(Proxy Pattern) 이란? 프록시(Proxy)를 번역하면 대리자, 대변인의 의미를 갖고 있다. 대리자, 대변인은 누군가를 대신해서 그 역할을 수행하는 존재이다. 이는 프로그램에도 똑같이 적용된다. 즉, 프록시에게 어떤 일을 대신 시키는 것이다. 어떤 객체를 사용하고자 할때, 객체를 직접적으로 참조하는 것이 아닌 해당 객체를

디자인 패턴 6. Command Pattern, 커맨드 패턴

Fri, 14 Apr 2023 08:27:32 GMT

디자인 패턴 커맨드 패턴이란? 요구사항을 객체로 캡슐화할 수 있으며,매개변수를 사용하여 여러 가지 다른 요구 사항을 집어넣을 수 있다. 요청 내역을 큐에 저장하거나 로그로 기록할 수 있고, 작업취소 기능도 지원한다. 실행될 기능을 캡슐화함으로써 주어진 여러 기능을 실행할 수 있는 재사용성이 높은 클래스를 설계하는 패턴 즉, 이벤트가 발생했을 때 실행될 기

디자인 패턴 5. Facade Pattern, 파사드 패턴

Thu, 13 Apr 2023 07:54:52 GMT

디자인 패턴 파사드 패턴이란? Facade는 '건물의 정면'을 의미하는 단어로서 하나의 단순화된 인터페이스를 통해서 시스템 안에 내포되어 있는 기능들, 프레임워크 기타 서브클래스 등에 쉽게 접근할 수 있도록 도와주는 패턴이다. 클라이언트는 Order 에만 집중하면 되고 그 외에 발생한 세세한 이벤트들은 시스템 내부에서 처리하며 음식 준비가 되면 클라이언

디자인 패턴 4. Observer Pattern, 옵저버 패턴

Thu, 13 Apr 2023 06:41:07 GMT

디자인 패턴 Observer pattern이란? 옵서버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. Observer(관찰자) 상태 변화를 감지하는 대상이다. 옵저버에는 함수

디자인 패턴 3. Factory Pattern, 팩토리 패턴

Wed, 12 Apr 2023 12:48:30 GMT

디자인 패턴 팩토리 패턴이란? 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화하는 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 장점 상위 클래스와 하위 클래스가 분리되어 느슨한 결합을 가지지만 상위 클래스에서는 인스턴스 생성 방식에 대해

디자인 패턴 2. Adapter Pattern, 어댑터 패턴

Wed, 12 Apr 2023 11:33:00 GMT

디자인패턴 어답터 패턴(Adapter Pattern) 이란? 어댑터 패턴(Adapter Pattern)은 서로 다른 인터페이스를 가지는 두 객체를 연결하여 사용할 수 있도록 하는 구조적인 패턴입니다. 어댑터 패턴을 이용하면, 기존에 작성된 코드를 재사용할 수 있으며, 객체 간의 결합도를 낮출 수 있습니다. 어댑터 패턴은 서로 다른 인터페이스를 가지는 두

디자인 패턴 1. Singleton Pattern, 싱글톤 패턴

Wed, 12 Apr 2023 08:51:31 GMT

디자인 패턴 싱글톤패턴(singleton pattern) 이란? 싱글톤 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴이다. 동일 클래스로 new 를 해도 인스턴스 하나만 존재한다는 것이다. 싱글톤 패턴을 사용하면 고정된 메모리 영역에 인스턴스 하나만을 사용하기 때문에 메모리 낭비를 방지할 수 있다. 또한, 싱글톤으로 만들어진

Lazy Loading...

Tue, 11 Apr 2023 08:36:45 GMT

Image Lazy Loading... 현재 화면에 보여지지 않는 이미지들은 lazy loading 처리를 통해 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상 시킬 수 있다. image lazy loading 기법은 무엇인지, 그리고 해당 기법을 IntersectionObserver API를 사용한 예시를 보면서 알아보자. Image Lazy

스크롤 인터랙션만들기

Fri, 17 Mar 2023 09:19:39 GMT

스크롤 인터랙션 만들기 나이키, 아디다스, 컨버스 등 여러 이커머스들의 상세페이지에서 사용되는 스크롤 인터랙션을 도입하게 되었다. 처음엔 좌우 영역에 스크롤을 만들고 어떤 방법으로 둘을 연결할 수 있을까 고민했으나 CSS 속성의 sticky 를 이용하면 간단할 것 같았다. 완성된 스크롤 인터랙션 생각했던 방법은 간단했다. 스크롤 이벤트를 감시하다가

두 배열 비교 후 중복 제거

Fri, 17 Mar 2023 03:06:36 GMT

같지 않은 것을 구할땐 other.id !== item.id 이 아닌 !b.some 를 이용해야 한다.

다른 배열 동일 아이디 정보 삽입하기

Wed, 01 Mar 2023 17:37:00 GMT

객체의 문자열 반환

Wed, 01 Mar 2023 17:32:46 GMT

https://stackoverflow.com/questions/32464948/mapping-object-to-key-value-string-in-one-line

PC 수평 스크롤 터치 (클릭 드래그)

Wed, 01 Mar 2023 17:24:10 GMT

Jqaury로 수정한 버전

Django 내장 템플릿 필터

Wed, 18 Jan 2023 04:38:33 GMT

Built-in Template filter add 변수에 값을 추가함. 두 값을 정수로 강제 변환. 정수로 변환이 되면 더하기가 됨. addslashes 따옴표 앞에 슬래시를 추가함. capfirst 첫번째 문자를 대문자로 바꾼다. 문자가 아닌경우 효과가 없다. center 주어진 폭의 필드에 중앙을 마춤 cut 인수로 주어진값을 모두 제거 d

Intersection Observer 이해하기 (무한스크롤)

Fri, 23 Dec 2022 10:30:06 GMT

Intersection Observer 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하

CSS 아이폰 안전영역(safe area) 대응 : 아이폰 노치 대응

Mon, 19 Dec 2022 06:03:57 GMT

안전영역(Safe Area)이란? Safe Area는 원래 TV에서 처음 도입된 개념입니다. TV 해상도 비율이 다양해지면서 영상에서 타이틀, 자막 등이 필수 콘텐츠의 노출을 보장할 수 있는 영역입니다. 보통 오래된 TV 해상도가 가진 4:3 비율 기준으로 타이틀, 자막 등이 모두 노출되게 작업을 했습니다. TV Safe Area (http://www.i

jQuery scroll 위치 감지하여 버튼 숨기기

Fri, 16 Dec 2022 07:04:39 GMT

HTML jQuery

jQuery scroll 이동 버튼

Fri, 16 Dec 2022 06:55:12 GMT

HTML jQuery

CSS pure css slide (keyframe slider) 전광판 효과

Thu, 15 Dec 2022 09:22:41 GMT

pure css slide (keyframe slider) 무한 루프되는 이미지 슬라이드 애니메이션을 구현해야 했다. 처음엔 익숙한 swiper 라이브러리를 이용하여 구현해봤다. 문제없이 구현 되었나 싶었는데 이슈가 생겼다. pc나 모바일 성능에 따라 슬라이드의 다음 이미지가 움직일때 간헐적으로 슬라이드가 멈칫하는 느낌을 받는다. 스택오버플로우를 찾

NHN 코딩 컨벤션에 따른 CSS 선언순서

Thu, 08 Dec 2022 13:57:21 GMT

네이버 코딩 컨벤션 사용 CSS 선언순서 1.레이아웃 display visibility overflow float clear position top right bottom left z-index 2.Box width height margin padding border 배경 background 폰트 color letter-spacing text-align

CSS 형제요소로 개수 알아내기 (개수 별 스타일적용)

Thu, 08 Dec 2022 13:50:02 GMT

/ li가 하나일 때 / li:first-child:nth-last-child(1) { width: 100%; } / li가 두개일 때 / li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } / li가 3개일 때 / li:first-child:n

ㅇ

Sun, 04 Dec 2022 16:36:40 GMT

ㅇ

d

Sat, 03 Dec 2022 18:02:25 GMT

React api 통신 로딩,에러처리

Sat, 03 Dec 2022 05:06:30 GMT

커스텀훅으로 분리 hook hook 사용

ㄷ

Sat, 03 Dec 2022 01:45:24 GMT

ㄷ

jQuery Youtube 임베드 (youtube api)

Thu, 01 Dec 2022 05:06:00 GMT

프로젝트 진행 중 페이지에 유튜브 영상을 삽입해야 했다. youtube api 를 이용했으며 이를 기록해보고자 한다. 단순한 iframe 태그로 삽입하는 방법. 사용자의 자유도가 좀 떨어지며 별로 권장되진 않는다. 방법은 너무 쉽기 때문에 따로 포스팅하지 않겠다. youtube API를 이용해 플레이어를 삽입한다. => youtube DEVELOPERS

Swiper 옵션 정리

Thu, 01 Dec 2022 04:43:00 GMT

그동안 늘 캐러셀을 구현하기 위해 swiperjs 라이브러리를 사용했었다. 다행히도 입사한 회사에서도 swiperjs를 쓰고 있기에 어렵지 않게 적용하였다. 이참에 옵션들을 정리 해보려 한다. 자주쓰는 옵션 추가옵션 초기화 설정 초기화 설정 방법은 2가지가 있다. swiper가 초기화 될 때, 초기화 된 후 설정을 할 수가 있다. on을 매개 변수로 전

CSS IR 기법

Sun, 27 Nov 2022 16:04:51 GMT

개념 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다 웹 접근성의 일환으로, 그림을 보는 데에 장애가 있어 리더기를 통해 웹 문서에 접근할 때에 필수적이다 웹 접근성이란? 어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록

css 이미지 비율 유지 및 조정

Sun, 27 Nov 2022 13:51:38 GMT

1.padding 을 사용한 비율 조정 padding-top, 또는 padding-bottom을 이용하는 방법 padding 의 기준을 부모의 width로 가지기 위해서 부모 컨테이너 가 필요 부모 컨테이너에 padding-top, 또는 padding-bottom에 원하는 비율을 넣는다. (가로/세로)*100 calc()를 활용할수도 있다. posi

jQuery find,filter / animate 활용

Sun, 20 Nov 2022 10:57:31 GMT

html 선택자 응용 find, filter 공백 o = find 공백 x = filter #images p span { } -> $image.find('span') #images p.strong { } -> $image.filter('strong') span,strong { } -> $image.find('span, strong') #images p:

jQuery 애니메이트 메서드

Sun, 20 Nov 2022 07:38:03 GMT

jQuery 애니메이트 메서드 animate 선택자.animate({속성:값,속성:값},시간,이징,다른할일(animate끝나고)) jQuery에서 animate메서드는 수치가바뀌는 것만 가능 그래서 'background-color' 변경은 'animate'메서드로 적용이 안되는데 jQueryui라이브러리 추가 후 사용가능 stop() animate

jQuery 실행 시점 제어하기

Sun, 20 Nov 2022 07:22:50 GMT

jQuery 실행 시점 제어하기 자주 사용하는 실행 시점 특정 요소에 마우스 포인터를 올려놓은 시점 mouseover 특정 요소에서 마우스 포인터가 벗어나는 시점 mouseout 특정요소를 클릭하는 시점 마우스를 움직이는 시점 창 크기가 바뀌는 시점 스크롤 시점 mouseover / mouseout 예전에는 bind메서드 사용했지만 현재는 on메서

jQuery css 스타일 변경하기 (선택자)

Sun, 20 Nov 2022 07:03:35 GMT

css 스타일 변경하기 선택자 자바스크립트와 비교

1Day 1Test_N개의 최소공배수

Fri, 18 Nov 2022 20:06:12 GMT

📖 1Day 1Test 📍 N개의 최소공배수 📍 풀이

React 스크롤이벤트를 이용한 무한스크롤

Fri, 11 Nov 2022 19:08:19 GMT

리액트에서 무한스크롤을 구현하는 방식은 를 사용하거나 를 이용한 방식 또는 잘 만들어진 를 사용하는 방법들이 있다. 그중 가장 보편적인 Scroll event 를 사용하여 쉽고 빠르게 구현했다. 🍀 api 통신 나는 axios를 사용했고 다양한 방법이 있지만 백엔드와의 약속에서 url 파라미터로 10을 보낼경우 0~9까지의 리스트를 20을 보낼경우

React 모달 밖 영역 클릭시 닫기

Wed, 09 Nov 2022 00:08:25 GMT

🍀 useState 만 사용했던 방법 모달안에 있는 닫기 버튼을 누르지 않아도 모달 바깥의 부분을 클릭 했을 때 모달이 닫히는 기능은 사용자 경험상 꼭 필요한 기능이다. 나도 꽤 예전 프로젝트부터 이 기능을 구현 했었는데 사실 아주 간단하게 오직 useState만 가지고 구현했었다. 아주 단순하게 생각해서 모달바깥부분에 투명한 배경을 뷰포트 크기로 깔고

WIL 22.10.31~22.11.06

Mon, 07 Nov 2022 11:58:38 GMT

🏆 지금은 취업 준비 중 🍀 코딩 과제 항해 99의 수료식이 끝나고 예정되어 있던 가족여행을 다녀오느라 꿀같던 1주일간의 휴식을 보냈다. 곧바로 취업에 뛰어든 나는 여행을 가기전 여기저기 이력서를 넣었었는데 하필 여행 기간중에 코딩과제가 출제되어 여행이 끝난 후 제출까지 3일밖에 시간이 남지 않았었다. 제출을 목표로 프로젝트를 시작했고 다행히

Scroll 에 따른 fixed 구현하기

Sat, 05 Nov 2022 13:15:55 GMT

Kream 클론코딩 중 구현해야 했던 Scroll에 따른 fixed 왼쪽의 캐러셀이 빨간박스에 닿으면 멈춰보이게 해야한다. (이해를 돕기위해 Kream서비스에 border를 넣었다.) 현재 상황 현재 fixed인 초록 박스를 삼항연산자로 조건부 스타일링을 해주면 된다. 그러기 위해선 스크롤값을 구하고 일정 스크롤 값에 도달하면 useState hoo

1Day 1Test_피보나치 수

Wed, 02 Nov 2022 17:16:06 GMT

📖 1Day 1Test 📍 피보나치 수 📍 풀이 📍 회고

Nextjs+Typescript 에서 import image하기

Mon, 31 Oct 2022 04:52:56 GMT

Module parse failed: Unexpected character ' ' (1:0) 날 하루종일 괴롭힌 에러 next-images도 하고 Next/image도 써보고 next.config.js에 모듈도 추가해주고 node도 업데이틀하고 스택오버플로우와 구글링으로 모든걸 다 해봤지만 에러는 여전했다. 잠시 휴식 후 천천히 찾아보니 Typescri

Next.js에서 Styled-components 적용하기

Sat, 29 Oct 2022 19:59:31 GMT

문제 styled-components yarn add styled-components @types/styled-components 를 진행 했지만 새로고침 즉 새로고침시 스타일이 적용 안되는 문제가 발생. 해결 1 Step 바벨 플러그인 설치 .babelrc 최초 SSR 이후 CSR로 라우팅을 하게 되는데, 이 때 서버에서 생성하는 해시값과 브

React 클립보드 복사 구현하기

Fri, 28 Oct 2022 11:32:45 GMT

navigator.clipboard.writeText(code) 1.onClick할 때 copyString() 함수의 파라미터로 복사할 code를 전달한다. 2.navigator.clipboard.writeText(code) 전달받은 code를 복사하는 함수. 3.setCopyModal(true)를 실행해 삼항연산자를 이용한 스타일링으

[more button] 더보기 기능 useState 이용하기

Thu, 27 Oct 2022 19:02:08 GMT

예제코드 슈프라이즈 클론코딩

모달창 팝업시 뒷배경 스크롤 막기

Thu, 27 Oct 2022 18:53:24 GMT

모달창이 팝업 될 때 document.body.style.overflow = "hidden"; 모달창이 꺼질 때 document.body.style.overflow = "unset" 예제

moment.js 에서 day.js로 변경하기

Wed, 19 Oct 2022 07:05:35 GMT

Moment.js는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리이다. Moment.js는 날짜 및 시간과 관련된 라이브러리 중에서 가장 오래되었으며, 많은 개발자들에게 사용되었지만, 현재 다음 두 가지 이유로 개발이 중단되었다. 🌞 Moment.js의 단점 Moment.js의 용량 문제 일반적인

1Day 1Test_숫자의 표현

Mon, 17 Oct 2022 10:04:27 GMT

📖 1Day 1Test 📍 최댓값과 최솟값 📍 풀이 효율성테스트 실패한 풀이 통과한 풀이

항해 99 를 수료한 후기 (프론트엔드)

Sat, 15 Oct 2022 18:03:40 GMT

드디어 99일간의 항해가 끝났다. 99일간의 솔직한 후기를 기록해보려고 한다. 항해99 를 선택한 이유 난 평소 물건을 하나 살때도 모든 면을 자세히 비교해보고 사는 성격이다. 그런 내가 부트캠프를 들어가겠다고 생각한 이상 밤낮으로 여러 부트캠프를 조사했다. 그중 세개를 추렸었고 제x베x스 vs 코x스x이츠 vs 항해99 였다. 그중 제x베x스는 후기가

1Day 1Test_구명보트

Mon, 10 Oct 2022 23:35:53 GMT

📖 1Day 1Test 📍 구명보트 📍 풀이 구명보트를 최대한 적게 사용하려면 가장 무거운 사람과 가장 가벼운 사람이 타야한다. 1.무게순으로 정렬한다. people = people.sort((a,b)=>b-a); 2.최대값과 최소값의 합이 무게제한보다 낮으면 두사람을 빼고 구명보트 수를 더한다. if(people[i]+people[j] <= lim

SeaTUDY 스터디 스케줄러

Sun, 09 Oct 2022 12:16:02 GMT

🐬 SeaTUDY 스터디 스케줄러 함께 공부하는 즐거움을 주어 공부에 지속적인 동기부여 를 주고, 게임화(Gamification)를 더하여 경쟁심을 자극해 자발적인 공부를 유도 하며, 자기주도 학습능력 향상을 통한 목표지향적 능력 개발 도모 하는 서비스를 만들고 싶었습니다. 공부포인트를 쌓아 물고기캐릭터도 모으고, 랭킹 시스템을 통해 재밌게 공부해보세요!

Lodash의 Debounce와 Throttle을 이용한 최적화

Sun, 09 Oct 2022 12:14:18 GMT

🌎 Debounce와 Throttle을 이용한 최적화 debounce, throttle은 이벤트의 반복 실행시 콜백 함수의 불필요한 실행을 줄이는 역할을 한다. 이로 인해 클라이언트가 혜택을 볼 수도 있거나 혹은 서버 측에 불필요한 리퀘스트를 줄일 수도 있다. 예를 들어 우리가 실시간으로 ‘감사합니다’ 를 검색할때 ㄱ,ㅏ,ㅁ,ㅅ,ㅏ,ㅎ,ㅏ,ㅂ,ㄴ,ㅣ,

WIL 13주차 (실전프로젝트 마지막주차)

Sun, 09 Oct 2022 06:46:43 GMT

📖 WIL 13주차 (실전프로젝트 마지막주차) 🌞 회고 >✅ 드디어 배포된 우리의 학습관리 스케줄러 서비스 바로가기 ✅ SeaTUDY.Readme 보러가기 ✅ 항해 99의 마지막 최종발표 영상 보러가기 금요일 드디어 항해99의 종착지인 실전프로젝트 최종발표를 했다. 최종 발표 전 배포를 시작해야 유저테스트 후 받은 피드백으로 수정할수 있었다. 예

1Day 1Test_최댓값과 최솟값

Fri, 07 Oct 2022 03:28:00 GMT

📖 1Day 1Test 📍 최댓값과 최솟값 📍 풀이 📍 회고 Math.max / Math.min 란? Math.max 함수는 숫자 집합중에 가장 큰 수를 리턴하는 함수이며, Math.min 함수는 숫자 집합중에서 가장 작은 수를 리턴하는 함수이다.

1Day 1Test_올바른 괄호

Fri, 07 Oct 2022 00:39:52 GMT

📖 1Day 1Test 📍 올바른 괄호 📍 풀이

WIL 12주차 (실전프로젝트 5주차)

Thu, 06 Oct 2022 02:48:59 GMT

📖 WIL 12주차 (실전프로젝트 5주차) 🌞 회고 정말 바쁜 한주였다. 디자인 이슈 때문에 레이아웃을 고민하고 필요한 이미지들을 찾아가며 코딩을 해야했기에 우리의 계획보다 모든게 늦어졌지만 30시간 코딩 6시간 수면법으로 일주일을 보낸 것 같다. 디자이너가 있을 때 초기 기획은 사이드바가 4개 였지만 디자이너가 나가고 사이드바를 한개로 줄였으나 이

WIL 11주차 (실전프로젝트 4주차)

Wed, 28 Sep 2022 21:39:20 GMT

📖 WIL 11주차 (실전프로젝트 4주차) 🌞 회고 ⛅ 디자이너와의 이별.. 이번주 우리팀에게 큰 문제가 생겼다. 바로 팀의 디자이너와 함께 하지 못하게 된 것인데 우리는 3주차까지 디자이너에게 계속해서 디자인작업을 요구하고 시안이나 디자인의 예시들을 드리며 소통했으나 1주차 와이어프레임초안에서 3주차가 끝나도록 바뀐것은 없었다. 차라리 빠르게 할 수

forEach, map, filter, reduce, find

Wed, 28 Sep 2022 13:43:38 GMT

🌎 forEach, map, filter, reduce, find 위 네 메소드는 배열에서 자주 쓰이면서 비슷한 기능을 하는 메서드들이다. 🌞 .forEach() forEach() 메서드는 각 요소에 대하여 요소값과 인덱스를 활용한 함수를 작성하여 사용하는 메서드이다. 이 때 forEach는 return 값이 없다. 🌞 .map() map()

WIL 10주차 (실전프로젝트 3주차)

Fri, 16 Sep 2022 17:08:02 GMT

📖 WIL 10주차 (실전프로젝트 3주차) 🌞 회고 이번주는 실전프로젝트의 딱 중간이 끝나는 시점으로 중간발표인 mvp 발표가 있었다. 발표는 부리더인 내가 진행하였다. 우리의 mvp는 소셜로그인,체크인체크아웃,캘린더와투두리스트(CRUD),웹소캣을 이용한 채팅 이였다. 다행히 일정에 맞춰 mvp 개발은 맞췄지만 한가지 문제가 있었다. 바로 디자인인데

Axios 와 Fetch

Fri, 16 Sep 2022 17:00:09 GMT

🌎 axios 🌞 axios vs fetch Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스이다. 모던 브라우저에 내장되어 있어 따로 설치할 필요가 없다. node.js의 실험적 기능을 활성화하여 사용할 수 있다. Axios는 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해

setTimeout과 setInterval

Fri, 16 Sep 2022 16:30:19 GMT

🌞 setTimeout과 setInterval 🌥 setTimeout과 setInterval을 이용한 호출 스케줄링 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다. setTimeout을 이용해 일정 시간이 지난

1Day 1Test_짝지어 제거하기

Fri, 16 Sep 2022 16:11:35 GMT

📖 1Day 1Test 📍 짝지어 제거하기 📍 풀이 스택을 이용한다. 1.빈배열을 만들어 s[i]를 하나씩 넣는다. 2.마지막 직전의 문자가 마지막 문자와 같지 않다면 계속해서 배열에 추가한다. 3.마지막 두개의 문자가 같다면 마지막 문자를 제거한다. 📍 스택

1Day 1Test_문자열 내림차순으로 배치하기

Fri, 16 Sep 2022 04:57:05 GMT

📖 1Day 1Test 📍 문자열 내림차순으로 배치하기! 📍 풀이 📍 회고 예시는 정렬이 이미 되어있어서 다른 예시로. s = "DajBziAlC" s.split('') -> ['D', 'a', 'j', 'B', 'z', 'i', 'A', 'l', 'C'] s.split('').sort() -> ['A', 'B', 'C', 'D', 'a', 'i'

TypeScript

Wed, 14 Sep 2022 12:47:06 GMT

🌎 타입 스크립트란? 언어는 크게 정적 타입과 동적 타입 언어로 구분할 수 있다. 타입 스크립트는 자바스크립트에 타입을 부여한 정적 타입 언어입니다. 만약 타입 스크립트를 브라우저에서 실행하려면 파일을 변환하는 트랜스 파일 과정을 거쳐서 사용합니다. 공식적으로는 트랜스 파일이 아닌 컴파일된다고 표현합니다. 컴파일의 경우 한 언어로 작성된 소스 코드를 다른

WIL 9주차 (실전프로젝트 2주차)

Mon, 12 Sep 2022 20:25:19 GMT

📖 WIL 9주차 🌞 회고 지난 주 우린 nextjs를 포기하게 되었다 nextjs를 포기하는대신 타입스크립트를 사용하기로 하며 본격적인 개발에 나섰다. CRUD 를 타입스크립트를 적용하고 새롭게 만드는데 정말 매 순간 벽에 부딪혔다. 사용하지 않았더라면 금방 끝낼것이라고 예상했지만 생각보다 타입스크립트의 벽은 컸다. 처음엔 정말 이걸 도대체 왜들

WIL 8주차 (실전프로젝트 1주차)

Mon, 05 Sep 2022 02:01:41 GMT

📖 WIL 8주차 🌞 8주차 스케쥴 실전프로젝트의 시작 드디어 이번주부터 실전 프로젝트를 시작한다. 프론트엔드 3명 백엔드 4명과 디자이너 한분이 팀을 이뤄 앞으로 총 6주간 프로젝트를 진행한다. 3주 만에 MVP를 담은 실제 서비스를 런칭해보고, 남은 3주간 고객의 피드백을 바탕으로 서비스를 운영하며 개선한다. 이번 주차의 키워드는 과 이다. 우리 팀

React 네이버,카카오,구글 소셜로그인 OAuth

Sun, 04 Sep 2022 07:35:23 GMT

🌎 React 네이버,카카오,구글 소셜로그인 OAuth 네이버와 카카오 그리고 구글 3사의 소셜로그인 방법을 지극히 프론트엔드의 입장에서 기록하고자 한다. kakao developers 문서에서 제공되는 카카오 로그인 과정은 아래와 같으며 방식은 3사 모두 동일하다. 요약하자면 프론트에서 카카오 인증코드를 가지고 카카오 유저의 정보가 담긴 토큰까지

Git branch 전략

Wed, 31 Aug 2022 11:40:55 GMT

🌎Git Branch 전략 🌞 1. gitflow gitflow에는 5가지 브랜치가 존재 master : 기준이 되는 브랜치로 제품을 배포하는 브랜치 develop : 개발 브랜치로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 Merge feature : 단위 기능을 개발하는 브랜치로 기능 개발이 완료되면 develop 브랜치에 Merge r

1Day 1Test_최솟값 만들기

Sun, 28 Aug 2022 17:39:40 GMT

📖 1Day 1Test 📍 최솟값 만들기 📍풀이

React.memo & useMemo & useCallback

Sun, 28 Aug 2022 17:34:46 GMT

🌎 React.memo & useMemo & useCallback 🌧 React.memo, useMemo와 useCallback을 배우기 전에 알아야 하는 것 함수형 컴포넌트는 그냥 함수다. 다시 한 번 강조하자면 함수형 컴포넌트는 단지 jsx를 반환하는 함수이다. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것

WIL 7주차

Sat, 27 Aug 2022 08:38:13 GMT

📖 WIL 7주차 🌞 7주차 스케쥴 이번주차는 실전프로젝트 전 클론코딩주차이다. 현재 운영하는 완성된 사이트를 따라 만들어 보며 실제 서비스 구현에서 어떤 능력이 필요한지 공부하고 사용해본다. 🌞 회고 클론코딩 시연영상 배포된 주소 깃허브 주소 우선 우리 팀은 배민문구를 클론코딩 하기로 정했다. 나는 클론코딩이라는 주제에 맡게 우선 css 요소

1Day 1Test_카펫

Fri, 26 Aug 2022 06:04:42 GMT

📖 1Day 1Test 📍 카펫 📍 풀이

styled-components

Mon, 22 Aug 2022 12:15:11 GMT

🌞 styled-components 🌥 styled-components란 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기

Fork 와 Pull Request

Mon, 22 Aug 2022 09:38:22 GMT

🌞 코드 기여 원리 (Fork 와 Pull Request (PR)) 다음과 같이 Gildong와 Minji 라는 깃헙 리포지토리가 있다고 하자. 이때 Minji가 GIldong 개발자의 프로젝트가 마음에 들어, 같이 프로젝트에 참여해 기여자(Contribute)로서 공헌을 하고 싶다고 한다. 하지만 내가 다른 사람의 저장소에 있는 코드를 수정하거나, 다

1Day 1Test_JadenCase 문자열 만들기

Sat, 20 Aug 2022 21:12:05 GMT

📖 1Day 1Test 📍 JadenCase 문자열 만들기 📍 풀이 📍 회고 charAt() : 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수이다. substring() : 시작 Index에서 끝 Index 전까지 문자열을 잘라서 리턴한다.

WIL 6주차

Fri, 19 Aug 2022 05:23:11 GMT

📖 WIL 6주차 🌞 6주차 스케쥴 이번주는 백엔드와 팀을 이뤄 미니 프로젝트를 진행한다.자유롭게 주제를 정하고 넣어야 할 기능도 특정하지 않고 자유롭게 결정한다. 클론코딩,실전 프로젝트를 앞두고 지난주까지 주특기 주차에 배운것들을 복습하는 시간을 가지며 재정비 한다. 🌞 회고 프로젝 깃허브 주소 프로젝트 시연영상 용량이 커서 이번주는 영상으

1Day 1Test_약수의 합

Sun, 14 Aug 2022 23:59:24 GMT

📖 1Day 1Test 📍 약수의 합 📍 풀이

Git Branch 명령어

Sat, 13 Aug 2022 19:44:11 GMT

Git Branch 명령어 |명령어|-------| |----|----| |git branch | 브랜치 목록 전체를 보여줌 | |git branch branchname | 브렌치네임 이란 이름으로 브랜치생성| |git checkout branchname|브렌치네임 이란 브랜치로 이동 | |git checkout -b branchname| 브랜치 생성과

Redux의 미들웨어 Thunk

Sat, 13 Aug 2022 19:10:39 GMT

🌞 리덕스에서 미들웨어 청크의 역할은 무엇인가? 🌥 리덕스의 네가지 구성 요소 뷰에서 상태값을 변경시키고 싶을 때 액션을 발생시킨다. 뷰에서 dispatch를 호출하여, 리덕스에게 액션이 발생함을 알리게 된다. 액션을 발생시키면, 그 액션을 미들웨어가 처리한다. 리듀서에서는 해당 액션에 의해서(액션 타입) 상태를 어떻게 변경할지 로직이 담겨져 있다.

리액트 Hooks ?

Sat, 13 Aug 2022 17:37:49 GMT

🌎 React Hooks 🌞 1. Hook란 무엇인가? 리액트 훅(React Hooks)이란 리액트 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다. 기존 방식의 경우 상태 관련 로직이 한 곳에 묶이기

WIL 5주차

Sat, 13 Aug 2022 02:06:58 GMT

📖 WIL 4주차 🌞 4주차 스케쥴 이번주는 주특기(리액트)심화 과정으로 처음으로 팀으로 React App을 을 만든다. CRUD 기능을 이용하여 본문과 댓글을 구현하고 json-server 서버를 배포하여 기능적으로 완성된 웹서비스를 만든다. Redux Toolkit 과 Redux Thunk 를사용한다. 서버와의 통신 위해 Axios 를 사용한다.

1Day 1Test_가장 큰 수

Wed, 10 Aug 2022 17:06:13 GMT

📖 1Day 1Test 📍 가장 큰 수 📍 풀이 📍 회고 >숫자들을 문자로 변환하는 방법에 .map(a=>a+'') 를 사용하는 방법을 구글링을 통해 찾았다. 간단하고 앞으로도 쓸 일이 많을 것 같다.

1Day 1Test_예산

Mon, 08 Aug 2022 17:16:15 GMT

📖 1Day 1Test 📍 예산 📍 풀이 📍 회고 문제를 풀고 다른 사람들의 풀이를 찾아보는데 문 의 사용이 압도적으로 많았다. 아직까지 문의 개념도 잘 모르고 사용해본적도 없는데 이번 기회를 통해 문을 공부하였다. 반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면

1Day 1Test_약수의 개수와 덧셈

Sat, 06 Aug 2022 03:28:31 GMT

📖 1Day 1Test 📍 약수의 개수와 덧셈 📍 풀이 📍 회고 문제를 풀고 다른 풀이드를 찾아봤을 때 꽤 충격을 받았다.. 이렇게 간단한 풀이가 있다니 제곱근이 정수면 약수의 개수는 홀수이다. 중학교 수학인 약수의 개수를 구하는 공식을 난 잊고있었다..

동기와 비동기

Fri, 05 Aug 2022 16:39:17 GMT

🌞 동기와 비동기 동기Syncronous와 비동기Asynchronous는 프로그래밍 언어에서 중요한 개념이다. 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말하며 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다. 🌥 자바스크립트에서 동기와 비동기 자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있

1Day 1Test_포켓몬

Fri, 05 Aug 2022 16:11:08 GMT

📖 1Day 1Test 📍 포켓몬 📍 풀이 📍 회고 문제의 길이가 상당히 길었지만 이해하면 아주 간단한 문제였다. 은 두번째로 사용해본 것 같다. Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있다. 하나의 Set 내 값은 한 번만 나타날 수 있으며. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일해야 한다. 그래서 값이 같은지

1Day 1Test_나머지가 1이 되는 수 찾기

Thu, 04 Aug 2022 06:50:27 GMT

📖 1Day 1Test 📍 나머지가 1이 되는 수 찾기 📍 풀이 📍 회고 반복문을 사용하여 가장 작은 수부터 차례대로 나눠주는 코드를 작성하였다. 하루에 하나씩 풀기로 다짐했는데 쉬운것만 찾아 푸는게 아닌가 반성하게 된다. 그래도 이런 작은 시도가 언젠간 도움이 되었으면 하는 바람이다.

Redux란 ?

Thu, 04 Aug 2022 03:08:51 GMT

🌎 Redux 🌞 1. 리덕스란 무엇인가? “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 이다. 프론트엔드 개발자들은 “리덕스”를 라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. 🌞 2. 리덕스가 필요한 이유 🌧 props 로 s

State, Props, 리렌더링 발생 조건

Thu, 04 Aug 2022 02:33:39 GMT

🌎 State, Props, 리렌더링 발생 조건 들어가기전에 ❗ 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 🌞 1. State 란? 리액트를

WIL 4주차

Thu, 04 Aug 2022 01:56:06 GMT

📖 WIL 4주차 🌞 4주차 스케쥴 이번 주차는 주특기 숙련 주차로 저번 입문주차 개인과제인 My Todo List 를 ,,을 이용하여 다시 만드는 것이다. todos 데이터는 redux 를 사용하여 전역으로 상태를 관리한다. (Ducks 패턴으로 구현). react-router-dom 을 이용해 상세페이지를 만들고 - Todo의 ID,제목,내용을 보

1Day 1Test_같은 숫자는 싫어

Wed, 03 Aug 2022 03:19:15 GMT

📖 1Day 1Test 📍같은 숫자는 싫어 📍풀이 📍회고 배열의 원소를 유지하고 필요한 원소들을 반환하여 새로운 배열을 만드는 메서드인 를 사용해야 겠다라는 생각이 바로 들었다. 사용해야하는 함수는 바로 생각이 나지만 어떤 방식으로 문제를 해결할지는 늘 고민이 된다. 인덱스 넘버를 이용해 요소 하나씩 다른요소들과 비교해 일치하지 않는 요소만 반환해

1Day 1Test_K번째 수

Mon, 01 Aug 2022 19:42:56 GMT

📖 1Day 1Test 📍K번째 수 📍 풀이 📍 회고 2차원 배열을 풀어내기 위해 가장 먼저 사용한 건 반복문이다. 배열을 잘라야 하는 것에서 메소드를 정렬한다는것에서 메소드를 사용하였다. 까지 자주 사용하던 함수들이라 쉬운 문제였지만 리액트를 배우고 있는 과정이므로 중요한 배열함수인 을 이용하여 다시 풀어보았다.

JavaScript의 ES란?, ES5/ES6 문법 차이

Thu, 28 Jul 2022 07:02:23 GMT

🌞 JavaScript의 ES란?, ES5/ES6 문법 차이 ⛅ JavaScript의 ES란? ES는 ECMA Script의 약자 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제

Git setting 및 명령어

Thu, 28 Jul 2022 06:19:03 GMT

앞으로 일주일에 한번은 알고리즘이나 Git에 대해 공부하려한다. 마침 3주차 과제를 깃허브에 올려야했는데 기존에 사용했던 소스트리를 사용하지 않고 터미널을 이용하며 공부했다. 독학시절에도 터미널을 사용했었지만 오랜기간 사용하지 않았더니 명령어들이 잘 생각나지 않아 아주 기초부터 다시 시작했다. 이미 해놓은 Git 설치는 제외하고 기본 터미널도 환경설정으

WIL 3주차

Tue, 26 Jul 2022 09:47:42 GMT

📖 WIL 3주차 🌞 3주차 스케쥴 드디어 주특기 입문 주차에 진입하며 이번 3주차를 함께할 새로운 조를 편성받았다. 리액트 학습 자료 주고 그것을 바탕으로 TodoList를 만드는것이 이번 주차의 개인과제이다. hook은 오직, javascript 내장 메서드는 , 만을 이용하여 TodoList를 만들며 리액트 라이브러리의 초기설정과 기초지식을 배운

WIL 2주차

Thu, 21 Jul 2022 14:34:27 GMT

📖 WIL 2주차 🌞 2주차 스케쥴 사전 웹개발 5주차 과정과 1주차 미니웹프로젝트로 전반적인 웹에 대한 이해가 쌓였다. 프론트엔드를 독학 하던 때엔 데이터는 백엔드가 다루는거 아니야?? 라고 생각했는데 풀스택을 맛보며 예전엔 이해 하지 못했던 백엔드와 프론트엔드의 연결과 프론트엔드도 반드시 데이터에 대해 어느정도는 알아야 한다고 생각하게 됐다. 2주

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

Wed, 20 Jul 2022 08:44:02 GMT

🔍 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 📎 느슨한 타입(loosely typed)의 동적(dynamic) 언어 느슨한 타입이 무엇인지 느슨한 타입이 아닌 것은 무엇인지 둘 다 이해하는 것이 중요하다. 느슨한 타입은 타입 없이 변수를 선언하는 것이다. 반면에 강력한 타입(strong typing)을 사용하는 언어

알고리즘 테스트 28문제

Tue, 19 Jul 2022 10:37:55 GMT

📖 프로그래머스 알고리즘 테스트 풀이 및 회고 📍 1. 직사각형 별찍기 문제 풀이 회고 -사전 프로젝트에 사용했던 메소드인 .repeat을 이용하여 for 문을 돌렸다. 문자열을 반복한 값을 반환하는 메소드. 다른풀이 https://school.programmers.co.kr/learn/courses/30/lessons/12969/solution

JWT를 이용한 로그인/회원가입

Sun, 17 Jul 2022 22:14:09 GMT

🔑 JWT(Json Web Token) 웹 상에서 정보를 Json형태로 주고 받기 위해 표준규약에 따라 생성한 암호화된 토큰이다 JWT는 Json Web Token의 약자로 일반적으로 클라이언트와 서버 사이에서 통신할 때 권한을 위해 사용하는 토큰이다. 이 토큰은 클레임(Claim) 토큰 기반으로 되어있다. 📎 JWT의 구성요소 JWT는 헤더(h

웹개발 과제

Sun, 17 Jul 2022 20:19:50 GMT

1.팬명록 2.영화기록하기 3.화성땅구매 4.버킷리스트

항해99 1주차 미니프로젝트 S.A

Sun, 17 Jul 2022 19:18:15 GMT

## 1. 프로젝트 명 오늘의책 ## 2. 프로젝트 소개 오늘 읽기 좋은 책을 랜덤으로 추천해주고 최신 베스트셀러를 안내하는 웹페이지. ## 3. 와이어프레임 첫 페이지 회원가입 페이지 로그인 페이지 오늘의 추천 도서 페이지 베스트셀러 페이지 책 정보 페이지 ## 4.기능별 API 설계 | 기능 | Method | URL | Request | Re

WIL 1주차

Sun, 17 Jul 2022 18:32:47 GMT

📖 WIL 기록을 시작하며... 나는 비전공자 이며 코딩경험은 패스트캠퍼스 온라인강의 '프론트엔드' 100시간 강의를 독학한게 전부이다. 본격적인 99일간의 항해가 시작하기 전 사전교육으로 웹개발5주차 과정을 수료하였으며 이에 대한 포스팅은 따로 첨부한다. 사전 웹개발 1~5주차 📎 1주차 스케줄 시작과 동시에 조편성을 받아 웹미니프로젝트를 시작

Git/Github 버전관리?

Sun, 10 Jul 2022 15:58:48 GMT

패스트 캠퍼스 온라인 강의를 통하여 독학할때 배웠던 git 버전관리는 터미널을 이용하였다. 항해 99를 개강 전 제공받은 온라인 강의에서는 git 도구인 소스트리를 이용하여 git 을 사용한다. 소스트리를 이용하여 로컬 리포지토리를 생성하여 원격 리포지토리인 git hub에 푸쉬하기전 commit/history 를 바로 볼 수 있다는 장점이 있었다. 개

웹개발 5주차

Mon, 04 Jul 2022 18:53:14 GMT

aws와 파일질라를 이용한 서버에 배포하기 와 도메인 연결 Was 연결 인스턴스 생성 (ubuntu,키페어파일) 생성한 인스턴스 - 보안 - 런치 위자드 3 클릭 - 우칙하단 인바운드규칙편집 클릭 -규칙추가 (포트범위 5000/anywhere ipv4) - -규칙추가 (포트범위 80/anywhere ipv4) - 저장 터미널로 이동 Sudo

웹개발 4주차

Mon, 04 Jul 2022 12:06:54 GMT

flask 를 이용한 개발환경 만들기. app.py // static // templates(index.html) ~~~ from flask import Flask, rendertemplate, jsonify, request app = Flask(name) from pymongo import MongoClient client = MongoClient('

웹개발 3주차

Sun, 03 Jul 2022 14:32:17 GMT

페이지크롤링과 mongoDB를 제어 파이썬 패키지 Requests 크롤링 패키지 bs4(beautifulsoup4) mongoDB 패키지 Pymongo,Dnspython,Certifi 크롤링 기본세팅 import requests from bs4 import BeautifulSoup //타겟 URL을 읽어서 HTML를 받아오고, headers = {'

웹개발 2주차

Sun, 03 Jul 2022 08:33:10 GMT

2주차: jQuery, Ajax 2) Javascript 잠깐 복습 - 홀짝 판별 onclick 함수 만들어보기 짝/홀수 판단하는 방법 [코드스니펫] 짝/홀수 onclick 함수(완성) 3) Javascript 만으로 충분할까요? 예를 들어 버튼의 색깔을 바꾸고 싶다면? 예를 들어 div 박스를 하나 감추고 싶다면? → 이런 것들 쉽게 해주는 것이, jQu

웹개발 1주차

Fri, 01 Jul 2022 19:14:20 GMT

항해99의 사전교육 웹개발 종합반 5주강의가 시작됐다. 패스트캠퍼스 프론트엔드강의를 듣고 항해에 참여하였다. 패스트캠퍼스 강의는 원리와 이해에 강했다면 항해99의 웹개발 종합반은 사전교육이라 그런지 핵심만 짚으며 이해보단 경험을 강조하였다. 장단점이 있지만 빠르게 코딩에 대한 전반적인 흐름과 반복 학습으로 숙달할 수 있었다. 팬명록 html & css