어떤 객체가 만들어지기위해 그 객체의 모태가 되는 원형이 프로토타입. inheritance를 가능하게 해주는 것이 js의 prototype의 property이다. JS는 객체지향의 언어 , 프로토타입 기반 언어 원래는 클래스라는 개념이 없어서 기본적으로 상속기능이 없다. 그래서 프로토타입에서 상속기능을 흉내. ECMA6에서 class 문법이 추가됨.

JavaScript에서 거의 모든 객체는 Object의 인스턴스입니다. 일반적인 객체는 Object.prototype 에서 속성과 메서드를 상속받으며,

function Person() {
    this.eyeColor = "blue";
    this.age = 20;
}

let James = new Person();
let Jerry = new Person();

==> 함수와 new 를 통해서 class를 흉내냄 (상속가능)


function Person() {}

Person.prototype.eyeColor = "blue";
Person.prototype.age = 20;

let James = new Person();
let Jerry = new Person();

==> Person.prototype이라는 빈 객체가 어딘가에 존재하고 생성된 James,Jerry는 prototype을 통해서
빈 객체에 담긴 property들을 가져다 쓴다.

객체는 언제나 함수로 생성된다. *Object 자체가 JS에서 기본적으로 제공하는 함수 *

let obj = {};
let obj = new Object(); 와 동일한 의미

함수가 정의되면

1. constructor (생성자) 자격이 부여된다 -> new 를 통해서 객체를 만들 수 있게 됨
2. 해당 함수의 prototype object 생성 및 연결 (_proto_)

함수를 콘솔창에 찍어보면 constructor 와 _proto_ 가 뜬다. constructor 는 객체를 생성하는 함수를 보여주고, _proto_가 객체 원형을 연결해준다. (prototype link)

참고 링크 : http://insanehong.kr/post/javascript-prototype/

closure

여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성. 함수를 선언할 때 만들어지는 유효 범위가 사라진 후에도 호출할 수 있는 함수 outer function이 리턴된 후에도 inner function이 outer 범위의 변수에 접근할 수 있는 함수. 자신이 생성될 때의 scope에서 알 수 있던 변수들 중에 언젠가 자신이 실행될 때 사용할 변수들만을 기억해서 유지시키는 함수. outer function에서 선언한 변수를 참조하는 inner function에서 발생하는 현상.

inner함수의 실행 시점에는 outer 함수는 이미 실행이 종료이 상태인데 outer 함수의 Lexical Environment에 접근할 수 있는 이유는? -> *가비지 컬렉터의 동작방식 때문 *(가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집대상에 포함시키지 않는다)

function retirement(retirementAge) {
    return function(yearOfBirth) {
            let age = 2020 - yearOfBirth;
            console.log(`you have ${retirementAge - age} years left until retirement.`);
    }
}

let countryA = retirement(65);
let countryB = retirement(70);

countryA(1980);
countryB(1980);

retirement(65)(1980);     ===> countryA(1980)과 동일
retirement(70)(1980);     ===> countryB(1980)과 동일

inner function에서 outer function의 변수인 retirementAge가 outer function이 리턴됐음에도 호출가능하다.

Shallow Merge, Deep Merge (얕은 복사, 깊은 복사)

어떤 객체를 복사할때 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자할때, 프로퍼티 값이 기본형 데이터일 경우에는 그대로 복사하면 되지만, 참조형 데이터는 그 내부의 프로퍼티들을 모두 복사해줘야한다.

Shallow Merge

동일한 key가 존재할 경우 대체한다.

1. Object.assign 
2. Spread Operator

------------------------------------

const A1 = {
    B: 2,
    C: 1   
}

const A2 = {
    B: 3,
    D: 2  
}

Object.assign(A1, A2);   ===> { B: 3, C: 1, D: 2 }
B의 value가 다른데 A2의 B로 대체되었다.

console.log({...A1,...A2}); 동일 결과 출력

----------------------------------------
const A3 = {
    B: {
        C: 1
    }
}

const A4 = {
    B: {
        D: 2
    }
}


Object.assign({}, A3, A4); ===>  {B: { D: 2 }}
B라는 동일 key를 대체해서 {D:2}가 들어간다.
console.log({...A3,...A4}); 동일 결과 출력

Object.assign 과 spread operator의 차이는? -> Object.assign은 첫번째 인자를 기준으로 병합되는데 병합된 후에 첫번째 인자의 값 자체가 변한다. 반면에, spread operator는 그대로 기존값을 유지

const A1 = {
    B: 2,
    C: 1   
}

const A2 = {
    B: 3,
    D: 2  
}


Object.assign(A1,A2);   ===> { B: 3, C: 1, D: 2 }
console.log(A1);        ===> { B: 3, C: 1, D: 2 }
console.log(A2);        ===> { B: 3, D: 2 }
A1이 기존과 다르게 변한것을 확인할 수 있다.


const A1 = {
    B: {
        C: 'C1',
          E: 'E'
    }
}

const A3 ={...A1};
A3===A1     ===> false (같아보이지만 같지 않다! 각자 다른 메모리에 저장된 값)

Deep Merge

한 객체의 데이터 공유가 아닌 똑같은 구조의 객체를 만들어서 따로 사용하고자 할 때는 deep merge가 필요하다. js의 유틸리티 라이브러리 lodash 사용하는 방법

import merge from 'lodash/merge'

const A1 = {
    B: {
        C: 'C1',
          E: 'E'
    }
}

const A2 = {
    B: {
          C: 'C2',
        D: 'D',
    }
}

console.log(merge(A1, A2));
===>
{
  B: 
    {
      C: 'C2',
      D: 'D',
      E: 'E'
    }
}
두 개가 병합되었지만 두번째인자인 A2의 C 값이 들어왔다.

JSON.parse & JSON.stringfy JSON.stringfy로 객체의 데이터를 json 타입으로 변환한 후에, JSON.parse나 eval() 사용해서 다시 객체로 만드는 방법

Set

set은 데이터타입 중 하나 중복되지 않은 값들을 가진 배열

const a = new Set();
console.log(a);      ===> Set{}

const foo = new Set([ 1, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 5, 5, 5 ]);
console.log(foo);     ===> Set { 1, 2, 3, 4, 5 }

set의 메서드 : add (이미 있는 요소를 추가한다면 무시된다) / size(전체 길이) / clear *(전부 삭제) / *delete(특정 요소 삭제) / has (있는지 없는지 boolean으로)

const b = new Set(['a','b']);
console.log(b);       ===> Set {'a', 'b' }
b.add('c');            ===> Set { 'a', 'b', 'c' }
console.log(b.size);    ===> 3 

Event Bubbling / Event Capture

*Event Bubbling *: 하위 요소의 이벤트가 상위 요소들로 전달되는 특성

브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킵니다. “Trigger clicks all the way up” console 결과는 three > two > one 으로 나타난다. two를 클릭했다면 two > one 으로 나타난다.

Event Capture : 반대로 상위에서 하위로 이벤트가 전달되는 특성

