블로그 모아보기 - 인프런

[인프런 워밍업 클럽 스터디 0기] 회고

인프런 워밍업 클럽 스터디 0기가 마무리되었다. 참여하게 된 계기우선 백엔드 전체 사이클을 경험할 수 있을 것이라 생각했다. 배포 경험이 없었기에 배포 경험도 쌓고 싶은 것도 이유 중 하나이다. 좋았던 점보통의 강의는 강의를 듣고 나면 뭔가 끝인 느낌이 있지만, 스터디에서는 진도표를 제공하여 매일 어떤 강의를 수강해야 하는지 정해주셨다. 그래서 강의를 수강하는 것이 수월했고, 강의에서 배운 내용들을 바로 적용할 수 있도록 과제가 주어졌다. 과제를 하면서 개념을 정리하고, 실제 코드에 어떻게 적용이 되는지 적용해 볼 수 있어서 좋았다. 그리고 미니 프로젝트를 진행하면서 디스코드 채널에서 코드 리뷰를 같이 할 러너들을 모으는 글을 보고 바로 지원을 했다. 거의 1~2 주 동안 내 코드를 작성하면서 다른 사람의 코드를 리뷰해주면서 코드를 읽는 것이 얼마나 중요한지 느낄 수 있었다. 또한, 내 코드를 읽는 사람이 읽기 좋게 작성해야겠다고 느끼는 계기가 되었다. 아쉬운 점다른 공부도 같이하고 있었기에 여기에만 몰두하는 것이 쉽지만은 않았다. 스터디를 진행하면서 유연한 테이블 설계와 효율적인 쿼리 작성을 미니 프로젝트에 적용해보지 못한 것이 아쉽다. 느낀 점오프라인이라서 기대는 하지 않았지만 짧은 기간 동안 성장할 수 있었고, 앞으로 어떻게 학습해야 하는지 부족한 부분을 알게 되었다. 수료식은 오프라인으로 참여했는데, Q&A에서 강사님께서 해주신 답변이 많은 도움이 되었습니다. 스터디를 이끌어주신 최태현 강사님과 인프런 관계자분들께 다시 한번 감사 인사를 전합니다!

인프런･인프런워밍업클럽･스터디0기

[인프런 워밍업 클럽 FE] 인프런 워밍업 클럽 후기

처음에 들어갔을 때는, 굉장히 넓은 회사 규모에 놀랐고, 이 시간까지 남아계신 인프런 관계자 분들을 보고 놀랐다. 저번에도 버그가 저녁 11시쯤에 고쳐지는 걸 보고, 언제 퇴근하시나.. 싶었는데,, 이게 직장인이구나..! 싶었다. 🥲 1. 🧊 아이스 브레이킹아이스 브레이킹 시간에는 프론트 강사님 + 프론트 러너 4분과 사부작사부작 대화를 나눌 수 있었다. 저녁 메뉴였던 핏짜 🍕도 굉장히 맛있었고, 소수 인원이라서 더욱 편했었다. 특히 현업에 계신 강사님과 대화할 수 있는 기회는 너무나도 좋은 기회였기 때문에, 그동안 혼자서 끙끙 앓았던 질문을 와다다 했던 것 같다. 그러다가 어쩌다보니 강사님께 포트폴리오도 보여드리고, 피드백도 받을 수 있었다.🙇‍♂ 보여드릴 때 너무 긴장되어서 손이 벌벌 떨렸지만, 진짜 오길 너무 잘했다!! 라는 생각이 계속 들었다. 2. 🧐 코치 Q&AQ&A시간에서는 코치님들이 정말 많이 고민하셔서 답변을 준비하셨구나! 라는 걸 느낄 수 있었다.가장 기억에 남는 건, 어떻게든 버텨라! 라는 거다. 여전히 나에게는 부족한 게 많고, 할 게 무진장 많이 남았지만, 어떻게든 계속 해봐야겠다 🔥 3. 🎉 우수러너 시상감사하게도 프론트 우수러너로 선정되었다. 상품으로는 멘토링권 + 인프콘 초대권 + 말랑 큐티 인프런 굿즈이다. + 완주러너 상품인 50000잎까지! 무엇보다 제일 원했던 멘토링권을 얻게 되서 너무 행복했던 것 같다. 빨리 코치님께 질문할 것들을 정리해야겠다. 사진은 인프런 굿즈이다. 에코백 + 물컵 + 우산 + 뱃지가 있는데, 정말 너무........ 귀엽다! 입꼬리가 특히 귀엽다.4. 💬 자유 네트워킹관심주제별로 조를 구성했는데, 우리 테이블에는 인프런에 근무중이신 프론트 개발자분께서 와주셨다..!사실 처음에 프론트 개발자분이 오셨으면 좋겠다.... 정말 좋겠다..... 하고 마음속으로 빌고 있었는데, 정말로 오셔서 너무 감격스러웠다! 🙇‍♂ 긴장돼서 뚝딱뚝딱하면서도 궁금했던 질문을 다 물어봤었다. 쉽게 오지 않는 기회라는 걸 알기 때문에 너무 행복했던 시간이었다. 5. 끝같은 취업준비생분들과 애기할 수 있고, 무엇보다 현업에 계신 분들과 직접 얘기할 수 있다는 게 너무 뜻깊은 시간이었던 것 같다. 여전히 부족한 게 많구나 라는 생각도 들었지만, 집에 돌아가는 길이 너무 개운하고 행복했었다. 다들 너무 고생하셨습니다! 🙇‍♂

인프런･인프런워밍업클럽･스터디0기

[인프런 워밍업 스터디 클럽] 인프런 워밍업 스터디 클럽 후기

후기어느덧 인프런 워밍업 스터디 클럽 0기가 수료식까지 마무리가 되었습니다. 처음 이 스터디 클럽을 신청할때 "과연 이 스터디 클럽이 마무리가 되었을 때 정말 얼마나 나 자신이 성장을 할 수 있을까?"라는 생각을 하게 되었습다. 그리고 지금 마무리 시점에서 정말로 성장을 할 수 있었다는 생각을 들게 되었습니다. 처음에 프로젝트를 실제로 해보지 않고 기본적인 지식들도 흔히 "대강"아는 수준이였다면 과제와 미니프로젝트를 통하여 많은 성장을 이룬 순간이였습니다. 그러면 자세한 후기글을 시작해보겠습니다.수료식오프라인 수료식을 가는 것에 들뜬 저는 수료식 예정 시간보다 너무 일찍이 도착하였습니다. 그래서 처음에 앞에서 대기좀 타다가 정각에 들어가야하나 싶었는데 다행히도 인프랩 직원분들이 따듯하게 환영인사를 맞이해주셨습니다. 또한 명찰로 제 이름을 여쭤보실때 이름을 말씀드리는 순간 살짝 감동을 받았습니다. 열심히 커뮤니티를 활동해주셨다는 말에 조금은 기분이 더 좋아진 느낌이였습니다. 그리고 테이블에 앉고 시간이 지나 다른 러너분들이 한분 두분씩 오시고 오프라인 수료식이 시작되었다는 것을 실감할 수 있었습니다.네트워킹 & 저녁식사오프라인 수료식이 시작되고 네트워킹 타임이 시작되었습니다. 테이블에 다행히도 사이드프로젝트 인원분들과 같이 자리를 할 수 있었고 커뮤니티에서 열심히 활동하시는 다른 러너분들까지 같이 하게 되었습니다. 또한 저녁식사 메뉴는 피자로 피자를 먹으면서 다른 러너분들과의 네트워킹을 할 수 있게 되었습니다. 그런데 다른 러너 한분이 다음날 건강검진 일정으로 못 드시는것을 보고 살짝 마음이 걸리긴 했습니다. 그래도 다른 인프랩 직원분들이 어떻게든 챙겨주실려고 하시는 모습을 보고 그나마 마음을 놓긴 하였습니다. 그리고 사이드프로젝트에 같이 참가하는 다른 러너분들과는 말은 네트워킹이였지만 거의 약간 1차 회의느낌으로 사이드프로젝트에 대해 이야기를 나눴던 시간이였습니다.Q&A어느덧 식사시간이 지났고 Q&A시간이 다가왔습니다. 백엔드 코치님 "최태현"님과 프론트엔드 코치님 "John Ahn"님께서 우리가 사전에 질문드렸던 질문들중 몇개를 선택하셔서 답변주셨습니다. 여기서 인상이 깊었던 질문들 중에 몇가지가 있었습니다.🙋🏻 취준 기간에 포트폴리오용 프로젝트를 어느정도의 규모로 만들어야 할까?이에 대한 답변으로 각 기업의 기술블로그에서 파일럿 프로젝트를 검색해보시라고 하셨습니다. 그 프로젝트들을 참고해보시면 좋을 것 같다고 답변을 해주셨는데 이 점에서 우리 사이드프로젝트도 다른 기업의 파일럿 프로젝트를 한번 참조해보면 좋을 것 같다고 느끼게 되었습니다.다음 질문은 정확히는 기억이 안나지만 한번 생각나는데로 적어보면 아래와 같습니다.🙋🏻 공부를 함에 있어서 더 이상 실력이 안 늘고 지루하다고 느끼는데 어떻게 할까요?이 점에 있어서 김창준님께서 집필하신 "함께자라기"에서 일부를 말씀해주셨습니다. 일단 시도를 먼저 해보시고 시도를 하다가 쉽다고 느껴지면 난이도를 좀 더 높여보고 그런데 어렵다고 느껴진다면 살짝 낮춰보고 그런식으로 적용해보면 좋다고 말씀주셨습니다. 시상식어느덧 우수러너 시상식이 시작되었습니다. 솔직한 마음으로 나름 "나도 받지 않을까?"라는 마음이 없지는 않았지만 그래도 큰 기대는 하지 않았습니다. 그리고 우수러너 발표때 아쉽게도 저는 우수러너에 떨어졌지만, 같이 사이드프로젝트를 진행하는 백엔드 러너분과 프론트 러너 두 분이 우수러너 선정이 되셨습니다. 이에 나는 너무 기뻤다고 느껴졌습니다. 우수러너가 2분이나 계시는데 뭔가 시작도 전에 천군만마를 얻은 느낌이였습니다.그런데 정말 운이 좋게도 인프랩 운영진 특별상이 추가로 있었고 바로 제가 선정되었습니다. 정말로 깜짝 놀랐고 같은 테이블 분들이 축하한다는 응원의 감사 인사에 더욱 기분이 좋았습니다. 이에 내가 열심히 활동했다는 것을 느끼게 되는 계기였습니다.쉬는시간... 막간의 코치님(최태현님)과의 멘토링쉬는시간이 되었고 코치님이 보이시길래 인사라도 드릴 겸 찾아가서 인사를 드렸습니다. 처음에는 저를 몰라보실수도 있다는 생각에 반신반의를 하면 찾아갔고 다행히도 코치님께서는 저를 기억하고 계셨고 제가 제출했던 Q&A에 대해 조언을 주셨습니다. 이에 정말 많은 도움을 주셔서 다시 한번 감사드립니다.관심사 네트워킹마지막 시간으로 관심사 네트워킹이 시작되었고 코치님과 같은 테이블을 앉게 되었습니다. 코치님이 있기에 정말 궁금했던 부분들을 여쭤볼려고 하였고 이에 대해 코치님께서도 답변을 열심히 응해주셨습니다. 또한 다른 러너분들과의 커뮤니케이션을 통하여 정말 열심히 하시는 분들도 많다는 것을 깨닫고 더욱 열심히 해보자는 마음을 가지게 되는 계기였습니다.마지막...그리고 어느덧 수료식도 마무리를 하게 되었습니다. 정말 '인프런 워밍업 스터디 클럽'을 통해 많은 것을 경험하고 깨닫는 시간이였습니다. 처음 제가 작성했던 출사표에 작성했던 손웅정 선생님의 말씀으로 이제 마무리를 지어볼려고 합니다. 정말 이 인프런 워밍업 스터디 클럽을 통해 열심히 뛰고 많이 깨지면서 더욱 성정하는 시간이 되었습니다. 또한 이런 기회를 주신 인프랩 임직원분들께 감사드리며 이 시간을 활발하게 이끌어주신 두 코치님께 감사의 인사를 전달드립니다. 마지막으로 이런 기회를 잘 이용해서 열심히 활동해주신 다른 러너분들께 감사인사를 드립니다.'인프런 워밍업 스터디 클럽'이 다른 기업의 교육프로그램인 '우x코'처럼 커지기를 바라며 1기가 개최가 되고 저에게 다시 기회가 온다면 참여해보고 싶다는 생각을 하며 이 글의 마침표를 적어봅니다. 마지막으로, 인프런 워밍업 스터디 클럽은 마무리가 되었지만 저의 학습여정은 현재진행형이므로 끝까지 달려보겠습니다.

