.log('FE')

개요 웹 프론트엔드 개발 직군을 지향하면서 느낀건 그냥 페이지를 만들고 기능이 동작하게 하고 예쁘게 만들고 이런 부분도 중요하지만 최근엔 더 무시할 수 없는 부분이 바로 전반적인 웹에 대한 이해다. 요즘은 그냥 웹 페이지가 단일로 동작하지않는다. 많은 API 와 또 다른 서버에서 제공되는 데이터들을 토대로 웹페이지가 만들어지고 그걸 분석하는 툴이 만들어지고 날씨정보, 위치정보, 영화순위 들을 보여줄수있게 되었다. 여기에 보안이슈까지 겹쳐서 무조건 무제한으로 다른 서버에있는 정보를 마음대로 가져올수는 없다. 단적인 예로 그냥 프론트단에서 다른 서버의 데이터정보를 링크를 통해 가져오려고하면 CORS 이슈에 걸려버린다. 이는 서버단에서 처리해주어야 하는 문제이며 데이터는 자기 서버에있는 것만 쓰고 다른곳의 데..

* React 공식문서 번역 한글페이지 참 대단하고 고마우신 분들이다. 공식문서의 한글 번역으로 React 의 특징이나 튜토리얼을 보기가 한결 편해졌다. 여기서는 React 의 기본적인 특징을 알아보고 구직활동하면서 받았던 서면평가의 질의에 대한 답변 부분도 함께 작성해 나가려고 한다. 특징 기본적으로 내가 사용하면서 느낀점은 컴포넌트형태의 개발형태로 기존의 html 에서는 div, p, span 등 용도와 형태를 정확히 파악 할 수 없는 부분들이 있었는데 React 에서는 원하는 이름으로 컴포넌트 태그를 만들어 조립하듯이 끼워넣으며 UI 구성이 가능하다. 그리고 기존 html css js 에서는 이벤트나 상태변화를 나타내기위해 아주 많은 양의 코드와 복잡함이 필요했는데 React 에서는 state 로 ..

* 프로그래머스 코딩테스트 연습 > 정렬 > K번째 수 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 1. array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 2. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 3. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작..

My first React Native * 노마드코더의 React Native로 ToDo 앱 만들기 코스 계속 React 만 만져보다가 처음으로 React Native 앱을 만들어 보았다. 최근 면접과 서면질의 응답이 아주 큰 자극이 되었다. 빠른 시일내에 소스코드에 대한 설명을 붙여서 블로그와 Github 에도 업로드 할 예정이다. 느낀점 1. 변경사항 실시간 확인 사실 코틀린이나 Xcode 등 다른 모바일 앱 개발 툴은 써본적이 없어서 줏어들은걸로만 얘기하자면 별도의 빌드과정을 거쳐야 결과물 확인이 가능하다고 들은것같은데 아직 이부분은 공부가 부족해서 .. 어쨋든 RN 을 통한 개발자체는 웹 개발하듯이 실시간으로 확인하면서 바로바로 피드백받고 수정하고 또 기능을 만들어 나갈 수 있어서 여러가지로 편했..

Arrow Function( => ) - 기존 function 에 비해 구문이 짧고 - 자신의 this, arguments, super 또는 new target 을 바인딩 하지 않습니다. - 화살표함수는 항상 익명입니다. - 이 함수 표현은 메소드 함수가 아닌곳에 가장 적합합니다. - 따라서 생성자로서 사용할 수 없습니다. - MDN var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; console.log(materials.map(material => material.length)); // expected output: Array [8, 6, 7, 9] - materials 변수는 4개의 값을 가지는 배열을 가지고있습니다. - map() ..

* null : 자바스크립트의 원시 값 중 하나로 어떤 값이 의.도.적 으로 비어있음을 표현합니다 - MDN function getVowels(str) { var m = str.match(/[aeiou]/gi); if (m === null) { return 0; } return m.length; } console.log(getVowels('sky')); // expected output: 0 - getVowels() 함수는 1개의 인자를 받는다. - 블록스코프 내부에 m 이라는 변수에 str.match() 를 통해 정규현식으로 동일한 문자가 있는지 확인하고 그 값을 저장한다. - if 문으로 m 이라는 변수가 비어있으면 0을 리턴하고 - 그렇지않으면 m 에 저장된 배열의 갯수를 출력한다. - sky 문자..

181217 12월엔 꼭 취업을 해야지 라는 생각으로 약 10~15곳에 이력서를 지원했고 대부분이 이력서 서류에서 광탈해버렸다. 어쨋든 실력부분에서든 이력서나 자소서에서든 부족한 부분이 많기 때문이고 문제가 있다고 판단하였고 다시 돌아보면서 재정비를 해야 할 때 라는 생각이 들었다. 우선 블로그와 깃헙을 좀 체계적으로 관리를 해야겠다는 필요성을 느꼈다. 블로그 블로그의 목적을 한번 생각해보자, 블로그는 나의 생각을 정리하고 또 나를 브랜드화 시킬수 있는 좋은 도구이다. John Sonmez의 소프트스킬 이라는 책에서도 블로그의 중요성을 강조한다. 또 블로그는 다른사람과의 소통의 창구가 될 수 있고 개발자로서 역량이나 의사소통 능력을 높이는 데에도 도움이 된다. 또한 블로그만 잘 운영해도 수십만명과의 교류..

퇴사 18년 7월 약 2년동안 다니던 회사를 퇴직하면서 몇가지 계획을 세웠다. 1. 정보처리 자격증을따자 2. 공부하고싶은걸 공부해보자 3. 블로그와 깃헙을 꼭 운영하자 4. 포폴을 만들자 5. 12월엔 꼭 취업활동을 시작하자 1. 정보처리 자격증을따자 일단 첫번째는 반만 성공했다 정보처리기사와 정보처리 산업기사를 동시에 준비했는데 필기는 둘다 합격했지만 실기에서 정보처리산업기사만 붙어버렸다. (암기는 쥐약....) 생각보다 암기해서 풀어야할 내용이 많았고 이런게 실무에서 정말 쓸모가 있을까 할정도의 문제들이 나와서 ... 사실 자격증준비목적은 자격증의 취득도 있지만 알고리즘에 대해서 좀 개념을 잡을수 있을까 해서 시작했던 부분이 더 컸다. 2. 공부하고싶은걸 공부해보자 이것도 반만 성공하지 않았나 싶다..

TypeScript 란? - Microsoft 에서 개발 및 유지관리하는 오픈소스프로그래밍 언어이다. - JavaScript 의 모든 구문와 의미를 지원하면서 풍부한 구문과 추가 기능을 제공해준다. - 즉 JavaScript를 확장한 언어로 JS 언어의 특성을 침범하지않고 최신 ECMA 표준을 지원한다. - TypeScript 는 컴파일언어로 코드수준에서 미리 타입을 체크하여 오류를 잡아 낼 수 있다. - Javascript의 단점이자 문제점인 형변환, 호이스팅, 복잡성 문제를 해결할 수 있는 코드이다. greeting.ts class Student { fullName: string; constructor( public firstName: string, public middleInitial: string..

위장 링크 입출력 예 clothes return [ ["yellow_hat", "headgear"], ["blue_sunglasses", "eyewear"], ["green_turban", "headgear"] ] 5 [ ["crow_mask", "face"], ["blue_sunglasses", "face"], ["smokey_makeup", "face"] ] 3 풀이 function solution (clothes) { let newArr = clothes.map(a => a[1]); let unique = newArr.filter(function(item, pos) { return newArr.indexOf(item) == pos; }); let result = {}; let numberCase =..