addEventListener에 3번째 인자로 {capture: true;}를 설정해준다. 상위->하위 로 간다는 걸 알려준다. 결과는 'three' div 클릭시 one > two > three 로 출력된다.

이런 전달되는 특성을 이용하고 싶지 않다면 function에

event.stopPropagation() ; 

을 넣어주면 된다. 그러면 이벤트가 클릭한 요소에서만 나타난다.

Array 원본 배열유지, 신규 배열 생성

-> concat, slice, filter

concat의 경우는 배열안의 요소만 합쳐준다.

let arr = [1,2,3];

let newArr = arr.concat(4,5,[6,7]);
console.log(newArr);        ===> [ 1, 2, 3, 4, 5, 6, 7 ]

*slice(number, -1) *처럼 -1같은 음수를 인덱스로 사용하면 마지막부터 시작이 되므로 -1은 마지막 요소의 전에서 잘린다. -2라면 마지막 요소의 전전에서 잘린다. negative index indicating an offset from the end of the sequence.

기업협업에 나가기전에 예리님께서 기업협업 회사들에 대한 브리핑을 해주셨고 회사들은 시기마다 달라진다. 직접 각 회사들을 방문해서 근무환경을 확인하시고 대표님과의 면담을 통해 실제로 4주간의 기업협업 후에 실제로 우리 수강생들을 채용할 의사가 있는지, 구체적으로 몇명인지도 알려주신다. 좋은 환경에서 좋은 경험을 하고 오길 바라신다는 의지가 느껴졌다. 아무 회사에 보내는게 아니고 실제로 근무환경이 좋지 못한 곳은 (회사의 네임밸류가 높아도) 위코드 자체에서 필터링하시는 걸 보고 수강생을 배려하는 위코드만의 기준이 감사하고 인상깊었다.

나는 관심있었던 메디컬 분야의 회사를 1순위로 지원했고 감사하게도 지원한 회사로 기업협업이 결정되었다. 혼자갔더라면 부담이 컸을텐데 동기들 4명과 함께 가게 되어 너무 기쁘고 든든했다. 첫날 회사에서 회사에 대한 소개를 먼저 해주셨고 각자 돌아가면서 간단한 자기소개를 했다. 그리고 앞으로 한달동안 우리가 해야할 회사의 프로젝트에 대해 프레젠테이션을 해주셨다! 아직 우리는 react native를 배운 단계가 아니었는데 이미 배포된 어플의 몇몇 페이지를 추가/수정하는 프로젝트를 할당받았다. 게다가 typescript, mobx, mst라는 장벽이 또 있어서 우리는 첫주에 엄청 멘붕이었다. 다행이 위코드에서 매주마다 react native 세션을 해주셔서 어느정도 감을 찾아갔다. 하지만 typescript, mobx,mst는 우리가 각자 스스로 공부하고 사수분이 쓰신 코드를 공부해야했다. 위코드에서 두달동안 열심히 배운것 중 하나가 '혼자할 수 있어빌리티!', 스스로 공부하는 법이었으므로 처음엔 맨땅에 정말 헤딩하는 느낌이었고 (많이 고통스러웠지만...) 정말 신기하게도 시간이 지나니까 익숙해지고 코딩을 응용해서 쓰는 내 모습을 볼 수 있었다.

react native 세션에서 관희님이 우리를 '전사'로 표현하셨는데 수많은 에러와 싸우는 우리들을 보면서 정말 전사가 맞구나 싶었다. 아무래도 아직 react native는 버전이 1도 아직 안된 만큼 생태계가 잘 되어 있지 않아서 정보의 한계도 있고 검색을 해도 react 처럼 답을 쉽게 찾을 순 없었다. 회사의 프로젝트와 더불어 우리는 자체적으로 한달동안 어플 클로닝 프로젝트를 병행해야했는데 아직 미숙한 단계에선 처음에 그 어떤 것도 진도가 나가지 않아서 스스로가 너무 답답했다. 그렇지만 이미 배포중인 회사어플의 코드를 많이 읽고 뜯어 분석하다보니 조금씩 지식이 늘어나서 2주차부터는 조금씩 진도가 나가기 시작했다. 그리고 위코드 세션에서 배운 것을 바로 회사에서 응용할 수 있거나 코드를 읽으면서 이해가 되니까 조금씩 재미가 붙었다. 회사에서도 사수님이 하루에 몇번씩 우리들을 진도를 점검하고 질문, 코드리뷰를 해주시면서 react native를 점점 이해하게 되었다. 회사마다 다를 수 있겠지만 우리는 사수분이 친절하시고 답을 다 알려주시기보다 스스로 배우게끔 유도해주셔서 오히려 짧은 시간에 꽤 빠르게 성장할 수 있었던 것 같다(너무 감사하다!). 그리고 다른 사람이 쓴 코드를 분석하는게 정말 어렵지만 공부에 엄청 도움이 되는 일이란 걸 처음 알았다. 코로나로 직접 위코드에 가서 react native 세션을 듣는게 어려웠는데 화상세션으로 진행하시면서 두시간이 넘는 긴 시간동안 개개인을 신경써주신 멘토 관희님께도 너무 감사하다!

회사에서 우리가 처음 할당받은 4개의 프로젝트를 모두다 하진 못했지만(처음엔 사실 2개도 완성가능할까 의문이었다) 3개는 완성한 것에 대해 우리 자신들에게는 큰 박수를 쳐주고 싶다. 그리고 실제로 현업에서 백엔드의 api를 연결해서 data를 받고 소통해보는 경험들, figma로 디자인을 그대로 구현해보는 일, 현재 활발하게 유저수를 늘리고 있는 인기 어플의 기능을 수정하고 새로운 기능을 추가해보고 실제로 배포할 수 있다는 것 이 모든 것들이 한달안에 이루어졌다는게 놀랍고 한달 전의 나와 지금의 나를 비교해보면 분명 어느정도 개발적인 부분에서 성장을 이뤘을거라고 생각해서 기업협업을 나오길 잘했구나 생각이 들었고 정말 소중하고 감사한 경험이었다.

그래서 가장 궁금해할 채용은 어떻게 되었느냐고 묻는다면 회사에서 먼저 우리에게 지원할 의사가 있는지 물어보셨고, 우리들 중 3명이 지원을 했고, 지원한 3명에 대해서는 모두 정직원 전환가능한 정식 인턴으로 기회를 주셨다. 정말 좋은 회사고 좋은 근무환경과 좋은 사람들, 비전을 가진 회사였기에 충분히 이곳에서 3명도 크게 성장할거라고 생각한다.

기업협업을 포함해서 지난 3개월이 너무도 금방 지나가서 나에게 올해의 여름은 '위코드'라는 추억과 배움으로 가득한 너무 뜻깊은 계절이었다. 위코드를 떠나기 싫다고 우리 기수가 모두 울면서 소리칠 만큼 좋은 동기들과 멘토님들을 만난 것에 감사한다. 수료를 했다고해서 이게 끝이 아님을 안다. 개발에서 배움은 끝이 없을거고, 너무도 애정하는 동기들과 멘토님들과 우리의 커뮤니티도 계속해서 끈끈하게 이어져갈거라고 생각한다. ❤️

