chance_777.log

[JD분석] 업스테이지 Front-End

Sun, 27 Aug 2023 10:11:31 GMT

AI 솔루션 전문기업 ‘업스테이지’ JD 분석하기

[요약]

지원하고자 하는 직무의 JD를 보고 요구하는 역량 분석하기
어떤 인재상을 원하는지 한 문장으로 정리해보기
여러 회사의 JD에서 반복되거나 중요하다고 생각되는 키워드와 그 이유

업스테이지(Upstage)

AI챗봇 애스크업(AskUp, 아숙업)을 만든 국내 인공지능 스타트업
'Upstage AI Pack' 고객 맞춤형 올인원 AI 솔루션 보유

📃 업스테이지 Front-End 채용 정보

[Description]

업스테이지는 AI 기술로 해결할 수 있는 비즈니스 문제들을 풀어갑니다. Making AI Beneficial 이라는 미션 아래, 누구나 AI 기술의 혜택을 누릴 수 있도록 '적용이 쉬운 AI 솔루션'을 만들고 있습니다. 세계 최고 수준의 AI 모델과 그 모델을 지속적으로 관리, 개선, 운영하기 위한 데이터, 학습, 서빙과 관련된 모든 필수 소프트웨어를 하나로 묶은 “AI Pack” 그리고 OCR 및 개인화 기술을 다양한 분야에서 손쉽게 활용할 수 있는 API 시리즈를 출시하여 기업 고객들의 비즈니스 성공에 기여하고 있습니다.

또한 ChatGPT를 적용한 카카오톡 채널 기반 챗봇 '애스크업'(AskUp)을 통해 모바일 사용 경험의 혁신을 이루는 동시에 AI분야에 대한 대중들의 접근성과 신뢰성을 높여가고 있으며, Chat AI 기술을 비즈니스 환경에 맞게 최적화해 기업들의 업무 효율과 생산성을 높일 수 있는 ‘애스크업 비즈’(AskUp Biz)를 운영하는 등 AI가 세상에 이롭게 쓰이게 하기 위해 노력하고 있습니다.

업스테이지 프론트엔드 소프트웨어 엔지니어는 세계 최고 수준의 로코드, 노코드 AI 제품인 AI Pack 을 밑바닥부터 설계하고 구현하며 수천만건 이상의 사용자 요청과 텍스트, 이미지 데이터를 빠르고 안정적으로 다룰 수 있는 사용자 인터페이스를 개발합니다. 이를 위해 디자인 조직과의 협업을 통하여 회사의 모든 제품에 사용될 업스테이지 공통 디자인 시스템을 정의하고 구현합니다. 또한 업스테이지 제품의 사용 패턴을 분석하기 위한 사용자 로그를 수집하고 다양한 관점에서 이를 분석할 수 있는 플랫폼을 개발합니다.

업스테이지 소프트웨어 개발팀은 업계 최고 수준의 기술 리더십과 도전 정신을 바탕으로 안정적이면서도 혁신적인 제품을 만들기 위해 노력합니다. 고객에게 더 좋은 AI 제품이 무엇인지 찾기 위해 끊임없이 연구하고 시도하며 제품과 구성원들이 함께 성장할 수 있도록 적극적으로 지원하고 있습니다.

[주요 업무]

Upstage AI Pack 프론트엔드 개발
Upstage 디자인 시스템 개발
사용자 행동 패턴 분석 시스템 개발
FE 조직 리드

[Requirements]

필수 사항

현업 5년 이상 (또는 그에 준하는) 시스템/서비스 개발 경험
주요 프론트엔드 프레임워크(예: React, Svelt, Vue.js 등)에 대한 깊은 이해와 경험
HTML, CSS, JavaScript (Typescript) 및 관련 웹 기술에 대한 전문성
웹 접근성, 반응형 디자인, 크로스 브라우저 호환성에 대한 이해와 경험
웹 성능 최적화 기술과 경험
모던 개발 도구 및 프로세스(예: Git, CI/CD, 코드 리뷰 등)에 대한 숙련도
다양한 이해 관계자(예: 백엔드 엔지니어, 디자이너, 제품 관리자 등)와 긴밀하게 협력할 수 있는 능력
탁월한 문제 해결 능력

우대 사항

Remix, Next.js 등 SSR 프레임워크 사용 경험
각종 차트 및 대시 보드 개발 경험
i18n 지원 서비스 개발 경험
성능 또는 보안 취약점 개선 경험
조직 리드 경험
Full stack engineer 로 근무한 경험

📝 업스테이지 JD 분석

1. 요구하는 역량 분석

🔴 중요하게 생각되는 기술 키워드

React, Svelt, Vue.js
HTML/CSS
JavaScript(Typescript)
웹 접근성
반응형 디자인
크로스 브라우저 호환성 이해와 경험
웹 성능 최적화 기술과 경험
Git, CI/CD, 코드리뷰 숙련도

2. 업스테이지 인재상

고객에게 더 좋은 AI 제품을 제공하기 위해 다양한 이해 관계자들과 긴밀히 협력하고, 탁월한 문제 해결 능력을 가진 개발자

3. 여러 회사에서 반복되거나 중요한 키워드

React
- 관심 분야 기업 7군데 모두 공통적으로 요구된 기술스택
- React로 Web-app 개발 시, 마치 모바일 앱을 사용하는 것처럼 새로고침 없이 웹 탐색이 가능하기 때문에 사용자에게 긍정적인 느낌을 준다. 쇼핑몰의 경우 구매 전환율도 올라간다고 한다.
- 결론: React를 사용하여 개발된 웹과 앱은 긍정적인 사용자 경험을 주기 때문에 프론트엔드 개발자의 필수 소양

[느낀 점] JD 분석은 앞으로 내가 배워야 할 새로운 기술을 알아가는 자연스러운 과정이라고 생각한다. (배우면 배울수록 배울게 많은 개발자 === 멋진 사람) 특히, 여러 회사에서 공통적으로 요구된 React는 9월부터 배우게 되는데 아직 JavaScript도 제대로 하지 못하고 있어서 걱정 반 + 기대 반 + 설렘 반이다😂 그래도 기대하는 점이 조금 더 큰 이유는, React로 개발된 웹을 React Native를 사용해서 모바일 앱으로 만들 수 있다는 점이 흥미롭게 다가왔기 때문이다. 앞으로의 여정도 화이팅!!

[참고자료]

Upstage 홈페이지 Upstage | FE 채용정보 Upstage | AI 회사에서 소프트웨어 엔지니어는 무슨 일을 하나요? Upstage | 개발자가 AI회사에서 뭐해요? (Youtube) React란? React를 사용하는 이유 React를 사용하는 이유2

[멋사] JavaScript 조건문

Sun, 13 Aug 2023 10:43:46 GMT

JavaScript 조건문 Remind하기

[조건문]

요약

말 그대로 '조건을 가진 문장'으로, 특정한 조건에서만 코드 실행
주어진 조건에 참(true) 또는 거짓(false)여부에 따라 각각 다른 할 일을 정의하는 실행문

조건문 종류

if문
- if문에서는 괄호 안의 조건을 체크해서 결괏값이 true면 if문 다음에 나오는 명령 실행
- false이면 아무것도 실행하지 않음
```
if(조건) {
조건이 true일 때 실행할 명령
}
```

if~else문
- if~else 문은 if 조건의 결괏값이 true가 아닐 때 실행할 명령을 else문 다음에 추가
```
if(조건) {
조건이 true일 때 실행할 명령
} else {
조건 결괏값이 false일 때 실행할 명령
}
```

switch문
- 조건 값과 case의 값이 일치한 경우에만 동작을 실행하며, 케이스별로 명확히 구분하고 있어 if문에 비해 가독성이 좋음
- 조건과 일치하는 case 문이 없는 경우 default문 실행
```
switch(조건)
{
case 값1: 명령1
break;
case 값2: 명령2
break;
...
default: 명령n
}
```

조건문 Output

if~else문

// 5의 배수 확인하기

let userNumber = prompt("숫자를 입력하세요.");

if (userNumber !== null) { // 입력값이 null이 아니면(true) if~else문 실행   
  userNumber = parseInt(userNumber); /* prompt()문을 사용해 입력받은 값은 기본적으로 문자열로 저장됨.
parseInt()함수를 사용해 입력받은 값을 처음부터 숫자로 바꿔주는 것이 안전함
(문자열 값이라도 산술 연산에 사용할 경우 자동으로 숫자형으로 변환되지만,
데이터 유형이 자동으로 변환되기 때문에 예상치 못한 곳에서 다르게 변환될 수 있음)
*/ 
  if (!isNaN(userNumber)) { // userNubmber가 isNaN이 아니면(true) if~else문 실행
    if (userNumber % 5 === 0) { // userNumber가 5의 배수이면
      alert("5의 배수입니다.");
    } else {
      alert("5의 배수가 아닙니다.");
    }
  } else {  // userNumber가 isNaN이면
    alert("숫자가 아닙니다.");
  }
} else { // 사용자가 '취소'버튼을 눌렀을 경우
  alert("입력이 취소 되었습니다");
}

switch문 + if문 응용

let luckNumber = parseInt(prompt("오늘의 운세는?🤗 (1 ~ 3 사이의 숫자 하나만 입력해주세요!)"));

switch(luckNumber) {
  case 1: 
    alert("오늘은 뭘 먹어도 살 안찌는 날😆 맛있는 음식 마음대로 드세요!!")
    break;  // break문을 사용해야 해당 switch문을 빠져나올 수 있음. break를 입력하지 않으면 다음 case문까지 실행 됨.
  case 2: 
    alert("오늘은 무엇을 해도 전부 잘 될거에요! 하고 싶은 일을 도전해 봐요~😘")
    break;
  case 3: 
    alert("금전운이 좋네요! 예상치 못했던 수입이 들어올 수 있어요!😎")
    break;
  default: 
    if (luckNumber < 1 || luckNumber > 3 || isNaN(luckNumber)) {
      alert("1 ~ 3 사이의 숫자를 입력하지 않았어요..😥");
    } // luckNumber가 1보다 작거나, 3보다 크거나, 숫자가 아닌 경우 3개 조건 중 1개라도 true이면 alert 실행
}

Finding (배운 점)

