nunu company

프론트엔드 영역은 근 몇 년간 급격한 변화와 발전이 있었습니다. 웹에서 그림을 그리고 게임도 하며 프로젝트 일감, 일정을 관리합니다. 과거 script로 정적, 단순 동적 웹 사이트를 구축하던 시절과는 달리 요새는 복잡한 기능들이 구현되고 있습니다 과거 웹사이트 요즘 웹 어플리케이션 그렇다 보니 필연적으로 성능 이슈가 발생하게 됩니다. (ex..스크롤이 뚝뚝 끊겨요, IE11에서 로딩이 느립니다, 간혹 가다 멈춰요..) 프론트엔드 성능을 개선하게 될 경우 어떤 효과가 있을까요? 빠른 로딩 속도 -> 사업 지표 향상 -> 사용성 개선으로 직결됩니다 전 세계적으로 많이 사용되는 소셜 네트워크 서비스 핀터레스트의 성능 개선 후 사업 지표입니다. 성능 개선 전 핀터레스트 모바일 웹의 로딩 시간은 무려 23초였다..

Why So Serious? Just For Fun. No Fun No Gain. 안녕하세요. 누누 컴퍼니의 으악SOUND입니다. 오늘은 아나콘다를 설치하는 방법에 대해 알아보도록 하겠습니다. 아나콘다는 여러 수학 및 과학 패키지들을 기본적으로 포함하고 있습니다. 특히 머신러닝(Machine Learning)이나 데이터 분석(Data Analysis)을 할 때 이용한다면 여러 이점을 가질 수 있습니다. 또한 가상 환경을 손쉽게 구축하고 관리할 수 있는 기능도 제공하기 때문에 파이썬을 이용한 개발 효율을 극대화할 수 있습니다. www.anaconda.com/products/individual#Downloads Anaconda | Individual Edition Anaconda's open-source I..

안녕하세요. 손누누입니다. 오늘은 "UI UX 디자이너"라는 타이틀을 적었지만, 모든 '디자이너'들이 사용하는 소프트웨어에 대한 특징을 이야기해보고자 합니다. 모든 '디자이너'들이 가장 많이 사용하는 소프트웨어는 바로!! 포토샵과 일러스트입니다 ㅎㅎ 포토샵은 비트맵 기반이고, 일러스트는 백터 기반입니다. * 비트맵: 점(픽셀, 네모, 사각형)이 모여서 만들어진 이미지입니다. 점이 많이 모일수록 해상도가 높아져 이미지가 더욱 더 선명해집니다. 비트맵의 장점은 백터와 달리 다양한 색상과 명도차를 자연스레 보여준다는 점입니다. 그렇지만 해상도가 높아질수록 용량이 많이 차지하기 때문에 다소 무거운 단점이 있습니다. * 백터 : 점과 점을 잇는 선들이 모여 수치를 이용해서 만들어진 이미지입니다. 이미지 확대 시 ..

Why So Serious? Just For Fun. No Fun No Gain. 안녕하세요. 누누 컴퍼니의 으악SOUND입니다. 한국어 자연어 처리를 하다보면 자모를 분리해야하는 일이 가끔 생깁니다. 구글에서 "한글 자모분리"를 검색하면 다양한 결과물의 소스코드를 발견하실 수 있고, 이를 가져다 사용하실 수 있습니다. 또한 라이브러리 형태로 되어있는 모듈을 다운로드받아 진행하실 수도 있겠습니다. 그래서 이번 포스트에서는 자모를 분리하는 소스 코드도 소개하지만 조금 더 원론적인 이야기를 해보려 합니다. (그래서 데이터베이스는 언제..?) 유니코드를 이용하여 한글의 자모를 분리하는 것은 계산식이 들어가게 됩니다. 계산식을 도출하기에 앞서 한글의 기본 구성에 대해서 알아보겠습니다. 한글의 기본 구성은 아래와..

gRPC(Google Remote Procedure Call)는 모던하고 어떤 환경에서나 실행할 수 있는 고성능 오픈소스 RPC 프레임워크입니다. 먼저, RPC가 무엇인지 알아보겠습니다. RPC RPC란 원격 프로시저 호출의 약자로, 클라이언트 애플리케이션에서 백엔드 서버(gRPC서버)의 메소드를 마치 자신의 메서드를 호출하는 것처럼 직접 호출할 수 있습니다. 이는 MSA환경의 서비스를 보다 쉽게 구축할 수 있게 합니다. 구글이 제공하는 RPC 통신 기술을 gRPC라 칭합니다. 개념 자체는 RPC (Remote Procedure Call) 와 크게 다르지 않지만, 세부 구현에 있어서 여러 차이점이 존재합니다. Protocol Buffers RPC는 클라이언트와 서버 간의 데이터를 주고받기 위해서 직렬화/..

