블로그

강지원

[인프런 워밍업 스터디 클럽 2기 FE] 강지원 과제 제출

<JavaScript 과제> Day 2 Mission (음식 메뉴 앱)github : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission1개발 시간 : 3시간개발 순서메뉴 정보를 담을 menu.json 파일을 만들었습니다.fetch를 사용하여 json 데이터를 불러오고 main 부분에 동적으로 child를 추가해주었습니다.각 카테고리 button에 onClick eventListener를 달아주고 curCategory 변수를 선언하여 현재 클릭 된 카테고리가 무엇 인지에 따라 다른 child가 main에 보여지도록 했습니다.아쉬웠던 점useEffect나 useState를 대체할 코드를 js로 짜는 것이 미숙해서 코드가 깔끔하게 짜이지 않은 것 같아 아쉽습니다.카테고리 버튼을 누를 때마다 main에 이미 있는 child를 모두 제거 후 다시 필터링해서 append 해주었는데, 코드가 비효율적인 것 같아서 아쉽습니다.느낀 점첫 과제를 무사히 끝내서 다행이다. 이번 과제는 바닐라 js로만 앱을 만든 것이 3년전 이후로 처음이라 많이 해맸지만 앞으로의 과제를 만들면서 js 실력이 많이 길러질 것 같아서 기대가 됐다. main 화면Breakfast를 클릭한 화면  Day 3 Mission (가위 바위 보 앱)github : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission2개발 시간 : 2시간구현 사항가위, 바위, 보 버튼을 누르면컴퓨터에서 랜덤 변수를 생성하고 플레이어와 승패를 비교합니다.승패에 따라 승리 횟수를 업데이트 해주고, 남은 횟수를 1 감소 시킵니다.남은 횟수가 모두 소진됐을 경우최종 승리 횟수를 비교해서 알맞는 문구를 띄워주고 replay 버튼을 보여줍니다.replay 버튼을 누를 경우모든 횟수가 초기화됩니다. 느낀 점한번 만들어봤던 앱이라서 바로 만들기부터 시작했는데, 중간에 막혀서 고생했다ㅠ 구현할 기능과 순서를 다시 쭉 적어 놓고 구현하니까 순조롭게 만들어져서 요구 사항 작성의 중요성을 다시 한번 깨달았다. main 화면 (게임 중)게임이 끝난 화면  Day 4 Mission (퀴즈 앱)github : https://github.com/noaprost/inflearn_study_js_mission/tree/main/misson3개발 시간 : 2시간구현 사항랜덤으로 1~50사이의 수를 골라서 문제를 생성합니다.랜덤으로 정답+랜덤 수 / 랜덤 수1+랜덤 수2+정답이 없습니다. 둘 중 하나를 보여줍니다.정답을 누를 경우 Next 버튼이 보여지고 버튼을 클릭하면 다음 문제로 이동합니다.문제를 틀렸을 경우 Restart 버튼이 보여지고 버튼을 클릭하면 새로운 문제를 보여줍니다. 아쉬웠던 점정답/틀린 답을 클릭했을 경우 ui를 보여줄 때 class 이름을 추가하고 삭제하는 방식으로 구현했는데, if문도 많이 중첩되어있고 긴 코드를 작성한 것 같아서 아쉽습니다. 추후에 더 나은 코드로 리팩토링을 하고 싶습니다. 만족한 점답 버튼을 최대한 랜덤으로 보이게 하고 싶어서 수를 먼저 만들고 이후에 동적으로 생성한 점이 만족스럽습니다. 느낀 점생각보다 구현할 때 신경 쓸 부분이 많았고, ui 처리가 어려웠지만 재밌게 만들었다. 영상에 요구 사항이 잘 안보여서 규칙 등을 직접 정하면서 만들었는데 그 점도 재밌었다. 문제를 띄운 화면정답을 클릭했을 경우오답을 클릭했을 경우  Day 5 Mission (책 리스트 나열 앱, Github Finder 앱) 책 리스트 나열 앱github 주소 : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission4개발 시간 : 1시간구현 순서form을 만들어서 input 값 2개를 받는다.submit 버튼을 누르면 input에 있던 값을 다른 변수에 저장해둔다.데이터를 가공해서 리스트에 책 제목과 저자, 삭제 버튼을 담은 목록을 보여준다.삭제 버튼을 누르면 해당 리스트가 삭제된다.느낀 점이번 과제는 개인적으로 정말 쉬웠다. todo 앱 강의를 먼저 듣고 나서 만들어서 그런지 가장 명확하게 구현 순서가 그려져서 재미있었다. 책 생성 화면책 삭제 화면Github Finder 앱github 주소 : https://github.com/noaprost/inflearn_study_js_mission/tree/main/mission5개발 시간 : 7시간구현 순서Github api로 user정보와 repo정보를 가져온 후, repo 정보는 최근에 작성된 것이 먼저 보여지도록 정렬한다.displayUserInfo와 displayLatestRepo 함수를 이용해서 각각의 정보를 화면에 보여준다.필요한 정보 정리// user data에서 가져올 목록 // 맨위 4개 태그 public_repos public_gists followers following // 리스트 info company blog location created_at // View Profile 버튼 html_url // 최근 리포 baseUrl repos_url // repo data에서 가져올 목록 // Latest Repos name -> html_url 이용해서 이동할 수 있도록 stargazers_count watchers_count forks_count 어려웠던 점새로운 user를 검색할 때 마다 userInfo와 latestRepo 컨테이너에 담긴 정보들을 지워주고 새로 담아야 하는데, 아래의 간단한 코드를 떠올리지 못해서 3시간이나 해맸다.document.getElementById("user-info").innerHTML = ""; document.getElementById("latest-repo").innerHTML = ""; 느낀 점처음 user의 정보를 가져오는 BaseUrl을 찾는 것이 어려웠지만 url을 찾고 나니 나머지는 데이터 가공 뿐이라서 만드는 과정은 재밌었다. main 화면검색 결과 화면 (user info)검색 결과 화면 (latest repo)  <React 과제> Day 9 Mission (예산 계산기)github 주소 : https://github.com/noaprost/inflearn_react_mission_budget_calculator개발 시간 : 4시간구현 사항예산 목록을 생성, 수정, 삭제할 수 있어야 한다.목록 지우기 버튼을 누르면 목록 전체가 삭제되어야 한다.생성, 삭제, 수정 시 맨 위에 status를 알려주는 상태 메세지를 띄워준다.총 예산을 계산해서 가장 아래쪽에 표시해준다. 느낀 점그동안 Next.js, Three.js 공부를 하느라 React 프로젝트를 오랫만에 만들었더니 간단한 CRUD 앱인데도 꽤나 어렵게 구현하였다. 역시 꾸준한 것 보다 좋은 것은 없는 것 같다ㅠㅠ 과제를 진행하면서 잠시 잊었던 감을 다시 찾아야겠다는 생각이 들었다. main 화면예산 입력 후 화면예산 수정 화면  Day 10 Mission(디즈니 플러스 앱)github 주소 : https://github.com/noaprost/disneyplus_clone개발 기간 : 약 2일페이지 별 구현 사항로그인 페이지firebase를 이용해서 구글로 로그인을 한다.로그인 버튼을 누르면 popup창이 뜨고 로그인이 되면 홈으로 이동한다.Navbaruser가 있으면 프로필 사진이 원형으로 보여지고, 없으면 LOGIN 버튼이 보여진다.disney 로고를 누르면 user가 있을 경우 "/home"으로 이동, 없을 경우 "/"로 이동한다.user 프로필 사진을 hover하면 LOGOUT 버튼이 1.5초간 보여지고 클릭 시 user 정보가 사라진다.메인 페이지axios를 이용해서 영화 목록을 받아온 뒤 영화 하나의 정보를 보여준다. (이미지, 제목, 설명)영화사 버튼을 만들고, hover 시 영상이 재생되도록 한다.인기 영화, 평점 높은 영화, 판타지 영화, 액션 영화 각 카테고리에 맞는 영화들의 이미지를 보여준다.카테고리에 보여지는 영화들은 swiper를 이용해서 감싸준다.카테고리에 보여지는 영화를 클릭할 경우 상세 정보를 담은 모달이 나오고, 화면 밖을 클릭할 경우 모달이 닫히게 해준다.Modal이미지, 개봉일, 제목, 평점, 설명을 보여준다.메인 페이지에 오면 검색 창이 나타나고, 검색어 입력 시 검색 페이지로 이동한다.검색 페이지에서 메인 페이지로 돌아오게 되면 useLocation을 이용해서 검색어를 초기화해준다.검색 페이지로 이동할 때 검색어 정보를 query에 담아 url에 파라미터로 보내준다.검색 페이지useLocation으로 받은 데이터를 가공해서 검색어를 저장한다.검색어가 변경될 때마다 검색어를 query로 받는 검색 결과를 업데이트 해준다.결과의 이미지를 목록의 형태로 보여준다.이미지를 클릭할 경우 화면에 꽉 찬 이미지가 보여진다. 느낀 점이번 프로젝트를 하면서 React, CSS, Html, JS에 대해 새로운 것을 많이 알게 되었다. 과제를 하는 동안에는 에러도 많이 나고, 데이터가 안받아지거나, 페이지가 예상한대로 동작하지 않아서 스트레스도 많이 받아가며 만들었지만, 그 과정에서 실력은 확실히 성장할 수 있었다. 끝나고 나니까 뿌듯하고 계속 보게 됐다. 아쉬운 점카테고리 별로 영화 정보를 받아올 때, 인기 영화와 평점 높은 영화를 받아오는 api 주소와 장르별 영화를 받아오는 api 주소가 달라서 서로 다른 컴포넌트에서 로직을 짰다. 이것 때문에 swiper 코드와 Modal 코드, 목록을 보여주는 코드들이 중복이 된 것 같아서 아쉽다. 로그인 페이지메인 페이지메인 페이지 (영화사 버튼 hover 시)메인 페이지 (카테고리 별 목록)메인 페이지 (영화 상세 정보 모달)검색 페이지검색 페이지 (이미지 클릭 시)  Day 12 Mission (퀴즈 앱)github 주소 : https://github.com/noaprost/quiz_app개발 시간 : 3시간라우터 구조 및 구현 사항"/"Welcome to Quiz App을 보여준다."/question"수학 문제 2개를 보여준다.라디오 버튼을 클릭하면 답변 확인 버튼이 뜬다.답변 확인 버튼을 클릭하면 정답을 클릭했을 경우와 오답을 클릭했을 경우를 나눠서 보여준다.정답을 클릭했을 경우 border color를 green으로, 오답을 클릭했을 경우 red로 보여준다.정답인 label에 v표시를 붙여주고, 오답인 label에는 x를 붙여준다."/state"math와 alphabet 중에 하나를 선택할 수 있는 select box를 보여준다.선택하면 카테고리에 맞는 문제를 보여준다.채점 방식은 question과 동일하다."/quiz"퀴즈를 보기 전math와 alphabet 중에 하나를 선택할 수 있는 select box를 보여준다.연습 테스트 시작 버튼을 보여준다. 클릭하면 퀴즈 화면으로 변경된다.퀴즈를 보는 중문제와 남은 문제 수가 보여진다.답을 선택하면 다음 버튼이 보여지고, 마지막 문제였을 경우 제출 버튼이 보여진다.다음 버튼을 선택하면 다음 문제가 보여지고, 제출 버튼을 누르면 결과 화면으로 변경된다.퀴즈를 본 후총 문제 수 중 몇 문제를 맞췄는지 보여준다. (합격했을 경우 초록색, 아닌 경우 빨간색)시험 합격/불합격 여부가 보여진다. (4개 전부 맞을 경우 합격, 아닌 경우 불합격)새로운 연습 테스트 시작 버튼이 보여진다.버튼 클릭 시, 퀴즈를 보기 전 화면으로 돌아간다. 아쉬운 점문제를 랜덤으로 동적 생성하고 퀴즈의 문제 수도 설정할 수 있도록 구현해보고 싶었는데 시간이 부족해서 구현하지 못했다. 스터디가 끝난 후에라도 혼자서 개발해보고 싶다. 느낀 점그래도 가장 최근에 개발할 때 사용했던 Next.js와 Typescript여서 비교적 편하게 개발했던 것 같다. 구조들이나 변수가 반복되는 부분이 많다 보니 코드를 가독성 있게 짜기가 쉽지 않았다. 리팩토링에 대한 공부의 필요성이 느껴졌다. home 화면question 화면 (문제를 풀기 전)state 화면 (문제를 푼 후)quiz 화면quiz 화면 (연습 테스트 시작)quiz 화면 (테스트 결과) 