if~else문에서 "let userNumber = parseInt(prompt("숫자를 입력하세요.");로 입력 했더니, 사용자가 입력을 취소할 때 '입력이 취소되었습니다' 문구가 나오지 않는 문제가 발생했다. 구글링&챗GPT 도움 결과, prompt에서 취소를 누를 경우, pasreInt(null)이 되기 때문에 결과적으로 NaN이 반환되어 문제가 발생되었던 것이다. 문제 해결 방법: 최초에 prompt입력받을 때 parseInt를 없애주고 "let userNumber = prompt("숫자를 입력하세요.");, if문 안에 parseInt를 작성하여 해결하였다. if (userNumber !== null) { userNumber = parseInt(userNumber);...

Feeling (느낀 점)

내가 적용해보고 싶은 내용으로 실습을 하다보니 학습에 많은 도움이 되는 것을 느꼈다. 그 이유를 생각해보면 '내 것'이라는 마음이 크게 작용한 것 같다. 오늘 if~else문에서 문제가 발생한 부분을 어떻게든 해결하려고 몰입한 나를 발견해서 기분이 좋았다.

[멋사] 프론트엔드 스쿨 7기 학습 230808

Tue, 08 Aug 2023 15:07:06 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🟪 Bootstrap

실습

실행




  
  
  
  
  
  
  Document


  
    
      
        
            
              MISSION: IMPOSSIBLE - DEAD RECKONING, PART ONE
            
            
                
                  
                    
                      
                      4.8 
                    
                    전문가 평점
                  
                
            
        
        
          
            
                
                  
                
                
            
          
        
        
          
              리뷰
              
                5
                
                
                  
                
              
              
              
                5
                
                
                  
                
              
              
              
                5
                
                
                  
                
              
              
              
                5
                
                
                  
                
              
              
              
                5

결과

추가 실습 해보기!

① ⭐ 4.8 '점수' 가운데 정렬

AS-IS: 화면 크기를 키웠을 때 '점수'는 왼쪽, '전문가 평점' 텍스트는 가운데 정렬되어 가독성 저하
TO-BE: '점수' 가운데 정렬하여 '전문가 평점'과 동일한 라인에 위치

② '리뷰 별점' 수정

AS-IS: 별점 숫자 (5, 5, 5, 5, 5) , progressbar (모두 동일)
TO-BE: 별점 숫자 (5, 4, 3, 2, 1) , progressbar (모두 다르게 적용)

③ '리뷰하기' 버튼 수평 가운데 정렬

AS-IS: 왼쪽에 위치
TO-BE: 가운데 정렬

실행 ① ⭐ 4.8 '점수' 가운데 정렬

② '리뷰 별점' 수정

③ '리뷰하기' 버튼 수평 가운데 정렬

.btn{
    width: auto;
    margin: auto; /* margin: auto 추가 */
}

결과

Findings(배운 점)

html에서 작성한 태그에 class를 통해 부트스트랩의 다양한 스타일을 적용할 수 있는 점

적용되는 스타일의 class는 정해져 있으며, 부트스트랩 페이지에 자세히 나와있으니 참고!! Bootstrap Docs

Future Aciton(향후 액션 아이템)

로또 번호 추첨기를 만들 때, 부트스트랩을 이용한 다양한 디자인 적용 시도 ex) '로또 번호 추첨하기' 버튼 (지금 당장 생각나는 건 버튼 뿐이지만!! 만들면서 다양하게 적용해보자)

[멋사] 프론트엔드 스쿨 7기 학습 230807

Tue, 08 Aug 2023 15:01:50 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🟢 배열 (Array)

배열은 데이터를 순서대로 저장하는 객체
하나의 데이터를 표현하는 원시타입과 달리 여러 개의 데이터를 한 변수에 저장할 수 있기 때문에 데이터를 추가하거나, 제거, 정렬, 검색 등 다양한 작업을 수행할 수 있도록 여러가지 메소드 제공

.map()

배열 내의 모든 요소 각각에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환
실무에서도 많이 사용되며, 면접 질문에서도 많이 나옴!

map의 형태

array.map((value, index, arr) => {
    console.log(value, index, arr)
      return value
})

MDN

[추가 학습]

7월 KPT회고록 - Problem 해결을 위한 Try

실행

// '노마드 코더' 유튜브 강의
// .map은 React에 갔을 때 매우 유용함
// API로부터 배열을 받게 되면, 그 배열의 데이터를 이용해서 어떠한 component의 배열을 만듦

// 이 배열의 모든 아이템에 이모티콘 또는 숫자를 추가하고싶다? const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

// days.map은 days에 있는 모든 요일에 function을 실행한다는 뜻 // 그리고 그 function에서 나온 값을 저장해서 새로운 배열을 만듦

// 1. days앞에 캘린더 이모티콘 넣기 const calendarDays = days.map(day => 📅 ${day}) console.log(calendarDays)

// 2. days앞에 숫자 넣기 const NumDays = days.map((day, index) => #${index + 1} ${day}) console.log(NumDays)

