NOW OR NEVER

React의 class 형 Component 제작 기본 패턴 React란? 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다. 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다. react는 JSX 언어이다 React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작..

html article 태그 이용해 시작화면 / 문제화면 / 결과화면 순으로 구현 mbti에서 type별 점수를 hidden type의 input 태그를 이용해서 앞의 것의 점수를 네가지 type별로 저장하는 칸을 만듦(바깥에는 보이지 않지만 내부적으로 정보를 저장할 경우에는 hidden input 태그 사용) button A와 button B를 사용해서 A버튼을 눌렀을 때만 해당 type의 앞의 글자에 대한 점수를 저장할 수 있도록 만듦, B 클릭시 점수는 저장되지 않고 다음 문제로 넘어가게 하기 javascript(jquery) num을 사용해서 1번부터 하나씩 증가하도록 만듦 q라는 javascript 객체를 이용하여 각 문제 번호 별로 해당하는 정보를 담을 수 있도록 함(저장) result 라는 ..

객체 지향 언어(Class vs Object) class를 이용해서 상속과 다양성이 일어날 수 있다. 이런 모든 것들이 일어날 수 있는 곳이 객체지향 언어이다. 객체 지향 언어로 프로그래밍을 잘하는 개발자 = 풀어야 하는 문제나 구현해야 되는 기능들을 객체로 잘 정의해서 만들 수 있는 개발자 js에 class나 object가 없다면 정의한 변수들이 여기저기에 둥둥 떠다니면서 규모있는 프로젝트를 만들기 힘들었을 것이다. 실제로 살아가는 세상에는 수많은 물체와 사물들이 존재한다. 프로그래밍을 할 때 또한 사물과 물체들을 class나 object로 정의해서 프로그래밍 하는 것이 조금 더 자연스럽기 때문에 개발자들이 편하고 유연하게 프로그래밍을 할 수 있게 도와준다. 상속 Inheriance class 상속받을..

Functions 함수 function : 프로그램 안에서 각각의 작은 기능들을 수행하는 것, 즉 프로그램을 구성하는 굉장히 기본적인 building block 프로그램 안에서 각각 저마다 기능을 진행하는 함수들 존재, 이런 절차적인 언어같은 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당하고 있어 sub-program이라 불리기도 한다. 또한 함수는 여러번 재사용이 가능하다는 강점이 있다. 대체적으로 function은 한가지의 task나 어떠한 값을 계산하기 위해 쓰여진다. 추가된 class의 경우에도 java 처럼 pure한 oriented가 아니라 prototype을 베이스로한 가짜의 object oriented 이므로 자바스크립트도 procedural language(절차적인 언어)라고 볼 수..

연산, 반복문 1. String concatenation 문자열 + 문자열 = 새로운 문자열 숫자로 된 문자열('1') + 숫자 = 숫자 ` `을 활용한 string literals, ${}을 함께 이용하면 변수 값을 계산해서 string으로 포함해 문자열을 만들 수 있다. 줄을 바꾸거나 특수문자인 single quote(' ') 등을 이용해도 고대로 문자열로 변환되서 나온다 single quote(' ') 문자열 만들 경우 중간에 single quote나 특수 기호가 인식이 되지 않는다. 이럴 경우 \를 이용해서 특수 기호를 넣어줘야지 제대로 표시됨 \single quote 줄바꿈 : \n tab : \t 2. Numeric operators add(더하기) : + substract(빼기) : - di..

데이터 타입 프로그래밍에서 가장 중요한 것 : 입력, 연산, 출력 사용자에게 콘솔이나 UI에서 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력해주는 것이 제일 중요, 물론 그데이터를 전송을 이용해서 서버로 보내고 다시 받아오는 것도 중요하다. 연산을 하면서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 연산(logic)을 작성하는 것도 중요하고 메모리를 최소화해서 사용하는 것도 중요하다. variable rw(read / write) : variable은 메모리의 값을 읽고(read) 쓰는(write) 것이 가능하다. 그래서 변경이 가능한 값이다. 변경이 가능한 값(mutable data type) let : js에서 변수 선언할 수 있는 키워드, es6에서 추가되어진 키워드..

async와 defer html에서 javascript 표현시 어떻게 포함하는 것이 효율적인 것인가 사용자가 html 파일 다운로드시 브라우저가 한줄 한줄 분석한다(parising HTML) > 한줄한줄 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환 async : boolean 타입의 속성값으로 선언하는 것만으로도 true로 설정되어 옵션 사용 가능 head 안에 script 태그 html parsing하다가 script 태그 발견시 src안 js파일을 다운받아야하네 하고 이해하게 된다. 그래서 html parsing하는 것을 잠시 멈추고 그 js을 다운받아서 실행한다음에 다시 html parsing을 시작한다. 단점 : 해당 js 파일 용량이 어마어마하게 크고 인터넷도 느리다면 사용자가 그..

console node js에서도 실행 가능하고 web api인 console api에서도 실행 가능 많이 쓰이는 문법이라 거의 web api 뿐만아니라 프레임워크 등에서도 다 실행가능 Devtool console js 작성해서 실행 가능 간단한 js기능 구현 가능 source 디버깅시 유용 작성한 코드 확인 가능 break point 를 걸어서 디버깅할 때도 유용하게 쓰임 network network가 어떻게 발생하는지, 얼마나 많은 사이즈들의 데이터가 오고가는지 검사 가능 performance 분석, memory 분석 등 굉장히 다양한 것들을 볼 수 있다. 'use strict'; js를 strict 모드로 개발하기 위한 것 순수 vanilla js 작성시 js 최상단에 'use strict'; 정의..

Javascript 역사를 통한 개념 정리 역사 1993년 : 컴퓨터가 집집마다 없었던 시절에 생긴 컴퓨터를 모르는 사람도 쓸 수 있는 UI요소가 더해진 Mosaic Web Browser가 시장에 나옴 1994년 Mosaic Web Browser를 만든 개발자 Mac Andreessen이 Netscape을 창립하면서 조금 더 UI요소가 더해진 Netscape Navigator을 시장에 내놓음, 시장에서 80%의 점유율을 자랑하면서 급격히 성장한다, Mac Andreessen은 좀 더 다이나믹한 사이트를 만들기 위한 scripting언어를 추가하고 싶어 했다. scheme을 만든 개발자 Brendan Eich를 데려와 자바의 요소와 scheme을 융합한 언어를 10일만에 새로 만들고자 했다. 프로토타입을 ..

디자인 무료 온라인 툴 color space(https://mycolor.space/) 웹사이트를 만들 때 컬러 팔레트를 쉽게 만들 수 있는 툴 하나하나 색상 찾는 수고로움을 덜어주는 툴이다 웹사이트에서 사용할 주 색상을 정해놓으면 그에 맞는 다양한 색상 조합들을 보여줌 css gradient(https://cssgradient.io/) gradient 컬러를 만들 수 있게 해주는 툴 시각적으로 확인하면서 원하는 gradient를 만들 수 있다 다양한 방면에서 사용되지만 버튼에서 특히 많이 사용됨 다 만든 후 아래쪽 copy to clipboard 해서 css에다가 붙여넣어서 그대로 적용 시킬 수 있음 SVC 활용할 수 있는 툴(svc를 활용해 section을 수평적으로 나누는 것이 아니라 다른 모양으로..