개발
-
[2019.02.22] React로 Twittler 작업 완성..(하루만에..대박!)핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 23. 01:07
대박...오늘 아침까지 리액트 첫번째 프로젝트 작업한거 개념 정리하고, preCoure 과제로 진행했던 트위틀러를 똑같이 리액트 방식으로 구현해 보았다.솔직히 내일까지는 걸릴 줄 알았는데, 오늘 점심부터 작업해서 방금 구현을 다 끝냈다! # 기존의 과제 때 구현했던 페이스북 형식의 twittler를 React 방식으로 구현한 모습 외관 상으로는 변경된 점이 당연히 없다. 정말 많이 변한 부분은 안의 소스코드 내용이다. # 리액트로 작성한 소스코드 기존의 html, css, javascript로만 작성했던 것을 거의 뒤집어 엎었다. 리액트 방식으로 작업을 하니 코드 구조가 전체 다 바뀌고, 데이터를 주고받는 형식, 렌더링 방식 등이 전부 달라서...작업 중에 정말 많이 헷갈렸다. 그래도 첫번째 작업한 전화..
-
[2019.03.22] React로 작업한 첫번째 프로젝트를 진행해보며..핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 22. 14:16
이머시브 수강 전에 리액트를 어느정도 다뤄보는게 좋을 것 같아서 미리 공부를 하고 프로젝트를 진행해 보았다.리액트는 앵귤러처럼 프레임워크가 아니라 라이브러리 형식으로 붙여서 사용하는거라 쉬울 줄 알았는데, 역시나... 뭐든 쉬운건 없나보다..처음 리액트를 접할 때 기초개념을 잡아야 하는 부분이 의외로 많았다.. # 기초개념을 다져야 했던 부분ES6문법렌더링 개념과 방식가상의 DOMprops와 state 블로그와 영상을 엄청나게 뒤져보며 공부하고 코드를 끄적여 본 다음에, 프로젝트를 따라서 작업해 봤다. # 첫번째로 작업한 프로젝트 '전화번호부' 이름과 전화번호를 클릭하여 등록 버튼을 누르면 밑의 리스트에 해당 내용이 추가가 된다. 검색할 이름을 입력박스에 입력을 하면 실시간으로 리스트가 렌더링 되어 해당..
-
[2019.03.19] IAT 1차 재시험.. 이번엔 됐다!!핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 20. 08:17
정말 기다리고 기다리던 IAT 1창 재시험... 저번주에 괜히 큰 긴장으로 실수를 난발하여 떨어지는 바람에 너무 상심이 컸었다... 심지어 그때 딱 붙으면 뭘 할지 전부 계획을 세워놓았었는데, 계획이 틀어진 것도 있을 뿐 아니라, 다음주 재시험도 떨어지면... 그 다음 이머시브 기수로 가야해서 무려 1달 반 정도나 딜레이가 생겨버린다...(안돼...!!!!!)한달반이란 시간은 내게 너무 컸다... 어떻게든 이번 재시험때는 실수하지 않게 합격을 했었어야 했다. 그렇게 생각하다보니 오히려 또 더 떨리고 일주일이 지나가는 24시간 내내 계속 긴장상태고 잠도 제대로 자지 못했다...ㅜㅜ 정말 이번에는 실수하지 않도록 많이 풀었다... 풀고 지우고 또 풀고 지우고... 이 반복을 여러번 거쳤다.. 그리고 그냥 거..
-
[2019.03.13] 순차적으로 추가되는 연속 콜백함수 구현개발 블로깅 2019. 3. 13. 14:56
오늘 AMA시간에 클로저 관련된 문제를 더 풀어보고자, 클로저 관련 문제를 어디서 구할 수 있나 여쭤보니까, 엔지니어분께서 한 문제를 풀어보라고 제시해주었다. # 함수를 호출하는 방식과 해당 결과값1234567var call = recursive(); call(1); // 1call(1)(2); // 2call(1)(2)(3); // 6call(1)(2)(3)(4); // 10...cs # 처음에 이 문제를 접하고 생각이 들었던 문제풀이방식 한번씩 호출이 될 때마다 카운트를 증가를 시켜야한다. (콜백함수가 늘어나야하기때문에..)카운트만큼 return 값을 콜백함수로 넘겨줘야한다.반복적인 행위이므로 recursive하게 구현해야한다. # 해당 문제에 대한 알고리즘 구현 소스코드1234567891011121..
-
[2019.03.11] IAT 시험을 치룬 날...핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 12. 10:07
이 시험을 치기 위한 텀이 정말 너무 길게 느껴졌다...이미 공부는 할 만큼 한 것 같고, 이 감을 잃기 전에 얼른 시험을 치루고 싶은데.. 정말 시간이 가지 않았다..ㅜㅜ남은 시간 더 공부를 하고 싶어도 무엇을 더 봐야될지도 모르겠고, 더 보려고 하면 이미 지루해져서 의욕이 떨어졌다..그렇게 억지로 코드를 한번 더 보고 또 보고, 지우고 다시 풀기만을 반복했다. 당일이 되니까 괜히 긴장이 더 됐다. 7시에 시험인데, 5시쯤에 미리 패스트파이스 성수점으로 가서 대기하고 있었다. 미리 가면 뭐라도 더 공부가 될 줄 알았는데, 전혀 아니였다..ㅋㅋ 그렇게 7시가 가까워질수록 긴장감이 더해지고 떨렸다.. 이게 뭐라고 참..ㅜㅜ 그리고 7시가 되서 시험시작이 되었다!3문제 전부 분명히 내가 풀어본 문제고 어떻게..
-
[2019.03.06] 비동기 처리방식 Promise와 Async await개발 블로깅/Modern script 2019. 3. 6. 16:54
비동기적 통신방식인 AJAX가 있는데, 그것 말고 비동기적 처리 방식인 Promise가 따로 있다. 사실 둘의 무슨 차이인지는 모르겠다.AJAX는 통신이고, Promise는 함수처리를 비동기적으로 하는 것일까..? 우선 Promise가 향후에 많이 쓰여질 방식이라고 하는 것 같아, 사용방식에 대해 공부를 해봤다. # Promise 사용법 기본적인 사용 예제12345678910111213function delayP(sec){ return new Promise((resolve, reject)=>{ setTimeOut(()=>{ resolve('run!'); }, sec * 1000); }} let finalVal = delayP(1).then((result)=>{ console.log(result); ret..
-
[2019.03.01] Twittler 과제 하루만에 완료!!핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 2. 00:20
이번 과제는 직접 하나의 웹 페이지를 개발해 보는 과제였다.그 전까지는 자바스크립트만 다루더니, twittler과제 전까지, HTML과 CSS, 이벤트 핸들러와 id, class 등 심지어 Jquery 내용까지 나오더니, 갑작스레 웹 페이지를 제작하는 과제가...ㅎㅎㅎ;# 맨 처음 시작 부분처음 git clone하면 해당 화면이 이렇게 나온다. git 디렉토리에 몇가지 파일이 같이 들어있는데, 그것들을 이용하여 해당 웹 페이지에 정해진, 기능들이 작동하도록 구현하는 것이다. 추가적으로 페이지를 좀 꾸며도 되는 것 같다. # twittler 완성본 예시아무 기능도 없고, 아무것도 꾸며져 있지 않은 화면에서, 마지막에는 저렇게 버튼과 리스트, 입력박스를 배치하고 각 요소들이 정해진 기능들을 정상적으로 수행할..
-
[2019.03.01]javascript에서 함수 선언에 따른 차이점.개발 블로깅/Javascript 개념 2019. 3. 1. 23:49
javascript에서 함수를 선언하는 방식은 기본적으로 두 가지가 있다. (아마 더 있을 수도 있지만..)변수에 함수를 생성하여 할당하는 방법그냥 함수를 선언하는 방식이다.# 변수에 함수를 할당하는 방법123var addValue = function(a, b){ return a + b;}cs # 일반적으로 함수를 선언하는 방법123function addValue(a, b){ return a + b;}cs위 두 코드와 같이, 사용하려는 함수를 생성하는 방법이 두 가지가 있다.하지만 역시 이 두 가지에 대한 차이점이 있다는 것! 우선 '변수에 함수를 할당하는 방법'은, 해당 함수를 사용하기 전에, 먼저 그 함수가 위에 선언이 되어야 한다.1234567addValue(1, 2); //