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

input태그 커스텀은 label으로! html태그 는 기본적으로 아주 심플한 디자인으로 보여지는데 프로젝트를 진행해보면 사이트의 분위기라던거 컨셉에따라 다른 디자인으로 변경해야하는 경우가 있다. 근데 단순하게 style로 바로 input태그를 커스텀할수가 없다. 이때 사용하는 방법이 바로 lable이다. checkbox뿐만아니라 같은 방법으로 파일 열기인 도 역시 label으로 커스텀할 수 있다. 일단 기본 체크박스의 경우 아래와 같다. 이걸 조금 더 사이즈가 큰 체크박스로 바꿔보려고 한다 checkbox옆에 label태그를 생성해 checkbox의 id 속성을 label태그의 for속성으로 연결해준다 · html 그리고 이 라벨을 원하는 디자인으로 css 스타일을 꾸며준다. 체크시 디자인은 그냥 박스..

· dependency 설치 styled-components를 적용하기위해서는 먼저 dependency를 설치해야한다. 사스Sass와 styled-components를 설치해야한다. Sass는 node버전을 맞춰서 설치하는게 좋기때문에 지난번 작성한 포스팅을 참고하면 좋겠다 [React] 여러가지 스타일 적용 방법 기본 CSS, 사스Sass SCSS @mixin 리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 sophiecial.tistory.com yarn add styled-components 또는 npm install styled-components vs..

· Module.css 클래스 이름의 중첩을 방지하기 위해 사용 기존 프로젝트의 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 하기 위해서 css파일의 확장자를 .module.css로 만든다. 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다. 개발자모드로 소스를 보면 클래스명이 '파일명_클래스명__아무말'형식으로 나온다. 모듈 스타일과 일반 css의 차이점을 보기 위해 아래처럼 파일을 생성했다. ModuleStyle.js는 간단하게 스타일이 어떻게 적용되는지만 확인할 수 있는 요소만 몇개 만들어서 클래스명으로 구분했다. 모듈 스타일을 import할때는 위에 3째줄 처럼 참조변수명을 지정해서 import해준다. 11, 14번째 줄 등 클래스명에 적용할때 이 변수를 사용해 적용할 수 있다. i..

리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 한다 목차 · 기본 스타일 · SCSS -------------- 다음포스팅에 이어서... · Module.css · styled-component · 기본 스타일 기본적으로 아무런 dependency 설치 없이 바로 적용할 수 있는 css는 일반적으로 html, css작업했던 것과 유사하게 적용할 수 있다. 15번째 줄처럼 div요소 내부에 style속성을 겹중괄호 {{}}안에 넣어 적용할수도 있고 19번째 줄처럼 코드 가독성을 위해 스타일 객체를 따로 만들어서 적용할수도 있다. 23번째 줄처럼 스타일 css파..

오늘은 지난시간에 배운 검색기능을 구현하는 세가지 방법을 복습하는 포스팅! 사실 검색기능 자체를 구현하는 코드는 자바스크립트식이기때문에 자바스크립트 게시판에 쓰려고 하다가... 그래도 리액트 수업시간에 했던 예제라 리액트 게시판에 쓰기로 했다. 일단 사용법만 익혀두면 여기저기서 정말 많이 쓰게될 것 같다. 특히 정규식 RegExp!! 일단 기능구현 자체가 목적이니 간단하게 데이터를 준비한다. 생각나는 연예인 이름을 줄줄 썼는데 영문검색 대소문자 필터링을 해야하기때문에 영문 데이터도 몇개 넣었다. 검색한 단어가 바뀔때마다 화면을 다시 그려주기때문에 useEffect를 사용한다. 42번째 줄, useEffect내에서 data상태를 설정해주는데 전체 데이터에서 filter로 해당값만 찾아준다. 이때 두 단어를..

전 직장의 백엔드 동료도 그렇고 지난번 자바스크립트 강사님도 그렇고 주변에서 개발관련 일을 하는 분들이 공공데이터를 활용해서 뭐든 만들어보라고 추천해주셔서 이번에 리액트를 배우는김에 개인프로젝트를 뭘 해볼까...?하다가 공공데이터중에 유기동물 정보를 제공하는 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는 세트로 자주 쓰인다. 잠깐 기억에서..