lwc 페이지를 만들려고 생각해보니

wire로 테이블에 재고를 뿌려주려면 테이블에 넣을 데이터가 먼저 있어야 하고

그 데이터를 먼저 가져오기 위해서는 Product2에서 정보를 가져올 메서드가 있어야 연결이 된다.

 

결국 lwc로 시작하려고 하다가 다시 또 메서드를 작성하게 되었다.

 

남은 일을 다시 정리해보면

1.B org Product2 데이터 받아오는 메서드

  • 나중에 where family in xx로 수정 필요
  • 메서드 하나에 a,c,d,e family만 받으면 하나의 메서드로 되기 때문에 BProductController에 작성

2.lwc 페이지 생성

  • 미리 spa 탭 구상해서 생성 (A, C, D, E)
  • 내부 테이블 작성
  • 테이블 우측 전체 동기화 추가
  • 전체 동기화 js 기능 추가
  • 테이블 내부 체크박스 추가
  • 테이블 우측 체크박스 부분 동기화 추가
  • 부분 동기화 js 기능 추가
  • 우측 버튼 하단에 선택된 상품명 정렬 컨테이너(여백 없애기)
  • 테이블 상단에 input창 추가로 상품명 검색으로 필터링 기능 추가

3.pmd 처리

4.테스트케이스 작성

5.보안 처리(Oauth2 받아서 처리하기)

6.toast 추가로 작업 반영 확인시키기

7.3개 org 추가하기

8.ppt 작성(급할 경우 notion으로 해도 된다)

9.배치 사용해서 처리하기

10.동기 api 소통

 

메서드를 작성하려다가 넣을 페이지 생성이 떠올라서

탭 생성을 찾아보다가 결국 앱 빌더를 통해 새로운 페이지를 만들고

제일 어울리는 sales 앱에 탭을 추가했다.

 

내부 spa탭에 들어갈 이름을 고민하다가

A org는 가죽 컨셉이기 때문에 가죽동화공방이라는 이름을 확정했고

나머지 C, D, E는 아직 미정이라 목재공방, 유리공방, 철재공방으로 가명을 넣어둘 예정이다.

 

결국 이름을 먼저 고민하게 되었는데

유리공방은 조금 더 세련된 느낌이라 로즈마리글라스로 정했고

철재 공방은 둔탁하고 철공소에 가까운 이름이라 덕은철강으로 결정했고

목재공방은 아낌없이주는나무로 결정했다.

 

이제 드디어 LWC 제작에 들어갈 수 있다.

lwc를 생성하고 spa 페이지를 만들려고 했는데

의식에 흐름에 따라 만들었던 부분 동기화 메서드를 이식해버렸고

2번에 작성했던 작업의 거의 역순으로 처리를 진행해버렸다.

 

테이블을 생성하기 위해

B org의 전체데이터를 받아오고

체크박스를 미리 만들어서 테이블을 생성했다.

 

생성한 체크박스를 이용하기 위해

js를 연동해서 기능을 추가하고

결국 부분 동기화를 전체 동기화 버튼보다 먼저 구현해버렸다.

 

체크박스를 만들려고 하는데 이것 또한 1시간 가량 먹히지 않아서

회사 LWC의 권위자 파이에게 질문을 했는데

토다다다다닥 엄청난 속도로 타이핑을 하시면서

간단한 오류들을 체크해보시더니

우회해서 값을 넣는 방식을 사용하셔서 성공하고

심지어 다시 정상적으로 되는 방법까지 찾아서

이게 하다 막히면 우회하는 방법으로 접근하라고 알려주시고 멋있게 떠나셨다.

 

apex 관련은 블레이크, LWC는 파이가 계시기 때문에 든든하지만

시도 때도 없이 질문하기에는 죄송하기도 하고 기본 매너도 아니기 때문에

할 수 있는 모든 방식을 다 시도하고

검색 키워드도 다 확인한 다음 내 선에서 정말 안될 것 같을 때 요청했는데

그 이후로는 문제가 길어야 1시간이면 해결이 되서 추가적인 요청은 없었다.

 