(한달동안 회사에서 나의 commit 기록)

3. Root에 react-native.config.js 파일을 만들어주고 아래의 코드를 넣는다.

4. assets> fonts> 폴더내에 다운받은 폰트 파일들을 넣어준다.

5. font 파일들을 link 해준다.

이런 결과가 떴다면 성공적

(하던 도중에 엄청난 에러가 뜨면서 빌딩이 계속 failed했다. 문제는 => [Xcode Error] Multiple commands produce 말 그대로 파일들이 중복되어서 생긴 문제인데 단순히 삭제하면 해결되는 문제였다. 엄청나게 구글링을 하다가 해결법을 찾았다. (뭐가 문제인지도 찾는게 어려웠다 ㅠㅠ) 이 문제는 Xcode -> Build Phase -> Copy Bundle Resources 에서 중복된다는 파일들을 삭제하니 문제해결 😭) 이 블로그의 도움을 받았다. Multiple Commands error in Xcode

6. ios의 경우 Xcode를 켜고 font를 직접 target해줘야 한다. Resource라는 폴더를 만들어주고(있다면 그 폴더안에) 폰트들을 추가해주자. 그러기위해 Add Files to "프로젝트명" 을 클릭한다. 새창이 뜨면 폰트들을 선택해주고

• copy Items if needeed ☑️
• create folder references ☑️
• '프로젝트명' (내 경우는 'artsy') ☑️ 이 3개에 체크를 하고 Add 버튼을 누른다.

👉 아래의 사이트를 참고하면 gif로 더 자세하게 과정을 확인할 수 있으니 참고 Common Mistakes With Adding Custom Fonts to Your iOS App

• 폰트를 클릭했을 때 오른쪽 하단에 target Membership이 체크되었는지 ☑️ 확인하면 잘 연결이 된 것을 볼 수 있다.

• 프로젝트 페이지에서 중앙 상단에 info를 누르고 Fonts Provided by application 에 font가 있는지도 확인해야한다.

위의 사이트를 참고하면 cusotm font 적용시 할 수 있는 실수들을 잘 정리해놨으니 참고하는것을 추천한다👍 그리고 android는 쉽게 폴더 내에 폰트 파일들을 넣으면 적용이 되는걸로 알고 있는데(아닐수 있으니 더블체크) 나는 ios로 개발중이라 일단은 ios위주의 폰트 적용 방법만 작성했다. 그리고 또 하나 조심해야할 점이 내가 받은 폰트의 파일명과 실제 적용할때 폰트의 real name이 다르면 아예 폰트 적용이 안되기 때문에 그 점도 확인해줘야 한다.(까다로워......)

async function 함수명() {
    await 비동기처리 메서드명();     <=메서드가 꼭 propmise 객체를 반환해야 await가 동작함 (보통 API호출)
}

• callback을 안하고 비동기 처리시

• callback시

• async/await 사용시 (callback 포함)

await를 사용안했다면 데이터를 받아오고나서 다음 함수가 동작해야 하니까, 콜백함수나 .then()을 사용해야했을 것이다.

(똑같은 실행을 하지만 아래의 두 코드를 비교해보자. 코드가 간결해진 것을 확인할 수 있다.)

• 에러발생시에는 catch()

