기분좋음

오픈API 오픈API란 누구나 사용할 수 있도록 공개된 API 데이터를 표준화하고 프로그래밍해 외부 소프트웨어 개발자나 사용자들과 공유하는 프로그램입니다. 개방된 오픈API를 이용해 다양하고 재미있는 서비스나 애플리케이션, 다양한 형태의 플랫폼을 개발가능 *API란? ( Application Programming Interface ) 응용 프로그램 프로그래밍 인터페이스를 말합니다. 다양한 응용 프로그램에 사용할 수 있는 운영 체제, 혹은 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스입니다. 예시 오픈API → 개발자 → 개발 앱 → 사용자 DB에서 오픈 API를 개발앱에 맞게 프로그래밍한 후 데이터 갖다가 사용하는 것 오픈API 사용방법 공공데이터 포털 사이트 접속 https://ww..

ColorSpace (색상 팔레트) https://mycolor.space/ ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycolor.space 색상 팔레트 -웹사이트에서 주로 사용할 색상 하나를 골라서 헥스 색상값을 입력하면 어울리는 색상 팔레트들을 알려준다. ex) FF6863 알려준 값을 root로 설정해 사용할 수있다. (포인트 줄 때 사용) :root { --color-white: #ffffff; --color-black: #000000; --color-primary: #ff6863; --color-pink: #DD5A87; } CSS..

JAVA기반 웹개발자 양성훈련과정 취업분야/ 취업 전망 프론트엔드 개발자 사용자에게 보여지는 시각적인 부분을 다룸. 백엔드 개발자 서버구축, DB등에 대한 부분을 다룸. 서버관리자 서버관리업무로 보안과 서버안정에 대한 부분 담당 풀스택 개발자 프론트엔드+백엔드 SI(시스템 통합)system integrator 70프로차지 파견직 프로젝트를 수주받아 다양한 프로그램을 개발하는 업종 -처음 입사시에는 능력을 키우기에는 좋으나 연차가 쌓일수록 비슷한 프로그래밍을 할 경우 복사하는 경우가 잇어 나태해질수 잇다 SM(시스템 통합관리)system management 솔루션 및 소프트웨어를 유지보수 및 업데이트 하는 업종 -유지보수 업무위주, 다만 기존의 프로그래밍이 엉망인 경우, 일이 힘들어짐 웹솔루션 업체 SI+..

순수 CSS사용 flexbox- 71% grid -8% CSS전처리기 -Post processors (간편하고 빠르게 스타일링 가능) Sass (사용유저 多) - 반복문 가능(if, for, each) - 중첩기능 (Total, &:pseudo-class, &:class) PostCSS 만족도 多 Less 개발하기 편한 문법으로 작성하다가 사용자에게 배포 전 순수CSS로 변환해준다 CSS Frameworks bootstrap 사용유저 多 (절대 다수) Tailwind CSS 만족도 多 CSS-in-JS (자바스크립트에서 CSS 적용하는 것) -빈도↓(많이 사용 안함) Style Components 사용유저 多 vanila-extract 만족도 多 출처 -https://www.youtube.com/watc..

REST API 기계와 기계가 규격화된 방식으로 인터넷, 웹을 이용해서 통신할수 있도록 돕는 통신규칙 API - 컴퓨터의 기능을 실행시키는 방법 ex) 자바스크립트의 document.write()도 하나의 api REST API - 다른사람의 컴퓨터의 기능을 실행시키는 방법 RESOURCE id title body 1 rest ＊＊＊ 2 ajax ＊＊＊ 3 json ＊＊＊ topic(하나의 글) Collection (http://example.com/topics)-복수형 여러개의 데이터 Element (http://example.com/topics/1) or (http://example.com/topics/rest) 하나 하나의 데이터 RESOURCE 정보 가공방법 http를 이용하기 때문에 http메소..

MS사에서 만든 Text Editor (간단한 텍스트 에디터) visual studio 단축키보기(왼쪽아래 설정에 바로가기키) command + shift + p, ctrl + shift + p (명령 팔레트 실행) 1. Material Theme 비쥬얼 스튜디오 테마 색상 설정 2.Material Icon Theme icon 모양이 바뀜(가시성이 좋아짐) 3.Prettier 코드 포맷팅 해줌 설치후 → (cmd 에서 settings)설정 → save 검색후 format On Save(자동으로 포맷 가능하게 체크) prettier: tabwidth 2로 설정(현업에서) 가독성 좋게 하기 위해 prettier quote 에서 javascript Quote Style 을 single로 바꿔준다. Type S..

웹브라우저의 렌더링 과정 웹페이지에 접속시 웹사이트가 그려지는 과정 웹브라우저에는 두개의 엔진이 존재 렌더링 엔진 -RENDERING ENGINE (HTML로 입력받아 해석한 후 표준 출력 장치(모니터)로 출력해준다. 자바스크립트 엔진 -JavaScript engine(자바스크립트 코드를 해석한 후 기능을 작동시켜준다) 일반적으로 사용하는 크롬(Chrome)은 크롬의 블링크(Blink) 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML (문서의 텍스트 내용, 이미지, 파일) CSS (문서의 디자인이나 그림, 파일 배치 내용) JavaScript (HTML의 구조변형, 기능) 를 읽어준다

TypeIt 웹사이트 포인트 문구 애니메이션 효과(타이핑효과) https://www.typeitjs.com/ TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 특징: 용량 4kb도 안됨 의존성 필요x TypeIt → Demos메뉴 see it 에서 활용 방법 확인 사용방법 TypeIt → Documentation메뉴 → Vanilla Javascript(외부 라이브러리나 프레임워크를 사용하지 않은 순수 자바스크립트) 사용방법 html파일에 위에 스크립트 주소를 복사해서 head태그 안에 붙여주고 ScrollOut 스크롤링시 애니메이션 효과 https://scroll-out.github...

Git git의 장점 전 세계 가장 많은 사용자 보유 Git을 사용한 소스 공유 사이트 github존재 엄청난 숫자의 튜토리얼과 오픈소스들 git 공식 문서 • Http://git-scm.com/book/ko/v2 • Git 공식 배포 사이트 http://git-scm.com/ 에서서 git 최신 버전 다운로드 cmd 기본 명령어 • cls : 화면을 깨끗하게 하기 위한 명령 • c:, d:, … : 드라이브를 이동하기 위한 명령 • dir : 현재 디렉토리의 파일을 보기 위한 명령 • /p : 페이지 단위로 보기 • /w : 가로 보기 • md : 디렉토리 생성 명령(mkdir) • rd : 디렉토리 삭제 명령(rmdir) • del : 파일 삭제 명령 • rem: 파일 이름 변경 명령(rename) ..

3강 폴더 구조 Ajax (Asynchronous JavaScript and Xml) 빠르게 동작하는 동적 웹페이지를 만들기 위해 페이지 전체를 동기화 하지 않고, 웹페이지 일부분만을 업데이트하는 비동기성 페이지 새로고침 없이 서버에 요청 가능 각각의 부분이 서버로부터 데이터를 받고 작업수행 (JSON, XML, HTML등 일반 텍스트 형식을 포함해 다양한 포맷을 주고 받을 수 있다.) Ajax통신을 이용해 JSON형식으로 데이터 받아온다(키 - 밸류)의 형태로 url로 보냄 ajax사용시 위에 소스를 jsp파일에 넣어준다