여수생활을 끝내고 대전에 돌아온 오늘이다. 그 전까지 부득이한 사정으로 알바와 공부를 병행했었다. 취침시간을 보장받지 못해 체력이 많이 떨어졌고 원하는 만큼에 복습과 공부를 하지 못해 답답했는 데 이제는 원하는 만큼 공부할 수 있게 되어 마음이 들뜨고 기뻤다. 노트북화면이 망가져서 당분간 성능이 느린 아버지 노트북을 빌려서 공부해야겠지만! 이또한 어떠하리! 나에겐 그릿이 있는 걸!(하지만 그릿이 정확히 뭔지 모른다. 찾아봐야지! 메타인지!) 할 수 있다! 멋진 UX 프론트 개발자가 될 수 있어! 오랜만에 뵌 부모님과의 밥상머리 대화. 그 대화에 기억에 남는 건 또 사용자 경험 문제. 밥차리기 질려하는 엄마의 웰컴 홈 디너 pick은 역시나 엄마가 좋아하는 교촌 치킨. 자연스럽게 교촌에 대한 ..
* 중간과정에서 오타관련 오류코드가 존재합니다. 잘 동작하는 코드는 맨 하단에 있습니다. 프로그래머스 : 게임 맵 최단거리 https://school.programmers.co.kr/learn/courses/30/lessons/1844?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 게임 맵 최단거리 풀이과정 1. 알고리즘 선택 최단거리를 탐색할 때 우선 출발지를 기준으로 상하좌우 탐색이 가능한 길인지 검증후 점차 탐색영역을 넓혀서 넓게 탐색해야 함으로 BFS 알고리즘을 선택했습니다. BFS 알고리즘을 사용하기 위해 qu..
예제 코드를 통해 Three.js의 기본 구조를 파악해 봅시다. 크게 네 가지 순서로 작성합니다. 1. Scene(장면) 생성. scene(3D 공간)을 생성합니다. const scene = new THREE.Scene() -> 더 설정해 준다면 여러 scene을 생성할 수 있고, 배경색 등 여러 조건을 설정할 수 있습니다. scene.background = new THREE.Color(0x000000) //헥스 코드로 표현한다. 빨간 배경색 0xff0000 ,초록색 0x00ff00 2. Objects(정육면체) 생성. 사실 Object는 *particles(입자), lights(조명)과 같이 다양하게 포함된 개념이지만, 지금은 3D Object(Mesh)인 정육면체로 예시를 들겠습니다. Mesh(3D ..
* Human Computer Interaction 개론 책을 바탕으로 정리한 내용입니다. 1.UX? user experience 사용자 경험. 사용자 경험 UX 는 어떤 제품이나 서비스에 대해 사용자가 느끼는 총체적인 경험을 말합니다. 예를 들어 볼까요? 이은희라는 사람은 리모콘이라는 제품을 tv시청이라는 목적을 위해 사용하고자 합니다. 리모콘을 사용하기 전 리모콘을 찾는 과정에서 느끼는 경험부터(리모콘 어디있지? 리모콘 그립감 좋네.) 리모콘을 사용 중 일때, 전원버튼을 누르고 원하는 프로그램을 찾아보는 과정에서 느끼는 기억, 리모콘을 만지는 촉각, 리모콘 디자인( 미니멀한 디자인으로 세련된 느낌. 무슨버튼을 눌러야 넷플릭스로 이동하는 거야. )에서 tv 시청이라는 목적을 이루고 나서 사용이 끝났을 ..
https://school.programmers.co.kr/learn/courses/30/lessons/12940 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스 : 최대공약수와 최소공배수를 구하는 문제를 풀고 더 나은 풀이법을 공부하기 위해 다른 사람풀이를 살펴봤습니다. 그중 유클리드 호제법이란 개념으로 최대공약수를 푼 풀이에 흥미가 돋아 해당 개념을 블로깅 했습니다. 기존 푼 풀이 function solution(n, m) { var answer =Array(2).fill(1); let Max = 1; for(let i = 1; i
깃허브 프로젝트에 칸반을 채우던 중 팀원분께서 issue와 draft의 차이를 물으셨고 이에 대해 정확히 설명드린것같지 않아 찾아보게 되었습니다. 원래 이렇게 배우고 익히는 것 아니겠어요? 먼저 정리하자면 일반적으로 정확히 할당받는 업무는 issue 로 만들고, 추가 예정인 업무, 하지만 배정받을지 모호한 업무는 draft 로 만들라고 하네요!Create a draft: 임시 저장용 작업 항목.Create new issue: 바로 새로운 작업을 작성하여 프로젝트와 리포지토리에 기록.Add item from repository: 기존 작업(issue 또는 PR)을 보드에 추가.Create a draft임시적으로 작성한 아이템. 완성되지 않은 상태에 두고 나중에 내용을 추가하거나 수정할 계획이 있을 ..
저는 미움받는 것에 무던히 못지나치는 성향이고 팀장을 맡는 것을 은근히 좋아하는 것도 아닙니다. 그래서 웬만해서는 안 맡고 싶은 마음도 있었어요. 근데 자진하는 분들도 없었고 과거 스터디장으로 뼈저리게 회고했던 경험이 떠올라, 이번에는 더 좋은 장의 소양을 기르고 싶다는 욕심에 팀장을 맡게 되었습니다. (뭐야) 결론적으로 자진해서 역을 맡았지만 성향에 안 맞는 건 어쩔 수 없어 프로젝트 진행 전까지는 긴장도 많이 하고 걱정도 많이 했습니다. 근데 최근 역할을 수행하며 과거 스터디장을 했던 저보다 많이 성장했다고 느꼈고, "처음 하는 게 제일 어렵다"는 말이 와닿는 요새라 현 과정을 적으며 스스로를 토닥이고 부족한 부분을 채우는 시간을 가지려 합니다. 이번주 프로젝트의 팀장 역할을 잘 수행하..
서버 컴포넌트서버측에서 사전 렌더링을 진행할 때 딱 한 번만 실행됨 클라이언트 컴포넌트사전 렌더링 진행할 때 한번, 하이드레이션 진행할때 한번 총 2번 실행 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다. 클리이언트 컴포넌트는 클라이언트에서만 실행되지 않는다. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다. - > 만약 클라이언트 컴포넌트에서 서버 컴포넌트를 Import 할경우 자동으로 서버 컴포넌트를 클라이언트 컴포넌트로 변경함 /그래서 반드시 클라이언트 컴포너트의 자식 컴포넌트로 서버 컴포넌트가 존재해야한다면 서버컴포넌트를 children 컴포넌트를 받아서 삽입하면 서버컴포넌트를 클라이언트 컴포넌트로 변경되지 않고 삽입가능하다. 서버 컴포넌트에서 클라이언트 컴포..
1. [Next.js] middleware.ts미들웨어는 요청과 응답 사이에 위치해 실행되는 코드입니다. Next.js 파일 최상단에 middleware.ts 이름으로 파일을 만들면 알아서 동작됩니다.req.nextUrl.startsWith("/path") : 경로로 시작하는 모든 요청을 검사 NextRequest와 NextResponse는 표준 웹 API의 request와 response를 확장한 것 3. [ Next.js 14]개발모드(npm run dev)에서는 getStaticProps가 해당 함수의 개념과는 달리 페이지 재접속시 해당 요청마다 호출합니다. 왜냐하면 개발모드에서는 개발자가 코드를 수정했을 때 수정결과가 바로 반영하도록 설계되어 있기 때문입니다. 따라서 getStaticPr..
네! 혹시 이글을 보고 계신 여러분도 저처럼 "공부하기 싫지만 꾸준히 해야해,," 와같이 하기 싫은 일을 꾸준히 하고 싶으신가요? "1분 계획"이라고 거부조차 할 수 없는 아주 사소한 목표를 정해서 해보래요. 이런 행위의 목적은 일단 처음 특정한 행동을 꾸준히 반복하는 데 큰 의미가 있다고 합니다. 반복이 익숙해지면 그게 습관이 되는 거라 좋은 습관을 만들려면 아주 작은 일을 일단 실천해보라는 거죠. - 1분 계획세우고 바로 실천하기- 좋아하는 일과 묶기( 개발공부와 내가 좋아하는 주짓수를 묶는다면, 주짓수 기술 공유 웹사이트를 만들어야 할까요?)(독서할 때만 좋아하는 커피마시기 등 )- 환경 세팅하기 글쓰는 습관과 블로그 운영은 꾸준히 하고 싶으니 이런 글이라도 올리렵니다 흥흥 출처https:/..