[자바스크립트 async와 await](출처: https://joshua1988.github.io/web-development/javascript/js-async-await/)

interface를 사용해서 전달해주는 props의 type을 미리 정해준다

TextField.tst

props.person의 경우는 obj를 Person이라는 변수로 뺐는데 아래와 같이 바로 써줄 수도 있다.

interface Props {
    person: {
        firstName: string;
            lastName : string;
        }
}

App.tsx TextFied의 props로 text와 person이 전달된 모습이다. person의 경우는 obj형태로 firstName과 lastName이라는 key를 가지므로 반드시 명시해줘야한다. 이외에도 props중에 ok , i , fn 이 있었는데 interface에서 선언해준 props가 쓰이지 않을 경우에는 에러메시지가 난다. 이럴 경우,나중에 사용할지 아닐지 애매한 = 꼭 필요한 props가 아닐 때엔, interface 선언에서 !를 : 앞에 붙여준다. 예를 들어 ok와 i는 전달을 안할지 모르는 props** optional** 형태라고 가정한다면,

ok !: boolean;
i !: number; 
이런 식으로 !: 을 해주면 된다.

const QuestionCard: React.FC<Props> =({위에서 정한 props들}) => ();

functional component의 경우는 *React.FC< Props > *라고 써주고 받는 props들을 {}안에 써준다. (여기서 FC는 Functional Componenet의 약자다)

step 2 (React Hooks). UseState

useState<state의 type> ** **<> 괄호 안에서 type을 정의한다 아래에서는 count 의 type을 number | null | undefined 로 정의했다. 만약 number로만 지정했다면 undefined로 setCount를 했을때 에러가 뜬다.

아니면 interface로 새로운 state에 들어갈 값을 지정해서 넣어주는 방법도 있다.

step 3. Arrow Function

< T >안의 T는 'type variable'로 함수에서 전달되는 인자의 type을 설명한다. < element > 로 해줘도 되고 원하는 이름을 붙이면 된다. 나중에 함수가 호출될 때 type이 지정되어 있으면 전달받는 인자와 결과값도 그 type을 가진다는 의미이다.

const fn명 = <Type> (arr: Type[]):Type => {
    return sth;
};


((아래의 코드를 참고하면))
const l2 = last<string> (["a","b","c"]);

Type이 string으로 지정받았고 인자인 []도 string array고 리턴값도 string 타입이 출력된다.

그래서 아래의 경우를 보면, 인자가 [1,2,3]인 number array이므로 number라는 타입이 함수에 전달되고 결과값도 number로 나온다는 의미다.

인자를 두개 전달했을 때, 각각의 인자는 T 와 Y 타입을 가진다. 그래서

const v3 = makeArr("a", 5);

는 첫번째 인자 "a"가 string을, 두번째 인자 5가 number 타입을 갖겠다고 정의된 것이다.

이렇게 정의해도 같은 의미가 된다.

const v3 = makeArr<string, number>("a",5);

Enum (Enumeration)

With enums, TypeScript lets you define similar types statically yourself.

비슷한 종류의 member들을 묶어놓은 객체라고 생각하면 편하다. Enum member은 name과 value값을 가지는데 string, number 등이 될 수 있다. value는 때론 생략될 수 있는데 number값을 가질 경우는 자동적으로 0부터 +1씩 더해지는 값이 부여된다.

string과 number가 섞인 enum => " Heterogenous enum "

RN에서 많은 양의 데이터를 처리할때는 FlatList나 ScrollView 를 주로 사용한다. 화면보다 데이터의 양이 많을 경우 두 태그는 모두 스크롤을 생성한다는 공통점이 있다.

< ScrollView >는 데이터를 한번에 모두 렌더링하고(느려짐) 화면이 벗어났을 때 스크롤을 생성하기 때문에 데이터가 고정적이고 양이 많지 않을 때 사용하기 적절하다. 반면에, < FlatList >는 모든 데이터를 한번에 렌더링하지 않고 화면에 보여지는 부분만 렌더링해주므로 데이터의 양을 예측할 수 없는 경우에 (크기를 알 수 없을 때) 사용하면 좋다.

< FlatList > 에서 최소한으로 필요한 prop은 data(배열형태 데이터) 와 renderItem 이다.

< FlatList > 의 props를 살펴보면,
data= {DATA} 객체타입의 data 정보를 받고 renderItem에서 renderItem 함수를 호출해서 data가 보여지는 리턴값을 가져온다. 고유 key를 지정해주기 위해 keyExtractor를 설정한다.renderItem에서 map을 돌리는 것 처럼 item을 전달할때, ** 무조건 {item}으로 써야한다.** 다른 이름을 주고 싶다면 el.item에서 el부분을 바꿀수 있다.

FlatList와 유사한데 section을 구분짓고 싶다면 < SectionList >를 사용한다. 

sectionList 자세히 보기

MobX 란 무엇인가

state를 전역적으로 쉽게 관리할 수 있게 해주는 라이브러리 (Redux와 유사) MobX의 흐름을 전반적으로 보여주는 그림으로 필수로 알아야 할 개념은 observer / @action / @observable / @computed 이다.

React Native에서 MobX decorator를 사용하기 위해 설치해야할 것 !

yarn add @babel/plugin-proposal-decorators

설치하고나서 babel.config.js에 가서

@observable

말 그대로 '관찰받고 있는' 상태로 이해하면 편하다. @를 이용해서 decorator로 property를 감싸주면 그 property가 변했을 때, 자동적으로 재구성되면서 rerender된다. obervable의 value는 object, array, primitive value 무엇이든 가능하다. decorator를 사용하지 않고도 observable을 설정할 수 있다. ((decorator 없는 경우))

@computed

observable의 property의 value를 직접적으로 바꾸는 action과 달리 그 property의 상태를 getter/setter 함수를 이용해서 가져올때 쓰인다. 그래서 주로 count, map, filter 함수를 사용하는 경우에는 @computed 에서 함수를 설정한다. getter함수에 대해 알고 싶다면 클릭 (get 함수 : 객체 안에서 객체의 프로퍼티를 가져올 때 호출되는 함수, arrow function을 사용하지 않는 것에 주의)

(-ing 추후 내용 추가예정)

카카오개발자 사이트에서 js key를 발급받고, 카카오로그인-동의항목 에서 받고자 하는 정보를 (필수동의 or 선택동의) 선택해서 저장한다. (백엔드에서 필요한 정보와 맞춰봐야한다. email만 필요한지, 생일도 필요한지 등등)

(kakaotalk login을 쉽게 구현하기 위해 react library도 있지만 나는 이번 프로젝트에서 라이브러리 없이 구현해보는 방법을 택했다)

index.html에 아래와 같이 코드를 넣어준다

console에서 true가 나오면 성공

< 알아야 할 개념 >

*OAuth *

: 사용자가 애플리케이션에게 모든 권한을 넘기지 않고 사용자 대신 서비스를 이용할 수 있게 해주는 HTTP 기반의 보안 프로토콜. 사용자가 가입된 서비스의 API에 접근하기 위해서는 사용자로부터 권한을 위임 받아야 합니다. 이 때 사용자의 패스워드 없이도 권한을 위임 받을 수 있는 방법이 필요합니다. 이를 위해서 고안된 기술이 OAuth입니다. OAuth에서 Auth는 Authorization과 Authentification을 의미한다.

resource server 가 우리가 이용하려는 정보를 제공하는 카카오톡, 구글 등의 서버를 의미한다. authorization server가 resource server를 인가하고 client에게 token을 준다.

OAuth2 token

• Access token : client가 resource server에게 사용자 정보를 요청하기 위한 토큰.
• Refresh token : access token이 만료되면 새로운 token을 발급받기 위해 필요한 토큰으로 유효기간이 더 길다. 둘 다 유효기간이 만료되면 더 이상 사용하지 못한다.

css props로 자주 사용하는 css속성은 변수로 저장해서 재사용하자!

import styled, { css } from "styled-components";

*${변수명} *을 써주면 적용된다.

: '시차'라는 뜻의 천문학적 용어. 스크롤시 보여지는 컨텐츠의 속도를 서로 다르게 조절해줌으로써 입체적인 느낌을 줄 수 있다.

<설치>

npm i --save react-rellax

프로젝트중 parallax scrolling effect가 필요해서 알아보다가 react rellax 를 알게되어 간략하게 소개하고 싶다.

[참조: https://github.com/dixonandmoe/rellax ] https://dixonandmoe.com/rellax/

여러가지 attribute이 있지만 대표적으로 속도를 조절하기 위해선 data-rellax-speed 가 필요하다. 디바이스에 따라서 속도를 다르게 줄 수 있고 그걸 조절하는 breakpoints를 직접 설정할 수도 있다. 기본적으로 default speed는 (-2)고 추천하는 범위는 (-10)~(10)이다. 음수로 갈수록 scroll 속도가 느려지고 양수로 갈수록 속도가 빨라진다.

Custom Wrapper : 기본적으로 parallax 엘레먼트들은 body를 기준으로 scroll effect가 적용되지만 custom wrapper를 설정하면 그 기준에 맞게만 적용시킬 수 있다.

<설치>

npm install react-rellax-wrapper

((내가 사용한 예 : React Hooks 사용))

처음 코드

if문을 없애고 currentScrollY를 변수로 설정해서 boolean값을 갖게 만들었다. 그걸 바로 state로 적용!

하나의 state를 객체타입으로 만들어서 한번에 여러 key값을 조절하는 방식도 생각해볼 수 있다. IsSuperOrSocial에서 super, social을 한번에 조절하는 것이다. {isSuperOrSocial.super} 로 객체의 key값을 불러오면 된다.

한번의 이벤트로 각각의 컴포넌트를 조절하고 싶을때 => 객체화!

npm install --save styled-components

< 사용 >

import styled from "styled-components"

대문자로 시작하는 변수명(Logo)을 설정하고 그 태그(svg)가 무엇인지 styled.다음에 써준다. 기존의 css처럼 쓰는 방식은 같으나 큰 차이라면 중괄호{}가 아닌 백틱 ``안에 내용을 넣어줘야한다.

다른 컴포넌트의 css설정을 extend하고 싶으면 styled.(extend할 컴포넌트명)을 써주면 된다. 즉, ProductAbsolute는 ModelImg의 속성을 그대로 물려받은 상태라는 의미다. 다만 차이가 있거나 추가적으로 주고 싶은 css 속성이 있으면 써주면 된다.

Props 전달 : < TopImg fixedImg={shownImg} > shownImg라는 state값을 fixedImg라는 props로 TopImg 컴포넌트에 전달한다. 아래의 position을 예로 들어보면, props.fixedImg? === state.shownImg? 와 같다고 볼 수 있다. shownImg state가 true면 fixedImg도 true이기 때문에 positoin: sticky; 가 될 것이다.

Animation / @keyframes 사용

**< Global Style > ** createGlobalStyle을 이용해서 전역에 적용되는 css속성 설정가능

다른 컴포넌트를 호출하고 싶은 경우 : *${컴포넌트명} *

자식 컴포넌트

자식 Login.js ) this.props.showID(this.state.email) ** **showID 라는 함수를 부모에게 전달해보자. showID 함수를 이용해서 자식 Login이 가진 state 중 email 값을 전달한다.

부모 컴포넌트

부모 Nav.js) showID 함수를 정의해준다. x라는 인자를 받아서 부모가 가진 state > email 값으로 넣어준다. (자식의 state>email과는 다르지만 같은 이름을 가졌다) 즉, 위의 (this.state.email)가 부모에서는 showID의 인자인 x 가 되는 셈이다.

