팀원들 잘 만나서,

세선에서 기술 면, 프로젝트에서 적용할 수 있어서

아쉬운 부분, 기능 구현 > 백앤드랑 같이 해야되서

소감 : 회식 좋아요

===========

좋았던 점 >> 배려 해주고 >> 때러전 지식을 알아가게 되서 >> 적립하게되서 너무 좋고

백쪽 분업하고 >> API 구현 지식 쪽으로 해서, 골골을 하고 싶은 것 하면 좋고

너무 좋았어

=======

기술, 몰랐던 기술, 협업이 뭔지 알아가고

급하게 많아져서, 알아가고

아쉽웠던 부분 >> blocker >> 대화 들어 보고 >>

소감 >>> 2차 프로젝트 > 팀에 이상으로 노력할 것이고

====

힘이되고 ⇒ 모라가는 좋았고. 듣깊음

아쉽운점 >> 프론트와 소통

=====

슬기 >>> 같이 일하고 싶은 >>> 인간관계 >> 실수 많고 >> 토 탓 >>> 배려 느껴서 너무 좋았고

백앤드 흐름 >> 페이지 적용하는 것 >>> 잘 알아가되고

목표치 >>> 필수 구현 >> 추가 기능 >>> 막암이 조급하고 >>> 성공

====

더 분석하며, 사이트

회고 미팅

• 좋았던 거
• [준영] 팀원 잘 만났다. 그동안 세션 들으면서 기술적인 거 많이 배웠는데 실제로는 프로젝트를 통해 처음 적용해볼 수 있었다. 그래서 재밌었다. 백이랑 같이 맞춰보면서 페이스를 잘 맞춘 것 같다.
• [건규] 너무 다들 잘해주고 성격도 좋고 이해 배려해주는게 서로 보여서 좋았다. 또 떨어져있던 지식을 붙여볼 수 있었던 기회. 새로운 걸 알기도 했고, 알던 걸 다시 정립할 수 있었다. 개발자가 되기 위해 가는 길을 확실히 다지고 가는 것 같다.
• [기현] 새로운 기술, 몰랐던 기술을 적용해봐서 좋았다. 협업을 할 수 있다는 게 좋았음! 말의 온도에 대해서도 생각해봤고, 마음이 급해지다보니 놓치는 점이 많았는데 되짚어볼 수 있었다.
• [지원] 팀원 모두 힘이 되어서 좋았다. 많은 걸 담당하진 못했지만, 모르는 걸 배워가는 것. 몰랐던 걸 어떻게 해야 구현되는지 알아가서 뜻깊음.
• [슬기]
• [윤숙] 상처 안 받게 커뮤니케이션 잘한 것. 부담없이 했던 것. 그리고 만족도에 못 미쳤지만 그걸 이해해준 과정이 많이 공부가 되었음. 그리고 이 팀이랑 다시 만나 일하고 싶다ㅎㅎ 답을 모를 때 찾아가는 길을 서로 알려주고, 기둥이 되어줬다. 문제 생기면 하나 하나 같이 해결하고 다음 단계로 넘어가고, 그런 프로세스가 잘 진행됐다.
• 아쉬운 거
• [준영] 스타일링 집중하다가 기능 구현에서 시간 많이 드는 데 놓침. 그리고 백엔드랑 맞춰져야 기능구현도 되더라. 다음엔 우선순위를 잘 잡을 수 있을 듯.
• [건규] 백 쪽에서 분담, 모델링할 때 통일성 있게 가질 못함. api 대로 구현하자 했어야 하는데 뷰적으로 가자, 앱적으로 가자 이렇게 논의해서. 기현님이 유독 과중한 업무를 맡게 되지 않았나… 다음에는 api 대로, 하고 싶었던 거 의견들어가면서 나눠서 하면 좋겠다.
• [기현] 아직 시작 단계라 시야가 좁아서… 어제의 블로커도 그런 문제일 듯. 대화를 많이 해보고, 들으려고 귀를 열었어야 하지 않나 싶다.
• [지원] 프론트랑 붙여보는 걸 잘 못해봄. 진도가 느리기도 했고. 다음에는 2차 때 이런 것도 더 잘 해보면서 재밌어지지 않으려나!
• [슬기]
• [윤숙] 기술적으로 부족했던 점… 그리고 고민을 많이 안해봤다. 성격이 급해서 바로 멘토님한테 답 받는 것.
• 소감
• 너무 좋았다!!!
• [기현] 다음 프로젝트도 지금 팀에서 한 것 이상으로 따뜻하게 노력해야 할 것 같다. 그리고 저 자신이 마음이 급한데 좀 차분해졌음 좋겠다.
• [지원] 감사하고 백분들 가르쳐주셔서 감사감사!! 많이 배웠습니다!
• [슬기]
• [윤숙] 이 과정이 행복했다.

