아이디벨 블로그

이번 새로운 프로젝트는 하이브리드 웹앱을 진행하였다 근데 앱 배포하면서 IOS safe area 대응해야 하는 문제에 직면했다. IOS에서는 safe area 영역을 디바이스 화면으로 잡기 때문에 top: 0, bottom: 0으로 fixed로 고정해줬을 때 올바르게 적용이 되지 않는 문제가 발생하였고 100vh가 제대로 먹히지 않는 문제가 발생하였다. 가장 큰 문제점 --vh 미적용 모바일 브라우저에서 URL 입력 영역과 하단 네비게이션 영역의 사이즈를 포함하고 있어 100vh를 했을 경우 스크롤이 생기는 현상을 해결하기 위해 --vh라는 속성을 자바스크립트로 계산하여 디바이스의 1/100 값으로 지정해줄 수 있다. 이렇게하면 100vh가 모바일 브라우저 환경마다 딱 맞게 된다 2. 해결 방안 총 3번..

개발 2023. 7. 7. 13:22

DEADLOCK ( 교착 상태 ) 2개이상의 작업이 서로 상대방의 작업이 끝나기만을 기다리고 있는 상태로 결과적으로 아무것도 완료되지 못하는 상태를 의미 1 교착상태의 조건(교착 상태가 발생하는 네가지 조건, 하나라도 해당 안되면 교착상태 해제) 1. 상호배제(Mutual exclusion) 한 번에 오직 한 개의 작업만 자원에 접근할 수 있다. 자원을 점유하고 있는 프로세스나 스레드가 자원을 해제해야 다른 프로세스나 스레드가 해당 자원에 접근할 수 있습니다. 2. 점유대기(Hold and wait) 프로세스가 할당된 자원을 가진 상태에서 다른 자원을 기다린다. 이로 인해 여러 프로세스나 스레드가 필요한 자원을 점유한 채로 대기하며, 다른 프로세스나 스레드가 해당 자원을 사용할 수 없는 상태가 됩니다. ..

개발 2023. 7. 3. 19:35

Nuxt3의 Stable 버전은 2022년 11월 16일에 공식적으로 발표되었다. Nuxt2를 사용하던 개발자로서 Vue3기반의 Composition API보다 Options API를 사용하는게 더 편해 사용하려 했지만, 기존에 사용하던 방식과 조금 달라 어려움을 겪었고, Nuxt3의 출시일이 길지않아 정보가 많이 존재하지 않았다. 그래서 Nuxt3에서 Options API를 어떻게 사용해야하는지에 대해 작성하려한다. defineNuxtComponent defineNuxtComponent는 Options API를 사용하기 위해 Vue 구성 요소를 정의하기 위한 Helper 함수다. 이 함수를 사용하면 asyncData와 head 메서드를 사용할 수 있게 도와준다. 그래서 어떻게 사용하면 되는지는 아래 예..

개발 2023. 6. 24. 00:03

안녕하세요! 웹 개발을 진행하다보면 현재 페이지에 접속하기 바로 직전의 홈페이지 url을 확인해야할 때가 있습니다. 만약 SpringBoot 프레임워크를 사용한다면 정말 손쉽게 Referer 헤더를통해서 사용자가 어떤 페이지에서 현재 페이지로 이동했는지 알아볼 수 있습니다. 이번에 저는 SpringBoot 프레임워크 기반에서 Referer 헤더를 어떻게 사용하는지 확인해보려고 합니다. 1. Referer 헤더란? : Referer 헤더는 웹 요청에서 이전 페이지의 URL 정보를 포함하는 HTTP 헤더입니다. 클라이언트(웹 브라우저)가 서버에 요청을 보낼 때, Referer 헤더는 현재 요청을 실행한 이전 페이지의 URL을 전달합니다. 2. Referer 헤더의 활용방법 웹 애플리케이션의 분석 및 통계: ..