또 다른 예시 부모 : Cart.js 자식 : CartList.js

자식 컴포넌트

this.props.functionB(this.state.totalSum) 부모에 있는 함수 functionB를 이용해서 자식의 state>totalSum을 전달한다.

부모 컴포넌트

render에서 정의된 함수이므로 자식과 연결할때 {this.functionB} 가 아니라 그냥 {functionB}가 되었다. 자식의 totalSum이 x 인자로 전달되어 functionB를 통해 리턴값으로 출력된다.

최고의 품질과 검증된 성분으로 만들어진 스킨, 헤어, 바디제품 브랜드 '이솝(Aesop)'을 클로닝 웹사이트로 선정하였다. 세계적으로 유명하기도 하고 실제로 클로닝 사이트를 선정하는 과정에서 여러 사이트를 살펴보던 중에 깔끔한 웹디자인과 정갈한 폰트, 정적인 색감이 마음에 들어서 개인적으로 후보에 올렸던 웹사이트였다.

• 기간 : 12일 (20.07.20 - 20.07.31)
• 참여인원 : Frond-end 3명 & Back-end 2명
• 사용한 라이브러리 : React, React-Router, Sass,React-Slick
• 사용한 툴 : Github(Front-end Repo), Trello, Slack

⭐️ 내가 맡은 기술적 부분

Main

Nav

• hover시 nav list에** border-bottom에 transform적용 (scaleX(0)-> scaleX(1))**
• scroll-down의 경우에 nav가 사라지고 scroll-up의 경우 nav fixed

  📝 기억하고 싶은 코드 : scrollY , componentDidMount, componentDidUpdate

Footer

Feeds

• scroll-down시에 천천히 각각의 feed component가 나타나는 기능

  📝 기억하고 싶은 코드 : scrollY , componentDidMount, componentDidUpdate ( 이 기능을 먼저 구현하고 scrollY의 원리를 이해해서 nav-fixed에서도 응용할 수 있었다)

• 라이브러리를 이용하지 않고 순수 React로만 slide 구현

  📝 기억하고 싶은 코드 : slice를 이용해서 보여주고 한 화면에 보여주고 싶은 아이템의 수를 설정 : currentItemIndex를 설정해서 처음 페이지에선 prev Btn이 사라지고 마지막 페이지에선 next Btn이 사라지도록 구현 : slide안에 들어올때만 버튼이 보이고 나가면 사라지게 (onMouseEnter, onMouseLeave)

(slick 라이브러리가 ui가 매끄러워서 사용해볼까 생각했었지만 버튼이 보이고 사라지는 기능을 구현하기엔 커스터마이징할 요소가 많다고 생각해서 순수React로 시도해보았다. 그래서 슬라이드가 넘어가는 속도가 라이브러리를 사용한 것에 비해 매끄럽진 않았지만 나에겐 재밌었던 도전이었고 세세하게 조건을 걸어줘야해서 배우는게 많은 과정이었다.)

SideBar

이솝의 가장 아름답고도 임팩트가 있던 3단 sidebar 애니메이션! 프로젝트 첫날에 이 부분이 가장 어려울 수 있다는 경고를 들어서 무거운 마음을 안고 접근했는데 생각보다 할만해서 다행이었던 부분이었다.

📝 기억하고 싶은 코드 state 값으로 {style:width: 숫자;} 를 초기설정으로 하고 onClick 이벤트로 변동되게 하였다. 사실 방법은 여러가지가 있어서 처음 sidebar만 state값으로 조정하게 하고, 두세번째 sidebar은 scss에서 translate(-100%,0) & keyframes를 이용해서 속도와 나오는 시작점도 조절하였다.

Cart

sidebar에서 이용한 translate를 응용해서 이번엔 y축으로 적용하였다. cart message는 top:0;에서 내려왔다가 다시 올라가면서 사라지기 때문에 keyframes에서 0%/50%/100%마다 설정을 해주었다.

cart message

cart list

⭐️ 완성본 영상보기 (go watch it 👻)

YouTube link('Aesop 클로닝')

⭐️ After Project

💓 프로젝트 하나를 마친 초보 개발자의 생각 협업으로 진행된 프로젝트였고 내가 제안한 웹사이트가 선정된 이유로 PM 역할을 담당하고 최종 발표자 역할을 맡았다.

'자리가 사람을 만든다'고 했던가 나는 그말을 너무도 공감하는게 어린 시절 소심했던 내 성격을 많이 바꿔준게 리더 역할을 맡고나서부터였기 때문이다. 공교롭게도 혹은 감사하게도 어딜가도 항상 그룹내에서 '리더'라는 역할을 많이 맡게됐는데, 이 경험들로 사람들과 쉽게 잘 어울리고 타인을 이해하려는 포용력을 키울수 있었다. 물론 이번 프로젝트는 리더 보다는 진도와 방향성을 잡아주는 PM으로서 성격이 달랐지만 적어도 그간의 경험들로 밝은 분위기를 주도해서 다같이 열심히 나아갈 수 있게 노력했다.

'목적'을 달성하기 위해선 달려가는 개개인의 능력도 중요하지만 어떤 '환경'에서 일하느냐가 지대한 영향을 미친다고 생각한다. 그래서 최대한 긍정적이고 서로 격려하고 스트레스 받지 않는 분위기를 만들려고 했던 것 같다. 다만 나도 사람인지라 시간이 촉박해짐에 따라, 그리고 나도 어떤 문제에서 헤매고 있을때 나에게 도움이나 질문을 하면 원래만큼 최대한 성심껏 응답을 하지 못했던 것 같다.

초반에는 내가 잘 해야한다 라는 책임감이 엄청 컸다. '내가 진도가 느린건 아닌지, 우리팀에 내가 누를 끼치면 안되는데..잘해야 하는데' 라는 생각이 나를 짓눌렀다. 하지만 긍정적으로 보자면 적당한 스트레스와 중압감은 나를 달려가게 하는 원동력이 되었다. (걱정한다고 걱정이 해결되는건 아니니까, 그리고 그럴 시간에 고민하면서 코딩을 하는게 도움이 되니까😂)