- **결과**
![](https://velog.velcdn.com/images/chance_777/post/68734ceb-f6ee-4b99-b8d4-b2ef5e61a2cd/image.png)







- **실행**

```javascript
// 'zero cho' 유튜브 강의
//.map은 각각의 요소를 반복문 돌면서 요소를 바꿔줄 수 있음

// array에 있는 모든 숫자에 2 곱하기
const array = [1, 2, 3, 4];
array.map((element, i) => {
    return element * 2;
})

// .map을 이용한 로또 추첨 번호 만들기(1~45)
Array(45)  // 길이가 45인데 텅 빈 배열
Array(45).fill()  // 길이가 45인데 undefined가 채워진 배열
Array(45).fill(0)  // 길이가 45인데 0으로 채워진 배열 
Array(45).fill(0).map((el, idx) => {  // el, idx는 매개변수이기 때문에 이름은 마음대로 지어도 됨. 중요한 건 '자리'임 (첫 번째는 '요소', 두 번째는 '인덱스')
        return idx + 1;
})

결과

Finding(배운 점)

.map()은 실무에서 굉장히 많이 사용 되며, 특히 react에서 유용하게 사용된다고 한다. forEach와 차이점은 map은 새로운 배열을 만들고, return이 있다는 점이다.

Feeling(느낀 점)

.map()메소드를 사용하여 배열의 각 요소에 내가 원하는 결과값을 만들 수 있다는 점이 굉장히 효율적으로 느껴졌다.

Future Action(향후 액션 아이템)

로또 번호 추첨기 만들기: .map()을 이용하여 1~45까지 숫자 생성하기

[참고자료]

[Mdn] .map() [YouTube] 노마드 코더 - 자바스크립트 array.map을 설명해준다! [YouTube] ZeroCho TV - 자바스크립트 강좌 5-8 배열 forEach, map, fill 알아보기

[멋사] 가고싶은 회사 JD 분석

Sat, 05 Aug 2023 15:04:56 GMT

📃 JD란?

Job Description (직무기술)
HRD 용어사전: 직무기술은 구체적으로 직무수행에 요구되는 지식과 기술, 업무조건, 감독지시, 다른 직무들과의 관계, 급여수준 등과 같은 요소들과 함께 직무의 과업과 책임에 관한 내용을 포함
쉽게 말해, 현재 채용하려는 자리에서 하고 있는/해야 하는 일들, 즉 직무에 대해서 상세하게 설명해 놓은 것

JD 분석 방법

내가 지원하고자 하는 직무의 JD를 보고 요구하는 역량 분석하기
특히, 여러 회사의 JD에서 반복되거나 중요하다고 생각되는 키워드 3가지 이상과 그 이유도 함께 작성해보기
어떤 인재상을 원하는지 한 문장으로 정리해보기
분석한 키워드를 기반으로, 내 이력서에는 무엇이 들어가야 할 지 미리 작성해보기 - 지도 만들기

👩🏻‍💻 AI챗봇 솔루션 기업 분석

AI챗봇 솔루션 기업을 선택한 이유
- 이전 직장에서 1년 2개월 간 AI챗봇 PA(Project Assistant)역할 수행
- AI챗봇 PA 경험을 바탕으로, 프론트엔드 개발자로서 업무 협업 시 원활한 커뮤니케이션과 시너지 창출

주 업무 경험
- 신상품 사전예약 웹챗봇 기획
- 챗봇 정확도 개선
- 고객 Pain Point 분석 및 UI/UX 개선
- 챗봇 상담쿼리 모니터링
- 챗봇 관리자 페이지 기능 추가 기획 참여

AI챗봇 솔루션 기업 중, 오늘은 "꿈많은청년들" JD분석을 진행해보도록 하겠습니다.

꿈많은청년들

2015년 5월 설립된 인공지능 챗봇 개발 전문 기업
대표적인 솔루션으로는 인공 지능 챗봇 솔루션 '클라우드 튜링(Cloud Turing)'과 업무 효율화를 위한 근태관리 솔루션 '오늘의업무'가 있다.

'클라우드 튜링(Cloud Turing)'
- 커스텀 챗봇 개발 (챗봇 제작 의뢰)
- 챗봇 빌더 (고객이 직접 챗봇을 만들 수 있는 챗봇 제작 툴(Tool))

'오늘의업무'
- 사내 메신저 '슬랙(Slack)'에서 챗봇으로 근태관리를 할 수 있는 서비스

꿈많은청년들 Front-End 채용 정보

(23.08.06 기준 / 채용 일시 마감 상태)

Front End Team

Front End Tech Stack

HTML
CSS
JavaScript
TypeScript
React / Next.js
WebSocket

[ 주요업무 ]

챗봇 빌더 솔루션 웹페이지
실시간 채팅이 가능한 웹용 챗봇
챗봇, 사용자 관리를 위한 대시보드 (관리자 페이지)

[ 자격 요건 ]

공통 자격 요건

필요 기술
- React를 이용하여 개발을 할 수 있는 능력이 필요합니다.
- REST API를 이해하고, 실제로 연동이 가능한 능력이 필요합니다.
- HTML, CSS, JS로 페이지를 구현하는데 어려움이 없으며, DOM에 대한 기본적인 개념에 대한 최소한의 이해가 필요합니다.
- 브라우저에서 제공하는 기본적인 VanillaJS에 대한 함수들에 대한 이해와 기초적인 자료구조에 대한 이해가 필요합니다.
필요 언어
- 한국어

경력 자격 요건

요구 경력
- 최소 1년 이상 프론트 개발 실무 경력
필요기술
- 학습(연습)용 프로젝트가 아닌 실제 프로젝트에서 최소 1년 이상의 React 개발 경험이 필요합니다.
- React Hook에 대한 이해 및 개발 경험이 필요합니다.
- Redux 상태관리 및 미들웨어 라이브러리를 사용한 비동기 통신 개발 경험이 필요합니다.

[ 우대 사항 ]

Typescript 및 Next.js 기반 프로젝트 개발 경험이 있으신 분
Node.js에 대한 이해가 있으신 분
WebSocket에 대한 이해가 있으신 분

📝 꿈많은청년들 JD 분석

JD Keywords

🔴 All

HTML
CSS
JavaScript(VanillaJS)
React (실제 프로젝트에서 React 1년 이상 개발 경험, React Hook 이해 및 개발 경험, BackEnd연동)
REST API
DOM
Redux (상태관리 및 미들웨어 라이브러리를 사용한 비동기 통신 개발 경험)
WebSocket

🟠 Often

TypeScript
Next.js
Node.js

그 밖의 Keywords

사용자 편리성이 우수한 서비스 구현, 원활한 커뮤니케이션 능력, 협업 능력

꿈많은청년들 인재상

사용자 만족을 위한 기능을 구현하기 위해, 원활한 커뮤니케이션 능력과 BackEnd연동이 능숙한 프론트엔드 개발자

[참고자료]

[회고록] 멋사 7월 KPT 회고

Sat, 05 Aug 2023 07:12:07 GMT

23.07.03 ~ 23.07.31 멋쟁이사자처럼 프론트엔드 스쿨 7월 수강 회고록

🚩 들어가기 전..

회고의 의미

돌아보는 것
지나간 일을 돌이켜 생각하는 것

회고의 목적

과거를 되돌아보고 "그럼 이제 무엇을 해야할까?"라는 것을 생각하며, 문제 인지 및 개선하기 위함
궁극적인 목적은 '성장'

회고 방법

회고 방법론은 KPT, 4L, 5F 등 다양한 방법들이 있다.
회고 방법론들의 핵심 메세지는 비슷하며, 방법이 중요하기 보다 자신이 했던 일에 대해 생각하고 그 후에 무엇을 할지 고민하는 것이 핵심이다.
솔직하게 작성하는 것이 중요

[KPT 회고]

Keep(잘한 것), Problem(아쉬운 것), Try(시도할 것)의 약자
- K: 잘 해와서 유지하고 싶은 것
- P: 어려움을 느껴서 개선하고 싶은 것
- T: 구체적인 시도할 내용

[4L 회고]

Liked : 좋았던 점은 무엇인가?
Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?
Learned : 배운 점은 무엇인가?
Longed for : 앞으로 바라는 것은 무엇인가?

[5F 회고]

Facts : 사실. 무슨 일이 있었는가?
Feeling : 느낀 점, 감정. 어떤 느낌이 들었는가?
Finding : 배운 점, 인사이트. 어떤 것을 기억하고 싶은가?
Future Action : 향후 액션 아이템. 앞으로 무엇을 할 것인지?
Feedback : 피드백. Future Action에서 정한 액션 아이템을 실행하고, 어떤 피드백을 받았는가?

🚩 7월 KPT 회고

Keep

건강 관리
- 건강식 만들어 먹기
- 주 4회 이상 30분~1시간씩 운동(헬스, PT, 공원 산책, 홈트)

TIL 블로그
- 당일 학습 내용 복습 및 정리
- 1일 1포스팅 ~~(종종 하루 gap 발생하는 경우 있음)~~

멋사 회고조 활동
- 매주 1회 정기 회의 통하여 회고조 자체 스터디 문화 형성
- Github PR 협업 연습 진행 중
- 휴강일 or 주말 오프라인 모각코 진행

멋사 블로그 스터디 활동
- 매주 일요일 오후 8시 블로그 공유회 진행
- 한 주 동안 배운 학습 내용 중, 더 깊게 파고 싶은 부분 혹은 이해가 어려웠던 부분 포스팅하여 공유
- 3~5분 이내 발표 후, 질문 받는 시간을 가지며 "내가 정확히 이해하고 있는가"를 알 수 있음.

Problem

학습 진도
- 학습 진도 follow 어려움
  - why? 비전공 + 멋사에서 코딩 공부 처음 시작
  - 지금 당장 이해가 안되는 부분은 반복적으로 나오기 때문에 넘어가도 된다고 하셨는데, 나는 거의 다 넘어가는 것 같다..(안돼...😭😭😭)
- 과제가 주어지면 많은 시간이 소모됨
  - why? 도움을 요청하기 전에, 먼저 스스로의 힘으로 해결해보고 싶은 욕망이 가득했다..내가 직면한 문제를 스스로 해결했을 때의 쾌감을 느끼면서 체득화 하고 싶었는데 쉽지 않았다. 내가 해볼 수 있는 방법을 총 동원해보고 이 후에 도움 요청을 한다.

블로그 포스팅
- TIL 블로그 포스팅 패턴 개선 필요
  - why? 기초 지식이 전무한 상태다보니, 현재 나의 TIL 포스팅 패턴은 '기본 개념 + 간단한 실습 코드'의 나열이다.
  - 블로그를 작성하면서 스스로에게 이런 생각이 들 때가 많았다. "이 정도면 그냥 교안에 있는 내용 복사 붙여넣기 한 거 아닌가.."
  - 블로그를 위한 블로그가 아니라, 체득화를 하기 위해 효율적으로 포스팅 할 수 있도록 패턴 개선 필요성을 느꼈다.

Try

Problem에 대한 해결책
- 학습 진도 follow
  - 정규 수업 종료 후, 수업 내용 관련한 동영상 강의(유튜브, 인프런 등) 찾아서 수강하기
- 과제
  - 우선, 스스로 만들어 볼 수 있는 영역까지 만들기
  - 3번 이상 시도했을 때 해결이 안 된 부분은 회고조 분들과 함께 집단 지성을 이용하여 문제 해결
- TIL 블로그 포스팅
  - 블로그 스터디 조원분들 포스팅 참고
  - 각 기업 기술 블로그 참고

다음 회고 때 판별 가능한 것
- 학습 진도 follow
  - 수업 내용 관련 동영상 시청 기록 및 Finding(배운 점), Future Action(향후 액션 아이템) 간단히 기록
- 과제
  - 회고조 Github에 과제 실습 코드 추가/수정 내역
  - TIL 블로그 포스팅
    - 포스팅 패턴의 변화 (AS-IS: '개념+간단한 코드' → TO-BE: ???)
    - 나만의 방법을 찾았는가

당장 실행 가능한 것
- 정규 수업 종료 후, 추가로 동영상 강의(유튜브, 인프런) 시청 및 기록
- 블로그 스터디 및 각 기업 기술 블로그 참고

[멋사] 프론트엔드 스쿨 7기 학습 230803

Fri, 04 Aug 2023 08:05:14 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🟢 Javascript Type

원시 타입 (Primitve Types)

undefined

아무런 값도 할당받지 않은, 정의되지 않은 상태
정의되지 않은 변수에 접근하려고 할 때 undefined 반환
undefined는 falsy 값으로 평가되기 때문에, 조건문에서 변수에 값이 할당되어 있는 상태인지 확인하고자 할 때 자주 사용함

null

null은 값이 없음을 나타냄
어떤 값이 의도적으로 비어있음을 표현하며, Boolean연산에서는 false로 취급

bigInt

Number원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1 (9007199254740991) 보다 큰 정수를 표현할 수 있는 객체
정수 뒤에 n을 붙이거나 함수 bigInt()를 호출해 생성

객체 타입 (Object Types)

프로퍼티와 메서드를 가지며, 이 둘은 각각 객체의 상태와 동작을 나타냄
값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨
객체 값을 다른 변수에 할당 할 때는 값 자체가 복사되어 저장되는 것이 아닌 값의 참조(위치)가 저장됨

배열 (Array)

배열은 데이터를 순서대로 저장하는 객체
여러 개의 데이터를 한 변수에 저장할 수 있기 때문에 데이터를 추가, 제거, 정렬, 검색 등 다양한 작업을 수행할 수 있도록 여러 메소드 제공
```
// 1. array의 여러가지 형태
let arr1 = []
```

let arr2 = [1, 2, 3]

let arr3 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] arr3[0] // 출력: [1, 2, 3] arr3[1] // 출력: [4, 5, 6] arr3[2] // 출력: [7, 8, 9] arr3[1][2] // 출력: 6

// 2. array 길이 출력 let arr1 = [1, 2, 3] arr1.length // 출력: 3 arr1.length = 100 arr1 // 출력: [1, 2, 3, empty × 97] arr1[10] = null arr1 // 출력: [1, 2, 3, empty × 7, null, empty × 89]

let arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] arr2.length // 출력: 3 arr2.flat().length // 출력: 9

let arr3 = [[[10, 20], [10, [10, 20]], 3], [[10, 20], [10, [10, 20]], 6], [[10, 20], [10, [10, 20]], 9]] arr3.flat() arr3.flat().flat().flat() arr3.flat(3) arr3.flat(Infinity)






# 🟠 function (함수)
- 특정한 작업을 수행하기 위해 만들어진 "명령어 묶음"
- 반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있음

**[함수 설명 예시]**
```javascript
// 건물 올리기 할 예정

// 땅 다지기()
// 말뚝세우기()
// 기초콘크리트()
// 철근바인딩()
// 기둥세우기()
// 외벽올리기()
// 지붕올리기()

// 1번째 장점
// 아키텍처 파악: 이 코드를 보고 건물올리기를 한다는 것을 알 수 있음.

// 2번째 장점
// 유지보수 용이: 예를 들어 기둥에 문제가 생기면 기둥세우기() 함수로 가면 됨

// 3번째 장점
// 재사용성: 새로운 건물을 세울 때, 똑같은 함수를 다시 사용하면 됨

// 함수의 장점
// scope 변수가 다른 변수를 침범하지 못하게 보호해주는 보호막 같은 것.


// 이렇게 선언하면 인부들이 투입된 상태는 아닌 것. 
// 실제로 이대로 일을 해라! 하는 것은 '호출'을 해야 함.
// 이 부분은 '정의'부분 임.
function 땅다지기(삽, 인원){ // '삽'과 '인원'은 파라미터 (파라미터는 선언할 때)
      // 기능
      console.log(`${삽}개의 삽을 가지고 ${인원}명이 땅을 다진다!`)
      return '다져진 땅'  
      // return은 해당 함수가 실행되면 반환하는 값 전달
      // 함수 내부에서 return 구문을 만나면 해당 함수는 '종료' 됨
}

땅다지기(10,30) // '10'과 '30'은 아규먼트 (실제로 값을 넣는 것)

[중요 포인트] '파선아실' 파라미터는 선언 (파라미터 = 매개변수) 아규먼트는 실제 값 (아규먼트 = 전달인자,인수)

함수의 종류

함수 선언문

지정된 매개변수(parameter)를 갖는 함수를 정의

[구문]

function 함수이름 (매개변수) {   
     [함수가 수행하는 작업] 
}


function sum(x, y) {
    return x + y;
}

sum(1, 2);  // result: 3

함수 표현식

함수를 다른 변수에 할당하여 정의하는 방식 (= 함수를 변수에 넣는 것)

function sumXY = function (x, y) {
  return x + y;
};
console.log(sumXY(10, 20));  // result: 30

화살표 함수

function 키워드를 화살표 기호로 대체하여 표현
화살표 함수는 선언 시 제목을 정할 수 없기 때문에 표현식으로 사용해야 함
```
// 1. return문만 있는 경우
function sum(x, y) {
  return x + y;
}
```

// 위 함수를 화살표 함수로 작성하면 아래와 같음 let sum = (x, y) => x + y

// 2. 함수의 기능 + return이 있는 경우 function sum(x, y) { let z = x + y; console.log(z) return z; }

// 위 함수를 화살표 함수로 작성하면 아래와 같음 let sum = (x, y) => { let z = x + y; console.log(z) return z; }

// 3. 인자가 하나인 경우 function pow(x) { return x * x; }

// 위 함수를 화살표 함수로 작성하면 아래와 같음 let pow = x => x * x; let pow = (x) => x * x;





### 즉시 실행 함수
- 함수를 '정의'함과 동시에 즉시 실행하는 방법
- 전역변수 충돌을 피하기 위해 초기화 코드 부분에서 많이 사용 됨
```javascript
(function () {
  console.log('즉시 실행!')
})()

전역변수 , 지역변수

전역변수(Global Variable)
- 함수 밖에서 선언된 변수
- 프로그램 전체에서 접근 가능

지역변수(Local Variable)
- 함수 내에서 선언된 변수
- 지역변수는 해당 함수 내에서만 유효하며, 다른 함수나 전역 스코프에서는 접근 불가

// 1. 전역변수
let a = 10; // 전역변수
function test() {
  console.log(a)
}
test()  // result: 10


// 2. 지역변수
let a = 10
function one() {
  let a = 100 // 지역변수
  function two() {
      function three() {
          console.log(a)
      }
      three()
  }
  two()
}
one()  // result: 100

// 자신의 공간에 해당 변수가 없으면 상위 공간에서 찾음
// 못 찾으면 error

[멋사] 프론트엔드 스쿨 7기 학습 230802

Wed, 02 Aug 2023 13:44:02 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🟢 Javascript Type

문자열(String)

.replace()
- 문자열 안에서 일치하는 첫 번째 문자열을 찾고, 대체하여 새로운 문자열 반환
- "첫 번째 인자는 찾아야 할 문자열", "두 번째 인자는 대체할 값"
- / /g g플래그를 사용하면 일치하는 모든 부분 대체 가능

.includes()
- 문자열에서 특정 부분 문자열이 포함되어 있는지 여부를 판별
- 불리언(boolean)값을 반환하며, 찾고자 하는 부분 문자열이 포함되어 있다면 true, 없으면 false

.split()
- 문자열을 특정 구분자를 기준으로 분리하여 배열로 반환 (=쪼개다)
- .split(separatior, limit) 형태로 사용
- separator: 문자열을 분리할 구분자(delimiter)
- limit(선택): 반활할 배열의 최대 길이 지정

.trim()
- 문자열 앞 뒤의 공백 제거

.padStart()
- 자릿수에 맞춰 값을 시작 부분부터 채움
.padEnd()
- 자릿수에 맞춰 값을 끝 부분부터 채움

.concat()
- 하나 이상의 문자열을 기존 문자열에 연결하여 새로운 문자열 생성

숫자형(Number)

숫자를 처리하기 위해 고안된 자료형
배정밀도 64비트 부동소수점 형식을 따름
- 배정밀도: 숫자 하나를 표현하는데 64비트 용량 사용
- 부동소수점: 부(떠서) + 동(움직이다) 즉, 소수점을 이동시켜면서 숫자를 표현

산술 연산

단항 연산자
- 일반적인 1+1과 같은건 피연산자가 두 개 이므로 '이항 연산자'이고, 피연산자가 하나인 연산자를 단항 연산자 라고 함.

증감 연산자

비교 연산자

숫자를 표현하는 여러가지 기법

Infinity
- 무한대를 의미하는 숫자로, 아주 큰 수를 표현하거나 불가능한 연산(0으로 나누기)이 발생했을 때 그 결과값을 infinity로 취급

10의 거듭제곱 e
- 숫자형 데이터에 알파벳 e를 붙이면 0을 손쉽게 추가할 수 있음

NaN (Not a Number)
- 산술 연산이 불가능한 데이터 타입과 연산을 진행하려고 할 때 반환되는 값

parseInt, parseFloat
- parseInt: 문자열을 정수로 바꿈
- parseFloat: 문자열을 부동소수점 숫자(실수)로 바꿈 / 수가 아닌 문자로 시작하면 NaN 반환

toString
- 숫자를 문자열로 변환. 전달 인자를 통해 원하는 진수로 표현 가능

isNaN (Number.isNaN)
- 어떤 값이 NaN인지 판별 (숫자가 아닌지 판별함)
- 숫자로 판별되지 않으면 true, 숫자로 판별되면 false
- ES6 추가 도입: Number.isNaN (사용 권장)

Math
- Javascript가 기본적으로 가지고 있는 Math 객체를 이용하면 좀 더 유용한 여러 연산 가능

논리 자료형(Boolean)

Boolean 타입은 true 또는 false 값 중 하나를 가지며, 주로 조건문(if)의 결과값으로 사용
true(참, 1), false(거짓, 0)

논리 연산자

Boolean 값을 가지는 피연산자를 대상으로 하는 연산자

논리곱 (&&, and) 연산자
- 두 개의 피연산자가 모두 'true' 일 때만 'true' 반환
- 그 외에는 'false' 반환

논리합 (||, or) 연산자
- 두 개의 피연산자 중 하나 이상 'true' 일 때 'true' 반환
- 두 개의 피연산자 모두 'false' 인 경우 'false'

논리부정 (!, not) 연산자
- 단일 피연산자를 가지며, 피연산자가 'true' 이면 'false'를 반환하고, 피연산자가 'false'이면 'true'를 반환.
- 즉, 대상의 Boolean(true,false) 값을 부정하는 것

할당 연산자

오른쪽 피연산자의 값을 왼쪽 피연산자에 할당
기본적인 할당 연산자는 오른쪽 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(=)

삼항 연산자

세 개의 피연산자를 받는 유일한 연산자
주어진 조건에 따라 두 값 중 하나를 반환함
구문 (조건식) ? (참일 경우 실행되는 표현식) : (거짓일 경우 실행되는 표현식);

[멋사] 프론트엔드 스쿨 7기 학습 230801

Tue, 01 Aug 2023 14:42:55 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🟨 Javascript

Javascript를 사용하는 방법

HTML 파일 내부 삽입

HTML 태그 내 삽입

script 태그를 통해 삽입

HTML 파일 외부 삽입

외부파일(.js)로 저장하고 로드
```
  
```
Javascript 연습 (브라우저 콘솔창)
about:blank 페이지 접속
브라우저 콘솔창 열기: 크롬 브라우저는 Ctrl + Shift + i 버튼 클릭 시 열림

아래 예시 콘솔창에서 확인해보기!




  javascript console

🔵 자주 사용하는 console 종류

console.clear()

이전에 기록된 로그 메시지, 오류, 경고 및 기타 콘솔 출력 모두 제거

console.dir()

객체의 속성들을 log로 출력하는데 사용

각 속성의 값이나 타입에 대한 정보도 함께 표시됨

const person = {
name: '멋쟁이사자',
age: 30,
address: {
  city: 'New York',
  country: 'USA'
}
};

console.dir(person);

>![](https://velog.velcdn.com/images/chance_777/post/866b9185-268c-442e-8034-7119c18852fd/image.png)





### console.table()
- Javascript에서 배열이나 객체의 내용을 테이블 형태로 콘솔에 출력
- 구조적인 데이터를 더 쉽게 시각화하고 분석할 수 있음
```javascript
let data = {a:1, b:2, c:3}

console.table(data)

console.group()

콘솔 출력을 그룹화하여 복잡한 코드의 실행 흐름을 시각적으로 파악하고, 로그를 논리적으로 묶어서 표시할 수 있음

console.group('TF');
      console.log('사자/팀장');
      console.log('호랑이/팀원');
      console.log('코끼리/팀원');
      console.groupEnd();

      console.group('Sub');
      console.log('거북이/팀장');
      console.group('Sub-1');
      console.log('토끼/팀원');
      console.log('다람쥐/팀원');
      console.groupEnd();

console.error/warn/info

console.error ('에러발생')
console.warn ('경고발생')
console.info ('정보')

🟣 변수

변수는 '변할 수 있는 수', '변할 수 있는 정보'를 뜻 함
데이터를 보관할 공간에 데이터가 무엇인지 이름을 붙이는 포스트잇 같은 역할

변수 선언

변수는 선언하고, 할당하고, 사용할 수 있음
변수는 '변할 수 있는 수' 이므로, const를 제외하고 지정된 값을 계속 바꿀 수 있음

변수명

변수 이름은 $, _ 를 제외한 공백, 특수문자, 반점(,). 온점(.), 물음표(?) 등..사용 할 수 없음
첫 글자는 숫자가 될 수 없음
대소문자 구별
예약어(let, const, var, if, else 등)가 쓰일 수 없음.

let과 const 알고 넘어가기! let : 재할당이 가능한 변수를 선언할 때 사용 const : 재할당이 불가능한 상수를 선언할 때 사용

블록 스코프(block scope)

여러 줄의 코드를 하나로 묶어주는 단위인 블록( { } ) 이 있음
그런 블록 안에서만 유효한 코드의 범위를 블록 스코프라고 함

🟢 Javascript Type

'자료형'이라는 뜻으로, 변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해 사용 함
ex) 1234와 같은 숫자는 number type으로, '가나다'와 같은 문자는 string type으로 나누어 각각의 데이터 형에 맞는 여러가지 기능 지원

