콛 다이어리

리액트 라우터 돔(react-router-dom)React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리  a태그를 사용하지 않는 이유:a태그를 사용하면, 화면이 새로 로딩이 된다. 이 때 필수적으로 발생하는 화면 깜박임이 사용자의 경험을 떨어뜨리는 요인이 되기 때문에 라우팅으로 부드러운 화면 전환을 꾀하는 것이다.결론:1. a태그쓰면 화면 깜박여서 bad2. 라우팅을 사용하면 화면이 부드러워져서 good   설치하는 방법import {BrowserRouter, Routes, Route } from "react-router-dom"   BrowserRouterhistory API를 활용해 history 객체를 생성history API는 내부적으로 stack 자료구조의 형태를 띄기..

import해서 데이터를 던졌고export해서 데이터를 잡았다.'코딩은 절대 거짓말을 하지 않는다' 라고 하지만나는 정말 틀린게 없었다.. 억울할 정도였다.. 브라우저는 왜 계속 에러를 띄우는지 모르겠고개발자 도구도 왜 자꾸 에러를 띄우는지이해를 할 수가 없었다. 에러나는 부분이 당연히 작성해야 하는'import react from "React" 와"import styled from "styled-component" 였다.안 쓰면 안 썼다고 작동 안 시켜 줄거면서.. 마침 화면 공유로 내 코드를 보고있던 분이 도와주셨다.결론은 내가 styled-components 패키지 설치를 하지 않아서였다;; 터미널 → new Terminal에 가서yarn add styled-components 를 입력해서패키지 설..

html에서 js파일 연결하는 방법  다른 js파일에서 함수 호출하는 방법:    1) 내가 사용할 js파일에 import { 함수명 } from "파일경로";    2) 가져올 함수명 앞에 export를 입력한다ex)내가 movie.js파일에서 movieInfo라는 함수를 가져오고 싶으면,main.js 파일에 가서 import { movieInfo } from "./movie.js"; 를 입력하고movie.js 파일의 movieInfo 앞에는 export를 입력하면 된다.   api 호출하는 방법 (api는 비동기 ↓)(특정 코드가 끝날때 까지 실행을 멈추지 않고다음 코드를 먼저 실행하는 것)API: (Application Propramming Interface): 소통하기 위한 접점 앱이 프로그래밍 ..

나는 깃을 잘 사용할줄 모른다.그래서 팀원들이 깃에 푸시하고 풀 해달라고 했을 때기존 파일에서 작업을 끝내면최종 파일에 복사 붙여넣기를 하겠다고 했다.모르면 물어보고 자꾸 부딫혀봐야 하는데 피했다. 오늘 팀원들이랑 회의를 하는 도중에나중에 코드를 복붙하면 오류가 날 수 있다고 했다.바로 깃 풀해서 파일을 받아서코드를 입력했다.근데!!! 깃 푸시를 하려니 또 안된다..오늘 안에 올리기로 약속을 해서 팀원 도움을 받기로 했다.깃 사용도 할 줄 모른다고 생각하면 어떡하지?챙피했지만 다른 방법이 없었다. 근데 예상 외로 너무 잘 알려줬다..이 깃 명령어가 뭔지, 언제 써야하는지,여기서 뭐 하는지, 어디로 가야 하는지,뭘 눌러야 하는지까지 정말 세세하게 알려줬다.너무 고마웠다..덕분에 깃 명령어에 대해서 좀 더 ..

검색어에 맞는 영화를 출력하는 기능을 맡았다.평소 텍스트 박스를 사용하면서편했던 기능들과 이런 기능은 넣지 않았네?싶었던 기능들이 있어서 내가 직접 넣어보기로 했다. 그 기능들은1. 특정 문자 입력 제한 함수 만들고 텍스트 박스 공란 설정특정 기호를 입력하면 컴퓨터의 성능 저하를 유발할 수 있다고 한다. 2. 검색창이 빈칸일 때 검색 버튼을 클릭하면 alert( )창을 띄우기 3. 검색창이 빈칸인 상태에서 엔터를 치면 alert( )창을 띄우기 4. 입력한 단어를 포함하는 영화가 없을 때 alert( )창을 띄우고 공란 설정   갯수도 별로 안되고 쉬운 것 같은데 잘 안된다..하다가 막히면 공부하고.. 모르면 또 찾아보고 공부하고..그래도 어제보다 나아지는 것 같아서 뿌듯하다 (>_

html에서 의 부모를 생성한다.                            내가 만들 태그의 위치 -->                      → 자바스크립트에서 를 생성한다.const card = document.createElement('div');let imgTag = document.createElement('img'); imgTag.src= `https://image.tmdb.org/t/p/w300${movie.poster_path}`; card.innerHTML = `${movie.original_title}`; card.appendChild(imgTag);  movieContainer.appendChild(card); →  css 설정/* 영화 목록 전체 div */.movie-con..

1. 아이디 한글입력 방지// 아이디 텍스트 박스에 한글 입력 방지// 입력 방지할 문자열 종류 선택const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;// 입력 요소 선택const idTbx = document.querySelector('.login-id_Tbx');idTbx.addEventListener('input', funtion() {    if (korean.test(idTbx.value)) {        // 한글을 제거        idTbx.value = idTbx.value.replace(korean, ' ');        alert('아이디에는 한글을 입력할 수 없습니다.');   }});   2. 비밀번호 암호화 .클래스명 {                           -..

한글: /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/const check_Korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;       if (check_Korean.test(값)) alert('한글입니다.');       // 아이디 텍스트 박스에 한글 입력 방지      // 1. 입력 방지할 문자열 종류 선택const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;      // 2. 입력 요소 선택const idTbx = document.querySelector('.login-id_Tbx');idTbx.addEventListener('input', funtion() {    if (korean.test(idTbx.value)) {        // 3. 한글을 제거        idTbx.value = idTbx.valu..

글래스모피즘: 뒷 이미지는 투명하고 일부만 불투명하게 하는 기능 .클래스명 {                        display: inline-block;                         background: rgba(255, 255, 255, 0.2);                         border-radius: 16px;                         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);                         backdrop-filter: blur(5px);                         -webkit-backdrop-filter: blur(5px;                        ..

/* 노말라이즈 */* {      margin: 0;     padding: 0;     list-style:none;     box-sizing: 0;  } /* 전체 슬라이드 */.slide-div {display: flex;                     flex-direction: column;                     align-items: center;                     justify-content: center;                     top: 50%;                     background-image: url(./background_image.jpg);                     background-size: cove..