취득 배경 이번 상반기에 회사를 다니며 어떤걸 해볼까? 하다 자격증 취득에 관심이 생겨 SQLD 와 정보처리기사를 취득해보게 되었다. 두 자격증 다 운이 좋게도 한번에 취득을 했고, 사실 공부한 노력과 시간에 비례하여 쉽게 취득을 한 것 같다. 하지만 해당 자격증들은 조금 호불호가 있는 자격증들이다. 특히나 정보처리기사 같은 경우에는 엥 컴공생이 정보처리기사를 왜 따? 라는 말이 있을정도로 인기 및 필요가 없다는 인식이 꽤나 있는 자격증이다. 그럼 내가 왜 해당 자격증을 따게 되었을까? 우선 SQLD 같은 경우에는, 내가 Database 과목에 취약하다는 생각이 들어서 공부하게 되었다. 내가 프론트엔드 공부를 ... Read More

굵기가 있는 div 만들기 요즘 kinetic animation 이 대세이다. 대충 이러한 [SAMSUNG AI] 애니메이션들이라 볼 수 있다. 위와 같은 애니메이션은 사실 그렇게 어렵지 않게 캔버스 없이도 웹으로 구현이 가능하다. 아주 동일하지는 않지만, bezier curve를 대충 그린다면 이렇게 구현을 할 수 있다. 하지만 만약 3D animation 이라면 이야기가 조금 달라진다. LG 로고의 예시를 봐보자. 눈도 반짝 입도 활짝, 저 뭐 달라진거 없나요? 해당 영상을 보면 로고가 다채롭게 움직이는걸 볼 수 있다. 물론 해당 이미지는 canvas 를 활용하면 손쉽게 3D animation 으로 구... Read More

배경 내 정보를 보여주는 웹사이트를 대충 만든지 8개월이 지났다. 가끔 자격증을 따거나 업데이트 소식이 있을 때 사용했었는데, 오랜만에 들어가서 보니 light house 점수가 말이 아니였다. 여유로운 주말에 점수나 올려보자 시작된 웹 개선기. 수정 사항 처음에 모바일도 고려해서 만들었기에, CLS 같은 류는 점수가 그렇게 낮지는 않았다. 그래서 우선 light house를 한번 돌려본 후 알려주는 수정사항만 추가해보았다. Sufficient Contrast Ratio 글을 배경에 비해서 contrast 가 존재해야 되는데, 흰 배경에 회식글을 작성해서 생긴 문제였다. 디자이너가 없는 사이트였기에, 나... Read More

서론 github action 의 starter workflows는 github의 기본적으로 page를 deploy 할 시 등 가장 기본적으로 사용되는 workflow이다. 아마 많은 FE 개발자 혹은 github pages를 통하여 블로그를 만드시는 분들은 많이들 사용해 봤을 것이라 생각된다. 보통 이러한 workflow는 보통, github deploy 페이지에서 GUI로 선행되어 repository 까지 갈 일이 보통 없다. 그런데, 꽤나 예전에 평소처럼 github page에서 Next.js deploy를 하였는데 문제가 생겼던 경험이 있다. 해당 문제를 타고보니 starter-workflows 에서 최... Read More

문제 확인 최근 운영하고 있던 서버 중 하나에 정말 큰 문제가 생겼다. 갑자기 모든 화면이 보이지 않는다는것. 현재 DB를 Firebase를 쓰고 있었는데, 혹시나 firebase DB를 너무 많이 써서 초기화를 시켜버리거나 하지는 않았을까? 백업을 안한지 오래됐는데 혹시 파일이 날라가면 어떡하지 두근두근 거리며 확인을 했더니 데이터는 다행히 살아있었고, 즉 firebase 문제는 아니였다. 모든 데이터가 보이지 않고, 작성/수정/삭제 등 모든 기능이 정지되었다. 흠,, 그렇게 되면 사실 데이터를 가져오는 곳에서 문제가 생겼다는 것이고 높은 확률로 fetch 부분이였기에 그부분을 자세히 살펴보았다. 그러던 중... Read More

SQL 함수 알아보기 평소에 SELECT, INSERT, ALTER, CREATE 등 일반적인 DML, DDL문법만 사용하였는데 일을 하면서 다양한 문법들을 마주하고 공부하고 필요함이 느껴져 조금이나마 정리를 해보자고 한다 COALESCE NULl이 아닌 첫번째 값을 반환하는 함수 행을 보고 COALESCE(col1, col2, col3) 이라면, 차례대로 col1, col2, col3 값을 보며 제일 먼저 null이 아닌 값을 반환하게 된다. 마지막 값에 static한 값을 넣어두면, NVL과 비슷한 형태로 사용할 수 있다. ROLLUP 합계를 쉽게 사용하기 위해 사용 GROUP... Read More

객체지향의 사실과 오해 약 2년전에 사두고 시간이 없다는 핑계로 읽지 않았던 책을 이제야 읽게 되어 남기는 후기. (AKA 토끼책) 워낙 유명한 책인탓에, 내용을 정리하거나 분석해놓은 글은 정말 많기에, 읽으면서 느꼈던 나의 생각과 후기를 정리해보려고 한다. 책에 관하여 이 책에서는 역할, 책임, 협력 그리고 객체의 자율성에 대한 개념을 끊임없이 강조하고 객체지향에 대해서 굉장히 추상적으로 정리한다. 객체란 클래스와 동의어가 아니며, 실세계와 일치시키려는 노력을 버리고 객체지향은 이런거야!를 설명한다. 이는, 전공생 기준 1학년 때 배우는 객체지향의 설명의 잘못된 점을 지적하고 개념을 새로이 정립하려는 의... Read More

메모리란 우선 간단하게 메모리 관리에 대한 이야기를 해보자. 메모리란 개념은 컴퓨터 공학을 처음 배울 때 부터 배우기 시작하여 끝도 없이 공부하며, 아직까지도 많은 프로그래머들을 괴롭힌다. C언어 같은 언어는 allocation 함수들(malloc(), calloc() 등)을 활용하여 동적으로 메모리를 사용하고 free()함수를 활용하여 메모리를 해제한다. 하지만, JS 혹은 Java같은 언어는 runtime에 객체가 생성 시 자동으로 메모리를 할당하고 필요하지 않을 때 해제하게 된다. 여기서 필요하지 않을 때의 시점이 컴퓨터가 판단하기에, 개발자가 메모리 관리에 대한 고민을 할 필요는 없지만 오히려 관리를 하... Read More

