.Zzumbong

노노그램 토이프로젝트는 기획이나 정리 없이 머릿 속 순서대로 하고 있다! 정신 없이 흘러가기도 한다. 1편에 이어서 노노그램 게임을 만들어보자~ 1. 정답지를 받고 내가 푸는 노노 그램을 일단 만들자 const Nonogram: React.FC = ({ answer }) => { const [nonogram, setNonogram] = useState( Array(answer.length).fill(Array(answer.length).fill(0)) ); return ( {nonogram && nonogram.map((row, indexY) => ( {row.map((cell, indexX) => ( ))} ))} ); }; 빈 노노 그램 박스가 완성된다. 2. 클릭 이벤트 만들기 노노그램 클릭은 2가..

노노그램 토이프로젝트는 기획이나 정리 없이 머릿 속 순서대로 하고 있다! 정신 없이 흘러가기도 한다. 뭔가 퍼즐을 풀고 만드는 것을 좋아하다보니 평소에 노노그램을 폰으로 즐겨한다. 매번 취업을 위한 과제나 알고리즘을 풀다가 지쳐버린 나 내마음대로 만드는 것을 하고 싶어져서 노노그램 게임을 만들어보기로함! 1. 설치 npx create-react-app nonogram --template typescript 2. 절대경로 설정하기 { "compilerOptions": { "baseUrl": "src", }, "include": ["src"] } 3. sass 설치 npm install sass 4. reset.css 받기 /* box-sizing 규칙을 명시합니다. */ *, *::before, *::af..

keep calm and develop! 이라는 flag를 가진 우주인은 나를 캐릭터화 한 그림이다. Astronauts 그림을 그려준 전 여자친구 현 와이프에게 압도적 감사! 전전직장에 입사하기 이전인 5년 전에 만들었던 포폴이 있다. 사실 지금도 사용중이지만 간단한 내용 업데이트만 해놓은 상태이다. react 16버전으로 만들었고 class component를 사용 할 정도로 오래된 프로젝트이다. [포폴 사이트 구경가기] 오늘 리뷰할 부분은 인트로 부분이다. 5년전에 만들어서 다른 부분은 약간 촌스러워도 영혼을 갈아 넣었던 인트로 부분은 아직도 기가막히다. 이 부분은 총 6장의 캔버스로 이루어져 있다. 뒷 배경에서 은하수를 표현하는 milky가 1장, earth 컨테이너가 가진 4장, loaded가 ..

1. console.log() 가장 기본적이면서 가장 많이 사용되는 메소드입니다. 변수의 값이나 프로그램의 상태 등을 로그로 출력합니다. const number = 5; console.log('Number:', number); console.log(`Number: ${number}`); // 주로 이방법이 편하다. 예를 들면 console.log('foo: ', foo, ' bar: ', bar); console.log(`foo: ${foo}, bar: ${bar}`); // 처럼 아래가 타자치기 조금 더 편한 느낌. 2. console.table() 배열이나 객체를 테이블 형태로 출력하여, 데이터를 한눈에 이해하기 쉽게 해 줍니다. 3. console.time() / console.timeEnd() 코..

8년 차에 쓰는 첫 개발 회고록 벌써 8년차다. 연차로 치면 8년 차지만 실 근무?로 치면 만 6년 경력으로 주니어는 아니지만 확실히 시니어입니다!라고 하기엔 애매한 상황이다. 시니어와 비교하면 역시나 부족하겠지만 나름 시스템과 프레임워크에 대한 이해나 패키지 개발이나 다양한 프로젝트를 소화하다 보니 실력이 늘어서 자신감은 있지만 성격상 흔히 말하는 찐개발자들이 많기 때문에 항상 겸손하게 일하고 있다. 1. 2015 - 2016 컴공이랑 이름만 다른 컴퓨터 과학을 전공해 14년도 졸업 이후 갈피를 못 잡던 시기에 비개발직군에 취업했다. 현대 1차 밴드 협력업체라는 좋은 타이틀이 있던 전산지원부라는 당시엔 생소한 부서에 입사하였다. 회사 내에 컴퓨터 조달, 수리, 관리 뭐 그런 것도 하고 가끔 자체 프로그..