고졸 개발자의 블로그 고졸 개발자의 블로그

전체 글

• css 용어 정리

  css 2020. 12. 31. 20:36

  CSS 용어 정리 CSS(Cascading Style Sheet) Box Model box model은 css가 레이아웃을 설정하는데 사용하는 모델이다. 간단하게 말하면 그냥 요소들의 크기를 지정하는데 쓴다. 다음 사진과 같다. 자세한 설명 reset CSS html tag에 기본적으로 들어가있는 margin, padding, color, border 등의 스타일적인 요소를 초기화 시키는 css code or library이다. 너무 잘 정리해주신 블로그를 찾았습니다. 감사히 쓰겠습니다. float html 요소 위치를 변경하는 css 요소 중 하나. BFC(Block Formatting Content) 이라는 박스에 의해서 위치가 지정된다. float: left | right | none; // Lef..

  Read More
• forwardRef, useImperativeHandle

  react 2020. 12. 31. 12:09

  forwardRef reference를 다른 곳으로 넘겨주기 위해서 사용하는 method const Parent = (props) => { const ref = useRef(); return } const Child = React.forwardRef((props, ref) => { return }) forwardRef의 문제점 forwardRef의 문제점은 Parent에서 ref에 무엇이 들어가던지, 무조건 그에 관련된 코드를 실행시킬 것이다. 만약에 Child에서 ref를 설정하지 않았다면? Parent에서 ref가 Null이 될테니 코드가 검증되지 않는다. 문제 해결 방법 문제를 해결하는 방법은 useImplerativeHandle을 이용하여 ref와 data를 mapping 해주는 방법이 있다. c..

  Read More