인프런･인프런워밍업클럽･스터디0기

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

1주차 강의 학습 내용 요약강의를 듣기 전에는 Local styles만 사용하고 Local variables는 어렵게 느껴졌는데, 강의를 듣고 실습을 해보며 이해도를 높일 수 있는 시간이었다.학습 내용 중 특히 도움이 되었던 부분은 아래와 같다.베리어블의 계층 구조 디자인 토큰 이름 짓기색상, 간격, 그림자효과 베리어블 등록하기 초반 이론 단계에서는 이해를 하며 강의를 따라가면서도 내가 정말로 이해를 하고 있는게 맞는걸까?라는 의문이 들었지만, 이후 색상 베리어블 구조와 이름을 짜보는 과정을 통해 실습 과정이 참 중요하구나를 깨달았다. 디자인 토큰이 궁금해서 medium이나 구글링을 통해 내용을 찾아볼 때는 이해가 잘 안 됐었는데 Local Variables에 Primitive, Theme, Semantic 컬렉션을 등록하면서 흐름을 이해할 수 있었던! 회고일주일 동안 스스로 칭찬하고 싶은 점실습을 하며 이해가 안 가는 부분, 궁금한 점을 강의 노트에 적고 우선 스스로 답을 찾아보려고 한 점 아쉬웠던 점1주차 강의를 모두 듣지 못한 점아직 미션을 올리지 못했다보완하고 싶은 점커리큘럼대로 수업을 수강하고 미션은 수행하는대로 바로 스레드에 링크 공유하기!수업을 들으며 궁금한 점이 생겼을 때 우선 스스로 생각해보고 해결되지 않을 때 디스코드 채널에 질문해보기!(노션으로 강의 내용을 메모하다 인프런 강의 노트로 옮겼는데 장단점이 있는 듯 하다. 인프런 강의 노트를 사용하면 메모했던 순간으로 영상이 재생되는 게 편한데 이외에 동영상 재생에 오류가 있다던가... 텍스트를 드래그하고 싶어도 클릭으로 인식해 동영상이 다른 타임라인으로 넘어간다거나 하는 부분이 있어서 어떻게 해야 강의 내용을 편하게 기록할 수 있을지 고민 중...) 1주차 미션 미션 해결 과정색상, 간격, 타이포그래피, 그림자 효과를 베리어블 등록하는 과정은 강의 내용을 따라갔다.하지만 아이콘 등록의 경우 Union Selection을 일일이 선택해야 하는 게 사소하지만 생산성이 떨어지는 부분이라고 생각해 Union Selection의 단축키를 생성해봤다. 확실히 작업 속도가 단축되어서 만족!혹시 제 게시물을 보신 분 중 Union Selection 단축키를 등록하고 싶은 분이 계시다면... Mac의 경우 [시스템 설정] - [키보드] - [키보드 단축키]에 들어가면 단축키를 생성할 수 있습니다.응용 프로그램에서 Figma 선택메뉴 제목에 Union Selection 입력 (대소문자 구분 중요. 위의 사진대로 Union selection이라고 입력X)키보드 단축키 입력 (저는 Union의 앞글자를 따서 cmd+shift+U로 등록했어요. 다른 단축키와 충돌이 나면 안 되니, Figma에서 사용되지 않는 단축키를 입력해야 합니다.) 회고1주차 온라인 세션에서 아이콘이 깨지지 않도록 불린하는 방법을 배울 수 있었다. 이전에 아이콘이 깨질 때 어떻게 해야할 지 감이 안 왔었는데 정말 유익한 내용이었다.확실히 지원하는 플러그인이 많은 프로그램이 작업할 때 많은 도움이 되는 것 같다. 피그마에서 지원하지 않는 기능도 있을법한데...?싶어서 플러그인에 검색해보면 있는... 전세계 피그마인들... 감사합니다.. 그리고 강의를 통해서도 좋은 플러그인 정보를 많이 얻을 수 있었다! 강사님께도 감사합니다.. 🍀

UX/UI･Figma･인프런워밍업클럽

[인프런 워밍업클럽 스터디 FE 0기] 후기

0.반년을 일하면서 어떻게든 잘 버티고 있다고 생각했다."간단하게 인풋에 키랑 아이디 넣고 버튼 누르면 삭제되는 html이면 될 것 같아요."새폴더 > index.htmlvs code의 빈 공간이 이렇게나 낯설고 막막하게 느껴질 줄은 몰랐다. 1.나도 나를 잘 모르지만, 얼마나 게으른 사람인지는 잘 안다.어떻게든 날 밀어붙일 계기가 필요하다 생각하고 이것저것 알아보다가 인프런에서 진행하는 스터디를 알게 됐다.무작정 신청하고 들어온 스터디엔 생각보다 많은 사람이 있었고 그만큼이나 열심히 노력하시는 러너님들이 가득했다. 2.사실 스터디 초반엔 이미 다 알고 있는 부분이라 생각해 적당히 강의를 봤던 적도 있었다.그리고 첫 과제를 진행하는 순간 내가 왜 이 스터디를 신청했던 건지 몸소 느낄 수 있었다.생각보다 과제는 하루이틀만에 끝낼 수 없었고 남은 기간 동안 얼마나 할 수 있을지 계산적으로 생각하기도 했지만, 이게 무슨 의미인가 싶어 반쯤은 체념하고 대신 열심히만 하자고 마음을 먹었다.그런데 적당히 포기하고 마음을 놓으니 오히려 오기가 생겼던 것 같다.그 뒤로부터 출근하면서 강의 보고, 퇴근하면서 강의 보고, 집에 와서 과제하고, 주말에는 더 몰아서 강의 보고 과제하고...며칠, 몇 주를 그렇게 지냈다. 3.퇴근하고 디스코드에 들어가면 늦은 시간에도 늘 접속해 계셨던 몇몇 러너님들이 계셨는데 하루쯤 쉴까 싶은 날에는 그런 러너님들을 보며 나를 바로잡곤 했다.그중 한 러너님께서 사이드 프로젝트 인원을 모집한다는 글을 올리셨고, 또다시 나를 밀어붙이기 위해 과감하게 연락을 드려 좋은 기회를 가지게 됐다.이번 워밍업 스터디를 신청하길 잘했다고 가장 크게 느꼈던 점은 정말 많은 분들이 개발에 대해 공부하고 있고 실천하고 있다는 걸 눈으로 확인하고 몸소 느꼈던 부분이 아닐까 싶다.게다가 생각지도 못 했던 우수 러너가 되었다..!나를 선정해주신 코치님에게 감사한 마음과 그만큼 앞으로 더 잘해야겠다는 다짐을 다시 한번 하게 됐다.우연한 기회에 만난 인프런, 그리고 스터디가 내게 많은 전환점이 될 수 있을 것 같아 감사하다는 말씀을 전하고 싶다. 4.사실 원동력의 팔할은 나보다 더 노력하는 러너님들을 향한 시샘과 존경이었다.

프론트엔드･인프런･인프런워밍업클럽･스터디0기

[인프런 워밍업 클럽 0기] BE 후기

여느 때처럼 인프런 강의를 들으러 사이트에 들어왔더니 인프런 워밍업 클럽을 모집한다는 배너가 보였습니다. 혼자 공부를 하다 보니 목표를 세워도 미루기도 하는 식이였는데 인프런 워밍업 클럽에 참여하면 미션도 있고 미니 프로젝트도 있다고 하여 참여하였습니다. 앞부분은 아는 내용도 많아서 쉬웠지만 뒤로 갈 수로 공부하며 진행하였고 내가 궁금했던 부분들은 이미 다른 분들이 질문을 해서 답변을 얻은 것들을 보면서 공부했습니다. 중간중간 코치님의 라이브를 통해 현재 회사에서는 어떻게 일을 하고 어떤 것을 사용하고 문제를 어떻게 해결하는지 등 많은 내용을 공유해 주셨고 마지막 라이브 때는 열정적으로 2시간 40분 정도 라이브를 해주셨습니다. 열정적으로 알려주셔서인지 시간이 너무 빨리 간 느낌입니다. 수료식 때는 온라인으로 참여하였고 여기서도 많은 것을 알 수 있었고 많은 도움을 받을 수 있었습니다. 러너 분들이 포기하지 않고 완주 목표를 달성할 수 있게 도와주시고 배려 해주시는 운영진분들, 하나라도 더 알려주시는 코치님 그리고 열심히 참여하셨던 러너 분들과 함께할 수 있어서 뜻깊은 시간이 된 것 같습니다. 다음에도 기회가 된다면 참여하고 싶습니다.

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

[인프런 워밍업 클럽 BE 0기] 후기

