성장에 목마른 코린이

Git의 세가지 영역 및 상태 Untracked area - Git이 관리하고 있지 않은 영역 Unstaged area - 기존에 Commit했던 파일을 수정하는 영역 Unmodified: 기존에 Commit했던 파일을 수정하지 않은 상태입니다. Modified: 기존에 Commit했던 파일을 수정한 상태입니다. Staging area - Commit 하기 전에 내용을 기록하는 장소 혼자 작업 - Git 버전 관리 기능 활용하기 1. Fork: Remote 에 있는 다른 Repository에서 부터 Fork를 해 Remote에 있는 내 Repository에 가지고 옵니다. 2. git clone : 그리고 이 코드를 수정하기위해 내 컴퓨터로 작업을 해야하는데 그 작업을 위해 clone을 합니다. 3. g..

롤챔프정보 First Toy Project 후기 섹션 1 때 기수이동하면서, 저의 깐부 페어 이정윤님과 함께 롤챔프정보를 알려주는 간단한 SPA를 구현했습니다. 같이 만들어보면서, 너무 재밌었고! 섹션 1에 있는 내용들을 거의 다 활용했기에 좋은 복습, 연습이 되었습니다! 원래는 배포한 사이트를 올리려했으나, 이미지가 깨져서 이렇게 스크린샷으로 대체합니다!

섹션 1은 고차함수, DOM, React 빼고는 다 할만 했습니다. 하지만, 몇년동안 공부를 안해서 그런지 공부의 체계가 잡혀있지않아서, 체계를 잡는데 시간을 좀 투자했던 것 같습니다. 기수이동을 하기전 섹션 1을 들을때는 뭔가 좀 많은 것이 흐지부지 했습니다. 혼자서 고독하게 공부하는 것도 힘들고, 아침부터 공부하는 것도 힘들었습니다. 그러다보니 집중해야할 고차함수, DOM, React부분을 굉장히 소홀히 공부했고, 제대로 알지 못한채 흐지부지 그냥 넘어가게되어 HA를 맞이하게 되다보니, 처음 Section 1 HA를 통과하지 못했던 것 같습니다. 하지만 다시 기수이동을해, 섹션1을 들을때는 이미 한번 듣고 대충 무슨 내용일지 알다보니, 좀 더 사람이 여유가 있어지고 놓친 것도 보이기 시작했습니다. 또..

