profile
프론트엔드 개발자 도전기
태그 목록
전체보기 (124)알고리즘(24)Daily Coding(22)데일리코딩(22)알고리즘공부(21)React(21)JavaScript(20)리액트(19)main-project(12)동네북(12)pre-project(8)자바스크립트(8)네트워크(7)http(7)component(5)CSS(5)git(5)UI(4)html(4)ux(4)서버(4)github(4)clone(3)API(3)콜백함수(3)class(3)CRUD(2)프론트엔드(2)Props(2)Prototype(2)계산기만들기(2)계산기목업(2)REST API(2)const(2)let(2)instance(2)자료형(2)컴포넌트(2)url(2)비동기(2)PORT(2)spa(2)투두리스트(2)local(2)상속(2)Web Server(2)재귀함수(2)object(2)변수(2)피그마(2)create react app(2)server(1)DNS(1)stack(1)queue(1)배포(1)kream(1)최적화기법(1)REST(1)Proxy(1)세션(1)쿠키(1)사용성 평가(1)프로미스(1)토글(1)nodejs(1)HTTP API(1)연산자(1)캡슐화(1)expect(1)HTTP Messages(1)router(1)프로토타입(1)다형성(1)await(1)req.params(1)ajax(1)MDN(1)Fetch API(1)Spread(1)요청(1)async(1)node.js(1)res.json()(1)태그(1)사용자요구사항정의서(1)제이콥 닐슨의 10가지 사용성 평가 기준(1)인코딩(1)클론(1)고차함수(1)graphql(1)res.send(1)Prettier(1)ip(1)typeof(1)생성자함수(1)Twittler SPA(1)데드락(1)lighthouse(1)prototype chain(1)조건문(1)React SPA(1)Primitive Data Type(1)Reference Data Type(1)REST 성숙도 모델(1)req.query(1)github action(1)readme(1)클라이언트배포(1)filter(1)프로토콜(1)opp(1)CPU스케줄러(1)개발자도구(1)new(1)원시자료형(1)cd(1)State(1)useRef(1)함수(1)코드스테이츠(1)HTTP Requests(1)가비지컬렉션(1)참조자료형(1)Domain Name(1)styled components(1)코플릿(1)repository(1)fork(1)CSR(1)SSR(1)splice(1)모달(1)type(1)HTTP Responses(1)자바스크립트문법(1)번들링(1)css selector(1)재귀(1)스택(1)메타인지(1)array(1)extends(1)super(1)프로젝트(1)todoList(1)res.end()(1)JSX(1)toggle(1)유사태그(1)express(1)Hook 함수(1)일급객체(1)Map(1)오류메세지(1)CORS 에러(1)그림판(1)응답(1)토이프로젝트(1)(1)웹표준성(1)피터 모빌의 벌집 모형(1)ES6(1)캘린더(1)네트워크요청(1)부트캠프(1)운영체제(1)자바스트립트(1)CSS 적용 우선순위(1)modal(1)react router(1)vscode(1)웹접근성(1)cdd(1)scope(1)스레드(1)클라이언트(1)최적화(1)로컬프로젝트(1)tag(1)routing(1)ci(1)가상메모리(1)프로세스(1)JSON Server(1)알고리즘문제(1)선형구조(1)firstReverse(1)할당(1)선언(1)웹팩(1)proto(1)promise(1)추상화(1)figma(1)tab(1)(1)서버 아키텍처(1)자료구조(1)URI(1)push(1)메모리구조(1)객체지향프로그래밍(1)Restful(1)
post-thumbnail

[Main-Project] Day 13(주말) - Kakao map API 책 상태값, 검색창 로직 추가, 지도 확대 축소 기능 레벨 지정, 커스텀 오버레이 수정

책 검색 - 책 상태 리스트 구현(책 이름, 대여상태, 상인) 커스텀 오버레이 - 상인 수에 따른 오버레이 크기 변경(한자리수, 두자리수, 세자리수 기준)검색창 - 빈칸 상태로 검색 시, 현재 위치 주변 상인 정보 불러오기 로직 추가지도 레벨 - 1~5까지 확대/축소

5일 전
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 12(주말) - Kakao map API 통신 호출 구현 및 테스트

검색 페이지 - 섹터당 상인 위치 API 통신 테스트 진행지도 섹터당 책의 총 개수, 책 목록 API 호출 구현지도에서 상인 섹터 클릭시 상인 리스트 API 호출 구현→ 백엔드 측에서 API 명세서가 어느정도 완성되어 제대로 통신이 되는지 확인해보는 시간을 가졌다. 위