그래도 마지막에 각자가 한 코드를 합치고 유기적으로 이어지는 것을 보고 지난 2주간 우리의 노력들이 합쳐졌구나 생각이 들어서 굉장히 뿌듯했고 신기했다. 혼자였으면 편했을지 모르지만 절대 혼자서는 이렇게 훌륭한 결과물을 만들지 못했을 것이다. 협업을 통해서 프론트에서도 상대방의 코드를 보면서 내가 몰랐던 지식들을 배웠고, 백엔드와의 소통의 중요성 그리고 그들만의 고충을 조금이나마 이해하게 되었다.

한달전의 내가 지금의 '나'를 보면 얼마나 신기해할까. 나조차도 코딩을 전혀 모르던 내가 이렇게 성장하리라 생각하지 못했다. 아직도 가야할 길이 너무너무 멀고 산 넘어 산은 끊임없이 나오겠지만 그래도 이렇게 달려가다보면 실력은 조금씩 조금씩 쌓이겠지 ☺️

개인적으로는 '개발자'로 커리어전향을 한 게 굉장히 잘한 일 같다. 내 과거의 직업을 아는 이들은 하나도 빠짐없이 관둔것을 후회하지 않냐고 물어보았다. 하지만 인생에서 단조로운 걸 싫어하고 배움이 없는걸 싫어하는 내 성격상, 끊임없이 내 뇌와 생각을 자극하고 발전하게 도와주는 '개발자'로서의 삶은 꽤 기대가 된다.

❗️ 나를 끝까지 괴롭혔던 장바구니 기능 (추억으로 남겨두자) (마지막 전날쯤이었던가. 집에 가는 막차 지하철을 타고가면서 지금 이 감정과 생각들을 얼른 적어두고 싶어서 급하게 써놓은 메모. 오타가 엄청나다. 나만 이해할 수 있는 생각의 플로우 (근데 지금보니 뭐라한거야 😳 손가락의 움직임이 생각의 흐름 속도를 따라가지 못했...)

안녕하세요, 개발자 우니 입니다. 먹는 우니 아니고 외국살때 친구들이 애정어리게 붙여준 애칭으로 저는 아주 마음에 드는 이름입니다. 물론, 먹는 우니도 좋아합니다.

저는 도전정신을 격려하고 긍정적인 분위기를 만들어주는 환경에서 일하는 것을 좋아합니다. 3년간 비행과 여행을 반복한 덕분에 새로운 것에 적응하고 이해하는 능력이 뛰어난 편이라고 생각합니다.

개발에 큰 도움이 될지는 모르겠지만 내세울 점이라면 외국어 능력이 좋은 편입니다. 영어는 해외에 다년간 살아서 FTA와 국제 박람회에서 통역, 매거진에서 번역한 경험이 있고, 프랑스어와 일본어도 약간은 할 수 있습니다.

MY STORY

인생의 모토가 '후회하지 말자'와 '불가능은 없다' 입니다.

그래서 해보고 싶은 것은 모든지 도전해봤습니다. 새로운 걸 창조하는게 좋아서 이화여대에 진학시 의류학 전공을 선택했고, 외국어가 좋아서 불어불문학을 복수전공 했습니다. 취업을 위해 흔히 말하는 스펙을 염두해두었다면 아마 여유롭게 그렇게 선택하지 않았을테지만 제 탐구적인 성격은 아마 과거로 돌아간다해도 또 그런 선택을 할거라고 생각합니다. 그래서 남들에 비해 시작이 늦었을지 모르지만 후회는 없습니다. 그 경험들이 모두 자양분이 되어서 언젠가 예기치 않게 도움이 된다는 걸 알고 있기 때문입니다.

3년간 두바이에 살면서 에미레이트 승무원으로 근무했습니다.

영어를 사용하는 환경에서 근무하고 싶었고 다양한 세상을 보고 싶어서 무턱대고 지원했다가 감사하게도 합격했습니다. 수많은 에피소드들이 있지만 제가 3년동안 배웠던 것은 팀워크, 다름의 존중, 가치와 삶의 방향성 이라고 생각합니다. 다양한 곳과 사람들을 만나면서 사람들이 추구하는 가치가 제각각이고 어느것도 우월할 것 없이 동등하게 존중받아 마땅하다고 생각했습니다. 동시에 과연 나는 어떤 사람이고 어떤 방향성을 갖고 인생을 나아가야 하는가 많은 고찰을 했습니다.

제가 본 저라는 사람은 단순한 생활보다는 끊임없이 지식적으로 자극(challenging)을 주는 일을 좋아하고, 스스로를 발전시킬 수 있는 일을 좋아하는 사람이란 걸 알게 되었습니다. 그래서 '개발자'로서 커리어전향을 하게 되었습니다.

AS A FRONT-END DEVELOPER

'개발자'들은 많지만 정말 '좋은 개발자'가 되는게 중요하다.

개발자로서 저는 산을 오르고 있다고 생각합니다. 정상이 없는 산이겠죠. 오르는 과정이 쉽지는 않을겁니다. 하지만 오르다가 '와 이만큼 성장했구나'라며 기쁨을 느끼는 순간들도 분명히 존재하겠죠. 먼 미래에 어느 정도의 높이만큼 오르게 될지 모르지만 개발자에겐 '산의 정상'이란 건 존재하지 않는다고 생각합니다. 배울 건 끊임없이 존재할테니까요.

배움에 끝이 없다는 건 정말 좋은 의미인 동시에 막연한 낙담감을 주기도 합니다. 하지만 그렇다는 건 무한한 발전가능성이 있다는 걸 의미합니다. 그리고 그 가능성이 저를 달리게 하는 자극을 주고 성장하고 싶은 욕구를 불러일으킵니다.

그리고 산을 오르는 동안 자기 자신에 대해서도 무수히 많은 고찰을 하겠죠. 저는 커리어적으로 성장하면서 동시에 제 스스로에 대한 발전을 같이 할 수 있는 그런 개발자가 되고 싶습니다.

scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다.

hover시에 밑줄이 천천히 왼쪽부터 생기게 하는 효과를 주자

after의 hover시에 발생할 동작에 대해선 셀렉터를 
hover::after로 해주어야한다.

scaleX(0)에서 scaleX(1)로 변화하는 transform을 설정하였다. 속도를 조절하기 위해 transition: transform 300ms를 주고, 왼쪽에서부터 시작하므로 transform-origin:left로 해주었다.

점을 hover시에 확대되게 해보자

scale(숫자) : 비율을 조절할 수 있다

(순수 js로만 구현) slick, Glider 등의 라이브러리를 사용할까 하다가 react hook으로 작성된 slide 코드를 참고하여 내 조건에 맞게 바꿔서 class함수로 작성하였다.

(덕분에 componentDidUpdate의 개념을 얼추 이해하게 됐....)

prevSlide : 왼쪽 버튼을 onclick시 구현될 기능

items는 fetch로 받은 데이터 array 형식으로 처음에 렌더링이 되면 화면에
보이는 첫 이미지의 currentItemIdx는 0으로 초기세팅해두었다. 
클릭시 현재 currentItemIdx===0이 true니까 items(6개) index 값은
5가 되고, currentItemIdx=5가 된다. 
itemsToDisplay에서 이미지를 3개씩만 보여주기로 설정했는데
현재는 slice(5,8)로 index 5,6,7 의 이미지가 나타난다.
또 한번 prev 클릭시, 이번엔 resetToVeryBack이 false가 되니까
index는 4가 되고, 보여지는 이미지는 slice(4,7) = 4,5,6이 된다. 

처음에 itemsToDisplay()를 실행시킬 event가 없어서 어찌해야할지 방법을 찾다가 멘토님의 도움으로 이 함수를 변수로 저장해두고 우리가 필요한 return값을 호출하는 방식으로 했다. 어차피 화면에 보여질 이미지들은 리턴값인 createSources 니까 이 리턴값을 itemList로 변수 저장하고 그걸 map으로 돌려서 화면에 나타나게 하였다.

prev/next 버튼을 슬라이드 안에 onMouseEnter시에는 나타나고 onMouseLeave시에는 사라지게 해보자

단순히 나타나고 사라지는 기능말고 currentItemIdx===0인 경우는 prev 버튼이 사라지고(disabled), 마지막 idx에 도달할 경우 next 버튼이 사라지게 조건을 추가하였다.

기본값은 shownPrev=false(첫 이미지에서는 보일 필요 없으니까), 
shownNext = true 로 설정하였다.
마지막 이미지가 나타나는 currentItemIdx ===4 인것을 콘솔로 확인하고
그때는 shownNext=false가 되게 하였다.
그 외의 경우는 버튼이 둘다 보여야하므로 true.

그런데 위와 같이만 코드를 작성한 경우 prev,next 버튼이 조건에 맞게 제대로 작동되지 않았다. 그래서 componentDidUpdate를 통해서 문제를 해결하였다.

* Scroll Event : React에서 scroll event를 주기 위해 y의 타겟지점을 알기 위해

window.scrollY - 스크롤을 내릴 때마다 계속 변하는 그때그때의 px값이 
콘솔창에 나타나는걸 확인할 수 있다 

document.body.scrollHeight - 전체 document의 height값을 알기
위해 콘솔해보면 픽스된 전체의 height값을 볼 수 있다

메인페이지에서 scroll event fade-in을 해주기 위해서 각 피드마다의 y타겟지점을 알아내서 그 지점이 지났을 때 각각의 state값이 변하게 해주었다. 각각의 state값이 자식 컴포넌트에 props로 전달되면 className이 변하면서 scss 속성을 (opacity:0 -> opacity:1)로 바꾸게 설정했다. transition으로 속도를 조절해주면 좀 더 부드럽게 나타나게 할 수 있다.

예를 들어 이렇게 (scss)

참고하면 좋을 다른 코드

* React Hook

Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 
사용할 수 있게 해줍니다.

언제 Hook을 사용할까? 
함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 
바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여
state를 사용할 수 있습니다.

const [ ] = React.useState();

: useState는 Hook을 호출해 함수 컴포넌트(function component)안에
state를 추가합니다. useState는 현재의 state 값과 이 값을 업데이트하는
함수를 쌍으로 제공합니다. 이 함수를 핸들러나 다른 곳에서 호출할 수 있습니다.

React class의 componentDidMount 나 componentDidUpdate,
componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된
것입니다.

useEffect() https://ko.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

결과는 스크롤을 내리면 새로운 색을 가진 div들이 fade-in 된다.

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. array를 돌면서 array 로 결과가 출력된다.

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);         // [2, 8, 18, 32]

