무라카미 하루키의 소설을 처음 읽어보았다.;하루키의 문장들처음 접한 하루키의 책은 달리기를 말할 때 내가 하고 싶은 이야기였다.이 책은 에세이였어서 하루키의 문체를 제대로 경험하지 못했다는 걸 이번 책을 읽으면서 알게 됐다.;하루키의 문체는 정말... 뭐랄까... 모네의 그림같은 느낌이다.푸르빌 절벽 위 산책은 2년째 내 노트북 배경화면이다.나는 모네의 그림을 좋아한다. 분명 현실을 담았음에도 그 순간의 기억, 기분, 냄새까지 담겨 있는, 한순간의 추억을 담아내기때문이다.;하루키의 문장에서도 비슷한 느낌을 받을 수 있었다.하늘은 더

[ 학습 목표 ]UI와 도메인 영역을 분리할 수 있는 설계 를 고민해보고, 목적에 맞게 객체와 함수를 활용단위 테스트 기반으로 점진적인 리팩터링💭 TMI2주차 미션이 마무리되었다. 개인적으로 콘솔을 벗어나 브라우저 환경에서 미션이 진행되어 재밌었다. 이제는 페어 프로그래밍이 꽤 익숙해진 것 같기도 하다. 컨벤션 맞추고, 이전에 어떻게 했는지 서로 말하고, 조율하였다. 이전에는 코드에 만족했다가 피드백을 엄청 받았었는데, 이번에는 구조가 인상깊다고 칭찬도 받고 step2까지 진행하고 나니 더 만족스럽다고 느꼈다. 추가로 면담도 진행

이전 게시글들에서 React Webview와 ReactNative의 통신을 시켜보았고, 추가적인 데이터도 주입시켜보았다.;이때의 통신은ReactNative->React 통신의 경우 onLoad시 React Webview에서 필요한 데이터를 한번에 주입시켜주는 형태 하나였고React->ReactNative 통신이 대다수여서 불편함이 있지 않았었다.;하지만 프로젝트가 커지고, 서버 API호출을 줄이고자 내활동을 저장하는 부분에 대해 네이티브 기기의 DB를 사용하는 부분을 적용시켰고, 이에 따라 Webview가 열린 후에 데이

이전 게시글에서 React Webview와 ReactNative의 통신을 시켜보았다.;이때의 방식은 WebView가 onLoad되었을때, React Webview에서 필요한 토큰을 주입하게 하는 형태였다.;하지만, 프로젝트가 커지고, 다양한 API요청이 많아짐에 따라 우리팀은 자연스럽게 비용문제가 발생할 수 있을거라는 걱정을 하게되었고, 이에 서버 API호출을 줄이고자 학교 데이터를 받아오는 부분에서 네이티브 기기의 DB를 사용하기로 하였다.;문제상황기기 DB에 저장된 데이터를 받아와서, 웹뷰에서 보여줘야했다.아래의 학교데이터가 바

문제https://school.programmers.co.kr/learn/courses/30/lessons/150370;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;리뷰2023 카카오 신입 공채 1차 코딩테스트 문제이다. 레벨 1 문제인만큼 어렵지는 않다.다만 제출했을 때 몇몇 케이스에서 오답이 나왔는데, 아래 사항을 고려해서 코드를 고쳤더니 해결되었다.;(1) 파기일 계산모든 달의

스코프는 식별자가 유효한 범위이며, 선언된 위치에 의해 참조 가능한 유효 범위가 결정된다. Javascript는 함수가 어디서 정의됐는지에 따라 함수의 상위 스코프가 결정되는 렉시컬 스코프를 따르며, 함수의 중첩에 의해 계층 구조를 갖는 스코프 체인이 존재한다.📘;스코프식별자가 유효한 범위자신이 선언된 위치 에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 됨식별자 결정 : JS엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지 결정✅;JS엔진은 코드의 문맥(context) 고려렉시컬 환경

💭;TMI프론트엔드를 공부하면서 컴포넌트의 역할, 컴포넌트 분리에 대한 고민을 많이 했었는데, 미션을 진행하면서 객체에 대한 고민이 부족하다는 것을 느꼈다. 해당 객체가 이 역할을 하는게 합리적인지, 얼마나 역할을 분리시켜야 하는지 등에 대한 기준이 혼란스러웠다. 정답이 없다고 하지만 UI 로직과 도메인 로직 분리 라는 관심사의 분리는 모든 분야에 통용된다고 생각한다. 그런 의미에서 객체의 역할, 책임에 대한 기준을 세우고 싶어 이 책을 읽게 되었다. 그리고 지금처럼 구조, 설계 측면에서 고민할 때 읽는 게 적합하다고 생각하여 책

[ 학습 목표 ]Github 기반으로 온라인 코드 리뷰코딩 컨벤션 을 준수하며 개발단위 테스트 를 작성하며 개발함수(또는 메서드)를 분리 하는 리팩터링💭 TMI레벨 1 첫 미션이 마무리가 되었다. 기능 요구 사항, 프로그래밍 요구사항, 과제 진행 요구사항을 참고하여 문제를 해결하였다. 문제와는 별개로 한가지 고민이 있었다.좋은 코드란 무엇인가?원래는 가독성이 좋은 코드의 유일한 기준이였고, 일단 잘 읽혀야 좋은 코드라고 느껴졌다. 미션을 진행하면서 코드리뷰를 받아보는 경험 또는 도메인 로직을 위한 단위 테스트를 작성하는 경험 은

;이번 년도에는 정보성 글, 자기계발서들에서 의도적으로 벗어나 소설을 읽어 보려 하고 있다.그러던 중 서점에서 민음사코너를 보게 됐다. 쭉 훑다가 눈에 들어온 것이 무기여 잘있거라였다.;어니스트 헤밍웨이가 그렇게 대가로 유명하다는데 나는 그의 글을 한 번도 읽어본 적이 없었다는걸 알게 됐다.과연 이 사람은 어떤 내용의 글을 어떻게 적었을지 궁금하여 선택하게 된 책이다.;인간은 죽는다. 그것이 무엇인지 몰랐어. 그것에 대해 배울 시간이 없었던 거야. 경기장에 던져 놓은 뒤 몇 가지 규칙을 알려 주고는 베이스를 벗어나는 순간 공을 던져

