profile
프론트 개발자를 꿈꾸는 학생입니다.
post-thumbnail

왜 개발자는 코드 구조를 나누고 의존성을 고려해야할까?

@ 코드를 적절히 나눈 분류를 레이어 라고 하겠습니다. 예를 들어 controller 3개, model 5개는 2개의 레이어 입니다. @ 'A 레이어를 알고 있다' 는 A 레이어에 대한 참조를 가지고 있다는 것입니다. @ 참고한 글도 있지만 스스로 고민해본 것이 대

2021년 4월 10일
·
0개의 댓글
post-thumbnail

JWT는 어디에 저장해야할까? - localStorage vs cookie

이번에 지하철 미션을 만들면서 JWT를 클래스 property에 저장했었는데 리뷰어 분께 해당 부분을 피드백 받으면서 어디에 JWT를 저장하는 것이 좋을까 에 대해 고민해보게 되었다. 0. 기본 지식 JWT Json Web Token의 약자로 모바일이나 웹의 사용자

2021년 4월 6일
·
12개의 댓글
post-thumbnail

웹은 어떻게 동작할까? - 1. 사용자가 웹페이지를 보기까지

이번에 SPA(Single Page Aplication)을 공부하면서 내가 웹 페이지의 동작 원리에 대해서 제대로 모르고 있다는 생각이 많이 들어 한번 총 정리를 해보려 한다. 오해하고 있던 부분 클라이언트는 서버로부터 html 파일만 가져온다? 이 생각은 잘못된

2021년 3월 23일
·
11개의 댓글
post-thumbnail

파일명 대소문자 인식에 대한 고민

파일명을 파스칼 케이스로 쓰고 있다가파일명 대소문자 인식(case sensitive) 관련 문제로 webpack --watch 가 동작하지 않는 상황에 직면해서 3시간을 날린 나를 위한 글이다.. 😥내가 쓰는 window 10의 파일 시스템은 NTFS 방식이다.NTF

2021년 3월 14일
·
0개의 댓글

구현방법에 대한 고민 function vs class vs mixin

최근 페어프로그래밍 하면서 웹 하나를 mvc구조로 만들게 되었다.페어와 논의 끝에 mvc 중 model을 제외한 view와 controller를export function으로 구현하기로 하였는데function 방식의 크나큰 단점을 직접 느끼고 배운 것이 많아 글을 작성

2021년 3월 11일
·
0개의 댓글

AJAX & JSON

AsynchronousJavaScriptAndXML비동기 데이터 통신을 위해 개발된 js 기술.HTML, XML, JSON 등 다양한 데이터를 주고 받을 수 있다.하지만 JSON만 통신에 사용하는 이유가 뭘까.먼저 JSON은 웹에서의 통신으로 주고받는 거의 모든 데이터

2021년 3월 11일
·
0개의 댓글
post-thumbnail

프론트엔드에서 API Key를 숨기는 법

이전에 여기에서 웹팩과 dotenv 패키지를 통해 api key를 숨길 수 있다고 포스팅한 적이 있는데, 사실 그게 아니었다. 어차피 AJAX 방식으로 보내는 거라 개발자 도구에서 정보가 줄줄 새고 있었던.... 지금이야 토이프로젝트 개념으로 개발하는 것이라 유출되어

2021년 3월 8일
·
2개의 댓글
post-thumbnail

스크롤을 내리면 새로운 컨텐츠 불러오기(lazy loading)

youtube api를 이용해서 유튜브 검색 결과를AJAX를 통해 받는 작업을 하고 있다.그런데 검색 결과를 한번에 엄청나게 가져온다면 웹에 크나큰 부담이될 것이고 그렇게 할 필요도 없다.초기에 10개의 검색결과만 불러오고 스크롤을 아래로 끝까지 내리면새로운 10개를

2021년 3월 4일
·
2개의 댓글
post-thumbnail

css grid

grid는 flex와 비교해flex는 col이나 row 중 하나를 주요 축으로 하여 구성하는 방식이라면grid는 좀 더 복잡한 2차원 레이아웃을 구성할 수 있는 시스템이다.백번 듣는 것보다 직접 보는 게 훨씬 좋다.직접 해보자.위와 같은 레이아웃을 그리드로 구현한 cs

2021년 3월 4일
·
0개의 댓글

webpack, loader

