프로그래밍 60

매우 뒤늦은 카카오테크캠퍼스 1기 최종프로젝트 소개

카테캠 수료를 한지 두달이 지났다. 수료한 다음달 12월에는 이번학기 카테캠 + 현장실습으로 고생했으니 좀만 쉬어야지 라는 마인드 였지만 싸피 면접, 소프티어 시험을 준비했었다. 카테캠 마지막에 팀원들한테 꼭 정리하세요 말해놓고 내가 안하고 있는것도 웃긴 일이었다. 준비했던 싸피 소프티어 모두 붙게 되었고 나는 소프티어를 선택하게 되었다. 면접이나 시험내용 후기는 기밀이라 리뷰안하려고 한다. 소프티어는 오프라인 교육이라 상경하게 되었고 나는 올라가는 날을 기다리며 가족, 친구들과 놀았다. 그래서 해야지 해야지 하다가 이 지경까지 오게 된것이다. 기억이 가물가물 하지만 프로젝트로 뭘 했는지 적어보려고 한다. 기획 카카오측에서 전남대, 부산대 학생들을 여수 마리나 호텔? 리조트?에 2박 3일동안 가둬놓고 아..

현장실습 후기

https://b1ackhand.tistory.com/246 현장실습 어노테이션 툴 제작기 리뷰 소개 4학년 2학기 되서 광주에 있는 인트플로우 회사에 현장실습을 하러 왔다. 기간은 9월 ~ 11월. 첫 날은 금요일이여서 그런가 딱히 뭔가를 하진 않고 어떤 회사인지에 대한 간단한 설명?을 듣고 b1ackhand.tistory.com 이 글을 보면 알다 시피 현장실습을 했고 지금은 끝났다! 저 글은 무엇을 했는지에 관한 글이라면 이 글은 이후에 무엇을 했고 현장실습을 통해 무엇을 배웠는지? 에 관한 글일 것 같다. 우선은 세 달에 걸쳐서 현장실습을 했는데 첫 한달가량을 위에 있는 저 어노테이션 툴과 보내고 다음 일을 맡기 전까지는 카카오테크캠퍼스 플젝들을 하다가 새로운 프로젝트의 백엔드 단을 맡게 되었다...

카카오 테크 캠퍼스 1기 수료 후기

23년 봄을 시작으로 23.11.17 (토) 최종발표를 마치고 마무리 하게 되었다. 3단계의 경우 운영진쪽에서 배정한 랜덤한 팀원 FE 3, BE 3이 10주에 걸쳐서 하나의 프로젝트를 완성하는 것이다. 3~4주간 기획 강화 그리고 나머지 기간동안 프로젝트를 진행하게 된다. 학기 중이기 때문에, 시험기간이나 현장실습 ( 나 ) 같은 이슈가 있어서 여러모로 힘들었던 것같다. 주마다 한번씩 특강, 프로젝트에 대한 멘토링 등이 있어 개발 할 시간 내기도 힘들었다. 프로젝트에 관련된 내용은 다른 포스트에 정리 하고자 하고 팀을 어떻게 운영 하였는가 에 대해서 정리 해 보려고 한다. 일단 서비스는 다음과 같다. https://b1ackhand.tistory.com/258 팀 운영 초반 내가 팀의 조장을 맡게 되었..

Java 문법 Integer, int 그리고 final

int, Integer Java에서는 int Integer이 따로 있다. 다른 사람 코드를 보면서 알게 된 사실이다. 큰 차이는 다음과 같다. int : 원시 자료형 Integer : nullable한 Wrapper class 알고리즘 문제 해결 같은 경우에는 int를 사용하여 동작을 빠르게 하는게 좋을것 같고 실무의 경우에는 Integer를 사용하여 Optional을 따로 안걸어서 null check를 해줄 수 있는 것이 좋을 것 같다. final Java로 BE 프로젝트를 하다보면 어떤 경우에 final이 붙어있는 함수도 있고 어떤 경우에는 없는걸 보고 어떤 문법인지 알아보게 되었다. final이 어디에 붙냐에 따라 의미가 달라진다. final + 변수 : 변수를 수정 할 수 없다. 초기화한후 변경 ..

자바스크립트 난독화 보안

어노테이션 툴 개발중에 들었던 생각이었는데, 디버깅하기위해서 console.log(변수) 로 찍어보면서 크롬 개발자 도구(F12) 콘솔에서 변수를 찍어볼 수 있다는것이 개발자 뿐만 아니라 사용자도 해볼 수있다는 것이 데이터 변조나 보안에 위험이 될 수 도 있다는 생각이 들어서 찾아봤던 개념이다. 자바스크립트 특성상 브라우저에 실행되는 js파일들을 사용자가 그대로 볼 수 있다고 생각했기 때문이다. 그래서 검색해보니 나왔던 결과는 과거에 웹해킹 문제들에 나올것만 같았던 방식들이었다. 내가 생각한 것들이 역시 과거에도 다뤄졌던 것 같다. 다양한 방법의 난독화가 존재하는데 1. split 사용 문자열들을 나눠서 흩뿌려놓고 읽기 어렵게 한다. 2. 문자열 인코딩 문자열을 인코딩해서 사람이 알아먹을 수 없는 문자로..

