fpzmfks 님의 블로그

오늘은 프론트엔드 개발자 채용공고 분석을 하기로 했다. 취업을 목적으로 실무에서 사용할 수 있는 기술을 배우는만큼, 어떤 것들이 실제 업무에서 도움이 될지 확인해두는 것은 앞으로 많은 도움이 될 것이다.  먼저, 고려해야 할 점은 추려서 4가지로 정리할 수 있을 것 같다.  주요 업무자격요건내가 프론트엔드 개발자로써 실제 업무환경에서 어떤 역량을 잘 발휘할 수 있을지나에게 부족한 점 이렇게 4가지를 중심으로 4개 기업의 채용 공고를 살펴보고 분석해보기 시작했다.  첫번째 채용 공고는 (주)마상소프트의 웹 퍼블리셔 모집이다. 잡코리아에서 부산 지역과 프론트엔드를 키워드로 검색해서 찾은 것인데, 검색 과정에서 부산 지역 내에서 프론트엔드 개발자를 찾는 곳이 많지 않고, 고용처는 대부분 서울이라는 것을 알았다..

이번에 자연수 뒤집기 코드카타를 하며 다시 한 번 난관에 부닥쳤다. 이전에 코드카타를 하면서 몇 번 마주한 string() 함수, map() 함수와 최종적으로 ruturn answer;로 값을 출력하기 위해 사용해야 하는 push()와 unshift(), 그리고 돌고돌아 완성해낸 .forEach 문까지... 차근차근 나의 해답을 풀어보도록 한다.  먼저 문제를 제시하자면, 제목의 자연수 뒤집기는 주어진 임의의 자연수 n을 배열로 만든 것을 뒤집어서 출력하는 것을 뜻한다. 만약 234가 주어졌다면 [4, 3, 2]가 출력되어야 하는 식이다.  이러한 배열로 변환하는 출력을 위하여 answer는 var answer = [];로서 빈 배열로 선언되었고, 이로써 return aswer;로 값을 출력하려면 ans..

다시금 개발 아티클을 살펴보는 시간이 왔다. 이제까지는 개발 자체와 관련된 것이 아니라 개발자에 관한 아티클을 살펴보았는데, 이번에는 좀 더 지식과 관련된 아티클을 읽어보았다.  바로 '주니어 개발자를 위한 엄청 쉬운 네트워크 이야기(https://yozm.wishket.com/magazine/detail/1875/)'이다.  이제부터 개발자가 되는 공부를 한다는 생각으로 프로그래밍 언어나 코드에 관한 생각을 많이 했는데, 이러한 네트워크 관련 지식은 좀 소홀했던 것 같다. 아무래도 1차적으로 어려울 것 같다는 선입견이 있었기 때문일 것이다. 하지만 이 아티클에서는 그림과 이야기를 통해서 네트워크를 쉽게 이해할 수 있도록 했기에 이러한 선입견이 누그러지는 것이 느껴졌다.   내용을 정리하자면 이렇다.  ..

앞으로 며칠은 더 걸릴 줄 알았는데, 그간의 노력이 빛을 발했는지 오늘에 이르러 드디어 게임을 완성했다. 아래는 최종본이다.   시작 버튼 클릭->입력 텍스트 박스 비활성화+아래쪽 박스 비표시+랜덤한 수 생성+랜덤한 수가 생성된 위쪽 박스 표시+카운트 박스 표시+3초 카운트+3초 후 위쪽 박스와 카운트 박스 비표시+입력 텍스트 박스 활성화 -> 입력-> 제출 버튼 클릭->아래쪽 박스 표시+정답인지 아닌지 확인하고 결과값을 출력하는 if문+입력 텍스트 박스에 입력된 값 초기화 반드시 필요한 기능 외에도 ui, 편의성 측면에서 필요할 것 같은 기능들을 구현해 보았다. 제법 힘들었지만, 드디어 스스로 무언가를 만들어내었다는 성취감이 커서 매우 뿌듯해졌다.  이제 더 자세히 살펴보자면, 저번에 문제가 되었던 것..

오늘은 내가 배운 방식으로 자바스크립트를 실행하려면 JQuery가 꼭 필요하다는 것을 알게 되었다. 여태까지는 를 html 본문에 넣으면 이를 통해서 script.js 파일을 불러와서 실행하는 줄 알았는데, 페이지 구현에 막혀서 다시 강의를 돌아보니 JQuery가 자바스크립트의 하위 개념이기는 하지만 내가 할 줄 아는 게 JQuery를 포함한 자바스크립트밖에 없다보니 JQuery를 꼭 포함시켜야 스크립트가 작동하는 것이다.  아무튼 이런 이유로 js 파일을 분리해야 할 필요성이 없어졌기 때문에 html본문에 js 파일에 작성한 코드를 붙여넣고 그 동안 또 고쳐 본 코드를 다시금 실행시켜 보았다.  비록 undefined가 뜨긴 했지만 작동을 하기는 한다는 사실에 감사한다.  결과를 보니 checkNumb..

