(이는 클래스 기반의 다른 언어에 익숙한 많은 개발자들을 혼란스럽게 함)

그리하여 니즈에 따라 ES6에는 클래스 문법이 추가됐습니다.

01 클래스와 인스턴스의 개념 이해

객체지향 프로그래밍에서 거의 반드시 등장하는 제 1요소인 클래스는 단어의 의미는 일반적으로 쓰이는 의미와 거의 흡사하다.

영어사전에서 class '계급, 집단, 집합' 등으로 번역하는데, 프로그래밍 언어적으로도 이와 동일한 개념에서 접근하면 된다.

ex. 음식 >> 고기, 채소, 과일 >> 배, 사과, 바나나, 감, 오렌지

<p. 176> 그림 7-1과 같이 음식, 과일은 모두 집단, 즉 클래스입니다.

앞에 super-, sub-를 접목해서 상위 클래스(superclass)/하위 클래스(subclass)로 표현합니다.

그림 7-2 음식은 과일의 superclass, 과일은 음식의 subclass 이면서 귤류의 superclass 입니다.

또한, 음식은 귤류의 super-superclass입니다. 동시에 귤류는 음식의 sub-subclass입니다.

즉, 하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가됩니다.

이처럼 클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가 또는 변경됩니다.

물론, 하위 클래스가 아무리 구체화되더라도 상위 클래스는 결국 추상적인 개념일뿐입니다.

한편, 감귤 자몽, 천혜향 등은 구체적인 개체들입니다. 앞의 클래스들의 속성을 지니는, 실존하는 개체입니다.

이와같이 어떤 클래스의 속성을 지니는 실존하는 개체를 일컬어 인스턴스instance 라고 합니다.

조건=클래스 어떤 클래스에 속한 개체는 클래스의 조건을 모두 만족하므로 클래스의 구체적인 예시=인스턴스

현실세계에서의 클래스와 인스턴스

현실세계에서는 개체들이 이미 존재하는 상태에서 → 이들을 구분짓기 위해 클래스를 도입합니다. (그래서 하나의 개체가 같은 레벨에 있는 서로 다른 여러 클래스의 인스턴스일수도 있다. ex) 진희는 여성이면서 개발자이고 한국인이라는 여러 분류에 속함) → 이미 존재하는 진희를 성질에 따라 분류해서 다양한 클래스가 생성되는 것

순서: 인스턴스 → 클래스

프로그래밍 언어상에서의 접근 방식

현실세계와 정반대이다. 컴퓨터는 위와 같은 구분법을 알지 못하므로 사용자가 직접 여러 가지 클래스를 정의해야 한다. 클래스를 바탕으로 인스턴스를 만들 때 비로소 어떤 개체가 클래스의 속성을 지니게 된다.

한 인스턴스는 하나의 클래스만을 바탕으로 만들어진다. (어떤 인스턴스가 다양한 클래스에 속할 수는 있지만, 결국 인스턴스를 생성할 때 호출할 수 있는 클래스는 오직 하나뿐일 수 밖에 없다.)

순서: 클래스 → 인스턴스

02 자바스크립트의 클래스

인스턴스에 상속되는지(인스턴스가 참조하는지) 여부에 따라

• 스태틱 멤버 static member
• 인스턴스 멤버 instance member 로 나뉩니다. → 클래스 입장에서는 사용 대상에 따라 구분한 것이다.

(그런데 다른 클래스 기반 언어와 달리 자바스크립트에서는 인스턴스에서도 직접 메서드를 정의할 수 있기 때문에 '인스턴스 메서드'라는 명칭은 프로토타입에 정의한 메서드를 지칭하는 것인지 인스턴스에 정의한 메서드를 지칭하는 것인지에 대해 혼란을 야기한다.)

따라서 이 명칭 대신에 자바스크립트의 특징을 살려 '프로토타입 메서드'라고 부르는 것이 좋다.

인스턴스에서 직접 호출할 수 있는 메서드가 바로 프로토타입 메서드이다.

