kipid's blog

# JAVA 에서 Selenium 이 제대로 동작 안할 때 해결법org.openqa.selenium.NoSuchSessionException 이 자꾸 뜰 때 해결법.## PH2024-09-05 : First posting.## TOC## JAVA 에서 WebDriver 의 path 를 정해주지 말고, Windows 환경 변수에서 PATH 에 WebDriver directory 를 추가합시다.```System.setProperty("webdriver.chrome.driver", FileMap.preFilePath + "/Recoeve/webdriver/chromedriver.exe");curChromeOptions.setBinary(FileMap.preFilePath + "/Recoeve/webdriver..

# React 를 배워보자. (Learning React) with TypeScript and esbuild bundling## PH2024-08-28 : First posting.## TOC## Initiate React AppBundler 로는 Tree shaking 과 multi threading 을 지원해서 가장 빠르고 좋다는 esbuild 를 사용합시다. ```mkdir hello_reactcd hello_reactnpm init react-app .npm run startnpm install --save-exact --save-dev esbuildnpm audit fix --force// audit 뜻 : 1.감사 2.단속 3.청강 4.세무조사npm install --save-dev @babe..

# week6 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명)## PH2024-09-03 : First posting.## TOC## 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명웹 페이지 렌더링 방식에는 CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static Site Generation) 세 가지가 있습니다. 각 방식의 특징과 사용 상황을 설명드릴게요.### Client-Side Rendering (CSR)특징:브라우저에서 렌더링: 모든 JavaScript 파일을 클라이언트(브라우저)로 전송하고, ..

# week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명)## PH2024-09-02 : First posting.## TOC## useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명useMemo 와 useCallback 는 React 에서 성능 최적화를 위해 사용되는 훅입니다. 각각의 역할과 사용법, 그리고 남용 시 발생할 수 있는 문제점을 설명드릴게요.### useM..

# JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명)## PH2024-08-31 : First posting.## TOC## 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명자바스크립트에서 this 키워드는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행중인 함수 또는 메소드의 "소유자"를 가리킵니다.전역 실행 컨텍스트에서 this 는 전역 객체 (브라우저에서는 window, Node.js 에서는 global..

# 마지막이 ```/ 로 끝나면 error 나는거 해결합시다.어랏 에러가 안나네. 뭐가 바뀐거지? =ㅂ=;;;## PH2024-08-30 : First posting.## TOC## Codes printed```[.scrollable.lang-js]window.m = window.k = {}; // window.m can be asigned another JSON or number/string and so on. But window.k must be kept.(function (m, $, undefined) {m.version0 = "2.12";m.getUTF8Length = function (s) { let len = 0; for (let i = 0; i = 0xd800 && code arr[sort..

# 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)블로그에 물리/수학 관련 이야기를 쓰면서 수식 쓸 일이 많았는데, 해결 방법을 찾았다. 아래아한글 (hwp), MS-word도 수식입력기를 지원하지만, 복사와 편집이 쉬운 plain text 형태의 LaTeX 수식이 갑인듯 하다. 입력 방법에는 대략 아래와 같은 방법들이 있다. 각자 편할데로 골라잡자.윈도우에서는 (Windows 7부터인가?) 손글씨로 입력한 수식도 인식하고 디지털화 해주는 수식입력기 (Math Panel Input) 도 기본 프로그램으로 제공한다. 이런 프로그램은 대체 어떻게 짠건지... 후덜덜;; Tablet PC가 대중화되면서 많은 사람들이 이용하기 시작할듯? 손으로 쓸..

# React 사용 설정하기 (esbuild) with TypeScript우선 node.js 를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (Bundler 로는 가장 빠르다고 알려진 esbuild 를 깔자.)```[.linenums]npm init -ynpm install --save-exact --save-dev esbuildnpm install react react-dom jquery immer use-immernpm install typescript typescript@next @types/react @types/react-dom @types/jquery ts-loader @babel/preset-typescript --save-dev..

# Rotating circles using CSS (Spinner, @keyframes, @-moz-keyframes, @-webkit-keyframes)로딩 오래걸릴때 로딩중 알려주는 rotating circles 구현해 봅시다.## PH2023-09-10 : First posting.## TOC## Rotating circles```[.linenums.lang-html]```/## RRAcodepen.io :: Rotate Circle using CSS

# 말풍선, 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 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명)## PH2024-08-20 : First posting.## TOC## 리액트가 렌더링 하는 방식을 설명리액트의 렌더링 방식은 컴포넌트 기반의 UI 를 효율적으로 업데이트하고 관리하는 데 중점을 둡니다. 주요 단계는 다음과 같습니다:렌더링 단계: 초기 렌더링: 리액트는 컴포넌트 트리의 루트에서 시작하여 모든 자식 컴포넌트를 순차적으로 렌더링합니다. 이 과정에서 JSX 문법으로 작성된 코드를 React.createElement() 호출로 변환하여 React 엘리먼트를 ..

