본문 바로가기
300x250

개발 공부143

[javascript] this ✅ 개념 - this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. - this를 통해 자신이 속한 객체 또는 자신이 생성할 인 스턴스의 프로퍼티나 메서드를 참조할 수 있다. (자바스크립트 엔진에 의해 암묵적으로 생성, 코드 어디서든 참조 가능) - this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. ✅ 간단한 예제 //1번 예제 const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius:: 5, getDiameter() { return 2 * circle.radius } } console.log(circle.getDiameter()); //10 // 2번 예제 const circle = { // 프로퍼티: 객체 고유의 상태 데이터 rad.. 2021. 11. 22.
[React] re-rendering 되는 조건과 예시 Re-rendering 되는 조건과 성능 최적화 방법 ✅ 개념 - rendering이란? 사용자가 화면에 view를 보여 주는 것을 렌더링이라고 한다. - re-rendering이란? 사용자 화면에 view를 다시 새롭게 보여준다는 의미이다. - 컴포넌트가 re-rendering 되는 조건 1. 자신의 상태가 변경될 때(state 변경) 2. 부모 컴포넌트가 리렌더링 될 때 3. 자신이 전달받은 props가 변경될 때(props) 4. forceUpdate 함수가 실행될 때 ✅ '성능 최적화' 배워야 하는 이유 - 상위의 컴포넌트에서 변화가 일어난다면, 하위 컴포넌트에 렌더링을 명령하게 된다. - `pureComponent`를 사용하지 않고 큰 앱을 개발하게 된다면, - 사소한 변경에도 모든 컴포넌트가 .. 2021. 11. 16.
[Error] 'Switch' is not exported from 'react-router-dom' 해결 'Switch' is not exported from 'react-router-dom' 해결 방법 ✅ 개념 - react-router-dom v6로 업데이트 되면서 변경된 부분 중에 하나가 Switch가 Routes 로 바뀌었다. ✅ 왜 배워야 할까? - npm install "react-router-dom" 을 설치하게 되면, "react-router-dom": "^6.0.2" 이 설치가 된다 - 그럴 경우, 제목과 같은 에러를 만날 수 있다. - 버전 5를 까는 방법도 있지만 앞으로 사용해야하니 제대로 알고 넘어가야한다. ✅ 기존에 있던 것과 차이점 바뀐 것이 여러가지 있지만, 바로 사용하는 4가지만 알아보겠습니다. 1. 70%나 작아진 번들 사이즈 번들 사이즈를 줄여야 하는 이유 - 성능 및 로드 .. 2021. 11. 14.
SASS(Syntactically Awesome StyleSheet) 개념 + Sass와 CSSS 차이 SASS(Syntactically Awesome StyleSheet) css는 연산도 안되고, 조건도 반복도 안된다. 프라퍼티만 선언하고, 선언형으로만 되었다. 결론은 SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판 ( CSS를 확장하는 스크립팅언어 ) 정도로 생각하면 좋을 것 같다. (css preprocessor 전처리기) 우리가 흔히 CSS 문서 작성할 때는 많은 반복적인 작업을 요구하고 Color 값을 찾는 일, tag를 닫는 일 등 번거로운 작업 역시 포함되어있다. 그뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 이로 인해서 이후 유지관리에 많은 영향을 준다. 이런 CSS의 문제점들을 Programmatically 한 방식.. 2021. 10. 29.
SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링) MPA와 SPA, SSR과 CSR에 대한 포스트입니다. 목차 MPA vs SPA SSR 개념, 동작과정, 장단점 CSR 개념, 동작과정, 장단점 렌더링 방식 선택 기준 Universal Rendering MPA vs SPA 먼저 MPA, multi page application의 약자로 여러 페이지로 구성된 웹 어플리케이션입니다. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다. 다음은 SPA, Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 입니다. 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데.. 2021. 10. 28.
http method: resource/method 개념, 주요 method, method 속성 http method - 리소스와 메소드의 개념 - 자주사용하는 http 메소드 - 메소드의 속성 출처: Inflean 강의 :모든 개발자를 위한 HTTP 웹 기본 지식 https://girawhale.tistory.com/66 https://meetup.toast.com/posts/92 Put patch 멱등 https://www.inflearn.com/questions/110644 2021. 10. 26.
코드스테이츠 final project 후기 코드스테이츠 파이널 프로젝트 후기 우리 동네 구독서비스를 조회, 주문할 수 있는 웹/앱 어플리케이션 🏡 우리 동네의 다양한 월구독 서비스를 만나보세요. 동네 인증을 하면 내 주변 반경의 구독이 가능한 스토어를 찾고, 결제하여 관리할 수 있습니다. ✔️ 의류, 세탁, 반찬 등 매번 챙기기 힘들지만 내 삶에 꼭 필요한 것들. ✔️ 우리동네 구독 서비스 중개플랫폼 UptoDoor 를 이용하며 번거로운 일들을 줄여보세요! ✔️ 우리동네의 몰랐던 구독서비스 정보도 알 수 있고 지역경제 활성화에도 도움을 줄 수 있어요! 팀 구성과 역할: 같은 멤버, 프론트엔드, 팀장 지난 BowWow 프로젝트의 팀원들과 잘 맞았기에, 이번에도 동일한 팀으로 4주 프로젝트를 시작했다. 다시 한번 팀장을 맡았고, 포지션도 기존과 같은.. 2021. 10. 18.
[코드스테이츠] first-project 후기(2주 프로젝트) 3번의 섹션이 끝나고 드디어 프로젝트 단계에 들어갔다. 프로젝트에 들어가기 전부터 같이 프로젝트를 하자고 했던 페어들이 있어서 팀 구성에는 문제가 없을 줄 알았는데, 한분이 섹션 3 ha에서 떨어지게 돼서 급하게 한 명의 멤버를 구해서 4명이서 하게 되었다.( 팀원 3명의 이름을 쓰면 웬만하면 된다.) 운이 진짜 좋았던게 나는 프런트엔드 지망이어서 프런트엔드로서 한 명의 프런트엔드와 두 명의 백엔드를 만났는데, 프런트엔드 분은 디자인에 강했고, 두 명의 백엔드는 이미 다른 국비지원 프로그램으로 코딩의 맛을 보고 오신 분들이라 많이 배울 수 있었다. 내가 팀원을 모아 팀장을 했지만 가장 낮은 위치에서 배울 수 있었다. 2주 프로젝트 후기의 결론부터 말하자면 '아쉬운 점은 많았지만, 성공적이였다'라고 말하고.. 2021. 9. 6.
GitHub 토큰 인증 로그인 하기 - [오류 해결]: remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 오늘 알고리즘 문제를 풀고 푸쉬를 하는데 이런 오류를 만났다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/dydwns2441/algorithm.git/': The requested URL returned error: 403 비밀번호 인증.. 2021. 8. 14.
반응형