꿈이 많은 어른 아이

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 홈페이지를 만들기 위해 간략하게나마 전체적인 그림을 머리 속에 정리하고 진행하려한다.개인 프로젝트로 진행되지만 컴포넌트를 나누거나 틀을 나눌 때도 머리속에 그려지기 쉽게 나눌 수 있다. 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의..

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- Module build failed (from ./node_modules/sass-loader/dist/cjs.js): scss로 변환하면서 @mixin 메서드를 사용하려 하니 오류가 생긴다. 변수 값도 읽어내지 못한다. 에러를 읽어보니 sass-loader의 문제인것 같은데 왜 그런지 찾아..

React나 Vue를 사용하는 과정에서 늘 항상 함께하는 단어들은 웹팩(Webpack)과 바벨(Babel)이다. 개발을 해보겠다고 이것저것 사용해봤지만 퍼블리싱에 가까운, 겉핥기 수준에서의 장난에서 좀 벗어나고자 개념들을 이해해보려고 한다. 머리 속으로만 기억하면 또 까먹을것이 뻔하기 때문에 다시 개념을 정리하고 기록해두려 한다. 웹팩(Webpack)이란 자바스크립트 애플리케이션을 위한 모듈 번들러(module bundler)를 의미한다. 최신 프론트엔트 프레임워크(Framework)에서 가장 많이 사용된다. 그럼 프레임워크는 뭘까? 프레임워크 (Framework) 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조이며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. 흔히 라이브..

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- css로 만들었던 파일을 scss로 바꾸어 정리해보려고 한다. 과연 css와 sass/scss의 차이는 무엇일까? CSS : Cascading Style Sheets - 종속형 시트SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트SCS..

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 이전에 만들어 뒀던 html을 vue로 변환하는 작업을 해보자.나는 HelloWorld를 Home이라고 바꾼후 이전에 html로 되어있던 부분을 template에 바꾸어 넣었다. 그리고 css는 bootstrap을 이용해서 변환할 예정이다. https://getbootstrap.kr/docs..

노트북이 없어 학교 노트북을 빌려 사용하던 나는 갑자기 나에게 투자한다라는 비장한 마음이 들어 중고로 맥북을 구매하게 되었다. 윈도우뿐만 아니라 맥으로도 개발작업을 한다는 이야기를 듣고 구매.. 했다고 하기엔 그냥 많이 이뻐서 구매했다. 스타벅스 이용권 구매한 기분이랄까. 여튼 이전에 윈도우에서 작업했던 부분을 맥으로도 옮겨야할텐데 하며 깃배쉬를 깔려 했더니 이것도 영 쉽지 않았다. 그래서 잊어버리기 전에 정리를 좀 해보려한다. 1. 터미널 실행 맥은 기본적으로 쉘이 zsh로 설정되어 있다. 윈도우의 cmd와는 조금 다르지만, 크게 차이점은 없다. 쉘(Shell)은 명령어와 프로그램을 실행할 때 사용하는 인터페이스를 의미한다. 커널(Kernel)과 사용자간의 다리 역할을 하는 것으로, 사용자로부터 명령을..

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 이전에 만들고 있었던 나를 소개하는 홈페이지를 Vue.js 를 이용해서 다시 만들어보려고 한다. 이전에 바닐라js로 끄적여보고 React로도 끄적여봤는데, 다양한 툴 중에서 많은 사람들이 왜 Vue를 쓰는 이유를 알고 싶었다. 카카오 직원들도 Vue, React 반반 정도라고 하는데 왜 나누..

Git 명령어 정리 Git을 항상 사용하지만 기본적인 이해와 활용이 부족한 것 같아 주요 명령어들을 정리해 보았다. 모든 명령어 뒤에 --help 옵션을 사용해 활용 가능한 옵션을 더 알아 볼 수 있다. Ctrl + F 를 이용해 찾기 기능 사용할 수 있다. git init git 초기화를 의미한다. git status 현재 git 프로젝트에서 파일들의 상태를 보여준다. 현재 브랜치와 커밋 상태, 작업 중인 파일의 상태 등을 확인할 수 있다. git add 파일의 변경사항을 인덱스index에 추가한다. 스테이징 영역으로 추가된 변경 이력만 commit 할 수 있다. git add [-A] [..] # 모든 변경점 추가 git add -A # Readme.md 파일 추가 git add Readme.md g..

한 프로젝트에 여러명의 개발자가 함께 할 때, 동일한 소스 코드 위에서 각자 맡은 부분에 따라 제각기 개발이 이뤄진다. 그렇기 때문에 각각 서로 다른 버전의 코드가 만들어 질 수 밖에 없다. 이럴 때 여러 개발자들이 동시에 다양한 작업을 진행할 수 있도록 하는 기능이 브랜치(Branch) 이다. 각자 독립적인 작업 영역에서 마음대로 작업을 진행하고, 나중에 원래의 버전과 비교해서 새로운 버전으로 만들어 낼 수 있다. 마스터 브랜치 (Master) 나무로 치면 기둥이 되어주는 브랜치로 저장소를 처음 만들때 생기는 브랜치이다. 작업 브랜치는 마스터를 기준으로 뻗어나갈 수 있다. 통합 브랜치 (Intergration) 언제든지 배포할 수 있는 버전을 만들 수 있어야 하는 브랜치이다. 그렇기 때문에 늘 안정적인..

운이 좋게 처음 프로젝트 때 부터 git을 사용했는데, 매번 할 때 마다 구글링을 해야하니 이건 아직 내 것이 되지 못했구나 하는 생각이 들었다. 하나씩 정리해보자. Git 은 소스 코드를 효과적으로 전달하기 위해 개발된 분산형 버전 관리 시스템 이다. 원래는 Linux 소스 코드를 관리할 목적으로 개발되었다고 한다. 내가 올리려는 파일이 누군가 편집한 파일의 내용과 충돌하는 것을 방지하고자 사용한다. Git에서는 소스 코드가 변경된 이력을 확인할 수 있고, 특정 시점으로 비교할 수 있으며 그 시점으로 돌아갈 수도 있다. ​평소에는 로컬 저장소(Repository)에서 작업을 하다가 작업한 내용을 공개, 공유가 필요할 때에는 원격 저장소에 업로드할 수 있다.​ 커밋을 통해 파일 및 폴더의 추가/변경 사항..