인프런 워밍업 클럽 후기 이제 막 스프링 부트에 대한 지식을 쌓기 시작한 단계라서 이것저것 어려운 점들이 많았는데 이번에 인프런 워밍업 클럽 스터디를 진행한다는 소식을 듣고 지원하게 되었습니다. 솔직히 처음에는 제가 이 스터디를 잘 따라갈 수 있을지도 의문이었고, 중간에 뒤쳐지진 않을까 걱정도 되었습니다. 그런데 의외로 생각했던 것 만큼 어렵지 않았고, 강사님께서도 정말 쉽게 설명해주셔서 이해하는 데 큰 무리가 없었습니다. 또한 7일차에 거친 과제들과 8일차부터 진행한 미니 프로젝트를 통해 배우는 것에서 그치지 않고 직접 실습 하여 조금 더 제 것으로 만들 수 있었고, 이러한 과제들이 제가 강의를 듣는 데에 소홀해지지 않도록 도움을 준 것 같습니다. 또한 중간중간에 진행했던 Q&A를 통해서 공부를 하다가 막힌 부분이나 더 궁금했던 부분에 대하여 강사님께 직접 물어보고 바로 답을 얻음으로써 몰랐던 지식들을 채워나갈 수 있었고, 특히 다른 러너분들께서 질문 하시는 것들이 궁금했던 것 이외에도 도움이 될 만한 질문들이 많았어서 덕분에 여러 지식을 얻는데 큰 도움을 얻었습니다. 이번 3주간의 인프런 스터디의 경험은 스터디를 시작하기 전과 후의 저가 많이 바뀌게 해주었고, 그만큼 저에게 매우 유익한 시간이었습니다. 다른 러너분들과 함께 지식도 공유하고, 계속해서 스터디를 진행한 결과 이전에는 이해하지 못했던 이론이나 깨닫지 못하는 것들을 시간이 지나고서 이해하게 되었고, 스프링 부트의 전반적인 구조에 대해 익힐 수 있었습니다. 덕분에 이제까지는 들어도 무슨 소리지 했던 내용들이 지금에서는 완벽하게는 아니지만 어떤 내용인지에 대해서는 이해할 수 있게 되었을 정도로 성장했음을 느낍니다! 솔직히 가끔 나태해 질 때가 몇 번 있었는데 다른 러너분들께서 적극적으로 질문도 하시고, 과제나 발자국 제출 등 열심히 하는 모습들을 보니 저도 열정을 넘겨받아 더욱 열심히 참여하게 되었습니다. 평소에 혼자 공부하는 편이었어서 하기 싫을 때 그냥 던져 둘 때가 많았었는데 함께하는 러너분들이 있어서 저도 의지가 계속해서 생겨나서 끝까지 도달할 수 있었습니다. 짧지만 정말 좋은 경험이었고, 다음에도 인프런 스터디를 진행하게 된다면 꼭 참여하고 싶습니다!!

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

인프런 워밍업 클럽 후기

독학도 하면서 부트캠프 하는 와중에, 뭔가 새로운거에 도전하고 싶었습니다. 그와중에 인프런에서 워밍업 클럽이라는것을 한다고 하기에 참여하기로 결정을 했습니다.결론적으로 말하자면 뜻밖에 좋은 스터디 공부였다고 생각합니다.스터디 하기 전에 강의는 옛날에 다한 강의 였지만, 진도표를 보고 다시 복습하고 그 내용에 맞는 과제를 하면서 내가 무엇이 부족하고 그 동안 공부한것을 정리하는 시간을 가지게 되어 좋은 개발자로 한발자국을 내딛을 거라 생각합니다. 또한, 무엇보다 중간 Q&A 한 다는 것을 까먹어서 처음거는 놓치고 두번째 부터 참여했습니다.온라인 라이브 세션에서 코드 리뷰나 질문에 대해 자세히 설명해주셔서 배울게 너무 많구나 생각하면서 유익한 시간을 보낸거 같습니다.물론 강의랑 과제는 다했으나 완주 러너에 대상이 안되었지만, 이런 스터디는 처음 참가하는거라 신선했으며 좋은 경험을 얻었다고 생각합니다. 여러 사람들의 코드를 보면서 내 코드와 비교하는것도 좋은 경험인거 같습니다.수료식은 온라인으로 했습니다. 인프런 참여 행사는 거진 판교인거 같아서 시간도 너무 저녁이고 멀기에 가지 못 한게 아쉽네요. 시간적으로 낮이나 장소를 홍대나 서울 안쪽에서 했으면 갈 수 있을거 같은데 항샹 판교에 하신거 같아 참여하기 힘든거 같습니다. 결과적으로, 인프런 워밍업 클럽에 참여한 것은 좋으 결정이었습니다. 그 동안 독학과 학교 공부와 부트 캠프로 해왔지만,거기서 얻지 못 한 경험이 있기 때문에 유익했습니다. 다른 분들이 적극적으로 하시는 분들도 계시고 물론 저는 소극적인 성격때문에 잘 못한게 문제였지만, 유익한 지식을 주신 코치님들과 운영을 영실히 하려는 인프런분들과 여러 수강생분들이 있어 뜻깊은 시간을 보낸거 같습니다. 다음에도 기회가 있으면 참여하고 싶습니다.

인프런･인프런워밍업클럽･스터디0기

[인프런 워밍업 클럽 BE 0기] 인프런 워밍업 클럽 후기

[인프런 워밍업 클럽 후기]인프런 강의를 듣던 중 인프런 워밍업 클럽을 모집한다는 소식을 듣고 고민하다가 결국은 도전해보자하여 듣게 되었는데 많은 것을 얻었던 시간이였습니다. 2일차부터 과제를 제출하는데 굉장히 어려움이 있었고 강의를 듣는 시간보다 그 과제를 제출하기 위해 공부했던 시간이 거의 4배는 되었던 것 같습니다. 질문도 하나씩 읽어보면 이해가 안가서 '기본지식도 없이 뛰어든 사람은 나뿐인가? 다른분들은 다들 너무 잘하시는 것 같은데'라는 생각이 들기도 하였습니다. 그래도 시간을 할애하다보니 조금씩 이해가 되어가기 시작했고 거의 마지막 주에 다시 질문들을 읽어보니 이해가 가고 도움을 얻기도 하였습니다.중간에 1차 OT를 까먹고 못들어서 스트레스도 굉장히 받았는데 그래도 포기하지 않고 과제를 제출하고 강의를 듣다보니 만회할 기회를 주셔서 감사하였습니다. 그리고 다른 분들의 코드를 보면서 정말 다양한 방법으로 풀어나가는 모습을 보면서 신기하기도 하였습니다. 그러면서 문제를 푸는데 있어서 새로운 방법을 알게되기도 하였습니다. 미션이 없었다면 사실 강의를 이해하지 못한채로 끝나지 않았을까 싶기도 합니다. 다른 러너분들도 열정이 넘치셔서 같이 얼떨결에 끌려간 것 같지만 정말 후회는 되지않는 수업이였던 것 같습니다. 마지막까지 열심히 Q&A를 진행하시는 모습을 보고 많은 감동을 느꼈습니다. 정말 감사합니다!

인프런･인프런워밍업클럽･스터디0기

[인프런 워밍업 클럽 0기 BE] 오프라인 수료식 후기

[오프라인 수료식 후기]3주간의 시간이 지나고, 워밍업 클럽 스터디가 끝나면서 오프라인 수료식을 다녀왔다.[첫번째 순서]낯을 조금 가리는 탓에 처음 도착해서는 앉아서 멀뚱멀뚱 사무실만 구경하고 있었다.감사하게도 같은 테이블에 계신 러너분께서 먼저 대화를 걸어주셔서 수료식 시작 전까지 신나게 대화하였고,다른 러너 두분께서 추가로 오셔서 첫번째 순서인 저녁 식사를 하며 또 다시 수다 타임을 가졌다.[두번째 순서]식사를 마치고 두번째 순서는 지식 공유자분들의 Q&A 타임이었다.질문은 사전에 러너분들께서 작성해주신 질문에서 몇개 골라 선정된 질문들이었다.취업에 관한 질문, 개발자에 대한 질문 등등 여러가지 질문들이 있었는데, 그동안 내가 많이 고민했던 질문들이 많았고내가 고민했던 것과 지식공유자분들이 답변해주신 것과 일치해서 조금은 안도(?) 하였다.🤣[세번째 순서]이후 세번째 순서는 우수러너 시상식이었다. 나는 처음부터 우수러너에 대한 기대는 크게 없었다.블로그도 누군가에게 보여주기 보다는 내가 공부하고 기록하는 곳으로 사용했고 깔끔하게 작성하는 편도 아니다.열심히 해보겠다는 의지는 강했지만 실력자분들이 많아 이런 쉬운 질문을 해도 될까? 라는 생각에 질문을 망설였다.(조금 더 찾아보니 혼자서도 충분히 해결 가능했던 질문들이 많았다ㅎㅎ)위와 같은 이유로 우수러너는 포기하였고, 완주와 내 실력 향상에 초점을 맞추어 묵묵히 열심히 하였다.그런데!!우수러너 명단에 내 이름이 있던 것이었다!!감사하게도 우수러너로 선정되어 인프런의 귀여운 굿즈를 받게 되었다!다시 한번 감사드립니다.[마지막 순서]그렇게 기쁜마음으로 시상식을 마치고 마지막 순서인 네트워킹을 가졌다.조별로 나누어 앉았고 각 조별로 코치님과 인프런 개발자 한분씩 들어가 네트워킹을 가졌다.내가 있던 테이블에는 인프런에서 5년째 일하고 계신 프론트엔드 개발자분이셨고,현재 취업 시장이 어떤지, 현업에서는 어떻게 일하는지 등등 유익한 이야기를 나누며 수료식은 끝이 났다.[스터디를 하면서 느낀점]그동안 공부하면서 이해되지 않았던 부분이 이번 강의를 통해 이해가 되어 고구마 100개 먹은 가슴이 뻥 뚫렸고,궁금한 부분에 대해 해결하고 고민하는 방법을 얻을 수 있어서 좋았다.이전엔 오류가 나고 해당 매서드에 대해 궁금하면 무작정 인터넷을 먼저 찾았지만이제는 해당 매서드에 들어가서 어떤 것들로 구성되어 있고, 해당 오류는 어떤 오류인지 공식문서나 해당 코드를 통해먼저 생각하고 고민해보는 습관이 형성되어 좋았다.짧다면 짧고 길다면 긴 3주동안 재미있게 공부하며 즐겼던 스터디였다.스터디를 진행해주시고 늦은 시간까지 수료식을 위해 자리를 만들어주신 인프랩 임직원분들,바쁘실텐데 중간 중간 깜짝 특강을 진행해주시고 예정된 시간이 지나도 목소리가 쉬어가며 질문과 정보 전달을 위해열정을 보여주신 최태현 코치님께 감사인사 드립니다.그리고 3주간 함께 달리신 러너분들 고생 많으셨습니다!😁

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

인프런 워밍업 클럽 후기

