Life is connecting the dots .

1. container and presenter patton 이란 - React 디자인 패턴 중의 하나로 하나의 페이지 컴포넌트를 기능과 UI구현의 컴포넌트로 나눠 작성하는 것이다. - export와 import로 부모 컴포넌트와 자식 컴포넌트를 연결하며 최종 부모 컴포넌트는 _app.js의 App이다. presenter component (= presentational component) - JSX 가 담겨있는 컴포넌트로 UI 부분을 구현한다. - container component가 전달하는 prop를 사용한다. container component - 자바스크립트 로직이 담겨있는 컴포넌트로 기능 부분을 구현한다. - 마크업이나 스타일을 사용하지 않는다. import와 export 기능별로 컴포넌트를 ..

1. 문제 정의 - FrontMento 과제를 하는 중, class 마다 폰트의 색상을 변경해야 했다. - 처음에는 class 마다 color를 지정해 주고 주석으로 컬러명을 표기했었는데, 나중에는 컬러값과 색상을 매치하는 것이 헷갈리게 되었고, : root 에 속성을 정의하여 HTML 문서 전체에 적용할 수 있는 방법을 찾게 되었다. 2. 사용자 지정 속성(custom properties)이란 1) 정의와 특징 - custom properties는 특정한 값을 포함하여 사용자에 의해 정의되는 엔티티이다. - 코드의 재사용성을 높혀주고, 유지보수에 용이하다. - 특정 값(px, rgba, hsl)을 적용하는 것보다 의미를 이해할 수 있게 해 준다. (--main-bg-color: white;) - 미디어..

1. 객체란 - 객체는 연관된 데이터, 연관된 함수의 모음이다. - 객체는 여러 변수와 여러 함수로 구성되며, 이들은 객체 내부에 있을 때 속성(property)과 메소드(method)라고 부른다. - 객체는 순서가 없는 대신 이름으로 값을 저장한다. 2. 객체 생성하고, 추가하고, 가져오고, 삭제하는 방법 - 생성 var ObjectName = { } ; // 객체 생성 var fruits = { "banana":"yellow", "apple":"red" }; - 추가 및 수정 // 점 표기법(dot notation) fruits.kiwi = "green"; // 괄호 표기법(Bracket notation) fruits["blue berry"] = "purple"; - 접근(읽기) // 점 표기법(do..

1. 함수를 사용하는 이유 - 한번 함수를 구현해 놓으면 함수만 수정해주면 되므로 유지보수에 용이하다. - 반복되는 코드를 함수로 만들어 놓으면 코드가 간결해진다. - 함수의 이름을 잘 정의해 놓으면 어떤 동작을 하는지 대략적으로 알 수 있게 해주며, 같은 함수를 써놓은 코드는 논리적으로 코드가 같다는 것을 알 수 있게 해준다. 2. 함수 선언(Function declarations) - 함수 선언은 지정된 매개 변수(parameter)를 사용하여 함수를 정의한다. - 자바스크립트에서의 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)으로 할당된다(hoisted). 즉, 함수 선언 전에 함수를 사용할 수 있다. (*함수 표현식은 먼저 선언해야 하는 차이가 있다.) // S..

1. 제어문이란 - 제어(Control flow)란 컴퓨터가 스크립트에서 명령을 실행하는 순서입니다. - 조건부나 루프와 같이 순차적인 흐름을 변경해야할 때 사용하는 실행문을 제어문이라고 한다. 2. 조건문(Conditional statements) - 조건에 따라 명령을 수행하도록 하는 제어문이다. - 단순 반복적인 코드를 더 효율적으로 만들어 주고, 복잡한 조건을 간결하게 만들어 주며, 목적에 맞는 기능을 구현해 준다. - 조건이 '참'이다라고 여겨지는 것 : false, undefined, null, 0, NaN, ""(empty string)이 아닌 모든 값 그리고 블리언 객체값이 false를 포함하는 객체. 2_1. if / if else / if else if ... else // Syntax..

1. 자바스크립트란 - 사용자와 동적으로 상호작용 하기 위해 만들어진 언어이다. - 즉, HTML의 정적인 정보를 Javascript가 동적인 정보로 바꿔준다. - HTML과 자바스크립트는 둘다 '언어'이지만 HTML은 한번 만들면 변하지 않는 마크업 언어이고, 자바스크립트는 명령어(코드)를 시간순서에 따라 배치하고 실행시켜 기능을 구현하게 하는 '프로그래밍언어'인 점에서 차이가 있다. 2. 자바스크립트 작동을 위한 - script 태그 - 자바스크립트 코드는 HTML에서 작동한다. - HTML 태그 중 태그 안에 자바스크립트 코드를 작성한다. - 화면에 보여지는 그대로 출력 땐 HTML코드를 사용하지만, 데이터를 입력받아 스스로 계산하는 등 interactive한 결과를 얻고싶을 땐 자바스크립트를 사용..

데이터 타입과 변수, 입력과 출력 문자열 기본 문법 리스트 데이터 구조 1. 데이터 타입과 변수, 입력과 출력 1) variable 변수 - 변수를 '선언'한다(=바인딩 한다) 의 의미는 데이터(문자,숫자)를 기반으로 컴퓨터에 명령을 내리는 것. - Type str 문자열 (string) int 숫자:정수 (integer) float 숫자:부동소숫점 (float) bool True / False (boolean) - True 와 False : , =, ==, != (왼쪽에 위치) - 변수의 Name patton : 숫자가 맨앞에 나오면 안됨, 명사_명사처럼 언더바로 이어줌. 2) input, print 입력과 출력 - input()함수를 이용하여 사용자에게 입력받은 값을 '문자열'로 out 한다. - 변..

문자열을 Date, Timestamp로 변환 Date, Timestamp를 문자열로 변환 SQL 쿼리문을 작성할 때 매번 헷갈리는게 날짜/시간형 타입 변환이다. 나중에 두고두고 보기위해 이 부분에 대해 간략히 요약 해 두려 한다. (PostgreSQL) 1. 문자열을 Date, Timestamp로 변환 to_date('2023-01-01', 'yyyy-mm-dd') to_date('2023-01-01', 'yyyy-mm-dd hh24:mi:ss') to_timestamp('2023-01-01', 'yyyy-mm-dd') 2. Date, Timestamp를 문자열로 변환 to_char(column_name, 'yyyy-mm-dd') # column_name은 Date타입컬럼 # 'yyyy-mm-dd'는 문..