Programming 99

<작성 중 >[js] 슬픔 속에 작성하는 map/filter/forEach... (width 검색창 자동 완성 )

최종면접 탈락 후 슬픔 속에 잠겨 작성하는 map/filter/forEach와 관련된 고뇌입니다. 제가 검색창 자동 완성을 구현할 때 데이터를 전체로 받아 온 후 이를 map 으로 입력 값에 따라 필터링을 하는 방식으로 구현을 했습니다. 지금 생각하면 filter 를 사용해서 원본 배열의 변경 없이 사용할 수 있었을 텐데.. 그때는 map을 사용해야 한다고 레퍼런스 영상에서 얘기해서 그대로 사용했었습니다. 하지만 면접에서 왜 map 을 사용했는지.. 다른 좀 더 효율적인 방법은 없었을까? 라는 질문에 숨이 턱턱 막혀 버렸지 뭡니까.. 그래서 고민하는 데이터 자동 완성 기능과 관련된 고뇌에 대한 글입니다.

[js] 소수 찾기 방법 (width 프로그래머스)

JS에서 소수 찾는 방법 몇 가지를 난이도 별로 정리해보았다. 프로그래머스를 풀다 보면 소수와 관련된 문제들이 많은데 자꾸 까먹고 그래서한번 정리해보겠다. 소수 = 1과 자기 자신으로만 나누어지는 수를 의미합니다. ( 1은 소수가 아닙니다 !) # 관련 프로그래머스 LV01: 소수 찾기 LV02: 소수 찾기 [ Basic ] 소수 찾기 function isPrime(num) { if( num < 2 ){ return false; }; for( let i = 2; i < num; i++){ if( num % i === 0){ return false; } }; return true; } function solution (n) { let count = 0; for( let i = 2; i 를 사용할 수 있습니..

슬프고 힘들땐 난 피그마를 켜...

슬프고 힘들 땐.. 피그마 작업이 제일 재밌다는... 아시는 분께서 프리랜서이신데 그분의 소개 사이트와 컨택 오는 연락 들을 컨트롤 하는 대시보드 (어드민) 페이지를 만들어드려볼까 라는 생각을 했답니다. 이제 기술 스텍을 고민해야 하는데... 대충 유저 플로우랑 어떤 성능 들어갈 지를... 고민 중인데요... 사실 혼자서 풀스텍 해보려고 하는 거라.. 될 지 모르겠네요 ㅋㅋㅋㅋㅋㅋㅋ 취업 도 안되고... 이 차걉디 차갸운 취업 시장 ㅠㅠㅠ 견디려면 다른 곳에 정신을 쏟는 수 밖에...

var , let , const 키워드 다 부셔버리기 ( + 깊은 복사, 얕은 복사 with javascript data type)

var, let , const 에 대해서 아주 사소한 것까지 다 부셔버리기 위해 정리글을 작성합니다. 왜냐면 면접에서 아주 탈탈 털렸기 때문이죠. 핫.핫.핫... 덩달아 가장 기초적인 JS의 털린 부분도 다 깔끔띠하게 정리해봅니다. [1] var, let, const 키워드 정리 자바스크립트는 함수 레벨 스코프를 준수한다. (대부분의 프로그래밍 언어는 블록 레벨 스코프를 준수). 함수 레벨 스코프는 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. # 함수 내부 선언 변수 - 지역 변수 , 함수 외부 선언 변수 - 모두 전역 변수 var 전역 범위 , 함수 범위에서 선언될 수 있는 키워드로 "재선언" 되거나 " 업데이트" 될 수 있습니다. 재선언 될 수 있기 때문에 예상..

(글 장석 + 공부 중 ) Skeleton UI 적용 + UX 사용자 경험 측면 고려

https://velog.io/@skyu_dev/Cache-API-%EC%84%9C%EB%B2%84-%EC%9D%91%EB%8B%B5response%EC%9D%98-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%BA%90%EC%8B%B1%ED%95%98%EC%97%AC-%EB%B6%88%ED%95%84%EC%9A%94%ED%95%9C-%EC%9A%94%EC%B2%AD%EC%9D%84-%EC%A4%84%EC%97%AC%EB%B3%B4%EC%9E%90 [Cache API] 프론트엔드의 자체적인 HTTP caching 구현 및 만료 일자 지정하기 (feat. 서버의 response headers 브라우저의 Cache Storage를 사용하여 프론트엔드에서 자체적으로 HTTP 캐싱과 생명주기 설정을 ..