5일 전
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 11 - Kakao map API 검색창 로직 구현, 현재 위치 버튼 기능 구현, 아래에서 위로 올라오는 css animation, lottie animation

로딩 애니메이션 구현검색창 입력 구현 - 책 검색시 해당 되는 책이 없다면 기존 상인마커 및 커스텀 레이아웃 삭제하기리스트 구현 - data가 있을 시 하단에 리스트가 생성되게 구현(아래에서 위로 올라오는 css animation)현재 위치 버튼 기능 구현 - 현재 위

5일 전
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 9~10 - Kakao map API 현재 위치 표시, Geolocation API, 지도 확대 축소 불가 기능, 마커, 커스텀 오버레이

유저의 현재 위치 마커로 표시하기지도 확대,축소 불가 기능 구현하기드래깅 이벤트 적용하기지도 검색창 및 현재 위치 버튼 스타일 구현주변 상인 여러개의 마커 보여주기커스텀 오버레이 구현 및 클릭 이벤트 적용하기→ 가장 먼저, 카카오맵에서 유저의 현재 위치를 가져오고 표시

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 8 - Kakao map API 띄우기, 카카오 디벨로퍼스 앱 연동하기, 지도 라이브러리, 에러 해결

마이페이지 수정 페이지 모달창 구현하기hero section 라우터 설정해두기카카오맵 키 발급하고 연동시키기지도 검색 페이지에 카카오맵 띄우기지도 라이브러리 사용하기→ Day 8부터 '지도 검색' 구현에 들어가는데, 카카오맵 사용에 앞서서 먼저 카카오 디벨로퍼스에 앱

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 7 - 마일스톤, github issue,칸반보드, CSS 작업(onClick, navigate, tab)

마일스톤 정하기뷰 및 기능 구현 역할 재분담github issue칸반 보드 정리하기 CSS 작업styled component 로 react icon css 적용하기→ 이제 본격적으로 작업에 들어가기 전에 milestone을 정하기로 하였다. 보완과 배포, 에러 해결을

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

Vscode Prettier 적용 안 될 때 해결하는 방법

→ 이제 본격적으로 css 구현에 들어가기 위해 코드를 작성해보니 Prettier 적용이 제대로 되지 않는 것을 확인할 수 있었다..

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 6(주말) - 코딩 컨벤션, Router, 반응형 웹앱, TypeScript

코딩 컨벤션 - 프론트엔드 코딩 규칙 정하기Router 정리공통 아이콘 정리(react icons)반응형 피그마Router 정리하기TypeScript 개인 공부→ 본격적으로 기능 구현을 하기 전에 깔끔하고 팀원 모두가 이해하기 쉬운 코드 작성을 위해 프론트엔드의 코딩

2022년 11월 13일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 5(주말) - hero section, map api 재조정, 사용자 요구사항 정의서 구체화

hero section 추가하기 + 피그마 작업백엔드와 map api 재조정사용자 요구사항 정의서 구체화 → 유저의 입장에서 생각하다보니 hero section을 추가하면 좋겠다는 생각이 들었고, 팀원분들도 모두 긍정적으로 생각하셔서 바로 피그마 작업에 들어가게 되었다

2022년 11월 13일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 4 - 구현 기능 리스트화, P&R, 개발 환경 세팅, 멘토링, sprint

구현 기능 리스트화하기P&R 멘토링사용자 요구사항 정의서 구체화 \- 메인페이지 💅 레이아웃 및 스타일 페이지 로드: get 요청 책 선택하기: 도서 상세 조회 페이지로 이동 책 등록하기: 로그인 정보 확인 후 글작성페이지 or 로그인 페이지로

2022년 11월 13일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 3 - Figma, 개발 환경 정하기 , component 정하기, 소통

📗 Pre-Project, Day 3 > * Figma userflow와 백엔드 데이터 빌딩 고려하여 수정하기 Figma 구체화하여 작업(modal, page, input, button) 메인 로고 컬러, font 결정 component 결정하고 css 결정 개발

2022년 11월 10일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 2 - 사용자 요구사항 정의서, git branch 컨벤션, 피그마 작업

