📖오늘 배운 것 new Image : 새로운 HTMLImageElement 인스턴스를 만든다. document.createElement('img')와 동일하게 작동한다. 이벤트 핸들러 onAbort: 사용자가 이미지 로딩을 중간에 멈출 때 발생하는 이벤트 onError: 이미지 로딩 중 에러가 발생했을 때 onLoad: 이미지가 성공적으로 로딩되었을 때 const [loaded, setLoaded] = useState(false); useEffect(() => { const image = new Image(); image.src = src; image.onload = () => setLoaded(true); }, [src]); Array.from :유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운..
📖오늘 배운 것 navigator.clipboard.writeText() 텍스트를 클립보드에 복사할 수 있는 메서드이다. 매개변수로 복사할 문자열을 받는다. navigator.clipboard.writeText("복사할 텍스트") Context :단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. context는 props drilling을 해결하기 위한 하나의 방법이다. props drilling이란 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하기 위해 오직 props를 하위 컴포넌트로 전달하는 용도로 컴포넌트들이 사용되는 과정을 말한다. 이때 Context를 사용하면 중간 컴포넌트들을 거치지 않고 바로 원하는 컴포넌트에서 데이터를 전달받을 수 있다..
어느새 데브코스 2개월이 지났다! 한 달 차 회고를 쓴 게 어제인 거 같은데 벌써 2개월이 지났다니... 할 것도 많았고 아파서 응급실도 갔다 오고.. 이래 저래 일이 많았어서 시간이 더 빠르게 느껴졌던 것 같다. 🧡6주차(2022.11.22 - 2022.11.25) 강의 바닐라 자바스크립트 강의를 마무리 하고 css로 들어가는 기간이었다. 바닐라 자바스크립트 강의도 워낙 길고 소화해야 할 내용이 많았고, 프로젝트 과제 등등이 있었기 때문에 휴~ css는 좀 나을까? 했는데...했..는..데.. 나에게 남은 건 더 길고 긴 강의 시간뿐이었다... CSS 심화와 SCSS 파트가 진행되면서 CSS는 그래도 아는 내용이 많았지만 SCSS는 처음 다뤄보는 부분이었다. 하지만 CSS 기반이기 때문에 그렇게 어렵게..
타입 변환은 크게 개발자가 의도적으로 값의 타입을 변환하는 명시적 타입 변환과 자바스크립트 엔진에 의해 암묵적으로 타입을 변환하는 암묵적 타입 변환이 있다. 암묵적 타입 변환 : 코드의 문맥에 부합하지 않을 때 자바스크립트는 에러를 띄우는 것이 아니라 암묵적 타입 변환을 통해 표현식을 평가한다. '10' + 2 // '102' 5 * '10' // 50 !0 //true if(1) {} 문자열 타입으로 변환 이항 연산자 +를 사용할 때 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작하여 다른 하나도 문자열로 변환된다. 1 + '2' // '12' '2' + 1 // '21' → 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이기 때문! 0 + '' // '0' -0 + '' // '0'..
어느새! 1차 단위기간이 끝나고 2차 단위기간이 시작되었다. 어찌 시간이 이리 빠른지... 데브코스 면접 본다고 덜덜 떨던 때가 엊그제 같은데 벌써 한 달이라는 시간이 흐르고 첫 번째 프로젝트로 끝나버렸다! 모든 지 적당히 하자가 모토인 나는... 데브코스도 나름 적당히 보내고 있는 것 같다(? 주차별 회고를 써서 한 달 회고는 어떻게 진행하면 좋을까 고민하면서 이전 회고글을 보다가 이전에 썼던 주차별 회고에서의 감상과 어떤 게 달라졌는지! 기록하면 좋을 것 같다는 생각이 들었다. 1주 차 강의 1주 차는 아무래도 적응기간이었기 때문에 강의 위주(+과제)로 진행됐었다. 1주 차 회고를 다시 보니 확실히 데브코스라는 스케줄에 적응하는 데 바빴고 잘할 수 있을까라는 불안이 있었던 것 같다. 조금은 낯설고 어..
데브코스 첫 번째 개인 프로젝트로 노션 클로닝 프로젝트를 진행했다. 바닐라 자바스크립트를 컴포넌트 방식으로 사용하였고 데브코스에서 제공하는 API를 활용하여 서버에 데이터를 저장하고 불러와서 구현하는 것이었다. 💥결과물 💭기본 요구사항 바닐라 JS 사용 글 단위를 Document Document는 하위 Document를 포함할 수 있다. 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링한다. Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링한다. 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링한다. Document Tree에서 각 Docu..
주마다 회고를 진행하려고 했지만 정신차려보니 2주가 지나서 3주차 주말이었다..ㅋㅋㅋㅋ 회고를 어떻게 하면 자세하게 진행할 수 있을까 생각하다가 데브코스를 진행하면서 하루의 스케줄이 크게 1. 강의 2. 과제 3. 개인공부 로 진행되기 때문에 각 공부마다 어땠는지 회고하려고 한다. 강의 2주차 초반에 자료구조, 알고리즘 강의가 끝났고 2주차부터 3주차까지 바닐라 자바스크립트에 대한 강의가 진행되고 있다. 자료구조&알고리즘 강의같은 경우엔 확실히 어렵지만 배워야 하는 내용이었다. 데브코스 오기 전에는 자료구조&알고리즘 강의도 사놓은 상태로 이제 진짜로 찐찐찐으로 자료구조 강의 시작해야지...하고 있었다.(한 달 정도를) 그런데 데브코스를 통해 자료구조에 대해서 깊이있게 배우진 않아도 이런 종류가 있고 이런..
📖오늘 배운 것 DOM(Document Object Model) DOM이란? :문서 객체 모델은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 특징 -DOM은 html 문서로부터 생성되지만 동일한 것은 아니다. > 원본 html이 유효하지 않아도 생성된 DOM 트리에는 교정되어 나타난다. > 자바스크립트를 통해 DOM을 수정하는 경우 DOM에는 업데이트되지만 HTML 문서의 내용이 변경되는 것은 아니다. -DOM은 key 와 value로 이루어져 있는데 이것은 웹 UI의 상태, 기능, 속성을 객체로 만든 것이다. DOM Tree :DOM은 트리구조로..
https://school.programmers.co.kr/learn/courses/30/lessons/84512 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 사전에 알파벳 모음 'A', 'E', 'I', 'O', 'U'만을 사용하여 만들 수 있는, 길이 5 이하의 모든 단어가 수록되어 있습니다. 사전에서 첫 번째 단어는 "A"이고, 그다음은 "AA"이며, 마지막 단어는 "UUUUU"입니다. 단어 하나 word가 매개변수로 주어질 때, 이 단어가 사전에서 몇 번째 단어인지 return 하도록 solution 함수를 완성해주세요. 제한 사항 w..
📖오늘 배운 것 "DFS와 BFS" 깊이 우선 탐색(DFS) 그래프 탐색 알고리즘으로 최대한 깊이 내려간 뒤 더 이상 내려갈 곳이 없으면 옆으로 이동한다. 길을 정해서 갈 수 있는 한 최대한 깊이 갔다가 더 이상 길이 없음면 가장 최근 분기점의 다른 길로 가보는 것이다. 모든 노드를 방문 할 수 있다. 특징 stackdmf 이용해서 구현할 수 있다. v가 정점의 수이고 E가 간선의 수일 때 BFS의 시간 복잡도는 O(V+E)이다. 관련 알고리즘 문제 https://school.programmers.co.kr/learn/courses/30/lessons/43162 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기..