[Main-Portfolly] 웹 사이트 성능 분석해보기 결과는 그저 아 - 찔

https://pagespeed.web.dev/analysis/https-portfolly013-netlify-app/jsys44hxgw?form_factor=desktop PageSpeed Insights 올바른 URL을 입력하세요. pagespeed.web.dev Page Speed Insight 를 사용해서 내 메인 프로젝트 성능을 측정해보았다. 아 - 찔 근데 이건 그 초반에 애니메이션 페이지의 성능이었고... 메인 페이지로 들어가면ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그렇다면 커뮤니티 페이지로 가보면 ㅋㅋㅋㅋ 아니 데이터는 왜 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아 깜짝이야 url 잘못 찍었었네 .. 하지만 그래도... ㅋㅋㅋㅋㅋㅋㅋㅋ아 - 찔 두근두근 신나는 상세 페이지까지 들어가볼까나... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..

(글 작성 + 공부 중 )웹사이트 성능 최적화 방법 :: Lazy Loading

어쩌다가 로딩 페이지 적용 하는 방법 찾다가 발견해버린 FE Lazy Loading https://tech.trenbe.com/2022/07/20/FE-Lazy-Loading-%EC%A0%81%EC%9A%A9%EA%B8%B0.html FE Lazy Loading 적용기 - 트렌비 기술블로그 FE Lazy Loading 적용기 tech.trenbe.com https://medium.com/@juhyoung.jung1992/react-%EC%B4%88%EA%B8%B0-%EB%A1%9C%EB%94%A9-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0-9ecc22a2bb56 React 초기 로딩 최적화하기 SPA 페이지의 로딩 시간을 최적화하는 법 medium.com https..

[TailwindCSS x Styled-Components] focus/active 효과 적용하는데 다른 작업 하면 사라지는 마법을 해결해보자.

보통 [ :focus / :active ] 설정을 했는데도 적용이 안되거나 다른 작업을 하면(스크롤을 내리거나 다른 빈 페이지를 누르면) 효과가 사라지는 경우를 경험해 보신 분이 있을 거다. ... 저 처럼... ㅎ 일단 원인은 크게 두 가지 1. HTML 폼 요소가 , , 가 아니다. 2. 그냥 기본 웹 브라우저의 동작으로 다른 작업을 수행했을 때 사라지는 것이 정상이다. 1번의 경우는 강제로 상태가 적용 될 수 있도록 [ tabindex = 0 ] 할당하면 처리가 된다. 하지만 2번의 경우 그냥 정상적으로 웹 브라우저가 동작하는 거라 어떻게 처리해야할지 고민이라면.. onClick 이벤트를 이용해서 class를 활성화/비활성화 하는 방법이 있다. > onClick 이벤트를 이용해서 클래스 할당하기 기..

[TS] React에서 하위 컴포넌트로 Props 내려줄 때 타입 객체로 내려주는 경우와 아닌 경우

가끔 하위 컴포넌트로 props 내려줄 때 어떤 경우는 아래처럼, import React from 'react'; export default function Dropwdown(props: { isOpen: boolean }) { const isOpen = props.isOpen; return ( {/* Dropdown 내용 */} ); } 어떤 경우는 요 아래처럼 내려받는 경우가 있었습니다요... import React from 'react'; export default function Dropwdown( isOpen: boolean) { return ( {/* Dropdown 내용 */} ); } 저 isOpen은 상위 컴포넌트에서 토글이나 모달창 On/OFF 역할을 하는 useState 의 상태 변수..

웹사이트 성능 측정할 때 어떤 부분을 측정하는걸까? ( with 측정 가능 사이트 )

사이트 방문자를 늘리기 위해서는 빠른 웹사이트 로드가 필수인 세상이다. 최적화된 웹 사이트를 통해 더 나은 사용자 경험을 제공하기 위해 내가 만든 웹 사이트의 성능이 어느 정도인지 판단하고 성능 최적화 작업 후 비교하고 확인할 데이터가 필요할 것이다. Google의 Web Vitals 메트릭을 가이드라인으로 웹 사이트의 성능을 어느정도 정량적으로 측정할 수 있다. Web Vitals는 사용자가 체감할 수 있는 성능을 수치화 한것이다. 성능 측정 부분을 크게 3가지로 나누어 보자면 1. 로딩 2. 상호작용/반응성 3. 시각적 안정성 이다. # 로딩 1. TTFB : Time To First Byte 브라우저가 웹 페이지 리소스 요청의 응답에 대해 첫 번째 바이트를 수신하기까지 소요된 시간 사용자가 페이지에..