블로그

최신순
인기순
좋아요순

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

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

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

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

자료구조와 알고리즘시간복잡도: 알고리즘의 실행 시간을 입력 크기의 함수로 표현한 것자바스크립트 실행 환경 구축: Node.js나 브라우저를 사용해 JS 코드를 실행할 수 있는 환경 설정배열: 연속된 메모리 공간에 동일한 타입의 데이터를 저장하는 자료구조연결리스트 개념: 노드들이 데이터와 다음 노드의 참조를 가지고 연결된 선형 자료구조연결리스트 구현: 노드 클래스와 리스트 클래스를 정의하여 삽입, 삭제, 탐색 기능 구현스택 개념: LIFO(Last In First Out) 원칙을 따르는 선형 자료구조스택 구현: 배열이나 연결리스트를 사용해 push, pop 등의 연산 구현큐 개념: FIFO(First In First Out) 원칙을 따르는 선형 자료구조큐 구현: 배열이나 연결리스트를 사용해 enqueue, dequeue 등의 연산 구현덱 개념과 구현: 양쪽 끝에서 삽입과 삭제가 가능한 자료구조로, 배열이나 이중 연결리스트로 구현해시테이블 개념: 키를 값에 매핑하는 자료구조로, 빠른 검색을 위해 해시 함수 사용셋 개념과 구현: 중복을 허용하지 않는 컬렉션으로, 해시테이블을 기반으로 구현 가능운영체제운영체제 개요: 하드웨어와 사용자 간의 중개자 역할을 하는 시스템 소프트웨어운영체제의 역사: 일괄 처리 시스템부터 현대의 다중 사용자 시스템까지의 발전 과정운영체제의 구조: 커널, 시스템 콜, 사용자 인터페이스 등으로 구성된 계층적 구조컴퓨터 하드웨어와 구조: CPU, 메모리, 저장장치, 입출력 장치 등의 기본 구성요소컴퓨터의 부팅 과정: BIOS/UEFI 실행부터 운영체제 로딩까지의 단계적 과정인터럽트: 외부 이벤트나 예외 상황을 CPU에 알리는 메커니즘프로그램과 프로세스: 프로그램은 정적인 코드, 프로세스는 실행 중인 프로그램의 인스턴스멀티프로그래밍과 멀티프로세싱: 여러 프로그램의 동시 실행과 여러 프로세서를 사용한 병렬 처리PCB: 프로세스의 상태 정보를 저장하는 데이터 구조프로세스 상태: 생성, 준비, 실행, 대기, 종료 등의 프로세스 생명주기컨텍스트 스위칭: 실행 중인 프로세스를 전환하는 과정프로세스 생성과 종료: fork(), exec() 등의 시스템 콜을 통한 프로세스 관리쓰레드: 프로세스 내에서 실행되는 더 작은 실행 단위CPU 스케줄링 개요: 프로세스들 간에 CPU 시간을 할당하는 방법다중큐: 우선순위나 특성에 따라 프로세스를 여러 큐로 관리하는 스케줄링 기법스케줄링 목표: CPU 사용률 최대화, 처리량 증가, 대기 시간 최소화 등FIFO: 가장 단순한 스케줄링 알고리즘으로, 먼저 도착한 프로세스를 먼저 실행1주차 후기국비지원 교육을 듣고 취업을 하면서 CS 공부를 해 본 적이 없다보니 이름만 들어보고 개념을 모르는 내용들이 많아 학습에 대한 필요성을 느꼈는데, 때마침 인프런에서 워밍업 클럽으로 CS 코스가 열려서 신청하게 되었다.쉽게 풀어서 설명해주시는 감자 코치님의 강의 영상 따라 가다보니 기본적인 내용을 이해하는 데 큰 어려움은 없었던 것 같다.코치님 왈, 잘 모르겠으면 그림을 그려가면서 이해하라고 했는데 앞으로는 그림 그려가면서 이해해보는 것도 좋을 것 같다.미션은 강의에서 들은 내용과 추가적으로 궁금해서 찾아보았던 내용을 토대로 해결할 수 있었다.이번주는 좀 바쁘게 몰아서 들은 감이 있는데, 다음주는 차근차근 추가적인 내용도 찾아가며 강의를 듣고 싶다.

알고리즘 · 자료구조･인프런･인프런워밍업클럽･CS･운영체제･자료구조･알고리즘･감자･1주차

[인프런 워밍업 클럽 2기 CS] 1주차 미션

