✍️ Today I Learned SAA-03 자격증 합격 후기글을 찾아보면 덤프 문제를 많이 풀이해보는게 지름길이란건 금방 찾아볼 수 있다. 다만, 아직 한달 반 가량 기간이 남은 시점이기 때문에 무작정 덤프 문항 반복 풀이를 시작하는거 보다는 AWS에서 제공하는 시험 준비 Skill Builder 강의를 한번 따라가보자 생각하였다. AWS에서 제공하는 SAA-03 Skil Builder 강의를 듣고 간략한 후기를 남기기 위해 포스팅을 남긴다. 1. 시험에 대해 알아보기 Module 1.은 20분 가량의 영상과 함께 시험에 대한 간략한 개요를 안내하고 있다. 영상의 내용을 간략히 요약하자면 아래와 같았다. 이 자격증은 AWS에서 고성능 아키텍처를 가진 시스템을 설계 및 구현할 수 있는 역량을 검증한다. 이 시험은 아래와 같은 네가지 영역을 다루며 다음과 같이 세분화된다. 보안 아키텍처 설계 (30%) 복원력을 갖춘 아키텍처 설계 (26%) 고성능 아키텍처 설계 (24%) 비용이 최…

✍️ Today I Learned 24년도 하반기 공채 시즌이 끝나고 온프레미스 환경에서 구축한 인프라가 점차 한계에 다다르고 있음을 느꼈다. (유연하지 못한 인프라 구조가 갖는 한계라 생각한다.) 아래 사진은 오전 9시부터 시작하여 오후 1시에 종료되는 온라인 인적성검사 네트워크 트래픽 그래프이다. 매 교시가 종료될 때마다 영상을 저장하는 부분에서 많은 트래픽이 발생하고 있으며, 이 트래픽의 부하분산이 가장 큰 해결 과제이다. 평소 수시 채용 기간은 전혀 문제가 없지만, 상/하반기 집중 채용기간에는 많은 인원들이 응시하게된다. 접수 인원을 토대로 응시 예상 인원을 산정하고 있지만, 예상보다 높은 응시 인원이 발생하는 경우가 생기기도 한다. 이럴 때마다 유연하지 못한 온프레미스 환경에서는 부하를 감수하고 일정을 진행한 경험도 있다. (이 때문에 주말 출근도 종종 이뤄지고 있다. 😂) AWS 서비스 중 API GateWay와 AWS Lambda를 사용하는 서버리스 인프라를 부분적으로 …

📓 독서후기 「개발자에서 아키텍트로」 독서 후기 1부. 소프트웨어 아키텍처 1장. 소프트웨어 아키텍트가 되다 2장. 디자인 싱킹 기초 2부. 아키텍처 설계의 기초 3장. 설계 전략 고안하기 4장. 이해관계자와 공감하기 5장. 아키텍처 핵심 요구사항 알아내기 6장. 아키텍처 선택하기 7장. 패턴으로 기초 만들기 8장. 의미 있는 모델로 9장. 아키텍처 디자인 스튜디오 운영하기 10장. 설계 시각화하기 11장. 아키텍처 문서화하기 12장. 아키텍처 평가하기 13장. 아키텍트에게 힘 실어주기 3부. 아키텍트의 은빛 도구상자 14장. 문제를 이해하고 싶을 때 15장. 해결책을 찾고 싶을 때 16장. 손에 잡히는 설계를 17장. 설계 대안을 평가하고 싶을 때 소프트웨어 구조 설계를 엿보고 싶어 읽기 시작했지만, 단순히 소프트 웨어 설계에 대한 내용뿐만 아니라 개발자로써 많은 생각을 할 수 있었던 서적이었다. 「개발자에서 아키텍트로」 독서 후 개인적으로 인상 깊었던 큰 맥락들만 추려서 간략하…

✍️ 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. 풀이과정 크게 두가지 로직을 함수로 구현하여 알고리즘을 구현하였다. 에 입력되는 단어를 담는다. 메서드를 이용하여 정렬 후 첫번째 인자를 반환한다. 우선 에 입력으로 들어온 단어를 담는 부분을 구현하였다. 그 후 에 담긴 값을 대소문자를 제외하고 비교하여 정렬 후 첫번째 값을 반환하고 함…

LOTTERY 🍀 1. 개발 목적 개인적인 취미(?)로 매주 복권을 구매하고 있다. 로또는 QR코드로 당첨 결과를 손쉽게 제공해주지만, (배아프지만) 당첨 금액 정보를 찾고자 할땐 네이버나 동행복권 사이트로 접근해서 당첨 결과를 찾아봐야 했다. 또한, 스피또 복권도 종종 판매점 입고율과 남은 당첨 매수를 확인하고 전략적(?)으로 접근해서 구매하고 있는데 이를 확인하고자 동행복권 사이트 접속이 점점 많아졌다. 이런 행위가 비효율적이라 생각했고 이는 “구독 형태로 받아보게하면 되겠는데?”라는 생각으로 이번 프로젝트를 진행하게 되었다. 2. 구조 설계 우선 간단한 서비스이고 혼자 개발하고 인프라를 구축하고 운영해야하기 때문에 손쉽게 서비스들을 한데 모아 관리할 수 있는 구조로 구현하고 싶었다. 따라서, Kubernetes를 새로 학습해서 인프라를 구축하는 방향보다는 익숙한 Docker Compose 방식으로 간단하게 여러 서비스들을 정의하고 배포하고자하였다. AWS EC2를 사용해서 인…

✍️ 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를 양산시…

