학원 수료 후 첫 직장이었던 스타트업 회사에서는 체계적으로 프로젝트를 진행하지 못했기때문에 회사에 입사하면 회사용 깃허브 계정이 필요하다는 것도 몰랐다. 처음 초대장을 받았을때(새로 만든 회사메일으로 받았음에도ㅋㅋㅋ) 너무나 당연하다는 듯이 내 개인 깃허브 계정으로 초대장 수락을 했고 어쩌다보니 그 뒤로 진행하는 프로젝트도 계속 개인계정으로 연결하게 됐다. 지금 다니고 있는 회사는 이슈관리도 깃허브 이슈를 통해 하고 있기때문에 새로운 이슈나 업데이트가 있으면 이메일이 오는데 개인 계정이 연결된 gmail은 잘 확인도 안하기도 하고, 이상한 광고 알람때문에 window10 알람을 꺼버려서 업데이트 확인이 계속 늦어졌다. 안그래도 커밋이나 이슈 내역을 보면 다들 깃허브 디폴트 프로필사진인데 나만 내 개인 계..

프로그래밍 작업을 하다보면 기능구현도 구현이지만 이름을 짓는데도 엄청 고민하게 된다. 프로젝트 경험이 많은 것도 아니라 컨벤션이라던가 언어별로 이해도가 깊지 않아서 그런가 이걸 이렇게 이름 지으면 남이 보는건 차치하고라도 과연 내가 3개월뒤에 다시 봐도 그 함수나 변수의 역할을 이름만 보고 기억할 수 있을까? 고민하게 된다. 사실 이름을 어떻게 지을지는 여전히, 그리고 앞으로도 한동안은 고민해야할 문제지만 오늘은 가볍게 코린이가 알아야할 4가지 네이밍 방법에 대해서 정리해보려고 한다. 1. 카멜케이스 카멜 Camel 낙타 등모양같아서 붙여진 이름. 자바에서 많이 사용하는 네이밍 방법 변수같은 경우 var thisIsName ='홍길동'; 이런식으로 단어를 붙여쓰는대신 뒷단어를 대문자로 사용해 낙타등 모양..

국비교육을 받고 처음 들어갔던 스타트업 회사에서 처음으로 소스트리를 사용해봤다. 사실 그때는 이렇다할 선임도 없었고 그냥 이렇게 쓰는거에요~ 하길래 아 네.. 하고 깃허브에 있는 프로젝트를 클론하고 커밋, 풀, 푸시하는 작업만 반복했기때문에 사실 솔직히 말하면 효율적인 협업은 아니긴했다. 브랜치를 나눠서 관리하는 것도 몰랐고 무조건 마스터에 커밋했기때문에 충돌도 엄청 많이 났었는데 지금 생각하면 참 아는게 없어서 대담했던듯... (아.. 그렇다고 현재 소스트리를 100% 효율적으로 쓰고있는 건 아닌듯 하다;; 아직 모르는게 더 많음.....) 그리고 얼마전에 회사를 옮기면서 이제서야 소스트리를 제대로 쓰는 방법을 알아가고 있는데 이번주에 배운 것을 살짝 정리해보려고 한다. 프로젝트를 관리할때 브랜치를 나..

전 직장의 백엔드 동료도 그렇고 지난번 자바스크립트 강사님도 그렇고 주변에서 개발관련 일을 하는 분들이 공공데이터를 활용해서 뭐든 만들어보라고 추천해주셔서 이번에 리액트를 배우는김에 개인프로젝트를 뭘 해볼까...?하다가 공공데이터중에 유기동물 정보를 제공하는 api가 있어서 이를 활용해서 뭔가를 만들어보기로 결심했다. 시작부터 엄청난 난관에 부딪쳤다...ㅠ 리액트에서 api데이터를 불러올때는 fetch나 axios를 쓰는데 이 둘중에 대부분 axios를 더 선호해서 axios를 설치하고 useEffect를 사용해서 api를 요청했다. 결과는 아무것도 뜨지 않음..... your site has been blocked by CORS policy: No "Access-Control-Allow-Origin' ..