그 뒤로 작업을 하던 중 부분 데이터 요청하기 조회가 되지 않아 1시간 넘게 고생했는데

새로 도입하려던 코드가 문제가 아니었고

하필 새로 도입하려던 코드를 작성하던 시점에 인증이 만료되었기 때문에

해당 코드 작동이 되지 않았는데

혼자 기상천외한 방법들을 계속 시도하고 있었던 것이다.

 

그나마 예전에 작성했던 코드까지 도착해서

해당 코드의 작동이 안될 수 없다는 사실을 파악하고

역순으로 원인을 찾아보니 메서드의 비동기 처리 인증서 만료 문제였기 때문에

찾고자 하지 않는 상황에서는 에러 메세지를 볼 수 없었다.

 

spa를 만들고 싶었지만 저녁에 피자를 먹기로 해서 피자를 먼저 먹고

테이플 내부에 들어갈 데이터를 더 받아오고 싶었는데

곰곰이 생각해보니 매개변수 4개부터 에러메세지를 표기했는데

Product2를 전체로 넘기고 처리하면 된다는 사실을 알고 변경 시간도 추가했다.

 

테이블이 너무 비어있어서 어쩔 수 없이 추가한 부분인데

실제 데이터라면 제품설명등이 있으면 조금 더 풍부한 데이터가 될 수 있을 것 같지만

일단 기능적으로 더 다듬는 것이 더 중요해보였다.

 

css는 포기하고 lwc 공식문서의 class 내부에 내장형? 스타일을 먹이는 방식으로 진행했더니

그나마 그 때부터 일이 해결되기 시작했다.

 

뭔가 일이 많았는데 의식의 흐름으로 작업을 해서 뭔가 잘 했지만

과정 기록이 되지 않아 아쉬웠다.

 

 

 

 

 

(1).백준 17350번 2루수 이름이 뭐야는 뭔가 많이 이상한 문제였는데

여러 줄의 테스트케이스에서 'anj'라는 이름(?)이 있는 경우'뭐야;'를 출력하고 없는 경우 '뭐야?'를 출력하는 문제였다.

 

문자열 내부에 값까지 포함되어야 하는지 고민했지만단순 일치로 문제를 제출해보니 통과되는 것을 보면anj가 들어간 문자열이 아닌 'anj'만 일치해야 함을 알 수 있다.

const input = `4
aptl
molamolamolamola
dlqmfkglahqlcl
QWERTOP`.split('\n')

let result = '뭐야?'

for(let i = 1 ; i < input.length ; i++){
    if(input[i] === 'anj'){
        result = '뭐야;'
    }
}

console.log(result)

'회고' 카테고리의 다른 글

[수습일지] - 48(주말)  (0) 2023.05.13
[수습일지] - 47  (0) 2023.05.12
[수습일지] - 45  (0) 2023.05.10
[수습일지] - 44  (0) 2023.05.09
[수습일지] - 43  (0) 2023.05.08

1.flex를 사용할 때 위 아래 태그를 잘 엮어주고 나눠야 하며 정리할 때 기능을 잘 이용해야한다...

2.css를 이용할 경우 class명만 잘 지정해줘도 충돌잆이 편하게 할 수 있다.

3.flex내부 크기를 같게 조절하고 싶다면 flex:1을 지정해 나눠주면 편하다.

 

오늘 회고는 아무래도 적기가 애매하지만 적을 수 밖에 없는데

백준에 3시간이상 낭비를 하고 

아래의 3d 모델링을 했다.

첫번째 예쁜 핑크색은 목업이미지이며 

아래의 칙칙한 이미지는 직접 만든 부분이다.

이걸 기준으로 만들려고 했다.

 

도중에 css에만 시간이 너무(4시간이상) 걸리는 것 같아 3d구현을 도전했는데 그 뒤로도 2시간이 넘게 걸렸다.

 

https://ryujichang.github.io/3D-Nike/nike.html

 

NIKE

The Nike React lineup embodies our desire for innovation. The Epic React 2 has been devloped using ethically harvested bio materials. It is made up of superior quality mycelium acquired from Scanadnavia.