📓 독서후기 「규칙 없음」 독서 후기 1부. 자유와 책임의 문화로 가는 첫 단계 1장. 비범한 동료들이 곧 훌륭한 직장이다 2장. 자신의 생각을 있는 그대로 말하라(긍정적인 의도로) 3-1장. 휴가 규정을 없애라 3-2장. 출장 및 경비 승인을 없애라 2부. 자유와 책임의 문화로 가는 다음 단계 4장. 업계 최고 수준으로 대우하라 5장. 모든 것을 공개하라 6장. 어떤 의사결정도 승인받을 필요가 없다 3부. 자유와 책임의 문화를 강화하는 법 7장. 키퍼 테스트 8장. 피드백 서클 9장. 통제가 아닌, 맥락으로 리드하라 4부. 세계를 무대로 10장. 이제는 세계로! 한마디로 책을 요약해보자면, 넷플릭스라는 거대한 기업의 조직 운영 방침서를 엿볼 수 있었던 책이었다. (“넷플릭스”이기 때문에 가능한 것이지 범용성 있는 적용은 어려워보인다..🥲) 개발서적과는 거리가 멀지만 훌륭한 조직 문화를 배울 수 있다는 점에서는 누구에게나 추천을 해주고 싶은 책이었다. (특히나 조직의 경영진들이라면…

📓 독서후기 「좋은 코드, 나쁜 코드」 독서 후기 PART 2. 실전 7장. 코드를 오용하기 어렵게 만들라 8장. 코드를 모듈화하라 9장. 코드를 재사용하고 일반화할 수 있도록 하라 PART 3. 단위 테스트 10장. 단위 테스트의 원칙 11장. 단위 테스트의 실제 「좋은 코드, 나쁜 코드 - 1」 에 이어서 남은 챕터들을 모두 독서한 뒤 후기를 마저 남겨보려한다. 4~5월은 회사 특성상 상반기 공채 시즌으로 인해 굳이 나누자면 성수기에 가깝기에 격 주 간격으로 진행하던 “독서토론” 일정에도 조금 차질이 있었다. (절대 절대 읽기 싫어서 미룬게 아니다.. 🥲) 이번 책은 아무래도 어려운 내용도 있었고 업무적으로 바빴던 시기이기도 해서 한 권을 모두 읽는데 약 한달 이상의 시간이 걸리긴 하였지만 그래도 한권을 모두 읽고 난 뒤의 총평을 남길 수 있게 되어 기쁘다. 7장. 코드를 오용하기 어렵게 만들라 “코드를 오용하기 어렵게 만들라” 7장의 주된 내용 간단하다. 이 책에서도 제품 디…

AWS Summit Seoul 2024 작년 11월에 다녀온 SDC23 삼성 개발자 컨퍼런스이후로 오랜만에 남기는 컨퍼런스 참석 후기이다. 작년부터 회사에서도 이런 컨퍼런스 참석을 권장하고있으며, 올해 또한 참석하여 어느덧 사내 문화로 자리잡고 있다. 올해 많은 컨퍼런스 중 AWS Summit Seoul 2024를 선택한 이유는 국내 최대 규모의 개발 컨퍼런스이기 때문에 최신 기술에 대한 인사이트를 쉽게 얻을 수 있으며, AWS를 이용한 클라우딩 기반 인프라로 전환을 성공한 기업들의 귀중한 경험을 훌륭한 연사들을 통해 엿보기에 너무 좋은 기회라 생각했기 때문이었다. 5월 16일(목) / 5월 17일(금) 양일간 모두 참여하였으며, 컨퍼런스를 다녀 온 후기를 남겨보려한다. 신청 방법 너무도 간단하게 신청하였다. 특별한 제한사항(티켓팅, 추첨제 등등)도 없었으며, AWS 웹페이지 내 이벤트 탭을 통해 지원 신청을 완료하였다. 참가 신청 링크가 열린 뒤 팀 내부 회의를 통해 참석을 결정…

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

📓 독서후기 「좋은 코드, 나쁜 코드」 독서 후기 PART 1. 이론 1장. 코드 품질 2장. 추상화 계층 3장. 다른 개발자와 코드 계약 4장. 오류 PART 2. 실전 5장. 가독성 높은 코드를 작성하라 6장. 예측 가능한 코드를 작성하라 위 기재된 챕터들을 독서한 뒤 블로그에 후기로 정리까지 해보려한다. 많은 이가 그러하였듯이, 나 또한 개발 서적 중 처음 읽고 독서 후기로 남긴 도서가 「Clean Code」 였다. 🔗 Clean Code - 1 🔗 Clean Code - 2 🔗 Clean Code - 3 🔗 Clean Code - 4 6장까지 읽은 후기를 한줄로 요약하자면, 「Clean Code」 와 유사하다는 생각이 많이 들었다. (아직 모두 읽진 못하였지만!) 하지만, 이 책의 저자는 자신의 주장을 풀어나가는 방식이 조금 달랐다. 어떻게 다른지에 대하여 자세한 내용은 아래에 기재하였다. 1장. 코드 품질 코드 품질이 중요한 이유(당연하지만! 조금 더 구체적으로)에 대해 …

✍️ 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와 슬랙 웹훅 기능을 통해 자원 모니터링 기능이 필…

📓 독서후기 「어떤 개발자가 살아남는가」 독서 후기 1장. AI의 시대, 우리는 어디에 있는가 2장. 알고리즘 vs 데이터 그리고 창조력 코드 3장. 누가(Subject) 무엇을(Object) 어떻게(Project) 해야 하는가 4장. 지속적인 개선 - Upgradable Software 5장. 팀워크 - 함께 만드는 소프트웨어 위 모든 챕터를 독서한 후기를 블로그에 후기로 정리까지 해보려한다. 짧게 요약하자면 정보의 홍수와 더불어 AI로 인하여 산업의 형태가 바뀌는 이 시점에 어떻게 개발자라는 직업으로 살아나갈 수 있는가에 대한 굉장히…인문학적인 내용으로 가득 찬 서적이었다. 아쉬운 점 중 하나는 OpenAI사의 ChatGPT 발표일은 2022년 11월 30일이고 이 책의 출판일은 2022년 3월 30일이라는 점이다. 1장. AI의 시대, 우리는 어디에 있는가 진보하는 AI / 인공지능 기술과 개발자의 미래에 대한 내용으로 구성되어 있다. 1장에서는 “특이점”에 대해 아래와 같이…

🤔 백엔드 개발자 2년차 회고 2년전 「백엔드 개발자 첫 출근 후기」를 남긴지 몇일 안된거같은데, 벌써 2년을 꽉채운 주니어 개발자가 되어버렸다. 지금와서 생각해보면 나는 개발자라는 직군으로 운이 좋은 시기에 전환했던 것 같다. (불황기에 개발자로 취업을 준비하고 계신분들을 응원합니다!! 🙏) 또한, 적성에도 꽤나 맞아서 짤리거나(?) 퇴사를 권유받고 있진 않다. (아직까진 밥 벌어 먹고 잘 살고 있다.) 이번 글에는 지난 2년간 어떤 일을 무슨 마음가짐으로 해왔으며, 그 과정에서 “나”라는 인물의 어떤 영향력으로 무엇이 바뀌었는지를 적어보려한다. 그리고 앞으로의 “나”는 어떤 방향성을 갖고 개발자로써 성장을 해야하는가에 대한 고민 또한 간략하게 남겨보려한다. 지극히도 주관적인 내용일꺼다..!! 참고로 글을 읽는데 이해도를 높히기 위해 현재 소속한 기업의 주요 서비스와 본인을 간략히 소개하자면, B2B 형태로 기업의 인재 채용 솔루션(온라인 화상 인적성검사 등)을 제공하는 서비스를…

📓 독서후기 「오늘도 개발자가 안 된다고 말했다」 독서 후기 1장. 가깝고도 먼 개발자 2장. 기획자의 일 3장. 디자이너의 일 4장. 개발자의 일 위 모든 챕터를 독서한 후기를 블로그에 후기로 정리까지 해보려한다. 짧게 요약하자면 개발 지식에 밀접한 내용이라기 보다는 “협업”과 “소통”에 포커스가 맞춰진 도서였다. 1장. 가깝고도 먼 개발자 개발자의 언어를 지극히 주관적인 관점으로 조금 당황스러운 설명한 내용이 있어 첨부해본다. “User Device의 Data packet이 Access server에서 Confirm되지 않는다. 먼저 Access server debugging을 해보겠다. 이후에도 문제가 지속되면 WiFi 공유기 의 Firmware Version을 확인한 후에 Reboot을 진행하고 WiFi 공유기의 Lan Port IP를 파악한 후에 ping을 던져서 Signal을 확인하겠다. Signal이 확인되지 않을 경우에는 소프트웨어 문제가 아니므로 직접 매장에 방문해…

📓 독서후기 「개발자 원칙」 독서 후기 1장. 덕업일치를 넘어서 2장. 오류를 만날 때가 가장 성장하기 좋을 때다 3장. 소프트웨어 디자인 원칙 4장. 나의 메이저 버전을 업그레이드하는 마이너 원칙들 5장. 이직, 분명한 이유가 필요해 6장. 목표를 달성하는 나만의 기준, GPAM 7장. 프로덕트 중심주의 8장. 제어할 수 없는 것에 의존하지 않기 9장. 달리는 기차의 바퀴를 갈아 끼우기 위 모든 챕터를 독서한 후기를 블로그에 후기로 정리까지 해보려한다. 내용 자체가 어렵지 않았고 재밌게 술술 읽혔다! 👏👏👏 모든 챕터가 훌륭했지만 주관적인 인상 깊었던 챕터들만 추려서 간략하게 후기를 남긴다. 1장. 덕업일치를 넘어서 이번장은 가트너의 재키 펜이 고안한 모델인 “하이프 사이클” 내용밖에 기억에 남지 않는다. 😆 재밌게 보았지만 우스운 내용은 아니었다. 대부분의 서비스들의 도태되는 시점은 위 그래프 중 “환멸 단계”에 해당되며, 이는 기술 수용 생애주기에서도 마찬가지라 꼬집는 내용…

백준 백준은 개발자 혹은 개발 직군을 지망하고 있는 예비 개발자들이라면 한번이라도 들어봤을거라 생각한다. 프로그래밍 및 알고리즘 문제 해결 능력을 향상시키기 위한 온라인 저지 사이트로 유명하며 단순 문제를 푸는것 뿐만이 아니라 서로의 코드를 비교하며 학습할 수 있는 플랫폼으로 유명하다. 여러 온라인 저지 사이트 중에서 백준을 선택하여 알고리즘 문제 풀이를 공부한 이유는 문제가 가장 다양하다라는 이유도 있었지만 그 외에도 학습 동기를 불러 일으키는 솔브닥(solved.ac) 커뮤니티 또한 큰 이유 중 하나 였다. 백준에서 해결한 문제의 난이도들을 토대로 학습자의 티어(등급)을 분류해서 마치 게임(?)같이 학습 동기를 불러일으키는 솔브닥 커뮤니티 덕분에 목표를 설정하고 꾸준히 공부할 수 있었다. 그 외에도 백준허브를 통해 깃허브에 자동으로 커밋되는 점 또한 큰 장점 중 하나이다. 👍 알고리즘 문제 풀이 공부를 시작하며 스스로 약속했던 작은 목표를 달성하는 과정에서 느낀점과 앞으로 학…

✍️ 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) 위치를 받아서 구간 합을 구하는 공식을 세워…

