내일배움캠프/Today I Learned47 [TIL 2023.06.16] 후발대 과제 / React counter app 만들기 💻오늘 배운 내용 live share를 이용한 코드리뷰 그동안 조원끼리 코드리뷰를 하면 리뷰를 하는 사람이 화면 공유를 하고 나머지 사람들은 화면을 보고있는 상태에서 리뷰 하는 사람은 자신이 쓴 코드의 로직에 대해 쭉~읽어내려가며 설명하는 방식으로 했었다. 그런데 이렇게 하면 코드가 눈에 잘 안 들어오고 이해가 안되는 부분이 있으면 그냥 넘어가게 된다. 오늘 조원 중 한분이 새로운 방법을 알려주셨는데 VScode extension 중 하나인 live share를 이용하는 것 이렇게 하면 공유받은 코드를 같이 보면서 주석을 달거나 질문도 자유롭게 하면서 좀 더 쌍방향의 코드리뷰가 가능하다. 역시 아는만큼 보인다고.. 그동안 나는 너무나 원시인이었던 것. 이렇게 같이 코드를 보면서 서로 리뷰를 하고 부족한 .. 2023. 6. 19. [TIL 2023.06.15] React 프로젝트 GitHub Pages 배포하기 / 컴포넌트 분리하기 💻오늘 배운 내용 React 프로젝트를 GitHub Page로 배포하기 리액트를 쓸 때 CRA(Create-React-App)을 설치해서 사용 하는데 이렇게 하면 깃허브 페이지가 호스팅 되지 않는다. 아마도 페이지 주소를 열면 Readme를 만나는 당혹스러움을 경험했을것.. github pages로 web을 deploy했을 때 가장 기본으로 나오는 메인 페이지는 자동으로 repository의 가장 상단에 있는 index.html을 기준으로 하는데 CRA에서 index.html은 public 폴더 안에 있기 때문 >> 그래서 React 프로젝트를 GitHub Pages로 배포하기 위해서는 몇가지 작업이 필요하다. 구글에 방법이 여러가지 있었지만 난 간편한게 가장 좋기 때문에.. 비교적 제일 덜 복잡하고 빨.. 2023. 6. 16. [TIL 2023.06.14] React로 Todo list 만들어 보기 ❓발생한 이슈/고민 CRA 설치 후 나만의 투두리스트를 만들어 보았다. [1] 완료 취소 간 상호이동 working 항목의 완료 버튼을 클릭 하면 done 으로 내려오게 하고 싶다. done 항목의 취소를 누르면 다시 working쪽으로.. [2] id 값의 중복 삭제를 누르면 해당 항목이 아닌 다른 항목이 삭제되고, 또 여러개가 갑자기 중복되어 생성되거나 삭제 버튼을 눌러도 삭제가 되지 않는 이슈 발생 삭제되고 생성되면서 id값의 중복으로 인한 문제였다. [3] input validation input에 값이 없는 경우 submit이 되지 않도록 validation 적용이 필요 💡해결과정 [1] 완료 취소 간 상호이동 //투두 완료&취소 버튼 함수 const todoUpdateClickBtn = () .. 2023. 6. 15. [TIL 2023.06.13] React 불변성/Rendering/counter 프로그램 만들어 보기 💻오늘 배운 내용 불변성 불변성이란 메모리에 있는 값을 변경할 수 없는 것 숫자, 문자열 등 원시 데이터 = 불변성이 있다 객체, 배열, 함수 = 불변성 없다 그 이유는 원시데이터: 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장 원시데이터가 아닌 데이터: 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다. 리액트에서 데이터의 불변성을 지켜주는 것이 중요한 이유 리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다. state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교 따라서, setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 .. 2023. 6. 14. [TIL 2023.06.12] React Component / JSX / Props / State 💻오늘 배운 내용 본격적으로 주특기 주차에 들어섰다. 드디어! 자바스크립트도 아직 능숙하게 다루지 못하는데 걱정이 되긴 하지만 그래도 기대된다. Component JavaScript 함수와 유사하다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 리액트 컴포넌트는 함수형과 클래스형 두가지가 있지만 공식에서는 함수형 컴포넌트를 사용하기를 권장하고 있다. 부모-자식 컴포넌트 컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 한다. JSX JavaScript를 확장한 문법 : HTML을 품은 JS JavaScript의 모든 기능.. 2023. 6. 12. [TIL 2023.06.09] Javascript call(), apply(), bind(), 팀과제 KPT 💻오늘 배운 내용 call(), apply(), bind() 세 함수는 모두 함수에서 this로 사용할 객체를 명시적으로 지정하여 실행되도록 해준다. call() 함수객체에 미리 정의되어 있는 함수로 첫번째 인자로 객체를 주는데 call()을 호출하는 함수가 인자로 주어진 객체에 딸려 있는 객체 처럼 동작하게 한다. 사용방법은 element.call(thisArg[, arg1[, arg2[, ...]]]) 첫 번째 인자는 함수를 소유하는 객체를 지정하고, 두 번째 부터는 옵션으로 필요하다면 함수로 보내는 인자를 지정할 수 있다. apply() call() 메소드와 기능은 동일. 차이점은 인자로 객체와 인자배열을 받는다는 것. bind() 인수로 주어진 객체를 this로 사용하는 함수를 반환한다. 반환된 .. 2023. 6. 10. [TIL 2023.06.08] css 가상선택자 / javascript 요소의 속성 값을 정의하는 메서드 💻오늘 배운 내용 css 가상 선택자 / 가상 요소 선택자 1. 가상 클래스 선택자 (pseudo-class) 먼저, 가상 클래스 선택자(pseudo-class)는 HTML 문서에 작성된 요소에 가상의 클래스를 만들어 부착할 수 있다. 가상 클래스 선택자의 종류는 다음과 같다. 1 :active ,과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시) 2 :only-child 형제가 없는 요소를 선택할 때 사용된다. :first-child:last-child 와 동일하다. 3 :hover 마우스 커서가 올라가 있을 때(마우스 오버)선택된다. :link, :visited, :active를 함께 쓴다면 css작성시 순서에 주의해야 한다. 4 :only-of-type 같.. 2023. 6. 9. [TIL 2023.06.07] localstorage 페이지 당 각각의 댓글창 구현하기 ❓발생한 이슈/고민 자바스크립트와 로컬스토리지를 이용한 댓글 CRUD 기능은 다 구현이 되었지만 각각의 영화 페이지 마다 고유의 댓글창이 나와야 하는데 모든 페이지에 똑같은 댓글이 나타나는 문제 발생 💡해결과정 문제를 해결하기 위해서는 현재의 코드에서 4가지 수정사항이 필요했다. 1. 각 영화 페이지마다 고유한 식별자를 가지고 있어야 한다. 각 영화 페이지의 URL을 사용하여 고유한 식별자를 만들어서 댓글을 구분하는데 사용할 것. 2. localStorage를 사용하여 댓글을 저장할 때, 식별자를 함께 저장해야 한다. 기존의 comments 배열 대신 객체 형태로 댓글을 저장해야 한다. 객체의 속성으로는 영화Id, username, comment, password를 포함 3. displayComments.. 2023. 6. 8. [TIL 2023.06.05] Javascript localStorage를 이용하여 댓글 기능 만들기 💻오늘 배운 내용 localStorage란? 브라우저에 key-value 값을 Storage에 저장할 수 있다. 세션이 바뀌어도 저장한 데이터가 유지된다. setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 개수 key() - index로 key값 찾기 localStorage는 문자열만 저장할 수 있다. [객체->문자열] 객체를 저장하려면 JSON.stringify() 메서드로 문자열로 변환한 다음 저장해야 한다. [문자열->객체] 반대로 저장된 문자열 값을 가져와서 다시 객체로 변환하려면 JSON.parse() 메서드를 사용한다. ❓.. 2023. 6. 7. [TIL 2023.06.01] 영화 검색 페이지 완성! 제출 전 다듬기 (GOE’s CINEMA) 💻오늘 배운 내용 replace() str_text.replace("찾을 문자열", "변경할 문자열") 정규표현식 str_text.replace(/찾을 문자열/gi, "변경할 문자열") 정해진 규칙을 사용해 모든 문자를 변환할 수도 있고 숫자만 변환하거나 맨 처음, 맨 뒤만 변환할 수 있음 슬래쉬(/) 표시 안에 넣는 텍스트의 따옴표는 없어야함 gi의 의미 g : 전체 모든 문자열 변경 (global) i : 영문 대소문자를 무시, 모두 일치하는 패턴 검색 (ignore) 특수 기호를 맨처음 적을 때는 항상 역슬래쉬(\) 부분이 정규식 맨 앞에 존재 해야함 str_text.replace(/\./gi, "-") 기호의 뜻을 풀어보자면 1] /문자열/ (이제 정규식을 사용할건데)- ’/’ 슬래쉬는 정규 표현.. 2023. 6. 2. [TIL 2023.05.31] 순수 자바스크립트로 무한루프 자동 슬라이드 만들기 (GOE's CINEMA) 💻오늘 배운 내용 a.cloneNode() a요소를 그대로 복사 // a.cloneNode(true) a요소에 자식요소까지 모두 복사 a.prepend() a요소의 앞에 추가 setInterval() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 예) 콘솔에 현재 시간을 2초마다 출력 ❓발생한 이슈/고민 무한루프 하는 자동슬라이드를 만들려고 한다. 20개의 카드들이 있고 그 앞뒤로 똑같은 20장의 카드를 복사한 뒤, -방향으로 한장씩 이동하는 애니메이션을 transition과 자바스크립트로 동작하게 한다. 그리고 기존카드의 마지막 카드가 카드들을 담고 있는 컨테이너의 첫번째에 오는 순간 슬라이드의 위치가 다시 처음으로 되돌아가는.. 2023. 6. 1. [TIL 2023.05.30] 자바스크립트 검색기능 (GOE’s CINEMA) 💻오늘 배운 내용 insertAdjacentHTML() element.insertAdjacentHTML(position, text); 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입 요소 변경이 아닌 요소 삽입만을 해야 하는 상황 position의 값은 beforebegin, afterbegin, beforeend, afterend만 사용할 수 있다. trim() 문자열 좌우에서 공백을 제거하는 함수 var a = " 가 나 다 라 마 " a.trim() //"가 나 다 라 마" replace() 문자열에서 변경하려는 문자열이 여러 번 반복될 경우, 첫 번째로 발견한 문자열만 치환 apple, banana, banana' 이렇게 'banana'가 여러 번 반복될 경우.. 2023. 5. 31. 이전 1 2 3 4 다음
