UX/UI 디자이너로서 커리어 방향성을 정하는 일은 신입뿐 아니라 경력자들도 어려워하는 지점이다. 
방향성을 정하는 것은 ‘좋아하는 일’보다 ‘내가 오래 버틸 수 있는 과정’을 찾는 일에 가깝다.


1. 회사마다 다른 'UI/UX 디자이너'의 정의

UX/UI라는 단어는 참 넓고 모호하다. 어떤 회사는 화면 설계·비주얼·인터랙션 디자인을 'UI/UX'라고 부르고, 또 어떤 곳은 사용자 조사·페르소나·서비스 기획을 'UI/UX'라 정의한다.

결국 직무 이름보다 중요한 건 그 회사가 디자이너에게 어떤 문제를 맡기려 하는가이다. 이를 이해해야 내 역량이 맞는지 판단할 수 있다.

**
2. 방향을 정하는 더 현실적인 방법**

나는 수강생들에게 항상 이렇게 말한다. 나의 강점이 발휘되는 과정을 찾아야 한다고.

기획부터 디자인까지 경험했다면, 어떤 단계에서 가장 몰입감을 느끼는지 돌아봐야 한다. 논리적 구조화를 좋아한다면 UX 기획 쪽, 시각적 완성도나 인터랙션 감각이 뛰어나다면 UI 디자인 쪽, 
데이터와 실험을 즐긴다면 프로덕트 디자이너가 맞을 수 있다.

물론 UX 디자이너, 프로덕트 디자이너(Product Designer), 서비스 디자이너 등 명칭은 달라도 실제 하는 일의 범위가 겹치거나 다를 수 있다. 그러므로 회사마다 정의하는 UX/UI 디자이너를 잘 파악해야 한다. → JD가 중요한 이유다.

**
3. 정보를 찾는 순서**

방향성을 정하는 방법은 세단계로 나눌 수 있다. 1️⃣ UX/UI 포지션의 실제 구분 이해하기 2️⃣ 자신의 강점과 흥미가 맞는 과정 좁히기 3️⃣ 그 방향에 맞는 회사·업계 탐색하기 정보를 찾을 땐 툴이 아니라 "문제의 유형"을 중심으로 보자.

예를 들어 문제 해결 방식에 흥미가 있다면 데이터 중심의 프로덕트 회사나 리서치 기반 기업을, 시각적 완성도에 집중하고 싶다면 브랜드 중심 에이전시를 보는 식이다.

마무리

어쩌면 UX/UI 직무뿐 아니라, 모든 직무에서 방향성을 정한다는 건 본질적으로 어려운 일이다.

방향을 정할 때는 ‘좋아하는 일’보다 ‘내가 오래 버틸 수 있는 과정’에 시선을 두는 것이 더 현명하다.

그리고 그 ‘버틸 수 있는 과정’을 찾아내는 식견은 결국 경험의 깊이만큼 자라나는 것 아닐까.

스타일과 베리어블의 차이... 알고 넘어가자. 구렁이처럼 몰래 만들었던 과거여, 안녕~

스타일은 하나 또는 다수만 저장.

베리어블은 오직 하나만 저장, 참조가능 → 베리어블이나 아니면 스타일이 베리어블을 참조 할 수 있다………(헷갈린다) .....

베리어블이 스타일보다 강력하다고 이해하자. 스타일은 모드가 불가능하다.

그라디언트, 블랜드모드, 이펙트 등 다수의 디자인요소를 결합할 경우 = 스타일을 사용.

단일 (기본) 색상 = 베리어블 사용. 이제 색상에 opacity를 넣는 건 금지...~!!

-두둥-

(웬만해선 토큰을 많이 만드는 걸 지양하는 st) 개발자의 클린코드를 위해(?) 그래서 항상 라벨과 본문 텍스트의 차이를 굳이 굳이 주지 않았다.

Variable Font의 두께 조절도 있구나~ 알아가면 좋을 거 같다.

✅ 장점은 • 한 파일로 다양한 fontWeight 커버 → 용량↓ • weight 조절이 연속적이어서 디테일한 조정 가능 • 반응형 타이포그래피 구성에도 유리