ryujichang.github.io

 

'회고' 카테고리의 다른 글

[HTTP/네트워크] 실습-2  (0) 2022.06.13
학습(Deep Dive)  (0) 2022.06.12
[HTTP/네트워크] 실습  (0) 2022.06.10
[HTTP/네트워크] 기초  (0) 2022.06.09
[React] React State & Props-2  (0) 2022.06.08

일단 돌이켜보면 간단하지 않았다.

기본 구성은 간단했지만 advanced와 nightmare는 말 그대로 악몽이었다.

83/84까지 달성 후 복잡함에 마지막 문제는 포기할 수 밖에 없었다.

우분투에 있는 기본 계산기로도 구현이 안된 기능을.. 실제로 사용하지도 않을 이상한 기능은 무리였다.

(1,0,0,.,.,1,2,5,2,+,1,2,+,1,5,-,-,2,3,-,1,4,4,2,/,2,3,/,/,1,2,*,2,3,Enter를 연속으로 누르면 -111.48956666666668이(가) 화면에 표시되어야 합니다.)

이론적으로는 수도코드를 작성해서 했으나 중간에 여러가지 기능들이 충돌해서 오히려 해결가능한 문제수가 줄어들기만 해서 원상태로 복구시킬 수 밖에 없었다.

 

오늘의 회고로 고쳐야 할 부분은

1.원하는 부분의 선택에 대해 더 공부해야한다.(가르쳐 주지 않은 부분이었다... ㅠㅠ css셀렉터가 아닌 내부 셀렉터 관련 수업자체가 뒤에 위치해있다)

 

2.함수 내부에 함수를 넣는 고차함수?도 더 공부해서 빠르게 구성할 수 있어야 한다.(고차함수도 뒤에있다..)

 

3.깃허브 이용 방법 또한 더 알아둬야 빠른 협업을 위한 기본이 될 것 같다.(요것도 검색해서 해결해야 했다)

 

4.반복,조건문은 충분히 잘 사용하고 있지만 그 내부 명령어들의 통일성과 컨벤션 규정에 대해 학습해 이것저것 충돌하지 않도록 해야하며 직관적이게 만들어야겠다.

 

5.주석은 생각나서 중간부터 달긴 했지만 초반엔 하나도 주석을 달지 않았고 후반에도 중간중간 까먹고 진행해버려서 주석이 없는 부분이 많다. 주석을 생활화해 원하는 부분도 빨리 찾을 수 있고 남이 봐도 쉽게 이해할 수 있게 작성해야겠다.

 

계산기는 스켈레톤에 기능들을 구현한 것이기 때문에 코드스테이츠 저작권상 83/84 가지의 동작 리스트를 올리기는 애매하다고 생각해 올리지 않았지만 깃허브에서 조회는 가능할 것이라고 본다.

 

 

 

 

'회고' 카테고리의 다른 글

복습(CSS/계산기)  (0) 2022.05.08
복습(CSS기초, HTML/CSS활용)  (0) 2022.05.07
복습(계산기만들기)  (0) 2022.05.05
[HTML/CSS] 활용-2(계산기)  (0) 2022.05.04
[HTML/CSS] 활용  (0) 2022.05.03

8.VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
10.숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
11.검색을 통해 다양한 CSS 속성을 적용할 수 있다.

 

8.구현할 수 있다!

10.원하는 위치로 배치할 수 있다

11.다양한 css를 알고 있으며 시간이 조금 걸릴지라도 원하는 기능을 적용할 수 있다!

 

듀토리얼 베이스를 따라 핵심 키워드들을 지정하고 만든 새로운 계산기

 

듀토리얼에 맞춰서 제작을 하고 radius를 입히고 간격에 flex를 입혀서 비율대로 나뉘게 하고 색감은 색갈배치페이지에서 연분홍을 입력 후 추천되는 색들로 배치를 했으며 원하는 기능들을 추가로(듀토리얼은 기능이 더 적었고 색 배합도 달랐다.)추가해줬다.

 

