블로그 모아보기 - 인프런

인프런 워밍업 클럽 스터디 1기 FE 과제(9번 과제)

[9번 과제(Day10)-디즈니 플러스 앱]따라하며 배우는 리액트 A-Z학습 범위: Section 4 ~ 5https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/disney-plus과제 이미지gif 또는 webp 움짤을 올릴려고 했으나.. 용량 초과로 스크린샷 이미지로 올리겠습니다 :)768px 에서는 반응형 처리를 해뒀다.(초기 페이지만)vite + react + ts 를 사용하였다.스타일링은 module css 방식으로 작성하였다.처음에 나오는 페이지는 실제 디지니 플러스를 참조하여 반응형까지 구현이 되어있다.영화 정보는 TMDB API 를 활용하였다.로그인을 하여, 토큰을 받으면 이를 Context 에 저장하여 공유를 해주고 있다.Modal 은 Portal 을 사용하여 렌더링을 하고 있다.crousel UI 는 slick 을 사용하였다.(중간에 이미지가 비어있는건, API 에서 이미지 데이터가 없는 경우이니 무시해 주세요.)

프론트엔드･인프런･워밍업클럽･FE･1기･과제

0

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

강의 수강Section 1 - 생애 최초 API 만들기 스프링부트 프로젝트를 생성과 시작하는 방법 네트워크의 기본지식 GET API, POST API 개발Section 2 - 생애 최초 Database 조작하기MySQL 테이블 생성과 데이터 CRUD스프링에서 DB연결하여 Section 1 에서 만들었던 기능 DB로 바꿔보기예외처리Section 3 - 역할의 분리와 스프링 컨테이너역할의 분리, 스프링 컨테이너를 사용하는 이유미션미션을 해결하는 과정에 있어서 이론에 대한 과제는 구글링을 많이 해보며 해결하였고, 문제풀이 과제에 있어서는 수업시간에 알려주신 내용을 적용해보고자 내가 알고있는 방식을 사용하지 않으려고 최대한 노력하여 해결해나갔습니다.첫번째 과제 : https://marble-morning-cfc.notion.site/cb942416aeb146a8ba1c2cc6a016adf5두번째 과제 : https://marble-morning-cfc.notion.site/228acc26d0a747b1a8cdbec83a2d8165세번째 과제 : https://marble-morning-cfc.notion.site/ed40f10ddb3d48ba830d0f88a6e55a31회고강의내용을 듣고 과제를 함에 있어서 자료도 많이 찾아보고, 생각도 많이 하게되는 과제가 출제해주셔서 스터디를 올바른 방향으로 하고 있구나 느꼈고, 아직 부족한 실력이지만 남은 기간 스터디 이외에 다른 공부들도 열심히해서 많은 것들을 얻어 갈 수있는 스터디가 되도록 열심히 해보겠습니다!

백엔드

0

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

