서스포PAR_개발블로그

😎 참여자 명단 + 목표 😎 참여자 분야 스터디 목표 [주최자]서스포PAR @PARPAR_FE FE 열심히 스터디 관리 암영님 @darkness_bloom 기타 매일 백준 한문제씩 풀기 젠이님 @jenni22e FE API를 이용해 프로젝트 개발하기 (React) 유데미 React 강의 수강 완료하기 https://www.udemy.com/course/best-react/ 개발맨님 @kylewinterboy FE 유데미강의 섹션 10까지 완강 https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/ 어린양님 @Asiject FE + BE 🔥 SQLD 시험 응시 - 5월 28일 🔥 시험 전까지 개별 공부시간(+평..

웹 개발자들은 왜 인터넷 익스플로러를 싫어할까란 이유라는 동영상을 보다 크로스 브라우징이라는 단어를 들었다. 어딜가나 코로스 브라우징이란 내용이 나오는데 그것이 정확히 무엇인지 알아보도록하자! 💥 왜 웹 개발자들은 익스플로러를 싫어하는 이유! https://youtu.be/T8r-6mMlzWg 💖 크로스 브라우징(cross browsing)이란? 1. 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말합니다. 2. HTML5, CSS3, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법입니다. 🔊 크로스 브라우징이 작업마다 필요한 원인! 브라우저마다 랜더링 엔진이..

🤦‍♀️ 문제의 발단 벨로퍼트님의 모던 리액트 1-13장 배열에 항목 추가하기에서 오류가 발견하였다. 배열로 잘 뜨는데 왜? Uncaught TypeError: Cannot read properties of undefined (reading 'map') 가 뜨는 것인가? import React from 'react'; const UserList = ({ user }) => { console.log(user); // 0: {id: 1, username: '홍길동', email: '123@naver.com'} // 1: {id: 2, username: '김철수', email: '456@naver.com'} // 2: {id: 3, username: '김영희', email: '789@naver.com'} re..

🎊 아기 개발자 주말 스터디 모집 🎊 🐔 주의! 주최자가 닭띠라 공부일정(+공부&운동인증)를 여쭤볼 수 있습니다. (쪼쪼쪼...) 🐔 🎁 2022년 5월 1일(일) ~ 2022년 6월 4일(일) 총 5주 🎁 1. 토요일 / 일요일 스터디 👉 총 10일 2. 정규 스터디 시간 👉 오전 10시 ~ 12시 (정규 스터디 시간에 불참 할 경우 자율스터디 (당일 2시간 자율적으로 채우기)) 3. 토요일 [공부 2시간] / 일요일 [공부 2시간 OR 운동 1시간 택 1] 4. 자신이 정한 목표를 달성!! (무적건 하겠다 하는 목표만 받습니다.) 예 ) 개발블로그 글 15개 작성 / 인강 1개 완강 (최소 6시간) 토이 프로젝트 반이상 완성 / 주말 깃허브 총 8회 이상 커밋 등.... 🎁 모집인원 🎁 😎 총 6명 ..

📌 메모리 누수(Memory Leak)란? 메모리 누수현상은 프로그램이 필요하지 않은 메모리를 계속 점유하고 있는 현상을 말합니다. 할당된 메모리를 사용한 다음 반환하지 않고 누적이 되기때문에 메모리 누수가 발생합니다. 메모리 누수를 방지하기 위해 가비지 컬렉터가 자동으로 메모리를 관리해주는데, 자동으로 메모리를 관해준다해서 우리가 내부구조나 동작원리를 공부할 필요가 없는 것은 아니다. 그 이유를 아래처럼 정리할 수 있겠다. 1. 같은 기능의 프로그램이더라도 메모리 관리에 따라 속도나 프로세스 실행시간 등의 성능이 좌우된다. 2. 결국 자동이기 때문에 최적화에 한계가 있어서 한정된 메모리를 효율적으로 사용할 수 있는 코드를 작성하는 것은 개발지의 몫이다. 💖 가비지 컬렉션(Garbage Collectio..

💖 전개(Spread Syntax) 연산자 1. Spread 라는 단어의 의미는 펼치다, 퍼뜨리다 이다. 2. 이 문법을 이용하면, 객체 혹은 배열을 펼칠 수 있다. (객체나 배열을 통채로 끌고와서 사용 가능!) 3. 기존의 것은 건들이지 않고 새로운 객체를 만들 때 사용한다. // 펼칠 대상이 객체인 경우 {...obj} // 펼칠 대상이 배열인 경우 [...arr] // 혹은 {...arr} 전개 구문의 문법 자체는 정말 간단하다. 그저 배열이나 객체 앞에 점 세 개를 붙여주면 된다. 🎁 MDN 문서 🎁 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax Spread syntax (...) -..

vscode에서 코드 작성시, 코드를 이쁘게 정라정돈해주는 Prettier! 코드의 가독성을 올려주니 정말 좋은 도구이다. 🎁 하지만 작동을 위해서 초기 작업이 필요한데 그것을 차차 알아가보자! 🎁 💖 Prettier 이란? 사용자가 작성한 코드를 미리 지정한 포맷팅으로 맞춰주는 포맷터이다. 코드의 품질을 위해 사용하는 ESLint와 성격이 다르다. 🎁Plugin 설치🎁 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier - Code formatter - Visual Studio Marketplace Extension for Visual Studio Code - Code formatter using pret..

🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열을 반복적으로 참조하는 Array.prototype 메소드 더보기 메소드 설명 forEach() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함. map() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함. filter() 해당 배열의 모든 ..