[인프런 워밍업 클럽 참여 후기]부트캠프를 마치고 독학 중인데, 제대로 공부하고 있는지 의문이 많았습니다. 그래서 인프런 워밍업 클럽에 참여해보기로 결정했습니다. 이 스터디에 참여한 경험은 정말 값진 것이었습니다.먼저, 진도표를 따라 매일 강의를 수강하고 발자국을 작성하는 것이 매우 도움이 되었습니다. 주말에는 과제를 마무리하고 발자국을 작성하는 시간을 가지면서, 내가 어떤 것을 배웠는지 정리할 수 있었습니다. 이를 통해 제 학습 내용을 정리하고 실제로 습득한 지식을 확인할 수 있었습니다.또한, 온라인 라이브 세션에서는 코치의 특강이나 Q&A 세션을 통해 중간 점검을 받을 수 있었습니다. 코치와 함께 진도를 되돌아보고 질문에 대한 답변을 듣는 것은 매우 유익했습니다. 그리고 스터디의 끝을 알리는 수료식에서는 이 스터디를 통해 얼마나 발전했는지를 되돌아보는 소중한 시간을 가졌습니다. (온라인으로 수료식을 참가해서 아쉬웠습니다 ㅠ)가장 인상 깊었던 점은 코치님들이 직접 제작한 미션을 수행하는 경험했었습니다. 이를 통해 배운 내용을 다시 한 번 복습하고 응용하는 기회를 가질 수 있었습니다. 또한, 다른 참가자들의 발자국을 보면서 서로의 학습 경험을 공유할 수 있어서 좋았습니다.총론적으로, 인프런 워밍업 클럽에 참여한 것은 매우 값진 경험이었습니다. 부트캠프를 마치고도 지식을 유지하고 발전시키기 위한 좋은 방법이라고 생각합니다. 다른 분들에게도 적극 추천하고 싶습니다.유익한 지식을 주신 코치님들, 스터디 클럽을 위해 힘써주신 인프런 분들, 같이 달린 학생들, 또한 이 글을 읽어주신 분들 모두 감사합니다.

인프런･인프런워밍업클럽･스터디0기

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

4L 회고Like (좋았던 점): 피그마를 독학할 때 유튜브에 짧게 널려 있는 영상을 보고 하나하나 적용하느라 힘든 부분이 꽤 많았는데 정말 작은 부분(컬러)부터 차근차근 배우니까 많이 도움이 된 것 같았다.Learned (배운 점): 배리어블 자체를 처음 써보았고 컬러 차트를 내가 만들 수 있는지도 처음 알았다. 그리고 이름 짓는 규칙(?)이나 간격 척도의 종류와, 아이콘 유니온도 처음... 😿 2챕터 후반부나 3챕터 초반은 나름 알던 것이라 괜찮았지만 앞 개념들을 따라가면서는 정말 많이 배웠다 (하나도 몰라서 ㅜ.ㅜ)Lacked (부족한 점): 일단 4학년이라 수업을 많이 듣는 것은 아니지만 졸작을 병행하느라 강의가 많이 밀렸다. 어느 정도 진행된 졸작에서 큰 이슈가 터져서 주제를 갈아 엎어야 했다. 그래서 강의 공부할 시간이 갑자기 증발했었고.. 또한 강의 내용을 나의 개인 노션에 적으면서 진행되었는데 이렇게 들으니까 시간이 다섯 배는 더 걸린 것 같았다. 볼드 강사님께서 따로 정리해 주신 노션을 적극 활용해서 실습과 발자국 작성에 시간을 쓰는 것이 맞는 것 같다.Longed for (바란 점): 첫 주차라 시간 분배를 1도 못하고 정말 엉망진창에 내가 이거 다 끝낼 수 있을까? 싶었지만 꼭 완주할 수 있도록 틈이 날 때마다 부담없이 공부해야겠다는 생각이 들었다 파이팅😂 앞으로는 꼭 주어진 일정대로 강의를 듣자... 🙉 강의 필기한 것 중에 중요한 / 여태 몰랐던 것들만 발췌했다! 배리어블디자인 토큰이나 프로토타이핑 툴의 기능을 함디자인 토큰이란?“모든 UI 요소의 기본 구성요소”로써 근원의 역할을 하는 작고 반복 가능한 디자인 결정전자 - 원자 (버튼, 라벨, 필드 등) - 분자 (앞의 것들을 결합한 것) - 유기체 - 템플릿 - 페이지 - UI디자인 토큰 : 전자에 해당색상, 폰트, 테두리, 그림자 효과 등 ⇒ 디자인 세팅 !! 배리어블 이름 구조← 의미, 논리, 모듈화, 일관성 (헷갈린닥,,ㅜㅜ)Namespace : 시스템 구분System 접두어, 모든 토큰 앞에 붙음Object(특정) Component : 컴포넌트 적용하고 싶을 때 중간Base : 디자인의 구성 요소 나타냄Category - Property(각 카테고리 내 세분화) : 기본적인 디자인 구성 요소Modifier : 그것의 변형 값을 보여줌Vraint(시각적 위계질서 primary-secondory-tertiary), State(인터랙션 상태), Scale(숫자나 사이즈, 강도 등) : 하나의 디자인 요소를 여러 상태에 따라 변형예시) 근데 카테고리 옆에 무조건 프로퍼티가 나오는 건 아닌.. styles to variable 플러그인styles to variable 플러그인styles에서 가져오는 방법primitive에는 배리어블에 무조건 기본 값이 들어가야 함 = row한 헥사 코드theme 컬러 : 브랜드semantic 컬러 안에 text / bg / icon / border별로 만들어 주기.. 그 안에 또.. 핵심 .. semantic 컬러 내부 분류 잘 하기 여러 상황 - 역할에 따라,,variable에서 scope 조절 설정 하면 해당 스코프에서만 색깔 보임컬러 스타일을 킵 하고 싶으면 상위 폴더를 만들고 앞에 .(점) 붙이기 ⇒ 나중에 퍼블리싱 할 때 안 빠져나감 (안 쓸 거면 그냥 지우기!!)나중에 아이콘 Union에 관해 더 자세히 배울 것⇒ 이렇게 컬러를 짜게 되면 수치와 컬러 이름 같은 raw 컬러를 보여주는 것이 아니라 시맨틱한, 의미있는 이름을 보여주기 때문에 컬러 속성을 넣을 때 쉽고 일관적임다시 automatic style guides 플러그인을 써서 새로운 페이지 만들기

UX/UI･피그마･인프런워밍업클럽

[워밍업 클럽 0기 - 백엔드] 참여 후기

"인프런 워밍업 클럽 0기 - 백엔드" 참가 후기입니다.참가한 계기참가하게 된 계기는 기본기를 기르고자하는 마음 60%, 호기심 40%? 때문입니다.백엔드 프로그래머를 지망하는 만큼 자바로 실무를 하게 될 가능성이 높은데 이때까지는 이상하게 FastAPI, NestJS, ASP.NET과 같은 프레임워크를 많이 사용했었습니다.그러면서도 자바는 상당히 익숙했습니다.학교 수업을 들으며 자바로는 오히려 Client 프로그래밍을 훨씬 많이 한 것 같습니다. 학우들은 자바를 다 알아서 눈에 보이는 작업물을 보여주기에는 자바 Swing만한 것이 없었던 것 같습니다...아무튼 학교를 빠져나와서 백엔드 지망하는 분들이랑 얘기나 스터디를 하다보면 항상 예제로 나오는 것이 스프링이었습니다. DI, 컨테이너와 같은 컨셉도 소개될 때마다 예시로 등장하는 것이 스프링이고 스터디를 하다가도 다른 분이 예시로 보여주는 것도 스프링일만큼 매일 등장해서 아.. 계층 나누고 주입해주는 것은 비슷한데 자바가 훨씬 자료가 많고 추상화가 더 잘되어있구나 싶었습니다. 안 해봐서 잘은 모르지만 무엇보다 완성도가 높은 느낌이 들었습니다... 몇 년 전에 Node 진영에 ORM을 공부할 때는 자료가 너무 없어서 JPA 코드를 보면서 공부했기도 했습니다.프로젝트 끝날 때마다 Spring Boot는 해보려고 마음 먹고는 했는데 이번 기회에 입문했습니다. 기본적인 개념도 익히고 적절하게 매일 1시간 정도 과제를 고민하고 해결하며 직접 코드를 짜볼 수 있어서 좋았습니다. 다른 스터디 참여자분의 과제 코드도 볼 수 있어서 공부가 많이 된 것 같습니다.다른 프레임워크에서 넘어온만큼 보이는 것도, 예전에 제가 실수한 것도 떠올라서 강사님의 라이브 영상이나 Q&A 내용을 보면서도 많은 팁을 얻었습니다.참가하며 남긴 기록들학교가 개강하고 다른 취준 일정이랑 겹치면서 점점 시간에 쫓기고 빨리해야 했어서 마지막에 몰아서 해버렸지만 후... 아무튼 완강까지 성공했습니다.후기강의는 백엔드 개발에 입문하는 사람이 대상입니다. 그렇다 보니, Git, HTTP나 서버-클라이언트 등의 개념도 입문자를 위한 설명을 포함됩니다. 다른 MVC 프레임워크 경험한 분은 30~50% 정도는 익숙한 내용일 수도 있을 것 같습니다. 개념에 맞춰서 잘 쪼개어 있고 강의 설명이 정말 깔끔합니당.. 이런 분이 강의를 하시구나 했습니다. 저는 아무래도 시간에 쫓기며 웹 개발을 많이 했기에 여러 내용들은 점검해가는 과정이라 생각하고 열심히 수강했습니다.그래도 난이도가 낮은 경우 빠르게 보고 덮은 다음, 스스로 찾아보면서 코드를 구현해보았습니다. 매일 라디오 듣듯이 따라가며, 다른 유사 MVC 프레임워크에서 추구했던 것도 비교하며 학습했습니다. 다른 분들의 질답도 많은 공부가 되었습니다. 고민의 깊이가 다르시더라고요!!배운 것최종적으로는 자바의 역사와 주변 지식, JDSL, Lombok, 코드를 보는 관점 등 여러 키워드를 얻을 수 있어서 유익했습니다.이전에는 VSCode를 많이 썼는데 이 참에 인텔리제이의 단축키도 익숙해질 수도 있었습니다.자바에서 자주 쓰는 단축키 CheatSheet을 만들어보는 것은 어떤가요?다른 사람의 과제랑 코드를 볼 수 있는 것도 좋은 경험이었습니다. 스터디를 매우 열심히 참여하시던 분들이 많아 놀랐습니다. 그러다보니 저도 기운을 받아서 더 공부하고 찾아봤던 것 같습니다ㅎㅎ.앞으로도 파이팅해서 만들고 싶은 프로젝트를 하나 만들어보려고 합니다. To Inflearn, 최태현 지식 제공자님. 재밌고 유익한 스터디 만들어주셔서 감사합니다!

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

[인프런 워밍업 스터디 클럽 0기_BE] 후기