# 인스타그램 (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 (인스타그램 ..

# 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스케쥴표: 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스케쥴표: 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스케쥴표: 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스케쥴표: 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## 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 가 너무 느려질때 해결 방법.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) 기초## 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 ..

# jQuery 분석 (Analysis): $.find([CSS Selector]) and $.parents([CSS Selector])요새 jQuery 를 안쓴다는 설이 있어서 jQuery 에서 유용하게 써먹었던 function 들 공부해서 JS (pure JavaScript) 로 변환 좀 해놓으려고 공부 및 정리 중.## RRAhttps://github.com/jquery/jquery/blob/c85454a84306677efda3286a3214419bff945849/src/selector.js#L380 ($.find([CSS Selector]))https://github.com/jquery/jquery/blob/c85454a84306677efda3286a3214419bff945849/src/trave..

# week2 위클리 페이퍼 (브라우저가 어떻게 동작하는지 설명)## PH2024-08-05 : First posting.## TOC## 브라우저가 어떻게 동작할까?브라우저는 보통 사람들 (Clients) 이 domain name 을 통해 특정 웹사이트에 접속 할 때, DNS (Domain Name System) 을 통해서 해당 도메인 주소 (IP: Internet Protocol) 로 GET Request 를 보내서 페이지를 다운 받아 사용자에게 HTML 을 Parsing/Rendering 하여 보여주게 된다.이 때 웹 페이지 내에 img tag 나 script tag, link tag 등이 있으면 해당 tag 의 src 로 GET Request 를 또 보내 데이터들을 다운로드 받아 적절하게 표현해주게..

# Pattern Replace 를 이용한 http, https 링크 (그림, 동영상, 유튜브, 인스타그램, 틱톡, Soundcloud, 카카오TV, 네이버TV 등) 처리 | URI (Unique Resource Identifier) RenderingRegular Expression 을 사용해서 http, https 링크들을 적절하게 처리해 봅시다.## PH2024-02-07 : First posting.## TOC## URI rendering```[.linenums.lang-js]////////////////////////////////////////////////////// URI rendering :: http link itself, videos, images, maps.//////////////..

# Learning Node.jsServer-Side JavaScript 라 불리우는 Node.js 를 배워봅시다. JavaScript 언어 특성을 server 에 적용하면 무엇이 좋을까나? 무엇이 나쁠 수 있고?간단하게나마 server 에 대해 알고 있어야 이해가 쉬울듯. PHP 같은 것으로라도 간단히 이런것에 대해 조금 이해해 놓는것이? 이거랑은 상관없나? Egoing 님 php 강의에서 server 가 어떤 데이터들을 보내고, client 가 어떤 데이터들을 보내고 받는지 등을 이야기한 동영상이 있었는데... 그것만 보고와서 Node.js 를 공부해도 조금 이해가 편할듯.## PH2016-04-11 : To SEE.2014-05-22 : First posting.## TOC## 장단점Node.js ..

# Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 Responsive width with finitely filling the parent, and I wanna use display: flex; to align elements. 위와 같이 가로폭은 적당한 길이만큼만 확장되고, 나머지 안의 것들은 display: flex; 로 정렬하고 싶은데, 코딩을 해보면서 꽤 헤맸던 부분이라 정리할 겸 포스팅.## PH2024-07-30## TOC## HTML code```[.lang-html] 로그인 ```/와 같이 배치했음. 보면 helper div 로 이 추가된 걸 볼 수 있는데... CSS 는 다음과 같음.`..

# Vertical center align by CSS in HTMLHTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ)아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음.## TOC## Using fle..

# HTML CSS composes, and pseudo-element :after, :active:after, and transition Buttons Add Amount Add Async Add If Odd Images ## Style ```[#pre-code-style-transition.linenums.lang-css] ```/ composes 는 module 단에서만 동작하는듯. ## HTML ```[.linenums.lang-html] Buttons Add Amount Add Async Add If Odd Images ```/ ## RRA https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions ..

# 순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. 현재 문자들로부터 만들어진 HTML 문서K 가 보여지고 있는 중입니다. ## 문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.). 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기. 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기. 그림이나 ..

# HTML a href tag with onclick return 가장 간단하게 HTML a (anchor/닻) tag 를 사용하는 방법은 ``` link or #hash text ```/ 와 같다. 그런데 간혹 이 링크를 다르게 처리하고 싶을때도 있다. (페이지 새로고침 없이 ajax 로 처리한다던지, pop-up 을 하고 싶다던지, stopPropagation 을 필요로 한다던지 등.) 이땐 다른 html element 들에서도 사용되는 onclick attribute 를 써주면 되는데, 아래와 같은 것들에는 주의가 필요하다고 한다. JavaScript recommendations It is often the case that an anchor tag is used with the onclick e..