• javascript 변수 메모리 할당

  javascript 2020. 12. 31. 11:08

  서론 이 글은 1년차 세미 프론트엔드 개발자가 코어 자바스크립트를 읽고 정리를 하는 글입니다. 원작자 님께 죄송합니다. 그리고 틀린 부분이나 수정할 부분이 있다면 댓글 혹은 이메일 보내주시면 수정하도록 하겠습니다. 감사합니다. 💻 메모리 할당? 그거 알아서 해주자녀? 💻 물론 javascript에서 자동으로 메모리 관리를 해주고 안쓰는 메모리는 GC가 알아서 처리해준다. 하지만 중급 개발자가 되기 위해서는 이런 부분도 알고 있어야지 언어에 대한 이해도가 높아지고, 나중에 연계되는 부분이 많다고 생각해서 10분쯤 버려서 공부할 만한 주제라고 생각한다. 아무튼 시작하겠다. 📦 변수 할당 📦 우선 변수 할당을 하는 코드를 먼저 작성하겠다. const a = 10; const b = { array: [1,2,3..

  Read More
• 변수, 상수, 리터널의 차이점

  개발 2020. 12. 31. 11:07

  🙇‍서론🙇‍ 이 글은 벨로그를 보다가 자신의 근본이 부족하다고 생각하게 된 1년된 세미 개발자가 쓴 글로, 오류가 있다면 댓글이나 메일로 보내주시면 감사히 반영하겠습니다. 이걸 왜 쓰게 되었는가? 이전화와 같지만 글을 보다가 근본이 없어졌다고 생각해서, 공부가 재미없어져서(?) 시작하게 되었다. 변수 학교의 신이라고 불리우는 선생님이 계셨다. 그분께서는 변수를 빈칸, 어떤 걸 담을 수 있는 그릇 따위로 비교하는 것을 매우 싫어하셨다. variable를 생각해보면 메모리에 할당되어 있는 것들에게 이름을 붙여준다고 생각 되지 않니? 난 그분의 말을 듣고 정말 머리를 띵 맞은 듯한 느낌을 받았다. 다른 관점으로 보면 메모리에 값을 담는거니 맞지 않느냐 라는 말을 할 수도 있겠지만, 관점의 차이인 것 같다. 변..

  Read More
• React Higher Order Component (HOC)

  react 2020. 12. 30. 12:57

  HOC 내가 이 HOC에 대해서 알게 된 이유는, 단지 코드의 중복을 줄일 수 없을까? 라고 생각하던 도중에 동기 중 1명이 이것에 대해 알려 주었는데, 비슷한 동작이 여러번 반복되는 컴포넌트가 있을 때, 다른 함수로 여러번 빼지 않고 한개의 컴포넌트로 묶을 수 있게 되므로, 효율적이라고 생각하였습니다. 그래서 정리하게 되었습니다. what is HOC 우선 시작하기 전에 React Docs에 있는 HOC에 대한 설명을 알려 드리겠습니다. 고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 제가 생각하는 HOC도 비슷합니다. 중복되는 코드를 재사용 하기 위해서 component로 빼내는 것. 이것이 제가 생각하는 HOC 입니..

  Read More
• pwa cache pattern

  javascript 2020. 12. 29. 02:10

  PWA Caching Pattern 이 글은 "만들면서 배우는 프로그레시브 웹 앱"을 정리한 글입니다. 🤔캐싱 패턴...?🤔 캐싱패턴이라... 프론트 개발자에게는 조금 생소한 주제일 수 있다. 하지만 요새 트렌드의 방향이 PWA인 만큼 캐쉬에 대해서 자세하게 알아보도록 하자. 여기서 캐싱 패턴이란, serviceWorker에 캐싱된 데이터를 어떻게 이용할 지 정하는 것을 말한다. 캐시만 허용 우선 가장 기본적인 패턴인 캐시만 허용에 대해서 알아보자. 진짜로 캐시에 있는 데이터만 사용하는 패턴이다. 캐시에서 파일을 찾지 못하면 모두 에러 처리가 된다. 대체로 로고나 아이콘, style sheet 같은 정적인 리소스를 처리하는데 유용하다. self.addEventListner("fetch",( event )..

  Read More
• cookie, local storage, session stoarge 알아보기

  개발 2020. 12. 28. 16:35

  Cookie what is cookie? 서버에서 브라우저에게 통신 과정에서 줄 수 있는 데이터 조각이라고 합니다. 3가지 용도로 사용되고 있습니다. 세션 관리 유저 로그인 정보 유지, 장바구니, 게임 기록 등 개인화 테마, 다크 모드 유지 등 트래킹 유저가 자주 보는 글, 찾아본 검색 기록 트래킹 등 예전에는 cookie를 이용하여 browser에 데이터를 저장하고 했습니다. 하지만, localStorage와 indexedDB가 생긴 이후 cookie에 데이터를 직접 넣는 것은 지양합니다. how to set cookie? Response header에 Set-Cookie 헤더 이용 Set-Cooke: cookieKey= cookieValue;와 같이 사용 예시 Content-type: text/htm..

  Read More
• 마이스터고 개발자의 하소연

  개발 2020. 12. 28. 02:07

  🤔 뭐야 이 제목 무슨 말이야? 🤔 이 글은 제가 마이스터고 입학해서 근 2년간의 삶에 대한 이야기 입니다. 번아웃 아닌 번아웃에 대한 이야기이고, 그냥 하소연입니다 ㅎㅎ 그저, 겪었던 것과 이것에서 느꼈던 것을 이곳에 채우려 합니다. 이 글을 쓴 이유는, 만약에 개발을 한 지 별로 안된 분들이 개발을 하다가 이런 경험을 했을 때, 자신만 그런게 아니라는 것을 깨닫고 다시 일어설 힘을 얻으셨으면 합니다. 공감하지 못하는 분들이 많을 수도 있습니다. 그럼 댓글에 알려주시면 반영하도록 하겠습니다. 제가 아직 어려서 잘 모르는 것일 수 있으므로, 생각해보고 수용하도록 하겠습니다. 저는 단지 개발공부를 한지 2년정도 된 초짜 프론트 엔드 개발자일 뿐입니다. 행복한 공부, 재미있는 개발 여러분들은 개발을 어떻게 ..

  Read More