굴러가유...

안녕하세요, 오늘은 좀 색다른 주제로 이야기를 해보려고 합니다. 산업기능요원 소집해제까지 이제 어느덧 4개월 좀 더 남았습니다... 시간이 빨리 갔다면 빨리 간거고 천천히 갔다면 천천히 간 느낌인데.. 지금까지 뭘 했나 생각해보니 별로 이룬게 없는 것 같더라고요. 학교에서 python과 java를 위주로 배우다 보니 자바스크립트에 대해선 스스로 공부를 했고, 나아가 자바스크립트에 완벽하지 않으면서 react를 시작했던게 원흉이 된건지.. 너무 주먹구구식 코딩이 되어버린 것 같아 매우 안타까운 느낌을 갖고있습니다. 나아가.. 회사에 사수가 없는 관계로.. 저의 소스에 대해 로직적인 코드리뷰를 받지 못하다 보니 이게 제대로 짜고있는건지.. 내가 잘 하고 있는건지 좀 의심이 들기도 하고.. 사수 없는 곳에서 ..

안녕하세요!! 오늘은 THREE.js를 사용해서 화면에 100개의 Mesh를 랜덤하게 뿌려보는 소스를 작성해보려고 합니다. 강의를 통해 많이 배우긴 했지만.. 너무 내 지식이 아닌 것 같아서.. 다시 듣는 중이랍니다. 오늘은 간단하게 THREE.js를 사용, 똑같은 Mesh를 100개 만들어 x, y, z 값만 랜덤하게 배정하는 것을 해볼 것입니다! index.html 우리는 box.js를 불러와 사용할 것으로, src설정, type='module'로 불러옵니다. 로컬에서 테스트를 하기 위해선 vscode의 extensitions에서 liveserver 를 설치하는것을 권장합니다! // index.html box.js 기본 설정을 진행해야 합니다. 우리는 THREE.js와 OribitControl을 사용..

안녕하세요! 날이 많이 쌀쌀해진 겨울이 다 되었네요.. 오늘은 자바스크립트에서 시간이 필요할때 자주 사용하기 좋은 API를 하나 공유하고자 합니다. Intl API 란? 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정에서 우리는 국제화 라는 것을 알고있어야합니다. 한국만 사용하지 않는다는 것이죠! 예를들어, 10/12/14 라는 날짜는 한국에서는 2010년 12월 14일로 해석하게 됩니다. 하지만 미국에서는 10월 12일 2014년 으로 해석할 수 있다는 거죠 만약에 그렇다면 이 웹은 국제화 한 웹일까요? 그렇지 않습니다. 하지만 이것을 언어마다 하나하나 변경하게된다면 그 공수또한 장난이 아닐거란 거죠.. 다행히 이러한 데이터 포멧팅 문제를 해결해주기 위해 Intl API..

안녕하세요, 오늘은 난이도 3의 '보석쇼핑'를 가져왔습니다!! 이 문제가.. 카카오 인턴문제라는데 이 귀한걸 가져왔습니다. 풀었던 저의 주관적인 풀이를 공유하고자 합니다! 문제 설명 [본 문제는 정확성과 효율성 테스트 각각 점수가 있는 문제입니다.] 개발자 출신으로 세계 최고의 갑부가 된 어피치는 스트레스를 받을 때면 이를 풀기 위해 오프라인 매장에 쇼핑을 하러 가곤 합니다. 어피치는 쇼핑을 할 때면 매장 진열대의 특정 범위의 물건들을 모두 싹쓸이 구매하는 습관이 있습니다. 어느 날 스트레스를 풀기 위해 보석 매장에 쇼핑을 하러 간 어피치는 이전처럼 진열대의 특정 범위의 보석을 모두 구매하되 특별히 아래 목적을 달성하고 싶었습니다. 진열된 모든 종류의 보석을 적어도 1개 이상 포함하는 가장 짧은 구간을 ..

안녕하세요! 오늘은 자바스크립트를 사용해서 three.js의 기초를 살짝 맛보려고 합니다. three.js는 3D웹을 만드는 데 사용하는데요, 소스도 올려둘 테니 한번 다운받아 사용해 보시면 더 좋은 경험이 될 것입니다. 깃허브 소스보기 three.js 맛보기 three.js 의 기본 설정 (렌더, 씬, 카메라, 메쉬, 애니메이션, 리사이징) 에 대한 기본적인 소스를 공유하기 위해 만들어진 페이지입니다. html 의 canvas? 일종의 도화지라 생각하면 된다. 도화지의 크기는 window.innerWidth 와 window.innerHeight 의 크기로 설정을 한다. THREE.WebGLRenderer ? const renderer = new THREE.WebGLRenderer({ canvas, an..

안녕하세요, 오늘은 난이도 2의 '방문길이'를 가져왔습니다!! 풀었던 저의 주관적인 풀이를 공유하고자 합니다! 문제 설명 게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다. U: 위쪽으로 한 칸 가기 D: 아래쪽으로 한 칸 가기 R: 오른쪽으로 한 칸 가기 L: 왼쪽으로 한 칸 가기 캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다. 예를 들어, "ULURRDLLU"로 명령했다면 1번 명령어부터 7번 명령어까지 다음과 같이 움직입니다. 8번 명령어부터 9번 명령어까지 다음과 같이 움직입니다. 이때, 우리는 게임 캐릭터가 지나간 길 중 캐릭..

안녕하세요! 이번엔 무한스크롤, 페이지 애니메이션을 줄때 주로 사용하는 intersectionObserver에 대해 설명해보려고 합니다! 애니메이션 효과를 주는 방법은 여러가지가 있죠! Scroll 이벤트도 있고, intersectionObserver도 있구.. 이번엔 intersectionobserver을 사용해보려고 합니다. 듣기론 ..? toss에서 intersectionobserver을 사용한다는것 같기도 하고..? 쨋던 intersectionobserver 가 뭐냐? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. 공식 문세는 이렇게 정의하고 있습니..

안녕하세요! 오늘은 정말 재밌는걸 들고왔는데요, 개발을 하다 재밌는것을 발견했는데요! 프론트엔드 개발자라면 필수인 크롬의 F12.. 여러분은 이 F12를 얼마나 사용하실 줄 아시나요?? 많은 프론트엔드 개발자분들도 잘 사용하지 못한다는 F12에 대해서 제가 알고있는 정보들을 공유하고자 합니다!! 우선 F12를 누르면 나오는 화면입니다. 화면을 처음 보시는 분들소 있을 수 있으니 상단 탭에 대하여 중요한것들 위주로 설명해보자면 우선 elements 탭, console 탭, network 탭, application 탭이 있습니다. 주로 이렇게 4개를 주로 보실텐데요. 탭에 대하여 설정을 해보자면 1. elements탭 주로 html을 미리보거나, css를 확인할때 사용합니다. elements에서 css를 직..

안녕하세요, 오늘은 난이도 2의 '프린터'를 가져왔습니다!! 풀었던 저의 주관적인 풀이를 공유하고자 합니다! 문제 설명 문제 설명 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있..

안녕하세요, 오늘은 난이도 2의 '게임 맵 최단거리'를 가져왔습니다!! 풀었던 저의 주관적인 풀이를 공유하고자 합니다! 문제 설명 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며, 게임 맵을 벗어난 길은..