letsgojieun

어제부터 리액트와 타입 스크립트를 같이 공부해야겠다 싶어서 새로운 레포지토리를 생성했다그리고 첫 push를 하려는 순간origin 이 존재하지 않는다는 에러가 발생했다 fatal: 'origin' does not appear to be a git repositoryfatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.  레포지토리 생성 후 연결 과정에서 문제가 발생한 것 같다  혹시 몰라서 git remote remove origin으로 혹시나 뭔가 남아있지 않을까 싶어 origin 저장소 연결을 끊으려고 했더니아예 origin 자체가 없어서..

수업 들을 땐 일일이 import나 컴포넌트를 타이핑했는데,code snippet의 단축키를 통해서 편리하게 자동 완성되는 기능을 알게 되었다!VS Code의 Reactjs Code Snippet라는 확장 프로그램이다 리액트의 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트가 존재하는데리액트 개발자들은 함수 컴포넌트 사용을 권장한다고 한다 (함수 컴포넌트 + hooks 사용)  rsc + Tab키 : 함수 컴포넌트 코드 자동완성   rcc + Tab키: 클래스 컴포넌트 코드 자동완성)

학원에서 리액트에 대한 아주 기초적인 부분만 배워서 적어도 리액트를 통한 프로젝트를 구현하고 싶다는 목표로벨로퍼트님의 리액트를 다루는 기술이라는 책을 읽게 되었다. 설명이 너무 잘되어있어서 아주 만족하면서 읽고 있다  리액트의 이해 자바스크립트의 프레임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View Model) 아키텍처를사용하여 애플리케이션을 구조화한다.이러한 아키텍처의 구조는 데이터를 관리하는 model, 그 데이터가 사용자에게 보이는 view라는 부분이 존재한다사용자로 인해 어떠한 이벤트가 발생하면(마우스 클릭 등) 컨트롤러가 모델 데이터를 수정하고, 변경된 사항을 뷰에 반영한다. 하지만 규모가 크면 클수록 이러한 구조가 매우 복잡해지고 제대로 관..

최종 프로젝트 목표 중 하나였던 반응형 웹 구현하기미디어 쿼리를 배워본 적도, 사용해본 적도 없던 터라 바로 구글링을 했다모바일퍼스트, 데스크톱 퍼스트 등 웹페이지를 구현할 때도 처음에 고려해야 할 사항이 많다는 걸 다시 느꼈다 요즘은 모바일로 접속하는 횟수가 많기 때문에 모바일퍼스트 추세라고는 하지만아직 데스트톱을 기준으로 웹페이지를 구현하는 곳도 많다고 한다.만약 모바일퍼스트로 웹앱을 구현하고 싶다면, 모바일 기준으로 먼저 페이지를 구현 후 차츰차츰 태블릿, 웹브라우저 등페이지를 구현해야 한다고 한다.  우선 head 태그에 meta viewport를 설정해줘야 해서위의 meta viewport태그를 선언해줘야 한다content에 작성된 의미는, width=device-width : 화면의 넓이를 디..

프로젝트를 진행하면서 로그인하거나 그 외에 alert창을 띄울 때, 디자인을 추가하고 싶다는 생각을 하다가 발견 한 sweetalert!사용법이 매우 매우 간단하다   터미널에 직접 설치하는 방법도 존재하지만 난 jsp 페이지에 script를 추가하는 방식으로 사용하였다    사용 방식은,alert 대신 swal을 사용해줘야 한다. swal('타이틀', '내용', '아이콘'); 형식으로 작성해주면 되는데, 밑에 실제로 내가 사용 한 예제를 추가해봤다    swal('로그인 성공!', data.login.result.name+"님 로그인되었습니다.", 'success')    swal('로그인 실패!', "아이디와 비밀번호를 확인해 주세요", 'warning');  그런데 이런 식으로 만 작성하면 OK 버..

