코딩하는 감자

https://wccoding.tistory.com/m/91 [DEV] 웹 서버 업로드 오류웹 페이지를 개발할 때 나는 index파일이 html인 파일만 가지고 개발을 했었다. html 파일은 css나 js파일을 수정하면서 웹 브라우저에서 열어서 쉽게 수정본을 확인할 수 있다. 하지만 내가 맡은 홈www.danieldevel.info 웹 페이지를 개발할 때, 나는 주로 HTML 파일을 사용하여 개발을 진행했다. HTML 파일은 CSS나 JS 파일을 수정하면서 웹 브라우저에서 쉽게 열어 볼 수 있어, 수정 사항을 바로 확인할 수 있다는 장점이 있다. 그러나 이번에 내가 맡은 프로젝트에서 문제가 발생했다. 웹 서버에 파일을 업로드했는데, 변경 사항이 반영되지 않는 오류가 생긴 것이다.  오류의 원인을 찾기 ..

웹 페이지를 개발할 때 나는 주로 index 파일이 HTML인 파일만 가지고 작업을 진행했었다. HTML 파일은 CSS나 JS 파일을 수정하면서 웹 브라우저에서 쉽게 열어볼 수 있어, 수정본을 바로 확인할 수 있다는 장점이 있다. 하지만 이번에 내가 맡은 홈페이지 수정 작업에서는 index 파일이 JSP 확장자인 파일이었다. 또한 처음부터 개발하는 것이 아니라 기존 홈페이지를 대규모로 변경해야 하는 상황이었다. 수많은 파일을 천천히 훑어보면서 이해하려고 노력했다. 하지만 JSP 파일은 수정하면서 웹 브라우저에서 수정된 것을 실시간으로 확인할 수 없었다. 그래서 불편하고 시간이 오래 걸리지만 Filezilla를 이용해 수정본을 서버에 계속 덮어쓰면서 업로드하여 어떻게 동작하는지 보면서 작업을 진행했다. 특..

CDN (Content Delivery Network)란? CDN은 인터넷 환경에서 게임 클라이언트나 콘텐츠를 사용자의 PC로 효율적으로 전달하기 위한 시스템입니다. 이 시스템은 데이터를 분산된 서버에 저장하여 사용자가 콘텐츠를 빠르게 접근할 수 있도록 돕습니다. 특히, 인터넷 사용자들이 콘텐츠 제공자의 웹 서버와 멀리 떨어져 있을 때 유용합니다. CDN은 그림, 배너, 비디오, 오디오와 같이 용량이 크거나 사용자가 자주 요구하는 콘텐츠를 여러 인터넷 서비스 제공자의 POP(Point of Presence)들에 설치된 CDN 서버에 미리 저장합니다. 사용자가 콘텐츠를 요청하면, 가장 최적의 CDN 서버를 통해 신속하게 콘텐츠를 전달받을 수 있습니다. 이러한 방식은 데이터 전송의 효율성을 높여주는 새로운 ..

REST API란?REST API는 Representational State Transfer의 약자로, 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식입니다. REST는 웹 상의 자료를 HTTP를 통해 전달하는 간단한 인터페이스를 제공합니다. 여기서는 SOAP이나 쿠키를 통한 세션 트래킹과 같은 별도의 전송 계층이 필요하지 않습니다. 즉, REST API는 웹 리소스와 상호작용하기 위해 설계된 매우 직관적이고 간편한 방법을 제공합니다. REST 아키텍처의 제한 조건REST 아키텍처에는 몇 가지 중요한 제한 조건이 있습니다.  1. 클라이언트와 서버의 분리: 클라이언트와 서버는 서로 독립적으로 동작합니다.  2. 무상태(Stateless): 서버는 클라이언트의 상태를 ..

중앙은행 디지털화폐 (CBDC)란?CBDC는 Central Bank Digital Currency의 약자로, 중앙은행이 전자적 형태로 발행하는 법적인 화폐를 의미합니다. CBDC는 국가가 직접 발행하고 공인하는 자산으로, 현금처럼 가격 변동이 적고 안정적인 가치를 지닙니다. 따라서, 현금에 준하는 안전한 자산으로 간주될 수 있습니다. 또한, 여타 가상화폐와는 달리 투기 자산이 될 가능성이 거의 없으며, 국가의 감독 아래에서 운영되므로 투명하고 안정적인 거래가 가능하다는 장점이 있습니다. CBDC의 구현 방식CBDC는 두 가지 주요 방식으로 구현될 수 있습니다:  1. 계좌 기반 단일원장 방식 이 방식에서는 중앙은행이 발행한 CBDC가 개인 고객의 계좌를 통해 관리됩니다. 중앙은행은 금융기관이나 지급 결제..