3주간의 스터디가 끝이났다. 정말 많은 걸 배울 수 있었고, 새로운걸 경험해 볼 수 있었다. 1. 코치님0기 백엔트 코치님은 최태현 코치님이다. 이전 찍으셨던 몇개의 강의(사실 전부..ㅎㅎ) 를 통해 내적 친밀감이 쌓여있었는데스터디 코치님 이라는 이야기를 듣고 꼭 스터디에 참여하고 싶다는 생각이 들었다. 강의를 통해서도 정말 많은걸 알려주시려 하고, 질문도 매우 친절하게 답변해주셨었는데 스터디를 진행하면서도 코치님은 질문 뿐만 아니라특강을 통해서 정말 많은걸 알려주시려고 하는 모습이 정말 대단하다고 느껴졌다.👍 현업에서 일을 하시면서 늦은 시간까지 이어지는 질문에도 친절하게 답변해주시는 모습을 보면서 나도 저런 좋은 영향력을 주위에 끼칠수 있는 개발자가 되고 싶다는 생각이 들었다. 2. 코드리뷰스터디를 처음 시작할때 커리큘럼을 보고 미니 프로젝트를 진행할때 다른 분들과 함께 코드리뷰를 하며 진행하면 어떨까?라는 생각이 들었었다. 할까말까 고민을 정말 많이 했었는데 개인적으로도 코드 리뷰를 해보고 싶었고, 좀 더 이 스터디기간동안 많은걸 배우고 싶어 용기를 내어 함께 진행해 볼 인원을 구했었다. 정말 다행히도 5분의 스터디원 분들이 함께해보자고 하셨고, 결과적으로 너무 만족스러운 시간을 보낼 수 있었다. 내 코드를 다른 사람에게 보여준다는건 지금도 쑥쓰럽긴 하지만 그렇기 때문에 코드 한줄을 작성할때도 정말 많은 생각을 하면서 작성할 수 있었다. 그리고 그 고민했던 내용을 함께 나누면서 정말 많은걸 배울 수 있었다. 다시 한번 함께 미니프로젝트를 진행했던 백엔드 스터디원분들 에게 감사하다는 말을 전해고 싶다.🙇‍♂ 3. 인프런보통의 회사에서 하기 어려운 이런 좋은 영향력을 전파하고 만드는걸 할 수 있다는게 늘 놀랍다. 해커톤이나 개발자 컨퍼런스 후원 기업에 매우 자주 인프런이 있는걸 볼 수 있고, 직접 인프콘 이라는(한번도 가보지 못했다. 나는왜 운이 없는것인가..💧) 큰 컨퍼런스를 열기도 하고. 전반적으로 개발자 생태계에 정말 좋은영향력을 널리 퍼트리고 있는 모습을 보면 정말 대단한 기업이라는 생각이 든다. 생각은 누구나 할 수 있지만 이걸 실천할수 있다는게 참 놀랍다. 이번 스터디도 그렇고 앞으로 더 많은 좋은 영향력을 널리 퍼트리려고 다양한 시도를하고 있는 모습을 보고 있으면 언제가는 인프런에서 일을 꼭 해보고 싶다 라는 생각이 듣다.(자바 개발자 안필요 하신가요💧) 4. 0기앞으로 이 워밍업 클럽이 0기에서 멈추는것이 아니라 1기 2기 쭉쭉 더 많은 사람들에게 좋은 경험이 될 수 있도록커져갔으면 좋겠다. 다음에 더 좋은 스터디가 열린다면 주변에 적극 추천해주고, 나도 다시 한번 참여해봐야겠다. 5. 마무리좋은 기회를 만들어주신 인프런 관계자 분들에게 정말 감사드린다. 특히 스터디 운영에 대해 이런저런 공지와 궁금증을해결해주신 셰리 에게 감사의 인사를 전하고 싶다. 더 많은걸 알려주시려 했던 최태현코치님 그리고 함께 했던 모든 백엔드 스터디 원 분들에게도 다시 한번 감사하다는 인사를 전하고 싶다. 주저리주저리 말이 많아졌는데, 혹시라도 미래에 있을 1기 신청을 고민하며 이 글을 보고 있다면 당장 신청 하라고 적극 권해 주고 싶다.

웹 개발･인프런･인프런워밍업클럽･스터디0기･백엔드

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

1주 차 강의먼저, 피그마 베리어블과 디자인 토큰/디자인 시스템 개념에 관한 강의를 들었다. 피그마를 자주 사용하고 있었으나 "로컬 스타일"만 사용하고 있었다. 베리어블은 사용하기 꽤 어렵다고 생각하고 있었다. 하지만 색상, 간격, 타이포그래피, 아이콘 등 강의를 들으면서 순서대로 따라 하다 보니 앞으로 어떻게 써야 하는가에 대해 알게 되었다. 특히, 회사에서 업무를 하면서 "타이포그래피"를 직접 만들고 정하는 게 어려웠는데, 플러그인을 통해서 쉽게 할 수 있다는 것을 알고 바로 적용해 봐야겠다는 생각이 들었다. 미션이번 주 미션은 스타일 가이드 문서 제작을 위해 다양한 베리어블을 만들고 등록하는 것이 미션이었다. 처음에 미션만 보고 '이걸 직접? 전부 다 할 수 있다고?'라는 의심으로 시작했는데, 차근차근 설명해 주시고 플러그인을 통해 작업을 하다 보니 쉽고 빠르게 할 수 있었다. 가장 좋았던 것은 하나씩 등록하는 과정을 결과적으로 "문서화"작업을 한 것이었다. 매번 디자인 시스템이라는 것을 만들고 싶어도 어떻게 해야하는지 모르고, 어렵게만 느껴졌는데, 이렇게 하다보면 만들어 볼 수 있겠다는 용기가 생겼다. 회고잘했던 점 강의 듣고 나중에 작업하는 게 아니라, 직접 따라 하면서 만들어 본 것 다양한 플러그인을 써보고 정리한 것아쉬웠던 점 이번에는 시간이 부족해 강의를 몰아서 들었지만, 다음에는 공부할 시간을 확보해서 들어야겠다.보완하고 싶은 점 공부하고 있는 것과 실제 실무에서 사용하는 것을 연결해서 생각하고, 작업해야겠다.

UX/UI･Figma･인프런워밍업클럽

[인프런 워밍업 클럽_0기] 3주차, 세 번째 발자국 #3

3주차 요약 : 직장인은 집중하기 힘든 코스인 걸 느꼈다..!강의 요약은 notion에 정리해두었다. https://www.notion.so/d2e9b3e27b3348abbde60994cf627ebd Day 11. 객체지향과 JPA 연관관계기존 코드를 리팩토링하면서 객체지향적인 개발이 무엇인지 조금이나마 체험할 수 있었다.객체지향의 사실과 오해에서 나왔던 '객체의 메시지'를 드디어 체험하게 되었다.JPA 연관관계 및 연관관계의 주인이 되는 기준에 대해서 알게되었다.연관관계에 주인이 아닌 쪽에는 mappedBy 옵션을 줘야한다.개념은 언뜻 알고있었지만 연관관계의 주인을 정하는 기준을 이렇게 정확하게 알게된 건 처음이다.연관관계의 주인은 Table을 보았을 때 관계의 주도권을 쥐고있는 쪽이 연관 계의 주인이 된다.연관관계 주인에 의해서 객체가 연결되는 기준이 된다.연관관계의 주인 객체에서 연결되는 다른 객체의 setter를 만들어 저장하면 데이터 저장이 정상적으로 잘 된다....!연관관계를 setter로 연결 후 Transactional이 아직 끝나지 않은 시점에서 그 반대인 객체에서 주인 객체를 getter로 가져오면 null이 반환된다. -> DB 상에서는 아직 저장이 되지 않아 데이터가 없기 때문해당 문제를 해결하기 위해서는 Setter를 한 번에 둘 다 연결해주면 된다.cascade 옵션과 orphanRemoval 옵션에 대해 알게되었다.도메인 계층에 비즈니스 로직이 들어가도 된다는 걸 알게되었다. 뭔가 도메인 계층은 깨끗한 상태로 getter와 생성자 외에는 추가적인 메서드가 있으면 안될 것 같았는데 그러지 않아도 되는 것 같다.리팩토링 후 Service 계층에서 오만가지 도메인을 불러와 직접 처리해주었던걸 리팩토링 하면서 연관 관계를 사용해 최대한 도메인들끼리 직접 협력할 수 있게 코드를 변경한 진귀한 경험을 했다. -> 객체지향의 사실과 오해..! 짱지연로딩의 개념과 다양한 옵션들에 대해 알게되었다.연관관계 사용이 100% 정답이 아닌 걸 알게되었다.비즈니스 요구사항, 기술적인 요구사항, 도메인 아키텍처 등 여러 부분을 고민해서 연관관계 사용을 선택해야 함.실무에서 경험이 쌓여야 판단이 가능할 것으로 보인다. 과제는 따로 못했다..! 야근이 날 괴롭혀서 강의도 겨우 들었기 때문....ㅜDay12. 기본적인 배포를 위한 준비배포의 개념에 대해서 알게되었다.profile 기능을 사용해서 H2와 Mysql 관련 설정을 분리하였다.git과 github의 개념과 차이점을 알게되었다.git의 기초 사용법을 다시 한 번 리마인드하는 시간이 되었다.git은 사용해봐서 기초 사용법을 알고 있는 상태였다.AWS의 EC2를 난생 처음 사용해봤다. 과제는 따로 하지 못했다.. 이날도 아마 야근했던 거 같다... 😢Day13. AWS와 EC2 배포AWS에서 리눅스 명령어를 다뤄봤다.AWS에 콘솔에 접근하는 방법을 알게되었다.리눅스 명령어 중에 권한 관련 명령어가 좀 어려운 것 같다. 추가적인 공부가 필요한듯.배포를 위한 프로그램 설치는 Java, mysql, git이었는데 mysql을 설치할때 좀 곤욕이었다. 강의 영상과 현재 ec2 리눅스 버전이 달라서 그런건지 강의에 나오는 명령어를 입력하면 에러가 나서 블로그 이것저것을 검색해봤다. 난생 처음 CLI로 빌드를해봤다. 빌드할 때도 영상을 그대로 따라서 하면 에러가 발생했다. 영상에서는 java 11을 설치했는데 내 프로젝트는 java가 17이라 java를 다시 설치해주었더니 정상적으로 빌드가 됐다.foreground와 background의 개념을 알게되었다.난생 처음 도메인을 구입해봤다.Day14. Spring Boot 설정, 버전업 이해하기build.gradle에 대해서 알게되었다.dependency configuration에 대해서 알게되었다.Spring과 Spring boot의 역사에 대해 간략하게 알게되었다.YAML 문법에 대해 알게되었다.Day15. 마무리 및 추가 꿀팁 영상공부 방향성에 대한 얘기 중 spring의 원리 및 클린 코드를 공부해야겠다고 생각했다.코틀린에 대한 관심도가 올라갔다. 조만간 코틀린에 대해서도 공부할지도?스프링 배치가 궁금해서 관련 강의를 사놨었는데 이것도 얼른 수강해야겠다.Spring boot에서 Mybatis를 사용하는 법을 알게되었다. 우리 회사 같은 경우는 옛날 기술들을 많이 쓰고 최신 기술에 대한 거부감이 있는데 이런 걸 보여줌으로써 차근차근 최신 기술로 안내하는 것도 나쁘지 않을 것 같다Client-Side Rendering과 Server-Side Rendering의 개념을 알게되었다. 완강 후기자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]를 완강했다! 🥳🥳🥳🥳뭔가 강의 제목을 딱 봤을때 진짜 엄청난 기초의 강의겠구나 했는데 강의를 들으면 들을수록 어느정도 깊이가 있어 조금 놀랐다. 오히려 기초가 없는 사람은 약간 따라하기 버거울 수도 있다는 생각이 들었다.기존 코드를 객체지향적으로 리팩토리하는 부분에서 많은 인사이트를 얻어서 뭔가 최태현님의 다른 강의들까지 들으면 남들과 조금은 다른 개발자가 될 수 있지 않을까란 생각도 들었다. 아무래도 서적에서 공부하는 것과 실무가 약간 버무러진 코드와 깊이 있는 코드를 경험하는 것은 너무 다르니까..! 아무튼 너무 기초적이지 않는 강의에 만족도가 높았다.직장인이라 잦은 야근과 피로감에 미니 프로젝트의 진도가 더디게 나가서 매우 아쉬웠다. 인프런 워밍업 클럽이 끝나도 미니 프로젝트는 개발을 계속 시도해봐야겠다.정말 유익하고 열정적인 3주였다. 나 포함 참여한 인프러너와 코치님까지!모두 3주 동안 너무 고생하셨습니다!오프라인 수료식에 참여하고 싶었지만 평일인데에다 판교라 참여하지 못하는 것이 너무 아쉽네요.온라인으로라도 참여하겠습니다열정적인 개발자분들 앞으로도 화이팅하세요🥳그리고 하루에 과제가 하나씩 있었을 때는 정말 미리 해놓지 않으면 직장인은 따박따박 당일에 수료하기 어려운 코스인 거 같아 이런 부분만 조금 개선되었으면 좋을 거 같습니다! ex) 과제는 미리 내놓되 완료 체크는 주말에 하기 같은..참고로 미니 프로젝트는 현재진행중입니다! 평일에는 시간이 없어 주말에 후다닥 개발을 하려고 하는 중입니다.https://devhan.tistory.com/327

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

