gradu 님의 블로그

따사로운 햇살 아래에서 vscode 와 노닥거리는 평화로운 나날들이었다하늘 높은 줄 모르고 쌓여만 가던 이슈들도 어느새 허리께 밑으로 내려다 보이고지난 겨울부터 키워온 dev 브랜치는 merge 먹으며 포동포동 살을 찌우고 있었다 '오늘은 좋은 소식을 들고 갈 수 있겠는 걸' 양손 가득 잘 익은 pr 을 한아름 안아들고 집으로 돌아가며 생각했다 집에 도착해서 가장 먼저 한 일은 당연 빌드 테스트.겉으로는 자신만만해 했지만 두근거리는 내색을 감출 수 없었다 Building for production... Done! 그럴 줄 알았다며 생색내는 얼굴은 아무래도 좀 전에 비해 밝아진 듯 했다지체없이 바로 릴리즈로 이어갔다밤이라 서버에 손님이 많았나보다 대기가 꽤 길어보였다 아주 작은 틈이었다25분을 기다리지 않..

Singleton 이 뭔데?싱글톤을 공부하는 사람이라면백엔드 공부를 시작한 지 얼마 안 됐거나게임 개발을 제대로 찍어먹어보다가 싱글톤을 마주쳤거나여타 다른 분야의 필요한 객체지향을 공부하다가 만난 경우가 대부분일 것이다 되게 많이 등장하긴 하는데 그래서 이게 뭐냐고.. Singleton 은 객체 지향 패턴의 베스트 셀러인 디자인 패턴의 기초적인 예시이다 ??? 풀어서 설명하면 "객체 지향 프로그래밍" 을 하다보면 자주 사용되는 패턴들이 있는데,그걸 고대의 프로그래머들이 정리해놓은게 "디자인 패턴" 이고,그 중 베스트 셀러가 20개 남짓인데,그 중에서도 가장 많이 언급되는 친구가 이 "싱글톤"이다 오늘은 이 싱글톤에 대해서 자세히 알아보겠다 #    구조 // Singleton.jslet instance ..

분기 과정에서의 특이점: 종속된 if 문 내부로 진입한 뒤 소득없이 탈출 시 else if 호출 안 됨서론 프로그래밍 언어 하나 배우려고 강의나 책 사서 목차 펼쳐보면 항상 초반에 등장하는 녀석이 있다. 바로 조건문이다. 근데 이게 생각보다 만만히 볼게 아니다. 은근 헷갈리는 부분이 많다. 그래서 오늘은 다들 조건문을 잘 알고 있나 확인 겸 문제를 몇 개 내볼까 한다. #    Quiz 1 // Basicfunction can_i_drink(age) { if (age >= 20) { return true; } else { return false; }}answer = can_i_drink(17); 기본 문제다. answer 는 무엇일까? age 값이 20보다 작으니 false 를 반환했을..

간단한 탭을 만들고 라이브러리화 시켜볼게요. #    Step 1 // Tab.tsxconst Tab: React.FC () => { return;}; 우선 파일을 하나 만들어서 컴포넌트를 선언해줍니다. 저는 Typescript 를 쓰고 있어서 tsx 파일에 React.FC 타입으로 선언해줬어요. React + JS 로 작업하시는 분들은 jsx 파일에 별도의 타입지정 없이 함수형 컴포넌트 선언하시면 됩니다. #    Step 2 // Tab.tsxinterface TabProps { tabs: string[];}const Tab: React.FC = ({ tabs }) => { return;}; 저는 여기서 탭이 총 몇 개고, 어떤 탭들이 있는 지 등 탭 구성에 대한 정보를 props 로 받아서 컴..

오늘도 평화롭게 코딩 중.. 문득 이상한 기분이 들었다.import 로 한 페이지 채우겠는데... 외부 모듈에서 참조할 코드 목록만 한 바닥을 쓰고 그게 뭐가 뭔지 구분이 안되서 다시 정리하려고 카테고리를 짜고 있는 내가 어쩐지 불쌍해졌다. 나 이런 거 하려고 컴공 온 게 아닌데.. 엄마 미안... 그러나, 옛말에 이런 말이 있듯이 VS Code 가 무너져도 정신만 번쩍 차리면메모장으로 커스텀 편집기 구축할 수 있다.  나는 이내 흐트러진 정신을 바로잡고 방법을 찾아보던 중이었다. export : 나야. 응? 넌 이 문제의 원인이잖아. export : 그러니까, 나라고. 무슨소리야.. Re-export : 문제를 일으킨 것도, 결국 해결하는 것조차도. 모두 나야. !!! > 개요1. re export 의..