Javascript Type의 종류

원시타입
- 값 변경 불가하며, 참조가 아닌 실제 값 자체가 변수에 저장됨
- string, number, boolean, undefined, symbol, null

참조타입(객체(Object))
- 원시 타입과 달리 값을 직접 포함하지 않고, 객체의 주소(메모리 위치)를 참조하여 변수에 할당하는 방식
- 객체, 배열, 함수, 정규표현식

문자열(String)

작은따옴표( ' ), 큰따옴표( ' ' ), backtick ( ` ) 으로 둘러싼 일련의 문자
문자열은 순서가 있으며, 0부터 시작하고 띄어쓰기도 문자로 취급함.

.length
- 문자열의 길이

.toUpperCase()
- 대문자로 변환

.toLowerCase()
- 소문자로 변환

.indexOf()
- 문자열 안에 존재하는 특정한 문자를 검색하여 문자의 인덱스 반환 문자열 안에 검색하고자하는 문자가 존재하지 않으면 -1 반환

.search()
- 정규 표현식을 사용하여 문자열 검색 가능하며, g플래그 기능을 사용하여 전역 검색 가능

.slice
- 문자열의 일부분을 잘라냄
- 시작 인덱스와 종료 인덱스를 인자로 전달
- 종료 인덱스 바로 직전 (-1)까지 잘라냄
- 음수 인덱스를 허용하고, 음수 값은 문자열 끝에서부터 추출함

.substring
- 시작 인덱스부터 종료 인덱스 바로 직전(-1)까지 잘라냄
- 음수 값은 0으로 처리되며, 'start'가 'end'보다 큰 경우 자동으로 위치를 바꿔 처리함

[멋사] 프론트엔드 스쿨 7기 학습 230731

Mon, 31 Jul 2023 14:43:50 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🌃 CSS 실무 테크닉

반응형 이미지

이미지 포맷의 종류

GIF(Graphics Interchange Format)
- 256색의 컬러만 표현 가능하여 선명하지 않음
- 용량이 작음
- 투명 표현 가능(투명도는 조절 불가)
- 그림자 표현 불가능
- 애니메이션 처리 가능

JPG/JPEG (Joint Photographic Expert Group image)
- 화소가 매우 높음
- 용량이 작음
- 투명 처리 불가

PNG (Portable Network Graphics)
- 웬만한 컬러는 모두 표현 가능
- 투명 처리 가능
- 용량이 큼

SVG (Scalable Vector Graphics)
- 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능

WebP (Web Picture Graphics)
- JPEG 이미지에 비해 용량이 70% 수준으로 낮음
- 더 뛰어난 색상을 지원하는 포맷
- PNG처럼 투명도 표현 가능
- GIF처럼 애니메이션 표현 가능
- 아직 지원하지 않는 브라우저가 많기 때문에 브라우저 지원 여부 확인 필수

AVIF (AV1 Image File Format)
- WebP와 성능 같으며, JPEG 이미지에 비해 50% 수준으로 낮은 용량을 자랑하는 차세대 이미지 포맷
- 아직 지원하지 않는 브라우저가 많기 때문에 브라우저 지원 여부 확인 필수

image 포맷 별 브라우저 지원 여부 확인
- https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif_image

반응형 이미지 만들기

width: 100%; -화면 너비(viewport)가 바뀌면 이미지 사이즈도 함께 움직임. 단, 이미지가 너무 커지면 화질이 깨질 수 있음

max-width: 100%; -그냥 width와 차이점은 원본 사이즈를 지킴. 이미지가 깨지면 안될 경우 max-width 사용

반응형 백그라운드 이미지

단축속성

background: url("이미지 링크") center /cover no-repeat;
background-position: center; -중심축을 중앙에 위치함으로써 반응형 효과를 줄 수 있음

background-size: cover; -화면을 가득 채움. 반응형으로 조절되지 않으며 컨테이너를 완전 덮어버림. -빈 공간, 여백없이 가득 채움. -이미지가 짤려도 괜찮으니 일단 가득 채우겠다는 성질 -만약, 중심축을 바꾸게 된다면 반응형처럼 효과를 줄 수 있음

background-size: contain; -원본 이미지 자체를 온전히 보전하려는 특성을 가지고 있음 -빈 공간, 여백이 생기며 짤리는 부분없이 모든 이미지를 보존한 상태에서 반응형으로 컨테이너를 채우려고 하는 것 -Logo 혹은 icon 처럼 이미지가 짤리면 안되는 경우에 contain사용

반응형 동영상

동영상 상식

브라우저가 지원하는 비디오 포맷 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers

video 속성
- preload = "none", "auto": 페이지 로드 시, 영상을 미리 로드할지 말지 결정
- poster: 비디오를 내려받을 동안 혹은 영상을 재생할 때까지 표시할 이미지 지정
- controls: 브라우저가 재생에 필요한 컨트롤러를 제공할지 지정
- autopay: 파일 다운로드가 완료되면 자동으로 재생될지 지정
- muted: 음소거
- loop: 비디오가 끝나고 반복 재생할지 지정

반응형 동영상 만들기

반응형 이미지와 동일하게 width, max-width를 이용하여 반응형으로 적용 가능

💜 Bootstrap

CSS 라이브러리 -'라이브러리'란?
- 함수의 집합 or 코드의 집합
- 누군가 만들어 놓은 것을, 내가 필요할 때 가져다 사용할 수 있음 = 종합 공구세트

반응형 사이트를 구축하기에 최적화 되어있음
Bootstrap4와 Bootstrap5의 가장 큰 차이는 jQuery가 없어졌다는 것

적용 방법

Bootstrap 사이트 접속 https://getbootstrap.com/
Download 클릭하여 작업 환경에 맞게 설치 (실습은 CDN으로 진행) !codepen[CreateSong/embed/yLQGQYw?default-tab=html%2Cresult]

그리드 시스템

반응형 웹 디자인을 구현할 때 사용되는 레이아웃 시스템
웹페이지를 일련의 열과 행으로 분할하여 콘텐츠를 쉽게 배치하고 정렬할 수 있음
그리드 시스템은 12개의 열로 구성되어 있으며, 이 열들을 조합하여 원하는 레이아웃을 만듦 !codepen[CreateSong/embed/zYMyMZG?default-tab=html%2Cresult]

부트스트랩을 잘 활용하면 효율적으로 개발 할 수 있고, 생산성이 매우 향상될 것 같다. 특히 '그리드 시스템'이 가장 핵심이라고 강조해주셨는데, 개인 실습 할 때 부트스트랩도 다양하게 활용해보도록 하자!

[알쓸아지] git ignore 개념과 사용 방법

Sun, 30 Jul 2023 09:52:09 GMT

git ignore에 대해 알아보자

🙄 git ignore란?

ignore 사전적 의미: 무시하다, 못 본 체 하다.
사용자가 원하지 않는 파일,폴더들을 git 버전 관리에서 제외하겠다.

git ignore 사용하는 이유?

보안 및 개인정보 보호
비밀번호, 인증 토큰, API 키 등과 같이 보안에 민감한 정보가 포함된 파일
임시 파일 및 로그 파일
개발 시스템에서 발생하는 임시 파일이나 로그 파일은 git저장소에 저장할 필요가 없으므로, 이러한 파일들을 무시하여 저장소 관리를 깔끔하게 유지할 수 있음
혹여나 발생할 수 있는 데이터 충돌로 인한 손실 방지
내가 작업하는 공간에는 필요하지만 원격 저장소에는 제외하고 싶은 경우

쉽게 말해, git ignore는 "남에게 보여주고 싶지 않은(혹은 보여주면 안되는) 내용과 불필요한 내용들을 push할 때 제외하는 것"

git ignore 사용 방법

git ignore를 설정할 수 있는 방법은 다양하지만, 간단하게 설정할 수 있는 방법은 아래 사이트에 접속하여 프로젝트에 맞는 .gitignore 파일을 생성 해준다. https://www.toptal.com/developers/gitignore
현재 사용중인 개발 환경을 검색하여 추가하고, 생성하면 됨 예시) windows(운영체제), Visual Studio Code(개발환경) 등.. 예외) 검색해도 안나오면 없는 것
위 사이트는 자신의 프로젝트 환경에 맞는 git ignore파일을 만들어 줌

