윤프로 | 코드가 개발새발해

지난 상단 헤더 꾸미기 게시글이 꾸준히 유입률 1위를 담당하고 있어서 작성해보는 2탄 ( •̀ ω •́ )y이번 꾸미기는 아래가 둥근 상단박스 헤더(스크롤에 따라 색 변화) + 진행바 를 만들어보겠습니다.헤더를 변경한지 오래되어 어떤 순서로 얼만큼 수정했는지 기억이 가물하지만..최종 수정한 HTML 코드와 CSS 를 남겨둘테니 참고해주시면 감사하겠습니다! 기본 템플릿은 [ Odyssey ] 를 사용했고 이전 상단 헤더 꾸미기 1탄을 바탕으로 진행됩니다. 1. 아래가 둥근 헤더 박스기존의 상단을 가득 채운 네모 반듯한 상단바가 너무 딱딱한 느낌이 들어서아래만 둥글게 깎아 부드러운 느낌을 주겠습니다..header 클래스의 속성을 바꿔주기 위해스킨 편집 > HTML 편집 > CSS 탭에서 '/* header ..

[문제출처 | https://www.acmicpc.net/problem/2775 ]💭접근 방식다이나믹 프로그래밍 분류에 있는 문제로, 브론즈 등급이라 큰 어려움은 없었다.DP 특유의 점화식 규칙 찾기가 어떤 식인지 입문하기 괜찮은 문제였다.입력으로 들어오는 수의 최대값도 14로 작으니1. DP용 가구원 수를 담을 배열 선언2. 규칙을 찾아 전 층의 가구원 수를 DP 배열에 담는다.3. 테케 별 해당 층, 호의 가구원 수 출력DP 문제들의 주요 포인트는 점화식과 기저조건을 찾아내는 것이라 생각한다.자세한 풀이는 아래 풀이 과정에서 풀어보겠다.📝풀이 과정변수apart[15][14] : 메모이제이션을 위한 2차원 배열. 0 ~ 14층(15행), 1 ~ 14호(14열)주요 풀이k층 n호의 가구원 수는 k-1..

[문제출처 | https://www.acmicpc.net/problem/27737 ]💭접근 방식해당 문제는 Java로 먼저 풀었기 때문에 접근 방식은 이전 포스트로 대체한다.본진은 자바인데 프론트엔드 직군 코테를 위해 시작한 자바스크립트 풀이도 함께 올린다.DFS나 BFS를 자바스크립트로 풀며 느낀 조심할 부분은 재귀의 범위가 자바보다 작다는 것이다.자바에서 통과한 로직을 그대로 자바스크립트로 작성했는데 서브태스크 1만 성공하고 2는 틀렸다.뭔가 큰 수에서 탐색할 때 문제가 있나 싶어 BFS로도 풀었는데 문제는 다른 곳에 있었다. (풀이 과정에 계속..)큐에 탐색 칸을 담는 BFS 알고리즘으로 풀기 위해 visited 변수를 추가했다.📝풀이 과정변수visited : 탐색한 map 칸을 구분하기 위한 ..

[문제출처 | https://www.acmicpc.net/problem/27737 ]💭접근 방식처음 문제를 읽었을 땐 이전에 풀었던 섬의 개수, 토마토와 비슷한 느낌을 받았다.전형적인 DFS, BFS 문제로 구역을 탐색하며 흔적을 남기고 그때마다 카운팅한 어떤 결과물을 도출하는 것.문제 내용 중 한 칸에 여러 개 포자를 겹쳐 심을 경우 범위가 더 늘어난다는 예시 이미지를 보고 순간 생각이 많아졌는데..(BFS에 DFS까지 합쳐야 하는 문제인가? 해당 칸에 1개만 심을 경우, 2개 심을 경우, X개 심을 경우 퍼져 나갈 수 있는 칸은 X * K 개니까.. 헉 그럼 어떻게 풀어야하지? \(°_o)/ )이러다 날 샌다.. 일단 겹쳐 심는 경우는 제쳐두고 하나씩 심는 경우에서 풀어나가 보자.시작은 섬의 개수 ..

이 포스팅은 '누구나 자료구조와 알고리즘 개정2판' 을 스터디한 내용을 바탕으로 작성하는 공부기록이다. 알고리즘어떤 과제를 완수하는 명령어 집합어떤 자료 구조를 이미 결정했더라도 코드의 효율성에 영향을 미칠 수 있는 중요한 요인 선형 검색왼쪽에서 오른쪽으로 한 번에 한 셀씩 확인하며 값을 찾는 방식원소 수만큼 단계가 필요하다. (N개의 원소가 있을 때 검색에 필요한 단계는 N단계)이진 검색계속해서 중간 지점을 골라 남은 수 중 반을 제거해 나가며 값을 찾는 방식.정렬된 배열에서만 쓸 수 있다.원소 수를 두 배로 늘릴 때마다 검색에 필요한 단계는 한 단계만 늘어난다. (대단히 효율적인 부분)구현public static void main(String[] args) { // 이진검색 구현 실습 int[] ar..

이 포스팅은 '누구나 자료구조와 알고리즘 개정2판' 을 스터디한 내용을 바탕으로 작성하는 공부기록이다. 집합중복값을 허용하지 않는 자료구조연산(배열 기반 집합)읽기 : 배열과 마찬가지로 한 단계로 끝난다.검색 : 최대 N단계삽입중복값을 허용하지 않는다는 제약에 의해 삽입하려는 값이 이미 있는지 검색이 우선되어야 한다.맨 끝에 삽입하는 경우 N+1단계가 필요하고, 최악의 경우 맨 앞에 삽입할 때 N개를 검색하고 N단계를 거쳐 데이터 이동 후 값을 삽입하는 1단계로 총 2N+1단계가 필요하다.삭제 : 최대 N단계 삽입의 경우 일반적인 배열보다 느리지만 중복 금지가 지켜져야 할 경우는 집합이 답이며, 이는 곧 애플리케이션의 요구사항에 따라 어떤 자료구조가 더 적합한지를 결정해야 함을 의미한다.

이 포스팅은 '누구나 자료구조와 알고리즘 개정2판' 을 스터디한 내용을 바탕으로 작성하는 공부기록이다. 자료구조 용어데이터 : 기초적인 수와 문자열자료구조 : 데이터를 조직하는 방법으로 같은 데이터를 다양한 방식으로 조직할 수 있다. → 데이터 조직은 그 방식에 따라 코드의 실행 속도에 영향을 미친다.속도 측정'연산이 얼마나 빠른가'를 측정한다.이때, 측정은 얼마나 많은 단계가 필요한지를 논해야 한다.배열크기 : 배열에 데이터 원소가 얼마나 들어있는지인덱스 : 특정 데이터가 배열의 어디에 있는지연산읽기 : 위치를 찾아보는 것배열은 각 인덱스에 특정 메모리 주소를 가지고 있고, 컴퓨터는 모든 메모리 주소에 한 번에 갈 수 있다.→ 배열의 읽기는 한 단계로 끝나는 가장 빠른 연산 유형이며 강력한 자료 구조이..

LTI(Learning Tools Interoperability) 학습 도구 상호 운용성 IMS Global Learning Consortium(이후 1EdTech)에서 개발한 교육 기술 사양 소개 학습 관리 시스템(LMS)과 학습 도구 간의 상호 운용성을 제공하는 국제 표준. LMS는 LTI를 사용하여 외부 타사 시스템에서 제공하는 과정 콘텐츠 및 도구를 웹에서 호스팅 할 수 있다. 웹 서비스 기술을 이용하여 구현되며, LMS와 학습 도구 사이에서 사용자 인증, 권한 부여, 결과 전송 등의 기능을 수행한다. LTI는 LMS에서 학습 도구를 호출할 때 필요한 매개 변수와 서명을 포함한 요청을 학습 도구 측에서 검증하고 그에 따른 응답을 제공한다. 간단한 구현 방법과 유연성, 확장성이 높은 특징을 가지고 ..

View Transitions API 여러 DOM 상태 간에 애니메이션 전환을 쉽게 생성하는 동시에 DOM 콘텐츠를 단일 단계로 업데이트할 수 있는 메커니즘 제공 모바일 앱을 사용하면서 화면 이동 전환이나 요소 애니메이션(슬라이드, 페이드 인-아웃 효과, 확대 등)을 흔히 볼 수있다. 이러한 애니메이션은 만들 수 있으나 그게 마냥 쉬운 것만은 아니다. SPA에서 이 같은 상태 간 전환에 CSS와 JS로 다음 과정을 수행한다. 이전 콘텐츠를 보여주면서 새 콘텐츠를 렌더링 → 애니메이션 발생 하며 전환 → 전환 완료 후 이전 콘텐츠 제거 위 과정에서 DOM에 이전 콘텐츠와 새 콘텐츠가 모두 표시되어 발생하는 문제가 있을 수 있는데, 이러한 DOM 변경 및 전환 애니메이션을 쉽게 처리하고자 등장한게 View ..

콘솔에서 실행했을 떄는 문제가 없었는데 서버에서 실행하니 매퍼쪽에서 자꾸 에러를 던졌다. 문자열을 비교하는 동적쿼리 조건문 에서 문제가 발생했는데, 'N' 이라는 문자열에 대해 .toString() 을 해주지 않아 발생한 것이다. .toString() 해주니 잘 돌아갔다!