본문 바로가기

- WEB

혼공 자바스크립트 스터디그룹 6주차 Chapter 07-08 문서 객체 조작하기 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 6주차 #혼공학습단 #혼공 #혼공JS 6주차 (8/15~8/21) 진도범위 : Chapter 07-08 문서 객체 조작하기 이벤트 활용 구문 오류와 예외 예외 처리 고급 1. 기본미션 : p.315의 을 실행한 후 출력되는 고양이 이미지 캡쳐하기. http://placekitten.com/width/height width를 (index0+1)*100 = 100px (index1+1)*100 = 200px (index2+1)*100 = 300px (index3+1)*100 = 400px (index4+1)*100 = 500px 이 되게 만들어서, src 속성에 값을 넣음! height 값은 고정 250! 문서의 객체 속성 조작하기 메소드 이름 설명 문서 객체.setAttribu..
혼공 자바스크립트 스터디그룹 5주차 Chapter 06 미션 객체,속성,메소드가 뭘까? #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 5주차 #혼공학습단 #혼공 #혼공JS 5주차 (8/8~8/14) 진도범위 : Chapter 06 객체 객체의 기본 객체의 속성과 메소드 사용하기 객체와 배열 고급 1. 기본미션. 객체, 속성, 메소드가 무엇인지 설명하기 속성(Property) name과 value로 표현되는 속성. 메소드(Method) 속성 중에서 동작(함수)인 것. 객체(Object) 실제로 존재하는 사물. name과 value로 구성된 속성을 가진 기본 데이터 타입. 대체 객체가 뭔데! 메소드는 뭔데! 이랬던 시절이 있는데 그땐 그냥 외웠다. 뜻은 모르고 그냥 이정도를 객체라고 하는구나.. 이젠 알긴 아는데 어떻게 설명해야할지 모르겠다.. 😂 배열과 같이 객체도 여러가지 자료를 한번에 다룰 수 있는 특별한..
혼공 자바스크립트 스터디그룹 4주차 Chapter 05 미션 #혼공학습단 #혼공 #혼공JS 함수만들기 혼공 자바스크립트 스터디그룹 4주차 #혼공학습단 #혼공 #혼공JS 4주차 (7/25~7/31) 진도범위 : Chapter 05. 함수 Chapter 05. 함수 익명함수 선언적함수 매개변수 콜백함수 화살표함수 타이머함수 즉시호출함수 1. 기본 미션 : p.202 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷 기본적인 함수 예제 👉 윤년을 확인하는 함수 만들기. 윤년은 2월 29일 4로 나누어 떨어지는 해는 윤년이다. 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다. 하지만 400으로 나누어 떨어지는 해는 윤년이다. 윤년의 특징을 조건부 연산자를 사용해 isLeapYear()라는 이름의 함수로 구현. 자바스크립트에서true 또는 false를 리턴하는 함수는 is★★★이라는 이름으로 만드는..
혼공 자바스크립트 스터디그룹 3주차 Chapter 04 미션 #혼공학습단 #혼공 #혼공JS 비파괴적 처리 / 파괴적 처리 혼공 자바스크립트 스터디그룹 3주차 #혼공학습단 #혼공 #혼공JS 3주차 (7/18~7/24) 진도범위 : Chapter 04 Chapter 04. 배열 배열. 요소 추가하기 자료의 비파괴와 파괴 반복문 for in for of for while continue 중첩 반복문 사용하기 예제들 1. 기본 미션 : p.169 자료의 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 1. 비파괴적 처리 - 장점 : 원본 데이터를 보호하며 작업할 수 있다. 하나의 원본 데이터를 여러곳에 사용할 수 있다. - 단점 : 메모리를 많이 차지한다. 2. 파괴적 처리 - 장점 : 메모리를 절약할 수 있다. - 단점 : 원본 데이터가 변경되기 때문에 두가지 중 뭐가 더 좋다고 할 수는 없다. 파괴적 처리라고 무조건 틀린..
혼공 자바스크립트 스터디그룹 2주차 Chapter 03 미션 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 2주차 #혼공학습단 #혼공 #혼공JS 2주차 (7/11~7/17) 진도범위 : Chapter 03 Chapter 03. 조건문 if 조건문 if else 조건문 중첩 조건문 if else if 조건문 switch 조건문 조건부 연산자 짧은 조건문 1. 기본 미션 : p.139 확인 문제 3번 문제 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증샷 문제 정답은 && vs code에서 어떻게 실행해야 하는지 모르겠다 🤔 크롬으로 열어보자. x 값을 15로 넣어 콘솔창 확인하니 조건에 맞다고 한다 !! x 값을 11~19가 아닌 다른 값을 넣으면 console.log에 아무것도 나오지 않는다. if 뒤에 else{ console.log('조건에 맞지 않습니다')}..
혼공 자바스크립트 스터디그룹 1주차 Chapter 01 ~ 02 미션 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 1주차 #혼공학습단 #혼공 #혼공JS 1주차 (7/4~7/10) 진도범위 : Chapter 01 ~ 02 자바스크립트란 웹 브라우저에서 작동하는 프로그래밍 언어입니다. ECMAScript란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭입니다. 웹애플리케이션이란 기존의 웹페이지보다 많은 기능을 구현한 웹 페이지를 말합니다. 개발환경 설치와 코드 실행 텍스트에디터 : 비주얼스튜디오 코드 / 코드 실행기 : 구글 크롬 웹 브라우저 1. 기본 미션 : p.54의 에서 'Hello World' 출력하기 (p54~) 1단계 : HTML 페이지 생성하기 2단계 : HTML 페이지 작성하기 emmet으로 html:5 입력후 Tab 또는 Enter 눌러서 자동완성. 태그 내부에 태그..
혼자 공부하는 자바스크립트 #혼공스 #혼공학습단8기 #커리큘럼정리 혼자 공부하는 자바스크립트 #혼공학습단 #혼공단 #혼공JS # 진도 기본 미션 선택 미션 1주차 Chapter 01 ~ 02 p.54의 에서 'Hello World' 출력하기 Chapter 01(01-1) 확인 문제 1번 상세하게 적고 인증샷 2주차 Chapter 03 p.139 확인 문제 3번 문제 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증샷 p.152의 예제 실행하여 본인의 띠 출력한 화면 캡쳐하기 3주차 Chapter 04 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기 4주차 Chapter 05 202쪽의 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷 p.240 확인 문제 1번 풀고, 풀이 과정 설..
일러스트레이터 회색 박스 없애기 (+ 상단 메뉴아래 컨트롤러 표시하기) 일러스트레이터 회색 박스 없애기 (+ 상단 메뉴아래 컨트롤러 표시하기) 일러스트레이터에서 개체 이동시 생기는 회색 박스. 설정으로 간단하게 안보이게 할 수 있다. 회색 박스 없애기 : Edit → Preferences → Smart Guides... → Measurement Labels 체크해제 작업을 하려고 보니 어라? 상단 컨트롤러가 안보인다. 상단 메뉴아래 컨트롤러 표시하기 : Window → Control 클릭 하면 나온다 . 순식간에 해결.
VS CODE에 깃허브 GitHub 프로젝트 연동하기 VS CODE에 깃허브 GitHub 프로젝트 연동하기 (깃 클론하기) 2021.08.30 기준. VS CODE 설치 GIT 설치 깃허브 사이트에서 프로젝트를 생성해 둔다. (퍼블릭/프라이빗 상관없음) 1. VS CODE를 열고, 좌측에서 Clone Repository 클릭. 2. Clone from GitHub 클릭. 3. 웹에 로그인 되어 있다면 바로 계속하기 누르면 되고, 아니면 로그인 필요. 4. 로그인 후 다시 VSCODE 열기. 5. 로그인 되면 내 레포지토리를 볼 수 있다. 원하는 작업 프로젝트 선택. 6. 복사해 올 시스템 폴더 선택(상위 폴더를 선택해야 한다.) 하위 프로젝트 폴더가 생기면서 모든 내용이 클론 됨. 7. 기존 창 or 새 창으로 열 것이냐 선택 8. 신뢰한다 선택. 소스 약..
Svelte 자바스크립트 웹 애플리케이션 개발 프레임워크 ( = 리액트. 뷰. 앵귤러 등) https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using tec svelte.dev 튜토리얼, REPL 이용해 스터디. node
윈도우 명령프롬프트(PowerShell)에서 리액트 프로젝트 시작하기 윈도우에서 리액트 프로젝트 시작하기 1. 시작표시줄의 검색 -> cmd (명령프롬프트) 실행 후 npm init react-app "프로젝트이름" 입력해서 프로젝트 생성. 2. cd hello-react(프로젝트이름) 으로 해당 폴더로 이동 후 npm start 리액트 서버 구동 3. 웹 브라우저에서 http://localhost:3000 입력 후 잘 구동되는지 확인.
리액트 + 리액트 네이티브 개발환경 준비하기 # 한빛미디어 '처음 배우는 리액트 네이티브' 교재 실습. hanbit.co.kr/store/books/look.php?p_code=B8811528616 처음 배우는 리액트 네이티브 단순히 UI 컴포넌트를 설명하는 이론서가 아니라, 실제로 간단한 모바일 앱을 만들면서 디버깅과 배포까지 빠르게 입문할 수 있는 책이다. hanbit.co.kr 1. Homebrew 설치. ( brew.sh/index_ko ) 2. watchman 설치하기 [$ brew install watchman ] 3. Node.js 설치하기 ( nodejs.org/en/ ) 4. yarn 설치 ( classic.yarnpkg.com/lang/en/ ) 5. nvm : node version manager 설치하기 ( github.com..
무료 이미지 사이트 1. Unsplash (언스플래쉬) 고화질 무료 이미지 2. FreePik Vectors, 사진, PSD 등 여러 타입의 이미지 제공 일부 사용권 표시 / 로그인후 사용시 많은 다운로드 가능 3. Pixabay 사진, 일러스트, 백터, 비디오, 음악 제공 4. Flaticon 벡터아이콘 무료. SVG/EPS/PNG/PSD 선택 다운로드 가능 5. Videezy Footage & 4K 비디오 Free 6. Pexels 고화질 무료 스톡 사진.영상 저작권표시 불필요 7. Picjumbo 사진작가가 찍은 사진 8. VisualHunt 고해상도 사진 (색상검색 가능)
VS CODE : EXTENSIONS 확장프로그램 1. D2 Coding font (프로그램은 아니고, 가독성 높이기 위해..) github.com/naver/d2codingfont naver/d2codingfont D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 2. Live Server 다이나믹 페이지 실시간 미리보기 3. Code Runner 코드 실행도우미.
JavaScript : 불 자료형으로 변환 - Boolean() 함수 JavaScript : 불 자료형으로 변환 - Boolean() 함수 > Boolean(0) false > Boolean(NaN) false > Boolean("") false > Boolean(null) false > let 변수 undefined > Boolean(변수) false 0, NaN, "", null, undefined 자료형은 -> false로 변환됨. (암기!!)
JavaScript 복합 대입 연산자 활용 JavaScript 복합 대입 연산자 활용 // 변수 선언 let list=''; // 연산자 사용 list += ''; list += 'list 1'; list += 'list 2'; list += ''; // 문서에 출력 document.write(list);
Node.js 설치 (mac) Node js 홈페이지 접속 후, 원하는 버전으로 설치. (LTS : 장기지원버전). Current 짝수 버전도 나중에 장기지원버전이 될것이므로 설치해도 괜찮음. nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 패키지 파일 더블클릭 후 > 사용권 계약 동의하고 컴퓨터 비밀번호 입력 후 설치. 맥에서는 옵션 선택할것이 없다. 터미널 들어가서 설치된 node, npm 버전 확인 버전관리도구 nvm 설치 github.com/nvm-sh/nvm nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage..
Node.js 설치 (windows) Node js 홈페이지 접속 후, 원하는 버전으로 설치. (LTS : 장기지원버전) nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치시 'Automatically install the neccessary tools. Note that this will also install Chocolatey. ...' 체크 후 설치 . Chocolatey 포함 여러 도구 추가 설치 체크인데, 필요없을경우 체크해제 해도 됨. 환경변수 설정 (windows) 바탕화면에 내컴퓨터가 없어서 이건 들어갈때마다 햇갈림. 윈도우 검색창에서 '고급 시스템 설정 보기' 검색해 들어가면, 시..
MySQL 설치 (Windows) / 초기설정 dev.mysql.com/downloads/ MySQL :: MySQL Community Downloads The world's most popular open source database dev.mysql.com 설치 제품군 선택 ->
Adobe AfterEffect : 에프터이펙트 정리 (for windows) NTSC : 미국. 일본. 한국 등 / PAL : 유럽 -----> 지금은 디지털 방송으로 HD RTX 그래픽카드 : 영상랜더링 빠름 파일 속성, Interpret, Footage - Alpha 확인. 8bpc -> 프로젝트 셋팅. 시간 ↔프레임 변경시 Ctrl + 클릭 (시간이 있는 곳 모두 적용) 타임라인 바 : CTI (Crrent Time Indicator) shy 레이어 드래그하면 한번에 됨. 쉐이프 -> 컨텐츠 속성과 트랜스폼 속성으로 나뉨. 쉐이프 선택된 상태에서 쉐이프를 추가하면, 컨텐츠 안에 합쳐져서 만들어짐. 별도 레이어로 만들 경우 기존 쉐이프가 선택되지 않았는지 필히 확인. File -> Collect File로 최종 저장하면 여러사람이 공유하면서 수정 가능 (ai로 치면 bmp도 ..
Python 파이썬 설치 / 시작하기 1. Python 파이썬 설치 1) 홈페이지 방문 후 원하는 릴리즈버전 다운로드 2) PATH 자동등록 체크 후 install Now 하면 편함. 3) cmd에서 python 입력 후 설치확인 2. Python 시작하기 1) hello world ! print("hello world") 2) 주석, 인코딩지정 # 주석입니다 # -*- coding: utf-8 -*- 3) 한 라인에 여러 구문이 올 경우 세미콜론 사용 (;) 4) 들여쓰기 중요하지만 조심할 것 -> 가독성을 높이지만 논리적인 오류가 날 경우 잡기 힘듦. 3. 웹에서 파이썬 실행하기 repl.it/ The collaborative browser based IDE Repl.it is a simple yet powerful online IDE,..
Vue.js + Atom : 시작하기 1-1. Atom 설치 https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 1-2. Atom Language-vue Package 설치 Setting - Install - Packages 'Language-vue' 검색 https://atom.io/packages/language-..
HTML5 : AUDIO, VIDEO, INPUT, SELECT 1. AUDIO 1) 플레이어 컨트롤러 넣고, 자동재생 2) 플레이어 지원타입 여러개 넣기 2. VIDEO 1) Type 2) Poster, Size 3. INPUT 1) 기본 input type 2) html5 추가 input type 3) textarea name : 텍스트 영역 필드의 이름 지정 rows : 텍스트 영역 필드의 행 수를 지정 cols : 텍스트 영역 필드의 가로 크기를 지정 4. SELECT 김밥 떡볶이 순대 오뎅 Multimedia Tag Connectivity Device Access Animation 3D Transform
혼공자바 550쪽 [직접 해보는 손코딩] 코딩 과정 및 실행 결과 인증샷 #혼공단 #혼공자 데몬스레드 주 스레드의 작업을 돕는 보조적인 역할을 수행하는 스레드. -> 워드프로세서의 자동저장 / 미디어플레이어의 동영상 및 음악 재생, 쓰레기 수집기 등에서 적용하며 주 스레드가 종료되면 함께 종료됨. #예제 1초 주기로 save()메소드를 자동 호출하도록 AutoSaveThread를 작성하고, 메인 스레드가 3초 후 종료되면 AutoSaveThread도 같이 종료되도록 AutoSaveThread를 데몬스레드로 만든다.
혼공 용어 노트 활용 인증샷 #혼공단 #혼공자 혼공학습단 1기 3주차 미션. 혼공 용어노트는 자바의 큰 그림을 핵심 키워드와 코드, 이미지로 설명해두고 있다. 각 장마다 약간의 여백이 더 있었으면 노트에 정리했을텐데 좁은 여백이 살짝 아쉽다. 책이 자세하게 정리가 잘 되어있기에 책에 바로 체크해가며 공부하는 중이라.. 혼공용어노트 활용 인증샷은.. 제일 어려운 미션이 아닐까 싶다 ㅜㅜ.. 추가미션이면 좋았을텐데. # 10~11장 노트 활용 인증샷 혼공노트를 보면 이렇게 그림으로 설명해둔 것이 많은데, 이부분 정말 도움되니 꼭 챙겨보자 :)
혼공자바 7장 chap01 상속부분 문제 실행결과 #혼공단 #혼공자 혼자 공부하는 자바(혼공자) 07장-01 상속 // 연습문제 5번의 1) Parent.java 작성 - 2) Child.java 작성 - 3. ChildExample.java 작성-실행
인쇄 출력 프로토타이핑 사이트 인쇄 출력 프로토타이핑 사이트 1. 오프린트미 https://www.ohprint.me/ 오프린트미 | 명함, 스티커, 사인&포스터, 홍보물, 카드, 액세서리 누구나 쉽고 빠르게 개인 맞춤 소량 인쇄! 나를 프린트하다, 오프린트미 www.ohprint.me 2. 애드피아몰(성원애드피아) https://www.adpiamall.com/home 인쇄는 쇼핑이다! 애드피아몰 실사출력, 배너, 현수막, POP, 등신대, 아크릴, 간판, 실사출력의 모든 것 www.adpiamall.com 3. 프린통(dnp) https://www.printong.net/index.asp ▒ 프린통 by dnp ▒ 인쇄하청 전문업체,합판, 독판, 디지털, 마스터, 소량인쇄, 선거인쇄물, 인쇄물실시간자동견적 www.printong...
ecilpse 폴더 불러오기 내보내기 ecilpse 폴더 불러오기 내보내기 File > Import General > Existing Projects into Workspace Next > 제일 상위폴더 선택 후 [폴더선택] 불러올 프로젝트에 체크 후 FInish 눌러서 불러오기 !

티스토리툴바