https://app.haikei.app/ 배경도 사실은 그라데이션 이미지를 넣은 것이고 저 위에 숫자부분은 a+b=c형태의 2차 display :none상태인 계산입력부분도 따로 있는 상태이다.

 

어느정도 만족스러운 결과라고 생각했지만 동기분들의 과제를 보니 음성인식, 버튼클릭, 호버, 야간모드교체, 엄청난 디자인(쉐도우깍기, 색감배합 등).. 진짜 css를 단순하게 입힌 정도는 많치 않았다.

동기님이 알려주신 네트리파이, 깃, 배포 등을 추가적으로 학습하여 배포또한 했지만 다른 분들의 작품을 보면 조금 더 css에 창의력을 발휘했어야 했나..? 하는 아쉬움이 남는다.

 

추가적으로

아이콘은 frontawesome.com 

색 추출은  ColorZilla 확장프로그램 

예쁜 위치선정은 css-position

안티앨리어싱?은 transform : rotate(0.04deg) 

호버, 쉐도우 등이 있다.

'회고' 카테고리의 다른 글

간단한 웹앱 만들기  (0) 2022.05.06
복습(계산기만들기)  (0) 2022.05.05
[HTML/CSS] 활용  (0) 2022.05.03
[CSS] 기초  (0) 2022.05.02
복습(문자열, 반복문)  (0) 2022.05.01

Chapter1. 레이아웃
1.레이아웃이 필요한 이유를 이해한다.
0.레이아웃을 위한 HTML을 만들 수 있다.
Chapter2. Flex
3.display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
4.flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
5.justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.
6.flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
7.flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.
8.VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
과제. 계산기 목업 만들기
9.HTML로 계산기에 필요한 구조를 짤 수 있다.
10.숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
11.검색을 통해 다양한 CSS 속성을 적용할 수 있다.

1.레이아웃을 잡아둬야 제대로 된 분할 및 설계를 할 수 있기 때문에 어디를 어떻게 나눌지 먼저 그려보는 것은 중요하다.

2.가로에서 세로로 (세로 분할 후 가로분할 진행을 말한다) 내려갈 수 있다.

3.display: flex;는 부모 요소에 사용하여 내부를 정렬하는 기능이기 때문에 자식요소에 사용하는 의미는 없다.

4.row/column/row-reverse/column-reverse 등을 원하는 기능대로 사용할 수 있다.

5.justify-content:(row/column)과 align-items : (stretch/start/end/center)를 이용하여 수평-수직 정렬을 결정할 수 있으나 baseline에 대해서는 잘 모르겠다.@

6.flex-grow로 각 항목별 비율을 설정해 크기를 결정할 수 있다.

7.flex-basis를 이용해 각 항목별 비율조절을 통해 크기를 결정할 수 있다.

0. 할 수 있지만 부족한 상태 @@

9.구조를 짠 상태

10.flex를 이용해서 배치하였으나 만족스럽지 않은 상태다 @

11.검색을 통해 css를 적용 중에 있으나 내일까지 과제가 진행되며 아직은 목업단계라 css 설정이 미흡하다@@

오늘은 레이아웃과 와이어프레임 그리고 flex에 대해 배운 후 바로 목업제작에 들어갔는데 생각했던 것 보다 이상하게 적용되는 것들이 많고 내부 구조도 보기와는 다르게 복잡하게 짜여있으며 완성 결과 또한 마음에 들지 않아 중간에 만드는 형태 또한 바꿔버렸다. 내일은 다른 방식으로 와이어프레임을 새로 만든 후 css도 적용해봐야겠다.