💭 TMI타입스크립트를 사용하면서 사용하는 방법은 되게 쉬운데 잘 쓰고 있는지 판단하기 어렵다. 나는 처음부터 잘 쓰고 싶었는지 첫 책으로 이펙티브 타입스크립트를 선택했다.사실 TS 첫 책으로 이 책을 선택한 건 약간 후회가 되기도 한다. 내용 자체가 첫 공부를 시작할 때 받아들이기에는 난해하다고 느꼈기 때문이다. 그래서 중간에 읽다가 안읽다가를 반복했는데 어떻게 해야 타입스크립트를 잘 쓰고 있다고 말할 수 있을까 라는 고민이 들 때 이 책을 다시 읽기 시작했다. 1회독을 한 후에 다시 읽어보고 있는데 책 내용의 전체를 담지 않고

💭 TMI진짜 며칠동안 vscode에서 lint 설정에 따라 vscode 에디터 상에 오류가 안뜨는 문제 때문에 고생했는데 드디어 해결했다. 다른 팀원들은 인식되는 걸 보면 vscode 문제인 걸로 확인되어 고치려고 삽질을 했었는데 그 과정을 공유하려고 한다.📘 vscode 응용프로그램 재설치eslint extension을 설치했는데 아래와 같은 오류가 발견되었다.24년도에 새로 vscode가 update 되서 혹시나해서 새로 설치해봤다.vscode 재설치 (mac)The language client requires VS Cod

react 외에 다른 프레임워크도 지원하는 것을 나타내기 위해 v4버전부터 tanstack query 로 이름이 변경되었다.💭 TMI (react query 도입 이유)다양한 서버 데이터를 호출하여 비동기 데이터를 React state로 관리하다보니 컴포넌트의 복잡성이 높아졌다. useEffect로 외부 데이터와 동기화를 시키는 코드가 많아지면서 코드를 파악하기 어려워졌다. 해당 state가 클라이언트 데이터인지 서버 데이터인지 로직을 모두 확인해야 알 수 있었다.또한 같은 API를 호출하면서 매번 호출한다는 점이 아쉬웠다. 그렇

이전 글에서 useInfinityQuery를 사용하여 무한 스크롤 피드를 구현해보았다.;하지만 두가지 문제가 존재했다.새롭게 글을 작성/수정/삭제 하는경우 피드데이터는 어떻게 최신화 되어야 하는가?세부 글보기에서 좋아요/댓글을 추가/삭제하는 경우 피드데이터는 어떻게 최신화 되어야 하는가?이번에는 이 두 가지 문제를 해결해보자.;이 문제 중 두번째 문제가 당근마켓 그룹플랫폼 인턴직무의 사전 질문이었다...!이걸 직접 해결해 볼 수 있는 기회가 이렇게나 빨리 오게 될 줄이야....https://0422.tistory.com/331;당근

이전글에서 무한스크롤에 필요한 두가지 조건을 정리했다.사용자가 페이지 하단에 도달했을때콘텐츠가 계속 로드첫번째 조건은 이전글에서 완료했으니, 2번째 미션을 해결할 차례다.;어떻게 콘텐츠가 계속 로드되게 만들 수 있을까?데이터를 페이지네이션 형태로 제공하는 방법은 크게; cursor 기반과 offset 기반, 두가지 방법이 존재한다.하지만 그것은 백엔드 개발자의 일이구요... 라고 하면 큰일나니 간단하게 알아보자.offset 기반;페이지단위로 구분해서 구현이 간단하나 데이터 중복문제(중간에 글이 써지는경우)가 발생한다.offset값이

배경커뮤니티 서비스를 만들고 있는데, 피드를 만들어야 했다.이전에 당근마켓 인턴십의 사전 질문이기도 했던 세부 글보기 에서 좋아요/댓글이 추가/삭제된 경우 어떻게 피드에 반영할 것인가?라는 질문에 직접 구현해보며 답할 수 있는 좋은 기회라고 생각해서 구현하게 됐다.무한스크롤에 필요한 것들을 하나씩 확인해보면서 구현할 것이다.;필요한 것 알아내기무한 스크롤은 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드되는 사용자 경험 방식이다.;그럼 구현에 필요한 두가지 필수 조건을 알 수 있다.사용자가 페이지 하단에 도달했을때콘텐츠가 계속

https://0422.tistory.com/347;React, RN 환경에서 WebView 통신하기 (react-native-webview)배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그0422.tistory.com위 글에서 이어진다.;이전 게시글을 통해 앱-웹간 통신으로 토큰을 받아오고 이벤트를 발생시키는 것까지는 완료했다.하지만 이제부터 시작이다. 받아오기전에는 어떻게 하고,

배경웹뷰를 사용하여 앱을 구성하고 있다.웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다.;그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그인/로그아웃을 구현하지 않고, 앱 내부의 JWT토큰을 웹으로 전달할 수 있어야 했다. 또한 웹내에서 JWT토큰이 만료되는 경우 로그인 페이지로 이동시켜줄 필요가 있었다.;우선 Web과 App환경의 통신 방법에 대해 알아보고, 이후에 토큰을 내부적으로 관리해볼 것이다.;기본 구성하기기본적으로 react-native-webview 라이브러리를

<코딩테스트 합격자 되기: 파이썬 편> 1독 스터디 기록입니다.;;스택(Stack)먼저 입력한 데이터는 가장 나중에 꺼낼 수 있는 선입후출(FILO, First-In-Last-Out) 자료구조이다. '가장 최근의 값'이 필요할 때 활용할 수 있다.스택 개요;파이썬에서는 스택 자료구조를 지원하지 않기 때문에 리스트로 구현해서 이용할 수 있다.;스택 ADT연산boolean isFull(): 스택에 들어있는 데이터 개수가 max_size인지 확인하여 boolean 값을 반환한다. 즉, 스택에 데이터가 가득 차 있으면 True,

Indexed Carousel이제 Index 기반의 Carousel을 구현해보자.사실 로직은 이전 글과 거의 동일하다. 시작 터치 위치를 기억하고, 움직일때 transX를 변경하고, transX를 기반으로 translateX를 통해 스크롤을 구현한다.;여기서 Index를 추가하고, 특정 scroll값을 넘으면 인덱스를 변경시켜 주고, translateX값을 Index기반으로 작동하도록 만들어주면된다.;그래서 handleTouchStart와 handleTouchMove콜백함수는 Non-Indexed와 동일하다.// Non-Indexe

💭 TMICRA에서 vite로 마이그레이션하여 빌드속도를 약 75% 개선하였다. 빌드 속도 개선를 통해 UX와 DX를 향상시켰으며, 빌드했을 때 번들 크기를 분석하였다. 하지만 번들 사이즈가 너무 커서 경고 메세지를 받고 초기 로딩 속도가 느리다는 문제점을 파악하였다. 이러한 문제를 해결하기 위해 code spliting 을 진행하기로 하였다.📘 code spliting코드를 나누어 번들링하고 런타임에 필요한 모듈을 동적으로 불러오는 것SPA로 개발된 프로젝트를 빌드하면 하나의 JS 파일로 번들링된다. 이럴 경우 JS 파일이 다