3/11 Retrospective meeting

• 준영님팀원들을 잘 만나서 최대 장점... 세션 많이 들으면서 배운 스킬들을 실제로 적용해보았기에 재밌었다. 하지만 스타일링에 너무 집중하다보니, 기술구현에 들어가니 생각보다 시간이 타이트함을 알았고, 백엔드랑 협업이 중요함을 깨달음.2차 프로젝트때는 우선순위를 잘 잡아야 함을 느낌
• 건규님성격, 이해, 배려해주려는게 보여서 좋았고, 떨어져있던 지식을 이을 수 있어서 좋았다. 새로운 기술, 알던 기술을 적용할 수 있어서 좋았고, 개발자로 가는 길을 확신하였다.아쉬웠던 점 : 분업하고 모델링하고 처음이다보니 통일성있게 가지 못하였다.... API기준대로 가야했는데 view기준으로 본 점이 아쉬웠다....! 2차때는 API기준으로 정하고 골고루 원하는 파트로 확실한 분배를 할 수 있겠다...!
• 기현님새로운 기술, 몰랐던 기술을 적용해봐서 좋았다. 협업을 할 수 있다는 게 좋았다! 말의 온도에 대해서도 생각해봤고, 마음이 급해지다보니 놓치는 점이 많았는데 되짚어볼 수 있었다. 아직 시작 단계라 시야가 좁았다. 프론트 백엔드랑 몇시간 상의했던 블로커도 시야가 더 넓었다면 수월하게 할 수 있었지 않았을까.... 대화를 많이 해보고, 들으려고 귀를 더 여는게 목표이다. 다음 프로젝트도 지금 팀에서 한 것 이상으로 따뜻하게 노력해야 할 것 같다. 조금 더 차분하게 프로젝트에 임해야겠다.
• 지원님좋았던 점 : 팀원님들 한분한분 힘이 되어서 좋았다! 모르는거 몰랐던 부분을 어떻게 구현해야 하는지 로직 등을 이해한 뜻깊은 시간이었다!아쉬웠던 점 : 프론트부분이랑 fetch하지 못해서 아쉬웠기에, 2차때는 fetch까지 성공적으로 하는게 목표소감 : 너무 감사하구, 백엔드 그리고 프론트분들께 서로 서로 많이 배웠던 시간이었다.
• 슬기님좋았던 점 : 팀원분들이 같이 일하고 싶은 분들이랑 해서 인간관계로 스트레스 안받고 몰입할 수 있어서 좋았다. 실수하고 휴먼 에러도 많았기에 서로 탓하게 될수도 있었는데, 그런 것고 없었고, push도 없었고... 배려해주는게 좋았다.그전에는 백엔드와 fetch해보니 페이지가 구동되는데에 있어 어떻게 작동하는지 감을 잡았다. 학습하면서 놓친 부분을 많이 알았고 그렇기에 배운 점이 많았다.목표를 필수목표에 집중하는 등, 애자일하게 했다고 생각했는데, 마감이 닥치니까 되던게 안되었고 조급해지는것 때문에 흔들렸다. 하지만 처음 해본 프로젝트 치고는 결과물에 대한 아쉬움이 없을 정도로 만족스러운 프로젝트였다.
• 윤숙님테크니컬스킬이 부족해서 아쉬웠고 블로커에 고민을 많이 안했던 부분에서 아쉬웠다. 바로 멘토님께 물어봐서 그런 부분이 아쉬웠다.감사한 부분 : 서로 상처 안받고 커뮤니케이션 해서 고맙고, 부담없이 해서, 만족도에 못미쳤다고 생각이 들지만 과정에서 많이 배웠다. 이 팀하고 같이 일하고 싶다, 앞으로 팀으로 만났으면 좋겠다는 생각을 했다. 못하는 부분에서 하나의 목적으로 하나의 목표로 찾아가는 게 인상깊었다, 팀의 분위기를 위해 많이 노력했고 중요성도 깨달았다...! 기다려주고 의견내주고 하나 하고 기다려주고 맞춰보고 한 계단 같이 올라갔던 것이 너무나도 소중한 경험이었다.
• 전체한계단 한계단 같이 올라갔던것이 너무 소중한 경험이었다....!모든 페이지에 접근해서 다양하게 해본 경험들이 잘했다..!내실있게 하는게 제일 중요한 것 같다. 기본이 탄탄해야 올라갈 수 있으니까....!

