Pozafly's Blog

Bolt-js와 Ngrok을 사용한 서버 개발환경 구성, Cloudflare의 Workers에 배포하기까지 마이그레이션 과정의 기록

Vite의 철학에 기반한 방식, import.meta에 대한 이야기

전처리기부터 Atomic CSS 까지, 웹 어플리케이션 개발에 필요한 CSS 적용 방법 및 최적화에 관한 이야기

규칙을 가지고 import 구문이 정리된다면, 해당 파일에서는 어떤 종속성을 가지고 있고 어떤 기능을 사용하는지 한 눈에 파악하기 쉬울 것이다.

restore-keys는 기존 캐시가 쓸모없어졌음에도 불구하고 기존 캐시를 불러오는 기능이다. 그렇다면, 무효화 되지 않은 캐시를 어디에 사용해야 하는 것일까?

API Routes를 사용하면 코드가 매우 지저분해진다. API Routes를 사용하면서 어떻게 하면 코드를 보기 좋은 형태로 남길 수 있을지 고민한 흔적.

6개월간 참여한 글또 활동 회고. 글쓰기에 대해서.

React Query의 mutation 실행 이후 클라이언트의 서버 데이터는 변경 되지 않은 상태이다. 화면을 업데이트 하는 여러 가지 방법을 알아보면서, 어떤 상황에서 어떤 방법을 사용해야 하는지 알아보자.

dlfjgrp Tjwlseks akfdlek. dlrp sjan Qkrclseks akfdlek. zzzz...

React는 개발자에게 코드를 선언적으로 작성하도록 한다. 이것을 렌더링 과정과 ErrorBoundary를 통해 알아보자.

왜 Hooks에 이런 제약 조건을 걸었을까? React 내부에서 Hooks를 어떻게 처리하고 있는지, 이렇게 디자인 된 이유는 무엇인지 알아보자.

TypeScript void 타입을 조금 더 알아보기.

TypeScript 환경설정을 통해 웹 환경 추세를 알아보자. (feat. allowImportingTsExtensions)

모던 JavaScript 프레임워크 없이 MVC 패턴으로 SPA을 만들어보자

모던 프론트엔드 웹 개발에 필요한 세팅을 직접 해보면서 어떤 옵션과 기능이 있는지 알아보자.

nvm을 시작으로 Node.js 버전을 관리하다 fnm을 알게되었고, 추가로 Volta를 알게되어 세가지 툴의 속도 및 방식에 대해서 간략하게 알아본 정보를 정리해본다.

하나의 주소 안에도 여러가지 용어가 나온다. Host, Domain, Site, Origin등이 그것이다.

react의 class, function 컴포넌트 차이 Class 컴포넌트 Class 컴포넌트로 Counter를 만들어보자. react 라이브러리에서 제공하는 Component를 import 받아와서 상속 관계를 맺어주었음. 따라서, react…

자바스크립트가 만들어진 기반, prototype 언어가 가지는 근본적인 철학에 대해 고민해보자.

JavaScript는 싱글 스레드 언어이다. 하지만 멀티 스레드 처럼 동작하는데 이는 Event Loop 때문이다. await 키워드를 만나면 async가 붙은 함수 전체가 MicroTask Queue에 담기는 과정까지 알아보자.

Symbol은 도대체 뭘까? 어디에 사용되고 있을까? 조금 더 깊게 들어가서 알아보자. 나중에 라이브러리를 만들 수도 있으니..

JavaScript의 클로저를 통해 currying 함수를 알아보자.

z-index가 때로 적용이 되지 않는 문제를 해결하기 위해 stacking context에 대해 정확히 알아본다.

배열이 객체인 이유와, 유사 배열 객체와의 차이점을 알아본다.

객체의 접근자 프로퍼티인 Getter와 Setter에 대해 알아보자.

JavaScript의 얕은 복사와 깊은 복사로 알아보는 객체의 특성. (feat. React, Vue.js)

NVM을 사용해 프로젝트 별로 Node.js 버전 지정을 자동화 해보자.

웹을 개발하다 보면, PDF로 문서를 사용자에게 제공하는 기능을 구현해야 할 때가 있다. 다른 개발자분들이 헤매지 않을 수 있도록 정리해 보았다.

정들었던 Tripllo 어플리케이션을 삭제했다. AWS EC2, S3, RDB를 내렸다. 배포되어있는 도메인도. 씁쓸하면서 이상한 기분이었다. RDB 생성 script를 백업하고, 소개 페이지에 올려둔 gif 파일도 모두 백업해두었다.