var Array = [{key:1, value:10},
             {key:2, value:20},
             {key:3, value: 30}];


var result = Array.map(function(el){ 
   var obj = {};
   obj[el.key] = el.value;
   return obj;
});
// result는 [{1:10}, {2:20}, {3:30}]

new Object에 키값으로 주기 위한 방법 obj[지정할 key값] = 그에 맞는 value값

< map을 이용해서 string을 숫자로 바꿔보자 >

['1', '2', '3'].map(str => parseInt(str));
//위와 같다
['1', '2', '3'].map(Number);        // [1, 2, 3]

.map(x => x에 대해 arrow function); .map(function(x) { x에 대한 function});

Map() 생성자

new Map()을 생성하고 그 변수(myMap)에 .set(key값, value값) new Map([key값, value값], [key2값, value2값]....)

(1) new Map([],[]...)형태로 배열을 넣어주는 방식을 사용하거나 (2) .set(key,value) 형태로 map을 형성

map의 항목 수(엔트리 수)는 size를 통해서 파악한다

console.log(myMap.length);   ------ undefined
console.log(myMap.size);     ------ 2 

그러면 .map()과 .forEach()의 차이는 무엇일까?

둘 다 array관련 메서드라는 공통점이 있다. 차이로는 forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리, map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징이 있다.

.forEach()는 결과로 array를 가지기 위해서 push를 통해 배열을 만들어줘야함 executes a provided function once for each array element

.map()은 새로운 배열을 반환 creates a new array with the results of calling a provided function on every element in the calling array

Object에서 .map()함수는 어떻게 사용할까?

['a','b','c']를 map으로 돌릴 때 그 el 는 'a' , 'b' , 'c' 가 된다. 
example[el] 은 'a', 'b', 'c' 각각의 value 값들을 의미한다.
그러므로 그 value값들을 2배해준 값이 출력된다.
기존의 example 배열은 새로운 value값을 가진 배열이 된다.

위와는 다르게 각각의 배열을 가진 새로운 array가 생성되는 결과가 나왔다.

Object.assign(target, ...source)
: source객체를 복사해서 합친 target객체를 반환한다.
spread 연산자(...)을 사용하면 배열의 개별적 요소를 복사해서 가져온다고 생각하면 편하다.

영상보기 : Westagram 완성본

< What I've Learnt> 💕

• ⭐️ SPA (Single Page Application) : 단일 페이지로 구성된 웹 어플리케이션. SPA는 화면이동 시에 필요한 데이터를 서버에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.

• 장점) 서버가 보내는게 아니므로 화면이동시간이 빠르다.

• 유저입장에서 사용이 편하다*. front-end개발을 back-end와 독립적으로 분리시켜서 API를 통해서만 **데이터를 교환하므로 (decoupled setup**) front-end 개발을 빠르게 한다.

• 단점) 처음 화면 로딩시 모든 화면이 준비되어있어야 해서 시간이 걸린다. 어플리케이션 구현이 좀 더 시간이 걸리고 복잡하다.

• ⭐️ Semantic tag : 태그안의 내용을 유추가능하게 해주므로 자신의 의미를 개발자와 브라우저에게 명확하게 설명해준다.

  <article> <footer> <header> <nav> <section> 등

• ⭐️*React에서 < form >태그 사용시 주의할 점 * : < form > 태그 사용시 submit을 하면 화면이 새로고침되면서 state값이 default 상태가 되므로 event.preventDefault(); 를 해줘야한다.

