✍️ Today I Learned 평소 ERD(Entity Relationship Diagram)는 목적에 따라 아래와 같은 도구들을 활용하여 작성하고 관리하고 있었다. 프로젝트 초기 설계시엔 팀원과 함께 작성해야하므로 ERDCloud에서 실시간으로 ERD를 공유하며 DB 설계를 진행하였다. 운영 중인 서비스의 ERD를 확인해야 하는 경우엔 MySQL Workbench의 내장 기능을 활용해서 ERD를 추출하였다. 프로젝트 DB 구조 변경 히스토리를 Repository에 담아 관리하고자 싶어 레퍼런스를 찾아보다 VSCode 확장 도구 중에 ERD Editor를 사용해보고 그 과정 중 느낀점을 공유하고자 이번 포스팅을 남긴다. 1. ERD의 관리 미흡으로 인한 문제점 우선 ERD는 데이터베이스의 구조를 시각적으로 표현하고 데이터베이스의 각 요소들 간의 관계를 명확히 보고자 필요한 도구이다. (특히, 초기 데이터베이스의 구조 설계시에는 필수적으로 필요하다 생각한다.) 다만, 서비스는 보통…

✍️ Today I Learned 백준 1764번 알고리즘 문제 풀이 과정 중 학습한 내용을 간단히 포스팅으로 남기려한다. 1. 문제 문제는 어렵지 않았으나 시간초과 부분을 해결하는 과정에서 새로 학습한 부분이 있어 포스팅으로 남긴다. 문제의 요구사항은 아래와 같다. 첫째 줄에 듣도 못한 사람의 수 N, 보도 못한 사람의 수 M이 주어진다. 둘째 줄부터 N개의 줄에 걸쳐 듣도 못한 사람의 이름과, N+2째 줄부터 보도 못한 사람의 이름이 순서대로 주어진다. 이름은 띄어쓰기 없이 알파벳 소문자로만 이루어지며, 그 길이는 20 이하이다. 듣도 못한 사람의 명단에는 중복되는 이름이 없으며, 보도 못한 사람의 명단도 마찬가지이다. 듣보잡의 수와 그 명단을 사전순으로 출력한다. 해결 과정 자체는 단순하게 풀어나갔으나, 와 의 차이를 알지 못하여 시간초과를 겪었다. 1-1. 풀이과정 처음 시도한 알고리즘의 구현 단계는 아래와 같다. 첫줄로 입력받은 n, m 사이즈를 갖는 두 를 선언한다. nL…

✍️ Today I Learned 「Clean Code」 9장(단위 테스트)에서 테스트 코드의 중요성을 읽고나서 막연히 이런 생각을 마음속 깊은 곳에 담아 두긴했었다. 📌 「Clean Code」 단위 테스트 독서 후기 조그만 영역이라도 테스트 코드를 우선 작성해보자라는 생각으로 프로젝트에 도입해보았다. 그 과정에서 느낀점은 “사소한 테스트라도 분명한 의미는 있다.” 이었다. 실제로 사내 비즈니스 요구사항으로 Electron 프레임워크를 사용하여 데스크탑 어플리케이션을 배포하는 과정 중 사소한 휴먼-에러를 방지하고자 간단한 테스트 코드를 작성해서 팀 내에 공유해본 경험이 있다. 데스크탑 어플리케이션에 사용할 아이콘 이미지의 사이즈를 검증하는 테스트 코드 휴먼-에러를 방지하기 위한 간단한 테스트 코드(커버리지는 아직은 사막의 모래알같은 상황이다. 🥲)를 위 예시 외에도 다수 작성하였으며, 내가 부재의 경우에도 가이드 문서에 테스트와 빌드를 하는 과정을 상세히 담아서 팀 내에 공유해본 경…

✍️ Today I Learned 백준 2204번 알고리즘 문제 풀이 과정 중 학습한 내용을 간단히 포스팅으로 남기려한다. 1. 문제 문제는 어렵지 않았으며 문제 해결을 위한 조건은 다음과 같다. 각 테스트케이스는 정수 n (2 ≤ n ≤ 1000) 으로 시작하며 주어지는 단어의 개수를 뜻한다. 다음 각 n줄은 길이가 최대 20인 단어가 주어지며 대소문자의 구분을 없앴을 때 똑같은 단어는 주어지지 않는다. 마지막 입력은 0이 주어진다. 각 줄에 각 테스트케이스에서 사전상 가장 앞서는 단어를 출력한다. 너무도 간단한 문제였지만 새로 알게된 문자열 비교 메서드인 가 있어서 포스팅을 남긴다. 1-1. 풀이과정 크게 두가지 로직을 함수로 구현하여 알고리즘을 구현하였다. 에 입력되는 단어를 담는다. 메서드를 이용하여 정렬 후 첫번째 인자를 반환한다. 우선 에 입력으로 들어온 단어를 담는 부분을 구현하였다. 그 후 에 담긴 값을 대소문자를 제외하고 비교하여 정렬 후 첫번째 값을 반환하고 함…

✍️ Today I Learned 현재 운영중인 기술 블로그는 Github Pages에서 공식적으로 지원하는 을 사용하여 만들다가 현재는 라는 프레임워크를 사용해서 기술 블로그를 운영하고 있다. 아무래도 정적 웹이트이다 보니 한계점이 많았지만 에서 제공하는 플러그인을 통해 의 서버리스 서비스를 연동하고 조회수(View)를 노출시킨 과정을 경험을 간략히 정리하고 공유하기 위해 글을 남긴다. 1. Gatsby (정적 사이트 생성기) 우선 간략히 위에서 설명하였지만 는 이미 꾸준히 많은 유저들이 사용 중인 검증된 정적 웹 사이트 생성(Static Site Generator) 프레임워크이다. 아무래도 React를 기반하여 만들어진 프레임워크이다 보니 보다 익숙한 문법으로 빠르게 웹 사이트를 배포가 가능한 장점때문에 손이 많이 갈 수밖에 없다. 또한, 여러 플러그인들을 제공하기 때문에 손 쉽게 추가 기능들을 구현하기가 편리하다. 단점을 뽑아보자면.. 위에서 언급한 여러 플러그인들을 통한 확…

✍️ Today I Learned 유지보수하는 과정에서 발생하는 Dead Code들을 쉽게 파악하고자 도입했던 개발 관련 도구들을 사용해본 경험에 대해서 간략히 정리하고 공유하기 위해 글을 남긴다. Dead Code 란? 실행이 되지 않는 코드를 뜻한다. 불필요한 코드들은 성능에 영향을 미칠수도 있으며, 휴먼 에러를 발생시키는 방해요소이다. 의 no-unused-vars과 라이브러리를 간략히 설명해보고 어떤 걸 선택했는지 간략하게 후기로 남겨보도록 하겠다. 1. Dead Code의 발생 이유 모두 다른 환경에서 개발하고 있기 떄문에 보편적인 이유가 될 순 없겠지만 보통 나의 경우에는 API가 더이상 사용되지 않을 때, 혹은 새로운 기획안을 반영 하고 난 뒤 기존 코드를 제거하지 않았을 때에 Dead Code가 많이 발생되었다. 물론 코드를 바로 바로 정리하는 습관을 들이신 훌륭한 분들은 물음표를 지을 수 있겠지만 적어도 나는 위 이유로 가장 많이 불필요한 Dead Code를 양산시…