요즘 youtube 검색 api를 사용해서 웹을 제작하고 있다.그런데 문제가 api key를 숨겨서 git에 배포해야하는데어떻게 숨길 것인가에 대해서 고민이 됐다.대략 방법은 2가지로 생각을 했는데1\. webpack을 이용해 nodeJs의 환경변수를 설정해주는 dot

2021년 3월 3일
·
0개의 댓글

css flex

기존 css에서 불가능하거나 굉장히 어렵게 구현했던 것들을 좀 더 쉽게 구현 할 수 있도록 css3에서 추가된 레이아웃 방식.flex는 자식 요소에게만 적용된다. 후손은 적용되지 않음flex의 방향에 따라 100%의 기준이 달라짐 \- ex flex-directio

2021년 3월 1일
·
0개의 댓글

html semantic tag 공부

@ 공부하다가 자주 까먹는 semantic tag를 정리하기 위한 공간입니다 😊(작성중)

2021년 3월 1일
·
0개의 댓글

html attribute 공부

@ 공부하면서 자꾸 까먹는 attribute들을 위한 공간입니다 😊tab키를 이용해서 focus가 안되는 요소도 가능하도록 만듦tab으로 focus가 안되지만 시각 장애인 입장에서 반드시 읽어야하는 요소라면 tabIndex를 주어 접근성을 높일 수 있을듯주의 : ta

2021년 3월 1일
·
0개의 댓글

함수 네이밍 관련 리뷰

데이터를 검증하는 함수는 긍정형으로 짓기isNotNumber() 보다!isNumber() 나음.메서드에 not이 포함되어 있으면 오히려 읽기 힘들다.함수 이름은 함수가 하는 일의 목적을 추상화 시켜 정해야한다.ex. "축하합니다! 게임이 모두 끝났습니다!"라는메세지를

2021년 2월 27일
·
0개의 댓글

2021-02-18 코드 리뷰 : 로또 미션 1차

https://github.com/woowacourse/javascript-lotto/pull/18BEM은 css class의 이름을 좀 더 관리하기 쉬운 형태로 만들기 위한 방법론임네이밍은 Block\_\_Element--Modifier로 표현됨. 각 요소는

2021년 2월 27일
·
0개의 댓글

2021-02-16 코드 리뷰 : 자동차게임 2차

const cars = \[]처럼 복수형의 값은 배열의 형태를 띌것.{ value: value } => { value } 형태로 작성 가능cypress test를 여러가지 도메인으로 세분화하여 테스트를 찾기 쉽도록 하자.테스트 코드는 완벽함만을 추구 x 효율적인 코드도

2021년 2월 27일
·
0개의 댓글

DOM 조작 효율성에 관한 이야기

결론부터 이야기 하자면 reflow와 repaint 과정을 최소한으로 줄이면 된다.그런데 이 과정들은 무엇이고, 왜 과정을 줄여야 효율적인 것일까?먼저 웹페이지의 화면이 어떻게 생성되는 것인지부터 알아보자.우리가 사용하는 브라우저(크롬, 파이어폭스)들은 각자의렌더링

2021년 2월 23일
·
0개의 댓글

다중 상속이 가능한 클래스 코드 조각 Mixin(믹스인)

@ 제가 핵심이라고 생각하는 부분만을 다시 정리했습니다.@ 자세한 내용은 moggy.log에 정리가 굉장히 잘되어있습니다. 👍기존에 하나의 클래스는 하나의 부모 클래스만존재하는 불편함에서부터 Mixin은 시작되었습니다.예를 들어 코끼리와 참새가 있습니다.코끼리와 참새

2021년 2월 21일
·
0개의 댓글

원시 자료형은 어떻게 메서드를 호출할 수 있을까?

여기서 'hi'는 분명 원시자료형 string일텐데,원시자료형에 메소드나 프로퍼티가 존재할 수 있을까?결론적으론 존재할 수 없다.그렇다면 어떻게 메소드 호출이 가능한 것일까?js는 모든 것을 객체로 바라보는 언어이다.그래서 number,string, boolean 등등

2021년 2월 21일
·
0개의 댓글
post-thumbnail

Element? Node? HTMLCollection?

@ dom 객체에 관해 헷갈리는 내용을 정리했습니다.하나만 선택querySelector(), getElementById()element 객체 리턴으로 동일여러개 선택NodeList(non-live)와 HTMLCollection(live)으로 리턴 형태가 나뉘어진다.둘다

2021년 2월 21일
·
0개의 댓글