• 기간: 2020년 10월 05일 (월) - 10월 16일 (금) (2주간)
• 사이트: 아르켓(ARKET)
• 팀명: 아르켓 독일점 Arket In Germany (프론트엔드 4명, 백엔드 2명)

✔️ 적용기술 및 맡은 역할 🧥

• 프론트엔드

  • HTML, CSS
  • JavaScript(ES6+)
  • React (CRA, Hooks, Redux)
  • Styled Component
  • Slick.js (library)
  • HTML, CSS

• 백엔드

  • AqueryTool
  • Django
  • Python
  • PyJWT / Bcrypt
  • MySQL

• Nav bar / Footer 구현

• 로그인 / 카카오톡 소셜 로그인 구현

✔️ 결과물 👚

1. 로그인 실패 시

• 로그인 실패 시 alert창을 띄울 수 있도록 구현

  

2. 로그인 성공 후 장바구니

• 로그인 시에만 장바구니를 클릭 할 수 있도록 하고, 로그인 후에는 장바구니에 담긴 물건의 갯수가 장바구니 아이콘에 표시될 수 있도록 함

  

3. 소셜 로그인 과정

• 카카오 API를 이용한 소셜 로그인

  

4. 소셜 로그인 성공 후

• 소셜 로그인 성공을 하면 내 장바구니를 클릭할 수 있도록 함

  

5. 카테고리

• nav bar에서 메인 메뉴 클릭 시 카테고리들 아래 서브 카테고리들이 출력되도록 구현

  

✔️ 소감 👕

내가 PM이라니???

첫째로, 내가 선택했던 웹사이트가 선정이 되어, PM을 맡게 되는 좋은 기회를 가질 수 있었다.

그치만 2차 프로젝트 팀과 웹사이트가 발표되는 순간 솔 직 히 멘.붕. 그 자체

사실 2차 프로젝트를 시작하기 전부터 많은 부담감이 있었는데, 이유인 즉슨.. 나라는 거북이 🐢(아니 어쩌면 달팽이..🐌)를 만나 하드캐리하느라 고생할 팀원들을 만나기 앞서.. 두려웠다. 나란 거북이가 분위기를 험악💥하게 만들어버릴까봐 ㅎㅎㅎ

그런데 PM이 되버리니... 멘붕이였던 것이였던 것이다.

...(아리아나) 그란데 말입니다...

좋았던 점 😎

그럼에도 불구하고 무사히 프로젝트를 마칠 수 있게 되어 정말 정말 다행이였다. 1차 프로젝트에서는 구현하지 않았던 다른 기능들을 맡게 되어 좋았다. 나머지 팀원들이 기존에 회원가입, 로그인 기능을 구현해본 경험이 있었기 때문에, 내가 회원가입, 로그인 기능을 맡고 싶었다. 또한, 팀원들의 배려가 있었기에.. 그리고 카테고리 속의 카테고리를 가진 nav bar 구현은 어려웠지만 새로운 것을 하나 더 배워가는 재미를 알게 되어 좋았다. ㅖ~ 또한, 협업 관리 툴인 Trello를 활용하고 직접 노트에 써가며, (메모는 참 이롭다✍️) 프로젝트를 나무가 아닌 숲을 보며 이해도를 높이려고 노력했다.

아쉬운 점 🥺

비록 천재는 되지 못하더라도 능이버섯이 되지 않도록 노력해야만 했다. 1차, 2차 모두 팀원들에게 많은 도움을 받았는데 저 또한 많이 도움을 주었으면 참 좋았을 것 같은 아쉬움이 컸다. 😭 2차 프로젝트는 생각보다 3차 프로젝트를 준비하며 많은 시간을 할애하고 신경을 쓰다보니(ex. 기업협업을 나갈지 말지, 어떤 기업으로 가야할지, 이력서 준비 등 등) 처음에 생각했던 것 만큼 더 많은 기능, 어려운 기능을 구현하기에는 힘들었다.

또한, 1차 프로젝트 만큼 체력적으로 뒷받침해주지 못한 것 같다. 초반에는 새벽까지 깨어있는 경우가 많았는데, 2차 부터는 집에 가면 지쳐 쓰러져 잠드는 경우가 허다했기 때문이다. (운동도 거의 못했다.) 그렇기에 2차 프로젝트에 온전하고 충분한 시간 할애를 많이 못한 기분이 들어서 아쉬웠다.