개발 2023. 6. 19. 20:47

Vue 컴포넌트의 생명주기 훅은 컴포넌트의 생성부터 소멸까지의 일련의 과정에서 실행되는 함수입니다. 이 함수들은 컴포넌트의 초기화, 업데이트, 해제와 관련된 작업을 특정 시점에 수행할 수 있도록 도와줍니다. Vue에서 생명주기 훅을 사용하는 방법은 Options API와 Composition API에서 다소 차이가 있습니다. Options API에서 생명주기 훅 함수 사용법 Options API에서는 컴포넌트 내부에 생명주기 훅 함수를 정의하고, 그 안에 필요한 로직을 작성합니다. 예를 들어, mounted 훅을 사용하면 컴포넌트가 DOM에 마운트된 후에 실행되는 로직을 작성할 수 있습니다. mounted() { // 컴포넌트가 DOM에 마운트된 후 실행될 로직 } Composition API에서 생명주..

개발 2023. 6. 9. 17:48

프로젝트를 배포하려고 했을 때. jar와. war를 한 번쯤은 보았을 것이다. 자신이 만든 프로젝트를 배포하려고 할 때 어떠한 형태의 파일로 빌드하고 압축해야 하는지, 두 가지의 압축 파일이 어떤 차이가 있는지 알아보는 시간을 가져보자. JAR, WAR 이란? JAR (Java Archive, 자바 아카이브) ● 자바 플랫폼에 응용 소프트웨어나 라이브러리를 배포하기 위한 소프트웨어 패키지 파일 포맷이다. ● Class (Java 리소스, 속성 파일), 라이브러리 파일을 포함한다. ● JRE(JAVA Runtime Environment)만 있어도 실행이 가능하다 ※ (java -jar 실행하고자 하는 프로젝트 이름.jar) WAR (WEB Application Archive, 웹 어플리케이션 아카이브) ●..

개발 2023. 6. 2. 14:39

package.json?, npm?, VUE를 사용하다 보니 package.json, npm, node.js에 대해 궁금증이 생겼다. 그래서 이번에는 package.json과 npm의 단축키에 대해서 알아보도록 하자 package.json이란? package.json은 Node.js 프로젝트에서 사용되는 JSON형식의 구성 파일이다. 개발자가 배포한 패키지에 대해, 다른사람들이 관리하고 설치하기 쉽게 하기 위한 문서이다. 일반적으로 프로젝트의 이름, 버전, 저작권정보와 함께 사용되는 외부 라이브러리 및 패키지의 종속성을 명시한다. 그림과 같이 프로젝트에 관한 정보는 name과 version Name: 패키지의 이름 이름에는 규칙이 있다. 소문자로 작성되어야 한다. 한단어로 작성되어야 한다. 하이픈이나 언..

개발 2023. 5. 19. 16:54

피그마? UI 디자인 분야에서는 이미 몇해 전 부터 포토샵이 아닌 XD, 스케치(SKETCH), 피그마(FIGMA)와 같은 전용툴 인기를 끌고 있었습니다. 강력한 장점을 가진 스케치는 맥 전용이라는 치명적인 단점때문에 윈도우 사용자가 많은 우리 나라에서는 여러가지 어려움이 있었습니다. 오래되고 기능이 떨어지는 XD와 단점이 명확한 스케치 대신 무료(개인이 사용한다면) 프로그램이면서 XD나 스케치에 비해 모자라지 않거나 오히려 더 나은 성능을 보여주는 FIGMA가 자신의 입지를 높이며 탄탄하게 입지를 다지고 있습니다. 웹 기반 UI툴 FIGMA는 웹 기반 툴이기 때문에 브라우저에서 바로 실행을 할 수 있어 편의성이 대폭 강화되었으며, 저장이라는 개념이 존재하지 않기 때문에 실수로 작업중인 파일을 날리거나 ..

개발 2023. 5. 10. 18:12