현장실습 어노테이션 툴 제작기 리뷰

소개 4학년 2학기 되서 광주에 있는 인트플로우 회사에 현장실습을 하러 왔다. 기간은 9월 ~ 11월. 첫 날은 금요일이여서 그런가 딱히 뭔가를 하진 않고 어떤 회사인지에 대한 간단한 설명?을 듣고 3명이서 갔는데 한 분은 인공지능 부서 쪽 나랑 다른 한 분은 서비스 부서으로 가게 됬다. 처음으로 하게 될일은 사내에서 사용하고 있는 어노테이션 툴이 급하게 만들어진거다 보니 수정보완에 여러 애로사항이 있어서 개선사항을 기획하고 거기에 요구사항까지 추가하는 것이었다. 어노테이션 툴 이란? 인공지능에서 라벨링 할때 물체에 boundingbox를 달거나 라벨을 다는 것에 도움을 주는 도구이다. 하지만 우리가 개발할 툴은 아무것도 없는 이미지에서 라벨링을 하는것이 아니라, 1차적으로 인공지능이 라벨링한 데이터를 ..

AJAX란? Async? Await? Axios?

Asynchronous Javascript and Xml 비동기 방식으로 전체페이지가 아닌 페이지 일부만 로드하는 기술 동기방식 : 직렬 비동기 방식 : 병렬 XMLHttpRequest Object 생성 -> Callback 함수 생성 -> Request 장점 : - 빠른 반응성 - 서버 부하감소 - 백그라운드 데이터 처리 단점 : - 브라우저 히스토리 관리 - 검색엔진 최적 Async, Await 비동기 처리를 하기 위한 최근 문법 promise를 반환한다. async function func(){ await method(); } promise가 해결 되기 전까지 이후에 코드를 실행하지않는다. Axios 는 ? 아예 별개의 개념 ajax를 구현하기 위해서 사용하는 비동기 통신 라이브러리. 비동기 통신을..

onclick vs addEventListner , id vs class

onClick vs addEventListner 이것도 역시 개발을 하다 의문이 생겨 공부하게 된 내용이다. 클릭 동작의 경우에 초창기에는 거의 onclick 으로 코드를 짰다. 하지만, 검색들을 통해 이것저것 알아보다 보니 많은 사람들이 addEventListner를 사용하길래 어떤 차이가 있나 알아봤다. 가장 큰 이유는 onclick은 하나의 event만 추가할 수 있고 addEventListner는 여러 이벤트를 누적해서 실행 시킬 수 있다. 사소한 차이가 있다면 onclick은 모든 브라우저에서 사용가능한데, addEventListner는 오래된 브라우저는 지원하지않는다. addEventListner는 저번에 배운 버블링, 캡쳐링을 적용할 수 있다. 이러한 점들을 고려해서 리팩토링 할때 모든 on..

버블링과 캡처링

저번과 마찬가지로 현장실습할 때 의문점이 생겨 공부하다가 알게된 개념이다. 어노테이션툴은 백엔드 보다 프론트에서 작동하는게 많았기 때문에 클릭 드래그 등을 하다가 작동하지 않을때 검색해 보았다. 버블링 내부의 버튼을 클릭했을때 외부에 할당한 핸들러도 동작하는것이다. 즉, 자식요소의 이벤트가 동작할때 최상단에 도달할떄까지 각 요소의 이벤트가 동작한다. event.stopPropagation() 을 이용하여 버블링을 멈출 수 있다. 캡처링 주로 사용되지 않는다고한다. 이는 반대로 이벤트가 하위요소로 전달될때 쓴다고한다. capture : true 옵션으로 동작한다. 참고 1. https://ko.javascript.info/bubbling-and-capturing

자바스크립트 싱글스레드

도입 최근 현장실습 가서 어노테이션 툴을 개발하다가 생긴 의문점이었다. react같은 프레임워크를 사용하지않고 html, css, javascript를 쓰고 bootstrap, fastapi를 사용했다. 본문 1. fabric.js 를 사용하는데 객체를 edit, add 할 때 변수등의 데이터를 어떻게 관리해야할까? - local storage, session storage 를 사용하여 새로고침 또는 종료해도 작업하던 데이터가 남아있게했다. - 변수처럼 class, id를 사용했는데 이는 이렇게 사용하는게 맞는지를 잘 모르겠다. 2. 바닐라 자바스크립트로 개발을 하다 보니 html 파일 밖으로 빼서 관리를 해주는데 어떤 코드들은 html 내부에서 로 실행하면 동작하는데 어떤 코드들은 분리하니 작동을 잘 ..