개인공부🤓

🫧 styled-components SearchPage.jsx를 생성하면 그에 따른 SearchPageStyle.jsx를 바로 만들어주었다. (CategoryPage.jsx - CategoryPageStyle.jsx) SearchPageStyle.jsx에는 styl

<이전되는 서버에 탑재된 SW 확인 후 정리>DR disaster recovery 재해복구DS digit signal / data series / directory serviceFEP front end processor 프로세서 처리전 미리 처리, 통신용AP ap

redux 상태 관리 라이브러리 사용 시store은 페이지를 새로고침할 경우 state가 날아감.이것을 방지하기위해 localStorage/session에 저장하고자하는 reducer state를 저장해새로고침해도 저장공간에 있는 데이터를 redux에 불러오는 'red

<숙련주차 시험>어떤부분이 문제였고 어떻게 해결했는지에 대해 소스코드를 포함해서 자세한 설명을 적어주세요.추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음. <Form.jsx - dispatch 작업 추가>아이템을 추가하는 액션을 디스패치 해야

🐤 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)데이터 바인딩 : 뷰와 모델에 있는 데이터를 동일하게 만들어주는 것\-> 사용자가 입력한 정

검색 페이지 모달 부분을 구현하다가 모달 밖을 클릭했을 때 모달창이 닫히게 하는 부분을 위해 공통적으로 사용할 수 있는 hook을 추가해놓았습니다!hook 내용은,ref로 지정한 요소의 밖을 클릭했을 때 callback 함수를 실행시켜준다는 내용입니다.제가 모달에 적용

: node.js와 브라우저를 위한 Promise 기반 http 클라이언트\-> http를 이용해서 서버와 통신하기 위해 사용하는 패키지yarn add axios : axios 설치: 서버의 데이터를 조회할 때 사용axios.get(url\[, config]): url

http 프로토콜https://joshua1988.github.io/web-development/http-part1/비동기개념 및 콜백함수https://joshua1988.github.io/web-development/javascript/javascr

JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며,모든 타입의 값으로 할당 및 재할당 가능느슨한 타입 = 타입은 있지만 변수에 타입을 필수로 선언하지 않아도 됨동적 언어 = 변수에 저장되는 값의 타입이 언제든지 바뀔 수 있음ex)let a = 10;

: UI를 구축하기 위한 선언적, 효율적, 유연한 js 라이브러리: 컴포넌트를 이용해 복잡한 UI를 구성하도록 도움: 앵귤러, 뷰와 더불어 가장 많은 인기: SPA(Single Page Application)를 전제로 함: Virtual DOM 활용하여 업데이트 해야하

: 블록이고, 결국 함수다: 화면을 구성하는 하나의 단위: 보통 html을 return하는 함수, div태그 리턴할 수도 있음영역을 나누면 보기 편함1)🔥 컴포넌트 밖에서 내가 필요한 파일 import🔥 내가 만든 컴포넌트 밖으로 내보내는 export default

: 부모 컴포넌트로부터 받아온 데이터: Mother 컴포넌트에서 못보던 속성이 생김 -> Child 컴포넌트에서는 Mother의 속성을 모름 -> 어떻게 알까?\-> 컴포넌트 간의 정보를 서로 교류할 수 있을까?: motherName이라는 이름으로 name 값을 Chi

: 컴포넌트 내부에서 바뀔 수 있는 값, 상태: 앞에서 name이라는 정보를 const name="홍부인" 이라고 만들었는데, name 값이 바뀌어야하는 정보면 state로 생성해야 함🔥 State 만들때는 useState() 사용state를 만들어주는 useStat

여태 css 파일을 생성하고 그 안에서 css를 사용해 컴포넌트를 꾸몄음컴포넌트를 꾸미기 위해 css파일을 import하고 html 태그마다 classname을 넣는 작업 반복: js코드를 이용해 css를 작성하여 컴포넌트를 꾸미는 것\-> 새로운 패키지 필요💡 패키

