방구석 개발자의 놀이터

대기업 SI에서 스타트업으로 이직한지 이제 1년이 조금 지났다. 원래 1월 초에 쓰려고 했지만..그동안 게을러져 이제 쓴다 ㅠㅠ... 내가 이 글을 쓰는 이유는, 내가 대기업SI에서 스타트업으로 이직 제안을 받았을 때 정말 많이 검색을 해보며 대기업SI > 스타트업으로 이직한 개발자들의 글을 많이 참고 했었기 때문에 나와 같은 고민을 하는 사람들에게 도움이 되고자 글을 쓴다. 처음에 이직 제안이 왔을 때 정말 고민을 많이 했다. 대기업 취직 전에 인턴생활 했던 스타트업에서 투자를 받아 개발자를 구한다고 같이 일했으면 좋겠다는 이직 제안을 받았다는게 내가 잠깐 일했었던 곳이지만 나를 좋게 봐주었다는게 감사하면서도 현재 다니던 대기업 SI 회사내에서 평가가 좋았고 좋은 동기들, 좋은 선배들이 많았고 대기업이..

웹펙을 사용하게되면 웹에서 사용하는 다양한 파일들을 모듈별로 다룰 수 있게된다. 웹펙의 왼쪽 그림처럼 서로 참조관계에 있는 파일들을 모아서 하나의 파일로 묶는것을 Bundle 이라고한다. 웹펙이 이렇게 Bundle을 시켜줌으로써, 웹펙은 모듈 번들러라고도 불린다. Bundle이 중요한 이유 1. 모든 모듈을 로드하기 위해 검색하는 시간이 단축 2. 사용하지 않는 코드를 제거 3. 파일의 크기를 줄여줌

무한 스크롤을 하기 앞서 가장 중요한 포인트는 Scroll Bar의 위치를 찾는것이다. 1. Scroll Bar의 위치 찾는법 const onScroll = e => { console.dir(e.target.scrollingElement); } document.addEventListener("scroll", onScroll); 위와 같은 코드를 사용하여 콘솔창을 확인해보면 위와 같이 수많은 정보가 나온다. 여기서 필요한 정보는 scrollHeight: 1231 , scrollTop: 340, clientHeight: 891 이렇게 3가지 정보가 필요하다. 그 이유는!!! 무한 스크롤에서 필요한 Scroll을 가장 아래로 내렸을 때가 바로 body 영역의 총 길이 = scrollHeight = scroll..

웹에서 사용하는 이미지는 크게 2가지로 나뉘어 진다. 1. 비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름 (.jpeg, .gif, .png) - 정교하고 다양한 색상을 자연스럽게 표현 - 확대/축소 시 계단 현상, 품질 저하 2. 벡터 : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지 (.svg) - 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움 - 확대/축소에서 자유로움, 용량 변화가 없음

1. 주소창에 페이지 주소 입력 2. 해당 주소에 맞는 서버로 최초 요청(Request) 3. 최초의 요청이 서버로 들어오게 되면 사용자의 브라우저로 최초 응답(Response - HTML) 전달 4. 응답 받은 HTML을 렌더링하고 css, js, img 등 추가 Resource들을 서버로 요청한다 5. 서버에서 브라우저에서 요청한 css, js, img 등 추가 응답을 해준다.

event.stopPropagation을 알아보기 전에 HTML에서 사용자 이벤트 전달 과정을 이해해야 한다. 1. 버블업(Bubble Up) - 웹 페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 되는데 이것을 버블업(Bubble Up)이라고 한다. 테스트 위의 코드를 예를 들면 a 태그를 클릭 했을 때 : a 태그의 onClick -> li 태그의 onClick -> ul 태그의 onClick 을 실행하게 된다. 만약 ul 태그에 onClick 이벤트가 있다면 a 태그를 클릭하는 순간 의도하지 않게 ul 태그의 onClick 이벤트가 실행된다. 이것을 방지하기 위해 event.stopPropagation()을 사용한다. 2. event.stopPropagation - 부..

1. Script import 방법 내용 // script 호출 //index.js let test = document.querySelector("#test"); test.addEventListener("click", function(){ alert("Hello Test") }); 로 호출할 수 있다. 위의 예제에서 index.js파일 경로는 html과 같은 폴더안에 있어서 경로를 생략했다. 2. Script 파일 위치 script를 head 태그 안에 위치할 수 있다. 하지만 이 경우에는 위의 예시에서는 오류가 발생한다. 오류를 방지하기 위해서는 위 예시의 index.js를 아래처럼 바꿔야 한다. //index.js window.onload = function(){ let test = document...

React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만 jsp혹은 일반 html에서는 태그를 이용해서 페이지 전환을 한다. 1. 태그 - 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버리게 됨 - 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링 2. Link 컴포넌트 - 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경 - Link컴포넌트 자체는 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장

1. Callback 함수 예제 - Callback 함수란 함수의 파라미터로 함수를 넣어 다음 함수로 실행 시키는것. -> 말이 조금 어려운데 예제를 보면 쉽게 이해 가능 function increaseAndPrint(n, callback){ setTimeout(()=>{ const increased = n + 1; console.log(increased); if(callback){ callback(increased); } }, 1000); } increaseAndPrint(0, n => { console.log('끝'); //결과 : 1, '끝' }); - 위의 예제에서는 callback 함수에 n => {console.log('끝');} 함수를 넣은 것 2. Callback 지옥 - Callback함..

vscode에서 함수형 컴포넌트를 작성할 때 항상 작성되는 폼이 있는데 이 때 Snippet 설정을 한다면 생산성을 높일 수 있다. 1. 원하는 Snippet 모양을 작성한다. (ex. 함수형 컴포넌트) import React from 'react'; function ${TM_FILENAME_BASE}(){ return( ); } export default ${TM_FILENAME_BASE}; 여기서 ${TM_FILENAME_BASE} 는 파일의 확장명을 제외한 파일명을 의미한다. 즉, Sample.js 파일에 생성을하면 Sample이 들어가게 된다. 2. snippet-generator.app/ 에 들어가서 위의 코드를 붙여넣는다. ①번에는 만드려는 Snippet의 설명 (ex. create funct..