JavaScript provides two notations for accessing object properties.

The first and most common, is known as the dot notation.

Under dot notation a property is accessed by giving the host object's

name.

Followed by... a period (or dot) followed by... the property name

==============

Example)

shows how the dot notation is used to read from and write to a

property.

if object.foo initally held the value one, than the value will become two after executing this statement.

**Note that if the object.foo did not already have a value, than it would be undefined.

==============

object.foo = object.foo + 1;

==============

1. option + shift + drag ** = don't care of selection, cares about about the cursor

2. *option +shift + i * = do a selection get a cursor for lines

3. command + slash = comment or uncomment

4. *option + shift + up or down * = copy elements many times

5. option up and down = to modify lines

6. *option click * = add a cursor edit lines faster

7. command + D = repeat words at more at once will select all

bonus

8. command + up = import something

9. ** command + down** = down to the page

10. command + b = hide the side bar

each object represents one todo list

example 1)

1. We'll call our list atom :

todoListState ** and create it using the **atom() function:

const todoListState = atom({
  key: 'TodoList',
  default: [],
});

========

2. We give our atom a unique key and set the default value to an empty array. To read the contents of this atom, we can use the useRecoilValue() hook in our TodoList component:

function TodoList() {
  const todoList = useRecoilValue(todoListState);

  return (
    <>
      {/* <TodoListStats /> */}
      {/* <TodoListFilters /> */}
      <TodoItemCreator />

      {todoList.map((todoItem) => (
        <TodoItem key={todoItem.id} item={todoItem} />
      ))}
    </>
  );
}

and

front >>> git accesstoken >>

1. 혼자 할 때와 팀으로 진행할 때 다른 점
2. 리팩토링 하고 싶은 부분이나 기억하고 싶은 코드
3. 프로젝트 마치고 느낀 점 (반성이나 다짐도 오케이)
4. 어떤 개발자가 되고 싶고, 개발자에게 중요하다고 느끼는 것
5. 우리가 팀으로서 뭐가 잘 되고 뭐가 잘 못 되었는지 얘기해보쟈

Answer :

1. 한 번 어떤 어려움에 부딫히면 실패를 많이 하게 된다. 다시 방향을 잡는데 오래 걸렸다.
2. 네브에서 체크인 체크아웃 캘린더 더 하기, 게스트 추가 기능 작동 하게끔 기능 구현 하는 것, 소셜로그인에서는 로그아웃을 구현하고 싶다.
3. 제일 많이 느낀 점은 혼자보다 팀의 중요성을 느꼈다. 그리고 사람한테 조임을 주면 안 된다고 느꼈다. 스스로 해결 할 시간을 주는게 문제를 해결하는 더 좋은 방법이라는 생각. 시간관리 마지막에 힘들어서... 정리하는 부분에서 팀원에게 도움을 너무 많이 받아서 든든하고 감사했다는 생각. 여유가 없어서 팀원 케어를 못 한 부분이 죄송. 부족한 점은 기술에 대한 공부
4. 안 되면 내려놓고 다른 것을 했었어야 했는데, 그걸 잡고 매달려서 시간을잡아먹어서 판단이 부족했다는 생각이 든다. 그래서 명확한 판단력이 중요하다고 생각한다. 팀원들에게 얘기를 못했던 점이 잘 못 됐다는 생각이 들어서 어떻게 설명해야할지 모르겠어서 말 하지 못 했던 점...

1.Manual Testing

2.Automation Testing

3. system test 전략 3가지 >> back tested in postman >>

front >> reload in server

build product right and build product product

01-2, why test? 결함 확인 > 사전 방지 > 시간 절약 > 구조 개선 필요 > 품질 개선 > 확장성

2. Manual Testing (사람이 직접 테스드 진행) => 불안정성 (up), 일력소모 (up), 비용 (up) , testing takes longer (down) => 사람은 기복이 있다

02-1. Automation Testing > 안정성 (up) , 인력소모 (down) , 비용 (down) , testing is more productive (up), 확장성 (up) 무리가 없다

3. 시스템 테스트 전략 3가지 (unit test 짜야된다) > end to end tests >>> 전체적인 flow (ex 브라우저상 클릭 후 생기는 변화에 대한 검증)

(ex) todo list >> DB >> FE,BE server

