Coding 수업정리/항해99
[띵동코딩] 왜 안넣어지지 - 클래스, 아이디의 철자, s가 빠졌는지 check 철자부터 체크
어려운 클래스명 지양할 것. 일관성 있는 클래스명 만들 것. 진짜 한참 찾음.. 영화 버킷 리스트 다음
Coding 수업정리
Coding 수업정리/항해99
[띵동코딩]jQuery 스스로해보기
/ / 3장. JQuery 연습하기 코드스니펫 [코드스니펫] - JQuery 연습 뼈대 코드 매주 월요일, 내 강의실에 찾아오는 코딩 학습지 카카오로 1초만에 시작하기 이메일로 시작하기 이메일 로그인하기 이메일이 기억나지 않아요. let temp_html = `로그인하기`; const start = document.querySelector('#start'); start.addEventListener('click', () => { show(); }) let isShow = true; function show() { isShow ? ($('.email').hide(), isShow = false) : ($('.email').show(), isShow = true) } const login = document..
Coding 수업정리/항해99
[띵동코딩]JS복습하기-스스로해보기-incluses
let users = [ { 'name': '영희', 'email': "young@gamil.com" }, { 'name': '영숙', 'email': "suk@naver.com" }, { 'name': '민수', 'email': "minsu.gmail.com" }, { 'name': '형준', 'email': "jun@naver,com" }, { 'name': '철수', 'email': "su.gmail.com" }, { 'name': '동희', 'email': "dongdong@daum.net" }, ] for (a of users) { a['email'].includes('@') ? null : console.log(a['name']); }
Coding 수업정리/항해99
[JS]띵동코딩 JS시작-스스로해보기-JSON.stringify()
객체 출력시 console.log에서 연산자와 객체가 만나면 내용이 아닌 객체의 type인 object가 출력됨. 쉼표를 사용해서 별도로 출력하거나, JSON.stringify()사용. console.log(a + '22')//[object Object]22 console.log(a, '22')//{age: 30, name: '동희'} '22' console.log(JSON.stringify(a) + 'rrr'); //{"age":30,"name":"동희"}rrr function seyHello() { let textbox = document.querySelector('#input') if (textbox != null) { alert(textbox.value + '안녕하세요') } } let users..
Coding 수업정리/항해99
[항해99]로그인페이지 만들기
우리 아이 코딩 고민은 그만! 쉽고 부담없는 온라인 코딩 학습지 카카오로 1초만에 시작~ 이메일로 시작하기 *스파르타 코딩클럽 통합 회원으로 로그인 가능합니다.
Coding 수업정리/코딩애플
[코딩애플]react 한번 정리하고 가기./작성중
state 만드는법 let [제목, 제목설정] = setState(값들) //값은 원시요소 말고도 배열, 오브젝트도 들어갈 수 있다. 사용할때 return ( { 제목 } //변경은 아래와 같이 { set좋아요(좋아요 + 1) }}>👍 {좋아요} ) props 전송하는법 function App(){ let [index, setIndex] = setState(0); let [제목, 제목설정] = setState(['다람쥐 코트 추천', '고양이 코트 추천', '강아지 신발 추천']) return( ); } function Modal(props){ return( {props.제목[props.index]} 날짜 상세내용 ) } // [0, 1, 2, 3, 4].map((a)=>{ }) 컴포넌트 만드는 법 작성중~
Coding 수업정리/코딩애플
[코딩애플]react props
props로 별걸 다 전송 가능. ('yellow') 말고 "yellow"로 전송도 가능. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천']) let [좋아요, set좋아요] = useState([0, 0, 0, 0]); let [modal, setModal] = useState(true); let [index, setIndex] = useState(0); //1. array의 자료 갯수만큼 함수안의 코드 실행 //2. 함수의 파라미터는 array내부의 ..
Coding 수업정리/코딩애플
[코딩애플]react (JS) .map
자바스크립트 .map 의 기능 리마인드 [1, 2, 3].map(function(a){ return 'abcabc' }) //1. array의 자료 갯수만큼 함수안의 코드 실행 //2. 함수의 파라미터는 array내부의 자료임. //3. return에 뭘 적으면 array로 담아줌. 이걸 이용해서 html을 반복해서 넣기 근데 react 중괄호 내부에서는 for 반복문이 안되서.. map함수를 이용해서 { [1, 2, 3].map(function (a) { return { modal ? setModal(false) : setModal(true) }}>{제목[2]} 맵 반복 생성 }) } 근데 이렇게도 가능 { 제목.map(function (a) { return {a} 맵 반복 생성 }) } 파라미터 2개..
Coding 수업정리/코딩애플
[코딩애플]react component 동적UI 3step
import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천']) let [좋아요, set좋아요] = useState(0); return ( 블로그 { //1 depth 깊은복사 let 제목정렬 = [...제목].sort(); 제목변경(제목정렬); }}>제목 정렬! {제목[0]} { set좋아요(좋아요 + 1) }}>👍 {좋아요} 2월 11일 발행 {제목[1]} { //1 depth 깊은복사 let copy = [...제목];..
Coding 수업정리/코딩애플
코딩애플 react JSX 문법, state
JSX 문법 1. html에 class 넣을 땐 className JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호} function App(){ let post = '강남 우동 맛집'; return ( 블로그임 { post } ) } JSX 문법 3. html에 style속성 넣고싶으면 / 카멜케이싱, 중괄호 안에 자료형으로 넣음! import './App.css'; 열어서 하기 귀찮을때 글씨 import logo from './logo.svg'; import './App.css'; function App() { return ( 블로그 글 제목 2월 11일 발행 ); } export default App; return()안에는 태그 병렬 기입 금지.(제일 부모 태그만 하나 만들고 하위에 만들면..
Coding 수업정리/드림코딩
[JS 게임만들기]어떻게든 완성은 함...
https://taehyunkim3.github.io/carrotgame1/ Carrot Game taehyunkim3.github.io READY 9 * { box-sizing: border-box; } html, body { } body { margin: 0; padding: 0; text-align: center; width: 100%; height: 100%; display: flex; background-color: beige; flex-direction: column; align-items: center; padding-top: 20px; } .main { background-image: url("img/background.png"); background-size: cover; backgrou..
Coding 수업정리/드림코딩
[JS 게임만들기] 랜덤배치하기.
https://ssocoit.tistory.com/251 [CSS] 부모 엘리먼트를 기준으로 position: absolute의 offset 주기 오랜만에 글을 작성해봅니다. 그동안 다양한 일들이 있어서 약 2주간 글이 끊겨버렸네요.. 시간이 늦었지만 무엇이라도 글을 작성해야겠다는 생각이 들어 이렇게 블로그에 다시 들어오게 되었 ssocoit.tistory.com 부모 엘리먼트가 relative이고, 해당 요소가 absolute인 경우 부모엘리먼트 안에서 배치가 가능하다. .playground { bottom: 0px; width: 100%; height: 60%; background: transparent; border: 3px solid black; bottom: 0px; position: relat..
Coding 수업정리/드림코딩
[JS로 게임만들기]타이머 만들기 성공!...
function gameset() { let COUNT_START = 200; // seconds * hours let count = COUNT_START; let playing = false; playpause = document.querySelector('.start'); playpause.onclick = function () { if (playing) { playing = false; console.log("Pause!"); playpause.innerHTML = ` `; } else if (!playing) { playing = true; console.log("Play!"); playpause.innerHTML = ``; } } function countdown() { displayTime()..
Coding 수업정리/드림코딩
[JS로 게임 만들기]카운트다운 타이머 만들기(참고자료)
으아.... 간단한 자바스크립트 게임 만들기 프로젝트를 시작했는데 게임은 커녕 카운트다운 타이머 만드는것 조차 이렇게 어렵다니 겨우 찾은 카운트다운 타이머 만들기 예제 https://www.youtube.com/watch?v=PIiMSMz7KzM https://codepen.io/dcode-software/pen/XWgyOpg Easy Countdown Timer with JavaScript Taken from my YouTube video: https://youtu.be/PIiMSMz7KzM In today's video we'll be building a simple countdown timer using HTML, CSS and JavaScript. ... codepen.io class Timer ..
Coding 수업정리/드림코딩
쇼핑목록앱 만들기.
Shopping List Clone * { box-sizing: border-box; /* padding, border가 width height에 포함됨 */ } ul { padding: 0; } body { background-color: #e8e8ff; text-align: center; } button { outline: none; background: transparent; border: none; cursor: pointer; } .list { width: 400px; margin: auto; background-color: #f1f0f7; border-radius: 20px; -webkit-box-shadow: 5px 5px 15px 5px #000000; box-shadow: 5px 5px ..
Coding 수업정리/프로그래머스 코딩테스트 입문
[알고리즘기초]배열의 유사도 (includes, filter)
https://school.programmers.co.kr/learn/courses/30/lessons/120903 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s1, s2) { let temp_array = s1.filter(item=>s2.includes(item)); return temp_array.length; }
Coding 수업정리/프로그래머스 코딩테스트 입문
[알고리즘기초]A 강조하기, 모음제거(정규표현식, 대소문자변환)
https://school.programmers.co.kr/learn/courses/30/lessons/181874 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(myString) { return myString .replaceAll(/[B-Z]/g, str=> str.toLowerCase()) .replaceAll(/a/g, 'A'); } function solution(my_string) { let result = my_string.replaceAll(/a|e|i|o|u/g, ''); return result; } 참고..
Coding 수업정리/항해99
정규표현식
https://velog.io/@hustle-dev/JavaScript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D [JavaScript] - 정규표현식 자바스크립트 정규표현식에 대해 정리한 글입니다. velog.io
Coding 수업정리/항해99
[JS]array.sort
array.sort() 배열 값 정렬 기본값 : 사전 dictionary처럼 앞자리를 기준으로 정렬한다 예) 1, 11, 2, 22, 3, 33 숫자의 크기대로 정렬하고 싶으면 아래와 같이 작성하면 된다 괄호 안에 있는거는 익명함수 오름차순 : .sort((a, b)=>a-b) 내림차순 : .sort((a, b)=>b-a) 참고 https://velog.io/@beanlove97/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%95%EB%A0%AC 자바스크립트 정렬 .sort() : 배열 값 정렬그냥 .sort() 하면 사전 dictionary처럼앞자리를 기준으로 정렬한다1, 11, 2, 22, 3, 33숫자의 크기대로 정렬하고 싶으면 아래와..
Coding 수업정리/항해99
유클리드호제법
https://school.programmers.co.kr/learn/courses/30/lessons/120808# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이건 처음 시도한 코드. 일부 오류남 function solution(numer1, denom1, numer2, denom2) { let numer3 = numer1*denom2+numer2*denom1; let denom3 = denom1*denom2; for (let i = 1; i < Math.max(denom3, numer3); i++){ if (denom3 % i === 0 && nu..
Coding 수업정리/항해99
[JS]몫 구하기
function solution (num1, num2){ return Math.floor( num1 / num2 ) ; } function solution2 (num1, num2) { return parseInt( num1 / num2 ) ; } console.log(solution(7,-2)); // -3 console.log(solution2(7,-2)); // -4 몫을 구하는데는 parseInt와 Math.floor가 있다. 음수일 경우 Math.floor 값이 다르게 나오므로 주의. 두 메소드의 차이를 한번 더 알아볼 것.
Coding 수업정리/항해99
[항해99]JS 문법정리 - 3
[[[각종 ES6 문법 소개]]] let, const var와 다르게 재선언 불가. let : 재할당 가능 const: 재할당도 불가능 arrow function function, return, 괄호, 중괄호 생략 가능. // ES5 function func() { return true } //ES6 const func = () => true const func = () => { return true } () => {} parm => {} (parm1, parm2, ...parms) -> {} // 익명 화살표 함수 () => {} 삼항연산자 컨디션 ? 참이면 : 거짓이면 condition ? expr1 : expr2 console.log(true ? "참" : "거짓") // 참 console.log(..
Coding 수업정리/항해99
JS 문법정리 - 2
조건문 if문 기본적인 if 문 let x = 10; if (x > 0) { console.log("x는 양수입니다."); } if-else let x = -10; if (x > 0) { console.log("x는 양수입니다."); } else { console.log("x는 음수입니다."); } if-else else-if 조건을 순서대로 비교 let x = 0; if (x > 0) { console.log("x는 양수입니다."); } else if (x < 0) { console.log("x는 음수입니다."); } else { console.log("x는 0입니다."); } switch문 문자열 비교. default는 모두 안맞으면 실행되는 최종 코드 let fruit = "사과"; switch (..
