jjung-developer.log

[Android] 왜 play store에 앱 검색이 안될까?

Thu, 20 Jul 2023 12:59:21 GMT

앱을 오픈한지 9개월.. 나는 맥북 + 아이폰 조합을 쓰기 때문에 안드로이드 핸드폰은 테스트용으로 있고, 윈도우는 접해본지가 언젠지 기억도 안난다...🫠

아무튼! MIT님이 제보해주신 오류 내용

' 웹 구글 플레이 스토어에서 앱 검색이 되지 않는다'

라는 내용이었다

엥..? 왜...? (맨날 하는 말)

바로 구글링에 들어갔다.

결론 : 우리 앱에서 사용하는 안드로이드 내장 기능 권한이 있는데 (ex 카메라, 위치 등등) 그 권한을 사용 할 수 없는 디바이스의 경우 앱 매칭이 되지 않아 검색이 되지 않는 것

구글 플레이에서 앱을 필터링 할 수 있는 element가 있다. 다양하게 있는데 오늘 사용 할 element는

uses-feature의 옵션은 name, required, glEsVersion이 있는데 name에는 사용한 하드웨어 or 소프트웨어 기능의 name을 required는 boolean값이 들어가는데, ture를 넣을 경우 디바이스에서 명시된 기능을 사용 할 수 없을 때 설치를 할 수 없도록 설정 false를 넣을 경우 디바이스에서 해당 기능을 사용 할 수 없더라도 설치를 할 수 있도록 허용

그렇다면, 어떠한 권한들을 사용하면 이러한 제한이 생기는걸까?

공식문서에 아주 잘 나와있음!

우리 앱은 카메라 권한을 사용하고 있었기 때문에 공식 문서에 따라 uses-feature 코드를 추가 해주었다.

정말 기본적인 설정 오류를 이제서야 발견했다니 ㅠㅠ RN을 작업하다보면 IOS , Android오류들을 많이 보게되는데 Native 코드와 설정을 건드는것은 늘 어려운것 같다 🫠

SVG

Mon, 08 Aug 2022 14:38:17 GMT

SVG

1. SVG(Scalable Vector Graphics)란?

확장가능한 벡터 그래픽 (벡터 이미지는 Pixcel이 아닌 점과 점 사이를 계산하여 그리는 이미지)
픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현

2. SVG를 사용해야 하는 이유

XML 포맷으로 파일이 작성되므로 HTML, JS, CSS로 조작이 가능합니다. ⇒ 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수 있음
벡터를 기반으로 그려지므로 사이즈를 크게 해도 깨지지 않고 파일 크기가 동일합니다. ⇒ Web에서 Device의 Ratio를 대응하기 위해 기존 사이즈보다 x2된 사진으로 대응하는데 SVG를 사용하면 자동으로 대응되게 되어 원본과 x2를 모두 준비할 필요가 없습니다.
복잡한 이미지의 경우 용량이 일반 이미지보다 클 수도 있지만, SVGO(웹기반 GUI SVGOMG)와 같은 도구를 이용하면 SVG 파일 크기를 30~ 60% 이상 쉽게 압축이 가능합니다.
SVG 파일은 코드가 아닌 텍스트로 작성됩니다. 스크린 리더와 검색 엔진이 이를 분석할 수 있으므로 접근성 및 SEO 목적에 적합합니다. ⇒ 페이지 로딩 시간은 검색 엔진 순위의 또 다른 중요한 요소입니다.

3. SVG 만들기

웹을 위한 SVG 제작 과정은 매우 간단합니다. 선호하는 벡터 그래픽 편집기 (Illustrator, Sketch, Inkscape [무료], [shape 레이어를 사용하는 경우 Photoshop에서도 가능])에서 작업 할 수 있습니다. 저희가 사용하는 XD와 가장 많이 사용하는 Illustratord을 중심으로 설명하겠지만, 모든 소프트웨어에도 동일하게 적용하여 작업할 수 있습니다.

3-1. Adobe XD

macOS ⇒ 오브젝트 또는 아트보드를 선택하고 파일 > 내보내기로 이동하거나 Cmd + E를 누릅니다. windows ⇒ 오브젝트 또는 아트보드를 선택하고 파일 > 내보내기로 이동합니다.

프레젠테이션 속성: 각 SVG 태그에서 각 스타일 속성에 대해 별도의 XML 속성을 사용합니다. 이 포맷은 SVG 에셋을 Android Studio와 함께 사용해야 합니다.
내부 CSS: CSS 클래스와 함께 단일 스타일 태그를 사용하고 오브젝트 사이의 스타일링 설정을 동일한 스타일과 공유하여 파일 크기를 줄입니다.
임베드: 비트맵 이미지가 SVG 파일로 인코딩됩니다.
링크: 비트맵 이미지가 SVG 파일에 대한 참조와 별개로 저장됩니다.

3-2. Adobe illustrator

파일 > 내보내기 > SVG를 선택합니다.

프레젠테이션 속성: 각 SVG 태그의 개별 스타일 속성에 대해 별도의 XML 속성을 사용합니다. 이 형식은 Android Studio에서 SVG 에셋을 사용하는 데 필요합니다.
내부 CSS: 스타일이 동일한 객체 사이에서 스타일 지정 설정을 공유하는 CSS 클래스를 포함하는 단일 '
5-2. 외부 스타일
```
// 
```
```
// style.css 파일 내
.firstb { fill: yellow; }
.secondb { fill: red; }
```
6. JS 조작

외부 JS로 작업 할 때 (SVG 파일 내 코드를 삽입하지 않고) SVG가 인라인으로 HTML문서안에 내장되어 있으면, 다른 DOM요소처럼 타켓팅 할 수 있습니다. 를 사용하는 경우 contentDocument로 타겟팅 할 수 있습니다.
```
window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("firstb");
  var svgb2 = svgDocument.getElementsByClassName("secondb");
  svgb1[0].setAttribute("fill", "yellow");
  svgb2[0].setAttribute("fill", "red");
};
```
7. 애니매이션

SVG 애니메이션은 CSS3 애니메이션 또는 JS 애니메이션을 기반으로 한 애니메이션 효과를 적용할 수 있습니다. Snap.svg 와 같은 자바스크립트 라이브러리를 사용해 복잡한 애니메이션도 비교적 쉽게 만들 수 있습니다.

https://codepen.io/jjung-developer/pen/YzYbqQR

7-1. 인터렉티브 애니메이션

SVG 애니메이션에서 인터렉티브한 애니메이션 효과를 주려면 begin="mouseover"& begin="mouseout" 을 추가 하거나, CSS3 애니메이션에 SVG 요소에 클래스를 추가하고 호버에 스타일을 적용 할 수 있습니다.

https://codepen.io/jjung-developer/pen/QWaRNaN

8. 유의사항

💡 복잡한 벡터로 이루어진 **svg**는 자칫 png 이미지보다 용량이 커지고 코드가 복잡해질 수 있습니다. - IE8/안드로이드 2.3이하 버전에서는 **svg**를 지원하지 않습니다.

🗒 참고 자료

[React,ReactNative] 카카오 주소 검색 - 라이브러리 이용하기 (react-daum-postcode)

Tue, 05 Jul 2022 12:37:03 GMT

회사에서 RN작업을 하다가 카카오 우편 주소 검색 API을 사용 할 일이 생겼었다. 대기업 api답게 docs가 깔끔하게 정리되어있었지만... 남들 다 쉽다는 것도 나는 어렵기때문에...🫠

docs예제는 바닐라 js 로 되어있었고 레거시 코드가 많아 전부 리액트로 바꾸기에는 리소스가 많이 들어갈것 같다고 생각하던 참에 구글링을 하던 중 대부분의 사람들이 react-daum-postcode 라이브러리를 사용한다는 것을 알게 되었다.

차근차근 사용법을 보니 그렇게 어려워보이지 않아서 나도 바로 적용해보았다! 그리고 실제로도 매우 쉬웠다!!!

리드미에 나와있는대로 그대로 따라하면 된다

npm install @actbase/react-daum-postcode

or

yarn add @actbase/react-daum-postcode

나는 React Native 환경에서 작업을 하기때문에 추가로 webView를 설치했다

npm install react-native-webview
npx pod-install

주소 검색 API를 사용할 페이지에 react-daum-postcode를 import를 하고

import Postcode from '@actbase/react-daum-postcode';

코드를 적어준다

 getAddressData(data)}
 onError={function (error: unknown): void {
 throw new Error('Function not implemented.');
 }}
/>

const getAddressData = data => {
 let defaultAddress = ''; // 기본주소
 if (data.buildingName === 'N') {
   defaultAddress = data.apartment;
 } else {
   defaultAddress = data.buildingName;
 }

 navigation.goBack();
 route.params.onSelect({
   zone_code: data.zonecode,
   default_address: data.address + ' ' + defaultAddress,
 });
};

onSelected 옵션은 결과값을 클릭할때 실행되는 함수이고 나는 결과값을 클릭하면 이전 페이지로 결과값을 가져갔다

데이터를 console로 찍어보면

여기서 원하는 값을 추출하면 된다.

[React,ReactNative] Context API

Sat, 25 Jun 2022 13:55:13 GMT

리액트에서 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 컴포넌트가 부모자식 관계로 되어있지 않다면 컴포넌트 간의 직접적인 데이터 전달은 어렵다. 데이터를 자식 컴포넌트로 보내고, 다시 그 데이터를 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop이 많아지면 이 prop가 어디에서 왔는지 확인하기 정말 어려워진다.

그렇기때문에 각 어플리케이션에 알맞은 상태관리 툴을 선택해 상태를 잘 관리하는 것이 중요하다.

나 같은 경우에는 회사 앱 프로젝트를 작업하며 점점 늘어져가는 페이지 deps에 혼란을 느꼈다. (코드가 돌아가긴 하는데 이건 뭔가 아닌거같다는 느낌이 들었다) 그러던중 사수분께서 Context API로 관리해 보라는 말씀을 해주셨고 바로 적용을 해보았다.