지난 5월, Facebook에서 새로운 React 상태 관리 라이브러리를 발표하였습니다. Facebook에서 공식으로 지정한 상태 관리 라이브러리는 아니지만, 처음 개발한 상태관리 라이브러리라는 점에서 큰 주목을 받고 있습니다. 아직은 실무에 적용하기에는 이른 베타 버전(v0.0.13) 입니다. 점유율이 점차 증가하고 하고 있고 해외에서는 Redux 만큼 관심이 뜨겁다고 합니다. Recoil 세팅 $ create-react-app app $ cd app $ yarn add recoil Recoil 튜토리얼에서는 ESLint 설정을 권장하고 있습니다. { "plugins": [ "react-hooks" ], "rules": { "react-hooks/rules-of-hooks": "error", "reac..

Why So Serious? Just For Fun. No Fun No Gain. 안녕하세요. 누누 컴퍼니의 으악SOUND입니다. 원래 계획대로라면 데이터베이스에 대한 다음 시리즈를 포스팅해야 하는데, 금주 개발을 진행하며 한 번쯤 공유하고 싶은 내용이 생겨 주제를 바꾸게 되었습니다. 다음 포스팅에서는 다시 데이터베이스를 주제로 돌아오겠습니다. 오늘 공유하고 싶은 내용은 가상 환경에 대한 이야기입니다. 가상 환경은 Python 뿐만 아니라 버전에 민감한 언어라면 필수적으로 사용해야 하고, 민감하지 않더라도 쾌적한 개발 환경을 위해 사용하는 것이 좋습니다. 저는 현재 Python을 사용하고 있기 때문에 Python을 기준으로 가상 환경의 중요성과 가상 환경 구축을 도와주는 모듈들을 비교해보는 시간을 갖도록..

안녕하세요 :) 손누누입니다. 이번 주는 저번 주에 공지한 내용과 달리 ㅠㅠ 다른 주제를 가지고 글을 포스팅을 해보고자 합니다. 회사 적응하느라 ㅠㅠ display: flex; 에 대한 내용을 정리하지 못하여, 잠시 미루게 되었습니다. ㅠㅠ 그 대신 오늘은 토이프로젝트를 진행하면서 느꼈던 저의 경험과 토이 프로젝트를 진행하면서 주의해야 할 점에 대해서 여러분과 공유해보고자 합니다 :) ( 우왕!! 짝짝짝 >_

서버로부터 받은 토큰 어디에 저장할까? 브라우저의 localStorage or sessionStorage에 담아서 사용한다. 브라우저의 쿠키를 사용한다 1. localStorage or SessionStorage에 담아서 사용할 경우 사용하기가 매우 편리하고 구현하기도 쉽다. 단, 누군가 페이지(ex. 게시글)에 악성 스크립트를 삽입한다면 쉽게 토큰을 탈취 당할 수 있다. (XSS 공격) 2. 쿠키에 담아서 사용한다 쿠키 역시 XXS 공격에 노출되어 있지만 httpOnly라는 속성을 활성화하면 자바스크립트를 통해 쿠키를 조회할 수 없으므로 악성 스크립트로부터 안전하다. 그 대신 CSRF(Cross Site Request Forgery)라는 공격을 받을 수 있다. 결론 CSRF 공격은 백엔드에서 reque..

Why So Serious? Just For Fun. No Fun No Gain 안녕하세요. 누누 컴퍼니의 으악SOUND입니다. 저번 포스팅에서 설명했듯 네트워크가 아닌 새로운 주제에 대한 요청이 있어 투표를 진행했고, 투표 결과 데이터베이스로 주제가 정해졌습니다. 데이터베이스의 포스팅 진행 계획은 먼저 데이터베이스 기초에 대한 내용을 다룬 뒤에 기초적인 SQL 사용법에 대한 내용을 다룹니다. 그 뒤에는 데이터베이스를 설계하는 방법에 대한 내용이나 심도 있는 SQL 사용법에 대한 내용을 다룰 예정입니다. 기회와 시간이 허락한다면 데이터베이스마다 가지고 있는 고유한 기능들에 대해서도 소개할 수 있으면 좋겠습니다. 앞으로 얼마 기간동안 다루게 될 SQL 실습에서는 Oracle Database를 사용할 것입니..