AimHo

Node란 무엇인가? 서버 Node를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있지만, Node는 서버 애플리케이션을 실행하는 데 제일 많이 사용됨 서버? 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 or 프로그램 클라이언트란 요청을 보내는 주체로, 브라우저 일 수도 있고, 데스크톱 프로그램일 수도 있고, 모바일 앱일 수도 있고, 다른 서버에 요청을 보내는 서버 일 수도 있음 ex) 웹사이트 주소 입력 (요청) ⇒ 브라우저는 그 주소에 해당하는 컴퓨터 위치를 파악하고, 웹사이트 페이지를 받아와서 클라이언트에 띄워줌 (응답) 자바스크립트 런타임 런타임? 위키: 컴퓨터 프로그램이 실행되고 있는 동안의 동작 가상 머신: 자바스크립트를 웹 브라우저 바깥의 환경에서 돌아갈 수 있게 하는 ..

리액트 교과서 4장 / React 컴포넌트의 상태 객체 주제 react component의 state 객체에 대한 이해 state 객체를 다루는 법 state객체와 props의 비교 상태를 가진 component와 상태를 가지지 않는 component 서론 앞(1,2,3 장)에서는 속성(props)을 변경하여 뷰(view)를 갱신했음 하지만 속성은 현재 컴포넌트 내부에서는 수정할 수 없음 (속성은 해당 컴포넌트 생성 시에 전달받는 값이기 때문) 그러면 사용자 입력에 따른 뷰의 상태변화는 어떻게 처리해야 할까? React component의 상태(state) 객체를 이용하면 가치있고 상호작용이 뛰어난 애플리케이션을 만들 수 있다. 상태는 React component에 data를 저장하고 data의 변경에 ..

리액트 교과서 1, 2, 3장 / React 살펴보기 서론 React는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다. React는 강력한 UI 라이브러리이며 Facebook, Netflix, Airbnb 같은 유명 기업들도 React를 기반으로 성공을 거두었다. JavaScript로 만든 React 컴포넌트는 웹 사이트 어디서든 UI를 재사용 할 수 있다. 물론 React의 접근법이 완전히 새로운 것은 아니다. 컴포넌트로 UI를 구성하는 방법을 사용한 지는 오래되었지만, React는 최초로 템플릿 없이 순수하게 JavaScript만으로 이것을 가능하게 했다. 그리고 이 방법이 유지보수와 재사용, 확장에 좀 더 용이하다는 사실도 입증했다. React란 무엇인가? React는 UI 컴포넌트 라이브..

인프런 / [무료] 자바스크립트로 알아보는 함수형 프로그래밍 / 섹션1.함수형 프로그래밍 정의, 순수함수함수형 프로그래밍의 정의들 (마이클 포커스 [클로저 프로그래밍의 즐거움])- 함수형 프로그래밍은 어플리케이션, 함수의 구성요소, 더 나아가 언어 자체를 함수처럼 여기도록 만들고, 이러한 함수 개념을 가장 우선순위에 놓는다.- 함수형 사고방식은 문제의 해결 방법을 동사(함수)들로 구성(조합)하는 것 함수형 프로그래밍: 성공적인 프로그래밍을 위해 부수 효과를 미워하고 조합성을 강조하는 프로그래밍 패러다임.- 부수효과 > 순수함수를 만든다.- 조합성을 강조 > 모듈화 수준을 높인다. 순수함수: 값을 다루거나 변형할 때 외부의 값(인자 or 변수 값)들을 변경하지 않으면서 값을 다루는 함수.- ex) func..

Sass란??Sass 공식 문서를 살펴보면 'CSS에 우아함을 더해주는 확장 언어이다.' 라고 스스로를 묘사하고 있습니다. CSS는 배우기에는 매우 간단하지만, 여러 스타일을 지정하다보면 코드가 지저분해지기 쉽습니다. 코드의 양이 많을 수록 더욱 그렇죠하지만, Sass는 최대한 CSS의 기능을 유지하면서 부족한 부분만을 도와줍니다 그래서 Sass는 CSS를 사용하던 사람들이 배우기에 어렵지 않습니다. 그저 몇 가지 기능만 추가해서 사용하면 됩니다. Sass or SCSSSass라고 검색을 하면 보통 SCSS도 같이 검색이 됩니다. 두 가지 모두 같은 기능을 갖고 있습니다. 차이는 그저 미관상의 문제인데, Sass는 스타일을 적용할 때 중괄호, 세미콜론 그리고 들여쓰기에 의존하여 간결하고 짧은 코드를 작성..