2일차는 아래와 같은 사항들이 진행되었다. 사용자 요구사항 정의서(구체적으로 작성 및 확정)git branch 컨벤션(pr 병합 방식, branch 관리 정하기)피그마 작업(화면 구성, user flow 정리 및 확인)필요한 api 프론트엔드 측에서 작성map 검색(전

2022년 11월 9일
·
0개의 댓글
·
post-thumbnail

[Main-Project] Day 1 - 팀 편성 및 팀 빌딩, 프로젝트 아이디어 회의, 웹앱 로고

전일 프리 프로젝트가 끝나자마자 바로 메인 프로젝트가 시작되었다. 당일에 프론트엔드, 백엔드 전체 인원이 산업군 별로 나눠져 있는 ZEP에 모였고, 우리가 약 1시간이라는 시간동안 직접 팀원을 모아서 팀을 짜야했다. 감사하게도 어느정도 프로젝트 아이디어를 생각하셨던 분

2022년 11월 9일
·
0개의 댓글
·
post-thumbnail

[Pre-Project] Day 11(D-DAY) - build, next.js S3로 배포하기, github read.me, 프로젝트 리뷰

프리 프로젝트의 마지막 날이다. 주말 동안 백엔드 쪽에서 cors error를 잡으려고 했지만 모두 잡지 못했지만 일단 배포를 해보기로 하였고, next.js 배포에서도 어려움을 겪었는데 메인 프로젝트 전에 이런 경험들을 모두 한 것이 다행인 것 같다.기능 구현 및 코

2022년 11월 9일
·
0개의 댓글
·
post-thumbnail

[Pre-Project] Day 10 - 로그인 토큰, 로그인/로그아웃 조건부 렌더링, next.config.js

→ 팀원들 모두 각자 맡은 페이지 기능 구현 마무리에 들어갔고, 본인도 맡은 로그인 부분에 있어서 API가 완성되어 로그인 토큰이 있을 경우와 없을 경우 각각 헤더를 다르게 보여주는 조건부 렌더링 구현을 하였다. 이외에도 아래와 같은 내용들을 진행하였다. 댓글 부분 f

2022년 11월 9일
·
0개의 댓글
·
post-thumbnail

[Pre-Project] Day 9 - API, fetch, get,post, map 함수, 프로필 이미지 랜덤으로 넣기

📍 Pre-Project, Day 9 ✍🏻 USers 페이지 구현하기 → 금일은 먼저 Users 페이지를 구현하기로 했다. 위와 같이 구현하기 위해서는, 아래와 같이 진행해야 했다. 우리 실제로 > * Users API 정보를 fetch로 불러와야 하고, 백엔

2022년 11월 5일
·
0개의 댓글
·
post-thumbnail

특정 port 죽이는 법 : Address localhost:3000 is already in use.

→ server를 구동하다보면 특정 port가 죽지 않고 살아 Address localhost:3000 is already in use. 나오거나 3000이 아닌 3001로 port가 열리는 것을 확인 할 수 있었다. 구글링을 해보니, 이 때는 명령어를 통해 해당 포트

2022년 11월 4일
·
0개의 댓글
·
post-thumbnail

[Github] Github README에 표 작성 및 기술 스택 뱃지 달기

이제 프리 프로젝트가 끝을 달려가고 있어, 우리팀의 Github README를 작성했다.기본적으로 팀원들의 Github 주소로 연결되는 표와 프론트엔드, 백엔드 각각 사용한 기술 stack 뱃지 추가하는 것을 구글링하여 했는데, 앞으로도 사용할 일이 많을 것 같아 블로

2022년 11월 4일
·
0개의 댓글
·
post-thumbnail

[Pre-Project] Day 8 - OAuth2 로그인 버튼에 CSS 적용하기, 스크롤 CSS animation

금일은 아직 백엔드분들의 API 작업이 끝나지 않아서, 우리 프론트측에서 더이상 기능 구현을 할 수 있는 것이 없어졌다. 이제 프로젝트 마감일까지 4일 정도 남았는데 내일까지 백엔드분들께서 API 작업을 마쳐주시면 우리가 그제서야 바빠질 것 같다. 그래서 금일은 전에

2022년 11월 2일
·
0개의 댓글
·
post-thumbnail

[Pre-Project] Day 6,7- OAuth2 구글, 깃헙 소셜 로그인 구현

📍 Pre-Project, Day 6,7 oauth2를 사용하여 프론트엔드 측에서 구글과 깃헙 소셜 로그인 구현 부분을 맡아서 진행하게 되었다. 공식 문서를 따라서 그대로 하면 될 줄 알았으나, 자바스크립트나 리액트에서 구현하는 것으로 설명이 되어있었고 우리는 Ne

2022년 11월 1일
·
0개의 댓글
·