블로그

13blueberry

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

1주차 발자국 배웠던 것1주차에서는 기본적인 네트워크의 구성과 API, Database, 좋은 코드와 controller에 대해서 학습하였다. 좋았던 것 백엔드 스터디를 신청하게 된 이유는 간단하다. 서버 배포를 해보고 싶었기 때문이다. 본격적인 강의를 듣는 것은 처음인데, 큰 구조를 먼저 따로 공부하지 않고 필요한 것부터 배워도 강의 구성을 워낙 잘 해주셔서 나무만 보는 것이 아니라 큰 숲부터 볼 수 있어서 좋았다.  간단한 프로젝트를 위해 과거에 장고 프레임워크를 벼락치기한 경험이 있었고, 그때 간단하게 당장은 이렇다 하고 넘어간 통신 부분에 대해 자세히 배울 수 있어서 좋았다. 확실히 혼자 벼락치기 하는 상황에서 영어를 만나다 보니 급한 마음이 영향을 주어서 결국 애매하게 아는 상태가 되거나, 이도 저도 아닌 상태로 프로젝트를 엉성하게 마무리 한 경험이 있었다. 하지만 비유를 통해 잘 설명해 주시니 그동안 애매하게 알게 되면서 가진 의문점 등을 모두 해결할 수 있었다.  힘들었던 것이 커리큘럼을 시작하려고 급하게 자바 벼락치기를 해서 그런가 아직 이해하는데 오랜 시간이 걸린다. 모르는 것은 검색해 가면서 진행하지만 스터디에 많은 시간 소요가 들어서 일정 측면에서 부담스러울 때가 있다. 개인적인 문제이기에 이를 극복해 나가려면 주말이나 공휴일을 활용하는 것이 중요해 보인다. 다행히 2주차에는 월요일 진도가 없어서, 복습의 기회로 삼으면 좋을 것 같다. 과제 1질문 1. 어노테이션을 사용하는 이유 (효과) 는 무엇일까?질문 2. 나만의 어노테이션을 어떻게 만들 수 있을까?어노테이션의 사용 이유의 핵심은 간소화에 따른 오류 최소화라 생각했다. 간결한 코드로 수동으로 오랜 시간을 소요할 수 있는 작업을 간단하게 만들어주고, 그 과정에서 오류까지도 잡아줄 수 있다. 또한 어노테이션의 특성 상 자바 프레임워크들은 특정 기능을 쉽게 구현할 수 있었다.나만의 어노테이션은 @interface키워드를 사용하여 정의할 수 있다.과제 2 API 명세를 통해 GET, POST API 만들기여러 블로그글과 gpt를 참고해서 구현해냈다. 확실히 스스로 하나의 예시를 만들어 내니까 이해가 더 잘 되었다. 코드 작성보다 아직 폴더 구조를 이해하는 것이 더 힘들었다. 여러 번 코드가 의미하는 바를 따라가며 구조 자체를 먼저 이해하려고 했던 기억이 남아 있다.과제 3질문 1. 자바의 람다식은 왜 등장했을까?질문 2. 람다식과 익명 클래스는 어떤 관계가 있을까?람다도 결국 코드 간결화를 위해 도입되었다. 또한 람다식은 익명 클래스를 더 간결하게 표현하는 방법이라 볼 수 있기에, 람다식 자체는 결국 익명 클래스다. 

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

정진서

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

