본문 바로가기

분류 전체보기

 (123)
시가총액 32조 팀 프로젝트 깃허브 주소 https://github.com/codestates-seb/seb41_main_032/tree/main 팀원 모집 팀 프로젝트를 진행하기 위해 코드스테이츠 부트캠프 동기들을 모집했다 프론트엔드3명 백엔드3명으로 총 6명으로 팀을 이루었다 목표 어떤 서비스를 만들지 논의를 한 결과 주식 초보들을 위한 서비스를 만들기로 했다 보통 주식을 처음하면 경험과 지식이 없어 대부분 손해를 본다 그래서 우리가 만들 서비스는 주식 모의투자기능이 들어간 주식거래소이다 다른 증권사 서비스도 주식 모의투자 기능이 있지만 제한적으로만 사용이 가능하고 무엇보다 통장을 개설해야지 사용이 가능하다 하지만 우리의 서버스는 간단한 회원가입만으로 모의투자 해볼 수 있는 서비스를 개발하려고 한다 시작 먼저 전체 팀장 1명과 ..
코드스테이츠 seb41_pre_017팀 팀프로젝트 깃허브 주소 https://github.com/codestates-seb/seb41_pre_017/tree/main GitHub - codestates-seb/seb41_pre_017 Contribute to codestates-seb/seb41_pre_017 development by creating an account on GitHub. github.com 시작 약 2주동안 프론트엔드 3명 백엔드 3명 총 6명이서 팀을 이루어 스택오버플로우를 클론코딩하는 팀 프로젝트를 진행을 했다 먼저 스택오버플로우를 클론코딩하기 위해 분석을 하는 과정을 진행하였다 우리 팀에서 프로젝트 경험이 있는 사람은 나 뿐이여서 내가 주도적으로 진행을 하였고 그 과정에서 팀장의 역할을 맡게 되었다 분석/설계 코드스테이츠 과정에..
JadenCase 문자열 만들기 JadenCase 문자열 만들기 (프로그래머스 레벨2) https://school.programmers.co.kr/learn/courses/30/lessons/12951 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 코드 fu..
최댓값과 최솟값 최댓값과 최솟값 (프로그래머스 Level 2) https://school.programmers.co.kr/learn/courses/30/lessons/12939 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 코드 function..
가장 가까운 같은 글자 문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다. b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 자신보다 두 칸 앞에 a가 있습니다. 이는 2로 표현합니다. n도 자신보다 두 칸 앞에 n이 있습니다. 이는 2로 표현합니다. a는 자신보다 두 칸, 네 칸 앞에 a가 있..
CORS 에러를 해결하는 방법 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔하다 CORS는 Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. CORS에러가 발생하는 원인은 CORS가 동일 출처 정책을 따르고 있기 때문이다 동일 출처 정책 규칙 http://www.example.com/dir/page2.html 성공 프로토콜, 호스트, 포트가 동일 http://www.example.com/dir2/other.html 성공 프로토콜, 호스트, 포트가 동일 http://username:password@www.example.com/dir2/other.html 성공 프로토콜, 호스트, 포트가 동일 http://www.example..
Lighthouse를 이용한 웹 페이지의 품질을 개선 Lighthouse(라이트하우스)란? Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구입니다. 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있습니다 Lighthouse 사용하기 크롬 개발자 도구를 이용하여 Lighthouse를 사용 할 수 있습니다 개발자 도구를 켜고 Lighthouse을 클릭 후 원하는 설정을 하고 Analyze page load를 하면 됩니다 그러면 아래 사진과 같이 성능측정을 할 수 있습니다 Lighthouse로 확인할 수 있는 지표 구글 공식문서 링크는 꼭 확인해보는게 좋습니다 각 항목들의 설명과 성능개선을 하려면 어떠한 방법을 해야되는지 개선방안의 예시도 설명해줍니다 https://developer.c..
코드스테이츠 Section3을 마치고서 회고 코드스테이츠 부트캠프 Section 3을 마쳤다. 유닛 1 ~8까지의 교육과정이었다 유닛 1에서는 재귀에 대해 배웠고 유닛 2에서는 UX/UI 대해 배웠고 유닛 3에서는 React의 Custom Component 배웠고 유닛 4에서는 React상태관리에 대해 배웠고 유닛 5에서는 웹 표준과 접근성에 대해 배웠고 유닛6에서는 네트워크에 대해 배웠고 유닛 7에서는 인증/보안에 대해 배웠고 유닛 8에서는 나만의 애플리케이션을 기획해봤다 Keep : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점 재귀는 대학을 다닐때 배운적이 있어서 쉽게 배웠고 복습하는 느낌이였다 UX/UI에서는 이전까지는 무계획적으로 개발을 했지만 이 섹션을 공부하고나서는 큰 틀을 만들고 계획적으로 설계하는 방법을 배웠고 이 후에는 배운..
웹 표준과 접근성 웹 표준은 W3C https://www.w3.org/ 에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙입니다 W3C는 운영체제나 브라우저의 종류에 상관없이 웹페이지가 정상적으로 작동할 수 있도록 웹 표준과 가이드라인 개발을 하고 있습니다 웹 표준의 장점 유지 보수의 용이성 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았습니다. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었습니다. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼습니다. 웹 호환성 확보 웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 사용이 불..
UI/UX 분석하기 Figma로 유튜브 클론하기에 이어서 https://www.figma.com/file/eImS76rU97fhNtky2sOG5A/S3U2-%EA%B3%BC%EC%A0%9C-Figma-%ED%81%B4%EB%A1%A0 유튜브의 UI/UX를 분석을 했습니다 기준 UI 분석 사용중인 UI 디자인 패턴 컬럼 그리드 시스템 사용 여부 UX 분석 피터 모빌의 UX 7요소 충족 여부 User flow 그려보기 사용성 평가 제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부 먼저 유튜브 UI를 분석했을떄 사용중인 UI 디자인 패턴 모달 (Modal) 탭 (Tab) 태그 (Tag) 자동완성 (Autocomplete) 드롭다운 (Dropdown) 아코디언 (Accordion) 캐러셀 (Carousel) 페이지네이션 (Pag..

티스토리툴바