💡dding's TIL

항상 git에게 항상 졌었지만..! 오늘 처음으로 br의 도움으로 다행히 선방했다.. 휴 😕git pull을 하는데 아래와 같은 메시지가 뜨면서 계속 pull이 안됐다:hint: Pulling without specifying how to reconcile diver

node는 node사이트에 가서 설치하면 끝!위 코드를 터미널에 검색해보기! 설치 되어 있다면? 아래 코드를 작성해주면 설치 끝! 설치가 잘되었는지 확인하기 위해 아래 코드로 확인해주기 원래 위 방법대로 간단히!! 설치되어야 했지만 난 안됐다 그렇다면 아래와 같이 해주

CSS 전 처리기라고 말하기도하고, CSS Preprocessor라고 말하기도 함CSS 동작하기 전에 SCSS로 손쉽게 작성한 후 css로 변경하여 사용할 수 있음Sass는 {}, ; 등의 기호들을 사용하지 않고 css처럼 작성할 수 있으나 막상 기호들 없이 작성하다보

프로젝트를 진행하면서 아주 간단한 코드인 것을 알지만 빨리빨리 코드가 작성되지 않아서 슬펐다ㅠ 그리고 아무래도 프로젝트를 하다보니 사진, 디자인 등 코드 외 부분에도 시간을 많이 할애해야해서아쉬움이 있었다. 내가 아직 많이 부족하기에 더 공부할 시간이 부족해졌기 때문.

언젠가 또 하게 될 것 같아 순서대로 기록해둬야겠다! 검색하느라 시간이 너무 오래걸리는 것 같다ㅜㅜ 일단 나는 zsh, iterm이 설치되어져 있는 상황에서 vscode를 열었을 때 왼쪽에 나타나는 경로 나오는 부분을 수정하고 싶었다 이름@이름macbookair 첫

오늘도 코딩을 하다가....하다가... 원하는대로 동작되도록 코드를 짜다보니 대기시켜놓는 코드들이 많아졌다..ㅜㅜ 아예 틀린 방법은 아닌 것 같아서 시도해보다가 또 새롭게 코드를 적어보는 일이나 참고할만한 코드를 복사해서 보면서하는 일들이 많아지다보니 주석의 색이 너무

그래도 차마 양심상 vscode를 켜지않을 수 없어 밤 10시에 유트브 클론하던 파일을 열었다 완성버전은 아니지만 오늘 조금이라도 코딩을 한 것이 뿌듯해서 기록!! 🔥👩🏻‍💻

markdown은 해당파일의 내용을 요약, 정리해서 한번에 보여주고자할 때 사용한다 markdown이 github에서 어떻게 보여질지 모르겠을 때는 ❗️우측 상단의 미리보기 아이콘❗️을 통해 미리 확인할 수 있다 (궁금한 부분 그때그때 찾아가면서 하느라고 미리보기 몰라

: header를 표현하여 폰트가 bold하게 표현, 기본적으로 오른쪽 정렬기본값은 왼쪽 정렬이되 : 기호를 통해 가운데 정렬, 왼쪽 정렬을 할 수 있다: 가운데 정렬: 오른쪽 정렬원래 html처럼 내용들을 넣을 수 있다 기존 html작성하듯 작성하면 된다 style이

첫 가입 시 유효기간 3개월 동안 사용할 수 있는 서버이용료 10만크래딧(약 10만원)을 받을 수 있다원래 월 13,000원짜리 서버이고, 사실 이 정도 서버는 굉장히 버벅되고 좋지않은 사항이라고한다단, platform의 classic으로 설정해놓아야함(나중에 clas

내가 다루고 있는 프로젝트에서 다루는 패키지들을 관리해준다 (전체가 아니라)최고 권위자 root파일로 들어가기file을 만드는 명령어 mkdir만든 폴더로 들어가기node.js로 프로젝트 시작하기 위해 초기화 작업프로젝트 시작하겠다author : 이름 적어주기, git

eslint는 javascript에서 잘못작성한 문법을 잡아내는 역할을 한다 그러나 아래처럼 문자형을 숫자형으로 넣어도 잡아내지 못하고 NaN을 추출할 수 있을 뿐이다.. 이러한 이유로 Typescript를 설치하여 사용하는 것을 권장한다 설치했다면 타입스크립트를 적용

[JSDoc] 주석을 고급 개발처럼 보이게 달아주는 기능 : '/* /'형태 협업할 때 라이브러리, 코드에 대해 jsdoc를 통해 자세히 설명해 놓는 것을 권장 아래와 같이 주석을 작성해주게 되면 나중에 해당 함수를 작성할 때 'hello'함수에 mouseover만 해

yarn init -yyarn add -D prettier로 설치".prettierrc"이름으로 파일 생성한 후 아래 코드 넣어주기prettier가 설치되어있는지 확인해야함 (설치하고 봤는데 안됐음.. )그래도 안되면 아래 내용 따라서 생성하기 1) 같은 파일의 폴더명

위 2개만 작성해주면된다 그리고 작성하려는 js파일 최상단에 //@ts-check주석처리된 위 코드한줄만 넣어주면 끝이다 !

app.use('/', (req, res) => { res.send('hello');});위 코드의 app.use는 미들웨어를 사용하는 경우이다. cloud의 post, put, delete 등으로 데이터를 불러오고 수정하고 지울 때 위와 같은 코드를 활용해서 작성할

1) ".vscode"폴더 만들기2) .vsscode안에 "settings.json"파일 만들기3) 2번 파일에 아래 코드 작성하여 세팅해주기1) 아래 프리티어 코드 터미널에 작성하여 설치하기2) ".prettierrc"파일 만들어서 안에 기본 세팅 코드 넣어주기1)