첫 걸음인프런 워밍업 클럽 1기 BE에서 자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지] 강의를 수강하며 작성하였다.강의 학습HTTP와 APIHTTP란 다른 컴퓨터로 데이터를 보내기 위한 데이터 표준이다.API는 정해진 약속에 따라 특정 기능을 수행하는 코드이다. HTTP Method 중 하나인 GET은 쿼리를 통해 정보를 보낸 후 데이터를 요청한다.→ /add?number1=10&number2=20 Controller는 API가 실행되는 입구와 같다.@GetMapping("/add") public int addTwoNumbers(@RequestParam int number1, @RequestParam int number2) { return number1 + number2; } GET 방식에서 매개변수를 각각 하나씩 입력받을 때에는 @RequestParam을 사용하여 변수에 쿼리의 값을 넣는다.만약 매개변수가 많을 경우, DTO 객체로 만들어 관리한다.@Getter public class CalculatorAddRequest { private final int number1; private final int number2; public CalculatorAddRequest(int number1, int number2) { this.number1 = number1; this.number2 = number2; } }GET 방식의 DTO 객체는 반드시 생성자를 포함해야 한다. DTO 객체를 이용한 Controller는 다음과 같다.@GetMapping("/add") public int addTwoNumbers(CalculatorAddRequest request) { return request.getNumber1() + request.getNumber2(); }DTO를 이용할 때는 @RequestParam을 제거해야 하며 변수를 객체로 감싸 불러오기 때문에 getter를 사용해야 한다. 마찬가지로 HTTP Method인 POST는 Body를 통해 정보를 보낸다.객체 표기법인 JSON을 사용하고, List를 사용하거나 JSON 안에 JSON을 사용하는 것도 가능하다.POST 방식에서 DTO를 이용한 Controller는 다음과 같다.@PostMapping("/multiply") public int multiplyTwoNumbers(@RequestBody CalculatorMultiplyRequest request) { return request.getNumber1() * request.getNumber2(); } @RequestBody를 사용하여 HTTP Body로 들어오는 JSON을 DTO 객체 형태로 변환한다.GET 요청의 @RequestParam과는 달리 DTO 객체를 사용해도 Annotaion을 생략할 수 없다. GET 요청과 달리 POST 요청은 생성자가 필요하지 않다. Domain(Entity)와 DTO의 차이DTO는 계층 간 데이터 교환을 위해 사용된다. 반면, Domain은 DB 테이블과 매핑되어 데이터를 저장하거나 관리하는 실제 비즈니스 도메인을 표현한다. DTO는 단순히 어떤 데이터로 통신할 것인지 정의하고, 상세한 정의는 Domain에서 한다. Spring에서 Database 사용하기private final JdbcTemplate jdbcTemplate; public UserController(JdbcTemplate jdbcTemplate) { this.jdbcTemplate = jdbcTemplate; } @PostMapping("/user") public void saveUser(@RequestBody UserCreateRequest request) { String sql = "insert into user (name, age) values (?, ?)"; jdbcTemplate.update(sql, request.getName(), request.getAge()); }JdbcTemplate를 이용하면 Spring에 SQL을 전달할 수 있다.SQL문을 작성하여 문자열 변수로 저장하는데, 값이 들어갈 부분에 ?를 사용하면 데이터를 넣을 수 있다.  과제 수행1일차 과제 : JAVA Annotation어노테이션은 실제 데이터가 아닌 메타데이터로써 클래스와 메서드에 추가하여 다양한 기능을 부여한다.반복적인 코드 작성을 줄일 수 있어 코드량이 감소하고, 코드의 역할을 명확히 지정할 수 있어 유지보수가 용이하다는 장점이 있다.사용자가 원하는 기능을 수행하는 커스텀 어노테이션을 만드는 방법도 알아보았다. 2일차 과제 : GET & POST API날짜를 받는 API를 구현할 때, String으로 날짜를 받은 후 LocalDate로 변환하는 과정을 거쳤다.그러나, 스프링 부트 2버전에서는 @DateTimeFormat을 사용해 LocalDate를 바로 받을 수 있다고 한다.3버전대에서는 어노테이션 없이 LocalDate를 바로 받을 수 있다. 3일차 과제 : 람다식과 익명 클래스익명 클래스란 이미 정의되어 있는 부모 클래스의 자원을 일회성으로 재정의한 클래스이며, 자식 클래스를 정의할 필요 없이 객체화가 가능하다.람다란 자바의 인터페이스를 익명 클래스로 구현한 익명 구현 객체를 짧게 표현한 것이다. 메서드 타입과 이름, 매개변수 타입, 중괄호, return문을 생략하고 화살표 기호를 넣는다. 4일차 과제 : 과일 가게 API 만들기enum 타입을 통해 과일의 판매 여부를 ‘SOLD’, ‘NOT_SOLD’의 두 가지 상태로 구분하였다.COALESCE()를 사용하여 팔린 과일 혹은 팔리지 않은 과일이 존재하지 않을 경우, NULL이 아닌 0으로 표시되도록 하였다.쿼리의 결과가 하나이므로 queryForObject를 이용해 SQL의 결과를 직접 long 타입의 객체로 매핑하였다.  느낀 점Spring의 기초를 복습하면서 ‘이건 왜 이렇게 쓰일까’와 같은 질문을 던지며 천천히 학습할 수 있었다.특히, 인프런의 각 강의에 있는 질문 게시판을 활용하였다.강의를 들으며 의문이 든 부분들은 이미 선배 러너들이 질문을 했고, 강의자 분께서 자세하게 답변을 달아 주셨기 때문에 편하게 학습할 수 있었다. 매일 과제가 있지만 하루에 학습할 양을 안내해 주는 진도표가 존재하고, 하루치 공부 양이 그렇게 많지 않았기 때문에 오히려 꾸준하게 하루 공부를 진행할 수 있어 좋았다.일주일을 돌아보며 작성하는 발자국은 그동안 배운 내용을 정리하고, 느낀 점을 회고할 수 있어 좋은 방법인 것 같다.강의를 들으며 개조식으로 정리한 내용을 글로 풀어 쓰니 내가 얼만큼 이해하고 있는지 확인할 수도 있다.