메소드 체이닝 (Method Chaining)란?메소드 체이닝은 여러 메소드를 연속적으로 호출하여, 결과를 다음 메소드에 전달하는 프로그래밍 기법입니다. 이 방법은 코드의 가독성을 높이고, 코드 작성 시 불필요한 변수를 줄여주는 장점이 있습니다. 메소드 체이닝의 기본 개념메소드 체이닝은 메소드 호출 후, 그 메소드의 반환 값을 다음 메소드의 인수로 사용합니다. 즉, 각 메소드는 자신이 호출된 객체를 반환하고, 이 반환된 객체에 대해 다음 메소드를 호출하는 방식으로 연결됩니다. 예제 코드const a = 'abc';// split : 문자를 구분자 기준으로 쪼개서 배열로 반환합니다.// reverse : 배열의 순서를 뒤집습니다.// join : 배열의 요소를 구분자 기준으로 문자로 병합해 반환합니다.co..

- DOM API (Document Object Model, Application Programming Interface) // HTML 요소(Element) 모두 검색/찾기 const boxEls = document.querySelectorAll('.box'); console.log(boxEls); // 찾은 요소를 반복해서 함수 실행 // 익명 함수를 인수로 추가 boxEls.forEach(function () {}); //첫 번째 매개변수 (boxEl) : 반복 중인 요소 //두 번째 매개변수 (index) : 반복 중인 번호 boxEl.forEach(function (boxEl, index) {}); // 출력 boxEls.forEach(function (boxEl, index) { boxEl.c..

- DOM API (Document Object Model, Application Programming Interface) // HTML 요소(Element) 1개 검색/찾기 const boxEl = Document.querySelector('.box'); //HTML 요소에 적용할 수 있는 메소드 boxEl.addEventListener(); // 인수(Arguments)를 추가 가능! boxEl.addEventListener(1,2); // 1 - 이벤트(Event, 상황) boxEl.addEventListener('click', 2); // 2 - 핸들러(Handler, 실행할 함수) boxEl.addEventListener('click', function() { console.log('click'..

조건문 - 조건의 결과(thuthy, falsy)에 따라 다른 코드를 실행하는 구문 ( if, else ) let isShow = true; let checked = false; if(isShow){ console.log('show!'); // show } if(checked){ console.log('checked!'); } let isShow = true; if (isShow){ console.log('show'); } else{ console.log('?'); }

웹 사이트 로그인을 시도할 때 내가 로봇인지 사람인지를 구별하는 아래와 같은 사진을 많이 볼 수 있다. 애매한 글씨들과 그림들로 문제를 틀려서 내가 로봇이 되는 경우도 있어 난감할 때가 매우 많다 위와 같이 사용자가 사람인지 로봇(컴퓨터 프로그램)인지를 구별하기 위해 사용되는 방법을 CAPTCHA 라고 한다. CAPTCHA? Completely (=완전히) Automated (=자동화된) Public (=공공의) Turing test to tell (=튜링 테스트와) Computers and (=컴퓨터와) Humans (=인간을) Apart (=구분하는) = 컴퓨터와 인간을 구분하는 완전히 자동화된 공공의 튜링 테스트 CAPTCHA의 목적은 사람과 로봇을 구별하는 것과 사람들이 많이 모르고 있는 한가지의..

함수 (function) - 특정 동작(기능)을 수행하는 일부 코드의 집(부분) //함수 선언 function helloFunc() { return 123; } let a = returnFunc(); console.log(a); //123 //함수 선언 function sum(a,b) { //a와 b는 매개변수(paraneters) return a + b; } //재사용 let a = sum(1,2); //1과 2는 인수(Arguments) let b = sum(7,12); let c = sum(2,4); console.log(a,b,c); // 3,19,6 출력 // 기명 함수 // 함수 선언 function hello{ console.log('hello!'); } // 익명 함수 // 함수 표현 le..

변수 : 바뀔 수 있는 수 데이터를 저장하 참조(사용)하는 데이터의 이름 var - 사용하지 않는 것을 권장 let - 변수의 재할당 가능 const - 변수의 재할당 불가능. 처음 초기화된 값만 사용가능 변수가 저장되는 원리 어플리케이션마다 무언가를 저장 할 수있는 비어있는 메모리가 제한적으로 할당되어있는데 , let name 이라고 name 을 정의하게되면 비어있는 메모리를 가르킬 수있는 포인터가 생성된다 , 그래서 name이 가르키는 메모리 어딘가에 값을 저장하게된다. [출처] JS ) 작성법,변수|작성자 디두 변수의 필요성 - 프로그래밍의 효율성을 높여준다. -> 여러 곳에 쓰이는 중복된 값을 한번에 바꿔줄 수 있다. 예약어 특별한 의미를 가지고 있어, 변수나 함수 이름으로 사용할 수 없는 단어 ..