마지막으로 !

팀원들에게 🙏

1차 프로젝트에 이어 2차 프로젝트에도 너무나 좋은 팀원들을 만나 성공적으로 2차 프로젝트를 끝마칠 수 있게 되어 너무~ 너무~ 기쁘다. 처음에 PM 되었을 때 멘붕왔던 제 멘탈을 처음부터 끝까지 붙잡아준 ㅅㅎ님, 옆에서 하나하나 다 알려주신 너무너무 친절한 스윗가이 ㅈㅇ님, 덕분에 많이 배웠습니다. 우리 팀의 너무 든든한 능력자 ㅇㅌ님, 같은 팀 너무 하고 싶었던 사전 스터디부터 함께 한 큩걸 ㄱㅂ님, 우리에게 많은 웃음을 준 능력자 막둥이 ㄷㄱ님 할 수 있다고 항상 응원과 기운주던 우리 팀원들에게 정말 감사하다는 말씀 전하고 싶습니다. 감사합니다. 🙏

클라이언트에게서 요청을 받을 때 마다, 클라이언트의 상태를 계속해서 유지하고, 이 정보를 서비스 제공에 이용한다. 예를 들면, 유저가 로그인을 하면, 세션에 로그인이 되었다고 저장을 해 두고, 서비스를 제공할 때에도 그 데이터를 사용한다.

Stateless 서버 💻

상태를 유지하지 않는다. 상태정보를 저장하지 않으면, 서버는 클라이언트측에서 들어오는 요청만으로만 작업을 처리한다. 이러한 상태가 없는 경우 클라이언트와 서버의 연결고리가 없기 때문에 서버의 확장성(Scalability)이 높아진다.

보안

토큰 기반 인증 시스템을 사용하여 어플리케이션의 보안을 높일 수 있습니다. 단, 토큰 기반 인증을 사용한다고 해서 무조건 해킹의 위험에서 벗어나는 것은 아니다.

Access Token이란? 💻

mypage에서 로그인이 됐는지 안됐는지 여부가 궁금할 때, HTTP 통신은 stateless 하기 때문에 API 호출 할때 내가 누군지를 알려주는 정보를 백엔드한테 줘야한다. 그렇기 때문에 로그인 시, 프론트엔드에서는 로그인 여부를 가지고 있다가 백엔드한테 넘겨줘야한다. id,pw 값 자체를 가지고 있으면 너무 너무 위험하니까 그 때 바로 유저 정보가 숨겨서 들어갈 만한 Access Token으로 관리하는 것이다.

JWT (Json Web Token) 이란? 💻

토큰 기반 인증 시스템의 구현체, access token을 만드는 방법 중 하나. 토큰 기반의 인증 시스템에서 주로 사용한다 Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token이다. FE->(request) BE FE<-(response, access token) BE 백앤드에서 jwt를 생성할 때, 해당 user가 누구인지 식별할만한 정보를 담을 수 있다. ex) user_id: 1 예를 들면 백앤드에서 받은 access token을 decode해보니 user_id: 1 라는 정보를 담고 있었다는 것을 알게 된다.

로그인 과정 💻

1. id, pw 전달
2. id, pw 일치 ok!
3. jwt 전달
4. 브라우저에 jwt 저장 저장하는 공간 3개

-> 로컬 스토리지(local storage), 세션 스토리지(session storage) , 쿠키(cookie)

res.json은 JSON 정보를 전달하는데 특화된 기능을 가지고 있다. JSON은 String, Number, Object, Array, Boolean, Null을 지원하지만 Function, Date, Undefined 등과 같은 타입은 지원하지 않는다. 지원하지 않는 타입은 JSON.stringify()메소드를 통해 구현할 수 있다. (JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.)

📚 참고자료

• https://uhou.tistory.com/102

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

✔️ 위코드 12기 1차 프로젝트 회고록 📓

