코드잇
-
[Taskify] 프로젝트 회고코드잇 2024. 3. 26. 15:00
개발 기간 : 3.8~ 3.25 거의 3주간의 프로젝트를 진행했다. 프로젝트 주제는 노션과 비슷한 일정관리 서비스이다. 😄 좋았던 점저번 프로젝트에서 문제점이었던 부분을 해결하려고 노력했다. hooks 사용을 해서 파일안에 기능적인 부분은 모두 hooks로 분리시켰고, 코드 가독성이 좋아졌다. 😢 아쉬웠던 점많이 나태해졌던 것 같다. 기능 구현을 일주일이면 가능하다고 예상했고, 시간이 남을거라고 생각해서 천천히 진행해버렸다.그리고 에러가 마주쳤을 때, 해결하지 않고 일단은 나중에 처리해야지 라는 안일한 생각을 가져버렸다. 문제 상황이 발생했을 때 해결 과정을 기록을 하지 않은게 아쉽다. 다음에는 문제가 왜 발생했는지. 어떻게 개선해 나갈 건지. 개선한 코드에 대한 설명을 정리하도록 작성해보자. ..
-
[오픈마인드] 프로젝트 회고록코드잇 2024. 2. 1. 20:33
오늘 프로젝트 발표를 했고, 프로젝트 일정은 끝이 났다. 오픈 마인드는 익명의 사용자들이 질문과 답변을 하는 서비스이다. 😄 좋았던 점 최대한 깃허브를 이용해서 작업한 부분이 좋았다. 개인 레포지토리를 파서 서로 포크하는 방식이 아닌 팀 레포지토리를 파서 포크하여 공동 작업자로 작업했었다. 이외에도 이슈들을 칸반보드로 오늘 할 일과 끝난 일 관리, 플랜트 플로우로 프로젝트 일정 관리, 위키 문서에 팀 규칙과 컨벤션 정리, 디스커션탭을 이용하여 팀원들의 회고를 정리했었다. 덕분에 깃허브에 대한 숙련도가 올라갔다고 생각한다. 깃허브 주소 https://github.com/OPENMIND-TFT/OPENMIND GitHub - OPENMIND-TFT/OPENMIND: 질문과 답변을 나누는 플랫폼 OpenMin..
-
코드잇 6주차 위클리 과제 회고코드잇 2024. 1. 3. 12:07
저번 주 까지는 dom을 이용해서 페이지를 구현했다. 이번 주 부터는 리액트를 이용해서 과제를 진행했다. 주요 변경사항 - PC, Tablet, Mobile 디자인에 해당하는 링크 공유 페이지를 만들었다. 배포 링크 Linkbrary astounding-belekoy-b9c33e.netlify.app 피드백 - StrictMode는 뭐고 없앤 이유는 뭔가요? 리액트 강의에서 Strict Mode 사용하지 않고 지워버려서 나도 중요한게 아니라고 생각하고 지워버렸다. 리액트 공식문서를 찾아보니 Strice Mode로 버그를 찾을 수 있다고 해서 다시 추가했다. import { StrictMode } from "react"; root.render( ); Strict Mode는 개발 중에 컴포넌트에서 발생하는 ..
-
git에서 branch merge, git flow코드잇 2023. 12. 8. 20:24
branch merge GitHub에서 3가지의 merge 방식이 있다. merge commit은 두 브랜치의 변경사항을 유지하면서 병합합니다. 이를 통해 프로젝트의 진행상황을 명확하게 이해하고 추적할 수 있습니다. 다만 커밋 히스토리가 복잡해진다는게 단점입니다. Github의 Merge pull request는 git merge --no--ff 옵션으로 Base 브랜치가 최신브랜치라 할지라도 커밋을 남기도록 강제 한다. - ff (fast-forward) Squash and merge는 브랜치의 모든 과정을 하나의 브랜치로 압축하여 병합하는 방법입니다. 커밋 히스토리를 간단하게 유지할 수 있다는 장점이 있지만 작업의 상세한 이력을 잃게 됩니다. git merge에 -squash 옵션을 추가한 방법입니다..
-
z-index: 9999로도 해결이 안되는 이유코드잇 2023. 12. 3. 14:09
z-index가 내맘대로 안될 때 먼저 z-index를 사용하기 위해선 position 속성을 부여해줘야 한다. (static 제외) .red { position: relative; z-index: 1; } z-index: 9999로도 해결이 안 되는 이유 .red { background-color: red; position: absolute; width: 100px; height: 100px; top: 0px; left: 0px; z-index: 1; } .green { background-color: green; position: absolute; width: 50px; height: 50px; top: 25px; left: 25px; z-index: 3; } .blue { background-col..
-
position - CSS코드잇 2023. 11. 26. 22:29
CSS position 속성은 문서 상에 요소를 자유롭게 배치할 때 쓴다. static 기본 값이다. 요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 적용할 수 있다. 이때 요소의 원래 자리는 그대로 차지하고 있다. // red는 top에서 20px 아래로 밀려나고, left는 30px 오른쪽으로 밀려난다. .red { position: relative; top: 20px; left: 30px; } 값이 모두 똑같은 경우 inset을 쓴다. 모든 방향에 대해서 20p..
-
CSS Cascading (우선순위)코드잇 2023. 11. 26. 21:19
CSS Cascading 우선 순위가 높은 규칙일 수록 우선적으로 속성을 적용한다. 스타일 시트의 순서 브라우저의 기본 스타일(user Agent Stylesheet)은 우선순위가 낮아서 사용자가 작성한 코드로 덮어 씌어진다. 개발자 도구에서 user agnet style이 브라우저 기본 스타일이다. 예시 ) 브라우저 기본 스타일보다 유저가 작성한 스타일시트가 우선순위가 높아서 h1은 15px로 적용된다. // 브라우저 기본 스타일 h1 { display: block; font-size: 13px; ... } // 유저가 작성한 스타일 h1 { font-size: 15px; } 참고로 html에 직접 작성하는 인라인스타일이 우선순위가 가장 높다. // style.css .login { background..
-
마진 상쇄 - CSS코드잇 2023. 11. 22. 19:11
마진 상쇄(margin Collapsing)는 html 태그끼리 세로 마진을 겹쳐서 더 큰 마진을 적용한다. 가로 마진은 겹치지 않는다. 위 아래 겹치는 태그는 마진 상쇄가 일어난다. 부모와 자식간의 태그인 경우 border나 padding이 있으면 마진 상쇄되지 않는다. - 위 아래 겹치는 태그 a b 세로로 연달아 있는 태그들이다. 이 둘의 마진을 겹치면 40px이 된다. - 부모 자식간에 margin만 있는 경우 (상쇄 됨) b d - 부모 자식간에 border가 있는 경우 (상쇄 안됨) b d border 테두리에 막혀서 margin 끼리 상쇄가 되지 않는다.