: 가장 기본적인 hook: 함수 컴포넌트에서 가변적인 상태를 갖게 해줌🔥 useState라는 함수가 배열을 반환하고, 이것을 구조분해문법으로 꺼내놓은 것: state를 변수로 사용, setState를 이용해 수정 가능🔥 만약 state가 원시데이터타입이 아닌 객체

: 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자할 때, props를 통해 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내줬었음\-> 컴포넌트에서 컴포넌트로 state를 보내기 위해서는 반드시 부모-자식 관계가 되어야함\-> 조부모 컴포넌트에서 손자 컴포

: Single Page Application: /a, /b, /c 페이지 상관없이 index.html로 html 파일이 한개: 딱 한번만 정적자원을 받아옴 -> 사용성 때문에: 처음에 모든 컴포넌트를 받아오다보니 로딩속도 느려질 수 있음: SPA가 주소를 옮기는 방법

: 리덕스 개량한 것: ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 불만 발생\-> 코드는 더 적게, 리덕스 편하게 쓰기 위해 기능들을 흡수해서 만든 것: 전체 코드 양을 줄이기 위해 새로운 API가 추가, ducks 패턴 자동화, useSelector 통

NaN / undefinedObject / Function / Boolean / Symboltypeof(x) //type 확인x.valueOf() //원시값 확인isFinite(x) //x가 유한수인지Number.isNaN(x) //x가 NaN인지Number("

지저분한건 싫어!한 사람이 코딩한듯한 깔끔한 commit과 유지보수를 위해 커밋 컨벤션을 설정했다.최대한 자세하게!무엇을, 어떻게, 왜 변경했는지 설명

XSS,Clickjacking,SQL Injection 등을 막기 위한 기본 보안 수칙사용자 입력 제한 : DOMPurify, Secure-filtershidden 사용 유의 : ZAPcontent-security-policy(CSP) 헤더 추가XSS 방지 모드 헤더

inline 요소에 배경이미지를 넣었을 경우: 가로세로 크기가 지원되지 않음\-> inline-block, block요소로 수정파일 경로, 파일명, 확장자 오류url(bg.jpg) -> 이렇게도 쓸수 있나봄?자식에 float이 있을 경우: 자식에 float과 높이를 주

로컬에서 수정한 내역 등 로그 기록이 .metadata 폴더 등등에 남아서 변경사항에 계속 반영되면 깃허브에 push할때 불필요한 파일들이 와글와글 올라갑니다. gitignore 설정으로 해결 가능!원하지 않는 백업파일이나 로그파일, 혹은 컴파일된 파일들을 git에서

검색결과가 없을 때 데이터가 없는 흰 화면이 신경쓰이게 스크롤돼서 그냥 스크롤을 아예 막아버렸었다... 이렇게 긴 코드로!이미지 미리보기할때 사용하는 코드가 따로 있었는데 사용자가 업로드하는 사진마다 서버에 저장했다가 꺼내오는 방식으로 하려고.. 그런 비효율적인 방식을

사용자가 사이트를 방문한 후, 아무런 요청을 실행하지 않고 떠나는 비율을 이탈률이라고 함!로딩시간이3초 : 이탈률 32%5초 : 이탈률 90%6초 : 이탈률 106%10초 : 이탈률 123%2017년 자료라 지금은 아마 퍼센트수가 더 올랐을 것 같은데, 오래 걸리면 걸

✅ 에러메세지 alert말고 직접 alarm으로 커스텀하는것이 훨씬 예쁘고 좋음✅ global style로 색도 변수로 사용✅ box-sizing: border-box;✅ font-display: swap;✅ document queryselector✅ env, giti

{animation-timing-function: value;}{transition-timing-function: value;}linear균일한 속도의 선형 전환ease중간으로 갈수록 속도가 증가하고, 끝에서 다시 느려짐ease-in천천히 시작하여 끝에서 전환 속도 증