표현식과 문 개념 정리 값 값은 식이 평가되어 생성된 결과를 말한다. // 10 + 20은 평가되어 숫자 값 30을 생성한다. 10 + 20; // 30 변수에 저장 // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당 var sum = 10 + 20 값은 다양한 방법으로 생성할 수 있음 가장 기본적인 방법 : 리터럴 사용 리터럴 사람이 이해할 수 있는 문자(아라비아 숫자,알파벳,한글 등) 또는 미리 약속된 기호('',"",.,[],{},// 등)로 표기한 코드 자바스크립트 엔진은 코드가 실행되는 시점 런타임에 리터럴을 평가해 값을 생성함 표현식 예제 1 : var score = 100; 예제 2 : var score = 50 + 50; 예제 3 : var score = 10 / 2 리터럴..
변수 개념 정리 변수란, 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 또한 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 간단히 말하자면, 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름을 말함 변수에 여러개의 값을 저장하는 방법 // 변수는 하나의 값을 저장하기 위한 수단이다. var userId = 1; var userName = 'Lee'; // 객체나 배열같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용이 가능 var user = { id : 1, name : 'Lee' }; var users = [ { id : 1, name..
4월 17일(월) 공부 Figma 클론 과제 진행 / 블로깅 알고리즘 문제 풀기 / Section3 코플릿 문제 앞으로 개선 일찍 자기 (새벽 2시 전에는 제발 자자) 체력 키우기 (18 : 00 - 19 : 00 걷기 운동) 4월 18일(화) 공부 [React] Custom Component 기본 개념 학습 React Custom Component - 과제 예습 모다딥 04장 - 변수 완료 4월 19일(수) 공부 React Custom Component - 과제 진행 (Modal, Toggle, Tab 까지 진행) 모다딥 04장 변수 블로깅 모다딥 05장 표현식과 문 - 06장 데이터 타입 완료 / 블로깅 4월 20일(목) 공부 React Custom Component - 과제 진행 (Bare mini..
Figma 클론 과제 진행하기 학습 목표 Figma의 사용 방법을 익힌다. Figma로 프로토타입을 제작할 수 있다. 웹 사이트의 UI/UX를 분석할 수 있다. UI/UX를 분석한 내용을 토대로 개선할 수 있다. Bare Minimum Requirements Figma로 프로토타입을 제작해 봅니다. 최소한 Lo-Fi 수준의 프로토타입을 구현해야 합니다. 페이지 이동이 가능해야 합니다. 스크롤 이벤트가 있어야 합니다. 최소한 1개의 마스터 컴포넌트와 인스턴스를 만들어야 합니다. Figma 클론 결과물을 제출해 주세요. 과제 결과물 Figma Created with Figma www.figma.com Figma로 클론을 진행할 웹 사이트나 애플리케이션을 하나 골라서 학습한 Figma의 주요 기능을 Bare ..
Figma 컴포넌트 구현 과제 진행하기 학습 목표 Figma의 사용 방법을 익힌다. Figma로 컴포넌트를 구현할 수 있다. 과제 요구 사항 Bare Minimum Requirements GNB (Global Navigation Bar) Modal Toggle Tab Accordion Advanced Challenge Drop Down Auto Complete 페어와 함께 피그마로 컴포넌트를 구현하는 과제였다. 과제를 구현하기에 앞서 튜토리얼 동영상을 보기는 했지만, 막상 시작하려고 하니 주어진 툴도 없었고 완전 백지 상태에서 시작을 해야 했다. 그래서 약 1시간 동안은 아무것도 못하고 어떻게 해야할지 구글링을 계속 했는데 막상 나오는건 전 기수들의 결과물만 나오고 하는 과정은 적혀져 있지 않았고 외국 ..
와이어프레임(wireframe) 와이어프레임은 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 전환 효과나 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하는 것이 아니라 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다. 와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티로 표현하며 3가지 레벨이 나뉜다. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임이라고 한다. Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-..
UI (User Interface, 사용자 인터페이스)알아보기 UI 란, 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템도 UI를 의미한다. 대부분의 UI는 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)를 의미한다. GUI : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 UI 디자인 패턴 모달 : 화면 위에 오버레이 되는 창 토글 : On/Off를 설정할 때 사용하는 스위치 버튼 탭 : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴 태그 : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할 자동완성 : 말 그대로 사용자가 내용을 입..
재귀의 뜻 재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴. 재귀 함수 자기 자신을 호출하는 함수 자기 자신을 호출하는걸 어떻게 한다는거졍;? 코드로 봅시다. function name () { console.log("my name is") console.log("myossi") name() } console.log(name()) 위의 name 함수를 콘솔로그로 호출했을때 아래와 같은 결과를 볼 수 있음 my name is myossi my name is myossi my name is myossi my name is myossi my name is myossi name 함수 안에서 name() 함수, 즉 자기 자신을 호출하게 되면 끊임 없이 반복해서 name함수 안의 로직이 실행된다. 그럼 재귀는 언..
