전체 글99 [Next.js] Atomic을 지나 FSD를 거쳐서 태초마을로 오기까지 태초마을로 오기 전까지의 우리 팀 프로젝트 구조는아마 AI도 이해를 포기할법한 아키텍쳐였을 것이다.2023년 11월, 약 4년만에 프론트엔드 바닥에 다시 들어왔다.2-3년차 연차만 2명 있는 프론트파트였다. (나의 수습 기간이 끝나기도 전에 그 중 1명은 퇴사했으니 1명이려나)이러나 저러나 연차로만 따지면 내가 제일 높아서 직급도 내가 위였다. 최근 4년동안은 개발자라기 보단 직장인에 가까웠다.개발 공부보다 재테크 공부가 재밌기도 했고(크흠), 전 회사 분위기가 안정형을 추구했다.잘 돌아가고 있는 서비스, 잘 나오는 매출, 게임 수명이 언제 다 할지 모르는데, 굳이 최신 기술 사용해보겠다고? 버전 업을 한다고? 그런 부분에 갈증을 느끼며 지금 팀에 합류하였는데, 확실히 그런 부분에선 달랐다.최신 기술과 .. 2025. 4. 2. [Next.js] export const dynamic = 'force-dynamic' 현생이 바쁘고... 문서는 회사 위키에 남기다보니오랜만에 내 블로그에 남겨보는 이슈 흔적... 너무 소홀했다cms에 컨텐츠를 등록했는데, 새로고침을 해도 리스트에 바로 반영되지 않는 이슈가 발생하였다.백엔드에서 캐싱한 데이터를 내려줄거라 생각하고 문의드렸더니, 캐싱하지 않는다는 답변이 돌아옴 Next.js 14와 React Query를 사용하고 있어서, 분명 둘 중 한 곳의 캐싱 문제일거라 생각하였다.나는 React Query에 꽂혀서 이것저것 시도해보며 열심히 삽질 하고 있었는데,저쪽 어깨너머 희미하게 들려오는 "서버 컴포넌트 캐싱 문제같아요. 해결했어요"export const dynamic = 'force-dynamic'올라온 MR을 확인해보니 요 한줄이 추가되었다. https://nex.. 2025. 2. 4. [Next.js] 사이드 프로젝트 초기 셋팅하기 next.js + recoil + typescript + SCSS(or stylex) 조합으로 사용할 예정. 1. Next.js 설치npx create-next-app@latestWhat is your project named? -> 프로젝트 이름Would you like to use TypeScript? -> 타입스크립트 사용할건지?Would you like to use ESLint? -> ESLint 쓸건지? 아마 airbnb로 쓸거같은데.. 일단 yesWould you like to use Tailwind CSS? -> scss module이나 stylex 사용해볼거같아서 noWould you like to use `src/` directory? -> src 디렉토리 사용할건지? 이건 개취일듯. 하.. 2024. 5. 27. Ubuntu에 nginx + php(php-fpm) + mysql 셋팅하기 https://blog.shako.net/installing-lemp-stack-on-ubuntu-server-16-04/ 이거대로 하면 그냥 바로된다~참고로 오늘기준으로 php-fpm이 7.2 버전으로 깔리기 때문에7.0으로 되어있는 것들을 7.2로 바꿔주고 셋팅해주면 된다. 2019. 2. 8. [Vue.js] ubuntu에 nginx 설치하고 vue.js 설치하기 Vue.js를 Ubuntu(18.04)에 배포하기 본격적인 설명에 앞서, 아주아주 퓨어한 Ubuntu 환경에서 nginx를 설치하고 vue 첫 페이지가 보여지도록 하는 것이 목표이다.환경은 ubuntu 18.04 / nginx 1.14.0 1. 서버 접속$ ssh root@111.111.11.11언제나 그렇듯 서버에 접속한다.root 계정으로 111.111.11.11 IP를 가지는 서버에 접속한다.비밀번호를 입력하고 서버에 딱 들어옴 2. nginx 설치$ sudo apt update$ sudo apt upgrade위와 같이 업데이트/업그레이드를 해준 후,$ sudo apt-get install nginxnginx를 설치한다. 그리고 nginx를 테스트하기 전에 방화벽 소프트웨어를 조정하여 서비스에 액.. 2019. 2. 1. [Vue.js] url 뒤에 붙는 #(hashtag) 없애기 브라우저로 볼 때 자꾸 url 뒤에 #이 붙는다.예를들어 http://127.0.0.1:8080/#/ 이런식으로vue-router 설정인 src/router/index.js에 한 줄만 추가해주면 된다. (vue cli를 이용하여 webpack 사용) import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, ], }); mode: 'history.. 2019. 1. 13. [vue.js] Eventbus 만들기 이벤트버스는 vuex사용하지 않은 상태로부모자식간에 데이터를 주고받기 위해 사용하였는데,사용하다보니 vuex를 사용하는 것이 가장 베스트일거라는 생각이 들었다. main.js Vue.prototype.$EventBus = new Vue() a.vue (이벤트버스 발송하는 곳) export default {...methods: {sendEventbus: function() {this.$EventBus.$emit("result", "오오")}}...}오오 보내기이런식으로 연결해놓는다. b.vue (이벤트버스 받는 곳)export default {...created() {this.$EventBus.$on("result", function(data){console.log(data)})}...)이벤트버스는 cre.. 2018. 10. 22. [Vue.js] 페이징 로직 Previous 1 ... {{ n }} ... {{ results.totalPages }} Next showPagingButton: function(n) { const vm = this var thisPage = vm.results.number + 1 var totalPage = vm.results.totalPages + 1 //[조건] 5페이지가 넘어가면 //[결과] 1 ~ 4페이지 숨겨주기 var cond1 = (thisPage 5) //[조건] 마지막페이지 ~ 마지막페이지-4 까지이면 //[결과] 마지막페이지-4를 제외한 나머지 페이지들 숨겨주기 var cond2 = (thisPage > (totalPage - 5)) && (n < (totalPage - 5)) //[조건].. 2018. 10. 22. [Vue.js] promise 사용하기 promise를 사용하여 api콜하는 부분을 디자인해주었음mixin의 promise부분을 살리고 vm.promise(function)와 같이 사용하면 될듯then 안에서 promise가 리턴되어야 그 결과값을 바탕으로 다음 then으로 넘어감 mixin.js export default { methods: { promise: function(func){ //프로미스 만들기 return new Promise(function(resolve, reject){ resolve(func()) }) }, call: function(action) { var vm = this var successResult vm.promise(function(){ if (action.confirmMsg !== undefined) retu.. 2018. 9. 20. 이전 1 2 3 4 ··· 11 다음