1. 강의 관련새로 배운 내용console 객체 console.log 외에 .table, .error, .warn, .time, .clear 등 다양한 메소드가 있다. 변수 선언 let const는 호이스팅 되도 초기화가 일어나지 않아서 TDZ에서 호출시 undefined가 아닌 에러가 뜸객체 타입 콜 스텍에 값이 그대로 저장되는 원시타입과 달리, 객체 타입은 주소만 저장 실제 값은 메모리 힙에 저장이 된다 forEach for 문에서 루프제어를 위한 break, continue를 사용할 수가 없기에 return 등의 꼼수를 써야한다. 웬만하면 배열의 모든 요소를 순회해야할 때만 쓰는 게 좋은 듯 window 객체 원래 스크롤 관련 메소드들만 알고 있었는데, location, history, cliboard 등의 유용한 메소드들이 있다. innerHTML textContent, innerText html 내부 값을 바꿀 때 무지성으로 innerHTML만 써왔는데 비용이 높다고 한다. 내부 텍스트만 수정이 되는 경우에는 text 관련 메소드를 사용하는 것이 좋다.iterator와 generator다시 공부해야함. 뭔소린지 모르겠음회고다행이 미리 알고 있던 내용이 대부분이고, 강의도 미리 들어둬서 진도에는 맞출 수 있었지만 리액트 파트는 진도를 어떻게 따라가야할지 조금 막막하다 지식은 가장 자신만만할 때가 갓 기본을 뗐을 때인 것 같다. 기본 강의 완강하고 뭐든 만들 수 있을 것 같던 때에서 3배는 더 많은 지식을 습득했지만 여전히 JS는 자신이 없다. 리액트 파트 시작 전에 조금 더 심도있게 학습을 해야할 것 같다. 2. 미션 관련Click! 미션 GitHub 주소각 프로젝트별 상세는 각 프로젝트 readme 파일에 서술해 뒀으니 간단하게 언급하고 넘어가려한다. 미션 1 음식 메뉴앱로직 플로우메뉴 항목들이 속한 ul에 click eventListener를 부착하여 개개의 li가 아닌 ul에서 이벤트를 처리한다.클릭된 요소의 name 속성(카테고리 정보)와 data.js에서 갖고온 데이터를 renderMenu 함수에 전달한다.renderMenu함수는 data에서 선택된 메뉴에 해당하는 데이터를 선별 후 화면에 그린다. 회고하는 내내 리액트면 금방하는데 라는 생각을 했던 것 같다. 그래서 리액트 처럼 랜더로직과 데이터를 분리하여 만드는 것을 목표로 했다. 미션 2 가위바위보로직 플로우 시작하기를 누르면 게임화면으로 넘어간다. 컴퓨터는 가위 바위 보 중 랜덤으로 낸다. 가위 바위 보 중 뭐든 냈을 경우에 승패에 따라 스코어를 갱신하고 결과를 보여준다. 한 세트가 끝나면 종합 스코어를 표시하고, 다시하기 버튼으로 다시할 수 있도록 한다. 회고 만들면서 시행착오를 가장 많이 한 프로젝트이다. setTimeout과 setInterval을 원없이 써봤다. 기본 구현 사항이 너무 시시하고 디자인도 좀 아쉬워서, 두 부분을 좀 더 확장해봤다. 미션을 보고 짱꼔뽀가 생각나서 디자인은 거기서 레퍼런스를 얻어 만들었고, 로직은 '안내면 진거'를 추가 했다. 로직 자체는 간단한데 interval을 어디서 clear할지를 고민해야했다. 우측의 카운트 다운과 가운데 컴퓨터 픽이 바뀌는 두 부분이 서로 다른 interval로 돌아가기 떄문이다. 이 때문에 두 interval을 동시에 관리할 수 있는 패턴을 고안하여 설계했다.안 내면 진거 가위바위보 미션 3 퀴즈 앱로직 플로우 문제 데이터를 html에 바인딩고룬 선택지에 따라 화면을 분기정답인 경우오답인 경우 다음 버튼을 눌러 다음 문제로 ( 갖고올 데이터 위치++)회고 미션 영상을 여러번 돌려봤지만 도무지 뭘 만들어야하는 건지 알 수 없었다. 최소 구현 스펙을 서술해주면 좋겠다. 그래서 로직 자체보단 데이터처리나 디자인 처리에 주안점을 두고 미션을 수행했다. 퀴즈 데이터는 chatGPT에게 프론트엔드 퀴즈 10개를 내달라고 부탁해서 데이터를 갖고 왔다. 그러자 문제 데이터를 txt로 주길래 연습할 겸 fs로 데이터를 갖고와서 데이터를 파싱하는 함수를 작성했다(data.js),함수를 작성하던 중 문득 'json형식으로 퀴즈 데이터 만들어줘' 라고 질문하면 되지 않을까 싶어서 해보니 정말 됐다....그러나 연습이니 변수명만 참고하고 직접 해보았다. 또, 알기만 하고 써보진 않았던 ::after 선택자를 활용해서 정오답 처리(o, x)를 진행했다.번외로 가장 디테일을 많이 챙긴 미션이다.배경색은 안과의사가 추천하는 눈이 피로하지 않은 색이다. 퀴즈 푸는 데 머리만 아파야지 눈이 아프면 안 되지, 안 그런가?문제 부분의 텍스트는 수능에서 쓰는 중명조체이고 css font-face를 통해 갖고 왔다.정답 표시 파트에서 선택지에 hover시 노란색으로 변하는 css는 정오답 선택지에 대해서는 무시된다. (정오답 선택지에 !import 붙임) 미션 4 리스트 앱 리액트 기본예제에서 지겹도록 해본 todo앱이다. MVC 패턴을 사용해보려 노력했다. 또 no-CSS 프로젝트로 html만을 이용해서 페이지를 구성했다. 로직 플로우 리스트 추가 및 삭제데이터 수정 (MODEL)데이터 추가 : bookData 배열에 데이터를 추가한다.데이터 삭제 : bookData 배열에서 데이터를 삭제한다.랜더링 (CONTROL) : 수정된 데이터를 받아와서 template(VIEW)에 데이터를 바인딩하여 랜더링알림 : 데이터 수정 후 성공 알림을 띄움 (dialog //화면 중간에 팝업창 뜸)회고 유저 플로우를 생각하여 입력 편의 개선에 신경을 썼다. 별 건 아니지만 꽤 편하다.페이지 최초 진입시 제목 input에 autofocus되도록 속성을 추가함책을 등록 후 제목 input을 비우고, 제목 input에 focus가 되도록 함 생각보다 다양한 HTML 테그가 있다는 것을 알게된 프로젝트이다. dialog, fieldset, legend, table 등 평소 잘 안 써본 테그들을 적극 기용하여 마크업에 힘을 썼다. 특히 dialog 테그를 조작하는 과정에서 js로 html 속성을 다루는 방법을 심도 있게 학습할 수 있던 것 같다. 미션 5 GitHub Finder 앱fetch를 통해 github api를 활용해보는 것이 목표인 프로젝트이다. Next.js에서 지겹게 해본 부분이라 쉽게 해결할 수 있었다. 로직 플로우 검색창 input에 input 이벤트리스너를 부착하여 검색어를 받는다.input의 값이 바뀔 때마다 fetch 함수를 통해 데이터를 불러온다.가져온 데이터를 바인딩한다. (단, 데이터가 없는 경우 (response.message == 'Not Found') 에는 유저 데이터를 표시하지 않는다.). 회고 github OAuth 인증하고 토근을 같이 보내지 않으면 시간당 20건의 요청만 거부되지 않고 할 수 있다. 이 부분을 찾아보고 해결해도 잘 되지 않았다.. mock 데이터를 활용할까 했지만 데이터를 만드는 것이 더 시간이 걸릴 것 같아서 요청을 최소화하면서 날마다 조금씩 작업을 했다. 다행이 어렵진 않아서 금방 끝났지만 다음에는 캐싱을 하든 뭘 하든 해결책을 강구해야할 것 같다. 미션 6 비밀번호 생성 앱로직 플로우 선택된 옵션 항목에 따라 문자풀을 생성한다.생성할 비밀번호 길이와 문자풀을 통해 랜덤 비밀번호를 생생한다.생성된 비밀번호를 결과창에 표시한다. 회고 chatGPT에게 html, css를 맡겼는데 checkbox input과 label을 이용하여 꽤나 세련된 옵션창을 만들어줘서 놀랐다. 물론 fieldset과 legend는 직접 수정했다. 난이도가 제일 쉽고 코드도 가장 짧은 프로젝트였다. 영문 대소문자를 베이스로 하고, 특수문자는 홈페이지마다 비밀번호 양식이 다르니 유저에게 입력 받는 방식으로 만드는 게 더 좋지 않았을까 싶다. 문자풀을 생성하는 과정에서 fromCharCode라는 String의 메소드를 찾았는데 직접 [a,b,c...] 하지 않아도 되서 편했다.let pool = []; //영문 대문자를 풀에 추가 if (qs("#include-uppercase").checked) { const uppers = Array.from({ length: 26 }, (_, idx) => String.fromCharCode(idx + 65) ); pool = pool.concat(uppers); ... } 프로젝트 관련 회고기능 구현은 다 되지만 이게 잘 짜여진 코드인지 아닌지를 스스로 판단할 힘이 다소 부족한 것 같다. 다른 사람들 코드를 참고하면서 좋은 부분을 흡수할 수 있도록 해야겠다. 그리고 미션 7. 타이핑 테스트는 가장 재밌는 미션인데 시간이 너무 부족해서 무사히 마무리할 수 있을지 모르겠다.

프론트엔드･워밍업클럽･발자국

0

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

학습 내용강의 내용네트워크IP 고유 주소HTTP와 API에 대해서HTTP는 지켜야 할 규칙. 일종의 통신을 위한 표준서로 소통하고 상호작용하기 위해 정의된 규약HTTP methodGET, POST, PUT, DELETE HTTP 응답값DBRDB데이터를 표처럼 구조화 시켜 저장하는 친구SQL표처럼 구조화된 데이터를 조회하는 언어인텔리J DB 연결 DDLDB를 정의하는 언어CREATEALTERDROPTRUNCATEDMLSQL 데이터를 조작하는 언어SELECTINSERTUPDATEDELETE Layered Architecture 3단 분리ControllerServiceRepository회고록스터디에 참여해서 꾸준히 강의를 듣게 만들어줘서 좋다. 게으른 나도 열심히 하는중!수업 자체가 기본기부터 천천히 접근하기 좋게 되어 있어서 이해하기도 쉽고 전체적으로 내용을 복습하기 좋은 수업이다!생각해보니까 포스트맨 자주 안쓰듯이 개발했는데 이번 기회에 포스트맨으로 테스트 하는 습관을 기른거같다~~! 미션이론, 실습 이렇게 돌아가면서 미션이 있는거같다.이론 부분도 어노테이션이 있어서 사용했지 어노테이션의 배경지식 같은건 깊게 생각해본적이 없는데 이참에 찾아보게 됐다. 실습 부분도 하면서 다른분들은 나랑 다르게 어떻게 진행했는지 알 수 있어서 좋았다!최근에 4일차 미션같은 경우도 요구조건에 맞게 테이블 컬럼을 어떻게 짜보면 좋을지 다시 생각해보게 된거같다.

백엔드･워밍업･워밍업스터디･워밍업1기･워밍업백엔드

0

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

시작4주 동안 잘 해보자.피그마의 기능/장점을 이애하지 못하고 '빠르게 제작/수정 여럿이서 공동작업이 용이한 툴' 정도로 사용하고 있었다. 그러다 이 강의를 신청하고 동료와 스터디를 하려고 하던 참에 인프런 워밍업 스터디 클럽이 진행된다고 해서 신청했다.무료버전만 사용하다 보니 variable을 안써봤는데 교육용으로 계정도 준다고 하여 고민없이 신청했다.네이밍 짓기 너무 어려운데 알려준다고 한다.4주 열심히 따라가다 보면 완강도 할 수 있을 거 같았다.이런 이유로 나는 워밍업 클럽을 신청하게 됐다.수업 노트 Libraries Color 만들기tailwind color palettes 를 이용해서 색을 만들어줍니다.color style guide를 이용해서 등록된 라이브러리 색을 가이드화 시켜줍니다.만들어진 스타일 가이드에서 필요한 색만 남기고 삭제 해주고 사용하세요. 컨버스에 있는 컬러팔레트와 스타일가이드는 지워주세요.플러그인 -> color style guide 를 실행시켜줍니다. variable collection 만드는 순서primitive Collection를 만들어서 hex 코드를 넣어주세요.semantic Collection 을 만들어서 libraries 에서 색상을 찾아서 연결 시켜주세요.primitiveblue, green, yellow, red, gray ...색의 원시값(Hex)을 저장해 놓은 디자인 언어의 기본 값blue 100/500, red 100 등 이렇게 등록 themebrand, success, danger, info, warning, neutral ...상황에 맞게 등록 함 semantictext, icon, bg, border의미에 맞게. Color Scoping: 색의 범위를 지정해 줌.bg : frame 선택icon: shape 선택text: text 선택border: stroke 선택 베리어블을 다 등록한 후에는 local에 있는 스타일은 지워주세요. 왜요? 색상 값이 너무 많아서 선택하기 힘들어요.Icons단색 아이콘은 vector->union 으로 합쳐주세요. 그러면 Fill로 색상을 바꾸기 좋아요. PluginAutometic Style Guides: Generate Swatches from Variables 베리어블에 만들어진 내용들을 스타일 가이드 형식으로 만들어줘요.Foundation color generator: ddTailwind Color Palettes: 색을 만들어준다. (필요 없는 색은 지워준다.)Color Style Guide : 등록된 라이브러리 색을 가이드화 시켜주자.typography style guide: 글자 스타일을 등록했다면 스타일 가이드를 만들자.Batch styler: 스타일 등록할 때 글자 지정을 잘 못했다면 일일이 바꾸지 말고 플러그인을 쓰자. GridFrame 에서 Auto Layout 적용 후 반응형 Min-width / Max-width 지정할 수 있어요.회고Variable 등록하기는 자면서 들었나봐요.미션1은 자면서 들었나 싶을 정도로 엉뚱하게 제출. 튜터 볼드님의 코멘트를 보고 수업 노트 적어가며 강의를 다시 들었다. 다른 학습자분들이 올려주신것도 보면서 미션을 수행하니 이해가 잘 됐다. 토요일 저녁 8시 특강 때 궁금했던 점 알려주시고 새로운 내용도 알게 되어 정말 좋았다. 네이밍 할 때 늘 고민되던 것들을 다른 사람들은 어떻게 사용하는지 어디서 찾아볼 수 있는지 팁도 알게되어 알찬 시간이였다.막 사용하던 피그마는 그만이미 피그마를 '막'사용하고 있어서 강의 내용이 쉬울거라 생각했었는데, 정말로 막 사용하고 있었다. ㅠ-ㅠ기초부터 차근차근 배워가고 있다. 프로젝트 진행 시 시스템 가이드를 만들어 '이거 수정 해주세요' 했을 때 파일들 다 열어서 수정하지 않고, 한번에 '수정-적용-배포' 할 수 있는 모습을 그리며, 남은 3주도 잘 따라가보자.

UX/UI･워밍업클럽･디자인시스템･피그마･Figma

0

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

사수가 없는 스타트업에서 1인 디자이너로 근무하고 있어 ‘스스로 배우고 성장해야 한다’는 생각을 늘 가지고 있다. 작년 하반기에는 회사에 적응하랴 이 외 공부계획에도 많은 욕심을 부린 탓에 결과가아쉬웠다. 그래서 연말 피드백/올해 계획을 세우면서 든 목표설정은 일정기간동안 한 두가지에 집중하기로 했다. 올 해 초에 디자인 시스템 볼드님 강의를 들었지만 강의 끝까지 완주하면서 아직 100% 습득이 안 된 느낌이 들었다. 그 와중에 인프런 워밍업 스터디 클럽 1기를 모집한다는 글을 봤고, 강제성이 필요한 나는 바로 신청했다. Day1. OT5월이 시작되기 이전 첫 프로그램은 OT였다. 볼드 강사님 그리고 같은 1기 스터디 분들과 함께 색다르게 피그잼에서 OT가 진행됐는데 재미있었고, 한시간이 순삭으로 지나갔다. 좋다고 생각했던 부분은 이 스터디가 끝난 다음 자신에게 어떤 보상을 줄건지 써내려가는 시간이 있었다. 다른 분들이 쓴 글도 재미있게 봤고 오티가 끝나고 나서도 끝나면 어떤 걸 보상으로 줄 지 계속 머릿속에 맴돌아서 설렌 출발을 할 수 있었다. 학습 내용 요약.본격적으로 컴포넌트를 만들기 이전, 재료들을 준비하는 베리어블을 만들었다.Day2. 피그마 베리어블과 토큰, 디자인 시스템 이해Day3. 색상 스타일과 베리어블 등록Day4. 간격, 타이포그래피, 아이콘 등록Day5. 그림자, 반응형 기준점, 기타 베리어블 등록Day6. 만든 베리어블로 디자인 가이드 만들기(가이드 제작을 진행하면서 반응형 기준점에 대한 가이드를 빼먹었는데 얼른 수정해야 한다..🫢 ) Day7. Q&A 온라인 세션강의를 들으면서 union selection과 flatten selection의 차이를 느끼지 못했는데 이번 온라인 세션에서 볼드님이 간지러웠던 부분을 확실하게 정리해주셔서 좋았다! 또 이외에 네이밍 짓는 법, 피그마 업데이트로 좀 더 편하게 작업하는 방법 등 유용한 정보들을 많이 얻어가는 시간이였다. (+ 온라인 세션 들으면서 웃겼던 순간! 네이밍에 대해 스터디분들 다 함께 투표하는 시간이 있었는데 모두 default에 투표하니 다른 수강생분이 enabled에 저 밈을 두고 가셔서 너무 웃겼다. ) 1주차 회고 잘 한 점:디자인 시스템 이외에도 생성형 AI 강의도 계획대로 모두 완수한 점! 🫡디자인 가이드를 처음 만들어봤는데 생각보다 시간이 오래 걸렸다. 하지만 완성했다는 것에 칭찬해주고 싶다! 아쉬운 점:디자인 가이드를 더 한 눈에 들어오게 보완해야 할 듯하다. 또 직장과 병행하다 보니 시간이 부족해 강의를 몰아 들었다. 보완할 점: 출근하기 전 오전 시간을 좀 더 활용할 수 있도록 시간 계획을 다시 세워야겠다.피드백에 대한 중요성을 많이 느끼는데, 다음 발자국 작성 시간을 뜻깊게 써야겠다.

UX/UI･피그마･디자인시스템･워밍업클럽･Figma･디자인

0

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

1주차 4/29 - 5/3Section 1 생애 최초 API 만들기목표스프링 프로젝트를 설정해 시작하고 실행할 수 있다.서버란 무엇인지, 네트워크와 HTTP, API는 무엇인지, JSON은 무엇인지 등 서버 개발에 필요한 다양한 개념을 이해한다.스프링 부트를 이용해 간단한 GET API, POST API를 만들 수 있다.@SpringBootApplication과 서버@SpringBootApplication = 어노테이션어노테이션 : Java의 문법으로 @ 뒤에 문자열을 붙이는 것 → 마법같은 일을 해주는 기호서버란?어떠한 기능을 제공하는 프로그램 /그 프로그램을 실행시키고 있는 컴퓨터네트워크란 무엇인가?포트 (port): 그 컴퓨터 안에 동작하는 여러 프로그램 중에 특정한 하나의 프로그램을 가리키는 것 (컴퓨터에서 돌고 있는 여러 프로그램 중 하나만 특정)IP 주소 : 컴퓨터마다 갖는 고유한 주소도메인 이름 : 244.66.51.9라는 외우기 어려운 숫자 대신, 사람이 외우기 쉬운 이름을 사용하는 것 ex) 도메인 이름 : spring.com, port : 3000→ Domain Name System (DNS)HTTP와 API란 무엇인가?HTTP (HyperText Transfer Protocol) : 데이터를 주고 받는 표준 → 컴퓨터 간의 통신HTTP Method : GET, POST, PUT, DELETEHTTP 요청 : HTTP Method (GET, POST)와 Path (/portion)가 핵심 / 쿼리와 바디로 데이터를 전달HTTP 응답 : 상태 코드가 핵심API (Application Programming Interface) :정해진 약속을 하여, 특정 기능을 수행하는 것GET API 개발하고 테스트하기@RestController public class CalculatorController { @GetMapping("/add") // GET /add public int addTwoNumbers( @RequestParam int number1, @RequestParam int number2 ) { return number1 + number2; } }POST API 개발하고 테스트하기@PostMapping("/multiply") // POST /multiply public int multipltTwoNumbers(@RequestBody CalculatorMultiplyRequest request) { return request.getNumber1() * request.getNumber2(); }유저 생성 API 개발유저 생성 API 스펙HTTP Method : POSTHTTP Path : /userHTTP Body (JSON){ "name": String (null 불가능), "age": Integer } 결과 반환 X (HTTP 상태 200 OK이면 충분)private final List<User> users = new ArrayList<>(); @PostMapping("/user") // POST /user public void saveUser(@RequestBody UserCreateRequest request) { users.add(new User(request.getName(), request.getAge())); }유저 조회 API 개발과 테스트유저 조회 API 스펙HTTP Method : GETHTTP Path : /user쿼리 : 없음결과 반환[{' "id": Long, "name": String (null 불가능), "age": Integer }, ...] @GetMapping("/user") public List<UserResponse> getUsers() { List<UserResponse> responses = new ArrayList<>(); for (int i = 0; i < users.size(); i++) { responses.add(new UserResponse(i + 1, users.get(i))); } return responses; }Section 2 생애 최초 Database 조작하기목표 1. 디스크와 메모리의 차이를 이해하고, Database의 필요성을 이해한다. 2. MySQL Database를 SQL과 함께 조작할 수 있다. 3. 스프링 서버를 이용해 Database에 접근하고 데이터를 저장, 조회, 업데이트, 삭제할 수 있다.4.API의 예외 상황을 알아보고 예외를 처리할 수 있다.Database와 MySQL컴퓨터의 핵심 부품 : CPU (연산 담당), RAM (메모리, 단기기억), DISK (장기기록)서버를 실행시켜 API를 동작시키기까지 일어나는 일서버 실행 → DISK의 코드 정보 RAM으로 복사 → API 실행 → 연산 수행 (CPU-RAM)Database :데이터를 구조화시켜 저장하는 장치RDB (Relational Database) : MySQL데이터를 표처럼 구조화시켜 저장하는 장치SQL (Structured Query Language) :표처럼 구조화된 데이터를 조회하는 언어MySQL에 접근하는 방법 터미널에서 mysql -u root -p + 비밀번호비밀번호 없으면 mysql -u rootMySQL에서 테이블 만들기DDL (Data Definition Language) : 데이터를 정의하기 위한 SQLMySQL 명령어데이터베이스 생성, 조회, 삭제create database [데이터베이스 이름]; show databases; drop database [데이터베이스 이름]; 테이블 생성, 조회, 삭제use [데이터베이스 이름]; show tables; create table [테이블 이름] ( [필드1 이름] [타입] [부가조건], [필드2 이름] [타입] [부가조건], ... primary key ([필드 이름]) ); drop table [테이블 이름]; 예시create table fruit ( id bigint auto_increment, name varchar(20), price int, stocked_date date, primary key (id) );SQL의 데이터 타입정수 타입tinyint : 1바이트 정수int : 4바이트 정수bigint : 8바이트 정수실수 타입double : 8바이트 실수decimal(A, B) : 소수점을 B개 가지고 있는 전체 A 자릿수 실수문자열 타입char(A) : A글자가 들어갈 수 있는 문자열varchar(A) : 최대 A글자가 들어갈 수 있는 문자열날짜, 시간 타입data : 날짜, yyyy-MM-dd 형식으로 들어간다.time : 시간, HH:mm:ss 형식으로 들어간다.datetime : 날짜와 시간을 합친 형식, yyyy-MM-dd HH:mm:ss 형식으로 들어간다.테이블의 데이터 조작하기DML (Data Manipulation Language) : 데이터를 조작하기 위한 SQLCRUD데이터를 넣는다 (생성 - Create) 조회한다 (읽기 - Retrieve or Read)수정한다 (업데이트 - Update)삭제한다 (제거 - Delete)Createinsert into [테이블 이름] (필드1이름, 필드2이름, ...) values (값1, 값2, ...) insert into fruit (name, price, stocked_date) values ('사과', 1000, '2023-01-01');Read select * from [테이블 이름]; select name, price from fruit; # 조건을 통해 필터 적용 select * from [테이블 이름] where [조건]; select * from fruit where name = '사과'; # and, or select * from fruit where name = '사과' and price <= 2000; # beween 예시 (가격이 1000~2000원인 과일) select * from where price between 1000 and 2000; # in 예시 (이름이 사과이거나 수박인 과일) select * from fruit where name in ('사과', '수박'); # not in 예시 (이름이 사과가 아닌 과일) select * from fruit where name not in ('사과');Updateupdate [테이블 이름] set 필드1이름=값1, 필드2이름=값2, ... where [조건]; # 모든 사과의 가격을 2000 -> 1000원으로 변경 update fruit set price=1500 where name = '사과';Deletedelete from [테이블 이름] where [조건]; delete from fruit where name = '사과';<<추가 예정>>과제과제 2과제 31주차 회고스터디가 갖는 가장 큰 장점! 공통의 목표를 갖고 모인 다른 스터디원들과 함께 공부하니까 동기부여가 된다. 혼자였으면 이런 꾸준함이 덜하지 않았을까? 그리고 멘토님도 계셔서 유익했던 라이브세션과 강의를 듣는 동안의 든든함이 스터디에 참여하기 잘했다라는 생각이 들게 한다.그리고 강의 너무 좋다..! 백엔드 개발을 지망하면서 다른 언어를 먼저 접하고, 자바와 스프링을 가장 늦게 배우고 있는 상황이었다. 백엔드 개발의 전반부터 다루고 시작하니 조각조각 알던 지식들이 한 줄기로 모여서 흐름을 잡기에 너무 좋았다. 다만 첫주에 직무 교육과 개인 일정이 겹쳐 제공된 진도를 다 수행하지 못하였는데, 2주차에 시간을 더 내어 보완하도록 할 것이다. SQL은 최근 정처기 실기에서 주요 문법 위주로 빠르게 훑었었는데 직접 실습하니까 복습도 되고 더 기억에도 남는 것 같다. 그리고 자바 공부가 더 필요하다는 것을 느껴 약간 미뤄두었던 '이것이 자바다' 완독을 곧 다시 시작할 것 같다.. 2주차엔 더더 화이팅! 😀

백엔드･인프런워밍업클럽･백엔드

0

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

(Day2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/nayoungpk/Inflear_Front.git <과제>(Day3) (가위 바위 보 앱)깃허브 저장장소 주소 - https://github.com/nayoungpk/Inflear_Front.git (Day4) (퀴즈 앱)깃허브 저장장소 주소 - https://github.com/nayoungpk/Inflear_Front.git <공부내용> 자바스크립트 기본 기초 console 객체디버깅 콘솔에 접근 할 수 있는 메서스를 제공하며, 전 영역의 객체에서 접근 할 수 있다. var, let, const다음으로는 자바스크립트에서 변수를 선언 할 때, var let const를 사용한다.변수의 선언 방식에서는var >> 중복 선언과 재할당이 가능let >> 중복 선언은 불가능하며, 재할당은 가능const >> 중족 선언과 재할당 둘가 가능 호이스팅호이스팅의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명한다.자바스크립트에서 호스팅은 코드가 실행되기 전에 변수 및 함수 선언이 로컬 범위의 맨 위로 들어올려지는 경우를 설명한다.>> 쉽게 말해 변수에 값을 할당하고 사용해야함.>>변수 생성할 때 재할당이 필요없다면 const를 사용하고 재할당이 필요하면 let을 사용해서 scope를 최대한 좁게 사용!!! 타입원시 타입과 참조 타입을 가지고 있음. (참조 타입의 경우에는 heep이라는 별도의 메모리 공간 사용)타입은 크게 primitive 과 object 로 구분 가능 연산의 경우는 다른 언어들과 동일!!! // 덧셈 함수 function add(a, b) { return a + b; } // 뺄셈 함수 function subtract(a, b) { return a - b; } // 곱셈 함수 function multiply(a, b) { return a * b; } // 나눗셈 함수 function divide(a, b) { // 0으로 나누는 경우를 처리 if (b === 0) { return "나눗셈 오류: 0으로 나눌 수 없습니다."; } return a / b; } // 주어진 배열의 합계를 계산하는 함수 function sum(numbers) { let total = 0; for (let number of numbers) { total += number; } return total; } // 사용 예시 console.log(add(5, 3)); // 출력: 8 console.log(subtract(10, 4)); // 출력: 6 console.log(multiply(2, 6)); // 출력: 12 console.log(divide(8, 2)); // 출력: 4 console.log(divide(5, 0)); // 출력: "나눗셈 오류: 0으로 나눌 수 없습니다." const numbers = [1, 2, 3, 4, 5]; console.log(sum(numbers)); // 출력: 15 백틱자바 스크립트에서 ` 문자를 사용하여 문자열을 표한한 것을 템플릿 리터럴이라 표현함.이렇게 사용하면 줄 바꿈을 쉽게 할 수 있고, 문자열 내부에 표현식을 포함할 수 있게됨. <공부 후기>자바스크립트의 경우에는 개념은 모두 읽어보았으나 직접 코딩하는 부분을 더 진행해볼 생각이다.자바스트립트 언어에 부족함을 많이 느꼈음.과제 보안점으로는 DAY에서 분류를 나누는 기준을 누르면 사진의 크기가 달라진다. css 부분 수정 및 공부 예정리엑트에 대한 기초 지식이 많이 부족하다고 느낌

프론트･자바스크립트

0

인프런 [인프런 워밍업 스터디 클럽] 1기 - 첫 번째 발자국

Day1 ~ Day3JDK, JRE, JVM?JDK > JRE > JVMJVM(Java Virtual Machine)은 OS별로 존재해, 컴파일된 바이너리코드를 JVM이 한 줄 씩 읽는 형태따라서 자바는 컴파일 언어이면서 인터프리터 언어이다.HTTP메소드와 APIHTTP는 컴퓨터 통신의 표준API는 HTTP통신을 위한 규격 Day4 ~ Day5DB에 저장하는 이유장기기록을 위해DB의 종류는 여러가지가 있지만 우리는 관계형데이터 베이스인 MySql을 사용한다.데이터의 정리 방법이 엑셀과 비슷하다.CRUDDB의 데이터를 Create / Read / Update / Delete 줄여서 CRUDCreate -> POST APIRead -> GET APIUpdate -> PUT APIDelete -> DELETE API스프링 부트는 날 쿼리를 작성 후 JdbcTemplate으로 쿼리를 실행했다.JdbcTemplate의 생성과 동작은 미스테리.. 다음 주 차 강의에서 알게 된다고 한다..Day6클린코딩 기법 코드를 작성하는 시간 보다 남의 코드를 읽는 시간(유지보수)이 더 많다.읽기 쉬운 코드를 작성하자.어떻게?Layered Architecture기존까지 컨트롤러에서 한방에 기능을 처리하던 방법을 Controller / Service / Repository 세 클래스로 역할을 분리하여 관리Controller: API의 진입지점, 결과 반환Service: 비즈니스 로직 및 예외처리 (isUserNotExist)Repository: DB 데이터 CRUD를 담당 회고록첫 번째 과제를 제출하지 않았다..알아서 작성 또는 정리하고 마는건 줄 알았다.어노테이션에 대해 검색해보니, 컴파일러에게 정보를 제공해주고, 실행 시 특정 기능을 실행하도록 정보를 제공한다던데,사실 더 깊게 검색해보진 않았다 (제출하는 과제가 아닌 줄 알고) 차근차근 알아가야겠다.. 2~4 번째 과제는 진행했는데, 그 중에 3번째 과제는 대신 좀 열심히 찾아봤다.람다식의 등장과 함수형 프로그래밍에 대해 좀 자세히 찾아 봤는데, 함수형 프로그래밍의 동작 방식에 좀 더 집중했던 것 같다.함수형 프로그래밍은 실무에서도 제법 많이 쓰고 있어서 직접적으로 써먹을 수 있는 지식이 된 것 같아 좋았다.

0

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

학습 내용1. 강의1일차: 서버 개발에 앞서 서버, 네트워크, HTTP, API, JSON 등에 대한 기본적인 개념을 학습했다.2일차: HTTP Method(GET, POST, PUT, DELETE)에 대해 학습하고, 이를 활용해 기본적인 API를 개발했다.3일차: 기존에 개발했던 API에서의 데이터는 메모리에서만 유지된다는 한계가 있었다. 이를 극복하기 위해 서버에 데이터베이스를 도입하기 앞서, MySQL을 활용해 테이블을 만들고, 데이터를 조작하는 기초적인 DDL, DML을 학습했다.4일차: Spring 서버에서 MySQL에 접근할 수 있도록 설정하고, 이를 이용해 데이터베이스 상의 데이터를 조회, 추가, 수정, 삭제하는 API를 개발했다.5일차: 기존에는 컨트롤러 클래스에 모든 코드를 작성했는데, Service, Repository 클래스를 추가로 만들어 3개의 계층으로 분리했다.Controller: API의 진입 지점으로써 HTTP Body를 객체로 변환하는 역할Service: 비즈니스 로직을 담당하는 역할(강의에서는 유저가 존재하는지 확인하고, 없으면 예외처리를 해줬다.)Repository: DB와의 통신을 담당하는 역할 API를 개발하고 리팩토링하는 과정을 거쳤다.그 과정을 거치면서 당장 기능 구현만을 바라보고 코드를 작성할 게 아니라 내 코드를 읽을 동료들, 미래의 나를 고려하면서 개발해야겠다고 많이 느꼈다. 2. 과제자바 어노테이션의 개념과 이점, 그리고 커스텀 어노테이션을 생성하는 방법에 대해 알아봤다.강의에서 배운 내용을 바탕으로 API를 개발하는 실습을 진행했다.두 수를 쿼리를 통해 파라미터로 받아 두 수의 합, 차, 곱을 JSON 형태로 반환하는 API(GET 메서드)쿼리를 통해 날짜를 파라미터로 받아 그 날짜의 요일을 반환하는 API(GET 메서드)여러 개의 수를 담은 배열을 HTTP BODY로 입력받아 그 수들의 합을 반환하는 API(POST 메서드)익명 클래스, 함수형 프로그래밍과 람다식의 개념에 대해 알아봤다. 그동안 자바를 사용해서 개발을 하더라도 람다식을 적극적으로 활용해오지 않았고, 읽을 때도 그 문법이 낯설게 느껴졌다. 이번 기회를 통해 람다식에 대해 알아봤으니, 앞으로는 람다식을 사용해 코드를 간결하게 작성해보면 좋을 것 같다.

0

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

1주가 정말 빠르게 지나간 것 같다.지금까지 공부했던 내용들을 정리하기가 너무나 좋았다.1주차DAY 2 - 서버 개발을 위한 환경 설정 및 네트워크 기초DYA 3 - 첫 HTTP API 개발DAY 4 - 기본적인 데이터베이스 사용법DAY 5 - 데이터베이스를 사용해 만드는 APIDAY 6 - 클린코드의 개념과 첫 리팩토링DAY 2 서버 개발을 위한 환경 설정 및 네트워크 기초어노테이션어노테이션에 대해 대강적으로 알고 있었는데 이를 조금 더 구체적으로 공부해서 이전보다 더 알게되는 계기가 되었다.1일차 과제DAY 3 첫 HTTP API 개발HTTP와 APIHTTP (Hypertext Transfer Protocol)HTTP는 인터넷에서 데이터를 전송하기 위한 표준 프로토콜입니다. 주로 웹 브라우저와 웹 서버 간의 통신에 사용됩니다. HTTP는 클라이언트가 서버에 요청을 보내고, 서버가 클라이언트에 응답하는 방식으로 동작합니다. 주요 특징은 다음과 같습니다Stateless (무상태성): 각각의 요청은 서로 독립적이며, 이전 요청과의 상태를 유지하지 않습니다.Request-Response (요청-응답): 클라이언트가 서버에 요청을 보내고, 서버가 그에 대한 응답을 돌려줍니다.Methods (메소드): 주요 메소드에는 GET(데이터를 요청), POST(데이터를 제출), PUT(데이터를 업데이트), DELETE(데이터를 삭제) 등이 있습니다.상태 코드 (Status Codes): 서버가 클라이언트에게 보내는 세 자리 숫자로, 요청의 성공, 실패, 리다이렉션 등을 나타냅니다 (예: 200 OK, 404 Not Found).API (Application Programming Interface)API는 응용 프로그램 간에 데이터를 교환하기 위한 인터페이스입니다. 주로 소프트웨어 구성 요소 간에 상호 작용하기 위해 사용됩니다. 웹 API는 이러한 인터페이스를 웹 기술에서 활용한 것입니다. 주요 특징은 다음과 같습니다정의와 문서화: API는 사용 가능한 엔드포인트와 그들이 수행하는 작업을 정의하고 문서화합니다.요청과 응답: 클라이언트가 API에 요청을 보내고, 서버가 해당 요청에 대한 응답을 제공합니다.RESTful API: Representational State Transfer의 약자로, HTTP를 통해 자원을 조작하는 데 사용되는 아키텍처 스타일입니다. 각 자원은 고유한 URI(Uniform Resource Identifier)를 가지며, HTTP 메소드(GET, POST, PUT, DELETE)를 통해 조작됩니다.인증 및 권한: API는 종종 인증과 권한 부여를 통해 접근을 제어합니다.API 개발강의 영상을 보면서 API를 만드는 법을 복습하였고 설계를 구체적이면서 어떻게 하면 효율적으로 구현하는 지에 대해서도 배웠다.또한 수정할 때 왜 PUT을 선호하는지에 대해서도 배웠습니다.https://www.inflearn.com/questions/1175426/수정이라는-작업을-할-때-put을-더-사용하는-이유가-있을까요과제 내용두 수를 입력하면, 계산하는 API날짜를 입력하면 요일을 출력하는 API여러 수를 받아 총 합을 반환하는 POST API2일차 과제 DAY 4 - 기본적인 데이터베이스 사용법 & DAY 5 - 데이터베이스를 사용해 만드는 API MySQL이전에는 JPA를 통해서 구현하는 하는 법은 대충 알았지만 MySQL로 하는 법은 알지 못했습니다. 비유를 하자면 리액트는 할 줄 아는 데 자바스크립트는 잘 하지 못하는? 느낌이었는데 이번 기회에 JPA를 사용하지 않고 MySQL로 하는 법을 알게되어 JPA의 원리를 조금 더 아는 기회가 되었습니다.예외 처리예외 처리를 하지 않았을 때 어떤 문제가 발생하였고 그 문제를 어떤식으로 해결하는 지에 대해서 알 수 있었습니다. DAY 6 - 클린코드의 개념과 첫 리팩토링 Controller / Service / Repository 3단 으로 왜 분리하고 분리했을 때와 하지 않았을 때와의 차이점을 느끼면서 좋은 설계왜 그 이유를 알 수 있었습니다.

백엔드

0

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

강의 수강 프론트엔드 부트캠프를 수강했었지만 그곳에서 내가 맡은 역할은 모두 백엔드였기 때문에 이번 인프런 스터디에서는 프론트엔드에 대해 많은 것을 배워가고 싶었다 ! 사실 자바스크립트와 리액트 모두 많이 까먹은 상태여서 이론 강의에 많이 치중해 있었다. 내가 부족한 부분들은 다시 듣고 하느라 진도도 많이 느린 상태여서 일단 진도표에 맞춰 얼른 진도를 맞춰야겠다는 생각이 많이 든다 ! 자바스크립트 기초, DOM , Event, 자바스크립트 중급, 비동기, Iterator, Generator 부분을 공부하면서 부족한 부분은 내가 몇 개월 전에 공부하면서 봤던 모던 자바스크립트 Deep Dive 책을 참고하였다. 다음주부터는 하루하루의 기록을 제대로 해놓아서 발자국을 제대로 쓸 수 있도록 노력해야겠다. 미션 이론강의에 시간을 많이 쏟다보니 미션을 제대로 수행하지 못하였다. 하다가 막히고 추가기능도 제대로 구현을 하지 못해서 미션 수행률이 더 저조해진 것 같다. 빨리 자바스크립트의 미션 3개를 완료하고 진도를 따라가야 할 것 같다. 미션에 대한 발자국도 진도율에 맞춰 올리는 것이 목표이다. 리액트를 들어가기 전에 자바스크립트를 제대로 파악하고 과제도 끝마친 상태로 들어가야 리액트 과제를 하는데도 지장이 없을 것 같다 ! 회고다음주에는 스터디 발표도 진행하게 되는데, 발표자료도 열심히 준비해서 나와 팀원들에게 도움이 되었으면 좋겠고, 내가 부족한만큼 다른 분들에게서도 많은 것을 보고 배우고 싶다 ! 그리고 강의도 미션도 빨리 진도율을 맞춰서 진행하도록 해야겠다 ! 다음 발자국은 더 나은 발자국이 되길 !

프론트엔드･프론트엔드･워밍업클럽･FE･1기･발자국

0

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

<자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]> 생애처음 스프링부트로 API 짜기 도전하면서 자율스터디를 해본 나란 사람, 선택과 집중이 필요한시점이기에 더욱 의미있는 스터디!현재 회사에 프로젝트가 너무 고되기도 하고 강의를 들을 때 한번에 집중 할수 있는 시간이 부족하여 주차별로 드문드문 들은거 같아서 아쉬운 마음이 크지만 내가 성장할 수 있는 시간이 점차 느껴지는 것 같아서 1주차 발자국을 남깁니다. 개발자들 특유의 API 짰어요 라는 말을 나도 이제 드디어 할 수 있다니!덧셈 API 짜는것부터 너무 이해하기 쉽고 차근차근 알려주셔서 얼마나 도움이 됐는지 모른다. 내가 강의를 통해 얻고 배운 인사이트 요약드디어 본격적인 덧셈 API 짜기@Restcontroller 진입점@Getmapping api 지정Get 메소드 사용, path는 /add 로 지정서버를 동작시키고 클라이언트가 get으로 보내면 public int함수가 호출된다@RequsetParam 주어지는 쿼리를 함수 파라미터에 넣음같은이름의 쿼리값이 arg로 들어오게 됨1) HTTP 호출 - RequestParam 방식port가 8080이므로 포스트맨에 8080으로 테스트package com.group.libraryapp.controller.calculator; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController public class CalculatorController { @GetMapping("/add") //Get/add public int addTwoNumbers( @RequestParam int number1, @RequestParam int number2 ){ return number1 + number2; }해당 계산API 짠 자바를 저장하고 톰캣 port 8080을 적용한 URL를 요청보낸다정상 호출 확인 200 서버값1) HTTP 호출 - 객체를 받는 방식DTO를 작성해준다. 컨트롤러랑 동일한 디렉토리로 dto 아래 calculator > request를 만들어준다.package com.group.libraryapp.dto.calculator.request; public class CalculatorAddRequest { private final int number1; private final int number2; public CalculatorAddRequest(int number1, int number2) { this.number1 = number1; this.number2 = number2; } public int getNumber1() { return number1; } public int getNumber2() { return number2; } } requestparam을 사용할때의 controller*객체를 사용할때의 controller서버 재시작다시 http에 요청을 보내면 정상 200k를 확인할 수 있다.특히 강의 중간중간 좋습니다는 열심히 하게 되는 원동력이 되었으며 2) POST API 개발GET API에서 POST로 받기에 필요한 선지식이 JSON이다. body로 데이터를 받는 과정이 필요하다JSON이란객체표기법, 즉 무언가를 표현하기 위한 형식이다!{ "name":"푸바오", "age":3 }JSON 표기는 중괄호가 양끝에 있음속성은 각각 쉼표로 구분JAVA 비유 MAP<Object,Object>JSON value에는 다른 JSON이 올수 있다.소감 및 각오자바의 기본지식이 부족해서 스프링부트개념을 내가 이해할 수 있을까? 고민하면서도 강의를 들으면서 그런 고민이 아예사라지게되었다. 위에도 적었듯이 JSON 뜻이나 곱셈API 를 만드는 방법 하나하나를 알려주시고 직접 실습하게 하여 내것으로 만들수 있는 기회까지 얻을 수 있게 되어 이번기회로 자바도 공부하면서 스프링부트API를 짜고 서버에 배포해보는 귀한 경험을 가지고 가려고한다, 반복적인 것이 제일 중요한것을 잊지말고 꾸준히 내것으로 만들자!

백엔드･발자국

0

[1번과제] 인프런 워밍업 클럽 스터디 FE 1기 과제제출

<과제명 : 음식메뉴 앱 만들기>언어 : JavaScript, HTML, CSSIDE : Visual Studio CodeConcept : BurgerKing Menu Appgithub : https://github.com/hyojin-park24/inflearn-warmingUp-club-fe/tree/main/inflearn-js-1<느낀점>1) JavaScript 문법과 CSS 문법을 모르면 막막한 망망대해로 빠져 버린다. . .2) 이번 과제 하나로 많은 문법과 JS 응용을 해볼 수 있었다 가령, 아래 코드와 같은 것들이랄까// == 와 ===의 차이 console.log(true ==1); // true console.log(true == '1'); // true console.log(true === '1') // false // 여러가지 class 선언시 css selector (class selector, id selector)가 space 마다 차이가 있my음 // 단일 class <nav> class = "navigation";</nav> const navigation = document.querySelector('.navigation'); // 다중 클래스 <nav> class = "navigation my-navi1 my-navi2";</nav> const navigation = document.querySelector('.navigation.my-navi1'); //같은 요소로 인식 const navigation = document.querySelector('.navigation .my-navi1'); //하위 요소로 인식 const navigation = document.querySelector('.navigation>.my-navi1'); //자식 요소로 인식3) 기본 문법도 익힐 수 있었다map함수: map()함수로 호출한 배열 값을 반환해줌 (변환 가능)for/forEach와 차이점 : 값 반환 및 변환 기능Node복사 : clonNodeElement.children : 요소 노드만 (할당가능)const [imgElement, textContainer] = content.children; //content자식에 imgElement와 textContainer가 있음을 기대. const [titleElement, priceElement, descptionElement] = textContainer.children; //txtContainer에 titleElement와 priceElement와 descriptionElement가 있음을 기대.const [imgElement, textContainer] = content.children; const [titleElement, priceElement, descptionElement] = textContainer.children; 요소의 HTML 태크 값을 읽어오는 innerHTML/ 요소의 Text값만 읽어오는 innerText화살표 함수Element.addEventListener(: e.target.id) 4) JS 스승인 뀨님 다시한번 감사합니다, , , 핫투.실행 화면

프론트엔드･JavaScript･HTML･CSS･인프런워밍업클럽스터디

0

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

인프런 워밍업 클럽 1주차 발자국시간 분배를 잘못해서 강의를 거의 듣지 못하고 미션도 해결하지 못했다...2주차부터 열심히 따라가야 한다.강의 요약console 객체새로 알게 된 메서드: table(), warn(), time(), timeEnd(), clear()var, let, constvar: 중복 선언, 재할당 가능let: 중복 선언 불가능, 재할당 가능const: 중복 선언, 재할당 불가능변수의 참조 범위var: 함수 레벨 스코프let, const: 블록 레벨 스코프호이스팅코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우JS 타입원시 타입: String, Number, Boolean, Symbol, null, undefined,참조 타입: Object, Array...JS 타입 변환String(), Number() constructor 사용toString() 등의 메서드 사용자동 타입 변환string + number = stringJS 연산 및 Math Object+, -, *, /, %Math.PI, Math.E, Math.round(), Math.ceil(), Math.min(), Math.max(), Math.randon(), ...Template Literalsbacktick을 사용Loopsforfor/inwhiledo/whileWindows 객체브라우저에 의해 자동으로 생성되며 웹 브라우저 창을 나타냄브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어할 수 있음var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 됨DOM?메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌웹 페이지를 이루는 요소들을 JS가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미함DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있음CRP 과정DOM Tree 생성 > Render Tree 생성 > Layout(reflow) > Paint스스로 칭찬하고 싶은 점1주차 강의를 거의 듣지 못했지만 연휴를 활용하여 강의를 듣고 공부를 했다.아쉬웠던 점1주차 강의를 거의 듣지 못했다. 열심히 따라가야한다.보완하고 싶은 점평일에 시간이 부족하여 진도를 따라가지 못하므로 주말을 활용해서 따라가도록 해야겠다. 우선은 내일까지 연휴이니 연휴를 활용해서 진도를 따라잡아야겠다...다음주 목표최소 진도 따라잡기! 중간 점검까지 미션 3개 이상 완료하기!

프론트엔드･인프런워밍업클럽･JS

0

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

자바스크립트 강의를 들으며...알고 있는 내용도 있고 새로 배우는 내용도 있는 정신없는 일주일이였다.그동안 사용했던 자바스크립트에 이렇게나 많은 기능들이 있었다니.... 일주일간 강의를 배우며console 객체console 객체에서 항상 사용하던 console.log가 아닌 다른 기능들도 사용해보았다.특히 table을 사용하며 객체를 보기가 편해져서 자주 사용하게 될것같다.DOM(Document Object Model)DOM을 몇번 써보기는 하였지만 더욱더 많은 종류의 DOM이 있다는걸 알게 되었다. 강의를 들으며 느낀점중요한 개념들이 더욱 많았지만 시간에 쫓겨 듣다보니 많은 정리가 이루어지지 못했다.퇴근 후 들으려고 하니 시간이 모자라서 중요한 개념들에 치중하여 듣고 직접 코드로 볼 수 있는 부분은 간략하게 작성하여 과제를 할 때 잘 사용해야겠다. 과제https://www.inflearn.com/users/1107/blogs과제는 처음 과제인 음식 메뉴 앱을 해보았는데 확실히 HTML을 DOM으로 조작 하니 많은 양의 HTML을 쓰지 않아도 작성할 수 있어 코드 관리에 있어 편리하였다.DOM이 익숙하지 않다보니 보며 작성하느라 많은 과제를 하지 못하였다.

프론트엔드

0

인프런 워밍업 클럽 1기 FE 1번 과제 (음식 메뉴 앱)

1번 과제 (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/raon9401/inf_foodApp

프론트엔드

0

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

시작Day2 음식 메뉴를 React가 아닌 Vanila JavaScript로 도전해봤습니다. 처음 도전하는 Vanila JavaScript인 만큼 많은 자료와 시간을 들여 완성해봤는데요!The Venti의 메뉴를 json파일로 묶고 json파일을 불러와 메뉴를 보여주는 방식으로 접근했습니다. 개요파일구조index.html과 venti.json을 제외한 나머지 component들은 src폴더에 묶어서 정리했습니다.component 폴더에는 MenuButton.js와 메뉴판인 VentiMenu.js이고core폴더에는 각 컴포넌트를 불러오고 event를 실행시킬수 있는데 주체인 Component.js를 정의했습니다.이외에 index.html에 직접적으로 보여줄 app.js, main.js를 정의했습니다. Index.htmlapp.jsthis.state 를 Object인 json파일의 값을 받아야 하기에 위와 같이 초기화해주었고비동기처리로 loadJSON함수를 실행하여 state에 할당했습니다!app.js는 최상단 부모 컴포넌트이기에 자식 컴포넌트인 MenuButton.js와 VentiMenu.js를 렌더링하게 설정!Menu에는 test2인 값에 따라 값이 렌더링 될 수 있게 하였으며MenuButton은 state값이 filter될 수 있도록 설정! 이외에 나머지 파일과 다른 세부 코드들은 깃허브에 올렸습니다!!https://github.com/wink4u/inflearn_warmingup_FE_1/tree/main/project_1결과물아쉬운점초깃값 this.state의 값을 JSON에서 할당을 받고 렌더링을 해야하는데, 먼저 렌더링이 되어 빈 배열값이 출력이 되는점을 해결을 못하였다. 이것을 해결할 것 이다. CSS를 더욱 신경을 못 쓴게 아쉬웠다..

프론트엔드･인프런･워밍업클럽･FE･1기

0

[인프런 워밍업 스터디 클럽 1기_FE] 1주차 회고록 정리

0기에 백엔드 스터디에 이어 1기 프론트엔드 스터디를 신청하고, 참여하였다.신청 이유신청하게된 가장 큰 이유는 자바스크립트 랑 JQuery 를 조금씩 사용했었는데, 사실 자바스크립트 를 제대로 공부했던 적이 없고, 이직하는 곳에서는 백엔드와 프론트엔드가 명확하게 나뉘게 되어 이직하기전 프론트엔드 지식을 조금이라도 학습하면 협업을 할때 도움이 많이 될것 같아 신청하게 되었다.자바스크립트 미션아직 1단계 완료 후 2단계를 진행하고 있다. 생각외로 많이 어려워서 진행 속도가 많이 느리다. 리액트 부분으로 넘어가면 훨씬 어려워진다고 했는데 0기때 왜 프로트엔드에서 우수 러너가 적게 나왔는지 새삼 느끼고 있다. 1주차 느낀점하필 이직 시기와 겹치는 바람에(심지어 지역이동..) 거주지를 알아보고, 이직회사에서 사용하는 기술을 다시 한번 살펴보는 등 스터디외에도 할게 너무 많아 정신없이 보내고있다. 우선순위를 잘 정해서 2주차를 진행해야할것 같다.정리현재 서포터로도 참여하고 있을 정도로 애정이 정말 많이 가는 스터디다. 이런저런일로 많이 바쁘고 정신이 없지만 조금이라도 함께하는 러너분들에게 도움이 되기 위해 노력해야겠다.

프론트엔드･워밍업클럽･스터디･프론트엔드･1기･회고･발자국

0

[인프런 워밍업 스터디 클럽 1기] 첫번째 발자국

원본 : https://itaekit.tistory.com/12들어가기 전에인프런 워밍업 클럽 스터디 1기에 참여하게 되었다.함께 성장하는 즐거움을 맛보고 싶었고,커뮤니티로부터 동기부여도 받고 싶었고,무엇보다 막막하기만했던 독학에서 방향성을 얻고 싶었다.3주 간의 여정에서 많은 성장을 해내고 싶다.인프런 워밍업 클럽 스터디 소개인프런에서 주최하는 온라인 스터디다.이번 1기의 경우 Backend(Java/Spring), Frontend(JS/React), Product Design(Figma) 과정이 운영된다.각 과정마다 강사와 서포가 배정되고 강사님의 인프런 강의를 수강하게 된다.내가 참여하게 된 BE 스터디의 경우총 4주 진행 중 3번의 온라인 세션이 예정되어 있다.혼자서 강의를 듣고 공부했던 여태까지의 방식과 다르게,커뮤니티에 참여해 함께 공부하게 되고 강사님 가까이서 배울 수 있단 점이 참 매력적이다.또한,과제 및 미니프로젝트가 제공되어 더욱 견고한 학습을 할 수 있고,현직자의 멘토링을 받으며 학습의 방향성을 잡을 수 있단 점이 가장 큰 차별점이라고 생각한다.뿐만 아니라,수료자/우수 수료자를 뽑아 소정의 장학금, 굿즈, 인프콘 티켓, 1:1 멘토링 등이 제공되어 동기부여가 된다.(굿즈 갖고 싶다...)첫번째 Online Session : OT , 이런것 까지 알아야 할까?온라인 세션을 통해 강사님과 첫번째 만남을 가졌다.전반적인 과정 소개와 함께 과정에 앞서 알고 있으면 좋을 사전 지식들을 설명해주셨다.Java는 컴파일 언어일까, 인터프리터 언어일까?Compile고급 언어로 작성된 소스코드를 로우 레벨의 기계어로 번역하는 과정이다.한 번에 전체 코드를 모두 기계어로 번역하기 때문에 컴파일 이후 실행 속도가 빠르다는 장점이 있다.Java의 경우 .java -> .class(Bytecode)가 컴파일 과정에 해당한다.Interpreter컴파일 방식과 다르게 소스코드 한 줄 씩 읽어들여 런타임으로 번역하는 과정이다.Java의 경우 JVM이 .class를 실행할 때 처리하는 방식이다.Java는 컴파일 언어일까, 인터프리터 언어일까?Write Once, Run Anywhere- James GoslingJava는 두 방식 모두 채택하고 있다.먼저 Bytecode로 컴파일 하고 이를 플랫폼별로 최적화된 JVM이 인터프리터 방식으로 실행한다.이를 통해,기존 컴파일 언어의 단점이었던 OS 종속을 해결했고,기존 인터프리터 언어의 단점이었던 타입 불안전성을 극복할 수 있게된다.JIT (Just-In Time) Compiler인터프리터 언어의 단점은 실행 속도가 느리다는 점이다.이를 극복하기 위해 JVM은 Just-In Time Compiler라는 기술을 사용한다.JIT Compiler는 바이트코드를 분석하고,자주 실행되는 코드 블록을 미리 구분하여 Native machine code로 컴파일하여 실행 속도를 높인다.물론 장점만 얻을 수는 없다.JIT Compiler는 애플리케이션 최초 배포시 사용된 적 없는 코드로 인해 분석에 많은 리소스가 발생하게 된다.이를 해결하기 위해 배포 전 미리 웜업을 거쳐야한다.JVM, JRE, JDKJVM (Java Virtual Machine)Bytecode를 읽고 검증하여 실행하는 가상 머신이다.OS별로 최적화되어있어 동일한 Bytecode에 대해 플랫폼별 실행을 가능하게 한다.JRE (Java Runtime Envrionment)JVM 및 실제 실행에 필요한 여러 라이브러리 파일 포함하는 실행 환경JDK (Java Development Kit)JRE 및 Compiler, Debugger 등 포함하는 개발 환경Build, Build ToolsBuild소스파일로 부터 Artifact를 생성하는 일련의 과정소스코드 컴파일테스트코드 컴파일, 실행, 리포트기타 추가 설정 작업패키징Artifact 생성Build ToolsBuild 자동화 관리 프로그램으로 대표적으로 Gradle(Groovy), Maven(xml) 사용짧은 회고Java/Spring이 처음인 내게,강사님의 모든 말들은 그 자체로 지식의 확장이었다.간간히 들어서 익숙하긴한데,실제 내용을 알지 못하는 부분에 대해 많이 알아갈 수 있었다.이런 기본적인 것들을 왜 두려워하기만 했을까?알아간다는 즐거움과 함께 앞으로 알아가야 할 것들이 얼마나 많을까라는 걱정도 공존했지만,정말 오랜만에 능동적으로 학습하는 기분이 들어 행복했다.Day 01 : 서버 개발을 위한 환경 설정 및 네트워크 기초첫째날 학습한 내용은 아래와 같다.스프링 프로젝트를 시작하는 방법서버 개발에 필요한 기본 지식간단한 API 작성 및 테스트스프링 프로젝트 시작스프링 프로젝트를 시작하는 방법은 크게 2가지다.기존 프로젝트를 다운 받아 시작spring initializr를 사용해 새 프로젝트 생성1번의 경우,프로젝트를 위한 모든 의존성 및 설정이 완료되어 있어 바로 시작할 수 있다.2번의 경우,프로젝트를 위한 모든 의존성 및 설정을 직접 지정해야한다.spring initializr 사용해 프로젝트 생성하기spring initializr에 접속해 프로젝트를 설정한다.각 항목에 대한 내용은 아래와 같다.Project : 프로젝트에 사용될 Build Tools 선택Language : 프로젝트에 사용될 Main languageSpring Boot : Spring Boot의 Version을 지정괄호가 있는 version의 경우, 베타버젼이므로 안정적인 프로젝트를 위해 소괄호 없는 버전 선택을 권장Project Metadata : 프로젝트의 메타데이터를 지정Group : 그룹명, 일반적으로 도메인 작성Artifact : 애플리케이션 이름Name : 프로젝트 이름, 별도의 지정이 없는 경우 artifact명을 따름Description : 프로젝트에 대한 설명Package Name : 패키지명, Group과 Artifact의 조합으로 작성됨Packaging : 패키징 방식 지정Java : JDK VersionDependencies : 프로젝트에서 사용할 Library, Framework 등 의존성 설정Library vs FrameworkLibrary : 프로그래머가 미리 만들어져 있는 기능을 가져와 사용Framework : 프레임워크가 프로그래머의 코드를 가져가 사용Server Programming 기본 개념 : Server, Network, HTTP, URL, APIServer요청에 대한 응답을 처리하는 컴퓨터 또는 프로그램Network네트워크란,노드 간 연결로 형성된 디지털 전기통신망이다.각 노드는 상호연결을 통해 리소스를 공유할 수 있다.LAN 부터 Internet Network까지 그 범위는 광범위하다.Internet인터넷이란,전세계 컴퓨터 네트워를 연결하는 광범위한 네트워크를 의미한다.각 디바이스는 각각 Client/Server로 구성되며 TCP/IP 기본 프로토콜을 제공한다.WebInternet을 기반으로 HTML 문서 기반의 리소스를 공유하는 기술, 인프라 그 자체광범위한 Network의 일종인 Internet을 기반으로 HTML Resource를 공유하는 기술 및 Infra 그 자체가 Web이다. IP (Internet Protocol)Internet에서사용되는 통신 규약IP AddressInternet에 연결된 Device를 식별하기 위해 부여되는 고유 주소Domain NameDNS(Domain Name System)에 의해 IP Address와 매핑되어 사용되는 이름으로,사람이 직접 IP 주소를 다루는 것은 불편하여 고안된 방법ping www.google.com으로 구글 ip 확인ex. google에 접속하기 위해 142.250.66.100으로 접속하는 대신 google.com으로 접속PortIP를 통해 인터넷에서 하나의 디바이스를 특정할 수 있었다면,Port를 통해 해당 디바이스의 특정 프로세스에 접근할 수 있게 된다.즉, Port는 일종의 네트워크상 프로세스의 고유 주소가 되는 셈이다.HTTP (HyperText Transfer Protocol)Web에서 사용하는 기본 통신 규약HTTP Method서버가 수행해야 할 action을 지정하는 방식으수행 목적에 따라 GET, POST, PUT, DELETE 등으로 구분된다.HTTP RequestHTTP Request FormatClient에서 Server로 보내는 HTTP 포맷첫째줄에 HTTP Method와 함께 Path 정보가 포함됨HTTP ResponseHTTP Response FormatServer에서 Client로 보내는 HTTP 포맷첫째줄에서 Status Code를 반환URL (Uniform Resource Locator)URL SampleWeb 상에 존재하는 Resource의 주소API (Application Programming Interface)프로그램간 통신하기 위한 규약정해진 약속에 따라 특정 기능을 수행@SpringBootApplication스프링 프로젝트를 실행시키기 위해 필요한 설정들을 모두 자동으로 처리GET API 개발 및 테스트@RestControllerController Class 등록을 위한 어노테이션@GetMapping(Path)GET Method에 대한 API 지정을 위한 어노테이션@RequestParamQuery 추출을 위한 어노테이션GET API 실습API : GET /addQuery로부터 두 정수를 추출하여 더한 값 반환과제 리뷰첫째날 과제는 어노테이션에 대한 학습이었다.소스코드에서 메타데이터를 제공할 수 있는 방법인 어노테이션은프레임워크에서 적극적으로 활용되기 때문에 어노테이션에 대한 기본적인 학습이 필요했다.이전까지 써본 어노테이션이라고는 @Override, @FunctionalInterface 정도였지만이번 과제를 통해 어노테이션에 대한 기본적인 내용을 정리할 수 있었다.Annotation 기본 지식소스코드에 메타데이터를 직접 추가하기 위해 고안된 방법으로JDK 5부터 지원한다.주석과 같이 로직 자체에 영향을 주진 않지만 코드의 연결 방법, 구조를 변경하므로실행 흐름을 변경할 수 있다.컴파일 전처리 대상인 주석과 다르게,런타임 시점에 사용될 정보를 포함할 수 있다.클래스, 메서드, 변수 등에 추가할 수 있다.어노테이션의 종류로는,기본 제공되는 Built-In 어노테이션,직접 만드는 사용자 정의 어노테이션,그리고 사용자 정의 어노테이션을 만들 때 필요한 메타 어노테이션 등이 있다.어노테이션은 오직 자신이 유효한 프레임워크에서만 동작한다는 특징을 가진다.ex. @SpringBootApplication은 Spring framework에서 동작하며 실행에 필요한 설정들을 처리한다.짧은 회고다음 스텝으로 넘아가는 것에 두려움을 가졌던 내 학습 스타일이 깨져가고 변해가는 귀한 시간이었다.본격적인 스프링 프레임워크 학습에 앞서 필요한 지식들을 학습할 수 있었다.그동안 대충 알고 있었던 용어들에 대해 정리하니 개운해졌다고나 할까.특히 그동안 괜히 어려울 것만 같았던 스프링 프로젝트를 직접 실습해보며"생각보다 할만한데?"라는 느낌을 받았다.왜 겁을 먹었던 걸까,이렇게 즐겁기만 한데!자,시작이 반이라고 했던가.정말 필요한 기본 지식들은 모두 끝났다.본격적인 스프링 프레임워크의 학습에 뛰어들어보자!Day 02 : 첫 HTTP API 개발두번째 날,POST API 실습을 진행했다.POST API 개발 및 테스트조회를 위해 사용했던 GET API와 다르게,POST API는 Server에 데이터 생성을 요청한다.생성을 위해 필요한 데이터는 기본적으로 Request Body의 형태로 전달한다.@PostMapping(Path)POST API 지정을 위한 어노테이션@RequestBodyRequest Body를 DTO로 받기 위해 사용하는 어노테이션DTO의 field와 이름이 같은 경우,자동으로 매핑되어 처리POST API 실습POST /multiply전달된 Request Body의 두 Integer 객체로부터 곱을 구하여 전달유저 생성 API 개발 및 테스트이어지는 API 실습에서는,User DTO를 활용하여User를 생성하는 POST API를 만들고전체 User를 조회하는 GET API를 만든다Controller에서 사용하기 위해 동일한 객체에 대해 다양한 DTO를 설계하였다.Request Body로 받아들이기 위한 DTO실제 서버에서 사용할 UserResponse로 사용할 DTO이를 통해 각 객체의 역할을 구분할 수 있었고,용도에 맞춰 사용해 개발하기 한결 수월했다.과제 리뷰둘째날 과제는 주어지는 API Specification에 따른 API 개발이었다.그 중,Query에 날짜를 전달하여 요일을 전달받는 GET API 문제가 가장 재밌었다.특정 날짜에 대해 요일을 영어로 출력하되,이 때 마지막의 "DAY"는 제외하고 반환해야한다.Response DTO를 설계하여문제에서 주어진 JSON 포맷으로 반환하는 것 또한 공부가 되었다.짠-짧은 회고API 실습을 통해Client와 Server가 통신하는 원리를 배울 수 있었다.뿐만 아니라,API 명세에 따라 구현을 하다보니정말 서버 개발자로써 일을 하고 있는 것 같은 기분이 들어 즐거웠다.과제 중 list 형태의 Request Body로부터 합을 계산하여 반환하는 문제가 있었는데,해당 문제에는 Stream API를 사용하니뭐랄까... "은근 Java 좀 치는데?"같은 감상도 들었다.배웠던 내용이 자연스레 떠오르고 코드로 작성되는 순간의 희열은 이루 말할 수 없는 것 같다.아,아직 API 요청에 대해 DB를 연동하지 않았기 때문에Server 메모리 상에서만 데이터를 다루고 있다.얼른 DB를 배워 연동해서 실제 살아있는 서버를 만들고 싶다.Day 03 : 기본적인 DB 사용법DB 활용에 앞서 DB에 대한 기초 및 연결을 학습하는 시간이었다.Database저장 원리기본적으로 컴퓨터의 모든 리소스는 Disk와 같은 저장장치에 반영구적으로 보존된다.프로그램을 실행하게 되면 디스크로부터 프로그램을 RAM에 올려 CPU로 계산을 한다.그렇다면, 클라이언트로부터 데이터를 받은 서버 컴퓨터에서는 해당 데이터를 보존하기 위해 어떻게 해야할까?당연히 서버 컴퓨터에 저장해야한다.RAM과 같이 휘발성이 없는 장치에다가.물론, 서버 컴퓨터에 파일 형태로도 보존할 수 있다.그렇지만 대용량 데이터에 대해 효율적인 연산을 지원하는 DB의 사용이 일반적이고 정석이다.따라서 서버 개발자라면,DB에 대한 지식이 필요하다.DatabaseDB는 대용량 데이터에 대해 효율적인 연산을 제공하는 가상의 저장장치 및 프로그램이다.구조화 방식에 따라 RDB, NoSQL 등이 있으며각각의 목적에 따라 사용된다.프로그래머는 DBMS(Database Management System)을 통해 DB를 관리하는데,여기에는 MySQL, PostgreSQL, MongoDB 등 다양한 제품이 있다.이 때,DBMS에서 DB와 통신하기 위해 사용되는 언어를 SQL(Structured Query Language)라고 한다.Spring에서 DB 연동하기application.ymlSpring framework가 DB에 접근하기 위한 설정 등록한다./resource에서 관리하며 이미 application.properties가 있는 경우 확장자를 변경한다.dependencyapplication.yml에서 mysql을 위한 Driver를 지정하였는데,이를 위해 의존성에 추가한다.IntelliJ에서 DB연동IntelliJ Ultimate를 사용하는 경우,IDEA와 DB를 연결하여 DBMS로 활용할 수 있다.해당 서비스 이용이 어려운 경우,MySQL Client 또는 DBeaver와 같은 프로그램을 사용하면된다.intelliJ에서 MySQL 연결JdbcTemplate를 사용한 간단한 DB 연동 프로그래밍DB를 연결했으니 직접 사용해본다.JdbcTemplate 필드에 대한 의존성 주입서버 코드에서 DB와 연동하기 위한 API로 JdbcTemplate를 사용한다.API 코드 수정이 때 주의해야 할 점으로,jdbcTemplate 필드로 SELECT문을 사용해 반환받은 결과는 List다.또한,RowMapper 구현을 통해List를 생성하기 전 Table의 각 row에 대해 필요한 정보를 지정하여 임의의 객체를 만들어야 한다.과제 리뷰이번 과제는 람다식에 대한 내용이다.함수형 인터페이스에 대해 익명 클래스를 기반으로 동작하는 람다식은 JDK 8부터 추가되었다.생산성 및 가독성을 올려주며,함수형 프로그래밍을 구현할 수 있게 된다.이미 Java 문법에서도 배웠던 내용이라다시 한번 점검할 수 있었다.짧은 회고살아있는 서버를 만드는 일은 정말 즐거웠다.점점 실제 서비스를 만들 수 있는 재료들을 배워가고 있다는 생각에,빨리 이 과정을 졸업하고 프로젝트에 뛰어들고 싶어 근질근질하다.이전에 SQLD를 준비하며 배웠던 SQL이 기억나조금 더 수월하게 따라갈 수 있었다.역시 배운 건 어디 안간다.간단한 CRUD 정도야 바로 사용할 수 있었지만,복잡한 쿼리문을 설계하고 이를 스프링에서도 사용하기 위해DB, SQL을 깊게 파봐야할 것 같다.Day 04 : DB를 사용해 만드는 API지난 시간과 이어지는 DB연동으로,UPDATE, DELETE API를 작성했다.PUT API로 UPDATE 기능 구현, DELETE API로 DELETE 기능 구현각 API에 대해 예외처리한 코드다.과제 리뷰계속해서 이어지는 API 실습이다.서버 개발자는 결국 Client 요청을 처리하기 위한 API를 개발하는 일을 하는만큼,API 연습만이 살 길이다!과제 중,로직도 복잡하고 DB 테이블을 확장해야 했던 3번이 가장 재미있었지만...이유를 몰라 헤맸던 문제 2번을 해결한 경험을 나누고자 한다.RequestBody DTO에 기본 생성자가 정의되지 않은 경우처음 작성한 코드에는 기본 생성자를 작성하지 않았다.단순히 @RequestBody에 의해 오버라이드한 생성자가 호출되는 줄 알고 아무런 문제를 느끼지 못했다.이상없다고 단정지은 코드...그러나 INSERT 되지 않았다.Status code는 400을 반환 받았고 요청 자체가 잘못되었음을 알 수 있었다.무엇이 문제일까?이를 이해하기 위해서는 @RequestBody의 동작을 이해해야한다.@RequestBody의 동작@RequestBody는 요청으로 넘어온 객체를 지정한 DTO에 매핑시켜 반환한다.이 때,Spring은 Reflection을 사용하는데DTO 클래스에 기본 생성자가 없는 경우 변환하는 과정에서 문제를 일으킬 수 있다.따라서,DTO 클래스를 생성할 때는 반드시 기본 생성자를 작성한다.편-안짧은 회고많은 API 연습을 통해Client와 Server 사이에서 이루어지는 동작에 대해 보다 이해할 수 있었고,무엇보다 API 작성에 자신감을 갖게 되었다.가장 기본이자, 가장 중요한 CRUD API에 대해 모두 학습하였다.API 디자인은 더 많은 연습이 필요하겠지만,API 명세를 이해하고 이를 바탕으로 실제 구현하는 일은 곧 내가 현업에서 밥 먹듯이 하게 될 일이다.기본기가 중요한만큼,더욱 집중해서 학습하고 연마하자!Day 05 : 클린코드의 개념과 첫 리팩토링1주차 마지막 날이다.단순 구현에서 벗어나 좋은 코드에 대한 고민을 시작하게됐다.Clean Code개발자를 준비하면서 심심찮게 들어본 단어 중 하나가 바로 '클린코드'다.실제 개발자는 코드를 작성하는 시간보다 읽는 시간이 더 많다고 한다.어느 한 사람만 이해하고 시간이 지나면 아무도 이해하지 못하는 코드는 결코 좋은 코드라고 말할 수 없을 것이다.코드란 요구사항에 대한 실제 구현이며,좋은 코드란 읽기 좋은 코드를 의미한다.즉,클린코드로 작성하여 가독성을 높여 최종적으로는 생산성을 높이는 것이 가장 중요한 목적이다.Layered Architecture이전의 코드는 모두 하나의 Controller에서 작성되었다.즉, Controller에서 작성된 하나의 메서드가API 진입점으로 사용되고로직을 수행하며DB와 통신을 한다더 좋은 코드를 위해,더 좋은 구조를 위해,역할에 따라 클래스를 구분하고이를 기반으로 통신하는 Layered Architecure를 적용한다.ControllerAPI의 진입점으로 사용되는 클래스다.API 진입점으로 Service와 통신Service비즈니스 로직을 작성하는 클래스다.Controller, Repository와 통신RepositoryDB와 통신하는 클래스다.Service, Database와 통신과제 리뷰좋은 코드를 위한 고민은 멈추지 말아야한다.작성하는 입장보다 읽는 입장을 고려하며 작성하는 것이 좋은 자세일 것이다.그리고 이러한 고민은 아주 오래 전 부터 수많은 개발자에 의해 이뤄져왔다.어느정도 일반적인 클린코드에 대한 가이드가 생겨났다.<Clean Code>라는 책이 좋은 참고가 될 것이며,이론적으로 아는 것 보다 실제 작성하고 읽어보며 체득하는 것이 더욱 유익할 것 같다.짧은 회고처음으로 내가 작성한 코드를 바라보게 되었다."내가 작성한 코드는 좋은 코드인가?"라는 고민을 멈추지 말아야겠다.좋은 습관이 벨 수 있도록,고민하고 작성하자!두번째 Online Session : Live Q&A두번째 온라인 미팅이 진행되었다.이번 세션은 QnA 위주로 진행되었고 가장 도움되었던 내용을 기록해본다.Q. 포트폴리오 주제지원하는 회사에서 하고 있는 프로덕트가 최고다.가장 가고 싶은 회사 한 곳을 선정하여 관련 서비스를 만들어보자.실제 서비스되고 있는 기능을 분석하고 구현하면서 자신의 사용 경험을 기반으로 새로운 기능도 추가해보자.분명 좋은 평가를 받을 것이다.Q. 신입 개발자 역량회사의 사정과 규모에 따라 나뉘겠지만 멘토님이 제시해주신 방향은 아래와 같다.개발자 시작 가능한 수준기본적인 Java 이해 : Java 기본서 90% 이해 및 기본적인 구현 능력기본적인 CRUD 및 Spring 기본최소한의 배포취업 99%의 능력Java 심화추천 도서 : <이펙티브 자바>, <모던 자바 인 액션>, <자바 성능 최적화>Spring 심화 : 통계, 엑셀, 메일을 Spring으로 구현할 수 있어야 함기술에 대한 고민을 할 수 있을 정도의 이해무중단 배포, 서버 확장 전략이번 스터디를 통해 내 수준이 어디까지 올라갈지는 모르겠으나,폭.풍.성.장 하자!1주차 후기이렇게까지 많이 배운 한 주가 있었나 싶을 정도로많이 배웠고, 연습했고, 성장했다.한편으로,이전부터 이렇게 학습했다면 진작 취업하지 않았을까? 라는 아쉬움이 사무쳤다.배운 내용을 완벽히 이해해야만 다음 단계로 넘어갈 수 있었고무엇을 학습하면 좋을지 몰라 닥치는대로 학습했고정작 중요한 서버 지식과 스프링을 배우기 위해서 무엇을 하면 좋을지 몰라지레 겁을 먹었던 지난 날들이었다.이제라도,어떻게 성장해야하는 지 알아가고 있음에 감사하자.제대로 성장하는 방법을 알아가고 있음에 위로를 얻자.앞으로의 성장이 기대되기 시작한 1주차였다.

백엔드･워밍업클럽스터디･백엔드･Java/Spring･최태현멘토님

0

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

[강의 내용 정리]Section 1. API 만들기@RestController : 아래 클래스를 api의 진입 지점으로 설정GET(@GetMapping(”/path”))@RequestParam : 쿼리를 통해 넘어온 데이터를 파라미터로 줄 때 사용파라미터를 객체로 받을 수 있음(DTO) → 객체로 받으면 @RequestParam 안 씀DTO에 생성자, getter 생성Controller에서 getter가 있는 객체를 반환하면 json이 됨POST(@PostMapping(”/path”))Body로 데이터를 받을 때, JSON 사용@RequestBody : http body의 json을 파싱해서 객체(dto)로 만들 때 사용DTO에 getter 생성Section 2. Database 조작하기CRUD API를 만든다 == 어떤 대상에 대해 생성, 조회, 업데이트, 제거 API를 만든다JDBC와 연결private final JdbcTemplate jdbcTemplate; public UserController(JdbcTemplate jdbcTemplate) { this.jdbcTemplate = jdbcTemplate; } jdbcTemplate.query(sql, RowMapper 구현 익명클래스)⇒ Lamda로 더 간결하게 변경 가능jdbcTemplate.update()⇒ 여기서 update : sql의 UPDATE와 달리, 내용이 수정될 때 사용(INSERT, UPDATE, DELETE)Section 3. 역할의 분리와 스프링 컨테이너Controller 3단 분리(Layered Architecture)Controller : API의 진입 지점. 즉, HTTP 관련 부분 처리(”path”) (HTTP Body를 객체로 변환)Service : 예외 처리 (유저가 있는지 없는지 확인)Repository : DB와의 통신 (SQL)[과제 정리][과제 1] 어노테이션[과제 2] GET, POST API[과제 3] 람다식[회고]스터디 참가 전, 강의를 모두 수강하긴 했지만 내 지식으로 만들지 못한 부분이 많았다. 강의를 다시 수강하며 부족한 부분을 채우고자 스터디에 참여하게 되었다.일정표에 따라 강의를 재수강하고 과제를 수행하면서 내가 부족한 부분이 어느 부분인지 확실하게 알 수 있었다. 특히, 자바에 대한 학습이 더 많이 필요함을 느꼈다.2주차에는 강의 수강과 과제 수행을 좀 더 성실히 수행하고자 한다!

백엔드･워밍업클럽

0

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

Section 1 - 생애 최초 API 만들기 Java를 공부하기 전에 알아두면 좋을 것들JAVA의 경우 C언어와는 다르게 운영체제에 따라 각각의 컴파일러가 필요하지 않다. JAVA 컴파일러의 결과물이 각각의 운영체제의 JVM 위로 올라가게 된다.JVM : 바이너리 코드를 읽고 검증하고 실행JRE : JVM + 실행에 필요한 라이브러리 파일JDK : JRE + 개발을 위한 도구(컴파일러, 디버그 도구) JDK > JRE > JVM빌드(build) : 소스코드 파일을 컴퓨터에서 실행할 수 있는 독립적 SW(Artifact)로 변환하는 과정실행(run) : 작성한 코드를 컴파일을 거쳐 작동하는 것 (Artifact가 있을 수도 있고 없을 수도 있다)Java 빌드 도구 : 빌드 과정 자동화와 외부 라이브러리 관리를 위해 빌드 툴을 사용 예) ANT, Maven, Gradle 스프링 프로젝트 시작이미 만들어진 스프링 프로젝트를 다운로드spring initializer를 이용해 새로운 프로젝트 시작 https://start.spring.io/ 어노테이션@SpringBootApplication 어노테이션의 경우 스프링을 실행시킬 때 필요한 다양한 설정들을 자동으로 해준다.여기서 과제로 어노테이션에 대한 리서치 과제를 진행하였다.[과제 #1] 어노테이션 네트워크서버 : 어떠한 기능을 제공하는 프로그램을 실행시키고 있는 컴퓨터서버라는 컴퓨터에게 요청을 하기 위해서는 인터넷, 네트워크를 사용한다. HTTP와 API(웹을 통한)컴퓨터 간 통신은 HTTP라는 표준화된 규약을 통해 이루어진다.HTTP 요청은 HTTP Method(GET, POST)와 Path(/portion)가 핵심이다.요청에서 데이터를 전달하기 위한 방식에는 쿼리와 바디 방식이 있다.HTTP 응답의은 상태코드 가 핵심이다.클라이언트와 서버는 HTTP를 주고받으며 기능하는데 이때 정해진 규칙이 API이다. API 개발하기API Specification(명세) : API를 개발하기 전에 API의 HTTP method, HTTP path, 쿼리와 바디, API의 반환 결과를 결정해야 한다.GET API@RestController : 주어진 Class를 Controller로 등록한다.Controller : API의 입구DTO(Data Transfer Object) 객체 : '쿼리'를 서버 안 Controller로 전달하는 역할POST API쿼리를 사용하지 않고 바디(Body)를 사용한다.Json : 바디에 데이터를 담아주는 방식 Section 2 - 생애 최초 Database 조작하기Database지난 시간에 서버를 종료했다가 시작하면 유저 정보가 전부 사라지는 것을 확인할 수 있었다. API의 결과가 RAM(메모리)에 저장되기 때문에 서버는 Disk(장기기록장치)에 정보를 저장해야 한다. 이럴 때 Database를 사용할 수 있다.Database : 데이터를 구조화 시켜 저장Relational Database : 데이터를 표처럼 구조화 시켜 저장MySQL은 대표적인 RDB이다.데이터베이스를 조작하기 위해서 SQL을 사용해야 한다. MySQL접근 방법Intellij Ultimate에서 MySQL에 바로 접근이 가능하다.CLI로 접근하기 SQLDDL(Data Definition Language) : 데이터를 정의하는 SQLDBcreate database [데이터베이스 이름]; show databases; drop database [데이터베이스 이름]; use [데이터베이스 이름];테이블create table [테이블 이름] ( [필드1 이름] [타입] [부가조건], [필드 2 이름] [타입] [부가조건], ... primary key ([필드 이름]) ); show tables; drop table [테이블 이름];DML(Data Manipulation Language) : 데이터를 조작하기 위한 SQLCRUDCreate(생성) : 데이터 삽입Retrieve or Read(읽기) : 조회Update(업데이트) : 수정Delete(제거) : 삭제# 데이터 넣기 INSERT INTO [테이블 이름] (필드1이름, 필드2이름, ...) VALUES (값1, 값2, ...) # 데이터 조회하기 SELECT * FROM [테이블 이름] WHERE [조건]; # 데이터 업데이트하기 UPDATE [테이블 이름] SET 필드1이름=값1, 필드2이름=값2, ... WHERE [조건]; # 데이터 삭제하기 DELETE FROM [테이블 이름] WHERE [조건]; Spring에서 Database 사용resources 폴더에 application.yml 파일을 생성해 스프링 서버와 연결할 DB 정보를 설정한다. POST API 변경jdbcTemplate을 이용해 SQL을 날릴 수 있다."INSERT INTO user(name, age) VALUES(?, ?)"; 와 같이 값이 들어가야 하는 부분에는 ?를 사용한다.jdbcTemplate.update(sql, request.getName(), request.getAge());jdbcTemplate.update는 INSERT, UPDATE, DELETE 쿼리에 사용 가능하다.첫 파라미터는 sql을 받고, ?를 대신할 값을 차례로 넣어준다.GET API 변경jdbcTemplate.query(sql, RowMapper 구현 익명클래스) : query를 사용하면 SELECT 쿼리를 날릴 수 있다.@Override 함수 : ResultSet 객체에는 결과가 담겨있고, 이 객체에 getType("필드이름") 을 사용해서 실제 값을 가져온다.JAVA 람다를 이용해 더 간결한 코드를 간결하게 변경할 수 있다. [과제 #3] 람다식과 익명 클래스예외 처리사용자가 없으면 IllegalArgumentException과 같은 표준 예외를 throw한다. 사용자의 존재 여부를 확인하고 없으면 예외를 던져 200 OK 대신 500 Internal Server Error가 나오게 한다.여유롭게 강의를 수강하고 과제를 수행할 수 있을 것이라고 생각했는데, 강의도 진도표보다 적게 들었고 두 번째 과제도 수행하지 못했다.😭 다음 주에는 시간이 있을 때 미리 강의도 듣고 과제도 수행해야겠다는 생각이 들었다.

백엔드･인프런워밍업클럽1기BE

0

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

원래 iOS 개발을 하였으나, 직장에서 FE개발을 맡은지 어언 9개월이 되어간다. 바로 실무에 적용했어야 하다보니 FE전반적인 내용에 대해 공부의 필요성을 느꼈다. 그러던중 인프런 워밍업 클럽 - 스터디 1기의 존재를 알게됐고, 좋은 기회로 보여 신청했다.직장을 다니다 보니, 사실상 출 퇴근, 업무 시간을 포함하면 나에게 남는건 퇴근 후, 3-4시간이 전부이다. (잠을 줄이자니,, 업무에 지장이 생길거 같다..) 이 3-4시간을 조금 알차게 써보려 했지만 작심삼일도 못갔다... 그래서 연휴를 잘 활용해 커리큘럼을 따라가보려한다.🚀 1주차 회고 강의에서 배운점 : react로 웹개발을 시작한 편이라,, js 로 dom 조작 부분이 생소했다. 하지만 꼭 알아둬야하는 개념이었기에, mdn 문서도 참고해가며 공부하고 있다.잘 한 점: 직장을 다니면서 틈틈히 강의를 들으려고 노력을 했다.아쉬운 점: 그 노력이 오래 지속되지는 못했다...보완할 점퇴근 후, 유투브 보다 인프런을 먼저 켜서 강의를 들을 것.강의를 듣고, 노션에 정리를 조금씩 해둬서, 발자국 회고를 작성이 더욱 내용을 알차게 적을 것.다음주 계획: 과제 pr 올리기.

웹 개발･워밍업클럽･FE･발자국･1주차

0

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

인프런 메일을 통해 이 스터디에 알게 되었다. 부트캠프를 수강한지도 오래되었고, 프로젝트에 참여한 지도 오래되어 서버 개발에 대해 기억이 가물가물해져서, 사실상 다 까먹어서 참여하게 되었다. 그리고 혼자 공부하다보면 스스로와 타협하게 될 때가 많다. 이러다 보면 기간은 길어지기만 하는데 다행히 나에게 필요한 내용의 스터디가 있어서 참여하였다. 학습 요약 및 회고이번주는 Section1과 Section2를 수강했다. 이 과정을 수강하며 API를 만들고, Database를 조작하는 방법에 대해 알 수 있었다.Day 1스프링에 대한 기본적인 내용과 서버 개발을 하는데 필요한 다양한 기초 지식들을 배울 수 있었다. 간단한 GET동작을 하는 API도 생성하였다.자세한 내용은 다음의 링크에 정리했다.https://blog.naver.com/le_voyage_03/223431252952Day 2GET동작에 이어 POST API를 생성했다.GET과 POST를 응용하여 다양한 API를 생성했다.저장한 사용자들의 데이터들이 서버를 종료하면 초기화되는 문제를 발견하였다.자세한 내용은 다음의 링크에 정리했다.https://blog.naver.com/le_voyage_03/223432427713Day 3Day 2에서 발견한 문제점을 해결하기 위해 Database를 사용하였다.디스크와 메모리의 차이Database를 사용하기 위해 MySQL을 저장하고 실행시키며 동작하는 명령어에 대해 배웠다.CRUD(Creat, Read, Update, Delete)로 데이터를 조작하는 방법에 대해 배웠다.생성한 Database를 Spring과 연결하였다.Day 4스프링으로 Database에 접근하여 CRUD를 했다.발생할 수 있는 예외 상황을 처리하였다.한 클래스인 Controller가 너무 많은 역할을 하는 문제를 발견하였다. 과제 및 회고Day 1https://github.com/zzzyoonnn/libraryApp/blob/main/task/Task01.md어노테이션에 대해 다시 한번 개념을 정리할 수 있었다.Day 2https://github.com/zzzyoonnn/libraryApp/blob/main/task/Task02.md강의를 보며 코드를 따라 치다가 혼자서 하려니 막상 내가 제대로 이해하지 못했음을 깨달았다. 강의를 정리해둔 내용을 다시 보며 이해할 수 있었다. 다행이다.Day 3https://github.com/zzzyoonnn/libraryApp/blob/main/task/Task03.md람다와 관련된 내용들을 정리할 수 있었다. 마무리계획표에 따라 강의를 수강하겠다 다짐했건만 자꾸 쳐지는 건 어쩔 수 없나보다. 그래도 다행히 너무 뒤쳐지지 않게 강의를 수강할 수 있었다. 기운 내자! 그리고 부트캠프를 수강한 지 오래되어 개발하는 것에 대한 두려움이 컸었는데 다행히 이전에 비해 두려움은 많이 사그라들었다. 그래도 아직은 갈 길이 멀다. 무사히 완강하고 개인 포트폴리오도 완성할 수 있길 바란다. 화이팅하자!

0