본문 바로가기

분류 전체보기57

[1,2월] 무엇을 했는지 돌아보기 1월에 했던 일 뮤딕 리드미 작성, 뮤딕 타입스크립트 마이그레이션, 정처기 필기 준비, 프로젝트 책 집필, 이력서 피드백 12월에 뮤딕 프로젝트를 성공적으로 배포하고 나서 1월에 프로젝트를 마무리하는 문서 작업을 시작했다. 이번 프로젝트에서 느낀 점이 많아서 깔끔하게 문서화 하고 싶었는데 생각보다 쉽지 않았다. 특히 사람들을 모으고 각 파트별로 커뮤니케이션 하는 부분에서 새로운 인사이트를 얻었던 부분에 대해 다루고 싶었지만 리드미는 프로젝트에 대해 기능적 설명을 하다보니 쉽지 않았다. 그러던 찰나에 [프로젝트 그거 어떻게 하는데]라는 가제로 책 집필 팀을 모으고 있는데 함께 해볼 생각 있냐는 권유를 받아서 뮤딕에서 느꼈던 부분과 스스로 아쉽다고 생각했던 문서화에 대해 정리할 수 있는 좋은 기회라고 생각해.. 2024. 3. 1.
[개발] 초기 세팅과 컨벤션 설정 그리고 깃허브 Intro 프론트 개발자분들은 전에 멋쟁이사자처럼 프론트엔드 과정(이하 멋사)에서 한번씩 크고 작게 프로젝트를 함께 했다.함께 했던 경험과 각자 다른 프로젝트의 경험을 가지고 다시 만났을 때 우리는 초기 세팅과 컨벤션에 조금 더 디테일을 추가하는 것이 좋겠다는 결론을 내렸다. 처음에는 깃허브 사용해서 협업하는 것 자체가 의미있었다면 이제는 효율적이고 효과적인 방법에 대한 고민이 조금씩 생기는 것 같다.운 좋게도 우리가 경험한 멋사는 다양한 완성도 있는 프로젝트를 서로 공유하는 문화를 가진, 더 나은 방법에 대한 대화가 열려있는 커뮤니티였다. 초기 세팅에 대해 우리는 각자의 프로젝트에서 사용한 세팅값을 비교했고 좋았던 점과 개선할 점에 대해 편하게 대화할 수 있었다.컨벤션은 개발 기간이 길지 않기 때문에 .. 2023. 11. 23.
[기획] 생성형 AI 프로젝트 INTRO프로젝트의 시작은 "재밌을거 같지 않아요?" 였다.GTP에게 질문할 생각만 했는데 그걸 사용해서 무언갈 만들어 낼 수 있다니 구미가 당기는 제안이었다. 하지만 아무것도 없었다.PM도 없었다..(뭐 사실 프로젝트라면 당연하긴 하지만)그러니 기획은 맨땅에 헤딩 하듯이 시작..! 그래도 주제가 흥미로워서 그런지 사람들은 어렵지 않게 모을 수 있었다.백엔드와 프론트가 함께 하면 따로 했을 때 느꼈던 아쉬움이 해결될 거라는 막연한 기대가 가득했다.그 와중에 디자이너도 있으면 대박이겠다는 소리에 디자이너도 모셔왔다. 다 같이 회의를 하기 위해 날짜를 잡고 보니 생각보다 어깨가 무거워졌다..ㅎ'오 프론트 4명에 백엔드 5명에 디자이너 2명이면 스타트업인데..?' 일단 가장 급했던 건 어떤 주제로 프로젝트를 .. 2023. 11. 17.
[프로젝트] Whack-a-mole 기능구현 중 마주친 오류 기능 구현을 한 뒤 게임을 해 보았다. 스타트 버튼을 누르면 두더지가 나오고 두더지를 클릭하면 두더지가 사라지면서 점수가 올라가고 300ms 뒤에 두더지가 다른 구멍에서 등장한다. 근데 여기서 문제가 생겼다.. 10마리를 다 잡아도.. 점수가 90점밖에 안나온다.. (HOME 버튼은 css가 적용이 안된거 같다.. 하지만 이건 사소한 거니 나중에 대충 고치는걸로..ㅎㅎ) 그리고나서 곧바로 다른 오류도 발견했다..^^ 클릭하지 않아도 일정 시간이 지나면 두더지가 사라지고 다른 구멍에서 두더지가 나와야 되는데.... 클릭을 하지 않으면 그 두더지는 그대로 있고 새로운 두더지도 나오지 않는다..ㅋㅋㅋㅋㅋ큐ㅠㅠㅠ 로직 자체는 그렇게 복잡하다고 생각하지 않았는데.. 컴퓨터의 사고방식에 좀 더 가까워져야겠다... .. 2023. 5. 23.
[GitHub] 쓸때마다 검색하는 명령어들^^ 파일 생성-레포 연결 git init 파일 내용 추가 git add . git commit -m “메세지” git remote add origin 깃헙 주소 git push origin main README.md 파일을 레포 만들 때 함께 만들면 항상 오류가 나서 그냥 함께 만들지 않게 되었다..ㅎㅎ 브랜치 생성-레포 연결(팀장) git branch 브랜치 이름 git branch git checkout 브랜치 이름 파일 내용 추가 git add . git commit -m “메세지” git pull origin main git push origin 브랜치 이름 브랜치 생성-레포연결(팀원) vsc열고 터미널을 열어서 git clone 레포주소 git branch 브랜치 이름 git branch git c.. 2023. 5. 7.
[CSS] 맨날 검색하는 background 한번에 쓰기 background는 하위 속성이 많다. 각각 사용이 가능하지만 쓰다보면 한 가지만 사용하는 경우는 잘 없었다. 코드가 중복으로 너무 길어지는 것 같아서 한번에 적으려 하면 항상 찾아보게 되는데 그냥 블로그에 정리하고 이것만 보자 하는 생각에 정리하게 되었다. 1. 하위 속성의 종류 background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다. background-clip : 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다. background-color : 요소의 배경 색을 지정합니다. background-image : 요소의 배경 이미지를 한 개나 여러 개 지정합니다. background-.. 2023. 5. 7.
[CSS] 컨텐츠를 숨기는 방법 정리 1. display:none; or visibility:hidden; 모든 사용자에게 컨텐츠를 숨긴다. 컨텐츠를 시각적인 부분에서 완전히 제거하는 방법으로 스크린리더기에도 읽히지 않는다. 텍스트만 숨기고 백그라운드 이미지를 보여주어야 할 때 사용할 수 없다. 만약 어떤 특정 이벤트가 일어날 때만 보여주고 싶다면 기본 설정으로 두고 자바스크립트에서 클래스를 부여하는 방법으로 많이 사용했다. 2. width:0px; height:0px; 0픽셀 조절 방법 HTML/CSS로 정의된 높이나 너비가 없는 요소는 일반적으로 페이지에서 제거하고 대부분의 스크린리더가 읽지 않는다. font-size:0px; line-height:0px 은 작동할수는 있지만, 화면에 여전히 가로 공간을 차지하게 된다는 단점이 있다. 검.. 2023. 5. 7.
[JS] call, apply 메서드와 bind 메서드의 차이에 대해서 설명해보세요. 1. call() call()은 인수에 this 로 사용할 값을 전달할 수 있다. const peter = { name : 'Peter Parker' } function sayName() { console.log(this.name) } sayName() // undefined sayName()을 호출하면, undefined가 출력된다 왜 peter의 name이 출력되지 않을까? 그 이유는 현재 this는 window를 가리키고 있기 때문이다. 그렇다면 this가 peter를 가리키도록 하는 방법은? call() 을 사용하는 것 호출함수.call(this로 지정할 대상)을 하면 함수에서 특정 객체를 this로 지정할 수 있다. const peter = { name : 'Peter Parker' } func.. 2023. 5. 6.