블로그

김 동현

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

1주차 후기우선 일주일 간 자바스크립트 강의를 모두 보면서 5개의 과제를 클리어한 나와 다른분들에게 박수를보낸다 (짝짝짝) 백엔드 0기를 참여했을때보다 더 힘들고 정신이없었던것같다. 기존에 백엔드를 공부하고있었고 자바스크립트는 이미 기억저편으로 잊혀진지 오래여서 기억을 더듬어가고 오랜만에 검색엔진을 돌리면서 코딩을 하니 시간이 더 오래걸렸다. 이번 프론트엔드 워밍업클럽을 끝내고 백엔드 프론트 모두 내손으로만든 포트폴리오를 뽑아내겠다는 일념으로 참여했는데자바스크립트가 예상보다 어려워서 놀랐다. (왜 오타가 컴파일 에러가 안나지? 같은거?) 자바와 인텔리제이 단축키에 익숙해진 나는 vscode에서 쓸수있는단축키가 ctrl + c , ctrl + v , ctrl + ` 정도 밖에없었다.  지금은 더 찾아보면서 써서 조금 더 편하게 쓰고는 있지만 아직 익숙해질려면 갈길이 먼듯하다.그래도 수정하면서 바로바로 화면에 반영되는건 조금 감동적이었다. 수정해도 터미널에 코드덩어리 밖에 나오지않는 백엔드와는 확실히 다른 재미인것같다.  1주차는 코드를 잘짜는것보다는 돌아가는 바퀴를 만드는데에 집중했던 시간이었다.어떤 코드가 잘 작성한 코드인지 주로 어떻게 작성하는지에 대한 케이스가 없으니 함수를 나열해놓게되고 각 요소들을 그냥 변수로 잡아서 무분별하게 사용했다. 이런점에서는 코드리뷰를 좀 받고 다른분들 코드를 많이 읽으면서 케이스를 쌓아가야할것같다.  앞으로2주차는 리액트를 들어가면서 또 새로운 방법에 적응하는 시간이 필요할것같다. 그리고 스터디도 시작할듯 한데 서로 코드리뷰를 하면서 다른분들 코드에서 좋은점을 보고 배워서 적용해서 점점 나은 결과물이 만들어지는 과정을 즐겨보려한다.   

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

kscold

인프런워밍업클럽 1주차 발자국

인프런워밍업클럽 1주차 발자국 강의 회고사실 최근 들어 백엔드 개발을 많이 하기도 했고 프론트엔드 개발을 할 때는 JSX 기반의 코드가 훨씬 익숙하다 보니 오랜만에 바닐라 자바스크립트를 사용하니 굉장히 어색했고 강의를 들으면서 지금까지 내가 이런 중요한 것들도 모르고 공부와 개발을 해왔다니 했던 부분이 많이 나와, 챌린지를 진행하며 많이 얻어 가야겠다는 생각이 들었다. 강의 정리강의 내용 정리에 경우 개인적으로 Obsidain이라는 메모장 애플리케이션을 너무 사랑하는 사람으로 발자국 자체에 공부 내용을 넣기는 무리가 있고 또한, 링크가 많이 되어있어 그냥 next.js 오픈소스 다운로드해서 조금 코드 수정해서 퍼블리싱 했다. 예전에 끄적였던 자바스크립트 개념 정리에 더해서 정리 중이다.www.kscold.site커밋은 이슈 얼어서 섹션 별로 개인적으로 요즘 애용하고 있는 기능인 github projects 기능을 이용했다.https://github.com/users/kscold/projects/9 1주 차 느낀 점사실 1주 차의 발자국은 성공적이지 못했다... 현시점에도 부랴부랴 열심히 따라가고 있다만... 현 대학교 컴퓨터공학과 4학년으로써 진행하고 있는 졸업작품, 동아리 스터디와 코딩 알바까지... 인생... 쉽지 않지만 우수 러너보다는 수료를 목표로 파이팅 해야겠다.너무 부족하게 진행됐던 1주 차였던 만큼 남은 기간 동안 열심히 따라가 미션 해결과 강의도 얼른 기간 내에 완주해야겠다.너무나 부족한 회고록이지만 혹시나 읽게 되는 모든 분들 파이팅입니다!

프론트엔드자바스크립트인프런워밍업클럽

이슬

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

The four Fs 🍀FACTS (사실, 객관)이번 일주일 동안 있었던 일, 내가 한 일인프런 워밍업 클럽 스터디 1기를 시작했다. 1:1 멘토링권과 인프콘 초대권이 너무나 탐났기에 우수러너를 목표로 JavaScript 강의를 시작했다.스터디를 시작하면서 Firebase, React.js로 채팅앱 만들기 강의도 듣고 있다. 강의의 기술스택을 활용하여 React Query와 함께 해결할 새로운 개인 프로젝트를 생각해두고 있다.스터디 과제로 음식메뉴, 가위바위보, 퀴즈 앱을 바닐라JS로 만들었다.프론트엔드 개발직무로 이력서를 꾸준히 지원하고 있는데, 아직 연락은 없었다..😢FEELINGS (느낌, 주관)나의 감정적인 반응, 느낌, 어려움생각했던 것보다 스터디에 쏟는 시간이 길어서 2주차 때에는 시간관리에 더 신경써야겠다고 느꼈다.올해 초에 모던자바스크립트 딥다이브 책으로 한번 1독을 해서 그런지 호이스팅, 스코프, 프로토타입 섹션은 힘들지않게 이해했다. (과거의 나.. 칭찬해..)과제로 DOM 메서드 사용하며 작업했는데 거의 1년만에 사용하다보니 낯설었고, 기능을 만들 때 배열이나 객체의 어떤 프로토타입 메서드를 사용하는게 나을지 고민하는 것이 재밌었다. + 코딩테스트 문제를 푸는 기분도 들었다. FINDINGS (배운 것)그 상황으로부터 내가 배운 것, 얻은 것, 가장 인상 깊었던 배움기억에 남는 배움으로는 this와 this를 바인딩하는 bind, call, apply 메서드, 이벤트 위임이었다. 특히 이벤트 위임은 과제를 하면서 바로 바로 적용시켰기 때문에 앞으로도 잘 활용할 것 같다.복습하고 싶은 배움으로는 Design Pattern, Intersection observer, 커링이었다. 특히 Intersection observer로 lazy loading을 구현할 수 있다는 걸 이번에 알았기 때문에 더 기억에 남을 것 같다. 커링은 문법으로는 봤었지만 어떤 용어로 부르는지 몰라서 궁금증이 해소되었다.과제를 통해 DOM Node를 직접 변수로 설정하고 값을 바꾸고 업데이트하는 작업을 했는데, 첫 설계의 중요성을 알게되었다. 마음이 급해 기능을 위한 코드를 작성하다가 요소의 위치를 다시 설정해야하는 순간이 있었다. 기능도 중요하지만, 기능을 적용시킬 요소들을 어떻게 배치하고 설계해야할지 처음부터 잘 고민을 해야겠다고 느꼈다.FUTURE (미래)현재 나의 상태와 배운 것을 미래에는 어떻게 적용할 지이번 주가 끝나면 다시 React.js를 공부하게 될텐데, 이번 기회에 모국어(JavaScript)를 복습하게 되어서 좋았다. 이번 주에 배웠던 부분을 곰곰이 복기해보면서 아직 끝내지 못한 나머지 과제들에 녹여보도록 하겠다.2주차에는 강의를 빠르게 보고, 과제를 하며 고민하는 데에 시간을 더 써보는 연습을 해야겠다. 화이팅!

웹 개발인프런워밍업클럽FE1기발자국

강나현

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

강의 수강1) 일주일 간 학습한 내용이전에 접했던 개념이지만 다시 봐도 헷갈렸던 개념, 몰랐던 개념 위주로 정리해보았다.const vs let vs varconst , let → 블록 레벨 스코프function func(){ if(true){ let a = 0; } console.log(a) // reference error } var → 함수 레벨 스코프function func(){ if(true){ var a = 0; } console.log(a) // a 출력 } 호이스팅- 코드 실행 전 변수나 함수 선언을 맨 위로 끌어올려지는 것을 의미함.// 1. var 변수 생성시 undefined로 선언 후, hello 할당 console.log(greeting); //undefined 출력 var greeting = 'hello'; // 2. let, const 변수 생성 시 // 호이스팅은 발생하지만 초기에 초기화되지 않고 값을 할당하기 전에 콘솔 로그가 발생함. // 발생 원인: TDZ(Temporal Dead Zone) // → 선언단계와 할당 단계 사이 변수를 사용할 수 없는 일시적 비활성 상태 console.log(greeting); // reference error let greeting = 'hello';  최대한 let보다 const를 사용하되 let 사용시 scope를 좁게 만들어서 사용하자.for vs forEachfor가 forEach 보다 성능이 좋음.따라서 복잡한 코드인 경우에는 for가 좋지만 가독성 측면에서는 forEach가 좋을 수 있음.for는 await과 함께 동작하지만 forEach는 await과 완벽하게 동작하지 않음.DOMDOM vs BOMDOM(Document Object Model)- DOM은 웹 브라우저가 HTML 페이지를 인식하게 해주는 트리구조로 된 객체 모델을 의미함.- JavaScript와 html을 연결해주는 역할BOM(Browser Object Model)- JavaScript가 브라우저와 소통하는 역할- window객체를 제어함.DOM 동작방식브라우저가 서버에서 페이지에 대한 응답을 받아 화면에 표시하는 단계1. DOM 트리 생성2. Render 트리 생성 - 브라우저가 DOM과 CSSOM(javascript가 css를 조작할 수 있는 api)을 결합하는 과정으로 화면에 표시되는 노드의 정보, 스타일 정보를 포함3. Layout - 브라우저 요소의 크기와 위치 계산 4. Paint - 실제 화면에 렌더링Document Object 이용document.getElementsByTagName으로 불러온 노드를 배열로 변환하는 방법let li = document.getElementsByTagName('li'); //collection으로 출력 li = Array.from(li); console.log(li); // 배열로 출력innerHTMLhtml까지 같이 보여줌.innerText 사용자에게 보여지는 화면 그대로 보여줌.(실제 코드에서 공백이 여러개이지만 1개 공백으로 처리)textContentdisplay:none과 같이 숨겨진 노드도 출력하고 텍스트 값 그대로 보여줌.childNodes 또한 collection 이며 collection의 특징은 아래와 같음.collection을 순환할때 for…of, forEach() 사용가능하며 for…in 은 사용 불가능함.collection은 배열이 아니기 때문에 filter와 같은 배열 메서드 사용 불가함. eventeventBubbling이벤트가 발생했을 때 중첩된 상위 요소로 이벤트가 전달되는 현상e.stopPropagation()으로 해당 현상을 막을 수 있음.eventCapturing이벤트가 아래 요소로 전달되는 현상preventDefault()별도의 브라우저 행위(ex. submit 태그 실행 시 화면이 새로고침 되는 현상)를 막을 수 있음.2) 학습 내용에 대한 회고연휴 겸 여행을 가게 되어 ktx 열차 안에서 틈틈이 강의를 들었다. 덕분에 진도를 따라잡을 수 있었지만 꼼꼼하게 내용을 기록하지 못해 아쉬웠다. 또한, 과제를 더 완벽하게 해낼 시간이 부족했기 때문에 2주차는 스터디에 시간을 더 소비해야겠다는 생각이 들었다. 미션1) 미션 해결 과정문제 현상가위 바위 보 앱을 구현하며 다시 시작 버튼을 누르고 가위 바위 보 버튼 중 하나를 클릭하면 게임 총 횟수가 2개씩 줄어드는 현상이 발생했다.문제점콘솔로 가위 바위 보 버튼 이벤트 타겟을 찍어보니 클릭은 한 번만 했지만 이벤트 타겟은 2개가 찍히는 문제가 있었다.원인처음엔 버튼을 감싸고 있는 부모태그까지 이벤트가 전달되는 '버블링 현상' 인줄 알고 e.stopPropagation() 을 적용해보았지만 해결이 되지 않았다. 구글링을 통해 익명함수로 이벤트 리스너를 사용하면 새로운 객체로 생성되어 중복이 발생한다는 점을 알게되었다.해결방안익명함수 대신 선언적 함수로 코드를 수정하니 클릭 이벤트가 한번만 발생했다. 2) 미션 해결에 대한 회고음식 메뉴 앱반응형 레이아웃을 적용해보려고 노력했지만 의도와 다르게 정렬이 흐트러졌다. 해당 과제를 통해 css 지식이 많이 부족하다고 느꼈고 추후에 css 개념을 공부해서 수정해야겠다는 생각이 들었다. 지금은 JavaScript 공부에 더 집중해야겠다.2. 가위 바위 보 앱, 퀴즈 앱가위 바위 보 앱을 구현하며 이벤트 중복 현상을 해결하기 위해 시간을 많이 소비했고 처음부터 설계를 제대로 못해서 스파게티 코드가 된 것 같다. 평소에 토이 프로젝트로 프론트엔드 개발 역량을 많이 쌓아야겠다.3. 퀴즈 앱이전 과제들의 부족한 점을 생각하며 init() 함수에 미리 구현해야할 함수명들을 적어놓고 시작했다. 하지만 중간에 버튼을 변경하는 부분에서 코드가 꼬이기 시작하더니 마찬가지로 코드가 복잡해졌다. retry, next 버튼을 변경하는 부분에서 display: none으로 스타일링에 변화를 줘야할지 innerText로 버튼명을 변경해야할지 고민을 했던 것 같다. 정답 코드가 나오면 더 효율적인 코드가 무엇인지 체크해봐야겠다.  

웹 개발

스미슈

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

인프런 워밍업 클럽1기 첫번째 회고록 최근 스프링과 자바를 독학하고 있었는데, 강의를 듣기 위해 인프런 사이트에 접속했을 때 눈에 들어온 것이 바로 워밍업 클럽 스터디 모집 게시글이었다. 공통의 목표를 가진 사람들과 함께 공부하면 혼자 공부할 때 보다 의욕이 생길 것 같아 고민하지 않고 바로 신청했다.강의 커리큘럼에 스프링 프로젝트를 개발은 물론 배포까지 포함되어 있다는 점이 특히 마음에 들었다. 간단한 프로젝트의 배포를 해 본 적이 있지만 여러 블로그들을 참고하며 이 방법이 맞는지 확신은 없는 상태에서 일단 돌아간다!! 뭔가 된다!! 라는 느낌의 배포였기 때문에… 이번 스터디를 통해 스프링 프로젝트의 전체적인 개발 흐름을 파악하는 것이 목표이다. Section 0 - 소개와 준비강의 소개와 자료를 포함해 강의에 대한 전반적인 설명이 담긴 파트였다.프로그램 공부를 시작할 때 개발 도구 설치 과정에서 막히기 시작하면 슬며시 포기하고 싶어지는 마음이 들기 마련이다. 웹 개발이나 스프링부트를 처음 접하는 사람들을 위해 프로그램 설치 과정이 상세히 담긴 영상이 준비되어 있었다. 천천히 따라하면 해당 강의에서 사용하는 프로그래밍 도구(Java, IntelliJ, PostMan, MySQL, git)를 손쉽게 설치할 수 있을 것이다.  Section 1 - 생애 최초 API 만들기 Java를 공부하기 전에 알아두면 좋을 것들스프링 프로젝트를 본격적으로 시작하기에 앞서 Java에 대한 영상이 준비되어 있었다.첫 번째 영상에서는 Java의 JDK, JRE, JVM에 대한 설명이 담겨있었다.JDK: Java Development Kit = JRE + 개발을 위한 도구(컴파일러, 디버그 도구)JRE: Java Runtime Environment = JVM + 실행에 필요한 라이브러리JVM: Java Virtual Machine = 자바 가상머신, 바이너리 코드를 읽고 검증하고 실행함두 번째 영상에서는 빌드가 무엇인지, Java의 대표적인 빌드 도구에는 어떤 것이 있는지 알 수 있었다.빌드: 소스코드 파일을 컴퓨터에서 실행할 수 있는 독립적 SW로 변환시키는 과정Java 빌드 도구: ANT, Maven, Gradle해당 강의에서는 Gradle을 사용한다 서버 실행과 어노테이션본격적인 스프링 강의는 스프링 프로젝트의 서버를 실행시켜 보는 것으로 시작되었다. @SpringApplication 어노테이션과 main 메소드에 대해 알아보았으며, 1주차 과제로 어노테이션에 대한 추가적인 공부를 수행하였다.[인프런 워밍업 클럽1기 BE] Java 커스텀 어노테이션 만들기 네트워크다음으로 네트워크에 대해 배운다. 서버란, 어떠한 기능을 제공하는 프로그램 또는 그 프로그램을 실행시키는 컴퓨터이며 우리는 컴퓨터에 요청을 보내기 위해 인터넷, 네트워크를 사용한다. 백엔드 개발을 위해 네트워크 이론은 꼭 필요한 내용이라는 생각이 들었다. HTTP와 API컴퓨터간 HTTP와 API 통신 방식에 대해 배운다.컴퓨터 간 통신은 HTTP라는 표준화된 규약을 통해 이루어진다.HTTP 요청의 핵심은 method와 path이다.요청에서 데이터를 전달하는 방식에는 쿼리와 바디 방식이 있다.HTTP 응답의 핵심은 상태코드이다.클라이언트와 서버는 HTTP를 주고받으며 기능하고, 이때 정해진 규칙이 API이다. API 개발하기2개의 수를 전달 받아 덧셈, 곱셈 결과를 응답하는 API사용자를 저장, 조회, 수정, 삭제하는 CRUD API위와 같은 활동을 통해 API를 만드는 방법을 배웠다. 처음에는 파라미터로 요청을 받고 응답하던 코드에 DTO를 도입해보면서 DTO의 사용 이유와 방법을 배울 수 있어 좋았다. 또한 과제2를 통해 추가적인 GET, POST API를 구현해보면서 복습할 수 있어 도움이 되었다.과제 2 - API 만들기(GET, POST)  Section 2 - 생애 최초 Database 조작하기 Database의 필요성Section1의 활동으로 만든 API에는 문제점이 있었는데, 바로 서버를 종료하면 저장했던 데이터가 사라진다는 점이었다. 서버가 실행된 후의 API 동작 결과는 RAM(메모리)에 쓰여지기 때문에 서버는 Disk(장기기록장치)에 데이터를 저장해줘야 한다. 이때 Database를 사용해 데이터를 저장할 수 있다.Database는 데이터를 구조화 시켜 저장하며, 그 중 Relational Database는 데이터를 표처럼 구조화 시켜 저장한다. 우리가 사용할 MySQL은 대표적인 RDB이다. 데이터베이스를 조작하기 위해서 SQL을 사용해야 한다. MySQL 사용하기MySQL을 사용할 때 Workbench로 접속했었는데, 인텔리제이에서 바로 MySQL에 접근할 수 있다는 것을 알게 되었다. MySQL의 데이터 저장 구조를 포함해 데이터베이스 생성, 테이블 생성 및 삭제 명령어, 데이터 CRUD 명령어를 복습할 수 있어 좋았다. 스프링으로 Database 접근하기Spring 서버에서 MySQL에 접근하기 위해 관련 설정을 해주는 파일이 필요하다. properties 파일 방식도 있지만 개인적으로 yml 방식이 읽기 쉬워서 선호하는데, 강의도 yml으로 진행되었다. 자바 데이터베이스 커넥터에 대한 클래스인 JdbcTemplate로 SQL을 날리는 방식을 배울 수 있었다. 예외 처리존재하지 않는 사용자에 대해 요청이 올 경우에도 성공이라는 의미의 200 상태 코드가 전달되는 문제가 있었다. 따라서 사용자가 있는지 확인하는 코드를 추가해 만약 사용자가 없다면 예외를 던지도록 수정해 500 Error를 보내는 방식을 배웠다.  Section 3 - 역할 분리 클린코드와 리팩토링<Clean Code> 가이드함수: 최대한 작게 만들고 한 가지 일만 수행하는 것이 좋다클래스: 작아야 하며 하나의 책임만 가져야 한다  앞서 구현한 코드는 Controller에서 모든 동작을 수행하며 3가지 역할을 가지고 있었다.API의 진입 지점으로 HTTP Body를 객체로 변환한다유저의 유무를 확인해 예외 처리를 한다SQL을 통해 실제 DB와 통신을 담당한다 이렇게 하나의 기능이 한번에 구현되어 있으면 다음과 같은 문제점이 있다.동시에 여러 명이 수정할 수 없다읽고 이해하기 어렵다한 부분을 수정하면 전체에 영향이 갈 수 있다너무 큰 기능이라 테스트가 어렵다유지 보수성이 떨어진다 Controller의 역할을 Service, Repository 클래스로 분리해주었다. 클래스가 각자의 역할을 가지고 쌓인 구조를 Layered Architecture이라고 하며, DTO는 계층간 정보를 전달하는 역할을 한다. 계획표를 처음 보았을 때엔 여유롭게 수강 할 수 있을 것이라고 생각했는데, 다른 일정도 생겨서 생각보다 바쁘게 듣고 있다. 시간이 날 때마다 미리 강의를 들어야 할 것 같다.  

백엔드워밍업백엔드스터디

준섭

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

JDK, JER, JVM 알아보기JVM(Java Virtual Machine)자바 소스 코드 파일을 컴퓨터가 이해하고 실행하기 위해서는 0과1로 이루어진 코드로 컴파일해야 한다.그런데 문제는 Windows, Mac, Linux와 같이 서로 다른 운영체제들은 이해하는 방식이 달라서 운영체제 마다 다르게 컴파일을 해줘야 한다.그래서 자바는 JVM이라는 녀석이 운영체제에 맞게 컴파일을 해주는 역할을 한다.JVM은 그루비, 스칼라, 코틀린 같은 다른 언어에도 사용된다.JDK > JRE > JVMJDK(Java Development Kit)는 자바 개발에 필요한 도구들을 모아놓은 패키지이고JDK 안에 JRE가 포함되고 JRE 안에 JVM이 포함되는 구조이다.JRE(Java Runtime Environment)는 자바 프로그램 실행에 필요한 라이브러리 파일들과실행환경을 위한 JVM을 가지고 있다.따라서 JDK를 설치하면 JRE와 JVM도 함께 설치되는 것이고Java의 버전은 JDK의 버전이라고 말할 수 있다.JDK의 종류JDK에는 많은 버전과 종류가 있고 성능과 비용에 차이가 있다.Oracle JDK는 Oracle에서 만든 JDK로 개인에게 무료이고 기업용은 유료이다.Open JDK는 Oracle JDK와 비슷한 성능이지만 기업용도 무료이다.Open JDK는 잘 몰랐는데 혹시나 상업용으로 자바 프로그램을 만든다면 Open JDK를 써야될 것 같다. HTTP와 APIHTTP(HyperText Transfer Protocol)두 개의 다른 컴퓨터인 클라이언트와 서버가 통신을 하기 위해서 만들어진 규칙으로규칙에 맞게 요청과 응답을 보내면 된다.HTTP 요청은 HTTP Method와 Path(경로)가 핵심이고데이터를 전달하기 위한 방법으로 쿼리와 바디가 있다.HTTP 응답의 핵심은 상태코드이다.HTTP MethodHTTP 요청의 행위나 방법을 나타내는 부분GET : 데이터 조회POST : 데이터 추가, 저장PUT : 데이터 수정DELETE : 데이터 삭제API(Application Programming Interface)HTTP 규칙을 통해서 데이터를 주고 받을 때특정 기능은 어떤 방식으로 요청하고 응답할 지를 결정하는데이처럼 특정 기능을 수행하기 위한 정해진 약속을 API라고 한다.예를 들면 어떤 메소드 그리고 어떤 경로로 요청을 보내고 어떤 데이터를 보내며 어떤 응답을 줄 지와 같은 약속을 말한다. GET, POST API 개발@RequestParamGet 메서드로 요청을 보낼 때 쿼리에 들어있는 데이터를 받을 수 있다.@GetMapping("/add") public int add(@RequestParam int number1, @RequestParam int number2) { return number1 + number2; } DTO로 받기쿼리의 파라미터들을 필드로 가지는 DTO를 만들어서 Controller 메서드의 매개변수로 받으면여러 개의 파라미터를 한번에 받을 수도 있다.Spring은 파라미터와 일치하는 필드를 가진 DTO에 매핑해서 객체로 만들어준다.@GetMapping("/add") public int add(AddRequest request) { return request.getNumber1() + request.getNumber2(); } @RequestBodyPOST 메소드는 바디에 데이터를 넣어서 요청을 보내는데이 때 바디에 들어있는 데이터를 객체로 만들어서 받기 위한 어노테이션@PostMapping("/multiply") public int multiply(@RequestBody Multiply request) { return request.getNumber1() * request.getNumber2(); }  MySQL 사용하기도커를 이용해서 설치하기Mysql을 직접 설치하면 설정에 문제가 생겼을 때 MySQL을 삭제했다 다시 설치해야 되고도커를 이용하면 여러 개의 DB를 사용하게 될 경우 각각 컨테이너로 띄울 수 있어서도커를 이용하여 MySQL 설치해보았다.먼저 도커를 설치MySQL 이미지 다운로드docker pull mysqlMySQL 컨테이너 실행docker run --name <컨테이너명> -e MYSQL_ROOT_PASSWORD=<password> -d -p 3306:3306 mysql:latest도커 데스크탑이 있다면 GUI를 이용해 실행할 수 있다.컨테이너 접속docker exec -it <컨테이너명> bashMysql 접속mysql -u root -p 좋은 코드(Clean Code)는 왜 중요한가?코드는 요구사항을 표현하는 언어현업에서 개발자는 수많은 코드를 읽어야 한다.그렇기 때문에 코드만 보고도 의미를 파악할 수 있는 것이 중요하다.프로그램이 커질 때 안좋은 코드가 쌓이면 점점 복잡해지고 그로 인해 생산성도 떨어진다.하나의 함수는 하나의 기능만 수행하는 것이 좋다.많은 기능을 가지고 있으면 코드가 길어지기 때문에 읽고 이해하기 어렵다.여러 명이 작업하고 수정하기 어렵고 테스트하기 힘들다.하나의 함수는 하나의 기능을 수행하도록 분리하는 것이 좋다. 과제어노테이션이란?소스 코드에 영향을 주지 않고 프로그램에 정보를 제공해주는 역할@ 를 붙여서 사용한다.JDK 1.5버전 부터 사용 가능@SpringBootApplication, @RestController, @GetMapping...람다식익명 클래스를 간결한 함수식으로 표현한 것함수형 프로그래밍을 사용하기 위해 추가되었다.함수형 인터페이스와 함께 사용된다.interface Add { int add(int x, int y); } // 익명 클래스 Add a = new Add() { public int add(int x, int y) { return x + y; } }; // 람다식 Add a = (x, y) -> {return x + y;};  회고공부에 대한 의욕이 많이 떨어지고 있는 시기에 공부 의욕을 올리고 자극을 받기 위해서 이번 주부터 인프런 워밍업 클럽 스터디를 시작했다.처음 강의를 수강할 때는 알고있는 내용이라 생각되는 강의 내용이 많아서 빠르게 강의를 듣고 과제를 진행하는데 역시 쉽게 공부 의욕이 올라오지는 않았다.그래도 강의를 듣고 따라서 API도 만들어보니 예전 기억들이 떠오르면서 3일차부터 조금씩 집중력이 오르기 시작했다.다시 공부 의욕도 올라오고 하루에 시간을 잘 분배해서 계획을 세우고 계획에 맞게 생활을 시작할 수 있게 되었다.초반에는 집중력이 떨어지는 시간이 많았지만 다시 조금씩 집중력을 찾기 시작했으니 다음 주에는 더 많은 시간을 공부에 투자하고 집중력을 끌어올릴 수 있도록 해야겠다.

백엔드

S.M KIM

[인프런 워밍업 클럽 Study] 백엔드 1주차 발자국

학습 내용 요약<의존성>프로젝트에서 사용하는 라이브러리 혹은 프레임워크 <라이브러리>프로그래밍에서 미리 만들어진 기능을 가져다가 사용하는 것ex) 김치찌개를 만드는 상황에서, 처음부터 배추를 직접 재배하여 김치를 담근 후 만들 수도 있고, 마트에서 김치를 사서 만들 수도 있음. 후자의 경우가 라이브러리를 사용하는 경우와 유사하다고 할 수 있음. <프레임워크>프로그래밍에서 미리 만들어져 있는 구조에 코드를 가져다 끼워넣는 것ex) 김치찌개를 만드는 상황에서, 여러 재료들을 사서 만들 수도 있고, 원데이 클래스에 가서 선생님이 시키는 대로 만들 수도 있음. 후자의 경우가 프레임워크를 사용하는 경우와 유사하다고 할 수 있음. <서버>어떠한 기능을 제공하는 프로그램, 그리고 그 프로그램을 실행시키고 있는 컴퓨터누군가의 요청이 있어야 기능을 제공할 수 있음. <네트워크>이세계 ↔ 현실세계택배 시스템 ↔ 네트워크집 ↔ 컴퓨터(주소) B부족 감자동 곰로 13번길 2 ↔ (IP) 244.77.51.9(집주소 별칭) 파란집 ↔ (도메인 이름) spring.com(택배를 정말 받는 사람) 둘째 ↔ (port) 3000 <HTTP>HyperText Transfer ProtocolProtocol : 표준, 약속 <HTTP 요청에 대한 규칙>GET /portion?color=red&count=2 Host: spring.com:3000 POST /oak/leather Host: spring.com:3000 오크가죽정보 GET, POST"HTTP Method"HTTP 요청을 받는 컴퓨터에게 요청하는 행위ex) GET : 데이터를 달라, POST : 저장하라GET, POST, PUT, DELETE 등...Host: spring.com:3000HTTP 요청을 받는 컴퓨터와 프로그램 정보/portion, /oak/leather"Path"HTTP 요청을 받는 컴퓨터에게 원하는 자원?, &구분기호color=red, count=2"Query"key와 value로 구성자원의 세부 조건오크가죽정보"Body"실제 저장할 오크 가죽 정보행위와 자원은 HTTP 요청을 보내기 전에 약속해야 한다 <다양한 HTTP Method>GET : 데이터를 달라, 쿼리POST : 데이터를 저장하라, 바디PUT : 데이터를 수정하라, 바디DELETE : 데이터를 삭제하라, 쿼리 <API>Application Programming Inteface정해진 약속을 하여, 특정 기능을 수행하는 것 <HTTP 요청 문법>POST /oak/leather Host: spring.com:3000 오크가죽정보 POST /oak/leather : 메소드 패스 쿼리Host: spring.com:3000 : 헤더 (여러줄 가능)중간에 한 줄 띄기오크가죽정보 : 바디 (여러 줄 가능) <URL><http://spring.com:3000/portion?color=red&count=2> Uniform Resource Locatorhttp사용하고 있는 프로토콜:// , ?구분 기호spring.com:3000도메인 이름포트, 도메인 이름은 IP로 대체 가능하다/portion자원의 경로 (Path)color=red&count=2추가정보 (Query) <HTTP 응답>서버 : 요청에 대한 응답을 제공(serve)한 컴퓨터클라이언트 : 요청을 한 컴퓨터상태 코드200 OK300 Moved Permanently404 Not Found500 Internal Server Error그외 등등…응답에는 추가 정보(바디)를 담을 수도 있음.ex) 200 OK, 빨간 포션 2개HTTP 응답 역시 요청과 구조가 동일함HTTP/1.1 200 OK Content-Type: application/json { "name": "A", "age": null } 첫째 줄 - 상태코드여러 줄 - 헤더한 줄 띄기여러 줄 - 바디 <Controller (GetMapping)>@RestController public class CalculatorController { @GetMapping("/add") public int addTwoNumbers ( @RequestParam int number1, @RequestParam int number2 ) { return number1 + number2; } } ControllerAPI의 입구@RestControllerClass를 Controller로 등록하는 어노테이션@GetMapping("/add")아래의 함수를 HTTP Method가 GET이고 HTTP path가 /add인 API로 지정하는 어노테이션@RequestParam주어지는 쿼리를 함수 파라미터에 넣는 어노테이션 <DTO>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; } } Data Transfer Object데이터를 외부에서 서버 안 Controller로 전달(request)하거나 서버 밖으로 응답(response)하는 역할 <JSON>{ "name": "AAA", "age": 99, "house": { "address": "대한민국 서울", "hasDoor": true, "dogs": ["코코", "초코"] } } JavaScript Object Notation웹 통신에서 객체를 표기하는 기법JSON 표기는 중괄호가 양 끝에 있음중괄호 안에 ”key”: value 로 표기‘속성’ 각각은 쉼표로 구분 <Controller (PostMapping)>@PostMapping("/multiply") public int multiplyTwoNumbers ( @RequestBody CalculatorMultiplyRequest request ) { return request.getNumber1() * request.getNumber2(); } @PostMapping(”/multiply”)아래 함수를 HTTP Method가 POST이고 Path가 /multiply인 API로 지정하는 어노테이션@RequestBodyHTTP Body로 들어오는 JSON을 CalculatorMultiplyRequest 로 바꿔줌 과제<1. Annotation>https://smkim-create-server.notion.site/1-Annotation-c343593b07a54d4793cf98f851eb696a처음에는 어노테이션이라는 것이 앞에 골뱅이가 달리고 뒤에 단어가 적혀있는 것으로만 막연하게 이해하고 있었는데, 이 과제를 통하여 어노테이션에 대한 정의(코드에 대한 부가 정보를 제공하는 메타 데이터)와 역할(코드에 대한 설명과 컴파일러 명령 등을 표현) 및 어노테이션을 사용함으로써 얻을 수 있는 효과(개발자 입장에서 더욱 편리하고 가독성 높은 개발이 가능), 그 외 각종 어노테이션의 종류에 대해 알 수 있었다.커스텀 어노테이션을 만들 수 있다는 것을 이 강의를 통하여 처음 알 수 있었는데, 얼마 전에 진행했던 프로젝트에서 강의에서 배운 내용을 토대로 하여 커스텀 어노테이션을 만들어 사용하도록 함으로써 더욱 편리하게 DB에 저장된 유저의 정보를 불러오게 하여 팀원들의 개발 효율성을 더욱 높힐 수 있었다. <2. API>https://smkim-create-server.notion.site/2-API-be6842d43aa84b348a5e0c6d4fa32877강의에서 배운 각종 API들과 Controller 및 DTO의 개념을 종합하여 과제를 해결하였다.흔히 setter 사용을 지양하라는 말이 있는데, 과제 해결의 편의를 위하여 부득이하게 setter를 사용하여 값을 받았다. setter를 사용하지 않고 들어오는 값을 받을 수 있는 방법에 대해 좀 더 고민해봐야 될 것 같다. <3. Lambda>https://smkim-create-server.notion.site/3-Lambda-6c8726c1cce546faa9270af2a593bef6자바의 람다식이 함수형 프로그래밍을 지원하기 위해 등장하였다는 배경에 대해 알게 되었고, 람다식을 사용함으로써 얻을 수 있는 장점, 익명 클래스(클래스 선언과 객체 생성을 동시에 하는 이름 없는 클래스)에 대해서도 알 수 있었다. <회고>막연하게 알고 있었던 개념에 대해서 한번 더 정리할 수 있어서 좋았다.과제를 해결할 때, 가능하면 공식 문서를 위주로 하여 참고할 수 있도록 해야겠다.  

백엔드워밍업

코파

인프런 워밍업 클럽 1기 FE 2번 과제 (가위바위보 게임 앱)

2번 과제 (Day2)(가위바위보 게임 앱)깃허브 저장소 주소 :https://github.com/devellybutton/frontEnd_warmingUp_study/tree/master/02.%EA%B0%80%EC%9C%84%EB%B0%94%EC%9C%84%EB%B3%B4 게임 규칙:사용자는 바위, 가위, 보 중 하나를 선택한다.컴퓨터는 무작위로 바위, 가위, 보 중 하나를 선택한다.사용자와 컴퓨터의 선택을 비교하여 승부를 결정한다.각 회차별 승부 결과와 점수는 화면에 표시된다.10회 진행 후 게임 종료. 최종 승부 결과와 재시작 버튼이 나타난다.재시작 버튼을 누르면 게임을 다시 시작할 수 있다. GIF:게임의 각 회차별 기록, 시작과 끝을 명확히 알 수 있도록 화면에 각 수치들을 렌더링 함. 가위바위보 버튼을 지나치게 빨리 누르는 것을 방지하기 위해 최소 0.5초에 1번씩 작동하도록 함. 간단한 후기 :간단한 로직이었기에 게임 자체는 금방 완성했지만, 예상보다 훨씬 많은 시간(^^)을 버그 수정에 투자해야 했습니다. 이 과정에서 코드의 중요성, 특히 로직 분리의 중요성을 절실히 깨달았습니다. 처음에는 모든 코드를 하나의 덩어리로 작성했기 때문에 버그를 찾기가 매우 어려웠습니다. 하지만 로직을 함수단위로 분리한 후에는 각 부분을 차근차근 검사하면서 문제를 해결할 수 있었습니다.특히, 게임 재시작 시 count가 2회씩 감소하는 문제는 이벤트 리스너가 중복 등록되어 발생하였습니다. 이 문제를 해결하기 위해 등록된 이벤트 리스너를 제거하고 로직을 분리하는 방식으로 코드를 수정했습니다. 아직 이벤트에 대해 깊게 공부해보지 못하였고, 다양한 이벤트를 사용해보지는 못해서 아쉽습니다.이번 과제를 통해 깔끔하고 체계적인 코드 작성의 중요성을 다시 한번 느꼈습니다. 이미지 출처 :https://www.vectorstock.com/royalty-free-vector/rock-paper-scissors-hand-gesture-vector-25169740개발할 때 참고한 링크 :https://oursmalljoy.com/css-%EC%9B%90-%EA%B7%B8%EB%A6%AC%EA%B8%B0-border-radius%EB%A1%9C-%EA%B0%84%EB%8B%A8%ED%9E%88-%EB%A7%8C%EB%93%A4-%EC%88%98-%EC%9E%88%EB%8B%A4/

웹 개발워밍업클럽FE과제

이용수

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

인프런 워밍업 클럽 1주차 발자국서론IT 취준생 톡방에서 우연히 워밍업 클럽에 대해 정보를 얻을 수 있었고, 내가 들을만한 좋은 강의가 있을까 찾아보니 마침 최근에 포트폴리오 때매 관심 있었던 스프링으로 직접 서버를 배포하는 방법이 강의 주제로 있어서 신청하게 되었다.무엇보다 혼자 강의를 듣는게 아닌 디스코드 커뮤니티에서 서로 물어보며 강의를 같이 듣는다는 것이 흥미 있었고 모든 과정을 수강 완료하면 인프런 포인트로 5만이나 환급된다는 것이 마음에 들었다.앞으로 강의와 스터디를 하면서 배운 내용을 잊지 않도록 주마다 개인 블로그와 인프런 블로그에 정리하려고 한다.섹션 0 : 소개와 준비, 수업자료강의 소개 영상강의 제목 : [All-In-One] 자바와 스프링 부트로 생애 최초 서버 만들기 누구나 쉽게 개발부터 배포까지!!강의 소개 중 서버 개발자, 백엔드 개발자가 되기 위해선 다방면에서 부족함이 없어야 한다는 점에 공감했다.강의에서 다루는 내용은 다음과 같다고 한다. Java를 기반으로 Linux, Spring boot, mysql, gradle, JPA, Github, aws 등...그 외 서버 개발에 필요한 전반적인 이론 / 개념 설명도 같이 진행하는 것 같다.강의 자료(완성된 코드)강의 자료는 간단하게 강의에서 사용하는 초기 Project 파일과 PPT, PDF 파일로 구성되어 있었다.환경 설정하기강의를 시작하기에 앞서 Java, IntelliJ, PostMan, MySQL, git 설치를 진행했다.다른 환경은 이전에 경험해본적이 있지만, PostMan 은 처음 경험해보는 것이라 이렇게 좋은 도구도 있구나 생각했다.스프링 프로젝트를 시작하는 첫 번째 방법프로젝트의 초기 셋팅 과정을 진행했다.이전에 인프런에서 강의자료를 다운로드 받을 수 있었고 자료 내부에 있는 초기 Project 파일을 열어 실행시켜보니 터미널에 스프링 부트가 실행되는 것을 확인할 수 있었다.섹션 1 : 생애 최초 API 만들기Java를 공부하기 전에 알아두면 좋을 것들 #1 (JVM, JDK)강의를 시작하기 전에 JVM과 JDK에 대해 간단하게 확인했다.정리 1.JAVA라는 언어를 컴퓨터가 알아먹기 까지 과정컴파일 : 인간이 이해하기 쉬운 언어를 기게어로 번역하는 과정컴파일러 : 컴파일을 하는 프로그램바이트 코드 : 0과 1로 이루어진 코드, 컴퓨터가 이해할 수 있다.정리 2.OS마다 0과 1의 조합이 다르다.원래, OS 마다 다른 컴파일러가 필요하는게 맞다.그러나 JAVA는 JVM이 0과 1을 OS에 맞게 번역해준다.JVM은 JAVA 외에 다른 언어에서도 사용된다.정리 3.JVM < JRE < JDK 순서로 포함관계JDK를 설치하면 JRE, JVM도 같이 설치됨, 즉 JAVA의 버전 = JDK의 버전JVM : 자바 가상 머신 (Java Virtual Machine) 의 약어OS 별로 존재한다.바이너리 코드를 읽고 검증하고 실행한다.JRE : 자바 실행 환경 (Java Runtime Environment) 의 약어JRE = JVM + 자바 프로그램 실행에 필요한 라이브러리 파일 등JVM의 실행 환경을 구현한다.JDK : 자바 개발 도구 (Java Development Kit) 의 약어JDK = JRE + 개발을 위한 도구컴파일러, 디버그 도구 등이 포함된다.정리 4.JDK는 버전이 존재하고, 각 버전별로 새로운 기능이 추가되거나 기존 기능이 사라짐.JDK는 종류가 존재하고, 기능 자체는 모두 동일하지만 성능과 비용에 약간의 차이가 존재함.LTS(Long Time Support) 버전 : 오래 써도 좋도록 지원하는 버전JDK의 종류Oracle JDK : 오라클에서 만든 JDK, 개인 무료, 기업 유료Open JDK : Oracle JDK와 비슷한 성능, 언제나 무료Java를 공부하기 전에 알아두면 좋을 것듯 #2 (빌드, 빌드툴)앞서 알아본 내용에 더해 빌드와 빌드툴에 대해 간단하게 확인했다.정리 1.빌드 : 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립 SW 가공물로 변환시키는 과정빌드 과정 세분화소스 코드를 컴파일테스트 코드를 컴파일테스트 코드를 실행테스트 코드 리포트를 작성기타 추가 설정한 작업들을 진행패키징을 수행최종 SW 결과물을 만들어냄실행 : 내가 작성한 코드나 테스트 코드를 컴파일을 거쳐, 작동시켜 보는 것 독립적인 SW 가공물이 있을 수도 없을 수도 있다.빌드 툴 : 소스코드이 빌드 과정을 자동으로 처리 해주는 프로그램으로 외부 소스 코드 (외부 라이브러리) 등을 자동 추가, 관리해준다.현재는 주로 maven, gradle 2가지가 많이 쓰인다.빌드 툴 종류Ant설정을 위해 xml 사용간단하고 사용하기 쉬움복잡한 처리를 하려 하면 빌드 스크립트가 장황해져 관리가 어려움외부 라이브러리를 관리하는 구조가 없음Maven설정을 위해 xml 사용외부 라이브러리 관리 가능장황한 빌드 스크립트 문제 해결특정 경우에 xml이 복잡해짐xml 자체의 한계가 존재함Gradle설정을 위해 groovy 언어 사용외부 라이브러리 관리 가능유연하게 빌드 스크립트를 작성할 수 있음성능이 뛰어남스프링 프로젝트를 시작하는 두 번째 방법스프링 프로젝트를 설정해 시작하고 실행하는 과정을 진행start.spring.io 사이트에서 스프링 프로젝트의 초기 설정을 비교적 간단하게 진행할 수 있다.또한 2024년 기준 11버전 선택이 존재하지 않아 자료로 주어진 초기 프로젝트 파일로 진행하려고 한다.라이브러리 : 프로그래밍을 개발할 때 미리 만들어져 있는 기능을 가져다 사용하는 것.프레임워크 : 프로그래밍을 개발할 때 미리 만들어져 있는 구조에 코드를 가져다 끼워 넣는 것.@SpringBootApplication과 서버어노테이션 : 자바에서 어노테이션(Annotation)이란 소스 코드에 메타데이터를 추가하는 방법을 제공하는 기능이다. 서버 : 어떠한 기능을 제공하는 프로그램, 그 프로그램을 실행시키고 있는 컴퓨터서버가 정해진 기능을 동작하려면 서버에게 요청을 해야한다.네트워크란 무엇인가?컴퓨터별 고유주소 IP와 인터넷을 통해 데이터를 주고 받을 수 있다.데이터를 받는 컴퓨터는 IP 244.66.51.9, port:3000과 같은 주소로 받음.IP 주소를 외우기 어려워 외우기 쉽게 이름으로 변경한 DNS (Domain Name System) 이 나타남.HTTP와 API란 무엇인가?HTTP : HyperText Transfer Protocol의 약어로서 데이터를 주고 받는 표준.HTTP 메소드의 종류GET : 데이터 제공 요청, 쿼리 사용POST : 데이터 저장 요청, 바디 사용PUT : 데이터 수정 요청, 바디 사용DELETE : 데이터 삭제 요청, 쿼리 사용요청 메소드에 따라 쿼리를 사용할지 바디를 사용할지 다르다.API : Application Programming Interface의 약어로서 정해진 약속을 하여, 특정 기능을 수행하는 것.HTTP 요청 문법첫째줄 (메소드 패스 쿼리)헤더 (여러 줄 가능)한줄 공백바디 (여러 줄 가능)URL : Uniform Resource Locator의 약어로서 사용하고 있는 프로토콜 + 구분기호 + 도메인 이름:포트 + 자원 경로 + 구분기호 + 쿼리 로 구성되어 있다.HTTP 응답 문법첫째줄 (상태코드)헤더 (여러 줄 가능)한줄 공백바디 (여러 줄 가능)정리 1.웹을 통한 컴퓨터 간의 통신은 HTTP라는 표준화된 방식으로 동작함.HTTP 요청은 HTTP 메소드와 Path 등으로 이루어짐요청에서 데이터를 전달하기 위한 2가지 방법은 쿼리와 바디HTTP 응답은 상태 코드가 핵심이다.클라이언트와 서버는 HTTP를 주고 받으며 기능을 동작하며 이때 정해진 규칙을 API라고 함.GET API 개발하고 테스트하기덧셈 API 구현HTTP Method : GETHTTP Path : /add쿼리(key, value) : int number1 / int number2API 반환 결과 : 숫자 - 두 숫자의 덧셈 결과@RestController : 주어진 Class를 Controller로 등록@RequestParam : 주어지는 쿼리를 함수 파라미터에 넣음.POST API 개발하고 테스트하기곱셈 API 구현HTTP Method : POSTHTTP Path : /multiplyHTTP Body(Json) : { "number1":숫자, "number2":숫자 }API 반환 결과 : 숫자(곱셈 결과)@RequestBody : HTTP Body로 들어오는 JSON을 CalculatorMultiplyRequest로 바꿈.유저 생성 API 개발사용자 등록 API 구현HTTP Method : POSTHTTP Path : /userHTTP Body(Json) : { "name":String (null 금지), "age":Integer }API 반환 결과 : 상태코드 200유저 조회 API 개발과 테스트사용자 조회 API 구현 - HTTP Method : GET - HTTP Path : /user - 쿼리 : 없음 - API 반환 결과 : [{ "id":Long,"name":String(null 금지),"age":Integer }]Controller에서 getter가 있는 객체를 반환하면 JSON이 된다. Section1 정리.스프링 프로젝트를 시작하는 방법과 실행하는 방법네트워크, IP, 도메인, 포트, HTTP 요청과 응답 구조, 클라이언트 - 서버 구조, API와 같은 기반 지식Spring Boot를 이용해 GET API와 POST API를 만드는 방법섹션 2. 생에 최초 Database 조작하기Database와 MySQLRDB : Relational Database의 약어로서 데이터를 표처럼 구조화 시켜 저장하는 도구SQL : Structured Query Language의 약어로서 표처럼 구조화된 데이터를 조회하는 언어MySQL에서 테이블 만들기폴더 = 데이터베이스엑셀 파일 = 테이블엑셀 파일의 헤더 = 테이블의 필드 정의데이터베이스를 만들고 이동해서, 테이블을 만든다. 이때 테이블 이름, 타입, 부가조건을 지정한다.데이터베이스 생성 : create database [데이터베이스 이름];테이터베이스로 이동 : use [데이터베이스 이름];테이블 생성 : create table [테이블 이름] ([필드1 이름] [타입] [부가조건], [필드2 이름] [타입] [부가조건]... primary key([필드이름]));테이블 제거 : drop table [테이블 이름];DDL(Data Definition Language) : 데이터 정의어테이블의 데이터를 조작하기데이터 넣기 = 생성, Create데이터 조회 = 읽기, Retrieve or Read데이터 수정 = 업데이트, Update데이터 삭제 = 제거, Delete데이터 넣기 : insert into [테이블 이름] (필드1 이름, 필드2 이름,...) values(값1, 값2,...) / auto_increment : 값이 자동 증가데이터 조회 : select * from [테이블 이름] where [조건];데이터 수정 : update [테이블 이름] set 필드1 이름 = 값, 필드2 이름 = 값, ... where [조건];데이터 삭제 : delete from [테이블 이름] where [조건]; / 조건을 붙이지 않을시 모든 데이터가 삭제된다.DML(Data Manipulation Language) : 데이터 조작어Spring에서 Database 사용하기Spring 서버가 MySQL DB에 접근하게 하기.application.yml 설정spring: datasource: url: "jdbc:mysql://localhost/library" // jdbc:mysql:// -jdbc 로 mysql에 접근 username: "[계정 명]" password: "[계정 비밀번호]" driver-class-name: com.mysql.cj.jdbc.Driver // 데이터베이스에 접근하기 위한 프로그램 POST API 변경private final JdbcTemplate jdbcTemplate; // jdbcTemplate를 이용해 SQL을 날리는 형태로 변경. public UserController(JdbcTemplate jdbcTemplate) { this.jdbcTemplate = jdbcTemplate; // 생성자를 만들어 jdbcTemplate을 파라미터로 넣으면, 자동으로 들어옴. } @PostMapping("/user") // POST /user public void saveUser(@RequestBody UserCreatedRequest request) { String sql = "INSERT INTO user (name, age) VALUES (?, ?)"; // SQL을 만들어 문자열 변수로 저장함. jdbcTemplate.update(sql, request.getName(), request.getAge()); // INSERT, UPDATE, DELETE 쿼리에 사용되는 update 함수 정의 } // 첫 파라미터로 sql을 받고, ?를 대산할 값을 차례로 넣으면 됨. GET API 변경@GetMapping("/user") public List<UserResponse> getUsers() { String sql = "SELECT * FROM user"; return jdbcTemplate.query(sql, new RowMapper<UserResponse>() { @Override public UserResponse mapRow(ResultSet rs, int rowNum) throws SQLException { long id = rs.getLong("id"); String name = rs.getString("name"); int age = rs.getInt("age"); return new UserResponse(id, name, age); // UserResponse에 생성자 추가 } }); } // jdbcTemplate.query(sql, RowMapper 구현 익명 클래스) 유저 업데이트 API, 삭제 API 개발과 테스트사용자 수정 API 구현 HTTP Method : PUTHTTP Path : /userHTTP Body(Json) : { "id":Long, "name":String }API 반환 결과 : 상태코드 200 사용자 삭제 API 구현HTTP Method : DELETEHTTP Path : /user쿼리(key, value) : 문자열 nameAPI 반환 결과 : 상태코드 200 만약 업데이트나 삭제를 할때 존재하지 않는 유저가 있다면, 예외를 던져서 처리해줘야 할 것이다.유저 업데이트 API, 삭제 API 예외 처리 하기없는 유저를 업데이트 하거나 삭제하려 하면, API에서 예외를 던져서 처리할 수 있다.예외를 처리하는 API는 실제 데이터에서 데이터 존재 여부를 확인해서 처리한다.String readSql = "SELECT * FROM user WHERE id = ?"; // id를 기준으로 유저가 존재하는지 확인 boolean isUserNotExist = jdbcTemplate.query(readSql, (rs, rowNum) -> 0, request.getId()).isEmpty(); // SELECT의 결과가 있으면 0으로 변환되며 결론적으로 id가 있으면 0이 있는 리스트 반환, id가 없으면 아무겂도 없는 리스트 반환. if (isUserNotExist) { // 유저가 존재하지 않으면 예외를 던진다. throw new IllegalArgumentException(); }[업데이트, 삭제 테스트 포스트맨 획인해보기]Section2 정리디스크와 메모리 차이를 이해하고, Database의 필요성을 이해한다.SQL을 이용해 MySQL Database를 조작할 수 있다.스프링 서버를 이용해 Database에 접근하고 데이터를 저장, 조회, 업데이트, 삭제할 수 있다.API의 예외 상황을 알아보고 예외를 처리할 수 있다.하나의 Controller 클래스에 너무 많은 역할을 수행 중이며 해결하기 위한 방법을 알아볼 예정.섹션 3. 역할의 분리와 스프링 컨테이너좋은 코드(Clean Code)는 왜 중요한가?코드는 요구사항을 표현하는 언어이고 개발자는 요구사항을 구현하기 위해 코드를 읽고 작성한다.좋지 않은 코드를 작성하며 시간이 쌓이면, 시간이 지날 수록 유지보수가 힘들어 생산성이 낮아진다.코드만 보고도 의미를 파악할 수 있게끔 작성하는 것이 중요하다.함수는 최대한 작게 만들고 한 가지 일만 수행하도록 작성하는 것이 중요하다.현재 우리가 작성한 Controller의 동작 과정[1] API의 진입 지점으로써 HTTP Body를 객체로 변환한다.[2] 현재 유저가 있는지 없는지 확인하고 예외 처리를 진행한다.[3] SQL을 사용해 실제 Database와의 통신을 담당한다.Controller 를 각 과정에 맞게 3단 분리를 진행할 예정.Controller를 3단 분리하기 - Service와 Repository현재 Controller 함수의 역할API의 진입 지점으로써 HTTP Body를 객체로 변환한다. = Controller 역할현재 유저가 있는지 없는지 확인하고 예외 처리를 진행한다. = Service의 역할SQL을 사용해 실제 Database와의 통신을 담당한다. = Repository의 역할Repository에서 바로 jdbcTemplate을 가져올 수는 없는지 알아볼 예정.1주차 과제과제 1번 : https://www.inflearn.com/blogs/7658어노테이션을 사용하는 이유 (효과) 는 무엇일까?나만의 어노테이션은 어떻게 만들 수 있을까?과제 2번 : https://www.inflearn.com/blogs/7692다양한 GET API, POST API 만들기과제 3번 : https://www.inflearn.com/blogs/7716자바의 람다식은 왜 등장했을까?람다식과 익명 클래스는 어떤 관계가 있을까?람다식의 문법은 어떻게 될까?1주차 후기지난주 사전 OT 부터 시작해서 벌써, 인프런 워밍업 클럽 과정의 1주차가 마무리됬다.이번 주차에서는 섹션 0 부터 섹션 3의 일부분의 강의를 수강할 수 있었고, 1차 중간점검 시간을 가질 수 있었다.간단하게 각 섹션 별로 강의의 주제를 다시한번 상기하고 어떤걸 배우고 느꼈는지 확인해보려고 한다.섹션 0의 주제 : 소개와 준비, 수업 자료강의 소개를 들으면서 서버 개발자, 백엔드 개발자가 되기 위해선 다방면에서 부족함이 없어야 한다는 점에 예상치 못하게 공감을 받을 수 있었다.강의 자료 또한 섹션별로 적절하게 준비되어 사전에 어떻게 공부를 진행하고 회고록을 작성해야 할지 가이드 라인이 되기도 했다.환경 설정을 진행하면서 PostMan라는 새로운 도구에 대해 알게 되었고, 오랜만에 다루어본 MySQL도 꺼내볼 수 있었다.섹션 1의 주제 : 생애 최초 API 만들기자바로 프로젝트를 진행하기 전에 JVM과 JDK에 대해 알아보고, 빌드의 개념과 빌드 툴의 종류에 대한 내용을 정리하면서 다시 한번 개념적인 부분을 정립할 수 있었다.간단하게 스프링 프로젝트를 시작하고 실행해보았고, 강의 중간에 네트워크, IP, 도메인, 포트, HTTP 요청과 응답 구조, 클라이언트 - 서버 구조, API와 같은 기반 지식에 대해 설명을 들을 수 있었다.강의 주제에 맞게 Spring Boot를 이용해 기본적인 GET API와 POST API를 만들어보고 어떤 원리로 동작하는지 알아볼 수 있었다.섹션 2의 주제 : 생애 최초 Database 조작하기이전 섹션에서 수행한 과정의 문제점인 서버 재실행시 데이터가 초기화 되는 부분에 관련하여 컴퓨터의 디스크와 메모리 차이를 이해하면서 Database에 저장하는 것의 필요성을 이해할 수 있었다.IntelliJ와 MySQL을 연결하는 방법을 배웠고, 생애 최초로 조작하는건 아니지만 SQL을 이용해 MySQL Database를 조작하는 기본적인 방법에 대해 다시 상기시킬 수 있었다.기존에 만들어둔 스프링 서버의 API를 변경하여 Database에 접근하고 데이터를 저장, 조회, 업데이트, 삭제하는 방법에 대해 배웠고, API의 예외 상황에 대해 예외를 처리하는 과정을 학습할 수 있었다.섹션 3의 주제 : 역할의 분리와 스프링 컨테이너하나의 컨트롤러 함수에 수많은 기능이 몰려있으면 생기는 문제점에 대해 인식하면서, 좋은 코드가 왜 중요한지 이해할 수 있었고, 이전 섹션에서 작성한 Controller 코드를 직접 Controller-Service-Repository로 분리하면서 어떻게 하면 좋은 코드로 리팩토링 할 수 있을지 고민하는 과정을 겪었다.1차 중간점검커뮤니티로 사전에 코치님에게 다양한 질문을 올려 답변을 해주는 실시간 Q&A를 진행했다. 다양한 분야에서 종사하는 강의생분들이 질문을 올려주셨고, 솔직히 말하면 내가 겪은 질문이여서 공감이 되기도 했고, 내가 미래에 겪을 질문이라서 과연 어떻게 답변해주실까 궁금하기도 했다.강의 내용에 관한 현업에서의 추가적인 질문도 있었지만, 대부분 진로나 취업의 과정에서 현업자의 시각에 대해 조언을 요청하는 질문이 많았다. Q&A 시작전에는 마땅한 질문이 생각나지 않았는데, 코치님의 답변을 듣고 몰입이 되면서 궁금한 부분이 생겨나기도 했다.강의 막바지에 내가 물어본 질문은"깃허브 블로그에 개인 포트폴리오 부분을 추가해서 기업 지원할때 링크를 첨부하려고 하는데 개인 블로그를 오픈해두는게 좋을까요?"였다.질문하게된 이유는 개발자로 지원할때 보통 PDF 파일이나 노션 링크로 포트폴리오를 등록하는 경우가 대부분인데, 나는 깃허브 블로그를 운영중이라 깃허브 블로그의 메인페이지를 포트폴리오 화면으로 바꾸어 노션 링크를 대신하려고 준비중이였다. 이 과정에서 하나의 고민거리가 있었는데 앞서 과정을 진행하면 포트폴리오 화면을 통해 개인 블로그로 이동할 수 있었는데, 과연 개인 블로그를 오픈해두는 것이. 지원하는 과정에서 메리트가 있을지 디메리트가 있을지 였다.코치님이 조언해주신 부분은 포트폴리오 화면으로 프로젝트의 진행 과정 중 일어났던 과정을 잘 정리할 수 있으면 개인 블로그를 첨부하지 않아도 될것 같다고 하셨고, 포트폴리오 화면으로 충분히 전달하지 못한 경우에는 블로그를 사용하여 보여주는 것도 괜찮다고 하셨다. 앞으로 어떻게 포트폴리오를 준비할지 좋은 조언을 주셨다고 생각한다.마무리아직 1주차 이지만 전반적으로 강의에 만족하고 있으며 강의 내용도 잘 따라가고 있다고 생각한다. 중간 점검 과정을 통해 코치님에게 좋은 조언을 받기도 했고, 남은 과정도 열심히 진행해서 적어도 강의 주제인 자바-스프링-서버-배포는 확실하게 기반을 다지겠다고 마음을 가졌다.

백엔드인프런워밍업백엔드

지민철

1주차 발자국 작성-js

day2:FE 1번 과제 메뉴판github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/day2일단 이 과제를 하면서 느낌점이 참 많았다...일단...html,css,js 상호간의 연동이 상당히 많이 힘들다... ㄴ그 이유가 참 어이가 없는게 js없이 css,html 극히 기초만 배우고 바로 react,next,(+tailwind)로 넘어갔다...   ㄴ고등학교 동아리 부장이 취업하려면 프로젝트가 많아야 한다고 큰 기초도 없이 바로 프로젝트로 보냈다..당연하지만 내 생각대로 코드가 돌아가지가 않는다. ㄴ원래는 js를 잘 몰라서 그냥 리스트에다가 속성 추가해서 for문으로 돌려서 원하는것만 만들 예정이었다...  ㄴ허나 내 생각보다 list의 값들을 출력하는게 js만 써서 만들기가 어려워서 결국 onclick에다가 css를 바꾸는 설정을 넣어서 해결은 했다..허나 많이 문제점도 있고 단순 노가다로만 하여서 문제가 많다..시간 나면 그것도 한번 더 공부해봐야 할 것 같다. day3:FE 2번 과제 가위바위보github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/day3이번에도 느낀점들을 말해보겠다.....큰 고민 없이 할려다 보니 그만큼 줄이 겁나게 길어졌다.  ㄴ믈론 무조건적으로 짧은 코드가 좋은것은 아니라는 것을 알고있으나 그걸 감안해도 js만 90줄이 나올만한 문제는 아닌 것 같다.  ㄴ다음에는 좀 더 효울적인 해결방법이나 몇가지 함수들을 가져오자...여전히 js와 html연동이 힘들다.   ㄴreact 쓸때처럼 한페이지 내에서 될 줄 알았는데 어림도 없었다... 물론 불가능한 것은 아니겠지만 아직은 힘들다...  ㄴ단순히 (이름).style.(css명) 으로 가져오는게 아니라 다른 방법들도 찾아야 할 것 같다. day4:FE 3번 과제 퀴즈 맞추기github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/day4일단 구조는 4개의 숫자(더하는거 2개,정답 예시 2개)는 랜덤 함수로 가져왔다. 언제 "정답이 없습니다."가 나오는지 모르겠어서 였다. 만약 정답 예시 중 정답이 없다면 "정답이 없습니다."가 나오게 했다.(display:none은 역시 편하다.)무튼 맞추면 계속 이어지게 했고 틀리면 처음으로 돌아가게 만들었다. 맞춘 총점수와 최고기록도 나오게하면 좋을지도 모르겠다..이거는 그래도 js면에서 길어지기만 했지 어렵지는 않았다..물론 이것도 고치기는 해야 할 것이다... day5:FE 4번 과제 퀴즈 맞추기github:https://github.com/asdf1596/jsStudy/tree/main/gwajae/day5이게 역대급으로 어려웠다...물론 내가 강의를 제대로 보지 않은 것도 있지만 그래도 힘들었다...무튼 느낀점들은...확실히 내가 usestate같은 것에 너무 의존한것 같다. 물론 쓰라고 있는것이기는 하나 생각해보니 어느정도는 스스로 구현할수 있어야 한다고 생각한다. 이 생각을 한 이유가 처음에는 생각보다 간단하다고 생각했는데 여기서도 list의 값들을 html에 출력하는데 고생을 좀 했다. 오류도 있고...작동은 안돼고.. 그래서 그냥 스동으로 삭제하는 느낌으로 바꾸었다. 이러는게 좋지는 않지만 ai의 힘을 약간(?) 빌렸다. 그래도 이해만 한다면..?내가 js를 너무 얕보았다. 내가 이길 수 있을것이라 생각했는데 js가 이겼다.....수정도 집어넣으면 좋을 듯 하다..생각해보니 잘하면 될거같으니 시간나면 도전해봐야 할 것 같다.결론: usestate를 숭배해야해!

박지원

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

Section 1. 생애 최초 API 만들기1. 스프링 부트 프로젝트를 설정해 시작하고 실행하는 방법만들어져 있는 스프링 프로젝트를 다운로드 받아 IntelliJ를 통해 여는 경우: INntelliJ 실행 후 첫 화면의 Open을 통해 가져온다.메인 함수가 있는 클래스 옆에 있는 초록색 세모 버튼을 눌러 Run을 선택하면 실행된다.아무것도 없는 상태에서 새로 스프링 프로젝트를 시작하는 경우: https://start.spring.io/에 접속해 요소를 각각 설정해 준다.Project: 빌드 툴을 고르는 항목Language: 서버 개발 시 사용할 언어Spring Boot: 스프링 부트의 버전. 옆에 알파벳이 붙지 않은, 가장 최신 버전을 고르는 게 좋다.Project Metadata: 프로젝트에 사용될 다양한 이름을 설정하는 항목. Java의 버전은 11이 가장 많이 사용된다.Dependencies: 프로젝트에서 사용하는 라이브러리(*미리 만들어져 있는 기능을 가져다 사용하는 것)이나 프레임워크(*프로그래밍 개발 시 미리 만들어져 있는 구조에 코드를 가져다 끼워 넣는 것)위와 같은 설정을 마치고 Generate를 통해 프로젝트를 만들면 압축 파일이 다운로드 되고, 그 후의 과정은 '만들어져 있는 스프링 프로젝트를 다운로드 받아 IntelliJ를 통해 여는 경우'와 동일하다. 2. 서버 개발에 필요한 다양한 개념서버: 어떠한 기능을 제공하는 프로그램. 그 프로그램을 실행시키고 있는 컴퓨터네트워크: 인터넷을 통해 데이터를 주고 받게 하는 시스템HTTP: 웹을 통한 컴퓨터 간의 통신에 대한 표준화된 방식HTTP 요청: HTTP Method(GET, POST)와 Path(/portion)이 핵심이며, 요청에서 데이터를 전달하기 위한 방법은 쿼리와 바디이다. HTTP 응답: 상태 코드 API: 클라이언트와 서버는 HTTP를 주고 받으며 기능을 동작하고, 이때 정해진 규칙이다. 3. 스프링 부트를 이용한 GET API / POST API 개발API Specification(명세): API를 개발하기 전에 API의 HTTP method, HTTP path, 쿼리와 바디, API의 반환 결과를 결정해야 한다.GET API쿼리로 들어오는 값의 개수가 많아진다면? 즉 @RequestParam이 많아지면 코드가 길어지고, 실수의 여지가 생기므로 쿼리를 받는 Class를 만든다. DTO(Data Transfer Object) 객체: '쿼리'를 서버 안 Controller로 전달하는 역할POST API쿼리를 사용하지 않고 바디(Body)를 사용한다.Json: 바디에 데이터를 담아주는 방식 { "name": "최태현", "age": 99 }POST API의 경우에는 Body를 통해 데이터가 들어오기 때문에 @ReqestBody를 꼭 사용해주어야 한다.HTPP Body는 @ReqestBody를 통해 DTO에 매핑되고, Controller로 들어가 최종 결과를 반환한다.유저 생성 & 조회 API 개발유저 조회 시 필요한 JSON으로 결과 반환하기: Controller에서 그냥 객체를 반환하면, JSON으로 응답이 간다. 이때 객체에는 getter가 있어야 한다. Section 2. 생애 Database 조작하기디스크와 메모리의 차이, Database의 필요성 컴퓨터의 핵심 부품 세 가지: CPY는 연산담당, DISK는 장기기록, RAM(메모리)는 단기기억의 역할을 수행한다.서버를 실행시켜 API를 동작시키는 과정스프링부트 서버가 DISK에 파일로 존재한다. 서버를 실행하면 DISK의 코드 정보가 RAM으로 복사된다. API가 실행되면 연산이 수행되고, CPU와 RAM을 왔다 갔다 한다. (ex) POST API를 통해 생긴 유저 정보는 RAM에 쓰여 있다. 서버가 종료되면 RAM에 있는 모든 정보가 사라지므로 재시작하면 유저 정보가 없는 것. DISK에 정보를 저장하기 위해 DB를 사용하는 것. MySQL Database를 SQL과 함께 조작하기DDL(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 [조건]; 스프링 서버를 이용해 Database에 접근하고 데이터를 저장, 조회, 업데이트, 삭제하기스프링 서버와 DB 연결: application.yml 파일을 생성해 스프링 서버와 연결할 DB 정보를 설정한다.DB를 통해 데이터를 저장, 조회하기POST API를 DB를 이용하게 변경하기 (Controller)jdbcTemplate을 이용해 MySQL에 SQL을 보낸다."INSERT INTO user(name, age) VALUES(?, ?)"; 와 같이 값이 들어가야 하는 부분에는 ?를 사용한다.jdbcTemplate.update(sql, request.getName(), request.getAge());jdbcTemplate.update는 INSERT, UPDATE, DELETE 쿼리에 사용 가능첫 파라미터는 sql, ?를 대신할 값을 차례로 넣어줌GET API를 DB를 이용하게 변경하기 (Controller)jdbcTemplate.query(sql, RowMapper 구현 익명클래스): query를 사용하면 SELECT 쿼리를 날릴 수 있다.@Override 함수: ResultSet 객체에는 결과가 담겨있고, 이 객체에 getType("필드이름") 을 사용해서 실제 값을 가져온다.람다를 이용해 더 간결한 코드 작성도 가능하다.UPDATE API, DELETE API 예외 처리: 대상이 없으면 IllegalArgumentException과 같은 표준 예외를 throw해야한다.기본적인 코드 구조: 유저(대상)이 있는지 id나 name을 통해 확인한다→ 유저 데이터가 있다면 비어 있지 않은 리스트를 받아오고, 유저 데이터가 없다면 비어있는 리스트가 반환된다.→ if문으로 검사해서 유저가 존재하지 않으면 IllegalArgumentException을 던진다.  Section 3. 역할의 분리와 스프링 컨테이너좋은 코드(Clean Code)의 중요성코드를 작성하는 시간보다 읽는 시간이 훨씬 많다는 점을 고려해야 한다. 팀으로 협업하는 환경에서는 다른 사람이 작성한 코드를 읽어야 할 때도 있고, 내가 오래 전에 작성한 코드를 읽을 때도 있다. 코드를 읽어야만 맥락을 이해하고 기존 코드를 수정하거나 새로운 코드를 추가할 수 있다.클린코드를 읽으면 쉽게 코드를 읽고 이해할 수 있기에 중요한 것.기존의 Controller 코드에서는 한 개의 API가 너무 많은 역할을 수행하고 있다.API의 진입 지점으로써 HTTP Body를 객체로 변환현재 유저가 있는지, 없는지 등을 확인하고 예외 처리SQL을 사용해 실제 DB와의 통신 담당기존 Controller에서 하고 있는 역할을 분리하기(리팩토링)UserService 클래스: 현재 유저가 있는지 없는지 등을 확인하고 예외 처리하는 역할을 부여한다.UserRepository 클래스: DB에 SQL을 날리는 역할, 저장장치와의 접근을 담당한다.Layered Architecture: 각 클래스가 각자의 역할을 가지고 겹겹이 쌓인 것 UserRepository 클래스 자체가 JdbcTemplate를 갖도록 해서 파라미터를 통해 매번 넘겨주지 않아도 되게 한다.   <1주차 학습 내용 회고>진도표에 따라 강의 수강이 이루어지고 있다는 점은 스스로에게 수고했다고 말하고 싶다. 사실 1일차 과제부터 제시간에 제출하지 못했기에 (아직도..) 해결하는 대로 velog와 발자국도 수정할 예정이다.DB는 전공 수업에서 다뤘던 이후로 오랜만에 해 본 건데 API와 연결하는 부분이 아직 손에 익지 않아서 연습을 더 해봐야겠다.Java의 경우도 학교 수업에서 배웠던 거랑 다르게 조금 더 응용된 걸 많이 사용하고 있어서 새롭게 느껴진다.    <미션>과제12주차 발자국 작성 전까지 추가 예정 과제2GET API와 POST API를 직접 작성해 보는 실습LocalDate.parse를 이용해서 String을 DayOfWeek로 변환했다. LocalDate가 제공하는 메소드를 이용해 요일을 출력했다.리스트의 합을 구하는 것에 시간이 많이 소요되었는데, Controller에서 Request 클래스에서 return 받은 리스트 객체를 이용해 합을 구할 수 있었다.강의를 보며 그대로 따라하는 것보다 직접 해보려니 더 어렵게 느껴졌던 과제였다. 그래도 직접 적용해 보면서 이해도가 올라가고 있음이 느껴졌다.과제3익명 클래스, 람다 모두 프로그램/코드를 간결하게 한다. 특히 람다는 기존의 메서드 선언에 꼭 필요한 부분이 아닌 것은 생략할 수 있어서 클린하게만 코드를 작성한다면 추후에도 이용하기 좋은 방법 같았다.이외에도 코드의 가독성을 높일 수 있는 여러가지 방법을 공부했는데, 지금까지는 왠지 복잡하고 오히려 에러가 나면 디버깅 하는 것이 귀찮아 잘 쓰지 않았던 것들이었다. 앞으로는 열린 마음으로 스트림 API, 함수형 인터페이스 같은 것들을 사용해 보며 익숙해져야겠다.평소라면 강의 수강을 하면서도 더 알아보거나 공부할 생각을 안 했을텐데, 미션이라는 의무가 부여되었기에 조금 더 능동적으로 공부할 수 있던 일주일이었다. 미션 수행이 조금씩 밀리고 있는데 다음 주는 놓치는 미션 없이 모두 성공해 보겠다.

인프런워밍업클럽스터디

이혜리

[인프런 워밍업 클럽 스터디1기] 백엔드 - 1주차 회고

1주일간의 백엔드 공부를 정리해 보려한다.자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]위 강의를 듣고 1주일간 배운 것은 restful API 작성법,이를 database와 연결하는 법,람다식과 익명 클래스 차이에 대한 것이다. 이번주는 집중을 잘 못했다. 다른 일이 겹쳐서 강의 듣는 것 조차 버거웠는데,현재 13강까지 마쳤으며,과제는 1차,3차를 제출한 상태이다. 과제 기간이 2~3일 마다 1번인 것을 감안할 때,매일 강의를 2개씩 듣고,이에 대한 정리를 노션에 짧게 한다음,평일에 1번 , 주말에 1번 정리하는 식으로 내 개별 블로그에 쓰고,이를 각각 발자국 글로 작성 후,회고 형식으로 발자국 글을 쓰려 한다.별도로 과제에 대한 글도 개별 블로그에 쓰려한다. ot와 Q&A 를 참여했었는데Q&A에서 프로젝트 주제 선정은 자신이 가고 싶은 회사의 어플리케이션 혹은 관련 부분을 구현하는게좋을 것 같다는 답변을 듣고이 강의와 스터디를 마치고 어떤 프로젝트를 구현하면 좋을지 생각중이다.전반적으로 이번주는 스터디에 대한 적응을 하고 강의 초입부를 들은 상태이다.다음주도 힘내서 참여해야겠다. 

백엔드워밍업1기1주차회고백엔드

이혜리

[인프런 워밍업 클럽 스터디1기] 백엔드 - 3차 과제

진도표 3일차와 연결됩니다우리는 JdbcTemplate을 사용하는 과정에서 익명 클래스와 람다식이라는 자바 문법을 사용했습니다. 익명 클래스는 자바의 초창기부터 있던 기능이고, 람다식은 자바 8에서 등장한 기능입니다. 다음 키워드를 사용해 몇 가지 블로그 글을 찾아보세요! 아래 질문을 생각하며 공부해보면 좋습니다! 😊 [키워드]익명 클래스 / 람다 / 함수형 프로그래밍 / @FunctionalInterface / 스트림 API / 메소드 레퍼런스 [질문]자바의 람다식은 왜 등장했을까?람다식과 익명 클래스는 어떤 관계가 있을까? - 람다식의 문법은 어떻게 될까? 자바의 람다식 등장 배경람다식이 등장하게 된 이유는 불필요한 코드를 줄이고, 가독성을 높이기 위함이다.현재 실습하고 있는 '도서관리 애플리케이션'의 getmapping api 코드에서 람다식으로 바꾸기 전과 후를 비교해보자.처음에는 database를 연결하지 않았을 때 getmapping 상태이다.   database 연결 안된 상태 이를 database를 연결하면 아래와 같이 코드를 쓸 수 있다. 이때는 람다식을 적용하지 않았다. 람다식 적용하지 않고 database 연결 그후 람다식을 적용한 코드이다. 람다식 적용 겉으로는 new RowMapper 객체 선언과 @override 하여 정의하는 부분이 없어졌다. 따라서 더 간결해진 코드를 만들 수 있어 가독성이 높아진다.람다식과 익명 클래스는 어떤 관계먼저 람다식 사용법에 대해 알아보자.생략 가능한 부분이 많기 때문에 헷갈릴 수 있지만 대부분(매개변수) -> {실행코드}형식으로 작성된다.(예시)public interface Functional { int cal(int a, int b); } public interface Functional2 { void print(String str); } public interface Functional3 { void noArgs(); } // 1. 작성 가능한 모든 내용을 생략 없이 작성한 경우 Functional2 functional2 = (String name) -> { System.out.println(name) }; // 2. 매개변수의 타입을 생략한 경우 Functional2 functional2 = (name) -> { System.out.println(name) }; // 3. 매개변수가 한개여서 소괄호를 생략한 경우 Functional2 functional2 = name -> { System.out.println(name) }; // 4. 실행 코드가 한 줄이어서 중괄호를 생략한 경우 Functional2 functional2 = name -> System.out.println(name); // 5. 매개변수가 없어서 소괄호를 생략할 수 없는 경우 Functional3 functional3 = () -> System.out.println("functiona3"); // 6. 반환값이 있는 경우 return 키워드 사용하는 경우 Functional functional = (a, b) -> { System.out.println("print"); return a+b; }; // 7. 실행 코드가 반환 코드만 존재하는 경우 키워드와 중괄호 생략한 경우 Functional functional = (a, b) -> a+b; 그렇다면 익명 클래스는 무엇일까?프로그램에서 일시적으로 한번만 사용되고 버려지는 객체이므로 재사용이 되지 않아 이름이 없는 클래스이다.즉, 딱 한번만 인스턴스를 생성하기 위해서 선언되는 것이다. 익명 클래스(익명 객체)를 구현하는 방법은 아래와 같다.// 선언 방법 인터페이스명 변수명 = new 인터페이스명() { 인터페이스의 메서드 오버라이딩 } // MessengerTest.java public class MessengerTest { public static void main(String[] args) { /* 일반 클래스의 인스턴스 생성과 사용 */ GalaxyMessenger galaxy = new GalaxyMessenger(); System.out.println(galaxy.getMessage()); galaxy.setMessage("Hi, I'm Galaxy."); galaxy.changeKeyboard(); /* 익명 클래스의 선언과 사용 */ Messenger anonymousTest = new Messenger() { // 익명 클래스 선언 @Override public String getMessage() { // 인터페이스 메서드 오버라이딩 return "anonymousTest"; } @Override public void setMessage(String msg) { // 인터페이스 메서드 오버라이딩 System.out.println("anonymousTest에서 메시지를 설정합니다: " + msg); } }; // 익명 클래스의 멤버 사용 System.out.println(anonymousTest.getMessage()); anonymousTest.setMessage("Have a nice day!"); } }GalaxyMessenger 클래스는 앞서 표시한 Messenger 인터페이스를 구현하는 일반 클래스이다. new 명령문을 이용하여 인스턴스를 생성하였다.익명 클래스 또한 new 명령문을 이용하여 인스턴스를 생성하는데, 이 때 참조타입을 상속하는 인터페이스(혹은 클래스)로 지정해야한다는 것에 유의하자.익명 클래스의 멤버 사용 방법은 일반 클래스와 다르지 않다. 참조변수로 접근하여 사용한다. 그렇다면, 람다식과 익명 클래스는 어떤 관계가 있을까? 익명 함수와 매우 비슷하지만 불필요한 선언부들이 모두 생략되어 있고, 인터페이스 함수의 구현부만 정의하고 있어 코드가 가장 간결하다 즉, 같은 역할을 할 수 있지만 람다식이 더 간단하게 쓸 수 있는 것이다. [출처]https://wonyong-jang.github.io/java/2021/03/12/Java-Lambda-Expressions.html https://limkydev.tistory.com/226 https://velog.io/@balparang/Java-%EC%9D%B5%EB%AA%85-%ED%81%B4%EB%9E%98%EC%8A%A4Anonymous-Class

백엔드백엔드워밍업1기3차과제

김찬희

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

회고록 독학으로 공부를 하다보니 자기 객관화와 지금까지 뭔가 프로젝트를 처음부터 끝까지 완성해본 경험이 없고 부족하다는 생각이 들어서 무작정 신청하게 되었다. 처음에는 아 그냥 간단한 게시판 구현해보고 이후에 내가 기능 몇가지 추가해서 프로젝트 구현 하면 되겠다 정도로 가볍게 생각하고 들었던 강의였는데 강의를 하나씩 듣다보니 이전에 학습했던 내용들이 조립되는 느낌이 들어서 정말 개발에 흥미를 붙일 수 있었던 시간이었다. 사실 spring에 대해서 학습하다보면 전체적인 흐름을 놓치게 될때가 종종 있는거 같다. 스프링의 역사가 긴 만큼 하나의 기술에 대해 깊이 있게 파다보면 주변의 다른 기술과의 연결성을 잃을수 있다고 생각하는데 이 강의에서는 그 연결성에 대한 부분을 학습할 수 있어서 성장하는데 도움이 되었다.라이브러리 VS 프레임워크  라이브러리 : 프로그래밍을 개발할 때 만들어져 있는 기능을 가져다 사용하는 것 프레임워크 : 프로그래밍을 개발할 때 미리 만들어져 있는 구조에 코드를 가져다 끼워 넣는 것이때 강의에서는 요리에 비유를 했는데 김치 찌개를 만들때 라이브러리는 김치를 마트에서 가져오는 것, 프레임워크는 김치찌개 원데이 클래스에가서 만드는 것 이라는 설명이 이해하기 쉽게 와닿았다.@Annotation@SpringBootApplication : 스프링을 실행시키기 위해 필요한 다양한 설정들을 모두 자동으로 해주는 Annotation이다.@Annotation에 대한 추가 학습을 통해 개인블로그에 정리해보았다.https://velog.io/@chanheekim125/Annotation 네트워크란?네트워크 : 인터넷 주소 체계 ( 무언가(정보)를 전달할 때 필요한 체계)IP : 컴퓨터별로 갖는 고유 주소 ( ex) 244.69.51.9 ) 처럼 표시한다.DNS : 우리가 사이트에 접속할때 244.54.21.2 를 기억하고 입력할 수는 없으니까 ex) spring.com 등 이름을 사용PORT: 각 IP에는 여러가지의 프로그램을 사용하는데 이때 PORT 번호로 구분한다.HTTP와 API HTTP : 컴퓨터 간의 통신 표준 방식 ( 택배에서 운송장과 같은 개념 )HTTP 요청은 HTTP Method로 GET,POST가 주로 사용되며 PUT,DELETE 등이 있다.HTTP 요청에서 데이터를 전달하기 위해 쿼리(GET) 와 바디(POST)를 사용한다.이때 클라이언트와 서버는 HTTP를 주고 받으며 기능을 동작하는데 이때 정해진 규칙을 API라고 한다.API 개발하기 GET API POST API 직접 API 명세를 읽어보고 개발 해보면서 request를 받아서 데이터를 어떻게 처리하는지 알아보았다.https://velog.io/@chanheekim125/HTTP-API-%EA%B0%9C%EB%B0%9C데이터 베이스 이전 Section 에서는 그동안 Memory에 데이터를 저장하고 있었기 때문에 서버를 내리면 모든 데이터가 없어지는 현상이 발생했었다. 우리는 이러한 현상을 방지하기 위해 데이터를 DB에 SQL 문법을 사용해서 저장,조회,삭제,수정 하는 방법에 대해 학습하였다.SQL 문법은 정처기,SQLD 시험을 준비하면서 익숙했기에 개념보다는 MYSQL 실행툴에 익숙해 지는데 시간을 쓴거 같다. 정리 지금까지는 정말 기초라고 할수 있는 내용에 대해 학습해 보았다. 기본적인 API 기능을 구현할 수 있게 되었고 또, 무작정 강의만 수강해서 진도를 나가는 것이 아니라 과제를 하면서 스스로 동작 순서나 구현방법을 생각해보는 시간에 가장 많이 성장하는 나를 볼 수 있었다.

백엔드인프런워밍클럽StudyBE

코파

인프런 워밍업 클럽 1기 FE 4번 과제 (책 리스트 나열 앱)

4번 과제 (Day4)(책 리스트 나열 앱)깃허브 저장소 주소 :https://github.com/devellybutton/frontEnd_warmingUp_study/tree/master/04.%EC%B1%85%EB%AA%A9%EB%A1%9D기능 :'책 이름', '책 저자', '읽은 날짜'를 입력하고 버튼을 누르면 표 아래에 하나씩 등록이 됨.각 항목별로 수정, 삭제가 가능함. (연필: 수정, 디스켓: 수정완료)CSV 파일로 저장 가능함. (화면 맨 오른쪽 첫 번째 아이콘)리스트 내 전체 내용 삭제 가능함. (화면 맨 오른쪽 두 번째 아이콘)LocalStorage에 임시저장하여 페이지 로딩시 불러옴. (화면 맨 오른쪽 세 번째 아이콘) GIF:'책 이름', '책 저자', '읽은 날짜'를 입력하고 버튼을 누르면 표 아래에 하나씩 등록이 됨.각 항목별로 수정, 삭제가 가능함.LocalStorage에 임시저장하여 페이지 로딩시 불러옴.CSV 파일로 저장 가능함.리스트 내 전체 내용 삭제 가능함.  간단한 후기 :4개월간의 프론트엔드 부트캠프를 마치며 저는 기본적인 기능 구현 능력을 갖추게 되었습니다. 하지만 부끄럽게도 제대로 된 투두리스트 하나를 완성하지 못한 채 수료를 하여 큰 부족함을 느꼈습니다. 그래서 수정, 삭제 및 추가 기능까지 구현해 보았습니다.필요한 기능만 간단하게 구현하는 것과, 모든 기능을 완벽하게 구현하는 것의 차이를 절실히 느꼈습니다. 기능 추가 및 고도화를 통해 예상치 못한 문제들과 부딪히면서, 개발 속도가 크게 저하되는 것을 이번에 절실히 경험했습니다. 물론 실력이 부족한 것도 이유가 될 것입니다.인터넷에 있는 소스가 정말 많은데, 단순히 정보를 검색하고 코드를 복사하는 것이 아니라 본인의 프로젝트 상황에 맞게 적용하는 것이 중요하다고 생각하였습니다.항상 부족한게 보이는 데 시간이 적어서 고민이 됩니다. 처음에 생각한 기능들은 다 구현하였으나, 아직까지 다음과 같은 문제가 있습니다.1) CSS가 제대로 적용되지 않음. 2) CSV 파싱할 때 콤마(,)를 기준으로 하여서 책 이름이나 저자에 콤마가 들어갈 경우 문제가 발생함. 3) 짝수번째 표(tbody의 td)의 맨 마지막열 CSS 배경 제거 필요함.  트러블슈팅 :굵직하게 3개의 문제점이 있었습니다. 이벤트 위임버튼을 클릭하여 행을 삭제하려면 클릭 이벤트를 추가하여 행을 삭제하는 함수를 호출해야 하였습니다.각 항목 생성 후, row.innerHTML을 사용하면 행이 삭제될 때 HTML이 완전히 새로 고쳐지므로 이벤트 리스너도 함께 삭제되어 제대로 적용이 되지 않는 문제가 있었습니다.이때 버튼의 상위 요소에 클릭 이벤트 리스너를 추가하고, 클릭된 버튼에 따라 수행처리를 하여 해결하였습니다.수정 전 (위) / 수정 후 (아래)if (deleteBtn) { deleteBtn.addEventListener("click", (e) => { e.preventDefault(); removeBook(e); }); } // 책 목록 개별 삭제 function removeBook(e) { const row = e.target.closest("tr"); if (row) row.remove(); }table.addEventListener("click", (e) => { if (e.target.id === "delete-btn") { e.preventDefault(); removeBook(e); } }); // 책 목록 개별 삭제 function removeBook(e) { const row = e.target.closest("tr"); // 하위에 있는 tr 선택하도록 함 if (row) row.remove(); } 클래스의 초기화 방법 수정ConvertToCSV 클래스의 getCSV 메소드에서 tbody와 thead에서 tr을 모두 찾아 반환되어야 하였습니다.하지만 초기에 페이지 로딩 시에는 tbody에 내용이 없어서 이 메소드를 사용하여 tr을 찾으면 tbody에 있는 내용이 없는 상태이기 때문에 정상적으로 작동하지 않았습니다.이에 따라 이 클래스의 constructor에서가 아닌 내부 메소드에서 tr을 찾도록 수정하였습니다. 브라우저에서는 tbody의 td가 있는 상태이므로 이 방법으로 문제가 해결되었습니다.CSV 파일 생성 시 한글만 깨지는 오류Blob 객체를 생성할 때 type에 charset=UTF-8을 넣어 주지 않아, 한글이 깨진 것이 아닌가 생각하였습니다.하지만 charset=UTF-8을 넣어도 같은 문제가 발생하여 [csv]를 ["\uFEFF" + csv]로 변경하니 해결되었습니다. csvFile = new Blob([csv], { type: "text/csv; charset=UTF-8" }); downloadLink = document.createElement("a"); downloadLink.download = filename; 이미지 출처 :https://www.flaticon.com/free-icon/download_9153957?term=download&page=1&position=16&origin=search&related_id=9153957https://www.flaticon.com/free-icon/restart_6532052?term=reset&page=1&position=18&origin=search&related_id=6532052https://www.flaticon.com/free-icon/bookmark_10238285?term=bookmark&page=2&position=38&origin=tag&related_id=10238285개발할 때 참고한 링크 :https://beomi.github.io/2017/11/29/HTML-Table-to-CSV/https://stackoverflow.com/questions/31959487/utf-8-encoding-issue-when-exporting-csv-file-in-javascript

웹 개발워밍업클럽FE과제

임하스

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

시작공부하며 개인적으로 중요하다 생각하는 부분과 복습할 내용, 헷갈리던 부분들을 정리해보았다. 프레임워크와 라이브러리에 의존적이던 나를 되돌아보는 시간이었던 것 같다.  정리Console 객체console.log(...data: any[]): void 로그console.error(...data: any[]): void 에러console.warn(...data: any[]): void 경고console.table(tabularData?: any, properties?: string[]): void 객체 데이터를 테이블로 표기console.time(label?: string): void, console.timeEnd(label?: string): void 사이에 코드를 입력하여 속도 측정 가능. label을 넣어서 무엇에 대한 측정인지 설명을 달 수 있음console.count(label?: string): void, console.countReset(label?: string): void 호출된 횟수 반환(특정 데이터가 몇 번 호출됐는지) 변수의 참조 범위(scope)자바스크립트는 블록 레벨 스코프 호이스팅var, let, const 셋 다 호이스팅 됨근데 var는 선언과 undefined로 할당되기 때문에 참조가 가능하고, let과 const는 선언만 되고 할당되지 않음 자바스크립트 타입원시타입은 콜스택에 저장(불변성을 가짐)참조 타입 값은 힙에 저장값에 대한 주소는 콜스택에 저장원시타입 : Boolean, String, Number, null, undefined, Symbol참조타입 : Object, Array, functuon, classes, …자바스크립트는 동적 타입이다어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당) 가능배열(Array)은 typeof를 쓰면 obejct로 나오기 때문에, Array.isArray(변수) 메서드를 통해 배열인지 확인할 수 있다배열이 object 타입이라고 나오는 것이 잘못된 것이 맞는데, 공식에서도 이것을 인지하고 있지만 당시에 이미 object로 처리하여 개발한 곳들이 너무 많아서, 혼란을 일으키지 않기 위해 그대로 object로 두기로 했다고 한다 자바스크립트 타입 변환String(변수), 변수.toString() 차이Number(변수), parseInt(변수) 차이자바스크립트가 자동으로 변수 타입을 변경하는 기준(ex. string 타입 + number 타입 ⇒ string 타입) Loopsfor … in : 객체의 속성을 따라 반복 ⇒ 객체 순회객체의 열거 가능한 속성들을 반복할 때 사용됩니다.객체의 속성들을 순회하며 각 속성의 이름(키)을 반환합니다.일반적으로 객체의 속성을 순회할 때 사용되며, 배열을 순회할 때는 사용하지 않는 것이 좋습니다.for … of : 반복 가능한 객체를 반복 ⇒ 배열 순회반복 가능한(iterable) 객체(배열, 문자열, 맵, 셋 등)의 요소들을 반복할 때 사용됩니다.각 요소의 값을 반환합니다.객체의 속성을 직접 열거하지 않고 요소들을 순회할 때 사용됩니다.forEach() : void 타입, for 루프는 await과 함께 작동하지만 얜 아님.map() : return 필요for 루프가 forEach보다 빠름 Window 객체**window 객체**브라우저에서 제공하는 객체브라우저의 창(window)을 나타냄. 브라우저 창에 대한 정보를 알 수 있고, 제어도 가능var 키워드를 통해 변수를 선언하면 window 객체의 프로퍼티가 됨let과 const는 window 객체 내부의 블록에서 선언된 것 → 전역 객체의 프로퍼티로 활용될 수 없음DOM(Document Object Model)메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해주는 객체 모델window.documentBOM(Browser Object Model)웹 브라우저와 상호작용하는 데 사용되는 객체 모델window.location, window.history, window.navigator 등속성window.innerWidth 속성브라우저 창의 내부 너비컨텐트 영역의 너비콘솔창/스크롤 바가 있는 경우에는 이를 제외한 영역의 너비window.outerWidth 속성브라우저 창의 외부 너비창의 테두리를 포함한 전체 외부 너비**window.scrollX 속성**x축 scroll의 시작점 좌표**window.scrollY 속성**y축 scroll의 시작점 좌표**window.location 속성**현재 창의 URL을 나타내는 객체**window.history 속성**브라우저의 세션 기록을 조작하고 탐색할 수 있는 객체window.location.href vs window.history.push()일반적인 이동은 history.push(), 이동과 함께 새로고침이 필요한 경우는 window.location.href 추천공통점 : 페이지 이동 location.href history.push() HTTP 요청 수행 O X 새로고침 O X Applcation 상태 유지(ex. 리액트의 state) X O 용도 현재 페이지의 URL 제어 브라우저의 탐색 히스토리 조작**window.navigator 속성**브라우저의 정보와 기능을 제공하는 객체주로 브라우저의 종류, 버전, 운영 체제, 언어 설정 등을 확인하고, 이에 따라 웹 애플리케이션을 조건부로 실행하는 데 사용함웹 페이지 빌드 과정(CRP, Critical Rendering Path)HTML → DOM TreeCSS → CSSOM Tree1, 2렌더 엔진이 문서를 읽어들여 파싱어떤 내용을 페이지에 렌더링할 지 결정비용이 크지 않은 작업DOM Tree + CSSOM 결합 → Render Tree브라우저가 DOM과 CSSOM을 결합화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리 출력Layout(reflow)브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산Paint실제 화면에 그리기 DOM노드 타입Element, Attribute(deprecated), Text node, Comment node, Document itself, Doctype모든 타입의 노드에 적용 가능한 탐색 프로퍼티parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling요소 노드(Element 타입)에만 적용 가능한 탐색 프로퍼티parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling자식 노드바로 아래의 자식 요소후손 노드중첩 관계에 있는 모든 요소자식 노드와 그 아래 자식 노드 모두 포함**element.innerHTML**html까지 출력됨**element.innerText****innerText**는 해당 요소의 텍스트 콘텐츠만을 반환HTML 태그를 고려하여 렌더링된 텍스트를 반환함(공백을 하나로 처리)CSS로 display: none; 또는 **visibility: hidden;**으로 숨겨진 요소의 텍스트는 반환하지 않음**innerText**는 보다 시각적으로 화면에 나타나는 텍스트만을 반환하며, 렌더링된 결과를 고려하여 처리됨**element.textContent****textContent**는 해당 요소의 모든 텍스트 콘텐츠를 포함하여 모든 하위 요소의 텍스트도 포함하여 반환HTML 태그를 무시하고 텍스트만을 고려함. 즉, HTML 구조를 고려하지 않고 텍스트만을 처리HTML 태그의 텍스트도 그대로 반환되며, 스크립트에서 태그를 제거할 필요가 없음**textContent**는 보다 일반적인 텍스트 콘텐츠를 반환하며, 숨겨진 요소의 텍스트도 포함될 수 있음**element.childNodes**text 노드가 포함된 NodeList 반환text 노드 : line break(엔터, 한 칸 띄움) 포함하여 반환배열 같아 보이지만, 유사 배열 객체인 컬렉션 타입컬렉션 타입 특징배열에서 사용하는 메서드를 사용할 수 없음배열의 반복 for … of, forEach() 사용 가능 (for … in 불가능)**element.children**children element nodes 반환text 노드도 포함 DOM 제어parentNode.appendChild(node) : node 추가parentNode.removeChild(node) : node 삭제parentNode.replaceChild(newNode, oldNode) : oldNode를 newNode로 대체 Event Listener & Event 객체이벤트를 등록하는 방법자바스크립트 코드에서 프로퍼티로 등록 (ex. onload)HTML 태그에 속성으로 등록 (ex. onClick)addEventListener 메서드 활용element.addEventListener(이벤트명, 실행할 함수명, 옵션)Event 객체event.clientY : 브라우저로부터의 마우스 이벤트가 발생한 거리 Y 좌표event.offsetY : 요소로부터의 마우스 이벤트가 발생한 거리 Y 좌표event.target : 실제 이벤트가 시작된 타겟 요소this 또는 event.currentTarget : 핸들러가 할당된 요소 Event 종류UI 이벤트load문서나 객체가 로드 완료 되었을 때 발생change객체의 내용이 변동되거나 focus를 잃었을 때 발생resize객체의 크기가 바뀌었을 때 발생scroll스크롤바를 조작할 때 발생error에러가 발생했을 때 발생키보드 이벤트keydown키를 눌렀을 때 발생keyup키를 눌렀다 뗐을 때 발생keypress사용자가 누른 키의 문자가 입력되었을 때 발생마우스 이벤트click객체를 클릭했을 때 발생dblclick객체를 더블클릭했을 때 발생mousedown마우스를 클릭했을 때 발생mouseout 마우스가 요소 밖으로 나갔을 때 발생 (자식 요소에 대해서도 이벤트를 처리함)mouseleave마우스가 요소 밖으로 나갔을 때 발생 (자식 요소에 대해서는 이벤트를 처리하지 않음)mouseover 마우스가 요소 위로 올려졌을 때 발생mousemove마우스가 움직였을 때 발생mouseup마우스에서 손을 뗐을 때 발생포커스 이벤트focus객체에 focus가 되었을 때 발생blur객체가 focus를 잃었을 때 발생폼 이벤트inputinput, textarea 요소 값이 변경되었을 때 발생changeselect box, check box, radio button의 상태가 변경되었을 때 발생select텍스트를 선택했을 때 발생reset리셋 버튼을 눌렀을 때 발생submit사용자가 버튼키 등을 활용해 폼을 전송할 때 발생cut/copy/paste사용자가 폼 필드의 콘텐츠를 잘라내기/복사/붙여넣기했을 때 발생동일한 요소에 이벤트가 적용되어 있을 때, 이벤트 발생 순서keydown → keypress → keyupmousedown → mouseup → click이벤트의 3단계 흐름 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 Event Bubbling이벤트 버블링이란, 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로(bubble up) 전달 되는 것을 의미함타깃 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생3번 요소, 2번 요소, 1번 요소에 이벤트 핸들러가 있다면, 3번 요소 핸들러 → 2번 요소 핸들러 → 1번 요소 핸들러 순으로 실행됨event.stopPropagation() 메서드를 활용하여 버블링을 중단하면 부모 요소(상위 요소)의 핸들러는 호출되지 않음 Event Capturing이벤트 캡처링이란, 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 의미함addEventListener() 메서드의 두 번째 인수에 { capture : true } 옵션을 넣어주면 캡처링 과정을 확인할 수 있음 이벤트 위임 (Event Delegation)하위 요소의 이벤트를 상위 요소에 위임하는 것을 의미. 즉, 하위 요소의 이벤트를 상위에서 제어함동일한 기능을 가진 요소임에도, 추후에 코드를 통해 추가된 요소일 경우 이벤트 리스너를 다시 등록해줘야 하는 번거로움이 있음 → 이벤트 위임을 활용하여 해결할 수 있음하지만 주의할 점이 한 가지 있음. 상위 요소에 등록된 이벤트 핸들러가 하위 요소에 있는 요소에 대해서만 동작하도록 설정해야함. 이렇게 하지 않으면 상위 요소의 아무 곳이나 클릭했을 때도 이벤트가 발생할 수 있음하위 요소가 버튼이라고 쳤을 때, 이벤트 핸들러에서 클릭된 요소가 버튼인지 확인하는 로직이 필요함  회고역시 기본기가 가장 중요하다는 것을 다시 느꼈다. React를 쓰며 state로 인해 자동으로 업데이트 되는 화면에 익숙해졌던 것 같다. 프레임워크와 라이브러리에 대한 의존 없이도 스스로 구현해낼 수 있도록 연습하는 것이 좋겠다.  

프론트엔드인프런워밍업스터디클럽FE1기발자국

짙은

[인프런 워밍업 스터디 클럽 1기] 백엔드 1주차 회고록

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]를 수강하고인프런 워밍업 클럽에 참여하여 쓰는 회고록입니다.   Plus 😍 정해진 진도표를 참고해 내 일정에 맞게 꾸준히 강의를 듣는건 오랜만인데 생각보다 더 좋다. 특히 강의의 구조가 그저 진도를 나가는데만 집중하는게 아니라 서론(문제 제기), 이론(제기된 문제의 해결), 결론(해당 개념이 나오게 된 이유와 어떻게 해결했는지에 대한 요약 정리)으로 이루어져 있어, 무턱대고 하루 n강을 수강하는 것보다 진도표를 참고해 유사한 내용을 하루 단위로 묶어서 들을 수 있어서 좋았다. 특히 이런 구조가 좋았던데는 개인적인 배경이 있는데...... 현재 나는 프론트엔드 개발자로 입사했으나, 회사의 방침(?)이 바뀌어 풀스택 개발자로 (반강제) 커리어 전환을 해야만 하는 환경에 있고, 백엔드 역량을 단시간내에 끌어올려야만 하는 상황이다. 이미 작성된 코드들을 참고해 CRUD를 (굉장히 천천히) 만들어낼수는 있지만, 왜 이런 구조로 나뉘어져 있는지는 코드를 통해서 알기 힘들었다. 다른 개발자들도 동일한 여건에 처해 있기 때문에 이런 구조에 대한 궁금증을 선뜻 물어보기가 쉽지 않은 환경인데, 강의에서 이런 부분들을 상세히 알려주어 도움이 많이 되었다. 특히 18강 Controller를 3단 분리하는 강의를 들으며 Layered Architecture에 대해 공부할 때 막연하게 '세 단계로 나누어서 코드를 작업하네'라고 생각했던 부분에 대해 명확한 이유를 알게 되어, 앞으로 백엔드 코드를 읽거나 작성할 때 도움이 많이 될 것 같다.   Minus 🥶 생각보다 내가 자바를 잘 모른다! 자바 책 또는 강의도 병행하면 좋겠지만, 사실 현재 진도표에 맞춰 강의를 듣는 것도 빡빡하다. 실습이 대부분이다보니 출퇴근 시간 지하철에서 강의를 듣는다거나 하는 식으로 병행하기 힘들다는 한계도 있다. 강의를 들으며 모르는 내용이 나올 때마다 검색으로 부족한 부분을 채워나가는 방식으로 (일단은) 메꾸어야 할 것 같다. 어떤 것들을 공부했었는지 키워드를 따로 정리했다가 백엔드 스터디가 종료되고 자바 기초 공부를 시작할 때 그 키워드들을 예의주시하며 공부하는게 최선일 것 같다. 회사의 개발 환경은 맥북인데, 집에서는 윈도우 PC를 이용하고 있다. 인텔리제이 키 매핑이 다르다보니 한번씩 혼란스럽다.   Interesting 🤔현재 DB에 적재된 데이터를 외부 팀의 요청에 맞게 추출하거나, 수정해야 할 때가 있는데 이런 요청과 쿼리를 정리해뒀다가 어드민 페이지에 추가 기능으로 구현하면 어떨까? 하는 생각이 들었다. 실제로 이전에도 반복되는 요청에 대해 추가 기능을 만들면 좋을 것 같다고 백엔드 개발자분께 건의한 적이 있지만 부정적인 답변을 받았었던 경험이 있다. 그렇지만 내가 프론트엔드부터 백엔드까지 모두 개발한다면 아무런 문제가 없지 않을까.   

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

노은빈

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

발자국 남기기벌써 일주일이나 지나고 있다니 시간이 진짜 빠르다. 아무래도 신입을 많이 뽑지 않는 지금 시점에서 할 수 있는 건 공부뿐이라고 생각해서 미루고 미루다 자바 공부를 시작하며 스프링 공부를 해야겠다고 맘 먹었다. 근데 또 혼자하면 늘어지는 스타일이라 차라리 같이 공부하고 돈도 내고 해야 열심히 할 것 같아 스터디를 듣게 되었다..!! 근데 생각보다 내 일정이 빡빡해지는 바람에 1주차인 지금은 시간에 쫓기듯 공부하고 있지만 담주부터는 여유롭게 들을 수 있을 것 같다. 그럼 이제 1주간의 회고를 시작해보겠다!! Day0강의를 듣기에 앞서 OT를 온라인으로 진행했다. 앞으로 어떻게 진행되는지의 전반적인 부분을 말씀해주셨다.그리고 자바에 대한 짧은 특강을 해주셨다. 자바는 인터프리터? 컴파일 언어?프로그래밍 언어는 컴퓨터가 이해할 수 있는 언어로 번역해야한다 번역의 종류→ 통짜번역 ⇒ 컴파일러→ 그때그때 번역 ⇒ 인터프리터자바는 하이브리드 언어임(둘 다 가능) .Java → (compile) → .class → JVM컴파일도 하면서 한줄 한줄 읽음 시작부터 유용한 정보를 알려주셔서 넘 좋았다. tmi지만 최근에 정처기 실기를 공부해서 아는 내용이라 공부를 안 하고 있는 건 아니구나 라는 안심을 조금 했다😅 Section0강의를 시작하기 전의 섹션 0 에서는 강의 시작 전 준비와 수업 자료에 대한 내용이었다.대부분의 내용은 이미 알고 있던 거고 다 다운받아져 있던 거라 설명만 조금 들었다.지금 내 노트북은 맥북 m2인데 사실 그냥 homebrew로 다운 받으면 버전이 안 맞거나 잘못 받아서 경로가 이상해지는 현상이 많이 발생한다.이전에 MySQL을 설치하면서 많은 충돌이 있어서 나중에 잊지 않으려고 블로그와 노션에 열심히 정리해두었다.https://velog.io/@dmsqls19/ERROR-mac에서-MySQL-완전-삭제-후-재설치-오류Homebrew-사용했을-경우나중에 같은 오류가 있다면 이 글을 보고 있는 분도 잘 해결했으면 좋겠다! Section1섹션 1부터는 본격적인 강의 시작이다.자바를 공부하기 전에 알아두면 좋은 강의 2개를 올려주셨는데 정말 유익한 내용이다.첫번째 강의에서는 Java라는 언어를 컴퓨터가 알게 되기까지의 과정이 나오는데 컴파일을 통해 사람의 언어를 컴퓨터가 인식하게 된다고 한다. 자바는 다른 언어와 다르게 컴파일러 하나로 모든 운영체제에 사용할 수 있다.JDK > JRE > JVM 라서 JDK를 설치하면 JRE와 JVM도 함께 설치된다.JDK의 버전과 종류는 다양한데 LTS라는 안정화된 버전을 사용하는 것이 좋다.두번째 강의에서는 빌드와 실행에 대해 배우는데 빌드란 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립 SW 가공물로 변환시키는 과정이다. 테스트 코드도 빌드 과정의 일부인데 테스트 코드를 작성해서 개발 속도 및 안정성의 품질을 높여주는 것이 좋다. 그 다음 오픈 소스와 우리가 만든 코드를 합치는 과정을 패키징이라 하는데 패키징을 하면 빌드 과정의 끝이다. 실행(Run)을 해서 내가 작성한 코드를 작동시킬 수 있는데 Artifact가 나올 수도 있고 나오지 않을 수도 있다는 점에서 빌드와 차이점이 있다. 빌드는 수동으로 하게 되면 실수가 많이 나올 수 있으므로 빌드 툴을 이용하는 것이 좋은데 요즘 가장 많이 쓰이는 빌드 툴은 maven과 gradle이다.이제 본격적으로 강의를 시작하는데 처음에는 스프링 프로젝트를 시작하는 방법에 대해 배운다. 그 다음 @SpringBootApplication 에 대해 배우면서 어노테이션이 무엇이고 서버란 무엇인지에 대해 배운다.첫번째 과제가 바로 어노테이션에 관한 과제였다. 스스로 찾아보면서 공부를 하니 이해가 더 잘 되는 것 같기도 하면서 아리송하기도 하다. 📄과제1. 어노테이션 그 후 네트워크와 HTTP, API에 대한 것을 배우는데 백엔드를 공부하는 사람에게 필요한 내용을 배워서 좋은 강의라고 느끼는 부분이았다.api에 대해 배운 후 get과 post를 직접 해보는데 처음에는 더하기, 곱하기를 해보며 postman도 써보고 코드도 직접 작성해봤다. 그 다음에 유저 정보 조회를 하는 get api와 유저 정보를 저장하는 post api에 대해 배웠다. 미리 get과 post를 해보고 하니 더욱 쉽게 느껴졌다. 두번째 과제는 get api와 post api를 직접 연습하는 과제였는데 자바에 좀 덜 익숙해서 그런지 좀 어려운 과제였다. 그래도 두 번 보니 처음 과제를 마주했을 때보단 쉬웠다.📄과제2. GET API, POST API Section2섹션2에서는 서버와 데이터베이스를 연결하는 과정이다. 데이터베이스는 MySQL을 사용했다. 데이터베이스가 서버에 필요한 이유는 메모리에서만 유지되는 유저 정보를 서버단에 올리기 위해서 필요하다. 강사님이 서버에 올리는 두 가지 방법을 알려주셨는데 하나는 인텔리제이 유료 버전으로 인텔리제이에서 하는 방법과 터미널에서 MySQL을 사용하는 방법이었다. 나는 인텔리제이에서 하는게 더 편한 것 같아 첫번째 방법을 사용했다.데이터베이스에 대해 공부하고 sql 문법에 대해 배운다. 나는 최근에 정처기 시험 때문에 이미 너무 많이 봐서 어렵게 느껴지진 않았다. 그 후 스프링과 데이터베이스를 연결하는 과정을 배우는데 코드 따라치는 건 어렵지 않은데 자바가 익숙한 건 아니라서 이해를 하는데 조금 오래 걸렸다. 그래도 오래 보다보면 또 이해가 되기 때문에 조금 더 많은 시간을 들여 공부를 해야겠다고 생각했다.연결 후에는 유저 업데이트와 삭제를 해보면서 정말 db에 유저 정보가 들어가는지 확인했다. 그 다음 유저 정보가 없을 경우에 업데이트, 삭제가 되는 예외처리를 해주었다.그리고 과제로는 sql을 연결해보며 나온 람다식에 대해 조사하는 과제였다. 찾아보면서 이해 못한 부분을 조금 더 이해하게 되었다.📄과제3. 익명 클래스와 암다식 5일차에는 중간점검이 한 번 있었는데 질문하는 것을 답변해주는 시간이었다.나도 신입 개발자로서 궁금했던 점들을 다른 분들이 많이 질문해주셔서 답변을 들으며 엄청 유익해서 뭔가 이런 시간이 조금 더 많으면 좋겠다는 생각이 들었다.이번주는 시간이 조금 빠듯해서 진도표보다 조금 덜 공부했다. 다음주는 시간이 많아서 아마 더 할 수 있을 것 같다. 한 주 동안 공부해보면서 아직 자바 공부가 많이 부족하다는 걸 깨달았다. 그래서 다음주는 자바 공부를 하면서 강의를 들을 예정이다. 공부하면서 회고도 하고 과제도 하니 진짜 같이 공부하는 기분이 들어 더 열심히 해야겠다고 다짐했다!! 📚공부했던 내용 정리 노션 https://quartz-mastodon-ac1.notion.site/6ae20b419ca9400c94b4df9ab8f2f3da?pvs=4 

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