[IT/Programming]/HTML related 썸네일형 리스트형 프론트엔드 관점에서의 SOLID 원칙 # 프론트엔드 관점에서의 SOLID 원칙SOLID 원칙은 객체 지향 설계(Object-Oriented Design, OOD)에서 코드의 유지보수성과 확장성을 높이기 위해 제안된 5가지 설계 원칙입니다. 원래는 백엔드 개발과 소프트웨어 공학에서 주로 논의되었지만, 프론트엔드 개발에서도 특히 리액트(React)와 같은 컴포넌트 기반 프레임워크를 사용할 때 적용할 수 있습니다. 프론트엔드 관점에서 SOLID 원칙을 설명하고, 리액트와 같은 환경에서 어떻게 활용되는지 예시와 함께 풀어보겠습니다.## PH2025-03-27 : First posting.## TOC## 단일 책임 원칙 (Single Responsibility Principle, SRP)정의: 한 클래스(또는 컴포넌트)는 단 하나의 책임만 가져야 하.. 더보기 SNS 내보내기/공유하기 (Sharing a URI link through SNS) # SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS)Copy to clipboard, 트위터 (X), 페이스북 (Facebook), 레코이브 (Recoeve.net), 카카오톡 (Kakao talk), 라인 (Line), WhatsApp 등등 SNS 로 공유하기 기능 정리. 도 참고하시길.DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.)문서 왼쪽 위와 젤 아래 중간의 image button 들로 테스트도 해보세요.## TOC## R.. 더보기 React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링 # React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링작성중...React Next.js 애플리케이션에서 사용자가 페이지네이션, 키워드 검색, 필터링 등을 조작할 때 해당 상태를 URL에 반영하여, 뒤로 가기 버튼을 누르거나 URL을 직접 입력해도 이전 상태가 유지되도록 하는 방법을 알아보자.## PH2024-12-31 : First posting.## TOC## URL 쿼리 파라미터 사용페이지 번호, 검색 키워드, 필터 정보를 쿼리 파라미터에 저장합니다.```/list?page=2&limit=10&search=example&filter=active```/## Next.js 의 useRouter 훅 사용```import { GetServerSideProps.. 더보기 코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup # 2기-View-My-Startup-PART-2-1팀웹 상의 현재 문서는 https://view-my-startup-by-team-1.netlify.app/static/2%EA%B8%B0-view-my-startup-1%ED%8C%80 에 있습니다.코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup .노션 (Notion): . (feature & schema)스타일 가이드 참고: .Commit message Convention 참고: [Git] 커밋 메시지 컨벤션(스타일) 가이드 / Commit message Convention(style) guideUdacity Git Commit Message Style Guide.React.js Naming Convention: React J.. 더보기 CSP (Content Security Policy) : iframe, image (img), video blocking # CSP (Content Security Policy) : iframe, image (img), video blocking```document.referrer; // in javascriptreq.headers().get("Referer"); // in vert.x```/referrer 통해서 연결을 허용할 것인가? 말 것인가를 결정하는 거인듯?그런데 CORS (Cross-Origin Resource Sharing) 하고는 좀 다른 개념인건가? 헷갈리네...## RRAMDN - CSP (Content Security Policy) policy directivesMDN - Cross-Origin Resource Sharing (CORS)MDN - The X-Frame-Options response hea.. 더보기 페이스북 퍼오기 (Embeding facebook post) # 페이스북 퍼오기 (Embeding facebook post)페이스북 퍼오는게 옛날보다 쉬워졌음.## TOC## Example아래와 같이 iframe 으로 퍼오도록 바뀌었음. 좋으다. 국내 IT 업체들도 iframe 으로 쉽게 퍼오도록 좀 바꿔주지 =ㅂ=;;그런데 facebook 도 width 를 responsive 하게 동작하도록 안해주긴 했네 ㅡ,.ㅡ;그리고 가운데 정렬이 힘든데? =ㅇ=;; 어떻게 해야 가운데 정렬이 될까나?``` ```/ ## RRAdevelopers.facebook.com - Social Plugins - Embedded Posts 더보기 Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chaining # Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chainingWeb browser 에서 쓰이는, "Object-based based on prototypes" 특성을 갖는 client-side 프로그래밍 언어인 JavaScript를 배워 봅시다. 여기는 제가 헷갈렸던 부분만 조금 정리.## PH2017-08-14: 코드 스타일만 좀 정리. To SEE.2014-06-13: docuK upgrade.2014-05-21: First Posting.## TOC## Making an instance from a constructor function.. 더보기 유튜브 리스트 (Youtube list) 로 퍼오는 법 # 유튜브 리스트 (Youtube list) 로 퍼오는 법유튜브 영상 한개만 있는게 아니라, 리스트로 있는 영상들도 많은데, 이 때 동영상 하나만 퍼오는게 아니라 list 통째로 퍼오는 법을 알고 싶어서 정리하는 글.## PH2024-02-10 : First posting.## TOC## 리스트 퍼오기 예제링크: 그냥 동영상 볼 때의 링크: https://www.youtube.com/watch?v=xHW7KOcqToo&list=PLUbFnGajtZlUl0zYr4crGveP21BbcZG_L&index=1플레이리스트 | Playlist 홈의 링크: https://www.youtube.com/playlist?list=PLU9-uwewPMe05-khW3YcDEaHMk_qA-7lI 는 list=엄청긴_id 이런식.. 더보기 방향키 (위: ArrowUp, 아래: ArrowDown) 로 숫자 조정하기 # 방향키 (위: ArrowUp, 아래: ArrowDown) 로 숫자 조정하기방향키로 숫자 조작을 가능하게 만들어 봅시다. LabVIEW 에서 기본적으로 동작을 지원해줬던거 같은데, 이걸 JavaScript 로 구현해 보려고 함.해당 코드는 https://recoeve.net/ 점수 메기는데 적용되어 있습니다.## PH2024-09-16 : First posting.## TOC## Input Floating Number ## Code```[.lang-html] Floating Number ```/```[#pre-code-change-number]```/## RRA 더보기 jQuery.ripples - 이미지에 물결 그래픽 효과 주기 # jQuery.ripples - 이미지에 물결 그래픽 효과 주기최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글.## PH2023-11-29 : First posting.## TOC## jQuery.ripples.jsjQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다.유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 .. 더보기 event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend) # event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend)event.keyCode 로 단축키 설정하고 이것저것 했었는데 이미 몇년전에 deprecated 되었다네요. 에서 키보드가 눌렸을때의 각 값들을 잘 보여주고 있긴 한데, 한영키나 다른 나라 (중국, 일본 정도?) 키보드에서도 잘 동작하도록 하려면 테스트가 필요할거 같아서 본 글을 작성합니다.Korean, Japanese, Chinese typing handled. event.data on input, compositionstart, compo.. 더보기 week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점) # week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점)## TOC## CSS (Cascading Style Sheets) 의 Cascading에 대해 설명해 주세요.Cascading: 폭포처럼 떨어지는...폭포가 계단형식으로 떨어지는 것처럼 CSS Selector 가 가장 specific (구체적: id, class, tag or postfix (e.g. :hover, :focus, :visited, :nth-child(3), :first-child, ::before, ::after, ::placeholder) 순으로 금은동 메기듯 더 상위 level) 스타일부터 적용시켜 나가면서 덜 spe.. 더보기 이전 1 2 3 4 ··· 9 다음 목록 더보기