<코딩테스트 합격자 되기: 파이썬 편> 1독 스터디 기록입니다.;;선언일반적인 방법arr = [0, 0, 0, 0, 0]arr = [0] * 5리스트 생성자를 사용하는 방법arr = list(range(5))# 결과: arr = [0, 1, 2, 3, 4]List Comprehension을 사용하는 방법List Comprehension이란, [expression for item in iterable if condition];구조로 리스트를 간결하고 효율적으로 생성할 수 있는 문법이다. 코드의 가독성을 높이고 일반적인 fo

💭 TMI엄청난 충돌과의 싸움에서 이기고 돌아왔다...라이브러리가 많을수록 마이그레이션하기 어렵고 라이브러리 간에 의존성이 높을수록 하나만 버전을 올리기 어려웠다. 추후 개발을 진행할 때 라이브러리를 제거하고 직접 구현하는 방향을 고려하고 있다.기존의 프로젝트에서 하나씩 수정하다보니 package.json을 공유하게 되서 특정 부분의 오류를 찾기 어려웠다. 그래서 npm create vite@latest [프로젝트 명] --template react-ts 로 새로 생성하여 옮기기로 결정하였다.vite로 마이그레이션, node와 t

💭 TMI2년 전 진행했다가 포기했던 프로젝트를 다시 일으켜세울 기회가 생겼다. 그때는 군대 이슈로 참여하지 못했지만 한 친구가 추진하여 해당 프로젝트를 참여하게 되었다. 코드흐름을 이해하고 화면 구조를 분석하는데 서버데이터로만 렌더링할 수 있는 구조였다. 화면을 렌더링하기 위해 서버가 배포되기 전 API를 mocking하여 msw를 적용해보려고 했다. 하지만 2년 전이다보니 react와 node 버전이 낮았고, 이에 따라 다른 라이브러리들도 함께 엮여있어서 라이브러리 적용 및 유지보수가 힘든 상황이라는 걸 알게 되었다 (알고 싶

<코딩테스트 합격자 되기: 파이썬 편> 1독 스터디 기록입니다.;;Mutable vs Immutable뮤터블 객체(Mutable Object)객체 생성 후 수정할 수 있는 객체를 의미한다. 대표적으로 리스트, 딕셔너리, 셋이 있다.;리스트로 예를 들어 보자.;(1) 리스트를 선언한다.my_list = [1, 2, 3, 4, 5](2) 이 때 마지막 값을 6으로 변경해보면 다음과 같은 상태가 된다.my_list[4] = 6단순히 index 4의 값을 5에서 6으로 수정한 것이다. 이처럼 참조한 곳은 동일하지만 값을 수정할

<코딩테스트 합격자 되기: 파이썬 편> 1독 스터디 기록입니다.;;문제를 분석하여 시간 복잡도를 구한 다음 문제에 적합한 알고리즘을 찾을 수 있다.;시간 복잡도(time complexity)알고리즘 수행 시간을 측정하는 방법에는 절대 시간을 측정하는 방법과 시간 복잡도를 측정하는 방법 두 가지가 있다. 절대 시간을 측정하는 방법은 프로그램 실행 환경에 따라 편차가 크기 때문에 코딩 테스트에서는 잘 활용하지 않는다.;시간 복잡도는 어떻게 측정하는가?입력 크기에 대해 알고리즘이 시작한 순간부터 결괏값이 나올 때까지의 연산 횟

2학년 2학기부터 캘린더에 일정을 빼곡히 채워살면서 자주 들었던 말이 있다."3학년 1학기는 지금보다 더 힘들고 3학년 2학기는 그거보다 더 힘들대."이 말이 틀리지 않았음을 증명이라도 하듯이 고된 3학년 2학기를 보냈다.그냥 보내기에는 아쉬워서 지나버린 일정을 월별로 정리하고 일기처럼 써봐야겠다는 생각이 들어 이번 학기 21학점 시간표로 시작해보려고 한다.9월개강과 동시에 코딩부트캠프와 캡스톤 Proposal 발표를 맞닥뜨렸다.코딩부트캠프개강 5일차에 코부캠 1차 시험이 4주도 남지 않았다는 교수님의 공지를 듣게 되었다. 1차에

배경지난 글에서 로컬 환경에서 플라스크를 사용하여 파이토치로 된 모델 파일을 동작시켜 보았다. 이번 글에선 EC2 위에서 플라스크를 동작시켜 보겠다. 개발하던 중 마주했던 문제들도 다룰 예정이다.;개발1. EC2 인스턴스 생성 및 기본 세팅2. git 또는 scp(ssh 프로토콜 기반 서버간 파일 전송 명령어)를 사용하여 파일 업로드github는 100 MiB보다 큰 파일을 올릴 수 없기 때문에, 모델 파일의 경우는 scp 명령어를 사용해 EC2에 전송했다.;모델 파일의 크기가 347.5 MiB였다,,,$ scp {파일 경로} {호

서비스 운영을 하면서 기획 측의 요청으로 사용자 유입 및 트래픽 분석을 위해 Google Analytics 4를 적용하기로 했다.사실 사용자가 마주하는 페이지에 연결하는 만큼 백엔드보다는 프론트엔드의 영역이지만 여러 문제로 재난인 프론트를 도와서 GA4를 연결을 시도했다.Google Analytics 계정먼저 Google Analytics 계정을 생성해준다. 여기서 계정은 애널리틱스의 액세스 포인트를 의미한다.위 사진처럼 직접 Google Analytics에서 생성해도 되고 Firebase에서 프로젝트 생성하고 Analytics로

성적이 나오면서 그 힘들다던 3학년 2학기까지 마무리되었다. 여름방학 회고를 작성했기 때문에 그 이후 3학년 2학기 생활 위주로 회고를 진행해보려고 한다.📘 강의학점은 캡스톤 디자인 과목을 포함하여 21학점을 들었다. 솔직히 말하면 힘들걸 예상했고 실제로 힘들었다. 근데 다 힘든 시기고 한과목이라도 더 들어야 내년이 편하다고 생각해서 버텨냈다. 그리고 4-1학기 캡스톤을 3-1학기에 미리 들었는데 다들 왜 캡스톤을 2번듣냐고 했지만 난 프로젝트를 하면서 학점을 받을 수 있고, 교수님과 현직자 피드백을 받을 수 있는 기회는 귀하다고

;Flask?;Python 기반 웹 프레임워크. Django와 같은 Python 웹 프레임워크지만 Django 보다 더 쉽고 간단하다는 느낌을 받았다. Django는 MTV 패턴처럼 어느 정도 서비스 개발 사이클이 존재하는 비교적 전통적 방식의 프레임워크라면, Flask는 더 간단하고 빠르게 개발을 진행할 수 있다. 다만, Django와 비교하여 인증 및 인가, Admin 페이지에 있어서 기본 세팅이 되어 있지 않기 때문에 따로 라이브러리를 사용해야 하는 어려움이 있다.;Flask를 모델 서빙에 많이 사용하는 이유;Python 언어

2023년 연말까지 간단한 테스트 서비스를 개발하고 운영에 대비하기 위해 다음을 수행하였다.선배포와 ci/cd 환경 세팅jmeter 부하 테스트winston 모듈로 카카오 로그인 및 생성 로그 확인1번은 개발 이전에 수행하였고 2, 3번은 개발이 어느 정도 마무리된 후에 시도하였다.문제는 3번에서 서버 실행과 데이터 생성 감지 로그를 추가하면서 발생하였다.사실 해결하고보니 멍청 이슈이긴한데.. 여러 로그 뜯어보면서 알게된 내용들을 기록하려고 한다.winston 추가 이전pm2 start index.js -i max --watch 를

;배경;; 2023년 2학기 학부 캡스톤디자인(1) 수업에서 진행했던 프로젝트에서 PyTorch로 학습이 완료된 딥러닝 모델을 Spring Boot에서 사용할 수 있도록 해야 했다. PyTorch 모델은 Pretrained model 중 Vision Transformer 딥러닝 아키텍처. 백엔드에서 할 일은 클라이언트에서 넘겨받은 이미지를 딥러닝 모델에 input으로 넣어 분류값(0 또는 1의 정수)을 output으로 받아 저장하는 간단한 작업이었다.- input: 224 x 224 Color img- output: 1 or 0;개

가족여행을 대만에 와있는 상황에서 합격소식을 듣게 되었다!!!!! 결과가 여행 내내의 내 기분을 결정하게 될 것 같아 걱정했는데 다행히도 좋은 결과가 있었다. 최종합격까지의 과정을 한번 정리해보고자 노트북을 열었다.자기소개서(10/06 ~ 10/16)프리코스를 시작하기 전 자기소개서를 작성해야한다. 작년 5기 때도 지원했었는데 그때는 자바스크립트를 익히는 게 목적이였기 때문에 자소서에 집중하지 않았다. 하지만 한번 그래도 해봤던 경험으로는 자소서가 매우 중요한 부분을 차지한다고 생각했고, 합격한 시점에서는 더더욱 크게 느껴진다. 그

💭 TMI모바일 앱개발이라는 강의를 들으면서 flutter로 모바일 애플리케이션을 개발하고 있다. 웹 프론트엔드 개발자를 진로로 생각하고 있는데 같은 클라이언트단이기 때문에 흥미롭게 사용하고 있다.react-native로도 앱을 개발했었는데 flutter에서 제공해주는 widget이 많아서 생산성이 훨씬 높고 성능도 좋아보인다. 웹보다 앱이 메인이라면 flutter로 android, ios 모두 배포할 수 있게 사용할 것 같다.아무튼 이번엔 flutter에서 구글 지도를 불러오는 방법을 알아보자.[ 요약 ]google map AP

React+TS로 서비스를 만들어 출시했다.;Arti 아티투표를 통해 세상에 숨겨져 있던 유니크한 옷들을 만나보세요arti-fashion.site하지만 이미지가 너무 많아서 렌더링이 느리고, 검색 엔진에서 찾기 쉽게 하는 SEO 작업에 제한이 있다는 것을 알게 됐다.이러한 이유로 더 빠른 렌더링과 SEO를 위해 Next.js로 마이그레이션을 하기로 결정했다.1차 스프린트를 React+TS로 마무리하고, 이 프로젝트를 Next로 마이그레이션 후 2차 스프린트를 진행하는 순서로 진행중이었는데, 한 선생님께서 질문을 하셨다.분명 난 이유

보통 우리는 npm에서 필요한 모듈을 설치한 다음 필요한 컴포넌트에서 해당 모듈을 import해서 사용합니다.하지만 TS에서는 분명히 모듈을 설치했는데도 아래와 같은 에러가 발생하는 경우가 있다.;내가 설치를 안했나... 해서 다시 설치도 해보고, 실수로 다른 모듈을 설치했나.... 해서 다시 설치 했는데 결국 실패했다. 본인이 설치한 모듈이 JS 환경에서 사용가능한 형태만 지원하고, 해당 모듈 개발자가 TS에서 사용가능한 형태는 지원하지 않아서 아무리 설치해도 모듈을 찾을 수 없다는 오류가 발생했던 것이다.이러한 오류를 해결하는

💭 TMI프로젝트를 진행하면서 배포를 간단히 할 수 있는 방법으로 next-serverless 를 사용하였다. 근데 그땐 그냥 다른 래퍼런스 참고해서 내 환경에 맞게 작업하여 완성하였다. 근데 어떤 동아리 면접에서 serverless 배포를 어떻게 했는 지 물어봤을 때 내가 정확하게 알고 있는 지 확신이 없었다. 그래서 next-serverless에서는 어떻게 코드가 배포되고 이를 실행할 수 있는 지 자세히 알아보자.[요약]/_next, /public 에는 정적자원을 저장하고 /static-pages 에는 SSR 렌더링하는 페이지

h2: console: enabled: true path: /h2-consoleapplication.yml 파일에 위와 같이 설정하면 localhost:8080/h2-console에 접속해서 웹 콘솔을 사용할 수 있다.내가 원했던 페이지;문제 상황그런데 Spring Security를 사용하면 localhost:8080/h2-console에 접속했을 때 아래와 같은 로그인 페이지로 계속 리다이렉트된다.리다이렉트되는 페이지;;해결 방법감사하게도 원인과 해결 방법을 아주 깔끔하게 정리해 주신 글을 찾았다.요약하자면 /h2-console/

대한민국의 98%는 카카오톡을 사용하고 있다.그래서인지 현재 대부분의 서비스에서 소셜로그인, 그 중에서도 카카오 로그인을 이용하여 서비스를 사용 할 수 있도록 하고있다.내 기억에도 서비스에서 로그인이 필요할 때, 카카오 로그인을 이용해서 로그인 한 경험이 많았었다.그래서~ 이번 프로젝트에서 소셜 로그인을 맡아서 진행하기로 했다.카카오 소셜 로그인 서비스이번 프로젝트는 프론트와 백엔드가 협업하여 프론트에서 로그인을 요청하여 인가코드를 받아와서 백엔드로 넘겨주면 인가코드를 이용해 카카오 서버에서 토큰을 받아와 얻은 정보를 이용해 자체

https://brand.toss.im/[ 요약 ]비즈니스 로직 한눈에 파악 가능성공과 실패 코드 분리성공하는 경우만 다루고 실패하는 경우는 외부에 위임리액트는 ErrorBoundary 와 Suspense 로 로딩상태와 에러상태 분리 및 처리📖 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기토스 SLASH 21 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기💭 좋은 코드란 무엇인가📌 나쁜 코드 (1)그냥 봐도 읽기가 어렵다.x.foo.bar.baz 에 안전하게 접근하기 위한 목적에 비해 코드가 복잡하다.function ge

https://brand.toss.im/[ 요약 ]클린 코드 : 원하는 로직을 빠르게 찾을 수 있는 코드응집도 : 핵심 내용은 겉으로 드러나게, 세부 구현은 추상화단일 책임 : 한 가지 일만 하는, 명확한 함수명추상화 : 핵심 개념 뽑아내기선언적 프로그래밍 연습하기큰 그림 보는 연습하기 (기능을 추가하면서 그 때는 맞고 지금은 틀린 코드)💭 TMI요즘 들어 좋은 개발자, 잘하는 개발자는 무엇인가 에 대한 생각이 많이 든다. 전공 수업을 열심히 들어 학점을 잘 받은 사람? 프로젝트 경험이 많은 사람? 영향은 있지만 100% 인과관계

'프로그래머스 데브코스 4기 백엔드'에서 진행한 <네이버 웹툰 클론코딩> 팀 프로젝트 기록입니다.;부제: 이용 연령 등급 Enum으로 개선하기;;이전 포스팅에서 웹툰 '이용 연령 등급' 데이터를 enum 클래스로 관리하게 된 과정을 이야기했다. 그리고 그렇게 처음 만든 enum 클래스는 아래와 같았다.@Getterpublic enum AgeRating { ALL(0), // 전체연령가 OVER_12(12), // 12세이용가 OVER_15(15), // 15세이용가 OVER_18(18); // 18세이용가 private

Django의 장점이자 단점은 코드가 간단하다는 것이다.사용자가 실제로 적는 코드는 짧아서 기능을 구현하는 것은 쉽지만 내부 실행 로직을 이해하거나 커스텀하기는 쉽지 않은 편이다.그래서 Django 쓰면서 실행 과정 따라서 코드를 꽤 많이 까본 것 같다.소셜로그인도 마찬가지다. 구글 소셜로그인 코드를 쓰고 기능을 구현하는 것은 어렵지 않다.근데 내가 엔드포인트를 써놓고 내부에서 어떻게 실행되는지도 모르겠다🫠그래서 오늘도 자료를 찾아보고 양파같은 코드를 까봤다 !OAuth 2.0OAuth를 이야기하기 전에 인증/인가를 간단하게 정리

'프로그래머스 데브코스 4기 백엔드'에서 진행한 <네이버 웹툰 클론코딩> 팀 프로젝트 기록입니다.;부제: 이용 연령 등급 Enum으로 개선하기;;이 포스팅은 네이버 웹툰을 클론코딩하면서 '이용 연령 등급' 데이터에 enum 클래스를 적용함으로써 코드를 개선한 과정에 대한 이야기이다. 특히 이번 편은 어떤 기술보다는 설계에 관해서 했던 잡생각들에 대해 쓰려고 한다.솔직히 말해서 이전에는 enum이랑 별로 안 친했다.;지금 보면 '아니 이걸 enum 안 쓰면 어디에 써...?'라고 생각한다. 그리고 이 글을 보는 누구든 그렇

'프로그래머스 데브코스 4기 백엔드'에서 진행한 <네이버 웹툰 클론코딩> 팀 프로젝트 기록입니다.;문제 상황Controller 테스트를 실행할 때 "JPA metamodel must not be empty!" 에러가 발생했다.각 Controller 테스트는 @WebMvcTest로 진행했다.;;;원인@SprinbBootApplication에 @EnableJpaAuditing을 붙였는데, @WebMvcTest로 테스트를 진행해서 발생한 문제이다.;@EnableJpaAuditing이 뭔데??ORM에서 Database Audit

문제 상황산보실록 프로젝트의 사용자 피드백을 받던 중,,,브루트포스 공격에 취약할 거 같다는 피드백을 받아, 브루트 포스 공격 방지를 위해 로그인 시도 횟수 제한 기능을 추가하게 되었다.해결방안 설계우선, 구상한 해결 방안은 5회 이상 로그인 시도 실패 시 30분 동안 로그인 시도를 잠그는 기능이었다.이 기능을 구현하기 위해 고민할 부분은 다음과 같았다. 로그인 전의 사용자를 어떻게 식별할 것인가 ? 로그인 시도 실패 횟수를 어디에 저장할 것인가 ? 일정 시간동안 로그인 시도를 막는 기능은 어떻게 구현할 것인가 ?1차 설계우선, 로

이번 학기 진행하는 두 프로젝트에서 프로젝트 기초 세팅을 진행하였다. 2명 이상의 팀원과 개발하는 것은 처음이었기에, 평소보다 더 꼼꼼하게 세팅을 진행하였고 그 과정을 작성해보았다.💁🏻‍♂️ Typescirpt create-react-appCRA로 ts를 세팅할 수 있다.$npx create-react-app "프로젝트명" —template typescript추가적으로 ts개발을 위해 필요한 library를 설치해준다.$npm i --save react react-dom typescript$npm i --save-dev @typ

💡 상대경로와 절대경로프로젝트를 진행하다보면 컴포넌트가 증가하기 때문에 폴더구조가 복잡해진다.이런 상황에서 상대경로로 import를 하게 되면 다음과 같이 가독성이 떨어지고, 파일트리의 뎁스가 깊어지면 ../../../파일명 처럼 경로가 길어진다는 문제가 발생한다.import Home from './pages/Home' import MyPage from './pages/MyPage'import NavBar from '../components/NavBar';그래서 프로젝트를 세팅하며 다른 글들을 참고해 아래와 같이 절대경로로 쉽고

시작하기 전에 왜 프론트를 공부하다가 NodeJs를 공부하게 되었는지 설명하자면프론트를 공부하면서 백엔드와 함께 2번정도 프로젝트를 진행했는데, 백엔드에 대해 전혀 아는게 없다보니 서비스를 기획 할 때도 이 기능 구현이 가능한지, 구현이 힘든건지 모를 때가 많았다. + 소통할 때 모르는 부분이 나오면 답답함...그래서 백엔드를 공부하면 앞으로 프론트 개발자를 공부하고 일하는데 큰 도움이 될 것 같다는 생각이 들었다!그리고 뭔가 프론트 쵸큼 할 줄 아니까... 백엔드도 공부하면 프로젝트를 할 기회가 더 많이 생기지 않을까? 하는 생각

💭 TMI이전 글을 통해 우리가 자바스크립트에서 어떻게 비동기 처리를 할 수 있는 지에 대해 알아보았다.개발자의 관점에서 비동기 코드를 어떻게 처리하는 지에 대해 알아봤다면 이번 글에는 브라우저가 내부적으로 어떻게 비동기 처리를 하는 지 알아보자.📚 Callstack이벤트 루프를 이해하기 위해선 자바스크립트의 실행 컨텍스트에 대한 이해가 필요하다.크롬 브라우저에 사용 중인 V8 엔진이라는 JS엔진을 기준으로 설명하면, JS엔진에는 콜스택과 메모리힙이 존재하는데 코드의 실행순서를 콜스택이 관리한다.📌 Single Thread자바

해커톤 프로젝트를 진행하면서 역할을 분담해서 했더니 팀 프로젝트 코드인데 내가 모르는 코드가 몇개 있는 것 같아서 공부해서 이해하고 넘어가야된다는 생각이 들었다.;+ 게시글에는 보통 이미지를 첨부할 수 있게 하기 때문에 알아두면 좋겠다는 생각이 들어서 프로젝트에 팀원이 작성한 코드로 공부를 해보았다.;const insertImg = (e) => { let reader = new FileReader(); // 업로드 파일 세팅 부분 const file = e.target.files[0]; setUploadedImage(file)

💭 TMI이벤트 루프 발표를 해야되는데 동기/비동기 개념이 헷갈려서 정리를 해보려고 한다. 나는 제대로 서버에 데이터를 요청했는데 결과값이 제대로 안나온다? 그럼 서버문제거나 동기 비동기를 제대로 이해하지 못해서이다.(물론 이유는 많겠지만) 서버를 탓하기 전에 무지한 나를 먼저 탓하며 비동기를 이해해보자👏 동기(sync) vs 비동기(async)동기 방식은 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. A작업이 완료될 때까지 B 작업은 대기하므로 순서대로 처리된다.비동기 방식은 요청을 보냈을 때 응답 상태와 상

Slack과 Github협업을 하면서 가장 많이 사용하고있는 Github와 Slack을 연동할 수 있다고해서 알아보았다.;슬랙 채널들을 쭉 내려보면 앱을 추가할 수 있는 칸이 나온다.앱 추가 버튼을 누르고 검색창에 github를 검색하면 설치가 가능하다.검색 결과로 나온 Github를 클릭하면 자동으로 앱이 추가된다.아직 끝이 아니다.;원하는 채널에 들어가서 명령어 입력을 해야되는데;/github만 쳐도 전체 명령어를 확인할 수 있다. 따라서채팅창에 /github subscribe [깃허브 계정 이름]/[연결할 레포지토리 이름] 을

💭 TMIreact-query 를 매번 하고싶었는데 못했다.항상 일단 axios로 API 요청 처리하고 나중에 시간되면 react-query 넣어야겠다~고 생각하는데 프로젝트가 끝나고나서 코드를 들여다보기가 쉽지 않다.근데 이번엔 의욕이 더 강했나? 대회는 끝났지만 코드를 개선하고 싶은 마음이 굴뚝같다. 이번 프로젝트에 애정이 생겨버렸나봐 😎공식문서를 읽으면서 적다보니 모든 내용을 담으려다가 해석하는 글이 되버리는 것 같아서 핵심개념과 적용해본 부분만 작성하고 추후에 더 작성할 예정이다 :)✵ react-query"it make

💭 TMI기능은 돌아가는 기존의 소중한 쓰레기(?) 코드들을 리팩토링하고 싶다는 생각이 들었다.그런데 리팩토링을 하다보니까 고칠 때마다 돌아가는 지 모든 경우를 확인하는 게 귀찮기도 하고 복잡하기도 했다.이러한 문제를 해결하기 위해 테스트 코드를 작성해보려고 한다.테스트 코드를 잘 작성해놓으면 이 테스트코드 통과하는 것만으로도 기능이 잘 돌아간다는 게 보장되기 때문이다 !!🔎 테스트 방법현재 알고 있는 테스트 방법로는 테스트의 범위에 따라 3가지가 있다.unit test (함수가 잘 동작하는 지 테스트. 작은 단위)integra

문제이전 게시물을 통해 살펴보았듯, SSO 모델을 선택한 이후에도 문제가 남았다.여러 사이트 간 데이터를 공유하기 위해 하나의 JWT 토큰을 둘 건데, 이걸 사이트 간 어떻게 공유해야 할까?이 문제를 해결할 수 있는 방법을 조사해서 몇 가지 추려 보았다선택지일단 클라이언트 단에서 특정 정보를 저장해야 하는 것은 분명했다.서버에서 데이터를 가지고 있다면, 클라이언트가 스스로임을 인증하기 위해 매번 다시 로그인을 해야하므로, 당초 목표였던 '로그인 빈도 낮추기'를 이룰 수 없기 때문이다.(물론, 이렇게 구현하는 경우에도 로그인 횟수를

배경동아리 해커톤 이후 사이드 프로젝트로 동아리 위키 페이지 개발을 시작하게 되었다.동아리 위키는 동아리 내 있었던 일이나 레퍼런스들을 보기 쉽게 정리하는 게 목적이라, 이미 구현되어있는 메인 사이트와 로그인을 연동하고자 했다.그러나 해당 메인 사이트는 이전 기수의 사이드 프로젝트로 제작한 것이라 유지보수가 쉽게 이루어지기 힘들었고, 따라서 DB를 공유하면서 작업하기 어려웠다(사실 이제 와 생각하니 DB를 공유하는 것이 오히려 불필요하다는 생각도 든다)뿐만 아니라, 리크루팅 페이지를 만드는 사이드 프로젝트 팀도 있었기 때문에, 앞으

오픈소스 관련 이슈를 해결하면서 패키지에 대한 이해없이 구조만 보고 코드를 수정했더니 잘 모르겠어서 정리하면서 공부해야겠다 !MoqThe most popular and friendly** mocking library** for .NET리드미를 인용하자면 .NET 프레임워크에서 가장 보편적인 Mock 라이브러리다. 오픈소스에서는 Given-When-Then 방식의 테스트케이스에서 mock 객체를 사용하기 위해 Moq을 활용하고 있었다. Moq 대체가 필요한 이유Privacy issues with SponsorLink, starting

해커톤 끝난지 일주일이 지난 시점에 쓰는 회고라니 ,,열심히 쉬다보니 벌써 일주일이 지났고 넘기기에는 생각해둔 주제가 많아서 아쉬운 마음에 또 머리도 복잡해서 쉬어갈 겸 적어봅니다 !시도협업이전에 두어번의 프로젝트 경험은 있지만 백엔드의 작업물을 그대로 프론트한테 넘겨주거나 프론트, 백 1:1 작업을 했어서 기디프백이 전부 모인 협업다운 협업은 처음이었다고 볼 수 있을 것 같습니다.다른 파트와 함께 회의하면서 협업을 어떻게 해야하는지 어느 정도 감을 잡을 수 있었고 특히 프론트-백의 소통에서 프론트가 무엇을 원하는지 이해할 수 있었

7월말쯤에 바빠서 갈 생각도 못하고 있었는데 마침 ! 행사 당일에 일정이 없어서 다녀왔던 Google I/O Extended 2023 Seoul 후기입니다 !짧게 써보자면 GDG와 GDSC에서 주관하는 만큼 세컷사진부터 다트 등의 여러 부스와 기념품 모두 재미있게 구성됐다고 느꼈습니다. 다만 그에 비해 세션의 난이도는 확실히 높다고 느껴졌어요. 서비스 사용, 개발 경험 공유가 목적이다보니 해당 서비스를 모르거나 사용 경험이 없는 입장에서는 아는 부분이 많지 않아서 말씀해주신 것에 비해 많이 못 얻어왔습니다.. 더 공부해야겠어요😢제

django로 이메일을 통한 사용자 인증 기능을 구현하면서 구글링도 많이 하고 질문도 많이 해서 정리해보려고 한다 !이메일 인증이메일로 사용자 인증을 하는 방식은 크게 두가지가 있다.메일에 첨부된 링크로 인증하는 방식인증 코드를 보내고 사용자가 코드를 입력해서 인증하는 방식우리 팀은 2번 방식을 사용했다. 우리가 개발하는 서비스는 가입 과정에서 계정 입력과 정보 입력이 나누어져 있어서 페이지 이동을 위해 2번이 낫다고 판단했지만 한 번에 모두 입력받아서 넘어가는 경우에는 확실히 1번이 편하다.AWS SES사용 이유물론 파이썬에서는

환경AWS EC2 서버 인스턴스python3-pip & python3.8-venv python, 가상환경nginx 웹 서버gunicorn 웹 애플리케이션 실행명령어 nohup 무중단배포Github Actions workflow 자동화시작하면서Dockerfile을 작성했지만 EC2에서 컨테이너를 구동하면 문제가 없어도 바로 Exited로 넘어가고 AWS Codedeploy 비용은 꺼려지고 gunicorn.service는 계속 다양한 exit-code로 Failed되고..이런 다양한 이유로 배포 수작업을 피할 수 있는 가장 간단

배경프로젝트 팀원이 로컬에서 작업하다가 깃헙에 올린 코드를 받아 다음 이슈를 작업하고 있었는데, 로컬에서 구동해보니 버전 오류 때문에 구동에 실패하게 되었다.알고보니 팀원의 파이썬 버전은 3.10.5, 나의 버전은 3.11.0 이였고, EC2 Ubuntu에 설치된 버전이 3.10.6이였기 때문에 서로 EC2에 맞게 버전을 바꾸기로 했다.시작당연히 파이썬 내에 명령어가 있을 거라 생각한 나는 웹서핑을 열심히 해보았으나, 돌아온 결론은 3.11.0을 삭제하고 3.10.6을 재설치해야한다는 것이였다.조금 귀찮아지긴 했으나 다시 작업해보았

django로 프로젝트할 때 CI/CD를 해보고 싶어서 미리 레포지토리 파서 테스트하던 중에 Github Acitons에서 제공하는 장고 .yml 파일에서 파이썬 버전만 바꿔서 실행했는데..🚨 FileFoundError : secrets.json🚨 FileNotFoundError: [Errno 2] No such file or directory: '/home/runner/work/django-github-action/django-github-action/secrets.json'.gitignore 에 넣어두고 로컬에서만 쓰던 se

req.body 인식해결 방안npm install body-parser 후const bodyParser = require('body-parser').json(); 추가app.post('/app/users', bodyParser, (req, res) … ) 로 변경Error: connect ETIMEDOUT해결 방안인바운드 규칙에서 3000번 포트 열어줘야한다!!참고 자료VS code SSH 연결https://velog.io/@ant-now/Vscode-SSH-로-AWS-바로-접속하기 VS code에서 원격접속을 하는데 src 폴더만

무한 로딩postman이 헛돈다..node.js와의 연결 문제는 아니고 mysql과의 connection query에서 문제가 생긴 것 같다..app.get("/api/test", (req, res) => { const {a} = req.query; res.send(`Hello ${a}`); });해결 방안Headers에 Content-Type, Content-Length 추가 및 수정참고 자료400 Bad Request이건 정말 부끄럽지만.. 이런 경우도 있다는 걸 보여드립니다...해결 방안console.log(result)

여러 가지를 경험하면서 겪었던 문제점과 해결 방법들이 노션에만 남겨져있는 게 아쉬워서 정리해보고자 합니다 !WinSCP에서 로그인 불가 해결 방안인스턴스, winscp, 키 페어 파일 전체 삭제 후 다시 진행 → 해결참고 자료index.php 연결/etc/nginx/sites-available/default 파일 수정 후에도 index.php로 연결되지 않음해결 방안ubuntu 22에서 php 기본 버전이 8.1로 설정되어 있어 파일에서 버전 수정도메인 연결 실패해결 방안https://alkhwa-113.tistory.com/ent

AWS Summit Seoul 2023 1일차 5월 3일(수) 코엑스Summit 후기도 늦었지만 벨로그 공사하면서 같이 적어봅니다 하하..AWS에서 보낸 Summit 관련 메일을 보고 아무것도 모른 상태로 냅다 등록하고 학교 수업 때문에 1일차 강연 2개만 듣고 아쉽게 터덜터덜 돌아왔지만 재밌는 경험이었습니다 !AWS 서비스 활용 성공 사례 및 신규 서비스 소개AWS Summit의 주요 목적이 위와 같은 만큼 AWS 서비스를 활용한 솔루션을 제공할 기업들의 홍보와 주요 기업의 AWS 적용 사례에 대해서 들을 수 있었습니다. 저는 다

NAVER DEVIEW CAMPUS 2023 2월 27일(월) 코엑스 벌써 5개월 전에 참여했던 행사지만 당시에 제출했던 보고서와 남아있는 기억을 더듬어 후기를 써보려고 합니다 히히 DEVIEW CAMPUS 2023은 다음과 같은 순서로 진행되었습니다.일단 시작하라! 행사가 끝난 지금까지도 DEVIEW CAMPUS 2023을 생각하면 기억나는 한마디입니다. 타임테이블 순서대로 차근차근 풀어보겠습니다.HR Talk Talk 행사의 시작은 HR 관련 사전 질문에 대한 답변으로 시작되었습니다. 네이버에서는 Office/Remote 근무

어느 날 메일을 보니 다음과 같은 메일이 있었다.바로 이전 포스팅에서 만든 서버에 문제가 생긴 것이다급하게 SSH를 연결해서 장고 로그를 확인했다.지운 IP들을 확인해보니 하나 빼고 모두 미국IP였고, 하나는 네덜란드IP였다.어딘가에 서버 링크를 올린 적은 없는데, 무작위 scan 공격을 받은 것으로 추정된다.특히나 로그 내역을 보면 phpMyAdmin나 mysqlmanager 등에 접근하려고 했던 내용들이 확인되는데, 아마 이러한 애플리케이션들의 알려진 취약점들을 활용해 공격하려던 것으로 생각된다.다행히 내가 별다른 설정을 하지

Naver Cloud Platform 사용은 확실히 익숙치 않았다.먼저, 흔히들 알고 있는 AWS의 EC2와 비슷할 것 같아서 시도 해봤는데, 첫 페이지에서부터 헤맸다.서버 생성내가 이해한 바에 따르면, EC2와 같은 서버 서비스는 콘솔>Compute>Server 에서 선택할 수 있다. 회원 가입시 제공한다고 하는 "Micro Server"는 사실 이 서버의 Classic 1세대에 해당하는 Micro-g1 서버로, 아래와 같이 소개되어 있다. 서버를 생성하려면 콘솔 > Services > Compute >

생성자(Constructor)인스턴스가 생성될 때 호출되는 인스턴스 초기화 메서드(인스턴스 초기화 = 인스턴스 변수 초기화); ;선언생성자를 선언할 때는 아래의 조건을 지켜야 한다.생성자의 이름은 클래스의 이름과 같아야 한다.생성자는 반환값이 없다.생성자도 메서드의 일종이므로 클래스 내에 선언해야 하며, 구조도 일반적인 메서드와 유사하다. 다만 항상 반환값이 없기 때문에 선언부에서 반환타입(void)을 생략할 수 있다.; 생성자도 오버로딩할 수 있을까?당연히 생성자도 메서드이기 때문에 오버로딩할 수 있다. 매개변수가 있는 생성자,

나 같은 개발 초보라면 비슷한 경험이 있을 수 있었으리라 생각한다.첫 개발하던 프로젝트에서는 AWS IAM 개인키를 실수로 깃허브에 올려 이런 무서운 메일도 받아봤다..이 때의 대참사 이후 깃허브에 업로드하는 내용을 꽤 조심하고 있다고 생각하며 사용했지만, 최근 멋쟁이사자처럼에 지원하려고 깃허브를 돌아보다가 이상한 점을 발견했다.내가 운영 중인 서비스의 깃 리포의 유저DB에 유저 데이터가 전부 공개 되고 있었던 것...gitignore 에 추가 했어야 했는데 까먹은 것 같다..문제는 이제 와서 지우고 커밋하기에는 이미 리포 히스토리

AWS를 활용해 EC2로 서비스를 열었다면, 이제 자신만의 서버를 활용할 수 있게 된 것이다.하지만 서버를 만들어서 기쁜 것도 잠시, 접속을 할 방법을 모르겠다면?흔히 Headless 서버를 제어할 때 SSH 연결을 통해 원격으로 이용하곤 한다.이 시리즈에서는 SSH 연결을 할 때 흔히 발생하는 오류를 짚고 넘어가려고 한다.이 글 시리즈의 내용은 공식 트러블슈팅 문서를 참고해서 작성되었음.자세한 내용을 확인하려면 위 문서를 확인하세요!.pem 파일 permissionec2-user@XXX.XXX.XXX.XXX: Permission

EC2를 처음 사용하게 되었을 때 당황스러울 수 있는 일인 것 같다.문제:EC2 인스턴스를 처음 만들고 git clone을 하려고npm install git을 입력했는데$ bash: npm : command not found 을 받아 황당했었다. 사실 생각해보면 그도 그럴 것이 AWS EC2 입장에서는 사용자가 어떤 코드로 서버를 구현할지도 모르는데 모든 프레임워크를 설치해두는 것이 매우 비효율적일 것이다.문제는 node를 설치하기 위해 nvm을 설치하려고 했는데sudo apt-get install npm을 해도,$ sudo: ap

Link: https://caunotify.meCAUnotify.me 는 내가 처음으로 개발해본 웹 프로젝트이다.중앙대학교 서울캠퍼스 교내 48개의 게시판을 주기적으로(30분에 한번) 크롤링하여 과거 데이터와 대조해 변화가 있는지 알아내고, 변화가 있었다면 해당 게시판을 구독한 유저들만을 골라내어 이메일을 전송하는 서비스이다.대략적인 구조는 다음과 같다.유저가 CAUnotify.me 웹사이트를 통해 자신의 이름, 이메일 그리고 구독할 게시판을 html form에 입력하여 submit한다(HTTP POST).해당 정보를 받은 서버는

사실 난 어렸을 때부터 공학을 하고 싶었다. 어쩌다 문과생으로 몇 번의 수능을 거쳐 문과가 갈 수 있는 가장 '이과스러운' 학과인, 중앙대학교 산업보안학과에 20학번으로 입학했었다.군대를 다녀오고 22학번들과 수업을 들으며 느낀 것은, 학과 공부만으로는 절대로 공학에 발을 들일 수 없겠다는 것이였다.학과 커리큘럼상 내가 원하는 과목만 듣기에는 과목이 턱없이 부족했고, 그나마 공학에 관련 과목은 내용이 허술하거나 생략되는 경우가 많아서 구글링으로 독학하게 되었다.이렇게 전과를 결심하게 되었다.학과에 따라 다르지만, 중앙대학교에서 전과