JSReact인프런스터디과제미션

강지원

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

따라하며 배우는 리액트 A-Z (7~13강) Day 11 (리액트 테스트 경험하기) TDD (Test Driven Development)개발 전 테스트 코드를 먼저 작성하는 방법론 순서테스트 코드를 작성 → 실행 (당연히 실패) → 딱 이 테스트 코드를 통과할 만큼의 코드만 작성 → 성공 → 다른 테스트 코드 작성으로 이동전부를 다 한 다음에 리팩토링 작업을 실행여기서 문제가 된다면 다시 테스트 코드를 확인하고 수정함 TDD의 장점소스 코드에 안정감을 줌디버깅 시간과 개발 시간이 줄어듦시스템 전반적인 설계 향상 (클린 코드가 나올 확률이 높아짐)개발 집중력 향상 (테스트를 하나씩 깨나가면서 개발할 수 있기 때문)  Day 12 (NextJS, 타입스크립트)내용을 복습하면서 원래 알고 있던 것 + 새로 알게 된 내용을 공부하는 방식으로 공부했다.특히 TS의 타입 들을 코드로 정리하면서 어떤 타입이 있었는지 다시 새길 수 있었다. Next.jsReact의 SSR을 쉽게 구현할 수 있게 도와주는 간단한 프레임 워크 특징 Full-StackFile-based RoutingSEO, Image, Font OptimizationServer Side RenderingHybrid Rendering CSR (Client Side Rendering)리액트만으로 프로젝트를 만들면 발생 → 렌더링 하는 주체가 클라이언트 (브라우저) 장점한번 로딩 되면, 빠른 UX 제공서버의 부하가 작음 단점페이지 로딩 시간(TTV)이 김 (FCP가 오래 걸린다고도 함)자바스크립트 활성화가 필수임SEO가 힘듦보안에 취약 (모든 react 라이브러리, js 소스 코드를 다 다운 받아야 하기 때문에)CDN(Content Delivery Network)에 캐시가 안됨 → 이러한 많은 단점들을 해결하기 위해서 나온 것이 SSR SSR (Server Side Rendering렌더링 하는 주체가 서버렌더링 되는 순간 : 요청 시 렌더링 (미리 해두지 않음) 장점페이지 로딩 시간(TTV)이 빠름자바스크립트 활성화 여부가 필요 없음SEO 최적화가 좋음보안이 뛰어남CDN에 캐시가 됨실시간 데이터를 사용!사용자 별 필요한 데이터를 사용함 (요청 시 렌더링 하기 때문에 요청하는 사람에 맞게 데이터 제공이 가능) 단점비교적 느릴 수 있음서버에 과부하가 걸릴 수 있음 (몇 천명의 페이지를 요청 시 마다 계속 만들어야 하기 때문에)CDN에 캐시가 안됨 (요청마다 새로운 페이지를 만들기 때문에) Typescript 타입 : value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법JS의 dynamically type이 야기할 수 있는 runtime error를 해결하기 위해 statically type을 적용 시킨 언어 사용하는 이유Typescript는 JS코드를 단순화하여 더 쉽게 읽고 디버그할 수 있도록 함Typescript는 코드 유형 검사를 통해 JS를 작성할 때 고통스러운 버그를 피할 수 있도록 도와줌  Day 13 (리덕스 학습하기 및 리액트 19) ReduxJS 어플리케이션을 위한 상태 관리 라이브러리 data flowAction간단한 JavaScript 객체수행하는 작업의 유형을 지정하는 'type' 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 'payload' 속성을 가질 수도 있음 Reducer어플리케이션 상태의 변경 사항을 결정하고 업데이트 된 상태를 반환하는 함수store 내부의 상태를 업데이트함 Redux Store어플리케이션의 전체 상태 가지고 있는 객체내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것 Redux 미들웨어action을 dispatch하고 reducer에 도달하는 순간 사이에서 사전에 지정된 작업을 실행할 수 있게 해주는 중간자 Redux Thunk비동기 작업을 할 때 많이 사용하는 방법Redux Thunk도 리덕스 미들웨어액션 내부에서 다양한 작업을 할 수 있게 해줌 Redux ToolkitRedux 로직을 작성하기 위한 공식 권장 접근 방식Redux 코어를 둘러싸고 있고, Redux 앱을 빌드하는 데 필수적인 패키지와 기능이 포함되어 있음Redux 작업을 단순화하고 일반적인 실수를 방지하며, Redux 앱을 더 쉽게 작성할 수 있도록 도와줌 느낀 점 redux의 기본 사용 법을 처음으로 배우는 것이라 신기하고 어렵게 느껴졌다. 강의를 따라가면서 기초에 집중하려고 노력했는데, 처음 배운 개념을 이용해서 앱을 만드려니 꽤나 막막해서 시간이 많이 걸렸다. 앞으로 더 능숙해지고 싶다. 일주일 회고스터디 중간에 몸이 3일 동안 아팠어서 시간이 많이 없었지만 열심히 달려서 겨우 완주 조건까지 달성했다.매일 새벽까지 과제를 개발한 덕에 JS 과제 5개와 React 과제 3개를 해냈다. 모든 과제를 해내면 신입 역량 이상이라고 하셨었는데 나는 아직 신입 역량 정도였나 보다. 아쉽다.그동안 머릿속에 스터디만 가득한 채로 3주를 보냈는데 막상 끝나려고 하니까 아쉽지만 3주전의 나와 지금의 나를 비교했을 때 많은 성장을 이뤄낸 것 같아서 뿌듯하다.이번에 알게 된 부족한 점들을 바탕으로 앞으로의 공부 계획을 세워나갈 예정이다.정말 의미 있는 시간이었고, 꼭 필요했던 시간이라고 생각한다. 강의 출처강의 주소(React) : https://www.inflearn.com/course/따라하는-리액트/코치님 성함 : John Ahn

ReactNextJSTypescriptRedux프론트엔드인프런스터디3주차

강지원

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

따라하며 배우는 자바스크립트 A~Z (8~10강)따라하며 배우는 리액트 A-Z (1~6강) Day 6 (Iterator, Generator, Design Pattern)디자인 패턴* 프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는데 사용할 수 있는 공식화된 모범 사례 * 최고의 솔루션 * 재사용성 * 풍부한 표현력 * 향상된 의사소통 * 코드 리팩토링 필요x * 코드 베이스 크기 감소Singleton* 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴 * 시스템 전체에서 작업을 조정할 때 정확히 하나의 객체만 필요한 경우 유용Factory* 특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있는 패턴 * 비슷한 객체를 반복적으로 생성해야 하는 경우 사용 * 동일한 코드를 반복할 필요 없게 해줌Mediator* 객체 그룹에 대한 중앙 권한을 제공하는 패턴 * 대표 예시 : 채팅방 * 중재자한테 먼저 채팅을 보내고 원래 보내려던 사람에게 중재자가 전달 * 정크 메세지 등을 거를 수 있음 Observer* event-driven 시스템을 이용하는 패턴 * 특정 subject를 관찰하는 많은 observer가 있고, 해당 subject에 변경 사항이 있을 떄, 알림 받기를 원하기 때문에 스스로를 등록(Register)함 * 관심을 잃게 되면 등록을 취소 * 예시 : 유명 연예인을 팔로워한 대중들 Module* 코드를 더 작고 재사용 가능한 조각으로 분할하는 패턴 * <script type="module"></script> 로 표현 가능 * 특징 * 1. 항상 strict 모드로 실행됨 * 2. 지연 실행됨 (defer) * 3. 인라인 모듈 스크립트도 비동기 처리할 수 있음 * 4. 외부 origin에서 스크립트를 불러오려면 Cors 헤더가 있어야 함 * 5. 증복된 스크립트는 무시됨 * 모듈 레벨의 스코프 * 모듈 안에 자신만의 스코프가 만들어져서 모듈 내부에 정의된 변수나 함수는 * 다른 스크립트에서 접근할 수 없게 됨 * 모듈은 최초 호출시 한번만 실행됨 * 스크립트 안에서 정보를 가져오기 위해서는 * import.meta를 사용해야 함 * async * 일반 스크립트에서 async -> 외부 스크립트에만 해당 * 모듈 스크립트에서 async -> 외부, 인라인 스크립트 둘 다 해당 Day 7 (프로젝트 만들기)StopWatch App// 지정된 timeout ms가 지날 때마다 handler를 실행해주는 함수 setInterval(handler, timeout) // setInterval에서 실행한 내용을 reset시키는 함수 clearInterval()Todo App// child 요소를 맨 앞으로 넣어주는 함수 prepend() Spreadsheet App // csv 파일을 다운로드할 수 있는 버튼을 만드는 방법 const csvObj = new Blob([csv]); const csvUrl = URL.createObjectURL(csvObj); const a = document.createElement("a"); a.href = csvUrl; a.download = "Spreadsheet File Name.csv"; a.click();백한테 파일 형태로 요청을 보낼 때만 써봤던 Blob을 이용해서 파일 다운로드 버튼을 만들어보다니 신기했다. Day 8 (중간 점검)라이브러리를 잘 활용하는 것도 실력이라고 하신 점이 기억에 남았습니다.너무 어려운 기능이 있으면 막막해서 라이브러리를 써볼까 하다가도 과연 개발자로써 직접 만들지 않고 이미 있는 것을 가져다 사용하는 것이 옳은 걸까라는 생각을 많이 했었는데, 이 부분을 확실하게 꼬집어주시면서 해결책을 주셔서 좋았습니다.코치 님의 말씀을 들으면서 라이브러리 사용을 두려워하지 말고 적극적으로 활용하는 개발자가 되어야겠다고 생각했습니다.그리고 third party api라는 단어를 잘 모르겠어서 찾아봤는데, 기업들이 이윤 창출을 목적으로 개발한 API라는 것을 알게 되었습니다. 예를 들어 구글을 통해 로그인, 구글맵 등이 third party api에 해당합니다. 예시로 든 두 기능은 프로젝트를 개발할 때 사용해봤던 api였는데도 불구하고 정확한 용어를 몰랐다는 점이 부끄러웠습니다. 앞으로 잘 기억해둬야겠습니다. Day 9 (리액트 기본 및 Todo 앱 만들기)React는 UI를 만들기 위한 JS 라이브러리 즉, Renders UI and responds/reacts to eventsSPASPA : Single Page Application 사용자가 버튼을 클릭했을 때 다른 페이지를 보여주는 것이 아니라 한 페이지 내에서 어떤 건 숨기고 어떤 건 보여주면서 동작하는 방식 성능 개선 부분이 너무 어려워서 코드를 따라치는 수준으로 겨우 들었다.. 추가로 공부를 더 하면서 완전히 내 것으로 만들어야겠다. Day 10 (리액트로 Netflix 만들기)강의를 보면서 더 공부하고 싶었던 내용들* Styled Component * Modal * ReactRouter * useLocation * useDebounce * useParamsTMDB api는 처음 사용해봤는데 넷플릭스, 디즈니 플러스 등 영화 정보가 필요한 앱을 만들때 굉장히 유용할 것 같다.여러 훅을 사용해 볼 수 있어서 좋았지만 한번에 이해하기는 힘든 부분이라 더 공부가 필요할 것 같다. Styled Component 내용 정리 및 개인적인 장단점 정리* CSS-in-JS JS 코드 내에서 잘 스타일링 된 컴포넌트를 직접 만들어서 가져다가 쓰는 방식 * 장점 - css 파일을 왔다 갔다 하지 않고 사용할 수 있다. * 단점 - JS파일 내에서 동작하기 때문에 수정하고 빌드할 때마다 재 컴파일 되어서 성능이 안좋음 - 스타일링과 컴포넌트를 오가며 작성해야 하는 불편함이 있음 - 컴포넌트만 봤을 때 이게 stlyed된 컴포넌트 인지 그냥 컴포넌트인지 구분할 방법이 없음 일주일 회고저번 주는 약과다 싶을 정도로 많이 바쁜 일주일이었다. 그래도 이렇게 무엇인가에 열중하는 경험은 몸이 피곤하더라도 기분은 좋다. 다음 주가 벌써 마지막 주라니.. 시간이 정말 빠르다. 마지막 주까지 힘내서 강의도 완주하고 과제도 잘 만들어야겠다.저번 주 회고 때 너무 많은 내용을 담은 것 같아서 아쉽다고 했었는데 확실히 저번 주 보다는 꼭 기억하고 싶은 내용들만 적어서 그런지 간략하고 가독성 있게 쓴 것 같아서 만족한다. 강의 출처강의 주소(JS) : https://www.inflearn.com/course/따라하며-배우는-자바스크립트/강의 주소(React) : https://www.inflearn.com/course/따라하는-리액트/코치님 성함 : John Ahn

JSReact인프런스터디프론트엔드2주차

강지원

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

따라하며 배우는 자바스크립트 A~Z (1~7강) Day 1 (OT)프론트엔드가 꼭 알아야 하는 기술들과 포트폴리오를 만들 때는 어떤 프로젝트 위주로 넣는 것이 좋은지 알 수 있었다. 도움이 되는 정보를 많이 주셔서 좋았고 스터디도 기대가 됐다.오티 때 가졌던 마음 가짐 그대로 완주까지 열심히 할 수 있으면 좋겠다. Day 2 (자바스크립트 기초)변수의 참조 범위 * var : 함수 레벨 스코프 * 함수 내에서 선언된 변수는 함수 내에서만 유효 * 함수 외부에서 참조할 수 없음 * let, const : 블록 레벨 스코프호이스팅 * var * 호이스팅이 됨 (선언 당시에 undefined을 할당) * 이후 할당 되었을 때 hello라는 값이 들어감 * 초기화 되기 전에 값을 사용할 수 있음 * let, const * 호이스팅은 되지만 초기화 되기 전에 어떤 값도 할당해주지 않음 * TDZ : Temporal Dead Zone (변수를 사용할 수 없는 일시적인 비활성 상태) * TDZ가 존재하기 때문에 초기화 되기 전에 값을 사용할 수 없음 DOM * 웹 페이지 빌드 과정 (Critical Rendering Path - CRP) * html 분석 -> dom tree 생성 -> css dom tree 생성 -> 합쳐서 렌더링 트리 생성 * -> 레이아웃 단계 : 배치할 요소의 위치와 크기를 계산 -> Paint : 실제로 그려짐 * 렌더링 트리 생성, 위치 계산과 그리는 단계의 비용이 큼 * 리액트는 이러한 부분의 성능을 개선하기 위해 virtual DOM을 이용함이벤트 * 비동기 작업인 setTimeout은 WebAPI에서 처리해줌 * setTimeout이 일정 초를 기다리면 콜백 큐로 함수가 이동함 * 비동기 작업이 Callback Queue에 쌓이고 * 이벤트 loop는 콜스택과 콜백큐를 모두 주시하고 있다가 * 콜스택이 비게 되면 콜백큐에서 하나씩 꺼내서 콜스택에 넣어줌 이벤트 버블링, 이벤트 캡쳐링 * 이벤트의 흐름은 3단계를 거치게 됨 * 1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계 * 2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계 * 3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계 * 이벤트 버블링 * 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것 * 위로 전달되면서 상위 요소의 event handler가 차례로 실행됨 * 이벤트 캡쳐링 * 이벤트가 위에서 아래로 내려가는 것 Day 3 (자바스크립트 중급 1)this * this * 메소드(객체안에 있는 함수)에서 this 사용 => 해당 객체를 가리킴(참조) * 함수에서 this 사용 => window 객체를 가리킴 * strict 모드에서는 함수에서 this 사용 => undefined을 가리킴 * constructor 함수에서 this 사용 => 빈 객체를 가리킴 // 화살표 함수 this => 항상 상위 scope의 this // Lexical this const my_audio = { title: "audio", categories: ["rock", "pop", "hiphop"], displayCategories() { // 여기서 this는 이 객체를 가리킴 this.categories.forEach((category) => { // 여기서 this는 상위 scope에 있는 this를 가리킴. 즉, 이 객체 console.log(`title: ${this.title} category: ${category}`); }); }, }; * forEach의 두번째 매개변수 => thisArg * 콜백 함수에서 this로 참조할 수 있게 됨 const my_audio2 = { title: "audio", categories: ["rock", "pop", "hiphop"], displayCategories() { this.categories.forEach( function (category) { // 이 this는 함수안에 있기 때문에 window를 가리킴 console.log(`title: ${this.title} category: ${category}`); }, { title: "audio" } // 두번째 매개 변수를 작성하게 되면 this가 이 object를 가리킴 // this // 여기에 this를 작성하게 되면 이 this는 메소드 안에 있는 것이 됨. 따라서 이 객체를 참조함 ); }, };closure // 예시 함수 function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log("Outer Variable: " + outerVariable); console.log("Inner Variable: " + innerVariable); }; } const newFunction = outerFunction("outside"); newFunction("inside"); * 순서 * 1. outerFunction("outside")는 newFunction에 할당되는 즉시 호출됨 * 2. 호출되면 newFunction에는 innerFunction(innerVariable)이 할당됨 * 3. newFunction("inside")을 호출하면 innerFunction("inside")이 호출되고 이때 클로저는 innerFunction이 outerVariable이 "outside"였다는 것을 기억하고 엑세스 할 수 있다는 것을 말함 * Closure 정리 * 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 * 해당 변수가 해당 함수 외부에서 더 이상 엑세스할 수 없는 경우에도 * 해당 내부 함수는 외부 함수의 변수 및 범위에 엑세스할 수 있다.this와 closure는 어렴풋이 이해만 하고 막상 설명을 하려고 하면 말이 잘 안나오던 개념이었다. 강의를 2, 3번 반복해서 듣고 다른 자료도 같이 찾아보면서 공부했더니 이번 기회에 확실히 설명할 수 있을 정도로 이해할 수 있었다. 뿌듯하다. Day 4 (자바스크립트 중급 2)undefined vs null* 공통점 * 둘 다 원시 자료형, 각 타입(undefined, null)에서 각 값이 유일함 * undefined * 아무 값도 할당받지 않은 상태 * js 엔진이 변수를 초기화하기 위한 용도 * 개발자가 의도적으로 값이 없음을 표현하고 싶다면 null이 적절함 * null * 비어있는, 존재하지 않는 값을 의미 * null이 할당 되면 가비지 콜렉션이 수행됨얕은 비교 vs 깊은 비교* 얕은 비교 * 원시 자료형 -> 값을 비교 * 참조 자료형 -> 참조되는 위치 비교 * 깊은 비교 * 원시, 참조 자료형 -> 값을 비교얕은 복사, 얕은 동결 vs 깊은 복사, 깊은 동결* 얕은 복사 * Object.assign(target, source), spread operator * 첫번째 depth 즉, 얕은 부분만 복사가 되기 때문에 얕은 복사 * 얕은 동결 * Object.freeze(object) * 역시 얕은 동결이기 때문에 깊은 곳은 동결이 일어나지 않음 * 깊은 복사 * JSON.parse(JSON.stringify()) * spread operator : 얕은 복사를 여러번 반복하는 것과 동일한 효과 * structuredClone() * deep copy는 주로 lodash, Ramda등 라이브러리를 이용함함수 선언문 vs 함수 표현식* 함수 선언문은 호이스팅 영향 o * 함수 표현식은 호이스팅 영향 xIIFE (Immediately Invoked Function Expression)* 정의되자마자 즉시 실행되는 함수 * 형태 ( // 첫 번째 소괄호 -> 전역 선언을 막고, 함수 내부로 다른 변수 접근을 막음 function () { // Do Something... } )() // 두 번째 소괄호 -> IIFE를 생성하는 괄호 * 목적 * 전역 선언을 막고, 함수 내부로 다른 변수 접근을 막기 위함 * 이름 없는 함수를 만들기 위해 사용 * 연산자를 붙여서도 사용 가능하지만 화살표 함수는 (를 꼭 붙여야함Pure Function* 함수형 프로그래밍 패러다임의 한 부분 * 규칙 * 1. 같은 입력 값이 주어졌을 때, 언제나 같은 결과 값을 리턴함 * 2. 사이드 이펙트를 만들지 않음 (외부 상태에 영향을 받으면 안됨) * 사용하는 이유 * 1. 클린 코드를 위해서 * 2. 테스트를 쉽게 하기 위해서 * 3. 디버그를 쉽게 하기 위해서 * 4. 독립적인 코드를 위해서 (decoupled / independent) * 장점 * 1. 특정 함수가 다른 함수에 미치는 예기치 못한 영향을 최소화 * 2. 함수가 어떤 결과 값을 리턴할지 예측할 수 있음currying// curring function // static (매개 변수를 동적으로 늘리지 못함) function curry(f) { return function (a) { return function (b) { return function (c) { return f(a)(b)(c); }; }; }; } // dynamic // 매개 변수가 몇개든 curry로 바꿔줄 수 있음 function curry2(func) { return function curried(...args) { if (args.length >= func.length) { return func.apply(this, args); } else { return function (...args2) { return curried.apply(this, args.concat(args2)); }; } }; } Day 5 (OOP, 비동기)prototype* prototype * 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속 받는 메커니즘 * prototype chain이라고도 함 * 더 적은 메모리, 코드 재사용성 증가 * 반복해서 사용되는 메소드가 있다면 prototype에 넣어주는 것이 좋음 * ObjectName.prototype.mathodName = ~~ * Object.create(함수 이름) // 사용 예시 function Person(name, email, birthday) { const person = Object.create(personPrototype); person.name = name; person.email = email; person.birthday = birthday; return person; } const personPrototype = { calculateAge() { const diff = Date.new() - this.birthday.getTime(); const ageDate = new Date(diff); return Math.abs(ageDate.getUTCFullYear() - 1970); }, }; ES6 class* 문법은 OOP방식을 이용하지만 내부에서는 prototype을 사용하여 작동 * 메소드가 자동으로 prototype에 들어감 * static을 사용하면 prototype에 들어가지 않고 constructor에 들어감 * 사용할 때는 인스턴스가 아닌 class 이름을 이용해서 사용해야 함 * static을 사용하는 경우 * 클래스의 필드를 사용하지 않는 독립적인 것을 생성할 때 사용 super* super * 부모 클래스의 생성자를 호출할 때 사용 * 부모 클래스의 메소드를 호춯할 때 사용 CallBack, Promise, Async Await* JS는 싱글스레드 : 한번에 하나의 일 밖에 못함 * 비동기를 사용하면 병렬적으로 작업을 수행할 수 있음 * 비동기 작업이 어떠한 비동기 작업을 의존하고 있을 경우 * -> CallBack, Promise, Async Await을 사용해서 처리할 수 있음 * Callback * 단점 * 1. 가독성이 떨어짐 * 2. 모든 콜백에서 각각 에러 핸들링을 해줘야 함 * Promise (ES6) * 3가지의 상태로 나뉨 * pending(대기) : 비동기 로직을 처리 중인 상태 * fulfilled : 처리가 완료되어 결과값을 반환한 상태 * rejected : 비동기 처리가 실패하거나 오류가 발생한 상태 * Promise.all([]) : 배열 안에 있는 모든 작업이 fulfilled 상태가 되어야 성공으로 침 * 하나라도 rejected될 경우 첫 번째로 실패한 작업의 이유가 반환됨 * Promise.race([]) : Promise * 배열 안에 있는 작업 중 가장 먼저 완료된 것의 결과 값을 그대로 이행하거나 거부 * Async Await (ES7) * 비동기 요청을 동기식으로 작성 가능하게 해줌 * 가독성이 좋음  일주일 회고단순한 JS 문법이 아닌 내부에서 JS가 어떻게 동작하는지, 개념의 정확한 설명이 무엇인지 등을 깊게 공부할 수 있던 시간이었습니다.제가 JS의 어떤 부분이 부족한지 뼈저리게 느낄 수 있었고, 앞으로 더 성장할 수 있다는 생각으로 열심히 공부해보려고 합니다.강의를 수동적으로 듣지 않고 코드도 작성해보고 추가적으로 궁금한 부분을 찾아보면서 능동적으로 공부했더니 더 머리에 잘 남은 것 같습니다.앞으로의 스터디도 능동적으로 참여해서 강의 내용을 제 것으로 만드는 것이 목표입니다.과제를 만들면서 js에 대한 이해도가 정말 많이 높아진 것이 스스로 느껴집니다. 아쉬운 점스터디 첫 주이다 보니 정말 기억하고 싶은 부분만 작성을 해두었는데도 내용이 너무 길어진 것 같아 아쉽습니다.2주차부터는 조금 더 가독성 있는 회고를 작성하고 싶습니다. 강의 출처강의 주소 : https://www.inflearn.com/course/따라하며-배우는-자바스크립트/코치님 성함 : John Ahn 

JS인프런스터디프론트엔드1주차

인프런 워밍업 스터디 클럽 2기 -백앤드 클린코드,테스트코드 1주차 발자국

https://www.inflearn.com/course/readable-code-%EC%9D%BD%EA%B8%B0%EC%A2%8B%EC%9D%80%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1%EC%82%AC%EA%B3%A0%EB%B2%951주차 진도는 readable 강의 세션 1~ 세션 4까지 였다.취직하면 유용할 리더블코드랑 테스트 코드 강의를 쿠폰 사용해서 할인받아서 살수있어서 쵝오! (뿌듯) 이 강의 를 들으면서 스터디에 참여할수있고 일석이조! 무엇보다 테스트코드 짜기 힘들어서 고민하고 있던 찰라여서 리더블코드 뒤에 배우는 테스트 코드 강의도 매우 기대된당! 실무에선 테스트 코드 짜는데 시간을 매우 많이 쓴다고 들었당.. 개발자 사회에 나가기 무서워 바들거리는 나약한 늙은 취준생..에겐 암튼 찰떡이당. 숙제도 화, 목 이렇게 두개 있어서 부지런히 해야했다! (하지만 부지런하지 못해 last minute에 허겁지겁 했지..)게으르고 가련한 취준생 에게 이렇게 숙제도 있어서 주워진 시간에 맞춰야하는 강의를 들어야 하는 스터디는 너무 좋은거 같아서 기쁘당! >_< 알려주신 분들께 감사!   4LS-회고법을 사용해보장!Liked (좋았던 점) 강사 선생님이 내어 주신 숙제를 통해 강의에서 배운거를 한번 적용하거나 정리할수 있고 또 함께 스터디 하는 분이랑 같이 배운거에 대해서 이야기할수있고 모르는건 물어볼수 있어서 좋았다. 개발자 친구들 생긴 기분 >_<v기간 내에 진도를 나가야지 숙제도 할수있고 또 스터디니 모르는건 같이 공부하는 사람들이랑 이야기하니 좋았당.스프링 오픈톡에서 추천받아서 참여한거라서 같이 스터디에 참여하신 분도 계시고 그래서 이번에 코드리뷰도 해주셔서 더 많이 배웠당! 유익한 시간!모르는 미지의 세계에 대한 격한 두려움이 있는 비전공자지만 이번 강의에 내가 좋아하는 뇌과학이랑 시도 나오고 추상화에 대해서 생각해보면서 추상화와 시랑 비교해볼수있어서 조금은 그 두려움이 사라진거 같기도 하다! Lacked (아쉬웠던 점)생각보다 양이 많고 나는 코드까지 따라치니 시간이 많이 걸려서 이제 부터는 더 부지런히 준비해야한다. ☹ 이건 내가 좀 더 노력하면 되는 문제! 하지만 현직 개발자분들에겐 초큼 양이 많지 않을까 싶지만 난 좋음!Learned (배운 점)지겹게 배운 SOLID 한번 더 배우니 조금 더 머리에 잘 정리된거 같고 좋다 이제 조금 워드보단 원리로 더 친숙해진거 같아서 굳.. 리더블 코드라는 강의 주제 답게 실무에서 리더블 코드의 중요성에 대해서 다시 생각하게 되었다. 1- 이름 짓기의 중요성 개발자들은 실무에서 찰떡같은 이름을 짓기위해서 많은 생각하는 시간을 보낸다고 한다. 협업하는 프로젝트일수록 진짜 이름 짓기가 중요하다. 내 시간도 절약되지만 타인의 시간도 절약시켜주니. 관용어처럼 줄이는 단어가 아니면 짧게 줄이는 이름보다 직관적으로 바로 이해할수있게 풀네임으로 짓는게 좋다고 한다. 메서드 이름과 함께 param을 연결 시켜서 문장 만들면 더 직관적인 코드가 된다. 이건 진짜 센스가 필요할거같다.. 연습해봐야지!  2- 뇌 메모리 적게 사용하기코테도 프로젝트도 겨우 겨우 구현하기 바빠서 한번도 생각 못해본건데 똑똑한 방법 같다. 너무 하나 하나 메서드로 만드는거 아닌가 했지만 깔끔해지긴 했다. 상황에 따라서 어떤게 더 직관적일지 판단해서 사용하는게 좋을거같다.if()문 안에 들어간 계산 법까지 메서드로 만드는 방법. 😮 3- Optional 사용 최소화하기 원래도 옵션널에서 꺼낼때 .get().getId() 이런 방식으로 코드가 짜여지는게 싫어서 .orElseThrow 사용해서 exception을 받아오긴 했는데 optional로 들어간 객체는 클래스안에서 반환할때 그냥 객체보다 무겁다고 한다. 이거 몰랐당!! .orElse랑 .orElseGet 이 두개가 조금 차이가 있으니 사용할때 조심하장.orElse()는 들어가보면 삼항?연산자( (number==7) ? true : false)를 사용하기 때문에 확정된 값만 사용한다.(null이 아닐때도 실행된다고 한다).orElseGet - null인 경우만 실행된다. 4- abstract 와 interface의 차이점 Abstract Class상속: 단 하나의 클래스만 상속받을 수 있다 (단일 상속).특징: 공통된 속성과 메서드를 포함하고, 자손 클래스에서 반드시 구현해야 할 추상 메서드를 가질 수 있다.용도: 관련된 클래스들 사이의 기본적인 구조와 행동을 정의하는 데 유용하다.예시: 기본 클래스에서 공통 기능을 구현하고, 자식 클래스에서 이를 확장할 수 있다.Interface상속: 여러 개의 인터페이스를 구현할 수 있으며, 인터페이스 간의 다중 상속이 가능하다.특징: 메서드 선언만 포함되며, 구현은 제공하지 않는다. 각 클래스가 필요에 따라 메서드를 구현해야 한다.용도: 특정 기능이나 역할을 정의하고, 서로 다른 클래스들이 이 기능을 공유하도록 한다.조합: 인터페이스를 잘게 나눠서 여러 개로 만들 수 있어, 불필요한 메서드를 피하고 필요한 기능만 구현하도록 할 수 있다. 예시: 자동차 만들기Abstract Class (차)자동차의 기본적인 구조와 공통 속성을 정의합니다. 예를 들어, Car라는 추상 클래스가 있을 수 있습니다. 이 클래스는 모든 자동차가 공통적으로 가지는 속성(예: 브랜드, 모델, 연료 종류 등)과 메서드(예: startEngine(), stopEngine())를 포함할 수 있습니다. Interface (기능들)인터페이스는 자동차가 수행할 수 있는 다양한 기능을 정의합니다. 예를 들어, Driveable, Flyable, Electric 같은 인터페이스가 있을 수 있습니다. 각 인터페이스는 특정 기능을 나타내며, 이를 구현하는 클래스는 해당 기능을 실제로 수행하는 메서드를 구현해야 합니다. 예시: abstract class Car { String brand; String model; abstract void startEngine(); abstract void stopEngine(); } interface Driveable { void drive(); } interface Flyable { void fly(); } interface Electric { void charge(); } 차 (Abstract Class): 자동차의 기본 구조와 공통 기능을 정의.기능들 (Interfaces): 자동차가 가질 수 있는 다양한 기능을 정의하여, 여러 클래스가 이를 구현할 수 있도록 함. Longed for (앞으로 바라는 점)미리 미리 열심히 해서 조금 더 깊이 있게 공부 하고 싶당.. 이건 나만 부지런해 노력하면 되는 일.. ☹ 다음에는 cs도 들어보곱.. 햐..  

인프런워밍업그터디클럽리더블코드클린코드인프런스터디

7마리상어

[인프런 워밍업 클럽 BE 0기] 1주차 발자국

스프링 부트에 관심이 생겨서 주변인들의 도움이나 여러 강의들을 통해서 조금씩 공부를 하고 있었는데 인프런 워밍업 클럽 스터디라는 기회가 생겨 이 스터디를 통해 아직 제대로 갖춰지지 않았던 기초를 조금 더 다지고 싶고, 공부하면서 놓쳤던 부분들에 대해 복습하고, 더 새로운 지식들을 얻어 가고 싶어 신청하게 되었다. 1일차서버 개발을 위한 환경 설정 및 네트워크 기초 스프링 프로젝트를 시작하는 방법과 네트워크와 HTTP, API에 대한 기본 개념 그리고 실전으로 들어가 GET API를 개발하고 테스트하는 것 까지 학습했다. 그 과정에서 이전에 공부했었던 부분들에 대해 복습할 수 있었고, 직접 테스트해보면서 조금 더 이해할 수 있었다. 1일차 미션 (어노테이션을 사용하는 이유(효과)와 나만의 어노테이션 만드는 법)이제까지 만들어져있던 어노테이션만 계속해서 사용했었는데 직접 어노테이션을 만들어서 사용할 수 있다는 것에 흥미를 느꼈다. 그래서 커스텀 어노테이션에 대해 조사해보면서 만드는 법에 대해 알게 되었고, 이제까지 사용했던 어노테이션들이 어떻게 만들어졌는지에 대한 원리들을 깨달은 좋은 계기가 되었다.[1일차 과제](https://www.inflearn.com/blogs/6573) 2일차첫 HTTP API 개발앞서 배웠던 서버 개발을 위한 기본 환경 설정을 토대로 우리의 최종 목표인 도서 관리 어플의 유저 생성 및 조회 API를 직접 작성해보았다. 그 과정에서 GET API와 POST API가 어떻게 동작하는지에 대해 알 수 있었고, 이런 저런 데이터들을 가지고 테스트를 해보면서 API에 대한 이해를 높일 수 있었다. 2일차 미션 (GET, POST API 만들기)2일차 강의를 보며 익힌 GET API와 POST API의 작성을 스스로 해볼 수 있었다. 기본적인 API 작성에 관한 문제였기에 크게 어렵지는 않았는데 컨트롤러와 DTO 코드를 작성하면서 어떻게 하면 더 좋은 코드를 작성할 수 있을지에 대해 고민하면서 작성한 것 같다. 그리고 평소에 자주 쓰지 않았던 LocalDate 객체를 찾아보면서 주요 메소드들을 사용해 볼 수 있는 좋은 기회였다.[2일차 과제](https://www.inflearn.com/blogs/6592) 3일차기본적인 데이터베이스 사용법 이제 데이터를 데이터베이스에 넣어 서버를 재시작해도 사라지지 않도록 데이터베이스를 사용하는 방법에 대해 학습했다. 테이블을 만들고, 그 테이블에 값들을 넣고 조회하는 SQL 쿼리문을 배웠고, JdbcTemplate를 사용하여 Spring에서 데이터베이스를 사용하는 방법으로 우리가 이전에 작성했던 API들을 수정하였다. 3일차 미션 (자바의 람다식 등장 이유 및 람다식과 익명 클래스의 관계)자바를 공부해오면서 람다식을 사용하기만 했지 왜 람다식이라는 문법이 등장했을까? 라는 의문에 대해서는 생각해 본 적이 없었는데 이번 기회에 람다식에 대해 조금 더 이해할 수 있는 기회가 되었다. 그리고 이제까지 람다식을 단편적으로 사용했는데 조금 더 많은 문법을 알게되어 앞으로 사용에 있어서 더 효과적으로 사용할 수 있을 것 같다.[3일차 과제](https://www.inflearn.com/blogs/6670) 4일차데이터베이스를 사용해 만드는 API4일차에는 3일차에서 배운 Spirng에서 데이터베이스를 사용하는 방법을 통해 우리의 최종 목표인 도서 관리 어플리케이션에서 유저를 업데이트하고 삭제하는 API를 작성해보았다. 그 과정에서 JdbcTemplate의 update메소드와 query메소드를 사용해보면서 데이터베이스에 값을 수정할 수 있었고, 데이터의 부재로 인한 예외 처리는 어떻게 하는지에 대해 알 수 있었다. 4일차 미션 (GET, POST API 만들기2)2일차 미션에서는 데이터베이스에 저장하지 않았었는데 이번에는 2일차 미션에서 더 나아가 JdbcTemplate 메소드를 활용하여 데이터베이스에 값을 저장해보았다. 문제의 풀면서 API에서 long을 사용하는 이유를 찾아볼 수 있었고, SQL문의 sum이나 group by 같은 문법을 통해 더 효과적으로 SQL 쿼리문을 작성할 수 있었다.[4일차 과제](https://www.inflearn.com/blogs/6699) 5일차클린 코드의 개념과 첫 리팩토링 1주차의 마지막 5일차에서는 클린 코드의 중요성과 Controller를 Service와 Repository로 3단 분리하는 방법에 대해서 학습하였다. 클린 코드의 중요성은 처음 코딩을 공부할 때 부터 많이 들어왔었는데 그 중요성에 대해서 이번 강의를 통해 조금 더 확실하게 느낄 수 있었다. 또한 Controller 코드를 분리하면서 최종 완성된 코드를 보니 메소드들이 몰려있던 처음과 다르게 확실히 보는 것이 편해졌고, 각 메소드들이 어떤 역할을 하는 지에 대해 이해가 훨씬 수월했다. 5일차 미션 (코드 리팩토링)최대한 클린하지 않게 작성된 코드를 리팩토링하여 클린하게 개선해 보는 시간을 가졌다. 처음에는 한 클래스에서 코드를 여러 함수로 나눌지, 아니면 클래스를 나눌지 여러 고민을 했는데 고민 끝에 기능을 구현할 함수들만 새로운 클래스를 작성하여 만들었다. 확실히 최초의 코드보다는 훨씬 깔끔했지만 조금 더 클린하게 만들 수 있는 방법에 대해 계속 생각하면서 그러한 생각속에서 많은 것들을 얻을 수 있었다.[5일차 과제](https://www.inflearn.com/blogs/6725) 회고인프런 워밍업 클럽 스터디에 참여하고 벌써 1주 차가 되었는데 아직 초반임에도 불구하고, 정말 많은 것들을 얻어 갈 수 있었다. 스프링 부트에 관련된 지식뿐만 아니라 여러 사람들이 공부하는 방식과 그를 위한 열정들을 보면서 스스로 성장할 수 있었다. 기본 지식부터 시작해 실습과 과제를 통해 그저 머릿속에 넣을 뿐 아니라 활용하는 것을 알게 되었고, 덕분에 조금 더 기억에 남을 수 있었다. 이번 일주일 동안 매일 시간을 내어 강의를 보고, 과제를 작성하고, 공유하면서 꾸준히 해온 나 스스로가 기특하고, 모르는 부분에 대해서 그냥 넘어가지 않고, 계속해서 찾아보는 시간이 무엇보다 값진 시간이었다. 인프런 워밍업 클럽 스터디를 통해 더디게 걸었던 내가 더 힘차게 걸어갈 수 있는 방법을 알게 해주었고, 앞으로 남은 2주 동안 1주차 보다 더 열심히 해서 스터디가 끝나고 나서는 시작하기 전에 모습과 몰라보게 달라진 내 모습을 기대된다.       

백엔드인프런워밍업클럽인프런스터디

채널톡 아이콘