반응형 분류 전체보기703 [NuxtJS] nuxtServerInit이란? nuxtServerInit NuxtJS의 라이프 사이클을 보면 최상단에 존재하는 nuxtServerInit이라는 녀석에 대해 의문을 가져본 적이 있을 것이다. nuxtServerInit은 단어 그대로 서버 측에서 실행되는 녀석인데, 특이하게도 NuxtJS의 universal 모드에서만 사용할 수 있는 action 함수이다. actions: { nuxtServerInit ({ commit }, { req }) { if (req.session.user) { commit('user', req.session.user) } } } 위 예제처럼 nuxtServerInit은 서버 사이드 렌더링 시점에 실행되기 때문에 미리 데이터를 설정해 놓고나 서버에서만 접근할 수 있는 데이터를 다룰 때 유용하다. 그리고 또 특이한.. 2023. 1. 17. [NuxtJS] asyncData와 fetch 비교 및 사용법 asyncData VS fetch NuxtJS를 사용하게 되면 자주 보게 되는 혹은 꼭 알고 있어야 하는 개념 중에 하나가 asyncData와 fetch가 아닐까 싶다. asyncData와 fetch의 경우에는 VueJS에서는 제공하지 않았던 것이기 때문에 Vue를 쓰다가 Nuxt를 사용하게 된다면 알고 가야 할 개념이다. 물론 그 뿐만아니라 vue랑은 lifecycle이 좀 달라졌기 때문에 전반적으로 새롭게 알아야 하는 개념들이 많아졌다. 라이프 사이클을 머릿속에 넣어두고 asyncData와 fetch에 대해 알아보자. asyncData 라이프 사이클을 보면 알겠지만 asyncData의 경우에는 서버사이드에서 실행되는 녀석이다. asyncData의 경우 아래와 같은 특징을 가진다. 서버사이드에서 실행된.. 2023. 1. 16. [NuxtJS] 빌드/운영 배포 시 console.log 제거하기 NuxtJS 빌드 시 console 제거하기 개발을 하다 보면 console.log를 쓰면서 확인을 해야 하는 경우가 많은데, 배포를 하면서 미처 지우지 못한 console.log의 잔해들이 남을 수 있다. 그럴 때 사용할 수 있는 두 가지 방법에 대해 기록해 둔다. 아 물론 이 방법들이 NuxtJS뿐만 아니라 다른 곳에서도 사용이 가능할 것으로 보이니 알아두면 좋을 것 같다. 1.babel-plugin-transform-remove-console babel의 플러그인을 사용하여 console을 지우는 방법이 존재한다. npm install --save-dev babel-plugin-transform-remove-console yarn add --dev babel-plugin-transform-remov.. 2023. 1. 14. [#경험담] 웹 개발자(SI/SM)의 경력직 이직 경험 및 후기 사실 이 글은 2022년 말에 작성한 회고글을 적기 이전에 먼저 적어두고 싶었는데, 까먹고 이제야 작성하는 글이다. 내가 굳이 제목에 SI/SM 개발자라고 적은 이유는 좀 안타까운 경우들이 많이 생길까 봐 찾아볼 때 도움이 되었으면 해서 그렇게 작성하였다. 내 미천한 경험들과 생각들이 누군가에게 도움이 되기를 바라며 끄적끄적 글을 써보도록 한다. 아 참고로 SI에서 4년 차라는 경력을 가지고 있었다. 1. 재직 중 이직 준비 VS 퇴사 후 이직 준비 이직을 결심한 순간 가장 처음 걸리는 게 현재 재직 중인 회사일 것이다. 과연 재직 중에 이직 준비를 해야 하는지 아니면 퇴사 후에 이직 준비를 해야 하는지가 처음 맞닥뜨리는 선택의 순간이다. 정해진 정답이 있는 건 아니지만 이건 지극히 개인적인 이유로 선택.. 2023. 1. 13. [MacOS] xcrun: error: invalid active developer path MacOS 업데이트 후 xcrun: error 해결하기 어김없이 맥북을 사용하다 에러가 발생하였다. 이 에러는 M1에서만 발생하는 에러가 아니라 다양한 글들이 작성된 날짜를 보아하니 오랫동안 존재해왔던 에러인듯하다. MacOS 업데이트 후 아주 높은 확률로 git을 비롯한 다수의 개발 툴들이 다 xcrun에러를 뱉게 된다고 한다. 나 역시 MacOS를 12버전을 사용하다가 MacOS 13 Ventura 버전으로 업데이트를 한 뒤, git을 사용할려다 보니까 xcrun: error를 뱉기에 매우 당황하였다. git # xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Libr.. 2023. 1. 10. [Node.js] change default node version from nvm (ft. node version list) nvm 기본 노드 버전 변경하기 nvm을 사용해 특정 버전의 node를 설치하게 되면 처음 설치한 그 버전이 자동으로 기본 버전으로 설정된다. 사실 nvm을 사용해 버전을 변경하다 보면 어차피 버전명을 입력하면 되기 때문에 크게 영향을 주는 부분은 아닌데, 이게 버전을 입력하다보면 좀 귀찮을 때가 많다. 하지만 default version의 경우에는 다음과 같은 명령어로 손쉽게 변경하여 사용이 가능하다. nvm use default 뭐 아무튼 일단 나 같은 경우에는 이런식의 default 사용이 편하기 때문에 변경하는 방법에 대해 기록해두고자 한다. 1. nvm default node version check 우선 목록을 살펴보면 다음과 같다. nvm list 현재 nvm으로 관리하고 있는 노드 버전은 .. 2023. 1. 9. [PhpStorm] snippet 추가 하기 (ft. Live Templates) Live Templates 추가하기 VSCode만 사용하던 나에게 PhpStorm이란 녀석은 참으로 낯설었다. WebStorm은 그나마 많이 들어봤는데 같은 곳에서 만들었나 보다. WebStorm을 사용해보지 않아서 PhpStorm과 동일한지는 알 수 없지만 같기를 소망한다. VSCode에서 확장플러그인을 설치하면 편리하게 snippet들을 제공해주어 개발에 편리한데, 이 phpstorm에는 이런 게 없나 찾아보다가 snippet과 동일한 Live Templates라는 녀석을 찾아내었다. 확인해보니 기본적으로 템플릿은 만들어주는 약어들이 등록되어 있었으나, 회사의 개발 환경이 Nuxt + Composition API + Typescript + SCSS이다 보니 이에 맞는 템플릿이 존재하지 않았다. 그래서.. 2023. 1. 8. [TISTORY] 티스토리에 코드펜(CodePen) 적용하기 티스토리에 코드펜 적용하기 티스토리에 CodePen을 적용하기 이전에 당연히 해당 사이트의 계정이 필요하다. https://codepen.io/trending CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 우선적으로 사이트에 계정이 있다는 가정하에 진행하도록 한다. 1. 코드펜 작업하기 로그인을 한 후 좌측 상단에 [Pen]이라는 메뉴를 선택해서 들어가 주도록 한다. Pen 메뉴에 들어가게 되면 코드를 입력할 수 있는 화면.. 2023. 1. 8. [CSS] 글자를 줄 바꿈 없이 한 줄로 표현하기 (ft. white-space/overflow/text-overflow) CSS를 통해 텍스트 글자를 줄 바꿈 없이 한 줄로 표현하는 방법에 대해 알아보자. 보통 글자가 길면 자동 줄바꿈이 일어나 표현되고는 하는데, 만약 칸의 여유가 없고 디자인적으로도 넘치는 부분을 잘라내고 한 줄로만 표현하고자 한다면 이는 javascript를 사용하지 않고도 css만으로도 표현이 가능하다. 가장 흔하게 알려진 방법으로는 이 아래 3가지 속성을 주로 사용하여 제어를 하는 방법이다. white-space : 요소 내부의 공백을 처리하는 방법에 대한 설정 ( normal|nowrap|pre|pre-line|pre-wrap|initial|inherit ) text-overflow : 공백 문자를 처리하는 법 즉, 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법에 대한 설정이며 잘리거나 .. 2023. 1. 7. 이전 1 2 3 4 5 6 7 8 ··· 79 다음 반응형