위 내용은 큰것(div와 flex로만 적용하려고 했던 모습으로 입력칸, AC/+/-/%칸, 숫자칸, /*-+=칸 네가지로 나눈 후 플렉스 적용 도중 페어와 방향을 선회해 아래 바탕으로 바꿨다.

아래에 첫번쨰를 기준으로(왼쪽 라인은 fadding, margin을 0으로 설정해 왼쪽에 붙어있는 바탕화면이 보여서 그렇다) 원본, css, css2등이 있다. 글자가 뚱뚱해서 weight값을 낮춰보는 시도도 해야겠다.

'회고' 카테고리의 다른 글

복습(계산기만들기)  (0) 2022.05.05
[HTML/CSS] 활용-2(계산기)  (0) 2022.05.04
[CSS] 기초  (0) 2022.05.02
복습(문자열, 반복문)  (0) 2022.05.01
복습(변수와 자료형, 조건문)  (0) 2022.04.30

Chapter1. CSS 기초
1.CSS의 사용 목적을 이해한다.
2.CSS의 기본 문법과 구조를 이해한다.
3.CSS를 HTML에 적용하는 방법에 대해서 이해한다.
4.HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
5.CSS를 이용해 텍스트를 꾸밀 수 있다.
6.CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다.
7.MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
Chapter2. 박스모델
8.CSS 박스 모델을 이해할 수 있다.
9.박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
margin, border, padding, content
10.박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.
Chapter3. CSS selector
11.다양한 CSS selector 규칙을 이해한다.
12.후손 selector와 자식 selector의 차이를 이해한다.
13.필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.

1.css를 이용하지 않는다면 정렬, 구분, 디자인면에서 문제가 생겨 제대로 이용할 수 없게된다. ui 뿐 아니라 ux까지 고려하는 개발자가 돼야 한다.

2.태그와 속성을 검색해 원하는대로 적용할 수 있다.

3.세가지 방식으로 적용할 수 있는데 주로 보통은 link.css를 이용해 빠르게 불러와 css를 입힐 수 있다.

4.html에 직접 적용할 경우 우선순위는 인라인>내부>외부 순이므로 기본적으로 이용하는 내부 css를 이용하는 순간 인라인 css는 무시될 수 있다.

5.css를 이용해 해당 태그에 color를 입혀주며 사이즈, 폰트, 폰트크기 등을 조절할 수 있다.

6.절대단위와 상대단위의 차이를 이해하고 있으며 되도록 단일 상대단위를 이용할 생각이다.

7.대부분의 구글 검색결과가 .MDN 또는 w3school 등의 레퍼런스 사이트로 나오기 때문에 반복문 코플릿때 부터 참고하고 있다.

8.박스 모델 내부의 박스모델 내부의 박스모델 마트료시카 박스모델은 무섭다. 박스를 구별할 수 있는 안경을 드림코딩에서 받았기 때문에 어느정도 박스 구별과 설정이 가능하다.

9.content는 내용물 그 자체이며 일반적인 상자라고 생각할 수 있다. 이제 그 content와 border(경계선)의 사이에 들어가는 padding, border과 외곽과의 사이에 들어가는 것이 margin이다.

10.박스크기는  box-sizing: (border/content)-box 내부슬래시로 나뉜 두가지이며 일반적인 content는 border, padding까지 고려해줘야 하지만 border를 사용할 경우 할당한 값이 140인 경우 나머지 border, padding을 제외한 후 결정한다.

11.다양한 종류의 Selector(기본, 자식, 후속, 가상 등)을 이해하고 사용할 수 있다.

12.자식은 바로 한 단계 아래의 자식 (1촌)까지만 가능하지만 후손은 그 내부 전역을 포함한다.

13.필요시 MDN 또는 w3school 등 구글 검색을 통해 정렬된 selector를 확인 후 적용할 수 있다.

간단하다고 생각했지만 생각보다 적용하는 방식이 조금씩 다르고 선택하는 방식 또한 수십가지가 넘어가서 쉽지는 않았다. 하지만 실제로 사용하는 선택 및 기능은 단순하며 또한 원하는 기능은 검색을 통해 바로 적용할 수 있다는 자신감을 가지고 과제를 수행할 수 있었다.

'회고' 카테고리의 다른 글

[HTML/CSS] 활용-2(계산기)  (0) 2022.05.04
[HTML/CSS] 활용  (0) 2022.05.03
복습(문자열, 반복문)  (0) 2022.05.01
복습(변수와 자료형, 조건문)  (0) 2022.04.30
[HTML] 기초  (0) 2022.04.29

+ Recent posts