SideProject #1 Todo-list앞으로 일주일에 한~두개 씩 큰 작업이든 작은 작업이든 상관 없이 SideProject를 하려고 한다. 공부하면서 그냥 강의들을 따라 하는 것 보단 이렇게 뭔가를 제작하는게 더 도움이 된다는 걸 느껴서... 아무튼 유투브에서 어느 프로그래머의 영상을 보다가 자바스크립트 공부를 마쳤으면 다른 프레임워크들을 사용하기전에 자바스크립트만 이용해서 무언가 만들어보라고 한 말이 생각나서 첫번째 SideProject로 todo-list를 제작해보았다. 디자인은 정말 심플하다. (디자인 감각이 부족해서...)처음에 타이틀로 'Todo-List'라고 되어있고 아래 버튼이 4개 있는데 3개는 필터 역할을 하는 버튼이고 1개는 list를 추가하는 버튼이다. 버튼 밑에는 list와 ..

CSS 속성공부 #6 / 위치(position) 속성 보통 프로그램을 개발할 때 요소의 위치는 다음 두 가지 방법으로 설정한다. 절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치를 지정함.상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정함.절대 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발이 쉽다. 하지만 현대에는 사람들이 각기 다른 디바이스(모바일, PC)에서 사용하므로 해상도가 고정되어 있지 않다. 따라서 상대 위치 좌표를 대부분 사용한다. 그렇다고 절대 위치 좌표가 쓰이지 않는 것은 아니다. 절대 위치 좌표는 일정 크기의 영역을 지정한 태그 내부에서 많이 사용한다. position 속성 이제 실습을 통해 position 속성을 익혀보자. 100x100 ..

CSS 속성공부 #5 / 글자 속성font-size 속성 이 속성은 글자의 크기를 지정하는 속성이다. 앞서 배운 크기 단위(css 속성공부 #1 참조) or 키워드 들을 사용하여 글자의 크기를 지정할 수 있다. font-family 속성 이 속성은 글꼴을 지정하는 속성이다. font-family 속성의 스타일 값에는 사용자에 컴퓨터에 설치된 글꼴을 입력할 수도 있고 Google Fonts를 이용하는 방법도 있다. 여기서 원하는 폰트를 선택하면 아래와 같이 Import 하는 방법을 알려준다. 우리는 그저 HTML에 사용할 폰트의 link를 넣어주고 font-family를 이용해 사용하면 된다. 하지만 내가 만든 웹 페이지를 사용하는 사용자의 컴퓨터에는 해당 폰트를 지원하지 않을 수도 있으므로 Google ..

CSS 속성공부 #4 / 배경 속성배경 속성을 사용하면 해당 태그의 배경이미지 or 색상을 지정할 수 있다. 배경 속성 키워드 들은 다음과 같다. 1. background-image: 배경 이미지 지정. 2. background-size: 배경 이미지의 크기 지정. 3. background-repeat: 배경 이미지의 반복 형태 지정. 4. background-attachment: 배경 이미지의 부착 형태 지정. 5. background-position: 배경 이미지의 위치 지정. 6. background: 한 번에 모든 배경 속성(image, size, repeat 등)을 입력할 수 있음. 실전 예제 1. 배경 이미지를 지정하는 속성으로 스타일 값에 URL 단위 or 그레이디언트를 입력한다. 그레이디언..

CSS 속성공부 #3 / display 속성HTML5가 등장하면서 display 속성에 입력할 수 있는 다양한 키워드가 등장했다. 하지만 모든 display 속성을 제대로 지원하는 웹 브라우저는 아직 없다. 그러므로 우리는 모든 웹 브라우저가 지원하는 display 속성을 중심으로 살펴보도록 하자. 여기서 다룰 속성 키워드들은 다음과 같다. 1. none: 태그를 화면에서 보이지 않게 만듦. 2. block: 태그를 블록 형식으로 지정함. 3. inline: 태그를 인라인 형식으로 지정함. 4. inline-block: 태그를 인라인-블록 형식으로 지정함. 실전예제 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 ..