intergration tests >>> 모듈간의 호환성 검증 (ex) 웹페이지 혹은 postman 을 통한 api 호풀 시 올바르게 동자가는지 확인

unit test (단위 테스트) >> 독립적으로 진행되는 가장 작은 단위의 테스트 (ex. 하나의 기능 또는 메소드)

queryParameter >> 함수로 테스트로 >>

validation >> email 검증하는 함수 >> string >> boolean으로 return (test)하는 것이다. 메일이 true/false 있는지, false email


=====

cypress end to end test >> dlwfur gn cnrk gkrh done check 


03-2. Integration Test

03.3 Unit Tests

03.4. 단위테스트 작성의 필요성
코드 리패토링 시 안정성 확보 >> input >> output 이 잘 나온다... 문제 없이

=====

함수 >> 뭘하는 지 모를 경우 , 함수 테스트 진행

1. 기능되는 모자 => 기능 구현 먼저
2. refactoring 모자 쓰자, 가독성 좋고, 효율성 고민 => custom hook

====== 코드 분리되고, 관심사의 분리

-- 학습 목표

1. 관신사의 분리 (SoC, Separation of Concerns)

2. Custom Hook에 대한 개념 이해하고, 함수 컴포넌트로 부터 로직 (State, Effect등)

=======

1. What is Separation of Concerns? (관심사의 분리)

1.1. What if... 확장, 변동이 많다 개발하면서...

1.2. agile 하게 생각하면 좋다!! 한번에 한가지만 생각하면 된다, 한번에 하나 가자만 걱저해도 괜찮다

• loose coupling 낮은 결합도 각각의 토드가 서로 얽혀있지 않고 독립적으로 잘 분리되어 ==> 의존 성으로 낮춘다

ex) mcdonald working SOP >> converyor belt >> each position is specified

• high cohesive 높은 응집도, 유사한 내용끼리 비슷한 위치에 잘 모여 있음 ==> 특성을 발결할 수 있다.

1.3. Example 관심사의 분리 장점:

• 코드 가 더욱 명료해짐
• 코드 재사용성이 올라감
• 유지 보수가 용이함
• 테스트 코드를 작성하기 쉬워짐
• test code >> TDD test driven

}

====

2. How to Write My Own Custom Hook

3. View화 logic의 분리 (Dan Abramov)

• presentational component: how things look

• containger component: logic only

1. create signin file feature/signup (combine commit --> review applied + review applied 2)

2. main branch > remote main > pull >>>> push > feature branch >>> git rebase -i main

   a. how to use rebase >>> move to main >> current git pull origin main >> git rebase -i main >> editor is visible >> insert mode click i to change mode >> p, pick = use commit!! + s pick others below will be squashed...>> commit

3. when successful!! >> git log (commit message) >> push

>> esc -> :wq!

4. rebase push >>> when >> git push origin feature/login -f

5. after commit 2 times or 3 times, use rebase >> 충돌 적어진다