백엔드워밍업클럽BE발자국1주차

변지섭

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

이번 학기 취준을 시작하면서 자바를 공부하기 시작했습니다. 시간이 된다면 스프링도 공부해봐야겠다는 가벼운 마음으로 스터디를 신청했는데, 자바 + 스프링이 만만한 친구들이 아니어서 마음을 고쳐먹었습니다. 학습 내용 요약:Section 0: 스프링으로 프로젝트를 시작하기 위한 환경 세팅 방법을 배웁니다.1. 환경 세팅 과정멘토님(태현님)께서 정말 상세하게 알려주시기 때문에 환경 설정에 큰 어려움은 없었습니다.다만, 저는 MySQL을 이전에 설치했던 적이 있어서 설치 과정에 오류를 겪었습니다. (M1 에어 기준)다른 분들께 도움이 되실까 싶어 해결 방법을 남깁니다. "[MySQL] Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)" 이 오류를 겪었는데요, MySQL 서버와 소켓으로 통신이 잘 안 된다는 얘기입니다.저는 /opt/homebrew/var/sql에 이전 데이터가 남아있어서 충돌이 발생했던 것 같습니다.해결 순서는1) brew uninstall mysql로 기존 MySQL을 삭제2) rm -rf /opt/homebrew/var/mysql로 남은 파일을 제거3) brew install mysql로 MySQL을 재설치4) 설치 후, cd /opt/homebrew/Cellar/mysql/{mysql 버전}/support-files (경로 이동)5) ./mysql.server start로 서버를 실행입니다.출처: [https://velog.io/@shyuuuuni/MySQL-Cant-connect-to-local-MySQL-server-through-socket-tmpmysql.sock-2-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-%EC%82%AC%EB%A1%80] Section 1:생애 최초 API 만들기(GET, POST API)스프링 부트를 처음부터 시작하는 방법과 서버 개발의 기본이 되는 네트워크 기본 지식, 그리고 GET, POST API를 작성하는 방법을 배웠습니다.1. 라이브러리 vs. 프레임워크- 기존에 라이브러리가 작은 범위, 프레임워크는 좀 더 큰 범위구나 생각하고 있었는데, 강의에서"라이브러리는 미리 만들어진 기능을 (클래스, 메서드 등) 가져다 사용하는 것이고, 프레임워크는 다 준비된 코드에 필요한 정보만 넣어 사용하는 것이다. 즉, 라이브러리를 활용해 프로그램을 작성하는 것은, 김치를 사서 김치찌개를 만드는 것이고, 프레임워크를 활용해 프로그램을 만드는 것은, 원데이 클래스에 가서 선생님이 시키는 대로 김치찌개를 만드는 것이다."는 얘기를 듣고 차이점이 이해되었습니다. 예를 들면, java.lang '패키지'의 System.out.println을 사용하는 것이지, java.lang 프레임워크의 println을 쓰는 게 아닙니다. 2. GET, POST API- 기존에 파이썬으로 몇 번 서버를 작성한 적이 있어 할만하다고 생각했는데, 자바와 스프링으로 API를 구현하면서 에러를 많이 만났습니다.1) private 필드를 사용해야 했는데, getter가 없어서 406 에러가 발생2) 파라미터를 받는 생성자만 정의해두고, 기본 생성자는 정의하지 않아서, 배열을 정상적으로 읽어오지 못하는 문제를 만났습니다. 그리고, 멘토님께서 주신 과제를 수행하면서 스프링보다 자바가 부족하다는 것을 느꼈습니다. 자바 공부를 더 열심히 해야겠습니다. Section 2:생애 최초 Database 조작하기JDBC 템플릿을 활용해 DB를 직접 조작해보았습니다. 파이썬으로 DB를 조작하는 것과 비슷해서 이해가 잘 됐습니다.1. 에러 핸들링업데이트, 삭제 API의 경우 값이 업데이트 되지 않았거나, 삭제되지 않은 경우에도 Status 200을 하지 않도록 에러 핸들링을 한 부분이 기억에 남습니다. 2. 람다식과 익명 클래스 차이람다식과 익명 클래스의 차이를 정리하다 보니, 그리 만만한 주제가 아니라는 생각이 들었습니다. 오라클에서 제공하는 자바 튜토리얼에는 내포 클래스(Nested Classes)라는 주제로 Local Classes부터 설명이 되어 있습니다. Local Classes -> Anonymous Classes -> Lambda Expressions 순으로 코드가 간단해지고, 담을 수 있는 정보의 양도 줄어듭니다. 하지만, 세 경우 모두 새로운 클래스를 만드는 것보다 코드가 간단해진다는 공통점이 있습니다.출처: https://docs.oracle.com/javase/tutorial/java/javaOO/lambdaexpressions.html Section 3:역할의 분리와 스프링 컨테이너좋은 코드는 왜 중요한지, Controller를 Controller / Service / Repository 로 3단 분리하는 과정에 대해 배우고 스프링 컨테이너에 대한 기본 지식을 배웠습니다. 1. 좋은 코드(Clean Code)와 역할의 분리사용자 요청을 통해 들어온 HTTP 바디 및 헤더를 처리하는 Controller부분과, DB 서버와 통신하며 값을 저장, 조회, 수정, 삭제하는 Repository, Controller와 Repository를 이어주는 Service까지 역할에 따라 기능이 분리되면서, 코드가 더 간단해지는 것을 볼 수 있었습니다. 2. 스프링 컨테이너 & 스프링 빈스프링 서버를 시작하면 컨테이너라는 클래스 저장소를 시작하게 되는데, 이 안에는 스프링 빈이라고 하는 클래스들이 등록되고, 스프링 컨테이너가 스프링 빈 간의 의존성을 관리해준다는 내용을 배웠습니다.그런데, 한 가지 궁금한 점이 있었습니다. 서버가 시작되고 스프링 컨테이너가 시작된다는데, 왜 컨테이너 안에 서버가 들어가는 게 아니고, 서버 안에 컨테이너가 들어가는지 궁금했습니다.  스프링 컨테이너와 도커 컨테이너가 헷갈려서 검색해보았는데, 둘은 이름은 같지만 아예 다른 개념입니다. 스프링에서 얘기하는 컨테이너는 주로 자바의 객체의 라이프사이클을 관리하는 기능을 합니다. 한편, 도커의 컨테이너는 실행 환경을 가상화하는 방법으로 이름만 같습니다. 그러니까 컨테이너 안에 서버가 들어간다고 할 때는, 도커의 컨테이너를 이야기 하는 것이고, 스프링 서버가 시작돼서 스프링 컨테이너가 시작했다고 하는 것은 서버 내부에 자바 객체를 관리하는 컨테이너가 시작했다는 이야기입니다. 3. IoC and DI수업 시간에 스프링 빈을 이용하면, 사용자는 코드의 변경이 거의 없이 스프링 컨테이너가 필요한 스프링 빈을 찾아서 인스턴스화한다는 내용을 배웠고, 이러한 방식을 IoC(Inversion of Control, 제어의 역전), DI(Dependency Injection, 의존성 주입) 라는 개념을 배웠습니다. IoC, DI 개념이 조금 덜 와 닿았는데, 아래의 글을 읽으면서 조금 이해가 되었습니다. https://velog.io/@ohzzi/Spring-DIIoC-IoC-DI-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0 글의 내용을 요약하자면 DI는 "패턴"이고, IoC는 프로그램의 제어권을 역전시키는 "개념"입니다. IoC를 구현하기 위해 DI를 사용할 수 있다.로 정리하는 것이 좋은 것 같습니다. 수업 시간에 배운 생성자를 사용하는 방식(Constructor Injection, 스프링 권장), Setter를 사용하는 방식(Setter Injection), 인터페이스를 주입하는 방식(Interface Injection)이 있습니다. 이 중 생성자와 Setter를 이용하는 방식은 수업 때 다루었지만, 인터페이스를 이용하는 방식은 처음 보았습니다. 하지만 세 가지 방식 모두 A라는 객체의 의존성을 외부에서 만들어 넣는(Dependency를 Injection) 하는 방식입니다.IoC, DI를 활용하면 코드가 더 깔끔해지고, 클래스의 테스트가 쉬워진다고 하는데, 테스트 를 공부한 후에, 이게 어떤 의미인지 직접 확인해봐야겠습니다. 스터디에 임하는 자세:스프링을 공부한지 이제 1주차이지만, 스프링이 간단한 프레임워크가 아니라는 것이 느껴졌습니다. 강의를 들으면 들을수록, 스터디 이후에도 계속 공부해야 겠구나 잘하려면 더 많은 시간을 들여야겠다는 생각이 들었습니다. 그리고 자바를 아직 너무 몰라서, 학교 수업 시간에 배운 내용 뿐만 아니라, 프로그램도 더 많이 작성해보고, 알고리즘 문제도 많이 풀어봐야겠습니다.

강예인

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

강의 수강일주일 동안 학습했던 내용IntelliJ설치, Spring 환경 설정, MySQL 설치개발을 위한 기본적인 환경설정을 해주었다. 네트워크 기초API 통신을 위한 기본적인 API동작 방식에 대해 학습했다.데이터베이스데이터베이스 세팅과 CRUD에 대해 학습했다.API 제작GET,POST,PUT,DELETE를 써서 사용자를 등록하고 수정하고 삭제하고 조회했다.사용자 정보가 없을 경우에 대해 예외처리를 했다.클린 코드클린코드가 왜 중요한지에 대해 학습했다.Controller가 하나의 기능만 하도록 분리하는 작업을 했다.미션1. 어노테이션어노테이션이 무엇인지와 장단점에 대해 알아보고 나만의 어노테이션을 만들어보았다.미션2. API 실습두 수의 합,차,곱을 반환하는 API제작LocalDate를 활용하여 날짜 요청시 요일 반환 API제작배열 안의 숫자를 모두 더하는 API 제작미션3. 람다식자바에서 람다식이 왜 생겨났는지와 람다식 문법을 알아보았다.회고참가 계기내가 주로 쓰고 있는 언어는 javascript와 C#인데 한국에서는 java를 주로 써서 블로그를 봐도 java에 대한 내용이 더 많이 보이기도 했고 코딩 테스트에서나 개발자를 채용할 때도 대부분 java가 기준이였다. 그래서 나도 한 번 java를 사용해서 서버를 만들어볼까 생각했었고 마침 인프런 워밍업 클럽 1기 스터디 모집 글을 보게 됐다. java를 안해본지 좀 오래됐는데 마지막으로 java를 쓴지는 한...3년 전이였나 기억도 나질 않는다. 그래도 기초부터 시작하니 커리큘럼대로 따라가기만 하면 문제 없을 것 같아서 신청하게 되었다.새로운 것IntelliJ  내가 처음에 java를 배웠을 때 Eclipse를 썼는데 이젠 IntelliJ를 쓰나보다. 솔직히 java는 내 관심 영역은 아니었기에 현재 쓰고 있는 컴퓨터엔 전혀 세팅이 되어 있지도 않았다. 내가 친숙한건 vscode,Visual Studio 이것 뿐.. Spring boot도 처음 써본다... mysql?  mysql은 써보긴했는데 이것도 대학생 때 썼으니 오래 전이긴하다. Oracle이랑 비슷해서 문제는 없긴한데 bigint 타입이 있어서 이건 뭐지? 했는데 ORACLE에서 NUMBER(19)를 표현한 거였다. 조금씩 다른데 적다가 헷갈리긴한다. 강의에서 IntelliJ에 DB연결해서 사용하는 부분이 있었는데 유료라서 굳이 돈을 써야할까 싶어서 CLI 창으로 했다. 미션미션 1. 어노테이션어노테이션이 무엇인지와 나만의 어노테이션을 만들어보는 미션이 있었는데 어노테이션이라는 개념을 처음 들어봤다. 그래서 찾아봤는데 C#에서 어튜리뷰트와 좀 비슷한 것 같았다. 이번에 flutter도 시작했는데 dart에도 어노테이션을 지원한다는 것을 알게됐다. java에서 annotation을 만들어보면서 다른 언어에는 어떻게 작동하는지 비교하면서 해결했다.미션2. API 실습  문제2번에서 C#에서 DateTime이 java에서 localDate를 쓰는 것을 확인했다. 작동 방식은 비슷한 것 같았다. 처음에 요청 받을 때 LocalDate로 받는 방식을 썼었다. 에러가 나서 설마 LocalDate로 받아와서 그런가 싶어서 String으로 바꿨었는데 결국 오타 때문에 안된 거였었다. 근데 바꾸기 귀찮아서 다시 안바꿨다. 과제가 끝나고 멘토님이 스프링 부트 2.x.x 버전대에서는 @DateTimeFormat 이라는 어노테이션을 사용해서 LocalDate 를 바로 받을 수 있고 3.x.x 버전 대에서는 어노테이션 추가 없이 LocalDate를 받을 수 있다고 답변 달아주셔서 String으로 받은게 조금 찔려서 다시 수정했다.미션3. 람다식자바에서 람다식에 대한 과제를 내주셨을 때 C#과 javascript,dart에서 쓰고있어서 반가웠다. C# LINQ와 비슷한 스트림(Stream) API도 알게 되었다. 각 언어별로 람다식으로 예제를 만들어서 연습해봤다.느낀점이번주 동안 강의를 듣고 미션을 수행하면서 각 언어 별로 어떻게 다른지 비교하는 방식을 통해 오히려 java에 대한 내용 뿐만 아니라 다른 언어를 이해하는데 도움이 된 것 같다. 언어 별로 독특한 기능과 차이점을 보면서 언어마다 어떤 문제를 해결하기위해 도입했는지 스토리를 찾아보는게 재밌었다.이번주 동안 진도표와 과제제출을 성실하게 수행한 나한테 칭찬한다..ㅎㅎ진도표와 과제제출을 통해 나태한 나에게 압박감을 주는 스터디가 나한테 맞는 것 같다.다음주에도 열심히 따라가야지!!

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

성우

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

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

백엔드

김설하

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

 강의 수강인프런 워밍업 클럽 스터디 1주차이다. JavaScript의 전반적인 이론을 복습하였다. 기술 면접을 대비하고자 강의 제목을 보았을 때 내가 먼저 설명해보고 막힌 부분이 있으면 그 부분을 메모해두었다가 확실하게 공부하는 식으로 진행했다.이제는 옛말이지만 수학의 정석 책을 사면 집합(1장) 부분만 닳아 있는 사람들이 많다고 하고 실제로도 그렇다.,ㅎ 모든 학습에 적용되며 경각심을 가질만한 공통의 경험이라고 생각하여 힘조절에 신경쓰려고 했다. 형식이나 타입 변환 같은 부분은 느슨하게 보고, 자주 까먹거나 헤매게 되는 비동기나 이벤트 루프 부분을 집중해서 보았다. 일주일 동안의 학습 방식을 4L식으로 회고해본다.Liked (좋았던 점) + Learned (배운 점) :우선 공식적으로 할 일이 생겨서 너무너무 좋았다 ◠‿◠ 배웠지만 어디에 사용해야할까 막막할 때 이렇게 미션들이 주어지면 최대한 적용해보는 플레이그라운드가 되어서 즐겁다. 또한 A-Z 강의를 들으며 기술 면접 준비 차 자바스크립트를 복습할 수 있어서 더없이 좋다. 또한 과제를 통해서 DOM을 직접적으로 조작하여 기능을 구현하였는데 html을 시멘틱하게 설계하고, css를 입히고, js로 생명력을 불어넣는 과정이 그 어떤 초심으로 돌아간 것 같아서 즐거웠다.  Lacked (부족한 점) : 미션 수행률이 더디다. 이론의 부족한점에 치중하는 경향이 있는데 이론 공부를 하다가 미션이 많이 밀렸다. 우선 완주 목표치는 채우는 것은 당연하고 웜업 스터디가 진행되는 기한 내에 80% 이상의 과제를 하는 것을 목표로 잡았다.이론적으로 부족한 파트 : 이벤트 위임, this, Intersection observer, 커링이벤트 위임은 이론적으로는 잘 받아들이지만 코드로 볼 때 직관적으로 들어오는 느낌은 아니라서 코드 위주로 복습을 해야 한다.커링과 클로저를 엮어 설명한 아티클을 읽었던 기억이 있는데, 다시 한 번 찾아 읽어야겠다.처음 목표는 스터디에서 배운 파트를 You don't know JS Yet 교재로 딥하게 파고드는 것이었다. 힘조절에 신경썼다고 하지만 기본 내용이 완벽하게 숙지되었는가 하는 사실에 매몰되어서 심화 공부를 못하고 있다. 완벽주의를 버리는 연습을 해야 한다.구현을 하다 보면 ‘이왕이면’ 싶어서 CSS를 신경 쓰거나, 내가 쓰는 코드가 맞는 방식일까 생각하게 되는데 이게 시간 잡아먹히는 요인이 아닐까 싶다. 미션이 하루에 하나씩 나오는 꼴이라는 걸 생각하면 어느정도 선에서 타협을 보거나 조절해야 할 듯 싶다.Longed For (바라는 점) :하루의 마감 시간을 정해두고 공부하는 게 좋을 듯하다. 특히 낮시간엔 강의를 듣다가 까무룩 보내고, 뒤늦게 과제를 시작했다가 밤이 늦어지는 경우가 종종 있었다.5/6까지 휴일이니 쉬는 날을 이용해서 이번주의 과제를 최대한 맞춰 해놓고 다음주부터는 진도표에 맞춰서 미션과 강의를 진행할 것이다. + 미션 발자국 기록 제때제때 하기타입 공부할 때 '원시 타입은 Call Stack 메모리 공간을 사용하지만 참조 타입의 경우 Heap 이라는 메모리 공간을 사용한다.' 라는 문장이 있었는데 CS와 접목시켜 이 문장을 제대로 이해하고 싶다.미션 제출 글이 아닌 회고 글을 첫번째 글로 작성하게 되었는데, 미션3까지 완성이 되는 대로 갈무리하여 미션 제출 발자국(1~3)을 빠른 시일 내에 제출하자.  

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

김 동현

인프런 워밍업 클럽 스터디 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주차회고백엔드