COCO World

⛄ Sass (Syntactically Awesome Stylesheets)란? : 스타일 시트를 생성하기 위한 확장된 CSS 프리프로세서로, CSS의 한계를 극복하고 코드의 재사용성과 유지보수성을 향상시키기 위해 만들어졌다. 주로 웹 개발에서 스타일링을 더 효과적으로 관리하고 구조화하기 위해 사용한다. 그치만 장점이 곧 단점이 되기도 하기 때문에 프로젝트의 목적성을 고려하여 투자해야한다. 장점 중첩을 지원하여 코드의 가독성을 향상시키고, 중첩 구조는 HTML 요소의 계층 구조와 비슷하게 코드를 작성할 수 있도록 도와준다 변수를 사용하여 스타일에서 사용되는 값을 중앙에서 관리할 수 있어 유지보수성이 향상되고, 재사용이 가능하다. 여러 개의 파일로 스타일을 나누고, '@import'를 통해 불러와 사용하기..

의외로 자주 사용되는 스킬이라 이번에 두번째 만들게 되면서 포스팅하게 되었다. 여러가지 배열값들을 나열하여 일치된 classname 중에서 특정 div값을 클릭하였을 때, 해당 요소만 CSS를 변경하여 사용자에게 보여주는데 이는 classname 동적으로 활용하는 방법이다. 보통 useState를 사용하여 값을 상태관리하겠지만 본 사용자는 리덕스를 사용하고 있어 slice를 통해 상태관리하였다. 따라서, Redux와 useState 두 가지 사용방법을 적용해보겠다. 1. Redux Toolkit의 Slice를 사용해 적용하기 메인 컴포넌트의 HTML {storeObj.state.employeeList?.map((item, idx) => ( storeObj.callbacks.selecteNameState(..

🎃 오늘 날짜 const now = new Date(); # 출력 console.log("오늘 날짜 : ") console.log(now) 출력 🎃 어제, 내일 const now = new Date(); # 어제 const yesterday = new Date(new Date().setDate(new Date().getDate() - 1)); # 내일 const tomorrow = new Date(new Date().setDate(new Date().getDate() + 1)); # 출력 console.log("어제 날짜 : ") console.log(yesterday) console.log("내일 날짜 : ") console.log(tomorrow) 출력 🎃 며칠 전/후 # 며칠 전(ex: 3일 전) ..

1. 사건일지 에러내용은 객체는 React 하위 항목으로 유효하지 않습니다(발견: 키가 {키값}인 객체). 하위 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 라고 뜨는데, 키값이 fileSize인 객체가 올바르지 않다는 내용이니, 저 부분을 제대로 꺼내고 있는지 확인해보라는 뜻이다. 2. 설명 사실은 별거없다. 첫번째 줄에 (Found: object with keys {fileSize})에서 문제가 발생했다는데, 리액트 내에 저 fileSize라는 키값 이름으로 데이터를 보여주는 부분을 찾아가보자. 용량 : {state.fileSize}MB / 10MB 그렇다면 state.fileSize는 어떤 모양으로 데이터가 내려오고 있나? console.log(state.fileSize) // 로그 내용 {fil..

1. 사용자 등록부터 하기 git config --global user.name "이름" git config --global user.email"사용자이메일" ex) git config --global user.name "Orange" git config --global user.email"Orange@naver.com" 현재 로컬저장소에서 commit까지 2. 저장소 상태 확인 git status 현재 브랜치 TEST_SERVER 너의 브랜치는 'origin/TEST_SERVER'로 현재 최신 상태이다. 아무런 commit이 없으며, 클린한 상태 라며 저장소 상태를 설명해주는 문구가 나옵니다. 3. 파일을 추적할 때 git status 명령어를 실행하면 색깔이 바뀌어 있고, 커밋할 변경사항으로 설정된 ..

🧸 들어가기 앞서 리액트에서 파일 업로드 및 다운로드 기능을 추가하고 있는 과정에서 백에서 몇몇의 파일 확장자의 Lock을 걸려있어 API POST가 되지 않았다. 보안상의 이유로 최소한의 필요한 파일만 받고, 그 외엔 규정과 협의하에 파일 확장자 종류를 필터링하여 받아 줘야 한다고 한다. 파일 확장자, 무조건 다 받으면 안돼 ! 초기에 개발시엔 거의 모든 형식의 파일확장자를 받아주는 방향으로 개발하지만 실제로 업무에서의 개발은 보안에도 유의해야 한다. 랜섬웨어 감염에 취약한 파일 업로드 기능 추가시에 예방하는 방향으로 개발해야한다. 랜섬웨어(Ransomeware) : 컴퓨터 시스템을 감염시켜 접근을 제한하고 일종의 몸값을 요구하는 악성 소프트웨어의 한 종류이다. 컴퓨터로의 접근이 제한되기 때문에 제한을..

trim() 자체적으로 양 옆 공백을 제거해주는 메서드 replace() 정규식을 이용하여 양 옆 공백을 제거해주는 메서드로 좀 더 커스터마이징으로 활용 가능 1. trim() let str = ' 반가워요! '; let trimValue = str.trim(); console.log(trimValue); // 출력 '반가워요!' 2. replace() let str = ' 반가워요! '; let trimValue = str.replace(/^\s+|\s+$/gm, ''); console.log(trimValue); // 출력 '반가워요!' 2-1. replace의 모든 공백 제거 let str = ' 반 가 워 요 ! '; let trimValue = str.replace(/ /gi, ''); cons..

개념 🐼 내부망(LAN, Local Area Network) : 일정 조직 내에서 인터넷이 아닌 내부 네트워크를 통해 PC끼리 자원을 공유하게 하거나 그룹웨어 등을 사용할 수 있게 하는 근거리 통신망(LAN)을 말한다. 목적 : 보안 네트워크를 구성하기 위해 구성한다. 인터넷이 되지 않지만 단독적인 내부망으로 쓰이는 경우는 금융권인 경우를 제외하고는 DMZ를 통해 방화벽을 두고 함께 활용하여 인터넷을 이용하면서도 인프라에 대한 보안을 강화하여 사용한다. 🐼 외부망(WAN, Wide Area Network) : 일정 조직을 넘어 정보를 교환할 수 있는, 즉 인터넷을 통한 네트워크이다. 목적 : 주로, 가정용 컴퓨터에서처럼 쓰이듯이 대중적으로 사용되는 망이지만 보안을 요구되는 기업의 업무망으로는 적절하지 않..