본문 바로가기

전체 글140

[2020 카카오 신입 공채] 자물쇠와 열쇠 1. 문제 고고학자인 "튜브"는 고대 유적지에서 보물과 유적이 가득할 것으로 추정되는 비밀의 문을 발견하였습니다. 그런데 문을 열려고 살펴보니 특이한 형태의 자물쇠로 잠겨 있었고 문 앞에는 특이한 형태의 열쇠와 함께 자물쇠를 푸는 방법에 대해 다음과 같이 설명해 주는 종이가 발견되었습니다. 잠겨있는 자물쇠는 격자 한 칸의 크기가 1 x 1인 N x N 크기의 정사각 격자 형태이고 특이한 모양의 열쇠는 M x M 크기인 정사각 격자 형태로 되어 있습니다. 자물쇠에는 홈이 파여 있고 열쇠 또한 홈과 돌기 부분이 있습니다. 열쇠는 회전과 이동이 가능하며 열쇠의 돌기 부분을 자물쇠의 홈 부분에 딱 맞게 채우면 자물쇠가 열리게 되는 구조입니다. 자물쇠 영역을 벗어난 부분에 있는 열쇠의 홈과 돌기는 자물쇠를 여는 .. 2024. 3. 12.
[2020 카카오 신입 공채] 문자열 압축 https://school.programmers.co.kr/learn/courses/30/lessons/60057 1. 문제 데이터 처리 전문가가 되고 싶은 "어피치"는 문자열을 압축하는 방법에 대해 공부를 하고 있습니다. 최근에 대량의 데이터 처리를 위한 간단한 비손실 압축 방법에 대해 공부를 하고 있는데, 문자열에서 같은 값이 연속해서 나타나는 것을 그 문자의 개수와 반복되는 값으로 표현하여 더 짧은 문자열로 줄여서 표현하는 알고리즘을 공부하고 있습니다. 간단한 예로 "aabbaccc"의 경우 "2a2ba3c"(문자가 반복되지 않아 한번만 나타난 경우 1은 생략함)와 같이 표현할 수 있는데, 이러한 방식은 반복되는 문자가 적은 경우 압축률이 낮다는 단점이 있습니다. 예를 들면, "abcabcdede".. 2024. 3. 11.
useEffect썼는데 왜 두번 실행되요? useEffect야 한번만 실행한다면서...두번 실행이 된다. 왜 그런가? index.js의 이다. 이 친구가 디버깅을 하면서 한번더 렌더하는건가 보다. 해결법은 해당 태그를 삭제하면 된다.... 2024. 3. 9.
프로젝트 방향성, 결과물 쌓기 방식 변경 프론트엔드 공부를 해오면서 포트폴리오 즉 프로젝트를 완성시키는 데에 내 나름대로의 기준은 하나를 배우면, 그것에 바탕으로 규모에 상관없이 프로젝트를 완성하고 또 새로운 걸 배우고 프로젝트를 하고의 반복이었다. 그래서 지금까지 html,css배우고 프로젝트, js, ES6배우고 프로젝트, reactJS배우고 프로젝트 이런걸 반복하고 있었는데 사실 토이 프로젝트의 규모는 계속 반복하고 있었는데 지금 만들고 있는 퀴즈 사이트는 css와 js실력 향상을 목표로 처음부터 끝까지 바닐라js로만 구현을 하려고 했는데 그렇게해서 얻는 이득이 적다고 생각이 들었다. reactJS, typescript, expressJS, nextJS, redux다 자격요건에서 요구하는 스택들이고 이 스택들은 하나하나 순차적으로 진화해온.. 2024. 3. 5.
VanillaJS로 웹서비스 만들기 - 중간 검토1 HTML, CSS3, Javascript ES6까지 기본적인 개념을 배우고, 토이프로젝트까지 진행하였지만 구글링 그리고 여러 자료를 통해서 CSS  JS의 탄탄한 기본 개념이 신입을 뽑을 때 보는 중요한 요소라고 하여 이제까지 배운 바닐라JS으로만 하나의 괜찮은 서비스를 만들어보기로 하였다. 막상 프로젝트를 하다 보니 구현하고 싶은 기능들도 많고 해서 제작 기간이 점점 늘어나고 있지만 그만큼 많이 배우고 완성도 있는 프로젝트를 만들 수 있다고 생각이 든다. 주제 일단 이번 프로젝트의 주제는 축구 퀴즈 사이트이다. 지난 1년동안 재미있는 퀴즈 사이트가 많이 생겼다고 생각이 든다. 평소에 유튜브를 보면 재미있는 퀴즈 사이트를 통해 방송을 하는 유튜버들도 많았고 실제로 플레이해봤을 때 재미있는 경험을 했다... 2024. 3. 3.
CSS 전체 선택자에 color: white를 추가하고 구체적인 선택자에 다른 color로 바꿨을 때 "컴퓨터는 바보가 아니다. 에러를 해결했을 때 바보는 나였다는 것을 깨닳을 수 있을 것이다." - 지친케찹 CSS를 다루다보면 답답한 상황이 많이 일어난다. 이전 프로젝트를 진행하면서 전체 선택자 때문에 문제가 생겼다. 일단 전체 선택자는 항상 전체 페이지의 쓸모없는 여백을 비울때 사용하므로 밑의 코드를 거의 default로 적용한다. * { margin: 0; padding: 0; box-sizing: border-box; } 저번에 했던 실수가 전체 셀렉터에 color: white를 추가해주었다. 나는 더 작은 범위의 선택자에 갈 수록 똑같이 color설정을 바꾸면 더 구체적인 속성으로 바뀔줄 알고 코딩했는데 바뀌지 않아서 고생을 했다. 예를 들자면 body태그 안에 h1의 폰트 색깔만 yellow으.. 2024. 2. 28.
flex 개념, 특징 정리 flex는 페이지의 element들을 다양하게 배치할때 사용하기 좋은 속성이다. 일단 flex에 대해서 알아야할 2가지 중요한 특징이 존재한다. 1. flex container와 flex element flex를 사용하기 위해서는 2요소에 flex관련 특성을 설정하여야 한다. 첫번째는 element들이 정렬될 범위를 지정하는 flex container. 그리고 정렬될 element인 flex element이다. html으로 보면 아래와 같은 코드의 상황에서 flex를 사용한다. 1 2 3 4 5 이럴때 .container에 display:flex를 통해서 flex를 적용할 수 있다. .container { display: flex; } 2. main axis와 cross axis flex element들.. 2024. 2. 27.
[HTML/CSS/JS] to do list 만들어보기 회고 https://main--transcendent-bunny-41a741.netlify.app/ 노마드 코더의 바닐라JS 크롬 앱 만들기 수업을 듣고 복습 그리고 지금까지 배웠던 HTML, CSS, Javascript를 연습할 겸 수업에서 다루었던 프로젝트를 다시 한번 직접 제작해보았다. 사실 강의에서 기능들의 구현을 이미 상세하게 설명해주었기 때문에 대부분의 javascript에서 마주친 문제가 그렇게 크지는 않았다. 다만 강의에서 설명하지 않았던 기능 그리고 강의에서 설명해주었지만 다시 직접 구현할때 떠올리기 어려웠던 인사이트는 다시 한번 적어 남겨보도록 하겠다. 어려웠덤 점들 - Javascript 1. 정해진 날짜와 현재 시간과의 날짜 계산 해당 앱을 만들면서 오른쪽 상단에 내가 언제부터 프론트 기.. 2024. 2. 27.
ES6 Promise 연습문제 브금온! Q1. 태그의 이미지 로딩 성공시 특정 코드를 실행하고 싶다! Promise문법의 then, catch 함수를 사용해 싶습니다, 어떻게 코드를 짜면 될까요? 답: 더보기 resolve는 조건을 만족했을 때 사용되는 함수, reject는 반대이다. resolve를 부르면 .then()을 쓰고, reject이면 catch()를 사용한다. Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다. https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 하면 인삿말이 하나 딸려옵니다. 여기로 GET 요청을 해서 성공하면 Promise의 then함수를 이용해서 Ajax로 받아온 인사말을 콘솔창에 출력해주고 싶습니다. 어떻게 하면 될까요? 답: 더보기 .. 2024. 2. 25.

티스토리툴바