6. git add . >>> staging only, (don't commit!!)

   git add ./ git rebase --conitnue

============

main branch >> feature/sign-up (create new branch) >> sign-up >> commit 4xtimes (recorded by time)

main branch >>> align with merge commit (unnessary

main branch >> feature/sign-in (create new branch) >> work in progress >> main >> sign-in merge >>> record git merge main add

sign up branch will add>>

Problem

============ Git flow >>> basic flow default>>> develop

1. main branch is used for production releases (V1.0.0) // default branch // never touch

2. A develop branch is creadt from main // make a new develop branch

add to develop >>> 기능 개발 완료 > QA quality assurance (software testing) 직원들이 테스트 과정 >> 생성할 떄 >>> release branch에서 진행하고 >>> 다시 >>> during production error can occur and develop (make a branch>> hotfix>> error 수정하는 branch 해서 merge 다시 하기

3. The develop branch contains stable features for the next release

4. Create as many feature branches as you like

5. Integrage when the feature is stable

6. changes on the devleop branch must be merged back into feature branches

7. Use a release branch to isolate and stablize the release (Release/ v2.0.0)

8. Create a hot fix branch to patch a production release (HOTFIX/HF1)

9. Hot fixes are integrated into both main and develop

feature/F1 >>> fearure/F2

need to add!!!!!

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
Source:sass-lang.com
11
Sass @mixin and @includeCSS By SAMER SAEID on Dec 7 2020 ThankComment
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

1. git checkout master : local에서 master로 checkout한다.
2. git pull origin master : remote의 수정된 master을 local에 pull한다.
3. git checkout working-branch : 작업중인 브랜치로 이동한다.
4. git merge master : 최신화된 local의 master를 작업중인 브랜치에도 반영한다.
5. conflict 발생 시.....

function Login() { const [idValue, setIdValue] = useState(''); const [pwValue, setPwValue] = useState(''); // const navigate = useNavigate();

const handleIdInput = e => { setIdValue(e.target.value); };

const handlePwInput = e => { setPwValue(e.target.value); console.log(idValue, pwValue); };

const isValid = () => { if (idValue.includes('@') && pwValue.length >= 8) { return true; } return false; };

// const condition = idValue.length > 0 && pwValue.length > 0;

const navigate = useNavigate();

const handleFetch = () => { fetch('http://10.58.6.174:8000/users/signin', { method: 'POST', body: JSON.stringify({ email: idValue, password: pwValue, }), }) .then(response => response.json()) .then(result => { if (result.access_token) { localStorage.setItem('token', result.access_token); navigate('/'); } else { alert('가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.'); } }); };

return (

export default Login;`` 코드를 입력하세요 ```

What is Git?

• Git is at local storage in my computer, marked at local status

What is GitHub master?

• rename from master to main, due to racist comments from slave to master

• remote repostiory

What are the commands?

• the -m means message, when you make a commit, need to write a message based on what you WIP, ADD, FIX, DELETE, in detail

How to create a file from Git?

• command to make directory
• mkdir*
• command to create file from iTerm2 or Terminal
• touch nameoffile.md*

How to startup iTerms commands

• [1] to run iTerms/terminal *npm start *

• [2] to stage all saved files, with the dot . means to stage all

• git add .*

  either or

• [3] to stage one file at a time, without the dot

• git add*

• [4] check status of staging

• git status*

• _[5] without -m "Message", will represent a single commit, without be vis

• git commit*

• [6] git commit -m "first initial commit"

• *git commit

• [7] git push origin master

3. git commit -m "Add: Login, Main"
4. git push origin feature/yunsook (push commit into remote)
5. request PR to mentor regarding to be reviewed (Pull Request)
6. when request is reviewed and verified, mentor will then approved to merged in Github to be posted in github which is the master where the codes are approve
7. git branch (check to see location)
8. git checkout master
9. git pull master (update files)
10. git checkout feature/yunsook (change branch) or git switch feature/yunsook
11. git feature/yunsook merge master (git)

git status (on branch feature/yunsook -> changes to be. commited / use "git restore --staged ..." to unstage) / to distinguish the new files to be loaded will be in green marked as new files, or modified git add . git status >>> git commit -m “Add: Login, Main”
(when you commit,this status is still in the temporary local, before going to the master of Github) git push origin feature/yunsook (local working location) next step is to send git merge from github git branch (this is to locate the branch) git branch master (branch is located in the master) git checkout master (is to leave and switch to the master local) git branch (git branch) git checkout feature/yunsook (switched to branch 'feature/yunsook' (it's switched to brand 'feature/yunsook')

• shortcuts >>> vscode improve productivity

  BONUS shortcuts

  if you want to go to the top of the file command + up arrow ,

        especially when you want to add a import 

  if you want to go to the bottom of the file command + down arrow

  used especially to export or edit from the bottom

command + B is to hide your side bar

NO.1 option + shift + drag** especially useful when you want to select the column all at the same time

NO.2 option + shift + i** it let’s you get a cursor for every line you have selected, this will let me format much much better

first highlight the your selections , and then press option + shift + i

NO.3 command + / commenting and uncommenting this line

NO.4 option + shift + up arrow + down arrow** it will copy a line (useful when using html or css, no need to copy and paste anymore

highlight element first and use the option + shift + up and down arrow

option + shift + up arrow** >>> will add an element at the bottom

option + shift + down arrow** >>> will add a element at the top

NO.5 option + up arrow + down arrow** move codes up and down in place to modify the position in place, instead of using copy and paste

NO.6 command + CLICK add a cursor and edit lines to fix it, to exit esc

NO.7 command + D first highlight the word of the the code take one code that is repeated many many times and select all at once the highlighted word will be selected and then a cursor will be at the end, so you can add additional codes if needed all at the same time

// fetch data with backend ```

const goToMain = () => { fetch('http://10.58.5.235:8000/users/signin', { method: 'POST', body: JSON.stringify({ email: idValue, password: pwValue, }), }) .then(response => response.json()) .then(result => console.log('결과: ', result)); };