Development (18) 썸네일형 리스트형 초보 개발자에게 좋은 웹사이트들! 사람들과 대화하면서 좋은 사이트들을 많이 알게되어서 적어봅니다. 하지만, 제가 직접 해본 것들은 적어서 참고만 부탁드립니다. 지속적으로 추가 예정 Hola - 개요 : 스터디와 사이드 프로젝트 찾는 사이트 - 후기 : 없음 - 링크 : https://holaworld.io/ Hola! 스터디, 사이드 프로젝트 팀원을 구하는 가장 쉬운 방법! holaworld.io 서핏 - 개요 : 다른 분들 자소서 보는 사이트 - 후기 : 포지션에 맞는 참고자료가 없다면 좋아 보임. 포트폴리오 / 이력서 양식 참고하기 매우매우 좋아보임 - 링크 : https://directory.surfit.io/ 서핏 디렉토리 - 함께 성장하는 커리어 커뮤니티 새 탭에서 펼쳐지는 맞춤 커리어 콘텐츠. 매일 성장하고 더 멋지게 일하세요.. [프로젝트 세팅] gitignore.io를 이용하여 .gitignore 생성하기 git을 사용하다보면, git을 통해서 관리하기 애매한 파일들이 존재한다.- 보안상 위험이 있는 파일- 프로젝트와 관계가 없거나 무의미한 변동사항이 너무 많은 파일- 용량이 너무 큰 파일이런 생략해야하는 파일을 모아둔 파일이 .gitingore 이다. 이를 통해서 핵심파일들을 관리할 수 있다. ex). node_modules아래 참조에 적힌대로 여러가지 룰 등을 통해서 직접 파일을 제외할 파일을 정하는 것도 좋지만, .gitignore.io 사이트를 통해서 프로젝트 생성시에는 디폴트값을 만드는 것이 편하다.https://www.toptal.com/developers/gitignore gitignore.ioCreate useful .gitignore files for your projectwww.top.. ESLint와 React 안정성 에러 - Enforce a specific function type for function components (react/function-component-definition) Error Name 다음과 같은 에러가 발생하였다. "Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “TabButtons” and pass data as props react/no-unstable-nested-components" 발생 fun.. ESLint 자동 변환 이슈(에러) 발생 //1 const Test = () => { return test; }; //2 function Test() { return test; } 현재 프로젝트에 Test 컴포넌트를 1번과 같이 선언했을 때, 2번 코드로 바뀌는 현상이 있었다. 본래 우리 팀은 최상위 컴포넌트는 2번으로 그 외 컴포넌트는 1번으로 짜는 팀 내 규정이 있었는데, 이 때문에 찾아보게되었다. 원인 원인은 기존 프로젝트와 달리 airbnb style을 적용해서 그렇다. ESLint는 2번 style을 기준으로 잡고 그 외는 틀린 것으로 처리하여 자동으로 변환해준다. 해결법 "react/function-component-definition": [, { "namedComponents": "function-declaration" | ".. Modal 중앙 정렬 하는 법 모달 창 중앙에 맞추기 문제 아래 css를 이용하여 중앙 배치를 하였는데 모달이 중앙 살짝 우측으로 배치되지 않는 문제가 있다. position: fixed; top: 50%; left: 50%; 원인 50%로 고정되는 위치가 모달에 중앙이 아닌 좌측최상단이기때문에 발생하는 에러이다. 해결법 translate 를 이용하여서 모달 중앙으로 위치를 맞춰준다 transform: translate(-50%, -50%); 추가내용 -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); tran.. 아이폰 GitHub 위젯 추가하기 매 번 깃허브에 올리고 다시 확인하는 작업이 매우 귀찮았는데, 깃허브 앱이 있는 걸 알아버렸다 매우매우 행복하게도 이 앱을 이용하면 잔디 심은 걸 위젯으로 볼 수 있따. 엡 > 홈화면편집 기능 또는 위젯편집을 누르면 편집모드로 넘어가며 아래 사진에 +를 눌러서 깃허브를 추가하자 (필자는 이미 추가한 이후다) sign in 후 핸드폰을 끄고 키면 연동이 되어서 이제 잔디가 보인다(감동...) 이제 한달 째를 바라보는 중인데, 이거라면 더 열심히 관리가 가능할 거 같다. 힘내자..! 이 글을 보는 주니어들 모두 화이팅! 깃허브 친구 생기면 좋겠다.. 댓글 달아주시면 친추해요.. 아마.. z-index error : stacking order and z-index 공부한 이유 z-index가 99999999 여도 특정 컴포넌트에게 항상 덮이는 경우가 발생했다. 구체적으로 저는 아래 그림처럼 드랍다운이 기본버튼에 덮여서 클릭할 수가 없었습니다. 원인과 해결법 원인: stacking order 이라는 web의 기본 순서를 정하는 로직이 z-index보다 우선 되기 때문에 일어나는 현상이다. 해결법 : position 속성을 부여하면 된다. stacking order web은 기본적으로 아래에서 위로 쌓이는 데(stacking) 아래 세가지 기준으로 쌓이게됩니다. 루트 요소의 배경과 테두리 (HTML에 나타나는 순서대로) 자식 엘리먼트들 (HTML에 나타나는 순서대로) position이 지정된 자식 엘리멘트 ※ 참고 노트 : “positon이 지정되면 후에 렌더링이 된.. React Dom접근 error : getElementByClassName Error in useEffect(조건부 렌더링) 코드 export default function MyEssayPage() { useEffect(() => { getMyEssay(1); const tests = document.getElementById("test"); tests?.setAttribute("style", "red"); console.log(test); }, []); return ( {store.myEssayList.map((essay: any, Essayidx: any) => ( {Essayidx + 1} {essay.prompt.contents} {essay.essayContents} {essay.score} ))} ) } 원인 위 코드는 useEffect에서 getMyData()로 Api를 통해 데이터(myEssayList)를 불러온.. 이전 1 2 3 다음
