본문 바로가기

- WEB/Web (Full Stack)

혼공 자바스크립트 스터디그룹 6주차 Chapter 07-08 문서 객체 조작하기 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 6주차 #혼공학습단 #혼공 #혼공JS6주차 (8/15~8/21)진도범위 : Chapter 07-08문서 객체 조작하기이벤트 활용구문 오류와 예외예외 처리 고급1. 기본미션 : p.315의 을 실행한 후 출력되는 고양이 이미지 캡쳐하기.http://placekitten.com/width/heightwidth를 (index0+1)*100 = 100px (index1+1)*100 = 200px(index2+1)*100 = 300px(index3+1)*100 = 400px(index4+1)*100 = 500px 이 되게 만들어서, src 속성에 값을 넣음! height 값은 고정 250! 문서의 객체 속성 조작하기메소드 이름설명문서 객체.setAttribute(속성 이름,값)특정..
혼공 자바스크립트 스터디그룹 5주차 Chapter 06 미션 객체,속성,메소드가 뭘까? #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 5주차 #혼공학습단 #혼공 #혼공JS5주차 (8/8~8/14)진도범위 : Chapter 06 객체객체의 기본 객체의 속성과 메소드 사용하기객체와 배열 고급1. 기본미션. 객체, 속성, 메소드가 무엇인지 설명하기속성(Property)name과 value로 표현되는 속성.메소드(Method)속성 중에서 동작(함수)인 것. 객체(Object)실제로 존재하는 사물. name과 value로 구성된 속성을 가진 기본 데이터 타입. 대체 객체가 뭔데! 메소드는 뭔데! 이랬던 시절이 있는데 그땐 그냥 외웠다. 뜻은 모르고 그냥 이정도를 객체라고 하는구나.. 이젠 알긴 아는데 어떻게 설명해야할지 모르겠다.. 😂 배열과 같이 객체도 여러가지 자료를 한번에 다룰 수 있는 특별한 자료형// 배..
혼공 자바스크립트 스터디그룹 4주차 Chapter 05 미션 #혼공학습단 #혼공 #혼공JS 함수만들기 혼공 자바스크립트 스터디그룹 4주차 #혼공학습단 #혼공 #혼공JS4주차 (7/25~7/31)진도범위 : Chapter 05. 함수Chapter 05. 함수익명함수선언적함수매개변수콜백함수화살표함수타이머함수즉시호출함수1. 기본 미션 : p.202 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷기본적인 함수 예제 👉 윤년을 확인하는 함수 만들기.윤년은 2월 29일4로 나누어 떨어지는 해는 윤년이다. 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다.하지만 400으로 나누어 떨어지는 해는 윤년이다. 윤년의 특징을 조건부 연산자를 사용해 isLeapYear()라는 이름의 함수로 구현.자바스크립트에서true 또는 false를 리턴하는 함수는 is★★★이라는 이름으로 만드는 편. 2. 2022년은 ..
혼공 자바스크립트 스터디그룹 3주차 Chapter 04 미션 #혼공학습단 #혼공 #혼공JS 비파괴적 처리 / 파괴적 처리 혼공 자바스크립트 스터디그룹 3주차 #혼공학습단 #혼공 #혼공JS3주차 (7/18~7/24)진도범위 : Chapter 04Chapter 04. 배열배열. 요소 추가하기자료의 비파괴와 파괴반복문for infor offorwhilecontinue중첩 반복문 사용하기 예제들1. 기본 미션 : p.169 자료의 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기1. 비파괴적 처리- 장점 : 원본 데이터를 보호하며 작업할 수 있다. 하나의 원본 데이터를 여러곳에 사용할 수 있다. - 단점 : 메모리를 많이 차지한다.2. 파괴적 처리- 장점 : 메모리를 절약할 수 있다. - 단점 : 원본 데이터가 변경되기 때문에 두가지 중 뭐가 더 좋다고 할 수는 없다. 파괴적 처리라고 무조건 틀린것은 아니다. 메모리가 여유로워..
혼공 자바스크립트 스터디그룹 2주차 Chapter 03 미션 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 2주차 #혼공학습단 #혼공 #혼공JS2주차 (7/11~7/17)진도범위 : Chapter 03Chapter 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('조건에 맞지 않습니다')} 를 넣어 conso..
혼공 자바스크립트 스터디그룹 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번 풀고, 풀이 과정 설..
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..
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) 바탕화면에 내컴퓨터가 없어서 이건 들어갈때마다 햇갈림. 윈도우 검색창에서 '고급 시스템 설정 보기' 검색해 들어가면, 시..
정보처리기사 (2020) 필기 준비 / 합격 2020년 정보처리기사 - 1회 필기 / 접수 2.25~2.28 / 시행 3.22(일) - 취소 - 1.2회 필기 우선추가접수 5.12(화) / 시행 6.6 (토) - 코로나핑계로 패스 - 3회 필기 / 접수 7.28~7.31 / 시행 8.22(토) - 응시! 2020년부터 정보처리기사 과목이 일부 변경되었다. 기출이 크게 바뀌진 않았을거지만.. 그래도 이론기반으로 공부하는것이 좋을거라 판단. 1. NCS 기반으로 변경된 자료 리스트 수집 / 학습자료 다운로드 - 능력단위요소 확인 https://www.ncs.go.kr/th06/bbs_lib_view.do?libDstinCd=47&libSeq=20190827165343401&searchCondition=&searchKeyword=&pageIndex=0 ..

티스토리툴바