Dani's Dev TokTok

1. 들어가며Java 의 List 중 ArrayList 와 LinkedList 비교해보기2. List자바에서 컬렉션 프레임워크가 제공하는 인터페이스 중 List 라는 것이 있다.List는 순서가 없는 데이터의 집합을 다룰 때 사용하며, 데이터 중복을 허용한다. (Set은 중복 허용 X) 이번 포스팅에서는 List 에서도 ArrayList 와 LinkedList 를 비교해보고자 한다. 배열과 연결리스트 비교ArrayList 와 LinkedList 를 비교하기 전에 먼저,ArrayList 와 LinkedList 의 기반이 되는 자료구조인 배열과 연결리스트(링크드리스트)에 대해 먼저 알아보고자 한다. 배열배열은 데이터를 한 열로 연속해서 정렬하는 데이터 구조다.배열의 데이터는 메모리의 연속된 영역에 순차적으로..

1. 들어가며추상화에 대해 알아보고, Java의 추상 클래스와 인터페이스에 대해 알아보기2. 추상화바로 직전 포스팅에서 객체지향 프로그래밍의 특징에 대해서 다뤘다.(https://daddda3232.tistory.com/97)여기서 언급하지 않은 아주 중요한 단어가 있는데 그것이 바로 추상화다. 추상화객체지향의 사실과 오해라는 도서에서는 추상화를 이렇게 정의한다.추상화란 어떤 양상, 세부 사항, 구조를 좀 더 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법이다. 이렇게만 보면 추상화가 무슨 말인지 감이 잡히질 않는다.쉽게 말해 추상화란 실체 간의 공통되는 특성을 찾는 것이다.  책에서 말하길 추상화는 두 차원에서 이뤄진다고 한다.(kramer, 2007)..

1. 들어가며객체지향 프로그래밍에 대해 알아보기2. 객체지향 프로그래밍객체지향 프로그래밍과 절차지향 프로그래밍절차지향 프로그래밍(Procedural Programming)프로그램을 일련의 절차나 함수의 집합으로 보고, 이를 순차적으로 실행하여 문제를 해결하는 방식프로그램 흐름을 중시하며, 간단한 작업에 적합하다.대표적인 언어로는 C언어 등이 있다.장점은 실행 속도가 빠르다는 것이다.단점은 프로그램이 커지면 유지보수가 어렵고, 순서가 중요하기 때문에 순서가 바뀌면 결과 도출이 어렵다는 것이다. 이런 점 때문에 대형 프로젝트에는 적합하지 않다.   객체지향 프로그래밍(Object-Oriented Programming)프로그램을 객체들의 집합으로 모델링하여, 객체 간의 상호작용을 통해 로직을 구성하는 프로그래..

1. 들어가며Java에서 String(문자열) 타입의 값을 비교하는 법 알아보기2. Java의 String 타입자바의 데이터 타입은 크게 두 가지로 나눌 수 있다.기본 타입(Primitive)레퍼런스 타입(참조형, Reference)그 중 String 타입은 레퍼런스 타입이다. 데이터들은 메모리 어디에 저장될까Java에서 Primitive type은 메모리의 stack 영역에 저장된다.Reference type은 객체에 대한 주소값이 stack에 저장되고 이 stack의 주소값을 이용해서 heap 에 있는 객체에 접근한다.public class Person { public static void main(String[] args) { String name = "김굉필"; in..

결제 페이지와 마이페이지에 배송지 관리 기능을 추가했다.회원가입때 입력했던 주소 정보를 기본 배송지로 불러오고,사용자가 배송지를 추가하고, 배송지 정보를 수정하고, 필요없는 배송지 정보는 삭제할 수 있도록 구현했다.  1. 배송지 읽어오기 배송지 데이터는 사용자의 정보를 바탕으로 DB의 회원 테이블과 연결된 추가 배송지 테이블과 연결해서 해당되는 사용자의 배송지 정보를 서버에서 모두 전달해준다. 서버로부터 받은 데이터를 화면에 렌더링 해줬다.이 과정에서 리덕스를 사용해서 배송지 정보에 대한 상태관리를 전반적으로 수행하고자 했다..결제 페이지에서는 배송지를 출력하는 곳에 배송지 변경 버튼을 누르면, changeAddress 라는 함수가 호출된다.이 함수는 axios요청으로 서버에서 배송지 정보를 비동기적으..

관리자 페이지까지 구현하고 팀 전체 진행도를 살펴보면서, 권한 관리의 필요성을 느꼈다.권한이 없는 사용자가 경로를 직접 입력하여 관리자 페이지나 판매글 작성 페이지에 접근하는 것을 막아야 하기 때문이었다. 이런 접근제어를 통해 프로젝트의 신뢰성을 높이고자 했다.  useAuth라는 커스텀 훅을 만들어서 로그인하지 않은 사용자, 일반 유저, 판매자로 등록된 유저, 블랙리스트로 등록된 유저, 관리자 별로 접근을 제한하도록 구현했다.import React, { createContext, useState, useEffect, useContext } from 'react';import { useDispatch, useSelector } from 'react-redux';import { loginFn } from ..

이번 프로젝트는 중고 거래 플랫폼인 만큼 그를 관리해주는 관리자의 역할이 필요했다.관리자로서 일반 회원과 판매자로 등록된 회원을 관리할 수 있도록, 그리고 그들 사이의 거래된 내역들을 볼 수 있도록 기획하고 설계했다. 데이터를 보여주는 방식은 테이블 방식을 택했다.테이블은 행과 열로 데이터를 체계적으로 배열할 수 있어서 보여주고자 하는 데이터를 명확하게 시각적으로 보여줄 수 있고, 각 항목이 잘 정리되어 있어 한눈에 정보를 파악하기 용이하기 때문이다.1. 주요 기능1. 전체 회원 목록 조회관리자는 가입된 모든 회원의 목록을 조회할 수 있다.   회원 아이디 및 닉네임으로 검색도 가능하다. 데이터는 axios 를 통해 서버로부터 비동기적으로 받아오고 그 데이터를 렌더링 하는 식으로 구성했다. 검색 기능은 ..

원래 처음 계획에서는 내가 맡은 부분은 아니었지만 페이지 별로 담당을 나누다보니 내가 맡은 부분이 적은 거 같기도 하고... 장바구니와 결제 부분을 어느 정도 마무리하고 나서 팀 전체의 진행도를 보았을때, 상품의 목록을 보여주는 부분을 먼저 끝내야겠다는 생각이 들었다. 사실상 아이템 목록을 보여주는 페이지는 READ밖에 없기 때문에 쉽게 끝낼 수 있다는 생각도 들었다.우선 상품 목록 페이지와 검색 결과 페이지는 사용자 친화성을 고려하여 비슷한 스타일로 페이지를 구현했다. 너무 다르면 또 유저 입장에서 적응이 안되고 친화적이지 않다고 느꼈기 때문이다.그리고 상품 목록 페이지와 검색 결과 페이지의 아이템을 뿌려주는 부분이 같아서 ItemList 라는 컴포넌트를 만들어서 사용해서 중복 코드를 줄이고 재사용성을..

장바구니의 레이아웃은 오늘의 집과 네이버 쇼핑을 벤치마킹 했다.그 둘을 벤치마킹한 이유는 '판매자'별로 묶여서 아이템을 보여주었기 때문이다. 판매자별로 묶어서 아이템의 합계와 배송비의 합계를 보여주는 것을 벤치마킹했다.장바구니와 결제에 대한 플로우는 위의 플로우차트처럼 진행했다. 저렇게 진행하려다 보니 어쩌다 컴포넌트를 많이 나누게 되었다.1. 장바구니에 상품이 하나라도 있을 때 렌더링 되는 컴포넌트2. 장바구니에 상품이 아무것도 없을 때 렌더링 되는 컴포넌트3. 장바구니에 담긴 상품을 판매자별로 보여주는 컴포넌트4. 장바구니에 담긴 상품들의 가격 정보를 보여주는 컴포넌트 위와 같이 컴포넌트를 나누다 보니, 저 정보들을 전역적으로 관리해주는 리덕스가 필요할 것 같았고, 그래서 여기서 리덕스를 사용해서 상..

0. 2차 팀프로젝트가 끝난 후 쓰는 회고록기간 : 2024.08.21 ~ 2024.09.13개발인원 : FE 3명 BE 3명담당 역할 : 프론트엔드주제 : 팬 굿즈에 특화된 중고 거래 서비스 플랫폼깃허브 :- Read me : https://github.com/SeSAC-2nd/.github- frontend code : https://github.com/SeSAC-2nd/SeSAC-2nd-Front  1. 프로젝트 주제이번 프로젝트는 클라이언트는 React, 서버는 Node.js를 이용해서 만들었다.주제는 오타쿠(..)를 대상으로 한 중고 거래 서비스 플랫폼이다.순화해서 말하자면 팬 굿즈 거래에 특화된 중고 거래 서비스다.  기존의 중고 거래 플랫폼들의 장점을 차용하되,  좀 더 대상을 명확히 하는 ..