본문 바로가기
728x90
반응형

분류 전체보기235

Winnerest 마이 페이지 구현 👆 마이 페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 오로지 학습용으로 클론을 열심히 구현했는데 그 중 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡은 기록을 적어보려한다 그 중 마이 페이지 편 구현한 기능 내 정보 데이터 받기, 관련 보드, 보드 안의 핀(사진) 보드 만들기 기능 마이페이지 구현은 생각보다 간단하다 서버에서 주는 유저 정보를 받아 그대로 보여지기만 하면 됐었는데 사실 기획 초기엔 다른 유저의 페이지로 보이게끔 계획했지만 프로젝트 시간상 어쩔 수 없이 내 마이페이지만 구현하게 되었다 🥲 페이지에 들어가면 바로 유저 정보와 보드 정보가 뜨게끔 정보를 같이 받아오는 .. 2022. 9. 10.
Winnerest 로그인 페이지 구현 (Kakao API 활용) 👆 로그인-회원가입 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 오로지 학습용으로 클론을 열심히 구현했는데 그 중 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡은 기록을 적어보려한다 그 중 로그인 창 편 구현한 기능 카카오 API를 통한 로그인 기능 구현 회원 닉네임, 프로필 사진, 카카오계정(이메일) 를 받아 각각 필요한 유저 정보 페이지에 적용 카카오 로그인 API를 사용하기 위해서는 https://developers.kakao.com/ 에 들어가 먼저 내 앱 애플리케이션을 만들어야한다. 이때 발급 받은 REST API 나 javaScript 키를 이용해 구현한다. 카카오 API 구.. 2022. 9. 9.
Winnerest Project 회고록 Winnerest Project 란? https://www.youtube.com/watch?v=ylfITz5h1ps 👆 시연영상 링크 개발기간 2022년 8월 29일 ~ 2022년 9월 8일 (10일) Winnerest 프론트엔드 개발자 : 김다현, 조은지, 권영준 백엔드 개발자 : 백민석, 길성민 기술 스택 프론트 엔드 : React / React Router / styled-components 백엔드 : node.js / MYSQL / express / NODEMON / JSONWEBTOKENS / Postman 커뮤니케이션 : Slack, Trello, google SpreadSheet Editor (API 명세서) 프로젝트 설명 Wecode 36기 2차 프로젝트 Winnerest 사진에 기반한 소.. 2022. 9. 9.
Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer) 👆 메인페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다. 메인 페이지 구현한 기능 Intersection Observer 를 사용한 무한 스크롤 무한 스크롤을 구현하는 데 가장 일반적이고 널리 알려져 있는 건 window.addEventListener 를 이용한 스크롤 이벤트 구현 방식이다 하지만 이번 프로젝트는 라이브러리가 사용 가능하다는 이야기를 듣고 Intersection Observer와 axios 를 사용해 구현해보았다 페이지 설정이 로그인 창이 먼저 뜨고, 토큰이 있어야 메인 페이지를 들어갈 수 있어 거의 .. 2022. 9. 3.
Software Testing Software Testing Software Testing 이란? : 수많은 엄밀한 검증 작업을 거치는 것 나의 코드(input 과 output을 생각하면서 만듦) -> 기대하는 결과 -> Test -> success, faliure 제대로 된 소프트웨어를 개발했는가? 소프트웨어를 제대로 개발했는가? 왜 테스트 해야하는가? 결함을 확인하기 위해서 에러의 사전 방지를 위해서 시간 절약을 위해서(우리 회사가 들이는 인적 자원들을 최대한 아껴야 함, 서비스적인 시선) 코드 구조 개선 (리펙토링에 능해짐) 품질 개선 나의 코드를 통해서 훌륭한 품질의 프로그램을 내놓거나 개선되는 것 코드의 확장성을 가지게 됨 소프트웨어의 개발은 70년대에 이어져 있어서 다른 공학보단 짧은 편 짧은데 비해 개발의 방법론적인 처음.. 2022. 8. 31.
채용되는 개발자 위코드 1차 프로젝트를 마치고 1시간 가량의 짧은 강연이 있었다 이를 짧게나마 정리하고 회고하고자하는 블로깅 :) 채용되는 개발자는? 회사는 원하는 환경 조건이 있다 바로 우리와 맞는 사람이 있는지! 개발자라면 JD 채용 공고는 매일 봐야한다 특히나 내가 들어가고 싶어하는 회사는 매일 봐야한다 개발자의 업무는 내가 관리하고, 만들고, 함께 성장할 수 있는 회사에 들어가 업무를 할 때 그때부터 시작한다 이때 중요한 것은 보다 치열하게 일하는 개발자가 되어야한다는 것이다 관련해서 역량(skill)이라는 키워드를 빼놓을 수 없는데 회사마다 다르지만 결국 회사는 회사의 성장을 만들어내는 인재가 필요하다 치열하게 일하는 것이란 내가 내 업무에 한계를 굳이 생각지 않고 내가 할 수 있는 모든 것을 한 후 그 경험을.. 2022. 8. 28.
Redux - Redux Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 단방향 데이터 흐름을 이용해 예측 가능하고 일관적인 상테 컨테이너 역할을 제공하는 라이브러리 Flux 패턴에 영감을 받아서 Dan Abramov가 개발 Flux는 하나의 패턴, 이 Flux 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 redux React 또는 다른 View 라이브러리들과 함께 사용할 수 있음 Redux 3가지 원칙 1. 진실은 하나의 소스로 부터 -> 애플리케이션의 모든 상태(state)는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됨 -> 여러 개의 저장소(Store)를 관리하는 것이 아니라 단, 하나의 자바스크립트 객체로만 데이터를 저장 2. 상태(State)는 읽기 전용이다 -> 상태는 .. 2022. 8. 28.
Redux - Design Patten Design Patten : 검증된 해결책 패턴 === 되풀이 되는 사건이나 물체의 형태 디자인 패턴 === 설계 간 자주 발생하는 문제에 대한 모범 답안 프로그램을 개발하면서 생기는 문제점들에 대해서 해결할 수 있는 방법을 도출하고 그를 패턴화 해둔 것 바퀴를 재발명 하지마라 ( 재발견하지 말고 이미 만들어져있는 게 있다면 그것을 써라) 이미 여러사람들에 의해서 검증된 해결 방안, 이를 적용하면 코드를 효과적으로 개선할 수 있음 디자인 패턴을 활용하면 상대적으로 저수준의 문제들은 패턴을 이용해서 해결하면서 고수준의 문제에 집중할 수 있음 효율적인 소통 방식 개발을 하면서 원활한 소통을 위해서는 체계적인 규칙과 용어가 필요 디자인 패턴을 사용하면 매번 모든 디테일한 사항들을 장황하게 설명할 필요 없이 약.. 2022. 8. 28.
관심사의 분리 / Custom Hook 개발을 하면서 마주하는 고민들 코드를 작성했는데 기획, 디자인이 변경되고 요청 사항들이 추가된다. 코드를 수정해야하는데 기존의 코드가 복잡해서 이해하고 수정하기 어렵다 지금까지 만들었던 모든 코드를 다시 엎어야 하나? 이의 해결책은 바로 관심사의 분리이다 관심사의 분리 관심사의 분리란? 각각 관심사에 따라 코드를 분리하는 기법 일상 생활에도 여러가지 고민과 걱정들을 한번에 처리하려면 어렵다 한번에 한 가지 걱정만 하면 쉽게 해결할 수 있음 이처럼 개발에서도 코드가 하나의 걱정만 하도록 단위를 나눠서, 단위별로 하나의 걱정만하게 하는 것 특정한 변화에 대해서 대응하기 위해서 읽고 이해하고 수정해야하는 코드의 단위가 줄어들게 됨 => 유지 보수에 용이 우리의 일상 생활에서도 분업이라는 의미로도 생각됨 관심사.. 2022. 8. 28.
728x90
반응형

티스토리툴바