git ignore 적용 방법

위 사이트에서 생성된 git ignore를 에디터에 적용하는 방법

.git이 있는 디렉토리에 .gitignore파일 생성 (=프로젝트 최상위 위치)
.gitignore파일 안에, 위 사이트에서 생성된 내용 복사 붙여넣기

추가로 ignore 하고 싶은 파일 or 폴더가 있는 경우 아래와 같이 작성 후 저장

예를 들어 test.txt파일과 test 폴더를 ignore 한다고 가정했을 때,
무시할 파일 및 폴더는 아래와 같이 작성.

파일 무시

test.txt

다음과 같은 확장자는 전체 무시

*.text *.exe *.zip

폴더 무시

test/

- 저장 후, ignore할 파일, 폴더명이 **회색처리**된 것을 확인
- 그리고  add > commit > push




## 🚨 이미 git에 올라간 파일,폴더인 경우?
- git의 관리를 받고 있던(commit & push 된 것들) 파일이나 폴더는 .gitignore 파일에 작성하고 add > commit > push 하여도 **ignore(무시) 되지 않음**

- 이런 경우, 기존에 가지고 있는 cache를 제거해야 함

파일 이라면

git rm --cached test.txt

전체파일 이라면

git rm --cached *.txt

폴더 라면

git rm --cached test/ -r

- 다시 말해, 
이미 git에 올라간 파일, 폴더인 경우 위 명령어(캐시 제거)를 먼저 실행하고나서 .gitignore파일을 commit해줘야 ignore됨!

### git rm에 대해 더 알아보자
- `rm`: remove(제거하다)
  - `git rm -r`: 원격 저장소와 로컬의 파일 모두 삭제 
  - `git rm -r --cached`: 원격 저장소에서만 파일이 삭제되고, 로컬의 파일은 그대로 유지 
- `-r`: recursive(재귀적)의 약자. 하위 디렉토리를 포함하여 모든 내용 삭제





[참고]
https://codinglevelup.tistory.com/120
https://okeybox.tistory.com/338
https://kcmschool.com/194
https://webstudynote.tistory.com/114

[멋사] 프론트엔드 스쿨 7기 학습 230727

Fri, 28 Jul 2023 05:15:34 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

💛 일단 만드는 JavaScript

멋사 테킷 강의는 강의 화면에서 바로 실습해볼 수 있는 점이 굉장히 신기했고, 자체 미니 브라우저와 콘솔 창을 통해 결과도 바로 확인할 수 있어서 편리했다.

[JS기초 클래스]

JavaScript 사용 방법
로또 번호 추첨기
글자수 계산기
기념일 계산기

1. JavaScript 사용 방법

1-1. JavaScript 적용 방법

내부 연결(html 파일에 직접 작성)

body 태그가 끝나는 지점 바로 위에 작성하는 경우가 많음


JavaScript 사용 방법


- 외부 연결(js파일 연결)

JavaScript 사용 방법

```

1-2. 세미콜론(;)과 주석

세미콜론(;) : 하나의 명령어가 끝났다는 의미
주석: 컴퓨터는 읽을 수 없는 글
- 용도: 코드 설명을 적어줄 때, 특정 코드를 동작 시키지 않고 싶을 때
- 사용방법: // 한 줄 주석 , /**/ 여러 줄 주석

1-3. 데이터 상자 만들기

프로그래밍에서는 데이터 값들을 이름표가 붙은 어떤 상자에 담아서 이게 어떤 의미인지 쉽게 알 수 있도록 해줌 = 변수(variable)

var 변수명 = 값;

var name = '홍길동';
var age = 30;
var eyesight = 1.2;
var single = true;
// 각 데이터 마다 특징이 다른데, 이것을 '자료형' 이라고 함
// 문자열(String) : "홍길동", '홍길동'
// 숫자(int, float) : 정수형(int) - 30 , 실수형(float) - 1.2
// 불(bool) : true, false (진실인지 거짓인지)
// typeof 를 통해 해당 데이터의 자료형이 무엇인지 확인할 수 있음
(ES6 최신문법)
let 변수명 = 값;
const 변수명 = 값;

2. 로또 번호 추첨기

2-1. 1번~45번 공 중에서 6개 뽑기

공 1개부터 뽑아보자!
- 기본- Math.random(); ⇒ 0이상~1미만 실수(float) , 임의의 숫자를 뽑을 수 있음
- 응용- Math.random() * 45 + 1; ⇒ 1이상~45미만 실수(float)
- 응용2- parseInt(); ⇒ 소수점은 버리고 정수로 변환

2-2. 배열(Array)

로또 번호는 6개의 숫자로 이루어짐(var ball1, var ball2, var ball3..)
만약 수 천개의 변수를 줘야할 때, 코드를 일일이 다 짜기 어렵기 때문에 배열(Array)을 사용함

배열(Array): 마치 서랍장을 사용하는 것 처럼, 하나의 변수 안에 여러 개의 값들을 넣어줄 수 있음
- var lotto = [1,2,3,4,5,6];
- 불러올 위치의 값은 index라고 하며, index는 0부터 시작함
- .push() → 배열의 끝 부분에 새로운 요소 추가

2-3. 반복문 for

반복되는 문법을 효율적으로 사용
- 종류: for, while

// for문 기본 문법
for (시작; 끝; 증가) {
   반복하려는 코드
}

/* i가 0부터 반복하려는 코드를 한번씩 실행할때마다 i가 1씩 증가하게 되고,
계속 코드가 실행되고 증가하고 반복하다가 i가 6이 되면, '끝' 조건이 깨지면서 반복문 종료 */
for (var i = 0; i < 6; 1++) { 
        반복하려는 코드
}

var lotto = [];
for (var i = 0; i < 6; i++) {
    lotto.push(parseInt(Math.random() * 45 + 1));
  }
    document.write(lotto);

2-4. 조건문 if

중복된 값 없애기
조건문 → '만약' lotto num이 중복이 아니라면 .push()

// if 조건문 기본문법
if (조건) {
  참 일 경우
}

//만약 중복이 아니라면 .push()
var lotto = [];
        for (var i = 0; i < 6; i++){
            var num = parseInt(Math.random() * 45 + 1);
            if (lotto.indexOf(num) == -1) {
                lotto.push(num)
            }
        }
        document.write(lotto);

2-5. 반복문 While

for 문은 특정 횟수만큼 어떤 코드를 동작시킬 때 사용된다면, while문은 특정 조건까지 코드를 반복하는 조건문

.length: 배열의 길이

// while문 기본 문법
while (언제까지 반복할지 조건) {
  반복하려는 코드    
}

var lotto = []; while (lotto.length < 6) { var num = parseInt(Math.random() * 45 + 1); if (lotto.indexOf(num) == -1) { lotto.push(num) } } document.write(lotto);




### 2-6. 오름차순
- 숫자가 점점 커지는 오름차순을 해보자
```javascript
.sort() //배열 값 정렬

var lotto = [1,2,3,33,22,11];
lotto.sort(); //사전 순으로 정렬되기때문에 결과가 1,11,2,22,3,33 으로 나옴
document.write(lotto);


var lotto = [1,2,3,33,22,11];
.sort((a, b)=>a-b) //숫자 오름차순 정렬 (b-a)는 내림차순
document.write(lotto);


var lotto = [];
        while (lotto.length < 6) {
            var num = parseInt(Math.random() * 45 + 1);
            if (lotto.indexOf(num) == -1) {
                lotto.push(num);
            }
        }
        lotto.sort((a,b)=>a-b); //반복문이 끝나는 지점에 작성
        document.write(lotto);

2-7. 로또 번호 추첨기

!codepen[CreateSong/embed/bGQQNbV?default-tab=html%2Cresult]

3. 글자수 계산기

DOM

Document Object Model -웹 화면을 구성하는 html코드를 쉽게 접근할 수 있도록 만든 모델
자바스크립트는 DOM을 활용하여 화면을 구성하는 모든 것들에 접근할 수 있고, 원하는대로 바꿀 수 있다.

3-1. document. / console.log

document. -DOM의 진입점 역할을 수행. 화면에 html문서를 가져와서 수정할 수 있음
console.log -콘솔 화면에 출력됨 (원하는 값이 맞는지 확인하기 위함)

3-2. 문자열의 길이

.length: 문자열의 길이를 나타냄

자기소개
안녕하세요.

3-3. .innerHTML

자바스크립트 내에서만 숫자를 가지고 있을게 아니라, 우리가 보는 화면에 몇 글자가 있는지 표시할 수 있고, 원하는 위치에 넣어줄 수 있음

