브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔을 때 거치는 과정이다. 이때 브라우저는 새로운 DOM을 만든다. (참고 : 렌더링이란 브라우저에 리소스(html,css,js)를 그리는 작업을 뜻한다.) 두번째, 업데이트시의 렌더링은 다른 페이지로 이동했을때 발생하는 렌더링을 말한다. 브라우저는 업데이트된 DOM을 만들고 기존에 있던 DOM은 전부 날리는 식으로 업데이트가 진행된다. 하지만 리엑트는 이것과 다르게 동작한다. [리엑트의 렌더링 과정] 내용이 바뀌어 업데이트된 DOM을 새로운 사본으로 만든 뒤, 그 사본에 업데이트된 항목을 표시한다. 사본과 기존의 DOM을 비교하면서 달라진 점이 없는지 확인한다. D..
0. 작성일? 2023년 6.14 수요일 1. 오늘 어떤 일을 했는지? 문법종합반 3주차 완료 야구게임 페어프로그래밍 및 리팩토링 -> 매소드명으로 분리하기! this 바인딩 ->너무 시간 많이 써서, 잠시 내려두고 며칠뒤 머릿속에서 정리가 되면 다시 접근하기로 함.(금~토요일 예정) 콜백함수 개념정리 -> 이건 얼마 안걸렸는데, 생각보다 쉽게 받아들여짐. 다만 this바인딩에 정신을 빼앗겨서 블로그 글 정리는 못함. 아래쪽은 슬슬 정리한것. github star많은 레포, 항해99 실전프로젝트 우수작 코드 구경 문법종합반 4-5주차 보면서 흥미로운 부분만 먼저 미리 읽어보기.(클로저, 콜백함수, 콜백지옥의 개념) 클린코드(로버트C.마틴) 책 배송와서 훑어봄. 2. 내가 모르는것? 몰랐던 것? this..
스크린샷 찍으려고 보니 아무도 없음.. 0. 작성일? 2023년 6.13. 화요일 1. 오늘 어떤 일을 했는지? 항해99 JS 문법종합반 2, 3주차 정리 블로그 글 3-4개정도 작성 -> this 개념에 대해 좀 많이 찾아봄. 단순하면서 이해가 어려운 개념이라 조금 확인작업이 필요했다. https://kthdev.tistory.com/137(이건 12일 밤에..) JS의 String https://chat.openai.com/share/3c93f263-b068-4c6b-bc75-3de7989b4bcc ChatGPT A conversational AI system that listens, learns, and challenges chat.openai.com 위에는 내가 자바스크립트의 String이 C언어..
var fullname = 'Ciryl Gane' var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; }, getLastName: (function() { return this.fullname.split(' ')[1]; })() } console.log('Not', fighter.opponent.getFullname(), 'VS', ..
다들 버그에 맞게 코드를 써버려서 아직까지 고쳐지 못하고 있는 자바스크립트 버그 typeof '' // string typeof '123' // string typeof 1 // number typeof true // boolean typeof {} // object typeof /test/index // object typeof function () {} // function typeof undefined // undefined 위에는 논리적으로 맞는 결과값인데 참고 : 자바스크립트의 원시타입은 number, String, Boolean, null, undefined, Symbol, Bigint 가 있음. 아래는 ? NaN은 뭐 number가 비어있는거라 치고, null은 심지어 원시타입인데 왜 obj..
https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음 내가 테스트한 답은 function solution(strings, n) { strings.sort((a, b) => { return a[n] - b[n]; }); return strings; } 이거였다. 제일 간과한 문제가 C언어와 다르게 자바스크립트에서는 문자열끼리 뺄 경우 ASCII코드로 자동 변환해서 빼주지 않고, NaN을 반환한다는것. 그래서 문자열의 ASCII코드를 가져오려면, ..
https://chat.openai.com/share/3c93f263-b068-4c6b-bc75-3de7989b4bcc ChatGPT A conversational AI system that listens, learns, and challenges chat.openai.com 위에는 내가 자바스크립트의 String이 C언어처럼 참조형이 아니고 원시값인게 이해가 안가서 gpt에게 물어본 내용이 들어있는 대화록 링크. GPT내용 요약하자면 자바스크립트는 효율적이 사용을 위해 문자열을 원시값으로 만들어 빠른 엑세스가 가능하도록 했고, 원시값임에도 동일한 문자열이 여러개 있는 경우 자바스크립트 엔진에 자체적으로 한군데의 메모리값을 여러군데 할당해서 메모리 사용을 효율적으로 관리한다. 이때 C언어와 다르게 가비지..
0. 작성일? 2023년 6.12.월요일 1. 오늘 어떤 일을 했는지? 항해99 JS 문법종합반 1주차. 기본문법 복습, 블로그 내용 정리 https://kthdev.tistory.com/133 git 사용 연습 자바스트립트 문법종합반 1주차 / 복습 역사 2005년 ajax 2008년 구글의 V8엔진. 2009년 node.js등장, 서버개발 2015년 ES6 출시 특징 객체지향 프로그래밍 지원. 동적 타이핑 함수형 프로그래밍 지원 ( 함수를 first-class object로 취급(일반 값처럼 kthdev.tistory.com 2. 내가 모르는것? 몰랐던 것? cli이용한 git 사용방법, 전반적인 git의 기본 기능을 command 로 사용하는 방법(fork, clone 등) git의 fork 개념,..
역사 2005년 ajax 2008년 구글의 V8엔진. 2009년 node.js등장, 서버개발 2015년 ES6 출시 특징 객체지향 프로그래밍 지원. 동적 타이핑 함수형 프로그래밍 지원 ( 함수를 first-class object로 취급(일반 값처럼 변수할당, 반환 가능)함, 고차함수(함수를 인자로 받거나 반환하는 함수 지원) 비동기처리 클라이언트/서버 모두 사용 가능 -- 변수와 상수 변수 : var, let -> 메모리에 저장, 읽어들여 재사용. var는 재선언시 경고 안함. let사용. 상수 : const -> 선언 후 변경 불가. 변수 이름 : 저장된 값의 고유 이름 변수 값: 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 것 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알림 변수 참고 : ..
useEffect코드는 페이지가 로드된 다음 실행되는 코드임. 서버로부터 불러오는 작업이나, 기타 복잡하고 시간 오래걸리는 함수들은 여기에 넣어주면 사용자가 좀더 빠르다고 체감이 가능함. 사용방법은 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } 요렇게 사용하면 되고, 실제로 2초후 사라지는 안내문을 만들어보자. let YellowBox = styled.div` background : yellow; height : 100px; width: 100%; font-size:30px; ` functi..
CSS대신에 아래처럼 JS파일 안에 css스타일링을 할 수 있고 심지어 props(약간 사용법 다름 유의)로 조건식등을 넣어서 스타일링도 가능함. 터미널에 아래 입력해서 설치해줌 npm install styled-components 근데 설치가 안될수 있음! (최근 버전이 npm과 충돌이 있는듯 함. 이 경우 아래 처럼 입력 yarn add styled-components 아래처럼 사용. 이렇게 컴포넌트에 넣어서 사용도 가능함. import styled from 'styled-components'; let YellowBtn = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white'..
기본셋팅 터미널에서 router설치 npm install react-router-dom@6 index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); app.js import { Routes, Route, Link } from 'react-router-dom' 기본셋팅은 끝. 페이지 주소, 내부 내용 설정 app.js 아래와 같이 로 감싸준 형식 내부에서 로 지정해줌. 이게 위치한 곳에서 html을 생성하므로, navbar 바로 아래에 작성함. 상세페이지 같은건 map돌려서 생성도 가능함. // 이걸로 감싸줌 /..
데이터가 너무 많거나 등등 파일을 분리하는 경우 불러오는 방법을 크게 두가지로 사용할 수 있음. 1. default export 대부분 이걸 사용하며, 모듈에서 한가지 주요한 것을 내보낼때 사용함. data.js 생생하고 아래와 같이 작성 let a = 10; let b = 20; let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000 }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000 }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000 }..
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..
