뉴히의 개발 로그

warning: in the working copy of 'src/App.css', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of 'src/App.js', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of 'src/index.js', LF will be replaced by CRLF the next time Git touches it CR(Carriage-Return) 현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작 LF(Line-Feed) 커서는 그 자리에 그대로 둔 상황에서 종이..

터미널에서 새로운 폴더를 생성하고 yarn을 실행했더니 오류가 났다......? 내버전은 18.15 였는데 18.16으로 업데이트하니 오류가 해결되었다 ㅎㅎ 는 내 착각!!!!!!!!!!!!! 해결되지 않음 2)settings.json 파일에 코드 추가 "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 실패. 3) npm 패키지 추가설치 npm i eslint-plugin-jsx-a11y 실패! 사실, 추가 패키지등의 설치 없이 실행되어야하는게 맞다. 아무것도 안한 프로젝트기 때문에.... 그래서 튜터님께 여쭤보니 yarn 설치 오류등이 은근 많다고 한다. 다른 프로젝트는 잘 열린걸 보니 무언가 프로젝트생성시에 오류인듯... 프로젝트를 ..

명령 프롬프트에서 드라이브 변경을 어덯게 하는지 몰라서 이렇게 저렇게 쳐봣는데 ㅋㅋㅋㅋ 엄청나게 간단했던 ㅎㅎㅎㅎㅎㅎ 드라이브안에서 폴더간 이동은 cd로 가능하지만 드라이브간 이동은 불가하다! 드라이브간 이동은 '드라이브 이름:' 이렇게만 적어주면 바로 이동된다 ㅎㅎ 새로시작한 리액트 폴더를 만들기 위함이었기 때문에 리액트 폴더도 만들어보자 명령 프롬프트에서 ls => 현재 내가 위치하고 있는 곳이 어디인지 확인 cd 폴더이름 => 리액트 프로젝트를 생성하고 싶은 폴더로 이동 yarn create react-app week-1 => week-1 폴더명을 가진 프로젝트 생성! 알아서 엄청 막 설치가 된당 ㅎ 해당 폴더로 들어가보면 이렇게 폴더 구조가 알아서 만들어져 있다! 명령 프롬프트에서 아래명령어로 프..

window.onresize는 리사이즈가 될때마다 객체에 발생하는 이벤트다. 팀프로젝트로 API를 받아와서 영화 정보 조회 사이트를 만드는 프로젝트였다. 영화 정보 상세페이지에 같은 장르의 영화를 추천해주는데 슬라이드 반응형으로 작업을 하기로했다. 모바일에서는 슬라이드가 2개, 태블릿은 3개, PC에서는 5개가 보여지도록 구현하기로. 불려오는 영화의 갯수가 다르기 때문에 스크립트에서 슬라이트 낱개의 너비와, 전체 슬라이드의 길이를 만들어줘야했다. let screenWidth = window.innerWidth; if (screenWidth < 768) { slides.style.width = 50 * slideCount + '%'; } else if (screenWidth < 1200) { slides...

팀프로젝트 막바지! TMDB에서 데이터를 불러와서 사용하는데 인기순위, 최고평점등의 객체를 20개씩만 불러올 수 있었다. 그런데 더 불러와서 더보기로 보여주고 싶었기에 fetch를 두개 불러서 합쳐보기루 처음엔 각 다른 패치를 따로 불러오려했었는데 합펴서 같은 값을 제거한는게 더 쉬운듯 해서 객체 합치기 공부 :) 배열 메서드 concat() concat 은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다. const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1..

스택(Stack) 자료구조 LIFO(Last In First Out) 스택은 흔히 프링글스에 비유가 된다. 프링글스 통 안에 감자칩이 쌓여있지만 우리는 가장 위에 있는 감자칩부터 꺼내는 수 밖에 없다. 즉, 마지막으로 넣은 것이 (맨위에 있으므로) 가장 먼저 나오는 Last In First Out(LIFO) 구조이다. 스택은 한쪽 끝에서만 자료를 넣고 뺄 수 있는 자료구조이다. 스택으로 할 수 있는 가장 기본적인 연산은 스택 맨 위에 값을 넣고(PUSH), 스택 맨 위의 값을 꺼내고(POP), 스택 맨위의 값을 확인하는(PEEK) 것이다. 큐(Queue) 자료구조 FIFO(First In First Out) 음으로 들어간 친구가 처음으로 빠져나오는 FIFO(First In First Out)의 성격을 가..

localStorage 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐! 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유..

작업 환경 / 파일 디렉터리 셋업 및 html,css html문서 The Best Movie 검색창 검색 전체 목록 Copyright © NBCamp 2023 이런걸 방지하기 위해서 두가지의 방법이 있다. 태그 바로 위에 스크립트 소스를 넣거나 를 넣어준다! defer는 스크립트 소스코드가 상단에 있어도 다운로드는 받지만 실행은 html 파서가 문서 파싱을 한번쫙 다 한다음에 실행되도록 한다! defer를 그림으로 보면 이렇게 표현할 수 있다. 또한 스크립트는 독립적으로 나눠서 관리하는게 좋다. 자바스크립트는 import와 export를 사용해 모듈화 시켜서 작업 관리가 가능하다. 이렇게 모듈화 시키게 되면 협업시에 여럿이 각각의 모듈을 개발한다해도 작업, 유지 보수에도 좋고 스코프를 독립적으로 만들어서..