여느 때와 같이 작업하려고 컴퓨터를 켜고 그 무엇보다 먼저gpt 를 켜고 잠시 쳐다보는 시간을 갖는다. 나에게는 이게 약간 옛날에 뭐 검색할 거 있으면 네이버 켜고 '뭐할라했지' 쳐보는 거랑 비슷한 거다. gpt 한테 괜히 징징거려본다. 이 자식 공감도 잘하고 해결책도 깔끔하게 제시해주네.. 도망갈 수가 없다..! 사람보다 낫구만. 적어도 나보단 낫다. 잠만.. 근데 이거 뭐야  너 이런 것도 할 줄 알아? 이런 미친.. 바로 해봐야겠다. !! 이게 되네.. 아마 이번에 새로 나온 기능같은데 일정을 등록하면 알림을 보내준다. 브라우저 알림 서비스를 활용하기 때문에 브라우저를 닫으면 알림을 띄우지는 못 한다. 서비스에게 알림 권한을 주는 건 모바일 os 쪽이 훨씬 자유로워서 앱에서의 활용도가 더 좋을 것 ..

오늘도 어김없이 평화롭게 vscode 를 깔짝이던 나는 문득 상당히 거슬리는 장면을 목격했다.???역할당당 재할당당 이거 뭔데?!?뭐가 그렇게 당당해 자꾸 한글 작성할 때마다 마지막 글자가 두 번씩 입력된다....ㅂㄷㅂㄷ오늘 이거 해결하기 전에 잠 못 잔다. #    어디서 생긴 오류야.. 이상하게 어제까지는 없던 오류였는데 오늘 prettier 를 추가한 이후로 생긴 걸 보니 아무래도 prettier 쪽 문제인 거 같아 좀 찾아봤다. 역시나..Microsoft 에서 제공하는 한글 입력기 최신 버전의 호환성 이슈가 prettier 랑 만나 오류가 발생한 것이었다. 해결법은 간단했다. 윈도우 설정에 들어가준 뒤[시간 및 언어] 탭=> [언어 및 지역] 클릭=> [한국어] 오른쪽에 메뉴 눌러서 "언어 옵션"..

코딩 공부를 하다 보면 무의식적으로 따라 치게 되는 코드들이 있다. C 언어 공부해 본 적 있으면 이런 코드 작성해봤을 거다.#define _CRT_SECURE_NO_WARNINGS#include   이게 printf 같은 위험한 함수 사용할 때 경고 피할려고 쓰는 문장이다. 근데 그 때는 printf 가 왜 위험한 지도 모르고 그냥 따라쳤을 것이다. JS 에도 비슷한 녀석들이 있다.// 전통적인 Javascript// ES module 난 이게 무슨 역할이고 이 코드에 담긴 의미를 실제로 사용하는 주체가 누구인가에 대한 인식이 전혀 없는 상태로 공부를 했었다 ㅋㅋ.. 그치만 컴공 3학년 전공 수업을 수료한 나는 다르다..!! 코드가 있다면 그 코드에 담긴 의미를 활용하고 처리하는 시스템이 존재한다. 당..

export 할 때마다 default 는 뭐고 중괄호는 언제 치는 건 지 너무 헷갈린다. 정리 한 번 해야겠다. #    named export 여러 개의 값을 각각 내보낼 때 사용한다. 선언 시 직접 내보내기// math.jsexport const PI = 3.14159;export function add(a, b) { return a + b;}export class Calculator { subtract(a, b) { return a - b; }} 별도로 내보내기// stringUtil.jsconst trim = (str) => str.trim();const toUpperCase = (str) => str.toUpperCase();export { trim, toUpperCase }; #  ..

HTML 이나 리액트 혼자 독학하는 사람들은 이런 경험해본 적 있을 지 모르겠다. PC 로 기깔나게 만든 나의 소중한 첫 웹 사이트를 배포한 뒤,친구들에게 자랑하려고 주소를 보내주고 난 뒤의 반응... "우와 신기해.. 근데 원래 이렇게 짤리는 거야?"뭐?!..난 완벽해. 난 완전해. 난 무적이야...!근데 뭐가 문제인 거야,,, 분명 이쁘게 열려야 할 텐데?  내가 만든 웹 사이트는 모바일이라고 알아서 줄어들어 주지 않는다.. 프론트는 차갑구나... 오늘은 CSS 기초 바로 너머에 있는 기술인 Media Query 에 대해 알아보고 반응형 웹 디자인을 하는 방법에 대해 살펴보려한다. #    RWD, 반응형 웹 디자인이란? 반응형 웹 디자인(Responsible Web Design)이란 웹을 경험하는 ..