리액트에서 npm start를 해도, nodemon을 해도 열리지가 않는다..... package.json을 봐도 "react-scripts"가 잘 설치되어져있는데 그래도 에러가 떴다찾아보니 npm 버전 문제일 수 있다고 해서 \-> 터미널에 'npm update'를

html, css를 사용하다가 react를 사용하다보면 하나씩 다 직접 작성해줘야하는 불편함이 있다ㅜㅜ 리액트로 보다 빠르게 코드를 작성하기 위해 아래 스니핏을 설치하는 것을 추천한다. 설치하고 나면 react에서 작성할 때 'rfc'만 작성하여도 아래 기본 리액트 세

특별히 잘못될만한 부분이 없는데 모든 jsx파일의 첫번째 단어에 빨간 밑줄이 생기는 에러가 발생하였다. 대부분 첫번째 단어가 export라서 export하는 부분에 문제가 발생한줄 알았다..그러나 eslint 설정이 제대로 되어있지않으면 작동이 제대로 되지않아 발생하는

creat-react-app의 이름에 대문자가 있다면 이런 오류가 뜨게 됩니다. 소문자로 작성하면 됩니다~'virtual keyboard'이렇게 작성하더라도 폴더 이름은 'virtual'앞 단어만 인식되어 생성되니 붙여서 작성하는 것을 권장합니다.

하다보면 아무래도 다양한 config, plugin을 설치할 때가 있다. 그때마다 -D, --save-dev, --save-exact 등 여러가지가 있어 헷갈릴 때가 있다. 헷갈린다기보단 의미를 잘 모르고 일단 사용한다는 말이 더 정확한 것 같다 그 중 --save-e

⬇️ 에러문구remote: Permission to Billy-FE/webpack-boilerplate.git denied to ddingyull.fatal: unable to access 'https://github.com/Billy-FE/webpack-bo

리액트로 mbti게임을 만들었다 (하이브리드 웹/앱)기획&설계팀의 부족함으로 브라우저 back버튼 설계와 개발할 때 back버튼의 history가 다른 이슈가 발생하여 꽤나 번거로운 수정작업을 진행했었다. 그 와중에 mbti게임 부분의 back 관련 이슈를 내가 수정하