🙃 Context API

ContextAPI는 react는 16.3 버전부터 정식적으로 지원하고 있다. Context API는 Redux와 같은 상태관리 라이브러리와는 달리 Provider, useContext, createContext 개념만 알면 적용가능하다. (그럼에도 Redux와 같은 상태관리 라이브러리를 쓰는 이유는 밑에서..)

✍🏻 createContext

먼저 createContext를 선언할 파일을 하나 만든다. (App.js에서 만들어도 상관은 없지만 컴포넌트 분리를 위해 나누었다)

context 객체를 만든다. 컴포넌트가 이 context를 사용하려면 해당 컴포넌트 상위에 provider로 부터 context를 정의한 변수 MyNameContext를 감싸면 된다
여기서 name은 값을 저장할 변수이고 changeName은 name을 바꿀 함수이다.

✍🏻 Provider

createContext를 선언한 파일 안에서 Provider를 사용 할 것이다. (이걸 이제 App.js에서 import 할 것이기 때문!)

provider는 정의한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
provider를 전달하는 변수는 꼭!!! value가 있어야한다.

위에서 만든 파일을 App.js에 import 한다.

선언한 MyNameStore를 context를 사용하고 싶은 컴포넌트 상위에 감싼다

이렇게 감싸게 되면 Content1과 Content2 컴포넌트에서는 Context에서 선언한 name과 changeName을 사용 할 수 있다.

✍🏻 useContext

useContext를 통해 Context 값들을 불러온다.

Content1에서는 name을 '호정'으로 바꿀 것이다
Context2에서는 name을 선언 할 것이다

위와 같이 ContextAPI를 사용한다면 provider하위에 context를 가진 component는 provider의 value로 가진 state가 변화할 때마다, 전부 re render된다. Context로 관리 하는 값이 위의 예시처럼 하나라면 성능에 큰 영향이 없겠지만 실제 프로젝트에서는 Context로 관리되는 값들이 많을 수도 있다. 관리하는 값이 많아질 수록 불필요한 render가 많아진다는 이야기다. 이러한 비효율을 대처하기 위해 나온 여러 상태관리 라이브러리들이 있다. 대표적으로는 Redux와 ReactQuery, Recoil이 있다. ContextAPI를 공부하면서 여러 라이브러리들에 대해서도 알아보았는데 (아주 살짝) 나중에 기회가 된다면 회사 프로젝트에도 상태관리 라이브러리를 도입한다면 좋을 것 같았다. 또한 현재 내가 따로 하고 있는 스터디에서는 ReactQuery를 쓰는데 상태관리 라이브러리는 처음이라 많이 헤맸었는데 이제는 뭔가 알아가는거 같아 이 부분도 나중에 포스팅 해보려한다!

[Swift] 나만의 iOS 앱 개발 입문 : iOS개발 강의 (1-2)

Tue, 07 Dec 2021 12:52:18 GMT

개요

패스트캠퍼스에서 진행하는 나만의 iOS 앱 개발 입문 : iOS개발 강의를 듣고 작성하는 글 입니다.

📅 2주차

이제 어느정도 swift라는 언어에 감이 잡혔다! 역시 모든 언어는 for문부터 돌려봐야 한다 ㅎㅎ 아직 문법이 익숙하지 않지만 그래도 이게 새로운 언어를 배우는 즐거움이니까 🧚🏻‍♀️

✅ Optional

ts의 optional과 비슷하다 있어도 되고! 없어도 되고! 타입이 string이어도 되고 아니어도 되고! 그치만 swift에서는 신기한게 있다 optional로 선언을 하고 변수에 값을 넣으면 박스에서 꺼내야한다는 것이다! 이것이 무슨말인가하면...

var carName: String?
carName = "탱크으~"

이런식으로 optional박스 안에 값이 들어가있다! 이제 값을 어떻게 박스에서 꺼내느냐가 핵심이다!

👉🏻 Forced unwrapping

print(carName!)

억지로 박스를 까는것이다!

👉🏻 Optional binding (if let)

if let unwrappedCarName = carName {
    print(unwrappedCarName)
} else {
    print("car name 없다")
}

if문을 사용하여 carName이 있다면 unwrappedCarName에 값을 넣어주고 없으면 없다는 print문을 실행한다. 이렇게 조건이 단순한 경우에는 level이 단조롭지만 깊은 조건을 만나게 되면 level이 아주 보기 힘들게 될 것이다. 이러한 문제점을 해결해주는 것이 guard이다

👉🏻 Optional binding (guard)

func printParsedInt(from: String) {
    guard let parsedInt = Int(from) else {
        print("Int로 컨버팅 안된다")
        return
    }
    print(parsedInt)
}
printParsedInt(from: "100")

위 if let보다 훨씬 간단해졌다! 그리고 return문을 통한 불필요한 코드 실행을 하지 않는다

👉🏻 Nil coalescing

let myCarName:String = carName ?? "모델s"
// 만약에 carName이 nil이면 모델s를 넣어라

박스를 까봤더니 값이 nil이면 default값을 주자!

✅ Array

swift의 array는 타입이 같은 것끼리만 담아야한다!

evenNumbers2은[2,4,6,8]이라고 가정한다

👉🏻 배열 추가

evenNumbers2.append(10) // 배열 추가
evenNumbers2 += [12,14,16] // 배열 추가
evenNumbers2.append(contentsOf: [18,20])

👉🏻 isEmpty

let isEmpty = evenNumbers2.isEmpty

evenNumbers2가 비어있나? boolean값을 반환한다.

👉🏻 count

evenNumbers2.count

배열의 개수가 몇개인지 [1,2,3] => 3반환

👉🏻 first

let firstItem = evenNumbers2.first

evenNumbers2의 첫번째 값을 나타낸다. 반환값은 배열이 빈 값일 수도 있기때문에 옵셔널로 반환이 된다.

👉🏻 min, max

evenNumbers2.min()
evenNumbers2.max()

👉🏻 ... , contain, insert

let firstThree = evenNumbers2[0...2]
evenNumbers2.contains(3) // 3을 반환하는 것이 있니? boolean으로 반환
evenNumbers2.insert(0, at: 9) // 9번째에 0을 넣는다 (나머지는 뒤로밀림)

... => 배열의 0번째부터 2번째까지 가져온다 ([2,4,6]) contains => 해당값을 반환하는것이 있으면 true 없으면 false insert => 값을 바꿔준다.

✅ Dictionary

key값은 유일해야한다.

var scoreDic:[String:Int] = ["jjung":20, "ho":10,"min":40]
if let score = scoreDic["jjung"] {
    score
} else {
    print("스코어 없음")
}// 20
scoreDic["won"] // nil

👉🏻 isEmpty, count

scoreDic.isEmpty
scoreDic.count

👉🏻 Dictionary 업데이트, 추가

scoreDic["jjung"] = 99 // 업데이트
scoreDic["gg"] = 100 // 추가

👉🏻 Dictionary 삭제

scoreDic["gg"] = nil

👉🏻 For loop

for (name, score) in scoreDic {
    print("\(name), \(score)")
}

👉🏻 keys

for key in scoreDic.keys { // key값만 가져옴
    print(key)
}

[Swift] 나만의 iOS 앱 개발 입문 : iOS개발 강의 (1-1)

Mon, 29 Nov 2021 12:29:40 GMT

개요

패스트캠퍼스에서 진행하는 나만의 iOS 앱 개발 입문 : iOS개발 강의를 듣고 작성하는 글 입니다.

📅 1주차

핑계를 적어보자면... 강의가 1주차 하나만 열려있길래.. (1)만 들었는데 갑자기(?)보니까 (2)까지 열려있는거다!! 분명 주말전까지만해도 안열려있었는데 😱 음.. 일단은 (1)까지만 들었던 내용을 정리해보려한다. 나는 프론트엔트 개발자이다. 지금까지는 js를 공부해왔으며, 지금 회사 코드도 따라가기 벅차지만 ㅠㅠ.. 뭔가 refresh한 공부를 하고싶었다...^^ (그리고 예전부터 ios개발을 꼭! 해보고싶었다) 누가보면 고작 2달된 프론트엔드 신입이... js나 공부하지... 라고 말 할 수 있겠지만 😕 회사공부에 방해가 되지 않는 선에서 공부하려 한다!

✅ 튜플

var tuple : (string,string,Bool) = ("choi","hojung",true)
print("성 : \(tuple.0) 이름 : \(tuple.1)")

Swift 에서 튜플이란 다양한 값(데이터)들의 묶음 이라 할 수있다. 튜플의 구성 요소들은 서로 같은 타입일 필요가 없다. 같은 타입을 여러개 사용해도 상관없고, 각각 다른 타입을 사용해도 상관없다는 의미이다. 또한 튜플 안에 들어갈 수 있는 값들의 개수도 사용하고 싶은 만큼 사용이 가능하다. 개인적으로 느끼기엔.. 배열 + 딕셔너리 = 튜플 (?) 이라는 생각이 들었던 데이터 타입이다!

✅ var, let

js에서는 var와 let은 값을 바꿀 수 있는 변수 선언 방식이다! 하지만! swift에서는 다르게 쓰인다. var는 js와 동일한 변수 선언 방식이고 let은 반대의 개념이다! js에서 const와 같이 값을 바꿀 수 없다.

✅ ... range

일일히 for문으로 안돌려도 0~10까지의 숫자를 표현 할 수 있다!

✅ for문

기본적인 for문과 크게 다르지 않다! 주목해야 할 것은 3가지! 1. _의 사용 : i가 밑에서 쓰이지 않는다면 굳이 i로 선언하지 않고 _로 나타내도 된다. 2. where의 사용 : where를 사용하면 for문안에 if문을 사용하는 것과 같다! 3. continue의 사용 : 건너 뛰기가 가능하다!

✅ while문