⚠️ 그런데 단점은?

다크모드에서 Variable Font의 두께 조절은 정말 조심해야 하는데, 시각적 대비(contrast) 문제로 인해 더 뚜렷한 단점들이 생긴다.

• 검정 배경 위의 회색 텍스트(예: #A0A0A0)는 밝은 배경 위의 동일한 회색보다 훨씬 더 가늘고 흐리게 보인다.

• 특히 fontWeight: 400 이하는 다크모드에서 시인성이 급격히 낮아짐.

이미 마이크로 하게 디자인 시스템을 구축하는 나에게는 Variable까지 써서 fontweight 조절까지 하는 건 X!! 그냥 이런 경우도 있다는 것으로 끝내겠다.

빠르게 결과물을 내는 것에 집중을 하기로 🥲

1.현실적인 조율과 균형 감각

좋은 UX는 이상적인 설계만으로 완성되지 않는다. 경영진의 방향, 클라이언트의 요구, 개발 리소스, 기획 의도, 일정까지 모두 고려한 ‘실현 가능한 설계’가 중요하다. 나는 다양한 이해관계자의 의견을 경청하고,설득해야한다. 그 안에서 최선의 사용자 경험을 조율해내는 균형 감각이야말로 실력 있는 디자이너의 진짜 역량이라고 믿는다.

2. 끊임없는 학습과 적응력

어떤 서비스를 설계하는지 그 서비스에 대해 공부하는건 필수. 더불어 AI와 노코드 도구가 빠르게 발전하면서 디자이너의 역할도 달라지고 있다. 그래서 나는 단순 구현이 아닌, AI를 활용 하는 전략적 사고가 필요하다고 본다.

3.맥락을 고려하는 설계 감각 (feat.입체적인 사고력)

단순히 예쁜 디자인이 아닌, 사용자가 언제, 왜, 어떻게 이 화면을 쓰는지 흐름 전체를 읽고 맥락 속에서 기능과 구조를 설계하는 힘이 필요하다. 기획자를 너무 믿고 와이어 프레임만 보고 화면 구성을 해서는 안된다. 함께 검토한다는 느낌으로 플로우 흐름을 봐야한다.

4.문제 정의 능력

겉보기에 드러난 요청이나 니즈를 그대로 구현하기보단, 사용자와 비즈니스의 본질적인 문제를 구조적으로 파악하고 정의하는 게 먼저다. 나는 이 과정이 UX디자인의 시작이자 핵심이라고 생각한다.

기준: Flex는 CRUD 중심의 복잡한 서비스 구조를 다루고 있고, 디자인 시스템을 꽤 딥하게 요구한다. 특히 SaaS 기반의 디자인 시스템을 자체적으로 구축하고 정착시켰다는 점이 인상 깊었고, 내가 지향하는 방향과도 맞닿아 있다.

말 그대로 디자인을 예쁘게만이 아니라 ‘구조적으로’ 하는 곳들. SaaS 기반, 내부 툴, 어드민, 복잡한 유저 플로우를 다루는 회사로 정리했다.

1. ABLY (에이블리) • 직무 성향: 어드민 + 서비스 운영툴 + 플랫폼화 + Atomic Design 적극 도입 • 특징: 디자인시스템팀 따로 있음. UI 구조 및 재사용성을 중요시함 • 포인트: 퍼포먼스 기반 실험 & 롤백 문화, 빠른 배포 주기

2. 왓챠 (Watcha) • 직무 성향: 디자이너가 프로덕트 오너십을 가짐 • 특징: 디자인 시스템 정교하게 운영, 미디어 기반 데이터 구조 많음 • 포인트: 사용자 피드백 기반 UX iteration 필수

3. 리디 (RIDI) • 직무 성향: 사내 툴 & 전자책 뷰어 등 UX 난이도 높은 구조 많음 • 특징: 디자인 QA와 디자인 시스템 매우 꼼꼼히 운영함 • 포인트: 뷰어, 유통, 작가툴, 독자툴 등 CRUD 영역 다양

지금까지 해온 실무 경험을 돌아봤을 때, 단순 UI 디자인보다는 구조적인 설계나 반복 가능한 시스템 정리에 강점이 있다고 느꼈다. 그래서 더 깊이 있는 디자인 시스템 환경에서 일하고 싶고, 그런 팀에서 내 역량도 더 성장할 수 있을 것 같다.

라고 생각했는데,

요즘은 Next.js 같은 프레임워크도 잘 되어 있어서 UI 개발도 간소화되고 있고, AI 툴이 디자인 패턴을 빠르게 제시해주는 시대라 단순 UI 구성만으로는 경쟁력이 떨어질 수 있다는 이야기를 들었다. 앞으로는 문제 해결 중심의 디자이너가 더 많이 필요하다는 조언이 인상 깊었다.

생각해보면 이전 회사에서 어드민 페이지는 디자이너 없이 개발자가 직접 구성했던 기억이 있다. 그리고 요즘은 피그마 플러그인만으로도 디자인 시스템 문서화가 훨씬 쉬워졌다는 걸 보면서, 더더욱 “단순 구성”보다는 문제 정의와 구조 설계, 사용자 흐름에 집중하는 디자이너가 되어야겠다고 느꼈다.

그래서 이제는 구조적이고 논리적인 UX 설계를 잘하는 디자이너로 방향을 잡고, AI로는 대체하기 어려운

‘문제 정의 → 구조 설계 → 반복 가능한 시스템 정착’에 더 집중하려 한다.

⸻

1. 프로토타입 툴 스킬 높이기.
2. 문제해결능력 스터디 (아티클을 많이 읽자)

피그마 디자인 시스템에는 힘을 조금 뺄 때가 왔다. 아쉽지만.

1.내가 UX/UI 코스에 참여한 계기는 무엇인가요?

이제 까지 피그마로 툴을 통해 UIUX 디자인 포지션으로 3년 재직했지만, 웹 디자인, 배너 같은 편집디자인도 진행했었습니다. 이제 문제해결식의(데이터 인사이트) 포트폴리오를 만들어 제 경형성에 맞춰 CRUD 기반 화면 설계, 디자인 시스템 구조화 하는 업무를 하고싶습니다.

2.내가 이해한 UX/UI 디자이너는 어떤 역할을 하는 사람인가요?

버튼・폰트・컬러 토큰 등 디자인 가이드를 정리하며, 일관된 사용자 경험을 만들어가는 데 집중하는 것. 사용자 뿐만이 아닌 기획・개발・운영 등 다양한 관점에서 문제를 바라보며 협업 과정 속에서 더 나은 방향을 고민하는 사람.

3.UX/UI 디자이너의 역할과 비슷한 경험을 해 보았나요? 어떤 점이 유사하다고 생각했나요?

간병어플리케이션 회사에서 고도화 진행에 참여를 했고, 앱 개발자와 소통하며 네이밍 부터 함께 기획하여 디자인 가이드 문서화를 제작했고, 디자인 시스템을 개발했습니다.

4.UX/UI 디자이너의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요? 혹은 보완, 개선하고 싶은 개인 역량이 있나요 ?

강점은 개발자와의 커뮤니케이션 입니다! 보완, 개선 하고싶은 부분은 명확한 결과해석,증명입니다. 임팩트, 자신감

5.본 코스 수료 후, 어떤 UX/UI 디자이너로 성장하고 싶나요?

문제해결을 정확하게 시각적으로 풀어내는 디자이너.

6.그 외에 UX/UI 코스에 기대하는 것이 있다면 자유롭게 작성해 주세요.

플러터를 통한 간단한 컴포넌트 마크업

협업

1.내가 생각하는 협업이란 무엇인가요?

필수

2.협업에는 어떤 부분이 중요하다고 생각하시나요?

무언가를 만들고, 유지하기위해선 무조건 필요합니다.

3.그렇다면, 디자이너에게 협업이 왜 중요할까요?

협업은 디자이너 뿐만이 아닌 모두에게 중요합니다. 소통이 안된다면 무슨 작업을 할 수 있을까요? 사용자의 관점 뿐만이 아닌 현실에서 필요한 경영진의 의견, 배포가 가능한지, 일정에 무리가 없는지 개발자의 의견, 가시화해도 괜찮은지 기획자의 의견 모두가 없으면 그건 불가능한 일입니다. 협업은 필수 입니다……

4.협업을 함에 있어 나의 강점은 무엇인가요?

협업을 위해 개발 스터디, PM스터디를 하고 있습니다. 예시)반응형 가이드를 제작 할시 dp와px, sp,pt의 차이점