자기소개
안녕하세요.
(0/200)

3-4. function

긴 코드를 여러 번 사용하지 않고, function 함수(명령 모음)를 이용하여 긴 명령어를 여러 번 쓰지 않아도 됨.
```
// function 기본식
function 함수이름() {
명령어1;
명령어2;
}
```

자기소개

(0/200)




### 3-5. 이벤트 & 이벤트 핸들링
- 글자를 쓸 때마다 자동으로 글자 수를 세려면 어떻게 해야 할까?
  - 키보드를 누를 때 마다 글자 수 세기
- 이벤트: 마우스 클릭, 키보드 누름, 값 변화, 페이지 로딩 등..
- 이벤트 핸들링: 이벤트가 발생하면 '____해라' 라는 의미
- **키보드를 누를 때 마다(이벤트) 글자 수를 세주어라(이벤트 핸들링)**
```javascript
// 기본 문법: 사용할 태그 안에 이벤트=이벤트핸들링 작성



자기소개
안녕하세요.
(0/200)

3-6. .substring

글자수가 넘었을 때, 더 이상 작성되지 않게 하려면?
- 200자 넘으면(~하면 조건문if) 더 이상 안써지도록(200글자 이후는 자르기)

.substring(0, 200) → index 0에서부터 200까지 자른다. (index에는 띄어쓰기도 포함 됨)

자기소개
  안녕하세요.
  (0/200)

/* 함수 counter선언 변수 content = id jasoseol 안의 값 만약, content가 200글자가 넘어가면 content 안의 글자를 200글자까지 잘라줘 200글자까지 자른 content는 id jasoseol의 content가 될거야

id count에는 content의 입력한 글자수와 200글자 제한 이라는 표시가 나타나게 해줘

counter(); */


!codepen[CreateSong/embed/NWEEYeK?default-tab=html%2Cresult]






## 4. 기념일 계산기

**객체(Object) 알아보기**
- 배열(Array)처럼 여러 개의 값을 담는 자료형
![](https://velog.velcdn.com/images/chance_777/post/1a84dbdf-0aeb-4861-8fc4-67209031e07f/image.png)
- 객체로 만들어진 정보가 필요할 때, 객체에 접근해서 그 값을 가져오는 방법?
  - 객체.키;
```javascript



    
    객체(Object)


    객체(Object)

4-1. Date 객체

자바스크립트에는 이미 많은 내장 객체가 있으며, Date는 그 중 하나
```
// var now = new Date();
```

Date 객체