* ⭐️ **SASS (Syntactically Awesome Style Sheets)**
1) **$** symbol to make something a **variable.**
$ 기호를 써서 공통적으로 적용되는 속성값을 미리 세팅해주면 변수처럼 불러올 수 있다.
![](https://images.velog.io/images/claire-euni/post/8065faf6-906a-4bc4-aa21-9f7315fb9e3e/image.png)
2) Sass will let you **nest your CSS selectors** in a way that follows the same visual** hierarchy of your HTML.**
네스팅을 통해 css 코드를 가독성 있게 간결하게 할 수 있다. 예를 들어 < div >, < p >와 같은 태그명으로 css를 지정할 경우에도 네스팅을 하면 특정 태그에만 적용할 수 있는 편리함이 있다.
3)  You **don't have to write all your Sass in a single file**. You can split it up however you want with the** @use** rule.
scss 파일을 여러개 가진 경우는 @use '파일명' 으로 불러올 수 있다. 그 파일에서 변수를 지정한 경우는 : 파일명.$변수; 로 정보를 불러온다.
![](https://images.velog.io/images/claire-euni/post/6af4d0c4-8da5-4b6f-988c-9831c684fb1e/image.png)
4) 확장 **@extend** : 같은 파일내 다른 셀렉터의 속성을 불러와서 사용할 수 있다. 확장은 **최상위순위**로 적용된다.  **@extend '셀렉터명**' 으로 사용한다.
![](https://images.velog.io/images/claire-euni/post/0ea7b666-4589-45ea-a21b-e4629ff90e48/image.png)

* ⭐️ **fetch()함수를 이용한 API 통신**
: 로그인을 한 경우에 백엔드 서버에서 access_token을 받아서 로컬 스토리지에 저장을 한다. 
(**setItem사용**) 
POST메서드를 사용해서 body에 객체타입으로 서버가 정한 key값을 알아야 그에 맞는 value값을 전달해준다.
아래에서는 서버의 key가 email/password로 설정이 되어 있고, 그에 맞는 value 값으로는 내가 초기에 정한 this.state.id 와 this.state.password를 넣어주었다.
개발자도구에서 >> application 창에서 localStorage에 내가 정한 변수명 "access_token"에 서버에서 받은 토큰값을 확인할 수 있다. 토큰이 존재하는 조건에서 main 페이지로 이동하게 된다.
![](https://images.velog.io/images/claire-euni/post/b048cd29-2282-4f7d-bd50-19131c59ca1e/image.png)

* ⭐️ **조건부 렌더링 (Logical &)**
: JSX에서 {}중괄호를 이용해서 표현식을 나타낸다. **&& 연산자 이후 엘레멘트는 && 앞의 조건이 true일때만 보여지고 false라면 보여지지 않는다.** 
![](https://images.velog.io/images/claire-euni/post/514071d5-9fc4-44eb-949e-6aa4cbe04fd1/image.png)

*  ⭐️ **댓글 달기 (map()) & 댓글 제거 (filter())**
### : (댓글 달기)
### 초기세팅
![](https://images.velog.io/images/claire-euni/post/aca7c1f0-179b-47e6-9f54-2a9be930efe7/image.png)
![](https://images.velog.io/images/claire-euni/post/c28263f1-5575-4c9a-933d-3479818556e6/image.png)
getComment()가 실행될 때, 
showId가 true가 되면서 댓글달 때 내 id가 보여지고
addedComment=input.value가 초기화 되면서 test라는 객체의 comment의 value값으로 저장이 된다.
각 댓글마다 key 고유값을 갖기 위해서 매번 더해지는 숫자로 key를 지정해주었다.
예를 들어 { id: 0, comment: "안녕하세요" } , { id:1, comment: "반갑습니다"} ....이렇게 각각의 댓글이 객체형태로 id와 comment에 저장이 되고 이 객체들이 commentToGet이라는 빈 array에 저장이 된다.
![](https://images.velog.io/images/claire-euni/post/954628fd-1f0c-4454-9f81-3ba4f2467c2f/image.png)


댓글 달기 기능을 가진 컴포넌트를 분리해주었다 = < AddComment />

![](https://images.velog.io/images/claire-euni/post/372dd6a2-868c-4ea8-98c1-0860af494cd2/image.png)
댓글 수만큼의 객체를 가진 array인 commentToGet을 .map()함수로 돌면서 각각의 배열에서 id, comment값을 할당된 곳에 넣어준다. 



![](https://images.velog.io/images/claire-euni/post/adabfc6b-8d10-446d-aac9-8a9e64cd8cf2/image.png)

### (댓글 삭제)
각 댓글의 삭제 버튼을 클릭할 때마다 "그" 댓글이 사라지기 위해선 식별하는 과정이 먼저 필요하다. 그래서 미리 key값을 정해주는게 중요하다. 댓글이 생성될 때마다 각 댓글이 가진 id값이 key가 되어 식별과정에 사용된다. 
예를 들어 위의 {id:0 , comment: "안녕하세요"} 는 부모인 div의 id = "0", 자식인 span에 "안녕하세요" 가 들어갔다. 
삭제버튼을 눌렀을 때 저장된 댓글 정보(객체타입)를 가진 commentToGet을 돌면서 (filter함수 사용) 객체의 id와 부모의 div id가 같은지를 확인한 다음, 같지 않는 객체들만 남긴채 렌더링해준다. 지정된 객체만 commentToGet 어레이에서 사라지기 때문이다.
주의할 점은 html에서 div의 id = 숫자 로 저장이 안되기 때문에 "0"으로 저장되어서 숫자인 0과 비교가 되지 않는다. 그래서 "0"을 0으로 바꿔주기 위해 Number()라는 함수를 사용해주었다.


![](https://images.velog.io/images/claire-euni/post/0a3c35a0-9760-41b8-b3fa-1b509990a5bd/image.png)


> **후기**

위스타그램을 하는 과정 내내 재밌었다. 거의 똑같이 만들고 싶어서 1px 차이에도 민감하게 반응했는데 css를 이리저리 조작하고 적용해보는 과정이 재밌는걸 보면 역시 프론트엔드가 맞나보다 싶었다. React를 처음 사용해봐서 초반에는 state,props의 개념이 잘 잡히지 않아서 응용하는게 너무 어려웠는데 계속 사용하다보니 조금씩 적응이 됐다. 부모 컴포넌트에서 자식 컴포넌트를 만들고 또 자식 컴포넌트를 만들어가는게 마치 러시아 인형 마트료시카 같았달까...😳 
그리고 내가 애니메이션 효과를 좋아한다는걸 느꼈다. beating heart(💓 ㅋㅋㅋ) 덕분에 svg 태그에 대해서 좀 더 공부하게 되었고 (역시 보기 좋은게 좋은건 진리), 댓글달기&제거 기능을 구현할 때는 코트카타나 알고리즘 공부를 평소에도 틈틈이 해두어야 나중에 도움이 되겠다는 생각이 많이 들었다.