운영체제 1.while(true){ wait(1); // 1초 멈춤 bool isActivated = checkSkillActivated(); // 체크 }위 코드는 1초 마다 플레이어가 스킬을 사용했는지 체크하는 코드입니다. 이 방식은 폴링방식입니다. 1초마다 체크하기 때문에 성능에 좋지 않습니다. 이를 해결하기 위한 방식으로 어떤 걸 이용해야 할까요?이러한 경우에는 인터럽트 방식을 사용하는 것이 적합합니다. 스킬이 활성화될 때만 시스템에 알림이 가므로, 지속적인 폴링 없이 효율적으로 이벤트를 처리할 수 있습니다. 2. 프로그램과 프로세스가 어떻게 다른가요?프로그램 : 실행 가능한 코드가 저장된 정적인 파일프로세스 : 실행 중인 프로그램의 인스턴스. 메모리에 로드되어 실행되는 동적인 개체 3. 멀티프로그래밍과 멀티프로세싱이 어떻게 다른가요?멀티프로그래밍 : 단일 CPU에서 여러 프로그램을 번갈아 실행하여 CPU 사용률을 높이는 기법멀티프로세싱 : 여러 CPU나 코어를 사용하여 실제로 여러 작업을 동시에 처리하는 기법 4. 운영체제는 프로세스를 관리하기 위해서 어떤 것을 사용하나요?운영체제는 프로세스 제어 블록(Process Control Block, PCB)을 사용하여 프로세스를 관리합니다. PCB는 프로세스의 상태, 프로그램 카운터, 레지스터 등의 정보를 포함합니다. 5. 컨텍스트 스위칭이란 뭔가요?컨텍스트 스위칭은 현재 실행 중인 프로세스의 상태를 저장하고, 다음에 실행할 프로세스의 상태를 복원하는 과정입니다. 이를 통해 여러 프로세스를 번갈아 실행할 수 있습니다. 자료구조와 알고리즘1. 여러분은 교실의 학생 정보를 저장하고 열람할 수 있는 관리 프로그램을 개발하려고 합니다. 이 때 여러분이라면 학생의 정보를 저장하기 위한 자료구조를 어떤 걸 선택하실 건가요? 이유를 함께 적어주세요.해시 테이블 사용이 적합합니다.빠른 검색 속도: 학생 ID나 이름으로 O(1) 시간 복잡도로 정보 검색 가능효율적인 삽입과 삭제: 새로운 학생 추가나 졸업생 삭제도 O(1) 시간 복잡도로 가능유연성: 학생별로 다양한 정보를 키-값 쌍으로 저장 2. 여러분은 고객의 주문을 받는 프로그램을 개발하려고 합니다. 주문은 들어온 순서대로 처리됩니다. 이 때 여러분이라면 어떤 자료구조를 선택하실 건가요? 이유를 함께 적어주세요.큐(Queue) 자료구조를 선택하는 것이 적합합니다.FIFO(First-In-First-Out) 원칙: 큐는 먼저 들어온 주문이 먼저 처리되는 FIFO 방식을 자연스럽게 구현간단한 구조: 간단한 주문 추가(enqueue)와 처리(dequeue) 연산공정성: 모든 주문이 들어온 순서대로 처리효율성: O(1) 시간 복잡도를 가지는 주문 추가와 처리 과정

알고리즘 · 자료구조･인프런･인프런워밍업클럽･CS･운영체제･자료구조･알고리즘･감자･1주차

워밍업 클럽 2기 BE 1주차 발자국

1주차 배운 내용 요약클린코드의 중요성 알아가기가독성 -> 글이 잘 읽히는 것이 중요하다. 나 뿐만 아닌 다름 사람이 코드를 읽었을 때 얼마나 잘 이해할 수 있을까?회사에서 일을 할 때 코드를 읽는 것이 대부분유지보수성 -> 추상이란? 추상에 대해서 생각해보기추상이란 무엇일까?구체화 된 어떤 것들을 중에서 중요한 것만 추출하여 파악하는 것.어떤 일면만을 추상화하고, 다른 측면은 버린다.컴퓨터 측면에서 추상화8 byte -> 1bit, 4bit -> int 자료형추상화 레벨 - 고수준 언어, 저수준 언어고수준 언어는 레벨이 높다저수준은 언어는 레벨이 낮다.적절한 추상화는 복잡한 데이터와 로직을 단순화 한다.잘못된 추상화는 Side-effect를 야기시킨다. 그러기 때문에 추상화를 잘 알고 사용해야 한다.이름을 잘 지어야 한다.이름짓기단수 복수 구분하기 이름 줄이지 않기은어/방언 사용하지 않기좋은 코드를 보고 습득하기메서드와 추상화메서드 내부는 구체화된 내용메서드의 시그니쳐(반환타입, 메서드명, 파라미터)는 추상화된 레벨메서드 내부의 추상화 레벨을 잘 확인한다. -> 더 구체화 된 레벨이 있을 경우 메서드로 추출하여 레벨을 맞춘다.메서드명, 반환 값, 파라미터를 잘 확인한다.구체화 된 내용들을 적절하게 담기 이름void 대신 충분히 반환할 만한 값이 있는지 고민하기파라미터 타임, 개수, 순서를 통해 의미를 전달할 수 있다.매직 넘버, 매직 스트링의미를 갖고 있으나, 상수로 추출되지 않는 숫자와 문자열 등 -> 상수 추출로 이름을 짓고 의미를 부여한다가독성, 유지보수성 증가논리 사고의 흐름Early Returnreturn 문을 사용하여 else 사용을 줄인다. 사고의 depth 줄이기1. 중첩 if, for중첩된 반복문 또는 조건문을 없앨 수 있도록 구체화된 내용을 메서드로 추출하는 등 추상화하여 중첩을 줄인다.무조건 1depth로 만드는 게 아닌, 추상화를 통한 사고 과정의 depth임을 알아야 한다.2. 사용할 변수는 가깝게 선언변수는 사용하는 곳과 가깝지 않으면 잊어버린다.3. 공백 라인도 의미를 가진다.4. 부정어 줄이기부정어는 생각을 한번 더 거치게 한다.반대를 뜻하는 이름으로 바꾸기메서드 이름에 부정어 넣기5. 해피케이스와 예외 처리예외 발생 가능성 낮추기검증이 필요한 부분은 외부 데이터가 대부분이다사용자 입력, 객체 생성자, 외부 서버의 요청 등의도한 예외와 의도하지 않은 예외를 구분한다.사용자 예외와, 개발자 확인 예외NullPointerException 방지return null 사용 자제Optional 사용 고민Optional은 비싼 객체임으로 사용할 때 고민해야 한다.파라미터로 사용하는 객체는 아니다.Optional로 받은 반환 값은 빨리 해소한다. Optional을 해소하는 방법분기문을 만드는 isPresent()-get() 대신 풍부한 API 사용orElseGet, orelseThrow, ifPresent, ifPresentOrElseorElse(), orElseGet(), orElseThrow()의 차이 숙지orElse() : 항상 실행, 확정된 값일 때 사용orElseGet() : null인 겨우 실행, 값을 제공하는 동작(supplier) 정의orElseThrow() : null인 경우 에러 객체 throw 객체 지향객체 설계비공개 필드 (데이터), 비공개 로직(코드)공개 메서드 선언부를 통해 외부 세계와 소통 → 각 메서드의 기능은 객체의 책임을 드러내는 창구객체의 책임이 나뉨에 따라 객체 간 협력이 발생 주의점1개의 관심사로 명확하게 책임이 정의되었는지 확인 생성자, 정적 팩토리 메서드에서 유효성 검증이 가능하다. setter 사용 자제 getter 사용 자제 필드의 수는 적을수록 좋다.도메인 지식은 만드는 것이 아니라 발견하는 것이다. 상속과 조합상속보다 조합을 사용하자상속은 부모와 자식의 결합도를 높인다.상속을 통한 코드의 중복 제거가 주는 이점보다, 중복이 생기더라도 유연한 구조 설계가 주는 이점이 더 크다.Value Object도메인의 어떤 개념을 추상화하여 표현한 값 객체값으로취급하기 위해서, 불변성, 동등성, 유효성 검증 등을 보장해야 한다. 불변성 : final 필드, setter 금지동등성 : 서로 다른 인스턴스여도 내부의 값이 같으면 같은 값 객체로 취급한다. equals() & hashCode() 재정의가 필요유효성 검증 : 객체가 생성되는 시점에 값에 대한 유효성을 보장일급 컬렉션 - 일급 함수다른 요소에게 사용 가능한 모든 연산을 지원하는 요소변수, 파라미터, 함수 리턴 값으로 사용컬렉션만 유일하게 필드로 갖는 객체 getter 생성시 새로운 컬렉션으로 반환해야 한다.EnumEnum은 상수의 집합이며, 상수와 관련된 로직을 담을 수 있는 공간이다.특정 도메인 개념에 대해 그 종류와 기능을 명시적으로 표현해줄 수 있다.다형성 활용하기if문 줄이기어떤 조건을 만족하면, 그 조건에 해당하는 행위를 수행한다.변하는 것 → 조건, 행위변하지 않는 것 → 조건을 만족하는 가?, 행위를 수행한다.DAY2 미션 - 추상과 구체아기에게 우유를 따르라고 했을 때 아기는 제대로 우유를 따르지 못한다는 그런 내용이 생각이 떠올랐던 미션이었다. 컴퓨터적 사고에 대한 내용인데 아기는 우유를 따르라고 했을 때컵을 가져와라우유를 가져와라우유팩 뚜껑을 열어라우유팩을 들어라우유를 컵에 따라라이런 구체화 된 내용을 말하지 않으면 할 수 없다는 내용이다. 이렇듯 컴퓨터적 사고는 모듈을 개발할 때 모든 논리 과정을 생각하지 않으면 만들 수 없다. 그런데 우리의 뇌는 이런 모든 구체화 된 내용을 기억할 수 없기 때문에 추상화하지 않으면 기억하기 힘들다.일상 생활에서 자연스럽게 사용하고 있었지만, 이것을 다시 개발에 적용하는 것이 쉽진 않은 것 같다. 미션은 최근에 일어났던 일로 하긴 했지만 일을 할 때 코드가 하나도 추상화되어있지 않아 읽기 힘들고 기억하기가 힘들었는데 이번에 강의를 들으면서 배웠던 내용으로 추상화하려고 노력하니 많이 발전된 모습을 보일 수 있어서 좋았다. DAY4 미션 - SOLID 정의자바와 스프링을 하면서 너무 많이 들었던 내용이었다. 또한 면접을 볼 때도 엄청 외우고 다녔었는데 다시 보니 리마인드 되고 미션을 하면서 다시 내가 재 정의를 하려니 쉽지 않았지만 새롭게 배울 수 있었다. 학습은 타인에게 설명할 수 있는 단계 까지이다. 나도 이렇게 항상 생각하고 학습해왔기 때문에 이번에도 내가 타인에게 설명하는 것을 생각하며 SOLID를 다시 정의했다.1주차 회고최근에 책을 읽는 독서법을 바꾸려고 노력하고 있다. 전에는 빨리 읽으려고 노력했던 반면 요새는 책 내용 중 인상 깊었던 것들은 실천하려고 노력한다. 그렇지 않으면 읽었던 내용들을 다 잊어버린다. 그 좋은 내용들을 잊기 싫었다. 강의 내용도 그랬다. 사실 읽었던 책에 나온 내용들이긴 하지만 책은 이해하기 쉽지 않았다. 그런데 강의는 그것을 잘 이해할 수 있도록 강사님이 잘 설명해 주시기도 했고, 직접 해볼 수 있는 실습이 있어서 강의 내용을 이해하기 더 수월했다. 이론도 중요하지만 이론을 적용할 실습이 동반되지 않으면 말짱 도루묵이다. 그런면에서 얻을 수 있는 것이 많아서 좋았다.그리고 책에서 배웠던 내용을 리마인드 한다고 생각하면서 이번 1주차를 보냈다. 강의 내용도 좋고 중간 중간 미션과 회고를 쓰게 하는 것도 좋았다. 시간이 지남에 따라 해이해지는 정신을 잘 잡아주는 커리큘럼 구성이 좋았다.마지막으로 하나 반성을 하자면, 시간 투자를 많이 못했다. 강의를 듣고 공부하는 데에 시간을 많이 못쓰고.. 강의가 밀리기도 했다. 다행이 휴일이 많아서 따라왔지만, 다음 주부터는 이렇게 하다간 힘들 거라는 생각이 들었다. 시간을 많이 투자하고 관련된 책들도 다시 읽고, 미션도 열심히 수행해야겠다고 반성했다.

백엔드･발자국･워밍업클럽･2기･1주차

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

Liked, 스터디에 참여하며 좋았던 점은?JavaScript에 대해서 복습하는 시간을 가질 수 있었다.미션을 수행하면서 JavaScript 라이브러리, 프레임워크를 사용하지 않고 tailwindCSS를 적용하는 법을 배울 수 있어서 좋았다. 배운걸 실제로 적용해봐야지 머릿 속에 각인되고 더 잘 이해가 되는 거 같다.Learned, 스터디에서 배운 점은?강의에서 배운 점?호이스팅JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명합니다.DOM, Document Object Model돔은 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줍니다.웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.CRP, Critical Rendering PathDOM tree 생성: 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 경정Render tree 생성: 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력함. 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함함.Layout(reflow): 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계Paint: 실제 화면에 그리기Event Bubbling이벤트 버블링이란 깊게 중첩된 이벤트가 발생했을 때, 이벤트가 위로 (bubble up) 전달 되는 것을 의미합니다.Event Capturing이벤트 캡처링이란 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 말합니다.Event Delegation이벤트 위임은 하위 요소의 이벤트를 상위 요소에 위임하는 것입니다.this 키워드메소드에서 this를 사용할 경우? 해당 객체를 가리킨다.const artist = { name: 'Minnie', sing() { console.log('sing this', this); // {name: 'Minnie', sing: f sing()} } } 함수에서 this를 사용할 경우? window 객체를 가리킨다.function eatHamburger() { console.log(this); // window 객체 } constructor 함수에서 this 사용할 경우? 빈 객체를 가리킨다.function Artist(name) { this.name = name; console.log(this); // {} } const minnie = new Artist('Minnie'); 콜백함수에서 this를 사용할 경우? (콜백함수가 일반함수일 경우) window 객체를 가리킨다.const artist = { name: 'Minnie', nums: [1, 2, 3], print() { this.nums.forEach(function(num){ console.log(`name: ${this.name}, num: ${num}`); // name: undefined, num: 1 }); } }; 화살표 함수에서 this를 사용할 경우? 상위 스코프의 this를 가리킨다. Lexical this라고 부른다.const artist = { name: 'Minnie', nums: [1, 2, 3], print() { this.nums.forEach((num) => { console.log(this); // {name: 'Minnie', nums: Array(3)} }); } }; Event Loop이벤트 루프는 Call Stack(호출 스택)과 Callback Queue(콜백 큐)를 계속해서 확인하며, Call Stack이 비어 있을 때 콜백 큐에 대기 중인 콜백 함수들을 FIFO(First In, First Out) 방식으로 Call Stack에 넣어 비동기 코드를 실행합니다. 이는 비동기 함수들이 완료된 후에도 Call Stack에 있는 동기 코드가 모두 처리될 때까지 대기하다가 실행되는 구조를 따릅니다.클로저다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있습니다.미션을 하면서 배운 점?미션 1. 음식 메뉴 앱github repository: https://github.com/hyer0705/inflearn-warmingup-club-2/tree/main/javascript/food-menu-app메뉴 데이터는 아래와 같은 구조로 정의합니다:{ category: 'breakfast' | 'lunch' | 'shakes' | 'dinner', food: string, cost: number, desc: string, img: string } 각 메뉴는 menus 변수에 배열 형태로 저장됩니다.사용자가 음식 카테고리를 선택하면, Array.prototype.filter() 메서드를 사용해 menus에서 선택한 카테고리에 맞는 음식들을 필터링합니다.필터링된 음식 데이터를 기반으로, document.createElement(), element.innerHTML, element.innerText 등의 DOM API를 사용해 화면에 표시합니다.미션 2. 가위 바위 보 앱github repository: https://github.com/hyer0705/inflearn-warmingup-club-2/tree/main/javascript/rock-paper-scissors-appplayData 변수에 총 플레이 횟수, 플레이어 승리 횟수, 컴퓨터 승리 횟수를 저장합니다.const playData = { totalPlayCnt: 10, playerWin: 0, computerWin: 0 } 사용자가 가위, 바위, 보 버튼을 클릭하면, 컴퓨터는 Math.random() 메서드를 사용해 랜덤으로 가위, 바위, 보 중 하나를 선택합니다.버튼 클릭 시 플레이 횟수가 줄어들며, 결과는 playData에 저장됩니다.버튼 클릭시 해당 라운드의 결과를 DOM 조작 API를 사용하여 화면에 표현해줍니다.10회 라운드가 끝나면 게임이 종료되고, 최종 결과가 화면에 표시됩니다."다시 시작" 버튼을 클릭하면 playData가 초기화되어 게임을 다시 시작할 수 있습니다.Lacked, 스터디에 참여하면서 부족했던 점은?개인적인 사정으로 1주차 진도표의 절반만 진행했다.Longed For, 앞으로 개선하고 싶은 점은?다음주에는 커리큘럼에 따라갈 수 있도록 열심히 강의를 듣고 미션을 수행해야지! 그러기 위해 빨간날과 주말을 적극적으로 활용해야 겠다.참고자료강의 출처: 따라하며 배우는 자바스크립트 A-Z, John AhnEvent Bubbling Image: https://www.freecodecamp.org/news/event-bubbling-in-javascript/?source=post_page-----4209bf40575c--------------------------------Event Capturing Image: https://www.javascripttutorial.net/javascript-dom/javascript-events/Event Delegation Image: https://dmitripavlutin.com/javascript-event-delEvent Loop Image: https://medium.com/@burak.bburuk/what-is-the-event-loop-in-javascript-and-why-is-it-essential-to-understand-b11af520a28b

프론트엔드･워밍업클럽･발자국･1주차･인프런워밍업클럽･워밍업클럽스터디･2기･프론트엔드

인프런 워밍업 클럽2기 백엔드 - 발자국 1주차 (회고)

인프런 워밍업 클럽 2기 발자국 1주차1. 한 주를 돌아보며..인프런 워밍업 클럽, 읽기 좋은 코드를 작성하는 사고법 스터디도 벌써 한 주가 지났다.사실 시간에 비해 한 주 동안 공부해야 할 양이 많은 것은 아니었지만 이해하고 몸으로 체화하는 데 시간을 더 많이 쓴 것 같다.이번 주는 추상 / 논리,사고의 흐름 / 객체 지향 패러다임에 대해 공부했다. Section 1: 추상 (抽象)이번 주에 '추상'에 대해 배웠다. 추상과 구체의 개념, 적절한 이름 짓기의 중요성, 메서드 선언부의 의미, 추상화 레벨 맞추기, 그리고 매직 넘버와 매직 스트링의 사용에 대해 학습했다.추상화 레벨을 맞추는 게 생각보다 어려웠다. 너무 추상적이면 이해하기 어렵고, 너무 구체적이면 코드가 복잡해지는데, 이 balance를 맞추는 게 관건인 것 같다. 매직 넘버를 상수로 바꾸는 건 알고 있었지만, 이게 가독성과 유지보수성에 큰 영향을 미친다는 점을 새삼 깨달았다.Section 2: 논리, 사고의 흐름인지적 경제성, Early return, 사고의 depth 줄이기, 공백 라인과 부정어 사용, 해피 케이스와 예외 처리, 그리고 stream API와 Optional 사용에 대해 배웠다.Early return이 코드의 가독성을 크게 높인다는 점이 인상 깊었다. 지금까지 작성한 코드를 되돌아보니 불필요하게 복잡한 구조가 많았던 것 같다. 또한, 부정어 사용을 줄이는 것이 생각보다 어려웠는데, 이를 위해 메서드 추출 등의 방법을 사용할 수 있다는 점이 새로웠다.Section 3: 객체 지향 패러다임객체 간 협력과 책임, 관심사의 분리, getter/setter 사용 자제, 객체에 메시지 보내기, SOLID 원칙, 그리고 DI/IoC에 대해 학습했다.getter/setter를 무분별하게 사용하는 것이 객체 지향적이지 않다는 점을 배웠다. 객체에 메시지를 보내는 방식으로 코드를 작성하는 것이 더 객체 지향적이라는 점이 인상 깊었다. SOLID 원칙은 들어본 적은 있었지만, 실제로 적용하는 것은 쉽지 않을 것 같다. 특히 단일 책임 원칙(SRP)을 지키는 것이 가장 어려울 것 같다. 2. 미션이번 주에는 추상과 구체에 대해 생각해보고 생각나는 추상과 구체의 예시를 적어보는 미션이었다. (Day2)나는 러닝으로 추상과 구체를 나누어 보았다.러닝을 한다.- 오른발 뒤꿈치가 지면에 닿으며, 발바닥이 지면을 따라 앞으로 구르듯 펴진다.- 오른발이 지면을 밀어내는 동안, 왼발은 지면에서 떨어지면서 무릎이 구부러지고 몸 앞쪽으로 들어 올려진다.- 왼발이 앞으로 나아가는 동시에 오른팔이 앞으로 움직이고, 왼팔은 뒤로 젖혀진다.- 몸통이 약간 앞으로 기울어진 채 오른발을 축으로 전방으로 회전하듯 움직인다.- 왼발 뒤꿈치가 지면에 닿으면서 1-4번 과정이 반대 방향으로 반복된다.'러닝'이라는 추상적인 개념을 구체적인 동작으로 풀어 설명했다. 처음에는 '달린다'라고만 생각했는데, 실제로 각 동작을 하나하나 떠올려보니 생각보다 복잡한 과정이었다. 이런 식으로 추상적인 개념을 구체화하는 연습을 하면 코드 작성 시에도 도움이 될 것 같다. 또 다른 미션은 코드를 리팩토링하는 것과 SOLID 원칙을 정리하는 미션이었다. (Day4)https://www.inflearn.com/blogs/8385[미션 Day4] 코드 리팩토링주어진 validateOrder 메서드를 리팩토링했다. Early return 패턴을 적용하고, 반복되는 로직을 Order 클래스의 메서드로 추출했다. 또한 부정 조건문을 제거하여 가독성을 향상시켰다.이렇게 접근한 이유는 다음과 같다:Early return으로 코드의 depth를 줄여 가독성을 높였다.Order 클래스에 메서드를 추가하여 객체의 책임을 명확히 하고 캡슐화를 강화했다.부정 조건문을 제거하여 코드의 의도를 더 명확히 했다.리팩토링 과정에서 가장 어려웠던 점은 적절한 메서드명을 짓는 것이었다. hasNoItems(), isInvalidTotalPrice() 등의 이름을 고민하는 데 시간이 꽤 걸렸다. 하지만 이런 고민이 결국 코드의 가독성을 높인다는 것을 깨달았다. SOLID 원칙 정리SOLID 원칙을 정리하면서, 각 원칙이 왜 중요한지 깊이 생각해볼 수 있었다. 특히 DIP(의존성 역전 원칙)가 어떻게 코드의 유연성을 높이는지 이해하는데 시간이 좀 걸렸다. 실제 프로젝트에서 이 원칙들을 적용해보면 코드의 구조가 훨씬 개선될 것 같다는 생각이 들었다. 정리이번 미션을 통해 추상화의 개념을 실제로 적용해보고, 코드 리팩토링의 중요성을 체감할 수 있었다. SOLID 원칙을 정리하면서 객체 지향 설계의 핵심을 이해하게 되었다. 앞으로는 이런 원칙들을 항상 염두에 두고 코드를 작성해야겠다는 생각이 들었다. 다만, 이론적으로 아는 것과 실제로 적용하는 것은 큰 차이가 있을 것 같다. 앞으로 더 많은 연습이 필요할 것 같다.다음 주에는 이번 주 내용도 다시 복습하면서 강의 내용을 더 깔끔하게 정리해 봐야 겠다.

회고･1주차

[워밍업 클럽 2기 - Clean Code & Test Code] 1주차 발자국

워밍업 클럽 2기: Clean Code & Test Code의 1주차 발자국 작성입니다. ✍ 학습 내용 복습 Q. 클린 코드를 작성하는 이유?미래의 나, 미래의 동료가 더러운 코드로 인해 고통 받지 않도록 하기 위해서 클린 코드를 작성한다.코드를 작성하는 순간부터 그 코드는 사실상 기술 부채를 가지게 된다. 기술 부채를 최대한 줄이기 위해서 클린 코드를 작성한다. Q. 클린 코드를 작성하기 위해서 사용하는 가장 핵심적인 개념은?추상화라고 생각한다. 추상화의 본질은 핵심 개념만 드러내고, 불필요한 정보는 감추는 것이다.추상화 레벨이 높아질수록 더 함축적인 개념을 다루고, 낮아질수록 구체적인 동작과 세부 구현에 집중한다.추상화 레벨이 높아지면 높아질수록 정보의 함축 수준이 높아지고 이해하기 쉬워진다. 그렇다고 너무 함축시키면 실제 구체(정보)의 재현이 어렵기 때문에 적절한 추상화가 필요하다. Q. 적절한 추상화란?적절한 추상화란 해당 도메인 내에서 핵심적인 부분만 드러내면서 구체적인 구현은 필요에 따라 숨기는 것이다핵심적인 부분과 불필요한 정보의 구분은 문맥에 따라 언제든지 달라질 수 있다도메인을 파악하는 것이 중요하다 Q. 효과적인 네이밍은?네이밍(이름짓기)을 통해서 의도를 드러낼 수 있다. 높은 추상화 레벨에서는 세부 사항을 숨기고, 큰 개념을 드러내는 네이밍을 사용한다. 낮은 추상화 레벨에서는 더 구체적인 동작을 설명하는 이름을 사용한다.대부분의 경우 내부로 들어갈수록 추상화 레벨이 낮아진다주변 코드와의 추상화 레벨이 동떨어져 있는지 지속적으로 확인하는 것이 좋다 Q. 가독성이 좋은 코드는?가독성이 좋은 코드는 불필요한 정보를 덜 인지 해도 되면서 이해하기 수월한 코드라고 생각한다. Q. 가독성이 좋은 코드를 작성하는 방법들은?early return 사용하기이중 반복문, 분기문의 depth를 줄일 수 있는지 고민하기부정어 표현 !을 제거할 수 있는 방법이 있는지 고민하기 Q. 객체란?캡슐화비공개 데이터(필드), 비공개 로직(프라이빗 메서드)을 가질 수 있다공개 메서드를 통해서 외부와 소통한다객체 간 상호작용(협력)을 한다하나의 객체로 관심사가 모이기 때문에 유지보수하기 쉬워진다 Tip. 객체 사용시 주의점하나의 관심사를 가지는지 확인하자웬만하면 setter의 사용을 자제하고, 값의 변경은 updateXxx, addXxx 같은 명확한 네이밍을 사용하자 Q. SOLID(객체 지향 설계의 5개 원칙)는 무엇인가?https://www.inflearn.com/blogs/8391 에 정리 Q. 상속 보다 조합을 권장하는 이유는?상속 관계에서 자식과 부모간의 결합은 매우 강하다. 이는 부모 클래스의 변경은 자식 클래스에도 영향을 준다는 의미이다. 변경의 가능성이 매우 적고, 상위 클래스의 활용이 필요한 경우가 아니라면 조합과 인터페이스의 사용이 훨씬 유연한 구조를 제공한다 🤔 회고코드를 같이 따라치면서 학습하는 것이 더 효율적일 것 같다. 주말 동안 코드도 같이 따라 치면서 복습할 생각이다.토이 프로젝트에 배운 내용을 직접 적용해보면서 학습할 예정이다. 참고Readable Code: 읽기 좋은 코드를 작성하는 사고법

백엔드･워밍업클럽2기･백엔드･클린코드-테스트코드･발자국･1주차

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

[인프런 워밍업 클럽 2기] FE 1주차 발자국1주차 학습 요약강의 - 따라하며 배우는 자바스크립트 A-Zhttps://www.inflearn.com/course/따라하며-배우는-자바스크립트 - John Ahn1일차 OT 2일차 JS 기초, window, DOM, EventJS 기초 강의에서는 console 객체들, 변수 선언, 호이스팅, 타입, 타입 변환, 연산, 반복, window 객체, DOM, Event 등을 배움중요호이스팅var, let, const 가 모두 호이스팅 된다.예시 코드console.log(a) // undefined var a = 123 console.log(a) // 123JS 는 위에서 부터 순차적으로 읽어 내려오는 방식으로 코드를 읽는다. 위의 코드 같은 경우 var 의 선언된 a 를 메모리에 먼저 undefined 로 할당된 뒤 console.log(a) 를 읽어온다. 그러므로 undefined 라는 결과가 출력이 되고 그 뒤에 a 에 123이 할당된다.반대로 let과 const 는 어떨까.console.log(a) // ReferenceError: a is not defined let a = 123 // let 이나 const console.log(a) // 위의 log 에서 에러가 나므로 접근 안됨메모리에 먼저 a 를 할당 하는건 var 와 방식이 같다. 하지만 var 는 undefined 를 할당 하지만 let 과 const 는 undefined를 할당하지 않는다. 그러므로 변수 선언 위에 있는 log 에서 오류가 발생 한다.직접 보고 싶을 경우 about:blank 로 접속해서 개발자 모드의 콘솔창에 입력해보기 바란다.필자가 애용하는 브라우저 콘솔 테스트 환경1번 과제 - Food Menu Apphttps://food-menu-app-kappa.vercel.app/ - 완성본.. title 안바꿧네https://github.com/ygvbhy/food-menu-app.git - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정디자인은 똑같이 안했고 엇비슷하게 진행. css 보단 js 가 더 중요했으므로 css 는 신경 쓰지않음.메뉴 리스트는 데이터로 활용이 가능함. 그래서 json 파일로 따로 정리 import 해오는 방식으로 진행. 추후 api 도 json 방식으로 object 값이 반환 되는 경우가 많기 때문에 이런 방식으로 진행기초 틀 작업 - bootstrap 5 를 활용하여 전체적인 틀을 잡은 뒤 내부에 들어가는 메뉴정보를 js 에서 반복하여 작성 후 innerHTML 를 활용하여 내용 삽입All 과 각 메뉴의 구분 필요하고 로딩시 All 을 기준으로 메뉴들을 표기 해야 하므로 script 로딩 될때 해당 함수 실행. window.onload 사용해도 됨.3일차 자바스크립트 중급 1 ~ 8this, bind, call, apply, 삼항 연산자, Event loop, Closure, 구조 분해 할당, 전개 연산자, map, filter, reducethis 메소드 ⇒ 해당 객체를 가리킨다.(참조한다.) 함수 ⇒ window 객체를 참조 constructor ⇒ 빈 객체를 가리킨다.화살표 함수 (Arrow Function) 은 항상 상위 스코프의 this 를 참조함.삼항 연산자if (a) a = 'a' else a = 'b' // => a ? a = 'a' : a = 'b' Event Loop// 두 번째 인수가 시간 값. 밀리세컨드 값으로 1초 = 1000 으로 생각 하면 된다. // 내부 함수는 비동기이다. setTimeout(() => {}, 1000) 동기/비동기동기 ⇒ 시간을 맞춤비동기 ⇒ 시간을 맞추지 않음차이 : 동기는 먼저 이전의 것이 끝나야 다음 것을 함. 비동기는 1번을 하면서 2번도 가능하고 3, 4번도 가능함.JS 는 동기 언어임 그래서 JS 이외의 도움을 받는다. 브라우저 실행 → 브라우저 api 를 사용 (window object) Node 에서 실행 → Node api 사용 (global object)비동기 처리 과정브라우저 내부 : JS 엔진, web APIs, Callback Queue, Event LoopJS 엔진 : 메모리 힙, Call Stack메모리 힙 : 변수 저장 창고Call Stack : 함수 호출시 함수가 줄 서는 곳Closure다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수 (outerFunction) 가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스 할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있다.function outerFunction(outerVariable) { return function innerFunction (innerVariable) { console.log('Outer Variable: ', outerVariable) // Outer Variable: outside console.log('Inner Variable: ', innerVariable) // Inner Variable: inside } } const newFunction = outerFunction('outside'); newFunction('inside') outerFunction(’outside’) 은 변수 “newFunction” 에 할당되는 즉시 호출호출되면 outerFunction 은 변수 “newFunction” 을 outerFunction(outerVariable) 대신 innerFunction(innerVariable)을 반환 한다.그럼 다음 변수 newFunction(’inside’)으로 호출하여 innerFunction(’inside’)을 호출한다. 클로저는 innerFunction 이 원래 outerFunction(’outside’) 으로 설정한 outerVariable 매개변수를 기억하고 액세스 할 수 있는 것. 따라서 ‘inside’로만 호출되었더라도 ‘outside’와 ‘inside’ 를 모두 console.log() 할 수있다.구조 분해 할당let address = { city: '1234', zipCode: '12345' } const {city, zipCode} = address let a = [1, 2, 3, 4, 5] const [n1, n2, n3, n4, n5] = a 전개 연산자let a = [1, 2, 3, 4, 5] [...a, 123] // [1, 2, 3, 4, 5, 123] // 문자열도 가능 let a = "askdjhfqkwejhr" [...a] // ['a', 's', 'k', 'd', 'j', 'h', 'f', 'q', 'k', 'w', 'e', 'j', 'h', 'r'] // 문자열 분할 함수 - 위와 같은 효과 (배열에는 사용 못함) a.split('') // ['a', 's', 'k', 'd', 'j', 'h', 'f', 'q', 'k', 'w', 'e', 'j', 'h', 'r'] map, filter, reducemap → 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환filter → 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환reduce → 배열의 각 요소에 대해 주어진 리듀서 함수를 실행 하고, 하나의 결괏값을 반환 4개의 인자 ⇒ 누산기 (acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src)2번 과제 - 가위바위보 게임https://rsp-game-five.vercel.app/ - 완성 화면https://github.com/ygvbhy/rsp-game.git - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정 전 과제와는 다르게 js 작동이 많아서 TODO 파일에 작동을 하나하나 작성 하면서 작업컴퓨터가 고른 가위 바위 보는 Math.random() 함수를 이용해 3가지중 랜덤값을 뽑아서 진행1,2,3중 1이면 가위 2면 바위 3이면 보사용자가 고른 값을 id 에 저장 해 두고 이 값과 랜덤으로 가져온 값을 비교 하여 판단.4일차 자바스크립트 중급 9 ~ 17undefined, null, 얕은 비교, 깊은 비교, 얕은 복사, 깊은 복사, 함수 표현식, 함수 선언문, IIFE(Immediately Invoked Function Expression), Intersection observer, 순수 함수, 커링, strict modestructuredClone : 깊은 복사를 지원하는 내부 함수IIFE(Immediately Invoked Function Expression) 정의되자마자 즉시 실행되는 함수( function () { } )() // 첫번째 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근 막기 // 두번째 소괄호 => 즉시 실행 함수를 생성하는 괄호 이를 통해 js 엔진은 함수를 즉시 해석 및 실행 목적 : 전역으로 선언하는 것을 피하기 위해. 또한 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있다.Intersection observer기본적으로 viewport 와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능무한 스크롤 또는 이미지 레이지 로딩에 사용 됨순수 함수함수형 프로그래밍 패러다임의 한 부분이며, 순수 함수는 두 가지 규칙을 가지고 있다.같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴사이드 이펙트를 만들지 않는다.사용 하는 이유클린 코드를 위해테스트를 쉽게 하기 위해디버그를 쉽게 하기 위해독립적인 코드를 위해커링 (Currying)f(a,b,c) 처럼 단일 호출로 처리하는 함수를f(a)(b)(c) 와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것커링은 함수를 호출하는 것이 아닌 변환 하는 것3번 과제 - 퀴즈 앱https://quiz-app-mauve-beta.vercel.app/ - 완성 화면https://github.com/ygvbhy/quiz-app - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정 TODO 에 동작을 하나하나 써가며 작업문제는 3개 정답은 2 ~ 3개 로 나눠져서 json 으로 데이터를 정리 해서 사용각 문제를 반복하여 innerHTML 로 문제를 삽입한 뒤 id 값으로 정답 값 구분정답의 구분을 위해 각 문제가 담긴 배열을 반복을 돌려 확인.이후 정답 버튼들은 각 정답 여부에 맞게 색상 입히고 배경은 정답일 경우 초록, 오답일경우 빨강으로 색 변경다음 문제 클릭시 색상 및 문제, 정답 버튼 새롭게 로딩5일차 OOP, 비동기OOP, 다형성, js prototype, ES6 classes, Sub Class(Inheritance), super(), Callbacks, ES6 Promise, Async, AwiatOOP : object oriented programming - 객체 지향 프로그래밍프로그래밍 언어의 기본이 되는 프로그래밍의 패러다임. 여러개의 독립된 단위 객체들의 모임특징자료 추상화불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단히 만드는것. 객체안의 자세한 내용을 몰라도 중요 정보를 이용해서 해당 객체를 사용할 수 있게 됨.상속새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있게 하는 기능다형성다형성. 다양한 형태를 가질 수 있다.어떤 한 요소에 여러 개념을 넣어 놓은 것.캡슐화클래스 안에 관련 메서드, 변수 등을 하나로 묶어줌. 이 매커니즘을 이용해서 바깥에서의 접근을 막아 보안이 강화되고 잘 관리되는 코드를 제공.prototypejs 객체가 다른 객체로부터 메서드와 속성을 상속받는 매커니즘을 말한다. 이것을 프로토타입 체인이라 한다. 이렇게 하므로 인해 더 적은 메모리를 사용하고 코드를 재사용 할 수 있다.callbacksjs 는 싱글 스레드. 하나의 일을 할때 다른 일은 하지 못함.데이터를 가져오는데 10초가 걸린다면 10초동안 페이지에선 아무것도 못함. 그래서 이러한 문제를 해결하기 위해 비동기 요청을 사용함. 병렬작업 가능Promisejs 비동기 처리에 사용 되는 객체new 키워드와 생성자를 사용해 만든다. 생성자는 매개변수로 “실행 함수” 를 받는다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데 첫 번째 함수(resolve) 는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수는(reject) 작업이 실패하여 오류의 원인을 반환할 때 호출하면 된다. 두 번째 함수는 주로 오류 객체를 받는다.Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.4번 과제 - 책 리스트 나열 앱https://book-list-app-three.vercel.app/ - 완성 화면https://github.com/ygvbhy/book-list-app - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정책 리스트를 저장 하는 방법으로 배열을 선택. 로컬 스토리지와 고민 하다가 1회성으로 보여주는 방향으로 결정삭제 버튼 클릭 부분에서 헷갈렸지만, 부모 요소를 선택하여 이벤트를 추가하는 걸로 해결알림 출력 부분도 출력 후 지우는건 가능한데 연속적으로 진행 했을 경우 나타나지 않는 오류로 인해 Math 함수를 사용해 임의 숫자를 id 값으로 부여 한 뒤 setTimeout 으로 랜덤 숫자의 id 를 찾아 해당 부분을 삭제하는 것으로 진행알림은 없지만 아무런 정보를 입력하지 않고 저장시 함수에서 return5번 과제 - Github Finder 앱https://github-finder-app-rose.vercel.app/- 완성 화면https://github.com/ygvbhy/github-finder-app - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercellibrary Axios해결 과정GitHub API 를 활용 하여 데이터를 받아와서 화면에 표기해주는 작업api 는 axios 를 사용하여 동기/비동기 작업 진행작업 도중 도중 ip 에 할당된 api 사용횟수 초과로 인해 힘들었다.. 같은 내용이지만 노션 정리 내용https://skpost.notion.site/2-FE-1-1103a6f79dfb80da94ffd00752c9f9dd

프론트엔드･워밍업클럽･스터디･프론트엔드･JS･1주차

[인프런 워밍업 클럽 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기 FE | 1주차 발자국

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

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

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

목차스터디 참가 계기와 소감 과제 내용앞으로의 방향1. 스터디 참가 계기와 소감 "'HTML, CSS, JS'로 나만의 웹사이트를 만들어 보아요!"라는 유혹적인 문구에 현혹되어 작년 말 웹 개발에 입문하게 되었다. 그리고 작년 크리스마스부터 개강한 모 KDT 국비교육 프론트엔드 부트캠프에 참가하게 되었고, 몇 주 전 수료를 하게 되었다. 4개월이 채 되지 않는 짧은 교육 기간에도 불구하고, 프론트엔드 개발자에게 필수적인 지식은 얼추 쌓을 수 있었다. 하지만 교육과정에서 진행된 두 개의 프로젝트에서 모두 백엔드를 담당하게 되면서 정작 프론트엔드 프로젝트가 하나도 없는 상태로 취업시장에 덩그러니 놓여지게 되었다. 백엔드 프로젝트 리팩토링이나 이력서 작성 등을 고민하며 시간을 낭비하고 있던 와중, 마침 인프런에서 진행하는 스터디를 발견하였다. 이 스터디에 참가하기 위해서는 무려 6만 6천원이라는 비용을 지불해야 했다. 강의 자체보다는 돈을 내고 스터디에 참여한다는 강제성이 큰 자극이 되어 꾸준한 학습을 진행하는 데 도움이 될 것이라고 판단하였다(강의가 수강료에 비해 좋지 않다는 의미가 절대 아니다). 실제로 기한이 주어지는 과제를 통해 평소라면 시작조차 하지 않았을 것들을 구현해보았다. 과제를 수행하면서 문제 정의와 해결 능력을 키울 수 있었다. 또한, 다른 참가자들이 꾸준히 참여하는 모습을 보는 것만으로도 자극을 받는다. 개발초보 취준생인 나부터 회사다니면서 공부하는 경력자분들, 그리고 공부하는 대학생분들까지 모두가 열심히 노력하는 모습을 보며 동기부여에 큰 도움이 되었다. 남은 기간 동안 목표 달성에 힘써야겠다.2. 과제 내용 1) 음식 메뉴https://www.inflearn.com/blogs/7678과제 설명 : 단골 카페인 쉬즈베이글의 메뉴를 만들어보았다. 카테고리별로 나누는 기능(필터링)을 구현하는 것이 핵심이었다.힘들었던 점 : 여태껏 쉬다가 오랜만에 바닐라 자바스크립트를 사용하려고 하니 그 자체가 버거웠다. 특히 자바스크립트로 HTML 요소들을 동적으로 생성하는 부분에서 많은 시간을 소모하였다.소감 : HTML 요소를 동적으로 생성하는 코드를 많이 작성하였다. 이게 효율적인지 의문이 들어서 시간날 때 연구를 해볼 것이다. 2) 가위바위보 게임https://www.inflearn.com/blogs/7768과제 설명 : 가위, 바위, 보 중 하나를 내면 게임이 진행된다. 각 회차별 남은 횟수 및 점수, 마지막 승부 결과와 리셋 버튼까지 구현해보았다.힘들었던 점 : 게임 로직은 단순하여도 여러 요소들을 화면에 렌더링하는 코드를 작성하는 것이 익숙하지 않아서 오래 걸렸다. 단순히 자바스크립트로 가위바위보 게임을 작성하라고 하면 쉬울텐데, 화면에 있는 여러 가지 요소들을 고려해야한다는 점에서 프론트엔드 개발이 쉽지 않다고 느낀다.소감 : Math.random을 활용하여 랜덤 생성하는 것이 어려워서 좀 연습을 해야할 것 같다. 3) 퀴즈(개발 진행중으로 링크 업로드하지 않음 ^^ ><)과제 설명 : 퀴즈 앱은 욕심을 많이 부려서 추가한 기능이 많기 때문에 아직 100% 완성하지는 못하였다. 현재 OX퀴즈에 있었던 큰 이슈를 해결한 상황이다.힘들었던 점 : 과제 중 이것이 가장 어려웠다. 일단 데이터를 불러와서 렌더링해야하는 점부터 어려웠고, 30문제의 데이터 중 10개를 뽑는 로직부터 작성하기 힘들었다. 다음 단계로 넘어갈 때 문제, 정답, 해설을 모두 업데이트 해야하는데, 오류가 매우 많아서 어떤 오류가 있었는지 기억이 잘 나지도 않는다.소감 : 처음부터 로직을 분리하여 추상화된 코드를 작성하고 싶은데 마음 같지 않다. 4) 책 목록https://www.inflearn.com/blogs/7759과제 설명 : 다른 이름의 투두리스트이다. 과제에는 삭제하는 것만 나온 것 같은데, 제대로 된 투두리스트를 만들어본 적이 없어서 수정, 삭제, 추가 기능 (임시저장, CSV 파일 변환, 전체 초기화)도 구현해 보았다.힘들었던 점 : html에서 <table>태그를 처음 다루어보아서 낯설었고, CSV 파일 변환 기능 구현할 때 이슈가 많아서 별도로 정리해두었다.소감 : 일단 CRUD부터 정확하고 빠르게 구현한 후, 추가기능을 고도화하는 방향으로 진행해아 할 것 같다. 리액트도 CRUD부터 빠르고 정확하게 만드는 연습을 해야겠다. 5) 비밀번호 생성https://www.inflearn.com/blogs/7745과제 설명 : 최대 네 가지 조건을 만족하는 비밀번호를 생성하는 어플을 만드는 것이었다. 힘들었던 점 : 기본 아이디어는 네 가지 조건에 해당하는 문자열을 각각 변수에 담아두고, 해당 조건을 체크하면 문자열들을 합친 후 랜덤으로 인덱스를 생성하여 추출하는 방식으로 하였다. 그런데 이러한 경우 체크된 조건에 해당하는 문자가 하나도 없을 수 있기 때문에, 체크된 조건의 문자열은 무조건 무작위로 1개를 뽑은 후에 진행하는 로직으로 변경하였다. 이 부분이 어려웠다.소감 : 배열과 관련된 고차함수를 잘 다루는 것이 중요한 것 같다. 아직 많이 부족해서 꾸준히 공부하려고 한다. 전체 소감변수 선언시 const, let과 scope의 중요성을 명확하게 깨달았다. 이 부분과 관련해서 오류가 많이 났었다. 함수를 작성하더라도 반환값을 리턴하는 것을 간과하거나, 클래스를 생성할 때 constructor가 초기 실행 시점에 작동한다는 점 등 세부사항에 대한 고려가 필요함을 알게 되었다.코드를 작성하면서 로직을 분리하는 것이 얼마나 중요한지를 실감하게 되었다. 코드에 반복되는 패턴이 보인다면 이를 상위 수준으로 추상화하여 정리하는 것이 필요하다. 말은 쉽지만, 내 수준에서는 징그럽게 어렵다.GitHub Finder, 타이핑 테스트, 퀴즈 앱은 화요일까지 완성하려고 한다.3. 앞으로의 방향 1) 수료를 위한 필수적인 목표 바닐라 JS 과제 3개 (완료)리액트 과제 3개발자국 3회 작성 (매주 일요일) : - 발자국에 수업 내용도 정리하기 - 이번주는 수업 내용 정리를 못해서 다음주부터 진행할 예정그룹스터디 2회 참여 및 공부 내용 발표 2) 추가 목표 코드 리팩토링: 기능 개선 및 추가, CSS 적용 (특히 라이브러리 활용), 로직 분리 등을 통한 코드 개선배포 및 정리: 효울적인 코드 고민해보기

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

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

1. 1주차 학습한 강의 내용 1일차(1강~5강)1. 새로운 프로젝트 시작하기Spring Initializr 사용하기https://start.spring.io/새로운 프로젝트를 시작할 때 사용하면 된다.의존성 : 프로젝트에서 사용하는 라이브러리와 프레임워크를 의미한다.라이브러리 : 프로그래밍을 개발할 때 미리 만들어져 있는 기능들을 가져와서 사용하는 것을 의미한다.프레임워크 : 프로그래밍을 개발할 때 미리 만들어져 있는 구조에 코드를 가져와서 넣는 것을 의미한다.2. @SpringBootApplication과 서버@SpringBootApplicationpackage com.group.libraryapp; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class LibraryAppApplication { public static void main(String[] args) { SpringApplication.run(LibraryAppApplication.class, args); } }@SpringBootApplication : 어노테이션, 스프링 부트를 자동으로 설정이 가능하다.Class : 메인 메소드로 구성된다.SpringApplication.run(LibraryAppApplication.class, args) : 실제 스프링 부트 애플리케이션을 시작한다는 의미를 가진 코드이다.서버(Server)란?기능을 제공하는 것을 의미한다.어떠한 기능을 제공하는 프로그램을 의미한다.그 프로그램을 실행시키고 있는 컴퓨터를 의미한다.3. 네트워크란 무엇인가?IP : 컴퓨터의 주소를 의미한다.Domain Name(도메인 네임) : 외우기 어려운 IP 대신 외우기 쉬운 이름으로 변환한 것을 의미한다.DNS : IP 244.66.51.9 = 도메인 네임 spring.com, 이러한 체계를 의미한다.port(포트) : 사용하는 프로그램 데이터를 받는다.4. HTTP와 API란 무엇인가?HTTP란?인터넷에서 데이터를 주고 받을 때 하는 표준, 약속을 의미한다.예) 운송장 표준 - 요청하는 행위, 받는 사람, 항목(자원), 세부조건행위와 자원은 운송장을 보내기 전에 약속을 해야 한다.HTTP 요청GET 요청GET /portion?color=red&count=2 Host: spring.com:3000 //의미 - 내놓아라 파란집 둘째, 포션 빨간색 2개 GET(HTTP Method) : 요청을 받는 컴퓨터에게 요청하는 행위(데이터 요청)/portion(Path) : 받을 항목(자원)? : 구분기호color=red : 자원의 세부조건(Query)& : 구분기호count=2 : 자원의 세부조건(Query)Host: spring.com:3000 : HTTP 요청을 받는 컴퓨터와 프로그램 정보POST 요청POST/oak/leather Host: spring.com:3000 오크가죽정보 //창고에 넣어라 빨간집, 오크가죽 POST : 요청을 받는 컴퓨터에게 요청하는 행위(데이터 저장)/oak/leather : HTTP 요청을 받는 컴퓨터에게 원하는 자원Host: spring.com:3000 : 어떤 컴퓨터에 어떤 데이터를 받을지 정보오크가죽정보 : 실제 저장할 오크 가죽 정보(데이터, Body)데이터를 보내는 2가지의 방법쿼리 : GET에서 사용한다.바디 : POST에서 사용한다.다양한 HTTP MethodGET : 데이터 요청, 쿼리 사용POST : 데이터 저장, 바디 사용PUT : 데이터 수정, 바디 사용DELETE : 데이터 삭제, 쿼리 사용API(Application Programming Inteface)란?정해진 약속을 통해 특정 기능을 수행하는 것을 의미한다.HTTP 응답정보 처리해서 응답 보내기(200 OK) -> 200 OK : 정보가 잘 저장되었다는 의미이다.저장이라는 기능을 수행한다.💡 요청에 대한 응답을 제공한 컴퓨터는 서버(Server)를 의미한다.💡요청한 컴퓨터는 클라이언트(Client)를 의미한다.상대 코드응답에 들어가는 숫자를 의미하며, 매우 다양하다.어떠한 상태인지 알려주는 코드이다.상대 코드의 종류200 OK : 요청이 성공했다는 의미이다.300 Moved Permanently : 다른 곳으로 옮겨가라는 의미이다.404 NotFound : 요청한 내용을 찾을 수 없다라는 의미이다.500 Internal Server Error : 내부에 문제가 발생했다는 의미이다.5. GET API 개발하고 테스트 하기덧셈 APIHTTP Method -> GETHTTP Path -> /add쿼리(key와 value) -> int number1 / int number2API의 반환 결과 -> 숫자 - 두 숫자의 덧셈 결과GET API 개발 데이터의 흐름Postman에서 ?number1=100&number2=200(쿼리) 스프링 부트에서 보내면 값을 보고 객체로 만들어둔 Calculator, Add, Request에다가 값을 넣는다.그 객체를 Controller, API의 진입지점에 보내준다.정보를 전달하는 역할의 객체 : DTO(Data Transfer Object)Postman에서 send를 하면, HTTP 요청 -> 스프링 부트 서버로 도착 -> API 진입지점을 거쳐 /Add 통과 후 DTO request 함수를 실행한다.return -> 응답 생성 -> Postman에게 전달 -> Postman에서 결과를 보여준다. 2일차(6강~9강)1. POST API 개발 및 테스트하기POST API에서 데이터 받을 경우HTTP Body 사용한다.JSON으로 데이터를 받는다.사용되는 문법 -> JSONJSON이란?객체 표기법을 의미하며, 무언가를 표현하기 위한 형식이다.JSON 문법{}중괄호를 사용한다.{}중괄호 안에 "key":value로 표기한다.속성은 ,로 구분한다.추가적으로 다른 JSON 문법을 작성할 수 있다.{ "name":"김철수", "age":50 } 곱셈 APIHTTP Method -> POSTHTTP Path -> /multiplyHTTP Body(JSON) -> {"number1":숫자,"number2":숫자}API의 반환 결과 -> 숫자(곱셈 결과)POST API 개발 데이터 흐름데이터를 전달해주는 객체인 DTO 생성POST API 개발Body 사용 시 @RequestBody 어노테이션을 사용한다.JSON을 CalculatorMultiplyRequest 객체로 전환해준다. 2. 유저 생성 API 개발 및 테스트하기도서 관리 애플리케이션의 요구사항사용자도서관 사용자 등록(이름 필수, 나이 선택)도서관 사용자 목록 확인도서관 사용자 이름 수정도서관 사용자 삭제책도서관 책 등록 및 삭제도서관 사용자 책 대여다른 사람이 대여 시 대여 불가능도서관 사용자 책 반납도서관 사용자 등록하기유저 생성 API 조건HTTP Method : POSTHTTP Path : /userHTTP Body (JSON)JSON { "name": String (null 불가능), "age":Integer } 결과 반환 X(HTTP 상태 200 OK이면 충분하다.)유저 생성 API 개발 데이터 흐름Body를 객체로 표현할 DTO 생성유저를 저장하기 위한 객체 생성유저 생성 API 개발POST user 호출 -> 함수 실행 -> Body에 이름과 나이가 들어오면 객체로 매핑한다.새로운 유저를 만들 때 사용되는 Requset -> 생성된 유저 객체가 List에 저장 -> 함수가 예외없이 완료되면 응답코드 200 OK로 반환한다.3. 유저 조회 API 개발 및 테스트하기유저 조회 API 조건HTTP Method : GETHTTP Path : /user쿼리 : 없음결과 반환 (JSON)JSON { "name": String (null 불가능), "age":Integer } 유저 조회 API 개발 데이터 흐름데이터를 담아 줄 DTO 생성유저 조회 API 개발User List 생성 -> List에 들어있는 유저들이 1개씩 돌면서 UserResponse 형태로 반환한다.결과 리스트에 추가 -> responses로 반환한다. 3일차(10강~13강)1. 컴퓨터의 핵심 부품 이해하기서버 유저 정보가 왜 남아있지 않는지 이해하기 위해 알아보자.CPU : 연산RAM : 임시 기억장치DISK : 장기 기억장치2. Database와 MYSQLDatabase란?데이터를 구조화시켜 저장하는 것을 의미한다.RDB (Relational Database) - MySQL : 데이터를 표처럼 구조회 시켜 저장하는 것을 의미한다.SQL(Structured Query Language) : 표처럼 구조화된 데이터를 조회하는 언어이다.3. MySQL에서 Table 생성하기데이터베이스 생성create database [데이터베이스 이름]; 데이터베이스 목록 확인show databases; 데이터베이스 삭제drop database [데이터베이스 이름]; 데이터베이스 안으로 들어가기use [데이터베이스 이름]; 테이블 목록 확인show tables; 테이블 생성create table [테이블 이름] ( [필드1 이름] [타입] [부가조건], [필드1 이름] [타입] [부가조건], ... primary key([필드 이름]) ); 테이블 생성 예시create table fruit ( id bigint auto_increment, name varchar(20), price int, stocked_date date, primary key (id) ); auto_increment : 데이터가 없어도 1부터 1개씩 증가하며, 자동 기록된다.primary key : 유일한 키를 의미하며, id라는 필드를 지정한다.테이블 삭제drop table [테이블 이름]; => 해당 SQL를 DDL(Data Definition Language)이라고 정의한다.MYSQL 타입의 종류정수 타입tinyint : 1바이트int : 4바이트bigint : 8바이트실수 타입double : 8바이트 정수decimal(A, B) : 소수점을 B개 갖고 있는 전체 A자릿수 실수문자열 타입char() : ()글자가 들어갈 수 있는 문자열varchar() : 최대 ()글자가 들어갈 수 있는 문자열날짜, 시간 타입date : 날짜, yyyy-MM-ddtime : 시간, HH:mm:ssdatetime : 날짜와 시간을 합친 타입, yyyy-MM-dd HH:mm:ss4. Table 데이터 조작하기생성, 조회, 수정, 삭제 방법(CRUD)생성 : Create읽기 : Read수정 : Update삭제 : Delete데이터 삽입insert into [테이블 이름](필드1 이름, 필드2 이름) values (값1, 값2, ...) 데이터 삽입 예시insert into fruit (name, price, stocked_date) values ('사과', 1000, '2023-01-01'); ()안의 필드와 값의 순서가 중요하기 때문에 순서대로 작성해야 한다.id는 지정하지 않아도 auto_increment가 자동으로 생성해준다.데이터 조회select * from [테이블 이름]; select * from [테이블 이름] where [조건]; 데이터 조회 예시select name, price from fruit; select * from fruit where name = '사과' and price <= 2000; 테이블명 대신 필드 이름도 가능하며, 여러개를 넣을 수도 있다.조건을 넣어서 조회도 가능하다. (and, or, =,>=,<=, !=, between, in, not 등이 있다.)데이터 수정update [테이블 이름] set 필드1이름=값, 필드2이름=값, ... where [조건]; 데이터 수정 예시update fruit set price = 1500 where name = '사과'; 조건을 붙이지 않으면 모든 데이터가 업데이트 되기 때문에 주의 해야 한다.데이터 삭제delete from [테이블 이름] where [조건]; 데이터 삭제 예시delete from fruit where name = '사과'; 조건을 붙이지 않으면 모든 데이터가 삭제 되기 때문에 주의 해야 한다.=> 해당 SQL를 DML(Data Manipulation Language)이라고 정의한다.5. Spring에서 Database 사용하기Database 설정 파일 추가application.yml 파일 생성spring: datasource: url: "jdbc:mysql://localhost/library" username: "root" password: "" driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://Host/접근DB명username: MySQL에 접근하기 위한 계정명password: MySQL에 접근하기 위한 비밀번호driver-class-name: DB에 접근 시 사용할 프로그램 4일차(14강~16강)1. 사용자 수정 API, 삭제 API 개발 및 테스트하기사용자 수정 API 조건HTTP Method : PUTHTTP Path : /userHTTP Body (JSON){ "id": Long, "name": String } 결과 반환 X (HTTP 상태 200 OK이면 충분하다.)사용자 삭제 API 조건HTTP Method : DELETEHTTP Path : /userQuery 사용문자열 name (삭제되어야 하는 사용자 이름)결과 반환 X (HTTP 상태 200 OK이면 충분하다.)사용자 수정 및 삭제 API 개발사용자를 수정하기 위한 DTO 추가사용자 수정/삭제 API 개발사용자 수정 API, 삭제 API 예외처리 하기존재하지 않는 사용자를 수정하거나 삭제하려고 해도 응답코드 200 OK가 나온다.> 예외처리해야 한다.데이터 존재 여부를 확인하고 예외처리 하기사용자 수정/삭제 API 예외처리 개발id를 기준으로 사용자가 존재하는지 확인하기 위해 SELECT 쿼리 작성한다.SQL을 DB에 전송해서 데이터가 있는지 확인한다.SELECT SQL의 결과가 있으면 0 반환, ? 값 id를 삽입한다.0은 최종적으로 List로 반환한다. 사용자가 존재하지 않을 경우 예외처리한다.사용자가 존재하지 않을 경우예외처리한 결과, 내부에 문제가 있다는 오류가 발생했다. 5일차(17강~18강)1. 좋은 코드(Clean Code)가 왜 중요한가?코드는 요구사항을 표현하는 언어이다. 좋은 코드는 코드만 보고도 의미를 파악을 할 수 있다.안 좋은 코드가 쌓이면, 시간이 지날수록 생산성이 낮아진다.Clean Code함수는 최대한 작게 만들고, 1가지 일만 수행하는 것이 좋다.클래스는 작아야 하며, 하나의 책임만을 가져야 한다.2. Controller, Service, Repository 분리하기Controller의 함수 1개가 하고 있던 역할API의 진입 지점으로서 HTTP Body를 객체로 변환한다 -> Controller현재 유저가 있는지 없는지 등을 확인하고 예외처리를 해준다. -> ServiceSQL을 사용해 실제 DB와의 통신을 담당한다. -> Repository역할 분리 구조Controller : API와 HTTP 관련 역할 담당Service : 분기 처리 및 로직 담당Repository : DB와의 접근을 담당각 역할을 분리하여 수행하는 계층으로 이루어진 구조를 계층화 아키텍쳐(Layered Architecture)라고 한다.JdbcTemplate 변수를 선언하고 생성자를 통해 UserRepository를 인스턴스화하는 시점에 JdbcTemplate을 넣어주도록 변경한다.2. 미션첫 번째 과제(1일차)나만의 어노테이션을 만들 수 있었다는 걸 알게 되었고, 어떠한 상황에서 정해진 어노테이션만 사용했었는데, 만드는 방법을 알게 되어 좋았다.두 번째 과제(2일차)3번째 문제에서 배열로 처리했는데, 배열보다는 리스트로 하는 게 더 좋다는 피드백 댓글을 보고 리스트로 적용해서 구현해보고, 다른 방법들도 알게 되어 좋았다.세 번째 과제(3일차)람다식에 대해 깊게 공부한 적은 없었는데, 이번 과제를 하면서 람다식에 대한 도입 배경, 방법 등을 알게 되어 좋았다.3. 회고일주일이 정말 금방 지나간 느낌이다. 과제를 하면서 스스로 고민해보고 구현하면서 성장할 수 있는 시간을 갖게 되어 좋았다. 다른 일도 겹치면서 아직 4,5일차 과제를 완료하지 못했지만 기간 안에 제출하도록 노력해야겠다. 헷갈리는 부분들을 복습하면서 다음주엔 더 분발해야겠다!

백엔드･발자국･회고･워밍업･1주차

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

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

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

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

첫 번째 발자국자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]를 수강하고인프런 워밍업 클럽에 참여하여 쓰는 첫 번째 회고록입니다. 학습 내용스프링 프로젝트를 시작하는 방법과 네트워크, HTTP, API에 대한 기본적인 개념에 대해 학습하였습니다.HTTP는 데이터를 주고 받는 표준이고, 행위와 자원은 HTTP 요청을 보내기 전에 약속을 해야합니다.HTTP Method는 GET, POST, PUT, DELETE 가 있습니다. 예시로 GET는 HTTP 요청을 받는 컴퓨터에게 요청하는 행위입니다.GET 요청의 경우 /portion 이라는 요청 받는 path와 ?의 구분기호로 세부 조건인 쿼리스트링 작성합니다.GET /portion?color=red&count=2POST 요청의 경우 데이터를 저장하는 것으로 바디를 사용합니다.POST /oak/leatherDELETE는 데이터를 삭제하기 위해 쿼리스트링을 사용하고, PUT은 데이터를 수정하기 위해 바디를 사용합니다. POST API는 HTTP Body를 활용해서 데이터를 받습니다.데이터를 보낼 때는 JSON(객체표기법)을 활용합니다.key : 'value' 형태로 Java 문법 상 Map<Object, Object> 형태와 유사합니다.@PostMapping("/multiply") public int multiplyTwoNumbers(@RequestBody CalculatorMultiplyRequest request){ return request.getNumber1()* request.getNumber2(); }위의 예시의 주요 어노테이션은 아래와 같습니다.@PostMapping : HTTP Method가 POST 이고, 요청 경로인 /path인 API를 생성합니다.@RequestBody : HTTP Body로 들어오는 JSON 파라미터로 데이터를 전달하는 객체인 DTO로 바꿔줍니다. DTO에는 JSON의 key 값이 명시되어야하며, 각 속성은 key 값과 동일하게 value도 타입에 맞게 작성합니다. Database는 데이터를 구조화시켜 저장합니다. 마치 엑셀과 비슷하게 표처럼 구조화하여 저장합니다.여기서 구조화된 데이터를 조회하는 언어를 SQL 이라고 합니다.SQL문의 예시는 아래와 같습니다.// DB 생성 create database [데이터베이스 이름]; // DB 조회 show databases; // DB 삭제 drop database [데이터베이스 이름]; // DB 사용 use [데이터베이스 이름]; // TABLE 조회 show tables; // TABLE 생성 create table [table 이름] ([필드 이름] [타입] [부가 조건], [필드 이름] [타입] [부가 조건], ... primary key([필드 이름]) ); // TABLE 삭제 drop table [table 이름];테이블 자체를 생성, 삭제, 변경, 초기화 하는 것을 DDL(Data Definition Language) 라고 합니다. 테이블의 데이터를 조작하는 것을 일명 C.R.U.D 라고 부릅니다.테이블 데이터를 조작하는 SQL문을 DML(Data Manipulation Language) 라고 합니다.데이터 삽입insert into [table 이름]([필드 이름1], [필드 이름2], ...) values (값1, 값2, ...);데이터 조회select * from [db 이름]; select [필드 이름1], [필드 이름2] from [db 이름];조건 데이터 조회select * from [db 이름] where [조건];데이터 업데이트update [table 이름] set 필드1=값, 필드2=값,... where [조건];❗ 조건문을 작성하지 않으면 모든 데이터가 바뀌니 항상 주의하자!데이터 삭제delete from [table 이름] where [조건];❗ 조건문을 작성하지 않으면 모든 데이터가 삭제되니 항상 주의하자! 과제 내용Day 1HTTP 요청을 보내기 위한 Method 중 하나인 GET API 를 만들기 위해서 어노테이션을 사용했었습니다.이를 통해 어노테이션을 사용하는 이유는 무엇인지, 또한 나만의 어노테이션을 만드는 방법에 대해 학습하게 되었습니다.처음에는 클래스 위에 붙은 @ 어노테이션은 의미를 생각하기보다는 레이어에 맞는 동작을 하기 위해서 알맞는 어노테이션을 사용할 수 있도록 암기하는 것으로만 생각하고 공부했었습니다. 자바에서 제공하는 표준 어노테이션을 다양하게 찾아봤으며, 코드가 작동되면서 reflection을 이용하여 코드를 직접적으로 호출하지 않고 코드를 제어할 수 있는 다양한 기술의 집합체라는 것을 알게 되었습니다.그리고, 유저가 직접 만드는 어노테이션을 구현해보면서 메타 어노테이션 즉, 내가 만드는 어노테이션의 유지 기간, 위치를 결정할 수 있도록 결정할 수 있는 사용자 친화적인 조작을 할 수 있다는 것을 알게 되었습니다.📋 1일차 미션 : 어노테이션의 개념과 특징 Day 2GET, POST API를 활용한 과제인데 일반적으로, GET을 사용할 때는 URL 뒤에 query를 사용하는 방식, POST를 사용할 때는 body를 사용하는 방식으로 볼 수 있습니다. 하지만 부득이하게 데이터의 양이 많이 복잡하다면 쿼리 파라미터로 받는 방식(GET)보다는 body 로 받는 방식(POST)로 변경하는 방향이 좋다는 것을 알았습니다.또한, LocalDate 타입을 string 형태로 받아 치환을 해줬는데, 스프링부트 2.x.x 버전에서 @DateTimeFormat을 활용하여 localDate를 바로 받을 수 있는 방법도 알게 되어, java 문법의 변수가 아닌 스프링에 친화적인 어노테이션을 활용하여 구현할 수 있도록 많이 접해보고 공부해야겠다는 생각이 들었습니다.📋 2일차 미션 : GET API와 POST API Day 3람다식의 등장한 이유와 람다식과 익명 클래스의 관계에 대한 내용을 중점적으로 공부하는 것이었습니다.위의 내용을 공부하면서 함수형 프로그래밍과 @FunctionalInterface, stream API와 메서드 레퍼런스에 대한 내용에 대한 연관성도 함께 예시를 만들어보면서 공부했습니다. 위의 내용은 코딩테스트를 해본 사람이면 한 번 쯤은 실습해봤을 내용이라서 쉽게 내용을 이해할 수 있을 것이라고 생각했습니다.하지만 필자의 경우 문법에 대한 내용보다는 코드를 구현할 줄만 알았습니다. 해당 내용을 공부하니 왜 만들어졌는지, 자바에서는 버전을 올라가면서 메서드를 쉽게 구현할 수 있도록 점차 단순화시키고 간결하게 표현할 수 있다는 것에 대해 면밀하게 알 수 있었습니다.📋 3일차 미션 : 익명 클래스와 람다식 회고기초 지식보다는 실제 프로젝트를 구현하기 위한 기술에 대한 내용에 중점을 두고 공부를 했었는데, 백엔드 개발을 하기 위한 서버 지식과 Java, Spring에 관한 내용을 다시 처음부터 하나씩 이해하면서 다시금 지식을 쌓을 수 있었던 거 같습니다.또한, 강의만 듣는 게 아닌 과제를 해결하면서 강의에 대한 이해와 구현할 수 있는 능력을 키우면서 나 자신의 부족한 점과 다른 방식으로 구현할 수 있을 수 있을까라는 여러 방법에 대해 골똘하게 생각할 수 있는 계기가 되었던 거 같습니다.

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

인프런 워밍업 클럽 - BE 0기, 회고 #1

인프런 워밍업 클럽 1주 차 학습이 종료되었다. 강의 진도표에 나와있는 하루치 학습 시간이 1시간 전후라 퇴근 후에 강의 듣고 과제하면 딱 맞을 것 같다고 생각했지만,과제를 하는 데 생각보다 많은 시간이 걸려서 마감 시간을 맞추느라 과제에 집중하지 못해 3일차부터는 다음 강의를 미리 들어놨다.학습 후 과제를 진행하며 수업에 배운 내용을 조금 더 깊이 알아가는 시간을 가질 수 있어서 많은 도움이 되었다. 강의 수강이번 주에 학습한 내용 중 가장 기억에 남는 것은 람다식과 클린 코드이다. 람다식은 자바8에 추가된 기능으로, 함수형 프로그래밍을 지원하고 코드를 간결하게 작성할 수 있도록 도와주는 도구이기 때문에 자바 프로그래밍에서 매우 중요한 개념 중 하나이다.람다식에 대한 개념을 찾아서 공부했으나, 람다식을 사용해 직접 프로그래밍을 해 본 적이 없어서 개념이 잘 와닿지 않았다.인터넷 강의에 나오는 람다식을 따라 쳐도 람다식은 이렇게 쓰는 건가 보다라고 생각만 하고 넘어갔었는데,이번에 3일차 학습을 하면서 RowMapper라는 함수형 인터페이스를 람다식을 사용해 간단하게 표현하는 것을 배우고,3일차, 4일차 과제를 진행하면서 람다식에 대해 찾아보고, 직접 쳐보기도 하니 람다식과 조금은 가까워진듯한 느낌이 들었다.람다식과 스트림 외에 자바8 이후의 문법에 대해서도 공부를 잘해야 될 것 같다. 또한, controller에 모든 코드를 먼저 작성한 뒤 클린 코드를 진행하며 각 역할에 맞게 controller, service, repository로 나누면서 각자의 역할을 더 명확히 구분할 수 있는 계기가 되었다.과제1일차 과제2일차 과제3일차 과제4일차 과제5일차 과제 이번 주에 느낀점.1. 과제를 할 때 학습한 내용에 대해서 더 생각하고 습득할 수 있게 시간적 여유를 두고 진행하기.2. 자바8 책 구매해서 학습하기.3. 클린코드 책 구매해서 학습하기. 다음주도 화이팅!!!🙌

백엔드･인프런워밍업클럽･인프런워밍업클럽BE0기･회고･1주차