[인프런 워밍업 클럽_0기] 1주차, 첫 번째 발자국 #1

1주차, 첫 번째 발자국 1주차는 어려운 내용은 딱히 없었다! 어느정도 기반기가 있었다면 다들 어렵지 않게 해냈었을 것 같다.강의 요약은 강의를 들으면서 노션에 하나하나 요약했기 때문에 노션 링크를 남긴다.https://abalone-copper-ebe.notion.site/d2e9b3e27b3348abbde60994cf627ebd?pvs=4 그래도 너무 노션 링크만 띡 남기면 정 없으니 한 번 쭉 훑어보며 하루하루 대략적으로 어떤 것을 공부했고, 어떤 것들을 알게 되었나 작성해보자. Day2 02/19 서버 개발을 위한 환경 설정 및 네트워크 기초(1~5강 + 52강)첫 날은 프로젝트 소스를 다운받고, 프로젝트의 spring boot 버전을 2.7점대에서 3.0.x로 업데이트를 진행했다.Java, IntelliJ, PostMan, MySQL, Git은 이미 설치가 되어 있어서 따로 영상을 챙겨보진 않았다.52강을 들으면서 느낀 건 안 그래도 저번에 2점대 버전에서 3점대 버전으로 마이그레이션 하려는 시도를 했었었는데, 그때는 spring이라는 프레임워크를 잘 몰랐었던 때고, 3점대가 나온지 얼마 안돼서 정보도 그렇게 많지 않아 장렬히 실패했었던 기억이 있었다. 이번에도 에러가 엄청 날까봐 걱정을 많이 했는데 강의가 잘 정리되어 있어 어렵지 않게 마이그레이션 할 수 있었다. MySQL이 원래 깔려 있어서 비밀번호 입력하는 부분만 빼면 말이다! (MySQL 오류) 본격적으로 강의를 들어가기 전에 Java를 공부하기 전에 알아두면 좋을 것들!이라는 유튜브를 두 개 시청했다. 사실 Java를 공부한지는 꽤 됐는데 JVM의 이점 부분만 대략적으로 알았지 JRE나 JDK은 스킵하고 넘어갔었다. JVM이 제일 중요하다고 알려져있으니까. 이번 강의에서 본격적인 내용을 시작하기 전에 한 번 짚어주는 유튜브가 있어서 별 거 아닌데도 갑자기 많은 생각이 들기 시작했다.나는 왜 Java를 공부하면서 이런 것들도 몰랐을까?나는 Java를 잘 안다고 할 수 있을까?대충 공부함으로써 내가 얻을 수 있는 것들이 뭐였을까?라는 생각들이 스쳐지나 갔다...! 앞으로는 조금 더 꼼꼼한 사람이 돼야 겠다는 목표도 생겼다...! 본격적인 강의 시작에서는 Spring Boot 프로젝트를 실행하는 법과 네트워크, HTTP, API, GET API를 공부했다. 강사님이 최대한 이해하기 쉽게 이것 저것 비유해가면서 얘기해주셔서 이해가 잘 됐었던 거 같다.제일 기억에 남는 것은 함수 파라미터를 변수에서 객체로 변경한 이유가 기억에 남았다. 초보 입장에서는 이런 부분을 놓치는경우가 많고, 생각조차 안 나는 경우가 많은데 이렇게 사소한 것 까지도 짚어주시면서 강의를 진행해주시니 더 꼼꼼하게 코드를 작성할 수 있던 거 같다. 미션https://devhan.tistory.com/318어노테이션에 관한 미션이었다.어노테이션을 단순히 쓰라해서 사용하기만 했는데 어노테이션의 역할이 한 개만 있는 것이 아니라 목적에 따른 다양한 종류의 어노테이션이 있다는 걸 알게되었다!강사님의 코멘트어노테이션이 '마법' 같은 일을 해주기 위해서는 리플렉션이라는 기술이 사용된다.리플렉션은 라이브러리나 프레임워크를 개발할 때 간혹 사용되는 기술로, 코드를 직접적으로 호출하지 않고 코드를 제어하는 기술이다. Day3 02/20 첫 HTTP API 개발 (6~10강) Day3에서는 GET API 이외에 POST API 개발, User 생성 API 개발, User 조회 API 개발, MySQL 사용에 대해서 공부했다.이번에도 기초적인 부분을 다루었기 때문에 딱히 어려운 것은 없었다. 강의를 따라가면서 느낀 건 API 스펙을 정하는 부분이 아주 좋았다! 다른 강의에서는 API 스펙을 정하는 부분이 없이 그냥 말로만 진행하는 강의도 다수 있었는데 이 강의에서는 미리 API 스펙을 알려주니 스펙을 보고 먼저 개발해본 다음에 강의를 들으면서 고치거나 할 수 있어서 좋았다. 미션https://devhan.tistory.com/319여태 했던 미션 중에 제일 오래 걸린 미션이 아닌가 싶다.. 왜냐면 미션 하는 중에 에러가 발생했기 때문!에러 내용은 @RequestBody 사용 시 해당 DTO 생성자에 파라미터가 한 개만 존재하는 생성자가 있고, 기본 생성자가 없어서 발생하는 에러였다.해결 방법은 @JsonCreator를 기존 생성자 메서드에 붙여주거나, 기본 생성자를 만들어주면 된다.강사님의 코멘트1번 - 본인이라면 DTO 쪽에 사칙 연산 기능을 넣었을 것이다. Service 계층의 코드를 깔끔하게 만들기 위해서는 일부 계산 로직을 DTO 쪽으로 넣는 방법을 사용할 수 있다.2번 - LocalDate를 사용! query parameter가 1개라서 바로 LocalDate를 사용해서 요청을 받을 것 같다.3번 - List를 받아보도록 연습! POST API + List 필드가 있는 DTO를 사용하면 쉽게 해결할 수 있다. Day4 02/21 기본적인 데이터베이스 사용법 (11~13강)이번 강의에서는 MySQL에서 DDL, DML을 이용해 테이블을 생성 및 삭제, 데이터의 CRUD, Spring Boot에서 MySQL 연동을 해봤다. 이번 강의에서는 에러가 발생했다! MySQL 설정 시 발생하는 에러였는데 간단한 구글링을 통해 빠르게 해결할 수 있었다. (MySQL 연동 오류) 기본적인 SQL 문법을 간단하게 훑어 넘어가는 식으로 강의가 진행됐다. 기초가 없었으면 약간 따라가기 힘들었을 것 같기도 하다!그리고 User 테이블을 생성하고 Java 코드를 메모리에 저장하는 방식에서 데이터베이스(MySQL)에 저장하는 방식으로 변경하도록 코딩했다. 이번 강의에서 람다가 처음으로 나왔는데 람다에 대해서 따로 공부해본 적이 없어서 생소하게만 다가왔다. 이번에 람다를 보면서 OT때 강사님이 얘기했던 모던자바 인 액션 책을 꼭 공부해봐야겠다고 생각했다..! 미션https://devhan.tistory.com/320 익명 클래스와 람다에 대해 알아보는 시간이었다.이번 미션을 하면서 하루라도 빨리 모던자바 인 액션을 읽어야겠다고 생각해 책을 얼른 구매했다. Day5 02/22 데이터베이스를 사용해 만드는 API (14~16강)이번 강의에서는 JdbcTemplate을 사용한 API 개발을 구현하기 위해 기존에 있던 코드들을 변경하는 강의 내용이었다.User 업데이트, 삭제 부분을 코딩하는거였는데 14강에서는 단순히 변경만 했고 15강에서는 예외 상황을 대비해 예외 코드를 추가했다! 이 코드가 제일 신기했는데, 결과가 하나라도 있으면 0을 반환하게하는 코드이다. 그리고 최종적으로 0은 List로 반환된다.결과가 0건이면 빈 List가 반환된다! 미션https://devhan.tistory.com/321이번엔 Fruit 테이블을 생성하고, 요구사항에 맞는 API들을 개발하는 미션이었다.제일 고민이었던 건 판매 여부의 컬럼명과 데이터를 0과 1로 할지 아니면 Enum을 사용해서 String으로 저장할지 고민했는데 상태값이 두 개밖에 없어서 그냥 0과 1을 사용했다.강사님 코멘트select * from table을 사용하고 덧셈을 하는 경우는 데이터베이스에서 서버로 네트워크를 타고 모든 데이터가 넘어온 이후에 서버에서 직접 덧셈 -> 네트워크 대역폭도 많이 잡아 먹고 서버의 연산 비용도 들어감.반면 sum()을 사용하면 합산 결과만 네트워크를 타고 이동하며, 서버는 그 결과를 DTO로 감싸 전송만 하면 되기에 네트워크 및 연산 비용이 훨씬 저렴하다.이런 다양한 방법을 비교할 수 있으려면 1) 일차적으로는 방법들을 알아야하고 (지식의 넓이) 2) 다음으로는 각 방법의 매커니즘을 이해해야 함(지식의 깊이)Day6 02/23 클린코드의 개념과 첫 리팩토링 (17~18강)이번 강의에서는 좋은 코드(Clean Code)의 개념과 기존에 작성했던 코드를 Layered Architecture로 변경하는 작업을 했다.클린 코드는 아직 읽어보지 않았지만 워낙 유명한 책이라 강의에서 만난게 마치 오래전에 알던 친구를 만난 것처럼 재밌었다! 이 기회에 또 읽어봐야할 책이 하나 더 늘었다..!클린 코드에서 가장 기억에 남았던 건 유명 회사 앱이 클린 코드로 코드를 작성하지 않아 점차 망해가는 얘기였다. 그런 얘기가 떠돌아다닐 정도로 코드의 깔끔함은 앞으로의 유지보수에 있어 많은 부분에서 좋은 효과를 줄 수 있다는 걸 배웠다!클린 코드 얘기는 너무 많이 들었지만 어떻게 해야 깔끔하고 좋은 코드인지 가늠하기는 어려웠다. 나는 솔루션 회사에 재직해서 spring boot를 실무에서 쓸 일이 없어서 더욱 가늠이 안 갔던 거 같다. 이번 강의를 통해 조금이나마 클린 코드로 가는 틀을 잡을 수 있어서 좋았다!그리고 또 Layered Architecture란 이름을 알게되었다. Controller, Service, Repository로 구성된 애플리케이션은 여태 수도 없이 보았던 거 같은데 이런 명칭이 있는지는 처음 알았다. 대부분 그냥 MVC 패턴이라하며 갑자기 뭉뚱그려 넘어가서 몰랐었던 거 같다. 미션https://devhan.tistory.com/322작성된 주사위 놀이 코드에 클린 코드를 적용해 리팩토링해보는 미션이었다.제일 고민됐던 것은 Dice를 클래스로 따로 뺄지 말지였다.뭔가 빼면 과하게 빼는 거 같기도 하고,,? Main 메서드에 너무 아무것도 없는 거 같아 뭔가 심심해보이기도 했다.그리고 그 다음으로 고민했던 건 한 걸음 더! 내용이었다.주사위의 범위가 달라지더라도 코드를 적게 수정할 수 있도록 하는 거였는데 사용자에게 주사위 면체의 정보를 입력받을까 하다가 그런 얘기는 나와있지 않아서 그냥 Dice 클래스에 면체와 관련된 필드와 생성자를 추가해주었다..!마지막 1주차 느낀점 정리나는 되게 무언가를 대충 아는 정도였던 거 같다.하루빨리 자바8과 관련된 책을 읽고 지식을 습득해야 할 것 같다. (람다 관련 응용이 아예 안 되는 중이다.)클린 코드의 책도 읽고 클린 코드의 감을 잡아보도록 해야겠다.직장인이라 시간적 여유가 매우 부족해서 아쉬웠다. 저번주 주말에 미리미리 진도를 안빼놨었으면 진작에 수료 기준에 벗어날 뻔했다..! 직장인이니 남들보다 더 미리미리 진도를 나가야겠다. 이번주에만 글쎄 야근을 3일이나 해서 죽는 줄 알았다...생각보다 내가 강의를 잘 따라가고 있는 거 같다. 뭐 실력적으로 잘은 모르겠지만 그래도 꾸준히 놓치지 않고 하려는 모습이 약간은 기특해보일정도! 앞으로도 놓치지말고 꾸준히해서 이번 스터디를 완주했으면 좋겠다!