App.js의 Render에서 리턴해줬던 걸 해석해서 id가 root인 위치에 넣어줬다   바로 전 포스팅에서도 작성했지만클래스에서 함수를 만들 땐, 화살표 함수를 사용해야 그 안에서 this 사용이 가능하다    Vue, React 에선 아이디 속성을 잘 주지 않는다 (그런 패턴이 잘 보이지 않음)왜냐하면 SPA 기반으로 만들어서 하나의 페이지에서 아이디는 겹칠 수 없고,애플리케이션 전체에서 유일해야 하는데 이를 SPA에선 특히 관리하기 쉽지가 않기 때문이다그래서 아이디 대신 클래스 사용이 많다   a와 b는 다르다그래서 새로운 배열의 참조값을 얻어내야 하는데, 이는 기존 배열에 아이템을 추가해서 새로운 배열의 참조값을얻어내는 것이다. 이렇게 하는 방법이 펼침 연산자... 또는 concat을 이용하면 ..

먼저 npm install -g yarn을 설치한다yarn이 안되면 npm도 상관없지만 yarn은 npm의 편리한 버전이라고 생각하면 된다    원하는 경로에 create-react-app 프로젝트명을 입력하면 자동으로 설치가 진행된다 설치되는 동안 VSC에 플러그인 설치하기 1. ESLint ( javascript 문법 체크)2. Reactjs code snippets (Charalampos Karypidis)3. Relative Path (상대 경로에 있는 파일 경로를 편하게 작성할 수 있는 도구)4. Guides(들여쓰기 가이드라인)    설치 완료되면 cd hello 입력하여 생성한 프로젝트 파일로 경로를 옮긴 후yarn start를 입력하여 서버를 실행시켜준다    리액트 첫 실행 시 브라우저에..

Sass와 Scss는 CSS의 PreProcesseor로 CSS의 전처리기 역할을 한다단순한 스타일링을 주는 CSS에 변수를 담아놓고 조건문을 사용하는 등 프로그래밍적으로 CSS를 사용 가능하게 만든다 Sass와 Scss는 거의 같다고 볼 수 있는데 Scss가 상위 호환 버전이며 사용이 더 권장되는 편이다둘 다 CSS와 자유롭게 호환이 가능하지만 왜 Scss의 사용이 권장되는 편 일까? 우선, 공식 사이트에서도 Scss 문법 기준의 설명이 있으며 문법적으로 CSS와 같아서 익숙하게 배우는 게 가능하다또한 Sass는 CSS와 Scss에서 사용하는 {} 중괄호와 ; 세미콜론 대신 들여 쓰기 및 줄 바꿈으로 대신 사용하기 때문에이 요소들이 매우 중요하며 여러 줄을 사용하면 에러가 발생한다. 물론 Sass를 사..

깃허브 저장소에 있는 Vue 프로젝트를 클론 해서 가져가면 node modules가 존재하지 않는다그래서 이를 제대로 사용하기 위해선, 클론을 받은 후 package.json이 존재할 수 있도록 npm install을 통해설치해줘야 한다    오늘 배운 내용은 axios!axios는 Vue의 기본 기능은 아니다하지만 리액트, 뷰 같은 프레임워크와 사용하기에 좋다    위처럼 npm install axios를 입력하고 package.json을 확인해보면 axios가 설치되어있다    axios를 함수로 보고 then을 보면 프로미스로 리턴하는 걸 알 수 있다    res 타입은 오브젝트이다여기에 data라는 방이 존재하는데 이 방은 오브젝트 또는 배열이 될 수 있다   이것이 우리가 사용하는 백엔드의 멤버..

별 아이콘의 색이 채워졌다 사라졌다 하는 효과를 버튼에 클릭 이벤트가 발생할 때마다 적용시키고 싶었다 처음에 querySelector를 생각했다가 생각해보니 카드가 하나만 생기는 게 아닌 여러 개의 카드가 계속해서 추가될 예정이라 (=> 별 아이콘의 개수도 똑같이 늘어남) 일반적인 querySelector를 사용했더니 맨 처음에 찾아진 starIcon 클래스에만 적용이 되었다. 그래서 querySelectorAll을 사용했다 처음에 querySelectorAll을 사용하면 반복문이 가능한 유사배열인 Nodelist가 반환된다는 걸 생각 못해서 왜 계속 에러가 나는거지.. 했었는데 같은 조원인 친구가 알려줬다 (..!) 코드의 마크업 부분이다 여기서 아이콘의 변화는 class에 far가 있을 경우엔 바탕색..