SDC23 Korea (삼성 개발자 컨퍼런스) 개발 관련 오프라인 컨퍼런스 참석을 올 한해동안 수차례 지원하였으나. 끊임없이 탈락하였다.. 그러던 중 10월 중순 쯤 팀원이 공유해준 SDC23 삼성 개발자 컨퍼런스가 눈에 띄었다. (사전등록 참여자 링크 → https://www.sdc-korea.com/registration) 대단한게 추첨제가 아닌, 신청한 인원 전원이 오프라인 / 온라인으로 동시 운영(역시 국내 최고의 기업..)이 된다는 점이 너무 신선하게 다가왔다. 사전등록 Benefit으로는 웰컴키트 제공 + 사전에 입장 QR코드를 먼저 제공 받았다. 행사장 강남역 8번출구쪽으로 가다보면 삼성전자 서초사옥이 나온다. 컨퍼런스 행사장 위치는 삼성전자 서초사옥 5F 다목적홀에 위치하였었으며, 강남역 8번 출구로 오면 행사장 안내 입간판을 너무나도 쉽고 많이 찾을 수 있었다. 컨퍼런스 행사장 내부는 너무나도 깔끔한 강연장이었다. 미리 지급받은 사전등록 입장 QR코드로 간편하…

✍️ 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…

슬랙 앱(봇)이란 🤔? 현재 사내 메신저는 슬랙을 사용하고 있다. 여러 이유로 슬랙을 사용하지만 다른 메신저와 차별화된 큰 강점중 하나는 서드파티 앱(슬랙 앱)을 통한 확장성이라 생각한다. 별도 앱을 사용하면 메신저를 통해 발생한 특정 액션을 외부 서비스 혹은 DB에 전달을 할 수 있으며, 반대로 외부에서 발생한 이벤트를 메신저 내부로 가져올 수도 있다. 참고로 현재 우리팀에서 자주 사용 중인 슬랙 앱은 아래와 같다. Polly: 투표 기능을 가진 슬랙 앱 Simple Poll: 간단한 서베이 기능을 가진 슬랙 앱 Jira Cloud: 지라 ISSUE 알림 슬랙 앱 기타 기재한 외부에서 개발된 슬랙 앱들을 업무 효율 증진 및 점심식사 메뉴 추천(??) 용도로 잘 활용중이다. 1. 개발 목적 1-1. 사내 도서 히스토리 추적의 어려움 이번 도서관 앱을 개발한 가장 큰 이유는 “히스토리 관리”이다. 이것이 가장 큰 이유이자 앱 개발을 시작한 근본적인 이유이다. 사내 복지 중 훌륭한 복…

📓 독서후기 「클린코드」 13 ~ 17장 독서 후기 13장. 동시성 14장. 점진적인 개선 15장. JUnit 들여다보기 16장. SerialDate 리팩터링 17장. 냄새와 휴리스틱 1주일에 4장씩 읽기가 목표이며 읽은 후기를 블로그에 후기로 정리까지 해보려한다. 이번주는 13장 「동시성」 ~ 17장 「냄새와 휴리스틱」 까지 읽은 후기를 간략히 남겨보았다. 사실상 정규 챕터는 오늘로써 모두 읽었다! 👏👏👏 다음주에는 부록까지 (다 읽을 수 있을진 모르겠다..) 모두 읽고난 뒤 완독 후기를 남기는게 목표이다. 13. 동시성 이번장은 “동시성” 이 무엇인지에 대해서 설명하는 장이다. 무엇(What)과 언제(When)을 분리하는 것. 동시성은 즉, 결합을 없애는 전략이다. 동시성은 잘못 개발할 시 큰 난관을 겪는다. 예를 들면 객체 하나를 공유한 후 동일 필드를 수정하던 두 스레드가 서로 간섭하는 경우 예상할 수 없는 에러가 발생하기도 한다. 이러한 문제를 해결하기 위해 임계영역 을 …

📓 독서후기 「클린코드」 9 ~ 12장 독서 후기 9장. 단위 테스트 10장. 클래스 11장. 시스템 12장. 창발성 1주일에 4장씩 읽기가 목표이며 읽은 후기를 블로그에 후기로 정리까지 해보려한다. 이번주는 9장 「단위 테스트」 ~ 12장 「창발성」 까지 읽은 후기를 간략히 남겨보았다. 9. 단위 테스트 사실 나는 테스트 코드를 짜본 경험이 별로 없다. 제대로 배우고 싶지만 TDD는 아직까진 나에게 판타지로 느껴지는 개발론 중 하나이다. 이번 장에서는 테스트 코드의 중요 성을 강조하며 TDD 법칙을 설명한다. 그리고 TDD의 가장 중요한 세가지 법칙은 다음과 같다 강조한다. “실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다.” “컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다.” “현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다.” 이번장은 읽어보니 “테스트” 라는 걸 막연히 어렵게 느껴왔던 점에 대해 벽이 조금 허물어진 …

📓 독서후기 「클린코드」 5 ~ 8장 독서 후기 5장. 형식 맞추기 6장. 객체와 자료 구조 7장. 오류 처리 8장. 경계 1주일에 4장씩 읽기가 목표이며 읽은 후기를 블로그에 후기로 정리까지 해보려한다. 이번주는 5장 「형식 맞추기」 ~ 8장 「경계」 까지 읽은 후기를 간략히 남겨보았다. 5. 형식 맞추기 주요 토픽은 프로그래머라면 형식을 깔끔하게 맞춰 코드를 짜야한다는 내용이다. 전적으로 동의한다. 그래야 소프트웨어가 일관적인 스타일을 보인다. 이번 장에서는 “행 길이”, “빈 행 구분”, “들여쓰기” 등 코드 컨벤션(관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약)을 주로 언급한다. 사실 이 부분은 요즘은 IDE에서 제공하는 익스텐션(자바스크립트 환경에서의 ESLint, Prettier 등등)의 설정 파일을 공유하는 것 만으로 팀의 코딩 컨벤션을 맞출 수 있는 등 너무나 편리한 도구들이 제공되고 있다. 이미 실천하고 있는 부분이기 때문에 가볍게 읽고 넘어갔다. 6…

📓 독서후기 「클린코드」 1 ~ 4장 독서 후기 1장. 깨끗한 코드 2장. 의미 있는 이름 3장. 함수 4장. 주석 어떤 개발 언어를 사용하느냐 혹은 직무가 어떻느냐와 관여없이 개발자라면 필히 읽어봐야한다는 바이블 같은 책을 드디어 읽게 되었다. 부끄러운 얘기지만 개발 서적 한권을 온전하게 A-Z 완독해본적이 없다. 😥 실제로 몇몇 책들은 필요하거나 흥미로운 부분만 읽은 다음 내팽겨치고 모니터 받침대로 쓰이곤했고, (이건 그나마 형편이 낫다.) 일부 책들은 책장을 열심히 장식하는데에만 힘을 쏟고 있는 중이다. 스스로 반성하는 의미로 “혼나는 기분”을 돈 주고 경험할 수 있을 수 있는 「클린코드」 서적을 선택해서 읽어보려한다. 1. 깨끗한 코드 이 장에서 기억에 남는 문구를 꼽자면 아래의 문장을 꼽을 것 같다. 사실 머리로는 아는데 참 적용하기 힘들다. 2주만 지나도 아니, 금요일에 짠 코드를 주말을 보내고 월요일 출근 후 다시 살펴 볼 때에도 잘 안 읽힐 (내가 짠 코드인데..) …

✍️ 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와…

🤔 백엔드 개발자 첫 출근 후기 1월 말 부트캠프 수료 후 2월 한달 간 개인공부 후 3월2일 부터 달려온 구직활동을 이제 마침표를 찍고 오늘 첫 출근을 마쳤다. 새로운 커리어로 첫 발을 내딘 기분을 짧게나마 줄여 후기로 남겨보려 한다. 작년 6월부터 시작한 개발 공부의 마침표이기 때문에 사실 짧게 남기기엔 너무 긴 뒷 이야기가 있지만 개발자로써 첫 출근 후 가진 내 마음가짐에 대해서만 짧게 줄여보려 한다. 직군은? 회사는? 우선 직군을 나누자면 백엔드 개발자로 채용이 되었다. ACG라는 인재채용 자사 솔루션 업체이며, IT 전문기업은 아니지만 코로나 시국에 맞춰 오프라인 채용 ⇒ 온라인 채용으로 전환점에 서있는 상황으로 보인다 (지극히 주관적인 의견입니다) 크지 않지만 개발 부서에 대한 조직도와 체계가 있는듯 보였으며 직원 복지나 처우에 대해서는 크게 노력중인 회사로 보였기 때문에 입사를 결정하게 되었다. 첫 출근 느낀 점 개인 랩탑 + 외부 모니터 등 개인 장비를 지급 받고 웰…

🤔 2022 코드스테이츠 3월 커뮤니티 데이 저번 2월에 열린 오프라인 모임에 이어서 3월 커뮤니티 데이 또한 참석하였다. 이번에는 온라인 화상회의 플랫폼인 게더타운에서 진행이되었는데 행사 후기를 간단히 남겨보려 한다. 2022 코드스테이츠 3월 커뮤니티 데이는 3월 31일 20:00시 ~ 22:00시까지(안내문서에서는 22:30까지 였는데…) 게더타운에서 진행되었다. 주요 프로그램 스크린샷, 2022-03-31 22-25-03 우선 네트워킹 그룹을 부여받은 뒤 (지정 장소에서 벗어나면 안된다!) 참여한 코드스테이츠 크루, 진행자, 참석자들과 함께 자유로운 주제로 네트워킹이 진행되었다. 커뮤니티 소개 커뮤니티 소개는 코드스테이츠 커뮤니티팀 운영진이 커뮤니티 팀이 수강생 & 수료생을 위해 무슨일을 하고 있는지 간략한 소개이후 커뮤니티팀 소개 영상 시청을 하였다. (저번 2월 오프라인 알럼나이 커뮤니티 행사 이후 커뮤니티팀에 대한 신뢰도가 많이 높아졌다 😀) 간단 한 커뮤니티팀 소개…

✍️ 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 비동기 처리방식은 이벤트 방식으로 풀어낸다. 클라이언트에서 발생된 요청을 처리하기 위해 이벤트가 발생하며, 서버 내부에 메시지 형태로 전달된다. 이 메시지는…

🤔 2022 코드스테이츠 알럼나이 네트워킹 데이 코드스테이츠 수료 후 처음으로 오프라인 모임을 가졌다. 생각보다 너무 좋은 경험이어서 후기로 남겨보려 한다. 2022 코드스테이츠 알럼나이 네트워킹 데이는 2월 28일 15:00시 ~ 22:00시 (안내문서에서는 16시 부터였는데 ㅠㅠ…) 까지 서울 조선팰리스 호텔에서 진행되었다. 백신패스와 더불어 코로나 음성확인서(PCR검사 확인서는 48시간 이내, 신속항원검사 확인서는 24시간 이내 분)를 지참 후 참석이 가능했다. 덕분에 22년 첫 코로나 검사!.. 😅 수료 기간동안 친해진 34기 기수 몇분과 33기 몇몇 분들도 참석한다는 소식을 메신저를 통해 연락하였고, 무조건 참석하기로 결정하였다. 도착하니 여러가지 코드스테이츠 쇼핑백에 굿즈 패키지(?)들을 웰컴 기프트 처럼 (후드 집엎 👍)주셨다. 주요 프로그램 우선 명찰을 부여받은 뒤 지정 테이블을 부여받았다. 코드스테이츠를 수료하였지만 오프라인으로 같은 수강생들과 팀프로젝트를한 팀원…

🤔 2월 스페셜 레처 - 나를 점검하는 이력서 작성법 코드스테이츠 수료 후 2월 스페셜 레처 이력서 작성법 강연을 듣고 난 뒤 후기를 간략히 적어보려 한다. 스페셜 레처는 “우아한 형제들 X 코드스테이츠” 협력으로 진행되었고 강연자로는 우아한 형제들 기술이사 신희송님께서 진행해주셨다. 신희송님은 놀랍게도 비전공자 출신이셨다!! (2020.08.27 잡플래닛 인터뷰) 요즘 수료이후 이력서를 매번 다시 쓰고 있다.. 나에겐 꼭 필요한 강연이기도하여서 이번 강연은 꼭 듣기로 마음먹었다. 강연일정이 한번 취소된건 비밀.. 이력서 작성 목적 간단하다. “이력서를 본 뒤, 면접을 보고 싶게끔 해야한다.” 지원하려는 직군 별 핵심역량이 무엇인지 키워드를 선정 후, 내가 할 수 있는 역량을 이력서에 키워드와 함께 담아내는 것이 중요하다. 이력서 레이아웃 이력서는 보통 아래와 같은 레이아웃으로 작성되는데 이 중, (경력사항) 부분은 보다 더 상세하게 적기를 권유해주셨다. 이력서 핵심 포인트 권장하…

⚒️ Refactoring 현재 ALL-CON 프로젝트의 DB 서버는 AWS RDS를 사용하고 있다. DB의 서버시간이 맞지 않는 문제가 계속 발생하고 있다. DB 서버에 저장되는 포르테 디 콰트로 콘서트 메타포닉-부산의 (티켓오픈일) 값은 다음과 같다. open_date title 2022-02-22 23:00:00 포르테 디 콰트로 콘서트 <메타포닉> - 부산 하지만 인터파크 티켓에서 기재된 티켓오픈일 정보는 아래와 같다. 스크린샷, 2022-02-16 17-21-00 안맞는 시간을 클라이언트에서 강제로 조정해주어서 우선 도메인에서는 정상적으로 보이지만, 근본적인 해결책은 아니였기 때문에 DB 시간문제를 해결하기로 결정하였다. 1. 보완이 필요한 사항 1-1. DB Server 시간 안맞음 위에서 언급한 대로 DB의 시간 설정이 9시간 맞지 않는다. mysql에서 현재 서버의 시간을 가져오는 함수인 를 사용시 다음 아래와 같은 서버시간이 출력된다. (현재 시간은 2월 16일 1…

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

⚒️ Refactoring 현재의 콘서트 정렬 방식은 조회수순, 임박예정순, 최신순 3가지이다. 그 중, 임박예정순 경우 티켓오픈일이 가까운 순으로 정렬을 하고 있는데 모든 콘서트가 아닌, 티켓팅이 가능한 콘서트들로만 추려서 보여주는 방식으로 바꿔보려 한다. 1. 보완이 필요한 사항 near 현재는 티켓 오픈이 임박한 콘서트 외에도 너무 많은 콘서트 정보들이 불필요하게 보여지고 있다는 피드백을 전달 받았다. 현재 기준으로 티켓팅이 가능한 상태의 콘서트 데이터들로만 추려서 보여지게끔 바꾸어보려 한다. 2. 문제 해결 2-1. Sequelize Op 연산자를 이용한 데이터 추출 우선 콘서트 DB 정보중 는 아래와 같이 날짜객체로 저장하고 있다. 스크린샷, 2022-02-16 11-19-24 그렇기에 티켓 오픈일자가 지났는지 여부를 비교하려면 같은 날짜 객체끼리 비교해야 유의미한 비교 결과가 나온다. 비교를 위해서는 에서 조건문을 통하여 필요한 데이터를 추릴 수 있으며, 를 사용하면 보…

⚒️ Refactoring ALL-CON에서는 한달간의 콘서트 정보만 배열에 담아 보여주고 있다. 한달이 지나게되면 콘서트 정보중 이 으로 비활성화되어 서버에서 보여주지 않고 있다. (콘서트 삭제는 관련 댓글 및 게시글들이 모두 삭제되므로 비활성화를 선택) 스크린샷, 2022-02-15 17-45-59 기존에는 콘서트가 비활성화 될 시 관련 게시글은 조회수를 음수값으로 강제로 할당하여 조회수로 검색시 맨 뒤로 나열되게끔 수정해주었으나 만약 불순한(?) 목적으로 조회수를 올리거나 시간이 오래지나 조회수가 이상의 양수값으로 전환된다면 올바르지 않은 결과가 초래되므로 테이블에도 컬럼값을 추가해 비활성화 해주기로 했다. 1. 보완이 필요한 사항 테이블의 현재 스키마는 다음과 같다. 스크린샷, 2022-02-15 17-44-23 해당 테이블 컬럼중 컬럼값을 추가하고, 서버에서 을 통하여 1일 1회 티켓 발매 후 한달이 지난 콘서트들은 비활성화를 시키는데 해당 콘서트에 종속된 게…

⚒️ Refactoring 어제~오후까지 어제부터 이어온 Task인 로그인이 검증이 필요한 API 요청시 유효하지 않은 로그인 상태라면 메인페이지로 강제 이동 후 로그인 창 팝업으로 다시 로그인을 유도하는 로직으로 서버와 클라이언트를 다시 설계하였다. 생각보다 로그인 검증이 필요한 API 요청이 많아서 작업시간이 오래걸렸다.. ===main page=== 알람 요청 : [post] concert/:concertid/alarm 알람 취소 : [delete] concert/:concertid/alarm 알람 조회 : [get] concert/alarm 콘서트 댓글 작성 : [post] concert/:concertid/comment 콘서트 댓글 수정 : [patch] concert/:concertid/comment/:commentid 콘서트 댓글 삭제 : [delete] concert/:concertid/comment/:commentid ===concert page=== 없음 ===co…

✍️ 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…

⚒️ Refactoring 어제 발생한 에러는 미들웨어 함수를 수정하여 핸들링하였다. 오늘은 전반적으로 유효하지 않은 로그인 상태를 검증하여 메인페이지로 이동 후 로그인을 유도하는 방향으로 프로젝트를 리팩토링해볼 예정이다. 1. 문제점 현재 ALL-CON 프로젝트는 로그인중 웹 브라우저 쿠키가 삭제되거나 쿠키의 유효기간이 지난 이후에도 로그인을 계속 하고 있다면, 로그인이 필요한 API 요청을 시도시 만 반환하고 자동으로 로그아웃 처리가 된다던지, 페이지가 이동한다던지의 상태변화는 이뤄지지 않는다. 이렇게 서비스가 유지가 된다면 이용자가 직접 유효하지 않은 로그인 상태를 감지하기는 어려우니 당연히 ALL-CON 서버 측의 문제가 있다고 생각이 들것이다. 만약 유효하지 않는 로그인 정보로 로그인 검증이 필요한 API 요청 사용시에는 메인페이지로 강제로 이동 시키며, 로그인을 유도하는 방면으로 프로젝트를 리팩토링 해 볼 예정이다. 2. 문제 해결 2-1. LoginRedirect 모…

✍️ 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…

⚒️ Refactoring 민감정보 암호화 Task는 모두 끝냈다. 다음 가져갈 Task로 로그아웃시 발생하는 에러 핸들링을 해보려한다. 문제점 현재 로그인 방식은 에 JWT Token을 담아 인증하는 방식으로 로그인검증이 이루어지고 있으며, 로그아웃시에는 로그인 여부를 검증한 뒤, 쿠키를 만료시키는 방식으로 로그아웃 처리를 구현하였다. controller/authentication/logout.js 스크린샷, 2022-02-09 11-31-35 로그아웃시 에러가 발생하는 대표적인 경우는 다음과 같다. 웹이나 모바일 환경에서 강제로 쿠키를 삭제 후 로그아웃시 발생 스크린샷, 2022-02-09 11-28-57 우선 위의 크롬환경에서 쿠키를 강제로 삭제하는 경우 에 담긴 JWT Token값이 날아가기 때문에, 로그인 검증이 이뤄지지 않아 발생하는 에러이다. 스크린샷, 2022-02-09 11-24-50 검색 결과 우선 에러의 원인은 “서버가 클라이언트에 둘 이상의 응답을 보내려고 할 …

⚒️ Refactoring 어제 오후까지 프로젝트 리팩토링 우선순위를 정하여 각자 Task를 선별하였다. 팀 프로젝트 Repository를 이제는 더이상 수강생이 아니기 때문에 Private ⮕ Public으로 전환을 하였다. 그 과정에서 기존 Repository에서 새로운 Repository로 이전을 해야해서 오늘은 시간을 소비하였다. 우선 어제 혼자 학습한 내용은 블로그 후기로 정리를 해두었다. Crypto 모듈로 비밀번호 암호화하기 오늘은 문제점 2~3을 마저 해결해보려한다. 1. 미처 해결하지 못한 문제점 1-1. 문제점 2 비밀번호 찾기 & 콘친인증시 발송되는 6자리 난수코드 또한 암호화 하지않고 그대로 서버에서 DB로 저장을 한다. 스크린샷, 2022-02-07 13-41-06 물론 DB에 저장된 난수코드 값은 3분 이후 값으로 초기화 되게끔 셋팅을 해두었기 때문에 비밀번호를 그대로 DB에 저장하는 경우 보다는 위험성은 낮다. 하지만 위험의 여지가 있다는 사실은 변함이 없…

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

⚒️ Refactoring 우선 ALL-CON Final Project만 대상이며 리팩토링 기간은 정해두지 않았다. 수료 이후 너무 헤이해지지 않도록 09:00 ~ 18:00 일정으로 팀원들과 다시 모여 프로젝트 결과물을 최소 보름~몇달간 재정비할 계획이다. 리팩토링 우선순위를 정해보았으며 다음과 같다. 1️⃣ 1순위 [클라이언트] useEffect 중복 실행 현상 (콘서트 조회시 조회수가 1회 이상씩 올라가는 현상) 비동기 처리 구현 (ex. Loading 중인 표현) [클라이언트] TypeScript 문법 체크 어색한 문법및 Type 누락 코드 유지보수 필요 [서버] 서버 보안 회원가입 등 비밀번호를 다룰때 암호화 과정이 없이 클라이언트와 서버와 DB간 작동을 하고 있다. 특히 비밀번호 변경시 발송되는 인증코드와 새로운 패스워드로 비밀번호 변경된 값 그리고 회원가입의 경우 클라이언트에서 입력한 민감한 정보가 그대로 담겨서 서버로 전달되며 별다른 가공없이 DB로 저장되고 있다. 보안에…

🤔 Retrospect 수료증1024_1 코드스테이츠 수료 직후 드는 감정을 한 문장으로 정의하자면 고생했고 이제 시작이다. 프로젝트 기간에는 평균 수면 시간 2~3시간.. 그동안 수료를 보며 달려왔던 관성이 있어서, 프로젝트가 끝난 뒤 어영부영 12시쯤 잠에 들려고 눈을 감으면 온갖 생각들로 잠자리가 편하지 않다. 우선 수료하는 오늘 느낀 감정에 대해서 간략히 적어보려한다. 무엇을 배웠나? web-developer-skills 웹 개발에 전반적인 흐름과 설계 구조에 대하여 공부하였다. 우선 프로그래밍 언어로는 JavaScript를 집중적으로 배웠으며 네트워크 구조, 자료구조와 알고리즘 등 공학에 관련된 기초 지식을 쌓았다. 기술스택을 말하자면 프론트엔드 기술로는 React를 이용한 Client 개발 기술, Redux를 이용한 상태관리 SASS & Styled Components 등의 CSS 기술 또한 배웠다. 백엔드 기술로는 Node.js와 Express를 이용한 Server 개…

🔥  👉 ALL-CON 바로가기   👉 Github 바로가기   👉 Project 회고 바로가기  ALL-CON은 각 사이트들의 콘서트 정보를 한 눈에 볼 수 있는 콘서트 종합 정보 플랫폼이에요. 각 사이트들의 단독 판매 콘서트까지 한눈에 보고 비교해보세요!🤩 콘서트를 가고 싶은데 같이 즐길 친구가 없어 망설이셨나요?😢 콘서트의 감동을 함께 나눌 콘친을 찾아 보세요!🤼‍♂️ 🤔 ALL-CON은 무슨 뜻인가요? 🤔 ALL-CON에서는 무엇을 할 수 있나요? 👉 각 사이트들의 콘서트 정보(단독 콘서트 포함)를 한 눈에 볼 수 있어요. 👉 현재 인기 많은 콘서트, 오픈이 임박한 콘서트, 최근 등록된 콘서트 정보를 한눈에 볼 수 있어요. 👉 문자 알림 또는 메일 알림 기능을 이용해서 내가 원하는 콘서트의 예매 오픈시간을 놓치지 않을 수 있어요. 👉 콘서트 정보를 조회해서 콘서트장의 위치정보를 알 수 있어요. 👉 콘친 인증을 하면 콘서트에 함께 갈 콘친을 찾을 수 있어요. 👉 콘친이 될 유저…

header 🤔 Final Project 회고 코드스테이츠 34기 마지막 과정인 파이널 프로젝트를 백엔드 포지션으로 마무리하며, 기획은 어떻게? 어떤 작업을 하였고 또 그 과정에서 어떤 부분에서 고민을 경험했는지 글로 남겨보려 한다. 우선 완성된 프로젝트 링크(도메인은 현재 내려갔습니다.) 와 Gihub 저장소 링크 그리고 프로젝트 안내 문서의 링크는 아래와 같다.  👉 ALL-CON 바로가기   👉 Github 바로가기   👉 Blog 바로가기  기획 기획단계는 1주일 정도 걸렸다. 사실 기획은 팀원 모두 전문 분야가 아니기 때문에 다들 많이 미숙했지만, 새벽 늦은시간까지 머리를 함께 맞대어 최선의 결과가 나온거라 생각한다. 다만 First Project에서 한번 겪었던 만큼, 서비스 주제 선정은 너무 지체되지 않게끔 진행하였고 주제에 알맞는 기술들을 추려서 주제를 선정하였다. 선정되지 못한 주제들과 이유 지금 다시 보니 재밌는 주제들이 많이 나왔던거 같다. 21.12.27 주제…

🔥  👉 6699 바로가기   👉 Github 바로가기   👉 Project 회고 바로가기  6699는 명언을 보는 것에 그치지 않고 실천까지 이어질 수 있도록 도와주는 동기부여 커뮤니티 입니다. 동기부여 글을 보고 타올랐던 열정🔥이 금방 사라진 경험이 있으신가요? 명언을 보는 데에 그치지 않고 실천까지 모두와 함께해요🏃‍♂️🏃‍♀️🏃 🤔 6699는 무슨 뜻인가요? 🤔 6699에서는 무엇을 할 수 있나요? 👉 모두와 실천할 수 있는 명언을 만들 수 있어요. 👉 명언에 맞는 게시물을 올려서 모두와 공유할 수 있어요. 👉 나를 자극하는 명언과 게시물들을 분야별로 모아서 볼 수 있어요. 👉 내가 만든 명언과 나의 게시물을 모아서 나의 명언을 실천한 순간들을 모아서 볼 수 있어요. 👉 다른 사람의 게시물에 댓글을 달아서 소통할 수 있어요. 👉 다른 사람의 명언에 좋아요를 눌러, 내가 영감을 받은 명언을 모아서 볼 수 있어요. 👉 다른 사람의 게시물에 좋아요를 눌러, 나에게 자극을 주는 게시물들을…

header 🤔 First Project 회고 12.10 ~ 12.24 2주 기간동안 코드스테이츠 34기 정규과정은 끝마치고 조그만 규모의 첫번째 프로젝트를 완성하였다. 백엔드 포지션으로 참여하는 동안 기획은 어떻게? 어떤 작업을 하였고 또 그 과정에서 어떤 부분에서 고민을 경험했는지 글로 남겨보려 한다. 우선 완성된 프로젝트 링크(도메인은 현재 내려갔습니다.) 와 Gihub 저장소 링크 그리고 프로젝트 안내 문서의 링크는 아래와 같다.  👉 6699 바로가기   👉 Github 바로가기   👉 Blog 바로가기  기획 실제 프로젝트 기간은 팀원선정과 기획단계와 개발과정을 모두 합쳐 2주가 주어졌지만, 우리는 HA3 진행 전 마음이 맞는 팀원을 구해 기획을 우선적으로 틈틈히 진행하고있었다. 왜냐하면, 선배 기수들에게 항상 들었던 말 때문이다. 덕분에 좋은 팀원들과 함께 프로젝트를 진행할 수 있었다. 혹시 코드스테이츠를 수료중이시거나, 부트캠프로 코드스테이츠로 선택하신분들이 이 글을…

🤔 Retrospect 우선 프로젝트가 아직 완성된게 아니라 회고는 아니고 시작 전 다짐 및 마음가짐을 적어보려 간단히 남긴다. First Project 팀 선정 우선 Section3 HA 이전에 선배 기수들에게 프로젝트에 관련한 내용을 많이 들었다. 미리미리 준비해야 한다. 팀이 절반이다. 기획부터 시간이 오래 걸리므로 미리미리 준비하고 대비해라. 우선 틀린 말은 아닌거같다. 저번 주 금요일인 12.10 팀 설문조사가 이뤄지고, 미리 프로젝트 진행전 기획을 진행해 오던 팀원들을 적어서 내었고, 해당 팀원으로 구성된 팀이 오늘 부로 결정이 되었다. 그리고 SR 기획서를 오늘 포함하여 이틀안에 제출을 해야하는데, URClass에서 제공되는 SR 기획서에 기입해야할 양이 생각보다 많다. 기획서 및 Wiki 작성을 진심으로 임해야 할 듯 하다. 만약 후배기수가 이 글을 읽는다면, 팀을 미리 꾸리고 (물론 마음에 맞는 팀원 구하기가 어렵습니다..) 기획의 방향정도는 충분한 회의를 통하여 …

🤔 Retrospect 18시까지 Hiring Assessments 과제형을 마친 뒤 저녁식사 후 HA를 통과했다는 메일을 받았다. 그동안 Section을 통과할때마다 블로그 후기글을 설문으로 제출하는 링크를 보아도 별 감흥이 없었지만, Section3를 겪으며 백엔드 포지션으로 진로를 정하기도 하였고 모든 HA를 끝낸 해방감(?)에 한번 후기를 남겨보려 한다. Section3 어려웠나요? easyhard 우선 나는 33기로 코드스테이츠로 지원을 하였고 33기 Section3 HA에서 기수이동의 고배를 마셨다. Section1 & Section2가 HA가 쉬웠다..는 아니지만 Section3 HA에서는 엄격히 합격 여부를 선정하는거 같다. 그리고 팀단위로 2주, 4주 노력을 갈아넣는 프로젝트 진행 직전 최소한의 준비단계를 거친뒤 진행하라는 의미로 생각하면, 이러한 엄격한 선정방식은 당연하다 생각을 한다. Section3의 중점은 백엔드 로직에 대한 학습과 기초 컴퓨터공학 지식 그리…

✍️ 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…

🤔 Retrospect 재수강을 하면서 같은 Section을 다시 진행하면서 간만에 새글을 쓰는 거 같다. 새로운 pair와 같은 Section을 다시 진행을 하는데…어렵다!! 여전히 어렵다 어렵다 느꼈던 부분은 다시봐도 어렵다 느꼈다.. 물론 조금 나아진 점은 물론 있고, 머릿속에 남아 있는 잔재들로 해결을 해내곤 하지만, 여전히 부족한 부분에서 튀어나오는 구글링 포인트는 바뀌질 않았다.. 아직 “여전히 부족하구나, 갈길이 멀구나” 를 온전히 느끼고 있다. 오늘 했던 도 다시 풀어보니 백엔드 로직이 새삼 HA3와 비슷하구나..를 다시 풀며 느꼈다. 아무튼 부족한점이 너무 많았기에, 이번 기수이동이 오히려 잘 되었다 느끼고 있다. 말과 다르게 요즘 블로그 새 글이 뜸한데, 예전에 썼던 TIL들 중 부족한 부분들이 있다면 채워서 수정하고 있기 때문이다. 재수강 후 첫째 주는 솔직히 손에 잡히는게 없어서 루틴도 모두 깨졌는데, 이번 주 부터는 다시 돌아가고 있다. TOY는 다시 풀기…

🤔 Retrospect 잘 다니던 은행권 회사를 그만두고 개발자로 전향하기로 마음 먹은 21년 05월 이후, 7월 19일 부터 시작한 코드스테이츠 33기 생활이 오늘 종료되고 34기로 이동하였다. 적지않은 나이에 시작하는거라 나름 열심히 노력하고있다 생각했지만, 번아웃..이라말하긴 창피하고 시작하였을때의 열정중 일정부분이 고갈되었다라 생각이 들곤하였다. 어느 순간부터 매일 두뇌회전을 위해 쓰여야하는 TOY 알고리즘 문제풀이 시간은 부족한 챕터 진행을 위해 쓰이곤 하였고, 정규 학습시간 이후 개인학습시간을 갖고 내것으로 소화시키며 하루하루 배운점을 기록으로 남기기보다는 그저 제출에 급급하고 다음날 뒤쳐질 챕터과정이 걱정되어서 선행학습을 우선시하며 겨우겨우 따라가는 내 모습을 보며, “스스로 부족하지않은가?” 라는 의심이 요즈음엔 확신으로 바뀌었다. 변론을 조금 하자면, HA 이번 과제형 문제는 로직 구현(포스트맨을 통한 JWT 토큰 방식의 회원가입, 로그인, 로그아웃.. 기능구현)은…

✍️ 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