디노문경

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 5장 ref: DOM에 이름달기 6장 컴포넌트 반복 5장 ref: DOM에 이름 달기 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 스타일을 적용하거나 자바스크립트에서도 작업할 수 있습니다. 이렇게 요소에 id를 사용해 이름을 다는 것처럼 리액트에서는 ref(reference)를 사용해 DOM에 이름을 달 수 있습니다. 하지만 대체 '어떤' 작업을 할 때 ref를 사용해야 할까요? 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 다음과 같이 state만으로는 해결할 수 없는 기능에서는 어쩔 수 없이 ref를 사용해 DOM에 직접적으로 접근해야 합니다. 특..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 3장 컴포넌트 4장 이벤트 핸들링 3장 컴포넌트 이 장에서는 먼저 클래스형 컴포넌트에 대해 살펴본 뒤, 컴포넌트를 새로 만들고 사용하는 방법을 알아보겠습니다. 그리고 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법도 알아보겠습니다. - 84p 컴포넌트를 선언하는 방식 함수형 클래스형 // 함수형 컴포넌트 import React from 'react'; const App = () => { return ( ); } export default App; // 클래스형 컴포넌트 import React, { Component } from 'react' class App extends Compon..

문제 풀이 function solution(numbers) { numbers.sort(); for (let i = numbers.length - 1; i > 0; i--) { const lNumStr = numbers[i - 1].toString(); const rNumStr = numbers[i].toString(); if (lNumStr.charAt(0) === rNumStr.charAt(0)) { const case1 = lNumStr + rNumStr; const case2 = rNumStr + lNumStr; if (+case1 > +case2) { // 순서 교체 let temp = numbers[i - 1]; numbers[i - 1] = numbers[i]; numbers[i] = temp..

패스트캠퍼스 강의(프런트엔드 개발 올인원 - 처음 배우는 Git & GitHub)를 듣고 요약한 글입니다. 소개 왜 Git과 GitHub을 익혀야 하나요? 팀 프로젝트에서 버전관리와 클라우드 저장소는 필수 불가결한 기술입니다. 버전 관리의 1등인 Git과 클라우드 저장소의 1등인 GitHub을 익히면 팀 프로젝트와 회사에서 효율적인 개발 협업을 할 수 있습니다. 사전 조사 버전 관리가 무엇인지 모른다. 버전 관리가 무엇인지 들어보기만 했다. Git 기본 기능을 써봤다. (commit, push, pull, merge, branch) Git의 동작 원리를 알고 있다. (로컬 저장소, 스테이지, diff... ) Git 심화 기능을 써봤다. (rebase, cherry-pick, reset, revert, ..

문제 코드 function solution(array, commands) { let answer = []; for (let i = 0; i { if (startIdx = sPosition - 1 && fIndex a - b) return newArray[position - 1] }) } 우선 commands 자체를 map을 돌리면서 command를 조작해 결과값..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 1장 리액트 시작 2장 JSX 1장 리액트 시작 1.1 왜 리액트인가? Hello Hello World velopert 1 만약 위의 코드에서 likes 값을 2로 업데이트한다면 post-1에서 likes 요소를 찾아 수정해야합니다. 하지만 애플리케이션의 규모가 커지면 커질 수록 찾아서 수정하는 과정이 상당히 복잡해지고 성능도 떨어집니다. 페이스북 개발 팀은 이를 해결하려고 하나의 아이디어를 고안해 냈는데, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식입니다. 페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경..

목차 개요 디자인 개발 스택 페이지, 화면별 개요와 기능 소개 어려웠던 점과 해결 방법 결론 개요 어느새 4학년이 되어 졸업작품을 완성하고 이렇게 졸업작품에 대한 포스팅을 하고 있다. (아래는 Life Calendar 프로젝트 링크) Life Calendar life-calendar-mk.netlify.app Life Calendar는 사람의 인생을 여러 개의 사각형으로 나누어서 나타낸 종이라 할 수 있는 데, 사각형 하나는 1주를 의미한다. 한 주가 지날 때마다 색칠을 하면서 내가 현재 어느 정도 살았는지 그리고 얼마나 더 살 수 있는지 확인할 수 있다. (90년을 살고 자연사한다고 가정했을 때) Life Calendar를 알게된 영상 유튜브 알고리즘 덕분에 우연히 알게 되었는데 보자마자 웹사이트로 만..

제 1부 인지혁명 1. 별로 중요치 않은 동물 어떤 동물일까? 역사의 진로를 형성한 것은 세 개의 혁명이었다. 약 7만 년 전 일어난 인지혁명은 역사의 시작을 알렸다. 약 12,000년 전 발생한 농업혁명은 역사의 진전 속도를 빠르게 했다. 과학혁명이 시작한 것은 불과 5백 년 전이다. 이 혁명이 역사의 종말을 불러올지도 모르고 뭔가 완전히 새로이 시작하게 할지도 모른다. 이들 세 혁명은 그 이웃 생명체에게 어떤 영향을 끼쳤을까? 그것이 이 책의 주제다. - 19p 어떤 영향을 끼쳤을까? 선사시대 인류에 대해 우리가 알아야 할 가장 중요한 점은, 그들이 그다지 중요치 않은 동물, 주변환경에 별 영향을 미치지 못하는 종이었다는 점이다. 그들은 고릴라, 반딧불이, 해파리보다 딱히 더 두드러지지 않았다. - ..

공통점: 편하게 개발을 하기 위해 누군가 만든 코드를 가져와 쓰는 것 차이점: 누가 누구를 부르느냐. (내가 라이브러리를 불러서 쓰는 것, 프레임워크가 나를 부르는 것(규칙을 따라야함)) 예시) 라이브러리: JQuery 프레임워크: 장고, express 여담) React는 공식문서에서는 라이브러리라고 나와있지만, 프레임워크라고 볼 수도 있다. (명확히 구분되지 않는다.) www.youtube.com/watch?v=t9ccIykXTCM

1단계부터 막혀서 구글링.. (package-lock.json 파일이 없다..) 훨씬 간단한 방법을 찾았다. 바로 해결되었다!