본문 바로가기

Web22

지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024. 4. 10.

[CSS] Animation 최적화 ⚡ CSS 애니메이션 CSS로 애니메이션을 만들어줄 때 데스크톱이나 노트북으로 부드럽게 작동하는 것을 확인했어도 막상 핸드폰으로 볼 때 엄청나게 버벅이는 경우가 있습니다. 이러한 현상은 스마트폰의 성능이 아무리 좋아졌다고 해도 비교적 떨어지기 때문입니다. 즉, 애니메이션 효과는 생각보다 컴퓨팅 파워를 많이 소모하고 최적화가 되어 있지 않으면 성능에 문제가 생긴다는 말과 같습니다. 그럼 웹에서 애니메이션이 동작하는 과정과 최적화하는 방법에 대해 알아보겠습니다. 📌 브라우저 렌더링 과정 브라우저에서 UI를 렌더링 하는 과정을 요약하면 다음과 같습니다. Recalculate Style 스타일을 계산하는 과정입니다. 작성된 CSS를 파싱해 CSS Object Model을 생성합니다. Dom Tree와 CSS O.. 2023. 6. 19.

[Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023. 1. 10.

웹프로젝트 문자인증 구현하기 with 네이버 클라우드 플랫폼 ⚡️Naver Cloud Flatform SENS API를 통한 문자인증 이번 JAVA - Spring 숙박 플랫폼 프로젝트의 회원가입 기능에 휴대전화를 통한 문자인증 기능을 구현했습니다. 인증문자를 휴대폰으로 전송하는 기능은 네이버 클라우드 플랫폼의 SENS를 이용하였습니다. 그럼 기능 구현을 위한 단계를 차례대로 소개합니다. ⚡️Naver Cloud Flatform 세팅 NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 우선 위 링크로 이동해 회원가입을 진행해줍니다. 📌 인증키 .. 2022. 5. 30.

REST API에 대해 ⚡️최근 프로젝트에서... 숙박플랫폼 GOING 🎒숙박플랫폼 GOING www.notion.so 최근 자바와 스프링 기반으로 제작한 숙박 플랫폼 프로젝트가 있습니다. 프로젝트의 데이터 조회는 GET 방식으로, 삽입, 수정, 삭제는 POST 방식으로 하게 되었는데, 이런저런 API들을 사용하다보니 REST API라는 키워드가 계속해서 눈에 띄게 되었습니다. 당시에는 아임포트 API, 카카오 API, 문자 전송 API들이 RESTful 하게 설계 되어있음에도 불구하고 사용에만 급급해서 작동만 되도록 코드를 작성하였는데, 시간이 지난 지금 REST API에 대해 공부하다보니 위 프로젝트에서 REST 아키텍처를 도입해 URL을 설계했다면 훨씬 나은 완성도를 챙길 수 있다는 생각을 합니다. ⚡️REST API란?.. 2022. 5. 23.

[HTML] input 태그의 date 속성 value 날짜 포맷 지정과 기간 설정하는 방법 ⚡️JAVA 날짜 포맷 변환과 계산 [Java/자바] 날짜-Date의 모든 것 (현재-내일 날짜, Date 포맷 변환, 날짜 차이 계산, 더하기, 빼기) [Java/자바] 날짜-Date의 모든 것 (현재-내일 날짜, Date 포맷 변환, 날짜 차이 계산, 더하기, 빼기) ⚡️자바의 날짜 숙박 예약 프로젝트를 진행하다보니 날짜를 다룰 일이 많았습니다. 현재 날짜 구하기 날짜 더하고 빼기 두 날짜 계산하기 프론트와 백앤드의 Date 포멧이 다르기 때문에 포맷변 lasbe.tistory.com 자바로 날짜를 다룰 때 이 글을 참고해주세요! ⚡️ input 태그의 date 속성은 달력 형태로 날짜를 선택할 수 있는 기능을 제공합니다. 이번 프로젝트에서 예약 기능이 핵심 로직이기 때문에 날짜를 계속해서 다루게 되.. 2022. 4. 16.

국비 자바 세미 프로젝트 - 숙박 플랫폼 GOING 📄 관련 글 [Spring 웹 프로젝트] 숙박 플랫폼 GOING 🎒숙박플랫폼 GOING Java와 Spring MVC를 기반으로 제작한 프로젝트입니다. 기존 Model2로 만든 세미 프로젝트를 스프링 형태로 바꾼 뒤 개선작업과 추가 기능을 삽입했습니다. 고객과 사업자(숙소), lasbe.tistory.com [JAVA-Spring 웹 프로젝트] 숙박 플랫폼 GOING [Spring MVC 프로젝트 리팩토링] 1. 국비지원교육의 한계 [Spring MVC 프로젝트 리팩토링] 2. SqlSessionFactory -> SqlSessionTemplate [Spring MVC 프로젝트 리팩토링] 3. 의존성 주입 수정 [Spring MVC 프로젝트 리팩토링] 4. @Service, 비즈니스 로직 분리 [Spri.. 2022. 3. 27.

CSS 파일 수정 후 적용이 안될 때 이번에 웹 프로젝트를 하며 CSS 파일을 수정했는데, 실행 시 적용이 안되는 문제가 있었습니다. 원인은 브라우저가 캐시에 담아둔 이전 CSS 정보를 갱신하지 못했기 때문입니다. 이에 대한 해결방법을 소개합니다. 링크 태그 URL 수정 CSS 파일을 연결한 HTML 파일의 link 태그의 URL을 위 코드와 같이 수정해줍니다. 파일의 경로 뒤에 ?문자열을 더해 캐시에 CSS 파일을 새로이 인식시켜주면 됩니다. ? 뒤 문자열에는 어떤 문자열을 넣어도 상관 없으니 아무 문자열이나 넣어주시면 됩니다. 이제 변경 후 CSS 파일을 저장한 뒤 파일을 다시 실행시켜보면 변경사항이 바로 적용된 모습을 볼 수 있습니다. 2022. 2. 17.

[Html] form 태그와 input 요소들, GET / POST 방식 ⚡️ form html의 요소 중 하나인 form은 데이터를 주고 받음에 있어서 많이 사용하는 요소 중 하나입니다. form 태그 안에 삽입한 submit 이벤트가 발동되면, 정의된 method 속성 type으로 action을 통해 목적지에 데이터가 전송됩니다. 데이터는 다양한 타입의 input 요소를 이용해 사용자로부터 입력을 받을 수 있습니다. 전송된 데이터는 웹 서버에서 처리하고, 정해준대로 페이지를 이동하거나 알림을 주기도 합니다. ⚡️ action 속성 action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시해야합니다. submit이 이루어지게 되면 입력받은 데이터와 함께 명시한 주소의 위치로 이동합니다. ⚡️ method 속성 method 속성을 통해 form 요소의.. 2022. 2. 8.

이전 1 2 3 다음

티스토리툴바