마찬가지로 기본적 while문과 크게 다르지 않다. 1. 조건에 ...range, _, where 가능 : 위의 for문에서 설명

[ReactNative] Component, Navigation

Fri, 03 Sep 2021 02:54:57 GMT

RN을 공부하며, React와 비슷했던 점, 달랐던 점, 새로 알게 된 점 등을 이야기 해보려 한다!

내가 느낀 RN의 첫 인상은 음? 응? 비슷한데 묘하게 다르네... UI는 역시 아이폰 💫

👉🏻 UI구현

기존에 웹 ui구현과 크게 다른점은 flex속성이다. RN은 기본적인 flex속성이 열(세로)(column) 방향으로 이루어져 있다. 그래서 우리가 웹에서 했던 속성대로 부모에 flex를 주게 된다면 우리의 생각과는 다르게 ui가 표출된다

1:1:1

1:3:1

부모태그의 flex:1은 화면 전체를 사용하겠다는 이야기이고, 자식 태그들은 부모 View 크기의 특정 비율만큼 차지한다! flex와 %는 부모의 크기에 영향을 받으므로 이 속성을 사용할 때, 부모의 크기를 지정하지 않았는지 잘 확인해야한다! 만약, 세로정렬이 아닌 가로정렬을 나타내고 싶다면 Flex Direction 스타일을 사용한다. Flex Direction은 row(행), column(열) 속성을 나타낸다

👉🏻 댓글 달기 기능

전체적인 로직은 react와 다르지 않았다. 다른 점이 있다면 html태그들이 아닌 Text, View같은 RN태그들을 쓴다는것! input도 마찬가지였다.

input과 button에는 react와 비슷한 Attributes가 들어간다. Button에서

여기서, 새로알게된 부분은! 함수 사용법

()=>{}로 map함수를 돌렸었는데, 함수 내 로직이 전부 return문일 경우 ()=>()로 함수를 작성하게 되면 return문은 생략되고, 함수 내의 코드가 전부 return이 된다! 처음엔 RN에서만 그렇게 쓰는 줄 알았는데, 혹시나 해서 js에서 돌려보니까 js에서도 가능하다! react에서도 가능!

👉🏻 picker

공식문서에서 제공해주는 picker! 향후 릴리즈에서는 제거 될 예정이라고 한다! 해당 warning에서 알려주는 react-native-picker/picker를 사용해보았다.

selectedValue에서 초기값을 설정해주고 onVauleChange를 통해 picker를 제어한다.

페이지 이동을 위한 Navigation이다. stack, tab, draw를 배웠다. 같은 라이브러리가 사용되며, 전체적은 flow는 같다. 다양한 옵션을 통해 텍스트, style을 할 수 있으며, Stack.Screen을 씀으로써 navation에 있는 함수들을 porps로 전달할 수도 있다. Navigator를 쓰며 react에서 썻던 동적 라우팅과 매우 유사하다고 느꼈다! props로 값을 넘겨주는것, parms로 값을 받는것 등등.. 비슷하면서 다른 react와 rn !

✍🏻 Stack

** 왜 벨로그에만 gif를 올리면 깨지는지 모르겠다 ㅠㅠ user페이지에도 To User Home이라는 버튼도 있고.. 값 넘겨주는것도 보이는데 ㅠㅠ

버튼을 통해 페이지 이동이 가능하다. props로 값을 넘겨주고 parms로 값을 받을 수 있다. (아래 Navigation동일)

✍🏻 Tab

** 여기서도 깨진다 ㅠㅠ tab이 활성화 되면 해당 탭이 토마토색으로 변하는데 ㅠㅠ

✍🏻 Drawer

** 여기서도 깨진다 ㅠㅠ!

[ReactNative] 개발환경 세팅

Tue, 31 Aug 2021 11:49:05 GMT

기업협업 1일차.. ReactNative를 쓰기 위해 개발환경 셋팅을 시작했다. 근데.. 한줄 입력할때마다 오류 발생...^^ 가뜩이나 불안정한 RN인데 심지어 m1오류까지 더해지니..🤦🏻‍♀️

이 블로그를 보고 개발환경을 셋팅했다. 여러 블로그들에 환경세팅법은 많을테니 환경세팅 중 발생한 오류들에 대해 글을 쓰고자한다.

🚫 No similarly named formulae found

Watchman 설치중 만난 오류 문구..

rm -fr $(brew --repo homebrew/core)

brew의 코어 디렉터리를 삭제 후 다시 설치하면 된다!

🚫 Error : unknown command cask

가장 많은 시간을 뺏겼던 오류,,, JDK를 설치를 하고, version확인을 했지만 계속 cask 오류가 떳다 🥺

arch -arm64 brew install --cask

검색을 해보니까 m1칩 오류였다 *arch -arm64로 다시 install해주며 해결 *✨

🚫 The following build commands failed

와와 이제 거의 다 했따!!! run해보자!!!!! 응~ 안돼 ~ 🤯

sudo gem install cocoapods --pre
pod update


cocoapods에서 오류가 났던것이다!
대체,,, 오류가 안나는 곳이 없어 😇




# 🚫 npm ERR! code ELIFECYCLE

이제 되겠지 ? 하고 run을 다시 돌려봤지만 또 다시 오류...