실제로 회사에서 개바을 핟보니 주석을 사용할 일이 점점 더 다양해졌다.동료를 통해 꿀팁으로 사용할 수 있는 익스텐션을 추천받아 설치하고 사용하는데 꽤나 만족스럽다 ㅎㅎ vscode 익스텐션 최고!! 아래 보여지는 Better Commnets 익스텐션을 설치 (vscod

터무니없는 실수이기에 더 기억하고 다시는 실수하지 말자!라는 마음으로 기록!! 댓글 신고하기 기능을 구현하는 것이 목적이였다 댓글의 우측 삳단 더보기 버튼을 선택Drawer 오픈내가 작성자일 경우 댓글 수정 / 삭제하기 버튼을 노출 + 내가 작성자가 아닐 경우 댓글달기

트위터 공유하기 구현 성공 하고나면 별거아니였지만 찾아 헤맸던 결정적인 oprion은 'card'속성이다리액트로 sns 공유하기 기능을 구현하다보니 서버사이드렌더 관련된 문제로인하여 mata의 data를 토대로 공유하기 컨텐츠를 만드는 현재의 개발 방식엔 문제가 생겼

보통 앱의 메인페이지엔 2-3개의 이미지가 슬라이드되며 노출된다.오늘은 그 기능을 구현했다.직접 뒤로가기, 앞으로가기 컨트롤하는 버전은 아니고 기본적으로 캐러쉘 자체에 탑재되어있는 기능이 많으니 손쉽게 사용할 수 있다.보안의 문제로 여러개 옵션은 작성하지 않았지만 대략

프론트엔드의 경우 svg, png, jpeg 등 다양한 형식의 이미지, 아이콘들을 사용할 일들이 있다. 특히 내가 그렇다 ㅎㅎ css는 속이 시원할만큼 잘 될 때도 있고,말이 안될만큼 움직이지 않을 때도 있다. 이번에 footer의 아이콘들을 바꾸는 간단한 작업이였지만

버튼 disable처리된 상태일 때 클릭 이벤트 버그가 있어 수정했다.버튼이 항상 bottom:0으로 하단에 있다보니 버튼이 diabled되어있는 상태에서 스크롤을 내리다가 클릭이벤트가 있는 요소와 겹칠 경우 겹쳐있는 아래 요소의 클릭이벤트가 진행되는 문제였다. dis

https://www.npmjs.com/package/cheeriocheerio는 HTML에서 document.querySelector()처럼 HTML 요소를 골라낼 수 있는 라이브러리이다.

요청받은 버그를 해결하기 위해 안드로이드 빌드를 해서 dev에서 수정하고 STG에서 확인해서 최종 완료 처리를 해야했다. 😅 aos 개발 경험이 별로 없어 걱정 되는 마음으로 빌드를 진행했다. env파일의 이름은 다를 수 있으나 난 로컬에서 확인할 때는 .env.de

성능 최적화를 위해 사용되는 리액트 훅React 컴포넌트가 렌더링될 때마다 해당 컴포넌트 내부의 함수들도 새로 생성되는데 컴포넌트 구조가 복잡해지고 하위 컴포넌트들이 불필요하게 리렌더링될 때 성능 문제가 발생할 수 있음 특히 함수형 컴포넌트 내부에서 정의된 함수들은

안드로이드 빌드하다가 ctrl+c, enter 뭘해도 나오던 문구... 사라지지 않아서 nbsp를 잘못 쓴 곳이 있나 찾아봐도 찾지 못하다가 zshrc를 통해 원인을 찾고 해결해서 기록해둔다 😇(사실 너무 별거 아니라서 어이없지만... ㅎㅎ )🚨 prompt_con

다른 환경에서도 작동할 수 있도록, 즉 aos에서만 되던 기능을 ios에서도 작동할 수 있도록 하는 것텍스트A를 B에서도 이용할 수 있도록 사용하는 언어를 바꿔주는 것, 즉 리액트가 사용된 코드를 뷰로 바꿔주는 것

이벤트는 웹 브라우저의 히스토리 스택에서 상태가 변경될 때 발생하는 이벤트입니다. 이 이벤트는 주로 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 페이지를 탐색하거나 JavaScript를 사용하여 브라우저 히스토리를 조작할 때 유용하게 활용됩니다.popstate

이제 막 1년이 넘어 2년차 프론트엔드 개발자가 되었다. 점점 더 궁금한 부분들이 많아 찾아보게되는데 대부분 일을 관리하는 개인 노션에 적다보니 아쉽다는 생각이 들어 블로그에도 적어보려 한다. 타입을 정의할 때 같은 string이더라도 어떻게 정의하는지 다르다. typ

Failed to read a named property 'toJSON' from 'Window': Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.c

오늘 일하는 중 시간적 여유가 생겨 이때다 싶어 보기 불편했던 코드를 보다 간편하게 수정했다. 수정한 부분은 마이페이지의 프로필 변경 함수이다. 새로운 제품들이 들어오고 UI도 함께 리뉴얼 시키면서 프로필이미지를 설정하는 부분들의 UI도 함께 수정되었다. 그러면서 이번

프론트엔드 개발자로 일하면서 지식의 부족함을 많이 느껴 짬이 날때마다 그 동안 궁금했던 단어들을 찾아보고자 한다. 그 중 어제 찾아봤던 부부은 CI/CD에 대한 부분이다. 사실 세팅까지 해서 적용해보는게 의미가 있는 부분이라고 생각하긴 하지만 현재 업무에는 이미 적용되

대충 알고 있을 때 제대로 비교하기 위해선 ===를 사용해야한다 정도만 알고 있었던 것 같다. 가끔 쫌쫌따리로 스프링 코드를 볼 때 ==가 많이 나오길래 같은 의미이지만 스프링에선 이 연산자로도 비교가 가능한줄 알았다. 👉🏼 {} === {}: {} 객체 안에 들어