마크업을 하나하나 타이핑해야하는건 큰 고문이었다..... 리액트를 처음 배우면서 새삼 에밋기능의 소중함을 느낌. 솔직히 일반 마크업할때 에밋기능을 엄청 현란하게 사용하는건 아니었지만 이게 또 안되니까 엄청 아쉽다 anyway. 해결방법은 생각보다 간단했다. VScode 메뉴에서 파일 > 기본설정 > 설정 을 타고 들어가서 검색창에 settings.json을 찾는다 그리고 마지막에 살포시 아래 기능을 추가해주면 끄읕- "emmet.includeLanguages": { "javascript": "javascriptreact" } { //~ "emmet.includeLanguages": { "javascript": "javascriptreact" } } 간혹 띄어쓰기 하나로 에러가 나는 경우도 있다고 하니 잘..

사실 디지털시계는 학원에서도 배우기도 했고 작업하면서 종종 시간값을 받아서 쓸 일이 있어서 new Date()는 꽤 사용해보기는 했는데 이번에 노마드코더 영상으로 보고 padStart()라는 함수를 처음 알게되어 정리한다. 당시에 배웠을때 두자리수를 만들때 10보다 작으면 앞에 0을 붙이는 함수를 또 따로 만들어서 사용했던걸로 기억한다. function digit(n){ if(n

노마드코더 리액트 기초수업으로 영화앱 만드는 영상을 다보고 리액트 뿐만아니라 프로그래밍 전반적으로 실무 꿀팁을 많이 알게돼서 이번엔 자바스크립트 기초 영상들을 하나씩 보고있다. 진짜 이걸 왜 이제야 봤나싶음 물론 내가 그동안 경험하면서 쌓은 기초지식이 있기때문에 이 강의가 더 쉽게 느껴지는 걸수도 있겠지만 진짜 자바스크립트의 J도 몰라도 충분히 듣고 코딩을 시작할 수 있을정도로 원리부터 설명해줘서 너무 재미있다. 그동안 그냥 '그러려니...'하고 썼던 모든 것들의 원리를 알게되니 뭔가 먼지 쌓인 안경을 닦고 다시 코드는 보는 느낌이랄까 +_+ · form 과 submit 그리고 e.preventDefault form과 submit 그리고 e.preventDefault는 세트로 자주 쓰인다. 잠깐 기억에서..

하루가멀다하고 리액트 공부하면서 역시 자바스크립트를 더 파봐야겠어🔥🔥🔥 했는데 실제로 머리로는 리액트는 리액트 자바스크립트는 자바스트립트 이렇게 별개로 생각했었던 것 같다. 오늘 드림코딩 엘리님 영상을 보는데... 오!? 다 리액트에서 쓰는거네.....????? 근데 이걸 바닐라 자바스크립트 작업할때 써봐야지~라는 생각을 1도 못한듯.... · 구조 분해 할당 Object Destructuring 이건 진짜 리액트에서 비구조할당으로 배워서 맨날쓰는데 영어로는 Object Destructuring이라고 하고 MDN설명을 보니 한국어로는 구조 분해 할당이라고 하나보다. 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게..

와 나 이거 진짜 너무 궁금했는데 우연히 다른 강의를 듣다가 알게되네... 역시 세넓모많(세상은 넓고 모르는 건 많다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 개발자 포트폴리오라던가 이런저런 개발 관련된 것들을 검색하다보면 github.io로 시작하는 페이지를 종종봤는데 깃허브랑 관련된 것 같긴한데 사람들마다 페이지 디자인이 다 제각각이고 뭔가 블로그같으면서도 개인 홈페이지 같은 느낌이라 이게 뭔가...?싶었다. 알고보니 깃허브에서 제공하는 아주 좋은 서비스 중에 하나로 개인 프로젝트를 바로 홈페이지처럼 구현시켜주는 것이다. 다른 언어나 프레임워크로 만든 프로젝트는 어떻게 올리는지 모르겠지만 오늘 본 강의는 리액트 프로젝트를 올리는 방법으로 생각보다 간단해서 빨리 내 프로젝트도 만들어서 올리고싶어졌다 +_+ ① ..

깃git과 깃허브github를 처음 사용해본것은 올해 초에 스타트업에서 일을 시작하면서부터였다. 뭐... 내가 좀 더 관심이 있었더라면 학원을 다니면서도 검색해보면서 사용법을 익혔을 수도 있겠지만 학원종강전에 수료기준 채우자마자 들어간 회사였기때문에 깃이나 깃허브는 어렴풋이 들어만봤지 한번도 써본적은 없었다. 입사하자마자 구체적인 설명은 다 생략하고(으레 스타트업이 그렇듯이ㅋㅋㅋ) '그냥 그렇게 하면 돼~'해서 설치하고 프로젝트 클론하고 다른분들이 뭐 올렸다고 하면 풀받고 내가 작업한게 완료되면 푸시하고... 뭐가 뭔지 구체적으로 알진 못하지만 아 이게 대충 이런 거구나~하면서 커밋, 풀, 푸시했었더랬다. 그랬다가 최근에 개발 튜토리엉 영상을 보면 터미널에서 사용하는 깃 명령어들이 유난히 많이 보이는 것..