> ```
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

npm 캐시와 node_modules, package-lock.json을 제거하고 npm 을 다시 install 해주면 된다.

🚫 duplicated files or mocks. please check the console for more info

와와 된다!!! 신나게 rn을 구경 하던 중... 나도 모르게 이상한 짓을 했다보다... (기억안남 😅) 이상한 에러가 시뮬레이션 창에 뜨는 것이다!

이러한 오류에 대한 원인은 2가지가 있는데

package.json 파일의 name 값이 react-native 규칙과 다르다는 것
루트 폴더 내에 package.json 파일이 두 개

나같은 경우는 2번째 경우였다. 무슨 이유에선지.. package.json이 두개가 생긴지는 모르겠다...ㅎ

🔥 TMI

꼬박 하루가 걸렸던 RN설치... 터미널을 너무 무서워 하는 나였는데 이번 계기로 조금은 극복을 한 것 같다 💪🏻 내일부터는 다시 TS 공부와 RN 공부 시작!!

[TypeScript] interface

Sun, 29 Aug 2021 09:46:06 GMT

interface

let user:object;

user = {
    name : 'jjung',
    age:26
}

console.log(user.name);

이렇게 작성하면 ts에서는 user.name에서 오류가 난다!

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    name : string;
    age : number;
    gender? : string; // 있어도 되도 없어도 되는 옵셔널
    readonly birthYear : number; // 읽기전용 속성으로 수정 할 수 없음
    [grade:number] : Score;
}

let user : User = {
    name : 'jjung',
    age:26,
    gender:"fale",
    birthYear : 1996,
    1:'A',
    2:'B',
}

user.gender = 'male'; // 수정또한 가능

이럴떄는 interface를 사용하자! 각각의 설명은 코드에 적어놓았다! ? 옵셔널, readonly, [], score

interface Add {
    (num1:number,num2:number) : number;
    // 매개변수 : 리턴값 or void
}

const add : Add = function (x,y) {
    return x+y;
}
add (10,20);

interface IsAdult {
    (age:number) : boolean;
    // 인터페이스에서 함수의 속성값도 지정이 가능하다.
}

const a :IsAdult = (age) => {
    return age > 19;
}

a(26) // true

이렇게 함수로도 나타낼 수 있다! ()은 매개변수를, :는 리턴값을 나타낸다

함수를 좀 더 자세히 보면...

function addFun (num1:number,num2:number):number {
    return num1+num2
}

function IsAdultFun (age:number):boolean {
    return age > 19
}

function hello(name?:string){
    return `Hello, ${name || 'world'}`
}
function hello2(name = "world"){ // 매개변수에 초기값 할당 , 자동으로 타입은 string이 된다. 매개변수에 초기값이 있으면 자동으로 옵셔널이 된다.
    return `Hello, ${name}`
}
const result = hello();
// 매개변수를 옵셔널로 지정을 하여 name이 있으면 name을 출력하고,
// 없으면 world를 출력합니다. (선택적 매개변수)
// 매개변수가 두개 일 경우 반드시 선택적 매개변수는 뒤에 위치하고 있어야한다.

function addFun2 (...nums:number[]) { // 입력하는 모든 것을 nums에 담는다. 스프레드 연산자는 반드시 배열로 할당을 해야한다.
    return nums.reduce((result,num) => result + num,0);
}

addFun2(1,3,4);
// 스프레드 연산자를 통해 매개변수를 배열로 만들어줌

함수를 저장할 변수의 타입은 화살표 기호를 이용 할 수 있다. 함수를 구현하는 코드에서는 따로 타입을 정의하지 않아도 된다.

const getText: (name:string, age:number) => string = function(name,age) {
 return '123';
}

[TypeScript] 타입스크립트란?

Sun, 29 Aug 2021 07:41:46 GMT

TypeScript

우리가 사용하는 브라우져들은 타입스크립트를 이해하지 못한다. 그래서 js로 변환해서 브라우져에서 사용할 수 있다. 이런 번거로운 일이 있음에도 불구하고 우리는 왜 typescript를 쓰는것일까?

javascript (동적언어) : 런타입에 타입이 결정 / 오류 발견 typescript (정적언어) : 컴파일 타임에 타입 결정 / 오류 발견

typescript는 코드 작성 시간은 길어지겠지만, 안정적이고 빠르게 작업을 진행 할 수 있는 장점이 있다!

function add (num1,num2) {
    console.log(num1+num2);
}

add(); // NaN
add(1); // NaN
add(1,2); // 3
add(2,3,4); // 5
add('hello' + 'world'); //helloworld

이러한 코드를 js에서 실행한다고 했을때, 오류없이 실행이 될 것이다. 그러나 typescript에서 실행했을때는 친절히(?) 오류들을 알려준다

매개변수num1의 타입이 any타입이다. 라고 경고를 주는 것이다! any타입 일 수 도 있지만, 지양하는 것이 좋다.

add함수는 2개의 매개변수를 가지고 있는데 가지고 있는 매개변수는 0이다. 라고 알려준다.

그렇다면 typescript는 어떻게 작성할까?

function add (num1:number,num2:number) {
    console.log(num1+num2);
}

:을 하고 원하는 타입을 적어준다. 배열도 마찬가지다

function showItems (arr:number[]) {
    arr.forEach((item) => {
        console.log(item)
    })
}

데이터 타입

// let fruit:string = 'orange'
// let age:number = 20;
// let isAdult:boolean = true;
// let a:number[] = [1,2,3];
// let a2:Array = [1,2,3];

let fruit = 'orange'
let age = 20;
let isAdult = true;
let a = [1,2,3];
let a2 = [1,2,3];

이미 값이 입력되어 있는상태라면 위의 :데이터타입은 생략이 가능하다.

//튜플

let b:[string,number];

b=['z',1];
// b = [1,'z'];

배열안의 각각 타입을 지정 할 수 있다.

// enum 비슷한 속성들끼리 모아놓음
enum Os {
    window = 3,
    ios = 10,
    android
}

let myOs:Os;
// myOs에는 Os의 window,ios,android 만 입력할 수 있다.
// 특정값만 입력할 수 있도록

myOs = Os.window;

enum은 비슷한 속성끼리 모아놓은 데이터이다. 값은 숫자 또는 문자열이 들어 갈 수 있다. 단 문자열을 할당 할 경우 단방향 맵핑만이 가능하다.

enum Fruit {
    Apple, // 0
    Banana = 5 , // 5
    Orange, // 6
}
const v1: Fruit = Fruit.Apple;
const v2: Fruit.Apple | Fruit.Banana = Fruit.Banana;
console.log(Fruit.Banana); // 5
console.log(Fruit['Banana']; // 5
console.log(Fruit[5]); // Banana

enum에 초기값을 할당하지 않으면 자동으로 첫번째 요소에 0이 할당된다. 명시적으로 값을 입력하지 않으면 이전 원소에서 1만큼 증가한 값이 할당된다.

함수

함수 오버로드

// add 함수 작성하기
// 두 매개변수가 모두 문자열이면 문자열을 반환한다.
// 두 매개변수가 모두 숫자이면 숫지를 반환한다.
// 두 매개변수를 서로 다른 타입으로 압력하면 안된다.

function add(x:number | string, y: number| string): number | string {
    if(typeof x === 'number' && typeof y === 'number'){
        return x+y;
    } else {
        const result = Number(x) + Number(y);
        return result.toString();
    }
}
const v1:number = add(1,2);
console.log(1,'2');

이러한 경우 console.log(1,'2');는 작동을 잘 하고, const v1:number = add(1,2);에서는 오류가 난다. 에러가 나는 이유는 함수가 number 또는 string을 반환하기 때문에 만약 string을 반환하게 되면 number가 아니라서 오류가 나는 것이다.

이러한 경우의 해결법이 함수 오버로드 함수를 정의한 코드 위에

function add(x:number, y:number) : number;
function add(x:string, y:string) : string;

두 줄을 추가해준다. 위에 두 줄은 단지 타입 정보이기 때문에 컴파일해서 js가 됐을때는 타입정보는 제거가 된다!

named prameters

function getText({
    name,
    age = 15,
    language,
}: {
    name: string;
    age: number;
    language?: string;
}) : string {
    const nameText = name.substr(0,10);
    const ageText = age >= 35 ? 'senior' : 'junior';
    return `name: ${nameText}, age: ${ageText}, language: ${language}`
}

매개변수를 객체로 감싸주고, 그뒤에 타입을 정의해준다.

TIL 34 - React Function & hook (2)

Sun, 15 Aug 2021 11:29:12 GMT

👉🏻 React Hook

✍🏻 useCallback

함수 안에서 사용한 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재새용한다. 함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다. useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다. 함수가 새로 만들어지는 것이 성능을 떨어트리지는 않지만, 컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할 때 함수를 재사용하는 것이 필요하다.

const onCreate = useCallback(() => {
    const user = {
        id: nexId.current,
        username,
        email,
    }
    setUsers(users.concat(user));
    // setUsers([...users, user]);
},[users,username,email])

기본형태 useCallback(function,deps)

function : 재사용 할 함수
deps : 검사할 특정 값을 담은 배열

✍🏻 useHistory, useLocation, useParams

우리가 1차 프로젝트때 사용했던 props와 유사한 hook이다. 2차플젝때는 hook으로 사용하면 편할 것 같아 알아보았다.

✅ useHistory

props를 통해 받던 history를 한줄의 함수로 받을 수 있다.

const Home = (): JSX.Element => {
  const history = useHistory();
  // history를 props에서 얻어왔을 때 처럼 동일하게 사용 가능하다.

  return (
     history.push('/auth')}>
      Hello!
    
  );
};

export default Home;
// withRouter hoc가 필요없다.

✅ useLocation

useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hook이다

import React from 'react';
import { useLocation } from 'react-router-dom';

const Home = (): JSX.Element => {
  const location = useLocation();
  console.log(location);

  return (
    <>
  );
}

export default Home;

위 코드에서 console을 찍어보면, pathname과 search라는 객체을 알 수 있다.

pathname은 만약 웹 url이 http://localhost:3000/home?keyword=리액트 이라고 가정했을때, 쿼리스트링을 제외한 /home이 출력 된다

search는 쿼리스트링을 분석해야하는 상황에서 유용하다. 앞에서 pathname이 출력했던 부분을 제외한 쿼리스트링이 출력되며, 결과는 ?keyword=리액트 라는 출력결과가 나온다. 출력된 값은 query-string이라는 쿼리스트링 파싱 라이브러리를 이용하여 제대로 된 값을 얻어낼 수 있다.

import React from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const Home = (): JSX.Element => {
  const { search } = useLocation();
  // search: ?keyword=리액트

  const { keyword } = queryString.parse(search);
  // keyword 출력결과: "리액트"

  return (
    <>
  );
}

export default Home;

✅ useParams

useParams는 path parameter의 정보를 얻을 수 있는 hooks이다.

기존에는 match props를 이용하여 match.params.id의 형식으로 접근을 해야 했지만, useParams를 이용하면 좀 더 간단하게 접근 가능하다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.

  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.

  return (
    <>
  );
};

export default Home;

TIL 33 - React Function & hook (1)

Sat, 14 Aug 2021 14:03:12 GMT

React Hook

원래 class에서만 state를 사용하여 state의 값을 관리할 수 있었다. hook이 나오게 되면서 Function에서도 state를 사용할 수 있게 됐다. 이러한 계기로 function이 class와 같은 급으로 부상하게 되었다. 또한 라이프 사이클도 사용할 수 있게 되었다

👉🏻 함수형에서 props를 받기

매개변수로 들어가는 변수명은 아무렇게나 지어도 된다 (보기 편하게 props로 넣었다.)

function FuncComp (props) {
  return(
    
      {props.initNumber}

    
  )
}

👉🏻 함수 내장 hook

✍🏻 state를 호출하는 useState()

useState는 length가 2인 배열을 반환한다. [0]에는 초기값이 들어가고, [1]에는 setState함수가 들어간다.
이러한 useState를 나타내는 방법으로는

const [age,setAge] = useState(26)

✍🏻 라이프 사이클을 나타 낼 수 있는 useEffect()

첫번째 인자로 함수가 들어가고 render가 끝난 후 호출된다. 마치 class함수의 componentDidMount와 componentDidUpdate와 같다.

const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

그럼 componentWillUnMount는 어떻게 호출할까? return에 함수를 주게되면 return 함수가 실행될때 componentWillUnMount와 같다.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

🔥 불필요한 render를 막는법

const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

위 코드의 useEffect안에는 count 변수만 있다. 하지만 컴포넌트 내의 다른 변수들이 상태값이 바뀌면 다른 변수들도 render가 새로 된다. 이렇게 불필요한 render를 막는 방법이 있을까? useEffect의 두번째 인자로 해당 변수를 추가해주면 count 변수가 바뀌지 않는다면 다른 변수의 상태값이 바뀌어도 render가 되지 않는다.

[Project] motemote 클론 코딩 회고록

Fri, 13 Aug 2021 07:46:37 GMT

🔥 motemote 클론 코딩 회고록

위코드에 들어온지 한달이 되던 날, 우리는 1차 프로젝트를 시작했다. 불과 한달 전까지만해도 for문 if문을 겨우 돌리는 우리였는데,, 플젝을 시작하라니 ... 😱 역시나 예상대로 처음엔 우여곡절도 많았고 너무 힘들었다 하지만 너무너무너무 얻은게 많은 나의 첫 플젝 🥺

✍🏻 1차 Sprint

조 편성이 발표 됐고, 우리는 곧장 만나 사이트를 확인했다. 사실 모트모트 사이트를 나현님 발표때 들어보긴 했는데 그 때 들은 것을 제외하면 초면인 사이트였다. 모트모트는 문구류를 파는 쇼핑몰이었고 flow는 딱 기본적인 쇼핑몰이었다.

우선 내가 빨리 쳐낼 수 있는 css 요소가 대부분인 nav,footer를 맡았다. 실제로도 멘토님들의 빠른 피드백과 수정, merge가 이뤄졌다.

👉🏻 Mian

1. 슬라이드 구현

라이브러리 slick을 써서 구현했었다! slick는 퍼블리셔때 많이 써봤던 라이브러리라 음,, 다를게 없네,, 쉬운데? 하고 썻는데 라이브러리는 1차때 쓰면 안된다는 사실을 뒤늦게 알았다 ^^ ㅎㅎㅎㅎㅎㅎ 부랴부랴 로직을 짜기 위해 노트와 펜을 꺼냈던 기억이... 로직이 그렇게 어렵지 않아 큰 이슈없이 구현했던 기능이다.

2. BEST ITEM

Best Item api를 fetch를 통해 받아와 뿌려줬다
조건부 랜더링을 통해 할인금액이 있으면 밑에 빨간색으로 할인금액을 표출시켰고 원가에는 line-through를 주어 삭제(?)처럼 표출시켰다
조건부 랜더링을 통해 stock(재고)이 0일 경우 sold out라벨을 표출시켰다.
이미지는 master가 어떤 비율로 올릴지 모르니까, 이미지가 비율대로 줄어들 수 있도록 css를 적용시켰다. (참고로 이 코드는 내가 퍼블리셔때부터 자주 쓰던 코드이다! 좋은건 나눠쓰기! 저한테 찾아오면 코드 설명을 자세히 해드리겠습니다 😇)

👉🏻 ProductList

3. Product List

BestItem에 있던 레이아웃과 동일!
color filter를 api로 받아오는 것이 아니는 해당 컬러가 display:block, display:none이 되도록 코딩하였다.
자세한 설명은 아래에서 하겠다!!!

✍🏻 2차 Sprint

1차 스프린트가 금요일날 끝나고, 나는 주말내내 리뷰 post와 get을 위해 공부를 했다. 특히 이미지를 첨부파일로 올리는 방식을 하고싶었기때문에 form Data를 사용하여 로직을 짜놨다. form Data를 구글링 하던중 FileReader도 알게 되어 같이 공부를 했다. (back api가 완성 된 상태가 아니라 테스트도 못해보고 혼자 생각해서 로직을 짯어야 했다 🥺) 또한 axios도 같이 공부하여 fetch 대신 write에는 axios를 사용했다.
생각보다 코딩이 너무 일찍끝나버렸다...ㅎ 처음에 리뷰를 하고싶었던 이유는 form data도 있었지만 완전한 CRUD를 하고싶었다. 그치만 아직 다른 팀원들은 작업중이기에.. 시간이 촉박해보여 나현님과 같이 장바구니를 하기로 하였다. 나현님이 레이아웃 및 컴포넌트는 전부 나눠놓으신 상태였고, 같이 get post path delete만 api통신을 하면 되는 상태였다.

👉🏻 Review

1. 리뷰 get

api의 결과 값에 따라 alert창을 띄워주었다. (리뷰 권한이 없습니다!,로그인 후 이용해주세요!,이미 작성하신 상품입니다!)
모든 조건이 맞았을 때 this.props.history.push을 이용하여 페이지를 이동하며 state에 itemId값을 들고 갔다
모든 리뷰 리스트의 별점을 배열로 만들어 reduce를 이용하여 리뷰 평균 평점을 나타냈다

2. 리뷰 post

별점을 onMouseOver와 dataset을 이용하여 마우스가 hover했을때 별점이 반응하도록 했고, 클릭했을때는 고정값으로 값을 넘겨주었다.
FormData를 이용하여 axios로 body를 보내주었다
자세한 설명은 아래에서 하겠다!!!

👉🏻 Cart

1. 수량변경

업,다운 버튼을 누르면 수량이 변경되며 총 결제 금액이 바뀐다.
자세한 설명은 아래에서 하겠다!!!

2. 삭제

삭제를 누르면 해당 아이템 삭제된다
자세한 설명은 아래에서 하겠다!!!

3. 장바구니로 이동하는 팝업 문구

만약에 장바구니에 해당 아이템이 있으면 "이미 있는 상품입니다. 장바구니에 추가하시겠습니까?" 해당 아이템이 없으면 "장바구니로 이동하시겠습니까?"라고 뜬다.
여기에 대한 이야기도... 자세한 설명은 아래에서 하겠다!!!

✍🏻 우여곡절 우당탕탕 🤸🏻‍♂️

✅ git

브랜치에 익숙하지 않아 계속 한 브랜치에서 여러 작업을 하고 다른 브랜치로 옮겨갈때 기존에 브랜치에서 작업했던 작업물이 날라가는 일이 발생하였다 😱 다행이 간단한 css파일이라 금방 작업을 다시 했지만 다시는 이런일이 반복되면 안되니까... 온 사방에 🌟브랜치 확인 브랜치 확인🌟 이라는 문구를 써놓고 남은 플젝을 이어갔었다!

✅ Product List

🔥 1차 시도

state에 selectColor를 넣어 선택을 한 color가 selectColor에 넣어지게 했었다. 그렇게 했더니... state에 있는 selectColor가 모든 section에 적용이 되니 다른 section에도 해당 color가 적용이 되어 버렸다 🥺

🔥 2차 시도

무한 삽질을 하고 있었던 나에게... 성훈님이 state에 담는 color값을 배열로 받아 그 인덱스와 section Index가 일치하게 하면 되지 않을까요? 라고 힌트를 쓱 던져주고 사라지셨다..ㅎㅎ 다시 또 무한 삽질 중 드디어 됐다!!! 🧚🏻‍♀️
Array() 내장함수를 통해 원하는 배열만큼 길이를 만들어주고, fill을 통해 ''빈 값으로 배열을 만들었다. 해당 color를 클릭했을 때 clickColorDefault함수를 실행시켰다. clickColorDefault함수는 dataset을 통해 color값을 받아 오고, 그 컬러 값을 selectColorset의 인자값으로 sectionIndex값과 함께 넘겨준다. selectColorSet은 배열의 불변성을 유지하기 위해 스프레드 연산자를 통해 새로운 변수에 복사를 해주고, sectionIndex 값에 color값을 넣어주고 setState을 해준다!
data-set의 활용을 처음 알게 해준 color Filter,,,! 사실 api를 받아와 get을 해주면 쉬운 작업이었겠지만 조금은 다른 방식으로 해보고 싶었다 (실무에서는 api을 받아와 뿌려주는 방식을 더 많이 쓰겠지...?ㅎㅎ)

✅ Review post

하나도 버릴 것 없는 코드,,,,, 🧚🏻‍♀️ 정말정말 고생 많이 했던 코드다 🥺...
주말에 Form Data와 FileReader를 공부하며 작성했던 코드! 드디어 백과 맞춰보는 날...! 두근두근 500에러^~^ ㅎㅎㅎㅎㅎ 500에러가 떳어도 나는 안심하지 못했다 ㅠㅠ,, api문제가 큰 확률로 500에러가 뜨지만 양쪽 다 처음 하는 작업이기에 혹여나 내 잘못일수도 있기에 여기 저기 종성님 선호님과 함께 알아봤다. 알아본 결과! 나는 form Data로 데이터를 주고 있었는데, api에서는 json으로 받고있으니 이게 될리가 없었다 🤦🏻‍♀️ 선호님과 종성님이 이틀동안 작업한 결과,,, 성공 🧚🏽‍♂️ 셋이서 엑박이 아닌 사진이 뜨는걸 보고 소리를 질렀다 🥳 ㅎㅎㅎㅎㅎㅎㅎㅎ
정말 API의 중요성을 느꼈던 부분이었다. 내가 원하는 기능이 있는데 API가 없으면 어쩌지? 혹은 반대로 백은 API구현을 다 해놨는데 내가 그걸 앞에서 못받아주면 어쩌지? 라는 생각이 들었다. 내가 원하는 기능을 끝까지 붙들고 API를 만들어준 종성님과 선호님께 너무 감사한마음이 든다 👍🏻

✅ Cart 수량변경

나현님이 sos를 했던 수량변경 부분 문제상황은 detail에서 수량이 정해져서 cart로 넘어오는데 up버튼과 down버튼을 눌렀을때 +1씩 total금액이 늘어나는 것이 아닌 +1을해도 detail에서 수량이 정해져 온 만큼 늘어나는 것이었다!
나는 index를 이용하여 내가 클릭한 이벤트 index와 같으면 그 객체의 수량만 up시켜주기 라는 로직이 떠올랐다. map을 통해 아이템들을 출력시키고 있었기에 그렇게 클릭한 이벤트의 index를 찾았는데... 찾았는데.... 어떻게 +1시키지....?ㅎㅎ... 성훈님 sos!!! "로직은 굳! 불변성을 지키면서 +1시키면 됩니다!"
나는 문득 종택님의 위스타그램 코드 리뷰가 생각났고! 그걸 활용해서 우리는 코드를 작성했다!
마지막으로 도현님이 +1과 -1함수가 같은데 합칠 수 있지 않을까요? 라고 말씀을 해주셨고 드디어 나온 최종코드 💫

✅ Cart 버튼이 왜 맘대로 작동하지..🤯

api를 호출 하려면 Index가 필요해 index를 인자로 받오는 함수였다. 버튼을 onClick을 하면 함수를 호출하도록 했고, 그렇게 했더니..... 왜 페이지가 로딩 되자마자 함수가 작동하는거지??? ()을 안쓰면 어떻게 하지?? 매개변수로 넘겨줘야하는데???? 😱
콜백에 화살표 함수를 사용하면 됩니다!!!! 정말 쓸모가 많을 것 같은 코드이다 🔥

✅ Cart 삭제

delete api는 뭐 삭제만 하면 되니까 쉽지~ 라는 나의 큰 착각...🌟
문제상황은 삭제버튼을 클릭하면 db에는 삭제가 제대로 실행이 되는데 우리 쪽에서는 다시 get을 해줘도 새로고침이 되지 않아 수동으로 새로고침을 해야하는 상황이었다! 이걸로 4시간을 붙잡고 있었다~~ 이것때문에 점심도 안먹으려는거 선호님이 점심먹는데 데리고 가주셨다....
4시간을 삽질한 결과는 조금은 허무했다..(아니야 얻은게 많아.... 호정아)

.then(data => data.json())
.then(data => {
  this.getCartData();
});

처음에 작성했던 코드이다. 여기서 나는 대단한 착각을 했었다. 이거는 get이 아니라 post인데 then을 통해서 나는 뭘 받아오는데??? 왜 data를 json으로 파싱하고 있었지??? api에서는 성공을 해도 아무것도 보내주질 않는데... 왜냐구? post니까!! (MESSAGE를 받을 수 도 있지만 해당 api는 MESSAGE를 보내주지 않고 있었다...)
data를 받아오는 것이 아닌 status를 받아와 status가 204일때, get을 하는 함수를 실행하도록 로직을 바꾸었다. 정말 너무 힘들었던 4시간이었다... 🤯 중간에 울뻔했던건 비밀 ^-^

✅ Cart로 이동하는 팝업 문구

결과부터 말하자면 이 부분은 포기한 부분이다.. 🙇🏻‍♀️ (포기는 아니고.. 효율성을 위해.... 음...🤔) 결국엔 종성님과 선호님이 api에서 처리해주는 걸로 해주신 부분..
문제상황은 장바구니에 해당 아이템이 있으면 "이미 있는 상품입니다. 장바구니에 추가하시겠습니까?" 문구가 해당 아이템이 없으면 "장바구니로 이동하시겠습니까?"문구가 뜨고 이동하는 api uri도 달라 버튼도 각각 만들어주어야했다. 조건문을 통해 문구를 제어하면 쉽게 풀리지않을까? 라고 생각했었다.. 근데 왜 자꾸 반대로 뜨니....? 그럼 반대로 if문을 적자!! 응? 왜 텍스트랑 uri가 반대니...? 이 루트를 무한 반복 겪는데.... 선호님과 종성님이 😇처럼 나타나 api에서 처리해주는 걸로 바꿔주셨다... 당장 내일이 발표라 해결된 것만 확인하고 넘어갔다
뒤늦게 확인을 해보니 부모 컴포넌트에서 map이 돌아가고 있고 자식 컴포넌트에도 조건부 렌더링이 걸려있는데... 이게 문제였을까...? 아무튼 해결과는 별개로 너무 아쉬웠던 부분이었다 🥺

✅ 동적라우팅

뭔가 그냥 멀리서 봤을때부터 어려워 보였던 동적 라우팅... 1차 스프린트때 연욱님께 한 5번 물어보고.. 도현님께도 3번정도 물어본 부분이다 ㅎㅎ 두 분다 2차 스프린트 가게되면 하게 될거라고 이야기 하셨지만 나는 그냥 얼른 해버리고 싶었다 .. 성격급한거 여기서 나오고.. ㅋㅋㅋ 그래서 1차 스프린트를 마무리 하며 내가 구현한 nav -> list, main->detail부분까지는 잡아 놨었다.
종성님이 주신 api명세서 보고 뚝딱 하니 너무 신기하게도 정말 뚝딱 하고 내가 원하는 화면이 나왔다 😱 그렇게 한번 물꼬가 트이니 2차스프린트 막바지에서도 동적 라우팅 부분에서 막힌 것 없이 술술 흘러갔다! (다른 부분에서 오류 폭팔이었지만 🔥)

📌 나의 첫 프로젝트를 마치며..

여기까지 회고록을 작성하는데 5시간 정도 걸린 것 같다.. 그만큼 내가 배운게 많고, 느낀점이 많았다는거겠지?

처음 팀원이 발표 됐을때 다들 말을 몇번 해보지 않은 분들이 대부분이 었다.. 아니 대부분이 아니라 전부였다 😅 백분들과의 소통도 걱정을 많이 했었는데(아무래도 양쪽 다 처음인 상황이었고 백이 무엇을 원하는지, 어떻게 구현을 하는지 무지해 막연히 두려웠었다), 나현님의 리드로 충돌 한 번 없이 물 흘러가듯 흘러갔던 우리들의 첫 프로젝트

개인적으로는 힘들었던 시간도 있었다. 내 성격에 내가 스트레스를 받아 팀원들 앞에서 눈물을 보였던 일도 있었다. 나는 한 번 시작한 일은 끝을 봐야하는 사람이다. 그리고 기한이 정해져 있으면 무조건 그 전에 끝내놔야한다. 이러한 성격이 나한테 너무 큰 압박으로 다가온것같았다. 나는 욕심도 많아서 (이러니까 되게 못되먹은 사람같.... 아닌데...🥺) 코드가 깔끔했으면 좋겠고, 간결했으면 좋겠다 그런데, 기한이 정해져 있으니 코드를 정리 할 시간이 너무 촉박했다. 그런 시간이 있고 난 후 , 선호님이 "우리 금요일이 발표니까 수요일까지 기능구현 하는걸로 하고 그 이후로 안돼는 기능들은 그냥 깔끔하게 포기해요!" 라고 말씀을 하셨고 뭔가 나는 그때 이후로 마음을 비웠던 것 같다.. 내가 할 수 있는 능력치에서 최선을 다 하자고 그리고 그 외의 영역들은 다음기회에 도전하면 되니까! 개발자 한달하고 관둘거 아니니까!! 🥳 그렇게 1차 스프린트가 끝났고 2차 스프린트는 부담없이! 정말 개발을 즐겼던거 같다! (+나현님과 같이 장바구니를 구현해서 그런거일지도 ㅎㅎㅎ)

그렇게 부담없이 진행하다보니 결과물은 만족스러웠다! 우리가 발표할때 지선님이 "선배기수들꺼 리팩토링한거 아니죠?" 라고 말씀 하셨고 우리도 너무너무너무너무 만족했었다!!!

물론 아쉬웠던 부분들도 있었지만...

컴포넌트 분리 (메인 베스트아이템과 productlist는 같은 컴포넌트를 써서 구현할 수 있지 않았을까)
리뷰 수정/삭제 구현
fetch, axios 예외처리 등등...

리팩토링을 통해 몇몇개는 수정하겠지만 전체적인 로직이 바뀌는 일은 아무래도 오랜 시간이 걸릴것같다.

마지막으로 한번의 다툼 없이 2주동안 12시간씩 코딩했던 우리 팀원들 ❤️ 2차 스프린트때는 로비에 6명이 거의 붙박이었다 ㅋㅋㅋㅋㅋㅋㅋ 다른 팀들이 우리가 없어 방이 너무 추웠다고...

1차 프로젝트 잘 놀다 갑니다 🔥🔥🔥🔥🔥

TIL 32 - FormData & FlieReader

Sun, 08 Aug 2021 08:10:27 GMT

👉🏻 FormData

FromData란 ajax로 폼 전송을 가능하게 해주는 FormData 객체이다. 보통은 Ajax로 폼(form 태그) 전송을 할 일이 거의 없다. 주로 JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전송한다. 하지만, form전송이 필요한 경우가 있는데, 이미지를 ajax로 업로드할 때 필요하다. 이미지는 base64, buffer, 2진 data 형식으로 서버로 전송해도 된다.

✍🏻 FormData 만들기

let formData = new FormData();
formData.append('name', 'zerocho');
formData.append('item', 'orange');
formData.append('item', 'melon');

new FormData()로 새로운 객체를 생성해준다. append 메소드로 key-value 형식으로 하나씩 추가한다. 같은 키를 가진 값을 여러 개 넣을 수도 있다. 덮어씌워지지 않고 추가된다.

append로 넣을 수만 있는 게 아니라 내용물을 확인할 수도 있다.

formData.has('item'); // true
formData.has('money'); // false
formData.get('item'); // orange
formData.getAll('item'); // ['orange', 'melon']

has 메소드로는 해당하는 키가 존재하는 지 확인할 수 있다. get 메소드로 직접 가져올 수 있다. 유의할 점은 get은 처음 저장한 값 하나만 불러온다.

✍🏻 FormData 지우기

delete 메소드를 사용하면 된다. append와 비슷한 set 메소드가 있는데, set과 append의 차이점은 set도 추가를 해주기는 하지만, 기존 키가 있으면 그 값을 모두 덮어씌워버린다.

formData.delete('test');
formData.set('item', 'apple');

👉🏻 FlieReader

웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File혹은 Blob객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 한다.

✍🏻 FileReader.onload()

load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료되었을 때마다 발생한다. 비동기이므로 원하는 동작을 위해 CALLBACK 함수를 이용하는 것이 좋다.

✍🏻 FileReader.readAsText(FILE, ENCODING)

파라미터 : 1. 읽을 객체, 2. 인코딩 특정 파일, Blob객체를 텍스트로 읽기 시작하며 두번째 파라미터로 읽을 때 사용되는 인코딩을 지정할 수 있다.

참고 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader

TIL 31 - 얕은 복사(shallow copy) VS 깊은 복사(deep copy)

Sat, 31 Jul 2021 05:38:07 GMT

종택님의 코드리뷰로 공부하게 된 얕은 복사와 깊은복사 사전스터디 기간 js를 공부하며 얼핏 들었던 개념이었다. 그치만 그때는 deep한 지식보다 기초를 쌓기 바빳기 때문에 그냥 넘어갔는데 플젝 시작전 정리 할 수 있는 기회가 생겼다 💪🏻

👉🏻 얕은 복사(shallow copy)

const obj = {name:"hojung"};
const newObj = obj;
newObj.name = "jungmin";
console.log(obj); // { name: 'jungmin' }
console.log(newObj); // { name: 'jungmin' }

왜 obj를 newObj로 복사해 newObj의 name값을 바꾸면 obj까지 영향을 미치는 것일까? 위와 같은 코드를 얕은 복사라고 부른다. 그렇다면, obj가 불변함을 가지고 있으려면 어떻게 해야할까?

👉🏻 깊은 복사(deep copy)

const obj = {name:"hojung"};
const newObj = Object.assign({},obj);

obj를 newObj에 복사를 해준다 (Object.assign메소드 mdn문서 참고)

newObj.name = "jungmin"
console.log(newObj); // { name: 'jungmin' }
console.log(obj); // { name: 'hojung' }

복사한 객체의 name에 jungmin값을 넣는다. 이렇게 복사하여 새로운 객체를 만들게 되면 원본객체인 obj가 불변함을 유지할 수 있고, 동시에 복제본을 변경 시키는 것을 통해 가변적까지 달성 할 수 있다.

👉🏻 중첩된 객체의 복사는?

const obj = {name:'choi', score:[1,2]}
const newObj = Object.assign({},obj);
newObj.score.push(3);
console.log(newObj); // {name:'choi', score:[1,2,3]}
console.log(obj); // {name:'choi', score:[1,2,3]}

Object.assign을 통해 객체의 프로퍼티만을 복사하고, value가 원시타입이 아닌, 객체타입일 경우 값을 저장하는 것이 아닌 객체의 주소 값을 저장한다. 그렇기때문에 프로퍼티값이 객체인 경우에는 값 또한 복제를 해야한다.

newObj.score = obj.score.concat();
newObj.score.push(3);
console.log(newObj); // {name:'choi', score:[1,2,3]}
console.log(obj); // {name:'choi', score:[1,2]}

concat, slice, ArryFrom,Spread Operator와 같이 복제를 해주는 배열 메서드를 사용한다. 원본에 대해 불변함을 유지할 수 있게된다.

TIL 29 - map 함수 적용시 key props를 부여

Thu, 29 Jul 2021 06:05:39 GMT

리액트 공식문서 를 참고하여 작성한 게시글입니다.

👉🏻 왜 오류가 나지?

나는 그냥 컴포넌트를 나눠 map을 돌려줬을 뿐인데.. 왜 오류가 나지?

리액트 공부 중 나타난 오류에 멘붕 🥺... 반복되는 JSX를 map을 돌려줬을 뿐인데 오류가 난다고?? 해답은 공식문서를 통해 쉽게 얻을 수 있었다! 🔥

✅ key?

React에서의 key는 React가 반복되는 어떤 항목을 변경, 추가 또는 삭제 할 지 식별하는 것을 돕는 속성이다.

쉽게 말해 랜더링 시 컴포넌트 배열에 어떤 변화가 일어났는지 리액트가 더욱 빠르게 알아내기 위해 사용한다.

✅ key 설정하기

key를 설정하는 가장 좋은 방법은 리스트 다른 항목들 사이에서 해당 항목을 고유하게 식별 할 수 있는 문자열을 사용하는 것이다. 즉, key값은 언제나 유일한 값이어야만 한다.

게시판의 게시물을 렌더링 하는 예시가 있다면, 게시물 번호를 key값으로 설정 할 수 있다.

{this.state.feedList.map(feed => {
 return (
  
 );
})}

만약, 안정적인 key값이 없다면 최후의 수단으로 인덱스를 key값으로 사용 할 수 있다. 그렇지만 이로인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생 할 수 있다.

TIL 28 - 자식 컴포넌트에서 state변경

Sat, 24 Jul 2021 13:09:47 GMT

인스타그램 클론 코딩 컴포넌트를 나누던 중, 자식에서 setSate를 해야 할 일이 생겼다! setState는 state가 관리 되고 있는 곳에서 써야하는데,,, 어쩌지? 바로 구글링! 🔥

1️⃣ 자식 컴포넌트 함수 분리

기존 자식컴포넌트 함수

commentAdd = e => {
    e.preventDefault();
    if (e.target.comment.value === '') {
      alert('댓글을 입력해주세요!');
      return;
    }
    const _comments = this.props.commentData.concat({
      id: this.props.userId,
      txt: e.target.comment.value,
      likeHeartBtn: false,
      key: this.props.keyData,
    });
    this.commentKey = this.commentKey + 1;
    this.setState({
      comments: _comments,
      commentBtn: true,
    });
    e.target.comment.value = '';
  };

여기서...!! setState 선언 부분만 쏙! 빼서 부모 컴포넌트로 선언한다

2️⃣ 부모 컴포넌트 함수 작성

부모컴포넌트 함수 추가

bringState = _comments => {
    this.commentKey = this.commentKey + 1;
    this.setState({
      comments: _comments,
      commentBtn: true,
    });
  };

부모 컴포넌트에 있는 setState를 하는 함수를 props로 부모 컴포넌트에 전달해준다

3️⃣ 부모 컴포넌트 함수 자식 컴포넌트에게 전달

onSubmit={this.bringState} 로 자식 컴포넌트에게 setState함수를 저달하였다

4️⃣ 자식 컴포넌트 함수 수정

commentAdd = e => {
    e.preventDefault();
    if (e.target.comment.value === '') {
      alert('댓글을 입력해주세요!');
      return;
    }
    const _comments = this.props.commentData.concat({
      id: this.props.userId,
      txt: e.target.comment.value,
      likeHeartBtn: false,
      key: this.props.keyData,
    });
    this.props.onSubmit(_comments);
    e.target.comment.value = '';
  };

this.props.onSubmit(_comments);로 setState를 하는 시점에 함수를 호출하여 setState를 실행시켜주었다!

📌 TMI

props와 state개념을 확실하게 알지못하면 이해하기 힘든 개념이라고 생각한다 🥺 그래도 방법을 찾은 뒤 혼자 코드를 구현하는거 보면 어느정도 이해는 한 것 같다 ㅎㅎ! 리액트 플젝은 처음이라 아직 컴포넌트의 기준이 명확히 세워지지 못해 엉망이다.. 이렇게 시행착오를 겪어가며 성장해 나가는거겠지 💫

TIL 26 - Component / props / state

Mon, 19 Jul 2021 15:11:39 GMT

리액트 공식문서를 참고하여 작성 한 글입니다.

👉🏻 Component ?

UI을 재사용 할 수 있는 부분을 분리한 것을 말한다

 function App() {
  return (
    
        Hello, Sara!
        Hello, Cahal!
        Hello, Edite!
    
  );
}

위와 같은 함수가 있다고 가정해보자 여기서 h1이 반복되고 있다는 것을 알 수 있다. 또한, Hello, (이름)! 텍스트도 안에 있는 이름만 바뀌고 모두 같은 형식을 가지고 있는 것을 알 수 있다! 이런 UI가 반복되는 것, 즉 재사용이 가능한 부분은 컴포넌트로 나누어 관리하는 것이 효율적이다

 function Welcome(props) {
  return Hello, {props.name};
}

function App() {
  return (
    
      
      
      
    
  );
}

위 코드를 Welcome 컴포넌트로 분리해 props로 name값을 받아주어 관리하였다. 간단한 코드라 아직은 왜! 컴포넌트로 나누는 것이 효율적인 방법인지 이해가 잘 되지 않겠지만 (나도 그랬다! 😱) 컴포넌트를 분리하며 프로젝트를 하다보면 유지보수 및 가독성이 좋아지는 것을 느낄 수 있을 것이다.

👉🏻 props

props 는 properties 의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다

function Welcome(props) {
  return Hello, {props.name};
}

위 코드에서 name값을 전달 해주기 위해 props값을 사용하였다. props 는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name 을 조회하면 된다.

👉🏻 state

state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 정보이다.

this.state = {
      id: '',
      pw: '',
      btn: false,
    };

함수의 현재 상태값을 나타낸다. state를 변경해주고 싶다면 setState을 사용하여 변경 할 수 있다.

✍🏻 setState

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다

TIL 24 - [Pre-course] 중간 시험(1차) -

Sat, 17 Jul 2021 14:57:00 GMT

[Pre-course] 중간 시험

위코드 생활 2주차 프리코스가 끝났다 🥺... 아침에 데일리 킥오프 시작 -> 오전공부 or 세션 -> 점심 -> 세션 -> 과제 or 개인공부 -> 저녁 -> 개인공부 10 -10이 정말 짧게 느껴졌던 2주였다..!! 앞으로는 더 빨리 가겠지...? 프리코스가 끝나며 봤던 중간시험! js를 이주 내내해서 그런가 문제 난이도가 많이 어려운편은 아니었던거 같다! 풀긴 풀었는데.. 만족스럽지 못한 코드들.. 삼항연산자로 바꾸려고 했던 것도 있었고, 일일히 for문으로 쓰던 리플릿과는 다르게 메서드를 쓰려고 노력했다 💪🏻

📌 getFind 함수를 작성하세요.

문자와 문자열이 주어졌을때, getFind 함수는 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환합니다.

Notes: 문자열의 첫번째 문자는 인덱스 값 0 을 가집니다. 만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다. 만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다.

중요!! indexOf 함수를 사용하지 마세요.

function getFind(filter, sentence) { 
  for(let i = 0; i < sentence.length; i++) {
    if (filter === sentence[i]) {
      return i;
    }
  } return -1;
}

return -1의 시점이 헷갈렸던 문제였다! else를 선언해 -1을 줬더니 계속 다른 값이 나와 다시 생각을 했던 문제...😱

📌 find_longest_word 함수를 만들어 주세요.

주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요.

function find_longest_word(arr) {
  const arryLength = arr.map(x => x.length);
  const maxEl = Math.max(...arryLength);
  const longIndex = arryLength.indexOf(maxEl);
  return arry[longIndex];
}

제일 처음엔 중첩된 for문으로 문제를 풀었었다! 그런데 갑자기 공부했던 Math.max함수가 떠올라 mdn검색후 다시 풀었던 문제! 확실히 중첩 for문보다 코드가 간결해졌다! 메서드의 중요성,,,,🌟

TIL 23 - [clone] Instagram - js

Fri, 16 Jul 2021 01:10:28 GMT

인스타그램 클론코딩! js로 진행하였다. 필수구현 , 추가구현 , 리팩토링까지 완료하며 느꼇던 점, 어려웠던 부분을 정리하려 한다🔥

👉🏻 id > '@' 포함 / pw > 5글자 이상 시 로그인 버튼 활성화


  
     Westargram
     
       
       
       
     
     비밀번호를 잊으셨나요?

const form = document.querySelector("#login form");
const id = document.querySelector("#login form .idInput");
const pwd = document.querySelector("#login form .pwdInput");
const button = document.querySelector("#login button");

form.addEventListener("keyup", function activeButton(){
    ((id.value.length >= 1 ) && (pwd.value.length >= 5) && (id.value.indexOf("@") > -1)) ? button.style.opacity = "1" : button.style.opacity = "0.5";
});

필수 구현 사항 : input값이 들어갈때 버튼 활성화
추가 구현 사항 : id > '@' 포함 / pw > 5글자 이상 시 로그인 버튼 활성화

input과 button을 form으로 묶어 form에 addEventListener을 주었다. 또한 input의 속성에 required를 추가하여, input에 값이 있을때만 submit이 되도록 하였다. event는 keyup을 주어 키보드를 누르고 떼는 순간 이벤트가 발생하도록 했다. 그리고 이번에 처음 써봤던 삼항 연산자! 처음에는 너무 낯설었는데 모든 if문을 삼항연산자로 구현하니 이제는 삼항 연산자가 더 편해졌다!

📖 main 페이지

👉🏻 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능 / input입력 시 게시 버튼 활성화


    
        
            
                
                    
                        
                    
                    canon_mj
                
                
                    
                
            
            
                
            
            
                
                    
                        
                        
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    
                        anieworld님 외 10명이 좋아합니다
                    
                
                
                    canon_mj
                    위워크에서 진행한 베이킹 클래스... 더 보기
                
                
                    
                    42분전

const commentSubmit = () => {
    const commentList = document.querySelector(".feedComment ul");
    const commentText = commentInput.value;
    commentInput.value = "";
    const li = document.createElement("li");
    commentList.appendChild(li);
    const a = document.createElement("a");
    li.appendChild(a);
    a.innerText = "user_id";
    const p = document.createElement("p");
    li.appendChild(p);
    p.innerText = commentText;
    const buttonHeart = document.createElement("button");
    buttonHeart.classList.add("heartBtn");
    buttonHeart.innerText = "좋아요하트";
    li.appendChild(buttonHeart);
    buttonHeart.addEventListener("click", likeHeart);
    const deleteButton = document.createElement("button");
    deleteButton.classList.add("deleteBtn");
    deleteButton.innerText = "삭제버튼";
    li.appendChild(deleteButton);
    deleteButton.addEventListener("click", deleteComment);
}
commentForm.addEventListener("submit", handleCommentSubmit);
commentForm.addEventListener("keyup", function activeCommentButton () {commentInput.value !== "" ? commentButton.style.opacity = "1" : commentButton.style.opacity = "0.3"});

✅ 핵심 포인트

createElement, appendChild, innerText 구분 및 순서 확인 잘 하기!

📌 댓글 등록

.feedComment ul에 li값을 추가해주기 위해, .feedComment ul을 commentList로 선언한다.
input값을 commentText값에 넣어주고 input값을 초기화 시킨다.
createElement을 통해 li을 만들어준다 (a,p,button 도 마찬가지로)
commentText값을 p안에 innerText을 통해 넣어준다 (a,p,button 도 마찬가지로 넣고 싶은 값을 넣어준다)
만든 태그들을 appendChild 을 통해 html에 뿌려준다 (li는 ul안에, a / p / button은 li안에 넣어준다)

📌 input입력 시 게시글 버튼 활성화 keyup을 통해 키를 누르고 뗄 때 이벤트가 발생되도록 구현하였다. input값이 비어있지 않을때는 opacity값을 1로, 반대일 경우에는 0.3으로 값을 주었다.

👉🏻 댓글 좋아요 / 삭제 기능

➡️ 추가 코드

const likeHeart = (e) => {
    e.preventDefault();
    const li = e.target.parentElement;
    e.target.classList.contains("active") ? e.target.classList.remove("active") : e.target.classList.add("active");
}

const deleteComment = (e) => {
    e.preventDefault();
    const li = e.target.parentElement;
    li.remove();
}

main .feeds .feed .feedComment ul li button {
    border: 0;
    text-indent: -999em;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    background-color: transparent;
    background-size: 100% 100%;
}

#main .feeds .feed .feedComment ul li button.heartBtn {
    right: 30px;
    background-image: url("../images/feed_link_left1.png");
}

#main .feeds .feed .feedComment ul li button.heartBtn.active {
    background-image: url("../images/feed_link_left1_active.png");
}

#main .feeds .feed .feedComment ul li button.deleteBtn {
    right: 0;
    background-image: url("../images/close.png");
}

위에서 댓글 등록할 때 만들어 놨던 button(heartBtn,deleteBtn)을 css로 꾸며주고, 이벤트를 걸어주었다! 🔥

e.preventDefault(); : 이벤트 기본 속성으로 버튼을 누르게 되면 새로고침이 된다. 이를 막기위해 e(event)에 preventDefault함수를 걸어주는 것이다. preventDefault 함수를 주게 되면 새로고침 되는 현상을 강제로 막게 된다.
- e.target.parentElement : e에 클릭한 button를 찾아 준 뒤(e.target), parentElement를 통해 button의 부모를 찾아준다.
- e.target.classList.contains("active") : e에 클릭한 button의 class에 acitve가 있는지 없는지 확인한다. (acitve가 있으면 background-image값이 바뀐다)
- li.remove(); : e.target을 통해 알아낸 li를 지운다.

👉🏻 nav 프로필 사진 클릭 시 메뉴 박스 생성 (메뉴 박스 바깥 영역 클릭시 닫히도록)

const openMypage = (e) => {
    mypagePop.style.display = "block";
}

const closePop = (e) => {
    (!mypageBox.contains(e.target)) && (!searchZone.contains(e.target)) ? (mypagePop.style.display = "none") && (searchPop.style.display = "none") : false;
}

시간을 은근 많이 잡아 먹었던 부분 😱 contains(e.target) 을 찾는데에 시간이 오래 걸렸었다.. 만들어 놓고 보니 검색기능 팝업과 겹쳐 함수를 묶어 주었다! e.target은 이벤트가 실행 된 영역이라고 앞에서 설명했다. e.taeget이 포함되지 않은 영역을 선택 했을 때(contains), style.display = "none"을 실행시켜준다.

👉🏻 반응형 구현

@media (max-width: 1024px) {
    .sideMenu {display:none;}
    #main .feeds {width:100%;}
}

브라우져가 1024px에 도달하면 오른쪽 메뉴가 없어지도록 반응형을 구현하였다.

👉🏻 검색기능 구현

const idOfWestagram = [
    {id: "W0nhong__", imgUrl: "images/profile_img.jpeg", info: "W0nhong소개글", profileUrl: "https://www.naver.com/"},
    {id: "hj._.__s2", imgUrl: "images/profile_img.jpeg", info: "hj._.__s2소개글", profileUrl: "https://www.daum.net/"},
    {id: "kvwowv", imgUrl: "images/profile_img.jpeg", info: "kvwowv소개글", profileUrl: "https://wecode.co.kr/?gclid=CjwKCAjwlrqHBhByEiwAnLmYUD8aCer8FbdtZ8BzOFlwHX8HI-HwDbdHb4PW6-YW1NDDsDwMYGlsZRoCurgQAvD_BwE"},
    {id: "kvvow22", imgUrl: "images/profile_img.jpeg", info: "kvvow22소개글", profileUrl: "#"},
    {id: "abcd_efg", imgUrl: "images/profile_img.jpeg", info: "abcd_efg소개글", profileUrl: "#"},
    {id: "abcd_efaaaa__", imgUrl: "images/profile_img.jpeg", info: "abcd_efaaaa__소개글", profileUrl: "#"},
    {id: "ww0_jfd", imgUrl: "images/profile_img.jpeg", info: "ww0_jfd소개글", profileUrl: "#"}
];

const searchDataPaint = () => {
    idOfWestagram.forEach((el)=>{
        const li = document.createElement("li");
        const a = document.createElement("a");
        a.href = el.profileUrl;
        a.target= "_blank";
        const searchImg = document.createElement("div");
        searchImg.classList.add("searchImg");
        const img = document.createElement("img");
        img.src = el.imgUrl;
        const searchInfo = document.createElement("div");
        searchInfo.classList.add("searchInfo");
        const userId = document.createElement("div");
        userId.classList.add("userId");
        userId.innerText = el.id;
        const userInfo = document.createElement("div");
        userInfo.classList.add("userInfo");
        userInfo.innerText = el.info;
        searchUl.appendChild(li);
        li.appendChild(a);
        a.appendChild(searchImg);
        searchImg.appendChild(img);
        a.appendChild(searchInfo);
        searchInfo.appendChild(userId);
        searchInfo.appendChild(userInfo);
    });
}

const searchFilter = (e) => {
    const searchText = searchInput.value.toUpperCase(); 
    const li = searchUl.getElementsByTagName("li");
    Array.from(li).forEach((el) => {
        const userName = el.getElementsByTagName("div")[1].getElementsByTagName("div")[0];
        const txtValue = userName.innerText;
        txtValue.toUpperCase().indexOf(searchText) > -1 ? el.style.display = "block" : el.style.display = "none";
    });
}

searchForm.addEventListener("keyup", searchFilter);
window.addEventListener("load", searchDataPaint);

1. idOfWestagram 배열에 가상 데이터를 만든 후 window가 로드되면 searchDataPaint를 실행시켜 li를 생성한다.
1. input데이터를 모두 대문자로 바꿔준뒤 ul안에 있는 모든 li를 - getElementsByTagName를 통해 배열로 바꾼다.
1. getElementsByTagName를 통해 만든 배열은 유사배열이므로 forEach,map같은 메소드를 실행하면 Type Error가 뜬다!
1. Array.from(li)을 통해 li를 찐! 배열로 만들어준다.
1. li안에 있는 2번째 div안에 있는 1번째 div(userName)를 변수로 선언한다.
1. userNamed의 텍스트를 가져와 대문자로 바꿔준 뒤, 찾을 텍스트(검색할 텍스트)를 indexOf로 조건문을 만든다
1. 찾을 텍스트가 있으면 (num > -1) display:block이고, 찾을 텍스트가 없으면 (num = -1) display:none;이 된다!