하나씩 배워나가는 개발일지

대부분의 백엔드 개발자가 갖춰야 할 기본 스킬 중 하나가 Nginx다. 하지만 프론트엔드 개발자도 백엔드 개발자와의 원활한 협업을 위해서는 Nginx에 대한 기본 개념을 어느정도 알고있어야 한다고 생각이 들어서 Nginx에 대해 공부해보고자 한다. [ Nginx 공부 전 알아야 할 CS ]클라이언트서비스를 이용하기 위해 네트워크를 통해 요청을 보내는 주체웹 개발 영역에서 보통 클라이언트라 하면 크롬, 사파리, 익스플로러 등 웹 브라우저를 의미 웹 서버클라이언트의 요청에 따라 HTML, CSS, JS, 이미지 파일과 같은 정적 파일을 응답하여 제공하는 소프트웨어HTTP 프로토콜을 사용해 클라이언트와 통신대표 : Nginx, Apache 등 WAS클라이언트 요청에 대해 동적인 처리를 담당하는 영역웹 서버와 ..

[타입스크립트] 맵드 타입타입스크립트의 고급 타입인 맵드 타입(mapped type)이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 기능을 말한다. 예를 들어 인터페이스에 있는 모든 속성을 루프문 같이 순회해서 optional(?) 로 바꾸거나 readonly 로 지정할수 있으며 아예 지정된 타입을 바꿔서 변경된 타입을 반환할 수도 있다.   아직 맵드 타입에 대해 문법을 배우지는 않았지만 간단하게 살펴보자면 다음과 같다.interface Obj { prop1: string; prop2: string;}type ChangeType = { [K in keyof T]: number;};type Result = ChangeType;/*{ prop1: number; prop2: nu..

[타입스크립트] 조건부 타입조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정하는 기능을 말한다.위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데 보자마자 삼항 연산자가 생각 났을 것이다.유추한 바와 같이 자바스크립트의 삼항 연산자는 변수의 값을 조건에 따라 결정하는 것이라면, 타입스크립트의 조건부 타입은 값 대신 타입을 조건에 따라 결정하는 것이라고 보면 된다. 위의 조건부 타입 코드 문법을 풀이해보자면 타입은 T가 U에 할당될 수 있으면 타입은 X가 되고 그렇지 않다면 타입이 Y가 된다는 것을 의미한다.착각하지 말아야 할점은 조건부 타입도 유니온처럼 하나의 타입이라는 것이다.extends 키워드가 들어가서 제네릭 꺾쇠 괄호  안에 써..

[타입스크립트] 유틸리티 타입TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.예를 들어 JS에서 배열을 다룰 때 for, while문이면 충분하겠지만 따로 forEach문이나 배열 생성하는 map, 배열요소를 찾는 find나 filter와 같이 배열을 다루는데 편리하게 이용가능한 루프 헬퍼 함수를 지원하듯이, 타입스크립트에서도 타입 변경을 쉽고 용이하게 하기위해 헬퍼함수처럼 Utility Type을 제공한다고 생각하면 된다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입 변환이 가능하지만 유틸리티 타입을 사용하면 훨씬 더 간결한 문법으로 타입 정의가 가능할 뿐 아니라 이미 정의한 타입을 변환할 때 유용하게 쓸 수 있다..

도커(Docker)란?리눅스 컨테이너에 리눅스 어플리케이션을 프로세스 격리기술을 사용해 쉽게 컨테이너로 실행, 관리할 수 있게 해주는 오픈소스 프로젝트.도커는 일반적으로 도커 엔진(Docker Engine) 혹은 도커에 관련된 모드 프로젝트를 말한다. 도커 엔진(Docker Engine)은 컨테이너를 생성하고 관리하는 주체로서, 자체로도 컨테이너를 제어할 수 있고 다양한 기능을 제공해준다.도커의 생태계에 있는 여러 프로젝트들은 도커 엔진을 좀 더 효율적으로 사용하기 위한 것에 불과하기 때문에, 도커의 핵심은 도커 엔진이라고 할 수 있다.  Vitrual Machine(가상 머신) vs Docker Container(도커 컨테이너) 가상 머신(Virtual Machine) 가상 머신은 하이퍼바이저를 이용해..

바쁜 취준을 이어가던 도중 구름톤 12기 해커톤 공고가 올라와서 지원했다. 구름톤이란? 구름톤은 카카오와 구름이 주최하는 제주에서 약 3박 4일동안 이루어지는 해커톤이다.  구름톤 in JEJUkakao x goorm 제주에서 펼쳐지는 해커톤9oormthon.goorm.io 오직 지원서 하나로 참가자를 선발하며, 포지션(기획자, 프론트엔드 개발자, 백엔드 개발자, 디자이너)을 선택하고 주어진 공통 질문에 답변해야 한다. 나는 프론트엔드 개발자로 지원했고, 이번 12기 질문은 다음과 같았다. 1. 구름톤 참여 동기 (300자) 2. 제주도가 직면한 사회문제는 무엇이라고 생각하나요? (300자) 3. 해당 문제를 해결하기 위한 서비스 아이디어 (500자) 4. 팀원과의 협업을 이끌어 나갈 나만의 장점 (30..

지난 번 SOPT 에 떨어지고 난 후, 사이드 프로젝트를 2개 정도 진행하면서 다른 IT 연합동아리도 알아보았다. 대외활동 1 - 2024 관광데이터 활용 공모전 참가우선 4월 말, 같은 학교 졸업유예 친구들 및 4학년 학생들과 한국관광공사 x Kakao 에서 주최한 '2024 관광데이터 활용 공모전' 에 참가하기로 했다. 아이디에이션 과정을 거쳐, '여행기와 여행 OOTD를 공유하는 블로그, 트리피' 라는 웹어플리케이션을 개발하기로 결정했다.우리는 여행 관련 정보를 제공하기 위해 TourAPI 와 공공데이터를 활용할 계획이고 나는 이 프로젝트에서 프론트엔드 팀장 역할을 맡았다. 우선 개발하기 전, 제안서 작성을 파트별로 나눠 진행하며 제안배경 및 필요성, 서비스 설명, 공공데이터 활용 방안, 서비스 차..

웹 부트캠프를 끝마치고 코딩테스트와 사이드 프로젝트를 진행하면서 어딘가에 소속되어 있지 않은 것이 자꾸 불안함을 만들었다.제대로된 프로젝트를 더 해보고싶은 마음에 IT 연합 동아리 SOPT의 YB 34기에 지원했지만, 아쉽게도 면접에서 탈락하게 되었다. 면접에서 떨어졌기에 후기를 쓸지 말지 고민했지만 다음 기수에 SOPT 를 지원할 다른 개발자 분들에게 조금이나마 도움이 되었으면 하는 마음과 복기를 통해 스스로 성장하고자 하는 마음으로 서류 및 면접 후기를 남기려 한다. SOPT는 대학생 연합 IT 벤처 창업 동아리로 국내 최대 규모의 대학생 IT 연합 동아리이다.그만큼 경쟁률도 높고 서류합격도 힘들다고 들어서 이번 기수에서 중요하게 생각하는 핵심 가치를 기준으로 자소서를 작성하기로 했다. 이번 기수의 ..

STO 조각투자 큐레이션 플랫폼 개발중에 있는데, 리프레시 토큰 관련해서 발생했던 오류 사항과 이를 해결한 방법을 정리하고자 한다.  우선 우리 프로젝트에서는 리프레시토큰을 다음과 같이 로그인을 하면 헤더의 Set-Cookie 를 통해 넘겨준다. 이렇게 넘겨받은 값은 로그인한 즉시, 쿠키탭에서 확인이 가능한데 왜인지 모르게 새로고침을 한 번 하고나면 그 토큰 값이 쿠키탭에서 사라졌다. 구글링을 정말 많이했는데 왜 사라지는지 관련해서 잘 찾을 수가 없었다. 저 상태에서 어세스토큰이 만료됐을 때, axios 인터셉터를 통해 리프레시토큰을 요청하면 사진처럼 리프레시토큰 호출 api가 계속해서 오류가 났다.401 에러가 뜬 이유는 내가 아래사진처럼 리프레시 토큰 요청을 잘못보내고 있었다. 내가 지정한 axios..

STO 조각투자 큐레이션 플랫폼을 개발하면서 주요 상품 현황에서 데이터들을 보여주고 있는데, 캐시된 데이터로 인해 북마크 상태가 반영이 제대로 안되는 문제를 해결한 경험을 적어보려 한다.   위 사진을 보면, 처음에 탭을 누를 때 API를 호출하고 한 번 호출을 하면 캐시된 데이터를 보여줘서 불필요한 API 호출을 방지해서 서버 호출 낭비를 최적화하였다. 전체 탭에는 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 카테고리 중 하나의 카테고리가 나오게 되는데, 문제는 북마크를 추가했을 때 해당 데이터가 속한 특정 카테고리의 캐시만 무효화해야 하는데 그렇지 못해서 상태가 제대로 반영되지 않았다. 예로 전체 탭에 사진과 같이 음악저작권 데이터가 호출된 상태라고 가정해보면, 전체탭에서 데이터를 북마크..