[우아한 테크코스 프리코스] 4주차

4주차를 시작하기 전에 3주차 공통 피드백을 공부하고 넘어가려고 한다. 피드백에 어떤 의도가 숨어있을지 나름대로 생각해보자. 함수(메서드) 라인에 대한 기준 3주차 과제에는 라인제한이 15줄이였는데 이번 4주차 과제는 라인제한이 10줄이었다. 함수 또는 메소드로 쪼개는 것을 더 엄격하게 보려는 것으로 파악된다. 아래 코드는 프리코스를 진행하시는 분의 코드를 발췌한 것이다. 나는 이 코드가 좋다고 생각했다. 위에서 아래로 코드를 막히는 부분없이 읽을 수 있었고, 관련 메소드 끼리 붙어있어 코드를 파악하기 편했다. 컨트롤러 부분은 이렇게 흐름을 쉽게 파악 할 수 있게 작성할 생각이다. 비즈니스 로직과 UI 로직을 분리한다. 비즈니스 로직과 UI 로직을 분리하게되면 관심사가 분리되어 유지보수에 용이하다. 예를..

[우아한 테크코스 프리코스] 3주차

3주차에 들어가기에 앞서서 이번주는 어떤 목표를 가지고 풀어나가야할지 고민하는 시간을 가졌다. 클래스(객체)를 분리하는 연습 숫자야구 과제를 구현할때에는 모듈화를 하였지만 객체 분리를 하지는 않았었다. 이번 기회를 통해 객체지향 프로그래밍을 조금이나마 다뤄볼 수 있을 것 같다. 그리고 MVC 패턴을 적용해 볼 생각이다. 이전에 MVC 패턴에 대해 궁금해서 검색했던 기억이 나는데 그 당시에 잘 이해가 가지않아서 다음으로 미뤘었다. 이번에는 적용해보면서 한번 더 공부를 해봐야겠다. 도메인 로직에 대한 단위 테스트를 작성하는 연습 Jest 라는 테스팅 프레임워크를 배웠고, 바로 적용을 할 수 있었다. 저번주의 테스트는 단위 테스트 보다는 통합 테스트에 가깝게 구현을 했었다. 이번에는 요구사항대로 클래스로 나누..

[우아한 테크코스 프리코스] 2주차

이글은 딱딱체로 쓰여져있습니다. 참고해주시면 감사하겠습니다! 2주차에 들어가기 앞서서 먼저 새로운 과제를 진행하기전에 어떤점을 보완을 해야할까 생각을 해봤다. 왜 이러한 과제를 냈는지 파악해보자. 지난 1주차 과제에서는 소감문을 작성할때에 왜 코치분들이 이 과제를 내셨을까라는 생각을 했었다. 문제를 풀기전에 이런 고민을 해봤어야했는데 순서가 바뀐 공부를 했던 것 같다. 또한 질문에 대한 의미를 제대로 파악하지 못하고 과제에 임하는 것은 학습효과가 떨어져 나에게 손해가 될 것이기 때문에 이번 2주차에는 이런 과제를 왜 냈는지에 생각을 해보고 들어가려고 한다. 가독성에 너무 집중했다. 변수명, 함수명 그리고 읽기 편한 코드를 만들겠다는 생각에 빠져버려 정작 중요한 기능확인을 제대로 하지 못한 것 같다. 슬랙..

Host , Switch , Network

Host : 네트워크에 연결된 컴퓨터 네트워크 자체를 이루는 Host 네트워크를 이용주체로 하는 Host 네트워크 자체를 이루는 Host => Switch (예시 Router) switching 은 어디에서 이루어지는가에 따라 역할이 나뉜다. ex) 방화벽, IPS => 보안 switching router => 경로를 설정하는 switching Mac 어드레스에서 swtching 이 일어난다. L2 switch IP 주소에서 switching 이 일어난다. L3 switch => 가장 대표적인예시 Router port 번호에서 switching 이 일어난다. L4 switch HTTP 프로토콜로 switching 이 일어난다. L7 switch 이때 레이어가 높아질수록 연산이 복잡해진다. 네트워크를 이루..

[우아한 테크코스 프리코스] 1주차

🤔 이런 고민을 했습니다. 변수명과 함수명 변수에는 어떤 데이터가 담겨있는지와 함수는 무슨 동작을 하는지 쉽게 파악할 수 있는 네이밍을 짓기위해 노력하였습니다. 예시) isExceptionSituationOccurred 예외상황이 발생했는지 여부를 반환하는 함수 배열 메소드 배열 메소드를 사용했을때 코드 길이와 가독성 측면에서 for문을 사용했을때 보다 이점이 있다고 판단했습니다. 따라서 로직을 짤때 최대한 배열메소드를 사용하려 노력하였습니다. for 문 사용 const eachDigitAllMultiply = (bookPage) =>{ cosnt bookPageArray = String(bookPage).split("") let sumOfMultiplication = 1 for (let i=0; i S..

네트워크의 전반적인 틀, MAC주소, IP주소 ,Port 번호가 식별하는 것

Request failed with status code 422

로그인, 회원가입 요청을 하는데 422 에러가 계속 생겼다. 이미 기존에 프로젝트를 진행하시던분이 동작했다고 하신 코드여서 갇힌 생각을 해버렸다. 422는 파라미터 형식에러인데, 나의 문제의 경우에는 json key 이름이 달라서 에러가 발생한 것 이다. 아 ㅋㅋㅋ.. 나는 오늘 세상이 밉다.

html dataset 을 사용한 css switch case

현재 블로그를 조금 커스텀을 했는데, 다크 모드일때 코드블럭의 글자가 보이지 않는 상황이 발생했다. 코드 블럭의 태그는 다음과 같다. 처음에는 간단하게 querySelector 를 사용해서 해당 태그의 css 를 만져 글자 색 바꿔주면 되겠네 생각을 했다. 근데 이상하게 해당 태그에 대한 DOM 을 얻을 수가 없었다. html 이 생성되기전에 js 가 실행되서 그런가 싶었다. 따라서 html이 다 그려지고 나서 js 를 실행하려 onload를 사용해봤지만 그래도 안되더라. 흠.. 알수없었다. 그래서 우회방법을 찾았다. 현재 html 의 dataset 인 theme 은 라이트모드 일때는 'light' , 다크모드 일때는 'dark' 가 할당되고 있다. 그래서 dataset에 따라 css 를 변경하기로 했다..

[타입스크립트] Utility Types

Partial Partial 유틸리티 타입의 사용용도는 다음과 같다. interface 를 전부 옵셔널로 만들어주게 된다. interface Profile { name: string; age: number; married: boolean; } // Partial 적용시 // interface Profile { // name?: string; // age?: number; // married?: boolean; // } const zerocho: Profile = { name: "zerocho", age: 29, married: false, }; const newZeroCho: Partial = { name: "zerocho", age: 29, }; 그럼 Partial 타입을 직접 만들어보자. type P..

[타입스크립트] keyof , in keyof

partial 과 pick 에 대해서 내가 직접 타이핑을 하다 생긴 궁금증이다. partial 을 타이핑을 할때는 다음처럼 in keyof 를 사용했다. 다음처럼 말이다. interface Profile { name: string; age: number; married: boolean; } type P = { [Key in keyof T]?: T[Key]; }; const newZeroCho: P = { name: "zero", age: 29, ; 그런데 Pick 을 타이핑 할때에는 in 만 사용한다. 머리가 어지러웠다. interface Profile { name: string; age: number; married: boolean; } type P = { [Key in S]: T[Key]; }; co..