Semantic-Tag와 함께 SEO 향상을 위해 meta tag를 프로젝트에 적용하면서 meta tag의 역할과 기능, 그리고 Vue.js에서는 meta tag를 동적으로 어떻게 변화시킬 수 있는지 알아보자.

Semantic Tag를 실제로 적용해 보면서 고민했던 것과 팁을 함께 내용에 적어두었다. Semantic Tag에 대한 정의는 많지만 실제로 어떤 기준으로 적용해야 할지 고민한다면 이 글이 도움이 될 수 있겠다.

주간회고를 시작하면서 블로그의 틀을 조금 수정했다.

함수형 프로그래밍에 대해서 공부하다가 Tripllo에 적용한 클로저와 커링.

데이터를 Vuex store에 저장시키지 말고 로컬 컴포넌트에서 불러와 EventBus로 통신을 하면 어떻게 될까? 라는 물음에서 시작된 삽질기.

Vue 2.x 버전의 반응성에 대해 깊이 알아보자. Vue의 반응성을 제대로 알지 못한다면 UI 컴포넌트를 다룰 때, 혹은 data 객체를 다룰 때 문제가 생길 수 있다.

AWS EC2 환경에서 Nginx와 Let's Encrypt로 HTTPS SSL 인증서 갱신 자동화를 해보자.

Sentry를 통해 프론트엔드 에러 로깅 시스템을 도입해보자.

Vue프로젝트를 aws의 S3와 CloudFront에 Travis CI를 통해 배포 자동화를 해보자.

멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.

멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.

블로그 이사를 완료했다. 사실 블로그를 어떤 기준으로 운영해야하는지 감이 없기도 했고 개발 기록을 남기는 작업은, 첫 블로그를 만들기 전에 onenote에 전부 작업을 해두고 있었기 때문에 블로그에 전부 옮기는 작업이 귀찮기도 했었다. 하지만 어쨌든 블로그를 만들어뒀기 때문에 포트폴리오 프로젝트 정리를 약간 하는 용도로 사용했다.

프로젝트를 마무리했다. 두달 반 조금 안 되게 시간이 걸린 듯 하다. 프로젝트를 진행하면서 느꼈던 점을 조금 적어보려고 한다.

vue에서 소셜 로그인 기능을 만들어보자. 보통 요즘 서비스들은 다 소셜 로그인으로 가입, 로그인이 되므로 앞으로 서비스 개발할 때 거의 필수적으로 들어갈 기능이라고 생각했다. 또 backend보다는 frontend 개발자로 지원하고 싶기 때문에 백엔드의 OAuth2.0 을 사용하는 것 보다는 Javascript단에서 로그인 기능을 넣고 싶었다.

SpringBoot 쪽 서비스 로직이 만들어졌으므로 이번엔 vue에서 화면을 만들고 회원가입과 로그인을 진행해보자. 우리는 vue의 기능을 최대한 살려서 뼈대가 되는 페이지 하나에 login과 signup 2개의 컴포넌트를 붙이고 watch를 활용해 데이터를 검증할 것이다.

Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security의 구현된 소스와 login의 Service 단 내부 로직을 개념에 맞춰서 알아보자.

Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security와 JWT의 개념을 알아보자.

백엔드 Setting은 끝났으니 이제 프론트엔드 Setting이 필요하다. npm 으로 Vue를 생성하고, 코드 포맷터인 ESLint, Prettier 설정을 해보자.

Tripllo 백엔드 세팅을 해보자. Workbench로 DB를 설계하고 MySQL, MyBatis와 SpringBoot를 연동한다.

Trello 어플리케이션을 만들기 시작한 지 벌써 2달이 조금 안 되었다. 하루에 10시간씩 꼬박 시간을 들여가며 만드는 시간이 조급하면서도 즐거웠다. 현재 어플 상태는 3/4 정도 만들어진 상태로 배포되어 있다. 어플을 만들면서 다음번에 같은 문제를 만났을 때 참고할 만한 자료를 남겨두어야지 생각만 하다가 지금부터라도 남겨두어야겠다 싶어 제작기를 적으려고 한다.

CHR(), ASCII() 함수 사용법.

Local Oracle 사용시 용량에 문제가 생기면 이 방법을 사용하자.

ORACLE 계정관련 명령어로 테이블 조작을 해보자.

Spring MVC에서 MediaType 매핑에 대해서 알아보고 테스트 해보자.

Mockito 프레임워크를 통해 Mock 테스트를 알아보자.

Jekyll로 만든 Github 블로그에 카톡 공유버튼을 만들어보자!

SpringBoot에서 JUnit의 개념짚기.

Java의 다형성을 통해 다형적 변수와 형변환에 대해서 알아보자.