[Github] 로컬 작업물을 깃허브 레포와 연동하기 이미 로컬에서 작업물을 완성했을 경우 깃허브와 연동하는 방법이다. 1. 우선 깃허브에서 빈 레포를 생성한후 레포 주소를 복사해둔다. 2. 터미널로 로컬 작업물 경로 안으로 들어가서 git init으로 저장소를 초기화하여 깃으로 관리할수 있는 로컬 저장소로 만든다. 3. git config user.name, user.email로 깃허브 계정을 연결한다. 4. git add . 로 스테이지에 올리고, git commit -m "first commit" 으로 커밋을 하고, 5. git remote add origin 깃레포주소 로 리모트를 한다. 여기서 "origin"은 별칭인데 'error: origin 리모트가 이미 있습니다. ' 라는 에러 메세지가 뜰 경우에는 간단하게 삭제후 진행하면 된다.git re.. [Github] 로컬 키체인 no anonymous write access no anymous write access 원래 작업하던 환경 말고 다른 로컬에서 이어서 작업후 push전에 흔히 보이는 경고 메세지이다.토큰 등록이 안되서 나오는 경고인데, 깃헙에서 발행했던 토큰을 해당 레포안의 .git/config 파일안에 추가해주면 해결된다. 해당 레포 경로 안으로 들어와서 해당 파일을 편집한다.vi .git/config intert의 i를 누르고 아래처럼 토큰명@을 추가해준다.[remote "origin"] url = https://토큰명@gitub.com/user.name/repositoryName.git :wq 이후 git push를 하면 정상적으로 푸시가 되는 것을 확인할 수 있다. [B2E] Tree Component 메뉴 트리 구조에서 Divider 컴포넌트를 사용하여 퍼블리싱 작업을 하였는데 생각보다 까다로웠어서 다음에 비슷한 Tree구조의 작업을 할 때 참고하면 좋을 것 같다.까다로웠던 부분은,Divider가 Horizontal 인 경우 Divder 간의 간격과 각 트리 depth별 간격 체크Divider가 Vertical 인 경우 세로 Divider이기 때문에 각 menu item의 최소 높이(3.7rem)를 넘는 간격이 있으면 Vertical Divider가 끊겨 보이는 현상으로 인하여 Vertical일 경우의 예외처리이렇게 였다. (해당 프로젝트는 1rem === 10px로 font-size 처리를 해두었다.)html.body { font-size: 62.5%; line-height: 1.5;}.. [Vite] Sass의 [mixed-decls] error 해결 그리고 Cursor AI가 그게 아니래 Vite 환경에서 스타일로 Sass를 사용하고 있는데 어느샌가 부터 프로젝트를 돌리면 터미널에 Deprecation Warning 메세지가 항상 떴다.Deprecation Warning [mixed-decls]: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`.. [Javascript] 파일 업로드 구현시 정규화 필수 문제FireFox, Safari에서 파일 업로드 실행시 해당 파일명의 영문과 숫자는 설정한 font-family가 정상적으로 잘 적용이되어 보이지만, 한글은 적용이 되지 않았다.Chrome과 Edge에서는 정상적으로 한글도 font-family가 적용되어 보였다. 해결개발 코드에서 파일 업로드 버튼 클릭 후, 해당 파일 업로드시 파일명을 출력시 문자열을 정규화하는 과정을 거치지 않으면 font-family가 올바르게 적용되지 않을수 있다. (정규화 예시로 실제 프로젝트마다 상이합니다.)const fileName = file.name.normalize('NFC'); [React.js] 인라인 스타일 calc 함수 사용법 한 개의 사칙 연산을 할때는 잘되는데 세 개 이상의 사칙 연산을 사용하여 계산을 해야할 때에는 인식이 잘 안되는 것 같았다. 몇 번을 시도 및 서칭 끝에 알게 된건, 덧셈과 뺄셈 연산을 할때는 띄어쓰기를 좌우로 해줘야하고,한번에 한 개의 계산이 되면 괄호를 사용하여 묶어주어야 인식이 되는 것 같다. (세 개 이상의 사칙 연산 예시 참고) [VSCode] vscode format prettier 적용 안될 때 다른 프로젝트에도 프리티어 규칙이 필요하여 하단처럼 설정에 Default Formatter를 Prettier로 설정을 하였다.하지만 동작하지 않았고, 서칭 후에 하나더 설정을 확인해보기로 했다. Editor : Format On Save가 체크되어있는지 확인해보았는데 정상적으로 체크가 되어있었다. 그래도 새로운 프로젝트에는 프리티어가 적용되지 않았다! 에디터 하단에 Prettier가 잘 동작하는지 클릭해보면 로그가 하단창에 나타나는데 메세지는 다음과 같았다.vscode Require config set to true and no config present. Skipping file. 계속해서 파일을 스킵하고 있었다. 이메세지 그대로 서칭해본결과 설정에서 Require Config를 검색한 후 이 설정이 .. [CSS] grid로 마크업 순서 변경하기 마크업 순서를 변경해야할 일이 생겼다.PC에서보이는 순서와 Tablet과 Mobile에서 보이는 블록 순서가 달라야했다. display: flex; 로 해결하려했으나 마크업 논리 흐름상 불가했다.그래서 복잡하여 잘 쓰지 않는 display: grid;를 사용할 수 밖에 없었다. display: grid;에는 order라는 스타일로 제어가 가능하므로. background-color가 skyblue인 블록이 PC에서는 세번째에 있다가 Tablet과 Mobile에서는 첫번째 순서로 와야한다. (반응형 작업시 PC를 기준으로 하고 있다.) 위의 4가지 요소를 감싸고 있는 부모를 -grid라 하면, 다음과 같이 먼저 부모에 스타일을 설정한다. 요소 사이 간격 또한 설정한다.display: grid;gap: 8.. 이전 1 2 3 4 ··· 34 다음