-기간: 2020년 09월 14일 (월) - 09월 25일 (금) (2주간) -사이트: 카카오프렌즈샵(https://store.kakaofriends.com/kr/index?tab=home) -팀명: 드림카카오DreamKakao(프론트엔드 4명, 백엔드 2명)

✔️ 적용기술 및 맡은 역할 📒

• 프론트엔드

• React

• Sass

• React-slick

• Html/ Css / Javascript

• Git

• 백엔드

• Django

• Python

• Selenium

• Beautiful soup

• PyJWT

• Bcrypt

• 신규페이지(Newitem) 이미지 슬라이더, 더보기 버튼 및 장바구니 구현(Cart)

✔️ 결과물 📔

✔️ 소감 📗

• 좋았던 점

• 왜 개발자들에게 커뮤니케이션 능력이 절대적으로 필요하고 중요한지에 대한 깨달음을 일깨워준 나의 첫번째 프로젝트였다. 팀원들과의 커뮤니케이션을 통해 나 혼자서는 도저히 해낼 수 없는 일들을 해내는 것을 보며 2차때도 좋은 소통을 하는 팀원이 되고 싶다고 느꼈다.

• 12기 내에서 나의 현재 위치가 꼴등인건 부정할 수 없는 사실이지만🙄 프로젝트를 진행하면서 나는 과거의 내 자신과 비교하려고 노력했다.😬 프로젝트를 시작하기 전에는 코알못, 그냥 1도 몰랐던 내가 프로젝트 아주 작은 부분에 기여했다는 사실 자체가 뿌듯하고 재밌었다.

• 백에서 너무 잘해주셨기 때문에 프론트와 소통하는데 문제가 없었고 팀원들끼리 서로 감정적인 부분 전혀 없이 원활하게 소통했다.

• 힘든 부분도 있었지만 우리 팀이 가장 웃음소리로 가득 넘쳤다고 이야기 들을 정도로 웃음소리 넘치고 재밌게 임했던 것이 좋았다.

• 아쉬운 점

• 처음 신규페이지에서 너무 시간을 많이 할애해서 장바구니를 구현할 때 시간이 많이 모자라서 팀원들에게 거의 다 도움받은 것이 아쉽다.

• 장바구니 구현의 난이도가 정말 최상이였는데 나한테 배정되었던 거 자체가 기획이 잘못된 거 아닐까 하는 의문도 들었던 것은 사실이다.

• 또한, 너무 모르는 것이 많아서 당장에 내가 공부해서 보완할 수 있었던 부분도 아니고 나한테 주어진 일은 당장에 있는데 팀원들한테 피해가 갈까봐 걱정되고 답답하니까 원하는 코드는 안나오고 눈물만😂 났던 기억이 있다.

• 기술적인 부분에서 내가 잘한 점을 많이 나열할 수는 없다는 게 아쉽😞 그치만 아쉬운 점은 보완하라고 존재하는 것! 2차 때 더욱더 열심히 프로젝트에 임해야겠다.

• 좋은 질문을 좋은 답변을 얻는다. 좋은 질문만 하는 질문충이 되자!

• 팀원들에게 처음부터 끝까지 싫은 소리 없이 많이 모자른 저를 받아준 능력넘치는 팀원들! 모두를 같이 일하고 싶은 개발자로 임명합니다!땅땅땅! 속상해서 울고 있던 저한테 먼저 커피 마시러 나가자고 했던 ㅈㅅ님 정말 감사하고 난 정말 바보인가봐 하며 낙담하면 항상 아니라고 해주던 ㅇㅅ님, 만능 열쇠 key 우리 PM ㅈㅎ님, 옆자리에서 모르는거 백번 물어봐도 친절하게 알려주던 ㅎㅇ님, 기분 좋은 웃음으로 웃어주시던 ㄷㅅ님 5명 모두에게 진짜 감사합니다.🙏

Scrum - 스크럼 진행 방식에 대해서 이해했고 Trello 와 같은 tool 을 활용하여 스크럼 방식 아래 프로젝트 진행할 수 있다.

스크럼(애자일 개발 프로세스)이란?

• 프로젝트 관리를 위한 상호, 점진적 개발방법론
• 애자일 소프트웨어 개발 중의 하나
• 소프트웨어 유지보수 팀 or 일반적인 프로젝트/프로그램 관리에서도 적용 가능

스크럼의 특성

• 솔루션에 포함할 기능/개선점에 대한 우선 순위를 부여
• 개발 주기는 30일 정도로 조절, 개발 주기마다 실제 동작할 수 있는 결과를 제공
• 개발 주기마다 적용할 기능, 개선에 대한 목록을 제공
• 날마다 15분 정도 회의 가지기
• 항상 팀 단위로 생각
• 원활한 의사소통을 위한 열린 공간 유지

스크럼의 진행

1️⃣ 제품 백로그(Product Backlog)

개발할 제품에 대한 요구 사항 목록. 전체 기간동안 개발할 백로그를 제품 백로그라고 한다.

2️⃣ 스프린트(Sprint)

반복적인 개발 주기(회사에서 정하는 이터레이션이 개발 주기가 된다. 계획 회의부터 제품 리뷰가 진행되는 날짜까지의 기간이 1스프린트이다.)

*이터레이션(Iteration: 반복) 애자일은 짧은 기간 동안에 동작하는 SW를 사용자에게 제공하며 피드백을 받아서 고쳐 나간다. 이 짧은 기간을 일반적으로 이터레이션이라고 한다. 스크럼에서는 스프린트라고 한다.

스프린트 모델의 장점은 개발 결과물에 대한 고객의 피드백을 받아 반영할 시간이 보장되어 있다는 것이다. 폭포수 모델의 경우 한번 개발이 완료되면 잘 못 개발되었다고 하더라도 수정하기가 매우 어렵다. 반면에 스프린트 모델은 하나의 스프린트가 끝날 때마다 고객에게 제대로 개발되었는지 확인하고 보완사항을 반영하여 다음 스프린트를 수행하게 된다. 일반적으로 3회 정도의 스프린트라면 고객이 만족할만한 개발이 된다고 알려져 있다.

3️⃣ 스프린트 계획 회의(Sprint Planning Meeting)

스프린트 목표와 스프린트 백로그를 계획하는 회의

4️⃣ 스프린트 백로그(Sprint Backlog)

각각의 스프린트 목표에 도달하기 위해 필요한 작업 목록 1개 스프린트에서 개발할 백로그들을 스프린트 백로그라고 한다.

5️⃣ 일일 스크럼 회의(Daily Scrum Meeting)

날마다 진행되는 미팅 (어제 한일, 오늘 할일, 장애 현상 등을 공유)

6️⃣ 실행 가능한 제품(shippable product) 개발

스프린트의 결과로써 나오는 실행 가능한 제품 상기 요소들을 아래와 같은 순서에 따라 사용하여 스크럼을 진행시킨다.

제품에서 요구하는 기능과 우선순위를 제품 백로그로 정한다. PO가 정한 제품의 우선순위에서 어디까지 작업을 할지 팀과 조율 한다. 조율하여 선정된 제품 백로그가 이번 스프린트의 목표가 된다. 스프린트 목표를 구현 가능 하도록 팀에서 스프린트 백로그를 작성한 뒤 작업을 할당한다. 스프린트를 진행하는 동안, 매일 정해진 장소와 시간에 모든 개발 팀원이 참여하는 일일 스크럼 회의를 가진다. 매회의 스프린트가 종료할 때마다, 스프린트 리뷰 미팅을 통해 만들어진 제품을 학습하고 이해 한다. 제품의 학습과 이해가 끝나면, 스프린트 회고를 통해 팀의 개발 프로세스에 대한 개선의 시간을 갖는다. 스프린트 기간 중 다음 스프린트를 준비 하기 위해 PO와 필요 인원이 모여 백로그를 준비하는 시간을 갖는다. 이러한 진행 방식과 더불어, 개발 팀원 이외에 아래와 같은 직책(역할)이 정의되어 있다.

7️⃣ 제품 책임자(Product Owner)

제품 백 로그를 정의하여 우선순위를 정해 준다.

8️⃣ 스크럼 마스터(Scrum Master)

프로젝트 관리자(코치) 스크럼 마스터는, 일반적인 관리를 수행하는 프로젝트 관리자들과는 달리 팀원을 코칭하고 프로젝트의 문제 상황을 해결하는 역할을 하며, 제품 책임자는 스프린트 목표와 백로그등의 결정에 있어 중심이 되는 상위 관리자로, 제품 책임자가 독단적으로 목표를 결정하지 않고, 고객과 관리자 및 팀원들이 모여서 목표를 정한다.

이런 과정을 거친 뒤, 개발 팀원들이 주도적으로 스프린트 목표를 달성하기 위한 작업을 정해 나가게 된다. 보통, 각 작업들은 4시간에서 16시간 정도 걸리도록 정한다. 물론, 작업을 정하고 할당하는데는 고객이나 제품 책임자와는 상관 없이 팀원 자율로 진행된다. 이와 같은 자율적인 행위를 통해서 팀원들은 의사를 활발하게 주고 받게 되고, 끈끈한 협업체계를 가지게 된다.

애자일 프로세스는 외부로부터의 질서보다는 팀원 스스로가 만들어나가는 자기 조직화를 중요하게 여기고 있다. 하지만, 이러한 부분과 더불어 애자일 프로세스는 무질서해 보이기 때문에 전통적인 프로세스 개선과 마찰이 생기게 된다.

-기간: 2020년 09월 14일 (월) - 09월 18일 (금) -팀명: 드림카카오DreamKakao (프론트엔드 4명, 백엔드 2명) -사용 계기: 처음 신규페이지(Newitem)에서 이미지 슬라이더를 맡게 되었는데 레이아웃 짜는 것 마저 벅찼던 나는😅(No Answer) 어떻게 만들어야 할지 감이 안잡혔었다. 멘토님들에게 질문해서 Slick이라는 라이브러리를 알게 되었고 이걸 사용해 배너를 만들었다.

📚React Slick Library 사용 후기

✅ slick 사용방법

설치1 (Slick Library 설치)

npm install react-slick --save

설치2 (css import하기)

npm install slick-carousel // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";

✅ 시작해보기

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

멘토님들에게 질문했을때 받은 답변이 document에 잘 나와있으니 그걸 참고해서 일단 슬라이더를 만들어보고 시작하라는 것이였다. 짠! 하고 슬라이더가 만들어진다! 신기하지 않나요?

✅ 수정해보기

짠! 하고 만들어진 슬라이더에서 내가 수정해야했던 부분은 -원본 슬라이더에 맞춰서 settings를 적절하게 수정해주고, -텍스트 슬라이드 대신 이미지가 들어가야했고 -적절한 위치에 텍스트와 기본 arrow 모양이 아닌 background로 화살표가 들어가야한다는 점이였다.

✅ 참고할만한 사이트

https://www.npmjs.com/package/react-slick-slider https://react-slick.neostack.com/docs/get-started

✅ 힘들었던 점

실제 이미지 슬라이더를 보면 1페이지부터 10페이지로 차례대로 자동슬라이더가 되었다가 마지막인 10페이지에서는 거꾸로 한번에 10페이지에서 1페이지로 휘리릭하고 넘어가는 기능을 가지고 있다. 그치만 slick에서 이걸 구현할 property가 없는건지 내가 못찾는건지는 모르겠지만🤔 이거 때문에 시간이 많이 소요되었다. js로는 구현이 가능하지만 slick를 이용해 거의 완성해두었던터라 그냥 계속 붙잡아둔 것 같다. 그래서 결국엔 infinite를 true로 두어서 이미지 슬라이더가 계속 반복되는 스타일로 완성하였다.

✅ 결과물

일정시간 자동으로 슬라이더가 넘어가도록 해놓고, 또한 직접 화살표를 눌러 넘어가거나 드래그해서 슬라이더를 넘길 수 있다.

✅ 후기

라이브러리 사용은 처음이였는데 신기하고 간편하면서 어려운 점도 많았던 것 같다. 다음에 Slick을 이용하게 된다면 좀 더 단시간 내에 뚝딱 만들어서 시간을 단축시키고 싶은 마음이다. 왜냐하면 프로젝트 1주차를 지내면서 세부적인 것들 때문에 시간을 너무 허비하는 바람에 다음 스텝으로 넘어가는게 너무 오래걸렸기 때문이다. 2차 프로젝트 넘어가기 전에 복습을 잘해서 다음엔 좀 더 능숙하게 만들수 있도록! 화이팅부리!

ESLint는 JavaScript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. 대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다. 그러나, 역동적이고 느슨한 언어인 JavaScript는 Linter가 존재하지 않는다. 왜냐하면 JavaScript는 별도의 컴파일 과정이 없고, Node나 Browser에서 바로 실행되기 때문이다. 결론은 ESLint 같은 Linting 도구를 사용하면 된다.

참고) -Linting: 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식 -Linter: Linting을 수행하는 도구