✍️ Today I Learned 엘라스틱 서치를 이용한 검색 엔진을 도입하게 된 배경과 구현 과정의 프로세스에 대해서 간략히 정리하고 공유하기 위해 글을 남긴다. 1. Elasticsearch? Elasticsearch는 아래와 같이 요약할 수 있다. Elasticsearch는 Apache Lucene기반의 Java 오픈 소스 분산 검색 엔진이다. Elasticsearch를 통해 방대한 양의 데이터를 신속하게(거의 실시간) 저장, 검색, 분석을 수행할 수 있다. Elasticsearch는 검색 엔진으로 단독으로 사용되기도 하며, ELK(Elasticsearch / Logstash / Kibana) 스택으로 사용되기도 한다. 위와 같은 특성 때문에 이러한 Elasticsearch는 대규모 로그 파일 관리나 실시간 검색 서비스 등과 같이 대용량 데이터를 빠르게 처리해야 하는 경우 유용하게 사용될 수 있다. 세부적인 내용은 뒤로하고 이번 포스팅에선 ELK(Elasticsearch / …

✍️ Today I Learned 다중 인스턴스로 구성된 환경에서 동시에 임계 자원에 접근하려는 상황(동시성)을 제어하기 위해 도입한 방법을 간략히 정리하고 공유하기 위해 글을 남긴다. 1. 문제점 현재 사내에서 사용중인 서비스 구성도는 아래 사진과 같다. 이 구성도 내부에서 API Server는 Docker compose 환경에서 옵션으로 구성하여 쓰레드 갯수 만큼 다중 인스턴스 환경으로 구성되고 있다. 여러개의 인스턴스로 구성되어 있기 때문에 스케쥴링 작업 등 여러개의 인스턴스가 동시에 같은 자원을 요구하는 작업에서 반복적인 에러가 리포팅되고 있었다. 2. 해결방안 우선 키워드를 먼저 언급하자면 “동시성 제어(concurrency control)”였다. 비슷한 레퍼런스를 찾고자하니 많은 솔루션들이 나왔다. 기억나는 솔루션 중 참고 될 만한 자료들은 링크로 따로 남겨두겠다. 🔗 PM2 환경에서 중복되지 않는 스케쥴링 구현 🔗 스프링 환경에서 스케쥴러 락 (ShedLock) 위 …

✍️ Today I Learned Bash Script를 통하여 Slack Incoming Webhook 알림 요청을 수행하고 이를 자동화 하는 과정을 간략히 정리하고 공유하기 위해 글을 남긴다. 1. 필요성 현재 우리 회사의 가장 중요한 서비스를 꼽으라하면 인재 채용을 위한 온라인 인적성 검사이다. 검사에 필요한 내용(문항과 지문 이미지 등)을 제공하는 API 서버와 응시자가 유효한 환경에서 검사를 치르고 있는지 웹캠과 화면 공유를 실시간으로 소통하는 WebRTC 서버를 구성하여 온라인 응시환경을 제공하고 있다. 뿐만 아니라, 검사가 끝나면 응시자의 검사 녹화 영상을 저장하고 계약 내용에 따라 제공(평균 한달 이상 보관)하고 있다. 수시 채용기간에는 큰 문제가없지만, 상반기 / 하반기 공채 기간에는 큰 리소스가 필요하게 되므로, 해당 슬랙 알림 기능을 구현하여 팀원들 모두에게 자원 유지의 편의성을 제공하기 위해 Bash Script와 슬랙 웹훅 기능을 통해 자원 모니터링 기능이 필…

✍️ Today I Learned 백준 2573번알고리즘 문제 풀이 과정 중 학습한 내용을 간단히 포스팅으로 남기려한다. 1. 문제 문제의 조건은 다음과 같다. N(행의 개수), M(열의 개수)의 정수 값을 입력 받는다. 각 행마다 빈칸을 구분으로 빙산(0 이상의 값)과 바닷물(0)에 대한 정보를 입력 받는다. 인접한 바닷물의 갯수만큼 빙산이 빠르게 녹는다. 입력 받은 빙산이 두 덩어리 이상으로 분리되는 최초의 시간(년)을 구해야 한다. 모든 빙산이 녹을 때 까지 두 덩어리 이상으로 분리가 안된다면 0을 출력한다. 풀이 하는데 오래 걸렸다.. 🥲 (2시간 넘게..??) 조건 분기가 많이 필요하고 아직 BFS / DFS 개념이 부족해서 시간이 오래 걸린듯하다. 해당 문제는 BFS / DFS를 학습하기에 아주 좋은 문제라 생각되며 풀이 과정 중 많은 고민이 필요했던 문제기에 포스팅으로도 남기기로 결정하였다. 1-1. 풀이과정 크게 두가지 로직을 함수로 구현하여 알고리즘을 구현하였다.…

✍️ Today I Learned 백준 11659번알고리즘 문제 풀이 과정 중 학습한 내용을 간단히 포스팅으로 남기려한다. 1. 문제 알고리즘은 간단하다. 스택을 구현 한 뒤 스택에 담긴 값을 토대로 ”-”, ”+” 그리고 불가능한 경우엔 “NO” 중 알맞은 CASE 대로 출력하면 된다. 하지만 수의 갯수인 N의 범위를 살펴보면 다음과 같다. 1 <= N <= 100,000 이 문제의 걸림돌은 알고리즘 구현이 아닌, Java 사용법이었다. 1-1. 풀이과정 우선 풀이과정을 설명하자면, 스택의 원리를 정확하게 알고 있는지를 묻는 문제이다. 스택 자료구조의 특징(후입선출)과 pop, push 연산만 알고있다면 쉽게 풀어낼 수 있다. 완성한 코드는 아래와 같다. 위의 코드로 IDE에서 모든 예제 출력이 원활히 되었고 스스로 생각해낸 반례도 모두 통과를 하여 제출을 하였고 문제는 이떄부터 시작되었다. 1-2. 문제점 디버깅및 예제 출력도 모두 IDE에서는 가능했지만, “출력 초과” 로 …

✍️ Today I Learned 백준 11659번알고리즘 문제 풀이 과정 중 학습한 내용을 간단히 포스팅으로 남기려한다. 1. 문제 문제의 의도는 간단하다. 시간 제한이 1초 즉, 1억번 이내의 연산을 기준으로 잡고있다. 하지만 변수의 범위를 살펴보면 다음과 같다. 1 <= N <= 100,000 1 <= M <= 100,000 위 범위를 적용해 본다면 최악의 경우라면 아래의 연산 횟수가 나온다. 100,000 X 100,000 = 10,000,000,000(100억) 따라서 구간 합을 미리 구하는 알고리즘을 구현하여 시간 복잡도를 최적화해야하는 문제이다. 1-1. 풀이과정 N개의 수를 입력받음과 동시에 누적 합을 계산하는 배열을 생성하였다. 위와 같이 합 배열을 미리 구해 두면, 기존 배열의 일정 범위의 합을 구하는 시간 복잡도가 O(n) => O(1)로 감소하게 된다. 그리하여 합배열에 누적시킨 값을 토대로 시작(i) ~ 종료(j) 위치를 받아서 구간 합을 구하는 공식을 세워…

✍️ Today I Learned Repository를 생성할때 마다 생기는 기본값 Github ISSUE Label.. (일단 참 못생김..!!) 해당 Label을 실제로 사용하기엔 조금 부족하고.. 결정적으로 이쁘지 않다!! 원하는 Label 기본값을 Template으로 관리하고 개인 & 팀 Repository에 적용하는 방법을 블로그에 남겨보려한다. 1. 준비물 아주 간단하다. 2가지만 준비하면된다. ✅ 라벨을 관리할 .json 파일 ✅ Github Access Token 우선 .json 파일을 준비하자. (로컬 저장소에서 관리를해야한다.) 필자는 Github Repository를 보관하는 로컬 폴더 최상단에 labels.json 파일로 생성하였다. 양식은 다음과 같이 작성하였다. 그리고 Github Access Token을 발급받아야한다. Github Develper Settings(https://github.com/settings/apps) 페이지로 접근해서 Perso…

✍️ Today I Learned 도커를 설치하고 실행해보며 기본 개념을 학습했다. 해당 과정을 기록으로 남겨보았다. 1. 도커(Docker)란? 000 우선 도커란 가상머신(VM)과 유사하지만 Guest OS가 따로 설치되지 않는 보다 경량화된 방식이다. 가상머신은 편리하지만 PC의 자원을 함께 공유하여 사용하므로 성능이 좋지 못한 단점이 존재한다. CPU도 발전 됨에 따라 가상화를 위한 기능들이 비약적으로 상승하였고 그 외에도 속도 이슈를 극복하기 위한 반 가상화 방식등의 방법 또한 존재하지만 항상 Host OS 위에 Guest OS가 설치되어 운영체제 위에 운영체제를 또 쌓는 개념이기 때문에 리얼머신과 비교하면 당연히 속도가 느리다. 도커는 기존 Host OS 위에 다른 OS를 쌓아서 사용하는 개념이 아닌, 도커 이미지에 서버 운영에 필요한 프로그램과 라이브러리만 따로 격리하여 설치 한 뒤 OS 자원은 Host OS와 공유하는 방식으로 운영된다. 따라서 이미지 용량이 크게 줄어…

✍️ Today I Learned TypeScript를 기본 언어로 채택하여 구성된 NestJS 프레임워크는 공식문서에서는 Type Check를 위해 사용을 안내하고 있다. 공식문서를 토대로 를 왜 사용하는지 찾아보는 그 과정에서 와의 차이점을 간단히 알아보았다. 1. DTO (Data Transfer Object) 우선 란 **계층***간 데이터 교환을 위해 사용하는 객체이다. 계층이란? 패턴마다 다르게 표현된다. Repository 패턴에서는 Controller, Service, Repository를 각각 계층이라 칭하며, MVC 패턴에서는 Model, View, Controller의 계층이 존재한다. 계층간 데이터를 주고 받을 때 어떤 모양의 데이터 객체로 주고 받을지를 에서 결정하게 되므로 프로젝트를 설계할때 최우선으로 고려되야 할 요소이다. 쉽게 말하자면 정보를 교환하는데 있어 타입을 체크하기 위한 구조라 설명할 수 있다. 또한, 타입을 체크하기 위한 방법으로 외에 가 존…

✍️ Today I Learned 최근 NestJS + TypeORM 프레임워크로 서버를 구성하며 공부하고있다. TypeORM이 Repository Pattern을 기본으로 지향하고 지원하고 있으며 NestJS 공식 문서에도 Repository Pattern을 이용한 설계 방식을 안내하고 있다. 나 또한 현재 진행 중인 프로젝트에 공식 문서를 읽고 Repository Pattern를 적용해서 개발을 이어나가고 있다. 문득 Repository Pattern가 무엇이고 왜 쓰는거지? 가 궁금해졌고 그 과정을 글로 남겨보려한다. 1. Repository Pattern 우선 Repository Pattern은 여러 디자인 패턴 중 하나이다. overview-1 내가 이해한(?)대로 말하자면 실제 데이터가 있는 장소를 추상화하여 Repository로 둔 뒤, 해당 장소에서 데이터를 가져오고 가공하는 업무를 전담한다. 그렇기에 클라이언트에서는 내가 원하는 데이터의 출처(Local, Remote…

✍️ Today I Learned 프로젝트중 SMS 발송이 필요한 부분을 가비아의 문자 서비스를 이용하고 있다. 가비아 문자서비스 개발 가이드 공식문서에서는 Node 환경에서 단순 내장 라이브러리를 이용한 https 요청을 보내어 사용하고 있다. 현재 프로젝트는 NodeJS에서 NestJS 프레임워크를 기반으로 하고있다. 레퍼런스들이 많지 않아서 개발과정에서 겪었던 불편함들이 있었기에 나와 같은 상황을 겪는 이들에게 도움이 되고자 글을 남긴다. 1. 사용자 인증 가비아 공식 개발 가이드 문서에는 다음과 같이 안내가 되어있다. 스크린샷 2022-05-06 오후 9 20 49 내장 라이브러리만 이용한 순수(?)한 코드이기 때문에 해당 가이드 문서만 보고 NestJS 기반의 현재 프로젝트에 담아 내기엔 어려움이 있었다. 그 과정을 최대한 자세히 담아보려한다. 1-1. SMS 발송기능 모듈화 우선 SMS를 보내기 위한 기능만 모듈로 빼서 처리하기 위해 새로운 모듈을 생성하였…

✍️ Today I Learned 인프런의 따라하며 배우는 NestJS를 들으며 배운점을 남기고 있다. 일전의 #5에서 파이프에 대한 기초 개념을 학습을 진행했으며 파이프를 이용한 기본적인 유효성 검사및 데이터 변환을 이용한 CRUD 실습또한 함께 진행했다. 오늘은 기존 실습한 내용을 주석을 달아가며 복습하였다. 해당 코드 내용은 아래에 첨부한다. 파이프를 이용한 유효성 체크(@UsePipes 핸들러-레벨 파이프) 특정 게시물을 찾을 때 없는 경우 결과 값 처리(NotFoundException) 없는 게시물을 지우려 할 때 결과값 처리(deleteBoard 메서드 수정) 커스텀 파이프를 이용한 유효성 체크(board-status-validation.pipe.ts) 그리고 기존 실습은 메모리, 즉 배열에 값을 넣어 저장하는 형태였다. 그렇기에 서버를 껐다 키면 메모리가 날아가는 불편함이 있었기 때문에 DB에 넣는 과정을 학습하였다. 그 과정에서 TypeORM에 대해 학습한 내용을 …

✍️ Today I Learned 인프런의 따라하며 배우는 NestJS를 들으며 배운점을 남기고 있다. 일전의 #4에서 DTO에 대한 기초 개념을 학습을 진행했으며 그를 토대로 기본적인 CRUD를 위한 실습또한 함께 진행했다. 오늘은 기존 실습한 내용을 주석을 달아가며 복습하였다. 해당 코드 내용은 아래에 첨부한다. 게시물 생성을 위한 DTO ID로 특정 게시물 가져오기(getBoardById) ID로 특정 게시물 지우기(deleteBoard) 특정 게시물의 상태 업데이트(updateBoardStatus) 그리고 NestJS Pipes를 학습하였다. 1. Pipe란? 파이프는 @Injectable () 데코레이터로 주석이 달린 클래스이다. 파이프는 데이터 변형(Data Transformation)과 데이터 유효성 검증(Data Validation)을 위해서 사용된다. 데이터 변형(Data Transformation)과 데이터 유효성 검증(Data Validation)이란? 데이터 변…

✍️ Today I Learned 인프런의 따라하며 배우는 NestJS를 들으며 배운점을 남기고 있다. 일전의 #1, #2, #3에서 기초 개념을 학습을 진행했으며 그를 토대로 기본적인 CRUD를 위한 실습또한 함께 진행중이다. 오늘은 기존 실습한 내용을 주석을 달아가며 복습하였다. 해당 코드 내용은 아래에 첨부한다. Board Model 정의하기 게시물 생성하기 그리고 DTO에 대한 내용을 학습한 내용을 간단히 정리하였다. 1. DTO(Data Transfer Object)란? 계층간 데이터 교환을 위한 객체이다. DB에서 데이터를 얻어 Service나 Controller 등으로 보낼 때 사용하는 객체를 일컫는다. 또한 DTO는 데이터가 네트워크를 통해 전송되는 방법을 정의하는 객체이다. 이러한 DTO는 interface나 class를 이용하여 정의 할 수 있다. NestJS 공식문서에서는 클래스를 이용하는 것을 권장하고 있다. 2. DTO를 쓰는 이유는 무엇인가? 데이터 유효성을…

✍️ Today I Learned 인프런의 따라하며 배우는 NestJS를 들으며 배운점을 남기고 기록해보려고 한다. Node.js의 프레임워크인 Nest JS를 학습하며 이해한점을 기록하며 더 나아가 궁금한 부분에 대해서는 찾아보며 스스로 학습한 점에 대해서도 기록으로 남겨보기 위해 포스팅을 남긴다. 1. NestJS 모듈 모듈은 @Module () 데코레이터(@)로 주석이 달린 클래스이다. @Module () 데코레이터는 Nest가 애플리케이션 구조를 구성하는데 사용하는 메타 데이터를 제공한다. 각 응용 프로그램에는 하나 이상의 모듈(최소 루트 모듈)이 있으며, 그 중 루트 모듈은 Nest가 사용하는 시작점이다. 모듈은 밀접하게 관련된 기능 집합으로써 한 요소를 구성하기 위한 효과적인 방법이다. (기능별로 만든다. ⇒ ex. 유저 모듈, 주문 모듈, 채팅 모듈 등등) 같은 기능에 해당하는 것들은 하나의 모듈 폴더안에 넣어서 사용한다. (ex. userController, userS…

✍️ Today I Learned 인프런의 따라하며 배우는 NestJS를 들으며 배운점을 남기고 기록해보려고 한다. Node.js의 프레임워크인 Nest JS를 학습하며 이해한점을 기록하며 더 나아가 궁금한 부분에 대해서는 찾아보며 스스로 학습한 점에 대해서도 기록으로 남겨보기 위해 포스팅을 남긴다. 1. NestCLI로 생성한 프로젝트 기본구조 명령어를 이용하여 폴더 내부에 기본 NestJS 프레임워크 기본 설정을 NestCLI를 통하여 만들었다. 기본으로 구성된 프로젝트 기본구조를 하나씩 알아보면 다음과 같다. 1-1. .eslintrc.js 개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤 수있게 도와주는 라이브러리이다. 타입스크립트를 쓰는 가이드 라인을 제시하며 문법에 오류가 나면 알려주는 역할 등 코딩 컨벤션에 일조하는 역할을 하는 라이브러리이다. 코딩 컨벤션? 읽고 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 1-2. .prettierrc esli…

✍️ Today I Learned 인프런의 따라하며 배우는 NestJS를 들으며 배운점을 남기고 기록해보려고 한다. Node.js의 프레임워크인 Nest JS를 학습하며 이해한점을 기록하며 더 나아가 궁금한 부분에 대해서는 찾아보며 스스로 학습한 점에 대해서도 기록으로 남겨보기 위해 포스팅을 남긴다. 1. Nest JS란? Nest(Nest JS)는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임 워크이다. 프로그레시브 JavaScript를 사용하고 TypeScript로 빌드되고 완벽하게 지원하며 (개발자가 순수 JavaScript로 코딩 할 수 있음) OOP(Object Oriented Programming), FP(Functional Programming) 및 FRP(Funtional Reactive Programming) 요소를 사용할 수 있게 해준다. 2. Nest JS는 내부적으로 어떻게 구성되어 있나? 내부적으로 Nest는 Express와…

✍️ Today I Learned 자주 쓰이는 HTTP 요청 메소드와 요청에 대한 처리 결과값을 나타내는 HTTP 상태 코드를 알아보고 학습한 내용을 글로 남겨보려 한다. 1. HTTP 메소드 logo HTTP 메소드는 클라이언트가 서버에게 사용자 요청의 목적/종류를 알리는 수단이다. 최초의 HTTP에서 메소드의 종류는 GET 메소드 하나뿐이었고 그마저도 HTML 문서만 응답해주었지만, 이후 다양한 사용자 요청의 목적과 종류를 알리는 메소드들이 생겨났다. 1-1. HTTP 메소드 종류 GET : 리소스를 조회하는 용도이다. URL(URI) 형식으로 서버 측 리소스를 요청한다. HEAD: GET과 비슷하지만 메시지 부분(본문)을 제외하고, 상태 줄과 헤더만 반환한다. 실제 리소스(문서)를 요청하는 것이 아니라, 리소스 정보를 요청한다. POST : 요청 데이터 처리, 주로 데이터 등록에 사용한다. 요청 데이터를 HTTP 바디에 담아 웹서버로 전송한다. PUT : POST와 비슷하지만 …

✍️ Today I Learned JWT (JSON Web Token)을 알아보고 학습한 내용을 글로 남겨보려 한다. 1. 쿠키 vs 세션? 기본적으로 서버와 클라이언트가 데이터를 주고 받는과정은 웹 상에서 HTTP 프로토콜로 처리된다. 다만 HTTP 프로토콜 특성에는 “상태를 유지 않는다. (Stateless)”, “연결을 유지 않는다. (Connectionless)” 라는 특성이 존재한다. 위 두가지 특성때문에 “로그인” 상태를 유지한다는 것은 기본적인 HTTP 환경에서는 많은 어려움이 발생할 수 밖에 없다. 상태를 유지하지 않고 연결이 유지되지 않는 웹 환경상 로그인 검증이 필요한 API 요청 마다 매번 인증을 해주어야 하기 때문이다. 따라서 위 불편함을 해소하고자 쿠키와 세션이 등장하였다. 1-1. 쿠키 간단하게 말하자면 클라이언트가 웹사이트에 접속 할 때 그 사이트가 사용하게 되는 작은 기록 파일이다. 쿠키 표준안인 RFC 2109에 따르면 쿠키는 300개까지 만들 수 있으…

✍️ Today I Learned Node.js와 웹 브라우저 모두 자바스크립트를 실행해주는 역할을 한다. 모두 자바스크립트를 실행해주는 환경이지만 Node.js와 웹 브라우저의 다른점을 알아보고 학습한 내용을 글로 남겨보려 한다. 1. Node.js와 웹 브라우저 스크린샷, 2022-03-09 17-18-05 Node.js와 브라우저 둘 다 자바스크립트 엔진을 내장하고 있기 때문에, 자바스크립트라는 프로그래밍 언어를 기반으로 실행된다. 자바스크립트 엔진(JavaScript engine) 은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 이 두 가지 모두 자바스크립트를 실행하는 환경이라는 사실은 동일하지만 존재 목적이 매우 다르다. 2. Node.js와 웹 브라우저의 차이점 존재목적만 두고 보자면 브라우저는 HTML, CSS, JS를 이용하여 웹 페이지를 화면에 띄우는 것이 목적이며 Node.js는 JS를 이용하여 서버 개발 환경을 제공하는 것이 목적이다. 둘의 차이점을…

✍️ Today I Learned 프로젝트들을 진행하며 대용량 서비스를 염두하고 서버를 개발해본 경험이 아직없다. Node.js 기반의 웹 서버 사용시 트래픽이 많아지는 경우 서버에 걸리는 과부하에 대응 하는 방법들을 학습해 보고 글로 남겨보려 한다. 우선 Node.js 환경 뿐 아니라 대개의 서버는 중앙 집중형태로 다수의 클라이언트를 위해 존재한다. server 때문에 클라이언트로부터 수많은 요청을 동시에 받으므로 병목현상이 발생하기 쉬우며 이를 대비해 처리 성능에 항상 주목해야 한다. 1. Node.js의 비동기 처리 Node.js는 비동기 IO를 지원하며 싱글 쓰레드 기반으로 동작하는 서버이다. (여기서 비동기 처리란? 어떤 코드의 출력이 끝날 때까지 기다려주지 않고 다른 코드를 먼저 실행하는 방식이다.) eventloop 비동기 처리방식은 이벤트 방식으로 풀어낸다. 클라이언트에서 발생된 요청을 처리하기 위해 이벤트가 발생하며, 서버 내부에 메시지 형태로 전달된다. 이 메시지는…

✍️ Today I Learned 시퀄라이즈는 SQL문을 JavaScript 환경에서 객체로 작성할 수 있는 ORM(Object Relational Mapping)이다. 여러 문법중 Op라는 연산자를 사용하는 문법에 대해 학습한 내용을 정리해 보았다. 1. Op Op 연산자는 객체 안에서 쓰이는 Symbol 타입의 연산자이다. 해당 연산자를 사용하여 복잡한 비교 연산을 지원해준다. 1-1. 연산자(일반) 공식문서에서 설명하는 연산자는 다음 아래와 같다. 1-2. 연산자(범위) 범위 연산자 또한 지원하여 다양한 종류의 범위를 쿼리할 수 있다. 공식문서에서 설명하는 범위 연산자는 아래와 같다. 1-3. 연산자 조합 조건 객체에서 연산자들끼리의 중복 사용또한 가능하다. 조건 객체에서 별 다른 연산자로 엮어주지 않고 속성을 나열한다면 AND로 간주된다. 연산자안에서 여러 컬럼을 다루는 경우에는 각 컬럼에 대한 조건을 담은 객체의 배열로 작성해야 한다. 🤔 Understanding 항상 느…

✍️ Today I Learned Sequelize ORM을 사용하며 가장 편리한 점을 꼽는다면 마이그레이션을 선택할 것 같다. 운영중인 서비스 중단없이 DB 스키마 모델을 변경한다던가 서비스 기획 및 설계단계에서 놓친 점을 나중에 추가할 때 DB를 갈아엎지 않고 수정할 수 있는 기능을 제공하는 마이그레이션은 써본 사람만 알 것이다. 다만 스키마 수정이 필요한 경우가 많이 발생하지 않기 때문에 사용빈도가 많지가 않았다. 익숙치 않은 문법이기 때문에 매번 사용할 때 마다 검색을 통하여 사용하였는데, 이참에 블로그에 학습한 내용을 정리해서 내가 보려고 남겨본다. 1. Migration 공식문서에서는 마이그레이션을 다음과 같이 설명하고 있다. Just like you use version control systems such as Git to manage changes in your source code, you can use migrations to keep track of chang…

✍️ Today I Learned 1. Node.js - code: ERR_HTTP_HEADERS_SENT Project 진행 중 쿠키가 강제로 삭제된 상황에서 로그아웃 API 요청시 에러를 겪고 서버가 죽어버리는 문제가 발생했었고 리팩토링 과정에서 해결한 과정을 짧게 글로 남겨보려 한다. 우선 해당 에러는 한번의 Request(요청)에 2개 이상의 Response(응답)이 존재하는 경우 발생하는 에러이다. 생각 보다 정직(?)하게 에러 메시지를 송출해 준다. 1-1. 에러발생 원인 우선 에러가 무엇을 뜻하는지는 알았다. 그렇다면 왜 발생했는지 코드를 뜯어보았다. controller/authentication/logout.js 스크린샷, 2022-02-09 11-31-35 로그인 여부를 인증하는 코드에서 미들웨어 함수를 호출하고 있으며 이 미들웨어 함수는 다음과 같이 구성되어 있다. middlewares/authorized/userAuth.js 스크린샷, 2022-02-09 11…

✍️ Today I Learned 1. 문제점 민감한 정보를 다룰 때 가장 중요한 부분은 바로 보안 이다. Final Project를 진행하며 보안에는 신경을 전혀 쓰지 않고 빠르게 기능적인 측면만 완성시키는데 급급하였다. 그렇기에 당연히 보안에는 구멍이 너무나도 크게 뚫려있었고, 리팩토링 기간 동안 보안적인 측면에서 조금더 안전하게 민감정보들을 DB로 저장하는 방법을 찾아본 내용을 글로 남겨보았다. 우선, 가장 심각한 문제를 꼽자면 클라이언트에서 받은 입력값들 혹은 서버에서 제공하는 인증코드들을 암호화 하지않고 그대로 DB로 저장을 하고 있다. 그렇기에 만약 DB가 해킹당하는 사태시에는 아무런 보호조치를 받지 못한채로 민감정보들이 그대로 유출이 될 수 밖에 없다. 최악의 경우 또한 대비해두어야 한다 생각한다. DB가 해킹되어 탈취 당했을 경우 최소한의 대처가 가능하도록 민감정보 암호화를 해보려 한다. 1-1. 문제점 1 우선 실제 코드를 다시 뜯어보고 가장 큰 보안 구멍 세군데를 …

✍️ Today I Learned 기존에 EC2, S3, RDS를 통해 배포한 웹 애플리케이션(21.10.29 TIL 참조)을 무료 도메인(Freenom)으로 배포하는 Advanced한 삽질 과정을 백엔드/프론트엔드 영역을 나누어 포스팅 해보려 한다. 주의! CloudFront에서 AWS 인증서 검증은 us-east-1(버지니아 북부) 인증서만 검증이 된다. s3와 CloudFront는 글로벌 지역으로 배포가 되고 ec2와 ELB는 지역 리전으로 나뉘어진다. 클라이언트는 글로벌 리전에서 작동하므로 리전에 영향을 받진 않을 듯 하고, 서버가 탑재될 ELB 서울리전으로 두고(CloudPing.info를 통한 속도 검증 결과 리전마다 속도차이가 명확히 있다.) 개발환경을 구성하는게 서버의 응답속도 때문에 이점이 있을 듯 한데 인증서 문제 때문에 골머리가 아팠다… 이를 간단히 해결하기 위해서 배포된 https://cmarket.cf 는 us-east-1 리전에서 웹서버가 작동하게 하여(Cl…

✍️ Today I Learned 1. Docker 도커(Docker)는 쉽게 애플리케이션을 추상화 하고, 컨테이너 방식으로 실행할 수 있게 해주는 리눅스 컨테이너기반의 오픈소스 가상화 플랫폼중 가장 대표적인 종류 중 하나이다 1-1. 리눅스 컨테이너 개발자들은 개별적인 로컬 환경에서 작업하며 특정하게 설정된 환경을 사용하고 있으며, 현재 개발 중인 애플리케이션은 특정 라이브러리, 종속성 및 파일에 의존하고 있다. 이러한 애플리케이션을 배포할때 임의의 환경에서도 애플리케이션이 작동되게 하고, 품질 검사를 통과하고, 큰 문제나 수정 없이 애플리케이션을 배포하려면 리눅스 컨테이너(LXC) 를 사용해야 한다. 컨테이너는 다음 세가지의 자원을 독립적으로 격리하며 소유하고 있다. 프로세스 특정 컨테이너에서 작동하는 프로세스는 기본적으로 그 컨테이너 안에서만 액세스할 수 있다. 컨테이너 안에서 실행되는 프로세스는 다른 컨테이너의 프로세스에게 영향을 줄 수 없다. 네트워크 기본으로 컨테이너 하나…

✍️ Today I Learned 1. Amazon Web Service 웹 서비스 배포를 위한 방법으로 가상화 기술(가상의 컴퓨터를 대여)을 사용하는 클라우드 컴퓨팅을 사용할 수 있다. 클라우드 컴퓨팅 서비스 중 가장 유명한 것이 Amazon Web Service(AWS)이다. 1-1. Cloud Computing 클라우드 등장 이전의 방식은 흔히 말하는 전산실 등에 컴퓨터를 배치하고 인터넷을 연결하여 서비스를 제공했다. 하지만 이러한 경우 서버가 요청에 대한 수용 능력이 한계에 도달한다면 같은 공간에 서버를 추가하거나 서버의 성능을 업그레이드하는 방식을 채택해야한다. 이러한 방식의 문제는 몇가지 문제점을 가지고 있다. 주기적인 관리가 필요 : 흔히 말하는 서버실에는 종종 고장이 나거나 인터넷과 연결이 되지 않는 얘기치 못한 문제가 생기기도 한다. 이런 상황이 발생한다면 규모가 작은 서버라도 이를 해결하기 위한 인력 및 비용이 불가피하게 투입되어야 문제 해결이 가능하다. 공간의 한…

✍️ Today I Learned 1. Git Branch 1-1. 브랜치(Branch)란? 브랜치란 독립적으로 어떤 작업을 진행하기 위한 개념이다. 개발을 하다 보면 한 페이지 안의 여러 기능을 따로 구현하기 위해, 코드를 여러 개로 복사해야 하는 일이 필연적으로 생긴다. 브랜치 기능을 활용하면, 코드를 통째로 복사한 후 원래 코드가 변경될 우려 없이 독립적으로 개발할 수 있다. 다시 말해, 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있다. 그러므로 브랜치가 갖는 기능의 장점은 다음과 같다. 한 소스코드에서 동시에 다양한 작업을 할 수 있게 해준다. 소스코드의 한 시점과 동일한 상태를 만들고, 브랜치를 넘나들며 작업을 수행할 수 있다. 각각의 브랜치에서 생긴 변화가 다른 브랜치에 영향을 주지 않고 독립적으로 코딩을 진행할 수 있다. , , , 등 다양한 개발과정 브랜치를 만들고 작업을 하다 보면, 다음 이미지와 비슷한 Git graph…

✍️ Today I Learned 1. 인터넷 프로토콜 1-1. IP와 IP Packet IP 패킷에서 패킷은 pack과 bucket이 합쳐진 단어로 소포로 비유할 수 있다. IP 패킷은 우체국 송장처럼 전송 데이터를 무사히 전송하기 위해 출발지 IP, 목적지 IP와 같은 정보가 포함되어 있으며 데이터를 전달하는 통신의 단위이다. 스크린샷, 2021-10-26 16-00-27 클라이언트 패킷 전달 과정을 살펴보면 다음과 같다. 클라이언트가 IP 패킷을 인터넷 상의 노드에 던진다. 인터넷 상의 노드(컴퓨터)들은 모두 IP 프로토콜을 따르기 때문에 해당 패킷의 정보(출발지, 목적지)를 이해할 수 있다. 중간 노드들은 목적지 노드가 어디있는지 서로 물어가면서 해당 패킷을 전달한다. (라우팅 과정) 위 과정을 통해 복잡한 인터넷 망 사이에서도 정확한 목적지로 패킷을 전송할 수 있다. 스크린샷, 2021-10-26 17-44-49 서버 패킷 전달 과정또한 클라이언트와 마찬가지로 이뤄지며, 패…

✍️ Today I Learned 1. 컴퓨터 공학 기초 1-1. 문자열 유니코드 2010년도 이후, 유니코드라고 불리우는 인코딩 방식이 통일된 시대를 살아가고 있다. 유니코드(Unicode) 란 유니코드 협회(Unicode Consortium)가 제정하는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다. 이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자를 다루기 위한 알고리즘 등을 포함하고 있다. 유니코드가 탄생하기 이전에는 같은 한글이 적힌 텍스트 파일이라도 표현하는 방법이 제각각이었기에, 어떤 파일이 지원하지 않는 다른 인코딩 형식으로 저장되어 있는 경우에는 파일을 제대로 불러올 수 없는 문제가 발생했었다. 기본적으로 유니코드의 목적은 현존하는 문자 인코딩 방법을 모두 유니코드로 교체하는 것이다. 인코딩(부호화)란? 인코딩이란 어떤 문자나 기호를 컴퓨터가 이용할 수 있는 신호로 만드는 것이다. 이 신…

✍️ Today I Learned 1. OAuth OAuth는 인증을 중개해 주는 메커니즘이다. 이미 사용자 정보를 가지고 있는 웹 서비스(GitHub, google, facebook 등)에서 사용자의 인증을 대신해 주고, 접근 권한에 대한 토큰을 발급한 후, 이를 이용해 내 서버에서 인증이 가능하게끔 구현해야한다. 1-1. 사전 준비 OAuth 2.0 문서를 참조하여 GitHub에 내 앱 등록을 해야한다. 내 앱 등록을 끝낸 뒤, GitHub App에서 제공하는 Client ID 및 Client Secret의 정보를 서버에서 접근하기 위해 파일에 환경변수를 등록해 주자.(Client Secret은 Github 계정 보안을 위해 타인에게 알려지면 안되므로 파일 내부에서 관리해줘야 한다.) 1-2. 서버 구현 oauth/access_token 인증을 웹 서비스(Github)에서 처리하므로, 인증서가 따로 필요하지가 않다. 우리가 구현해야 할 서버는 Github 웹에 접근하여 aut…

✍️ Today I Learned 1. Token 앞선 세션 인증 방식은 서버(혹은 DB)에 유저 정보를 담는 인증 방식이었다. 매 요청마다 데이터베이스를 살펴보는 것이 불편하고, 이 부담은 서버의 과부화를 초래할 수 있다. 부하를 줄이기 위해 인증 방식을 토큰 인증 방식을 사용해보자. 토큰 인증 방식의 인증 절차는 아래 그림과 같다 token 1-1. 사전 준비 Part1-Session의 준비단계와 동일한 진행은 생략하였다. ACCESS_SECRET와 REFRESH_SECRET 변수명으로 2가지의 JWT(Json Web Token)을 사용한다. accessToken은 보호된 정보들(유저의 이메일, 연락처, 사진 등)에 접근할 수 있는 권한부여에 사용된다. 클라이언트가 처음 인증을 받게 될 때(로그인 시), accessToken,refreshToken 두 가지를 다 받지만, 실제로 권한을 얻는 데 사용하는 토큰은 accessToken이다. accessToken만 존재한다면, 해커나 …

✍️ Today I Learned 1. HTTPS HTTP는 웹 환경에서 브라우저와 웹서버가 통신하는 방법이란걸 이전에 학습하였다. 그렇다면 HTTPS는 무엇일까? 스크린샷, 2021-11-22 21-01-59 HTTPS (HTTP + Secure) 는 HTTP protocol의 암호화된 버전이다. 기존 HTTP 프로토콜은 주고 받는 데이터가 암호화 되지 않고 그대로 전송되는 단점이 있기에 HTTPS가 등장하였다. HTTPS는 HTTP의 하부에 SSL과 같은 보안계층을 제공함으로써 동작한다. 1-1. 암호화 키(Key) https-3 위에서 HTTPS는 주고 받는 데이터를 암호화하여 데이터를 주고받는다 하였다. 이때 사용되는 암호화 알고리즘을 담은 키를 암호화 키라 부른다. 암호화를 위한 알고리즘은 노출되지 않아야 하며, 또한 원래 데이터로 복호화 하는 과정에서도 키가 필요하다. 따라서 키는 양쪽에서 모두 분배하여 공유되어야 한다. 1-2. 인증서(Certificate) https-…

✍️ Today I Learned Session HTTPS 프로토콜 서버를 만들고, 클라이언트에서 쿠키에 담긴 세션 정보를 확인해야 한다. 세션 기반 인증은 서버(혹은 DB)에 유저 정보를 담는 인증 방식이다. 이때 웹사이트에서는 로그인을 유지하기 위한 수단으로 쿠키를 사용하며 쿠키에는 서버에서 발급한 세션 아이디를 저장되어 있다. 1-1. 사전 준비 환경 변수 설정 Sequelize 스프린트때 해보았기 때문에 별도로 mysql을 node.js에서 어떻게 사용하는지 구조를 뜯어보진 않았다. 파일을 내 로컬환경에 알맞게 설정해 주었다. 파일에 이미 데이터베이스 이름()이 명시되어 있었다. 해당 이름의 DB를 생성해주었다. 데이터베이스 마이그레이션 이 또한 Sequelize 스프린트때 해보았기 때문에 와 폴더 내부의 파일들을 확인하지 않았다. 위 sequelize 명령어로 이미 짜여진 DB 스키마를 내 mysql 환경으로 마이그레이션 해주었다. 인증서 발급 mkcert라는 프로그램…

✍️ Today I Learned 1. ORM(Object-Relational Mapping) ORM은 SQL문을 사용하지 않고 JS문법을 통해서 Object로 DB에 접근할 수 있도록 돕는 역할을 한다. 스크린샷, 2021-11-17 15-11-59 ORM은 SQL문법 대신 어플리케이션의 개발언어를 그대로 사용할 수 있게 함으로써, 개발 언어의 일관성과 가독성을 높여준다는 장점을 갖고 있다. ORM에는 여러가지 종류 (Django — ORM cookbook, Node.js — Sequalize, Java — Hibernate, JPA 등) 가 있지만, 학습방향과 알맞는 Node.js — Sequalize 를 사용 할 예정이다. 2. Sequelize Sequelize란 에서 을 사용할 때 Query문을 사용하지 않고 더욱 쉽게 다룰 수 있도록 도와주는 라이브러리이다. Sequelize는 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해주므로 자바스크립트 구문을 알아서 SQL문으로…

✍️ Today I Learned 1. MVC 모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 하나의 애플리케이션, 프로젝트를 구성할 때 그 구성요소를 세가지의 역할로 구분한 디자인 패턴을 일컫는다. 1-1. 웹 애플리케이션 MVC design pattern 위의 모식도는 개념적인 MVC 를 나타낸 그림이며, 대부분의 웹 애플리케이션에서의 MVC는 다음 아래와 같은 구조로 이루어진다. Router-MVC-DB svg 모델-뷰-컨트롤러 각각의 구성요소들 사이에는 다음과 같은 관계가 있다. 모델(Model) : 애플리케이션의 정보, 데이터를 나타낸다. 데이타베이스 혹은 또한 이러한 여러 정보들의 가공을 책임지는 컴포넌트를 말한다. 뷰(View) : input 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타낸다. 다시 말해 데이터 및 객체의 입력, 그리고 보여주는 출력을 담당한다. 컨트롤러(Co…

✍️ Today I Learned 1. DataBase & SQL 1-1. DataBase 데이터베이스는 IN-MEMORY, FILE I/O 방식의 한계와 관리하는 데이터의 양이 방대해짐에따라 효율적이고 데이터의 무결성을 지키기 위해 고안된 데이터에 특화된 서버이다. 스크린샷, 2021-10-13 16-50-13 이 데이터베이스가 활용되는 구조는 이전의 “2-TIER 아키텍쳐”인 클라이언트/서버의 구조에서 더 나아가, 웹&앱에서 취급하는 데이터를 따로 분리 하는 “3-TIER 아키텍쳐”라 불리우며 보안성, 대용량 서비스에서의 강점을 지닐수 있게 되었다. 1-2. SQL 하나의 언어인 Structured Query Language (SQL) 은 데이터베이스 언어로, 주로 관계형 데이터베이스에서 사용한다. 예를 들어 MySQL, Oracle, SQLite, PostgreSQL 등 다양한 데이터베이스에서 SQL 구문을 사용하여 데이터베이스에 쿼리(Query) 를 보내 원하는 데이터를 가져…

✍️ Today I Learned 1. Linux 사용권한 1-1. 터미널 파일 및 폴더 생성 명령어 명령어로 이름의 폴더를 생성하고 (리눅스 기반 오픈소스 편집 프로그램)를 통해 파일을 생성 한 후 명령어 을 프롬프트에 입력하고 Enter(엔터 키)를 누르면 다음과 같은 출력 결과를 얻을 수 있다. 스크린샷, 2021-10-05 11-41-11 터미널에 출력된 결과 중에서, 가장 왼쪽의 표현을 살펴보면, 파일 helloworld.js는 이라고 출력되었고, 폴더 linux는 라고 출력되었다. 이 표현의 첫 시작인 와 는 각각 not directory와 directory를 나타낸다. 폴더이면 로, 파일이면 로 표현한다. 이어지는 , , 는 각각 read permission, write permission, execute permission으로 읽기 권한, 쓰기 권한, 실행 권한을 나타낸다. 3번에 걸쳐 나타나는 이유는 사용자와 그룹, 나머지에 대한 권한을 표시하기 때문이…

✍️ Today I Learned 1. React 상태관리 1-1. 프론트엔드 개발에서의 상태 관리 우선 상태란 컴포넌트 내부에서 변화되는 값이다. 특별히 프론트엔드 영역에서는 “동적으로 표현되는 데이터”라 부를 수 있다. 우리는 컴포넌트 우선 개발 방식에 대해서 학습했었다. 21.09.07 게시글 참조 하향식 데이터 흐름에 따라 를 이용해서 데이터를 전달하며 이는 단방향 데이터 흐름이다. 따라서 이 “상태”의 위치가 매우 중요하다. 우선 Javascript를 처음 배울 때 처럼 전역 변수와 지역 변수에 처럼 생각을 해보자. 스크린샷, 2021-10-01 17-40-39 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태이며, 전역 상태는 프로덕트 전체 혹은 여러가지 컴포넌트가 동시에 관리하는 상태이다. 로컬 상태를 구분하는 것은 간단하다. 보통 컴포넌트 내에서만 영향을 끼지는 상태는 로컬 상태를 뜻한다. 그럼 전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태를 의미할 …

✍️ Today I Learned 1. Component Driven Development (CDD) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발이다. 페이지 단위로 UI 개발이 이루어지는 것과는 반대로 UI 컴포넌트들부터 만들고 이를 기반으로 페이지를 구성하는걸 말한다. 스크린샷, 2021-09-25 17-28-15 Storybook 같은 UI 컴포넌트 익스플러어 툴을 통해 체계적으로 관리, 개발자들간 쉽게 소통할 수 있는 장점이 있다. 2. CSS in JS 방법론 2-1. 구조적인 CSS 작성 방법의 발전 CSS 작성 방식도 꾸준히 진화해 오고 있다. 스크린샷, 2021-09-27 00-25-15 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야할 팀원 수도 많아짐에 따라 CSS를 작성하는 일관된 패턴이 없다는 것은 개발자들에게 가장 큰 걸림돌이 되었다. 또한 모바일이나 태블릿을 비롯한 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 C…

✍️ Today I Learned 1. CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유라 불리는 CORS는 브라우저에서 다른 출처의 리소스를 공유하는 방법이다. 출처에 대해서 설명하기 전, URL의 구조에 대해서 짚고 넘어가야한다. 앞서 URL에 대하여 학습한적이 있다. 다시 들여다 보면, Notes_210918_133331 이중 출처(Origin)는 , , (생략가능)를 합친 것을 말한다. Origin은 모든 웹페이지 개발자도구에서 을 통하여 확인 할 수 있다. 따라서 Protocal, Host, Port 동일한 경우는 출처가 동일하다고 볼 수 있다. 1-1. CORS가 왜 필요한가? 보안상의 이유로 자바스크립트 엔진 표준 스펙에는 동일 출처 정책(Same-Origin Policy)이 포함되어있다. (만약 다른 서버의 내용까지 읽을 수 있게된다면, 사용자의 키보드 입력을 가로채는 스크립트를 다른 페이지에 심을 수도 있으므로 보안 이슈가 발생할…

✍️ Today I Learned 1. React 데이터 흐름 react 1-1. 상향식(bottom-up) 개발 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 앱을 만들거나 웹페이지를 만들때 페이지를 만들기 이전에 컴포넌트를 만들고 조립을한다. 즉, 상향식(bottom-up) 으로 앱을 만드는 것이다. 이러한 구조의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다.이때 중요한점은 하나의 컴포넌트는 한가지 일만 하는 단일 책임 원칙을 따르는 것이다. 그래야 이후 오류 발생시 오류 컴포넌트를 쉽게 찾고 수정할 수 있다. 이러한 흐름을 이해하였다면, 웹페이지나 앱 디자인을 전달 받았을때 React 개발자는 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 1-2. 하향식(top-down) 데이터 흐름 단방향 데이터 흐름(one-way data flow) 이라는 키워드는 React를 대표하는 키워드이다. 컴포넌트는 컴포넌트…

✍️ Today I Learned 1. HTTP/네트워크 1-1. 클라이언트-서버 아키텍처 클라이언트-서버 아키텍처는 리소스가 존재하는 곳과, 리소스를 사용하는 앱을 분리시킨 네트워크 모델이다. 리소스를 사용하는 앱이 바로 “클라이언트”, 리소스가 제공(serve)하는 곳은 “서버” 라고 부른다. 클라이언트와 서버로만 이루어진 모델을 2-Tier 아키텍처라고 부르기도 한다. 클라이언트-서버 아키텍처 일반적으로 서버는 리소스를 전달해주는 역할만 담당한다. 리소스를 저장하는 공간을 별도로 마련해 두는데, 이 공간을 “데이터베이스” 라고 부른다. 이처럼 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 일컫는다. 1-2. HTTP 프로토콜이란? HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 누구나 다 알아야 하는 통신 프로토콜이다. 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의되어 …

✍️ Today I Learned 1. 비동기 처리 (Asynchronous processing) 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 행위를 말한다. 요청에 대한 결과가 동시에 일어나지 않는 특성을 가지고있다. 비동기 처리에 대한 이해가 없는 상태에서 해당 코드를 본다면, JS는 위에서 부터 아래로 한줄씩 읽히기 때문에 출력 후 3초 뒤 라는 출력이 기대되지만, 실제 결과는 출력 후 3초 뒤 가 출력된다. 이라는 Web API를 이용한다면 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행할 수 있게되는데 비동기 방식으로 실행되기 때문에, 코드 순서대로 실행되는것이 아니라 일단 을 실행 하고 나서 바로 다음 코드인 으로 넘어간 뒤 3초 후 를 출력하게 된다. 여기서 발생하는 문제는 의 지연시간을 랜덤한 숫자를 준다면 개발자는 위의 코드의 순서를 제어할수 있을까? 비동기 처리는 이처럼 순서…

✍️ Today I Learned 1. 자료구조란? 자료구조란 여러 데이터들의 묶음을 저장하고, 사용하는 방법을 정의한 것이다. 데이터에 편리하게 접근하고 변경하기 위해 데이터를 저장하거나 조직을 효율적으로 해야한다. 그러한 행위로 분류된 데이터를 자료구조라 한다. ( + 알고리즘은 그 저장된 데이터를 처리하는 과정이다.) 2. 자료구조의 종류 2-1. Stack 스택(Stack)은 쌓다, 쌓이다, 포개지다란 뜻을 내포한다. 직역 그대로 데이터(data)를 순차적으로 쌓는 구조이다. 순차적으로 쌓다보니, 가장 먼저 들어간 자료는 가장 나중에 나올 수 있다. 입력과 출력이 하나의 방향으로 이루어지는 제한적 접근에 있다. 이러한 자료구조의 정책을 LIFO(Last In First Out) 혹은 FILO(First In Last Out) 이라 일컫는다 stack 위 사진 처럼 push(), pop()을 쓰는 배열이 대표적인 자료구조이다. 대표적으로 활용되는 예시는 브라우저의 뒤로 가기,…

✍️ Today I Learned 1. 클래스를 이용한 모듈화 1-1. 객체 돌아보기 객체는 자바스크립트의 8가지 자료형중 하나이다. 객체는 원시형(primitive) 자료형과 달리 다양한 데이터를 담을 수 있다. 중괄호를 이용하여 객체는 선언되며, 중괄호 안에는 쌍으로 구성된 들이 속해있다. 1-2. 메서드와 this 객체 프로퍼티는 함수를 할당하여 객체에게 행동할 수 있는 능력을 부여해 줄수도 있다. 이처럼 객체 프로퍼티에 할당된 함수를 메서드(method)라고 부른다. 위 예시에선 객체 에 할당된 메서드는 이다. 객체를 사용하여 개체를 표한하는 방식을 객체 지향 프로그래밍(object-oriented programming, OOP) 이라 부른다. 대부분의 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 하게된다. 메서드 내부에서 키워드를 사용하면 메서드를 호출할 때 사용된 객체에 접근할 수 있게된다. 위 처럼 키워드를 통해 객체의 값에 접근할 수 있으며, 메서드…

✍️ Today I Learned 1. React Props & State 1-1. Props vs State 간단하게 언급하고 가자면, 는 외부로 부터 전달받은 값이며, 는 컴포넌트 내부에서 변화하는 값이다. 1-2. Props 컴포넌트의 속성(property)을 뜻한다. 는 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당된다. 이 해당 컴포넌트의 속성은 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 의 자료형은 객체 형태이다. 로 어떤 타입의 값도 넣어 전달할 수 있도록 는 객체의 형태를 가진다. 또한, 는 외부로부터 전달받…

✍️ Today I Learned 1. React SPA (Single Page Application) 과거의 브라우저는 웹사이트 페이지 전체를 로딩하였기 때문에 발생하는 리소스 손실이 컸다. 하지만 SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않으며 필요한 부분만 갱신하여 웹페이지를 새로 로딩한다. 즉 SPA 란, 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 일컫는다. 스크린샷, 2021-08-12 10-11-45 1-1. SPA 의 장단점 1. 장점 전체 페이지가 아닌 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction에 빠르게 반응한다. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 과부화가 적다. 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다. 대…

✍️ Today I Learned 1. React 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리. 1-1. 리액트의 3가지 특징 선언형 (Declarative) 코드를 면밀히 뜯어보지 않아도, 코드를 유추할 수 있게 된다. 한 페이지를 보여주기 위해 , , 로 나눠서 적기보다는, 하나의 파일에 명시적으로 작성할 수 있게 를 활용한 선언형 프로그래밍을 지향한다. 스크린샷, 2021-08-11 10-36-42 컴포넌트 기반 (Component-Based) 컴포넌트(Component) 란 독립적인 단위모듈이다. 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용에 용이하기 때문에, 기능 자체에 집중하여 개발이 가능하게 된다. 스크린샷, 2021-08-11 10-41-55 범용성 리액트는 JavaScript 프로젝트 어디든 유연하게 적용될 수 있다. Facebook 에서 관리되어 안정적이고,…

✍️ Today I Learned 1. 고차함수 1-1. 일급 객체 자바스크립트에는 특별한 대우를 받는 일급 객체가 있다. 대표적인 일급 객체 중 하나가 함수이다. 변수에 할당(assignment) 할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(, , , , )를 다루듯이 다룰 수 있다는 걸 의미한다. 변수에 할당(assignment) 할 수 있다. 이미 함수를 변수에 저장하는 방법(함수 표현식)은 학습하였다. 위의 함수 표현식(function expression)은 함수 선언식(function declaration)과 다르게 호이스팅(Hoisting)이 적용되지 않는다. 함수 선언식의 호이스팅에 지나치게 의존하면, 코드의 유지 보수가 쉽지 않다. 코드 리뷰나 디버깅을 할 때, 코드를 위아래로 왔다 갔다 하…

✍️ Today I Learned 1. DOM DOM( Document Object Model) 은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. 1-1. HTML에 JavaScript 적용하기 HTML에 JavaScript를 적용하기 위해서는 태그를 이용한다. 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 추고 요소를 먼저 실행한다. 즉, 요소는 등장과 함께 실행된다. 요소는 발견즉시 해석되므로 HTML 구문이 모두 해석되기 전 실행될 수도 있다. 정의되지 않은 값이 호출되는 경우 null 이 발생되므로 되도록 HTML 구문이 모두 해석되는 시점인 앞에 쓰는걸 습관하 하자. 1-2. 부모&자식 엘리먼트 찾기 위의 HTML 코드를 보고 부모 자식간의 관계를 눈으로 찾는건 …

✍️ Today I Learned 1. Spread / Reset 문법 1-1. Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다. 1-2. Rest 문법 파라미터(함수의 매개변수)를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다. 1-3. 배열에서의 Spread 문법 Spread 문법은 배열에서 강력한 힘을 발휘한다. 1-4. 객체에서 사용하기 객체의 key의 이름이 중복될 경우 후속 spread 문법을 따른다. 1-5. 함수에서 나머지 파라미터 받아오기 2. 구조 분해 (Destructing) 구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다. 2-1. 분해 후 새 변수에 할당 배열 객체 함수 3. JavaScript 문제풀이 풀이 코드는 Github 참조 자바스크립트 핵심문법(클로저,스코프..등등) 문제풀이 🤔 Understan…

✍️ Today I Learned 1. 원시 자료형과 참조 자료형. 1-1. 원시 자료형. 자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 tring, number,bigint, boolean, undefined, symbol, (null) null은 원시 타입과 거의 같게 사용된다고 볼 수 있다. 작동 방식 또한 다른 원시 타입과 같으나, 다만 엄밀하게 따지자면 원시 타입이라고 볼 수 없는 자료형이다. 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있다. 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다. 1-2. 참조 자료형. 자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형이다. 이런 자료형을 자바스크립트에서는 참조 자료형(reference data type; 참조 타입)이라고도 부른다. 대표적인 …

✍️ Today I Learned 1. 다양한 CSS 셀렉터 새로 학습한 셀렉터 attribute 셀렉터 , 부정 셀렉터 2-1 . CSS layout 스크린샷, 2021-08-03 10-54-00 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, 태그가 가진 기본 스타일에 약간의 여백을 포함하지 않아 계산에 어려움이 있다. 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다. 이렇게 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 한다. 2-2. CSS layout (flexbox) flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. 스크린샷, 2021-08-03 11-34-39 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정한다. 기본값으로, dis…

✍️ Today I Learned 1. 객체 코플릿 객체는 배열과 다르게 순서성을 가지지 않으며, 묶음으로 된 데이터에 이름을 붙혀, 의미를 부여할 수 있다. 배열또한 각 값이 하나의 변수로 묶인 데이터이지만, 각 index가 어떤 정보를 갖고 있는지 알아야지 해당 값에 접근이 용이하다. 객체는 키쌍값(key-value pair) 으로 이루어져 있다. 스크린샷, 2021-08-02 23-44-58 객체의 값을 사용하거나 추가할 땐 Dot notation, Bracket notation 방식을 사용한다 할당된 키와 값을 지울 땐 delete 키워드를 이용해 삭제가 가능하다. 객체 안에 특정한 키가 있는지 확인이 필요할 땐, in 연산자를 이용하여 확인한다. : 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정됩니다. : 반복작업을 수행…

✍️ Today I Learned 1. 배열 배열은 순서가 있는 값이다. 순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 매긴다. 배열의 값 접근은 인덱스를 이용하여 값에 접근한다. 대괄호를 이용해서 배열을 만드며, 각각의 원소(element)는 쉼표(comma)로 구분해준다. 배열의 속성에 접근하거나 메소드를 추가할때는 (온점)을 이용하여 접근한다. : 온점(dot)을 이용해서 변수가 가지고 있는 속성(property)에 접근할 수 있다. : 온점(dot)을 이용해서 관련된 명령(method)도 실행할 수 있다. 명령을 실행할 때는, 함수를 실행하듯 괄호를 열고 닫는 형태로 실행한다. 1-1. 배열의 기초 메소드 Array.isArray : 배열의 기본 type은 “object”이다. 그래서 특정 값이 배열인지 아닌지 로 판별할 수 없다. 는 배열인지 아닌지 판별할 수 있는 메소드이다. 반환값은 이다. push, pop : 배열의 뒤에서 요소를 추가 및 삭제할 수 …

✍️ Today I Learned 1. Git Git이란 분산형 버전 관리 시스템(Version Control System) 의 한 종류이며, 빠른 수행 속도에 중점을 둔다. “버전 관리 시스템” 이란 파일 변화를 시간에 따라 기록했다가 이후에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 동일한 정보에 대한 여러 버전을 관리하게 되며, 버전을 통해 시간적으로 변경 사항과 변경 사항을 작성한 작업자를 추적할 수 있다. 1-1. GitHub Git을 통하여 버전관리를 한다 이미 언급을하였다. 그렇다면 Github는 무엇일까? Github는 Git Repository를 관리할 수 있는 클라우드 기반 서비스이다. 즉, Git으로 버전을 관리하는 폴더에 대해서 Github을 통해 여러 사람들이 공유하고 접근할 수 있게되기때문에 Git이 분산형 버전 관리 시스템으로 불리울 수 있게된다. 1-2. Git Repository 내가 작업하는 소스 코드 폴더가 버전 관리를 받게 하기 위해서는…

✍️ Today I Learned 1. Linux CLI 명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. 2. 패키지와 패키지 매니저 2-1. 패키지 리눅스에서 빈번하게 사용하는 ‘패키지’ 란 커널 및 라이브러리 버전의 배포판 환경에 맞추어 빌드한 실행파일을 압축한 것이다. 우분투 환경에서는 을 이용하기에 해당 방식을 학습하였으며, 해당 환경으로 환경을 구성하였다. 2-2. 패키지 매니저 APT(Advanced Packaging Tool) 는 데비안과 우분투를 포함하여 데비안 계열 리눅스 배포판들의 주 패키지 관리 도구이다. 3. Node.js 쉽게 말하면 JavaScript 런타임(Runtime)이다. 여기서 런타임이란 프로그래밍 언어가…

✍️ Today I Learned 1. 계산기 실습 참조: Github 스크린샷, 2021-08-04 23-13-16 🤔 Understanding 점점.. 수업 내용을 한번에 따라잡기가 어렵다. 장기전이다, 멘탈 관리. 모르는 부분이있다면 붙잡고 끙끙 앓기보다는 조금더 학습 후 주말중 부족한 부분을 다시 학습하여 멘탈 관리 및 부족한 부분을 메꿔나가야 할 듯 하다. CSS .. 만만히 볼 분야가 절대 아니다. JS를 통하여 CSS를 조작하거나 제어하는 분야 말고도 특정한 상태나 규칙에 따라 CSS 스스로 동작하는 선택자들 또한 존재하였다. CSS로 인해 단순 코드 몇줄 만으로도 코드가 다이나믹해지는 효과를 볼 수 있다. 선택자에는 태그, id, class만 선택되는줄 알았는데 복합선택자, 부모/자식 개념까지 으.. 절대 만만하지 않다. ✍️ Today I Learned 1. 계산기 실습 🤔 Understanding

✍️ Today I Learned 1. 계산기 실습 참조: Github 스크린샷, 2021-08-04 23-11-14 🤔 Understanding , , 세분화 된 학습이 아닌, 세가지의 모든 기능을 더한 웹페이지 만들기는 생각보다 상호간 작용을 염두해야 원활이 구현된다. ✍️ Today I Learned 1. 계산기 실습 🤔 Understanding

✍️ Today I Learned 1. CSS CSS 문법 css문법 선택자(selector) 에는 태그이름이나 id 또는 클래스 등이 올수있다. 선택자로 특정 요소를 선택할수 있으며, 선택 후 중괄호 안의 선언 블럭에서 이 선택자에 적용 할 내용들을 작성한다. id는 한 문서에 단 하나의 id 값을 가질수 있으며 기호를 이용하여 선택한다. class는 동일한 기능을 하는 css를 여러 요소에 적용하기 위해 선택되며 기호를 이용하여 선택한다. 속성은 선택자 안에 요소로써 적용할 수 있는 내용이다. 속성과 값의 끝에는 세미콜론 을 붙여 속성끼리 구분한다. 다양한 속성 값은 해당링크에서 참조하자 CSS 참고서 -MDN. 박스모델은 레이아웃 설계시 가장 주의하여 구성해야 한다. (줄바꿈이 되는 박스(block), 옆으로 붙는 박스(inline, inline-block)가 있기에 설계시 미리 계획 후 설계해야한다.) block inline-block inline 줄바꿈 여부 O X X…

✍️ Today I Learned 1. 반복문 코플릿 오늘 학습한 내용 중 가장 인상 깊었던 코드 풀이를 다시 한번 복습해보겠다. 핵심 포인트는 임의의 수를 입력받아 홀수인지 아닌지 여부를 리턴해야 한다. 반복문(while)문을 사용해야 합니다. 나눗셈(/), 나머지(%) 연산자 사용은 금지됩니다. 0은 짝수로 간주합니다. 🤔 Understanding 시간이 어디로 사라진거지?.. 반복문 개념학습은 1시간 코드풀이는 5시간.., 이중반복문은 조금 많이많이 애먹었지만 확실히 문제를 풀어가며 pair와 함께 머리를 맞대며 도출해내는 과정은 희열감이 느껴지기도 했다. 확실히 개념 수업보단 직접 짜본 내 코드들을 디버깅해가는 과정이 학습에는 더욱 도움이 되는 듯 하였다. 실제로 시간이 금방금방 지나가는 기적을 겪였다… 기본 수업 외에 오늘은 추가 학습을 못한듯하다… 어젠 분명 리액트 수업이 재밌었는데.. 개발환경 구축하고 나니 오늘은 터미널을 켜보지도 못했다. 스트레스 컨트롤도 중요하다. …

✍️ Today I Learned 1. 문자열 문자열은 배열처럼 요소 하나씩 접근이 가능하다. index로 접근은 가능하지만 쓸 수는 없다는 (read-only) 특징을 가진다. 문자열은 + 연산자를 쓸 수 있다. string 타입과 다른 타입 사이에 + 연산자를 쓰면, string 형식으로 변환된다. (toString) 문자열의 표현방식중 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다. 이전 버전의 ES2015사양 명세에서는 “template strings” (템플릿 문자열) 라고 불려 왔다. ES6는 템플릿 리터럴(Template literal) 이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 ` 를 사용한다. 2. 호이스팅 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효범위…

✍️ Today I Learned 1. 변수 변수를 이용하면 데이터를 편리하게 저장하고 꺼내 쓸 수 있게 한다. 변수의 선언과 값의 할당에 대해서 학습하였다. 선언(declaration)을 통하여 변수를 선언할 수 있다. 할당(assignment)을 통하여 변수에 값을 저장하게 된다. 이때 사용되는 ’=‘은 같다라는 뜻이 아닌 ‘할당 연산자(Assignment operator)‘이다. var, let, const 선언방식의 차이점을 학습하였다. var let const 중복선언 O X X 재할당 O O X 변수명은 다음의 규칙에 따라 명명된다. Camel Case 할당이 없는 변수의 경우 값을 가진다. (값이 없는게 아닌 해당 값을 가진다) 2. 타입 원시 자료형, 참조 자료형을 학습하였다. typeof 연산자를 통하여 특정 갑의 타입을 확인할 수 있다. 3. 함수 함수는 “작은 기능의 단위”이며 키워드(keyword), 이름(name), 매개변수(parameter), 몸통(…

✍️ Today I Learned 1. 학습 툴 셋팅 리눅스(Ubuntu OS) 환경에 기본 개발환경 구축. 🤔 Understanding 코드스테이츠 1일차 OT를 받았다. 앞으로의 강의 일정 및 학습 방식에 대해서 설명을 들었다. 오늘은 강의라기보다는 줌을 통해서 코드스테이츠 강사분들과 소통한 느낌을 받았다. 오늘 OT의 중점은 “자기주도적 학습”. 모든 커리큘럼이 온라인을 통하여 수업이 진행되며 질문 또한 “Agora States”라는 웹사이트를 통해 진행되기때문에.. 커리큘럼을 완주하려면 스스로 커리큘럼을 지키려 노력을 해야한다. 이러한 학습태도는 앞으로 수료시점까지는 당연하며 개발자로써 평생 몸에 지녀야할 기본소양이라 느껴진다. 평생 공부해야지.. ✍️ Today I Learned 1. 학습 툴 셋팅 🤔 Understanding