되게 바빴지만, 동시에 여유로웠던 한해였다. 작년이나 재작년처럼 열심히 개발 역량을 키우기 위해 달리기 보다 다른 업무나 일을 보기위해 바빴던 것 같다. 상반기 토스에서 일해보았다. Interaction Team에 UX Engineer Assistant로 6개월 근무를 하였는데, 정말 많은 경험을 해보며 재미있었던 기간이였다. 단순히 React만 적당히 끄적일 수 있고, 딱 컴퓨터 전공자만큼의 지식을 알고있던 무지한 상태에서 나름 실무적인 경험을 해보며 다양한 경험들을 할 수 있었다. 물론, 처음에는 나의 기술을 통해 돈을 보넌 행위를 함에 부담도 많이 됐다. 내가 돈을 받고 일을 하는데, 나 때문에 일을 ... Read More

배경 firebase를 활용해서 개인 프로젝트를 잘 하고 있었는데, 문득 백업이 하고싶어졌다. google이 갑자기 내 data를 날려버리거나 하지는 않겠지만 내가 실수로 table을 날렸을 경우 복구도 되지 않을 것 같고 (가뜩이나 무료 버전을 쓰고 있기에) 점점 traffic이 올라감에 한번은 백업이 필요하다 생각이 들었다. Firebase 둘러보기 솔직히 firebase에 backup 혹은 export 기능이 없을리가 없다 당연히 있다..! 하지만 아니나 다를까 결제 정보를 입력하고 돈을 내야 가능하는것 처럼 보인다. (사실 GCP와 연결하는것 같아 당연히 결제 정보가 필요한것이고 실제로 ... Read More

발단 요새 메이플이란 게임에 빠져있었다. 그리고 이 게임에는 재획 이라는 시스템이 존재한다. 일반적으로 사냥을 하는 컨텐츠이지만 이 사냥을 많이 하다보면 게임 화면을 보지 않고도 컨텐츠를 즐길 수 있는 경지에 오르게 된다. 보통 이러한 경지를 뇌빼기(대충 뇌 빼고도 사냥한다는…) 라고도 하는데, 여기서 메이플의 서브 컨텐츠인 딴거하기를 즐길 수 있다. 보통 이 딴거하기 단계에서는 넷플릭스나 유튜브등 동영상 컨텐츠를 많이 즐기게 된다. 그러던 중 메이플 커뮤니티에서 웹툰을 보는 방법이 올라왔다. 사진에 보이듯, f12를 눌러.. 개발자 도구에 들어가.. javascript를 입력해.. 조절을 이렇게… 아마 개발을... Read More

걸어서 제주도 한바퀴 계획 처음에는 국토대장정이였다. 인천에서 출발하여 부산까지 걸어서 가는 20박 21일의 여정을 생각했었다. 하지만, 일정상 너무 길고 날씨또한 7월의 무더움을 견뎌내기 힘들것 같아 제주도로 방향을 틀고 계획을 잡았다. 계획은 3월에 비행기를 예매하여 시작되었다. 원래 다니던 회사의 계약기간만료가 6월30일이였기에, 퇴사 후 바로 비행기를 타고 제주도에서 8박9일동안 제주도 한바퀴를 걷기로 친구와 약속을 하고 그 뒤에 일정은 아무것도 고려하지 않았다. (숙소 예약은 그날 컨디션에 따라 조절해야될 것 같아 첫날을 공항근처에서 예약해두고 나머지는 예약도 안하고 출발) 여행을 시작하기전 여러 ... Read More

마음의 법칙 사람의 마음은 어떻게 작동하는 것일까? 책을 읽다보면 공통적으로 언급되는 주제가 있다. 자신의 인생의 통제권을 회복하여야 한다 여기서 말하는 인생의 통제권이란 어떤걸 말하는걸까? Overview 책은 우리가 평소에 어떠한 문제를 가지고 살아가며 해당 문제를 심리학적으로 분석을 해준다. 그리고 문제에 대한 자세한 해결법을 제시해줄 때도 있고, 문제만 언급하고 다음 주제로 넘어갈 때가 있다. 관련해서 예전에 정형돈이 토크쇼에 나와서 이런 이야기를 한 이야기가 기억이 났다. “대학생이 성공의 기준이 무엇인지에 대해 질문을 한적이 있다. 개그맨을 꿈꾼다면 조언을 해줄 수 있... Read More

1분기 2022년 1분기에는 딱히 많은 일들이 없었다. 소프트웨어 마에스트로에 합격하고싶어 계속 코딩테스트준비와 면접 준비를 했었다. 하지만, 이미 벌려놓은 일들이 꽤나 있어 여러가지를 병행하며 준비를 했었다. 우선, 42서울에서 블랙홀에 빠지지 않기위해 꾸준히 과제를 하며, 42서울 사람들과 웹 게임을 만드는 프로젝트를 하기로해서 그것도 병행해야 했다. 결국, 주로 낮에 프로젝트를 하고, 오후 11시에 매일 알고리즘 스터디를 하며 준비를 하고, 코딩테스트를 2차까지 붙고 난 후 면접 스터디를 하며 준비했다. 심지어 3월에는 학교까지 다녔어야 돼서 정말 바빴던것 같다. 부트캠프치고 정말 준비 기간이 ... Read More

네트워크 공부를 시작하게 된 계기 네트워크 공부를 시작한 계기는 생각보다 단순했다. 소프트웨어 마에스트로 과정에서, 우리는 화면공유 기반의 화상채팅 웹 어플리케이션을 제작하였는데, 아무래도 RTC 기반의 작업을 하다보니 네트워크가 필수적이였다. 문제는 내가 네트워크에 대한 지식이 너무 부족하여 항상 아쉬움을 느끼게 되었고, 네트워크 공부를 시작하게 되었다. 사실 9월달부터 시작하려고 크로우즈 교수님이 집필하신 네트워크 하향식 접근 책을 구매했지만, 너무 바빠 볼 시간이 없었고 11월 중순부터 제대로 시작하게 되었다. 11월에 Network 공부의 시작을 알리는 Commit 네트워크 스터디 원래 ... Read More

1일 1커밋에 대한 개인적인 생각 주관적인 생각 듬뿍 담겼음에 주의 1일 1커밋이란? 말 그대로 하루에 하루에 커밋 한개를 한다는 뜻으로, 매일 코딩하는 습관을 들이자는 것이다. 한국어로 1일 1커밋 이라는 단어는, 2015년에 아웃사이더님의 블로그로 시작된것으로 보인다. 블로그 작성 기준 92 streak으로, 나도 열심히 진행중이다! 왜 1일 1커밋인가 아웃사이더님의 1일 1커밋에 대한 블로그를 읽고 있으면, John Resig의 Writce Code Everyday 라는 글로 가게 된다. 이 글에 1일 1커밋을 주장하는 바는 다음과 같다. a week between working o... Read More

오픈소스 컨트리뷰터가 되어보자 항상 오픈소스 컨트리뷰터가 되어보는것이 꿈이였던 나… 괜찮은 Repository 찾기 깃허브의 망령처럼 돌아다니다 깃허브를 꾸며주는 레포지토리중 하나를 찾게되었다. 기능도 단순하고 이쁜 뱃지를 제공하는 레포였는데 나의 눈에 띈 것은 바로 번역률! 한국어가 67% 밖에 번역이 되어 있지 않았다. 실제로 그렇게 많은 번역이 필요로 하는 기능은 아니였지만, 최근 업데이트되며 번역해야될 항목이 늘어나 대부분의 언어가 67%에 머물러 있어보였던 것 같다. 그래서 어떤 부분이 필요한지 확인을 해 보았는데… 두줄만 번역을 해주면 됐다..! 해보자!! Issue / Chore ... Read More

Command Pattern 커맨드 패턴에 대하여 알아봅시다 간단한 게임을 하나 제작할 예정입니다. 이번 게임에서는 두가지 버튼만 활용할 예정이고, 버튼들은 alt 와 ctrl 만 사용할 예정이기에, alt에는 jump ctrl 에는 attack 이라는 함수를 매핑을 했습니다. 사실 이정도의 게임이라면 문제가 없습니다. 하지만 키보드 세팅이 복잡한 게임이라면 어떻게 될까요? 그럼 키 마다 세팅을 할 것입니다. 그리고 모든 키 매핑이 character에 관한 것도 아니고, esc는 게임 세팅창을 여는 등 다양한 action이 이루어 질 것입니다. 여기서 더 복잡한 상황을 생각해 보겠습니다. 위... Read More

React Hook 구현해보기 클로저 클로저의 개념 Hook 을 구현하기 앞서 Closure에 대한 개념을 알고 가야된다. 클로저는 자바스크립트 처음 등장한 것은 아니며 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN 공식문서를 읽어 보면 다음과 같다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you... Read More

개요 Finite-state_machine 참고 모든 주어진 순간에 프로그램이 속해 있을 수 있는 상태들의 수는 유한하며, 어떤 고유한 상태 내에서든 프로그램은 다르게 행동하고 한 상태에서 다른 상태로 즉시 전환될 수 있다. 현재의 상태에 따라 프로그램은 특정 다른 상태로 전환되거나 전환되지 않을 수 있으며, 이러한 전환 규칙들을 전환들(transitions)​이라고도 하고, 이러한 규칙들 또한 유한하고 미리 결정되어 있다. 단순한 상태 머신의 단점은 코드를 보면 바로 이해할 수 있다. class Document is field state: string // … metho... Read More

FIRE는 이렇게 협업했다 FIRE팀이 모도코를 개발한지 어느새 7개월이 넘었다. 소프트웨어 마에스트로과정도 이제 끝이 보이고 (글쓴 기준 25일정도 남았다) 우리가 어떻게 작업했었는지 정리할겸 작성해보았다. 팀 구성 팀 구성은 나(팀장이자 FE) 외 두명(FE, BE)로 이루어졌다. 팀은 모으는것도 정말 쉽지 않은 길이였다. 소프트웨어 마에스트로 과정이 아무래도 고등학생부터 대학교 졸업자까지 아우르는 활동이기에 나에게 딱 맞는 사람을 모으고 싶었다. 우선 소프트웨어 마에스트로에 100% 진심을 다해서 진행할 사람. 물론, 창업을 염두에 두고 한 말은 아니였고, 그냥 11월까지 정말 알차게 공부 및 개발 할 ... Read More

왜 중개자 패턴? 객체 간의 혼란스러운 의존 관계들을 줄일 수 있는 행동 디자인 패턴 즉 중개자 패턴은 객체 간의 직접 통신을 제한하고 중재자 객체를 통해서만 협력할 수 있게 설정 간단한 로그인 Form을 만든다고 구현을 해보자 Guest를 누르면 Username과 Password가 막히고, Login을 누르면 Username이 활성화 되고, Username에 입력이 오면 Password가 활성화 되고, Password의 입력이 되면 OK가 활성화 된다. 생각나는대로 구현을 해보면 다음과 유사하다. 하지만 이렇게 되면 Guest 인지 Login인지에 따라 어떤 TextField를... Read More

APM 으로 오류 분석 및 해결을 해보자 문제 시점 우리 서비스에는 new-relic 이라는 APM이 연동되어 있다. 하지만 사용법이 너무 복잡하고 어려워서 잘 사용하고 있지는 않고 있는데, 마침 쓸 상황이 왔다. 친구랑 같이 사용중이였는데, 친구의 어플리케이션이 사파리에 접속하자마자 튕겼다는것! 하지만 콘솔창을 열어보지 않아서 어디가 문제인지 확인을 할 수 없는 상황이였다. 연동한 APM을 활용하여 오류를 고쳐보도록 하자! 문제 분석 우선 new relic의 browser -> 내가 보려는 Application으로 들어가자 다음 JS errors에서 어떠한 오류들이 났는지 확인해보자 ... Read More

방문자 패턴 데이터 구조는 많은 요소가 저장되어 있고, 각 요소에 대해 어떻게 처리가 필요한 경우를 생각해보자. 처리에 대한 코드는 어디에 있어야 될까? 일반적으로 데이터 구조를 표지하는 클래스에 기술하겠지만, 처리가 늘어날 때 마다 데이터 구조의 클래스를 수정해야 되는 경우가 생긴다. 방문자 패턴은 해당 문제를 데이터 구조와 처리를 분리하며 해결한다. 데이터 구조 안을 돌아다닐 수 있는 방문자 클래스를 준비하여, 그 클래스에게 처리를 위임한다. 즉 새로운 처리를 추가하고 싶을 때 새로운 방문자를 만들게 되면 된다. 방문자 패턴의 등장인물 Visitor (방문자) Visitor는 데이터 구조의 구체적... Read More

요새 망 사용료에 대한 말이 온/오프라인으로 많이 언급되고 있다. 한술 더 떠서 트위치는 화질 제한을 720p로 낮추는 등 화질제한을 거는등 관련 이슈들이 정말 계속 터져나오고 있다. 망 사용료란 무엇이고, 왜 우리가 관심을 가져야 하는지에 대해서 알아보자 망 사용료란? 망 사용료에 대한 정의는 다음과 같다. 콘텐츠의 공급자(CP)가 인터넷 서비스 제공 사업자(ISP)인 통신사에게 제불해야 하는 금액 CP는 Netflix, Twitch, Youtube 등.. ISP는 SKT, KT, U+ 등.. 근데 사실 이게 일반적인 용어는 아니라고 한다…(실제로 한국에만 있는 단어) 왜?? 일반적으로 CP가 IS... Read More

전략이란? 적을 부수기 위한 작전 군대를 움직일 때의 방책 문제를 해결하기 위한 방법 등 이라 볼 수 있다. 즉 알고리즘을 빈틈없이 교체하여 같은 문제를 다른 방법으로 쉽게 해결할 수 있게 도와주는 패턴이다! 등장인물 Strategy Strategy는 전략을 이용하기 위한 API를 결정한다. -> Strategy Interface로 이용 Concrete Strategy 구체적인 API를 구현한다. -> Winning Strategy, ProbStrategy로 구현 Context Strategy를 이용한다. -> Player로 구현 예제 프로그램 예제... Read More

Cypress로 진행하는 e2e 테스트 환경: React, typescript, styled-components 테스트를 해야되는 이유? 사실 테스트를 진행해야 되는이유는 정말 셀 수 없이 많다. 개발 과정에서 문제가 생겼을 때 바로 눈치 챌 수 있디 리팩토링을 믿고 할 수 있다 바로 코드의 동작 상태를 확인할 수 있다 테스트 코드를 만들기 위해 코드를 하다보면 컴포넌트 분할 및 클린코드가 자연스럽게 이루어진다 품질, 안전, 성능을 확인할 수 있다 지속적인 운영을 보장한다 위험을 완화할 수 있다 등등.. 하지만 이러한 이유들을 포함하여 도입한 이유 중 큰 이유는 ... Read More

Java언어로 배우는 디자인 패턴 입문 생성 패턴 Creational Pattern 생성 패턴에서는 중요한 이슈가 두 가지가 존재한다. 생성 패턴은 시스템이 어떤 Concrete Class를 사용하는지에 대한 정보를 캡슐화한다. 생성 패턴은 이들 클래스의 인스턴스들이 어떻게 만들고 어떻게 결합하는지에 대한 부분을 완전히 가려준다. 생성 패턴을 이용하면 무엇이 생성되고, 누가 이것을 생성하며, 이것이 어떻게 생성되는지, 언제 생성할 것인지 결정하는 데 유연성을 확보할 수 있다. 추후에 어떤식으로 구현할 수 있는지 알아보자. 빌더 패턴의 등장인물 Builder ... Read More

Jest와 React-Testing-Library를 사용하여 테스트를 해보자 이번에는 모킹 없이 간단하게 DOM관련 테스트만 진행할 예정이다. 모킹 관련은 다음 포스트에서 다룰 예정. 여러 테스트 예시들을 보면, 한 jest.it 함수 에서 render를 여러번 하는것을 손쉽게 볼 수 있다. 그렇게 나도 유사하게 해보며 익혀보았다. 간단한 사용법 익히기 describe describe에서 내가 어떠한 component를 할지 먼저 알려준다. describe("<MyPageForm />", () => {}); it it에서 어떠한 동작들을 테스트할 지 선언하여 알려줄 수 있다. it... Read More

개요 현재 진행중인 웹 플랫폼에서는 실시간 통신, 즉 음성 및 비디오가 필수적으로 들어가며, 오디오가 잘 나오는지 확인할 수 있는 오디오 비주얼라이저 또한 필수적으로 들어가게 되었다. 처음에 이걸 구현하기에는 다소 어려움이 있었는데, 우선 reference도 많이 없어 힘들었고, 막상 찾았더니 outdated 버전도 많이 있었다. 결국 mdn 문서를 뜯어가며 익혔다.. 나만의 오디오 비주얼라이저 만들기 우선 개발하기 앞서, 디자인 시안이 나온 모습은 다음과 같았다. 마이크를 확인하며, 볼륨이 높을수록 초록색이 올라가는 모습… 직관적이고 보기 좋다! audioContext 우선 오디오 비주얼... Read More

브라우저에서 입출력 제어 현재 만들고 있는 프로제긑는 디스코드와 게더타운과 유사한, 실시간 통신이 들어간 웹 플랫폼이다. 이런 유사한 프로젝트에 필수적으로 들어가야 되는 요소는 오디오의 제어이다. 말을 하다가 마이크를 바꿔야 되는 상황이 된다면? 음질이 좋지 않다고 해서, 이어폰을 꼈을 때, 소리를 스피커에서 이어폰을 바꿔야 한다면? 이어폰 배터리가 나가서 중간에 스피커로 교체 해야된다면? 등 등 정말 많은 상황들이 연출 될 수 있다. 물론 가장 간편한 방법은, 알아서 시스템의 Default장비를 교체 후 브라우저를 refresh 해버리면 된다. 하지만 UX 관점에서, 오디오의 입출력... Read More

Why? 나만의 드랍다운을 만들어보자. 사실 커스텀 드랍다운은 옛날부터 만들고 싶었지만, 시간 투자 대비 사소한 디자인이여서 그냥 기본 custom selector를 주로 사용했었다. 그러다 이제는 더이상 미룰 수 없기에 커스텀 드랍다운 제작에 나섰다. 우선 이번 드랍다운의 기능은 다음과 같다. 드랍다운 메뉴를 클릭하면, 드랍다운 메뉴(현재 내가 선택 가능한 입출력 디바이스)가 나타난다. 드랍다운 메뉴를 다시 클릭 혹은 select하면, 드랍다운 메뉴가 사라진다. select된 입출력 디바이스는 해당 브라우저 탭에서 오디오 입출력 디바이스가 된다. 입출력 디바이스를 선택하는 부분은, 따로 ... Read More

CDN 서버를 만들기 앞서, 왜 CDN 서버를 만드는지에 대해 알아보자 CDN CDN 이란? 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크로 콘텐츠 전송 혹은 배포 용도로 사용된다. 실제 사용자는 웹사이트에 접속 시, 해당 웹사이트의 데이터를 다운받기 위해 인터넷으로 접속한다. 하지만, 사용자가 서버에서 떨어질 수록, 웹사이트의 정적 이미지(이미지, 동영상, 음악 등)를 다운받는데 오래 걸리게 됩니다. 이러한 경우, CDN 서버를 전 세계에 있는 엣지 포인트를 두어 캐싱처리를 하여 사용자가 가장 가까운 지역의 엣지 포인트로 접... Read More

React 볼륨 슬라이더 만들기 프로젝트를 진행중에, 이러한 시안이 날라왔다. 대충 볼륨을 컨트롤 할 수 있는 Slider를 제작하는 것. 우선 여러가지 선택사항이 있는데, material UI를 사용하여, 간단하고 이쁜 슬라이더를 가져다 쓰는것, 아니면 직접 구현이 있었다. 우선 라이브러리를 쓰는것 보다 구현을 하는것을 좋아하기에, 한번 알아보았고, input type 을 range로 선택하여 간단하게 구현할 수 있음을 알게되었다. Vanilla HTML로 구현 <input type="range" min={0} max={1} color="gray" step={0.02} va... Read More

React 에서 가로 스크롤 구현을 해보자 좌우 스크롤은 직접 구현해도 되지만, 누군가 이쁜 library를 만들어 두었길래, 바로 사용하였다. yarn add react-horizontal-scrolling-menu 공식 페이지나 깃허브에 상세하게 설명이 있으니, 참고해도 좋아보임 공식 페이지 깃허브 사용 ScrollMenu ScrollMenu라는 컴포넌트에 Block을 설정해두면, 바로 가로스크롤을 사용할 수 있다. import { ScrollMenu } from 'react-horizontal-scrolling-menu'; import { LeftArrow, RightArrow } from ... Read More

Typescript, React, Styled-Component 환경에서 Font 적용하기 프로젝트를 진행하다보니, Font를 설정해야 되는데, 일반적으로 App.css를 사용하는 방식이 아니라, Styled-Component를 사용했기에 조금 더 복잡했다. 적용순서 Font 다운받기 font는 OpenSource 나 원하는곳에서 잘 다운 받으면 된다. 나는 눈누라는 폰트 저장소를 애용한다. 저작권에 주의하며 다운받자. 다운을 받을 때, ttf, otf, woff 중 어떤것을 받을지 선택 할 수 있는데, 우선 ttf로 적용하였다. ttf는 true type font otf는 open type font 으... Read More

왜 Zustand? Zustand에 대하여 공부하기 앞서, 왜 Zustand인지 알아보도록 하겠다. 우선, Zustand vs Recoil vs Jotai vs Redux vs Context API 등 전역상태관리에 대해 여러가지 방법들이 존재한다. 그중에 Zustand를 택한건 크게 두가지가 있다. 쉬움 트렌드임 우선 너무 쉽다. Recoil도 배웠을 때는 어렵지 않았다. 솔직히 Redux를 써보고 Recoil을 사용해서 인지는 몰라도, 한번 RecoilProvider로 감싸기만 하면, const state를 관리할 수 있다. 하지만 Redux는 여기서 Provider로 감싸지도 않고 사용할 수 ... Read More

Why Recoil? 왜 Recoil을 사용할까? 우선 전역 상태관리는 개발을 하다보면 무조건 필요로 하게 된다. 특히나 전에 만들었던 프로젝트 경우에는 게임이였기 때문에, 더욱 필요했고, 이번에도 적지만 id 같은 경우에 모든 페이지마다 변경되는 state이다 보니 전역상태관리가 필요로 하게 된다. recoil공식 설명에서는 사용하는 이유 즉 탄생배경을 다음과 같이 설명한다. 컴포넌트의 상태는 공통된 상위요소까지만 끌어 올릴 수 있어, 이 과정에서 거대한 트리가 다시 렌더링 되는 효과가 나온다. Context는 단일 값만 가질 수 있어, Consumer가 가지는 여러 값들의 집합을 담을 수 없다.... Read More

TypeScript Why TypeScript JavaScript는 Dynamic Typing을 지원한다. 관련블로그 간략하게 설명하면, 변수를 지정시에 데이터 타입등을 정하지 않고, 컴퓨터가 정하도록 둘 수 있다. 코드가 간결하고 로직을 명확하게 볼 수 있지만, 컴퓨터가 파악하기에 실행속도가 느려지가 해당 오류가 날 수 있다. 그걸 TypeScript를 이용하여 정적 타이핑으로 만들어 주는 것이다. 이런 데이터 타입을 지정해 줌으로써, 코드의 안정성과 정교함이 커지게 된다. 예제 5 - "3"; //? 1 + true; //? function mul(a, b) { return a * b; } mu... Read More

Socket 통신시 에러나는 경우 최근에 WebRTC를 사용하며 소켓 통신을 해야할 일이 생겼는데, 웬걸 자꾸 연결에서 실패를 하였다. 우선 결론은 dependency 확인이다. Front에서 연결을 하려는 소켓 통신인 경우 socket.io-client라는 module을 사용하는데, 이게 Back에 기다리고 있는 socket.io 모듈에서의 Server와 Socket의 dependency를 맞춰야 된다. 내가 Front 에서 사용하던 모듈은 ^4.3 이였고 백에서는 ^2에서 주었기 때문에 당연히 오류가 났다… 결국 둘 다 최근 모듈인 4세대로 바꾼 후 잘 작동하였다 ㅎㅎ 백엔드와 소통을 열심히 하자~ 공... Read More

나만의 맥북 셋업 이번에 새로운 Mac m1 pro 를 갖게 되면서, 설치하다보니 뭐를 설치해야되고 어떤거를 동기화 해야되고 생각보다 기억이 잘 안났다. 그래서 이번 기회에 나의 맥이라면 이런걸 해야하는 TODO List를 만들어 보았다. 개발자 도구 iTerm2 Web Blog 어플 Chrome Visual Stuido Code Discord KakaoTalk Webex Slack Notion Terminus 위젯 Alt-Tab Fig RunCat Unicorn Hidden-Bar Magnet Karabiner Ampheta... Read More

CSS 트렌드 (출처: oliverturner's twitter) Traditional CSS 가장 전통적인 CSS 방식에는 크게 3가지 방식이 존재한다. Inline CSS Internal CSS External CSS Inline CSS 일반적으로 간단하게 태그안에 style을 적용하는 방법 <h1 style="color:white;padding:30px;">Inline CSS</h1> <p style="color:white;">HTML 안에서 직접 스타일 적용.</p> Inline CSS 장점 HTML 페이지에 쉽고 빠... Read More

Jira와 깃허브 연동하기 1. 깃허브앱 등록 Jira와 연동을 하려면 우선 깃허브앱을 등록을 해야된다. 등록에 가서 평점이 조금 낮지만 공식 앱인 Github for Jira를 설치한다. 그 후 Authorize를 하고 원하는 Organization 혹은 Repository를 등록하며 진행한다 다음과 같이 해당 깃허브 Repository에 Jira 앱이 설치되어 있고, 마찬가지로 Jira에도 앱 추가가 되어있으면 준비가 되었다. 2. 이슈 만들기 우선 이슈를 만들려면 스프린트부터 작성을 해야된다. 해당 지라앱에서 새로운 에픽을 만들어보자. 스프린트를 만들었다면, 좌측에 백로그에서... Read More

API Routes Intro pages/api 안에 있는 어떤 파일이든 전부 /api/*/로 접근 할 수 있으며, page 대신 API 최종점으로 여겨진다. 이 API들은 전부 server-side 전용이며, Client-side의 번들 사이즈를 증가시키지는 않는다. 예를들어, 다음과 같이 pages/api/users.js가 리턴하는 json같응ㄴ 경우는 status 200으로 소통한다. export default function handler(req, res) { res.status(200).json({ name: "YeongGi Yoon" }); } 이러한 API route가 작동하려면, 함수를... Read More

Environment Variables Loading Environment Variables Next.js는 우선 내부적으로 .env.local 과 process.env 같은 환경변수를 제공해준다. 예를들어 .env.local 같은 경우에는 다음과 같이 사용한다. DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword 해당 환경변수들은 Node.js에서 자동으로 Next.js의 데이터를 가져오는 방식으로 사용하게 된다. 예를들어 해당 환경변수를 가지고 ` getStaticProps`를 사용하는 방식을 보면 다음과 같다. export async function getS... Read More

Static File Serving Next.js는 파일을 public에서 이미지처럼 정적으로 활용 할 수 있다. public은 root 안에 있어야 하며, public 안에서는 /로 시작하는 base URL을 따라가야된다. public/me.png를 삽입하는 과정은 다음과 같다. import Image from "next/image"; function Avatar() { return <Image src="/me.png" alt="me" width="64" height="64" />; } export default Avatar; next/img의 대한 내용은 NextOptimization... Read More

Image Component and Image Optimization next/image 에서의 Next의 이미지 컴포넌트는 HTML에서 <img> 의 연장선이라 볼 수 있다. 더 좋은 Web 환경을 위해 더 좋은 효율과 압축성을 보여준다. 이러한 효율성은 웹사이트 사용에 있어 UX 적으로 도움이 된다. SEO 측면에서도 도움이 된다 이러한 효율성은 크게 4가지로 Improve Perforamce : 모든 장치마다 최신 이미지 포맷을 사용하여 정확한 사이즈를 전달한다 Visual Stability : CLS(Cumulative Layout Shift)를 방지... Read More

Layouts React는 페이지를 컴포넌트로 나누는것이 가능하다. 이러한 컴포넌트들은 페이지간에 재사용이 가능하고, 예를 들어, 모든 페이지마다 같은 네비게이션바를 사용한다. Single Shared Layout with Custom App 만약 전체 어플에 대하여 하나의 레이아웃만 사용한다면, Custom App 을 만들어, 해당 레이아웃으로 둘러 쌀 수 있다. 해당 컴포넌트가 모든 페이지마다 재사용되므로, 이러한 컴포넌트의 상태정보는 계속 유지된다. 예를 들어, input value가 들어와도 고정된다 import Layout from "../componen... Read More

Global Stylesheet 프로젝트에 stylesheet를 추가하려면, pages/_app.js 라는 CSS 파일을 import 해야된다. 우선 다음과 같이 style.css를 만들었다 보면 body { font-family: sans-serif; padding: 20px 20px 60px; max-width: 680px; margin: 0 auto; } 이제 실제 page 에서 import 하면 된다. import '../style.css' export default function MyApp({ Component, pageProps }) { return <Component... Read More

아래는 Next.js 공식문서의 번역본입니다 공식문서 Pages Next.js 의 Page 는 React Component 로써, .js, .jsx, .ts, .tsx 의 형태로 존재한다. Pre-rendering Next.js 는 매 페이지마다 pre-render를 지원한다. 즉 Next는 Client가 자바스크립트로 처리하는것이 아니라 매 페이지마다 HTML 을 만들어낸다. 즉 여기서 성능과 SEO 측면에서 더 좋다. 이렇게 만들어진 HTML은 정말 페이지에 필요한 자바스크립트 코드만 들어가 있으며, 브라우저에서 로딩이 되면, 해당 자바스크립트 코드로 상호작용을 할 수 있다. -> hydratio... Read More

NEXT 란 무엇인가? Next란 간단하게 말하면, SSR을 쉽게 구현하도록 도와주는 프레임워크이다. SSR 이란 Server Side Rendering의 약자로, 쉽게 말하면, Server 딴에서 렌더링 과정을 해준다는 것이다. 그와 반대대는 개념으로는 CSR 즉 Client Side Rendering 이 존재한다. SSR vs CSR React 로 렌더링방식의 차이를 알아보자면, 우선 일반적으로는 render() 라는 함수가 실행 된 후 componentDidMount() 함수를 실행하여 다시 한번 더 렌더링이 된다. 그에 반에, Next 같은 경우에는 getInitialProps() 라는 함수를 먼저 호... Read More

함께 자라기 서론 우선 이전글에서 다뤘던 SW Maestro 소마 라고 하는 정부지원사업에 붙게 되었다. 320명이나 되는 연수생들을 대충 확인해보았는데, 정말 다양한 사람들이 정말 많다는것을 느꼈다. 그리고 대부분이 전공생이 였다는게 정말 놀라웠다. 현재 진행중인 42 Seoul 인 경우에는 전공생보다는 부전공 혹은 아예 다른 전공에서 다른 일을 하다 프로그래머의 길로 빠지게 된 경우도 많이 보았는데 참 색달랐다. 그 후 멘토링을 몇번 받게 되었고, 운 좋게 마음에 드는 두분을 만나 팀 매칭까지 끝나게 되었다. 우리는 AI, 나 어플의 CRUD 시스템같은것 보다는 조금 더 혁신적이고, 재미있는 프로젝트를 하... Read More

Intro 오늘 심층면접을 끝으로 길고 길었던 소프트웨어 마에스트로의 지원이 끝났다. 1월애 자소서를 쓰는것부터 시작해서 무려 두달이나 걸려서 오늘 최종 면접까지 가게 되었다. 끝나고 나니 아쉬운 부분도 있지만, 우선 정말 후련하고 후회는 없다. 1. 자소서 [예의는 있지?] 자소서를 쓰는 단계였다. 하지만 인터넷 어디를 찾아봐도 자소서에서 떨어졌다는 이야기는 없다. 하지만 자소서는 면접질문에서 부메랑처럼 날아 올 수 있기에 최대한 사실대로 솔직하게 나의 정보를 어필하는것이 좋다고 판단했다. 그래서 꾸밈없이 정말 내가 개발하고 싶은 정보나 나의 철학을 정말 아낌없이 표현했다. 그리고 당연히 합격했다… ... Read More

What is Node.js Javscript는 알다시피 HTML 을 활용하기 위해서 만들어진 언어이며, 컴파일은 브라우저가 담당한다. Chrome 은 V8, FireFox 는 SpiderMonkey .. 그리고 Chrome V8 해석엔진이 워낙 좋아서, 해당 엔진을 사용하여 자체를 따로 출시하여 만든것이 Node.js 즉 크롬의 자바스크립트 엔진 자바스크립트를 브라우저 내에서 사용하는것이 아닌 다른 환경에서도 실행을 할 수 있게 도와주기 위한 도구, 즉 런타임 실행환경이라 볼 수 있다 이제 Node.js 덕분에 JavaScript를 프로그래밍 언어처럼 만들 수 도 있고, 서버도 쉽게 만들 수 있음... Read More

몬티 홀 문제 문제 분석 몬티 홀 문제는 영화 21에서 처음 공개된 아이디어이다. 잠깐 문제를 보고 가자면 Suppose you’re on a game show, and you’re given the choice of three doors. Behind one door is a car, behind the others, goats. You pick a door, say #1, and the host, who knows what’s behind the doors, opens another door, say #3, which has a goat. He says to you, “Do you want to ... Read More

React란 무엇인가 React는 간단하게 말해서, 웹의 Framework이다. 정확하게는 사용자 인터페이스를 만들기 위한 Javascript Library 그리고 React 란 놈에게는 큰 장점이 있다. 선언형 컴포넌트 기반 이렇게 볼 수 있다. 선언형 선언형은 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. 즉 애플리케이션의 각 상태에 대한 간단한 뷰만 설계를 한다면 알아서 React가 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링을 해준다. 즉 말 그대로 React 하게 해준다는 것이다. 간단하게 보면, React 파일에서 co... Read More

Talk is cheap. Show me the code. Linus의 전설적인 명언이다. 컴퓨터 공학도라면 한번쯤은 들어봤을 이름 리누스 토르발스. 내가 이 이름을 처음 들었던 것은 System Programming 과목에서 Linux 를 처음 배울 때 였다. 처음 Linux를 접했을 때는, 엥?? 이게 뭐지?? 싶을정도로 기괴했고, CLI 를 처음 접했던 나는 정말 적응하기가 힘들었다. 하지만 사용하면 사용 할 수록, 그가 왜 이러한 운영체제를 만들었고, 어떤생각을 하고있는지 이해를 하기 시작했고, 사람에대한 관심이 생겨 찾아보다 Ted talk 에서 이야기 한 것을 보게되었고, 그에따른 이야기를 조금 해보려... Read More

Why SQL? SQL은 내가 데이터베이스 강의를 들을 때 잠깐 만져보고 처음 본 Query 언어이다. 그 당시에 효율이 정몰 좋고 데이터베이스 관리를 위해서 꼭 사용해야 하는 언어라고 배웠고, 실제로 MariaDB 를 활용한 웹을 만들어 보면서 왜 사용해야되는지 배워보았다. 그리고 SQl 을 펼쳐보지도 않은지 거의 두 세달 이 되어서, S/W Maestro 관련 글을 보던 중 코딩테스트에 SQL이 나온다는 소식을 들었다… ㅜㅜ 그래서 어쩔 수 없이 SQL 문제들을 살펴보던 중 프로그래머스에 SQL 문제들이 올라와 있는걸 보았고, 기본기를 다지는데 훌륭하다고 하여서 한번 풀어보기로 했다. 그리고 어차피... Read More

자바스크립트를 Browser로 로딩하기 document Object console에 document를 쓰면, 이미 정의되어 있는 함수인걸 알 수 있다. 그럼 html 에서 block으로 지정한 부분을 자바스크립트에서 바로 가져올 수 있다. ex) document.title -> 내가 지정한 HTML 의 title 즉 이렇게 하면 HTML 의 코드를 자바스크립트의 관점에서 볼 수 있게된다 그럼 다른 block 에서 id로 가져오려면 어떻게 해야될까?? HTML 에서 <h1 id="name">Name</h1> 이런식의 블럭이 있다면 간단하게 document.getElem... Read More

자바스크립트 실습 자바스크립트의 이론적인 부분에 대해서는 공부를 대충 해봤지만, 실생활에 어떤식으로 사용할 지, 혹은 어떤식으로 프로젝트를 진행할 지에 대해서 너무 무지했기 떄문에, 처음에는 강의에 의존을 해보기로 결정했다. 여러 자바스크립트 강의를 찾던 도중, 노마드코더가 자바스크립트를 처음 접하기 좋다는 소식을 들어 이 사이트에서, 바닐라JS로 크롬 앱 만들기 강의를 시작해보기로 결정했다. Why Javscript? 왜 우리는 자바스크립트를 사용할까?? 사실 자바스크립트는 그렇게 좋은 언어는 아니다. let, var 등등 (요새는 var를 안쓴다고 하긴 하더라) 데이터 타입을 명시해주는것 부터, ... Read More

프로토타입과 프로토타입 상속 상속을 하는 이유?? 내가 user라는 객체가 있고, user와 유사하지만 비슷한 admin 과 guest를 만들어야 했을 때, 유사한 객체를 만들 수 있을까?? 프로토타입 상속을 이용하여 만들 수 있다 프로토타입의 예시 -> __proto__ 로 만들 수 있다 let animal = { eats: true, }; let rabbit = { jumps: true, }; rabbit.__proto__ = animal; __proto__는 Prototype용 getter/setter다 프로토타입은 읽기 전용이다 this 는 무엇을 나타낼까... Read More

객체 프로퍼티 프로퍼티란 단순히 key-value 가 아닌 더 유연한 자료구조로 사용 될 수 있으며, getter와 setter 등에 대해서 학습해보자 프로퍼티 플래그와 생성자 객체 프로퍼티는 값과 플래그라는 속성을 가진다 writable - true 라면 수정이 가능하다 enumerable - true 라면 반복문으로 나열 할 수 있다 configurable - true 라면 삭제나 플래그 수정이 가능하다 평범한 방식으로 설계를 한다면, 프로퍼티는 모두 true이며, 언제든 수정 될 수 있다 let descriptor = Object.getOwnPropertyDescriptor(obj, p... Read More

나머지 매개변수와 스프레드 문법 나머지 매개변수 예전에 printf를 구현을 할 때, 가변인수라고 해서 va args를 써서 구현을 했던 적이 있는데, 그거에 비해서 정말 아니 이렇게 써도 된다고??? 할정도로 자바스크립트에서는 구현이 가능하다 function sumAll(...args){ let sum = 0; for(let arg of args) sum += arg; return (sum); } 이런식으로도 구현이 가능하다!! function showName(firstName, lastName, ...titles) { //firstName = Bora; //LastName = Lee; ... Read More

자료구조와 자료형 기본적으로, 프로그래밍 언어들에 대한 기본지식이 있는 상태로 공부를 진행하여, 기본적인 유형인 부분들은 스킵하도록 하였다 원시값과 객체의 차이 원시값이란 원시형의 값 종류로는 string, number, bigint, boolean, symbol, null, undefined 으로 총 7가지가 올 수 있다 객체 Property에 다양한 종류의 값을 저장 할 수 있다 {name: "Yoon", age: 25}와 같이 {}를 사용해 만들 수 있다 자바스크립트에는 여러 종류의 객체가 있으며, 함수도 객체의 일종이다 문자열 자바스크립트는 글자 하나만 저장 할 수 있... Read More

최근에 마음이 맞는 사람들과 프로젝트를 진행해 보기로 했다. Decrypto 라는 보드게임을 웹 환경으로 만들어 보면 어떠겠는가 해서 시작된 프로젝트였다. 생각보다 관심이 있는 사람들이 많아 인원을 다 모으고 회의를 진행을 해 보았는데… 아뿔싸… 제대로 웹 개발을 해본 사람이 없는것! 그래서 프로젝트 바로 시작하는것은 잠시 미뤄두고 스터디를 진행을 해 보기로 하였다. 인원도 많았기에, 팀별로 React, Type Script, Node.js 이런식으로 인원을 쪼개 2주간 진행을 한 후 통합하여 실제로 웹 프로젝트를 진행해 보기로 했다. 그렇게 우리팀인 TypeScript 스터디팀은 무작정 코드리뷰도 해보려고하고,... Read More

사실 노션에서 깃허브 IO 로 넘어온 이유 중 가장 큰 이유가 소통의 부재이다. 물론 노션도 코멘트 기능을 가지고 있지만, 블로그에서처럼 활용도가 높지 않다. 그래서 야심차게 깃허브 블로그를 시작했지만… 코멘트 기능은 자동으로 있지 않았고 따로 설치가 필요해 따로 설치를 진행해 보았다. 깃허브 블로그 코멘트 설치하기! 우선 깃허브 코멘트 설치를 위해서 두가지 기능 중 하나를 선택해야 한다. disqus utterance disqus 이런저런 조사를 해 보니 disqus 같은 경우에는 되게 무겁다는 평이 많았다. 사람들이 정말 많이 사용하는 플랫폼이며, 이미지나 기본적인 텍스트 셋업을 도와줘서 간편... Read More

안녕하세요, 071yoon입니다. 원래는 노션에서 제가 하는 작업들을 정리해 왔지만, 포스팅용의 사이트가 하나 필요하다 판단되어 Github IO를 채택하기로 했습니다. 혹시라도 제 노션이 궁금하다면 -> 노션링크 만드는 과정 Step by Step MAC 환경에서 작업햇습니다!!! 1. 새로운 Repository 생성 주의 할 점 -> 이름은 username.github.io 의 형태를 유지해야한다 README는 딱히 필요 없다. (근데 어차피 추가 해야됨…) 2. clone git clone` 으로 만들어 둔 Repiostiry 를 local로 clone... Read More