Eden의 새로운 한걸음

💻 과제 이번 과제는 쿠팡의 상품페이지를 직접 구현해보는 미션이었다. 상품 정보 영역 다른 상품 영역 상품 상세 영역 SEO를 위한 메타태그 추가(MetaTag Component 추가) next api routes를 이용한 BFF를 활용하여 데이터 가공 💡 해결방법 BFF 제공된 데이터를 실제 페이지에 적용하기 힘든 부분이 존재 ex) html tag로 이루어진 데이터 등 → 4개의 제공된 엔드포인트에 맞추어 api route를 만들어 데이터를 가공 ProductService와 useRequest 1회 차에서 받았던 피드백을 적극 수용하여 구현 requestService에 axios의 추상화하여 각각 Service에서 상속함 useQuery를 useRequest로 분리하여 사용 공용 컴포넌트 추출 공통으..

넘블챌린지의 두번째 미션이 끝나가고 있다. 이번주에 회사에서 급하게 프로젝트를 진행하느라 참여를 못하다가 10일정도지난 월요일에 챌린지를 시작할 수 있었다. 4일이라는 짧은 기간동안만 참여하여 시간이 엄청 부족했지만 나름대로 구현은 할수있어서 다행이었다. 💻 과제 이번과제는 아래 컴포넌트들을 만드는 미션이었다. Button Component 일반적인 button element form의 submit a tag를 이용한 페이지 라우팅 (next/link 사용) Input Component react-hook-form의 register를 사용할 수 있어야 한다. focus시 border-bottom이 파란색으로, error시 빨간색으로 바뀐다. 좌측에 icon이 표시된다. invalid한 값 입력 시 적절한..

넘블챌린지의 1주차 미션이 끝나가고 있다. 이번주 미션은 로그인을 위해 필요한 Data Fetching 모듈을 만드는 미션이었다. 💻 과제 가이드에 따르면 이번 미션의 포인트는 아래 두가지 이다. 주어진 AuthService 와 UserService 의 공통부분을 추상화하여 부모 클래스로 추출하고 리팩터링 react-query에 의존성 역전 원칙을 적용하기 위해 useRequest라는 API request를 보내주는 모듈구현 🤔 고민한 부분 미션을 진행하면서 가장 크게 고민했던 부분은 어떻게 하면 최대한 OOP스럽게 코드를 작성할수 있을까 였다. 그러다 보니 Service단을 리팩터링 하는 작업을 가장 오래 진행했었다. Class가 익숙하지도 않아 어떤 기능이 공통적인 기능이고 어떤기능을 추출해서 부모클..

이번 포스팅에선 프론트엔드 개발자로 실무를 경험하면서 만났던 브라우저 캐시문제에 대해 이야기 해보려 한다. 현재 회사에서 교육플랫폼을 서비스하고있는데 중간에 교육생들의 출석을 관리할수 있는 기능이 필요하여 급하게 기능을 추가하였는데 반영이 안되는 문제가 발생하였다. 브라우저에서 코드가 바뀐것을 감지하지 못하고 캐싱된 파일을 불러와서 적용이 안되는 문제였다. 개발자 도구에서 강력한 새로고침을 하면 해당 문제는 해결이 되지만 모든 교육생에게 “강력한 새로고침 부탁드립니다.” 라고 할수도 없지않은가.. 그래서 근본적인 해결방법을 찾기로 했다. 코드로 해결할 수 있는 방법들 Html 에 아래와 같은 캐시컨트롤을 넣어준다. Cache-Control: no-cache, no-store, must-revalidate..

최근 회사에서 Props로 관리하던 코드를 react-query를 도입하면서 느꼈던 react-query의 장점과 간단한 사용법을 공유하기 위해 글을 작성하게 되었다. 왜 React-query를 도입하게 되었나? 서론에서 말했다시피 우리 회사에선 따로 상태 관리를 하지 않고 props를 이용하여 데이터를 관리하였다.(+약간의 contextAPI) 그러다 보니 여러 컴포넌트에서 prop drilling 이 발생하였고, 서비스가 커지면 커질수록 코드는 많아지고 유지보수는 더욱 힘들어졌다. 사실 contextAPI를 사용해도 되지만(이미 로그인 부분에서 사용하고 있다) contextAPI는 상위 컴포넌트의 데이터가 업데이트되면 하위 컨포넌트가 re-rendering 되어버려 렌더링 최적화에 좋지 않다. 다음으..

1. 챌린지 주제 이번 주제는 숏폼(15분미만)영상 서비스 플랫폼 제작이었다. 이전에 토이프로젝트로 sns를 만들어 보았지만 영상플랫폼을 만들어 보는건 처음이라 굉장히 설레였다 2. 챌린지 기간 3. 프로젝트 자신이 정한 목표 카테고리에 영상을 올리고 사람들과 공유함 7일 연속 영상을 업로드하면 뱃지(보상)를 받을 수 있고, 혼자 하는 것보다 사람들과 영상을 공유하면서 함께 의지를 다지기위한 목적을 가지고있다. 4. 기술스택 1. Next.js 2. Typescript 3. React-query 4. React-hook-form 5. Docker, Docker-compose 5. 주요로직 - Infinite Scroll 처음 무한 스크롤을 offset과 page를 사용하여 구현하였는데 스크롤을 할 때 영..

이번 포스팅에선 jdk 1.8 버전을 설치 해보고 환경변수설정까지 해보겠습니다. 우선 오라클 공식 홈페이지를 들어가서 JDK를 받아야 하는데 현재 jdk 17까지 나왔으나, 안정화가 되어있는 1.8 버전으로 다운 받아보겠습니다. 아래의 주소로 이동하겠습니다. https://www.oracle.com/ 오라클 홈페이지에 접속해서 위에 products 탭을 클릭하고 software 에 java를 클릭해 줍니다. 스크롤을 내려 Download Java now를 클릭 해줍니다. 스크롤을 내리다 보면 java 8 을 클릭하고 windows 선택후 jdk를 다운받습니다. JDK를 다운받기 위해선 오라클 계정 필요한데 회원가입 하시고 다운 받으시면 됩니다. JDK가 설치가 완료 되었으면 콘솔을 켜서 java -ver..

자바 프로그램을 개발하려면 다음과 같은 순서로 진행을 해야합니다. 우선 파일 확장자가 .java인 소스코드 파일을 작성하고 작성된 소스 파일은 컴파일러(javac.exe) 로 컴파일 해야합니다. 컴파일에 성공하면 확장명이 .class인 바이트코드 파일이 생성됩니다. 생성된 .class 파일은 완전한 기계어가 아니므로 JVM이 실행되어야 합니다. 예를 들어 Hello.java라는 소스파일을 생성하고 컴파일 할때는 콘솔에 아래와 같이 입력합니다 javac Hello.java 위 코드처럼 컴파일 하면 Hello.class 파일이 생성됩니다. java Hello 컴파일된 바이트 코드를 실행할때는 뒤에 확장자를 적지 않도록 주의해야합니다. java 명령어가 실행되면 JVM이 바이트 코드파일을 기계어로 번역하고 m..