전체 글

이왕 하는거 우왕 나오게
Googling/cs

[HTTP] RESTful API 이해 (feat. 신입개발자 자격요건)

개발자 채용공고를 보면 빠지지 않고 나오는 것이기도 하고 기본 중에 기본이 'RESTful API 이해'이기에 정리할 필요가 있다. RESTful 하다는 것은 어떤 의미일까? REST은 HTTP를 활용하여 클라이언트와 서버 통신 가능하게 하는, 웹의 장점을 최대한 활용하는 아키텍쳐(설계구조)를 말하고, RESTful API는 HTTP 의도에 맞게 활용 및 디자인한 API(앱 활용 도구)다. 의도에 맞게 활용한다는 것은 첫째. 는 정보의 자원을 표현해야 하고, 둘째, 자원에 대한 행위는 (GET'생성', POST'조회', PUT'수정', DELETE'삭제')로 표현하는 것을 말한다. 로 주어나 목적어를 만들고, 로 동사를 만든다는 개념이다. 예) 에 를 할게! 여기서 를 동사로 활용하거나, 불분명한 자원으..

Googling/html + css

[CSS] 위치 변경 속성 ( translate VS positioning (top & left) )

웹 브라우저 성능 관련해서 찾아보면 항상 언급되는 부분이 'Paint를 최소화해야 한다는 점'이다. Paint를 최소화 하기위해서는 최초 한번 그리는 부분 외 다시 그려야하는 경우를 줄여야 한다는 것을 의미한다. 무심코, css의 top, left를 활용하다보면 Painting을 다시하는 경우가 생겨 성능에 이슈를 만들 수 있는데, 요즘은 브라우져 성능들이 매우 좋아 체감으로 느끼기는 쉽지않다. 그럼에도 불구하고 성능 이슈는 티끌모아 태산일 수 있기에 최대한 top, left는 지양해야한다. 대신하여 쓸 수 있는것이 translate 이고, 정확한 코드는 아래와 같다. /* bad */ .item { top : 10px; left : 10px; } /* good */ .item { transform : ..

Googling/cs

[HTTP] 쿠키와 세션 (feat. 신입개발자 면접질문)

Q. 쿠키와 세션에 대해서 설명해줄 수 있나요? 먼저 쿠키는 일정시간 임시 데이터를 클라이언트인 브라우저에 저장하기 위하여 사용됩니다. 쿠키는 인터넷 쇼핑몰에서 로그인을 하지 않았는데 장바구니 담기가 가능하게 하는데 활용되며, 광고 팝업에 나오는 다시보지않기를 누르면 다음에는 팝업이 나오지 않는 것에도 활용됩니다. 물론 서버 작업을 통해 구현해도 되지만 굳이 저장할 필요가 없다면 서버의 리소스는 아끼는 것이 좋습니다. 또, 매번 서버에서 데이터를 불러오기보단 간단한 값들은 쿠키를 활용하여 저장하면 비용을 아낄 수 있습니다. 쿠키는 도메인별로 저장할 수 있으며 개발자모드(F12)를 활용하면 어떠한 키/밸류를 가지고 있는지 확인이 가능합니다. 확인이 가능한 데이터이기에 쿠키는 보안에 취약할 수 밖에 없습니다..

Retrospective

[개발자회고] #1. 28살, 개발 공부를 시작하다 (feat. 팀노바)

※ 저는 팀노바에서 6개월 공부하고 개인적인 사유로 교육과정 중도 포기한 학생입니다. 그 부분 감안하여 글을 읽어주세요! 프로그래밍 공부를 결심했다 28살 1월, 잘 다니던 회사를 퇴사하고 바로 혼자 한 달 유럽 여행을 떠났다. 여행 후 충분히 휴식하고 충분히 고민할 수 있는 시간을 가졌다. 고민이 끝났을때 프로그래밍을 공부하기로 결심했다. 팀노바 vs ??? 페이스북을 통하여 프로그래밍 교육기관 팀노바를 알게 되었다. 블로그에 쓰인 수많은 글들을 보며 그 기관만큼은 남다른 철학이 있다고 생각했다. 규모는 작지만 강해 보였고 확실한 무언가가 내 눈에는 보였다. 청강에서 팀장님의 '강력한 피드백'에 살짝 겁을 먹긴 했지만 안일한 마음으로 시작할 생각은 없었기에 그건 중요하지 않았다. ​ 허나, 주변인들이 ..

Googling/javascript

[Javascript] Body에서 Drag & Drop 활용하기

자바스크립트로 선언하여 document 에서 dragenter, drop 등의 이벤트를 제어하려고해도 제대로 작동않는 경우가 있다. 직접 경험한 예로 전체 영역에 파일 드래그 앤 드랍을 통한 업로드를 구현하려 할때 로직을 제대로 타지 않고 새창에서 파일을 로딩해버리는 경우가 생겼었다. 이 때, 간단하게 바디태그에 retern false 처리를 해주면 제대로 작동한다. Drag & Drop Area

Googling/javascript

[Javascript] 배열 (array) 자르기 - slice()

const sliceArray = [1,2,3].slice(1,3) 두 개의 인자를 모두 선택적으로 활용하는데 첫번째 인자 undefined 시에 0으로 작동하고 두번째 인자 undefined 시에 배열의 길이로 작동한다! 정확하게는 첫번째 인자에 해당하는 인덱스부터 두번째 인자에 해당하는 인덱스 이전까지이다. (이 부분이 가끔 생소하게 다가온다 ㅎ) 여기서 slice()를 인자없이 쓸 수도 있는데 이 경우 결과값이 동일하여 무쓸모라 생각할 수 있는데 slice() 활용시 새로운 객체가 리턴되는 것이 핵심이기 때문에 복사 용도로 활용할 수 있다! const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(..

Googling/JSP

[JSP] include 제대로 알고 쓰기 (동적, 정적)

😊 주요 활용 케이스 보통 jsp 파일 내 라인수가 길어져서 쪼개는 용도나 공통인 부분을 모듈처럼 활용하기 위해서 파일을 나누고 Include를 활용하여 기존 파일에 포함하는 방식으로 많이 활용한다. (나누는 이유는 결국 유지보수!) 😅 문제 비슷하겠거니 하고 둘 중 하나를 입맛대로 골라쓰는 경우가 있는데 그럴 경우 몇가지 문제가 발생한다. 간단하게 '파일 호출 -> 파일 로드 -> 파일 포함' 세가지 스텝이 있다고 할때 는 동적으로 세가지 스텝을 거치고 은 정적으로 세가지 스텝을 거친다. 조금 풀어 쓰면, 정적 include는 파일이 호출되고 로드되어 포함되기까지 다음 스텝을 진행하지 않으며 동적 include는 호출과 동시에 다음 스텝을 진행한다. 이렇게 되면 동적 include 다음에 오는 정적 i..

Small Talk

사이드 프로젝트보단 기술블로그를 운영해볼까?

개발자로 일 한지 만 2년이 지났다. 분명 2년 전보다는 분명 성장했다. 하지만 어떤 부분이 성장했느냐고 누군가 물어본다면 쉽게 답하기는 어려울 것 같다. 걸출한 포트폴리오도 없고 나만의 사이드프로젝트도 없다. 그런 것들의 성장의 전부는 아니겠지만 어떠한 아웃풋없이 나혼자 주장하는 '나는 성장했어!'는 의미없을지도 모른다. 사이드 프로젝트를 아예 안 한 것은 아니다. 회사에서 접하지 않는 새로운 기술들을 공부하고 쓸만한 서비스를 만들기 위해 시도했다. 얼추 다 만들어 주변 사람들에게 공개하기도 했지만 결국 끝을 맺지 못했다. 하나의 서비스를 사람들에게 선보이기까지의 과정이 생각보다 어렵다고 느꼈다. 어려웠던 이유는 서비스의 부족함이 눈 앞을 가려 출시를 계속 미루었기 때문이다. 노력보다 결과물이 형편없었..

날개단
날개단 기술 블로그