JS 데이터 종류 String - 문자열 Number - 숫자 Boolean - 참/거짓 (불대수) Null - 값이 없음을 명시적으로 표현 undefined - 변수가 정의되었으나, 값이 정의 안 된 상태 Symbol - 유일한 식별자 생성 Object(객체) - single item을 묶어 하나의 박스로 관리 가능하게 해줌 function(함수) - 변수에도 할당이 가능하다(first-class function: 일급함수)

- 표기법 dash-case(kebab-case) : html,css에서 주로사용 ex) the-quick-brown-fox-jumps snake_case : html,css에서 주로사용 ex) the_quick_brown_fox_jumps camelCase : JS에서 주로 사용 theQuickBrownFoxJumps PascalCase : JS에서 주로사용 TheQuickBrownFoxJumps Zero-based Numbering : 0기반 번호 매기기 -> 특수한 경우를 제외하고 0부터 숫자를 시작합니다. - 주석 // 한 줄 메모 /* 한줄 메모 */ /** *여러줄 *메모1 *메모2 */ 단축키 : ctrl + /

perspective : 하위 요소를 관찰하는 원근 거리를 지정(*함수가 아닌 속성) perspective 속성과 함수의 차이점 -속성 perspective: 600px 관찰 대상의 부모에 적용 기준점 설정 : perspective-origin -함수 transform: perspective(600px) 관찰 대상에 적용 기준점 설정 : transform-origin backface-visibility : 3D변환으로 회전된 요소의 뒷면 숨김 여부 visible(기본값) : 뒷면 보임 hidden : 뒷면 숨김 transform: rotateY(180deg); backface-visibility: hidden; -> 뒷면(180도로 뒤집어진 부분)이 보이지 않게 됨

transform : 요소의 변환 효과 transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; 개별 속성들 2D(2차원)변환 함수 translate(x,y) : 이동(x축,y축) translateX(x) : 이동(x축) translateY(y) : 이동(y축) scale(x,y) : 크기(x축, y축) scaleX(x) : 크기(x축) scaleY(y) : 크기(y축) rotate(degree) : 회전(각도) skew(x,y) : 기울임(x축, y축) skewX(x) : 기울임(x축) skewY(y) : 기울임(y축) matrix(n,n,n,n,n,n) : 2차원 변환 효과 3D(3차원)변환 함수 translateZ(z) : 이동(z축) tran..

transiton : 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 transition: 속성명 지속시간(필수속성) 타이밍함수 대기시간; 개별 속성들 transition-property : 전환 효과를 사용할 속성 이름을 지정 all(기본값) : 모든 속성이 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 transition-duration : 전환 효과의 지속시간을 지정 0s(기본값) : 전환 효과 없음 시간 : 지속시간(s)을 지정 transition-timing-function : 전환 효과의 타이밍(Easing) 함수를 지정 ease(기본값) : 느리게 - 빠르게 - 느리게 linear : 일정하게 ease-in : 느리게 - 빠르게 ease-out : 빠르게 - 느리게 ease-in-o..

order : Flex Item 의 순서 0(기본값) : 순서 없음 숫자 : 숫자가 작을수록 먼저 order: -1; > order: 0; > order: 2; > order: 17; flex-grow : Flex Item의 증가 너비 비율 0(기본값) : 증가 비율 없음 숫자 : 증가 비율 flex-grow: 1; flex-grow: 2; flex-grow: 1; -> 1대 2대 1 비율로 너비 증가 flex-shrink : Flex Item의 감소 너비 비율 1(기본값) : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 *감소 비율을 0으로 입력하면 감소되지 않음 기본값이 1인 Item들은 컨테이너가 줄어들 때 같이 줄어들지만 flex-shrink: 0; 일 때의 Item..

flex-wrap : Flex Items 묶음(줄 바꿈) 여부 nowrap(기본값) : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 *대부분의 경우에는 flex를 사용하여 수평 정렬을 한다. justift-content : 주 축의 정렬 방법 flex-start(기본값) : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 centet : Flex Items를 가운데 정렬 space-between : 각 Flex Items 사이를 균등하게 정렬 space-around : 각 Flex Items의 외부 여백을 균등하게 정렬 display: flex; justify-content: flex-end; ->..

display : Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 Flex Container : flex가 부여된 요소 Flex Items : flex가 부여된 요소의 자식 요소 Flex 속성을 부여할 때 Container와 Items에 부여하는 속성이 각각 다르게 구성되어 있다. Flex Container 에 부여할 수 있는 속성 display flex-flow, flex-direction, flex-wrap justify-content align-content align-items Flex Items 에 부여할 수 있는 속성 order flex, flex-g..