[IT/Programming]/HTML related 썸네일형 리스트형 말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기 # 말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기다음과 같은 , 아랫쪽 말풍선 만드는 법을 구현해서 SEE (Super Easy Edit) of docuK 를 구현했었는데, 이런 말풍선을 어떻게 만들 수 있는지 정리하고 공유하기 위해 포스팅.## PH2024-08-26 : First posting.## TOC## 말풍선 만들기## RRApure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Docume.. 더보기 week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명) # week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명)## PH2024-08-20 : First posting.## TOC## 리액트가 렌더링 하는 방식을 설명리액트의 렌더링 방식은 컴포넌트 기반의 UI 를 효율적으로 업데이트하고 관리하는 데 중점을 둡니다. 주요 단계는 다음과 같습니다:렌더링 단계: 초기 렌더링: 리액트는 컴포넌트 트리의 루트에서 시작하여 모든 자식 컴포넌트를 순차적으로 렌더링합니다. 이 과정에서 JSX 문법으로 작성된 코드를 React.createElement() 호출로 변환하여 React 엘리먼트를 .. 더보기 인스타그램 (Instagram) 퍼오는 법 # 인스타그램 (Instagram) 퍼오는 법인스타그램 (Instagram) 퍼오기. embed 나 iframe tag 로 퍼올 수 있는듯?기본 url 에서 "/embed" 추가해야만 퍼와지는듯. 이것만 CSP (Content Security Policy) 를 외부에 열어둔듯한.## PH2023-06-08 : instagram.com \rightarrow www.instagram.com 으로 바꿔야 제대로 퍼와짐.## TOC## 다음과 같이 /p/post-id/ 형태의 URL 에 embed 를 추가하면 iframe 으로 퍼올 수 있음 .```[.lang-html]```/ ## ```/ Comment 는 따로 글을 긁어서 퍼와야 할듯?## embed instagram feed/userpage (인스타그램 .. 더보기 Encode/Unescape and Decode/Escape URI Component # Encode/Unescape and Decode/Escape URI Componenthttp 주소창에 space 나 한글, 특수문자 같은 것들이 낑겨 있을 경우, 여러모로 에러가 날 가능성이 높아져서 보통 브라우저들이 이런 문자들은 '%AB' 같은 8 bit (?) 어쩌구로 변환시켜 버린다. Javascript 에서 기본적으로 이런것들을 처리하는 encodeURIComponent, decodeURIComponent 함수들을 제공한다.뭐 쓰는 사람은 알아서 공부해서 쓸테니... 인터넷 돌아다니다가 이상한 주소가 실제 어떤 주소인지 궁금할때 이용하시라고 (+내가 쓸라고) 만들어 봄.## PH2023-10-25 : Update. m.escapeXXX... added.## TOC## Decode URI Co.. 더보기 week3 위클리 페이퍼 (var, let, const 를 서로 비교 // 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 // 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명) # week3 위클리 페이퍼 (var, let, const 를 서로 비교 // 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 // 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명)## PH2024-08-12 : First posting.## TOC## var, let, const 를 서로 비교var 는 예전에 쓰던 변수 선언 방식으로 hoisting, 중복 선언 가능, function scope 만 지원 등 프로그래밍을 할 때 안좋은 점, 헷갈리게 하는 점이 너무 많아 요새는 안쓰는 추세로 가고 있다.let 은 변하는 값을 담는 변수를 선언하는 방식으로 primitive 변수나 JSON 등에 두루 쓸 수 있고, const 는 한번 할당되면 변하지 않는 변수 선언으로.. 더보기 코드잇 풀스택 2기 - Week 6 # 코드잇 풀스택 2기 - Week 6스케쥴표: Obsidian.md: ## PH2024-08-20 : First posting.## TOC## RRA[FS 2기] 커리큘럼 시트 (수강생용)https://publish.obsidian.md/iasandcb/ https://publish.obsidian.md/iasandcb/site/2024-08-26 https://publish.obsidian.md/iasandcb/site/2024-08-27 https://publish.obsidian.md/iasandcb/site/2024-08-28 https://publish.obsidian.md/iasandcb/site/2024-08-29 https://publish.obsidian.md/iasandcb/site/.. 더보기 코드잇 풀스택 2기 - Week 5 # 코드잇 풀스택 2기 - Week 5스케쥴표: Obsidian.md: ## PH2024-08-19 : First posting.## TOC## RRA[FS 2기] 커리큘럼 시트 (수강생용)https://publish.obsidian.md/iasandcb/ https://publish.obsidian.md/iasandcb/site/Part+1/2024-08-19 https://publish.obsidian.md/iasandcb/site/2024-08-20 https://publish.obsidian.md/iasandcb/site/2024-08-21 https://publish.obsidian.md/iasandcb/site/2024-08-22 https://publish.obsidian.md/iasandc.. 더보기 코드잇 풀스택 2기 - Week 4 # 코드잇 풀스택 2기 - Week 4스케쥴표: Obsidian.md: ## PH2024-08-05 : First posting.## TOC## RRA[FS 2기] 커리큘럼 시트 (수강생용)https://publish.obsidian.md/iasandcb/ https://publish.obsidian.md/iasandcb/site/Part+1/2024-08-12 https://publish.obsidian.md/iasandcb/site/Part+1/2024-08-13 https://publish.obsidian.md/iasandcb/site/Part+1/2024-08-14 https://publish.obsidian.md/iasandcb/site/Part+1/2024-08-15 https://publis.. 더보기 코드잇 풀스택 2기 - Week 2 # 코드잇 풀스택 2기 - Week 2스케쥴표: Obsidian.md: ## PH2024-07-29 : First posting.## TOC## CSS 레이아웃 (Layout)코드잇: ### Color list```[.scrollable.lang-css]:root { /* Black */ --black-0: #000000; --black-1: #1a1a1a; --black-2: #333333; --black-3: #4d4d4d; --black-4: #666666; --black-5: #808080; --black-6: #a6a6a6; --black-7: #cccccc; --black-8: #e6e6e6; --black-9: #ffffff; /* Dark Red */ --dark-r.. 더보기 코드잇 풀스택 2기 - Week 1 # 코드잇 풀스택 2기 - Week 1## PH2024-07-25 : First posting.## TOC## OT코드잇: , 스케쥴표: 이창신 강사님노유정 운영 매니저오전 - 김주현 클래스 매니저오후 - 강지화 클래스 매니저신예진 교육 PM 매니저LMS (코드잇 사이트 Learning Management System)### TIL (Today I Learned) & WIL (Weekly I Learned)TIL: 계획, 성취, 학습, 개선에 대한 내용은 꼭 포함하여 작성해 주세요!제목: [TIL 1일 차] (각장 개성 있게 글의 제목을 지어주세요!)오늘의 나는 무엇을 잘했을까? → 성취오늘의 나는 무엇을 배웠을까? → 학습오늘의 나는 어떤 어려움이 있었을까? → 개선내일의 나는 무엇을 해야 할까? → .. 더보기 AWS server|서버 에서 GitHub 가 너무 느려질때 해결 방법. # AWS server|서버 에서 GitHub 가 너무 느려질때 해결 방법.How to solve the extremely slow response of GitHub in AWS server EC2 instances. (Use google translate to read the way to solve the problem.)아무리 찾아봐도 해결책을 못찾겠었는데 , AWS 에서 outbound 설정을 좀 바꿔봤더니 해결되어서 해결법을 공유함.## PH2023-09-21 : First posting.## TOC## Outbound보안상 AWS Network & Security :: Security Groups outbound TCP port 를 1024 - 65535 까지만 열어놨었었는데, 이게 문제인거 같.. 더보기 자바스크립트 (JavaScript) 기초 # 자바스크립트 (JavaScript) 기초## PH2024-08-07 : First posting.## TOC## 기본 자료형 (Data type)Premitivenumber: 17, 2.3, 1.3E10, 0xff, 0b1111_1001string: "Some String"boolean (불리언): true, falsenullundefinedsymbol: Symbol("Some symbol")bigint: 909082198012019292109nobject: {}, []## for (let str of strs), for (let key in json)for (.. of ..): 배열 순회할때for (.. in ..): key value 순회할때## RRA프로그래밍과 데이터 in JavaScript .. 더보기 이전 1 2 3 4 5 6 ··· 9 다음 목록 더보기