```

4-2. 만난 지 0일째


        갑돌♥갑순
        0일째
        2022.6.30

4-3. 기념일까지 남은 날짜?

4-4. 1000일은 언제인가?

4-5. 기념일 계산기 완성

!codepen[CreateSong/embed/KKrroYV?default-tab=html%2Cresult]

[멋사] 프론트엔드 스쿨 7기 학습 230726

Wed, 26 Jul 2023 11:49:34 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🌊 Tailwind

＊utility-first 목적으로 만들어진＊CSS 프레임워크
- 미리 정의된 CSS의 특성들을 class를 통해 불러와 적용시킴
CSS 문서로 가지 않고, 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만듦

＊utility-first란? -미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것

＊CSS 프레임워크란? -웹 디자인을 빠르고 쉽게 구축할 수 있도록 미리 개발된 완성형 디자인을 가져다 사용할 수 있는 도구

장점

클래스 이름 고민하지 않아도 됨
속도와 생산성 향상
일관성있는 디자인
유지보수 용이성
반응형 디자인

단점

HTML 파일 크기 증가
기존 CSS코드와 충돌

✍🏻 Tailwind 실습

Tailwind 미적용 - HTML/CSS

!codepen[CreateSong/embed/mdQzJym?default-tab=html%2Cresult]

Tailwind 적용 - HTML

!codepen[CreateSong/embed/mdQzJym?default-tab=html%2Cresult]

[코드 해석]


 



Hello, World! 


This is a red bold text.




  This is a wavy underline blue text.

[느낀 점] html 작성과 동시에 표현하고자 하는 스타일과 디자인 요소를 class에 작성하여 바로 적용할 수 있는 점이 굉장히 편리하게 느껴졌다. 다만, 클래스가 많아진다면 가독성 측면에서는 조금 아쉬울 것 같다는 생각이 든다. 더 사용해보고 경험해보아야 장단점을 확실히 느낄 수 있겠다.

[멋사] 프론트엔드 스쿨 7기 학습 230725

Tue, 25 Jul 2023 09:52:40 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🐱‍🏍 CSS 실무 Tip

1. 커스텀 input, select 박스

디자인적인 개성을 주기 위해 실무에서는 input 요소, select 박스를 브라우저 스타일과 다르게 표현함
input, select 박스를 커스텀하는 이유?
- 시각적인 디자인 개선
- 일관성 유지
- 사용자 경험 개선
- 접근성 향상

input check 박스 커스텀 실습

스타일링이 까다로운 input 요소를 화면에서 숨기고, label요소를 연결하여 스타일링

!codepen[CreateSong/embed/MWzqrMx?default-tab=html%2Cresult]

2. IR(Image Replacement) 테크닉

디자인적으로 보이진 않지만, 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법
태그에는 alt=""속성으로 이미지에 대한 설명이 가능하지만, background-image에는 설명을 줄 수 없기 때문의 별도의 작업 필요

!codepen[CreateSong/embed/OJaoQXZ?default-tab=html%2Cresult]

[카카오 IR 테크닉 중에서..]

중요한 이미지가 off 되었을 때, 대체 텍스트를 보여줌
- 사용자의 네트워크가 끊기거나, 이미지가 저장되어있는 서비스가 다운되거나 등등의 이유로, 이미지에 대한 설명을 보여줘야 할 때 대체 텍스트를 보여줌
  - 예시) daum '검색' 돋보기 이미지를 지우기 해보면 '검색'이라는 텍스트가 나옴
```
.ir_wa{
display:block;
overflow:hidden;
position:relative;
z-index:-1;
width:100%;
height:100%
}
```

daum '쇼핑'은 텍스트가 '쇼핑'임에도 불구하고, ir_wa를 사용한 이유?
- background-image로 적용되어있기 때문
- 텍스트에 똑같은 텍스트 이미지를 적용하는 이유는?
- 폰트마다 두껍게, 얇게 보이는 경우가 많기 때문에 일관성을 위해 이미지로 사용하는 것 (=이미지 폰트)

숨김처리 관련 참고하면 좋은 자료 https://mulder21c.io/screen-hide-text/

3. CSS Sprite 기법

여러가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법
이미지 편집은 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집함
- https://www.toptal.com/developers/css/sprite-generator/
단점: 이미지 교체 어려움, 이미지가 추가될수록 용량이 무거워짐
태그에 쓰이는 이미지들은 sprite 이미지로 쓰이지 않음
- why? 항상 동적으로 바뀌는 이미지이기 때문

4. 레티나 디스플레이 대응법

레티나: 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플의 LCD제품의 브랜드 이름
- PPI(Pixel Per Inch): 1inch에 몇 개의 픽셀이 들어있는가의 비율
  - 고해상도 디스플레이 기술
- 더 많은 픽셀을 화면에 표시하여 뚜렷하고 선명한 이미지 제공

문제점 (What) 레티나 디스플레이에서 종종 이미지가 흐려져 보이는 경우가 있음

원인 (Why) 레티나 디스플레이로 넘어오면서 논리픽셀(css에서 표현하는 화소의 기본 단위)과 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이 발생

해결방법 (How) 원본 이미지의 가로세로 2배 이미지를 하나 더 생성한다. 피그마에서 디자인 이미지를 Export할 때 x2 이미지로 저장

*만약, 저장한 아이콘들을 Sprite로 만들 때는 padding값도 2배를 줘야 함 아이콘의 position값은 절반 줄인 값으로 줘야 제대로 위치해서 나타나게 됨

[멋사] 프론트엔드 스쿨 7기 학습 230724

Mon, 24 Jul 2023 16:07:37 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

✍🏻 HTML & CSS 실습

오늘은 그동안 배웠던 HTML/CSS 학습 내용을 바탕으로 '밴딩머신'을 만드는 실습을 진행하였다.

[작업 순서]

1. 문서 구조화

피그마 디자인 파일을 참고하여, 전체적인 '문서 영역 나누기' = HTML 문서 구조화
큰 영역부터 구조화하고 그 다음 세부 영역 짜기

2. HTML 작성

'문서 영역 나누기' 참고하여, HTML파일 작성하기
*중요: 반응형 디자인, 브라우저 호환성, 사용자 경험(UX), 웹 접근성 등을 고려하여 작성할 것
- 기획, 디자인 의도를 정확히 파악하는 것이 중요하기 때문에 디자이너와 원활한 커뮤니케이션과 협업은 굉장히 중요함!

3. CSS 초기화

브라우저의 기본 스타일을 초기화하여 일관성 있게 만들기 위함
작성한 HTML문서 안에 있는 요소만 초기화 해도 되지만, normalize.css (CSS 리셋 라이브러리)를 사용하기도 함
- https://necolas.github.io/normalize.css/
바로 CSS파일에 적용할 수 있는 에릭 마이어의 reset CSS
- https://meyerweb.com/eric/tools/css/reset/

4. HTML구조 순서대로 작업

웹 페이지 최상단 부터 순서대로 작업 진행
예시) 밴딩머신 실습
- 로고 이미지 삽입 및 위치 조정
- 메인 section 레이아웃 나누기
- section1부터 차례대로 작업하기
*중요: 반복되는 항목 파악 (button, list, box 등..)
- 반복 항목에는 공통된 class값을 작성하여 재사용성, 유지보수 등 효율적인 관리가 가능하다.

HTML / CSS 마크업 검사 습관화 하기!

HTML 마크업 검사 https://validator.w3.org/
CSS 마크업 검사 https://jigsaw.w3.org/css-validator/

[소감 및 느낀점] 처음에는 어디서부터 어떻게 손을 대야하나..막막하기만 했다. 강의 중간중간 과제, 실습을 통해서 계속 시도해보고, 따라해보고, 구조화 연습을 하다보니 이제 조금씩 구조가 보이는 것 같다. "아는 만큼 보인다." 요즘 개발 공부하면서 뼈저리게 느끼는 점이다. 아는 만큼 보인다... 아직은 실눈 뜬 것 마냥 넓게 보이진 않지만, 언젠가 큰 눈을 뜨고 많은 것을 볼 수 있는 그날까지 꾸준히 학습하고 연습해서 시야를 넓혀가야겠다.

[멋사] CSS 가운데(중앙) 정렬 방법 복습

Sun, 23 Jul 2023 11:05:11 GMT

헷갈리거나 이해가 잘 안되었던 부분 복습하기!!

[들어가기 전..] 멋쟁이사자처럼 FE스쿨 과정 3주 동안 HTML/CSS 과정에 대해 학습하였다. 체득화 해야 할 속성들이 굉장히 많지만, 그 중에서 오늘은 CSS 속성을 활용해 컨텐츠를 가운데(중앙)정렬하는 방법에 대해 복습하고자 한다.

CSS에서 컨텐츠를 정렬하는 방법은 굉장히 다양하다. 그렇다면 다양한 방법마다 "주로 어디에 쓰일까?" 하는 관점으로 복습을 시작해보고자 한다.

CSS 가운데 정렬 방법

1. text-align

text-align: center;
- 텍스트 중앙 정렬
- Element 안의 구성요소가 텍스트, inline 또는 inline계열일 때 수평 방향으로 가운데 정렬하는 방법
- 주로 블록 요소 또는 테이블 셀 상자 내부의 텍스트 가운데 정렬 !codepen[CreateSong/embed/rNQrKKW?default-tab=html%2Cresult]

2. vertical-align

인라인, 인라인 블록 및 테이블 셀 요소의 수직 정렬(블록 요소X)
단, 같은 줄에 인라인 요소가 없으면 해당 속성 적용안됨(상대 적용)
주로 테이블 셀이나 이미지와 같은 인라인 레벨 요소의 정렬에 사용
3. line-height
높이 값을 설정하여 요소를 수직 가운데로 정렬
부모 요소의 높이값과 동일한 높이값을 줘야 수직 가운데로 위치하게 됨
line-height 값은 폰트 사이즈를 포함해서 leading이 차지하는 부분이 합쳐진 총 폰트의 높이
주로 한 줄의 텍스트가 있는 블록 레벨 요소를 정렬할 때 사용

4. margin: auto;

블록 레벨 요소를 수평 가운데로 정렬
부모 요소의 너비를 지정해야 동작함
주로 메인 콘텐츠 컨테이너를 수평 중앙에 둘 때 사용 !codepen[CreateSong/embed/bGQjjGN?default-tab=html%2Cresult]

5. position & transform

position: absolute;는 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정할 수 있다.
- left와 top을 50%로 설정해 중앙에 정렬
- 하지만, position 값만 주게되면 정중앙에 정렬되지 않음
- transform: translate(-50%,-50%);까지 설정해서 정중앙에 위치
transform은 대상의 형태를 변형하는 명령어로, translate는 위치를 조정하는데 사용함
- translate의 첫 번째 값과 두 번째 값은 각각 x축, y축
- -50%라는 값은 대상 요소(h1)의 크기의 절반(50%)만큼을 빼서(-) 이동하라는 의미
다양한 상황에서 유용하게 사용되며, 절대 위치를 이용하여 요소를 가운데로 정렬할 때 많이 활용됨
- 모달 박스 / 팝업 창
- 로딩 스피너
- 배경 이미지 가운데 정렬 !codepen[CreateSong/embed/poQZZqd?default-tab=html%2Cresult]

6.flex

display: flex;를 사용하면 중앙 정렬을 간편하게 할 수 있음
장점: position:absolute;를 쓰기 어려운 환경에 사용하기 적절함
div안에 텍스트를 정중앙에 위치시키거나, 버튼의 이미지를 정중앙에 위치시킬 때 등 절대 위치를 적용하기 힘든 모든 상황에 적절하게 사용 가능 !codepen[CreateSong/embed/bGQjmKy?default-tab=html%2Cresult]

🤔 이렇게는 안될까?

text-align과 flex를 이용해서 텍스트를 box 정중앙에 위치시키기?!

우선, 부모 요소에 display: flex;를 준다.
자식 요소에 text-align: center; (수평 중앙 정렬) 해주고, display: flex;, align-items: center;(수직 중앙 정렬) 해준다. 그렇게 나의 호기심이 불러온 실험 결과는..?? 적용 안 됨❌❌❌

🤷🏻‍♀️ Why??? text-align과 flexbox의 align-items 속성을 같이 사용하여 가운데 정렬하려고 하면, 두 속성의 역할과 적용 대상을 혼동할 수 있다. 이 두 속성은 서로 다른 방향으로 요소들을 정렬하는데 사용되며, 한 속성의 영향을 다른 속성이 덮어쓸 수 있다.

위와 같은 이유로 박스 안에 있는 text를 수평, 수직 정중앙에 위치하고 싶다면
- 자식 요소에도 동일하게 display: flex; justify-content: center; align-items: center; 을 사용하거나,
- text-align: center; line-height: 부모 height 동일하게를 사용하면 된다.

7. grid

place-content: center;를 사용하여 수직,수평 가운데 정렬
- 이 속성은 align-content와 justify-content를 함께 설정하는 단축 속성으로, 수평 및 수직 가운데로 정렬됨
그리드 아이템을 가운데로 정렬하거나, 이미지 또는 콘텐츠를 가운데로 정렬할 때, 반응형 디자인에서 요소들을 가운데로 정렬할 때 많이 사용함 !codepen[CreateSong/embed/dyQjQza?default-tab=html%2Cresult]

CSS 중앙 정렬 참고: https://brunch.co.kr/@skykamja24/514

[가운데 정렬 복습을 마치며...]

복습을 하기 전에는 "가운데 정렬 방법이 엄청 다양하네..😵뭐뭐 있었더라..?" 하면서 가장 기억하기 쉬웠던 margin: auto;만 열심히 적용했었다.. margin: auto;가 적용이 안될 때는 구글링, 챗gpt의 도움을 받곤 했다. 이번 복습을 통해서 가운데 정렬 방법의 종류에 대해 조금 더 명확히 알 수 있었고, 앞으로는 상황에 맞는 가운데 정렬 방법을 사용할 수 있도록 업그레이드 해야겠다!

[복습 소감 요약] 복습 전: "가운데 정렬...margin: auto...." 복습 후: "가운데 정렬에는 이런 방법들이 있구나! 다양하게 적용해보자!"

[멋사] 프론트엔드 스쿨 7기 학습 230721

Fri, 21 Jul 2023 13:55:13 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

👨🏻‍🏫 웹 접근성 특강

웹 접근성 특강 강사님
- 김혜일 님
- 카카오 디지털 접근성 책임자(Digital Accessibility Officer, DAO)

웹 접근성의 중요성

접근성을 고려하지 않으면 누군가는 소외될 수 있다.
우리가 기대하는 즐거운 경험을 누군가는 놓칠 수 있다.
접근성이 없다면, 장애가 없어도 장애가 있는 삶이 될 것이다.
우리는 더 많은 사람들이 다양한 컨텐츠를 즐겁게 누릴 수 있도록,
웹 접근성*을 당연히 알고 있어야 한다.

디지털 & NO 접근성

사회에 참여하는 것을 저해
자기결정권의 침해
- 일상생활 - 식당, 교통, 금융, 의료, 공공서비스, 택배, 안내 등..
- 비장애인: 자아 → 독립적 행동 → 목표달성
- 장애인: 자아 → 보조인 → 목표달성 (본인과 보조인 사이에 노이즈 발생)

접근성 - 대체(Alternavtive)

시각 어려움 - 듣는 콘텐츠
신체 어려움 - 쉬운 조작
청각 어려움 - 보는 콘텐츠

시각 어려움 - 듣는 콘텐츠

[화면 낭독 프로그램] - 스크린 리더

모바일 기기의 IT 보조기술 (Assistive Technology)
iOS
- iPhone, iPad, Mac
- 설정 → 손쉬운 사용 → VoiceOver
- 세 손가락으로 위/아래 쓸기(목록 스크롤), 좌/우 쓸기 (페이지 전환)
Android
- Samsung Galaxy
- 설정 → 접근성 → Talkback
- 설정 → 접근성 → 스크린 리더 → 보이스
- 한 손가락 한 번 탭: 포커스 접근
- 한 손가락 좌/우 쓸기: 이전/다음 초점 이동
- 한 손가락 두 번 탭: 포커스 된 콘텐츠 실행
- 화면 낭독 프로그램 종류
  - 센스리더 (국내 점유율 90%이상)
  - NVDA (무료)
  - JAWS (세계적으로 점유율 높음)

[초점]

초점 이동 크기와 순서도 굉장히 중요함(논리적 순서)
[보이지 않는 텍스트 넣을 때 주의]
visibility: hidden; display:none;
- VoiceOver, Talkback 모두 읽어지지 않음
text-indent: -999px;
- 실제 콘텐츠와 다른 위치에 초점이 접근됨
position:absolute;
- 부모 요소의 블록에 따라 초점이 상단으로 튀는 현상 발생
font-size: 0;
- VoiceOver의 초점이 접근되지 않음
  [자동 재생 금지]
사용자가 손 쉽게 멈춤, 일시정지, 음량 조절 등과 같이 제어할 수 있는 수단 제공
단, 3초 미만의 배경음은 예외 인정
[명확한 지시사항 제공]
지시사항은 모양,크기,위치,방향,색 등에 관계없이 인식할 수 있어야 함
- ex) 파란색 글씨를 입력하세요, 빨간 버튼을 클릭하세요 등..
대명사 보다 고유명사 사용
[사용자 요구에 따른 실행]
라이브러리 aria-live 주의
- 배너 자동 롤링 + aria-live="polite" = 배너를 계속 읽어주며, 무한 음성 출력됨
  [표의 구성 - 행과 열의 제목]
th scope 사용하기
[명도 대비]
텍스트 콘텐츠의 명도 대비 - W3C 기준 참고
비텍스트 콘텐츠의 명도 대비 - W3C 기준 참고

GAAD (세계 접근성 인식의 날)

Global Accessibility Awareness Day (5월 셋째주 목요일)
유명 기업들의 웹 접근성 발표를 볼 수 있음
세계적으로 어떤 컨퍼런스와 움직임이 있는지 참고

나의 코드 한 줄이 한 사람의 일상생활을 바꿀 수 있다.

[멋사] 프론트엔드 스쿨 7기 학습 230720

Thu, 20 Jul 2023 14:06:28 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

📲 반응형 이미지

웹페이지는 다양한 디바이스 환경을 고려해 적절한 이미지를 제공해야 함
네트워크, 메모리, 성능 등을 고려한 다양한 크기의 이미지
- 해상도 전환 문제
화면 크기, 방향 등을 고려한 다양한 레이아웃 이미지
- 아트 디렉션 문제

해상도 전환

크기만 다른 동일한 컨텐츠의 이미지를 보여주고 싶을 때 사용
- 큰 이미지가 필요없는 좁은 화면에서 더 작은 이미지를 제공하고 싶을 때
- 선택적으로 다양한 해상도의 이미지를 고/저밀도 화면에 제공하고 싶을 때

벡터 그래픽 이미지 사용(SVG)

벡터 이미지는 용량도 작고 확대해도 깨지지 않는 장점이 있으나, 그래픽이 복잡해지면 용량이 늘어나게 됨. 보통 간단한 그래픽, 패턴, 인터페이스 요소 등에 적합함

요소에 `srcset`과`sizes`속성 이용하기

srcset: 브라우저에게 이미지 선택권을 위임하는 속성
sizes: 이미지가 차지하게 될 사이즈를 브라우저에게 알려주는 속성

아트 디렉션

연출 방향, 중요한 부분을 자른 이미지를 보여줌
이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여주는 형태의 방법

요소 사용하기
- 브라우저가 고를 수 있는 소스 제공
- src, alt 속성 포함하여 필수적으로 넣어줘야 함
- 요소 중 사용가능한 이미지가 없을 경우 해당 이미지로 적용

🎲 3D 관련 속성

perspective

3D 위치 요소에 원근감을 주기 위해 평면과 사용자 사이의 거리를 결정
값이 클수록 변형이 작고, 값이 작을수록 변형이 커짐
해당 속성은 부모에게 사용하고, 적용 범위는 직계 자식만 가능(자손 적용X)
음수값 사용 불가

perspective-origin

소실점(기본값: 정 중앙)
사용자가 보고 있는 위치(x,y) 결정
해당 속성은 부모에게 사용

transform

요소에 2D 또는 3D 변형 적용

3D 변형과 관련된 method

메소드를 사용하려면 원근감을 표현할 기준을 명시해야 함
perspective()필수
translateZ(z)
z축 거리만큼 이동
rotateZ(z)
z축 기준으로 회전
rotate()와 동일
scaleZ(z)
z축 기준으로 크기를 배율 증감
translate3d(x,y,z)
현재의 위치에서 주어진 x축,y축,z축의 거리만큼 이동
rotate3d(x,y,z,angle)
주어진 각도만큼 x축,y축,z축을 기준으로 회전
scale3d(x,y,z)
크기를 주어진 배율만큼 x축,y축,z축 방향으로 늘리거나 줄임

transform-style

요소에 변형 적용 시, 자식요소에게 적용 여부 설정
flat: 평면에 배치(기본값)
preserve-3d: 3D 공간에 배치

backface-visibility

요소의 뒷면이 사용자를 향할 때 보이게 할지 설정
3D 공간에서는 회전되면 노출 될 수 있음
visible: 뒷면 보임(기본값)
hidden: 뒷면 보이지 않음

[멋사] 프론트엔드 스쿨 7기 학습 230719

Wed, 19 Jul 2023 14:06:35 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

📝 양식(form)

사용자에게 입력받은 데이터를 제출, 전송하기 위해 사용하는 태그

method 속성

입력받은 데이터를 서버에 전달할 방식(HTTP 메서드)

POST

HTTP 요청 본문 내부에 양식 데이터 전송 (URL에 표시 안 됨)
데이터의 길이 제한이 없으며, GET보다 보안성이 높음
브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음
GET
양식 데이터를 action URL과 ?구분자 뒤에 이어 붙여 전송
브라우저에 의해 캐시되어 저장
URL 길이의 제한이 있음(브라우저마다 다름. 약 3000자)
보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식 사용

	POST	GET
전송	양식 데이터를 요청 본문으로 전송	`https://example.com?name=홍길동&age=20`
캐시	X	O
길이제한	X	O
보안	GET 방식보다 높음	취약

