[인프런 워밍업 스터디 클럽 2기 FE] 2주차 발자국

Symbolsymbol은 유니크한 식별자를 위해 사용 (보여지는게 같더라도 내부에서는 다른 값을 가진다)설명을 넣을수도 있다.(설명이 없다면 어떠한 심볼인지 알기가 어렵다)getOwnPropertyNames와 for/in에서는 기본적으로 속성이 숨겨진다Iterator & GeneratorIterable === 반복가능, for..of, Symbol.iterator 값을 가지면 가능Iterator next()를 호출해서 두 개의 속성을 가진 객체를 반환하는 객체Generator는 사용자의 요구에 따라 여러 값을 반환할 수 있음 함수 실행 중에 일시적으로 정지, 재시작이 가능제너레이터를 사용한 라이브러리는 Node.js의 프레임워크 Koa, 비동기 처리를 위한 리덕스 미들웨어 Redux Saga 등이 존재Design Pattern디자인 패턴의 장점최고의 솔루션, 재사용성, 풍부한 표현력, 향상된 의사 소통, 코드 리팩토링 필요 없음, 코드베이스 크기 감소싱글톤 : 클래스의 인스턴스화를 하나의 객체로 제한팩토리 : 비슷한 객체를 반복적으로 사용하는 경우(유사한 여러 객체를 많이 찍어내기 위함..?)중재자 : 객체 그룹에 대한 중앙 권한을 제공상태 : 객체가 특정 상태를 나타내는 객체 집합에 상태별 논리를 제공(스스로 행동을 변경할 수 있게 허가)모듈 : 코드를 파일을 더 작고 재사용 가능한 조각으로 분할옵저버 : 옵저버들이 특정 Subject들을 관찰 후 알림React 리액트는 UI를 랜더링하는데 관여하기 때문에 프레임워크가 아닌 라이브러리이다리액트는 여러 컴포넌트 조각으로 이루어져있음여러개의 컴포넌트가 모여서 하나의 페이지를 이룬다(클래스형, 함수형 컴포넌트 2개가 존재)가상돔을 사용해 바뀐 부분만 브라우저 돔에 적용한다(돔을 조작하는 비용을 줄일 수 있게 됨)Missonhttps://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap6비밀번호 만들기https://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap7타이핑 측정기리액트 미션은 아직 jsx가 익숙치 않아서 4,5 섹션을 복습 한 뒤에 해봐야겠다..

[인프런 워밍업 스터디 클럽 2기 FE] 1주차 발자국

