DevYoon

프로젝트를 진행하면서 메인페이지의 로딩이 너무 느리다는 단점을 발견했다. Next/image 태그를 사용해 이미지 최적화를 하고 있다고 생각했는데, 추가적인 작업이 필요하다고 생각했다. 따라서 다음과 같은 2가지를 처리해보았다. 1️⃣ 이미지 리사이징 - 우리 페이지에는 2개의 실사 이미지가 들어가는데, (나머지는 아이콘) 두 이미지가 유독 더 느리게 렌더링 되었다. - 사이즈를 확인해보았는데, 역시나! 각각 가로가 5000px, 3500px 이상이었다. - 사이트 환경 내에서 깨지지 않는 선 (2000~ 3000px 사이)에서 이미지 크기를 줄여주었다. 그러나 그럼에도 여전히 렌더링 속도는 내가 느끼기에 느렸다🥲 스크롤 이벤트도 걸어놓은 터라, 사이트 메인에 접속해서 스크롤을 내릴 때 이미지가 바로바로..

link 🔗 https://school.programmers.co.kr/learn/courses/30/lessons/64061?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🧸 인형을 크레인에서 뽑아주고, 바구니의 마지막 원소와 검사하여 삭제해주는 순으로 로직을 실행하였다. 🧸 인형을 뽑는 경우, 열의 0번째 인덱스부터 검사하여 0이 아닌 수가 나오면 맨 위의 인형이므로 그 값을 return 해준다 🧸 그 후 바구니 검사 함수로 값을 넣어주어 마지막 원소와 비교, 같으면 마지막 원소를 삭제, 같지 않으면 뽑은 인형을 바..

link 🔗 https://www.acmicpc.net/problem/16928 16928번: 뱀과 사다리 게임 첫째 줄에 게임판에 있는 사다리의 수 N(1 ≤ N ≤ 15)과 뱀의 수 M(1 ≤ M ≤ 15)이 주어진다. 둘째 줄부터 N개의 줄에는 사다리의 정보를 의미하는 x, y (x < y)가 주어진다. x번 칸에 도착하면, y번 칸으 www.acmicpc.net 🐍 사다리나 뱀을 만나면 위치의 변화가 일어남 🐍 1에서 출발하여 100에 도착하기까지 주사위를 최소로 굴릴 때를 찾는 문제 🐍 간단한 BFS 문제로, 이동한 칸이 사다리나 뱀이 존재하는지 편하게 탐색하기 위해 딕셔너리로 사다리와 뱀의 정보를 저장했다. import sys from collections import deque def BFS..

link 🔗 https://school.programmers.co.kr/learn/courses/30/lessons/118666 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 성격 타입을 객체로 생성하고, 설문 결과에 따른 점수를 해당 프로퍼티의 값으로 더해주었다. ✏️ Object.entries()를 통해 객체의 key, value를 배열로 전환하고, 2개씩 나누어 비교해주었다. function solution(survey, choices) { var answer = ''; personal = { 'R':0, 'T':0, 'C':0, 'F':0, ..

link 🔗 https://www.acmicpc.net/problem/1043 1043번: 거짓말 지민이는 파티에 가서 이야기 하는 것을 좋아한다. 파티에 갈 때마다, 지민이는 지민이가 가장 좋아하는 이야기를 한다. 지민이는 그 이야기를 말할 때, 있는 그대로 진실로 말하거나 엄청나게 www.acmicpc.net ❗ 주목한 점 ✏️ 진실을 알게 된 사람과 같은 파티에 가면 진실을 알게 된다 ✏️ 1이 진실을 알고 있는 사람이고, 1과 4가 같은 파티에 간 경우, 4가 참여한 모든 파티가 거짓말을 할 수 없는 파티가 된다. 1️⃣ 3% 대에서 오답난 코드 import sys input = sys.stdin.readline def knowTruth(y): for idx in range(1, len(party..

💾 Recoil 1️⃣ Recoil이란? React의 hooks와 어울리면서, React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리 기존의 Redux나 Mobx와 같은 상태 관리 라이브러리들은 React 라이브러리가 아님 store는 외부요인으로 취급되므로, React의 내부 스케줄러에 접근할 수 없음 동시성 모드의 등장으로 위 사실이 중요해짐 동시성 모드 ❓ 프로그램을 독립적으로 실행할 수 있는 조각으로 나누어 구조화 ➡️ 단일 스레드 사용의 한계를 깨고 애플리케이션을 보다 효율적으로 만듦 참고 🔗 https://medium.com/swlh/what-is-react-concurrent-mode-46989b5f15da 기본적인 store 구성을 위해 많은 보일러 플레이트와 장황한 코드를 ..

♾ 무한 스크롤(Infinite Scroll) 사용자가 페이지 하단에 도달했을 때 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식 👍 장점 다음 콘텐츠를 보기 위한 추가 클릭이 필요하지 않고 페이지 로드 시간이 짧음 ➡ 클릭하는 것보다 더 나은 사용자 경험을 제공 터치 스크린(모바일)일 때 더 유용하게 적용 화면이 작을 수록 스크린이 길어짐 ➡ 모바일 환경에서 콘텐츠를 보여주기 직관적이고 사용하기 쉬움 사용자 참여 및 콘텐츠 탐색이 쉬움 👎 단점 페이지 성능이 느려짐 특정 항목 검색 및 원래 위치로 되돌아오기 힘듦 스크롤 막대가 실제 데이터양을 반영하지 못함 Footer를 찾기 어려움 ✏ 참고 https://velog.io/@eunoia/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC..

보호되어 있는 글입니다.

🎨 Sass Syntactically Awesome Style Sheets CSS 파일로 변환되는 스타일 시트 언어 😑 CSS는... 프로젝트 규모가 커질수록 중첩된 스타일 구조와 빈번한 수정 때문에 유지보수가 어려워짐 ➡️ Sass는 변수, 중첩 규칙, Mixin, 함수 등 사용하여 CSS를 구조화하여 표현하거나 스타일 요소를 재사용할 수 있음 ❔ SCSS Sass 3.0 이상부터 사용 가능한 표기법으로, CSS 구문과 호환됨 기존 문법 .nav-list display:flex list-style:none li margin-right: 10pxSCSS 문법 .nav-list{ display:flex; list-style:none; li{ margin-right:10px; } }➡️ 블록({})과 세미콜..

왜 타입스크립트인가? 1️⃣ Javascript Superset 2️⃣ Javascript + Type 문법 3️⃣ 동적 언어로서 Javascript의 단점 보완 기본 문법 1️⃣ 변수 타입 지정 let name :string = 'kim'; name = 3; //error 2️⃣ Array 타입 지정 let name :string[] = ['kim', 'park']; 3️⃣ Object 타입 지정 let name :{ name : string } = { name : 'kim' } // ? => 옵션 속성 표시 let name :{ name? : string } = { name : 'kim' } 4️⃣ Union 타입 지정 // string or number let name :string | number..