백엔드･인프런워밍업클럽･스터디･최태현･자바와스프링부트로생애최초서버만들기･SpringBoot･backend

[인프런 워밍업 클럽 BE 0기] 2일차 과제

문제 1두 수를 입력하고, 다음과 같은 결과가 나오는 GET API를 만들어보자!Controller code@GetMapping("/api/v1/calc") public CalcResponse calculator(NumberRequest request){ return new CalcResponse(request.getNum1(), request.getNum2()); }Dto codepublic class CalcResponse { private int add; private int minus; private int multiply; public CalcResponse(int num1, int num2) { this.add = num1 + num2; this.minus = num1 - num2; this.multiply = num1 * num2; } public int getAdd() { return add; } public int getMinus() { return minus; } public int getMultiply() { return multiply; } }public class NumListRequest { private List<Integer> numbers; public List<Integer> getNumbers() { return numbers; } }Reuslt문제 2날짜를 입력하면, 몇 요일인지 알려주는 GET API를 만들어 보자!Controller code@GetMapping("/api/v1/week") public WeekResponse getWeek(DateRequest day){ return new WeekResponse(day.getDay()); }Dto code public class DateRequest { private String date; public DateRequest(String day) { this.date = day; } public LocalDate getDay() { return LocalDate.parse(date); } }public class WeekResponse { private DayOfWeek datOfTheWeek; public WeekResponse(LocalDate day) { this.datOfTheWeek = day.getDayOfWeek(); } public DayOfWeek getDatOfTheWeek() { return datOfTheWeek; } }LocalDate.parse(date) : yyyy-MM-dd 형태의 문자열을 LocalDate 객체로 변환 LocalDate의 getDayOfWeek() 메소드 : 해당 날짜 객체의 요일을 DayOfWeek 열거체를 이용하여 반환Reuslt 문제 3여러 수의 총 합을 반환하는 POST API를 만들어 보자!Controller code@PostMapping("/api/v1/add") public int addNum(@RequestBody NumListRequest request){ return request.getNumbers().stream().mapToInt(i -> i).sum(); }mapToInt(i->i) : 스트림을 IntStream으로 변환Dto code public class NumListRequest { private List<Integer> numbers; public List<Integer> getNumbers() { return numbers; } }Reuslt

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

[인프런 워밍업 클럽 1기] BE 5일차 과제

문제주어지는숫자를 하나를 받고 해당 숫자만큼 주사위를 돌려, 각 숫자가 몇 번 나오는지 출력하는 문제 public class Main { public static void main(String[] args) { System.out.println("주사위 면의 수를 입력하세요:"); Scanner scanner = new Scanner(System.in); int a = scanner.nextInt(); int r1 = 0, r2 = 0, r3 = 0, r4 =0, r5 = 0, r6 = 0; for (int i = 0; i < a; i++) { double b = Math.random() * 6; if (b >= 0 && b < 1) { r1++; } else if (b >= 1 && b < 2) { r2++; } else if (b >= 2 && b < 3) { r3++; } else if (b >= 3 && b < 4) { r4++; } else if (b >= 4 && b < 5) { r5++; } else if (b >= 5 && b < 6) { r6++; } } System.out.printf("1은 %d번 나왔습니다.\n", r1); System.out.printf("2은 %d번 나왔습니다.\n", r2); System.out.printf("3은 %d번 나왔습니다.\n", r3); System.out.printf("4은 %d번 나왔습니다.\n", r4); System.out.printf("5은 %d번 나왔습니다.\n", r5); System.out.printf("6은 %d번 나왔습니다.\n", r6); } } 제시된 코드를 최대한 클린하게 만들어라 public class Main { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int rolls = inputDice(scanner); int sides = inputSide(scanner); int[] results = rollTheDice(rolls, sides); resultPrint(sides, results); } private static int inputSide(Scanner scanner) { System.out.print("주사위 면를 입력해주세요 :"); int sides = scanner.nextInt(); return sides; } private static int inputDice(Scanner scanner) { System.out.print("던질 횟수를 입력해주세요 :"); int rolls = scanner.nextInt(); return rolls; } private static int[] rollTheDice(int rolls, int sides) { int[] results = new int[sides + 1]; for (int i = 1; i <= rolls; i++) { int number = (int)(Math.random() * sides) + 1; results[number]++; } return results; } private static void resultPrint(int sides, int[] results) { for (int i = 1; i <= sides; i++) { System.out.printf("%d은 %d번 나왔습니다.\n", i, results[i]); } } }주사위 면을 받을 수 있는 inputSide함수와 몇번 주사위를 굴릴건지 입력을 받을 수 있는 inputDice 함수,주사위를 돌려 결과를 저장하는 rollTheDice함수와 결과를 출력하는 resultPrint 함수로 구성했다.각 변수는 의미있는 변수명으로 바꾸고 메서드명도 그에 맞게 바꾸었다.

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

인프런 워밍업 클럽 스터디 1기 FE | 미션1, 미션2 발자국

