Programming153

• [Vue2] mapGetters로 가져온 값을 watch하는 법 isLogin(newVal, oldVal) { ... } Programming/Vue 2023. 5. 16.

• 

  [리팩토링 개정판] 01. 리팩터링: 첫 번째 예시 프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기쉬운 형태로 리팩터링하고 나서 원하는 기능을 추가한다. -p.27 리팩터링하기 전에 제대로 된 테스트부터 마련한다. 테스트는 반드시 자가진단하도록 만든다. -p.28 아무리 간단한 수정이라도 리팩터링 후에는 항상 테스트하는 습관을 들이는 것이 바람직하다. -p.32 나는 함수의 반환 값에는 항상 result라는 이름을 쓴다. 그러면 그 변수의 역할을 쉽게 알 수 있다. -p.34 자바스크립트와 같은 동적 타입 언어를 사용할 때는 타입이 드러나게 작성하면 도움된다. 그래서 나는 매개변수 이름에 접두어로 타입 이름을 적는데, 지금처럼 매개변수의 역할이 뚜렷하지 않을 때는 부정 관사(a/an)를 붙인다. 변수 인라인(외부에 두지 않.. Programming/Computer Science 2023. 5. 9.

• 

  [Nuxt.js] Vuex state가 변경되어도 자동으로 update되지 않는 layout 컴포넌트 업데이트시키기 Nuxt.js의 경우 layout 폴더에 따로 분류된 컴포넌트들은 Vuex state가 변경되어도 자동으로 업데이트되고 캐싱된 값을 사용한다. 그래서 일종의 강제 리렌더링이 필요하다.이 때, Nuxt의 $store.subscribe() 함수를 사용해 mutation이 일어날 때마다 말 그대로 그 변화를 '구독'할 수 있다.그러나, 이 방법은 코드를 더 복잡하게 만드는 방법이므로 computed를 사용할 것을 권장하고 있다. 빠른 시간 내에 업무를 처리하려다보니 이런 코드를 사용하게 됐는데, 간편하고 보기도 좋으며 Nuxt(Vue)의 Lifecycle을 자연스럽게 따라가는 computed를 대신 사용하자!예시 코드created() { ... if (this.isLogin) { this... Programming/Vue 2023. 4. 25.

• [CSS] transform 속성 사용자에게 특정 팝업(div로 만드는 간단한 팝업)을 보여주려고 하는데, 우선 중앙정렬 하도록 하기 위해서 최상단 div 태그에 top: 50%;, left: 50%; 로 지정해주었다. 그런데 몇 십 픽셀 정도 묘하게 어긋나서 이유를 알아보니 div의 왼쪽 상단 모서리를 기준으로 위치가 산정되기 때문이었다. 이 때 사용하면 좋은 것이 transform 속성이다. transform은 요소에 이동(transform), 회전(rotate), 확대/축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 애니메이션이 필요하다면 트랜지션이나 애니메이션과 함께 사용하고, 아무것도 사용하지 않으면 바로 해당 속성이 적용되어 렌더링 될 것이다. transform 함수들 transform functi.. Programming/HTML, CSS 2023. 3. 31.

• 

  Command Prompt(CMD), Git bash, PowerShell VSCode를 사용하다 보면, 아래와 같이 터미널에 여러 버전이 있는 것을 볼 수 있다. 싸피에서 개발을 시작할 때부터 Windows 환경에서 Git Bash만 계속 써오던 나는 이 다양한 터미널들에 대해 자세히 알아본 적이 없었다. 하지만 실제로 일을 하면서부터는 모르는 게 조금 부끄러워져서 정리해본다. 터미널이란? 먼저 잘 모르고 사용했던 '터미널'이라는 단어부터 정리해보자. 터미널은 원래 유닉스 기반의 컴퓨터에서 복수의 사용자들이 하나의 컴퓨터에 접속하기 위해 사용했던 단말이었다고 한다. 이제 Personal한 컴퓨터를 사용하기 위해 필요가 없어진 터미널, 그 의미가 변화해서 명령어 입력을 통해 컴퓨터를 직접 제어하기 위한 소프트웨어라는 뜻을 가진다. 그리고 모든 운영체제는 기본적인 터미널을 내장하.. Programming/ETC 2023. 3. 27.

• [Node.js] path 모듈 홈페이지를 만들면서 배웠듯 운영체제마다 다른 문자로 디렉토리 구조를 표현한다. Unix 계열은 /, Windows는 \를 사용한다. 따라서 파일이나 디렉토리의 경로를 단순히 문자열을 이용하여 접근하면 프로그램이 특정 운영체제에서만 돌아갈 위험이 생긴다. 그래서 Node.js에서는 기본적으로 path 모듈을 제공해 JS 개발자들이 이러한 위험 없이 경로를 다룰 수 있도록 도와주는 것이다. Next.js 13버전으로 홈페이지를 만들고 있는데, Vercel에 배포하려고 하니 관련된 에러를 밷어 것 같아 이 방식으로 해결했다. 동료분이 말씀해주실 때 미리 도입해 놓을걸 ^^ 불러오기 import path from "path"; Join(): 경로 만들기 여러 개의 문자열을 가변 인자로 받아서 하나의 완전한 경로.. Programming/ETC 2023. 3. 27.

• 

  [iOS] button 요소에 color를 지정하지 않으면 safari 브라우저에서 버튼 텍스트가 파란색(-apple-system-blue)로 표시된다 만년 갤럭시 유저인 나(최근 산 아이패드 제외!)... 회사 서비스 404 페이지를 만들고 당당하게 담당자분께 보고했는데, 사파리에서만 버튼이 파란색으로 표시됨을 전달받았다. 알고 보니 사파리에서는 button 요소에 color가 지정되어 있지 않으면 기본으로 -apple-system-blue 색상을 할당한다고 한다. 따로 color를 지정해주면 쉽게 해결 된다! How to avoid safari adding -apple-system-blue to my button I'm loading a website through an iFrame in my ionic app. I realize that every button turned blue. I've searched a little bit and I fou.. Programming/HTML, CSS 2023. 3. 20.