전체 글
[항해99]로그인페이지 만들기
우리 아이 코딩 고민은 그만! 쉽고 부담없는 온라인 코딩 학습지 카카오로 1초만에 시작~ 이메일로 시작하기 *스파르타 코딩클럽 통합 회원으로 로그인 가능합니다.
[코딩애플]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)=>{ }) 컴포넌트 만드는 법 작성중~
[코딩애플]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내부의 ..
[코딩애플]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개..
instagram.
지난 6년간 운영했던 카페 기록을 위해 남겨둠. 부계정이 많다. 카페 공식 계정 https://instagram.com/flatland__ 카페에서 태어난 고양이. https://instagram.com/jeomko 카페 날씨 칠판 계정 https://instagram.com/flatland_weather 카페 제빵 계정 https://instagram.com/flatland_baker 개인계정 https://instagram.com/taehyunkim3
[코딩애플]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 = [...제목];..
코딩애플 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()안에는 태그 병렬 기입 금지.(제일 부모 태그만 하나 만들고 하위에 만들면..
코딩애플 react 👍버튼만들기, array값 변경
버튼만들기 let [좋아요, set좋아요] = useState(0); // 중략 // 아래 html은 return내부에 작성!! {제목[0]} { set좋아요(좋아요 + 1) }}>👍 {좋아요} 2월 11일 발행 onclick 아니라 onClick임! onClick={함수가 들어감!} state를 변경하려면, state변경함수가 들어가야함. 여기서는 set좋아요(새로운state) (새로운 state로 싹 갈아줌) import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 ..
코딩애플 html&css - 1
한번 다시 들어보는 코딩애플의 html 기초 html 은 자료의 구조를 표현하기 위한 마크업 언어임. 어떤 역할을 하는지 항상 알려줘야하고, 웹표준을 잘 지키는 것. 글 본문 글 제목 링크 버튼 리스트 리스트 CSS 간단하게 삽입할 경우 글자 자주 사용하는 글자 스타일들. font-size : 20px; font-family : 'gulim'; color : black; letter-spacing : -1px; text-align : center; font-weight : 600; 이미지 크기, 가운데 정렬 display : block; margin-left : auto; margin-right : auto; width : 150px; 텍스트 일부만 변경 안녕하세요 저는 뛰어난 개발자입니다. 참고 : s..
react 초기 세팅
리엑트 설치 sudo npx create-react-app reacttodo(name) cd reacttodo(name) 부트스트랩설치 sudo npm install react-bootstrap bootstrap 리엑트 아이콘 설치 https://react-icons.github.io/react-icons npm install react-icons --save scss 설치 https://sunnyfterrain.github.io/devlog/tips-react-scss.html sudo npm install node-sass styled components 설치 최근 오류로 아래 버전 명시 필요 sudo npm install styled-components@5.3.10 권한수정 pwd (경로 알아내기)..
[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..
[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..
[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()..
[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 ..
쇼핑목록앱 만들기.
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 ..
JS의 객체타입과 깊은복사, 얕은복사
JS에서 number, string, boolean, null, undefined 를 제외한 모든 값은 object임. (원시타입과 객체타입 로 구분해서 칭함.) 원시타입은 값 변경이 불가능하고, 값을 수정하면 항상 새로운 값이 덮어씌워짐. 즉, string을 변경할수는 있지만, string[1]처럼 string의 일부는 불러올수는 있지만 일부만 수정은 불가능하다. 반면 객체타입은 포인터처럼 데이터가 저장된 메모리의 주소값을 가지고 있고, 데이터 일부 변경이 가능하다. 다만, 객체타입을 복사할때 얕은복사, 깊은복사를 주의해서 다루어야 한다. 주소값만 복사할 경우 원본 데이터가 수정되면 복사된 데이터도 수정이 됨. 앝은복사 깊은복사는 아래 링크에 잘 정리되어 있음 https://hanamon.kr/java..
코딩 공부에 필요한 사이트 모음[계속 추가중]
분류는 아직 못하고 일단 다 때려넣고 있습니다. https://roadmap.sh/frontend Frontend Developer Roadmap Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. roadmap.sh 그외 모든 로드맵 https://roadmap.sh/ Developer Roadmaps - roadmap.sh Community driven roadmaps, articles and guides for developers to grow ..
event delegation, 이벤트 타켓 찾기
부모안에 있는 자식들에게 동일한 이벤트를 각각 등록해야할때, 부모에 한번에 등록 가능함! event 리스너 파악을 위해 위 예시처럼 사용 가능. breakpoint 걸고, watch탭에서 event.target.nodeName XX event.target.dataset.id queryselector 값 찾아오는 법
bubbling, passive, preventDefault
버튼을 클릭하면 bubbling up이 되어 middle, outer까지 클릭 이벤트가 실행됨. event.stopPropagation(); event.stopImmediatePropagation(); 이 두개는 되도록 사용하지 말것! 해당 버튼을 참고하고 있는 모든 리스너를 무시하게 됨. 우리가 모르는 코드가 있을 수 있으므로 매우 위험(프로젝트 규모가 커지면, 예상하지 못한 오류 발생 가능성 높음) how?? 해당되는 모든 부모에서 if(event.target !== event.currentTarget){ return; } 이 함수를 넣어줌. ===== event.preventDefault(); 모든 함수를 처리하고-> 체크박스 체크표시 active event listener 브라우저는 우리가 설정한..
$0.dispachEvent(new Event('click'));
$0.dispachEvent(new Event('click')); 콘솔창에서 인공적으로 이벤트를 만들수 있음. 또한 콘솔창에서 const listener = () => {console.log('clicked!'); 이렇게 콜백함수 선언 가능하고 그 이후에 $0.addEventlistener('click', listener); 이러면 클릭하면 반응하고 $0.removeEventlistener(); 이러면 이제 안함. 이렇게 콘솔창에서 자바스크립트를 선언하고 제어할 수 있음 출처 browser101 6.1강
[알고리즘기초]배열의 유사도 (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; }
[알고리즘기초]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; } 참고..
정규표현식
https://velog.io/@hustle-dev/JavaScript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D [JavaScript] - 정규표현식 자바스크립트 정규표현식에 대해 정리한 글입니다. velog.io
[JS]알고리즘 repeat 활용 조만간 해보기.
array.toString()이 쉼표를 포함해서 만들어주지만, array.join(''); 을 사용하면 붙여서 반환받을 수 있다.\ 아래와 같이 repeat을 사용하고, map 을 사용해서 해당 요소를 새로운 요소로 대체해서 반환할수 있음. function solution(my_string, n) { var answer = [...my_string].map(v => v.repeat(n)).join(""); console.log(answer); return answer; }
[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숫자의 크기대로 정렬하고 싶으면 아래와..
유클리드호제법
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..