Props - 컴포넌트의 속성(property) - props는 성별이나 이름처럼 변하지 않는 외부로 부터 전달받은 값입니다. 웹 어플에서 해당 컴포넌트가 가진 속성에 해당합니다. - props는 함부로 변경될 수 없는 읽기 전용 (read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문입니다. 읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정시 props를 전달한 상위 컴포 넌트의 값에 영향을 미칠 수 있게 됩니다. 이는 React의 단방향, 하향식 데이터 흐름 원칙에 위배됩니다. - 부모 컴포넌트(상위 컴포넌트)로 부터 전달받은 값입니다. props를 함수의 전달인자(arguments)처럼 전달받아 사용됩 니다. - 객체 형태입니다. props로 어..

전통적인 웹사이트의 한계와 단점 전통적인 웹사이트는 페이지 이동 시 매번 페이지 전체를 불러와야 했습니다. 사용자와 서비스 사이의 상호작용 증가는 트래픽 증가와 사용자 경험의 저하를 불러왔습니다. SPA(Single Page Application)의 장점 - 전체 페이지가 아니라 필욯나 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 사용자와의 Interaction에 빠르게 반응합니다. - 서버에서는 요청받은 데이터만 넘겨주기 때문에 서버 과부하 문제가 현저하게 줄어듭니다. - 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공합니다. SPA(Single Page Application)의 단점 - SPA의 경우 JavaScript의 파일이 커서 이 파일을 기다리는 시간으로 인해 ..

What is React? 리액트는 프론트앤드를 위한 Javascript 오픈소스 라이브러리 입니다. React의 3가지 특징 선언형 (Declarative) - 한 페이지를 보여주기 위해 HTML CSS JS로 나누지 않고 하나의 파일에 작성할 수 있게합니다. 컴포넌트 기반 (Component-Based) - 서로 독립적이고 재사용 가능하게 컴포넌트를 기반으로 개발합니다. 범용성 (Learn Once, Write Anywhere) - JS 프로젝트 어디에든 유연하게 적용될 수 있습니다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능합니다. JSX 규칙 1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함 // 틀린 예시 - 하나의 엘리먼트 안에 모든 엘리먼트가..

일급 객체 대표적인 일급 객체중 하나가 함수입니다. - 함수는 변수에 할당 할 수 있습니다. - 다른 함수의 인자로 전달될 수 있습니다. - 다른 함수의 결과로서 리턴될 수 있습니다. 함수 표현식 - 변수에 할당한 후 사용할 수 있습니다. 함수 선언식과 다르게 호이스팅이 적용되지 않습니다! const square = function (num) { return num * num; }; output = square(7) console.log(output); // 49 고차함수란? 고차함수는 함수를 인자로 받을 수 있고, 변수에 저장할 수 있고, 함수의 형태로 리턴할 수 있는 함수입니다. 이때 다른 함수(caller)의 인자로 전달되는 함수를 콜백(callback) 함수라고합니다. 콜백함수란? 콜백함수의 이름..

What is DOM? DOM은 Document Object Model의 약자로 HTML요소를 Javascript Object처럼 조작할 수 있는 모델입니다. 자바스크립트를 통해 DOM으로 HTML을 조작할 수 있습니다. HTML에 Javascript 적용하기 HTML에 Javascript를 적용하기 위해서는 script 태그를 추가하는 두가지 대표적인 사례가 존재합니다. 하나는 head 태그에 추가하는 방법, 다른 하나는 /body 가 끝나기 전에 추가하는 방법입니다. 비교했을때 head 태그에 추가할 경우 제대로 출력을 하지않아 script 태그는 body가 끝나기 전에 추가해 사용합니다. CREATE - createElement document.createElement('div) // 새로운 div..

버전 관리 시스템의 필요성 만약 여러 사람이 같은 파일로 동시에 작업하거나, 이전 상태로 다시 되돌려야 할 경우가 생긴다면 버전 관리를 통해 손쉽게 이전 상태로 돌아갈 수 있습니다. 버전 관리를 사용하는 이유 1. 파일이 변경되면 변경 이력을 저장할 수 있다. 2. 이전 버전으로 돌아갈 수 있다. 3. 어떤 변경 사항이 발생했는지 알아보기 쉽다. 4. 협업하기에 좋다. 5. 백업을 할 수 있다. Git - 가장 강력하고 대중적인 버전 관리 시스템 Git 은 개발자의 코드를 효율적으로 관리하기 위해서 개발된 '분산형 버전 관리 시스템' 입니다. 하나하나 날짜별로 어떤 파일이 어떻게 바뀌었는지 확인이 가능합니다. 특정 시점에 생성된 백업 복사본을 commit이라는 기능을 통해 변경 사항에 대한 스냅샷이 만들..

CSS는 스타일링을 위한 도구입니다 *우리가 옷을 입을 때 항상 심미적인 이유로만 옷을 입지 않듯이, CSS도 화려함만을 위해 사용되지는 않습니다 - 콘텐츠의 배치와 위치 (Layout Design) - 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 Typography *위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX/User experience) 를 제공 가능 색약이나 장애인이 웹 페이지를 이용할 때 도움을 줄 수도 있습니다. *CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양 콘텐츠를 적당한 위치에 배치하는 Layout Design은 디자이너가 아니여도 할 수 있어야 한다 CSS 박스를 구성하는 요소 border(테두리) - border: 1px solid red; margin..

HTML, CSS, Javascript 소개 HTML - 웹페이지의 구조/틀을 담당 CSS - 웹페이지의 스타일을 담당 Javascript - 유저와 웹페이지의 상호작용을 담당 What is HTML? HyperText Markup Language의 약자 웹 페이지의 틀을 만드는 마크업 언어 How to use HTML? - HTML은 tag들의 집합 - Tag: 부등호()로 묶인 HTML의 기본 구성 요소 // 이 문서가 HTML 문서임을 명시 // html 시작 태그로, 문서 전체의 틀을 구성 // 은 해당 태그가 끝났음을 의미 // body 태그는 문서의 내요을 담는 곳 Hello World// heading을 의미하며, 크기에 따라 h1부터 h6까지 있음 Contents here// content..

반복문: 같거나 비슷한 코드를 여러 번 실행시켜야 할 경우에 쓰는 구문 반복문 사용법 1. 반복할 내용을 먼저 코드로 작성합니다. 2. 반복할 조건을 코드로 작성합니다. for 구문 1. 반복할 내용을 중괄호 block 안에 넣어준다 let sum = 1; for ( ) { sum = sum + n; // 반복할 내용 } console.log(sum); 2. 반복할 조건을 초기화(n = 2), 조건식 (n