yeeed_log

vscode로 웹을 개발하면서 무조건적으로 로컬을 열어 확인하게 된다. 이를테면 Live Server, npm을 사용한다면 npm start 같은 명령어를 사용해서 로컬 환경을 열게 된다. 하지만... 반응형을 고려한 웹사이트를 제작 중일 때, 혹은 모바일 환경에서 어떻게 보이는지 궁금할 때! 그럴 때 모바일로 로컬을 여는 방법에 대해서 작성해보려고 한다. pc에서도 확인할 수 있지만 실제 모바일 환경에서 보는 것과 조금 차이가 있기 때문에 웹 개발을 할 때 실제 모바일 환경에서 어떻게 표시되는지 확인 작업은 필수라고 볼 수 있다. 그럼 어떻게 모바일로 보는데? 1. PC와 모바일이 같은 와이파이를 잡는다. 이때 와이파이든 핫스팟이든 동일한 와이파이, 핫스팟을 잡아한다. 2. PC에서 와이파이 설정창을 ..

사건의 발단 styeld-components를 사용해서 스타일을 진행하던 중 갑자기 알 수 없는 경고 문구를 마주했다. 엥? 왜 갑자기... 이런 문구가 뜨는 거지?! 싶었지만 스타일드 컴포넌트를 함수 내에 작성하지 말라는 것 같다... 예를 들면 아래와 같이 작성해야 하는데, import styled from 'styled-components' const StyledSpan = styled.span` color: blue; ` const MyExampleComponent = () =>{ return Test } 바보처럼 함수 내에 작성하고 있던 것~~^^ import styled from 'styled-components' const MyExampleComponent = () =>{ const Styl..

import 경로가 신경 쓰이는 1인 리액트로 프로젝트 작업 중 import 하는 부분이 신경 쓰였다. (나만 신경 쓰이는 걸까?) 뎁스가 깊어지면 깊어질 수록 경로 참조하는 게 길어지니 너무너무너무너무 보기 싫은 것... 하지만 언제나 해결책은 있다. 찾다 보니 jsconfig.json 설정을 통해 import 경로를 설정할 수 있다고 한다! jsconfig.json 가 뭐냐고 jsconfig.json란? > 해당 프로젝트 디렉토리에 jsconfig.json 파일이 있으면 루트 디렉토리임을 명시. > 소스파일을 어떻게 해석하고 처리하는지에 대해서도 설정 가능. 여기서는 경로 설정만 다룰 예정이니 자세한 내용은 링크 참고! jsconfig.json Reference View the reference fo..

Welcome to Front-End world 시간을 거슬러 2월 초로 돌아가 보자. 멋쟁이사자처럼에서 프론트엔드스쿨 2기를 모집한다는 글을 보게 되면서 지원서 작성과, 1차 합격, 2차 사전과제 및 영상 과제를 모두 수행하고 프론트엔드스쿨에 최종합격하며 프론트엔드 과정을 시작하게 된다. 이 선택은 올해 들어 내가 제일 잘한 선택이라고 자부할 수 있다. 함께, 함께, 함께 모든 교육과정을 수료하고 난 뒤 지금의 나는 무엇이 달라졌나? 고작 HTML과 CSS, 자바스크립트의 변수 선언 정도만 할 줄 알던 내가 기어코 팀 프로젝트까지 성황리에 마무리하고 수료까지 했다. 적어도 코딩의 코 정도는 안다고 말할 수 있게 된 것 같다. (아직도 코린이는 여전하지만...) 멋쟁이사자처럼은 함께 성장하는 커뮤니티를 ..

지난 주 리액트 블로그과제를 다시 만들어보며 느낀 것은 props... 생각보다 쉬운 놈이라는 것. 원범님 말대로 별거아닌 놈(?) 이었다. 프롭스는 객체다. 함수의 매개변수 같은 것이다. 지금은 그냥 그렇게 이해하자 나는 초등학생이다~ 내가 처음부터 너무 많은 걸 고민했던 거지 (내 안좋은 버릇은 중 하나인 안해보고 걱정하기;; 정신체리자~) 자꾸 완벽하려고만 하다보니까 너무 어려운 것들을 찾아나서는 것 같다. 일단은 냅다 만들어보자. 이게 제일 중요한걸 아는데 진짜 잘안지켜지는 것 중 하나인듯; 시작은 늘 하지만...제대로 끝을 못내는게 이유또한 결과물이 완벽하지 않을까봐...ㅠㅠㅠ 이러나 저러나 정답은 없지만 어찌됐건 더 나은 코드를 찾고자 고민하는 시간인거니까 뭐가 됐든 킵 고잉하자 ! 빠샤! 생..

🤔 Git Commit Template 란? - commit 작성법을 규칙으로 정하고 그 규칙을 가이드할 수 있는 파일. 📋 템플릿 만들어보기 아래 템플릿 작성방법은 💻 MAC 기준입니다. 1. 프로젝트 최상위 경로에 템플릿 파일을 생성 - 터미널을 진입 후 명령어로 파일 생성. 이때 파일 이름은 정해진 규칙 없이 자유롭게 작성하면 된다. - touch : 파일 생성 - {.gitmessage.txt} : 앞에 붙은 온점은 숨김 파일을 뜻한다. 텍스트 파일로 만들 거기 때문에 확장자는. txt를 붙여준다. touch .gitmessage.txt 2. 텍스트 에디터로 파일을 실행해 편집 (vim사용) vim .gitmessage.txt 3. 커밋 메시지 템플릿 작성 - # 으로 시작하는 줄은 주석 처리된다..

Fix: "버그 수정" 리액트 페이지 클론 시 url 설정에서 에러를 만났다. 리액트... 왜 이렇게 어려운데 ㅍ__ㅍ 마주하는 것마다 늘 새로운 것투성이다. 그래서 재밌는 거지만 내 마음이 너무 조급 할 뿐인 거지... 아무튼 해결했다. 이젠 작든 크든 오류를 만나면 무엇이든 냅다 기록을 하자! 스쳐지나 보낸 기억들이 너무 많아 8ㅅ8 실제로 사소한 오류들을 만난 일은 많지만 기록을 하지 않음으로써 흘려보낸 기억들이 너무나도 많다. 꼭 꼭 기록으로 쌓아둘 것. React/ gh-pages로 배포어떻게 하는데... 개인적인 해결 방법을 적었습니다. 문제가 있다면 댓글로 알려주세요! 문제의 시작 리액트로 작업한 결과물을 깃헙에서 제공해주는 pages기능을 이용해 배포해보고자 열심히 찾아서 빌드하고 npm ..

git pull을 사용하다가 다른 사람이 수정한 코드를 내 코드로 덮어 씌우게 된 상황이 발생했다... 정확히는 원격 저장소의 변경사항을 받아오는 방법을 잘 몰랐기에 일어난 실수 🥲 그래서 다시 한번 정리를 해보려 한다! 원격 저장소의 변경사항을 받아오기 위한 방법은 두 가지가 있다 git fetch git pull 간단히 두 개의 명령어를 살펴보면 이렇다. fetch 원격 저장소의 데이터를 내 로컬에 가져오기만 하는 작업 변경사항을 확인 가능 pull 원격 저장소의 내용을 가져오고 자동으로 병합 git pull은 간단한 명령어로 동작하고 자동으로 병합까지 해주니 편리하기까지 하다. 하지만 무엇이 바뀌었는지 변경사항을 알려주지는 않는다. 그렇기 때문에 변경사항들을 확인하고 적절히 병합하여 원격 저장소에 ..

개인적인 해결 방법을 적었습니다. 문제가 있다면 댓글로 알려주세요! 문제의 시작 리액트로 작업한 결과물을 깃헙에서 제공해주는 pages기능을 이용해 배포해보고자 열심히 찾아서 빌드하고 npm run deploy.... 명령어 열심히 쳐서 배포 뙇! 했는데. ... 아무것도 나오지 않았다... 분명 내 로컬환경에서 npm start 로 실행시키면 잘만나오는데!! 왜 배포하니까 안나오는거지?! 이유를 찾다 create-react-app로 개발한 리액트 프로젝트는 기본적으로 루트(/) URL을 기준으로 프로젝트가 생성된다. GitHub는 gh-pages페이지방식이 조금 이상했다. 내깃허브아이디.github.io/페이지 이게아니라 내깃허브아이디.github.io/ 레파지토리명 / 페이지 이런 방식이었다. 그래서..

밴딩 머신 졸업 🎓 드디어 밴머 졸업했다. ^^7 생각보다 오래 걸렸고, 생각보다 얻은 게 많았다. 늦은 새벽까지 도움을 준 우리 회고팀, 갓 원범님 모두 감사드립니다. 현재 내 코드를 돌아보면 만족스럽지 않은 부분이 많다. 구현하지 못했던 부분들도 눈에 밟힌다... 하지만 어쩌겠는가, 그 코드는 나의 최선이었음을... 원범님과 함께 코드를 짜고 있노라면 정말이지 생각지 못한 부분들을 많이 마주하게 된다. 우선 함수를 만들 때 악덕업주가 되지 말라고 했다. 함수에게는 단 한 가지의 일만 시키도록해야한다. 더불어 불필요한 코드를 없애는 리팩토링을 경험했다. function itemMoveInCart(item, event) { // 아이템 새로 생성 const drinkItemTitle = item.quer..