1. 외부 이미지 링크 가져오는건 똑같이 url 넣어주면 됨. 2. CSS에서 background-image: url로 가져오기 app.css에서 아래 코드처럼 경로를 넣어줌. .main-bg { height: 300px; background-image: url("/src/img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg"); background-size: cover; background-position: center; } 3. JSX 내부에서 가져오기. 위와 똑같은 이미지를 app.js에서 가져오려면, import 이미지 from './img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg'; 요렇게 app.js 위..
React로 부트스트랩을 적용할때, css 파일을 이용해서 부트스트랩 속성을 변경하면서 사용할일이 많다. 그래서 진짜 바뀌나 해보려고 navbar에 padding을 많이 넣어봤는데 적용이 안된다. 원인을 찾았는데, app.js 상단 import 순서가 아래와 같이 되어야 한다. 그래야 app.css가 부트스트랩을 덮어쓸 수 있다. 요렇게 적용이 되는걸 볼수 있다.
터미널에 npm start 입력시, 맥북에서 아래와 같은 오류가 자주 생긴다. 터미널에 아래와 같이 입력한다. (경로는 사진에 나온 경로에서 .cache를 빼고 입력) sudo chown -R $USER /Users/mac/Desktop/reactbootstrap/reactbootstrap/node_modules//경로수정후사용 이제 잘 나온다. 근데 저장을 하려고 하니 아래와 같은 새로운 오류가 나온다. 저 버튼 눌러도 해결은 안되고 , 터미널에 아래와 같이 입력한다. (경로는 해당 프로젝트 경로로 바꿔야한다) 프로젝트 폴더 경로는 터미널에서 현재 폴더 위치를 보여주는 pwd를 입력해서 알아내면 편하다. sudo chmod -R 777 /Users/mac/Desktop/reactbootstrap/rea..
참고 : 날짜 기본 값은 귀찮아서 넣지 않고, 새로 추가되는 부분만 들어가도록 해둠. 참고 : 클릭시 상위요소까지 같이 클릭이 될 경우, onClick={(e)=>{e.stopPropagation(); 다른변경함수()}} 추가되는 길이만큼 요소가 추가되고, 추가되는 시간이 기록되도록 수정함. 이건 추가버튼 { 입력값변경(e.target.value) }}> { if (입력값.trim() === '') { alert('내용을 입력하세요'); return; // 입력값이 없으면 경고창 출력 후 종료. } let temp = [...글제목]; // 글제목 추가 temp.push(입력값); 글제목변경(temp); let tempLike = [...또봉]; // 좋아요 추가 tempLike.push(0); 또봉변경..
컴포넌트는 자주 사용하는 html을 하나의 로 만들어주는 react의 문법. 컴포넌트 용도 1. 반복적인 html 축약시 2. 큰 페이지들 3. 자주 변경되는 것들 (성능상) 우선 3스텝으로 만듬. 1. function만들기 function App()밖에서 만들기. 함수명은 대문자로 시작함. function Modal() { return ( title date content ) } 2. return() 안에 html 담기 3. 써서 사용하기. function App() { return ( 중략 {글제목[2]} 2월 17일 발행 ) } 주의사항 : 최종 태그는 1개가 되어야함.(fragment사용가능) 여러가지 형태 가능함. function Modal(){ return ( ) } let Modal = ()..
아래와 같은 state가 있다. let [title, setTitle] = useState(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']); 이걸 버튼을 누를때 값을 변경하려고 할때, { setTitle(title[0] = '다람쥐 코트 추천'); }} 이런 식으로 하면 이런식으로 변경이 된다. 왜냐하면 위에선 title[0]번째에 다람쥐코트추천을 할당한뒤, 그 값 자체를 title에 할당해버리기 때문에, 결국 index0 값이 전체를 덮어버린다. setTitle('다람쥐 코트 추천'); 이거랑 같은 효과가 나는것이다. 정확하게 하려면 { setTitle(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']); }} 이렇게 변경 할것 안할것 전부다 할당해주어야 ..
항해99 15기 사전과정 웹개발미니프로젝트 8조 Github 주소 : https://github.com/webmini-team8 webmini-team8 webmini-team8 has one repository available. Follow their code on GitHub. github.com 팀장 : Khusan 팀원 : 강신범 김태현 홍성민 프로젝트명 : 의류 쇼핑몰 프로젝트 목적 : 모바일 의류 쇼핑몰 제작 와이어프레임 로그인페이지, 메인페이지, 장바구니, 상품등록, 상세상품 총 5page로 구성 되있습니다 DB에 저장된 정보를 기반으로 상품을 보여주고, 변경하는것이 주요 서비스 입니다. 로그인은 우선 간단하게 구현합니다. 추후 회원가입 기능을 구현합니다. 메인페이지는 DB에서 상품 정보를..
터치로 빠르게 클릭하면 반투명 정사각형이 잠깐 보였다 사라진다. 찾아봐야겠다.. 참고: 카카오톡 자체 브라우저에서 발생함.
https://taehyunkim3.github.io/JS30/drum.html 왜 Bootstrap demo 제목이 안바뀌는지 모르겠다. 아마 github 혹은 티스토리 자체 캐쉬가 있나..? Bootstrap demo taehyunkim3.github.io 소리가 좀 거슬릴것 같아서 음소거 버튼을 제작해서 넣었다. 클릭할때마다 muted라는 변수가 false인 경우에만 sound.play함수를 실행한다. muted변수를 그냥 전역에다가 놔뒀는데, 뭔가 풍파에 노출시켜둔 뭔가 찝찝한 기분이라 찾아보니 클로저라는 뭔가 어려운데 필요해보이는 개념이 있었다. 요거는 조금만 더 공부해보고 적용볼 예정. https://codepen.io/arlekino/pen/DEBeRE Simple switch ... cod..
https://taehyunkim3.github.io/JS30/drum.html 해당 프로젝트 링크 Bootstrap demo taehyunkim3.github.io 왜bootstarp demo는 바꿔도 안바뀔까. 하. 겨우 찾았다. 마우스로 해당 버튼을 클릭하면, 해당 버튼에 애니메이션이 구현되도록 해야했는데, 여기서 에니메이션은 key-code로 묶여있기에, 큰 수정 없이 기능을 추가하기 위해서는 마우스 클릭을 하면 해당 요소의 data-key 값을 불러올 수 있어야 한다. 보통 해당 요소의 속성을 불러올땐 getAttribute를 사용하는데 this는 getAttribute를 사용할 수 없다. ㅠㅠ 따라서 this 대신에 addeventlistener에서 인자를 넘겨줘야하는데, 문제는 addEven..
https://taehyunkim3.github.io/JS30/drum.html Bootstrap demo taehyunkim3.github.io 타이틀이 bootstrap demo인건 왜 안바뀔까 마우스 오버를 하면 키보드 동작과 동일한 비주얼을 보여주도록 수정하고, 마우스가 오버되어 있는 경우 transitionend를 듣는 eventlistener를 해당 키만 잠시 비활성화. A click S click2 D keyboard F metalic G moneybag H perc J coin K duck L button ; bell
조금 더 수정을 해보았다. 입체를 너무 해보고 싶어서, 한번 적용해보았다. 참고한 사이트는 코드펜 프로젝트이며 하단에 첨부했다. https://taehyunkim3.github.io/JS30/index.html https://taehyunkim3.github.io/JS30/index.html taehyunkim3.github.io 기존 평면 입체효과 변경 후. 그림자 효과가 약간 부자연스럽긴 함. 키보드 버튼을 누르면 위로 올라오면서 색상 변경. 요거 보고 수정해서 적용해보았다. https://codepen.io/poppe1219/pen/oNdzaw Mobile menu, CSS only Having fun and learning some CSS3 animations and transitions. Ins..
transition을 주면서 html요소를 보여주고 숨기려면, display block, display none으로는 애니메이션이 안먹는다. display대신에 visibility: hidden; visibility: visible; 이 속성과 opacity:0 opacity:1을 같이 사용해주면 된다. .modal-background.show { /* display: block; */ visibility: visible; opacity: 1; } .modal-background { /* display: none; */ visibility: hidden; background-color: rgba(0, 0, 0, 0.8); position: fixed; bottom: 0; right: 0; top: 0; ..
.modal__background{ position: fixed; top:0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); } .modal__box{ position: absolute; top: calc(50vh - 100px); left: calc(50vw - 200px); background-color: white; display: flex; justify-content: center; align-items: center; border-radius: 10px; width: 400px; height: 200px; } 이렇게하고 Hello, this is modal window 이렇게 아래는 애플코딩에서 연습했던 부분. hello X Na..
자바스크립트에서 html을 조작하는 방법은 정말 여러가지가 있는데 그중 입력을 기준으로 세가지 방법을 비교해보겠습니다. textContent textContent는 CSS요소를 고려하지 않기 때문에 가장 빠르지만, 읽을때 이야기이고, 쓸때는 결국 다른 요소들의 높이, 위치에 영향이 있기 때문에 CSS를 다시 그리는 reflow가 들어가게 됩니다. Hello! World! document.getElementById('sample').textContent = 'HiThere!!'; //화면출력 //Hi!There!! textContent로 입력을 하면 해당 요소의 하위 요소가 모두 싹 지워지고 입력값은 모두 텍스트로만 인식되어 채워지게 됩니다. 따라서 하위 태그가 있는 경우 사용이 불가능합니다. 하지만 읽어..
https://school.programmers.co.kr/learn/courses/30/lessons/160586 나의 solution function solution(keymap, targets) { let result = []; //타겟1개중 for (targetsIndex in targets) { let targetCount = []; for (targetElement of targets[targetsIndex]) {//타겟 한개중 타겟한글자 let keymapCount = []; for (a of keymap) { //키맵 종류 하나씩 테스트 let index = a.search(targetElement); index === -1 ? keymapCount.push(index) : keymapCo..
홈 TV프로그램 영화 내가 찜한 콘텐츠 오늘의 영화 토르: 러브 앤 썬더 오늘 한국의 Top 10 영화 오늘 한국의 추천 영화 갑시다 갑시다 어려웠던점 또 모르고 글씨를 지워서 한참 시간낭비 (삼항의 null부분) 유심히 보자.
영화 버킷 리스트 다음 이 프로젝트의 가장 큰 수확은 오타를 찾다가 빡쳐서 선택영역 색상 변경하는걸 찾아본 것. 더이상 모르고 선택해서 지울 일은 없다.
선택이 이런식으로 되니 보이지가 않아서 모르고 지워서 오류가 하루에 세네번씩 난다. 이젠 안되겠다 싶어 하이라이트 색상 변경 방법을 검색... 커서 색상 변경 핫핑크로. 탐색창에 >setting.json (user) 입력하고, 해당 프로젝트만 변경시 document setting, 이 컴퓨터의 모든 프로젝트에 적용시 user setting을 선택하면 된다. 이걸 열어서 아래 코드를 맨 아래 붙여주는데, 중괋호 안에 들어오게 한다(위 사진 노란 중괄호 밖에 하면 안됨) "workbench.colorCustomizations": { "editorCursor.foreground": "#f53eb8",//에디터 커서 색상 추가 "terminalCursor.foreground": "#f53eb8",//터미널 커서..
어려운 클래스명 지양할 것. 일관성 있는 클래스명 만들 것. 진짜 한참 찾음.. 영화 버킷 리스트 다음
2023.6.2 제이쿼리 $('#id').attr('src', '${data["articles"][0]["image"]}') 바닐라자바스크립트 let movPic = document.querySelector("#moviesPic"); movPic.setAttribute("src", `${data["articles"][0]["image"]}`); 영화 버킷 리스트 다음
2023년 6월 2일 무엇이든 물어보살 이라는 이름의, 질의응답 시간. 약 80명이 모임. 내용이 참 많았지만, 내가 지금 가지고 가야 할 말만 남겨본다. 중요한 것은 꺾이지 않는 마음이 아니라 꺾여도 계속 하는 마음 조만간 TIL관련 강의? 할 예정. 질문게시판 적극 활용할 것. 오늘 할 일을 내일 하지 말고, 무슨 일이 있어도 오늘 끝낼것. 돌파력 있는 개발자가 될 것. 모르는 것에 떳떳할 것. 점진적, 나선형 학습 같이 밥먹고 싶은 사람이 될 것 ---- 갑시다~
/ / 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..
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']); }