5.내가 협업을 더 잘 하기 위해서는 어떤 부분을 보완해야 하나요?

지금 마인드 지키기……..

가장 전통적인 방법** position:absolute**

가장 전통적인 방법** position:absolute** 는 부모 요소를 기준으로 절대적인(닉값..👍) 위치 값을 선언할 수 있다. display:Position 그 전에 알고 쓰는 것이 어떨까? *absolute * 선언된 영역의 위치를 절대 좌표 기준으로 지정 가능 + 부모 또는 조상의 공간에 relative가 선언되었다면 울타리 안의 양 한마리가 되어버린다. -> 공중부양(포토샵의 레이어 개념)

*relative * 상대적인 새로운 좌표 값을 형성 + 자식이 absolute로 선언되었다면 현재 공간에 의한 양의 울타리로 구성할 수 있음. -> 기존 작성된 영역보다 언제든지 이동 가능한 존재. 양을 버리고 울타리만 이동하는 경우는 없다.

그외 *static *: 일반적인 적층 개념 - 별도의 작성 없이도 상단으로 쌓여지는 구조를 형성(position의 기본값)

*fixed *: 현재 보여지는 브라우저의 공간을 기준으로 고정정시키는 구성 => 가출소년..?

자식에게 left50% top% 선언하여 중앙 정렬에 오게 한다.