✔️ Prettier 란?

Prettier은 VSCode 익스텐션 중에 코드를 정렬해 주는 Code Formatter 중 하나이다. 설정한 ESLint 룰에 따라 Prettier가 자동으로 format을 잡아준다.

⭐️ CRA에 ESLint 추가하기

1️⃣ 플러그인 설치

VSCode에서 ESLint 플러그인 설치

2️⃣ ESLint 세팅

프로젝트 root에 .eslintrc.json 라는 이름의 파일을 추가하고 아래 내용을 추가한다.

{ "extends": "react-app" }

⭐️ CRA에 Prettier 추가하기

1️⃣ 플러그인 설치

VSCode에서 Prettier 플러그인 설치

2️⃣ Prettier 설치

Prettier와 ESLint를 연결

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

그리고 .eslintrc.json의 코드를 다음과 같이 업데이트

{ "extends": ["react-app", "plugin:prettier/recommended"] }

3️⃣ Prettier 설치

VSCode - Code - Preference - Settings

우측 상단 노란색으로 표시해놓은 문서 모양을 눌러 json파일 형태로 바꾼다.

"editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "eslint.alwaysShowStatus": true, "prettier.disableLanguages": ["js"], "files.autoSave": "onFocusChange"

여기까지 잘 진행되었다면 문제가 있는 코드에는 빨간색으로 밑줄이 쳐지고 커서를 올려보면 무엇이 문제인지 나온다. 문제를 확인, 수정하고 저장하면 자동으로 format이 되어 저장이 된다.

