U_D

1.문제 (영문) An array A consisting of N integers is given. Rotation of the array means that each element is shifted right by one index, and the last element of the array is moved to the first place. For example, the rotation of array A = [3, 8, 9, 7, 6] is [6, 3, 8, 9, 7] (elements are shifted right by one index and 6 is moved to the first place). The goal is to rotate array A K times; that is, eac..

알고리즘은 프로그래머스를 통해 약 30개정도 레벨1 단계를 풀었지만.. 잠시만 손을 놓으니 금새 어색해지게 되었다. 찾아보니 깃허브와 연동을 해서 문제를 풀 때마다 자동으로 푸쉬를 해주어 잔디를 심어주는!! 크롬 확장팩이 있었다. 확장 프로그램 이름은 백준 허브로 백준과 더불어 프로그래머스 둘다 연동이 가능하다. 1. 설치 링크 크롬 확장으로 설치를 해준다. https://chrome.google.com/webstore/detail/%EB%B0%B1%EC%A4%80%ED%97%88%EB%B8%8Cbaekjoonhub/ccammcjdkpgjmcpijpahlehmapgmphmk 백준허브(BaekjoonHub) Automatically integrate your BOJ submissions to GitHub ..

이벤트 버블링(Event Bubbling) 특정 엘리먼트에 이벤트가 발생하면 해당 이벤트가 그 엘리먼트의 조상들에게 까지 전달 되는 현상이다. 이벤트 버블링을 막는 방법 버블링은 대체로 엘리먼트까지 올라간다. 이러한 이벤트를 멈추기 위해서는 최초로 이벤트가 발생되는 엘리먼트의 이벤트 핸들러에 event.stopPropagation() 를 사용하면 된다. 만약 하나의 이벤트에 여러 핸들러가 붙어 있는 경우 event.stopPropagation() 를 추가 해도 다른 이벤트는 버블링 될 것이다.모든 이벤트 버블링을 멈추고 싶은 경우에는 event.stopImmediatePropagation() 를 사용하도록 하자 이벤트 버블링 활용 방법 이벤트 위임을 사용할 때는 하위 요소마다 이벤트 핸들러를 할당하지 않..

0) 결론 - 코드의 간결함 - 손쉬운 에러 핸들링 - 에러 위치 파악의 용이함 1) async는 간결하다 [promise 사용] then방식을 보면 라인 수가 많은 것은 물론 들여쓰기도 많아 복잡함 function printAnimals() { return getAnimals() .then(data => { if (data.property) { return sampleFunc1(data) .then(anotherData => { console.log(anotherData) }) }else { console.log(data) } }) } [async/await 사용] 함수에 async 키워드를 적고, 비동기 대상에 await를 추가 비동기 대상 함수에 await를 추가하면, '이 함수의 처리를 기다려!'..

호이스팅이란? - 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상으로 JS 엔진은 스크립트를 가져 오면 가장 먼저 코드에서 데이터를 위한 메모리를 설정한다. 이 시점에는 코드가 실행되지는 않고 실행을 하기 위한 준비단계이다. 여기서 함수와 변수는 메모리에 저장되는 방식이 다르다. 함수는 전체 함수에 대한 참조와 함께 저장이되고 변수의 경우 ES6 문법인 let과 const는 초기화 되지 않은 채로 저장이 되고, var는 undefined로 저장이 된다. 예시를 통해 보면 이해가 좀 더 잘되었다. console.log(sum(2,3)); console.log(name); console.log(age); function sum(x,y) { return x..

1. SSR(Server Side Rendering) 1) 개념 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 #1. User가 Website 요청을 보냄. #2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.) #3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.) #4. 클라이언트가 자바스크립트를 다운받는다. #5. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다. #6...

처음에는 길게만 느껴졌던 99일의 시간이 끝났다.. A반 사람들은 게더에서 모두 학사모를 쓰고 수료를 즐겼다 ㅋㅋ 반별로 동료 평가 등을 통한 간단한 시상이 있었는데 예상치 못하게 두개의 상을 받게되어 기분이 묘했고 정말 잘 지내왔구나라는 생각이 들었다. 특히 7점 만점 동료평가 평균 6.8점 이상에게만 주어지는 "스윗함이 일상" 이라는 부분의 수상은 좋은 평가를 해준 동료들에게 정말로 정말로 고마웠다. 앞으로도 태도와 코드가 모두 좋은 동료가 되기위해 열심히 해야겠다!! 항해는 끝났지만 이제 취업을 위한 시작이 되었기에 앞으로 모자란 부분들을 더 채워가며 취업 준비를 해야겠다. 지나고보니 아쉬움만 남지만..! 아쉬워 할 시간 대신 더 열심히 할때다!

포트폴리오 프로젝트 내부에서 채팅 기능에 대한 피드백을 많이 받게되었다.원래는 카카오톡 그룹채팅방으로의 연결을 유도했지만, 사이트 내에서 해당 모임에 참여를 한 사람들만의채팅방이 있었으면 좋겠다는 의견이 있어 이력서를 제출하기 전에 socket 적용에 대해 고민을 해보았다. 먼저 socket이란 라이브러리가 그냥 하나로 있는 줄 알았는데 그게 아니라 개념 정리를 먼저 해본다. WebSocket vs socket.io 웹소켓은 양방향 소통을 위한 프로토콜이다. 반면에, socket.io는 양방햔 통신을 하기위해 웹소켓 기술을 활용하는 라이브러리이다. (마치 자바스크립트와 jQuery의 관계) 그렇기 때문에 socket.io가 같은 기능을 구현하더라도 약간 느리지만, 많은 편의성을 제공한다. 또한 Java,..

타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어 또는 자바스크립트의 확장된 언어라고 볼 수 있다고 한다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 하는데 이 변환 과정을 우리는 컴파일(complile) 이라고 부른다. 하지만 타입스크립트를 보고있으면 언어라는 생각보다는 자바스크립트의 오류를 막아주는 보조역할의 느낌이 강했다. 물론 아직 공부 초입이라 그렇지만 자바스크립트를 더 보완해주기때문에 JS에서 TS로의 변화기 일어나고 있다고 생각된다. 왜 타입스크립트를 써야할까? 1) 에러 예방 TS를 사용하는 가장 큰 이유 중 하나는 정적 타입을 지원한다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고 이는 코드의 가독성을 높..

상태(state)란 무엇인가? 정의를 여러가지로 찾아보았지만 그중 가장 이해가 되는 정의를 인용해본다. 웹 애플리케이션을 렌더(render)하는데 있어 영향을 미칠 수 있는 값 Plain Javascript Object hold information influences the output of render *리액트 공식문서 중 내용에도 위와 같이 설명한다. (참고 링크) 이 말 전부 다 통용 되지는 않겠지만 리액트를 사용함에 있어서 이해가 잘되는 정의였고, 조금 더 쉽게 풀어쓴다면 페이지가 그려질 때 그려지는 일련의 내용물 정도로 말할 수 있다고 생각한다. 전역관리 사용의 이유? 상태관리에 더 관심을 가지게 된 계기는 팀 프로젝트를 진행함에 있어 props drilling을 직접 경험하게 되었기 때문이다..