(포인트를 기준으로 위치를 설정해야 함(좌상단(left, top), 우상단(right, top), 우하단(right, bottom), 좌하단(left, bottom))

하지만 위치만 단순히 선언한다면 우리의 중앙 정렬은 불가하다는 것.. 정중앙으로 오게 하려면 transform:translate(-50%,-50%); 을 놓치지 않고 함께 선언해야한다.

알고쓰자!

transform은 형태를 변형하는 명령이다. translate는 위치를 조정하는 것이다. (첫 번째 값과 두 번째 값은 x축과 y축 이다.)

두번째 방법 flex

요즘 핫(?)한 신세계.. 바로바로 display:flex!!! 중앙 정렬이 훨씬 간편하다. 이렇게 display: flex align-content center; align-items: center 를 선언하면 중앙 정렬이 된다.

그외 ☝🏻line-height 값을 부모의 높이로 동일하게 부여하기 ☝🏻margin:auto 를 통해 수평 중앙에 주기 ☝🏻text-align:center 사용하기 (inline 일 때 수평 중앙에 가능)

중앙 정렬을 통해 display 속성도 파헤쳐 보는 시간 마침..

모던 웹브라우저의 다양한 애니메이션 기능을 활용하면 스크롤에 반응하는 근사한 웹페이지를 간단하게 만들 수 있는 플러그인 Page Scroll Effects을 소개하고자한다.

사이트는 여기 하단에! https://codyhouse.co/gem/page-scroll-effects Page Scroll Effects 플러그인의 좋은점! 보리색 배너를 클릭히면 미리 근사한 효과들을 볼 수 있다

하단으로 내리면 내가 원하는 대로 제어 할 수 있는 방법들이 있다. 예를들어 hijackig 을 바꾸어보자 => 섹션을 쫙~! 땡기는 느낌을 부여 할 수 있다. hijackig “off” 를 “on” 으로 선언하여 제어하면된다.

이렇게 쏙쏙골라 제어하며 활용하며 근사한 웹페이지를 쉽고 간단하게! Page Scroll Effects 리뷰 마침💛

편리하게 자동으로 위로올라가는 현상을 방지하는법은
Live Server Config 을 고치는 것이다.

설정 > 확장 > Live Server Config > Setting:Full Reload 에서 체크박스 체크

비주얼스튜디오 코드는 선택시 true가 아닌 반대로 false로 변경이된다. 선택을 하여 false로변경해주자!

작업시 무한스크롤링하는 번거로움에서 벗어나기 완료!

새로운 것은 늘 짜릿해.

다운로드하러 출발

깃허브에서 설치파일 다운로드하러 가기 https://github.com/brackets-cont/brackets

어도비 블라켓 사이트에서 설치파일 다운로드하러 가기 https://brackets.io

다운을 한 번 받아볼까...(블라켓 사이트에서 설치파일을 다운받았다.) 보이는 이 곳은 블라켓의 메인이다. 단순간결한 것이(코딩프로그램 치고는)감성적이야~ 조금 더 스크롤하면~

블라켓을 사용해야하는 이유가 있다!

vscode를 사용하면 open live server를 이용하여 실시간확인을 하지 않는가?

그 귀찮은 과정을 호다닥 즉각적으로 제공한다는 것이 큰 강점이다.

웰컴 블라켓!

다운받기에 앞서 ...

블라켓츠를 설치하시면 먼저 아래 내용으로 [저장시 파일 Lint표시] 체크를 해제하자.

이 부분은 기능상 문제는 아니고 블라켓츠에서 Lint 관련 출력관련 메세지 인데, Visual Studio Code 등 다른 에디터에서는 이런 메세지는 나오지 않는다.

블라켓에서 ERROR: "$" is not defined. 라고 나오는건 첨부된 이미지에 있듯이 '저장시 파일 Lint 표시' 이 부분을 체크 푸시고 다시 실행하면 된다.

책 한 권을 보는 느낌이다. 편하다 편해. 다운받고 블라켓을 이용하면 보이는 첫 화면이다. vscode와 다를 것이 없다.

확장 프로그램 다운

vscode에서 가장 재미있던 것은 확장프로그램 다운받기였다. 괴상한 테마도 다운받아보고, 컬러 등등 실험적인 세팅을 많이 했었다. 그 확장프로그램을 브라켓에서도 이용가능하다. (테마도 담고 여러가지를 제공한다)

블라켓츠(Brackets) 사용법 및 단축키 활용

ctrl + - 를하면 화면 크기를 조절 하는 것도 같다.

근본 있는 디자인을 하자!

이 아이콘은 여기에 왜 넣었고 이 폰트는 왜 적용했는가? 컬러는 왜? 이 작은 요소들 하나하나 까지도 설명을 할 줄 알아야 한다는 것. 충분한 리서치를 토대로 근본이 있어야한다.

누구나 일상에서 이 본질에 대해 체험하고 있다.

사람이라면 삶에서 문제를 직면했을 때 어떻게 해결할지 모색하는 것은 일상이다. (예를들어 인터넷 쇼핑을 할 때 더 좋은 물건을 고르기 위해 최선의 선택을 할 때)

그렇게 우리는 일상에서도 솔루션을 생각하고 이것이 좋은 솔루션인지 고민하는 과정을 거친다.

이렇게 uiux디자인은 심미적인 것을 고려하는 것이 아닌 정략적 데이터를 통한 리서치를 거쳐 사용자를 고려하는 것이다.

UXUI 디자인은 그 본질을 즐길 수 있는 사람이 하면 참 좋은 거 같다. 자신의 솔루션을 검증하는 것이 몸에 밴 사람.

마치며

UIUX 작업 시 필요할 경우 영상 작업을 배우고 있는 나를 발견하기도 한다. 단지, 좋은 목적을 가지고 있는 사람들과 비즈니스 목적지로 달려가고 싶은 마음 아닐까? 그리고 서로의 '노력하는 삶'의 과정에 함께 있다는 것을 알면 이게 그저 나의 열정과는 무관한 일이라 생각하지않고 열심히 일할 수 있게 되는 듯하다. 지난 경험상, 결국은 모든 것이 도움이 됐다.

SQL에 기반을 둔 관계형DBMS중하나

• Oracle, IBM, Infomix 등의 데이터 베이스는 고가이지만, MySQL 데이터베이스는 무료 • 리눅스, 유닉스, 윈도우 등 거의 모든 운영체제에서 사용가능 • 처리 속도가 상당히 빠르고 대용량에 데이터도 처리 용이 • 설치 방법이 쉽고 초보자도 익히기 쉬움 • 보안성이 우수

C:\Bitnami\wampstack-8.0.3-2

C:\Bitnami\wampstack-8.0.3-2\mysql\bin

​

[MySQL]

C : create

R : read

U : update

D : delete

웹 서버 구축 with Bitnami MAMP​

C:\Bitnami\wampstack-8.0.3-2\mysql\bin>mysql -uroot -p [엔터]

password : 000000 [엔터]

mysql>create database 이름; //mysql에 이름으로 명명된 데이터베이스를 구성할 것이다.

​

mysql>drop database 이름; //mysql에 이름으로 명명된 데이터베이스를 삭제할 것이다.

​

mysql>create database 이름;

​

mysql>use 이름; //지금부터는 이름으로 명명된 데이터베이스를 사용할 것이다.

​

mysql>create table 테이블명(

->num int not null auto_increment,

->필드명1 char(문자열 개수) not null, //문자열은 반드시 문자열의 개수를 넣어야 함

->필드명2 int not null, //int(integer)는 개수를 넣지 않음, not null은 필수항목을 지칭

->...

->필드명n 필드데이터타입,

->primary key(num)

->) charset=utf8; //charset=utf8; 의 의미는 비영어권 언어의 데이터를 데이터 베이스에 쌓기 위함

​

/필드 추가/

mysql>alter table 테이블명 add 새필드명 새필드명타입;

/기존 필드명 변경/

mysql>alter table 테이블명 change 기존필드명 새필드명 새필드명타입;

/기존 필드명 삭제/

mysql>alter table 테이블명 drop 기존필드명;

​

/테이블의 구조(레코드(데이터) 제외)을 보고자 할 때/

mysql>desc 테이블명;

​

/기존 테이블 삭제 - 내부의 모든 데이터는 제거(절대 사용하지 말것!!!)/

mysql>drop table 테이블명;

​

​

//레코드 파트

/레코드 넣기/

mysql>insert into 테이블명 values ("데이터1", "데이터2", "데이터3", ....., "데이터n");

​

/레코드 읽기/

<전체 내용 보기>

mysql>select * from 테이블명;

​

<필드 내용 보기>

mysql>select 필드명 from 테이블명;

​

<조건에 부합하는 내용 전체 보기>

mysql>select * from 테이블명 where 필드명="데이터값";

​

<세부 조건에 부합하는 내용 전체 보기 - and 연산자>

mysql>select * from 테이블명 where 필드명1="데이터값1" and 필드명1="데이터값2";

​

<세부 조건에 부합하는 내용 전체 보기 - or 연산자>

mysql>select * from 테이블명 where 필드명1="데이터값1" or 필드명1="데이터값2";

​

​

/레코드 업데이트/

​

mysql>update 테이블명 set 필드명1="데이터값1" (where 필드명1="데이터값1" or 필드명1="데이터값2");

​

​

/레코드 삭제/

mysql>delete from 테이블명 where 필드명1="데이터값1";

이제 친구가 아닌 컴퓨터에게 질문을 해보자^^

조건문은 먼저 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값은 Boolean이다.

if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행.

거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다.

else if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.

while, for 반복문

반복문 에 대해서 알아보자.

while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다.

조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

1. node js 설치 -> VSCODE 터미널에서 npm init 입력 후 설치

나는 16.16.0 으로 낮은 버전을 다운 받았다.

#2. 터미널 창에서 npm install -g @vue/cli 입력 후 설치 (맥 사용자는 sudo npm install @vue/cli)

맥 사용자는 sudo npm install @vue/cli 입니다 sudo를 붙여주세요

#3. 터미널 창에서 vue create vue-mungmi 입력.(하위폴더생성) 그 후 하단의 질문에 응답을 해야 한다.

• Please pick a preset: ==> [Manually select feature] 선택
  • Check the features needed for your project: ==> [Router]만 선택하고 나머지는 모두 선택해제 (방향키 누르면서 (*) 선택 또는 ( ) 해제로 스페이스바를 누르면서 변경할 수 있음)
  • Use history mode for router? ==> 기본값이 Y 작성 후 엔터(주소 표시줄에 나타나는 '#'을 제거해 줌)
  • Where do you prefer placing config for... ==> 기본값 그대로 [config] 파일 선택(특별히 사용할 설정값이 없음)
  • Save this as a preset for future projects? (y/N) ==> 기본값 N 선택(지금까지 선택한 기능을 나중에 재활용 할 수 있도록 저장할지 결정)

1.ECMA SCRIPT6 의 약어 => 2015년 6월을 기준으로 새로 업데이트된 자바스크립트를 지칭

2.클래스 개념 도입 : 예시, '동물'이라는 키워드를 기반으로 하위의 어떤 존재(강아지,고양이,...)를 찾아서 적용하기 위한 개념으로 도입 => 본격적인 객체 지향 프로그램으로 변모

3.객체라는 개념이 넓어짐과 동시에 명확해짐

4.콜백지옥이란 불분명한 구조를 promise() 함수 ~ then 변경되었음(비동기방식 처리 과정)

*전에 배운 es5와는 어떤 점이 다른지 알아보았다. *

1.템플릿 리터럴(``) - 백틱사용

    console.log("***ES5***");
    var string1 = "안녕하세유~";
    var string2 = "반갑습니다";
    var greeting1 = string1 + "," + string2;

    console.log(greeting1);
        var product1 = {
        name : "곰인형",
        price : "7,200원"
    }

    var message1 = "상품" + product1.name + "의 가격은" + product1.price + "입니다.";
     console.log(message1);

    //문자열과 변수를 연결하는 과정에서 병합연산자를(+) 사용해야함

es5 => 문자열과 변수를 연결하는 과정에서 병합연산자를(+) 사용해야함

//******ES6*********//
    console.log("*****ES6*****")

    var string3 = "안녕하세유~";
    var string4 = "반갑습니다";
    var greeting2 = `${string3},${string4}`;
    console.log(greeting2);

    var product2 = {
        name : "곰인형",
        price : "7,200원"
    }
    var message2 = `상품${product2.name}의 가격은 ${product2.price}입니다.`;
    console.log(message2);

    //템플릿 리터럴 사용. 템플릿 리터럴에는 $를 사용하여 변수 또는 식을 포함할 수 있음 

es6=>템플릿 리터럴 사용. 템플릿 리터럴에는 $를 사용하여 변수 또는 식을 포함할 수 있음 

배열(array)은 같은 타입의 변수들로 이루어진 집합이다.

배열을 구성하는 각각의 값을 배열 요소(element) 라고 하며,

배열에서의 위치를 가리키는 숫자는 인덱스(index) 라고 한다.

C언어에서 인덱스는 언제나 0부터 시작하며, 0을 포함한 양의 정수만을 가질 수 있다. (음수이면? 값이 없다는 뜻으로 해석)

배열은 같은 종류의 데이터를 많이 다뤄야 하는 경우에 사용할 수 있는 가장 기본적인 자료 구조이다.

배열의 진가는 반복문과 결합했을 때 나타난다 .

반복문으로 리스트에 결한합 정보를 하나씩 꺼내서 처리 할 수 있기 때문이다.

Javascript(도서관 건물 - 웹브라우저에서 제공)

• jQuery(한 권의 마법책) -> 펼쳐서 주문을 외친다.
• VueJS(한 권의 마법책) -> 펼쳐서 주문을 외친다.
• ReactJS(한 권의 마법책) -> 펼쳐서 주문을 외친다.

** jQuery의 장점**

• 배우기가 쉽다. (영문법을 그대로 녹였다.)
• 빈 text노드라는 개념이 존재하지 않는다.
• 많은 문법이 있으나 실제 사용되는 문법은 모두 사용하지 않는다.
• 메서드만 존재한다. (메서드명();)
• Javascript의 기초문법 + 객체 + setInterval + setTimeout 사전 지식 요구됨
• 비동기 처리방식(커피숍의 진동벨)이 적용하기 쉽다. - Ajax
• JSON 데이터를 취급하기 쉽다

jQuery의 단점

• 동적구현이 어려운 편
• Application(앱 : DB와 연동하여 화면상에 데이터를 가져오는 방식)에서 다소 느린편