오늘은function generateRandomNumber()와function startGame()을 구현해 보려고 노력했다.   function startGame()은 function generateRandomNumber()을 불러와 랜덤한 숫자를 위쪽 박스에 띄우고, 3초 뒤에 보이지 않게 하는 함수이다. 저번에는 숫자를 지워야 한다고 생각했었는데 오늘 이 기능을 위한 코드들을 찾아보니, 이 기능을 숫자 기억 게임에 맞추어서 수행시키려면 '삭제'가 아니라 '보이지 않음' 상태로 만들어야 한다는 것을 깨달았다.  이를 구현하기 위한 두 가지 방법을 찾았는데 첫번째는 에서 랜덤한 숫자가 표기되는 위쪽 박스 number_display를display: none(비표시)상태로 만들고  number_displa..

지난 번에 콘솔을 이용해서 강아지 그리는 걸 쉽게 했다가 이번에 간단하게나마 게임을 하나 만드려고 하니 머리가 터질 것 같다. 하지만 이런 걸 만들어내지 못하면 개발자라고 할 수 없으니 완성을 목표로 오늘부터 열심히 게임을 만들기 시작했다.  숫자 기억 게임은 시작 버튼을 누르면 나오는 1000~9999 사이의 정수가 3초 뒤 사라진 뒤 해당 랜덤 숫자가 뭐였는지를 입력하고 제출하여 그것이 맞았는지 틀렸는지 확인하는 게임이다. 사용자 입장에서는 매우 쉬운 게임이지만, 만드는 입장에서 초보자인 내가 무사히 구사할 수 있을지 머리가 아찔해진다.  만드는 입장에서 이 게임의 구성요소를 좀 더 자세하게 묘사하자면 컨테이너 박스 안에 안에 있는 1개의 타이틀, 1개의 텍스트 박스, 2개의 버튼, 2개의 박스를 알..

이번에 읽은 개발 아티클은개발자에게 물어봤습니다: ① 함께 일하고 싶은 개발자(https://yozm.wishket.com/magazine/detail/1702/)이다.  내가 개발 수업을 배우게 되면서 느낀 만큼 개발자의 업무는 생각보다 많고, 이것을 우리가 평소에 인터넷 내의 여러 웹사이트나 어플리케이션에 바라는 만큼의 스펙을 유지하도록 하는 것은 힘겨운 일이다. 때문에 본격적인 프로젝트를 위해서는 이러한 업무를 적절히 분담하고 또 서로 호환하게 하는 것이 중요할 것이다. 해당 글에서는 그러한 개발자의 업무 환경과 개발자가 선호하는 동료에 대해 취재하여 글을 읽는 나(개발자 취업준비생)로 하여금 미리 고려해보아야 할 업무태도를 생각해보도록 하였다.   먼저 내가 이 글을 읽고 확인한 것은 하나의 웹페..

오늘도 함수를 풀고 그로 인해 배운 코드들을 기록하기 위해 글을 쓴다.  첫번째 문제는 배열의 평균값이었는데, 문제를 풀려고 해도 아는 코드가 거의 없으니 먼저 인터넷에 검색보았다. 그러다가 가장 먼저 해당 문제의 해답이 드러나 있는 블로그에 들어가 버려서, 이 문제에 대해서는 다른 방법으로도 풀어져 있는 해답을 탐구하고 배운 코드를 정리한다. 먼저 이전에 배운 for문으로 만들어진 해답이다.  function solution(numbers) {     var answer = 0;     let sum = 0;     for(let i=0; i        sum+=numbers[i]     }    return answer =sum/numbers.length;    } 내가 착각했던 것이 return에..

오늘 날 고생하게 한 두 개의 함수문제를 가져왔다. 다른 무엇보다도 이런 코드카타 문제가 가장 어려운데, 자바스크립트 언어에 대한 이해가 깊어져 가는 것이 느껴지는 것만큼은 장점이다.  0도부터 180도까지의 각도 명칭(ex)둔각)에 각각의 값을 반환하게 하는 함수를 만드는 문제이다. 아래는 내가 제출한 답안인데, 문제를 보고 단박에 if문을 사용하는 것까지는 생각했지만 정확히 어떤 변수와 문법을 사용해야 하는지에 대해 오래 헤매었다.  function solution(angle) {          if(0         answer = 1;     } else if(angle === 90) {         answer = 2;     } else if(90         answer = 3;    ..