name/value

이름/값(name/value)의 짝으로 양식과 함께 전송

action 속성

양식 데이터를 처리할 프로그램의 목적지 URL 지정

autocomplete 속성

이전에 해당 양식의 입력된 값이 있을 경우 자동완성 지정
- 브라우저에 기록이 남아있을 경우 나타남

input

다양한 form에서 사용자가 입력한 정보를 받을 때 사용
input type=" ">

공통 속성

type: input 양식 컨트롤 유형(button, text, email..) name: input 양식 컨트롤의 이름 value: input 양식 컨트롤의 값 autocomplete: on/off 양식 자동완성 기능에 대한 힌트 placeholder: 양식 컨트롤이 비어있을 때 나타나는 내용(입력 힌트 제공) required: 양식 전송을 위해 필수로 입력해야하는 값 disabled: 비활성화 readonly: 수정불가(읽기전용)

button, reset, submit

text / password / url / search / tel

maxlength: 문자수 최대 길이
minlength: 문자수 최소 길이

checkbox / radio

checkbox: 2개 이상 항목 선택 가능
radio: 1개 항목만 선택 가능
checked: 체크 여부

file

파일 지정
accept: 허용하는 파일 유형 지정
multiple: 사용자가 여러 개의 파일을 선택할 수 있음

number

숫자 입력 (화살표 컨트롤 제공)
max: 최대값
min: 최소값
step: 증가값

label

입력란 가까이에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트
input태그와 같은 form요소에 레이블을 붙일 때 사용
- input과 함께 사용해야 서로 연결되었다는 것을 웹브라우저가 알게 됨
- 스크린 리더기에서 입력해야하는 내용이 무엇인지 사용자가 쉽게 이해할 수 있음

for-id를 이용한 연결

아이디

label 안에 input 중첩하여 연결


    아이디

select

옵션 메뉴 제공
multiple: 여러개의 항목을 동시에 선택
size: 한번에 노출되는 항목의 수 조절
required: 선택 필수
disabled: 선택 불가
option
메뉴의 각 옵션 정의
모든 option은 자신이 선택되었을 때 값으로 사용할 value 속성이 필요
- 지정하지 않으면 option 내 텍스트 값을 사용함
selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옴
optgroup
option요소를 optgroup요소 안에 배치하면 드롭다운 내에서 옵션그룹 생성

fieldset

form 관련 요소들을 묶을 때 사용
disabled를 사용하면 모든 자손 컨트롤을 비활성화
legend
그룹의 제목 제공

datalist

사용자가 고를 수 있거나, 혹은 추천하는 선택지를 나타내는 option요소를 담음
input과 select 기능을 합친 개념
사용자에게 기본적으로 선택할 수 있는 옵션을 제공하고, 원하는 값이 없을 경우 다른 값을 입력할 수 있도록 함

textarea

여러 줄의 text를 입력받을 수 있음
text 속성
cols: 입력창의 너비. 문자의 평균적인 넓이를 기준
rows: 기본적으로 보여줄 입력 줄 수
maxlength: 사용자가 입력할 수 있는 문자 최대 길이
minlength: 사용자가 입력해야 할 문자 최소 길이
placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

📝 form 동적 가상 선택자

:enabled, :disabled

활성화 / 비활성화 상태
:read-only, :read-write
사용자가 편집할 수 없는/있는 상태
:checked
input checkbox, radio 유형일 때 선택된 상태를 나타냄
:required
필수 입력값일 경우
::placeholder (가상 요소)
입력에 대한 추가 정보가 있을 경우

📱 미디어쿼리 @media

반응형 작업 할 때 사용
PC, 스마트폰, 태블릿PC 등 다양한 디바이스에 따라 viewport크기가 다르기 때문에 여러 디바이스에 대응하기 위해 사용
미디어 유형
all: 모든 장치 대상(기본값)
print: 인쇄 결과물 및 출력 미리보기 화면에 표시
screen: 모니터나 스크린이 있는 디바이스
speech: 음성 합성장치 대상

미디어 특성

width: 스크롤바를 포함한 뷰포트의 너비
- min-width, max-width 최소 최대 너비
height: 뷰포트의 높이
- min-height, max-height 최소 최대 높이
orientation: 뷰포트의 방향
- portrait:세로 landscape:가로
aspect-ratio: 뷰포트의 가로세로 비율
resolution: 출력 장치의 픽셀 밀도 - 단위 dppx(Device pixel ratio)

[멋사] 프론트엔드 스쿨 7기 학습 230718

Tue, 18 Jul 2023 10:35:34 GMT

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🏃🏻‍♀️ Animation

JavaScript 없이 애니메이션 효과를 적용할 때 사용
transition은 요소의 상태가 변해야 실행할 수 있지만, animation은 요소의 상태 변화와 관계없이 실행

@keyframes

두 개 이상의 애니메이션 중간 상태 설정

0%는 시작점, 100%는 종료시점 (from, to도 사용가능)

/* [ from ~ to 속성 ] */
@keyframes animation-name {
  from {}
  to {}
}
/* [ 0% ~ 100% 속성 ] */
@keyframes animation-name {
  0% {}
  50% {}
  100% {}
}

animation-name

요소에 적용할 애니메이션을 설명하는 이름 지정
이름의 시작에는 영문 소문자, 문자열, 언더바(_), 하이픈(-)을 사용함
여러 개의 animation-name을 동시 나열할 경우 , 사용

animation-duration

애니메이션이 한 사이클을 완료하는데 걸리는 시간 지정
음수값으로 설정하면 애니메이션 실행 안 됨

animation-timing-function

애니메이션이 진행되는 방식 설정

animation-timing-function: ease;
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4);

ease: 기본값. 애니메이션 중간으로 갈수록 속도가 증가하고 끝에서 느려짐
linear: 균일한 속도로 움직임
steps(n): n개의 단계

animation-delay

언제 애니메이션이 시작될지 지정
음수값 지정 시, 애니메이션이 도중에 시작됨
- 지정한 시간이 지난 뒤 장면부터 지연 없이 애니메이션 시작
- -1s = 시퀀스 1초부터 시작

animation-iteration-count

애니메이션 재생 횟수 설정
- infitnite: 무한 반복
- 0.5: 절반 재생

animation-direction

애니메이션의 재생 방향 및 반복 여부 지정
- normal: 기본값. 정방향 재생
- reverse: 역방향 재생
- alternate: 정방향, 역방향 반복
- alternate-reverse: 역방향, 정방향 반복

animation-fill-mode

실행 전과 후에, 대상에 스타일을 적용하는 방법
- normal: 기본값. 스타일 적용 없음
- forwards: 요소의 기존 스타일로 시작. 애니메이션 마지막 속성값 유지
- backwards: 첫 번째 정의된 애니메이션 값으로 시작. 요소의 기존 스타일로 돌아감
- both: 첫번째 정의된 값으로 시작. 마지막 값 유지

animation-play-state

애니메이션 재생 여부 설정
- paused: 정지
- runnig: 재생

animation

단축 속성
- animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

✍🏻 실습

피그마 디자인 & 애니메이션 실습 진행

[피그마 실습 #1]

[애니메이션 결과물 #1]

[실습코드 #1]




    
    
    
    애니메이션 실습

[피그마 실습 #2]

[애니메이션 결과물 #2]

[실습코드 #2]




    
    
    
    애니메이션 실습

📺 video & audio

video

영상을 삽입할 수 있는 태그
video 태그의 속성
- autoplay: 동영상 자동 재생
- controls: 재생, 정지 등 조작 메뉴 노출
- loop: 동영상 반복 재생
- poster: 동영상 재생 전에 보여 줄 이미지(썸네일)
- preload: 페이지를 열 때 무엇을 로드할지 결정
  - none : 비디오 파일을 미리 로딩하지 않음. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 조금 더 빨라짐
  - metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져옴
  - auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비
- src: 동영상 주소
- type: 동영상 타입(mp4, webm, ogg)
- : 혹은 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙) 지정
  - kind : 텍스트 트랙 종류. subtitles(자막), captions(설명) 등
  - srclang : 텍스트 트랙 언어 지정
  - label : 텍스트 트랙 제목 지정

 
 
 
 

audio

문서에 audio 컨텐츠를 삽입하는 태그
공식적으로 지원하는 표준 오디오 파일: MP3, WAV, Ogg
audio 태그 속성
- src: 파일의 경로
- controls: 기본적인 동작을 조절하는 패널(재생, 볼륨, 탐색, 일시정지)
- autoplay: 자동 재생 여부
- loop: 반복 재생 여부
- preload: 파일의 내용을 모두 불러올지 여부

💡 알고 넘어가기!

Youtube 동영상 → 공유 → 퍼가기 → iframe으로 영상 태그 가져올 수 있음
'연결을 거부했습니다' = 일부 사이트에서는 iframe 거부하기도 함

🏁 SVG, Canvas

SVG

확장 가능한 벡터 그래픽(scalable vector graphics)으로, XML 기반의 2차원 그래픽
- 벡터 그래픽이란? 수학 방정식을 기반으로 점, 직선, 곡선, 다각형과 같은 그림을 표현하는 방식
- XML이란? (eXtensible Markup Language) W3C에서 여러 특수 목적의 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어
HTML 태그의 집합으로 이루어져 있음
CSS와 JavaScript로 컨트롤 가능

SVG 장단점

장점
- 확대: 아무리 확대해도 이미지가 깨지지 않음
- 용량: 이미지의 크기를 키워도 용량이 늘어나지 않음
단점
- 용량: 코드로 이루어져 있어, 복잡한 이미지의 경우 파일사이즈가 커짐

📌 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용됨

SGV 사용 방법

HTML 태그 사용
CSS background 배경으로 넣기
인라인으로 넣기

SVG 이미지 파일에 별다른 조작을 하지 않는다면 html 태그나 css background 속성 사용
이미지에 조작(색상, 모양 변경 등)이 필요한 경우 인라인 속성 사용

Canvas

JavaScript와 HTML 요소를 통해 그래픽을 그림
픽셀 기반의 비트맵 방식
그래픽이 주작업인 게임에 적합함