미션1: 음식 메뉴 앱간단한 음식 목록을 카테고리 별로 분류하여 보여주는 앱📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/01_%EC%9D%8C%EC%8B%9D%20%EB%A9%94%EB%89%B4%20%EC%95%B1header, main과 같은 큰 골격을 index.html에 짜 두고 기능이 필요한 요소들은 동적으로 생성하여 DOM에 붙이는 방식으로 구현하였다.데이터 페칭을 다루는 방식이 미숙하다고 생각하여, 짧은 데이터지만 굳이 data.json 을 생성해서 페칭을 모사해보았다. HTML validator 통과, 카드 부분에 <figure>,<figcaption> 사용하는 등 시멘틱한 태그 작성 주요 로직MenuList 라는 객체 배열을 통해 메뉴 버튼을 생성하고 관리한다.init() 함수 는 앱 최초 진입시 실행되며 전체 카드 목록을 불러온다. ('All'이 디폴트) renderCard() 함수는 html 요소 템플릿을 찍어내는 함수다. 각각의 Card 컴포넌트를 생성한다.handleFilterBtn() 을 통해 버튼 id와 일치하는 foodData를 필터링한다.const renderCard = (data) => { let newCard = ""; if (data) { data.forEach((v) => { const menuItem = `<li class="card"> <figure class="card-content"> <img src="./assets/${v.image}" alt="${v.name}" class="card-cover" /> <figcaption class="card-text"> <div class="card-title"> <strong>${v.name}</strong> <div class="price">${v.price}원</div> </div> <span class="hr"></span> <p class="card-info"> ${v.description} </p> </figcaption> </figure> </li>`; newCard += menuItem; }); } return newCard; };각각의 요소를 따로 생성하기보다는 Card컴포넌트를 생성할 때 <li> 태그 이하의 자식 요소들이 많은 점을 고려하여 innerHTML 로 덩어리 템플릿을 이어붙이고 렌더링 하는 방식으로 구현하였다. 아쉬운 점 / 느낀점 :오랜만에 vanillaJS를 다뤄서 그런지 파일명과 같은 작은 부분들에서 '이게 맞나' 하는 생각의 연속이었다.프레임워크/라이브러리를 주로 사용했다고 한들 간단한 기능 위주임에도 생각보다 시간이 걸려서 아쉽다. 기능 위주로 구현하면 된다고 하셨는데 이왕이면 하는 마음을 버릴 수가 없어서 디자인도 조금씩 고민하게 된다. 간단한 기능일텐데 코드가 생각보다 길다. 더 효율적으로 짜는 방법이 있을 것 같다. 미션2: 가위 바위 보 앱컴퓨터와 가위바위보!📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/02_%EA%B0%80%EC%9C%84%EB%B0%94%EC%9C%84%EB%B3%B4%20%EC%95%B1 미션 프로젝트들을 한 레포지토리에 관리하려 하는데 root 경로에 common 폴더를 만들고 전반적으로 임포트해 사용할 reset.css 파일을 생성하였다. 주요 로직가위바위보 게임의 특성상 -1,0,1 숫자를 이용한 Matrix를 생성하여 승패를 판가름하였다.const resultMatric = [ [0, -1, 1], // rock [1, 0, -1], // scissors [-1, 1, 0], // paper ]; 기능 별 함수를 분리시켜서 캡슐화시키는 부분에 신경썼다.가위,바위,보 버튼을 눌렀을 때 화면 동작이 발생한다. 그런 의미에서 메인이 되는 함수를 뽑자면 각 버튼의 이벤트 함수라고 생각하였다. handleScissorBtn, handleRockbtn, handlePaperbtn 버튼을 보았을 때 어떤 동작이 일어나는지 한 번에 보이도록 하였고 코드는 아래와 같다. const handleScissorBtn = () => { USER_PICK = 1; COMPUTER_PICK = generateComputerPick(); calculateScore(USER_PICK, COMPUTER_PICK); resultRender(USER_SCORE, COMPUTER_SCORE); return USER_PICK; }; generateComputerPick() 0~2 사이의 난수를 리턴한다.calculateScore() 유저의 패와 컴퓨터의 패를 인자로 받아 resultMatric 기반으로 승패를 계산한다.resultRender() 승패 결과를 렌더링한다. 남은 횟수가 0이 되면 결과를 띄운다. 그 외 코드calculateResult() 게임이 끝난 후 유저가 이겼는지 컴퓨터가 이겼는지 결과만을 판단해 렌더링한다.아쉬운 부분const resultRender = (USER_SCORE, COMPUTER_SCORE) => { REMAINING_POINT -= 1; remainigPoint.innerText = REMAINING_POINT; userScore.innerText = USER_SCORE; computerScore.innerText = COMPUTER_SCORE; if (REMAINING_POINT === 0) { // 아쉬운 부분 resultText.innerText = ""; remainingBox.style.display = "none"; rcpBtnBox.style.display = "none"; selectText.innerText = calculateResult(); selectText.style.fontSize = "3.5rem"; restartBtn.style.display = "block"; return; } };남은 도전 횟수가 0이 되면 가위바위보 각 버튼과 선택하기 텍스트 등을 화면에서 숨기고 게임 결과와 재도전 버튼을 보여주어야 한다. 이 부분을 각각의 요소들을 일일이 display="none" css 처리를 하는 식으로 동작시키고 있는데, classList.add 메서드를 이용하여 코드를 줄이는 방식으로 리팩터링 할 수 있을 것 같다.또한 selectText 변수가 선택하기 텍스트를 보여주며 경우에 따라 게임 결과도 표현하고 있는데 변수명이 포괄적이지 못해 아쉽다.변수를 생성할 때는 영문 기반이라 바위-가위-보 순으로 생각하게 되는데 버튼은 가위 바위 보 순이어서 소소한 통일성 이슈가 있다. 우선 버튼 순서 빼고는 전자로 구현되어 있다. 버튼의 코드 정렬 순서와 가위바위보의 0,1,2 매칭 순서, 그리고 약어로 rsp인데 rcp라 오타나있는 부분 등 통일성 부분에서 개선이 필요하다. (rcpBtnBox) 느낀 점html 태그를 단순히 많이 생성하는 것을 지양하기 위해 body 태그에 id='root' 속성을 부여하고 DOM을 생성하려 했는데 body 안의 <script> 태그 때문에 의도한 대로 작동하지 않았다. 사소한 실수지만 React에서 요소를 렌더링 할 때 <body>를 그대로 쓰지 않고 <div id='root'></div> 를 사용하는 이유가 렌더링 공간을 따로 분리하는 의도였구나 생각한다.VanillaJs를 하면서 오히려 React의 편리함 측면에서 교훈을 많이 얻게 된다. 특히 DOM을 일일이 변경시키는 작업을 통해 React에서 상태가 변화하면 UI가 자동으로 바뀐다는 게 얼마나 경이롭고 편리한 기능인지 느꼈다.미션 1과는 달리 이번에는 모든 요소를 js에서 생성해보았는데, html 코드로 골격을 어느정도 짜 놓은 상태에서 로직을 붙이듯 작성하는 것이 html / css / js 가 기능적으로 분리되어 가독성 측면에서 적절하다 생각한다.

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

[인프런 워밍업 클럽 1기] BE 4일차 과제

문제 1하기전에 테이블을 작성을 합니다.create table fruit ( id bigint auto_increment, name varchar(20), warehousingDate date, price bigint, is_sale boolean default 0, primary key (id) ); 과일 정보 저장하는 API요청을 받기 위해 FruitRequest 를 만듭니다.@Data public class FruitRequest { private String name; private LocalDate warehousingDate; private long price; } 요청을 받고 쿼리문을 날려 저장하는 비지니스 로직을 만듭니다.@AllArgsConstructor @Service public class FruitService { private final JdbcTemplate jdbcTemplate; public void save(FruitRequest request) { String sql = "insert into fruit (name, warehousingDate, price) " + "values (?, ? ,?)"; jdbcTemplate.update(sql, request.getName(), request.getWarehousingDate(), request.getPrice()); } }FruitService 클래스를 만들어 데이터 삽입sql을 만들고 jdbcTemplate로 업데이트 해주는 비지니스 로직을 만듭니다. @AllArgsConstructor @RestController @RequestMapping("/api/v1/fruit") public class FruitController { private final FruitService fruitService; @PostMapping public ResponseEntity<?> savedFruit(@RequestBody FruitRequest request) { fruitService.save(request); return ResponseEntity.ok().build(); } } FruitController를 만들어 비지니스 처리를 완료하면 정상 응답을 내리는 메서드를 만들면 됩니다. int 와 long 사이에 long을 사용하는 이유는 표현 범위 때문입니다.long 이 int 보다 월등히 많은 수를 표현하기 때문입니다. 문제 2과일 팔리면 과일 정보 기록 API응답을 받기 위해 FruitStateRequest 클래스를 만듭니다.@Data public class FruitStateRequest { private Long id; }비즈니스 로직을 수행하기 위해 FruitService 크랠스에서 다음과 같은 메서드를 작성합니다.public void stateUpdate(FruitStateRequest request) { String fruitSql = "select * from fruit where id = ?"; boolean isFruitNotExist = jdbcTemplate .query(fruitSql, (rs, rowNum) -> 0, request.getId()).isEmpty(); if (isFruitNotExist) { throw new IllegalStateException("일치하는 과일 정보가 없습니다."); } String sql = "update fruit set is_sale = 1 where id = ?"; jdbcTemplate.update(sql, request.getId()); }먼저 해당 id로 과일 정보가 있는지 확인을 합니다.없으면 일치하는 과일 정보가 없다고 경고를 주고 있으면 업데이트 sql문으로 업데이트 쿼리를 날립니다.@PutMapping public ResponseEntity<?> FruitStateUpdate(@RequestBody FruitStateRequest request) { fruitService.stateUpdate(request); return ResponseEntity.ok().build(); }FruitController에 put요청을 받기 위한 메서드를 만들고 정상으로 수행이 되면 200 요청을 보냅니다.문제 3특정 과일 기준으로 팔린 금액과 팔리지 않은 금액 조회먼저 수행하기전 테이블에 과일 정보를 입력해둡니다.FruitController 에 과일 이름 파라미터를 받고 처리하기 위해 메서드를 만듭니다.@GetMapping("/stat") public ResponseEntity<?> isSaleStateTotalPrice(@RequestParam String name) { return ResponseEntity.ok(fruitService.getSum(name)); }서비스 로직에서 정상 수행을 하면 결과값을 반환하게 만들었습니다. 이제 비지니스로직을 FruitService에 작성해줍시다public FruitTotalPriceResponse getSum(String name) { String fruitSql = "select * from fruit where name = ?"; boolean isFruitNotExist = jdbcTemplate .query(fruitSql, (rs, rowNum) -> 0, name).isEmpty(); if (isFruitNotExist) { throw new IllegalStateException("일치하는 과일 정보가 없습니다."); } String sql = "select is_sale, sum(price) as totalPrice from fruit " + "where name = ? group by is_sale"; List<FruitTotalPriceResponse> results = jdbcTemplate.query(sql, new Object[]{name}, (rs, rowNum) -> new FruitTotalPriceResponse( rs.getBoolean("is_sale") ? rs.getLong("totalPrice") : 0, !rs.getBoolean("is_sale") ? rs.getLong("totalPrice") : 0)); long salesAmount = 0; long noSalesAmount = 0; for (FruitTotalPriceResponse result : results) { salesAmount += result.getSalesAmount(); noSalesAmount += result.getNoSalesAmount(); } return new FruitTotalPriceResponse(salesAmount, noSalesAmount);과일 이름으로 과일 정보가 있는지 확인합니다.없으면 에러를 일으키고 있다면 다음 로직을 수행합니다.과일이 팔렷는지 아닌지 확인을 위해 is_sale 그룹으로 해당 과일의 is_sale와 price 합계를 구합니다.그리고 쿼리문으로 리스트 결과를 받아 각각의 합계를 구한후 리턴합니다.매번 repository로 하던 습관으로 하다보니 간만에 jdbcTemplate 으로 하는데 꽤나 예를 먹은 과제인거 같다.

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

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

배운것Day 2 피그마 베리어블과 디자인 토큰/디자인 시스템 개념 이해하기디자인 토큰 정의디자인 토큰의 특징디자인 시스템베리어블, 스타일 활용디자인 토큰 계층구조Day 3 색상 스타일 등록 및 베리어블 등록하기로컬 베리어블 내 컬렉션Day 4 간격 베리어블, 타이포그래피, 아이콘 등록하기간격 베리어블의 기본 단위 회고칭찬할점: 잘 이해하고 넘어가고 있는 것 같다.아쉬웠던 점 + 보완하고 싶은 점: 내 스타일대로 미션을 하고 싶은데 아직 따라가기 급급해서 볼드쌤과 똑같이 따라 만들고 있다. 미션을 매일 제출하기 쉽지 않아 애초에 주말에 몰아서 할 계획이었으나 미션이 조금 밀렸다. 다다음주까지 내 페이스에 맞게 가능한 커버를 모두 할 계획이다.

UX/UI･인프런워밍업클럽

[인프런 워밍업 스터디 클럽 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주차엔 더더 화이팅! 😀

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