안녕하세요! 오늘은 Nginx 웹서버를 도커 컴포즈를 이용하여 세팅하고, Certbot 을 이용해서 HTTPS 인증서를 연결하는 과정까지 포스팅해보겠습니다. 해당 과정은 저의 개인 프로젝트에 적용했던 경험을 바탕으로 작성했습니다. 해당 프로젝트 레포 https://github.com/wil953742/study-mbti GitHub - wil953742/study-mbti: 나에게 꼭 맞는 공부 유형은? 나에게 꼭 맞는 공부 유형은? Contribute to wil953742/study-mbti development by creating an account on GitHub. github.com 왜 도커를 사용했나? 크레딧의 한계 때문에 클라우드 서비스를 이리저리 옮겨 다닐 것 같다는 생각이 들어서 (아..

안녕하세요! 이번 시간 부터는 HTTP 완벽 가이드를 같이 읽어보는 영상을 찍을까 합니다. 혹시라도 잘 못된 설명이 있으면 댓글로 알려주시면 감사하겠습니다 :) https://www.youtube.com/watch?v=F8fFs9hHEJU

안녕하세요! 오늘은 해시, 해시함수, 해시테이블 개념을 정리해서 촬영해봤습니다. 부족한 개념이 있으면 댓글로 알려주시면 감사하겠습니다! https://youtu.be/xr8zxBZPX2o 주요 내용 해시 함수와 테이블의 기본 개념 충돌 방지 방법 해시 테이블의 성능 해시 함수의 보안상의 쓰임

브라우저 라우팅 구현하기 리액트를 사용하지 않고, 타입스크립트로 코드를 구현하면서 라우팅 역시 직접 구현해야 한다는 것을 깨달았습니다. 라우팅은 어떤 작업일까? 라는 고민을 하게 됐고 제가 생각한 기능은 다음 두 가지 입니다. path 값에 해당하는 page가 렌더링 되야 한다. path 값의 흐름이 저장되어 있어서, 뒤로가기나 앞으로가기가 가능해야 한다. 제가 생각한 라우팅은 다음과 같습니다. 라우팅을 하는 path 값을 상태(state)로서 관리하는 것입니다. 그리고 실제 URL path 값을 state 와 일치 시키도록 history API를 적용하였습니다. 실행 로직 path 상태 값은 앞 포스팅에서 구현했던, 전역 store에서 관리합니다. 가장 상위 컴포넌트에서 path 상태값에 따라 moun..

FLUX 패턴 적용하기 부스트캠프에서 Redux 의 구조를 공부하다가, FLUX 패턴을 직접 구현한 글을 보게 되었습니다. 이미 유명한 황준일 개발자님의 글이었습니다. [ 참고 링크 ] 글을 읽고 나서 해당 구조를 이해하고 벤치마킹 해보고 싶었습니다. 먼저, FLUX 패턴을 이해하기 위해 공식 문서를 참고했습니다. Action 액션은 데이터의 상태를 변경하라고 명령하는 함수입니다. 액션 생성자는 새로 발생한 액션의 타입과 데이터 페이로드를 액션 메시지로 묶어 디스패쳐로 전달합니다. Action을 이용하여 명령을 하기만 하면, View 입장에서는 Store 내부의 구조를 몰라도 State를 변경할 수 있습니다. Dispatcher 디스패쳐는 액션 메시지를 감지하는 순간 그것을 각 스토어에 전달합니다. 전달..

! 이 글은 제가 너무 애청하는 유투브 "코딩앙마" 채널의 TypeScript 강좌를 정리한 글입니다. 코딩앙마님 유투브 강의 바로가기 Type Script 기초 유투브 코딩앙마님 강의 정리 by 웅 [1, 2강] 타입스크립트의 기본 타입 let age:number = 30; let isAdult:boolean = true; let a:number[] = [1,2,3]; let b:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; week1.push('ja') 리스트 타입은 위와 같이 string[ ] , Array 이렇게 두 가지 정의 방법이 있다. 튜플 : 리스트인데, ..

