Web

고차 컴포넌트 패턴(HOC)과 믹스인(Mixins)

하이오더컴포넌트는 리액트 진영에서 기반한 컴포넌트 개발 패턴이다. 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대로 끌어올리는 것에 장점이 있지만, 중간 컴포넌트가 하나 추가되므로 depth가 깊어질 수록 컴포넌트 구조가 복잡해지는 단점이 존재한다. 반대로 믹스인의 경우 HOC에 비해 쉽고 고차 컴포넌트에 대한 생각을 안해도 되지만, SOC(관심사 분리), 컴포넌트 테스트 측면에서 HOC에 비해 불리하다. 때문에 둘의 패턴을 적절히 활용해 반복되는 코드의 역할을 단일화시키며 재활용이 용이하게, 외부 종속성을 최소화 하는 것을 유의하며 적용해야 한다. 믹스인(Mixins) 🎄글로벌 믹스인(Global Mixins) 믹스인은 여러 Vue 컴포넌트에서 기능을 재사용하는 방법이다. 컴포넌트가 믹스인을 사용하면 ..

[JS]-1 : 호이스팅(Hoisting)/ 타입스크립트

무작정 프론트로 프로젝트를 시작하며 느낀 JS 지식 및 활용-1 백단만 개발하다 본격적으로 두달동안 Vue로 프로젝트를 하며 Javascript에 대한 코어 지식이 부족하다는 것을 뼈저리게 느꼈다. 이번 프로젝트를 하며 JS의 코어 지식들이, 단순히 "이론적으로 암기할 것"이 아닌 효율성과 유지보수, 안정적인 프로덕트를 위해 필수적으로 알아야 한다는 것을 깨달았다. 다음은 실제로 프로덕트를 개발하며 느낀 JS의 문제점들, 문제를 해결하기 위해 도입하고자 하는 것들에 대한 내용이다. 그중 호이스팅과 타입안정성에 대해 먼저 말해보고자 한다. Javascript로 개발한다는 것은 생각보다 쿨하지 못한 과정이었다. 동적 타이핑 언어로 런타임에러를 뱉는 점, 타입안정성이 떨어지는 점, 관용적인 문법 표현들은 오히..

Vue 점진적 도입(2): SFC 전환 경험 공유

