0. 이번 주는 공통 컴포넌트를 만들기로 했다.현재 프론트 2명, 백엔드 1명, AI 1명으로 구성된 프로젝트에 참가 중이다. 나랑 같이 웹 프론트엔드로 참가하는 친구는 교내 개발동아리와 연합 개발동아리에서 프로젝트 개발을 하며 경험치를 많이 쌓아서 개발에 능통하다. 이 친구와 이번 주에는 프로젝트의 공통 컴포넌트를 제작하기로 했다. 친구는 컴포넌트를 어떻게 만들까? 친구의 코드를 살펴보기로 했다.1. 폴더(파일) 구조부터 확인하자src 안에 components 폴더를 만드는 것은 똑같은데, common components들을 저장할 common 폴더를 따로 만들고, 도메인별로 폴더를 만들어서 컴포넌트 파일들을 분리한다.input 컴포넌트를 만든다고 가정하자. 친구는 components/common 안에..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/425861. 나의 풀이처음에 문제를 읽을 때는 조금 막막했었다. 도대체 뭘 하라는거지?progressses 배열과 speeds 배열이 있다.뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수는 있는데그러면 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 같이 배포된다.그래서 나는 어떻게 했냐면,100에서 progesses를 뺀 left_progresses 변수를 만들었다.left_progresses를 speeds로 나눈 값(이 때 올림을 해야한다(ceil 사용))을 새로운 배열에 push 한다.값들이 들어간 배열(days)를 순회하는데 가장 앞에 있는 index의 값을 변수 standar..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/12906 1. 자바스크립트에는 스택이 없나?스택을 활용해서 푸는 문제 같았고, 만약 C++로 문제를 풀었다면 STL stack을 활용해서 금방 풀 수 있을 것 같았다.하지만 자바스크립트에도 스택이 있나? 검색해보니 배열을 활용해서 스택을 직접 구현하는 방법들이 많이 나왔다. 근데 그러지말고 바로 배열을 쓰면 될 것 같아 배열을 사용했다.2. 하지만 자바스크랩트 배열에는 top이 없다.하지만 문제를 통과하지 못했다. 왜냐하면 내가 무의식적으로 top을 활용했는데, 자바스크립트의 배열에 .top을 붙여봤자 아무 일도 일어나지 않기 때문이다.top 대신 ‘배열.length - 1’을 넣으면 어..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/425761. 답은 맞았지만 효율성 테스트에 통과를 못했다처음에는 그냥 단순히 participant에 있는 이름이 completion에 없으면 그 이름을 return 하면 되는 것이 아닌가라고 생각했는데 참가자 중에 동명이인이 있는 경우도 생각해야 했다. 따라서 participant에 해당 이름이 2개 이상 존재하고, completion 배열에 존재하는 해당 이름의 개수가 participant 배열에 존재하는 해당 이름의 개수보다 적다면 해당 이름을 return 했다.function solution(participant, completion) { for (var i = 0; i pa..

0. 자바스크립트 코딩테스트 스터디를 시작했다방학을 맞아 코딩테스트 스터디를 시작했다. 자바스크립트로 코딩테스트를 응시하고자 하는, 웹 프론트엔드 개발자를 희망하는 친구들끼리 모였다. 한동안 알고리즘 문제를 풀지 않아서 잘 풀 수 있을지는 모르겠지만, 그래서 더욱 열심히 해보려한다. 프로그래머스 사이트에서 코딩테스트 탭 → ‘알고리즘 고득점 Kit’ 메뉴를 클릭하면 유형별로 문제를 확인할 수 있다. 먼저 맨 왼쪽 위에 위치한 ‘해시’ 유형부터 풀어보았다. 그 중 맨 첫번째 문제, ‘폰켓몬’을 풀어보자. 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/1845 1. 나의 풀이function solution(nums) { var..

1. Next.js? 그냥 react 개발하듯이 하면 되지 않나?방학 동안, Next.js 14를 익히고 싶어서 Next.js로 자기소개 사이트를 만들고 있다. 블로그 글을 읽으며 개발할 때 React와 어떤 차이점이 있는지 읽고 바로 작업에 들어갔다. 작업을 하며 라우팅 방식이나 서버 컴포넌트 같은 차이점 외에는 React와 별 다른 점이 없다고 생각하기도 했었다.(header 밖에 안 만들었을 때 그런 생각을 한 게 참…ㅋㅋㅋ). 하지만, 그 생각은 길게 유지되지 않았다. 왜냐하면 css 애니메이션이 동작하지 않았기 때문이다. 2. css 애니메이션이 작동하지 않아요내가 좋아하는 음악의 앨범 커버, 노래 제목, 가수 이름이 적혀있는 MusicCard 컴포넌트가 있고, 그 MusicCard 컴포넌트들이..

IT 연합동아리에서 전시회를 연다고?같은 동아리 부원이자, 같은 프로젝트 프론트엔드 팀원인 친구가 본인이 속해있는 동아리에서 서비스를 개발했고, 또 그 서비스를 소개하는 전시회가 열린다고 해서 갔다왔다. 전시회가 용산구에서 열려서 살짝 고민을 하긴했지만, IT 연합동아리 전시회를 구경할 기회는 흔치 않은 것 같기에, 또 구경해보고 싶기도 했기에 다녀왔다. 안으로 들어가니 많은 부스들이 있었다. 그리고 팜플렛을 받았는데, 팜플렛에 스탬프가 4개가 찍혀있으면 가챠를 돌릴 수 있는 기회를 1번 준다고 했다. 과연 전시회에는 무슨 서비스들이 있을까. 하나씩 둘러보기로 했다.1. 또바친구가 프론트엔드로 참여한 ‘또바’는 노인분들의 사회활동을 도와드리는 서비스다. 로그인을 하고 참여하고 싶은 활동의 카테고리를 정하..

0. 네? 제가 파트장이요?올해 1월 말이었을 것이다. 날씨는 꽤나 추웠고, 봄이 온다는 것이 상상이 되지 않았다. 나는 동아리에서 웹 프론트엔드로 참여한 프로젝트 작업을 하며 시간을 보내고 있었다. 느슨했지만 아예 놀지는 않았던, 조금은 여유로웠던 순간이었다. 그러다가 디스코드로 연락이 왔다. 동아리 차기 회장이 되는 친구였다. 프로젝트에 대해, 그리고 머지 않아 진행될 다음 학기 수강 신청에 대해 이야기를 주고받았다. 그러다 갑자기, 나보고 다음 학기 웹 파트장을 할 생각이 없냐고 물어봤다. 음?주관적으로, 아니 객관적으로도 내가 웹 부원 중에서 파트장을 맡을만큼 실력이 좋았냐고 물어본다면, 아니라고 답할 수 있다. 훨씬 논리적이고 코딩 잘하는 친구들의 얼굴이 스쳐지나갔다. 왜 갑자기 나한테 이런 기..

아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.Access Token과 Refresh Token은 어디에 저장해야할까?브라우저에서 변수는 네 가지 공간에 저장이 가능하다.쿠키로컬스토리지세션스토리지메모리이 때 메모리에 값을 저장하려면 웹앱의 로컬변수를 사용해서 값을 저장해야→ 이 방식을 사용하면 자바스크립트 코드로 접근이 불가능→ 또 하나 기억해야 할 특징은 새로고침을 하면 내부 변수가 초기화됨 자바스크립트 코드로 접근이 가능한 쿠키, 로컬스토리지, 세션스토리지→ XSS 공격에 취약(다만 쿠키의 경우 HttpOnly 속성을 추가하면, 자바스크립트로 접근할 수 없는 쿠키 생성 가능) 출처: https://velog.io/@iamtaehoon/sagah Refresh Token → HttpOnly..

아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.API endpoint의 뜻은?→ 요청을 보내고자하는 URLAxios와 Fetch의 차이1. 에러 처리axios와 fetch는 둘 다 Promise를 이용해 비동기 요청을 처리 axios: 네트워크 오류가 발생하거나, HTTP 상태코드가 200~299가 아니면 Promise를 reject 시fetch: 네트워크 오류가 발생했을 때만 Promise를 reject-> axios처럼 상태 코드가 200~299 사이가 아닐 때도 에러 처리를 하고 싶다면, Response.ok를 활용해야  2. 헤더axios는 요청 헤더에 ‘Content-Type: application/json을 자동으로 추가(fetch는 직접 추가해야) 브라우저 환경에서 Content..