뉴히의 개발 로그

3주동안 팀원들과 함게 jsvascript 기초문법 강의 수강하는것부터, 개인과제, 마지막으로 팀과제까지 함께하고 javascript 스터디 섹션이 마무리됬다. 많이 배우기도 하고 많이 느끼기도했고, 내 부족함을 알고 더 노력하고 발전해야겠다는 생각이 많이 들었던 한주..!! Keep | 다음 프젝에도 유지했음한다 팀과제하면서 모듈화를 처음 진행해봤는데 모듈화를 함으로써 코드재사용성이 올라가고 부분적 수정이 더 용이해 졌다. 본인이 맡은 부분이 아니더라도 함께 고민하기 더좋은 방법이 없는지 묻고 의논하기 오류가 있다면 스스로 먼저 나서서 맡아서 해결하기 Problem | 이번프젝 문제점/해결방안 javascript로 슬라이더의 너비를 구할때 반응형이 리로딩없이 부드럽게 되기 내 하루 시간을 알차게 사용하..

window.onresize는 리사이즈가 될때마다 객체에 발생하는 이벤트다. 팀프로젝트로 API를 받아와서 영화 정보 조회 사이트를 만드는 프로젝트였다. 영화 정보 상세페이지에 같은 장르의 영화를 추천해주는데 슬라이드 반응형으로 작업을 하기로했다. 모바일에서는 슬라이드가 2개, 태블릿은 3개, PC에서는 5개가 보여지도록 구현하기로. 불려오는 영화의 갯수가 다르기 때문에 스크립트에서 슬라이트 낱개의 너비와, 전체 슬라이드의 길이를 만들어줘야했다. let screenWidth = window.innerWidth; if (screenWidth < 768) { slides.style.width = 50 * slideCount + '%'; } else if (screenWidth < 1200) { slides...

팀프로젝트 막바지! TMDB에서 데이터를 불러와서 사용하는데 인기순위, 최고평점등의 객체를 20개씩만 불러올 수 있었다. 그런데 더 불러와서 더보기로 보여주고 싶었기에 fetch를 두개 불러서 합쳐보기루 처음엔 각 다른 패치를 따로 불러오려했었는데 합펴서 같은 값을 제거한는게 더 쉬운듯 해서 객체 합치기 공부 :) 배열 메서드 concat() concat 은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다. const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1..

스택(Stack) 자료구조 LIFO(Last In First Out) 스택은 흔히 프링글스에 비유가 된다. 프링글스 통 안에 감자칩이 쌓여있지만 우리는 가장 위에 있는 감자칩부터 꺼내는 수 밖에 없다. 즉, 마지막으로 넣은 것이 (맨위에 있으므로) 가장 먼저 나오는 Last In First Out(LIFO) 구조이다. 스택은 한쪽 끝에서만 자료를 넣고 뺄 수 있는 자료구조이다. 스택으로 할 수 있는 가장 기본적인 연산은 스택 맨 위에 값을 넣고(PUSH), 스택 맨 위의 값을 꺼내고(POP), 스택 맨위의 값을 확인하는(PEEK) 것이다. 큐(Queue) 자료구조 FIFO(First In First Out) 음으로 들어간 친구가 처음으로 빠져나오는 FIFO(First In First Out)의 성격을 가..

localStorage 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐! 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유..

document.ready 개인과제 프로젝트를 하다가 바로 문제를 만나버림 왜애ㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐ!!! addEventListner 오류는 상황마다 다르고 해결 방법도 다를 수 있겟지만 구글링해보면 여러 해결 방법들이 나와있다. 해결 1) script 코드가 상단 안에 있을경우 HTML이 다 읽히기도 전에 이벤트가 발생하기 때문에, 객체가 무엇인지, 그값을 알 수 없어서 오류가 발생하는 경우가 있다. 나같은 경우는 cardList가 null 값이 었고, script 소스 코드를 body 닫는 태그 위로 옮기니 바로 해결이 되었다. html 파싱 후에 script가 동작하니 깔끔히 해결되는 문제였던 것이다! 해결2) 이와같은 경우는 script를 상단에 두고도 해결이 가능하다. defer..

지난 한주는 개인 프로젝트를 진행하고 제출하며 마무리했다. 그리고 + 새로운 팀프로젝트! 가 시작되었다. Keep | 다음 프젝에도 유지했음한다 개인프로젝트 지만 같은 과제를 진행하며 팀원들과 함께 여러의견 나누면서 공유하면서 작업 모르는 부분 서로 묻고 답해주고 같이 고민해보기 안되는 부분은 다양한 방법으로 접근해보기 Problem | 이번프젝 문제점/해결방안 API에서 필요한 데이터 가져오기 필요에 따라 함수, 메서드 다양하게 사용해 보기 Try | 다음 플젝을 위해 할 노력 어느 상황에 어떤 함수나 메소드를 사용해야하는지 공부하기 알고리즘 조금씩 꾸준히 공부하기 Feel | 이번 프로젝트를 통해 느낀점 갈길이 멀구나 ㅎㅎ 그래도 함께 팀원들하고 얘기하면서 배우는게 많은! 팀원이 있으면 정말 좋다 좋..

새로운 팀 프로젝트를 위해서 git pull 하기위해서 새로운 repository를 연결하고 pull하려고하니 fatal: couldn't find remote ref master 오류가 떳다 원인은 github의 기본 생성 브랜치이름과 달라서 뜨는 오류이다. 나는 브랜치명이 master로 되어있었고 팀원분이 올려주신 이름은 main 이어서 뜨는오류! git pull origin main 하니까 잘 받아졌다. TIP! 기존에는 브랜치 생성할 때 기본브랜치가 master로 생성되는데 whitelist/blacklist와 master/slave라는 용어가 인종차별적인 담고 있어서 이 용어들을 제거하기 위해 master를 안쓰는 추세로 가고있다. 이후 master를 기본 브랜치로 사용하던 Git에서도 이 논의..