이 글은 jQuery 기반의 미디어 플랫폼 모바일 앱에 Vue를 도입한 사례를 정리한 내용입니다. 웹뷰에 Vue를 도입하거나 기존 레거시와 함께 점진적 도입을 고민하고 있으신 분들을 위해 공유합니다. 웹뷰를 좀 더 네이티브 앱에 가깝게 구현하자 기존에 작성했었던 Vue 점진적 도입 경험기(1) 에 이어 MBC 앱을 지속적으로 담당하게 되면서 연말 개편을 맡게 되었다. 지난 버전에서 웹뷰를 도입하며 vue 2.0 버전 cdn을 다운받아 사용해 보는 것을 시작으로, 각 페이지 별로 JS를 로딩하는 고전적 MPA구조로 작성했다. 처음 버전에서는 웹팩의 엔트리를 이렇게 작성했다. module.exports = { devtool: 'source-map', entry: { main: './src/entry/main..

[모듈번들링] Module Bundler: Webpack 도입 적용 경험 #1,2

도입 배경 기존 프로젝트 포함 현재 진행하고 있는 프로젝트 또한 보통의 js 모듈들을 로딩받아 사용하고 있다. 학부생때부터 번들링을 경험해본적이 없어서 그냥 당연하게 사용해왔고 사내에서 또한 그랬다. 이번 프로젝트를 진행하면서 더욱이 번들링의 필요성을 느끼고 도입해 적용해 보았다. 번들링을 함으로써 기대할 수 있는 효과는 다음과 같다. 1. 로 이어지는 코드의 간결화 2. 네트워크 코스트의 이점 3. 코드 난독화, 압축 등 여러 기능 제공 일단 script로 이어지는 지저분한 코드들이 파일들 마다 이루어지던 서버요청을 한번에 요청/응답을 받으므로 네트워크 코스트가 줄어들었다. 또한 하나하나 요청을 함에 따라 발생하는 js 요청 순서도 굉장히 중요했는데, 이로 인해 발생하는 버그를 방지할 수 있었다. 예를..

Vue.js로 점진적 도입 경험 공유

도입 배경 부족 하디 부족한 주니어 개발자 코딩 배우는 학생입니다. 기존 jQuery 레거시 기반을 Vue.js를 프로젝트에 적용한 경험 및 후기 공유입니다...! 기존의 회사 프론트 스택은 CSR(ClientSide Rendering)인 경우 Jquery, Jquery Template 기반으로 되어있었고, 어드민과 같은 사이트의 경우 SSR(Serverside Rendering) 기반(JSP, Razor 등)으로 구성되어 있었습니다. 새롭게 프로젝트를 시작하게 되면서 기존 스택을 고수하지 않은 이유에는 3가지가 있습니다. 1. 코드 관리의 어려움 2. 데이터 바인딩 및 화면 렌더링 시 성능 문제 3. 코드의 중복(레거시의 문제점), 반응형 지원 기술 조사 및 안정성 검토 후 두 달간 제가 맡은 프로젝트..

[ASP .NET C#] 개인정보 암호화 적용 사례

내가 맡고 있는 서비스의 개인정보가 DB에 그대로 노출되는 이슈가 있어(오래된 서비스이다), 회원 패스워드와 휴대폰 번호, 이메일에 대해 암호화를 진행했다. 비밀번호는 SHA-1 방식, 휴대폰 번호와 이메일은 AES를 채택했다(이유는 본문에). 🔊해시(HASH) / 암호화(Encryption) 해쉬 해시는 동일한 입력값을 받아 동일한 출력값을 보장한다. 또한 특징으로 조금만 달라져도 해쉬된 값은 크게 달라지며(눈사태효과) 복호화가 되지 않는다. 예를들어 입력값 A에 의해 B가 출력되었다면, 출력된 B값만 주어졌을 때는 입력값 A를 계산적으로 찾는 것이 불가능하다. 그래서 이와 관련된 보안이슈도 무차별대입공격에 의해 이루어지며 최근 SHA-1의 충돌 이슈가 존재하기도 한다. 해쉬의 대표적인 예로 MD5,S..

우리가 Base64를 사용하는 이유

7L2U65Sp67Cw7Jqw64qUIO2VmeyDnQ== '코딩배우는 학생'의 Base64로 인코딩한 문자열의 예시이다. Base64 는 Binary 데이터를 아스키 코드 일부와 일대일로 매칭되는 문자열로 단순 치환되는 인코딩 방식이다. Base64는 6bit당 2bit의 OverHead의 발생으로 기존 데이터보다 30%이상 길어지게 되며 여기에 Encoding, Decoding의 로직까지 추가되므로 성능에도 영향을 끼칠 수 있다. 이러한 단점에도 Base64를 사용하는 이유는 무엇일까. 📮Base64를 사용하는 이유 Base64를 사용하는 가장 큰 이유는 Binary 데이터를 텍스트 기반 규격으로 다룰 수 있기 때문이다. JSON과 같은 문자열 기반 데이터 안에 이미지 파일등을 Web에서 필요로 할때..

Web Protocol 정리

🎮HTTP Hyper Text Transfer Protocol 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다. 웹 서버에서 통신하기 위해 사용하는 하나의 규칙으로써 4가지 요청형식이 존재한다. GET : 문서 요청의 역할. 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로써 응답한다. - 조회 HEAD : 상태 정보 요청. GET과 동일한 형태의 응답. 문서 복제X POST : 데이터를 서버로 송신. 서버는 해당 데이터를 아이템에 붙임 - 생성 PUT : 데이터를 서버로 송신. 서버가 특정 아이템을 대체함 - 수정 HTTP 동작 클라이언트에서 브라우저를 통해 서비스를 요청(request)을 하면 서버에서는 해당 요청사항에 맞는 결과를 찾아 사용자에게 응답(response)하는 형태로 동작한다...

오픈API활용 주소

😃오픈 API 활용 주소들 공공데이터포털 네이버 개발자 API 카카오 개발자 API Google Developers facebook for developers API 스토어

클라이언트에서 잠재적 위험이 있는 Request.Form 값을 발견했습니다

가끔 웹개발 중 DB에 HTML요소가 포함된 값을 전달할 때 발생하는 오류이다. querystring에 값을 포함해서 나는 발생했는데 이는 프로그램 자체적으로 해킹에 대한 방지요소로 포함된 부분이다. 클라이언트에서 HTML 스크립트가 포함된 내용을 전송 받을 경우 XSS(Cross-site scripting)와 같이 보안적인 이슈가 발생하기 때문에 .NET 기반 웹 기술(ASP.NET, MVC, Razor)의 기본설정에서는 허용을 하고 있지 않는다. 하지만 특히 에디터를 사용하는 경우와 같이 CONTENTS 자체에 HTML요소가 포함된 경우에는 부득이하게 사용을 해야하는데 이때는 따른 처리없이 간단한 조작으로 허용할 수 있다. 일단 web.config 에서 validatieRequest ='false'로..

[.NET] 비동기 ZIP File Download API (서버 올리기)

저번 게시글에서 작성한 에 대해 클라에서 다운로드 받는 로직을 구현했다. 매개변수 값을 토대로 서버에서 파일을 찾아 다운로드 받으면 되는 방식. 동기식은 await, async를 제거하면 끝. 많이 리서치 한다고 해도 아직 실무에 직접 적용해 성능 비교가 어려운 것 같다. 1. 코드 [HttpGet] [Route("api/zipDownload")] public async Task SetFileZipDownLoad(string fileName) { //서버 zip파일 찾기 string zipFileURL = HttpContext.Current.Server.MapPath("/zip/" + fileName + ".zip"); WebClient req = new WebClient(); HttpResponse r..

[.NET] 비동기 다중파일 ZIP File 생성 및 저장 API (서버 올리기)

최근 프로젝트를 진행하며 ZIP 파일을 생성해서 서버올릴 일이 있어 이것저것 구글링 하던도중 MemoryStream, ZipArchive, FileStream 을 통해 구성하는 법으로 구현해 보았다. 기존의 서버에 올라가있는 여러개의 이미지 파일을 묶어 서버로 zip file로 생성하고 저장 해보자. 1. 코드 [HttpGet] [Route("api/zipUpload")] public async Task SetFileZip() { //서버에 폴더있는지 조회, 없으면 생성 DirectoryInfo dir = new DirectoryInfo(HttpContext.Current.Server.MapPath("/data/zip/")); if (!dir.Exists) { dir.Create(); } List fil..

[프로젝트 2] 유기견 입양 플랫폼 웹사이트

프로젝트 GitHub https://github.com/choipureum/Abandoned_Dogs_Save_Project choipureum/Abandoned_Dogs_Save_Project 2020 KH정보교육원 | :dog2:세미프로젝트 유기견플랫폼 웹 프로젝트입니다 | [NCS]UIUX엔지니어링 및 응용SW엔지니어링 양성과정 - choipureum/Abandoned_Dogs_Save_Project github.com 프로젝트 명 : 유기견 입양 플랫폼 프로젝트 기간 : 2020.05.20~2020.07.02 프로젝트 주요 기능 : 1. 관리자 페이지 메인 : 웹사이트 각종 상태표시, 상태 Progress-bar, 회원가입 차트그래프, 입양률 파이그래프, 입양신청 header 알림벨 ..

[프로젝트 1] 한양대학교 튜터링 매칭 웹페이지

프로젝트 GitHub https://github.com/choipureum/Software_Capstone_Design2_Project choipureum/Software_Capstone_Design2_Project 2020 한양대학교 | 소프트웨어 융합 캡스톤디자인2 튜터링매칭 웹 프로젝트팀입니다 - choipureum/Software_Capstone_Design2_Project github.com 프로젝트 명 : 튜터링 매칭 웹사이트 프로젝트 기간 : 2020.03~2020.06 프로젝트 주요 기능 : 로그인/회원가입/로그아웃 기능 회원정보 수정 커뮤니티(게시판, 댓글) 운 댓글을 통한 매칭시스템 프로젝트 개발환경 : Apache Tomcat 9.0 SpringFramework Mybatis Maven

[PROGRAMMERS Level-4] 보호소에서 중성화한 동물 [Oracle]

문제 설명 ANIMAL_INS 테이블은 동물 보호소에 들어온 동물의 정보를 담은 테이블입니다. ANIMAL_INS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, INTAKE_CONDITION, NAME, SEX_UPON_INTAKE는 각각 동물의 아이디, 생물 종, 보호 시작일, 보호 시작 시 상태, 이름, 성별 및 중성화 여부를 나타냅니다. NAME TYPE NULLABLE ANIMAL_ID VARCHAR(N) FALSE ANIMAL_TYPE VARCHAR(N) FALSE DATETIME DATETIME FALSE INTAKE_CONDITION VARCHAR(N) FALSE NAME VARCHAR(N) TRUE SEX_UPON_INTAKE VARCHAR(N)..

[PROGRAMMER Level-4] 입양 시각 구하기(2)[Oracle]

문제 설명 ANIMAL_OUTS 테이블은 동물 보호소에서 입양 보낸 동물의 정보를 담은 테이블입니다. ANIMAL_OUTS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, NAME, SEX_UPON_OUTCOME는 각각 동물의 아이디, 생물 종, 입양일, 이름, 성별 및 중성화 여부를 나타냅니다. NAME TYPE NULLABLE ANIMAL_ID VARCHAR(N) FALSE ANIMAL_TYPE VARCHAR(N) FALSE DATETIME DATETIME FALSE NAME VARCHAR(N) TRUE SEX_UPON_OUTCOME VARCHAR(N) FALSE 보호소에서는 몇 시에 입양이 가장 활발하게 일어나는지 알아보려 합니다. 0시부터 23시까지, 각..

[PROGRAMMERS Level 4] 우유와 요거트가 담긴 장바구니(Summer/Winter Coding(2019)) [Oracle]

문제 설명 CART_PRODUCTS 테이블은 장바구니에 담긴 상품 정보를 담은 테이블입니다. CART_PRODUCTS 테이블의 구조는 다음과 같으며, ID, CART_ID, NAME, PRICE는 각각 테이블의 아이디, 장바구니의 아이디, 상품 종류, 가격을 나타냅니다. NAME TYPE ID INT CART_ID INT NAME VARCHAR PRICE INT 데이터 분석 팀에서는 우유와 요거트를 동시에 구입한 장바구니가 있는지 알아보려 합니다. 우유와 요거트를 동시에 구입한 장바구니의 아이디를 조회하는 SQL 문을 작성해주세요. 이때 결과는 장바구니의 아이디 순으로 나와야 합니다. 예시 예를 들어 CART_PRODUCTS 테이블이 다음과 같다면 CART_PRODUCTS 테이블 ID CART_ID NA..

[SQL] 변환함수,서식지정자

1. 변환 함수 - 형변환이라고도 한다 - 숫자, 문자, 날짜의 데이터를 서로 형변환 한다. to_number : NUMBER포맷(서식)을 가진 VARCHAR2 -> NUMBER ex)'123' ->123 to_char : NUMBER,DATE -> 원하는 포맷(서식)의 VARCHAR2 to_date : DATE포맷(서식)을 가진 VARCHAR2 -> DATE 1-1 tochar(number) to_char(number) to_char(number,format) 두가지 형태로 사용할 수 있다. **숫자 서식 지정 문자 0 : 숫자가 들어갈 자리를 확보, 남는 자리는 0으로 LPAD한다 9 : 숫자가 들어갈 자리를 확보, 남는 자리는 공백으로 LPAD한다 . : 소수점 구분 문자 추가(정수부, 소수부) ,..

[SQL] 함수(Functions)

1. ORDER BY (정렬) ORDER BY col1, col2...( co1로 정렬, 중복되면 col2로 정렬) **컬럼명 뒤에 ASC, DESC를 추가한다 1-1 NULL을 포함하는 컬럼의 정렬 NULL데이터를 원하는 위치에 정렬시키는 법 NULLS FIRST : NULL값을 처음으로 NULLS LAST : 마지막으로 1 2 SELECT empno, ename, comm FROM emp ORDER BY comm DESC NULLS LAST; SELECT empno, ename, comm FROM emp ORDER BY comm DESC NULLS FIRST,empno; 2. DISTINCT (중복제거) 중복데이터를 제거하는 키워드 이며 SELECT 키워드와 함께쓰인다. SELECT키워드 바로 뒤에 ..

[SQL] 정의와 기본문법

1. SQL 이란? SQL은 Structure Query Language의 준말로 데이터 베이스의 자료에 대한 검색(조회), 관리, DB생성, DBMS객체 관리등을 수행할 수 있는 언어이다. 스크립트 언어로 한줄씩 명령을 수행한다. SQL의 문법 종류는 크게 3가지로 분류된다. 데이터 정의 언어(DDL: Data Definition Language) 데이터 조작 언어(DML: Data Manipulation Language) 데이터 제어 언어(DCL: Data Control Language) 1-1 데이터 정의 언어(DDL) CREATE (데이터베이스 개체의 정의) DROP (데이터베이스 개체 삭제) ALTER (데이터베이스 개체 정의 변경) 1-2 데이터 제어 언어(DCL) GRANT (특정 데이터베이..