자바스크립트는 처음이지만... 이번 주 동안 배웠던 내용들을 가볍게 정리했다var, let, constvar : 중복 선언, 재할당 가능let : 중복 선언 불가, 재할당 가능const : 중복 선언과 재할당 둘 다 불가함 (재할당이 필요없다면 const를 사용하자 Window 객체브라우저에 의해 자동으로 생성(브라우저의 창을 나타냄) 브라우저 창에 대한 정보 찾기, 제어 가능var로 변수, 함수를 선언시 window 객체의 프로퍼티가 됨 DOMHTML 문서를 프로그래밍적으로 조작할 수 있는 객체 기반 구조각 HTML 요소는 트리 구조로 이루어진 노드로 표현Document 객체와 메서드를 이용해서 웹페이지의 상태와 모든 HTML 태그에 접근 가능 Event버튼을 클릭했을때 액션이 일어나게 하려면 -> EventListener이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 객체나 요소에 등록해야함이벤트 종류UI, 키보드, 마우스, 포커스, 폼 등이벤트 버블링 : 이벤트가 발생했을시 이벤트가 상위 요소 핸들러에 전달 됨이벤트 캡처링 : 버블링과 반대로 상단 요소에서 아래로 이벤트가 내려옴이벤트 딜리게이션 : 하위 요소의 이벤트를 상위 요소에 위임Closure함수가 정의된 환경을 기억하고, 그 환경에 접근할 수 있는 함수(함수가 실행된 이후에도 외부 함수의 변수를 기억하는 기능), 데이터 은닉, 상태 유지 등에 사용순수 함수동일한 입력값에 대해 항상 동일한 결과를 반환하고, 외부 상태에 의존하지 않으며, 부작용이 없는 함수IFEE정의와 동시에 사용되는 함수, 변수를 전역으로 선언하는 것을 피하기 위해서 사용됨 (내부 안으로도 다른 변수들이 접근하는 것을 막을 수도 있음)비동기JS는 싱글 스레드 언어이지만 비동기 작업이 가능Callback: 작업이 완료되면 호출할 함수 전달Promise: 비동기 작업의 성공 또는 실패를 나타내는 객체async/await: Promise를 처리하기 위한 더 간단한 문법ES6ES(JS의 표준 사양을 정의하는 스크립트 언어. JS는 ES 표준을 구현한 언어)ES6는 ES의 6번째 버전이며 2015년에 발표(가장 중요한 버전)미션 1https://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap1 미션 2https://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap2 미션 3https://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap3 회고JS는 아예 진짜 처음이라 배우는데 너무 익숙하지 않아 고생했다다음주에 JS 강의 1회독을 빨리 마무리하고 이해가 되지 않았던 부분부터 차근차근 복습해야겠다

[인프런 워밍업 클럽 1기] BE 3번째 발자국

Section 4 정리이름 등록, 변경만 구현한 상태에서 책 생성, 대출 , 반납 기능까지 구현해보았고, 하다가보니 중간에 매핑 관련해서 에러가 계속 발생해서 정말 애를 많이 먹었었는데, 천천히 오류를 찾아가면서 해결하는 재미가 있었던 것 같다. 배우면 배울수록 코드가 간결해지는 것을 보면서 성장하고 있음을 느낄 수 있었다. JPA 연관관계에 대한 여러 기능들을 써보고 찾아보면서 SQL도 공부를 열심히 해야겠음을 깨달았다.Section 5 정리h2 DB를 사용하는 시간이였는데 개인적으로 MySQL보다 간편한거 같아 처음에 DB를 입문하는 분들이 사용하기에 좋았던거 같고, git, github에 대해서 짧게 되돌아 볼 수 있었고 마지막으로 AWS에 설정을 해보면서 배포 과정을 조금이나마 알 수 있는 기회였다.7일차 과제전에 3단분리 과제를 할때는 하나도 이해가 안되된 부분들이 JPA을 구현해보면서 어느정도 이해가 되었고 역할 분리에 대해서 더 잘 알게 되었던 과제였던거 같다.

[인프런 워밍업 클럽 1기] BE 2번째 발자국

Section 3 정리클린 코드에 대해서 듣고 Controller를 3단 분리를 해보면서 가독성, 간결성 뿐만 아니라 특히 유지 보수 부분에서는 정말 사용이 필수적인 거 같다고 느꼈습니다.스프링 빈, 컨테이너와, Ioc에 대해서 배우고 나서 필요한 의존성이 자동을 설정된다는 점과, 컨테이너를 사용해서 Ioc를 구현 그리고 스프링 빈 주입을 통해 컨테이너와 클린 코드와 어떻게 연관이 있는지 이해할 수 있었습니다. Section 4 정리JPA를 배우고 나서 SQL을 작성하지 않고도 DB를 관리할 수 있다는 것을 알았고 yml 설정을 통해서 스프링에서 자동으로 해주는 것이 많구나라는 생각이 들었습니다.Spring Data JPA를 실습해 보면서 추상화된 다양한 메소드를 사용해 더 간편하게 쿼리를 보내는 법을 배웠습니다.트랜잭션 부분에서 코드에서 어떻게 구현할까 궁금했었는데 스프링이 어노테이션 하나로 처리해 준다는 부분이 놀라웠습니다. 또한 영속성 컨텍스트의 능력이 개발자를 더욱 편리하게 해준다는 생각이 들었습니다.4일차 과제직접 dto , Controller를 구현해 봄으로써 jdbc에 대해 잘 이해하고 sql 문법도 익힐 수 있는 과제였던거 같다. https://velog.io/@sung515/%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%9B%8C%EB%B0%8D%EC%97%85-%ED%81%B4%EB%9F%BD-1%EA%B8%B0-BE-4%EC%9D%BC%EC%B0%A8-%EA%B3%BC%EC%A0%9C 5일차 과제클린 코드에 대해 배우고 이를 간단한 코드로 직접 구현해 보면서 앞으로도 코드를 짤때 개념을 숙지하면서 짜야겠다는 생각이 들었다.https://velog.io/@sung515/%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%9B%8C%EB%B0%8D%EC%97%85-%ED%81%B4%EB%9F%BD-1%EA%B8%B0-BE-5%EC%9D%BC%EC%B0%A8-%EA%B3%BC%EC%A0%9C 6일차 과제API를 3단 분리를 직접 해보면서 강의 때 조금 와닿지 않은 부분이 채워졌던 거 같고, 리포지토리 구현 부분에서도 어렵다고만 생각했는데 해보니까 코드가 훨씬 간결해지고 어노테이션으로 Ioc를 구현해보면서 클린 코드에 대해서 직접 깨달을 수 있던 거 같다.마무리처음에 들으면서도 어려운 부분(jdbc...부터) 은 몇 번이고 반복해서 들었던 거 같다. 특히 이리저리 클래스를 움직이면서 따라가는 것이 약간 버거웠지만 그래도 다 해놓고 나니까 보기도 편하고 이제 진짜 스프링을 통해서 개발을 한 것 같다. 이제 한 주밖에 남지 않았는데 열심히 해서 배포까지 성공적으로 마쳤으면 좋겠다~

[인프런 워밍업 클럽 1기] BE 1번째 발자국

Section1 정리API가 무엇인지, 구성요소 , 종류를 배웠다.GET,POST API를 계산기를 이용하여 실습했다.DTO, JSON의 개념에 대해서 배웠다.https://airy-son-f4f.notion.site/Section-1-767980170f1c45fb9b17cdce80cbb5f1Section 2 정리컴퓨터의 핵심 부품의 예시를 들어 데이터베이스의 필요성을 배웠다.SQL 기본 문법을 배웠다. 여태까지 커맨드라인으로만 SQL을 다뤘었는데 인텔리제이에서도 할 수 있다는 것을 배우고 놀랐다.(인텔리제이가 훨씬 편한거 같다...)Jdbc를 이용해 테이블 생성, 갱신, 수정 ,삭제(CRUD)를 배우고 실습했다. 실시간으로 코드와 SQL을 연결해 DB가 바뀌는것이 신기했다. https://airy-son-f4f.notion.site/Section-2-6bec7c7c350d4c46beaa95a3b97fd6f1 1일차 과제어노테이션이 뭔지는 대충 알고 있었는데 커스텀 어노테이션을 만들 수 있다는 것을 알 수 있었고, 어노테이션의 역할에 대해서도 더 확실히 알게되었다.https://velog.io/@sung515/%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%9B%8C%EB%B0%8D%EC%97%85-%ED%81%B4%EB%9F%BD-1%EA%B8%B0-BE-1%EC%9D%BC%EC%B0%A8-%EA%B3%BC%EC%A0%9C2일차 과제DTO와 컨트롤러 개념이 강의를 듣고 난 이후에도 잘 잡혀있지 않았는데 여러 문제를 직접 실습해 보면서 어느 정도 이해를 할 수 있었다.자바 코드 구현 과정에서 날짜를 다루는 부분과 Stream API 를 잘 몰라 이번 기회에 공부하면서 자바에 관해서도 부족하다는 걸 느꼈다..https://velog.io/@sung515/%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%9B%8C%EB%B0%8D%EC%97%85-%ED%81%B4%EB%9F%BD-1%EA%B8%B0-BE-2%EC%9D%BC%EC%B0%A8-%EA%B3%BC%EC%A0%9C3일차 과제개념이 희미했던 익명 클래스에 대해서 다시 한 번 공부할 수 있던 기회였고, 가끔씩 코드에 람다나, Stream API가 나오면 무슨 뜻이지 이해가 안됐었는데 이번 기회에 어느 정도 감을 잡을 수 있는 계기가 되었던 거 같다. https://velog.io/@sung515/%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%9B%8C%EB%B0%8D%EC%97%85-%ED%81%B4%EB%9F%BD-1%EA%B8%B0-BE-3%EC%9D%BC%EC%B0%A8-%EA%B3%BC%EC%A0%9C 마무리..벌써 발자국을 작성하는 날이 되다니 시간이 정말 빠른 거 같다. 처음에 최태현 님 강의만 들으려던 찰나 우연치 않게 워밍업 클럽에 대해서 알게 되었을 때, 여러 사람들과 함께하면서 의욕을 돋우는 게 좋다고 생각해 워밍업 클럽 스터디를 신청하게 되었다. 아무래도 학교 공부랑 병행하다 보니 쉽지 않았지만... 강의를 듣고 정리하고 이후에도 과제를 하면서 다시 강의 내용을 상기할 수 있는 부분이 정말 좋았던 거 같다. 또 듣다 보면서 자바에 대한 개념이 부족한 부분이 많다는 것을 깨달았다. 앞으로 강의도 들으면서 자바 공부도 틈틈이 해나가야겠다..3일차 강의를 사정이 있어 듣지 못했는데 연휴가 하루 껴있는 만큼 다음 주는 이번 주보다 더 나은 한 주가 되도록 열심히 해야겠다!!