✔️ 에러 ?

동기 왈 설치과정에서 에러가 나서 몇시간 동안 해결하느라 고생했다고 하니 😭 글과 링크를 잘 참고하여 에러에 잘 대비하자 🙏

| reference

• https://yeri-kim.github.io/posts/eslint-prettier/
• https://gollumnima.github.io/posts/wecode3_5TIL_eslint

position 속성 - static, relative, absolute, fixed

01/ static(기본위치)

• 기본위치

02/ relative(상대위치)

• 기본위치를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킨다.

03/ absolute(절대위치)

• 부모요소 또는 가장 가까이 있는 조상요소(static제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다. 즉, 나머지 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정되는 것이다.

04/ fixed(고정위치)

• 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티를 사용하여 위치를 이동시킨다. 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

inline, inline-block, block 에 대해서

• inline 요소는 block의 요소와 성질이 반대이다. 말 그대로 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다. inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.

• <span>, <a>, <img> 태그

• span은 오른쪽 정렬을 부여해도 오른쪽 정렬이 되지 않는다 (inline element) display: inline-block; 으로 하면 가능(block element의 특징을 가져옴)
• 대부분의 HTML element(요소)는 block 요소이다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.

• <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 태그

float에 대해서

CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다. float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

<div>태그는 검색에 걸리지 않음 그럼 무엇이 장점일까? -> css 조작하기가 쉽다.

검색에 걸려야하는지 아닌지 판단하여, 검색에 걸려야 한다면 조작이 어렵더라도 반드시 <img>태그를 써야한다.

->'의미가 통하는'의 뜻을 가지고 있는 semantic의 시맨틱 태그(semantic tag)를 이용하여 Semantic Web 짜는 것이 중요하다.