React에서 Custom Select 구현하기 👋 문제 제기 💡 React에서 Custom Select Component 구현 시 on/off state 관리, Position 설정, 클릭 및 스크롤 이벤트 관리를 어떻게 할 것인가? Custom Select 를 만들기로 결심한 계기 토글 예시 Select tag는 CSS 를 적용하는 것이 어렵습니다. 기본적은 Select tag는 브라우저 마다 다른 디자인을 보이며 특히 option 부분에는 CSS 를 적용하기 위해서 특별한 Plugin을 사용해야 합니다. 물론, 모바일의 경우에는 내장되어 있는 Select의 기능을 지원 받을 수 있지만, 저는 기능적인 이점 보다 디자인적인 통일감을 주고 싶었습니다. 때문에, 위와 같이 직접 디자인하고 같은 기능을 갖..

반응형 UI 👋 문제 제기 💡 사용자 마다 사용하는 모니터의 크기가 다를텐데, 어떻게 UI 디자인을 할 것인가? 💡 모바일로 접속하는 사용자도 있을텐데, 어떻게 모바일 화면을 고려할 것인가? 👀 바쁘신 분들을 위한 세줄 요약 1. UI가 비슷한 사이트들을 분석 후, 1300px, 1024px, 768px 이라는 기준 값을 설정했습니다. 2. 기준 값들에 따라서 다른 UI 가 적용되도록 CSS를 설정했습니다. ( %, 미디어쿼리 사용 ) 3. 작은 UI 부터 설계해야 한다는 점과 display, position, width, height 등의 CSS 속성을 정확히 알고 있어야 한다는 점, 그리고 모바일과 PC 에서 말하는 좋은 UI의 기준이 다르다는 것을 깨닫게 되었습니다. ✏ 탐구 과정 먼저, 비슷한 U..

2021년 12월 6일, 2021년 나의 최대 도전이었던 부스트캠프가 끝이 났다. 취업 전쟁은 이제 시작이지만... 그래도 나 고생많았다!!! 사실 나에게는 부스트캠프가 인생을 바꿨다고 해도 과언이 아니다. 나는 CS가 아닌 다른 과를 전공했고, 4학년 때 경험 삼아했던 인턴이 운좋게 정규직 전환되었다. 누구나 아는 대기업이었고 지금까지 들어보지 못했던 고액의 연봉이었다. 그런데 마음 한 편으로는 계속 이런 생각이 들었다. "이게 내가 정말 하고 싶은 일 일까?" 4학년 때, 빅데이터 열풍이 불면서 나는 데이터 관련 교육을 수강하고 자격증을 땄다. 그 과정에서 컴과 3학년 수업인 데이터베이스 수업을 듣게 됐는데, 처음으로 "웹 개발" 이라는 것을 경험했다. 물론, 과제하느라 눈물을 30번 정도 흘렸다. ..

SQL 문제가 한 문제 출제 됐는데, 이전 출제 문항 정도의 난이도를 생각했다가 크게 데였다... 결국 풀긴했지만 서브쿼리를 거대하게 작성해서 좋은 코드는 아닌 것 같다. 서브 쿼리문 연습이 필요한 것 같다. 유명한 알고리즘을 사용하는 문제가 하나도 나오지 않고, 다 구현문제였다... 나름 자신있다고 생각했는데, 가장 골머리 썩었던 점을 적어보고자 한다. 파이썬에서 내가 원하는 결과가 안나오는 경우 indentation을 한 번 정도는 의심해 보자... 이번에 인덴테이션을 실수로 잘못 맞췄더니 while 문에서 돌아가야할 코드가 외부에서 돌아가는 버그가 있었다. 디버깅 하는데 거의 10분 이상을 소요한 것 같다. 문제가 길어도 문제의 요구 조건을 분명하게 읽어보자. 예시로 문제를 파악하는 것은 좋지만 예..